/* ============================================================
   layout.css — Estructura, rejillas y secciones
   ============================================================ */

/* overflow-x en html ADEMÁS de body: body solo NO recorta elementos position:fixed
   (p.ej. el drawer off-canvas a translateX(100%), fuera de pantalla) → eso causaba
   el scroll horizontal en móvil. El root sí los recorta. */
html { overflow-x: hidden; }

/* La cabecera es sticky: sin esto, cualquier salto de ancla (#how, #wizard, la
   barra móvil, el enlace "saltar al contenido") deja el destino DEBAJO de la
   nav y el usuario aterriza en mitad del bloque. scroll-padding en el
   contenedor de scroll es el canon (una regla, vale para todos los anclajes). */
html { scroll-padding-top: calc(var(--nav-h) + var(--sp-4)); }
body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  background: var(--c-bg);
  color: var(--c-text);
  overflow-x: hidden;
  transition: background-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std);
}

/* Salto al contenido (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
}
.skip-link:focus { left: 16px; top: 16px; }

/* La franja superior se retiró el 2026-08-09 (noche): el idioma se fue al globo
   del nav y lo que quedaba era una banda de pantalla con un solo botón. El
   conmutador vive ahora en el cluster de la cabecera y en el cajón. */

/* ---- NAV ---- */
/* ---------- Franja superior (utility bar) ---------- */
/*
  Globo · campana · conmutador de tema. Vuelve el 2026-08-14 porque el nav no
  sostiene una palabra ancha más cuatro controles de 44 px: el logo se pintaba
  debajo del globo en un móvil real. Tres iconos, no cinco pastillas de idioma
  como la franja original, así que cuesta la mitad de alto que aquella.
  Alineada a la derecha, encima del logo, y pegada arriba junto al nav.
*/
.topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 var(--page-pad-x);
  min-height: 40px;
  background: var(--c-nav-bg);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: calc(var(--z-nav) + 1);
}

/* El nav deja de estar pegado al borde: debajo de la franja. Sin esto los dos
   `sticky` se solapan al hacer scroll y el logo desaparece bajo los iconos. */
.topbar + .nav,
.topbar ~ .nav { top: 40px; }

/* Orden pedido por Adán: globo · campana · tema. El parcial del core pone el
   conmutador primero (es el más silencioso de su cluster de tres); aquí la
   franja tiene otra lógica —el idioma es lo que más se toca de los tres— así
   que se reordena con flexbox, sin tocar la pieza compartida. */
.topbar .ha-lang  { order: 1; }
.topbar .ha-bell  { order: 2; }
.topbar .ha-theme { order: 3; }

/* La campana vive en la franja (40 px), no en el nav: su desplegable cae justo
   debajo de ella y no 64 px más abajo, que es el respaldo del core. */
.topbar { --ha-bell-panel-top: 2.75rem; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: 0 var(--page-pad-x);
  height: var(--nav-h);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--c-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

/*
  La zona derecha del nav: acceso + hamburguesa, juntos.

  Sin esto, `justify-content: space-between` reparte los hijos SUELTOS por la
  fila, y en un móvil —donde `.nav__links` se oculta— el icono de acceso quedaba
  flotando en el centro, entre el logo y la hamburguesa. Agrupados, el nav tiene
  dos zonas: identidad a la izquierda, controles a la derecha, que es lo que hace
  toda cabecera con menú (GOV.UK, Shopify, Stripe).
*/
.nav__end {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ---- HERO ---- */
/*
  `minmax(0, …)` and not a bare `fr`: a grid track's automatic minimum is the
  min-content of what it holds, so a track that says `1fr` still refuses to go
  below the widest unbreakable thing inside it. On a 393px phone this column
  measured 419 — 26px past the screen — and `overflow: hidden` below cut those
  26px off. Nothing scrolled sideways, so nothing looked broken; the content was
  simply gone, which is the shape of the screenshots that reported it.
  Measured with tests/visual/mobile.php (core), before and after.
  `.why-grid` in responsive.css already carried the fix; the hero never got it.
*/
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--page-pad-x);
  min-height: calc(92vh - var(--nav-h));   /* ya no hay franja que descontar */
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  right: -200px;
  top: -200px;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, var(--c-accent-softer) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero__content, .hero__form { position: relative; z-index: 1; }

.hero__actions {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  flex-wrap: wrap;
}
.trust-row {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  flex-wrap: wrap;
}

/* ---- SECTIONS ---- */
.section {
  padding: var(--sp-20) var(--page-pad-x);
}
.section--alt { background: var(--c-bg-alt); }
.section__inner { max-width: var(--container-max); margin-inline: auto; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

/* ---- CTA BAND ---- */
.cta-band {
  background: var(--c-accent);
  padding: var(--sp-16) var(--page-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.cta-band__actions { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }

/* 🔴 Un hijo de un flex NO se encoge por debajo de su contenido si nadie se lo
   dice, y aquí `flex-wrap: wrap` no basta: envolver reparte las CAJAS en varias
   líneas, no impide que UNA caja sea más ancha que su sitio.

   Medido el 2026-08-26 contra PRODUCCIÓN a 360 px: el titular se salía 1 px
   (347,4 px de contenido en 332 disponibles), `__actions` lo heredaba y, al
   arreglar sólo esos dos, aparecía `.phone-big` —nieto, no hijo— con el mismo
   defecto. Enumerar víctimas es la lista que crece para siempre; la restricción
   se declara una vez y cubre lo que venga.

   ⚠️ Y NO se vio en local: la misma página con la misma hoja daba 332 px, porque
   la métrica de la fuente no era la misma. Un verde local no prueba nada sobre un
   desbordamiento de 1 px — esto se cazó midiendo contra el sitio vivo. */
.cta-band > *,
.cta-band__actions > * { max-width: 100%; }

/* ---- FOOTER ---- */
.footer {
  background: var(--c-footer);
  padding: var(--sp-12) var(--page-pad-x) var(--sp-8);
  border-top: 1px solid var(--c-border);
}
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-16);
  margin-bottom: var(--sp-10);
  max-width: var(--container-max);
  margin-inline: auto;
}
.footer__bottom {
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ---- MOBILE STICKY BAR (oculto en desktop) ---- */
.mobile-bar { display: none; }

/* ---- MOBILE DRAWER (oculto en desktop) ---- */
.nav__toggle { display: none; }
.drawer, .drawer-overlay { display: none; }

/* Honeypot anti-spam del asistente.
   El mecanismo es del CORE y su regla vive en `site.css` (`.hp-field`), pero
   ESTE tema no carga `site.css` — tiene sus propias hojas—, así que la clase no
   le llegaba y el asistente seguía con el `style=` en línea: un informe de
   `style-src-attr` en cada carga del formulario, que es ruido a descartar a mano
   el día que se decida `enforce` (ADR-0023). Mismo nombre a propósito: si algún
   día este tema toma `site.css`, las dos definiciones dicen lo mismo. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}