/* ===== SECCIÓN MARCAS ===== */
.seccion-marcas {
  padding-bottom: clamp(30px, 6vw, 70px);
}

.marcas {
  padding: clamp(40px, 8vw, 100px) clamp(15px, 5vw, 60px);
  background: linear-gradient(135deg, var(--white) 0%, var(--medium-gray) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor {
  margin: 0 auto;
  text-align: center;
  max-width: clamp(320px, 90vw, 1100px);
}

.contenedor h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  color: #003366;
  margin-bottom: clamp(20px, 3vw, 40px);
  position: relative;
  display: inline-block;
  line-height: 1.2;
}

/* Subrayado decorativo debajo del título */
.contenedor h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 40%, 300px);
  height: clamp(2px, 0.5vw, 3px);
  background: linear-gradient(to right, #2067af 20%, #e71919 20%, #e71919 80%, #2067af 80%);
  border-radius: 2px;
}

/* ===== DESCRIPCIÓN ===== */
.descripcion {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: clamp(1.6, 2vw, 1.9);
  margin-bottom: clamp(15px, 3vw, 30px);
  text-align: center;
  color: #495057;
  max-width: clamp(600px, 80vw, 900px);
  margin-left: auto;
  margin-right: auto;
  font-family: 'Open Sans', sans-serif;
  padding: 0 clamp(10px, 5vw, 30px);
}

.descripcion p {
  margin-bottom: clamp(10px, 2vw, 20px);
}



/* SLIDER */

.slider {
    width: 100%;
    height: 150px; /* Altura fija recomendada */
    overflow: hidden;
    position: relative;
    
}

.slider .slide-track {
    display: flex;
    animation: scroll 20s linear infinite;
    width: calc(200px * 18); /* 9 imágenes originales + 9 duplicadas = 18 */
}

.slider .slide {
    width: 200px;
    flex-shrink: 0; /* Evita que las imágenes se encojan */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* Elimina márgenes */
    padding: 0; /* Elimina padding interno */
}

.slider .slide img {
    width: 100%; /* Ajusta el tamaño de la imagen dentro del slide */
    height: auto;
    object-fit: contain;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-200px * 9)); /* Mueve solo el ancho de 9 imágenes */
    }
}