*{
  margin:0;
  padding:0;
  box-sizing:border-box;
 font-family: 'Manrope', sans-serif;
}


/* HERO */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:80px 5%;
  color: white;
  overflow: hidden;


  background-image:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url("../img/fondo_suave.avif");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Opcional */
}

.hero h1{
 font-family: 'Manrope', sans-serif;
  font-size:clamp(2.5rem,6vw,5rem);
  line-height:1.1;
  margin-bottom:20px;
  font-weight:800;
  color:#fff;
}

.hero h1 span{
  color:var(--accent);
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

.hero p{
  font-family:'Open Sans', sans-serif;
  max-width:650px;
  font-size:1.1rem;
  line-height:1.7;
  margin-bottom:35px;
  opacity:.95;
  color:var(--text);
}

/* LOGOS  */
.logo-marquee{
  
  font-family:'Open Sans', sans-serif;
  overflow:hidden;
  position:relative;
  padding:40px 0;
  background:#f4f0f0;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
}

/* El carril que se mueve */
.marquee-track {
  display: flex;
  width: max-content;
  /* Animación aplicada SOLO aquí */
  animation: scroll 20s linear infinite;
  align-items: center;
}

/* Los logos */
.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border-radius: 16px;
  padding: 10px 20px; /* Reducido para que el componente sea más delgado */
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  margin-right: 40px; /* Espacio entre logos */
  height: 60px;       /* Altura fija para que no se deforme */
  min-width: 150px;   /* Ancho mínimo para que todos tengan el mismo espacio */
}

.logo-item img {
  max-height: 40px;   /* Logo más pequeño para que quepa bien */
  object-fit: contain;
}

/* Animación de desplazamiento */
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } 
}


/* BOTÓN */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 32px;
  border-radius:50px;
  background:var(--accent);
  color:#fff;
  font-family:'Open Sans', sans-serif;
  font-weight:700;
  font-size:1rem;
  border:none;
  cursor:pointer;
  transition:.3s;
  box-shadow:0 6px 18px rgb(36, 35, 35);
  text-align:center;
  margin-top:20px;
  text-decoration:none;
  min-width:200px;
  max-width:200px;
}

.btn:hover{
  transform:translateY(-4px) scale(1.05);
  background:var(--secondary);
  box-shadow:0 8px 22px rgba(22, 83, 227, 0.867);
}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero{
    padding:100px 8%;
  }

  .logo-item img{
    max-height:60px;
  }
}

@media(max-width:768px){
  .hero{
    padding:90px 20px;
    text-align:center;
    align-items:center;
  }

  .hero h1{
    font-size:clamp(2rem,8vw,3.5rem);
  }

  .logo-item img{
    max-height:55px;
  }
}

@media(max-width:480px){
  .hero{
    padding:70px 15px;
  }

  .hero p{
    font-size:1rem;
  }

  .btn{
    padding:12px 24px;
    font-size:.95rem;
  }

  .logo-item img{
    max-height:50px;
  }
}