/* arcade.css - extraido literal de index-v1.html.
   No se cambio ningun valor. Depende de las variables de marca.css. */


.proximamente .vitrina{
  border-bottom:3px dashed var(--linea);background:rgba(47,91,255,.06);
}

.proximamente:hover .vitrina{border-bottom-color:var(--azul)}

.proximamente .cuerpo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}

.proximamente .materia{
  font-family:var(--dato);font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--azul);margin:0;
}

.proximamente .lista{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}

.proximamente .lista span{
  font-family:var(--dato);font-size:.68rem;padding:4px 9px;border-radius:8px;
  background:rgba(47,91,255,.1);color:var(--azul);
}

/* ---------- portada ---------- */
.portada{padding:40px 0 8px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:end}

.cartucho{
  position:relative;display:flex;flex-direction:column;
  background:var(--papel-alto);border:3px solid var(--tinta);border-radius:var(--radio);
  box-shadow:0 8px 0 0 var(--tinta);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s ease;
}

.cartucho:hover,.cartucho:focus-within{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 14px 0 0 var(--azul);border-color:var(--azul)}
.cartucho .vitrina img,.cartucho .vitrina svg{transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.cartucho:hover .vitrina img,.cartucho:hover .vitrina svg{transform:scale(1.07) rotate(1.5deg)}
.cartucho h3{transition:color .2s}
.cartucho:hover h3{color:var(--azul)}

.vitrina{height:172px;border-bottom:3px solid var(--tinta);border-radius:14px 14px 0 0;overflow:hidden;position:relative;display:grid;place-items:center}

/* la portada se ancla al marco: con place-items:center el alto 100% no estira */
.vitrina .portada{position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:cover;display:block}

.cuerpo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}

.materia{font-family:var(--dato);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--azul);margin:0}

.cartucho h3{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.05;letter-spacing:-.02em;margin:0}

.cartucho p{margin:0;font-size:.95rem;color:#414A75}

.ficha-tecnica{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}

.ficha-tecnica span{font-family:var(--dato);font-size:.68rem;padding:4px 9px;border-radius:8px;background:var(--papel);border:1px solid var(--linea)}

.acciones{display:flex;gap:10px;align-items:center;margin-top:auto;padding-top:14px}

.jugar{
  all:unset;box-sizing:border-box;cursor:pointer;flex:1;text-align:center;font-family:var(--display);font-weight:800;font-size:1.02rem;
  padding:12px 16px;border-radius:12px;background:var(--tinta);color:#fff;
  transition:background .16s ease;
}

.jugar{transition:background .15s,transform .15s,box-shadow .15s}
.jugar:hover,.jugar:focus-visible{background:var(--azul);transform:translateY(-2px);box-shadow:0 6px 0 0 var(--tinta)}
.jugar:active{transform:translateY(1px);box-shadow:0 1px 0 0 var(--tinta)}

.sello{
  position:absolute;top:-13px;right:16px;z-index:2;font-family:var(--dato);font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;padding:5px 10px;border-radius:999px;
  border:2px solid var(--tinta);background:var(--limon);transform:rotate(3deg);
}

.sin-resultados{grid-column:1/-1;padding:44px 20px;text-align:center;border:3px dashed var(--linea);border-radius:var(--radio);color:#5B6A94}

/* vitrinas animadas, una por juego */
.v-monstruo{background:radial-gradient(circle at 50% 120%, #3B2A7A, #1B1A3A)}

.v-tienda{background:linear-gradient(180deg,#FFE9DC,#FFD2B8)}

.v-fraccion{background:linear-gradient(180deg,#E6FBFF,#C6F0F7)}

.v-oceano{background:linear-gradient(180deg,#1E7FB8,#04182E)}

.v-ruleta{background:linear-gradient(180deg,#F7F5F0,#E4DED2)}

.v-cuento{background:linear-gradient(180deg,#F3ECFF,#DFD0FB)}

.v-materia{background:linear-gradient(180deg,#243040,#12171F)}

.v-ritmo{background:linear-gradient(180deg,#33245B,#1A1030)}

.v-caza{background:linear-gradient(180deg,#FFFDF7,#F4E7D0)}

.v-lince{background:linear-gradient(180deg,#E7FAF2,#C6EEDC)}

.v-clasifica{background:linear-gradient(100deg,#FF2E7E 0 47%,#0F1020 47% 53%,#00D1E0 53%)}

.v-numeros{background:linear-gradient(180deg,#1B4A75,#0E2A47)}

.v-tobe{background:linear-gradient(180deg,#EDE8FF,#D6CBFA)}

.v-lectura{background:linear-gradient(180deg,#FFFCF5,#F0E5D2)}

.v-vocales{background:linear-gradient(180deg,#FFF0F7,#FFD9EA)}

.v-locas{background:linear-gradient(150deg,#2F2460,#141026)}

.v-reciclaje{background:linear-gradient(180deg,#DCF7E6,#B4E9C9)}

.v-space{background:radial-gradient(circle at 50% 100%, #1B2C63, #05060F)}

.v-cadena{background:linear-gradient(180deg,#EAF6D8,#C9E39B)}

.v-tiempo{background:linear-gradient(180deg,#F6EEDD,#E2D3B4)}

.v-angulos{background:linear-gradient(180deg,#EAF2FF,#CBDDF7)}

.v-casa{background:linear-gradient(180deg,#FFF3E2,#FFDCBC)}

.v-duelo{background:linear-gradient(105deg,#7C2BD9 0 48%,#0C0A18 48% 52%,#0FB5A8 52%)}

.v-roleplay{background:linear-gradient(180deg,#E8F4FF,#C3DFF7)}

.v-comic{background:linear-gradient(180deg,#FFF7DB,#FFE4A3)}

.v-mezclas{background:linear-gradient(180deg,#1E2B3C,#0B1119)}

.v-color{background:linear-gradient(180deg,#F4EFE6,#E4DACA)}

.v-movimiento{background:linear-gradient(180deg,#12303E,#0A171F)}

.v-robot{background:linear-gradient(180deg,#1B2430,#0B1016)}

.v-chile{background:linear-gradient(180deg,#123141,#08202B)}

.v-arte{background:linear-gradient(180deg,#F4F1EA,#E0D7C4)}

.v-valores{background:linear-gradient(180deg,#F2ECDF,#DFD3B8)}

.v-caza{background:linear-gradient(180deg,#F7FBFA,#DCEDE8)}

.v-quiz{background:linear-gradient(180deg,#3A2708,#160E02)}

.v-english{background:linear-gradient(180deg,#FFFAF0,#EFE2C6)}

.v-fake{background:linear-gradient(180deg,#F6F9FD,#DDE6F2)}

.v-geo{background:linear-gradient(180deg,#FFF8EA,#EADFC4)}

.v-move{background:linear-gradient(180deg,#1B2028,#0B0E13)}

.v-musica2{background:linear-gradient(180deg,#2A2140,#151022)}

.v-ninja{background:linear-gradient(180deg,#2C0A1B,#12040A)}

.v-ciencia{background:linear-gradient(180deg,#0F2733,#070F16)}

.v-fraccion{background:linear-gradient(180deg,#FFF6E9,#FFE0B8)}

.v-plata{background:linear-gradient(180deg,#0E2018,#06120D)}

.v-quimica{background:linear-gradient(180deg,#071319,#031015)}

.v-bio{background:linear-gradient(180deg,#0A1D16,#050F0B)}

.v-escape{background:linear-gradient(180deg,#120B1C,#080411)}

.v-debate{background:linear-gradient(180deg,#131722,#0A0D14)}

.v-lectura2{background:linear-gradient(180deg,#2B2118,#1A1410)}

.v-memorice{background:linear-gradient(180deg,#12233A,#0A1626)}

.v-cruci{background:linear-gradient(180deg,#F6F3EC,#E4DDCC)}

.v-rosco{background:radial-gradient(circle at 50% 45%, #1B2560, #080C24)}

.v-basediez{background:linear-gradient(180deg,#182234,#0D1420)}

.v-patrones{background:linear-gradient(180deg,#201931,#120E1D)}

.v-prepo{background:linear-gradient(180deg,#20404E,#12222A)}

.v-verbtime{background:radial-gradient(circle at 50% 50%, #16204A, #050812)}

.v-magnet{background:linear-gradient(180deg,#1A1220,#0A0E17)}

.v-eco{background:linear-gradient(180deg,#0F2A20,#07140F)}

.v-puente{background:linear-gradient(180deg,#151D2E,#0A0E17)}

.v-gravedad{background:radial-gradient(circle at 50% 20%, #101B3A, #04060F)}

.v-patronsala{background:linear-gradient(180deg,#1A1F33,#0D1120)}

.v-beat{background:linear-gradient(180deg,#221A2E,#100B18)}

.v-candado{background:linear-gradient(180deg,#141A26,#080C16)}

.v-detective{background:linear-gradient(180deg,#101A2C,#070D18)}

.v-color{background:linear-gradient(180deg,#241B33,#120E1C)}

.v-lasala{background:radial-gradient(circle at 50% 35%, #2A2040, #0A0E1C)}

.vuela-carta{animation:vuelaCarta 2.6s ease-in-out infinite}

.cuenta-arriba{animation:cuentaArriba 3.2s steps(1) infinite}

.cuenta-arriba:nth-of-type(2){animation-delay:.8s}

.cuenta-arriba:nth-of-type(3){animation-delay:1.6s}

.cuenta-arriba:nth-of-type(4){animation-delay:2.4s}

.rebota-letra{animation:rebotaLetra 2.4s ease-in-out infinite}

.rebota-letra:nth-of-type(2){animation-delay:.3s}

.rebota-letra:nth-of-type(3){animation-delay:.6s}

.rebota-letra:nth-of-type(4){animation-delay:.9s}

.rebota-letra:nth-of-type(5){animation-delay:1.2s}

.pasa-linea{animation:pasaLinea 2.6s ease-in-out infinite}

.gira-signo{transform-origin:center;animation:giraSigno 5s ease-in-out infinite}

.cae-tarro{animation:caeTarro 2.6s ease-in-out infinite}

.dispara{animation:dispara 1.5s linear infinite}

.late-flecha{animation:lateFlecha 2s ease-in-out infinite}

.avanza-hito{animation:avanzaHito 3.4s ease-in-out infinite}

.mide-angulo{transform-origin:40px 96px;animation:mideAngulo 3s ease-in-out infinite}

.prende-luz{animation:prendeLuz 2.4s ease-in-out infinite}

.choca-izq{animation:chocaIzq 1.8s ease-in-out infinite}

.choca-der{animation:chocaDer 1.8s ease-in-out infinite}

.habla-globo{animation:hablaGlobo 2.8s ease-in-out infinite}

.burbujea{animation:burbujea 2.2s linear infinite}

.cae-gota{animation:caeGota 2.4s ease-in infinite}

.mezcla-tono{animation:mezclaTono 4s ease-in-out infinite}

.salta-mono{animation:saltaMono .9s ease-in-out infinite}

.avanza-robot{animation:avanzaRobot 3s steps(3) infinite}

.baja-aguja{animation:bajaAguja 3.6s ease-in-out infinite}

.mueve-lupa2{animation:mueveLupa2 4s ease-in-out infinite}

.prende-timbre{animation:prendeTimbre 1.6s ease-in-out infinite}

.duda{animation:duda 2.6s ease-in-out infinite}

.gira-globo{animation:giraGlobo 9s linear infinite}

.corre-pista{animation:correPista 1.1s ease-in-out infinite}

.suena-nota{animation:suenaNota 2.2s ease-in-out infinite}

.corta-ninja{animation:cortaNinja 2.4s ease-in-out infinite}

.hierve-tubo{animation:hierveTubo 2s linear infinite}

.late-corazon2{animation:lateCorazon2 1.3s ease-in-out infinite}

.rejilla-util{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:22px;padding-bottom:8px}

.util{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;
  background:var(--tinta);color:#fff;border-radius:var(--radio);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2);
}

.util:hover,.util:focus-within{transform:translateY(-6px)}

.util .simbolo{font-size:2rem;line-height:1}

.util .para{font-family:var(--dato);font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--cielo)}

.util h3{font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1.1;letter-spacing:-.02em;margin:0}

.util p{margin:0;font-size:.94rem;color:rgba(255,255,255,.76)}

.util .lista{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}

.util .lista span{font-family:var(--dato);font-size:.66rem;padding:4px 9px;border-radius:8px;background:rgba(255,255,255,.1)}

.util .acciones{margin-top:auto;padding-top:14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:stretch}

.util .abrir{
  all:unset;box-sizing:border-box;cursor:pointer;display:block;text-align:center;
  font-family:var(--display);font-weight:800;font-size:1rem;padding:12px 16px;border-radius:12px;
  background:var(--limon);color:var(--tinta);transition:background .16s ease;
}

.util .abrir:hover,.util .abrir:focus-visible{background:#fff}

.util .aparte-claro{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--dato);font-size:.7rem;font-weight:700;padding:9px 12px;text-decoration:none;
  border-radius:12px;border:2px solid rgba(255,255,255,.22);color:rgba(255,255,255,.7);
  transition:border-color .16s ease,color .16s ease;
}

.util .aparte-claro:hover,.util .aparte-claro:focus-visible{border-color:#fff;color:#fff}

@media (max-width:860px){
  .portada{grid-template-columns:1fr;gap:28px;padding-top:28px}
  .pizarron{order:2}
}

@keyframes avanzaHito{0%,100%{transform:translateX(0)}50%{transform:translateX(58px)}}

@keyframes avanzaRobot{0%{transform:translateX(0)}100%{transform:translateX(72px)}}

@keyframes bajaAguja{0%,100%{transform:translateY(0)}50%{transform:translateY(48px)}}

@keyframes burbujea{0%{transform:translateY(6px);opacity:0}25%{opacity:.95}100%{transform:translateY(-40px);opacity:0}}

@keyframes caeGota{0%{transform:translateY(-18px);opacity:0}25%{opacity:1}70%,100%{transform:translateY(30px);opacity:0}}

@keyframes caeTarro{0%{transform:translateY(-30px);opacity:0}20%{opacity:1}70%{transform:translateY(28px)}72%,100%{transform:translateY(28px);opacity:0}}

@keyframes chocaDer{0%,100%{transform:translateX(0)}50%{transform:translateX(-11px)}}

@keyframes chocaIzq{0%,100%{transform:translateX(0)}50%{transform:translateX(11px)}}

@keyframes correPista{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@keyframes cortaNinja{0%,55%{transform:translateX(-70px) rotate(-12deg);opacity:0}62%{opacity:1}100%{transform:translateX(70px) rotate(-12deg);opacity:0}}

@keyframes cuentaArriba{0%,24%{opacity:1}25%,100%{opacity:.18}}

@keyframes dispara{0%{transform:translateY(0);opacity:0}12%{opacity:1}100%{transform:translateY(-58px);opacity:0}}

@keyframes duda{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

@keyframes giraGlobo{0%{transform:translateX(0)}100%{transform:translateX(-40px)}}

@keyframes giraSigno{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}

@keyframes hablaGlobo{0%,100%{transform:scale(1)}18%{transform:scale(1.07)}}

@keyframes hierveTubo{0%{transform:translateY(4px);opacity:0}30%{opacity:.9}100%{transform:translateY(-34px);opacity:0}}

@keyframes lateCorazon2{0%,100%{transform:scale(1)}18%{transform:scale(1.14)}36%{transform:scale(1)}}

@keyframes lateFlecha{0%,100%{opacity:.35}50%{opacity:1}}

@keyframes mezclaTono{0%,100%{fill:#E8C33A}33%{fill:#FF8000}66%{fill:#D8362A}}

@keyframes mideAngulo{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-46deg)}}

@keyframes mueveLupa2{0%,100%{transform:translate(0,0)}35%{transform:translate(26px,-10px)}70%{transform:translate(-14px,8px)}}

@keyframes pasaLinea{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(96px);opacity:0}}

@keyframes prendeLuz{0%,100%{opacity:.25}45%,55%{opacity:1}}

@keyframes prendeTimbre{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

@keyframes rebotaLetra{0%,100%{transform:translateY(0)}40%{transform:translateY(-9px)}}

@keyframes saltaMono{0%,100%{transform:translateY(0)}45%{transform:translateY(-12px)}}

@keyframes suenaNota{0%{transform:translateY(6px);opacity:0}25%{opacity:1}100%{transform:translateY(-30px);opacity:0}}

@keyframes vuelaCarta{0%,12%{transform:translateX(0) rotate(0);opacity:1}45%{transform:translateX(48px) rotate(14deg);opacity:0}46%{transform:translateX(-48px) rotate(-14deg);opacity:0}70%,100%{transform:translateX(0) rotate(0);opacity:1}}


/* === reproductor y boton aparte === */
/* Rescatado de index-v1.html: la migracion lo habia perdido. */

.aparte{
  display:inline-flex;align-items:center;cursor:pointer;font-family:var(--dato);font-size:.72rem;font-weight:700;padding:12px 12px;text-decoration:none;
  border-radius:12px;border:2px solid var(--linea);color:#5B6A94;transition:border-color .16s ease,color .16s ease;
}

.aparte:hover,.aparte:focus-visible{border-color:var(--tinta);color:var(--tinta)}

/* ---------- reproductor ---------- */
.reproductor{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;background:var(--tinta)}

.reproductor::backdrop{background:rgba(27,26,58,.7)}

.reproductor[open]{display:flex;flex-direction:column}

.reproductor-barra{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--tinta);color:#fff;flex:0 0 auto;flex-wrap:wrap}

.reproductor-barra h2{font-family:var(--display);font-weight:800;font-size:1.05rem;margin:0;flex:1;letter-spacing:-.01em}

.reproductor-barra button{
  all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--dato);font-size:.74rem;font-weight:700;
  padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.12);transition:background .16s ease,color .16s ease;
}

.reproductor-barra button:hover,.reproductor-barra button:focus-visible{background:var(--limon);color:var(--tinta)}

.reproductor iframe{flex:1;width:100%;border:0;background:#fff}