/* Extraído de visitante.html (bloque 1) por tools/csp_styles.py — editar AQUÍ, no en la página */
/* ============================================================
Portal Visitante v3 (FEATURE-036 r2) — hero cinemático.
Los primeros 3 segundos: pantalla completa oscura con la
radiografía del auto, título gigante entrando escalonado y
CTA rojo — luego el scroll "ensambla" el auto (scrubbing de
la secuencia) mientras 3 escenas de copy se revelan. El resto
de la página conserva el "aurora glass" claro aprobado.
Autocontenido: el visitante no carga el stack admin.
============================================================ */
:root{
--bg:#eef0f6; --ink:#16181f; --mid:#525866; --low:#878e9d;
--glass:rgba(255,255,255,.62); --glass-h:rgba(255,255,255,.82);
--stroke:rgba(255,255,255,.7); --shadow:0 24px 60px -28px rgba(58,66,110,.25);
--accent:#c7252b; --accent-deep:#8f1a1f; --accent-glow:rgba(199,37,43,.35);
--info:#1d4ed8; --success:#0d7a56; --wa:#128c4b;
--ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box} html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
a{text-decoration:none;color:inherit}
img{max-width:100%}
/* --- Fondo aurora (secciones claras) con parallax --- */
.aurora{position:fixed;inset:-20% -10%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.85}
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora .a1{width:44vw;height:44vw;left:-6%;top:-4%;background:radial-gradient(circle,#c9b9f2 0%,transparent 65%)}
.aurora .a2{width:38vw;height:38vw;right:-4%;top:6%;background:radial-gradient(circle,#aac9f0 0%,transparent 65%)}
.aurora .a3{width:40vw;height:40vw;left:22%;top:46%;background:radial-gradient(circle,#f2b9c9 0%,transparent 68%)}
.aurora .a4{width:34vw;height:34vw;right:8%;top:72%;background:radial-gradient(circle,#b9e2f2 0%,transparent 65%)}
/* --- Header transparente, sin contenedor: los elementos flotan.
Sobre el cine la viñeta superior propia del escenario da la
legibilidad; sobre el contenido claro, un degradado suave del color
de fondo que se desvanece (sin borde, sin caja). --- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;
display:flex;align-items:center;gap:12px;padding:16px max(20px,calc((100% - 1140px)/2 + 20px)) 22px;flex-wrap:wrap;
color:#fff;transition:color .35s ease;pointer-events:none}
.hdr>*{pointer-events:auto}
.hdr::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
background:linear-gradient(180deg,rgba(238,240,246,.92) 0%,rgba(238,240,246,.55) 60%,rgba(238,240,246,0) 100%)}
.hdr.on-light{color:var(--ink)}
.hdr.on-light::before{opacity:1}
/* logo sobre pastilla horizontal: blanco que se desvanece (gesto del
sidebar admin, en horizontal) — el logo flota sin círculo propio */
.hdr img{width:96px;height:56px;padding:5px 25px;object-fit:contain;flex:none;border-radius:100px;
background:linear-gradient(90deg,#ffffff 0%,#eceff4 38%,rgba(190,195,205,.5) 66%,rgba(255,255,255,0) 100%);
filter:drop-shadow(0 4px 14px rgba(0,0,0,.22));transition:transform .25s var(--ease)}
.hdr img:hover{transform:scale(1.04)}
.hdr b{font-size:14px;letter-spacing:-.01em}
.hdr-spacer{flex:1}
.hdr .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.hdr.on-light .btn-ghost{background:rgba(22,24,31,.04);border-color:rgba(22,24,31,.1);color:var(--ink)}
/* --- Botones v3: vidrio desaturado + splash de color desde el cursor ---
Nada de rellenos sólidos saturados: base translúcida con blur y borde
sutil; el color aparece como un "splash" radial que florece desde el
punto exacto del cursor (--mx/--my, mismo listener de las tarjetas). */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;border-radius:100px;padding:13px 22px;
font-size:13px;font-weight:800;letter-spacing:.01em;overflow:hidden;min-height:44px;
border:1px solid transparent;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
transition:transform .18s var(--ease),box-shadow .22s ease,background .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.955)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn i{transition:transform .22s var(--ease)}
.btn:hover i.fa-arrow-right{transform:translateX(3px)}
/* splash radial en el punto del cursor */
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),var(--splash,rgba(255,255,255,.3)),transparent 72%);
transition:opacity .3s ease}
.btn:hover::before{opacity:1}
/* sheen sutil */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;transform:skewX(-22deg);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
opacity:0;transition:opacity .15s;pointer-events:none}
.btn:hover::after{opacity:1;animation:sheen .8s var(--ease)}
@keyframes sheen{to{left:130%}}
/* primario (contexto oscuro por defecto: cine, contacto, header) */
.btn-red{background:rgba(199,37,43,.2);border-color:rgba(255,90,96,.2);color:#fff;
--splash:rgba(226,50,56,.45);box-shadow:0 10px 30px -14px var(--accent-glow)}
.btn-red:hover{border-color:rgba(255,90,96,.24);box-shadow:0 16px 40px -14px var(--accent-glow)}
/* primario en contexto claro */
.light-wrap .btn-red,.hdr.on-light .btn-red{background:rgba(199,37,43,.09);border-color:rgba(199,37,43,.16);color:var(--accent-deep);--splash:rgba(199,37,43,.16)}
.light-wrap .btn-red:hover,.hdr.on-light .btn-red:hover{border-color:rgba(199,37,43,.3)}
/* dentro de bandas oscuras (CTA del bento, contacto) vuelve la variante clara-sobre-oscuro */
.light-wrap .cta-red .btn-red,.light-wrap .contact .btn-red{background:rgba(199,37,43,.24);border-color:rgba(255,90,96,.24);color:#fff;--splash:rgba(226,50,56,.45)}
.btn-ghost{background:rgba(22,24,31,.04);border-color:rgba(22,24,31,.1);color:var(--ink);--splash:rgba(22,24,31,.07)}
.btn-wa{background:rgba(18,140,75,.07);border-color:rgba(18,140,75,.13);color:var(--wa);--splash:rgba(18,140,75,.14)}
.btn-mail{background:rgba(29,78,216,.06);border-color:rgba(29,78,216,.12);color:var(--info);--splash:rgba(29,78,216,.12)}
.btn-sm{padding:9px 15px;font-size:12px;min-height:40px}
.btn-frost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff;--splash:rgba(255,255,255,.22)}
.btn-frost:hover{border-color:rgba(255,255,255,.26)}
/* ============================================================
CINE — scrollytelling: región alta + escenario sticky
============================================================ */
.cine{position:relative;height:300vh;background:#060608;z-index:1}
.cine-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%}
.cine-vig{position:absolute;inset:0;pointer-events:none;z-index:1;
background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(4,4,7,.72) 100%),
linear-gradient(180deg,rgba(4,4,7,.55) 0%,transparent 22%,transparent 62%,rgba(4,4,7,.8) 100%)}
.cine-grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}
.scene{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
padding:0 clamp(22px,7vw,110px);opacity:0;pointer-events:none;will-change:opacity,transform}
.scene.live{pointer-events:auto}
.scene .kicker{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#ff8a8f;font-weight:800;margin-bottom:16px}
.scene .kicker::before{content:"";width:30px;height:2px;border-radius:2px;background:linear-gradient(90deg,#ff4d55,transparent)}
.s1 h1{margin:0 0 16px;font-size:clamp(38px,7.2vw,88px);font-weight:900;letter-spacing:-.045em;line-height:.98;color:#fff;max-width:860px}
.s1 h1 em{font-style:normal;background:linear-gradient(120deg,#ff4d55,#e23238 45%,#a78bfa 130%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.s1 .sub{margin:0 0 26px;font-size:clamp(14px,1.6vw,17px);color:rgba(255,255,255,.72);line-height:1.6;max-width:560px}
.s1 .ctas{display:flex;gap:12px;flex-wrap:wrap}
/* entrada coreografiada al cargar (impacto sin necesidad de scroll) */
.s1 .in{opacity:0;transform:translateY(34px);filter:blur(8px);
animation:riseIn .9s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes riseIn{to{opacity:1;transform:none;filter:none}}
.s2 h2,.s3 h2{margin:0 0 14px;font-size:clamp(28px,4.6vw,54px);font-weight:900;letter-spacing:-.04em;line-height:1.02;color:#fff;max-width:720px}
.s2 .chips{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.chip{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:18px;padding:14px 18px;max-width:460px;
transform:translateX(-18px);opacity:0;transition:transform .6s var(--ease),opacity .6s ease,background .25s ease,border-color .25s ease}
.chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);transform:translateX(4px) !important}
.scene.live .chip{transform:none;opacity:1}
.scene.live .chip:nth-child(2){transition-delay:.09s}
.scene.live .chip:nth-child(3){transition-delay:.18s}
.chip .ci{flex:none;display:flex;align-items:center;font-size:20px}
.chip b{display:block;font-size:14.5px;color:#fff}
.chip span{font-size:12px;color:rgba(255,255,255,.6)}
.s3 p{margin:0 0 24px;font-size:clamp(14px,1.6vw,16.5px);color:rgba(255,255,255,.72);max-width:540px;line-height:1.6}
.regions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.region{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:8px 16px 8px 8px}
.region img{width:34px;height:34px;object-fit:contain;border-radius:50%;background:#fff;padding:4px}
.region span{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.85);text-transform:uppercase}
.cine-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
.cine-hint i{animation:hintbounce 1.6s ease-in-out infinite}
@keyframes hintbounce{50%{transform:translateY(4px)}}
.cine-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);z-index:3}
.cine-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e23238,#ff4d55)}
.cine-badge{position:absolute;left:22px;bottom:20px;z-index:3;display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(10,10,14,.5);backdrop-filter:blur(8px);padding:7px 13px;border-radius:100px}
.cine-badge i{color:#ff4d55;font-size:8px;animation:vppulse 2s ease-in-out infinite}
@keyframes vppulse{50%{opacity:.35}}
/* ============================================================
Contenido claro (aurora glass)
============================================================ */
.page{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:26px 20px 70px;background:transparent}
.light-wrap{position:relative;z-index:2;overflow:clip;
background:linear-gradient(180deg,#0b0b0f 0%,rgba(238,240,246,.92) 6%,rgba(238,240,246,0) 18%)}
.rv{opacity:0;transform:translateY(26px);filter:blur(5px);
transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s ease;transition-delay:var(--rvd,0ms)}
.rv.in{opacity:1;transform:none;filter:none}
/* Palabras gigantes de fondo (editorial) con parallax propio */
.wm{position:absolute;right:-1%;z-index:0;pointer-events:none;user-select:none;
font-size:clamp(70px,13vw,170px);font-weight:900;letter-spacing:-.05em;line-height:1;
color:transparent;-webkit-text-stroke:1.5px rgba(22,24,31,.07);white-space:nowrap;will-change:transform}
/* Encabezado de sección: título + subrayado que se dibuja (sin pills) */
.sec{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;margin:54px 2px 18px}
.sec .row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec h3{position:relative;margin:0;font-size:clamp(21px,3vw,30px);font-weight:900;letter-spacing:-.035em;padding-bottom:8px}
.sec h3::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:3px;
background:linear-gradient(90deg,var(--accent),#a78bfa);transition:width .8s var(--ease) .15s}
.sec.in h3::after{width:52px}
.sec span.note{font-size:11.5px;color:var(--low)}
/* --- Marquee del equipo (fotos reales) --- */
.mq{overflow:hidden;margin-top:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 32s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.person{display:flex;align-items:center;gap:16px;background:var(--glass);border:none;
backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
border-radius:100px;padding:11px 28px 11px 12px;box-shadow:var(--shadow);transition:transform .22s var(--ease)}
.person:hover{transform:translateY(-3px)}
/* retrato b/n → color al hover (mismo gesto que el overlay de la landing) */
.person img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:top;
background:linear-gradient(135deg,#dfe3f0,#c9cfe2);filter:grayscale(1);transition:filter .35s ease,transform .3s var(--ease)}
.person:hover img{filter:grayscale(0);transform:scale(1.04)}
.person b{display:block;font-size:15px;letter-spacing:-.01em}
.person span{font-size:12px;color:var(--mid)}
/* --- Bento módulos --- */
.bento{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.bcard{border-radius:22px;padding:20px;position:relative;overflow:hidden;background:var(--glass);border:none;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);min-height:126px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow);transition:transform .22s var(--ease),box-shadow .25s ease}
.bcard:hover{transform:translateY(-5px);box-shadow:0 34px 70px -26px rgba(58,66,110,.35)}
.bcard:hover .bic{transform:scale(1.12) rotate(-4deg)}
/* spotlight: halo que sigue al cursor (JS fija --mx/--my) */
.bcard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(199,37,43,.09),transparent 65%)}
.bcard:hover::before{opacity:1}
/* candado que se "abre" al hover — glifo puro, sin fondo ni borde */
.lock{position:absolute;top:16px;right:16px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--low);font-size:13px;transition:color .25s ease}
.lock i{transition:opacity .25s ease,transform .25s var(--ease)}
.lock .fa-lock-open{position:absolute;opacity:0;transform:scale(.6) rotate(-14deg)}
.bcard:hover .lock{color:var(--success)}
.bcard:hover .lock .fa-lock{opacity:0;transform:scale(.6) rotate(14deg)}
.bcard:hover .lock .fa-lock-open{opacity:1;transform:none}
/* íconos de módulo: glifo transparente, sin tile ni borde */
.bic{display:flex;align-items:center;margin-bottom:12px;font-size:22px;transition:transform .25s var(--ease);transform-origin:left center}
.bcard h4{margin:0 0 4px;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.bcard p{margin:0;font-size:12px;color:var(--mid);line-height:1.5}
.b4{grid-column:span 4}.b3{grid-column:span 3}.b6{grid-column:span 6}
/* tarjeta CTA: mismo lenguaje oscuro-con-glow del cierre (sin saturar) */
.cta-red{background:linear-gradient(130deg,#1b1c22,#101116 60%);border:none;color:#fff;box-shadow:0 30px 70px -26px rgba(20,24,48,.5)}
.cta-red::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(70% 110% at 12% 115%,rgba(199,37,43,.14),transparent 58%),
radial-gradient(45% 70% at 95% -12%,rgba(124,58,237,.08),transparent 60%)}
.cta-red>*{position:relative;z-index:1}
.cta-red h4{font-size:17px;color:#fff}
.cta-red p{color:rgba(255,255,255,.78)}
.cta-red .bento-cta{margin-top:14px;align-self:flex-start}
.cta-red::before{background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.06),transparent 65%)}
/* --- Tarjetas eventos / boletines --- */
.peek{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.pcard{background:var(--glass);border:none;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .22s var(--ease),box-shadow .25s ease;position:relative}
.pcard:hover{transform:translateY(-5px);box-shadow:0 34px 70px -26px rgba(58,66,110,.35)}
/* entrada escalonada de tarjetas cargadas por JS (post-IntersectionObserver) */
.peek .pcard{animation:cardIn .65s var(--ease) both;animation-delay:var(--ci,0ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.97);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
/* spotlight también en estas tarjetas */
.pcard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;transition:opacity .3s ease;
background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(199,37,43,.07),transparent 65%)}
.pcard:hover::before{opacity:1}
/* cabecera de color de las tarjetas de boletín */
.bhead{display:flex;align-items:center;gap:11px;padding:14px 14px 0}
.bhead .bi{flex:none;display:flex;align-items:center;font-size:18px}
.bhead b{font-size:13.5px;letter-spacing:-.01em;line-height:1.3}
.pcover{height:130px;position:relative;flex:none;background-size:cover;background-position:center;overflow:hidden}
.pcover .zoom{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s var(--ease)}
.pcard:hover .pcover .zoom{transform:scale(1.07)}
.pcover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(8,10,16,.68));z-index:1}
.pcover .cat{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;color:#fff;padding:4px 10px;border-radius:100px;z-index:2;background:rgba(0,0,0,.45)}
.pcover .ttl{position:absolute;bottom:10px;left:12px;right:12px;z-index:2;font-size:14px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.pbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.prow{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mid)}
.prow i{width:13px;text-align:center;color:var(--low);font-size:11px}
.pfoot{margin-top:auto;padding-top:10px;border-top:1px solid rgba(22,24,31,.07);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;padding:4px 10px;border-radius:100px}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.badge-open{background:#e0f4eb;color:var(--success)}
.badge-doc{background:#e6edfb;color:var(--info)}
.plock{font-size:10.5px;color:var(--low);transition:color .15s}
.plock:hover{color:var(--accent)}
.empty{grid-column:1/-1;text-align:center;color:var(--low);font-size:12.5px;padding:26px;background:var(--glass);border:none;border-radius:16px}
/* estado vacío como invitación, no como disculpa */
.empty-rich{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
padding:34px 22px;border-radius:24px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
box-shadow:var(--shadow)}
.empty-rich .ei{display:flex;align-items:center;justify-content:center;
font-size:26px;color:var(--accent);animation:floaty 3.4s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-6px)}}
.empty-rich b{font-size:14.5px;letter-spacing:-.01em}
.empty-rich p{margin:0;font-size:12px;color:var(--mid);max-width:380px;line-height:1.55}
/* --- Gran final de contacto: vidrio oscuro translúcido, sin bordes —
las auroras del fondo se transparentan a través del panel --- */
.contact{position:relative;z-index:1;margin-top:64px;border-radius:34px;overflow:hidden;
background:rgba(19,20,27,.58);color:#fff;
backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);
padding:clamp(28px,5vw,52px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
box-shadow:0 44px 100px -40px rgba(20,24,48,.45)}
.contact::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 90% at 15% 110%,rgba(199,37,43,.12),transparent 60%),
radial-gradient(50% 80% at 90% -10%,rgba(124,58,237,.08),transparent 60%)}
.contact>*{position:relative}
.contact h4{margin:0;font-size:clamp(22px,3.4vw,34px);font-weight:900;letter-spacing:-.035em}
.contact p{margin:0 0 16px;font-size:13px;color:rgba(255,255,255,.65)}
.contact .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.contact .btn-mail{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff;--splash:rgba(96,165,250,.3)}
.contact .btn-mail:hover{border-color:rgba(255,255,255,.38)}
.contact .btn-wa{background:rgba(37,211,102,.08);border-color:rgba(74,222,128,.3);color:#4ade80;--splash:rgba(37,211,102,.28)}
.contact .btn-wa:hover{border-color:rgba(74,222,128,.5)}
/* formulario de contacto (envía a atención del Clúster) */
.cform{width:min(640px,100%);display:flex;flex-direction:column;gap:12px;margin:10px 0 18px;text-align:left}
.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform input[type=text],.cform input[type=email],.cform textarea{
width:100%;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:13px 16px;
background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:13.5px;resize:vertical;
transition:border-color .2s ease,background .2s ease}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(255,255,255,.42)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:rgba(255,90,96,.24);background:rgba(255,255,255,.09)}
#cfHoney{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.cform-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cform-status{font-size:12.5px;min-height:18px;color:rgba(255,255,255,.65)}
.cform-status.ok{color:#4ade80}
.cform-status.err{color:#ff8a8f}
.cform-alt{margin-top:4px}
@media(max-width:600px){.cform-grid{grid-template-columns:1fr}}
.foot{margin-top:48px;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:11px;color:var(--low)}
.foot p{margin:0;display:flex;align-items:center;gap:10px}
/* logo grande del footer: flota sobre un splash de colores difuminado,
sin líneas ni contenedor — se funde con el fondo */
.foot-logo{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}
.foot-logo::before{content:"";position:absolute;inset:-70%;pointer-events:none;filter:blur(26px);opacity:.95;
background:radial-gradient(42% 42% at 30% 32%,rgba(199,37,43,.5),transparent 70%),
radial-gradient(40% 40% at 72% 28%,rgba(124,58,237,.4),transparent 70%),
radial-gradient(46% 46% at 52% 76%,rgba(59,130,246,.42),transparent 70%);
transition:opacity .35s ease,transform .5s var(--ease)}
.foot-logo:hover::before{opacity:1;transform:scale(1.12)}
.foot-logo img{position:relative;width:96px;height:96px;object-fit:contain;border-radius:50%;
filter:drop-shadow(0 10px 24px rgba(58,66,110,.3));transition:transform .3s var(--ease)}
.foot-logo:hover img{transform:scale(1.05)}
.lumia-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;
background:var(--glass);border:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
font-size:11.5px;font-weight:600;color:var(--mid);transition:transform .2s var(--ease),box-shadow .2s ease}
.lumia-badge:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.lumia-badge:active{transform:scale(.97)}
.lumia-badge img{width:16px;height:16px;border-radius:0;opacity:1}
.lumia-badge strong{background:linear-gradient(135deg,#8b5cf6,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
@media(max-width:900px){.b4,.b3{grid-column:span 6}.b6{grid-column:span 12}}
@media(max-width:600px){
.b4,.b3,.b6{grid-column:span 12}
.cine{height:260vh}
.scene{padding:0 20px;padding-top:52px}
.s1 .sub{font-size:13.5px}
.cine-badge{display:none}
.hdr b{display:none}
.hdr img{width:46px;height:46px;padding:5px}
}
@media(prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;filter:none;transition:none}
.aurora i{transform:none !important}
.s1 .in{animation:none;opacity:1;transform:none;filter:none}
.mq-track{animation:none}
.mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.cine{height:auto}
.cine-sticky{position:relative;height:100svh}
.s2,.s3,.cine-hint{display:none}
.s1{opacity:1 !important;pointer-events:auto !important}
.cine-hint i,.cine-badge i{animation:none}
.peek .pcard{animation:none}
.empty-rich .ei{animation:none}
.wm{transform:none !important}
.sec h3::after{transition:none;width:52px}
}