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

.container-productos{
    max-width:1600px;
    margin:auto;
    padding:40px 60px;
}

/* RESPONSIVE */
@media (max-width:768px){
    .container-productos{
        padding:20px;
    }
}


/* ================= MENU ================= */

.categoria-box{
    background:white;
    padding:20px;
    border-radius:12px;
    border:1px solid #eee;
    box-shadow:0 5px 15px rgba(0,0,0,.03);
}


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

.product-card{
    border:1px solid #eee;
    border-radius:14px;
    padding:15px;
    background:white;
    transition:all .3s ease;
    height:100%;
    text-align:center;
    position:relative;
}

/* HOVER MÁS SUAVE */
.product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}


/* ================= IMAGEN ================= */

.product-img{
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

/* EFECTO ZOOM SUAVE */
.product-img img{
    max-width:100%;
    max-height:100%;
    transition:.3s ease;
    pointer-events:none;
    user-select:none;
}

.product-card:hover img{
    transform:scale(1.05);
}


/* ================= PROTECCION ================= */

.img-protect{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:5;
}


/* ================= ICONOS ================= */

.product-icons{
    position:absolute;
    top:10px;
    right:10px;
    opacity:0;
    transition:.3s;
    z-index:10;
}

.product-card:hover .product-icons{
    opacity:1;
}

.icon-btn{
    width:36px;
    height:36px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    transition:.2s;
}

.icon-btn:hover{
    background:#004a99;
    color:white;
    transform:scale(1.1);
}


/* ================= TEXTO ================= */

.product-name{
    font-size:14px;
    margin-top:12px;
    font-weight:500;
    color:#333;
    min-height:40px;
}


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

.btn-carrito{
    background:#ffcc00;
    border:none;
    padding:9px;
    width:100%;
    border-radius:8px;
    margin-top:10px;
    font-weight:600;
    transition:.2s;
}

/* HOVER */
.btn-carrito:hover{
    background:#ffb800;
}


/* BOTON FICHA */

.btn-ficha{
    border:1px solid #ddd;
    padding:8px;
    border-radius:8px;
    display:block;
    text-align:center;
    margin-top:6px;
    text-decoration:none;
    color:#555;
    transition:.2s;
}

.btn-ficha:hover{
    background:#f5f5f5;
}


/* ================= PAGINACION ================= */

.pagination{
    justify-content:center;
    margin-top:40px;
}

.pagination .page-link{
    border-radius:6px;
    margin:0 3px;
    color:#004a99;
}

.pagination .active .page-link{
    background:#004a99;
    border-color:#004a99;
    color:white;
}


/* ================= MODAL ================= */

.modal-producto{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.7);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.modal-content{
    background:white;
    width:100%;
    max-width:650px;
    border-radius:14px;
    max-height:90vh;
    overflow:auto;
    text-align:center;
    animation:fadeIn .3s ease;
}

@keyframes fadeIn{
    from{opacity:0; transform:scale(.9);}
    to{opacity:1; transform:scale(1);}
}

.modal-header{
    padding:15px;
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #eee;
    align-items:center;
}

.modal-close{
    width:35px;
    height:35px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    background:#f5f5f5;
}

.modal-body{
    padding:20px;
}

.modal-img{
    width:100%;
    max-height:350px;
    object-fit:contain;
    margin-bottom:10px;
}


/* ================= CARRITO ================= */

.cart-float{
    position:fixed;
    bottom:25px;
    right:25px;
    background:#004a99;
    color:white;
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
    transition:.3s;
}

.cart-float:hover{
    transform:scale(1.1);
}

.cart-count{
    position:absolute;
    top:-5px;
    right:-5px;
    background:red;
    color:white;
    border-radius:50%;
    padding:3px 7px;
    font-size:12px;
}