/* ============================================================ cinematic.css — Capa de movimiento, luz y profundidad. Aditiva y namespaced (.cx-*). El contenido es 100% visible sin JS: los estados de "reveal" sólo aplican con . Respeta prefers-reduced-motion. ============================================================ */ /* ---------- 1. Intro cinematográfica (cortina) ---------- */ .cx-intro{position:fixed;inset:0;z-index:9999;background:var(--cx-grad-hero); display:grid;place-items:center;transition:opacity .8s var(--cx-ease),visibility .8s;} .cx-intro__logo{width:84px;height:84px;border-radius:22px;background:var(--cx-grad-gold); box-shadow:var(--cx-glow-gold);animation:cx-pulse 1.6s var(--cx-ease) infinite;} .cx-intro__bar{position:absolute;bottom:18%;width:160px;height:3px;border-radius:3px; background:rgba(255,255,255,.15);overflow:hidden;} .cx-intro__bar::after{content:"";position:absolute;inset:0;width:40%;border-radius:3px; background:var(--cx-grad-gold);animation:cx-load 1.1s var(--cx-ease) infinite;} .cx-intro.is-hidden{opacity:0;visibility:hidden;} @keyframes cx-pulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.25)}} @keyframes cx-load{0%{left:-40%}100%{left:100%}} /* ---------- 2. Barra de progreso de scroll — DESACTIVADA ---------- Era la línea azul-violeta que aparecía cruzando los paneles cuando se abrían los overlays. Forzada a no renderizar nunca con display:none. */ .cx-progress{display:none !important;} /* ---------- 3. Cursor luminoso (solo puntero fino) ---------- */ .cx-cursor,.cx-cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:10000; border-radius:50%;transform:translate(-50%,-50%);will-change:transform;} .cx-cursor{width:34px;height:34px;border:1.5px solid rgba(196,162,78,.55); transition:width .25s var(--cx-ease),height .25s var(--cx-ease),background .25s,border-color .25s;} .cx-cursor.is-hover{width:54px;height:54px;background:rgba(196,162,78,.10);border-color:rgba(196,162,78,.9);} .cx-cursor-dot{width:6px;height:6px;background:var(--cx-gold);} @media (hover:none),(pointer:coarse){.cx-cursor,.cx-cursor-dot{display:none}} /* ---------- 4. Reveal al hacer scroll ---------- */ .cx-js [data-cx-reveal]{opacity:0;transform:translateY(28px); transition:opacity .8s var(--cx-ease),transform .8s var(--cx-ease);will-change:opacity,transform;} .cx-js [data-cx-reveal].is-in{opacity:1;transform:none;} .cx-js [data-cx-reveal="left"]{transform:translateX(-36px)} .cx-js [data-cx-reveal="right"]{transform:translateX(36px)} .cx-js [data-cx-reveal="zoom"]{transform:scale(.94)} .cx-js [data-cx-reveal].is-in{transform:none} /* stagger por índice */ .cx-js [data-cx-reveal][style*="--cx-i"]{transition-delay:calc(var(--cx-i)*70ms)} /* ---------- 5. Realces de marca ---------- */ .cx-shine{position:relative;overflow:hidden;} .cx-shine::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);transition:left .7s var(--cx-ease);} .cx-shine:hover::after{left:140%;} .cx-gradient-text{background:var(--cx-grad-gold);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;background-size:200% auto;animation:cx-pan 6s linear infinite;} @keyframes cx-pan{to{background-position:200% center}} /* tarjetas con tilt + glow (se activa por JS añadiendo .cx-tilt) */ .cx-tilt{transition:transform .25s var(--cx-ease),box-shadow .25s var(--cx-ease);transform-style:preserve-3d;} .cx-tilt:hover{box-shadow:var(--cx-shadow-2);} /* ---------- 6. Fondos vivos (aurora + grid) reutilizables ---------- */ .cx-aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;} .cx-aurora::before,.cx-aurora::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%; filter:blur(80px);opacity:.5;mix-blend-mode:screen;animation:cx-float 18s var(--cx-ease) infinite;} .cx-aurora::before{background:radial-gradient(circle,#38BDF8,transparent 60%);top:-20%;left:-10%;} .cx-aurora::after{background:radial-gradient(circle,#7C5CFF,transparent 60%);bottom:-25%;right:-10%;animation-delay:-9s;} @keyframes cx-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,6%) scale(1.15)}} /* ---------- 7. KPI / Centro de Mando (admin) ---------- */ .cx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin:8px 0 26px;} .cx-kpi{position:relative;overflow:hidden;padding:22px 22px 20px;border-radius:20px;color:#fff; background:var(--cx-grad-hero);box-shadow:var(--cx-shadow-1);border:1px solid rgba(255,255,255,.08);} .cx-kpi::before{content:"";position:absolute;inset:0;background: radial-gradient(420px 120px at 110% -20%,rgba(196,162,78,.30),transparent 60%);pointer-events:none;} .cx-kpi__label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:600;} .cx-kpi__value{font-size:2.1rem;font-weight:800;line-height:1.05;margin:8px 0 2px;font-variant-numeric:tabular-nums;} .cx-kpi__sub{font-size:.82rem;color:rgba(255,255,255,.7);} .cx-kpi__icon{position:absolute;top:18px;right:20px;font-size:1.4rem;opacity:.85;} .cx-kpi--gold{background:linear-gradient(150deg,#7a5f1e,#C4A24E);} .cx-kpi--alert{background:linear-gradient(150deg,#7a1f22,#dc2626);} .cx-kpi--tech{background:linear-gradient(150deg,#0b3a63,#2563EB);} .cx-panel{background:#fff;border:1px solid #E8ECF1;border-radius:20px;padding:22px;box-shadow:var(--cx-shadow-1);margin-bottom:22px;} .cx-panel h3{margin:0 0 4px;font-family:'Playfair Display',serif;color:var(--cx-navy);} .cx-panel .cx-sub{color:#64748B;font-size:.86rem;margin-bottom:14px;} .cx-table{width:100%;border-collapse:collapse;font-size:.9rem;} .cx-table th{text-align:left;color:#64748B;font-weight:600;padding:10px 12px;border-bottom:2px solid #EFF2F6;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;} .cx-table td{padding:11px 12px;border-bottom:1px solid #F1F5F9;color:#1E293B;} .cx-table tr:hover td{background:#F8FAFC;} .cx-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;} .cx-chip--ok{background:#F0FDF4;color:#166534;} .cx-chip--warn{background:#FEF3C7;color:#92400E;} .cx-chip--bad{background:#FEE2E2;color:#991B1B;} .cx-spin{display:inline-block;width:18px;height:18px;border:2px solid #E2E8F0;border-top-color:var(--cx-gold);border-radius:50%;animation:cx-rot .7s linear infinite;} @keyframes cx-rot{to{transform:rotate(360deg)}} /* ---------- 8. Microinteracciones globales suaves ---------- */ .cx-js a,.cx-js button{transition:transform .2s var(--cx-ease)} .cx-magnetic{will-change:transform} /* ---------- 9. Accesibilidad ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;} .cx-js [data-cx-reveal]{opacity:1!important;transform:none!important;} .cx-intro{display:none!important;} } /* ---------- 10. Navbar al hacer scroll ---------- */ .navbar.is-scrolled{backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px); box-shadow:0 6px 30px rgba(8,20,40,.10);} /* ---------- 11. Scroll innovador en secciones (scroll-cine.js) ---------- */ .cx-sec-progress{display:none !important;} .cx-js .cx-depth{opacity:0;transform:translateY(34px) scale(.985); transition:opacity .75s var(--cx-ease),transform .75s var(--cx-ease);will-change:opacity,transform;} .cx-js .cx-depth.cx-depth-in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.cx-js .cx-depth{opacity:1!important;transform:none!important;}} /* Failsafe: contenido ya revelado por el sistema .reveal nunca queda oculto */ .cx-js .reveal.visible{ opacity:1 !important; transform:none !important; } /* ═══════════════════════════════════════════════════════════════ PÁGINA INICIAL EN BLANCO + PARTÍCULAS (nodos azul marino, conexiones doradas). Capa aditiva; no toca las secciones internas. ═══════════════════════════════════════════════════════════════ */ #landing-screen{ background:#ffffff !important; } #landing-screen .hero-blob, #landing-screen .hero-orb, #landing-screen .hero-grid, #landing-screen .hero-particles, #landing-screen .hero-radial{ display:none !important; } #landing-screen #edParticles{ z-index:0 !important; } #landing-screen > div[style*="z-index:2"]{ position:relative; z-index:2; } .landing-title{ color:#0C2340 !important; } .landing-title .gold{ color:#B8912F !important; text-shadow:none !important; } .landing-subtitle{ color:#5b6b82 !important; } .landing-logo img{ filter:drop-shadow(0 12px 34px rgba(12,35,64,.20)) !important; } .hero-badge{ background:rgba(196,162,78,.12) !important; border-color:rgba(196,162,78,.45) !important; color:#0C2340 !important; }