/* ============================================================================ base.css — Reset moderno + estilos de base y tipografía ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; /* Compensa el header fijo al saltar a un ancla con scroll suave */ scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; /* Contención de desborde horizontal a nivel raíz: evita el margen/franja del color de fondo en el lado derecho en móvil (iOS no siempre respeta overflow-x:hidden solo en body). "clip" no crea contenedor de scroll. */ overflow-x: clip; } /* Si el usuario prefiere menos movimiento, anulamos scroll suave y animaciones */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; color: var(--ink-soft); background-color: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; width: 100%; max-width: 100%; } /* Bloqueo de scroll cuando hay una capa abierta encima (menú, modal, lightbox). Lo gestiona js/modules/scroll-lock.js, que además fija `top` en negativo para conservar la posición y la restaura al cerrar. Se usa `position: fixed` y no `overflow: hidden` porque el overflow del body solo se propaga al viewport si el del es `visible`, y acá el lleva `overflow-x: clip` (ver arriba): con `overflow: hidden` el fondo seguía scrolleando. iOS, además, lo ignora para el gesto táctil. */ body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* El atributo `hidden` debe ganarle a cualquier `display` de componente (varios elementos que se ocultan por JS son flex/grid). */ [hidden] { display: none !important; } img { max-width: 100%; display: block; height: auto; } /* Imagen cuyo archivo todavía no existe (asset pendiente): se oculta para no mostrar el ícono de "roto"; el contenedor aporta el fondo de marca. La clase la aplica main.js al capturar el error de carga. */ img.is-missing { visibility: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; font-weight: 600; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; padding: 0; } /* Foco visible y accesible para navegación por teclado */ :focus-visible { outline: 3px solid var(--gold-strong); outline-offset: 3px; border-radius: 4px; } /* Utilidad: contenido solo para lectores de pantalla */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }