/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · free-level-test.css — hoja de la página /free-level-test
   Maqueta el Figma `/free-level-test — Desktop 1440` (nodo 263:2).

   Mismas reglas que home.css y pricing.css: ni un color ni un tamaño a mano —todo por
   token— y las cotas del diseño en px, porque los bloques están medidos contra el Figma.

   No hay maqueta de móvil aprobada para esta URL: por debajo de 1100 px la página se
   degrada a una columna sin inventar composición nueva, con una sola condición innegociable
   —el formulario tiene que seguir siendo lo primero que se ve—. A 390 px no hay scroll
   horizontal, ningún control baja de 48 px de alto y ningún texto baja de 14 px.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.free-level-test {
  --flt-ancho: 1440px;
  --flt-lateral: 72px;
  /* Los bloques del diseño no comparten caja: unos arrancan en x=120 y otros en x=220.
     En vez de repetir el número por regla, cada ancho es un token de la página. */
  --flt-medio: 1200px;
  --flt-estrecho: 1000px;
}

.free-level-test .f1__inner,
.free-level-test .f2__inner,
.free-level-test .f3__inner,
.free-level-test .f4__inner,
.free-level-test .f5__inner,
.free-level-test .f6__inner,
.free-level-test .f7__inner,
.free-level-test .f8__inner,
.free-level-test .f9__inner {
  max-width: var(--flt-ancho);
  margin-inline: auto;
  padding-inline: var(--flt-lateral);
}

.free-level-test .f3__inner,
.free-level-test .f4__inner {
  max-width: calc(var(--flt-medio) + var(--flt-lateral) * 2);
}

.free-level-test .f2__inner,
.free-level-test .f5__inner,
.free-level-test .f6__inner,
.free-level-test .f8__inner,
.free-level-test .f9__inner {
  max-width: calc(var(--flt-estrecho) + var(--flt-lateral) * 2);
}

/* Titulares de bloque: todos comparten escalón, como en el diseño. */
.f2__titular,
.f4__titular,
.f5__titular,
.f6__titular,
.f8__titular,
.f9__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);
}

/* Las listas de chips son listas de verdad (son enumeraciones): se les quita la viñeta. */
.f1__chips,
.f4__sello-chips,
.f9__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* ── F1 · Hero + formulario (263:9) ───────────────────────────────────────────────────
   Foto de 680 px anclada a la derecha y fundida al crema por la izquierda, misma receta
   que el hero de la home; el copy en caja de 832 y la tarjeta del formulario en 400. */

.f1 {
  position: relative;
  background: var(--c-crema-calida);
  overflow: hidden;
}

.f1__foto {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 680px;
  max-width: 100%;
}

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

/* El velo funde la foto con el crema. Las paradas se miden DESDE LA DERECHA, que es donde
   está anclada la foto: así por encima de 1440 no asoma su canto duro. */
.f1__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--c-crema-calida) 0,
    var(--c-crema-calida) calc(100% - 680px),
    transparent calc(100% - 480px)
  );
}

.f1__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 832px) 400px;
  gap: 64px;
  align-items: start;
  padding-block: 64px;
}

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

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

.f1__entrada {
  margin: 0;
  max-width: 44rem;
  font-size: var(--t-lead);
  color: var(--c-pizarra);
}

/* La tarjeta blanca es lo único que flota sobre la foto: sombra suave, nada de saturación
   que compita con el botón. */
.f1__formulario {
  background: var(--c-blanco);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-m);
  padding: 20px 28px 24px;
}

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

.f1__campo { margin: 0 0 var(--e-3); display: flex; flex-direction: column; gap: 4px; }

.f1__label {
  font-size: var(--t-muletilla);
  font-weight: var(--peso-semi);
  color: var(--c-navy);
}

/* 48 px de alto de campo: el mínimo cómodo en el pulgar, y aquí se rellena en el móvil. */
.f1__input {
  font: inherit;
  font-size: var(--t-tarjeta);
  min-height: 48px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--c-borde-calido);
  border-radius: var(--r-sm);
  background: var(--c-crema);
  color: var(--c-navy);
}

.f1__enviar { margin: var(--e-4) 0 0; }

.f1__cta {
  width: 100%;
  min-height: 48px;
  padding: 14px 18px;
  font-size: var(--t-tarjeta);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.f1__nota {
  margin: var(--e-3) 0 0;
  font-size: var(--t-muletilla);
  line-height: 1.45;
  color: var(--c-pizarra);
  text-align: center;
}

/* ── F2 · Qué es y qué no (264:2) ─────────────────────────────────────────────────────
   La comparación en paralelo ES el argumento: verde lo que es, rojo lo que no. */

.f2 { position: relative; background: var(--c-blanco); overflow: hidden; }

.f2__inner { position: relative; padding-block: 72px; }

/* La lámina de notas del Figma pide dos flechas y un trazo curvo al 6 % que se desplazan
   despacio con el scroll. El desplazamiento pide JavaScript y esta página no carga ninguno:
   queda la insinuación estática, por debajo de las tarjetas y sin competir con el texto. */
.f2__fondo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side, var(--c-crema-calida) 80%, transparent) -6% 30% / 320px 320px no-repeat,
    radial-gradient(closest-side, var(--c-crema-calida) 80%, transparent) 104% 74% / 260px 260px no-repeat;
  opacity: 0.6;
  pointer-events: none;
}

.f2__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.f2__caja { border: 1px solid; border-radius: var(--r-lg); padding: 22px 24px; }
.f2__caja--es { background: var(--c-ok-fondo); border-color: var(--c-ok); }
.f2__caja--no { background: var(--c-error-fondo); border-color: var(--c-error); }

.f2__caja-titulo { margin: 0 0 var(--e-3); font-size: var(--t-h5); font-weight: var(--peso-extra); }
.f2__caja--es .f2__caja-titulo { color: var(--c-ok); }
.f2__caja--no .f2__caja-titulo { color: var(--c-error); }

.f2__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.f2__lista li { display: flex; gap: 10px; font-size: var(--t-tarjeta); color: var(--c-navy); }

.f2__marca { flex: 0 0 auto; font-weight: var(--peso-extra); }
.f2__caja--es .f2__marca { color: var(--c-ok); }
.f2__caja--no .f2__marca { color: var(--c-error); }

/* ── F3 · Cómo funciona (264:8) ───────────────────────────────────────────────────────── */

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

.f3__inner { padding-block: 72px; }

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

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

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

.f3__paso { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 18px; align-items: start; }

.f3__numero {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-acento);
  color: var(--c-blanco);
  font-size: var(--t-muletilla);
  font-weight: var(--peso-extra);
}

.f3__paso-titulo { margin: 0 0 4px; font-size: var(--t-cuerpo); font-weight: var(--peso-extra); color: var(--c-blanco); }
/* Sobre navy, el enlace va en el coral claro: el de texto no separa lo suficiente del fondo. */
.f3__paso-titulo a { color: var(--c-acento-suave); }
.f3__paso-titulo a:hover { color: var(--c-blanco); }

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

.f3__foto { margin: 0; }
.f3__foto img { display: block; width: 100%; border-radius: var(--r-lg); }

/* ── F4 · Qué te llevas (264:22) ──────────────────────────────────────────────────────── */

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

.f4__inner { padding-block: 72px; }

.f4__titular { text-align: center; }

.f4__sello {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--c-navy);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  margin-bottom: var(--e-6);
}

.f4__medalla {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-ambar);
  color: var(--c-navy);
  font-size: var(--t-h4);
  font-weight: var(--peso-extra);
}

.f4__sello-copy { flex: 1 1 auto; }
.f4__sello-titulo { margin: 0 0 4px; font-size: var(--t-h5); font-weight: var(--peso-extra); color: var(--c-blanco); }
.f4__sello-texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-texto-navy); }

/* Sobre el navy del sello los chips no pueden ser los blancos del sistema: se invierten. */
.f4__sello-chips { flex: 0 0 auto; flex-direction: column; }
.f4__sello-chips .chip {
  background: var(--c-navy-suave);
  border-color: var(--c-navy-borde);
  color: var(--c-blanco);
}

.f4__cols { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: center; }

.f4__maqueta {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-m);
  padding: 24px 26px;
}

.f4__maqueta-rotulo { margin: 0 0 var(--e-2); font-size: var(--t-muletilla); font-weight: var(--peso-extra); color: var(--c-navy); }
.f4__maqueta-dato { margin: 0 0 var(--e-4); font-size: var(--t-tarjeta); color: var(--c-pizarra); }

.f4__maqueta-nivel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: var(--e-4);
  margin-bottom: var(--e-4);
  border-bottom: 1px solid var(--c-borde);
}

.f4__nivel {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 120px;
  padding: 12px 0;
  border-radius: var(--r-sm);
  background: var(--c-ok);
  color: var(--c-blanco);
}
.f4__nivel strong { font-size: var(--t-h3); font-weight: var(--peso-extra); line-height: 1; }
.f4__nivel span { font-size: var(--t-muletilla); }

.f4__maqueta-escala { font-size: var(--t-muletilla); color: var(--c-pizarra); }

.f4__maqueta-recomendacion {
  margin: 0;
  display: inline-block;
  background: var(--c-ambar-fondo);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: var(--t-muletilla);
  font-weight: var(--peso-semi);
  color: var(--c-navy);
}

.f4__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.f4__item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 14px; align-items: start; }

.f4__punto {
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--c-coral);
}

.f4__item-titulo { margin: 0 0 4px; font-size: var(--t-cuerpo); font-weight: var(--peso-extra); color: var(--c-navy); }
.f4__item-texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

.f4__cierre {
  margin: var(--e-6) 0 0;
  text-align: center;
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

/* ── F5 · Nothing to prepare (265:2) ──────────────────────────────────────────────────── */

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

.f5__inner {
  padding-block: 64px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}

.f5__foto { margin: 0; }
.f5__foto img { display: block; width: 100%; border-radius: var(--r-lg); }

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

/* La nota manuscrita del diseño no se puede reproducir con la fuente del sistema y no se
   carga una segunda familia en la página de conversión: se resuelve con la caja amarilla y
   una inclinación mínima. El texto va en navy, no en ámbar: el ámbar sobre este fondo no
   llega al contraste que exige AA. */
.f5__cita {
  margin: 0;
  max-width: 30rem;
  background: var(--c-ambar-fondo);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-s);
  padding: 20px 24px;
  transform: rotate(-1deg);
}

.f5__cita blockquote { margin: 0; }
.f5__cita p { margin: 0; font-size: var(--t-lead); font-weight: var(--peso-semi); color: var(--c-navy); }
.f5__cita figcaption { margin-top: var(--e-2); font-size: var(--t-tarjeta); color: var(--c-pizarra); }

/* ── F6 · After the test (265:6) ──────────────────────────────────────────────────────── */

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

.f6__inner { padding-block: 64px; }

.f6__titular { margin-bottom: var(--e-3); }
.f6__entrada { margin: 0 0 var(--e-5); font-size: var(--t-lead); color: var(--c-pizarra); }

.f6__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.f6__caja { border-radius: var(--r-lg); padding: 22px 24px; }
.f6__caja--si { background: var(--c-crema-calida); border: 1px solid var(--c-borde-calido); }
.f6__caja--no { background: var(--c-blanco); border: 1px solid var(--c-borde); }

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

/* Los dos únicos enlaces salientes que quedan, y van juntos: cada enlace es una salida. */
.f6__enlaces {
  margin: var(--e-5) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  font-size: var(--t-tarjeta);
  font-weight: 700;
}

.f6__linea {
  list-style: none;
  margin: 0;
  padding: 26px 24px;
  background: var(--c-crema-calida);
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-4);
}

.f6__hito { position: relative; display: flex; flex-direction: column; gap: 10px; }

.f6__hito-numero {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  font-size: var(--t-muletilla);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

/* El último hito es el único coloreado: es el paso que el visitante puede no dar. */
.f6__hito--final .f6__hito-numero { background: var(--c-coral); border-color: var(--c-coral); color: var(--c-navy); }

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

/* El raíl entre hitos es decoración pura: sale del CSS, no hay markup vacío en el PHP. */
.f6__hito:not(.f6__hito--final)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 44px;
  right: -12px;
  height: 2px;
  background: var(--c-borde-calido);
}

/* ── F7 · Respaldo (265:11) ───────────────────────────────────────────────────────────── */

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

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

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

/* ── F8 · FAQ (265:15) ────────────────────────────────────────────────────────────────── */

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

/* ── F9 · Cierre (265:38) ─────────────────────────────────────────────────────────────── */

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

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

.f9__titular { margin: 0; }
.f9__texto { margin: 0; max-width: 44rem; font-size: var(--t-lead); color: var(--c-pizarra); }

.f9__cta {
  min-height: 48px;
  padding: 16px 32px;
  border-radius: var(--r-sm);
  font-size: var(--t-cuerpo);
}

.f9__chips { justify-content: center; }

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

@media (max-width: 1100px) {
  .free-level-test { --flt-lateral: var(--e-6); }

  /* La foto del hero es decorativa (alt vacío): por debajo de 1100 estorba más de lo que
     aporta —empuja el formulario fuera del pliegue— y se retira. */
  .f1__foto,
  .f1__velo { display: none; }

  .f1__inner { grid-template-columns: 1fr; gap: var(--e-6); padding-block: 32px 40px; }

  /* El formulario, primero: es la acción de la página. */
  .f1__formulario { order: -1; }

  .f3__cols { grid-template-columns: 1fr; gap: 32px; }
  .f4__cols { grid-template-columns: 1fr; gap: 32px; }
  .f5__inner { grid-template-columns: 1fr; gap: 28px; }
  .f5__foto img { max-height: 22rem; object-fit: cover; }
}

/* ── Móvil (sin maqueta aprobada: degradado a una columna) ────────────────────────────── */

@media (max-width: 700px) {
  .free-level-test { --flt-lateral: 20px; }

  .f1__titular { font-size: var(--t-h2); }
  .f1__entrada { font-size: var(--t-cuerpo); }
  .f1__formulario { padding: 18px 18px 20px; }

  .f2__inner,
  .f3__inner,
  .f4__inner,
  .f6__inner,
  .f8__inner { padding-block: 40px; }
  .f5__inner { padding-block: 40px; }
  .f9__inner { padding-block: 40px 56px; }

  .f2__cols,
  .f6__cols { grid-template-columns: 1fr; }

  .f4__sello { flex-direction: column; align-items: flex-start; gap: var(--e-4); }
  .f4__sello-chips { flex-direction: row; }
  .f4__maqueta { padding: 20px; }
  .f4__maqueta-nivel { flex-direction: column; align-items: flex-start; }
  .f4__nivel { width: 100%; }

  .f5__cita { transform: none; }

  /* La secuencia se pone en vertical y el raíl pasa a ser el tramo entre círculos. */
  .f6__linea { grid-template-columns: 1fr; gap: var(--e-5); padding: 22px 20px; }
  .f6__hito { flex-direction: row; align-items: center; gap: 14px; }
  .f6__hito-numero { flex: 0 0 auto; }
  .f6__hito:not(.f6__hito--final)::after {
    top: 38px;
    bottom: -26px;
    left: 15px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .f9__cta { width: 100%; }
}