/* Banners de consola negra y verde neón (vertical para TikTok, horizontal para YouTube).
   Diseñado para una fuente Navegador de 814 × 252. Todas las medidas usan --u
   (1 px del diseño a 814 de ancho), así que la cinta escala con el ancho de la fuente. */
@font-face {
  font-family: "Exo 2";
  src: url("fonts/Exo2-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: block;
}

:root {
  --u: calc(100vw / 814);
  --neon: #b6ff1a;
  --neon-soft: #b6ff1a55;
  --metal: #343d3f;
  --metal-dark: #1a2022;
  --ink: #050707;
  --cut: calc(var(--u) * 16);
  --band-y: -50%;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent !important; }
body { font-family: "Exo 2", "Bahnschrift", "Segoe UI", sans-serif; color: #fff; }
i { display: block; font-style: normal; }

/* ---------- Cinta base ---------- */
.band { position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--u) * 150); transform: translateY(var(--band-y)); }
.shell, .shell-inner, .tray { position: absolute; }
.shell {
  inset: 0;
  clip-path: polygon(0 var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  background: linear-gradient(180deg, #3b4547 0%, #1c2325 6%, #0f1314 50%, #1c2325 94%, #353e40 100%);
}
.shell-inner {
  inset: calc(var(--u) * 4);
  clip-path: polygon(0 var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--u) * 46), #ffffff05 calc(var(--u) * 46) calc(var(--u) * 47)),
    linear-gradient(180deg, #121718 0%, #090c0d 30%, #070909 70%, #101415 100%);
  box-shadow: inset 0 calc(var(--u) * 1) 0 #ffffff14, inset 0 calc(var(--u) * -1) 0 #ffffff0d;
}
/* Bandeja central donde vive el mensaje */
.tray {
  left: calc(var(--u) * 196); right: calc(var(--u) * 196); top: calc(var(--u) * 10); bottom: calc(var(--u) * 10);
  clip-path: polygon(calc(var(--u) * 26) 0, calc(100% - var(--u) * 26) 0, 100% calc(var(--u) * 26), 100% calc(100% - var(--u) * 26), calc(100% - var(--u) * 26) 100%, calc(var(--u) * 26) 100%, 0 calc(100% - var(--u) * 26), 0 calc(var(--u) * 26));
  background: linear-gradient(180deg, #020303, #040606 60%, #070a0a);
  box-shadow: inset 0 0 0 calc(var(--u) * 1) #2a3234;
}
/* Retroiluminación tenue detrás del texto */
.tray::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 58%, #b6ff1a1c, transparent 70%);
  animation: backlight 5s ease-in-out infinite;
}
/* Destello que recorre el borde superior cada 8 s */
.sweep {
  position: absolute; left: var(--cut); right: var(--cut); top: 0; height: calc(var(--u) * 2);
  background: linear-gradient(90deg, transparent 0 40%, #e9ffc0cc 50%, transparent 60% 100%) no-repeat;
  background-size: 30% 100%; background-position: -40% 0;
  animation: sweep 8s ease-in-out infinite;
}

/* ---------- Detalles de consola ---------- */
.deco > * { position: absolute; }
.accent { height: calc(var(--u) * 4); background: var(--neon); box-shadow: 0 0 calc(var(--u) * 8) var(--neon-soft); animation: glow 4s ease-in-out infinite; }
.a-tl { left: 0; top: calc(var(--u) * 14); width: calc(var(--u) * 6); height: calc(var(--u) * 22); }
.a-tr { right: 0; top: calc(var(--u) * 14); width: calc(var(--u) * 6); height: calc(var(--u) * 22); animation-delay: -2s; }
.a-bl { left: calc(var(--u) * 150); bottom: 0; width: calc(var(--u) * 70); animation-delay: -1s; }
.a-br { right: calc(var(--u) * 150); bottom: 0; width: calc(var(--u) * 70); animation-delay: -3s; }
.dots { height: calc(var(--u) * 3); background: radial-gradient(circle, #cfe9c3 45%, transparent 50%) 0 0 / calc(var(--u) * 7) 100% repeat-x; opacity: .55; }
.d-tl { left: calc(var(--u) * 28); top: calc(var(--u) * 20); width: calc(var(--u) * 35); }
.d-tr { right: calc(var(--u) * 36); top: calc(var(--u) * 20); width: calc(var(--u) * 21); }
.d-bl { left: calc(var(--u) * 86); bottom: calc(var(--u) * 16); width: calc(var(--u) * 21); background-image: radial-gradient(circle, var(--neon) 45%, transparent 50%); }
.d-br { right: calc(var(--u) * 26); bottom: calc(var(--u) * 16); width: calc(var(--u) * 21); background-image: radial-gradient(circle, var(--neon) 45%, transparent 50%); }
.blocks { height: calc(var(--u) * 6); }
.b-tl { left: calc(var(--u) * 68); top: calc(var(--u) * 18); width: calc(var(--u) * 34); background: linear-gradient(90deg, var(--neon) 0 calc(var(--u) * 6), transparent 0) 0 0 / calc(var(--u) * 9) 100%, repeating-linear-gradient(90deg, #6b7577 0 calc(var(--u) * 6), transparent 0 calc(var(--u) * 9)); }
.b-br { right: calc(var(--u) * 140); bottom: calc(var(--u) * 14); width: calc(var(--u) * 34); background: linear-gradient(90deg, var(--neon) 0 calc(var(--u) * 15), transparent 0) no-repeat, repeating-linear-gradient(90deg, #6b7577 0 calc(var(--u) * 6), transparent 0 calc(var(--u) * 9)); -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(var(--u) * 6), transparent 0 calc(var(--u) * 9)); mask: repeating-linear-gradient(90deg, #000 0 calc(var(--u) * 6), transparent 0 calc(var(--u) * 9)); }
.rule { height: calc(var(--u) * 2); background: linear-gradient(90deg, var(--neon), #4d5759 40%, #4d5759cc); }
.r-tr { right: calc(var(--u) * 64); top: calc(var(--u) * 20); width: calc(var(--u) * 46); background: linear-gradient(90deg, #4d5759, #9aa3a5); }
.r-br { right: calc(var(--u) * 52); bottom: calc(var(--u) * 16); width: calc(var(--u) * 80); }
.meter { height: calc(var(--u) * 8); }
.m-bl { left: calc(var(--u) * 26); bottom: calc(var(--u) * 13); width: calc(var(--u) * 52); background: repeating-linear-gradient(90deg, var(--neon) 0 calc(var(--u) * 3), transparent 0 calc(var(--u) * 5)) 0 0 / 55% 100% no-repeat, repeating-linear-gradient(90deg, #5d6668 0 calc(var(--u) * 3), transparent 0 calc(var(--u) * 5)); }
/* Medidor circular detrás de la placa izquierda */
.gauge {
  left: calc(var(--u) * 140); top: calc(var(--u) * 8); width: calc(var(--u) * 70); height: calc(var(--u) * 70); border-radius: 50%;
  background:
    repeating-conic-gradient(from -10deg, var(--neon) 0 2deg, transparent 2deg 9deg) ,
    conic-gradient(from 0deg, transparent 0 0);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 61% 70%, transparent 71% 84%, #000 85% 88%, transparent 89%), conic-gradient(#000 0 110deg, transparent 110deg);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle, transparent 0 60%, #000 61% 70%, transparent 71% 84%, #000 85% 88%, transparent 89%), conic-gradient(#000 0 110deg, transparent 110deg);
  mask-composite: intersect;
  opacity: .7;
  animation: glow 6s ease-in-out infinite;
}
.eq { position: absolute; right: calc(var(--u) * 120); top: calc(var(--u) * 12); height: calc(var(--u) * 16); display: flex; align-items: flex-end; gap: calc(var(--u) * 3); }
.eq i { width: calc(var(--u) * 2); height: 40%; background: #8d9799; transform-origin: bottom; animation: eq 2.4s ease-in-out infinite; }
.eq i:nth-child(3n) { background: var(--neon); }
.eq i:nth-child(1) { height: 30%; animation-delay: -.2s; } .eq i:nth-child(2) { height: 55%; animation-delay: -1.1s; }
.eq i:nth-child(3) { height: 40%; animation-delay: -.6s; } .eq i:nth-child(4) { height: 75%; animation-delay: -1.7s; }
.eq i:nth-child(5) { height: 50%; animation-delay: -.9s; } .eq i:nth-child(6) { height: 90%; animation-delay: -.3s; }
.eq i:nth-child(7) { height: 60%; animation-delay: -1.4s; } .eq i:nth-child(8) { height: 100%; animation-delay: -.8s; }
.eq i:nth-child(9) { height: 70%; animation-delay: -2s; } .eq i:nth-child(10) { height: 45%; animation-delay: -.5s; }
.eq i:nth-child(11) { height: 85%; animation-delay: -1.2s; } .eq i:nth-child(12) { height: 100%; animation-delay: -.1s; }
.ticks { bottom: calc(var(--u) * 20); width: calc(var(--u) * 56); height: calc(var(--u) * 5); background: repeating-linear-gradient(90deg, #6d7779 0 calc(var(--u) * 1), transparent 0 calc(var(--u) * 6)); }
.t-l { left: calc(var(--u) * 258); } .t-r { right: calc(var(--u) * 258); }
.diamond { bottom: calc(var(--u) * 19); width: calc(var(--u) * 6); height: calc(var(--u) * 6); background: var(--neon); transform: rotate(45deg); box-shadow: 0 0 calc(var(--u) * 6) var(--neon-soft); }
.dm-l { left: calc(var(--u) * 240); } .dm-r { right: calc(var(--u) * 240); }

/* ---------- Placas laterales ---------- */
.plate-wrap { position: absolute; top: calc(var(--u) * 38); width: calc(var(--u) * 170); height: calc(var(--u) * 74); }
.plate-wrap.left { left: calc(var(--u) * 16); }
.plate-wrap.right { right: calc(var(--u) * 16); }
.plate, .plate-inner {
  clip-path: polygon(calc(var(--u) * 14) 0, calc(100% - var(--u) * 14) 0, 100% calc(var(--u) * 14), 100% calc(100% - var(--u) * 14), calc(100% - var(--u) * 14) 100%, calc(var(--u) * 14) 100%, 0 calc(100% - var(--u) * 14), 0 calc(var(--u) * 14));
}
.plate { position: absolute; inset: 0; padding: calc(var(--u) * 3); background: linear-gradient(160deg, #5a6567, #252c2e 40%, #1a1f21 60%, #4a5456); }
.plate-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12); background: linear-gradient(180deg, #0f1415, #050707 55%, #0b0f10); }
/* Escuadras verdes con retroiluminación lenta */
.bracket { position: absolute; top: calc(var(--u) * -6); bottom: calc(var(--u) * -6); width: calc(var(--u) * 20); border: calc(var(--u) * 3) solid var(--neon); filter: drop-shadow(0 0 calc(var(--u) * 5) var(--neon-soft)); animation: glow 4s ease-in-out infinite; }
.left .bracket { left: calc(var(--u) * -8); border-right: 0; }
.right .bracket { right: calc(var(--u) * -8); border-left: 0; animation-delay: -2s; }

.live-dot { width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; flex: none; background: radial-gradient(circle at 40% 38%, #eaffb5, var(--neon) 55%, #7fbf00); box-shadow: 0 0 calc(var(--u) * 10) var(--neon), 0 0 calc(var(--u) * 22) var(--neon-soft); animation: live 1.6s ease-in-out infinite; }
.live-text { color: var(--neon); font-weight: 800; font-size: calc(var(--u) * 31); letter-spacing: .02em; line-height: 1; text-shadow: 0 0 calc(var(--u) * 10) #b6ff1a66; white-space: nowrap; }

.icons { display: flex; align-items: center; gap: calc(var(--u) * 10); color: var(--neon); }
.icons[hidden] { display: none; }
.icons svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); flex: none; filter: drop-shadow(0 0 calc(var(--u) * 4) #b6ff1a55); }
.icons .sep { width: calc(var(--u) * 1); height: calc(var(--u) * 30); background: #39433f; }
.icons.dm span { font-weight: 800; font-size: calc(var(--u) * 30); text-shadow: 0 0 calc(var(--u) * 10) #b6ff1a66; }
.icons.swap { animation: glitchIn .5s steps(1, end) both; }
.icons.social.highlight svg { animation: iconPulse 1.4s ease-in-out .5s 2; }
.icons.wa span { font-weight: 800; font-size: calc(var(--u) * 22); text-shadow: 0 0 calc(var(--u) * 10) #b6ff1a66; }
.icons.dm svg, .icons.wa svg { animation: iconPulse 1.4s ease-in-out .5s 3; }

/* ---------- Mensaje central ---------- */
.center { position: absolute; left: calc(var(--u) * 206); right: calc(var(--u) * 206); top: 0; bottom: 0; }
.message { position: absolute; inset: 0 0 calc(var(--u) * 30); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2); }
.eyebrow { width: 100%; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 4); }
.eyebrow span { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--neon); font-weight: 700; font-size: calc(var(--u) * 21); line-height: 1.15; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 calc(var(--u) * 8) #b6ff1a4d; }
.eyebrow span.long { letter-spacing: .06em; }
.ey-line { flex: 1 1 0; min-width: calc(var(--u) * 10); height: calc(var(--u) * 2); background: linear-gradient(90deg, #4f595b, #9aa3a5); }
.ey-line.r { background: linear-gradient(90deg, #9aa3a5, #4f595b); }
.ey-dots { flex: none; width: calc(var(--u) * 15); height: calc(var(--u) * 4); background: radial-gradient(circle, var(--neon) 45%, transparent 50%) 0 0 / calc(var(--u) * 5) 100% repeat-x; }
.headline {
  position: relative; width: 100%; height: calc(var(--u) * 58); overflow: hidden; text-align: center; white-space: nowrap;
  color: #fff; font-weight: 800; font-size: calc(var(--u) * 50); line-height: calc(var(--u) * 58); letter-spacing: -.005em;
  text-shadow: 0 0 calc(var(--u) * 2) #ffffffaa, 0 0 calc(var(--u) * 14) #b6ff1a40, 0 calc(var(--u) * 2) calc(var(--u) * 3) #000;
}
/* Capas de separación de color del glitch */
.headline::before, .headline::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none; text-shadow: none; }
.headline::before { color: var(--neon); }
/* Primer tiempo de cada mensaje: texto en verde neón */
.headline.lead { color: var(--neon); font-weight: 700; text-shadow: 0 0 calc(var(--u) * 2) #b6ff1a99, 0 0 calc(var(--u) * 14) #b6ff1a55, 0 calc(var(--u) * 2) calc(var(--u) * 3) #000; }
.headline.lead::before { color: #fff; }
.headline::after { color: #46e6d0; }

.progress { position: absolute; left: 50%; bottom: calc(var(--u) * 17); width: calc(var(--u) * 150); height: calc(var(--u) * 6); transform: translateX(-50%); background: #1d2426; clip-path: polygon(calc(var(--u) * 4) 0, calc(100% - var(--u) * 4) 0, 100% 100%, 0 100%); }
.progress span { display: block; height: 100%; background: var(--neon); box-shadow: 0 0 calc(var(--u) * 10) var(--neon); transform-origin: left; transform: scaleX(0); }
.progress span.run { animation: fill 6s linear both; }

/* Glitch al entrar y salir: cortes horizontales, desplazamiento y separación de color */
.headline.enter { animation: glitchIn .55s steps(1, end) both; }
.headline.enter::before { animation: splitA .55s steps(1, end) both; }
.headline.enter::after { animation: splitB .55s steps(1, end) both; }
.headline.exit { animation: glitchOut .45s steps(1, end) both; }
.headline.exit::before { animation: splitA .45s steps(1, end) reverse both; }
.headline.exit::after { animation: splitB .45s steps(1, end) reverse both; }

@keyframes glitchIn {
  0% { opacity: 0; transform: none; clip-path: inset(0); }
  8% { opacity: 1; transform: translateX(calc(var(--u) * -10)) skewX(-8deg); clip-path: inset(0 0 62% 0); }
  18% { opacity: 1; transform: translateX(calc(var(--u) * 8)); clip-path: inset(38% 0 22% 0); }
  28% { opacity: .35; transform: translateX(calc(var(--u) * -4)); clip-path: inset(70% 0 0 0); }
  40% { opacity: 1; transform: translateX(calc(var(--u) * 5)) skewX(6deg); clip-path: inset(0 0 30% 0); }
  52% { opacity: .8; transform: translateX(calc(var(--u) * -2)); clip-path: inset(15% 0 0 0); }
  64%, 100% { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes glitchOut {
  0% { opacity: 1; transform: none; clip-path: inset(0); }
  14% { transform: translateX(calc(var(--u) * 6)); clip-path: inset(0 0 45% 0); }
  30% { opacity: .5; transform: translateX(calc(var(--u) * -9)) skewX(-8deg); clip-path: inset(50% 0 10% 0); }
  48% { opacity: 1; transform: translateX(calc(var(--u) * 4)); clip-path: inset(20% 0 55% 0); }
  66% { opacity: .3; transform: translateX(calc(var(--u) * -3)); clip-path: inset(75% 0 5% 0); }
  82%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
}
@keyframes splitA {
  0%, 64%, 100% { opacity: 0; transform: none; }
  8% { opacity: .9; transform: translate(calc(var(--u) * -6), calc(var(--u) * 1)); clip-path: inset(10% 0 55% 0); }
  28% { opacity: .9; transform: translate(calc(var(--u) * 5), 0); clip-path: inset(60% 0 8% 0); }
  52% { opacity: .7; transform: translate(calc(var(--u) * -3), 0); clip-path: inset(30% 0 40% 0); }
}
@keyframes splitB {
  0%, 64%, 100% { opacity: 0; transform: none; }
  18% { opacity: .8; transform: translate(calc(var(--u) * 6), calc(var(--u) * -1)); clip-path: inset(45% 0 20% 0); }
  40% { opacity: .8; transform: translate(calc(var(--u) * -5), 0); clip-path: inset(5% 0 70% 0); }
}
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes backlight { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes sweep { 0%, 15% { background-position: -40% 0; } 55%, 100% { background-position: 140% 0; } }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: .35; box-shadow: 0 0 calc(var(--u) * 4) var(--neon); } }
@keyframes eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@keyframes iconPulse { 50% { filter: drop-shadow(0 0 calc(var(--u) * 10) var(--neon)); transform: scale(1.1); } }

/* Apagado y encendido tipo monitor: se aplasta en una línea, la línea en un punto y desaparece. */
.band::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #c9ff5c 15%, #efffd0 50%, #c9ff5c 85%, transparent);
  box-shadow: 0 0 calc(var(--u) * 24) #b6ff1a, 0 0 calc(var(--u) * 60) #b6ff1a88;
}
.band.power-off { animation: crtOff .65s cubic-bezier(.5, 0, .9, .4) both; }
.band.power-off::after { animation: crtFlash .65s linear both; }
.band.power-on { animation: crtOn .75s cubic-bezier(.15, .6, .3, 1) both; }
.band.power-on::after { animation: crtFlash .75s linear reverse both; }
@keyframes crtOff {
  0% { transform: translateY(var(--band-y)) scale(1, 1); filter: brightness(1); opacity: 1; }
  45% { transform: translateY(var(--band-y)) scale(1, .02); filter: brightness(2.4); opacity: 1; }
  80% { transform: translateY(var(--band-y)) scale(.015, .02); filter: brightness(3); opacity: 1; }
  100% { transform: translateY(var(--band-y)) scale(0, 0); filter: brightness(3); opacity: 0; }
}
@keyframes crtOn {
  0% { transform: translateY(var(--band-y)) scale(0, 0); filter: brightness(3); opacity: 0; }
  15% { transform: translateY(var(--band-y)) scale(.015, .02); filter: brightness(3); opacity: 1; }
  50% { transform: translateY(var(--band-y)) scale(1, .02); filter: brightness(2.4); opacity: 1; }
  80% { transform: translateY(var(--band-y)) scale(1, 1.04); filter: brightness(1.3); }
  100% { transform: translateY(var(--band-y)) scale(1, 1); filter: brightness(1); opacity: 1; }
}
@keyframes crtFlash { 0%, 36% { opacity: 0; } 50%, 90% { opacity: .9; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .progress span { transform: scaleX(1); }
}

/* Horizontal para YouTube: fuente Navegador de 1920 × 1080; la cinta ocupa la mitad del ancho
   en la franja inferior izquierda y el resto de la escena queda transparente. */
.horizontal { --u: calc(50vw / 814); --cut: calc(var(--u) * 16); }
.horizontal .band { --band-y: 0%; left: 4%; right: auto; top: auto; bottom: 3.5%; width: calc(var(--u) * 814); }