/* Ajustes responsivos del menú de navegación para evitar cortes de palabras y saltos de línea */

/* Contenedor del menú */
ul.nav-menu {
  display: flex;
  flex-wrap: nowrap;              /* No permitir que los ítems bajen de línea */
  gap: clamp(12px, 2.2vw, 28px);  /* Espacio fluido entre ítems */
  align-items: center;
}

/* Ítems del menú */
ul.nav-menu > li.nav-menu__item {
  flex: 0 0 auto;                 /* Tamaño basado en contenido, sin crecer */
  min-width: auto;
}

/* Enlaces del menú */
ul.nav-menu a.nav-menu__link {
  white-space: nowrap;            /* Evita que el texto se corte en varias líneas */
  display: inline-flex;           /* Alineación vertical correcta */
  align-items: center;
  line-height: 1.2;               /* Reduce altura para textos largos */
  padding-top: 0.5rem !important; /* Ajusta padding vertical para caber mejor */
  padding-bottom: 0.5rem !important;
}

/* Submenús: asegurar que el enlace principal no se corte */
ul.nav-menu li.has-submenu > a.nav-menu__link {
  white-space: nowrap;
}

/* Responsivo: reducir tamaño de fuente y separación en desktops medianos */
@media (max-width: 1400px) {
  ul.nav-menu a.nav-menu__link { font-size: 0.975rem; }
  ul.nav-menu { gap: clamp(10px, 1.8vw, 24px); }
}

/* Responsivo: más compacto cerca del breakpoint lg (antes de menú móvil) */
@media (max-width: 1200px) {
  ul.nav-menu a.nav-menu__link { font-size: 0.92rem; }
  ul.nav-menu { gap: clamp(8px, 1.4vw, 20px); }
}

/* Evitar bullets/artefactos visuales si algún estilo los agrega */
ul.nav-menu { list-style: none; }
ul.nav-menu li::marker { content: none; }

/* ================= CTA Actions (Banner) ================ */
.cta-actions-wrapper { position: relative; }
/* Animación para ocultar el CTA principal al abrir acciones */
.cta-visit {
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
.cta-actions-wrapper.is-open .cta-visit {
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
}

.cta-actions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none; /* desactivado hasta abrir */
  z-index: 50;
}

/* Botones individuales (estado base oculto) */
.cta-action {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  box-shadow: none;
  border-radius: 9999px;
  padding: 0;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* Posiciones relativas respecto al botón principal */
.cta-action--left { transform: translate(-140%, 6px) scale(0.96); }
.cta-action--right { transform: translate(40%, 6px) scale(0.96); }

/* Al abrir */
.cta-actions-wrapper.is-open .cta-actions { pointer-events: auto; }
.cta-actions-wrapper.is-open .cta-action--left { opacity: 1; transform: translate(-140%, 0) scale(1); visibility: visible; }
.cta-actions-wrapper.is-open .cta-action--right { opacity: 1; transform: translate(40%, 0) scale(1); visibility: visible; }

/* Icon circle styles */
.cta-action .icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.cta-ticket .icon-circle {
  background: #0d6efd; /* azul */
  color: #fff;
}
.cta-whatsapp .icon-circle {
  background: #25D366; /* verde whatsapp */
  color: #fff;
}
.cta-action .label { color: #0b1324; font-weight: 600; }

@media (max-width: 576px) {
  .cta-action { font-size: .9rem; }
}
