/* ======================================
        OXIUM URBAN EXPERIENCE
====================================== */


:root{

    --bg:#060606;

    --card:#101010;

    --white:#ffffff;

    --soft:#9b9b9b;

    --green:#58d68d;

    --green-dark:#39b873;

    --glow:rgba(88,214,141,.25);

    --line:rgba(255,255,255,.08);

}




*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    background:var(--bg);

    color:white;

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

}







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


.hero{


    min-height:100vh;


    display:flex;

    flex-direction:column;


    justify-content:space-between;



    padding:140px 40px 70px;



    position:relative;



    background:


    linear-gradient(

    rgba(0,0,0,.35),

    rgba(0,0,0,.90)

    ),


    url('../img/banner1.png');



    background-size:cover;


    background-position:center;


}



.hero::after{


    content:"";


    position:absolute;


    inset:0;



    background:


    radial-gradient(

    circle,

    rgba(88,214,141,.18),

    transparent 45%

    );


}





.hero-top,
.hero-center,
.hero-bottom{


    position:relative;


    z-index:2;


}



.hero-top{


    text-align:center;


}



.hero-tag{


    color:var(--green);


    letter-spacing:8px;


    font-size:14px;


    font-weight:700;


}





.hero-center{


    display:flex;

    justify-content:center;


}




.hero-center h1{


    font-size:

    clamp(55px,9vw,120px);



    font-weight:900;


    letter-spacing:-4px;



    text-align:center;



    text-shadow:


    0 0 30px rgba(88,214,141,.20);


}







.hero-bottom{


    display:flex;


    flex-direction:column;


    align-items:center;


    gap:30px;


}




.hero-micro{


    color:#ddd;


    letter-spacing:6px;


}





.hero-buttons{


    display:flex;


    gap:20px;


}





.hero-btn,
.hero-btn-outline{


    padding:16px 40px;


    border-radius:50px;


    text-decoration:none;


    font-weight:800;


    transition:.3s;


}





.hero-btn{


    background:var(--green);


    color:#061006;


}





.hero-btn-outline{


    border:

    1px solid var(--green);


    color:var(--green);


}



.hero-btn:hover,
.hero-btn-outline:hover{


    transform:translateY(-4px);


}









/* ======================================
        HEADERS
====================================== */


.section-header{


    max-width:850px;


    margin:auto;


    text-align:center;


}




.section-header span{


    color:var(--green);


    letter-spacing:5px;


    font-size:12px;


    font-weight:700;


}





.section-header h2{


    font-size:

    clamp(32px,4vw,52px);


    font-weight:800;


    letter-spacing:-1px;


    margin:20px 0;


}





.section-header p{


    color:var(--soft);


    line-height:1.7;


}


/* ======================================
        EXPERIENCIA CARDS
====================================== */


.oxium-grid{


    display:grid;


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


    gap:25px;


}




.oxium-card{


    position:relative;


    display:block;


    width:100%;


    aspect-ratio:1 / 1;


    overflow:hidden;


    border-radius:28px;


    background:#111;


}




.oxium-card img{


    position:absolute;


    inset:0;


    width:100%;


    height:100%;


    object-fit:cover;


    display:block;


}







.oxium-overlay{


    position:absolute;


    inset:0;


    display:flex;


    flex-direction:column;


    justify-content:flex-end;


    padding:35px;


    background:


    linear-gradient(

        transparent,

        rgba(0,0,0,.85)

    );


}






.oxium-overlay span{


    font-size:13px;


    color:#58d68d;


    letter-spacing:3px;


    font-weight:700;


}




.oxium-overlay h3{


    margin:10px 0 5px;


    color:white;


    font-size:28px;


    font-weight:800;


}




.oxium-overlay p{


    margin:0;


    color:#ccc;


    font-size:14px;


}






/* ===============================
        MOBILE
================================ */


@media(max-width:900px){



.oxium-grid{


    grid-template-columns:1fr;


    gap:20px;


}



.oxium-card{


    width:100%;


    aspect-ratio:1 / 1;


}



.oxium-card img{


    width:100%;


    height:100%;


    object-fit:cover;


}



.oxium-overlay{


    padding:25px;


}



.oxium-overlay h3{


    font-size:22px;


}


}

/* ======================================
            DESTACADOS
====================================== */


.destacados-section{


    padding:100px 40px;


}




.destacados-header{


    text-align:center;


    margin-bottom:55px;


}




.destacados-header h2{


    font-size:

    clamp(34px,4vw,55px);


    font-weight:900;


}



.destacados-header p{


    color:var(--soft);


    margin-top:15px;


}






.destacados-grid{


    display:grid;


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


    gap:24px;


}





.destacado-card{


    background:


    linear-gradient(

    145deg,

    #121212,

    #080808

    );


    border-radius:24px;


    padding:22px;


    border:

    1px solid var(--line);


    transition:.35s;


}



.destacado-card:hover{


    transform:translateY(-7px);


    border-color:

    rgba(88,214,141,.4);


    box-shadow:


    0 20px 40px rgba(88,214,141,.10);


}





.destacado-badge{


    display:inline-block;


    padding:7px 14px;


    border-radius:30px;


    color:var(--green);


    background:

    rgba(88,214,141,.12);


    border:

    1px solid rgba(88,214,141,.3);


    font-size:10px;


    font-weight:800;


}






.destacado-image{


    height:240px;


    display:flex;


    align-items:center;


    justify-content:center;


}





.destacado-image img{


    width:100%;


    height:100%;


    object-fit:contain;


}





.destacado-info h3{


    text-align:center;


    font-size:20px;


    margin-top:15px;


}






.destacado-price{


    text-align:center;


    color:var(--green);


    font-size:24px;


    font-weight:900;


    margin:15px 0;



    text-shadow:


    0 0 15px rgba(88,214,141,.30);


}






.destacado-info p{


    text-align:center;


    color:#777;


    font-size:12px;


}






.destacado-btn{


    margin-top:20px;


    height:48px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:14px;



    background:


    linear-gradient(

    135deg,

    var(--green),

    var(--green-dark)

    );



    color:#061006;


    text-decoration:none;


    font-weight:900;


}









/* ======================================
            CATALOGO
====================================== */


.catalogo-section{


    padding:100px 40px;


}





.catalogo-header{


    text-align:center;


    margin-bottom:50px;


}





.catalogo-header span{


    color:var(--green);


    letter-spacing:5px;


    font-size:12px;


}





.catalogo-header h2{


    font-size:48px;


    margin:20px 0;


    font-weight:900;


}




.catalogo-header p{


    color:var(--soft);


}





.catalogo-grid{


    display:grid;


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


    gap:22px;


}





.catalogo-card{


    background:#0d0d0d;


    border-radius:22px;


    overflow:hidden;


    border:

    1px solid var(--line);


    transition:.3s;


}




.catalogo-card:hover{


    transform:translateY(-5px);


    border-color:

    rgba(88,214,141,.35);


}






.catalogo-image{


    height:200px;


    padding:20px;


}





.catalogo-image img{


    width:100%;


    height:100%;


    object-fit:contain;


}





.catalogo-info{


    padding:20px;


}





.catalogo-info h3{


    text-align:center;


    font-size:16px;


    min-height:40px;


}





.catalogo-meta{


    display:flex;


    flex-direction:column;


    align-items:center;


    gap:10px;


    margin:15px 0;


}





.catalogo-meta span{


    color:#777;


    font-size:11px;


}






.precio{


    width:100%;


    text-align:center;


    color:var(--green);


    font-size:25px;


    font-weight:900;


}





.catalogo-btn{


    height:45px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:12px;


    background:


    rgba(88,214,141,.12);



    border:

    1px solid rgba(88,214,141,.35);



    color:var(--green);


    text-decoration:none;


    font-weight:800;


}





.catalogo-btn:hover{


    background:var(--green);


    color:#000;


}









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


.cta-final{


    padding:120px 40px;


    text-align:center;


}





.cta-content h2{


    font-size:

    clamp(38px,5vw,60px);


    font-weight:900;


}





.cta-content p{


    color:var(--soft);


    margin:25px 0;


}





.cta-btn{


    display:inline-flex;


    padding:18px 45px;


    border-radius:50px;


    background:var(--green);


    color:#061006;


    font-weight:900;


    text-decoration:none;


}









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


@media(max-width:1100px){


.oxium-grid,
.destacados-grid,
.catalogo-grid{


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


}



}





@media(max-width:700px){



.hero{


padding:120px 20px 50px;


}



.hero-buttons{


flex-direction:column;


width:100%;


}




.hero-btn,
.hero-btn-outline{


width:100%;


text-align:center;


}



.oxium-grid,
.destacados-grid,
.catalogo-grid{


grid-template-columns:1fr;


}


}

/* ======================================
   IMAGENES TARJETAS RESPONSIVE
====================================== */


/* TARJETAS EXPERIENCIA */

.oxium-card{

    overflow:hidden;

}


.oxium-card img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}





/* DESTACADOS */


.destacado-image{

    width:100%;

    height:280px;

    overflow:hidden;

}



.destacado-image img{


    width:100%;

    height:100%;


    object-fit:contain;


    display:block;


}







/* CATALOGO */


.catalogo-image{


    width:100%;


    height:260px;


    overflow:hidden;


}




.catalogo-image img{


    width:100%;


    height:100%;


    object-fit:contain;


    display:block;


}









/* ===============================
        MOBILE
================================ */


@media(max-width:700px){



.oxium-card{


    height:420px;


}



.oxium-card img{


    width:100%;


    height:100%;


    object-fit:cover;


}






.destacado-image{


    height:220px;


}



.destacado-image img{


    width:100%;


    height:100%;


    object-fit:contain;


}






.catalogo-image{


    height:220px;


}



.catalogo-image img{


    width:100%;


    height:100%;


    object-fit:contain;


}



}

/* ======================================
   AJUSTE ESPACIADO HERO / DESTACADOS
====================================== */


/* SECCION EXPERIENCIA */

.descubri-oxium{

    padding:120px 40px 140px;

}



/* SEPARACION ENTRE TARJETAS Y PRODUCTOS */

.oxium-grid{

    margin-bottom:120px;

}





/* DIVISOR PREMIUM */

.descubri-oxium::after{


    content:"";


    display:block;


    width:120px;


    height:1px;


    margin:100px auto 0;


    background:

    linear-gradient(

        90deg,

        transparent,

        #58d68d,

        transparent

    );


}




/* DESTACADOS */

.destacados-section{


    padding:140px 40px;


}







/* CORRECCION MOBILE */

.oxium-grid{


    margin-bottom:80px;


}



.oxium-card{


    aspect-ratio:1 / 1;


    height:auto;


}




.destacados-section{


    padding:90px 20px;


}



}