/** * Premioplus — Utilities * Helpers de layout compartidos por todas las secciones. */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } @media (max-width: 1023px) { .container { padding-inline: 20px; } } @media (max-width: 639px) { .container { padding-inline: 16px; } } .section { padding-block: var(--space-9); position: relative; } @media (max-width: 1023px) { .section { padding-block: var(--space-8); } } @media (max-width: 639px) { .section { /* Corregido: --space-7 (48px) fue una sobrecorrección — sumado al padding-bottom de la sección anterior, cada costura entre módulos se comía ~96px sin aportar contenido. Una app densa (Robinhood, Coinbase) no separa cada pantalla con un blanco así de grande; el ritmo lo dan las tarjetas, no el vacío entre secciones. */ padding-block: var(--space-6); } } /* Antes era un bloque sólido (--bg-elevated) que cortaba la página en bandas. Ahora el fondo continuo vive en (--grad-sky) — esta clase solo aporta un lavado translúcido y muy suave para insinuar "zona" sin volver a crear un borde duro entre secciones. */ /* Antes tenía su propio lavado de color (aunque suave, seguía siendo un "bloque" perceptible). Ahora no aplica ningún background: la única superficie de toda la landing es el --grad-sky de , sin excepción. El nombre de la clase queda por compatibilidad con el HTML existente, pero ya no dibuja nada propio. */ .section--elevated { background: none; } .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; } /* Reveal on scroll — estado inicial + estado visible */ [data-reveal] { opacity: 0; /* Fade + desplazamiento + un cambio de escala sutil — el mismo lenguaje que Stripe/Linear/Vercel: 640ms (dentro del rango 500-700ms pedido), easing de salida pronunciado al principio y muy suave al final, y un desplazamiento de 32px que SÍ se percibe sin sentirse brusco. */ transform: translateY(32px) scale(0.97); transition: opacity var(--dur-entrance) var(--ease-out-premium), transform var(--dur-entrance) var(--ease-out-premium); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Defensivo: si split-text conviviera con reveal, nunca debe quedar invisible */ [data-reveal][data-split] { opacity: 1; transform: none; } [data-reveal-group] > * { transition-delay: calc(var(--reveal-index, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { [data-reveal] { transition-duration: 200ms; } }