/* La rejilla visible del diseño.
   Tres cosas, y conviene no confundirlas:
   1. Los raíles: dos líneas de 1 px pegadas al contenido de 1280 px.
   2. Las cruces de 9 px, centradas sobre el corte entre secciones.
   3. La sangría interior (--gi): el contenido no llega al raíl, se queda
      48 px por dentro (32 px en portátil, 0 en móvil).
   En móvil no hay raíles ni cruces y el margen lateral es de 20 px. */

:root {
  --rail: #e2ded6;
  --rail-banda: rgba(255, 255, 255, 0.08);
  /* Dónde caen los raíles */
  --rail-x: max(clamp(20px, 5.5cqi, 80px), calc((100% - 1280px) / 2));
  --gi: 48px;
}

@media (max-width: 1099px) {
  :root { --gi: 32px; }
}

/* Móvil, con Sapira como referencia (CLAUDE.md · Diseño): los raíles a 24 px
   de cada borde y el contenido 16 px por dentro, o sea a 40 px de la
   pantalla. Antes en móvil no había raíles y el margen era de 20 px. */
@media (max-width: 767px) {
  /* También en body: tokens.css pone --gi a 0 en un @container para el
     móvil y, dentro de las secciones que son contenedor, esa regla ganaba
     y el contenido se quedaba pegado al raíl. */
  :root,
  body {
    --rail-x: 24px;
    --gi: 16px;
  }
}

/* ---- 1. Sangría interior ---- */

main section:not([data-nogrid]):not([data-hero-bleed]):not([data-fullbleed]) > * {
  box-sizing: border-box;
  padding-left: var(--gi);
  padding-right: var(--gi);
}

/* Las secciones a sangre completa gobiernan su propio margen: los hijos
   marcados como [data-bleed] van de lado a lado y los [data-inset] se
   alinean con el raíl más la sangría. */
[data-fullbleed] {
  padding-left: 0;
  padding-right: 0;
}

[data-fullbleed] > [data-bleed] {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

[data-fullbleed] > [data-inset] {
  box-sizing: border-box;
  max-width: none;
  padding-left: calc(var(--rail-x) + var(--gi));
  padding-right: calc(var(--rail-x) + var(--gi));
}

/* ---- 2. Alturas ---- */

main section:not([data-nogrid]):not(#s1):not([data-pinned]):not([data-sinalto]) {
  padding-top: clamp(72px, 8.4cqi, 120px);
  padding-bottom: clamp(72px, 8.4cqi, 120px);
}

main section:not([data-nogrid]) {
  position: relative;
  isolation: isolate;
  border-top: none;
  border-bottom: none;
}

main section:not([data-nogrid]):not([data-hero-bleed]) {
  overflow-x: clip;
}

/* ---- 3. Raíles ---- */

main section:not([data-nogrid])::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-x);
  right: var(--rail-x);
  border-left: 1px solid var(--rail);
  border-right: 1px solid var(--rail);
  border-top: 1px solid var(--rail);
  pointer-events: none;
  z-index: -1;
}

/* Las secciones de color (#03081B) van a sangre, como el footer: ni raíles
   ni cruces, y el contenido más ancho que en las claras. Ese cambio de
   anchura entre una sección y la siguiente es lo que da ritmo a la página
   (CLAUDE.md · Diseño). */
main section[data-band]::before {
  content: none;
}

main section[data-band]:not([data-hero-bleed]):not([data-fullbleed]) > * {
  padding-left: clamp(24px, 3cqi, 40px);
  padding-right: clamp(24px, 3cqi, 40px);
}

/* En móvil el contenido de las bandas oscuras empieza en la misma línea
   que el de las claras: raíl (24) más sangría (16), 40 px del borde. El
   mínimo de 24 de arriba dejaba las bandas una línea por delante. */
@media (max-width: 767px) {
  main section[data-band]:not([data-hero-bleed]):not([data-fullbleed]) > *:not([data-bleed]) {
    padding-left: calc(var(--rail-x) + var(--gi));
    padding-right: calc(var(--rail-x) + var(--gi));
  }
}

[data-fullbleed]::before {
  z-index: 5;
}

/* ---- 4. Las juntas, sin marcas ----
   Antes había una cruz de 9 px centrada en cada junta de raíles. La línea
   horizontal va de raíl a raíl, así que ahí no hay un cruce sino una
   esquina, y la marca siempre sobresalía por algún lado. Se quedan las
   líneas limpias: el corte es donde corta (11/11/2026). */

/* ---- Cómo acaban los raíles contra una sección de color ---- */

/* Donde una sección clara toca una de color, el raíl se cortaba en seco
   contra el bloque oscuro y se veía un empalme feo. Ahora se desvanece al
   acercarse, por los dos lados, así que la línea entra y sale del color sin
   que se note la juntura. */
main section:not([data-nogrid]):has(+ section[data-band])::before {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 120px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 120px), transparent);
}

main section[data-band] + section:not([data-nogrid])::before {
  -webkit-mask-image: linear-gradient(transparent, #000 120px);
  mask-image: linear-gradient(transparent, #000 120px);
}

/* Una sección clara entre dos de color se desvanece por los dos lados. Va
   después para ganarle a las dos reglas de arriba, que si no se pisan. */
main section[data-band] + section:not([data-nogrid]):has(+ section[data-band])::before {
  -webkit-mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent);
  mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent);
}

/* ---- 5. El hero va a sangre: ni raíles ni cruces ni sangría ---- */

[data-hero-bleed] {
  border-top: none;
}

[data-hero-bleed]::before,
[data-hero-bleed]::after {
  display: none;
}

[data-hero-bleed] > * {
  padding-left: 0;
  padding-right: 0;
}

/* ---- 6. Móvil ---- */

@media (max-width: 767px) {
  main section:not([data-hero-bleed]):not([data-fullbleed]) {
    padding-left: 0;
    padding-right: 0;
  }

  main section > [data-inset],
  [data-hero-bleed] > div {
    padding-left: calc(var(--rail-x) + var(--gi));
    padding-right: calc(var(--rail-x) + var(--gi));
  }

  /* El contenido de las secciones claras empieza DENTRO del raíl: 24 px de
     raíl más 16 px de sangría, 40 px del borde de la pantalla (CLAUDE.md ·
     rejilla de móvil). Antes solo se aplicaba la sangría de 16 px, medida
     desde el borde de la sección, así que todo cruzaba el raíl por 8 px. */
  main section:not([data-nogrid]):not([data-hero-bleed]):not([data-fullbleed]) > *:not([data-bleed]) {
    margin-left: var(--rail-x);
    margin-right: var(--rail-x);
    padding-left: var(--gi);
    padding-right: var(--gi);
  }

  /* Los envoltorios de dentro ya no ponen sangría otra vez: la pone el
     hijo directo de la sección y se sumaría. */
  main section:not([data-nogrid]):not([data-hero-bleed]):not([data-fullbleed]) > * > [class$="__interior"],
  main section:not([data-nogrid]):not([data-hero-bleed]):not([data-fullbleed]) > * > * > [class$="__interior"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Envoltorios que en escritorio ponen la sangría grande y que en móvil la
     sumaban a la del raíl: el contenido acababa a 61 px en vez de a 40 y
     cada sección empezaba en una línea distinta. En móvil la sangría la
     pone el hijo directo de la sección, nadie más. */
  body .problema__fijo,
  body .logos__titulo {
    padding-left: 0;
    padding-right: 0;
  }

  /* Secciones que cambian la sangría para su diseño de escritorio: en
     móvil mandan los 16 px de todos, para que empiecen en la misma línea. */
  body .roshi,
  body .prodroshi {
    --gi: 16px;
  }

  /* El rótulo de los logos va centrado en escritorio; en móvil empieza
     donde empieza todo lo demás. */
  body .logos__titulo {
    text-align: left;
  }

  body .logos__interior.logos__interior {
    align-items: flex-start;
  }

  /* Las páginas heredadas traen sus propios contenedores. */
  body .calculadora-container.calculadora-container,
  body .beneficios-container.beneficios-container {
    padding-left: calc(var(--rail-x) + var(--gi));
    padding-right: calc(var(--rail-x) + var(--gi));
  }

  /* Estos envoltorios son el contenedor del contenido de su sección: les
     toca la línea de siempre, raíl más sangría. */
  body .roshi__interior.roshi__interior,
  body .prodroshi__interior.prodroshi__interior,
  body .legal.legal {
    padding-left: calc(var(--rail-x) + var(--gi));
    padding-right: calc(var(--rail-x) + var(--gi));
  }

  /* En móvil no hay nada centrado: todos los titulares, textos y botones
     empiezan en la misma línea de la izquierda (CLAUDE.md · móvil). */
  body .problema__cierre,
  body .problema__pregunta,
  body .problema__enlace,
  body .roshi__cierre,
  body .roshi__cierre-titulo,
  body .roshi__enlace {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  /* En móvil sí hay una marca: el separador horizontal de raíl a raíl
     entre secciones (CLAUDE.md · rejilla de móvil). No sobresale: empieza
     y acaba justo en los raíles. */
  main section:not([data-nogrid])::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 7;
    top: 0;
    height: 1px;
    left: var(--rail-x);
    right: var(--rail-x);
    background: var(--rail);
  }

  main section[data-band]::after {
    content: none;
  }
}

/* ---- 5. Anclas ---- */

/* El header es pegajoso, así que al saltar a una sección hay que dejarla
   por debajo de él o se come su parte de arriba. */
main section[id] {
  scroll-margin-top: var(--alto-cabecera, 89px);
}

@media (max-width: 767px) {
  main section[id] {
    scroll-margin-top: var(--alto-cabecera, 65px);
  }
}