/* Tema «HUD» de la tienda de marca blanca (1.7.0, 28-10-2026).
   Sacado de la landing de cuentaprofesional.com (nuestra) y re-apuntado a las
   piezas de la tienda. Sólo se carga con el ajuste tema=hud; el clásico no lo ve.
   El acento es el color de marca del distribuidor (--primario). */
@font-face{font-family:Orbitron;src:url(fonts/orbitron.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:HudMono;src:url(fonts/sharetechmono.woff2) format("woff2");font-display:swap}

body.tema-hud{
  --fondo:#07090d;--panel:#0b0f16;--tarjeta:#0d1118;--borde:#1b2230;--apagado:#9aa6b8;--texto:#e8ecf3;
  --acento:var(--primario);
  --acento-2:color-mix(in srgb,var(--primario) 70%,#000);
  --acento-claro:color-mix(in srgb,var(--primario) 45%,#fff);
  --verde:#25d366;--terminal:#7dffb0;--radio:16px;
  background:var(--fondo);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:clip}
html:has(body.tema-hud){overflow-x:clip}
body.tema-hud h1,body.tema-hud h2,body.tema-hud h3,body.tema-hud .pie-marca{font-family:Orbitron,Inter,sans-serif;letter-spacing:.01em}

/* ── Fondo animado ─────────────────────────────────────────────────────────── */
.hud-fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hud-rejilla{position:absolute;inset:-50%;
  background-image:linear-gradient(color-mix(in srgb,var(--acento) 8%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--acento) 8%,transparent) 1px,transparent 1px);
  background-size:48px 48px;transform:perspective(600px) rotateX(55deg) translateY(-10%);
  animation:hud-avanza 14s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 25%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000 25%,transparent 70%)}
@keyframes hud-avanza{to{background-position:0 48px,0 0}}
.hud-barrido{position:absolute;left:0;right:0;height:140px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acento) 6%,transparent),transparent);animation:hud-barrido 7s ease-in-out infinite}
@keyframes hud-barrido{0%{top:-140px}100%{top:100%}}
.hud-sirena{position:absolute;inset:0;background:radial-gradient(60% 40% at 0% 0%,rgba(255,59,59,.09),transparent 60%),radial-gradient(60% 40% at 100% 0%,rgba(47,123,255,.10),transparent 60%);animation:hud-sirena 2.4s steps(2,end) infinite}
@keyframes hud-sirena{50%{background:radial-gradient(60% 40% at 0% 0%,rgba(47,123,255,.10),transparent 60%),radial-gradient(60% 40% at 100% 0%,rgba(255,59,59,.09),transparent 60%)}}
body.tema-hud::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px)}
.hud-progreso{position:fixed;left:0;top:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--acento),var(--acento-claro),#ff3b3b);box-shadow:0 0 12px var(--acento)}

/* ── Cabecera ──────────────────────────────────────────────────────────────── */
body.tema-hud .confianza{background:rgba(7,9,13,.8);border-bottom-color:var(--borde)}
body.tema-hud header{background:rgba(7,9,13,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--borde)}
body.tema-hud .marca img{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--acento) 45%,transparent))}
body.tema-hud .menu a{position:relative}
body.tema-hud .menu a::after{content:"";position:absolute;left:14px;right:100%;bottom:4px;height:2px;background:var(--acento);transition:right .25s}
body.tema-hud .menu a:hover::after{right:14px}
body.tema-hud .bus input{background:#0b0f16;border-color:var(--borde)}
body.tema-hud .bus input:focus{border-color:var(--acento);box-shadow:0 0 0 4px color-mix(in srgb,var(--acento) 15%,transparent)}

/* ── Botones ───────────────────────────────────────────────────────────────── */
body.tema-hud .btn{border-radius:999px;font-weight:800;transition:transform .2s,box-shadow .2s,filter .2s}
body.tema-hud .btn:hover{transform:translateY(-2px)}
body.tema-hud .wa,body.tema-hud .cta-wa .btn{animation:hud-latido 2.6s infinite}
@keyframes hud-latido{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ── Etiquetas HUD ─────────────────────────────────────────────────────────── */
.hud-etiqueta{display:inline-flex;align-items:center;gap:.5rem;font-family:HudMono,ui-monospace,monospace;text-transform:uppercase;
  letter-spacing:.16em;font-size:12px;color:var(--acento);margin:0 0 12px;padding:5px 12px;max-width:100%;
  border:1px solid color-mix(in srgb,var(--acento) 35%,transparent);border-radius:6px;background:color-mix(in srgb,var(--acento) 6%,transparent)}
.hud-etiqueta span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-punto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 10px var(--verde);animation:hud-parpadeo 1.4s infinite}
@keyframes hud-parpadeo{50%{opacity:.25}}
.hud-sec{text-align:center;margin:44px 0 6px}
body.tema-hud .sec-tit h2{font-size:clamp(19px,2.6vw,26px)}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
body.tema-hud .hero{background:transparent;border:0;box-shadow:none;padding:28px 4px 18px;overflow:visible}
body.tema-hud .hero.con-visual{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(16px,4vw,56px);align-items:center}
body.tema-hud .hero h1{font-size:clamp(26px,4.2vw,46px);font-weight:800;line-height:1.12;color:var(--texto)}
body.tema-hud .hero p{color:var(--apagado);font-size:clamp(15px,1.5vw,17px);max-width:38rem;opacity:1}
body.tema-hud .hero .btn{background:linear-gradient(135deg,var(--acento),var(--acento-2));color:#140a00;box-shadow:0 8px 28px -10px var(--acento)}
body.tema-hud .hero-chips a{background:transparent;border:1px solid color-mix(in srgb,var(--acento) 45%,transparent);color:var(--texto)}
body.tema-hud .hero-chips a:hover{background:color-mix(in srgb,var(--acento) 14%,transparent)}
.hud-brillo{background:linear-gradient(90deg,var(--acento),var(--acento-claro),var(--acento-2),var(--acento));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:hud-brillo 5s linear infinite}
@keyframes hud-brillo{to{background-position:200% center}}
.hud-glitch{position:relative;display:inline-block}
.hud-glitch::before,.hud-glitch::after{content:attr(data-texto);position:absolute;inset:0;overflow:hidden}
.hud-glitch::before{color:#ff3b6b;clip-path:inset(0 0 60% 0);animation:hud-g1 3.2s infinite steps(1)}
.hud-glitch::after{color:#2fd3ff;clip-path:inset(55% 0 0 0);animation:hud-g2 2.7s infinite steps(1)}
@keyframes hud-g1{0%,88%{opacity:0}89%{opacity:.9;transform:translate(3px,-1px)}93%{opacity:.9;transform:translate(-3px,1px)}96%,100%{opacity:0}}
@keyframes hud-g2{0%,90%{opacity:0}91%{opacity:.85;transform:translate(-3px,1px)}95%{opacity:.85;transform:translate(3px,0)}98%,100%{opacity:0}}
.hud-maquina{font-family:HudMono,ui-monospace,monospace;color:var(--terminal);font-size:15px;margin:2px 0 16px;min-height:1.6em}
.hud-maquina .prompt{color:var(--acento)}.hud-maquina .cursor{animation:hud-parpadeo .9s infinite}
.hud-estado{display:flex;align-items:center;gap:9px;color:var(--apagado);font-size:14px;margin-top:16px}
.hud-estado .luz{flex:none;width:10px;height:10px;border-radius:50%;background:#555}
.hud-estado.abierto .luz{background:var(--verde);box-shadow:0 0 12px var(--verde);animation:hud-parpadeo 1.6s infinite}
.hud-estado.cerrado .luz{background:#ff3b3b;box-shadow:0 0 10px #ff3b3b}

.hud-visual{position:relative;aspect-ratio:1;width:100%;max-width:500px;justify-self:center;order:2}
.hud-radar{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acento) 10%,transparent),transparent 70%);
  border:1px solid color-mix(in srgb,var(--acento) 25%,transparent);overflow:hidden}
.hud-anillo{position:absolute;border:1px dashed color-mix(in srgb,var(--acento) 22%,transparent);border-radius:50%}
.hud-anillo.a1{inset:12%}.hud-anillo.a2{inset:26%}.hud-anillo.a3{inset:40%}
.hud-aguja{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--acento) 38%,transparent),transparent 22%);animation:hud-gira 4s linear infinite}
@keyframes hud-gira{to{transform:rotate(360deg)}}
.hud-blip{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--acento);box-shadow:0 0 14px var(--acento);opacity:0;animation:hud-blip 4s infinite}
.hud-blip.b1{top:22%;left:66%;animation-delay:.6s}.hud-blip.b2{top:68%;left:24%;animation-delay:2.1s}.hud-blip.b3{top:58%;left:78%;animation-delay:3.2s}
@keyframes hud-blip{0%,100%{opacity:0;transform:scale(.4)}8%{opacity:1;transform:scale(1.4)}40%{opacity:0}}
.hud-mascota{position:absolute;inset:13%;width:74%;height:74%;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--acento) 55%,transparent),0 0 46px color-mix(in srgb,var(--acento) 45%,transparent);
  animation:hud-flota 6s ease-in-out infinite;will-change:transform}
@keyframes hud-flota{50%{transform:translateY(-12px) rotate(-1deg)}}
.hud-marco span{position:absolute;width:40px;height:40px;border-color:var(--acento);border-style:solid;opacity:.85}
.hud-marco span:nth-child(1){top:0;left:0;border-width:2px 0 0 2px}.hud-marco span:nth-child(2){top:0;right:0;border-width:2px 2px 0 0}
.hud-marco span:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px}.hud-marco span:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0}
.hud-dato{position:absolute;font-family:HudMono,ui-monospace,monospace;font-size:12px;color:var(--acento);letter-spacing:.14em;text-transform:uppercase;
  background:rgba(7,9,13,.8);padding:3px 8px;border:1px solid color-mix(in srgb,var(--acento) 30%,transparent);white-space:nowrap}
.hud-dato.d1{top:5%;right:0}.hud-dato.d2{bottom:7%;left:0;color:var(--terminal);border-color:rgba(125,255,176,.35)}

/* ── Razones, cifras y cintas ──────────────────────────────────────────────── */
body.tema-hud .razon{background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 8%,transparent),rgba(13,17,24,.7));border-color:color-mix(in srgb,var(--acento) 22%,transparent)}
.hud-cifras{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px;margin:18px 0 6px}
.hud-cifra{padding:18px 10px;text-align:center;border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 10%,transparent),rgba(13,17,24,.6));border:1px solid color-mix(in srgb,var(--acento) 25%,transparent)}
.hud-cifra strong{display:block;font-family:Orbitron,Inter,sans-serif;font-size:clamp(24px,3.4vw,38px);color:var(--acento);text-shadow:0 0 24px color-mix(in srgb,var(--acento) 45%,transparent);line-height:1.1;font-variant-numeric:tabular-nums}
.hud-cifra span{color:var(--apagado);font-size:14px}
.hud-carrusel{margin:22px 0 4px;display:grid;gap:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hud-carrusel-fila{overflow:hidden}
.hud-carrusel-pista{display:flex;gap:12px;width:max-content;animation:hud-desliza 70s linear infinite}
.hud-carrusel-fila.al-reves .hud-carrusel-pista{animation-direction:reverse;animation-duration:85s}
.hud-carrusel img{width:96px;height:96px;object-fit:cover;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.08);opacity:.85;background:#fff}
.hud-carrusel:hover .hud-carrusel-pista{animation-play-state:paused}
@keyframes hud-desliza{to{transform:translateX(-50%)}}
.hud-cinta{overflow:hidden;transform:rotate(-1.5deg) scaleX(1.04);margin:40px -16px;padding:13px 0;
  background:repeating-linear-gradient(-45deg,var(--acento) 0 22px,#111 22px 44px)}
.hud-cinta-pista{display:flex;gap:22px;width:max-content;animation:hud-desliza 26s linear infinite reverse;font-family:Orbitron,Inter,sans-serif;font-weight:800;letter-spacing:.12em;font-size:15px}
.hud-cinta span{background:#0a0a0a;color:var(--acento);padding:3px 14px;border-radius:4px;text-transform:uppercase;white-space:nowrap}
.hud-cinta b{color:#0a0a0a}

/* ── Tarjetas «expediente» ─────────────────────────────────────────────────── */
body.tema-hud .ficha{position:relative;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c1,var(--acento)) 24%,var(--tarjeta)),var(--tarjeta) 58%);
  border:1px solid color-mix(in srgb,var(--c1,var(--acento)) 42%,transparent);
  box-shadow:0 10px 40px -22px var(--c1,var(--acento));transition:transform .15s ease-out,box-shadow .3s;transform-style:preserve-3d}
body.tema-hud .ficha:hover{box-shadow:0 18px 60px -18px var(--c1,var(--acento))}
body.tema-hud .ficha::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px)}
.hud-luz{position:absolute;inset:-40%;z-index:1;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
body.tema-hud .ficha:hover .hud-luz{opacity:1}
/* La cabecera del expediente va ENCIMA de la carátula, en su propia franja: dentro
   de la imagen tapaba el logo de la marca y en tarjetas estrechas se partía. */
.hud-exp{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:9px 10px 7px;
  font-family:HudMono,ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;white-space:nowrap;pointer-events:none}
.hud-exp .num{color:var(--apagado)}
.hud-exp .sello{color:var(--terminal);border:1px solid rgba(125,255,176,.45);padding:1px 6px;border-radius:4px;transform:rotate(-3deg);overflow:hidden;text-overflow:ellipsis;min-width:0}
body.tema-hud .ficha img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
body.tema-hud .ficha:hover img{transform:scale(1.05)}
body.tema-hud .ficha h3{text-shadow:0 0 18px color-mix(in srgb,var(--c1,var(--acento)) 60%,transparent)}
body.tema-hud .ficha .precio{color:var(--acento)}

/* ── Pasos, pagos, preguntas, llamada, pie ─────────────────────────────────── */
body.tema-hud .paso{background:var(--tarjeta);border-color:var(--borde);position:relative}
body.tema-hud .paso::after{content:"";position:absolute;left:16px;right:16px;top:0;height:2px;background:linear-gradient(90deg,var(--acento),transparent)}
body.tema-hud .paso::before{background:transparent;color:transparent;-webkit-text-stroke:1.5px var(--acento);font-family:Orbitron,Inter,sans-serif;font-size:26px;width:auto;height:auto;content:counter(paso,decimal-leading-zero)}
body.tema-hud .pago-m{background:linear-gradient(160deg,color-mix(in srgb,var(--acento) 12%,transparent),var(--tarjeta) 60%);border-color:color-mix(in srgb,var(--acento) 30%,transparent)}
body.tema-hud .faq details{background:var(--tarjeta);border-color:var(--borde)}
body.tema-hud .faq summary::after{font-family:Orbitron,Inter,sans-serif;color:var(--acento)}
body.tema-hud .cta-wa{background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--acento) 24%,transparent),var(--tarjeta) 70%);border:1px solid color-mix(in srgb,var(--acento) 35%,transparent)}
body.tema-hud footer{background:rgba(7,9,13,.85)}

/* ── Aparición al bajar (sólo si el JS está y no se pide menos movimiento) ──── */
.hud-js .hud-revelar{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--i,0) * 90ms)}
.hud-js .hud-revelar.visible{opacity:1;transform:none}

/* ── Móvil ─────────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  body.tema-hud .hero.con-visual{grid-template-columns:minmax(0,1fr);text-align:center}
  body.tema-hud .hero.con-visual .hud-visual{order:-1;max-width:340px}
  .hud-cifras{grid-template-columns:repeat(min(var(--n,4),2),minmax(0,1fr))}
  .hud-cifras .hud-cifra:last-child:nth-child(odd){grid-column:1 / -1}
  .hud-estado{justify-content:center}
}
@media(max-width:480px){
  .hud-etiqueta{font-size:11px;letter-spacing:.1em;text-align:left}
  .hud-etiqueta span:last-child{white-space:normal}
  .hud-dato{font-size:11px}
  body.tema-hud .hero h1{font-size:25px}
  .hud-carrusel img{width:76px;height:76px;border-radius:12px}
  .hud-exp{font-size:9.5px;letter-spacing:.06em;padding:8px 8px 6px}
}
@media(prefers-reduced-motion:reduce){
  body.tema-hud *,body.tema-hud *::before,body.tema-hud *::after,.hud-fondo *{animation:none!important;transition:none!important}
  .hud-js .hud-revelar{opacity:1;transform:none}
}
/* Con la pestaña oculta se paran las animaciones (el JS pone la variable). */
.hud-fondo *,.hud-carrusel-pista,.hud-cinta-pista,.hud-aguja,.hud-mascota{animation-play-state:var(--hud-estado,running)}