/* Voces de la Historia — estilos.
   Basado en el diseño original (Baloo 2 + Nunito, colores vivos, sombras sólidas).
   Se adapta a: celular vertical (1 columna), celular horizontal, tablet, computadora y proyector/TV (2 columnas). */

@font-face { font-family: "Baloo 2"; src: url("/fonts/baloo2.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --morado: #3B1FA8;
  --morado-osc: #1E0E66;
  --lila: #F4F1FF;
  --lila-sombra: #D6CFF5;
  --tinta: #1B1530;
  --gris: #4A4366;
  --verde: #1E8A4C;
  /* Colores del personaje activo (se cambian desde app.js) */
  --fondo: #FFE1DC;
  --principal: #D12F45;
  --oscuro: #8C1D2C;
  --sombra: #F0B5AC;
  --suave: #FFF5F3;
  --titulos: "Baloo 2", system-ui, sans-serif;
  /* Escala general: crece en pantallas grandes (proyector, TV) */
  --k: 1;
  /* Tamaño del avatar en la conversación */
  --av: 200px;
}
@media (min-width: 1400px) and (min-height: 820px) { :root { --k: 1.2; } }
@media (min-width: 1900px) and (min-height: 1000px) { :root { --k: 1.45; } }
@media (min-width: 2500px) and (min-height: 1300px) { :root { --k: 1.9; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: calc(16px * var(--k));
  color: var(--tinta);
  background: var(--lila);
  transition: background-color .4s;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body[data-pantalla="charla"], body[data-pantalla="lecturas"], body[data-pantalla="error"] { background: var(--fondo); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible, [role="button"]:focus-visible { outline: 4px solid #FFB800; outline-offset: 3px; }
[hidden] { display: none !important; }

#app { position: relative; width: 100%; min-height: 100dvh; }

.pantalla {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  animation: entrar .35s cubic-bezier(.2, .9, .3, 1.2);
}
.pantalla.activa { display: flex; }
.espacio { flex: 1; min-height: 12px; }

.titulo { font-family: var(--titulos); font-weight: 800; font-size: calc(clamp(28px, 8.6vw, 38px) * var(--k)); line-height: 1; color: var(--morado); }
.titulo.centro { text-align: center; }
.subtitulo { margin-top: 8px; font-size: calc(18px * var(--k)); font-weight: 700; color: var(--gris); }

/* Botones con "sombra sólida" que se hunden al tocar */
.btn-grande, .btn-medio, .btn-redondo, .tarjeta, .chip, .baldosa, .btn-lateral .icono, .btn-volver, .btn-mic, .lectura, .btn-holo {
  transition: transform .12s, box-shadow .12s, filter .2s;
}
.btn-grande:active, .btn-medio:active, .btn-redondo:active, .tarjeta:active, .chip:active, .baldosa:active, .btn-volver:active, .lectura:active, .btn-holo:active {
  transform: translateY(5px); box-shadow: 0 1px 0 var(--sombra-btn, rgba(0,0,0,.25));
}
@media (hover: hover) {
  .tarjeta:hover, .chip:hover, .baldosa:hover, .lectura:hover, .btn-grande:hover, .btn-holo:hover { filter: brightness(1.05); transform: translateY(-2px); }
}

.btn-grande {
  width: 100%; height: calc(92px * var(--k)); border-radius: calc(30px * var(--k));
  background: var(--morado); color: #fff; --sombra-btn: var(--morado-osc);
  box-shadow: 0 8px 0 var(--morado-osc);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--titulos); font-weight: 800; font-size: calc(clamp(22px, 7vw, 30px) * var(--k));
}
.btn-grande svg { width: calc(36px * var(--k)); height: calc(36px * var(--k)); flex-shrink: 0; }
.btn-medio {
  margin-top: 16px; height: calc(70px * var(--k)); width: 100%; border-radius: 26px;
  background: var(--morado); color: #fff; box-shadow: 0 6px 0 var(--morado-osc); --sombra-btn: var(--morado-osc);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--titulos); font-weight: 800; font-size: calc(24px * var(--k));
}
.btn-redondo {
  width: calc(72px * var(--k)); height: calc(72px * var(--k)); flex-shrink: 0; border-radius: 50%;
  background: var(--morado); color: #fff; box-shadow: 0 5px 0 var(--morado-osc); --sombra-btn: var(--morado-osc);
  display: flex; align-items: center; justify-content: center;
}
.btn-redondo.escuchando { background: var(--verde); box-shadow: 0 5px 0 #0F5A30; animation: late 1s ease-in-out infinite; }
.btn-texto { margin: 14px auto 0; padding: 8px 14px; font-weight: 800; font-size: calc(16px * var(--k)); color: var(--morado); text-decoration: underline; text-underline-offset: 4px; }
.btn-holo {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px; height: calc(52px * var(--k)); padding: 0 16px; border-radius: 999px;
  background: #1B1530; color: #fff; box-shadow: 0 4px 0 #000; --sombra-btn: #000;
  font-family: var(--titulos); font-weight: 800; font-size: calc(17px * var(--k));
}
.btn-holo svg { color: #9FE8FF; }
.btn-fuentes {
  width: calc(48px * var(--k)); height: calc(48px * var(--k)); flex-shrink: 0; border-radius: 50%;
  background: #fff; color: var(--oscuro); box-shadow: 0 4px 0 var(--sombra);
  display: flex; align-items: center; justify-content: center;
}
.modal-fuentes { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(27, 21, 48, .55); }
.modal-fuentes[hidden] { display: none; }
.modal-fuentes-caja { width: min(620px, 100%); max-height: 85dvh; overflow-y: auto; padding: 20px 22px; border-radius: 26px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: aparece .25s ease; }
.modal-fuentes-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-fuentes h2 { font-family: var(--titulos); font-size: calc(24px * var(--k)); line-height: 1.1; color: var(--oscuro); }
.modal-cerrar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--fondo); color: var(--oscuro); font-size: 18px; font-weight: 900; }
.modal-fuentes-nota { margin-top: 8px; font-size: calc(15px * var(--k)); font-weight: 700; color: var(--gris); line-height: 1.4; }
.lista-fuentes { margin-top: 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: calc(15px * var(--k)); line-height: 1.35; }
.lista-fuentes a { color: var(--morado); font-weight: 700; word-break: break-word; }
.fuente-ref { color: var(--gris); font-size: .9em; font-style: italic; }
.btn-sonido {
  width: calc(48px * var(--k)); height: calc(48px * var(--k)); flex-shrink: 0; border-radius: 50%;
  background: #fff; color: var(--oscuro); box-shadow: 0 4px 0 var(--sombra);
  display: flex; align-items: center; justify-content: center;
}
.btn-sonido .off, .btn-sonido.apagado .on { display: none; }
.btn-sonido.apagado .off { display: block; }
.btn-sonido.apagado { opacity: .7; }
.btn-holo-chico { width: calc(48px * var(--k)); height: calc(48px * var(--k)); padding: 0; justify-content: center; }

/* ---------- Avatar ---------- */
.avatar { position: relative; width: 100%; height: 100%; }
.avatar svg, .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; }
.avatar img { object-fit: cover; }
.avatar.con-imagenes { background: #000; }
/* En los círculos de la app se acerca al rostro; en el holograma se ve el busto completo. */
.avatar.con-imagenes:not(.holo-avatar) img { transform: scale(var(--zoom, 1.2)); transform-origin: 50% var(--foco, 45%); }
.avatar .boca { display: none; }
.avatar[data-boca="cerrada"] .boca-cerrada,
.avatar[data-boca="media"] .boca-media,
.avatar[data-boca="abierta"] .boca-abierta { display: inline; }
.avatar.con-imagenes img.boca { display: block; visibility: hidden; }
.avatar.con-imagenes[data-boca="cerrada"] .boca-cerrada,
.avatar.con-imagenes[data-boca="media"] .boca-media,
.avatar.con-imagenes[data-boca="abierta"] .boca-abierta { visibility: visible; }
.avatar .img-parpadeo { visibility: hidden; }
.avatar.con-imagenes.parpadea[data-boca="cerrada"] .boca-cerrada { visibility: hidden; }
.avatar.con-imagenes.parpadea[data-boca="cerrada"] .img-parpadeo { visibility: visible; }
/* Retrato de una sola imagen: no hay bocas, así que "late" un poco al ritmo de la voz. */
.avatar.imagen-simple { transition: transform .08s ease-out; transform-origin: 50% 60%; }
.avatar.imagen-simple[data-boca="media"] { transform: scale(1.015); }
.avatar.imagen-simple[data-boca="abierta"] { transform: scale(1.03); }
/* ---------- 1 · Inicio ---------- */
#pantalla-inicio { align-items: center; padding-top: max(40px, env(safe-area-inset-top)); }
.inicio-grupo { position: relative; width: min(360px, 100%); aspect-ratio: 360 / 280; flex-shrink: 0; }
.inicio-cara {
  position: absolute; aspect-ratio: 1; border-radius: 50%; border: 6px solid #fff; overflow: hidden;
  animation: flota 3.2s ease-in-out infinite;
}
.inicio-cara { background: var(--c-fondo, #EEE); box-shadow: 0 6px 0 var(--c-oscuro, #555); }
/* 5 lugares en abanico: el 3 es el centro (más grande), 2 y 4 a los lados, 1 y 5 en los extremos. */
.cara-1 { left: 0; top: 44%; width: 25%; z-index: 1; animation-delay: 1.2s; }
.cara-2 { left: 12%; top: 22%; width: 30%; z-index: 2; animation-delay: .4s; }
.cara-3 { left: 31%; top: 38%; width: 38%; z-index: 3; }
.cara-4 { right: 12%; top: 22%; width: 30%; z-index: 2; animation-delay: .8s; }
.cara-5 { right: 0; top: 44%; width: 25%; z-index: 1; animation-delay: 1.6s; }
.inicio-hola {
  position: absolute; left: 50%; top: 0; transform: translateX(-30%);
  padding: 10px 16px; border-radius: 22px 22px 22px 6px; background: #fff; box-shadow: 0 4px 0 var(--lila-sombra);
  font-family: var(--titulos); font-weight: 800; font-size: calc(22px * var(--k)); line-height: 1;
  animation: saluda 2.4s ease-in-out infinite;
}
.inicio-texto { text-align: center; }
.inicio-titulo { margin-top: 24px; font-family: var(--titulos); font-weight: 800; font-size: calc(clamp(36px, 12vw, 48px) * var(--k)); line-height: .95; color: var(--morado); user-select: none; }
.inicio-sub { margin-top: 14px; font-size: calc(clamp(17px, 5vw, 20px) * var(--k)); line-height: 1.35; font-weight: 700; color: var(--gris); }
.inicio-acciones { width: 100%; display: flex; flex-direction: column; align-items: center; }
.nota-ia { margin-top: 20px; display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--k)); font-weight: 700; color: var(--gris); text-align: center; }

/* ---------- 2 · Elegir ---------- */
#pantalla-elegir { padding-top: max(24px, env(safe-area-inset-top)); }
.elegir-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.elegir-cabeza .btn-holo span { display: none; }
.elegir-cabeza .btn-holo { width: calc(52px * var(--k)); padding: 0; justify-content: center; }
.lista-personajes { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.tarjeta {
  position: relative; width: 100%; min-height: 140px; border-radius: 30px; padding: 12px 16px 12px 12px;
  display: flex; align-items: center; gap: 14px; text-align: left; overflow: hidden;
  background: var(--c-principal); box-shadow: 0 7px 0 var(--c-oscuro); --sombra-btn: var(--c-oscuro);
  color: var(--c-texto);
}
.tarjeta::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; }
.tarjeta-foto { width: clamp(96px, 30vw, 126px); aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; background: var(--c-fondo); border: 5px solid #fff; overflow: hidden; }
.tarjeta-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-nombre { font-family: var(--titulos); font-weight: 800; font-size: calc(clamp(21px, 6.5vw, 25px) * var(--k)); line-height: .95; }
.tarjeta-lema { font-size: calc(15px * var(--k)); font-weight: 800; line-height: 1.25; }
.tarjeta-epoca { font-size: calc(13px * var(--k)); font-weight: 800; opacity: .85; }
.tarjeta-extra { align-self: flex-start; display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--c-oscuro); font-size: calc(13px * var(--k)); font-weight: 800; }
.tarjeta.elegida { animation: elegida .5s ease; }
.tarjeta-rol {
  align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .18);
  font-size: calc(11px * var(--k)); font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
}
.tarjeta-rol:empty { display: none; }
.filtros { margin: 14px -18px 0; padding: 0 18px 6px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex-shrink: 0; height: calc(42px * var(--k)); padding: 0 16px; border-radius: 999px;
  background: #fff; color: var(--morado); box-shadow: 0 3px 0 var(--lila-sombra);
  font-weight: 800; font-size: calc(15px * var(--k)); white-space: nowrap; transition: background .2s, color .2s;
}
.filtro small { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--lila); font-size: .8em; }
.filtro.activo { background: var(--morado); color: #fff; box-shadow: 0 3px 0 var(--morado-osc); }
.filtro.activo small { background: rgba(255, 255, 255, .22); }
.elegir-voz { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 14px; }
#texto-elegir-voz { font-size: calc(17px * var(--k)); font-weight: 800; line-height: 1.25; color: var(--gris); }
#texto-elegir-voz span { font-weight: 700; font-size: calc(15px * var(--k)); }

/* ---------- Barra superior ---------- */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.barra-derecha { display: flex; align-items: center; gap: 10px; }
.btn-volver {
  width: calc(56px * var(--k)); height: calc(56px * var(--k)); flex-shrink: 0; border-radius: 50%; background: #fff; color: var(--oscuro);
  box-shadow: 0 4px 0 var(--sombra); --sombra-btn: var(--sombra);
  display: flex; align-items: center; justify-content: center;
}
.sello-ia { padding: 6px 12px; border-radius: 999px; background: #fff; font-size: calc(13px * var(--k)); font-weight: 800; color: var(--oscuro); user-select: none; }

/* ---------- 3-6 · Conversación ---------- */
#pantalla-charla { padding-top: max(14px, env(safe-area-inset-top)); height: 100dvh; min-height: 0; --av-actual: var(--av); }
#pantalla-charla[data-fase="escuchando"], #pantalla-charla[data-fase="pensando"] { --av-actual: calc(var(--av) * .85); }
#pantalla-charla[data-fase="hablando"] { --av-actual: calc(var(--av) * .93); }
.charla-izq { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.charla-der { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.charla-nombre { margin-top: 2px; text-align: center; font-family: var(--titulos); font-weight: 800; font-size: calc(clamp(26px, 8.4vw, 34px) * var(--k)); line-height: 1; color: var(--oscuro); }
.charla-epoca { text-align: center; font-size: calc(14px * var(--k)); font-weight: 800; color: var(--oscuro); opacity: .7; }

.escena { position: relative; margin-top: 10px; width: calc(var(--av) + 24px); height: calc(var(--av) + 8px); display: flex; justify-content: center; align-items: center; }
.avatar-marco {
  width: var(--av-actual); height: var(--av-actual); border-radius: 50%; overflow: hidden;
  background: var(--principal); border: calc(8px * var(--k)) solid #fff; box-shadow: 0 8px 0 var(--sombra);
  transition: width .35s, height .35s, box-shadow .35s;
  animation: respira 4s ease-in-out infinite;
}
[data-fase="escuchando"] .avatar-marco { box-shadow: 0 0 0 8px rgba(30,138,76,.35), 0 8px 0 8px rgba(30,138,76,.35); }
[data-fase="hablando"] .avatar-marco { box-shadow: 0 0 0 10px var(--sombra), 0 8px 0 10px var(--sombra); animation: none; }

.nube-pensar, .nube-pensar-chica { position: absolute; display: none; background: #fff; box-shadow: 0 4px 0 var(--sombra); }
.nube-pensar { right: -18px; top: 0; width: calc(92px * var(--k)); height: calc(58px * var(--k)); border-radius: 30px; align-items: center; justify-content: center; gap: 7px; }
.nube-pensar span { width: calc(12px * var(--k)); height: calc(12px * var(--k)); border-radius: 50%; background: var(--oscuro); animation: punto 1.2s infinite; }
.nube-pensar span:nth-child(2) { animation-delay: .15s; }
.nube-pensar span:nth-child(3) { animation-delay: .3s; }
.nube-pensar-chica { right: 8%; top: 26%; width: 18px; height: 18px; border-radius: 50%; }
[data-fase="pensando"] .nube-pensar { display: flex; animation: aparece .3s ease; }
[data-fase="pensando"] .nube-pensar-chica { display: block; }

.pastilla-estado {
  align-self: center; margin-top: 16px; display: none; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px;
  color: #fff; font-family: var(--titulos); font-weight: 800; font-size: calc(24px * var(--k)); line-height: 1;
}
[data-fase="escuchando"] .pastilla-estado { display: flex; background: var(--verde); }
[data-fase="pensando"] .pastilla-estado { display: flex; background: var(--oscuro); }

.burbuja-usuario { margin: 16px 4px 0; display: flex; flex-direction: column; align-items: flex-end; }
.burbuja-usuario-texto {
  max-width: min(100%, 520px); padding: 14px 18px; border-radius: 24px 24px 6px 24px;
  background: var(--morado); color: #fff; font-size: calc(20px * var(--k)); font-weight: 800; line-height: 1.3;
  animation: aparece .25s ease;
}
.burbuja-usuario-texto .interino { opacity: .55; }
.burbuja-quien { margin: 6px 4px 0; font-size: calc(14px * var(--k)); font-weight: 800; color: var(--oscuro); }
[data-fase="listo"] .burbuja-usuario, [data-fase="hablando"] .burbuja-usuario { display: none; }

.burbuja-personaje { position: relative; flex-shrink: 1; min-height: 90px; display: flex; flex-direction: column; margin-top: 20px; padding: 16px 20px; border-radius: 26px; background: #fff; box-shadow: 0 5px 0 var(--sombra); }
.burbuja-personaje::before { content: ""; position: absolute; left: 50%; top: -12px; margin-left: -14px; width: 28px; height: 28px; background: #fff; transform: rotate(45deg); border-radius: 4px; }
[data-fase="escuchando"] .burbuja-personaje, [data-fase="pensando"] .burbuja-personaje { display: none; }
.burbuja-cabeza { display: none; align-items: center; gap: 8px; margin-bottom: 8px; font-size: calc(14px * var(--k)); font-weight: 800; color: var(--oscuro); }
[data-fase="hablando"] .burbuja-cabeza { display: flex; }
.barritas { display: flex; align-items: center; gap: 3px; height: 18px; }
.barritas i { width: 4px; height: 18px; border-radius: 2px; background: var(--principal); animation: barra .9s ease-in-out infinite; }
.barritas i:nth-child(2) { animation-delay: .2s; }
.barritas i:nth-child(3) { animation-delay: .4s; }
#subtitulo { position: relative; min-height: 0; flex: 1; font-size: calc(17px * var(--k)); font-weight: 700; line-height: 1.4; text-align: center; overflow-y: auto; }
[data-fase="hablando"] #subtitulo { font-size: calc(20px * var(--k)); font-weight: 800; text-align: left; }
#subtitulo .por-decir { color: #9AA3B5; }

.sugerencias { flex-shrink: 0; margin-top: 14px; }
.sugerencias-titulo { font-size: calc(15px * var(--k)); font-weight: 800; color: var(--oscuro); }
.sugerencias-lista { margin: 8px -18px 0; padding: 0 18px 10px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.sugerencias-lista::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; min-height: calc(52px * var(--k)); padding: 8px 18px; border-radius: 999px; scroll-snap-align: start;
  background: #fff; box-shadow: 0 4px 0 var(--sombra); --sombra-btn: var(--sombra);
  font-size: calc(16px * var(--k)); font-weight: 800; color: var(--tinta); white-space: nowrap;
}
[data-fase="escuchando"] .sugerencias, [data-fase="pensando"] .sugerencias, [data-fase="hablando"] .sugerencias { display: none; }

.teclado { margin-top: 14px; display: flex; gap: 10px; flex-shrink: 0; }
.teclado input {
  flex: 1; min-width: 0; height: calc(58px * var(--k)); padding: 0 18px; border: 3px solid var(--sombra); border-radius: 22px;
  font: inherit; font-size: calc(18px * var(--k)); font-weight: 700; color: var(--tinta); background: #fff;
}
.teclado button { width: calc(58px * var(--k)); height: calc(58px * var(--k)); flex-shrink: 0; border-radius: 20px; background: var(--principal); color: #fff; box-shadow: 0 4px 0 var(--oscuro); display: flex; align-items: center; justify-content: center; }
[data-fase="pensando"] .teclado, [data-fase="escuchando"] .teclado { display: none; }

.controles { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; padding-top: 8px; }
.btn-lateral {
  width: calc(86px * var(--k)); display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: calc(14px * var(--k)); font-weight: 800; line-height: 1.15; color: var(--oscuro); text-align: center;
}
.btn-lateral .icono {
  width: calc(64px * var(--k)); height: calc(64px * var(--k)); border-radius: 22px; background: #fff; box-shadow: 0 4px 0 var(--sombra);
  display: flex; align-items: center; justify-content: center;
}
.btn-lateral .icono svg { width: calc(30px * var(--k)); height: calc(30px * var(--k)); }
.btn-lateral:active .icono { transform: translateY(4px); box-shadow: 0 0 0 var(--sombra); }
.btn-lateral:disabled { visibility: hidden; }

.mic-zona { --mic: calc(120px * var(--k)); position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.btn-mic {
  position: relative; z-index: 1; width: var(--mic); height: var(--mic); border-radius: 50%;
  background: var(--principal); color: #fff; box-shadow: 0 8px 0 var(--oscuro);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.btn-mic > svg { width: 52%; height: 52%; }
.btn-mic:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--oscuro); }
[data-fase="listo"] .btn-mic { animation: late 2s ease-in-out infinite; }
[data-fase="pensando"] .btn-mic { border: 4px dashed var(--sombra); background: var(--suave); color: var(--sombra); box-shadow: none; cursor: default; transform: scale(.88); }
[data-fase="hablando"] .btn-mic { background: var(--oscuro); box-shadow: 0 8px 0 rgba(0,0,0,.35); transform: scale(.94); }
[data-fase="hablando"] .btn-mic > svg { width: 40%; height: 40%; }
.btn-mic .barra-voz { width: 7%; height: 36%; border-radius: 4px; background: #fff; animation: barra .8s ease-in-out infinite; }
.btn-mic .barra-voz:nth-child(2) { animation-delay: .2s; }
.btn-mic .barra-voz:nth-child(3) { animation-delay: .4s; }
.btn-mic .barra-voz:nth-child(4) { animation-delay: .1s; }
.mic-ondas { position: absolute; top: 0; left: 50%; width: var(--mic); height: var(--mic); margin-left: calc(var(--mic) / -2); display: none; }
.mic-ondas i { position: absolute; inset: 0; border-radius: 50%; background: var(--principal); animation: onda 1.6s ease-out infinite; }
.mic-ondas i:nth-child(2) { animation-delay: .8s; }
[data-fase="escuchando"] .mic-ondas { display: block; }
.mic-texto { font-family: var(--titulos); font-size: calc(22px * var(--k)); font-weight: 800; color: var(--oscuro); text-align: center; line-height: 1.1; }

/* ---------- 7 · Lecturas ---------- */
.barra-lecturas { justify-content: flex-start; }
.avatar-mini { width: calc(56px * var(--k)); height: calc(56px * var(--k)); flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--principal); border: 4px solid #fff; }
.lecturas-quien { font-size: calc(15px * var(--k)); font-weight: 800; color: var(--oscuro); line-height: 1.2; }
.lecturas-cuerpo { flex: 1; display: flex; flex-direction: column; }
#pantalla-lecturas .titulo { margin-top: 20px; color: var(--oscuro); }
#pantalla-lecturas .subtitulo { color: var(--oscuro); opacity: .85; }
.lista-lecturas { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.lectura {
  width: 100%; min-height: 92px; padding: 12px 14px; border-radius: 24px; text-align: left;
  background: #fff; box-shadow: 0 5px 0 var(--sombra); --sombra-btn: var(--sombra);
  display: flex; align-items: center; gap: 12px;
}
.lectura.activa { background: var(--principal); color: #fff; box-shadow: 0 5px 0 var(--oscuro); }
.lectura-portada { width: 56px; height: 68px; flex-shrink: 0; border-radius: 8px 14px 14px 8px; background: var(--oscuro); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: inset 6px 0 0 rgba(0,0,0,.2); }
.lectura.activa .lectura-portada { background: #fff; color: var(--oscuro); }
.lectura-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lectura-titulo { font-family: var(--titulos); font-weight: 800; font-size: calc(20px * var(--k)); line-height: 1.05; }
.lectura-obra { font-size: calc(14px * var(--k)); font-weight: 700; opacity: .8; }
.lectura-play { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--principal); color: #fff; display: flex; align-items: center; justify-content: center; }
.lectura.activa .lectura-play { background: #fff; color: var(--principal); }

.lector { margin-top: 18px; padding: 16px 18px; border-radius: 26px; background: var(--oscuro); color: #fff; display: flex; flex-direction: column; gap: 12px; animation: aparece .3s ease; }
.lector-cabeza { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: calc(15px * var(--k)); }
#lector-estado { font-family: var(--titulos); font-size: calc(20px * var(--k)); }
.lector-barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.lector-barras div { height: 10px; border-radius: 5px; background: rgba(255,255,255,.3); transition: background .3s; }
.lector-barras div.hecha { background: #fff; }
.lector-barras div.ahora { background: rgba(255,255,255,.7); animation: late 1.2s ease-in-out infinite; }
.lector-texto { font-size: calc(17px * var(--k)); font-weight: 700; line-height: 1.45; max-height: 9.5em; overflow-y: auto; }
.lector-texto .por-decir { opacity: .5; }

/* ---------- 8 · Error ---------- */
.error-cuerpo { width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; }
.error-icono { margin: 8px auto 0; width: calc(120px * var(--k)); height: calc(120px * var(--k)); border-radius: 50%; background: #fff; color: var(--oscuro); box-shadow: 0 6px 0 var(--sombra); display: flex; align-items: center; justify-content: center; }
#pantalla-error .titulo { margin-top: 18px; }
.pasos { margin-top: 18px; padding: 16px; border-radius: 24px; background: #fff; box-shadow: 0 4px 0 var(--lila-sombra); list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pasos li { display: flex; align-items: center; gap: 12px; font-size: calc(17px * var(--k)); font-weight: 800; line-height: 1.3; }
.pasos span { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--morado); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--titulos); font-weight: 800; font-size: 22px; }
.error-mientras { margin-top: 22px; font-size: calc(16px * var(--k)); font-weight: 800; color: var(--gris); }
.baldosas { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.baldosa {
  min-height: 92px; padding: 12px; border-radius: 22px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  font-size: calc(16px * var(--k)); font-weight: 800; line-height: 1.2; color: var(--tinta);
}
.baldosa:nth-child(4n+1) { background: #FFF0C2; box-shadow: 0 4px 0 #EBCB73; --sombra-btn: #EBCB73; }
.baldosa:nth-child(4n+2) { background: #FFE1DC; box-shadow: 0 4px 0 #F0B5AC; --sombra-btn: #F0B5AC; }
.baldosa:nth-child(4n+3) { background: #D9ECFF; box-shadow: 0 4px 0 #A9CBEF; --sombra-btn: #A9CBEF; }
.baldosa:nth-child(4n+4) { background: #E3F5E9; box-shadow: 0 4px 0 #A6D9B8; --sombra-btn: #A6D9B8; }

/* ---------- Avisos ---------- */
.aviso {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 80; transform: translateX(-50%);
  width: min(480px, calc(100% - 32px)); padding: 14px 18px; border-radius: 20px;
  background: var(--tinta); color: #fff; font-weight: 800; font-size: calc(16px * var(--k)); text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: sube .3s ease;
}
.sello-demo { position: fixed; right: 12px; bottom: 12px; z-index: 40; padding: 3px 8px; border-radius: 8px; background: #FFB800; color: #2E1F00; font-size: 11px; font-weight: 900; letter-spacing: .08em; pointer-events: none; }
body.holo .sello-demo { display: none; }

/* ======================================================================
   Pantallas anchas: tablet horizontal, computadora, proyector, TV
   y celular girado (horizontal). Dos columnas.
   ====================================================================== */
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) {
  .pantalla { max-width: calc(1280px * var(--k)); padding-left: max(28px, 3vw, env(safe-area-inset-left)); padding-right: max(28px, 3vw, env(safe-area-inset-right)); }

  /* Inicio */
  #pantalla-inicio {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
    column-gap: 5vw; align-items: center; justify-items: center; padding-top: 24px;
  }
  #pantalla-inicio.activa { display: grid; }
  .inicio-grupo { grid-column: 1; grid-row: 1 / -1; width: min(42vw, 72vh, calc(620px * var(--k))); }
  .inicio-texto { grid-column: 2; grid-row: 2; }
  .inicio-acciones { grid-column: 2; grid-row: 3; margin-top: 4vh; max-width: calc(520px * var(--k)); }
  #pantalla-inicio .espacio { display: none; }
  .inicio-titulo { margin-top: 0; font-size: calc(clamp(44px, 5.4vw, 76px) * var(--k)); }
  .inicio-sub { font-size: calc(clamp(18px, 1.8vw, 26px) * var(--k)); }

  /* Elegir */
  .elegir-cabeza .btn-holo { width: auto; padding: 0 20px; }
  .elegir-cabeza .btn-holo span { display: inline; }
  .lista-personajes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2.4vw, 36px); margin-top: 3vh; }
  .tarjeta { flex-direction: column; text-align: center; padding: clamp(16px, 2.4vh, 28px) 18px clamp(18px, 3vh, 32px); min-height: 0; }
  .tarjeta-foto { width: min(16vw, 30vh, calc(220px * var(--k))); }
  .tarjeta-info { align-items: center; }
  .tarjeta-extra, .tarjeta-rol { align-self: center; }
  .filtros { margin: 3vh 0 0; padding: 0; flex-wrap: wrap; }
  .tarjeta-nombre { font-size: calc(clamp(22px, 2.2vw, 32px) * var(--k)); }

  /* Conversación */
  #pantalla-charla {
    --av: min(34vw, 58vh, calc(440px * var(--k)));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(20px, 4vw, 72px);
  }
  #pantalla-charla.activa { display: grid; }
  #pantalla-charla .barra { grid-column: 1 / -1; }
  .charla-izq { justify-content: center; }
  .charla-der { justify-content: center; padding-bottom: 8px; }
  .charla-der .espacio { flex: 0 0 auto; min-height: 3vh; }
  .charla-nombre { font-size: calc(clamp(30px, 3.4vw, 52px) * var(--k)); }
  .burbuja-personaje { flex: 0 1 auto; }
  .burbuja-personaje::before { left: -10px; top: 32px; margin-left: 0; }
  .sugerencias-lista { flex-wrap: wrap; overflow: visible; margin: 8px 0 0; padding: 0 0 6px; }
  .chip { white-space: normal; text-align: left; }
  .controles { justify-content: center; gap: clamp(24px, 4vw, 64px); }

  /* Lecturas */
  .lecturas-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: start; }
  .lector { position: sticky; top: 24px; margin-top: 20px; }
  .lector-texto { max-height: 50vh; font-size: calc(19px * var(--k)); }
}

/* Celular girado o pantallas bajitas: todo más compacto */
@media (orientation: landscape) and (max-height: 560px) {
  .pantalla { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  #pantalla-charla { --av: min(30vw, 54vh); }
  .charla-nombre { font-size: 26px; }
  .burbuja-personaje { margin-top: 10px; padding: 10px 14px; }
  #subtitulo, [data-fase="hablando"] #subtitulo { font-size: 16px; }
  .sugerencias { margin-top: 8px; }
  .sugerencias-titulo { display: none; }
  .chip { min-height: 40px; font-size: 14px; }
  .mic-zona { --mic: 84px; }
  .mic-texto { font-size: 17px; }
  .btn-lateral .icono { width: 50px; height: 50px; }
  #pantalla-elegir .titulo { font-size: 28px; }
  #pantalla-elegir .subtitulo { margin-top: 2px; font-size: 15px; }
  .lista-personajes { margin-top: 12px; gap: 12px; }
  .tarjeta { flex-direction: row; text-align: left; padding: 10px; gap: 10px; }
  .tarjeta-foto { width: min(13vw, 24vh); border-width: 3px; }
  .tarjeta-info { align-items: flex-start; gap: 3px; }
  .tarjeta-extra, .tarjeta-rol { align-self: flex-start; }
  .filtros { margin-top: 8px; }
  .tarjeta-nombre { font-size: 19px; }
  .tarjeta-lema { font-size: 13px; }
  .elegir-voz { margin-top: 10px; }
  .btn-redondo { width: 56px; height: 56px; }
  .inicio-titulo { font-size: 40px; }
  .btn-grande { height: 70px; font-size: 24px; }
}

/* Celulares verticales comunes (hasta ~860 px de alto) */
@media (orientation: portrait) and (max-height: 860px) {
  #pantalla-charla { --av: 168px; }
  .mic-zona { --mic: 106px; }
  .charla-nombre { font-size: 28px; }
  .mic-texto { font-size: 19px; }
}
/* Celular vertical bajito */
@media (orientation: portrait) and (max-height: 720px) {
  #pantalla-charla { --av: 136px; }
  .mic-zona { --mic: 94px; }
  .btn-lateral .icono { width: 54px; height: 54px; }
  .burbuja-personaje { margin-top: 14px; padding: 12px 16px; }
  #subtitulo, [data-fase="hablando"] #subtitulo { font-size: 17px; }
}
/* Tablet vertical */
@media (orientation: portrait) and (min-width: 600px) and (min-height: 860px) {
  .pantalla { max-width: 720px; }
  #pantalla-charla { --av: min(44vw, 34vh); }
  .mic-zona { --mic: 140px; }
}

/* ---------- 9 · Holograma ---------- */
body.holo { background: #000 !important; cursor: none; overflow: hidden; }
body.holo.panel-abierto { cursor: auto; }
#pantalla-holo { max-width: none; padding: 0; background: #000; height: 100dvh; min-height: 0; position: relative; }
.holo-toque { --tam: 30; position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; outline: none; touch-action: none; }
.holo-toque { --holo-t: calc(var(--tam) * 1vmin); --holo-d: calc(var(--holo-t) * .6); }
/* Cada vista se recorta como la cara de la pirámide (trapecio que se angosta hacia el centro):
   así las 4 no se tapan entre sí y el centro queda libre para la punta. */
.holo-vista {
  position: absolute; left: 50%; top: 50%; width: var(--holo-t); height: var(--holo-t);
  margin: calc(var(--holo-t) / -2) 0 0 calc(var(--holo-t) / -2);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 40% 100%, 0 60%);
}
/* Cada vista mira hacia afuera: la cabeza apunta al borde, para que el reflejo en la pirámide salga derecho. */
.holo-arriba { transform: translateY(calc(var(--holo-d) * -1)); }
.holo-abajo { transform: translateY(var(--holo-d)) rotate(180deg); }
.holo-izquierda { transform: translateX(calc(var(--holo-d) * -1)) rotate(-90deg); }
.holo-derecha { transform: translateX(var(--holo-d)) rotate(90deg); }
.holo-avatar { position: absolute; inset: 0; }
.holo-avatar.con-imagenes { background: transparent; }
/* El busto se desvanece hacia el centro de la pirámide: la cabeza queda "flotando". */
.holo-avatar.con-imagenes img {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
}
.holo-halo { position: absolute; inset: -12%; border-radius: 50%; opacity: 0; transition: opacity .4s; background: radial-gradient(circle, var(--halo, var(--principal)) 0, transparent 62%); }
[data-fase="escuchando"] .holo-halo { --halo: rgba(46, 229, 122, .55); opacity: 1; animation: halo 1.2s ease-in-out infinite; }
[data-fase="pensando"] .holo-halo { --halo: rgba(255, 184, 0, .45); opacity: 1; animation: halo .8s ease-in-out infinite; }
[data-fase="hablando"] .holo-halo { --halo: color-mix(in srgb, var(--principal) 45%, transparent); opacity: .8; }
.holo-centro { position: absolute; left: 50%; top: 50%; width: 22vmin; height: 22vmin; margin: -11vmin 0 0 -11vmin; display: none; pointer-events: none;
  background: linear-gradient(#444, #444) center / 2px 100% no-repeat, linear-gradient(#444, #444) center / 100% 2px no-repeat; }
.holo-centro::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6vmin; height: 6vmin; margin: -3vmin 0 0 -3vmin; border: 2px solid #666; }
.holo-toque.guia .holo-centro { display: block; }
.holo-nombre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-family: var(--titulos); font-weight: 800; font-size: 4vmin; opacity: 0; transition: opacity .4s; pointer-events: none; text-align: center; }
.holo-nombre.visible { opacity: 1; }

.holo-panel { position: absolute; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.72); overflow-y: auto; }
.holo-panel.abierto { display: flex; animation: aparece .25s ease; }
.holo-panel-caja { width: min(560px, 100%); max-height: 100%; overflow-y: auto; padding: 22px; border-radius: 28px; background: #17132B; color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.holo-panel h2 { font-family: var(--titulos); font-size: calc(30px * var(--k)); line-height: 1; color: #9FE8FF; }
.holo-ayuda { margin-top: 8px; font-size: calc(15px * var(--k)); font-weight: 700; color: #C9C3E6; line-height: 1.4; }
.holo-fila-titulo { margin-top: 18px; font-size: calc(14px * var(--k)); font-weight: 800; color: #9FE8FF; text-transform: uppercase; letter-spacing: .06em; }
.holo-personajes { margin-top: 8px; display: flex; gap: 10px; }
.holo-personajes button { flex: 1; padding: 8px; border-radius: 18px; background: #26204A; border: 3px solid transparent; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; font-size: calc(14px * var(--k)); line-height: 1.1; }
.holo-personajes button.elegido { border-color: #9FE8FF; background: #2F2860; }
.holo-personajes .avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--c); }
.holo-tamano { margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.holo-tamano button { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: #26204A; font-size: 28px; font-weight: 800; line-height: 1; }
.holo-tamano input { flex: 1; accent-color: #9FE8FF; height: 30px; }
.holo-opcion { margin-top: 14px; display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: calc(15px * var(--k)); line-height: 1.3; cursor: pointer; }
.holo-opcion input { width: 22px; height: 22px; flex-shrink: 0; accent-color: #9FE8FF; }
.holo-como { margin-top: 18px; padding: 12px 14px; border-radius: 16px; background: #221C42; font-size: calc(14px * var(--k)); line-height: 1.5; color: #DCD7F5; }
.holo-como kbd { padding: 1px 6px; border-radius: 6px; background: #3A3270; font: inherit; font-weight: 800; }
.holo-botones { margin-top: 6px; display: flex; flex-direction: column; align-items: stretch; }
.holo-botones .btn-texto { color: #C9C3E6; }

/* ---------- Animaciones ---------- */
@keyframes late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes onda { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes barra { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes punto { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-6px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sube { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes saluda { 0%, 100% { transform: translateX(-30%) rotate(0); } 50% { transform: translateX(-30%) rotate(-5deg); } }
@keyframes elegida { 50% { transform: scale(1.04); } }
@keyframes halo { 50% { transform: scale(1.08); opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}