/* =========================================================
   PROMOCOMBO RC19
   Estética del panel de categorías y catálogo basada en la
   referencia visual aportada por el usuario.
   Archivo separado para mantener el código limpio y reversible.
   ========================================================= */

:root {
    --pc-negro: #090a0b;
    --pc-panel: #151617;
    --pc-panel-claro: #1b1c1d;
    --pc-naranja: #ff9800;
    --pc-amarillo: #ffc400;
    --pc-blanco: #f7f7f7;
    --pc-gris: #bdbdbd;
    --pc-borde: rgba(255, 255, 255, 0.28);
    --pc-borde-dorado: rgba(255, 174, 36, 0.30);
}

/* ---------- Panel de accesos por categoría ---------- */
.categoriasVisuales {
    padding: 13px 18px 8px !important;
    background:
        radial-gradient(circle at 50% -90%, rgba(255, 153, 0, 0.11), transparent 54%),
        linear-gradient(180deg, #111214 0%, #090a0b 100%) !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    border-bottom: 0 !important;
}

.categoriasVisualesCarril {
    width: min(1035px, 100%) !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(112px, 1fr)) !important;
    gap: 19px !important;
    margin: 0 auto !important;
    padding: 0 2px 10px !important;
    overflow-x: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,152,0,.55) transparent;
}

.categoriaVisual {
    min-width: 112px !important;
    min-height: 92px !important;
    padding: 8px 6px 7px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border: 1px solid var(--pc-borde-dorado) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(24,25,26,.97), rgba(12,13,14,.98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.28) !important;
    color: var(--pc-blanco) !important;
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.25px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.categoriaVisualIcono {
    width: 53px !important;
    height: 53px !important;
    display: grid !important;
    place-items: center !important;
}

.categoriaVisualIcono svg {
    width: 51px !important;
    height: 51px !important;
    fill: none !important;
    stroke: var(--pc-naranja) !important;
    stroke-width: 3.15 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: drop-shadow(0 1px 5px rgba(255,152,0,.14)) !important;
}

.categoriaVisual:hover,
.categoriaVisual:focus-visible {
    transform: translateY(-3px) !important;
    border-color: rgba(255,152,0,.88) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 11px 26px rgba(0,0,0,.44), 0 0 0 1px rgba(255,152,0,.10) !important;
    outline: none !important;
}

/* ---------- Título destacado ---------- */
.tituloSeccionDestacadaRc18 {
    width: min(1060px, calc(100% - 32px)) !important;
    padding: 3px 0 8px !important;
    gap: 10px !important;
}

.tituloSeccionDestacadaRc18 h2 {
    color: var(--pc-naranja) !important;
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif !important;
    font-size: clamp(17px, 1.8vw, 21px) !important;
    font-weight: 900 !important;
    letter-spacing: -.55px !important;
    text-shadow: none !important;
}

.tituloSeccionDestacadaRc18 h2 b { color: var(--pc-blanco) !important; }
.tituloSeccionDestacadaRc18 > span { background: var(--pc-blanco) !important; }

/* ---------- Secciones y carruseles del catálogo ---------- */
#contenedorPromos {
    background: linear-gradient(180deg, #090a0b 0%, #060708 100%) !important;
}

body .categoriaProductos {
    width: min(1230px, calc(100% - 76px)) !important;
    margin: 0 auto 28px !important;
    padding: 0 !important;
    position: relative !important;
}

body #promociones.categoriaProductos { margin-bottom: 25px !important; }
body #promociones.categoriaProductos > .cabeceraCategoria { display: none !important; }

body .categoriaProductos .cabeceraCategoria {
    min-height: 42px !important;
    margin: 0 0 7px !important;
    padding: 0 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
}

body .categoriaProductos .tituloCategoria {
    margin: 0 !important;
    color: var(--pc-blanco) !important;
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: -.4px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

body .categoriaProductos :is(.carruselProductos,.grillaProductos) {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 80px) / 5) !important;
    grid-template-columns: none !important;
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 3px 10px !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
}

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

/* ---------- Tarjetas: misma configuración en todo el catálogo ---------- */
body .categoriaProductos .promo {
    width: auto !important;
    min-width: 0 !important;
    height: 348px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    border: 1px solid var(--pc-borde) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, var(--pc-panel-claro), var(--pc-panel)) !important;
    box-shadow: 0 9px 22px rgba(0,0,0,.36) !important;
    transform: none !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
    cursor: pointer !important;
}

body .categoriaProductos .promo::before,
body .categoriaProductos .promo::after { display: none !important; }

body .categoriaProductos .promo:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255,152,0,.74) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.50) !important;
}

body .categoriaProductos .promo .contenedorImagenProducto {
    position: relative !important;
    width: 100% !important;
    height: 196px !important;
    min-height: 196px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #101112 !important;
}

body .categoriaProductos .promo .promoImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
    transform: none !important;
    transition: transform .32s ease !important;
}

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

body .categoriaProductos .promo .etiquetasProducto {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    right: auto !important;
    z-index: 3 !important;
    display: flex !important;
    gap: 5px !important;
}

body .categoriaProductos .promo .etiquetaProducto {
    margin: 0 !important;
    padding: 5px 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ffd52b, #f6ab00) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.34) !important;
    color: #141414 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

body .categoriaProductos .promo .promoInfo {
    min-height: 152px !important;
    flex: 1 !important;
    padding: 10px 12px 11px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: transparent !important;
}

body .categoriaProductos .promo .codigoPromo {
    margin: 0 0 4px !important;
    padding: 0 !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pc-blanco) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

body .categoriaProductos .promo h3,
body .categoriaProductos .promo .promoInfo h3 {
    min-height: 43px !important;
    margin: 0 !important;
    color: #fff !important;
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: -.2px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

body .categoriaProductos .promo .descripcionPromo,
body .categoriaProductos .promo .estadoPromo,
body .categoriaProductos .promo .botonCarrito { display: none !important; }

body .categoriaProductos .promo .precioBloque {
    min-height: auto !important;
    margin: auto 0 0 !important;
}

body .categoriaProductos .promo :is(.precioPromo,.precioProducto,.precio) {
    margin: 0 !important;
    color: var(--pc-naranja) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

/* ---------- Flechas laterales, iguales en todos los carruseles ---------- */
body .categoriaProductos .controlesCarrusel {
    display: flex !important;
    position: static !important;
}

body .categoriaProductos .flechaCarrusel {
    position: absolute !important;
    top: 50% !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: -20px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    z-index: 10 !important;
    border: 3px solid var(--pc-naranja) !important;
    border-radius: 50% !important;
    background: #111213 !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.48) !important;
    opacity: 1 !important;
    transition: background .18s ease, color .18s ease, transform .18s ease !important;
}

body .categoriaProductos .flechaCarrusel.izquierda { left: -53px !important; }
body .categoriaProductos .flechaCarrusel.derecha { right: -53px !important; }
body .categoriaProductos .flechaCarrusel:hover:not(:disabled) {
    background: var(--pc-naranja) !important;
    color: #111 !important;
    transform: scale(1.05) !important;
}
body .categoriaProductos .flechaCarrusel:disabled { opacity: .28 !important; cursor: default !important; }

.iconoFlechaCarrusel {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 3.1 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* ---------- Adaptación responsive ---------- */
@media (max-width: 1100px) {
    .categoriasVisualesCarril {
        grid-template-columns: repeat(7, 112px) !important;
        justify-content: flex-start !important;
        gap: 13px !important;
    }
    body .categoriaProductos { width: calc(100% - 30px) !important; }
    body .categoriaProductos :is(.carruselProductos,.grillaProductos) {
        grid-auto-columns: minmax(220px, 31vw) !important;
        gap: 14px !important;
    }
    body .categoriaProductos .flechaCarrusel { display: none !important; }
}

@media (max-width: 650px) {
    .categoriasVisuales { padding: 10px 9px 5px !important; }
    .categoriasVisualesCarril {
        grid-template-columns: repeat(7, 91px) !important;
        gap: 9px !important;
    }
    .categoriaVisual {
        min-width: 91px !important;
        min-height: 76px !important;
        padding: 5px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
    }
    .categoriaVisualIcono,
    .categoriaVisualIcono svg { width: 40px !important; height: 40px !important; }

    .tituloSeccionDestacadaRc18 { width: calc(100% - 18px) !important; padding-top: 7px !important; }
    .tituloSeccionDestacadaRc18 > span { flex-basis: 20px !important; }
    .tituloSeccionDestacadaRc18 h2 { font-size: 15px !important; }

    body .categoriaProductos { width: calc(100% - 18px) !important; margin-bottom: 22px !important; }
    body .categoriaProductos .tituloCategoria { font-size: 17px !important; }
    body .categoriaProductos :is(.carruselProductos,.grillaProductos) {
        grid-auto-columns: 76vw !important;
        gap: 12px !important;
    }
    body .categoriaProductos .promo { height: 332px !important; }
    body .categoriaProductos .promo .contenedorImagenProducto {
        height: 185px !important;
        min-height: 185px !important;
    }
}