/* Lúdica · estilo común (fondo negro, tarjetas de vidrio gris, azul neón) */
:root{
  --fondo:#08090B; --hondo:#0E0F12; --campo:#121316; --tarjeta:#17181C;
  --borde:#2A2B31; --borde-2:#34353B; --linea:#222327; --pista:#33343A;
  --texto:#F4F4F5; --suave:#D4D4D8; --gris:#C9CACF; --medio:#A1A2A8; --tenue:#8B8C93;
  --neon:#3EC6FF; --n:62,198,255; --l:30,80,255; --neon-claro:#8FDEFF; --luz:#1E50FF; --barra:#1E3FA8;
  --brillo:0 0 18px rgba(var(--n),.45);
  --sans:'Instrument Sans',system-ui,sans-serif; --serif:'Instrument Serif',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html.cargando body{opacity:0}
body{transition:opacity .25s}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--sans);font-size:16.5px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--neon)} a:hover{color:var(--neon-claro)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Contenedores */
.col{width:100%;max-width:600px;margin:0 auto;padding:0 22px}
.ancho{width:100%;max-width:1080px;margin:0 auto;padding:0 22px}
.tira{padding:56px 0}
.pila{display:flex;flex-direction:column}
.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g14{gap:14px}.g16{gap:16px}.g22{gap:22px}.g30{gap:30px}.g40{gap:40px}

/* Texto */
.eti{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tenue)}
.eti.azul{color:var(--neon)}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.025em}
.h1{font-size:clamp(40px,7.5vw,68px);line-height:1.02;letter-spacing:-.032em;font-weight:600}
.h2{font-size:clamp(30px,4.6vw,42px);line-height:1.06}
.h3{font-size:clamp(26px,3.6vw,32px);line-height:1.12;letter-spacing:-.022em}
em.it{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.01em;color:var(--neon);text-shadow:var(--brillo)}
.lead{margin:0;font-size:17px;line-height:1.45;color:var(--medio)}
.p{margin:0;font-size:16.5px;line-height:1.5;color:var(--medio)}
.blanco{color:var(--texto)}
.nota{font-size:13px;line-height:1.4;color:var(--tenue);text-align:center}
.serif{font-family:var(--serif)}

/* Botones */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 28px;border:0;border-radius:999px;background:var(--texto);color:var(--fondo);font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:0 0 0 1px rgba(var(--n),.4),0 10px 34px rgba(var(--n),.28);transition:transform .15s,box-shadow .2s}
.btn:hover{color:var(--fondo);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(var(--n),.6),0 12px 40px rgba(var(--n),.4)}
.btn:active{transform:translateY(0)}
.btn.grande{min-height:62px;font-size:18px}
.btn.chico{min-height:54px;padding:0 30px;font-size:16.5px}
.btn.linea{background:transparent;color:var(--texto);box-shadow:none;border:1px solid var(--borde-2)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.enlace{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;color:var(--medio);font-size:15px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.enlace:hover{color:var(--texto)}

/* Tarjetas */
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.caja-neon{background:var(--hondo);border:1px solid var(--borde);border-top:2px solid var(--neon);border-radius:24px;box-shadow:0 -10px 34px rgba(var(--n),.14)}
.franja-luz{position:absolute;left:-40px;right:-40px;top:-78px;height:120px;background:var(--luz);filter:blur(48px);opacity:.8;pointer-events:none}

/* Barra de avance con porcentaje encima */
.medidor{position:relative;height:24px}
.medidor .pista{position:absolute;left:0;right:0;top:11px;height:3px;border-radius:2px;background:var(--pista)}
.medidor .llena{position:absolute;left:0;top:10px;height:5px;border-radius:3px;background:var(--neon);box-shadow:0 0 14px rgba(var(--n),.85),0 0 3px var(--neon);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.medidor .cifra{position:absolute;top:1px;padding:0 8px;background:var(--fondo);font-size:15px;font-weight:600;color:var(--neon);text-shadow:0 0 10px rgba(var(--n),.7);transition:left .7s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.tarjeta .medidor .cifra{background:var(--tarjeta)}
.campo-fondo .medidor .cifra{background:var(--campo)}

/* Pastillas (opciones cortas) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 14px;border-radius:999px;background:var(--tarjeta);border:1.5px solid var(--borde);color:var(--texto);font-size:15px;cursor:pointer;transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--borde-2)}
.chip[aria-pressed=true]{background:var(--texto);border-color:var(--texto);color:var(--fondo);font-weight:600;box-shadow:0 0 0 4px rgba(var(--n),.22)}

/* Campos */
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:13.5px;font-weight:500;color:var(--suave)}
.campo label small{font-weight:400;color:var(--tenue);font-size:inherit}
.entrada{width:100%;min-height:50px;padding:0 16px;background:var(--campo);border:1.5px solid var(--borde-2);border-radius:14px;color:var(--texto);font:inherit;font-size:16.5px}
.entrada::placeholder{color:#5D5E65}
.entrada:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 4px rgba(var(--n),.18)}
.entrada[aria-invalid=true]{border-color:#FF7A5C}
textarea.entrada{min-height:90px;padding:12px 16px;resize:vertical}
.error{margin:0;min-height:0;font-size:14px;color:#FF9C84}
.error:empty{display:none}

/* Videos e imágenes con nombre */
.video{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--borde);background:var(--tarjeta)}
.video img{width:100%;height:100%;object-fit:cover}
.video::after{content:"";position:absolute;left:0;right:0;bottom:0;height:84px;background:linear-gradient(to top,rgba(8,9,11,.9),rgba(8,9,11,0));pointer-events:none}
.video .nombre{position:absolute;z-index:1;left:12px;right:12px;bottom:11px;display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--texto)}
.video .nombre svg{flex:none}

/* Carrusel de mensajes */
.carrusel{padding:18px 0 18px 18px}
.carrusel .pista-h{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:18px}
.carrusel .pista-h::-webkit-scrollbar{display:none}
.carrusel .pista-h img{flex:none;width:204px;height:340px;border-radius:16px;object-fit:cover;object-position:50% 45%;scroll-snap-align:start}
.carrusel .avance{position:relative;height:5px;margin-right:18px}
.carrusel .avance i{position:absolute;left:0;right:0;top:1px;height:3px;border-radius:2px;background:var(--pista)}
.carrusel .avance b{position:absolute;left:0;top:0;height:5px;border-radius:3px;background:var(--neon);box-shadow:0 0 14px rgba(var(--n),.85),0 0 3px var(--neon);transition:left .2s}

/* Icono neón */
.ico-neon{flex:none;width:60px;height:60px;border-radius:18px;background:var(--hondo);border:1px solid rgba(var(--n),.45);box-shadow:0 0 20px rgba(var(--n),.28),inset 0 0 14px rgba(var(--n),.12);display:flex;align-items:center;justify-content:center}
.ico-neon svg{filter:drop-shadow(0 0 5px rgba(var(--n),.9))}
.candado{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--neon);background:var(--hondo);box-shadow:0 0 22px rgba(var(--n),.5);display:flex;align-items:center;justify-content:center}

/* Cuatro puntos: la línea azul se llena al hacer scroll y cada punto se enciende cuando lo alcanza */
.puntos{position:relative;display:flex;flex-direction:column;gap:16px}
.puntos .riel{position:absolute;left:20px;top:22px;bottom:40px;width:4px;border-radius:3px;background:var(--pista)}
.puntos .riel b{position:absolute;left:0;right:0;top:0;height:var(--lleno,0%);border-radius:3px;background:var(--neon);box-shadow:0 0 16px rgba(var(--n),.85),0 0 3px var(--neon);transition:height .15s linear}
.puntos .riel b::after{content:"";position:absolute;left:50%;bottom:-5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--neon);box-shadow:0 0 18px 4px rgba(var(--n),.8);opacity:var(--chispa,0)}
.punto{display:flex;gap:14px;align-items:flex-start;position:relative}
.punto .bola{flex:none;width:44px;height:44px;border-radius:50%;background:var(--campo);border:1.5px solid var(--pista);display:flex;align-items:center;justify-content:center;color:var(--tenue);position:relative;z-index:1;transition:all .45s cubic-bezier(.2,.8,.2,1)}
.punto .tarjeta{flex:1;padding:16px 18px;background:var(--campo);border-color:var(--linea);box-shadow:none;transition:all .45s cubic-bezier(.2,.8,.2,1)}
.punto h3{margin:0 0 6px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--medio);transition:color .45s}
.punto p{margin:0;font-size:15px;line-height:1.45;color:var(--tenue);transition:color .45s}
.punto.encendido .bola{background:var(--tarjeta);border-color:var(--neon);box-shadow:0 0 18px rgba(var(--n),.5);color:var(--texto);transform:scale(1.06)}
.punto.encendido .tarjeta{background:var(--tarjeta);border-color:var(--borde);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px rgba(0,0,0,.4);transform:translateX(4px)}
.punto.encendido h3{color:var(--texto)} .punto.encendido p{color:var(--medio)}

/* Testimonios */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.videos .video{height:auto;aspect-ratio:9/16;padding:0;cursor:pointer;text-align:left;width:100%}
.videos .video img{transition:transform .4s}
.videos .video:hover img{transform:scale(1.03)}
@media (min-width:900px){.videos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
@keyframes acerca{from{transform:scale(1)}to{transform:scale(1.09)}}
.video img.vivo{animation:acerca 9s ease-in-out infinite alternate}

/* Muchos testimonios: en el celular se deslizan, en la computadora van en cuadrícula */
.lista-videos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -22px;padding:0 22px}
.lista-videos::-webkit-scrollbar{display:none}
.lista-videos .video{flex:none;width:58vw;max-width:240px;scroll-snap-align:start}
@media (min-width:900px){.lista-videos{display:grid;margin:0;padding:0;overflow:visible}.lista-videos .video{width:auto;max-width:none}}
.video img[src*="drive.google"]{background:linear-gradient(160deg,#17181C,#0E0F12)}

/* Ventana de registro */
.velo{position:fixed;inset:0;z-index:50;background:rgba(4,5,7,.76);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.velo.abierto{opacity:1}
.ventana{width:100%;max-width:480px;max-height:100dvh;overflow-y:auto;padding:10px 22px calc(22px + env(safe-area-inset-bottom));background:var(--tarjeta);border-top:1px solid var(--borde);border-radius:28px 28px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);display:flex;flex-direction:column;gap:12px;transform:translateY(30px);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.velo.abierto .ventana{transform:none}
.ventana .asa{align-self:center;width:40px;height:4px;border-radius:2px;background:var(--borde-2)}
.cerrar{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--borde-2);background:var(--campo);color:var(--medio);display:flex;align-items:center;justify-content:center;cursor:pointer}
@media (min-width:640px){
  .velo{align-items:center}
  .ventana{border-radius:28px;border:1px solid var(--borde)}
}

/* Aviso */
.aviso{position:fixed;left:50%;bottom:24px;z-index:60;transform:translateX(-50%);padding:12px 18px;border-radius:999px;background:var(--texto);color:var(--fondo);font-size:15px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ---------- Movimiento ---------- */
/* Aparece al entrar en pantalla (lo activa ludica.js; sin JS se ve normal) */
.js [data-aparece]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-aparece].visto{opacity:1;transform:none}
/* Luz que sigue al mouse dentro de las tarjetas */
.foco{position:relative;overflow:hidden}
.foco::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(var(--n),.13),transparent 60%)}
.foco:hover::before{opacity:1}
.foco>*{position:relative}
/* Botones: brillo que pasa */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(var(--n),.28),transparent);transform:skewX(-18deg);animation:barrido 4.5s ease-in-out infinite}
.btn.linea::after{display:none}
@keyframes barrido{0%,62%{left:-60%}100%{left:130%}}
/* Brillo que respira */
@keyframes respira{0%,100%{box-shadow:0 0 18px rgba(var(--n),.18),0 24px 50px rgba(0,0,0,.6);border-color:rgba(var(--n),.35)}50%{box-shadow:0 0 54px rgba(var(--n),.55),0 0 0 1px rgba(var(--n),.5),0 24px 50px rgba(0,0,0,.6);border-color:rgba(var(--n),.85)}}
@keyframes late{0%,100%{box-shadow:0 0 14px rgba(var(--n),.2),inset 0 0 10px rgba(var(--n),.08)}50%{box-shadow:0 0 30px rgba(var(--n),.55),inset 0 0 18px rgba(var(--n),.22)}}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes chispea{0%,100%{opacity:.55;filter:drop-shadow(0 0 4px rgba(var(--n),.6))}50%{opacity:1;filter:drop-shadow(0 0 10px rgba(var(--n),1))}}
.ico-neon{animation:late 3.2s ease-in-out infinite}
.ico-neon svg{animation:chispea 3.2s ease-in-out infinite}
.medidor .llena.late{animation:pulsa 2.2s ease-in-out infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 8px rgba(var(--n),.6),0 0 2px var(--neon)}50%{box-shadow:0 0 22px rgba(var(--n),1),0 0 5px var(--neon)}}
/* Tarjetas que se levantan */
.levanta{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s}
.levanta:hover{transform:translateY(-4px);border-color:rgba(var(--n),.45);box-shadow:0 0 30px rgba(var(--n),.14),0 20px 40px rgba(0,0,0,.45)}

/* «Reducir movimiento» del sistema: se respeta solo el desplazamiento suave */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Tema Studio: crema y negro, letra serif como el logo de Lúdica Studio ---------- */
[data-tema=studio]{
  --fondo:#F5EFE6; --hondo:#EFE7DB; --campo:#FBF8F3; --tarjeta:#FFFCF7;
  --borde:#E2D8C9; --borde-2:#D3C7B5; --linea:#E3D9CB; --pista:#DCD2C3;
  --texto:#151310; --suave:#2B2824; --gris:#3A3631; --medio:#5F5A52; --tenue:#8C857A;
  --neon:#151310; --neon-claro:#3A3631; --luz:#E6D5BB; --barra:#151310; --acento:#7A5B3C;
  --n:21,19,16; --l:230,213,187;
  --serif:'Cormorant Garamond',Georgia,serif; --brillo:none;
  color-scheme:light;
}
[data-tema=studio] *{text-shadow:none!important}
[data-tema=studio] h1,[data-tema=studio] h2,[data-tema=studio] h3,[data-tema=studio] .h1,[data-tema=studio] .h2,[data-tema=studio] .h3,[data-tema=studio] .titulo{font-family:var(--serif);font-weight:500;letter-spacing:-.012em}
[data-tema=studio] .h1{font-weight:500;letter-spacing:-.02em}
[data-tema=studio] em.it{color:var(--acento);font-size:1.04em;font-weight:500}
[data-tema=studio] .eti.azul{color:var(--acento)}
[data-tema=studio] .marca{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.3em}
[data-tema=studio] [stroke="#3EC6FF"]{stroke:var(--neon)}
[data-tema=studio] [fill="#3EC6FF"]{fill:var(--neon)}
[data-tema=studio] .btn svg[stroke="#08090B"],[data-tema=studio] .redondo svg{stroke:var(--fondo)}
[data-tema=studio] .opcion .radio svg{stroke:var(--texto)}
[data-tema=studio] .video .nombre{color:#F5EFE6}
[data-tema=studio] .btn{box-shadow:none}
[data-tema=studio] .btn:hover{box-shadow:0 10px 26px rgba(21,19,16,.18)}
[data-tema=studio] .btn::after{background:linear-gradient(100deg,transparent,rgba(245,239,230,.28),transparent)}
[data-tema=studio] .btn.linea{background:transparent}
[data-tema=studio] .tarjeta,[data-tema=studio] .caja-neon,[data-tema=studio] .carta,[data-tema=studio] .ventana{box-shadow:0 1px 2px rgba(21,19,16,.04),0 12px 30px rgba(21,19,16,.06)!important}
[data-tema=studio] .carta{background:var(--tarjeta)!important}
[data-tema=studio] .caja-neon{border-top-color:var(--acento)}
[data-tema=studio] .ico-neon,[data-tema=studio] .candado{background:var(--campo);box-shadow:none;animation:none}
[data-tema=studio] .ico-neon svg{filter:none;animation:none}
[data-tema=studio] .medidor .llena,[data-tema=studio] .carrusel .avance b,[data-tema=studio] .puntos .riel b{box-shadow:none}
[data-tema=studio] .puntos .riel b::after{box-shadow:0 0 0 4px rgba(122,91,60,.18);background:var(--acento)}
[data-tema=studio] .punto.encendido .bola{box-shadow:0 0 0 5px rgba(21,19,16,.06)}
[data-tema=studio] .chip[aria-pressed=true],[data-tema=studio] .opcion[aria-pressed=true],[data-tema=studio] .opcion[aria-checked=true]{box-shadow:0 0 0 4px rgba(122,91,60,.16)}
[data-tema=studio] .grupos i.ahora{background:var(--acento);box-shadow:none}
[data-tema=studio] .estrellas{filter:none}
[data-tema=studio] .foco::before{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(122,91,60,.08),transparent 60%)}
[data-tema=studio] .levanta:hover{border-color:var(--borde-2);box-shadow:0 18px 40px rgba(21,19,16,.1)!important}
[data-tema=studio] .velo{background:rgba(21,19,16,.42)}
[data-tema=studio] .franja-luz,[data-tema=studio] .portada .luz{opacity:.7}
@keyframes respira-studio{0%,100%{border-color:rgba(21,19,16,.12);box-shadow:0 18px 40px rgba(21,19,16,.1)}50%{border-color:rgba(122,91,60,.6);box-shadow:0 22px 50px rgba(122,91,60,.22)}}
[data-tema=studio] .video-portada button,[data-tema=studio] .vsl{animation-name:respira-studio}
[data-tema=studio] .video-portada::before{background:var(--acento);opacity:.12}
[data-tema=studio] .nivel.weak{background:#F6DED5;color:#8A2E14}
[data-tema=studio] .nivel.mid{background:#F4E8C9;color:#6E5212}
[data-tema=studio] .nivel.strong{background:#DCEFE3;color:#1F6040}
[data-tema=studio] .entrada::placeholder{color:#A9A195}
[data-tema=studio] .aviso{background:var(--texto);color:var(--fondo)}

/* Botón para cambiar entre Academy y Studio */
.tema-pie{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:22px 16px calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
body:has(.barra-fija) .tema-pie{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.tema{display:flex;padding:4px;gap:2px;background:var(--tarjeta);border:1px solid var(--borde-2);border-radius:999px;font:600 12.5px var(--sans);letter-spacing:0;text-transform:none}
.tema button{min-height:34px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:var(--medio);cursor:pointer;letter-spacing:.02em}
.tema button[aria-pressed=true]{background:var(--texto);color:var(--fondo)}
[data-tema=studio] .anuncio{color:#F5EFE6}
[data-tema=studio] .anuncio:hover{background:#2A2622;color:#F5EFE6}
[data-tema=studio] .anuncio .nuevo{background:#F5EFE6;color:#151310}
[data-tema=studio] .bloqueado .encima{background:rgba(245,239,230,.55)}
[data-tema=studio] img[data-logo]{filter:brightness(0)}