/* AMASFLY Suite — estilo AMASFLY v2 (docs: amasfly-sistema/docs/ESTILO-AMASFLY-V2.md).
   Tokens exactos de la guía §3; tarjetas, pastillas, botones y etiquetas de §4.
   Este archivo se edita a mano (no lo genera scripts/construir.mjs).
   Índice: 1 tokens · 2 base · 3 barra · 4 botones y pastillas · 5 portada · 6 secciones ·
   7 productos · 8 maquetas · 9 ciclo · 10 por qué · 11 demo · 12 contacto · 13 pie · 14 404 · 15 ajustes */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --fondo: #f2f4f7;
  --tarjeta: #ffffff;
  --instrumento: #e6ebf2;
  --borde: #d3dae3;
  --borde-control: #6f8097;
  --texto: #102b46;
  --secundario: #3e5873;
  --acento: #0862bc;
  --accion: #0862bc;
  --barra: #071629;
  --lateral: #0a1f3a;
  --menu-texto: #f2f7fd;
  --menu-sec: #b4c7dc;
  --menu-borde: #2a4468;
  --celeste: #83c6ff;
  --base-chip: #ffffff;
  --suave-luz: #9dc1e0;
  --suave: #86aed3;
  --suave-texto: #102b46;
  --verde: #166c35;
  --ambar: #805400;
  --rojo: #ad292f;
  /* Derivados de la guía */
  --pag-alt: #e9eef4;
  --sombra-tarjeta: 0 1px 6px rgba(0, 0, 0, 0.08);
  --sombra-estado: 0 4px 12px rgba(0, 0, 0, 0.06);
  --estado-a1: 2%;
  --estado-a2: 15%;
  --estado-borde: 40%;
  --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fuente-titulo: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}
:root.dark {
  --fondo: #0e2440;
  --tarjeta: #16325a;
  --instrumento: #1e4170;
  --borde: #2e4f7c;
  --borde-control: #6f93c0;
  --texto: #eaf4ff;
  --secundario: #c2d5e8;
  --acento: #83c6ff;
  --barra: #000000;
  --lateral: #0a0a0a;
  --menu-borde: #2a2a2a;
  --menu-sec: #b8bec6;
  --base-chip: #262a30;
  --suave-luz: #a3c4e0;
  --suave: #8db2d2;
  --verde: #7ce5a3;
  --ambar: #ffd077;
  --rojo: #ff9b9e;
  --pag-alt: #0b1d35;
  --sombra-tarjeta: 0 1px 6px rgba(0, 0, 0, 0.22);
  --sombra-estado: 0 4px 12px rgba(0, 0, 0, 0.18);
  --estado-a1: 6%;
  --estado-a2: 34%;
  --estado-borde: 55%;
  color-scheme: dark;
}

/* ── 2. Base ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 17px/1.6 var(--fuente);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); color: var(--texto); margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--acento); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-grande { width: 28px; height: 28px; }
.contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--tarjeta); color: var(--texto); padding: 12px 16px; border-radius: 12px; }
.saltar:focus { top: 8px; }
section[id], article[id] { scroll-margin-top: 80px; }

/* Etiqueta de sección (guía §4): 12 px, 600, versalitas, tracking 0,15 em */
.seccion {
  font: 600 12px/1.4 var(--fuente);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--secundario);
}

/* ── 3. Barra ──────────────────────────────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 50; background: var(--barra); border-bottom: 0.5px solid var(--menu-borde); }
.barra-in { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.barra :focus-visible, .hero :focus-visible, .pag-oscura :focus-visible, .pie :focus-visible { outline-color: var(--celeste); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo img { display: block; height: 26px; width: auto; }
.logo-suite {
  font: 600 12px/1 var(--fuente);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--menu-sec);
  border-left: 1px solid var(--menu-borde);
  padding-left: 10px;
}
.panel { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: space-between; min-width: 0; }
.nav { display: flex; gap: 0; flex-wrap: nowrap; }
.nav a { color: var(--menu-sec); text-decoration: none; font-size: 14px; white-space: nowrap; padding: 10px 9px; border-radius: 12px; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--menu-texto); background: rgba(255, 255, 255, 0.06); }
.panel-ctl { display: flex; align-items: center; gap: 12px; }
.barra-acc { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.menu-btn { display: none; }

/* Idioma y tema: pastillas segmentadas; el tema va SOLO con íconos (regla del CEO 8-oct) */
.idioma, .tema { display: inline-flex; padding: 3px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--menu-borde); }
.idioma a, .tema button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 8px;
  border: 0; border-radius: 11px; background: transparent; color: var(--menu-sec);
  font: 600 13px/1 var(--fuente); letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
}
.idioma a:hover, .tema button:hover { color: var(--menu-texto); }
.idioma a[aria-current='true'], .tema button[aria-pressed='true'] { background: var(--accion); color: #fff; }

/* ── 4. Botones y pastillas ────────────────────────────────────────────────── */
.btn, .btn-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 20px; border-radius: 16px;
  font: 600 16px/1.2 var(--fuente); text-decoration: none; cursor: pointer; text-align: center;
}
.btn {
  background: linear-gradient(135deg, var(--suave-luz), var(--suave));
  color: var(--suave-texto);
  border: 1px solid rgba(16, 43, 70, 0.18);
}
.btn:hover { filter: brightness(1.04); }
.btn:active { opacity: 0.94; }
.btn:disabled { opacity: 0.65; cursor: default; }
.btn-sec { background: var(--tarjeta); color: var(--texto); border: 1px solid color-mix(in srgb, var(--borde-control) 65%, transparent); }
.btn-sec:hover { border-color: var(--borde-control); }
.btn-barra { min-height: 44px; padding: 6px 16px; font-size: 15px; }
.btn-grande { min-height: 52px; padding: 10px 24px; }

.chip {
  --c: var(--secundario);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px;
  font: 600 12px/1.2 var(--fuente); color: var(--c);
  background: linear-gradient(color-mix(in srgb, var(--c) 6%, transparent), color-mix(in srgb, var(--c) 6%, transparent)), var(--base-chip);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
}
.chip .ic { width: 14px; height: 14px; }
.chip-verde { --c: var(--verde); }
.chip-ambar { --c: var(--ambar); }
.chip-rojo { --c: var(--rojo); }
.chip-prox { border-style: dashed; }

/* Tarjeta base y tarjeta de estado (guía §4) */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-tarjeta); padding: 14px; }
.tarjeta-estado {
  --estado: var(--borde);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--estado) var(--estado-a1), transparent), color-mix(in srgb, var(--estado) var(--estado-a2), transparent)),
    var(--tarjeta);
  border: 1px solid color-mix(in srgb, var(--estado) var(--estado-borde), transparent);
  border-radius: 20px; box-shadow: var(--sombra-estado); padding: 14px;
}
.est-verde { --estado: var(--verde); }

/* ── 5. Portada ────────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, var(--lateral), var(--barra) 85%);
  color: var(--menu-texto);
  padding: clamp(40px, 7vw, 88px) 0 clamp(36px, 5vw, 56px);
  overflow: hidden;
}
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.eyebrow { font: 600 12px/1.4 var(--fuente); text-transform: uppercase; letter-spacing: 0.15em; color: var(--celeste); margin-bottom: 18px; }
.hero h1 { color: var(--menu-texto); font-size: clamp(38px, 5.6vw, 66px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 750; }
.hero .lead { margin-top: 22px; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: var(--menu-sec); max-width: 52ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sellos { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; color: var(--menu-sec); font-size: 14px; }
.sellos li { display: inline-flex; align-items: center; gap: 8px; }
.sellos .ic { color: var(--celeste); width: 18px; height: 18px; }
.hero-visual { position: relative; padding-bottom: 56px; }
.hv-efb { position: absolute; right: -6px; bottom: 0; width: 210px; }
.seccion-hero { color: var(--menu-sec); margin: clamp(36px, 5vw, 56px) 0 14px; }
.hero-iconos { display: flex; flex-wrap: wrap; gap: 14px clamp(14px, 2.4vw, 28px); }
.hero-iconos a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--menu-sec); font: 600 13px/1.2 var(--fuente); min-width: 64px; }
.hero-iconos a:hover { color: var(--menu-texto); }
.hero-iconos .ico { border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }

.ico { display: block; flex: none; border-radius: 22%; }
.ico-88 { width: 88px; height: 88px; border-radius: 20px; box-shadow: var(--sombra-tarjeta); border: 1px solid var(--borde); }
.ico-56 { width: 56px; height: 56px; }
.ico-48 { width: 48px; height: 48px; border-radius: 12px; }
.ico-44 { width: 44px; height: 44px; border-radius: 11px; }
.ico-40 { width: 40px; height: 40px; border-radius: 10px; }
.ico-36 { width: 36px; height: 36px; border-radius: 9px; }

/* ── 6. Secciones ──────────────────────────────────────────────────────────── */
.pag { padding: clamp(56px, 8vw, 104px) 0; }
.pag-tinta { background: var(--pag-alt); }
.pag-oscura { background: linear-gradient(160deg, var(--lateral), var(--barra)); color: var(--menu-texto); }
.pag-oscura h2, .pag-oscura h3 { color: var(--menu-texto); }
.pag-oscura .seccion { color: var(--celeste); }
.sec-cab { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-cab h2 { font-size: clamp(29px, 3.8vw, 44px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; margin-top: 12px; }
.sec-txt { margin-top: 16px; font-size: 18px; color: var(--secundario); max-width: 62ch; }
.pag-oscura .sec-txt { color: var(--menu-sec); }
.sub { font: 600 12px/1.4 var(--fuente); text-transform: uppercase; letter-spacing: 0.15em; color: var(--secundario); margin: clamp(40px, 6vw, 64px) 0 18px; }

/* ── 7. Productos ──────────────────────────────────────────────────────────── */
.producto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 56px) 0; border-top: 1px solid var(--borde); }
.producto:first-of-type { border-top: 0; padding-top: 0; }
.producto.inversa .p-texto { order: 2; }
.p-cab { display: flex; align-items: center; gap: 18px; }
.p-cab h3 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; font-weight: 700; margin-top: 4px; }
.p-lema { margin-top: 22px; font: 600 clamp(19px, 2vw, 22px)/1.35 var(--fuente-titulo); letter-spacing: -0.01em; color: var(--texto); }
.beneficios { margin-top: 20px; display: grid; gap: 12px; }
.beneficios li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; color: var(--secundario); font-size: 16px; line-height: 1.5; }
.beneficios .ic { color: var(--verde); margin-top: 2px; }
.nota { margin-top: 14px; font-size: 14px; color: var(--secundario); border-left: 3px solid var(--borde-control); padding-left: 12px; }
.p-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
.p-mock { margin: 0; }
.p-mock-caja { background: var(--instrumento); border: 1px solid var(--borde); border-radius: 24px; padding: clamp(14px, 3vw, 28px); min-height: 280px; display: flex; align-items: center; justify-content: center; }
.p-mock-caja > * { width: 100%; }
.p-mock figcaption { margin-top: 10px; font-size: 13px; color: var(--secundario); text-align: center; }

/* ── 8. Maquetas de interfaz (HTML/CSS; datos ficticios) ───────────────────── */
.mock { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra-estado); overflow: hidden; font-size: 12px; line-height: 1.35; color: var(--texto); text-align: left; }
.m-cab { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--instrumento); border-bottom: 1px solid var(--borde); }
.m-tit { font-weight: 600; font-size: 12px; }
.m-puntos { display: inline-flex; gap: 5px; }
.m-puntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--borde-control); opacity: 0.55; }
.m-cuerpo { padding: 14px; }
.m-fila { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.m-fila:last-of-type { border-bottom: 0; }
.m-fila-txt { display: grid; min-width: 0; }
.m-fila-txt b, .m-caso b, .p-doc b { font-weight: 600; font-size: 12px; }
.m-fila-txt span { font-size: 11px; color: var(--secundario); }
.m-fila small { font-size: 11px; font-weight: 600; color: var(--secundario); min-width: 50px; text-align: right; }
.m-prog { height: 6px; border-radius: 999px; background: var(--instrumento); overflow: hidden; }
.m-prog i { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.w20 { width: 20%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w80 { width: 80%; } .w100 { width: 100%; }
.m-cert { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px dashed var(--borde-control); background: var(--fondo); }
.m-cert-txt { display: grid; gap: 2px; }
.m-cert-txt span { font-size: 11px; color: var(--secundario); }
.m-qr { width: 52px; height: 52px; fill: var(--texto); flex: none; }

.m-dos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.m-caso { grid-template-columns: minmax(0, 1fr) auto; }
.m-lista { min-width: 0; }
.m-caso b { min-width: 0; }
.chip { white-space: nowrap; }
.m-lado { display: grid; gap: 8px; align-content: start; }
.m-lado .seccion { font-size: 10px; }
.m-matriz { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.m-matriz i { aspect-ratio: 1; border-radius: 4px; }
.mx-v { background: color-mix(in srgb, var(--verde) 38%, var(--tarjeta)); }
.mx-a { background: color-mix(in srgb, var(--ambar) 38%, var(--tarjeta)); }
.mx-r { background: color-mix(in srgb, var(--rojo) 42%, var(--tarjeta)); }
.m-barras { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.m-barras i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--suave-luz), var(--suave)); }
.h40 { height: 40%; } .h50 { height: 50%; } .h60 { height: 60%; } .h70 { height: 70%; } .h80 { height: 80%; }

.m-efb { display: flex; justify-content: center; }
.telefono { width: 224px; background: #0a0a0a; border-radius: 36px; padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border: 1px solid #2a2a2a; position: relative; }
.tel-isla { position: absolute; top: 15px; left: 50%; width: 62px; height: 16px; margin-left: -31px; border-radius: 999px; background: #000; z-index: 2; }
.tel-pantalla { background: var(--fondo); border-radius: 29px; padding: 38px 12px 14px; display: grid; gap: 8px; color: var(--texto); font-size: 12px; }
.tel-pantalla .seccion { font-size: 10px; margin-bottom: 2px; }
.p-doc { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 9px 10px; display: grid; gap: 6px; justify-items: start; }
.tel-pantalla .tarjeta-estado { padding: 10px 12px; border-radius: 16px; }
.tel-pantalla .tarjeta-estado b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--verde); margin-top: 2px; }
.tel-pantalla .tarjeta-estado .seccion { font-size: 9px; letter-spacing: 0.08em; }

.g-eje, .g-fila, .r-fila { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 7px; }
.g-nombre { font-size: 11px; font-weight: 600; color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-horas { display: grid; grid-template-columns: repeat(8, 1fr); font-size: 10px; color: var(--secundario); }
.g-pista { display: grid; grid-template-columns: repeat(8, 1fr); height: 24px; align-items: center; background-image: linear-gradient(90deg, var(--borde) 1px, transparent 1px); background-size: 12.5% 100%; border-radius: 6px; }
.vuelo { grid-row: 1; display: block; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--suave-luz), var(--suave)); border: 1px solid rgba(16, 43, 70, 0.18); margin: 0 2px; }
.vuelo.dem { background: linear-gradient(135deg, color-mix(in srgb, var(--ambar) 22%, var(--tarjeta)), color-mix(in srgb, var(--ambar) 45%, var(--tarjeta))); border-color: color-mix(in srgb, var(--ambar) 60%, transparent); }
.s1 { grid-column-start: 1; } .s2 { grid-column-start: 2; } .s3 { grid-column-start: 3; } .s4 { grid-column-start: 4; }
.s5 { grid-column-start: 5; } .s6 { grid-column-start: 6; } .s7 { grid-column-start: 7; }
.l2 { grid-column-end: span 2; } .l3 { grid-column-end: span 3; }
.g-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 11px; color: var(--secundario); }
.g-leyenda .vuelo { display: inline-block; width: 22px; height: 12px; margin: 0; }

.r-celdas { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.r-celdas i, .r-dias span { height: 22px; display: flex; align-items: center; justify-content: center; font: 600 10px/1 var(--fuente); border-radius: 6px; font-style: normal; }
.r-dias span { color: var(--secundario); height: auto; }
.r-v { background: color-mix(in srgb, var(--acento) 20%, var(--tarjeta)); color: var(--texto); }
.r-r { background: color-mix(in srgb, var(--secundario) 16%, var(--tarjeta)); color: var(--texto); }
.r-l { border: 1px dashed var(--borde-control); color: var(--secundario); }
.r-at { box-shadow: 0 0 0 2px var(--ambar); }
.r-ley { display: inline-flex; align-items: center; gap: 5px; }
.r-ley i { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font: 600 10px/1 var(--fuente); border-radius: 5px; font-style: normal; }

.k-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.k-col { background: var(--instrumento); border-radius: 12px; padding: 8px; display: grid; gap: 6px; align-content: start; min-height: 150px; }
.k-col .seccion { font-size: 9px; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 8px; display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: center; }
.k-av { width: 22px; height: 22px; border-radius: 50%; background: var(--accion); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 600 10px/1 var(--fuente); }
.k-lineas { display: grid; gap: 4px; }
.k-lineas i { display: block; height: 4px; border-radius: 4px; background: var(--borde); }
.k-sem { width: 8px; height: 8px; border-radius: 50%; }
.k-neutro { background: var(--borde-control); opacity: 0.5; }
.k-verde { background: var(--verde); }
.k-ambar { background: var(--ambar); }

.a-burbuja { border-radius: 14px; padding: 10px 12px; font-size: 12px; line-height: 1.45; max-width: 92%; }
.a-yo { margin-left: auto; background: linear-gradient(135deg, var(--suave-luz), var(--suave)); color: var(--suave-texto); border-bottom-right-radius: 4px; }
.a-ia { margin-top: 10px; background: var(--fondo); border: 1px solid var(--borde); border-bottom-left-radius: 4px; display: grid; gap: 10px; }
.a-fuentes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.a-abrir { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--acento); }
.a-abrir .ic { width: 14px; height: 14px; }
.a-campo { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--borde-control); border-radius: 12px; padding: 9px 12px; color: var(--secundario); background: var(--tarjeta); }
.a-campo .ic { color: var(--acento); }

/* ── 9. Ciclo del tripulante ───────────────────────────────────────────────── */
.etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: e; }
.etapa { position: relative; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra-estado); padding: 22px; display: grid; gap: 12px; align-content: start; }
.etapa:not(:last-child)::after {
  content: ''; position: absolute; top: 38px; right: -18px; width: 18px; height: 2px; background: var(--borde-control);
}
.etapa-n { width: 32px; height: 32px; border-radius: 50%; background: var(--accion); color: #fff; font: 700 15px/1 var(--fuente); display: inline-flex; align-items: center; justify-content: center; }
.etapa h3 { font-size: 22px; letter-spacing: -0.01em; }
.etapa-prods { display: flex; flex-wrap: wrap; gap: 10px; }
.etapa-prods li { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--fuente); }
.etapa p { color: var(--secundario); font-size: 15px; }
.etapa .chip { justify-self: start; white-space: normal; border-radius: 12px; }
.conexiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.conexion { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; padding: 20px; display: grid; gap: 10px; align-content: start; box-shadow: var(--sombra-tarjeta); }
.conexion-prox { border-style: dashed; border-color: var(--borde-control); box-shadow: none; background: transparent; }
.cx-iconos { display: flex; align-items: center; gap: 8px; color: var(--secundario); }
.cx-n { font: 600 13px/1 var(--fuente); color: var(--texto); }
.conexion h4 { font-size: 17px; letter-spacing: -0.01em; }
.conexion p { font-size: 15px; color: var(--secundario); }
.conexion .chip { justify-self: start; margin-top: 4px; }
.nota-act { margin-top: 22px; font-size: 15px; color: var(--secundario); }

/* ── 10. Por qué AMASFLY ───────────────────────────────────────────────────── */
.razones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.razon { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra-estado); padding: clamp(22px, 3vw, 32px); display: grid; gap: 10px; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; }
.razon-ic { grid-row: span 2; width: 52px; height: 52px; border-radius: 14px; background: var(--instrumento); color: var(--acento); display: inline-flex; align-items: center; justify-content: center; }
.razon h3 { font-size: 20px; letter-spacing: -0.01em; align-self: end; }
.razon p { color: var(--secundario); font-size: 16px; grid-column: 2; }

/* ── 11. Demo ──────────────────────────────────────────────────────────────── */
.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.demo-card { background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde); border-radius: 20px; padding: 22px; display: grid; gap: 14px; align-content: start; box-shadow: var(--sombra-estado); }
.demo-card h3 { color: var(--texto); font-size: 20px; }
.demo-card p { color: var(--secundario); font-size: 15px; }
.demo-cab { display: flex; align-items: center; gap: 14px; }
.host { font: 500 12.5px/1.3 var(--mono); color: var(--secundario) !important; }
.demo-card .p-pie { margin-top: 4px; }
.demo-pie { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-top: 24px; border-top: 0.5px solid var(--menu-borde); }
.demo-pie p { color: var(--menu-sec); max-width: 62ch; font-size: 16px; }

/* ── 12. Contacto ──────────────────────────────────────────────────────────── */
.contacto { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contacto h2 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -0.025em; line-height: 1.05; margin-top: 12px; }
.directo { margin-top: 22px; color: var(--secundario); font-size: 16px; }
.form { padding: clamp(20px, 3vw, 32px); border-radius: 20px; display: grid; gap: 16px; box-shadow: var(--sombra-estado); position: relative; }
.campo { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.campo label, .campo legend { font: 600 14px/1.3 var(--fuente); color: var(--texto); padding: 0; }
.opc { font-weight: 400; color: var(--secundario); }
input[type='text'], input[type='email'], textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px;
  background: var(--tarjeta); color: var(--texto);
  border: 1px solid var(--borde-control); font: 400 16px/1.4 var(--fuente);
}
textarea { resize: vertical; min-height: 110px; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--rojo); }
.chks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chk { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--borde-control); background: var(--tarjeta); font: 600 14px/1 var(--fuente); cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--accion); margin: 0; }
.chk:has(input:checked) { background: color-mix(in srgb, var(--acento) 12%, var(--tarjeta)); border-color: var(--acento); }
.chk:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-estado { font-weight: 600; font-size: 15px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borde); }
.form-estado[data-tipo='ok'] { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 40%, transparent); background: color-mix(in srgb, var(--verde) 8%, var(--tarjeta)); }
.form-estado[data-tipo='error'] { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 40%, transparent); background: color-mix(in srgb, var(--rojo) 8%, var(--tarjeta)); }
.form-estado[hidden] { display: none; }
/* Sin JS el servidor redirige a /#enviado (guardado y confirmado) o /#no-enviado y el mensaje aparece por :target */
.enviado, .no-enviado { display: none; }
.enviado:target, .no-enviado:target { display: block; }
.form-priv { font-size: 13.5px; color: var(--secundario); }

/* ── 13. Pie ───────────────────────────────────────────────────────────────── */
.pie { background: var(--barra); color: var(--menu-sec); padding: clamp(40px, 6vw, 64px) 0 36px; border-top: 0.5px solid var(--menu-borde); font-size: 14.5px; line-height: 1.7; }
.pie a { color: var(--menu-texto); }
.pie-top { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.pie-top img { height: 26px; width: auto; }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.fcol b { color: var(--menu-texto); }
.fh { display: block; font: 600 12px/1.4 var(--fuente); letter-spacing: 0.15em; color: var(--celeste); margin-bottom: 6px; }
.flegal { margin-top: 34px; padding-top: 22px; border-top: 0.5px solid var(--menu-borde); display: grid; gap: 14px; }
.flegal-enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.flegal p { max-width: 86ch; font-size: 13px; line-height: 1.6; }
.derechos { color: var(--menu-sec); }

/* ── 14. 404 ───────────────────────────────────────────────────────────────── */
.e404 { min-height: 100vh; display: grid; align-content: center; justify-items: start; gap: 18px; padding: 24px clamp(16px, 8vw, 96px); background: var(--barra); color: var(--menu-texto); }
.e404 h1 { color: var(--menu-texto); font-size: clamp(30px, 5vw, 52px); letter-spacing: -0.02em; }
.e404 .seccion { color: var(--celeste); }
.e404 img { height: 39px; width: auto; }

/* ── 15. Ajustes por ancho ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapa:not(:last-child)::after { display: none; }
}
@media (max-width: 1279px) {
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid var(--menu-borde); color: var(--menu-texto); cursor: pointer;
  }
  .js .panel {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--barra); border-bottom: 0.5px solid var(--menu-borde); padding: 12px clamp(16px, 4vw, 32px) 20px;
  }
  .js .panel[data-abierto='true'] { display: flex; }
  .nav { flex-direction: column; gap: 0; }
  .nav a { padding: 12px 8px; font-size: 16px; border-bottom: 0.5px solid var(--menu-borde); border-radius: 0; }
  .panel-ctl { justify-content: space-between; }
}
@media (max-width: 980px) {
  .hero-in, .contacto { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 560px; min-height: 430px; margin-top: 44px; }
  .producto { grid-template-columns: minmax(0, 1fr); }
  .producto.inversa .p-texto { order: 0; }
  .razones { grid-template-columns: minmax(0, 1fr); }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .fgrid .fcol:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .btn-barra { display: none; }
  .barra-in { min-height: 60px; }
  .etapas { grid-template-columns: minmax(0, 1fr); }
  .conexiones, .demo-grid { grid-template-columns: minmax(0, 1fr); }
  .hv-efb { width: 176px; right: 0; }
  .hero-visual { min-height: 410px; }
  .p-mock-caja { padding: 10px; }
  .p-cab .ico-88 { width: 72px; height: 72px; }
  .k-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-col4 { display: none; }
  .m-dos { grid-template-columns: minmax(0, 1fr); }
  .m-fila { grid-template-columns: minmax(0, 1fr) 56px auto; }
  .razon { grid-template-columns: minmax(0, 1fr); }
  .razon-ic { grid-row: auto; }
  .razon p { grid-column: auto; }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .acciones .btn, .acciones .btn-sec { width: 100%; }
  .p-pie .btn-sec { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Propuesta editorial: portada, explorador y recorrido compacto. */
.barra-in { min-height: 56px; }
.idioma a, .tema button { min-width: 44px; min-height: 44px; }
.hero { padding: 72px 0 32px; }
.hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; }
.hero h1 { font-size: clamp(44px, 5.3vw, 76px); letter-spacing: -.055em; line-height: 1.02; }
.hero-visual { padding: 48px 0 80px; }
.hv-ops { margin-right: 28px; box-shadow: 0 24px 64px #0005; border-radius: 16px; }
.hv-ops .m-cuerpo { padding: 24px 18px; }
.hv-efb { width: 185px; right: -8px; bottom: -26px; }
.hero .sellos { font-size: 13px; gap: 8px 16px; }
.seccion-hero { margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--menu-borde); }
.hero-iconos { justify-content: space-between; }
.hero-iconos a { flex-direction: row; min-height: 48px; gap: 10px; }
.hero-iconos .ico { width: 36px; height: 36px; border-radius: 9px; }
.pag { padding: 64px 0; }
.sec-cab { margin-bottom: 32px; }
.sec-cab h2 { font-size: clamp(30px, 3.3vw, 46px); letter-spacing: -.04em; }
.producto-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
.producto-tabs a { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 64px; padding: 8px; border: 1px solid var(--borde-control); border-radius: 14px; text-decoration: none; color: var(--texto); font-weight: 600; background: var(--tarjeta); }
.producto-tabs a[aria-selected='true'] { background: var(--accion); color: white; border-color: var(--accion); }
.producto[hidden] { display: none; }
.producto, .producto:first-of-type { padding: 30px; border: 1px solid var(--borde); border-radius: 20px; background: var(--tarjeta); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; box-shadow: var(--sombra-estado); }
.producto + .producto { margin-top: 24px; }
.js .producto + .producto { margin-top: 0; }
.p-cab .ico { width: 56px; height: 56px; border-radius: 14px; }
.p-cab h3 { font-size: 28px; }
.p-lema { font-size: 20px; }
.p-mock-caja { min-height: 380px; padding: 24px; background: linear-gradient(145deg, var(--fondo), var(--instrumento)); border-radius: 14px; }
.p-mock .mock { box-shadow: 0 16px 32px #0002; }
.p-mock .m-cuerpo { padding: 22px 18px; }
.p-mock .m-fila { padding-top: 16px; padding-bottom: 16px; }
.beneficios .ic { color: var(--acento); }
.etapas { gap: 0; }
.etapa { border-radius: 0; box-shadow: none; background: transparent; border: 0; border-top: 2px solid var(--borde-control); padding: 24px; position: relative; }
.etapa-n { margin-top: -41px; border: 5px solid var(--pag-alt); box-sizing: content-box; }
.etapa:not(:last-child)::after { display: block; content: '→'; position: absolute; right: 16px; top: 18px; color: var(--acento); font-size: 24px; background: none; }
.integraciones { margin-top: 24px; border-top: 1px solid var(--borde-control); border-bottom: 1px solid var(--borde-control); }
.integraciones summary { cursor: pointer; min-height: 56px; padding: 16px 0; font-weight: 600; }
.integraciones summary span { float: right; }
.integraciones .conexiones { padding-bottom: 24px; }
.razones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.razon { display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
.razon h3 { align-self: auto; font-size: 19px; }
.demo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.demo-card { padding: 18px; }
.host { overflow-wrap: anywhere; }
.form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form > :not(.campo), .form .campo:nth-of-type(n+5) { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-txt { max-width: 700px; }
  .hero-visual { max-width: 720px; width: 100%; min-height: 0; margin: 0; padding: 0 40px 72px 0; }
  .hv-efb { bottom: 0; right: 0; }
  .producto, .producto:first-of-type { grid-template-columns: 1fr; }
  .producto-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .razones, .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapa { margin-top: 24px; }
}
@media (max-width: 560px) {
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 48px; }
  .hero-visual { padding: 0 0 60px; }
  .hv-ops { margin: 0; }
  .hv-efb { display: none; }
  .hero-iconos { justify-content: start; gap: 12px 22px; }
  .hero-iconos a { min-width: 94px; }
  .seccion-hero { margin-top: 0; }
  .pag { padding: 44px 0; }
  .producto-tabs { gap: 6px; }
  .producto-tabs a { flex-direction: column; font-size: 14px; gap: 6px; }
  .producto, .producto:first-of-type { padding: 18px; gap: 24px; }
  .p-cab { gap: 12px; }
  .p-cab h3 { font-size: 24px; }
  .p-mock-caja { padding: 10px; min-height: 280px; }
  .p-mock .m-cuerpo { padding: 12px; }
  .etapas { grid-template-columns: 1fr; }
  .etapa { border-top: 0; border-left: 2px solid var(--borde-control); margin: 0 0 0 18px; padding: 0 0 28px 30px; }
  .etapa-n { position: absolute; left: -23px; top: 0; margin: 0; }
  .etapa:not(:last-child)::after { content: '↓'; top: auto; bottom: 8px; left: -9px; right: auto; font-size: 18px; background: var(--pag-alt); }
  .razones, .demo-grid, .form { grid-template-columns: 1fr; }
  .razon { padding-bottom: 20px; border-bottom: 1px solid var(--borde); }
  .demo-card p, .conexion p, .nota, .nota-act { font-size: 16px; }
}
.form .campo-chk { grid-column: 1 / -1; }
.etapa:not(:last-child)::after { width: auto; height: auto; }
@media (min-width: 981px) and (max-width: 1100px) {
  .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero-visual { padding-bottom: 12px; }
  .p-mock, .p-texto, .mock, .m-cuerpo { min-width: 0; }
  .producto .btn-sec { overflow-wrap: anywhere; }
}