/* Generado por site/tools/armar-flota-assets.mjs: no editar a mano. Fuentes: .cursor/docs/marca/manual/tokens.css, .cursor/docs/marca/manual/firma.css, .cursor/docs/rediseno-fichas-flota/ficha-capa.css, .cursor/docs/rediseno-fichas-flota/flota-capa.css */

/* ===== .cursor/docs/marca/manual/tokens.css ===== */
/*
  Argentina Fly · tokens del manual de diseño (v1, 31/10/2026)
  Fuente: css/home-v3.css, css/cotizador.css, css/route-select.css, css/header.css, css/af-footer.css, css/wa-fab.css.
  Cada token nuevo (--af-*) vale lo mismo que el --hv-* / --rs-* / --ct-* de producción que figura al lado.
  La base Astro carga este archivo primero; los CSS actuales pueden pasar a leer estos nombres sin cambio visible.
*/

:root {
  /* Superficies */
  --af-white: #ffffff;              /* --hv-white · fondo principal, listados y tablas */
  --af-paper: #faf9f7;              /* --hv-paper · piedra muy claro: paneles que acompañan */
  --af-stone: #f5f4f2;              /* --hv-light / --hv-mist · piedra: una sección de ritmo por página */
  --af-cell: #ebe9e5;               /* --rs-cell · celdas y hover de campos */
  --af-night: #1f2734;              /* --af-foot-bg · solo el pie */

  /* Texto */
  --af-ink: #161d29;                /* --hv-ink · títulos, texto fuerte, botón primario (16,9:1) */
  --af-ink-hover: #253043;          /* hover del botón primario */
  --af-body: #3b414c;               /* --hv-body · párrafos (10,3:1) */
  --af-gray: #5c6168;               /* --hv-gray · secundario (6,2:1) */
  --af-mark: #8a8f96;               /* --ct-gray-mark · solo marcas y bordes, nunca texto (3,3:1) */

  /* Acento */
  --af-gold: #a08259;               /* --hv-gold · filetes, íconos, foco. No es color de texto chico (3,6:1) */
  --af-gold-text: #866b46;          /* --hv-gold-text · rótulos y enlaces dorados sobre claro (5,0:1) */
  --af-gold-fill: #b49a78;          /* sin uso desde el 01/11/2026 (D2: «Detalle» pasó a enlace de texto bronce) */
  --af-gold-soft: #c2a67e;          /* --af-foot-gold-text · dorado sobre pizarra o foto oscura (6,5:1) */
  --af-gold-line: rgba(156, 131, 96, 0.55);   /* borde de botón línea y subrayado de enlace */
  --af-gold-line-dark: rgba(214, 195, 165, 0.7); /* filetes sobre foto */
  --af-line: #dfddd9;               /* --hv-line · divisores y bordes de campo */

  /* Estado */
  --af-error: #a8452f;              /* --rs-error (5,9:1) */
  --af-ok: #2e7d4f;                 /* cotizador (5,1:1) */
  --af-selection: rgba(180, 154, 120, 0.32);

  /* Velos de foto: rgba(var(--af-veil), alfa) */
  --af-veil: 12, 16, 24;

  /* Familias */
  --af-serif: 'Cormorant Garamond', Georgia, serif;   /* titulares, títulos, nombres, cifras */
  --af-caps: 'Jost', 'Segoe UI', sans-serif;          /* solo MAYÚSCULAS espaciadas */
  --af-sans: 'Roboto', 'Segoe UI', system-ui, sans-serif; /* todo lo que se lee */

  /* Escala serif (Cormorant 500, cifras alineadas) */
  --af-fs-display: clamp(3.4rem, 7.4vw, 7.25rem);    /* .hv-headline · 54–116 px · solo titular del hero */
  --af-fs-t1: clamp(2.6rem, 4.6vw, 4.6rem);          /* .hv-title · 42–74 px · h1 interior, cierre de contacto */
  --af-fs-t2: clamp(2.4rem, 4vw, 3.9rem);            /* .hv-title-mid · 38–62 px · secciones principales */
  --af-fs-t3: clamp(2.2rem, 3.4vw, 3.25rem);         /* .hv-title-sec · 35–52 px · resto de secciones */
  --af-fs-t4: clamp(1.75rem, 2.4vw, 2.25rem);        /* 28–36 px · h3 de escena, nombre de ciudad en foto */
  --af-fs-name: 23px;                                /* .ct-row-n b · nombre en fila (600) */
  --af-fs-price: 24px;                               /* .ct-row-p · precio en fila */
  --af-fs-figure: 20px;                              /* .ct-row-t · tiempo, cifra secundaria (400) */
  --af-fs-stat: clamp(48px, 4.4vw, 72px);            /* .hv-mf-nums dd · cifra de bloque de datos */

  /* Escala Jost (500, mayúsculas) */
  --af-fs-caps-lg: 13px;    /* botón grande, cifras del hero */
  --af-fs-caps: 12px;       /* enlace, rótulo de sección, botón compacto */
  --af-fs-caps-sm: 11px;    /* etiqueta de dato, kicker sobre foto */
  --af-ls-wordmark: 0.24em; /* logo y enlace de texto */
  --af-ls-button: 0.2em;
  --af-ls-label: 0.16em;
  --af-ls-tight: -0.025em;  /* serif grande */

  /* Escala Roboto */
  --af-fs-lead: clamp(17px, 1.25vw, 19px);   /* .hv-lead · línea 1,65 */
  --af-fs-body: 16px;                        /* lectura · línea 1,65 */
  --af-fs-text: 15px;                        /* texto de sección y respuestas · línea 1,65–1,7 */
  --af-fs-small: 14px;                       /* datos, notas · línea 1,5 */
  --af-fs-micro: 12.5px;                     /* leyendas bajo un precio · línea 1,3 */

  /* Espacio (base 4) */
  --af-s-1: 4px;
  --af-s-2: 8px;
  --af-s-3: 12px;
  --af-s-4: 16px;
  --af-s-5: 20px;
  --af-s-6: 24px;
  --af-s-7: 28px;
  --af-s-8: 32px;
  --af-s-10: 40px;
  --af-s-12: 48px;
  --af-s-14: 56px;
  --af-s-16: 64px;
  --af-sec: clamp(64px, 6.5vw, 104px);       /* --hv-sec · aire arriba y abajo de cada sección */
  --af-head: clamp(32px, 3.4vw, 52px);       /* título de sección → contenido */
  --af-gutter: clamp(20px, 5.2vw, 80px);     /* --hv-gutter · margen lateral */
  --af-wrap: 1520px;                         /* .hv-wrap · ancho máximo */
  --af-measure: 64ch;                        /* ancho máximo de un párrafo */
  --af-header-h: 96px;                       /* alto del header fijo (--rs-offset-top) */

  /* Radios */
  --af-r-lg: 16px;          /* fotos, paneles, escenas */
  --af-r-md: 12px;          /* botones, campos, chips, menús */
  --af-r-sm: 8px;           /* elementos dentro de un radio 12 con 4 px de aire */
  --af-r-pill: 999px;       /* solo la píldora blanca sobre foto y los contadores */

  /* Sombras: casi no hay; solo lo que flota */
  --af-shadow-float: 0 12px 32px -8px rgba(14, 22, 34, 0.45); /* botón de WhatsApp */
  --af-shadow-pop: 0 8px 22px -12px rgba(22, 29, 41, 0.5);    /* menús y bandejas */

  /* Movimiento */
  --af-ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* --hv-ease-out · por defecto */
  --af-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* cambios de forma (acordeón) */
  --af-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);   /* hojas que suben en el celular */
  --af-ease-flick: linear(0, 0.079, 0.248, 0.436, 0.608, 0.747, 0.851, 0.922, 0.968, 0.995, 1.009, 1.014, 1.015, 1.013, 1.01, 1.008, 1.005, 1.003, 1.002, 1.001, 1); /* resorte (amortiguación 0,8), 500 ms, solo después de un tirón */
  --af-d-press: 160ms;      /* scale(0.97) al apretar */
  --af-d-color: 200ms;      /* color, fondo, borde */
  --af-d-nudge: 220ms;      /* flecha que se corre 4 px */
  --af-d-panel: 380ms;      /* paneles, menús, respuestas */
  --af-d-shape: 620ms;      /* acordeón de fotos */
  --af-d-photo: 700ms;      /* zoom de foto en hover */
  --af-d-reveal: 760ms;     /* entrada al hacer scroll */
  --af-stagger: 90ms;       /* retraso entre hermanos, máximo 5 */
}

/* Cortes (las media queries no leen variables; usar estos números):
   ≤ 599  celular
   ≤ 767  celular grande · una columna
   ≤ 1100 tablet · dos columnas; el texto sobre foto pasa a velo vertical
   ≥ 1101 escritorio
   ≥ 1520 el contenido deja de crecer
   El header nuevo usa menú en panel en todos los anchos; no hay corte de menú. */


/* ===== .cursor/docs/marca/manual/firma.css ===== */
/*
  Argentina Fly · el trazo de ruta y los nombres de lugar (v2, 31/10/2026)
  Una línea limpia de origen a destino con los nombres y los códigos IATA. Sin instrumentos ni adornos.
  Medidas en MANUAL.md § El trazo de ruta.
*/

.af-trazo {
  --p: 1;
  --c: var(--af-ink);
  --gold: var(--af-gold);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(56px, 1fr) minmax(0, auto);
  align-items: center;
  column-gap: 18px;
  color: var(--c);
}
.af-dark .af-trazo,
.af-trazo.af-dark {
  --c: #fff;
  --gold: var(--af-gold-soft);
}
.af-trazo-pt {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.af-trazo-pt b {
  font: 500 var(--trazo-name, clamp(22px, 2.2vw, 30px))/1.1 var(--af-serif);
  color: var(--c);
  overflow-wrap: break-word;
}
.af-trazo-pt i {
  font: 500 12px/1 var(--af-caps);
  font-style: normal;
  letter-spacing: 0.16em;
  color: var(--af-gold-text);
}
.af-dark .af-trazo-pt i {
  color: var(--af-gold-soft);
}
.af-trazo-pt.is-d {
  text-align: right;
  justify-items: end;
}
.af-trazo-tr {
  position: relative;
  height: 12px;
}
.af-trazo-fl {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}
.af-trazo-o,
.af-trazo-d {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  translate: 0 -50%;
}
.af-trazo-o {
  left: 0;
  border: 1.5px solid currentColor;
}
.af-trazo-d {
  right: 0;
  background: var(--gold);
}

.af-mini {
  --c: var(--af-ink);
  display: inline-grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--c);
  font: 500 12px/1 var(--af-caps);
  letter-spacing: 0.16em;
}
.af-mini > span {
  position: relative;
  height: 9px;
}
.af-mini > span::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.af-mini > span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--af-gold);
}
.af-mini > span i {
  position: absolute;
  left: 0;
  top: 1.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  box-sizing: border-box;
}
.af-mini b:last-child {
  color: var(--af-gold-text);
}
.af-dark .af-mini {
  --c: #fff;
}
.af-dark .af-mini b:last-child {
  color: var(--af-gold-soft);
}

@media (max-width: 767px) {
  .af-trazo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "o d" "tr tr";
    row-gap: 12px;
  }
  .af-trazo > .af-trazo-pt:first-child { grid-area: o; }
  .af-trazo > .af-trazo-pt.is-d { grid-area: d; }
  .af-trazo > .af-trazo-tr { grid-area: tr; }
}

@media (prefers-reduced-motion: no-preference) {
  .af-trazo.is-live .af-trazo-fl {
    transition: transform 700ms var(--af-ease-out);
  }
}

/* Nombre de lugar: nunca se parte al final de una línea (San Carlos de Bariloche va entero) */
.af-lugar {
  white-space: nowrap;
}



/* ===== .cursor/docs/rediseno-fichas-flota/ficha-capa.css ===== */
/* Ficha de aeronave (Astro, site/src/components/aeronave/AircraftPage.astro). Capa propia sobre tokens.css y firma.css del manual;
   la arma site/tools/armar-ficha-assets.mjs en /css/ficha.css. Patrón «portada de aeronave» (MANUAL.md § 11) con la forma de la
   dirección A elegida el 31/10/2026. Cortes del manual: 599 · 767 · 1100 · tope 1520. */

/* styles-min.css deja el body en inline-block: con el carrusel, la página se ensanchaba al ancho de todas las fotos */
body.ae {
  display: block;
  margin: 0;
  background: var(--af-white);
}

body.ae .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

body.ae ::selection {
  background: var(--af-selection);
  color: var(--af-ink);
}

.ae *,
.ae *::before,
.ae *::after {
  box-sizing: border-box;
}

/* Reset sin especificidad (:where): los márgenes de cada bloque (.ae-h1, .ae-lead…) mandan */
:where(.ae) :where(h1, h2, h3, p, figure, dl, dd, ol, ul) {
  margin: 0;
}

:where(.ae) :where(ol, ul) {
  padding: 0;
  list-style: none;
}

:where(.ae) img {
  display: block;
  max-width: 100%;
}

.ae a:focus-visible,
.ae button:focus-visible {
  outline: 2px solid var(--af-gold);
  outline-offset: 3px;
}

.ae .hv-title-sec {
  font-variant-numeric: lining-nums;
}

/* Portada a sangre, como las /dest/ (usuario, 02/11/2026: «el hero es con foto completa de fondo»). Hasta 1100 px, la foto
   arriba y el texto debajo sobre blanco; desde 1101 px, la foto ocupa la portada y el texto va sobre un velo pegado al texto */

.ae-hero {
  position: relative;
  background: var(--af-white);
}

.ae-hero-media {
  position: relative;
}

.ae-hero-media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 140px;
  background: linear-gradient(180deg, rgba(var(--af-veil), 0.55), rgba(var(--af-veil), 0));
  pointer-events: none;
}

/* Hasta 1100 px, la foto entera (sin recorte): el avión no pierde nariz ni cola (manual § 9; portada A, usuario, 05/11/2026) */
.ae-hero-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50% 60%;
  background: var(--af-cell);
}

.ae-hero-in {
  padding-top: 24px;
  padding-bottom: 40px;
}

.ae-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font: 400 13px/1.3 var(--af-sans);
  color: var(--af-gray);
}

.ae-crumb li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--af-mark);
}

.ae-crumb a,
.ae-crumb a:link,
.ae-crumb a:visited {
  color: inherit;
  text-decoration: none;
}

/* Área de toque de 35 px sin mover el texto (las migas medían 15 px de alto; revisión ui-ux-pro-max) */
.ae-crumb a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
}

.ae-crumb [aria-current] {
  color: var(--af-ink);
}

.ae-h1 {
  margin-top: 14px;
  padding-bottom: 0.08em;
  font: 500 clamp(44px, 12vw, 64px)/1 var(--af-serif);
  letter-spacing: -0.025em;
  font-variant-numeric: lining-nums;
  color: var(--af-ink);
  text-wrap: balance;
}

.ae-lead {
  margin-top: 14px;
  max-width: 44ch;
  font: 400 17px/1.5 var(--af-sans);
  color: var(--af-body);
  text-wrap: pretty;
}

.ae-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 28px;
}

.ae .ae-btn {
  letter-spacing: 0.1em;
}

.ae-link,
.ae-link:link,
.ae-link:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 var(--af-fs-caps)/1 var(--af-caps);
  letter-spacing: var(--af-ls-label);
  text-transform: uppercase;
  color: var(--af-ink);
  text-decoration: none;
  background: linear-gradient(var(--af-gold), var(--af-gold)) left calc(50% + 0.95em) / 100% 1px no-repeat;
}

/* Cuatro datos, en una banda piedra debajo de la portada */

.ae-datos-band {
  background: var(--af-stone);
  padding: 32px 0 36px;
}

.ae-datos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 48px);
}

.ae-datos div {
  padding-top: 18px;
  border-top: 1px solid var(--af-line);
}

.ae-datos dt {
  font: 500 var(--af-fs-caps-sm)/1.2 var(--af-caps);
  letter-spacing: var(--af-ls-label);
  text-transform: uppercase;
  color: var(--af-gray);
}

.ae-datos dd {
  margin-top: 10px;
  font: 500 clamp(26px, 2.4vw, 38px)/1.1 var(--af-serif);
  font-variant-numeric: lining-nums;
  color: var(--af-ink);
}

@media (min-width: 768px) {
  .ae-h1 {
    font-size: clamp(56px, 7vw, 80px);
  }

  .ae-lead {
    font-size: 18px;
  }

  .ae-datos-band {
    padding: 40px 0 48px;
  }
}

@media (min-width: 1101px) {
  .ae-hero {
    display: grid;
    align-items: end;
    min-height: min(100svh, 920px);
    overflow: clip;
  }

  .ae-hero-media {
    position: absolute;
    inset: 0;
  }

  .ae-hero-media::after {
    display: none;
  }

  .ae-hero-media img {
    height: 100%;
  }

  .ae-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(var(--af-veil), 0.45) 0%, rgba(var(--af-veil), 0) 22%),
      linear-gradient(0deg, rgba(var(--af-veil), 0.35) 0%, rgba(var(--af-veil), 0) 40%);
    pointer-events: none;
  }

  .ae-hero-in {
    position: relative;
    z-index: 1;
    isolation: isolate;
    padding-top: calc(var(--af-header-h) + 40px);
    padding-bottom: 64px;
  }

  .ae-hero-in::before {
    content: "";
    position: absolute;
    z-index: -1;
    /* Desde el borde de la pantalla, no desde el de la retícula: a más de 1520 px el velo dejaba un corte vertical */
    left: calc(-1 * max(0px, (100vw - 1520px) / 2));
    top: -150px;
    bottom: 0;
    width: calc(min(1180px, 88vw) + max(0px, (100vw - 1520px) / 2));
    /* Velo suave (usuario, 06/11/2026: «¿qué es ese efecto mega exagerado del sombreado detrás del título?»): la lectura la da
       la foto (cielo más azul en las aire-aire) y una sombra leve en el texto, no una mancha */
    background: radial-gradient(ellipse 64% 62% at 30% 64%, rgba(var(--af-veil), 0.4) 0%, rgba(var(--af-veil), 0.26) 46%, rgba(var(--af-veil), 0.08) 76%, rgba(var(--af-veil), 0) 100%);
    pointer-events: none;
  }

  .ae-hero-in > * {
    max-width: 620px;
  }

  .ae-h1 {
    font-size: clamp(64px, 6vw, 96px);
    color: #fff;
  }

  .ae-crumb,
  .ae-crumb [aria-current] {
    color: rgba(255, 255, 255, 0.9);
  }

  .ae-crumb li + li::before {
    color: rgba(255, 255, 255, 0.55);
  }

  .ae-lead {
    color: #fff;
  }

  .ae-hero .ae-btn.hv-btn-ink {
    background: #fff;
    border-color: #fff;
    color: var(--af-ink);
  }

  .ae-hero .ae-link,
  .ae-hero .ae-link:link,
  .ae-hero .ae-link:visited {
    color: #fff;
    background-image: linear-gradient(var(--af-gold-soft), var(--af-gold-soft));
  }

  .ae-hero a:focus-visible {
    outline-color: var(--af-gold-soft);
  }
}

/* Botón de la portada: bronce al pasar el mouse y con foco, como el de /dest/ */

.ae .ae-btn.hv-btn-ink:focus-visible {
  background: var(--af-gold-text);
  border-color: var(--af-gold-text);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .ae .ae-btn.hv-btn-ink:hover {
    background: var(--af-gold-text);
    border-color: var(--af-gold-text);
    color: #fff;
  }
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .ae-hero .ae-link:hover {
    color: var(--af-gold-soft);
  }
}

/* Encabezado de sección: título, filete debajo y bajada (componente del manual) */

.ae-g2 {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}

.ae-head .hv-rule-under {
  margin-top: 24px;
}

.ae-head-p {
  margin-top: 24px;
  max-width: 60ch;
  font: 400 16px/1.6 var(--af-sans);
  color: var(--af-body);
  text-wrap: pretty;
}

.ae-prose p {
  max-width: var(--af-measure);
  font: 300 clamp(17px, 1.2vw, 18px)/1.7 var(--af-sans);
  color: var(--af-body);
  text-wrap: pretty;
}

.ae-prose p + p {
  margin-top: 1em;
}

/* Galería: carrusel con flechas y contador (manual § 1.1); la siguiente foto asoma */

.ae-gal {
  background: var(--af-paper);
}

.ae-gal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 44px);
}

/* Del título al filete, 24 px como en la ficha técnica y en alcance (revisión de skills, 06/11/2026) */
.ae-gal-head .hv-rule-under {
  margin-top: 24px;
}

.ae-gal-ctl {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ae-gal-n {
  margin-right: 8px;
  font: 400 14px/1 var(--af-sans);
  font-variant-numeric: tabular-nums;
  color: var(--af-gray);
}

.ae-gal-list {
  --fa-edge: max(var(--af-gutter), calc((100% - var(--af-wrap)) / 2 + var(--af-gutter)));
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--fa-edge);
  padding: 0 var(--fa-edge) 4px;
  scrollbar-width: none;
}

.ae-gal-list::-webkit-scrollbar {
  display: none;
}

.ae-gal-list li {
  flex: none;
  scroll-snap-align: start;
}

/* Arrastre con el mouse (ficha-capa.js): mano abierta y, al arrastrar, cerrada; sin snap ni selección hasta soltar */
@media (hover: hover) and (pointer: fine) {
  .ae-gal-list,
  .ae-gal-list .ae-gp {
    cursor: grab;
  }
}

.ae-gal-list.is-drag {
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.ae-gal-list.is-drag,
.ae-gal-list.is-drag .ae-gp {
  cursor: grabbing;
}

/* Mientras se arrastra no hay zoom de hover: la foto bajo el cursor se agrandaba en medio del gesto (revisión emil-design-eng) */
.ae-gal-list.is-drag .ae-gp img {
  transform: none;
  transition-duration: 200ms;
}

.ae-gp {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--af-cell);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.ae-gp img {
  height: clamp(260px, 30vw, 440px);
  width: auto;
  max-width: none;
  transition: transform var(--af-d-photo, 800ms) var(--af-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .ae-gp:hover img {
    transform: scale(1.035);
  }

  .ae-link:hover {
    color: var(--af-gold-text);
  }

  .ae-rt-d:hover b {
    text-decoration-color: var(--af-gold);
  }

  .ae-rt-cta:hover {
    background: var(--af-ink);
    border-color: var(--af-ink);
    color: var(--af-white);
  }
}

/* Fotos dentro de las secciones sin redondeo (usuario, 02/11/2026: «solo va bien en algunos lugares»): galería, interior y
   visor con border-radius 0; los botones y piezas chicas de interfaz siguen redondeados */

/* Cabina (usuario, 05/11/2026: «pondria los textos de distribucion a la derecha del plano de cabina, y sacaria la foto»): desde
   1101 px el plano a la izquierda y la distribución a la derecha; hasta 1100 px el plano arriba y la distribución debajo. Desde
   el 05/11/2026 es siempre el recorte de la cabina (-cabina.svg): con el avión entero los números de butaca medían 9 px. Planos 2026-11, CABIN_DIAGRAM_RULES.mdc */

.ae-cab {
  background: var(--af-white);
}

.ae-cab-g {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}

.ae-plan picture {
  display: block;
}

.ae-plan img {
  width: 100%;
  height: auto;
}

@media (min-width: 1101px) {
  .ae-cab-g {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(48px, 5vw, 96px);
    align-items: center;
  }
}

.ae-cab-t {
  margin-top: 28px;
  font: 500 var(--af-fs-t4)/1.1 var(--af-serif);
  letter-spacing: -0.015em;
  color: var(--af-ink);
}

.ae-zonas {
  margin-top: 16px;
}

.ae-zonas li {
  padding: 16px 0;
  border-top: 1px solid var(--af-line);
}

.ae-zonas li:last-child {
  border-bottom: 1px solid var(--af-line);
}

.ae-zonas strong {
  display: block;
  font: 500 16px/1.4 var(--af-sans);
  color: var(--af-ink);
}

.ae-zonas span {
  display: block;
  margin-top: 4px;
  max-width: var(--af-measure);
  font: 300 15.5px/1.6 var(--af-sans);
  color: var(--af-body);
}

/* Ficha técnica */

.ae-tec {
  background: var(--af-paper);
}

.ae-spec-g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 64px) clamp(28px, 5vw, 96px);
  margin-top: var(--af-head);
}

.ae-spec-h {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--af-ink);
  font: 500 var(--af-fs-t4)/1.1 var(--af-serif);
  letter-spacing: -0.015em;
  color: var(--af-ink);
}

.ae-spec div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0 0;
}

.ae-spec dt {
  font: 400 16px/1.4 var(--af-sans);
  color: var(--af-body);
}

.ae-spec dd {
  max-width: 62%;
  text-align: right;
  font: 500 22px/1.25 var(--af-serif);
  font-variant-numeric: lining-nums;
  color: var(--af-ink);
}

.ae-spec dd small {
  display: block;
  margin-top: 2px;
  font: 400 13px/1.3 var(--af-sans);
  color: var(--af-gray);
}

/* Destinos de «Ver la cabina» y «Cotizar en este avión»: el título quedaba pegado al header fijo (revisión
   web-design-guidelines, scroll-margin en anclas) */
#ae-cabina,
#ae-rutas {
  scroll-margin-top: 80px; /* el alto del header sólido; el aire lo da el padding de la sección */
}

@media (max-width: 1100px) {
  #ae-cabina,
  #ae-rutas {
    scroll-margin-top: 64px;
  }
}

/* Mapa de alcance (usuario, 05/11/2026: propuesta 1 con el mapa a la derecha). Escritorio: la lista a la izquierda y el
   mapa fijo a la derecha; hasta 1100 px, el mapa arriba y la lista debajo. La tierra es /img/mapas/tierra-sadf.svg y lo
   demás va en línea (site/src/lib/mapa-alcance.ts). Los tamaños de rótulos y puntos van en unidades del dibujo, escalados
   con --mp-s (el tamaño del cuadro de cada ficha), así se ven iguales con 1.400 o con 11.500 km de alcance */

.ae-tactil {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .ae-fino {
    display: none;
  }

  .ae-tactil {
    display: inline;
  }
}

.ae-mapa {
  max-width: 560px;
  margin: 28px auto 12px;
}

.mp {
  --mp-oro: var(--af-body); /* rutas y ciudades en gris tinta (usuario, 05/11/2026: el mapa en escala de grises) */
  --mp-pais: 18px;
  --mp-alc: 19px;
  --mp-c: 24px;
  --mp-r: 6px;
  --mp-rh: 9px;
  display: block;
  width: 100%;
  height: auto;
  /* La tierra mide 26.000 km de lado: recortada al cuadro y sin eventos, si no tapa la lista y se come el mouse */
  overflow: hidden;
  pointer-events: none;
}

.mp-pais {
  font: 500 calc(var(--mp-s, 1) * var(--mp-pais)) / 1 var(--af-caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--af-gray);
  text-anchor: middle;
}

.mp-ring {
  fill: rgba(22, 29, 41, 0.035);
  stroke: var(--af-ink);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}

.mp-alc {
  font: 500 calc(var(--mp-s, 1) * var(--mp-alc)) / 1 var(--af-caps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--af-ink);
  text-anchor: middle;
  translate: 0 calc(var(--mp-s, 1) * -12px);
}

.mp-arc {
  fill: none;
  stroke: var(--mp-oro);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: opacity 200ms ease, stroke-width 200ms ease;
}

.mp-c circle {
  r: calc(var(--mp-s, 1) * var(--mp-r));
  fill: var(--mp-oro);
  transition: r 200ms var(--af-ease-out), opacity 200ms ease;
}

.mp-c text,
.mp-o text {
  font: 500 calc(var(--mp-s, 1) * var(--mp-c)) / 1 var(--af-sans);
  fill: var(--af-ink);
  transition: opacity 200ms ease;
}

.mp-c .mp-der {
  translate: calc(var(--mp-s, 1) * 10px) calc(var(--mp-s, 1) * 8px);
}

.mp-c .mp-izq {
  text-anchor: end;
  translate: calc(var(--mp-s, 1) * -10px) calc(var(--mp-s, 1) * 8px);
}

.mp-o text {
  text-anchor: end;
  translate: calc(var(--mp-s, 1) * -6px) calc(var(--mp-s, 1) * 28px);
}

.mp-o .mp-o-p {
  r: calc(var(--mp-s, 1) * 5px);
  fill: var(--af-ink);
}

.mp-o .mp-o-h {
  r: calc(var(--mp-s, 1) * 9px);
  fill: none;
  stroke: var(--af-ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Al pasar por una fila (o tocarla) se resalta su ruta y su ciudad; las demás se apagan */
.mp.has-hl .mp-arc:not(.is-hl),
.mp.has-hl .mp-c:not(.is-hl) {
  opacity: 0.22;
}

.mp .mp-arc.is-hl {
  stroke-width: 3.5;
}

.mp .mp-c.is-hl circle {
  r: calc(var(--mp-s, 1) * var(--mp-rh));
  fill: var(--af-ink);
}

.mp .mp-arc.is-hl {
  stroke: var(--af-ink);
}

.ae-rt {
  transition: background-color 200ms ease;
}

.ae-rt.is-hl {
  background: linear-gradient(90deg, rgba(22, 29, 41, 0.05), transparent 70%);
}

.ae-mapa-nota {
  margin-top: 12px;
  font: 300 13px/1.5 var(--af-sans);
  color: var(--af-gray);
}

@media (min-width: 1101px) {
  .ae-rts-g {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "lista mapa";
    gap: clamp(40px, 4vw, 72px);
    align-items: start;
    margin-top: var(--af-head);
  }

  .ae-rts-g #resultadoDestino {
    grid-area: lista;
  }

  .ae-mapa {
    grid-area: mapa;
    position: sticky;
    top: calc(var(--af-header-h) + 16px);
    max-width: none;
    margin: 0;
  }

  /* Con el mapa al lado, la distancia ya está en el mapa: la fila pierde el trazo a escala */
  .ae-rts-g .ae-rt {
    grid-template-columns: minmax(0, 1.4fr) minmax(104px, 0.8fr) minmax(180px, 1.2fr) auto;
    grid-template-areas: "n t p cta";
  }

  .ae-rts-g .ae-rt-tr {
    display: none;
  }
}

/* Con las ciudades amontonadas (mapa-alcance.ts, mucho alcance y rutas cortas) solo se rotula la resaltada */
.mp-denso .mp-c text {
  opacity: 0;
}

.mp-denso .mp-c.is-hl text {
  opacity: 1;
}

.mp-denso.has-hl .mp-o text {
  opacity: 0;
}

/* En el celular, solo el nombre de la ciudad resaltada: los cuatro juntos se pisan alrededor de San Fernando */
@media (max-width: 767px) {
  .mp {
    --mp-pais: 28px;
    --mp-alc: 28px;
    --mp-c: 36px;
    --mp-r: 9px;
    --mp-rh: 13px;
  }

  .mp-c text {
    display: none;
  }

  .mp-c.is-hl text {
    display: inline;
  }

  .mp-pais[data-p="600"] {
    display: none;
  }

  /* Con la ciudad resaltada rotulada, «San Fernando» se corre: el punto de origen alcanza y los dos nombres se pisaban */
  .mp.has-hl .mp-o text {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-arc,
  .mp-c circle,
  .mp-c text,
  .ae-rt {
    transition: none;
  }
}

/* Rutas desde San Fernando: filas finas con el trazo a escala, tiempo, tarifa y cotización (modal de producción) */

.ae-rt-list {
  margin-top: var(--af-head);
}

.ae-rt {
  display: grid;
  grid-template-columns: minmax(150px, 3fr) minmax(90px, 1.2fr) minmax(150px, 2fr) auto;
  grid-template-areas: "n t p cta";
  align-items: center;
  gap: 12px clamp(16px, 2.4vw, 40px);
  padding: 22px 0;
  border-top: 1px solid var(--af-line);
}

.ae-rt:last-child {
  border-bottom: 1px solid var(--af-line);
}

.ae-rt-n {
  grid-area: n;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ae-rt-d,
.ae-rt-d:link,
.ae-rt-d:visited {
  color: var(--af-ink);
  text-decoration: none;
}

/* Área de toque de 44 px en el nombre de la ruta sin mover el texto (revisión ui-ux-pro-max, 05/11/2026) */
a.ae-rt-d {
  position: relative;
}

a.ae-rt-d::after {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.ae-rt-d b {
  white-space: nowrap;
  font: 500 var(--af-fs-name)/1.15 var(--af-serif);
  color: var(--af-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 200ms ease;
}

.ae-rt-n i {
  font: 500 var(--af-fs-caps)/1 var(--af-caps);
  font-style: normal;
  letter-spacing: var(--af-ls-label);
  color: var(--af-gold-text);
}

.ae-rt-tr {
  grid-area: tr;
  min-width: 0;
}

.ae-rt .af-trazo {
  display: block;
  width: var(--len);
  min-width: 40px;
}

.ae-rt .af-trazo-tr {
  height: 12px;
}

.ae-rt-t {
  grid-area: t;
  font: 400 var(--af-fs-small)/1.4 var(--af-sans);
  color: var(--af-body);
  white-space: nowrap;
}

.ae-rt-t .jc-mtime-value {
  font: 400 var(--af-fs-figure)/1 var(--af-serif);
  font-variant-numeric: lining-nums;
  color: var(--af-ink);
}

.ae-rt-p {
  grid-area: p;
  display: grid;
  gap: 2px;
  text-align: right;
}

.ae-rt-p .jc-mprice {
  font: 500 var(--af-fs-price)/1.1 var(--af-serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--af-ink);
  white-space: nowrap;
}

.ae-rt-p small {
  font: 400 var(--af-fs-micro)/1.3 var(--af-sans);
  color: var(--af-gray);
}

.ae-rt-cta,
.ae-rt-cta:link,
.ae-rt-cta:visited {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--af-gold-line);
  border-radius: var(--af-r-md);
  font: 500 11.5px/1 var(--af-caps);
  letter-spacing: var(--af-ls-label);
  text-transform: uppercase;
  color: var(--af-ink);
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--af-ease-out);
}

.ae-rt-cta:active {
  transform: scale(0.97);
}

.ae-rts-f {
  margin-top: 24px;
  max-width: 90ch;
  font: 400 var(--af-fs-small)/1.55 var(--af-sans);
  color: var(--af-gray);
}

/* Visor de la galería (<dialog>): Escape cierra, flechas pasan de foto, el foco vuelve a la miniatura */

.ae-viewer {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(var(--af-veil), 0.95);
  color: var(--af-white);
  overscroll-behavior: contain;
}

.ae-viewer::backdrop {
  background: transparent;
}

.ae-viewer[open] {
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 200ms var(--af-ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete;
}

@starting-style {
  .ae-viewer[open] {
    opacity: 0;
  }
}

.ae-viewer:not([open]) {
  opacity: 0;
  transition: opacity 140ms ease, overlay 140ms allow-discrete, display 140ms allow-discrete;
}

.ae-link:active {
  opacity: 0.7;
}

.ae-viewer figure {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 72px 76px 64px;
}

.ae-viewer-img {
  max-width: min(100%, 1100px);
  max-height: calc(100dvh - 180px);
  width: auto;
  height: auto;
  border-radius: 0;
}

.ae-viewer-cap {
  max-width: 60ch;
  text-align: center;
  font: 400 14px/1.5 var(--af-sans);
  color: rgba(255, 255, 255, 0.86);
}

.ae-viewer-n {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  font: 400 13px/1 var(--af-sans);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.72);
}

.ae-viewer .hv-acc-arrow,
.ae-viewer-x {
  position: absolute;
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--af-white);
}

.ae-viewer-x {
  top: calc(18px + env(safe-area-inset-top));
  right: calc(18px + env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
}

.ae-viewer-x .hv-ic {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.ae-viewer-prev {
  left: calc(18px + env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
}

.ae-viewer-next {
  right: calc(18px + env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
}

.ae-viewer .hv-acc-arrow:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95);
}

/* Tablet */

@media (max-width: 1100px) {
  .ae-g2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ae-rt {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "n p" "t cta";
    gap: 10px 20px;
  }

  .ae-rt-cta {
    justify-self: end;
  }
}

/* Celular */

@media (max-width: 767px) {
  .ae-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .ae .ae-btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  .ae-link {
    align-self: center;
  }

  .ae-datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }

  .ae-gal-head {
    align-items: flex-start;
    flex-direction: column;
  }

  /* «11 fotos» a la izquierda y las flechas a la derecha, en la misma línea */
  .ae-gal-ctl {
    width: 100%;
  }

  .ae-gal-n {
    margin-right: auto;
  }

  .ae-gp img {
    height: 54vw;
  }

  .ae-spec-g {
    grid-template-columns: minmax(0, 1fr);
  }

  .ae-viewer figure {
    padding: 64px 12px 72px;
  }

  .ae-viewer-prev,
  .ae-viewer-next {
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    transform: none;
  }

  .ae-viewer .hv-acc-arrow:active:not(:disabled) {
    transform: scale(0.95);
  }
}

/* Celular: nombre arriba, tarifa debajo alineada al nombre, trazo, y tiempo con el botón al final (a 320 px el nombre y la
   tarifa se pisaban en una sola fila) */
@media (max-width: 599px) {
  .ae-rt {
    grid-template-areas: "n n" "p p" "tr tr" "t cta";
    row-gap: 12px;
  }

  .ae-rt-p {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 10px;
    text-align: left;
  }

  .ae-rt-p small {
    grid-column: 2;
  }

  .ae-rt-p .jc-mprice {
    grid-row: span 2;
  }

  .ae-rt-cta {
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ae-gp img,
  .ae-rt-cta {
    transition: none;
  }

  .ae-gal-list {
    scroll-behavior: auto;
  }
}

/* Sección 2 «El avión» (variante C, usuario, 05/11/2026): título centrado, el dibujo de costado y los datos debajo,
   sobre blanco. Cada dato una sola vez: la ficha técnica dejó de ser una sección aparte */

.ae-av {
  background: var(--af-white); /* usuario, 05/11/2026: blanco debajo de la portada, no tiza */
}

.ae-av-head {
  text-align: center;
}

.ae-av-head .hv-rule-under {
  margin: 24px auto 0;
}

/* El dibujo mide 600 × 200: no se agranda más que eso */
.ae-av-perfil {
  width: min(100%, 600px);
  height: auto;
  margin: clamp(32px, 4vw, 48px) auto 0;
}

.ae-av-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: clamp(32px, 4vw, 48px);
}

.ae-av-dl div {
  padding: 18px 0;
  border-top: 1px solid var(--af-line);
}

.ae-av-dl dt {
  font: 500 12px/1.2 var(--af-caps);
  letter-spacing: var(--af-ls-label);
  text-transform: uppercase;
  color: var(--af-gray);
}

.ae-av-dl dd {
  margin-top: 8px;
  font: 500 22px/1.25 var(--af-serif);
  font-variant-numeric: lining-nums;
  color: var(--af-ink);
}

.ae-av-dl dd small {
  display: block;
  margin-top: 4px;
  font: 400 14px/1.4 var(--af-sans);
  color: var(--af-gray);
}

@media (min-width: 768px) {
  .ae-av-dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
  }
}

/* Flota de aeronaves (usuario, 05/11/2026): los dibujos de costado de menor a mayor, en carrusel arrastrable, con la de esta
   página destacada para saber dónde se está */

.ae-ot {
  background: var(--af-paper);
}

.ae-ot-list {
  --fa-edge: max(var(--af-gutter), calc((100% - var(--af-wrap)) / 2 + var(--af-gutter)));
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--fa-edge);
  padding: 0 var(--fa-edge) 4px;
  scrollbar-width: none;
}

.ae-ot-list::-webkit-scrollbar {
  display: none;
}

.ae-ot-list li {
  flex: none;
  width: clamp(240px, 22vw, 300px);
  scroll-snap-align: start;
}

.ae-ot-c,
.ae-ot-c:link,
.ae-ot-c:visited {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 20px 22px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--af-white);
  color: var(--af-ink);
  text-decoration: none;
  transition: border-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.ae-ot-c img {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.ae-ot-c b {
  font: 600 var(--af-fs-name)/1.1 var(--af-serif);
  font-variant-numeric: lining-nums;
}

.ae-ot-c span {
  margin-top: 6px;
  font: 400 14px/1.4 var(--af-sans);
  color: var(--af-gray);
}

/* La de esta página: borde de tinta y el rótulo «Está viendo» arriba a la izquierda */
.is-actual .ae-ot-c {
  border-color: var(--af-ink);
}

.ae-ot-c em {
  position: absolute;
  top: 16px;
  left: 20px;
  font: 500 11px/1 var(--af-caps);
  font-style: normal;
  letter-spacing: var(--af-ls-label);
  text-transform: uppercase;
  color: var(--af-ink);
}

.ae-ot-pie {
  margin-top: clamp(24px, 3vw, 36px);
}

@media (hover: hover) and (pointer: fine) {
  .ae-ot-list,
  .ae-ot-c {
    cursor: grab;
  }

  a.ae-ot-c:hover {
    border-color: var(--af-line);
  }
}

.ae-ot-list.is-drag {
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.ae-ot-list.is-drag,
.ae-ot-list.is-drag .ae-ot-c {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .ae-ot-c {
    transition: none;
  }
}

/* Revisión con skills de la ficha completa (05/11/2026) */

/* Foco visible dentro de los carruseles: el contorno de afuera quedaba cortado por el overflow (web-design-guidelines) */
.ae .ae-gp:focus-visible,
.ae .ae-ot-c:focus-visible {
  outline-offset: -3px;
}

/* Fotos de la galería: el clic amplía (zoom-in); la mano cerrada solo mientras se arrastra (emil-design-eng) */
@media (hover: hover) and (pointer: fine) {
  .ae-gal-list .ae-gp {
    cursor: zoom-in;
  }
}

.ae-cab-t,
.ae .hv-title-sec {
  text-wrap: balance;
}

/* Ritmo: rutas (blanco), preguntas (piedra muy claro), flota (blanco) */
.ae-faq {
  background: var(--af-paper);
}

.ae-mapa-nota {
  font: 400 14px/1.5 var(--af-sans);
}

/* Nombres del mapa con un halo del color de la tierra: no se pierden sobre los trazos */
.mp-c text,
.mp-o text {
  paint-order: stroke;
  stroke: #f4f4f4;
  stroke-width: calc(var(--mp-s, 1) * 5px);
  stroke-linejoin: round;
}

/* Celular: primero las rutas con su tarifa y después el mapa, de referencia; sin «Toque una ruta…», porque el mapa resaltado
   quedaba fuera de la pantalla (ui-ux-pro-max, design-taste-frontend) */
@media (max-width: 767px) {
  .ae-rts-g {
    display: flex;
    flex-direction: column;
  }

  .ae-rts-g .ae-mapa {
    order: 2;
    margin-top: 40px;
  }

  .ae-head-p .ae-tactil,
  .ae-head-p .ae-fino {
    display: none;
  }
}

.ae-viewer-img[hidden] {
  display: none;
}

/* Cabinas largas (recorte más de 4,5 veces más ancho que alto, como el Gulfstream V): el plano a lo ancho y la distribución en
   columnas debajo; al costado quedaba de 70 px de alto */
@media (min-width: 1101px) {
  .ae-cab-largo {
    grid-template-columns: minmax(0, 1fr);
  }

  .ae-cab-largo .ae-cab-txt {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    gap: 0 clamp(48px, 5vw, 96px);
    align-items: start;
  }

  .ae-cab-largo .ae-cab-txt > :not(.ae-zonas) {
    grid-column: 1;
    align-self: start;
  }

  .ae-cab-largo .ae-zonas {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }

  .ae-cab-largo .ae-zonas li:last-child {
    border-bottom: 0;
  }
}

/* Hasta dónde llega (usuario, 05/11/2026: «el interes del mapa es el alcance real»): el texto con los destinos populares sin
   escala y con escala a la izquierda y el mapa a la derecha; el anillo es el alcance por rumbo con el viento del motor */

.ae-alc-g {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}

@media (min-width: 1101px) {
  .ae-alc-g {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(48px, 5vw, 96px);
    align-items: center;
  }

  .ae-alc .ae-mapa {
    grid-area: auto;
    position: static;
    width: 100%;
    max-width: 620px;
    margin: 0 0 0 auto;
  }
}

.ae-alc-dl {
  margin-top: 32px;
}

.ae-alc-dl div {
  padding: 18px 0;
  border-top: 1px solid var(--af-line);
}

.ae-alc-dl div:last-child {
  border-bottom: 1px solid var(--af-line);
}

.ae-alc-dl dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 12px/1.2 var(--af-caps);
  letter-spacing: var(--af-ls-label);
  text-transform: uppercase;
  color: var(--af-gray);
}

.ae-alc-dl dd {
  margin-top: 10px;
  font: 400 17px/1.6 var(--af-sans);
  color: var(--af-ink);
  text-wrap: pretty;
}

/* Marca de la leyenda: el mismo punto del mapa (lleno sin escala, hueco con escala) */
.ae-alc-m {
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--af-ink);
  border-radius: 50%;
  background: var(--af-ink);
}

.ae-alc-m.is-escala {
  background: transparent;
}

.ae-alc .ae-mapa-nota {
  margin-top: 20px;
}

.mp-p {
  r: calc(var(--mp-s, 1) * 6px);
  fill: var(--af-ink);
  stroke: var(--af-ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.mp-p.is-escala {
  fill: #fff;
}

@media (max-width: 767px) {
  .mp-p {
    r: calc(var(--mp-s, 1) * 9px);
  }
}

/* Tarifas de referencia: filas cortas (destino, tiempo, tarifa) y el botón al cotizador para armar cualquier vuelo */
.ae-rts-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  margin-top: 28px;
}

.ae-rts-pie .ae-rts-f {
  margin-top: 0;
  flex: 1 1 420px;
}

@media (max-width: 767px) {
  .ae-rts-pie .ae-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Orden por importancia (usuario, 05/11/2026: «lo que mas quiere ver el usuario son specs, fotos, comparar con otros aviones»):
   alcance y tarifas queda en una sola sección compacta después de la cabina, y la flota cierra la página, antes del contacto, para
   comparar (usuario: «eso seria como para cerrar») */

.ae-at {
  background: var(--af-white);
}

.ae .hv-contact {
  padding-top: var(--af-sec);
}

.ae-at-g {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}

@media (min-width: 1101px) {
  .ae-at-g {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 4vw, 72px);
    align-items: center;
  }

  .ae-at .ae-mapa {
    grid-area: auto;
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 1100px) {
  .ae-at .ae-mapa {
    max-width: 520px;
    margin: 0 auto;
  }
}

.ae-at-ley {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
  font: 500 12px/1.2 var(--af-caps);
  letter-spacing: var(--af-ls-label);
  text-transform: uppercase;
  color: var(--af-gray);
}

.ae-at-ley span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ae-at-list {
  margin-top: 28px;
  border-top: 1px solid var(--af-line);
}

/* Filas compactas: destino, tiempo, «desde USD» y «Cotizar» (abre el modal de WhatsApp de producción) */
.ae-at-r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(132px, auto) auto;
  align-items: baseline;
  gap: 4px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--af-line);
}

.ae-at-d,
.ae-at-d:link,
.ae-at-d:visited {
  font: 500 21px/1.2 var(--af-serif);
  color: var(--af-ink);
  text-decoration: none;
}

.ae-at-t {
  font: 400 18px/1 var(--af-serif);
  font-variant-numeric: lining-nums;
  color: var(--af-body);
  white-space: nowrap;
}

.ae-at-p {
  text-align: right;
  white-space: nowrap;
}

.ae-at-p small {
  font: 400 12.5px/1.3 var(--af-sans);
  color: var(--af-gray);
}

.ae-at-p .jc-mprice {
  font: 500 19px/1 var(--af-serif);
  font-variant-numeric: lining-nums;
  color: var(--af-ink);
}

/* «+ IVA 10,5 %» y «+ gastos internacionales» más chicos y más claros que «desde» (usuario, 06/11/2026); el gris sigue en AA
   sobre blanco y sobre piedra (4,8:1 y 4,5:1) */
.ae-at-p .jc-mnota {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #6e737a;
}

.ae-at-cta,
.ae-at-cta:link,
.ae-at-cta:visited {
  position: relative;
  font: 500 var(--af-fs-caps-sm)/1 var(--af-caps);
  letter-spacing: var(--af-ls-label);
  text-transform: uppercase;
  color: var(--af-gold-text);
  text-decoration: none;
}

/* Área de toque de 44 px sin agrandar la fila */
.ae-at-cta::after {
  content: "";
  position: absolute;
  inset: -16px -10px;
}

@media (hover: hover) and (pointer: fine) {
  .ae-at-cta:hover {
    color: var(--af-ink);
  }

  a.ae-at-d:hover {
    text-decoration: underline;
    text-decoration-color: var(--af-gold);
    text-underline-offset: 4px;
  }
}

.ae-at-btn {
  margin-top: 24px;
}

/* La leyenda de las tarifas va arriba del botón al cotizador, las dos frases en una línea (usuario, 06/11/2026) */
.ae-at-nota {
  margin-top: 24px;
  max-width: none;
  font: 400 13px/1.55 var(--af-sans);
  color: var(--af-gray);
}

@media (max-width: 599px) {
  .ae-at-r {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "d p" "t cta";
    gap: 6px 16px;
  }

  .ae-at-d { grid-area: d; }
  .ae-at-t { grid-area: t; font-size: 16px; }
  .ae-at-p { grid-area: p; }
  .ae-at-cta { grid-area: cta; justify-self: end; }

  .ae-at-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Leyenda corta de la cabina (usuario, 05/11/2026): nombre de la zona a la izquierda y sus butacas o su lugar a la derecha */
.ae-zonas li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.ae-zonas li strong {
  display: inline;
  font: 400 16px/1.4 var(--af-sans);
}

.ae-zonas li span {
  display: inline;
  margin-top: 0;
  font: 500 19px/1.2 var(--af-serif);
  font-variant-numeric: lining-nums;
  color: var(--af-ink);
  text-align: right;
  white-space: nowrap;
}

/* Alcance y tarifas: la tabla a la izquierda (es el dato, y el título queda en el mismo eje que el resto) y el mapa a la derecha */
@media (min-width: 1101px) {
  .ae-at-g {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }

  .ae-at .ae-mapa {
    order: 2;
  }
}

@media (max-width: 1100px) {
  .ae-at .ae-mapa {
    order: 2;
    width: min(100%, 560px);
  }
}

@media (max-width: 599px) {
  .ae-at-btn {
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 0.08em;
  }
}

/* Flota: los dibujos sin caja, con un filete arriba; la de esta página con filete de tinta. Sin tarjetas blancas redondeadas */
.ae-ot-c,
.ae-ot-c:link,
.ae-ot-c:visited {
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid var(--af-line);
  border-radius: 0;
  background: none;
}

.is-actual .ae-ot-c {
  border-color: var(--af-ink);
  box-shadow: inset 0 1px 0 var(--af-ink);
}

.ae-ot-c em {
  top: -26px;
  left: 0;
}

.ae-ot-list {
  padding-top: 26px;
}

@media (hover: hover) and (pointer: fine) {
  a.ae-ot-c:hover {
    border-color: var(--af-gray);
  }
}

/* Flechas de los carruseles (galería y flota). En escritorio y tablet, arriba a la derecha, al pie del título, como siempre. En el
   celular van sobre las fotos, centradas en altura (usuario, 05/11/2026: «si pones las flechitas arriba de las fotos, mucha gente
   no las ve»). Están en .ae-car, junto a la lista, para poder ubicarlas en los dos lugares sin duplicarlas */
.ae-car {
  --fa-edge: max(var(--af-gutter), calc((100% - var(--af-wrap)) / 2 + var(--af-gutter)));
  position: relative;
}

.ae-car-nav {
  display: flex;
  gap: 12px;
}

@media (min-width: 768px) {
  .ae-car-nav {
    position: absolute;
    right: var(--fa-edge);
    bottom: calc(100% + clamp(28px, 3vw, 44px));
  }

  .ae-gal .ae-gal-ctl {
    min-height: 44px;
    padding-right: 120px;
  }

  /* De 768 a 900 la regla de la home (.hv-acc-arrow, flechas sobre foto) las pintaba translúcidas, con sombra y escondía la
     desactivada: acá van como en escritorio (revisión de skills, 06/11/2026) */
  .ae-car-nav .hv-acc-arrow {
    border-color: var(--af-line);
    background: var(--af-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .ae-car-nav .hv-acc-arrow:disabled {
    opacity: 0.35;
  }
}

@media (max-width: 767px) {
  .ae-car-nav {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  .ae-car-nav .hv-acc-arrow {
    position: absolute;
    top: calc(50% - 24px);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(22, 29, 41, 0.1), 0 4px 14px -4px rgba(22, 29, 41, 0.28);
    pointer-events: auto;
    transition: transform 160ms var(--af-ease-out), opacity 200ms ease, visibility 0s linear 0s;
  }

  .ae-car--ot .ae-car-nav .hv-acc-arrow {
    top: calc(50% - 11px);
  }

  /* En la flota, sobre el borde de la tarjeta: más adentro tapaban la nariz y la cola del dibujo */
  .ae-car--ot .ae-car-nav .hv-acc-arrow:first-child {
    left: calc(var(--fa-edge) - 14px);
  }

  .ae-car--ot .ae-car-nav .hv-acc-arrow:last-child {
    right: calc(var(--fa-edge) - 14px);
  }

  .ae-car-nav .hv-acc-arrow:first-child {
    left: calc(var(--fa-edge) + 8px);
  }

  .ae-car-nav .hv-acc-arrow:last-child {
    right: calc(var(--fa-edge) + 8px);
  }

  /* Al principio o al final, la flecha que no lleva a ningún lado se va */
  .ae-car-nav .hv-acc-arrow:disabled {
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
}

/* Celular: el botón de Alcance y tarifas en una línea */
@media (max-width: 767px) {
  .ae .ae-at-btn {
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 0.06em;
    padding-inline: 16px;
  }
}

/* Ficha técnica, opción C (usuario, 05/11/2026: «C · Selector»): la tabla de datos a la izquierda y, a la derecha, un recuadro
   papel con el control «Exterior | Interior» que alterna el perfil y el plano con la leyenda de zonas. Van lado a
   lado (desde 1101 px, el corte del resto de la página: a 1024 las cabinas largas quedaban chicas) y el recuadro ocupa justo el
   alto de la tabla; debajo, apilados con el mismo control. El perfil no se espeja: mira a la
   izquierda como el dibujo original, con la puerta de ese lado (manual § 9). Sin JS se ven los dos dibujos, uno debajo del otro */
.ae-ft {
  display: grid;
  gap: clamp(40px, 5vw, 56px);
}

.ae-ft .ae-av-dl {
  display: block;
  margin-top: clamp(32px, 3vw, 44px);
}

.ae-ft .ae-av-dl div {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
  column-gap: 24px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 0;
}

.ae-ft .ae-av-dl div + div {
  border-top: 1px solid var(--af-line);
}

.ae-ft .ae-av-dl dt {
  line-height: 1.3;
}

.ae-ft .ae-av-dl dd {
  margin-top: 0;
  font-size: 21px;
  line-height: 1.3;
}

.ae-ft .ae-av-dl dd small {
  margin-top: 3px;
}

@media (max-width: 599px) {
  .ae-ft .ae-av-dl div {
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
    column-gap: 16px;
    padding: 14px 0;
  }

  .ae-ft .ae-av-dl dd {
    font-size: 19px;
  }
}

@media (min-width: 1101px) {
  .ae-ft {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(56px, 7vw, 128px);
    row-gap: 0;
  }

  .ae-ft-datos {
    display: contents;
  }

  .ae-ft .ae-head {
    grid-area: 1 / 1;
  }

  .ae-ft .ae-av-dl {
    grid-area: 2 / 1;
  }

  .ae-vis {
    grid-area: 2 / 2;
    margin-top: clamp(32px, 3vw, 44px);
  }
}

.ae-vis {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  gap: clamp(24px, 3vw, 36px);
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3.4vw, 48px) clamp(28px, 3.6vw, 48px);
  border-radius: var(--af-r-md);
  background: var(--af-paper);
}

.ae-seg {
  display: none;
}

.ae-tabs-on .ae-seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--af-r-md);
  background: var(--af-cell);
}

.ae-seg button {
  min-width: 112px;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--af-r-sm);
  background: transparent;
  font: 500 12px/1 var(--af-caps);
  letter-spacing: var(--af-ls-label);
  text-transform: uppercase;
  color: var(--af-gray);
  cursor: pointer;
  transition: background-color var(--af-d-color) ease, color var(--af-d-color) ease, box-shadow var(--af-d-color) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ae-seg button[aria-selected="true"] {
  background: var(--af-white);
  color: var(--af-ink);
  box-shadow: 0 1px 2px rgba(22, 29, 41, 0.08), 0 2px 6px -2px rgba(22, 29, 41, 0.1);
}

.ae-seg button:focus-visible {
  outline: 2px solid var(--af-gold);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .ae-seg button[aria-selected="false"]:hover {
    color: var(--af-ink);
  }
}

/* Los dos paneles en la misma celda: el recuadro toma el alto del mayor y nada salta al cambiar */
.ae-paneles {
  display: grid;
  width: 100%;
  gap: 40px;
}

.ae-tabs-on .ae-paneles {
  gap: 0;
}

.ae-panel {
  display: grid;
  justify-items: center;
  outline: none;
}

.ae-panel:focus-visible {
  outline: 2px solid var(--af-gold);
  outline-offset: 8px;
  border-radius: var(--af-r-sm);
}

.ae-tabs-on .ae-panel {
  grid-area: 1 / 1;
  align-self: center;
}

.ae-tabs-on .ae-panel.is-off {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .ae-tabs-on .ae-panel {
    transition: opacity 260ms var(--af-ease-out), visibility 0s linear 0s;
  }

  .ae-tabs-on .ae-panel.is-off {
    transition: opacity 160ms ease, visibility 0s linear 160ms;
  }
}

.ae-vis-perfil {
  width: min(100%, 500px);
}

.ae-vis-plan {
  width: min(100%, 560px);
}

.ae-vis-plan--larga {
  width: 100%;
}

.ae-vis-perfil img,
.ae-vis-plan img {
  display: block;
  width: 100%;
  height: auto;
}

/* Debajo del plano, una frase con la cabina de adelante hacia atrás (usuario, 06/11/2026, opción D: el plano sin números, como
   Flyzar y VistaJet; la frase, como Flycraft) */
.ae-vis-frase {
  max-width: 46ch;
  margin-top: 22px;
  font: 400 15px/1.55 var(--af-sans);
  color: var(--af-body);
  text-align: center;
  text-wrap: pretty;
}

/* Ficha técnica: «Ver mapa» junto al alcance, una píldora piedra con el ícono del mapa (usuario, 05/11/2026: «algo más moderno,
   tipo un pill con gris clarito de fondo»); lleva al mapa de Alcance y tarifas */
.ae-ft .ae-av-dl dd .ae-ft-mapa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-left: 14px;
  padding: 0 13px 0 10px;
  border-radius: 999px;
  background: var(--af-cell);
  font: 500 13px/1 var(--af-sans);
  vertical-align: 3px;
  color: var(--af-ink);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--af-d-color) ease, color var(--af-d-color) ease, transform 160ms var(--af-ease-out);
}

/* Fila del alcance: rótulo, cifra y píldora en la misma línea (usuario, 06/11/2026). Con el alcance de GlobalAir la cifra lleva
   debajo las millas náuticas, como la velocidad: el rótulo va con la primera línea y la píldora, centrada en esa línea */
.ae-ft .ae-av-dl div:has(.ae-ft-mapa) {
  align-items: baseline;
}

.ae-ft .ae-av-dl dd:has(.ae-ft-mapa) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 14px;
  row-gap: 10px;
}

.ae-ft .ae-av-dl dd .ae-ft-mapa {
  position: relative;
  margin-left: 0;
  margin-block: -2px;
  vertical-align: baseline;
}

.ae-ft .ae-av-dl dd .ae-ft-mapa::after {
  content: "";
  position: absolute;
  inset: -7px 0;
}

.ae-ft .ae-av-dl dd:has(.ae-ft-mapa) small {
  text-wrap: balance;
}

.ae-ft .ae-av-dl dd .ae-ft-mapa .hv-ic {
  width: 15px;
  height: 15px;
  color: var(--af-gold-text);
  transition: color var(--af-d-color) ease;
}

.ae-ft .ae-av-dl dd .ae-ft-mapa:active {
  transform: scale(0.97);
}

.ae-ft .ae-av-dl dd .ae-ft-mapa:focus-visible {
  outline: 2px solid var(--af-gold);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .ae-ft .ae-av-dl dd .ae-ft-mapa:hover {
    background: var(--af-ink);
    color: #fff;
  }

  .ae-ft .ae-av-dl dd .ae-ft-mapa:hover .hv-ic {
    color: var(--af-gold-soft);
  }
}



/* Portada C (usuario, 06/11/2026): un botón «Ver especificaciones» y, al lado, el enlace «Mapa de alcance» con flecha hacia
   abajo, como el «Conocer…» de /dest/ (.rc-link). Sobre la foto, el botón es blanco y el enlace, blanco con filete dorado claro */
.ae-hero .ae-btns {
  column-gap: 28px;
  row-gap: 4px;
}

.ae-hl,
.ae-hl:link,
.ae-hl:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 4px;
  font: 500 12px/1 var(--af-caps);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--af-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.ae-hl span {
  position: relative;
  margin-bottom: -7px;
  padding-bottom: 7px;
}

/* Como el «Conocer…» de /dest/: sin filete en reposo; con el mouse o el foco, un filete dorado que se dibuja de izquierda a
   derecha; en pantallas táctiles, un filete gris claro fijo para que se lea como enlace */
.ae-hl span::before,
.ae-hl span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

.ae-hl span::before {
  display: none;
  background: var(--af-line);
}

@media (hover: none) {
  .ae-hl span::before {
    display: block;
  }
}

.ae-hl span::after {
  background: var(--af-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--af-ease-out);
}

.ae-hl:focus-visible span::after {
  transform: scaleX(1);
}

.ae-hl .hv-ic {
  width: 15px;
  height: 15px;
  color: currentColor;
  transform: rotate(90deg);
  transition: transform 200ms var(--af-ease-out);
}

.ae-hl:active {
  opacity: 0.7;
}

.ae-hl:focus-visible {
  outline: 2px solid var(--af-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .ae-hl:hover .hv-ic {
    transform: rotate(90deg) translateX(2px);
  }

  .ae-hl:hover span::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ae-hl .hv-ic,
  .ae-hl span::after {
    transition: none;
  }
}

@media (max-width: 599px) {
  .ae-hero .ae-btns {
    display: grid;
    row-gap: 12px;
  }

  .ae-hero .ae-btn {
    justify-content: center;
    width: 100%;
  }

  .ae-hero .ae-hl,
  .ae-hero .ae-hl:link,
  .ae-hero .ae-hl:visited {
    justify-content: center;
    width: 100%;
    min-height: 48px;
  }
}

/* Botón de la portada con los mismos estados que el de /dest/ (.rc-btn): bronce con sombra suave al pasar y con foco, la flecha
   avanza 2 px y al apretar baja a 0,97 */
.ae-hero .ae-btn.hv-btn-ink {
  transition: transform 160ms var(--af-ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.ae-hero .ae-btn .hv-ic {
  transition: translate 200ms var(--af-ease-out);
}

.ae-hero .ae-btn.hv-btn-ink:active {
  transform: scale(0.97);
}

.ae-hero .ae-btn.hv-btn-ink:focus-visible {
  box-shadow: 0 10px 24px -16px rgba(60, 44, 22, 0.7);
}

.ae-hero .ae-btn:focus-visible .hv-ic {
  translate: 2px 0;
}

@media (hover: hover) and (pointer: fine) {
  .ae-hero .ae-btn.hv-btn-ink:hover {
    box-shadow: 0 10px 24px -16px rgba(60, 44, 22, 0.7);
  }

  .ae-hero .ae-btn:hover .hv-ic {
    translate: 2px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ae-hero .ae-btn.hv-btn-ink,
  .ae-hero .ae-btn .hv-ic {
    transition: none;
  }

  .ae-hero .ae-btn.hv-btn-ink:active {
    transform: none;
  }

  .ae-hero .ae-btn:hover .hv-ic,
  .ae-hero .ae-btn:focus-visible .hv-ic {
    translate: none;
  }
}

@media (min-width: 1101px) {
  .ae-hero .ae-hl,
  .ae-hero .ae-hl:link,
  .ae-hero .ae-hl:visited {
    color: #fff;
  }

  .ae-hero .ae-hl span::before {
    background: rgba(255, 255, 255, 0.35);
  }

  .ae-hero .ae-hl span::after {
    background: var(--af-gold-soft);
  }

  .ae-hero .ae-hl:focus-visible {
    outline-color: var(--af-gold-soft);
  }
}

/* Migas debajo de la portada, al principio de la ficha técnica (usuario, 06/11/2026). Suben hacia la portada sin mover el
   título: lo que suben arriba lo suman abajo («no tan pegado a "Un jet mediano para…"») */
.ae-crumb-bajo {
  --ae-crumb-sube: clamp(16px, 2.6vw, 40px);
  margin-top: calc(-1 * var(--ae-crumb-sube));
  margin-bottom: calc(clamp(28px, 3vw, 40px) + var(--ae-crumb-sube));
}

.ae-crumb.ae-crumb-bajo,
.ae-crumb.ae-crumb-bajo a {
  color: var(--af-gray);
}

.ae-crumb.ae-crumb-bajo [aria-current] {
  color: var(--af-ink);
}

.ae-crumb.ae-crumb-bajo li + li::before {
  color: var(--af-mark);
}

@media (hover: hover) and (pointer: fine) {
  .ae-crumb.ae-crumb-bajo a:hover {
    color: var(--af-ink);
  }
}

/* «Ver toda la flota» como botón con flecha, a la izquierda, debajo del carrusel (usuario, 06/11/2026: a la derecha quedaba peor) */
.ae-ot-pie {
  display: flex;
}

/* Con aire respecto de las tarjetas (usuario, 05/11/2026: «quedó muy pegado a los aviones») */
.ae .ae-ot-pie {
  margin-top: clamp(48px, 5vw, 72px);
}

@media (max-width: 599px) {
  .ae-ot-pie .ae-btn {
    justify-content: center;
    width: 100%;
    height: 52px;
  }
}

/* Mapa simple: nombre de los destinos turísticos principales (mapa-alcance.ts, TURISTICAS), con el halo de la tierra */
.mp-n {
  font: 500 calc(var(--mp-s, 1) * var(--mp-c)) / 1 var(--af-sans);
  fill: var(--af-ink);
  paint-order: stroke;
  stroke: #f4f4f4;
  stroke-width: calc(var(--mp-s, 1) * 5px);
  stroke-linejoin: round;
}

.mp-n.mp-der {
  translate: calc(var(--mp-s, 1) * 12px) calc(var(--mp-s, 1) * 8px);
}

.mp-n.mp-izq {
  text-anchor: end;
  translate: calc(var(--mp-s, 1) * -12px) calc(var(--mp-s, 1) * 8px);
}

.mp-n.mp-arr {
  text-anchor: middle;
  translate: 0 calc(var(--mp-s, 1) * -16px);
}

.mp-n.mp-aba {
  text-anchor: middle;
  translate: 0 calc(var(--mp-s, 1) * (16px + var(--mp-c) * 0.78));
}

/* San Fernando con el nombre a la derecha del punto (usuario, 06/11/2026) */
.mp-o text.mp-der {
  text-anchor: start;
  translate: calc(var(--mp-s, 1) * 12px) calc(var(--mp-s, 1) * 8px);
}

/* El dibujo se toca para pasar al otro (ficha-capa.js, dibujos()) */
.ae-vis-toca {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Celular y tablet hasta 1100 px (usuario, 06/11/2026; tablet: «¿no convendría meter el título y el subtítulo también en el
   hero?»): portada alta con el título y la bajada sobre la foto, abajo de un velo; los botones debajo de
   la foto. Las fotos aire-aire verticales llegan más adelante: mientras tanto, la horizontal recortada. .ae-hero-in queda sin
   caja (display: contents) para ordenar foto, título, bajada y botones en la misma grilla; el header mide su último hijo */
@media (max-width: 1100px) {
  .ae-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto;
  }

  .ae-hero-media {
    grid-column: 1;
    grid-row: 1 / 4;
    height: max(520px, 78svh);
  }

  .ae-hero-media img {
    height: 100%;
  }

  .ae-hero-media::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background: linear-gradient(0deg, rgba(var(--af-veil), 0.55) 0%, rgba(var(--af-veil), 0.24) 50%, rgba(var(--af-veil), 0) 100%);
    pointer-events: none;
  }

  .ae-hero-in {
    display: contents;
  }

  .ae-hero .ae-h1 {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    z-index: 1;
    margin: 0;
    padding-inline: var(--af-gutter);
    color: #fff;
  }

  .ae-hero .ae-lead {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 12px var(--af-gutter) 28px;
    color: rgba(255, 255, 255, 0.92);
  }

  .ae-hero .ae-btns {
    grid-column: 1;
    grid-row: 4;
    padding: 28px var(--af-gutter) 8px;
  }
}

/* Alcance y tarifas hasta 1100 px (usuario, 06/11/2026): la bajada, el mapa, las tarifas, la leyenda y el botón al cotizador,
   en ese orden. .ae-at-txt queda sin caja para intercalar el mapa entre la bajada y la tabla */
@media (max-width: 1100px) {
  .ae-at-g {
    row-gap: 0;
  }

  .ae-at-txt {
    display: contents;
  }

  .ae-at .ae-head { order: 1; }
  .ae-at .ae-mapa { order: 2; margin-top: clamp(28px, 5vw, 40px); }
  /* El mapa trae aire propio abajo del círculo: la tabla va más pegada */
  .ae-at #resultadoDestino { order: 3; margin-top: 4px; }
  .ae-at .ae-at-nota { order: 4; }
  .ae-at .ae-at-btn { order: 5; justify-self: start; }
}

@media (max-width: 599px) {
  .ae-at .ae-at-btn {
    justify-self: stretch;
  }
}

/* Portada vertical opcional hasta 1100 px (portada.fotoMovil, como /dest/): su encuadre llega en --enc-m y gana al de escritorio */
.ae-hero-media picture {
  display: contents;
}

@media (max-width: 1100px) {
  .ae-hero-media-movil img {
    object-position: var(--enc-m, 50% 50%) !important;
  }
}

/* Con el velo suave, una sombra leve en el texto de la portada sobre la foto */
@media (min-width: 1101px) {
  .ae-hero .ae-h1,
  .ae-hero .ae-lead {
    text-shadow: 0 1px 16px rgba(var(--af-veil), 0.35);
  }
}

@media (max-width: 1100px) {
  .ae-hero .ae-h1,
  .ae-hero .ae-lead {
    text-shadow: 0 1px 14px rgba(var(--af-veil), 0.4);
  }
}

/* Botón de la portada: azul marino de la marca al pasar y con foco, en lugar del bronce (usuario, 06/11/2026: «el cta del hero
   podría ir azul en vez de dorado en hover, queda más lindo con la foto»). Solo la portada de las fichas; /dest/ sigue en bronce */
.ae-hero .ae-btn.hv-btn-ink:focus-visible {
  background: var(--af-ink-hover);
  border-color: var(--af-ink-hover);
  color: #fff;
  box-shadow: 0 10px 24px -16px rgba(22, 29, 41, 0.75);
}

@media (hover: hover) and (pointer: fine) {
  .ae-hero .ae-btn.hv-btn-ink:hover {
    background: var(--af-ink-hover);
    border-color: var(--af-ink-hover);
    color: #fff;
    box-shadow: 0 10px 24px -16px rgba(22, 29, 41, 0.75);
  }
}


/* ===== .cursor/docs/rediseno-fichas-flota/flota-capa.css ===== */
/* Flota de aeronaves (Astro, site/src/components/flota/FleetPage.astro). Capa propia sobre tokens.css, firma.css y ficha-capa.css
   (portada, migas, títulos y entrada al bajar son los de la ficha). La arma site/tools/armar-flota-assets.mjs en /css/flota.css.
   Propuesta A «hangar a escala» (usuario, 10/11/2026): las aeronaves dibujadas de costado a la misma escala, apoyadas en la
   misma línea de piso, por estantes; al tocar una, debajo de su estante se abre su foto y sus datos. */

/* Portada: la de la ficha (alta, con el título sobre la foto hasta 1100 px). En el celular y la tablet vertical va una foto
   vertical propia (banner-fleet-mob-hd, 1152 × 2064, usuario 11/11/2026): la apaisada (2064 × 834) se cortaba en la trompa
   del primer jet. La fila de aeronaves queda en la franja del medio y el título va sobre el piso oscuro. En la tablet
   horizontal sigue la apaisada */
@media (max-width: 1100px) {
  .fl-hero .ae-hero-media img {
    object-position: 30% 60%;
  }
}

@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
  .fl-hero .ae-hero-media img {
    object-position: 50% 58%;
  }
}

/* «Cotizar vuelo» lleva al cotizador (otra página): flecha a la derecha, no hacia abajo como el enlace a una sección de la ficha */
.fl .ae-hl[href^="/"] .hv-ic {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .fl .ae-hl[href^="/"]:hover .hv-ic {
    transform: translateX(3px);
  }
}

/* ---------- Hangar a escala ---------- */

/* La sección arranca en blanco, como la de la ficha debajo de la portada; los estantes van sobre una franja piedra de borde a
   borde, el «piso» del hangar, que cierra la sección (usuario, 11/11/2026, alternativa B «Piso a sangre»). La piedra sigue
   detrás de los dibujos porque los aviones son blancos y sobre blanco puro pierden la silueta */
.fl-hangar {
  padding-bottom: 0;
  background: var(--af-white);
}

.fl-piso {
  margin-top: clamp(44px, 4.8vw, 72px);
  padding: 4px 0 clamp(64px, 7vw, 104px);
  background: var(--af-paper);
  box-shadow: 0 0 0 100vmax var(--af-paper);
  clip-path: inset(0 -100vmax);
}

/* «Ver la flota» de la portada: el título queda a la vista, debajo del header fijo. El id es ae-hangar para que el enlace lo
   maneje anclas() de ficha-capa.js (header + 24 px): el manejador viejo de scripts-min.js ignora scroll-margin */
#ae-hangar {
  scroll-margin-top: calc(var(--af-header-h) + 24px);
}

.fl-hangar .ae-crumb-bajo {
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* Escala común (px por metro): en escritorio, el estante más largo (--fl-lmax metros, --fl-n espacios) ocupa todo el ancho, con
   tope de 16 px; hasta 1100 px los estantes bajan en filas (más abajo) */
.fl-in {
  container-type: inline-size;
  --gap: clamp(28px, 3.4vw, 48px);
  /* Alto del bloque de nombre y pasajeros debajo de la línea de piso (margen 18 + nombre 24 + 4 + pasajeros 14) */
  --lab: 59px;
  /* --piso-pad: margen interior del fondo de los estantes, si lo tiene (se descuenta del ancho) */
  --piso-pad: 0px;
  --k: max(7px, min(16px, calc((100cqw - 2 * var(--piso-pad) - var(--fl-n) * var(--gap)) / var(--fl-lmax))));
}

/* El primer estante, más cerca del borde de la franja piedra */
.fl-piso > .fl-est:first-child {
  margin-top: clamp(44px, 4.6vw, 64px);
}

.fl-est {
  /* Aire entre estantes (usuario, 11/11/2026: «está todo muy compacto, necesita más aire vertical») */
  margin-top: clamp(52px, 5.8vw, 84px);
  scroll-margin-top: calc(var(--af-header-h) + 24px);
}

.fl-ancla {
  display: block;
  scroll-margin-top: calc(var(--af-header-h) + 24px);
}

/* Título de cada estante: en Cormorant y tinta, como los títulos de la página (usuario, 11/11/2026: «casi no se leen los nombres
   de las categorías»; antes iba en Jost de 11 px gris) */
.fl-est-t {
  margin: 0;
  font: 500 clamp(24px, 2.2vw, 30px)/1.15 var(--af-serif);
  letter-spacing: -0.01em;
  color: var(--af-ink);
}

.fl-est-scroll {
  margin-top: 28px;
  /* Sin deslizar en ningún ancho (los estantes entran por --k o bajan en filas): visible, para que no se corte el anillo de foco */
  overflow: visible;
}

.fl-est-l {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Línea de piso: las ruedas de todas apoyan en la misma línea; los nombres van debajo */
.fl-est-l::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--lab);
  height: 1px;
  background: var(--af-line);
  pointer-events: none;
}

.fl-av,
.fl-av:link,
.fl-av:visited {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* El dibujo: el webp de 600 × 200 recortado a su contorno (--x0, --y0, --bw, --bh) y llevado a su largo (--l) y su alto (--h)
   reales: si el dibujo no tenía la proporción del avión, se corrige acá (usuario, 10/11/2026: «el pilatus parece enorme y el
   metro chico») */
.fl-av-dib {
  position: relative;
  display: block;
  width: calc(var(--l) * var(--k));
  height: calc(var(--h) * var(--k));
  /* Aire entre las ruedas y la línea de piso (usuario, 11/11/2026: «separar un poquito los aviones de la raya de abajo») */
  margin-bottom: 8px;
  overflow: hidden;
  transition: transform 320ms var(--af-ease-out);
}

.fl-av-dib img {
  position: absolute;
  left: calc(-1 * var(--l) * var(--k) * var(--x0) / var(--bw));
  top: calc(-1 * var(--h) * var(--k) * var(--y0) / var(--bh));
  width: calc(var(--l) * var(--k) * 600 / var(--bw));
  max-width: none;
  height: calc(var(--h) * var(--k) * 200 / var(--bh));
}

/* Sin dibujo todavía: un fuselaje en línea de puntos del largo real, a la altura de la cabina */
.fl-av-pend {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--l) * var(--k) * 0.13);
  margin-bottom: calc(var(--l) * var(--k) * 0.06);
  border: 1px dashed var(--af-mark);
  border-radius: 999px;
}

.fl-av-pend i {
  padding: 0 8px;
  font: 500 9px/1 var(--af-caps);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--af-gray);
  white-space: nowrap;
}

.fl-av-n {
  display: block;
  height: 24px;
  margin-top: 18px;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  font: 600 17px/20px var(--af-serif);
  color: var(--af-body);
  white-space: nowrap;
  transition: color 200ms var(--af-ease-out), border-color 200ms var(--af-ease-out);
}

.fl-av-p {
  display: block;
  height: 14px;
  margin-top: 4px;
  font: 500 10.5px/14px var(--af-caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--af-gray);
  white-space: nowrap;
}

.fl-av[aria-expanded="true"] .fl-av-n {
  color: var(--af-ink);
  border-color: var(--af-gold);
}

.fl-av:focus-visible {
  outline: 2px solid var(--af-gold);
  outline-offset: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .fl-av:hover .fl-av-dib {
    transform: translateY(-3px);
  }

  .fl-av:hover .fl-av-n {
    color: var(--af-ink);
  }
}

.fl-av:active .fl-av-dib {
  transform: translateY(-1px) scale(0.99);
}

/* Detalle «Bisel» (usuario, 10/11/2026: eligió el Bisel y pidió «más acorde al diseño nuevo de la página, más moderno, más
   pro»). Un objeto que flota sobre el hangar, con una flecha que sale del avión tocado (--cx). Habla el idioma de la ficha:
   la foto llega al borde del objeto (sin el marco interior de 8 px del Bisel del cotizador), el texto va sobre blanco, el nombre
   en Cormorant con el filete dorado de los títulos, los datos en filas con líneas finas como la ficha técnica y el control
   Exterior | Interior como el de la ficha. Un solo movimiento: al abrir, la foto entra apenas ampliada y se asienta.
   Sombra larga y suave porque flota (el manual la permite en lo que flota, nunca en contenido) */

.fl-det {
  --fl-r: 18px;
  position: relative;
  margin-top: 30px;
  border-radius: var(--fl-r);
  background: var(--af-white);
  box-shadow:
    0 0 0 1px rgba(22, 29, 41, 0.06),
    0 1px 2px rgba(22, 29, 41, 0.04),
    0 24px 60px -28px rgba(60, 50, 35, 0.28);
}

/* Mientras se despliega o se pliega (alto animado por flota-capa.js), lo que sobra se recorta */
.fl-det.is-anima {
  overflow: hidden;
}

/* Flecha hacia el avión tocado: --cx es el centro del dibujo medido desde el borde izquierdo del detalle */
.fl-det::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -7px;
  left: calc(var(--cx, 80px) - 7px);
  width: 14px;
  height: 14px;
  border-radius: 2px 0 0 0;
  background: var(--af-white);
  box-shadow: -1px -1px 0 rgba(22, 29, 41, 0.1);
  transform: rotate(45deg);
  /* Solo la mitad de arriba: la de abajo mordería la foto, que llega al borde */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transition: left 420ms var(--af-ease-out);
}

.fl-det-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
  overflow: hidden;
  border-radius: var(--fl-r);
}

.fl-det-media {
  position: relative;
  min-height: clamp(360px, 34vw, 500px);
  overflow: hidden;
  background: var(--af-cell);
}

.fl-det-foto {
  position: absolute;
  inset: 0;
  margin: 0;
  transition: opacity 360ms var(--af-ease-out), visibility 0s;
}

.fl-det-foto[hidden] {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: opacity 360ms var(--af-ease-out), visibility 0s 360ms;
}

.fl-det-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* El momento: al abrir, la foto se asienta (1,04 a 1) */
.fl-det.is-abre .fl-det-foto img {
  animation: fl-asienta 600ms var(--af-ease-out);
}

@keyframes fl-asienta {
  from {
    transform: scale(1.04);
  }
}

/* Exterior | Interior: el control de la ficha (chip blanco sobre cápsula clara), sobre la foto con desenfoque */
.fl-det-seg {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(235, 233, 229, 0.78);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.fl-det-seg button {
  min-width: 104px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: 500 11.5px/1 var(--af-caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--af-body);
  cursor: pointer;
  transition: background-color 200ms var(--af-ease-out), color 200ms var(--af-ease-out), box-shadow 200ms var(--af-ease-out);
}

.fl-det-seg button[aria-selected="true"] {
  background: var(--af-white);
  color: var(--af-ink);
  box-shadow: 0 1px 2px rgba(22, 29, 41, 0.08), 0 2px 6px -2px rgba(22, 29, 41, 0.12);
}

/* Pantallas táctiles: botones más altos (más cerca de los 44 px de Apple) */
@media (pointer: coarse) {
  .fl-det-seg button {
    height: 42px;
  }
}

.fl-det-seg button:focus-visible {
  outline: 2px solid var(--af-gold);
  outline-offset: 2px;
}

/* Texto: sobre blanco, alineado a la izquierda, con el aire de la ficha */
.fl-det-in {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 3.4vw, 52px) clamp(28px, 3.2vw, 48px);
}

.fl-det-x {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Con círculo de fondo para que se vea (usuario, 11/11/2026: «le falta al menos el fondo o el circulito alrededor») */
  background: var(--af-stone);
  box-shadow: inset 0 0 0 1px rgba(22, 29, 41, 0.06);
  color: var(--af-ink);
  cursor: pointer;
  transition: background-color 200ms var(--af-ease-out), color 200ms var(--af-ease-out);
}

.fl-det-x .hv-ic {
  width: 18px;
  height: 18px;
}

.fl-det-x:focus-visible {
  outline: 2px solid var(--af-gold);
  outline-offset: 2px;
}

.fl-det-tipo {
  margin: 0;
  font: 500 11.5px/1.3 var(--af-caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--af-gold-text);
}

.fl-det-h {
  margin: 12px 0 0;
  padding-right: 40px;
  font: 500 clamp(36px, 3.3vw, 48px)/1 var(--af-serif);
  letter-spacing: -0.02em;
  color: var(--af-ink);
  text-wrap: balance;
}

.fl-det .hv-rule-under {
  margin: 20px 0 0;
}

.fl-det-lead {
  margin: 20px 0 0;
  max-width: 38ch;
  font: 300 16px/1.6 var(--af-sans);
  color: var(--af-body);
  text-wrap: pretty;
}

/* Datos: filas de la ficha técnica (rótulo a la izquierda, cifra a la derecha, línea fina entre filas) */
.fl-det-dl {
  margin: 28px 0 0;
  border-bottom: 1px solid var(--af-line);
  font-variant-numeric: lining-nums;
}

.fl-det-dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0 12px;
  border-top: 1px solid var(--af-line);
}

.fl-det-dl dt {
  font: 500 11.5px/1.3 var(--af-caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--af-gray);
}

.fl-det-dl dd {
  margin: 0;
  font: 500 23px/1.1 var(--af-serif);
  color: var(--af-ink);
  white-space: nowrap;
}

.fl-det-dl small {
  margin-left: 5px;
  font: 400 13px/1 var(--af-sans);
  color: var(--af-gray);
}

.fl-det-acc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

.fl-det-acc .ae-btn {
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .fl-det-x:hover {
    background: var(--af-cell);
  }

  .fl-det-seg button[aria-selected="false"]:hover {
    color: var(--af-ink);
  }
}

@media (max-width: 1100px) {
  .fl-det-panel {
    position: relative;
    grid-template-columns: 1fr;
  }

  .fl-det-media {
    min-height: 0;
    height: min(54vw, 46svh);
  }

  .fl-det-lead {
    max-width: 60ch;
  }

  /* La flecha no va: el detalle se abre debajo de todo el estante (en filas), no del avión tocado */
  .fl-det::before {
    display: none;
  }

  /* La X va sobre la foto, arriba a la derecha, en un círculo blanco translúcido: abajo de la foto no se veía (usuario,
     11/11/2026) */
  .fl-det-in {
    position: static;
  }

  .fl-det-x,
  .fl-det .fl-det-x {
    z-index: 2;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--af-ink);
    box-shadow: 0 2px 10px -4px rgba(22, 29, 41, 0.35);
  }

  .fl-det-h {
    padding-right: 0;
  }
}

/* Celular y tablet hasta 1100 px (usuario, 11/11/2026: «¿es obvio para todos que hay que deslizar?» y «¿no convendría ir
   pasándolos hacia abajo?»): sin deslizar. Cada estante muestra todos sus aviones en filas, a la misma escala (el más largo, el GV,
   ocupa el ancho; tope 14 px por metro), cada uno con su línea de piso */
@media (max-width: 1100px) {
  .fl-in {
    --gap: 24px;
    --k: min(14px, calc(100cqw / 30));
  }

  .fl-est-l {
    flex-wrap: wrap;
    row-gap: 34px;
    width: auto;
  }

  .fl-est-l::after {
    display: none;
  }

  .fl-est-l li {
    position: relative;
  }

  .fl-est-l li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--lab);
    height: 1px;
    background: var(--af-line);
    pointer-events: none;
  }
}

@media (max-width: 767px) {

  .fl-av-pend i {
    display: none;
  }

  .fl-det {
    --fl-r: 16px;
  }

  /* Detalle compacto para que entre en la pantalla del celular (segunda revisión, 11/11/2026): foto más baja y sin la bajada
     (repite tipo y pasajeros, y sigue en el HTML para buscadores) */
  .fl-det-media {
    height: 56vw;
  }

  .fl-det-lead {
    display: none;
  }

  .fl-det-dl {
    margin-top: 20px;
  }

  /* Líneas entre los datos casi invisibles en el celular (usuario, 11/11/2026: «las rayitas sobran o en todo caso muy
     claritas»); quedan apenas para unir cada rótulo con su cifra */
  .fl-det-dl,
  .fl-det-dl div {
    border-color: rgba(22, 29, 41, 0.05);
  }

  .fl-det-seg {
    left: 12px;
    bottom: 12px;
  }

  .fl-det-seg button {
    min-width: 92px;
  }

  .fl-det-in {
    padding: 24px 20px 26px;
  }

  .fl-det-x {
    top: 10px;
    right: 10px;
  }

  .fl-det-acc {
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
  }

  .fl-det-acc .ae-hl {
    align-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-det.is-abre,
  .fl-det.is-abre .fl-det-foto img,
  .fl-det.is-anima {
    animation: none;
  }

  .fl-det::before,
  .fl-det-foto,
  .fl-det-foto[hidden],
  .fl-av-dib {
    transition: none;
  }
}

/* Preguntas frecuentes: el componente de la home (hv-faq, home-v3.css), sin capa propia (usuario, 11/11/2026: unificar) */