/* «JUEGOS EN LA WEB» (WEB-2A): la bienvenida y la suite de juegos.candywinbingo.lat.
   🔴 ES EL <style> DEL PROTOTIPO APROBADO (prototipo/suite-web.html), frames 2 y 4, con sus valores tal cual: los tokens,
   la portada (.bv, .hero, .jg, .comu, .promos, .cierre, .pie-bv) y la suite (.hola, .saldo, .act, .novs, .agenda, .mini,
   .hoja). Lo del prototipo que no es pantalla —el teléfono dibujado (.tel, .url), las columnas, la barra de navegar, el
   panel— no viene. Lo que se agrega va abajo, en «Lo de la web», y dice por qué.
   Los colores de cada parte, los botones, la letra y el acento los pone web.js desde «diseno» (Panel › Juegos en la web ›
   Fondos y colores): acá están sus valores de fábrica, que son los del prototipo. */
:root{
  --ground:#F4F2F8;--surface:#FFFFFF;--surface-2:#F3F0F8;--line:#E4DEED;--ink:#1F1A28;--ink-soft:#5F5870;--ink-faint:#8E879F;
  --accent:#6A2DB2;--accent-soft:#EFE6FA;--gold:#8A6D0B;--gold-soft:#FBF2D6;
  --barra:#18202A;--warn:#A5670A;--warn-soft:#FBF0DC;--ok:#1F7A4D;--ok-soft:#E3F3EA;--ilu:#F7F1FF;--tg:#2AABEE;--tg-ink:#FFFFFF;
  --pink:#E8457A;--pink-soft:#FDE7EF;--yellow:#F2B636;--yellow-soft:#FDF3D9;--teal:#2BB3A3;--teal-soft:#DDF4F1;--orange:#F08A3C;--orange-soft:#FDEBDD;
  --plum:#3B1766;--plum-2:#5A24A0;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;--body:"Source Sans 3","Segoe UI",system-ui,sans-serif;--mono:"IBM Plex Mono","Consolas",monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.01em;text-wrap:balance}
.btn{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;border:0;border-radius:12px;padding:12px;text-align:center;font:700 15px var(--body);cursor:pointer;text-decoration:none}
.btn.p{background:var(--b-p,var(--accent));color:var(--b-p-ink,#fff)}.btn.s{background:var(--b-s,var(--accent-soft));color:var(--b-s-ink,var(--accent))}
.btn.tg{background:var(--b-tg,var(--tg));color:var(--b-tg-ink,var(--tg-ink))}
.btn.chico{width:auto;padding:8px 14px;font-size:14px;border-radius:10px}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tit{font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:6px 2px -2px;display:flex;justify-content:space-between;align-items:baseline}
.tit span{font-weight:600;letter-spacing:0;text-transform:none;font-size:12.5px}
.chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.w{background:var(--warn-soft);color:var(--warn)}
.chip.vivo{background:var(--accent);color:#fff}
/* Una partida activa */
.act{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 10px;align-items:center}
.act .ilu{position:relative;grid-row:span 2;background:var(--ilu);border-radius:10px;width:52px;height:52px;display:grid;place-items:center}
.act .ilu svg,.act .ilu img{width:38px;height:38px}
.act b{font-family:var(--display);font-size:15.5px;line-height:1.2}
.act small{font-size:12.5px;color:var(--ink-soft);display:block}
.act .pie{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.act .pie .estado{font-size:13px;color:var(--ink-soft)}
/* La agenda */
.agenda{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ag{display:grid;grid-template-columns:52px 26px minmax(0,1fr);gap:8px;align-items:center;padding:9px 12px;border-top:1px solid var(--line)}
.ag:first-child{border-top:0}
.ag .h{font:500 14px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.ag svg,.ag img{width:24px;height:24px}
.ag b{font-size:14.5px;display:block;line-height:1.25}
.ag small{font-size:12.5px;color:var(--ink-soft)}
.ag.paso .h,.ag.paso b{color:var(--ink-faint)}
.dia{background:var(--surface-2);padding:6px 12px;font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border-top:1px solid var(--line)}
.agenda .dia:first-child{border-top:0}
/* Encabezado de la suite */
.hola{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hola .yo{display:flex;gap:10px;align-items:center;min-width:0}
.ava{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:700 16px var(--display);flex:none}
.hola b{font-family:var(--display);font-size:18px;display:block;line-height:1.15}
.hola small{font-size:12.5px;color:var(--ink-soft)}
.menu{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--ink-soft)}
.saldo{display:flex;justify-content:space-between;align-items:center;background:var(--barra);color:#fff;border-radius:14px;padding:12px 14px}
.saldo .n{font:700 24px var(--display);font-variant-numeric:tabular-nums}
.saldo small{display:block;font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:.06em}
.vacio{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:14px;text-align:center}
.vacio b{font-family:var(--display);font-size:16px;display:block;margin-bottom:2px}
.vacio p{margin:0;font-size:14px;color:var(--ink-soft)}
.mini{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px}
.mini .ilu{background:var(--ilu);border-radius:10px;width:44px;height:44px;display:grid;place-items:center}
.mini .ilu svg,.mini .ilu img{width:32px;height:32px}
.mini b{font-family:var(--display);font-size:15px;display:block}
.mini small{font-size:12.5px;color:var(--ink-soft)}
/* ===== La bienvenida (portada de venta) ===== */
.bv{display:flex;flex-direction:column;background:var(--surface)}
.hero{--ink:#FFFFFF;--ink-soft:#E9DEFA;position:relative;overflow:hidden;background:var(--plum);color:var(--ink);padding:22px 18px 22px;display:flex;flex-direction:column;gap:12px}
.hero-arte{position:relative;height:150px;margin:-4px -6px 0}
.hero-arte svg{position:absolute}
.flota{animation:flota 5s ease-in-out infinite}
.flota.b{animation-delay:-1.6s}.flota.c{animation-delay:-3.1s}
@keyframes flota{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-7px) rotate(var(--r,0deg))}}
.marca{font:800 46px/0.92 var(--display);letter-spacing:-.035em}
.marca span{display:block;color:var(--acento-titulo,var(--yellow))}
.hero p{margin:0;font-size:16px;line-height:1.4;color:var(--ink-soft);max-width:30ch}
.hero .btn.tg{padding:14px;font-size:16px;border-radius:14px;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.hero small{font-size:12.5px;color:var(--ink-soft);opacity:.85;text-align:center}
.cinta{display:flex;gap:6px;flex-wrap:wrap}
.cinta span{font:700 12px var(--body);background:color-mix(in srgb,var(--ink) 12%,transparent);border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:999px;padding:3px 10px}
.bv section.blq{background-size:cover;background-position:center;padding:22px 16px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line)}
.bv h2{font:800 25px/1.08 var(--display);letter-spacing:-.02em}
/* 🔴 La letra elegida va DESPUÉS del `font` de .bv h2: en el prototipo iba antes y el shorthand la pisaba, así que «Letra
   de los títulos» sólo cambiaba «CandyJuegos» aunque el panel dice «y los títulos de cada parte» (contexto/web-2a.md). */
.bv h2,.marca{font-family:var(--titulos,var(--display))}
.bv .sub{margin:-4px 0 0;font-size:14.5px;color:var(--ink-soft)}
.jg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jc,.pr,.datos div,.act,.agenda,.mini,.nov{--ink:#1F1A28;--ink-soft:#5F5870;color:var(--ink)}
.jc{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.jc .img{aspect-ratio:4/3;display:grid;place-items:center;max-width:100%;background-size:cover;background-position:center}
.jc .img svg,.jc .img img{width:58%;height:58%;filter:drop-shadow(0 6px 8px rgba(31,26,40,.18))}
.jc .img img{object-fit:contain}
.jc .tx{padding:9px 10px 11px;display:flex;flex-direction:column;gap:3px}
.jc b{font:700 15.5px/1.15 var(--display)}
.jc small{font-size:12.5px;line-height:1.35;color:var(--ink-soft)}
.jc.ancha{grid-column:1/-1;flex-direction:row}
.jc.ancha .img{aspect-ratio:auto;width:42%;flex:none}
.jc.ancha .tx{justify-content:center}
.jc .nuevo{align-self:flex-start;font:700 10.5px var(--body);letter-spacing:.06em;text-transform:uppercase;background:var(--b-nuevo,var(--yellow));color:var(--b-nuevo-ink,#1F1A28);border-radius:6px;padding:1px 6px}
.comu{background:var(--teal-soft)}
.comu .foto{border-radius:16px;overflow:hidden;aspect-ratio:4/3;max-width:100%;background:var(--teal)}
.comu .foto svg,.comu .foto img{width:100%;height:100%;display:block}
.comu .foto img{object-fit:cover}
.comu p{margin:0;font-size:15px;color:var(--ink)}
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.datos div{background:var(--surface);border-radius:12px;padding:8px;text-align:center}
.datos b{display:block;font:800 19px var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.datos small{font-size:11.5px;color:var(--ink-soft)}
.promos{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
.promos::-webkit-scrollbar{display:none}
.pr{flex:0 0 78%;scroll-snap-align:start;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.pr .img{aspect-ratio:16/9;position:relative;max-width:100%;background:var(--surface-2)}
.pr .img img{width:100%;height:100%;display:block;object-fit:cover}
.pr .vig{position:absolute;top:8px;left:8px;font:700 11px var(--body);background:var(--b-vig,#fff);color:var(--b-vig-ink,#1F1A28);border-radius:999px;padding:2px 8px}
.pr .tx{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.pr b{font:700 16px/1.15 var(--display)}
.pr p{margin:0;font-size:13.5px;color:var(--ink-soft);flex:1}
.puntos{display:flex;gap:5px;justify-content:center}
.puntos i{width:6px;height:6px;border-radius:50%;background:var(--line)}.puntos i.on{background:var(--accent);width:16px;border-radius:3px}
.cierre{background:var(--yellow-soft);text-align:center;align-items:center}
.cierre .btn{max-width:100%}
.pie-bv{padding:14px 16px 18px;font-size:12px;color:var(--ink-faint);text-align:center;border-top:1px solid var(--line)}
.novs{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.novs::-webkit-scrollbar{display:none}
.nov{flex:0 0 86%;scroll-snap-align:start;display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;text-decoration:none}
.nov .img{width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.nov .img img{width:100%;height:100%;display:block;object-fit:cover}
.nov b{font:700 14.5px/1.2 var(--display);display:block}
.nov small{font-size:12.5px;color:var(--ink-soft)}
.hoja{position:absolute;top:58px;right:12px;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(31,26,40,.18);display:flex;flex-direction:column;min-width:210px;overflow:hidden}
.hoja button,.hoja a{border:0;background:none;text-align:left;padding:12px 14px;font:600 14.5px var(--body);color:var(--ink);cursor:pointer;border-top:1px solid var(--line);text-decoration:none}
.hoja>:first-child{border-top:0}
.hoja button:hover,.hoja a:hover{background:var(--surface-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== Lo de la web (no está en el prototipo, que dibuja un teléfono de 340 px) ===== */
/* La página: una columna de teléfono, centrada. Más ancho que eso (una tablet, una compu) se ve la misma columna sobre
   el fondo de la página, como el prototipo en «Navegar» (su teléfono, centrado, de hasta 420 px). */
body[data-pantalla="bienvenida"]{background:var(--surface)}
body[data-pantalla="suite"]{background:var(--ground)}
.bv{max-width:480px;margin:0 auto;min-height:100vh;background:transparent}
.tbody{max-width:480px;margin:0 auto;padding:12px;background:transparent;display:flex;flex-direction:column;gap:10px;min-height:100vh;position:relative}
/* La imagen principal subida (1080 × 480) en el lugar de la ilustración de fábrica. */
.hero-arte img{display:block;width:100%;height:100%;object-fit:contain}
/* El botón oficial de Telegram, invisible, encima del nuestro: el que se ve es el del prototipo, el que se toca es el de
   Telegram (con data-auth-url, la vuelta es por redirección a GET /juegos/v1/web/entrar). web.js lo estira al tamaño. */
/* El envoltorio ocupa lo que ocupaba el botón en el prototipo: a lo ancho en la presentación y el cierre, y del tamaño
   del botón chico en una promoción (si no, el de Telegram, invisible, se tocaría también al lado del botón). */
.entrar{position:relative;align-self:stretch}
.pr .entrar{align-self:flex-start}
.tgw{position:absolute;inset:0;overflow:hidden;opacity:0;z-index:2}
.tgw iframe{transform-origin:0 0;border:0}
/* Los avisos de la bienvenida: no entró, salió, no disponible. Fondo blanco y texto oscuro sobre cualquier fondo. */
.aviso{--ink:#1F1A28;--ink-soft:#5F5870;background:var(--surface);color:var(--ink);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4;border-left:4px solid var(--warn)}
.aviso.bien{border-left-color:var(--ok)}
/* Lo de la suite que el prototipo no pinta con un fondo propio de la suite: también blanco con texto oscuro, como las
   tarjetas (si no, con «Texto: claro» quedaría blanco sobre blanco). */
.vacio,.hoja{--ink:#1F1A28;--ink-soft:#5F5870;color:var(--ink)}
/* Mientras carga, y si no carga. */
.cargando{min-height:60vh;display:grid;place-items:center;color:var(--ink-faint);font-size:14px}
.hero.cargando{min-height:420px}
/* El aviso de un toque (el botón de Telegram que no cargó), abajo, como el del prototipo. */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:min(440px,calc(100% - 32px));background:var(--barra);color:#fff;border-radius:14px;padding:12px 14px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:9}