/* ===== Catálogo cards ===== */
.rp-card {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

.rp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* Imagen dentro de la card */
.rp-card .card-img-top {
    transition: transform .3s ease;
}

.rp-card:hover .card-img-top {
    transform: scale(1.04);
}

/* ===== Controles de cantidad ===== */
.rp-cantidad-control .form-control {
    max-width: 60px;
    border-radius: 8px;
    text-align: center;
}

.rp-cantidad-control .form-control:focus {
    background: #f4f8ff;
    box-shadow: 0 0 0 2px rgba(13,110,253,.25);
}

/* Botones + y - */
.rp-cantidad-control .btn {
    border-radius: 8px;
}

/* ===== Botón Agregar ===== */
.rp-add-carrito {
    border-radius: 10px;
    transition: background-color .2s ease, transform .15s ease;
}

.rp-add-carrito:hover {
    transform: translateY(-1px);
}

/* Animación al agregar */
.rp-add-carrito.added {
    animation: added-carrito .4s ease;
}

@keyframes added-carrito {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); background:#198754; }
    100% { transform: scale(1); }
}

/* ===== Modal producto ===== */
#rpModal .modal-content {
    border-radius: 14px;
}

#rpModal img {
    border-radius: 10px;
    transition: transform .3s ease;
}

#rpModal img:hover {
    transform: scale(1.03);
}

/* ===== Loader catálogo ===== */
#rpCatalogoLoading {
    opacity: 0;
    transition: opacity .3s ease;
}
#rpCatalogoLoading.show {
    opacity: 1;
}

/* ===== Grid ===== */
#rpCatalogoGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}