/*
======================================================
CARGEO 1.0
SOLUCIONES INDUSTRIALES

/assets/css/style.css

CSS PRINCIPAL
Versión 1.0.0
======================================================
*/


/*=====================================================
VARIABLES CORPORATIVAS
=====================================================*/


:root{


    --negro:#111111;

    --negro-2:#1b1b1b;

    --gris:#333333;

    --gris-claro:#f4f4f4;

    --blanco:#ffffff;

    --rojo:#d71920;

    --rojo-oscuro:#a90f14;

    --texto:#222222;


    --transicion:.35s ease;


    --sombra:

    0 15px 40px rgba(0,0,0,.15);



    --ancho:

    1400px;


}







/*=====================================================
RESET GENERAL
=====================================================*/


*,
*::before,
*::after{


    margin:0;

    padding:0;

    box-sizing:border-box;


}




html{


    scroll-behavior:smooth;


}




body{


    font-family:

    'Montserrat',
    Arial,
    sans-serif;


    color:var(--texto);


    background:

    var(--blanco);


    overflow-x:hidden;


}





img{


    max-width:100%;

    display:block;


}




a{


    text-decoration:none;

    color:inherit;


}




ul{


    list-style:none;


}





p{


    line-height:1.8;

    font-size:16px;


}





h1,
h2,
h3,
h4{


    font-weight:700;

    line-height:1.2;


}





/*=====================================================
CONTENEDOR GENERAL
=====================================================*/


.container{


    width:90%;

    max-width:var(--ancho);

    margin:auto;


}







/*=====================================================
SECCIONES GENERALES
=====================================================*/


section{


    position:relative;

    padding:100px 0;


}





.section-header{


    max-width:850px;

    margin:0 auto 60px;

    text-align:center;


}





.section-subtitle{


    display:block;

    color:var(--rojo);

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:20px;


}





.section-header h2{


    font-size:48px;

    color:var(--negro);

    margin-bottom:25px;


}





.section-header p{


    color:#666;


}









/*=====================================================
BOTONES GENERALES
=====================================================*/


.btn-primary{


    display:inline-flex;

    align-items:center;

    justify-content:center;


    background:var(--rojo);

    color:white;


    padding:18px 40px;


    font-size:14px;

    font-weight:700;

    letter-spacing:1px;


    transition:var(--transicion);


}





.btn-primary:hover{


    background:var(--rojo-oscuro);

    transform:translateY(-4px);


}







.btn-secondary{


    display:inline-flex;

    align-items:center;

    justify-content:center;


    border:2px solid white;

    color:white;


    padding:16px 38px;


    font-size:14px;

    font-weight:700;


    transition:var(--transicion);


}





.btn-secondary:hover{


    background:white;

    color:var(--negro);


}








/*=====================================================
HEADER BASE
=====================================================*/


.site-header{


    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:1000;


    padding:25px 0;


    transition:var(--transicion);


}







.header-container{


    width:90%;

    max-width:var(--ancho);

    margin:auto;


    display:flex;

    align-items:center;

    justify-content:space-between;


}





.site-logo a{


    display:flex;

    flex-direction:column;


}




.logo-principal{


    color:white;

    font-size:38px;

    font-weight:800;

    letter-spacing:3px;


}





.logo-subtitulo{


    color:white;

    font-size:10px;

    letter-spacing:3px;


}






.main-navigation .menu-principal{


    display:flex;

    gap:35px;


}





.menu-principal li a{


    color:white;

    font-size:14px;

    font-weight:600;

    transition:var(--transicion);


}





.menu-principal li a:hover{


    color:var(--rojo);


}






.header-button a{


    background:var(--rojo);

    color:white;


    padding:15px 28px;


    font-size:13px;

    font-weight:700;


    transition:var(--transicion);


}





.header-button a:hover{


    background:white;

    color:var(--negro);


}

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


.hero-section{


    min-height:100vh;


    display:flex;

    align-items:center;


    background:

    linear-gradient(

    90deg,

    rgba(0,0,0,.85),

    rgba(0,0,0,.45)

    ),

    url("../img/hero-bg.jpg");


    background-size:cover;

    background-position:center;


    position:relative;


    overflow:hidden;


}







.hero-content{


    position:relative;

    z-index:2;


    max-width:850px;


    color:white;


}





.hero-subtitle{


    display:block;


    font-size:18px;


    font-weight:700;


    letter-spacing:5px;


    color:#ffffff;


    margin-bottom:25px;


    animation:

    fadeUp 1s ease;


}







.hero-title{


    font-size:

    clamp(55px,7vw,100px);


    font-weight:900;


    letter-spacing:5px;


    margin-bottom:20px;


    animation:

    fadeUp 1.2s ease;


}







.hero-title span{


    color:var(--rojo);


}







.hero-description{


    max-width:700px;


    font-size:20px;


    color:#eeeeee;


    margin-bottom:40px;


    animation:

    fadeUp 1.4s ease;


}








.hero-buttons{


    display:flex;

    gap:20px;


    animation:

    fadeUp 1.6s ease;


}








.hero-scroll{


    position:absolute;


    bottom:40px;


    left:50%;


    transform:translateX(-50%);


    color:white;


    font-size:13px;


    letter-spacing:3px;


    z-index:2;


    opacity:.8;


}






.hero-scroll::after{


    content:"";


    display:block;


    width:2px;


    height:60px;


    background:white;


    margin:15px auto 0;


}









/*=====================================================
ANIMACIONES GENERALES
=====================================================*/


@keyframes fadeUp{


    from{


        opacity:0;

        transform:translateY(40px);


    }


    to{


        opacity:1;

        transform:translateY(0);


    }


}






@keyframes zoomHero{


    from{


        transform:scale(1.1);


    }


    to{


        transform:scale(1);


    }


}








.hero-section{


    animation:

    zoomHero 2s ease;


}








/*=====================================================
SECCIÓN NOSOTROS
=====================================================*/


.about-section{


    background:white;


}







.about-section .container{


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:70px;


    align-items:center;


}







.about-image{


    position:relative;


}







.about-image img{


    width:100%;


    border-radius:5px;


    box-shadow:var(--sombra);


}







.experience-box{


    position:absolute;


    bottom:-30px;


    right:-30px;


    background:var(--rojo);


    color:white;


    padding:35px;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


}







.experience-box strong{


    font-size:55px;


    line-height:1;


}







.experience-box span{


    font-size:14px;


    margin-top:10px;


}







.about-content h2{


    font-size:48px;


    margin-bottom:30px;


}








.about-content p{


    color:#555;


    margin-bottom:20px;


}








.about-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:20px;


    margin-top:40px;


}








.about-card{


    background:#f7f7f7;


    padding:25px;


    transition:var(--transicion);


}







.about-card i{


    font-size:35px;


    color:var(--rojo);


    margin-bottom:20px;


}







.about-card h3{


    font-size:18px;


    margin-bottom:10px;


}







.about-card:hover{


    transform:translateY(-10px);


    box-shadow:var(--sombra);


}

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


.services-section{


    background:

    var(--gris-claro);


}







.services-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}








.service-card{


    background:white;


    padding:40px 35px;


    position:relative;


    transition:var(--transicion);


    border-bottom:4px solid transparent;


}







.service-card:hover{


    transform:translateY(-12px);


    box-shadow:var(--sombra);


    border-color:var(--rojo);


}








.service-icon{


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:var(--rojo);


    color:white;


    font-size:32px;


    margin-bottom:30px;


}








.service-card h3{


    font-size:24px;


    margin-bottom:20px;


    color:var(--negro);


}








.service-card p{


    color:#666;


    margin-bottom:25px;


}








.service-card ul li{


    padding:8px 0;


    color:#555;


    border-bottom:1px solid #eee;


    font-size:15px;


}








.service-card ul li::before{


    content:"✓";


    color:var(--rojo);


    font-weight:bold;


    margin-right:10px;


}









/*=====================================================
MAQUINARIA
=====================================================*/


.machinery-section{


    background:#111;


    color:white;


}








.machinery-section .section-header h2{


    color:white;


}








.machinery-section .section-header p{


    color:#ccc;


}








.machinery-grid{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}








.machine-card{


    background:#1c1c1c;


    overflow:hidden;


    transition:var(--transicion);


}








.machine-card:hover{


    transform:translateY(-10px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.5);


}








.machine-image{


    height:260px;


    overflow:hidden;


    position:relative;


}








.machine-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s ease;


}








.machine-card:hover .machine-image img{


    transform:scale(1.1);


}








.machine-tag{


    position:absolute;


    bottom:15px;


    left:15px;


    background:var(--rojo);


    color:white;


    padding:8px 15px;


    font-size:12px;


    font-weight:bold;


}








.machine-content{


    padding:30px;


}








.machine-content h3{


    font-size:25px;


    margin-bottom:15px;


}








.machine-content p{


    color:#ccc;


}








.machine-content ul{


    margin-top:20px;


}








.machine-content li{


    color:#ddd;


    padding:8px 0;


    border-bottom:1px solid #333;


}









/*=====================================================
PROYECTOS
=====================================================*/


.projects-section{


    background:white;


}








.projects-grid{


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:35px;


}








.project-card{


    background:white;


    box-shadow:var(--sombra);


    overflow:hidden;


    transition:var(--transicion);


}








.project-card:hover{


    transform:translateY(-10px);


}








.project-image{


    height:350px;


    overflow:hidden;


}








.project-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s;


}








.project-card:hover img{


    transform:scale(1.08);


}








.project-content{


    padding:35px;


}








.project-content span{


    color:var(--rojo);


    font-size:13px;


    font-weight:700;


    letter-spacing:2px;


}








.project-content h3{


    font-size:26px;


    margin:15px 0;


}








.project-content p{


    color:#666;


}

/*=====================================================
GALERÍA
=====================================================*/


.gallery-section{


    background:#f5f5f5;


}





.gallery-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


}







.gallery-item{


    position:relative;


    height:320px;


    overflow:hidden;


    display:block;


}







.gallery-item img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s;


}







.gallery-item:hover img{


    transform:scale(1.1);


}







.gallery-overlay{


    position:absolute;


    inset:0;


    background:

    rgba(215,25,32,.75);


    display:flex;


    align-items:center;


    justify-content:center;


    opacity:0;


    transition:.4s;


}







.gallery-overlay i{


    color:white;


    font-size:45px;


}







.gallery-item:hover .gallery-overlay{


    opacity:1;


}








/*=====================================================
MARCAS
=====================================================*/


.brands-section{


    background:white;


}







.brands-grid{


    display:grid;


    grid-template-columns:

    repeat(6,1fr);


    gap:30px;


    align-items:center;


}







.brand-item{


    height:120px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#f7f7f7;


    padding:25px;


    transition:.3s;


}







.brand-item:hover{


    transform:translateY(-8px);


    box-shadow:var(--sombra);


}







.brand-item img{


    max-height:60px;


    filter:grayscale(100%);


    opacity:.7;


    transition:.3s;


}







.brand-item:hover img{


    filter:none;


    opacity:1;


}








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





    background:#111;


    color:white;


}







.testimonials-section .section-header h2{


    color:white;


}







.testimonials-section .section-header p{


    color:#ccc;


}







.testimonials-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}







.testimonial-card{


    background:#1c1c1c;


    padding:40px;


    transition:.3s;


}







.testimonial-card:hover{


    transform:translateY(-10px);


}







.testimonial-stars{


    color:#ffc107;


    font-size:25px;


    margin-bottom:25px;


}







.testimonial-card p{


    color:#ddd;


    font-style:italic;


    margin-bottom:30px;


}







.testimonial-author{


    display:flex;


    align-items:center;


    gap:15px;


}







.author-image img{


    width:60px;


    height:60px;


    border-radius:50%;


    object-fit:cover;


}







.testimonial-author h4{


    font-size:17px;


}







.testimonial-author span{


    color:#aaa;


    font-size:14px;


}








/*=====================================================
CTA
=====================================================*/


.cta-section{


    background:

    linear-gradient(

    rgba(0,0,0,.8),

    rgba(0,0,0,.8)

    ),

    url("../img/cta-bg.jpg");


    background-size:cover;


    background-position:center;


    color:white;


    text-align:center;


}







.cta-content{


    max-width:900px;


    margin:auto;


}







.cta-content h2{


    font-size:55px;


    margin-bottom:25px;


}







.cta-content p{


    color:#ddd;


    font-size:19px;


    margin-bottom:40px;


}







.cta-buttons{


    display:flex;


    justify-content:center;


    gap:20px;


}







.btn-whatsapp-large{


    display:flex;


    align-items:center;


    gap:10px;


    background:#25d366;


    color:white;


    padding:18px 35px;


    font-weight:bold;


    transition:.3s;


}







.btn-whatsapp-large:hover{


    transform:translateY(-5px);


}








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


.contact-section{


    background:#f5f5f5;


}







.contact-grid{


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:60px;


}







.contact-info h3,
.contact-form h3{


    font-size:30px;


    margin-bottom:30px;


}







.contact-item{


    display:flex;


    gap:20px;


    margin-bottom:25px;


}







.contact-item i{


    width:50px;


    height:50px;


    background:var(--rojo);


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


}







.contact-form{


    background:white;


    padding:40px;


    box-shadow:var(--sombra);


}







.form-group{


    margin-bottom:20px;


}







.form-group input,
.form-group textarea,
.form-group select{


    width:100%;


    padding:15px;


    border:1px solid #ddd;


    font-family:inherit;


}







.contact-map{


    margin-top:60px;


    height:400px;


}







.contact-map iframe{


    width:100%;


    height:100%;


    border:0;


}








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


.site-footer{


    background:#0c0c0c;


    color:white;


    padding:50px 0;


    text-align:center;


}







.site-footer p{


    color:#aaa;


}








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


@media(max-width:1100px){


.services-grid{


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


}



.machinery-grid{


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


}



.brands-grid{


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


}



.testimonials-grid{


grid-template-columns:1fr 1fr;


}


}







@media(max-width:768px){



.section-header h2{


font-size:35px;


}



.about-section .container,
.contact-grid{


grid-template-columns:1fr;


}



.about-grid{


grid-template-columns:1fr;


}



.services-grid,
.machinery-grid,
.projects-grid,
.gallery-grid,
.testimonials-grid{


grid-template-columns:1fr;


}



.brands-grid{


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


}



.hero-title{


font-size:55px;


}



.hero-buttons,
.cta-buttons{


flex-direction:column;


}



.cta-content h2{


font-size:38px;


}


}