/* ==========================================================================
   El Viajero · Asesores de viajes
   Sistema de diseño global (CSS vanilla, sin build).
   Documentación: docs/design-system.md · Catálogo: docs/componentes.html
   Índice
     01 Fuentes            08 Hero (inicio)          15 Preguntas (FAQ)
     02 Tokens             09 Hero interior + migas  16 Formulario
     03 Reset y base       10 Banda de confianza     17 CTA final
     04 Tipografía         11 Bento de servicios     18 Footer
     05 Layout             12 Destinos (carrusel)    19 WhatsApp flotante
     06 Botones y enlaces  13 Pasos (cómo funciona)  20 Utilidades
     07 Header y menú      14 Listas, split, prueba  21 Movimiento
   ========================================================================== */

/* 01 · Fuentes (autohospedadas, subconjunto latin, OFL) ------------------- */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fira-sans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fira-sans-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fira-sans-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/fira-sans-extra-condensed-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/fira-sans-extra-condensed-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 02 · Tokens ------------------------------------------------------------- */
:root {
  /* Marca: azul eléctrico muestreado del logo (#0400FF) */
  --azul: #0400ff;
  --azul-600: #0300cc;
  --azul-700: #02009a;
  --azul-300: #9c9aff;
  --azul-100: #dcdcff;
  --azul-50: #eeeeff;

  /* Neutros cálidos (arena) y tinta azulada */
  --arena: #faf6ef;
  --arena-2: #f2ece1;
  --arena-3: #e8e0d2;
  --papel: #fffdf8;
  --tinta: #12122b;
  --tinta-2: #4a4a63;
  --tinta-3: #5e5e74;
  --noche: #0e0d2a;

  /* Acento cálido (atardecer). Solo decorativo o con texto --tinta encima. */
  --sol: #ff7a3d;
  --sol-700: #a33a0c;
  --sol-50: #fff0e6;

  /* Funcionales */
  --wa: #25d366;
  --wa-tinta: #073b1e;
  --error: #b42318;
  --error-50: #fdecea;
  --exito: #127a3e;
  --exito-50: #e7f6ec;

  /* Semánticos (claro) */
  --bg: var(--arena);
  --bg-alt: var(--arena-2);
  --surface: var(--papel);
  --surface-brand: var(--azul-50);
  --text: var(--tinta);
  --text-muted: var(--tinta-2);
  --text-subtle: var(--tinta-3);
  --brand: var(--azul);
  --brand-hover: var(--azul-600);
  --on-brand: #ffffff;
  --link: var(--azul);
  --border: rgb(18 18 43 / 0.12);
  --border-strong: rgb(18 18 43 / 0.28);
  --focus: var(--azul);
  --scrim: rgb(8 6 48 / 0.62);

  /* Tipografía */
  --font-display: "Fira Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: clamp(0.84rem, 0.81rem + 0.12vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
  --step-1: clamp(1.18rem, 1.08rem + 0.45vw, 1.38rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
  --step-3: clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --step-4: clamp(2.5rem, 1.85rem + 3.1vw, 4.4rem);
  --step-5: clamp(2.9rem, 2rem + 4.6vw, 5.8rem);

  /* Espaciado */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;
  --section-y: clamp(4rem, 2.6rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --container: 75rem;
  --container-narrow: 46rem;
  --header-h: 4.25rem;

  /* Forma: interactivo = píldora; tarjetas = 24px; medios grandes = 32px; campos = 12px */
  --r-field: 12px;
  --r-card: 24px;
  --r-media: 32px;
  --r-pill: 999px;

  /* Sombras teñidas de azul, nunca negras */
  --shadow-s: 0 1px 2px rgb(18 16 90 / 0.06), 0 4px 12px -4px rgb(18 16 90 / 0.08);
  --shadow-m: 0 18px 40px -18px rgb(18 16 120 / 0.28);
  --shadow-l: 0 40px 80px -30px rgb(18 16 120 / 0.35);
  --shadow-brand: 0 12px 28px -12px rgb(4 0 255 / 0.55);

  /* Movimiento (curvas de Emil Kowalski) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --d-press: 140ms;
  --d-fast: 180ms;
  --d-base: 240ms;
  --d-reveal: 700ms;

  /* Capas */
  --z-header: 40;
  --z-float: 50;
  --z-menu: 60;
  --z-skip: 70;

  /* Motivo: avión del logo (Phosphor airplane-fill, girado a la derecha) */
  --avion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath transform='rotate(90 128 128)' d='M240,136v32a8,8,0,0,1-8,8,7.61,7.61,0,0,1-1.57-.16L156,161v23.73l17.66,17.65A8,8,0,0,1,176,208v24a8,8,0,0,1-11,7.43l-37-14.81L91,239.43A8,8,0,0,1,80,232V208a8,8,0,0,1,2.34-5.66L100,184.69V161L25.57,175.84A7.61,7.61,0,0,1,24,176a8,8,0,0,1-8-8V136a8,8,0,0,1,4.42-7.16L100,89.06V44a28,28,0,0,1,56,0V89.06l79.58,39.78A8,8,0,0,1,240,136Z'/%3E%3C/svg%3E");

  color-scheme: light dark;
  interpolate-size: allow-keywords;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b1f;
    --bg-alt: #111129;
    --surface: #16163a;
    --surface-brand: #1a1850;
    --text: #f4f2ec;
    --text-muted: #c4c3d6;
    --text-subtle: #b9b8cc;
    --brand: #3d3aff;
    --brand-hover: #5754ff;
    --link: var(--azul-300);
    --border: rgb(244 242 236 / 0.12);
    --border-strong: rgb(244 242 236 / 0.3);
    --focus: var(--azul-300);
    --sol-700: #ffae85;
    --sol-50: #2a1a18;
    --error: #ff8a80;
    --error-50: #2d1418;
    --exito: #7ee2a3;
    --exito-50: #10261b;
    --shadow-s: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-m: 0 18px 40px -18px rgb(0 0 0 / 0.6);
    --shadow-l: 0 40px 80px -30px rgb(0 0 0 / 0.7);
  }
}

/* 03 · Reset y base -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
a,
button,
[role="button"],
summary,
label {
  touch-action: manipulation;
}
p,
li,
h1,
h2,
h3,
h4,
figcaption {
  overflow-wrap: break-word;
}
:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  padding: 0;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--azul);
  color: #fff;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-brand,
.on-photo,
.site-footer {
  --focus: #ffffff;
}

/* Enlace para saltar al contenido */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-skip);
  padding: 0.75rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--azul);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--d-fast) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* 04 · Tipografía ----------------------------------------------------------- */
h1,
h2,
h3,
.h1,
.h2,
.h3,
.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--text);
  text-wrap: balance;
}
h1,
.h1 {
  font-size: var(--step-4);
  font-weight: 900;
}
h2,
.h2 {
  font-size: var(--step-3);
}
h3,
.h3 {
  font-size: var(--step-2);
  line-height: 1.08;
}
h4,
.h4 {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
}
.display {
  font-size: var(--step-5);
  font-weight: 900;
  line-height: 0.95;
}
p {
  text-wrap: pretty;
}
.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 60ch;
}
.muted {
  color: var(--text-muted);
}
.small {
  font-size: var(--step--1);
}
strong,
b {
  font-weight: 600;
}
a {
  color: var(--link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  inline-size: 1.15em;
  block-size: 1.15em;
  background: currentColor;
  -webkit-mask: var(--avion) center / contain no-repeat;
  mask: var(--avion) center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  .eyebrow {
    color: var(--azul-300);
  }
}
.on-brand .eyebrow,
.on-photo .eyebrow {
  color: #fff;
}

/* Subrayado de ruta: línea punteada del logo + avión al final */
.flight-underline {
  white-space: nowrap;
  background-image: repeating-linear-gradient(90deg, currentColor 0 0.28em, transparent 0.28em 0.46em);
  background-size: calc(100% - 0.62em) 0.07em;
  background-position: 0 92%;
  background-repeat: no-repeat;
}
/* El avión va en línea, pegado a la última palabra: nunca queda solo en otra línea */
.flight-underline::after {
  content: "";
  display: inline-block;
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-left: 0.06em;
  vertical-align: -0.02em;
  background: currentColor;
  -webkit-mask: var(--avion) center / contain no-repeat;
  mask: var(--avion) center / contain no-repeat;
}
.flight-underline--wrap {
  white-space: normal;
}

/* Texto largo (aviso de privacidad, respuestas extensas) */
.prose {
  max-width: 68ch;
}
.prose > * + * {
  margin-top: 1em;
}
.prose h2 {
  font-size: var(--step-2);
  margin-top: 2.2em;
}
.prose h3 {
  font-size: var(--step-1);
  margin-top: 1.8em;
}
.prose ul,
.prose ol {
  padding-left: 1.25em;
}
.prose li + li {
  margin-top: 0.4em;
}

/* 05 · Layout ------------------------------------------------------------------ */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow {
  width: min(100% - 2 * var(--gutter), var(--container-narrow));
  margin-inline: auto;
}
.section {
  padding-block: var(--section-y);
}
.section--alt {
  background: var(--bg-alt);
}
.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}
.section:not(.section--brand) + .section:not(.section--alt):not(.section--flush):not(.section--brand) {
  padding-top: calc(var(--section-y) * 0.5);
}
.section-head {
  display: grid;
  gap: var(--space-s);
  max-width: 44rem;
  margin-bottom: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.section-head p {
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-s));
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-s));
}
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-l));
}
@media (min-width: 48em) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Split asimétrico texto / imagen */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
@media (min-width: 56em) {
  .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .split--reverse > :first-child {
    order: 2;
  }
  .split--top {
    align-items: start;
  }
}

/* Medios con proporción fija y esquinas de 32px */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--arena-3);
  aspect-ratio: var(--ratio, 4 / 3);
}
.media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.media--portrait {
  --ratio: 4 / 5;
}
.media--wide {
  --ratio: 16 / 9;
}
.media--square {
  --ratio: 1;
}

/* Doble bisel: carcasa + núcleo concéntricos */
.bezel {
  padding: 6px;
  border-radius: calc(var(--r-card) + 6px);
  background: color-mix(in srgb, var(--brand) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
}
.bezel__core {
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), var(--shadow-s);
}
@media (prefers-color-scheme: dark) {
  .bezel__core {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), var(--shadow-s);
  }
}

/* 06 · Botones y enlaces ------------------------------------------------------ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-block-size: 3rem;
  padding: 0.7em 1.5em;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition:
    transform var(--d-press) var(--ease-out),
    background-color var(--d-fast) ease,
    border-color var(--d-fast) ease,
    color var(--d-fast) ease,
    box-shadow var(--d-fast) ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn svg {
  inline-size: 1.3em;
  block-size: 1.3em;
  flex: none;
}
/* Botón dentro de botón: ícono en su propio círculo */
.btn__icon {
  display: grid;
  place-items: center;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  margin-block: -0.35rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
  transition: transform var(--d-base) var(--ease-out);
}
.btn:has(> .btn__icon) {
  gap: 0.75rem;
  padding-inline-start: 0.45rem;
  padding-inline-end: 1.6em;
}
.btn.btn--icon-end:has(> .btn__icon) {
  gap: 0.75rem;
  padding-inline-start: 1.6em;
  padding-inline-end: 0.45rem;
}
.btn__icon svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}
.btn--primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--on-brand);
  box-shadow: var(--shadow-brand);
}
.btn--secondary {
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
}
.btn--secondary .btn__icon {
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  color: var(--brand);
}
.btn--light {
  --btn-bg: #fffdf8;
  --btn-fg: var(--azul);
}
.btn--light .btn__icon {
  background: var(--azul-50);
}
.btn--outline-light {
  --btn-fg: #fff;
  --btn-bd: rgb(255 255 255 / 0.7);
}
.btn--sm {
  min-block-size: 2.6rem;
  padding: 0.5em 1.1em;
  font-size: 0.94rem;
}
.btn--sm .btn__icon {
  inline-size: 1.8rem;
  block-size: 1.8rem;
}
.btn--sm:has(> .btn__icon) {
  gap: 0.55rem;
  padding-inline-start: 0.4rem;
  padding-inline-end: 1.15em;
}
.btn--lg {
  min-block-size: 3.5rem;
  padding: 0.85em 1.8em;
  font-size: 1.06rem;
}
.btn--lg:has(> .btn__icon) {
  padding-inline-start: 0.6rem;
  padding-inline-end: 1.8em;
}
.btn--lg.btn--icon-end:has(> .btn__icon) {
  padding-inline-start: 1.8em;
  padding-inline-end: 0.6rem;
}
.btn--block {
  inline-size: 100%;
}
@media (max-width: 30em) {
  .btn--block-mobile {
    inline-size: 100%;
  }
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    --btn-bg: var(--brand-hover);
  }
  .btn--secondary:hover {
    --btn-bd: var(--text);
  }
  .btn--light:hover {
    --btn-bg: #ffffff;
  }
  .btn--outline-light:hover {
    --btn-bg: rgb(255 255 255 / 0.12);
    --btn-bd: #fff;
  }
  .btn:hover .btn__icon:last-child {
    transform: translate(2px, -1px) scale(1.05);
  }
}

/* Enlace con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}
.link-arrow svg {
  inline-size: 1.1em;
  block-size: 1.1em;
  transition: transform var(--d-fast) var(--ease-out);
}
.link-arrow span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size var(--d-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover svg {
    transform: translateX(3px);
  }
  .link-arrow:hover span {
    background-size: 100% 1.5px;
  }
}

/* Enlaces relacionados en píldora ("También te puede interesar") */
.pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
}
.pill-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-block-size: 2.75rem;
  padding: 0.45em 1.1em;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  transition:
    box-shadow var(--d-fast) ease,
    color var(--d-fast) ease,
    transform var(--d-press) var(--ease-out);
}
.pill-links a svg {
  inline-size: 1em;
  block-size: 1em;
  color: var(--brand);
}
.pill-links a:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .pill-links a:hover {
    box-shadow: inset 0 0 0 1.5px var(--brand);
    color: var(--link);
  }
}

/* Íconos en línea */
.icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

/* 07 · Header y menú ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow var(--d-base) ease;
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--border), 0 10px 30px -22px rgb(18 16 120 / 0.35);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-block-size: var(--header-h);
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-inline-end: auto;
  padding-block: 0.4rem;
  border-radius: 8px;
}
.site-header__logo img {
  inline-size: auto;
  block-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.8rem);
}
.site-header__cta {
  flex: none;
}

/* Navegación de escritorio */
.nav {
  display: none;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  padding: 0;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-block-size: 2.75rem;
  padding: 0.4rem 0.7rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--d-fast) ease, color var(--d-fast) ease;
}
.nav__link svg {
  inline-size: 0.9em;
  block-size: 0.9em;
  transition: transform var(--d-fast) var(--ease-out);
}
.nav__link[aria-current="page"],
.nav__more-btn.is-current {
  color: var(--link);
}
.nav__link[aria-current="page"]::after,
.nav__more-btn.is-current::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.35rem;
  block-size: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
}
.nav__more {
  position: relative;
}
.nav__more-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-inline-size: 15rem;
  padding: 0.4rem;
  list-style: none;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-m);
  transform-origin: top right;
  animation: dropdown-in var(--d-fast) var(--ease-out);
}
.nav__dropdown a {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.nav__dropdown a[aria-current="page"] {
  color: var(--link);
  background: var(--surface-brand);
}
@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover {
    background: color-mix(in srgb, var(--brand) 7%, transparent);
  }
  .nav__dropdown a:hover {
    background: color-mix(in srgb, var(--brand) 7%, transparent);
  }
}

/* Botón de menú (hamburguesa que se vuelve X) */
.menu-toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-fast) ease;
}
.menu-toggle:active {
  transform: scale(0.94);
}
.menu-toggle__lines,
.menu-toggle__lines::before,
.menu-toggle__lines::after {
  display: block;
  inline-size: 1.2rem;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast) ease;
}
.menu-toggle__lines {
  position: relative;
}
.menu-toggle__lines::before,
.menu-toggle__lines::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-toggle__lines::before {
  transform: translateY(-6px);
}
.menu-toggle__lines::after {
  transform: translateY(6px);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__lines {
  background: transparent;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::before {
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::after {
  transform: rotate(-45deg);
}

/* Menú móvil: hoja que baja desde el header */
.mobile-menu {
  position: fixed;
  inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0;
  z-index: var(--z-menu);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-m) var(--gutter) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity var(--d-base) var(--ease-out),
    transform 320ms var(--ease-drawer);
}
.mobile-menu[data-open="true"] {
  opacity: 1;
  transform: none;
}
.mobile-menu__group + .mobile-menu__group {
  margin-top: var(--space-l);
}
.mobile-menu__label {
  margin-bottom: var(--space-2xs);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.mobile-menu__list {
  list-style: none;
  padding: 0;
}
.mobile-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 3.25rem;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
}
.mobile-menu__list a svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  color: var(--text-subtle);
}
.mobile-menu__list a[aria-current="page"] {
  color: var(--link);
}
.mobile-menu__list a[aria-current="page"] svg {
  color: currentColor;
}
.mobile-menu__list--compact a {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  min-block-size: 3rem;
}
.mobile-menu__foot {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-l);
}
.mobile-menu__foot p {
  color: var(--text-muted);
  font-size: var(--step--1);
}
/* Entrada escalonada de los enlaces al abrir */
.mobile-menu li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 35ms + 60ms);
}
.mobile-menu[data-open="true"] li {
  opacity: 1;
  transform: none;
}
html.is-menu-open {
  overflow: hidden;
}

@media (min-width: 80em) {
  .nav {
    display: block;
  }
  .nav__link {
    padding-inline: 0.5rem;
  }
  .menu-toggle,
  .mobile-menu {
    display: none !important;
  }
  .site-header__logo {
    margin-inline-end: var(--space-s);
  }
  .nav {
    margin-inline-end: auto;
  }
}
@media (max-width: 22.5em) {
  .site-header__cta .btn__label {
    display: none;
  }
  .site-header__cta {
    padding-inline: 0.75rem;
  }
  .site-header__cta.btn {
    padding-inline: 0.4rem;
  }
}

/* 08 · Hero de inicio (foto a sangre) -------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-block-size: min(88svh, 52rem);
  margin-top: calc(-1 * var(--header-h) - env(safe-area-inset-top, 0px));
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--space-xl));
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  color: #fff;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, 50% 50%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Scrim reforzado: arriba (menú sobre cielo/nubes) + detrás del bloque de texto + diagonal inferior */
  background:
    linear-gradient(180deg, rgb(8 6 48 / 0.62) 0%, rgb(8 6 48 / 0.3) 14%, rgb(8 6 48 / 0) 34%),
    radial-gradient(ellipse 62% 70% at 22% 72%, rgb(8 6 48 / 0.62) 0%, rgb(8 6 48 / 0.3) 55%, rgb(8 6 48 / 0) 80%),
    linear-gradient(15deg, rgb(8 6 48 / 0.88) 0%, rgb(8 6 48 / 0.62) 38%, rgb(8 6 48 / 0) 72%);
}
.hero__content {
  display: grid;
  gap: var(--space-m);
  max-width: 44rem;
}
.hero__title {
  color: #fff;
  font-size: var(--step-5);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.01em;
}
.hero__title,
.hero .eyebrow,
.hero .breadcrumbs {
  text-shadow: 0 1px 2px rgb(8 6 48 / 0.55), 0 2px 20px rgb(8 6 48 / 0.35);
}
.hero__lead {
  text-shadow: 0 1px 2px rgb(8 6 48 / 0.45);
}
.hero__lead {
  max-width: 36rem;
  color: rgb(255 255 255 / 0.9);
  font-size: var(--step-1);
  line-height: 1.5;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
}
.hero__note {
  color: rgb(255 255 255 / 0.82);
  font-size: var(--step--1);
}
@media (max-width: 30em) {
  .hero__actions .btn {
    inline-size: 100%;
  }
}
/* Hero interior a sangre (Todo incluido, Bodas, Parques): mismo lenguaje que Inicio, más bajo */
.hero--page {
  min-block-size: min(76svh, 44rem);
}
@media (min-width: 48em) {
  .hero--page::before {
    background:
      linear-gradient(180deg, rgb(8 6 48 / 0.78) 0%, rgb(8 6 48 / 0.4) 13%, rgb(8 6 48 / 0) 32%),
      radial-gradient(ellipse 62% 70% at 22% 72%, rgb(8 6 48 / 0.62) 0%, rgb(8 6 48 / 0.3) 55%, rgb(8 6 48 / 0) 80%),
      linear-gradient(15deg, rgb(8 6 48 / 0.88) 0%, rgb(8 6 48 / 0.62) 38%, rgb(8 6 48 / 0) 72%);
  }
}
.hero--page .hero__content {
  max-width: 54rem;
}
.hero--page .hero__lead {
  max-width: 38rem;
}
.hero--page .hero__title {
  font-size: var(--step-4);
}
.hero .breadcrumbs ol {
  color: rgb(255 255 255 / 0.8);
}
.hero .breadcrumbs a {
  color: rgb(255 255 255 / 0.88);
}
.hero .breadcrumbs [aria-current="page"] {
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .hero .breadcrumbs a:hover {
    color: #fff;
  }
}
/* Móvil: la foto va arriba en una franja nítida y el texto sobre azul noche (contraste AAA, sin recorte ampliado) */
@media (max-width: 47.99em) {
  .hero {
    --hero-media-h: clamp(16rem, 30vw + 12rem, 24rem);
    display: block;
    min-block-size: 0;
    padding-top: calc(var(--hero-media-h) - 2.25rem);
    padding-bottom: 2.75rem;
    background: var(--noche);
  }
  .hero__media {
    inset: 0 0 auto 0;
    block-size: var(--hero-media-h);
  }
  .hero::before {
    inset: 0 0 auto 0;
    block-size: calc(var(--hero-media-h) + 1px);
    background: linear-gradient(180deg, rgb(8 6 48 / 0.55) 0%, rgb(8 6 48 / 0) 30%, rgb(14 13 42 / 0) 52%, rgb(14 13 42 / 0.85) 86%, #0e0d2a 100%);
  }
  .hero__title {
    font-size: var(--step-4);
  }
  .hero__content {
    gap: var(--space-s);
  }
}
/* Header transparente sobre el hero a sangre: se activa solo si la página tiene .hero (sin tocar el partial) */
body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  --text: #fff;
}
body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) .site-header__logo img {
  content: url("../img/logo-wordmark-blanco.png");
}
body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) .nav__link {
  text-shadow: 0 1px 2px rgb(8 6 48 / 0.6), 0 0 14px rgb(8 6 48 / 0.35);
}
body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) .menu-toggle {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}
body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) .site-header__cta {
  --btn-bg: #fffdf8;
  --btn-fg: var(--azul);
  box-shadow: none;
}
body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) .site-header__cta .btn__icon {
  background: var(--azul-50);
}
body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) {
  --focus: #fff;
  --link: #fff;
}
/* El desplegable "Más" tiene fondo claro: recupera los colores normales aunque el header sea transparente */
body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) .nav__dropdown {
  --text: var(--tinta);
  --link: var(--azul);
  --focus: var(--azul);
}
body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) .nav__dropdown a {
  text-shadow: none;
}
@media (prefers-color-scheme: dark) {
  body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) .nav__dropdown {
    --text: #f4f2ec;
    --link: var(--azul-300);
    --focus: var(--azul-300);
  }
}

/* 09 · Hero interior + migas de pan ------------------------------------------------ */
.page-hero {
  padding-top: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.page-hero__grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.page-hero__text {
  display: grid;
  gap: var(--space-m);
}
.page-hero__text h1 {
  max-width: 18ch;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.page-hero__media {
  position: relative;
}
.page-hero__media .media {
  --ratio: 5 / 4;
  box-shadow: var(--shadow-l);
}
/* Ruta punteada que envuelve la foto, con el avión al final */
.page-hero__media::before {
  content: "";
  position: absolute;
  inset: -14px -14px auto auto;
  inline-size: 62%;
  block-size: 58%;
  border-top: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent);
  border-right: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent);
  border-top-right-radius: calc(var(--r-media) + 14px);
  pointer-events: none;
}
.page-hero__media::after {
  content: "";
  position: absolute;
  top: -24px;
  right: 58%;
  inline-size: 20px;
  block-size: 20px;
  background: var(--brand);
  -webkit-mask: var(--avion) center / contain no-repeat;
  mask: var(--avion) center / contain no-repeat;
  transform: scaleX(-1);
}
@media (min-width: 56em) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
  .page-hero__media .media {
    --ratio: 4 / 5;
  }
}
@media (max-width: 30em) {
  .page-hero__actions .btn {
    inline-size: 100%;
  }
}
/* Variante sin foto (FAQ, aviso, contacto) */
.page-hero--plain .page-hero__grid {
  grid-template-columns: 1fr;
}
.page-hero--plain .page-hero__text h1 {
  max-width: 22ch;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  font-size: var(--step--1);
  color: var(--text-subtle);
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.breadcrumbs li + li::before {
  content: "";
  inline-size: 0.8rem;
  block-size: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px);
}
.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
  padding-block: 0.4rem;
}
.breadcrumbs [aria-current="page"] {
  color: var(--text);
  font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumbs a:hover {
    color: var(--link);
    text-decoration: underline;
  }
}

/* 10 · Banda de confianza -------------------------------------------------------- */
.trust-band {
  border-block: 1px solid var(--border);
  background: var(--surface);
}
.trust-band__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  padding: 0;
}
.trust-band__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
}
.trust-band__item:nth-child(odd) {
  padding-left: 0;
}
.trust-band__item:nth-child(n + 3) {
  border-top: 1px solid var(--border);
}
.trust-band__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--surface-brand);
  color: var(--brand);
}
.trust-band__icon svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
}
@media (min-width: 60em) {
  .trust-band__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .trust-band__item,
  .trust-band__item:nth-child(odd) {
    padding: 1.4rem 1.25rem;
  }
  .trust-band__item:first-child {
    padding-left: 0;
  }
  .trust-band__item:nth-child(n + 3) {
    border-top: 0;
  }
  .trust-band__item + .trust-band__item {
    border-left: 1px solid var(--border);
  }
}

/* 11 · Bento de servicios --------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
}
.bento > li {
  display: grid;
}
.bento__wide,
.bento__hero {
  grid-column: span 2;
}
@media (min-width: 60em) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(13.5rem, auto);
    gap: 1rem;
  }
  .bento > li {
    grid-column: span 4;
  }
  .bento > .bento__hero {
    grid-column: span 7;
    grid-row: span 2;
  }
  .bento > .bento__side {
    grid-column: span 5;
  }
  .bento > .bento__half {
    grid-column: span 6;
  }
}

.tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 12rem;
  padding: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: transform var(--d-press) var(--ease-out), box-shadow var(--d-base) ease;
}
.tile:active {
  transform: scale(0.985);
}
.tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.tile--img {
  color: #fff;
  box-shadow: none;
  --focus: #fff;
}
.tile--img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(8 6 48 / 0) 30%, rgb(8 6 48 / 0.78) 100%);
}
.tile__title {
  color: inherit;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
}
.bento__hero .tile__title {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
}
.tile__text {
  margin-top: 0.35rem;
  max-width: 38ch;
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.92;
}
.tile__go {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--azul);
  transition: transform var(--d-base) var(--ease-out);
}
.tile__go svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}
.tile--plain {
  justify-content: space-between;
  background: var(--surface-brand);
  box-shadow: none;
}
.tile--plain .tile__go {
  background: var(--brand);
  color: #fff;
}
.tile__mark {
  inline-size: 2.4rem;
  block-size: 2.4rem;
  color: var(--brand);
}
@media (max-width: 59.99em) {
  .bento__wide .tile,
  .bento__hero .tile {
    min-block-size: 15rem;
  }
  .bento__hero .tile {
    min-block-size: 19rem;
  }
  .bento li:not(.bento__wide):not(.bento__hero) .tile__text {
    display: none;
  }
  .bento li:not(.bento__wide):not(.bento__hero) .tile__title {
    font-size: 1.35rem;
  }
  .bento li:not(.bento__wide):not(.bento__hero) .tile__go {
    top: 0.75rem;
    right: 0.75rem;
    inline-size: 2.1rem;
    block-size: 2.1rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__media {
    transform: scale(1.04);
  }
  .tile:hover .tile__go {
    transform: translate(2px, -2px) rotate(-45deg);
  }
  .tile--plain:hover {
    box-shadow: inset 0 0 0 1.5px var(--brand);
  }
}

/* Tarjeta simple con imagen arriba (servicios relacionados, destinos en grid) */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  color: var(--text);
  text-decoration: none;
}
.card .media {
  border-radius: var(--r-card);
}
.card .media img {
  transition: transform 900ms var(--ease-out);
}
.card__title {
  font-size: var(--step-2);
}
.card__text {
  color: var(--text-muted);
  font-size: 0.98rem;
}
@media (hover: hover) and (pointer: fine) {
  a.card:hover .media img {
    transform: scale(1.04);
  }
  a.card:hover .card__title {
    color: var(--link);
  }
}

/* 12 · Destinos: carrusel horizontal con scroll-snap -------------------------------------- */
.destinos {
  --card-w: min(78vw, 19rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  gap: var(--space-s);
  margin-inline: calc(-1 * var(--gutter));
  padding: 0.25rem var(--gutter) 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  list-style: none;
}
.destinos > li {
  scroll-snap-align: start;
}
@media (min-width: 64em) {
  .destinos {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    grid-auto-columns: auto;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    column-gap: var(--space-l);
    row-gap: var(--space-xl);
  }
  .destinos > li:nth-child(3n + 2) {
    transform: translateY(2.5rem);
  }
  .destinos--flat > li:nth-child(3n + 2) {
    transform: none;
  }
}
.destino {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  color: var(--text);
  text-decoration: none;
}
.destino .media {
  --ratio: 4 / 5;
  border-radius: var(--r-card);
}
.destino .media img {
  transition: transform 900ms var(--ease-out);
}
.destino__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--step-2);
}
.destino__name svg {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  color: var(--brand);
  transition: transform var(--d-fast) var(--ease-out);
}
.destino__text {
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  a.destino:hover .media img {
    transform: scale(1.05);
  }
  a.destino:hover .destino__name svg {
    transform: translate(3px, -3px);
  }
}

/* 13 · Pasos (cómo funciona) con ruta punteada y avión -------------------------------------- */
.steps {
  --dot: 3.25rem;
  position: relative;
  display: grid;
  gap: var(--space-l);
  list-style: none;
  padding: 0;
  counter-reset: paso;
}
.steps::before {
  content: "";
  position: absolute;
  top: calc(var(--dot) / 2);
  bottom: calc(var(--dot) / 2);
  left: calc(var(--dot) / 2 - 1px);
  inline-size: 2px;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--brand) 60%, transparent) 0 6px, transparent 6px 12px);
}
.steps__plane {
  position: absolute;
  top: calc(var(--dot) / 2);
  left: calc(var(--dot) / 2 - 0.8rem);
  inline-size: 1.6rem;
  block-size: 1.6rem;
  color: var(--brand);
  transform: rotate(90deg);
  pointer-events: none;
}
.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--dot) 1fr;
  column-gap: var(--space-m);
  counter-increment: paso;
}
.steps__item::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  inline-size: var(--dot);
  block-size: var(--dot);
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  box-shadow: 0 0 0 6px var(--bg);
  position: relative;
  z-index: 1;
}
.section--alt .steps__item::before {
  box-shadow: 0 0 0 6px var(--bg-alt);
}
.steps__body {
  padding-top: 0.55rem;
}
.steps__title {
  font-size: var(--step-2);
}
.steps__text {
  margin-top: 0.4rem;
  color: var(--text-muted);
  max-width: 40ch;
}
@media (min-width: 60em) {
  .steps {
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    gap: var(--space-l);
  }
  .steps::before {
    top: calc(var(--dot) / 2 - 1px);
    bottom: auto;
    left: calc(var(--dot) / 2);
    right: calc((100% - (var(--n, 4) - 1) * var(--space-l)) / var(--n, 4) - var(--dot) / 2);
    inline-size: auto;
    block-size: 2px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--brand) 60%, transparent) 0 6px, transparent 6px 12px);
  }
  .steps__plane {
    top: calc(var(--dot) / 2 - 0.8rem);
    left: calc(var(--dot) / 2);
    transform: none;
  }
  .steps__item {
    grid-template-columns: 1fr;
    row-gap: var(--space-s);
  }
  .steps__body {
    padding-top: 0;
  }
}

/* 14 · Listas, beneficios, sobre, prueba social ---------------------------------------------------- */
.check-list {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  padding: 0;
}
.check-list li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.check-list li::before {
  content: "";
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E")
      center / 0.9rem no-repeat,
    var(--brand);
}
.check-list .opcional {
  color: var(--text-subtle);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.35rem;
}
@media (min-width: 48em) {
  .check-list--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }
}

/* Beneficios: filas con ícono ligero y línea superior (sin tarjetas) */
.features {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
}
.features__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-s);
  padding-block: var(--space-m);
  border-top: 1px solid var(--border);
}
.features__icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--surface-brand);
  color: var(--brand);
}
.features__icon svg {
  inline-size: 1.55rem;
  block-size: 1.55rem;
}
.features__title {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
}
.features__text {
  margin-top: 0.3rem;
  color: var(--text-muted);
}
@media (min-width: 56em) {
  .features--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }
}

/* Sello de confianza / datos de la agencia */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem 0.85rem 0.85rem;
  border: 2px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  border-radius: var(--r-pill);
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}
.stamp__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}
.stamp__icon svg {
  inline-size: 1.4rem;
  block-size: 1.4rem;
}

/* Datos de contacto */
.contact-list {
  display: grid;
  gap: var(--space-s);
  list-style: none;
  padding: 0;
}
.contact-list li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.9rem;
  align-items: center;
}
.contact-list__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--surface-brand);
  color: var(--brand);
}
.contact-list__icon svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
}
.contact-list__label {
  display: block;
  font-size: var(--step--1);
  color: var(--text-subtle);
}
.contact-list a {
  overflow-wrap: anywhere; /* correos largos no desbordan en 320-390 px */
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}
@media (hover: hover) and (pointer: fine) {
  .contact-list a:hover {
    color: var(--link);
    text-decoration: underline;
  }
}

/* Prueba social: enlaces a opiniones reales (Facebook / Instagram), nunca testimonios inventados */
.proof {
  display: grid;
  gap: var(--space-m);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--r-media);
  background: var(--surface-brand);
}
.proof__title {
  font-size: var(--step-3);
  max-width: 20ch;
}
.proof__text {
  color: var(--text-muted);
  max-width: 50ch;
}
.proof__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
@media (min-width: 56em) {
  .proof {
    grid-template-columns: 1.2fr auto;
    align-items: end;
  }
}

/* Sección de subtemas con ancla (grupos y eventos) */
.topic {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-block: var(--space-xl);
}
.topic + .topic {
  border-top: 1px solid var(--border);
}
.topic__text {
  display: grid;
  gap: var(--space-s);
}
.topic .media {
  --ratio: 4 / 3;
}
@media (min-width: 56em) {
  .topic {
    grid-template-columns: 5fr 7fr;
  }
  .topic:nth-of-type(even) .topic__media {
    order: 2;
  }
  .topic:nth-of-type(even) {
    grid-template-columns: 7fr 5fr;
  }
}

/* 15 · Preguntas frecuentes ---------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 0.6rem;
}
.faq__item {
  border-radius: 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--d-fast) ease;
}
.faq__item[open] {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 45%, transparent), var(--shadow-s);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 3.5rem;
  padding: 1rem 1.25rem;
  border-radius: 20px;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q-text {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}
.faq__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--surface-brand);
  color: var(--brand);
  transition: transform var(--d-base) var(--ease-out), background-color var(--d-fast) ease;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inline-size: 0.85rem;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
}
.faq__icon::after {
  transform: rotate(90deg);
  transition: transform var(--d-base) var(--ease-out);
}
.faq__item[open] .faq__icon {
  background: var(--brand);
  color: #fff;
}
.faq__item[open] .faq__icon::after {
  transform: rotate(0deg);
}
.faq__a {
  padding: 0 1.25rem 1.25rem;
  color: var(--text-muted);
  max-width: 70ch;
}
.faq__a > * + * {
  margin-top: 0.75em;
}
/* Apertura suave donde el navegador lo soporta (mejora progresiva) */
.faq__item::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size var(--d-base) var(--ease-out),
    opacity var(--d-base) var(--ease-out),
    content-visibility var(--d-base) allow-discrete;
}
.faq__item[open]::details-content {
  block-size: auto;
  opacity: 1;
}
.faq-group + .faq-group {
  margin-top: var(--space-2xl);
}
.faq-group__title {
  margin-bottom: var(--space-m);
  font-size: var(--step-2);
}
.updated {
  color: var(--text-subtle);
  font-size: var(--step--1);
}

/* 16 · Formulario de cotización ------------------------------------------------------------------ */
.quote-form {
  display: grid;
  gap: var(--space-m);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}
.form-grid {
  display: grid;
  gap: var(--space-m) var(--space-m);
}
@media (min-width: 40em) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field--full {
    grid-column: 1 / -1;
  }
}
.field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.field__label {
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.3;
}
.field__req {
  color: var(--error);
  margin-left: 0.15em;
}
.field__opt {
  color: var(--text-subtle);
  font-weight: 400;
  font-size: 0.88rem;
}
.field__hint {
  color: var(--text-subtle);
  font-size: 0.88rem;
  line-height: 1.4;
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--error);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
}
.field__error:empty {
  display: none;
}
.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--error);
  color: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
}
.input,
.select,
.textarea {
  inline-size: 100%;
  min-block-size: 3.1rem;
  padding: 0.75rem 0.95rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-field);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--d-fast) ease, box-shadow var(--d-fast) ease;
}
.textarea {
  min-block-size: 7.5rem;
  resize: vertical;
}
.select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%230400ff'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 1.1rem;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--text-subtle);
  opacity: 1;
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
}
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--error);
  background-color: var(--error-50);
}
.field--inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}
.check {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.97rem;
  line-height: 1.45;
}
.check input {
  appearance: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: background-color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.check input::after {
  content: "";
  inline-size: 0.9rem;
  block-size: 0.9rem;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0.6);
  opacity: 0;
  transition: transform var(--d-fast) var(--ease-out), opacity var(--d-fast) ease;
}
.check input:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.check input:checked::after {
  transform: none;
  opacity: 1;
}
.check input[aria-invalid="true"] {
  border-color: var(--error);
}
.check input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.form-summary {
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: var(--error-50);
  color: var(--error);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 35%, transparent);
}
.form-summary:empty,
.form-status:empty {
  display: none;
}
.form-summary:focus {
  outline: none;
}
.form-status {
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: var(--exito-50);
  color: var(--exito);
  font-weight: 500;
}
.form-status a {
  color: inherit;
  font-weight: 600;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}
.form-note {
  color: var(--text-subtle);
  font-size: 0.9rem;
  line-height: 1.45;
}
@media (max-width: 30em) {
  .form-actions .btn {
    inline-size: 100%;
  }
}

/* 17 · CTA final (bloque azul de marca dentro del contenedor) ------------------------------------ */
.cta-final {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-m);
  padding: clamp(2rem, 1.2rem + 4vw, 5rem);
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--azul);
  color: #fff;
  --focus: #fff;
}
.cta-final__title {
  color: #fff;
  font-size: var(--step-4);
  font-weight: 900;
  max-width: 16ch;
}
.cta-final__text {
  max-width: 46ch;
  color: rgb(255 255 255 / 0.9);
  font-size: var(--step-1);
  line-height: 1.5;
}
.cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-2xs);
}
.cta-final__actions a:not(.btn) {
  color: #fff;
  font-weight: 600;
}
.cta-final__note {
  color: rgb(255 255 255 / 0.8);
  font-size: var(--step--1);
}
/* Ruta del logo: línea punteada + avión cruzando el bloque */
.cta-final::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6%;
  top: 14%;
  inline-size: 58%;
  aspect-ratio: 2 / 1;
  border: 2px dashed rgb(255 255 255 / 0.35);
  border-color: rgb(255 255 255 / 0.35) rgb(255 255 255 / 0.35) transparent transparent;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-8deg);
  pointer-events: none;
}
.cta-final::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 12%;
  top: 12%;
  inline-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  block-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  background: #fff;
  -webkit-mask: var(--avion) center / contain no-repeat;
  mask: var(--avion) center / contain no-repeat;
  transform: rotate(18deg);
  pointer-events: none;
}
@media (max-width: 47.99em) {
  .cta-final::before {
    inline-size: 90%;
    right: -40%;
    top: 4%;
  }
  .cta-final::after {
    top: 5%;
    right: 8%;
  }
  .cta-final__actions .btn {
    inline-size: 100%;
  }
}

/* Aviso o estado vacío (404) */
.notice {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
}

/* 18 · Footer ------------------------------------------------------------------------------ */
.site-footer {
  --text: #f4f2ec;
  --text-muted: #c4c3d6;
  --link: #ffffff;
  --border: rgb(244 242 236 / 0.14);
  margin-top: var(--section-y);
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  background: var(--noche);
  color: var(--text-muted);
  font-size: 0.97rem;
}
.site-footer__top {
  display: grid;
  gap: var(--space-xl);
}
.site-footer__brand {
  display: grid;
  gap: var(--space-m);
  align-content: start;
  max-width: 26rem;
}
.site-footer__logo img {
  inline-size: min(100%, 17rem);
}
.site-footer__about {
  line-height: 1.55;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
}
.site-footer__title {
  margin-bottom: 0.85rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-footer__list {
  display: grid;
  gap: 0.15rem;
  list-style: none;
  padding: 0;
}
.site-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-block-size: 2.5rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--d-fast) ease;
}
.site-footer__list a span {
  overflow-wrap: anywhere;
}
.site-footer__list svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
  color: var(--azul-300);
}
.site-footer__contact {
  grid-column: 1 / -1;
}
.site-footer__social {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}
.site-footer__social a {
  display: grid;
  place-items: center;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  transition: background-color var(--d-fast) ease, transform var(--d-press) var(--ease-out);
}
.site-footer__social a:active {
  transform: scale(0.94);
}
.site-footer__social svg {
  inline-size: 1.3rem;
  block-size: 1.3rem;
}
.site-footer__route {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: var(--space-xl) var(--space-m);
  color: rgb(255 255 255 / 0.35);
}
.site-footer__route::before {
  content: "";
  flex: 1;
  block-size: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px);
}
.site-footer__route::after {
  content: "";
  inline-size: 1.4rem;
  block-size: 1.4rem;
  background: currentColor;
  -webkit-mask: var(--avion) center / contain no-repeat;
  mask: var(--avion) center / contain no-repeat;
}
.site-footer__bottom {
  display: grid;
  gap: var(--space-s);
  font-size: var(--step--1);
  line-height: 1.5;
}
.site-footer__bottom a {
  color: var(--text-muted);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__list a:hover,
  .site-footer__bottom a:hover {
    color: #fff;
  }
  .site-footer__social a:hover {
    background: var(--azul);
  }
}
@media (min-width: 48em) {
  .site-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-footer__contact {
    grid-column: auto;
  }
  .site-footer__contact .site-footer__list a span {
    overflow-wrap: normal;
    white-space: nowrap;
  }
}
@media (min-width: 64em) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  }
  .site-footer__cols {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
  }
  .site-footer__bottom {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* 19 · WhatsApp flotante --------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 3.5rem;
  padding: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: var(--wa-tinta);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgb(7 59 30 / 0.55), 0 0 0 1px rgb(7 59 30 / 0.08);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform var(--d-press) var(--ease-out), opacity var(--d-base) ease, box-shadow var(--d-fast) ease;
  animation: wa-in 500ms var(--ease-out) 900ms both;
}
.wa-float:active {
  transform: scale(0.95);
}
.wa-float__icon {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.28);
}
.wa-float__icon svg {
  inline-size: 1.65rem;
  block-size: 1.65rem;
}
.wa-float__label {
  display: none;
  padding-right: 0.75rem;
}
@media (min-width: 48em) {
  .wa-float {
    right: calc(1.5rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .wa-float__label {
    display: inline;
  }
}
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover {
    box-shadow: 0 18px 36px -12px rgb(7 59 30 / 0.65), 0 0 0 1px rgb(7 59 30 / 0.1);
  }
}
html.is-menu-open .wa-float {
  opacity: 0;
  pointer-events: none;
}
@keyframes wa-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
}
/* Evita que el botón tape el final de la página en móvil */
.site-footer {
  padding-bottom: calc(var(--space-xl) + 4.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 48em) {
  .site-footer {
    padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  }
}

/* 20 · Utilidades -------------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.flight-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: color-mix(in srgb, var(--brand) 55%, transparent);
}
.flight-divider::before {
  content: "";
  flex: 1;
  block-size: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px);
}
.flight-divider::after {
  content: "";
  inline-size: 1.4rem;
  block-size: 1.4rem;
  background: var(--brand);
  -webkit-mask: var(--avion) center / contain no-repeat;
  mask: var(--avion) center / contain no-repeat;
}
.text-brand {
  color: var(--link);
}
.text-center {
  text-align: center;
}
.mt-s {
  margin-top: var(--space-s);
}
.mt-m {
  margin-top: var(--space-m);
}
.mt-l {
  margin-top: var(--space-l);
}
.mt-xl {
  margin-top: var(--space-xl);
}
.max-prose {
  max-width: 65ch;
}
.nowrap {
  white-space: nowrap;
}
.u-desktop {
  display: none;
}
@media (min-width: 75em) {
  .u-desktop {
    display: inline;
  }
}

/* 21 · Movimiento --------------------------------------------------------------------------------- */
/* Entrada del hero al cargar (una sola vez) */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
.hero__content > *,
.page-hero__text > * {
  animation: rise var(--d-reveal) var(--ease-out) both;
}
.hero__content > :nth-child(2),
.page-hero__text > :nth-child(2) {
  animation-delay: 70ms;
}
.hero__content > :nth-child(3),
.page-hero__text > :nth-child(3) {
  animation-delay: 140ms;
}
.hero__content > :nth-child(4),
.page-hero__text > :nth-child(4) {
  animation-delay: 210ms;
}
.hero__content > :nth-child(n + 5),
.page-hero__text > :nth-child(n + 5) {
  animation-delay: 280ms;
}
.page-hero__media {
  animation: rise 900ms var(--ease-out) 120ms both;
}
@keyframes hero-zoom {
  from {
    transform: scale(1.06);
  }
}
.hero__media img {
  animation: hero-zoom 1600ms var(--ease-out) both;
}

/* Revelado al hacer scroll (IntersectionObserver en main.js). Solo si hay JS. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--d-reveal) var(--ease-out),
    transform var(--d-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
html.js [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0 round var(--r-media));
  transition: clip-path 900ms var(--ease-in-out);
}
html.js [data-reveal="clip"].is-visible {
  clip-path: inset(0 0 0 0 round var(--r-media));
}

/* Avión que recorre la ruta de los pasos (momento poco frecuente, se permite un poco de deleite) */
html.js .steps .steps__plane {
  transition: translate 1600ms var(--ease-in-out) 200ms;
}
html.js .steps.is-visible .steps__plane {
  translate: 0 calc(var(--track, 0px));
}
@media (min-width: 60em) {
  html.js .steps.is-visible .steps__plane {
    translate: calc(var(--track, 0px)) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .hero__content > *,
  .page-hero__text > *,
  .page-hero__media,
  .hero__media img,
  .wa-float {
    animation: none;
  }
  html.js [data-reveal] {
    transform: none;
    transition: opacity 300ms ease;
    transition-delay: 0ms;
  }
  html.js [data-reveal="clip"] {
    clip-path: none;
    opacity: 0;
  }
  html.js [data-reveal="clip"].is-visible {
    opacity: 1;
  }
  html.js .steps .steps__plane {
    transition: none;
  }
  .tile__media,
  .card .media img,
  .destino .media img {
    transition: none;
  }
  .mobile-menu,
  .mobile-menu li {
    transform: none !important;
    transition: opacity var(--d-fast) ease;
    transition-delay: 0ms;
  }
  .faq__item::details-content {
    transition: none;
  }
}

/* Impresión */
@media print {
  .site-header,
  .wa-float,
  .mobile-menu,
  .cta-final::before,
  .cta-final::after {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ==========================================================================
   PÁGINAS · Inicio, Contacto, Preguntas frecuentes, Aviso de privacidad y 404
   (antes _extra-a.css)
   ========================================================================== */
/* Inicio · Ocasiones: índice tipográfico con miniatura (bodas, 15 años, etc.) */
.ocasiones {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
}
.ocasiones__intro {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}
.ocasiones__intro .lead {
  max-width: 34ch;
}
.ocasiones__list {
  display: grid;
  list-style: none;
  padding: 0;
}
.ocasiones__list > li + li {
  border-top: 2px dashed color-mix(in srgb, var(--brand) 22%, transparent);
}
.ocasion {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: var(--space-s);
  align-items: center;
  padding-block: var(--space-s);
  color: var(--text);
  text-decoration: none;
}
.ocasion__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--arena-3);
}
.ocasion__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.ocasion__title {
  font-size: var(--step-2);
  line-height: 1.05;
}
.ocasion__text {
  margin-top: 0.3rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.ocasion__go {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--surface-brand);
  color: var(--brand);
  transition: transform var(--d-fast) var(--ease-out);
}
.ocasion__go svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}
.ocasion:active .ocasion__go {
  transform: scale(0.94);
}
@media (hover: hover) and (pointer: fine) {
  .ocasion:hover .ocasion__media img {
    transform: scale(1.08);
  }
  .ocasion:hover .ocasion__title {
    color: var(--link);
  }
  .ocasion:hover .ocasion__go {
    transform: translateX(4px);
  }
}
@media (max-width: 29.99em) {
  .ocasion {
    grid-template-columns: 4rem minmax(0, 1fr);
  }
  .ocasion__go {
    display: none;
  }
}
@media (min-width: 40em) {
  .ocasion {
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    gap: var(--space-m);
    padding-block: var(--space-m);
  }
}
@media (min-width: 60em) {
  .ocasiones {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
  .ocasiones__intro {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* Contacto · formulario + canales en dos columnas */
.contacto {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.contacto__form {
  min-width: 0;
}
.contacto__aside {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}
.contacto__aside .stamp {
  justify-self: start;
}
.contacto__plain {
  font-weight: 500;
}
@media (min-width: 60em) {
  .contacto {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
    align-items: start;
  }
  .contacto__aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    padding-top: 0.5rem;
  }
}

/* Preguntas frecuentes · índice de temas */
.faq-jump {
  margin-top: var(--space-2xs);
}
.faq-page .faq-group {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* ==========================================================================
   PÁGINAS · Servicios (todo incluido, vuelo + hotel, hoteles, vuelos,
   circuitos, parques, bodas, grupos y eventos) (antes _extra-b.css)
   ========================================================================== */
/* Nota bajo el CTA del hero interior: alcance global + número principal */
.page-hero__note {
  max-width: 46ch;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-subtle);
}
.page-hero__note a {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

/* Bezel de "Qué incluye" junto a los beneficios */
.includes {
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
}

/* Destinos: acción al pie de cada tarjeta (align-content ya está en .destino) */
.destino__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--link);
}
.destino__cta::before {
  content: "";
  inline-size: 0.95em;
  block-size: 0.95em;
  background: currentColor;
  -webkit-mask: var(--avion) center / contain no-repeat;
  mask: var(--avion) center / contain no-repeat;
}
@media (min-width: 64em) {
  .destinos--4 {
    column-gap: var(--space-m);
  }
  .destinos--4 .destino__name {
    font-size: var(--step-1);
  }
}

/* Parques que puedes cotizar: tarjetas de texto (sin fotos de marcas) */
.parks {
  display: grid;
  gap: var(--space-s);
  list-style: none;
  padding: 0;
}
.park {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-s);
}
.park::before {
  content: "";
  display: block;
  inline-size: 3rem;
  block-size: 0;
  border-top: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent);
  margin-bottom: var(--space-2xs);
}
.park:last-child {
  background: var(--surface-brand);
  box-shadow: none;
}
.park__name {
  font-size: var(--step-2);
}
.park__text {
  color: var(--text-muted);
}
.park__link {
  margin-top: auto;
  padding-top: var(--space-2xs);
  font-size: var(--step--1);
}
@media (min-width: 40em) {
  .parks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .parks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

/* Grupos y eventos: el ancla no queda bajo el header fijo */
.topic[id] {
  scroll-margin-top: 5.5rem;
}
.topic__text .pill-links {
  margin-top: var(--space-2xs);
}

/* ==========================================================================
   22 · Ajustes de la auditoría (variedad de heroes, móvil, contraste)
   ========================================================================== */

/* Columna estrecha alineada al borde izquierdo del contenedor (FAQ, aviso), no centrada */
.container--narrow {
  margin-inline-start: max(var(--gutter), calc((100% - var(--container)) / 2));
  margin-inline-end: auto;
}

/* Hero compacto sin foto (Vuelos, Hoteles, Contacto): va directo al contenido */
.page-hero--compact {
  position: relative;
  padding-bottom: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  overflow: clip;
}
.page-hero--compact .page-hero__grid {
  grid-template-columns: 1fr;
}
.page-hero--compact .page-hero__text {
  max-width: 44rem;
}
.page-hero--compact .page-hero__text h1 {
  max-width: 20ch;
}
.page-hero--compact .lead {
  max-width: 52ch;
}
.page-hero--tight {
  padding-bottom: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
}
@media (min-width: 60em) {
  /* Ruta punteada con avión en el espacio libre de la derecha */
  .page-hero--compact::before {
    content: "";
    position: absolute;
    top: 40%;
    right: max(var(--gutter), calc((100% - var(--container)) / 2));
    inline-size: min(30vw, 24rem);
    block-size: 9rem;
    border-top: 2px dashed color-mix(in srgb, var(--brand) 45%, transparent);
    border-left: 2px dashed color-mix(in srgb, var(--brand) 45%, transparent);
    border-top-left-radius: 9rem;
    pointer-events: none;
  }
  .page-hero--compact::after {
    content: "";
    position: absolute;
    top: calc(40% - 0.9rem);
    right: calc(max(var(--gutter), calc((100% - var(--container)) / 2)) - 0.6rem);
    inline-size: 1.8rem;
    block-size: 1.8rem;
    background: var(--brand);
    -webkit-mask: var(--avion) center / contain no-repeat;
    mask: var(--avion) center / contain no-repeat;
    pointer-events: none;
  }
}
.section--form {
  padding-top: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
}
.section--form .section-head {
  margin-bottom: var(--space-m);
}

/* Hero tipográfico con tira de 3 fotos (Circuitos) */
.page-hero--strip .page-hero__text {
  gap: var(--space-m);
}
.page-hero--strip h1 {
  max-width: 17ch;
  font-size: var(--step-5);
}
.page-hero__row {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 56em) {
  .page-hero__row {
    grid-template-columns: minmax(0, 40rem) auto;
    align-items: end;
    justify-content: start;
    column-gap: var(--space-xl);
  }
}
.hero-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(0.5rem, 0.2rem + 1.2vw, 1.25rem);
  margin-top: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  padding: 0;
  list-style: none;
  animation: rise 900ms var(--ease-out) 160ms both;
}
.hero-strip__item {
  position: relative;
}
.hero-strip__item .media {
  --ratio: 3 / 4;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-m);
}
.hero-strip__item:nth-child(2) {
  margin-top: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
}
.hero-strip__item:nth-child(2) .media {
  --ratio: 1 / 1;
}
.hero-strip__tag {
  position: absolute;
  left: clamp(0.4rem, 0.2rem + 0.8vw, 1rem);
  bottom: clamp(0.4rem, 0.2rem + 0.8vw, 1rem);
  padding: 0.3em 0.75em;
  border-radius: var(--r-pill);
  background: rgb(255 253 248 / 0.94);
  color: var(--azul);
  font-size: clamp(0.7rem, 0.62rem + 0.35vw, 0.9rem);
  font-weight: 600;
  line-height: 1.2;
}

/* Tarjetas de ruta sin foto (circuitos): numeradas y con la línea punteada del logo */
.destinos--text {
  counter-reset: ruta;
}
.destinos--text > li {
  counter-increment: ruta;
}
.destinos--text .destino {
  position: relative;
  grid-template-rows: auto 1fr auto;
  min-block-size: 15rem;
  padding: 3.4rem clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-s);
}
.destinos--text .destino::before {
  content: counter(ruta, decimal-leading-zero);
  position: absolute;
  top: 1.1rem;
  left: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}
.destinos--text .destino::after {
  content: "";
  position: absolute;
  top: 1.7rem;
  left: calc(clamp(1.25rem, 1rem + 1vw, 1.75rem) + 2rem);
  right: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 2px dashed color-mix(in srgb, var(--brand) 35%, transparent);
}
.destinos--text > li:first-child .destino {
  background: var(--azul);
  box-shadow: var(--shadow-brand);
  color: #fff;
  --focus: #fff;
}
.destinos--text > li:first-child .destino::before,
.destinos--text > li:first-child .destino__name,
.destinos--text > li:first-child .destino__name svg,
.destinos--text > li:first-child .destino__cta {
  color: #fff;
}
.destinos--text > li:first-child .destino::after {
  border-color: rgb(255 255 255 / 0.45);
}
.destinos--text > li:first-child .destino__text {
  color: rgb(255 255 255 / 0.88);
}
@media (hover: hover) and (pointer: fine) {
  .destinos--text a.destino:hover {
    box-shadow: inset 0 0 0 1.5px var(--brand), var(--shadow-m);
  }
  .destinos--text > li:first-child a.destino:hover {
    background: var(--azul-600);
  }
}

/* Destinos: misma altura y la acción siempre al pie */
.destinos > li {
  display: grid;
}
.destino:has(> .media):has(> .destino__cta) {
  grid-template-rows: auto auto 1fr auto;
}
.destino__cta {
  align-self: end;
}

/* Pasos: todos los títulos arrancan en la misma línea */
.steps__item {
  align-content: start;
}

/* Bento en móvil: Hoteles y Vuelos como filas compactas (no cajas vacías) */
@media (max-width: 59.99em) {
  .bento > .bento__half {
    grid-column: span 2;
  }
  .bento .tile--plain {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
    min-block-size: 0;
    padding: 0.9rem 0.9rem 0.9rem 1.1rem;
  }
  .bento .tile--plain .tile__mark {
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
  }
  .bento .tile--plain > div {
    order: 2;
    min-width: 0;
  }
  .bento li.bento__half:not(.bento__wide):not(.bento__hero) .tile--plain .tile__go {
    position: static;
    order: 3;
    flex: none;
    margin-inline-start: auto;
  }
  .bento li.bento__half:not(.bento__wide):not(.bento__hero) .tile__text {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.88rem;
  }
  .bento li.bento__half:not(.bento__wide):not(.bento__hero) .tile__title {
    font-size: 1.3rem;
  }
}

/* Sección de marca a todo lo ancho: el azul del logo con presencia fuera de los botones */
.section--brand {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--azul);
  color: #fff;
  --text: #fff;
  --text-muted: rgb(255 255 255 / 0.86);
  --brand: #fff;
  --surface-brand: rgb(255 255 255 / 0.14);
  --link: #fff;
  --focus: #fff;
}
.section--brand h2,
.section--brand h3 {
  color: #fff;
}
.section--brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  top: 9%;
  inline-size: min(60%, 40rem);
  aspect-ratio: 2 / 1;
  border: 2px dashed rgb(255 255 255 / 0.3);
  border-color: rgb(255 255 255 / 0.3) rgb(255 255 255 / 0.3) transparent transparent;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-6deg);
  pointer-events: none;
}
.section--brand::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 13%;
  top: 7%;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  background: #fff;
  -webkit-mask: var(--avion) center / contain no-repeat;
  mask: var(--avion) center / contain no-repeat;
  transform: rotate(14deg);
  pointer-events: none;
}

/* Miniatura tipográfica en el índice de ocasiones (sin foto repetida) */
.ocasion__media--icon {
  display: grid;
  place-items: center;
  background: var(--azul);
  color: #fff;
}
.ocasion__media--icon svg {
  inline-size: 46%;
  block-size: 46%;
}

/* Tarjeta de destino "comodín" en azul (otro destino) */
.destino__panel {
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: 4 / 5;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--azul);
  color: #fff;
}
.destino__panel::before {
  content: "";
  position: absolute;
  top: 18%;
  right: -30%;
  inline-size: 110%;
  aspect-ratio: 2 / 1;
  border: 2px dashed rgb(255 255 255 / 0.4);
  border-color: rgb(255 255 255 / 0.4) rgb(255 255 255 / 0.4) transparent transparent;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.destino__panel::after {
  content: "";
  position: absolute;
  top: 14%;
  right: 16%;
  inline-size: 2rem;
  block-size: 2rem;
  background: #fff;
  -webkit-mask: var(--avion) center / contain no-repeat;
  mask: var(--avion) center / contain no-repeat;
  transform: rotate(16deg);
}
.destino__big {
  position: relative;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  font-weight: 900;
  line-height: 0.95;
}
.destino:has(> .destino__panel):has(> .destino__cta) {
  grid-template-rows: auto auto 1fr auto;
}

/* WhatsApp flotante: la etiqueta aparece cuando ya se hizo scroll (no tapa el primer pantallazo) */
body:has(.site-header:not(.is-scrolled)) .wa-float__label {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-strip {
    animation: none;
  }
}

/* Botones largos en pantallas angostas: el texto puede partirse antes que desbordar */
.cta-final {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 30em) {
  .btn {
    white-space: normal;
  }
}

/* WhatsApp flotante en móvil: aparece al hacer scroll (en el primer pantallazo ya está el botón "Cotiza" del header).
   Sin JS se queda visible siempre. */
@media (max-width: 47.99em) {
  html.js body:has(.site-header:not(.is-scrolled)) .wa-float {
    opacity: 0;
    visibility: hidden;
  }
}
.wa-float {
  transition:
    transform var(--d-press) var(--ease-out),
    opacity var(--d-base) ease,
    visibility var(--d-base),
    box-shadow var(--d-fast) ease;
}
@media (max-width: 47.99em) {
  .section--brand::before {
    top: auto;
    bottom: -7rem;
    inline-size: 90%;
    right: -30%;
  }
  .section--brand::after {
    top: auto;
    bottom: 1.5rem;
    right: 14%;
  }
}

/* 99 · Reserva en línea (buscador PriceRes en iframe del mismo origen) ---------------------- */
/* Botón secundario (outline) del header, junto al CTA de WhatsApp. Solo en escritorio;
   en móvil vive en el pie del menú (.mobile-menu__reserva-btn). */
.site-header__reserva {
  display: none;
  flex: none;
  --btn-fg: var(--link);
  --btn-bd: color-mix(in srgb, var(--brand) 40%, transparent);
}
.site-header__reserva[aria-current="page"] {
  --btn-bg: var(--surface-brand);
  --btn-bd: var(--brand);
}
body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) .site-header__reserva {
  --btn-fg: #fff;
  --btn-bd: rgb(255 255 255 / 0.7);
}
@media (hover: hover) and (pointer: fine) {
  .site-header__reserva:hover {
    --btn-bg: color-mix(in srgb, var(--brand) 7%, transparent);
    --btn-bd: var(--brand);
  }
  body:has(.hero) .site-header:not(.is-scrolled):not(.is-open) .site-header__reserva:hover {
    --btn-bg: rgb(255 255 255 / 0.12);
    --btn-bd: #fff;
  }
}
/* Menú de escritorio desde 80em (1280 px): a 75em no cabe con el botón "Reserva en línea" */
@media (min-width: 80em) {
  .site-header__reserva {
    display: inline-flex;
  }
  .nav__link {
    padding-inline: 0.42rem;
  }
  .nav__list {
    gap: 0.1rem;
  }
}
.mobile-menu__reserva-btn {
  --btn-fg: var(--link);
}

.buscador-sec {
  padding-block: var(--space-l) 0;
}
.buscador-sec--tight {
  padding-block: 0;
}
@media (min-width: 48em) {
  .buscador-sec--overlap {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * clamp(3rem, 6vw, 5.5rem));
    padding-top: 0;
  }
}
.buscador {
  display: grid;
  gap: var(--space-m);
  padding: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-media);
  background: var(--surface);
  box-shadow: var(--shadow-l);
}
@media (min-width: 56em) {
  .buscador {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }
}
.buscador__info {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}
.buscador__info h2 {
  font-size: var(--step-3);
}
.buscador__info > p {
  color: var(--text-muted);
  font-size: var(--step-0);
  line-height: 1.5;
}
.buscador__info .check-list {
  margin-block: var(--space-2xs);
}
.buscador__info .btn {
  justify-self: start;
}
@media (max-width: 30em) {
  .buscador__info .btn {
    justify-self: stretch;
  }
}
.buscador__frame {
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: #fff;
  color-scheme: light;
}
.buscador__frame iframe {
  display: block;
  inline-size: 100%;
  block-size: 560px;
  min-block-size: 560px;
  border: 0;
  background: transparent;
  color-scheme: light;
}
.buscador__nota {
  margin: 0;
  padding: 0.6rem 1rem 0.8rem;
  border-top: 1px solid var(--border);
  background: #fff;
  color: #4a4a63;
  font-size: var(--step--1);
  line-height: 1.4;
}
/* Buscador en la portada: bloque compacto después de la banda de confianza */
.buscador-sec--home {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0;
  scroll-margin-top: calc(var(--header-h) + 0.5rem);
}
.buscador--home {
  box-shadow: var(--shadow-s);
}
/* En móvil sin tarjeta exterior: el texto va sobre la página y solo el buscador lleva marco */
@media (max-width: 55.99em) {
  .buscador--home,
  .buscador--reservar {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .buscador--home .buscador__frame,
  .buscador--reservar .buscador__frame {
    box-shadow: var(--shadow-s);
  }
}
@media (min-width: 56em) {
  .buscador--home {
    align-items: center;
    padding: clamp(1.25rem, 0.5rem + 1.5vw, 1.75rem);
  }
  .buscador--home .buscador__info {
    padding-inline: clamp(0.25rem, 1vw, 1rem);
  }
}
.buscador__senales {
  display: grid;
  gap: 0.7rem;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
}
.buscador__senales li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}
.buscador__senal-icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--surface-brand);
  color: var(--brand);
}
.buscador__senal-icon svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}
/* Mientras el iframe diferido no carga: esqueleto con la forma del buscador */
.buscador__frame[data-buscador-wrap] {
  position: relative;
}
.buscador__frame[data-buscador-wrap]::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: 12px;
  background:
    linear-gradient(#eeeeff, #eeeeff) 0 0 / 100% 2.75rem no-repeat,
    linear-gradient(#f2ece1, #f2ece1) 0 4.5rem / 100% 3rem no-repeat,
    linear-gradient(#f2ece1, #f2ece1) 0 9rem / 100% 3rem no-repeat,
    linear-gradient(#f2ece1, #f2ece1) 0 13.5rem / 100% 3rem no-repeat,
    linear-gradient(#dcdcff, #dcdcff) 0 19rem / 100% 3.25rem no-repeat;
  opacity: 0.8;
}
.buscador__frame[data-buscador-wrap].is-loaded::before {
  display: none;
}
.buscador__frame[data-buscador-wrap] iframe {
  position: relative;
  z-index: 1;
}
/* /reservar/: en móvil el buscador va primero; en escritorio la confianza a la izquierda */
@media (min-width: 56em) {
  .buscador--reservar .buscador__info {
    order: -1;
  }
}
@media (max-width: 55.99em) {
  .buscador--reservar .buscador__info {
    padding-top: var(--space-xs);
  }
}
.trust-band__list--six .trust-band__item {
  font-size: 0.92rem;
}
@media (min-width: 60em) {
  .trust-band__list--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .trust-band__list--six .trust-band__item {
    border-left: 0;
    padding: 1.15rem 1.25rem;
  }
  .trust-band__list--six .trust-band__item:nth-child(3n + 1) {
    padding-left: 0;
  }
  .trust-band__list--six .trust-band__item:nth-child(3n + 2),
  .trust-band__list--six .trust-band__item:nth-child(3n) {
    border-left: 1px solid var(--border);
  }
  .trust-band__list--six .trust-band__item:nth-child(n + 4) {
    border-top: 1px solid var(--border);
  }
}

@media (min-width: 48em) {
  .hero:has(+ .buscador-sec--overlap) {
    padding-bottom: calc(clamp(3rem, 6vw, 5.5rem) + 2.5rem);
  }
}
.stamp--block {
  display: flex;
  margin-bottom: var(--space-l);
  border-radius: var(--r-card);
  max-inline-size: 44rem;
}

/* ===== Parques: hero con foto nocturna real (castillo + fuegos artificiales) ===== */
.hero--parques {
  align-items: center;
  background: #03041a;
}
@media (min-width: 48em) {
  .hero--parques .hero__media {
    inset: 0 0 0 28%;
  }
  .hero--parques::before {
    background:
      linear-gradient(90deg, #03041a 26%, rgb(3 4 26 / 0.85) 36%, rgb(3 4 26 / 0.35) 50%, rgb(3 4 26 / 0) 64%),
      linear-gradient(180deg, rgb(3 4 26 / 0.7) 0%, rgb(3 4 26 / 0) 22%, rgb(3 4 26 / 0) 70%, rgb(3 4 26 / 0.8) 100%);
  }
  .hero--parques .hero__content {
    max-width: 44rem;
  }
}
.hero--parques .hero__title {
  display: grid;
  justify-items: start;
  gap: 0.08em;
  font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.6rem);
}
.hero__frase {
  font-size: 0.7em;
  font-weight: 800;
}
.rotador {
  display: grid;
  line-height: 1.02;
  white-space: nowrap;
}
.rotador__item {
  grid-area: 1 / 1;
  padding-bottom: 0.08em;
  background: linear-gradient(90deg, #9fc2ff 0%, #d6ccff 50%, #ffb48f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.25em);
  transition:
    opacity 700ms var(--ease-out),
    filter 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
.rotador__item.is-activo {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
.hero--parques .hero__note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__sello {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
}
.hero__sello svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}
@media (max-width: 47.99em) {
  .hero--parques {
    background: #03041a;
  }
  .hero--parques .hero__title {
    font-size: clamp(2.3rem, 1.4rem + 5vw, 3.2rem);
  }
}

/* Sub-navegación tipo píldora de cristal */
.subnav-pill {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
  gap: 0.15rem 0.35rem;
  max-inline-size: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgb(4 0 255 / 0.15), 0 8px 30px rgb(0 0 0 / 0.35);
  font-size: var(--step--1);
  text-shadow: none;
}
.subnav-pill a,
.subnav-pill__actual {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: 2.25rem;
  padding: 0 0.7rem;
  border-radius: var(--r-pill);
  color: rgb(255 255 255 / 0.78);
  font-weight: 500;
  text-decoration: none;
}
.subnav-pill__actual {
  color: #fff;
  font-weight: 700;
}
.subnav-pill__punto {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: #6fb1ff;
  box-shadow: 0 0 8px #6fb1ff;
}
.subnav-pill a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .subnav-pill a {
    transition: background-color 160ms ease, color 160ms ease;
  }
  .subnav-pill a:hover {
    background: rgb(255 255 255 / 0.12);
    color: #fff;
  }
}
@media (max-width: 47.99em) {
  .subnav-pill__actual {
    display: none;
  }
  .subnav-pill {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .subnav-pill::-webkit-scrollbar {
    display: none;
  }
  .subnav-pill a {
    flex: none;
    padding: 0 0.55rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rotador__item {
    filter: none;
    transform: none;
    transition: opacity 400ms ease;
  }
}

/* Certificaciones */
.certs {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
@media (min-width: 48em) {
  .certs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cert {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-l);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand) 10%, transparent) 0, transparent 45%),
    var(--surface);
}
.cert__sello {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-bottom: var(--space-2xs);
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
}
.cert__sello svg {
  inline-size: 1.6rem;
  block-size: 1.6rem;
}
.cert__org {
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cert__nombre {
  font-size: var(--step-2);
  line-height: 1.1;
}
.cert__texto {
  color: var(--text-muted);
}

/* Parques: secciones de contenido */
.pq-sub {
  margin: var(--space-l) 0 var(--space-s);
  font-size: var(--step-2);
  line-height: 1.1;
}
.pq-cards {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40em) {
  .pq-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .pq-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pq-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pq-card {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-m);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow-wrap: anywhere;
}
.pq-card__t {
  font-size: var(--step-1);
  line-height: 1.15;
  color: var(--brand);
}
.pq-card p {
  color: var(--text-muted);
}
.pq-nota {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-inline-start: 4px solid var(--brand);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--surface-brand);
  color: var(--text);
}
.pq-cols {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56em) {
  .pq-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pq-col {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding: var(--space-l);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  min-width: 0;
}
.pq-col__t {
  font-size: var(--step-2);
  line-height: 1.1;
}
.pq-col__sub {
  color: var(--text-muted);
  font-weight: 600;
}
.pq-cats {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
}
.pq-cats > div {
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border);
}
.pq-cats dt {
  font-weight: 700;
  color: var(--brand);
}
.pq-cats dd {
  margin: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Cruceros ------------------------------------------------------------------------------ */
/* Inicio: la tarjeta de Cruceros ocupa media fila junto a Hoteles y Vuelos */
@media (min-width: 60em) {
  .bento--9 > .bento__crucero {
    grid-column: span 6;
  }
  .bento--9 > .bento__half {
    grid-column: span 3;
  }
}

/* Navieras: tarjetas de texto, sin logos */
.cr-navieras {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
}
@media (min-width: 60em) {
  .cr-navieras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
  }
}
.cr-naviera {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-s);
  min-width: 0;
}
.cr-naviera::before {
  content: "";
  display: block;
  inline-size: 3rem;
  block-size: 0;
  border-top: 2px dashed color-mix(in srgb, var(--brand) 55%, transparent);
  margin-bottom: var(--space-2xs);
}
.cr-naviera__nombre {
  font-size: var(--step-2);
  line-height: 1.05;
}
.cr-naviera__estilo {
  font-weight: 600;
  color: var(--link);
}
.cr-naviera__texto {
  color: var(--text-muted);
}
.cr-naviera__barcos {
  font-size: var(--step--1);
  color: var(--text-subtle);
}
.cr-naviera .link-arrow {
  margin-top: auto;
  padding-top: var(--space-2xs);
  font-size: var(--step--1);
}

/* Regiones: la primera con foto a lo grande, el resto como tarjetas de texto */
.cr-regiones {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
}
@media (min-width: 40em) {
  .cr-regiones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cr-region--foto {
    grid-column: span 2;
  }
}
@media (min-width: 64em) {
  .cr-regiones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
  }
  .cr-region--foto {
    grid-row: span 2;
  }
}
.cr-region {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  min-width: 0;
  overflow-wrap: anywhere;
}
.cr-region__nombre {
  font-size: var(--step-2);
  line-height: 1.05;
  color: var(--brand);
}
.cr-region__texto {
  color: var(--text-muted);
}
.cr-region__puertos {
  margin-top: var(--space-2xs);
  padding-top: var(--space-xs);
  border-top: 1px dashed var(--border-strong);
  font-size: var(--step--1);
  color: var(--text);
}
.cr-region__etiqueta {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.cr-region--foto {
  isolation: isolate;
  overflow: hidden;
  align-content: end;
  min-block-size: 24rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-media);
  background: var(--noche);
  color: #fff;
  box-shadow: var(--shadow-m);
}
.cr-region__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 22% 62%;
}
.cr-region--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(14 13 42 / 0.92) 0%, rgb(14 13 42 / 0.62) 45%, rgb(14 13 42 / 0) 78%);
}
.cr-region__cuerpo {
  display: grid;
  gap: var(--space-2xs);
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  max-width: 44rem;
}
.cr-region--foto .cr-region__nombre {
  font-size: var(--step-3);
  color: #fff;
}
.cr-region--foto .cr-region__texto,
.cr-region--foto .cr-region__puertos {
  color: rgb(255 255 255 / 0.9);
}
.cr-region--foto .cr-region__puertos {
  border-top-color: rgb(255 255 255 / 0.4);
}
.cr-region--foto .cr-region__etiqueta {
  color: rgb(255 255 255 / 0.75);
}

/* Duraciones sobre la sección azul */
.cr-duraciones {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
}
@media (min-width: 48em) {
  .cr-duraciones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
  }
}
.cr-duracion {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 2px dashed rgb(255 255 255 / 0.35);
  border-radius: var(--r-card);
  background: rgb(255 255 255 / 0.08);
  color: var(--text-muted);
  min-width: 0;
}
.cr-duracion__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-4);
  line-height: 1;
  color: #fff;
}
.cr-duracion__num span {
  font-size: var(--step-1);
  font-weight: 800;
}
.cr-duracion__t {
  font-size: var(--step-1);
  line-height: 1.15;
}

/* Lo que normalmente no incluye: marcador de guion en círculo */
.cr-nolist {
  display: grid;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
}
.cr-nolist > li {
  position: relative;
  padding-inline-start: 2rem;
}
.cr-nolist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  inline-size: 1.3rem;
  block-size: 1.3rem;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: linear-gradient(var(--text-subtle), var(--text-subtle)) center / 0.6rem 1.5px no-repeat;
}
.bento__crucero .tile__media {
  object-position: 30% 75%;
}

/* CTA final con logo + foto temática por página */
.cta-final--foto {
  padding: 0;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}
.cta-final--foto::before,
.cta-final--foto::after {
  display: none;
}
.cta-final__cuerpo {
  display: grid;
  align-content: center;
  gap: var(--space-m);
  padding: clamp(2rem, 1.2rem + 4vw, 4.5rem);
}
.cta-final__logo {
  inline-size: clamp(9rem, 7rem + 6vw, 13rem);
  block-size: auto;
}
.cta-final__media {
  position: relative;
  min-block-size: 14rem;
  order: -1;
}
.cta-final__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.cta-final__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--azul) 0%, rgb(4 0 255 / 0) 45%);
}
@media (min-width: 56em) {
  .cta-final--foto {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  .cta-final__media {
    order: 0;
    min-block-size: 100%;
  }
  .cta-final__media::after {
    background: linear-gradient(90deg, var(--azul) 0%, rgb(4 0 255 / 0.35) 22%, rgb(4 0 255 / 0) 50%);
  }
}
.hero__lead a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Tarjeta destacada con foto real + texto grande y ruta del avión */
.destino__panel--foto {
  isolation: isolate;
  background: var(--noche);
}
.destino__panel-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.destino__panel-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgb(4 0 255 / 0.88) 0%, rgb(4 0 255 / 0.45) 32%, rgb(4 0 255 / 0) 58%),
    linear-gradient(180deg, rgb(8 6 48 / 0.35) 0%, rgb(8 6 48 / 0) 30%);
}
.destino__panel--foto .destino__big {
  text-shadow: 0 2px 18px rgb(8 6 48 / 0.45);
}
@media (hover: hover) and (pointer: fine) {
  .destino:hover .destino__panel-img {
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .destino__panel-img {
    transition: none;
  }
}

/* Portada luminosa: velo ligero solo detrás del texto para que la playa se vea soleada */
@media (min-width: 48em) {
  .hero--luminoso::before {
    background:
      linear-gradient(180deg, rgb(8 6 48 / 0.42) 0%, rgb(8 6 48 / 0.12) 12%, rgb(8 6 48 / 0) 24%),
      radial-gradient(ellipse 58% 62% at 20% 70%, rgb(8 6 48 / 0.5) 0%, rgb(8 6 48 / 0.22) 55%, rgb(8 6 48 / 0) 80%),
      linear-gradient(20deg, rgb(8 6 48 / 0.5) 0%, rgb(8 6 48 / 0.18) 34%, rgb(8 6 48 / 0) 58%);
  }
  .hero--luminoso .hero__title {
    text-shadow: 0 2px 18px rgb(8 6 48 / 0.45), 0 1px 3px rgb(8 6 48 / 0.35);
  }
  .hero--luminoso .hero__lead,
  .hero--luminoso .eyebrow {
    color: #fff;
    text-shadow: 0 1px 10px rgb(8 6 48 / 0.6), 0 1px 2px rgb(8 6 48 / 0.5);
  }
}

/* Selector de número de WhatsApp (main.js) */
.wa-chooser {
  inline-size: min(26rem, calc(100vw - 2rem));
  margin: auto;
  padding: var(--space-l);
  border: 0;
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgb(8 6 48 / 0.35);
}
.wa-chooser::backdrop {
  background: rgb(8 6 48 / 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.wa-chooser__cerrar-form {
  position: absolute;
  inset: 0.5rem 0.5rem auto auto;
}
.wa-chooser__cerrar {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.wa-chooser__cerrar:hover { background: rgb(128 128 128 / 0.15); }
.wa-chooser__titulo {
  margin: 0 2.5rem 0.35rem 0;
  font-family: var(--font-display, inherit);
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.1;
}
.wa-chooser__texto {
  margin: 0 0 var(--space-m);
  color: var(--text-muted);
}
.wa-chooser__opciones {
  display: grid;
  gap: 0.75rem;
}
.wa-chooser__opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-block-size: 3.25rem;
  padding: 0 1.25rem;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: var(--wa-tinta);
  font-weight: 700;
  font-size: var(--step-1);
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}
.wa-chooser__opcion:hover { filter: brightness(1.05); transform: translateY(-1px); }
.wa-chooser__opcion:focus-visible { outline: 3px solid var(--focus, #0400ff); outline-offset: 3px; }
.wa-chooser__opcion .icon { inline-size: 1.4rem; block-size: 1.4rem; }

/* Campo trampa anti-spam de los formularios (invisible para personas) */
.u-trampa {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}