/*------------------------------------------------------------------
VARIABLES
-------------------------------------------------------------------*/

   :root {
       --primario: #08744f;
       --secundario: #def3e8;
       --tercero: #005b66;
   }

   body {
       height: 100%;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       font-smoothing: antialiased;
       font-family: 'Montserrat', sans-serif;
       font-weight: 500;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {

       font-family: 'Montserrat', sans-serif;

   }


   p {
       font-size: 20px;
   }


   .titulo-padding {
       padding-top: 80px;
       padding-bottom: 20px;
   }

   .link1 {
       color: #000;
       border: solid #000 3px;
       padding: 8px;
       font-size: 20px;
       border-radius: 50rem !important;

   }

   .link1:hover {
       color: #fff;
   }

   a {
       text-decoration: none;
       color: #000;
   }


   /*------------------------------------------------------------------
NAVBAR
-------------------------------------------------------------------*/

   /* Navbar styling */
   .navbar {
       transition: background-color 0.4s ease;
   }

   .navbar.scrolled {
       background-color: #08744F !important;
   }

   .navbar-toggler {
       border: none;
       outline: none;
   }

   .navbar-collapse {
       transition: all 0.4s ease-in-out;
   }

   .navbar-toggler-icon {
       background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
   }

   .nav-link {
       display: block;
       padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
       font-size: 20px !important;
       font-weight: var(--bs-nav-link-font-weight);
       color: var(--bs-nav-link-color);
       text-decoration: none;
       background: 0 0;
       border: 0;
       transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out;
   }

   /* ======== ESTILO PERSONALIZADO PARA FONDO DE NAVBAR COLLAPSE SOLO EN RESPONSIVE ======== */
   @media (max-width: 991.98px) {
       .custom-navbar-collapse-bg {
           background-color: rgba(8, 116, 79, 0.95) !important;
           backdrop-filter: blur(4px);
           border-radius: 0.5rem;
       }
   }

   .nav-item {
       background-color: var(--primario);
   }

   /* ======== FIN ESTILO PERSONALIZADO ======== */

   /* ======== ANIMACIÓN SUAVE DE DESPLIEGUE PARA DROPDOWN DE SERVICIOS ======== */
   .dropdown-menu {
       transition: transform 0.3s ease, opacity 0.3s ease;
       transform-origin: top;
   }

   .dropdown.show .dropdown-menu {
       display: block;
       transform: scaleY(1);
       opacity: 1;
   }

   /*------------------------------------------------------------------
BULLETS
-------------------------------------------------------------------*/
   .custom-bullets li {
       margin-bottom: 0.5rem;
       display: flex;
       align-items: center;
   }

   /*------------------------------------------------------------------
ICON
-------------------------------------------------------------------*/

   .icon-rounded {
       background-color: var(--primario);
       border-radius: 50%;
       padding: 0.5rem;
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }

   .icon-size1 {
       font-size: 80px;
   }

   .icon-size2 {
       font-size: 140px;
   }

   .icon-container {
       font-size: 30px;
       background: var(--primario);
       border-radius: 50%;
       display: inline-flex;
       justify-content: center;
       align-items: center;
       width: 50px;
       color: #fff;
       height: 50px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }


   /*------------------------------------------------------------------
TEXT COLORS
-------------------------------------------------------------------*/

   .text-green {
       color: var(--primario)
   }

   /*------------------------------------------------------------------
BACKGROUNDS
-------------------------------------------------------------------*/
   .bg-green {
       background-color: var(--secundario);
   }

   .bg-principal {
       background-image: url('../img/background-general.jpg');
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       /* height: 80vh;  ⬅️ Elimínalo */
       padding: 4rem 0;
       /* Añade padding para separación vertical */
   }

   /*------------------------------------------------------------------
PADDINGS
-------------------------------------------------------------------*/

   .padding-section {
       padding: 60px 0px;
   }

   /*------------------------------------------------------------------
CONTADOR
-------------------------------------------------------------------*/
   .counter {
       color: #08744F;
       font-size: 3rem;
       transition: all 0.3s ease;
   }

   /*------------------------------------------------------------------
CARDS SERVICIOS
-------------------------------------------------------------------*/

   .custom-card {
       background-color: white;
       border: 2px solid white;
       transition: all 0.4s ease;
       color: #333;
   }

   .custom-card .iconify {
       font-size: 3rem;
       transition: color 0.4s ease;
       color: #08744F;
       /* Verde inicial */
   }

   .custom-card:hover {
       background-color: var(--tercero);
       border-color: var(--tercero);
       color: white;
   }

   .custom-card:hover .iconify {
       color: white;
   }

   .custom-card:hover .link1 {
       color: white;
   }

   .card-text {
       font-size: 18px;
   }

   .custom-card:hover .card-title,
   .custom-card:hover .card-text {
       color: white;
   }

   /*------------------------------------------------------------------
HEADER DE SERVICIOS
-------------------------------------------------------------------*/

   .header-hero {
       background-image: url('../img/bg-naturista-pronaquim.png');
       /* Puedes cambiar a tu imagen */
       background-size: cover;
       background-position: center;
       height: 60vh;
       position: relative;
       padding: 2rem;
   }

   .header-hero::before {
       content: '';
       position: absolute;
       inset: 0;
       background-color: rgba(0, 0, 0, 0.5);
       /* Oscurece la imagen para mayor contraste del texto */
       z-index: 1;
   }

   .header-hero .container {
       position: relative;
       z-index: 2;
   }

   @media (max-width: 768px) {
       .header-hero {
           height: 40vh;
       }

       .header-hero h1 {
           font-size: 2rem;
       }

       .header-hero p {
           font-size: 1rem;
       }
   }

   /*------------------------------------------------------------------
WHATSAPP
-------------------------------------------------------------------*/

   /*whatsapp*/
   .whatsapp-btn {
       position: fixed;
       bottom: 20px;
       left: 20px;
       z-index: 2000;
       display: flex;
       /* Usar flexbox */
       align-items: center;
       /* Centrar verticalmente los elementos */
       color: var(--primario);
       font-weight: bold;
   }

   .dialogue-bubble {
       background-color: white;
       border-radius: 15px;
       padding: 10px;
       margin-left: 10px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
       font-size: 0.9rem;
   }

   .whats {
       background-color: #25D366;
       color: white;
       padding: 10px;
       border-radius: 50%;
       font-size: 24px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   }

   /*------------------------------------------------------------------
FORMULARIO
-------------------------------------------------------------------*/
   .form-pill {
       border-radius: 50rem !important;
       padding-left: 1rem;
       padding-right: 1rem;
       border: 2px solid #08744F !important;
       /* Borde verde personalizado */
   }

   .btn-pill {
       border-radius: 50rem !important;
       font-weight: bold;
   }

   textarea.form-pill {
       border-radius: 2rem !important;
       border: 2px solid #08744F !important;
   }


   /* ======== FIN ANIMACIÓN SUAVE DE DESPLIEGUE ======== */

   /* Slider styles */
   .carousel-item {
       height: 80vh;
       min-height: 400px;
       background-size: cover;
       background-position: center;
       position: relative;
       animation: zoomSlow 20s ease-in-out infinite;
   }

   @keyframes zoomSlow {
       0% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.05);
       }

       100% {
           transform: scale(1);
       }
   }

   .carousel-control-prev-icon,
   .carousel-control-next-icon {
       background-color: #08744F;
       border-radius: 50%;
       width: 50px;
       height: 50px;
       background-size: 60% 60%;
       padding: 10px;
       transition: transform 0.3s ease;
   }

   .carousel-control-prev:hover .carousel-control-prev-icon,
   .carousel-control-next:hover .carousel-control-next-icon {
       transform: scale(1.2);
   }

   /* ======== CONTENIDO AÑADIDO AL SLIDER ======== */
   .carousel-caption-custom {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       text-align: center;
       color: #fff;
       background-color: rgba(0, 0, 0, 0.4);
       padding: 2rem;
       border-radius: 1rem;

       /* ======== TRANSICIÓN AÑADIDA PARA TEXTO DE SLIDES ======== */
       opacity: 0;
       transform: translate(-50%, -50%) scale(0.95);
       transition: all 0.6s ease;
   }

   .carousel-item.active .carousel-caption-custom {
       opacity: 1;
       transform: translate(-50%, -50%) scale(1);
   }

   @media (max-width: 768px) {
       .carousel-caption-custom {
           width: 90%;
           /* Más ancho en móviles */
           padding: 2.5rem 1.5rem;
           /* Más espacio interno */
       }

       .carousel-caption-custom h1 {
           font-size: 1.8rem;
           /* Ajustar tamaño del título en móvil */
       }

       .carousel-caption-custom p {
           font-size: 1.2rem;
           /* Ajustar tamaño del texto */
       }
   }

   /* ======== FIN DEL CONTENIDO AÑADIDO ======== */

   .btn-capsule {
       border-radius: 50rem;
       padding: 0.5rem 1.5rem;
       font-weight: bold;
       margin: 0 0.5rem;
   }


   .custom-accordion .accordion-button {
    background-color: var(--secundario); /* Verde claro */
    color: #1a3e1f;
    font-weight: 600;
    font-size: 22px;
  }
  
  .custom-accordion .accordion-button:not(.collapsed) {
    background-color: var(--secundario); /* Verde más fuerte al estar abierto */
    color: #0f2f0d;
  }
  
  .custom-accordion .accordion-body {
    background-color: #fff;
    font-size: 20px;
    color: #333;
  }