/* Vaucai — shared styles (landing + legal pages). HTML/CSS/JS vanilla servido por nginx, sin build step (ADR-008: la web es el funnel a Telegram, NO una PWA/Next.js). Los tokens de diseño viven en :root (ADR-007) = fuente única de color, superficie, tipografía y motion. */ * { margin: 0; padding: 0; box-sizing: border-box; } /* WEB-02 (Bloque G) — foco visible accesible (WCAG 2.4.7 / EAA). Patrón moderno: se quita el outline por defecto (de bajo contraste sobre el tema oscuro) y se da un anillo CLARO solo en navegación por TECLADO (`:focus-visible`). El ratón no muestra nada (no cambia para quien hace click); quien tabula ve SIEMPRE dónde está — botones, enlaces, inputs. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-hover, #3399FF); outline-offset: 2px; border-radius: 4px; } /* iOS Safari rubber-band overscroll expone el fondo del por debajo y por encima del body. background var(--bg) elimina el flash blanco bajo el footer negro. overscroll-behavior: none mata la animacion de rebote en si misma (Safari iOS 16+, no-op en anteriores). color-scheme asegura que scrollbar nativa y form controls hereden tema oscuro sin parpadeo. */ html { background: var(--bg); color-scheme: dark; overscroll-behavior: none; /* La web se adapta SIEMPRE al ancho del móvil: nada de scroll/arrastre horizontal. `clip` (preferido) no crea contexto de scroll —preserva position:sticky—; `hidden` queda de fallback para navegadores viejos. */ overflow-x: hidden; overflow-x: clip; } :root { --bg: #0a0a0a; --bg-deep: #050506; --surface: #18181b; --surface-elevated: #111317; --surface-soft: #16181D; --border: #27272a; --border-soft: #1E2127; --border-light: #2A2D35; --fg: #fafafa; --fg-soft: #E5E5E7; --muted: #a1a1aa; --muted-soft: #8A909C; --accent: #007FFF; --accent-hover: #3399FF; --error: #ef4444; /* Aliases + new tokens introducidos en el brief de la landing narrativa. Las páginas legales siguen usando los nombres originales. */ --void: var(--bg); --void-raised: #0F1115; --void-elevated: #14171D; --text: var(--fg); --text-soft: var(--muted); --text-faint: var(--muted-soft); --text-whisper: #3E434C; --vaucai-blue: var(--accent); --vaucai-blue-hover: #3399FF; --line: var(--border); --line-soft: var(--border-soft); --line-bright: var(--border-light); --post-it: #FCE88C; /* Motion tokens (Bloque B) — fuente única de curvas y duraciones. --ease-cinematic ya existía (reveals). Añadimos la familia para que todo el motion del funnel (Lenis, GSAP, transiciones CSS) hable el mismo idioma en vez de hardcodear curvas sueltas por sitio. */ --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 0.2s; --dur-base: 0.4s; --dur-slow: 0.9s; } /* MÓVIL (OLED): fondo de TODA la web en negro puro #000 — el mismo que las pantallas de los mockups del hero, para que el teléfono se funda con el fondo sin canto (en OLED #000 vs #0a0a0a se leía como una costura dura). Uniforme en todas las páginas → sin salto ni en el teléfono ni entre secciones/footer. Desktop intacto (#0a0a0a). Va DESPUÉS del :root base para ganarle por orden. */ @media (max-width: 768px) { :root { --bg: #000; } } /* Lenis smooth scroll (Bloque B · B-02) — helpers requeridos por la lib. Solo aplican cuando motion.js añade la clase `.lenis` al (es decir, cuando el scroll suave está activo y NO hay prefers-reduced-motion). */ 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: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* bg en html (línea 14). body queda transparent para que el body::before del hero (backdrop cinemático) sea visible. */ background: transparent; color: var(--fg); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; position: relative; } /* Reveal animations */ @keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; animation: riseIn 0.6s ease-out forwards; } .reveal-1 { animation-delay: 0.05s; } .reveal-2 { animation-delay: 0.15s; } .reveal-3 { animation-delay: 0.25s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; animation: none; } } /* Nav */ nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; /* Posicionado para pintar: - por encima del .hero-backdrop (z=0) - por encima del .contact-menu cuando está abierto en full- screen (z=60). z-index: 200 garantiza que el logo + hamburger sigan visibles cuando el menú Poke-style cubre el viewport. */ position: relative; z-index: 200; } .logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; /* Stacking: el .contact-menu es descendiente del