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


.catalogo-hero{


padding:

130px 40px 80px;


text-align:center;



background:

radial-gradient(

circle,

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

transparent 45%

);



}



.catalogo-hero span{


color:var(--green);


letter-spacing:5px;


font-size:13px;


}



.catalogo-hero h1{


font-size:

clamp(40px,6vw,70px);


margin:25px 0;


font-weight:900;


}



.catalogo-hero p{


color:#888;


font-size:18px;


}







/* CONTENEDOR */


.catalogo{


max-width:1300px;


margin:auto;


padding:

40px;


}






/* BUSCADOR */


.catalogo-search{


display:flex;


max-width:500px;


margin:

0 auto 60px;


}



.catalogo-search input{


flex:1;


background:#111;


border:

1px solid rgba(255,255,255,.12);


padding:16px 20px;


border-radius:40px 0 0 40px;


color:white;


font-size:15px;


}



.catalogo-search button{


width:60px;


border:0;


border-radius:

0 40px 40px 0;


background:var(--green);


font-size:20px;


}








/* GRID */


.productos-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}






/* CARD */


.producto-card{


background:

linear-gradient(

180deg,

#101010,

#070707

);


border-radius:24px;


overflow:hidden;


border:

1px solid rgba(255,255,255,.06);


transition:.35s;


}





.producto-card:hover{


transform:translateY(-8px);


border-color:

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


box-shadow:

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


}







.producto-image{


height:280px;


display:flex;


align-items:center;


justify-content:center;


}





.producto-image img{


width:90%;


height:90%;


object-fit:contain;


}






/* =====================================
        INFORMACION PRODUCTO
===================================== */


.producto-info{


padding:25px;


text-align:center;


display:flex;


flex-direction:column;


}





.producto-info h3{


font-size:20px;


font-weight:800;


margin-bottom:12px;


line-height:1.3;


}





.producto-descripcion{


color:#999;


font-size:14px;


line-height:1.6;


min-height:55px;


margin-bottom:15px;


}






.producto-precio{


font-size:28px;


font-weight:900;


margin:

15px 0;


color:white;


letter-spacing:.5px;


}





.producto-stock{


font-size:12px;


color:var(--green);


margin-bottom:20px;


}


.producto-btn.disabled{

    background:

    rgba(255,255,255,.08);


    color:#777;


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


    cursor:not-allowed;


    opacity:.7;


    box-shadow:none;


    transform:none;

}



.producto-btn.disabled:hover{

    transform:none;

    background:

    rgba(255,255,255,.08);

}



.producto-btn,
.producto-wsp{


margin-top:10px;


}




.producto-btn{


background:white;


color:#111;


}





.producto-wsp{


border:

1px solid var(--green);


color:var(--green);


}






.producto-wsp:hover{


background:var(--green);


color:#111;


}







/* PAGINACION */


.paginacion{


display:flex;


justify-content:center;


gap:10px;


margin-top:70px;


}



.paginacion a{


width:40px;


height:40px;


display:flex;


align-items:center;


justify-content:center;


border-radius:50%;


background:#111;


color:white;


text-decoration:none;


}



.paginacion .active{


background:var(--green);


color:#111;


}





.sin-productos{


grid-column:1/-1;


text-align:center;


font-size:22px;


color:#777;


}







@media(max-width:1100px){


.productos-grid{


grid-template-columns:

repeat(3,1fr);


}


}



@media(max-width:750px){


.catalogo{


padding:25px;


}



.productos-grid{


grid-template-columns:

repeat(2,1fr);


}


.producto-image{


height:220px;


}


}




@media(max-width:500px){


.productos-grid{


grid-template-columns:1fr;


}



}

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


.producto-actions{


display:flex;

flex-direction:column;

gap:12px;

margin-top:25px;


}





.producto-btn{


display:flex;

align-items:center;

justify-content:center;


height:48px;


border-radius:14px;


background:linear-gradient(

135deg,

#00e676,

#00c853

);


color:#050505;


font-weight:800;


font-size:13px;


text-decoration:none;


letter-spacing:.5px;


transition:.3s ease;


border:none;


cursor:pointer;


}





.producto-btn:hover{


transform:translateY(-3px);


box-shadow:

0 10px 25px rgba(0,230,118,.35);


}






/* SIN STOCK */


.producto-btn.disabled{


background:#252525;


color:#777;


cursor:not-allowed;


box-shadow:none;


transform:none;


}







.producto-wsp{


height:48px;


display:flex;


align-items:center;


justify-content:center;


border-radius:14px;


border:

1px solid rgba(255,255,255,.18);


color:white;


text-decoration:none;


font-weight:700;


font-size:13px;


transition:.3s ease;


}





.producto-wsp:hover{


border-color:#58d68d;


color:#58d68d;


box-shadow:

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


}