/* ============================================================ TRIONI — shared.css ============================================================ */ /* ── PAGE LOADER ──────────────────────────────────────────── */ #page-loader { position: fixed; inset: 0; background: #070b12; display: flex; align-items: center; justify-content: center; z-index: 1100; transition: opacity 0.5s ease; } #page-loader.hidden { opacity: 0; pointer-events: none; } .loader-logo { color: var(--cyan); width: clamp(160px, 30vw, 280px); animation: loaderPulse 1.4s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(0,212,255,0.4)); } @keyframes loaderPulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 18px rgba(0,212,255,0.4)); } 50% { opacity: 0.5; filter: drop-shadow(0 0 6px rgba(0,212,255,0.15)); } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --cyan: #00d4ff; --cyan-dim: rgba(0, 212, 255, 0.15); --cyan-glow: rgba(0, 212, 255, 0.40); --bg: #070b12; --bg2: #0d1320; --bg3: #111827; --text: #f0f4ff; --muted: #8892a4; --border: rgba(255, 255, 255, 0.07); --card: rgba(255, 255, 255, 0.04); /* Escala de radios. La cápsula significa "esto flota, no está en la grilla": navbar, botón de WhatsApp, controles de la galería. Todo lo que vive en el flujo de la página usa la escala corta. */ --r-pill: 999px; --r-lg: 14px; /* cards y cajas grandes */ --r-md: 10px; /* botones, inputs, miniaturas */ --r-sm: 6px; /* chips, badges, etiquetas */ /* Escala z-index semántica: nada de 999 / 9999 sueltos */ --z-base: 1; --z-sticky: 100; --z-progress: 200; --z-overlay: 499; --z-drawer: 500; --z-float: 600; --z-trail: 700; --z-skip: 1000; --z-loader: 1100; } html { scroll-behavior: smooth; } /* ── TIPOGRAFÍA ────────────────────────────────────────────── Space Grotesk sigue siendo la voz de cuerpo e interfaz. Archivo entra sólo en los titulares grandes, en su eje ancho: el contraste es de ANCHO, no de estilo, así que no arrastra al sitio hacia el carril editorial. */ .hero-title, .page-header h1, .section-title, .cta-box h2 { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-stretch: 118%; font-weight: 700; text-wrap: balance; } .hero-title { letter-spacing: -.035em; } .section-title, .page-header h1 { letter-spacing: -.02em; } /* Prosa larga: menos huérfanas y medida de lectura acotada */ .section-sub, .quienes-text p, .case-body > p, .valor-card p, .service-card p, .signal p { text-wrap: pretty; } .quienes-text p, .case-body > p { max-width: 68ch; } body { background: var(--bg); color: var(--text); font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; } /* ── FOCO VISIBLE ──────────────────────────────────────────── Un único anillo para todo el sitio. Antes sólo sobrevivía el outline por defecto del navegador, poco visible sobre #070b12. */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--r-sm); } .btn-primary:focus-visible, .nav-cta:focus-visible, .btn-submit:focus-visible, .mobile-cta:focus-visible { outline-offset: 4px; } /* ── SALTAR AL CONTENIDO ─────────────────────────────────── */ .skip-link { position: fixed; top: .75rem; left: .75rem; z-index: var(--z-skip); padding: .7rem 1.2rem; border-radius: var(--r-md); background: var(--cyan); color: #000; font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-decoration: none; transform: translateY(calc(-100% - 1.5rem)); transition: transform .2s cubic-bezier(.25,1,.5,1); } .skip-link:focus-visible { transform: translateY(0); } /* ── STARS ───────────────────────────────────────────────── */ #stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* Estela del puntero: va por encima de todo el contenido, así no la tapan las secciones de fondo opaco. Con screen sólo aclara, nunca ensucia. */ #trail { position: fixed; inset: 0; z-index: var(--z-trail); pointer-events: none; mix-blend-mode: screen; } /* ── SCROLL PROGRESS ─────────────────────────────────────── */ /* Se anima con scaleX, no con width: width dispara layout en cada frame */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--cyan); z-index: var(--z-progress); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } /* ── NAV FLOTANTE (píldora) ────────────────────────────────── Barra despegada de los bordes, en cápsula, con la marca en un disco de acento a la izquierda y la página actual marcada como píldora contorneada. Scopeado por id: un