/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · framework.css — tokens y componentes
   Regla del proyecto: NO existe un CSS por página. Un color a mano es un error.
   Nomenclatura BEM. Escala fluida en clamp() (referencia: framework de web-sns-v2).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens (marca/README.md · desarrollo/03-estilos-globales.md) ─────────────────────── */
:root {
  /* Color de marca */
  --c-navy: #12273a;
  --c-navy-suave: #1d3c57;
  --c-coral: #fd5038;
  --c-crema: #fcfaf7;
  --c-crema-calida: #f5ede2;   /* el crema del hero y de las bandas */
  --c-blanco: #ffffff;
  --c-pizarra: #576573;
  --c-ambar: #e8a020;

  /* ── El coral tiene dos papeles (contraste medido, WCAG 2.1 AA) ──────────────────────
     `--c-coral` es la marca: identidad, titulares de 24 px o más, iconos, bordes y
     rellenos decorativos. Como TEXTO pequeño da 3,16:1 sobre crema y con blanco encima
     3,29:1 — por debajo del 4,5 que exige AA.
     `--c-acento` es el coral de texto: mismo tono, más oscuro. 4,55 como mínimo sobre
     TODAS las superficies claras del sitio, no solo sobre la crema principal
     y 4,89 con blanco encima. Es el que usan botones sólidos, enlaces y etiquetas.
     Regla: si el coral lleva texto encima o ES texto por debajo de 24 px, `--c-acento`. */
  --c-acento: #c7301b;
  --c-acento-hover: #b32915;
  --c-acento-suave: #ff8a76;   /* coral sobre navy, donde el oscuro ya da el contraste */

  /* Derivados funcionales */
  --c-tinta: var(--c-navy);
  --c-fondo: var(--c-crema);
  --c-superficie: var(--c-blanco);
  --c-superficie-hundida: var(--c-crema-calida);
  --c-texto-suave: var(--c-pizarra);
  --c-borde: #e5e0d6;
  --c-borde-calido: #e4d8c6;
  --c-zebra: #eef2f5;
  --c-banda-tablas: #f2eadd;
  --c-ok: #217d54;
  --c-ok-fondo: #eaf6ed;
  --c-error: #cf2121;
  --c-error-fondo: #fdf2ef;
  --c-navy-90: rgba(18, 39, 58, 0.9);
  --c-crema-oscura: #f4f0e9;

  /* Tonos de apoyo que la home usaba a mano y ahora son del sistema */
  --c-ambar-suave: #f3b25e;      /* ámbar sobre navy */
  --c-ambar-fondo: #fef8ee;      /* fondo del plan destacado */
  --c-azul: #6fb3ff;             /* píldora del hero */
  --c-azul-tinta: #4a7bb0;       /* checks de la tarjeta de IA */
  --c-azul-fondo: #e7f0fa;       /* fondo de la tarjeta de IA */
  --c-ok-suave: #4aba76;         /* verde sobre navy */
  --c-texto-navy: #b9c6d2;       /* texto secundario sobre navy */
  --c-navy-borde: #4a6076;       /* aros y bordes sobre navy */
  --c-navy-linea: #294762;       /* el raíl de la línea de tiempo */

  /* Roles con tamaño propio: el importe de un plan y la nota manuscrita no encajan en la
     escala de titulares porque no son titulares (y la nota va en otra familia). */
  --t-precio: 2.125rem;          /* 34 */
  --t-nota: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);   /* 22 → 30 */

  /* Tipografía — Plus Jakarta Sans autoalojada, font-display: swap */
  --f-base: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --peso-regular: 400;
  --peso-semi: 600;
  --peso-extra: 800;

  /* ── Escala tipográfica (aprobada 2026-08-10) ────────────────────────────────────────
     Seis escalones de titular y cuatro de texto. Se usan SIEMPRE por token: un tamaño a
     mano en una hoja de página es un error, igual que un color a mano.

     TITULARES — el número de la derecha es el tamaño a 1440; por debajo bajan con clamp.
       --t-display  46/50  Titular grande de sección · H1 de ficha
       --t-h1       40/46  Hero de la home
       --t-h2       36/42  Titular de bloque
       --t-h3       28/34  Cabecera de sección corriente
       --t-h4       24/30  Banda oscura · subtítulos
       --t-h5       20/26  Titular de tarjeta

     TEXTO — suelo de legibilidad: nada baja de 14 px, tampoco en móvil.
       --t-lead      18/28  Entradilla larga, primer párrafo
       --t-cuerpo    16/26  Todo lo que se lee de corrido
       --t-tarjeta   15/22  Texto dentro de tarjetas y controles compactos
       --t-muletilla 14/20  Mínimo absoluto: etiquetas, badges, legal, pies de dato */
  --t-display: clamp(2rem, 1.45rem + 2.45vw, 2.875rem);
  --t-h1: clamp(1.875rem, 1.5rem + 1.7vw, 2.5rem);
  --t-h2: clamp(1.625rem, 1.35rem + 1.25vw, 2.25rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --t-h4: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --t-h5: 1.25rem;

  --t-lead: 1.125rem;
  --t-cuerpo: 1rem;
  --t-tarjeta: 0.9375rem;
  --t-muletilla: 0.875rem;

  /* Interlineados que acompañan a la escala */
  --i-titular: 1.12;
  --i-texto: 1.6;

  /* Alias de la escala vieja. Se mantienen porque los componentes de ficha y hub los
     consumen; apuntan a los escalones nuevos y no se deben usar en código nuevo. */
  --t-xs: var(--t-muletilla);
  --t-s: var(--t-tarjeta);
  --t-base: var(--t-cuerpo);
  --t-m: var(--t-h5);
  --t-l: var(--t-h3);
  --t-xl: var(--t-h2);
  --t-2xl: var(--t-display);

  /* Espaciado — 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96, fijo. Los dos últimos eran
     elásticos: los bloques están cotados en px y un espacio que se estira descuadra
     las alturas contra el diseño. */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  /* Radios — cinco, los del Figma. De nueve valores sueltos a estos. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Alias de la nomenclatura anterior; no usar en código nuevo. */
  --r-s: var(--r-sm);
  --r-m: var(--r-md);
  --r-l: var(--r-lg);

  --sombra-s: 0 1px 3px rgba(18, 39, 58, 0.08);
  --sombra-m: 0 6px 24px rgba(18, 39, 58, 0.1);

  /* Layout */
  --ancho-contenido: 68rem;
  --ancho-texto: 44rem;
  --altura-cabecera: 5.5rem;   /* la cabecera sticky; quicknav y anclas calculan desde aquí */
  --altura-quicknav: 3.4rem;
}

/* Superficies navy: el rojo oscuro de texto se vuelve ilegible encima (2,8 sobre el navy),
   así que dentro de ellas `--c-acento` pasa a valer el coral claro, que da 6,64. Se
   redefine la variable en el contenedor en lugar de ir persiguiendo regla por regla: así
   cualquier componente que se meta mañana dentro de una caja navy hereda el color bueno. */
.seccion--navy,
.minicard,
.cierre__card,
.conversion,
.pie,
.b3 {
  --c-acento: var(--c-acento-suave);
  --c-acento-hover: var(--c-blanco);
}

/* El botón sí usa `--c-acento` como FONDO, no como color de texto, así que dentro de una
   caja navy se le queda un coral claro con letra blanca encima (2,30). Ahí manda el coral
   de marca con la letra en navy, que es la misma pareja que ya usan los círculos de paso. */
.seccion--navy .boton:not(.boton--secundario),
.minicard .boton:not(.boton--secundario),
.cierre__card .boton:not(.boton--secundario),
.conversion .boton:not(.boton--secundario),
.pie .boton:not(.boton--secundario),
.b3 .boton:not(.boton--secundario) {
  background: var(--c-coral);
  border-color: var(--c-coral);
  color: var(--c-navy);
}
.seccion--navy .boton:not(.boton--secundario):hover,
.minicard .boton:not(.boton--secundario):hover,
.cierre__card .boton:not(.boton--secundario):hover,
.conversion .boton:not(.boton--secundario):hover,
.pie .boton:not(.boton--secundario):hover,
.b3 .boton:not(.boton--secundario):hover {
  background: var(--c-acento-suave);
  border-color: var(--c-acento-suave);
  color: var(--c-navy);
}

/* WPForms marca el asterisco de campo obligatorio con su propio rojo (#d63637), que sobre
   la crema oscura se queda en 3,96. Se le impone el token del tema. */
.wpforms-required-label { color: var(--c-error) !important; }

/* ── Fuente autoalojada (variable, un solo fichero para 200-800) ──────────────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Texto solo para lectores de pantalla: completa un enlace corto («Read more») con el
   destino, que en pantalla ya se deduce del titular de al lado pero fuera de contexto no. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Regla fija de la casa: el móvil no «baila». En los DOS selectores — si el scroll lo
   lleva el elemento raíz, la regla puesta solo en body se ignora y la página se sigue
   moviendo de lado. Es la red de seguridad, no el diagnóstico: si aparece desbordamiento
   hay que buscar además el elemento culpable.

   `clip` en vez de `hidden` donde el navegador lo soporte: `hidden` sobre html convierte
   el raíz en contenedor de scroll y ROMPE `position: sticky`, y aquí son sticky la
   cabecera y la quicknav de las fichas. `clip` recorta igual sin crear ese contenedor.
   `hidden` queda de reserva para navegadores viejos. */
html,
body { overflow-x: hidden; }
@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

body {
  margin: 0;
  font-family: var(--f-base);
  font-size: var(--t-cuerpo);
  line-height: var(--i-texto);
  color: var(--c-tinta);
  background: var(--c-fondo);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  letter-spacing: -0.02em;
  margin: 0 0 var(--e-4);
}

h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); margin-top: var(--e-7); }
h3 { font-size: var(--t-h3); margin-top: var(--e-6); }
h4 { font-size: var(--t-h4); }

p { margin: 0 0 var(--e-4); }

a {
  color: var(--c-acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--c-acento-hover); }

/* ── Estados ──────────────────────────────────────────────────────────────────────────
   Antes de esto el tema tenía dos reglas de `focus`, y una lo quitaba: quien navegaba con
   teclado no veía dónde estaba. El aro es global y va con `:focus-visible`, así que solo
   aparece al tabular y nunca al hacer clic con el ratón — que es justo por lo que alguien
   lo desactivó en su día. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--c-coral);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sobre navy el coral no se separa lo suficiente del fondo: el aro pasa a blanco. */
:where(.seccion--navy, .b3, .b7, .pie) :where(a, button, [tabindex]):focus-visible {
  outline-color: var(--c-blanco);
}

/* Todo lo pulsable llega al mínimo de 44 px de alto de área de toque. */
:where(a.boton, button, [role="button"]) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:where(button, a.boton, input, select)[disabled],
:where(button, a.boton)[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

img { max-width: 100%; height: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--e-5);
  font-size: var(--t-s);
  background: var(--c-superficie);
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--c-borde-calido);
  box-shadow: var(--sombra-m);
}
th,
td {
  text-align: left;
  padding: var(--e-3) var(--e-4);
}
/* Solo la cabecera va en navy. El estilo se acota a `thead th` porque la primera columna
   del cuerpo (el pronombre) es `th scope="row"`: es cabecera de fila de verdad, pero se
   lee como celda normal, no como banda navy. */
thead th {
  background: var(--c-navy);
  color: var(--c-blanco);
  font-weight: var(--peso-semi);
}
tbody th {
  font-weight: var(--peso-regular);
  color: inherit;
  background: transparent;
}
/* Zebra en tinte navy frío: se lee como fila, no como el fondo cálido (decisión Figma v3) */
tbody tr:nth-child(even) td,
tbody tr:nth-child(even) th { background: var(--c-zebra); }
tbody tr:hover td,
tbody tr:hover th { background: var(--c-crema-oscura); }
td strong { color: var(--c-acento); font-weight: var(--peso-extra); }

/* ── Layout ───────────────────────────────────────────────────────────────────────────── */
.contenedor {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.contenido-texto {
  max-width: var(--ancho-texto);
}

.seccion { padding-block: var(--e-8); }
.seccion--navy {
  background: var(--c-navy);
  color: var(--c-blanco);
}
.seccion--navy h2 { color: var(--c-blanco); }

/* ── Cabecera ─────────────────────────────────────────────────────────────────────────── */
.cabecera {
  background: var(--c-superficie);
  border-bottom: 1px solid var(--c-borde);
  position: sticky;
  top: 0;
  z-index: 60;
}
.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--altura-cabecera);
}
.cabecera__logo img { display: block; height: 42px; width: auto; }
.cabecera__nav {
  display: flex;
  gap: var(--e-5);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cabecera__nav a {
  color: var(--c-tinta);
  text-decoration: none;
  font-weight: var(--peso-semi);
  font-size: var(--t-s);
}
.cabecera__nav a:hover { color: var(--c-acento); }

/* Los ítems de primer nivel llegan a los 24 px de caja que pide WCAG 2.2 para el área de
   toque. El padding es transparente, así que no cambia nada a la vista. */
.cabecera__item > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-block: var(--e-2);
}

/* La flecha del desplegable: a 0,7em no se veía. Se sube y se le quita transparencia, y
   gira al abrirse para que el estado se lea sin depender del color. */
.cabecera__flecha {
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.8;
  transition: transform 160ms ease, opacity 160ms ease;
}

.cabecera__item--desplegable:hover > a .cabecera__flecha,
.cabecera__item--desplegable:focus-within > a .cabecera__flecha {
  opacity: 1;
  transform: rotate(180deg);
}

/* ── Desplegables ─────────────────────────────────────────────────────────────────────
   El panel se abre con `:hover` y con `:focus-within`, sin JavaScript: funciona igual con
   el ratón y tabulando, y no hay estado que se quede colgado. `visibility` en vez de
   `display` para que la transición exista y para que el contenido no sea alcanzable por
   el tabulador mientras está cerrado. */
.cabecera__item--desplegable { position: relative; }

.cabecera__panel {
  position: absolute;
  top: 100%;
  left: calc(var(--e-5) * -1);
  z-index: 70;
  width: 34rem;
  max-width: calc(100vw - var(--e-6));
  padding: var(--e-5) 26px;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(18, 39, 58, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.cabecera__item--desplegable:hover > .cabecera__panel,
.cabecera__item--desplegable:focus-within > .cabecera__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cabecera__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* Cada entrada ocupa su fila; las píldoras del segundo bloque se reparten el ancho. */
.cabecera__submenu > li { flex: 1 0 100%; }
.cabecera__submenu > .cabecera__item--pildora { flex: 0 0 auto; }

/* El separador entre bloques y su rótulo. Quién abre bloque se declara en el menú con la
   clase `nav-grupo`, no se deduce del contenido. */
.cabecera__grupo {
  flex: 1 0 100%;
  margin-top: var(--e-3);
  padding-top: var(--e-4);
  border-top: 1px solid var(--c-borde);
}

.cabecera__rotulo {
  display: block;
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--c-acento);
}

/* La fila entera se marca al pasar por encima: el área activa es toda la caja, no solo el
   texto, y por eso el enlace se sale del padding del panel con un margen negativo. */
.cabecera__submenu a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-inline: calc(var(--e-3) * -1);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-sm);
  text-align: left;
  transition: background-color 140ms ease;
}

.cabecera__submenu a:hover,
.cabecera__submenu a:focus-visible {
  background: var(--c-fondo);
}

.cabecera__submenu .cabecera__etiqueta {
  font-size: var(--t-cuerpo);
  font-weight: 700;
  color: var(--c-navy);
}

.cabecera__submenu a:hover .cabecera__etiqueta { color: var(--c-acento); }

.cabecera__descriptor {
  font-size: var(--t-muletilla);
  font-weight: var(--peso-regular);
  line-height: 1.35;
  color: var(--c-texto-suave);
}

/* Segundo bloque: los nichos, como píldoras. Aquí el realce es la propia píldora. */
.cabecera__item--pildora a {
  width: fit-content;
  flex-direction: row;
  margin-inline: 0;
  padding: 7px 14px;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-pill);
  background: var(--c-fondo);
}

.cabecera__item--pildora a .cabecera__etiqueta { font-size: var(--t-muletilla); }

.cabecera__item--pildora a:hover {
  background: var(--c-superficie-hundida);
  border-color: var(--c-acento);
}

/* La última entrada del desplegable de recursos —el blog— va en coral, como en el diseño. */
.cabecera__item--destacado .cabecera__etiqueta { color: var(--c-acento); }

/* ── Botones ──────────────────────────────────────────────────────────────────────────── */
.boton {
  display: inline-block;
  background: var(--c-acento);
  color: var(--c-blanco);
  font-weight: var(--peso-extra);
  font-size: var(--t-s);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-s);
  text-decoration: none;
  border: 2px solid var(--c-acento);
  transition: background 0.15s ease, color 0.15s ease;
}
.boton:hover { background: var(--c-acento-hover); border-color: var(--c-acento-hover); color: var(--c-blanco); }
.boton--secundario {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.boton--secundario:hover { background: var(--c-navy); color: var(--c-blanco); }

/* ── Migas de pan (las 56 de recurso) ─────────────────────────────────────────────────── */
.migas {
  font-size: var(--t-xs);
  color: var(--c-texto-suave);
  padding-block: var(--e-4);
}
.migas a { color: var(--c-texto-suave); }
.migas__sep { margin-inline: var(--e-2); }

/* ── Bloques reutilizables ────────────────────────────────────────────────────────────── */

/* Franja de respaldo */
.respaldo {
  background: var(--c-crema-oscura);
  border-top: 1px solid var(--c-borde);
  padding-block: var(--e-5);
  margin: 0;
  font-size: var(--t-s);
  color: var(--c-texto-suave);
  text-align: center;
}

/* CTA de conversión de recurso */
.conversion {
  background: var(--c-navy);
  color: var(--c-blanco);
  border-radius: var(--r-l);
  padding: var(--e-6);
  margin-block: var(--e-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
}
.conversion__titulo {
  font-size: var(--t-m);
  font-weight: var(--peso-extra);
  margin: 0;
}
.conversion__texto {
  margin: var(--e-2) 0 0;
  font-size: var(--t-s);
  color: rgba(255, 255, 255, 0.82);
  max-width: 34rem;
}

/* FAQ */
.faq__item {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-m);
  margin-bottom: var(--e-3);
  padding: var(--e-4) var(--e-5);
}
.faq__item summary {
  cursor: pointer;
  font-weight: var(--peso-semi);
  font-size: var(--t-base);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-weight: var(--peso-extra);
  font-size: var(--t-l);
  color: var(--c-acento);
  line-height: 1;
  flex: 0 0 auto;
}
.faq__item[open] summary::after { content: '\2212'; }
.faq__item p { margin: var(--e-3) 0 0; color: var(--c-texto-suave); }

/* Tabla de conjugación: hereda de table; el modificador marca irregulares */
.conjugacion strong { color: var(--c-acento); }


/* Precios */
.precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--e-5);
  margin-block: var(--e-6);
}
.precios__bono {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-m);
  padding: var(--e-5);
  text-align: center;
}
.precios__nombre { font-weight: var(--peso-semi); color: var(--c-texto-suave); font-size: var(--t-s); }
.precios__cifra { font-size: var(--t-xl); font-weight: var(--peso-extra); margin-block: var(--e-2); }
.precios__nota { font-size: var(--t-xs); color: var(--c-texto-suave); }
.precios__oferta {
  text-align: center;
  font-weight: var(--peso-semi);
  color: var(--c-acento);
}

/* Los cinco pasos */
.pasos {
  counter-reset: paso;
  list-style: none;
  margin: var(--e-6) 0;
  padding: 0;
  display: grid;
  gap: var(--e-5);
}
.pasos__paso {
  counter-increment: paso;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-m);
  padding: var(--e-5);
  position: relative;
  padding-left: 4.25rem;
}
.pasos__paso::before {
  content: counter(paso);
  position: absolute;
  left: var(--e-5);
  top: var(--e-5);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-acento);
  color: var(--c-blanco);
  font-weight: var(--peso-extra);
  display: grid;
  place-items: center;
}

/* ── Pie ──────────────────────────────────────────────────────────────────────────────────
   Figma, `Navegación — Menú` → `Pie — Desktop 1440`. La columna de marca más las cuatro de
   enlaces que la arquitectura llama «SEO silencioso»: es el único sitio desde el que, en
   cualquier página, cuelgan /vocabulary, /pronunciation y las hijas de nicho. */
.pie {
  background: var(--c-navy);
  color: var(--c-texto-navy);
  padding-block: var(--e-8) var(--e-6);
  font-size: var(--t-tarjeta);
}

.pie__inner {
  display: grid;
  /* Columnas iguales, tantas como haya: la de marca no manda sobre las de enlaces, y
     añadir una columna nueva desde el panel no descuadra la rejilla. */
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--e-5);
  align-items: start;
}

.pie__marca { display: flex; flex-direction: column; gap: var(--e-3); }
/* `align-self` porque la columna es flex: sin él la imagen se estira al ancho de la
   columna y el logotipo sale deformado. */
.pie__logo { display: block; align-self: flex-start; height: 64px; width: auto; }
.pie__descripcion { margin: 0; }

/* Datos de contacto de la primera columna: dominio y correo bajo la descripción. Mismo
   tratamiento que los enlaces de las otras columnas —blanco al pasar, subrayado— para que
   se lean como enlaces sobre el navy, donde el coral de marca no llega a contraste. El
   padding deja cada uno en los 24 px de caja táctil que pide WCAG 2.2. */
.pie__contacto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.pie__contacto a {
  display: inline-block;
  padding-block: 4px;
  color: var(--c-texto-navy);
  text-decoration: none;
  /* El correo es la cadena más larga de la columna y en móvil desborda: sin esto la página
     baila de lado, que es motivo de rechazo. */
  overflow-wrap: anywhere;
}
.pie__contacto a:hover { color: var(--c-blanco); text-decoration: underline; }

/* Redes: en fila y con salto, porque son pocas y cortas. Solo se pinta si hay cuentas. */
.pie__redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
.pie__red-enlace {
  display: inline-block;
  padding-block: 4px;
  color: var(--c-texto-navy);
  text-decoration: none;
}
.pie__red-enlace:hover { color: var(--c-blanco); text-decoration: underline; }

.pie__columnas { display: contents; }
.pie__columna { display: flex; flex-direction: column; gap: var(--e-3); }

.pie__titulo {
  margin: 0;
  font-size: var(--t-tarjeta);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-blanco);
}

.pie__titulo a { color: inherit; text-decoration: none; }
.pie__titulo a:hover { text-decoration: underline; }

.pie__enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

/* El padding lleva cada enlace a los 24 px de caja que pide WCAG 2.2, sin abrir la lista. */
.pie__enlaces a {
  display: block;
  padding-block: 4px;
  color: var(--c-texto-navy);
  text-decoration: none;
}

.pie__enlaces a:hover { color: var(--c-blanco); text-decoration: underline; }

.pie__barra {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--c-navy-linea);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-muletilla);
}

.pie__copyright, .pie__firma, .pie__ancla { margin: 0; }
.pie__firma strong { color: var(--c-blanco); font-weight: 700; }
/* La frase con el enlace a la portada ocupa toda la fila y va debajo del copyright: es
   texto de sitio, no una firma más. Sobre el navy del pie el coral de marca no llega a
   contraste, así que el enlace va en blanco y se distingue por el subrayado. */
.pie__ancla { flex-basis: 100%; order: 3; color: var(--c-texto-navy); }
.pie__ancla a { color: var(--c-blanco); text-decoration: underline; }
.pie__ancla a:hover { color: var(--c-ambar-suave); }

@media (max-width: 1100px) {
  .pie__inner { grid-template-columns: repeat(2, 1fr); }
  .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .pie__inner { grid-template-columns: 1fr; }
}

/* Pie colapsable en móvil (Figma aprobado): cada columna se pliega bajo su título; el JS
   pone aria-expanded y la clase. Sin JS, el pie se ve entero. */
/* El control del pliegue es un <button> que el JS mete DENTRO del h2. El encabezado
   sigue siendo encabezado —para un lector de pantalla y para un agente—, que es justo lo
   que se perdía cuando el rol de botón se le ponía al propio h2. En escritorio el botón
   no se distingue del título: hereda tipografía y color y no pinta caja. */
.pie__plegar {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pie__plegar--suelto { display: none; }

@media (max-width: 1100px) {
  .pie__titulo[data-plegable] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pie__titulo[data-plegable] .pie__plegar {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 6px;
  }
  .pie__plegar--suelto { display: block; }
  .pie__titulo[data-plegable] .pie__plegar::after {
    content: '▾';
    color: var(--c-acento-suave);
    font-weight: var(--peso-extra);
    transition: transform 0.2s ease;
  }
  .pie__columna.es-abierta .pie__titulo[data-plegable] .pie__plegar::after { transform: rotate(180deg); }
  .pie__columna { border-bottom: 1px solid var(--c-navy-linea); padding-bottom: 8px; }
  .pie__titulo[data-plegable] + .pie__enlaces { display: none; }
  .pie__columna.es-abierta .pie__titulo[data-plegable] + .pie__enlaces { display: flex; }
}

/* ── Artículo (verbo / recurso) ───────────────────────────────────────────────────────── */
.articulo { padding-block: var(--e-6) var(--e-8); }
.articulo__cuerpo h2 {
  padding-bottom: var(--e-2);
  border-bottom: 2px solid var(--c-crema-oscura);
  scroll-margin-top: 8.5rem; /* header + quick-nav sticky */
}
.articulo__cuerpo { max-width: var(--ancho-texto); }
.articulo__cuerpo table { max-width: 100%; }
.articulo--ficha { background: var(--c-banda-tablas); }
.articulo--ficha .articulo__inner {
  background: transparent;
}

/* ── Quick-nav sticky (ficha de recurso) ──────────────────────────────────────────────── */
.quicknav {
  background: var(--c-superficie);
  border-block: 1px solid var(--c-borde);
  position: sticky;
  top: var(--altura-cabecera); /* nace bajo el hero y se cuelga de la cabecera sticky */
  z-index: 50;
}
.quicknav__inner {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  padding-block: var(--e-3);
  scrollbar-width: none;
}
.quicknav__inner::-webkit-scrollbar { display: none; }
.quicknav__pill {
  flex: 0 0 auto;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--c-texto-suave);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.quicknav__pill:hover { color: var(--c-navy); background: var(--c-crema-oscura); }
.quicknav__pill--activa {
  background: var(--c-navy);
  color: var(--c-blanco);
  font-weight: var(--peso-extra);
}
.quicknav__pill--activa:hover { background: var(--c-navy); color: var(--c-blanco); }

/* ── Keep going: malla interna (ficha de recurso) ─────────────────────────────────────── */
.relacionados { margin-block: var(--e-7); }
.relacionados__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
}
.relacionados__cab h2 { margin-top: 0; border-bottom: 0; }
.relacionados__hub {
  font-weight: var(--peso-extra);
  font-size: var(--t-s);
  text-decoration: none;
}
.relacionados__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e-4);
}
.relacionados__card {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-m);
  padding: var(--e-4) var(--e-5);
  text-decoration: none;
  box-shadow: var(--sombra-s);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.relacionados__card:hover {
  transform: translateY(-4px);
  border-color: var(--c-acento);
  box-shadow: var(--sombra-m);
}
.relacionados__nombre {
  font-weight: var(--peso-extra);
  font-size: var(--t-m);
  color: var(--c-navy);
}
.relacionados__kw { font-size: var(--t-xs); color: var(--c-texto-suave); }

/* ── Motion (sobrio; ver lámina de notas del Figma) ───────────────────────────────────── */
.js-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js-reveal--visto {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
  .relacionados__card { transition: none; }
  .quicknav__pill { transition: none; }
}

/* ── Ficha por bandas (diseño Figma «Plantillas — Ficha de verbo») ────────────────────── */
.contenedor--estrecho { max-width: var(--ancho-texto); margin-inline: auto; }

.ficha-hero { padding-block: var(--e-6) var(--e-7); }
.ficha-hero h1 { max-width: 56rem; }
.ficha-hero__intro {
  max-width: var(--ancho-texto);
  font-size: var(--t-m);
  color: var(--c-texto-suave);
}
.ficha-hero__chips { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-4); }
.chip {
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-pill);
  background: var(--c-superficie);
  border: 1.5px solid var(--c-crema-oscura);
  font-size: var(--t-xs);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}
.chip--coral { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-blanco); }

.banda-tablas {
  background: var(--c-banda-tablas);
  border-block: 1px solid var(--c-borde-calido);
  padding-block: var(--e-7) var(--e-8);
}
.banda-tablas h2 { border-bottom: 0; margin-top: 0; }
.tabla-presente table { margin-bottom: 0; }

.tiempos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-6) var(--e-6);
  margin-top: var(--e-7);
  align-items: start;
}
.tiempo {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-m);
  /* `overflow: hidden` estaba aquí solo para que el radio de esquina no se comiera el borde
     de la tabla. En movil recortaba la tabla de verdad: la auditoria del 2026-09-03 midio la
     columna `-se` del imperfecto de subjuntivo cortada a 4-24 px, con «escuchásemos» leyendose
     «escucháse». `clip` recorta igual en el eje del radio pero deja que el hijo con scroll
     funcione. */
  overflow: clip;
  box-shadow: var(--sombra-m);
}
/* La tabla se desplaza dentro de su tarjeta en lugar de perder columnas. Se declara aqui y no
   en cada plantilla porque afecta a las 138 fichas. */
.tiempo .tabla-scroll { padding-block: 0; margin: 0; }
.tiempo table { max-width: 100%; }
.tiempo h2,
.tiempo h3 {
  background: var(--c-navy);
  color: var(--c-blanco);
  font-size: var(--t-m);
  margin: 0;
  padding: var(--e-3) var(--e-5);
  border-bottom: 0;
}
.tiempo p {
  padding: var(--e-3) var(--e-5) 0;
  margin-bottom: var(--e-3);
  font-size: var(--t-s);
  color: var(--c-texto-suave);
}
.tiempo table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
/* El h2 de la tarjeta hace de cabecera, así que la fila de <thead> sobra visualmente.
   Se acota a thead: la primera columna del cuerpo es th scope="row" y tiene que verse. */
.tiempo table thead th { display: none; }
@media (max-width: 52rem) {
  .tiempos-grid { grid-template-columns: 1fr; }
}

.seccion--texto h2:first-of-type { margin-top: 0; }
.seccion--texto { padding-block: var(--e-6); }

.usos h2 { margin-top: 0; }
.usos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e-5);
  margin-top: var(--e-5);
}
.usos__card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-m);
  padding: var(--e-5);
}
.usos__card h3 { margin-top: 0; font-size: var(--t-base); color: var(--c-blanco); }
.usos__card p { margin-bottom: 0; font-size: var(--t-s); color: rgba(255, 255, 255, 0.82); }
.usos__card strong, .usos__card em { color: var(--c-acento); font-style: normal; }

.mistakes { padding-block: var(--e-6); }
.mistakes h2 { margin-top: 0; }
.mistake {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: var(--e-4);
  align-items: center;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-m);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-3);
  box-shadow: var(--sombra-s);
}
.mistake__mal, .mistake__bien {
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-s);
  font-weight: var(--peso-extra);
  font-size: var(--t-s);
}
.mistake__mal { background: var(--c-error-fondo); color: var(--c-error); }
.mistake__bien { background: var(--c-ok-fondo); color: var(--c-ok); }
.mistake__porque { margin: 0; font-size: var(--t-s); color: var(--c-texto-suave); }
.mistake__porque em { color: var(--c-navy); }
@media (max-width: 52rem) {
  .mistake { grid-template-columns: 1fr; }
}

/* anclas de la quick-nav: el id vive en la sección/tarjeta, no en el h2 */
.ficha section[id], .ficha .tiempo[id] { scroll-margin-top: calc(var(--altura-cabecera) + var(--altura-quicknav) + 1rem); }

/* ── Palabras en español dentro del texto ─────────────────────────────────────────────────
   Plus Jakarta no tiene cursiva real: el navegador la sintetiza y el término se pega a la
   palabra siguiente («Sermeans»). Norma de la casa: el español en línea va en semibold con
   resalte suave, no en cursiva. Se aplica a las 85 fichas sin tocar contenido. */
.ficha em, .articulo__cuerpo em {
  font-style: normal;
  font-weight: var(--peso-semi);
  color: var(--c-navy);
  background: rgba(18, 39, 58, 0.07);
  padding: 0.05em 0.3em;
  border-radius: var(--r-sm);
}
/* dentro de tablas el término ya destaca solo */
.ficha table em { background: transparent; padding: 0; }

/* Cualquier tabla ancha de una ficha se desplaza dentro de su caja en lugar de perder columnas.
   La auditoria del 2026-09-03 midio /vocabulary/numbers-1-100 en 642 px sobre un viewport de
   375: el `overflow-x: clip` de la pagina evitaba el baile, pero las columnas 51-100 quedaban
   cortadas y sin manera de llegar a ellas. Pasaba lo mismo en las tablas de referencia de
   gramatica y en varias de vocabulario.

   El scroll lo lleva el envoltorio `.tabla-scroll` que pone `susa_envuelve_tablas()`, no la
   tabla. Antes lo llevaba la tabla con `display: block`, y eso la dejaba de tratar como tabla:
   la tarjeta blanca ocupaba el ancho entero y las filas solo el suyo, con ~113 px de blanco
   sobrante a la derecha en las tablas de dos columnas (`/grammar/adjective-agreement/`). Con la
   tabla como tabla, rellena su contenedor sola y solo desborda —y desplaza— si no cabe. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* La sombra de la tabla se sale de su caja; sin este hueco el contenedor con scroll la
     recorta arriba y abajo. El margen negativo lo devuelve al ritmo vertical del texto. */
  padding-block: 6px;
  margin: -6px 0 calc(var(--e-5) - 6px);
}
.ficha .tabla-scroll > table,
.articulo__cuerpo .tabla-scroll > table { margin: 0; }
/* en bandas navy el español va en coral a pelo: la caja translúcida mataba el contraste */
.seccion--navy em, .usos__card em {
  color: var(--c-acento);
  background: transparent;
  padding: 0;
  font-weight: var(--peso-extra);
}

/* ── Ajustes al Figma real (revisión Fernando 09/08) ──────────────────────────────────── */
/* El H1 de ficha no es el display gigante de la home */
.ficha-hero h1 { font-size: var(--t-display); }

/* header: logo con endoso legible + menú + login */
.cabecera__logo img { height: 64px; }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e-5); }
.cabecera__login {
  color: var(--c-tinta);
  text-decoration: none;
  font-weight: var(--peso-semi);
  font-size: var(--t-s);
}
.cabecera__login:hover { color: var(--c-acento); }

/* hero a dos columnas con la tarjeta-resumen */
.ficha-hero__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--e-7);
  align-items: center;
}
.ficha-hero__guia { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); }
/* Ficha sin tarjeta a la derecha: el hueco de la segunda columna no se reserva.
   La tarjeta solo se pinta si la ficha tiene conjugacion (verbo) o imagen de guia (recurso), y
   59 de las 81 fichas de recurso no tienen guia todavia. Con la rejilla fija de dos columnas
   esas fichas servian media pantalla vacia a la derecha del H1 — lo vio Fernando en
   /vocabulary/sports/. El `max-width` del texto va aparte y sin `:has()` a proposito: aunque el
   navegador no colapse la columna, la linea no se estira hasta hacerse ilegible. */
.ficha-hero__cols:not(:has(.ficha-hero__guia)) { grid-template-columns: minmax(0, 1fr); }
.ficha-hero__cols > .ficha-hero__texto:only-child { max-width: 46rem; }
.minicard {
  background: var(--c-navy);
  border-radius: var(--r-l);
  padding: var(--e-5) var(--e-5) var(--e-4);
  width: min(21rem, 100%);
  box-shadow: 0 18px 42px -8px rgba(18, 39, 58, 0.35);
  transform: rotate(-3deg);
  transition: transform 0.25s ease;
}
.minicard:hover { transform: rotate(-1.5deg) translateY(-4px); }

/* Variante de recurso: el mismo hueco del hero, la misma inclinación y la misma sombra
   que la tarjeta del verbo, pero con la imagen de la guía dentro. Así la ficha de
   gramática es la misma plantilla que la de verbo y no una versión recortada. */
.minicard--imagen {
  display: block;
  padding: var(--e-2);
  overflow: hidden;
}
.minicard--imagen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-l) - var(--e-2));
}
.minicard__titulo {
  color: var(--c-blanco);
  font-weight: var(--peso-extra);
  font-size: var(--t-m);
  margin: 0 0 var(--e-3);
}
.minicard__tilde { color: var(--c-acento); }
/* La lista de conjugación es un <dl>: hay que anular los márgenes que el navegador
   pone por defecto a dl y dd, o cada forma aparece sangrada 40 px. */
.minicard__lista { margin: 0; }
.minicard__fila dd { margin: 0; }
.minicard__fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--r-s);
  padding: var(--e-2) var(--e-3);
  margin-bottom: var(--e-1);
}
.minicard__pron { color: rgba(255, 255, 255, 0.65); font-size: var(--t-xs); }
.minicard__forma { color: var(--c-blanco); font-weight: var(--peso-extra); font-size: var(--t-s); }
.minicard__badge {
  display: inline-block;
  background: var(--c-acento);
  color: var(--c-blanco);
  font-weight: var(--peso-extra);
  font-size: var(--t-xs);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-pill);
  text-decoration: none;
}
.minicard__badge:hover { background: var(--c-acento-hover); color: var(--c-blanco); }
.minicard__nota {
  font-size: var(--t-xs);
  color: var(--c-texto-suave);
  text-align: center;
  max-width: 19rem;
  margin: 0;
}
@media (max-width: 56rem) {
  .ficha-hero__cols { grid-template-columns: 1fr; }
  .ficha-hero__guia { align-items: flex-start; }
}

/* ── S8 guía (banda crema oscura, dos columnas) ───────────────────────────────────────── */
.guia {
  background: var(--c-banda-tablas);
  border-block: 1px solid var(--c-borde-calido);
  padding-block: var(--e-8);
}
.guia__cols {
  display: grid;
  /* la tarjeta real es vertical (US Letter): columna fija para que no devore la banda */
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: var(--e-8);
  align-items: center;
  max-width: 58rem;
  margin-inline: auto;
}
.guia__imagen { margin: 0; }
.guia__imagen img,
.guia__placeholder {
  width: 100%;
  border-radius: var(--r-m);
  box-shadow: 0 14px 36px -6px rgba(18, 39, 58, 0.28);
  transform: rotate(1.5deg);
}
.guia__placeholder {
  background: var(--c-navy);
  padding: var(--e-6);
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-3);
}
.guia__placeholder-titulo { color: var(--c-blanco); font-weight: var(--peso-extra); font-size: var(--t-m); margin: 0; }
.guia__placeholder-nota { color: rgba(255, 255, 255, 0.6); font-size: var(--t-s); margin: 0; }
.guia__texto h2 { margin-top: 0; }
.guia__form { display: flex; gap: var(--e-3); margin-block: var(--e-4); }
@media (max-width: 44rem) { .guia__form { flex-wrap: wrap; } }
.guia__campo {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  padding: var(--e-3) var(--e-4);
  border: 1.5px solid var(--c-borde-calido);
  border-radius: var(--r-s);
  background: var(--c-superficie);
}
.guia__consentimiento {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  font-size: var(--t-xs);
  color: var(--c-texto-suave);
  max-width: 34rem;
}
@media (max-width: 56rem) { .guia__cols { grid-template-columns: 1fr; } }

/* ── Practice interactivo ─────────────────────────────────────────────────────────────── */
.ejercicio ol { padding-left: 1.4rem; }
.ejercicio li { margin-bottom: var(--e-3); font-size: var(--t-base); }
.ejercicio__hueco {
  font: inherit;
  font-weight: var(--peso-extra);
  color: var(--c-navy);
  text-align: center;
  width: 7.5rem;
  padding: var(--e-1) var(--e-2);
  border: 0;
  border-bottom: 2.5px solid var(--c-borde-calido);
  border-radius: var(--r-s) var(--r-s) 0 0;
  background: var(--c-superficie);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ejercicio__hueco:focus-visible { border-color: var(--c-navy); }
.ejercicio__hueco--bien { border-color: var(--c-ok); background: var(--c-ok-fondo); color: var(--c-ok); }
.ejercicio__hueco--mal { border-color: var(--c-error); background: var(--c-error-fondo); color: var(--c-error); }
.ejercicio__acciones { display: flex; align-items: center; gap: var(--e-4); margin-top: var(--e-5); }
.ejercicio__boton { cursor: pointer; font: inherit; font-weight: var(--peso-extra); }
.ejercicio__resultado { font-weight: var(--peso-extra); color: var(--c-navy); }
.ejercicio__solucion { margin-top: var(--e-4); font-size: var(--t-s); color: var(--c-texto-suave); }
.ejercicio__solucion summary { cursor: pointer; font-weight: var(--peso-semi); }

/* ── Cierre (CTA real del Figma, tras Practice) ───────────────────────────────────────── */
.cierre { padding-block: var(--e-6) var(--e-8); }
.cierre__card {
  background: var(--c-navy);
  border-radius: var(--r-l);
  padding: var(--e-7);
  color: var(--c-blanco);
}
.cierre__card h2 { margin-top: 0; color: var(--c-blanco); border-bottom: 0; font-size: var(--t-xl); }
.cierre__card p { color: rgba(255, 255, 255, 0.85); max-width: 44rem; }
.cierre__card em { color: var(--c-acento); background: transparent; padding: 0; }
.cierre__card .boton { margin-top: var(--e-3); }
.cierre__respaldo {
  text-align: center;
  font-size: var(--t-s);
  font-weight: var(--peso-semi);
  color: var(--c-texto-suave);
  margin: var(--e-5) 0 0;
}

/* ── El verbo de la ficha, diferenciado en los encabezados ────────────────────────────────
   Sale del CPT (el slug es el verbo): el plugin lo envuelve, aquí solo se pinta. */
.verbo-inline { color: var(--c-acento); }
.tiempo h2 .verbo-inline, .tiempo h3 .verbo-inline { color: var(--c-acento-suave); } /* sobre el navy de la tarjeta, un punto más claro */

/* enlaces de verbo: mismo coral, subrayado solo al hover */
a.verbo-inline { text-decoration: none; }
a.verbo-inline:hover { text-decoration: underline; color: var(--c-acento); }
.articulo__cuerpo a em, .ficha a em { color: var(--c-acento); background: rgba(253, 80, 56, 0.08); }

/* WPForms dentro de la banda de guía: hereda los tokens, sin tema propio del plugin */
.guia .wpforms-container { margin-block: var(--e-4); }
.guia .wpforms-field input[type='email'] {
  font: inherit;
  width: 100%;
  padding: var(--e-3) var(--e-4);
  border: 1.5px solid var(--c-borde-calido);
  border-radius: var(--r-s);
  background: var(--c-superficie);
}
.guia .wpforms-submit {
  background: var(--c-acento) !important;
  color: var(--c-blanco) !important;
  font-weight: var(--peso-extra) !important;
  border: 0 !important;
  border-radius: var(--r-s) !important;
  padding: var(--e-3) var(--e-5) !important;
  cursor: pointer;
}
.guia .wpforms-field-checkbox label { font-size: var(--t-xs); color: var(--c-texto-suave); }
.guia .wpforms-field-checkbox { border: 0; padding: 0; margin: 0; }
.guia .wpforms-field-checkbox legend, .guia .wpforms-field-checkbox .wpforms-field-label { display: none; }
.guia .wpforms-field-checkbox ul { list-style: none; margin: 0; padding: 0; }
.guia .wpforms-field-label { font-weight: var(--peso-semi); font-size: var(--t-s); }

/* línea de revisión (E-E-A-T) bajo los chips del hero */
.ficha-hero__revision {
  margin: var(--e-4) 0 0;
  font-size: var(--t-xs);
  color: var(--c-texto-suave);
}
.ficha-hero__revision strong { color: var(--c-navy); }

/* ── Hubs (Figma «Plantillas — Hub verbs · Gramática», ajuste Fernando: foto sangrada) ── */
.hub-hero { overflow: hidden; }
.hub-hero__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--e-8);
  align-items: center;
}
.hub-hero__texto { padding-block: var(--e-6) var(--e-7); }
.hub-hero__texto h1 { font-size: var(--t-display); }
.hub-hero__texto p { max-width: 40rem; font-size: var(--t-m); color: var(--c-texto-suave); }
.hub-hero__texto .migas { padding-block: var(--e-4) var(--e-2); }
.hub-hero__foto {
  margin: 0;
  align-self: stretch;
}
.hub-hero__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0 0 var(--r-l) var(--r-l); /* la foto sangra desde el borde del header */
  box-shadow: 0 16px 40px -8px rgba(18, 39, 58, 0.25);
}
@media (max-width: 56rem) {
  .hub-hero__cols { grid-template-columns: 1fr; }
  .hub-hero__foto { max-height: 22rem; overflow: hidden; border-radius: var(--r-l); }
}

.hub-start {
  background: var(--c-banda-tablas);
  border-block: 1px solid var(--c-borde-calido);
  padding-block: var(--e-7);
}
.hub-start h2 { margin-top: 0; border-bottom: 0; }
.hub-start__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--e-5);
}
.hub-start__card {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-m);
  padding: var(--e-5);
  text-decoration: none;
  box-shadow: var(--sombra-m);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.hub-start__card:hover { transform: translateY(-4px); border-color: var(--c-acento); }
.hub-start__verbo { font-weight: var(--peso-extra); font-size: var(--t-xl); color: var(--c-acento); line-height: 1.1; }
.hub-start__verbo--tema { font-size: var(--t-l); }
.hub-start__gloss { color: var(--c-texto-suave); font-size: var(--t-s); }
.hub-start__formas { color: var(--c-navy); font-weight: var(--peso-extra); font-size: var(--t-s); }

.hub-todos { padding-block: var(--e-7); }
.hub-todos__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-bottom: var(--e-5);
}
.hub-todos__cab h2 { margin: 0; border-bottom: 0; }
.hub-filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-5); }
.hub-filtros__pill {
  font: inherit;
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--c-texto-suave);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--e-2) var(--e-4);
  cursor: pointer;
}
.hub-filtros__pill:hover { background: var(--c-crema-oscura); color: var(--c-navy); }
.hub-filtros__pill--activa { background: var(--c-navy); color: var(--c-blanco); font-weight: var(--peso-extra); }
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--e-4);
}
.hub-grid__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-m);
  padding: var(--e-4);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hub-grid__card:hover { transform: translateY(-4px); border-color: var(--c-acento); box-shadow: var(--sombra-m); }
.hub-grid__card--oculta { display: none; }
.hub-grid__nombre { font-weight: var(--peso-extra); font-size: var(--t-base); color: var(--c-navy); }
.hub-grid__gloss { font-size: var(--t-xs); color: var(--c-texto-suave); }
.hub-grid__tipo { font-size: var(--t-muletilla); font-weight: var(--peso-extra); color: var(--c-acento); letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) {
  .hub-grid__card, .hub-start__card { transition: none; }
}

/* ── Navegación móvil (Figma «Móvil — Menú abierto», aprobado 2026-08-10) ─────────────── */

/* La hamburguesa solo existe en móvil; el overlay y la barra fija, igual. */
.cabecera__hamburguesa { display: none; }
.barra-movil { display: none; }

@media (max-width: 1100px) {
  .cabecera__nav { display: none; }
  .cabecera__acciones { display: none; }   /* Log in y CTA viven dentro del menú móvil */
  .cabecera__logo img { height: 40px; }

  /* Botón hamburguesa 48×48: navy sólido, tres líneas blancas. Grande y visible. */
  .cabecera__hamburguesa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--c-navy);
    cursor: pointer;
  }
  .cabecera__hamburguesa span {
    display: block;
    width: 22px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--c-blanco);
  }

  /* Barra fija inferior: el claim siempre a un toque. El body reserva su hueco. */
  body { padding-bottom: 76px; }
  .barra-movil {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--c-blanco);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  }
  .barra-movil__cta {
    display: block;
    width: 100%;
    text-align: center;
    padding-block: 14px;
  }
}

/* El overlay a pantalla completa. `hidden` manda mientras el JS no lo abra. */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--c-crema);
  overflow-y: auto;
}
.menu-movil[hidden] { display: none; }
html.con-menu-movil { overflow: hidden; }   /* la página de detrás no hace scroll */

.menu-movil__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}
.menu-movil__marca {
  margin: 0;
  font-size: var(--t-h5);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}
.menu-movil__cerrar {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-navy);
  color: var(--c-blanco);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.menu-movil nav { flex: 1 1 auto; padding: 8px 20px; }
.menu-movil__lista { list-style: none; margin: 0; padding: 0; }
.menu-movil__lista > li { border-bottom: 1px solid var(--c-borde); }
.menu-movil__lista > li > a,
.menu-movil__toggle {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--c-navy);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.menu-movil__chevron {
  color: var(--c-acento);
  font-weight: var(--peso-extra);
  transition: transform 0.2s ease;
}
.menu-movil__lista > li.es-abierto .menu-movil__chevron { transform: rotate(180deg); }

/* Hijos desplegados: lista sencilla; las píldoras de nicho, en fila. */
.menu-movil .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 16px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
}
.menu-movil .sub-menu[hidden] { display: none; }  /* el display:flex de arriba le ganaba al hidden */
.menu-movil .sub-menu > li { flex: 1 0 100%; }
.menu-movil .sub-menu a {
  font-size: var(--t-lead);
  font-weight: var(--peso-semi);
  color: var(--c-pizarra);
  text-decoration: none;
}
.menu-movil .sub-menu a:hover { color: var(--c-acento); }
.menu-movil .sub-menu .cabecera__descriptor { display: none; }  /* el descriptor es del panel de escritorio */
/* El menú móvil usa el walker por defecto: la clase de píldora es la del panel de WP. */
.menu-movil .sub-menu > .nav-pildora { flex: 0 0 auto; }
.menu-movil .sub-menu > .nav-pildora a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--c-borde);
  border-radius: 999px;
  background: var(--c-blanco);
  font-size: var(--t-muletilla);
  color: var(--c-navy);
}

.menu-movil__pie {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 24px;
}
.menu-movil__pie .boton { text-align: center; padding-block: 14px; }