/* ==========================================================================
   Bit AI School — sistema de diseño v4: «violeta eléctrico sobre blanco puro»

   Dirección de arte (especificación de Alan, agosto 2026). La regla que no se
   rompe: EL COLOR NO DECORA, MARCA PROGRESO. Cada color tiene un solo trabajo.

     violeta #6C2BF7   marca, acción, elemento activo, progreso completado
     lima    #DBFF6B   acierto y solo acierto (nunca como color de texto)
     fucsia  #FF2D87   celebración (solo en texto de 24 px o mayor)
     coral   #FF5A5A   fallo, sin dramatismo (solo fondo claro + coral tinta)
     blanco + lila     el escenario donde ocurre todo lo anterior

   Prohibido en todo el producto: crema, beige, hueso, arena, marrón,
   terracota, mostaza, ocre, verde salvia, azul genérico, gris azulado de
   marca, degradados decorativos de fondo, sombras difuminadas bajo tarjetas,
   sombras sólidas desplazadas, bordes negros gruesos, radios pequeños y
   mayúsculas completas. scripts/design-test.mjs lo comprueba en cada pasada.

   Índice:
     1. Fuente
     2. Tokens
     3. Base y accesibilidad
     4. Layout
     5. Tipografía
     6. Botones
     7. Componentes
     8. Chrome (cabecera, pie, migas)
     9. Portada, catálogo y Pro
    10. Mi camino
    11. Reproductor de lección
    12. Marcador de logros
    13. Estados de carga y error
    14. Movimiento
    15. Móvil
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ======================================================================
   2. TOKENS
   ====================================================================== */

:root {
  /* -- marca ---------------------------------------------------------- */
  --violet: #6C2BF7;
  --violet-hover: #7B3FF8;
  --violet-deep: #4A15C4;
  --lila: #F7F5FF;          /* lila LIENZO: fondo neutro de superficie y nada
                               más. No es el color de las tarjetas de
                               contenido, ni el de los contadores de logro,
                               ni el de los botones. */
  --lila-idle: #E3DCFA;     /* lila inactivo: vacíos, separadores, off */
  --lila-dim: #F1EFF7;      /* gris lila: solo el fondo de una bloqueada */

  /* -- estado --------------------------------------------------------- */
  --lime: #DBFF6B;          /* acierto. NUNCA como color de texto */
  --lime-ink: #2C4400;
  --fuchsia: #FF2D87;       /* celebración. Solo en texto de 24 px o mayor */
  --fuchsia-bg: #FFE7F1;    /* su tinte: fondo de racha y de experiencia */
  --fuchsia-ink: #8A0E45;   /* fucsia legible por debajo de 24 px */
  --coral: #FF5A5A;         /* fallo. NUNCA como texto sobre blanco */
  --coral-bg: #FFECEC;
  --coral-ink: #8A1A1A;

  /* -- etiqueta de lección de pago (vive dentro de la tarjeta) --------- */
  --paid: #FFC400;
  --paid-ink: #4A3200;

  /* -- neutros -------------------------------------------------------- */
  --white: #FFFFFF;
  --ink: #100D1C;           /* 19,1:1 sobre blanco */
  --ink-soft: #6B6880;      /* 5,4:1 — texto secundario */
  --ink-faint: #9C97B5;     /* metadatos no esenciales y deshabilitado */

  /* -- escala tipográfica (escritorio, con variante móvil en §15) ------ */
  --fs-hero: clamp(34px, 1.5rem + 4.2vw, 56px);
  --fs-h2: clamp(26px, 1.3rem + 1.9vw, 34px);
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-meta: 12px;
  --lh-hero: 1.15;
  --lh-title: 1.25;
  --lh-body: 1.6;

  /* -- espaciado ------------------------------------------------------ */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;

  /* -- forma: nada de radios tímidos ---------------------------------- */
  --r-card: 20px;
  --r-field: 14px;
  --r-pill: 999px;

  /* -- movimiento elástico -------------------------------------------- */
  --dur-fast: 150ms;
  --dur: 260ms;
  --dur-slow: 480ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  /* -- layout --------------------------------------------------------- */
  --wrap: 68rem;
  --wrap-narrow: 48rem;
  --prose: 42.5rem;         /* ~680 px de columna de lectura */
  --column: 42.5rem;
  --header-h: 4.25rem;
  --font: 'Inter', 'Segoe UI Variable Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Identidad de la lección: la fija cada tarjeta y el reproductor con
     estilo en línea. Los cinco colores de lección NO se escriben en esta
     hoja: entran por aquí y solo dentro de una tarjeta.
       --lc  saturado   --lt  tinte de fondo   --ls  desaturado claro */
  --lc: #6C2BF7;
  --lt: #F7F5FF;
  --ls: #E3DCFA;
}

/* ======================================================================
   3. BASE Y ACCESIBILIDAD
   ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }
/* `scroll-padding-top` deja hueco para la cabecera fija: al saltar a un ancla
   («#unidad-2», la colección) el título aterriza DEBAJO de la barra y no
   detrás de ella.

   El recorte horizontal se queda SOLO en el body (más abajo) y no se declara
   aquí a propósito: en cuanto la raíz deja de ser `visible`, el desbordamiento
   del body ya no se propaga al viewport y el body pasa a ser su propio
   contenedor de desplazamiento — con lo que la cabecera y la barra de
   progreso, que son `position: sticky`, dejarían de anclarse. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: -.022em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.018em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h3); }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.35rem; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
/* Ninguna palabra suelta (una dirección, un identificador) puede ensanchar la
   página en un móvil de 360 px. `break-word` y no `anywhere`: parte solo la
   palabra que no cabe, sin encoger el ancho mínimo del resto (que es lo que
   partía «Catálogo» en dos dentro de las migas). */
h1, h2, h3, h4, p, li, dd, dt, td, th, figcaption, summary, label { overflow-wrap: break-word; }
hr { border: 0; border-top: 1px solid var(--lila-idle); margin: var(--sp-8) 0; }
small { font-size: var(--fs-sm); }
b, strong { font-weight: 600; }
button { font: inherit; color: inherit; }
code, pre { font-family: var(--mono); font-size: .92em; }
::selection { background: var(--lila-idle); color: var(--ink); }

/* Anillo de foco violeta, grueso y obligatorio en todo lo interactivo. */
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--r-field);
}
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgba(108, 43, 247, .22);
}

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

.skip-link {
  position: absolute; left: var(--sp-4); top: -5rem; z-index: 100;
  background: var(--violet); color: var(--white);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ======================================================================
   4. LAYOUT
   ====================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.wrap-prose { max-width: var(--prose); }
@media (min-width: 640px) { .wrap { padding-inline: var(--sp-6); } }

.section { padding-block: var(--sp-12); }
.section-lg { padding-block: var(--sp-16); }
@media (min-width: 640px) {
  .section { padding-block: var(--sp-16); }
  .section-lg { padding-block: var(--sp-20); }
}
/* La jerarquía se construye alternando blanco y lila lienzo, nunca con
   sombras ni bordes ni degradados. */
.section-alt, .section-muted, .section-tint { background: var(--lila); }
.section-alt .card, .section-muted .card, .section-tint .card { background: var(--white); }

.center { text-align: center; }
.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--sp-2); } .stack-3 { gap: var(--sp-3); } .stack-4 { gap: var(--sp-4); }
.stack-5 { gap: var(--sp-5); } .stack-6 { gap: var(--sp-6); } .stack-8 { gap: var(--sp-8); }
.stack-12 { gap: var(--sp-12); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.row-center { justify-content: center; }
.grid { display: grid; gap: var(--sp-5); }
.grid-2, .grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); } .mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mb-6 { margin-bottom: var(--sp-6); } .mb-10 { margin-bottom: var(--sp-10); }

.page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--white); }
.page > main { flex: 1 0 auto; }

/* ======================================================================
   5. TIPOGRAFÍA
   Una sola familia geométrica redondeada y solo dos pesos: 400 y 600.
   Todo en formato frase; ninguna regla pone mayúsculas.
   ====================================================================== */

.lead { font-size: var(--fs-h3); color: var(--ink-soft); line-height: var(--lh-body); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-meta); }
.xs.muted, .small.muted { color: var(--ink-soft); }
.meta { font-size: var(--fs-meta); color: var(--ink-faint); }
.strong { font-weight: 600; }
.eyebrow {
  display: inline-block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--violet-deep); letter-spacing: 0;
}
.balance { text-wrap: balance; }
.measure { max-width: var(--prose); }
.measure-center { max-width: var(--prose); margin-inline: auto; }

/* Único sitio del producto donde se colorean palabras sueltas: el titular
   de portada, con una palabra violeta, una fucsia y una en tinta. */
.hl-violet { color: var(--violet); }
.hl-fuchsia { color: var(--fuchsia); }
.hl-ink { color: var(--ink); }

.prose { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--prose); }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + h3, .prose ul + h3 { margin-top: var(--sp-4); }
.prose h3 + p { margin-top: var(--sp-2); }
.prose li + li { margin-top: var(--sp-2); }
.prose strong { font-weight: 600; }

/* ======================================================================
   6. BOTONES
   Píldoras completas. Al pasar el cursor suben; al pulsarlos se hunden y
   encogen un 2 %. Un único botón violeta sólido grande por pantalla.
   ====================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 52px; padding: 13px 26px;
  border: 0; border-radius: var(--r-pill);
  background: var(--violet); color: var(--white);
  font-family: inherit; font-size: var(--fs-body); font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: normal; text-align: center; position: relative;
  transition: transform var(--dur-fast) var(--ease-back),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); background: var(--violet-hover); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); background: var(--violet-deep); }
.btn:disabled, .btn[disabled] {
  background: var(--lila-idle); color: var(--ink-faint); cursor: not-allowed; transform: none;
}

.btn-primary { background: var(--violet); color: var(--white); }
.btn-primary:hover:not(:disabled) { background: var(--violet-hover); }
.btn-primary:active:not(:disabled) { background: var(--violet-deep); }

/* Secundario: píldora lila con texto violeta profundo, sin borde. */
.btn-secondary, .btn-outline, .btn--ghost {
  background: var(--lila); color: var(--violet-deep);
}
.btn-secondary:hover:not(:disabled), .btn-outline:hover:not(:disabled), .btn--ghost:hover:not(:disabled) {
  background: var(--lila-idle); color: var(--violet-deep);
}
.btn-secondary:active:not(:disabled), .btn-outline:active:not(:disabled), .btn--ghost:active:not(:disabled) {
  background: var(--lila-idle);
}

/* Terciario: solo texto violeta, subrayado únicamente al pasar el cursor. */
.btn-ghost, .btn-text {
  background: transparent; color: var(--violet-deep); padding-inline: var(--sp-3);
}
.btn-ghost:hover:not(:disabled), .btn-text:hover:not(:disabled) {
  background: transparent; text-decoration: underline; text-underline-offset: 4px;
}
.btn-ghost:active:not(:disabled), .btn-text:active:not(:disabled) { background: transparent; }

/* Acción destructiva: coral fondo + coral tinta, nunca coral como texto suelto. */
.btn-danger { background: var(--coral-bg); color: var(--coral-ink); }
.btn-danger:hover:not(:disabled) { background: var(--coral-bg); color: var(--coral-ink); }

/* Alias heredados del sistema anterior: todo se resuelve en la paleta nueva. */
.btn--good, .btn--hint { background: var(--violet); color: var(--white); }
.btn--bad { background: var(--lila); color: var(--violet-deep); }

.btn-sm, .btn--sm { min-height: 44px; padding: 10px 20px; font-size: var(--fs-sm); }
.btn-lg { min-height: 60px; padding: 17px 34px; font-size: var(--fs-h3); }
.btn-block, .btn--block { width: 100%; }
@media (max-width: 639px) { .btn-stack { width: 100%; } }

/* Cargando: el botón conserva su tamaño y cambia el texto por tres puntos. */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: '•••'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 22px; letter-spacing: .16em;
  animation: dots 1s infinite ease-in-out;
}
.btn-secondary.is-loading::after, .btn-outline.is-loading::after,
.btn-ghost.is-loading::after, .btn-danger.is-loading::after { color: var(--violet-deep); }
@keyframes dots { 0% { opacity: .35 } 50% { opacity: 1 } 100% { opacity: .35 } }

.link {
  color: var(--violet-deep); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.link:hover { color: var(--violet); }
.link-muted { color: var(--ink-soft); }

/* ======================================================================
   7. COMPONENTES
   ====================================================================== */

/* -- etiquetas y badges: píldoras pequeñas ---------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  border-radius: var(--r-pill); padding: .35rem .85rem;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; white-space: nowrap;
  background: var(--lila); color: var(--violet-deep);
}
.badge-primary { background: var(--violet); color: var(--white); }
.badge-secondary, .badge-soft, .badge-outline, .badge-accent { background: var(--lila); color: var(--violet-deep); }
/* variante de logro: lima con verde tinta */
.badge-success, .badge-win { background: var(--lime); color: var(--lime-ink); }
/* de pago: amarillo con tinta oscura, el mismo par que la etiqueta de la
   rejilla. Nunca acompañado de un candado. */
.badge-paid { background: var(--paid); color: var(--paid-ink); }

/* -- tarjetas: sin sombra y sin borde --------------------------------- */
.card {
  background: var(--lila); border: 0; border-radius: var(--r-card);
  padding: var(--sp-6) var(--sp-5);
}
@media (min-width: 640px) { .card { padding: var(--sp-6); } }
.card-flat, .card--flat, .card-muted { background: var(--lila); }
.card-tint { background: var(--lila); }
.card-white { background: var(--white); }
.card-link { display: block; transition: transform var(--dur-fast) var(--ease-back); }
.card-link:hover { transform: translateY(-3px); }
.card-link:active { transform: translateY(1px) scale(.98); }
.card-title { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-title); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }

.panel { border-radius: var(--r-card); background: var(--lila); overflow: hidden; }
.panel > * + * { border-top: 1px solid var(--lila-idle); }
.panel-row {
  padding: var(--sp-4) var(--sp-5); display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}

.callout {
  background: var(--lila); border-radius: var(--r-card);
  padding: var(--sp-5); font-size: var(--fs-body);
}
.callout-accent { background: var(--lila); }
.callout-title { font-weight: 600; margin-bottom: var(--sp-1); }

/* -- cifras ------------------------------------------------------------ */
.stat { text-align: center; }
.stat-n { font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--violet); font-variant-numeric: tabular-nums; }
.stat-l { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-1); }

/* -- formularios ------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.label { font-size: var(--fs-sm); font-weight: 600; }
.input, .select, .textarea {
  width: 100%; font-family: inherit; font-size: var(--fs-body); font-weight: 400; color: var(--ink);
  background: var(--white); border: 2px solid var(--lila-idle); border-radius: var(--r-field);
  padding: var(--sp-3) var(--sp-4); min-height: 52px;
  transition: border-color var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.input:user-invalid, .select:user-invalid, .textarea:user-invalid { border-color: var(--coral); }
.textarea { min-height: 7rem; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--violet); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--violet); }
.input[aria-invalid='true'] { border-color: var(--coral); }
.hint { font-size: var(--fs-sm); color: var(--ink-soft); }
.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; min-height: 44px; }
.check input { margin-top: .3rem; width: 1.35rem; height: 1.35rem; flex: none; accent-color: var(--violet); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.alert { border-radius: var(--r-field); padding: var(--sp-4); font-size: var(--fs-sm); }
.alert-error { background: var(--coral-bg); color: var(--coral-ink); border-left: 6px solid var(--coral); }
.alert-ok { background: var(--lime); color: var(--lime-ink); font-weight: 600; }
.alert-info { background: var(--lila); color: var(--violet-deep); }
.alert[hidden] { display: none; }

.auth-shell { display: grid; place-items: center; padding-block: var(--sp-10) var(--sp-16); }
.auth-card { width: 100%; max-width: 27rem; }

/* -- barra de progreso continua (cuenta, catálogo) --------------------- */
.bar { height: 12px; border-radius: var(--r-pill); background: var(--lila-idle); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--violet); transition: width var(--dur-slow) var(--ease); }

/* -- píldoras informativas --------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--lila); border-radius: var(--r-pill);
  padding: 8px 16px; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap;
  color: var(--violet-deep); min-height: 40px;
}
.pill .ic { width: 18px; height: 18px; display: block; }

/* -- contadores de logro: racha y experiencia --------------------------
   Son celebración pura, así que van en fucsia sobre su propio tinte, nunca
   en lila. La cifra es de 26 px (por encima del mínimo de 24 px que exige
   el fucsia como texto) y salta cuando sube. */
.pill--xp, .pill--streak {
  background: var(--fuchsia-bg); color: var(--fuchsia-ink);
  padding: 6px 18px 6px 14px; min-height: 52px; gap: var(--sp-3);
}
.pill--xp .ic, .pill--streak .ic { width: 22px; height: 22px; color: var(--fuchsia); }
.pill--xp .n, .pill--streak .n {
  font-size: 26px; font-weight: 600; line-height: 1.05; color: var(--fuchsia);
  font-variant-numeric: tabular-nums; display: block;
}
.pill--xp .k, .pill--streak .k {
  font-size: var(--fs-meta); font-weight: 400; color: var(--fuchsia-ink);
  line-height: 1.1; display: block;
}
.pill .nwrap { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

/* Las dos píldoras de logro van SIEMPRE en una fila de dos columnas iguales:
   mismo ancho, mismo alto y misma línea de base. Apiladas y con anchos
   distintos parecían dos elementos sueltos sin relación entre sí. */
.statrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--sp-3); }
.statrow .pill { width: 100%; min-width: 0; justify-content: flex-start; white-space: normal; }
.statrow .pill .k { overflow-wrap: anywhere; }
/* la cifra salta cuando sube; nunca cambia sin más */
@keyframes countPop {
  0% { transform: scale(1) } 35% { transform: scale(1.28) }
  70% { transform: scale(.94) } 100% { transform: scale(1) }
}
.is-up { animation: countPop 620ms var(--ease-back); }

/* ======================================================================
   8. CHROME
   Fondo blanco, sin borde inferior y sin sombra. El enlace de la sección
   actual va en violeta con un punto violeta debajo.
   ====================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--lila-idle);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.site-header .bar {
  min-height: var(--header-h); display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2);
  height: auto; border-radius: 0; background: none; overflow: visible;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); min-height: 44px; }
.brand-symbol { width: 3rem; height: 3rem; flex: none; display: block; }
.brand-symbol img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-wordmark { display: inline-flex; align-items: baseline; gap: .3rem; min-width: 0; font-size: 1.05rem; letter-spacing: -.025em; white-space: nowrap; }
.brand-wordmark b { font-weight: 600; }
.brand-wordmark span { color: var(--ink-soft); font-weight: 400; }
.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav a.nav-link {
  position: relative; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-soft);
  padding: var(--sp-3); border-radius: var(--r-pill); min-height: 44px;
  display: inline-flex; align-items: center;
  transition: color var(--dur-fast) var(--ease);
}
.nav a.nav-link:hover { color: var(--ink); }
.nav a.nav-link[aria-current='page'] { color: var(--violet); font-weight: 600; }
.nav a.nav-link[aria-current='page']::after {
  content: ''; position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px;
  margin-left: -3px; border-radius: 50%; background: var(--violet);
}
.nav-desktop { display: none; }
@media (min-width: 900px) { .nav-desktop { display: flex; } }
.menu-toggle { display: inline-flex; }
@media (min-width: 900px) { .menu-toggle { display: none; } }
.mobile-nav { display: none; background: var(--lila); }
.mobile-nav.open { display: block; }
.mobile-nav .wrap { padding-block: var(--sp-4) var(--sp-5); }
.mobile-nav a {
  display: flex; align-items: center; padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-body); min-height: 48px; color: var(--ink-soft);
}
.mobile-nav a:hover { color: var(--ink); }
.mobile-nav a[aria-current='page'] { color: var(--violet-deep); font-weight: 600; }
.mobile-nav .row { margin-top: var(--sp-3); }

.crumbs { font-size: var(--fs-meta); color: var(--ink-faint); padding-block: var(--sp-4) var(--sp-1); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: '·'; color: var(--lila-idle); }
.crumbs [aria-current='page'] { color: var(--ink-soft); }

.site-footer { background: var(--lila); margin-top: auto; }
.site-footer .cols { display: grid; gap: var(--sp-8); padding-block: var(--sp-12); grid-template-columns: 1fr; }
@media (min-width: 640px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h4 { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-3); font-weight: 600; }
.site-footer li { list-style: none; }
.site-footer ul { padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer a { font-size: var(--fs-sm); color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 32px; }
.site-footer a:hover { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  border-top: 1px solid var(--lila-idle); padding-block: var(--sp-5);
  font-size: var(--fs-meta); color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
}

/* ======================================================================
   9. PORTADA, CATÁLOGO Y PRO
   ====================================================================== */

.hero { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; gap: var(--sp-10); } }
.hero-copy h1 { max-width: 15ch; }
.hero-copy .lead { max-width: 32rem; }
.hero-bit { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.hero-bit .mascot { width: 64px; height: 64px; flex: none; }
.hero-bit .hb-t { font-size: var(--fs-sm); color: var(--ink-soft); max-width: 22rem; }
.complete-offer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  max-width: 32rem; padding: var(--sp-3) var(--sp-4);
  background: var(--lila); border-radius: var(--r-card);
  font-size: var(--fs-sm); color: var(--violet-deep);
}
.complete-offer .btn { flex: 0 0 auto; }
.read-mode { display: block; max-width: 11rem; line-height: 1.25; }
.legal-consent {
  padding: var(--sp-4); background: var(--lila); border-radius: var(--r-field);
}
@media (max-width: 520px) {
  .complete-offer { align-items: stretch; flex-direction: column; }
  .complete-offer .btn { width: 100%; }
}

.shotfig { margin: 0; }
.shotfig img.shot { display: block; width: 100%; height: auto; border-radius: var(--r-card); background: var(--white); }
.shotfig figcaption { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-3); line-height: var(--lh-body); }
.shotfig.is-crop img.shot { max-height: 30rem; object-fit: cover; object-position: top center; }

.promise-grid { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 900px) { .promise-grid { grid-template-columns: 1.1fr .9fr; gap: var(--sp-10); } }

.promises { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.promises li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); }
.promises li strong { color: var(--ink); font-weight: 600; }
.promises .ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: 2px;
  display: grid; place-items: center; background: var(--lila); color: var(--violet-deep);
  font-weight: 600; font-size: var(--fs-sm);
}
.section-alt .promises .ic { background: var(--white); }
.promises-tight li { font-size: var(--fs-sm); gap: var(--sp-2); }
.promises-tight .ic { width: 22px; height: 22px; font-size: var(--fs-meta); }

.faq { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { background: var(--lila); border-radius: var(--r-card); padding: var(--sp-4) var(--sp-5); }
.section-alt .faq-item { background: var(--white); }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-title); min-height: 44px; display: flex; align-items: center; }
.faq-item p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-body); margin-top: var(--sp-3); }

.module-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.lesson-list { display: grid; gap: var(--sp-3); }
.lesson-row {
  display: flex; align-items: center; gap: var(--sp-4);
  border: 0; border-radius: var(--r-card); background: var(--lila);
  padding: var(--sp-4) var(--sp-5); min-height: 76px;
  transition: transform var(--dur-fast) var(--ease-back), background var(--dur-fast) var(--ease);
}
a.lesson-row:hover { transform: translateY(-2px); background: var(--lila-idle); }
a.lesson-row:active { transform: translateY(1px) scale(.98); }
/* El número lleva la identidad de color de la lección: chip del tinte con
   tinta encima (nunca texto blanco sobre un tono claro) y un anillo del
   color saturado. */
.lesson-n {
  flex: none; width: 46px; height: 46px; border-radius: var(--r-pill); display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 600; background: var(--lt); color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--lc);
  font-variant-numeric: tabular-nums;
}
/* Lo que aún no existe se apaga; lo de pago conserva su color, porque la
   lección está ahí y lo único que falta es el plan. */
.lesson-row.is-planned .lesson-n, .lesson-row.is-locked .lesson-n {
  background: var(--lila-idle); color: var(--ink-faint); box-shadow: none;
}
.lesson-main { flex: 1 1 auto; min-width: 0; }
.lesson-title { font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-title); }
.lesson-sub { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 3px; overflow-wrap: anywhere; }
.lesson-meta { flex: none; display: flex; align-items: center; gap: var(--sp-2); }
@media (max-width: 480px) {
  .lesson-row { flex-wrap: wrap; }
  .lesson-meta { width: 100%; padding-left: calc(46px + var(--sp-4)); }
}

.gate, .gate-hero { background: var(--lila); border-radius: var(--r-card); padding: var(--sp-6); }
@media (min-width: 640px) { .gate { padding: var(--sp-10); } }

.price-card { background: var(--lila); border-radius: var(--r-card); padding: var(--sp-6); display: grid; gap: var(--sp-4); }
.price-main { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.price-n { font-size: clamp(38px, 2rem + 3vw, 56px); font-weight: 600; line-height: 1; color: var(--violet); letter-spacing: -.03em; }
.price-tag { font-size: var(--fs-sm); font-weight: 600; color: var(--violet-deep); background: var(--white); border-radius: var(--r-pill); padding: .3rem .9rem; }
.price-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.price-list li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.price-list .ic { color: var(--violet); font-weight: 600; flex: none; }

/* Código de compra: se lee en voz alta y se copia a mano, así que va en
   monoespaciada, holgado y sobre el lienzo lila. No es un botón ni una marca:
   ni violeta sólido ni color de lección. */
.refcode {
  font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--violet-deep); background: var(--lila); border-radius: var(--r-field);
  padding: .7rem .9rem; letter-spacing: .04em; word-break: break-all; margin: 0;
}

/* -- tabla del panel interno ------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-card); background: var(--lila); }
table.data { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
table.data th, table.data td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--lila-idle); white-space: nowrap; }
table.data th { font-size: var(--fs-meta); color: var(--ink-soft); font-weight: 600; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
.funnel-row { display: grid; grid-template-columns: 12rem 1fr 4rem; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
@media (max-width: 639px) { .funnel-row { grid-template-columns: 8rem 1fr 3rem; } }

/* ======================================================================
   10. MI CAMINO — el color como progreso

   Cada lección tiene un color propio de una paleta de CINCO que rota por
   posición dentro de la unidad (1ª índigo, 2ª cian, 3ª turquesa, 4ª mango,
   5ª sol). Mientras está pendiente ese color solo asoma en la franja
   superior y en el icono; al completarla, la tarjeta se pinta entera con su
   tinte y se queda así para siempre. Después de cinco o seis lecciones la
   pantalla es un mapa de color que ha ganado el alumno.

   Los cinco colores NO se escriben en esta hoja: llegan por --lc (saturado),
   --lt (tinte) y --ls (desaturado claro) en el estilo de cada tarjeta, así
   que por construcción no pueden aparecer en un botón, en un aviso ni en la
   navegación.
   ====================================================================== */

.path-shell { max-width: 64rem; margin: 0 auto; padding: 0 0 var(--sp-16); }
/* La acción va PRIMERA también en el documento, así que el orden visual y el
   orden de tabulación coinciden: nadie ve un botón arriba y llega a él el
   último. En el móvil la columna sigue el documento tal cual. */
.path-layout { display: flex; flex-direction: column; }
.path-side { display: block; }
@media (min-width: 1000px) {
  .path-layout {
    display: grid; grid-template-columns: 18rem minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--sp-8); row-gap: var(--sp-5); align-items: start;
  }
  .path-side { position: sticky; top: calc(var(--header-h) + var(--sp-4)); grid-column: 1; grid-row: 1 / span 2; }
  .path-next { grid-column: 2; grid-row: 1; margin-top: 0; }
  .path-main { grid-column: 2; grid-row: 2; min-width: 0; }
  .path-main .unit:first-child { margin-top: 0; }
}

/* -- La acción, lo primero de la página --------------------------------
   Una sola cosa que hacer: la lección que toca (o la primera, si es la
   primera visita) con su botón. Es el único botón violeta de la pantalla. */
.path-next {
  background: var(--lila); border-radius: var(--r-card);
  padding: var(--sp-5); margin: var(--sp-5) 0 0;
  display: flex; gap: var(--sp-4); align-items: center;
  justify-content: space-between; flex-wrap: wrap;
}
.pnext-copy { min-width: 0; flex: 1 1 15rem; }
/* Sobre lila lienzo el gris de metadatos se queda en 2,6:1, así que aquí el
   antetítulo va en violeta profundo (9,1:1) y nunca en --ink-faint. */
.pnext-kicker { font-size: var(--fs-meta); font-weight: 600; color: var(--violet-deep); }
.pnext-title { font-size: var(--fs-h3); color: var(--ink); margin-top: var(--sp-1); line-height: var(--lh-title); }
.pnext-meta { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-1); }
.path-next .btn { flex: 0 0 auto; white-space: normal; }
@media (max-width: 599px) { .path-next .btn { width: 100%; } }

.path-hero {
  background: var(--lila); border-radius: var(--r-card);
  padding: var(--sp-5); margin: var(--sp-5) 0 var(--sp-2);
  display: flex; gap: var(--sp-4); align-items: center;
}
.path-hero .mascot { flex: 0 0 auto; width: 76px; height: 76px; }
.path-hero h1 { font-size: var(--fs-h3); margin-bottom: var(--sp-1); }
.path-hero p { font-size: var(--fs-sm); color: var(--ink-soft); }
@media (min-width: 1000px) {
  .path-side .path-hero { flex-direction: column; text-align: center; margin-top: 0; }
  .path-side .path-hero .mascot { width: 104px; height: 104px; }
}

/* -- B7. La colección ---------------------------------------------------
   Las veinte lecciones como cuadraditos de color, en una sola pantalla y
   sin desplazamiento. Cierra la página: primero se hace el camino, y aquí
   abajo se ve lo que se lleva pintado. */
.omap { margin: var(--sp-10) 0 var(--sp-6); padding-top: var(--sp-8); border-top: 1px solid var(--lila-idle); }
.omap-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.omap-headings { min-width: 0; flex: 1 1 18rem; }
.omap-head h2 { font-size: var(--fs-h3); }
.omap-note { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-1); max-width: 34rem; }
.omap-count { font-size: var(--fs-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Cuadraditos pequeños de verdad: la rejilla entera cabe en un bloque de
   340 px, así que las veinte lecciones se leen de un vistazo y la imagen se
   puede compartir tal cual. */
.omap-grid { display: flex; flex-direction: column; gap: 8px; margin-top: var(--sp-4); max-width: 340px; }
.omap-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ocell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px; display: block;
  background: var(--lila-idle); transition: transform var(--dur-fast) var(--ease-back);
}
a.ocell:hover { transform: translateY(-2px); }
.ocell.o-done { background: var(--lc); }
.ocell.o-open { background: var(--ls); }
.ocell.o-paid { background: var(--ls); }
.ocell.o-paid::after {
  content: ''; position: absolute; right: 4px; top: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--paid);
}
.ocell.o-locked { background: var(--lila-idle); }
.ocell.o-next { background: var(--white); box-shadow: inset 0 0 0 3px var(--violet); }
.omap-key { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-meta); color: var(--ink-soft); }
.omap-key span { display: inline-flex; align-items: center; gap: 7px; }
.omap-key i { width: 14px; height: 14px; border-radius: 8px; display: block; }
.omap-key .k-done { background: var(--violet); }
.omap-key .k-open { background: var(--white); box-shadow: inset 0 0 0 3px var(--violet); }
.omap-key .k-rest { background: var(--lila-idle); }
/* El cuarto estado, que antes no se explicaba: cuadradito con color suave y
   punto amarillo. Es exactamente el dibujo de `.ocell.o-paid`. */
.omap-key .k-paid { background: var(--lila-idle); position: relative; }
.omap-key .k-paid::after {
  content: ''; position: absolute; right: 1px; top: 1px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--paid);
}

/* La cabecera fija no puede tapar el título al que se salta. */
.omap, .unit, [id^='unidad-'], .path-next { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

/* -- B6. Cabecera de unidad --------------------------------------------
   Nombre, descripción y, a la derecha, cuántas lecciones lleva de cuántas
   con una barra de tramos. Al cerrarse entera, marca lima y tinte suave. */
.unit { margin-top: var(--sp-10); }
.unit-head {
  padding: 0 0 var(--sp-4); display: flex; gap: var(--sp-4);
  align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.unit-head .kicker { font-size: var(--fs-meta); color: var(--ink-faint); }
.unit-head h2 { font-size: var(--fs-h3); color: var(--ink); margin-top: var(--sp-1); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.unit-head p { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-1); max-width: 34rem; }
/* La condición de las de pago, una sola vez por unidad. */
.unit-head .unit-paid { font-size: var(--fs-meta); color: var(--ink-soft); margin-top: var(--sp-2); }
.unit-main { min-width: 0; flex: 1 1 18rem; }
.unit-score { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-end; min-width: 8.5rem; }
.unit-count { font-size: var(--fs-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ubar { display: flex; gap: 4px; align-items: center; width: 8.5rem; }
.ubar i { flex: 1 1 0; height: 8px; border-radius: var(--r-pill); background: var(--lila-idle); display: block; transition: background var(--dur) var(--ease); }
.ubar i.is-done { background: var(--violet); }
.unit-flag {
  display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill);
  padding: 3px 11px; font-size: var(--fs-meta); font-weight: 600;
  background: var(--lime); color: var(--lime-ink);
}
.unit-head.is-complete {
  background: var(--lila); border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4);
}

/* -- B3. Anatomía de la tarjeta -----------------------------------------
   Franja de color arriba, icono en chip, numeración, título, descripción y
   acción solo en la disponible. Radio grande, sin borde salvo en la
   disponible, sin sombra en ningún estado. */
.trail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 760px) { .trail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-2);
  min-height: 168px; padding: calc(var(--sp-4) + 8px) var(--sp-4) var(--sp-4);
  border: 0; border-radius: var(--r-card);
  background: var(--white); color: var(--ink); text-align: left;
  font-family: inherit; font-size: var(--fs-sm); cursor: default;
  transition: transform var(--dur-fast) var(--ease-back), background var(--dur) var(--ease);
}
/* la franja de color: lo que pinta la rejilla sin tocar la legibilidad */
.lcard-strip { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--ls); display: block; }
.lcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.lcard-ic {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--lt); color: var(--lc);
}
.lcard-ic svg { width: 21px; height: 21px; }
.lcard-n { font-size: var(--fs-meta); color: var(--ink-soft); }
.lcard-title { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-title); color: var(--ink); }
.lcard-title, .lcard-sub, .lcard-note { overflow-wrap: anywhere; hyphens: auto; }
.lcard-sub { font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.4; }
.lcard-note { font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.35; margin-top: auto; }
.lcard-tag {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  border-radius: var(--r-pill); padding: 4px 11px; font-size: var(--fs-meta); font-weight: 600;
  background: var(--lila); color: var(--violet-deep);
}
/* la acción: solo la lleva la lección disponible, y es píldora violeta */
.lcard-go {
  margin-top: auto; align-self: stretch; text-align: center;
  background: var(--violet); color: var(--white); border-radius: var(--r-pill);
  padding: 11px 18px; font-size: var(--fs-sm); font-weight: 600; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}

a.lcard, button.lcard { cursor: pointer; }
a.lcard:hover, button.lcard:hover { transform: translateY(-3px); }
a.lcard:active, button.lcard:active { transform: translateY(1px) scale(.98); }

/* -- B4. Los cinco estados ---------------------------------------------- */

/* 1. COMPLETADA — la que el alumno colecciona, y la más bonita de las cinco:
      fondo del tinte, franja saturada, icono a color sobre chip blanco y
      etiqueta lima con la marca de verificación. */
.lcard.is-done { background: var(--lt); }
.lcard.is-done .lcard-strip { background: var(--lc); }
.lcard.is-done .lcard-ic { background: var(--white); color: var(--lc); }
.lcard.is-done .lcard-tag { background: var(--lime); color: var(--lime-ink); }
.lcard.is-done .lcard-title { color: var(--ink); }
.lcard.is-done .lcard-sub, .lcard.is-done .lcard-n { color: var(--ink-soft); }

/* 2. DISPONIBLE — la siguiente que toca. Blanca, contorno violeta grueso con
      pulso lento y la ÚNICA con botón. Solo puede haber una. */
.lcard.is-next { background: var(--white); box-shadow: inset 0 0 0 3px var(--violet); }
.lcard.is-next .lcard-strip { background: var(--lc); }
.lcard.is-next .lcard-ic { background: var(--lt); color: var(--lc); }
.lcard.is-next::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-card);
  animation: slowPulse 2.6s var(--ease) infinite; pointer-events: none;
}
@keyframes slowPulse {
  0% { box-shadow: 0 0 0 0 rgba(108, 43, 247, .38) }
  70% { box-shadow: 0 0 0 14px rgba(108, 43, 247, 0) }
  100% { box-shadow: 0 0 0 0 rgba(108, 43, 247, 0) }
}

/* 3. PENDIENTE PERO ACCESIBLE — lila lienzo, franja desaturada que insinúa
      el color que va a ganar, icono a color. Sin botón y sin etiqueta. */
.lcard.is-open { background: var(--lila); }
.lcard.is-open .lcard-strip { background: var(--ls); }
.lcard.is-open .lcard-ic { background: var(--lt); color: var(--lc); }

/* 4. DE PAGO — idéntica a la pendiente más una etiqueta amarilla. SIN
      candado: la lección se puede abrir, lo que hace falta es el plan. */
.lcard.is-paid { background: var(--lila); }
.lcard.is-paid .lcard-strip { background: var(--ls); }
.lcard.is-paid .lcard-ic { background: var(--lt); color: var(--lc); }
.lcard.is-paid .lcard-tag { background: var(--paid); color: var(--paid-ink); }

/* 5. BLOQUEADA — gris lila, sin color propio, candado gris y, debajo, la
      condición para abrirla. Se ve siempre: esconderla motiva menos. */
.lcard.is-locked { background: var(--lila-dim); }
.lcard.is-locked .lcard-strip { background: var(--lila-idle); }
.lcard.is-locked .lcard-ic { background: var(--lila-idle); color: var(--ink-soft); }
.lcard.is-locked .lcard-title, .lcard.is-locked .lcard-n,
.lcard.is-locked .lcard-sub, .lcard.is-locked .lcard-note { color: var(--ink-soft); }

/* -- B5. El momento de completar ----------------------------------------
   Al volver al camino, la tarjeta recién terminada se rellena de su color
   con un barrido de izquierda a derecha, la etiqueta lima entra con un
   rebote y la siguiente empieza su pulso. */
@keyframes sweepAway { from { transform: scaleX(1) } to { transform: scaleX(0) } }
.lcard.is-sweep > .lcard-strip,
.lcard.is-sweep > .lcard-top,
.lcard.is-sweep > .lcard-n,
.lcard.is-sweep > .lcard-title,
.lcard.is-sweep > .lcard-sub { position: relative; z-index: 1; }
.lcard.is-sweep::before {
  content: ''; position: absolute; inset: 0; z-index: 0; background: var(--lila);
  transform-origin: right; animation: sweepAway 520ms var(--ease) forwards;
}
@keyframes tagPop {
  0% { transform: scale(.4); opacity: 0 }
  60% { transform: scale(1.18); opacity: 1 }
  100% { transform: scale(1); opacity: 1 }
}
.lcard.is-sweep .lcard-tag { animation: tagPop 460ms var(--ease-back) 420ms both; }

.plain-path { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.plain-path li { background: var(--lila); border-radius: var(--r-field); padding: var(--sp-3) var(--sp-4); }
.plain-path .t { font-weight: 600; }
.plain-path .s { font-size: var(--fs-sm); color: var(--ink-soft); }

/* leyenda del camino */
.trail-key { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); font-size: var(--fs-meta); color: var(--ink-soft); }
.trail-key span { display: inline-flex; align-items: center; gap: 7px; }
.trail-key i { width: 14px; height: 14px; border-radius: var(--r-pill); display: block; }
.trail-key .k-done { background: var(--lime); }
.trail-key .k-open { background: var(--white); box-shadow: inset 0 0 0 3px var(--violet); }
.trail-key .k-paid { background: var(--paid); }
.trail-key .k-locked { background: var(--lila-idle); }

/* ======================================================================
   11. REPRODUCTOR DE LECCIÓN
   ====================================================================== */

.player-page { background: var(--white); min-height: 100dvh; }
.pshell { max-width: var(--column); margin: 0 auto; padding: 0 var(--sp-5) var(--sp-16); position: relative; }
.screen { display: none; }
.screen.is-on { display: block; }

/* barra de progreso anclada arriba y visible toda la lección */
.lhead {
  position: sticky; top: 0; z-index: 20; background: var(--white);
  padding: calc(var(--sp-3) + env(safe-area-inset-top)) 0 var(--sp-4); display: flex; align-items: center; gap: var(--sp-3);
  border-bottom: 1px solid var(--lila-idle);
}
.iconbtn {
  width: 44px; height: 44px; flex: 0 0 auto; border: 0; background: transparent; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-soft);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-back);
}
.iconbtn:hover { background: var(--lila); color: var(--ink); }
.iconbtn:active { transform: translateY(1px) scale(.98); }
.iconbtn svg { width: 24px; height: 24px; }
.lesson-brand { width: 30px; height: 30px; flex: 0 0 auto; display: block; }
.lesson-brand img { width: 100%; height: 100%; display: block; }

/* tramos discretos: uno por paso */
.pbar { flex: 1; display: flex; gap: 4px; align-items: center; min-height: 14px; }
.pbar i { flex: 1 1 0; height: 8px; border-radius: var(--r-pill); background: var(--lila-idle); display: block; transition: background var(--dur) var(--ease); }
.pbar i.is-done { background: var(--violet); }
.pbar i.is-now { background: var(--violet); animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; transform: scaleY(1) } 50% { opacity: .72; transform: scaleY(1.6) } }

.scard { background: var(--white); border-radius: var(--r-card); padding: var(--sp-6) 0 0; }
.step-kicker { font-size: var(--fs-meta); color: var(--ink-faint); }
.q { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-title); margin: var(--sp-3) 0 var(--sp-2); letter-spacing: -.015em; }
.qlead { font-size: var(--fs-body); color: var(--ink-soft); line-height: var(--lh-body); }

/* -- opciones de respuesta --------------------------------------------- */
.opts { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }
.opt {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left;
  min-height: 64px; padding: var(--sp-4); cursor: pointer; position: relative;
  background: var(--white); border: 2px solid var(--lila-idle); border-radius: var(--r-field);
  font-family: inherit; font-size: var(--fs-body); font-weight: 400; line-height: 1.4; color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-back), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.opt:hover:not(:disabled) { background: var(--lila); border-color: var(--lila); }
.opt:active:not(:disabled) { transform: translateY(1px) scale(.98); }
/* El texto de la opción tiene que poder encogerse: sin `min-width:0` un
   elemento flexible se planta en su ancho natural y desborda la pantalla. */
.opt > span:not(.key) { min-width: 0; overflow-wrap: anywhere; }
.opt .key {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--r-pill); background: var(--lila);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm);
  font-weight: 600; color: var(--violet-deep);
}
.opt.is-sel { background: var(--lila); border-color: var(--violet); }
.opt.is-sel .key { background: var(--violet); color: var(--white); }
/* acierto: lima + verde tinta + semibold + marca de verificación */
.opt.is-ok { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); font-weight: 600; }
.opt.is-ok .key { background: var(--lime-ink); color: var(--white); }
.opt.is-ok::after { content: '✓'; margin-left: auto; font-weight: 600; color: var(--lime-ink); font-size: var(--fs-h3); }
/* fallo: coral fondo + coral tinta + filo lateral, sin dramatismo */
.opt.is-no { background: var(--coral-bg); border-color: var(--coral-bg); color: var(--coral-ink); border-left: 6px solid var(--coral); }
.opt.is-no .key { background: var(--coral); color: var(--white); }
.opt:disabled { cursor: default; }

.tf { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.tf .btn { flex: 1; }

/* -- ordenar ------------------------------------------------------------ */
.order-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-6); list-style: none; padding: 0; }
.order-item {
  display: flex; align-items: center; gap: var(--sp-3); background: var(--white);
  border: 2px solid var(--lila-idle); border-radius: var(--r-field);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.4; min-height: 100px;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.order-item.is-ok { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); font-weight: 600; }
.order-item.is-no { background: var(--coral-bg); border-color: var(--coral-bg); color: var(--coral-ink); border-left: 6px solid var(--coral); }
.order-num { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--r-pill); background: var(--lila); color: var(--violet-deep); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--fs-sm); }
.order-txt { flex: 1; min-width: 0; }
.order-moves { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.mv {
  width: 48px; height: 44px; border: 0; background: var(--lila); border-radius: var(--r-pill); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; color: var(--violet-deep);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-back);
}
.mv:hover:not(:disabled) { background: var(--lila-idle); }
.mv:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.mv:disabled { background: var(--lila-idle); color: var(--ink-faint); cursor: not-allowed; }
.mv svg { width: 16px; height: 16px; }

/* -- emparejar ---------------------------------------------------------- */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-6); }
.mcol { display: flex; flex-direction: column; gap: var(--sp-2); }
.mcol h4 { font-size: var(--fs-meta); color: var(--ink-faint); font-weight: 400; }
.mitem {
  min-height: 64px; padding: var(--sp-3); text-align: left; cursor: pointer;
  background: var(--white); border: 2px solid var(--lila-idle); border-radius: var(--r-field);
  font-family: inherit; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-back), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mitem:hover:not(.is-ok) { background: var(--lila); border-color: var(--lila); }
.mitem:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.mitem.is-sel { background: var(--lila); border-color: var(--violet); }
.mitem.is-ok { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); font-weight: 600; cursor: default; }
.mitem.is-no { background: var(--coral-bg); border-color: var(--coral-bg); color: var(--coral-ink); border-left: 6px solid var(--coral); }

/* -- constructor de instrucciones --------------------------------------- */
.slot { margin-top: var(--sp-6); }
.slot-label { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.slot-label .n { font-size: var(--fs-body); font-weight: 600; }
.slot-label .h { font-size: var(--fs-sm); color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chip {
  min-height: 44px; padding: 11px 18px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--lila); border: 0; color: var(--violet-deep);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-back), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover:not(.is-on) { background: var(--lila-idle); }
.chip:active { transform: translateY(1px) scale(.98); }
.chip.is-on { background: var(--violet); color: var(--white); }
.promptbox {
  margin-top: var(--sp-6); background: var(--lila); border-radius: var(--r-field);
  padding: var(--sp-5); font-size: var(--fs-body); line-height: var(--lh-body); min-height: 84px;
  overflow-wrap: anywhere;
}
.promptbox .seg { background: var(--white); border-radius: 8px; padding: 2px 6px; color: var(--violet-deep); font-weight: 600; animation: pop var(--dur) var(--ease-back); }
@keyframes pop { from { transform: scale(.88); opacity: 0 } to { transform: none; opacity: 1 } }
.outbox { margin-top: var(--sp-4); border-radius: var(--r-field); overflow: hidden; background: var(--lila); }
.outbox .oh { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.outbox .ob { padding: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-body); background: var(--white); overflow-wrap: anywhere; }
.outbox.is-weak .oh { color: var(--ink-faint); }
.outbox.is-strong { background: var(--violet); }
.outbox.is-strong .oh { color: var(--white); }

/* -- narración grabada ---------------------------------------------------
   Jerarquía de tres niveles: «Continuar» es la acción principal de la
   pantalla y es la única píldora violeta sólida; «Escuchar» es la acción de
   este bloque y lleva contorno violeta; «Desde el inicio» y «Velocidad» son
   ajustes y son visiblemente más discretos. */
.player { margin-top: var(--sp-6); }
.player-row { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }
.btn-listen {
  flex: 1 1 auto; background: var(--white); color: var(--violet-deep);
  box-shadow: inset 0 0 0 3px var(--violet); min-height: 56px; font-size: var(--fs-body);
}
.btn-listen:hover:not(:disabled) { background: var(--lila); color: var(--violet-deep); }
.btn-listen:active:not(:disabled) { background: var(--lila-idle); color: var(--violet-deep); }
.btn-listen.is-loading::after { color: var(--violet-deep); }

/* los ajustes: texto pequeño, sin relleno y sin peso visual */
.aset { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.aset-btn {
  border: 0; background: transparent; padding: 0 2px; min-height: 44px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.aset-btn:hover { color: var(--violet-deep); text-decoration: underline; text-underline-offset: 4px; }
.speed { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; font-weight: 400; font-size: var(--fs-sm); color: var(--ink-soft); }
/* El desplegable es un control táctil como los demás: 44 px de alto de
   verdad y un ancho que no se estira más allá de sus opciones. */
.speed select {
  border: 0; background: transparent; font: inherit; font-weight: 600;
  min-height: 44px; padding: 0 6px; width: auto; max-width: 9rem;
  cursor: pointer; color: var(--violet-deep);
}

/* la parte reproducida en violeta sólido sobre la pista lila inactiva */
.abar { height: 12px; background: var(--lila-idle); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--sp-5); }
.abar i { display: block; height: 100%; width: 0; background: var(--violet); border-radius: var(--r-pill); transition: width .18s linear; }
.ameta { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-meta); color: var(--ink-faint); }
.ameta .el { color: var(--violet-deep); font-weight: 600; font-variant-numeric: tabular-nums; }
.ameta .tt { font-variant-numeric: tabular-nums; }
.caption { margin-top: var(--sp-4); background: var(--white); border: 2px solid var(--lila-idle); border-radius: var(--r-field); padding: var(--sp-4); min-height: 110px; display: flex; flex-direction: column; justify-content: center; }
.caption .lb { font-size: var(--fs-meta); color: var(--ink-faint); }
.caption .tx { font-size: var(--fs-body); line-height: 1.5; margin-top: var(--sp-1); overflow-wrap: anywhere; }
.transcript { margin-top: var(--sp-4); padding-top: var(--sp-3); }
.transcript summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--violet-deep); min-height: 44px; display: flex; align-items: center; }
.transcript ol { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.transcript li { padding: var(--sp-3); border-radius: var(--r-field); font-size: var(--fs-sm); line-height: var(--lh-body); background: var(--lila); }
.transcript li.is-now { background: var(--lila-idle); font-weight: 600; }
.note { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-4); }

/* -- tarjeta de lectura --------------------------------------------------- */
.readcard { margin-top: var(--sp-6); border-radius: var(--r-card); background: var(--lila); overflow: hidden; }
.read-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-meta); color: var(--ink-soft); }
.read-meta .tag { font-size: var(--fs-meta); font-weight: 600; background: var(--violet); color: var(--white); border-radius: var(--r-pill); padding: 4px 12px; }
.read-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.rline { position: relative; padding-left: 2.6rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.rline .rn {
  position: absolute; left: 0; top: .15rem; width: 1.8rem; height: 1.8rem; border-radius: var(--r-pill);
  background: var(--white); color: var(--violet-deep); display: grid; place-items: center;
  font-size: var(--fs-meta); font-weight: 600;
}
.rline:first-child { font-weight: 600; }

/* -- diagrama / recorrido -------------------------------------------------- */
.dg-phases { display: flex; gap: 6px; margin-top: var(--sp-5); }
.dg-phase { flex: 1; text-align: center; font-size: var(--fs-meta); padding: var(--sp-2) 4px; border-radius: var(--r-pill); background: var(--lila-idle); color: var(--ink-soft); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.dg-phase.on { background: var(--violet); color: var(--white); font-weight: 600; }
.dg-phase.done { background: var(--lila); color: var(--violet-deep); }
.dg-ctx { margin-top: var(--sp-5); background: var(--lila); border-radius: var(--r-field); padding: var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-title); }
.dg-ctx .lb { font-size: var(--fs-meta); color: var(--ink-faint); display: block; margin-bottom: 5px; }
.cands { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.cand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-field); transition: background var(--dur) var(--ease); }
.cand .w { width: 88px; flex: 0 0 auto; font-weight: 600; font-size: var(--fs-sm); }
.cand .bar2 { flex: 1; height: 12px; background: var(--lila-idle); border-radius: var(--r-pill); overflow: hidden; }
.cand .bar2 i { display: block; height: 100%; width: 0; background: var(--lila-idle); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease); }
.cand .p { width: 48px; text-align: right; font-size: var(--fs-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cand.win { background: var(--lila); }
.cand.win .bar2 i { background: var(--violet); }
.cand.win .p { color: var(--violet-deep); font-weight: 600; }
.dg-sentence { margin-top: var(--sp-5); background: var(--lila); border-radius: var(--r-field); padding: var(--sp-4); font-size: var(--fs-h3); line-height: 1.45; }
.dg-sentence .new { background: var(--violet); color: var(--white); border-radius: 8px; padding: 1px 7px; animation: pop var(--dur) var(--ease-back); }
.dg-bullets { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.dg-bullets li { position: relative; padding: var(--sp-3) var(--sp-4) var(--sp-3) 2.6rem; background: var(--lila); border-radius: var(--r-field); font-size: var(--fs-sm); line-height: var(--lh-body); }
.dg-bullets li::before { content: ''; position: absolute; left: var(--sp-4); top: 1.35rem; width: 9px; height: 9px; border-radius: 50%; background: var(--violet); }
.dg-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-soft); }

/* -- ideas clave ----------------------------------------------------------- */
.insight-list { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.insight-list li { display: flex; gap: var(--sp-3); background: var(--lila); border-radius: var(--r-field); padding: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-body); }
.insight-list .ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-pill); display: grid; place-items: center; font-weight: 600; font-size: var(--fs-sm); background: var(--white); color: var(--violet-deep); }
.insight-list li.yes .ic { background: var(--lime); color: var(--lime-ink); }
.insight-list li.no { border-left: 6px solid var(--coral); }
.insight-list li.no .ic { background: var(--coral-bg); color: var(--coral-ink); }

/* -- bloque de retroalimentación -------------------------------------------
   Acierto: violeta sólido con texto blanco y la mascota a la izquierda.
   Fallo: lila lienzo con filo coral fino a la izquierda. Fallar duele poco. */
.fb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--violet); color: var(--white);
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-back);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.fb.is-up { transform: none; }
.fb.no { background: var(--lila); color: var(--ink); border-left: 6px solid var(--coral); }
.fb-in { max-width: var(--column); margin: 0 auto; display: flex; gap: var(--sp-4); align-items: flex-start; }
.fb-mascot { width: 56px; height: 56px; flex: 0 0 auto; }
.fb-body { flex: 1; min-width: 0; }
.fb-t { font-size: var(--fs-h3); font-weight: 600; color: var(--white); display: flex; align-items: center; gap: var(--sp-2); }
.fb.no .fb-t { color: var(--coral-ink); }
.fb-w { font-size: var(--fs-sm); margin-top: 4px; line-height: var(--lh-body); color: var(--white); }
.fb.no .fb-w { color: var(--ink-soft); }
.fb .btn { margin-top: var(--sp-4); width: 100%; background: var(--white); color: var(--violet-deep); }
.fb .btn:hover:not(:disabled) { background: var(--lila); color: var(--violet-deep); }
.fb .btn:active:not(:disabled) { background: var(--lila-idle); color: var(--violet-deep); }
.fb.no .btn { background: var(--violet); color: var(--white); }
.fb.no .btn:hover:not(:disabled) { background: var(--violet-hover); color: var(--white); }

.dock { margin-top: var(--sp-8); }
.spacer { height: var(--sp-6); }

/* -- celebración ------------------------------------------------------------ */
.final { text-align: center; padding-top: var(--sp-4); }
.final .mascot { width: 128px; height: 128px; margin: 0 auto; }
.final h1 { font-size: var(--fs-h2); margin-top: var(--sp-5); color: var(--fuchsia); }
.final .sub { font-size: var(--fs-body); color: var(--ink-soft); margin-top: var(--sp-2); }
.stats { display: flex; gap: var(--sp-3); margin-top: var(--sp-8); }
.stat-card { flex: 1; background: var(--lila); border-radius: var(--r-card); padding: var(--sp-4) var(--sp-2); }
.stat-card .k { font-size: var(--fs-meta); color: var(--ink-soft); }
.stat-card .v { font-size: 32px; font-weight: 600; line-height: 1.1; margin-top: var(--sp-1); font-variant-numeric: tabular-nums; color: var(--violet); }
.stat-card.streak .v { color: var(--fuchsia); }
.recap { list-style: none; padding: 0; margin: var(--sp-8) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); text-align: left; }
.recap li { display: flex; gap: var(--sp-3); background: var(--lila); border-radius: var(--r-field); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-body); }
.recap .ic { color: var(--violet); font-weight: 600; flex: 0 0 auto; }
/* El lienzo de confeti es un elemento REEMPLAZADO: si no se le da tamaño en
   CSS, `position:fixed; inset:0` no manda y el navegador usa su tamaño
   intrínseco, que es el del mapa de bits (`innerWidth × devicePixelRatio`).
   En un móvil de 360 px con densidad 3-4 eso son 1080-1440 px de ancho y la
   página entera se ensancha en cuanto se celebra algo. Con ancho y alto
   explícitos el lienzo mide siempre la pantalla. */
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; pointer-events: none; z-index: 60; }

.mascot-wrap { display: flex; justify-content: center; margin-top: var(--sp-5); }
.mascot-sm { width: 88px; height: 88px; }
.saving { font-size: var(--fs-meta); color: var(--ink-faint); text-align: center; margin-top: var(--sp-3); min-height: 18px; }
.saving.warn { color: var(--coral-ink); }

/* ======================================================================
   12. MARCADOR DE LOGROS
   ====================================================================== */

.markcard { background: var(--lila); border-radius: var(--r-card); padding: var(--sp-5); text-align: left; }
.markcard-lg { padding: var(--sp-6); max-width: 54rem; }
.markcard-head { display: flex; gap: var(--sp-4); align-items: center; }
.markcard-bit { width: 60px; height: 60px; flex: 0 0 auto; }
.markcard-bit svg { width: 100%; height: 100%; }
.markcard-t { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-title); }
.markcard-s { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-1); line-height: var(--lh-body); }
.markcard-s strong { color: var(--ink); font-weight: 600; }

.marks { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (min-width: 520px) { .marks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .marks { grid-template-columns: 1fr 1fr 1fr; } }
.mark { display: flex; align-items: center; gap: var(--sp-3); background: var(--white); border-radius: var(--r-card); padding: var(--sp-4); }
.mark-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--lila); color: var(--violet-deep); }
.mark-ic svg { width: 22px; height: 22px; }
.mark-body { display: flex; flex-direction: column; min-width: 0; }
.mark-v { font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--violet); }
.mark-k { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.3; }
.mark-t { font-size: var(--fs-meta); color: var(--ink-faint); margin-top: 2px; }
/* «aciertos a la primera» es un acierto: lima. «lecciones completadas» es un
   logro: fucsia, y solo en la cifra grande (30 px). */
.mark.is-first .mark-ic, .mark.is-lesson .mark-ic { background: var(--lime); color: var(--lime-ink); }
.mark.is-lesson .mark-v { color: var(--fuchsia); }

.markstrip { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.markchip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); border-radius: var(--r-pill);
  padding: 7px 15px 7px 11px; font-size: var(--fs-meta); color: var(--ink-soft);
}
.markchip svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--violet); }
.markchip b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.markchip.is-topic { background: var(--lila); color: var(--violet-deep); }
.markchip.is-topic b { color: var(--violet-deep); }

.markfoot { margin-top: var(--sp-5); border-top: 1px solid var(--lila-idle); padding-top: var(--sp-4); }
.markfoot-t { font-size: var(--fs-meta); color: var(--ink-faint); }
.markchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.markwhat { margin-top: var(--sp-4); }
.markwhat summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--violet-deep); min-height: 44px; display: flex; align-items: center; }
.markwhat ul { margin: var(--sp-2) 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); line-height: var(--lh-body); }
.markwhat strong { color: var(--ink); }

/* «Lo que llevas hecho» encabeza el bloque entero: píldoras y marcador. */
.progress-block { display: block; }
.marks-mini { text-align: center; }
.marks-mini-t { font-size: var(--fs-meta); font-weight: 400; color: var(--ink-faint); text-align: center; }
.marks-mini .markstrip { justify-content: center; margin-top: var(--sp-2); }
.marks-mini .markchip { background: var(--lila); }

/* Estado vacío del marcador: en la primera visita no hay nada que contar,
   así que en vez de tres ceros aparece Bit invitando a empezar. */
.marks-empty {
  display: flex; gap: var(--sp-3); align-items: center; text-align: left;
  margin-top: var(--sp-3); background: var(--lila); border-radius: var(--r-card);
  padding: var(--sp-4);
}
.marks-empty .mascot-tiny { width: 54px; height: 54px; flex: 0 0 auto; }
.marks-empty p { font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.45; }
.marks-empty strong { color: var(--ink); font-weight: 600; }

.final .markcard { margin-top: var(--sp-8); }
.final .markcard-head { text-align: left; }
.final .markstrip { justify-content: flex-start; }

/* ======================================================================
   13. ESTADOS
   ====================================================================== */

.sk { border-radius: var(--r-field); background: var(--lila); animation: shimmer 1.4s infinite ease-in-out; }
.sk--bubble { border-radius: var(--r-card); height: 152px; }
.sk--head { height: 44px; border-radius: var(--r-field); }
.sk--line { height: 14px; margin-top: var(--sp-2); }
.sk--card { height: 200px; border-radius: var(--r-card); }
@keyframes shimmer { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }

.state-card { background: var(--lila); border-radius: var(--r-card); padding: var(--sp-6); margin-top: var(--sp-6); display: flex; gap: var(--sp-4); align-items: flex-start; text-align: left; }
.state-card .state-mascot { width: 72px; height: 72px; flex: 0 0 auto; }
.state-card h3 { font-size: var(--fs-h3); }
.state-card p { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-2); }
.state-card .row { margin-top: var(--sp-4); }
@media (max-width: 460px) {
  .state-card { flex-direction: column; align-items: center; text-align: center; }
  .state-card .row { justify-content: center; }
}

/* ======================================================================
   14. MOVIMIENTO
   Curvas elásticas con un ligero rebote. Cinco momentos definidos:
   acierto, fallo, avance de paso, lección completada y carga de página.
   ====================================================================== */

@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes cheer { 0% { transform: scale(1) rotate(0) } 30% { transform: scale(1.12) rotate(-6deg) } 60% { transform: scale(1.12) rotate(6deg) } 100% { transform: scale(1) rotate(0) } }
@keyframes snore { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.04) } }
.m-idle { animation: bob 3.4s ease-in-out infinite; }
.m-happy { animation: cheer 760ms var(--ease-back); }
.m-sad { animation: shakeX 380ms ease-in-out; }
.m-sleep { animation: snore 3.8s ease-in-out infinite; }

/* acierto: la tarjeta vira a lima medio segundo y vuelve */
@keyframes winFlash { 0% { background: var(--white) } 30% { background: var(--lime) } 100% { background: var(--white) } }
.scard.is-win { animation: winFlash 620ms var(--ease); }

/* fallo: vibración horizontal muy breve de la opción elegida */
@keyframes shakeX { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
.is-shake { animation: shakeX 320ms ease-in-out; }

/* avance de paso: la saliente se va a la izquierda, la entrante llega desde
   la derecha, con solape: la pantalla nunca se queda vacía */
#stepHost { position: relative; }
@keyframes stepIn { from { opacity: 0; transform: translateX(38px) } to { opacity: 1; transform: none } }
@keyframes stepOut { from { opacity: 1; transform: none } to { opacity: 0; transform: translateX(-38px) } }
.scard.is-in { animation: stepIn 380ms var(--ease-back); }
.scard.is-out { position: absolute; inset: 0; animation: stepOut 300ms var(--ease) forwards; pointer-events: none; }

/* carga de página: titular y botón escalonados */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.reveal { animation: riseIn 520ms var(--ease-back) both; animation-delay: calc(var(--d, 0) * 90ms); }
.opt, .insight-list li, .dg-bullets li, .recap li, .lcard, .stat-card {
  animation: riseIn 420ms var(--ease-back) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.opts .opt:nth-child(1) { --i: 0 } .opts .opt:nth-child(2) { --i: 1 }
.opts .opt:nth-child(3) { --i: 2 } .opts .opt:nth-child(4) { --i: 3 }
.opts .opt:nth-child(5) { --i: 4 } .opts .opt:nth-child(6) { --i: 5 }
.insight-list li:nth-child(1) { --i: 0 } .insight-list li:nth-child(2) { --i: 1 }
.insight-list li:nth-child(3) { --i: 2 } .insight-list li:nth-child(4) { --i: 3 }
.insight-list li:nth-child(5) { --i: 4 } .insight-list li:nth-child(6) { --i: 5 }
.insight-list li:nth-child(7) { --i: 6 }
.stats .stat-card:nth-child(1) { --i: 0 } .stats .stat-card:nth-child(2) { --i: 1 }
.stats .stat-card:nth-child(3) { --i: 2 }

/* ======================================================================
   15. MÓVIL
   Se diseña primero para móvil: botón principal a ancho completo y siempre
   visible abajo, opciones apiladas y barra de progreso anclada arriba.
   ====================================================================== */

@media (max-width: 639px) {
  :root { --fs-hero: clamp(32px, 9.5vw, 42px); --fs-h2: clamp(25px, 7.2vw, 31px); }
  .wrap { padding-inline: var(--sp-4); }
  .site-header .bar { gap: var(--sp-2); }
  .brand { gap: .5rem; }
  .brand-symbol { width: 2.55rem; height: 2.55rem; }
  .brand-wordmark { font-size: .95rem; gap: .22rem; }
  .menu-toggle { padding-inline: 16px; }
  .hero { gap: var(--sp-10); }
  .hero-copy .lead { font-size: 1.08rem; }
  .hero-shot { margin-top: var(--sp-2); }
  .lesson-row { padding: var(--sp-4); gap: var(--sp-3); }
  .lesson-meta { padding-left: calc(46px + var(--sp-3)); flex-wrap: wrap; }
  .pshell { padding-inline: var(--sp-4); padding-bottom: 7.5rem; }
  .lhead { gap: var(--sp-2); }
  .lesson-brand { display: none; }
  .lhead .pill--xp { min-height: 44px; padding: 6px 12px; }
  /* el botón principal del paso vive fijo en la parte inferior */
  .scard .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
    background: rgba(255,255,255,.96); border-top: 1px solid var(--lila-idle);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  }
  .scard .dock .btn { width: 100%; }
  body.fb-open .scard .dock { display: none; }
  .tf { flex-direction: column; }
  .match { grid-template-columns: 1fr; }
  .mcol h4 { margin-top: var(--sp-3); }
  .stats { flex-direction: column; }
  .final .stat-card { display: flex; align-items: baseline; justify-content: space-between; padding: var(--sp-4); }
  .final .stat-card .v { margin-top: 0; }

  /* El alto que se gasta ANTES de la primera lección: la bienvenida de Bit y
     el bloque de logros se aprietan para que la unidad 1 entre casi de
     primeras. Nada desaparece; todo ocupa menos. */
  .path-next { padding: var(--sp-4); margin-top: var(--sp-4); }
  .path-hero { padding: var(--sp-4); gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2); }
  .path-hero .mascot { width: 56px; height: 56px; }
  .path-hero p { font-size: var(--fs-meta); line-height: 1.45; }
  .progress-block { margin-top: var(--sp-3); }
  .statrow { gap: var(--sp-2); margin-top: var(--sp-2); }
  .statrow .pill { min-height: 48px; padding: 6px 12px 6px 10px; gap: var(--sp-2); }
  .marks-mini .marks-empty { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); margin-top: var(--sp-2); }
  .marks-mini .marks-empty .mascot-tiny { width: 42px; height: 42px; }
  .path-side .card { padding: var(--sp-4); }
  .unit { margin-top: var(--sp-8); }
  .omap { margin-top: var(--sp-8); padding-top: var(--sp-6); }
  .badge { white-space: normal; }
}

/* ----------------------------------------------------------------------
   Móvil estrecho: la rejilla de lecciones pasa a UNA columna.
   A dos columnas sobre 360 px cada tarjeta se queda en 148 px de ancho: los
   títulos se parten en tres o cuatro líneas y las tarjetas quedan con
   alturas distintas. A una columna la tarjeta se reordena en horizontal
   —icono y estado a la izquierda, texto a la derecha—, así que además de
   respirar ocupa MENOS alto que la versión apilada de dos columnas.
   ---------------------------------------------------------------------- */
@media (max-width: 519px) {
  .trail { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .trail .lcard {
    display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
    column-gap: var(--sp-3); row-gap: 2px; align-items: start;
    min-height: 92px; padding: calc(var(--sp-4) + 6px) var(--sp-4) var(--sp-4);
  }
  /* El icono ocupa la columna de la izquierda a lo alto de la tarjeta; la
     etiqueta de estado se saca del flujo y se ancla arriba a la derecha, y la
     línea «lección N» le reserva el hueco. La anatomía de escritorio (franja,
     icono en chip, numeración, título) no cambia. */
  .trail .lcard-top { grid-column: 1; grid-row: 1 / span 5; display: block; }
  .trail .lcard-tag { position: absolute; top: calc(var(--sp-4) + 4px); right: var(--sp-4); }
  .trail .lcard-n { grid-column: 2; grid-row: 1; min-height: 1.5rem; padding-right: 5.75rem; }
  .trail .lcard-title,
  .trail .lcard-sub,
  .trail .lcard-note,
  .trail .lcard-go { grid-column: 2; }
  .trail .lcard-title { font-size: var(--fs-body); }
  .trail .lcard-sub { font-size: var(--fs-sm); }
  .trail .lcard-note { margin-top: var(--sp-1); }
  .trail .lcard-go { justify-self: start; align-self: start; margin-top: var(--sp-3); }
}

@media (min-width: 640px) {
  :root { --fs-body: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .btn:hover:not(:disabled), .btn:active:not(:disabled),
  .opt:active:not(:disabled), .chip:active, .card-link:hover,
  a.lcard:hover, button.lcard:hover, a.lcard:active, button.lcard:active { transform: none; }
  .lcard.is-sweep::before { display: none; }
}

/* ---------------------------------------------------------------------
   Selector de idioma. Vive en el sistema violeta y en ningún otro: canvas
   lila para el grupo, violeta sólido para el idioma activo. Ninguno de los
   cinco colores de lección se acerca a este control, que es navegación.
   --------------------------------------------------------------------- */
.langpick{display:inline-flex;align-items:center;gap:2px;padding:3px;
  background:var(--lila);border-radius:999px}
.langpick .langopt{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.5rem;min-height:32px;padding:0 .625rem;border-radius:999px;
  font-size:.8125rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
  transition:background .18s ease,color .18s ease}
.langpick .langopt:hover{color:var(--violet-deep);background:var(--lila-idle)}
.langpick .langopt.is-on{background:var(--violet);color:var(--white)}
.langpick .langopt:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.langpick-sm{margin:0 .5rem}
.langrow{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;
  border-top:1px solid var(--lila-idle);margin-top:.5rem}
.langrow .langlabel{font-size:.875rem;color:var(--ink-soft)}
.langrow .langpick .langopt{min-height:44px;min-width:auto;padding:0 1rem;font-size:.9375rem}
@media (prefers-reduced-motion:reduce){.langpick .langopt{transition:none}}

/* Conversion elements: factual offer framing, restrained proof, no overlays. */
.free-hook{display:grid;gap:.35rem;padding:1rem 1.125rem;border:1px solid var(--lila-idle);
  border-left:4px solid var(--violet);border-radius:var(--r-card);background:var(--lila)}
.free-hook strong{font-size:1.05rem;color:var(--ink)}
.free-hook span{font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.social-proof{font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.price-later{margin:.75rem 0 0;font-size:.9rem;color:var(--ink-soft)}
textarea.input{resize:vertical;min-height:7rem;line-height:1.5}