/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · learn-spanish.css — hub superior /learn-spanish
   Figma «/learn-spanish — Hub Desktop 1440» (nodo 320:2).

   Se carga SOLO en esa página (enqueue condicional en functions.php, como home y pricing).
   Todo por token: aquí no hay ni un color ni un tamaño escrito a mano. Si algo falta en el
   framework, se añade allí, no aquí.

   Prefijo BEM `ls-` (learn-spanish) para no colisionar con `hub-`, que es de /verbs y
   /grammar y tiene otra estructura.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Ancho de lectura ─────────────────────────────────────────────────────────────────
   El Figma coloca los bloques de texto en una columna de 1000 px dentro de un lienzo de
   1440 y las rejillas en una de 1200. Traducido: el texto va más estrecho que el
   contenedor, las tarjetas lo llenan. `--ls-texto` es esa columna. */
.ls {
  --ls-texto: 62rem;
}

.ls-texto {
  max-width: var(--ls-texto);
  margin-inline: auto;
}

/* ── B1 · Hero ────────────────────────────────────────────────────────────────────────
   Banda crema a sangre, sin foto: este hub es un mapa, no una portada de sección. */
.ls-hero {
  background: var(--c-crema-calida);
  border-bottom: 1px solid var(--c-borde-calido);
  padding-bottom: var(--e-8);
}

.ls-hero h1 {
  font-size: var(--t-display);
  margin-bottom: var(--e-5);
}

.ls-hero__lead {
  font-size: var(--t-lead);
  margin-bottom: var(--e-5);
}

/* El diagnóstico: mismo cuerpo, tono apagado. Es contexto, no promesa. */
.ls-hero__nota {
  font-size: var(--t-tarjeta);
  color: var(--c-texto-suave);
  margin-bottom: 0;
}

/* ── B2 · Las cuatro áreas ────────────────────────────────────────────────────────────
   Cuatro tarjetas enlace. Es el elemento que más se escanea de la página. */
.ls-areas {
  padding-block: var(--e-8);
}

.ls-areas h2 {
  margin-top: 0;
}

.ls-areas__intro {
  color: var(--c-texto-suave);
  max-width: var(--ls-texto);
  margin-bottom: var(--e-6);
}

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

.ls-area {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  height: 100%;
  padding: 0 0 var(--e-5);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-m);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.ls-area:hover {
  transform: translateY(-4px);
  border-color: var(--c-acento);
}

/* La foto es la misma que preside el hub de destino, sangrada al borde de la tarjeta: el
   relleno pasa del contenedor a los hijos de texto. Proporción fija para que las cuatro
   tarjetas midan igual, y encuadre alto porque en las cuatro fotos la cara está arriba. */
.ls-area__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.ls-area > :not(.ls-area__foto) { padding-inline: var(--e-5); }
.ls-area__titulo { padding-top: var(--e-4); }

.ls-area__titulo {
  font-size: var(--t-h5);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
  line-height: var(--i-titular);
}

.ls-area__arregla {
  font-size: var(--t-tarjeta);
  color: var(--c-texto-suave);
  /* Empuja el enlace al fondo: las cuatro flechas quedan a la misma altura aunque una
     descripción ocupe una línea más. */
  flex: 1 1 auto;
}

.ls-area__enlace {
  font-size: var(--t-tarjeta);
  font-weight: var(--peso-extra);
  color: var(--c-acento);
}

/* ── B3 · Por dónde va cada área ──────────────────────────────────────────────────────
   Banda cálida para separar del blanco de las tarjetas sin meter una línea más. */
.ls-detalle {
  background: var(--c-banda-tablas);
  border-block: 1px solid var(--c-borde-calido);
  padding-block: var(--e-8);
}

.ls-detalle h3 {
  margin-top: var(--e-6);
}

.ls-detalle h3:first-child {
  margin-top: 0;
}

/* ── B4 · Where to start ──────────────────────────────────────────────────────────────
   Tres perfiles. El visitante se autodiagnostica y solo lee el suyo. */
.ls-rutas {
  padding-block: var(--e-8);
}

.ls-rutas h2 {
  margin-top: 0;
}

.ls-rutas__intro {
  color: var(--c-texto-suave);
  margin-bottom: var(--e-6);
}

.ls-rutas__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-5);
}

.ls-ruta {
  background: var(--c-crema-calida);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-md);
  padding: var(--e-5);
}

.ls-ruta__titulo {
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
  line-height: var(--i-titular);
  margin-bottom: var(--e-3);
}

.ls-ruta__texto {
  font-size: var(--t-tarjeta);
  color: var(--c-texto-suave);
  margin-bottom: 0;
}

/* ── B5 · How long it takes ───────────────────────────────────────────────────────────── */
.ls-tiempo {
  background: var(--c-superficie);
  border-block: 1px solid var(--c-borde);
  padding-block: var(--e-8);
}

.ls-tiempo h2 {
  margin-top: 0;
}

.ls-tiempo__cierre {
  font-size: var(--t-tarjeta);
  color: var(--c-texto-suave);
  margin-bottom: 0;
}

/* El gráfico va al lado del párrafo que describe la forma, no debajo: leerlo y verlo a la
   vez es la mitad del argumento. */
.ls-tiempo__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--e-7);
  align-items: center;
}

.ls-tiempo__grafico {
  margin: 0;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-crema-clara, #fcfaf7);
}

.ls-tiempo__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ── B6 · Conversión ──────────────────────────────────────────────────────────────────
   Banda navy a sangre y centrada. El aro de foco sobre navy ya lo resuelve el framework
   con el selector `.seccion--navy`. */
.ls-cta {
  padding-block: var(--e-8);
  text-align: center;
}

.ls-cta h2 {
  margin-top: 0;
}

.ls-cta__texto {
  max-width: var(--ls-texto);
  margin-inline: auto;
  color: var(--c-texto-navy);
}

.ls-cta__oferta {
  font-weight: var(--peso-extra);
  font-size: var(--t-tarjeta);
  margin-bottom: var(--e-5);
}

/* Sobre navy el botón coral de marca sí tiene contraste de sobra con el fondo. */
.ls-cta .boton {
  padding-block: var(--e-4);
}

.ls-cta__respaldo {
  margin: var(--e-6) 0 0;
  font-size: var(--t-muletilla);
  color: var(--c-texto-navy);
}

/* ── B7 · FAQ ─────────────────────────────────────────────────────────────────────────
   Las tarjetas son las del framework (`.faq__item`); aquí solo el marco del bloque. */
.ls-faq {
  padding-block: var(--e-8);
}

.ls-faq h2 {
  margin-top: 0;
}

/* ── Tablet ───────────────────────────────────────────────────────────────────────────
   Las cuatro áreas pasan a 2×2 antes de que el texto de la tarjeta se estrangule; las
   rutas aguantan tres columnas un poco más porque son cajas de texto corrido. */
@media (max-width: 62rem) {
  .ls-areas__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .ls-rutas__grid {
    grid-template-columns: 1fr;
  }

  /* El gráfico baja debajo del texto: en una columna estrecha, los rótulos del eje y las
     etiquetas de las curvas dejarían de leerse. */
  .ls-tiempo__cols {
    grid-template-columns: 1fr;
    gap: var(--e-5);
  }
}

/* ── Móvil ────────────────────────────────────────────────────────────────────────────
   Una columna y bloques más cortos. Nada se sale a 390 px: las rejillas son `minmax(0,
   1fr)`, así que ningún hijo puede empujar el ancho. */
@media (max-width: 40rem) {
  .ls-hero,
  .ls-areas,
  .ls-detalle,
  .ls-rutas,
  .ls-tiempo,
  .ls-cta,
  .ls-faq {
    padding-block: var(--e-7);
  }

  .ls-hero {
    padding-top: 0;
  }

  .ls-areas__grid {
    grid-template-columns: 1fr;
  }

  /* En móvil el CTA ocupa el ancho: es el único botón del bloque y ya no compite con nada. */
  .ls-cta .boton {
    display: flex;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-area {
    transition: none;
  }
}