/* Estilo "cuaderno de clase": lienzo blanco, letra redondeada, un solo verde
   protagonista (morado) y botones gruesos con borde, como pegatinas. Sin sombras ni degradados.
   Cambia estas variables para cambiar el aspecto de toda la app. */
:root {
  --principal: #8b5cf6;        /* morado: marca, título y botones principales */
  --principal-claro: #9d75f8;  /* al pasar el cursor */
  --principal-borde: #6d3fe0;  /* canto inferior del botón, y texto pequeño */
  --principal-suave: #ede7ff;
  --verde-texto: #58a700;      /* el verde queda solo para "correcto" */
  --azul: #1cb0f6;
  --azul-suave: #ddf4ff;
  --azul-borde: #84d8ff;
  --tinta: #000437;
  --blanco: #ffffff;
  --carbon: #4b4b4b;
  --gris: #777777;
  --gris-claro: #afafaf;
  --linea: #e5e5e5;
  --rojo: #ff4b4b;
  --rojo-borde: #ea2b2b;
  --rojo-suave: #ffdfe0;
  --naranja: #ff9600;
  /* Dorado: todo lo que tiene que ver con Pro */
  --oro: #ffc533;
  --oro-claro: #ffd766;
  --oro-borde: #d99a00;
  --oro-suave: #fff7dc;
  --oro-texto: #8a5a00;   /* dorado oscuro, para texto sobre blanco */
  --oro-tinta: #4a3200;   /* texto encima del dorado */

  --radio: 12px;
  --ancho: 720px;
  --fuente: 'Nunito', ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
/* Lo que tapan las barras del teléfono arriba y abajo. En la app de Android
   lo dice Capacitor (--safe-area-inset-*); en el navegador, env(). */
:root { --arriba: env(safe-area-inset-top, 0px); --abajo: env(safe-area-inset-bottom, 0px); }
html.nativa { --arriba: var(--safe-area-inset-top, 0px); --abajo: var(--safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  color: var(--carbon);
  font: 500 17px/1.4 var(--fuente);
}

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

/* ---------- Botones ---------- */
button {
  padding: 10px 16px;
  border: 2px solid var(--linea);
  border-bottom-width: 4px;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--gris);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.33;
  letter-spacing: 0.053em;
  text-transform: uppercase;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #f7f7f7; }
/* Al pulsar, el botón "se hunde": pierde el canto inferior */
button:active:not(:disabled) { border-bottom-width: 2px; transform: translateY(2px); }
button:focus-visible, select:focus-visible { outline: 3px solid var(--azul-borde); outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.primario { background: var(--principal); border-color: var(--principal); border-bottom-color: var(--principal-borde); color: var(--blanco); }
button.primario:hover:not(:disabled) { background: var(--principal-claro); border-color: var(--principal-claro); border-bottom-color: var(--principal-borde); }
button.azul { color: var(--azul); }
button.grande { padding: 14px 40px; font-size: 17px; }

/* Botón que parece un enlace */
button.enlace {
  margin-left: auto;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--azul);
  font-size: 14px;
}
button.enlace:hover:not(:disabled) { background: none; text-decoration: underline; }
button.enlace:active:not(:disabled) { transform: none; }

/* ---------- Barra superior ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 24px;
  border-bottom: 2px solid var(--linea);
}
.marca { color: var(--principal); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.acciones button { padding: 8px 14px; font-size: 13px; }

/* ---------- Indicador de estado ---------- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 2px solid var(--linea);
  border-radius: var(--radio);
  color: var(--gris-claro);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.053em;
  text-transform: uppercase;
}
.estado .punto { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.estado.escuchando { color: var(--rojo); border-color: var(--rojo); background: var(--rojo-suave); }
.estado.pensando { color: var(--naranja); border-color: var(--naranja); }
.estado.hablando { color: var(--principal-borde); border-color: var(--principal); background: var(--principal-suave); }
.estado.escuchando .punto, .estado.pensando .punto, .estado.hablando .punto { animation: latido 1s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(1.6); opacity: 0.4; } }

/* ---------- Avisos ---------- */
.aviso {
  width: min(var(--ancho), calc(100% - 32px));
  margin: 12px auto 0;
  padding: 12px 16px;
  border: 2px solid var(--naranja);
  border-radius: var(--radio);
  font-size: 15px;
}

/* ---------- Conversación ---------- */
#chat { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 16px; display: flex; flex-direction: column; }
.mensajes { width: min(var(--ancho), 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* Pantalla de inicio */
.bienvenida { margin: auto; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.mascota { width: 120px; }
.titular { margin: 0; color: var(--principal); font-weight: 900; font-size: 48px; line-height: 1.2; letter-spacing: -0.02em; }
.bienvenida p { margin: 0; max-width: 420px; color: var(--gris); }
.eleccion { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.eleccion label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--gris-claro);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.053em;
  text-transform: uppercase;
  text-align: left;
}
select {
  padding: 10px 14px;
  border: 2px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--carbon);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.mensaje { max-width: 88%; display: flex; flex-direction: column; gap: 6px; }
.mensaje.alumno { align-self: flex-end; align-items: flex-end; }
.mensaje.ia { align-self: flex-start; align-items: flex-start; }
.burbuja {
  padding: 12px 16px;
  border: 2px solid var(--linea);
  border-radius: 16px;
  font-size: 19px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mensaje.alumno .burbuja { background: var(--azul-suave); border-color: var(--azul-borde); }
.mensaje.fallo .burbuja { border-color: var(--rojo); font-size: 15px; }

/* Traducción al español, debajo del francés y dentro de la misma burbuja */
.traduccion { margin-top: 8px; padding-top: 8px; border-top: 2px dashed var(--linea); color: var(--gris); font-size: 16px; }
.traduccion:empty { display: none; }
/* Traducción desactivada arriba: ni texto ni botón. Activada: cada respuesta puede esconder la suya */
#chat.sin-traduccion .traduccion,
#chat.sin-traduccion .btn-traducir,
.traduccion.oculta { display: none; }

.nota { font-size: 14px; font-weight: 700; color: var(--gris-claro); }
.nota.bien { color: var(--verde-texto); }
.herramientas { display: flex; gap: 4px; flex-wrap: wrap; }
.herramientas button { padding: 2px 8px; border: 0; background: none; color: var(--azul); font-size: 13px; }
.herramientas button:hover:not(:disabled) { background: var(--azul-suave); }
.herramientas button:active:not(:disabled) { transform: none; }

/* Error resaltado dentro de tu propio texto */
mark.error {
  padding: 0 3px;
  border-bottom: 3px solid var(--rojo);
  border-radius: 6px 6px 0 0;
  background: var(--rojo-suave);
  color: inherit;
  cursor: help;
}
/* Palabra que quizá la máquina oyó mal: naranja en vez de rojo */
mark.error.duda { border-bottom-color: var(--naranja); background: #fff0d6; }
/* Error de escritura (acento, letra, tipeo): amarillo, es un despiste y no una regla que falte */
mark.error.escritura { border-bottom-color: #e6b400; background: #fff6bf; }
mark.error:focus-visible { outline: 3px solid var(--rojo); outline-offset: 1px; }

.sueltos { margin: 0; padding-left: 18px; font-size: 15px; color: var(--gris); }

/* Globo con la explicación del error */
.globo {
  position: fixed;
  z-index: 20;
  max-width: min(340px, calc(100vw - 24px));
  padding: 12px 16px;
  border: 2px solid var(--linea);
  border-radius: 16px;
  background: var(--blanco);
  font-size: 15px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
.globo .correcto { color: var(--verde-texto); font-weight: 800; font-size: 19px; }
.globo .tipo { display: inline-block; margin: 4px 0; color: var(--gris-claro); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.globo p { margin: 0; color: var(--gris); }

/* ---------- Zona para hablar o escribir ---------- */
.compositor { padding: 16px; border-top: 2px solid var(--linea); }
.columna { width: min(var(--ancho), 100%); margin: 0 auto; }
.transcripcion {
  min-height: 60px;
  max-height: 150px;
  overflow-y: auto;
  padding: 14px 16px;
  border: 2px solid var(--linea);
  border-radius: 16px;
  background: #f7f7f7;
  font-size: 19px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.transcripcion:focus { outline: none; border-color: var(--azul-borde); background: var(--blanco); }
.transcripcion:empty::before { content: attr(data-placeholder); color: var(--gris-claro); }
.transcripcion.escuchando { border-color: var(--rojo); background: var(--blanco); }
/* Texto que el reconocimiento todavía puede cambiar */
.transcripcion .interino { color: var(--gris-claro); }
/* Partes donde la máquina no está segura de haber entendido */
.transcripcion .baja { text-decoration: underline dotted var(--naranja) 3px; text-underline-offset: 5px; }

/* Otras cosas que el reconocimiento cree que pudiste decir */
.alternativas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.alt-titulo { color: var(--gris); font-size: 14px; font-weight: 700; }
button.alt { padding: 4px 12px; border-bottom-width: 2px; color: var(--carbon); font-size: 16px; font-weight: 700; letter-spacing: normal; text-transform: none; }
button.alt:hover:not(:disabled) { border-color: var(--principal); background: var(--principal-suave); }

.botones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.botones .mic { min-width: 150px; }
.botones .mic.activo { background: var(--rojo); border-color: var(--rojo); border-bottom-color: var(--rojo-borde); }
.pista { font-size: 14px; color: var(--gris); }

/* ---------- Ventanas: ajustes, errores y resumen ---------- */
dialog {
  width: min(600px, calc(100vw - 32px));
  max-height: 85vh;
  padding: 24px;
  border: 2px solid var(--linea);
  border-radius: 16px;
  background: var(--blanco);
  color: var(--carbon);
}
dialog::backdrop { background: rgba(0, 4, 55, 0.4); }
dialog h2 { margin: 0 0 16px; color: var(--carbon); font-weight: 800; font-size: 32px; line-height: 1.2; }
dialog h3 { margin: 24px 0 8px; color: var(--carbon); font-weight: 800; font-size: 19px; }
dialog ul { margin: 0; padding-left: 20px; color: var(--gris); }
dialog li { margin-bottom: 8px; }
dialog li strong { color: var(--carbon); }
.dialogo-pie { display: flex; justify-content: flex-end; margin-top: 24px; }

/* Interruptor de dos posiciones hecho con botones de radio */
.segmentado { margin: 16px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; }
.segmentado legend { padding: 0; margin-bottom: 6px; color: var(--gris-claro); font-weight: 800; font-size: 13px; letter-spacing: 0.053em; text-transform: uppercase; }
.segmentado label { cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span { display: block; padding: 10px 16px; border: 2px solid var(--linea); color: var(--gris); font-weight: 700; }
.segmentado label:first-of-type span { border-radius: var(--radio) 0 0 var(--radio); }
.segmentado label:last-of-type span { border-radius: 0 var(--radio) var(--radio) 0; margin-left: -2px; }
.segmentado input:checked + span { position: relative; border-color: var(--principal); background: var(--principal-suave); color: var(--principal-borde); }
.segmentado input:focus-visible + span { outline: 3px solid var(--azul-borde); outline-offset: 2px; }
.segmentado input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.ayuda { margin: 6px 0 0; color: var(--gris); font-size: 14px; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; color: var(--gris-claro); font-weight: 800; font-size: 13px; letter-spacing: 0.053em; text-transform: uppercase; }
.campo .fila { display: flex; gap: 8px; flex-wrap: wrap; }
.campo select { flex: 1; min-width: 0; }

.casilla { display: flex; align-items: center; gap: 10px; margin-top: 16px; cursor: pointer; }
.casilla input { width: 20px; height: 20px; accent-color: var(--principal); flex: none; }

/* Mis errores */
.barras { display: grid; grid-template-columns: max-content 1fr max-content; gap: 8px 12px; align-items: center; font-size: 15px; font-weight: 700; }
.barras .barra-fondo { height: 16px; border-radius: 8px; background: var(--linea); overflow: hidden; }
.barras .barra-valor { height: 100%; border-radius: 8px; background: var(--principal); }
.frecuente { padding: 12px 0; border-bottom: 2px solid var(--linea); }
.frecuente:last-of-type { border-bottom: 0; }
.frecuente .mal { color: var(--rojo); text-decoration: line-through; }
.frecuente .bien { color: var(--verde-texto); font-weight: 800; }
.frecuente .veces { float: right; color: var(--gris-claro); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.frecuente .explicacion { color: var(--gris); font-size: 14px; }
.peligro { margin-top: 16px; color: var(--rojo); font-size: 13px; }

@media (max-width: 640px) {
  .barra { padding: 10px 16px; gap: 10px; }
  .acciones { margin-left: 0; }
  .titular { font-size: 40px; }
  .mensaje { max-width: 96%; }
}

/* Mientras la IA piensa, la burbuja vacía muestra tres puntos que laten */
.frances:empty::before { content: '• • •'; color: var(--gris-claro); animation: espera 1s ease-in-out infinite; }
@keyframes espera { 50% { opacity: 0.3; } }

/* ---------- Tarjeta "Ahora dilo bien" bajo un mensaje con errores ---------- */
.repeticion { padding: 12px 16px; border: 2px solid var(--principal); border-radius: 16px; background: var(--principal-suave); text-align: left; }
.rep-titulo { color: var(--principal-borde); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.rep-frase { margin: 4px 0 8px; color: var(--carbon); font-weight: 700; font-size: 19px; }
.repeticion .fila { display: flex; gap: 8px; flex-wrap: wrap; }
.repeticion button { padding: 6px 12px; font-size: 13px; }
.repeticion .nota { margin-top: 8px; color: var(--gris); }
.repeticion .nota:empty { display: none; }

/* ---------- Frase de "¿Cómo se dice?" a la vista sobre la caja ---------- */
.chuleta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; padding: 10px 16px; border: 2px solid var(--principal); border-radius: 16px; background: var(--principal-suave); }
.chuleta span { color: var(--principal-borde); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.chuleta strong { font-size: 19px; }
.chuleta button.enlace { margin-left: 0; }
.chuleta #chuleta-oir { margin-left: auto; }

#comodice textarea { width: 100%; padding: 12px 16px; border: 2px solid var(--linea); border-radius: 16px; background: #f7f7f7; color: var(--carbon); font: inherit; font-size: 19px; resize: vertical; }
#comodice textarea:focus { outline: none; border-color: var(--azul-borde); background: var(--blanco); }
#cd-resultado { margin-top: 24px; padding-top: 16px; border-top: 2px dashed var(--linea); }
#cd-resultado .rep-frase { font-size: 24px; }

/* ---------- Preguntas sugeridas por "No sé qué decir" ---------- */
.sugerencias { margin-bottom: 8px; padding: 12px 16px; border: 2px solid var(--linea); border-radius: 16px; }
.sug-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--gris-claro); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.sug-cabecera .etiqueta { padding: 2px 8px; border-radius: 8px; background: var(--principal-suave); color: var(--principal-borde); }
.sug-cabecera button.enlace { font-size: 12px; }
.sug { display: flex; align-items: center; gap: 8px; }
.sug + .sug { margin-top: 8px; }
/* Cada sugerencia es un botón: francés grande, español pequeño debajo */
.sug-frase { flex: 1; min-width: 0; padding: 8px 14px; border-bottom-width: 2px; text-align: left; letter-spacing: normal; text-transform: none; }
.sug-frase:hover:not(:disabled) { border-color: var(--principal); background: var(--principal-suave); }
.sug-frase .fr { display: block; color: var(--carbon); font-weight: 700; font-size: 18px; }
.sug-frase .es { display: block; color: var(--gris); font-weight: 500; font-size: 14px; }
.sug button.enlace { margin-left: 0; flex: none; }
.sug-espera { color: var(--gris); font-size: 15px; }

/* =====================================================================
   Diseño en dos columnas: el personaje a la izquierda, la charla a la derecha
   ===================================================================== */
body { flex-direction: row; }
.principal { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.lado {
  flex: none;
  width: clamp(260px, 30vw, 380px);
  padding: 20px 24px 32px;
  border-right: 2px solid var(--linea);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lado .marca { align-self: flex-start; }
.contexto { color: var(--gris-claro); font-weight: 800; font-size: 13px; letter-spacing: 0.053em; text-transform: uppercase; }

/* El personaje dentro de un círculo. Todas sus caras están apiladas una encima
   de otra y solo se ve una a la vez, así cambiar de cara es instantáneo. */
.avatar {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  margin-top: auto;
  border: 5px solid var(--linea);
  border-radius: 50%;
  background: var(--blanco);
  overflow: hidden;
  transition: border-color 0.2s;
}
.avatar img { position: absolute; left: 0; top: -3%; width: 100%; height: auto; visibility: hidden; }
.avatar img.visible { visibility: visible; }
.avatar[data-fase="escuchando"] { border-color: var(--rojo); }
.avatar[data-fase="pensando"] { border-color: var(--naranja); }
.avatar[data-fase="hablando"] { border-color: var(--principal); }
.nombre { color: var(--carbon); font-weight: 900; font-size: 32px; line-height: 1.2; }
.lado .estado { margin-bottom: auto; }

/* En pantallas estrechas el personaje pasa arriba, en pequeño */
@media (max-width: 820px) {
  body { flex-direction: column; }
  .lado { width: auto; flex-direction: row; padding: 10px 16px; gap: 12px; border-right: 0; border-bottom: 2px solid var(--linea); }
  .lado .marca { display: none; }
  .avatar { width: 64px; margin: 0; border-width: 3px; flex: none; }
  .nombre { font-size: 22px; }
  .lado .estado { margin: 0 0 0 auto; }
}

/* =====================================================================
   Pantalla de entrada: el personaje grande en el centro, los temas en
   tarjetas, y nada más. Al empezar, <body> pierde la clase "inicio" y
   vuelve el diseño en dos columnas.
   ===================================================================== */
.lado { background: #f7f3ff; }

body.inicio { flex-direction: column; overflow-y: auto; }
/* Los hijos del lado derecho se colocan como si colgaran del <body> */
body.inicio .principal { display: contents; }
body.inicio .barra { order: 0; }
body.inicio .lado { order: 1; width: auto; padding: 28px 16px 24px; gap: 12px; border-right: 0; border-bottom: 2px solid var(--linea); flex-direction: column; }
body.inicio .aviso { order: 2; }
body.inicio #chat { order: 3; flex: 1 0 auto; overflow: visible; }
body.inicio .avatar { width: 200px; margin: 0; border-width: 5px; border-color: var(--principal); }

/* Lo que no hace falta antes de empezar */
body.inicio .compositor,
body.inicio .lado .marca,
body.inicio .lado .estado,
body.inicio .nombre,
body.inicio #btn-trad,
body.inicio #btn-resumen,
body.inicio #btn-atras,
body:not(.inicio) .marca-inicio,
body:not(.inicio) .saludo { display: none; }

/* Globo de diálogo bajo el personaje */
.saludo { position: relative; padding: 10px 20px; border: 2px solid var(--linea); border-radius: 16px; background: var(--blanco); text-align: center; }
.saludo::before { content: ''; position: absolute; left: 50%; top: -9px; width: 14px; height: 14px; margin-left: -7px; border-left: 2px solid var(--linea); border-top: 2px solid var(--linea); background: var(--blanco); transform: rotate(45deg); }
.saludo span { display: block; color: var(--carbon); font-weight: 800; font-size: 22px; }
.saludo small { color: var(--gris); font-size: 14px; }

.bienvenida { max-width: 780px; width: 100%; gap: 20px; }
.pregunta { margin: 0; color: var(--carbon); font-weight: 900; font-size: 32px; line-height: 1.2; }
.grupo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rotulo { color: var(--gris-claro); font-weight: 800; font-size: 13px; letter-spacing: 0.053em; text-transform: uppercase; }

/* Botones de nivel y tarjetas de tema: la elegida queda en morado */
.niveles { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.temas { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.opcion { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; color: var(--carbon); font-size: 15px; font-weight: 700; letter-spacing: normal; text-transform: none; }
.opcion small { color: var(--gris); font-size: 12px; font-weight: 500; }
.opcion svg { width: 30px; height: 30px; fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.niveles .opcion { min-width: 120px; font-size: 19px; font-weight: 900; }
.opcion.elegida { border-color: var(--principal); background: var(--principal-suave); color: var(--principal-borde); }
.opcion.elegida svg { stroke: var(--principal-borde); }
.opcion.elegida small { color: var(--principal-borde); }

/* Entrada más compacta, y "Empezar" siempre a la vista aunque haya que bajar */
body.inicio .lado { padding: 20px 16px 18px; gap: 10px; }
body.inicio .avatar { width: 170px; }
body.inicio #chat { padding-top: 20px; }
.bienvenida { gap: 16px; }
body:not(.inicio) #btn-empezar { display: none; }
body.inicio #btn-empezar { margin-top: 4px; }
body.inicio #chat { padding-bottom: 32px; }

/* =====================================================================
   La entrada en dos pasos.
   paso-1: el personaje llena la pantalla; solo hay un botón y el nivel.
   paso-2: el personaje se encoge arriba y aparecen las tarjetas de tema.
   ===================================================================== */
body.inicio.paso-1 .lado { flex: 1; justify-content: center; gap: 14px; border-bottom: 0; }
body.inicio.paso-1 #chat { display: none; }
body.inicio.paso-1 .avatar { width: min(270px, 62vw); }
body.inicio.paso-1 .saludo span { font-size: 26px; }

body.inicio.paso-2 .lado { padding: 16px; }
body.inicio.paso-2 .avatar { width: 150px; border-width: 5px; }
body.inicio.paso-2 .saludo,
body.inicio.paso-2 #btn-empezar,
body.inicio.paso-2 .nivel-linea,
body.inicio.paso-2 #niveles,
body:not(.inicio) .nivel-linea,
body:not(.inicio) #niveles { display: none; }

/* El nivel, discreto: casi nunca se cambia */
.nivel-linea { display: flex; align-items: baseline; gap: 8px; color: var(--gris); font-size: 15px; font-weight: 700; }
.nivel-linea button.enlace { margin: 0; padding: 0; font-size: 13px; }

#btn-volver { align-self: flex-start; margin: 0; padding: 0; }
body.inicio.paso-2 .temas { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
body.inicio.paso-2 .temas .opcion { padding: 20px 12px; font-size: 17px; }
body.inicio.paso-2 .temas .opcion svg { width: 40px; height: 40px; }
.opcion small:empty { display: none; }

/* La tarjeta "Ahora dilo bien" se puede plegar: queda solo la cabecera, en pequeño */
.rep-cabecera { display: flex; align-items: baseline; gap: 12px; }
.rep-cabecera button.enlace { margin-left: auto; padding: 0; font-size: 12px; }
.repeticion.plegada { padding: 6px 12px; border-color: var(--linea); background: var(--blanco); }
.repeticion.plegada > :not(.rep-cabecera) { display: none; }
.repeticion.plegada .rep-titulo { color: var(--gris-claro); }

/* =====================================================================
   Portada (paso 1): página de presentación en tres bloques.
   1) lema + botón a la izquierda, el personaje a la derecha
   2) por qué funciona + espacio reservado para estadísticas
   3) preguntas frecuentes
   ===================================================================== */
.hero-texto, .portada { display: none; }

/* --- Bloque 1 --- */
body.inicio.paso-1 .lado {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  column-gap: 48px;
  row-gap: 12px;
  padding: 56px max(24px, calc((100% - 1080px) / 2)) 64px;
  border-bottom: 2px solid var(--linea);
}
body.inicio.paso-1 .hero-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; grid-column: 1; grid-row: 1 / span 2; justify-self: start; text-align: left; }
body.inicio.paso-1 .avatar { grid-column: 2; grid-row: 1; width: min(340px, 100%); border-width: 6px; }
body.inicio.paso-1 .saludo { grid-column: 2; grid-row: 2; }
.antetitulo { color: var(--principal-borde); font-weight: 800; font-size: 14px; letter-spacing: 0.053em; text-transform: uppercase; }
.lema { margin: 0; color: var(--carbon); font-weight: 900; font-size: clamp(40px, 5.2vw, 64px); line-height: 1.1; letter-spacing: -0.02em; }
.lema span { color: var(--principal); }
.bajada { margin: 0; max-width: 480px; color: var(--gris); font-size: 19px; line-height: 1.4; }
body.inicio.paso-1 #btn-empezar { margin-top: 8px; padding: 16px 48px; font-size: 19px; }
body.inicio.paso-1 .niveles { justify-content: flex-start; }

/* --- Barra de arriba en la portada --- */
/* Antes de la conversación "Mis errores" sobra: el tablero ya los muestra */
body.inicio #btn-historial { display: none; }
body:not(.inicio) #menu-idioma, body:not(.inicio) #btn-login { display: none; }
.acciones { align-items: center; }
.menu-idioma { position: relative; }
.menu-idioma summary {
  list-style: none;
  padding: 8px 14px;
  border: 2px solid var(--linea);
  border-bottom-width: 4px;
  border-radius: var(--radio);
  color: var(--gris);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.053em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-idioma summary::-webkit-details-marker { display: none; }
.menu-idioma summary::after { content: " ▾"; }
.menu-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 160px; padding: 6px; border: 2px solid var(--linea); border-radius: 16px; background: var(--blanco); display: flex; flex-direction: column; gap: 2px; }
.menu-lista button { padding: 8px 12px; border: 0; background: none; color: var(--carbon); font-size: 16px; font-weight: 700; letter-spacing: normal; text-transform: none; text-align: left; }
.menu-lista button:hover:not(:disabled) { background: var(--principal-suave); }
.menu-lista button:active:not(:disabled) { transform: none; }
.menu-lista button.elegido { color: var(--principal-borde); }
.menu-lista button.elegido::after { content: " ✓"; }

/* --- Bloques 2 y 3 --- */
body.inicio.paso-1 .portada { display: block; order: 3; }
.bloque { padding: 72px max(24px, calc((100% - 1080px) / 2)); }
.bloque + .bloque { border-top: 2px solid var(--linea); }
.bloque h2 { margin: 8px 0 16px; color: var(--carbon); font-weight: 900; font-size: 36px; line-height: 1.2; letter-spacing: -0.01em; }
.bloque p { margin: 0; color: var(--gris); font-size: 18px; line-height: 1.5; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ventajas { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ventajas li { padding-left: 32px; position: relative; color: var(--gris); font-size: 17px; line-height: 1.4; }
.ventajas li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--principal-suave); color: var(--principal-borde); font-weight: 900; font-size: 13px; line-height: 22px; text-align: center; }
.ventajas strong { display: block; color: var(--carbon); }
/* Espacio en blanco reservado para las estadísticas */
.hueco { min-height: 320px; border: 2px dashed var(--linea); border-radius: 24px; background: #fafafa; }

.centrado { text-align: center; }
.preguntas { max-width: 760px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 12px; }
.preguntas details { border: 2px solid var(--linea); border-radius: 16px; padding: 0 20px; }
.preguntas summary { padding: 16px 0; list-style: none; color: var(--carbon); font-weight: 800; font-size: 18px; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; color: var(--principal); font-size: 24px; line-height: 1; }
.preguntas details[open] summary::after { content: "−"; }
.preguntas details[open] { border-color: var(--principal); }
.preguntas details p { padding: 0 0 18px; font-size: 17px; }

.cierre { text-align: center; background: #f7f3ff; }
.cierre h2 { margin-top: 0; }

/* --- En pantallas estrechas, una sola columna --- */
@media (max-width: 820px) {
  body.inicio.paso-1 .lado { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 40px; }
  body.inicio.paso-1 .avatar { grid-column: 1; grid-row: 1; width: min(220px, 60vw); }
  body.inicio.paso-1 .saludo { grid-column: 1; grid-row: 2; }
  body.inicio.paso-1 .hero-texto { grid-column: 1; grid-row: 3; align-items: center; text-align: center; justify-self: center; }
  body.inicio.paso-1 .niveles { justify-content: center; }
  .dos-columnas { grid-template-columns: 1fr; }
  .bloque { padding-top: 48px; padding-bottom: 48px; }
  .bloque h2 { font-size: 28px; }
  .hueco { min-height: 200px; }
}

/* --- Datos de investigación en la portada (bloque 2, columna derecha) ---
   Las cifras y los textos van en los colores de texto de siempre; el morado
   queda solo para el rótulo y el filete, para no competir con el lema. */
.dos-columnas { align-items: start; }
.datos { display: flex; flex-direction: column; gap: 12px; }
.dato { padding: 16px 20px; border: 2px solid var(--linea); border-left: 6px solid var(--principal); border-radius: 16px; background: var(--blanco); }
.cifra { color: var(--carbon); font-weight: 900; font-size: 36px; line-height: 1.1; letter-spacing: -0.01em; }
.cifra small { color: var(--gris); font-weight: 700; font-size: 14px; letter-spacing: 0; }
.bloque .hallazgo { margin: 6px 0 0; color: var(--carbon); font-weight: 700; font-size: 17px; line-height: 1.35; }
.bloque .matiz { margin: 4px 0 0; color: var(--gris); font-size: 14px; line-height: 1.4; }
.fuente { display: inline-block; margin-top: 8px; color: var(--gris); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.fuente:hover { color: var(--principal-borde); }
.bloque .nota-datos { margin: 0; color: var(--gris-claro); font-size: 13px; line-height: 1.4; }
@media (max-width: 820px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .cifra { font-size: 30px; }
}

/* --- Carrusel de datos: las tarjetas ocupan la misma casilla, una encima de
   otra, y solo se ve la activa. Así el alto no salta al cambiar de dato. --- */
.carrusel { display: grid; }
.carrusel .dato { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(16px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s 0.45s; }
.carrusel .dato.activo { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s ease, transform 0.45s ease; }
.carrusel .dato { padding: 24px 28px; }
.carrusel .cifra { font-size: 48px; }
.carrusel .hallazgo { font-size: 20px; }
.carrusel-mandos { display: flex; align-items: center; justify-content: center; gap: 16px; }
.carrusel-mandos button.contorno { padding: 4px 14px; font-size: 18px; border-bottom-width: 3px; }
.puntos { display: flex; gap: 8px; }
.puntos button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--linea); }
.puntos button.activo { background: var(--principal); }
.puntos button:active:not(:disabled) { transform: none; }
/* Quien pidió menos movimiento en su sistema: cambia sin deslizarse */
@media (prefers-reduced-motion: reduce) {
  .carrusel .dato, .carrusel .dato.activo { transition: none; transform: none; }
}
@media (max-width: 820px) {
  .carrusel .cifra { font-size: 38px; }
  .carrusel .hallazgo { font-size: 18px; }
}

/* --- Gráficos de barra dentro de las tarjetas de datos ---
   Una barra por medida, todas del mismo color porque miden lo mismo. Las líneas
   finas marcan dónde empieza un efecto pequeño, medio y grande. Los números y
   rótulos van en color de texto; el morado es solo para la barra. */
.carrusel .dato { display: flex; flex-direction: column; gap: 12px; }
.carrusel h3.hallazgo { margin: 0; color: var(--carbon); font-weight: 900; font-size: 22px; line-height: 1.25; }
.grafico { margin-top: 4px; }
.g-barras { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 8px 0 26px; }
.g-fila { position: relative; display: flex; flex-direction: column; gap: 4px; }
.rotulo-fila { color: var(--gris); font-size: 13px; font-weight: 700; }
.carril { display: flex; align-items: center; }
.g-barra { flex: none; height: 14px; border-radius: 0 4px 4px 0; background: var(--principal); }
.g-barra:hover { background: var(--principal-borde); }
.valor { margin-left: 8px; color: var(--carbon); font-weight: 900; font-size: 20px; line-height: 1; }
/* Líneas de referencia: detrás de las barras, con su nombre abajo */
.guia { position: absolute; top: 0; bottom: 20px; width: 0; border-left: 2px dotted var(--linea); }
.guia i { position: absolute; top: 100%; left: 0; transform: translateX(-50%); margin-top: 4px; color: var(--gris-claro); font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; }
.g-barras::before { content: ""; position: absolute; left: 0; top: 0; bottom: 20px; border-left: 2px solid var(--gris-claro); }
.pie-grafico { color: var(--gris-claro); font-size: 12px; font-weight: 800; letter-spacing: 0.053em; text-transform: uppercase; }
.carrusel .matiz { margin: 0; }
.carrusel .fuente { margin-top: 0; align-self: flex-start; }
/* Los rótulos tapan la línea de referencia que les pase por detrás, para leerse limpios */
.rotulo-fila { position: relative; z-index: 1; align-self: flex-start; padding: 0 6px 0 8px; background: var(--blanco); }
.g-fila .carril { position: relative; z-index: 1; }
.pie-grafico { margin-top: 6px; }

/* =====================================================================
   Conversación guiada
   ===================================================================== */
/* Paso 2: las dos formas de practicar, en dos tarjetas grandes */
.modos { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.modos .opcion { padding: 28px 20px; gap: 10px; font-size: 21px; font-weight: 900; }
.modos .opcion svg { width: 48px; height: 48px; stroke: var(--principal); }
.modos .opcion small { font-size: 15px; line-height: 1.35; }
.modos .opcion:hover:not(:disabled) { border-color: var(--principal); background: var(--principal-suave); }
#guiones .opcion small { font-size: 13px; line-height: 1.3; }

/* La frase que te toca, sobre la caja */
.guion { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding: 12px 16px; border: 2px solid var(--principal); border-radius: 16px; background: var(--principal-suave); }
.guion-cabecera { display: flex; align-items: baseline; gap: 12px; }
.guion-cabecera span { color: var(--principal-borde); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.guion-cabecera button.enlace { margin-left: auto; padding: 0; font-size: 12px; }
.guion strong { color: var(--carbon); font-size: 22px; line-height: 1.3; }
.guion-es { color: var(--gris); font-size: 15px; }
.guion .nota { color: var(--gris); }
.guion .nota:empty { display: none; }
.guion-botones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.guion-botones button.enlace { margin-left: 0; }

/* Al terminar */
.guion-final { align-self: center; padding: 16px 20px; border: 2px solid var(--principal); border-radius: 16px; background: var(--principal-suave); text-align: center; }
.guion-final strong { color: var(--principal-borde); font-size: 20px; font-weight: 900; }
.guion-final p { margin: 4px 0 8px; color: var(--gris); }
.guion-final .guion-botones { justify-content: center; }

/* En una conversación guiada no hay IA: sobran sus ayudas y el resumen */
body.con-guion #btn-ayuda,
body.con-guion #btn-sugerir,
body.con-guion #btn-resumen,
body.guion-fin .compositor { display: none; }

/* =====================================================================
   Logo, cambio de personaje y columna derecha
   ===================================================================== */
/* El logo es un botón, pero no debe parecerlo */
button.marca { padding: 0; border: 0; background: none; letter-spacing: -0.02em; text-transform: none; }
button.marca:hover:not(:disabled) { background: none; color: var(--principal-claro); }
button.marca:active:not(:disabled) { transform: none; }

/* Un poco más de aire entre la pregunta del paso 2 y sus tarjetas */
.bienvenida .pregunta { margin-bottom: 12px; }

#btn-personaje { margin: -4px 0 0; font-size: 12px; }
.lado .estado { margin-bottom: 0; }
#btn-personaje { margin-bottom: auto; }
body.inicio #btn-personaje { display: none; }
.personajes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.personaje { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border: 2px solid var(--linea); border-radius: 16px; text-align: center; }
.personaje img, .personaje .silueta { width: 110px; height: 110px; border-radius: 50%; border: 4px solid var(--linea); object-fit: cover; object-position: top; }
.personaje .silueta { display: grid; place-items: center; background: #f7f7f7; color: var(--gris-claro); font-weight: 900; font-size: 44px; }
.personaje strong { color: var(--carbon); font-size: 19px; }
.personaje small { color: var(--gris-claro); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.personaje.elegido { border-color: var(--principal); background: var(--principal-suave); }
.personaje.elegido img { border-color: var(--principal); }
.personaje.elegido small { color: var(--principal-borde); }
.personaje.pronto strong { color: var(--gris); }

#salir .dialogo-pie { gap: 8px; }

/* Columna derecha */
.panel { flex: none; width: 290px; min-height: 0; padding: 20px 20px 24px; border-left: 2px solid var(--linea); display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.panel h2 { margin: 0; color: var(--carbon); font-weight: 900; font-size: 22px; }
.panel h3 { margin: 8px 0 0; color: var(--gris-claro); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.panel-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.panel-cifras div { padding: 10px 12px; border: 2px solid var(--linea); border-radius: var(--radio); }
.panel-cifras strong { display: block; color: var(--carbon); font-weight: 900; font-size: 26px; line-height: 1.1; }
.panel-cifras span { color: var(--gris-claro); font-weight: 800; font-size: 11px; letter-spacing: 0.053em; text-transform: uppercase; }
.panel-vacio { margin: 0; color: var(--gris); font-size: 14px; }
.panel-lista { display: flex; flex-direction: column; gap: 8px; }
.panel-error { padding: 8px 12px; border: 2px solid var(--linea); border-left: 5px solid var(--rojo); border-radius: var(--radio); }
.panel-error.escritura { border-left-color: #e6b400; }
.panel-error.duda { border-left-color: var(--naranja); }
.panel-error .tipo { color: var(--gris-claro); font-weight: 800; font-size: 11px; letter-spacing: 0.053em; text-transform: uppercase; }
.panel-error .cambio { font-size: 16px; overflow-wrap: anywhere; }
.panel-error .mal { color: var(--rojo); text-decoration: line-through; }
.panel-error .bien { color: var(--verde-texto); font-weight: 800; }
.panel-error p { margin: 2px 0 0; color: var(--gris); font-size: 13px; line-height: 1.35; }
/* Antes de empezar no hay sesión; en pantallas medianas no cabe una tercera columna */
body.inicio .panel { display: none; }
@media (max-width: 1100px) { .panel { display: none; } }
@media (max-width: 820px) { #btn-personaje { display: none; } }
/* Con tres columnas la barra es más estrecha: el rótulo se recorta antes de
   empujar los botones a una segunda línea */
.contexto { flex: 1 1 0; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not(.inicio) .barra { padding-left: 16px; padding-right: 16px; }
body:not(.inicio) .acciones button { padding: 8px 10px; }
.guion-memoria { color: var(--principal-borde); font-weight: 800; font-size: 17px; }
/* De memoria, la frase en español es lo principal: va más grande */
.guion-memoria:not([hidden]) + .guion-es { color: var(--carbon); font-weight: 700; font-size: 20px; }

/* =====================================================================
   Plan gratis y página de Pro
   ===================================================================== */
button.pro { border-color: var(--principal); color: var(--principal-borde); }
button.pro:hover:not(:disabled) { background: var(--principal-suave); }
.opcion { position: relative; }
.solo-pro { position: absolute; top: 8px; right: 8px; padding: 1px 8px; border-radius: 8px; background: var(--principal); color: var(--blanco); font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: 0.053em; text-transform: uppercase; }

/* Invitación al terminar una conversación guiada */
.guion-mas { margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--principal); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.guion-final .guion-mas strong { color: var(--carbon); font-size: 18px; }
.guion-mas p { margin: 0 0 8px; }

.pagina-pro { position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: var(--blanco); }
.pro-barra { display: flex; align-items: center; gap: 16px; padding: 12px 24px; border-bottom: 2px solid var(--linea); }
.pro-barra button.enlace { margin: 0; }
.pro-barra .marca { margin-left: auto; }
.pro-barra .marca span { padding: 2px 10px; border-radius: 10px; background: var(--principal); color: var(--blanco); font-size: 18px; vertical-align: middle; letter-spacing: 0.02em; }
.pro-cuerpo { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 64px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pro-cuerpo .bajada { max-width: 560px; }
.pro-planes { width: 100%; margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; text-align: left; }
.pro-plan { padding: 24px; border: 2px solid var(--linea); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.pro-plan.destacado { border-color: var(--principal); background: #f7f3ff; }
.pro-plan h2 { margin: 0; color: var(--gris); font-weight: 800; font-size: 14px; letter-spacing: 0.053em; text-transform: uppercase; }
.pro-plan.destacado h2 { color: var(--principal-borde); }
.pro-precio { color: var(--carbon); font-weight: 900; font-size: 36px; line-height: 1.1; }
.pro-precio small { color: var(--gris); font-weight: 700; font-size: 16px; }
.pro-plan ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--gris); }
.pro-plan li strong { color: var(--carbon); }
.pro-plan button { margin-top: 8px; }
.pro-mensaje { margin: 0; padding: 10px 14px; border: 2px solid var(--principal); border-radius: var(--radio); background: var(--blanco); color: var(--carbon); font-size: 15px; }
.pro-cuerpo .lema { font-size: clamp(34px, 4.4vw, 52px); }
.pro-cuerpo .nota-datos { margin: 16px 0 0; color: var(--gris-claro); font-size: 13px; }
.admin { margin-top: 20px; padding-top: 4px; border-top: 2px dashed var(--linea); }

/* =====================================================================
   Preguntas de inicio y tablero
   ===================================================================== */
.sin-margen { margin-top: 0; }

.encuesta { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.enc-opciones { width: min(460px, 100%); display: flex; flex-direction: column; gap: 10px; }
.enc-opciones .opcion { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 16px 20px; font-size: 19px; font-weight: 800; text-align: left; }
.enc-opciones .opcion small { font-size: 14px; }
.enc-opciones .opcion:hover:not(:disabled) { border-color: var(--principal); background: var(--principal-suave); }
.encuesta .puntos { display: flex; gap: 8px; }
.encuesta .puntos span { width: 10px; height: 10px; border-radius: 50%; background: var(--linea); }
.encuesta .puntos span.activo { background: var(--principal); }
.encuesta button.enlace { margin: 0; color: var(--gris-claro); font-size: 12px; }

/* El tablero necesita más ancho que las tarjetas de tema */
.bienvenida[data-vista="modo"] { max-width: 1000px; text-align: left; align-items: stretch; }
.bienvenida[data-vista="modo"] #btn-volver { align-self: flex-start; }
.tablero { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.tb-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tb-cabecera .pregunta { margin: 0; font-size: 40px; color: var(--principal); }
.bienvenida .tb-cabecera p { max-width: 520px; margin-top: 4px; font-size: 18px; }
.tb-rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tb-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tb-tarjeta { padding: 18px 20px; border: 2px solid var(--linea); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.tb-tarjeta h2, .tb-hoy h2 { margin: 0; display: flex; justify-content: space-between; color: var(--gris-claro); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.tb-tarjeta .modos { grid-template-columns: 1fr 1fr; gap: 12px; }
.tb-tarjeta .modos .opcion { padding: 18px 12px; font-size: 18px; text-align: center; }
.tb-tarjeta .modos .opcion svg { width: 38px; height: 38px; }
.tb-tarjeta .modos .opcion small { font-size: 13px; }
.bienvenida .tb-plan { max-width: none; font-size: 14px; }
.tb-plan button.enlace { margin: 0; padding: 0; font-size: 13px; }

/* Lista de conversaciones guiadas */
.tb-lista { display: flex; flex-direction: column; }
.tb-fila { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border: 0; border-bottom: 2px solid var(--linea); border-radius: 0; background: none; color: var(--carbon); font-size: 16px; font-weight: 700; letter-spacing: normal; text-transform: none; text-align: left; }
.tb-fila:last-child { border-bottom: 0; }
.tb-fila:hover:not(:disabled) { background: var(--principal-suave); }
.tb-fila:active:not(:disabled) { transform: none; border-bottom-width: 2px; }
.tb-fila i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--linea); border-radius: 50%; color: var(--blanco); font-style: normal; font-size: 13px; font-weight: 900; }
.tb-fila.hecha i { border-color: var(--principal); background: var(--principal); }
.tb-fila span { flex: 1; min-width: 0; }
.tb-fila small { color: var(--gris-claro); font-size: 12px; font-weight: 700; }
.tb-fila.hecha small { color: var(--principal-borde); }

/* Meta de hoy: anillo y semana */
.tb-hoy { flex-direction: row; align-items: center; gap: 18px; background: #f7f3ff; border-color: var(--principal); }
.tb-anillo { flex: none; width: 92px; height: 92px; }
.tb-anillo circle { fill: none; stroke: var(--blanco); stroke-width: 9; }
.tb-anillo #tb-arco { stroke: var(--principal); stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.tb-anillo text { fill: var(--carbon); font-weight: 900; font-size: 22px; }
.tb-hoy-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tb-hoy h2 { color: var(--principal-borde); }
.tb-hoy-texto > strong { color: var(--carbon); font-weight: 900; font-size: 20px; line-height: 1.2; }
.tb-semana { display: flex; gap: 6px; margin-top: 2px; }
.tb-semana span { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--linea); border-radius: 50%; background: var(--blanco); color: var(--gris-claro); font-weight: 800; font-size: 12px; }
.tb-semana span.hecho { border-color: var(--principal); background: var(--principal); color: var(--blanco); }
.tb-semana span.hoy { border-color: var(--principal); }

.tb-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tb-cifras div { padding: 12px 14px; border: 2px solid var(--linea); border-radius: 16px; }
.tb-cifras strong { display: block; color: var(--carbon); font-weight: 900; font-size: 28px; line-height: 1.1; }
.tb-cifras span { color: var(--gris-claro); font-weight: 800; font-size: 11px; letter-spacing: 0.053em; text-transform: uppercase; }
.bienvenida .tb-tarjeta .panel-vacio { max-width: none; }
.tb-tarjeta .guion-botones { margin-top: 0; }
.tb-tarjeta .guion-botones button { padding: 8px 14px; font-size: 13px; }

.tb-frase { gap: 4px; }
.tb-frase strong { color: var(--carbon); font-weight: 900; font-size: 22px; line-height: 1.25; }
.tb-frase span { color: var(--gris); font-size: 15px; }
.tb-frase button.enlace { align-self: flex-start; margin: 4px 0 0; padding: 0; }

@media (max-width: 820px) {
  .tb-rejilla { grid-template-columns: 1fr; }
  .tb-cabecera .pregunta { font-size: 32px; }
}

/* Lo que es de Pro en el tablero: se ve borroso, con el botón encima */
.tb-bloqueo { position: relative; }
.tb-borroso { filter: blur(5px); opacity: 0.75; pointer-events: none; user-select: none; }
.tb-capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.tb-capa span { padding: 2px 10px; border-radius: 10px; background: var(--blanco); color: var(--carbon); font-weight: 800; font-size: 15px; }
.tb-capa button { padding: 8px 18px; font-size: 13px; }
/* En la tarjeta de errores la capa cubre la lista, no el título */
.tb-tarjeta.tb-bloqueo .tb-capa { top: 44px; }
.tb-lista .tb-bloqueo { min-height: 96px; }

/* =====================================================================
   Pro en dorado: botones, etiquetas y la página de Pro
   ===================================================================== */
button.primario.oro { background: var(--oro); border-color: var(--oro); border-bottom-color: var(--oro-borde); color: var(--oro-tinta); }
button.primario.oro:hover:not(:disabled) { background: var(--oro-claro); border-color: var(--oro-claro); border-bottom-color: var(--oro-borde); }
button.enlace.oro { color: var(--oro-texto); }
button.pro { border-color: var(--oro); border-bottom-color: var(--oro-borde); background: var(--oro-suave); color: var(--oro-texto); }
button.pro:hover:not(:disabled) { background: var(--oro-claro); color: var(--oro-tinta); }
.solo-pro { background: var(--oro); color: var(--oro-tinta); }
.guion-mas { border-top-color: var(--oro); }

.pro-barra .marca span { background: var(--oro); color: var(--oro-tinta); }
.antetitulo.oro { color: var(--oro-texto); }
.lema span.oro { color: var(--oro-borde); }
.pro-plan.destacado { border-color: var(--oro); background: var(--oro-suave); }
.pro-plan.destacado h2 { color: var(--oro-texto); }
.pro-mensaje { border-color: var(--oro); }

/* Brillo de Pro: una franja de luz cruza lo dorado cada pocos segundos */
button.primario.oro, button.pro, .pro-barra .marca span { position: relative; overflow: hidden; }
.pro-barra .marca span { display: inline-block; }
.solo-pro { overflow: hidden; }
button.primario.oro::after, button.pro::after, .solo-pro::after, .pro-barra .marca span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  animation: brillo-pro 3.6s ease-in-out infinite;
  pointer-events: none;
}
/* Pasa rápido y descansa: si brillara sin parar, cansaría */
@keyframes brillo-pro {
  0%, 55% { transform: translateX(-130%) skewX(-18deg); }
  85%, 100% { transform: translateX(340%) skewX(-18deg); }
}
/* El plan Pro de la página de precios: un resplandor suave que respira */
.pro-plan.destacado { animation: resplandor-pro 3.6s ease-in-out infinite; }
@keyframes resplandor-pro {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 197, 51, 0); }
  50% { box-shadow: 0 0 0 6px rgba(255, 197, 51, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  button.primario.oro::after, button.pro::after, .solo-pro::after, .pro-barra .marca span::after { animation: none; }
  .pro-plan.destacado { animation: none; }
}

/* Idioma que todavía no está disponible en el menú */
.menu-lista button:disabled { color: var(--gris-claro); cursor: default; }
.menu-lista button small { margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.053em; text-transform: uppercase; }

/* Interruptor "me corrige: Sí/No" junto a los botones del chat */
.botones button.interruptor { color: var(--gris); }
.botones button.interruptor::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: var(--gris-claro); }
.botones button.interruptor.activo { color: var(--principal-borde); }
.botones button.interruptor.activo::after { background: var(--principal); }
/* En una conversación guiada no hay nada que corregir hablando */
body.con-guion .fila-opcion { display: none; }

/* Botón "?" que explica la opción de al lado */
button.duda { flex: none; width: 22px; height: 22px; padding: 0; border: 2px solid var(--linea); border-radius: 50%; background: var(--blanco); color: var(--gris); font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: 0; }
button.duda:hover:not(:disabled) { border-color: var(--principal); background: var(--principal-suave); color: var(--principal-borde); }
button.duda:active:not(:disabled) { transform: none; border-bottom-width: 2px; }
/* El globo, cuando enseña una explicación */
/* Ancho fijo: si no, cerca del borde de la pantalla se estrecha y sale muy largo */
.globo.ayuda { width: min(340px, calc(100vw - 16px)); max-width: none; display: flex; flex-direction: column; gap: 3px; }
.globo .ayuda-titulo { margin-top: 8px; color: var(--carbon); font-weight: 800; font-size: 15px; }
.globo .ayuda-titulo:first-child { margin-top: 0; }
.globo.ayuda p { font-size: 14px; line-height: 1.4; }
.globo .ayuda-ejemplo { color: var(--principal-borde); font-size: 14px; }

/* Botón normal que en el plan gratis lleva a Pro: dorado y con su etiqueta */
/* Botones de la barra que son de Pro: se ven como los demás, con una etiqueta
   pequeña. Todos dorados juntos hacían parecer que la app entera estaba cerrada. */
button.de-pro::after { content: "Pro"; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--oro); color: var(--oro-tinta); font-size: 10px; }
/* En la barra del chat no cabe la etiqueta: ahí el dorado ya dice que es de Pro */
.acciones button.de-pro::after { font-size: 9px; padding: 0 5px; }
body:not(.inicio) .acciones { gap: 6px; }
body:not(.inicio) .acciones button { padding: 8px; font-size: 12px; }

/* Pestañas de nivel sobre las conversaciones guiadas */
.pestanas { display: flex; gap: 8px; justify-content: center; }
.pestanas button { min-width: 64px; padding: 8px 14px; font-size: 15px; }
.pestanas button.elegida { border-color: var(--principal); background: var(--principal-suave); color: var(--principal-borde); }

/* "Explícame más" dentro de la ficha de un error */
.panel-error button.mas, .frecuente button.mas { margin: 4px 0 0; padding: 0; font-size: 12px; }
.explicacion-mas { margin-top: 8px; padding-top: 8px; border-top: 2px dashed var(--linea); display: flex; flex-direction: column; gap: 6px; }
.panel-error .explicacion-mas p, .globo .explicacion-mas p, .frecuente .explicacion-mas p { margin: 0; color: var(--carbon); font-size: 14px; line-height: 1.4; }
.explicacion-mas .ejemplo { display: flex; flex-direction: column; padding-left: 8px; border-left: 3px solid var(--principal-suave); }
.explicacion-mas .ejemplo strong { color: var(--carbon); font-size: 14px; }
.explicacion-mas .ejemplo span { color: var(--gris); font-size: 12px; }
.panel-error .explicacion-mas .truco, .globo .explicacion-mas .truco, .frecuente .explicacion-mas .truco { color: var(--principal-borde); font-weight: 700; }
.frecuente button.mas { display: block; }
.globo button.mas { display: block; margin-top: 8px; padding: 0; }

/* =====================================================================
   Tutorial del tablero: foco sobre una zona y cuadro con la explicación
   ===================================================================== */
/* La capa tapa toda la pantalla para que no se pueda pulsar nada de debajo */
.tutorial { position: fixed; inset: 0; z-index: 30; }
/* El velo: oscurece y desenfoca toda la página. app.js le recorta un agujero
   (clip-path) sobre la zona que se explica, que queda nítida y a plena luz */
.tut-foco { position: fixed; inset: 0; background: rgba(0, 4, 55, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: none; }
.tut-globo { position: fixed; width: min(360px, calc(100vw - 16px)); padding: 16px 18px; border: 2px solid var(--principal); border-radius: 16px; background: var(--blanco); display: flex; flex-direction: column; gap: 6px; }
.tut-paso { color: var(--principal-borde); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.tut-globo strong { color: var(--carbon); font-weight: 900; font-size: 20px; line-height: 1.2; }
.tut-globo p { margin: 0; color: var(--gris); font-size: 15px; line-height: 1.4; }
.tut-botones { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tut-botones button { padding: 8px 16px; font-size: 13px; }
.tut-botones button.enlace { margin: 0 auto 0 0; padding: 0; color: var(--gris-claro); font-size: 12px; }
.tut-botones #tut-atras { margin-left: auto; }
.tut-botones #tut-saltar:not([hidden]) ~ #tut-atras { margin-left: 0; }
#btn-tutorial { align-self: flex-start; margin: -8px 0 0; padding: 0; font-size: 12px; }

/* Movimiento suave del tutorial: la capa entra poco a poco y el cuadro de texto
   se apaga mientras el foco viaja y se enciende ya en su sitio */
.tutorial:not([hidden]) { animation: tut-entrar 0.3s ease; }
@keyframes tut-entrar { from { opacity: 0; } to { opacity: 1; } }
.tut-globo { transition: opacity 0.22s ease, transform 0.22s ease; }
.tut-globo.cambiando { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) {
  .tutorial:not([hidden]) { animation: none; }
  .tut-globo { transition: none; }
}

/* =====================================================================
   Celular y pantallas estrechas
   ===================================================================== */
/* Fuera del celular, el botón de menú y los de abrir/cerrar la sesión no existen */
#btn-menu, #btn-sesion, #panel-cerrar { display: none; }

/* La altura real de la pantalla del celular, sin contar las barras del navegador */
@supports (height: 100dvh) { html, body { height: 100dvh; } }

/* La columna "Esta sesión" no cabe al lado: se abre a pantalla completa */
@media (max-width: 1100px) {
  body:not(.inicio) #btn-sesion { display: inline-block; }
  body.panel-abierto .panel { display: flex; position: fixed; inset: 0; z-index: 25; width: auto; border-left: 0; background: var(--blanco); }
  #panel-cerrar { display: block; align-self: flex-start; margin: 0 0 4px; padding: 0; font-size: 13px; }
}

@media (max-width: 640px) {
  /* --- Barra de arriba: el logo y un botón "Menú" que despliega lo demás --- */
  .barra { position: relative; flex-wrap: nowrap; padding: 8px 12px; gap: 8px; }
  .barra .marca { font-size: 24px; }
  #btn-menu { display: inline-block; flex: none; margin-left: auto; padding: 7px 12px; font-size: 12px; }
  .acciones, body:not(.inicio) .acciones { display: none; position: absolute; top: calc(100% + 4px); right: 8px; z-index: 12; min-width: 220px; margin: 0; padding: 8px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; border: 2px solid var(--linea); border-radius: 16px; background: var(--blanco); }
  .barra.menu-abierto .acciones { display: flex; }
  .acciones button, body:not(.inicio) .acciones button, .acciones .menu-idioma summary { width: 100%; padding: 10px 12px; font-size: 13px; text-align: left; }
  /* Dentro del menú, los idiomas se abren en el sitio, sin flotar */
  .acciones .menu-lista { position: static; margin-top: 4px; border: 0; padding: 0 0 0 8px; }

  /* --- Portada --- */
  body.inicio.paso-1 .lado { padding: 20px 16px 28px; gap: 10px; }
  body.inicio.paso-1 .avatar { width: min(170px, 46vw); border-width: 5px; }
  body.inicio.paso-1 .saludo span { font-size: 21px; }
  .lema { font-size: 36px; }
  .bajada { font-size: 17px; }
  body.inicio.paso-1 #btn-empezar { width: 100%; padding: 14px 20px; }
  .bloque { padding-left: 16px; padding-right: 16px; }
  .pro-cuerpo { padding-top: 28px; }
  .pro-barra { padding: 10px 12px; }

  /* --- Preguntas, tablero y elegir tema --- */
  body.inicio.paso-2 .lado { padding: 10px; }
  body.inicio.paso-2 .avatar { width: 88px; border-width: 4px; }
  body.inicio #chat { padding: 14px 12px 28px; }
  .pregunta { font-size: 26px; }
  .tb-cabecera .pregunta { font-size: 30px; }
  .tb-cabecera #tb-seguir { width: 100%; padding: 14px 16px; }
  .tb-tarjeta { padding: 14px; }
  .tb-tarjeta .modos .opcion { padding: 14px 8px; font-size: 16px; }
  .tb-hoy { gap: 12px; }
  .tb-anillo { width: 76px; height: 76px; }
  .tb-semana { gap: 4px; }
  .tb-semana span { width: 25px; height: 25px; font-size: 11px; }
  .tb-cifras { gap: 6px; }
  .tb-cifras div { padding: 10px 8px; }
  .tb-cifras strong { font-size: 24px; }
  .tb-cifras span { font-size: 10px; letter-spacing: 0.02em; }
  body.inicio.paso-2 .temas { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.inicio.paso-2 .temas .opcion { padding: 14px 8px; font-size: 15px; }

  /* --- Conversación: lo importante es ver los mensajes --- */
  .lado { padding: 6px 12px; gap: 10px; }
  .avatar { width: 46px; border-width: 2px; }
  .nombre { font-size: 19px; }
  .estado { padding: 4px 10px; font-size: 11px; }
  body:not(.inicio) .barra { padding: 6px 12px; }
  #chat { padding: 12px 10px; }
  .mensajes { gap: 12px; }
  .burbuja { font-size: 17px; }
  .compositor { padding: 8px 10px 10px; }
  .transcripcion { min-height: 46px; max-height: 110px; padding: 10px 12px; font-size: 17px; }
  .botones { gap: 6px; margin-top: 8px; }
  /* Hablar y Enviar, grandes y en la primera fila; lo demás, en pequeño debajo */
  .botones .mic { flex: 1 1 55%; min-width: 0; padding: 12px; }
  .botones #btn-enviar { flex: 1 1 30%; padding: 12px; }
  /* Segunda fila: las dos ayudas a partes iguales */
  .botones .mic { flex: 1 1 40%; }
  .botones #btn-enviar { flex: 1 1 25%; }
  .botones #btn-opciones { padding: 10px 12px; }
  .botones { row-gap: 3px; }
  .botones #btn-ayuda, .botones #btn-sugerir { flex: 1 1 0; padding: 10px 6px; font-size: 12px; }
  .desplegable-lista { right: 0; left: auto; }
  .botones .pista { flex-basis: 100%; font-size: 13px; }
  .botones button.enlace { font-size: 12px; }
  .guion { padding: 10px 12px; }
  .guion strong { font-size: 19px; }
  .guion-final { align-self: stretch; padding: 14px; }
  .chuleta, .sugerencias { padding: 8px 12px; }

  /* --- Ventanas --- */
  dialog { padding: 18px 16px; }
  dialog h2 { font-size: 26px; }
  .tut-globo { padding: 14px; }
}

/* "← Inicio": vuelve al tablero desde la conversación, en cualquier pantalla */
#btn-atras { flex: none; padding: 8px 12px; font-size: 13px; }
@media (max-width: 640px) {
  /* En el celular basta la flecha */
  #btn-atras { padding: 6px 12px; font-size: 16px; line-height: 1.1; }
  #btn-atras span { display: none; }
}

.admin #btn-panel { display: block; margin-top: 12px; }

/* Ventana de cuenta: entrar con Google y "Tu cuenta" */
.cuenta { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cuenta img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--linea); }
.cuenta div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cuenta-nombre { color: var(--carbon); font-weight: 900; font-size: 19px; }
.cuenta-correo { color: var(--gris); font-size: 14px; overflow-wrap: anywhere; }
.cuenta-plan { color: var(--gris-claro); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.cuenta .solo-pro { position: static; }
.cuenta-google { min-height: 44px; margin: 16px 0 8px; color: var(--rojo); font-size: 14px; }
#dialogo-contenido > button { margin-top: 12px; }

/* Etiqueta de "necesita cuenta" en la tarjeta del chat libre, y su aviso en la ventana */
.con-cuenta { position: absolute; top: 8px; right: 8px; padding: 1px 8px; border-radius: 8px; background: var(--azul-suave); color: #0b7fb8; font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.cuenta-motivo { padding: 10px 14px; border: 2px solid var(--azul-borde); border-radius: var(--radio); background: var(--azul-suave); color: var(--carbon); font-size: 15px; }

/* Pie de la portada y enlaces de privacidad */
.pie { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 20px 16px 28px; color: var(--gris-claro); font-size: 13px; }
.pie a, p.ayuda a { color: var(--azul); font-weight: 700; }
button.enlace.peligro { display: block; margin: 12px 0 0; padding: 0; color: var(--rojo); font-size: 12px; }

/* Tarjeta "Tu uso" del tablero: medidores contra los límites del plan */
.tb-medidores { display: flex; flex-direction: column; gap: 12px; }
.tb-medidor-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.tb-medidor-cabecera span { color: var(--gris); font-weight: 700; }
.tb-medidor-cabecera strong { color: var(--carbon); font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-medidor-carril { height: 12px; margin-top: 4px; border-radius: 6px; background: #f1eefb; overflow: hidden; }
.tb-medidor-carril i { display: block; height: 100%; min-width: 2px; border-radius: 6px; background: var(--principal); transition: width 0.4s ease; }
/* Queda poco: naranja. Se acabó: rojo. El número también lo dice, no solo el color. */
.tb-medidor.casi .tb-medidor-carril i { background: var(--naranja); }
.tb-medidor.lleno .tb-medidor-carril i { background: var(--rojo); }
.tb-medidor.lleno .tb-medidor-cabecera strong { color: var(--rojo); }
.bienvenida .tb-uso-nota { max-width: none; margin: 0; font-size: 14px; }
.tb-uso-nota:empty, .tb-medidores:empty { display: none; }
.tb-uso-nota button.enlace { margin: 0; padding: 0; font-size: 13px; }
.tb-uso h2 span { color: var(--principal-borde); }

/* Explicación de los límites en la página de Pro */
.pro-limites { width: 100%; margin-top: 16px; padding: 20px 24px; border: 2px solid var(--linea); border-radius: 16px; text-align: left; }
.pro-limites h2 { margin: 0 0 8px; color: var(--carbon); font-weight: 900; font-size: 20px; }
.pro-limites p { margin: 0 0 8px; color: var(--gris); font-size: 15px; }
.pro-limites ul { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--gris); font-size: 15px; }
.pro-limites li strong { color: var(--carbon); }
.pro-limites p:last-child { margin: 0; }

.bienvenida .tb-uso-clave { max-width: none; margin: 0; color: var(--gris-claro); font-size: 12px; }

.cuenta-prueba { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borde, #ddd); }

/* Se acabaron los mensajes gratis de hoy: un velo oscuro y desenfocado tapa toda
   la página, igual que en el tutorial, y la tarjeta salta al frente */
.tope-velo { position: fixed; inset: 0; z-index: 18; display: flex; padding: 16px; overflow-y: auto; background: rgba(0, 4, 55, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: tut-entrar 0.3s ease both; }
.tope { position: relative; margin: auto; width: min(100%, 540px); padding: 30px 28px 16px; border: 2px solid var(--oro); border-radius: 24px; background: var(--oro-suave); box-shadow: 0 24px 60px rgba(0, 4, 55, 0.45); animation: tope-saltar 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.35) 0.1s both; }
.tope .solo-pro { top: 18px; right: 18px; }
.tope-titulo { display: block; padding-right: 56px; font-size: 24px; line-height: 1.2; font-weight: 900; color: var(--oro-tinta); }
.tope p { margin: 10px 0 0; font-size: 17px; line-height: 1.4; }
.tope p.tope-con { margin-top: 18px; font-weight: 800; color: var(--oro-texto); }
.tope ul { margin: 8px 0 0; padding-left: 22px; font-size: 17px; line-height: 1.4; }
.tope li { margin: 4px 0; }
.tope-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tope-botones button { flex: 1 1 180px; padding-top: 14px; padding-bottom: 14px; }
button.tope-no { display: block; margin: 10px auto 0; padding: 8px 14px; color: var(--oro-texto); }
@keyframes tope-saltar { 0% { opacity: 0; transform: translateY(26px) scale(0.86); } 100% { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .tope { padding: 24px 18px 12px; }
  .tope-titulo { font-size: 22px; }
  .tope p, .tope ul { font-size: 16px; }
}
.tope-franja, .nota-voz { align-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: 10px; padding: 8px 16px; border: 2px solid var(--oro); border-radius: 14px; background: var(--oro-suave); color: var(--oro-tinta); font-weight: 800; font-size: 14px; }
.transcripcion.en-pausa { opacity: 0.5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tope, .tope-velo { animation: none; } }

.nota-voz { max-width: 460px; text-align: center; font-weight: 700; animation: tut-entrar 0.4s ease both; }

/* La "x" que borra lo escrito, dentro de la caja */
.caja-zona { position: relative; }
.caja-zona .transcripcion { padding-right: 44px; }
button.borrar-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--linea); color: var(--gris); font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: 0; }
button.borrar-x:hover:not(:disabled) { background: var(--gris-claro); color: var(--blanco); }
button.borrar-x:active:not(:disabled) { transform: none; }
.transcripcion:empty + .borrar-x { display: none; }

/* Menú del engranaje, en la fila de botones del chat. Se abre hacia arriba, porque la fila está al pie de la pantalla */
.desplegable { position: relative; }
.botones #menu-opciones { margin-left: auto; }
.botones #menu-opciones .desplegable-lista { left: auto; right: 0; }
/* El salto de fila cuenta dos veces la separación: por eso la de filas es la mitad */
.botones { row-gap: 5px; }
.botones .salto { flex-basis: 100%; height: 0; }
body.con-guion .botones .salto { display: none; }
.botones .mas-opciones { padding-left: 14px; padding-right: 14px; font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: 1px; }
.desplegable-lista { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 12; width: max-content; max-width: min(320px, calc(100vw - 24px)); padding: 8px; border: 2px solid var(--linea); border-radius: 16px; background: var(--blanco); box-shadow: 0 10px 28px rgba(0, 4, 55, 0.14); display: flex; flex-direction: column; gap: 4px; }
.desplegable-lista[hidden] { display: none; }
.desplegable-lista button.opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--carbon); letter-spacing: normal; text-transform: none; text-align: left; }
.desplegable-lista button.opcion strong { font-size: 16px; font-weight: 800; }
.desplegable-lista button.opcion span { color: var(--gris); font-size: 13px; font-weight: 600; }
.desplegable-lista button.opcion:hover:not(:disabled) { background: var(--principal-suave); }
.desplegable-lista button.opcion:active:not(:disabled) { transform: none; }
.desplegable-lista button.opcion:disabled { opacity: 0.45; }
#menu-opciones .desplegable-lista { gap: 12px; padding: 14px; }
.fila-opcion { display: flex; align-items: center; gap: 8px; }
.vel-chat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--gris); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.vel-chat select { padding: 6px 10px; border: 2px solid var(--linea); border-radius: 10px; background: var(--blanco); color: var(--carbon); font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; }

/* Página de Pro: los números exactos, debajo del titular */
.pro-detalle { display: block; margin-top: 2px; color: var(--gris); font-size: 13px; font-weight: 600; }

/* Tablero: cada error frecuente con la frase donde se dijo */
.panel-error .tb-dijiste { margin-top: 6px; color: var(--carbon); }
.panel-error .tb-dijiste em { color: var(--gris-claro); font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: 0.053em; text-transform: uppercase; }
.panel-error .tb-dijiste mark { padding: 0 2px; border-radius: 4px; background: #ffe1e1; color: var(--rojo); }

.explicacion-mas + button.mas { margin-top: 8px; }

/* Ventana "Tu propio tema" */
input.texto-propio { width: 100%; padding: 10px 12px; border: 2px solid var(--linea); border-radius: 12px; background: var(--blanco); color: var(--carbon); font: inherit; font-size: 16px; font-weight: 600; letter-spacing: normal; text-transform: none; }
input.texto-propio:focus { outline: none; border-color: var(--azul-borde); }
.ideas-propio { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ideas-propio button { padding: 4px 10px; border: 2px solid var(--linea); border-bottom-width: 2px; border-radius: 999px; background: var(--blanco); color: var(--gris); font-size: 13px; font-weight: 700; letter-spacing: normal; text-transform: none; }
.ideas-propio button:hover { border-color: var(--principal); background: var(--principal-suave); color: var(--principal-borde); }
.ideas-propio + .campo { margin-top: 20px; }
.ideas-propio ~ button.primario { margin-top: 16px; }

/* "?" junto a "Tu uso", que abre la explicación completa */
.tb-uso-titulo { display: inline-flex; align-items: center; gap: 8px; }

/* La "x" de las ventanas: arriba a la derecha y fija mientras se baja */
dialog button.cerrar-x { position: sticky; top: 0; float: right; z-index: 2; width: 36px; height: 36px; margin: -8px -8px 0 12px; padding: 0; border: 2px solid var(--linea); border-radius: 50%; background: var(--blanco); color: var(--gris); font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: 0; }
dialog button.cerrar-x:hover { border-color: var(--principal); background: var(--principal-suave); color: var(--principal-borde); }
dialog button.cerrar-x:active { transform: none; }

/* "Explícame más" en bloques: etiqueta pequeña arriba y una idea corta debajo */
.explicacion-mas { gap: 10px; }
.exp-bloque { display: flex; flex-direction: column; gap: 2px; color: var(--carbon); font-size: 14px; line-height: 1.4; }
.exp-bloque > em { color: var(--gris-claro); font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: 0.053em; text-transform: uppercase; }
.exp-bloque > em:empty { display: none; }
.exp-bloque .exp-fr { color: var(--verde-texto); font-weight: 800; font-size: 15px; }
.exp-bloque .ejemplo { margin-top: 4px; }
.exp-bloque.truco { padding: 8px 10px; border-radius: 10px; background: var(--principal-suave); }
.exp-bloque.truco > span { color: var(--principal-borde); font-weight: 700; }

/* Temas del chat libre, en grupos con título. Los dos últimos, en tarjetas anchas */
.grupos-temas { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.grupos-temas[hidden] { display: none; }
.temas-titulo { margin: 14px 0 0; color: var(--gris-claro); font-weight: 800; font-size: 13px; letter-spacing: 0.053em; text-transform: uppercase; text-align: left; }
.temas-titulo:first-child { margin-top: 0; }
.temas-anchas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.temas-anchas .opcion { display: grid; grid-template-columns: 40px 1fr; align-items: center; column-gap: 14px; row-gap: 2px; padding: 16px 18px; text-align: left; font-size: 17px; }
.temas-anchas .opcion svg { grid-row: 1 / span 3; width: 36px; height: 36px; }
.temas-anchas .opcion span, .temas-anchas .opcion small { grid-column: 2; }
.temas-anchas .opcion small { font-size: 13px; line-height: 1.35; }
.temas-anchas .opcion small.ultima { color: var(--principal-borde); font-weight: 800; }
.temas-anchas .opcion .solo-pro { grid-column: auto; }
@media (max-width: 640px) { .temas-anchas { grid-template-columns: 1fr; } }

/* Página de Pro: la tabla plan a plan y las preguntas frecuentes */
.pro-todo { width: 100%; text-align: left; }
.pro-todo h2 { margin: 36px 0 12px; color: var(--carbon); font-weight: 900; font-size: 22px; }
.pro-tabla { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px solid var(--linea); border-radius: 16px; overflow: hidden; font-size: 15px; }
.pro-tabla th, .pro-tabla td { padding: 10px 14px; border-top: 1px solid var(--linea); vertical-align: middle; }
.pro-tabla tr:first-child th { border-top: 0; color: var(--gris-claro); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; text-align: center; }
.pro-tabla th.que { color: var(--carbon); font-weight: 600; text-align: left; }
.pro-tabla td { width: 24%; color: var(--gris); font-weight: 700; text-align: center; }
.pro-tabla .de-pro { background: var(--oro-suave); color: var(--oro-tinta); }
.pro-tabla tr:first-child th.de-pro { color: var(--oro-texto); }
.pro-tabla td.si { color: var(--verde-texto); font-size: 18px; font-weight: 900; }
.pro-tabla td.no { color: var(--gris-claro); }
.pro-tabla tr.pro-grupo th { background: var(--principal-suave); color: var(--principal-borde); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; text-align: left; }
.pro-preguntas { display: flex; flex-direction: column; gap: 8px; }
.pro-preguntas .pro-pregunta { padding: 14px 16px; border: 2px solid var(--linea); border-radius: 14px; background: var(--blanco); }
.pro-preguntas h3 { margin: 0 0 6px; color: var(--carbon); font-weight: 800; font-size: 16px; }
.pro-preguntas .pro-pregunta p { padding: 0; }
.pro-preguntas summary { padding: 14px 44px 14px 16px; position: relative; cursor: pointer; list-style: none; color: var(--carbon); font-weight: 800; font-size: 16px; }
.pro-preguntas summary::-webkit-details-marker { display: none; }
.pro-preguntas summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--principal); font-size: 22px; font-weight: 800; line-height: 1; }
.pro-preguntas details[open] summary::after { content: "–"; }
.pro-preguntas details[open] { border-color: var(--principal); }
.pro-preguntas p { margin: 0; padding: 0 16px 14px; color: var(--gris); font-size: 15px; line-height: 1.5; }
.pro-preguntas a { color: var(--azul-borde, #1899d6); font-weight: 700; }
@media (max-width: 640px) {
  .pro-tabla { font-size: 13px; }
  .pro-tabla th, .pro-tabla td { padding: 8px; }
  .pro-tabla td { width: 27%; }
}

/* Página de Pro: botón a los detalles, y la página de detalles encima de ella */
.pro-mas-info { margin-top: 16px; }
.pagina-pro-info { z-index: 21; }
.pagina-pro-info .pro-cuerpo { gap: 8px; }
.pagina-pro-info .pro-todo { display: flex; flex-direction: column; }
.pagina-pro-info .pro-todo .antetitulo, .pagina-pro-info .pro-todo .lema, .pagina-pro-info .pro-todo .bajada { align-self: center; text-align: center; }
.pagina-pro-info #pro-info-quiero { margin-top: 28px; min-width: 240px; }

/* Al terminar la primera conversación sin cuenta: invitación a guardarla */
.guardar-progreso ul { margin: 4px auto 12px; padding: 0; list-style: none; display: inline-flex; flex-direction: column; gap: 4px; text-align: left; color: var(--carbon); font-weight: 700; font-size: 15px; }
.guardar-progreso li::before { content: "✓ "; color: var(--verde-texto); font-weight: 900; }
.guardar-progreso .cuenta-google { display: flex; justify-content: center; min-height: 44px; }
.guardar-progreso .ayuda { margin-top: 8px; font-size: 12px; }

/* Ventanas cortas: todo centrado */
dialog.centrado, #salir { text-align: center; }
dialog.centrado .dialogo-pie, #salir .dialogo-pie { justify-content: center; }
dialog.centrado .cuenta-google { display: flex; justify-content: center; }
dialog.centrado .cuenta { flex-direction: column; text-align: center; }
dialog.centrado .cuenta div { align-items: center; }
dialog.centrado .personajes { justify-content: center; }
dialog.centrado #dialogo-contenido > button { margin-left: auto; margin-right: auto; }
dialog.centrado h2 { padding: 0 36px; }

/* Portada: la conversación de muestra que se escribe sola */
.bloque-demo { align-items: center; }
.pasos-demo { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: 14px; }
.pasos-demo li { counter-increment: paso; position: relative; padding-left: 44px; color: var(--gris); font-size: 18px; line-height: 1.4; }
.pasos-demo li::before { content: counter(paso); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--principal); color: var(--blanco); font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.pasos-demo strong { color: var(--carbon); }
.demo { border: 2px solid var(--linea); border-radius: 20px; background: var(--blanco); box-shadow: 0 18px 40px rgba(0, 4, 55, 0.08); overflow: hidden; }
.demo-barra { display: flex; gap: 6px; padding: 8px; border-bottom: 2px solid var(--linea); background: #fafafa; }
button.demo-pestana { flex: 1; padding: 8px 10px; border: 2px solid transparent; border-radius: 12px; background: none; color: var(--gris-claro); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
button.demo-pestana:hover { color: var(--gris); }
button.demo-pestana:active { transform: none; }
button.demo-pestana.elegida { border-color: var(--principal); background: var(--principal-suave); color: var(--principal-borde); }
/* Alto fijo: la conversación crece dentro y la página no salta */
.demo-chat { height: 430px; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; transition: opacity 0.45s ease; }
.demo-chat.demo-sale { opacity: 0; }
.demo-chat .mensaje { max-width: 92%; }
.demo-chat .mensaje.ia { flex-direction: row; align-items: flex-end; gap: 8px; }
.demo-chat .burbuja { padding: 10px 14px; font-size: 17px; }
.demo-chat .traduccion { margin-top: 6px; padding-top: 6px; font-size: 14px; }
.demo-chat mark.error { cursor: default; animation: demo-marca 0.5s ease both; }
.demo-cara { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--principal); object-fit: cover; object-position: top; background: var(--blanco); }
.demo-entra { animation: demo-entra 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.demo-escribiendo::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: var(--carbon); animation: demo-cursor 0.9s steps(1) infinite; }
.demo-correccion { max-width: 100%; padding: 8px 12px; border: 2px solid var(--linea); border-left: 5px solid var(--rojo); border-radius: 12px; background: var(--blanco); display: flex; flex-direction: column; gap: 2px; text-align: left; }
.demo-correccion strong { color: var(--verde-texto); font-weight: 800; font-size: 16px; }
.demo-correccion span { color: var(--gris); font-size: 13px; line-height: 1.35; }
@keyframes demo-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes demo-cursor { 50% { opacity: 0; } }
@keyframes demo-marca { from { background: transparent; border-bottom-color: transparent; } }
@media (max-width: 860px) { .demo-chat { height: 480px; } }
@media (prefers-reduced-motion: reduce) { .demo-entra, .demo-chat mark.error, .demo-escribiendo::after { animation: none; } }

/* Muestra de la conversación guiada: la tarjeta con tu frase y el "¡Perfecto!" */
.nota-demo { margin-top: 22px !important; padding: 12px 16px; border-radius: 14px; background: var(--principal-suave); color: var(--carbon) !important; font-size: 16px !important; }
.nota-demo strong { color: var(--principal-borde); }
.demo-guion { align-self: stretch; margin-top: auto; padding: 10px 14px; border: 2px solid var(--principal); border-radius: 14px; background: var(--principal-suave); display: flex; flex-direction: column; gap: 2px; text-align: center; }
.demo-guion em { color: var(--principal-borde); font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: 0.053em; text-transform: uppercase; }
.demo-guion strong { color: var(--carbon); font-weight: 800; font-size: 18px; }
.demo-guion span { color: var(--gris); font-size: 13px; }
.demo-perfecto { color: var(--verde-texto); font-weight: 800; font-size: 13px; }

/* Practicar mis errores: un ejercicio por pantalla, dentro de la ventana */
.practica { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.practica-paso { color: var(--gris-claro); font-weight: 800; font-size: 12px; letter-spacing: 0.053em; text-transform: uppercase; }
.practica h3 { margin: 0; }
.practica-frase { margin: 0; padding: 14px 16px; border: 2px solid var(--linea); border-radius: 14px; background: #fafafa; color: var(--carbon); font-size: 20px; font-weight: 700; line-height: 1.4; }
.practica-hueco { color: var(--principal); font-weight: 900; letter-spacing: 0.1em; }
.practica-opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.practica-opciones button { flex: 1 1 140px; }
.practica-opciones button.contorno[lang] { letter-spacing: normal; text-transform: none; font-size: 18px; font-weight: 700; }
.practica-opciones button.acierto { border-color: var(--verde-texto); background: #e7f8d6; color: var(--verde-texto); opacity: 1; }
.practica-opciones button.fallo { border-color: var(--rojo); background: var(--rojo-suave); color: var(--rojo); opacity: 1; }
.practica-nota { padding: 12px 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; }
.practica-nota.bien { background: #e7f8d6; }
.practica-nota.mal { background: var(--rojo-suave); }
.practica-nota strong { font-weight: 900; }
.practica-nota.bien strong { color: var(--verde-texto); }
.practica-nota.mal strong { color: var(--rojo); }
.practica-nota p { margin: 0; color: var(--gris); font-size: 14px; }
.practica-nota p.practica-buena { color: var(--carbon); font-size: 18px; font-weight: 800; }
.practica > button.primario { align-self: flex-start; }
.practica-fila { display: flex; align-items: center; gap: 16px; }
.practica-pista { padding: 10px 14px; border-radius: 12px; background: var(--principal-suave); }
.practica-pista p { margin: 0; color: var(--gris); font-size: 14px; }
.practica-pista p.practica-letras { margin-top: 4px; color: var(--principal-borde); font-size: 20px; font-weight: 800; letter-spacing: 0.08em; white-space: pre-wrap; }
.practica > button.enlace { align-self: flex-start; padding: 0; }
.practica-fin { font-size: 28px !important; color: var(--principal-borde) !important; }

/* Cierre del chat libre: cifras de la sesión, lo corregido y los botones */
dialog.sin-pie > .dialogo-pie { display: none; }
.cierre-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.cierre-cifra { padding: 14px 8px; border: 2px solid var(--linea); border-radius: 16px; display: flex; flex-direction: column; gap: 2px; }
.cierre-cifra strong { color: var(--principal); font-size: 34px; font-weight: 900; line-height: 1; }
.cierre-cifra span { color: var(--gris-claro); font-weight: 800; font-size: 11px; letter-spacing: 0.053em; text-transform: uppercase; }
dialog.centrado h3 { margin-top: 20px; font-size: 16px; }
.cierre-errores { display: inline-flex; flex-direction: column; gap: 6px; text-align: left; font-size: 17px; }
.cierre-errores .mal { color: var(--rojo); text-decoration: line-through; }
.cierre-errores .bien { color: var(--verde-texto); font-weight: 800; }
.cierre-perfecto { margin: 18px 0 0; color: var(--verde-texto); font-weight: 800; }
.cierre-animo { margin: 18px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--principal-suave); color: var(--principal-borde); font-weight: 800; }
.cierre-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.cierre-extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 14px; }
.cierre-extras button { padding: 0; font-size: 13px; }

/* El personaje reaccionando dentro de una ventana: su cara y un globo corto */
.lea-dice { display: flex; align-items: center; gap: 12px; }
.lea-dice.lea-centro { justify-content: center; margin: 4px 0 16px; }
.lea-dice-cara { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--principal); background: var(--blanco); object-fit: cover; object-position: top; }
.lea-dice-globo { position: relative; padding: 8px 14px; border: 2px solid var(--linea); border-radius: 14px; background: var(--blanco); display: flex; flex-direction: column; text-align: left; }
.lea-dice-globo::before { content: ""; position: absolute; left: -8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-left: 2px solid var(--linea); border-bottom: 2px solid var(--linea); background: var(--blanco); transform: rotate(45deg); }
.lea-dice-globo strong { color: var(--carbon); font-size: 18px; font-weight: 800; line-height: 1.25; }
.lea-dice-globo small { color: var(--gris); font-size: 13px; font-weight: 600; }
/* Al reaccionar, la cara da un saltito y el globo entra */
.lea-salta .lea-dice-cara { animation: lea-salta 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }
.lea-salta .lea-dice-globo { animation: demo-entra 0.4s ease 0.1s both; }
@keyframes lea-salta { 0% { transform: scale(0.8) translateY(6px); } 60% { transform: scale(1.08) translateY(-4px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lea-salta .lea-dice-cara, .lea-salta .lea-dice-globo { animation: none; } }

/* Temas con varias partes: un puntito por parte en la tarjeta */
.puntos-partes { display: inline-flex; gap: 5px; margin-top: 2px; }
.puntos-partes i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--linea); background: var(--blanco); }
.puntos-partes i.hecha { border-color: var(--principal); background: var(--principal); }
.guion-sigue p { max-width: 380px; }

/* Bajo las conversaciones guiadas: "mostrar más" y el aviso de que vendrán más */
.guiones-pie { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; }
.guiones-pie[hidden] { display: none; }
.bienvenida .guiones-pie p { margin: 0; color: var(--gris-claro); font-size: 14px; font-weight: 700; }

.tb-ver-todas { align-self: flex-start; margin-top: 10px; padding: 0; }

/* Tarjetas de conversaciones que vendrán: apagadas, con borde punteado */
.opcion.pronto { border: 2px dashed var(--linea); border-radius: 16px; background: #fafafa; color: var(--gris-claro); cursor: default; justify-content: center; text-align: center; }
.opcion.pronto[hidden] { display: none; }
.opcion.pronto svg { stroke: var(--linea); }
.etiqueta-pronto { padding: 1px 10px; border-radius: 999px; background: var(--principal-suave); color: var(--principal-borde); font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: 0.053em; text-transform: uppercase; }

/* Entrada (tablero, temas, guiadas): el contenido empieza arriba. Centrado en
   vertical dejaba un hueco grande en las pantallas altas. */
body.inicio.paso-2 .bienvenida { margin-top: 0; margin-bottom: auto; }

/* Qué idioma se quiere aprender: en la portada, bajo el botón principal */
.elige-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gris); font-size: 15px; font-weight: 700; }
.elige-meta button { padding: 7px 16px; border: 2px solid var(--linea); border-radius: 999px; background: var(--blanco); color: var(--carbon); font: inherit; cursor: pointer; }
.elige-meta button:hover { border-color: var(--principal); }
.elige-meta button.elegido { border-color: var(--principal); background: var(--principal-suave); color: var(--principal-borde); }
.elige-meta small { margin-left: 2px; color: var(--gris); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
body:not(.inicio) .elige-meta, body.inicio.paso-2 .elige-meta { display: none; }
@media (max-width: 720px) {
  .elige-meta { justify-content: center; width: 100%; }
}

/* "Continuar con Google" dentro de la app de teléfono */
.boton-google { min-width: 260px; padding: 12px 20px; border-radius: 999px; }

/* --- Bienvenida de la app de teléfono (mostrarBienvenidaApp en app.js) ---
   Dos planos: la charla al fondo (un plano apenas inclinado, con Léa
   pequeña saltando por las burbujas) y, delante, la tarjeta con el título y
   los botones, adonde Léa llega de un salto hacia adelante. */
.bienvenida-app { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: calc(18px + var(--arriba)) 16px max(14px, var(--abajo)); background: linear-gradient(180deg, #e9e0ff 0%, #f4efff 40%, #faf8ff 100%); overflow: hidden; }
.bienvenida-app > * { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
.bv-marca { color: var(--principal); font-weight: 900; font-size: 26px; text-align: center; }
.bv-escena { flex: 1; min-height: 0; overflow: hidden; perspective: 900px; perspective-origin: 50% 100%; padding: 70px 0 22px; } /* arriba cabe Léa, de pie sobre la primera burbuja */
.bv-plano { position: relative; display: flex; flex-direction: column; gap: 26px; padding: 0 10px; transform: rotateX(8deg) scale(0.95); transform-origin: 50% 100%; }
.bv-burbuja { max-width: 80%; padding: 10px 14px; border: 2px solid var(--linea); border-radius: 16px; background: var(--blanco); font-size: 17px; line-height: 1.3; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
.bv-burbuja.visible { opacity: 1; transform: none; }
.bv-burbuja.de-lea { align-self: flex-start; border-bottom-left-radius: 6px; }
.bv-burbuja.de-alumno { align-self: flex-end; background: var(--azul-suave); border-color: var(--azul-borde); border-bottom-right-radius: 6px; }
.bv-burbuja small { display: block; margin-top: 4px; color: var(--gris); font-size: 13px; }
.bv-burbuja mark { padding: 0 2px; border-radius: 4px 4px 0 0; background: none; color: inherit; transition: background 0.3s, box-shadow 0.3s; }
.bv-burbuja mark.marcado { background: var(--rojo-suave); box-shadow: inset 0 -3px 0 var(--rojo); }
.bv-arreglo { display: block; max-height: 0; overflow: hidden; color: var(--verde-texto); font-weight: 800; font-size: 14px; transition: max-height 0.4s ease, margin 0.4s ease; }
.bv-arreglo.visible { max-height: 40px; margin-top: 6px; }
/* Delante: la tarjeta con el título y los botones */
.bv-pie { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 12px; border: 2px solid var(--linea); border-radius: 24px; background: var(--blanco); }
.bv-pie button { width: 100%; padding: 12px 32px; font-size: 16px; }
.bv-titulo { text-align: center; margin-bottom: 4px; }
.bv-titulo strong { display: block; color: var(--carbon); font-size: 22px; font-weight: 900; line-height: 1.2; }
.bv-titulo span { display: block; margin-top: 2px; color: var(--gris); font-size: 15px; }
.bv-legal { margin: 2px 0 0; color: var(--gris); font-size: 12px; text-align: center; line-height: 1.4; }
.bv-legal a { color: var(--gris); }
/* Léa: se coloca y salta con transform; se escala desde los pies, así que de
   lejos es más pequeña y al venir hacia adelante crece */
.bv-lea { position: absolute; left: 0; top: 0; width: 64px; height: 64px; max-width: none; margin: 0; object-fit: cover; object-position: 50% 12%; border: 3px solid var(--principal); border-radius: 50%; background: var(--blanco); transform-origin: 50% 100%; opacity: 0; pointer-events: none; will-change: transform; z-index: 2; }
.bv-lea.visible { opacity: 1; transition: opacity 0.3s; }
/* Lo que dice Léa al llegar a "Comenzar" */
.bv-globo { position: absolute; left: 0; top: 0; z-index: 2; width: auto; max-width: none; margin: 0; padding: 7px 12px; border: 2px solid var(--principal); border-radius: 14px; background: var(--blanco); color: var(--principal-borde); font-weight: 800; font-size: 15px; white-space: nowrap; opacity: 0; transform: scale(0.6); transform-origin: 0 50%; transition: opacity 0.25s, transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.4); pointer-events: none; }
.bv-globo::before { content: ''; position: absolute; left: -8px; top: 50%; width: 10px; height: 10px; margin-top: -6px; border-left: 2px solid var(--principal); border-bottom: 2px solid var(--principal); background: var(--blanco); transform: rotate(45deg); }
.bv-globo.visible { opacity: 1; transform: none; }
/* Teléfonos bajitos: todo más junto, para que la charla quepa */
@media (max-height: 720px) {
  .bv-marca { font-size: 22px; }
  .bv-escena { padding-top: 62px; padding-bottom: 14px; }
  .bv-plano { gap: 16px; }
  .bv-burbuja { padding: 8px 12px; font-size: 15px; }
  .bv-burbuja small { font-size: 12px; }
  .bv-pie { padding-top: 14px; gap: 8px; }
  .bv-titulo strong { font-size: 19px; }
  .bv-titulo span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .bv-burbuja, .bv-arreglo { transition: none; }
}

/* --- Otras ideas para la bienvenida ("?diseno=..."), para compararlas ---
   frente: Léa grande, saludando en varios idiomas.
   pasos:  tres tarjetas que pasan solas: hablar, corregir, empezar de cero.
   noche:  fondo oscuro con palabras flotando y Léa escuchando en el centro. */
.bv-otro { display: none; height: 100%; }
.bienvenida-app:not([data-diseno="charla"]) .bv-plano,
.bienvenida-app:not([data-diseno="charla"]) .bv-lea,
.bienvenida-app:not([data-diseno="charla"]) .bv-globo { display: none; }
.bienvenida-app:not([data-diseno="charla"]) .bv-otro { display: flex; }

/* frente */
.bv-frente { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.bv-frente-dice { position: relative; flex-shrink: 0; min-height: 64px; padding: 10px 18px; border: 2px solid var(--linea); border-radius: 18px; background: var(--blanco); text-align: center; transition: transform 0.3s; }
.bv-frente-dice::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; border-right: 2px solid var(--linea); border-bottom: 2px solid var(--linea); background: var(--blanco); transform: rotate(45deg); }
.bv-frente-dice strong { display: block; color: var(--carbon); font-size: 22px; font-weight: 900; }
.bv-frente-dice span { color: var(--gris); font-size: 14px; }
.bv-frente-dice.cambia { transform: scale(0.9); }
.bv-frente-cara { flex-shrink: 0; width: min(210px, 52vw, 26vh); height: min(210px, 52vw, 26vh); border: 4px solid var(--principal); border-radius: 50%; background: var(--blanco); overflow: hidden; animation: bv-respira 4s ease-in-out infinite; }
.bv-frente-cara img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 14%; }
.bv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bv-chip { padding: 6px 12px; border: 2px solid var(--principal); border-radius: 999px; background: var(--blanco); color: var(--principal-borde); font-weight: 800; font-size: 13px; opacity: 0; transform: translateY(8px) scale(0.9); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.4); }
.bv-chip.visible { opacity: 1; transform: none; }
@keyframes bv-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* pasos */
.bv-pasos { display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 100%; }
.bv-pasos-vista { position: relative; overflow: hidden; border-radius: 24px; }
.bv-pasos-tira { display: flex; transition: transform 0.55s cubic-bezier(0.6, 0, 0.2, 1); }
.bv-paso { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 12px 6px; text-align: center; }
.bv-paso-dibujo { width: 100%; height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 2px solid var(--linea); border-radius: 22px; background: var(--blanco); }
.bv-paso h3 { margin: 0; color: var(--carbon); font-size: 22px; font-weight: 900; }
.bv-paso p { margin: 0; color: var(--gris); font-size: 15px; }
.bv-puntos { display: flex; justify-content: center; gap: 8px; }
.bv-puntos button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--linea); }
.bv-puntos button.actual { width: 26px; border-radius: 6px; background: var(--principal); }
.bv-micro { position: relative; width: 74px; height: 74px; border-radius: 50%; background: var(--principal); display: grid; place-items: center; color: #fff; font-size: 30px; }
.bv-micro::before, .bv-micro::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--principal); animation: bv-onda 1.8s ease-out infinite; }
.bv-micro::after { animation-delay: 0.9s; }
@keyframes bv-onda { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.9); opacity: 0; } }
.bv-ondas { display: flex; align-items: center; gap: 4px; height: 26px; }
.bv-ondas i { width: 5px; border-radius: 3px; background: var(--principal); animation: bv-barra 0.9s ease-in-out infinite; }
@keyframes bv-barra { 0%, 100% { height: 6px; } 50% { height: 26px; } }
.bv-mini { padding: 8px 12px; border: 2px solid var(--azul-borde); border-radius: 14px; background: var(--azul-suave); font-size: 17px; }
.bv-mini mark { padding: 0 2px; background: none; color: inherit; transition: background 0.3s, box-shadow 0.3s; }
.bv-mini mark.marcado { background: var(--rojo-suave); box-shadow: inset 0 -3px 0 var(--rojo); }
.bv-mini-bien { color: var(--verde-texto); font-weight: 800; opacity: 0; transition: opacity 0.4s; }
.bv-mini-bien.visible { opacity: 1; }
.bv-guion { width: 82%; padding: 10px 14px; border: 2px solid var(--principal); border-radius: 16px; background: var(--principal-suave); text-align: left; }
.bv-guion em { color: var(--principal-borde); font-style: normal; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.bv-guion strong { display: block; color: var(--carbon); font-size: 17px; }
.bv-guion span { color: var(--gris); font-size: 13px; }
.bv-ok { color: var(--verde-texto); font-weight: 900; font-size: 15px; opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.6); }
.bv-ok.visible { opacity: 1; transform: none; }
.bienvenida-app[data-diseno="pasos"] .bv-titulo { display: none; }

/* noche */
.bienvenida-app[data-diseno="noche"] { background: radial-gradient(120% 80% at 50% 30%, #3b2380 0%, #21134f 55%, #140b33 100%); }
.bienvenida-app[data-diseno="noche"] .bv-marca { color: #ffffff; }
.bienvenida-app[data-diseno="noche"] .bv-pie { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); }
.bienvenida-app[data-diseno="noche"] .bv-titulo strong { color: #ffffff; }
.bienvenida-app[data-diseno="noche"] .bv-titulo span,
.bienvenida-app[data-diseno="noche"] .bv-legal,
.bienvenida-app[data-diseno="noche"] .bv-legal a { color: rgba(255, 255, 255, 0.7); }
.bienvenida-app[data-diseno="noche"] #bv-entrar { border-color: rgba(255, 255, 255, 0.35); background: transparent; color: #ffffff; }
.bv-noche { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; width: 100%; }
.bv-palabra { position: absolute; z-index: 0; color: rgba(255, 255, 255, 0.32); font-weight: 800; white-space: nowrap; pointer-events: none; animation: bv-deriva linear infinite; }
@keyframes bv-deriva { from { transform: translateY(30px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(-60px); opacity: 0; } }
.bv-noche-cara { position: relative; z-index: 1; flex-shrink: 0; width: min(170px, 44vw, 24vh); height: min(170px, 44vw, 24vh); border-radius: 50%; }
.bv-noche-cara img { position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 14%; border: 4px solid #b9a1ff; border-radius: 50%; background: #ffffff; }
.bv-noche-cara::before, .bv-noche-cara::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #b9a1ff; animation: bv-onda 2.4s ease-out infinite; }
.bv-noche-cara::after { animation-delay: 1.2s; }
.bv-noche-frase { position: relative; z-index: 1; min-height: 44px; text-shadow: 0 2px 12px #21134f; color: #ffffff; font-size: 34px; font-weight: 900; text-align: center; }
.bv-noche-frase::after { content: ''; display: inline-block; width: 3px; height: 0.9em; margin-left: 4px; vertical-align: -0.08em; background: #b9a1ff; animation: demo-cursor 0.9s steps(1) infinite; }
@media (max-height: 720px) {
  .bv-frente { gap: 8px; }
  .bv-frente-dice { min-height: 0; padding: 6px 14px; }
  .bv-frente-dice strong { font-size: 18px; }
  .bv-chip { padding: 4px 9px; font-size: 11px; }
  .bv-frente-cara { width: min(170px, 46vw, 20vh); height: min(170px, 46vw, 20vh); }
  .bv-chips { gap: 5px; }
  .bv-noche-frase { font-size: 28px; }
  .bv-paso-dibujo { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .bv-frente-cara, .bv-micro::before, .bv-micro::after, .bv-ondas i, .bv-palabra, .bv-noche-cara::before, .bv-noche-cara::after { animation: none; }
  .bv-pasos-tira { transition: none; }
}

/* --- Del "Comenzar" a las preguntas: la charla corta y Léa al frente --- */
.bv-saltar { position: absolute; top: calc(20px + var(--arriba)); right: 16px; width: auto; max-width: none; margin: 0; z-index: 3; display: none; }
.bienvenida-app[data-fase="transicion"] .bv-saltar { display: block; }
.bienvenida-app[data-fase="transicion"] .bv-pie { opacity: 0; transform: translateY(30px); transition: opacity 0.3s, transform 0.4s; pointer-events: none; }
.bienvenida-app[data-fase="preguntas"] .bv-preguntas { display: flex; }
.bienvenida-app[data-fase="preguntas"] .bv-escena,
.bienvenida-app[data-fase="preguntas"] .bv-pie { display: none; }
.bv-p-opciones .opcion { opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.35s; }
.bv-p-opciones .opcion.visible { opacity: 1; transform: none; }
.bv-p-opciones .primario { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .bv-p-opciones .opcion { transition: none; }
}

/* La tarjeta "Practica lo que más fallas" */
.bv-errores { width: 86%; padding: 8px 12px; border: 2px solid var(--linea); border-radius: 14px; background: #fcfbff; text-align: left; }
.bv-errores em { display: block; margin-bottom: 4px; color: var(--principal-borde); font-style: normal; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.bv-error-fila { display: flex; align-items: baseline; gap: 4px; font-size: 14px; color: var(--gris); }
.bv-error-fila s { color: var(--rojo-borde); }
.bv-error-fila b { color: var(--verde-texto); }
.bv-veces { margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--rojo-suave); color: var(--rojo-borde); font-weight: 800; font-size: 12px; }
.bv-veces:empty { display: none; }
.bv-ejercicio { display: flex; align-items: center; gap: 2px; font-size: 18px; color: var(--carbon); }
.bv-hueco { display: inline-block; min-width: 56px; padding: 0 6px; border-bottom: 3px solid var(--principal); color: var(--principal-borde); font-weight: 800; text-align: center; }
.bv-ejercicio .bv-ok { margin-left: 8px; }

/* --- Inicio de la app de teléfono (pintarInicioApp en app.js) --- */
.modo-app #bienvenida[data-vista="modo"] #btn-volver { display: none; }
.modo-app.inicio .lado .avatar,
.modo-app.inicio .lado .saludo { display: none; }
.inicio-app { width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; padding: 10px 0 28px; }
.ia-lea { display: flex; align-items: center; gap: 12px; }
.ia-cara { flex-shrink: 0; width: 64px; height: 64px; max-width: none; object-fit: cover; object-position: 50% 14%; border: 3px solid var(--principal); border-radius: 50%; background: var(--blanco); }
.ia-globo { position: relative; flex: 1; padding: 8px 12px; border: 2px solid var(--linea); border-radius: 18px; background: var(--blanco); }
.ia-globo::before { content: ''; position: absolute; left: -8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-left: 2px solid var(--linea); border-bottom: 2px solid var(--linea); background: var(--blanco); transform: rotate(45deg); }
.ia-globo strong { display: block; color: var(--principal); font-size: 19px; font-weight: 900; }
.ia-globo span { color: var(--carbon); font-size: 14.5px; }
.ia-fila { display: flex; gap: 10px; }
.ia-racha { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; border: 2px solid var(--linea); border-radius: 16px; background: var(--blanco); text-align: center; }
.ia-racha b { font-size: 18px; color: var(--gris-claro); }
.ia-racha.encendida b { color: var(--naranja); }
.ia-racha span { color: var(--gris); font-size: 11px; font-weight: 700; }
.ia-meta { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 8px 12px; border: 2px solid var(--linea); border-radius: 16px; background: var(--blanco); color: var(--carbon); font-size: 14px; font-weight: 700; }
.ia-barra { height: 10px; border-radius: 6px; background: var(--principal-suave); overflow: hidden; }
.ia-barra i { display: block; height: 100%; border-radius: 6px; background: var(--principal); transition: width 0.6s ease; }
.ia-paso { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border: 2px solid var(--principal); border-radius: 20px; background: var(--principal-suave); }
.ia-paso em { color: var(--principal-borde); font-style: normal; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.ia-paso strong { color: var(--carbon); font-size: 19px; font-weight: 900; }
.ia-paso > span { color: var(--gris); font-size: 14px; }
.ia-paso button { margin-top: 8px; width: 100%; padding: 11px 24px; font-size: 15px; }
.ia-lista { display: flex; flex-direction: column; gap: 8px; }
.ia-opcion { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border-radius: 16px; text-align: left; text-transform: none; letter-spacing: normal; font-size: 16px; }
.ia-icono { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--principal-suave); font-size: 19px; }
.ia-textos { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ia-textos strong { display: flex; align-items: center; gap: 6px; color: var(--carbon); font-size: 15.5px; font-weight: 800; }
.ia-textos small { color: var(--gris); font-size: 13px; font-weight: 600; }
.ia-flecha { color: var(--gris-claro); font-size: 24px; font-weight: 400; }
.ia-frase { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 12px; border-radius: 16px; text-align: left; text-transform: none; letter-spacing: normal; }
.ia-frase em { color: var(--gris); font-style: normal; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.ia-frase strong { color: var(--carbon); font-size: 16px; }
.ia-frase span { color: var(--gris); font-size: 13px; font-weight: 600; }
.ia-textos .solo-pro { position: static; }
/* En la app, la franja de Léa sobra en el inicio, las guiadas y los temas */
body.modo-app.inicio.paso-2 .lado { display: none; }

/* Inicio de la app: semana, cuenta y entrada escalonada */
.ia-semana { display: flex; justify-content: space-between; }
.ia-semana span { width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--linea); border-radius: 50%; color: var(--gris-claro); font-size: 10px; font-weight: 800; }
.ia-semana span.hecho { border-color: var(--principal); background: var(--principal); color: var(--blanco); }
.ia-semana span.hoy { border-color: var(--principal); color: var(--principal-borde); }
.ia-semana span.hoy.hecho { color: var(--blanco); }
.ia-cuenta:empty { display: none; }
.ia-cuenta-boton { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 12px; border-style: dashed; border-radius: 16px; text-align: left; text-transform: none; letter-spacing: normal; }
.ia-cuenta-boton strong { color: var(--carbon); font-size: 15px; }
.ia-cuenta-boton span { color: var(--gris); font-size: 13px; font-weight: 600; }
.inicio-app.entra > * { animation: ia-entra 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: calc(var(--orden, 0) * 70ms); }
@keyframes ia-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .inicio-app.entra > * { animation: none; }
  .ia-barra i { transition: none; }
}

/* Léa de cuerpo entero en los saltos (en vez del círculo con su cara) */
.bv-lea.cuerpo { width: 71px; height: 118px; border: 0; border-radius: 0; background: none; object-fit: contain; object-position: 50% 100%; transform-origin: 43% 94.2%; }

/* El destello al atravesar la cámara */
.bv-destello { position: absolute; inset: 0; z-index: 5; width: auto; max-width: none; margin: 0; background: radial-gradient(circle at 50% 60%, #ffffff 0%, var(--principal-suave) 45%, var(--principal) 100%); opacity: 0; pointer-events: none; }

/* Grupos del inicio de la app, con aire entre ellos */
.ia-seccion { display: flex; flex-direction: column; gap: 10px; }
.ia-titulo { margin: 4px 2px 0; color: var(--gris); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.ia-lista { gap: 10px; }

/* --- Léa con las preguntas de inicio ---
   "charla": globo grande arriba, tres circulitos que bajan hasta Léa, y ella
   grande asomándose desde el borde de abajo (se le ve de la cintura para
   arriba). "pregunta": la pregunta como título, las respuestas debajo y Léa
   más pequeña abajo, mirándolas. Léa se coloca respecto a toda la pantalla y
   cambia de tamaño con una transición al pasar de un modo a otro. */
.bv-preguntas { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 14px; padding: 16px 0 6px; }
.bv-p-puntos { display: flex; justify-content: center; gap: 6px; min-height: 8px; }
.bv-p-puntos span { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.bv-p-puntos span.hecho { background: var(--principal); }
.bv-p-pregunta { display: none; margin: 6px 0 4px; color: var(--carbon); font-size: 24px; font-weight: 900; line-height: 1.2; text-align: center; }
.bv-p-globo { display: none; position: relative; z-index: 1; margin-top: 12px; padding: 22px 22px; border: 2px solid var(--linea); border-radius: 40px; background: var(--blanco); color: var(--carbon); font-size: 24px; font-weight: 900; line-height: 1.25; text-align: center; }
.bv-p-globo small { display: block; margin-top: 8px; color: var(--gris); font-size: 16px; font-weight: 600; line-height: 1.4; }
.bv-p-colita { display: none; position: relative; height: 54px; }
.bv-p-colita i { position: absolute; border: 2px solid var(--linea); border-radius: 50%; background: var(--blanco); }
.bv-p-colita i:nth-child(1) { left: calc(43% - 9px); top: 0; width: 18px; height: 18px; } /* bajan hacia la cabeza de Léa, que está en el centro */
.bv-p-colita i:nth-child(2) { left: calc(47% - 6px); top: 22px; width: 13px; height: 13px; }
.bv-p-colita i:nth-child(3) { left: calc(50% - 4px); top: 40px; width: 9px; height: 9px; }
.bv-preguntas[data-modo="charla"] .bv-p-globo,
.bv-preguntas[data-modo="charla"] .bv-p-colita { display: block; }
.bv-preguntas[data-modo="pregunta"] .bv-p-pregunta { display: block; }
.bv-p-opciones { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 10px; }
/* "¿Cómo quieres que suene Léa?": la que suena lleva un altavoz que late. */
.bv-p-opciones .opcion.sonando span::after { content: " 🔊"; animation: suena-muestra 0.9s ease-in-out infinite alternate; }
@keyframes suena-muestra { from { opacity: 0.35; } to { opacity: 1; } }
.bv-p-opciones .ayuda { text-align: center; margin: 2px 0 0; }
.bv-preguntas[data-modo="charla"] .bv-p-opciones { position: absolute; right: 16px; bottom: max(26px, var(--abajo)); width: min(48%, 200px); }
.bv-preguntas[data-modo="pregunta"] .bv-p-opciones .opcion { padding: 14px 16px; border-radius: 999px; }
/* Léa: alta de verdad (cuerpo entero) pero con media figura fuera de la pantalla */
.bv-p-cuerpo { --alto: min(115vh, 1150px); position: absolute; z-index: 0; left: calc(51% - var(--alto) * 0.258); bottom: calc(var(--alto) * -0.5); height: var(--alto); width: auto; max-width: none; aspect-ratio: 384 / 640; object-fit: contain; pointer-events: none; transition: height 0.55s cubic-bezier(0.2, 0.8, 0.3, 1), left 0.55s cubic-bezier(0.2, 0.8, 0.3, 1), bottom 0.55s cubic-bezier(0.2, 0.8, 0.3, 1); }
/* En las preguntas: grande, del pecho para arriba, asomándose inclinada desde
   la esquina de abajo a la izquierda (el giro es sobre su pecho, así la cabeza
   se inclina hacia el centro y el cuerpo se sale por la izquierda). */
.bv-preguntas[data-modo="pregunta"] .bv-p-cuerpo { --alto: min(108vh, 1000px); left: -27%; bottom: calc(var(--alto) * -0.67); transform-origin: 43% 30%; rotate: 16deg; }
.bv-p-cuerpo { rotate: 0deg; transition: height 0.55s cubic-bezier(0.2, 0.8, 0.3, 1), left 0.55s cubic-bezier(0.2, 0.8, 0.3, 1), bottom 0.55s cubic-bezier(0.2, 0.8, 0.3, 1), rotate 0.55s cubic-bezier(0.2, 0.8, 0.3, 1); }
/* La pregunta y las respuestas, un poco más abajo */
.bv-preguntas[data-modo="pregunta"] { padding-top: clamp(24px, 7vh, 64px); }
@media (max-height: 720px) {
  .bv-p-globo { padding: 16px 18px; font-size: 20px; }
  .bv-p-globo small { font-size: 14px; }
  .bv-preguntas[data-modo="charla"] .bv-p-cuerpo { --alto: 108vh; }
  .bv-p-pregunta { font-size: 21px; }
  .bv-preguntas[data-modo="pregunta"] .bv-p-opciones .opcion { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .bv-p-cuerpo { transition: none !important; } }

/* =====================================================================
   App de teléfono: el chat y las pestañas (solo con body.modo-app)
   ===================================================================== */
/* El personaje ya no va en la franja de la izquierda/arriba: va en la barra */
.modo-app .lado { display: none; }
.modo-app .barra { position: relative; gap: 8px; padding: 8px 12px; }
.modo-app #btn-atras { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 18px; }
.modo-app #btn-atras span { display: none; }
.modo-app #btn-menu { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; }
.barra-lea { display: flex; align-items: center; gap: 10px; min-width: 0; }
.modo-app .barra-lea .avatar { width: 44px; margin: 0; border-width: 2px; flex: none; }
.barra-lea-textos { display: flex; flex-direction: column; min-width: 0; }
.modo-app .barra-lea .nombre { font-size: 17px; line-height: 1.1; }
.modo-app .barra-lea .estado { margin: 2px 0 0; padding: 0; border: 0; background: none; font-size: 12px; text-transform: none; letter-spacing: 0; }
/* En el inicio de la app, la barra lleva solo el logo (el resto está en las pestañas) */
.modo-app.inicio .barra-lea,
.modo-app.inicio #btn-menu,
.modo-app.inicio #acciones { display: none !important; }
/* El tema de la charla, como una etiqueta bajo la barra */
.modo-app:not(.inicio) #contexto { position: absolute; left: 50%; top: calc(100% + 8px); z-index: 3; transform: translateX(-50%); max-width: 80vw; padding: 3px 12px; border: 2px solid var(--linea); border-radius: 999px; background: var(--blanco); color: var(--gris); font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modo-app:not(.inicio) #contexto:empty { display: none; }
.modo-app:not(.inicio) #mensajes { padding-top: 34px; }
/* Bajo cada respuesta, las herramientas en una línea discreta */
.modo-app .herramientas { gap: 2px; margin-top: 2px; }
.modo-app .herramientas button { padding: 2px 6px; font-size: 12px; text-transform: none; letter-spacing: 0; }
/* Abajo: ayudas como etiquetas, y la caja con el botón redondo al lado */
.modo-app .compositor { padding: 8px 12px max(10px, var(--abajo)); }
.modo-app .compositor .columna { display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 8px; row-gap: 8px; align-items: center; }
.modo-app .compositor .columna > * { grid-column: 1 / -1; }
.modo-app .compositor .botones { display: contents; }
.modo-app .compositor .salto,
.modo-app #btn-enviar { display: none; }
.modo-app #btn-ayuda, .modo-app #btn-sugerir { grid-row: 5; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.modo-app #btn-ayuda { grid-column: 1; }
.modo-app #btn-sugerir { grid-column: 2; }
.modo-app #menu-opciones { grid-row: 5; grid-column: 4; justify-self: end; }
.modo-app #btn-opciones { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
.modo-app .compositor .columna > .caja-zona { grid-row: 6; grid-column: 1 / 4; min-width: 0; } /* deja la última columna al botón redondo */
.modo-app .transcripcion { min-height: 50px; max-height: 120px; padding: 13px 40px 13px 18px; border-radius: 26px; font-size: 16px; }
.modo-app #btn-mic { grid-row: 6; grid-column: 4; width: 54px; min-width: 0; height: 54px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.modo-app #btn-mic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modo-app #btn-mic.activo { background: var(--rojo); border-color: var(--rojo); border-bottom-color: var(--rojo-borde); animation: mic-late 1.4s ease-in-out infinite; }
@keyframes mic-late { 50% { box-shadow: 0 0 0 8px rgba(255, 75, 75, 0.18); } }
.modo-app #pista { grid-row: 7; font-size: 12px; }
.modo-app #pista:empty { display: none; }
.modo-app .guion { padding: 12px 14px; }
@media (prefers-reduced-motion: reduce) { .modo-app #btn-mic.activo { animation: none; } }

/* Las pestañas de abajo */
.pestanas-app { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: space-around; padding: 6px 4px max(8px, var(--abajo)); border-top: 2px solid var(--linea); background: var(--blanco); }
.modo-app.inicio.paso-2[data-vista="modo"] .pestanas-app,
.modo-app.inicio.paso-2[data-vista="libre"] .pestanas-app,
.modo-app.inicio.paso-2[data-vista="guion"] .pestanas-app { display: flex; }
.modo-app.inicio.paso-2 #chat { padding-bottom: 86px; }
.pestanas-app button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; color: var(--gris-claro); font-size: 11px; font-weight: 800; text-transform: none; letter-spacing: 0; }
.pestanas-app button:hover:not(:disabled) { background: none; color: var(--gris); }
.pestanas-app button:active:not(:disabled) { transform: scale(0.94); border-bottom-width: 0; }
.pestanas-app svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-vista="modo"] .pestanas-app [data-pestana="modo"],
[data-vista="libre"] .pestanas-app [data-pestana="libre"],
[data-vista="guion"] .pestanas-app [data-pestana="guion"] { color: var(--principal); }
[data-vista="modo"] .pestanas-app [data-pestana="modo"] svg,
[data-vista="libre"] .pestanas-app [data-pestana="libre"] svg,
[data-vista="guion"] .pestanas-app [data-pestana="guion"] svg { fill: var(--principal-suave); }

/* Perfil */
.perfil { display: flex; flex-direction: column; gap: 10px; }
.perfil-quien { display: flex; align-items: center; gap: 12px; padding: 12px; border: 2px solid var(--linea); border-radius: 16px; }
.perfil-quien img { width: 48px; height: 48px; border-radius: 50%; }
.perfil-quien div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.perfil-quien strong { color: var(--carbon); }
.perfil-quien div span { color: var(--gris); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.perfil-plan { padding: 2px 10px; border-radius: 999px; background: var(--principal-suave); color: var(--principal-borde); font-size: 12px; font-weight: 800; }
.perfil-plan.pro { background: var(--oro); color: var(--oro-tinta); }
.perfil-aviso { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 2px dashed var(--linea); border-radius: 16px; }
.perfil-aviso span { color: var(--gris); font-size: 14px; }
/* Con las pestañas abajo, el "← Volver" de Hablar y Guiadas sobra */
.modo-app #bienvenida[data-vista="libre"] #btn-volver,
.modo-app #bienvenida[data-vista="guion"] #btn-volver { display: none; }

/* =====================================================================
   App de teléfono: las ventanas se abren como páginas enteras
   ===================================================================== */
.modo-app dialog.pagina-app {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0 20px calc(28px + var(--abajo));
  border: 0; border-radius: 0; text-align: left;
  overflow-y: auto; overscroll-behavior: contain;
}
.modo-app dialog.pagina-app[open] { animation: pagina-entra .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes pagina-entra { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.modo-app dialog.pagina-app::backdrop { background: var(--blanco); }
/* La flecha de volver, fija arriba a la izquierda, en una franja blanca */
.modo-app dialog.pagina-app button.cerrar-x {
  position: sticky; top: 0; float: none; display: block;
  width: calc(100% + 40px); height: auto; margin: 0 -20px 4px; padding: calc(10px + var(--arriba)) 20px 10px;
  border: 0; border-bottom: 2px solid var(--linea); border-radius: 0;
  background: var(--blanco); color: var(--carbon); text-align: left; line-height: 0;
}
.modo-app dialog.pagina-app button.cerrar-x:hover { background: var(--blanco); color: var(--principal-borde); }
.modo-app dialog.pagina-app h2,
.modo-app dialog.pagina-app.centrado h2 { margin: 14px 0 14px; padding: 0; font-size: 26px; text-align: left; }
.modo-app dialog.pagina-app.centrado { text-align: left; }
/* Ya hay flecha: el botón de abajo para cerrar sobra */
.modo-app dialog.pagina-app > .dialogo-pie { display: none; }
@media (prefers-reduced-motion: reduce) { .modo-app dialog.pagina-app[open] { animation: none; } }
/* Errores y Perfil, abiertos desde las pestañas: una pestaña más, quietas y
   con las pestañas abajo */
.modo-app dialog.pagina-app.como-pestana {
  position: fixed; inset: var(--alto-barra, 0px) 0 0 0; z-index: 30;
  height: auto; max-height: none; animation: none;
  padding-bottom: calc(110px + var(--abajo));
}
.modo-app dialog.como-pestana button.cerrar-x { display: none; }
.modo-app dialog.pagina-app.como-pestana h2 { margin-top: 18px; }
body[data-pestana-abierta] .pestanas-app [data-pestana] { color: var(--gris-claro); }
body[data-pestana-abierta] .pestanas-app [data-pestana] svg { fill: none; }
body[data-pestana-abierta="errores"] .pestanas-app [data-pestana="errores"],
body[data-pestana-abierta="perfil"] .pestanas-app [data-pestana="perfil"] { color: var(--principal); }
body[data-pestana-abierta="errores"] .pestanas-app [data-pestana="errores"] svg,
body[data-pestana-abierta="perfil"] .pestanas-app [data-pestana="perfil"] svg { fill: var(--principal-suave); }

/* App de teléfono: Pro a la vista (chapa en el inicio y tarjeta en Perfil) */
.chapa-pro { display: none; }
.modo-app.inicio .chapa-pro {
  display: inline-flex; align-items: center; margin-left: auto; padding: 5px 12px;
  border: 2px solid var(--oro); border-bottom-width: 3px; border-bottom-color: var(--oro-borde); border-radius: 999px;
  background: var(--oro); color: var(--oro-tinta); font-size: 13px; font-weight: 900; letter-spacing: 0.04em; line-height: 1.2;
}
.modo-app.inicio .chapa-pro.tiene { background: var(--oro-suave); border-color: var(--oro); color: var(--oro-texto); }
.modo-app.inicio .chapa-pro:active { transform: translateY(1px); border-bottom-width: 2px; }
.perfil-pro {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 14px;
  border: 2px solid var(--oro); border-bottom-width: 4px; border-bottom-color: var(--oro-borde); border-radius: 16px;
  background: var(--oro-suave); color: var(--oro-tinta); text-align: left; text-transform: none; letter-spacing: 0;
}
.perfil-pro:hover:not(:disabled) { background: var(--oro-suave); }
.perfil-pro.tiene { border-bottom-width: 2px; border-color: var(--oro-claro); }
.perfil-pro-icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--oro); font-size: 20px; }
.perfil-pro-textos { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perfil-pro-textos strong { color: var(--oro-tinta); font-size: 16px; font-weight: 900; }
.perfil-pro-textos small { color: var(--oro-texto); font-size: 13px; font-weight: 700; }
.perfil-pro-boton { flex: none; padding: 8px 12px; border-radius: 12px; background: var(--oro); color: var(--oro-tinta); font-size: 13px; font-weight: 900; text-transform: uppercase; }
/* La página de Pro va sola, sin las pestañas encima */
body:has(.pagina-pro:not([hidden])) .pestanas-app { display: none !important; }

/* =====================================================================
   Inicio de la app, segunda versión: Léa de cuerpo entero, una sola tarjeta
   protagonista (tu siguiente paso, en morado) y lo demás en grupos suaves sin
   bordes. Íconos de línea de una sola familia.
   ===================================================================== */
:root { --superficie: #f6f4fb; }
.inicio-app { gap: 18px; }

/* Léa a la derecha, presentando su globo */
.ia-lea { align-items: flex-end; gap: 0; margin-bottom: -6px; }
.ia-cuerpo { flex: none; width: 117px; height: 195px; max-width: none; margin: 0 -8px 0 -4px; object-fit: contain; object-position: 50% 100%; }
.ia-globo { align-self: center; margin-top: 18px; padding: 12px 14px; border: 0; border-radius: 20px; background: var(--superficie); }
.ia-globo::before { left: auto; right: -6px; top: 58%; border: 0; background: var(--superficie); }
.ia-globo span { display: block; margin-top: 2px; line-height: 1.4; }
.ia-globo .ia-mal { color: var(--rojo-borde); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ia-globo .ia-bien { color: var(--verde-texto); }
.ia-repasar { margin-top: 8px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--principal); color: var(--blanco); font-size: 12px; }
.ia-repasar:hover:not(:disabled) { background: var(--principal-claro); }

/* Racha y meta: un solo bloque suave */
.ia-fila { gap: 0; padding: 4px; border-radius: 20px; background: var(--superficie); }
.ia-racha, .ia-meta { border: 0; background: none; }
.ia-racha { min-width: 92px; padding: 8px 10px; gap: 2px; align-items: center; border-right: 2px solid var(--blanco); border-radius: 0; }
.ia-racha b { display: inline-flex; align-items: center; gap: 3px; font-size: 20px; color: var(--gris-claro); }
.ia-racha span { max-width: 84px; line-height: 1.2; }
.ia-llama svg { width: 22px; height: 22px; display: block; fill: var(--linea); stroke: var(--gris-claro); stroke-width: 1.6; stroke-linejoin: round; }
.ia-racha.encendida .ia-llama svg { fill: var(--naranja); stroke: #e07b00; }
.ia-racha:not(.encendida) span { color: var(--principal-borde); font-weight: 800; }
.ia-barra { background: var(--blanco); }
.ia-semana span { border-color: var(--blanco); background: var(--blanco); }

/* La protagonista: tu siguiente paso, en morado lleno */
.ia-paso { position: relative; padding: 16px; border: 0; border-radius: 22px; background: var(--principal); box-shadow: 0 6px 0 var(--principal-borde); }
.ia-paso em { color: #e4dbff; }
.ia-paso strong { color: var(--blanco); font-size: 21px; }
.ia-paso > span { color: #ece6ff; }
.ia-paso button.primario { margin-top: 12px; background: var(--blanco); border-color: var(--blanco); border-bottom-color: #c9b6fb; box-shadow: none; color: var(--principal-borde); }
.ia-paso button.primario:hover:not(:disabled) { background: #faf8ff; }

/* Las demás formas de practicar: un grupo con separadores, sin bordes */
.ia-lista { gap: 0; padding: 4px 0; border-radius: 20px; background: var(--superficie); }
.inicio-app .ia-opcion, .modo-app .perfil .ia-opcion { border: 0; border-radius: 0; background: none; box-shadow: none; }
.inicio-app .ia-opcion + .ia-opcion { border-top: 2px solid var(--blanco); }
.inicio-app .ia-opcion:hover:not(:disabled), .modo-app .perfil .ia-opcion:hover:not(:disabled) { background: rgba(139, 92, 246, 0.05); }
.inicio-app .ia-opcion:active:not(:disabled), .modo-app .perfil .ia-opcion:active:not(:disabled) { transform: none; background: rgba(139, 92, 246, 0.09); }

/* Íconos de línea con su color */
.ia-icono svg, .ia-icono-chico svg, .perfil-pro-icono svg, .chapa-estrella svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ia-icono { color: var(--principal-borde); background: var(--principal-suave); }
.ia-icono svg { width: 22px; height: 22px; }
.ia-icono[data-icono="guion"] { color: #1593d0; background: var(--azul-suave); }
.ia-icono[data-icono="diana"] { color: var(--rojo-borde); background: var(--rojo-suave); }
.ia-icono[data-icono="llave"], .ia-icono[data-icono="grafica"] { color: var(--oro-texto); background: var(--oro-suave); }
.ia-icono[data-icono="ajustes"], .ia-icono[data-icono="usuario"] { color: var(--carbon); background: #eceaf2; }
.inicio-app .ia-icono { background: var(--blanco); }
.ia-icono-chico { display: inline-flex; vertical-align: -3px; margin: 0 6px 0 0; }
.ia-icono-chico svg { width: 18px; height: 18px; }
.ia-frase em .ia-icono-chico { margin: 0 0 0 6px; }
.perfil-pro-icono { color: var(--oro-tinta); }
.perfil-pro-icono svg { width: 22px; height: 22px; fill: var(--oro-claro); }
.chapa-estrella { display: inline-flex; margin-right: 4px; }
.chapa-estrella svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.5; }

/* Frase del día y cuenta: suaves, sin borde */
.inicio-app .ia-frase, .inicio-app .ia-cuenta-boton { border: 0; background: var(--superficie); box-shadow: none; }
.inicio-app .ia-frase:active:not(:disabled), .inicio-app .ia-cuenta-boton:active:not(:disabled) { transform: none; }
.ia-frase em { display: inline-flex; align-items: center; }

/* Perfil en la app: también en grupo suave */
.modo-app .perfil { gap: 12px; }
.modo-app .perfil-aviso { border: 0; background: var(--superficie); }
.modo-app .perfil .ia-opcion { border-radius: 18px; background: var(--superficie); }

/* Pantallas vacías con Léa */
.vacio-lea { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px 8px; text-align: center; }
.vacio-cuerpo { width: 120px; height: 200px; max-width: none; object-fit: contain; object-position: 50% 100%; }
.vacio-textos { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 340px; }
.vacio-textos strong { color: var(--carbon); font-size: 20px; font-weight: 900; }
.vacio-textos p { margin: 0; color: var(--gris); font-size: 15px; line-height: 1.45; }
.vacio-textos button { margin-top: 12px; }

/* Léa de medio cuerpo en el inicio: el dibujo entero, recortado de la cintura
   para arriba (el lienzo es 384×640; se ve del 2% al 50% de su alto). */
/* Se corta solo por abajo (en la cintura): las manos, cuando celebra, pueden salir por arriba y por los lados. */
.ia-cuerpo-marco { flex: none; position: relative; width: 150px; height: 150px; margin-right: -10px; clip-path: inset(-40px -20px 0 -20px); }
.ia-cuerpo-marco .ia-cuerpo { position: absolute; left: 50%; top: -6px; width: 188px; height: 313px; margin: 0; transform: translateX(-53%); }
.ia-lea { margin-bottom: -2px; }
/* Un poco de aire a la izquierda: la mano de "explicando" asoma sobre el globo */
.ia-cuerpo-marco { width: 176px; margin-left: -26px; }
.ia-cuerpo-marco .ia-cuerpo { left: calc(50% + 13px); }
.ia-globo { z-index: 0; padding-right: 24px; }
.ia-cuerpo-marco { z-index: 1; pointer-events: none; }

/* =====================================================================
   Guiadas en la app: tres grupos y un color por tarjeta
   ===================================================================== */
.modo-app .guiadas-app { grid-template-columns: 1fr 1fr; gap: 10px; }
.grupo-guiadas { grid-column: 1 / -1; margin: 10px 2px 0; color: var(--gris); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.grupo-guiadas[hidden] { display: none; }
.grupo-guiadas[data-grupo="sigue"] { order: 10; margin-top: 0; }
.guiadas-app .opcion[data-grupo="sigue"] { order: 11; }
.grupo-guiadas[data-grupo="falta"] { order: 20; }
.guiadas-app .opcion[data-grupo="falta"] { order: 21; }
.guiadas-app .opcion.pronto { order: 22; }
.grupo-guiadas[data-grupo="hecha"] { order: 30; }
.guiadas-app .opcion[data-grupo="hecha"] { order: 31; }

.guiadas-app .opcion:not(.pronto) { --tinte: #f3eeff; --tinta-icono: #7c4ddb; border: 0; border-radius: 20px; background: var(--tinte); box-shadow: none; padding: 14px 10px 12px; }
.guiadas-app .opcion:not(.pronto):active { transform: scale(0.97); }
.guiadas-app .opcion[data-color="1"] { --tinte: #e6f5fe; --tinta-icono: #1593d0; }
.guiadas-app .opcion[data-color="2"] { --tinte: #e5f8ee; --tinta-icono: #2e9d5b; }
.guiadas-app .opcion[data-color="3"] { --tinte: #fff0e3; --tinta-icono: #e0782a; }
.guiadas-app .opcion[data-color="4"] { --tinte: #ffebf1; --tinta-icono: #d6457a; }
.guiadas-app .opcion[data-color="5"] { --tinte: #fff7dc; --tinta-icono: #b98500; }
.guiadas-app .opcion:not(.pronto) svg { width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: var(--blanco); stroke: var(--tinta-icono); }
.guiadas-app .opcion small { color: var(--gris); }

/* La que te toca: ancha, en fila y con su aviso */
.guiadas-app .opcion[data-grupo="sigue"] { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 4px 14px; padding: 16px; text-align: left; flex-wrap: wrap; box-shadow: inset 0 0 0 3px var(--tinta-icono); }
.guiadas-app .opcion[data-grupo="sigue"] svg { width: 56px; height: 56px; padding: 12px; flex: none; }
.guiadas-app .opcion[data-grupo="sigue"] > span:not(.puntos-partes) { flex: 1; font-size: 18px; font-weight: 900; }
.guiadas-app .opcion[data-grupo="sigue"] small { flex-basis: 100%; padding-left: 70px; margin-top: -26px; font-size: 13px; }
.guiadas-app .opcion[data-grupo="sigue"] .puntos-partes { padding-left: 70px; flex-basis: 100%; }
.guiadas-app .opcion[data-grupo="sigue"]::after { content: 'Empezar ›'; position: absolute; right: 14px; top: 14px; padding: 4px 10px; border-radius: 999px; background: var(--tinta-icono); color: var(--blanco); font-size: 12px; font-weight: 900; }

/* Las hechas, con su sello */
.guiadas-app .opcion[data-grupo="hecha"]::after { content: '✓'; position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--verde-texto); color: var(--blanco); font-size: 13px; font-weight: 900; }
.grupo-guiadas { text-align: left; }
.guiadas-app .opcion[data-grupo="sigue"] { display: grid; grid-template-columns: 56px 1fr; grid-auto-rows: auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 18px 16px; }
.guiadas-app .opcion[data-grupo="sigue"] svg { grid-row: 1 / span 3; }
.guiadas-app .opcion[data-grupo="sigue"] > span:not(.puntos-partes) { grid-column: 2; padding-right: 86px; }
.guiadas-app .opcion[data-grupo="sigue"] small,
.guiadas-app .opcion[data-grupo="sigue"] .puntos-partes { grid-column: 2; padding-left: 0; margin-top: 0; }
.guiadas-app .opcion[data-grupo="sigue"] .solo-pro { grid-column: 2; }
.guiadas-app .opcion[data-grupo="sigue"]::after { top: 50%; transform: translateY(-50%); }
.guiadas-app .opcion[data-grupo="sigue"] small { padding-right: 86px; }

/* Perfil: tus logros */
.logros-zona { display: flex; flex-direction: column; gap: 8px; }
.logros-titulo { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 0; color: var(--gris); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.logros-racha { color: var(--naranja); text-transform: none; letter-spacing: 0; font-size: 13px; }
.logros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.logro { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 18px; background: var(--superficie, #f6f4fb); }
.logro strong { color: var(--carbon); font-size: 26px; font-weight: 900; line-height: 1.1; margin-top: 6px; }
.logro span { color: var(--gris); font-size: 12.5px; font-weight: 700; }
.logro-icono { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--blanco); color: var(--principal-borde); }
.logro-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logro[data-logro="llama"] .logro-icono { color: var(--naranja); }
.logro[data-logro="guion"] .logro-icono { color: #1593d0; }
.logro[data-logro="diana"] .logro-icono { color: var(--rojo-borde); }

/* =====================================================================
   Cierre con Léa celebrando y confeti
   ===================================================================== */
.lea-celebra { display: block; width: 120px; height: 200px; max-width: none; margin: -4px auto -8px; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; animation: lea-celebra-salto 0.9s cubic-bezier(0.25, 0.9, 0.35, 1) both; }
@keyframes lea-celebra-salto {
  0% { transform: translateY(40px) scale(0.85); opacity: 0; }
  35% { transform: translateY(-30px) scale(1.02); opacity: 1; }
  60% { transform: translateY(0) scaleY(0.94); }
  80% { transform: translateY(-6px); }
  100% { transform: none; }
}
.lea-dice.sin-cara .lea-dice-cara { display: none; }
.lea-dice.sin-cara .lea-dice-globo::before, .lea-dice.sin-cara .lea-dice-globo::after { display: none; }
.guion-final .lea-celebra { width: 100px; height: 166px; margin-top: -6px; }

.confeti { position: fixed; inset: 0; z-index: 200; overflow: hidden; pointer-events: none; }
.confeti i { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation-name: confeti-cae; animation-timing-function: cubic-bezier(0.3, 0.4, 0.6, 1); animation-fill-mode: both; }
@keyframes confeti-cae {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--deriva), 105vh) rotate(var(--giro)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .lea-celebra { animation: none; } }
.modo-app .cierre-cifra { border: 0; background: var(--superficie, #f6f4fb); }
.modo-app .lea-dice.sin-cara .lea-dice-globo { border: 0; background: var(--superficie, #f6f4fb); }

/* =====================================================================
   App de Android: franja morada detrás de la hora y la batería
   ===================================================================== */
html.nativa body { padding-top: var(--arriba); }
html.nativa body::before { content: ''; position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: var(--arriba); background: var(--principal); pointer-events: none; }
/* Las páginas que van por encima de todo llevan su propia franja */
html.nativa .modo-app dialog.pagina-app:not(.como-pestana) { border-top: var(--arriba) solid var(--principal); }
html.nativa .modo-app dialog.pagina-app button.cerrar-x { padding-top: 10px; }
html.nativa .pagina-pro { padding-top: var(--arriba); }

/* =====================================================================
   Chat de la app, segunda versión: burbujas sin bordes, Léa al lado de lo
   que dice, correcciones a la vista y el micrófono que "respira" al escuchar
   ===================================================================== */
.modo-app .mensaje .burbuja { border: 0; border-radius: 20px; }
.modo-app .mensaje.ia .burbuja { background: var(--superficie); border-top-left-radius: 6px; }
.modo-app .mensaje.alumno .burbuja { background: var(--principal-suave); border-top-right-radius: 6px; }
.modo-app .mensaje.fallo .burbuja { background: var(--rojo-suave); }
.modo-app .traduccion { border-top-color: #e3def0; }
/* La carita de Léa junto a cada mensaje suyo */
.modo-app .mensaje.ia { position: relative; max-width: calc(88% + 40px); padding-left: 40px; }
.modo-app .mensaje.ia::before { content: ''; position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--blanco) url('personaje/contenta_cerrada.png') 50% 18% / 160% auto no-repeat; box-shadow: 0 0 0 2px var(--principal-suave); }
/* Las ayudas bajo cada respuesta, en morado */
.modo-app .herramientas button { color: var(--principal-borde); font-weight: 800; }
.modo-app .herramientas button:hover:not(:disabled) { background: var(--principal-suave); }
/* Las correcciones, bajo tu mensaje */
.correcciones { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.correccion { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; max-width: 100%; padding: 7px 12px; border: 0; border-radius: 14px; background: var(--blanco); box-shadow: 0 0 0 2px var(--rojo-suave); color: var(--carbon); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; text-align: right; }
.correccion:hover:not(:disabled) { background: #fff8f8; }
.correccion:active:not(:disabled) { transform: scale(0.98); }
.correccion s { color: var(--rojo-borde); text-decoration-thickness: 2px; }
.correccion b { color: var(--verde-texto); font-weight: 900; }
.correccion .flecha { color: var(--gris); }
.correccion .porque { margin-left: 4px; color: var(--principal-borde); font-size: 12px; font-weight: 800; }
.correccion.oido-mal { box-shadow: 0 0 0 2px #ffe2b8; } /* (no "duda": esa clase es la del botón redondo de ayuda) */
.correccion.escritura { box-shadow: 0 0 0 2px #fff0a8; }
/* Escuchando: el botón late con unas ondas suaves */
.modo-app #btn-mic[data-forma="parar"] { animation: mic-late 1.6s ease-out infinite; }
@keyframes mic-late {
  0% { box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.45), 0 0 0 0 rgba(255, 75, 75, 0.25); }
  70% { box-shadow: 0 0 0 12px rgba(255, 75, 75, 0), 0 0 0 22px rgba(255, 75, 75, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 75, 75, 0), 0 0 0 0 rgba(255, 75, 75, 0); }
}
@media (prefers-reduced-motion: reduce) { .modo-app #btn-mic[data-forma="parar"] { animation: none; } }
.modo-app .mensaje.ia::before { background-size: 100% auto; background-position: 50% 14%; }
/* Las dos ayudas sobre la caja: suaves, sin borde */
.modo-app #btn-ayuda, .modo-app #btn-sugerir { border: 0; background: var(--superficie); box-shadow: none; color: var(--principal-borde); }
.modo-app #btn-ayuda:active:not(:disabled), .modo-app #btn-sugerir:active:not(:disabled) { transform: scale(0.97); }
/* Sin hueco encima de las ayudas (las filas vacías de la cuadrícula dejaban espacio) */
.modo-app .compositor .columna { row-gap: 0; }
.modo-app .compositor .columna > .caja-zona, .modo-app #btn-mic { margin-top: 8px; }
.modo-app #pista { margin-top: 6px; }
.modo-app #btn-opciones { border: 0; background: var(--superficie); box-shadow: none; color: var(--principal-borde); }
.modo-app:not(.inicio) #contexto { border: 0; background: var(--superficie); color: var(--principal-borde); }

/* =====================================================================
   App: colores de marca (sin celeste) y grises que se leen al sol
   ===================================================================== */
/* En la app, lo que era celeste pasa a ser morado: un solo color de marca */
body.modo-app { --azul: var(--principal-borde); --azul-suave: var(--principal-suave); --azul-borde: var(--principal-claro); --gris-claro: #858585; }
/* El ícono de guiadas del inicio y las tarjetas de colores sí siguen en azul: es su color de tema */
.modo-app .ia-icono[data-icono="guion"] { background: var(--blanco); }
/* El borde de foco de la flecha de volver (salía como una línea celeste) */
.modo-app dialog.pagina-app button.cerrar-x:focus-visible { outline: none; }
.modo-app button.enlace { text-transform: none; letter-spacing: 0; font-weight: 800; }

/* =====================================================================
   App: Ajustes, cierre y Pro con el estilo nuevo (suave, sin bordes)
   ===================================================================== */
/* Botones secundarios: lavanda suave en vez de contorno gris */
.modo-app dialog.pagina-app button.contorno,
.modo-app .pagina-pro button.contorno,
.modo-app .guion-final button.contorno {
  border: 0; background: var(--superficie); box-shadow: none; color: var(--principal-borde);
  text-transform: none; letter-spacing: 0; font-size: 15px;
}
.modo-app dialog.pagina-app button.contorno:hover:not(:disabled),
.modo-app .pagina-pro button.contorno:hover:not(:disabled),
.modo-app .guion-final button.contorno:hover:not(:disabled) { background: #eeeaf8; }
.modo-app dialog.pagina-app button.contorno:active:not(:disabled),
.modo-app .pagina-pro button.contorno:active:not(:disabled),
.modo-app .guion-final button.contorno:active:not(:disabled) { transform: scale(0.98); }
.modo-app dialog.pagina-app button.primario, .modo-app .guion-final button.primario { text-transform: none; letter-spacing: 0; font-size: 16px; }

/* Ajustes */
.modo-app #ajustes select { border: 0; border-radius: 14px; background-color: var(--superficie); }
.modo-app #ajustes .campo, .modo-app #ajustes .segmentado legend { color: var(--gris); }
.modo-app .segmentado { gap: 0; }
.modo-app .segmentado label { flex: 1; }
.modo-app .segmentado span { height: 100%; border: 0; background: var(--superficie); text-align: center; }
.modo-app .segmentado label:first-of-type span { border-radius: 14px 0 0 14px; }
.modo-app .segmentado label:last-of-type span { border-radius: 0 14px 14px 0; margin-left: 0; }
.modo-app .segmentado input:checked + span { background: var(--principal); color: var(--blanco); }
/* Las casillas, como interruptores */
.modo-app .casilla { justify-content: space-between; flex-direction: row-reverse; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--superficie); }
.modo-app .casilla span { color: var(--carbon); font-size: 15px; font-weight: 700; line-height: 1.35; }
.modo-app .casilla input { appearance: none; -webkit-appearance: none; position: relative; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: #d6d2e0; transition: background 0.2s; cursor: pointer; }
.modo-app .casilla input::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
.modo-app .casilla input:checked { background: var(--principal); }
.modo-app .casilla input:checked::after { transform: translateX(18px); }

/* Cierre del chat: botones a lo ancho y los extras como botones suaves */
.modo-app .cierre-botones { flex-direction: column; align-items: stretch; }
.modo-app .cierre-extras { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; }
.modo-app .cierre-extras button.enlace { margin: 0; padding: 12px 16px; border-radius: var(--radio); background: var(--superficie); color: var(--principal-borde); font-size: 15px; }
.modo-app .cierre-extras button.enlace.oro { background: var(--oro-suave); color: var(--oro-texto); }
.modo-app .cierre-extras button.enlace:hover:not(:disabled) { text-decoration: none; }
.modo-app .cierre-cifra span { color: var(--gris); }
.modo-app .cierre-animo { border-radius: 16px; }

/* Fin de una guiada: botones a lo ancho */
.modo-app .guion-final .guion-botones { flex-direction: column; align-items: stretch; }

/* Página de Pro */
.modo-app .pro-plan { border: 0; border-radius: 20px; background: var(--superficie); }
.modo-app .pro-plan.destacado { border: 2px solid var(--oro-claro); background: var(--oro-suave); }
.modo-app .pro-limites { border: 0; border-radius: 20px; background: var(--superficie); }
.modo-app .pro-tabla { border: 0; border-radius: 20px; background: var(--superficie); }
.modo-app .pro-tabla th, .modo-app .pro-tabla td { border-top-color: var(--blanco); border-top-width: 2px; }
.modo-app .pro-tabla td.no { color: var(--gris-claro); }
.modo-app .pro-preguntas .pro-pregunta, .modo-app .pro-preguntas details { border: 0; border-radius: 16px; background: var(--superficie); }
.modo-app .pro-mensaje { border: 0; background: var(--blanco); }
.modo-app .pro-barra button.enlace { text-transform: none; font-size: 15px; }
.modo-app .segmentado span { display: flex; align-items: center; justify-content: center; }
.modo-app .guion-final { border: 0; border-radius: 24px; }
.modo-app .guion-final button.contorno { background: var(--blanco); }
.modo-app .guion-final button.contorno:hover:not(:disabled) { background: #fbfaff; }
.modo-app .guion-final .guion-mas button { width: 100%; }
.modo-app:not(.inicio) #contexto { background: var(--blanco); box-shadow: 0 2px 10px rgba(60, 30, 120, 0.12); }
/* Errores y práctica, también suaves */
.modo-app .frecuente { margin-bottom: 8px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--superficie); }
.modo-app .frecuente .veces { color: var(--gris); }
.modo-app button.peligro { border: 0; background: var(--rojo-suave); box-shadow: none; color: var(--rojo-borde); text-transform: none; letter-spacing: 0; }
.modo-app .practica-frase { border: 0; background: var(--superficie); }
.modo-app .lea-dice-globo { border: 0; background: var(--superficie); }
.modo-app .lea-dice-globo::before { border: 0; background: var(--superficie); }

/* =====================================================================
   La app con los colores de Léa
   Azul marino de su chaqueta (lo principal), rojo de su boina (la marca y
   las celebraciones), fondo crema, durazno para tus burbujas y carbón para
   el texto. Títulos en Fraunces. Solo en la app: la computadora sigue igual.
   ===================================================================== */
body.modo-app {
  --principal: #1f3366; --principal-claro: #2b4485; --principal-borde: #142347; --principal-suave: #e7ebf5;
  --boina: #d42a32; --boina-suave: #fbe3e2;
  --crema: #fcf8f1; --superficie: #f4ede2; --durazno: #fde6cc;
  --carbon: #383838; --gris: #6f675e; --gris-claro: #877f75; --linea: #e8dfd2;
  --azul: var(--principal); --azul-suave: var(--principal-suave); --azul-borde: var(--principal-claro);
  background: var(--crema);
}
.modo-app .barra, .modo-app .pestanas-app, .modo-app .compositor, .modo-app .pagina-pro, .modo-app .pro-barra,
.modo-app dialog.pagina-app, .modo-app dialog.pagina-app button.cerrar-x, .modo-app dialog.pagina-app::backdrop { background: var(--crema); }
.modo-app dialog.pagina-app button.cerrar-x { border-color: var(--linea); }

/* El nombre: Fraunces, en rojo boina */
.modo-app .marca { font-family: 'Fraunces', Georgia, serif; font-weight: 800; color: var(--boina); letter-spacing: -0.01em; }
/* Títulos con personalidad */
.modo-app h1.pregunta, .modo-app dialog h2, .modo-app .ia-globo strong, .modo-app .ia-paso strong, .modo-app .vacio-textos strong,
.modo-app .lea-dice-globo strong, .modo-app .logros-titulo, .modo-app .guion-final > strong, .modo-app .lema,
.modo-app .bv-titulo h1, .modo-app .bv-titulo h2, .modo-app #bv-titulo, .modo-app #bv-p-pregunta, .modo-app .pro-cuerpo h2 {
  font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.01em;
}
.modo-app .ia-globo strong { color: var(--boina); }
/* Etiquetas sin mayúsculas gritonas */
.modo-app .ia-titulo, .modo-app .grupo-guiadas, .modo-app .logros-titulo, .modo-app .ia-paso em, .modo-app .ia-frase em,
.modo-app .cierre-cifra span, .modo-app #ajustes .campo, .modo-app .segmentado legend {
  text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 800;
}

/* La tarjeta protagonista: azul marino con un filo rojo arriba (la boina) */
.modo-app .ia-paso::before { content: ''; position: absolute; left: 22px; top: 0; width: 34px; height: 5px; border-radius: 0 0 4px 4px; background: var(--boina); }
.modo-app .ia-paso em { color: #c9d3ec; }
.modo-app .ia-paso > span { color: #dfe5f3; }
.modo-app .ia-paso button.primario { color: var(--principal); border-bottom-color: #c9d3ec; }
.modo-app .ia-paso button.primario:hover:not(:disabled) { background: #f7f9fd; }

/* Superficies cálidas */
.modo-app .ia-globo::before { background: var(--superficie); }
.modo-app .mensaje.alumno .burbuja { background: var(--durazno); }
.modo-app .inicio-app .ia-opcion + .ia-opcion, .modo-app .ia-racha { border-color: var(--crema); }
.modo-app .ia-icono, .modo-app .inicio-app .ia-icono, .modo-app .logro-icono { background: var(--crema); }
.modo-app .ia-barra, .modo-app .ia-semana span { background: var(--crema); border-color: var(--crema); }
.modo-app .ia-icono[data-icono="ajustes"], .modo-app .ia-icono[data-icono="usuario"] { background: var(--crema); }
.modo-app .guiadas-app .opcion:not(.pronto) svg { background: var(--crema); }
.modo-app .traduccion { border-top-color: var(--linea); }
.modo-app .inicio-app .ia-opcion:hover:not(:disabled), .modo-app .perfil .ia-opcion:hover:not(:disabled) { background: rgba(31, 51, 102, 0.05); }
.modo-app .inicio-app .ia-opcion:active:not(:disabled), .modo-app .perfil .ia-opcion:active:not(:disabled) { background: rgba(31, 51, 102, 0.09); }
.modo-app dialog.pagina-app button.contorno:hover:not(:disabled), .modo-app .pagina-pro button.contorno:hover:not(:disabled) { background: #eee5d7; }
.modo-app .guion-final { background: var(--principal-suave); }
.modo-app .guion-final button.contorno:hover:not(:disabled) { background: #f7f9fd; }
.modo-app:not(.inicio) #contexto { box-shadow: 0 2px 10px rgba(31, 51, 102, 0.12); }
.modo-app .casilla input { background: #d9d1c4; }

/* Marinière: tres rayas finas azul marino bajo la barra de arriba */
.modo-app header.barra { position: relative; }
.modo-app header.barra::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 7px; background: repeating-linear-gradient(180deg, var(--principal) 0 1.5px, transparent 1.5px 3px); opacity: 0.85; pointer-events: none; }
.modo-app:not(.inicio) #mensajes { padding-top: 40px; }

/* Celebraciones con un toque de rojo boina */
.modo-app dialog.celebra h2, .modo-app .guion-final > strong { color: var(--boina); }
.modo-app .ia-fila.cumplida .ia-barra i { background: var(--boina); }
.modo-app .ia-fila.cumplida .ia-meta > span { color: var(--boina); }

/* La bienvenida, sobre crema */
.modo-app .bienvenida-app { background: linear-gradient(180deg, #f6eee2 0%, var(--crema) 45%, #fffdf9 100%); }
.modo-app .bv-pie { border: 0; box-shadow: 0 2px 14px rgba(31, 51, 102, 0.08); }
.modo-app .bv-pie button.contorno { border: 0; background: var(--superficie); box-shadow: none; color: var(--principal); }
/* Los días practicados de la semana, en azul marino lleno */
.modo-app .ia-semana span.hecho { border-color: var(--principal); background: var(--principal); color: var(--blanco); }
.modo-app .ia-semana span.hoy { border-color: var(--principal); color: var(--principal); }
.modo-app .ia-semana span.hoy.hecho { color: var(--blanco); }
/* La bienvenida: el nombre en Fraunces rojo, y los títulos de cada paso */
.modo-app .bv-marca { font-family: 'Fraunces', Georgia, serif; font-weight: 800; color: var(--boina); letter-spacing: -0.01em; }
.modo-app .bv-paso h3, .modo-app .bv-p-pregunta { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.01em; }
.modo-app .bv-errores { border-color: var(--linea); background: var(--crema); }

/* =====================================================================
   Colores de Léa, segunda vuelta: tarjetas de guiadas en tonos cálidos y
   un poco más de vida (azul más luminoso, degradados suaves, acentos rojos)
   ===================================================================== */
body.modo-app {
  --principal: #213f86; --principal-claro: #2c4fa0; --principal-borde: #162b5e; --principal-suave: #e6ebf7;
  --crema: #fdfaf5; --superficie: #f5eee3;
}
/* Guiadas: seis tonos cálidos que combinan con el crema (durazno, terracota,
   mostaza, salvia, rosa viejo y un azul marino suave que enlaza con la marca) */
.modo-app .guiadas-app .opcion:not(.pronto) { --tinte: #fdebd9; --tinta-icono: #d4692a; }
.modo-app .guiadas-app .opcion[data-color="1"] { --tinte: #fbe3df; --tinta-icono: #c4473e; }
.modo-app .guiadas-app .opcion[data-color="2"] { --tinte: #fbf0d0; --tinta-icono: #b07f0a; }
.modo-app .guiadas-app .opcion[data-color="3"] { --tinte: #e8efd9; --tinta-icono: #5f7f32; }
.modo-app .guiadas-app .opcion[data-color="4"] { --tinte: #f7e4ea; --tinta-icono: #b5486e; }
.modo-app .guiadas-app .opcion[data-color="5"] { --tinte: #e4e9f4; --tinta-icono: #213f86; }
.modo-app .guiadas-app .opcion:not(.pronto) svg { background: rgba(255, 255, 255, 0.75); }
.modo-app .opcion.pronto { border-color: #e3d8c8; background: var(--superficie); color: var(--gris); }
/* Los niveles A1 / A2 / B1: el elegido, azul lleno */
.modo-app #niveles-guion button { border: 0; background: var(--superficie); box-shadow: none; color: var(--gris); }
.modo-app #niveles-guion button.elegida { background: var(--principal); color: var(--blanco); }

/* Más vida */
/* La tarjeta protagonista, con un degradado suave y un brillo en la esquina */
.modo-app .ia-paso { background: linear-gradient(135deg, #1d3a80 0%, #2c4fa0 100%); overflow: hidden; }
.modo-app .ia-paso::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%); pointer-events: none; }
/* Botones principales con un poco de brillo arriba */
.modo-app button.primario { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0)); }
/* Íconos del inicio, cada uno con su color cálido */
.modo-app .inicio-app .ia-icono[data-icono="chat"] { background: var(--principal-suave); color: var(--principal); }
.modo-app .inicio-app .ia-icono[data-icono="guion"] { background: #fdebd9; color: #d4692a; }
.modo-app .inicio-app .ia-icono[data-icono="diana"] { background: #fbe3df; color: #c4473e; }
/* La barra de la meta, con degradado */
.modo-app .ia-barra i { background: linear-gradient(90deg, #213f86, #3a63bf); }
/* La racha encendida brilla un poco */
.modo-app .ia-racha.encendida .ia-llama svg { filter: drop-shadow(0 0 4px rgba(255, 150, 0, 0.45)); }
/* La pestaña elegida lleva un puntito rojo boina */
.modo-app .pestanas-app button { position: relative; }
.modo-app[data-vista="modo"] .pestanas-app [data-pestana="modo"]::after,
.modo-app[data-vista="libre"] .pestanas-app [data-pestana="libre"]::after,
.modo-app[data-vista="guion"] .pestanas-app [data-pestana="guion"]::after,
body.modo-app[data-pestana-abierta="errores"] .pestanas-app [data-pestana="errores"]::after,
body.modo-app[data-pestana-abierta="perfil"] .pestanas-app [data-pestana="perfil"]::after {
  content: ''; position: absolute; top: 0; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 0 0 3px 3px; background: var(--boina);
}
body.modo-app[data-pestana-abierta] .pestanas-app [data-pestana="modo"]::after,
body.modo-app[data-pestana-abierta] .pestanas-app [data-pestana="libre"]::after,
body.modo-app[data-pestana-abierta] .pestanas-app [data-pestana="guion"]::after { display: none; }
/* Logros con color */
.modo-app .logro[data-logro="chat"] { background: var(--principal-suave); }
.modo-app .logro[data-logro="llama"] { background: #fdebd9; }
.modo-app .logro[data-logro="guion"] { background: #fbf0d0; }
.modo-app .logro[data-logro="diana"] { background: #fbe3df; }
.modo-app .logro-icono { background: rgba(255, 255, 255, 0.8); }
.modo-app .logro[data-logro="guion"] .logro-icono { color: #b07f0a; }

/* "Más formas de practicar": tres tarjetas separadas, más fáciles de tocar con el dedo */
.modo-app .ia-lista { gap: 12px; padding: 0; border-radius: 0; background: none; }
.modo-app .inicio-app .ia-opcion { min-height: 72px; padding: 14px 14px; border-radius: 18px; background: var(--superficie); }
.modo-app .inicio-app .ia-opcion + .ia-opcion { border-top: 0; }
.modo-app .inicio-app .ia-opcion:active:not(:disabled) { transform: scale(0.98); }

/* =====================================================================
   App: últimos detalles (botones sin mayúsculas, sin bordes viejos,
   íconos en vez de emojis y "Sigue aquí" más liviano)
   ===================================================================== */
/* 1. Botones en minúsculas: "Continuar" en vez de "CONTINUAR" */
.modo-app button:not(.chapa-pro) { text-transform: none; letter-spacing: 0; }
.modo-app button.primario, .modo-app button.contorno, .modo-app .bv-pie button { font-size: 16px; }
.modo-app .ia-paso button.primario { font-size: 17px; }

/* 2. Sin los bordes que quedaban */
.modo-app #btn-atras, .modo-app #btn-menu { border: 0; background: var(--superficie); box-shadow: none; color: var(--principal); }
.modo-app #btn-atras:active:not(:disabled), .modo-app #btn-menu:active:not(:disabled) { transform: scale(0.94); }
.modo-app .bv-paso-dibujo { border: 0; background: var(--blanco); box-shadow: 0 2px 14px rgba(31, 51, 102, 0.08); }
.modo-app .bv-errores { border: 0; background: var(--superficie); }

/* 3. Íconos en vez de emojis */
.bv-micro svg { position: relative; z-index: 1; width: 34px; height: 34px; fill: none; stroke: var(--blanco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logros-racha { display: inline-flex; align-items: center; gap: 3px; }
.logros-llama svg { display: block; width: 16px; height: 16px; fill: var(--naranja); stroke: #e07b00; stroke-width: 1.6; stroke-linejoin: round; }

/* 4. "Sigue aquí" sin el borde grueso: una sombra suave la destaca */
.modo-app .guiadas-app .opcion[data-grupo="sigue"] { box-shadow: 0 6px 18px rgba(80, 50, 20, 0.10); }

/* La propuesta de valor, bajo el nombre (solo en las tarjetas del principio) */
.bv-lema { display: none; margin: 6px 24px 0; color: var(--gris); font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center; }
.bienvenida-app[data-fase="inicio"] .bv-lema { display: block; }
/* La carita de Léa en Práctica y el chat de ayuda: con un aro suave, como en el chat */
.modo-app .lea-dice-cara { border: 3px solid var(--blanco); box-shadow: 0 0 0 2px var(--linea); }
.bienvenida-app .bv-lema { align-self: center; width: auto; max-width: 300px; margin: 6px auto 0; padding: 0; position: static; transform: none; }

/* =====================================================================
   Bienvenida: Léa asomada detrás de las tarjetas del principio
   ===================================================================== */
.bv-pasos-lea { position: relative; z-index: 0; align-self: center; flex: none; width: 176px; height: 150px; margin: 0 auto -24px; overflow: hidden; }
.bv-pasos-lea img { position: absolute; left: 50%; top: -6px; width: 188px; height: 313px; max-width: none; margin: 0; transform: translateX(-53%); transform-origin: 50% 100%; }
.bv-pasos-lea img.rebota { animation: bv-asoma 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
@keyframes bv-asoma { from { transform: translateX(-53%) translateY(18px); } to { transform: translateX(-53%) translateY(0); } }
.bv-pasos-vista { z-index: 1; }
@media (max-height: 700px) {
  .bv-pasos-lea { width: 140px; height: 112px; margin-bottom: -18px; }
  .bv-pasos-lea img { width: 150px; height: 250px; top: -5px; }
}
@media (prefers-reduced-motion: reduce) { .bv-pasos-lea img.rebota { animation: none; } }

/* El mini chat de después de "Comenzar", más grande (Léa mide 150 px) */
.bv-lea.cuerpo { width: 90px; height: 150px; }
.bienvenida-app[data-fase="transicion"] .bv-escena { padding-top: 96px; }
.bienvenida-app[data-fase="transicion"] .bv-burbuja { max-width: 86%; padding: 13px 17px; border-radius: 20px; font-size: 20px; }
.bienvenida-app[data-fase="transicion"] .bv-burbuja small { font-size: 14.5px; }
.bienvenida-app[data-fase="transicion"] .bv-arreglo { font-size: 16px; }
.modo-app .bv-burbuja { border: 0; background: var(--superficie); }
.modo-app .bv-burbuja.de-alumno { background: var(--durazno); }
/* El mini chat, centrado en la pantalla y con aire para que Léa salte entre las burbujas */
.bienvenida-app[data-fase="transicion"] .bv-escena { display: flex; flex-direction: column; justify-content: center; padding-top: 150px; padding-bottom: 40px; }
.bienvenida-app[data-fase="transicion"] .bv-plano { gap: 48px; }

/* =====================================================================
   Practicar mis errores, como un juego (app)
   ===================================================================== */
/* La barra de progreso de la ronda */
.practica-progreso { display: flex; align-items: center; gap: 10px; }
.practica-barra { flex: 1; height: 12px; border-radius: 99px; background: var(--superficie, #f4ede2); overflow: hidden; }
.practica-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--principal), var(--principal-claro)); transition: width 0.5s cubic-bezier(0.3, 1.2, 0.5, 1); }
.practica-progreso .practica-paso { flex: none; }
.modo-app .practica-paso { color: var(--gris); font-size: 13px; text-transform: none; letter-spacing: 0; }
.modo-app .practica { gap: 14px; }

/* Léa de la cintura para arriba, con su globo al lado */
.modo-app .lea-dice.lea-grande { align-items: flex-end; gap: 4px; margin: 2px 0 0; }
.lea-grande-marco { flex: none; position: relative; width: 112px; height: 112px; overflow: hidden; }
.lea-grande-marco img { position: absolute; left: 50%; top: -4px; width: 140px; height: 233px; max-width: none; transform: translateX(-53%); }
.modo-app .lea-dice.lea-grande .lea-dice-globo { margin-bottom: 18px; }
.modo-app .lea-salta .lea-grande-marco { animation: lea-salta 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; transform-origin: 50% 100%; }

/* La pregunta y la frase, grandes */
.modo-app .practica h3 { color: var(--carbon); font-size: 20px; }
.modo-app .practica-frase { padding: 20px 18px; border-radius: 20px; font-size: 24px; line-height: 1.35; text-align: center; }
.modo-app .practica-hueco { display: inline-block; min-width: 70px; border-bottom: 3px solid var(--principal); color: transparent; }

/* Las opciones: una debajo de otra, grandes, fáciles de tocar */
.modo-app .practica-opciones { flex-direction: column; gap: 12px; }
.modo-app dialog.pagina-app .practica-opciones button { flex: none; min-height: 60px; padding: 14px 18px; border: 0; border-radius: 18px; background: var(--blanco); box-shadow: 0 0 0 2px var(--linea), 0 4px 0 var(--linea); color: var(--carbon); font-size: 20px; }
.modo-app dialog.pagina-app .practica-opciones button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 2px var(--linea), 0 1px 0 var(--linea); }
.modo-app dialog.pagina-app .practica-opciones button:disabled { opacity: 0.55; }
.modo-app dialog.pagina-app .practica-opciones button.acierto { background: #e3f5d2; box-shadow: 0 0 0 2px #8fd16a, 0 4px 0 #8fd16a; color: #3d7a12; opacity: 1; animation: practica-bien 0.4s ease; }
.modo-app dialog.pagina-app .practica-opciones button.fallo { background: var(--rojo-suave); box-shadow: 0 0 0 2px #f2a3a3, 0 4px 0 #f2a3a3; color: var(--rojo-borde); opacity: 1; animation: practica-mal 0.4s ease; }
@keyframes practica-bien { 40% { transform: scale(1.04); } }
@keyframes practica-mal { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Escribir: la caja grande */
.modo-app .practica input.texto-propio { min-height: 56px; border: 0; border-radius: 16px; background: var(--blanco); box-shadow: 0 0 0 2px var(--linea); font-size: 19px; padding: 0 16px; }
.modo-app .practica input.texto-propio:focus { box-shadow: 0 0 0 2px var(--principal); }
.modo-app .practica-fila { flex-direction: column; align-items: stretch; gap: 6px; }
.modo-app .practica-fila button.primario { width: 100%; }
.modo-app .practica-fila button.enlace { align-self: center; margin: 0; }

/* El resultado de cada respuesta */
.modo-app .practica-nota { padding: 16px 18px; border-radius: 20px; }
.modo-app .practica-nota strong { font-size: 18px; }
.modo-app .practica-nota p.practica-buena { font-size: 21px; }
.modo-app .practica-nota p { font-size: 15px; }
.modo-app .practica > button.primario { align-self: stretch; }

/* El final de la ronda */
.practica-final { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.practica-final .lea-dice { justify-content: center; }
.practica-final .lea-grande-marco { width: 150px; height: 150px; }
.practica-final .lea-grande-marco img { width: 188px; height: 313px; }
.practica-nota-final { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.practica-nota-final strong { font-family: 'Fraunces', Georgia, serif; color: var(--principal); font-size: 52px; line-height: 1; }
.practica-nota-final span { color: var(--gris); font-weight: 800; }
.modo-app .practica-final + p { text-align: center; color: var(--gris); }
.modo-app .practica-final ~ p.ayuda { text-align: center; }

/* Volver a tus errores desde la práctica */
.practica-volver { display: block; margin: 8px 0 -6px; padding: 0; font-size: 15px; }

/* El botón para practicar dentro de Mis errores */
.errores-practicar { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 14px; padding: 14px; border: 0; border-radius: 20px; background: linear-gradient(135deg, var(--principal) 0%, var(--principal-claro) 100%); box-shadow: 0 5px 0 var(--principal-borde); color: var(--blanco); text-align: left; text-transform: none; letter-spacing: 0; }
.errores-practicar:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--principal-borde); }
.errores-practicar .ia-icono { background: rgba(255, 255, 255, 0.95); color: var(--rojo-borde); }
.errores-practicar .ia-textos strong { color: var(--blanco); font-size: 17px; }
.errores-practicar .ia-textos small { color: rgba(255, 255, 255, 0.85); font-size: 13px; }
.errores-practicar-ir { flex: none; padding: 8px 14px; border-radius: 12px; background: var(--blanco); color: var(--principal); font-size: 14px; font-weight: 900; }
.errores-practicar.de-pro { background: linear-gradient(135deg, #f6b800, var(--oro)); box-shadow: 0 5px 0 var(--oro-borde); }
.errores-practicar.de-pro .ia-textos strong, .errores-practicar.de-pro .ia-textos small { color: var(--oro-tinta); }
.errores-practicar.de-pro .errores-practicar-ir { color: var(--oro-tinta); }
/* Sin Pro, debajo de tus 3 errores: cuántos más hay. */
.errores-mas-pro { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 4px; padding: 14px; border: 0; border-radius: 18px; background: var(--oro-suave); box-shadow: none; color: var(--carbon); text-align: left; text-transform: none; letter-spacing: 0; }
.errores-mas-pro .ia-textos strong { color: var(--carbon); font-size: 16px; }
.errores-mas-pro .ia-textos small { color: var(--gris); font-size: 13px; }
.errores-mas-candado { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--oro); font-size: 17px; }
.errores-mas-ir { flex: none; margin-left: auto; padding: 7px 12px; border-radius: 12px; background: var(--oro); color: var(--oro-tinta); font-size: 14px; font-weight: 900; }
.practica-volver { margin-left: 0 !important; margin-right: auto; }
.errores-practicar { gap: 10px; padding: 14px 12px; }
.errores-practicar .ia-textos strong { font-size: 16px; line-height: 1.2; }
.errores-practicar .ia-textos small { line-height: 1.3; }
.errores-practicar-ir { padding: 8px 12px; }
.practica-aviso { margin: -6px 0 0; color: var(--gris); font-size: 14px; }
.practica-detalle { padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.7); color: var(--carbon) !important; font-weight: 700; }

/* =====================================================================
   Arreglos vistos en el Pixel
   ===================================================================== */
/* El recorrido de ayuda va por encima de las pestañas: el globo se ve entero
   y no se puede tocar una pestaña (ni desplazar la página) a medio recorrido. */
.modo-app .tutorial { z-index: 50; touch-action: none; }
.modo-app .tut-globo { border-radius: 20px; box-shadow: 0 8px 30px rgba(20, 30, 70, 0.25); }
.modo-app .tut-botones button { text-transform: none; letter-spacing: 0; font-size: 14px; }
/* El aviso de "usuario nuevo", como una etiqueta bajo la barra */
.modo-app .aviso-prueba:not([hidden]) { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 16px 16px 0; padding: 10px 14px; border-radius: 14px; background: var(--oro-suave); color: var(--oro-tinta); font-size: 13px; font-weight: 700; line-height: 1.35; }
.modo-app .aviso-prueba span { flex: 1 1 180px; }
.modo-app .aviso-prueba button.enlace { margin: 0; padding: 0; color: var(--principal); font-size: 13px; }
/* "Quizá se oyó mal": no es culpa tuya, así que lo oído va en naranja y sin tachar */
.correccion.oido-mal s { color: #b86a00; text-decoration: none; }
.correccion.oido-mal s::before { content: 'Se oyó «'; font-weight: 700; color: var(--gris); }
.correccion.oido-mal s::after { content: '»'; color: var(--gris); }

/* =====================================================================
   Revisión final (app)
   ===================================================================== */
/* 2. Sin el borde de foco que el navegador dibuja alrededor de las páginas */
.modo-app dialog:focus, .modo-app dialog:focus-visible, .modo-app .pagina-pro:focus { outline: none; }

/* 3. Sin restos de mayúsculas */
.modo-app:not(.inicio) #contexto, .modo-app .frecuente .veces, .modo-app .tut-paso, .modo-app .rep-titulo,
.modo-app .antetitulo, .modo-app .pro-plan h2, .modo-app .pro-tabla th, .modo-app .grupo-guiadas, .modo-app .etiqueta-pronto {
  text-transform: none; letter-spacing: 0;
}
.modo-app .frecuente .veces { font-size: 12.5px; }
.modo-app:not(.inicio) #contexto { font-size: 12px; }

/* 4. Ajustes en grupos */
.modo-app .aj-grupo { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 16px; border-radius: 20px; background: var(--blanco); box-shadow: 0 0 0 2px var(--linea); }
.modo-app .aj-titulo { margin: 0 0 2px; color: var(--principal); font-family: 'Fraunces', Georgia, serif; font-size: 18px; }
.modo-app .aj-grupo .campo, .modo-app .aj-grupo .segmentado, .modo-app .aj-grupo .casilla { margin-top: 0; }
.modo-app .aj-grupo .ayuda { margin: -4px 0 0; font-size: 13px; }
.modo-app .aj-grupo .casilla { background: var(--superficie); }

/* 5. Pro: lo esencial arriba */
.pro-rapido { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; text-align: left; }
.pro-razon { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--superficie); }
.pro-razon .ia-icono { background: var(--oro-suave); color: var(--oro-texto); }
.pro-razon .ia-textos strong { font-size: 16px; }
.pro-rapido > button { margin-top: 6px; width: 100%; text-transform: none; letter-spacing: 0; }
.pro-ya { margin: 4px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--oro-suave); color: var(--oro-tinta); font-weight: 800; text-align: center; }
.pro-rapido-planes { margin: 22px 0 0; color: var(--carbon); font-family: 'Fraunces', Georgia, serif; font-size: 22px; text-align: center; }
.modo-app #pro .pro-planes { margin-top: 10px; }

/* 6. Para empezar a hablar */
.arranques { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 2px 0 6px; }
.arranques-titulo { color: var(--gris); font-size: 13px; font-weight: 800; }
.arranque { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; max-width: 88%; padding: 10px 14px; border: 0; border-radius: 18px; border-top-right-radius: 6px; background: var(--blanco); box-shadow: 0 0 0 2px var(--durazno, #fde6cc); color: var(--carbon); text-align: right; text-transform: none; letter-spacing: 0; }
.arranque strong { font-size: 16px; font-weight: 800; }
.arranque small { color: var(--gris); font-size: 12.5px; font-weight: 600; }
.arranque:active:not(:disabled) { transform: scale(0.97); }
/* Mis errores: cuántas veces y el tipo, en su propia línea arriba */
.modo-app .frecuente .veces { float: none; display: block; margin-bottom: 4px; }

/* =====================================================================
   La web (fuera de la app) con la identidad de
   Léa: azul marino de su chaqueta, rojo de su boina, fondo crema, títulos en
   Fraunces, sin mayúsculas y la franja marinera bajo la barra. Empezó en la
   portada; ahora vale para toda la web.
   ===================================================================== */
body:not(.modo-app) {
  --principal: #213f86; --principal-claro: #2c4fa0; --principal-borde: #162b5e; --principal-suave: #e6ebf7;
  --boina: #d42a32; --crema: #fcf8f1; --superficie: #f4ede2; --durazno: #fde6cc;
  --carbon: #383838; --gris: #6f675e; --gris-claro: #877f75; --linea: #e8dfd2;
  --azul: var(--principal); --azul-suave: var(--principal-suave); --azul-borde: var(--principal-claro);
  background: var(--crema);
}
body:not(.modo-app) .barra { position: relative; background: var(--crema); }
body:not(.modo-app) .marca { font-family: 'Fraunces', Georgia, serif; font-weight: 800; color: var(--boina); letter-spacing: -0.01em; }

/* Títulos con carácter; el acento del titular en rojo boina */
body:not(.modo-app) .lema,
body:not(.modo-app) .bloque h2,
body:not(.modo-app) .saludo span { font-family: 'Fraunces', Georgia, serif; font-weight: 800; letter-spacing: -0.015em; }
body:not(.modo-app) .lema span { color: var(--boina); }
body:not(.modo-app) .bloque h2 { color: var(--principal); }

/* Sin mayúsculas gritonas */
body:not(.modo-app) button,
body:not(.modo-app) .antetitulo,
body:not(.modo-app) .pie-grafico,
body:not(.modo-app) .elige-meta small,
body:not(.modo-app) .demo-guion em { text-transform: none; letter-spacing: 0; }
body:not(.modo-app) .antetitulo { color: var(--boina); font-size: 15px; }
body:not(.modo-app) button.primario { font-size: 17px; }

/* Bloques: el héroe y el cierre sobre arena; las separaciones, suaves */
body:not(.modo-app) .lado, body:not(.modo-app) .cierre { background: var(--superficie); }
body:not(.modo-app) .bloque + .bloque { border-top-color: var(--linea); }
body:not(.modo-app) .avatar { border-color: var(--principal); }
body:not(.modo-app) .saludo, body:not(.modo-app) .saludo::before { border: 0; background: var(--blanco); }
body:not(.modo-app) .saludo { box-shadow: 0 4px 18px rgba(31, 51, 102, 0.10); }
body:not(.modo-app) .elige-meta button { border-color: var(--linea); }
body:not(.modo-app) .elige-meta button.elegido { border-color: var(--principal); background: var(--principal); color: var(--blanco); }
body:not(.modo-app) .elige-meta button.elegido small { color: #c9d3ec; }

/* La demo del chat */
body:not(.modo-app) .demo { border: 0; box-shadow: 0 18px 44px rgba(31, 51, 102, 0.12); }
body:not(.modo-app) .demo-barra { border-bottom-color: var(--linea); background: var(--crema); }
body:not(.modo-app) .demo .mensaje.ia .burbuja { border: 0; background: var(--superficie); }
body:not(.modo-app) .demo .mensaje.alumno .burbuja { border: 0; background: var(--durazno); }
body:not(.modo-app) .demo-cara { border-color: var(--blanco); box-shadow: 0 0 0 2px var(--linea); }
body:not(.modo-app) .demo-correccion { border: 0; border-left: 5px solid var(--boina); background: var(--superficie); }
body:not(.modo-app) .demo-guion { border: 0; background: var(--principal-suave); }
body:not(.modo-app) .nota-demo { background: var(--superficie); }

/* Ventajas, datos y preguntas, como tarjetas suaves */
body:not(.modo-app) .dato { border: 0; border-left: 6px solid var(--boina); background: var(--blanco); box-shadow: 0 4px 18px rgba(31, 51, 102, 0.07); }
body:not(.modo-app) .preguntas details { border: 0; background: var(--blanco); box-shadow: 0 0 0 2px var(--linea); }
body:not(.modo-app) .preguntas details[open] { box-shadow: 0 0 0 2px var(--principal); }
body:not(.modo-app) .carrusel-mandos button { border: 0; background: var(--superficie); box-shadow: none; color: var(--principal); }
body:not(.modo-app) .pie a { color: var(--principal); }
/* La barra de la portada: botones suaves y sin mayúsculas */
body:not(.modo-app) .menu-idioma summary { text-transform: none; letter-spacing: 0; }
body:not(.modo-app) .barra .menu-idioma summary,
body:not(.modo-app) .barra button.contorno:not(.pro) { border: 0; background: var(--superficie); box-shadow: none; color: var(--principal); }

/* --- Toda la web con los colores de Léa: lo propio de cada pantalla --- */
/* Títulos */
body:not(.modo-app) h1.pregunta, body:not(.modo-app) dialog h2, body:not(.modo-app) .panel h2,
body:not(.modo-app) .lea-dice-globo strong, body:not(.modo-app) .vacio-textos strong, body:not(.modo-app) .guion-final > strong {
  font-family: 'Fraunces', Georgia, serif; font-weight: 800; letter-spacing: -0.01em;
}
body:not(.modo-app) dialog h2 { color: var(--principal); }
body:not(.modo-app) #tb-saludo { color: var(--boina); font-family: 'Fraunces', Georgia, serif; }
/* Etiquetas sin mayúsculas */
body:not(.modo-app) .tb-tarjeta h2, body:not(.modo-app) .tb-hoy h2, body:not(.modo-app) .panel h3,
body:not(.modo-app) .panel-cifras span, body:not(.modo-app) .panel-error .tipo, body:not(.modo-app) .temas-titulo,
body:not(.modo-app) .campo, body:not(.modo-app) .segmentado legend, body:not(.modo-app) .cierre-cifra span,
body:not(.modo-app) .frecuente .veces, body:not(.modo-app) .practica-paso, body:not(.modo-app) .rep-titulo,
body:not(.modo-app) .tut-paso, body:not(.modo-app) #contexto, body:not(.modo-app) .estado, body:not(.modo-app) .pro-plan h2,
body:not(.modo-app) .pro-tabla th, body:not(.modo-app) .etiqueta-pronto, body:not(.modo-app) .solo-pro {
  text-transform: none; letter-spacing: 0;
}
/* Inicio (tablero): tarjetas suaves, la de hoy en arena */
body:not(.modo-app) .tb-tarjeta { border: 0; background: var(--blanco); box-shadow: 0 0 0 2px var(--linea); }
body:not(.modo-app) .tb-hoy { background: var(--superficie); box-shadow: 0 0 0 2px var(--principal); }
body:not(.modo-app) .tb-medidor-carril { background: var(--superficie); }
body:not(.modo-app) .tb-fila { border-bottom-color: var(--superficie); }
/* Temas y guiadas */
body:not(.modo-app) .opcion { border-color: var(--linea); }
body:not(.modo-app) .opcion.elegida { border-color: var(--principal); background: var(--principal-suave); }
body:not(.modo-app) .opcion.pronto { border-color: var(--linea); background: var(--superficie); }
/* Chat: burbujas como en la app */
body:not(.modo-app) .mensaje .burbuja { border: 0; }
body:not(.modo-app) .mensaje.ia .burbuja { background: var(--superficie); }
body:not(.modo-app) .mensaje.alumno .burbuja { background: var(--durazno); }
body:not(.modo-app) .transcripcion { border-color: var(--linea); background: var(--blanco); }
body:not(.modo-app) .compositor { background: var(--crema); }
/* Panel de la sesión */
body:not(.modo-app) .panel { border-left-color: var(--linea); background: var(--crema); }
body:not(.modo-app) .panel-cifras div { border: 0; background: var(--superficie); }
body:not(.modo-app) .panel-error { border: 0; border-left: 5px solid var(--rojo); background: var(--superficie); }
body:not(.modo-app) .panel-error.escritura { border-left-color: #e6b400; }
body:not(.modo-app) .panel-error.duda { border-left-color: var(--naranja); }
/* Ventanas */
body:not(.modo-app) dialog { border: 0; border-radius: 22px; background: var(--crema); box-shadow: 0 24px 60px rgba(20, 30, 70, 0.25); }
body:not(.modo-app) dialog::backdrop { background: rgba(20, 30, 70, 0.45); }
body:not(.modo-app) dialog button.cerrar-x { border: 0; background: var(--superficie); color: var(--principal); }
body:not(.modo-app) .frecuente { margin-bottom: 8px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--superficie); }
body:not(.modo-app) .practica-frase, body:not(.modo-app) .lea-dice-globo, body:not(.modo-app) .cierre-cifra { border: 0; background: var(--superficie); }
body:not(.modo-app) .lea-dice-globo::before { border: 0; background: var(--superficie); }
body:not(.modo-app) .lea-dice-cara { border: 3px solid var(--blanco); box-shadow: 0 0 0 2px var(--linea); }
body:not(.modo-app) select { border-color: var(--linea); background-color: var(--blanco); }
body:not(.modo-app) .segmentado span { border-color: var(--linea); }
/* Pro */
body:not(.modo-app) .pagina-pro, body:not(.modo-app) .pro-barra { background: var(--crema); }
body:not(.modo-app) .pro-plan { border: 0; background: var(--superficie); }
body:not(.modo-app) .pro-plan.destacado { border: 2px solid var(--oro-claro); background: var(--oro-suave); }
body:not(.modo-app) .pro-limites, body:not(.modo-app) .pro-preguntas .pro-pregunta, body:not(.modo-app) .pro-preguntas details { border: 0; background: var(--superficie); }
body:not(.modo-app) .pro-tabla { border: 0; background: var(--superficie); }
body:not(.modo-app) .pro-tabla th, body:not(.modo-app) .pro-tabla td { border-top: 2px solid var(--crema); }
body:not(.modo-app) .tb-cifras span, body:not(.modo-app) .panel-error .tb-dijiste em, body:not(.modo-app) .tb-tarjeta em { text-transform: none; letter-spacing: 0; }
body:not(.modo-app) .tb-cifras > div { border: 0; background: var(--blanco); box-shadow: 0 0 0 2px var(--linea); }

/* =====================================================================
   Portada: Léa saludando, la app en el teléfono y la investigación compacta
   ===================================================================== */
/* Léa de la cintura para arriba, saludando, en lugar de la carita */
.lea-portada { display: none; }
body.inicio.paso-1:not(.modo-app) .avatar { display: none; }
body.inicio.paso-1:not(.modo-app) .lea-portada {
  display: block; grid-column: 2; grid-row: 1; position: relative; width: min(360px, 100%); aspect-ratio: 1 / 0.92; overflow: hidden;
  border-radius: 0 0 50% 50% / 0 0 18% 18%;
}
body.inicio.paso-1:not(.modo-app) .lea-portada::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 0; height: 78%; border-radius: 50% 50% 0 0; background: var(--principal-suave); }
body.inicio.paso-1:not(.modo-app) .lea-portada img {
  position: absolute; left: 50%; top: -2%; width: 118%; max-width: none; height: auto; transform: translateX(-45%);
  transform-origin: 50% 100%; animation: lea-respira 4.5s ease-in-out infinite;
}
@keyframes lea-respira { 50% { transform: translateX(-45%) translateY(-1.5%); } }
body.inicio.paso-1:not(.modo-app) .saludo { margin-top: -6px; }
@media (max-width: 820px) {
  body.inicio.paso-1:not(.modo-app) .lea-portada { grid-column: 1; grid-row: 1; width: min(200px, 52vw); }
}
@media (prefers-reduced-motion: reduce) { body.inicio.paso-1:not(.modo-app) .lea-portada img { animation: none; } }

/* La app, en tres teléfonos */
.bloque-movil { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; background: var(--superficie, #f4ede2); }
.movil-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.movil-puntos { margin: 18px 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.movil-puntos li { position: relative; padding-left: 30px; color: var(--gris); font-size: 17px; line-height: 1.4; }
.movil-puntos li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 6px; background: var(--principal); }
.movil-puntos b { display: block; color: var(--carbon); }
.insignia-play { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 14px; background: var(--carbon); color: #fff; cursor: default; opacity: 0.9; }
.insignia-play svg { width: 26px; height: 26px; fill: #fff; }
.insignia-play span { display: flex; flex-direction: column; font-weight: 800; font-size: 18px; line-height: 1.1; }
.insignia-play small { font-size: 11px; font-weight: 700; opacity: 0.8; }
a.insignia-play { cursor: pointer; opacity: 1; text-decoration: none; transition: transform 0.15s; }
a.insignia-play:hover { transform: translateY(-1px); }
.telefonos { position: relative; display: flex; justify-content: center; align-items: center; min-height: 520px; }
.telefono { position: relative; flex: none; width: 210px; aspect-ratio: 9 / 19.2; padding: 8px; border-radius: 34px; background: #1d2433; box-shadow: 0 24px 50px rgba(20, 30, 70, 0.28); overflow: hidden; }
.telefono img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 27px; background: #fcf8f1; }
.telefono::after { content: ''; position: absolute; left: 50%; top: 14px; width: 54px; height: 6px; margin-left: -27px; border-radius: 4px; background: #1d2433; opacity: 0.9; }
.telefono.centro { z-index: 2; width: 240px; }
.telefono.lado-izq { z-index: 1; margin-right: -40px; transform: rotate(-6deg) translateY(18px) scale(0.92); }
.telefono.lado-der { z-index: 1; margin-left: -40px; transform: rotate(6deg) translateY(18px) scale(0.92); }
@media (max-width: 820px) {
  .bloque-movil { grid-template-columns: 1fr; gap: 28px; }
  .telefonos { min-height: 0; }
  .telefono { width: 150px; } .telefono.centro { width: 180px; }
  .telefono.lado-izq { margin-right: -46px; } .telefono.lado-der { margin-left: -46px; }
}

/* La investigación, compacta: tres tarjetas chicas a la vista, sin carrusel */
body.inicio.paso-1:not(.modo-app) .bloque.dos-columnas:not(.bloque-demo) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
body.inicio.paso-1:not(.modo-app) .bloque.dos-columnas:not(.bloque-demo) > div:first-child > p { max-width: 720px; }
body.inicio.paso-1:not(.modo-app) .ventajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.inicio.paso-1:not(.modo-app) .ventajas li { padding: 16px 16px 16px 46px; border-radius: 16px; background: var(--blanco); box-shadow: 0 0 0 2px var(--linea); }
body.inicio.paso-1:not(.modo-app) .ventajas li::before { left: 14px; top: 16px; }
body.inicio.paso-1:not(.modo-app) .datos { gap: 10px; }
body.inicio.paso-1:not(.modo-app) .carrusel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.inicio.paso-1:not(.modo-app) .carrusel .dato { grid-area: auto; opacity: 1; visibility: visible; transform: none; padding: 14px 16px; border-left-width: 4px; box-shadow: none; background: transparent; border-radius: 0; }
body.inicio.paso-1:not(.modo-app) .carrusel .hallazgo { font-size: 15px; }
body.inicio.paso-1:not(.modo-app) .carrusel .matiz { font-size: 13px; }
body.inicio.paso-1:not(.modo-app) .carrusel-mandos { display: none; }
@media (max-width: 820px) {
  body.inicio.paso-1:not(.modo-app) .ventajas, body.inicio.paso-1:not(.modo-app) .carrusel { grid-template-columns: 1fr; }
}
/* La rayita de arriba del teléfono, en su propio marco (no tapa la pantalla) */
.telefono { padding: 20px 8px 10px; }
.telefono::after { top: 8px; }
.telefono img { border-radius: 20px 20px 26px 26px; }
.bloque-movil { overflow: hidden; }

/* Portada: "gratis" bajo el botón y la franja de lo que te diferencia */
.sin-coste { margin: -6px 0 0; color: var(--gris); font-size: 14px; font-weight: 700; }
.diferencias { display: none; }
body.inicio.paso-1:not(.modo-app) .diferencias {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  padding: 28px max(24px, calc((100% - 1080px) / 2)); background: var(--principal); color: #fff;
}
.diferencia { display: flex; align-items: flex-start; gap: 12px; }
.diferencia svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diferencia strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.diferencia span { display: block; margin-top: 2px; color: #d6deef; font-size: 14.5px; line-height: 1.4; }
@media (max-width: 820px) {
  body.inicio.paso-1:not(.modo-app) .diferencias { grid-template-columns: 1fr; padding: 24px 16px; }
  .sin-coste { text-align: center; }
}

/* Portada: precios */
.precios { text-align: center; }
.precios h2 { margin-bottom: 8px; }
.precios-planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 860px; margin: 24px auto 0; text-align: left; }
.precio-plan { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; background: var(--blanco); box-shadow: 0 0 0 2px var(--linea); }
.precio-plan h3 { margin: 0; color: var(--gris); font-size: 16px; font-weight: 800; }
.precio-cifra { color: var(--carbon); font-family: 'Fraunces', Georgia, serif; font-size: 40px; font-weight: 800; line-height: 1.1; }
.precio-cifra small { color: var(--gris); font-family: var(--fuente); font-size: 16px; font-weight: 700; }
.precio-plan ul { flex: 1; margin: 6px 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--gris); font-size: 16px; line-height: 1.4; }
.precio-plan strong { color: var(--carbon); }
.precio-plan.destacado { background: var(--oro-suave); box-shadow: 0 0 0 2px var(--oro-claro); }
.precio-plan.destacado h3 { color: var(--oro-texto); }
.precio-plan button { align-self: stretch; }
.precios-nota { margin: 16px auto 0 !important; max-width: 620px; color: var(--gris) !important; font-size: 15px !important; }
@media (max-width: 820px) { .precios-planes { grid-template-columns: 1fr; } }

/* Portada: pie de página */
.pie-portada { flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px 36px; border-top: 2px solid var(--linea); text-align: center; }
.pie-marca { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pie-marca .marca { font-size: 24px; }
.pie-marca > span:last-child { color: var(--gris); font-size: 14px; }
.pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 14px; }
.pie-enlaces span { color: var(--gris); }
.pie-nota { color: var(--gris-claro); font-size: 12.5px; }

/* =====================================================================
   Portada, tercera vuelta: barra para quien visita, escuchar a Léa,
   prueba real, demo sin hueco, menos repetición y cierre con Léa
   ===================================================================== */
/* La barra: en la portada, Precios · Preguntas · Entrar · Empieza gratis, y fija */
.solo-portada { display: none !important; }
body.inicio.paso-1:not(.modo-app) .solo-portada { display: inline-flex !important; }
body.inicio.paso-1:not(.modo-app) #btn-ajustes, body.inicio.paso-1:not(.modo-app) #btn-pro { display: none !important; }
body.inicio.paso-1:not(.modo-app) .barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15; }
.enlace-barra { align-items: center; padding: 8px 10px; color: var(--principal); font-size: 15px; font-weight: 800; text-decoration: none; border-radius: 10px; }
.enlace-barra:hover { background: var(--superficie); }
body.inicio.paso-1:not(.modo-app) #btn-login { background: var(--superficie); border-color: var(--superficie); border-bottom-color: var(--linea); color: var(--principal); }
#precios, #preguntas { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Escuchar a Léa y la prueba real, bajo el botón principal */
.hero-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.escuchar-lea { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 0; border-radius: 999px; background: var(--blanco); box-shadow: 0 0 0 2px var(--linea); color: var(--carbon); text-align: left; text-transform: none; letter-spacing: 0; }
.escuchar-lea:hover:not(:disabled) { background: var(--blanco); box-shadow: 0 0 0 2px var(--principal); }
.escuchar-lea:active:not(:disabled) { transform: scale(0.97); }
.escuchar-icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--boina, #d42a32); }
.escuchar-icono svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.escuchar-lea strong { display: block; font-size: 15px; }
.escuchar-lea small { display: block; color: var(--gris); font-size: 12.5px; font-weight: 700; }
.escuchar-lea.sonando .escuchar-icono { animation: lea-suena 1.2s ease-out infinite; }
.escuchar-lea.sonando .escuchar-icono svg { margin: 0; }
.escuchar-lea.sonando .escuchar-icono svg path { d: path('M7 6h4v12H7zM13 6h4v12h-4z'); }
@keyframes lea-suena { 0% { box-shadow: 0 0 0 0 rgba(212, 42, 50, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(212, 42, 50, 0); } }
.prueba-real { margin: 0; max-width: 300px; color: var(--gris); font-size: 13.5px; line-height: 1.4; }
.prueba-real strong { color: var(--principal); }
@media (max-width: 820px) { .hero-extra { justify-content: center; } .prueba-real { text-align: center; } }

/* La demo del chat, sin el hueco vacío de abajo */
body.inicio.paso-1:not(.modo-app) .demo-chat { height: 440px; }

/* "Por qué funciona": sin la lista que repetía la franja de arriba */
body.inicio.paso-1:not(.modo-app) .ventajas { display: none; }

/* Cierre con Léa */
body.inicio.paso-1:not(.modo-app) .cierre { display: flex; align-items: center; justify-content: center; gap: 40px; text-align: left; padding-bottom: 0; overflow: hidden; }
.cierre-lea { flex: none; width: 230px; align-self: flex-end; margin-bottom: -150px; }
.cierre-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 520px; padding-bottom: 72px; }
.cierre-texto h2 { margin: 0 !important; }
.cierre-texto p { margin: 0; }
@media (max-width: 820px) {
  body.inicio.paso-1:not(.modo-app) .cierre { flex-direction: column-reverse; gap: 8px; text-align: center; }
  .cierre-texto { align-items: center; padding-bottom: 8px; }
  .cierre-lea { width: 170px; margin-bottom: -110px; align-self: center; }
}

/* Fondo de la web más claro (casi blanco, con un toque cálido) */
body:not(.modo-app) { --crema: #fcf6ec; --superficie: #f5eddf; --linea: #e8dfd0; }

/* "Por qué funciona": el texto arriba, centrado, y los tres estudios como
   tarjetas con su cifra grande */
body.inicio.paso-1:not(.modo-app) .bloque-estudios { text-align: center; }
body.inicio.paso-1:not(.modo-app) .bloque-estudios > div:first-child > p { margin: 0 auto; max-width: 640px; }
body.inicio.paso-1:not(.modo-app) .bloque-estudios .datos { align-items: center; gap: 16px; }
body.inicio.paso-1:not(.modo-app) .bloque-estudios .carrusel { width: 100%; gap: 18px; text-align: left; }
body.inicio.paso-1:not(.modo-app) .bloque-estudios .dato {
  display: flex; flex-direction: column; gap: 6px; padding: 24px 22px; border: 0; border-radius: 22px;
  background: var(--blanco); box-shadow: 0 10px 30px rgba(31, 51, 102, 0.08);
}
.dato-cifra { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.dato-cifra strong { color: var(--principal); font-family: 'Fraunces', Georgia, serif; font-size: 48px; font-weight: 800; line-height: 1; }
.dato-cifra span { color: var(--gris); font-size: 13px; font-weight: 700; }
body.inicio.paso-1:not(.modo-app) .bloque-estudios .hallazgo { font-size: 17px; line-height: 1.3; }
body.inicio.paso-1:not(.modo-app) .bloque-estudios .matiz { flex: 1; font-size: 14px; }
body.inicio.paso-1:not(.modo-app) .bloque-estudios .nota-datos { text-align: center; }

/* Portada, cuarta vuelta */
/* 1. El globo pegado a Léa, como si lo dijera ella */
body.inicio.paso-1:not(.modo-app) .saludo { position: relative; z-index: 2; margin-top: -58px; }
@media (max-width: 820px) { body.inicio.paso-1:not(.modo-app) .saludo { margin-top: -40px; } }
/* 2. Avísame cuando salga */
.aviso-android { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; margin-bottom: 14px; }
.aviso-android label { color: var(--carbon); font-size: 15px; font-weight: 800; }
.aviso-fila { display: flex; gap: 8px; }
.aviso-permiso { margin: 0; color: var(--gris); font-size: 13px; font-weight: 700; line-height: 1.4; }
.aviso-permiso a { color: var(--azul); }
.aviso-fila[hidden] { display: none; }
.aviso-fila input { flex: 1; min-width: 0; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--blanco); box-shadow: 0 0 0 2px var(--linea); font: inherit; font-size: 16px; color: var(--carbon); }
.aviso-fila input:focus { outline: none; box-shadow: 0 0 0 2px var(--principal); }
.aviso-fila button { flex: none; }
.aviso-estado { margin: 0; color: var(--principal); font-size: 14px; font-weight: 700; }
.aviso-estado:empty { display: none; }
/* 4. Más preguntas */
.mas-preguntas { align-self: center; margin-top: 6px; border: 0; background: var(--superficie); box-shadow: none; color: var(--principal); text-transform: none; letter-spacing: 0; }
/* 6. Redes en el pie */
.pie-redes { display: inline-flex; gap: 16px; }
.pie-redes[hidden] { display: none; }

/* Portada: sin el selector de idioma (se elige en el primer paso) y la palabra
   del titular que cambia entre francés e inglés */
body.inicio.paso-1:not(.modo-app) .elige-meta { display: none; }
.lema-idioma { display: inline-block; transition: opacity 0.3s ease, transform 0.3s ease; }
.lema-idioma.sale { opacity: 0; transform: translateY(-0.25em); }
#saludo-frase { transition: opacity 0.3s ease; }
#saludo-frase.sale { opacity: 0; }

/* =====================================================================
   Web, después de "Empieza gratis": Léa de medio cuerpo (no la carita),
   la barra sin Ajustes ni Pro durante las preguntas, y opciones con estilo
   ===================================================================== */
body.inicio.paso-2:not(.modo-app) .avatar { display: none; }
body.inicio.paso-2:not(.modo-app) .lea-portada {
  display: block; position: relative; width: 170px; aspect-ratio: 1 / 0.92; margin: 0 auto; overflow: hidden;
}
body.inicio.paso-2:not(.modo-app) .lea-portada::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 0; height: 78%; border-radius: 50% 50% 0 0; background: var(--principal-suave); }
body.inicio.paso-2:not(.modo-app) .lea-portada img { position: absolute; left: 50%; top: -2%; width: 118%; max-width: none; height: auto; transform: translateX(-45%); }
body.inicio.paso-2:not(.modo-app) .lado { padding-bottom: 0; }
@media (max-width: 820px) { body.inicio.paso-2:not(.modo-app) .lea-portada { width: 120px; } }
body.inicio.paso-2[data-vista="preguntas"]:not(.modo-app) #btn-ajustes,
body.inicio.paso-2[data-vista="preguntas"]:not(.modo-app) #btn-pro { display: none !important; }

/* Las opciones de las preguntas: tarjetas suaves */
body:not(.modo-app) .enc-opciones { gap: 12px; }
body:not(.modo-app) .enc-opciones .opcion {
  align-items: center; padding: 18px 22px; border: 0; border-radius: 18px; background: var(--blanco);
  box-shadow: 0 0 0 2px var(--linea); transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body:not(.modo-app) .enc-opciones .opcion:hover:not(:disabled) { background: var(--blanco); box-shadow: 0 0 0 2px var(--principal), 0 8px 20px rgba(31, 51, 102, 0.10); transform: translateY(-1px); }
body:not(.modo-app) .enc-opciones .opcion:active:not(:disabled) { transform: scale(0.99); }
body:not(.modo-app) .enc-opciones .opcion small { color: var(--gris); font-weight: 700; }
/* La primera: el idioma, en dos tarjetas grandes con el saludo de Léa */
body:not(.modo-app) .enc-opciones.enc-idioma { width: min(560px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body:not(.modo-app) .enc-idioma .opcion { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 26px 24px; }
body:not(.modo-app) .enc-idioma .opcion > span { font-family: 'Fraunces', Georgia, serif; font-size: 28px; color: var(--principal); }
body:not(.modo-app) .enc-idioma .opcion small { font-size: 16px; color: var(--carbon); }
@media (max-width: 520px) { body:not(.modo-app) .enc-opciones.enc-idioma { grid-template-columns: 1fr; } }
/* Etiqueta de la demo cuando alterna idiomas */
.demo-idioma { align-self: center; padding: 3px 12px; border-radius: 999px; background: var(--principal-suave); color: var(--principal); font-size: 12px; font-weight: 800; }

/* =====================================================================
   "Mucho más que conversar": recorrido con un iPhone fijo
   ===================================================================== */
.recorrido { background: var(--superficie, #f4ede2); }
.recorrido-cabeza { max-width: 640px; margin: 0 auto 8px; text-align: center; }
.recorrido-cabeza p { margin: 0 auto; }
.recorrido-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.recorrido-pasos { display: flex; flex-direction: column; }
.recorrido-paso { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 10px; opacity: 0.35; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; }
.recorrido-paso.activo { opacity: 1; transform: none; }
.recorrido-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--boina, #d42a32); color: #fff; font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 800; }
.recorrido-paso h3 { margin: 0; color: var(--principal); font-family: 'Fraunces', Georgia, serif; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.recorrido-paso p { margin: 0; max-width: 440px; color: var(--gris); font-size: 19px; line-height: 1.5; }
.recorrido-fijo { position: sticky; top: calc(50vh - 330px); display: flex; justify-content: center; padding-block: 40px; }
/* El aviso de Google Play, debajo del botón del cierre */
.cierre-aviso { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--linea); width: 100%; }
.cierre-aviso .aviso-android { margin: 0; flex: 1 1 300px; }

/* El iPhone: marco de titanio, isla dinámica, botones y barra de estado */
.iphone { position: relative; flex: none; width: 300px; aspect-ratio: 390 / 844; padding: 11px; border-radius: 54px;
  background: linear-gradient(145deg, #3b3e46, #1c1e23 45%, #2c2f36); box-shadow: inset 0 0 0 1.5px #55585f, 0 30px 60px rgba(20, 30, 70, 0.30), 0 8px 18px rgba(20, 30, 70, 0.18); }
.iphone-pantalla { position: relative; width: 100%; height: 100%; border-radius: 44px; overflow: hidden; background: #fffdfa; }
.iphone-estado { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 32px; background: #fffdfa; color: #1c1c1e; font: 700 14px/1 -apple-system, 'SF Pro Text', system-ui, sans-serif; }
.iphone-isla { position: absolute; left: 50%; top: 10px; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #0b0b0d; }
.iphone-iconos { display: flex; align-items: center; gap: 5px; }
.iphone-iconos svg { height: 11px; width: auto; fill: currentColor; }
.iphone-pantalla > img { position: absolute; left: 0; top: 46px; width: 100%; height: calc(100% - 46px); max-width: none; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.02); transition: opacity 0.5s ease, transform 0.5s ease; }
.iphone-pantalla > img.activa { opacity: 1; transform: none; }
.iphone-boton { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #2a2c32, #4a4d55); }
.iphone-boton.volumen-1 { left: -3px; top: 21%; height: 9%; }
.iphone-boton.volumen-2 { left: -3px; top: 32%; height: 9%; }
.iphone-boton.encendido { right: -3px; top: 26%; height: 14%; }
.iphone-chico { display: none; }

/* En el celular: cada función con su propio iPhone, sin el fijo */
@media (max-width: 820px) {
  .recorrido-cuerpo { grid-template-columns: 1fr; gap: 0; }
  .recorrido-fijo { display: none; }
  .recorrido-paso { min-height: 0; padding: 28px 0; align-items: center; text-align: center; opacity: 1; transform: none; }
  .recorrido-paso h3 { font-size: 27px; }
  .recorrido-paso p { font-size: 17px; }
  .iphone-chico { display: block; width: 230px; margin-bottom: 14px; padding: 9px; border-radius: 42px; }
  .iphone-chico .iphone-pantalla { border-radius: 34px; }
  .iphone-chico .iphone-estado { height: 36px; font-size: 11px; padding: 0 20px 0 24px; }
  .iphone-chico .iphone-isla { top: 8px; width: 72px; height: 21px; margin-left: -36px; }
  .iphone-chico .iphone-pantalla > img { top: 36px; height: calc(100% - 36px); opacity: 1; transform: none; }
  .cierre-aviso { flex-direction: column; align-items: center; }
  .cierre-aviso .aviso-android { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .recorrido-paso, .iphone-pantalla img { transition: none; }
  .recorrido-paso { opacity: 1; transform: none; }
}

/* La charla animada dentro del iPhone: se dibuja a 390 px de ancho (como un
   teléfono de verdad) y se escala al tamaño de la pantalla del iPhone */
.iphone-pantalla > [data-pantalla] { opacity: 0; transition: opacity 0.5s ease; }
.iphone-pantalla > [data-pantalla].activa { opacity: 1; }
.iphone-app { position: absolute; left: 0; right: 0; top: 46px; bottom: 0; overflow: hidden; background: #fffdfa; }
.iphone-app-escala { width: 390px; height: calc(100% / 0.7128); transform: scale(0.7128); transform-origin: top left; display: flex; flex-direction: column; }
.iphone-app-barra { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 2px solid var(--linea); position: relative; }
.iphone-app-barra::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 6px; background: repeating-linear-gradient(180deg, var(--principal) 0 1.5px, transparent 1.5px 3px); opacity: 0.85; }
.iphone-app-barra img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; box-shadow: 0 0 0 2px var(--linea); background: #fff; }
.iphone-app-barra strong { display: block; font-size: 17px; color: var(--carbon); }
.iphone-app-barra small { color: var(--principal); font-size: 12px; font-weight: 700; }
body.inicio.paso-1:not(.modo-app) .iphone-app .demo-chat { flex: 1; height: auto; padding: 22px 14px 12px; }
.iphone-app .demo-chat .burbuja { font-size: 16px; }
.iphone-app-caja { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px 18px; }
.iphone-app-caja span { flex: 1; padding: 14px 18px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 2px var(--linea); color: var(--gris-claro); font-size: 15px; }
.iphone-app-caja i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--principal); }
.iphone-app-caja svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }

.iphone-app .demo-chat .burbuja { font-size: 18px; }
.iphone-app .demo-chat .traduccion { font-size: 15px; }
.iphone-app .demo-correccion strong { font-size: 17px; }
.iphone-app .demo-correccion span { font-size: 14px; }

/* Las pantallas de la charla dentro de cualquier iPhone se escalan con --escala */
.iphone-app-escala { height: calc(100% / var(--escala, 0.7128)); transform: scale(var(--escala, 0.7128)); }
.iphone-chico .iphone-app { top: 36px; }
.iphone-chico .iphone-app-escala { --escala: 0.5436; }
.recorrido-puntos { display: none; }

/* Pantallas angostas: el recorrido se desliza de lado, una función por tarjeta */
@media (max-width: 820px) {
  .recorrido-cuerpo { display: block; }
  .recorrido-pasos {
    flex-direction: row; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 18px calc((100% - min(300px, 80vw)) / 2) 8px; margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .recorrido-pasos::-webkit-scrollbar { display: none; }
  .recorrido-paso { flex: none; width: min(300px, 80vw); padding: 18px 16px 22px; scroll-snap-align: center; border-radius: 26px; background: var(--blanco); box-shadow: 0 10px 28px rgba(31, 51, 102, 0.08); justify-content: flex-start; }
  .recorrido-paso h3 { font-size: 22px; }
  .recorrido-paso p { font-size: 15px; }
  .recorrido-num { width: 32px; height: 32px; font-size: 16px; }
  .iphone-chico { width: 200px; }
  .iphone-chico .iphone-app-escala { --escala: 0.4667; }
  .recorrido-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .recorrido-puntos button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--linea); transition: width 0.2s ease, background 0.2s ease; }
  .recorrido-puntos button.actual { width: 24px; border-radius: 6px; background: var(--principal); }
}
@media (prefers-reduced-motion: reduce) { .recorrido-pasos { scroll-behavior: auto; } }

/* ============================================================
   Quién hace Palique: una tarjeta corta con su nombre, antes de los precios
   ============================================================ */
.autor { padding-top: 44px; padding-bottom: 44px; }
.autor-tarjeta { display: flex; align-items: flex-start; gap: 20px; max-width: 720px; margin: 0 auto; padding: 26px 30px; border-radius: 22px; background: var(--blanco); box-shadow: 0 10px 28px rgba(31, 51, 102, 0.07); }
.autor-inicial { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--principal); color: #fff; font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 800; }
.autor-frase { margin: 0 0 10px; color: var(--carbon); font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 600; line-height: 1.4; }
.autor-firma { margin: 0; color: var(--gris); font-size: 15px; }
.autor-firma strong { color: var(--carbon); }
@media (max-width: 640px) {
  .autor-tarjeta { flex-direction: column; align-items: center; gap: 14px; padding: 22px 20px; text-align: center; }
  .autor-frase { font-size: 18px; }
}

/* =====================================================================
   Rediseño de octubre de 2026: igual que la app de iPhone.
   Tarjetas blancas con sombra suave y sin borde (el azul es para lo
   principal y el dorado solo para Pro), botones redondeados y planos,
   títulos grandes a la izquierda, los dibujos de Palique en un cuadradito
   de color y las pestañas flotando abajo. Solo en la app (modo-app).
   ===================================================================== */
body.modo-app {
  --principal: #213f86; --principal-claro: #2c4fa0; --principal-borde: #162b5e; --principal-suave: #e6ebf7;
  --boina: #d42a32; --crema: #fcf8f1; --superficie: #f4ede2; --tarjeta: #ffffff;
  --carbon: #383838; --gris: #6f675e; --linea: #e8dfd2; --verde-texto: #3e7700;
  --sombra: 0 3px 10px rgba(60, 40, 10, 0.06), 0 1px 2px rgba(60, 40, 10, 0.04);
}
/* Fuera las rayas marinière bajo la barra: más limpio. */
.modo-app header.barra::after { display: none; }
.modo-app:not(.inicio) #mensajes { padding-top: 16px; }

/* Botones: cápsulas planas; el principal azul con su sombra, el secundario azul suave. */
.modo-app button { border-radius: 999px; }
.modo-app button.primario, .modo-app button.primario:hover:not(:disabled) {
  border: 0; background: var(--principal); color: #fff; text-transform: none; letter-spacing: 0;
  box-shadow: 0 4px 10px rgba(33, 63, 134, 0.25);
}
.modo-app button.primario:active:not(:disabled) { transform: scale(0.97); box-shadow: 0 2px 4px rgba(33, 63, 134, 0.2); }
.modo-app button.contorno { border: 0; background: var(--principal-suave); color: var(--principal); text-transform: none; letter-spacing: 0; box-shadow: none; }
.modo-app button.contorno:active:not(:disabled) { transform: scale(0.97); }

/* El título de cada pestaña: grande, en Fraunces, a la izquierda. */
.modo-app h1.pregunta { width: 100%; margin: 6px 0 2px; font-size: 32px; text-align: left; }

/* --- Hablar: cada tema con su dibujo en un cuadradito de color --- */
.modo-app .temas { grid-template-columns: 1fr 1fr; gap: 12px; }
.modo-app .temas-titulo { color: var(--gris); font-size: 12.5px; letter-spacing: 0.07em; }
.modo-app .temas .opcion, .modo-app .temas-anchas .opcion {
  border: 0; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra);
}
.modo-app .temas .opcion { align-items: flex-start; justify-content: flex-start; min-height: 120px; padding: 14px; text-align: left; font-size: 16px; font-weight: 900; }
.modo-app .temas .opcion:active, .modo-app .temas-anchas .opcion:active { transform: scale(0.97); border-bottom-width: 0; }
.modo-app .temas .opcion.elegida, .modo-app .temas-anchas .opcion.elegida { background: var(--tarjeta); box-shadow: var(--sombra), inset 0 0 0 1.5px rgba(33, 63, 134, 0.55); color: var(--carbon); }
.modo-app .temas .opcion small.ultima, .modo-app .temas-anchas .opcion small.ultima { color: var(--principal); font-weight: 800; }
.modo-app .temas-anchas .opcion { grid-template-columns: 54px 1fr; padding: 14px; font-weight: 900; }
.modo-app .temas-anchas .opcion .dibujo { grid-row: 1 / span 3; }

/* El dibujo: un cuadradito redondeado con el tono del tema. */
.opcion .dibujo { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--tono-dibujo, #e4e9f4); }
.opcion .dibujo img { width: 82%; height: 82%; object-fit: contain; }
.opcion[data-tono="0"] { --tono-dibujo: #fdebd9; } .opcion[data-tono="1"] { --tono-dibujo: #fbe3df; } .opcion[data-tono="2"] { --tono-dibujo: #fbf0d0; }
.opcion[data-tono="3"] { --tono-dibujo: #e8efd9; } .opcion[data-tono="4"] { --tono-dibujo: #f7e4ea; } .opcion[data-tono="5"] { --tono-dibujo: #e4e9f4; }

/* --- Guiadas: el tono de cada una de fondo y el dibujo en un círculo blanco --- */
.modo-app .guiadas-app .opcion:not(.pronto) { box-shadow: none; }
.modo-app .guiadas-app .opcion .dibujo { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); }
.modo-app .guiadas-app .opcion[data-grupo="sigue"] { box-shadow: 0 6px 16px rgba(80, 50, 20, 0.1); }
.modo-app .guiadas-app .opcion[data-grupo="sigue"] .dibujo { width: 64px; height: 64px; }
/* Lo que viene «pronto» no va en tarjetas: una línea al final (la pone app.js). */
.modo-app .guiadas-app .opcion.pronto { display: none !important; }
.modo-app .linea-pronto { grid-column: 1 / -1; order: 40; margin: 10px 4px 0; color: var(--gris); font-size: 14px; font-weight: 800; }
.modo-app .linea-pronto::before { content: '📅 '; }
.modo-app #niveles-guion button { border: 0; border-radius: 12px; background: var(--superficie); color: var(--gris); box-shadow: none; }
.modo-app #niveles-guion button.elegida { background: var(--principal); color: #fff; }

/* --- Inicio --- */
.modo-app .ia-globo, .modo-app .ia-globo::before { background: var(--tarjeta); }
.modo-app .ia-globo { box-shadow: var(--sombra); }
.modo-app .ia-paso { border-radius: 24px; box-shadow: 0 8px 20px rgba(33, 63, 134, 0.25); }
.modo-app .ia-paso::before { display: none; }
.modo-app .ia-paso button.primario { background: #fff; color: var(--principal); box-shadow: none; }
.modo-app .ia-paso .ia-otra { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 0; background: none; color: rgba(255, 255, 255, 0.9); font-size: 14px; font-weight: 800; text-transform: none; letter-spacing: 0; box-shadow: none; }
.modo-app .ia-paso-cara { display: flex; align-items: center; gap: 14px; }
.modo-app .ia-paso-cara img { width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.9); background: #fff; object-fit: cover; }
.modo-app .ia-lista, .modo-app .ia-frase, .modo-app .ia-cuenta-boton, .modo-app .inicio-app .ia-frase, .modo-app .inicio-app .ia-cuenta-boton {
  border: 0; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra);
}
.modo-app .inicio-app .ia-opcion + .ia-opcion { border-top: 1px solid var(--linea); }
.modo-app .ia-icono, .modo-app .inicio-app .ia-icono { background: var(--superficie); }

/* Tu racha: el número grande con la llama y siete círculos, uno por día. */
.modo-app .ia-resumen { padding: 16px; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); }
.ia-resumen-arriba { display: flex; align-items: center; gap: 10px; }
.ia-resumen-arriba .ia-llama svg { width: 28px; height: 28px; }
.ia-resumen-numero { display: flex; flex-direction: column; line-height: 1; }
.ia-resumen-numero b { color: var(--carbon); font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 800; }
.ia-resumen-numero span { margin-top: 3px; color: var(--gris); font-size: 12px; font-weight: 800; }
.ia-resumen-hoy { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--carbon); font-size: 14px; font-weight: 800; }
.ia-resumen.cumplida .ia-resumen-hoy { color: var(--verde-texto); }
.ia-resumen-hoy i { display: block; width: 96px; height: 6px; border-radius: 3px; background: var(--superficie); overflow: hidden; }
.ia-resumen-hoy i b { display: block; height: 100%; border-radius: 3px; background: var(--principal); transition: width 0.8s ease-out; }
.ia-resumen.cumplida .ia-resumen-hoy i b { background: var(--verde-texto); }
.ia-dias { display: flex; justify-content: space-between; margin-top: 16px; }
.ia-dia { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 34px; color: var(--gris); font-size: 11px; font-weight: 800; }
.ia-dia i { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--superficie); color: #fff; font-size: 13px; font-style: normal; font-weight: 900; }
.ia-dia.hoy { color: var(--principal); font-weight: 900; }
.ia-dia.hoy i { box-shadow: inset 0 0 0 1.5px rgba(33, 63, 134, 0.5); }
.ia-dia.lleno i { background: var(--principal); box-shadow: none; }
.ia-dia.algo i { background: conic-gradient(var(--principal) calc(var(--parte) * 1%), var(--superficie) 0); }
.ia-dia.algo i::after { content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--superficie); }

/* --- Repasar y Perfil (ventanas como pestaña) --- */
.modo-app dialog.pagina-app .frecuente, .modo-app .perfil .ia-opcion, .modo-app .perfil-aviso, .modo-app .logros-tarjeta {
  border: 0; border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra);
}
.modo-app dialog.pagina-app h2 { font-size: 32px; text-align: left; }

/* --- El chat --- */
.modo-app .mensaje.lea .burbuja { border: 0; background: var(--tarjeta); box-shadow: var(--sombra); }
.modo-app .compositor { box-shadow: 0 -1px 0 var(--linea); }

/* --- Las pestañas: una cápsula flotante, como en el iPhone --- */
.modo-app .pestanas-app {
  left: 12px; right: 12px; bottom: max(10px, var(--abajo)); max-width: 520px; margin: 0 auto; padding: 6px;
  border: 0; border-radius: 999px; background: rgba(255, 253, 249, 0.86);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 8px 24px rgba(60, 40, 10, 0.14), 0 0 0 1px rgba(60, 40, 10, 0.05);
}
.modo-app .pestanas-app button { border-radius: 999px; color: var(--carbon); }
.modo-app .pestanas-app button[aria-current="page"], .modo-app[data-vista="modo"] .pestanas-app [data-pestana="modo"],
.modo-app[data-vista="libre"] .pestanas-app [data-pestana="libre"], .modo-app[data-vista="guion"] .pestanas-app [data-pestana="guion"] {
  background: rgba(33, 63, 134, 0.08); color: var(--principal);
}
.modo-app .pestanas-app button::before { display: none; }

/* En la computadora, la app va en una columna centrada, como un teléfono grande. */
@media (min-width: 700px) {
  .modo-app #chat .columna, .modo-app #bienvenida { max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* El dibujo siempre a la izquierda, también en las tarjetas anchas y en «Sigue aquí». */
.modo-app .temas-anchas .opcion > .dibujo, .modo-app .guiadas-app .opcion[data-grupo="sigue"] > .dibujo {
  grid-column: 1 !important; grid-row: 1 / span 3; padding: 0 !important; font-size: inherit;
}
/* Tu racha: sin los bordes de antes. */
.modo-app .ia-resumen { display: block; width: 100%; border: 0; text-align: left; text-transform: none; letter-spacing: 0; font-weight: 800; }
.modo-app .ia-resumen:active:not(:disabled) { transform: scale(0.98); border-bottom-width: 0; }
.modo-app .ia-resumen .ia-racha { min-width: 0; padding: 0; border: 0; background: none; }
/* La pestaña abierta (Errores o Perfil) se marca, y Inicio no. */
body.modo-app[data-pestana-abierta] .pestanas-app [data-pestana] { background: none; color: var(--carbon); }
body.modo-app[data-pestana-abierta="errores"] .pestanas-app [data-pestana="errores"],
body.modo-app[data-pestana-abierta="perfil"] .pestanas-app [data-pestana="perfil"] { background: rgba(33, 63, 134, 0.08); color: var(--principal); }
body.modo-app .pestanas-app [data-pestana]::after { display: none !important; }
/* Las guiadas conservan su tono de fondo (el #guiones también es .temas). */
.modo-app .temas.guiadas-app .opcion:not(.pronto) { align-items: center; text-align: center; min-height: 0; background: var(--tinte); box-shadow: none; font-weight: 900; }
.modo-app .temas.guiadas-app .opcion[data-grupo="sigue"] { text-align: left; box-shadow: 0 6px 16px rgba(80, 50, 20, 0.1); }
/* Más formas de practicar: cada una en su tarjeta blanca. */
.modo-app .ia-lista { gap: 10px; padding: 0; background: none; box-shadow: none; }
.modo-app .inicio-app .ia-opcion { border-radius: 20px !important; background: var(--tarjeta) !important; box-shadow: var(--sombra) !important; }
.modo-app .inicio-app .ia-opcion + .ia-opcion { border-top: 0; }
/* Perfil: tus números en tarjetas blancas, como en el iPhone. */
.modo-app .logro { background: var(--tarjeta); box-shadow: var(--sombra); }
/* El chat: la burbuja de Léa blanca con sombra suave; la tuya, durazno. */
.modo-app .mensaje.ia .burbuja { background: var(--tarjeta); box-shadow: var(--sombra); }
.modo-app .mensaje.alumno .burbuja { background: #fde6cc; }

/* Portada: las tiendas (todavía «muy pronto»). */
.tiendas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tiendas .insignia-play { padding: 8px 14px 8px 12px; border-radius: 12px; background: #1f1f1f; opacity: 0.92; }
.tiendas .insignia-play span { font-size: 16px; }
.cierre-aviso .tiendas { margin-top: 0; }
/* Ajustes, Pro y la bienvenida: tarjetas blancas con sombra, sin bordes. */
.modo-app .aj-grupo { box-shadow: var(--sombra); background: var(--tarjeta); }
.modo-app .pro-razon, .modo-app .pro-plan { border: 0; background: var(--tarjeta); box-shadow: var(--sombra); }
.modo-app .pro-plan.destacado { background: #fff6d9; }
.modo-app .bv-pie button.contorno { background: var(--principal-suave); }
/* Portada: los teléfonos de muestra con el diseño de ahora (como el iPhone). */
.iphone-app { background: #fcf8f1; }
.iphone-app-barra { border-bottom: 1px solid #e8dfd2; }
.iphone-app-barra::after { display: none; }
.iphone-app-barra small { color: #3e7700; }
.iphone-app .demo-chat .mensaje.ia .burbuja { border: 0; border-radius: 20px; border-top-left-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgba(60, 40, 10, 0.06), 0 1px 2px rgba(60, 40, 10, 0.04); }
.iphone-app .demo-chat .mensaje.alumno .burbuja { border: 0; border-radius: 20px; border-top-right-radius: 6px; background: #fde6cc; }
.iphone-app-caja span { box-shadow: 0 0 0 1px #e8dfd2; }
.iphone-app-caja i { box-shadow: 0 4px 10px rgba(33, 63, 134, 0.25); }

/* Portada: el titular nuevo. */
.lema .lema-idioma { font-weight: inherit; }
/* Portada: «Aquí no estudias. Practicas.» */
.comparacion { text-align: center; }
.comparacion h2 span { color: var(--boina, #d42a32); }
.comparacion-tabla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 28px auto 0; text-align: left; }
.comparacion-col { padding: 24px; border-radius: 24px; }
.comparacion-col h3 { margin: 0 0 14px; font-family: 'Fraunces', Georgia, serif; font-size: 22px; }
.comparacion-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.comparacion-col li { display: flex; align-items: center; gap: 12px; font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.comparacion-col li b { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 20px; }
.comparacion-col.otras { background: #efe7da; color: #8a8178; }
.comparacion-col.otras h3 { color: #8a8178; }
.comparacion-col.otras li b { background: rgba(255, 255, 255, 0.6); filter: grayscale(1); opacity: 0.75; }
.comparacion-col.palique { background: #fff; color: var(--carbon); box-shadow: 0 10px 30px rgba(33, 63, 134, 0.14), inset 0 0 0 2px #213f86; }
.comparacion-col.palique h3 { color: #d42a32; }
.comparacion-col.palique li b { background: #e6ebf7; }
.comparacion-col.palique strong { color: #213f86; }
@media (max-width: 700px) { .comparacion-tabla { grid-template-columns: 1fr; } }

/* Portada: los antetítulos de «Lo que nos hace distintos» y «Cómo funciona», más grandes. */
body:not(.modo-app) .comparacion .antetitulo, body:not(.modo-app) .recorrido .antetitulo { font-size: 20px; letter-spacing: 0.02em; }
@media (max-width: 820px) { body:not(.modo-app) .comparacion .antetitulo, body:not(.modo-app) .recorrido .antetitulo { font-size: 17px; } }

/* =====================================================================
   App de la web = app del iPhone: logros en el Inicio y Perfil nuevo.
   ===================================================================== */
.modo-app .ia-logros { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px; border: 0; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); text-align: left; text-transform: none; letter-spacing: 0; }
.modo-app .ia-logros:active:not(:disabled) { transform: scale(0.98); border-bottom-width: 0; }
.ia-logros-arriba { display: flex; align-items: center; gap: 8px; color: var(--carbon); font-size: 15px; }
.ia-logros-arriba strong { flex: 1; font-weight: 900; }
.ia-logros-trofeo svg { width: 18px; height: 18px; fill: #e0a400; stroke: #c98a00; }
.ia-logros-trofeo { background: none !important; width: auto; height: auto; }
.ia-logros-cuenta { color: #916300; font-size: 13px; font-weight: 900; }
.ia-logros-barra { display: block; height: 8px; border-radius: 4px; background: var(--superficie); overflow: hidden; }
.ia-logros-barra b { display: block; height: 100%; border-radius: 4px; background: #ffc533; transition: width 0.8s ease-out; }
.ia-logros-abajo { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ia-logros-vacio { color: var(--gris); font-size: 13px; font-weight: 700; }
.ia-logros-mas { color: #916300; font-size: 13px; font-weight: 900; }
.ia-logros-ver { margin-left: auto; color: var(--principal); font-size: 13px; font-weight: 800; }
.medalla { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd866, #ffc533 55%, #e0a400); box-shadow: 0 2px 4px rgba(255, 197, 51, 0.35), inset 0 0 0 2px rgba(201, 138, 0, 0.55); color: #4a3200; }
.medalla .medalla-icono { width: auto; height: auto; background: none !important; }
.medalla .medalla-icono svg { width: 11px; height: 11px; stroke: #4a3200; }
.medalla b { font-size: 10px; font-weight: 900; line-height: 1; }

/* Perfil: tu inicial, tu nombre, lo que aprendes y tu plan. */
.modo-app .perfil-quien { display: flex; align-items: center; gap: 14px; padding: 4px 0 8px; border: 0; background: none; box-shadow: none; }
.modo-app .perfil-quien img, .perfil-inicial { flex: none; width: 64px; height: 64px; border-radius: 50%; }
.perfil-inicial { display: grid; place-items: center; background: var(--principal); color: #fff; font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 800; }
.perfil-inicial:empty::before { content: ''; width: 26px; height: 26px; background: #fff; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6z"/></svg>') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6z"/></svg>') center / contain no-repeat; }
.modo-app .perfil-quien > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.modo-app .perfil-quien strong { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 800; color: var(--carbon); }
.modo-app .perfil-quien span:not(.perfil-plan):not(.perfil-inicial) { color: var(--gris); font-size: 14px; font-weight: 800; }
.modo-app .perfil-aviso { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; }
.modo-app .perfil-aviso strong { font-size: 16px; font-weight: 900; color: var(--carbon); }
.modo-app .perfil-aviso span { color: var(--gris); font-size: 14px; }
.modo-app .perfil-google { margin-top: 4px; padding: 12px; border: 1px solid #747775; border-radius: 999px; background: #fff; color: #1f1f1f; font-family: 'Roboto', var(--fuente); font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0; box-shadow: none; }
.modo-app .perfil-google::before { content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px;
  background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); mask: radial-gradient(circle, transparent 38%, #000 40%); }
.perfil-numeros { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: var(--tarjeta, #fff); box-shadow: var(--sombra); }
.perfil-numeros-cabeza { display: flex; justify-content: space-between; color: var(--gris); font-size: 12px; font-weight: 900; letter-spacing: 0.06em; }
.perfil-numeros-ver { color: var(--principal); letter-spacing: 0; font-size: 13px; }
.perfil-numeros-fila { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.perfil-numeros-fila b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 800; color: var(--carbon); }
.perfil-numeros-fila span { color: var(--gris); font-size: 12px; font-weight: 800; }
.perfil-medallas { display: flex; gap: 8px; }
.medalla .medalla-icono svg { fill: none !important; stroke: #4a3200 !important; stroke-width: 2.4; }

/* El logo: la boina de Léa puesta en la P de «Palique». La P se corta por el borde
   curvo de la boina (img/boina_mascara.png), así parece que entra en ella. */
.marca, .bv-marca { position: relative; display: inline-block; line-height: 1; }
.bv-marca { display: block; width: fit-content; margin-inline: auto; }
.marca-p {
  display: inline-block;
  -webkit-mask: url('img/boina_mascara.png') no-repeat; mask: url('img/boina_mascara.png') no-repeat;
  -webkit-mask-size: 2.16em auto; mask-size: 2.16em auto;
  -webkit-mask-position: -0.8em 0.101em; mask-position: -0.8em 0.101em;
}
.marca::before, .bv-marca::before {
  content: ''; position: absolute; left: -0.08em; top: 0.101em; width: 0.72em; height: 0.444em;
  background: url('img/boina_lea.png') 0 0 / 100% 100% no-repeat; pointer-events: none;
}

/* Al empezar cada conversación: «Léa es una inteligencia artificial…» */
.aviso-ia { margin: 4px auto 14px; max-width: 34em; text-align: center; color: var(--gris); font-size: 13px; font-weight: 700; line-height: 1.4; }

/* «Léa es una IA…»: en chico, bajo el texto de la portada. */
.nota-ia { margin: -8px 0 22px; color: var(--gris); font-size: 14px; font-weight: 700; }
@media (max-width: 820px) { .nota-ia { text-align: center; } }

/* Repasar: cómo va cada error en el repaso espaciado (5 puntitos, uno por caja). */
.repaso-avance { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--gris); font-size: 13px; font-weight: 700; }
.repaso-puntos { display: inline-flex; gap: 3px; }
.repaso-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--linea); }
.repaso-puntos i.lleno { background: var(--verde-texto); }

/* El permiso para usar la IA (pedirPermisoIA en app.js). */
dialog.permiso-ia { max-width: 460px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; border: none; border-radius: 24px; padding: 24px 22px 20px; background: var(--blanco); color: var(--carbon); box-shadow: 0 20px 60px rgba(31, 51, 102, 0.25); }
dialog.permiso-ia::backdrop { background: rgba(20, 28, 48, 0.45); }
dialog.permiso-ia h2 { margin: 0 0 8px; }
dialog.permiso-ia ul { margin: 10px 0 12px; padding-left: 20px; line-height: 1.4; font-size: 15px; }
dialog.permiso-ia li { margin-bottom: 8px; }
.permiso-ia-nota { color: var(--rojo, #ff4b4b); font-weight: 700; min-height: 0; }
.permiso-ia-botones { position: sticky; bottom: -20px; display: flex; gap: 10px; justify-content: flex-end; margin: 12px -22px -20px; padding: 12px 22px 20px; background: var(--blanco); }
.permiso-ia-botones button { flex: 1; }
.aj-privacidad #btn-permiso-ia { margin-top: 6px; }

/* "Descargar mis datos" en la ventana de la cuenta: un enlace con aspecto de botón de texto. */
.boton-enlace { display: block; margin: 10px 0 0; text-align: center; font-weight: 800; color: var(--principal); text-decoration: underline; }

/* ===========================================================================
   El camino al siguiente nivel y la prueba de nivel (como en el iPhone)
   =========================================================================== */
.ia-camino { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px; border: 0; border-radius: 20px;
  background: var(--tarjeta, #fff); box-shadow: var(--sombra); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; }
.ia-camino:active:not(:disabled) { transform: scale(0.98); border-bottom-width: 0; }
.ia-camino-arriba { display: flex; align-items: center; gap: 8px; }
.ia-camino-arriba strong { flex: 1; color: var(--carbon); font-size: 15px; font-weight: 900; }
.ia-camino.listo .ia-camino-arriba strong { color: #3e7700; }
.ia-camino-icono { font-size: 15px; }
.ia-camino-cifra { color: var(--gris); font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ia-camino .ia-flecha { color: var(--gris-claro); font-size: 20px; line-height: 1; }
.ia-camino-barra { display: block; height: 6px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.ia-camino-barra b { display: block; height: 100%; border-radius: inherit; background: var(--principal); transition: width 0.8s ease-out 0.3s; }
.ia-camino.listo .ia-camino-barra b, .camino-senal.lista .ia-camino-barra b { background: #3e7700; }
@media (prefers-reduced-motion: reduce) { .ia-camino-barra b { transition: none; } }

dialog.camino .camino-intro { margin: -4px 0 16px; color: var(--gris); font-size: 16px; }
.camino-senales { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.camino-senal, .camino-criterio { display: flex; gap: 14px; padding: 16px; border-radius: 20px; background: var(--tarjeta, #fff); box-shadow: var(--sombra); }
.camino-criterio { flex-direction: column; gap: 6px; }
.camino-senal-icono { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--principal-suave); font-size: 18px; }
.camino-senal.lista .camino-senal-icono { background: #3e7700; color: #fff; font-weight: 900; }
.camino-senal-textos { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.camino-senal-arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.camino-senal-arriba strong { color: var(--carbon); font-size: 16px; font-weight: 900; }
.camino-senal-valor { color: var(--principal); font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.camino-senal.lista .camino-senal-valor { color: #3e7700; }
.camino-senal p.nota, .camino-criterio p.nota { margin: 0; }
.camino-botones { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
.camino-botones .primario { width: 100%; max-width: 420px; }
.camino-espera { color: var(--principal); font-weight: 800; }
.camino-pose { display: block; height: 150px; margin: 6px auto 0; }
.camino-bolitas { display: inline-flex; align-items: center; gap: 4px; }
.camino-bolitas i { width: 10px; height: 10px; border-radius: 50%; background: var(--linea); }
.camino-bolitas i.llena { background: var(--principal); }
.camino-bolitas b { margin-left: 6px; color: var(--principal); font-size: 14px; font-variant-numeric: tabular-nums; }
.camino-criterio.cero .camino-bolitas b { color: #c0392b; }

/* Arriba del chat en la prueba: "Prueba de A2 · Tarea 2 de 4" */
.cartel-examen { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  width: min(var(--ancho, 720px), 100%); margin: 0 auto 8px; padding: 10px 16px; border-radius: 16px;
  background: var(--principal-suave); color: var(--principal); font-size: 14px; }
.cartel-examen strong { font-weight: 900; }
.cartel-examen-tarea { margin-left: auto; font-weight: 800; }
.cartel-examen-puntos { display: inline-flex; gap: 4px; }
.cartel-examen-puntos i { width: 14px; height: 5px; border-radius: 999px; background: var(--linea); }
.cartel-examen-puntos i.ahora { background: var(--principal); }
.cartel-examen-puntos i.hecha { background: #3e7700; }
.cartel-examen .primario { flex-basis: 100%; }

/* ===========================================================================
   La versión web en la computadora: pestañas a la izquierda, contenido ancho
   =========================================================================== */
@media (min-width: 1000px) {
  /* Las pestañas: una barra a la izquierda en vez de abajo. */
  .modo-app .pestanas-app {
    top: 84px; bottom: auto; left: 24px; right: auto; width: 210px; max-width: none; margin: 0;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 10px; border-radius: 24px;
    background: var(--tarjeta, #fff); box-shadow: var(--sombra);
  }
  .modo-app .pestanas-app button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 14px; font-size: 15px; border-radius: 16px; }
  .modo-app .pestanas-app button svg { width: 24px; height: 24px; }
  .modo-app .pestanas-app button::after { display: none !important; }
  .modo-app[data-vista="modo"]:not([data-pestana-abierta]) .pestanas-app [data-pestana="modo"],
  .modo-app[data-vista="libre"]:not([data-pestana-abierta]) .pestanas-app [data-pestana="libre"],
  .modo-app[data-vista="guion"]:not([data-pestana-abierta]) .pestanas-app [data-pestana="guion"],
  body.modo-app[data-pestana-abierta="errores"] .pestanas-app [data-pestana="errores"],
  body.modo-app[data-pestana-abierta="perfil"] .pestanas-app [data-pestana="perfil"] { background: var(--principal-suave); color: var(--principal); }

  /* El contenido de las pestañas, a la derecha de la barra y más ancho. */
  body.modo-app.inicio.paso-2 #chat { padding-left: 258px; padding-right: 24px; }
  .modo-app.inicio.paso-2 #chat .columna, .modo-app.inicio.paso-2 #bienvenida { max-width: 1060px; }
  body.modo-app.inicio.paso-2 #bienvenida { align-items: stretch; padding-bottom: 40px; }
  body.modo-app.inicio.paso-2 #pregunta { text-align: left; font-size: 34px; }

  /* Inicio: dos columnas. A la izquierda Léa y tu siguiente paso; a la derecha tu racha, el camino y tus logros. */
  .modo-app #inicio-app { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 18px 24px; }
  .modo-app #inicio-app > .ia-lea { grid-column: 1; grid-row: 1; }
  .modo-app #inicio-app > .ia-paso { grid-column: 1; grid-row: 2 / span 3; align-self: start; }
  .modo-app #inicio-app > .ia-resumen { grid-column: 2; grid-row: 1; }
  .modo-app #inicio-app > .ia-camino { grid-column: 2; grid-row: 2; }
  .modo-app #inicio-app > .ia-logros { grid-column: 2; }
  .modo-app #inicio-app > :not(.ia-lea):not(.ia-paso):not(.ia-resumen):not(.ia-camino):not(.ia-logros) { grid-column: 1 / -1; }

  /* Hablar y Guiadas: las tarjetas en 3 o 4 columnas. */
  .modo-app #temas .temas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .modo-app #temas .temas-anchas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .modo-app #guiones.guiadas-app { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .modo-app #guiones.guiadas-app .grupo-guiadas,
  .modo-app #guiones.guiadas-app .opcion[data-grupo="sigue"] { grid-column: 1 / -1; }
  .modo-app #niveles-guion { justify-content: flex-start; }

  /* Repasar y Perfil (y las demás páginas): al lado de la barra, con un ancho cómodo para leer. */
  .modo-app dialog.pagina-app { padding-left: max(20px, calc((100vw - 760px) / 2)); padding-right: max(20px, calc((100vw - 760px) / 2)); }
  .modo-app dialog.pagina-app.como-pestana { padding-left: max(258px, calc((100vw - 820px) / 2 + 130px)); padding-right: max(24px, calc((100vw - 820px) / 2 - 130px)); padding-bottom: 48px; }
  .modo-app dialog.pagina-app button.cerrar-x { left: max(20px, calc((100vw - 760px) / 2 - 64px)); }

  /* El chat: la conversación en el centro y "Esta sesión" a la derecha (ya existe); un poco más de aire. */
  .modo-app #chat .mensajes { max-width: 760px; }
}

/* La versión web, dicha y con lo que la app tiene además. */
.aviso-version-web { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 18px;
  background: var(--tarjeta, #fff); box-shadow: var(--sombra); color: var(--gris); font-size: 14px; text-align: left; }
.aviso-version-web strong { color: var(--carbon); }
.aviso-version-web .chapa-web { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--principal-suave); color: var(--principal); font-size: 12px; font-weight: 900; }
/* En la prueba de nivel no hay ayudas (como en el iPhone). */
body.en-examen #btn-ayuda, body.en-examen #btn-sugerir, body.en-examen .arranques { display: none !important; }