/* ========================================================================== PANDEMIC — Design System v3 Dirección: infraestructura tecnológica premium. Editorial, con profundidad, capas y movimiento que explica. No plantilla SaaS, no glow azul en todo. La pieza central es el SISTEMA DE AMBIENTES: el fondo no cambia de golpe entre secciones. Un lienzo fijo interpola color mientras el scroll avanza (un IntersectionObserver escribe data-env en ), y encima algunas secciones hacen crecer superficies que se convierten en el fondo siguiente. ========================================================================== */ /* ─── Tipografía autoalojada ─────────────────────────────────────────────── */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ─── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; } ul, ol { list-style: none; padding: 0; } /* ─── Paleta base ───────────────────────────────────────────────────────── */ :root { --blue-50: #EEF4FF; --blue-100: #DAE7FF; --blue-200: #B9D0FF; --blue-300: #8AB0FF; --blue-400: #5A90FF; --blue-500: #2D7CFF; --blue-600: #1560F0; --blue-700: #0E48C4; --blue-900: #0A2A73; /* Neutros fríos con sesgo azul — nunca gris puro */ --ink-1000: #05080F; --ink-950: #080C16; --ink-900: #0B1020; --ink-850: #0E1526; --ink-800: #121B31; --ink-700: #2A3550; --ink-500: #566384; --ink-400: #7A87A6; --ink-300: #9BA6C0; --ink-200: #C4CCDF; --ink-100: #E3E8F2; --ink-50: #F1F4FA; --white: #FFFFFF; /* Sin naranja en ningún punto del sistema: el capítulo de casos usa un azul muy frío, no una temperatura cálida. */ --green-500: #17B87A; --red-500: #E0455F; /* ── Ambiente por defecto (01 · claro / frío / premium) ── */ --env-bg: #F4F7FC; --env-bg-2: #EAF0FA; --surface: #FFFFFF; --surface-2: #F1F5FC; --surface-in: rgba(255,255,255,.72); --text: var(--ink-900); --text-2: var(--ink-700); --text-3: var(--ink-500); --text-mute: var(--ink-400); --line: rgba(20,32,64,.10); --line-2: rgba(20,32,64,.18); --accent: var(--blue-600); --accent-2: var(--blue-500); --accent-soft: var(--blue-50); --on-accent: #FFFFFF; --shadow-1: 0 1px 2px rgba(11,16,32,.04), 0 8px 24px -12px rgba(11,16,32,.18); --shadow-2: 0 2px 4px rgba(11,16,32,.05), 0 24px 56px -20px rgba(11,16,32,.30); --shadow-3: 0 40px 90px -30px rgba(11,16,32,.42); --grain-op: .035; --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Escala fluida, mobile-first */ --fs-micro: .6875rem; --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); --fs-lg: clamp(1.1875rem, 1.05rem + .7vw, 1.5rem); --fs-xl: clamp(1.375rem, 1.15rem + 1.1vw, 2rem); --fs-h3: clamp(1.5rem, 1.2rem + 1.5vw, 2.375rem); --fs-h2: clamp(1.875rem, 1.35rem + 2.6vw, 3.5rem); --fs-h1: clamp(2.375rem, 1.6rem + 4.4vw, 5rem); --fs-mega: clamp(3rem, 1.8rem + 7vw, 7rem); --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px; --nav-h: 56px; --wrap: 1240px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,.84,.44,1); } /* ── Ambiente 02 · profundidad / azul / distribución ── */ html[data-env="deep"] { --env-bg: #0F2A6B; --env-bg-2: #0A1E52; --surface: rgba(255,255,255,.07); --surface-2: rgba(255,255,255,.04); --surface-in: rgba(8,20,50,.5); --text: #FFFFFF; --text-2: #D3E0FA; --text-3: #A3B8E4; --text-mute: #7C93C8; --line: rgba(255,255,255,.14); --line-2: rgba(255,255,255,.24); --accent: #7FB0FF; --accent-2: #A9CAFF; --accent-soft: rgba(127,176,255,.14); --on-accent: #06122E; --shadow-1: 0 2px 10px rgba(0,0,0,.28); --shadow-2: 0 24px 60px -24px rgba(0,0,0,.6); --shadow-3: 0 50px 100px -30px rgba(0,0,0,.7); --grain-op: .06; } /* ── Ambiente 03 · oscuro / tecnológico / roadmap ── */ html[data-env="dark"] { --env-bg: var(--ink-1000); --env-bg-2: var(--ink-900); --surface: #0D1424; --surface-2: #101a2f; --surface-in: rgba(255,255,255,.04); --text: #F3F6FC; --text-2: #C3CDE2; --text-3: #93A0BC; --text-mute: #66738F; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.18); --accent: var(--blue-400); --accent-2: var(--blue-300); --accent-soft: rgba(90,144,255,.12); --on-accent: #05080F; --shadow-1: 0 2px 10px rgba(0,0,0,.4); --shadow-2: 0 24px 60px -24px rgba(0,0,0,.75); --shadow-3: 0 50px 110px -30px rgba(0,0,0,.85); --grain-op: .07; } /* ── Ambiente 02 · claro azul frío (casos) ── */ html[data-env="chill"] { --env-bg: #EAF1FC; --env-bg-2: #DEEAFB; --surface: #FFFFFF; --surface-2: #F0F5FE; --surface-in: rgba(255,255,255,.74); --text: var(--ink-900); --text-2: #26324D; --text-3: #4E5D80; --text-mute: #77869F; --line: rgba(18,38,80,.11); --line-2: rgba(18,38,80,.19); --accent: var(--blue-600); --accent-2: var(--blue-500); --accent-soft: rgba(21,96,240,.09); --on-accent: #FFFFFF; --grain-op: .04; } /* ── Ambiente 05 · limpio / aplicación ── */ html[data-env="clean"] { --env-bg: #FBFCFE; --env-bg-2: #F4F7FC; --grain-op: .025; } /* ─── Lienzo de ambiente + grano ────────────────────────────────────────── */ .env { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, var(--env-bg-2) 0%, transparent 60%), var(--env-bg); transition: background-color 900ms var(--ease), background-image 900ms var(--ease); } /* Grano: textura sutil que quita el plano perfecto de los degradados */ .grain { position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: var(--grain-op); transition: opacity 900ms var(--ease); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ─── Base ──────────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.55; color: var(--text-2); background: transparent; -webkit-font-smoothing: antialiased; /* clip, no hidden: hidden crea un contenedor de scroll y puede romper position:sticky en los descendientes. clip corta igual sin crearlo. */ overflow-x: hidden; overflow-x: clip; transition: color 900ms var(--ease); } h1,h2,h3,h4 { color: var(--text); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; transition: color 900ms var(--ease); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -.02em; } p { text-wrap: pretty; } strong { color: var(--text); font-weight: 700; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; padding: .75rem 1.25rem; background: var(--accent); color: var(--on-accent); font-weight: 700; border-radius: var(--r-full); transition: top .15s; } .skip-link:focus { top: 1rem; } .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ─── Layout ────────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 720px) { .wrap { padding-inline: var(--sp-6); } } .sec { position: relative; padding-block: clamp(2.25rem, 1.7rem + 3.5vw, 5.5rem); } .sec--tight { padding-block: clamp(1.5rem, 1.2rem + 2vw, 3rem); } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: var(--sp-4); } .eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; opacity: .6; } .lede { font-size: var(--fs-md); color: var(--text-3); max-width: 54ch; } .mono { font-family: var(--font-mono); } /* ─── Movimiento: primitivas ────────────────────────────────────────────── */ .js [data-r] { opacity: 0; will-change: transform, opacity; } .js [data-r].in { opacity: 1; transform: none; } .js [data-r="up"] { transform: translateY(30px); transition: opacity .8s var(--ease), transform .9s var(--ease-out); } .js [data-r="left"] { transform: translateX(-40px); transition: opacity .8s var(--ease), transform .9s var(--ease-out); } .js [data-r="right"] { transform: translateX(40px); transition: opacity .8s var(--ease), transform .9s var(--ease-out); } .js [data-r="scale"] { transform: scale(.94); transition: opacity .8s var(--ease), transform 1s var(--ease-out); } .js [data-r][data-d="1"] { transition-delay: .10s; } .js [data-r][data-d="2"] { transition-delay: .20s; } .js [data-r][data-d="3"] { transition-delay: .30s; } .js [data-r][data-d="4"] { transition-delay: .40s; } .js [data-r][data-d="5"] { transition-delay: .50s; } /* ─── Botones ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.75rem; min-height: 52px; font-weight: 700; font-size: var(--fs-sm); letter-spacing: -.01em; border-radius: var(--r-full); text-decoration: none; transition: transform .2s var(--ease), background-color .25s, box-shadow .25s, border-color .25s; } .btn:active { transform: scale(.985); } .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 12px 30px -12px rgba(21,96,240,.6); } .btn--primary:hover { background: var(--accent-2); } .btn--ghost { border: 1px solid var(--line-2); color: var(--text); background: var(--surface-in); backdrop-filter: blur(10px); } .btn--ghost:hover { border-color: var(--accent); } .btn--lg { padding: 1.15rem 2.25rem; font-size: var(--fs-md); min-height: 60px; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .btn-row--center { justify-content: center; } /* ─── Nav ───────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: .5rem; z-index: 90; padding-inline: var(--sp-3); } .nav__in { max-width: var(--wrap); margin-inline: auto; display: flex; align-items: center; gap: var(--sp-4); min-height: 52px; padding: 0 .5rem 0 1rem; background: var(--surface-in); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--line); border-radius: var(--r-full); box-shadow: var(--shadow-1); transition: background-color .6s var(--ease), border-color .6s var(--ease); } .nav__brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--text); text-decoration: none; letter-spacing: -.02em; margin-right: auto; } .nav__brand img { width: 24px; height: 24px; border-radius: 6px; } .nav__links { display: none; gap: var(--sp-5); } @media (min-width: 900px) { .nav__links { display: flex; } } .nav__links a { color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: color .2s; } .nav__links a:hover { color: var(--text); } .nav__cta { padding: .6rem 1.1rem; min-height: 40px; font-size: var(--fs-sm); } /* ─── 01 HERO ───────────────────────────────────────────────────────────── */ .hero { position: relative; padding-block: clamp(1.25rem, .8rem + 3vw, 3rem) clamp(2rem, 1.5rem + 4vw, 4.5rem); overflow: hidden; } .hero__stage { position: relative; z-index: 2; } /* Secuencia tipográfica: la 1 entra, se desplaza y aparece la 2 */ .hero__l1, .hero__l2 { display: block; font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; } .hero__l1 { color: var(--text-3); } .hero__l2 { color: var(--text); } .js .hero__l1 { opacity: 0; transform: translateY(18px); animation: heroIn .9s var(--ease-out) .15s forwards; } .js .hero__l2 { opacity: 0; transform: translateY(22px); animation: heroIn .9s var(--ease-out) .95s forwards; } @keyframes heroIn { to { opacity: 1; transform: none; } } /* Móvil: titular → campo de clips (el golpe visual) → claim → CTA, y el párrafo explicativo por debajo del pliegue. El brief pide impacto visual dentro de la primera pantalla, no un muro de texto. Escritorio: rejilla de dos columnas con el campo a la derecha. */ .hero__stage { display: flex; flex-direction: column; } .hero__h { order: 1; } .hero__field { order: 2; } .hero__claim { order: 3; } .hero__cta { order: 4; } .hero__cue { order: 5; } .hero__lead { order: 6; } .hero__lead { margin-top: var(--sp-6); max-width: 46ch; color: var(--text-3); font-size: var(--fs-md); } .hero__lead p + p { margin-top: var(--sp-4); } .hero__claim { margin-top: var(--sp-2); } .hero__claim b { display: block; font-size: var(--fs-xl); color: var(--text); font-weight: 800; letter-spacing: -.03em; } .hero__claim span { display: block; font-size: var(--fs-md); color: var(--accent); font-weight: 700; } .hero__cta { margin-top: var(--sp-5); } /* ─── Muro de video infinito ──────────────────────────────────────────────── Tres filas de piezas verticales que corren en direcciones alternas. El loop es seamless porque cada fila lleva su contenido DUPLICADO y la animación desplaza exactamente -50% del ancho total: al terminar, la segunda mitad está donde estaba la primera, así que no hay salto ni punto de reinicio perceptible. Nada de rotaciones: la profundidad viene de escala, opacidad y desenfoque por fila. */ .wall { /* min-width:0 y la columna fija son imprescindibles: un contenedor grid tiene min-width:auto y las filas (width:max-content) lo estirarían a miles de px, rompiendo el ancho de pantalla y el fade. */ position: relative; display: grid; gap: 8px; overflow: hidden; min-width: 0; grid-template-columns: minmax(0, 1fr); margin: var(--sp-5) 0 var(--sp-4); /* A sangre en móvil: los clips cruzan todo el ancho de pantalla, no sólo la columna de texto, y se disuelven en los bordes del viewport. */ width: 100vw; margin-left: 50%; transform: translateX(-50%); /* no-repeat es imprescindible: por defecto la máscara se repetiría fuera de la caja y el degradado dejaría de leerse como un fade continuo. */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; /* Fundido en los CUATRO bordes: los clips emergen del fondo y vuelven a disolverse en él. Dos capas de máscara cruzadas (horizontal x vertical) con composite intersect; sin la capa vertical el muro terminaba en un filo recto arriba y abajo y se veía el límite de la sección. */ --mask-x: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 8%, #000 26%, #000 74%, rgba(0,0,0,.35) 92%, transparent 100%); --mask-y: linear-gradient(180deg, transparent 0, rgba(0,0,0,.6) 6%, #000 15%, #000 85%, rgba(0,0,0,.6) 94%, transparent 100%); -webkit-mask-image: var(--mask-x), var(--mask-y); mask-image: var(--mask-x), var(--mask-y); -webkit-mask-composite: source-in; mask-composite: intersect; } .wall__row { display: flex; gap: 8px; width: max-content; will-change: transform; } .wall__row--a { animation: wallL 56s linear infinite; } .wall__row--b { animation: wallR 68s linear infinite; } @keyframes wallL { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @keyframes wallR { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } } .wall:hover .wall__row { animation-play-state: paused; } /* Profundidad por fila, sin inclinar nada */ .wall__row--b .wclip { transform: scale(.9); opacity: .78; } .wclip { position: relative; flex: 0 0 auto; width: 68px; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: linear-gradient(165deg, var(--blue-700) 0%, var(--blue-900) 52%, var(--ink-1000) 100%); box-shadow: var(--shadow-1); border: 1px solid rgba(255,255,255,.12); } @media (min-width: 720px) { .wclip { width: 96px; border-radius: 12px; } .wall { gap: 12px; } .wall__row { gap: 12px; } } .wclip::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 70% at 28% 10%, rgba(90,144,255,.42), transparent 62%), repeating-linear-gradient(112deg, rgba(255,255,255,.05) 0 2px, transparent 2px 20px); } /* Hueco listo para el vídeo real: basta sustituir el div por