/* Sistema de «secciones a pantalla completa» de 8iT (Inicio y, después, el resto de páginas).
   Es el lenguaje de Diseño web, extraído para compartirlo: paneles oscuro / tarjeta / crema, titulares en dos colores,
   etiquetas de sección, retícula, marcas de mira, raíl de secciones y composición apilada en escritorio.
   Móvil: scroll natural. Escritorio (≥1100×800, puntero fino, sin reduced-motion): una sección por gesto (deck.js).
   Colores: #24242e, #293f61, #f5f2e9, #0c0d0c; azul #72a9e8 sobre oscuro, #2e6ab1 sobre claro. Sin colores nuevos. */
.deck-page { }
.deck-page h1, .deck-page h2 { text-shadow: none; line-height: 0.94; }
.deck-page h3 ,
.deck-page div:where(.t3) { letter-spacing: -0.02em; }
.deck-page .label { margin: 0 0 14px; font-size: 0.75rem; opacity: 0.82; }
.deck-page .panel--paper .label { color: var(--c-kw-light); opacity: 1; }
.deck-page .lead { max-width: 46ch; font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.45; }

/* ═════ Paneles (móvil = flujo natural) ═════ */
.deck-page .panel { padding: var(--sec-y) var(--pad); }
.deck-page .panel:first-child { padding-top: calc(var(--nav-h) + var(--s5)); }
/* Móvil y tablet: secciones largas se pintan al acercarse (menos trabajo en el scroll) */
@media (max-width: 1099px) { .deck-page .panel:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 720px; } }
.deck-page .panel--dark { background: var(--c-dark); }
.deck-page .panel__in { gap: 28px; position: relative; z-index: 1; }
.deck-page .panel::after { content: none; }
.sec-head { display: grid; gap: 0; align-content: start; }
.sec-head .lead { margin-top: 18px; }

/* Texto en dos tonos y enlace de texto de marca */
.deck-page .text-link { text-decoration: underline; }
.deck-page .panel--paper .text-link { color: var(--c-ink); }

/* Revelado: solo cuando el script lo activa; únicamente transform y opacity */
.motion .panel:not(:first-child) [data-r] { opacity: 0; transform: translateY(26px); will-change: transform, opacity; }
.motion .panel:not(:first-child) [data-r].is-in { opacity: 1; transform: none; will-change: auto; transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--d, 0ms); }

/* Primera pantalla: entra con CSS puro y sin ocultar el texto (el texto es el LCP) */
@media (prefers-reduced-motion: no-preference) {
  .panel:first-child [data-r] { animation: rise 800ms var(--ease) backwards; }
  @keyframes rise { from { transform: translateY(18px); } }
}

/* Pasos encadenados (rueda a tope, teclas repetidas): las entradas de las secciones se comprimen, no se saltan */
.motion.deck-fast .panel:not(:first-child) [data-r].is-in { transition-duration: 320ms; transition-delay: calc(var(--d, 0ms) * 0.3); }

/* Raíl de secciones (solo escritorio) */
.rail { display: none; }

@media (min-width: 700px) {
  .deck-page .panel::before { background: repeating-linear-gradient(90deg, var(--grid, rgb(245 242 233 / 7%)) 0 1px, transparent 1px calc(100% / 12)); }
}

/* ═════ Escritorio: secciones apiladas a pantalla completa ═════ */
@media (min-width: 1100px) and (min-height: 800px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  html:has(.deck-page) { scroll-behavior: auto; }
  .deck-page { --h: min(4.6vw, 7.6vh, 5.2rem); }
  .deck-page .panel { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 14px) var(--pad) 56px; }
  .deck-page .panel__in { width: 100%; gap: clamp(14px, 3vh, 32px); }
  .deck-page .panel::after { /* marcas de mira en las esquinas, en el margen */
    content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: 0.45; color: inherit;
    background:
      linear-gradient(currentColor, currentColor) left 12px top calc(var(--nav-h) + 12px) / 13px 1px no-repeat,
      linear-gradient(currentColor, currentColor) left 18px top calc(var(--nav-h) + 6px) / 1px 13px no-repeat,
      linear-gradient(currentColor, currentColor) right 12px bottom 30px / 13px 1px no-repeat,
      linear-gradient(currentColor, currentColor) right 18px bottom 24px / 1px 13px no-repeat;
  }
  .rail { display: block; position: fixed; z-index: 35; right: 18px; top: 50%; transform: translateY(-50%); color: var(--c-paper); transition: color 300ms; }
  .rail.is-light { color: var(--c-ink); }
  .rail ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .rail a { display: grid; place-items: center; width: 24px; height: 24px; }
  .rail a::before { content: ''; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; transition: background-color 200ms, transform 200ms; }
  .rail a[aria-current='true']::before { background: currentColor; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .deck-page *, .deck-page *::before, .deck-page *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}