/* =========================================================
   estilos.css — Kiosco de juegos Itaipú Binacional
   Diseñado a 1920×1080; el #stage se escala al viewport.
   Paleta OFICIAL del Manual de Identidade Visual de ITAIPU
   (ver marca/IDENTIDAD.md). No inventar colores.
   ========================================================= */

:root {
  /* Fondo institucional (pág. 1.4.1) — el logo sobre-navy se funde con este valor exacto */
  --navy: #00345D;
  /* Primarias (las cuatro del símbolo) */
  --rojo: #EF4023;
  --amarillo: #FFC20D;
  --azul: #0077C0;
  --verde: #00A84F;
  /* Medias (destaques / diferenciación de grupos de información) */
  --media-ocre: #AE6F0C;
  --media-uva: #896079;
  --media-oliva: #9FA735;
  --media-agua: #4FA097;
  /* Claras (soporte de texto e información) */
  --clara-arena: #E7DFA8;
  --clara-lino: #E3DDD2;
  --clara-brote: #E6F0CB;
  --clara-salvia: #DDE8DD;
  /* Acento del espacio físico de la expo: app.js lo pisa según window.KIOSCO
     (Energía = azul #0570B6, Resp. Social = rojo #DF271C). En index.html
     queda este azul institucional. Pinta el filete del HUD y .btn-acento. */
  --acento: var(--navy);
}

/* ---------- Base de kiosco: sin scroll, sin selección, sin zoom ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #001B30; /* letterbox */
  touch-action: none;
}

body {
  /* Trebuchet: "Alternativa para Web" autorizada por el manual (pág. 1.5.1) */
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--navy);
}

/* ---------- Escenario 1920×1080 centrado y escalado por JS ---------- */
#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%);
  background: var(--clara-lino);
  overflow: hidden;
}

/* ---------- Pantallas ---------- */
.pantalla {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.pantalla.activa {
  opacity: 1;
  visibility: visible;
}

/* ---------- Confeti ---------- */
#confeti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

/* ---------- Grafismo "Águas da Integração", modelo Contorno ----------
   Líneas finas de fondo en las barras superiores (ver svgAguas en app.js).
   El modelo Preenchimento de la bienvenida fue reemplazado por la
   ilustración real assets/fondo-bienvenida.png. */
.aguas-contorno {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.aguas-contorno svg { width: 100%; height: 100%; display: block; }

/* ---------- Botones grandes (mínimo 96 px de alto) ---------- */
.btn {
  min-height: 96px;
  padding: 0 52px;
  border: none;
  border-radius: 26px;
  font-family: inherit;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .18);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active {
  transform: translateY(4px) scale(.98);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
.btn-azul   { background: var(--azul); }
.btn-acento { background: var(--acento); }

/* ---------- Botón de mute (arriba a la derecha) ---------- */
#btn-mute {
  position: absolute;
  right: 28px;
  top: 15px;
  width: 110px;
  height: 110px;
  border: 3px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  z-index: 60;
}
#btn-mute svg { width: 56px; height: 56px; }
/* Centrado vertical dentro del HUD de cada juego (200 px en buscar, 140 px en trivia) */
#stage:has(#pantalla-buscar.activa) #btn-mute { top: 45px; }
#btn-mute .icono-off { display: none; }
#btn-mute.muteado { background: #8A8F98; }
#btn-mute.muteado .icono-on { display: none; }
#btn-mute.muteado .icono-off { display: block; }

/* ---------- Modo kiosco dedicado (buscar.html / trivia.html) ----------
   Cada pantalla física corre UN solo juego: nunca se muestra el menú,
   El botón "Menú" queda SIEMPRE visible (pedido del cliente): en las
   pantallas dedicadas vuelve a la BIENVENIDA de ese juego (el "menú
   principal" del kiosco es su portada; la elección de juegos existe
   solo en index.html, la demo). Ver irAlMenu en app.js. */

/* =========================================================
   PANTALLA: ATRACTOR (bienvenida)
   Ilustración real "Águas da Integração" (ondas arriba, zona
   despejada abajo). El fondo de la imagen es el MISMO #00345D
   del logo itaipu-sobre-navy.png: se funde sin bordes.
   ========================================================= */
#pantalla-atractor {
  /* cover sin deformar; anclada arriba para que las ondas queden completas
     y la mitad inferior siga despejada para el contenido. El degradado lleva
     la zona baja al #00345D EXACTO: el pie de la ilustración es ≈#022F54 y
     sin él, el fondo propio del logo itaipu-sobre-navy.png se notaría como
     un rectángulo en vez de fundirse (manual 1.4.5). */
  background-color: var(--navy);
  background-image: linear-gradient(180deg, rgba(0, 52, 93, 0) 46%, var(--navy) 72%),
                    url("../assets/fondo-bienvenida.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}
.atr-contenido {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Apilado contra la zona despejada de abajo, lejos de las ondas */
  justify-content: flex-end;
  padding-bottom: 60px;
  gap: 24px;
  z-index: 2;
}
.atr-logo-img {
  height: 150px;
  width: auto;
  object-fit: contain;
  animation: flotar 5s ease-in-out infinite;
}
/* Render oficial de Epito (marca/epito-cuerpo.png, 285×718) a un costado de
   la bienvenida: acá el personaje es protagonista y se ve GRANDE. Altura
   fija y ancho automático = escala proporcional, nunca deformado. */
.atr-epito {
  position: absolute;
  right: 140px;
  bottom: 70px;
  height: 620px;
  width: auto;
  z-index: 2;
  pointer-events: none;
  animation: flotar 5s ease-in-out infinite;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
}
.atr-espacio {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--amarillo);
}
.atr-espacio:empty { display: none; }
.atr-titulo {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: .04em;
  text-shadow: 0 8px 0 rgba(0, 0, 0, .18);
  text-align: center;
  /* 950px: los títulos largos parten en dos líneas centradas ANTES de invadir
     la zona de Epito (right:140 + ~250 de ancho), y el corte cae en
     "Trivia de las / Grandes Obras" (con 1150 quedaba "Obras" viuda).
     "Encontrá a Epito" (~800px) e "ITAIPÚ BINACIONAL" (~850px) siguen en una
     línea. El contenido está anclado abajo (flex-end): la segunda línea
     crece hacia arriba, hacia las ondas, sin empujar el botón. */
  max-width: 950px;
  line-height: 1.05;
}
.atr-sub {
  font-size: 40px;
  opacity: .92;
}
.atr-toca {
  font-size: 44px;
  font-weight: 700;
  padding: 26px 64px;
  border: 3px solid rgba(255, 255, 255, .55);
  border-radius: 60px;
  background: rgba(255, 255, 255, .14);
  animation: pulsar 1.6s ease-in-out infinite;
}

@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pulsar { 0%, 100% { transform: scale(1); opacity: .88; } 50% { transform: scale(1.06); opacity: 1; } }

/* ---------- Franja del KV de EXPO PY 2026 ----------
   Patrón de doodles (tereré, chipa, arpa…) repetido en el borde inferior
   de la bienvenida y del resultado. MUY sutil: da pertenencia al stand
   sin competir nunca con el texto (el contenido va encima, z-index 2). */
.kv-franja {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1920px;
  height: 92px;
  background: url("../marca/kv-patron-iconos.png") left center repeat-x;
  background-size: auto 92px;
  opacity: .18;
  pointer-events: none;
  z-index: 1;
}

/* =========================================================
   PANTALLA: MENÚ (solo index.html)
   ========================================================= */
#pantalla-menu {
  background: linear-gradient(180deg, var(--clara-salvia), var(--clara-lino));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 70px;
}
.menu-titulo { font-size: 84px; color: var(--navy); }
.tarjetas { display: flex; gap: 80px; }
.tarjeta {
  width: 640px;
  height: 580px;
  padding: 40px;
  background: #fff;
  border-radius: 36px;
  border: 6px solid var(--azul);
  box-shadow: 0 16px 40px rgba(0, 52, 93, .18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: transform .1s ease;
}
.tarjeta:active { transform: scale(.97); }
#card-trivia { border-color: var(--verde); }
.tarjeta h2 { font-size: 52px; color: var(--navy); text-align: center; }
.tarjeta p  { font-size: 30px; color: #4A5B70; text-align: center; line-height: 1.35; }
.tarjeta .mini { width: 340px; height: 240px; }

/* =========================================================
   HUD compartido de los juegos (barra superior #00345D exacto)
   ========================================================= */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 40px;
  /* El padding derecho reserva el lugar del botón de mute (110 px + margen) */
  padding: 0 166px 0 32px;
  z-index: 10;
  /* Filete del color del espacio físico (--acento, ver app.js/KIOSCO) */
  border-bottom: 6px solid var(--acento);
}
/* Logo oficial sobre navy: mismo fondo #00345D, se funde sin bordes */
.hud-logo {
  height: 64px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}
.hud > * { position: relative; z-index: 1; }
.hud > .aguas-contorno { position: absolute; z-index: 0; }
.hud-puntaje {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  line-height: 1.15;
}
.hud-puntaje b { font-size: 54px; letter-spacing: 0; }
.btn-home {
  min-height: 96px;
  padding: 0 36px;
  border: 3px solid rgba(255, 255, 255, .4);
  border-radius: 22px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
}
.btn-home:active { transform: scale(.95); }

.barra {
  height: 34px;
  background: rgba(255, 255, 255, .25);
  border-radius: 17px;
  overflow: hidden;
  flex: 1;
}
.barra > div {
  height: 100%;
  width: 100%;
  background: var(--amarillo);
  border-radius: 17px;
}
.barra > div.alerta { background: var(--rojo); }

/* =========================================================
   JUEGO 1 — ENCONTRÁ A EPITO
   ========================================================= */
#pantalla-buscar { background: #BEE7FA; }
/* En buscar, el HUD FLOTA translúcido sobre la escena a pantalla completa:
   la ilustración es la protagonista. Cubre solo cielo y mar (el fondo se
   ancla arriba con "center top"), nunca la represa. */
#pantalla-buscar .hud {
  height: 150px;
  background: linear-gradient(180deg, rgba(0, 27, 48, .93), rgba(0, 32, 58, .78));
}
/* La tarjeta de Epito vive DENTRO del HUD flotante (no cuelga): colgando
   tapaba la pasarela del coronamiento de la represa, que quedó justo
   debajo. */
#pantalla-buscar .hud-retrato { height: 144px; width: 104px; }
#pantalla-buscar .hud-retrato img { height: 130px; }

/* Referencia de Epito al lado del título: el render oficial de CUERPO
   ENTERO (marca/epito-cuerpo.png, 285×718), escala proporcional, nunca
   deformado. Es un BOTÓN: tocarlo vuelve a mostrar el cartel de la
   pista (ver mostrarPista en buscar.js). */
.hud-retrato {
  flex: 0 0 auto;
  /* Epito de CUERPO ENTERO: la referencia tiene que mostrar los 4 rasgos
     (casco, anteojos, remera, credencial) — con solo la cara no se podía
     saber qué buscar. Fondo clara del manual (no blanco: el casco y la
     remera blancos desaparecerían). */
  width: 122px;
  height: 172px;
  border-radius: 18px;
  background: #E3DDD2;
  border: 5px solid var(--amarillo);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.hud-retrato img {
  width: auto;
  height: 158px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3));
}
.hud-retrato:active { transform: scale(.94); }

/* Botón de ayuda a pedido: aro pulsante 2 s y la ronda vale la mitad.
   Discreto y en la esquina INFERIOR DERECHA de la escena, lejos del logo:
   fondo oscuro semitransparente y el costo ("vale la mitad de los puntos")
   visible ANTES de tocarlo. generarPosiciones (buscar.js, HUECO_AYUDA)
   garantiza que ningún personaje se genere debajo. */
.btn-ayuda {
  position: absolute;
  right: 28px;
  bottom: 20px;
  z-index: 6;
  min-height: 100px;
  padding: 14px 32px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 24px;
  background: rgba(0, 27, 48, .72);
  color: #fff;
  font-family: inherit;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform .08s ease;
}
.btn-ayuda span { font-size: 28px; font-weight: 400; opacity: .85; }
.btn-ayuda:active { transform: scale(.97); background: rgba(0, 27, 48, .88); }
.btn-ayuda.usado { opacity: .55; }
.hud-centro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hud-ronda { font-size: 32px; font-weight: 700; }
.fila-tiempo {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 900px;
}
.hud-tiempo {
  font-size: 48px;
  font-weight: 800;
  min-width: 92px;
  text-align: center;
}
.hud-tiempo.penal { color: #FF8A65; }

#buscar-escena {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  /* Escena a PANTALLA COMPLETA con el HUD flotando encima. La ilustración
     (1920×1280) se ancla arriba: se ven las filas 0‥1080 y se ocultan las
     últimas 200 (borde de calles abajo). Mapeo directo: y_escena = y_imagen.
     El HUD translúcido (150px) tapa solo cielo y mar. Si se cambia el
     anclaje, recalibrar las ZONAS de buscar.js. */
  background: url("../assets/fondo-buscar.jpg") center top no-repeat;
  background-size: cover;
}
#buscar-escena svg { display: block; }

/* Cartel de la pista de los 4 rasgos, apenas debajo del HUD. Aparece al
   empezar la ronda y buscar.js lo desvanece a los 4 segundos (.oculta)
   para que no tape la represa; tocando el retrato de Epito del HUD se
   vuelve a leer. pointer-events none: no roba ningún toque. */
.buscar-pista {
  position: absolute;
  /* 290: por debajo del muro de la represa (termina ≈300 en esa franja) y
     por encima de las cabezas más altas de la multitud (≈365). En una
     línea sola para no engordar hacia abajo. */
  top: 290px;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1560px;
  padding: 14px 40px;
  background: rgba(0, 52, 93, .78);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  border-radius: 40px;
  z-index: 5;
  pointer-events: none;
  transition: opacity .5s ease;
}
.buscar-pista.oculta { opacity: 0; }

/* Recorte sobre la ilustración: contorno blanco + sombra para que cada
   personajito (y la ficha de la trivia) se despegue del fondo. Con la
   ilustración nueva, más detallada, el contorno es un poco más grueso
   y la sombra más marcada. */
.personaje,
#trivia-ficha {
  filter: drop-shadow(2px 0 0 #FFFFFF) drop-shadow(-2px 0 0 #FFFFFF)
          drop-shadow(0 2px 0 #FFFFFF) drop-shadow(0 -2px 0 #FFFFFF)
          drop-shadow(0 6px 6px rgba(0, 27, 48, .5));
}

/* Personajes dentro de la escena SVG */
.personaje .cuerpo {
  transform-box: fill-box;
  transform-origin: center;
}
.personaje .cuerpo.shake { animation: sacudir .4s ease; }
@keyframes sacudir {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 0); }
  40% { transform: translate(7px, 0); }
  60% { transform: translate(-5px, 0); }
  80% { transform: translate(5px, 0); }
}

.aro-rojo {
  fill: none;
  stroke: var(--rojo);
  stroke-width: 7;
  pointer-events: none;
  animation: desvanecer .5s ease forwards;
}
@keyframes desvanecer { from { opacity: 1; } to { opacity: 0; } }

#capa-pistas { pointer-events: none; }
.aro-pista {
  fill: none;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 9;
  stroke-dasharray: 26 18;
  animation: aroAnim 1.3s linear infinite;
}
@keyframes aroAnim {
  0%   { stroke-dashoffset: 0;  opacity: .5; }
  50%  { opacity: .95; }
  100% { stroke-dashoffset: 88; opacity: .5; }
}
.aro-final { fill: none; stroke-width: 9; pointer-events: none; }
/* Durante la ayuda o el acierto, la multitud se atenúa y Epito queda
   iluminado: con vecinos pegados, el aro solo no alcanzaba para señalar
   sin ambigüedad. */
#buscar-svg.destacar .personaje:not(.objetivo) { opacity: .4; transition: opacity .25s ease; }
#buscar-svg .personaje { transition: opacity .25s ease; }
/* Flecha de la ayuda: rebota apuntando a la cabeza de Epito. Amarillo del
   manual con borde navy para recortarse de cualquier fondo. */
.flecha-pista {
  fill: var(--amarillo);
  stroke: var(--navy);
  stroke-width: 3;
  animation: flechaBote .55s ease-in-out infinite alternate;
}
@keyframes flechaBote { from { translate: 0 0; } to { translate: 0 -14px; } }

/* Popup de acierto / tiempo agotado */
.popup {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 30px;
  padding: 42px 72px;
  font-size: 52px;
  font-weight: 800;
  color: var(--navy);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  z-index: 20;
  transition: opacity .25s ease;
}
.popup.oculto { opacity: 0; visibility: hidden; }
.popup-verde { border: 8px solid var(--verde); color: var(--verde); }
.popup-rojo  { border: 8px solid var(--rojo);  color: var(--rojo); }

/* =========================================================
   JUEGO 2 — TRIVIA DE LAS GRANDES OBRAS
   ========================================================= */
#pantalla-trivia { background: linear-gradient(180deg, var(--clara-salvia), var(--clara-lino)); }
#pantalla-trivia .hud { height: 140px; }
.hud-titulo-juego { font-size: 38px; font-weight: 800; }
#trivia-progreso {
  flex: 1;
  text-align: center;
  font-size: 34px;
  font-weight: 700;
}

#trivia-tablero {
  position: absolute;
  top: 140px;
  left: 24px;
  width: 860px;
  height: 940px;
  /* Ilustración real de la represa, cover sin deformar y anclada a la
     IZQUIERDA: así la columna muestra el campo verde abierto de abajo,
     que es donde vive el tablero (ver POS en trivia.js) */
  background: url("../assets/fondo-trivia.jpg") left center no-repeat;
  background-size: cover;
}
#trivia-tablero svg { display: block; }
/* Camino + casillas como una sola placa con sombra sutil sobre el verde */
.capa-tablero { filter: drop-shadow(0 5px 8px rgba(0, 27, 48, .35)); }

.trivia-panel {
  position: absolute;
  top: 172px;
  left: 920px;
  width: 960px;
  height: 876px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.barra-trivia {
  flex: 0 0 38px;
  height: 38px;
  background: #C9D4DE;
  border-radius: 19px;
}
#trivia-barra {
  height: 100%;
  width: 100%;
  background: var(--azul);
  border-radius: 19px;
}
#trivia-barra.alerta { background: var(--rojo); }

#trivia-pregunta {
  min-height: 150px;
  padding: 24px 38px;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 10px 26px rgba(0, 52, 93, .12);
  font-size: 42px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
  display: flex;
  align-items: center;
}

#trivia-opciones {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-content: start;
}
.opcion {
  min-height: 110px;
  padding: 16px 26px;
  border: none;
  border-radius: 24px;
  box-shadow: 0 8px 0 rgba(0, 52, 93, .22);
  font-family: inherit;
  font-size: 32px;
  font-weight: 700;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 22px;
  transition: transform .08s ease;
}
.opcion:active { transform: translateY(3px); }
.opcion .letra {
  flex: 0 0 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
}
/* Diferenciación de las 4 opciones con Primarias y Medias (manual 1.4.1).
   OJO: acá NUNCA se usan el verde ni el rojo, que quedan reservados para
   los estados "correcta" / "incorrecta" y así no se confunden. */
.opcion.op-0 { background: var(--azul);        color: #fff; }
.opcion.op-1 { background: var(--amarillo);    color: var(--navy); }
.opcion.op-1 .letra { background: rgba(0, 52, 93, .16); }
.opcion.op-2 { background: var(--media-uva);   color: #fff; }
.opcion.op-3 { background: var(--media-ocre);  color: #fff; }
/* Estados de respuesta: relleno pleno + borde blanco + ✓/✗ en la ficha */
.opcion.correcta {
  background: var(--verde);
  color: #fff;
  border: 6px solid #fff;
  box-shadow: 0 8px 0 rgba(0, 52, 93, .22), 0 0 0 5px var(--verde);
}
.opcion.correcta .letra { background: rgba(255, 255, 255, .3); }
.opcion.incorrecta {
  background: var(--rojo);
  color: #fff;
  border: 6px solid #fff;
  animation: sacudir .4s ease;
}
.opcion.incorrecta .letra { background: rgba(255, 255, 255, .3); }
.opcion.apagada { opacity: .35; }

/* Tarjeta "¿Sabías que…?" — ítem normal del flujo: nunca tapa las opciones */
#trivia-sabias {
  flex: 0 0 auto;
  background: var(--clara-salvia);
  border: 6px solid var(--azul);
  border-radius: 30px;
  padding: 24px 32px;
  box-shadow: 0 10px 26px rgba(0, 52, 93, .15);
  display: flex;
  align-items: center;
  gap: 30px;
}
#trivia-sabias.oculto { display: none; }
#trivia-sabias.buena { border-color: var(--verde); background: var(--clara-brote); }
#trivia-sabias.mala  { border-color: var(--rojo);  background: var(--clara-lino); }
.sabias-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#sabias-titulo { font-size: 38px; font-weight: 800; }
#trivia-sabias.buena #sabias-titulo { color: var(--verde); }
#trivia-sabias.mala  #sabias-titulo { color: var(--rojo); }
.sabias-encabezado { font-size: 28px; color: var(--azul); }
#sabias-dato { font-size: 30px; line-height: 1.35; color: #31445C; }
/* "Siguiente" queda en azul primario a propósito: el acento rojo del
   Espacio Responsabilidad Social se confundiría con "incorrecta" */
#btn-siguiente { flex: 0 0 auto; align-self: center; }

/* =========================================================
   PANTALLA: RESULTADO
   ========================================================= */
#pantalla-resultado {
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Epito de cuerpo entero acompaña el resultado (render oficial, escala
   proporcional). z-index 1: si la caja crece, él queda asomando detrás. */
.res-epito {
  position: absolute;
  left: 90px;
  bottom: 90px;
  height: 560px;
  width: auto;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
}
.res-caja {
  min-width: 960px;
  max-width: 1400px;
  padding: 70px 110px;
  background: var(--clara-lino);
  border-radius: 44px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}
#res-titulo { font-size: 48px; color: var(--azul); }
.res-puntaje {
  font-size: 150px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.res-puntos-label {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--azul);
}
#res-detalle { font-size: 34px; color: #4A5B70; }
#res-mensaje {
  font-size: 40px;
  font-weight: 700;
  color: var(--verde);
  max-width: 1000px;
  line-height: 1.3;
}
.res-botones { display: flex; gap: 40px; margin-top: 20px; }