/* ===== Base ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-texto);
  background:var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
img{display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Títulos: DM Sans 700, con letras un poco más juntas */
.titulo{font-family:var(--font-texto);font-weight:700;letter-spacing:var(--titulo-espaciado)}

/* ===== Esqueleto de la app ===== */
.app{min-height:100vh;min-height:100dvh}
.contenido{
  max-width:560px;
  margin:0 auto;
  /* espacio para la barra fija de abajo */
  padding-bottom:calc(104px + env(safe-area-inset-bottom));
}
.cargando{padding:40px 20px;color:var(--text-dim);text-align:center}

/* ===== Barra de abajo (celular) ===== */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--borde) solid var(--line);
  background:var(--nav);
  padding:10px 8px calc(16px + env(safe-area-inset-bottom));
}
.nav[hidden]{display:none}
.nav-marca{display:none}
.nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  justify-self:center;            /* la píldora envuelve ícono y texto, no toda la columna */
  min-width:84px;min-height:56px;padding:5px 12px;
  font-size:11px;color:var(--text-dim);
  border-radius:18px;
  transition:background-color .15s ease;
}
.nav-item img{width:26px;height:26px}
.nav-item.activo{color:var(--gold);font-weight:700;background:var(--nav-activo)}
@media (prefers-reduced-motion: reduce){ .nav-item{transition:none} }

/* ===== Inicio ===== */
.inicio-cabecera{display:flex;align-items:center;gap:12px;padding:28px 20px 26px}
.inicio-cabecera .saludo{flex-grow:1;min-width:0;margin:0;font-size:30px;overflow-wrap:anywhere}

/* Racha: solo ícono + número */
.pastilla-racha{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  min-height:44px;padding:8px 16px 8px 12px;border-radius:999px;
  background:var(--card);border:var(--borde) solid var(--line);
}
.pastilla-racha img{width:24px;height:24px}
.pastilla-racha .num{font-weight:700;font-size:17px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Portadas de los cursos: 1 columna en celular, 2 desde 600 px, 3 desde 1200 px */
.cursos{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:0 20px}
.curso{
  display:block;border-radius:var(--radio-tarjeta);
  transition:transform .15s ease;
}
.curso-portada{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radio-tarjeta);
  box-shadow:0 10px 24px var(--portada-sombra);
}
.curso-nombre{
  display:block;margin-top:14px;
  font-size:17px;line-height:22px;font-weight:700;text-align:center;
  color:var(--portada-titulo);
  transition:color .15s ease;
}
@media (hover:hover){
  .curso:hover{transform:translateY(-3px)}
  .curso:hover .curso-nombre{color:var(--text)}
}
@media (prefers-reduced-motion: reduce){
  .curso,.curso-nombre{transition:none}
  .curso:hover{transform:none}
}

/* ===== Próximamente ===== */
.simple{
  min-height:70vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;padding:40px 24px;
}
.simple h1{margin:0;font-size:30px}
.simple p{margin:0;color:var(--text-dim);font-size:15px;max-width:320px;line-height:1.45}

/* ===== Piezas comunes ===== */
.etiqueta{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.contenido.sin-menu{max-width:none;padding-bottom:0}
.volver{
  display:inline-flex;align-items:center;min-height:44px;padding-right:12px;
  color:var(--text-dim);font-weight:700;font-size:17px;
}
.barra{flex-grow:1;height:14px;border-radius:999px;background:var(--card-2);overflow:hidden}
.barra-relleno{height:100%;width:0;border-radius:999px;transition:width .3s ease}
.barra-gold .barra-relleno{background:var(--gold)}

.boton-oro,.boton-sec,.boton-hoja{
  display:block;width:100%;min-height:58px;padding:12px 16px;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:var(--radio-boton);
  transition:transform .08s, border-bottom-width .08s;
}
.boton-oro{background:var(--gold);color:var(--gold-ink);border:0;border-bottom:4px solid var(--gold-edge)}
.boton-oro:disabled{background:var(--ventana-gris);color:var(--icon-off);border-bottom-color:var(--ventana-gris-edge);cursor:not-allowed}
.boton-sec{background:var(--card-2);color:var(--text);border:var(--borde) solid var(--line)}
.boton-sec:disabled{opacity:.4;cursor:not-allowed}
.boton-oro:active:not(:disabled),.boton-hoja:active{transform:translateY(2px);border-bottom-width:2px;margin-bottom:2px}

/* ===== Mapa del curso ===== */
.mapa{max-width:640px;margin:0 auto;padding:13px 20px 0}
.mapa-cabecera{display:flex;flex-direction:column;padding-bottom:28px;border-bottom:var(--borde) solid var(--line)}
.mapa-cabecera .volver{align-self:flex-start}
.mapa-titulo{margin:0;font-size:30px;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.mapa-avance{display:flex;justify-content:space-between;gap:12px;margin:17px 0 8px;font-size:15px;line-height:22px;color:var(--text-dim)}
.mapa-porcentaje{color:var(--curso-claro, var(--gold));font-weight:700;font-size:16px}
.mapa-cabecera .barra{flex:none}
.mapa-cabecera .barra-relleno{background:var(--curso-claro, var(--gold))}
.mapa-vacio{margin:64px 0 0;text-align:center;font-size:17px;line-height:1.45;color:var(--text-dim)}

/* La moneda: imagen de assets/isla + número encima. Las imágenes (512×512) tienen la moneda al
   67% del ancho; la cara de arriba tiene su centro al 45,6% del alto. Ahí va el número. */
.moneda{position:relative;flex:none;display:block;width:128px;height:128px}
.moneda img{position:absolute;inset:0;display:block;width:100%;height:100%}
.moneda-num{
  position:absolute;left:50%;top:45.6%;transform:translate(-50%,-50%);
  font-weight:700;font-size:38px;line-height:1;
  color:var(--crema);text-shadow:2px 3px 0 var(--gold-edge);pointer-events:none;
  transition:transform .09s cubic-bezier(.3,.7,.4,1);
}
/* Se hunde al presionar (docs/MONEDAS.md §1): la imagen va dos veces. 🚨 La de abajo solo enseña su mitad
   inferior (el borde); si no, su tapa se sigue viendo y la moneda parece estirarse en vez de hundirse.
   La de arriba es la tapa recortada, que baja 8 px (11 px la meta) con el número. El aro no se mueve. */
.moneda-base{clip-path:inset(50% 0 0 0)}
.moneda-cara{clip-path:ellipse(33.5% 30.1% at 50% 45.9%);transition:transform .09s cubic-bezier(.3,.7,.4,1)}
.parada-boton:active .moneda-cara{transform:translateY(8px)}
.parada-boton:active .moneda-num{transform:translate(-50%,calc(-50% + 8px))}
.moneda-meta:active .moneda-cara{transform:translateY(11px)}
/* Respaldo si falta la imagen: moneda dibujada con CSS */
.moneda.sin-img::before{
  content:"";position:absolute;left:16.5%;right:16.5%;top:16%;bottom:24%;
  border-radius:50%;background:var(--gold);box-shadow:0 8px 0 var(--gold-edge);
}

.camino{
  --amplitud:72px;   /* cuánto se aleja la curva del centro */
  position:relative; /* la ventana de cada moneda se posiciona contra el camino */
  list-style:none;margin:0;padding:70px 0 8px;
}
/* Cada parada mide lo mismo; la moneda va corrida según --k (de -1 a 1) → una curva suave */
.parada{position:relative;display:flex;justify-content:center;height:162px}
.parada.tras-estrellas{margin-top:40px}
.parada-centro{position:relative;height:128px;transform:translateX(calc(var(--k, 0) * var(--amplitud)))}
.parada-boton{display:block;padding:0;border:0;border-radius:50%;background:none;color:inherit;font:inherit;cursor:pointer}
/* Estrellas debajo de las completas: 3 imágenes en arco, la del medio 5 px más abajo */
.estrellas-arco{position:absolute;left:50%;top:124px;transform:translateX(-50%);display:flex;align-items:flex-start;gap:2px}
.estrellas-arco img{display:block;width:22px;height:22px}
.estrellas-arco img:nth-child(2){transform:translateY(5px)}

/* Estados. Completa y actual: la sombra del número es el tono oscuro del curso */
.parada-completa .moneda-num,.parada-actual .moneda-num{text-shadow:2px 3px 0 var(--curso-oscuro, var(--gold-edge))}
.parada-abierta .moneda img{filter:saturate(.45) brightness(.62)}
.parada-abierta .moneda-num{color:var(--pend-num);text-shadow:2px 3px 0 var(--pend-sombra)}
.parada-sin .moneda-num{color:var(--isla-bloq-num);text-shadow:2px 3px 0 var(--isla-bloq-sombra)}
.parada-sin .moneda.sin-img::before{background:var(--isla-bloq-moneda);box-shadow:0 8px 0 var(--isla-bloq-moneda-edge)}

/* Actual: moneda sin aro + el aro encima, en el mismo recuadro, girando lento */
.moneda .moneda-aro{position:absolute;inset:0;animation:islaGiro 12s linear infinite}
@keyframes islaGiro{to{transform:rotate(360deg)}}

/* Etiqueta EMPEZAR sobre la moneda actual (abre la clase) */
.chip-empezar{
  position:absolute;left:50%;bottom:100%;z-index:2;transform:translateX(-50%);
  margin-bottom:8px;min-height:44px;padding:0 20px;cursor:pointer;
  background:var(--bg);border:2px solid var(--chip-borde);border-radius:12px;
  color:var(--gold);font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
/* La flechita: dos triángulos, el de afuera del color del borde y el de adentro del fondo */
.chip-empezar::before,.chip-empezar::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-style:solid;width:0;height:0}
.chip-empezar::before{bottom:-11px;border-width:10px 10px 0;border-color:var(--chip-borde) transparent transparent}
.chip-empezar::after{bottom:-7px;border-width:8px 8px 0;border-color:var(--bg) transparent transparent}
.con-ventana .chip-empezar{visibility:hidden}

/* La meta, al final del camino: se enciende con todas las clases completas */
.camino-meta{display:flex;justify-content:center;margin-top:-10px}
.moneda-meta{width:176px;height:176px}
/* La transparencia va en la moneda entera: puesta en las dos capas, se sumaría y marcaría una raya en el medio */
.camino-meta:not(.lograda) .moneda-meta{opacity:.85}
.camino-meta:not(.lograda) .moneda-meta img{filter:grayscale(1) brightness(.55)}
.camino-meta.lograda .moneda-meta img{filter:drop-shadow(0 0 18px var(--gold-resplandor))}

/* Ventana de una moneda (como Duolingo) */
.ventana-isla{
  position:absolute;left:20px;right:20px;z-index:6;
  display:flex;flex-direction:column;gap:6px;
  padding:16px 16px 18px;border-radius:18px;text-align:left;
  /* crece y se encoge desde la punta de la flecha */
  transform-origin:var(--flecha-x) -11px;
}
.ventana-isla.champan{background:var(--gold);border-bottom:5px solid var(--gold-edge)}
.ventana-isla.gris{background:var(--ventana-gris);border-bottom:5px solid var(--ventana-gris-edge)}
.ventana-flecha{
  position:absolute;top:-11px;left:var(--flecha-x);transform:translateX(-50%);
  width:0;height:0;border-style:solid;border-width:0 11px 12px;
  border-color:transparent transparent var(--gold);
}
.gris .ventana-flecha{border-bottom-color:var(--ventana-gris)}
.ventana-etq{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--crema);text-shadow:1px 1px 0 var(--gold-edge);
}
.ventana-titulo{
  margin:0 0 2px;font-size:24px;font-weight:700;line-height:1.15;letter-spacing:var(--titulo-espaciado);
  color:var(--crema);text-shadow:2px 3px 0 var(--gold-edge);
}
.ventana-texto{margin:0;font-size:15px;line-height:1.45;color:var(--gold-texto)}
.gris .ventana-etq{color:var(--ventana-gris-texto);text-shadow:none}
.gris .ventana-titulo{color:var(--ventana-gris-titulo);text-shadow:2px 3px 0 var(--ventana-gris-edge)}
.gris .ventana-texto{color:var(--ventana-gris-texto)}
.ventana-estrellas{display:flex;gap:6px;margin:2px 0 4px}
.ventana-estrellas img{display:block;width:30px;height:30px}
.ventana-boton{
  margin-top:10px;width:100%;min-height:48px;padding:12px;cursor:pointer;
  border:0;border-bottom:4px solid var(--crema-edge);border-radius:14px;
  background:var(--crema);color:var(--gold-edge);
  font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .08s, border-bottom-width .08s;
}
.ventana-boton:active{transform:translateY(2px);border-bottom-width:2px;margin-bottom:2px}
.ventana-isla.abriendo{animation:ventanaAbre .18s cubic-bezier(.2,1.4,.4,1) both}
.ventana-isla.cerrando{animation:ventanaCierra .12s ease-in forwards}  /* ⚠️ = CERRAR_MS de curso.js */
@keyframes ventanaAbre{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ventanaCierra{from{transform:scale(1);opacity:1}to{transform:scale(.2);opacity:0}}

/* ===== Pantalla de la clase ===== */
.clase{max-width:720px;margin:0 auto;padding:13px 20px 0}
.volver-clase{font-weight:500}
.clase-titulo{margin:-2px 0 22px;font-size:26px;line-height:1.2;overflow-wrap:anywhere}
.clase-num{font-weight:400;color:var(--text-dim)}
.clase-visto{background:var(--card);border:var(--borde) solid var(--line);border-radius:var(--radio-tarjeta);padding:24px}
.clase-visto-etq{margin:0 0 10px;font-size:12px;color:var(--text-dim)}
.clase-resumen{margin:0;font-size:17px;line-height:1.5}
.clase-subtitulo{margin:34px 0 14px;font-size:22px;line-height:28px}
.ej-tarjeta{
  display:flex;align-items:center;gap:22px;
  background:var(--card);
  border:var(--borde) solid var(--line);border-bottom:4px solid var(--line);
  border-radius:var(--radio-tarjeta);
  padding:16px 22px 16px 18px;
  transition:transform .08s, border-bottom-width .08s;
}
.ej-tarjeta:active{transform:translateY(2px);border-bottom-width:2px;margin-bottom:2px}
.ej-moneda{flex:none;width:66px;height:66px}
.ej-textos{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ej-nombre{font-weight:700;font-size:18px;line-height:1.35}
.ej-sub{font-size:15px;line-height:1.35;color:var(--text-dim)}
.ej-estado{flex:none;font-size:16px;font-weight:700}
.ej-pendiente{color:var(--gold)}
.ej-hecho{color:var(--ok)}
.ej-check{margin-right:4px;font-size:22px;line-height:1;vertical-align:-2px}

/* ===== Ejercicios ===== */
.juego{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.juego-col{width:100%;max-width:800px;margin:0 auto;padding:12px 20px 20px}

/* Cabecera: ✕ + barra + corazones */
.juego-cabecera{display:flex;align-items:center;gap:12px;min-height:48px}
.boton-cerrar{
  flex:none;width:44px;height:44px;margin-left:-7px;padding:10px;
  background:none;border:0;border-radius:12px;color:var(--text-dim);cursor:pointer;
}
.boton-cerrar svg{display:block;width:100%;height:100%}
.boton-cerrar:hover{background:var(--card)}
.juego-cabecera .barra{height:16px}
.iv-vidas{display:flex;align-items:center;gap:6px;flex:none;margin-left:6px}
.iv-vida{display:block;width:22px;height:22px;color:var(--bad);transition:color .2s, opacity .2s, transform .2s}
.iv-vida svg{display:block;width:100%;height:100%}
.iv-vida.gastada{color:var(--line);opacity:.8;transform:scale(.85)}
.iv-vida.cae{animation:ivPierde .5s ease-out both}
@keyframes ivPierde{
  0%{color:var(--bad);opacity:1;transform:scale(1)}
  35%{color:var(--bad);transform:scale(1.35)}
  100%{color:var(--line);opacity:.8;transform:scale(.85)}
}

.juego-etq{margin:19px 0 8px;color:var(--gold);line-height:16px}
.juego-titulo{margin:0 0 7px;font-size:30px;line-height:1.18}
.juego-instruccion{margin:0;font-size:17px;line-height:22px;color:var(--text-dim)}
.juego-cuerpo{margin-top:34px}

/* Fichas de palabras */
.fichas{display:flex;flex-wrap:wrap;gap:12px}
.ficha{
  min-height:48px;padding:0 16px;cursor:pointer;
  background:var(--card-2);color:var(--text);
  font-family:inherit;font-size:18px;font-weight:500;
  border:var(--borde) solid var(--line);border-bottom:4px solid var(--line);border-radius:16px;
  transition:transform .08s, border-bottom-width .08s;
}
.ficha:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}
.ficha:disabled{cursor:default}
.ficha.bien{background:var(--ok-fondo);border-color:var(--ok);color:var(--ok);font-weight:700}
.ficha.mal{background:var(--bad-fondo);border-color:var(--bad);color:var(--bad-claro);font-weight:700}
.ficha.apagada{opacity:.45}
.ficha.vuela{position:relative;z-index:5;will-change:transform}
.ficha.hueco{background:none;border:var(--borde) dashed var(--grid);color:transparent}

/* Spot the Error: botón "Está bien escrita" */
.boton-bien-escrita{
  display:block;width:100%;min-height:56px;margin-top:28px;padding:0 16px;cursor:pointer;
  background:var(--card-2);color:var(--text);
  font-family:inherit;font-size:18px;font-weight:700;
  border:var(--borde) solid var(--line);border-bottom:4px solid var(--line);border-radius:16px;
  transition:transform .08s, border-bottom-width .08s;
}
.boton-bien-escrita:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}
.boton-bien-escrita:disabled{cursor:default}
.boton-bien-escrita.bien{background:var(--ok-fondo);border-color:var(--ok);color:var(--ok)}
.boton-bien-escrita.mal{background:var(--bad-fondo);border-color:var(--bad);color:var(--bad-claro)}

/* Choose the right sequence */
.huecos{display:flex;flex-wrap:wrap;gap:13px 8px}
.hueco-raya{
  display:flex;justify-content:center;align-items:flex-end;
  min-width:64px;min-height:52px;border-bottom:3px solid var(--line);
}
.hueco-raya .ficha,.frase-hueco .ficha{margin-bottom:-3px} /* la ficha se apoya sobre la raya y cabe justa */
.banco{margin-top:39px}

/* Fill in the blanks */
.frase{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 9px;margin-top:40px;font-size:26px;font-weight:700;line-height:1.2}
.juego-cuerpo .frase{margin-top:40px}
.frase-hueco{
  display:flex;justify-content:center;align-items:flex-end;
  min-width:96px;min-height:52px;margin:0 8px;border-bottom:3px solid var(--line);
}
.frase-hueco.bien{border-bottom-color:var(--ok)}
.frase-hueco + .frase-palabra.pegada{margin-left:-17px}
.opciones{margin-top:36px}

/* Is it a real word? */
.real-tiempo{margin-top:-8px;height:10px;border-radius:999px;background:var(--card-2);overflow:hidden}
.real-tiempo-relleno{height:100%;width:100%;border-radius:999px;background:var(--gold)}
.real-segundos{margin:8px 0 0;text-align:center;font-size:15px;line-height:20px;font-weight:700;color:var(--text-dim)}
.real-palabra{margin:71px 0 0;text-align:center;font-size:52px;line-height:1.25;font-weight:700;overflow-wrap:anywhere}
.real-palabra.tachada{color:var(--bad-claro);text-decoration:line-through;text-decoration-thickness:.09em}
.juego-pie.sin-linea{border-top-color:transparent}
.juego-pie-dentro.fila{flex-direction:row;gap:14px}
.real-boton{
  flex:1 1 0;min-width:0;height:76px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  font-family:inherit;font-size:24px;font-weight:700;
  border:var(--borde) solid;border-bottom-width:5px;border-radius:20px;
  transition:transform .08s, border-bottom-width .08s;
}
.real-boton svg{width:24px;height:24px;flex:none}
.real-boton:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.real-boton:disabled{cursor:default}
.real-si{background:var(--ok-fondo);border-color:var(--ok);color:var(--ok)}
.real-no{background:var(--bad-fondo);border-color:var(--bad);color:var(--bad-claro)}

/* Read and answer */
.lectura-texto{margin-top:-12px;padding:18px;background:var(--card);border:var(--borde) solid var(--line);border-radius:20px}
.lectura-parrafo{margin:0;font-size:17px;line-height:1.55;font-weight:400;white-space:pre-line} /* respeta los saltos de línea de las conversaciones */
.escuchar{
  position:relative;display:inline-block;vertical-align:middle;width:52px;height:57px;margin:-6px 14px -2px 0;padding:0;cursor:pointer;
  background:none;border:0;-webkit-tap-highlight-color:transparent;
}
.escuchar-base,.escuchar-cara{position:absolute;left:0;width:52px;height:52px;border-radius:50%}
.escuchar-base{top:5px;background:var(--escuchar-borde)}
.escuchar-cara{top:0;display:flex;align-items:center;justify-content:center;background:var(--escuchar);
  transition:transform .09s cubic-bezier(.3,.7,.4,1)}
.escuchar-cara img{display:block;width:50%;height:50%}
.escuchar:active .escuchar-cara,.escuchar.suena .escuchar-cara{transform:translateY(5px)}
.escuchar:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:50%}
@media (prefers-reduced-motion:reduce){ .escuchar-cara{transition:none} }
.lectura-pregunta{margin:22px 0 14px;font-size:20px;line-height:1.3;font-weight:700}
.opciones-lectura{display:flex;flex-direction:column;gap:10px}
.opcion{
  display:flex;align-items:center;gap:18px;width:100%;min-height:58px;padding:10px 20px 10px 16px;cursor:pointer;text-align:left;
  background:var(--card);color:var(--text);font-family:inherit;font-size:20px;font-weight:500;
  border:var(--borde) solid var(--line);border-bottom-width:4px;border-radius:20px;
  transition:transform .08s, border-bottom-width .08s;
}
.opcion:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}
.opcion:disabled{cursor:default}
.opcion-num{
  flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:var(--borde) solid var(--line);border-radius:8px;font-size:14px;font-weight:500;color:var(--text-dim);
}
.opcion.bien{background:var(--ok-fondo);border-color:var(--ok);color:var(--ok);font-weight:700}
.opcion.bien .opcion-num{border-color:var(--ok);color:var(--ok)}
.opcion.mal{background:var(--bad-fondo);border-color:var(--bad);color:var(--bad-claro)}
.opcion.mal .opcion-num{border-color:var(--bad);color:var(--bad-claro)}

/* Build the question: tarjeta de situación (como la del texto de Read and answer) */
.situacion{margin-top:-12px;padding:16px 18px;background:var(--card);border:var(--borde) solid var(--line);border-radius:16px}
.situacion-etq{margin:0 0 6px;font-size:12px;color:var(--gold)}
.situacion-texto{margin:0;font-size:18px;line-height:1.45}
.situacion + .huecos{margin-top:26px}

/* Connections */
.cx-barras{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.cx-barras:empty{display:none}
.cx-barra{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:58px;padding:9px 14px;border-radius:16px;text-align:center;
}
.cx-barra-nombre{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.cx-barra-palabras{font-size:19px;line-height:1.25;font-weight:700;overflow-wrap:break-word}
.cx-barra.larga .cx-barra-palabras{font-size:16px}
.cx-c0{background:var(--ok);color:var(--ok-ink)}
.cx-c1{background:var(--gold);color:var(--gold-ink)}
.cx-c2{background:var(--flash);color:var(--flash-ink)}
.cx-c3{background:var(--isla);color:var(--gold-ink)}
.cx-gris{background:var(--line);color:var(--text)}
.cx-rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cx-ficha{
  display:flex;align-items:center;justify-content:center;min-width:0;min-height:58px;padding:0 4px;
  font-size:17px;line-height:1.15;text-align:center;overflow-wrap:break-word;
}
.cx-ficha.larga{font-size:15px}
.cx-ficha.elegida{background:var(--gold-tinte);border-color:var(--gold);color:var(--gold);font-weight:700}
.cx-ficha.tiembla{animation:cxTiembla .42s ease-in-out}
@keyframes cxTiembla{0%,100%{transform:translateX(0)}18%{transform:translateX(-7px)}38%{transform:translateX(7px)}58%{transform:translateX(-5px)}78%{transform:translateX(4px)}}
.cx-barra.entra{animation:cxEntra .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes cxEntra{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.cx-aviso{margin:14px 0 0;min-height:22px;text-align:center;font-size:16px;line-height:22px;color:var(--text-dim)}
.cx-borrar{flex:0 0 130px}

/* Interview (sin audio): conversación */
.juego-tema{margin:8px 0 0;font-size:16px;line-height:1.35;font-weight:500;color:var(--gold)}
.iv-msg{display:flex;gap:12px}
.iv-omar{align-items:flex-start}
.iv-yo{justify-content:flex-end;align-items:flex-end}
.iv-msg + .iv-msg,.iv-msg + .opciones-lectura{margin-top:14px}
.iv-msg + .opciones-lectura{margin-top:22px}
.iv-avatar{
  flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;
}
.iv-avatar.omar{background:var(--gold);color:var(--gold-ink)}
.iv-avatar.yo{background:var(--card-2);border:var(--borde) solid var(--line);color:var(--text)}
.iv-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.iv-quien{margin:0;padding-left:4px;font-size:13px;line-height:16px;font-weight:700;color:var(--text-dim)}
.iv-burbuja{position:relative;border:var(--borde) solid var(--tail-bd);background:var(--tail-bg);border-radius:16px}
.iv-omar .iv-burbuja::before,.iv-yo .iv-burbuja::before,.iv-omar .iv-burbuja::after,.iv-yo .iv-burbuja::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.iv-omar .iv-burbuja::before{left:-12px;top:10px;border-width:8px 12px 8px 0;border-color:transparent var(--tail-bd) transparent transparent}
.iv-omar .iv-burbuja::after{left:-8px;top:12px;border-width:6px 9px 6px 0;border-color:transparent var(--tail-bg) transparent transparent}
.iv-yo .iv-burbuja::before{right:-12px;bottom:10px;border-width:8px 0 8px 12px;border-color:transparent transparent transparent var(--tail-bd)}
.iv-yo .iv-burbuja::after{right:-8px;bottom:12px;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--tail-bg)}
.iv-contexto{--tail-bd:var(--card-2);--tail-bg:var(--card-2);padding:10px 16px;font-size:18px;line-height:1.4;color:var(--text)}
.iv-contexto p{margin:0}
.iv-pregunta{--tail-bd:var(--line);--tail-bg:var(--card);padding:12px 16px;font-size:20px;line-height:1.3;font-weight:700}
.iv-yo .iv-col{max-width:calc(100% - 54px);align-items:flex-end}
.iv-respuesta{--tail-bd:var(--line);--tail-bg:var(--card);padding:10px 16px;color:var(--text);animation:ivFundido .35s ease-out both}
.iv-respuesta.iv-bien{--tail-bd:var(--ok);--tail-bg:var(--ok-fondo)}
.iv-respuesta.iv-mal{--tail-bd:var(--bad);--tail-bg:var(--bad-fondo)}
.iv-linea{margin:0;font-size:18px;line-height:1.4}
.iv-linea + .iv-linea{margin-top:6px}
.iv-linea s{color:var(--bad-claro);text-decoration-thickness:2px}
.iv-linea-bien{color:var(--ok);font-weight:700}
.iv-linea-bien::before{content:"✓ "}
@keyframes ivFundido{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* Panel de respuesta: sube desde abajo */
.hoja{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  transform:translateY(100%);transition:transform .3s ease;
  border-top:var(--borde) solid;
}
.hoja.abierta{transform:translateY(0)}
.hoja-dentro{max-width:800px;margin:0 auto;padding:24px 20px calc(30px + env(safe-area-inset-bottom))}
.hoja-bien{background:var(--ok-fondo);border-color:var(--ok)}
.hoja-mal{background:var(--bad-fondo);border-color:var(--bad)}
.hoja-titulo{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:24px;font-weight:700}
.hoja-bien .hoja-titulo{color:var(--ok)}
.hoja-mal .hoja-titulo{color:var(--bad-claro)}
.hoja-icono{flex:none;width:40px;height:40px;padding:7px;border-radius:50%}
.hoja-icono svg{display:block;width:100%;height:100%}
.hoja-bien .hoja-icono{background:var(--ok);color:var(--ok-ink)}
.hoja-mal .hoja-icono{background:var(--bad);color:var(--bad-ink)}
.hoja-frase{margin:0 0 20px;font-size:22px;line-height:1.3;color:var(--text)}
.resaltada{color:var(--ok)}
.hoja-explica{margin:-12px 0 20px;font-size:16px;line-height:1.4;color:var(--text-dim)}
.boton-hoja{border:0}
.hoja-bien .boton-hoja{background:var(--ok);color:var(--ok-ink);border-bottom:4px solid var(--ok-edge)}
.hoja-mal .boton-hoja{background:var(--bad);color:var(--on-bad);border-bottom:4px solid var(--bad-edge)}

/* Abajo: botones sobre una línea, pegados al fondo */
.juego-pie{margin-top:auto;border-top:var(--borde) solid var(--card-2);padding:20px 20px calc(30px + env(safe-area-inset-bottom))}
.juego-pie-dentro{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto}

/* Pantallas finales: ¡Clase completada! y Te quedaste sin vidas */
.final-centro{flex-grow:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:140px 20px 24px}
.final-moneda{width:130px;height:130px}
.final-titulo{margin:17px 0 0;font-size:32px;line-height:1.2}
.final-corazones + .final-titulo{margin-top:28px}
.final-estrellas{display:flex;gap:10px;margin-top:19px}
.final-estrellas img{display:block;width:60px;height:60px}
.final-estrellas img:nth-child(2){transform:translateY(12px)}
.final-estrellas + .final-texto{margin-top:35px}
.final-texto{margin:12px 0 0;max-width:340px;font-size:18px;line-height:1.45;color:var(--text-dim)}
.final-texto strong{color:var(--text)}
.final-corazones{display:flex;gap:20px;padding-top:7px}
.final-corazones .iv-vida{width:46px;height:46px;opacity:1;transform:none}

/* ===== Repaso ===== */
.repaso{max-width:720px;margin:0 auto;padding:0 20px}
.repaso-curso{margin-bottom:18px;background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:4px;border-radius:20px}
.repaso-barra{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:80px;padding:0 24px 0 28px;
  background:none;border:0;border-radius:20px;cursor:pointer;color:var(--text);text-align:left;font-family:inherit;
}
.repaso-nombre{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:var(--titulo-espaciado)}
.repaso-barra svg{flex:none;width:24px;height:24px;color:var(--gold);transition:transform .2s}
.repaso-barra[aria-expanded="true"] svg{transform:rotate(180deg)}
.repaso-clases{padding:0 20px 24px}
.repaso-clases[hidden]{display:none}
.repaso-etq{margin:14px 0 9px 4px;font-size:12px;color:var(--text-dim)}
.repaso-etq:first-child{margin-top:4px}
.repaso-tarjeta{width:100%;gap:18px;padding:14px 22px 14px 14px;background:var(--card-2);color:var(--text);font-family:inherit;text-align:left;cursor:pointer}
.repaso-tarjeta .ej-moneda{width:54px;height:54px}
.repaso-fila{display:flex;gap:14px;margin-top:22px}
.repaso-fila .boton-oro{flex:1 1 0;min-width:0;min-height:60px}
.repaso-todo{margin-top:26px}
.repaso-vacio{margin:56px 0 0;text-align:center;font-size:17px;line-height:1.45;color:var(--text-dim)}

/* Botón aleatorio (DISENO.md §3) */
.boton-azar{
  flex:none;display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:0;cursor:pointer;
  background:var(--card-2);color:var(--shuffle-off);
  border:var(--borde) solid var(--line);border-bottom-width:4px;border-radius:16px;
  transition:transform .08s, border-bottom-width .08s;
}
.boton-azar:active{transform:translateY(2px);border-bottom-width:2px}
.boton-azar[aria-pressed="true"]{color:var(--shuffle-on);border-color:var(--shuffle-on);background:var(--shuffle-on-fondo)}

/* Ventana "¿Qué clases quieres repasar?": hoja desde abajo en celular, ventana centrada en computadora */
.elegir-velo{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:var(--velo)}
.elegir{
  width:100%;max-width:560px;max-height:100%;overflow:auto;
  padding:20px 20px calc(28px + env(safe-area-inset-bottom));
  background:var(--card);border-top:var(--borde) solid var(--line);border-radius:24px 24px 0 0;
}
.elegir-cab{display:flex;align-items:flex-start;gap:12px}
.elegir-textos{flex-grow:1;min-width:0}
.elegir-curso{margin:12px 0 4px;font-size:13px;color:var(--gold)}
.elegir-titulo{margin:0;font-size:26px;line-height:1.2}
.elegir-x{
  flex:none;width:44px;height:48px;padding:11px;cursor:pointer;color:var(--text-dim);
  background:var(--card-2);border:var(--borde) solid var(--line);border-bottom-width:4px;border-radius:12px;
}
.elegir-x svg,.elegir-paso svg{display:block;width:100%;height:100%}
.elegir-fila{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding:0 12px 0 20px;min-height:71px;
  background:var(--card-2);border:var(--borde) solid var(--line);border-radius:16px;
}
.elegir-cab + .elegir-fila{margin-top:24px}
.elegir-lbl{display:block;font-size:14px;line-height:18px;color:var(--text-dim)}
.elegir-valor{display:block;font-size:20px;line-height:26px}
.elegir-botones{display:flex;gap:10px}
.elegir-paso{
  width:47px;height:47px;padding:12px;cursor:pointer;color:var(--gold);
  background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:4px;border-radius:14px;
}
.elegir-paso:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}
.elegir-paso:disabled{color:var(--icon-off);cursor:default}
.elegir-resumen{margin:20px 0 0 4px;font-size:16px;line-height:22px}
.elegir-orden{color:var(--text-dim)}
.elegir-orden.azar{color:var(--ok);font-weight:700}
.elegir .repaso-fila{margin-top:18px}
.elegir-velo.abriendo{animation:velo .18s ease-out both}
.elegir-velo.abriendo .elegir{animation:hojaSube .24s ease-out both}
.elegir-velo.cerrando{animation:velo .16s ease-in reverse forwards}
@keyframes velo{from{opacity:0}to{opacity:1}}
@keyframes hojaSube{from{transform:translateY(40px)}to{transform:none}}

/* ===== Progreso ===== */
.progreso{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:0 20px}
.prog-tarjeta{
  display:flex;align-items:center;gap:12px;padding:14px;
  background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:4px;border-radius:var(--radio-tarjeta);
  transition:transform .08s, border-bottom-width .08s;
}
.prog-tarjeta:active{transform:translateY(2px);border-bottom-width:2px;margin-bottom:2px}
.prog-izq{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:100px}
.anillo{position:relative;display:block;width:80px;height:80px}
.anillo svg{display:block;width:100%;height:100%}
.anillo-fondo{stroke:var(--line);stroke-width:10}
.anillo-arco{stroke:var(--curso-color);stroke-width:10;stroke-linecap:round}
.anillo-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.prog-clases{font-size:13px;line-height:18px;color:var(--text-dim);white-space:nowrap}
.prog-portada{flex:1 1 0;min-width:0;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px}

/* ===== Curso Herramientas (docs/HERRAMIENTAS.md §1–§3; prototipo docs/prototipos/herramientas-y-monedas.html) ===== */
.herr .mapa-cabecera{padding-bottom:18px}
.herr .mapa-avance{margin-bottom:0}
.herr-fila{display:flex;gap:12px;margin-top:24px}
.herr-bib{
  flex:1 1 0;min-width:0;display:flex;align-items:center;gap:14px;height:68px;padding:0 20px;
  background:var(--card-2);border:var(--borde) solid var(--line);border-bottom-width:5px;border-radius:18px;
  color:var(--text);font-weight:700;font-size:20px;
  transition:transform .08s, border-bottom-width .08s;
}
.herr-bib svg{flex:none;width:30px;height:30px}
.herr-bib small{margin-left:auto;color:var(--text-dim);font-weight:500;font-size:14px;white-space:nowrap}
.herr-mas{
  flex:none;width:68px;height:68px;padding:0;cursor:pointer;
  background:var(--card-2);border:var(--borde) solid var(--line);border-bottom-width:5px;border-radius:18px;
  color:var(--gold);font-family:inherit;font-size:34px;font-weight:500;line-height:1;
  transition:transform .08s, border-bottom-width .08s;
}
.herr-bib:active,.herr-mas:active,.herr-grupo:active{transform:translateY(3px);border-bottom-width:2px}

/* Las 6 monedas: dos elipses dibujadas en CSS (docs/MONEDAS.md §2), mismas proporciones que las de la isla.
   La tapa baja 9 px al presionar. Sin ningún brillo encima. */
/* Siempre 3 + 3 (en computadora cabrían 5 y Flashcards quedaría sola abajo) */
.herr-juegos{display:flex;flex-wrap:wrap;justify-content:center;gap:28px clamp(4px, calc((100% - 312px) / 2), 18px);max-width:400px;margin:38px auto 0} /* el hueco se achica en celulares angostos para que quepan 3 */
.herr-juego{
  width:104px;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0;background:none;border:0;color:var(--text);font-family:inherit;cursor:pointer;
}
.herr-juego-nombre{font-weight:700;font-size:17px}
.herr-moneda{position:relative;display:block;width:104px;height:105px}
.herr-borde,.herr-tapa{position:absolute;left:0;width:100%;height:93px;border-radius:50%}
.herr-borde{top:12px;background:var(--curso-oscuro)}
.herr-tapa{
  top:0;display:flex;align-items:center;justify-content:center;
  background:var(--curso-claro);color:var(--blanco);
  transition:transform .09s cubic-bezier(.3,.7,.4,1);
}
.herr-juego:active .herr-tapa{transform:translateY(9px)}
.herr-tapa img{width:64%;height:56%;object-fit:contain}
.herr-tapa svg{width:62px;height:62px}

/* Biblioteca: grupos y cartas */
.herr-lista{margin-top:24px}
.herr-grupo{
  display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;margin-bottom:12px;
  background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:5px;border-radius:18px;color:var(--text);
  transition:transform .08s, border-bottom-width .08s;
}
.herr-grupo-textos{min-width:0}
.herr-grupo strong{display:block;font-size:19px;overflow-wrap:anywhere}
.herr-grupo small{display:block;margin-top:2px;color:var(--text-dim);font-size:14px}
.herr-flecha{margin-left:auto;color:var(--gold);font-size:22px}
.herr-carta{
  display:flex;align-items:center;gap:6px;padding:12px 8px 12px 16px;margin-bottom:10px;
  background:var(--card);border:var(--borde) solid var(--line);border-radius:16px;
}
.herr-carta-textos{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.herr-carta strong{display:block;font-size:18px}
.herr-carta small{color:var(--text-dim);font-size:15px}
.herr-icono{
  flex:none;width:44px;height:44px;padding:11px;cursor:pointer;
  background:none;border:0;border-radius:10px;color:var(--text-dim);
}
.herr-icono svg{display:block;width:100%;height:100%}
.herr-icono:hover{background:var(--card-2)}
.herr-titulo-fila{display:flex;align-items:center;justify-content:center;gap:4px}
.herr-titulo-fila .mapa-titulo{min-width:0}
.herr-vacio{margin:0;padding:30px 10px;text-align:center;color:var(--text-dim);line-height:1.5}
.herr-acciones{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.herr-rojo{
  min-height:44px;padding:0;cursor:pointer;background:none;border:0;
  color:var(--bad);font-family:inherit;font-weight:700;font-size:16px;
}
.herr-nota{margin:10px 0 0;text-align:center;color:var(--text-dim);font-size:14px;line-height:1.4}
.herr-nota-izq{text-align:left}

/* Hojas (sobre la ventana .elegir de Repaso) */
.herr-hoja{position:relative;padding-top:22px}
.herr-hoja-x{position:absolute;right:14px;top:14px}
.herr-hoja .elegir-curso{margin-top:4px}
.herr-hoja-titulo{margin:0 56px 16px 0;font-size:24px}
.herr-lbl{display:block;margin:14px 0 6px;font-size:14px;font-weight:700;color:var(--text-dim)}
.herr-campo{
  width:100%;height:54px;padding:0 16px;
  background:var(--bg);border:var(--borde) solid var(--line);border-radius:14px;
  color:var(--text);font-family:inherit;font-size:18px;outline:0;
}
.herr-campo:focus{border-color:var(--gold)}
.herr-campo::placeholder{color:var(--text-mute)}
.herr-chips{display:flex;flex-wrap:wrap;gap:8px}
.herr-chip{
  height:44px;padding:0 14px;cursor:pointer;
  background:var(--card-2);border:var(--borde) solid var(--line);border-radius:999px;
  color:var(--text);font-family:inherit;font-weight:700;font-size:15px;
}
.herr-chip.on{border-color:var(--gold);color:var(--gold);background:var(--gold-tinte)}
.herr-chip.nuevo{border-style:dashed;color:var(--text-dim)}
.herr-campo-grupo{flex:1 1 150px;height:44px;font-size:15px}
.herr-hoja-acciones{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.herr-boton-rojo{background:var(--bad);color:var(--on-bad);border-bottom-color:var(--bad-edge)}
.herr-checks{display:flex;flex-direction:column;gap:10px}
.herr-check{
  display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;cursor:pointer;text-align:left;
  background:var(--bg);border:var(--borde) solid var(--line);border-radius:14px;
  color:var(--text);font-family:inherit;font-size:16px;
}
.herr-check strong{min-width:0;overflow-wrap:anywhere}
.herr-check small{margin-left:auto;color:var(--text-dim);font-size:14px;white-space:nowrap}
.herr-check[aria-pressed="true"]{border-color:var(--gold)}
.herr-casilla{
  position:relative;flex:none;width:24px;height:24px;border-radius:7px;border:var(--borde) solid var(--line);
}
.herr-check[aria-pressed="true"] .herr-casilla{background:var(--gold);border-color:var(--gold)}
.herr-check[aria-pressed="true"] .herr-casilla::after{
  content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid var(--gold-ink);border-width:0 3px 3px 0;transform:rotate(45deg);
}

/* Aviso corto ("Carta guardada ✓"): sale abajo, sobre todo lo demás */
.herr-aviso{
  position:fixed;left:50%;bottom:26px;z-index:40;transform:translate(-50%,90px);
  padding:12px 18px;border-radius:14px;white-space:nowrap;pointer-events:none;
  background:var(--text);color:var(--bg);font-weight:700;
  transition:transform .3s;
}
.herr-aviso.visible{transform:translate(-50%,0)}

/* ===== Juegos de Herramientas (docs/HERRAMIENTAS.md §4; prototipo docs/prototipos/herramientas-y-monedas.html) ===== */
/* Trivia: la palabra en una tarjeta y debajo los 4 significados (las opciones son las de Read and answer) */
.trivia-palabra{
  padding:26px 20px;text-align:center;font-weight:700;font-size:30px;line-height:1.2;overflow-wrap:anywhere;
  background:var(--card);border:var(--borde) solid var(--line);border-radius:18px;
}
.trivia-ops{margin-top:22px}

/* Match: dos columnas */
.match-cols{display:flex;gap:12px}
.match-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.match-f{
  width:100%;min-height:62px;padding:12px 14px;cursor:pointer;text-align:left;overflow-wrap:anywhere;
  background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:5px;border-radius:16px;
  color:var(--text);font-family:inherit;font-size:17px;font-weight:700;line-height:1.25;
  transition:transform .08s, border-bottom-width .08s, opacity .3s;
}
.match-f:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.match-f.sel{border-color:var(--gold);color:var(--gold);background:var(--gold-tinte)}
.match-f.bien{border-color:var(--ok);color:var(--ok);background:var(--ok-tinte);opacity:.45;cursor:default}
.match-f.mal{border-color:var(--bad);color:var(--bad-claro);background:var(--bad-tinte)}
.match-f.tiembla{animation:cxTiembla .42s ease-in-out}

/* Memories: SIEMPRE 4 columnas × 3 filas, máx. 440 px, carta 3:4 (entra entera en 390 × 844 sin scroll) */
.mem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:440px;margin:0 auto}
.mem-c{position:relative;aspect-ratio:3/4;padding:0;cursor:pointer;perspective:800px;background:none;border:0;color:var(--text);font-family:inherit}
.mem-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.mem-c.flip .mem-in{transform:rotateY(180deg)}
.mem-cara{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px;
  text-align:center;border-radius:13px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.mem-atras{background:#3E64F1}
.mem-atras svg{width:44%;height:44%;color:var(--blanco)}
.mem-frente{
  transform:rotateY(180deg);overflow:hidden;hyphens:auto;overflow-wrap:anywhere;
  background:var(--card);border:var(--borde) solid var(--line);
  font-weight:700;font-size:13px;line-height:1.15;
}
.mem-c.par .mem-frente{border-color:var(--ok);color:var(--ok);background:var(--ok-tinte)}
.mem-c.mal .mem-frente{border-color:var(--bad);color:var(--bad-claro);background:var(--bad-tinte)}
.mem-c.fuera{opacity:0;transform:scale(.8);transition:opacity .35s, transform .35s;pointer-events:none}

/* Flashcards */
.fc-zona{display:flex;flex-direction:column;align-items:center;gap:18px}
.fc-c{
  width:100%;max-width:460px;aspect-ratio:4/5;max-height:46vh;padding:0;cursor:pointer;
  perspective:1000px;background:none;border:0;color:var(--text);font-family:inherit;
}
.fc-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.fc-c.flip .fc-in{transform:rotateY(180deg)}
.fc-cara{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;
  text-align:center;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:5px;
}
.fc-atras{transform:rotateY(180deg)}
.fc-w{font-weight:700;font-size:30px;line-height:1.2;overflow-wrap:anywhere}
.fc-chico{font-size:16px;color:var(--text-dim);overflow-wrap:anywhere}
.fc-m{font-weight:700;font-size:26px;line-height:1.3;color:var(--gold);overflow-wrap:anywhere}
.fc-tip{font-size:14px;color:var(--text-dim)}
.fc-btns{display:flex;gap:8px;width:100%;max-width:460px}
.fc-b{
  flex:1 1 0;min-width:0;height:58px;padding:0 4px;cursor:pointer;
  background:var(--card-2);border:var(--borde) solid var(--line);border-bottom-width:5px;border-radius:16px;
  color:var(--text);font-family:inherit;font-weight:700;font-size:15px;
  transition:transform .08s, border-bottom-width .08s;
}
.fc-b:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.fc-b.otra{color:var(--bad-claro);border-color:#5A3034}
.fc-b.dif{color:var(--gold);border-color:#5A4A2C}
.fc-b.se{color:var(--ok);border-color:#2F5A41}
.fc-b:disabled{opacity:.35;cursor:default}

/* Maze y Cups: el significado sale grande en el centro y sube a su sitio (lo anima herr-maze-cups.js) */
.juego-titulo.presenta{width:fit-content;max-width:100%}

/* Maze (prototipo docs/prototipos/laberinto.html): las medidas del laberinto las pone herr-maze-cups.js */
.juego-col.maze-col{max-width:980px}
.maze-cuerpo{margin-top:14px}
.maze-stage{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.maze-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.maze-svg.oculto,.maze-bola.oculto{display:none}
.maze-suelo{fill:var(--maze-suelo)}
.maze-salida{fill:var(--maze-inicio);stroke:var(--maze-inicio-borde);stroke-width:2}
.maze-pared{fill:none;stroke:var(--maze-pared);stroke-linecap:round}
.maze-puerta{position:absolute;transition:all .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.maze-puerta img{display:block;width:100%;filter:drop-shadow(0 6px 10px var(--maze-sombra));transition:filter .3s}
.maze-puerta.apagada img{filter:brightness(.55) saturate(.7)}
.maze-carta{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;
  padding:12px 14px;text-align:center;overflow-wrap:anywhere;
  background:var(--maze-carta);border:3px solid var(--chip-borde);border-radius:16px;
  font-weight:700;font-size:20px;line-height:1.15;transition:all .25s;
}
.maze-puerta.movil .maze-carta{font-size:14px;padding:8px 6px}
.maze-carta.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.maze-tag{
  position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;opacity:0;
  padding:5px 10px;background:var(--card-2);border:var(--borde) solid var(--line);border-radius:10px;
  font-weight:700;font-size:14px;line-height:1.2;transition:opacity .2s;
}
.maze-puerta.movil .maze-tag{bottom:-26px;font-size:12px;padding:3px 7px}
.maze-tag.on{opacity:1}
.maze-tag.bien{border-color:var(--ok);color:var(--ok);background:var(--ok-fondo)}
.maze-tag.mal{border-color:var(--bad);color:var(--bad-claro);background:var(--bad-fondo)}
.maze-bola{
  position:absolute;border-radius:50%;transform:translate(-50%,-50%);cursor:grab;
  background:var(--maze-bola);box-shadow:0 0 18px var(--maze-bola-brillo);
}
.maze-bola.agarrada{cursor:grabbing}
.maze-bola.choque{background:var(--bad);box-shadow:0 0 22px var(--maze-choque-brillo)}

/* Cups (prototipo docs/prototipos/herramientas-y-monedas.html): la tarjeta viaja siempre con su vaso */
.cup-cuerpo{margin-top:10px}
.cup-stage{position:relative;width:100%;height:300px}
.cup{
  position:absolute;left:0;top:0;z-index:2;padding:0;cursor:pointer;background:none;border:0;
  transition:opacity .3s, transform .45s cubic-bezier(.3,.7,.4,1);will-change:transform;
}
.cup:disabled{cursor:default}
.cup img{display:block;width:100%;filter:drop-shadow(0 8px 12px var(--cup-sombra));pointer-events:none}
.cup.quieto{transition:none}
.cup-card{
  position:absolute;left:0;top:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:6px;
  background:var(--card-2);border:var(--borde) solid var(--line);border-radius:12px;
  font-weight:700;line-height:1.1;text-align:center;overflow:hidden;overflow-wrap:anywhere;
  opacity:0;transition:opacity .2s, transform .45s cubic-bezier(.3,.7,.4,1);
}
.cup-card span{transform:scale(.9);transition:transform .25s cubic-bezier(.2,1.5,.4,1)}
.cup-card.ver{opacity:1}
.cup-card.ver span{transform:scale(1.07)}
.cup-card.bien{border-color:var(--ok);color:var(--ok);background:var(--ok-tinte-2)}
.cup-card.mal{border-color:var(--bad);color:var(--bad-claro);background:var(--bad-tinte-2)}

@media (prefers-reduced-motion:reduce){
  .moneda .moneda-aro{animation:none}
  .moneda-cara,.moneda-num,.herr-tapa,.herr-aviso{transition:none} /* sin animación, pero se sigue hundiendo */
  .ventana-isla.abriendo,.ventana-isla.cerrando{animation:none}
  .iv-vida.cae{animation:none}
  .cx-ficha.tiembla,.cx-barra.entra,.iv-respuesta,.match-f.tiembla{animation:none}
  .mem-in,.fc-in,.match-f,.mem-c.fuera{transition:none}
  .hoja,.barra-relleno,.repaso-barra svg{transition:none}
  .elegir-velo.abriendo,.elegir-velo.abriendo .elegir,.elegir-velo.cerrando{animation:none}
}

@media (min-width:600px){
  .contenido{max-width:none}
  .cursos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Computadora: menú a la izquierda ===== */
@media (min-width:900px){
  .contenido{
    margin-left:var(--menu-ancho);
    margin-right:0;
    padding:0 80px 64px;
  }

  .nav{
    top:0;right:auto;bottom:0;width:var(--menu-ancho);
    display:flex;flex-direction:column;gap:6px;
    border-top:0;border-right:var(--borde) solid var(--line);
    padding:28px 12px;
  }
  .nav-marca{
    display:block;
    padding:0 16px 23px;
    font-family:var(--font-texto);font-weight:700;font-size:21px;letter-spacing:var(--titulo-espaciado);color:var(--text);
  }
  .nav-item{
    flex-direction:row;justify-content:flex-start;gap:14px;
    justify-self:auto;min-width:0;min-height:52px;padding:0 16px;font-size:16px;
  }
  .nav-item img{width:28px;height:28px}
  .nav-item:hover{background:var(--card)}
  .nav-item.activo{background:var(--nav-activo)}

  .inicio-cabecera{padding:72px 0 56px}
  .inicio-cabecera .saludo{font-size:44px}
  .cursos{gap:48px 36px;padding:0}

  .volver{font-size:16px}
  .mapa{padding:37px 0 0}
  .mapa-titulo{margin-top:7px;font-size:40px}
  .mapa-avance{margin:19px 0 7px}
  .herr-juegos{gap:32px 40px}
  .mapa-cabecera{padding-bottom:29px}
  .camino{--amplitud:110px;padding-top:61px}
  .ventana-isla{left:calc(50% - 200px);right:auto;width:400px;padding:24px}
  .ventana-texto{font-size:16px}

  .clase{padding:52px 0 0}
  .clase-titulo{margin:-4px 0 22px;font-size:34px}
  .clase-subtitulo{margin:35px 0 14px;font-size:26px;line-height:34px}
  .ej-sub{font-size:14px}

  .contenido.sin-menu{margin-left:0;padding:0}
  .juego-col{padding:31px 20px 24px}
  .juego-etq{margin:44px 0 7px}
  .juego-titulo{margin-bottom:6px;font-size:40px}
  .juego-instruccion{font-size:19px;line-height:24px}
  .juego-cuerpo{margin-top:49px}
  .fichas{gap:16px}
  .ficha{min-height:56px;padding:0 20px;font-size:20px}
  .huecos{gap:13px 12px}
  .hueco-raya{min-width:80px;min-height:60px}
  .banco{margin-top:57px}
  .juego-cuerpo .frase{margin-top:60px;font-size:32px;column-gap:10px}
  .frase-hueco{min-width:120px;min-height:58px;margin:0 10px}
  .frase-hueco + .frase-palabra.pegada{margin-left:-20px}
  .opciones{margin-top:44px}
  .hoja-dentro{padding:30px 20px calc(36px + env(safe-area-inset-bottom))}
  .hoja-titulo{font-size:26px}
  .hoja-frase{font-size:26px}
  .boton-oro,.boton-sec,.boton-hoja{min-height:64px}
  .real-tiempo{margin-top:-22px}
  .situacion{margin-top:-17px;padding:18px 22px}
  .situacion-texto{font-size:20px}
  .cx-barras{gap:12px;margin-bottom:12px}
  .cx-barra{min-height:72px}
  .cx-barra-nombre{font-size:11px}
  .cx-barra-palabras{font-size:20px}
  .cx-barra.larga .cx-barra-palabras{font-size:18px}
  .cx-rejilla{gap:12px}
  .cx-ficha{min-height:72px;font-size:20px;padding:0 8px}
  .cx-ficha.larga{font-size:17px}
  .cx-borrar{flex-basis:200px}
  .iv-pregunta{font-size:24px}
  .iv-linea{font-size:18px}
  .real-segundos{margin-top:8px;font-size:13px}
  .real-palabra{margin-top:81px;font-size:72px}
  .real-boton{height:84px;font-size:26px}
  .lectura-texto{margin-top:-17px;padding:26px}
  .lectura-parrafo{font-size:19px}
  .lectura-pregunta{margin:30px 0 12px;font-size:24px}
  .opcion{min-height:62px;font-size:19px}
  .juego-pie{padding:30px 20px calc(36px + env(safe-area-inset-bottom))}

  .repaso{padding:0}
  .repaso-curso{margin-bottom:20px}
  .repaso-barra{padding:0 24px 0 26px}
  .repaso-etq{font-size:11px}
  .repaso-tarjeta{padding:12px 22px 12px 12px}
  .elegir-velo{align-items:center;padding:20px}
  .elegir{width:520px;padding:30px;border:var(--borde) solid var(--line);border-radius:24px}
  .elegir-curso{margin-top:0;font-size:11px}
  .elegir-titulo{font-size:24px}
  .elegir-cab + .elegir-fila{margin-top:20px}
  .elegir-resumen{margin-top:18px;font-size:14px}
  .elegir-velo.abriendo .elegir{animation:none}

  .progreso{gap:32px;padding:0}
  .prog-tarjeta{gap:24px;padding:26px 28px}
  .prog-izq{gap:10px;padding-left:0;width:150px}
  .anillo{width:132px;height:132px}
  .anillo-fondo,.anillo-arco{stroke-width:9.1}
  .anillo-num{font-size:28px}
  .prog-clases{font-size:14px}
}

@media (min-width:1200px){
  .cursos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .progreso{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Curso DET (tanda 16, docs/DET.md; copia de docs/prototipos/det-lectura.html) =====
   Dentro de .det, el champán pasa a ser el azul del DET: botones, barras, foco y etiquetas. */
.det{--gold:var(--det);--gold-edge:var(--det-edge);--gold-ink:var(--det-ink);--gold-tinte:var(--det-tinte)}

/* Portada (#curso/det) */
.det-portada{max-width:1000px;margin:0 auto;padding:13px 20px 0}
.det-cabecera{display:flex;flex-direction:column;padding-bottom:26px;margin-bottom:26px;border-bottom:var(--borde) solid var(--line)}
.det-cabecera .volver{align-self:flex-start}
.det-titulo{margin:0;font-size:30px;line-height:1.3;text-align:center}
.det-puntaje{display:block;width:100%;margin-top:18px;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:var(--text);font-family:inherit}
.det-puntaje-ext{display:flex;width:100%;justify-content:space-between;font-size:20px;font-weight:700;margin-bottom:8px}
.det-puntaje-barra{position:relative;display:block;height:16px;border-radius:999px;background:var(--card-2)}
.det-puntaje-relleno{display:block;height:100%;width:0;border-radius:999px;background:var(--gold);transition:width .6s ease}
.det-puntaje-txt{display:block;margin:10px 0 0;font-size:14px;color:var(--text-dim);text-align:center}
.det-puntaje-txt strong{color:var(--gold);font-size:16px}
.det-examen{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;max-width:680px;margin:0 auto 26px;padding:18px 22px;border-radius:20px;background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:5px}
.det-examen-dibujos{display:contents}
.det-examen-dibujos img{display:block;height:auto}
.det-examen-hoja{width:62px;grid-column:1;grid-row:1;justify-self:start}
.det-examen-reloj{width:92px;grid-column:3;grid-row:1;justify-self:end}
.det-examen-texto{grid-column:2;grid-row:1;min-width:0;text-align:center}
.det-examen-titulo{margin:0 0 4px;font-size:21px;line-height:1.2}
.det-examen-sub{margin:0 0 12px;font-size:14px;line-height:1.4;color:var(--text-dim)}
.det-examen .boton-oro{display:block;min-height:50px;max-width:250px;width:100%;margin-left:auto;margin-right:auto}
.det-moneda img.det-icono-ancho{width:76%;height:76%}
/* Secciones: 7 en la columna izquierda y 6 en la derecha. En el teléfono, el círculo va arriba. */
.det-secciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(7,auto);grid-auto-flow:column;gap:12px}
.det-seccion{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:16px 8px 14px;text-align:center;cursor:pointer;font-family:inherit;color:var(--text);background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:5px;border-radius:18px;transition:transform .08s,border-bottom-width .08s}
.det-seccion:active{transform:translateY(3px);border-bottom-width:2px}
.det-moneda{position:relative;flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--det);box-shadow:0 5px 0 var(--det-edge)}
.det-moneda img{display:block;width:58%;height:58%;object-fit:contain}
.det-seccion-texto{min-width:0}
.det-seccion-nombre{display:block;font-size:16px;line-height:1.25;font-weight:700}
.det-seccion-datos{display:block;margin-top:3px;font-size:13px;line-height:1.35;color:var(--text-dim)}
.det-aviso{display:flex;gap:12px;margin:26px 0 24px;padding:14px 16px;border:var(--borde) solid var(--line);border-radius:16px;color:var(--text-mute);font-size:13px;line-height:1.45}
.det-aviso svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--text-mute)}
.det-aviso strong{color:var(--text-dim)}
@media (max-width:520px){
  .det-examen{gap:10px;padding:14px 12px}
  .det-examen-hoja{width:44px}
  .det-examen-reloj{width:62px}
  .det-examen-titulo{font-size:18px}
  .det-examen-sub{font-size:13px}
}
@media (min-width:600px){
  .det-secciones{gap:14px 20px}
  .det-seccion{flex-direction:row;gap:16px;padding:14px 16px;text-align:left}
  .det-moneda{width:62px;height:62px}
  .det-seccion-texto{flex-grow:1}
  .det-seccion-nombre{font-size:19px}
  .det-seccion-datos{font-size:14px}
}
/* Hoja "Tus exámenes" */
.det-velo{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:var(--velo)}
.det-velo[hidden]{display:none}
.det-hoja{width:100%;max-width:560px;max-height:90vh;overflow:auto;padding:20px;border-radius:20px;background:var(--card);border:var(--borde) solid var(--line)}
.det-hoja h2{margin:0 0 14px;font-size:22px}
.det-hoja .boton-sec{margin-top:16px}
.det-hoja-vacio{margin:0;color:var(--text-dim)}
.det-grafica{display:block;width:100%;height:auto}
/* Letra de la gráfica, en unidades del dibujo (500 de ancho): a 390 px la gráfica mide ~290 px, así que
   22 unidades ≈ 12,7 px reales; en la computadora mide 450–520 px y 14 unidades ≈ 12,6–14,5 px */
.det-graf-txt{fill:var(--text-mute);font-size:14px}
@media (max-width:599px){.det-graf-txt{font-size:22px}}
.det-hist{margin:14px 0 0;padding:0;list-style:none}
.det-hist li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:var(--text-dim)}
.det-hist li strong{color:var(--text)}
.det-hist li span:first-child{white-space:nowrap} /* la fecha no se parte en dos líneas en el teléfono */
.det-hist li span:last-child{text-align:right}

/* Pantallas de una sección (#det/<clave>): usan .juego, .juego-col, .juego-cabecera y .juego-pie */
.det-flex{flex-grow:1;display:flex;flex-direction:column}
.det-reloj{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 10px;border-radius:999px;background:var(--card-2);border:var(--borde) solid var(--line);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;transition:color .2s,border-color .2s,background .2s}
.det-reloj svg{width:18px;height:18px}
.det-reloj.poco{color:var(--bad);border-color:var(--bad);background:var(--bad-fondo)}
/* Pantalla de inicio de la sección */
.det-intro{flex-grow:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:70px 8px 20px}
.det-intro .det-moneda{width:104px;height:104px;box-shadow:0 8px 0 var(--det-edge)}
.det-intro .det-moneda .det-icono-examen{width:60%;height:auto}
.det-intro-etq{margin:30px 0 6px;color:var(--gold)}
.det-intro-titulo{margin:0;font-size:32px;line-height:1.15}
.det-intro-texto{margin:12px 0 0;max-width:420px;color:var(--text-dim);font-size:17px;line-height:1.45}
.det-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.det-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;background:var(--card-2);border:var(--borde) solid var(--line);font-size:14px;font-weight:700;color:var(--text)}
.det-intro-nota{margin:22px 0 0;max-width:420px;color:var(--text-mute);font-size:14px;line-height:1.45}
/* Preguntas */
.det-preg-titulo{margin:26px 0 4px;font-size:26px;line-height:1.2;text-align:center}
.det-preg-es{margin:0;text-align:center;color:var(--text-dim);font-size:15px}
.det-cuerpo{margin-top:30px}
.det-entra{animation:detEntra .22s ease-out both}
@keyframes detEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Read and Select */
.det-rs-tiempo{height:10px;border-radius:999px;background:var(--card-2);overflow:hidden;max-width:420px;margin:0 auto}
.det-rs-tiempo-relleno{height:100%;width:100%;border-radius:999px;background:var(--gold)}
.det-rs-palabra{margin:64px 0 40px;text-align:center;font-size:52px;line-height:1.2;font-weight:700;overflow-wrap:anywhere}
.det-rs-boton{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;height:76px;cursor:pointer;font-family:inherit;font-weight:700;font-size:22px;border-radius:var(--radio-boton);border:var(--borde) solid;border-bottom-width:5px;transition:transform .08s,border-bottom-width .08s}
.det-rs-boton svg{width:24px;height:24px}
.det-rs-boton:active:not(:disabled),.det-rs-boton.pulsado{transform:translateY(3px);border-bottom-width:2px}
.det-rs-si{background:var(--ok-fondo);border-color:var(--ok);color:var(--ok)}
.det-rs-no{background:var(--bad-fondo);border-color:var(--bad);color:var(--bad-claro)}
/* Palabras a medias (Fill in the Blanks y Read and Complete, DET.md §3): un cilindro con borde que encierra TODA
   la palabra; cada letra en su casilla, separadas por una línea fina; el mismo fondo de alrededor. */
.det-hueco{position:relative;display:inline-flex;vertical-align:middle;margin:2px 1px;border:var(--borde) solid var(--line);border-radius:10px;overflow:hidden;cursor:text;white-space:nowrap;transition:border-color .15s}
.det-letra{display:inline-grid;place-items:center;box-sizing:border-box;width:var(--celda,16px);height:calc(var(--celda,16px) * 1.55);line-height:1;font-size:calc(var(--celda,16px) * .9);border-left:1px solid var(--line)}
.det-letra:first-child{border-left:0}
.det-letra.fija{font-weight:500;color:var(--text)}
.det-letra.vacia{font-weight:700;color:var(--text);background:rgba(255,255,255,.07)}
.det-hueco.activo{border-color:var(--gold)}
.det-hueco.activo .det-letra{border-left-color:var(--det-linea)}
.det-hueco.activo .det-letra:first-child{border-left:0}
.det-hueco.activo .det-letra.cursor{background:var(--gold-tinte);box-shadow:inset 0 -3px 0 var(--gold)}
.det-hueco-input{position:absolute;top:0;bottom:0;right:0;width:var(--ancho-input);opacity:0;border:0;padding:0;margin:0;font-family:inherit;font-size:16px;background:transparent;color:transparent;caret-color:transparent;cursor:text}
.det-hueco.bien{border-color:var(--ok)}
.det-hueco.bien .det-letra.vacia{color:var(--ok)}
.det-hueco.mal{border-color:var(--bad)}
.det-hueco.mal .det-letra.vacia{color:var(--bad-claro)}
.det-correccion{margin-left:4px;color:var(--ok);font-weight:700}
.det-fb-frase{margin:40px 0 0;text-align:center;font-size:22px;line-height:2.1;--celda:22px}
.det-rc-titulo{margin:0 0 14px;text-align:center;font-size:19px}
.det-rc-texto{margin:0;padding:18px;background:var(--card);border:var(--borde) solid var(--line);border-radius:20px;font-size:17px;line-height:2.35;--celda:17px}
/* Resultado */
.det-res{flex-grow:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 8px 20px}
.det-res-etq{margin:0;color:var(--gold)}
.det-res-titulo{margin:8px 0 0;font-size:32px}
.det-res-num{margin:24px 0 0;font-size:64px;line-height:1;font-weight:700}
.det-res-num small{font-size:28px;color:var(--text-dim)}
.det-res-sub{margin:8px 0 0;color:var(--text-dim);font-size:16px}
.det-nivel{margin-top:28px;padding:16px 20px;border:var(--borde) solid var(--line);border-radius:18px;background:var(--card);width:100%;max-width:400px}
.det-nivel-texto{margin:0;font-size:15px;color:var(--text-dim)}
.det-nivel-texto strong{color:var(--text)}
.det-puntos{display:flex;justify-content:center;gap:8px;margin-top:12px}
.det-punto{width:34px;height:12px;border-radius:999px;background:var(--card-2)}
.det-punto.on{background:var(--det);box-shadow:0 3px 0 var(--det-edge)}
.det-consejo{margin:18px 0 0;max-width:400px;text-align:left;font-size:15px;line-height:1.5;color:var(--text-dim)}
.det-consejo strong{color:var(--gold)}
/* Revisión */
.det-rev-titulo{margin:18px 0 18px;font-size:26px}
.det-rev-lista{display:flex;flex-direction:column;gap:10px}
.det-rev-fila{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--card);border:var(--borde) solid var(--line);font-size:16px;line-height:1.45}
.det-rev-fila.bien{border-color:var(--ok-linea)}
.det-rev-fila.mal{border-color:var(--bad-linea)}
.det-rev-icono{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px}
.bien .det-rev-icono{background:var(--ok);color:var(--ok-ink)}
.mal .det-rev-icono{background:var(--bad);color:var(--on-bad)}
.det-rev-palabra{font-weight:700}
.det-rev-dato{margin-left:auto;text-align:right;font-size:14px;color:var(--text-dim)}
.det-rev-texto{font-size:16px;line-height:2.3;--celda:16px}
.det-rev-texto .det-hueco{cursor:default}
.det-rc-titulo.det-rev-rc{margin-top:22px}
/* Progreso: la tarjeta del DET lleva el último puntaje */
.prog-clases.det-prog{white-space:normal;text-align:center}

@media (min-width:900px){
  .det-portada{padding:37px 0 0}
  .det-titulo{font-size:48px}
  .det-secciones{column-gap:40px}
  .det-moneda{width:70px;height:70px}
  .det-seccion-nombre{font-size:21px}
  .det-rs-palabra{font-size:64px}
  .det-fb-frase{font-size:26px;--celda:23px}
  .det-rc-texto{padding:26px 30px;font-size:19px;--celda:18px}
}
@media (prefers-reduced-motion:reduce){
  .det-entra{animation:none}
  .det-seccion,.det-rs-boton,.det-puntaje-relleno{transition:none}
}

/* ===== Curso DET · secciones de escuchar, leer y escribir (tanda 17) ===== */
.juego-col.det-ancha{max-width:1100px}
.det-ancha .det-preg-titulo{font-size:20px;margin-top:18px}
.det-ancha .det-cuerpo{margin-top:18px}
.det-n{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;border:var(--borde) solid var(--line);font-size:12px;font-weight:700;color:var(--text-dim);line-height:1}
/* Cuadro para escribir (Listen and Type y las de escribir) */
.det-area{display:block;width:100%;min-height:140px;padding:16px;resize:none;font-family:inherit;background:var(--card);border:var(--borde) solid var(--line);border-radius:18px;font-size:18px;line-height:1.5;color:var(--text)}
.det-area::placeholder{color:var(--text-mute)}
.det-area:focus{outline:none;border-color:var(--gold)}
.det-area[readonly]{color:var(--text-dim)}
.det-area.det-area-larga{min-height:150px}
.det-area.det-area-tema{min-height:200px}
.det-contador{margin:6px 2px 0;text-align:right;font-size:13px;color:var(--text-mute)}
/* Listen and Type: el botón azul grande que se hunde */
.det-lt-centro{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:22px}
.det-lt-boton{position:relative;display:block;width:88px;height:96px;padding:0;background:none;border:0;cursor:pointer}
.det-lt-base,.det-lt-cara{position:absolute;left:0;width:88px;height:88px;border-radius:50%}
.det-lt-base{top:8px;background:var(--det-edge)}
.det-lt-cara{top:0;display:grid;place-items:center;background:var(--det);color:var(--det-ink);transition:transform .09s cubic-bezier(.3,.7,.4,1)}
.det-lt-cara svg{width:44px;height:44px}
.det-lt-boton:active:not(:disabled) .det-lt-cara,.det-lt-boton.suena .det-lt-cara{transform:translateY(8px)}
.det-lt-boton:disabled{cursor:default}
.det-lt-boton:disabled .det-lt-cara{background:var(--ventana-gris);color:var(--icon-off)}
.det-lt-boton:disabled .det-lt-base{background:var(--ventana-gris-edge)}
/* Interactive Reading */
.det-ir{display:flex;flex-direction:column;gap:18px}
.det-ir-texto{padding:16px 18px;background:var(--card);border:var(--borde) solid var(--line);border-radius:20px;max-height:38vh;overflow:auto;font-size:16px;line-height:1.75}
.det-ir-texto p{margin:0 0 12px}
.det-ir-texto p:last-child{margin-bottom:0}
.det-ir-etq{margin:0 0 10px;color:var(--text-mute)}
.det-ir-blank{display:inline-flex;align-items:center;gap:6px;min-width:92px;padding:0 4px 1px;border-bottom:var(--borde) solid var(--line);vertical-align:baseline}
.det-ir-w{color:var(--gold);font-weight:700}
.det-ir-gap{display:block;margin:0 0 12px;padding:10px 12px;border:var(--borde) dashed var(--line);border-radius:12px;color:var(--text-mute)}
.det-ir-gap.lleno{border-style:solid;border-color:var(--gold);color:var(--text)}
.det-ir-or.toca{cursor:pointer;border-radius:4px}
.det-ir-or.sel{background:var(--gold-tinte);box-shadow:0 0 0 3px var(--gold-tinte)}
.det-ir-q{margin:0 0 14px;font-size:18px;line-height:1.35;font-weight:700}
.det-ir-fila{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.det-ir-select{flex:1;min-width:0;height:50px;padding:0 12px;border-radius:14px;font-family:inherit;background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:4px;color:var(--text);font-size:16px}
.det-op{display:flex;gap:12px;align-items:flex-start;width:100%;margin-bottom:10px;padding:14px;text-align:left;cursor:pointer;font-family:inherit;color:var(--text);border-radius:16px;background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:4px;font-size:16px;line-height:1.4;transition:transform .08s,border-bottom-width .08s}
.det-op:active{transform:translateY(2px);border-bottom-width:2px}
.det-op.sel{border-color:var(--gold);background:var(--gold-tinte)}
.det-op.sel .det-n{border-color:var(--gold);color:var(--gold)}
.det-ir-sel{padding:14px;border-radius:16px;border:var(--borde) dashed var(--line);color:var(--text-mute);font-size:16px;line-height:1.45}
.det-ir-sel.lleno{border-style:solid;border-color:var(--gold);color:var(--text)}
/* Revisión de las secciones nuevas */
.det-rev-sub{margin:24px 0 12px;font-size:19px}
.det-rev-chico{display:block;font-size:14px;color:var(--text-dim)}
.det-rev-chico.aire{margin-top:12px}
.det-rev-ok{color:var(--ok);font-weight:700}
.det-modelo{margin:14px 0 0;padding:14px;border-radius:14px;background:var(--card);font-size:15px;line-height:1.55;color:var(--text)}
.det-modelo-etq{display:block;margin-bottom:6px;color:var(--gold)}
.det-puntos-lista{margin:10px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.5;color:var(--text-dim)}
.det-puntos-lista li{position:relative;padding-left:22px;margin-bottom:4px}
.det-puntos-lista li::before{content:'';position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.det-rev-foto{display:grid;gap:12px;padding:14px;margin-bottom:14px;border-radius:18px;background:var(--card);border:var(--borde) solid var(--line)}
.det-rev-foto.una{grid-template-columns:1fr}
.det-rev-foto img{width:100%;max-height:220px;object-fit:cover;border-radius:12px}
.det-tuyo{margin:0;font-size:16px;line-height:1.5}
.det-tuyo em{color:var(--text-mute)}
.det-tuyo.aire{margin:0 0 10px}
.det-rev-foto .det-modelo{background:var(--bg)}
.det-aviso-ia{margin:22px 0 0;max-width:400px;padding:12px 14px;border-radius:14px;border:var(--borde) dashed var(--line);font-size:14px;line-height:1.45;color:var(--text-dim);text-align:left}
/* Fotos (Write About the Photo) */
.det-foto-bloque{display:flex;flex-direction:column;gap:16px}
.det-foto{margin:0}
.det-foto img{display:block;width:100%;max-height:42vh;object-fit:contain;border-radius:16px;background:var(--card)}
.det-foto figcaption{margin-top:6px;font-size:12px;color:var(--text-mute)}
/* Temas (Writing Sample e Interactive Writing) */
.det-tema{padding:18px;border-radius:18px;background:var(--card);border:var(--borde) solid var(--line)}
.det-tema-texto{margin:0;font-size:17px;line-height:1.5;font-weight:700}
.det-tema-guia{margin:10px 0 0;padding-left:20px;color:var(--text-dim);font-size:16px;line-height:1.6}
.det-tema-escribir{margin-top:16px}
.det-iw{display:flex;flex-direction:column;gap:18px}
.det-iw-parte{padding:16px;border-radius:18px;border:var(--borde) solid var(--line);opacity:.45}
.det-iw-parte.activa{opacity:1;border-color:var(--gold)}
.det-iw-parte.hecha{opacity:.7}
.det-iw-cab{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-weight:700;font-size:17px}
.det-iw-tema{margin:0 0 12px;color:var(--text-dim);font-size:16px;line-height:1.5}
/* Interactive Listening */
.det-il-escenario{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--card);border:var(--borde) solid var(--line);font-size:15px;line-height:1.45;color:var(--text-dim)}
.det-il-player{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:18px;border-radius:16px;border:var(--borde) solid var(--line)}
.det-il-play{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:12px;border:0;border-bottom:4px solid var(--det-edge);background:var(--det);color:var(--det-ink);cursor:pointer}
.det-il-play svg{width:24px;height:24px}
.det-il-play:disabled{background:var(--ventana-gris);border-bottom-color:var(--ventana-gris-edge);color:var(--icon-off);cursor:default}
.det-il-barras{flex:1;display:flex;align-items:center;gap:3px;height:34px;overflow:hidden}
.det-il-barras span{flex:1;min-width:2px;height:30%;border-radius:999px;background:var(--line)}
.det-il-barras span:nth-child(3n){height:70%}
.det-il-barras span:nth-child(4n){height:45%}
.det-il-barras span:nth-child(5n){height:90%}
.det-il-barras.suena span{background:var(--det);animation:detBarra .9s ease-in-out infinite alternate}
.det-il-barras.suena span:nth-child(2n){animation-delay:.2s}
.det-il-barras.suena span:nth-child(3n){animation-delay:.4s}
@keyframes detBarra{from{transform:scaleY(.4)}to{transform:scaleY(1.1)}}
.det-il-player .det-chip{flex:none}
.det-il-preg{margin-bottom:14px}
.det-il-q{margin:0 0 6px;font-weight:700;font-size:16px}
.det-il-frase{padding:12px 14px;border-radius:14px;background:var(--card);border:var(--borde) solid var(--line);font-size:16px;line-height:2}
.det-il-input{width:150px;max-width:60%;margin:0 4px;padding:2px 4px;border:0;border-bottom:var(--borde) solid var(--det);background:transparent;color:var(--text);font-family:inherit;font-size:16px;font-weight:700;outline:none}
.det-chat{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.det-burbuja{max-width:85%;padding:10px 14px;border-radius:16px;font-size:16px;line-height:1.4}
.det-burbuja.ella{align-self:flex-start;display:flex;gap:8px;align-items:center;background:var(--card);border:var(--borde) solid var(--line);border-bottom-left-radius:4px}
.det-burbuja-voz svg{width:18px;height:18px;color:var(--det);display:block}
.det-burbuja-oir{display:grid;place-items:center;flex:none;width:32px;height:32px;margin:-6px 0 -6px -6px;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer}
.det-burbuja-oir:hover{background:var(--card-2)}
.det-il-num{display:block;margin-bottom:4px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--det)}
.det-burbuja.yo{align-self:flex-end;background:var(--gold-tinte);border:var(--borde) solid var(--gold);border-bottom-right-radius:4px}

@media (min-width:900px){
  .det-iw{flex-direction:row;align-items:stretch}
  .det-iw-parte{flex:1}
  .det-foto-bloque.lado{flex-direction:row;align-items:stretch}
  .det-foto-bloque.lado .det-foto{flex:1}
  .det-foto-bloque.lado .det-wp-col{flex:1;display:flex;flex-direction:column}
  .det-foto-bloque.lado .det-area{flex:1}
  .det-foto img{max-height:52vh}
  .det-rev-foto{grid-template-columns:260px 1fr}
  .det-rev-foto.una{grid-template-columns:1fr}
  .det-ir{flex-direction:row;align-items:flex-start;gap:26px}
  .det-ir-texto{flex:1.15;max-height:none;font-size:17px}
  .det-ir-preg{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .det-il-barras.suena span{animation:none}
  .det-op,.det-lt-cara{transition:none}
}

/* ===== Curso DET · secciones de hablar y examen completo (tanda 18) ===== */
/* Grabadora: un botón en el centro (GRABAR → ENVIAR) y la onda encima */
.det-rec-zona{margin-top:18px}
.det-rec-zona[hidden]{display:none}
.det-rec{display:flex;flex-direction:column;align-items:center;gap:14px}
.det-rec-boton{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;height:62px;cursor:pointer;border-radius:16px;font-family:inherit;background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:5px;color:var(--det);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;transition:transform .08s,border-bottom-width .08s}
.det-rec-boton svg{width:24px;height:24px}
.det-rec-boton:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.det-rec-boton:disabled{cursor:default;color:var(--text-mute)}
.det-rec-boton.enviar{background:var(--det);border-color:var(--det-edge);color:var(--det-ink)}
.det-rec-boton.sec{color:var(--text)}
.det-rec-ayuda{margin:0;max-width:420px;text-align:center;font-size:14px;line-height:1.45;color:var(--text-dim)}
.det-rec-ayuda.error{padding:12px 14px;border-radius:14px;background:var(--bad-fondo);border:var(--borde) solid var(--bad);color:var(--bad-claro);text-align:left}
.det-rec-ayuda.error strong{color:var(--text)}
.det-onda{display:flex;align-items:center;gap:5px;height:56px}
.det-onda[hidden]{display:none}
.det-onda span{display:block;width:7px;height:100%;border-radius:999px;background:var(--det);transform:scaleY(.25);transition:transform .08s linear}
/* Revisión de una respuesta hablada */
.det-sp-revision{width:100%;padding:16px;border-radius:18px;background:var(--ok-fondo);border:var(--borde) solid var(--ok)}
.det-sp-revision h3{margin:0 0 12px;color:var(--ok);font-size:18px}
.det-sp-botones{display:flex;flex-wrap:wrap;gap:10px}
.det-boton-chico{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:14px;cursor:pointer;font-family:inherit;background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:4px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.det-boton-chico:active{transform:translateY(2px);border-bottom-width:2px}
.det-boton-chico svg{width:16px;height:16px}
.det-rev-icono.num{background:var(--card-2);color:var(--text)}
/* Interactive Speaking */
.det-is-centro{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:10px;text-align:center}
.det-is-avatar{display:grid;place-items:center;width:110px;height:110px;border-radius:50%;background:var(--det);color:var(--det-ink);box-shadow:0 8px 0 var(--det-edge)}
.det-is-avatar svg{width:52px;height:52px}
.det-is-avatar.habla{animation:detHabla .7s ease-in-out infinite alternate}
@keyframes detHabla{from{transform:scale(1)}to{transform:scale(1.06)}}
.det-is-estado{margin:8px 0 0;font-size:16px;color:var(--text-dim)}
.det-is-pregunta{margin:0;font-size:19px;font-weight:700}
/* Resultado del examen */
.det-res-barra{width:100%;max-width:420px;margin-top:18px}
.det-res-barra .det-puntaje-ext{font-size:15px}
.det-subnotas{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:420px;margin-top:24px}
.det-subnota{padding:12px;border-radius:14px;background:var(--card);border:var(--borde) solid var(--line);text-align:left}
.det-subnota span{display:block;font-size:13px;color:var(--text-dim)}
.det-subnota strong{display:block;margin-top:2px;font-size:24px}
.det-subnota.pend strong{font-size:14px;color:var(--text-mute);font-weight:500;margin-top:6px}
@media (prefers-reduced-motion:reduce){
  .det-is-avatar.habla{animation:none}
  .det-onda span,.det-rec-boton{transition:none}
}

/* ===== Curso DET · puntaje por sección y ventana "Preparación DET" de Progreso (tanda 20) ===== */
/* Resultado de una sección con puntaje */
.det-estimado{margin:18px 0 0;max-width:400px;font-size:16px;line-height:1.4;color:var(--text)}
.det-estimado strong{color:var(--gold);font-size:20px;white-space:nowrap}
.det-estimado small{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--text-mute)}
/* Progreso: la tarjeta del DET es un botón (abre la ventana) */
/* Tarjeta de racha (tanda 25): mismo fondo, borde y radio que .prog-tarjeta; no es un botón */
.racha-tarjeta{display:flex;flex-direction:column;justify-content:center;padding:16px 20px;background:var(--card);border:var(--borde) solid var(--line);border-bottom-width:4px;border-radius:var(--radio-tarjeta);container-type:inline-size}
.racha-dentro{display:flex;align-items:center;gap:20px}
.racha-total{flex:none;display:flex;align-items:center;gap:10px;color:var(--racha)}
.racha-total img{width:44px;height:44px}
.racha-cifra{display:flex;flex-direction:column}
.racha-num{font-size:44px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.racha-txt{font-size:15px;font-weight:700;line-height:1.2}
.racha-semana{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding-left:20px;border-left:var(--borde) solid var(--line)}
.racha-dia{display:flex;flex-direction:column;align-items:center;gap:6px}
.racha-letra{font-size:13px;font-weight:700;color:var(--text-dim)}
.racha-circulo{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--racha-apagada)}
.racha-circulo.si{background:var(--racha);color:var(--racha-check)}
.racha-circulo.si svg{width:20px;height:20px}
.racha-circulo.hoy{background:transparent;box-shadow:inset 0 0 0 2px var(--racha)}
.racha-tarjeta.cero .racha-total{color:var(--icon-off)}
.racha-tarjeta.cero .racha-total img{filter:grayscale(1);opacity:.55}
/* Una fila si la tarjeta tiene sitio; si no (celular, o una columna estrecha de la cuadrícula), los días debajo */
@media (max-width:520px){
  .racha-dentro{flex-direction:column;align-items:stretch;gap:14px}
  .racha-semana{padding-left:0;border-left:0}
}
@container (max-width:480px){
  .racha-dentro{flex-direction:column;align-items:stretch;gap:14px}
  .racha-semana{padding-left:0;border-left:0}
}
button.prog-tarjeta{width:100%;font-family:inherit;color:inherit;text-align:left;cursor:pointer}
/* La ventana (sobre .elegir-velo / .elegir de Repaso) */
.detp-semana{margin-top:20px}
.detp-tips{margin-top:12px;padding:4px 16px 14px;border-radius:16px;background:var(--card-2);border:var(--borde) solid var(--line)}
.detp-tips[hidden]{display:none}
.detp-tips .det-puntos-lista{font-size:15px;line-height:1.45;color:var(--text)}
.detp-tips .det-puntos-lista li{margin-bottom:8px}
.detp-tips .det-puntos-lista li:last-child{margin-bottom:0}
.detp-lista{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.detp-fila{background:var(--bg);border:var(--borde) solid var(--line);border-bottom-width:4px;border-radius:18px}
.detp-barra{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:8px 14px 12px 12px;background:none;border:0;border-radius:18px;cursor:pointer;color:var(--text);text-align:left;font-family:inherit}
.detp-barra .det-moneda{width:44px;height:44px;box-shadow:0 4px 0 var(--det-edge)}
.detp-barra .det-moneda .det-icono-examen{width:60%;height:auto}
.detp-nombre{flex-grow:1;min-width:0;font-size:17px;line-height:1.25;font-weight:700}
.detp-rango{flex:none;font-size:15px;font-weight:700;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.detp-barra svg{flex:none;width:20px;height:20px;color:var(--gold);transition:transform .2s}
.detp-barra[aria-expanded="true"] svg{transform:rotate(180deg)}
.detp-grafica{padding:0 14px 14px}
.detp-grafica[hidden]{display:none}
.detp-vacio{margin:0;padding:4px 2px 2px;font-size:15px;line-height:1.45;color:var(--text-dim)}
.detp-nota{margin:6px 0 0;font-size:12px;color:var(--text-mute);text-align:center}
.detp-aviso{margin:16px 2px 0;font-size:12px;line-height:1.45;color:var(--text-mute)}
@media (min-width:900px){
  .elegir.detp{width:560px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}
}
@media (prefers-reduced-motion:reduce){ .detp-barra svg{transition:none} }