/* Generado por site/tools/armar-ficha-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/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;
  touch-action: none;
}

.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;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100dvh;
  box-sizing: border-box;
  padding: 72px 76px 64px;
}

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

.ae-viewer-cap {
  align-self: start;
  min-height: 3em;
  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);
  }
}