/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #1a6b6b;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0f4a4a;
}


/* Package cards pulse effect */
.package-card {
    position: relative;
}

.package-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 1.5rem;
    background: linear-gradient(45deg, #1a6b6b, #2d8b8b, #3da5a5);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s;
}

.package-card:hover::after {
    opacity: 0.3;
}


/* Form focus effects */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(26, 107, 107, 0.1);
} */

/* Navbar scroll effect */
#navbar.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Mobile menu animation */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

#mobile-menu.active {
    max-height: 300px;
}


/** SWIPER JS**/
/* ======== CONFIGURACIÓN GLOBAL PARA ESTE SWIPER ======== */
.mySwiper {
  --nav-size: 46px;               /* Tamaño de los botones circulares */
  --nav-icon: 22px;               /* Tamaño del icono SVG */
  --nav-bg: #F97937;              /* Fondo de los botones */
  --nav-color: #fff;              /* Color del icono (usa currentColor) */

  --bullet-size: 10px;            /* Tamaño de los puntos */
  --bullet-color: #d1d5db;        /* Gris claro (no activo) */
  --bullet-active: #F97937;       /* Color del punto activo */
}

/* ======== BOTONES SIGUIENTE / ANTERIOR ======== */
.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next {
  width: var(--nav-size) !important;
  height: var(--nav-size) !important;
  border-radius: 9999px !important;
  background: var(--nav-bg) !important;
  color: var(--nav-color) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  transition: background 0.3s ease, transform 0.2s ease;
}

/* Efecto hover */
.mySwiper .swiper-button-prev:hover,
.mySwiper .swiper-button-next:hover {
  background: #e8692b; /* tono más oscuro */
  transform: scale(1.05);
}

/* Tamaño del icono SVG */
.mySwiper .swiper-button-prev .swiper-navigation-icon,
.mySwiper .swiper-button-next .swiper-navigation-icon {
  width: var(--nav-icon) !important;
  height: var(--nav-icon) !important;
}

/* Anula cualquier pseudo-elemento heredado */
.mySwiper .swiper-button-prev::after,
.mySwiper .swiper-button-next::after {
  content: none !important;
}

/* ======== PAGINACIÓN (LOS PUNTOS INFERIORES) ======== */
.mySwiper .swiper-pagination {
  position: relative;          /* te permite moverla si quieres */
  margin-top: 1rem;            /* separación respecto al carrusel */
  text-align: center;
}

/* Cada punto */
.mySwiper .swiper-pagination-bullet {
  width: var(--bullet-size);
  height: var(--bullet-size);
  background: var(--bullet-color);
  opacity: 1;                  /* evita el efecto de opacidad de Swiper */
  margin: 0 5px !important;
  transition: all 0.3s ease;
}

/* Punto activo */
.mySwiper .swiper-pagination-bullet-active {
  background: var(--bullet-active);
  transform: scale(1.4);
}

/* Hover opcional en los bullets */
.mySwiper .swiper-pagination-bullet:hover {
  background: var(--bullet-active);
  transform: scale(1.2);
}

/** / SWIPER JS **/

/* WHATSAPP */
.whatsapp-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #25D366;
      color: white;
      padding: 12px 20px;
      border-radius: 50px;
      text-decoration: none;
      font-family: Arial, sans-serif;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease, background-color 0.3s ease;
      z-index: 1000;
    }

    .whatsapp-button:hover {
      background-color: #20b358;
      transform: scale(1.05);
    }

    .whatsapp-icon {
      width: 24px;
      height: 24px;
    }

    @media (max-width: 768px) {
      .whatsapp-button {
        padding: 10px 16px;
        font-size: 14px;
      }

      .whatsapp-icon {
        width: 20px;
        height: 20px;
      }
    }

    @media (max-width: 480px) {
      .whatsapp-button {
        padding: 8px 12px;
        font-size: 12px;
        bottom: 10px;
        right: 10px;
      }

      .whatsapp-icon {
        width: 18px;
        height: 18px;
      }
    }
/* / WHATSAPP */