/* @font-face para Inter/Geist self-hosted se suma cuando estén los archivos en assets/fonts */

body {
  background: var(--bg-000);
  color: var(--text-200);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3 {
  color: var(--text-100);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-300);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 3px;
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--bg-000);
}

.btn--primary:hover {
  background: var(--accent-strong);
}

.btn--ghost {
  border: 1px solid var(--line-300);
  color: var(--text-200);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--text-100);
}

.btn--cta {
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--line-300);
  color: var(--text-200);
}

.btn--cta:hover {
  border-color: var(--accent);
  color: var(--text-100);
}

/* Flecha "→" que acompaña a botones/links: se corre 4px al hover (master doc §41 "Links",
   150-220ms — rango hover, §7.1). Selector por atributo a propósito: cubre todos los ítems
   con este patrón (btn, text-link, link-list) sin tener que tocar cada template. */
.btn span[aria-hidden="true"],
.text-link span[aria-hidden="true"],
.link-list__item span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 200ms ease;
}

.btn:hover span[aria-hidden="true"],
.text-link:hover span[aria-hidden="true"],
.link-list__item:hover span[aria-hidden="true"] {
  transform: translateX(4px);
}

/* ===== Reveal por sección al hacer scroll (master doc §41 "Secciones") =====
   Clip/mask, no fade-up: sin JS o con prefers-reduced-motion el contenido queda
   siempre visible (progressive enhancement, ver header.js). */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion main > section {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: opacity 650ms ease, clip-path 650ms ease;
  }

  html.js-motion main > section.is-revealed {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
  }
}

/* ===== Cascada tipográfica (títulos grandes) — ver scrambleReveal() en header.js =====
   Variante A elegida en la revisión visual: cada letra entra borrosa y en color acento,
   y enfoca a blanco al asentarse, en cascada de izquierda a derecha. Sin JS o con
   prefers-reduced-motion, el título nunca pierde su texto real (progressive enhancement:
   scrambleReveal() solo reemplaza el textContent existente, nunca lo genera desde cero). */
.scramble-word {
  display: inline-block;
  white-space: nowrap;
}

.scramble-char {
  display: inline-block;
  color: var(--accent-soft);
  filter: blur(6px);
  transition: color 260ms ease, filter 260ms ease;
}

.scramble-char.is-resolved {
  color: inherit;
  filter: blur(0);
}

/* Títulos con .is-accent (p. ej. "reales." del hero) resuelven al color de acento,
   no al blanco por defecto que hereda .scramble-char.is-resolved de otro lado. */
.is-accent .scramble-char.is-resolved {
  color: var(--accent);
}

/* ===== Header ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 76px;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(5, 7, 8, .72);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line-100);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.site-panel {
  display: contents;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 32px;
  height: 32px;
}

.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--text-100);
  transition: transform 220ms ease, opacity 220ms ease;
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.brand {
  display: flex;
  align-items: center;
}

/* Isologo standalone — provisorio, ver comentario en header.php. */
.brand__iso {
  height: 28px;
  width: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav a {
  font-size: var(--fs-small);
  color: var(--text-300);
  transition: color 180ms ease;
}

.site-nav a:hover {
  color: var(--text-100);
}

.site-nav a.is-active {
  color: var(--text-100);
}

/* Underline animado técnico (master doc §41 "Links"): entra en scaleX en hover,
   queda fijo en el link activo. Escopeado a los <a> de primer nivel (> ul > li > a) a
   propósito: los <a> de los megamenús (.nav-dropdown__link) también son descendientes de
   .site-nav, y con el selector genérico ".site-nav a" heredaban este ::after — como están
   apilados con poco espacio, la línea (bottom:-20px, pensado para el gap de 32px del nav
   de primer nivel) se metía encima de la fila siguiente del dropdown. */
.site-nav > ul > li > a {
  position: relative;
}

.site-nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.site-nav > ul > li > a:hover::after {
  transform: scaleX(1);
}

.site-nav > ul > li > a.is-active::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ===== Dropdown de nav (Servicios / Soluciones — master doc §11) =====
   Desktop-only a propósito: en mobile el <a> principal ya funciona como link normal
   a /servicios/ o /soluciones/, así que el toggle y el panel se ocultan (ver media query
   más abajo) en vez de intentar un acordeón dentro del site-panel ya animado por max-height. */

/* Atenúa el resto de la página mientras el megamenú está abierto (ver header.js) — z-index
   40, por debajo del header (50) para no taparlo, y por debajo del panel (60) que vive
   dentro del header. Sin esto, el panel opaco flota sobre el título del hero de cada
   página como si el contenido se hubiera borrado, en vez de leerse como "el menú lo tapa". */
.nav-dropdown-backdrop {
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  bottom: 0;
  /* Sin backdrop-filter a propósito: combinado con position:fixed generó un corte real
     en el compositing (la mitad de abajo del fondo dejaba de atenuarse en ciertos
     tamaños/scroll). Un color sólido semitransparente da el mismo efecto sin ese riesgo. */
  background: rgba(5, 7, 8, .78);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms;
}

.nav-dropdown-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 767px) {
  .nav-dropdown-backdrop {
    top: 64px;
  }
}

.nav-dropdown {
  display: flex;
  align-items: center;
  gap: 2px;
  /* Sin position:relative a propósito: el panel se posiciona contra .site-header__inner
     (más abajo), no contra este <li> — así el megamenú siempre queda anclado al mismo
     lugar del header sin importar si lo abre "Servicios" (cerca del logo) o "Soluciones"
     (más a la derecha), que es justo lo que se salía de pantalla antes. */
}

.nav-dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-400);
  transition: color 180ms ease, transform 180ms ease;
}

.nav-dropdown__toggle:hover {
  color: var(--text-100);
}

.nav-dropdown.is-open .nav-dropdown__toggle {
  color: var(--text-100);
  transform: rotate(180deg);
}

.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  transform: translateY(-4px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Mínimo 70% del ancho de pantalla en desktop (pedido explícito), con piso de 680px
     para laptops angostas y techo en --page-max para no quedar absurdo en pantallas ultra-anchas. */
  width: clamp(680px, 70vw, var(--page-max));
  padding: 36px;
  background: var(--bg-150);
  border: 1px solid var(--line-200);
  border-radius: 6px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 60;
}

.nav-dropdown.is-open .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown__layout {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.nav-dropdown__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  /* grow:1 (antes 0) para que Soluciones (3 columnas) las use en una sola fila cuando el
     panel tiene lugar de sobra, en vez de quedarse fija en 560px y mandar la 3ra columna
     a una fila aparte; wrap sigue de red de seguridad para pantallas angostas (~1024px). */
  flex: 1 1 560px;
}

.nav-dropdown__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  max-width: 260px;
  flex: 1;
}

/* Card de contacto del megamenú — "por ahora" genérica e igual en cualquier dropdown;
   pensada para poder variar por sección más adelante sin tocar el layout. Ancho fijo:
   con el panel mucho más ancho ahora, se ancla a la derecha vía justify-content:space-between
   del layout en vez de estirarse ella misma. */
.nav-dropdown__cta {
  flex-shrink: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--bg-100);
  border: 1px solid var(--line-200);
  border-radius: 6px;
}

.nav-dropdown__cta-eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-100);
  line-height: 1.3;
}

.nav-dropdown__cta-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-300);
}

.nav-dropdown__cta-btn {
  width: 100%;
  justify-content: center;
  height: 40px;
  margin-top: 4px;
}

.nav-dropdown__link {
  display: block;
  padding: 9px 10px;
  border-radius: 4px;
  font-size: var(--fs-small);
  color: var(--text-200);
  transition: background-color 140ms ease, color 140ms ease;
}

.nav-dropdown__link:hover {
  background: var(--bg-200);
  color: var(--text-100);
}

.nav-dropdown__link--soon {
  color: var(--text-400);
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nav-dropdown__link--soon:hover {
  background: none;
}

.nav-dropdown__link--soon em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-400);
}

.nav-dropdown__all {
  align-self: flex-end;
  white-space: nowrap;
  font-size: var(--fs-small);
  color: var(--accent-soft);
  padding: 9px 10px;
  border-top: 1px solid var(--line-100);
  padding-top: 16px;
  width: 100%;
  text-align: right;
}

.nav-dropdown__all:hover {
  color: var(--text-100);
}

@media (max-width: 1023px) {
  .nav-dropdown__toggle,
  .nav-dropdown__panel {
    display: none;
  }
}

/* ===== Selector de idioma ===== */

.lang-switch {
  position: relative;
}

.lang-switch__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--text-300);
  padding: 6px 4px;
}

.lang-switch__toggle:hover {
  color: var(--text-100);
}

.lang-switch__toggle svg {
  transition: transform 180ms ease;
}

.lang-switch.is-open .lang-switch__toggle svg {
  transform: rotate(180deg);
}

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 168px;
  padding: 8px;
  background: var(--bg-150);
  border: 1px solid var(--line-200);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.lang-switch.is-open .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switch__menu li {
  padding: 9px 10px;
  border-radius: 3px;
  font-size: var(--fs-small);
  color: var(--text-400);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.lang-switch__menu li[aria-disabled="true"] {
  cursor: not-allowed;
}

.lang-switch__menu li a {
  color: inherit;
  display: block;
  width: 100%;
  transition: color 140ms ease;
}

.lang-switch__menu li a:hover {
  color: var(--text-100);
}

.lang-switch__menu .is-current {
  color: var(--text-100);
  font-weight: 600;
}

.lang-switch__menu em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-400);
}

@media (max-width: 1023px) {
  .menu-toggle {
    display: flex;
  }

  .site-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--bg-150);
    border-bottom: 1px solid var(--line-200);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
    transition: max-height 280ms ease;
  }

  .site-panel.is-open {
    max-height: 520px;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0;
  }

  .site-nav a {
    display: block;
    padding: 13px var(--gutter-tablet);
  }

  .site-nav a::after {
    display: none;
  }

  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px var(--gutter-tablet) 28px;
    border-top: 1px solid var(--line-100);
  }

  .lang-switch__toggle {
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
  }

  .site-header__actions .btn--cta {
    width: 100%;
    justify-content: center;
    height: 48px;
  }
}

@media (max-width: 767px) {
  .site-header {
    height: 64px;
  }

  .site-nav a {
    padding: 13px var(--gutter-mobile);
  }

  .site-header__actions {
    padding-inline: var(--gutter-mobile);
  }
}

/* ===== Footer ===== */

.site-footer {
  padding-block: 80px 40px;
}

.footer-top {
  display: grid;
  grid-template-columns: 0.8fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 56px;
}

.footer-brand {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

.footer-col h4 {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-400);
  font-weight: 600;
  margin-bottom: 20px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-size: var(--fs-small);
  color: var(--text-300);
  transition: color 180ms ease;
}

.footer-col a:hover {
  color: var(--text-100);
}

.footer-social {
  display: flex;
  gap: 12px;
  padding-block: 32px;
  border-top: 1px solid var(--line-100);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-200);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-300);
  transition: border-color 180ms ease, color 180ms ease;
}

.social-link:hover {
  border-color: var(--accent);
  color: var(--text-100);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--line-100);
  font-size: var(--fs-small);
  color: var(--text-400);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  color: var(--text-400);
  transition: color 180ms ease;
}

.footer-legal a:hover {
  color: var(--text-200);
}

@media (max-width: 1023px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}