/* Plantilla DS — base mínima + utilidades reutilizables (tokens/base.css). */ *, *::before, *::after { box-sizing: border-box; } html, body { /* clip y NO hidden: overflow hidden crea un scroll container y rompe todos los position: sticky que haya dentro (la pila de tarjetas depende de esto) */ overflow-x: clip; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* El canvas (fondo de ) es lo que se ve en el sobre-scroll (rebote de iOS): papel hacia arriba (el hero es claro) y tinta hacia abajo (el footer es oscuro), para que el rebote más allá del final nunca enseñe un hueco blanco. */ html { background: linear-gradient(var(--paper) 0%, var(--paper) 50%, var(--ink) 50%, var(--ink) 100%); } body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } a { color: var(--accent-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--brand-deep); text-decoration: underline; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } ::selection { background: var(--brand-tint); } /* Etiqueta eyebrow: la línea corta en mayúsculas sobre cada titular */ .ds-eyebrow { font-family: var(--font-body); font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-accent); } /* Fade-up escalonado al cargar (solo elementos que NO son el LCP: el H1 del hero nunca arranca con opacity: 0 — ver README) */ @media (prefers-reduced-motion: no-preference) { .ds-fade-up { animation: ds-fade-up var(--duration-slow) var(--ease-out) both; } .ds-fade-up:nth-child(2) { animation-delay: 80ms; } .ds-fade-up:nth-child(3) { animation-delay: 160ms; } .ds-fade-up:nth-child(4) { animation-delay: 240ms; } .ds-fade-up:nth-child(5) { animation-delay: 320ms; } .ds-fade-up:nth-child(6) { animation-delay: 400ms; } } /* Fade-up al entrar en el viewport (lo activa el JS con IntersectionObserver). Sin JS (o con reduced-motion) los elementos quedan visibles: solo se ocultan cuando lleva la clase .js, que pone assets/site.js. */ @media (prefers-reduced-motion: no-preference) { html.js .ds-io { opacity: 0; } html.js .ds-io.is-in { animation: ds-fade-up var(--duration-slow) var(--ease-out) both; animation-delay: var(--stagger, 0ms); } }