/* Estilos modernos y minimalistas para los nav-link */
    .navbar .nav-link {
        position: relative;
        padding: 0.5rem 1rem;
        color: rgba(0, 0, 0, 0.7) !important;
        font-weight: 300;
        transition: all 0.3s ease;
    }
    
    /* Efecto hover principal - cambio de color suave */
    .navbar .nav-link:hover {
        color: #000;
    }
    
    /* Efecto de línea que aparece desde abajo */
    .navbar .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        background-color: #000 !important;
        transition: all 0.3s ease;
        transform: translateX(-50%);
        opacity: 0;
    }
    
    .navbar .nav-link:hover::after {
        width: 70% !important;
        opacity: 1;
    }
    
    /* Efecto sutil de elevación */
    .navbar .nav-link:hover {
        transform: translateY(-2px);
    }
    
    /* Estilo para el enlace activo */
    .navbar .nav-link.active {
        color: #000 !important;
        font-weight: 500;
    }
    
    .navbar .nav-link.active::after {
        width: 70% !important;
        opacity: 1;
    }
    
    /* Versión para modo oscuro o cuando el navbar tiene fondo oscuro */
    .navbar.bg-dark .nav-link,
    .navbar.scrolled .nav-link {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .navbar.bg-dark .nav-link:hover,
    .navbar.scrolled .nav-link:hover {
        color: #fff;
    }
    
    .navbar.bg-dark .nav-link::after,
    .navbar.scrolled .nav-link::after {
        background-color: #fff;
    }
    
    .navbar.bg-dark .nav-link.active,
    .navbar.scrolled .nav-link.active {
        color: #fff;
    }

    /* Estilos galeria de imagenes */
    #gallery {
        position: relative;
        height: 100vh;
        width: 100%;
        background-color: #f8f9fa;
        z-index: 1;
        overflow: hidden !important; /* Cambiado a hidden para controlar mejor lo que se ve */
      }
      
      /* Clase para fijar la galería durante el scroll */
      .gallery-fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9000;
      }
      
      /* Espacio para compensar cuando la galería está fija */
      .gallery-spacer {
        height: 100vh;
        display: none;
      }
      
      .gallery-track {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        z-index: 2;
      }
      
      .gallery-container {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        will-change: transform;
        transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 3;
      }
      
      .gallery-item {
        flex: 0 0 auto;
        height: 70vh;
        width: 55vw;
        margin: 0 2vw;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 80;
        position: relative;
        visibility: visible; /* Asegura que sea visible por defecto */
        opacity: 1;
        transform: scale(1);
      }
      
      /* Solo visible cuando esté en viewport */
      .gallery-item.out-of-view {
        opacity: 0.5;
        transform: scale(0.95);
        transition: all 0.5s ease;
      }
      
      .gallery-item:first-child {
        margin-left: 10vw;
      }
      
      .gallery-item:last-child {
        margin-right: 10vw;
      }
      
      .gallery-item img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      }
      
      .gallery-item:hover {
        transform: translateY(-15px);
        z-index: 10000;
      }
      
      .gallery-item:hover img {
        transform: scale(1.05);
      }
      
      /* Indicador de progreso */
      .progress-container {
        position: absolute;
        bottom: 5vh;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9998;
      }
      
      .progress-bar {
        width: 150px;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        overflow: hidden;
        margin: 0 10px;
      }
      
      .progress {
        height: 100%;
        width: 0;
        background-color: #212529;
        transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      }
      
      /* Flechas de navegación */
      .nav-arrows {
        position: absolute;
        bottom: 5vh;
        display: flex;
        align-items: center;
        color: #212529;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1px;
        z-index: 9998;
      }
      
      .nav-arrow {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        cursor: pointer;
        font-size: 18px;
      }
      
      .nav-arrow:hover {
        background-color: rgba(0, 0, 0, 0.1);
      }
      
      /* Responsive */
      @media (max-width: 768px) {
        .gallery-item {
          width: 80vw;
          height: 55vh;
        }
        
        .gallery-item:first-child {
          margin-left: 10vw;
        }
        
        /* En móviles, mostrar solo un elemento a la vez */
        #gallery {
          overflow-x: hidden;
        }
      }
      
      /* Aseguramos que la galería esté por encima de todo cuando está fija */
      body .gallery-fixed {
        z-index: 9000 !important;
      }
      
      body .gallery-fixed .gallery-item {
        z-index: 9999 !important;
      }
      
      /* Evitamos que otros elementos tapen la galería */
      #gallery ~ * {
        position: relative;
        z-index: 1;
      }

    /* Estilos para la sección de FAQs */
    #faqs {
        position: relative;
        overflow: hidden;
        padding: 4rem 0;
      }
      
      .faq-container {
        margin-top: 1rem;
      }
      
      .faq-item {
        margin-bottom: 0.75rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }
      
      .faq-question {
        position: relative;
        padding: 1rem 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
        font-weight: 500;
        color: #212529;
        transition: all 0.3s ease;
      }
      
      .faq-question span {
        flex: 1;
        padding-right: 2rem;
      }
      
      .faq-icon {
        position: relative;
        width: 14px;
        height: 14px;
        transition: transform 0.3s ease;
      }
      
      .faq-icon:before,
      .faq-icon:after {
        content: '';
        position: absolute;
        background-color: #212529;
        transition: all 0.3s ease;
      }
      
      .faq-icon:before {
        top: 6px;
        left: 0;
        width: 14px;
        height: 2px;
      }
      
      .faq-icon:after {
        top: 0;
        left: 6px;
        width: 2px;
        height: 14px;
      }
      
      .faq-item.active .faq-icon:after {
        transform: rotate(90deg);
        opacity: 0;
      }
      
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease, padding 0.3s ease;
        padding: 0 0;
        font-size: 0.95rem;
        color: #6c757d;
      }
      
      .faq-item.active .faq-answer {
        max-height: 1000px;
        padding-bottom: 1.5rem;
      }
      
      .faq-answer p {
        margin-bottom: 0.75rem;
      }
      
      .faq-answer ul {
        padding-left: 1.2rem;
        margin-bottom: 0.75rem;
      }
      
      .faq-answer li {
        margin-bottom: 0.4rem;
      }
      
      /* Hover effects */
      .faq-question:hover {
        color: #000;
      }
      
      .faq-question:hover .faq-icon:before,
      .faq-question:hover .faq-icon:after {
        background-color: #000;
      }
      
      /* Responsive styles */
      @media (max-width: 768px) {
        .faq-question {
          font-size: 0.95rem;
        }
        
        .faq-answer {
          font-size: 0.9rem;
        }
      }


/* Estilos para el banner parallax */
/* Estilos para el banner parallax usando solo CSS */
.parallax-banner {
  position: relative;
  height: 500px;
  overflow: hidden;
  z-index: 1;
  margin: 0;
  padding: 0;
  /* Habilitamos la perspectiva para el efecto 3D */
  perspective: 1px;
  transform-style: preserve-3d;
}

.parallax-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 120%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/img_1.jpg');
  background-size: cover;
  background-position: center center;
  /* El truco está en este transform */
  transform: translateZ(-1px) scale(2);
  /* La imagen se posiciona más atrás creando el efecto parallax */
  z-index: -1;
}

.parallax-content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
  /* Este transform coloca el contenido al frente */
  transform: translateZ(0);
}

.floating-element {
  position: relative;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.floating-element:hover {
  transform: translateY(-10px);
}

/* Resto de estilos se mantienen igual */
.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #212529;
  color: white;
  flex-shrink: 0;
}

/* Botón con ancho ajustado */
.parallax-banner .btn-light {
  padding-left: 1.7rem;
  padding-right: 1.7rem;
  min-width: auto;
  max-width: 300px;
}

/* Responsive */
@media (max-width: 992px) {
  .parallax-banner {
    height: 450px;
  }
}

@media (max-width: 768px) {
  .parallax-banner {
    height: 400px;
  }
  
  .parallax-banner .btn-light {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  /* En dispositivos móviles, el parallax puede causar problemas */
  .parallax-banner {
    perspective: none;
  }
  
  .parallax-background {
    transform: none;
  }
}

  /* Estilos sección Contacto */
  .contact-form-section {
    background-color: #f8f9fa;
    position: relative;
  }
  
  .contact-form-section .card {
    transition: all 0.3s ease;
  }
  
  .contact-form-section .card-body {
    padding: 3rem;
  }
  
  .contact-form-section .form-control,
  .contact-form-section .form-select {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1rem 0.75rem;
    color: #212529;
    background-color: transparent;
    transition: all 0.3s ease;
    width: 100%; /* Asegura que todos los campos tengan el mismo ancho */
  }
  
  .contact-form-section .form-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
  }
  
  .contact-form-section .form-control:focus,
  .contact-form-section .form-select:focus {
    box-shadow: none;
    border-color: #212529;
    background-color: rgba(0, 0, 0, 0.01);
  }
  
  .contact-form-section .form-floating {
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
  }
  
  .contact-form-section .form-floating label {
    padding-left: 0.75rem;
    color: #6c757d;
  }
  
  .contact-form-section textarea.form-control {
    min-height: 120px;
    resize: none;
  }
  
  .contact-form-section .btn-dark {
    background-color: #212529;
    border: none;
    border-radius: 0;
    padding: 0.8rem 3rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
  }
  
  .contact-form-section .btn-dark:hover {
    background-color: #000;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  /* Estilos específicos para corregir el problema del select */
  .contact-form-section .form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
    font-size: 16px;
    color: #555b61 !important;
    font-family: 'Inter', sans-serif;
  }
  
  .contact-form-section .form-floating > .form-select ~ label {
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
    background-color: transparent;
    height: auto;
  }
  
  .contact-form-section .form-floating > .form-select:focus ~ label {
    opacity: 1;
    color: #6c757d;
    opacity: 0.65;
  }
  
  .form-floating > .form-select:not(:placeholder-shown) ~ label {
    font-size: 20px !important;
  }
  
  /* Asegurar que el texto del select sea visible */
  .contact-form-section .form-select {
    color: #212529;
    font-weight: 400;
    margin-top: 15px;
    border: none;
    outline: none;
  }
  
  .form-floating {
    margin-top: 25px;
  }
  
  /* Ajustar el padding para evitar superposiciones */
  .contact-form-section .form-floating > label {
    padding: 1rem 0.75rem;
    height: auto;
    pointer-events: none;
  }
  
  /* Mejorar la transición */
  .contact-form-section .form-floating > label {
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
  }
  
  /* Mejoras responsivas */
  @media (max-width: 768px) {
    .contact-form-section .card-body {
      padding: 2rem;
    }
    
    .contact-form-section .row {
      margin: 0;
    }
    
    .contact-form-section .col-md-6 {
      padding: 0;
    }
  }