/* Utilidades transversales: contenedores de sección, revelados al hacer
   scroll y ayudas de accesibilidad.

   El lienzo de escala NO está aquí: lo define frencore/frencore.css, que
   es de quien depende su mecánica. */

/* ── Contenedores de sección ───────────────────────────────
   .shell centra y pone el tope de ancho; .section-pad pone el margen
   lateral. Van separadas a propósito: unas secciones llevan las dos, y
   otras aplican .section-pad a un div interior para que el carrusel salga
   a sangre mientras su título sí queda alineado con el resto. */
.shell{max-width:var(--maxw);margin:0 auto;width:100%;}
.section-pad{padding-left:var(--pad-x);padding-right:var(--pad-x);}

/* Separación vertical entre secciones. */
.section{padding-top:80px;}

/* El navbar es fijo: sin este margen, al saltar a un ancla el título
   quedaba escondido detrás de la barra. */
section[id],footer[id],.pillar[id]{scroll-margin-top:calc(var(--nav-h) + 24px);}

/* ── Revelado al entrar en pantalla ────────────────────────
   Solo opacity y transform: animar alto o márgenes provocaría reflujo en
   cada fotograma y haría temblar la página. */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ── Accesibilidad ─────────────────────────────────────────
   Visible para lectores de pantalla, invisible en pantalla. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── Ajustes por tamaño ────────────────────────────────────
   Solo el ritmo vertical: el lateral lo gobierna --pad-x en tokens.css. */
@media (max-width:768px){
  .section{padding-top:56px;}
}

@media (max-width:480px){
  .section{padding-top:44px;}
}