/*
Theme Name:   Adventures ONV Child
Theme URI:    https://adventuresonv.com
Description:  Child theme para Adventures ONV
Author:       Pablo
Template:     generatepress
Version:      1.39.4
Text Domain:  adventures-child
*/

/* ═══════════════════════════════════════
   TIPOGRAFÍA: INSTAGRAM SANS (local)
═══════════════════════════════════════ */
@font-face {
  font-family: 'Instagram Sans';
  src: url('assets/fonts/Instagram Sans Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instagram Sans';
  src: url('assets/fonts/Instagram Sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instagram Sans';
  src: url('assets/fonts/Instagram Sans Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Bold cubre 600-900: el archivo "Instagram Sans Headline.otf" no existe en el tema,
   y su @font-face hacía que todo lo que usara font-weight 800/900 fallara al cargar
   y cayera a la fuente del sistema. */
@font-face {
  font-family: 'Instagram Sans';
  src: url('assets/fonts/Instagram Sans Bold.ttf') format('truetype');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════
   EMOJIS ESTILO APPLE (ver assets/js/apple-emoji.js)
   El script reemplaza cada emoji por una imagen; este es el reset de
   tamaño/alineación recomendado por twemoji para que la imagen se vea
   como un carácter más del texto, escalando con el font-size que la
   rodea en vez de quedar con un tamaño fijo.
═══════════════════════════════════════ */
.aov-emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
  display: inline-block;
}

/* ═══════════════════════════════════════
   VARIABLES GLOBALES
═══════════════════════════════════════ */
:root {
  --brand:    #F40F50;
  --brand-dk: #c0093d;
  --brand-btn: #a80834;
  --brand-btn-hover: #8d052b;
  --dark:     #111111;
  --gray:     #555555;
  --white:    #ffffff;
  --nav-h:    70px;
  --radius:   8px;
  --font:     'Instagram Sans', sans-serif;
  --ease:     0.25s ease;
  /* Curvas de easing con más carácter que las nativas del navegador.
     -out: elementos que entran/salen o botones (feedback inmediato).
     -in-out: elementos que se mueven/transforman en pantalla (íconos, paneles).
     -drawer: paneles tipo cajón (menú móvil) que se deslizan desde un borde. */
  --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);

  /* ── Liquid Glass ──
     Receta compartida para toda superficie de "vidrio" del sitio (header
     al hacer scroll, menús, burbujas, franjas sobre fotos, controles de
     carrusel). El vidrio esmerilado plano de antes solo desenfocaba;
     Liquid Glass añade saturate() (el color de atrás se ve más vivo a
     través del cristal — la firma visual del estilo) y un "shine": un
     par de inset box-shadow claro arriba / oscuro abajo que imita cómo
     un borde de vidrio curvo dobla la luz. Dos variantes porque el sitio
     usa vidrio sobre dos tipos de fondo: --lg-light para paneles blancos
     sobre fondo claro (header, menús), --lg-dark para controles sobre
     fotos/video (antes negro plano). --lg-shine-* se agrega al final del
     box-shadow propio de cada elemento, no lo reemplaza. */
  --lg-blur: 20px;
  --lg-saturate: 1.8;
  --lg-light-bg: rgba(255, 255, 255, 0.68);
  --lg-light-border: rgba(255, 255, 255, 0.8);
  --lg-shine-light: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(17, 17, 17, 0.05);
  --lg-dark-bg: rgba(16, 18, 22, 0.4);
  --lg-dark-border: rgba(255, 255, 255, 0.26);
  --lg-shine-dark: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

/* ═══════════════════════════════════════
   RESET BÁSICO
═══════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── SALTAR AL CONTENIDO (accesibilidad de teclado) ──
   Oculto hasta que recibe foco; visible por encima del header fijo. */
.aov-skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 1200;
  background: var(--brand);
  color: #ffffff;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.16s var(--ease-out, ease);
}

.aov-skip-link:focus {
  top: 12px;
}

/* Instagram Sans es la fuente del sistema en toda la página.
   Los elementos de formulario NO heredan la fuente del body (usan la del navegador,
   normalmente Arial), así que hay que forzarlos explícitamente.
   Los títulos del hero de la home conservan sus fuentes propias (hero.php). */
button,
input,
select,
textarea,
optgroup,
::placeholder {
  font-family: var(--font);
}

body {
  font-size: 16px;
  font-family: var(--font) !important;
  color: var(--dark);
  background: var(--white);
  margin: 0;
  padding: 0;
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

/* Focus styles globales para accesibilidad */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Estilos generales para enlaces */
a {
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

/* Cursor pointer en elementos interactivos */
button,
a[href],
[role="button"],
[onclick],
input[type="submit"],
input[type="button"],
.button,
.wp-block-button__link {
  cursor: pointer;
}

/* ═══════════════════════════════════════
   HEADER PRINCIPAL
═══════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  /* Vidrio desde el reposo, no solo tras hacer scroll (.scrolled más abajo
     solo lo intensifica) — antes el header arrancaba blanco sólido y el
     cambio a vidrio recién se notaba pasados los primeros 10px de scroll. */
  background: var(--lg-light-bg);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow: var(--lg-shine-light);
  transition: box-shadow var(--ease), background var(--ease), backdrop-filter var(--ease);
}

#siteHeader.site-header {
  position: fixed;
  top: 0;
}

body.admin-bar {
  padding-top: calc(var(--nav-h) + 32px);
}

body.admin-bar #siteHeader.site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    padding-top: calc(var(--nav-h) + 46px);
  }

  body.admin-bar #siteHeader.site-header {
    top: 46px;
  }
}

.site-header.scrolled {
  background: var(--lg-light-bg);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), var(--lg-shine-light);
}

.header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
}

/* ── LOGO ── */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--ease);
}

.site-logo:hover {
  opacity: 0.85;
}

.site-logo img {
  height: 50px;
  width: auto;
  display: block;
  max-width: 280px;
}

/* ── NAVEGACIÓN DESKTOP ── */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  gap: 8px;
}

.site-nav .nav-link,
.site-nav .nav-trigger {
  font-family: var(--font) !important;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  letter-spacing: 0.04em;
  padding: 9px 12px;
  position: relative;
  transition: color var(--ease);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius);
}

.site-nav .nav-link:focus-visible,
.site-nav .nav-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.site-nav .nav-link::after,
.site-nav .nav-trigger::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}

.site-nav .nav-link:hover,
.site-nav .nav-link.current-menu-item,
.site-nav .nav-item:hover > .nav-trigger,
.site-nav .nav-item:focus-within > .nav-trigger {
  color: var(--brand);
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.current-menu-item::after,
.site-nav .nav-item:hover > .nav-trigger::after,
.site-nav .nav-item:focus-within > .nav-trigger::after {
  transform: scaleX(1);
}

.site-nav .nav-item {
  position: relative;
}

.site-nav .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-nav .nav-trigger::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.65;
  transition: transform 0.2s var(--ease-in-out), opacity var(--ease);
}

.site-nav .nav-item:hover > .nav-trigger::before,
.site-nav .nav-item:focus-within > .nav-trigger::before {
  transform: rotate(225deg) translateY(-1px);
  opacity: 1;
}

.site-nav .has-submenu:hover .nav-panel,
.site-nav .has-submenu:focus-within .nav-panel {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.nav-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 280px;
  padding: 16px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--radius);
  /* Sólido, no vidrio: esta caja lleva listas de destinos/tours para leer,
     y el blur solo funciona con aceleración por GPU disponible — sin ella
     (bastante común) queda transparencia sin desenfoque, ilegible encima
     de fotos. El "shine" se conserva porque no depende del blur: solo
     imita el brillo de un borde curvo, se ve bien también sobre opaco. */
  background: var(--white);
  box-shadow: 0 18px 42px rgba(17, 17, 17, 0.12), var(--lg-shine-light);
  display: grid;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  z-index: 1005;
}

.nav-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}

.nav-panel-wide {
  width: min(720px, calc(100vw - 80px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav-panel-xl {
  width: min(840px, calc(100vw - 80px));
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
}

/* ═══════════════════════════════════════
   MEGA MENÚ — DESTINOS Y TOURS
═══════════════════════════════════════ */

/*
 * Estrategia: position:fixed para los paneles mega.
 * Se posicionan relativo al viewport → siempre centrados,
 * nunca se salen. top:var(--nav-h) los deja justo bajo el header.
 */
.site-nav  { position: static; }
.has-mega,
.has-tours { position: static; }

/* ── PANEL DESTINOS ── */
.nav-panel-mega {
  display: block;
  position: fixed;
  top: var(--nav-h);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  /* Ancho ajustado al contenido real: 3 columnas de destinos + banda gris de
     hoteles destacados. */
  width: min(780px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}

/* Override hover: mantiene centrado X, elimina desplazamiento Y */
.site-nav .has-submenu:hover .nav-panel-mega,
.site-nav .has-submenu:focus-within .nav-panel-mega {
  transform: translateX(-50%) translateY(0);
}

/* Cabecera del panel con fondo sutilmente diferenciado */
/* Arriba: destinos nacionales. Debajo: banda gris con los hoteles destacados.
   Se apilan (no van en columnas) porque un aside lateral con 3 tarjetas dejaba
   ~157px muertos bajo la lista de destinos. */
.nav-mega-cols {
  display: grid;
  grid-template-columns: 1fr;
}

.nav-mega-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 20px 18px;
}

/* Título de sección: línea brand debajo */
.nav-mega-section > .nav-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(244, 15, 80, 0.15);
  font-family: 'Instagram Sans', sans-serif;
  font-weight: 700;
}

.nav-mega-section > .nav-panel-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 14px;
  background: var(--brand);
  border-radius: 2px;
  flex-shrink: 0;
}

/* 3 columnas. La Guajira y Amazonas (las listas cortas) se apilan en la primera
   columna; Santa Marta y San Andrés ocupan una columna entera cada una. Así no
   queda aire muerto bajo las listas cortas.
   El orden de colocación sigue el del catálogo en functions.php:
   1 La Guajira · 2 Amazonas · 3 Santa Marta · 4 San Andrés */
.nav-mega-destinations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 14px 6px;
  align-content: start;
  align-items: start;
}

.nav-mega-dest:nth-child(1) { grid-column: 1; grid-row: 1; }
.nav-mega-dest:nth-child(2) { grid-column: 1; grid-row: 2; }
.nav-mega-dest:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.nav-mega-dest:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }

.nav-mega-dest {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(17, 17, 17, 0.06);
}

.nav-mega-dest:nth-last-child(-n+4) {
  border-bottom: none;
}

/* Tarjetas de destacados (hoteles y tours): hasta 3 en fila dentro de la
   banda gris. El checkbox "Destacar en el mega menú" es manual — no
   siempre hay 3 marcados (ej. tours, con solo 1 activo) — así que las
   tarjetas se reparten el ancho disponible entre sí según cuántas haya
   (1 = todo el ancho, 2 = mitad y mitad, 3 = un tercio cada una) en vez de
   dejar espacio vacío al lado quedando la fila incompleta y suelta. */
.nav-mega-promos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-mega-promo-card {
  position: relative;
  display: block;
  flex: 1 1 calc((100% - 20px) / 3);
  max-width: calc((100% - 20px) / 3);
  min-height: 104px;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  background-image: var(--promo-bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.14);
  transition: transform var(--ease), box-shadow var(--ease);
}

/* Con 1 o 2 tarjetas, el max-width de arriba (pensado para 3) ya no aplica
   — cada .nav-mega-promos con esa cantidad exacta de hijas define su
   propio tope para que se repartan bien el ancho entre las que hay. */
.nav-mega-promos:has(.nav-mega-promo-card:only-child) .nav-mega-promo-card {
  max-width: 100%;
}

.nav-mega-promos:has(.nav-mega-promo-card:first-child:nth-last-child(2)) .nav-mega-promo-card {
  max-width: calc((100% - 10px) / 2);
}

.nav-mega-promo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(17, 17, 17, 0.2);
}

.nav-mega-promo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.08) 0%, rgba(17, 17, 17, 0.68) 100%);
}

.nav-mega-promo-title {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 1;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.nav-dest-label {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Instagram Sans', sans-serif;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 6px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: color var(--ease), background var(--ease);
}

.nav-dest-label:hover {
  color: var(--brand);
  background: rgba(244, 15, 80, 0.06);
}

.nav-dest-hotel {
  font-size: 0.78rem;
  font-weight: 400;
  font-family: 'Instagram Sans', sans-serif;
  color: #555;
  padding: 1px 6px;
  border-radius: var(--radius);
  text-decoration: none;
  line-height: 1.35;
  transition: color var(--ease), background var(--ease);
}

.nav-dest-hotel:hover {
  color: var(--brand);
  background: rgba(244, 15, 80, 0.05);
}

/* ── BANDA GRIS (hoteles destacados) ── */
.nav-mega-aside {
  background: rgba(17, 17, 17, 0.03);
  border-top: 1px solid rgba(17, 17, 17, 0.07);
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
}

/* La banda ya aporta su propio padding: evita duplicarlo con el de la sección. */
.nav-mega-aside > .nav-mega-section {
  padding: 0;
}

.nav-mega-internacionales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 6px 14px;
  align-content: start;
  flex: 1;
}

.nav-mega-dest--intl {
  min-width: 0;
  padding: 4px 0 6px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

.nav-mega-dest--intl:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.nav-dest-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  padding: 2px 6px;
  transition: gap var(--ease), opacity var(--ease);
}

.nav-dest-more::after {
  content: '→';
  font-size: 0.85em;
}

.nav-dest-more:hover {
  gap: 7px;
  opacity: 0.85;
}

/* ── PANEL TOURS ── */
/* Mismo esquema "full-bleed" que .nav-panel-mega (Destinos): el panel no
   lleva padding propio y cada sección interna pone el suyo — así la banda
   gris de "Tours destacados" (.nav-mega-aside, compartida con "Hoteles
   destacados") llega de verdad al ancho y al borde inferior del panel, en
   vez de quedar encogida por el padding del panel por fuera Y el suyo
   propio por dentro a la vez. overflow:hidden recorta las esquinas de la
   banda para que seg sigan la curva redondeada del panel. */
.nav-panel-tours {
  display: block;
  position: fixed;
  top: var(--nav-h);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(640px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}

/* Panel de Tours con banda de destacados: mismo ancho que el panel de Destinos. */
.nav-panel-tours.nav-panel-tours--promos {
  width: min(780px, calc(100vw - 32px));
}

.site-nav .has-submenu:hover .nav-panel-tours,
.site-nav .has-submenu:focus-within .nav-panel-tours {
  transform: translateX(-50%) translateY(0);
}

.nav-tours-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 20px;
  /* El panel ya no aporta padding (ver .nav-panel-tours arriba) — lo pone
     esta sección, mismo valor lateral que .nav-mega-aside/.nav-mega-section
     para que los títulos queden alineados con la banda de destacados.
     Padding inferior a propósito (no solo el gap:14px del grid del panel):
     las 3 columnas comparten la misma altura de fila según la más larga
     (La Guajira, con más tours que Santa Marta/Amazonas) — sin este aire,
     el último ítem de esa columna queda pegado a la banda de destacados. */
  padding: 20px 20px 20px;
}

.nav-tours-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 12px;
  border-top: 2px solid rgba(244, 15, 80, 0.15);
}

.nav-tours-dest {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 6px 8px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: color var(--ease), background var(--ease);
}

.nav-tours-dest:hover {
  color: var(--brand);
  background: rgba(244, 15, 80, 0.06);
}

/* tours reutilizan .nav-dest-hotel para los items individuales */

.nav-panel-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.nav-panel-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

.nav-panel-group a,
.nav-link-columns a,
.nav-link-disabled {
  color: var(--dark);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease);
  padding: 0.58rem 0.72rem;
  border-radius: var(--radius);
}

.nav-link-columns a {
  font-family: 'Instagram Sans', sans-serif;
  font-weight: 700;
}

.nav-link-ready {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(244, 15, 80, 0.04), rgba(244, 15, 80, 0.01));
  border: 1px solid rgba(244, 15, 80, 0.08);
}

.nav-link-ready-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.46rem;
  border-radius: 999px;
  background: rgba(244, 15, 80, 0.1);
  color: var(--brand);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-panel-group a:hover,
.nav-link-columns a:hover {
  color: var(--brand);
  background: rgba(244, 15, 80, 0.06);
}

.nav-link-disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #7a7a7a;
  background: #fafafa;
  border: 1px dashed rgba(17, 17, 17, 0.08);
  cursor: default;
}

.nav-link-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.06);
  color: #666666;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-link-columns {
  column-count: 2;
  column-gap: 16px;
}

.nav-link-columns a {
  display: block;
  break-inside: avoid;
  margin-bottom: 6px;
  font-family: 'Instagram Sans', sans-serif;
}

/* ── BOTÓN RESERVAR ── */
.cta-whatsapp {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: var(--white) !important;
  text-decoration: none;
  /* Más grande y confiado: es el CTA fijo de WhatsApp en cada página. */
  padding: 10px 16px;
  border-radius: var(--radius);
  font-family: var(--font) !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s var(--ease-out), transform 0.16s var(--ease-out), box-shadow 0.2s var(--ease-out);
  box-shadow: 0 4px 12px rgba(244, 15, 80, 0.25);
  border: none;
}

.cta-whatsapp:hover {
  background: var(--brand-dk);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 8, 52, 0.35);
}

.cta-whatsapp:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}

.cta-whatsapp:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.cta-whatsapp svg {
  flex-shrink: 0;
}

/* ── HAMBURGUESA ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  transition: transform 0.12s var(--ease-out);
}

.hamburger:active {
  transform: scale(0.9);
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.22s var(--ease-in-out), opacity var(--ease);
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MENÚ MÓVIL ── */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: linear-gradient(155deg, #f7f7fc 0%, #fff7f2 100%);
  border-left: 1px solid rgba(17, 17, 17, 0.08);
  padding: 8px 12px 14px;
  gap: 0;
  position: fixed;
  top: var(--nav-h);
  right: 0;
  width: min(420px, 100%);
  height: calc(100svh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1105;
  box-shadow: -18px 0 44px rgba(8, 12, 22, 0.2);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s var(--ease-drawer), opacity .2s ease;
}

.mobile-nav::-webkit-scrollbar {
  width: 8px;
}

.mobile-nav::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 17, 0.18);
  border-radius: 999px;
}

.mobile-nav.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-backdrop {
  display: none;
}

.mobile-nav-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px 12px;
}

.mobile-nav-close {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-nav-close span {
  width: 10px;
  height: 10px;
  border-left: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
  transform: rotate(45deg);
  margin-left: 4px;
}

.mobile-nav-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.mobile-nav-title {
  font-family: var(--font) !important;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.mobile-nav > a:not(.cta-whatsapp),
.mobile-nav-root-link,
.mobile-nav-panel a,
.mobile-nav-trigger,
.mobile-nav-panel .nav-link-disabled {
  font-family: var(--font) !important;
  font-size: 0.96rem;
  font-weight: 520;
  color: var(--dark);
  text-decoration: none;
  /* 12px (no 11px): con line-height 1.32 a 0.96rem, el renglón clicable
     completo llega a los 44px mínimos de touch target. */
  padding: 12px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  letter-spacing: 0.01em;
  line-height: 1.32;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease);
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
}

.mobile-nav > a:not(.cta-whatsapp):hover,
.mobile-nav-panel a:hover,
.mobile-nav-trigger:hover {
  color: var(--brand);
}

.mobile-nav-panel .nav-link-disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #7a7a7a;
  padding: 10px 0 10px 14px;
  border-bottom: none;
  cursor: default;
}

.mobile-nav-panel .nav-link-ready {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile-nav-group {
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--radius);
  margin: 0 0 6px;
  overflow: visible;
  /* Sólido, no vidrio: mismo motivo que .nav-panel arriba — es texto de
     menú para leer, y el blur depende de aceleración por GPU. */
  background: var(--white);
  box-shadow: var(--lg-shine-light);
}

.mobile-nav-root-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(17, 17, 17, 0.08) !important;
  border-radius: var(--radius);
  padding: 12px 14px 12px 16px !important;
  /* Sólido, no vidrio: mismo motivo que .mobile-nav-group, su hermano en
     el mismo cajón — es un link de menú para leer. */
  background: var(--white);
  box-shadow: var(--lg-shine-light);
  margin-bottom: 8px;
  font-weight: 640;
}

.mobile-nav-root-link::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(17, 17, 17, 0.48);
  border-bottom: 2px solid rgba(17, 17, 17, 0.48);
  transform: rotate(-45deg);
}

.mobile-nav-trigger {
  position: relative;
  padding: 12px 44px 12px 16px;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.015em;
  border-bottom: none;
}

.mobile-nav-trigger::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #9a9aa3;
  border-bottom: 2px solid #9a9aa3;
  transform: translateY(-58%) rotate(45deg);
  user-select: none;
  transition: transform .24s var(--ease-in-out), border-color .24s ease;
}

.mobile-nav-group.open .mobile-nav-trigger::after {
  transform: translateY(-42%) rotate(-135deg);
  border-color: var(--brand);
}

.mobile-nav-panel {
  display: none;
  padding: 0 10px 6px;
}

.mobile-nav-group.open .mobile-nav-panel {
  display: block;
}

.mobile-subgroup {
  border: none;
  border-radius: 0;
  background: transparent;
  margin: 0;
  overflow: visible;
}

.mobile-subgroup + .mobile-subgroup {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(17, 17, 17, 0.12);
}

.mobile-subgroup-toggle {
  font-family: var(--font) !important;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--dark);
  font-size: 0.76rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 8px 40px 8px 12px;
  position: relative;
  color: #3b3f47;
  border-radius: var(--radius);
}

.mobile-subgroup-toggle::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #9a9aa3;
  border-bottom: 2px solid #9a9aa3;
  transform: translateY(-58%) rotate(45deg);
  transition: transform .24s var(--ease-in-out), border-color .24s ease;
}

.mobile-subgroup.open .mobile-subgroup-toggle::after {
  transform: translateY(-42%) rotate(-135deg);
  border-color: var(--brand);
}

.mobile-subgroup-panel {
  display: none;
  padding: 0 2px 4px;
}

.mobile-subgroup.open .mobile-subgroup-panel {
  display: block;
}

.mobile-nav-panel a {
  padding: 7px 8px 7px 14px;
  border-bottom: none;
  font-size: 0.85rem;
}

.mobile-nav .cta-whatsapp {
  margin-top: 6px;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--brand);
  color: var(--white) !important;
  border-radius: var(--radius);
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(244, 15, 80, 0.25);
  border-bottom: none;
  width: 100%;
}

/* ── MÓVIL: GRUPOS DE DESTINOS DENTRO DE PANEL ── */
.mobile-dest-group {
  padding: 1px 0 3px;
  border-bottom: 1px dashed rgba(17, 17, 17, 0.12);
  margin-bottom: 2px;
}

.mobile-dest-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mobile-dest-toggle,
.mobile-dest-title {
  font-family: var(--font) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 580;
  color: var(--dark);
  text-decoration: none;
  padding: 8px 10px 8px 12px;
  letter-spacing: 0;
  border-radius: var(--radius);
  transition: color var(--ease), background var(--ease);
}

.mobile-dest-toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-right: 2px solid #a3a3aa;
  border-bottom: 2px solid #a3a3aa;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform .24s var(--ease-in-out), border-color .24s ease;
}

.mobile-dest-group.open .mobile-dest-toggle::after {
  transform: rotate(-135deg);
  border-color: var(--brand);
}

.mobile-dest-toggle:hover,
.mobile-dest-title:hover {
  color: var(--brand);
  background: rgba(244, 15, 80, 0.06);
}

.mobile-dest-group.open .mobile-dest-toggle {
  color: #2d3138;
  background: rgba(244, 15, 80, 0.04);
}

.mobile-dest-panel {
  display: none;
  padding: 3px 2px 4px 10px;
}

.mobile-dest-group.open .mobile-dest-panel {
  display: block;
}

.mobile-dest-hotel {
  display: block;
  font-size: 0.82rem;
  font-weight: 430;
  color: #5a606b;
  text-decoration: none;
  padding: 7px 10px 7px 14px;
  margin: 1px 0;
  letter-spacing: 0.005em;
  line-height: 1.35;
  border-left: 2px solid rgba(244, 15, 80, 0.18);
  border-radius: var(--radius);
  transition: color var(--ease), background-color var(--ease), border-color var(--ease);
}

.mobile-dest-hotel:hover {
  color: var(--brand);
  border-left-color: rgba(244, 15, 80, 0.45);
  background: rgba(244, 15, 80, 0.05);
}


/* ═══════════════════════════════════════
   PÁGINAS VIRTUALES DESTINOS / HOTELES / TOURS
═══════════════════════════════════════ */
#content.site-content {
  display: block;
}

.aov-virtual-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.aov-virtual-main > * {
  width: 100%;
}

.aov-virtual-main a,
.aov-virtual-main button,
.aov-virtual-main input,
.aov-virtual-main textarea,
.aov-virtual-main select {
  font-family: 'Instagram Sans', system-ui, sans-serif;
}

.aov-virtual-main img {
  max-width: 100%;
  height: auto;
}

.aov-virtual-main .grid-destino {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px 52px;
  gap: 24px;
}

.aov-virtual-main .gd-card {
  border-radius: var(--radius);
  min-height: 27rem;
  box-shadow: 0 18px 38px rgba(8, 15, 30, 0.18);
  transform: translateZ(0);
}

.aov-virtual-main .gd-card:hover {
  transform: translateY(-6px);
}

.aov-virtual-main .gd-overlay {
  height: 72%;
  background: linear-gradient(to top, rgba(6, 10, 20, 0.86) 0%, rgba(6, 10, 20, 0.12) 62%, rgba(6, 10, 20, 0) 100%);
}

.aov-virtual-main .gd-info {
  padding: 1.1rem 1.1rem 1.25rem;
}

.aov-virtual-main .gd-info h3 {
  font-size: 1.15rem;
}

.aov-virtual-main .gd-info p {
  font-size: 0.84rem;
  line-height: 1.55;
}

.aov-virtual-main .gd-btn {
  background: var(--brand-btn);
  border-color: var(--brand-btn);
  color: #ffffff;
  padding: 10px 16px;
}

.aov-virtual-main .gd-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
}

@media (max-width: 900px) {
  .aov-virtual-main .grid-destino {
    padding: 0 24px 44px;
    gap: 16px;
  }

  .aov-virtual-main .gd-card {
    min-height: 24rem;
  }
}

@media (max-width: 560px) {
  .aov-virtual-main .grid-destino {
    padding: 0 16px 38px;
  }
}

/* ═══════════════════════════════════════
   SECCIÓN HERO - CARRUSEL DE DESTINOS
═══════════════════════════════════════ */
.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--brand);
}

.hero-carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: var(--brand);
}

.hero-items-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* ── ITEMS DEL CARRUSEL ── */
.hero-item {
  position: relative;
  min-width: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.8s ease;
}

.hero-item.active {
  z-index: 10;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(244, 15, 80, 0.2);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 64px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 64px;
}

/* ── SECCIÓN DE TEXTO ── */
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 3;
  text-align: left;
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
  margin: 0 0 24px 0;
  color: var(--white);
  letter-spacing: 2px;
}

.hero-subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: var(--white);
  margin: 0 0 12px 0;
  font-family: var(--font);
  opacity: 0.95;
}

.hero-duration {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
  margin: 0;
  font-family: var(--font);
  opacity: 0.85;
}

/* ── IMAGEN DESTACADA ── */
.hero-featured-image {
  position: relative;
  max-width: 100%;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  z-index: 3;
  border: 4px solid var(--white);
}

/* ── BADGE DEL HOTEL ── */
.hero-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--brand);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 700;
  z-index: 10;
  font-family: var(--font);
}

/* ── BOTÓN CTA ── */
.hero-cta {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: var(--brand-btn);
  border: none;
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font);
  text-decoration: none;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  cursor: pointer;
  display: inline-block;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
}

.hero-cta:hover {
  background: var(--brand);
  transform: translateX(-50%) translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.hero-cta:active {
  transform: translateX(-50%) translateY(-2px) scale(0.97);
  transition-duration: 0.1s;
}

.hero-cta:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── CONTROLES DE NAVEGACIÓN ── */
.hero-controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Puntos de navegación */
.hero-dots-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background var(--ease), width 0.25s var(--ease-out), transform 0.2s var(--ease-out), border-radius 0.25s var(--ease-out);
  flex-shrink: 0;
  padding: 0;
}

.hero-dot.active {
  background: var(--white);
  transform: scale(1.4);
  width: 20px;
  border-radius: var(--radius);
}

.hero-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.hero-dot:active {
  transform: scale(0.85);
}

.hero-dot.active:active {
  transform: scale(1.25);
}

/* Play/Pause button */
.hero-play-pause {
  background: var(--white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  flex-shrink: 0;
  padding: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.hero-play-pause:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.hero-play-pause:active {
  transform: scale(0.95);
}

.hero-play-pause svg {
  width: 22px;
  height: 22px;
  fill: var(--brand);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .header-inner > .cta-whatsapp { display: none; }
  .hamburger { display: flex; }
  .mobile-nav { display: flex; }
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: var(--nav-h) 0 0;
    background: rgba(17, 17, 17, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1100;
    border: 0;
  }
  .mobile-nav-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.aov-mobile-nav-open {
    overflow: hidden;
  }
}

@media (max-width: 1180px) {
  .site-nav {
    justify-content: flex-end;
    gap: 2px;
  }

  .site-nav .nav-link,
  .site-nav .nav-trigger {
    font-size: 0.88rem;
    padding: 9px 9px;
  }

  .nav-panel-wide,
  .nav-panel-xl {
    width: min(680px, calc(100vw - 56px));
  }
}

@media (max-width: 480px) {
  .header-inner { padding: 0 20px; }
  .site-logo img { height: 44px; }
  .mobile-nav { width: 100%; }
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.site-footer {
  background: #f8f8f8;
  font-family: var(--font) !important;
  margin-top: auto;
}

.site-footer p {
  margin: 0;
}

.footer-inner {
  max-width: 1640px;
  margin: 0 auto;
  padding: 64px 48px 48px;
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.85fr 0.85fr 1.3fr;
  gap: 32px;
  align-items: start;
  align-content: start;
  grid-auto-rows: max-content;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 4px;
}

.footer-brand {
  padding-bottom: 0;
}

/* ── LOGO ── */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 12px;
  margin-top: 0;
  transition: opacity var(--ease);
}

.footer-logo:hover {
  opacity: 0.85;
}

.footer-logo img {
  height: 45px;
  width: auto;
  max-width: 260px;
}

.footer-logo-image {
  display: block;
}

.footer-logo-text {
  display: none;
  flex-direction: column;
  line-height: 1;
}

.footer-logo-main {
  font-family: var(--font) !important;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--dark);
}

.footer-logo-sub {
  font-family: var(--font) !important;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--brand);
  margin-top: 4px;
}

.footer-desc {
  font-family: var(--font) !important;
  font-size: 0.81rem;
  font-weight: 400;
  color: var(--gray);
  line-height: 1.6;
  max-width: 320px;
  margin: 0;
  margin-top: 12px;
}

/* ── ENCABEZADOS DE COLUMNA ──
   Un título debe leerse pegado a SU lista y separado de todo lo demás: el
   salto hacia su propio contenido (margin-bottom) tiene que ser claramente
   menor que el salto hacia la sección anterior/siguiente (margin-top). */
.footer-heading {
  font-family: var(--font) !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brand);
  /* 36px antes (separación de la sección anterior) / 16px después (pegado a
     su propia lista) — un título debe leerse más cerca de "lo suyo" que de
     lo que vino antes. margin-top va en el elemento, no en un selector de
     hermano adyacente: entre dos .footer-heading siempre hay una lista de
     por medio, así que ".footer-heading + .footer-heading" nunca aplicaría. */
  margin: 36px 0 16px 0;
  padding: 0;
  line-height: 1.2;
  min-height: 14px;
}

/* Alinear el primer heading de cada columna de enlaces al top, para que todas
   arranquen a la misma altura. No incluye .footer-brand: ahí "Síguenos" es
   el único <h4> pero NO es el primer elemento de la columna (va antes el
   bloque de contacto), así que sí necesita su propio margin-top para
   separarse de él. El contacto sí es el primer elemento de la columna
   (ver regla de .footer-contact más abajo, que le quita su margen). */
.footer-col:not(.footer-brand) > .footer-heading:first-of-type {
  margin-top: 0 !important;
}

/* El contacto es ahora lo primero en .footer-brand (ya no hay logo ni
   descripción antes) — sin esto, su margin-top de 22px (pensado para
   separarse de la descripción) desalinearía el arranque de esta columna
   contra las demás. */
.footer-brand > .footer-contact {
  margin-top: 0;
}

.footer-brand .footer-heading {
  margin-top: 22px;
}

/* Segunda columna de hoteles: encabezado invisible que ocupa el mismo alto
   que "Hoteles" en la primera, para que ambas listas arranquen alineadas
   sin repetir el título dos veces. */
.footer-heading--continued {
  visibility: hidden;
}

/* ── ENLACES DE NAVEGACIÓN ── */
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.footer-links a {
  font-family: var(--font) !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  transition: color var(--ease);
}

.footer-links a:hover {
  color: var(--brand);
}

/* ── SUBGRUPOS (ej: hoteles agrupados por destino, tours por destino) ── */
.footer-subheading {
  margin: 18px 0 8px;
  font-family: var(--font) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa0a8;
}

.footer-col > .footer-subheading:first-of-type {
  margin-top: 0;
}

.footer-links--tight {
  gap: 6px;
}

.footer-links--tight a {
  font-size: 0.82rem;
  font-weight: 400;
}

/* ── COLUMNA DE RESERVA: la que dirige siempre a la acción ──
   Antes era una tarjeta blanca con sombra propia, distinta al resto de
   columnas (que van directo sobre el gris del footer). Eso la hacía leer
   como un widget pegado encima en vez de una columna más. Ahora usa el
   mismo lenguaje plano que las demás — el color verde del botón "Enviar"
   ya es suficiente ancla visual para la acción. */
.footer-col-cta {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* ── CONTACTO ──
   Grupo distinto a la descripción de marca: necesita su propio salto, no el
   gap mínimo (4px) que separa por defecto a los hijos de .footer-col. */
.footer-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-contact svg {
  flex-shrink: 0;
}

.footer-contact .footer-contact-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.footer-contact a {
  font-family: var(--font) !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  transition: color var(--ease);
}

.footer-contact a:hover {
  color: var(--brand);
}

/* El teléfono abre WhatsApp (data-aov-wa-open): merece leerse como una
   acción, no como un dato pasivo más. Usa el mismo lenguaje que los demás
   botones del sitio (rosa de marca, radio de 8px — ver .cta-whatsapp del
   header y .aov-home-cta-btn), no el verde/píldora exclusivo del widget de
   WhatsApp. Va en outline (no relleno) para no competir con el botón verde
   "Enviar y abrir WhatsApp" del formulario: ese debe seguir siendo la
   acción más fuerte de la columna. */
.footer-contact a.footer-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius);
  background: transparent;
  color: var(--brand);
  font-weight: 700;
  transition: background var(--ease), color var(--ease), transform var(--ease);
}

.footer-contact a.footer-contact-cta:hover {
  background: var(--brand);
  color: #ffffff;
  transform: translateY(-1px);
}

.footer-contact a.footer-contact-cta:hover .footer-contact-icon {
  filter: brightness(0) invert(1);
}

/* ── REDES SOCIALES ── */
.footer-socials-cta {
  margin: 0 0 12px;
  font-family: var(--font) !important;
  font-size: 0.81rem;
  color: var(--gray);
  line-height: 1.5;
  max-width: 280px;
}

.footer-socials {
  display: flex;
  gap: 6px;
  /* Compensa el padding invisible de cada link (ver abajo) para que el
     primer ícono siga alineado con el resto del texto de la columna. */
  margin-left: -8px;
}

/* Minimalista: sin caja, sin sombra, sin relleno — solo el ícono en el color
   de marca. El tamaño de clic sigue siendo generoso (40px) vía padding, no
   vía una caja visible, así no compite en atención con el resto del footer. */
.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--brand);
  text-decoration: none;
  transition: color var(--ease), background var(--ease);
}

.footer-socials a svg {
  width: 18px;
  height: 18px;
}

.footer-socials a:hover {
  color: var(--brand-dk);
  background: #fdeaef;
}

.footer-socials a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .aov-home-faq-answer,
  .aov-home-quote-feedback.is-flash {
    animation: none;
  }
}

/* ── BARRA DE DERECHOS DE AUTOR ── */
.footer-bar {
  border-top: 1px solid #e8e8e8;
  padding: 24px 48px;
  max-width: 1640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.footer-bar p {
  font-family: var(--font) !important;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gray);
}

.footer-bar p a {
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.16s ease;
}

/* ── Insignia RNT ──
   Solo define la forma de "pill"; el color se hereda del contexto donde se
   coloque (footer, kpis) para no tener que repetir una variante por fondo.
   Ver aov_rnt_badge() en entity-fields.php. Se quitó de los CTA finales
   (cta-rojo/cta-oscuro) porque interfería con otros elementos ahí. */
.aov-rnt-badge,
p.aov-rnt-badge {
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.85;
  white-space: nowrap;
}
.aov-rnt-badge--kpis { margin-top: 0.7rem !important; }

.footer-bar p a:hover,
.footer-bar p a:focus-visible {
  color: var(--brand);
}

/* ── HERO RESPONSIVO ── */
@media (max-width: 900px) {
  .hero-carousel {
    height: 90vh;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 40px;
    padding-bottom: 120px;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-featured-image {
    max-width: 340px;
  }

  .hero-cta {
    bottom: 100px;
  }

  .hero-controls {
    bottom: 20px;
    gap: 28px;
  }

  .hero-play-pause {
    width: 38px;
    height: 38px;
  }

  .hero-play-pause svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .hero-carousel {
    height: 70vh;
    min-height: 600px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
    padding-bottom: 100px;
  }

  .hero-title {
    font-size: 2.25rem;
    line-height: 1.1;
  }

  .hero-subtitle {
    font-size: 0.875rem;
  }

  .hero-duration {
    font-size: 0.75rem;
  }

  .hero-featured-image {
    max-width: 100%;
    max-width: 260px;
    border-radius: var(--radius);
  }

  .hero-badge {
    padding: 8px 14px;
    font-size: 0.75rem;
    top: 16px;
    left: 16px;
  }

  .hero-cta {
    padding: 12px 32px;
    font-size: 0.875rem;
    bottom: 90px;
    width: calc(100% - 32px);
  }

  .hero-controls {
    bottom: 12px;
    gap: 16px;
  }

  .hero-dot {
    width: 7px;
    height: 7px;
  }

  .hero-dot.active {
    width: 18px;
  }

  .hero-play-pause {
    width: 36px;
    height: 36px;
  }

  .hero-play-pause svg {
    width: 20px;
    height: 20px;
  }
}

/* ── PIE DE PÁGINA ADAPTABLE ──
   5 columnas de escritorio → 3 (marca y CTA a ancho completo) → 2 → 1. */
@media (max-width: 1180px) {
  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    padding: 60px 40px 44px;
  }

  .footer-brand,
  .footer-col-cta {
    grid-column: 1 / -1;
  }

  .footer-col-cta {
    max-width: 460px;
  }
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 56px 40px 40px;
  }

  .footer-brand,
  .footer-col-cta {
    grid-column: 1 / -1;
  }

  .footer-col-cta {
    max-width: 460px;
  }

  .footer-bar {
    padding: 20px 40px;
  }
}

@media (max-width: 560px) {
  .footer-inner {
    grid-template-columns: 1fr;
    padding: 48px 28px 36px;
    gap: 32px;
  }

  .footer-col {
    display: flex;
    flex-direction: column;
  }

  .footer-col-cta {
    max-width: none;
  }

  .footer-heading {
    margin-bottom: 14px;
  }

  .footer-links,
  .footer-contact {
    margin-bottom: 8px;
  }

  .footer-bar {
    flex-direction: column;
    text-align: center;
    padding: 20px 28px;
    gap: 8px;
  }

  .footer-bar p {
    margin: 0;
  }

  /* ── Acordeón de columnas largas (Destinos, Tours, Hoteles, Traslados) ──
     .footer-brand y .footer-col-cta quedan siempre abiertas (contacto y CTA
     principal, ver footer-accordion.js). El segundo bloque de "Hoteles"
     (spacer invisible en escritorio para alinear columnas) pasa a ser un
     encabezado real y clicable acá. */
  .footer-heading--continued {
    visibility: visible;
  }

  .footer-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    cursor: pointer;
    user-select: none;
  }

  .footer-accordion-toggle::after {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .footer-accordion-toggle.is-open::after {
    transform: rotate(-135deg);
  }

  .footer-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .footer-accordion-toggle.is-open + .footer-accordion-panel {
    max-height: 1200px;
  }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .footer-accordion-toggle::after,
  .footer-accordion-panel {
    transition: none;
  }
}

/* ═══════════════════════════════════════
   CONTENIDO PRINCIPAL (SITE-MAIN)
═══════════════════════════════════════ */
.site-main,
#content,
.site-content {
  flex: 1;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

#content,
.site-content {
  max-width: 100%;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

.site-main {
  flex: 1;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.site-main .container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
  box-sizing: border-box;
}

.site-main .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.site-main .col-md-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}

/* Contenedores de WordPress - Sin padding */
.wp-block-group,
.wp-site-blocks {
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem 0;
}

p {
  margin: 0 0 1rem 0;
}

@media (max-width: 900px) {
  .site-main .container {
    padding: 0 40px;
  }
}

@media (max-width: 480px) {
  .site-main .container {
    padding: 0 28px;
  }
  
  #content,
  .site-content {
    max-width: 100%;
    width: 100%;
  }
}

/* ═══════════════════════════════════════
   HOME - COMPOSICION PRINCIPAL
═══════════════════════════════════════ */
.aov-home-main {
  background: #fff;
  --aov-space-xs: 13px;
  --aov-space-sm: 21px;
  --aov-space-md: 34px;
  --aov-space-lg: 55px;
  --aov-space-xl: 89px;
}

.aov-vac-section,
.aov-sv-section,
.aov-dest-section,
.aov-home-faq,
.aov-home-instagram,
.aov-home-cta-band {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}

.aov-home-intro {
  padding: var(--aov-space-lg) 0 var(--aov-space-md);
}

.aov-home-quote {
  /* --aov-space-md/lg solo existen dentro de .aov-home-main (el home).
     Este mismo componente ahora también vive en páginas de hotel, dentro de
     .aov-virtual-main — ahí caía sin padding porque las variables no
     resolvían a nada. El fallback usa el ritmo de sección ya establecido
     en esa escala (tight arriba, el nivel base abajo). */
  padding: var(--aov-space-md, var(--aov-section-y-tight)) 0 var(--aov-space-md, var(--aov-section-y));
}

/* En el hotel, la caja de cotización ya trae su propio borde + sombra +
   fondo diferenciado — no es una transición entre secciones más, así que
   no necesita el mismo aire de sección completa abajo (el de arriba ya
   era liviano). Las secciones vecinas (carrusel de habitaciones arriba,
   galería abajo) traen su propio padding, y sumado al de acá el resultado
   se sentía como un salto en blanco enorme. Baja ambos lados al nivel
   liviano. Va después de la regla de arriba para ganarle en el cascade. */
.aov-home-quote--hotel {
  padding-top: var(--aov-section-y-tight);
  padding-bottom: var(--aov-section-y-tight);
}

.aov-home-quote .container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  box-sizing: border-box;
}

.aov-home-quote-card {
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--radius);
  background: linear-gradient(130deg, #ffffff 0%, #fff7f7 100%);
  padding: 20px;
  display: block;
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.06);
}

.aov-home-quote-copy {
  max-width: 72ch;
  margin: 0 0 14px;
}

.aov-home-quote-kicker {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aov-home-quote-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  line-height: 1.15;
  color: #171717;
}

.aov-home-quote-lead {
  margin: 10px 0 0;
  color: #4f5560;
  line-height: 1.45;
  font-size: 0.94rem;
}

.aov-home-quote-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--radius);
  padding: 18px;
  align-items: stretch;
}

.aov-home-quote-row {
  display: grid;
  gap: 14px;
  align-items: end;
}

.aov-home-quote-row-client {
  grid-template-columns: minmax(200px, 0.85fr) minmax(220px, 0.95fr) minmax(340px, 1.2fr);
}

.aov-home-quote-row-destination {
  grid-template-columns: minmax(220px, 1.05fr) minmax(220px, 1.05fr) minmax(180px, 0.9fr) minmax(180px, 0.9fr);
}

.aov-home-quote-row-travel {
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(230px, auto);
}

.aov-home-quote-row-actions {
  grid-template-columns: 1fr;
}

.aov-home-quote-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #3a3f47;
  letter-spacing: 0.005em;
  line-height: 1.15;
  min-width: 0;
}

.aov-home-quote-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.aov-home-quote-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4a505b;
  flex-shrink: 0;
}

.aov-home-quote-icon svg {
  width: 18px;
  height: 18px;
}

.aov-home-quote-example {
  margin-top: -2px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #6f7784;
  line-height: 1.2;
}

.aov-home-quote-phone {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: block;
}

.aov-home-quote-phone legend {
  margin: 0;
  padding: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #3a3f47;
  letter-spacing: 0.005em;
  line-height: 1.15;
}

.aov-home-quote-phone-row {
  display: grid;
  grid-template-columns: minmax(106px, 0.7fr) minmax(0, 1.3fr);
  gap: 10px;
}

.aov-home-quote-form input,
.aov-home-quote-form select {
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: #fff;
  font-family: var(--font) !important;
  font-size: 1rem;
  color: #20242b;
  min-height: 58px;
}

.aov-home-quote-form select {
  cursor: pointer;
}

.aov-home-quote-form input:focus,
.aov-home-quote-form select:focus {
  outline: none;
  border-color: rgba(244, 15, 80, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 46, 111, 0.22);
}

.aov-home-quote-form input::placeholder {
  color: #8a919d;
}

.aov-home-quote-form input,
.aov-home-quote-form select {
  width: 100%;
  min-width: 0;
}

.aov-home-quote-field-name {
  grid-column: auto;
}

.aov-home-quote-field-email {
  grid-column: auto;
}

.aov-home-quote-field-whatsapp {
  grid-column: auto;
}

.aov-quote-email-wrap {
  position: relative;
}

.aov-quote-email-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1.5px solid #dfe3e8;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 25, 35, 0.14);
  max-height: 168px;
  overflow-y: auto;
}

.aov-quote-email-suggest[hidden] {
  display: none;
}

.aov-quote-email-suggest li {
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #223;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.aov-quote-email-suggest li:hover {
  background: rgba(244, 15, 80, 0.1);
  color: var(--brand);
}

.aov-home-quote-field-destination,
.aov-home-quote-field-hotel,
.aov-home-quote-field-checkin,
.aov-home-quote-field-checkout,
.aov-home-quote-field-adults,
.aov-home-quote-field-children,
.aov-home-quote-field-plan {
  grid-column: auto;
}

.aov-home-quote-field-checkin .aov-home-quote-label,
.aov-home-quote-field-checkout .aov-home-quote-label {
  gap: 6px;
  font-size: 0.88rem;
  line-height: 1.1;
}

.aov-home-quote-actions {
  grid-column: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: end;
  gap: 8px;
  flex-wrap: wrap;
}

.aov-home-quote-form .is-invalid {
  border-color: #d9294f;
  background: #fff7f9;
}

.aov-home-quote-field-error {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #d9294f;
}

.aov-home-quote-field-error:empty {
  display: none;
}

.aov-home-quote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  justify-self: start;
  border-radius: var(--radius);
  font-family: var(--font) !important;
  font-size: 0.9rem;
  font-weight: 700;
  /* Sin mayúscula forzada ni tracking amplio: es texto de botón (Label),
     no un título de hero — "La Regla de la Mayúscula Reservada". */
  padding: 12px 20px;
  min-height: 40px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.aov-home-quote-btn-secondary {
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: transparent;
  color: var(--brand);
}

.aov-home-quote-btn-secondary:hover {
  color: #ffffff;
  border-color: var(--brand);
  background: var(--brand);
  transform: translateY(-1px);
}

.aov-home-quote-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.aov-home-quote-btn-primary {
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand);
  color: #ffffff;
  /* Más grande que "Limpiar": este botón es el cierre de todo el formulario. */
  font-size: 1rem;
  padding: 14px 26px;
  min-height: 46px;
}

.aov-home-quote-btn-primary:disabled {
  opacity: 0.72;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.aov-home-quote-btn-primary:hover {
  color: #ffffff;
  border-color: var(--brand-dk);
  background: var(--brand-dk);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(244, 15, 80, 0.25);
}

.aov-home-quote-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
  color: #676e7a;
}

.aov-home-quote-feedback {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.2em;
  font-size: 0.82rem;
  color: #d9294f;
}

.aov-home-quote-feedback.is-ok {
  color: #1f7a48;
}

/* El mensaje de validación/éxito cambiaba de texto de golpe; un fundido
   breve evita que se sienta como que "no pasó nada". Se dispara desde JS
   re-agregando esta clase (ver setFeedback() en home-bundle.js). */
.aov-home-quote-feedback.is-flash {
  animation: aov-feedback-in 0.25s var(--ease-out, ease) both;
}

@keyframes aov-feedback-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1600px) {
  .aov-home-quote-row-destination {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .aov-home-quote-row-travel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .aov-home-quote-row-client {
    grid-template-columns: 1fr 1fr 1.2fr;
  }

  .aov-home-quote-actions {
    grid-column: auto;
  }
}

@media (max-width: 1180px) {
  .aov-home-quote-row-client {
    grid-template-columns: 1fr;
  }

  .aov-home-quote-row-destination,
  .aov-home-quote-row-travel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aov-home-quote-row-actions {
    grid-template-columns: 1fr;
  }

  .aov-home-quote-actions {
    grid-column: auto;
  }
}

.aov-home-kicker {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}

.aov-home-title {
  margin: 0;
  font-family: var(--font) !important;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  line-height: 1.02;
  font-weight: 800;
  max-width: 18ch;
}

.aov-home-lead {
  margin: 18px 0 0;
  color: #444;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  max-width: 62ch;
  line-height: 1.45;
}

.aov-home-stats {
  margin-top: 32px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aov-home-stat {
  border: 1px solid #ececec;
  border-radius: var(--radius);
  padding: 16px 18px;
  background: #fff;
}

.aov-home-stat strong {
  display: block;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

.aov-home-stat span {
  display: block;
  margin-top: 6px;
  color: #666;
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════
   TUS VACACIONES PERFECTAS (SWIPER)
═══════════════════════════════════════ */
.aov-vac-section {
  width: 100%;
  padding: var(--aov-space-md) 0;
}

.aov-vac-header {
  text-align: center;
  margin-bottom: var(--aov-space-sm);
}

.aov-vac-title {
  margin: 0;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  color: #171717;
}

.aov-vac-title span {
  color: var(--brand);
}

.aov-vac-desc {
  margin: 12px auto 0;
  max-width: 900px;
  color: #666;
  line-height: 1.5;
}

.aov-vac-swiper {
  width: 100%;
  padding: 4px 2px 50px;
}

.aov-vac-swiper .aov-vac-card {
  position: relative;
  height: 18rem;
  min-height: 18rem;
  border-radius: var(--radius);
  overflow: hidden;
  background-image: var(--aov-vac-bg);
  background-size: cover;
  background-position: center;
  background-color: #e7e7e7;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  /* Sin transform: Swiper ya usa transform en cada slide para posicionar el
     carrusel — animar aparte transform acá lo pisaría. background-size sí
     es seguro (no toca el mismo canal). */
  transition: background-size 0.5s ease, box-shadow 0.25s ease;
}

.aov-vac-swiper .aov-vac-card:hover {
  background-size: 110%;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .aov-vac-swiper .aov-vac-card:hover {
    background-size: cover;
  }
}

/* Mismo radio que .aov-vac-box (var(--radius)) y mismo margen lateral que
   ella: la caja blanca es width:90% centrada en .aov-vac-content (flex),
   o sea que su borde queda a 5% del canto de la tarjeta — antes la
   etiqueta usaba un valor fijo en px que solo coincidía por casualidad en
   un ancho de tarjeta puntual, y se desalineaba en el resto. Usar 5% acá
   también las mantiene en la misma línea sin importar el ancho real. */
.aov-vac-tag {
  position: absolute;
  top: 12px;
  left: 5%;
  z-index: 2;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 12px;
}

/* Mismo molde que aov-vac-tag, en espejo a la derecha, en amarillo de marca
   para que se distinga de la etiqueta de destino. */
.aov-vac-promo {
  position: absolute;
  top: 12px;
  right: 5%;
  z-index: 2;
  border-radius: var(--radius);
  background: #ffed00;
  color: #111111;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 6px 12px;
}

.aov-vac-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  z-index: 1;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(10px) saturate(var(--lg-saturate));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.aov-vac-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-bottom: 14px;
  display: flex;
  justify-content: center;
}

.aov-vac-box {
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
  width: 90%;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.11);
}

.aov-vac-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.aov-vac-row h3 {
  margin: 0;
  color: var(--brand);
  font-size: 1.02rem;
  line-height: 1.2;
}

.aov-vac-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  color: var(--brand);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  /* Antes 0.76rem/7px 10px: se perdía dentro de la tarjeta grande del
     carrusel. Sube al mismo peso que el resto de los CTA del home. */
  font-size: 0.85rem;
  font-weight: 700;
  padding: 9px 14px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(244, 15, 80, 0.15);
}

.aov-vac-row a:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(168, 8, 52, 0.4);
  transform: translateY(-1px);
}

.aov-vac-row a:active {
  transform: translateY(1px);
}

.aov-vac-row a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.aov-vac-swiper .swiper-button-prev,
.aov-vac-swiper .swiper-button-next {
  color: #fff;
  background: var(--lg-dark-bg);
  border: 1px solid var(--lg-dark-border);
  width: 2.2em;
  height: 2.2em;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow: var(--lg-shine-dark);
}

.aov-vac-swiper .swiper-button-prev:hover,
.aov-vac-swiper .swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.55);
  transform: scale(1.08);
}

.aov-vac-swiper .swiper-button-prev:focus-visible,
.aov-vac-swiper .swiper-button-next:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.aov-vac-swiper .swiper-button-prev::after,
.aov-vac-swiper .swiper-button-next::after {
  font-size: 0.9rem;
  font-weight: 800;
}

/* Flechas de navegación de TODOS los carruseles Swiper del sitio (home y
   páginas de hotel/tour/traslado): Swiper dibuja su flecha por defecto con
   una fuente de íconos propia vía el "content" del ::after — acá se apaga
   ese glifo y se pinta uno de Phosphor (caret-left/caret-right) con la
   misma técnica de máscara que el resto de los íconos del sitio. Regla
   global, sin escopar a un contenedor, para no repetirla en cada carrusel;
   los estilos de tamaño/color de cada botón (arriba y en aov-landing-global.css)
   siguen definiendo el círculo, esto solo pinta el glifo de adentro. */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: '' !important;
  display: block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.swiper-button-prev::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M165.66%2C202.34a8%2C8%2C0%2C0%2C1-11.32%2C11.32l-80-80a8%2C8%2C0%2C0%2C1%2C0-11.32l80-80a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32L91.31%2C128Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M165.66%2C202.34a8%2C8%2C0%2C0%2C1-11.32%2C11.32l-80-80a8%2C8%2C0%2C0%2C1%2C0-11.32l80-80a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32L91.31%2C128Z%22/%3E%3C/svg%3E");
}

.swiper-button-next::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M181.66%2C133.66l-80%2C80a8%2C8%2C0%2C0%2C1-11.32-11.32L164.69%2C128%2C90.34%2C53.66a8%2C8%2C0%2C0%2C1%2C11.32-11.32l80%2C80A8%2C8%2C0%2C0%2C1%2C181.66%2C133.66Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M181.66%2C133.66l-80%2C80a8%2C8%2C0%2C0%2C1-11.32-11.32L164.69%2C128%2C90.34%2C53.66a8%2C8%2C0%2C0%2C1%2C11.32-11.32l80%2C80A8%2C8%2C0%2C0%2C1%2C181.66%2C133.66Z%22/%3E%3C/svg%3E");
}

.aov-vac-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.aov-vac-swiper:not(.swiper-initialized) .aov-vac-card {
  width: 100%;
}

/* ═══════════════════════════════════════
   CARRUSEL DESTINOS EXPERIENCIAS
═══════════════════════════════════════ */
.aov-dest-section {
  /* xl (89px) arriba se sentía como demasiado aire antes de esta sección
     — se ve incluso en captura. Se baja a md para que la página fluya sin
     pausas largas entre bloques que están relacionados temáticamente. */
  padding: var(--aov-space-md) 0 var(--aov-space-lg);
}

.aov-dest-header {
  text-align: left;
  margin-bottom: var(--aov-space-sm);
}

.aov-dest-title {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  color: #171717;
}

.aov-dest-swiper {
  width: 100%;
  padding: 4px 2px 8px;
}

.aov-dest-swiper .aov-dest-card {
  position: relative;
  height: 18.5rem;
  min-height: 18.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background-image: var(--aov-dest-bg);
  background-size: cover;
  background-position: center;
  background-color: #e7e7e7;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  /* Sin transform (ver .aov-vac-card): Swiper ya lo usa para posicionar
     el slide, animar background-size en cambio es seguro. */
  transition: background-size 0.5s ease, box-shadow 0.25s ease;
}

.aov-dest-swiper .aov-dest-card:hover {
  background-size: 110%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .aov-dest-swiper .aov-dest-card:hover {
    background-size: cover;
  }
}

/* Mismo radio que .aov-dest-box (var(--radius)) y mismo margen lateral
   (5%, igual que el borde de la caja centrada al 90% de ancho) — ver la
   nota en .aov-vac-tag. */
.aov-dest-tag {
  position: absolute;
  top: 12px;
  left: 5%;
  z-index: 3;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 4px 12px;
}

.aov-dest-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  z-index: 1;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(10px) saturate(var(--lg-saturate));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.aov-dest-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding-bottom: 14px;
  display: flex;
  justify-content: center;
}

.aov-dest-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px;
  width: 90%;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.11);
}

.aov-dest-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.aov-dest-row h3 {
  margin: 0;
  color: var(--brand);
  font-size: 1.05rem;
  line-height: 1.2;
}

.aov-dest-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  color: var(--brand);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 9px 14px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(244, 15, 80, 0.15);
}

.aov-dest-row a:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(168, 8, 52, 0.4);
  transform: translateY(-1px);
}

.aov-dest-row a:active {
  transform: translateY(1px);
}

.aov-dest-row a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.aov-dest-swiper .swiper-button-prev,
.aov-dest-swiper .swiper-button-next {
  color: #fff;
  background: var(--lg-dark-bg);
  border: 1px solid var(--lg-dark-border);
  width: 2.2em;
  height: 2.2em;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow: var(--lg-shine-dark);
}

.aov-dest-swiper .swiper-button-prev:hover,
.aov-dest-swiper .swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.55);
  transform: scale(1.08);
}

.aov-dest-swiper .swiper-button-prev:focus-visible,
.aov-dest-swiper .swiper-button-next:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.aov-dest-swiper .swiper-button-prev::after,
.aov-dest-swiper .swiper-button-next::after {
  font-size: 0.9rem;
  font-weight: 800;
}

.aov-dest-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* ═══════════════════════════════════════
   SECCION VIDEO DESTACADOS
═══════════════════════════════════════ */
.aov-sv-section {
  width: 100%;
  /* Arriba más ajustado que abajo: sigue de cerca a la cotización rápida
     (misma intención — reservar), en vez de repetir la misma pausa de
     55/55 que ya usan otras dos transiciones seguidas de la página. */
  padding: var(--aov-space-md) 0 var(--aov-space-lg);
}

.aov-sv-title {
  margin: 0 0 var(--aov-space-sm);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: #111;
  line-height: 1.05;
}

.aov-sv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.aov-sv-card {
  min-width: 0;
}

.aov-sv-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: #000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.aov-sv-wrap:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.aov-sv-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: opacity 0.35s ease;
  display: block;
}

.aov-sv-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.22) 0%, transparent 50%);
  transition: opacity 0.35s ease;
}

.aov-sv-play-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow: var(--lg-shine-dark);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.aov-sv-play-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.88);
  transform: scale(1.04);
}

.aov-sv-play-btn:active {
  transform: scale(0.94);
  transition-duration: 0.1s;
}

.aov-sv-play-btn svg {
  width: 14px;
  height: 14px;
  fill: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.28));
  transition: transform 0.25s ease;
}

.aov-sv-play-btn:hover svg {
  transform: scale(1.04);
}

.aov-sv-iframe {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 1;
}

.aov-sv-iframe.active {
  display: block;
  z-index: 4;
}

.aov-sv-wrap.playing .aov-sv-cover,
.aov-sv-wrap.playing .aov-sv-overlay {
  opacity: 0;
  pointer-events: none;
}

.aov-sv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.aov-sv-name {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: #111;
}

/* Antes era un link subrayado sin peso propio — mismo lenguaje de botón
   que .aov-vac-row a / .aov-dest-row a, para que "ver este hotel" se vea
   igual en toda la página en vez de tres tratamientos distintos. */
.aov-sv-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: 7px 12px;
  color: var(--brand);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.aov-sv-link:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-1px);
}

.aov-sv-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Ícono de flecha (aov_icon_arrow_up_right()) en botones "Ver hotel" del
   home (hero + video destacado) — este stylesheet es el único que carga
   siempre en portada, aov-landing-global.css no se encola ahí. */
.aov-btn-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Ícono de WhatsApp (aov_icon_whatsapp()) en los botones que abren
   WhatsApp — mismo criterio que .aov-btn-arrow arriba: este stylesheet
   carga en todas las páginas, así que la regla vive acá para cubrir
   también el home y el widget flotante de leads (wa-leads.css). */
.aov-btn-whatsapp {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   FAQ HOME
═══════════════════════════════════════ */
.aov-home-faq {
  padding: var(--aov-space-md) 0;
}

.aov-home-faq-kicker {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.aov-home-faq-title {
  margin: 0 0 20px;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  line-height: 1.08;
  color: #111;
}

.aov-home-faq-lead {
  margin: 10px 0 18px;
  color: #4b4b4b;
  max-width: 740px;
}

.aov-home-faq-list {
  display: grid;
  gap: 8px;
}

/* Antes el FAQ no tenía ninguna acción propia — quien no encontraba su
   respuesta en la lista se quedaba sin qué hacer justo ahí. */
.aov-home-faq-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #ececec;
}

.aov-home-faq-cta p {
  margin: 0;
  color: var(--gray);
  font-weight: 600;
}

.aov-home-faq-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1.5px solid var(--brand);
  background: transparent;
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background var(--ease), color var(--ease), transform var(--ease);
}

.aov-home-faq-cta-btn:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-1px);
}

.aov-home-faq-cta-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.aov-home-faq-item {
  border: 1px solid #e8e8e8;
  border-radius: var(--radius);
  background: linear-gradient(130deg, #ffffff 0%, #fff7f7 100%);
  overflow: clip;
  transition: box-shadow 0.25s ease;
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.06);
}

.aov-home-faq-item:hover,
.aov-home-faq-item:focus-within {
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.1);
}

.aov-home-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-size: 1rem;
  font-weight: 700;
  color: #151515;
}

.aov-home-faq-item summary::-webkit-details-marker {
  display: none;
}

.aov-home-faq-item summary:hover {
  background: #fdf5f7;
}

.aov-home-faq-item summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.aov-home-faq-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  position: relative;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  background: var(--brand);
  user-select: none;
}

.aov-home-faq-icon::before,
.aov-home-faq-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  /* Es una rotación en pantalla (morph), no un hover de color. */
  transition: transform 0.3s var(--ease-in-out);
}

.aov-home-faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.aov-home-faq-item[open] .aov-home-faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.aov-home-faq-item[open] .aov-home-faq-icon {
  background: #c00038;
}

.aov-home-faq-answer {
  padding: 0 18px 18px;
  /* La respuesta aparecía de golpe al abrir el <details>; un fundido breve
     evita el "salto" — anima solo, no requiere disparo por JS. */
  animation: aov-faq-answer-in 0.22s var(--ease-out, ease) both;
}

@keyframes aov-faq-answer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.aov-home-faq-answer p {
  margin: 0;
  color: #4d4d4d;
  line-height: 1.8;
  font-size: 0.95rem;
}

.aov-home-faq-answer p + p {
  margin-top: 0.7rem;
}

/* ═══════════════════════════════════════
   CTA FINAL HOME
═══════════════════════════════════════ */
.aov-home-cta-band {
  /* Arriba ajustado (md, no lg): el FAQ no tiene su propio CTA, así que no
     hace falta un respiro extra antes de llegar al cierre — abajo se
     mantiene xl porque de ahí sí sigue una sección nueva (Instagram). */
  padding: var(--aov-space-md) 0 var(--aov-space-xl);
}

.aov-home-cta-inner {
  /* La foto real ahora se elige desde el admin (Contenido Home > CTA final
     Home) y llega como variable --aov-home-cta-bg inline (ver cta.php) —
     esto permite que el degradado de abajo cambie por breakpoint sin
     perder la foto. background-color de acá es el respaldo para el caso
     remoto de que ese campo esté vacío. Antes había una ruta de imagen fija
     apuntando a una carpeta del tema que ya no existe (images/destinations/,
     borrada en la limpieza del 19/07) — por eso no se podía editar Y la
     foto real estaba rota. */
  background-color: #1a1a1a;
  /* Degradado horizontal (no plano): más oscuro del lado del texto
     (izquierda, donde está el título/CTA) para legibilidad, y se aclara
     hacia la derecha para que la foto se note. En mobile el texto pasa a
     ocupar todo el ancho centrado, así que ahí se usa un overlay plano más
     fuerte — ver el media query de 560px más abajo. */
  background-image: linear-gradient(100deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.22) 100%), var(--aov-home-cta-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius);
  padding: 48px 48px;
  color: #fff;
}

.aov-home-cta-inner h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.05;
}

.aov-home-cta-lead {
  margin: 10px 0 18px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 62ch;
  line-height: 1.45;
}

.aov-home-cta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

/* Es el CTA de cierre de todo el home — antes usaba el mismo tamaño que
   cualquier botón secundario (9px 14px), más chico que el botón de la
   cotización rápida de más arriba en la página. El cierre no puede pesar
   menos que un paso intermedio. */
.aov-home-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  transition: transform var(--ease), background var(--ease), color var(--ease), border-color var(--ease);
}

.aov-home-cta-btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.aov-home-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  transform: translateY(-2px);
}

.aov-home-cta-btn-primary {
  background: var(--brand);
  border-color: var(--brand);
}

.aov-home-cta-btn-primary:hover {
  background: var(--brand-dk);
  border-color: var(--brand-dk);
  transform: translateY(-2px);
}

.aov-home-cta-btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}

.aov-home-cta-btn:disabled {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}

/* ═══════════════════════════════════════
   DESTACADAS DE INSTAGRAM (después del hero)
═══════════════════════════════════════ */
.aov-ig-highlights {
  padding: 26px 0 6px;
}

.aov-ig-highlights-list {
  display: flex;
  /* "safe center": centra cuando las destacadas entran todas sin scroll,
     pero se comporta como flex-start apenas no caben — así nunca empuja
     la primera fuera del borde ni la deja inalcanzable con el scroll al
     inicio. Se ajusta solo sin importar cuántas destacadas haya desde el
     admin. justify-content: center es el respaldo para navegadores que
     todavía no reconocen la palabra clave "safe" (la ignoran y se quedan
     con center a secas). */
  justify-content: center;
  justify-content: safe center;
  gap: 24px;
  overflow-x: auto;
  /* Con overflow-x:auto el navegador vuelve overflow-y "auto" también
     (no se puede pedir solo un eje recortable) — el padding vertical de
     antes (2px/6px) era casi nulo, así que el pop con rebote de
     .aov-ig-highlight-pop (que se pasa de scale(1) y de translateY(0)
     antes de asentarse) quedaba recortado arriba/abajo por ese scroll
     invisible. Con más aire vertical el rebote cabe entero. */
  padding: 22px 2px 26px;
  scrollbar-width: none;
}

.aov-ig-highlights-list::-webkit-scrollbar {
  display: none;
}

.aov-ig-highlight {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92px;
  text-decoration: none;
}

/* Anillo gris, no degradado: en Instagram el degradado de color marca una
   historia activa sin ver; una destacada guardada usa un borde neutro. */
.aov-ig-highlight-ring {
  display: block;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  padding: 4px;
  background: #dbdbdb;
  transition: background var(--ease);
}

.aov-ig-highlight:hover .aov-ig-highlight-ring {
  background: #b8b8b8;
}

/* "Promos" se destaca como historia activa (degradado), a diferencia de
   las demás que son destacadas guardadas (anillo gris) — mismo lenguaje
   que el aro del avatar en la sección de publicaciones de Instagram. */
.aov-ig-highlight-ring--active {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.aov-ig-highlight:hover .aov-ig-highlight-ring--active {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  filter: brightness(1.08);
}

.aov-ig-highlight-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
}

.aov-ig-highlight-title {
  max-width: 92px;
  overflow: hidden;
  color: #262626;
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .aov-ig-highlight {
    width: 76px;
  }

  /* width y height juntos: el círculo se deformaba en mobile porque solo
     se achicaba el ancho y la altura se quedaba en el tamaño de escritorio. */
  .aov-ig-highlight-ring {
    width: 76px;
    height: 76px;
  }

  .aov-ig-highlight-title {
    max-width: 76px;
    font-size: 0.72rem;
  }
}

/* ── Visor de "historia" (1080×1920 + interfaz de Instagram) ──
   Una sola instancia reutilizada por todas las destacadas con story_mode
   activo (ver template-parts/home/instagram-highlights.php). */
.aov-story-viewer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.aov-story-viewer[hidden] {
  display: none;
}

.aov-story-backdrop {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.aov-story-viewer.is-open .aov-story-backdrop {
  opacity: 0.92;
}

.aov-story-frame {
  position: relative;
  /* El ancho también se limita a "lo que quepa en 90vh de alto a razón
     9:16" (calc(90vh * 9 / 16)) — antes solo max-height competía con
     aspect-ratio, y en pantallas de escritorio con poca altura ganaba
     max-height, la proporción real dejaba de ser 9:16 y la foto (que sí
     es 1080×1920) se recortaba con object-fit. Con el ancho ya acotado
     de entrada, aspect-ratio calcula un alto que nunca pasa de 90vh. */
  width: min(92vw, 460px, calc(90vh * 9 / 16));
  aspect-ratio: 9 / 16;
  max-height: 90vh;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.94) translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.aov-story-viewer.is-open .aov-story-frame {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Un segmento por diapositiva (igual que una historia real con varias
   fotos) — JS arma los .aov-story-progress-seg según data-story-images. */
.aov-story-progress {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.aov-story-progress-seg {
  flex: 1 1 0;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.aov-story-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
}

/* Zonas invisibles a los costados para pasar de diapositiva con un tap,
   como en Instagram — el mismo botón "compartir" y el CTA quedan por
   encima gracias al z-index más alto de esos elementos. */
.aov-story-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.aov-story-nav--prev {
  left: 0;
}

.aov-story-nav--next {
  right: 0;
}

.aov-story-header {
  position: absolute;
  top: 20px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aov-story-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}

.aov-story-username {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.aov-story-verified {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  position: relative;
  top: 0.12em;
}

.aov-story-time {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
}

.aov-story-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

.aov-story-close svg {
  width: 20px;
  height: 20px;
}

.aov-story-media {
  position: absolute;
  inset: 0;
  background: #000;
}

.aov-story-image {
  display: block;
  width: 100%;
  height: 100%;
  /* "contain", no "cover": las fotos ya vienen en 1080×1920 (9:16, igual
     que el marco) — contain garantiza que se vea la foto completa sin
     recortar nunca, aunque alguna no calce exacto en proporción. */
  object-fit: contain;
}

.aov-story-cta {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.aov-story-cta svg {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .aov-story-backdrop,
  .aov-story-frame {
    transition: opacity 0.15s ease;
    transform: none;
  }
}

/* ═══════════════════════════════════════
   INSTAGRAM HOME
═══════════════════════════════════════ */
.aov-home-instagram {
  padding: 0 0 var(--aov-space-xl);
}

.aov-home-instagram-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.aov-home-instagram-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Foto de perfil circular con el anillo degradado de "historia activa" de
   Instagram — el degradado va en el contenedor (padding, no box-shadow) y
   la foto va adentro con su propio borde blanco; así el aro nunca se
   recorta ni se ve cortado por antialiasing como pasaba con el box-shadow. */
.aov-home-instagram-avatar-ring {
  display: block;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  padding: 2.5px;
  border-radius: 50%;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.aov-home-instagram-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}

.aov-home-instagram-kicker {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.aov-home-instagram-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25em;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  line-height: 1.08;
  color: #111;
}

.aov-home-instagram-verified {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  position: relative;
  top: 0.12em;
}

.aov-home-instagram-stats {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 0.88rem;
  color: #4b4b4b;
}

.aov-home-instagram-stats strong {
  color: #111;
  font-weight: 700;
}

.aov-home-instagram-lead {
  margin: 10px 0 0;
  max-width: 760px;
  color: #4b4b4b;
  /* La biografía de Instagram viene con saltos de línea reales — sin esto
     el navegador los colapsa y todo queda en una sola línea corrida. */
  white-space: pre-line;
}

/* Antes borde/texto casi negro sobre blanco, sin color de marca — el único
   CTA de la sección pasaba desapercibido. Mismo lenguaje outline-a-relleno
   que el resto de los botones del home. */
.aov-home-instagram-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: var(--radius);
  border: 1.5px solid var(--brand);
  background: #fff;
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
  transition: transform var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease);
}

.aov-home-instagram-link:hover {
  transform: translateY(-2px);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(244, 15, 80, 0.25);
}

/* Grid al estilo Instagram real: cuadrado, casi sin separación, sin
   tarjeta (ni borde, ni sombra, ni esquinas redondeadas) — la cuadrícula
   de un perfil de IG es fotos a borde vivo, no una fila de "cards". */
.aov-home-instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
}

.aov-home-instagram-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Escritorio (grid de 6 columnas): solo 2 filas (12 publicaciones). En el
   breakpoint de 3 columnas se recorta más, a solo 9 (3 filas). */
.aov-home-instagram-card:nth-child(n + 13) {
  display: none;
}

.aov-home-instagram-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

.aov-home-instagram-media {
  position: relative;
  /* Instagram publica en 1080×1350 (4/5 = 0.8). */
  aspect-ratio: 0.8;
  background: #f4f4f4;
  overflow: hidden;
}

.aov-home-instagram-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Icono de tipo de contenido (solo Reel/Carrusel — una foto sola no lleva
   icono, igual que en Instagram real), esquina superior derecha, blanco
   con sombra para leerse sobre cualquier imagen. */
.aov-home-instagram-type {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.aov-home-instagram-type svg {
  width: 100%;
  height: 100%;
}

/* Overlay de me gusta/comentarios: aparece en hover, igual que la
   cuadrícula de Instagram en escritorio. En touch no hay hover — el tap
   simplemente abre la publicación, como en la app real. */
.aov-home-instagram-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.aov-home-instagram-card:hover .aov-home-instagram-overlay,
.aov-home-instagram-card:focus-visible .aov-home-instagram-overlay {
  opacity: 1;
}

.aov-home-instagram-stat {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.aov-home-instagram-stat svg {
  width: 19px;
  height: 19px;
}

.aov-home-instagram-empty {
  padding: 24px;
  border: 1px solid #ececec;
  border-radius: var(--radius);
  background: #fff;
}

.aov-home-instagram-empty p {
  margin: 0 0 14px;
  color: #4d4d4d;
}

@media (max-width: 1100px) {
  .aov-sv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .aov-vac-section,
  .aov-sv-section,
  .aov-dest-section,
  .aov-home-faq {
    padding: 34px 0;
  }

  .aov-home-quote {
    padding: 28px 0 34px;
  }

  .aov-home-cta-band {
    padding: 34px 0 55px;
  }

  .aov-home-instagram {
    padding-bottom: 55px;
  }

  .aov-home-intro {
    padding: 48px 0 32px;
  }

  .aov-home-quote-card {
    padding: 16px;
  }

  .aov-home-quote-form {
    gap: 12px;
    padding: 14px;
  }

  .aov-home-quote-row-client,
  .aov-home-quote-row-destination,
  .aov-home-quote-row-travel {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .aov-home-quote-row-client {
    grid-template-columns: 1fr;
  }

  .aov-home-quote .container {
    padding: 0 40px;
  }

  .aov-home-stats {
    grid-template-columns: 1fr;
  }

  .aov-home-faq {
    padding-top: 32px;
  }

  .aov-home-instagram-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .aov-home-instagram-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* En 3 columnas: solo 9 (3 filas parejas). */
  .aov-home-instagram-card:nth-child(n + 10) {
    display: none;
  }

  .aov-vac-swiper .aov-vac-card {
    height: 17rem;
    min-height: 17rem;
  }

  .aov-vac-swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aov-dest-swiper .aov-dest-card {
    height: 17rem;
    min-height: 17rem;
  }

  .aov-dest-swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aov-vac-row a,
  .aov-dest-row a {
    padding: 7px 10px;
    font-size: 0.74rem;
  }
}

@media (max-width: 560px) {
  .aov-home-quote {
    padding: 24px 0 28px;
  }

  .aov-vac-section,
  .aov-sv-section,
  .aov-dest-section,
  .aov-home-faq {
    padding: 28px 0;
  }

  .aov-home-cta-band {
    padding: 28px 0 44px;
  }

  .aov-home-instagram {
    padding-bottom: 44px;
  }

  .aov-home-quote-card {
    border-radius: var(--radius);
    padding: 14px;
  }

  .aov-home-quote-form {
    padding: 12px;
  }

  .aov-home-quote-phone-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .aov-home-quote .container {
    padding: 0 28px;
  }

  .aov-home-quote-actions {
    width: 100%;
    grid-column: 1 / -1;
  }

  .aov-home-quote-btn {
    width: auto;
  }

  .aov-vac-row a,
  .aov-dest-row a {
    padding: 7px 10px;
    font-size: 0.74rem;
  }

  .aov-sv-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px;
    margin: 0 -2px;
    scrollbar-width: none;
  }

  .aov-sv-grid::-webkit-scrollbar {
    display: none;
  }

  .aov-sv-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .aov-sv-wrap {
    aspect-ratio: 9 / 16;
  }

  .aov-sv-name {
    font-size: 1rem;
  }

  .aov-home-faq-title {
    font-size: clamp(1.35rem, 8vw, 1.8rem);
  }

  .aov-home-faq-lead {
    margin-bottom: 14px;
    font-size: 0.98rem;
  }

  .aov-home-faq-item summary {
    padding: 14px 14px;
    font-size: 0.98rem;
  }

  .aov-home-faq-answer {
    padding: 0 14px 14px;
  }

  .aov-vac-header {
    text-align: left;
    margin-bottom: 14px;
  }

  .aov-vac-title {
    font-size: clamp(1.35rem, 7vw, 1.8rem);
  }

  .aov-vac-desc {
    margin-top: 10px;
    font-size: 0.96rem;
  }

  .aov-vac-swiper .aov-vac-card {
    height: 16rem;
    min-height: 16rem;
    border-radius: var(--radius);
  }

  .aov-vac-swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .aov-dest-title {
    font-size: clamp(1.35rem, 7vw, 1.8rem);
  }

  .aov-dest-swiper .aov-dest-card {
    height: 16rem;
    min-height: 16rem;
    border-radius: var(--radius);
  }

  .aov-dest-box {
    width: 92%;
  }

  .aov-dest-row h3 {
    font-size: 0.95rem;
  }

  .aov-dest-row a {
    font-size: 0.72rem;
    padding: 6px 9px;
  }

  .aov-dest-swiper .swiper-button-prev,
  .aov-dest-swiper .swiper-button-next {
    width: 2em;
    height: 2em;
  }

  .aov-dest-swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .aov-vac-box {
    padding: 10px;
  }

  .aov-vac-row h3 {
    font-size: 0.93rem;
  }

  .aov-vac-row a {
    font-size: 0.72rem;
    padding: 6px 9px;
  }

  .aov-home-cta-inner {
    text-align: center;
    border-radius: var(--radius);
    padding: 36px 24px;
    /* En mobile el texto queda centrado y ocupa todo el ancho de la caja
       (ya no solo el lado izquierdo), así que el degradado horizontal del
       desktop no aplica — overlay plano y más fuerte (60%) para que el
       texto se lea bien sobre cualquier zona de la foto. */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--aov-home-cta-bg, none);
  }

  .aov-home-instagram-title {
    font-size: clamp(1.35rem, 8vw, 1.8rem);
  }

  .aov-home-instagram-lead {
    font-size: 0.98rem;
  }

  /* Grid real de 3 columnas (como el perfil de Instagram en el celular),
     no un carrusel horizontal — con 18 publicaciones da 6 filas parejas. */
  .aov-home-instagram-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }

  .aov-home-instagram-link {
    width: 100%;
  }

  .aov-home-cta-inner h2 {
    font-size: clamp(1.45rem, 7.2vw, 1.9rem);
    line-height: 1.08;
  }

  .aov-home-cta-lead {
    margin: 12px 0 20px;
    font-size: 1rem;
    line-height: 1.35;
  }

  .aov-home-cta-btn {
    width: 100%;
    min-height: 48px;
    padding: 14px 18px;
    font-size: 1rem;
  }

  .aov-home-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 420px) {
  .aov-sv-card {
    flex-basis: 88%;
  }

  .aov-home-cta-band {
    padding: 24px 0 34px;
  }

  .aov-home-quote-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .aov-home-quote-btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════
   PÁGINA GENÉRICA DE WORDPRESS (page.php)
   Políticas, términos, cualquier página creada desde wp-admin.
═══════════════════════════════════════ */
/* Hero compacto: mismo garabato y tipografía que el resto del sitio, pero sin
   foto — es una página de utilidad (legal, institucional), no un destino que
   vender. */
.aov-page-hero {
  position: relative;
  width: 100%;
  padding: 4.5rem 1.5rem 3.5rem;
  background: var(--brand);
  text-align: center;
}

.aov-page-hero-content {
  position: relative;
  z-index: 2;
}

.aov-page-hero-title {
  font-family: var(--font);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.2vw, 2.9rem);
  line-height: 1.12;
  /* Mayúscula sostenida necesita tracking positivo (no el negativo que
     llevaría un display normal de este tamaño) — si no, las letras se
     sienten apretadas entre sí. */
  letter-spacing: 0.01em;
  color: #ffffff;
  text-wrap: balance;
  margin: 0;
  max-width: 780px;
  margin-inline: auto;
}

/* Barra "adventuresonv" + check + garabato al pie del hero — mismo marcado
   (aov_cab_top_bar()) que hoteles/tours/destinos, pero sus estilos originales
   viven en aov-landing-global.css, que solo se encola en páginas virtuales
   (is_virtual_page) — page.php no lo carga, así que el SVG del check salía
   sin ningún tamaño y llenaba la pantalla. Se repite acá, en style.css, que
   sí carga siempre, en vez de encolar todo aov-landing-global.css (72KB) solo
   por este detalle. */
.aov-page-hero .cab-top {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 32px 22px;
}

.aov-page-hero .cab-handle {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: 'Instagram Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.aov-page-hero .cab-handle-verified {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  position: relative;
  top: 0.12em;
}

.aov-page-hero .cab-squiggle {
  width: clamp(70px, 9.5vw, 110px);
  height: auto;
  color: #ffed00;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .aov-page-hero .cab-handle {
    font-size: 0.88rem;
  }

  .aov-page-hero .cab-squiggle {
    width: clamp(60px, 15vw, 90px);
  }
}

@media (max-width: 560px) {
  .aov-page-hero .cab-handle {
    font-size: 0.8rem;
  }

  .aov-page-hero .cab-top {
    padding: 0 20px 18px;
  }
}

.aov-page {
  width: 100%;
  padding: 3rem 1.5rem 4rem;
}

.aov-page-inner {
  max-width: 820px;
  margin: 0 auto;
}

.aov-page-content {
  font-family: var(--font);
  color: var(--gray);
  font-size: 1rem;
  /* 1.7, no 1.75: así coincide con el Body documentado en DESIGN.md en vez
     de ser un valor propio de esta página. */
  line-height: 1.7;
}

.aov-page-content h2 {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--dark);
  line-height: 1.25;
  /* Más aire antes que después: el encabezado se agrupa con el texto que
     sigue y se separa con claridad de la sección anterior. */
  margin: 2.75rem 0 0.9rem;
}

.aov-page-content h2:first-child {
  margin-top: 0;
}

.aov-page-content h3 {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--dark);
  line-height: 1.3;
  margin: 1.75rem 0 0.65rem;
}

.aov-page-content p {
  margin: 0 0 1.5rem;
}

.aov-page-content ul,
.aov-page-content ol {
  margin: 0 0 1.5rem 1.25rem;
}

.aov-page-content li {
  margin: 0 0 0.5rem;
  line-height: 1.6;
}

.aov-page-updated {
  font-size: 0.85rem;
  color: var(--gray);
  font-style: italic;
  margin: 0 0 2rem;
}

.aov-page-content a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.16s ease;
}

.aov-page-content a:hover,
.aov-page-content a:focus-visible {
  color: var(--brand-dk);
}

/* ═══════════════════════════════════════
   404 — PÁGINA NO ENCONTRADA
═══════════════════════════════════════ */
.aov-404 {
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.aov-404-inner {
  max-width: 560px;
}

.aov-404-code {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(4rem, 12vw, 7rem);
  line-height: 1;
  color: var(--brand);
  margin: 0 0 0.4rem;
}

.aov-404-title {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  line-height: 1.2;
  color: var(--dark);
  text-wrap: balance;
  margin: 0 0 0.75rem;
}

.aov-404-sub {
  font-family: var(--font);
  color: var(--gray);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
}

.aov-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.aov-404-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s var(--ease-out, ease), border-color 0.2s var(--ease-out, ease), transform 0.16s var(--ease-out, ease);
}

.aov-404-btn:active {
  transform: scale(0.97);
}

.aov-404-btn-primary {
  background: var(--brand);
  color: #ffffff !important;
}

.aov-404-btn-primary:hover {
  background: var(--brand-dk);
}

.aov-404-btn-secondary {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand) !important;
}

.aov-404-btn-secondary:hover {
  background: rgba(244, 15, 80, 0.08);
}

/* ═══════════════════════════════════════
   ENTRADA DE SECCIONES DEL HOME — reveal al hacer scroll
   Mismo patrón que .aov-virtual-main.aov-anim-on en aov-landing-global.css
   (hoteles/tours/traslados/destinos), pero para #main.aov-home-main — el
   home no encola ese archivo, ver initHomeSectionReveals() en
   assets/js/home-bundle.js. El estado oculto SOLO aplica cuando el JS añade
   .aov-anim-on y el usuario no pidió reducir movimiento — sin JS, todo se
   muestra siempre.
═══════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Curva con más "chasquido" que ease-out plano — arranca rápido y frena
     con un remate visible, se nota mucho más que una curva lineal-ish en
     una distancia corta. Misma curva en todo este bloque para que las
     piezas escalonadas se sientan como un solo gesto, no varios sueltos. */
  :root {
    --aov-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  .aov-home-main.aov-anim-on > section {
    opacity: 0;
    transform: translateY(48px) scale(0.985);
    transition: opacity 0.65s var(--aov-reveal-ease), transform 0.65s var(--aov-reveal-ease);
  }

  .aov-home-main.aov-anim-on > section.is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Cada sección del home solo tiene un <div class="container"> como hijo
     directo — el escalonado real va uno o dos niveles más adentro, en los
     hijos directos de ese contenedor (típicamente: encabezado, luego el
     carrusel/grilla/lista). Así cada sección entra en 2-3 golpes en vez de
     un solo bloque grande moviéndose de una — eso es lo que de verdad se
     percibe como "dinamismo", no la distancia del movimiento en sí. */
  .aov-home-main.aov-anim-on > section .container > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.55s var(--aov-reveal-ease), transform 0.55s var(--aov-reveal-ease);
    transition-delay: 0.05s;
  }

  .aov-home-main.aov-anim-on > section.is-revealed .container > * {
    opacity: 1;
    transform: none;
  }

  .aov-home-main.aov-anim-on > section.is-revealed .container > *:nth-child(2) {
    transition-delay: 0.16s;
  }

  .aov-home-main.aov-anim-on > section.is-revealed .container > *:nth-child(3) {
    transition-delay: 0.27s;
  }

  .aov-home-main.aov-anim-on > section.is-revealed .container > *:nth-child(n + 4) {
    transition-delay: 0.38s;
  }

  /* Stagger de las preguntas del FAQ (un nivel más adentro todavía: no son
     hijas directas de .container, son hijas de la lista). Sin transform en
     las tarjetas de los carruseles: esas ya llevan la suya propia de Swiper
     para posicionarse, y una segunda acá chocaría con esa y rompería el
     carrusel. */
  .aov-home-main.aov-anim-on > section .aov-home-faq-item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--aov-reveal-ease), transform 0.5s var(--aov-reveal-ease);
  }

  .aov-home-main.aov-anim-on > section.is-revealed .aov-home-faq-item {
    opacity: 1;
    transform: none;
  }

  .aov-home-main.aov-anim-on > section.is-revealed .aov-home-faq-item:nth-child(2) {
    transition-delay: 0.42s;
  }

  .aov-home-main.aov-anim-on > section.is-revealed .aov-home-faq-item:nth-child(3) {
    transition-delay: 0.5s;
  }

  .aov-home-main.aov-anim-on > section.is-revealed .aov-home-faq-item:nth-child(n + 4) {
    transition-delay: 0.58s;
  }

  /* Destacadas de Instagram: cada círculo "aparece" uno por uno con un
     rebote (pop), no un simple fundido — la curva de la animación
     (back-out) es la que hace que se pase de largo del tamaño final y
     rebote de vuelta, sin necesitar varios pasos en la keyframe. El
     retraso de cada uno sale de --i (0, 1, 2...), que pone
     initHighlightsStagger() en assets/js/home-bundle.js — así funciona
     con cualquier cantidad de destacadas, no solo con las primeras 3-4. */
  .aov-home-main.aov-anim-on > section .aov-ig-highlight {
    opacity: 0;
    transform: scale(0.3) translateY(20px);
  }

  .aov-home-main.aov-anim-on > section.is-revealed .aov-ig-highlight {
    animation: aov-ig-highlight-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--i, 0) * 0.09s);
  }

  @keyframes aov-ig-highlight-pop {
    from {
      opacity: 0;
      transform: scale(0.3) translateY(20px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
}