/* ===========================================================================
   Juegos del Comité Paritario · sistema visual "cartel de juego nocturno"
   Réplica del lenguaje de los mockups de referencia (tmp/referencias/):
   fondo azul-noche con garabatos, tipografía burbuja (Baloo 2) en blanco y
   naranjo, botones 3D brillantes con canto inferior, píldoras de HUD,
   tarjetas de respuesta con halo naranjo y celebraciones con confeti.
   Tipografías auto-hospedadas: Baloo 2 (display) + Nunito (cuerpo).
   =========================================================================== */

@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/Baloo2-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/fonts/Baloo2-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/Nunito-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/Nunito-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/fonts/Nunito-900.woff2') format('woff2');
}

:root {
  --naranja: #F97316;
  --naranja-claro: #FFA24D;
  --naranja-brillo: #FFB765;
  --naranja-hondo: #C2410C;       /* canto 3D de los botones */
  --noche: #0B121D;
  --noche-2: #0E1725;
  --tarjeta: #131C2B;
  --tarjeta-2: #1A2536;
  --borde: #273349;
  --borde-claro: #34435E;
  --tinta: #FFFFFF;
  --tinta-2: #93A3B8;
  --verde: #58C838;
  --verde-hondo: #35801C;
  --rojo: #E8483F;
  --rojo-hondo: #A32620;
  --ambar: #F59E0B;
  --azul: #6AA8FF;
  --radio: 24px;
  --burbuja: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --cuerpo: 'Nunito', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }
body {
  margin: 0;
  font: 16.5px/1.5 var(--cuerpo);
  font-weight: 700;
  color: var(--tinta);
  background: var(--noche);
  -webkit-font-smoothing: antialiased;
}
/* garabatos del cartel: estrellas, cruces y trazos punteados muy tenues */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; opacity: .7; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%23222F44' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M40 120 q60 -54 124 -12' stroke-dasharray='9 12'/%3E%3Cpath d='M300 60 l10 22 24 3 -17 17 4 24 -21 -11 -21 11 4 -24 -17 -17 24 -3 z'/%3E%3Cpath d='M90 330 h24 M102 318 v24'/%3E%3Ccircle cx='382' cy='300' r='8'/%3E%3Cpath d='M420 430 q-60 24 -120 0' stroke-dasharray='8 11'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F97316' stroke-opacity='.28' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M236 196 l10 -10 M252 196 l-10 -10'/%3E%3Cpath d='M150 40 h16 M158 32 v16'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 480px 480px;
}
/* trama de puntos naranja en las esquinas, como en el cartel */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(#F9731626 1.6px, transparent 2.2px) 0 0 / 22px 22px;
  -webkit-mask-image:
    radial-gradient(340px at 100% 0%, #000, transparent 72%),
    radial-gradient(340px at 0% 100%, #000, transparent 72%);
  mask-image:
    radial-gradient(340px at 100% 0%, #000, transparent 72%),
    radial-gradient(340px at 0% 100%, #000, transparent 72%);
}

#app {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; justify-content: safe center;
  padding: clamp(.8rem, 3vw, 2rem);
}

h1, h2 { font-family: var(--burbuja); font-weight: 800; margin: 0 0 .5rem; }
h1 { font-size: clamp(2.1rem, 7vw, 2.9rem); line-height: 1.05; }
h2 { font-size: 1.5rem; }
p { margin: 0 0 .8rem; }
small { font-size: .82rem; }
.cargando, .suave { color: var(--tinta-2); }
.oculto { display: none !important; }

button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 3px solid var(--naranja-brillo); outline-offset: 2px; }

/* ---------- título burbuja ---------- */

.titulo-juego {
  font-family: var(--burbuja); font-weight: 800; text-align: center;
  font-size: clamp(3.6rem, 17vw, 5.6rem); line-height: .84;
  margin: .2rem 0 .8rem; transform: rotate(-2deg);
}
.titulo-juego span { display: block; }
.titulo-juego .t-a {
  color: #fff;
  text-shadow:
    4px 0 0 #0A1220, -4px 0 0 #0A1220, 0 5px 0 #0A1220, 0 -4px 0 #0A1220,
    3px 4px 0 #0A1220, -3px 4px 0 #0A1220, 3px -3px 0 #0A1220, -3px -3px 0 #0A1220,
    0 14px 30px #000000AA;
}
.titulo-juego .t-b {
  color: var(--naranja);
  font-size: 1.14em;
  text-shadow:
    4px 0 0 #0A1220, -4px 0 0 #0A1220, 0 5px 0 #0A1220, 0 -4px 0 #0A1220,
    3px 4px 0 #0A1220, -3px 4px 0 #0A1220, 3px -3px 0 #0A1220, -3px -3px 0 #0A1220,
    0 16px 40px #F9731660;
}
.titulo-juego.chico { font-size: clamp(2.5rem, 11vw, 3.4rem); margin-bottom: .5rem; }
.bajada {
  color: var(--tinta); font-weight: 800; font-size: 1.05rem;
  margin: 0 0 1rem; text-wrap: balance;
}
.bajada em { font-style: normal; color: var(--naranja-claro); }

/* ---------- tarjeta central ---------- */

.panel {
  position: relative;
  width: min(680px, 100%);
  background: linear-gradient(180deg, var(--tarjeta), #101927);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(1.3rem, 4vw, 2.1rem);
  box-shadow: 0 22px 60px #00000066;
  animation: entrar .3s ease-out;
}
@keyframes entrar { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* pantallas-cartel: el contenido flota directo sobre el fondo, sin caja */
.panel.hogar, .panel#carta {
  background: transparent; border: 0; box-shadow: none; padding: .2rem 0 0;
}
.panel.hogar { width: min(560px, 100%); }
/* en la final, el título y la cinta van sobre el borde de la tarjeta */
.panel.cartel { margin-top: 1rem; }
.panel.cartel .titulo-juego.chico { margin-top: -1.2rem; }

/* ---------- botones 3D ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border: 0; border-radius: 20px; padding: .85rem 1.8rem;
  font-family: var(--burbuja); font-weight: 800; font-size: 1.25rem;
  text-decoration: none; line-height: 1.15;
  background: var(--tarjeta-2); color: var(--tinta);
  border: 2px solid var(--borde-claro);
  transition: transform .08s, filter .15s, border-color .15s, box-shadow .08s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(3px); }
.btn.lima {
  background: linear-gradient(180deg, var(--naranja-claro), var(--naranja) 60%);
  color: #fff; border: 0;
  text-shadow: 0 2px 0 #B4470E66;
  box-shadow: 0 6px 0 var(--naranja-hondo), 0 16px 34px #F9731638, inset 0 2px 0 #FFD3A6;
}
.btn.lima:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--naranja-hondo), inset 0 2px 0 #FFD3A6; }
.btn.grande { width: 100%; padding: 1.05rem; font-size: 1.9rem; letter-spacing: .04em; }
.btn.grande::before, .btn.grande::after { content: '✦'; font-size: .55em; opacity: .85; }
.btn.borde { background: var(--tarjeta); }
.btn.borde:hover { border-color: var(--naranja); filter: none; }
.btn.chico { font-size: .95rem; padding: .45rem 1.1rem; border-radius: 14px; }
.enlace {
  border: 0; background: none; color: var(--tinta-2); text-decoration: underline;
  font-family: var(--cuerpo); font-weight: 700; font-size: .88rem; padding: .3rem;
}

/* ---------- ingreso / portada ---------- */

/* pie de cartel: contexto + logos con presencia. Es hermano del panel dentro
   de #app y se ancla al borde inferior de la pantalla (el panel reparte con
   margin-block:auto el espacio que queda arriba). */
.pie-cartel {
  width: min(1080px, 100%); text-align: center;
  margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 2px dashed var(--borde-claro);
}
.panel.hogar { margin-block: auto; }
.pie-cartel .pie-fuentes { margin: 0 auto .9rem; max-width: 62ch; }
.logos {
  display: flex; align-items: center; justify-content: center; gap: 1.8rem;
  flex-wrap: wrap;
}
.logos a { display: inline-flex; border-radius: 16px; transition: transform .12s, filter .15s; }
.logos a:hover { transform: translateY(-2px); filter: brightness(1.12); }
.logo-flagare { height: 76px; width: auto; }
.logo-chip {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 16px; padding: .6rem 1.1rem;
}
.logo-chip img { height: 46px; width: auto; display: block; }
.salir-linea { margin: .7rem 0 0; }
.panel.hogar { width: min(560px, 100%); }

.chips-info {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.1rem;
}
.chips-info span {
  font-weight: 900; font-size: .88rem; color: var(--tinta);
  border: 2px solid var(--borde-claro); border-radius: 14px; padding: .42rem .8rem;
  background: var(--tarjeta-2);
}
.hero {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 2px solid var(--borde-claro); aspect-ratio: 420 / 260; background: #13222F;
  box-shadow: 0 12px 34px #00000052;
}
/* Barra de la pantalla puente al abrir un reto */
.panel.hogar.cargando { width: min(460px, 100%); margin-block: auto; }
.barra-carga {
  height: 14px; margin: 1.2rem auto .5rem; width: min(340px, 100%);
  background: var(--tarjeta); border: 2px solid var(--borde-claro);
  border-radius: 999px; overflow: hidden;
}
.barra-carga-relleno {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--naranja-claro), var(--naranja));
  border-radius: 999px; transition: width .25s ease;
}
/* Hasta que llega la primera imagen no hay porcentaje que mostrar: un barrido
   dice "estoy trabajando" en vez de una barra vacía y quieta. */
.barra-carga.indeterminada .barra-carga-relleno {
  width: 40%; transition: none; animation: barra-va 1.1s ease-in-out infinite;
}
@keyframes barra-va {
  from { margin-left: -40%; }
  to { margin-left: 100%; }
}

/* Marco de la foto del equipo: su proporción exacta, para que no recorte a
   nadie de los extremos (con object-fit: cover y la misma razón, no hay corte). */
.hero.panoramica { aspect-ratio: 1020 / 275; }
.hero.panoramica .hero-capa img { object-position: center; }
.hero-capa { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.hero-capa.visible { opacity: 1; }
.hero-capa svg, .hero-capa img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
.hero-tag {
  position: absolute; left: 10px; bottom: 10px;
  background: #0B121DF0; color: #fff;
  font-weight: 900; font-size: .82rem;
  border: 2px solid var(--borde-claro); border-radius: 999px; padding: .32rem .8rem;
}
/* insignia del reto vigente */
.reto-mes {
  display: inline-block; margin: -.2rem auto .8rem;
  font-weight: 900; font-size: .92rem; color: var(--tinta);
  background: var(--tarjeta); border: 2px solid var(--borde-claro);
  border-radius: 999px; padding: .4rem 1rem;
}
.reto-mes b { color: var(--naranja-claro); }
.reto-mes em { font-style: normal; color: var(--tinta-2); }

/* ---------- bienvenida: cómo funciona ---------- */

.pasos {
  display: grid; gap: .55rem; text-align: left;
  margin: 1.1rem 0 1.2rem;
}
.paso {
  display: flex; align-items: center; gap: .8rem;
  background: var(--tarjeta); border: 2px solid var(--borde);
  border-radius: 16px; padding: .65rem .9rem;
  font-size: .92rem; font-weight: 700; color: var(--tinta-2); line-height: 1.4;
}
.paso i {
  font-style: normal; font-size: 1.3rem; flex: none;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--tarjeta-2); border: 2px solid var(--borde-claro); border-radius: 50%;
}
.paso b { color: var(--tinta); }
.nota-nombre {
  margin: .6rem 0 0; font-size: .82rem; font-weight: 700; color: var(--tinta-2);
}

/* ---------- galería de retos: una tarjeta grande por mes ---------- */

.galeria {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem;
  margin: .4rem 0 1rem; width: 100%;
}
.carta-reto {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .15rem; padding: 1rem .8rem 1.1rem;
  background: linear-gradient(180deg, var(--tarjeta), #101927);
  border: 2px solid var(--borde); border-radius: 20px;
  font-family: var(--cuerpo); text-align: center; color: var(--tinta);
  overflow: hidden;
}
button.carta-reto {
  cursor: pointer; border-color: #F9731659;
  box-shadow: 0 0 16px #F9731614;
  transition: transform .1s, border-color .15s, box-shadow .15s;
}
button.carta-reto:hover {
  border-color: var(--naranja); box-shadow: 0 0 26px #F973163d; transform: translateY(-3px);
}
button.carta-reto:active { transform: scale(.98); }
.carta-reto.activo {
  border-color: var(--naranja);
  box-shadow: 0 0 30px #F9731640;
}
.cr-img {
  width: 100%; aspect-ratio: 5 / 3; object-fit: cover; object-position: center 30%;
  border-radius: 12px; background: #13222F; margin-bottom: .55rem;
}
.cr-mes {
  font-weight: 900; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--naranja-claro);
}
.carta-reto.pronto .cr-mes { color: var(--tinta-2); }
.cr-tema {
  font-family: var(--burbuja); font-weight: 800; font-size: 1.15rem; line-height: 1.15;
  text-wrap: balance;
}
.cr-badge {
  margin-top: .55rem; font-size: .74rem; font-weight: 900;
  border-radius: 999px; padding: .26rem .7rem;
  background: var(--tarjeta-2); border: 2px solid var(--borde-claro); color: var(--tinta-2);
}
.carta-reto.activo .cr-badge {
  background: linear-gradient(180deg, var(--naranja-claro), var(--naranja) 65%);
  border: 0; color: #fff; text-shadow: 0 1px 0 #B4470E66;
  box-shadow: 0 3px 0 var(--naranja-hondo);
}
.carta-reto.pronto {
  justify-content: center; min-height: 128px;
  border-style: dashed; opacity: .65; color: var(--tinta-2);
}
.carta-reto.pronto .cr-tema { font-size: 1rem; color: var(--tinta-2); }
.cr-cand { font-size: 1.5rem; margin-bottom: .2rem; filter: grayscale(.4); }

/* ---------- ficha del reto ---------- */

.volver-linea { margin: 0 0 .7rem; text-align: left; }
.descripcion-reto {
  font-size: .95rem; font-weight: 700; color: var(--tinta-2); line-height: 1.5;
  margin: 1rem 0 .9rem; text-wrap: pretty;
}
.como-se-juega {
  font-size: .88rem; font-weight: 700; color: var(--tinta-2);
  margin: 0 0 .4rem;
}
.como-se-juega b { color: var(--naranja-claro); }

/* aire entre los componentes de la ficha (el título burbuja lleva sombras
   grandes y con márgenes chicos se ve encimado) */
.ficha .volver-linea { margin-bottom: 1rem; }
.ficha .reto-mes { margin-bottom: 1rem; }
.ficha .titulo-juego.chico { line-height: .95; margin: 0 0 .7rem; }
.ficha .bajada { margin-bottom: 1.1rem; }
.ficha .descripcion-reto { margin: 1.2rem 0 1.1rem; }
.ficha .chips-info { margin-bottom: 1.1rem; }
.ficha .como-se-juega { margin-bottom: 1rem; }
.ficha .medallero.tarjeta { margin: 1.1rem auto 1rem; }
.ficha .comunidad { margin: .9rem 0 1.1rem; }

/* selector de mes en el ranking */
.meses { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin: .2rem 0 1rem; }
.mes-chip {
  font-family: var(--burbuja); font-weight: 600; font-size: 1rem;
  background: var(--tarjeta); color: var(--tinta-2);
  border: 2px solid var(--borde-claro); border-radius: 12px; padding: .32rem .8rem;
}
.mes-chip.activo { color: #fff; border-color: var(--naranja); background: #F9731626; }
.mes-chip:hover { border-color: var(--naranja); }

.comunidad { color: var(--tinta-2); font-size: .9rem; margin: .9rem 0; }
.comunidad strong { color: var(--naranja-claro); }
.form-fila { display: flex; gap: .6rem; }
.form-fila input { flex: 1; min-width: 0; }
.form-fila .btn { flex: none; white-space: nowrap; }

.logo-zap {
  width: 72px; height: 72px; border-radius: 22px; font-size: 38px;
  display: grid; place-items: center; margin: 0 auto 1rem;
  background: linear-gradient(180deg, var(--naranja-claro), var(--naranja));
  box-shadow: 0 5px 0 var(--naranja-hondo), 0 14px 34px #F9731650;
}
.centrado { text-align: center; }
label {
  display: block; text-align: left; font-weight: 900; font-size: .85rem;
  margin: .9rem 0 .3rem; color: var(--tinta-2);
}
input[type=text], select {
  width: 100%; font: inherit; font-weight: 700; padding: .95rem 1.3rem;
  border: 0; border-radius: 999px;
  background: #FFFFFF; color: #1E293B;
  box-shadow: inset 0 2px 6px #0000001f, 0 4px 16px #00000030;
}
input[type=text]::placeholder { color: #94A3B8; }
input[type=text]:focus, select:focus { outline: 3px solid var(--naranja); }
.check {
  display: flex; gap: .55rem; align-items: flex-start; text-align: left;
  font-size: .85rem; color: var(--tinta-2); margin-top: .9rem; font-weight: 700;
}
.check input { margin-top: .2rem; accent-color: var(--naranja); width: 17px; height: 17px; }
.error { color: var(--rojo); font-weight: 900; font-size: .9rem; }

/* ---------- HUD: píldoras de juego ---------- */

.hud {
  width: min(680px, 100%);
  display: flex; align-items: center; gap: .55rem;
  padding: 0 0 .8rem;
}
.hud-num {
  font-family: var(--burbuja); font-weight: 800; font-size: 1.35rem; line-height: 1;
  color: #fff; white-space: nowrap;
  background: var(--tarjeta); border: 2px solid var(--borde-claro);
  border-radius: 16px; padding: .42rem .75rem;
}
.hud-num i { font-style: normal; color: var(--naranja); font-size: .78em; }
.reloj {
  flex: 1; min-width: 60px; display: flex; align-items: center; gap: .45rem;
  background: var(--tarjeta); border: 2px solid var(--borde-claro);
  border-radius: 999px; padding: .38rem .6rem;
}
.reloj-ico {
  font-size: 1rem; line-height: 1;
  filter: sepia(1) saturate(5) hue-rotate(-18deg) brightness(1.15);
}
.reloj .pista {
  flex: 1; height: 15px; border-radius: 99px; background: var(--noche);
  overflow: hidden; box-shadow: inset 0 2px 4px #00000066;
}
.reloj i {
  display: block; height: 100%; width: 100%; border-radius: 99px;
  background: linear-gradient(180deg, var(--naranja-brillo), var(--naranja) 70%);
  box-shadow: inset 0 2px 0 #FFD9AE;
  transform-origin: left;
}
.reloj.apuro i { background: linear-gradient(180deg, #FF8A6B, var(--rojo) 70%); box-shadow: inset 0 2px 0 #FFC2B0; }
.hud-pts {
  font-family: var(--burbuja); font-weight: 800; font-size: 1.15rem; line-height: 1;
  white-space: nowrap; color: #fff;
  background: var(--tarjeta); border: 2px solid var(--borde-claro);
  border-radius: 999px; padding: .48rem .8rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-variant-numeric: tabular-nums;
}
.hud-pts b { color: var(--ambar); font-size: 1.05em; }
.hud-pts i { font-style: normal; color: var(--naranja); font-size: .8em; }
.racha {
  font-family: var(--burbuja); font-weight: 800; font-size: 1.05rem; white-space: nowrap;
  color: var(--naranja-brillo); opacity: 0; transition: opacity .2s;
}
.racha.viva { opacity: 1; animation: latir .5s ease-out; }
@keyframes latir { 30% { transform: scale(1.25); } }

.mudo {
  border: 0; background: transparent; font-size: 1.1rem;
  padding: .1rem .2rem; line-height: 1; opacity: .75;
}
.mudo:hover { opacity: 1; }
/* botón de sonido flotante en las pantallas sin HUD */
.mudo.flotante {
  position: fixed; right: 14px; bottom: 14px; z-index: 20;
  width: 46px; height: 46px; font-size: 1.25rem; padding: 0;
  display: grid; place-items: center;
  background: var(--tarjeta); border: 2px solid var(--borde-claro);
  border-radius: 50%; opacity: .9;
}
.mudo.flotante:hover { border-color: var(--naranja); opacity: 1; }

.puntos { display: flex; gap: .38rem; justify-content: center; padding: .85rem 0 0; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: #26334A; }
.punto.ok { background: var(--verde); }
.punto.mal { background: var(--rojo); }
.punto.ahora { background: #fff; transform: scale(1.25); }

/* ---------- cartas ---------- */

/* la pregunta es un globo de diálogo con cola */
.carta-texto {
  position: relative;
  font-family: var(--burbuja); font-weight: 800;
  font-size: clamp(1.45rem, 4.6vw, 1.9rem); line-height: 1.18;
  text-align: center; text-wrap: balance;
  background: var(--noche-2); border: 2px solid var(--borde);
  border-radius: 18px; padding: 1.1rem 1.2rem;
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 0 #060B1366;
}
.carta-texto::after {
  content: ''; position: absolute; left: 50%; bottom: -9px;
  width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg);
  background: var(--noche-2);
  border-right: 2px solid var(--borde); border-bottom: 2px solid var(--borde);
}
.carta-sub { text-align: center; color: var(--tinta-2); font-weight: 700; margin: -1rem 0 1.2rem; font-size: .9rem; }

.par-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.btn-vf {
  border: 0; border-radius: 20px; padding: 1.15rem .8rem;
  font-family: var(--burbuja); font-size: 1.6rem; font-weight: 800; color: #fff;
  text-shadow: 0 2px 0 #00000033;
  transition: transform .08s, filter .15s, box-shadow .08s;
}
.btn-vf:hover { filter: brightness(1.08); }
.btn-vf.v {
  background: linear-gradient(180deg, #74D64B, var(--verde) 65%);
  box-shadow: 0 6px 0 var(--verde-hondo), inset 0 2px 0 #C0F3A6;
}
.btn-vf.f {
  background: linear-gradient(180deg, #F2837B, var(--rojo) 65%);
  box-shadow: 0 6px 0 var(--rojo-hondo), inset 0 2px 0 #FFC9C4;
}
.btn-vf:active { transform: translateY(4px); }
.btn-vf.v:active { box-shadow: 0 1px 0 var(--verde-hondo), inset 0 2px 0 #C0F3A6; }
.btn-vf.f:active { box-shadow: 0 1px 0 var(--rojo-hondo), inset 0 2px 0 #FFC9C4; }

.opciones { display: grid; gap: .75rem; }
.btn-opcion {
  border: 2px solid #F9731659; border-radius: 20px; padding: 1rem .9rem;
  background: var(--tarjeta);
  font-family: var(--burbuja); font-weight: 800; font-size: 1.35rem; color: #fff;
  text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 16px #F9731614;
  transition: transform .08s, border-color .15s, box-shadow .15s;
}
.btn-opcion:hover {
  border-color: var(--naranja); box-shadow: 0 0 24px #F973163d; transform: translateY(-2px);
}
.btn-opcion:active { transform: scale(.98); }

/* Alternativas ilustradas: filas imagen + texto + chevrón, como el mockup */
.opciones:has(.opcion-img) { grid-template-columns: 1fr; gap: .9rem; }
.opciones:has(.opcion-img) .btn-opcion {
  display: grid; grid-template-columns: minmax(104px, 148px) 1fr 1.3rem;
  align-items: center; gap: 1.1rem; text-align: left;
  padding: .6rem 1rem .6rem .6rem;
  font-size: 1.6rem;
  border-color: #F97316A0;
  box-shadow: 0 0 22px #F973162e;
}
.opciones:has(.opcion-img) .btn-opcion::after {
  content: '›'; font-family: var(--burbuja); font-weight: 800;
  color: var(--naranja); font-size: 1.5em; line-height: 1;
}
.opcion-img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 14px; margin: 0; background: #13222F;
}

.par-escenas { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.escena-btn {
  border: 2px solid #F9731659; border-radius: 20px; padding: 0; overflow: hidden;
  background: #13222F; box-shadow: 0 0 16px #F9731614;
  transition: transform .08s, border-color .15s, box-shadow .15s;
}
.escena-btn:hover { border-color: var(--naranja); box-shadow: 0 0 24px #F973163d; transform: translateY(-2px); }
.escena-btn:active { transform: scale(.98); }
.escena-btn svg, .escena-btn img { display: block; width: 100%; height: auto; }
/* reserva el espacio de la ilustración antes de que cargue: nada salta */
.escena-img { aspect-ratio: 1; background: #13222F; }
.escena-btn .tag {
  display: block; padding: .32rem;
  font-family: var(--burbuja); font-weight: 800; font-size: 1.05rem;
  background: var(--tarjeta-2); color: var(--naranja-brillo);
  border-top: 2px solid var(--borde);
}

.escena-toca {
  border: 2px solid #F9731659; border-radius: 20px; overflow: hidden;
  background: #13222F; cursor: crosshair; position: relative;
  box-shadow: 0 0 16px #F9731614;
}
.escena-toca svg, .escena-toca img { display: block; width: 100%; height: auto; }
.marca-zona {
  position: absolute; transform: translate(-50%, -50%);
  border: 3px solid var(--verde); border-radius: 50%;
  background: #58C83826; pointer-events: none;
  animation: entrar .25s ease-out;
}

/* ---------- cuenta regresiva ---------- */

.velo.cuenta { background: #0B121DF2; }
.cuenta-num {
  font-family: var(--burbuja); font-weight: 800;
  font-size: clamp(6rem, 30vw, 11rem); color: #fff;
  text-shadow: 0 .05em 0 #7C2D12, 0 14px 60px #F97316AA;
}
.cuenta-num.anim { animation: cuentaPop .62s ease-out; }
@keyframes cuentaPop {
  0% { transform: scale(1.7); opacity: 0; }
  35% { transform: scale(1); opacity: 1; }
}

/* ---------- veredicto ---------- */

.velo {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: #0B121DD6; backdrop-filter: blur(3px);
  animation: velo .18s ease-out; z-index: 30; padding: 1rem;
}
@keyframes velo { from { opacity: 0; } }
.veredicto {
  position: relative; width: min(540px, 100%); text-align: center;
  background: linear-gradient(180deg, var(--tarjeta), #101927);
  border-radius: 26px; padding: 0 1.4rem 1.6rem;
  border: 3px solid var(--verde);
  margin-top: 53px;
  box-shadow: 0 0 44px #58C83833, 0 24px 60px #00000080;
  animation: pop .25s cubic-bezier(.2, 1.6, .4, 1);
}
.veredicto.mal {
  border-color: var(--rojo);
  box-shadow: 0 0 44px #E8483F33, 0 24px 60px #00000080;
  animation: pop .25s cubic-bezier(.2, 1.6, .4, 1), sacudir .45s ease-out .12s;
}
/* confeti pintado dentro del modal */
.veredicto::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 23px;
  background:
    radial-gradient(5px 5px at 12% 14%, var(--ambar) 98%, transparent),
    radial-gradient(4px 4px at 88% 12%, #2DD4BF 98%, transparent),
    radial-gradient(4px 4px at 8% 52%, var(--naranja) 98%, transparent),
    radial-gradient(5px 5px at 93% 44%, var(--ambar) 98%, transparent),
    radial-gradient(4px 4px at 18% 86%, #2DD4BF 98%, transparent),
    radial-gradient(5px 5px at 82% 88%, var(--naranja) 98%, transparent);
  opacity: .9;
}
.veredicto.mal::before {
  background:
    radial-gradient(5px 5px at 12% 14%, var(--rojo) 98%, transparent),
    radial-gradient(4px 4px at 88% 12%, var(--naranja) 98%, transparent),
    radial-gradient(4px 4px at 8% 52%, var(--rojo) 98%, transparent),
    radial-gradient(5px 5px at 93% 44%, var(--naranja) 98%, transparent),
    radial-gradient(4px 4px at 18% 86%, var(--rojo) 98%, transparent),
    radial-gradient(5px 5px at 82% 88%, var(--naranja) 98%, transparent);
}
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-11px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
@keyframes pop { from { transform: scale(.8); opacity: 0; } }

/* medallón que sobresale del modal */
.sello {
  width: 106px; height: 106px; margin: -53px auto .5rem;
  display: grid; place-items: center;
  font-family: var(--burbuja); font-weight: 800; font-size: 3.2rem; color: #fff;
  border-radius: 50%; border: 5px solid #0B121D;
  text-shadow: 0 3px 0 #00000040;
}
.sello.ok {
  background: linear-gradient(180deg, #74D64B, var(--verde) 65%);
  box-shadow: 0 5px 0 var(--verde-hondo), 0 0 34px #58C83866;
}
.sello.no {
  background: linear-gradient(180deg, #F2837B, var(--rojo) 65%);
  box-shadow: 0 5px 0 var(--rojo-hondo), 0 0 34px #E8483F66;
}

.veredicto .titulo {
  font-family: var(--burbuja); font-size: 2.7rem; font-weight: 800; line-height: 1;
  margin: .1rem 0 .3rem;
}
.veredicto .titulo.ok { color: var(--verde); text-shadow: 0 4px 0 #1F5710; }
.veredicto .titulo.no { color: var(--rojo); text-shadow: 0 4px 0 #6B1611; }
.pg-etiqueta { font-weight: 900; font-size: .95rem; color: var(--tinta-2); }
.veredicto .puntos-ganados {
  font-family: var(--burbuja); font-size: 2.9rem; font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--naranja);
  text-shadow: 0 4px 0 #7C2D1266;
  margin-bottom: .4rem;
}
.veredicto .puntos-ganados i { font-style: normal; font-size: .55em; }
.veredicto .puntos-ganados.no {
  font-family: var(--cuerpo); font-weight: 900; font-size: 1.15rem; color: var(--rojo);
  text-shadow: none;
}
/* la fuente y la cita como tarjetita de apunte, con miniatura de la escena */
.veredicto .cita {
  display: flex; align-items: center; gap: .9rem;
  font-size: .95rem; font-weight: 700; color: var(--tinta); line-height: 1.5;
  text-align: left; margin: .7rem 0 0;
  background: var(--noche-2); border: 2px solid var(--borde);
  border-radius: 16px; padding: .8rem .95rem;
}
.veredicto .cita p { margin: 0; }
.veredicto .cita b {
  display: block; margin-bottom: .25rem;
  font-weight: 900; font-size: .88rem; color: var(--naranja-claro);
}
.cita-img {
  width: 88px; height: 88px; flex: none; object-fit: cover;
  border-radius: 12px; background: #13222F; border: 2px solid var(--borde);
}
.veredicto .seguir-btn { margin-top: 1.1rem; min-width: 240px; }
.seguir-btn::before, .seguir-btn::after { content: '✦'; font-size: .55em; opacity: .85; }

/* candado de lectura: la carta se ve pero aún no recibe respuestas */
#carta.esperar { pointer-events: none; }
#carta.esperar .btn-vf, #carta.esperar .btn-opcion,
#carta.esperar .escena-btn, #carta.esperar .escena-toca {
  opacity: .55; filter: saturate(.55);
  transition: opacity .3s, filter .3s;
}

/* ---------- final ---------- */

.puntaje-final {
  font-family: var(--burbuja); font-weight: 800;
  font-size: clamp(4.2rem, 17vw, 6.2rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--naranja);
  text-shadow: 0 .05em 0 #7C2D12, 0 16px 44px #F9731655;
  margin: 0 0 .4rem;
}
/* cinta "¡Desafío completado!" */
.cinta {
  position: relative; display: inline-block; z-index: 0;
  font-family: var(--burbuja); font-weight: 800; font-size: 1.3rem; color: #fff;
  background: linear-gradient(180deg, var(--naranja-claro), var(--naranja) 65%);
  padding: .42rem 1.7rem; border-radius: 10px;
  box-shadow: 0 4px 0 var(--naranja-hondo);
  text-shadow: 0 2px 0 #B4470E66;
  margin: 0 0 .9rem;
}
.cinta::before, .cinta::after {
  content: ''; position: absolute; top: 9px; width: 30px; height: 80%;
  background: var(--naranja-hondo); z-index: -1; border-radius: 4px;
}
.cinta::before { left: -17px; transform: skewY(-16deg); }
.cinta::after { right: -17px; transform: skewY(16deg); }

.animo {
  font-family: var(--burbuja); font-weight: 800; font-size: 1.7rem; color: #fff;
  text-shadow: 0 3px 0 #0A1220AA; margin: 0 0 .6rem;
}

.medallero { display: flex; justify-content: center; gap: 1.6rem; margin: 1rem 0 1.4rem; }
.medallero.tarjeta {
  background: var(--tarjeta); border: 2px solid var(--borde); border-radius: 20px;
  padding: 1rem 1.7rem; gap: 1.8rem; width: fit-content; margin-inline: auto;
}
.medalla { position: relative; display: flex; align-items: center; gap: .8rem; text-align: left; }
.medallero.tarjeta .medalla + .medalla { border-left: 2px dashed var(--borde-claro); padding-left: 1.8rem; }
.med-ico {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  font-size: 1.5rem; background: var(--tarjeta-2);
  border: 2px solid var(--borde-claro); border-radius: 50%;
}
.medalla b {
  display: block; font-family: var(--burbuja); font-weight: 800; font-size: 1.9rem;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.medalla b i { font-style: normal; color: var(--naranja); font-size: .75em; }
.medalla small { display: block; color: var(--tinta-2); font-weight: 800; font-size: .82rem; }

.acciones.apiladas { flex-direction: column; align-items: stretch; width: min(430px, 100%); margin-inline: auto; }
.grande-borde { width: 100%; font-size: 1.35rem; padding: .85rem; }
.aprende {
  font-family: var(--burbuja); font-weight: 800; font-size: 1.35rem;
  color: var(--naranja-claro); margin: 0 0 .1rem;
}
.record { color: var(--naranja-brillo); font-weight: 900; }

.calentamiento {
  background: #F9731617;
  border: 2px solid #F973164d;
  border-radius: 16px;
  padding: .7rem 1rem;
  max-width: 430px;
  margin: 0 auto .4rem;
  font-size: .92rem;
  line-height: 1.45;
}

.confeti {
  position: fixed; top: -20px; pointer-events: none; z-index: 40;
  font-size: 22px; animation: caer linear forwards;
}
@keyframes caer {
  to { transform: translateY(110vh) rotate(720deg); opacity: .4; }
}

/* ---------- ranking y tablas ---------- */

.encuesta-fila {
  display: flex; align-items: center; gap: .8rem; text-align: left;
  padding: .75rem 0; border-bottom: 1px solid var(--borde);
}
.encuesta-fila:last-of-type { border-bottom: 0; }
.encuesta-fila p { flex: 1; margin: 0; font-weight: 700; font-size: .95rem; }
.si-no { display: flex; gap: .4rem; }
.si-no button {
  border: 2px solid var(--borde-claro); background: var(--tarjeta-2); border-radius: 12px;
  padding: .45rem .95rem; font-weight: 900;
}
.si-no button[aria-pressed=true] { background: var(--naranja); border-color: var(--naranja); color: #fff; }

.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: .6rem .4rem; border-bottom: 1px solid var(--borde); }
.tabla th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-2); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.fila-mia td { color: var(--naranja-claro); font-weight: 900; }

.acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; justify-content: center; }

.material {
  margin-top: 1.4rem;
  background: var(--noche-2); border: 2px solid var(--borde); border-radius: 18px;
  padding: 1rem 1.1rem;
  font-size: .88rem; font-weight: 700; color: var(--tinta-2); text-align: center;
}
.material strong { color: var(--tinta); }
.material-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .6rem; }
.material-links a {
  color: var(--naranja-claro); text-decoration: none; font-weight: 900; font-size: .88rem;
  border: 2px solid #F9731659; border-radius: 999px; padding: .38rem .9rem;
  transition: background .15s, border-color .15s;
}
.material-links a:hover { background: #F9731622; border-color: var(--naranja); }
.pie-fuentes { margin-top: 1.2rem; text-align: center; color: var(--tinta-2); font-weight: 400; font-size: .8rem; }
.pie-fuentes strong { color: var(--tinta); font-weight: 700; }

/* ---------- celular: todo cabe sin scroll ----------
   El juego se usa de pie, con una mano: si hay que hacer scroll para ver las
   alternativas o el botón de seguir, se pierde el ritmo de los 90 segundos.
   Verificado pantalla por pantalla en los tamaños habituales de celular,
   descontando la barra del navegador. */

@media (max-width: 520px) {
  /* Las dos escenas de "¿cuál está bien?" van LADO A LADO, no apiladas: apiladas
     sumaban 295 px de scroll justo en la carta donde hay que comparar las dos. */
  .par-escenas { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .escena-btn .tag { font-size: .9rem; padding: .2rem; }

  /* Título y bajada más compactos en todas las pantallas */
  .titulo-juego { font-size: clamp(2.3rem, 13vw, 3.1rem); }
  .titulo-juego.chico { font-size: 1.55rem; }
  .bajada { font-size: .95rem; margin-bottom: .5rem; }

  /* Pie: los logos ocupaban 76 px de alto en pantallas donde sobraban 24 */
  .pie-cartel { margin-top: .7rem; padding-top: .6rem; }
  .pie-cartel .pie-fuentes { margin-bottom: .5rem; }
  .pie-fuentes { font-size: .72rem; margin-top: .7rem; }
  .logos { gap: 1.1rem; }
  .logo-flagare { height: 46px; }
  .logo-chip img { max-height: 26px; }

  /* Bienvenida */
  .pasos { gap: .4rem; margin: .7rem 0 .8rem; }
  .paso { padding: .5rem .7rem; font-size: .84rem; gap: .6rem; }
  .paso i { width: 34px; height: 34px; font-size: 1.05rem; }
  .nota-nombre { font-size: .74rem; margin-top: .4rem; }

  /* Galería: los meses bloqueados no necesitan ser tarjetas grandes — con el
     mes y el candado se entiende. El reto jugable sí se muestra completo, en
     una fila horizontal que ocupa el ancho. Así los 12 meses caben de una. */
  .galeria { grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: .3rem 0 .6rem; }
  .carta-reto:not(.pronto) {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    gap: .7rem; padding: .55rem .7rem; text-align: left;
  }
  .carta-reto:not(.pronto) .cr-img { width: 92px; flex: none; margin: 0; }
  .carta-reto:not(.pronto) .cr-tema { font-size: 1rem; }
  .carta-reto:not(.pronto) .cr-badge { margin: 0 0 0 auto; flex: none; }
  /* el min-height de 128 px de las tarjetas bloqueadas era lo que empujaba la
     galería 150 px fuera de pantalla: en el celular no hace falta */
  .carta-reto.pronto { padding: .45rem .25rem; border-radius: 14px; min-height: 0; }
  .carta-reto.pronto .cr-cand { font-size: .95rem; margin: 0; }
  .carta-reto.pronto .cr-mes { font-size: .58rem; letter-spacing: .04em; }
  .carta-reto.pronto .cr-tema { display: none; }

  /* Ficha del reto: es una pantalla de paso hacia el juego, así que aquí el
     hero se achata, se esconde el pie y sale el recordatorio de cómo se juega
     (los chips de arriba ya lo dicen). */
  .panel.hogar.ficha > .hero { aspect-ratio: 13 / 5; }
  .panel.hogar.ficha ~ .pie-cartel { display: none; }
  .panel.hogar.ficha .como-se-juega { display: none; }
  .panel.hogar.ficha .bajada { font-size: .88rem; margin-bottom: .3rem; }
  .panel.hogar.ficha .descripcion-reto {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: .4rem 0;
  }
  .chips-info { gap: .3rem; }
  .volver-linea { margin: 0 0 .3rem; }
  .reto-mes { font-size: .8rem; padding: .3rem .8rem; margin-bottom: .5rem; }
  .descripcion-reto { font-size: .84rem; margin: .5rem 0; }
  .chips-info span { font-size: .72rem; padding: .26rem .55rem; }
  .como-se-juega { font-size: .78rem; margin: .5rem 0; }
  .comunidad { font-size: .8rem; margin: .5rem 0; }
  .medallero.tarjeta { margin: .5rem auto; padding: .5rem .7rem; gap: .7rem; }
  .med-ico { width: 34px; height: 34px; font-size: 1rem; }
  .medalla b { font-size: 1.25rem; }
  .medalla small { font-size: .68rem; }
  .acciones.apiladas { gap: .45rem; margin-top: .6rem; }
  .acciones.apiladas .btn.grande { font-size: 1.25rem; padding: .6rem; }
  .grande-borde { font-size: 1.05rem; padding: .5rem; }
  .salir-linea { margin-top: .4rem; }

  /* Cartas de rango: la ilustración de cada alternativa se recorta un poco */
  .opciones { gap: .45rem; }
  .opcion-img { aspect-ratio: 4 / 3; }
  .btn-opcion span { font-size: .9rem; padding: .3rem; }

  /* Pantalla final */
  .panel.cartel { padding: .9rem 1rem 1rem; }
  .cinta { font-size: .95rem; padding: .26rem 1rem; margin-bottom: .4rem; }
  .animo { font-size: 1.15rem; margin-bottom: .3rem; }
  .puntaje-final { font-size: 2.9rem; }
  .calentamiento, .record { font-size: .76rem; padding: .4rem .7rem; }
  .material { margin-top: .6rem; padding: .5rem .7rem; }
  .aprende { font-size: 1rem; }
  .material .suave { font-size: .72rem; }
}

/* Celulares muy bajos: en vez de seguir recortando pantalla por pantalla, se
   baja la escala base y todo lo que está en rem —tipografías, espacios,
   botones— se achica en proporción, manteniendo el diseño. */
@media (max-width: 560px) and (max-height: 650px) { html { font-size: 15px; } }
@media (max-width: 560px) and (max-height: 600px) { html { font-size: 14px; } }

/* Altura extrema: las tres alternativas ilustradas de las cartas de rango son
   lo más alto del juego. Se quedan solo con el texto, que es un estado ya
   previsto de la interfaz (el que se ve cuando falta la ilustración) y sigue
   siendo perfectamente jugable. */
@media (max-width: 560px) and (max-height: 575px) {
  .opcion-img { display: none; }
}

/* Pantallas de poca altura (celulares chicos, o el navegador mostrando su barra
   completa): lo mismo, un punto más apretado. */
@media (max-width: 520px) and (max-height: 700px) {
  .titulo-juego { font-size: 2.1rem; }
  .titulo-juego.chico { font-size: 1.4rem; }
  .paso { padding: .42rem .6rem; font-size: .8rem; }
  .paso i { width: 30px; height: 30px; font-size: .95rem; }
  .pasos { gap: .35rem; margin: .55rem 0 .65rem; }
  .pie-fuentes { font-size: .68rem; margin-top: .5rem; }
  .logo-flagare { height: 38px; }
  .panel.hogar.ficha > .hero { aspect-ratio: 16 / 5; }
  .panel.hogar.ficha .chips-info span { font-size: .68rem; padding: .22rem .5rem; }
  .medallero.tarjeta { margin: .4rem auto; padding: .4rem .6rem; }
  .acciones.apiladas .btn.grande { font-size: 1.15rem; padding: .52rem; }
  /* cartas de rango: tres ilustraciones en columna es lo más alto del juego */
  .opcion-img { aspect-ratio: 3 / 2; }
  .opciones { gap: .35rem; }
  .btn-opcion span { font-size: .82rem; padding: .24rem; }
}

/* ---------- desktop: el cartel se abre en dos columnas ---------- */

@media (min-width: 920px) {
  /* home e ingreso: texto y acciones a la izquierda, ilustración a la derecha */
  .panel.hogar {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    column-gap: 3.2rem;
    align-items: start;
  }
  .panel.hogar > * { grid-column: 1; }
  .panel.hogar > .hero {
    grid-column: 2; grid-row: 1 / span 12; align-self: center;
  }
  .pie-cartel { margin-top: 1.2rem; padding-top: .9rem; }
  /* ficha del reto: la columna izquierda respira y el medallero + comunidad
     se van bajo la ilustración (columna derecha) */
  .panel.hogar .chips-info span { font-size: .78rem; padding: .3rem .6rem; }
  .panel.hogar .como-se-juega { font-size: .84rem; }
  .panel.hogar .acciones.apiladas { gap: .55rem; margin-top: .8rem; }
  .panel.hogar .acciones.apiladas .btn.grande { font-size: 1.5rem; padding: .8rem; }
  .panel.hogar .grande-borde { font-size: 1.2rem; padding: .6rem; }
  .panel.hogar.ficha > .hero { grid-row: 1 / span 5; align-self: start; }
  .panel.hogar.ficha > .medallero.tarjeta {
    grid-column: 2; grid-row: 6 / span 2;
    align-self: center; justify-self: center;
    margin: 0; width: fit-content; padding: .9rem 1.5rem; gap: 1.5rem;
  }
  .panel.hogar.ficha > .medallero.tarjeta .medalla + .medalla { padding-left: 1.5rem; }
  .panel.hogar.ficha .med-ico { width: 48px; height: 48px; font-size: 1.3rem; }
  .panel.hogar.ficha .medalla b { font-size: 1.7rem; }
  .panel.hogar.ficha > .comunidad {
    grid-column: 2; grid-row: 8;
    align-self: start; justify-self: center; margin: 0;
  }
  /* bienvenida: la foto del equipo es panorámica (3900×1056), y metida en una
     columna quedaba como una franja chica con mucho aire arriba y abajo. Cruza
     a lo ancho del cartel y los tres pasos se reparten en fila debajo: la foto
     se ve grande, sin recortar a nadie, y el bloque ocupa todo el espacio. */
  .panel.hogar.bienvenida { display: block; width: min(1040px, 100%); }
  .panel.hogar.bienvenida > .hero { margin: .5rem 0 1.2rem; }
  .panel.hogar.bienvenida .pasos {
    grid-template-columns: repeat(3, 1fr); gap: .9rem; margin: 0 0 1.3rem;
  }
  .panel.hogar.bienvenida .paso { flex-direction: column; text-align: center; gap: .5rem; }
  .panel.hogar.bienvenida .acciones.apiladas { width: min(420px, 100%); margin-inline: auto; }
  .panel.hogar.bienvenida #form { width: min(560px, 100%); margin-inline: auto; }

  /* el pie cabe en una línea a este ancho */
  .pie-cartel .pie-fuentes { max-width: none; }

  /* la galería no lleva ilustración lateral: se abre a lo ancho */
  .panel.hogar.solo { display: block; width: min(1080px, 100%); }
  .panel.hogar.solo .titulo-juego.chico { font-size: 1.9rem; margin: 0 0 .2rem; }
  .panel.hogar.solo .titulo-juego span { display: inline; }
  .panel.hogar.solo .bajada { margin-bottom: .4rem; }
  .panel.hogar.solo .galeria { grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: .5rem; }
  .panel.hogar.solo .cr-img { aspect-ratio: 16 / 9; }
  .panel.hogar.solo .carta-reto.pronto { min-height: 110px; }
  .panel.hogar.solo .salir-linea { margin: .1rem 0 0; }
  .panel.hogar .medallero.tarjeta {
    width: 100%; padding: .75rem .9rem; gap: 1rem; justify-content: space-around;
  }
  .panel.hogar .medallero.tarjeta .medalla + .medalla { padding-left: 1rem; }
  .panel.hogar .med-ico { width: 40px; height: 40px; font-size: 1.1rem; }
  .panel.hogar .medalla b { font-size: 1.45rem; }
  .panel.hogar .medalla small { font-size: .74rem; }
  .titulo-juego { font-size: clamp(3rem, 5.4vw, 4.6rem); }
  .hero { aspect-ratio: 420 / 300; }

  /* final: más compacta para caber sin scroll */
  .panel.cartel { width: min(700px, 100%); padding: 1.1rem 2rem 1.3rem; margin-top: .4rem; }
  .titulo-juego.chico { font-size: 2.1rem; margin: -.2rem 0 .4rem; }
  .cinta { font-size: 1.1rem; padding: .32rem 1.4rem; margin-bottom: .6rem; }
  .animo { font-size: 1.4rem; margin-bottom: .4rem; }
  .puntaje-final { font-size: 3.9rem; }
  .calentamiento { font-size: .85rem; padding: .5rem .9rem; }
  .medallero.tarjeta { margin: .6rem auto .8rem; padding: .7rem 1.4rem; }
  .med-ico { width: 44px; height: 44px; font-size: 1.2rem; }
  .medalla b { font-size: 1.6rem; }
  .acciones.apiladas { margin-top: .7rem; gap: .55rem; }
  .acciones.apiladas .btn.grande { font-size: 1.45rem; padding: .7rem; }
  .grande-borde { font-size: 1.2rem; padding: .6rem; }
  .material { margin-top: .9rem; padding: .7rem 1rem; }
  .aprende { font-size: 1.15rem; }
  .veredicto { width: min(600px, 100%); }
}

/* ---------- accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
  .panel, .veredicto, .veredicto.mal, .cuenta-num.anim, .racha.viva, .marca-zona { animation: none; }
  /* sin barrido: la barra se queda quieta y llena a medias, que ya se lee como
     "cargando" sin movimiento */
  .barra-carga.indeterminada .barra-carga-relleno { animation: none; margin-left: 30%; }
  .hero-capa { transition: none; }
  .confeti { display: none; }
}