/*
 * Home — Figma `Home FINAL — Desktop 1440` (nodo 86:174).
 *
 * El diseño está cotado a 1440 px y solo existe en ese breakpoint: aquí se reproduce
 * exacto en 1440 y se degrada por debajo sin inventar composiciones que nadie ha aprobado.
 * Los colores salen de los tokens del tema; los pocos valores que el diseño usa y el
 * sistema no tenía (el crema del hero, el azul de la tarjeta flotante) se declaran aquí
 * como tokens locales de la home, no sueltos por las reglas.
 */

.home {
  --home-ancho: 1440px;
  --home-margen: 72px;
  /* Lo único propio de la portada: la anchura del diseño, su margen y el navy translúcido
     de la tarjeta flotante. El resto de colores y tamaños son del sistema. */
  --home-navy-tarjeta: rgba(18, 39, 58, 0.96);
}

/* ── B1 · Hero ─────────────────────────────────────────────────────────────────── */

/* El hero son DOS COLUMNAS REALES, mitad y mitad: la izquierda con el crema, la derecha
   con la foto. Nada flota encima de nada.

   Antes la foto era una capa absoluta de 940 px anclada al borde derecho y un degradado
   («el velo») la fundía con el crema. Esa construcción tenía dos fallos que solo se veían
   midiendo: el texto invadía la foto en cuanto la ventana bajaba de 1728 (a 1440, el ancho
   del diseño, ya la pisaba 134 px), y el velo —absoluto, `inset: 0`— se pintaba ENCIMA de
   la tarjeta flotante en cuanto esta bajaba al flujo, dejándola reducida a tres aros vacíos.

   Con dos columnas el texto no puede pisar la foto porque no comparten espacio, y no hay
   ninguna capa absoluta que tape nada. El velo se mantiene —es del diseño— pero pasa a
   vivir DENTRO de la columna de la foto, que es como está montado en Figma. */
.hero-home {
  position: relative;
  background: var(--c-crema-calida);
  min-height: 560px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* La foto ocupa su columna entera y sangra hasta el borde de la ventana. */
.hero-home__foto {
  grid-column: 2;
  grid-row: 1;
  min-height: 560px;
  position: relative;
}

/* El velo, igual que en Figma (`Gradient overlay`): una capa sobre la foto que la funde
   con el crema por su izquierda, para que la costura entre las dos columnas no sea un
   canto duro. Las paradas son las del diseño en proporción, no en píxeles: el degradado
   cubría los primeros 70 px de la foto en opaco y remataba a los 260 de sus 940 (7 % y
   28 %), así que se mantiene igual a cualquier ancho.

   La diferencia con la versión que se rompió: aquel velo era un hermano absoluto con
   `inset: 0` sobre TODO el hero, y por eso acabó tapando la tarjeta flotante. Este vive
   dentro de la columna de la foto y no puede salir de ella. Además, al estar la foto
   posicionada y venir antes en el marcado, la tarjeta se pinta siempre por encima. */
.hero-home__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--c-crema-calida) 0,
    var(--c-crema-calida) 7%,
    transparent 28%
  );
}

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

/* El texto se pega al centro (`justify-self: end`) ocupando MEDIO contenedor de la home,
   con el mismo margen de 100 px que usan todas las secciones de abajo (`--home-ancho` +
   100). Así el H1 arranca exactamente donde arranca «WHY IT WORKS», sin usar `100vw` ni
   aritmética con el ancho de la ventana: la alineación sale de la estructura.

   Vuelve el ritmo vertical de 18 px del diseño: al pasar a rejilla se había quedado con la
   calle de 32 px de la columna, que separaba de más los párrafos y estiraba el hero. */
.hero-home__copy {
  grid-column: 1;
  /* Fila explícita: la foto va antes en el marcado (LCP), y sin esto la colocación
     automática mandaría el texto a una segunda fila en vez de ponerlo al lado. */
  grid-row: 1;
  justify-self: end;
  box-sizing: border-box;
  width: min(100%, calc(var(--home-ancho) / 2));
  padding: 74px var(--e-6) 74px 100px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}

/* El H1 es la keyword del negocio y va en el escalón de titular estándar (--t-h1), no en
   display: si los dos bloques pesan igual se leen como dos titulares compitiendo, que es
   justo lo que hay que evitar para que la etiquetación no parezca forzada. */
.hero-home__h1 {
  margin: 0 0 10px;
  font-size: var(--t-h1);
  font-weight: var(--peso-extra);
  letter-spacing: -0.4px;
  line-height: 1.08;
  color: var(--c-navy);
}

/* El gancho baja un escalón (--t-h3) y se queda con el coral de la segunda línea: es el
   subtítulo, se lee como subtítulo, y el color sigue haciendo de reclamo. */
.hero-home__gancho {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: inherit;
  margin-top: 0;
}

/* Los dos titulares van en una línea cada uno, como en el diseño: son el gancho y
   partirlos cambia el ritmo de lectura. */
.hero-home__titular {
  display: block;
  margin: 0;
  font-size: var(--t-h3);
  font-weight: var(--peso-extra);
  letter-spacing: -0.2px;
  color: var(--c-navy);
  white-space: nowrap;
}

/* Sobre el crema cálido del hero, el coral de marca da 2,84:1 y no llega ni al 3:1 de
   texto grande. Aquí manda el coral de texto, que sube a 4,22:1 sin cambiar el tono. */
.hero-home__titular--acento { color: var(--c-acento); }

.hero-home__entrada {
  margin: 0;
  font-size: var(--t-cuerpo);
  color: var(--c-navy);
}

.hero-home__ctas {
  display: flex;
  gap: 14px;
  padding-top: 6px;
  flex-wrap: wrap;
}

.hero-home__ctas .boton {
  padding: 14px 24px;
  font-size: var(--t-tarjeta);
  font-weight: 700;
  border-radius: var(--r-sm);
}

.boton--secundario {
  background: var(--c-blanco);
  color: var(--c-navy);
  border: 1px solid var(--c-borde-calido);
}

.hero-home__garantias {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: var(--t-muletilla);
  font-weight: 500;
  color: var(--c-pizarra);
}

/* El «◦» del diseño es decorativo: se pinta con CSS para que no lo lea el lector. */
.hero-home__garantias span::before {
  content: "◦";
  margin-right: 6px;
}

/* Anclada al borde derecho del contenedor centrado, igual que el texto lo está al
   izquierdo: `max()` la deja en su sitio del diseño en pantallas estrechas y la acompaña
   hacia dentro en las anchas, en vez de irse a la esquina de la ventana. Vive siempre
   dentro de la columna de la foto, así que ya no necesita bajar al flujo por debajo de
   1440 — que es justo lo que la dejaba tapada por el velo. */
.hero-home__tarjeta {
  position: absolute;
  top: 96px;
  right: max(100px, calc(50% - var(--home-ancho) / 2 + 100px));
  width: 268px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--home-navy-tarjeta);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-home__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Cada píldora tiene su color de marca y un destello que la recorre en bucle, uno detrás
   de otro. No es un estado de interacción: la tarjeta está sobre la foto y sin un poco de
   vida se lee como una etiqueta pegada. Muy suave a propósito — 7 s de ciclo y el brillo
   solo sube el aro y el halo, nunca mueve la caja (nada que empuje el layout). */
.hero-home__icono {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1.2px solid var(--c-navy-borde);
  border-radius: var(--r-pill);
  color: var(--c-blanco);
  font-size: var(--t-tarjeta);
  animation: hero-destello 7s ease-in-out infinite;
}

.hero-home__item:nth-child(1) .hero-home__icono { --home-pildora: var(--c-azul); animation-delay: 0s; }
.hero-home__item:nth-child(2) .hero-home__icono { --home-pildora: var(--c-ambar-suave); animation-delay: 2.3s; }
.hero-home__item:nth-child(3) .hero-home__icono { --home-pildora: var(--c-coral); animation-delay: 4.6s; }

@keyframes hero-destello {
  0%,
  72%,
  100% {
    border-color: var(--c-navy-borde);
    color: var(--c-blanco);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  86% {
    border-color: var(--home-pildora);
    color: var(--home-pildora);
    box-shadow: 0 0 14px 2px color-mix(in srgb, var(--home-pildora) 45%, transparent);
  }
}

/* Movimiento reducido: se queda el color de marca fijo, sin latido. */
@media (prefers-reduced-motion: reduce) {
  .hero-home__icono {
    animation: none;
    border-color: var(--home-pildora);
    color: var(--home-pildora);
  }
}

.hero-home__item-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hero-home__item-copy strong {
  font-size: var(--t-tarjeta);
  font-weight: 700;
  color: var(--c-blanco);
}

.hero-home__item-copy span {
  font-size: var(--t-muletilla);
  color: var(--c-texto-navy);
}

/* El diseño se cotó a 1440. Por debajo de ese ancho la tarjeta flotante dejaría de caber
   sobre la foto, así que baja al flujo; y por debajo de 1100 el hero pasa a una columna
   con la foto como banda superior. No hay maqueta de móvil aprobada: se degrada, no se
   rediseña. */
@media (max-width: 1100px) {
  .hero-home {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .hero-home__titular { white-space: normal; }
  .hero-home__foto {
    width: 100%;
    height: 320px;
    min-height: 0;
    order: -1;
  }
  .hero-home__copy {
    width: 100%;
    padding: 40px var(--e-5);
  }

  /* Aquí sí baja al flujo, y ahora es seguro: la foto ya no es una capa absoluta y el
     velo vive dentro de ella, así que no hay nada que pueda taparla. */
  .hero-home__tarjeta {
    position: static;
    width: min(268px, 100%);
    margin: 0 var(--e-5) 40px;
  }
}

/* ── B2 · Beneficios editorial con cambio de foto ──────────────────────────────── */

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

.b2__inner {
  max-width: var(--home-ancho);
  margin-inline: auto;
  padding: 96px 100px;
  display: flex;
  align-items: center;
  gap: 80px;
}

.b2__texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: flex-start;
}

.b2__antetitulo {
  margin: 0;
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--c-acento);
}

.b2__titular {
  margin: 0;
  max-width: 560px;
  font-size: var(--t-display);
  font-weight: var(--peso-extra);
  line-height: 1.1;
  color: var(--c-navy);
}

.b2__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* La línea va arriba de cada fila, como en el diseño, y no debajo de la última.
   `justify-content` va explícito porque el ítem lleva role="button" para el teclado y
   la regla global de área de toque (framework.css) centra todo lo que tenga ese rol:
   sin esto, la fila cuyo texto no llena el ancho —la 03— se centraba y quedaba 6 px
   desplazada respecto a las otras tres. */
.b2__item {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 22px 0;
  border-top: 1px solid var(--c-borde);
  cursor: pointer;
  /* Ahora es un <button> nativo: hay que devolverle el aspecto de fila de lista. */
  width: 100%;
  text-align: left;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  font: inherit;
  color: inherit;
}
.b2__lista li { list-style: none; }

.b2__item:focus-visible {
  outline: 2px solid var(--c-coral);
  outline-offset: 4px;
}

.b2__numero {
  flex: 0 0 44px;
  width: 44px;
  font-size: var(--t-lead);
  font-weight: var(--peso-extra);
  color: rgba(18, 39, 58, 0.65);   /* 0,35 daba 2,10 sobre crema; 0,65 llega a 4,81 */
  transition: color 200ms ease;
}

.b2__item-texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Ocupa siempre el hueco que queda tras el número: así las cuatro filas empiezan en
     la misma columna aunque su texto sea más corto. */
  flex: 1 1 auto;
  min-width: 0;
}

.b2__item-texto strong {
  font-size: var(--t-h5);
  font-weight: 700;
  color: var(--c-navy);
  transition: color 200ms ease;
}

.b2__item-texto span {
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--c-pizarra);
}

.b2__item.es-activo .b2__numero,
.b2__item.es-activo .b2__item-texto strong { color: var(--c-acento); }

.b2__foto {
  position: relative;
  flex: 0 0 520px;
  width: 520px;
  height: 600px;
}

.b2__marco {
  position: relative;
  width: 520px;
  height: 600px;
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* Las cuatro fotos apiladas: solo cambia la opacidad, así el cambio no parpadea ni
   dispara una petición al pasar el ratón. */
.b2__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 200ms ease;
}

.b2__imagen.es-activa { opacity: 1; }

.b2__dato {
  position: absolute;
  left: -48px;
  top: 449px;
  display: grid;
  background: var(--c-blanco);
  border-radius: var(--r-md);
  padding: 20px 24px;
  box-shadow: 0 12px 36px rgba(18, 38, 59, 0.18);
}

/* Las cuatro fichas de dato comparten celda de rejilla: la caja mide lo que la más alta
   y no da un salto al cambiar de beneficio. Solo cambia la opacidad, igual que la foto. */
.b2__dato-ficha {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 200ms ease;
}

.b2__dato-ficha.es-activa { opacity: 1; }

.b2__dato-cifra {
  margin: 0 0 4px;
  font-size: var(--t-h3);
  font-weight: var(--peso-extra);
  color: var(--c-coral);
  white-space: nowrap;
}

.b2__dato-pie {
  margin: 0;
  width: 220px;
  font-size: var(--t-muletilla);
  color: var(--c-pizarra);
}

@media (max-width: 1200px) {
  .b2__inner { padding: 72px var(--e-6); gap: 48px; }
}

/* Sin hover no hay estados: se queda la foto 01 y la lista deja de ser interactiva. */
@media (max-width: 900px) {
  .b2__inner { flex-direction: column; align-items: stretch; }
  .b2__foto { width: 100%; flex: none; height: auto; }
  .b2__marco { width: 100%; height: min(600px, 90vw); }
  .b2__dato { position: static; margin-top: var(--e-5); }
  .b2__item { cursor: default; }
}

/* ── B3 · Pasos timeline ───────────────────────────────────────────────────────── */

.b3 { background: var(--c-navy); }

.b3__inner {
  max-width: var(--home-ancho);
  margin-inline: auto;
  padding: 96px 100px;
  display: flex;
  align-items: flex-start;
  gap: 96px;
}

.b3__col-foto {
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.b3__marco {
  width: 420px;
  height: 540px;
  border-radius: var(--r-xl);
  overflow: hidden;
}

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

.b3__nota {
  margin: 0;
  width: 380px;
  max-width: 100%;
  font-family: var(--f-manuscrita);
  font-weight: 700;   /* la Caveat del sitio se sirve en un solo peso: ver el @font-face */
  font-size: var(--t-nota);
  color: var(--c-amber, var(--c-ambar));
}

.b3__col-pasos {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: flex-start;
}

.b3__antetitulo {
  margin: 0;
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--c-ambar);
}

.b3__titular {
  margin: 0;
  max-width: 520px;
  font-size: var(--t-h2);
  font-weight: var(--peso-extra);
  line-height: 1.15;
  color: var(--c-blanco);
}

.b3__timeline { list-style: none; margin: 0; padding: 0; width: 100%; }

.b3__paso { display: flex; gap: 24px; align-items: stretch; }

/* Recorrido automático de los pasos: al entrar la sección en pantalla se enciende el 1,
   pasa al 2 y así hasta el 5, y se detiene. Es lectura guiada, no un carrusel infinito:
   una vez recorrido queda todo encendido para poder leerlo de un vistazo. El realce es
   una veladura del propio navy y el número, nada que mueva la caja.
   Mientras el recorrido no ha empezado (o si no hay JS) los pasos se ven al 100 %: el
   contenido nunca depende de la animación. */
.b3__timeline--recorrido .b3__paso {
  border-radius: var(--r-md);
  transition: background-color 420ms ease, opacity 420ms ease;
}

/* 0,8 y no 0,45: al 0,45 el texto de los pasos que aún no tocan se quedaba en 2,93 sobre
   el navy, el verde en 2,36 y el rojo en 1,81 — por debajo del 4,5 que pide la norma para
   texto pequeño, y era lo único que seguía suspendiendo la accesibilidad. Al 0,8 pasan los
   tres (6,14 · 4,51 · 4,71) y el paso activo se sigue distinguiendo igual: lo marcan su
   veladura de fondo y el número ampliado, no el apagado de los demás.

   Y el atenuado se aplica al TEXTO, no al paso entero: el círculo del número lleva letra
   navy sobre coral, y al apagar el conjunto los dos colores se acercaban al fondo a la vez
   y el número se quedaba en 2,86 sobre su propio círculo. Dejándolo fuera del apagado se
   mantiene en 4,63. */
.b3__timeline--recorrido .b3__paso:not(.es-activo):not(.es-visto) .b3__texto { opacity: 0.8; }

.b3__timeline--recorrido .b3__paso.es-activo {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.b3__timeline--recorrido .b3__num { transition: transform 420ms ease, box-shadow 420ms ease; }

.b3__timeline--recorrido .b3__paso.es-activo .b3__num {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(253, 80, 56, 0.18);
}

/* El realce vive dentro del padding del texto: sin esto la veladura se pega al borde de
   las letras. Se compensa en el raíl para que la línea no se descoloque. */
.b3__timeline--recorrido .b3__texto { padding-inline: 16px; }
.b3__timeline--recorrido .b3__rail { margin-left: 12px; }

@media (prefers-reduced-motion: reduce) {
  .b3__timeline--recorrido .b3__paso:not(.es-activo):not(.es-visto) { opacity: 1; }
  .b3__timeline--recorrido .b3__paso.es-activo .b3__num { transform: none; }
}

/* El raíl es la línea vertical entre números: se dibuja como borde del propio raíl para
   que crezca con el texto y desaparezca en el último paso. */
.b3__rail {
  flex: 0 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.b3__num {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--c-coral);
  color: var(--c-navy);   /* navy sobre el coral de marca: 4,63. En blanco se quedaba en 3,29 */
  font-size: var(--t-lead);
  font-weight: var(--peso-extra);
}

.b3__paso:not(.b3__paso--ultimo) .b3__rail::after {
  content: "";
  flex: 1 0 auto;
  width: 2px;
  background: var(--c-navy-linea);
}

.b3__texto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0 30px;
}

.b3__paso--ultimo .b3__texto { padding-bottom: 0; }

.b3__texto strong { font-size: var(--t-h5); font-weight: 700; color: var(--c-blanco); }
.b3__desc { font-size: var(--t-cuerpo); line-height: 1.5; color: var(--c-texto-navy); }
.b3__pie { font-size: var(--t-muletilla); font-weight: 700; }
.b3__pie--ok { color: var(--c-ok-suave); }
.b3__pie--acento { color: var(--c-acento); }   /* dentro de .b3 vale el coral claro: 6,64, y aguanta el atenuado */

@media (max-width: 1100px) {
  .b3__inner { flex-direction: column; padding: 72px var(--e-6); gap: 48px; }
  .b3__col-foto { flex: none; width: 100%; }
  .b3__marco { width: 100%; height: min(540px, 80vw); }
}

/* ── B4 · Humano + IA ──────────────────────────────────────────────────────────── */

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

.b4__inner {
  max-width: var(--home-ancho);
  margin-inline: auto;
  padding: 64px 72px 72px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.b4__foto { flex: 0 0 360px; width: 360px; height: 330px; border-radius: var(--r-md); overflow: hidden; }
.b4__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.b4__copy { flex: 0 0 300px; width: 300px; display: flex; flex-direction: column; gap: 14px; }
.b4__titular { margin: 0; font-size: var(--t-h3); font-weight: var(--peso-extra); color: var(--c-navy); }
.b4__copy p { margin: 0; font-size: var(--t-cuerpo); color: var(--c-pizarra); }
.b4__remate { font-weight: 700; color: var(--c-navy) !important; }

.b4__comparativa { flex: 1 1 0; min-width: 0; display: flex; gap: 16px; align-items: flex-start; }

.b4__tarjeta { flex: 1 1 0; min-width: 0; padding: 20px; border-radius: var(--r-md); }
.b4__tarjeta--profesor { background: var(--c-ambar-fondo); }
.b4__tarjeta--ia { background: var(--c-azul-fondo); }
.b4__tarjeta h3 { margin: 0 0 10px; font-size: var(--t-tarjeta); font-weight: 700; color: var(--c-navy); }
.b4__tarjeta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* El ✓ es decorativo: lo pone el CSS para que el lector de pantalla lea solo la ventaja. */
.b4__tarjeta li {
  position: relative;
  padding-left: 20px;
  font-size: var(--t-tarjeta);
  color: var(--c-navy);
}

.b4__tarjeta li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-size: var(--t-tarjeta);
  font-weight: 700;
}

.b4__tarjeta--profesor li::before { color: var(--c-ambar); }
.b4__tarjeta--ia li::before { color: var(--c-azul-tinta); }

@media (max-width: 1200px) {
  .b4__inner { flex-wrap: wrap; padding: 56px var(--e-6); }
  .b4__comparativa { flex-basis: 100%; }
}

@media (max-width: 700px) {
  .b4__foto, .b4__copy { flex: none; width: 100%; }
  .b4__comparativa { flex-direction: column; }
}

/* ── B4b · Nota manuscrita ─────────────────────────────────────────────────────── */

.b4b {
  background: var(--c-crema);
  padding: 0 120px 56px 72px;
  display: flex;
  justify-content: flex-end;
}

.b4b__nota { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--t-nota); }
.b4b__flecha { color: var(--c-acento); }
.b4b__texto { font-family: var(--f-manuscrita); font-weight: 700; color: var(--c-coral); }

@media (max-width: 900px) {
  .b4b { padding: 0 var(--e-6) 40px; justify-content: flex-start; }
}

/* ── B5 · Nichos ───────────────────────────────────────────────────────────────── */

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

.b5__inner {
  max-width: var(--home-ancho);
  margin-inline: auto;
  padding: 56px 72px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.b5__titular { margin: 0; font-size: var(--t-h3); font-weight: var(--peso-extra); color: var(--c-navy); text-align: center; }

.b5__tarjetas { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; gap: 22px; align-items: stretch; }

.b5__tarjeta {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(26, 38, 51, 0.06);
}

.b5__foto { width: 100%; height: 150px; object-fit: cover; display: block; }

/* El cuerpo crece hasta el fondo de la tarjeta y el párrafo se lleva el hueco sobrante:
   así los cuatro botones quedan a la misma altura aunque el texto tenga una línea menos.
   Sin el `flex: 1` del cuerpo, el `flex: 1` del párrafo no tenía dónde crecer. */
.b5__cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px 18px; }
.b5__cuerpo h3 { margin: 0; font-size: var(--t-cuerpo); font-weight: 700; color: var(--c-navy); }
.b5__cuerpo p { margin: 0; flex: 1 1 auto; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

.boton--linea {
  background: var(--c-blanco);
  color: var(--c-acento);
  border: 1.2px solid var(--c-coral);
  padding: 9px 14px;
  font-size: var(--t-muletilla);
  font-weight: 700;
  border-radius: var(--r-sm);
}

@media (max-width: 1100px) {
  .b5__inner { padding: 48px var(--e-6) 56px; }
  .b5__tarjetas { flex-wrap: wrap; }
  .b5__tarjeta { flex: 1 1 calc(50% - 11px); }
}

@media (max-width: 620px) {
  .b5__tarjeta { flex: 1 1 100%; }
}

/* ── B6 · Precio ───────────────────────────────────────────────────────────────── */

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

.b6__inner {
  max-width: var(--home-ancho);
  margin-inline: auto;
  padding: 64px 72px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.b6__titular { margin: 0; font-size: var(--t-h3); font-weight: var(--peso-extra); color: var(--c-navy); text-align: center; }
.b6__entrada { margin: 0; font-size: var(--t-cuerpo); color: var(--c-pizarra); text-align: center; }

.b6__planes { list-style: none; margin: 0; padding: 28px 0 0; width: 100%; display: flex; gap: 18px; align-items: flex-start; }

.b6__plan {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 20px;
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
}

.b6__plan--destacado { background: var(--c-ambar-fondo); border: 2px solid var(--c-ambar); }

.b6__badge {
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-ambar);
  /* Blanco sobre ámbar da 2,22:1. El navy sobre el mismo ámbar da 6,88:1 y mantiene la
     píldora dorada del diseño. */
  color: var(--c-navy);
  font-size: var(--t-muletilla);
  font-weight: 700;
}

.b6__cadencia { margin: 0; font-size: var(--t-tarjeta); font-weight: 700; color: var(--c-navy); text-align: center; }

.b6__precio { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.b6__importe { font-size: var(--t-precio); font-weight: var(--peso-extra); color: var(--c-navy); }
.b6__periodo { font-size: var(--t-tarjeta); color: var(--c-pizarra); }
.b6__unitario { margin: 0; font-size: var(--t-muletilla); color: var(--c-pizarra); }

.b6__incluye { list-style: none; margin: 0; padding: 6px 0 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }

.b6__incluye li { position: relative; padding-left: 18px; font-size: var(--t-tarjeta); color: var(--c-navy); }
.b6__incluye li::before { content: "✓"; position: absolute; left: 0; font-size: var(--t-muletilla); font-weight: 700; color: var(--c-ok); }

.b6__cta { width: 100%; text-align: center; padding: 12px; font-size: var(--t-tarjeta); font-weight: 700; border-radius: var(--r-sm); }

.b6__letra-pequena { margin: 0; font-size: var(--t-muletilla); color: var(--c-pizarra); text-align: center; }

.b6__ayuda {
  margin-top: 12px;
  width: 100%;
  padding: 22px 28px;
  border-radius: var(--r-md);
  background: var(--c-crema-oscura);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
}

.b6__ayuda-titulo { margin: 0 0 4px; font-size: var(--t-cuerpo); font-weight: 700; color: var(--c-navy); }
.b6__ayuda-texto { margin: 0; font-size: var(--t-cuerpo); color: var(--c-pizarra); }
.b6__ayuda .boton--linea { font-size: var(--t-tarjeta); padding: 11px 18px; white-space: nowrap; }

@media (max-width: 1100px) {
  .b6__inner { padding: 56px var(--e-6); }
  .b6__planes { flex-wrap: wrap; }
  .b6__plan { flex: 1 1 calc(50% - 9px); }
}

@media (max-width: 720px) {
  .b6__plan { flex: 1 1 100%; }
  .b6__ayuda { flex-direction: column; align-items: flex-start; }
}

/* ── B7 · Banda oscura ─────────────────────────────────────────────────────────── */

.b7 { background: var(--c-navy); }

.b7__inner {
  max-width: var(--home-ancho);
  margin-inline: auto;
  padding: 64px 72px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.b7__copy { flex: 0 0 330px; width: 330px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* Sin testimonios el copy dejaría una banda medio vacía: se centra y se ensancha. */
.b7--sin-testimonios .b7__inner { justify-content: center; }
.b7--sin-testimonios .b7__copy { flex-basis: 640px; width: 640px; max-width: 100%; text-align: center; align-items: center; }

.b7__titular { margin: 0; font-size: var(--t-h4); font-weight: var(--peso-extra); color: var(--c-blanco); }
.b7__gancho { margin: 0; font-size: var(--t-tarjeta); font-weight: 700; color: var(--c-ambar-suave); }
.b7__prueba { margin: 0; font-size: var(--t-cuerpo); color: var(--c-texto-navy); }
.b7__copy .boton { padding: 12px 20px; font-size: var(--t-tarjeta); font-weight: 700; border-radius: var(--r-sm); }

.b7__testimonios { list-style: none; margin: 0; padding: 0; flex: 1 1 0; min-width: 0; display: flex; gap: 16px; align-items: flex-start; }

.b7__testimonio {
  flex: 1 1 0;
  min-width: 0;
  padding: 20px 18px;
  border-radius: var(--r-md);
  background: var(--c-blanco);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.b7__estrellas { margin: 0; font-size: var(--t-muletilla); color: var(--c-ambar); }
.b7__testimonio blockquote { margin: 0; font-size: var(--t-tarjeta); color: var(--c-navy); }
.b7__autor { margin: 0; font-size: var(--t-muletilla); font-weight: 700; color: var(--c-navy); }

@media (max-width: 1100px) {
  .b7__inner { flex-direction: column; padding: 56px var(--e-6); }
  .b7__copy { flex: none; width: 100%; }
  /* En columna, el flex-basis de 640px del modo sin testimonios pasa a ser ALTURA y dejaba
     ~420 px de navy vacío bajo el botón en móvil (revisión visual del 04-sep). */
  .b7--sin-testimonios .b7__copy { flex-basis: auto; }
  .b7__testimonios { width: 100%; flex-wrap: wrap; }
  .b7__testimonio { flex: 1 1 220px; }
}

/* ── B7b · Blog y recursos ─────────────────────────────────────────────────────── */

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

.b7b__inner {
  max-width: var(--home-ancho);
  margin-inline: auto;
  padding: 64px 72px 72px;
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.b7b__bloque { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* 636 px es la caja del diseño para el blog; los recursos se quedan el resto. Sin
   entradas publicadas el bloque del blog no existe y los recursos ocupan el ancho. */
.b7b__blog { flex: 0 0 636px; max-width: 100%; }
.b7b__recursos { flex: 1 1 0; min-width: 0; }

.b7b__antetitulo {
  margin: 0;
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--c-acento);
}

.b7b__titular {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: var(--peso-extra);
  line-height: normal;
  color: var(--c-navy);
}

/* Las dos tarjetas se reparten el alto de la columna para cerrar a la misma línea que
   los recursos: con solo el titular dentro, dejarlas a su alto natural abría un hueco
   de 200 px bajo el blog. */
.b7b__entradas { list-style: none; margin: 0; padding: 0; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; }

.b7b__entrada,
.b7b__hub {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  box-shadow: 0 6px 16px rgba(26, 38, 51, 0.06);
}

.b7b__entrada { flex: 1 1 0; padding: 20px; display: flex; flex-direction: column; gap: 8px; }

.b7b__entrada-titulo { margin: 0; font-size: var(--t-h5); font-weight: 700; line-height: normal; color: var(--c-navy); }
.b7b__entrada-titulo a { color: inherit; text-decoration: none; }
.b7b__entrada-titulo a:hover { color: var(--c-coral); }

.b7b__entradilla { margin: 0; flex: 1 1 auto; font-size: var(--t-tarjeta); line-height: 1.5; color: var(--c-pizarra); }

/* El «Read more» va pegado al fondo de su tarjeta: con dos entradillas de distinto largo,
   los dos enlaces quedan a la misma altura. */
.b7b__leer { margin-top: auto; font-size: var(--t-tarjeta); font-weight: 700; color: var(--c-acento); text-decoration: none; }
.b7b__leer:hover { text-decoration: underline; }

.b7b__enlace { font-size: var(--t-tarjeta); font-weight: 700; color: var(--c-acento); text-decoration: none; }
.b7b__enlace:hover { text-decoration: underline; }

/* La lista crece hasta el fondo de su columna para que, cuando el blog sea más alto, los
   dos hubs cierren a la misma línea y sus botones no queden flotando a media altura. */
.b7b__hubs { list-style: none; margin: 0; padding: 0; width: 100%; flex: 1 1 auto; display: flex; gap: 20px; align-items: stretch; }

.b7b__hub { flex: 1 1 0; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 6px; }

.b7b__hub-titulo { margin: 0; font-size: var(--t-lead); font-weight: 700; line-height: normal; color: var(--c-navy); }
.b7b__hub-texto { margin: 0; font-size: var(--t-tarjeta); line-height: 1.5; color: var(--c-pizarra); }

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

.b7b__fichas a {
  display: flex;
  gap: 8px;
  padding-block: 3px;   /* hasta los 24 px de caja que pide WCAG 2.2 para el área de toque */
  font-size: var(--t-tarjeta);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-navy);
  text-decoration: none;
}

.b7b__fichas a:hover { color: var(--c-acento); }
.b7b__flecha { flex: 0 0 auto; color: var(--c-acento); }

/* El `auto` empuja el botón al fondo: los dos hubs miden lo mismo aunque uno tenga una
   ficha con el título más largo, y sus botones quedan a la misma altura. */
.b7b__hub-cta { margin-top: auto; align-self: flex-start; }

@media (max-width: 1200px) {
  .b7b__inner { flex-direction: column; padding: 56px var(--e-6); }
  .b7b__blog, .b7b__recursos { flex: none; width: 100%; }
}

@media (max-width: 700px) {
  .b7b__hubs { flex-direction: column; }
}

/* ── Tipografía manuscrita (B3 y B4b) ──────────────────────────────────────────── */

/* Caveat recortada al latín que usa el sitio, con `display: swap`: la nota manuscrita es
   decorativa y no debe bloquear el render. No se precarga por lo mismo — está muy por
   debajo del pliegue, al contrario que la fuente base del hero.

   El fichero anterior estaba MAL GENERADO (18-ago): su cmap se había quedado sin las
   minúsculas, sin los dígitos y sin 25 de las 26 mayúsculas, así que la nota nunca llegó
   a verse en Caveat —salía con la cursiva de reserva del sistema— mientras el navegador
   se bajaba 29 KB para nada. El actual se generó desde el subconjunto latino oficial de
   Google Fonts (OFL) y cubre a-z, A-Z, dígitos, puntuación y los acentos del español.

   Un solo peso, 700, en vez del rango variable 400-700: los datos del eje `gvar` de una
   tipografía manuscrita pesan más que los propios glifos (el rango completo se iba a
   62 KB frente a los 40 de la instancia fija). */
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/caveat-var.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.home { --f-manuscrita: 'Caveat', 'Segoe Script', cursive; }

/* Las dos notas manuscritas se escriben solas al entrar en pantalla: cada palabra se
   descubre de izquierda a derecha, encadenada con la anterior, como si alguien la
   estuviera escribiendo. Se hace por palabra y no con un barrido de toda la caja porque
   el texto va en dos líneas: un barrido único destaparía las dos a la vez.
   El JS solo añade `.escritura` y las palabras; sin JS el texto se ve entero desde el
   principio, que es el estado por defecto de esta hoja. */
.escritura__palabra {
  display: inline-block;
  clip-path: inset(0 100% -0.25em 0);
  transition: clip-path 260ms ease-out;
}

.escritura.es-escrita .escritura__palabra { clip-path: inset(0 0 -0.25em 0); }

@media (prefers-reduced-motion: reduce) {
  .escritura__palabra {
    clip-path: none;
    transition: none;
  }
}

/* ── Ajuste de interlineado al diseño ──────────────────────────────────────────────
   El framework usa un interlineado cómodo para texto largo; el diseño de la home usa
   `leading-normal` en titulares, etiquetas y textos cortos de tarjeta. Igualarlo es lo
   que hace que cada bloque mida lo que mide en Figma. */
.b2__antetitulo,
.b2__item-texto strong,
.b3__antetitulo,
.b3__texto strong,
.b3__pie,
.b4__titular,
.b4__copy p,
.b5__cuerpo h3,
.b5__cuerpo p,
.b6__cadencia,
.b6__unitario,
.b6__letra-pequena,
.b6__incluye li,
.b4__tarjeta li,
.b7__titular,
.b7__gancho,
.b7__prueba,
.b6__importe,
.b6__periodo,
.b6__cta,
.b6__ayuda-titulo,
.b6__ayuda-texto,
.b6__ayuda .boton--linea,
.b5__cuerpo .boton--linea,
.b4b__nota,
.b3__nota,
.b7__copy .boton,
.hero-home__entrada,
.hero-home__garantias { line-height: normal; }

/* Cota fina del diseño: la nota manuscrita fija su caja en Figma. Las de B6 se
   retiraron con el suelo de 14 px — clavar la caja en px con un texto más grande
   recortaba las letras. */
.b4b__nota { line-height: 33px; }

/* El botón del framework lleva un borde de 2 px que suma 4 px de alto; en el diseño de la
   home los botones sólidos no tienen borde, solo los de línea. Se quita en los sólidos y
   se respetan los de contorno. */
.home .boton:not(.boton--secundario):not(.boton--linea) { border: 0; }

.b6__titular,
.b5__titular,
.b6__entrada { line-height: normal; }
.b6__badge { line-height: normal; }
.b6__letra-pequena { line-height: normal; }

/* ── B6b · FAQ (home.md S12) ───────────────────────────────────────────────────── */
/* Fondo blanco entre el crema del precio y la banda navy: separa las objeciones del
   cierre. Los ítems reutilizan .faq__item del framework: mismo acordeón que las fichas. */

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

.b6b__inner {
  max-width: 880px;
  margin-inline: auto;
  padding: 64px 72px 72px;
}

.b6b__antetitulo {
  margin: 0;
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--c-acento);
  text-align: center;
}

.b6b__titular {
  margin: 10px 0 28px;
  font-size: var(--t-h3);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
  text-align: center;
}

@media (max-width: 1100px) {
  .b6b__inner { padding: 56px var(--e-6); }
}

/* ── Móvil ≤640 (Figma «Móvil — Home 390», aprobado 2026-08-10) ────────────────── */

@media (max-width: 640px) {
  /* Hero: foto como banda, CTAs a ancho completo, garantías en una línea pequeña,
     y la tarjeta flotante convertida en tres chips en fila. */
  .hero-home__foto { height: 250px; }
  .hero-home__copy { padding: 24px var(--e-5) 8px; }
  .hero-home__ctas { flex-direction: column; align-items: stretch; }
  .hero-home__ctas .boton { width: 100%; text-align: center; padding-block: 15px; }
  .hero-home__garantias {
    justify-content: center;
    font-size: 13px;
    gap: 4px 10px;
  }
  .hero-home__tarjeta {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: auto;
    margin: 0 var(--e-5) 28px;
    padding: 0;
    background: none;
    box-shadow: none;
    border: 0;
  }
  .hero-home__item {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 8px 10px;
    background: var(--c-blanco);
    border: 1px solid var(--c-borde);
    border-radius: var(--r-sm);
  }
  .hero-home__icono { display: none; }
  .hero-home__item-copy { align-items: center; text-align: center; }
  /* La tarjeta de 1440 es navy y su texto claro; los chips son blancos, así que aquí
     los colores se dan la vuelta o el «25 min» queda blanco sobre blanco. */
  .hero-home__item-copy strong { font-size: var(--t-muletilla); color: var(--c-navy); }
  .hero-home__item-copy span { font-size: 12px; color: var(--c-pizarra); }

  /* Respiración de bloque según el Figma: 40 arriba y abajo. */
  .b2__inner, .b3__inner, .b4__inner, .b5__inner, .b6__inner, .b6b__inner,
  .b7__inner, .b7b__inner { padding-block: 40px; }

  /* Precios: una tarjeta por fila. */
  .b6__plan { flex: 1 1 100%; }
}