/* INGLES — estilo NEUMÓRFICO MATE, tema CIAN (dirección de Dosa, 2026-08-25).
   Receta de sombras MEDIDA del pen de referencia (myacode/PoqQQNM): lienzo
   #E4EBF5, sombra oscura SÓLIDA #c8d0e7 con offsets cortos y blur apretado,
   luz blanca asimétrica; hundido (inset) = estado activo. Sin bordes: la
   separación la hace la luz. Los lavados blancos anchos están PROHIBIDOS
   (se leen como brillo; el aspecto es mate).
   Tipografía: Nunito (la gemela libre de Nista, la fuente de Busuu).
   Animaciones STICKY: resorte con rebote, aplastar al presionar, nada de
   desvanecidos como protagonista.
   El tema vive en los tokens --a-*: cambiar de color = cambiar 4 líneas. */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  /* lienzo y tinta */
  --lienzo: #E4EBF5;
  --oscura: #c8d0e7;
  --luz: #ffffff;
  --tinta: #2d3752;
  --tinta-2: #66738f;
  --tinta-3: #9baacf;

  /* tema CIAN (a futuro puede cambiar: solo estas líneas) */
  --a-claro: #3ad8f0;
  --a-medio: #21a3e8;
  --a-oscuro: #1266cc;
  --grad: linear-gradient(330deg, var(--a-oscuro) 0%, var(--a-medio) 50%, var(--a-claro) 100%);
  --a-texto: #1266cc;

  /* el rojo del error, discreto y mate */
  --mal: #d6336c;
  --mal-claro: #f06595;
  --grad-mal: linear-gradient(330deg, #b02a5c 0%, var(--mal) 55%, var(--mal-claro) 100%);

  /* el molde */
  --relieve: .3rem .3rem .6rem var(--oscura), -.2rem -.2rem .5rem var(--luz);
  --relieve-grande: .8rem .8rem 1.4rem var(--oscura), -.2rem -.2rem 1.8rem var(--luz);
  --hundido: inset .2rem .2rem .5rem var(--oscura), inset -.2rem -.2rem .5rem var(--luz);
  --hundido-suave: inset .12rem .12rem .3rem var(--oscura), inset -.12rem -.12rem .3rem var(--luz);

  --r: 1.25rem;
  --r-chip: 999px;
  --marco: 10px;
  --gut: clamp(16px, 3.4vw, 40px);
  --maxw: 760px;

  /* resortes sticky */
  --dur: .22s;
  --spring: cubic-bezier(.3, 1.45, .45, 1);
  --spring-fuerte: cubic-bezier(.3, 1.7, .4, 1);

  --font: 'Nunito', system-ui, sans-serif;
  --mono: 'Nunito', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { overflow-x: hidden; }
html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100%;
  background: var(--lienzo);
  color: var(--tinta);
  font: 600 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
/* Hueco para las piezas FIJAS de abajo, como VARIABLE: el shorthand `padding`
   de main (mas abajo) pisaba cualquier padding-bottom suelto puesto aqui. */
:root { --pie-hueco: 132px; }
body.en-leccion { --pie-hueco: 150px; }
body.con-pie { --pie-hueco: 160px; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, textarea { font: inherit; color: var(--tinta); }
::selection { background: var(--a-medio); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: var(--oscura) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--oscura); border-radius: 999px; border: 3px solid var(--lienzo); }
*::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }

/* ---- entrada sticky de cada vista: pop con rebote, no desvanecido ---- */
main.vista-entra > *:not(.pie-accion) { animation: vista-pop .34s var(--spring-fuerte) backwards; }
@keyframes vista-pop {
  from { transform: scale(.955) translateY(12px); }
  to { transform: none; }
}

body.en-leccion .tabs { display: none; }

/* ---- barra superior ---- */
.barra {
  position: sticky; top: var(--marco); z-index: 33;   /* siempre sobre el menú */
  max-width: var(--maxw); margin: var(--marco) auto 0;
  width: calc(100% - var(--gut) * 2);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 10px;
  background: var(--lienzo);
  border-radius: var(--r-chip);
  box-shadow: var(--relieve);
}
.marca { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.marca-en {
  height: 30px; width: auto; display: block;
  filter: drop-shadow(.12rem .12rem .25rem var(--oscura));
  transition: transform var(--dur) var(--spring-fuerte);
}
.marca:hover .marca-en { transform: rotate(-8deg) scale(1.06); }
/* El nombre ya no es texto: es el logotipo. Los 17px de alto lo dejan del
   mismo peso optico que tenia el texto de 14.5px en negrita que habia aqui. */
.marca-texto { height: 17px; width: auto; display: block; }

.barra-datos { display: flex; align-items: center; gap: 8px; }
.dato {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-chip);
  box-shadow: var(--hundido-suave);
  font-weight: 800; font-size: 13px; color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.dato svg { width: 15px; height: 15px; stroke: var(--a-medio); }
.dato.encendido { color: var(--a-texto); }

.boton-icono {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-chip);
  box-shadow: var(--relieve);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring);
}

/* Botón de menú: tres barras que se pliegan en X y el botón se hunde. */
.btn-menu {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-chip);
  background: var(--lienzo); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--relieve);
  transition: box-shadow .5s cubic-bezier(.79, .21, .06, .81), transform var(--dur) var(--spring);
}
/* Todo en enteros: con 2,5px de alto y 2,5px de margen las tres barras caian
   en posiciones fraccionarias y el navegador redondeaba cada una distinto —
   la del medio se veia mas fina. */
.btn-menu i {
  display: block; width: 18px; height: 2px; border-radius: 2px; margin: 2px 0;
  background: var(--grad);
  box-shadow: 0 0 8px rgba(33, 163, 232, .38);
  transition: margin .4s cubic-bezier(.79, .21, .06, .81), transform .4s cubic-bezier(.79, .21, .06, .81);
}
.btn-menu:hover { transform: translateY(-2px); }
.btn-menu:active { transform: scale(.94); }
.btn-menu.abierto { box-shadow: var(--hundido); transform: none; }
.btn-menu.abierto i { margin: -1px; }
.btn-menu.abierto i:nth-child(1) { transform: rotate(-45deg); }
.btn-menu.abierto i:nth-child(2) { transform: scale(0); }
.btn-menu.abierto i:nth-child(3) { transform: rotate(45deg); }
.boton-icono svg { width: 17px; height: 17px; stroke: var(--tinta-2); }
.boton-icono:hover { transform: translateY(-2px); }
.boton-icono:active { box-shadow: var(--hundido); transform: scale(.94); }

/* ---- contenido ---- */
main { max-width: var(--maxw); margin: 0 auto; padding: 30px var(--gut) var(--pie-hueco); }

h1 { font-weight: 900; font-size: clamp(27px, 5.2vw, 36px); line-height: 1.12; letter-spacing: -.02em; margin-bottom: 8px; }
h2 { font-weight: 900; font-size: 19px; margin: 28px 0 12px; }
.gris { color: var(--tinta-2); }
.chica { font-size: 13.5px; }
.entradilla { color: var(--tinta-2); font-weight: 600; font-size: 16px; max-width: 56ch; }
.etiqueta {
  font-weight: 800; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); display: block; margin-bottom: 10px;
}

/* ---- portada: objetivo del día ---- */
.meta-dia {
  display: flex; align-items: center; gap: 18px;
  background: var(--lienzo); border-radius: var(--r);
  box-shadow: var(--relieve-grande);
  padding: 18px 20px; margin: 20px 0 6px;
}
.anillo-meta { position: relative; width: 92px; height: 92px; flex: none; border-radius: 50%; box-shadow: var(--hundido); }
.anillo-meta svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.anillo-meta .valor { stroke: url(#grad-anillo); stroke-width: 8; stroke-linecap: round; fill: none; transition: stroke-dasharray .7s var(--spring); }
.anillo-centro {
  position: absolute; inset: 12px; border-radius: 50%;
  background: var(--lienzo); box-shadow: var(--relieve);
  display: grid; place-items: center; text-align: center;
  font-weight: 900; font-size: 17px; line-height: 1;
}
.anillo-centro small { display: block; font-size: 9.5px; color: var(--tinta-2); font-weight: 800; margin-top: 3px; }
.meta-info { min-width: 0; flex: 1; }
.meta-info b { font-weight: 900; font-size: 16.5px; display: block; }
.meta-info > span { color: var(--tinta-2); font-size: 13px; display: block; }
.dias-semana { display: flex; gap: 6px; margin-top: 9px; }
.dia {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 900; color: var(--tinta-3);
  box-shadow: var(--hundido-suave); flex: none;
}
.dia.hecho { background: var(--grad); color: #fff; box-shadow: var(--relieve); }
.dia.hoy { color: var(--a-texto); }

/* ---- lista de unidades ---- */
.unidades { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.unidad {
  position: relative; display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left; padding: 13px 16px;
  background: var(--lienzo); border-radius: var(--r);
  box-shadow: var(--relieve);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring), opacity var(--dur) ease;
}
.unidad:hover:not(.bloqueada) { transform: translateY(-2px); box-shadow: var(--relieve-grande); }
.unidad:active:not(.bloqueada) { box-shadow: var(--hundido); transform: scale(.985); }
.unidad.bloqueada { opacity: .55; cursor: default; box-shadow: var(--hundido-suave); }

.unidad-num {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-weight: 900; font-size: 14px; color: var(--tinta-2);
  box-shadow: var(--hundido-suave);
}
.unidad.actual .unidad-num, .unidad.hecha .unidad-num { background: var(--grad); color: #fff; box-shadow: var(--relieve); }
.unidad.hecha .unidad-num svg { width: 18px; height: 18px; }

.unidad-info { flex: 1; min-width: 0; }
.unidad-titulo { font-weight: 800; font-size: 16.5px; }
.unidad-sub {
  display: block;
  font-size: 13px; color: var(--tinta-2); margin-top: 1px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.unidad-cola { flex: none; display: flex; align-items: center; gap: 10px; }
.anillo { width: 27px; height: 27px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 3; }
.anillo .pista { stroke: var(--oscura); }
.anillo .valor { stroke: var(--a-medio); stroke-linecap: round; }
.nivel {
  font-weight: 900; font-size: 10.5px; letter-spacing: .06em;
  color: var(--tinta-2); padding: 5px 9px; border-radius: var(--r-chip);
  box-shadow: var(--hundido-suave);
}
.unidad-cola svg.candado { width: 15px; height: 15px; stroke: var(--tinta-3); }

/* ---- volver ---- */
.volver {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--tinta-2); font-weight: 700; font-size: 13.5px;
  padding: 8px 14px 8px 10px; border-radius: var(--r-chip); margin-bottom: 18px;
  box-shadow: var(--relieve);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring);
}
.volver:hover { transform: translateY(-2px); }
.volver:active { box-shadow: var(--hundido); transform: scale(.95); }
.volver svg { width: 15px; height: 15px; }

/* ---- camino de nodos ---- */
.camino { margin-top: 22px; }
.nodo {
  position: relative; display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left; padding: 11px 12px; border-radius: var(--r);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring);
}
.nodo:hover:not(:disabled) { box-shadow: var(--relieve); transform: translateY(-2px); }
.nodo:active:not(:disabled) { box-shadow: var(--hundido); transform: scale(.985); }
.nodo:disabled { cursor: default; }
.nodo:disabled .nodo-info { opacity: .55; }
.nodo + .nodo::before {
  content: ""; position: absolute; left: 43px; top: -13px; height: 22px;
  border-left: 4px dotted var(--oscura); border-radius: 4px;
}
.nodo-circulo {
  position: relative; flex: none; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--lienzo); box-shadow: var(--relieve);
  color: var(--tinta-2);
}
.nodo-circulo svg { width: 24px; height: 24px; stroke: currentColor; }
.nodo-circulo img { width: 82%; height: 82%; border-radius: 50%; object-fit: cover; }
.nodo.hecho .nodo-circulo, .nodo.actual .nodo-circulo { background: var(--grad); color: #fff; }
.nodo:disabled .nodo-circulo { box-shadow: var(--hundido); color: var(--tinta-3); }
.nodo-sello {
  position: absolute; right: -4px; bottom: -4px;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--lienzo); box-shadow: var(--relieve);
  color: var(--a-texto);
}
.nodo-sello svg { width: 12px; height: 12px; }
.nodo-sello.candado { color: var(--tinta-3); }
.nodo-info { min-width: 0; flex: 1; }
.nodo-titulo { font-weight: 800; font-size: 16px; display: block; }
.nodo-sub { font-size: 12.5px; color: var(--tinta-2); font-weight: 600; display: block; margin-top: 1px; }
.nodo-extra { margin-left: auto; flex: none; font-weight: 900; font-size: 13.5px; color: var(--a-texto); }

/* ---- lámina ---- */
.ficha {
  background: var(--lienzo); border-radius: var(--r);
  box-shadow: var(--relieve);
  padding: 20px 22px; margin-bottom: 14px;
}

/* ---- vocabulario ---- */
.vocab-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.vocab {
  display: flex; align-items: center; gap: 14px;
  padding: 10px; border-radius: 14px;
  transition: box-shadow var(--dur) ease;
}
.vocab:hover { box-shadow: var(--hundido-suave); }
.vocab-imagen {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; box-shadow: var(--relieve);
}
.vocab-imagen.vacia { display: grid; place-items: center; background: var(--lienzo); }
.vocab-imagen.vacia svg { width: 17px; height: 17px; stroke: var(--tinta-3); }
.vocab-txt { min-width: 0; flex: 1; }
.vocab-en { font-weight: 800; font-size: 16px; }
.vocab-es { color: var(--tinta-2); font-size: 14px; }
.vocab-ej { display: block; font-size: 12.5px; color: var(--tinta-3); font-style: italic; margin-top: 2px; }

.btn-audio {
  /* inline-grid + middle: se centra contra el texto en cualquier tamano de
     letra. Con `grid` a secas y un vertical-align en pixeles caia siempre. */
  flex: none; display: inline-grid; place-items: center; vertical-align: middle;
  width: 36px; height: 36px; border-radius: 50%;
  box-shadow: var(--relieve); color: var(--a-medio);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring);
}
.btn-audio svg { width: 15px; height: 15px; stroke: currentColor; }
/* Junto a texto en linea: subida optica. `middle` alinea con la altura de la
   equis; el ojo alinea con la de las mayusculas, mas alta. */
.enunciado .btn-audio, .hablar-frase .btn-audio,
.veredicto-detalle .btn-audio, .cambio-globo .btn-audio { position: relative; top: -.11em; }
.btn-audio:hover { transform: translateY(-2px); }
.btn-audio:active, .btn-audio.sonando { box-shadow: var(--hundido); transform: scale(.94); }
.btn-audio.sonando { color: var(--a-oscuro); }

/* ---- gramática ---- */
.gram h2 { margin-top: 0; }
.gram p { margin: 10px 0; color: var(--tinta-2); }
.gram .ej { color: var(--a-texto); font-weight: 800; cursor: pointer; }
.gram .ej:hover { text-decoration: underline; text-underline-offset: 3px; }
.gram .ejta { color: var(--tinta-3); font-style: italic; font-weight: 600; }
.gram table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
.gram th, .gram td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 2px solid rgba(200, 208, 231, .5); }
.gram tr:last-child td { border-bottom: 0; }
.gram th { font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.gram .nota {
  border-radius: 14px; box-shadow: var(--hundido-suave);
  padding: 12px 16px; margin: 16px 0; font-size: 14px; color: var(--tinta-2);
}
.gram .nota b { color: var(--tinta); }

/* ---- diálogo ---- */
.dialogo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.linea { display: flex; gap: 10px; max-width: 88%; }
.linea.b { margin-left: auto; flex-direction: row-reverse; }
.linea-quien {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-weight: 900; font-size: 12px;
  box-shadow: var(--hundido-suave); color: var(--tinta-2);
}
.linea.b .linea-quien { background: var(--grad); color: #fff; box-shadow: var(--relieve); }
.globo {
  background: var(--lienzo); box-shadow: var(--relieve);
  border-radius: 16px 16px 16px 6px;
  padding: 10px 14px; cursor: pointer; text-align: left;
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring);
}
.linea.b .globo { border-radius: 16px 16px 6px 16px; }
.globo:hover { transform: translateY(-2px); }
.globo:active, .globo.sonando { box-shadow: var(--hundido); transform: none; }
.globo.sonando { color: var(--a-texto); }
.globo-es { display: block; font-size: 12.5px; color: var(--tinta-2); margin-top: 3px; }

/* ---- corredor ---- */
.ej-cabecera { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.ej-barra { flex: 1; height: 13px; border-radius: 999px; box-shadow: var(--hundido); position: relative; }
.ej-barra > i {
  position: absolute; inset: 3px auto 3px 3px; border-radius: 999px;
  background: var(--grad); min-width: 8px;
  transition: width .45s var(--spring);
}
.ej-contador { font-weight: 900; font-size: 12.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

.consigna {
  font-weight: 800; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 12px;
}
.enunciado { font-weight: 900; font-size: clamp(21px, 4vw, 26px); line-height: 1.22; margin-bottom: 24px; }
.enunciado .btn-audio { margin-right: 12px; width: 40px; height: 40px; }
.enunciado .btn-audio svg { width: 17px; height: 17px; }

.ej-imagen {
  display: block; width: 100%; max-width: 240px; aspect-ratio: 1;
  object-fit: cover; border-radius: var(--r); margin: 0 0 20px;
  box-shadow: var(--relieve);
}

.opciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.opcion {
  position: relative; text-align: left; font-weight: 700; font-size: 16px;
  padding: 15px 18px; border-radius: var(--r);
  background: var(--lienzo); box-shadow: var(--relieve);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring), color var(--dur) ease;
}
.opcion:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--relieve-grande); }
.opcion:active:not(:disabled) { box-shadow: var(--hundido); transform: scale(.985); }
.opcion.ok { box-shadow: var(--hundido); color: var(--a-texto); animation: acierto .45s var(--spring-fuerte); }
.opcion.no { box-shadow: var(--hundido); color: var(--mal); animation: sacudida .3s; }
.opcion:disabled { cursor: default; }
@keyframes acierto { 30% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes sacudida { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.respuesta-texto {
  width: 100%; padding: 15px 18px; border-radius: var(--r);
  background: var(--lienzo); border: 0; outline: none;
  box-shadow: var(--hundido);
  font-weight: 700;
}
.respuesta-texto::placeholder { color: var(--tinta-3); font-weight: 600; }

/* Codigo de acceso y clave de licencia: se leen caracter a caracter, asi que
   van centrados, separados y en una tipografia donde la O y el 0 no se
   parezcan. El alfabeto ya evita los ambiguos, pero de balde no cuesta nada. */
.codigo-acceso {
  text-align: center;
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.codigo-acceso::placeholder { letter-spacing: .18em; text-transform: none; }

.armado {
  min-height: 60px; display: flex; flex-wrap: wrap; gap: 9px; align-content: flex-start;
  border-radius: var(--r); box-shadow: var(--hundido);
  padding: 12px; margin-bottom: 18px;
}
.banco { display: flex; flex-wrap: wrap; gap: 9px; }
.pieza {
  background: var(--lienzo); border-radius: 13px; padding: 9px 15px;
  font-weight: 700; font-size: 15.5px;
  box-shadow: var(--relieve);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring), opacity var(--dur) ease;
}
.pieza:hover { transform: translateY(-2px); }
.pieza:active { box-shadow: var(--hundido); transform: scale(.94); }
.pieza.usada { opacity: .25; pointer-events: none; box-shadow: var(--hundido-suave); }

.parejas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pareja {
  background: var(--lienzo); border-radius: var(--r); padding: 14px 15px;
  font-weight: 700; font-size: 15px;
  box-shadow: var(--relieve);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring), color var(--dur) ease, opacity var(--dur) ease;
}
.pareja:hover { transform: translateY(-2px); }
.pareja.elegida { box-shadow: var(--hundido); color: var(--a-texto); transform: none; }
.pareja.ok { box-shadow: var(--hundido-suave); color: var(--a-texto); opacity: .55; pointer-events: none; }
.pareja.no { animation: sacudida .3s; color: var(--mal); }

.hablar-frase { font-weight: 900; font-size: clamp(22px, 4.2vw, 27px); margin-bottom: 4px; }
.hablar-frase .btn-audio { width: 38px; height: 38px; margin-right: 10px; }
.hablar-fon { color: var(--tinta-2); margin-bottom: 20px; }
.btn-mic {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 16px; border-radius: var(--r);
  background: var(--lienzo); font-weight: 800; font-size: 15.5px;
  box-shadow: var(--relieve); color: var(--a-texto);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring);
}
.btn-mic:hover { transform: translateY(-2px); }
.btn-mic svg { width: 19px; height: 19px; stroke: currentColor; }
.btn-mic.grabando { box-shadow: var(--hundido); color: var(--mal); transform: none; }
.oido { margin-top: 14px; font-size: 15px; color: var(--tinta-2); }
.oido b.ok { color: var(--a-texto); }
.oido b.no { color: var(--mal); }

/* ---- veredicto: sube con resorte pesado ---- */
.veredicto {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
  padding: 0 var(--gut);
  transform: translateY(115%); transition: transform .38s var(--spring-fuerte);
  pointer-events: none;
}
.veredicto.visible { transform: none; }
.veredicto-inner {
  max-width: var(--maxw); margin: 0 auto; pointer-events: auto;
  /* rejilla: cara + texto arriba (el texto respira a lo ancho), acciones abajo.
     Con flex, un "porque" largo estrujaba el texto contra el boton. */
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
  column-gap: 14px; row-gap: 12px;
  padding: 18px 20px 22px;
  border-radius: 1.6rem 1.6rem 0 0;
  background: var(--lienzo);
  box-shadow: 0 -.6rem 1.4rem var(--oscura);
}
.veredicto-acciones {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.veredicto-cara {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  color: #fff;
}
.veredicto.ok .veredicto-cara { background: var(--grad); box-shadow: var(--relieve); }
.veredicto.no .veredicto-cara { background: var(--grad-mal); box-shadow: var(--relieve); }
.veredicto-cara svg { width: 19px; height: 19px; stroke: currentColor; }
.veredicto-texto { flex: 1; min-width: 0; }
.veredicto-titulo { font-weight: 900; font-size: 16.5px; }
.veredicto.ok .veredicto-titulo { color: var(--a-texto); }
.veredicto.no .veredicto-titulo { color: var(--mal); }
.veredicto-detalle { font-size: 13.5px; color: var(--tinta); font-weight: 600; margin-top: 2px; }
.veredicto-detalle .vd-resp { color: var(--tinta-2); }
.veredicto-pista {
  margin-top: 8px; padding: 8px 12px; border-radius: 12px;
  box-shadow: var(--hundido-suave); font-size: 13px; color: var(--tinta-2);
}
.veredicto-detalle .btn-audio { width: 28px; height: 28px; margin-left: 8px; }
.veredicto-detalle .btn-audio svg { width: 12px; height: 12px; }
.vd-pts {
  flex: none; padding: 7px 12px; border-radius: var(--r-chip);
  background: var(--grad); color: #fff; font-weight: 900; font-size: 13px;
  box-shadow: var(--relieve);
  animation: pop-pts .5s var(--spring-fuerte) backwards .12s;
}
@keyframes pop-pts { from { transform: scale(.3); } }

/* ---- botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border-radius: var(--r-chip);
  font-weight: 800; font-size: 15.5px;
  background: var(--lienzo); color: var(--tinta);
  box-shadow: var(--relieve);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring), opacity var(--dur) ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--relieve-grande); }
.btn:active { transform: scale(.965); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: var(--hundido-suave); }
.btn.acento { background: var(--grad); color: #fff; }
.btn.acento:active { box-shadow: inset .2rem .2rem 1rem var(--a-oscuro), inset -.2rem -.2rem 1rem var(--a-claro); }
.btn.mal { background: var(--grad-mal); color: #fff; }
.btn.secundario { color: var(--tinta-2); }
.btn.ancho { width: 100%; }
.btn svg { width: 16px; height: 16px; }
.acciones { display: flex; gap: 12px; margin-top: 22px; }

/* Cuando el veredicto esta arriba, el pie se va: son la misma accion. */
body.con-veredicto .pie-accion { opacity: 0; pointer-events: none; transform: translateY(60%); }
.pie-accion {
  position: fixed; left: 0; right: 0; z-index: 24;
  transition: opacity var(--dur) ease, transform var(--dur) var(--spring);
  bottom: 0;
  padding: 14px var(--gut) calc(14px + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  /* velo del propio lienzo: el contenido no se ve "por debajo" del boton */
  background: linear-gradient(to top, var(--lienzo) 62%, rgba(228, 235, 245, 0));
}
.pie-accion .btn { max-width: var(--maxw); width: 100%; padding: 17px 26px; font-size: 16px; }

/* ---- cifras ---- */
.tarjetas-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 22px 0; }
.stat { padding: 16px 18px; border-radius: var(--r); box-shadow: var(--hundido); }
.stat-num { font-weight: 900; font-size: 27px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-nombre { font-size: 12px; color: var(--tinta-2); font-weight: 700; margin-top: 3px; }
.stat-num.oro, .stat-num.azul, .stat-num.verde { color: var(--a-texto); }

/* ---- ensayo ---- */
.ensayo-area {
  width: 100%; min-height: 190px; resize: vertical;
  background: var(--lienzo); border: 0; border-radius: var(--r);
  padding: 18px 20px; outline: none; line-height: 1.65; font-weight: 600;
  box-shadow: var(--hundido);
}
.ensayo-area::placeholder { color: var(--tinta-3); }

.correccion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.corr-item {
  padding: 14px 16px; border-radius: var(--r); box-shadow: var(--relieve);
  font-size: 15px; background: var(--lienzo);
}
.corr-item .tachado { color: var(--mal); text-decoration: line-through; }
.corr-item .flecha { color: var(--tinta-3); margin: 0 8px; }
.corr-item .bueno { color: var(--a-texto); font-weight: 800; }
.corr-item .porque { display: block; color: var(--tinta-2); font-size: 13.5px; margin-top: 4px; }

.puntaje-grande {
  font-weight: 900; font-size: clamp(46px, 12vw, 66px); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.puntaje-grande.rojo { background: var(--grad-mal); -webkit-background-clip: text; background-clip: text; }
.cifra-chica { font-size: .45em; -webkit-text-fill-color: var(--tinta-3); }

/* ---- charla ---- */
.charla { display: flex; flex-direction: column; min-height: calc(100vh - 300px); }
.charla-msgs { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; margin-bottom: 16px; }
.msg {
  max-width: 84%; padding: 12px 16px; border-radius: 17px 17px 17px 6px;
  background: var(--lienzo); box-shadow: var(--relieve);
  font-weight: 600; font-size: 15px;
  animation: msg-pop .3s var(--spring-fuerte) backwards;
}
@keyframes msg-pop { from { transform: scale(.9) translateY(6px); } }
.msg.mio { margin-left: auto; border-radius: 17px 17px 6px 17px; background: var(--grad); color: #fff; }
.msg .mejor {
  display: block; margin-top: 8px; padding: 7px 10px; border-radius: 10px;
  font-size: 13px; color: var(--a-texto); box-shadow: var(--hundido-suave); font-weight: 700;
}
.msg.mio .mejor { color: #fff; box-shadow: inset .12rem .12rem .3rem rgba(0,0,0,.2); }
.charla-envio { display: flex; gap: 10px; }
.charla-envio input { flex: 1; }

/* ---- tabs ---- */
.tabs {
  position: fixed; z-index: 30;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--marco) + env(safe-area-inset-bottom));
  display: flex; gap: 5px; padding: 6px;
  border-radius: var(--r-chip);
  background: var(--lienzo);
  box-shadow: var(--relieve-grande);
}
.tabs button {
  padding: 10px 17px; border-radius: var(--r-chip);
  color: var(--tinta-2); font-weight: 800; font-size: 13px; white-space: nowrap;
  transition: color var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease, transform var(--dur) var(--spring);
}
.tabs button:hover { color: var(--tinta); }
.tabs button:active { transform: scale(.94); }
.tabs button.activo { color: #fff; background: var(--grad); box-shadow: var(--relieve); }
.tabs button .pendiente { font-size: 12px; }
.tabs button:not(.activo) .pendiente { color: var(--a-texto); }

/* ---- modal ---- */
#capa-modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: var(--gut);
  background: rgba(45, 55, 82, .35); backdrop-filter: blur(5px);
}
#capa-modal.oculto { display: none; }
.modal {
  width: 100%; max-width: 420px;
  background: var(--lienzo); border-radius: 1.6rem; padding: 26px;
  box-shadow: var(--relieve-grande);
  animation: vista-pop .34s var(--spring-fuerte) backwards;
}
.modal h2 { margin: 0 0 18px; font-size: 20px; }
.modal .fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0;
}
.modal .fila + .fila { border-top: 2px solid rgba(200, 208, 231, .45); }

.interruptor { position: relative; width: 46px; height: 26px; flex: none; }
.interruptor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.interruptor i {
  position: absolute; inset: 0; border-radius: 999px;
  box-shadow: var(--hundido); transition: background var(--dur) ease; pointer-events: none;
}
.interruptor i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--lienzo); box-shadow: var(--relieve);
  transition: transform var(--dur) var(--spring-fuerte);
}
.interruptor input:checked + i { background: var(--grad); }
.interruptor input:checked + i::after { transform: translateX(20px); }

.aviso {
  border-radius: 14px; box-shadow: var(--hundido-suave);
  padding: 12px 16px; font-size: 14px; color: var(--tinta-2); margin: 14px 0;
}

/* ---- tarjeta de palabra nueva ---- */
.carta {
  background: var(--lienzo); border-radius: 1.6rem;
  box-shadow: var(--relieve-grande);
  padding: 32px 26px; text-align: center;
}
.carta-imagen {
  width: min(200px, 50vw); aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; margin-bottom: 20px;
  box-shadow: var(--relieve);
}
.carta-en {
  font-weight: 900; font-size: clamp(27px, 6vw, 34px);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.carta-en .btn-audio { width: 40px; height: 40px; }
.carta-en .btn-audio svg { width: 16px; height: 16px; }
.carta-es { color: var(--tinta-2); font-size: 17px; margin-top: 4px; }
.carta-nota {
  margin-top: 14px; padding: 11px 15px; border-radius: 14px;
  box-shadow: var(--hundido-suave);
  font-size: 13.5px; font-weight: 700; color: var(--tinta-2); text-align: left;
}
.carta-nota b { color: var(--a-texto); }

.carta-ej {
  color: var(--tinta-2); font-style: italic; font-size: 14.5px; margin-top: 18px;
  padding: 10px 14px; border-radius: 14px; box-shadow: var(--hundido-suave);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.carta-ej .btn-audio { width: 28px; height: 28px; flex: none; }
.carta-ej .btn-audio svg { width: 12px; height: 12px; }

/* ---- celebración ---- */
.celebra { position: relative; text-align: center; padding-top: 5vh; }
.celebra-cara {
  display: grid; place-items: center; margin: 0 auto 22px;
  width: 108px; height: 108px; border-radius: 50%; position: relative;
  background: var(--lienzo); box-shadow: var(--relieve-grande);
  animation: celebra-pop .55s var(--spring-fuerte) backwards .1s;
}
.celebra-cara::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; box-shadow: var(--hundido); }
.celebra-cara svg { position: relative; z-index: 1; width: 44px; height: 44px; }
.celebra-cara.bien svg { stroke: var(--a-medio); }
.celebra-cara.meh svg { stroke: var(--tinta-2); }
@keyframes celebra-pop { from { transform: scale(.3); } }
.celebra-titulo { margin-bottom: 10px; }
.celebra-stats { display: flex; gap: 14px; justify-content: center; margin-top: 28px; }
.celebra-stat {
  border-radius: var(--r); box-shadow: var(--hundido);
  padding: 18px 20px; min-width: 0; flex: 1;
  animation: vista-pop .4s var(--spring-fuerte) backwards .22s;
}
.celebra-stat:last-child { animation-delay: .32s; }

.confeti { position: absolute; inset: -20px 0 auto; height: 0; pointer-events: none; }
.confeti i {
  position: absolute; top: -10px; width: 8px; height: 13px; border-radius: 3px;
  opacity: 0; animation-name: confeti-cae; animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes confeti-cae {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(46vh) rotate(560deg); }
}

/* ---- cuestionario ---- */
.onboarding { padding-top: 4px; }
.onb-paso { margin: 6px 0 28px; }
.onb-paso .ej-barra > i { transition: width .5s var(--spring); }
.onb-centro { max-width: 430px; margin: 7vh auto 0; }
.onb-marca {
  display: block; margin: 0 auto 22px;
  height: 74px; width: auto;
  /* como en la intro: la sombra sigue el contorno, no una caja */
  filter: drop-shadow(.35rem .35rem .7rem var(--oscura)) drop-shadow(-.18rem -.18rem .55rem var(--luz));
}
.onb-nombre { color: var(--a-texto); }
/* El h1 del alta lleva el logotipo dentro en vez de texto: el h1 sigue ahí
   para no perder el encabezado, y el nombre accesible sale del alt. */
.onb-verby { display: block; margin: 0 auto; height: 30px; width: auto; }

.quiz { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quiz-carta {
  position: relative; display: flex; align-items: center; gap: 13px;
  text-align: left; padding: 15px 16px; border-radius: var(--r);
  background: var(--lienzo); box-shadow: var(--relieve);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring), color var(--dur) ease;
}
.quiz-carta:hover { transform: translateY(-2px); box-shadow: var(--relieve-grande); }
.quiz-carta:active { transform: scale(.97); }
.quiz-carta.elegida { box-shadow: var(--hundido); color: var(--a-texto); transform: none; }
.quiz-icono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.quiz-icono svg { width: 26px; height: 26px; stroke: currentColor; }
.quiz-carta:not(.elegida) .quiz-icono svg { stroke: var(--a-medio); }
.quiz-icono img { width: 44px; height: 44px; object-fit: contain; }
.quiz-titulo { font-weight: 800; font-size: 14.5px; }
.quiz-check {
  position: absolute; top: -8px; right: -8px;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad); color: #fff; box-shadow: var(--relieve);
  opacity: 0; transform: scale(.4);
  transition: opacity var(--dur) ease, transform var(--dur) var(--spring-fuerte);
}
.quiz-check svg { width: 12px; height: 12px; stroke: currentColor; }
.quiz-carta.elegida .quiz-check { opacity: 1; transform: none; }

.metas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.meta-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; padding: 17px 18px; border-radius: var(--r);
  background: var(--lienzo); box-shadow: var(--relieve);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring), color var(--dur) ease;
}
.meta-fila:hover { transform: translateY(-2px); }
.meta-fila.elegida { box-shadow: var(--hundido); color: var(--a-texto); transform: none; }
.meta-min { font-weight: 800; font-size: 16px; }
.meta-nombre { font-size: 13px; color: var(--tinta-2); font-weight: 700; }

.centrado { text-align: center; }
.espacio { height: 16px; }

@media (max-width: 560px) {
  .marca-texto { display: none; }
  .meta-dia { gap: 14px; padding: 16px; }
  .anillo-meta { width: 80px; height: 80px; }
  .anillo-centro { inset: 10px; font-size: 15px; }
  .dias-semana { gap: 5px; }
  .dia { width: 23px; height: 23px; font-size: 10px; }
  .tabs button { padding: 10px 13px; font-size: 12.5px; }
  .tarjetas-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat { padding: 13px 12px; }
  .stat-num { font-size: 22px; }
  .celebra-stat { padding: 15px 8px; }
  .celebra-stat .etiqueta { font-size: 9.5px; letter-spacing: .06em; }
  .celebra-stats { gap: 9px; }
  .msg { max-width: 90%; }
  .meta-dia { flex-direction: column; text-align: center; }
  .dias-semana { justify-content: center; }
}
@media (max-width: 430px) {
  .quiz { grid-template-columns: 1fr; }
}

/* ---- leccion completada pero con fallos: se avisa sin castigar ---- */
.nodo.a-medias .nodo-circulo {
  background: var(--lienzo); color: var(--a-texto);
  box-shadow: var(--relieve), inset 0 0 0 2.5px var(--a-claro);
}
.nodo-sello.afinar { color: var(--a-texto); }
.nodo-sello.afinar svg { width: 13px; height: 13px; }
.nota-afinar {
  margin-top: 18px; padding: 12px 16px; border-radius: 14px;
  box-shadow: var(--hundido-suave);
  font-size: 13.5px; font-weight: 700; color: var(--tinta-2);
}

/* ---- ordenar palabras: guia y boton de reiniciar ---- */
.armado-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 30px; margin-bottom: 6px;
}
.armado-guia { font-size: 12.5px; font-weight: 700; color: var(--tinta-3); }
.btn-reinicia {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-chip);
  font-weight: 800; font-size: 12.5px; color: var(--tinta-2);
  box-shadow: var(--relieve);
  transition: box-shadow var(--dur) ease, transform var(--dur) var(--spring), color var(--dur) ease;
}
.btn-reinicia svg { width: 13px; height: 13px; stroke: currentColor; }
.btn-reinicia:hover { transform: translateY(-2px); color: var(--a-texto); }
.btn-reinicia:active { box-shadow: var(--hundido); transform: scale(.94); }
.btn-reinicia[hidden] { display: none; }

/* nada de selección de texto al tocar rápido en los controles */
.pieza, .opcion, .pareja, .btn, .nodo, .unidad, .tabs button, .quiz-carta,
.meta-fila, .btn-audio, .globo, .btn-mic, .btn-reinicia, .dia {
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ej-repes {
  margin-left: 4px; padding: 2px 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 900; color: var(--a-texto);
  box-shadow: var(--hundido-suave);
}


/* ---- intro ------------------------------------------------------------- */
/* Anillos hundidos que salen del centro en cadena; detrás aparece el logo.
   Se quita sola: no hay nada que pulsar para pasar de aquí. */
.intro {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  display: grid; place-items: center;
  background: var(--lienzo);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1);

  /* Diámetro del anillo MAYOR. Estaba en 512px fijos y se salía por los lados
     en cuanto la ventana bajaba de ahí (a 390px el anillo grande medía 404 y
     quedaba cortado en los dos bordes). Ahora se ata al lado corto de la
     pantalla: los 84vw dejan aire a los costados y los 58vh evitan que en
     apaisado el anillo se coma el nombre de abajo. Todo lo demás sale de esta
     medida, así que la cadena entera escala junta. */
  --anillo: min(512px, 84vw, 58vh);
}
.intro.fuera { opacity: 0; transform: scale(1.03); pointer-events: none; }

.intro-anillos { position: absolute; display: grid; place-items: center; }
.intro-anillos span {
  position: absolute; border-radius: 50%;
  box-shadow: inset .5rem .5rem 1rem var(--oscura), inset -.5rem -.5rem 1rem var(--luz);
  transform: scale(.4); opacity: 0;
  /* salida exponencial, SIN rebote: arranca rapido y frena mucho al final */
  animation: anillo-sale 1.15s cubic-bezier(.16, 1, .3, 1) forwards;
}
/* El primero es el hueco donde vive el logo: tiene que ser bastante más
   grande que él para que se vea el borde alrededor. */
/* La cadena empezaba en .297 porque la marca anterior era un círculo y cabía
   holgada. La V es apaisada: dentro de un círculo lo que cuenta no es su caja
   sino la distancia del punto más lejano, que son los topes redondeados de
   los brazos, y a .297 asomaban por los lados. El anillo interior sube a .40
   y los pasos se reparten parejos hasta el mayor, que sigue siendo 1. */
.intro-anillos span:nth-child(1) { width: calc(var(--anillo) * .40); height: calc(var(--anillo) * .40); animation-delay: .05s; }
.intro-anillos span:nth-child(2) { width: calc(var(--anillo) * .544); height: calc(var(--anillo) * .544); animation-delay: .18s; }
.intro-anillos span:nth-child(3) { width: calc(var(--anillo) * .693); height: calc(var(--anillo) * .693); animation-delay: .31s; }
.intro-anillos span:nth-child(4) { width: calc(var(--anillo) * .846); height: calc(var(--anillo) * .846); animation-delay: .44s; }
.intro-anillos span:nth-child(5) { width: var(--anillo); height: var(--anillo); animation-delay: .57s; }
@keyframes anillo-sale {
  from { transform: scale(.4); opacity: 0; }
  45%  { opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

.intro-logo {
  position: relative; display: block;
  /* Se mide por ANCHO, no por alto: el isotipo es apaisado y con una altura
     fija se salía del anillo interior por los costados.
     El punto más lejano del centro está a .5394 del ancho (medido sobre el
     path: los topes de los brazos, no las esquinas de la caja). Con el anillo
     interior en .40, un ancho de .28 deja el logo dentro con .049 de --anillo
     de aire alrededor, la misma holgura proporcional que tenía el círculo. */
  width: calc(var(--anillo) * .28); height: auto;
  /* la sombra sigue el contorno de la forma, no una caja */
  filter: drop-shadow(.4rem .4rem .8rem var(--oscura)) drop-shadow(-.2rem -.2rem .6rem var(--luz));
  opacity: 0; transform: scale(.82);
  /* no arranca hasta que el anillo interior ya está: sale de él */
  animation: logo-entra .9s cubic-bezier(.16, 1, .3, 1) .62s forwards;
}
@keyframes logo-entra {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* El nombre es el logotipo, no texto. Se mide contra --anillo como todo lo
   demás de la intro, así que la composición entera escala junta. */
.intro-nombre {
  position: absolute; bottom: 14%;
  width: calc(var(--anillo) * .34); height: auto; display: block;
  opacity: 0; animation: nombre-entra .8s cubic-bezier(.16, 1, .3, 1) 1.05s forwards;
}
@keyframes nombre-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* En pantalla ancha los anillos bajan más: el nombre se aparta para no rozarlos. */
@media (min-width: 700px) { .intro-nombre { bottom: 10%; } }

/* Ya no hace falta el salto a 420px: --anillo lo resuelve en cualquier ancho. */

/* Quien pide menos movimiento ve el logo directamente, sin cadena de anillos. */
@media (prefers-reduced-motion: reduce) {
  .intro-anillos span { animation-duration: .01s; animation-delay: 0s; }
  .intro-logo, .intro-nombre { animation-duration: .2s; animation-delay: 0s; }
}


/* ---- menú (sale de detrás de la barra, anclado al botón) --------------- */
#menu-velo {
  position: fixed; inset: 0; z-index: 31;   /* por encima de las pestañas (30) */
  background: rgba(45, 55, 82, .28);
  opacity: 0; transition: opacity .28s ease;
}
#menu-velo.entra { opacity: 1; }

#menu-panel {
  position: fixed; z-index: 32;
  width: min(340px, calc(100vw - var(--gut) * 2));
  background: var(--lienzo); border-radius: 1.4rem; padding: 8px 22px 20px;
  box-shadow: var(--relieve-grande);
  transform-origin: top right;
  transform: translateY(-14px) scale(.94); opacity: 0;
  transition: transform .38s var(--spring-fuerte), opacity .22s ease;
  max-height: calc(100vh - 100px); overflow-y: auto;
}
#menu-panel.entra { transform: none; opacity: 1; }
#menu-panel h2 { margin: 12px 0 4px; font-size: 17px; }
#menu-panel .fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0;
}
#menu-panel .fila + .fila { border-top: 2px solid rgba(200, 208, 231, .45); }
#menu-panel .btn { padding: 8px 14px; }


/* ---- metodo PPP: fases, uso y porque ----------------------------------- */
.fase-chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 12px;
  box-shadow: var(--hundido-suave);
  font-weight: 800; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--a-texto);
}
.fase-chip.f-produce { color: #fff; background: var(--grad); box-shadow: var(--relieve); }

/* el "cuando se usa" de una palabra, en su tarjeta */
.carta-uso {
  margin-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--a-texto);
}

/* el porque de una respuesta, dentro del veredicto */
.veredicto-por { margin-top: 7px; font-size: 13.5px; font-weight: 600; opacity: .92; }

/* acotaciones de la escena ("Por la tarde...") */
.escena-acota {
  text-align: center; margin: 14px 0 10px;
  font-weight: 800; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3);
}


/* ---- personajes -------------------------------------------------------- */
.cara {
  flex: none; position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--lienzo); box-shadow: var(--relieve);
  font-weight: 900; font-size: 14px; color: var(--tinta-2);
}
/* Los avatares son bustos verticales (162x224). Con `cover` el circulo hacia
   un primerisimo plano que cortaba el pelo: va `contain`, con el busto entero
   apoyado en el borde de abajo. Medido comparando las tres opciones. */
.cara img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.cara img + b { display: none; }              /* con foto, fuera la inicial */
.cara-B { color: var(--a-texto); }
.cara-tu { box-shadow: var(--hundido-suave); color: var(--tinta-3); }

.globo-quien, .cambio-quien {
  display: block; margin-bottom: 3px;
  font-weight: 800; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3);
}

/* ---- intercambio de la tarjeta ---------------------------------------- */
.cambio { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.cambio-linea { display: flex; align-items: flex-start; gap: 10px; }
.cambio-linea.tu { flex-direction: row-reverse; }
.cambio-globo {
  flex: 1; min-width: 0;
  padding: 12px 16px; border-radius: 1.1rem;
  box-shadow: var(--hundido-suave);
  font-weight: 700; font-size: 15px; color: var(--tinta);
}
.cambio-linea.tu .cambio-globo { text-align: right; }
.cambio-globo .btn-audio { width: 26px; height: 26px; margin-left: 8px; }
.cambio-globo .btn-audio svg { width: 11px; height: 11px; }

/* En los dialogos la cara ocupa el sitio de la vieja letra .linea-quien */
.linea .cara { width: 34px; height: 34px; font-size: 13px; }
.linea.b .cara { box-shadow: var(--relieve); }

.cara { background: var(--lienzo); }        /* superficie del color del lienzo, como manda el relieve */
.cara-tu { background: var(--lienzo); }