/* Escenario claro, portada editorial y acceso en otro paso. */
html,body{background:#f8f7f2}
.fondo{background:radial-gradient(ellipse at 76% 42%,#e5e2fb 0%,#f3effa 34%,#f8f7f2 72%,#f8f7f2 100%)}
.fondo::before{background:none;opacity:1;inset:0;background:linear-gradient(125deg,transparent 42%,#ffffff06 42.1%,transparent 65%)}
.fondo::after{content:'';position:absolute;left:-20%;right:-20%;bottom:-52%;height:90%;border:1px solid #b3a3d730;border-radius:50%;box-shadow:0 -24px 0 -23px #b3a3d71a,0 -70px 0 -69px #b3a3d714;transform:rotate(-8deg)}
.fondo i{display:none}
/* Controles sueltos dentro del escenario. No hay franja ni marca superior. */
.barra,.trivia-host .barra{background:transparent;border:0;box-shadow:none;height:68px;padding:16px 24px;pointer-events:none}
.barra .izq,.barra .der{pointer-events:auto;flex:1}
.barra .icono{background:#ffffff12;color:#302747;border:1px solid #ffffff50;box-shadow:none;width:38px;height:38px}
.barra .icono:hover{background:#ffffff24}.barra .icono[aria-pressed=true]{color:#ffd682}
.barra .ronda-indice,.barra .chip{color:#302747}.barra .ronda-indice{font-size:15px}
.barra .puntos-chip{background:#b65336;color:#253477;border-color:transparent}
body[data-pantalla=puerta] .barra .izq,body[data-pantalla=ingreso] .barra .izq{visibility:hidden}
#puerta.on{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;align-items:center;gap:26px 10px;max-width:1260px;padding:90px 48px 40px;text-align:left;overflow-y:auto}
.bienvenida-texto{position:relative;z-index:2;padding:22px 0}
.bienvenida-categoria{font:700 14px/1.4 var(--f);letter-spacing:.16em;color:#655d85;margin:0 0 24px}
#puerta h1{font:800 clamp(48px,5.4vw,76px)/1.07 var(--display);letter-spacing:-.055em;color:#302747;margin:0 0 24px}
#puerta h1 em{color:#b65336;font-style:normal;text-shadow:none;white-space:nowrap}
#puerta h1 em::after{display:none}
.bienvenida-bajada{font:400 19px/1.65 var(--f);color:#59556d;margin:0 0 30px}
.bienvenida-estado{display:flex;align-items:center;gap:13px;color:#302747;margin-bottom:24px}
.estado-luz{width:11px;height:11px;border-radius:50%;background:#b9c7ef;box-shadow:0 0 0 6px #ffffff0a;flex-shrink:0}
.hay-vivo .estado-luz{background:#8ff1ca;box-shadow:0 0 0 6px #8ff1ca19}
.bienvenida-estado strong{font-size:16px;line-height:1.5;font-weight:600}
.bienvenida-estado p{font-size:15px;line-height:1.5;color:#686278;margin-top:3px}
.bienvenida-cta{width:auto;min-width:260px;background:#b65336;color:#24316d;border:1px solid #ffe7b4;box-shadow:0 6px 0 #102062,0 12px 30px #09154d33;border-radius:15px;font-size:19px;padding:18px 27px}
.bienvenida-cta:hover{background:#ffe3a7;box-shadow:0 8px 0 #102062;color:#24316d}
.bienvenida-nota{font-size:14px;color:#686278;margin:17px 0 0}
.bienvenida-arte{position:relative;align-self:center;min-width:0;isolation:isolate}
.bienvenida-arte img{position:relative;z-index:1;width:118%;max-width:none;margin-left:-8%;height:auto;display:block;filter:drop-shadow(0 24px 24px #88759a29)}
.escenario-halo{position:absolute;inset:15% 0 4%;border-radius:50%;background:radial-gradient(ellipse,#b4b9ff55,transparent 68%);transform:rotate(-12deg);z-index:0}
.orbita-estrella{position:absolute;right:0;top:5%;color:#b65336;font-size:50px;transform:rotate(15deg)}
.arte-acento{position:absolute;left:10%;bottom:0;color:#9483c7;font:800 56px/1 var(--display);transform:rotate(-18deg)}
.bienvenida-pasos{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#625b78;border-top:1px solid #625b782b;padding:23px 0 0;font-size:15px}
.bienvenida-pasos span{display:flex;align-items:center;gap:13px}.bienvenida-pasos b{font-size:13px;color:#7663a9}
/* Segunda pantalla; no se cargan formularios sobre la portada. */
#ingreso.on{display:flex;overflow-y:auto;justify-content:flex-start;align-items:center;max-width:680px;padding:84px 28px 50px;gap:20px}
.volver-portada{align-self:flex-start;color:#514775;font-size:16px;padding:9px 0;min-height:44px}
.ingreso-intro{text-align:center;color:#302747;margin-bottom:10px}
.ingreso-intro .bienvenida-categoria{font-size:13px;margin-bottom:12px}
.ingreso-intro h2{font:800 38px/1.15 var(--display);letter-spacing:-.04em;color:#302747;margin-bottom:13px}
.ingreso-intro p:last-child{font-size:17px;line-height:1.6;color:#625b78}
#ingreso .entrada-panel{max-width:440px;border:1px solid #d8d9ee;border-radius:24px;box-shadow:0 18px 60px #83739521;padding:28px;background:#fffdf7}
#ingreso .entrada-panel::before{display:none}
#ingreso .panel-encabezado{display:none}
#ingreso .modo-aviso{margin-top:0}
#ingreso .boton{background:#324aa3;color:#302747;border-color:#243679;box-shadow:0 4px 0 #172b6b}
#ingreso .boton:hover{background:#4059b5}
#ingreso .apodo[aria-pressed=true]{background:#e4eaff;box-shadow:none;border-color:#4256ac;transform:none}
#ingreso .fig[aria-pressed=true]{outline-color:#6579c8}
/* Legibilidad sobre el nuevo escenario durante la partida. */
#espera h2,.espera-sub,.marcador-yo{color:#302747}.marcador-yo b{color:#b65336}
#final .logo,#final .sub{color:#514775}.puntazo{color:#b65336;text-shadow:none}
#repaso h2{color:#302747}.espera-cuenta{color:#b65336;text-shadow:none}
.sello-practica{background:#233b91;color:#d9e0f8;border-color:#7183bc;top:73px;bottom:auto;height:auto;pointer-events:none}
.trivia-host .logo-grande,.trivia-host .host-dupla,.trivia-host .marca-vivo{color:#302747}
.trivia-host .logo-grande em,.trivia-host .marca-vivo em{color:#b65336}
@media(min-width:900px) and (max-height:760px){#puerta.on{padding-top:75px;padding-bottom:28px;gap:12px}#puerta h1{font-size:62px}.bienvenida-categoria{margin-bottom:18px}.bienvenida-bajada{margin-bottom:22px}.bienvenida-texto{padding:8px 0}.bienvenida-pasos{padding-top:17px}}
@media(max-width:899px){#puerta.on{grid-template-columns:1fr;grid-template-rows:auto auto auto;display:grid;align-items:start;gap:10px;max-width:620px;padding:83px 26px 30px}.bienvenida-texto{padding:0}#puerta h1{font-size:clamp(38px,8.4vw,58px);line-height:1.1;margin-bottom:18px}.bienvenida-categoria{font-size:12px;margin-bottom:18px}.bienvenida-bajada{font-size:17px;line-height:1.6;margin-bottom:24px}.bienvenida-arte{grid-row:2;width:100%;max-width:400px;margin:10px auto 0}.bienvenida-arte img{width:100%;margin:0}.orbita-estrella{font-size:34px;right:6%}.arte-acento{font-size:36px;left:4%}.bienvenida-pasos{grid-column:1;gap:12px;align-items:start;font-size:14px;margin-top:15px}.bienvenida-pasos span{flex:1;flex-direction:column;align-items:flex-start;gap:7px}.bienvenida-cta{font-size:18px;width:100%;min-width:0}.bienvenida-estado{margin-bottom:22px}.bienvenida-estado strong{font-size:16px}.bienvenida-nota{font-size:14px}.barra{height:66px;padding:14px 20px}.barra .der{gap:9px}.barra .icono{width:36px;height:36px}#ingreso.on{padding:76px 23px 40px;gap:18px}#ingreso .entrada-panel{padding:25px 21px}.ingreso-intro h2{font-size:32px}.ingreso-intro p:last-child{font-size:16px}.ingreso-intro .bienvenida-categoria{font-size:12px}}
@media(max-width:360px){#puerta.on{padding-left:20px;padding-right:20px}#puerta h1{font-size:36px}.bienvenida-bajada br{display:none}}
/* El scroll de bienvenida/ingreso pertenece al documento, no a una tarjeta. */
html:has(body[data-pantalla="puerta"]),
html:has(body[data-pantalla="ingreso"]) {
  height: auto;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
}
body[data-pantalla="puerta"],
body[data-pantalla="ingreso"] {
  height: auto;
  min-height: 100svh;
  overflow: visible;
}
#puerta.on, #ingreso.on {
  position: relative;
  inset: auto;
  min-height: 100svh;
  height: auto;
  overflow: visible;
  overscroll-behavior: auto;
}
body[data-pantalla="puerta"] .barra,
body[data-pantalla="ingreso"] .barra {
  position: absolute;
}

/* Controles compactos y superficie clara. */
.bienvenida-cta{background:#ffce74;color:#302747;border-color:#e6b45c;box-shadow:0 5px 0 #d6aa62,0 12px 28px #ac85441a}
.bienvenida-cta:hover{background:#ffdb98;color:#302747;box-shadow:0 6px 0 #d6aa62}
.estado-luz{background:#9388ad;box-shadow:0 0 0 5px #9388ad12}
.hay-vivo .estado-luz{background:#278769;box-shadow:0 0 0 5px #27876915}
#ingreso .boton{color:#fff}
.sello-practica{background:#eee9fa;color:#5b4c7d;border-color:#cec3e6}
.barra .puntos-chip{background:#ffda88;color:#302747}
.menu-juego{position:relative;pointer-events:auto}
.menu-juego-trigger{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 13px;border:1px solid #dcd5e7;border-radius:14px;background:#fffdf9;color:#45375e;font:600 14px/1 var(--f);cursor:pointer;box-shadow:0 3px 10px #57437408}
.menu-juego-trigger svg{width:19px;height:19px}
.menu-juego-trigger:hover,.menu-juego-trigger[aria-expanded=true]{background:#eee9fa;border-color:#b7a7d0}
.menu-juego-panel{position:absolute;right:0;top:calc(100% + 9px);width:238px;padding:8px;background:#fffdf9;border:1px solid #ded6e9;border-radius:18px;box-shadow:0 12px 40px #41305c24}
.menu-juego-panel[hidden]{display:none}
.barra .menu-juego-panel .icono{display:flex;position:relative;align-items:center;gap:12px;width:100%;height:auto;min-height:48px;padding:12px;border:0;border-radius:11px;background:transparent;color:#45375e;font:600 15px/1.4 var(--f);box-shadow:none;text-align:left;opacity:1!important;aspect-ratio:auto}
.barra .menu-juego-panel .icono[hidden]{display:none}
.barra .menu-juego-panel .icono:hover{background:#f0ebf8}
.barra .menu-juego-panel .icono svg{width:20px;height:20px;flex-shrink:0}
.barra .menu-juego-panel .icono .sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;margin:0}
.barra .menu-juego-panel .icono[aria-pressed=true]::after{display:none}
.menu-juego-trigger:focus-visible,.menu-juego-panel button:focus-visible{outline:3px solid #8e79b9;outline-offset:3px}
@media(max-width:767px){.menu-juego-trigger{padding:0;width:44px}.menu-juego-trigger span{display:none}.menu-juego-panel #b-pantalla{display:none}}