/* icono menu */
      .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        background-size: 100% 100%;
   
        
      }

      .navbar-toggler {
        width: 44px;
        height: 44px;
        border: none !important;
        box-shadow: none !important;
      }

      .hover-text {
        transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
      }

      .hover-text:hover {
        color: #D0FDD7 !important;
        transform: scale(1.05);
        box-shadow: 0 0.75rem 1.5rem #005696;
        border-radius: 20px;
        padding: 10px 10px; 
        z-index: 1;
      }

      .icon-menu {
        fill: currentColor !important;
        transition: fill 0.3s ease;
      }
  
       /*colores de los iconos*/
      .icon-motivo{
          color: #3e64ff !important;

      }

        .btn.btn-primary {
        background-color: #005696 !important;
        border-color: #005696 !important;
  
      }

      @media (max-width: 992px) {
        .navbar-nav .nav-link {
          color: #005696  !important;
        }
      }


  
      /*seccion Slider*/
      .carousel-inner {
        max-height: 750px; 
      }


      .carousel-item {
        position: relative;
      }

      .carousel-caption {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        color: #ffffff;
        
      }

      /*efecto de zoom en el texto del slider */
      .carousel-caption h5, h1 {
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
        
      }

      .carousel-caption h5, h1 {
        animation: zoomIn 0.8s ease-out;
      }

       /***********/



      .carousel-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1;
      }

      .carousel-img {
        height: 400px; 
        object-fit: cover;
        width: 100%;
      }

      @media (min-width: 1621px) {
        .carousel-item img {
          height: 800px; 

        }
      }

      /* Para pantallas de hasta 1024px */
      @media (max-width: 1024px) {
        .carousel-item img {
          height: 300px; 

        }

        .responsive-heading {
          padding-top: 0px !important;
          font-size: 1.2rem !important; 
        }
      }

      /* Para pantallas de hasta 768px (tablets y móviles) */
      @media (max-width: 768px) {
        .carousel-img {
          height: 250px !important;
          object-fit: cover;
          width: 100%;
          
        }

        .carousel-caption{
          top: 55%;
        }

        .responsive-heading {
          font-size: 1rem !important; /* Más pequeño para móviles */
        }
      }


      /* animacion de serviicos complementarios */
      .box {
        position: relative;
        /* Al iniciar está más abajo y transparente */
        opacity: 0;
        transform: translateY(50px);
        animation: subir 5s forwards; /* utilizo 'forwards' para mantener el estado final */
      }

      @keyframes subir {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /*animacion de por qué elegirnos*/

       .box-despues {
          position: relative;
          opacity: 0;
          transform: translateY(50px);
          /* aquí hago un stop para agrgar la clase y este hace la animacion guiño guiño */
        }

        .box-despues.animate {
          animation: subir 3s forwards; /* pondré 3 para que no sea tan lento la duración*/ 
          animation-delay: 0s; /* retraso de 0 segundos antes de iniciar la animación */
        }

        @keyframes subir {
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

      .card-title{
        font-size: 20px;
        font-weight: 600;
        text-align: center;
       
      }

      .card-text{
        text-align: center;
        
      }

      .card-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease ;
    }

   

    .card-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
    z-index: 1 ;
    }

   

    .animation-texto {
    animation: mover-izquierda-derecha 2s infinite;
    }

    @keyframes mover-izquierda-derecha {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(30px);
    }
    100% {
        transform: translateX(0);
    }

    }

    @keyframes zoomIn {
      0% {
        opacity: 0;
        transform: scale(0.8);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }


    /*NUESTROS CLIENTES*/
    .slider {
    overflow: hidden;
    position: relative;
    }

    .slide-track {
    display: flex;
    width: calc(300px * 10); 
    animation: scroll-horizontal 30s linear infinite;
    }

    .slide-clientes {
    width: 300px; 
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .slide-clientes img {
    width: 100%;
    max-height: 80px;
    object-fit: contain;
    }

    @keyframes scroll-horizontal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
    }

  .icon-footer {
  color: white !important;
  }


/*alcance de Quienes Somos*/
@keyframes deslizarIzquierda {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animacion-izquierda {
  animation: deslizarIzquierda 5s ease-out;
}

@keyframes deslizarDerecha {
  from {
    opacity: 0;
    transform: translateX(100px); 
  }
  to {
    opacity: 1;
    transform: translateX(0); 
  }
}

.animacion-derecha {
  animation: deslizarDerecha 7s ease-out;
}

.degradado {
  background-image: linear-gradient(to right,  #005696);
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

#financieros, #contables, #administrativos,#talentohumano, #iso9001, #basc, #crediticio, #firma{
   scroll-margin-top: 105px;
}

/* === ESTILOS MEJORADOS PARA EL CARRUSEL DE CLIENTES === */

.slider {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slide-track {
  display: flex;
  /* La anchura se calcula: (ancho del slide) x (número total de slides, incluyendo las copias) */
  /* En este caso: 250px * 16 slides = 4000px */
  width: 4000px; 
  animation: scroll-horizontal 30s linear infinite;
}

.slide-clientes {
  /* Ancho de cada "caja" de logo */
  width: 250px;
  height: 120px; /* Altura fija para el contenedor */
  padding: 0 15px;
  /* Usamos flexbox para centrar el logo perfectamente */
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-cliente-img {
  max-width: 100%;
  max-height: 80px; 
  width: auto; 
  object-fit: contain; 
  opacity: 1; /* <-- CAMBIADO: Opacidad completa por defecto */
  transition: transform 0.3s ease; /* Transición solo para el zoom */
}

.slide-clientes:hover .logo-cliente-img {
  transform: scale(1.1); /* Mantenemos el sutil efecto de zoom */
}

@keyframes scroll-horizontal {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Mueve el carrusel la mitad de su anchura total para un loop perfecto */
    transform: translateX(-50%);
  }
}

/* --- RESPONSIVIDAD PARA MÓVILES --- */
@media (max-width: 768px) {
  .slide-track {
    /* Nuevo cálculo para móviles: 180px * 16 slides = 2880px */
    width: 2880px; 
    animation-duration: 25s; /* Un poco más rápido en móviles */
  }

  .slide-clientes {
    /* Hacemos las cajas de los logos más pequeñas */
    width: 180px; 
  }
}