/* ================= HOME PAGE ================= */

/* HERO */

.hero{
height:85vh;
background:
linear-gradient(rgba(0, 0, 0, 0.282),rgba(0,0,0,.45)),
url("../images/hero.jpeg") center/cover no-repeat;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
color:white;
text-align:center;
padding:0 20px;
}

.hero h1{
font-size:48px;
max-width:800px;
line-height:1.2;
margin-bottom:20px;
}

/* SECTIONS */

section{
padding:90px 80px;
text-align:center;
}

section h2{
font-size:36px;
margin-bottom:40px;
}

/* CARDS */

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}

.cards-img{
  width: 100%;
  height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.cards-img{
  display: flex;
  gap: 30px;
  will-change: transform;
}

.cards-img img{
  width: 300px;
  height: 450px;
  object-fit: cover;
  border-radius: 20px;
  flex-shrink: 0;
}
.img {
  width: 80vw;
  max-width: 1080px;
  height: 80vh;

  margin-left: auto;
  margin-right: auto;

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

  overflow: hidden;
  border-radius: 28px;
}


.card{
background:white;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
padding-bottom:25px;
transition:.3s;
}

.card:hover{
transform:translateY(-10px);
}

.img{
background:#8db1d53a;
width: 90vw;
height: 90vh;


}

/* BENEFITS */

.benefits{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
font-size:18px;
}

/* REVIEWS */

.card p{
margin:10px 0;
}

/* MOBILE */

@media(max-width:900px){

.hero h1{
font-size:32px;
}

section{
padding:60px 20px;
}

.cards,
.benefits{
grid-template-columns:1fr;
}

}

/*hero video*/
.hero-video {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
/*Video ABAJO de todo*/
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/*Overlay en medio*/
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2; /* 👈 MÁS ALTO QUE VIDEO Y OVERLAY */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}
/*destaque de los text*/
.hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
}

.hero-content h1 span {
  background: linear-gradient(135deg, #f97316, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}