/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · spanish-teachers.css — hoja de la página /spanish-teachers
   Maqueta el Figma `/spanish-teachers — Desktop 1440` (nodo 309:2) y su lámina de notas
   (312:33). Mismas reglas que pricing.css: cero colores y cero tamaños a mano, todo por
   token de framework.css, y las cotas del diseño en px porque los bloques están medidos
   contra el Figma.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.spanish-teachers {
  --st-ancho: 1440px;      /* ancho de los bloques anchos (hero, fichas, raíl, respaldo) */
  --st-ancho-texto: 1144px; /* columna de lectura del Figma: 1000 px + los dos laterales */
  --st-lateral: 72px;
}

.spanish-teachers .st1__inner,
.spanish-teachers .st4__inner,
.spanish-teachers .st7__inner,
.spanish-teachers .st8__inner {
  max-width: var(--st-ancho);
  margin-inline: auto;
  padding-inline: var(--st-lateral);
}

.spanish-teachers .st2__inner,
.spanish-teachers .st3__inner,
.spanish-teachers .st5__inner,
.spanish-teachers .st6__inner,
.spanish-teachers .st9__inner,
.spanish-teachers .st10__inner {
  max-width: var(--st-ancho-texto);
  margin-inline: auto;
  padding-inline: var(--st-lateral);
}

/* ── ST1 · Hero ───────────────────────────────────────────────────────────────────────
   Dos columnas: el argumento a la izquierda y, a la derecha, la tarjeta de los dos
   requisitos. Cuando llegue la foto real de profesora se inserta antes de la tarjeta
   dentro de `.st1__media` y la tarjeta pasa a flotar sobre ella (ver el bloque de reglas
   comentado al final de esta sección). */

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

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

.st1__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); }

.st1__titular {
  margin: 0;
  max-width: 20ch;
  font-size: var(--t-h1);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.st1__entrada {
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-lead);
  color: var(--c-navy);
}

.st1__remate {
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-cuerpo);
  color: var(--c-pizarra);
}

.st1__cta {
  margin-top: var(--e-2);
  border-radius: var(--r-pill);
  padding: 16px 32px;
}

.st1__chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Tarjeta flotante: los dos requisitos que la página entera defiende. */
.st1__media {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--sombra-m);
}

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

.st1__requisito {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--e-1) var(--e-2);
  background: var(--c-crema-calida);
  border-radius: var(--r-md);
  padding: var(--e-3);
}

.st1__tick {
  grid-row: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-acento);
  color: var(--c-blanco);
  font-size: var(--t-muletilla);
  line-height: 20px;
  text-align: center;
}

.st1__requisito-titulo { grid-column: 2; font-size: var(--t-tarjeta); font-weight: 700; color: var(--c-navy); }
.st1__requisito-texto { grid-column: 2; font-size: var(--t-muletilla); color: var(--c-pizarra); }

/* Con el bucle de la profesora detrás, la tarjeta deja de ser una caja suelta sobre crema y
   pasa a flotar sobre la escena, que es lo que pedía el Figma. El vídeo se recorta con
   `object-fit: cover` a una proporción fija: así el hueco no cambia de alto según lo que
   traiga el fichero y el hero no baila al cargar. */
.st1__media--video {
  position: relative;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: hidden;
}

.st1__video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-lg);
}

/* La tarjeta se apoya en el pie de la escena con un velo por debajo, para que los dos
   requisitos se lean siempre, salga lo que salga en esa zona del vídeo. */
.st1__media--video .st1__requisitos {
  position: absolute;
  inset-inline: var(--e-3);
  bottom: var(--e-3);
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-lg);
  padding: var(--e-3);
  box-shadow: var(--sombra-m);
}

/* Con `prefers-reduced-motion` el bucle se para desde animaciones.js —CSS no puede pausar
   un vídeo— y se queda en su póster. */

/* ── ST2 · Nativo no es profesor ─────────────────────────────────────────────────────── */

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

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

.st2__texto { margin: 0 0 var(--e-4); font-size: var(--t-lead); color: var(--c-pizarra); }

/* El remate es la conclusión del bloque: caja navy, una sola línea de argumento. */
.st2__remate {
  margin: var(--e-5) 0 0;
  background: var(--c-navy);
  color: var(--c-blanco);
  border-radius: var(--r-md);
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-h5);
  font-weight: var(--peso-semi);
}

.st2__remate strong { color: var(--c-acento-suave); font-weight: var(--peso-extra); }

/* ── ST3 · Qué ve un profesor titulado ───────────────────────────────────────────────── */

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

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

.st3__ejemplo {
  background: var(--c-crema-calida);
  border-left: 4px solid var(--c-acento);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--e-5);
}

.st3__ejemplo-texto { margin: 0 0 var(--e-3); font-size: var(--t-cuerpo); color: var(--c-navy); }

/* Norma de la casa: el español en línea va en semibold, nunca en cursiva. Plus Jakarta no
   tiene itálica real y el navegador la sintetiza pegando el término a la palabra siguiente. */
.st3__ejemplo em {
  font-style: normal;
  font-weight: var(--peso-extra);
  color: var(--c-acento);
}
.st3__ejemplo-remate { margin: 0; font-size: var(--t-cuerpo); font-weight: var(--peso-semi); color: var(--c-navy); }

.st3__antelista {
  margin: var(--e-6) 0 var(--e-3);
  font-size: var(--t-cuerpo);
  font-weight: 700;
  color: var(--c-navy);
}

/* Lista descriptiva, no tarjetas con icono: son respuestas a miedos, se leen de corrido. */
.st3__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.st3__item {
  padding: var(--e-4) 0 var(--e-4) var(--e-5);
  border-top: 1px solid var(--c-borde);
  position: relative;
  font-size: var(--t-cuerpo);
  color: var(--c-pizarra);
}

.st3__item:last-child { border-bottom: 1px solid var(--c-borde); }

.st3__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--e-4) + 0.7em);
  width: 14px;
  height: 2px;
  background: var(--c-acento);
}

.st3__item strong { color: var(--c-navy); font-weight: 700; }

/* ── ST4 · Meet the teachers ─────────────────────────────────────────────────────────────
   ¡OJO! BLOQUE MAQUETADO Y OCULTO A PROPÓSITO.
   No hay fichas reales de profesor: ni foto, ni país, ni titulación. La regla de la página
   prohíbe stock, avatares y nombres inventados —una ficha falsa en el bloque de autoridad
   hace más daño que no tener bloque—, así que sale del flujo hasta que llegue el material.
   PARA ENCENDERLO: rellenar la opción `susa_profesores` (forma documentada en
   `template-parts/spanish-teachers/st4-profesores.php`) y BORRAR la línea `display: none`
   de aquí abajo. Es una línea. */
.st4 { display: none; }

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

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

/* Rejilla dinámica: se pinta con las fichas que existan, sin número fijo. Con 5, 6 u 8
   fichas se recoloca sola y activar el bloque no obliga a tocar la maqueta. */
.st4__rejilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e-5);
}

.st4__ficha {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-lg);
  padding: var(--e-4);
  box-shadow: var(--sombra-s);
}

/* Foto vertical y fondo neutro (requisito de la ficha): la caja fija la proporción para
   que ocho fotos distintas no descuadren la rejilla. */
.st4__foto {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-crema-calida);
  aspect-ratio: 4 / 3;
}

.st4__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.st4__nombre { margin: var(--e-2) 0 0; font-size: var(--t-h5); font-weight: var(--peso-extra); color: var(--c-navy); }
.st4__credenciales { margin: 0; font-size: var(--t-tarjeta); font-weight: var(--peso-semi); color: var(--c-acento); }
.st4__extra { margin: 0; font-size: var(--t-muletilla); color: var(--c-pizarra); }
.st4__linea { margin: var(--e-1) 0 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

/* ── ST5 · Tu expediente te sigue ────────────────────────────────────────────────────── */

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

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

.st5__texto { margin: 0 0 var(--e-4); font-size: var(--t-lead); color: var(--c-pizarra); }

/* Reversión de riesgo: va en caja aparte, no perdida al final de un párrafo. */
.st5__nota {
  margin: var(--e-5) 0 0;
  background: var(--c-ok-fondo);
  border-radius: var(--r-md);
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-semi);
  color: var(--c-navy);
}

/* ── ST6 · De dónde son ──────────────────────────────────────────────────────────────────
   Texto plano a propósito: nada de mapas ni mosaico de banderas mientras no haya lista de
   países cerrada. */

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

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

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

/* ── ST7 · Cómo te asignamos profesor ────────────────────────────────────────────────────
   Raíl conectado de cuatro hitos. El tramo entre hitos y el propio hito nacen apagados y
   se encienden al pasar el scroll (clase `es-visto`, la pone spanish-teachers.js).
   Sin JS y con `prefers-reduced-motion` se ven encendidos: el estado final es el que
   comunica, la animación solo es el camino. */

.st7 { background: var(--c-crema-calida); }
.st7__inner { padding-block: 72px; }

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

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

.st7__paso { position: relative; padding-top: 64px; }

/* El tramo que une un hito con el siguiente. Se apoya en el gap de la rejilla. */
.st7__paso:not([data-ultimo])::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 52px;
  right: -20px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--c-borde-calido);
  transition: background-color 0.4s ease;
}

.st7__hito {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-blanco);
  border: 2px solid var(--c-borde-calido);
  color: var(--c-pizarra);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-extra);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.st7__paso.es-visto .st7__hito {
  background: var(--c-acento);
  border-color: var(--c-acento);
  color: var(--c-blanco);
}

.st7__paso.es-visto::after { background: var(--c-acento); }

.st7__paso-titulo { margin: 0 0 var(--e-2); font-size: var(--t-h5); font-weight: var(--peso-extra); color: var(--c-navy); }
.st7__paso-titulo a { color: inherit; text-decoration-color: var(--c-acento); }
.st7__paso-titulo a:hover { color: var(--c-acento); }
.st7__paso-texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

/* Sin JS el raíl se ve entero: la clase la pone el script solo si va a animar. */
.st7__pasos:not(.es-animado) .st7__paso .st7__hito {
  background: var(--c-acento);
  border-color: var(--c-acento);
  color: var(--c-blanco);
}
.st7__pasos:not(.es-animado) .st7__paso::after { background: var(--c-acento); }

@media (prefers-reduced-motion: reduce) {
  .st7__hito,
  .st7__paso::after { transition: none; }
}

/* ── ST8 · Respaldo ──────────────────────────────────────────────────────────────────── */

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

.st8__inner {
  padding-block: 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.st8__titular { margin: 0; font-size: var(--t-h5); font-weight: 700; color: var(--c-blanco); }
.st8__notas { margin: 0; font-size: var(--t-tarjeta); color: var(--c-ambar-suave); }
.st8__notas span { color: var(--c-texto-navy); }
.st8__cierre { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }

/* ── ST9 · FAQ ───────────────────────────────────────────────────────────────────────── */

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

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

/* FAQ «Can I ask for a female Spanish teacher?»: MAQUETADA Y OCULTA.
   La respuesta es un [DATO PENDIENTE] —la política de la escuela sobre peticiones de
   profesora— y aquí no se publica ni una aproximación: la keyword mueve 590/mes y una
   respuesta inventada es exactamente el daño que esta página existe para evitar.
   PARA ENCENDERLA: escribir la respuesta confirmada en `st9-faq.php` y borrar esta regla. */
.st9__item--oculta { display: none; }

/* ── ST10 · Cierre ───────────────────────────────────────────────────────────────────── */

.st10 { background: var(--c-blanco); }

.st10__inner {
  padding-block: 72px 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  text-align: center;
}

.st10__titular { margin: 0; font-size: var(--t-h2); line-height: var(--i-titular); font-weight: var(--peso-extra); color: var(--c-navy); }
.st10__texto { margin: 0; max-width: 44rem; font-size: var(--t-lead); color: var(--c-pizarra); }
.st10__cta { border-radius: var(--r-pill); padding: 18px 36px; }

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

@media (max-width: 1100px) {
  .spanish-teachers { --st-lateral: var(--e-6); }

  .st1__inner { grid-template-columns: 1fr; gap: var(--e-6); }
  .st1__media { max-width: 34rem; }

  /* El raíl pasa a dos columnas: cuatro tarjetas de 285 px no caben y encogerlas rompe la
     línea de lectura. El tramo horizontal desaparece entre filas, así que se apaga. */
  .st7__pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); }
  .st7__paso:not([data-ultimo])::after { display: none; }
}

/* ── Móvil (390) ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .spanish-teachers { --st-lateral: 20px; }

  .st1__inner { padding-block: 32px 40px; }
  .st1__titular { font-size: var(--t-h2); max-width: none; }
  .st1__entrada { font-size: var(--t-cuerpo); }
  .st1__cta { width: 100%; text-align: center; }
  .st1__requisitos { grid-template-columns: 1fr; }
  .st1__media { max-width: none; }

  .st2__inner,
  .st3__inner,
  .st5__inner,
  .st6__inner,
  .st9__inner,
  .st4__inner,
  .st7__inner { padding-block: 40px; }

  .st2__texto,
  .st5__texto,
  .st6__texto { font-size: var(--t-cuerpo); }

  .st3__ejemplo { padding: var(--e-4); }

  /* Un paso por fila y el raíl en vertical: la secuencia se lee bajando, que es como se
     lee en el pulgar. */
  .st7__pasos { grid-template-columns: 1fr; gap: var(--e-5); }
  .st7__paso { padding: 0 0 0 64px; min-height: 44px; }
  .st7__paso:not([data-ultimo])::after {
    display: block;
    top: 52px;
    bottom: calc(var(--e-5) * -1);
    left: 21px;
    right: auto;
    width: 3px;
    height: auto;
  }

  .st8__inner { padding-block: 32px; }
  .st10__inner { padding-block: 40px 56px; }
  .st10__cta { width: 100%; }
}