/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · how-it-works.css — hoja de la página /how-it-works
   Maqueta el Figma `/how-it-works — Desktop 1440` (nodo 313:2) y su lámina de notas
   (315:39). Mismas reglas que pricing.css: cero colores y cero tamaños a mano, todo por
   token de framework.css.

   Sin precio destacado en toda la página: si aparece una cifra, va en tamaño de cuerpo.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.how-it-works {
  --hw-ancho: 1440px;       /* bloques anchos: los cinco pasos, entre clases, respaldo */
  --hw-ancho-texto: 1144px; /* columna de lectura del Figma: 1000 px + los dos laterales */
  --hw-lateral: 72px;
}

.how-it-works .hw2__inner,
.how-it-works .hw4__inner,
.how-it-works .hw7__inner {
  max-width: var(--hw-ancho);
  margin-inline: auto;
  padding-inline: var(--hw-lateral);
}

.how-it-works .hw1__inner,
.how-it-works .hw3__inner,
.how-it-works .hw5__inner,
.how-it-works .hw6__inner,
.how-it-works .hw8__inner,
.how-it-works .hw9__inner {
  max-width: var(--hw-ancho-texto);
  margin-inline: auto;
  padding-inline: var(--hw-lateral);
}

/* ── HW1 · Hero ──────────────────────────────────────────────────────────────────────── */

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

.hw1__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
  padding-block: 64px 56px;
}

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

.hw1__entrada { margin: 0; max-width: 68ch; font-size: var(--t-lead); color: var(--c-navy); }
.hw1__remate { margin: 0; max-width: 68ch; font-size: var(--t-cuerpo); font-weight: var(--peso-semi); color: var(--c-pizarra); }
.hw1__cta { margin-top: var(--e-2); border-radius: var(--r-pill); padding: 16px 32px; }

/* ── HW2 · Los cinco pasos · ESCENARIO NAVEGABLE ─────────────────────────────────────────
   ESTADO POR DEFECTO = los cinco pasos apilados en vertical, controles fuera de la vista.
   Es lo que se ve sin JavaScript y lo que se ve con `prefers-reduced-motion`, y no falta
   nada: el contenido de los cinco pasos está entero en el HTML desde el servidor.
   El carrusel solo existe cuando el JS añade `.hw2__escenario--carrusel`. */

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

.hw2__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);
}

/* Los controles no se enseñan hasta que hay JS que los atienda: un botón que no hace nada
   es peor que no tener botón. */
.hw2__hitos,
.hw2__controles { display: none; }

.hw2__carril { display: flex; flex-direction: column; gap: var(--e-5); }

.hw2__paso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  background: var(--c-navy);
  border-radius: var(--r-xl);
  padding: 44px 48px;
  color: var(--c-blanco);
}

/* Variante a dos columnas para cuando exista la pieza visual de cada paso (`.hw2__media`).
   Mientras no exista, el copy ocupa la tarjeta entera y no se rellena con un mockup. */
.hw2__paso:has(.hw2__media) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

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

.hw2__numero {
  margin: 0;
  font-size: var(--t-display);
  line-height: 1;
  font-weight: var(--peso-extra);
  color: var(--c-acento-suave);
}

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

.hw2__paso-titulo a { color: inherit; text-decoration-color: var(--c-acento-suave); }
.hw2__paso-titulo a:hover { color: var(--c-acento-suave); }

.hw2__paso-texto { margin: 0; max-width: 62ch; font-size: var(--t-lead); color: var(--c-texto-navy); }
.hw2__paso-texto a { color: var(--c-acento-suave); }
.hw2__paso-texto a:hover { color: var(--c-blanco); }

.hw2__chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }

.hw2__chip {
  background: var(--c-navy-suave);
  border: 1px solid var(--c-navy-borde);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: var(--t-muletilla);
  font-weight: var(--peso-semi);
  color: var(--c-blanco);
}

/* ── Modo carrusel (lo enciende assets/js/how-it-works.js) ───────────────────────────── */

.hw2__escenario--carrusel .hw2__hitos {
  position: relative;
  display: flex;
  align-items: center;
  /* Repartidos de borde a borde: así el raíl de detrás muere justo bajo el último hito y
     no sobra un tramo de línea sin hito al final. */
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

/* El raíl que une los cinco hitos. Va detrás y solo asoma por los huecos: cada hito lleva
   el color del fondo de la sección, así que la línea no cruza ni los números ni los
   rótulos. Es una línea, no cinco botones sueltos. */
.hw2__escenario--carrusel .hw2__hitos::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 24px;
  right: 24px;
  top: 50%;
  height: 2px;
  background: var(--c-borde-calido);
}

/* Hito: número + rótulo. Caja de 48 px de alto, que es el mínimo de área de toque. */
.hw2__hito {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 10px 16px 10px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-crema);   /* tapa el raíl de detrás; es el fondo de la sección */
  font: inherit;
  font-size: var(--t-muletilla);
  font-weight: var(--peso-semi);
  color: var(--c-pizarra);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hw2__hito-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--c-borde-calido);
  background: var(--c-blanco);
  font-size: var(--t-muletilla);
  font-weight: var(--peso-extra);
  color: var(--c-pizarra);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hw2__hito.es-activo { background: var(--c-navy); color: var(--c-blanco); }
.hw2__hito.es-activo .hw2__hito-n { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-blanco); }
.hw2__hito.es-visto .hw2__hito-n { border-color: var(--c-acento); color: var(--c-acento); }
.hw2__hito:hover { background: var(--c-crema-calida); color: var(--c-navy); }
.hw2__hito.es-activo:hover { background: var(--c-navy); color: var(--c-blanco); }

/* La pista recorta y el carril se desplaza: un paso en pantalla cada vez. */
.hw2__escenario--carrusel .hw2__pista { overflow: hidden; }

.hw2__escenario--carrusel .hw2__carril {
  flex-direction: row;
  gap: 0;
  align-items: stretch;
  transform: translateX(calc(var(--hw-indice, 0) * -100%));
  transition: transform 250ms ease;
}

.hw2__escenario--carrusel .hw2__paso {
  flex: 0 0 100%;
  min-width: 100%;
}

/* El número grande cruza en sentido contrario al deslizamiento (Figma 337:55). */
.hw2__escenario--carrusel .hw2__numero {
  transition: transform 250ms ease, opacity 250ms ease;
}
.hw2__escenario--carrusel .hw2__paso:not(.es-activo) .hw2__numero {
  transform: translateX(24px);
  opacity: 0.35;
}

.hw2__escenario--carrusel .hw2__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-5);
}

.hw2__indicadores { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--e-2); }

.hw2__punto {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--c-borde-calido);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.hw2__punto.es-activo { width: 26px; background: var(--c-acento); }

.hw2__acciones { display: flex; align-items: center; gap: var(--e-3); }

.hw2__flecha {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--c-navy);
  border-radius: 50%;
  background: transparent;
  font-size: var(--t-h5);
  line-height: 1;
  color: var(--c-navy);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

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

.hw2__flecha--principal { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-blanco); }
.hw2__flecha--principal:hover { background: var(--c-acento-hover); border-color: var(--c-acento-hover); color: var(--c-blanco); }

/* En el paso 5 la flecha «siguiente» deja su sitio al CTA (Figma 337:55).
   El `[hidden]` hay que escribirlo: framework.css da `display` a todo lo pulsable y una
   regla de autor le gana al `[hidden]` del navegador, así que sin esto el botón oculto se
   seguiría viendo. */
.hw2__cta { border-radius: var(--r-pill); padding: 14px 28px; }
.hw2__cta[hidden],
.hw2__flecha[hidden] { display: none; }

/* ── HW3 · Dentro de una clase ───────────────────────────────────────────────────────────
   Una columna y ancho de lectura corto: es una narración, no una ficha técnica. */

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

.hw3__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);
}

.hw3__texto { margin: 0 0 var(--e-4); max-width: 65ch; font-size: var(--t-lead); color: var(--c-pizarra); }

.hw3__remate {
  margin: var(--e-5) 0 0;
  max-width: 65ch;
  font-size: var(--t-h5);
  font-weight: var(--peso-semi);
  color: var(--c-navy);
}

/* ── HW4 · Entre clases ──────────────────────────────────────────────────────────────────
   JERARQUÍA OBLIGATORIA: la tarjeta del informe es la clara, la ancha y la que lleva el
   sello; la de IA va en navy y más estrecha. Si se invierten los pesos, el bloque dice lo
   contrario que el texto —que la IA es el producto—, que es la peor sospecha posible en una
   web de clases con profesor. */

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

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

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

.hw4__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: var(--e-5);
  align-items: start;
}

.hw4__informe {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-xl);
  padding: var(--e-6);
  box-shadow: var(--sombra-m);
}

.hw4__sello {
  display: inline-block;
  margin: 0 0 var(--e-4);
  background: var(--c-crema-calida);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-navy);
}

.hw4__informe-titulo { margin: 0 0 var(--e-3); font-size: var(--t-h3); font-weight: var(--peso-extra); color: var(--c-navy); }
.hw4__informe-texto { margin: 0; font-size: var(--t-lead); color: var(--c-pizarra); }

.hw4__ia {
  background: var(--c-navy);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  color: var(--c-blanco);
}

.hw4__ia-titulo { margin: 0 0 var(--e-3); font-size: var(--t-h5); font-weight: var(--peso-extra); color: var(--c-blanco); }
.hw4__ia-texto { margin: 0 0 var(--e-3); font-size: var(--t-tarjeta); color: var(--c-texto-navy); }
.hw4__ia-reparto { margin: 0; font-size: var(--t-tarjeta); font-weight: var(--peso-semi); color: var(--c-blanco); }

/* ── HW5 · Reservar, cambiar y cancelar ──────────────────────────────────────────────── */

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

.hw5__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);
}

.hw5__lista { display: flex; flex-direction: column; gap: var(--e-4); }

.hw5__item {
  background: var(--c-crema-calida);
  border-radius: var(--r-md);
  padding: var(--e-5);
}

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

/* ── HW6 · Lo que necesitas ──────────────────────────────────────────────────────────── */

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

.hw6__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);
}

.hw6__lista-corta {
  margin: 0 0 var(--e-5);
  font-size: var(--t-h4);
  font-weight: var(--peso-extra);
  color: var(--c-acento);
}

.hw6__texto { margin: 0 0 var(--e-4); max-width: 65ch; font-size: var(--t-lead); color: var(--c-pizarra); }
.hw6__texto:last-child { margin-bottom: 0; }

/* ── HW7 · Respaldo ──────────────────────────────────────────────────────────────────── */

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

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

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

/* ── HW8 · FAQ ───────────────────────────────────────────────────────────────────────── */

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

.hw8__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 «What happens if I need to reschedule a Spanish lesson?»: MAQUETADA Y OCULTA.
   Falta la antelación mínima real y la política de no-show — el pendiente BLOQUEANTE de
   esta página. No se publica media respuesta: es la FAQ que genera disputas si se escribe
   mal. PARA ENCENDERLA: escribir la respuesta confirmada en `hw8-faq.php`, dejarla idéntica
   a la del bloque hw5, y borrar esta regla. */
.hw8__item--oculta { display: none; }

/* ── HW9 · Cierre ────────────────────────────────────────────────────────────────────── */

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

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

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

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

@media (max-width: 1100px) {
  .how-it-works { --hw-lateral: var(--e-6); }

  .hw2__paso { padding: 32px; }
  .hw2__paso:has(.hw2__media) { grid-template-columns: 1fr; }

  /* Los cinco rótulos no caben: quedan el número y la línea, y el rótulo se lee dentro del
     paso. El nombre accesible del hito lo sigue dando el texto, que no se borra. */
  .hw2__hito-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hw2__hito { padding: 10px; }

  .hw4__cols { grid-template-columns: 1fr; }
}

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

@media (max-width: 700px) {
  .how-it-works { --hw-lateral: 20px; }

  .hw1__inner { padding-block: 32px 40px; }
  .hw1__titular { font-size: var(--t-h2); max-width: none; }
  .hw1__entrada { font-size: var(--t-cuerpo); }
  .hw1__cta { width: 100%; text-align: center; }

  .hw2__inner,
  .hw3__inner,
  .hw4__inner,
  .hw5__inner,
  .hw6__inner,
  .hw8__inner { padding-block: 40px; }

  .hw2__paso { padding: 24px 20px; border-radius: var(--r-lg); }
  .hw2__paso-titulo { font-size: var(--t-h3); }
  .hw2__paso-texto { font-size: var(--t-cuerpo); }

  /* Los hitos se recorren en horizontal con el dedo si no caben, sin barra a la vista. */
  .hw2__escenario--carrusel .hw2__hitos {
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--hw-lateral) * -1);
    padding-inline: var(--hw-lateral);
  }
  .hw2__escenario--carrusel .hw2__hitos::-webkit-scrollbar { display: none; }
  .hw2__hito { flex: 0 0 auto; }

  .hw2__cta { width: auto; padding: 14px 20px; }

  .hw3__texto,
  .hw6__texto { font-size: var(--t-cuerpo); }

  .hw4__informe { padding: var(--e-5); }
  .hw5__item { padding: var(--e-4); }

  .hw7__inner { padding-block: 32px; }
  .hw9__inner { padding-block: 40px 56px; }
  .hw9__cta { width: 100%; }
}

/* ── Movimiento reducido ─────────────────────────────────────────────────────────────────
   Ni deslizamiento ni avance automático: el JS no llega a encender el carrusel, así que
   los cinco pasos se quedan apilados. Estas reglas son el cinturón por si alguna clase se
   quedara puesta. */
@media (prefers-reduced-motion: reduce) {
  .hw2__escenario--carrusel .hw2__carril,
  .hw2__escenario--carrusel .hw2__numero,
  .hw2__hito,
  .hw2__hito-n,
  .hw2__punto,
  .hw2__flecha { transition: none; }

  .hw2__escenario--carrusel .hw2__paso:not(.es-activo) .hw2__numero { transform: none; opacity: 1; }
}

/* ── Pieza visual del paso (bucle de 15 s producido con HyperFrames) ──────────────────
   Se añade cuando el fichero existe; sin él, `.hw2__paso` sigue a una columna y no queda
   ningún hueco. El vídeo es decorativo: sin controles, mudo y fuera del árbol accesible. */
.hw2__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-navy-suave);
  align-self: center;
}

.hw2__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  /* Con movimiento reducido no se reproduce nada: se ve el póster y punto. */
  .hw2__video { display: none; }
  .hw2__media {
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
  }
}