/* Hero */
.hero { min-height: 92vh; display: grid; place-items: center; text-align: center; padding: 64px 0;
  background: radial-gradient(ellipse at 50% 120%, #ff7a1a33, transparent 60%), radial-gradient(ellipse at 50% -20%, #8b5cf633, transparent 60%), var(--bg); }
.hero h1 { font-family: Creepster, cursive; font-weight: 400; font-size: clamp(3.5rem, 13vw, 9rem); line-height: .95; color: var(--orange); text-shadow: 0 0 40px #ff7a1a66; }
.hero h1 span { color: var(--text); text-shadow: 0 0 40px #8b5cf688; }
.hero p { color: var(--muted); font-size: 1.15rem; margin: 20px auto 32px; max-width: 50ch; }
.countdown { display: flex; gap: 12px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap; }
.countdown div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; min-width: 82px; }
.countdown b { display: block; font-size: 2rem; font-weight: 800; }
.countdown small { color: var(--muted); text-transform: uppercase; font-size: .7rem; letter-spacing: .1em; }
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Linterna: todo a oscuras salvo el círculo que sigue al puntero */
.hero { position: relative; overflow: hidden; }
.torch { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle var(--rad, 200px) at var(--x, 50%) var(--y, 42%), transparent 0 45%, #050408f2 100%); }
.hero .actions, .hero .hint { position: relative; z-index: 2; }
.hint { color: var(--muted); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 20px; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: 3; pointer-events: none;
  background: linear-gradient(transparent, #ffffff12 40%, #8b5cf622 55%, transparent); mix-blend-mode: screen; animation: roll 9s linear infinite; }
@keyframes roll { 0%, 80% { translate: 0 -120px; opacity: 0; } 81% { opacity: 1; } 100% { translate: 0 100vh; opacity: 1; } }
.hero h1 { animation: glitch 6s infinite; }
@keyframes glitch {
  0%, 92%, 100% { translate: 0; }
  93% { translate: -4px 0; text-shadow: 3px 0 #ff1a3c, -3px 0 #1ad1ff; }
  94% { translate: 5px 1px; text-shadow: -4px 0 #ff1a3c, 4px 0 #1ad1ff; }
  95% { translate: 0; text-shadow: 2px 0 #ff1a3c, -2px 0 #1ad1ff; }
}
.vhs { position: absolute; top: 20px; left: 20px; z-index: 2; font-family: VT323, monospace; font-size: clamp(1.1rem, 3vw, 1.6rem); color: #f2f2f2cc; display: grid; text-shadow: 2px 0 #ff1a3c66, -2px 0 #1ad1ff66; letter-spacing: .05em; }
.vhs-br { top: auto; left: auto; bottom: 20px; right: 20px; text-align: right; }
.rec { color: #ff2b2b; animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* En táctil no hay "hover" y arrastrar hace scroll: la luz deambula sola por el título */
@property --x { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --y { syntax: "<length-percentage>"; inherits: false; initial-value: 42%; }
@keyframes wander { 0% { --x: 25%; --y: 30%; } 33% { --x: 75%; --y: 36%; } 66% { --x: 45%; --y: 62%; } 100% { --x: 70%; --y: 26%; } }
@media (hover: none) { .torch { --rad: 170px; animation: wander 7s ease-in-out infinite alternate; } .hint { display: none; } }
@media (max-width: 640px) { .countdown div { min-width: 0; flex: 1; padding: 10px 6px; } .countdown { flex-wrap: nowrap; gap: 8px; } }

@media (prefers-reduced-motion: reduce) { .torch, .hero::after, .hero h1, .rec { animation: none !important; } .hero::after { display: none; } }

@media (max-width: 640px) {
  .hero { padding: 110px 0 100px; }
  .vhs { top: 12px; left: 14px; }
  .vhs-br { top: auto; bottom: 14px; right: 14px; }
  .hero .actions { flex-direction: column; align-items: center; }
  .hero .actions .btn { width: min(100%, 320px); }
}