:root{

    --primary:#D7A300;
    --primary-hover:#E8B51A;

    --dark:#0F1115;
    --dark-soft:#1A1D22;

    --white:#FFFFFF;

    --gray:#B9BEC7;

    --text:#E5E7EB;

    --container:1320px;

    --radius:18px;

    --transition:.35s ease;

}

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

html{

    scroll-behavior:smooth;

}

body{

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

    background:#fff;

    color:#111;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

}

.smp-container{

    width:min(92%,1320px);

    margin:auto;

}



.smp-hero{

    position:relative;

    min-height:600px;

    height:95vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#000;

}

.smp-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:65% center;

    animation:heroZoom 18s ease-in-out infinite alternate;

}

.smp-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(10,10,10,.65) 0%,

        rgba(10,10,10,.38) 42%,

        rgba(10,10,10,.08) 100%

    );

}

.smp-content{

    position:relative;

    z-index:20;

    max-width:720px;

    margin-top:-100px;

}

.smp-label{

    display:inline-block;

    color:var(--primary);

    font-size:13px;

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:28px;

    text-transform:uppercase;

}

.smp-content h1{

    color:#fff;

    font-size:clamp(52px,5vw,72px);

    line-height:.95;

    font-weight:900;

    max-width:760px;

    margin-bottom:32px;

}

.smp-content p{

    max-width:560px;

    color:var(--text);

    font-size:19px;

    line-height:1.9;

}

.smp-buttons{

    display:flex;

    gap:20px;

    margin-top:50px;

    flex-wrap:wrap;

}

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

.smp-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:20px 42px;

    background:var(--primary);

    color:#111;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.smp-btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(215,163,0,.30);

}

.smp-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:20px 42px;

    border-radius:999px;

    color:#fff;

    border:1px solid rgba(255,255,255,.22);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    transition:var(--transition);

}

.smp-btn-secondary:hover{

    background:#fff;

    color:#111;

}

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

.smp-scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    color:#fff;

    text-align:center;

    z-index:30;

    font-size:13px;

    letter-spacing:3px;

}

.smp-scroll span{

    display:block;

    width:2px;

    height:55px;

    margin:auto;

    margin-bottom:14px;

    background:var(--primary);

    animation:scrollAnim 2s infinite;

}

/*==================================================
TRANSICIÓN HERO
==================================================*/

.smp-hero::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:180px;

    background:linear-gradient(

        transparent,

        #fff

    );

    z-index:5;

}

/*==================================================
INDICADORES
==================================================*/

.smp-stats{

    padding:90px 0;

    background:#111;

    color:#fff;

}

.smp-stats .smp-container{

    display:grid;

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

    gap:40px;

}

.smp-stat{

    text-align:center;

}

.smp-stat h3{

    color:var(--primary);

    font-size:48px;

    margin-bottom:12px;

    font-weight:800;

}

.smp-stat p{

    color:#D5D5D5;

    font-size:16px;

    letter-spacing:.5px;

}

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

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

@keyframes scrollAnim{

    0%{

        opacity:0;

        transform:translateY(-10px);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(18px);

    }

}
/*==================================================
INDUSTRIAS
==================================================*/

.smp-industries{

    padding:140px 0;

    background:#fff;

}

.smp-title{

    text-align:center;

    max-width:900px;

    margin:0 auto 80px;

}

.smp-title span{

    display:inline-block;

    color:var(--primary);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

.smp-title h2{

    font-size:clamp(42px,5vw,64px);

    line-height:1.08;

    font-weight:800;

    color:#111;

}

.smp-grid{

    display:grid;

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

    gap:35px;

}

.smp-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    box-shadow:
    0 12px 30px rgba(0,0,0,.05),
    0 30px 70px rgba(0,0,0,.06);

    transition:.45s ease;

}

.smp-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 20px 50px rgba(0,0,0,.10),
    0 40px 90px rgba(0,0,0,.08);

}

.smp-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:transform .7s ease;

}

.smp-card:hover img{

    transform:scale(1.06);

}

.smp-card div{

    padding:34px;

}

.smp-card h3{

    font-size:30px;

    margin-bottom:15px;

    font-weight:800;

    color:#111;

}

.smp-card p{

    color:#666;

    font-size:16px;

    line-height:1.8;

}

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

.smp-cta{

    position:relative;

    min-height:650px;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.smp-cta img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:brightness(.65);

    transform:scale(1.05);

}

.smp-cta .smp-overlay{

    background:linear-gradient(

        rgba(0,0,0,.72),

        rgba(0,0,0,.72)

    );

}

.smp-cta-content{

    position:relative;

    z-index:10;

    max-width:760px;

    color:#fff;

}

.smp-cta-content span{

    display:inline-block;

    color:var(--primary);

    letter-spacing:4px;

    margin-bottom:18px;

    font-size:13px;

    font-weight:700;

}

.smp-cta-content h2{

    font-size:clamp(42px,5vw,68px);

    line-height:1.05;

    font-weight:900;

    margin-bottom:40px;

}

/*==================================================
MICROINTERACCIONES
==================================================*/

.smp-btn-primary,
.smp-btn-secondary,
.smp-card{

    will-change:transform;

}

.smp-btn-primary:active{

    transform:scale(.98);

}

.smp-btn-secondary:active{

    transform:scale(.98);

}

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

@media (max-width:1100px){

    .smp-grid{

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

    }

}

@media (max-width:900px){

    .smp-content{

        margin-top:0;

        text-align:center;

        margin-left:auto;

        margin-right:auto;

    }

    .smp-content p{

        margin:auto;

    }

    .smp-buttons{

        justify-content:center;

    }

    .smp-stats .smp-container{

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

    }

}

@media (max-width:768px){

    .smp-hero{

        min-height:100svh;

        padding:120px 0 80px;

    }

    .smp-content h1{

        font-size:48px;

        line-height:1;

    }

    .smp-content p{

        font-size:17px;

        line-height:1.7;

    }

    .smp-grid{

        grid-template-columns:1fr;

    }

    .smp-title h2{

        font-size:38px;

    }

    .smp-cta-content h2{

        font-size:40px;

    }

}

@media (max-width:576px){

    .smp-stats .smp-container{

        grid-template-columns:1fr;

    }

    .smp-buttons{

        flex-direction:column;

    }

    .smp-btn-primary,
    .smp-btn-secondary{

        width:100%;

    }

    .smp-card img{

        height:260px;

    }

    .smp-content h1{

        font-size:40px;

    }

    .smp-title{

        margin-bottom:50px;

    }

}