@font-face { font-family: 'Archivo Black'; src: url(fuentes/archivo-black-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(fuentes/barlow-condensed-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(fuentes/barlow-condensed-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fuentes/inter-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fuentes/inter-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root { --noche: #040b18; --noche2: #071a2c; --cian: #19e6ff; --rosa: #ff2d9b; --amarillo: #ffd400; --alerta: #ff3654; --blanco: #f6f1e7; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--noche); color: var(--blanco); font-family: Inter, system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.escena { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.texto { position: relative; z-index: 2; padding: 48px 56px 36px 64px; display: grid; align-content: center; gap: 26px; }
.kicker { font-family: 'Barlow Condensed'; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: 15px; color: var(--cian); margin: 0; }
h1.logo { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; --logo-h: 88px; }
h1.logo img.madrid { height: var(--logo-h); width: auto; }
h1.logo .fila { display: flex; align-items: flex-start; }
h1.logo img.sinley { height: calc(var(--logo-h) * .88); width: auto; }
h1.logo img.corona { height: 40px; width: auto; margin: -8px 0 0 -6px; }
.rotulo { margin: 0 0 -14px; font-family: 'Barlow Condensed'; font-weight: 800; letter-spacing: .2em; font-size: 14px; text-transform: uppercase; color: var(--rosa); }
.reloj { display: flex; gap: 12px; margin: 0; }
.reloj div { min-width: 92px; padding: 14px 10px 10px; border-radius: 12px; background: rgba(7,26,44,.85); border: 1px solid rgba(25,230,255,.3); display: grid; justify-items: center; gap: 6px; }
.reloj b { font-family: 'Archivo Black'; font-weight: 400; font-size: 64px; line-height: 1; color: var(--amarillo); text-shadow: 0 0 24px rgba(255,212,0,.45); font-variant-numeric: tabular-nums; }
.reloj span { font-family: 'Barlow Condensed'; font-weight: 700; letter-spacing: .18em; font-size: 13px; text-transform: uppercase; opacity: .8; }
.reloj.listo div { border-color: var(--amarillo); }

form { display: grid; gap: 10px; width: 100%; max-width: 540px; }
.campo { display: flex; gap: 8px; }
.campo input { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 16px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.22); background: rgba(4,11,24,.8); color: #fff; font: 500 16px Inter, sans-serif; }
.campo input:focus { outline: none; border-color: var(--amarillo); box-shadow: 0 0 0 3px rgba(255,212,0,.25); }
.campo button { height: 54px; padding: 0 24px; border: 0; border-radius: 10px; background: var(--amarillo); color: #111; font-family: 'Barlow Condensed'; font-weight: 800; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 24px rgba(255,212,0,.35); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.campo button:hover { transform: translateY(-1px); box-shadow: 0 0 34px rgba(255,212,0,.5); }
.campo button:active { transform: translateY(1px) scale(.98); }
.campo button[disabled] { opacity: .6; cursor: progress; }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; opacity: .85; cursor: pointer; }
.casilla input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--amarillo); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.estado { min-height: 22px; margin: 0; font-size: 14px; font-weight: 600; }
.estado[data-tono='ok'] { color: var(--amarillo); }
.estado[data-tono='error'] { color: var(--alerta); }
.hecho { display: none; padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--amarillo); background: rgba(255,212,0,.08); max-width: 540px; }
.hecho b { display: block; font-family: 'Archivo Black'; font-weight: 400; font-size: 22px; text-transform: uppercase; color: var(--amarillo); }
.hecho p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; }
form.enviado { display: none; } form.enviado + .hecho { display: block; }
.legal { margin: 0; font-size: 12px; opacity: .6; line-height: 1.55; max-width: 560px; }

.lado { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 100vh; }
.lado video, .lado .fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(1.15) brightness(1.05); }
.lado::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--noche) 0%, rgba(4,11,24,.25) 16%, transparent 34%), linear-gradient(0deg, var(--noche) 0%, transparent 28%), radial-gradient(38% 38% at 50% 48%, rgba(255,45,155,.38), transparent 70%); }
.rayos { position: absolute; inset: -30%; z-index: 1; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,45,155,.16) 0deg 4deg, transparent 4deg 13deg); -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, transparent 45%); mask: radial-gradient(circle at 50% 50%, #000 0%, transparent 45%); animation: girar 60s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.premio { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; text-align: center; padding: 40px 20px; }
.envoltorio { position: relative; animation: flotar 5s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-8px); } }
.caja { width: 300px; aspect-ratio: 13 / 16.5; border-radius: 10px; overflow: hidden; background: #0b1530; box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.7), 0 0 60px rgba(255,45,155,.55); transform: perspective(900px) rotateY(-12deg) rotate(-2deg); }
.caja .ps5 { height: 30px; background: #0070d1; color: #fff; display: flex; align-items: center; padding: 0 12px; font-family: 'Archivo Black'; font-size: 15px; letter-spacing: .04em; }
.caja img { display: block; width: 100%; height: calc(100% - 30px); object-fit: cover; }
.tres { position: absolute; z-index: 3; top: -24px; right: -34px; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--rosa); color: #fff; font-family: 'Archivo Black'; font-size: 40px; line-height: 1; transform: rotate(10deg); box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 30px rgba(255,45,155,.7); }
.tres small { display: block; font-family: 'Barlow Condensed'; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.cinta { margin: 0; background: var(--amarillo); color: #111; padding: 10px 20px; font-family: 'Archivo Black'; font-weight: 400; font-size: 26px; text-transform: uppercase; transform: rotate(-3deg); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.bajada { margin: 0; font-family: 'Barlow Condensed'; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 19px; max-width: 380px; line-height: 1.15; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.bajada b { color: var(--amarillo); }
.logo-movil { display: none; }

@media (max-width: 760px) {
  .escena { grid-template-columns: 1fr; }
  .lado { order: -1; min-height: 0; }
  .lado::before { background: linear-gradient(0deg, var(--noche) 0%, transparent 40%), radial-gradient(60% 40% at 50% 45%, rgba(255,45,155,.45), transparent 70%); }
  .premio { padding: 22px 18px 64px; gap: 14px; }
  .logo-movil { display: grid; justify-items: center; gap: 2px; margin-bottom: 18px; }
  .logo-movil img { height: 46px; width: auto; }
  .logo-movil img + img { height: 40px; }
  .texto h1.logo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .texto .kicker { display: none; }
  .caja { width: 190px; } .tres { width: 82px; height: 82px; font-size: 32px; right: -26px; top: -18px; } .cinta { font-size: 20px; } .bajada { font-size: 16px; }
  .texto { padding: 0 18px 32px; margin-top: -30px; gap: 20px; }
  h1.logo { --logo-h: 62px; } h1.logo img.corona { height: 30px; }
  .reloj { gap: 8px; } .reloj div { min-width: 0; flex: 1; padding: 10px 4px 8px; } .reloj b { font-size: 38px; }
  .campo { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .rayos, .envoltorio { animation: none; }
}

/* Botón de música (empieza apagado: los navegadores no dejan sonar sin un toque) */
.sonido { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 14px; border-radius: 999px; border: 2px solid var(--amarillo); background: rgba(4,11,24,.85); color: var(--amarillo); font-family: 'Barlow Condensed'; font-weight: 800; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 24px rgba(255,212,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: llamar 2.4s ease-in-out infinite; }
.sonido:hover { background: rgba(255,212,0,.12); }
.sonido .ondas { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.sonido .ondas i { width: 3px; height: 30%; background: currentColor; border-radius: 2px; transition: height .2s ease; }
.sonido[aria-pressed='true'] { animation: none; background: var(--amarillo); color: #111; }
.sonido[aria-pressed='true'] .ondas i { animation: onda 1s ease-in-out infinite; }
.sonido[aria-pressed='true'] .ondas i:nth-child(2) { animation-delay: .2s; } .sonido[aria-pressed='true'] .ondas i:nth-child(3) { animation-delay: .4s; } .sonido[aria-pressed='true'] .ondas i:nth-child(4) { animation-delay: .1s; }
@keyframes onda { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@keyframes llamar { 0%, 100% { box-shadow: 0 0 18px rgba(255,212,0,.25); } 50% { box-shadow: 0 0 34px rgba(255,212,0,.6); } }
@media (max-width: 760px) { .sonido { top: 12px; right: 12px; bottom: auto; width: 46px; height: 46px; padding: 0; justify-content: center; } .sonido .texto-sonido { display: none; } }
@media (prefers-reduced-motion: reduce) { .sonido, .sonido[aria-pressed='true'] .ondas i { animation: none; } }

/* Páginas legales */
.pagina-legal { max-width: 760px; margin: 0 auto; padding: 48px 20px 64px; line-height: 1.65; }
.pagina-legal h1 { font-family: 'Archivo Black'; font-weight: 400; font-size: 34px; margin: 18px 0 8px; }
.pagina-legal h2 { font-family: 'Barlow Condensed'; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 22px; color: var(--amarillo); margin: 30px 0 6px; }
.pagina-legal table { border-collapse: collapse; width: 100%; font-size: 14px; }
.pagina-legal td, .pagina-legal th { border: 1px solid rgba(255,255,255,.18); padding: 8px 10px; text-align: left; vertical-align: top; }
.volver { font-family: 'Barlow Condensed'; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cian); text-decoration: none; }