*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Montserrat',sans-serif;
overflow-x: hidden;
}


body{
background:#fff;
color:#111;
overflow-x: hidden;
}




/* HERO */


.hero{

display:grid;
grid-template-columns:1fr 1fr;
height:auto;
background:#000;
padding-top: 2rem;
}


.hero-left{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:white;

}



.logo span{

font-size:100px;
color:#ffe500;
font-family:serif;

}


.logo medium{

display:block;
letter-spacing:12px;
text-align:center;

}



.hero-left p{

margin:50px 0;
letter-spacing:5px;
text-align:center;
color:#ddd;

}



.hero-image img{

width: 400px;
height:400px;
object-fit:cover;

}




.btn{

background:#ffe500;
color:#000;

padding:15px 60px;

border-radius:40px;

text-decoration:none;

font-weight:900;

letter-spacing:3px;

}





.yellow-title{

background:#ffe500;

text-align:center;

padding:20px;

letter-spacing:5px;

}




/* PLANES */


.plans{

padding:70px 10%;

text-align:center;

}


.plans h1{

letter-spacing:8px;
margin-bottom:50px;

}



.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}



.plan{

padding:30px;

border-radius:20px;

background:#eee;

}


.plan h3{

letter-spacing:8px;

}


.plan ul{

margin-top:30px;
list-style:none;

line-height:2;

}



.active{

background:#ffe500;

}



.black{

background:#111;
color:white;

}



.icons{
    display: flex;
    justify-content: space-around;
    padding-bottom: 2rem;
}



.icon{
width: 50px;
display:flex;

justify-content:center;
}




/* SERVICES */


.services{

background:

url("img/fondo.png");

background-size:cover;

color:white;

padding:70px 10%;

}



.services h2{

color:#ffe500;
letter-spacing:10px;
text-align:center;

}



.service-grid{

display: block;

justify-self: center;
grid-template-columns:1fr 1fr;

margin-top:50px;

}



.service-grid ul{

line-height:2.5;
padding:0 20px;
padding-left: 60px;
font-size:18px;

}





/* WHY */


.why-title{

background:#ffe500;

padding:25px;

text-align:center;

font-weight:900;

letter-spacing:5px;

}



.why{

text-align:center;

}



.why-grid{

padding:60px 10%;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:50px;

}



.why h3{

letter-spacing:8px;

}




.why p{

margin-top:15px;
color:#555;

}





.cta{

background:#000;

color:white;

display:flex;

justify-content:space-around;

align-items:center;

padding:50px;

}


.cta h2{

color:#ffe500;
letter-spacing:8px;

}



footer{

padding:20px;

text-align:center;

font-size:12px;

}




/* MOBILE */


@media(max-width:900px){


.hero,
.cards,
.service-grid,
.why-grid{

grid-template-columns:1fr;

}

.why-grid{
    overflow-x: scroll;
    display: flex;
}

.hero{

height:auto;

}


.hero-image{

height:300px;

}


.icons{

flex-wrap:wrap;

}



.cta{

flex-direction:column;
gap:30px;

}

}

.whatsapp_button {
    position: fixed;
    bottom: 20px; /* Distancia desde abajo */
    right: 20px;  /* Distancia desde la derecha */
    background-color: #15ff00;
    color: #fdfdfd;
    border-radius: 50%;
    padding: 15px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
}