/* ================================
   🎨 CONFIGURACIÓN DE COLORES
   ================================
   Aquí puedes personalizar los colores principales del sitio
*/
:root {
  --color-primario: #1051A1;
  --color-secundario: #6c757d;
  --color-amarillo: #ffc107;
  --color-gris-fondo: #f8f9fa;
  --color-footer: #1051A1;
  --color-footer-texto: #ffffff;
}

/* ================================
   🟨 Barra superior amarilla
   ================================ */
.bg-warning {
  background-color: var(--color-amarillo) !important;
}


/* ================================
   🎠 Carrusel horizontal de logos
   ================================ */
   .scroll-carousel {
    overflow: hidden;
    position: relative;
    background-color: #fff;
    width: 100%; /* Asegura que el carrusel ocupe todo el ancho de su contenedor */
  }
  
  .scroll-wrapper {
    display: flex;
    animation: scroll-left 80s linear infinite; /* Mantener la velocidad a 60 segundos por ciclo */
    width: max-content; /* Asegura que el ancho total del wrapper cubra el contenido */
  }
  
  .scroll-item {
    width: 100px; /* Mantenemos el tamaño de las imágenes a 100x100px */
    height: 100px;
    margin: 0 5px; /* Espacio entre las imágenes */
    transition: transform 0.3s ease; /* Transición más suave en el agrandamiento */
  }
  
  .scroll-item:hover {
    transform: scale(1.1); /* Efecto de agrandamiento */
    /* No pausamos la animación del carrusel */
  }
  
  /* Animación del carrusel */
  @keyframes scroll-left {
    0% {
      transform: translateX(0); /* Comienza desde la posición inicial */
    }
    100% {
      transform: translateX(-50%); /* Desplaza el contenido por todo el ancho del contenedor */
    }
  }
  


/* Estilo para los elementos del menú con "Uniformes" */
/* Aseguramos que los elementos con "Uniformes" se muestren en dos líneas */
.uniform-item {
  display: block;
  text-align: center;
  line-height: 1.2;  /* Ajusta el espacio entre las líneas */
  white-space: normal; /* Permite que el texto se divida en múltiples líneas */
  word-wrap: break-word; /* Asegura que el texto se divida adecuadamente */
  font-size: 1rem;
}

/* Para que la palabra 'Uniformes' esté en la primera línea y el siguiente término en la segunda */
.uniform-item::before {
  content: "Uniformes";
  display: block;
  font-weight: normal; /* No poner en negrita */
  font-size: 1rem;
  text-transform: capitalize;
  margin-bottom: 0.3rem;  /* Añadimos un pequeño espacio entre 'Uniformes' y el siguiente término */
}

.uniform-item::after {
  content: attr(data-second); /* Contenido del segundo término */
  display: block;
  font-size: 1rem;
  text-transform: capitalize;
  font-weight: normal; /* No negrita para la segunda parte */
  margin-top: 0.3rem;  /* Añadimos un pequeño margen arriba */
}

/* Menú de navegación con items alineados hacia el centro */
.nav-item .nav-link {
  display: block;
  text-align: center;
  height: 100%; /* Para asegurarse de que el contenedor tiene altura completa */
}

/* Alineación para los items sin 'Uniformes' */
.nav-item .nav-link:not(.uniform-item) {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Alinea el texto al fondo */
  padding-bottom: 10px; /* Espacio inferior */
  text-align: center;
}

/* Estilo en pantallas grandes para asegurarse de que el texto con "uniformes" se divida en dos líneas */
@media (min-width: 768px) {
  .uniform-item {
    white-space: normal;
    line-height: 1.5;  /* Añadimos un poco de espacio entre las líneas */
    font-size: 1rem;  /* Ajustamos el tamaño para mantenerlo legible */
  }

  /* Alineación de los items sin "Uniformes" en la parte inferior */
  .nav-item .nav-link:not(.uniform-item) {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Alinea el texto al fondo */
    padding-bottom: 10px;
    text-align: center;
  }
}


/* Estilo específico para el carrusel de logos */
.logo-carousel-container {
  max-width: 600px;   /* Ajusta el ancho máximo a lo que desees */
  margin: 0 auto;     /* Centra el carrusel */
}

/* Asegura que las imágenes dentro del carrusel de logos tengan el tamaño adecuado */
.logo-carousel-container .carousel-item img {
  width: 200px;        /* Ajusta el tamaño de las imágenes */
  height: 200px;
  object-fit: contain;  /* Mantiene la relación de aspecto de la imagen */
}

/* Opcional: Puedes ajustar las flechas de navegación si lo necesitas */
.logo-carousel-container .carousel-control-prev,
.logo-carousel-container .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}



/* ================================
    Footer personalizado
   ================================ */
footer {
  background-color: var(--color-footer);
  color: var(--color-footer-texto);
}

footer a {
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}


.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--color-primario);
	--bs-btn-border-color:  var(--color-primario);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #0b5ed7;
	--bs-btn-hover-border-color: #0a58ca;
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #0a58ca;
	--bs-btn-active-border-color: #0a53be;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #0d6efd;
	--bs-btn-disabled-border-color: #0d6efd;
}

.text-primary{
  color: var(--color-primario) !important
}

.card-img-top{
  width: 215px;
}


/* [1] The container */
.img-hover-zoom {
  height: 481px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* Slow-motion Zoom Container */
.img-hover-zoom--slowmo img {
  transform-origin: 50% 50%;
  transition: transform 5s, filter 3s ease-in-out;
  /*filter: brightness(150%);*/
}

/* The Transformation */
.img-hover-zoom--slowmo:hover img {
  /*filter: brightness(100%);*/
  transform: scale(1.3);
}