/* ===== N-LANDING · la página pública de Becas G&G ==========================================
 *
 * Se encola SÓLO en la landing (gta_encolar_landing() en functions.php) y sólo depende de
 * style.css, de donde saca los tokens de DESIGN.md §2 y la Nunito autoalojada: aquí no se
 * redeclara ni un color ni una fuente, para que el día que la marca cambie de verde no haya
 * que acordarse de esta hoja.
 *
 * Todo cuelga del prefijo .lp- y del `body.gta-landing`. El motivo es que esta plantilla
 * comparte documento con style.css, que estiliza el PORTAL: sin prefijo, un `.card` o un `h2`
 * de aquí se llevaría por delante media pantalla del becado, o al revés.
 *
 * MÓVIL PRIMERO, y no como eslogan: el ancho de referencia son los 390 px del encargo, y
 * todo lo que se ensancha lo hace en dos únicos puntos de quiebre (640 y 960). Las retículas
 * usan `auto-fit` con `minmax`, así que entre esos puntos nada se desborda de lado — que es
 * la avería que el guion de navegador mide con `scrollWidth > clientWidth`.
 */

/* ── Contenedor y utilidades ─────────────────────────────────────────────────────────────── */
body.gta-landing { background: var(--superficie); }

.lp-ancho {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* El salto de teclado: invisible hasta que alguien tabula, y entonces el primero de todo. */
.lp-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal-700);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 100;
}
.lp-saltar:focus { left: 0; }

/* ── Botones ─────────────────────────────────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);   /* DESIGN.md: nada pulsable por debajo de 44 px. */
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-500);
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn:focus-visible { outline: 3px solid var(--sol-400); outline-offset: 2px; }

.lp-btn--pri { background: var(--sol-400); color: var(--teal-700); box-shadow: var(--sombra-card); }
.lp-btn--pri:hover { background: #ffcf6e; }

.lp-btn--sec { background: var(--teal-600); color: #fff; }
.lp-btn--sec:hover { background: var(--teal-500); }

.lp-btn--linea { border: 2px solid currentColor; color: var(--teal-700); background: transparent; padding: var(--sp-2) var(--sp-4); }
.lp-btn--linea:hover { background: var(--teal-50); }

.lp-btn--ancho { width: 100%; }

/* ── Barra superior ──────────────────────────────────────────────────────────────────────── */
.lp-barra {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}
.lp-barra__marca {
  font-weight: 800;
  font-size: var(--fs-500);
  color: var(--teal-700);
  text-decoration: none;
  margin-right: auto;
  /* Medía 32 px de alto: es el enlace a la portada en la barra superior y en el teléfono es
     el primer sitio donde se pulsa para volver. DESIGN.md: nada pulsable por debajo de 44. */
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}
/* La marca no es flex: sin esto, la Beki inline (32 px) se sienta en la línea base del texto. */
.lp-barra__marca .gta-beki,
.lp-pie__marca .gta-beki { vertical-align: middle; }
.lp-barra__nav { display: none; gap: var(--sp-5); }
.lp-barra__nav a { color: var(--secundario); text-decoration: none; font-weight: 700; font-size: var(--fs-400); }
.lp-barra__nav a:hover { color: var(--teal-600); }

/* ── 1 · Hero ────────────────────────────────────────────────────────────────────────────── */
.lp-hero {
  background: linear-gradient(160deg, var(--teal-700) 0%, var(--teal-500) 70%, #12857a 100%);
  color: #fff;
  padding: var(--sp-7) 0;
}
.lp-hero__caja { max-width: 780px; text-align: center; }
.lp-hero__sello {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--fs-300);
  font-weight: 800;
  color: var(--sol-400);
  margin: 0 0 var(--sp-3);
}
.lp-hero h1 {
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 var(--sp-4);
  font-weight: 800;
}
/* El guion largo del título es lo único que se rompe feo a 390: en el celular sobra. */
.lp-hero__guion { display: none; }
.lp-hero__bajada {
  font-size: var(--fs-500);
  margin: 0 auto var(--sp-6);
  max-width: 56ch;
  color: rgb(255 255 255 / .92);
}
.lp-hero__botones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: stretch;
}
/* El segundo CTA del hero va en BLANCO y no en el verde de .lp-btn--sec: sobre el degradado
   teal, verde sobre verde deja el botón medio escondido justo al lado del amarillo, y el que
   se esconde es el del estudiante («Tengo un código de beca»). El mismo modificador sobre
   fondo claro (sección de confianza) sí se pinta verde, que es donde contrasta. */
.lp-hero .lp-btn--sec { background: var(--superficie); color: var(--teal-700); }
.lp-hero .lp-btn--sec:hover { background: var(--teal-50); }
.lp-hero__pie {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-300);
  letter-spacing: .04em;
  color: rgb(255 255 255 / .78);
}

/* ── Secciones ───────────────────────────────────────────────────────────────────────────── */
.lp-seccion { padding: var(--sp-7) 0; }
.lp-seccion h2 { font-size: var(--fs-900); margin: 0 0 var(--sp-3); line-height: 1.2; }
.lp-seccion__entrada { color: var(--secundario); margin: 0 0 var(--sp-6); max-width: 60ch; }
.lp-seccion--clara { background: var(--teal-50); }
.lp-seccion--oscura { background: var(--teal-700); color: #fff; }
.lp-seccion--oscura h2 { color: #fff; }
.lp-seccion--oscura .lp-seccion__entrada { color: rgb(255 255 255 / .86); }

/* ── 2 · Cómo funciona ───────────────────────────────────────────────────────────────────── */
.lp-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.lp-pasos li {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sombra-card);
}
.lp-pasos__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--sol-100);
  color: var(--teal-700);
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: var(--sp-3);
}
.lp-pasos h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-700); }
.lp-pasos p { margin: 0; color: var(--secundario); }

/* ── 3 · Para instituciones ──────────────────────────────────────────────────────────────── */
.lp-b2b { display: grid; gap: var(--sp-6); }
.lp-lista { margin: 0; padding-left: 1.1em; display: grid; gap: var(--sp-3); }
.lp-lista li { color: rgb(255 255 255 / .9); }
.lp-lista strong { color: #fff; }
.lp-b2b__tarjeta {
  background: var(--superficie);
  color: var(--tinta);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sombra-flotante);
  align-self: start;
}
.lp-b2b__tarjeta h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-700); }
.lp-b2b__tarjeta p { color: var(--secundario); margin: 0 0 var(--sp-4); }
/* Q1 chunk 4/4 (TANDA 25-SEP-P23) · notas de la landing pública son cuerpo, no caption: >=14 px. */
.lp-b2b__nota { font-size: var(--fs-400); margin: var(--sp-3) 0 0 !important; }

/* N27 · el formulario B2B. Vive DENTRO de .lp-b2b__tarjeta (fondo claro sobre sección oscura),
 * así que no redeclara ni un color: hereda --tinta y --borde como el resto de la tarjeta.
 *
 * Los campos van a 100 % de ancho y en columna a cualquier tamaño —también a 1.280— y es una
 * decisión y no una pereza: la tarjeta ocupa un tercio del ancho en escritorio, así que dos
 * columnas dentro dejarían etiquetas de 90 px partidas en tres renglones. Y el alto de 44 px
 * es el mínimo táctil del encargo, medido en los 390 px de referencia. */
.lp-form { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); text-align: left; }
.lp-campo { display: grid; gap: 4px; margin: 0 !important; }
.lp-campo label { font-size: var(--fs-300); font-weight: 700; color: var(--tinta); }
.lp-campo input,
.lp-campo select,
.lp-campo textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-size: 1rem; /* 16 px o el navegador del iPhone hace zoom al enfocar. */
}
.lp-campo textarea { min-height: 88px; resize: vertical; }
.lp-campo input:focus,
.lp-campo select:focus,
.lp-campo textarea:focus { outline: 3px solid var(--teal-500); outline-offset: 1px; }
.lp-campo__nota { font-size: var(--fs-400); color: var(--secundario); margin: -4px 0 0 !important; }

/* El cebo. `display:none` a secas lo saltan los robots que leen el CSS, así que se saca de la
 * pantalla en vez de esconderse — y con `tabindex="-1"` en el HTML, para que el teclado tampoco
 * lo pise. Quien navega con lector de pantalla no lo oye: el `aria-hidden` está en el HTML. */
.lp-cebo { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* El aviso de vuelta («gracias» / «faltan datos»), que es lo primero que se lee al volver. */
.lp-aviso {
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4) !important;
  font-size: var(--fs-400);
  font-weight: 700;
}
.lp-aviso--bien { background: var(--sol-100); color: var(--teal-700); border-left: 4px solid var(--teal-600); }
.lp-aviso--mal { background: #FDECEA; color: #8A1C13; border-left: 4px solid #C0392B; }

/* ── 4 · Cursos y cifras ─────────────────────────────────────────────────────────────────── */
.lp-cursos {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lp-curso {
  border: 1px solid var(--borde);
  border-left: 5px solid var(--teal-500);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  background: var(--superficie);
}
.lp-curso h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-700); line-height: 1.25; }
.lp-curso__dato { margin: 0; color: var(--secundario); font-size: var(--fs-400); font-weight: 700; }

.lp-cifras {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: var(--sp-7);
}
.lp-cifra {
  background: var(--teal-50);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.lp-cifra strong {
  display: block;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  color: var(--teal-600);
  line-height: 1.1;
}
.lp-cifra span { color: var(--secundario); font-size: var(--fs-400); }
.lp-cifras__nota { margin: var(--sp-3) 0 0; font-size: var(--fs-400); color: var(--secundario); }

/* ── 5 · Confianza ───────────────────────────────────────────────────────────────────────── */
.lp-confianza { display: grid; gap: var(--sp-6); align-items: center; }
.lp-confianza p { color: var(--secundario); margin: 0 0 var(--sp-4); max-width: 62ch; }
.lp-confianza__sello {
  background: var(--superficie);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
  box-shadow: var(--sombra-card);
}
.lp-confianza__sello span { font-size: 3rem; display: block; }
.lp-confianza__sello p { margin: var(--sp-2) 0 0; font-weight: 800; color: var(--teal-700); }

/* ── 6 · Pie ─────────────────────────────────────────────────────────────────────────────── */
.lp-pie { background: var(--teal-700); color: #fff; padding: var(--sp-6) 0; }
.lp-pie__caja { display: grid; gap: var(--sp-4); }
.lp-pie__marca { margin: 0; font-weight: 800; }
.lp-pie__enlaces { display: grid; gap: var(--sp-3); }
/* Los cuatro enlaces del pie de la landing (entrar, activar, verificar, reglamento) medían
   23 px de alto. Cada uno ocupa su propia línea de la rejilla, así que es un control y no un
   enlace dentro de una frase: `inline-flex` con el mínimo táctil y `justify-content:start`
   para que el destino no se estire hasta el ancho de la columna. */
.lp-pie__enlaces a {
  color: rgb(255 255 255 / .9); font-size: var(--fs-400);
  display: inline-flex; align-items: center; justify-content: start;
  min-height: var(--touch-min);
}
.lp-pie__enlaces a:hover { color: var(--sol-400); }
.lp-pie__legal { margin: 0; font-size: var(--fs-300); color: rgb(255 255 255 / .7); }

/* ── 640 px: dos columnas donde caben, y los CTA del hero en fila ────────────────────────── */
@media (min-width: 640px) {
  .lp-hero__guion { display: inline; }
  .lp-hero__botones { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .lp-pasos { grid-template-columns: repeat(3, 1fr); }
  .lp-pie__enlaces { grid-auto-flow: column; justify-content: start; gap: var(--sp-5); }
}

/* ── 960 px: la barra enseña sus enlaces y las dos secciones a dos columnas ──────────────── */
@media (min-width: 960px) {
  .lp-barra__nav { display: flex; }
  .lp-b2b { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .lp-confianza { grid-template-columns: 1.6fr 1fr; }
}

/* Quien pide menos movimiento no recibe ninguno (DESIGN.md accesibilidad). */
@media (prefers-reduced-motion: reduce) {
  .lp-btn { transition: none; }
  .lp-btn:hover { transform: none; }
}