/* =========================================================
   GYMKANAS.COM — Rediseño visual (inspiración Frame.io)
   Paleta del documento de marca:
   #2B97FA azul · #06233F azul noche · #FFA300 naranja
   #C2FF05 lima · #FFFFFF blanco · #2F2F2F gris
   ========================================================= */

:root{
  --azul:        #2B97FA;
  --azul-osc:    #1d7fd6;
  --noche:       #06233F;   /* fondo oscuro principal */
  --noche-2:     #0a2f52;   /* degradado / cards oscuras */
  --naranja:     #FFA300;
  --lima:        #C2FF05;
  --blanco:      #FFFFFF;
  --gris:        #2F2F2F;
  --gris-txt:    #5a6470;
  --gris-claro:  #f4f7fa;
  --linea:       #e4ebf2;

  --display:'Sora', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;

  --r:20px; --r-sm:13px;
  --ancho:1200px;
  --t:.3s cubic-bezier(.2,.7,.3,1);
  --sombra:0 14px 40px rgba(6,35,63,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--gris);line-height:1.65;background:var(--blanco);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;font-weight:700;color:var(--noche);letter-spacing:-.02em}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--display);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.76rem;color:var(--azul);margin-bottom:14px;display:block}
.lima-txt{color:var(--azul)}

/* ====== BOTONES ====== */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:1rem;padding:15px 32px;border-radius:50px;cursor:pointer;border:0;transition:var(--t);white-space:nowrap}
.btn .material-symbols-rounded{font-size:1.25em}
.btn-lima{background:var(--lima);color:var(--noche);box-shadow:0 0 0 0 rgba(194,255,5,.6)}
.btn-lima:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(194,255,5,.45)}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-osc);transform:translateY(-3px);box-shadow:0 12px 30px rgba(43,151,250,.4)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--lima);color:var(--lima)}

/* ====== HEADER ====== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:var(--t)}
.site-header.solid{background:rgba(6,35,63,.92);backdrop-filter:blur(14px);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font-family:var(--display);font-weight:800;font-size:1.45rem;color:#fff;letter-spacing:-.03em;display:inline-flex;align-items:center}
.logo span{color:var(--lima)}
.logo-img{height:42px;width:auto;display:block}
.logo-txt span{color:var(--lima)}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links>li>a{font-family:var(--display);font-weight:500;font-size:.96rem;color:#fff;transition:var(--t);opacity:.92}
.nav-links>li>a:hover{color:var(--lima);opacity:1}
.dd{position:relative}
.dd>a{display:inline-flex;align-items:center;gap:4px}
.dd>a .material-symbols-rounded{font-size:1.1em;transition:var(--t)}
.dd:hover>a .material-symbols-rounded{transform:rotate(180deg)}
.dd::before{content:"";position:absolute;top:100%;left:0;right:0;height:20px}
.dd-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(10px);background:#fff;border-radius:var(--r-sm);box-shadow:0 18px 50px rgba(6,35,63,.25);min-width:200px;padding:9px;opacity:0;visibility:hidden;transition:var(--t)}
.dd:hover .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd-menu a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:9px;font-size:.93rem;color:var(--noche);font-weight:500}
.dd-menu a:hover{background:var(--gris-claro);color:var(--azul)}
.dd-menu .flag{font-size:1.1rem}
.nav-cta{display:flex;align-items:center;gap:16px}
.lang{font-family:var(--display);font-weight:600;font-size:.82rem;display:flex;gap:4px;align-items:center}
.lang a{padding:5px 9px;border-radius:7px;color:rgba(255,255,255,.7)}
.lang a.activo{background:rgba(194,255,5,.18);color:var(--lima)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:1100}
.burger span{width:26px;height:3px;background:#fff;border-radius:3px;transition:var(--t)}

/* ====== HERO ====== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,35,63,.78) 0%,rgba(6,35,63,.55) 40%,rgba(6,35,63,.88) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:90px;padding-bottom:60px}
.hero h1{color:#fff;font-size:clamp(2.3rem,5.5vw,4.2rem);max-width:980px;margin:0 auto 22px;font-weight:800}
.hero .typed-wrap{display:block;color:var(--lima);min-height:1.2em}
.hero .cursor{display:inline-block;width:3px;background:var(--lima);margin-left:4px;animation:blink 1s steps(2) infinite;vertical-align:-4px}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.hero p{font-size:clamp(1.05rem,2vw,1.35rem);max-width:640px;margin:0 auto 34px;opacity:.95}
.hero-acciones{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.6);animation:bob 2s ease-in-out infinite}
.scroll-hint .material-symbols-rounded{font-size:2rem}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ====== SECCIONES ====== */
.sec{padding:100px 0;position:relative}
.sec-oscura{background:linear-gradient(160deg,var(--noche) 0%,var(--noche-2) 100%);color:#fff}
.sec-oscura h1,.sec-oscura h2,.sec-oscura h3,.sec-oscura h4{color:#fff}
.sec-oscura .eyebrow{color:var(--lima)}
.sec-oscura .lima-txt{color:var(--lima)}
.sec-clara{background:#fff}
.sec-gris{background:var(--gris-claro)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 64px}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:18px;font-weight:800}
.sec-head p{font-size:1.12rem;opacity:.85}

/* franja de imagen full-bleed entre secciones */
.banda-img{position:relative;height:clamp(280px,42vw,520px);overflow:hidden}
.banda-img img{width:100%;height:100%;object-fit:cover}
.banda-img.fixed{background-attachment:fixed}
.banda-img .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,35,63,.85) 0%,rgba(6,35,63,.35) 60%,transparent 100%);display:flex;align-items:center}
.banda-img .overlay .wrap{width:100%}
.banda-img .overlay h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:560px;margin-bottom:14px}
.banda-img .overlay p{color:rgba(255,255,255,.92);max-width:480px;font-size:1.1rem}
.ph-label{position:absolute;top:12px;left:12px;z-index:3;background:rgba(194,255,5,.92);color:var(--noche);font-family:var(--display);font-weight:700;font-size:.72rem;padding:5px 12px;border-radius:6px;letter-spacing:.04em}

/* rotador de palabras */
.rotador{display:inline-flex;flex-direction:column;height:1.2em;overflow:hidden;vertical-align:bottom}
.rotador span{display:block;height:1.2em;color:var(--naranja);font-weight:800;animation:rotar 9s infinite}
@keyframes rotar{0%,15%{transform:translateY(0)}20%,35%{transform:translateY(-100%)}40%,55%{transform:translateY(-200%)}60%,75%{transform:translateY(-300%)}80%,100%{transform:translateY(-400%)}}

/* ====== GRID SERVICIOS (cards glassmorphism oscuras) ====== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card-glass{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:38px 30px;transition:var(--t);position:relative;overflow:hidden}
.card-glass::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(43,151,250,.25),transparent 70%);opacity:0;transition:var(--t)}
.card-glass:hover{transform:translateY(-10px);border-color:rgba(194,255,5,.5);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.card-glass:hover::before{opacity:1}
.card-glass .ico{width:60px;height:60px;border-radius:16px;background:rgba(194,255,5,.14);display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:var(--t)}
.card-glass .ico .material-symbols-rounded{font-size:2rem;color:var(--lima)}
.card-glass:hover .ico{background:var(--lima);transform:scale(1.08) rotate(-6deg)}
.card-glass:hover .ico .material-symbols-rounded{color:var(--noche)}
.card-glass h3{font-size:1.35rem;margin-bottom:12px;position:relative}
.card-glass p{font-size:1rem;opacity:.82;margin-bottom:20px;position:relative}
.card-glass .mas{font-family:var(--display);font-weight:600;color:var(--lima);display:inline-flex;align-items:center;gap:6px;position:relative}
.card-glass .mas .material-symbols-rounded{font-size:1.1em;transition:var(--t)}
.card-glass:hover .mas .material-symbols-rounded{transform:translateX(5px)}

/* cards claras (servicios de apoyo) */
.grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card-clara{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:30px;transition:var(--t);text-align:center}
.card-clara:hover{transform:translateY(-8px);box-shadow:var(--sombra);border-color:transparent}
.card-clara .ico{width:64px;height:64px;border-radius:50%;background:var(--gris-claro);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;transition:var(--t);position:relative}
.card-clara .ico::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--azul);opacity:0;transform:scale(1.25);transition:var(--t)}
.card-clara .ico .material-symbols-rounded{font-size:1.9rem;color:var(--azul);transition:var(--t)}
.card-clara:hover .ico{background:var(--azul);transform:scale(1.05)}
.card-clara:hover .ico::after{opacity:.4;transform:scale(1.15)}
.card-clara:hover .ico .material-symbols-rounded{color:#fff;transform:scale(1.12) rotate(-5deg)}
.card-clara h4{font-size:1.1rem;margin-bottom:8px}
.card-clara p{font-size:.93rem;opacity:.78}

/* país cards */
.card-pais{display:block;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:34px 28px;transition:var(--t);position:relative;overflow:hidden}
.card-pais .flag{font-size:2.6rem;display:block;margin-bottom:14px;transition:var(--t)}
.card-pais:hover{transform:translateY(-8px);box-shadow:var(--sombra);border-color:var(--azul)}
.card-pais:hover .flag{transform:scale(1.15) rotate(5deg)}
.card-pais h3{font-size:1.3rem;margin-bottom:8px}
.card-pais p{font-size:.95rem;opacity:.78;margin-bottom:14px}
.card-pais .mas{font-family:var(--display);font-weight:600;color:var(--azul);display:inline-flex;align-items:center;gap:5px}

/* ====== STATS ====== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stats .num{font-family:var(--display);font-weight:800;font-size:3rem;color:var(--lima);line-height:1}
.stats .lbl{font-size:.98rem;opacity:.85;margin-top:8px}

/* ====== ARTÍCULO SEO ====== */
.articulo{max-width:840px;margin:0 auto}
.articulo h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:48px 0 18px}
.articulo h3{font-size:1.35rem;margin:34px 0 14px;color:var(--azul)}
.articulo p{margin-bottom:18px;font-size:1.08rem}
.articulo ul{margin:0 0 20px 24px}
.articulo li{margin-bottom:11px;font-size:1.08rem}
.articulo .destacado{background:linear-gradient(135deg,rgba(43,151,250,.08),rgba(194,255,5,.08));border-left:4px solid var(--azul);padding:22px 26px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:28px 0}
.articulo .destacado p{margin:0;color:var(--noche);font-weight:500}

/* ====== FAQ ====== */
.faq details{border:1px solid var(--linea);border-radius:var(--r-sm);margin-bottom:14px;padding:0 24px;background:#fff;transition:var(--t)}
.faq details[open]{box-shadow:var(--sombra);border-color:var(--azul)}
.faq summary{font-family:var(--display);font-weight:600;color:var(--noche);padding:20px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .material-symbols-rounded{color:var(--azul);transition:var(--t)}
.faq details[open] summary .material-symbols-rounded{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;margin:0;opacity:.85}

/* ====== FORM ====== */
.form-coti{background:#fff;border-radius:var(--r);padding:40px;box-shadow:var(--sombra)}
.form-coti .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-coti label{display:block;font-family:var(--display);font-weight:500;font-size:.86rem;color:var(--noche);margin:16px 0 6px}
.form-coti input,.form-coti textarea{width:100%;padding:13px 15px;border:1.5px solid var(--linea);border-radius:11px;font-family:var(--body);font-size:.96rem;transition:var(--t)}
.form-coti input:focus,.form-coti textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(43,151,250,.13)}
.form-coti .btn{width:100%;justify-content:center;margin-top:22px}

/* ====== CTA BAND ====== */
.cta-band{background:linear-gradient(135deg,var(--azul),var(--azul-osc));color:#fff;text-align:center;padding:72px 40px;border-radius:var(--r)}
.cta-band h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:16px}
.cta-band p{max-width:560px;margin:0 auto 28px;opacity:.95}

/* ====== FOOTER ====== */
.site-footer{background:var(--noche);color:#aebfce;padding:70px 0 0;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px}
.site-footer h4{color:#fff;font-size:1.02rem;margin-bottom:18px}
.site-footer a{color:#aebfce;transition:var(--t)}
.site-footer a:hover{color:var(--lima)}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:10px}
.footer-logo{font-family:var(--display);font-weight:800;font-size:1.55rem;color:#fff;margin-bottom:14px}
.footer-logo span{color:var(--lima)}
.footer-logo-img{height:46px;width:auto;display:block;margin-bottom:14px}
.footer-logo-txt span{color:var(--lima)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:24px 0;text-align:center;font-size:.85rem;color:#6b8198}

/* ====== WHATSAPP FLOAT ====== */
.wa-float{position:fixed;bottom:26px;right:26px;width:62px;height:62px;border-radius:50%;background:linear-gradient(145deg,#2ee777,#1db954);display:flex;align-items:center;justify-content:center;z-index:9999;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:var(--t);animation:waPulse 3s infinite}
.wa-float:hover{transform:translateY(-4px) scale(1.08)}
.wa-float svg{width:34px;height:34px;fill:#fff}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ====== REVEAL ON SCROLL ====== */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

/* ====== RESPONSIVE ====== */
@media (max-width:980px){
  .grid-3,.grid-6{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .burger{display:flex}
  .nav-links{position:fixed;top:0;right:0;bottom:0;width:80%;max-width:320px;background:var(--noche);flex-direction:column;align-items:stretch;gap:0;padding:96px 0 30px;transform:translateX(100%);transition:transform .35s ease;box-shadow:-10px 0 40px rgba(0,0,0,.4);overflow-y:auto}
  .nav-links.abierto{transform:translateX(0)}
  .nav-links>li{border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-links>li>a{display:block;padding:16px 26px}
  .dd .dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:rgba(255,255,255,.05);border-radius:0;padding:0;display:none}
  .dd.abierto-dd .dd-menu{display:block}
  .dd-menu a{color:#fff;padding:13px 38px}
  .dd-menu a:hover{background:rgba(255,255,255,.08)}
  .nav-cta .btn-lima{display:none}
  .grid-3,.grid-6,.stats,.footer-grid{grid-template-columns:1fr}
  .form-coti .fila{grid-template-columns:1fr}
  .form-coti{padding:26px}
  .sec{padding:64px 0}
  .banda-img.fixed{background-attachment:scroll}
  .banda-img .overlay{background:linear-gradient(180deg,rgba(6,35,63,.4),rgba(6,35,63,.85))}
}

/* =========================================================
   CATÁLOGO DE JUEGOS
   ========================================================= */
.filtros{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:18px 20px;margin-bottom:24px;box-shadow:var(--sombra)}
.filtros-buscar{display:flex;align-items:center;gap:10px;border:1.5px solid var(--linea);border-radius:50px;padding:10px 18px;margin-bottom:14px}
.filtros-buscar:focus-within{border-color:var(--azul);box-shadow:0 0 0 4px rgba(43,151,250,.13)}
.filtros-buscar .material-symbols-rounded{color:var(--gris-txt)}
.filtros-buscar input{border:0;outline:0;flex:1;font-family:var(--body);font-size:1rem;background:transparent}
.filtros-grupos{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fgrupo{position:relative}
.fgrupo summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--noche);background:var(--gris-claro);border:1.5px solid var(--linea);border-radius:50px;padding:9px 16px;transition:var(--t);user-select:none}
.fgrupo summary::-webkit-details-marker{display:none}
.fgrupo summary .material-symbols-rounded{font-size:1.1em;transition:var(--t)}
.fgrupo[open] summary{background:var(--azul);color:#fff;border-color:var(--azul)}
.fgrupo[open] summary .material-symbols-rounded{transform:rotate(180deg)}
.fgrupo .fopts{position:absolute;top:calc(100% + 8px);left:0;z-index:50;background:#fff;border:1px solid var(--linea);border-radius:var(--r-sm);box-shadow:0 18px 50px rgba(6,35,63,.22);padding:10px;min-width:230px;max-height:300px;overflow-y:auto}
.fgrupo .fopts label{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:.9rem;cursor:pointer;transition:var(--t)}
.fgrupo .fopts label:hover{background:var(--gris-claro)}
.fgrupo .fopts input{accent-color:var(--azul);width:16px;height:16px}
.btn-limpiar{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--gris-txt);font-family:var(--display);font-weight:500;font-size:.9rem;cursor:pointer;padding:9px 12px;border-radius:50px;transition:var(--t)}
.btn-limpiar:hover{color:var(--azul);background:var(--gris-claro)}
.btn-limpiar .material-symbols-rounded{font-size:1.1em}

.contador-res{font-family:var(--display);font-weight:500;color:var(--gris-txt);margin-bottom:22px;font-size:.95rem}

.grid-juegos{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px}
.juego{background:#fff;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:var(--t)}
.juego:hover{transform:translateY(-6px);box-shadow:var(--sombra-h);border-color:transparent}
.juego-foto{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--gris-claro)}
.juego-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.juego:hover .juego-foto img{transform:scale(1.07)}
.juego-foto.sin-foto img{display:none}
.placeholder-foto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0a2f52,#06233F)}
.placeholder-foto .material-symbols-rounded{font-size:3rem;color:rgba(194,255,5,.5)}
.badge-cat{position:absolute;top:12px;left:12px;font-family:var(--display);font-weight:700;font-size:.72rem;padding:5px 12px;border-radius:50px;letter-spacing:.03em;color:#fff}
.badge-standard{background:var(--azul)}
.badge-plus{background:var(--naranja)}
.badge-pro{background:var(--noche);border:1px solid var(--lima);color:var(--lima)}
.juego-body{padding:22px;display:flex;flex-direction:column;flex:1}
.juego-body h3{font-size:1.2rem;margin-bottom:12px}
.juego-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.juego-meta span{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;color:var(--gris-txt)}
.juego-meta .material-symbols-rounded{font-size:1.05em;color:var(--azul)}
.juego-desc{font-size:.92rem;color:var(--gris-txt);line-height:1.55;margin-bottom:14px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.juego-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.juego-tags .tag{font-size:.72rem;background:var(--turquesa-claro,rgba(43,151,250,.1));color:var(--azul-osc);padding:4px 10px;border-radius:50px;font-weight:500}
.btn-agregar{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;background:var(--gris-claro);border:1.5px solid var(--linea);color:var(--noche);font-family:var(--display);font-weight:600;font-size:.9rem;padding:11px;border-radius:50px;cursor:pointer;transition:var(--t)}
.btn-agregar:hover{border-color:var(--azul);color:var(--azul)}
.btn-agregar .material-symbols-rounded{font-size:1.2em;transition:var(--t)}
.btn-agregar.agregado{background:var(--lima);border-color:var(--lima);color:var(--noche)}
.btn-agregar.agregado:hover{background:#b3ec00}

.sin-resultados{text-align:center;padding:50px 20px;color:var(--gris-txt);font-size:1.05rem}
.sin-resultados a{color:var(--azul);font-weight:600}

/* Panel Mi Programa */
.mi-programa{position:fixed;bottom:26px;left:26px;z-index:9998}
.mp-toggle{display:inline-flex;align-items:center;gap:9px;background:var(--azul);color:#fff;border:0;font-family:var(--display);font-weight:600;font-size:.96rem;padding:14px 22px;border-radius:50px;cursor:pointer;box-shadow:0 10px 28px rgba(43,151,250,.4);transition:var(--t)}
.mp-toggle:hover{transform:translateY(-3px)}
.mp-count{background:var(--lima);color:var(--noche);font-weight:800;min-width:24px;height:24px;border-radius:50px;display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;padding:0 6px}
.mp-panel{position:absolute;bottom:calc(100% + 14px);left:0;width:340px;max-width:calc(100vw - 52px);background:#fff;border-radius:var(--r);box-shadow:0 24px 60px rgba(6,35,63,.3);opacity:0;visibility:hidden;transform:translateY(14px);transition:var(--t);overflow:hidden}
.mp-panel.abierto{opacity:1;visibility:visible;transform:none}
.mp-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:var(--noche);color:#fff}
.mp-head h4{color:#fff;font-size:1.1rem}
.mp-close{background:none;border:0;color:#fff;cursor:pointer;display:flex}
.mp-lista{max-height:320px;overflow-y:auto;padding:14px 20px}
.mp-vacio{font-size:.9rem;color:var(--gris-txt);line-height:1.5}
.mp-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--linea);font-size:.92rem}
.mp-item:last-child{border-bottom:0}
.mp-quitar{background:none;border:0;color:var(--gris-txt);cursor:pointer;display:flex;padding:4px;border-radius:6px;transition:var(--t)}
.mp-quitar:hover{color:#e23;background:var(--gris-claro)}
.mp-acciones{padding:16px 20px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.mp-acciones .btn{width:100%;justify-content:center;font-size:.92rem;padding:12px}
.btn-wa{background:var(--wa,#1db954);color:#fff}
.btn-wa:hover{filter:brightness(1.07)}

@media (max-width:720px){
  .mi-programa{bottom:20px;left:20px;right:20px}
  .mp-toggle{width:100%;justify-content:center}
  .mp-panel{width:100%}
  .wa-float{bottom:90px}
}

/* Badge de video e indicador "ver detalle" en tarjeta */
.juego-foto{cursor:pointer}
.badge-video{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:4px;background:rgba(6,35,63,.85);color:#fff;font-family:var(--display);font-weight:600;font-size:.72rem;padding:5px 11px;border-radius:50px}
.badge-video .material-symbols-rounded{font-size:1.1em;color:var(--lima)}
.ver-detalle-hint{position:absolute;bottom:12px;right:12px;display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.92);color:var(--noche);font-family:var(--display);font-weight:600;font-size:.76rem;padding:6px 12px;border-radius:50px;opacity:0;transform:translateY(6px);transition:var(--t)}
.juego:hover .ver-detalle-hint{opacity:1;transform:none}
.juego-body h3.ver-detalle{cursor:pointer;transition:var(--t)}
.juego-body h3.ver-detalle:hover{color:var(--azul)}

/* Modal de detalle */
.juego-modal{position:fixed;inset:0;z-index:10000;display:none}
.juego-modal.abierto{display:block}
.jm-overlay{position:absolute;inset:0;background:rgba(6,35,63,.7);backdrop-filter:blur(4px)}
.jm-dialog{position:relative;max-width:760px;margin:5vh auto;background:#fff;border-radius:var(--r);overflow:hidden;max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:jmIn .3s ease}
@keyframes jmIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.jm-close{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(6,35,63,.6);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--t)}
.jm-close:hover{background:var(--noche)}
.jm-media{width:100%;background:#000}
.jm-video{position:relative;width:100%;padding-bottom:56.25%}
.jm-video iframe{position:absolute;inset:0;width:100%;height:100%}
.jm-foto{width:100%;max-height:380px;object-fit:cover}
.jm-body{padding:32px}
.jm-cats{display:flex;gap:8px;margin-bottom:14px;position:static}
.jm-cats .badge-cat{position:static;display:inline-flex}
.jm-body h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:16px}
.jm-meta{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--linea)}
.jm-meta span{display:inline-flex;align-items:center;gap:5px;font-size:.92rem;color:var(--gris-txt)}
.jm-meta .material-symbols-rounded{font-size:1.15em;color:var(--azul)}
.jm-body p{font-size:1.05rem;line-height:1.7;margin-bottom:18px}
.jm-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.jm-tags .tag{font-size:.8rem;background:rgba(43,151,250,.1);color:var(--azul-osc);padding:5px 12px;border-radius:50px;font-weight:500}
.jm-acciones{display:flex;gap:12px;flex-wrap:wrap}
.jm-acciones .btn{flex:1;justify-content:center;min-width:180px}
.jm-acciones .agregado{background:var(--noche);color:var(--lima)}
@media(max-width:600px){.jm-dialog{margin:0;min-height:100vh;border-radius:0}.jm-body{padding:22px}.jm-acciones .btn{min-width:100%}}