/** * base.css — Reset, tipografía base, utilidades de layout y estados * globales (age gate, scroll lock, focus). */ *, *::before, *::after { box-sizing: border-box; } html { /* Scroll nativo y suave. scroll-padding-top compensa el header fijo: sin esto, una ancla deja el título tapado detrás del header. */ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; /* Superficie continua para toda la pagina (ver --grad-sky en tokens.css). Ninguna seccion pinta su propio fondo, asi que no aparecen rectangulos al pasar de una a otra. El color plano queda como respaldo por si el degradado no resuelve. */ background-color: var(--bg-base); background-image: var(--grad-sky); color: var(--text-body); font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; /* OJO: aca NO va overflow-x:hidden. En , overflow-x:hidden hace que overflow-y compute a "auto" y el body pase a ser contenedor de scroll: eso rompe position:sticky en TODOS sus descendientes, incluido el pin de Club VIP en mobile. Era ademas red de seguridad redundante — la contencion horizontal real la hace .section con overflow-x:clip (que no crea contenedor de scroll) y el QA mide overflow por elemento en los 11 viewports, no confia en un hidden global. */ } /* Mientras el age gate está presente, el resto de la app no scrollea ni se puede tocar. Visible por defecto vía CSS (sin esperar a ningún JS): fail-closed. El script anti-flash del marca data-age-ok cuando la sesión ya confirmó. */ html:not([data-age-ok]) body { overflow: hidden; } html[data-age-ok] .age-gate, html[data-age-ok] .age-gate__backdrop { display: none; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5 { font-family: var(--f-display); color: var(--text-primary); margin: 0; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Foco visible real en todo lo accionable. */ :focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; border-radius: var(--r-xs); } /* ---------- layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); } .section { position: relative; padding-block: var(--s-7); /* clip y no hidden: hidden en un eje fuerza "auto" en el otro y convertiria cada seccion en un contenedor de scroll. clip corta sin crear scroll y deja el eje vertical intacto. Es lo que contiene los .glow, que por diseno se salen de la seccion (inset negativo) y si no generaban scroll horizontal del documento. */ overflow-x: clip; } @media (min-width: 1024px) { .section { padding-block: var(--s-9); } } .section__head { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); } @media (min-width: 768px) { .section__head { margin-bottom: var(--s-6); } } .section__head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--s-4); } .eyebrow { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cta); margin: 0; } .section h2 { font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; } .section__lede { color: var(--text-body); font-size: var(--fs-sm); max-width: 62ch; } @media (min-width: 768px) { .section__lede { font-size: var(--fs-body); } } /* Glow local: separa secciones sin pintar fondos distintos. */ .glow { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; z-index: 0; opacity: 0.75; } .glow--violet { background: var(--glow-violet); } .glow--gold { background: var(--glow-gold); } .section > .container { position: relative; z-index: 1; } /* ---------- accesibilidad ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--s-4); z-index: 999; background: var(--cta); color: var(--cta-ink); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; transition: top var(--d-fast) var(--ease-std); } .skip-link:focus { top: var(--s-3); } /* ---------- reveal (IntersectionObserver, sin librerías) ---------- */ .reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* Si el JS no corre, el contenido no puede quedar invisible para siempre. */ .no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }