/* =========================================================
   PROMOCOMBO RC19 — GALERÍA VISUAL Y TARJETAS
   Archivo independiente para mantener el código ordenado.
   ========================================================= */

:root {
    --rc19-bg: #08090a;
    --rc19-panel: #151617;
    --rc19-panel-soft: #1b1c1d;
    --rc19-border: #4b4c4d;
    --rc19-orange: #ff9800;
    --rc19-yellow: #ffc400;
    --rc19-white: #f7f7f7;
    --rc19-muted: #c6c6c6;
}

/* ---------- Accesos visuales a categorías ---------- */
.categoriasVisuales {
    padding: 12px 18px 7px !important;
    background:
        radial-gradient(circle at 50% -80%, rgba(255, 152, 0, .13), transparent 48%),
        linear-gradient(180deg, #111214 0%, var(--rc19-bg) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    border-bottom: 0 !important;
}

.categoriasVisualesCarril {
    width: min(1030px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 2px 7px !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(104px, 1fr)) !important;
    gap: 18px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
}

.categoriasVisualesCarril::-webkit-scrollbar { display: none; }

.categoriaVisual {
    min-width: 104px !important;
    min-height: 86px !important;
    padding: 7px 7px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: var(--rc19-white) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.25px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    background: linear-gradient(180deg, rgba(25, 26, 27, .95), rgba(13, 14, 15, .98)) !important;
    border: 1px solid rgba(255, 152, 0, .27) !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 17px rgba(0,0,0,.28) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.categoriaVisual:hover,
.categoriaVisual:focus-visible {
    color: var(--rc19-white) !important;
    border-color: var(--rc19-orange) !important;
    transform: translateY(-3px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 11px 24px rgba(0,0,0,.42), 0 0 14px rgba(255,152,0,.09) !important;
    outline: none !important;
}

.categoriaVisualIcono,
.categoriaVisualIcono svg {
    width: 48px !important;
    height: 48px !important;
}

.categoriaVisualIcono svg {
    overflow: visible;
    fill: none;
    stroke: var(--rc19-orange);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 4px rgba(255, 152, 0, .14));
}

.categoriaVisualIcono .trazoBlanco { stroke: var(--rc19-white); }
.categoriaVisualIcono .rellenoNaranja { fill: var(--rc19-orange); stroke: var(--rc19-orange); }

/* ---------- Fondo del catálogo ---------- */
.seccionPromocionesPrincipal,
#contenedorPromos,
#catalogo {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 152, 0, .04), transparent 34%),
        linear-gradient(180deg, #090a0b 0%, #060708 100%) !important;
}

/* ---------- Títulos de secciones ---------- */
.tituloSeccionDestacadaRc18 {
    width: min(1040px, calc(100% - 28px)) !important;
    padding: 3px 0 8px !important;
    gap: 10px !important;
}

.tituloSeccionDestacadaRc18 h2,
.categoriaProductos .tituloCategoria {
    color: var(--rc19-white) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(16px, 1.8vw, 21px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.55px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

.tituloSeccionDestacadaRc18 h2 b { color: var(--rc19-white) !important; }
.tituloSeccionDestacadaRc18 h2::after { content: " destacadas"; color: var(--rc19-orange); }
.tituloSeccionDestacadaRc18 h2 { font-size: 0 !important; }
.tituloSeccionDestacadaRc18 h2 b { font-size: clamp(16px, 1.8vw, 21px) !important; }
.tituloSeccionDestacadaRc18 h2::after { font-size: clamp(16px, 1.8vw, 21px) !important; }

.tituloSeccionDestacadaRc18 > span {
    flex: 0 1 32px !important;
    height: 2px !important;
    background: var(--rc19-white) !important;
}

.categoriaProductos {
    width: min(1240px, calc(100% - 72px)) !important;
    margin: 0 auto !important;
    padding: 13px 0 19px !important;
    position: relative !important;
}

#promociones.categoriaProductos { padding-top: 0 !important; }
#promociones.categoriaProductos > .cabeceraCategoria { display: none !important; }

.categoriaProductos .cabeceraCategoria {
    min-height: 31px !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.categoriaProductos .tituloCategoria {
    margin: 0 !important;
}

/* Oculta únicamente los emojis de los encabezados dinámicos. */
.categoriaProductos .tituloCategoria { font-size: 0 !important; }
.categoriaProductos .tituloCategoria::after {
    content: attr(data-titulo);
    font-size: clamp(16px, 1.8vw, 21px);
}

/* ---------- Carruseles de todas las categorías ---------- */
.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;
    padding: 5px 2px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
}

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

/* ---------- Tarjetas: misma estética en todo el sitio ---------- */
.categoriaProductos .promo {
    width: auto !important;
    min-width: 0 !important;
    height: 350px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    cursor: pointer !important;
    background: linear-gradient(180deg, #1b1c1d 0%, #151617 100%) !important;
    border: 1px solid rgba(255,255,255,.29) !important;
    border-radius: 10px !important;
    box-shadow: 0 9px 21px rgba(0,0,0,.34) !important;
    transform: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.categoriaProductos .promo:hover,
.categoriaProductos .promo:focus-visible {
    transform: translateY(-3px) !important;
    border-color: rgba(255,152,0,.8) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.5) !important;
    outline: none !important;
}

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

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

.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: none !important;
    transition: transform .3s ease !important;
}

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

.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;
}

.categoriaProductos .promo .etiquetaProducto {
    margin: 0 !important;
    padding: 5px 9px !important;
    color: #171717 !important;
    background: linear-gradient(180deg, #ffd51d 0%, #f3ae00 100%) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.32) !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;
}

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

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

.categoriaProductos .promo h3,
.categoriaProductos .promo .promoInfo h3 {
    min-height: 38px !important;
    margin: 0 !important;
    color: var(--rc19-white) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: -.25px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

/* La tarjeta completa conserva la acción del botón. */
.categoriaProductos .promo .descripcionPromo,
.categoriaProductos .promo .estadoPromo,
.categoriaProductos .promo .botonCarrito {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

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

.categoriaProductos .promo :is(.precioPromo, .precioProducto, .precio) {
    color: var(--rc19-orange) !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 circulares del carrusel ---------- */
.categoriaProductos .controlesCarrusel,
.categoriaProductos .controlesCarruselSoloMovil {
    display: contents !important;
}

.categoriaProductos .flechaCarrusel {
    position: absolute !important;
    top: 53% !important;
    width: 40px !important;
    height: 40px !important;
    margin: -20px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: var(--rc19-white) !important;
    background: #111 !important;
    border: 3px solid var(--rc19-orange) !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.5) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0 !important;
    line-height: 1 !important;
    z-index: 12 !important;
    cursor: pointer !important;
    transition: background .18s ease, color .18s ease, transform .18s ease !important;
}

.categoriaProductos .flechaCarrusel::before {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
}

.categoriaProductos .flechaCarrusel.izquierda { left: -53px !important; }
.categoriaProductos .flechaCarrusel.derecha { right: -53px !important; }
.categoriaProductos .flechaCarrusel.izquierda::before { transform: rotate(-135deg) translate(-1px, -1px); }
.categoriaProductos .flechaCarrusel.derecha::before { transform: rotate(45deg) translate(-1px, 1px); }

.categoriaProductos .flechaCarrusel:hover,
.categoriaProductos .flechaCarrusel:focus-visible {
    color: #111 !important;
    background: var(--rc19-orange) !important;
    transform: scale(1.05) !important;
    outline: none !important;
}

@media (max-width: 1099px) {
    .categoriaProductos :is(.carruselProductos, .grillaProductos) {
        grid-auto-columns: minmax(215px, 34vw) !important;
        gap: 15px !important;
    }
}

@media (max-width: 900px) {
    .categoriasVisualesCarril {
        grid-template-columns: repeat(7, 104px) !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }

    .categoriaProductos {
        width: calc(100% - 28px) !important;
    }

    .categoriaProductos .flechaCarrusel { display: none !important; }

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

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

    .categoriaProductos { width: calc(100% - 20px) !important; padding-bottom: 14px !important; }
    .categoriaProductos :is(.carruselProductos, .grillaProductos) { grid-auto-columns: 78vw !important; gap: 12px !important; }
    .categoriaProductos .promo { height: 342px !important; }
    .categoriaProductos .promo .contenedorImagenProducto { height: 207px !important; min-height: 207px !important; }
}