/* ===== Reset ligero ===== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; /* compensa la navbar sticky al saltar a un ancla */ scroll-padding-top: var(--nav-height); -webkit-text-size-adjust: 100%; } /* ===== Lenis (smooth scroll con inercia) ===== CSS oficial de la librería. Es INERTE hasta que el JS agrega las clases `.lenis` al (solo en la home, y solo si el usuario no pidió menos movimiento). Ver ADR y scoops/static/js/smooth-scroll.js. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; /* height: auto evita que el atributo height="..." del HTML quede como alto FIJO cuando el ancho se controla por CSS (width:100%) → la imagen se estiraba. Los con object-fit setean su propio height por clase (les gana). */ height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-ink); letter-spacing: -0.01em; } ul, ol { list-style: none; padding: 0; } /* ===== Helpers reutilizables ===== */ /* Contenedor global: padding lateral global en TODA la landing. Ajustá el valor una sola vez en --page-padding-x (tokens.css). */ .container { width: 100%; margin-inline: auto; padding-inline: var(--page-padding-x); } .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; } /* Mobile: en el diseño los componentes van casi sin espacio entre sí. Bajamos el padding vertical de TODAS las secciones tocando una sola variable (--section-y, que usa cada .section en su padding-block). Es padding arriba Y abajo, así que entre dos secciones el hueco es el doble: con space-2 (8px) el hueco real ≈16px. */ @media (max-width: 640px) { :root { --section-y: var(--space-2); } }