/* fpl.pilothub.mx: lo propio de esta landing, encima de kit.css (la plantilla común del kit; no se edita aquí).
   Las piezas comunes (cabecera, hoja, botones, capturas, preguntas, texto de guías, pie) viven en kit.css.
   Sin colores sueltos: todo sale de las variables de la plantilla, para que de noche funcione solo. */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Portada ---------- */
.fpl-hero { display: grid; gap: 40px; }
.fpl-hero-text > * + * { margin-top: 20px; }
.fpl-hero h1 { max-width: 18ch; }
.fpl-hero .kit-actions { margin-top: 28px; }
@media (min-width: 960px) {
  .fpl-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 56px; align-items: center; }
}

/* Maqueta viva: la hoja del plan de vuelo dibujada con casillas, no una captura.
   Todo con variables del kit para que de noche se vea igual de legible. Datos de ejemplo. */
.fpl-live { margin: 0; width: 100%; }
.fpl-hoja { width: 100%; max-width: 460px; background: var(--kit-paper); border: 1px solid var(--kit-rule); border-top: 6px solid var(--tool); border-radius: 12px; padding: 16px; box-shadow: var(--kit-shadow-sheet); }
.fpl-hoja-t { margin: 0 0 12px; font-stretch: var(--kit-narrow); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kit-ink); }
.fpl-campos { margin: 0; display: grid; gap: 8px; }
.fpl-fila { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.fpl-cas { grid-column: span var(--w); min-width: 0; background: var(--kit-field); border: 1px solid var(--kit-rule); border-radius: 6px; padding: 6px 8px 5px; }
.fpl-cas dt { font-size: 10.5px; line-height: 1.2; letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fpl-cas dd { margin: 2px 0 0; font-stretch: var(--kit-semi); font-weight: 800; font-size: clamp(18px, 4.6vw, 24px); line-height: 1.15; color: var(--tool-ink); font-variant-numeric: tabular-nums; }
/* Único momento de movimiento de la página: los datos "se escriben" uno tras otro. */
@media (prefers-reduced-motion: no-preference) {
  .fpl-cas dd { animation: fpl-escribe 0.5s ease-out both; animation-delay: calc(var(--n) * 90ms + 200ms); }
}
@keyframes fpl-escribe { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Aviso de independencia (E-22): una casilla con su regla de tinta a la izquierda */
.fpl-indep { max-width: 62ch; padding: 12px 16px; font-size: 15px; color: var(--kit-ink-2); border-left: 3px solid var(--tool-ink); background: var(--kit-field); border-radius: 0 var(--kit-r-field) var(--kit-r-field) 0; }

/* Gratis · Funciona sin señal · Android, iPhone y computadora, como renglón de formulario */
.fpl-specs { display: flex; flex-wrap: wrap; margin: 32px 0 0; border-top: 1px solid var(--kit-rule); }
.fpl-specs > div { padding: 12px 24px 0 0; margin-right: 24px; }
.fpl-specs > div + div { padding-left: 24px; border-left: 1px solid var(--kit-rule); }
.fpl-specs dd { margin: 2px 0 0; font-weight: 650; font-size: 16px; line-height: 1.35; }
@media (max-width: 640px) {
  .fpl-specs > div { flex: 1 1 100%; margin-right: 0; padding: 10px 0; border-left: 0 !important; }
  .fpl-specs > div + div { padding-left: 0; border-top: 1px solid var(--kit-rule); }
}

/* ---------- Bloques de dos o tres renglones: texto con su regla arriba, sin tarjetas ---------- */
.fpl-cols { display: grid; gap: 0 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.fpl-item { border-top: 1px solid var(--kit-rule); padding: 20px 0 26px; }
.fpl-item .kit-label { margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.fpl-item h3 { margin-bottom: 8px; }
.fpl-item p { color: var(--kit-ink-2); font-size: 16px; max-width: 60ch; }
.fpl-sub-head { margin-top: clamp(32px, 5vw, 56px); margin-bottom: 20px; }
.fpl-sub-head h3 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 8px; }
.kit-section > .kit-actions { margin-top: 28px; }

/* ---------- Precio: dos casillas, la de Premium con borde de tinta ---------- */
.fpl-precios { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.fpl-plan { background: var(--kit-field); border: 1px solid var(--kit-rule); border-radius: 12px; padding: clamp(20px, 3vw, 32px); }
.fpl-plan--premium { border: 2px solid var(--tool-ink); }
.fpl-plan h3 { margin-bottom: 4px; }
.fpl-sub { color: var(--kit-ink-2); font-size: 16px; }
.fpl-cifra { margin: 14px 0 4px; font-stretch: var(--kit-semi); font-weight: 800; font-size: 36px; line-height: 1.1; color: var(--tool-ink); font-variant-numeric: tabular-nums; }
.fpl-cifra small { font-size: 14.5px; font-weight: 400; color: var(--kit-ink-2); }
.fpl-plan ul { list-style: none; margin: 18px 0 0; padding: 0; }
.fpl-plan li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--kit-ink-2); font-size: 16px; }
.fpl-plan li::before { content: ''; position: absolute; left: 3px; top: 0.45em; width: 6px; height: 11px; border: solid var(--tool-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.fpl-nota { color: var(--kit-ink-2); font-size: 15px; margin-top: 20px; }

/* ---------- Instalación ---------- */
.fpl-pasos { counter-reset: paso; list-style: none; margin: 14px 0 0; padding: 0; }
.fpl-pasos li { counter-increment: paso; position: relative; padding-left: 34px; margin-bottom: 12px; color: var(--kit-ink-2); font-size: 16px; }
.fpl-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -1px; font-stretch: var(--kit-narrow); font-weight: 800; font-size: 22px; line-height: 1.4; color: var(--tool-ink); font-variant-numeric: tabular-nums; }
.fpl-item .fpl-nota { margin-top: 14px; }

/* Teclas y códigos de casilla: la misma letra del kit, en una casilla pequeña (no hay segunda familia) */
kbd, code { font: inherit; font-weight: 650; font-size: 0.9em; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; background: var(--kit-field); border: 1px solid var(--kit-rule); border-radius: 6px; padding: 1px 6px; white-space: nowrap; color: var(--kit-ink); }

/* ---------- Guías: un índice de renglones ---------- */
.fpl-guias { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 40px; border-top: 1px solid var(--kit-rule); }
.fpl-guias li { border-bottom: 1px solid var(--kit-rule); }
.fpl-guias a { display: block; padding: 20px 0 22px; color: var(--kit-ink); text-decoration: none; }
.fpl-guias h3 { margin-bottom: 6px; font-size: clamp(19px, 2vw, 22px); }
.fpl-guias p { color: var(--kit-ink-2); font-size: 16px; max-width: 52ch; }
.fpl-guias a:hover h3 { color: var(--tool-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (min-width: 900px) { .fpl-guias { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Capturas: la proporción del archivo, nunca estirada ni recortada ---------- */
.kit-shot-frame { aspect-ratio: auto; }
.kit-shot-frame img { height: auto; object-fit: initial; }

/* ---------- Guías: avisos y fuentes dentro del texto ---------- */
.fpl-aviso { padding: 12px 16px; border-left: 3px solid var(--tool-ink); background: var(--kit-field); border-radius: 0 var(--kit-r-field) var(--kit-r-field) 0; font-size: 16px; }
.fpl-fuente { font-size: 14.5px; color: var(--kit-ink-2); margin-top: 0.4em !important; }
.kit-prose .kit-table-scroll table { min-width: 520px; }
.kit-prose .relacionadas li { margin-top: 0.4em; }