*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:'Inter',sans-serif;

    background:#f8fafc;

    color:#1e293b;

    line-height:1.6;

}


img{

    max-width:100%;

    display:block;

}


section{

    padding:80px 8%;

}


h2{

    text-align:center;

    font-size:2.5rem;

    color:#0f172a;

    margin-bottom:50px;

}


p{

    font-size:1.05rem;

}






/* =========================
 HERO
========================= */


.hero{


    min-height:95vh;


    background:

    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.65)
    ),

    url("a.jpeg");


    background-size:cover;

    background-position:center;

    color:white;


}




.navbar{


    padding:25px 8%;


    display:flex;


    align-items:center;


    justify-content:space-between;


}




.logo{


    width:90px;

    height:90px;

    object-fit:contain;

    border-radius:50%;


}




.nav-links{


    display:flex;

    gap:30px;


}



.nav-links a{


    color:white;

    text-decoration:none;

    font-weight:600;


}



.nav-button{


    background:#22c55e;

    padding:14px 25px;

    border-radius:30px;

    color:white;

    text-decoration:none;

    font-weight:700;


}



.nav-button:hover{

    background:#16a34a;

}





.hero-content{


    padding:100px 8%;


    max-width:850px;


}



.hero h1{


    font-size:clamp(2.5rem,5vw,4rem);


    line-height:1.1;


    margin-bottom:25px;


}



.hero p{


    font-size:1.3rem;


    margin-bottom:35px;


}




.btn-whatsapp{


    background:#22c55e;


    padding:17px 35px;


    border-radius:40px;


    color:white;


    text-decoration:none;


    font-weight:700;


    display:inline-block;


}









/* =========================
 CONFIANZA
========================= */


.confianza{


    display:grid;


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


    background:#0f172a;


    color:white;


    text-align:center;


    gap:20px;


}



.confianza div{


    font-weight:700;


    font-size:1.1rem;


}








/* =========================
 SOBRE
========================= */


.sobre{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:60px;


    align-items:center;


}



.sobre img{


    border-radius:25px;


    box-shadow:0 20px 40px rgba(0,0,0,.15);


}



.texto p{


    margin-bottom:20px;


}









/* =========================
 STATS
========================= */


.stats{


    background:#111827;


    color:white;


    display:grid;


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


    text-align:center;


}



.stats h3{


    color:#22c55e;


    font-size:3rem;


}








/* =========================
 SERVICIOS
========================= */


.cards{


    display:grid;


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


    gap:30px;


}




.card{


    background:white;


    padding:35px;


    border-radius:20px;


    box-shadow:0 15px 35px rgba(0,0,0,.08);


    transition:.3s;


}



.card:hover{


    transform:translateY(-10px);


}








/* =========================
 CAMION
========================= */


.camion{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:50px;


    align-items:center;


    background:#e2e8f0;


}



.camion img{


    border-radius:25px;


}



.camion li{


    list-style:none;


    margin:15px 0;


    font-weight:600;


}








/* =========================
 CARRUSEL
========================= */


.carousel-container{


    overflow:hidden;


}



.carousel{


    display:flex;


    gap:25px;


    width:max-content;


    animation:slide 30s linear infinite;


}



.carousel:hover{


    animation-play-state:paused;


}




.carousel img{


    width:350px;


    height:250px;


    object-fit:cover;


    border-radius:20px;


}



@keyframes slide{


from{

transform:translateX(0);

}


to{

transform:translateX(-50%);

}


}








/* =========================
 TESTIMONIOS
========================= */


.testimonios{


    background:#f1f5f9;


}



.testimonio-box{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:30px;


}



.testimonio-box div{


    background:white;


    padding:30px;


    border-radius:20px;


    box-shadow:0 10px 25px rgba(0,0,0,.08);


}









/* =========================
 FORMULARIO
========================= */


.contacto{


    text-align:center;


}




form{


    max-width:600px;


    margin:auto;


    display:flex;


    flex-direction:column;


    gap:15px;


}




input,
textarea{


    padding:15px;


    border-radius:12px;


    border:1px solid #cbd5e1;


    font-family:inherit;


}




textarea{


    height:130px;


}




button{


    padding:16px;


    border:none;


    border-radius:30px;


    background:#22c55e;


    color:white;


    font-weight:700;


    cursor:pointer;


}








/* =========================
 BOTONES CONTACTO
========================= */


.contact-buttons{


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:15px;


}



.contact-buttons a{


    color:white;


    text-decoration:none;


    padding:15px 30px;


    border-radius:30px;


    font-weight:700;


}




.wpp{

background:#22c55e;

}



.telefono{

background:#2563eb;

}



.instagram{

background:#e1306c;

}



.correo{

background:#475569;

}








/* =========================
 MAPA
========================= */


.ubicacion iframe{


    width:100%;


    height:400px;


    border:0;


    border-radius:25px;


}









/* =========================
 BOTONES FLOTANTES
========================= */


.whatsapp-floating,
.call-floating{


    position:fixed;


    right:25px;


    width:60px;


    height:60px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    color:white;


    text-decoration:none;


    font-size:28px;


    z-index:100;


}



.whatsapp-floating{


    bottom:25px;


    background:#22c55e;


}



.call-floating{


    bottom:95px;


    background:#2563eb;


}








/* =========================
 FOOTER
========================= */


footer{


    background:#020617;


    color:white;


    text-align:center;


    padding:40px;


}



footer p{


    margin:10px;


}








/* =========================
 ANIMACION SCROLL
========================= */


.reveal{


    opacity:0;


    transform:translateY(40px);


    transition:1s;


}



.reveal.active{


    opacity:1;


    transform:none;


}








/* =========================
 RESPONSIVE
========================= */


@media(max-width:900px){



.nav-links{

display:none;

}



.confianza{


grid-template-columns:1fr 1fr;


}



.sobre,
.camion{


grid-template-columns:1fr;


}



.cards{


grid-template-columns:1fr;


}



.stats{


grid-template-columns:1fr;


}



.testimonio-box{


grid-template-columns:1fr;


}



.navbar{


flex-wrap:wrap;


}



}



@media(max-width:500px){



section{


padding:60px 5%;


}



.logo{


width:70px;


height:70px;


}



.hero-content{


padding:80px 5%;


}



.hero h1{


font-size:2.3rem;


}



.confianza{


grid-template-columns:1fr;


}



.carousel img{


width:280px;


height:200px;


}



.contact-buttons a{


width:100%;


text-align:center;


}



}