:root {
  --ribatech-azul: #1b3661;        /* azul oscuro elegante */
  --ribatech-azul-claro: #2e4368;  /* hover suave */
  --ribatech-acento: #3f8fa3;      /* turquesa apagado */
  --ribatech-turquesa: #1aa0bf;
  --ribatech-gris: #f2f2f2;
  --ribatech-texto: #222;
}

/* RESET */
body{
  margin:0;
  font-family:Arial, sans-serif;
  background:var(--gris);
}

/* HERO */
.hero{
  position:relative;
    height:90vh;

  overflow:hidden;
}

/* Imagen más profesional */
.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* Contenido elegante */
.hero-content{
  position:absolute;
  top:70%;
  left:8%;
    right:8%;

  transform:translateY(-50%);
  color:white;
  max-width:500px;
}
@media (max-width: 768px) {
  .hero{
  height:60vh;
}
  .hero-img{
    height: 60vh;

  }
  .hero-content{
  top:60%;
 
}
}
.hero h1{
  font-size:52px;
  margin-bottom:10px;
  letter-spacing:1px;
    color:var(--ribatech-gris);

}

.hero p{
  font-size:18px;
  margin-bottom:25px;
  line-height:1.4;
}

/* Botones */
.hero-buttons{
  display:flex;
  gap:15px;
}

.btn{
  padding:12px 25px;
  background:#3f8fa3;
  color:white;
  text-decoration:none;
  border-radius:5px;
  font-weight:600;
  transition:0.3s;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-outline{
  background:transparent;
  border:2px solid white;
}

.btn-outline:hover{
  background:white;
  color:#1b3661;
}

/* COLECCIONES */
.colecciones{
  padding:60px 20px;
  text-align:center;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:25px;
  margin-top:30px;
}

.card{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  cursor:pointer;
}

.card img{
  width:100%;
  height:350px;
  object-fit:cover;
  transition:0.5s;
}

.card-info{
  position:absolute;
  bottom:0;
  background:rgba(0,0,0,0.6);
  color:white;
  width:100%;
  padding:15px;
  transition:0.3s;
}

.card:hover img{
  transform:scale(1.1);
}

.card h3{
  color: var(--ribatech-gris);
}

/* OVERLAY OSCURO */
.card-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);

  display:flex;
  justify-content:center;
  align-items:center;

  opacity:0;
  transition:0.4s;
}

/* BOTÓN */
.btn-card{
  padding:12px 25px;
  background:var(--ribatech-acento);
  color:white;
  text-decoration:none;
  border-radius:5px;
  font-weight:600;
  transform:translateY(20px);
  opacity:0;
  transition:0.3s;
}

/* HOVER */
.card:hover .card-overlay{
  opacity:1;
}

.card:hover .btn-card{
  transform:translateY(0);
  opacity:1;
}

/* OPCIONAL: oscurecer imagen */
.card:hover img{
  transform:scale(1.1);
  filter:brightness(0.6);
}
/* DESTACADOS */
.destacados{
  margin: 20px;
}
.carousel{
  position:relative;
  max-width:1200px;
  margin:60px auto;
  overflow:hidden;
}

/* TRACK */
.carousel-track{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  transition:0.5s ease;
}

/* ITEM */
.carousel-item{
  position:relative;
  flex:0 0 300px;
  height:400px;
  border-radius:15px;
  overflow:hidden;
  transition:0.5s;
  filter:blur(2px);
  transform:scale(0.85);
  opacity:0.6;

  position: relative;
  z-index: 1;

}

/* ACTIVO (EL DEL CENTRO) */
.carousel-item.active{
  flex:0 0 620px;
  filter:none;
  transform:scale(1);
  opacity:1;
  z-index:2;
}

/* IMAGEN */
.carousel-item img{
  width:100%;
  height:100%;
  object-fit:fill;
}

/* OVERLAY TEXTO */
.info{
  position:absolute;
  bottom:0;
  width:100%;
  padding:20px;
  color:white;
  background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.info h3{
 color: var(--ribatech-gris)
}

/* BOTONES */
.nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  
  background:var(--ribatech-turquesa);
  backdrop-filter:blur(6px);
  
  color:white;
  border:none;
  font-size:22px;
  
  width:45px;
  height:45px;
  border-radius:50%;
  
  display:flex;
  align-items:center;
  justify-content:center;
  
  cursor:pointer;
  transition:0.3s;


  z-index: 10; /* por encima de las imágenes */



}

/* Hover elegante */
.nav:hover{
  background:rgba(255,255,255,0.3);
  transform:translateY(-50%) scale(1.1);
}

.prev{ left:10px; }
.next{ right:10px; }

.nav:hover{
  background:rgba(0,0,0,0.7);
}
/* CTA */
.cta{
  background:var(--ribatech-azul);
  color:white;
  text-align:center;
  padding:60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;

}
.cta h2{
    color:var(--ribatech-gris);

}

@media (max-width: 768px) {

  .carousel{
    margin:30px auto;
  }

  .carousel-track{
    gap:10px;
    justify-content:flex-start; /* importante */
  }

  .carousel-item{
    flex:0 0 80%;   /* ocupa casi toda la pantalla */
    height:250px;
    filter:none;    /* quitamos blur en móvil */
    transform:scale(1);
    opacity:1;
  }

  .carousel-item.active{
    flex:0 0 80%;   /* mismo tamaño que los demás */
  }

  .carousel-item img{
    object-fit:cover; /* mejor en móvil */
  }

  /* botones más pequeños */
  .nav{
    width:35px;
    height:35px;
    font-size:18px;
  }

}


.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px;
}

.carousel-dots span {
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
  opacity: 0.5;
}

.carousel-dots span.active {
  background: #3f8fa3;
  transform: scale(1.4);
  opacity: 1;
}