/* =========================================================
   PROMOCOMBO RC21 — SISTEMA ÚNICO DE TARJETAS
   Una sola estructura visual para promociones y productos.
   ========================================================= */

:root {
    --pc-card-bg: #181a1d;
    --pc-card-surface: #22252a;
    --pc-card-border: #4a4f55;
    --pc-card-text: #f7f7f7;
    --pc-card-muted: #c7c9cd;
    --pc-orange: #ff9800;
    --pc-orange-light: #ffb84d;
    --pc-yellow: #ffc400;
    --pc-green: #35df84;
    --pc-action-bg: #3a3f47;
}

/* Carruseles de todas las categorías */
body .categoriaProductos {
    width: min(1400px, calc(100% - 96px)) !important;
    margin-inline: auto !important;
    position: relative !important;
}

body .categoriaProductos :is(.carruselProductos, .grillaProductos) {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 40px) / 5) !important;
    gap: 10px !important;
    align-items: stretch !important;
    padding: 4px 0 14px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
}

body .categoriaProductos :is(.carruselProductos, .grillaProductos)::-webkit-scrollbar {
    display: none !important;
}

/* Componente universal */
body .categoriaProductos :is(.carruselProductos, .grillaProductos) > .promo {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: 248px minmax(0, 1fr) !important;
    overflow: hidden !important;
    background: var(--pc-card-bg) !important;
    border: 1px solid var(--pc-card-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .38) !important;
    scroll-snap-align: start !important;
    transform: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

body .categoriaProductos :is(.carruselProductos, .grillaProductos) > .promo:hover,
body .categoriaProductos :is(.carruselProductos, .grillaProductos) > .promo:focus-visible {
    border-color: var(--pc-orange) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .52) !important;
    transform: translateY(-2px) !important;
    outline: none !important;
}

/* Área de fotografía: no modifica los archivos originales */
body .categoriaProductos .promo .contenedorImagenProducto {
    position: relative !important;
    width: 100% !important;
    height: 248px !important;
    min-height: 248px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #0d0f11 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body .categoriaProductos .promo .promoImg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
    transform: scale(1) !important;
    transition: transform .28s ease !important;
}

body .categoriaProductos .promo:hover .promoImg {
    transform: scale(1.025) !important;
}

/* Etiquetas */
body .categoriaProductos .promo .etiquetasProducto {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    z-index: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    pointer-events: none !important;
}

body .categoriaProductos .promo .etiquetaProducto {
    margin: 0 !important;
    padding: 9px 13px !important;
    color: #111 !important;
    background: linear-gradient(180deg, #ffd52a, #ffb800) !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35) !important;
    font: 900 11px/1 Arial, Helvetica, sans-serif !important;
    letter-spacing: .15px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

/* Cuerpo con filas estables: todo queda alineado */
body .categoriaProductos .promo .promoInfo {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 15px 14px 12px !important;
    display: grid !important;
    grid-template-rows: 18px 44px 42px 32px 20px 50px !important;
    row-gap: 7px !important;
    align-content: stretch !important;
    background: var(--pc-card-surface) !important;
}

body .categoriaProductos .promo .codigoPromo {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--pc-card-text) !important;
    background: transparent !important;
    border: 0 !important;
    font: 900 14px/18px Arial, Helvetica, sans-serif !important;
    text-transform: uppercase !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body .categoriaProductos .promo h3,
body .categoriaProductos .promo .promoInfo h3 {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    color: var(--pc-card-text) !important;
    font: 900 18px/1.18 Arial, Helvetica, sans-serif !important;
    letter-spacing: -.25px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

body .categoriaProductos .promo .descripcionPromo {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    color: var(--pc-card-muted) !important;
    font: 500 12px/1.45 Arial, Helvetica, sans-serif !important;
    text-align: left !important;
    white-space: normal !important;
}

body .categoriaProductos .promo .precioBloque {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: end !important;
    gap: 8px !important;
}

body .categoriaProductos .promo :is(.precioPromo, .precioProducto, .precio) {
    margin: 0 !important;
    color: var(--pc-orange) !important;
    font: 900 27px/1 Arial, Helvetica, sans-serif !important;
    letter-spacing: -.65px !important;
    text-shadow: none !important;
}

body .categoriaProductos .promo .precioAnterior {
    color: #adb1b6 !important;
    font: 700 12px/1 Arial, Helvetica, sans-serif !important;
}

body .categoriaProductos .promo .estadoPromo {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    overflow: visible !important;
    color: var(--pc-green) !important;
    border: 0 !important;
    font: 900 14px/20px Arial, Helvetica, sans-serif !important;
    text-align: left !important;
    white-space: nowrap !important;
}

body .categoriaProductos .promo .estadoPromo::before {
    content: "" !important;
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 30%, #adffd0 0 10%, #46e28b 42%, #159453 100%) !important;
    box-shadow: 0 0 7px rgba(53, 223, 132, .35) !important;
}

body .categoriaProductos .promo .estadoNoDisponible {
    color: #ff6d68 !important;
}

body .categoriaProductos .promo .estadoNoDisponible::before {
    background: radial-gradient(circle at 35% 30%, #ffd0ce 0 10%, #ff706b 42%, #ad2723 100%) !important;
    box-shadow: 0 0 7px rgba(255, 109, 104, .3) !important;
}

/* Botón universal */
body .categoriaProductos .promo .botonCarrito {
    box-sizing: border-box !important;
    position: static !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    color: var(--pc-card-text) !important;
    background: var(--pc-action-bg) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .06) !important;
    font: 900 15px/1 Arial, Helvetica, sans-serif !important;
    cursor: pointer !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease !important;
}

body .categoriaProductos .promo .botonCarrito::before {
    content: "" !important;
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 8H6'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 8H6'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body .categoriaProductos .promo .botonCarrito:is(:hover, :focus-visible, :active) {
    color: #211407 !important;
    background: var(--pc-orange-light) !important;
    border-color: var(--pc-orange-light) !important;
    box-shadow: 0 0 0 3px rgba(255, 184, 77, .12) !important;
    outline: none !important;
}

body .categoriaProductos .promo .botonCarrito:active {
    transform: translateY(1px) !important;
}

body .categoriaProductos .promo .botonCarrito:disabled {
    color: #9b9da1 !important;
    background: #303338 !important;
    border-color: #41454a !important;
    cursor: not-allowed !important;
    opacity: .78 !important;
}

/* Flechas, centradas respecto de las tarjetas */
body .categoriaProductos .flechaCarrusel {
    top: 50% !important;
    width: 48px !important;
    height: 48px !important;
    margin-top: -24px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: #111315 !important;
    border: 3px solid var(--pc-orange) !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45) !important;
}

body .categoriaProductos .flechaCarrusel:is(:hover, :focus-visible, :active) {
    color: #211407 !important;
    background: var(--pc-orange-light) !important;
    border-color: var(--pc-orange-light) !important;
    outline: none !important;
}

/* El naranja claro reemplaza verdes de interacción en toda la web */
body :is(
    .botonAgregar,
    #finalizarPedido,
    #enviarPedido,
    .detallePromocionMovilAccion,
    .botonConfirmarConfiguracion,
    .botonUbicacionPrimario,
    .botonPortadaWhatsapp
):is(:hover, :focus-visible, :active) {
    color: #211407 !important;
    background: var(--pc-orange-light) !important;
    border-color: var(--pc-orange-light) !important;
    outline: none !important;
}

@media (max-width: 1180px) {
    body .categoriaProductos :is(.carruselProductos, .grillaProductos) {
        grid-auto-columns: minmax(250px, 31vw) !important;
    }
}

@media (max-width: 900px) {
    body .categoriaProductos {
        width: calc(100% - 30px) !important;
    }

    body .categoriaProductos :is(.carruselProductos, .grillaProductos) {
        grid-auto-columns: minmax(245px, 46vw) !important;
    }
}

@media (max-width: 600px) {
    body .categoriaProductos {
        width: calc(100% - 18px) !important;
    }

    body .categoriaProductos :is(.carruselProductos, .grillaProductos) {
        grid-auto-columns: 84vw !important;
        gap: 10px !important;
    }

    body .categoriaProductos :is(.carruselProductos, .grillaProductos) > .promo {
        height: 468px !important;
        min-height: 468px !important;
        max-height: 468px !important;
        grid-template-rows: 220px minmax(0, 1fr) !important;
        border-radius: 12px !important;
    }

    body .categoriaProductos .promo .contenedorImagenProducto {
        height: 220px !important;
        min-height: 220px !important;
    }

    body .categoriaProductos .promo .promoInfo {
        padding: 13px 12px 10px !important;
        grid-template-rows: 17px 40px 36px 30px 19px 46px !important;
        row-gap: 6px !important;
    }

    body .categoriaProductos .promo h3,
    body .categoriaProductos .promo .promoInfo h3 {
        font-size: 16px !important;
    }

    body .categoriaProductos .promo .descripcionPromo {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    body .categoriaProductos .promo :is(.precioPromo, .precioProducto, .precio) {
        font-size: 25px !important;
    }

    body .categoriaProductos .promo .botonCarrito {
        height: 46px !important;
        min-height: 46px !important;
        font-size: 14px !important;
    }
}