/* Zona personal de las familias · Healthy English
 *
 * Móvil primero: la mayoría la abrirá desde el enlace del correo, en el
 * teléfono, de pie y con prisa.
 *
 * Sobre el movimiento. Solo se anima lo que se ve poco:
 *   · La bienvenida y el saludo del personaje, una vez por sesión.
 *   · La entrada de las tarjetas, escalonada, al cambiar de pestaña.
 * Lo que se toca muchas veces al día no se anima o se anima muy poco. Todo con
 * transform y opacity, que no obligan al navegador a recalcular la página.
 */

:root{
  /* Paleta de la marca, la misma de healthyenglish.es */
  --emerald:#10b981; --emerald-deep:#065f46; --emerald-tint:#edfbf4; --emerald-borde:#bfe8d5;
  --mint:#5fd0a6; --navy:#2b3349; --navy-claro:#3b4762;
  --ink:#0f172a; --text:#3f4757; --muted:#7b8494;
  --bg:#eef1f5; --paper:#fff;
  --line:#e4e7ee; --line-soft:#f1f4f8; --line-strong:#cdd3de;
  --amber:#f59e0b; --amber-tint:#fdf6e7; --rojo:#e2686f;

  /* Curvas. Las de serie del navegador son demasiado flojas. */
  --sale:cubic-bezier(0.23, 1, 0.32, 1);
  --mueve:cubic-bezier(0.77, 0, 0.175, 1);

  /* Las mismas de healthyenglish.es: Fraunces para titulares, Inter para leer. */
  --titulo:'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --texto:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --sombra-sutil:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.24);
  --sombra-alta:0 2px 4px rgba(15,23,42,.05), 0 20px 44px -24px rgba(15,23,42,.32);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--texto);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--emerald-deep)}

/* ═══════════════════════════════════════════════ movimiento base */

@keyframes sube {
  from { opacity:0; transform:translateY(12px) }
  to   { opacity:1; transform:none }
}
@keyframes aparece {
  from { opacity:0 }
  to   { opacity:1 }
}
/* El saludo: tres veces y para. Un personaje saludando sin parar cansa. */
@keyframes saluda {
  0%, 100% { transform:rotate(0deg) }
  15%      { transform:rotate(-16deg) }
  30%      { transform:rotate(8deg) }
  45%      { transform:rotate(-14deg) }
  60%      { transform:rotate(6deg) }
  75%      { transform:rotate(-10deg) }
}
@keyframes respira {
  0%, 100% { transform:translateY(0) }
  50%      { transform:translateY(-5px) }
}

/* ═══════════════════════════════════════════════ personajes */

.personaje{width:100%; height:100%; display:block;
  filter:drop-shadow(0 12px 14px rgba(20,26,40,.18))}
.pn-brazo,.pn-pierna{transform-box:view-box}

/* El brazo que saluda está en un lado en cada personaje. */
.per--chico .pn-saluda{transform-origin:52px 105px}
.per--chica .pn-saluda{transform-origin:98.5px 105px}

.figura{position:relative; flex:none}
.figura .personaje{animation:respira 4.5s ease-in-out infinite}
.figura.saludando .pn-saluda{animation:saluda 1.6s var(--mueve) 3}

/* ═══════════════════════════════════════════════ cabecera */

.cab{
  position:sticky; top:0; z-index:20; color:#fff;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-claro) 100%);
  padding:14px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.cab .marca{font-weight:800; font-size:1.05rem; letter-spacing:-.03em; line-height:1.15; font-family:var(--texto)}
.cab .marca b{color:var(--mint)}
.cab .marca small{display:block; font-weight:600; font-size:.62rem; color:#9aa5bb;
  letter-spacing:.09em; text-transform:uppercase; margin-top:2px}
.cab .der{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cab select{
  font:inherit; font-size:.85rem; padding:7px 11px; border-radius:9px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.12); color:#fff;
  transition:background 150ms ease, border-color 150ms ease;
}
.cab select:hover{background:rgba(255,255,255,.2)}
.cab select option{color:#111}
.salir{background:none; border:0; color:#c9d1e0; font:inherit; font-size:.82rem;
  cursor:pointer; padding:5px; border-radius:6px; transition:color 150ms ease}
.salir:hover{color:#fff}

/* ── selector de idioma: los dos visibles, no un botón que cambia ── */
.idiomas{display:inline-flex; padding:3px; border-radius:10px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18)}
.idiomas button{
  border:0; background:none; color:#c9d1e0; font:inherit; font-size:.8rem; font-weight:600;
  padding:5px 12px; border-radius:7px; cursor:pointer;
  transition:background 180ms var(--sale), color 180ms var(--sale);
}
.idiomas button[aria-pressed="true"]{background:#fff; color:var(--navy)}
.idiomas button:not([aria-pressed="true"]):hover{color:#fff}

.idiomas.claro{background:var(--line-soft); border-color:var(--line-strong)}
.idiomas.claro button{color:var(--muted)}
.idiomas.claro button[aria-pressed="true"]{background:var(--navy); color:#fff}
.idiomas.claro button:not([aria-pressed="true"]):hover{color:var(--navy)}

/* Con tres lenguas «Castellano · Català · English» no cabe en un móvil al lado
   del nombre del alumno y del botón de salir. En estrecho se enseñan las siglas;
   el nombre entero sigue estando en el aria-label, así que un lector de pantalla
   nunca dice «ES». */
.idiomas button .corto{display:none}
@media (max-width:640px){
  .idiomas button{padding:5px 9px}
  .idiomas button .largo{display:none}
  .idiomas button .corto{display:inline}
}

/* ═══════════════════════════════════════════════ imprimir: en qué lengua
   Se pregunta cada vez y no se recuerda: la misma hoja se imprime hoy en catalán
   para una familia y mañana en inglés para otra. */

.velo-imprimir{
  position:fixed; inset:0; z-index:90; padding:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.55);
  animation:velo-entra 160ms var(--sale) both;
}
@keyframes velo-entra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .velo-imprimir{animation:none} }
.caja-imprimir{
  background:var(--paper); border-radius:16px; padding:26px 28px 20px;
  max-width:420px; width:100%; box-shadow:0 24px 60px -20px rgba(15,23,42,.5);
}
.caja-imprimir h2{margin:0 0 6px; font-size:1.15rem; color:var(--ink); letter-spacing:-.02em}
.caja-imprimir p{margin:0 0 18px; font-size:.88rem; color:var(--muted); line-height:1.5}
.opciones-imprimir{display:grid; gap:9px; margin-bottom:12px}
.opciones-imprimir button{
  display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
  padding:13px 16px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--paper); color:var(--ink);
  transition:border-color 150ms ease, background 150ms ease;
}
.opciones-imprimir button:hover,.opciones-imprimir button:focus-visible{
  border-color:var(--emerald); background:var(--emerald-tint); outline:none;
}
.opciones-imprimir b{font-size:.98rem; font-weight:700}
.cancelar-imprimir{
  display:block; width:100%; font:inherit; font-size:.86rem; cursor:pointer;
  padding:9px; border:0; background:none; color:var(--muted); border-radius:8px;
}
.cancelar-imprimir:hover{background:var(--line-soft); color:var(--text)}

/* ═══════════════════════════════════════════════ pestañas */

.pest{display:flex; background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:60px; z-index:19; overflow-x:auto}
.pest a{
  flex:1; min-width:112px; text-align:center; padding:15px 10px; text-decoration:none;
  color:var(--muted); font-weight:600; font-size:.88rem; white-space:nowrap;
  position:relative; transition:color 150ms ease;
}
.pest a::after{
  content:''; position:absolute; left:14%; right:14%; bottom:0; height:3px;
  background:var(--emerald); border-radius:3px 3px 0 0;
  transform:scaleX(0); transform-origin:center;
  transition:transform 200ms var(--sale);
}
.pest a.on{color:var(--emerald-deep)}
.pest a.on::after{transform:scaleX(1)}

/* ═══════════════════════════════════════════════ contenido */

main{max-width:780px; margin:0 auto; padding:22px 16px 80px}
h1{font-family:var(--titulo); font-size:1.6rem; line-height:1.16; color:var(--ink); letter-spacing:-.02em; margin:0 0 6px; font-weight:700; font-variation-settings:'opsz' 60}
h2{font-family:var(--titulo); font-size:1.08rem; color:var(--navy); font-weight:700; margin:0 0 4px; letter-spacing:-.005em; font-variation-settings:'opsz' 24}
.sub{color:var(--muted); font-size:.87rem; margin:0 0 16px}

.tarjeta{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:20px; margin-bottom:16px; box-shadow:var(--sombra-sutil);
  animation:sube 260ms var(--sale) both;
}
.tarjeta > h2 + .sub{margin-bottom:15px}

/* Escalonado: 50 ms entre tarjetas. Todas a la vez se lee como un salto. */
.tarjeta:nth-child(1){animation-delay:0ms}
.tarjeta:nth-child(2){animation-delay:50ms}
.tarjeta:nth-child(3){animation-delay:100ms}
.tarjeta:nth-child(4){animation-delay:150ms}
.tarjeta:nth-child(5){animation-delay:200ms}
.tarjeta:nth-child(n+6){animation-delay:240ms}

main > h1, main > .sub, main > .destrezas, main > .aviso{animation:sube 240ms var(--sale) both}

.dato{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.dato:last-child{border-bottom:0; padding-bottom:0}
.dato .et{flex:0 0 112px; font-size:.73rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.055em; padding-top:3px}
.dato .va{flex:1; color:var(--ink)}

/* ═══════════════════════════════════════════════ bienvenida */

.bienvenida{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-claro) 100%);
  color:#fff; border-radius:16px; padding:22px 24px 0; margin-bottom:20px;
  /* Los pies apoyados en el borde de abajo: alineado al final, no centrado.
     Centrado, el personaje quedaba cortado por las espinillas. */
  display:flex; align-items:flex-end; gap:20px; overflow:hidden; min-height:150px;
  box-shadow:var(--sombra-alta);
  animation:sube 320ms var(--sale) both;
}
.bienvenida .texto{flex:1; min-width:0; padding-bottom:22px}
.bienvenida .hola{font-size:.7rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mint); margin-bottom:6px}
.bienvenida h1{color:#fff; font-size:1.4rem; margin:0 0 6px}
.bienvenida p{margin:0; font-size:.9rem; color:#c9d1e0}
.bienvenida .figura{width:82px; height:176px}

@media (max-width:520px){
  .bienvenida{padding:18px 16px 0; gap:12px; min-height:126px}
  .bienvenida h1{font-size:1.2rem}
  .bienvenida .figura{width:66px; height:142px}
  .bienvenida .texto{padding-bottom:18px}
}

/* ═══════════════════════════════════════════════ piezas */

.pastilla{display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px;
  background:var(--emerald-tint); color:var(--emerald-deep); border:1px solid var(--emerald-borde)}
.pastilla.gris{background:var(--line-soft); color:var(--muted); border-color:var(--line)}
.pastilla.ambar{background:var(--amber-tint); color:#92591a; border-color:#f1dcae}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--line-strong); background:var(--paper); color:var(--navy);
  border-radius:10px; padding:12px 18px; font:inherit; font-size:.88rem; font-weight:600;
  cursor:pointer; text-decoration:none;
  transition:transform 120ms var(--sale), border-color 150ms ease, background 150ms ease, box-shadow 150ms ease}
.btn:active{transform:scale(0.975)}
.btn.pri{background:var(--emerald); border-color:var(--emerald); color:#042b1f}
.btn.ancho{width:100%}
.acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:var(--navy); box-shadow:var(--sombra-sutil)}
  .btn.pri:hover{background:#0ea371; border-color:#0ea371}
}

/* ── vocabulario ── */
.palabras{display:flex; flex-wrap:wrap; gap:8px}
.palabra{border:1px solid var(--line-strong); border-radius:999px; padding:6px 13px;
  font-size:.85rem; background:var(--paper); transition:border-color 150ms ease}
.palabra b{color:var(--ink)}
.palabra span{color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .palabra:hover{border-color:var(--emerald)}
}
/* Los phrasal verbs van en ámbar para que se distingan de las palabras sueltas
   de un vistazo: son otra cosa y se estudian de otra manera. */
.palabra.phrasal{border-color:var(--amber); background:var(--amber-tint)}
@media (hover:hover) and (pointer:fine){
  .palabra.phrasal:hover{border-color:var(--amber)}
}

/* ── progreso ── */
.destrezas{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.destreza{background:var(--paper); border:1px solid var(--line); border-radius:13px;
  padding:16px 18px; box-shadow:var(--sombra-sutil)}

.destreza .e{font-size:.75rem; color:var(--muted); text-transform:uppercase;
  letter-spacing:.055em; font-weight:700; margin-top:5px}
/* ── anillos de progreso ──
   El arco se rellena desde arriba. No hay equivalente con transform para el
   trazo de un SVG, así que se anima stroke-dashoffset: es la técnica estándar
   y en una figura tan pequeña no cuesta nada. */
.anillo{position:relative; width:104px; height:104px; margin:0 auto}
.anillo svg{width:100%; height:100%; transform:rotate(-90deg)}
.anillo .pista{fill:none; stroke:var(--line-soft); stroke-width:9}
.anillo .arco{
  fill:none; stroke:var(--emerald); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:var(--vuelta);
  stroke-dashoffset:var(--vuelta);
  animation:rellena 900ms var(--sale) both 260ms;
}
.anillo.media .arco{stroke:var(--amber)}
.anillo.baja  .arco{stroke:var(--rojo)}
.anillo.sindato .arco{stroke:var(--line-strong)}

@keyframes rellena { to { stroke-dashoffset:var(--resto) } }

.anillo .centro{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  animation:aparece 400ms ease both 520ms;
}
.anillo .cifra{font-family:var(--titulo); font-size:1.5rem; font-weight:700;
  color:var(--navy); line-height:1; letter-spacing:-.02em}
.anillo .cifra small{font-size:.62em; font-weight:600; margin-left:1px}
.anillo.sindato .cifra{color:var(--muted); font-size:1.2rem}

.destreza{text-align:center}
.destreza .e{margin-top:12px}

table{border-collapse:collapse; width:100%; font-size:.86rem}
thead th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700; padding:9px 8px; border-bottom:2px solid var(--line-strong)}
tbody td{padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ── avisos ── */
.aviso{border-left:3px solid var(--amber); background:var(--amber-tint);
  padding:14px 16px; border-radius:0 10px 10px 0; font-size:.87rem; margin:0 0 16px}
.aviso.verde{border-color:var(--emerald); background:var(--emerald-tint)}
.aviso.rojo{border-color:var(--rojo); background:#fdf2f3}
.vacio{padding:32px 20px; text-align:center; color:var(--muted); font-size:.9rem;
  background:var(--line-soft); border-radius:12px; border:1px dashed var(--line-strong)}

/* ═══════════════════════════════════════════════ entrar */

.entrar{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.entrar .caja{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:0; max-width:820px; width:100%; overflow:hidden;
  box-shadow:var(--sombra-alta);
  display:grid; grid-template-columns:1.15fr .85fr;
  animation:sube 340ms var(--sale) both;
}
.entrar .lado{padding:36px 34px}
.entrar .saludo{
  background:linear-gradient(150deg, var(--navy) 0%, var(--navy-claro) 100%);
  color:#fff; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; padding:30px 24px 0; position:relative;
}
.entrar .saludo .frase{text-align:center; margin-bottom:14px}
.entrar .saludo .frase b{display:block; font-size:1.05rem; letter-spacing:-.02em; margin-bottom:4px}
.entrar .saludo .frase span{font-size:.84rem; color:#b9c2d4; line-height:1.5}
.entrar .saludo .figura{width:132px; height:282px; margin-bottom:-4px}

.entrar .logo{font-weight:800; font-size:1.5rem; color:var(--navy); letter-spacing:-.045em; font-family:var(--texto)}
.entrar .logo span{color:var(--emerald)}
.entrar .logo small{display:block; font-weight:600; font-size:.64rem; color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase; margin-top:4px}
.entrar h1{font-size:1.3rem; margin:26px 0 8px}
.entrar p{font-size:.9rem; margin:0 0 20px}
.entrar .pie-ayuda{font-size:.8rem; color:var(--muted); margin:22px 0 0}

label{display:block; font-size:.73rem; font-weight:700; color:var(--navy);
  text-transform:uppercase; letter-spacing:.055em; margin-bottom:7px}
input[type=email]{width:100%; font:inherit; font-size:1rem; padding:14px 15px;
  border:1px solid var(--line-strong); border-radius:11px; background:#fff; color:var(--text);
  transition:border-color 150ms ease, box-shadow 150ms ease}
input[type=email]:focus{outline:none; border-color:var(--emerald);
  box-shadow:0 0 0 3px rgba(16,185,129,.16)}

@media (max-width:720px){
  .entrar .caja{grid-template-columns:1fr}
  .entrar .saludo{order:-1; padding:26px 20px 0; flex-direction:row; gap:16px; align-items:flex-end}
  .entrar .saludo .frase{text-align:left; margin-bottom:20px; flex:1}
  .entrar .saludo .figura{width:92px; height:196px}
  .entrar .lado{padding:28px 24px 32px}
}

/* ═══════════════════════════════════════════════ la pareja
   Salen los dos, del mismo tamaño. Se solapan un poco los hombros para que se
   lean como dos que están juntos y no como dos figuras pegadas en fila. */

.pareja{display:flex; align-items:flex-end; flex:none}
.pareja .figura + .figura{margin-left:-16px}
.pareja .atras{z-index:0}
.pareja .delante{z-index:1}
/* Que no respiren ni saluden a la vez, que se nota y queda mecánico. */
.pareja .atras .personaje{animation-delay:-1.7s}
.pareja .atras.saludando .pn-saluda{animation-delay:340ms}

/* Sobre el panel azul, los pantalones son casi del color del fondo y las
   piernas se pierden: parecen cortados por la espinilla. Un halo muy flojo
   detrás los despega sin que se note que hay un halo. */
.entrar .saludo .pareja, .bienvenida .pareja{position:relative}
.entrar .saludo .pareja::before, .bienvenida .pareja::before{
  content:''; position:absolute; left:-14%; right:-14%; bottom:0; height:66%;
  background:radial-gradient(120% 100% at 50% 100%, rgba(255,255,255,.13), rgba(255,255,255,0) 68%);
  pointer-events:none;
}

.bienvenida .pareja .figura{width:80px; height:172px}
.entrar .saludo .pareja .figura{width:118px; height:252px}

/* ═══════════════════════════════════════════════ barra del curso
   Dónde vais de las 36 semanas. Se rellena con transform, no con width:
   una barra animada con width obliga al navegador a rehacer la página
   sesenta veces por segundo, y esta va dentro de la cabecera de bienvenida. */

.barra-curso{margin-top:16px; max-width:420px}
.barra-curso .etq{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#a9b4c9; margin-bottom:8px;
}
.barra-curso .etq b{color:var(--mint); font-size:.78rem; letter-spacing:.02em}
.barra-curso .riel{
  position:relative; height:8px; border-radius:999px;
  background:rgba(255,255,255,.13); overflow:hidden;
}
.barra-curso .lleno{
  position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(90deg, var(--emerald-deep) 0%, var(--emerald) 45%, var(--mint) 100%);
  transform:scaleX(0); transform-origin:left;
  animation:llena 1100ms var(--sale) both 420ms;
}
@keyframes llena { to { transform:scaleX(var(--f)) } }
/* Las semanas de simulacro, la 12 y la 24, marcadas en el riel. */
.barra-curso .hito{position:absolute; top:-1px; bottom:-1px; width:2px;
  background:rgba(20,26,40,.42); border-radius:2px}
.barra-curso .pie{margin:9px 0 0; font-size:.78rem; color:#b9c2d4}

@media (max-width:520px){
  .barra-curso{margin-top:13px}
  .barra-curso .pie{display:none}
}

/* ═══════════════════════════════════════════════ tarjetas de vocabulario
   Se ve la palabra, se piensa la traducción y se comprueba. Ese orden. Por eso
   la vuelta es un giro y no un cambio de texto: se entiende que detrás hay algo
   y que uno mismo decide cuándo mirarlo. */

.tarjetero{margin-top:4px}
.carta{
  position:relative; display:block; width:100%; height:186px;
  padding:0; border:0; background:none; font:inherit; cursor:pointer;
  perspective:1100px; -webkit-tap-highlight-color:transparent;
}
.carta .giro{position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform 440ms var(--mueve)}
.carta.girada .giro{transform:rotateY(180deg)}
.carta:focus-visible{outline:none}
.carta:focus-visible .cara{box-shadow:0 0 0 3px rgba(16,185,129,.3)}

.cara{
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:20px; text-align:center;
  border:1px solid var(--line-strong); background:var(--paper);
  box-shadow:var(--sombra-sutil);
}
.cara b{font-family:var(--titulo); font-size:1.8rem; font-weight:700; line-height:1.14;
  color:var(--ink); letter-spacing:-.02em; word-break:break-word}
.cara small{font-size:.72rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted)}
.cara.dorso{transform:rotateY(180deg); background:var(--emerald-tint); border-color:var(--emerald-borde)}
.cara.dorso b{color:var(--emerald-deep)}
.cara.dorso small{font-size:.88rem; font-weight:600; letter-spacing:0;
  text-transform:none; color:#5b8a75}

/* Al cambiar de palabra, la nueva entra por el lado hacia el que vas. */
@keyframes pasaCarta {
  from { opacity:0; transform:translateX(var(--dir, 16px)) }
  to   { opacity:1; transform:none }
}
.carta.pasa{animation:pasaCarta 300ms var(--sale)}

.tarjetero .avance{height:4px; border-radius:999px; background:var(--line-soft);
  margin-top:14px; overflow:hidden}
.tarjetero .avance i{display:block; height:100%; border-radius:999px;
  background:var(--emerald); transform:scaleX(var(--f,0)); transform-origin:left;
  transition:transform 320ms var(--sale)}

.mandos{display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap}
.mandos .btn{padding:10px 14px; font-size:.84rem}
.mandos .cuenta{flex:1; text-align:center; font-size:.82rem; font-weight:700;
  color:var(--muted); font-variant-numeric:tabular-nums}

@media (max-width:520px){
  .carta{height:158px}
  .cara b{font-size:1.5rem}
}

/* ═══════════════════════════════════════════════ el científico
   Vive en los márgenes con su laboratorio. Nunca por delante de lo que se lee:
   la caja va detrás del contenido, y cuando cambia de lado se hunde por abajo
   en vez de cruzar. La única vez que pisa la franja es la explosión, y dura
   segundo y medio. El guion está en cientifico.js; aquí solo están los gestos.

   Los orígenes de giro van en porcentaje sobre transform-box:fill-box porque
   el muñeco vive dentro de un <g> escalado: con view-box, los píxeles se
   medirían sobre el lienzo entero y los brazos girarían por el codo ajeno. */

main, .entrar{position:relative; z-index:1}

.cientifico-caja{
  position:fixed; left:0; bottom:0; width:160px; height:149px; z-index:0;
  pointer-events:none; opacity:.85;
  transform:translate3d(var(--x,0px), var(--y,0px), 0) scaleX(var(--esp,1));
  transition:transform 0ms linear;
  will-change:transform;
}
.cientifico-caja.fuera{display:none}
.cientifico-caja.llega{animation:asoma 900ms ease both 700ms}
@keyframes asoma { from { opacity:0 } to { opacity:.85 } }

.cientifico{width:100%; height:100%; display:block; overflow:visible;
  filter:drop-shadow(0 10px 12px rgba(20,26,40,.14))}
.cientifico .ci-cuerpo,.cientifico .ci-brazo,.cientifico .ci-pelo,.cientifico .ci-boca,
.cientifico .mz-superficie,
.cientifico .ci-frasco,.cientifico .ci-matraz,.cientifico .ci-boom,.cientifico .mz-burbuja{
  transform-box:fill-box;
}
.cientifico .ci-cuerpo{transform-origin:48% 100%; transition:transform 480ms var(--sale)}
.cientifico .ci-brazo--d{transform-origin:4% 95%; transition:transform 420ms var(--sale)}
.cientifico .ci-brazo--i{transform-origin:95% 94%; transition:transform 420ms var(--sale)}
.cientifico .ci-pelo{transform-origin:51% 96%}
.cientifico .ci-boca{transform-origin:50% 0%; transition:transform 340ms var(--sale)}
.cientifico .ci-tiza{transition:opacity 480ms ease}

/* Andar por el laboratorio: de la mesa a la pizarra y vuelta. Las unidades son
   las del lienzo, no píxeles de pantalla; el <g> de fuera no está escalado. */
.cientifico .ci-paso{transform:translateX(var(--paso, 0px)); transition:transform 950ms var(--sale)}

/* ── 1. pensando ── */
.cientifico .ci-duda .dd{opacity:0; transform-box:fill-box; transform-origin:50% 50%}
.piensa .ci-duda .dd{
  animation:pensamiento 2600ms ease-in-out both;
  animation-delay:calc(var(--n) * 240ms);
}
@keyframes pensamiento {
  0%       { opacity:0; transform:scale(.4) }
  14%, 72% { opacity:1; transform:scale(1) }
  100%     { opacity:0; transform:scale(.8) }
}
/* Mira arriba y se mece: el gesto de estar dándole vueltas. */
.piensa .ci-cuerpo{animation:cavila 2600ms ease-in-out}
@keyframes cavila {
  0%,100% { transform:rotate(0deg) }
  30%     { transform:rotate(4deg) }
  70%     { transform:rotate(-3deg) }
}
.piensa .ci-brazo--d{transform:rotate(-26deg)}

/* ── 2. escribiendo en la pizarra ──
   Da unos pasos hacia ella y cada trazo se dibuja solo, por orden. */
.escribe{--paso:-38px}
.escribe .ci-brazo--i{animation:apunta 620ms ease-in-out 6 both}
@keyframes apunta {
  0%,100% { transform:rotate(6deg) }
  50%     { transform:rotate(15deg) }
}
.escribe .pz{
  animation:escribir 420ms ease-out both;
  animation-delay:calc(var(--n) * 300ms);
}
@keyframes escribir { to { stroke-dashoffset:0 } }
.borra .ci-tiza{opacity:0}

/* ── 4. la mezcla ──
   Los frascos se vuelcan solos. Es un dibujo, no un manual de laboratorio: que
   se vuelquen ellos se entiende a la primera y le ahorra al muñeco un brazo
   que no le llega. */
.cientifico .ci-frasco{transition:transform 420ms var(--sale)}
.cientifico .ci-frasco--a{transform-origin:88% 100%}
.cientifico .ci-frasco--b{transform-origin:88% 100%}
.cientifico .ci-frasco--c{transform-origin:88% 100%}
.vierte-a .ci-frasco--a,
.vierte-b .ci-frasco--b,
.vierte-c .ci-frasco--c{transform:rotate(52deg)}

.cientifico .ci-chorro{
  stroke:var(--chorro, #3f7fd4);
  transform-box:fill-box; transform-origin:50% 0%;
  transform:scaleY(0);
  transition:transform 260ms ease-in, stroke 200ms ease;
}
.vierte-a, .vierte-b, .vierte-c { --chorro:#e2686f }
.vierte-b { --chorro:#3f7fd4 }
.vierte-c { --chorro:#f0b429 }
.vierte-a .ci-chorro,
.vierte-b .ci-chorro,
.vierte-c .ci-chorro{transform:scaleY(1)}

/* Lo que hay dentro del matraz. El color se puede transicionar —fill se
   interpola— y el nivel sube y baja con transform, no cambiando la ruta. */
.cientifico .mz-liquido{
  fill:var(--liq, #c9d3e2);
  transform:translateY(var(--nivel, 8px));
  transition:fill 420ms ease, transform 520ms var(--sale);
}
/* La raya de la superficie sube y baja con el líquido. Sin ella, el blanco de
   la mezcla final no se distinguiría de un matraz vacío. */
.cientifico .mz-superficie{
  transform:translateY(var(--nivel, 8px));
  transition:transform 520ms var(--sale);
}
.liq-1{--liq:#e2686f; --nivel:5px}
.liq-2{--liq:#7b5cd6; --nivel:2px}
/* Los tres juntos dan blanco: es el color con el que pinta la H. */
.liq-3{--liq:#ffffff; --nivel:0px}
/* Y el de la E sale de agitar el matraz con cara de pocos amigos. */
.liq-e{--liq:#10b981; --nivel:1px}

/* Se revuelve: el matraz tiembla y suben burbujas. */
.remueve .ci-matraz{animation:revuelve 260ms ease-in-out 6}
@keyframes revuelve {
  0%,100% { transform:translateX(0) rotate(0deg) }
  25%     { transform:translateX(-2px) rotate(-3deg) }
  75%     { transform:translateX(2px) rotate(3deg) }
}
.remueve .mz-burbujas{opacity:1}
.remueve .mz-burbuja{
  animation:burbuja 900ms ease-in infinite;
  animation-delay:calc(var(--b) * 260ms);
}
@keyframes burbuja {
  0%   { opacity:0; transform:translateY(0) scale(.5) }
  30%  { opacity:.85 }
  100% { opacity:0; transform:translateY(-16px) scale(1) }
}

/* ── 5. la explosión ── */
.cientifico .ci-boom{opacity:0}
.cientifico .ci-boom .bm-bola{fill:var(--liq, #7b5cd6); stroke:none}
.cientifico .ci-boom .bm-rayos{stroke:var(--liq, #7b5cd6)}
.boom .ci-boom{animation:estalla 620ms cubic-bezier(0.16, 1, 0.3, 1)}
@keyframes estalla {
  0%   { opacity:0; transform:scale(.2) }
  18%  { opacity:1; transform:scale(1.25) }
  55%  { opacity:.85; transform:scale(1.5) }
  100% { opacity:0; transform:scale(2.1) }
}
/* Se cae de espaldas, se queda un momento en el suelo y se levanta. */
.cae .ci-cuerpo{animation:tumba 3400ms var(--sale)}
@keyframes tumba {
  0%       { transform:translateY(0) rotate(0deg) }
  8%       { transform:translateY(-7px) rotate(9deg) }
  22%, 62% { transform:translateY(-26px) rotate(-70deg) }
  84%      { transform:translateY(0) rotate(6deg) }
  100%     { transform:translateY(0) rotate(0deg) }
}
.cae .ci-pelo{animation:pelos 340ms ease-in-out 4}
@keyframes pelos { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }

/* ── 7 y 8. firma los márgenes ──
   El matraz va delante del cuerpo en el SVG, después del muñeco: si no, al
   levantarlo se le quedaba escondido detrás de la bata. */
.cientifico .ci-matraz{
  transform-origin:50% 100%;
  transition:transform 900ms var(--sale);
}

/* Lo agita con cara de pocos amigos, y de ahí sale el color de la E.
   La sonrisa es un arco: aplastarlo en vertical la deja en una raya, que es
   exactamente la cara de estar concentrado. */
.serio .ci-boca{transform:scaleY(.08)}
.agita .ci-brazo--i{transform:rotate(50deg)}
.agita .ci-matraz{animation:agitando 220ms ease-in-out 7 both}
@keyframes agitando {
  0%,100% { transform:translate(56px,-52px) rotate(0deg) }
  25%     { transform:translate(56px,-58px) rotate(-17deg) }
  75%     { transform:translate(56px,-46px) rotate(17deg) }
}

/* La brocha vive dentro del brazo derecho, así que gira con él sola. Solo
   aparece cuando toca pintar; el resto del rato no está. */
.cientifico .ci-brocha{opacity:0; fill:none; stroke-linecap:round;
  transition:opacity 320ms ease}
.cientifico .ci-brocha .br-pelo{stroke:var(--liq, #fff)}
.conBrocha .ci-brocha{opacity:1}
.pinta .ci-brazo--d{animation:brochazo 760ms ease-in-out}
@keyframes brochazo {
  0%   { transform:rotate(-8deg) }
  38%  { transform:rotate(-54deg) }
  72%  { transform:rotate(-16deg) }
  100% { transform:rotate(-8deg) }
}
.sonrie .ci-boca{transform:scale(1.5)}

/* Colgar no es lo mismo que pintar: el brazo sube, se queda arriba mientras
   aparece el cartel y baja. Sin brocha, que ya la ha soltado. */
.coloca .ci-brazo--d{animation:cuelga 1420ms ease-in-out}
@keyframes cuelga {
  0%   { transform:rotate(-8deg) }
  26%  { transform:rotate(-74deg) }
  68%  { transform:rotate(-70deg) }
  100% { transform:rotate(-8deg) }
}

/* ── lo que pinta ──
   Las letras van en los márgenes y nunca sobre la columna: el sitio de cada
   una lo calcula cientifico.js con el hueco que queda a cada lado. Se
   descubren de izquierda a derecha, como una pasada de brocha. */
.pintadas{position:fixed; inset:0; z-index:0; pointer-events:none}
.pintada{position:absolute; display:flex; align-items:baseline; line-height:1; white-space:nowrap}
.pintada b{
  display:block; font-weight:inherit;
  clip-path:inset(0 100% -20% 0);
  transition:clip-path 640ms var(--sale);
}
.pintada b.puesta{clip-path:inset(0 -20% -20% 0)}
/* Blanca sobre gris claro no se vería: lo que la hace visible es el canto y la
   sombra, igual que la pintura blanca de verdad sobre una pared clara. */
.pintada .h{
  color:#fff;
  -webkit-text-stroke:1.2px rgba(43,51,73,.22);
  text-shadow:0 2px 0 rgba(43,51,73,.10), 0 10px 20px rgba(20,26,40,.16);
}
.pintada .e{
  color:var(--emerald);
  text-shadow:0 8px 18px rgba(16,185,129,.22);
}
.pintadas.yendose{opacity:0; transition:opacity 900ms ease}

/* ── lo que deja colgado ──
   Los últimos artículos del blog, en el mismo hueco por el que se paseaba.
   A diferencia del muñeco y de las letras, esto SÍ se pincha: va por delante
   de main (z-index 2) y con pointer-events, porque son enlaces de verdad. Pero
   solo las tarjetas los reciben, no el contenedor, que ocupa la pantalla
   entera y se comería los clics del margen. */
.articulos{position:fixed; inset:0; z-index:2; pointer-events:none}
.articulos.fuera{display:none}
.articulo{
  position:absolute; width:var(--ancho,190px); box-sizing:border-box;
  display:block; padding:11px 13px 12px; border-radius:12px;
  background:var(--paper); border:1px solid var(--line-strong);
  box-shadow:var(--sombra-sutil);
  text-decoration:none; color:var(--text);
  pointer-events:auto;
  opacity:0; transform:translateY(calc(-50% + 12px)) rotate(-1.2deg);
  transition:opacity 560ms var(--sale), transform 560ms var(--sale),
             border-color 160ms ease, box-shadow 220ms ease;
}
.articulo.puesto{opacity:1; transform:translateY(-50%) rotate(0deg)}
/* Con «menos movimiento» no hay entrada: aparecen ya puestos. */
.articulos.sin-entrada .articulo{transition:border-color 160ms ease, box-shadow 220ms ease}
.articulo .et{
  display:block; font-size:.63rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--emerald-deep); margin-bottom:5px;
}
.articulo .tit{
  display:block; font-family:var(--titulo); font-weight:700; font-size:.94rem;
  line-height:1.25; color:var(--ink);
}
.articulo .res{
  display:block; margin-top:6px; font-size:.76rem; line-height:1.4;
  color:var(--muted);
  /* Tres líneas y punto: es un margen, no una columna. */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
@media (hover:hover) and (pointer:fine){
  .articulo:hover{border-color:var(--emerald); box-shadow:var(--sombra-alta)}
}
.articulo:focus-visible{outline:2px solid var(--emerald); outline-offset:3px}

/* ── el paseo ── */
.anda .ci-cuerpo{animation:trota 460ms ease-in-out infinite}
@keyframes trota { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-6px) rotate(1.6deg)} }

/* ── agarra el borde de la franja y tira ── */
.agarra .ci-brazo--d{transform:rotate(20deg)}
.tira .ci-cuerpo{animation:forcejeo 700ms ease-in-out 2}
@keyframes forcejeo {
  0%,100% { transform:translateX(0) rotate(0deg) }
  40%     { transform:translateX(-6px) rotate(-7deg) }
  72%     { transform:translateX(-3px) rotate(-4deg) }
}
.rendido .ci-brazo--d{transform:rotate(3deg)}
.rendido .ci-cuerpo{animation:encoge 900ms var(--sale)}
@keyframes encoge {
  0%,100% { transform:translateY(0) }
  35%     { transform:translateY(5px) }
  70%     { transform:translateY(-2px) }
}

/* ── el ratón le molesta ──
   Si el puntero se le acerca, lo espanta como a una mosca. Va con el brazo
   libre: si está agarrado a la franja, con el otro, que soltarse a media faena
   rompería el chiste. */
.espanta .ci-brazo--d{animation:manotazo 520ms ease-in-out 2}
.espanta.agarra .ci-brazo--d{animation:none}
.espanta.agarra .ci-brazo--i{animation:manotazoI 520ms ease-in-out 2}
@keyframes manotazo {
  0%,100% { transform:rotate(0deg) }
  30%     { transform:rotate(-40deg) }
  65%     { transform:rotate(26deg) }
}
@keyframes manotazoI {
  0%,100% { transform:rotate(0deg) }
  30%     { transform:rotate(40deg) }
  65%     { transform:rotate(-26deg) }
}
.espanta .ci-cuerpo{animation:esquiva 520ms ease-in-out 2}
@keyframes esquiva {
  0%,100% { transform:translateX(0) rotate(0deg) }
  35%     { transform:translateX(-4px) rotate(-5deg) }
}

/* ── lo que salpica a la franja ──
   Las manchas caen por los lados y por abajo, nunca en el medio, y se van en
   segundo y medio. Es lo único de toda la función que pasa por delante del
   texto, así que se queda translúcido y no tapa una sola palabra. */
.salpicadura{
  position:fixed; bottom:0; left:50%; z-index:3;
  width:min(780px, 100%); height:56vh;
  transform:translateX(-50%);
  pointer-events:none; opacity:0;
}
.salpicadura svg{width:100%; height:100%; display:block}
.salpicadura.cayendo{animation:manchazo 1900ms ease-out}
@keyframes manchazo {
  0%   { opacity:0; transform:translateX(-50%) scale(.72) }
  10%  { opacity:.58; transform:translateX(-50%) scale(1.05) }
  26%  { opacity:.46; transform:translateX(-50%) scale(1) }
  100% { opacity:0;   transform:translateX(-50%) scale(1) }
}

/* La franja cede tres píxeles y vuelve. Lo justo para que se lea que lo
   intenta; más que eso sería mover un texto que alguien está leyendo. */
@keyframes tironcito {
  0%,100% { transform:translateX(0) }
  22%     { transform:translateX(var(--tiron, 3px)) }
  40%     { transform:translateX(0) }
  62%     { transform:translateX(var(--tiron, 3px)) }
}
body.tirando main{animation:tironcito 1400ms var(--sale)}
/* El culatazo de la explosión: un temblor corto, no un terremoto. */
@keyframes sacude {
  0%,100% { transform:translate(0,0) }
  20%     { transform:translate(-3px, 2px) }
  45%     { transform:translate(3px, -1px) }
  70%     { transform:translate(-2px, 0) }
}
body.estallando main{animation:sacude 460ms ease-out}

/* ═══════════════════════════════════════════════ impresión */

#hoja{display:none}
@media print{
  .cab,.pest,.acciones,.bienvenida,.no-print,.cientifico-caja,.salpicadura,.pintadas,.articulos{display:none !important}
  body{background:#fff}
  main{display:none}
  #hoja{display:block; max-width:none; padding:0}
  #hoja h1{font-size:17pt} #hoja h2{font-size:12pt; margin-top:18px}
  #hoja table{font-size:9pt}
  #hoja tr{break-inside:avoid}
  @page{size:A4 portrait; margin:15mm 14mm}
}

@media (max-width:520px){
  .cab{padding:12px 14px}
  .pest{top:58px}
  .dato{flex-direction:column; gap:3px}
  .dato .et{flex:none}
  main{padding:18px 12px 70px}
}

/* ═══════════════════════════════════════════════ movimiento reducido
   Quien lo pide en su sistema no quiere cosas moviéndose: se quedan las
   apariciones suaves, que ayudan a entender, y se va todo el desplazamiento. */
@media (prefers-reduced-motion: reduce){
  .tarjeta, .bienvenida, .entrar .caja,
  main > h1, main > .sub, main > .destrezas, main > .aviso{
    animation:aparece 200ms ease both;
  }
  .figura .personaje, .figura.saludando .pn-saluda{animation:none}
  .anillo .arco{animation:none; stroke-dashoffset:var(--resto)}
  .anillo .centro{animation:none}
  .pest a::after{transition:none}
  .btn:active{transform:none}
}

/* ═══════════════════════════════════════════════ pantallas estrechas
   Al muñeco de atrás se le cede el sitio antes que al texto. */

@media (max-width:520px){
  .bienvenida .pareja .figura{width:62px; height:134px}
  .pareja .figura + .figura{margin-left:-12px}
}
@media (max-width:400px){
  .pareja .atras{display:none}
}
@media (max-width:720px){
  .entrar .saludo .pareja .figura{width:86px; height:184px}
}

/* ═══════════════════════════════════════════════ movimiento reducido, lo nuevo
   El científico ni se monta (lo comprueba cientifico.js); esto es el cinturón
   por si acaso. La barra y las tarjetas se quedan, pero sin recorrido. */

@media (prefers-reduced-motion: reduce){
  .cientifico-caja,.salpicadura,.pintadas{display:none}
  /* Los artículos NO se esconden aquí: son enlaces útiles, no animación. Solo
     se les quita la entrada, que la pone .sin-entrada desde el JS. */
  .articulo{transition:none}
  body.tirando main,body.estallando main{animation:none}
  .barra-curso .lleno{animation:none; transform:scaleX(var(--f))}
  .carta .giro{transition:none}
  .carta.pasa{animation:none}
  .tarjetero .avance i{transition:none}
}

/* ═══════════════════════════════════════════════ lo que le han mandado
   Los documentos sueltos que envía la profesora. Van arriba del todo en la
   pestaña de Documentos: son lo nuevo, y lo demás lleva ahí desde septiembre. */

.envios{display:flex; flex-direction:column; gap:10px}
.envio{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:11px; padding:13px 15px;
  background:var(--line-soft);
}
.envio .q{flex:1; min-width:180px}
.envio .q b{display:block; color:var(--ink); font-size:.94rem}
.envio .q span{display:block; color:var(--muted); font-size:.83rem; margin-top:2px}
.envio .btn{padding:9px 16px; font-size:.84rem; background:var(--paper)}
.envio .btn:disabled{opacity:.5; cursor:default}

/* ============================================================ añadidos

   Moverse por las semanas, el vocabulario acumulado, las tarjetas que se
   acuerdan de lo que se falla, la tendencia del progreso y el aviso de que no
   hay conexión. */

/* ---- navegación entre semanas ---- */
.nav-semanas{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 14px;
}
.nav-semanas .paso{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line-strong); border-radius:999px;
  padding:7px 14px; font-size:.84rem; font-weight:600;
  color:var(--navy); background:var(--paper); text-decoration:none;
}
.nav-semanas .paso:hover{border-color:var(--emerald); color:var(--emerald-deep)}
.nav-semanas .paso.apagado{opacity:.38; cursor:default}
.nav-semanas .paso.apagado:hover{border-color:var(--line-strong); color:var(--navy)}
.nav-semanas .paso.ahora{
  border-color:var(--emerald); color:var(--emerald-deep); background:var(--emerald-tint);
}
.nav-semanas .cual{
  font-weight:700; color:var(--muted); font-size:.82rem;
  text-transform:uppercase; letter-spacing:.04em; padding:0 4px;
}

/* ---- índice de la página ---- */
.indice{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  background:var(--paper); border:1px solid var(--line); border-radius:13px;
  padding:11px 14px; margin:0 0 16px;
}
.indice .et{
  font-size:.7rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-right:2px;
}
.indice button{
  border:1px solid var(--line-strong); border-radius:999px; background:var(--paper);
  padding:5px 12px; font:inherit; font-size:.82rem; font-weight:600;
  color:var(--navy); cursor:pointer;
}
.indice button:hover{border-color:var(--emerald); color:var(--emerald-deep); background:var(--emerald-tint)}
/* La cabecera y las pestañas van fijas arriba. Sin esto, saltar a una sección
   la dejaría justo debajo y el título quedaría tapado. */
#sec-gram, #sec-voc, #sec-phr, #sec-deberes, #sec-practicar{scroll-margin-top:124px}

/* ---- la fecha del examen, dentro de la banda oscura ---- */
.barra-curso .pie.examen{
  margin-top:6px; color:#dbe2ee; font-size:.79rem;
  border-top:1px solid rgba(255,255,255,.14); padding-top:8px;
}
.barra-curso .pie.examen b{color:var(--mint); font-weight:700}
/* En pantalla estrecha se esconde el pie de la barra —«lleváis recorrido…»—
   porque es una frase de acompañamiento. La fecha del examen no: es el dato que
   más se busca y en el móvil se busca todavía más. Se queda. */
@media (max-width:520px){
  .barra-curso .pie.examen{display:block}
}

/* ---- las cuatro pestañas en un móvil ----
   Con tres cabían; con la de vocabulario ya no, y «Documentos» quedaba cortado
   por la mitad, que parece un fallo y no un carrusel. Se aprieta el espaciado
   para que entren las cuatro, y si aun así no caben, la barra sigue pudiendo
   desplazarse como antes. */
@media (max-width:560px){
  .pest a{min-width:0; padding:14px 5px; font-size:.82rem}
}
@media (max-width:380px){
  .pest a{padding:14px 5px; font-size:.78rem}
}

/* ---- aviso de documentos nuevos ---- */
/* Va colocado encima del rótulo y no en línea con él: si ocupara sitio, las
   cuatro pestañas dejarían de caber en un móvil justo el día que hay algo
   nuevo, que es el peor día para que se descoloque la barra. */
.pest a{position:relative}
.punto-nuevo{
  position:absolute; top:11px; right:2px;
  width:7px; height:7px; border-radius:50%; background:var(--rojo);
}
.envio.nuevo{border-color:var(--emerald); background:var(--emerald-tint)}
.etq-nuevo{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:var(--emerald); color:#fff; font-size:.68rem; font-weight:800;
  font-style:normal; text-transform:uppercase; letter-spacing:.05em; vertical-align:middle;
}

/* ---- sin conexión ---- */
.aviso.sin-red{
  border-left-color:var(--rojo); background:#fdf2f3;
  margin:0; border-radius:0; padding:11px 22px; font-size:.86rem;
}

/* ---- vocabulario acumulado ---- */
.filtros-voc{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px}
.chip{
  border:1px solid var(--line-strong); border-radius:999px; background:var(--paper);
  padding:7px 14px; font:inherit; font-size:.83rem; font-weight:600;
  color:var(--navy); cursor:pointer;
}
.chip:hover{border-color:var(--emerald); color:var(--emerald-deep)}
.chip.on{background:var(--navy); border-color:var(--navy); color:#fff}
.busca-voc{display:block; margin:0 0 6px}
.busca-voc input{
  width:100%; box-sizing:border-box; font:inherit; font-size:.95rem;
  padding:11px 14px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--paper); color:var(--ink);
}
.busca-voc input:focus{outline:2px solid var(--emerald); outline-offset:1px; border-color:var(--emerald)}
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.grupo-semana{margin:18px 0 0}
.grupo-semana h3{
  margin:0 0 9px; font-size:.74rem; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
}
.grupo-semana h3 small{
  font-weight:600; text-transform:none; letter-spacing:0; color:var(--line-strong);
  margin-left:7px; font-size:.95em;
}
/* Cómo quedó la palabra la última vez que salió en las tarjetas. Además del
   color va un signo delante, que el color solo no lo ve todo el mundo. */
.palabra.fallada{border-color:var(--rojo); background:#fdf2f3}
.palabra.fallada b::before{content:'\00d7 '; color:var(--rojo); font-weight:800}
.palabra.sabida{opacity:.62}
.palabra.sabida b::before{content:'\2713 '; color:var(--emerald); font-weight:800}

/* ---- tarjetas: la sabía / no la sabía ---- */
.sabiduria{display:flex; gap:9px; justify-content:center; margin:14px 0 0}
.sabiduria .btn{min-width:132px; justify-content:center; font-weight:700}
.sabiduria .btn.bien{border-color:var(--emerald); color:var(--emerald-deep); background:var(--emerald-tint)}
.sabiduria .btn.mal{border-color:var(--rojo); color:#a33b42; background:#fdf2f3}
.marcador{
  margin:10px 0 0; text-align:center; font-size:.79rem; color:var(--muted);
}
.carta.era-mal .cara{box-shadow:inset 0 0 0 2px var(--rojo)}
.carta.era-bien .cara{box-shadow:inset 0 0 0 2px var(--emerald)}
.fin-vuelta{margin-top:14px}

/* ---- tendencia en el progreso ---- */
.destreza .tend{
  margin-top:7px; font-size:.73rem; font-weight:600; line-height:1.3;
  color:var(--muted);
}
.destreza .tend.sube{color:var(--emerald-deep)}
.destreza .tend.baja{color:#a33b42}
.destreza .tend.floja{opacity:.7; font-weight:500}
td.sube{color:var(--emerald-deep); font-weight:700}
td.baja{color:#a33b42; font-weight:700}

@media (max-width:560px){
  .nav-semanas .cual{width:100%; order:-1; padding:0}
  .sabiduria .btn{min-width:0; flex:1}
}