/* === BOTÓN ANIMADO === */ 
.mi-boton { 
  position: relative; 
  display: inline-block; 
  padding: 12px 30px; 
  font-size: 16px; 
  font-weight: 600; 
  color: #c50000 !important; 
  background: none !important; 
  border: 2px solid #c50000; 
  cursor: pointer; 
  overflow: hidden; 
  transition: color 0.4s ease; 
  z-index: 1; 
  border-radius: 4px; 
  text-decoration: none !important; 
} 

.mi-boton::before { 
  content: ""; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 0; 
  height: 0; 
  background: #c50000; 
  border-radius: 100%; 
  transform: translate(-50%, -50%); 
  transition: width 0.5s ease, height 0.5s ease; 
  z-index: -1; 
} 

.mi-boton:hover::before { 
  width: 300%; 
  height: 300%; 
} 

.mi-boton:hover { 
  color: #ffffff !important; 
} 

/* === PRELOADER CON LOGO BLANCO Y FONDO ROJO === */ 
#preloader { 
  background-color: #c50000; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  z-index: 9999; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 

#preloader img { 
  width: 120px; 
  height: auto; 
  animation: preloaderFade 2s ease-in-out infinite; 
} 

@keyframes preloaderFade { 
  0%, 100% { 
    opacity: 1; 
    transform: scale(1); 
  } 
  50% { 
    opacity: 0.5; 
    transform: scale(1.1); 
  } 
}

/* === CARRUSEL DE LOGOS === */ 

/* Contenedor principal del carrusel */ 
.marcas-container { 
  overflow: hidden; 
  width: 100%; 
  margin: 40px 0; 
} 

/* Fila de logos */ 
.marcas-row { 
  display: flex; 
  white-space: nowrap; 
  animation: carrusel-movimiento 20s linear infinite; 
} 

/* Segunda fila con animación en dirección opuesta */ 
.row2 { 
  animation: carrusel-movimiento-inverso 20s linear infinite; 
} 

/* Estilo de las imágenes */ 
.marcas-row img { 
  height: 80px; 
  margin: 0 60px; 
  flex-shrink: 0; 
  /* Agregamos el filtro de escala de grises y la transición */
  filter: grayscale(100%);
  transition: transform 0.3s ease, filter 0.3s ease; 
} 

/* Efecto al pasar el cursor por encima */ 
.marcas-row img:hover { 
  /* Mantiene el zoom */
  transform: scale(1.1); 
  /* Elimina el filtro para mostrar el color original */
  filter: grayscale(0%);
} 

/* Definición de la animación de movimiento normal */ 
@keyframes carrusel-movimiento { 
  from { 
    transform: translateX(0); 
  } 
  to { 
    transform: translateX(-50%); 
  } 
} 

/* Definición de la animación de movimiento inverso */ 
@keyframes carrusel-movimiento-inverso { 
  from { 
    transform: translateX(-50%); 
  } 
  to { 
    transform: translateX(0); 
  } 
}
//* Contenedor del slider */
.slider {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 250px;
  margin: auto;
  overflow: hidden;
  border-radius: 8px;
}

/* Contenedor de todas las imágenes */
.slides {
  display: flex;
  width: 400%; /* Sigue siendo 400% porque contiene las 4 imágenes */
  height: 100%;
  animation: slide 16s infinite;
}

/* Imágenes: cada una debe ocupar el 25% del contenedor */
.slides img {
  width: 25%; /* CADA IMAGEN AHORA OCUPA UN 25% DEL CONTENEDOR */
  height: 100%;
  object-fit: cover;
}

/* Animación automática */
@keyframes slide {
  0%   { transform: translateX(0%); }
  20%  { transform: translateX(0%); }

  25%  { transform: translateX(-25%); } /* AVANZA 1/4 (25%) */
  45%  { transform: translateX(-25%); }

  50%  { transform: translateX(-50%); } /* AVANZA 2/4 (50%) */
  70%  { transform: translateX(-50%); }

  75%  { transform: translateX(-75%); } /* AVANZA 3/4 (75%) */
  95%  { transform: translateX(-75%); }

  100% { transform: translateX(0%); }
}
/* Estilo inicial de los íconos */
.ssc-col i {
    font-size: 30px !important; 
    color: #000000 !important; /* Color inicial del ícono */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Sombra para que se vea */
    transition: transform 0.3s ease;
}

/* Efecto al pasar el mouse por encima */
.ssc-col i:hover {
    transform: scale(1.5); 
}
/* Estilos para pantallas de celulares (ancho máximo de 767px) */
@media (max-width: 767px) {

  /* Ajusta el banner principal */
  .ssc-flex-row.ssc-flex-wrap.ssc-justify-start.ssc-align-start[style*="background-color: rgb(197, 0, 0)"] {
    flex-direction: column !important;
    padding: 20px 10px !important;
  }

  .ssc-col img[src*="CHICALUBRI.webp"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .ssc-flex.ssc-flex-column.ssc-flex-wrap.ssc-justify-center.ssc-align-center h2 {
    font-size: 20px !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Ajustes para el texto y los botones principales */
  .ssc-flex-column h3 {
    font-size: 16px !important; 
    padding: 0 10px !important;
  }

  .ssc-flex-row {
    flex-direction: column !important;
    gap: 15px !important;
    align-items: center !important;
    padding: 0 15px !important;
  }

  .mi-boton {
      width: 100% !important;
      padding: 15px !important;
  }

  /* Estilo para el carrusel de logos de marcas */
  .marcas-row img {
      height: 60px !important; 
      margin: 0 20px !important;
  }

  .marcas-row {
      animation: carrusel-movimiento 15s linear infinite !important;
  }

  /* Estilo para el banner animado (slider de banners) */
  .slider {
    height: 180px !important; 
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .slides {
    width: 400% !important; 
    height: 100% !important;
    animation: slide-movil 16s infinite !important; 
  }

  .slides img {
    width: 25% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Animación para el slider de banners */
  @keyframes slide-movil {
    0%   { transform: translateX(0%); }
    20%  { transform: translateX(0%); }
    25%  { transform: translateX(-25%); } 
    45%  { transform: translateX(-25%); }
    50%  { transform: translateX(-50%); } 
    70%  { transform: translateX(-50%); }
    75%  { transform: translateX(-75%); }
    95%  { transform: translateX(-75%); }
    100% { transform: translateX(0%); }
  }
}