/* Páginas de juego: Chase & Deck, Hit & Deck, Busted 21 */
.juego-cd{--acento:#ff6b6e;--halo:rgba(216,72,76,.4);--tinte:rgba(216,72,76,.18)}
.juego-hd{--acento:var(--oro);--halo:rgba(229,181,98,.4);--tinte:rgba(229,181,98,.16)}
.juego-b21{--acento:#5fd39a;--halo:rgba(47,138,91,.5);--tinte:rgba(47,138,91,.2)}

/* subnavegación fija bajo la principal */
.subnav{position:sticky;top:var(--nav);z-index:40;height:52px;background:rgba(6,8,13,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--linea)}
.subnav .envoltura{height:100%;display:flex;align-items:center;gap:20px}
.subnav .nombre{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em;margin-right:auto;text-decoration:none}
.subnav .nombre img{width:28px;height:28px;border-radius:7px}
.subnav nav{display:flex;gap:22px}
.subnav nav a{text-decoration:none;font-size:13px;color:rgba(242,235,220,.75)}
.subnav nav a:hover{color:var(--crema)}
.subnav .pildora{font-size:12px;padding:5px 13px;background:var(--acento);color:#0b0d12}
@media (max-width:760px){.subnav nav{display:none}.subnav .nombre{font-size:17px}}
.juego main{padding-top:var(--nav)}

/* héroe: el vídeo a todo ancho y, debajo, el nombre */
.portada-juego{position:relative}
.portada-juego .lienzo-video{aspect-ratio:21/9;max-height:calc(100svh - var(--nav) - 52px - 120px);width:100%}
.portada-juego .envoltura{position:relative;z-index:2;margin-top:clamp(-150px,-9vw,-50px)}
.portada-juego .icono{width:clamp(72px,8vw,104px);border-radius:23%;box-shadow:0 20px 50px rgba(0,0,0,.6);margin-bottom:22px}
.portada-juego h1{font-size:clamp(56px,10vw,140px);font-weight:800;letter-spacing:-.05em;line-height:.9;margin:0}
.portada-juego .lema{font-size:clamp(20px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;margin:14px 0 26px;color:var(--acento)}
@media (max-width:760px){.portada-juego .lienzo-video{aspect-ratio:3/2;max-height:none}.portada-juego .envoltura{margin-top:-56px}}

/* frase de entrada */
.declaracion{padding:clamp(100px,14vw,190px) 0;text-align:center}
.declaracion p{margin:0 auto;max-width:1000px;font-size:clamp(32px,5.4vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1.08}
.declaracion p span{color:var(--humo2)}
.declaracion p.entrada{margin:28px auto 0;font-size:clamp(18px,2vw,22px);font-weight:500;letter-spacing:0;line-height:1.45;max-width:640px}

/* naipe 3D del juego */
.naipe-juego{padding:0 0 clamp(100px,12vw,160px)}
.naipe-juego .caja{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);border-radius:36px;padding:clamp(40px,6vw,80px);
  background:radial-gradient(70% 80% at 25% 30%,var(--tinte),transparent 70%),linear-gradient(160deg,var(--marino2),var(--noche2));border:1px solid var(--linea);overflow:hidden}
.naipe-juego .mesa3d{--w:min(300px,60vw);padding:20px 0 40px}
.naipe-juego .escena{display:grid;justify-items:center;gap:6px}
@media (max-width:760px){.naipe-juego .caja{grid-template-columns:1fr;text-align:center}.naipe-juego .entrada{margin-left:auto;margin-right:auto}}

/* cómo se juega */
.pasos{padding:0 0 clamp(100px,12vw,160px)}
.pasos .lista{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;counter-reset:paso}
.pasos .paso{border-radius:28px;padding:34px 30px 36px;background:linear-gradient(170deg,var(--marino2),var(--noche2));border:1px solid var(--linea);position:relative;overflow:hidden}
.pasos .paso::before{counter-increment:paso;content:counter(paso);display:block;font-size:84px;font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--acento);opacity:.9;margin-bottom:18px}
.pasos .paso h3{font-size:24px;letter-spacing:-.02em;margin:0 0 10px}
.pasos .paso p{margin:0;color:var(--humo)}
.pasos .paso img{position:absolute;right:-14px;top:18px;width:84px;aspect-ratio:136/190;border-radius:6px;transform:rotate(10deg);opacity:.85;box-shadow:0 14px 30px rgba(0,0,0,.6)}
@media (max-width:860px){.pasos .lista{grid-template-columns:1fr}}

/* capturas */
.capturas{padding:0 0 clamp(100px,12vw,160px);overflow:hidden}
.capturas .cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.capturas .flechas{display:flex;gap:10px}
.capturas .flechas button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(242,235,220,.1);cursor:pointer;font-size:20px;color:var(--crema)}
.capturas .flechas button:hover{background:rgba(242,235,220,.2)}
.carril{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:40px;padding:0 max(var(--gut),calc((100vw - var(--ancho))/2 + var(--gut))) 30px;scrollbar-width:none;scroll-padding:0 max(var(--gut),calc((100vw - var(--ancho))/2 + var(--gut)))}
.carril::-webkit-scrollbar{display:none}
.carril figure{margin:0;flex:none;width:min(300px,72vw);scroll-snap-align:start}
.carril img{width:100%;border-radius:24px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}

/* por qué engancha */
.razones{padding:0 0 clamp(100px,12vw,160px)}
.razones .rejilla{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:56px}
.razones .razon{grid-column:span 2;border-radius:28px;padding:32px 30px;background:linear-gradient(170deg,var(--marino2),var(--noche2));border:1px solid var(--linea)}
.razones .razon.ancha{grid-column:span 3}
.razones .razon h3{font-size:22px;letter-spacing:-.02em;margin:0 0 10px}
.razones .razon p{margin:0;color:var(--humo);font-size:16px}
.razones .razon .marca-r{font:700 12px var(--mono);letter-spacing:.18em;color:var(--acento);margin-bottom:16px;display:block}
@media (max-width:860px){.razones .rejilla{grid-template-columns:1fr}.razones .razon,.razones .razon.ancha{grid-column:auto}}

/* modos */
.modos{padding:0 0 clamp(100px,12vw,160px)}
.modos ul{list-style:none;padding:0;margin:48px 0 0;border-top:1px solid var(--linea)}
.modos li{display:grid;grid-template-columns:minmax(160px,280px) 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--linea);align-items:baseline}
.modos li b{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em}
.modos li span{color:var(--humo)}
.modos li em{font-style:normal;font:700 11px var(--mono);letter-spacing:.14em;color:var(--acento);border:1px solid currentColor;border-radius:999px;padding:3px 9px;margin-left:10px;vertical-align:middle;white-space:nowrap}
@media (max-width:640px){.modos li{grid-template-columns:1fr;gap:6px}}

/* gratis y versión completa */
.precio{padding:0 0 clamp(100px,12vw,160px)}
.precio .dos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.precio .plan{border-radius:32px;padding:clamp(30px,4vw,48px);border:1px solid var(--linea);background:linear-gradient(170deg,var(--marino2),var(--noche2))}
.precio .plan.completa{background:radial-gradient(80% 70% at 80% 0%,var(--tinte),transparent 70%),linear-gradient(170deg,var(--marino2),var(--noche2));border-color:color-mix(in srgb,var(--acento) 40%,transparent)}
.precio .plan h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;margin:0 0 6px}
.precio .plan .sub{color:var(--acento);font:700 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 24px}
.precio .plan ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.precio .plan li{padding-left:28px;position:relative;color:var(--humo)}
.precio .plan li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2px solid var(--acento);border-bottom:2px solid var(--acento);transform:rotate(-45deg)}
.precio .nota{margin-top:26px;color:var(--humo2);font-size:14px;text-align:center}
@media (max-width:760px){.precio .dos{grid-template-columns:1fr}}

/* inicio en el teléfono + otras mesas */
.cierre{padding:0 0 clamp(90px,12vw,150px)}
.cierre .caja{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,6vw,90px);align-items:center;border-radius:36px;padding:clamp(36px,6vw,80px);
  background:radial-gradient(60% 80% at 20% 50%,var(--tinte),transparent 70%),linear-gradient(160deg,var(--marino2),var(--noche2));border:1px solid var(--linea)}
.cierre .iphone{--w:min(260px,60vw)}
.cierre .acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
@media (max-width:760px){.cierre .caja{grid-template-columns:1fr;justify-items:center;text-align:center}.cierre .acciones{justify-content:center}}
.otras{padding:0 0 clamp(90px,12vw,150px)}
.otras .dos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.otras a{display:flex;align-items:center;gap:22px;text-decoration:none;border-radius:28px;padding:26px;border:1px solid var(--linea);background:linear-gradient(170deg,var(--marino2),var(--noche2));transition:transform .3s,border-color .3s}
.otras a:hover{transform:translateY(-4px);border-color:rgba(242,235,220,.3)}
.otras img{width:72px;border-radius:22%}
.otras b{display:block;font-size:22px;letter-spacing:-.02em}
.otras span{color:var(--humo);font-size:15px}
@media (max-width:640px){.otras .dos{grid-template-columns:1fr}}
.centro{text-align:center}.centro .entrada{margin-left:auto;margin-right:auto}