/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · spanish-tutor.css — hoja de la página /spanish-tutor
   Maqueta el Figma `/spanish-tutor — Desktop 1440` (91:40) y la lámina «Notas — revisión de
   Fernando 12-ago» (330:2).

   Mismas reglas que home.css y pricing.css: cero colores y cero tamaños a mano —todo por
   token de framework.css—, BEM, y las cotas del diseño en px porque los bloques están
   medidos contra el Figma.

   Las animaciones viven en el bloque final: se activan con la clase `con-animaciones`, que
   pone animaciones.js, y quedan desactivadas con `prefers-reduced-motion`.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.tutor {
  --tu-ancho: 1440px;
  --tu-lateral: 72px;
}

.tutor .t1__inner,
.tutor .t2__inner,
.tutor .t3__inner,
.tutor .t4__inner,
.tutor .t5__inner,
.tutor .t6__inner,
.tutor .t7__inner,
.tutor .t8__inner,
.tutor .t9__inner,
.tutor .t10__inner {
  max-width: var(--tu-ancho);
  margin-inline: auto;
  padding-inline: var(--tu-lateral);
}

/* Rótulo de sección: mismo tratamiento en toda la página. */
.tutor .t1__etiqueta,
.tutor .t3__etiqueta,
.tutor .t8__etiqueta {
  margin: 0;
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Los CTA de esta página llegan a 48 px de alto, por encima del mínimo del framework. */
.tutor .boton {
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
}

/* ── T1 · Hero ───────────────────────────────────────────────────────────────────────── */

.t1 { background: var(--c-crema-calida); }

.t1__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: var(--e-8);
  align-items: center;
  padding-block: 64px 72px;
}

.t1__etiqueta { color: var(--c-acento); }

.t1__titular {
  margin: var(--e-3) 0 var(--e-5);
  max-width: 42rem;
  font-size: var(--t-h1);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.t1__entrada {
  margin: 0 0 var(--e-4);
  max-width: 40rem;
  font-size: var(--t-lead);
  color: var(--c-navy);
}

.t1__gancho {
  margin: 0 0 var(--e-5);
  max-width: 40rem;
  font-size: var(--t-cuerpo);
  color: var(--c-pizarra);
}

.t1__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-5);
  margin-bottom: var(--e-5);
}

/* Navegación, no CTA: se trata como enlace aunque esté al lado del botón. */
.t1__enlace {
  font-size: var(--t-tarjeta);
  font-weight: 700;
  color: var(--c-acento);
}

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

/* El hueco del vídeo: proporción fija para que el bloque no salte cuando llegue el fichero
   real, y el mismo radio y sombra que las tarjetas grandes del sitio. */
.t1__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-navy);
  box-shadow: 0 18px 42px -10px rgba(18, 39, 58, 0.35);
}

.t1__video {
  display: block;
  width: 100%;
  height: 100%;
  /* `contain` y no `cover`: la pieza lleva su propio margen de seguridad y recortarla se
     come la corrección en pantalla, que es lo único que hay que leer. */
  object-fit: contain;
  background: var(--c-navy);
}

.t1__marcador {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-6);
  text-align: center;
}

.t1__marcador-titulo {
  margin: 0;
  font-size: var(--t-h5);
  font-weight: var(--peso-extra);
  color: var(--c-blanco);
}

.t1__marcador-nota {
  margin: 0;
  font-size: var(--t-tarjeta);
  color: var(--c-texto-navy);
}

.t1__directo {
  position: absolute;
  top: 20px;
  left: 20px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--c-navy-90);
  color: var(--c-blanco);
  font-size: var(--t-muletilla);
  font-weight: 700;
}

.t1__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-acento-suave);
}

.t1__pie {
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: var(--t-muletilla);
  color: var(--c-texto-navy);
}

/* ── T2 · Reconocimiento ─────────────────────────────────────────────────────────────── */

.t2 { background: var(--c-blanco); }
.t2__inner { padding-block: 72px; }

.t2__titular,
.t4__titular,
.t5__titular,
.t6__titular,
.t9__titular {
  margin: 0 0 var(--e-5);
  max-width: 56rem;
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.t2__texto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-7);
  margin-bottom: var(--e-7);
}

.t2__texto p { margin: 0; color: var(--c-pizarra); }
.t2__texto p:first-child { font-size: var(--t-lead); color: var(--c-navy); }

.t2__diagrama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--e-5);
  align-items: center;
}

.t2__lado {
  border-radius: var(--r-lg);
  padding: 26px;
  height: 100%;
}

/* El lado apagado es el que el visitante ya conoce: se lee sin brillo, en crema hundido. */
.t2__lado--apagado {
  background: var(--c-superficie-hundida);
  border: 1px solid var(--c-borde-calido);
}

/* El encendido es el argumento: navy, que es donde el coral separa de verdad. */
.t2__lado--encendido {
  background: var(--c-navy);
  color: var(--c-blanco);
}

.t2__icono {
  margin: 0 0 var(--e-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  font-size: var(--t-h5);
  line-height: 1;
}

.t2__lado--apagado .t2__icono { background: var(--c-blanco); color: var(--c-pizarra); }
.t2__lado--encendido .t2__icono { background: var(--c-acento); color: var(--c-blanco); }

.t2__lado-titulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-h5);
  font-weight: var(--peso-extra);
}

.t2__lado--apagado .t2__lado-titulo { color: var(--c-navy); }
.t2__lado--encendido .t2__lado-titulo { color: var(--c-blanco); }

.t2__lado-texto { margin: 0 0 var(--e-4); font-size: var(--t-tarjeta); }
.t2__lado--apagado .t2__lado-texto { color: var(--c-pizarra); }
.t2__lado--encendido .t2__lado-texto { color: var(--c-texto-navy); }

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

.t2__muestra li {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  font-size: var(--t-muletilla);
  color: var(--c-pizarra);
}

.t2__flecha {
  margin: 0;
  font-size: var(--t-h3);
  color: var(--c-acento);
}

.t2__correccion {
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--r-md);
  padding: var(--e-4);
}

.t2__frase {
  margin: 0 0 var(--e-2);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-extra);
  color: var(--c-acento-suave);
}

.t2__explicacion { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }
.t2__explicacion span { color: var(--c-blanco); font-weight: var(--peso-semi); }

/* ── T3 · Solución (banda navy) ──────────────────────────────────────────────────────── */

.t3 { background: var(--c-navy); color: var(--c-blanco); }
.t3__inner { padding-block: 80px; }

.t3__etiqueta { color: var(--c-ambar-suave); }

.t3__titular {
  margin: var(--e-3) 0 var(--e-4);
  max-width: 52rem;
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-blanco);
}

.t3__lead {
  margin: 0 0 var(--e-7);
  max-width: 52rem;
  font-size: var(--t-lead);
  color: var(--c-texto-navy);
}

.t3__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.t3__card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--c-navy-borde);
  border-radius: var(--r-lg);
  padding: 26px;
}

.t3__icono {
  margin: 0 0 var(--e-4);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-acento);
  color: var(--c-blanco);
  font-size: var(--t-h5);
  line-height: 1;
}

.t3__card-titulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-h5);
  font-weight: var(--peso-extra);
  color: var(--c-blanco);
}

.t3__card-texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-texto-navy); }

/* ── T4 · Getting started (raíl conectado) ───────────────────────────────────────────── */

.t4 { background: var(--c-crema); }
.t4__inner { padding-block: 72px; }

.t4__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.t4__paso { position: relative; }

.t4__rail {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.t4__hito {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-acento);
  color: var(--c-blanco);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-extra);
}

.t4__tramo {
  flex: 1 1 auto;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--c-borde);
  overflow: hidden;
}

/* El relleno del tramo nace completo: sin JS el recorrido se ve entero, que es el estado
   correcto de la información. La animación solo lo recorta y lo vuelve a llenar. */
.t4__relleno {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-acento);
}

.t4__paso-titulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-h5);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.t4__paso-texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

/* ── T5 · Beneficios ─────────────────────────────────────────────────────────────────── */

.t5 { background: var(--c-blanco); }
.t5__inner { padding-block: 72px; }

.t5__lista { margin: 0; display: flex; flex-direction: column; gap: 14px; }

.t5__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'icono nombre sello'
    'icono texto  sello';
  align-items: center;
  gap: var(--e-1) var(--e-5);
  background: var(--c-crema);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  padding: 22px 26px;
}

/* La primera fila es la que de verdad se compra: navy y sello. */
.t5__fila--principal {
  background: var(--c-navy);
  border-color: var(--c-navy);
  padding: 28px;
}

.t5__icono {
  grid-area: icono;
  margin: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-superficie-hundida);
  color: var(--c-navy);
  font-size: var(--t-h5);
  line-height: 1;
}

.t5__fila--principal .t5__icono { background: var(--c-acento); color: var(--c-blanco); }

.t5__nombre {
  grid-area: nombre;
  font-size: var(--t-h5);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.t5__texto {
  grid-area: texto;
  margin: 0;
  font-size: var(--t-tarjeta);
  color: var(--c-pizarra);
}

.t5__fila--principal .t5__nombre { color: var(--c-blanco); }
.t5__fila--principal .t5__texto { color: var(--c-texto-navy); }

.t5__sello {
  grid-area: sello;
  margin: 0;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--c-ambar-suave);
  color: var(--c-navy);
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ── T6 · Near me ────────────────────────────────────────────────────────────────────── */

.t6 { background: var(--c-superficie-hundida); }
.t6__inner { padding-block: 72px; }

.t6__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 48px;
  align-items: start;
}

.t6__texto p { margin: 0 0 var(--e-4); color: var(--c-pizarra); }
.t6__texto p:first-child { font-size: var(--t-lead); color: var(--c-navy); }
.t6__texto p:last-child { margin-bottom: 0; }

.t6__comparativa {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-lg);
  padding: 24px;
}

.t6__comparativa-titulo {
  margin: 0 0 var(--e-4);
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-pizarra);
}

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

.t6__opcion {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  border-radius: var(--r-md);
  padding: 16px;
}

.t6__opcion--peor { background: var(--c-crema); border: 1px solid var(--c-borde); }
.t6__opcion--mejor { background: var(--c-ok-fondo); border: 1px solid var(--c-ok); }

.t6__marca {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: var(--t-muletilla);
  font-weight: 700;
}

.t6__opcion--peor .t6__marca { background: var(--c-error-fondo); color: var(--c-error); }
.t6__opcion--mejor .t6__marca { background: var(--c-ok); color: var(--c-blanco); }

.t6__opcion-copy { display: flex; flex-direction: column; gap: 2px; }
.t6__opcion-copy strong { font-size: var(--t-tarjeta); color: var(--c-navy); }
.t6__opcion-copy span { font-size: var(--t-muletilla); color: var(--c-pizarra); }

/* ── T7 · Precio ─────────────────────────────────────────────────────────────────────── */

.t7 { background: var(--c-crema); }

.t7__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 32px;
  align-items: stretch;
  padding-block: 64px;
}

.t7__card {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-xl);
  padding: 44px;
}

.t7__titular {
  margin: 0 0 var(--e-4);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

/* El precio se informa: cuerpo normal, sin tamaño de titular (guía editorial §5). */
.t7__texto { margin: 0 0 var(--e-5); max-width: 44rem; font-size: var(--t-cuerpo); color: var(--c-pizarra); }

/* Único elemento saturado del bloque. */
.t7__badge {
  display: inline-block;
  margin: 0 0 var(--e-5);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--c-acento);
  color: var(--c-blanco);
  font-size: var(--t-tarjeta);
  font-weight: 700;
}

.t7__enlace { margin: 0; font-size: var(--t-tarjeta); }
.t7__enlace a { font-weight: 700; }

.t7__media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-navy);
  min-height: 300px;
}

.t7__media img { width: 100%; height: 100%; object-fit: cover; }

.t7__marcador,
.t10__marcador {
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-6);
  text-align: center;
}

.t7__marcador-titulo,
.t10__marcador-titulo {
  margin: 0;
  font-size: var(--t-tarjeta);
  font-weight: var(--peso-extra);
  color: var(--c-blanco);
}

.t7__marcador-nota,
.t10__marcador-nota { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }

/* ── T8 · Prueba social (banda navy) ─────────────────────────────────────────────────── */

.t8 { background: var(--c-navy); color: var(--c-blanco); }
.t8__inner { padding-block: 72px; }

.t8__etiqueta { color: var(--c-ambar-suave); }

.t8__titular {
  margin: var(--e-3) 0 var(--e-6);
  max-width: 56rem;
  font-size: var(--t-h3);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-blanco);
}

.t8__cifras {
  list-style: none;
  margin: 0 0 var(--e-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.t8__cifra {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--c-navy-borde);
  border-radius: var(--r-lg);
  padding: 24px;
}

.t8__dato {
  margin: 0 0 var(--e-2);
  font-size: var(--t-precio);
  font-weight: var(--peso-extra);
  color: var(--c-blanco);
}

.t8__pie { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }

/* La atribución no es letra pequeña escondida: es parte del argumento. */
.t8__atribucion { margin: 0 0 var(--e-6); font-size: var(--t-muletilla); color: var(--c-ambar-suave); }

.t8__nuevos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  background: var(--c-blanco);
  border-radius: var(--r-lg);
  padding: 24px 26px;
}

.t8__nuevos-titulo { margin: 0 0 var(--e-1); font-size: var(--t-h5); font-weight: var(--peso-extra); color: var(--c-navy); }
.t8__nuevos-texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

.t8__sello {
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--c-superficie-hundida);
  color: var(--c-navy);
  font-size: var(--t-muletilla);
  font-weight: 700;
  white-space: nowrap;
}

/* Testimonios: maquetados y ocultos. `hidden` en el HTML manda; esto es su forma futura. */
.t8__testimonios { margin-top: var(--e-6); }
.t8__testimonios[hidden] { display: none; }
.t8__testimonios-nota { margin: 0 0 var(--e-4); font-size: var(--t-muletilla); color: var(--c-texto-navy); }

.t8__grid-testimonios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.t8__testimonio {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-lg);
  padding: 24px;
}

.t8__cita { margin: 0 0 var(--e-4); font-size: var(--t-tarjeta); color: var(--c-blanco); }
.t8__autor { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }

/* ── T9 · FAQ ────────────────────────────────────────────────────────────────────────── */

.t9 { background: var(--c-crema); }
.t9__inner { padding-block: 72px; max-width: 1000px; }

/* ── T10 · Cierre ────────────────────────────────────────────────────────────────────── */

.t10 { background: var(--c-navy); color: var(--c-blanco); }

.t10__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--e-8);
  align-items: center;
  padding-block: 72px;
}

.t10__titular {
  margin: 0 0 var(--e-4);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-blanco);
}

.t10__texto { margin: 0 0 var(--e-5); max-width: 44rem; font-size: var(--t-lead); color: var(--c-texto-navy); }

.t10__reaseguro { margin-top: var(--e-5); }
.t10__reaseguro .chip { background: transparent; border-color: var(--c-navy-borde); color: var(--c-blanco); }

.t10__media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-navy-suave);
  min-height: 320px;
  /* El fundido hacia el navy por la izquierda que pide el diseño, sin borde visible. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32%);
  mask-image: linear-gradient(to right, transparent, #000 32%);
}

.t10__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── Tablet ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .tutor { --tu-lateral: var(--e-6); }

  .t1__inner,
  .t7__inner,
  .t10__inner { grid-template-columns: 1fr; gap: var(--e-6); }

  .t1__media { aspect-ratio: 4 / 3; max-height: 420px; }

  .t2__texto { grid-template-columns: 1fr; gap: var(--e-4); }

  /* La flecha del diagrama gira: en columna la lectura ya no es de izquierda a derecha. */
  .t2__diagrama { grid-template-columns: 1fr; }
  .t2__flecha { transform: rotate(90deg); justify-self: center; }

  .t6__cols { grid-template-columns: 1fr; gap: var(--e-6); }
  .t8__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t8__grid-testimonios { grid-template-columns: 1fr; }

  /* El raíl pasa a vertical: el hito manda a la izquierda y el tramo baja. */
  .t4__pasos { grid-template-columns: 1fr; gap: 0; }
  .t4__paso {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--e-2) var(--e-4);
    padding-bottom: var(--e-5);
  }
  .t4__rail { flex-direction: column; align-items: center; grid-row: 1 / span 2; margin-bottom: 0; height: 100%; }
  .t4__tramo { width: 3px; height: auto; flex: 1 1 auto; margin-top: var(--e-2); }
  .t4__paso-titulo { align-self: center; }
}

/* ── Móvil ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .tutor { --tu-lateral: 20px; }

  .t1__inner { padding-block: 32px 40px; }
  .t1__titular { font-size: var(--t-h3); }
  .t1__entrada { font-size: var(--t-cuerpo); }
  .t1__acciones { gap: var(--e-3); }
  .t1__cta { width: 100%; }

  .t2__inner,
  .t4__inner,
  .t5__inner,
  .t6__inner,
  .t9__inner { padding-block: 48px; }

  .t3__inner,
  .t8__inner,
  .t10__inner { padding-block: 48px; }

  .t7__inner { padding-block: 40px; }
  .t7__card { padding: 26px 22px; }

  .t3__grid { grid-template-columns: 1fr; }
  .t8__cifras { grid-template-columns: 1fr; }

  /* La fila de beneficio se apila: el sello baja y deja de competir con el titular. */
  .t5__fila {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'icono nombre'
      'texto texto'
      'sello sello';
    align-items: start;
    padding: 20px;
  }
  .t5__sello { justify-self: start; margin-top: var(--e-2); }

  .t10__cta,
  .t7__badge { width: 100%; text-align: center; }
  .t10__media { min-height: 220px; }
}

/* ── Animaciones ─────────────────────────────────────────────────────────────────────────
   Nada de esto existe hasta que animaciones.js marca `con-animaciones` en el <html>: sin JS
   la página se ve completa y quieta. Y con `prefers-reduced-motion` el JS ni siquiera pone
   la clase, así que estas reglas no llegan a aplicarse.                                    */

.con-animaciones .tutor [data-anim] {
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.con-animaciones .tutor [data-anim='abajo'] { transform: translateY(16px); }
.con-animaciones .tutor [data-anim='izquierda'] { transform: translateX(-28px); }
.con-animaciones .tutor [data-anim='derecha'] { transform: translateX(28px); }

.con-animaciones .tutor [data-anim].es-visible {
  opacity: 1;
  transform: none;
}

/* Raíl: apagado en gris hasta que le toca. El relleno del tramo se recorta a cero y crece
   de izquierda a derecha (en móvil, de arriba abajo). */
.con-animaciones .t4__paso .t4__hito {
  background: var(--c-borde);
  color: var(--c-pizarra);
  transition: background 0.3s ease, color 0.3s ease;
}

.con-animaciones .t4__paso .t4__relleno {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s ease;
}

.con-animaciones .t4__paso.es-encendido .t4__hito {
  background: var(--c-acento);
  color: var(--c-blanco);
}

.con-animaciones .t4__paso.es-encendido .t4__relleno { transform: scaleX(1); }

@media (max-width: 1100px) {
  .con-animaciones .t4__paso .t4__relleno { transform: scaleY(0); transform-origin: center top; }
  .con-animaciones .t4__paso.es-encendido .t4__relleno { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tutor [data-anim],
  .tutor [data-anim].es-visible { opacity: 1; transform: none; transition: none; }
  .t4__paso .t4__hito { background: var(--c-acento); color: var(--c-blanco); }
  .t4__paso .t4__relleno { transform: none; transition: none; }
}