/* Prueba de nivel «Una semana en Lyon» — hoja de estilo.
 *
 * Dirección visual: un teléfono encendido sobre la mesa de Camille. La interfaz es un chat
 * blanco y tranquilo, con la paleta y las dos letras de Ecoleng (../DESIGN.md); lo que da
 * carácter son los objetos que llegan al chat (la nota de voz, el papel de Odile con el café,
 * la pizarra, la carta), las escenas animadas en SVG y el momento de la tarjeta del nivel.
 * Solo se animan transform, opacity y, en los dibujos, stroke-dashoffset. */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap");

:root {
  color-scheme: light;
  /* Paleta de Ecoleng */
  --morado: #8A2976;
  --azul: #1895BD;
  --turquesa: #1FA7A2;
  --titulo: #222221;
  --texto: #000000;
  --borde: #EEEEEE;
  --blanco: #FFFFFF;
  --degradado-inicio: #CD72BB;
  /* Derivados: tintes de la paleta, el azul oscurecido para texto blanco (AA) y el rojo del
     fallo, que no está en la paleta a propósito */
  --azul-oscuro: #13799A;
  --fondo-pagina: #EFECE7;
  --fondo-chat: #FAF9F7;
  --azul-claro: #E6F3F8;
  --azul-texto: #13799A;
  --turquesa-claro: #E4F5F4;
  --turquesa-texto: #0F5E5B;
  --rojo: #B8432F;
  --rojo-claro: #FBEBE8;
  --rojo-texto: #8F2A1D;
  --gris-texto: #5C5B57;
  --papel: #FFF9E6;
  --papel-sombra: rgba(90, 70, 20, 0.18);
  --pizarra: #2E3A36;
  --tiza: #F3F1EA;
  --degradado-dia: linear-gradient(135deg, var(--morado), var(--azul-oscuro));
  /* Letra */
  --titulos: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --cuerpo: Roboto, "Helvetica Neue", Arial, sans-serif;
  --serifa: Georgia, "Times New Roman", serif;
  /* Forma */
  --radio: 8px;
  --radio-xs: 4px;
  --sombra: 0 2px 12px rgba(0, 0, 0, 0.08);
  --sombra-alta: 0 4px 20px rgba(0, 0, 0, 0.12);
  --foco: 0 0 0 3px rgba(24, 149, 189, 0.35);
  --ancho-columna: 480px;
  --ancho-columna-ancha: 560px;
  --ancho-panel: 300px;
  --rapido: 160ms;
  --medio: 260ms;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo-pagina);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 18px;
  line-height: 1.3;
  min-height: 100dvh;
}

::selection { background: var(--azul-claro); color: var(--texto); }

h1, h2, h3 {
  font-family: var(--titulos);
  font-weight: 600;
  color: var(--titulo);
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

:focus-visible { outline: none; box-shadow: var(--foco); }

[hidden] { display: none !important; }

em[lang="fr"], .fr { font-style: italic; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 28px;
  background: var(--morado); color: var(--blanco);
  border: 0; border-radius: var(--radio);
  font-weight: 500; font-size: 16px; line-height: 22px;
  box-shadow: var(--sombra);
  transition: transform var(--rapido) ease-out, box-shadow var(--rapido) ease-out, opacity var(--rapido) ease-out;
}
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: 0.5; cursor: default; }
.boton--secundario { background: var(--blanco); color: var(--titulo); border: 1px solid var(--borde); box-shadow: none; }
.boton--enlace { background: none; color: var(--azul-texto); box-shadow: none; padding: 8px 12px; min-height: 44px; }
/* 24 px y no los 22 del libro de estilo: el blanco sobre la parte clara del degradado da 4,1:1, y
   a 24 px cuenta como texto grande (basta 3:1). Sin tocar los colores ni el grosor de la marca. */
.boton--cta {
  min-height: 62px; padding: 20px 30px;
  font-size: 24px; line-height: 24px;
  background: linear-gradient(180deg, var(--degradado-inicio), var(--morado));
  border: 1px solid #333333; border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.15) 0 18px 40px -10px;
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--turquesa); color: var(--blanco); }
  .boton--secundario:hover { background: var(--blanco); color: var(--azul-texto); border-color: var(--azul); }
  .boton--enlace:hover { background: none; color: var(--turquesa-texto); }
  .boton--cta:hover { background: var(--turquesa); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.18) 0 22px 44px -12px; }
}

a { color: var(--azul); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--turquesa); } }

/* ---------- Portada ---------- */

.portada {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  max-width: var(--ancho-columna); margin: 0 auto;
  padding: 20px 16px 32px;
  background: var(--blanco);
  box-shadow: var(--sombra);
}
/* align-self: la portada es flex en columna y, sin esto, estira el logo a todo el ancho. */
.portada__logo { height: 36px; width: auto; display: block; align-self: flex-start; }
/* La escena: para sustituirla por una imagen basta con cambiar el contenido de .portada__escena */
.portada__escena { margin: 16px -16px 0; }
.portada__escena .escena__svg { display: block; width: 100%; height: auto; }.portada__cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; padding: 28px 0 16px; }
.portada__titulo { font-size: 46px; line-height: 1.05; }
.portada__subtitulo { font-size: 19px; line-height: 1.3; max-width: 34ch; }
.portada__detalle { font-size: 16px; color: var(--gris-texto); }
.portada__accion { margin-top: 6px; }
.portada__accion .boton--cta { width: 100%; max-width: 320px; }
.sin-js {
  max-width: var(--ancho-columna); margin: 0 auto; padding: 16px;
  background: var(--rojo-claro); color: var(--rojo-texto); font-size: 16px;
}

/* ---------- Marco de la aplicación ---------- */

.app {
  max-width: var(--ancho-columna); margin: 0 auto;
  min-height: 100dvh;
  background: var(--fondo-chat);
  box-shadow: var(--sombra);
  display: flex; flex-direction: column;
}
.panel-semana { display: none; }

.cabecera {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}
.cabecera__logo { height: 30px; width: 30px; display: block; }
.cabecera__dia { font-family: var(--titulos); font-weight: 600; font-size: 19px; color: var(--titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tira { display: flex; gap: 5px; flex: 1; align-items: center; }
.tira i { flex: 1; height: 6px; border-radius: 9999px; background: var(--borde); transition: opacity var(--medio) ease-out; }
.tira i:first-child { flex: 0 0 10px; }
.tira i.hecho { background: var(--azul); }
.tira i.actual { background: var(--morado); }
.boton-icono {
  flex: none; width: 44px; height: 44px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--titulo);
}
.boton-icono svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .boton-icono:hover { color: var(--azul); } }

.chat {
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 48px;
}

/* ---------- Mensajes ---------- */

.msg { max-width: 88%; animation: entrar var(--medio) ease-out both; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

.msg--narrador {
  align-self: center; max-width: 100%;
  text-align: center; color: var(--gris-texto); font-size: 15px; line-height: 1.35;
  padding: 2px 8px; margin: 6px 0;
}
.msg--instruccion { align-self: stretch; max-width: 100%; font-size: 15px; color: var(--gris-texto); margin: 2px 4px 0; }
.msg--instruccion em[lang="fr"] { color: var(--texto); }
/* La consigna destacada (el juego de Hugo): bien visible, no un gris pequeño */
.msg--consigna {
  align-self: stretch; max-width: 100%;
  font-size: 17px; line-height: 1.35; color: var(--titulo); font-weight: 500;
  padding: 12px 14px; border-left: 3px solid var(--morado); background: var(--blanco); border-radius: 0 var(--radio) var(--radio) 0;
}

/* Burbuja de personaje con su avatar (hoy, la inicial; mañana, una imagen en CONFIG.AVATARES) */
.msg--personaje { align-self: flex-start; display: flex; gap: 8px; align-items: flex-end; }
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 9999px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--titulos); font-weight: 600; font-size: 18px;
  background: var(--azul); color: var(--blanco);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--camille { background: var(--morado); }
.avatar--hugo { background: var(--turquesa); }
.avatar--odile { background: var(--azul-oscuro); }
.avatar--grande { width: 40px; height: 40px; font-size: 20px; }

.burbuja {
  position: relative; min-width: 0;
  padding: 10px 14px;
  border-radius: var(--radio);
  background: var(--blanco);
  border: 1px solid var(--borde);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.msg--personaje .burbuja { border-bottom-left-radius: 2px; }
.msg--alumno { align-self: flex-end; }
.msg--alumno .burbuja { background: var(--azul-claro); border-color: var(--azul-claro); border-bottom-right-radius: 2px; padding-right: 44px; }
.burbuja__autor { display: block; font-size: 13px; font-weight: 500; color: var(--morado); margin-bottom: 2px; }
.burbuja__texto { font-size: 18px; line-height: 1.35; }
.burbuja__texto[lang="fr"] { font-style: normal; }
.burbuja__trad { display: block; margin-top: 6px; font-size: 14px; line-height: 1.3; color: var(--gris-texto); }
.burbuja__hora { display: block; text-align: right; font-size: 12px; color: var(--gris-texto); margin-top: 4px; font-variant-numeric: tabular-nums; }

.hueco {
  display: inline-block; min-width: 3.2em; height: 1em; vertical-align: -2px;
  border-bottom: 2px solid var(--morado); background: rgba(138, 41, 118, 0.08);
  border-radius: 2px 2px 0 0; margin: 0 2px;
}

.marca {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blanco);
  animation: marca var(--medio) ease-out both;
}
@keyframes marca { from { opacity: 0; transform: translateY(-50%) scale(0.95); } to { opacity: 1; transform: translateY(-50%); } }
.marca--bien { background: var(--turquesa); }
.marca--mal { background: var(--rojo); }
.marca svg { width: 16px; height: 16px; }

.escribiendo { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; margin-left: 44px; font-size: 14px; color: var(--gris-texto); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); border-bottom-left-radius: 2px; }
.puntos { display: inline-flex; gap: 4px; align-items: center; height: 10px; }
.puntos i { width: 6px; height: 6px; border-radius: 9999px; background: var(--gris-texto); opacity: 0.35; animation: punto 1.2s ease-out infinite; }
.puntos i:nth-child(2) { animation-delay: 200ms; }
.puntos i:nth-child(3) { animation-delay: 400ms; }
@keyframes punto { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

.feedback { align-self: flex-end; font-size: 15px; font-weight: 500; padding: 6px 12px; border-radius: 9999px; animation: entrar var(--medio) ease-out both; }
.feedback--bien { background: var(--turquesa-claro); color: var(--turquesa-texto); }
.feedback--mal { background: var(--rojo-claro); color: var(--rojo-texto); }
.racha { align-self: center; font-family: var(--titulos); font-weight: 700; font-size: 26px; color: var(--morado); padding: 4px 16px; animation: racha 600ms ease-out both; }
@keyframes racha { 0% { opacity: 0; transform: scale(0.95); } 40% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }

/* Cabecera de día: degradado de la marca (o una imagen por día en CONFIG.IMAGENES_DIAS) */
.dia {
  position: relative; overflow: hidden;
  align-self: stretch; max-width: 100%;
  margin: 12px 0 6px;
  padding: 18px 20px;
  background: var(--degradado-dia); color: var(--blanco);
  border-radius: var(--radio);
  animation: entrar var(--medio) ease-out both;
}
/* La foto entre el velo oscuro (para el texto blanco) y el degradado de la marca, que se ve si la foto
   tarda en llegar o no llega. */
.dia--con-imagen { background-image: linear-gradient(180deg, rgba(34, 34, 33, 0.2) 0%, rgba(34, 34, 33, 0.65) 40%, rgba(34, 34, 33, 0.82) 100%), var(--imagen-dia), var(--degradado-dia); background-size: cover; background-position: center; min-height: 160px; display: flex; flex-direction: column; justify-content: flex-end; }
/* Sobre una foto, una sombra suave por si algún punto claro se cuela bajo las letras. */
.dia--con-imagen h2, .dia--con-imagen .dia__texto { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.dia h2, .dia__titulo { color: var(--blanco); font-family: var(--titulos); font-weight: 600; font-size: 28px; line-height: 1.1; }
.dia__texto { margin-top: 6px; font-size: 15px; line-height: 1.35; color: var(--blanco); }
.dia__dibujo { margin: -18px -20px 12px; }
.dia__dibujo .escena__svg { display: block; width: 100%; height: auto; }

/* ---------- Opciones y controles de respuesta ---------- */

.opciones { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.opcion {
  min-height: 52px; padding: 12px 16px; text-align: left;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  font-size: 17px; line-height: 1.3; color: var(--texto);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform var(--rapido) ease-out, box-shadow var(--rapido) ease-out, opacity var(--rapido) ease-out;
}
.opcion:active { transform: scale(0.99); }
.opcion:disabled { opacity: 0.45; cursor: default; }
.opcion.elegida { opacity: 1; border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }
@media (hover: hover) and (pointer: fine) { .opcion:not(:disabled):hover { border-color: var(--azul); box-shadow: var(--sombra); transform: translateY(-1px); } }
.acciones { align-self: stretch; display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap; }
.acciones--centro { justify-content: center; }

.caja-texto {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-size: 18px; line-height: 1.3;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  resize: vertical;
}
.caja-texto:focus-visible { border-color: var(--azul); }
.contador { font-size: 13px; color: var(--gris-texto); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Soportes (todos rectos) ---------- */

.soporte { align-self: stretch; max-width: 100%; margin: 4px 0; animation: entrar var(--medio) ease-out both; }
.soporte__etiqueta { display: block; font-size: 13px; color: var(--gris-texto); margin: 0 4px 6px; }
.soporte__etiqueta::before { content: ""; display: inline-block; width: 10px; height: 2px; background: var(--azul); vertical-align: middle; margin-right: 6px; }

/* Nota de voz */
.nota-voz-fila { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.nota-voz {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); border-bottom-left-radius: 2px;
}
.nota-voz__play {
  flex: none; width: 44px; height: 44px; border-radius: 9999px; border: 0;
  background: var(--azul); color: var(--blanco);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--rapido) ease-out, opacity var(--rapido) ease-out;
}
.nota-voz__play svg { width: 20px; height: 20px; }
.nota-voz__play:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .nota-voz__play:not(:disabled):hover { background: var(--turquesa); } }
.nota-voz__cuerpo { flex: 1; min-width: 0; }
.onda { position: relative; height: 34px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.onda i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: #C9D3D8; }
.onda__progreso { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; clip-path: inset(0 100% 0 0); }
.onda__progreso i { background: var(--azul); }
.onda.sonando .onda__progreso { transition: clip-path linear; }
.nota-voz__pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; font-size: 13px; color: var(--gris-texto); font-variant-numeric: tabular-nums; }
.nota-voz__autor { font-weight: 500; color: var(--morado); }
.sin-voz { display: block; margin-top: 8px; font-size: 14px; color: var(--gris-texto); border-top: 1px dashed var(--borde); padding-top: 8px; }

.grupo { display: flex; flex-direction: column; gap: 6px; }
.grupo .msg--personaje { max-width: 92%; }

/* Papel (nota pegada) */
.papel {
  position: relative; overflow: hidden;
  margin: 10px auto 6px;
  width: min(100%, 360px);
  padding: 22px 22px 20px;
  background: var(--papel);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 40%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px -8px var(--papel-sombra);
  border-radius: 2px;
  font-size: 18px; line-height: 1.45;
}
.papel--nota::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 92px; height: 18px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.papel__texto[lang="fr"] { font-style: normal; white-space: pre-line; }

/* Nota manchada de café (texto dañado) */
/* isolation: las manchas (z-index -1) quedan entre el papel y las letras, nunca encima de ellas. */
.papel--manchada { padding-top: 24px; isolation: isolate; }
.papel--manchada .papel__texto { position: relative; line-height: 2.1; }
.papel--manchada::before {
  content: ""; position: absolute; left: 20px; top: 0; width: 70px; height: 18px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 0, 0, 0.05);
}
/* La palabra a medias y su caja, juntas: no se separan al saltar de línea. */
.hueco-cafe { white-space: nowrap; }
.hueco-cafe__sitio { position: relative; display: inline-block; margin: 0 1px; }
/* La mancha, desplazada a la derecha: no cae sobre la mitad visible de la palabra. */
.hueco-cafe__mancha { position: absolute; left: -2px; top: -12px; width: calc(100% + 26px); height: calc(100% + 24px); pointer-events: none; z-index: -1; }
.hueco-cafe__caja {
  position: relative; z-index: 1;
  width: 5.2em; min-width: 72px; height: 34px; padding: 2px 6px;
  font-size: 16px; line-height: 1.2;
  background: rgba(255, 253, 245, 0.85); border: 1px solid rgba(96, 58, 20, 0.45); border-radius: var(--radio-xs);
  color: var(--texto);
}
.hueco-cafe__caja:focus-visible { border-color: var(--azul); }
.hueco-cafe__caja.bien { border-color: var(--turquesa); box-shadow: 0 0 0 2px var(--turquesa-claro); }
.hueco-cafe__caja.mal { border-color: var(--rojo); box-shadow: 0 0 0 2px var(--rojo-claro); }
.hueco-cafe__marca { position: absolute; right: -8px; top: -10px; z-index: 2; width: 20px; height: 20px; border-radius: 9999px; color: var(--blanco); display: inline-flex; align-items: center; justify-content: center; }
.hueco-cafe__marca svg { width: 12px; height: 12px; }
.hueco-cafe__marca.bien { background: var(--turquesa); }
.hueco-cafe__marca.mal { background: var(--rojo); }
.mancha-grande { position: absolute; right: -28px; top: -22px; width: 150px; height: 110px; pointer-events: none; opacity: 0.6; transform: rotate(12deg); z-index: -1; }

/* Cartel */
.cartel { margin: 8px auto 4px; width: min(100%, 380px); background: var(--blanco); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.cartel__banda { height: 12px; background: var(--degradado-dia); }
.cartel__cuerpo { padding: 18px 20px 20px; font-size: 17px; line-height: 1.45; }
.cartel__cuerpo[lang="fr"] { font-style: normal; }
.cartel__chincheta { position: relative; height: 0; }
.cartel__chincheta::after { content: ""; position: absolute; left: 50%; top: 2px; width: 14px; height: 14px; border-radius: 9999px; background: var(--azul); transform: translateX(-50%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

/* Carta de restaurante y pizarra */
.carta {
  margin: 8px auto 4px; width: min(100%, 360px);
  padding: 22px 24px; background: #FFFCF4;
  border: 1px solid #E3DCC8; outline: 3px double #E3DCC8; outline-offset: -8px;
  box-shadow: var(--sombra);
  font-family: var(--titulos); font-size: 21px; line-height: 1.4; color: var(--titulo);
  text-align: center;
}
.carta[lang="fr"] { font-style: normal; }
.pizarra {
  margin: 8px auto 4px; width: min(100%, 360px);
  padding: 26px 24px;
  background: var(--pizarra);
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.06), transparent 60%);
  border: 10px solid #6B4A2E; border-radius: 3px;
  box-shadow: var(--sombra-alta);
  color: var(--tiza);
  font-family: var(--titulos); font-weight: 600; font-size: 25px; line-height: 1.35; letter-spacing: 0.3px;
  text-align: center;
}
.pizarra[lang="fr"] { font-style: normal; }

/* Captura de móvil */
.captura { margin: 8px auto 4px; width: min(100%, 300px); background: var(--blanco); border: 1px solid #D8D8D8; border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.captura__barra { display: flex; justify-content: space-between; padding: 8px 14px 0; font-size: 12px; color: var(--gris-texto); font-variant-numeric: tabular-nums; }
.captura__barra i { display: inline-block; width: 36px; height: 6px; border-radius: 9999px; background: var(--borde); }
.captura__cuerpo { padding: 28px 20px 32px; font-family: var(--titulos); font-weight: 600; font-size: 34px; line-height: 1.15; color: var(--titulo); text-align: center; }
.captura__cuerpo[lang="fr"] { font-style: normal; }

/* Documento (libro o contrato): serifa del sistema */
.documento {
  margin: 8px auto 4px; width: min(100%, 380px);
  padding: 28px 28px 24px; background: #FFFEFA;
  border: 1px solid var(--borde); box-shadow: var(--sombra);
  font-family: var(--serifa); font-size: 17px; line-height: 1.55; color: #1a1a1a;
  text-align: justify; hyphens: auto;
}
.documento[lang="fr"] { font-style: normal; }
.documento::after { content: ""; display: block; width: 32px; height: 1px; background: #B9B4A6; margin: 18px auto 0; }

/* Artículo (prensa, blog, reseña) */
.articulo { margin: 8px auto 4px; width: min(100%, 380px); padding: 18px 20px 20px; background: var(--blanco); border-top: 3px solid var(--titulo); border-bottom: 1px solid var(--borde); box-shadow: var(--sombra); font-size: 17px; line-height: 1.5; }
.articulo[lang="fr"] { font-style: normal; }
.articulo::before { content: ""; display: block; width: 48px; height: 3px; background: var(--morado); margin-bottom: 12px; }

/* Dibujos (reto 5, Inicio) */
.dibujos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.dibujo {
  aspect-ratio: 1; min-height: 88px;
  background: var(--papel); border: 1px solid #E8DFC2; border-radius: var(--radio);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--rapido) ease-out, box-shadow var(--rapido) ease-out, opacity var(--rapido) ease-out;
}
.dibujo svg { width: 72%; height: 72%; }
.dibujo:disabled { opacity: 0.45; }
.dibujo.elegida { opacity: 1; border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }
@media (hover: hover) and (pointer: fine) { .dibujo:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--sombra); } }

/* Piezas para ordenar */
.ordenar { align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ordenar__frase { min-height: 56px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--blanco); border: 1px dashed #C9C9C9; border-radius: var(--radio); }
.ordenar__frase.bien { border: 1px solid var(--turquesa); }
.ordenar__frase.mal { border: 1px solid var(--rojo); }
.ordenar__banco { display: flex; flex-wrap: wrap; gap: 6px; }
.pieza { min-height: 44px; padding: 8px 14px; background: var(--azul-claro); border: 1px solid #CFE6F0; border-radius: var(--radio); font-size: 18px; color: var(--texto); font-style: normal; transition: transform var(--rapido) ease-out, opacity var(--rapido) ease-out; }
.ordenar__frase .pieza { background: var(--blanco); border-color: var(--azul); }
.pieza:disabled { cursor: default; }
.pieza.sombra { opacity: 0.25; }
@media (hover: hover) and (pointer: fine) { .pieza:not(:disabled):hover { transform: translateY(-1px); } }

/* ---------- Juego de Hugo ---------- */

.hugo { align-self: stretch; margin: 8px 0; }
.tarjeta-palabra {
  position: relative; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: 0 0 20px;
  animation: entrar var(--medio) ease-out both;
}
.tarjeta-palabra__barra { height: 6px; background: var(--borde); }
.tarjeta-palabra__barra i { display: block; height: 100%; background: var(--azul); transform-origin: left center; }
.tarjeta-palabra__barra i.corriendo { transition: transform linear; transform: scaleX(0); }
.tarjeta-palabra__cuenta { position: absolute; top: 14px; right: 16px; font-size: 13px; color: var(--gris-texto); font-variant-numeric: tabular-nums; }
.tarjeta-palabra__palabra { display: block; text-align: center; font-family: var(--titulos); font-weight: 600; font-size: 54px; line-height: 1.1; color: var(--titulo); padding: 52px 16px 36px; font-style: normal; overflow-wrap: anywhere; }
.tarjeta-palabra__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
/* Sí y No con el mismo peso visual: ninguno empuja a pulsarlo */
.tarjeta-palabra__botones .boton { min-height: 60px; font-size: 22px; font-family: var(--titulos); font-weight: 600; background: var(--blanco); color: var(--titulo); border: 2px solid var(--titulo); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .tarjeta-palabra__botones .boton:hover { background: var(--azul-claro); color: var(--titulo); } }
.tarjeta-palabra__velo { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--rapido) ease-out; }
.tarjeta-palabra__velo.bien { background: var(--turquesa); opacity: 0.28; }
.tarjeta-palabra__velo.mal { background: var(--rojo); opacity: 0.28; }

/* ---------- Resultado ---------- */

.resultado { align-self: stretch; display: flex; flex-direction: column; gap: 28px; padding: 8px 0 24px; }
/* En el móvil, las dos mitades no existen (display: contents) y manda el orden del guion */
.resultado__izquierda, .resultado__derecha { display: contents; }
.resultado h2 { font-size: 26px; margin-bottom: 10px; }
.resultado h3 { font-size: 20px; margin: 14px 0 6px; }

.volteo { perspective: 1400px; }
.tarjeta-nivel { position: relative; width: 100%; transform-style: preserve-3d; transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.tarjeta-nivel.girada { transform: rotateY(180deg); }
.tarjeta-nivel__cara { position: absolute; inset: 0; min-height: 380px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-alta); }
.tarjeta-nivel__dorso { background: var(--degradado-dia); display: flex; align-items: center; justify-content: center; }
.tarjeta-nivel__dorso img { width: 96px; height: 96px; filter: brightness(0) invert(1); opacity: 0.9; }
.tarjeta-nivel__frente {
  position: relative; inset: auto;
  transform: rotateY(180deg);
  background: var(--blanco);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 30px 20px 22px;
  border: 1px solid var(--borde);
}
.tarjeta-nivel__frente::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--degradado-dia); }
.tarjeta-nivel__titulo { font-family: var(--cuerpo); font-weight: 500; font-size: 15px; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 1px; }
.tarjeta-nivel__letra { font-family: var(--titulos); font-weight: 700; font-size: 136px; line-height: 0.95; color: var(--morado); margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.tarjeta-nivel__letra--inicio { font-size: 96px; }
.tarjeta-nivel__nombre { font-family: var(--titulos); font-weight: 600; font-size: 30px; color: var(--titulo); margin-top: 2px; }
.tarjeta-nivel__nombre--inicio { font-size: 22px; line-height: 1.2; max-width: 22ch; }
.tarjeta-nivel__rozas { font-size: 15px; color: var(--azul-texto); margin-top: 4px; }
.tarjeta-nivel__descriptor { font-size: 17px; line-height: 1.35; margin-top: 14px; max-width: 34ch; }
.tarjeta-nivel__nota { font-size: 13px; line-height: 1.35; color: var(--gris-texto); margin-top: 14px; max-width: 40ch; }
.tarjeta-nivel__c2 { font-size: 14px; line-height: 1.35; margin-top: 8px; max-width: 36ch; }
.tarjeta-nivel__logo { height: 22px; width: auto; margin-top: 20px; opacity: 0.85; }

.comparacion { font-size: 18px; padding: 12px 16px; border-left: 3px solid var(--azul); background: var(--blanco); border-radius: 0 var(--radio) var(--radio) 0; }

.destrezas { display: flex; flex-direction: column; gap: 10px; }
.destreza { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; font-size: 16px; }
.destreza__barra { height: 12px; background: var(--borde); border-radius: 9999px; overflow: hidden; }
.destreza__barra i { display: block; height: 100%; background: var(--azul); transform-origin: left center; transform: scaleX(0); transition: transform 700ms ease-out; border-radius: 9999px; }
.destreza--fuerte .destreza__barra i { background: var(--turquesa); }
.destrezas__notas { margin-top: 8px; font-size: 16px; display: flex; flex-direction: column; gap: 4px; }

.revision { display: flex; flex-direction: column; gap: 8px; }
.revision__filtro { display: flex; align-items: center; gap: 10px; font-size: 16px; min-height: 44px; }
.revision__filtro input { width: 22px; height: 22px; accent-color: var(--morado); }
.reto-revisado { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); }
.reto-revisado summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; cursor: pointer; list-style: none; }
.reto-revisado summary::-webkit-details-marker { display: none; }
.reto-revisado summary .marca { position: static; transform: none; flex: none; animation: none; }
.reto-revisado__titulo { flex: 1; font-size: 16px; }
.reto-revisado__nivel { font-size: 13px; color: var(--gris-texto); font-variant-numeric: tabular-nums; }
.reto-revisado__cuerpo { padding: 4px 14px 16px; font-size: 16px; line-height: 1.4; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--borde); }
.reto-revisado__cuerpo h4 { font: inherit; font-weight: 500; color: var(--gris-texto); font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; margin: 8px 0 0; }
.reto-revisado__cuerpo p[lang="fr"] { font-style: normal; }
.texto-revisado[lang="fr"] { font-style: normal; }
.texto-revisado .bien { color: var(--turquesa-texto); font-weight: 500; }
.texto-revisado .mal { color: var(--rojo-texto); text-decoration: line-through; }
.texto-revisado .buena { color: var(--turquesa-texto); font-weight: 500; }
.palabras { display: flex; flex-wrap: wrap; gap: 6px; }
.palabra-chip { font-size: 15px; padding: 6px 10px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 9999px; }
.palabra-chip b { font-weight: 500; font-style: normal; }
.palabra-chip span { color: var(--gris-texto); }

.compartir { display: flex; flex-direction: column; gap: 12px; }
/* La historia de Instagram del nivel, vertical: lo mismo que se comparte. */
.compartir__imagen { width: 100%; max-width: 260px; height: auto; aspect-ratio: 9 / 16; border-radius: var(--radio); box-shadow: var(--sombra); align-self: center; display: block; }
/* Una fila de botones con el logo de cada red y su nombre (dos o tres por línea en el móvil). El logo
   va en el color oficial de la red; el nombre, en el del texto, que es lo que se lee. */
.compartir__botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.boton-red { justify-content: flex-start; gap: 10px; padding: 10px 14px; }
.boton-red svg { width: 22px; height: 22px; flex: none; }
.boton-red--whatsapp svg { color: #25D366; }
.boton-red--facebook svg { color: #0866FF; }
.boton-red--linkedin svg { color: #0A66C2; }
.boton-red--instagram svg { color: #FF0069; }
.boton-red--enlace svg, .boton-red--mas svg { color: var(--titulo); }
/* El aviso de «aún sin dirección»: en una caja, para que se vea que el botón ha respondido. */
.compartir__aviso { font-size: 15px; line-height: 1.4; color: var(--titulo); background: var(--azul-claro); border-radius: var(--radio); padding: 10px 14px; }
.compartir__aviso:empty { display: none; }
.compartir__aviso--nuevo { animation: aviso-aparece var(--medio) ease-out; }
@keyframes aviso-aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.campo-copiar { width: 100%; padding: 10px 12px; font-size: 15px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); }

.no-mide { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 17px; }
.no-mide .boton { align-self: flex-start; }

.leccion { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 16px 24px; box-shadow: var(--sombra); scroll-margin-top: 80px; }
/* El título es una llamada a la acción (Alfred, 27-10): banda con el degradado de las cabeceras de
   los días, de borde a borde de la caja, y letra grande. Blanco sobre el degradado: 4,97:1 en el
   punto más claro, y a este tamaño basta con 3:1. */
.leccion .leccion__titulo { margin: -20px -16px 14px; padding: 18px 16px 16px; background: var(--degradado-dia); color: var(--blanco); border-radius: 7px 7px 0 0; font-size: 30px; line-height: 1.1; }
.leccion__titulo:focus { outline: none; }
/* La pista bajo la tarjeta del nivel: la tarjeta parece un final, y debajo está la lección. */
.pista-leccion { align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: -12px; padding: 6px 12px; background: none; border: 0; color: var(--morado); font-family: var(--titulos); font-weight: 600; font-size: 20px; line-height: 1.2; text-decoration: underline; text-underline-offset: 4px; }
.pista-leccion svg { width: 22px; height: 22px; flex: none; }
.leccion__texto { font-size: 17px; line-height: 1.4; margin-top: 6px; }
.formulario { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 500; font-size: 16px; }
.campo input[type="text"], .campo input[type="email"], .campo textarea { min-height: 48px; padding: 12px; font-size: 18px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); width: 100%; }
.campo input:focus-visible, .campo textarea:focus-visible { border-color: var(--azul); }
.campo.invalido input, .campo.invalido textarea { border-color: var(--rojo); }
.campo__error { font-size: 14px; color: var(--rojo-texto); }
.campo__ayuda { font-size: 15px; line-height: 1.4; color: var(--gris-texto); }
.campo__ayuda strong, .campo__ayuda-titulo { font-weight: 500; color: var(--texto); }
.ejemplos { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta-elegible { min-height: 40px; padding: 8px 12px; font-size: 15px; background: var(--fondo-chat); border: 1px solid var(--borde); border-radius: 9999px; color: var(--texto); transition: transform var(--rapido) ease-out; }
.etiqueta-elegible[aria-pressed="true"] { background: var(--azul-claro); border-color: var(--azul); }
.casilla { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.35; min-height: 44px; }
.casilla input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--morado); }
.formulario__aviso { font-size: 14px; color: var(--gris-texto); line-height: 1.35; }
/* La casilla del boletín con su aviso justo debajo, alineado con el texto de la casilla (22 px de la
   casilla y 10 de hueco). La casilla, sin la altura mínima de 44 px: es ancha y sigue pasando de 24.
   Una línea fina y aire la separan de las preguntas de la lección: es el permiso para escribir, no una
   opción más (Alfred, 27-10). */
.formulario__boletin { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--borde); }
.formulario__boletin .casilla { min-height: 0; }
.formulario__boletin .formulario__aviso { padding-left: 32px; }
.formulario__plazo { font-size: 15px; line-height: 1.35; padding: 10px 12px; background: var(--azul-claro); border-radius: var(--radio); }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.confirmacion { padding: 16px; background: var(--turquesa-claro); color: var(--turquesa-texto); border-radius: var(--radio); font-size: 18px; font-weight: 500; }

/* ---------- Escenas animadas (SVG) ---------- */

.escena { position: relative; }
.escena .escena__svg { display: block; width: 100%; height: auto; }

/* Las animaciones van «desde» un estado inicial al natural del dibujo: con movimiento reducido
   se quitan y queda el último fotograma. */
.esc-colina { animation: esc-subir 900ms ease-out both; }
.esc-colina--lejos { animation-delay: 150ms; }
.esc-fourviere { animation: esc-subir 700ms ease-out 500ms both; }
.esc-sol { animation: esc-sol 1400ms ease-out 300ms both; }
.esc-trazo { stroke-dasharray: 1000; animation: esc-trazar 1600ms ease-out 400ms both; }
.esc-trazo--rio { animation-duration: 2200ms; animation-delay: 200ms; }
.esc-tren { animation: esc-tren 2200ms cubic-bezier(0.2, 0.7, 0.2, 1) 1100ms both; }
.esc-telefono { animation: esc-subir 700ms ease-out 2600ms both; }
.esc-burbuja { transform-box: fill-box; transform-origin: left center; animation: esc-burbuja 400ms ease-out both; }
.esc-burbuja--1 { animation-delay: 3300ms; }
.esc-burbuja--2 { transform-origin: right center; animation-delay: 3900ms; }
.esc-burbuja--3 { animation-delay: 4500ms; }
.esc-aviso { transform-box: fill-box; transform-origin: center; animation: esc-burbuja 400ms ease-out 5000ms both; }
.escena--dia .esc-telefono { animation-delay: 200ms; }
.escena--dia .esc-burbuja--1 { animation-delay: 700ms; }
.escena--dia .esc-burbuja--2 { animation-delay: 1100ms; }
.escena--dia .esc-burbuja--3 { animation-delay: 1500ms; }
.escena--dia .esc-aviso { animation-delay: 1900ms; }
.esc-puerta { transform-box: fill-box; transform-origin: left center; animation: esc-puerta 900ms ease-out 900ms both; }
.esc-maleta { animation: esc-maleta 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms both; }
.esc-taza { animation: esc-subir 600ms ease-out 300ms both; }
.esc-vapor { animation: esc-vapor 1800ms ease-out 700ms both; }
.esc-vapor--2 { animation-delay: 1000ms; }
.esc-llave { transform-box: fill-box; transform-origin: center; animation: esc-llave 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 800ms both; }
.esc-nota { animation: esc-subir 600ms ease-out 1300ms both; }
.esc-campana { animation: esc-campana 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 900ms both; }
.esc-plato { animation: esc-aparecer 600ms ease-out 1200ms both; }
.esc-copa { animation: esc-subir 600ms ease-out 400ms both; }
.esc-copa--2 { animation-delay: 600ms; }
.esc-cubiertos { animation: esc-subir 600ms ease-out 600ms both; }
.esc-metro { animation: esc-tren 1800ms cubic-bezier(0.2, 0.7, 0.2, 1) 500ms both; }
.esc-nube { animation: esc-nube 1800ms ease-out both; }
.esc-nube--2 { animation-delay: 300ms; }
.esc-gota { animation: esc-gota 1100ms linear infinite; }
.esc-portatil { animation: esc-subir 700ms ease-out 300ms both; }
.esc-pantalla { animation: esc-aparecer 500ms ease-out 1200ms both; }
.esc-paraguas { animation: esc-subir 700ms ease-out 700ms both; }
.esc-plan { transform-box: fill-box; transform-origin: center; animation: esc-burbuja 450ms ease-out both; }
.esc-plan--1 { animation-delay: 900ms; }
.esc-plan--2 { animation-delay: 1400ms; }
.esc-plan--3 { animation-delay: 1900ms; }
.esc-tarta { animation: esc-subir 800ms ease-out 700ms both; }

@keyframes esc-subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes esc-aparecer { from { opacity: 0; } }
@keyframes esc-sol { from { opacity: 0; transform: translateY(30px); } }
@keyframes esc-trazar { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes esc-tren { from { transform: translateX(-180px); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(80px); } }
@keyframes esc-burbuja { from { opacity: 0; transform: scale(0.95) translateY(6px); } }
@keyframes esc-puerta { from { transform: scaleX(1); } to { transform: scaleX(0.12); } }
@keyframes esc-maleta { from { transform: translateX(-160px); opacity: 0; } 30% { opacity: 1; } }
@keyframes esc-vapor { from { opacity: 0; transform: translateY(10px); } 60% { opacity: 1; } to { opacity: 0.6; transform: translateY(-4px); } }
@keyframes esc-llave { from { opacity: 0; transform: translateY(-50px) rotate(-30deg); } }
@keyframes esc-campana { from { transform: none; } to { transform: translateY(-62px) translateX(-4px) rotate(-10deg); opacity: 0.55; } }
@keyframes esc-nube { from { transform: translateX(-30px); } }
@keyframes esc-gota { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(210px); opacity: 0.2; } }

/* La cortinilla de entrada de cada día */
.cortinilla {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 34, 33, 0.55);
  padding: 16px;
  animation: esc-aparecer 250ms ease-out both;
  cursor: pointer;
}
.cortinilla__marco { width: min(100%, 480px); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-alta); background: var(--blanco); animation: entrar 300ms ease-out both; }
/* La salida va con una animación, no con una transición: la animación de entrada (con «both»)
   manda sobre la opacidad y anulaba la transición, y la cortinilla desaparecía de golpe. */
.cortinilla--fuera { animation: salir-opacidad 400ms ease-out forwards; }
.cortinilla--fuera .cortinilla__marco { animation: salir-marco 400ms ease-out forwards; }
@keyframes salir-opacidad { from { opacity: 1; } to { opacity: 0; } }
@keyframes salir-marco { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(0.98); } }

/* La portada se va fundiéndose, en vez de desaparecer de golpe al pulsar «Empezar». */
.portada--saliendo { animation: salir-portada 400ms ease-out forwards; }
@keyframes salir-portada { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-12px); } }

/* El itinerario de la semana (panel lateral en pantallas anchas) */
.itinerario { display: grid; grid-template-columns: 48px 1fr; gap: 0 12px; align-items: start; }
.itinerario__svg { width: 48px; height: auto; display: block; }
.itinerario__camino { transition: stroke-dashoffset 900ms ease-out; }
.itinerario__circulo { fill: var(--blanco); stroke: var(--borde); stroke-width: 3; }
.itinerario__icono { color: #B9B6B0; }
.itinerario__parada.hecho .itinerario__circulo { fill: var(--azul); stroke: var(--azul); }
.itinerario__parada.hecho .itinerario__icono { color: var(--blanco); }
.itinerario__parada.actual .itinerario__circulo { fill: var(--morado); stroke: var(--morado); }
.itinerario__parada.actual .itinerario__icono { color: var(--blanco); }
.itinerario__lista { list-style: none; margin: 0; padding: 0; }
.itinerario__etiqueta { height: 64px; display: flex; align-items: center; font-size: 15px; color: var(--gris-texto); }
.itinerario__etiqueta.hecho { color: var(--titulo); }
.itinerario__etiqueta.actual { color: var(--morado); font-weight: 500; }
.itinerario__etiqueta:first-child { padding-top: 0; }

/* ---------- Modo de revisión (?depurar=1) ---------- */

.depurar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: #FFF8E1; border-top: 2px solid #E0B300;
  padding: 6px 10px; font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.depurar select, .depurar button { font-size: 13px; min-height: 32px; padding: 4px 8px; border: 1px solid #C9A600; border-radius: var(--radio-xs); background: var(--blanco); }
.depurar__mas { display: none; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
.depurar.abierto .depurar__mas { display: flex; }
.depurar__estado { flex-basis: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #5a4a00; white-space: pre-wrap; margin: 0; }
body.con-depurar .chat { padding-bottom: 220px; }

/* ---------- Pantalla pequeña, media y ancha ---------- */

@media (max-width: 544px) {
  .portada__titulo { font-size: 34px; }
  .portada { box-shadow: none; }
  .app { box-shadow: none; }
  /* Más pequeño en el móvil, para que quepan la pista y lo de debajo (Alfred, 27-10). El de quien
     empieza desde cero, en la misma proporción que en el ordenador (96 de 136). */
  .tarjeta-nivel__letra { font-size: 88px; }
  .tarjeta-nivel__letra--inicio { font-size: 64px; }
  .msg { max-width: 92%; }
  .nota-voz-fila { max-width: 100%; }
}
@media (max-width: 380px) {
  .portada__titulo { font-size: 31px; }
  .tarjeta-palabra__palabra { font-size: 44px; }
  .destreza { grid-template-columns: 96px 1fr; }
  .pista-leccion { font-size: 18px; padding: 6px 4px; }
}
@media (min-width: 545px) {
  body { padding: 24px 0; }
  .app, .portada { min-height: calc(100dvh - 48px); border-radius: 16px; overflow: clip; }
  .cabecera { border-radius: 16px 16px 0 0; }
}
/* Pantallas anchas: el chat sigue en su columna; a un lado, el panel de la semana */
@media (min-width: 1024px) {
  .app {
    max-width: calc(var(--ancho-panel) + var(--ancho-columna-ancha));
    display: grid; grid-template-columns: var(--ancho-panel) var(--ancho-columna-ancha);
    grid-template-rows: auto 1fr;
    grid-template-areas: "panel cabecera" "panel chat";
  }
  .app .cabecera { grid-area: cabecera; border-radius: 0 16px 0 0; }
  .app .chat { grid-area: chat; padding: 20px 24px 56px; }
  .panel-semana {
    grid-area: panel;
    display: flex; flex-direction: column; gap: 20px;
    padding: 24px 20px;
    background: var(--blanco); border-right: 1px solid var(--borde);
    position: sticky; top: 0; align-self: start; max-height: 100dvh; overflow: auto;
  }
  .panel-semana__titulo { font-size: 24px; }
  .panel-semana__escena { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); }
  .panel-semana__escena:empty { display: none; }
  /* El resultado, a dos columnas: la página se ensancha, pero el chat de arriba sigue en su
     columna de lectura (una rejilla de tres columnas en la que el resultado ocupa las tres) */
  body.con-resultado .app { max-width: calc(var(--ancho-panel) + 1040px); grid-template-columns: var(--ancho-panel) 1fr; }
  body.con-resultado .chat { display: grid; grid-template-columns: 1fr minmax(0, var(--ancho-columna-ancha)) 1fr; grid-auto-rows: max-content; column-gap: 0; }
  body.con-resultado .chat > * { grid-column: 2; max-width: 100%; }
  body.con-resultado .chat > .msg--personaje, body.con-resultado .chat > .escribiendo, body.con-resultado .chat > .nota-voz-fila { justify-self: start; max-width: 88%; }
  body.con-resultado .chat > .msg--alumno, body.con-resultado .chat > .feedback { justify-self: end; max-width: 88%; }
  body.con-resultado .chat > .msg--narrador, body.con-resultado .chat > .racha { justify-self: center; }
  body.con-resultado .chat > .resultado { grid-column: 1 / -1; }
  .resultado { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; align-items: start; }
  .resultado__izquierda, .resultado__derecha { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
  .resultado__izquierda { grid-column: 1; }
  .resultado__derecha { grid-column: 2; }
}

/* ---------- Movimiento reducido: menos y más suave, no cero ---------- */

@media (prefers-reduced-motion: reduce) {
  .msg, .soporte, .dia, .feedback, .tarjeta-palabra, .cortinilla__marco { animation: desvanecer 300ms ease-out both; }
  .cortinilla--fuera, .portada--saliendo { animation: salir-opacidad 300ms ease-out forwards; }
  .cortinilla--fuera .cortinilla__marco { animation: none; }
  .racha { animation: desvanecer 300ms ease-out both; }
  .marca { animation: desvanecer 200ms ease-out both; }
  .compartir__aviso--nuevo { animation: desvanecer 300ms ease-out both; }
  .puntos i { animation: puntoQuieto 1.2s ease-out infinite; }
  .escena [class*="esc-"] { animation: none !important; }
  .esc-trazo { stroke-dasharray: none; }
  .itinerario__camino { transition: none; }
  .tarjeta-nivel { transition: none; }
  .tarjeta-nivel.girada { transform: none; }
  .tarjeta-nivel.girada .tarjeta-nivel__dorso { opacity: 0; transition: opacity 500ms ease-out; }
  .tarjeta-nivel.girada .tarjeta-nivel__frente { transform: none; opacity: 1; transition: opacity 500ms ease-out; }
  .tarjeta-nivel:not(.girada) .tarjeta-nivel__frente { transform: none; opacity: 0; }
  .tarjeta-nivel__cara { backface-visibility: visible; }
  .boton:active, .opcion:active { transform: none; }
  .destreza__barra i { transition: none; }
  @keyframes desvanecer { from { opacity: 0; } to { opacity: 1; } }
  @keyframes puntoQuieto { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }
}