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

.aov-virtual-main {
  --aov-content-max: 1600px;
  --aov-content-gutter-x: 2rem;
  /* Sistema de espaciado y tamaños unificado (ritmo vertical + densidad).
     Dos niveles de aire vertical entre secciones para que la página respire
     con un pulso (denso → liviano → denso), no con el mismo hueco repetido. */
  --aov-section-y: 68px;
  --aov-section-y-tight: clamp(2.25rem, 1.3rem + 2.6vw, 3.1rem);
  --aov-card-pad: clamp(1.35rem, 0.9rem + 1.4vw, 1.75rem);
  --aov-card-pad-sm: clamp(0.95rem, 0.7rem + 0.7vw, 1.15rem);
  --aov-grid-gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  /* Radio unificado de toda la página (cajas, tarjetas, botones, imágenes).
     Excepción: elementos totalmente redondos (999px / 50%). */
  --aov-radius: 8px;
  --aov-card-radius: var(--aov-radius);
  --aov-title-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.25rem);
  --aov-title-gap: clamp(1rem, 0.7rem + 0.9vw, 1.55rem);
  --aov-body-size: 0.96rem;
  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 iframe {
  max-width: 100%;
}

/* Migas de pan: única forma de volver a un destino/sección sin pasar por el
   mega menú de nuevo. Viven arriba a la izquierda del hero/cabecero
   (.cab-crumbs-top), sobre la foto — alineación y color por defecto acá,
   la posición y el color de la miga actual se ajustan en .cab-crumbs-top. */
.aov-breadcrumbs {
  width: 100%;
  margin: 0 0 clamp(1rem, 0.8rem + 0.5vw, 1.35rem);
}

.aov-crumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.3;
}

.aov-crumb-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.aov-crumb-list a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.16s ease;
}

.aov-crumb-list a:hover,
.aov-crumb-list a:focus-visible {
  color: #ffed00;
  text-decoration: underline;
}

.aov-crumb-sep {
  color: rgba(255, 255, 255, 0.4);
}

.aov-crumb-current {
  color: #ffffff;
  font-weight: 700;
}

@media (max-width: 560px) {
  .aov-crumb-list {
    font-size: 0.76rem;
  }
}

/* Envoltorio que posiciona las migas arriba a la izquierda de la foto del
   hero (dentro de .cab-wrap, ver aov_cab_hero_photo()) — mismo ancho de
   contenido que .cab-top/.header-inner (1600px, 32px) para quedar
   alineadas con el logo del header. Van antes del título, que arranca más
   abajo gracias al padding-top de .aov-cab-bienvenido. */
.aov-virtual-main .cab-crumbs-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  max-width: 1600px;
  margin: 0 auto;
  /* 34px, no 22px: pegadas arriba del todo se sentían encimadas con el
     borde de la foto — este aire extra también se repite en el
     padding-top de .aov-cab-bienvenido (mismo delta) para que el título
     baje junto con las migas, no que se le encimen. */
  padding: 34px 32px 0;
}

.aov-virtual-main .cab-crumbs-top .aov-breadcrumbs {
  margin: 0;
}

/* Izquierda, no centradas (a diferencia del uso por defecto de .aov-crumb-list). */
.aov-virtual-main .cab-crumbs-top .aov-crumb-list {
  justify-content: flex-start;
  /* Cápsula de vidrio oscuro detrás de las migas (antes flotaban sin fondo
     propio, directo sobre la foto) — mismos tokens --lg-dark-* que el
     resto de controles del hero. Solo en este uso (dentro del hero), el
     de .aov-breadcrumbs por defecto en el resto del sitio no se toca. */
  display: inline-flex;
  width: fit-content;
  padding: 8px 14px;
  /* var(--aov-radius) (8px), no 999px: la cápsula tipo píldora no hacía
     juego con el resto del sitio, que usa esquinas de 8px en todos los
     chips/botones (badge, CTAs, etc.), no formas totalmente redondeadas. */
  border-radius: var(--aov-radius, 8px);
  background: var(--lg-dark-bg, rgba(16, 18, 22, 0.4));
  border: 1px solid var(--lg-dark-border, rgba(255, 255, 255, 0.26));
  box-shadow: var(--lg-shine-dark, inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.22));
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
}

.aov-virtual-main .tour-galeria {
  width: 100%;
  /* Nivel liviano: mismo criterio que la galería de hotel (foto = ya trae peso propio). */
  padding: var(--aov-section-y-tight) var(--aov-content-gutter-x);
  background: #ffffff;
}

.aov-virtual-main .tg-inner {
  max-width: var(--aov-content-max);
  margin: 0 auto;
}

.aov-virtual-main .tour-galeria h2 {
  margin: 0 0 12px;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  line-height: 1.08;
  color: #111111;
}

.aov-virtual-main .tg-sub {
  margin: 0 0 24px;
  max-width: 760px;
  color: #4b5563;
  line-height: 1.7;
}

/* Galeria de tour/traslado: mismo motor Swiper que la galeria del hotel. */
.aov-virtual-main .aov-tg-swiper {
  position: relative;
}

.aov-virtual-main .aov-tg-swiper .tg-item {
  position: relative;
  border-radius: var(--aov-radius);
  overflow: hidden;
  background-color: #e5e7eb;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.aov-virtual-main .aov-tg-swiper .tg-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.aov-virtual-main .aov-tg-swiper .swiper-button-prev,
.aov-virtual-main .aov-tg-swiper .swiper-button-next,
.aov-virtual-main .aov-rooms-swiper .swiper-button-prev,
.aov-virtual-main .aov-rooms-swiper .swiper-button-next {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--lg-dark-border, rgba(255, 255, 255, 0.26));
  background: var(--lg-dark-bg, rgba(16, 18, 22, 0.4));
  color: #ffffff;
  box-shadow: var(--lg-shine-dark, inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.22));
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  transition: background 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}

.aov-virtual-main .aov-tg-swiper .swiper-button-prev:hover,
.aov-virtual-main .aov-tg-swiper .swiper-button-next:hover,
.aov-virtual-main .aov-rooms-swiper .swiper-button-prev:hover,
.aov-virtual-main .aov-rooms-swiper .swiper-button-next:hover {
  background: rgba(17, 24, 39, 0.8);
}

.aov-virtual-main .aov-tg-swiper .swiper-button-prev:active,
.aov-virtual-main .aov-tg-swiper .swiper-button-next:active,
.aov-virtual-main .aov-rooms-swiper .swiper-button-prev:active,
.aov-virtual-main .aov-rooms-swiper .swiper-button-next:active {
  transform: scale(0.9);
}

.aov-virtual-main .aov-tg-swiper .swiper-button-prev::after,
.aov-virtual-main .aov-tg-swiper .swiper-button-next::after,
.aov-virtual-main .aov-rooms-swiper .swiper-button-prev::after,
.aov-virtual-main .aov-rooms-swiper .swiper-button-next::after {
  font-size: 12px;
  font-weight: 700;
}

.aov-virtual-main .aov-tg-swiper .swiper-pagination-bullet,
.aov-virtual-main .aov-rooms-swiper .swiper-pagination-bullet {
  background: rgba(15, 23, 42, 0.28);
  opacity: 1;
}

.aov-virtual-main .aov-tg-swiper .swiper-pagination-bullet-active,
.aov-virtual-main .aov-rooms-swiper .swiper-pagination-bullet-active {
  background: #F40F50;
}

/* Habitaciones del hotel: mismo carrusel, tarjetas con contenido en vez de solo foto. */
.aov-virtual-main .aov-rooms-swiper {
  position: relative;
}

.aov-virtual-main .aov-rooms-swiper .swiper-wrapper {
  align-items: stretch;
}

.aov-virtual-main .aov-rooms-swiper .tour-card {
  height: auto;
  display: flex;
  flex-direction: column;
}

.aov-virtual-main [data-bg].aov-photo-placeholder {
  position: relative;
  background: #eef2f6 !important;
  background-image: none !important;
  border: 2px dashed #c8d0da;
}

.aov-virtual-main [data-bg].aov-photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 75%, transparent 75%, transparent 100%);
  background-size: 18px 18px;
  opacity: 0.5;
}

.aov-virtual-main [data-bg].aov-photo-placeholder::after {
  content: attr(data-placeholder-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 1;
}

@media (max-width: 900px) {
  .aov-virtual-main .tour-galeria {
    padding: 3rem 1.25rem;
  }
}

/* ── Hero "foto limpia": la imagen sola, sin título encima ──
   Antes el título/subtítulo/badges/botones vivían centrados sobre la foto
   oscurecida al 70% parejo. Ahora es solo la foto (a color, casi sin
   velo) con las migas de pan arriba y la barra de marca abajo — el
   título real vive debajo, en .aov-cab-bienvenido. */
.aov-virtual-main .cab-wrap {
  position: relative;
  width: 100%;
  /* El título vive en la mitad superior de la foto y la barra de marca al
     pie — necesita suficiente foto visible entre los dos.
     650/70vh/800: antes 580/70vh/800 — solo se subió el piso (580→650),
     el techo queda igual que antes. Subirlo más (se probó 800/900) hacía
     la caja demasiado alta; con este ajuste más chico igual se recorta
     algo menos en pantallas normales sin agrandar tanto el hero. */
  min-height: clamp(650px, 70vh, 800px);
  overflow: hidden;
  background-color: #0f3a4a;
  background-size: cover;
  background-position: center;
}

/* Video de fondo opcional del hero: cubre la foto (que sigue puesta como
   respaldo detrás, por si el video no carga) y va siempre decorativo — sin
   controles ni interacción, .cab-grad se pinta encima igual que sobre la
   foto para mantener la legibilidad del título. */
.aov-virtual-main .cab-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
  /* Por encima del aviso "agregar foto" (::after de .aov-photo-placeholder
     va en z-index:1) — si el hero no tiene foto pero sí video, el video
     manda; ver también la regla que apaga ese aviso del todo más abajo. */
  z-index: 2;
  /* YouTube/Vimeo tardan un instante en arrancar el autoplay y durante ese
     instante se alcanza a ver su propia miniatura con título/botón de play
     (no son "controles" nuestros, es el video cargando) — se tapa con la
     foto de fondo (que sigue ahí debajo) y se aparece con un fade cuando ya
     debería estar reproduciendo. */
  opacity: 0;
  animation: aov-hero-video-in 0.6s ease 1.5s forwards;
}

@keyframes aov-hero-video-in {
  to { opacity: 1; }
}

/* Si el hero tiene video, el aviso de "falta foto" no debe competir con él
   ni taparlo — el video cumple ese rol. La foto sigue siendo el respaldo
   real (si el video no carga), así que data-bg puede seguir vacío sin
   problema; solo se apaga la decoración visual del aviso. */
.aov-virtual-main .cab-wrap--video.aov-photo-placeholder::before,
.aov-virtual-main .cab-wrap--video.aov-photo-placeholder::after {
  display: none;
}

.aov-virtual-main .cab-bg-video--embed {
  /* Los iframes de YouTube/Vimeo no tienen "object-fit": para que el video
     tape TODO el hero (no solo el ancho o solo el alto, como pasaba con
     width/height:100%) hay que sobre-escalar el iframe manteniendo 16:9 y
     centrarlo — el mismo truco de siempre para "video de fondo" sin JS.
     Las dos parejas ancho/alto + min-width/min-height se garantizan mutuamente:
     la que no manda en un tamaño de pantalla dado, la cubre la otra.
     !important es a propósito: hay una regla global "iframe { max-width:
     100% }" (style.css) que si no se le gana deja el iframe con un tamaño
     mal calculado y el video no llega a tapar el hero. */
  width: 100vw !important;
  height: 56.25vw !important; /* 16:9 */
  min-width: 177.78vh !important; /* 16:9 al revés, por si el alto manda */
  min-height: 100% !important;
  max-width: none !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Overlay negro plano al 40% sobre toda la foto — el mockup de
   referencia no lleva un tinte de color, el azul/verdeazulado que se
   veía ahí es la foto misma (cielo y mar) asomando bajo un negro
   uniforme, no un degradado de color aplicado encima. */
.aov-virtual-main .cab-grad {
  position: absolute;
  inset: 0;
  /* Overlay negro de base (40%, como pidieron) + un degradado extra
     concentrado donde vive el texto (arriba a la izquierda) para que el
     título/subtítulo/botón lean bien incluso sobre fotos muy claras o
     con mucho patrón — se atenúa hacia la derecha y abajo, donde no hay
     texto, así la foto se sigue viendo. */
  background: linear-gradient(
    115deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.55) 25%,
    rgba(0, 0, 0, 0.4) 45%,
    rgba(0, 0, 0, 0.25) 70%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

/* ── Botón circular "compartir", flotando sobre la foto, + su cápsula ── */
.aov-virtual-main .cab-share-wrap {
  position: absolute;
  /* Mismo borde derecho que .header-inner (max-width 1600px + padding
     32px): en pantallas anchas el header no llega al borde real del
     viewport, así que un simple "right: 32px" quedaba desalineado. */
  right: max(24px, calc((100% - 1600px) / 2 + 32px));
  bottom: clamp(90px, 13vh, 130px);
  z-index: 3;
}

/* Vidrio "claro" (--lg-light-*, mismos tokens que el header/menús): antes
   era un crema sólido (#fff8ef) — el tono cálido se mantiene por debajo a
   través de la transparencia, pero ahora tiene blur/saturate y el brillo
   superior típico del resto de controles de vidrio del sitio. */
.aov-virtual-main .cab-share-btn {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--lg-light-border, rgba(255, 255, 255, 0.8));
  background: var(--lg-light-bg, rgba(255, 255, 255, 0.68));
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), var(--lg-shine-light, inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(17, 17, 17, 0.05));
  transition: transform 0.16s var(--ease-out), box-shadow 0.2s ease;
}

.aov-virtual-main .cab-share-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.aov-virtual-main .cab-share-btn:active {
  transform: translateY(-1px) scale(0.95);
}

.aov-virtual-main .cab-share-btn svg {
  width: 20px;
  height: 20px;
}

/* ── Cápsula de opciones: sólida (no vidrio) — mismo motivo que los menús
   de navegación: hay texto corto que leer y el blur depende de GPU. */
.aov-virtual-main .cab-share-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 176px;
  padding: 6px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(17, 17, 17, 0.22);
  transform-origin: bottom right;
  animation: aov-cab-share-in 0.18s var(--ease-out) both;
}

.aov-virtual-main .cab-share-menu[hidden] {
  display: none;
}

@keyframes aov-cab-share-in {
  from { opacity: 0; transform: scale(0.92) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.aov-virtual-main .cab-share-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 9px;
  padding: 9px 10px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #111111;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.aov-virtual-main .cab-share-item:hover,
.aov-virtual-main .cab-share-item:focus-visible {
  background: rgba(17, 17, 17, 0.06);
}

.aov-virtual-main .cab-share-item-icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: #555555;
}

.aov-virtual-main .cab-share-item[data-share="whatsapp"] .cab-share-item-icon { color: #25d366; }
.aov-virtual-main .cab-share-item[data-share="facebook"] .cab-share-item-icon { color: #1877f2; }
.aov-virtual-main .cab-share-item[data-share="x"] .cab-share-item-icon { color: #111111; }

@media (prefers-reduced-motion: reduce) {
  .aov-virtual-main .cab-share-menu {
    animation-duration: 0.01ms !important;
  }
}

/* ── Barra de marca (handle + garabato), al pie de la foto ── */
.aov-virtual-main .cab-top {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Mismo ancho de contenido que .header-inner (max-width 1600px,
     padding 32px), centrado igual — para que "@adventuresonv" y el
     garabato queden en línea recta con el logo y el CTA del header. */
  max-width: 1600px;
  margin: 0 auto;
  padding: 22px 32px;
}

/* Franja de vidrio esmerilado detrás de esa barra — mismo tratamiento
   que .aov-vac-overlay en las tarjetas del carrusel del home (blanco
   translúcido + backdrop-filter blur). Va de borde a borde de la foto,
   no solo del ancho de 1600px del contenido, así que se rompe del
   contenedor con el truco 50% + 100vw. */
.aov-virtual-main .cab-top::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px) saturate(var(--lg-saturate, 1.8));
  -webkit-backdrop-filter: blur(12px) saturate(var(--lg-saturate, 1.8));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}

.aov-virtual-main .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-virtual-main .cab-handle-verified {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  position: relative;
  top: 0.12em;
}

.aov-virtual-main .cab-squiggle {
  width: clamp(90px, 9.5vw, 150px);
  height: auto;
  color: #ffed00;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   SECCIÓN "BIENVENIDO A/AL…" — el título real de la página, en la mitad
   superior de la foto del hero. Quinto rediseño de esta sección — esta
   vez a partir de un mockup de referencia exacto del cliente: título
   arriba a la izquierda (no al pie), "Bienvenido a/al" y el nombre al
   mismo tamaño en amarillo/blanco, un solo estilo de botón (outline
   blanco), sin panel ni bloque de color propio — el lavado de .cab-grad
   sobre la foto es lo único que separa el texto del fondo. */
/* .aov-vsection--hero es el mismo tipo de sección que .aov-vsection--cabecero
   (el hero foto+título de arriba), solo que hoteles usa el slug "hero" en
   vez de "cabecero" para esta sección — sin esto, .aov-cab-bienvenido (más
   abajo, position:absolute) no tenía ningún ancestro con position:relative
   en la página de hotel, así que se posicionaba relativo al body entero en
   vez de a la foto: el título aparecía ~70px más arriba de lo debido y se
   montaba sobre las migas de pan. */
.aov-virtual-main .aov-vsection--cabecero,
.aov-virtual-main .aov-vsection--hero {
  position: relative;
  /* .aov-cab-bienvenido no aporta altura al flujo (position:absolute más
     abajo) — este margen repone el aire antes de la siguiente sección. */
  margin-bottom: var(--aov-section-y-tight);
}

.aov-virtual-main .aov-cab-bienvenido {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  /* +0.75rem sobre el valor original — mismo delta que .cab-crumbs-top,
     para que el título baje junto con las migas en vez de quedar más
     pegado a ellas. */
  padding: clamp(6.75rem, 5.55rem + 3.4vw, 9.25rem) 0 0;
}

/* Mismo max-width + padding que .header-inner (1600px, 32px) — el
   nombre del hotel queda alineado en la misma columna que el logo del
   header, no en su propio ancho de contenido distinto. */
.aov-virtual-main .aov-cab-bienvenido-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}

.aov-virtual-main .aov-cab-bienvenido-title {
  /* Instagram Sans, no Bebas Neue: es la tipografía de títulos del resto
     del sitio (era la de .cab-title/.hh-title antes de este rediseño). */
  font-family: 'Instagram Sans', system-ui, sans-serif;
  /* "Bienvenido a/al" y el nombre van al mismo tamaño (así lo pide el
     mockup de referencia) — la jerarquía la dan el color y el orden de
     lectura, no una diferencia de escala. */
  /* El mínimo sube de 1.7rem a 2.3rem: en mobile el título quedaba chico
     frente al bloque de descripción + botones, que ocupan más área
     aunque su letra sea menor — el título es lo primero que debe pesar. */
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}

.aov-virtual-main .aov-cab-bienvenido-eyebrow {
  color: #ffed00;
  font-weight: 800;
}

.aov-virtual-main .aov-cab-bienvenido-name {
  color: #ffffff;
  text-wrap: balance;
}

.aov-virtual-main .aov-cab-bienvenido-title .cab-title-resaltado {
  display: block;
  color: #ffed00;
  font-size: 0.4em;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0.35em;
}

.aov-virtual-main .aov-cab-bienvenido-sub {
  font-family: 'Instagram Sans', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 0 1.3rem;
}

.aov-virtual-main .aov-cab-bienvenido-btns {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

/* Un solo CTA fuerte en el hero — dos botones del mismo peso diluyen la
   acción principal (ley de Hick: menos opciones prominentes, decisión
   más rápida) y el mockup de referencia también trae uno solo. Vidrio
   oscuro (--lg-dark-*, mismos tokens que el botón outline del hero del
   home) sobre la foto — antes era transparente + borde sólido, sin blur
   ni brillo propio. El hover se queda igual (invierte a blanco sólido):
   es una decisión ya validada con el cliente, no hace falta tocarla. */
.aov-virtual-main .aov-cab-bienvenido-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  /* Mismo tamaño que el resto de los CTA del sitio: el padding real lo
     fija la regla "medida unificada" más abajo. */
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  background: var(--lg-dark-bg, rgba(16, 18, 22, 0.4));
  color: #ffffff !important;
  border: 1px solid var(--lg-dark-border, rgba(255, 255, 255, 0.26));
  box-shadow: var(--lg-shine-dark, inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.22));
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-out);
}

.aov-virtual-main .aov-cab-bienvenido-btn:hover {
  background: #ffffff;
  color: #111111 !important;
  border-color: #ffffff;
  transform: translateY(-2px);
}

.aov-virtual-main .aov-cab-bienvenido-btn:active {
  transform: translateY(-1px) scale(0.97);
  transition-duration: 0.1s;
}

/* Alternativa liviana (ej. "Reservar por llamada"): un enlace de texto,
   no un segundo botón — existe para quien prefiere llamar, sin competir
   visualmente con el CTA principal. */
.aov-virtual-main .aov-cab-bienvenido-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Instagram Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.aov-virtual-main .aov-cab-bienvenido-link:hover {
  color: #ffed00;
  text-decoration-color: #ffed00;
}

.aov-virtual-main .aov-cab-bienvenido + .grid-destino {
  margin-top: 24px;
}

.aov-virtual-main--tour-detail .aov-tour-conversion {
  width: 100%;
  padding: 2.3rem 2.5rem 0.2rem;
  background: #ffffff;
}

.aov-virtual-main--tour-detail .aov-tour-conversion-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.2rem;
  align-items: stretch;
}

.aov-virtual-main--tour-detail .aov-tour-kpis-wrap {
  display: block;
  background: #fcfcfd;
  border: 1px solid #eceff3;
  border-radius: var(--aov-radius);
  padding: var(--aov-card-pad-sm);
}

.aov-virtual-main--tour-detail .aov-tour-kpis-head {
  margin: 0 0 0.8rem;
}

.aov-virtual-main--tour-detail .aov-tour-kpis-kicker {
  margin: 0 0 0.3rem;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aov-virtual-main--tour-detail .aov-tour-kpis-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.15;
  color: #111827;
}

.aov-virtual-main--tour-detail .aov-tour-kpis-head p {
  margin: 0.42rem 0 0;
  color: #4b5563;
  font-size: 0.91rem;
  line-height: 1.4;
  max-width: 64ch;
}

/* Caja de precio simple (tours SIN variantes — la gran mayoría). */
.aov-virtual-main--tour-detail .aov-tour-price-highlight {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  margin: 0 0 1rem;
  padding: 0.6rem 1rem;
  border-radius: var(--aov-radius);
  background: #fffdfd;
  border: 1px solid rgba(244, 15, 80, 0.2);
}

.aov-virtual-main--tour-detail .aov-tour-price-label {
  margin: 0;
  color: #6b7280;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.aov-virtual-main--tour-detail .aov-tour-price-value {
  margin: 0;
  color: var(--brand);
  font-size: clamp(1.6rem, 2vw, 1.9rem);
  line-height: 1;
  font-weight: 900;
}

/* Selector de modalidad (tours con variantes, ej. Cabalgatas/Cuatrimotos
   consolidados en un solo tour): cada opción es su propia tarjeta con
   nombre + precio — la tarjeta activa ya responde "cuánto cuesta", no hace
   falta una caja de precio aparte que compita por espacio y atención. */
.aov-virtual-main--tour-detail .aov-tour-variant-label {
  margin: 0 0 0.5rem;
  color: var(--brand);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.aov-virtual-main--tour-detail .aov-tour-variant-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
}

.aov-virtual-main--tour-detail .aov-tour-variant-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 118px;
  padding: 0.55rem 1rem 0.6rem;
  border: 1.5px solid rgba(244, 15, 80, 0.3);
  border-radius: var(--aov-radius);
  background: rgba(244, 15, 80, 0.04);
  cursor: pointer;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s var(--ease-out, ease);
}

.aov-virtual-main--tour-detail .aov-tour-variant-btn-name {
  color: var(--brand);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.aov-virtual-main--tour-detail .aov-tour-variant-btn-price {
  color: #111827;
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.1;
}

.aov-virtual-main--tour-detail .aov-tour-variant-btn:hover {
  border-color: var(--brand);
  background: rgba(244, 15, 80, 0.1);
  transform: translateY(-1px);
}

.aov-virtual-main--tour-detail .aov-tour-variant-btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
}

.aov-virtual-main--tour-detail .aov-tour-variant-btn.is-active .aov-tour-variant-btn-name,
.aov-virtual-main--tour-detail .aov-tour-variant-btn.is-active .aov-tour-variant-btn-price {
  color: #ffffff;
}

.aov-virtual-main--tour-detail .aov-tour-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 0.9rem;
}

/* "Políticas de cancelación" (siempre el último bloque) ya no fuerza su
   propia fila completa — con un número par de bloques cae justo al lado
   de "Recomendaciones" en la grilla de 2 columnas, sin dejar un hueco
   huérfano al lado ni quedar aislado abajo. Sigue distinguiéndose por su
   color de borde (ver .aov-tour-kpi--policy). */

.aov-virtual-main--tour-detail .aov-tour-kpi {
  margin: 0;
  padding: 0.72rem 0.4rem 0.75rem 0.72rem;
  background: transparent;
  border: 0;
  border-left: 3px solid #e5eaf1;
  border-radius: 0;
  box-shadow: none;
}

.aov-virtual-main--tour-detail .aov-tour-kpi h3 {
  margin: 0 0 0.25rem;
  color: #111827;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
}

.aov-virtual-main--tour-detail .aov-tour-kpi--price {
  border-left-color: var(--brand);
}

.aov-virtual-main--tour-detail .aov-tour-kpi--policy {
  border-left-color: rgba(17, 24, 39, 0.35);
}

.aov-virtual-main--tour-detail .aov-tour-kpi p {
  margin: 0;
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.42;
}

/* Encabezado del formulario de cotización (columna derecha) — mismo
   patrón visual que .aov-tour-kpis-head de la izquierda (kicker rosa +
   título + texto breve), para que las dos columnas abran con el mismo
   peso en vez de que la derecha arranque directo en el campo "Nombre". */
.aov-virtual-main--tour-detail .aov-tour-reserva-head {
  margin: 0 0 1rem;
}

.aov-virtual-main--tour-detail .aov-tour-reserva-head h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  color: #111827;
}

.aov-virtual-main--tour-detail .aov-tour-reserva-head p {
  margin: 0.4rem 0 0;
  color: #4b5563;
  font-size: 0.88rem;
  line-height: 1.4;
}

.aov-virtual-main--tour-detail .aov-tour-reserva {
  margin: 0;
  /* Tarjeta destacada de la barra lateral (no una nested-card menor): usa el
     padding principal del sistema, no el reducido. */
  padding: var(--aov-card-pad);
  border-radius: var(--aov-radius);
  background: #fffdfd;
  color: #111827;
  border: 1px solid rgba(244, 15, 80, 0.2);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
  position: sticky;
  top: 102px;
  align-self: stretch;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.aov-virtual-main--tour-detail .aov-transfer-quote-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.aov-virtual-main--tour-detail .aov-transfer-quote-field {
  margin: 0;
  color: #374151;
  font-size: 0.8rem;
  font-weight: 700;
}

.aov-virtual-main--tour-detail .aov-transfer-quote-form select,
.aov-virtual-main--tour-detail .aov-transfer-quote-form input {
  width: 100%;
  border: 1px solid rgba(17, 24, 39, 0.15);
  border-radius: var(--aov-radius);
  background: #ffffff;
  color: #111827;
  font-size: 0.88rem;
  line-height: 1.25;
  padding: 0.58rem 0.68rem;
  box-sizing: border-box;
}

.aov-virtual-main--tour-detail .aov-quote-phone-row {
  display: grid;
  grid-template-columns: minmax(95px, 120px) minmax(0, 1fr);
  gap: 0.5rem;
}

.aov-virtual-main--tour-detail .aov-transfer-quote-form select:focus,
.aov-virtual-main--tour-detail .aov-transfer-quote-form input:focus {
  outline: none;
  border-color: rgba(244, 15, 80, 0.55);
  box-shadow: 0 0 0 2px rgba(244, 15, 80, 0.12);
}

.aov-virtual-main--tour-detail .aov-transfer-custom-fields {
  display: grid;
  gap: 0.45rem;
}

.aov-virtual-main--tour-detail .aov-transfer-custom-fields[hidden] {
  display: none;
}

.aov-virtual-main--tour-detail .aov-transfer-quote-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.25rem;
}

.aov-virtual-main--tour-detail .aov-transfer-quote-actions .aov-home-cta-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.aov-virtual-main--tour-detail .aov-transfer-quote-feedback {
  min-height: 1.15rem;
  margin: 0.2rem 0 0;
  color: #6b7280;
  font-size: 0.78rem;
  line-height: 1.3;
}

.aov-virtual-main--tour-detail .aov-transfer-quote-feedback.is-ok {
  color: #046c4e;
}

.aov-virtual-main--tour-detail .aov-transfer-quote-feedback.is-flash,
.aov-virtual-main--tour-detail .aov-tour-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); }
}

.aov-virtual-main--tour-detail .aov-tour-quote-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.aov-virtual-main--tour-detail .aov-tour-quote-field {
  margin: 0;
  color: #374151;
  font-size: 0.8rem;
  font-weight: 700;
}

.aov-virtual-main--tour-detail .aov-tour-quote-form input,
.aov-virtual-main--tour-detail .aov-tour-quote-form select {
  width: 100%;
  border: 1px solid rgba(17, 24, 39, 0.15);
  border-radius: var(--aov-radius);
  background: #ffffff;
  color: #111827;
  font-size: 0.88rem;
  line-height: 1.25;
  padding: 0.58rem 0.68rem;
  box-sizing: border-box;
}

.aov-virtual-main--tour-detail .aov-tour-quote-form input[readonly] {
  background: #f9fafb;
  color: #374151;
}

.aov-virtual-main--tour-detail .aov-tour-quote-form input:focus,
.aov-virtual-main--tour-detail .aov-tour-quote-form select:focus {
  outline: none;
  border-color: rgba(244, 15, 80, 0.55);
  box-shadow: 0 0 0 2px rgba(244, 15, 80, 0.12);
}

.aov-virtual-main--tour-detail .aov-tour-quote-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.25rem;
}

.aov-virtual-main--tour-detail .aov-tour-quote-actions .aov-home-cta-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.aov-virtual-main--tour-detail .aov-tour-quote-feedback {
  min-height: 1.15rem;
  margin: 0.2rem 0 0;
  color: #6b7280;
  font-size: 0.78rem;
  line-height: 1.3;
}

.aov-virtual-main--tour-detail .aov-tour-quote-feedback.is-ok {
  color: #046c4e;
}

.aov-virtual-main--tour-detail .aov-tour-reserva-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.aov-virtual-main--tour-detail .aov-tour-reserva .aov-home-cta-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.aov-virtual-main--tour-detail .aov-tour-reserva .aov-home-cta-btn-secondary {
  border-color: var(--brand);
  color: var(--brand);
  background: transparent;
}

.aov-virtual-main--tour-detail .aov-tour-reserva .aov-home-cta-btn-secondary:hover {
  border-color: var(--brand);
  background: rgba(244, 15, 80, 0.1);
}

.aov-virtual-main .desc-destino {
  width: 100%;
  /* Nivel liviano: un párrafo de texto no necesita el mismo aire que un
     bloque de tarjetas; y el gutter horizontal vuelve al token compartido.
     Sin padding-top: .aov-vsection--cabecero ya pone su propio
     margin-bottom para separarse de esta sección (es "el aire antes de la
     siguiente sección", ver ese comentario) — sumar otro padding acá arriba
     duplicaba el espacio y desbalanceaba el ritmo contra el resto de la
     página, que usa un solo espaciador por transición, no dos. */
  padding: 0 var(--aov-content-gutter-x) var(--aov-section-y-tight);
}

.aov-virtual-main .desc-inner {
  max-width: 880px;
  margin: 0 auto;
}

/* Tarjeta: antes era un párrafo suelto centrado sobre el blanco de la
   página, sin ningún peso visual propio — quedaba plano justo entre la
   foto del hero y las tarjetas de hoteles. Mismo blanco + borde gris que
   ya usan las demás tarjetas de contenido del sitio (.incluye-desc,
   .incluye-amenidades) — el crema anterior no encajaba con esa paleta. */
.aov-virtual-main .desc-card {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: var(--aov-card-radius);
  padding: var(--aov-card-pad);
}

.aov-virtual-main .desc-texto {
  font-size: 1rem;
  line-height: 1.85;
  color: #444444;
  /* Izquierda en vez de centrado: un párrafo largo centrado es más difícil
     de leer línea a línea: el ojo tiene que buscar el inicio de cada
     renglón en una posición distinta. */
  text-align: left;
}

.aov-virtual-main .desc-texto p {
  margin: 0 0 1em;
}

.aov-virtual-main .desc-texto p:last-child {
  margin-bottom: 0;
}

.aov-virtual-main .desc-texto strong {
  color: #111111;
  font-weight: 800;
}

.aov-virtual-main .grid-destino {
  display: grid;
  /* auto-fit + centrado: con 1-2 tarjetas (destinos con pocos hoteles) la
     fila queda centrada y sin el hueco vacío que dejaba el fijo a 4
     columnas; con más tarjetas acomoda 4 por fila. El tope de minmax()
     (no el ancho del contenedor) es lo que fija en cuántas columnas
     entra el auto-fit. 366px (no 330px) porque a 366×4 + 24×3 de gap da
     justo los 1536px de contenido (1600 menos el gutter de 32px a cada
     lado) — con 330px sobraban ~144px que quedaban como margen muerto
     centrado a los costados en vez de usarse, así que la fila no llegaba
     a los bordes del header ni del hero aunque el contenedor sí midiera
     1600px. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 366px));
  /* start, no stretch: sin esto, la fila donde cae la tarjeta de
     descripción (más alta que una tarjeta de hotel) estiraba también las
     tarjetas de hotel de esa misma fila para igualar la altura — perdían
     sus proporciones normales de min-height:27rem. */
  align-items: start;
  justify-content: center;
  max-width: 1600px;
  margin: 0 auto;
  /* Mismo gutter lateral que el header y el hero (--aov-content-gutter-x,
     32px) — antes usaba 48px acá y las tarjetas quedaban 16px más
     adentro que el logo del header y el título del hero, sin usar todo
     el ancho de 1600px de la página. */
  padding: 0 var(--aov-content-gutter-x) 52px;
  gap: var(--aov-grid-gap);
}

.aov-virtual-main .cab-wrap + .grid-destino {
  margin-top: 24px;
}

/* Tarjeta "Sobre este destino" como una tarjeta más de la grilla, no una
   franja aparte arriba — pero el texto no cabe en el mismo ancho angosto
   de una tarjeta de hotel sin quedar mucho más alta que ellas (y por
   align-items:start ya no las estira para igualarla). El número de
   columnas que ocupa (--desc-span, calculado en PHP según cuánto texto
   haya — ver aov_destino_desc_card_span()) le da justo el ancho que
   necesita para quedar a una altura pareja con las de hotel: texto corto,
   una columna angosta; texto largo, varias. */
.aov-virtual-main .grid-destino .desc-grid-item {
  grid-column: span var(--desc-span, 2);
}

.aov-virtual-main .grid-destino .desc-card {
  min-height: 27rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 18px 38px rgba(8, 15, 30, 0.1);
}


.aov-virtual-main .gd-card {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #1a1a2e;
  border-radius: var(--aov-radius);
  min-height: 27rem;
  box-shadow: 0 18px 38px rgba(8, 15, 30, 0.18);
  transform: translateZ(0);
  transition: transform var(--ease), background-size 0.5s var(--ease-out, ease), box-shadow var(--ease);
}

.aov-virtual-main .gd-card:hover {
  transform: translateY(-6px);
  background-size: 112%;
  box-shadow: 0 22px 44px rgba(8, 15, 30, 0.26);
}

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

.aov-virtual-main .gd-etiqueta {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #F40F50;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.25rem 0.9rem;
  border-radius: var(--aov-radius);
  z-index: 3;
}

.aov-virtual-main .gd-badge-popular {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  box-shadow: var(--lg-shine-light, inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(17, 17, 17, 0.05));
  color: #F40F50;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.25rem 0.8rem;
  border-radius: var(--aov-radius);
  z-index: 3;
}

.aov-virtual-main .gd-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  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%);
  z-index: 1;
}

.aov-virtual-main .gd-info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 1.1rem 1.1rem 1.25rem;
  z-index: 2;
}

.aov-virtual-main .gd-info h3 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 0.3rem;
}

.aov-virtual-main .gd-info p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 0.8rem;
}

.aov-virtual-main .gd-precio {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffed00;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.3rem !important;
}

.aov-virtual-main .gd-precio strong {
  font-size: 1.05rem;
  letter-spacing: normal;
  text-transform: none;
}

.aov-virtual-main .gd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.aov-virtual-main .gd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--aov-radius);
  /* El padding real lo fija la regla "medida unificada" más abajo. */
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  box-shadow: var(--lg-shine-dark, inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.22));
  transition: background var(--ease), border-color var(--ease), transform 0.16s var(--ease-out);
}

.aov-btn-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.aov-btn-whatsapp {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.aov-virtual-main .gd-btn:hover {
  background: #F40F50;
  border-color: #F40F50;
}

.aov-virtual-main .gd-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.aov-virtual-main .gd-btn-secondary {
  background: #F40F50;
  border-color: #F40F50;
}

.aov-virtual-main .gd-btn-secondary:hover {
  background: #ff4c82;
  border-color: #ff4c82;
}

.aov-virtual-main .cta-rojo {
  width: 100%;
  /* CTA de cierre: se queda en el nivel generoso (no el liviano) — es el
     último empujón hacia WhatsApp, merece el mismo aire que cta-oscuro. */
  padding: var(--aov-section-y) var(--aov-content-gutter-x);
  background: #F40F50;
  text-align: center;
}

.aov-virtual-main .cta-rojo h2 {
  max-width: 700px;
  margin: 0 auto 0.5rem;
  font-size: clamp(1.75rem, 3.6vw, 2.35rem);
  font-weight: 800;
  text-wrap: balance;
  color: #ffffff;
}

.aov-virtual-main .cta-rojo p {
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.4rem;
}

.aov-virtual-main .cta-btn-blanco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  color: #F40F50 !important;
  font-weight: 700;
  /* El padding real lo fija la regla "medida unificada" más abajo. */
  font-size: 14px;
  border-radius: var(--aov-radius);
  text-decoration: none !important;
  transition: transform var(--ease);
}

.aov-virtual-main .cta-btn-blanco:hover {
  transform: scale(1.03);
}

.aov-virtual-main .cta-btn-blanco:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.aov-virtual-main .incluye-wrap,
.aov-virtual-main .tours-hotel,
.aov-virtual-main .info-hotel,
.aov-virtual-main .cta-oscuro {
  width: 100%;
}

.aov-virtual-main .incluye-wrap {
  padding: var(--aov-section-y) var(--aov-content-gutter-x);
  background: #f9f9f9;
}

.aov-virtual-main .incluye-inner,
.aov-virtual-main .tours-inner,
.aov-virtual-main .info-inner {
  max-width: var(--aov-content-max);
  margin: 0 auto;
}

.aov-virtual-main .incluye-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  gap: var(--aov-grid-gap);
  align-items: stretch;
}

.aov-virtual-main .incluye-amenidades,
.aov-virtual-main .incluye-desc {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: var(--aov-card-radius);
  padding: var(--aov-card-pad);
  height: 100%;
}

.aov-virtual-main .incluye-titulo,
.aov-virtual-main .tours-titulo,
.aov-virtual-main .info-title,
.aov-virtual-main .galeria-titulo,
.aov-virtual-main .before-trip-title,
.aov-virtual-main .tour-desc h2,
.aov-virtual-main .desc-titulo {
  font-size: var(--aov-title-size);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #111111;
  margin: 0 0 var(--aov-title-gap);
}

/* Firma de marca: garabato (mismo trazo del hero) sobre cada título de
   contenido. Señaliza el inicio de cada sección y unifica la página. */
.aov-virtual-main .incluye-titulo::before,
.aov-virtual-main .tours-titulo::before,
.aov-virtual-main .info-title::before,
.aov-virtual-main .galeria-titulo::before,
.aov-virtual-main .before-trip-title::before,
.aov-virtual-main .tour-desc h2::before,
.aov-virtual-main .desc-titulo::before {
  content: "";
  display: block;
  /* Firma de marca más presente: el garabato es lo más distintivo del
     sistema, no debía leerse como un adorno chiquito. */
  width: 3.4rem;
  height: 1.05rem;
  margin: 0 0 0.9rem;
  background-color: #F40F50;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 16'%3E%3Cpath d='M2 8 Q9 1 16 8 T30 8 T44 8 T54 8' stroke='%23000' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 16'%3E%3Cpath d='M2 8 Q9 1 16 8 T30 8 T44 8 T54 8' stroke='%23000' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.aov-virtual-main .amenidades-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  padding: 0;
  margin: 0;
}

.aov-virtual-main .amenidades-list li {
  font-size: 0.95rem;
  color: #333333;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.aov-virtual-main .check-icon,
.aov-virtual-main .tip-ico,
.aov-virtual-main .fact-ico,
.aov-virtual-main .info-ico,
.aov-virtual-main .aov-semantic-icon {
  color: #F40F50;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aov-virtual-main .check-icon svg,
.aov-virtual-main .tip-ico svg,
.aov-virtual-main .fact-ico svg,
.aov-virtual-main .info-ico svg,
.aov-virtual-main .aov-semantic-icon svg {
  /* Phosphor Icons son formas rellenas (paths sólidos), no de trazo — antes
     este bloque forzaba fill:none + stroke para íconos de línea, ahora
     tendría que dibujar sus paths compuestos como contorno y se ven mal. */
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

.aov-virtual-main .check-icon img,
.aov-virtual-main .tip-ico img,
.aov-virtual-main .fact-ico img,
.aov-virtual-main .info-ico img,
.aov-virtual-main .aov-semantic-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.aov-virtual-main .check-icon .aov-icon-asset,
.aov-virtual-main .tip-ico .aov-icon-asset,
.aov-virtual-main .fact-ico .aov-icon-asset,
.aov-virtual-main .info-ico .aov-icon-asset,
.aov-virtual-main .aov-semantic-icon .aov-icon-asset {
  width: 100%;
  height: 100%;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: var(--aov-icon-url);
  mask-image: var(--aov-icon-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.aov-virtual-main .incluye-foto {
  width: 100%;
  height: 260px;
  border-radius: var(--aov-radius);
  background-size: cover;
  background-position: center;
  background-color: #e0e0e0;
  margin-bottom: 1.2rem;
}

.aov-virtual-main .incluye-texto {
  font-size: 0.94rem;
  color: #555555;
  line-height: 1.72;
}

.aov-virtual-main .incluye-texto p {
  margin: 0 0 1em;
}

.aov-virtual-main .incluye-texto p:last-child {
  margin-bottom: 0;
}

/* Variante unificada "aurea" para todas las páginas de hotel */
.aov-virtual-main .incluye-wrap--aurea {
  padding-top: var(--aov-section-y);
  padding-bottom: var(--aov-section-y);
}

.aov-virtual-main .incluye-wrap--aurea .incluye-grid {
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  gap: var(--aov-grid-gap);
  /* Antes "stretch": las dos tarjetas quedaban a la misma altura de la
     columna izquierda (siempre más larga), dejando un hueco vacío al
     final de la derecha. Con "start" cada una respeta su propio
     contenido. */
  align-items: start;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-amenidades,
.aov-virtual-main .incluye-wrap--aurea .incluye-desc {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: var(--aov-card-radius);
  padding: var(--aov-card-pad);
  display: flex;
  flex-direction: column;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-intro {
  margin: 0 0 1rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #4b4b4b;
  /* Antes 52ch: el párrafo quedaba a poco más de la mitad del ancho real
     de la tarjeta, dejando un vacío visible arriba a la derecha —
     mientras que "Plan y experiencias"/"Comodidad y ubicación" sí usan
     todo el ancho debajo. Sin tope, usa el mismo ancho que ellas. */
  max-width: 100%;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-bloque {
  border: 1px solid #f0d9e3;
  border-radius: var(--aov-radius);
  padding: var(--aov-card-pad-sm);
  background: linear-gradient(180deg, #fff9fc 0%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-subtitulo {
  font-size: 0.95rem;
  color: #f40f50;
  margin: 0 0 0.6rem;
  font-weight: 800;
}

.aov-virtual-main .incluye-wrap--aurea .amenidades-list {
  gap: 0.58rem;
}

.aov-virtual-main .incluye-wrap--aurea .amenidades-list li {
  font-size: 0.95rem;
  line-height: 1.35;
  align-items: flex-start;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-desc-titulo {
  font-size: 1.05rem;
  color: var(--dark, #111111);
  margin: 0 0 0.7rem;
  font-weight: 800;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-resumen {
  margin: 0 0 0.9rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #383838;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-facts {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-facts li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #ffd7e6;
  border-radius: var(--aov-radius);
  background: #fff7fa;
  color: #8d2c50;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-facts .check-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.aov-virtual-main .incluye-wrap--aurea .incluye-texto {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.72;
  color: #505050;
}

/* Esta clase solo se usa para "Tipos de habitaciones" en hoteles, y a esa
   sección le sigue siempre la caja del formulario de cotización (ver
   virtual-page.php), que ya trae su propio aire arriba — sumar el nivel
   completo de sección también acá abajo dejaba un salto en blanco enorme
   entre el carrusel y el formulario. Abajo baja a nivel liviano; arriba
   se queda completo porque ahí sí sigue una sección distinta. */
.aov-virtual-main .tours-hotel {
  padding: var(--aov-section-y) var(--aov-content-gutter-x) var(--aov-section-y-tight);
  background: #ffffff;
}

.aov-virtual-main .tours-planes-leyenda {
  max-width: var(--aov-content-max);
  margin: calc(-1 * var(--aov-title-gap) + 0.6rem) auto var(--aov-title-gap);
  font-size: 0.85rem;
  color: #666666;
  line-height: 1.7;
}

.aov-virtual-main .tours-planes-leyenda strong {
  color: #a80834;
}

.aov-virtual-main .tours-planes-nota {
  max-width: var(--aov-content-max);
  margin: -0.8rem auto var(--aov-title-gap);
  font-size: 0.8rem;
  color: #888888;
  line-height: 1.6;
}

.aov-virtual-main .room-card-top {
  display: flex;
  align-items: center;
  margin: 0 0 0.85rem;
}

.aov-virtual-main .room-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: var(--aov-radius);
  background: #fff1f5;
  color: #a80834;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.aov-virtual-main .tour-card {
  display: flex;
  flex-direction: column;
  /* Tarjeta densa tipo app, no un módulo de marketing: padding más ajustado
     que el resto de tarjetas de contenido del sitio. */
  padding: var(--aov-card-pad-sm);
  border: 1px solid #ececec;
  border-radius: var(--aov-card-radius);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.aov-virtual-main .tour-card h3 {
  /* Ritmo de la tarjeta reducido a 2 valores (0.5rem / 0.85rem, proporción
     ~1.7 ≈ áurea) en vez de 5 números sueltos — cada hueco es uno u otro. */
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #111111;
}

.aov-virtual-main .tour-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: var(--aov-body-size);
  line-height: 1.5;
  color: #555555;
}

.aov-virtual-main .room-plan-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.1rem;
  margin: 0.85rem 0 0;
}

.aov-virtual-main .room-plan-tab {
  flex: 1 1 0;
  padding: 0.45rem 0.5rem;
  border-radius: var(--aov-radius);
  border: 1.5px solid #ececec;
  background: #ffffff;
  color: #555555;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.aov-virtual-main .room-plan-tab:hover:not(.is-active):not(:disabled) {
  border-color: #F40F50;
  color: #F40F50;
}

.aov-virtual-main .room-plan-tab.is-active {
  background: #F40F50;
  border-color: #F40F50;
  color: #ffffff;
}

.aov-virtual-main .room-plan-tab:disabled {
  background: #f7f7f7;
  border-color: #ececec;
  color: #bbbbbb;
  cursor: not-allowed;
}

.aov-virtual-main .room-plan-panels {
  margin-top: 0;
}

.aov-virtual-main .room-plan-panel {
  /* !important necesario en display Y margin: ".tour-card p" (más
     específico por incluir el selector de etiqueta "p") fija su propio
     display Y margin:0, y le gana a esta regla si no — el margin de acá
     abajo estaba siendo ignorado por completo, por eso no había gap real
     entre las pestañas y "Desde" pasara lo que pasara con el valor. */
  display: none !important;
  /* Separación real de las pestañas de arriba: antes 0.5rem (el token
     "tight"), pero esta transición de zona interactiva a contenido
     necesitaba más aire — pasa al token "loose". */
  margin: 0.85rem 0 0 !important;
  /* line-height explícito y ajustado: heredar el 1.5 de ".tour-card p"
     agregaba relleno invisible enorme tanto aquí como en el <strong> de
     abajo (que recalcula ese mismo 1.5 sobre su propio font-size, mucho
     más grande) — eso, no el margin, era el hueco real entre "Desde" y
     el precio. */
  line-height: 1.2;
  font-size: 0.76rem;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.aov-virtual-main .room-plan-panel.is-active {
  display: block !important;
  animation: aov-faq-answer-in 0.2s var(--ease-out, ease) both;
}

.aov-virtual-main .room-plan-panel strong {
  display: block;
  /* Precio = el dato más importante de la tarjeta: debe ganarle en tamaño
     al nombre de la habitación (1.3rem), no quedar por debajo. "Desde" y el
     valor son una sola unidad visual: van pegados. */
  margin-top: 0.1rem;
  line-height: 1.15;
  font-size: 1.45rem;
  color: #F40F50;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.aov-virtual-main .room-precio-suf {
  font-size: 0.68rem;
  font-weight: 600;
  color: #888888;
  text-transform: none;
  letter-spacing: normal;
  margin-left: 0.2rem;
}

.aov-virtual-main .room-photo-wrap {
  /* Ahora que todas las tarjetas traen la misma estructura (pestañas +
     precio, algunas solo con más botones deshabilitados), sus alturas ya
     son parejas de por sí — no hace falta el margin-top:auto de antes.
     Un valor fijo da aire real entre el precio y la foto en vez de
     depender de cuánto sobrante quede por repartir. */
  margin: 1.1rem calc(-1 * var(--aov-card-pad-sm)) calc(-1 * var(--aov-card-pad-sm));
  width: calc(100% + 2 * var(--aov-card-pad-sm));
}

.aov-virtual-main .room-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
}

.aov-virtual-main .room-img-pendiente {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  color: #999999;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.aov-virtual-main .info-hotel {
  /* Nivel liviano: entre habitaciones y FAQ, marca una pausa más corta antes
     del siguiente bloque denso, en vez de repetir el mismo aire de siempre. */
  padding: var(--aov-section-y-tight) var(--aov-content-gutter-x);
  background: #f9f9f9;
}

.aov-virtual-main .info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--aov-grid-gap);
}

.aov-virtual-main .info-card {
  background: #ffffff;
  border-radius: var(--aov-card-radius);
  padding: var(--aov-card-pad);
  border: 1px solid #ececec;
}

.aov-virtual-main .info-card h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.7rem;
  color: #111111;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
}

.aov-virtual-main .info-card h3::before {
  content: none;
}

.aov-virtual-main .aov-semantic-icon {
  flex: 0 0 1.1rem;
}

.aov-virtual-main .tour-desc {
  width: 100%;
  padding: var(--aov-section-y) var(--aov-content-gutter-x);
  background: #ffffff;
}

.aov-virtual-main .tour-desc-inner {
  max-width: var(--aov-content-max);
  margin: 0 auto;
}

.aov-virtual-main .tour-desc p {
  margin: 0 0 0.9rem;
  line-height: 1.75;
  color: #4f4f4f;
  font-size: 0.98rem;
}

/* Selector de ciudad (traslados): cada ciudad sigue siendo su propia
   página/URL por SEO — estos son enlaces reales entre páginas, no un
   swap de contenido por JS como el selector de modalidad de tours. */
.aov-virtual-main .traslado-ciudad-selector {
  width: 100%;
  padding: 0 var(--aov-content-gutter-x);
  background: #ffffff;
}

.aov-virtual-main .traslado-ciudad-selector-inner {
  max-width: var(--aov-content-max);
  margin: 0 auto;
  padding-top: var(--aov-section-y-tight);
}

.aov-virtual-main .traslado-ciudad-label {
  margin: 0 0 0.6rem;
  color: var(--brand);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.aov-virtual-main .traslado-ciudad-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.aov-virtual-main .traslado-ciudad-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.2rem;
  border: 1.5px solid rgba(244, 15, 80, 0.3);
  border-radius: var(--aov-radius);
  background: rgba(244, 15, 80, 0.04);
  color: var(--brand);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s var(--ease-out, ease);
}

.aov-virtual-main a.traslado-ciudad-btn:hover {
  border-color: var(--brand);
  background: rgba(244, 15, 80, 0.1);
  transform: translateY(-1px);
}

.aov-virtual-main .traslado-ciudad-btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  cursor: default;
}

.aov-virtual-main .galeria-hotel {
  width: 100%;
  /* Nivel liviano: las fotos ya llevan su propio peso visual, no necesitan
     el mismo aire vertical que un bloque de texto/tarjetas. */
  padding: var(--aov-section-y-tight) var(--aov-content-gutter-x);
  background: #ffffff;
}

.aov-virtual-main .galeria-inner {
  max-width: var(--aov-content-max);
  margin: 0 auto;
}

.aov-virtual-main .aov-hotel-gallery {
  width: 100%;
  /* Nivel liviano: esta es la galería que realmente se sirve (virtual-page.php
     la reemplaza sobre .galeria-hotel), así que es aquí donde el ritmo importa. */
  padding: var(--aov-section-y-tight) var(--aov-content-gutter-x);
  background: #ffffff;
}

.aov-virtual-main .aov-hotel-gallery-inner {
  max-width: var(--aov-content-max);
  margin: 0 auto;
}

.aov-virtual-main .aov-hotel-gallery-swiper {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.aov-virtual-main .aov-hotel-gallery-swiper .swiper-wrapper {
  align-items: stretch;
}

.aov-virtual-main .aov-hotel-gallery-swiper .swiper-slide {
  line-height: 0;
  border-radius: var(--aov-radius);
  overflow: hidden;
  background: #e5e7eb;
  box-shadow: 0 10px 24px rgba(8, 15, 30, 0.14);
}

.aov-virtual-main .aov-hotel-gallery-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.aov-virtual-main .aov-hotel-gallery-swiper .swiper-button-prev,
.aov-virtual-main .aov-hotel-gallery-swiper .swiper-button-next {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--lg-dark-border, rgba(255, 255, 255, 0.26));
  background: var(--lg-dark-bg, rgba(16, 18, 22, 0.4));
  color: #ffffff;
  box-shadow: var(--lg-shine-dark, inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.22));
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturate, 1.8));
  transition: background 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}

.aov-virtual-main .aov-hotel-gallery-swiper .swiper-button-prev:hover,
.aov-virtual-main .aov-hotel-gallery-swiper .swiper-button-next:hover {
  background: rgba(17, 24, 39, 0.8);
}

.aov-virtual-main .aov-hotel-gallery-swiper .swiper-button-prev:active,
.aov-virtual-main .aov-hotel-gallery-swiper .swiper-button-next:active {
  transform: scale(0.9);
}

.aov-virtual-main .aov-hotel-gallery-swiper .swiper-button-prev::after,
.aov-virtual-main .aov-hotel-gallery-swiper .swiper-button-next::after {
  font-size: 12px;
  font-weight: 700;
}

.aov-virtual-main .aov-hotel-gallery-swiper .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.66);
  opacity: 1;
}

.aov-virtual-main .aov-hotel-gallery-swiper .swiper-pagination-bullet-active {
  background: #ffffff;
}
.aov-virtual-main .galeria-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.aov-virtual-main .galeria-main,
.aov-virtual-main .galeria-med,
.aov-virtual-main .galeria-small {
  border-radius: var(--aov-radius);
  background-size: cover;
  background-position: center;
  background-color: #dcdcdc;
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.aov-virtual-main .galeria-main {
  grid-column: span 2;
  grid-row: span 2;
}

.aov-virtual-main .galeria-med {
  grid-column: span 2;
}

.aov-virtual-main .galeria-small {
}

.aov-virtual-main .info-card p {
  margin: 0;
  color: #555555;
  line-height: 1.72;
  font-size: var(--aov-body-size);
}

.aov-virtual-main .before-trip {
  margin-top: 1.7rem;
}

.aov-virtual-main .before-trip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.aov-virtual-main .tip-card {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: var(--aov-radius);
  padding: var(--aov-card-pad-sm);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.03);
}

.aov-virtual-main .tip-ico {
  flex-shrink: 0;
  margin-top: 2px;
}

.aov-virtual-main .tip-card p {
  margin: 0;
  color: #555555;
  line-height: 1.7;
  font-size: 0.92rem;
}

.aov-virtual-main .cta-oscuro {
  padding: calc(var(--aov-section-y) + 0.6rem) var(--aov-content-gutter-x);
  background: #0d1117;
  text-align: center;
}

.aov-virtual-main .cta-oscuro h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.35rem);
  font-weight: 800;
  text-wrap: balance;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.aov-virtual-main .cta-oscuro p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.8rem;
}

/* CTA final de hoteles: foto editable desde 07-cta-final-hotel.html vía data-bg + overlay. */
.aov-virtual-main--hotel .cta-oscuro {
  position: relative;
  overflow: hidden;
  background-color: #0d1117;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.aov-virtual-main--hotel .cta-oscuro::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Overlay negro plano al 50% — mismo tratamiento en todos los CTA con
     foto del sitio, sin degradados que aclaren hacia gris. */
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.aov-virtual-main--hotel .cta-oscuro > * {
  position: relative;
  z-index: 1;
}

.aov-virtual-main .cta-btns {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.aov-virtual-main .cta-btn-rojo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #F40F50;
  color: #ffffff !important;
  font-weight: 700;
  /* El padding real lo fija la regla "medida unificada" más abajo. */
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: var(--aov-radius);
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(244, 15, 80, 0.32);
  transition: background var(--ease), box-shadow var(--ease), transform 0.16s var(--ease-out);
}

.aov-virtual-main .cta-btn-rojo:hover {
  background: #c8003d;
  box-shadow: 0 10px 24px rgba(244, 15, 80, 0.4);
  transform: translateY(-2px);
}

.aov-virtual-main .cta-btn-rojo:active,
.aov-virtual-main .cta-btn-outline:active {
  transform: translateY(-1px) scale(0.97);
  transition-duration: 0.1s;
}

.aov-virtual-main .cta-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: var(--aov-radius);
  text-decoration: none !important;
  transition: border-color var(--ease), background var(--ease), transform 0.16s var(--ease-out);
}

.aov-virtual-main .cta-btn-outline:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.aov-virtual-main .aov-home-faq {
  width: 100%;
  padding: var(--aov-section-y) var(--aov-content-gutter-x);
  background: #ffffff;
}

.aov-virtual-main .aov-home-faq .container {
  max-width: var(--aov-content-max);
  margin: 0 auto;
  padding: 0;
}

.aov-virtual-main .aov-home-faq-kicker {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #F40F50;
}

.aov-virtual-main .aov-home-faq-title {
  margin: 0 0 24px;
  font-size: var(--aov-title-size);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #111111;
}

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

.aov-virtual-main .aov-home-faq-list {
  display: grid;
  gap: 10px;
}

.aov-virtual-main .aov-home-faq-item {
  border: 1px solid #e8e8e8;
  border-radius: var(--aov-radius);
  background: #ffffff;
  overflow: clip;
  transition: box-shadow 0.25s ease;
}

.aov-virtual-main .aov-home-faq-item:hover,
.aov-virtual-main .aov-home-faq-item:focus-within {
  box-shadow: 0 4px 18px rgba(244, 15, 80, 0.07);
}

.aov-virtual-main .aov-home-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1.0625rem 1.25rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #151515;
  transition: background 0.2s ease;
}

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

.aov-virtual-main .aov-home-faq-item summary:focus-visible {
  outline: 2px solid #F40F50;
  outline-offset: -2px;
}

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

.aov-virtual-main .aov-home-faq-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  position: relative;
  border-radius: 50%;
  background: #F40F50;
  user-select: none;
}

.aov-virtual-main .aov-home-faq-icon::before,
.aov-virtual-main .aov-home-faq-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease-in-out);
}

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

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

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

.aov-virtual-main .aov-home-faq-answer {
  padding: 0 20px 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-virtual-main .aov-home-faq-answer p {
  margin: 0;
  color: #4d4d4d;
  line-height: 1.8;
  font-size: 0.95rem;
}

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

@media (max-width: 900px) {
  .aov-virtual-main .cab-top {
    padding: 20px 22px;
  }


  .aov-virtual-main .cab-share-wrap {
    bottom: clamp(78px, 14vh, 110px);
  }

  .aov-virtual-main .cab-share-btn {
    width: 46px;
    height: 46px;
  }

  .aov-virtual-main .cab-handle {
    font-size: 0.88rem;
  }

  .aov-virtual-main .cab-squiggle {
    width: clamp(70px, 15vw, 100px);
  }

  .aov-virtual-main .incluye-grid,
  .aov-virtual-main .info-grid {
    grid-template-columns: 1fr;
  }

  .aov-virtual-main .before-trip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aov-virtual-main .galeria-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aov-virtual-main .galeria-main {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 0;
  }

  .aov-virtual-main .galeria-med,
  .aov-virtual-main .galeria-small {
    min-height: 0;
    grid-column: span 1;
  }

  .aov-virtual-main .cab-wrap {
    min-height: clamp(600px, 68vh, 730px);
  }

  .aov-virtual-main .aov-cab-bienvenido {
    padding-top: 8.75rem;
  }

  .aov-virtual-main .grid-destino {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 1/-1 en vez de heredar --desc-span de escritorio: con solo 2 columnas
     acá, un span de 3 o 4 (calculado para el ancho de escritorio) crearía
     columnas de más y la tarjeta terminaría más angosta que las de hotel
     en vez de coincidir con ellas. */
  .aov-virtual-main .grid-destino .desc-grid-item {
    grid-column: 1 / -1;
  }

  .aov-virtual-main .grid-destino {
    padding: 0 24px 44px;
    gap: 16px;
  }

  .aov-virtual-main .aov-cab-bienvenido + .grid-destino {
    margin-top: 18px;
  }

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

  .aov-virtual-main .incluye-wrap--aurea .incluye-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

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

  .aov-virtual-main .cab-share-wrap {
    right: 18px;
    /* Más alto que en tablet (72-96px): a este ancho aparece la barra fija
       de contacto de WhatsApp pegada al pie real del viewport (wa-leads.css,
       misma condición ≤560px) y con la cápsula vertical de antes el botón
       de compartir quedaba justo encima, chocando con ella al cargar la
       página (antes de hacer scroll). */
    bottom: clamp(112px, 20vh, 140px);
  }

  .aov-virtual-main .cab-share-btn {
    width: 44px;
    height: 44px;
  }

  /* Cápsula horizontal solo-íconos: la versión vertical con texto (176px de
     ancho, 4 filas) es la que quedaba pegada a la barra de WhatsApp. En una
     fila, sin texto, ocupa mucho menos alto y dentro del mismo espacio ya
     no compite con nada más en pantalla. */
  .aov-virtual-main .cab-share-menu {
    flex-direction: row;
    min-width: 0;
    width: max-content;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
  }

  .aov-virtual-main .cab-share-item {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    gap: 0;
  }

  /* El texto sigue en el DOM (lectores de pantalla lo necesitan como
     nombre accesible del botón, que no tiene aria-label propio) — solo se
     oculta visualmente, no con display:none. */
  .aov-virtual-main .cab-share-item span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .aov-virtual-main .cta-btns {
    flex-direction: column;
    align-items: stretch;
  }

  /* Los dos CTA del hero se quedan en una sola fila también en mobile
     (no uno debajo del otro) — el tamaño real de letra/padding para que
     quepan los dos textos largos se ajusta más abajo, después de la
     regla "medida unificada" para poder ganarle en el cascade. */
  .aov-virtual-main .aov-cab-bienvenido-btns {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .aov-virtual-main .incluye-wrap,
  .aov-virtual-main .tours-hotel,
  .aov-virtual-main .info-hotel,
  .aov-virtual-main .cta-oscuro,
  .aov-virtual-main .tour-desc,
  .aov-virtual-main .galeria-hotel,
  .aov-virtual-main .aov-home-faq {
    padding: 3rem 1.2rem;
  }

  .aov-virtual-main .incluye-wrap--aurea {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }

  .aov-virtual-main .incluye-wrap--aurea .incluye-amenidades,
  .aov-virtual-main .incluye-wrap--aurea .incluye-desc {
    padding: 1rem;
  }

  .aov-virtual-main .incluye-wrap--aurea .incluye-columns,
  .aov-virtual-main .incluye-wrap--aurea .incluye-facts {
    grid-template-columns: 1fr;
  }

  .aov-virtual-main .aov-hotel-gallery {
    padding: 2.2rem 1.2rem 1.9rem;
  }

  .aov-virtual-main .aov-hotel-gallery-image {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .aov-virtual-main .aov-hotel-gallery-swiper .swiper-button-prev,
  .aov-virtual-main .aov-hotel-gallery-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
  }

  .aov-virtual-main .galeria-grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    grid-template-columns: none;
  }

  .aov-virtual-main .galeria-grid::-webkit-scrollbar {
    display: none;
  }

  .aov-virtual-main .galeria-main,
  .aov-virtual-main .galeria-med,
  .aov-virtual-main .galeria-small {
    flex: 0 0 88%;
    scroll-snap-align: start;
    grid-column: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  .aov-virtual-main .before-trip-grid {
    grid-template-columns: 1fr;
  }

  .aov-virtual-main .cab-wrap {
    min-height: clamp(600px, 74vh, 700px);
  }

  .aov-virtual-main .aov-cab-bienvenido {
    padding-top: 7.75rem;
  }

  .aov-virtual-main .desc-destino {
    padding: 0 1.2rem 2rem;
  }

  .aov-virtual-main .desc-texto {
    font-size: 0.93rem;
  }

  .aov-virtual-main .grid-destino {
    grid-template-columns: 1fr;
  }

  /* Mismo motivo que en el breakpoint de 900px: acá solo hay 1 columna,
     así que la tarjeta debe ocupar esa única columna completa, no el
     --desc-span pensado para escritorio. */
  .aov-virtual-main .grid-destino .desc-grid-item {
    grid-column: 1 / -1;
  }

  .aov-virtual-main .grid-destino {
    padding: 0 16px 38px;
  }

  .aov-virtual-main .aov-cab-bienvenido + .grid-destino {
    margin-top: 14px;
  }

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

  .aov-virtual-main .grid-destino .desc-card {
    min-height: 0;
  }

  .aov-virtual-main .cta-rojo {
    padding: 3rem 1.2rem;
  }
}

  @media (max-width: 900px) {
    .aov-virtual-main--tour-detail .aov-tour-conversion {
      padding: 1.35rem 1.25rem 0;
    }

    .aov-virtual-main--tour-detail .aov-tour-conversion-inner {
      grid-template-columns: 1fr;
    }

    .aov-virtual-main--tour-detail .aov-tour-kpis {
      grid-template-columns: 1fr;
    }

    .aov-virtual-main--tour-detail .aov-tour-kpis-wrap {
      padding: 0.9rem 0.85rem;
    }

    .aov-virtual-main--tour-detail .aov-tour-kpis-head h2 {
      font-size: 1.35rem;
    }

    .aov-virtual-main--tour-detail .aov-tour-kpi {
      padding: 0.78rem 0.3rem 0.86rem 0.72rem;
    }

    .aov-virtual-main--tour-detail .aov-tour-reserva {
      position: static;
      top: auto;
      height: auto;
    }

    .aov-virtual-main--tour-detail .aov-tour-reserva-actions {
      margin-top: 0;
      padding-top: 0.2rem;
    }

    .aov-virtual-main--tour-detail .aov-transfer-quote-form {
      margin-top: 0;
      padding-top: 0.25rem;
    }

    .aov-virtual-main--tour-detail .aov-tour-quote-form {
      margin-top: 0;
      padding-top: 0.25rem;
    }
  }

/* ═══════════════════════════════════════
   ACCESIBILIDAD: foco visible por teclado + reduce motion
   (no altera el aspecto visual en uso normal con ratón)
═══════════════════════════════════════ */

/* Anillo de foco visible (color de marca) para enlaces y botones */
.aov-virtual-main a:focus-visible,
.aov-virtual-main button:focus-visible {
  outline: 3px solid #F40F50;
  outline-offset: 3px;
}

/* Respeta "reducir movimiento" del sistema operativo */
@media (prefers-reduced-motion: reduce) {
  .aov-virtual-main *,
  .aov-virtual-main *::before,
  .aov-virtual-main *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .aov-virtual-main .gd-card:hover,
  .aov-virtual-main .cta-btn-blanco:hover,
  .aov-virtual-main .cta-btn-rojo:hover,
  .aov-virtual-main .cta-btn-outline:hover,
  .aov-virtual-main .aov-cab-bienvenido-btn:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════
   ENTRADA DE SECCIONES — reveal al hacer scroll
   El estado oculto SOLO aplica cuando el JS añade .aov-anim-on
   y el usuario no pidió reducir movimiento. Sin JS, el contenido
   se muestra siempre (no hay riesgo de página invisible).
═══════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .aov-virtual-main.aov-anim-on .aov-vsection:not(.aov-vsection--hero) {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity 0.65s var(--aov-reveal-ease, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.65s var(--aov-reveal-ease, cubic-bezier(0.16, 1, 0.3, 1));
  }

  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Stagger de las tarjetas dentro de la sección revelada */
  .aov-virtual-main.aov-anim-on .aov-vsection:not(.aov-vsection--hero) .incluye-amenidades,
  .aov-virtual-main.aov-anim-on .aov-vsection:not(.aov-vsection--hero) .incluye-desc,
  .aov-virtual-main.aov-anim-on .aov-vsection:not(.aov-vsection--hero) .tour-card,
  .aov-virtual-main.aov-anim-on .aov-vsection:not(.aov-vsection--hero) .info-card,
  .aov-virtual-main.aov-anim-on .aov-vsection:not(.aov-vsection--hero) .aov-home-faq-item {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.5s var(--aov-reveal-ease, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.5s var(--aov-reveal-ease, cubic-bezier(0.16, 1, 0.3, 1));
  }

  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .incluye-amenidades,
  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .incluye-desc,
  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .tour-card,
  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .info-card,
  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .aov-home-faq-item {
    opacity: 1;
    transform: none;
  }

  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .incluye-desc,
  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .tour-card:nth-child(2),
  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .info-card:nth-child(2),
  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .aov-home-faq-item:nth-child(2) {
    transition-delay: 0.12s;
  }

  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .tour-card:nth-child(3),
  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .info-card:nth-child(3),
  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .aov-home-faq-item:nth-child(3) {
    transition-delay: 0.24s;
  }

  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .tour-card:nth-child(n + 4),
  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .info-card:nth-child(4) {
    transition-delay: 0.36s;
  }

  /* .gd-card (tarjetas de hoteles/tours/traslados en las grillas de destino)
     va aparte, solo con opacity — ya tiene su propio translateY(-6px) al
     pasar el mouse (ver .gd-card:hover más arriba), y sumarle también un
     translateY de entrada competiría con ese por especificidad de CSS. */
  .aov-virtual-main.aov-anim-on .aov-vsection:not(.aov-vsection--hero) .gd-card {
    opacity: 0;
    transition: opacity 0.5s ease-out;
  }

  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .gd-card {
    opacity: 1;
  }

  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .gd-card:nth-child(2) {
    transition-delay: 0.12s;
  }

  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .gd-card:nth-child(3) {
    transition-delay: 0.24s;
  }

  .aov-virtual-main.aov-anim-on .aov-vsection.is-revealed .gd-card:nth-child(n + 4) {
    transition-delay: 0.36s;
  }
}

/* ═══════════════════════════════════════
   BOTONES CTA + FORMULARIOS — medida unificada
   Hero, CTA final, "ver hotel", y botones de todos los formularios.
   NO incluye el FAQ ni las flechas de carrusel.
   Mismo tamaño que el CTA del hero del home (.aov-hero-cta: padding 12px 18px,
   font-size 14px) — un botón no debía sentirse más grande según en qué
   página estuviera.
═══════════════════════════════════════ */
.aov-virtual-main .aov-cab-bienvenido-btn,
.aov-virtual-main .cta-btn-rojo,
.aov-virtual-main .cta-btn-outline,
.aov-virtual-main .cta-btn-blanco,
.aov-virtual-main .gd-btn,
.aov-virtual-main .aov-home-quote-btn,
.aov-virtual-main .aov-home-cta-btn {
  padding: 12px 18px;
  border-radius: var(--aov-radius);
}

/* Los CTA del hero superpuesto en la foto quedan un punto más chicos que
   la medida unificada de arriba — ahí se veían con demasiado peso frente
   al título y el subtítulo, ya reducidos. Va después para ganarle en el
   cascade. */
.aov-virtual-main .aov-cab-bienvenido-btn {
  padding: 10px 16px;
  font-size: 12.5px;
}

/* El hero de hoteles trae el único texto largo del set ("Reservar por
   WhatsApp" + ícono, vs. "Ver planes disponibles" o "Ver hoteles
   disponibles" de tours/destinos) — se achica un poco más para que no
   domine el hero por puro tamaño. Va después para ganarle en el cascade. */
.aov-virtual-main--hotel .aov-cab-bienvenido-btn {
  padding: 9px 13px;
  font-size: 12px;
}

/* El CTA principal del hero (único botón con esta clase — el segundo, si
   existe, es el enlace de texto liviano .aov-cab-bienvenido-link) se achica
   al ancho de su propio contenido en mobile, no crece a ocupar la fila.
   flex:1 1 0 quedaba de un diseño anterior con dos botones del mismo peso
   que sí necesitaban repartirse la fila; con un solo botón, ese flex-grow
   lo estiraba de más ("ocupa mucho espacio"). Va después de la medida
   unificada de arriba para ganarle en el cascade. */
@media (max-width: 560px) {
  .aov-virtual-main .aov-cab-bienvenido-btn {
    flex: 0 1 auto;
    padding: 10px 8px;
    font-size: 12.5px;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
  }

  .aov-virtual-main--hotel .aov-cab-bienvenido-btn {
    padding: 9px 12px;
    font-size: 11.5px;
  }
}

/* El header (.header-inner en style.css) reduce su gutter de 32px a 20px
   en ≤480px — se replica acá para que el título, la barra de marca y el
   botón de compartir sigan alineados con el header en celulares chicos. */
@media (max-width: 480px) {
  .aov-virtual-main .aov-cab-bienvenido-inner {
    padding: 0 20px;
  }

  .aov-virtual-main .cab-top {
    padding-left: 20px;
    padding-right: 20px;
  }

  .aov-virtual-main .cab-crumbs-top {
    padding-left: 20px;
    padding-right: 20px;
  }

  .aov-virtual-main .cab-share-wrap {
    right: 20px;
  }
}