/* ======================================================================
   COMPUGARDEN - TODO EL DISENO DEL SITIO
   Se carga desde HEADER_CSS_JS. Todos los cambios de diseno se hacen ACA.
   Orden = el mismo en que la web los cargaba antes (no cambiarlo):
     1. Base heredada (lo que servia de estilosCustom3.css)
     2. Diseno nuevo general (antes en HEADER_CSS_JS)
     3. Armador de PC (antes en HEADER_CSS_JS)
     4. Filtros del armador (antes en HEADER_CSS_JS)
     5. Footer (antes en HEADER)
     6. Ventanas (antes en HEADER)
     7. Ventana de cuotas (antes en HEADER)
     8. Ventanas en modo claro (antes en HEADER)
     9. Diseno viejo cgnew9.css (antes en GitHub MrObjection)
    10. Boton flotante de WhatsApp (antes en HEADER)
    11. Menu lateral en celular (antes en HEADER)
    12. Header de la tienda (antes en HEADER)
    13. Arreglos para celular (antes en HEADER)
    14. Ventana "Se agrego al carrito" (antes en HEADER)
    15. Home vieja cgnewhome3.css (antes en GitHub MrObjection)
    16. Listados en celular: 2 tarjetas por fila
   ====================================================================== */

/* ======================================================================
   1. BASE HEREDADA (lo que servia de estilosCustom3.css)
   estilosCustom3.css ya no se usa: el editor de GBP lo danaba al guardar.
   Se quitaron las reglas del header viejo, de los margenes de pagina,
   del slider y del fondo parallax (las manejan el HEAD y SLIDER2).
   ====================================================================== */

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:400,700);
html{
    overflow-x:hidden
}
body,h1,h2,h3,h4,h5,h6,i.carritoeliminar span{
    font-family:'roboto',sans-serif
}
.fixedtop .redestop i,.fixedtop button.btn.btn-buscartop i,footer,footer a:hover{
    color:#fff
}
footer div.footer-col a{
    display:block
}
footer div.infopie{
    font-size:14px;
    text-align:left
}
footer div.footer-col h3{
    color:#fff;
    font-weight:700
}
@media (max-width:480px){
    div.footer-col,div.footer-col h3{
        text-align:left
    }
    div.infopie{
        border-bottom:1px solid #e0e0e0;
        margin-bottom:15px;
        padding-bottom:15px
    }
}
footer .redes,section#noticiasHome{
    margin-top:15px
}
footer .redes a:hover{
    text-decoration:none
}
footer div.infopie .redes i{
    font-size:24px
}
.search,.social-share,ul.social-share li{
    display:inline-block
}
.aparece,.social,div.ingresotop{
    text-align:right
}
.form-control:focus,.search_box{
    outline:0;
    box-shadow:none
}
.title-sol span,.title-sol.style2 span,.widget h5,h4.tit_categorias{
    text-transform:uppercase
}
.title-sol.style2::after{
    background:#ddd;
    content:"";
    display:block;
    height:1px;
    margin-left:10%;
    position:absolute;
    top:28px;
    width:80%;
    z-index:1
}
.title-sol.style2{
    font-size:36px;
    font-weight:lighter;
    line-height:36px;
    margin:30px 0 20px;
    padding:0;
    position:relative;
    border:0
}
.title-sol{
    font-family:Calibri;
    color:#454545;
    border-bottom:2px solid #ddd;
    border-top:2px solid #ddd;
    font-size:22px;
    line-height:24px;
    margin:10px 0;
    padding:0
}
.title-sol.style2 span{
    color:#454545;
    display:table;
    position:relative;
    z-index:2;
    background:#fff;
    padding:5px 15px;
    text-align:center;
    width:auto;
    margin:0 auto
}
.title-sol span{
    display:inline-block
}
a,body{
    color:#4e4e4e
}
body{
    background:#fff;
    font-weight:300;
    line-height:19px;
    font-size:14px;
    padding-top:0
}
b,div.dlarga b,strong{
    font-weight:700
}
.btn,ul#formaspago li label{
    cursor:pointer
}
.btn-compra,.carrito_top,.price,.tipoCambio,p.semaforostock{
    display:none
}
h1,h2,h4,h5,h6{
    font-weight:600;
    color:#000
}
h1{
    font-size:250%
}
h2{
    font-size:180%
}
.controls .fa,.form-control,.form-group label,h2#pie_seo b{
    font-weight:300
}
h3{
    font-size:120%;
    color:#787878;
    font-weight:400;
    line-height:24px
}
h4{
    font-size:100%
}
h5{
    font-size:115%
}
h1.tit-gral{
    font:700 20px 'roboto',sans-serif
}
h1.titulos{
    font:600 20px 'roboto',sans-serif;
    background:#f0f0f0;
    border:1px solid #ccc;
    border-radius:4px;
    -webkit-border-radius:4px;
    padding:8px;
    margin:10px 0 20px
}
#log1 i,#nolog1 i,h1.titulos i{
    color:#e91e8c
}
input[type=email],input[type=number],input[type=password],input[type=text]{
    border-color:#ddd;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    border-style:solid;
    border-width:1px;
    color:#111;
    font-size:14px;
    margin-bottom:10px;
    height:36px
}
a{
    -webkit-transition:color .1s,background-color .1s;
    -moz-transition:color .1s,background-color .1s;
    -o-transition:color .1s,background-color .1s;
    transition:color .1s,background-color .1s
}
.container.general{
    padding-bottom:30px
}
.search .input-group,div.button-pager li.button.pager a{
    display:block
}
.search,.search i{
    color:#222
}
.search{
    margin-right:0;
    position:relative
}
input.search-form,input.search-form-movil{
    background:#fff;
    border:1px solid #999;
    width:550px;
    color:#999;
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
    height:45px;
    padding:15px 12px;
    font-size:14px;
    margin-bottom:0
}
input.search-form-movil{
    border:1px solid #ccc;
    width:90%;
    height:35px;
    padding:6px 12px
}
@media (max-width:1440px){
    input.search-form{
        width:200px
    }
}
@media (max-width:1024px){
    input.search-form{
        width:110px
    }
}
button.btn-buscartop{
    margin-left:-35px!important;
    margin-top:5px;
    background:0 0
}
input.search-form:focus,input.search-form:hover{
    width:650px
}
@media (max-width:480px){
    input.search-form:focus,input.search-form:hover{
        width:300px
    }
}
.fixedtop{
    position:fixed!important;
    top:0!important;
    z-index:300;
    width:100%!important;
    border-bottom:1px solid #ccc;
    box-shadow:0 0 8px 0 #888;
    background:#c61624
}
.fixedtop .container{
    margin:0 auto;
    max-width:1250px
}
.fixedtop a.navbar-brand img{
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    -webkit-filter:brightness(100%);
    filter:brightness(100%)
}
.fixedtop img.cougarboto{
    filter:grayscale(100%)!important;
    filter:brightness(100%)!important
}
.fixedtop i,.fixedtop span.carritotop,.fixedtop span.carritotop a,.fixedtop ul.navbar-nav>li>a{
    color:#fff
}
.dropdown-menu #nombre_usuario,.fixedtop i.fa.fa-search,ul#menutop li a:hover,ul.social-share li a:hover{
    color:#000
}
span.cart_top a.ircarrito{
    padding:5px;
    display:block;
    float:right;
    background:#e91e8c;
    color:#fff;
    text-decoration:none
}
ul.nav.navbar-nav{
    margin-top:0;
    margin-left:0
}
.container.checkout,div#articulos.container,div#detalle.container,div.container.micuenta{
    max-width:1215px
}
div#barrahormiga{
    margin-left:auto
}
@media (max-width:1920px) and (min-width:1024px){
    a.nav-link{
        font-size:15px;
        color:#e91e8c
    }
    .navbar.navbar-expand-lg{
        height:120px
    }
    div#navbarNavDropdown{
        position:absolute;
        bottom:5px;
        left:10px
    }
    .navbar-brand,div#carritoDesktop{
        position:absolute;
        top:0
    }
    .navbar-brand{
        padding:0;
        margin:0;
        top:10px
    }
}
@media (max-width:480px){
    .navbar-brand{
        padding:0;
        margin:0;
        position:relative;
        top:0
    }
    ul.nav.navbar-nav{
        margin-top:0;
        margin-left:0
    }
    .container>.navbar-collapse,.container>.navbar-header{
        margin-left:-20px
    }
    .input-group-btn{
        position:absolute;
        font-size:0;
        white-space:nowrap;
        right:0;
        top:0
    }
}
.navbar-nav.nav{
    font:700 13px 'roboto condensed',sans-serif!important;
    color:#000
}
.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{
    padding-left:15px
}
.navbar-nav>li>a{
    padding-top:5px;
    padding-bottom:5px
}
.navbar-header{
    padding-top:10px
}
.dropdown-menu{
    -webkit-box-shadow:none;
    box-shadow:none;
    border-radius:0;
    padding:0;
    background-color:#fff;
    color:#000
}
.navbar-toggler{
    background:0 0
}
.navbar-toggler.collapsed{
    float:right;
    background:0 0;
    border:0 solid #ccc
}
span.navbar-toggler-icon{
    color:#666
}
@media (max-width:768px){
    nav.navbar.navbar-expand-lg{
        position:relative
    }
    a.navbar-brand{
        margin-left:35px;
        margin-top:8px;
        margin-bottom:8px
    }
    button.navbar-toggler{
        left:0!important;
        position:absolute;
        top:8px
    }
    a.navbar-brand img{
        max-width:200px;
        margin-left:15px
    }
    a#abrirpanelbusqueda,a#abrirpanelcarrito{
        position:absolute;
        top:19px;
        right:15px
    }
    a#abrirpanelbusqueda{
        right:60px
    }
    a.nav-link{
        padding:12px!important
    }
    ul.dropdown-menu.dropdown-cart{
        width:100%;
        top:50px;
        padding:10px;
        color:#000
    }
}
a.ircarrito{
    background:0 0;
    padding:11px 4px;
    display:block;
    float:right
}
span.cart_top p strong{
    font-weight:700;
    color:#e91e8c
}
.dropdown-menu>li>a{
    font-size:12px;
    padding:5px 20px;
    color:#000;
    min-width:250px
}
.dropdown-menu>li>a:hover,footer a{
    color:#ddd
}
.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{
    background-color:#fff;
    border-color:#025c95
}
.caret.navbar-toggle.sub-arrow{
    position:absolute;
    right:10px;
    top:-3px
}
ul.dropdown-menu li{
    position:relative
}
div.social.pull-right .dropdown-menu li{
    padding:8px 20px!important;
    border-bottom:1px dotted #fff
}
div.social.pull-right .dropdown-menu li:last-child{
    padding:8px 10px!important;
    border-bottom:0 dotted #fff
}
@media (min-width:992px){
    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-menu{
        top:30px!important
    }
}
div#barrahormiga{
    border:1px solid #ccc;
    margin-bottom:10px
}
div#barrahormiga a{
    font:700 14px 'roboto',sans-serif
}
.breadcrumb,div#barrahormiga select{
    border-radius:4px;
    -webkit-border-radius:4px
}
div#barrahormiga select{
    border:1px solid #ccc;
    padding:4px
}
div#barrahormiga div.col-md-8{
    padding-top:5px
}
.breadcrumb{
    padding:8px;
    margin-bottom:1rem;
    list-style:none;
    background-color:#fafafa
}
@media (max-width:480px){
    div.barraformato{
        display:none
    }
}
.fa-shopping-cart:before{
    content:"\f07a";
    font-size:20px;
    color:#e91e8c
}
.result-busqueda{
    border:1px solid #f0f0f0;
    -webkit-box-shadow:none;
    box-shadow:none;
    height:35px
}
div.carritoDesktop{
    position:absolute;
    right:0;
    top:15px
}
.pull-right>.dropdown-cart{
    width:100%;
    top:38px;
    border:0;
    background:#fff;
    color:#000!important;
    border-bottom:2px solid #ccc
}
.pull-right>.dropdown-cart a{
    color:#000!important
}
.pull-right>.dropdown-cart li+li{
    border-top:1px dotted #ccc
}
.spots div.row{
    padding-top:7px;
    padding-bottom:7px
}
@media (max-width:480px){
    section.spots img{
        margin:5px 0
    }
}
.cajaprod:hover div.quickview{
    visibility:visible
}
.btn-quickview{
    border-radius:2px;
    font-family:'roboto',sans-serif;
    letter-spacing:2px;
    color:#454545!important;
    text-transform:uppercase;
    background:#fff;
    background:rgba(255,255,255,.9);
    border:1px solid #eee;
    box-shadow:0 0 3px rgba(0,0,0,.3);
    -webkit-box-shadow:0 0 3px rgba(0,0,0,.3);
    -ms-box-shadow:0 0 3px rgba(0,0,0,.3);
    -moz-box-shadow:0 0 3px rgba(0,0,0,.3);
    -moz-o-shadow:0 0 3px rgba(0,0,0,.3);
    left:auto;
    min-width:100px;
    max-height:40px;
    height:40px!important;
    opacity:0;
    -webkit-opacity:0;
    -ms-opacity:0;
    padding:10px;
    visibility:hidden;
    width:auto;
    display:inline-block!important;
    z-index:2;
    transform:scale(.75);
    -webkit-transform:scale(.75);
    -o-transform:scale(.75);
    -ms-transform:scale(.75);
    -moz-transform:scale(.75);
    -webkit-transition:all .3s ease 0;
    -moz-transition:all .3s ease 0;
    -ms-transition:all .3s ease 0;
    transition:all .3s ease
}
div.cajaprod:hover div.quickview a.btn-quickview{
    visibility:visible;
    opacity:.85;
    -webkit-opacity:.85;
    -ms-opacity:.85;
    transform:scale(1);
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    -moz-transform:scale(1)
}
@media (max-width:460px){
    div.quickview{
        margin-top:25%
    }
}
@media (max-width:400px){
    div.quickview{
        margin-top:35%
    }
}
.cajaprod>.btn-quickview:hover{
    opacity:.95
}
.text-center{
    text-align:center!important
}
.text-right{
    text-align:right!important
}
footer{
    background:#222;
    padding:30px 0;
    text-align:center;
    background:#666;
    margin-top:20px
}
.top-bar{
    padding:5px 0;
    background:#f0f0f0
}
.top-bar a{
    color:#999
}
ul#menutop li{
    float:left
}
ul#menutop li a{
    color:#000;
    padding:0 10px
}
.modal h5.modal-title{
    font:700 16px 'roboto',sans-serif!important;
    color:#000;
    letter-spacing:normal;
    text-align:center;
    padding:8px;
    width:100%
}
div#ModalAgregar div.modal-footer a.btn.btn-secondary{
    color:#fff!important
}
div.container{
    max-width:1250px;
    margin:0 auto
}
div.container.header{
    margin-top:0
}
.productos .col-md-3,.productos .col-md-4{
    padding-left:8px;
    padding-right:8px
}
section#novedades_home .col-md-prod,section#ofertas_home .col-md-prod{
    width:16.6666%;
    padding-left:8px;
    padding-right:8px;
    margin:5px 0
}
#articulos .col-md-prod,section#novedades_home div.owl-carousel .col-md-prod,section#ofertas_home div.owl-carousel .col-md-prod{
    width:auto;
    padding-left:8px;
    padding-right:8px;
    margin:5px 0
}
@media (max-width:480px){
    section#novedades_home .col-md-prod,section#ofertas_home .col-md-prod{
        width:100%;
        padding-left:8px;
        padding-right:8px;
        margin:5px 0
    }
}
#articulos .col-md-prod{
    width:25%
}
@media (max-width:768px){
    #articulos .col-md-prod,.col-md-prod{
        width:100%;
        padding-left:8px;
        padding-right:8px
    }
}
#relacionados .col-md-prod{
    width:20%;
    padding-left:8px;
    padding-right:8px;
    margin:5px 0
}
@media (max-width:768px){
    #relacionados .col-md-prod{
        width:33.33%;
        padding-left:8px;
        padding-right:8px
    }
}
@media (max-width:480px){
    #relacionados .col-md-prod{
        width:100%;
        padding-left:8px;
        padding-right:8px
    }
}
div.login .input-group{
    margin-bottom:8px
}
.cajalogin{
    background:#f0f0f0;
    margin:5px;
    padding-bottom:15px
}
.cajalogin h3{
    font-size:16px;
    text-align:center;
    padding:5px
}
.btn.btn-login{
    background:#e91e8c;
    cursor:pointer;
    color:#fff;
    display:block;
    margin:0 auto
}
span#errorlogin span,span#errorlogin2 span{
    color:#e91e8c;
    padding:8px 0;
    display:block!important;
    text-align:center!important
}
form.form-registro div.input-group{
    padding:10px 0
}
.hidden-lg,.hidden-md{
    display:none
}
div.button-pager li{
    float:left;
    background:#ccc;
    color:#fff;
    list-style-type:none;
    margin:0 4px;
    min-width:30px;
    min-height:30px;
    padding:7px 10px
}
div.button-pager li.button-pager{
    color:#fff
}
div.button-pager li.button-rpager{
    background:#f0f0f0;
    color:#000
}
i.formatoico{
    font-size:25px;
    position:relative;
    top:2px;
    cursor:pointer
}
.barraformato{
    text-align:right
}
@media (max-width:480px){
    .barraformato{
        text-align:left
    }
}
@media (max-width:768px){
    div#carritoDesktop{
        display:none
    }
    .hidden-lg,.hidden-md{
        display:inline
    }
}
.barrasuperior,.product,div#ModalAgregar div.modal-body{
    background:#fff
}
section#novedades_home div.row>div.col-md-2,section#ofertas_home div.row>div.col-md-2{
    padding:4px
}
div.product img{
    transition:all .3s ease;
    opacity:0.98;
    filter:saturate(92.5%)contrast(99%)brightness(1.025)
}
div.product:hover .image img{
    -webkit-transform:scale(1.3);
    transform:scale(1.3);
    opacity:50%
}
.product{
    -moz-transition:all .3s ease 0;
    -webkit-transition:all .3s ease 0;
    -o-transition:all .3s ease 0;
    -ms-transition:all .3s ease 0;
    padding-bottom:10px;
    padding-top:4px;
    transition:all .15s linear;
    background-color:#fff;
    border-radius:4px;
    border:1px solid #e2e2e2;
    box-shadow:0 0 0 0 rgba(0,0,0,.33)
}
.product:hover{
    border-radius:4px 4px 0 0;
    box-shadow:0 8px 16px 0 rgba(0,0,0,.15);
    outline:0
}
.product h4,.product h4 a:hover{
    padding:5px;
    color:#3a3a3a;
    text-decoration:none;
    font-size:14px;
    text-transform:uppercase
}
.product h4 a{
    color:#3a3a3a
}
.product h4 a:hover{
    color:#e91e8c
}
.image,.item.list-view .image,.product,div.quickview{
    text-align:center
}
.product .image{
    overflow:hidden;
    width:90%;
    margin:0 auto
}
div.quickview{
    display:block;
    margin-top:40%;
    max-height:50px;
    position:absolute;
    width:100%;
    z-index:2;
    visibility:hidden
}
.product .image a img,img.img-responsive{
    width:100%
}
.image,.image a img{
    transition:all .5s ease 0;
    -moz-transition:all .5s ease 0;
    -webkit-transition:all .5s ease 0;
    -ms-transition:all .5s ease 0;
    -o-transition:all .5s ease 0
}
.image{
    position:relative;
    width:100%
}
.image,.image a{
    display:block
}
.image a img{
    margin:0 auto
}
.price{
    font-size:18px;
    color:#090;
    padding:10px 0
}
#detalle .btn.btn-compra,.btn.btn-compra{
    background:#e91e8c;
    font-size:12px;
    color:#fff;
    border:0;
    cursor:pointer
}
#detalle .btn.btn-compra{
    font-size:17px
}
@media (max-width:480px){
    #detalle .btn.btn-compra{
        background:#e91e8c;
        font-size:17px;
        color:#fff;
        border:0;
        cursor:pointer;
        clear:both;
        float:left
    }
    #detalle div#redessh{
        clear:both;
        margin-top:50px
    }
}
label.compara{
    padding:5px 0;
    display:block
}
a.linkcompara,a.linkcompara:hover,tr.comparacabecera a:hover{
    text-decoration:none;
    color:#e91e8c
}
tr.comparacabecera a{
    display:block;
    padding:4px 0
}
.movil{
    display:none
}
.product.modofila{
    margin-bottom:5px
}
.modofila .description,.modofila .description h4,p.semaforostock{
    text-align:center
}
.product.modofila .description,.product.modofila h4,.product.modofila p.semaforostock{
    text-align:left
}
h1.prod-titulo{
    font:700 28px 'roboto',sans-serif;
    color:#333
}
.prod-codigo{
    font:400 13px 'roboto condensed',sans-serif;
    color:#999
}
#detalle .price{
    font-size:30px;
    font-weight:700
}
#relacionados .price{
    font-size:20px;
    font-weight:700;
    padding:5px
}
#relacionados .product h4,.cajanove div.des_nov p{
    margin-bottom:0
}
div.dcorta,div.dlarga{
    margin:15px 0
}
div.filtros_left h3,li.menuLatTit{
    font:700 14px 'roboto',sans-serif;
    color:#e91e8c
}
.checkout h5 i,i.borrarcate,i.borrarmarca,i.borrarsubcate{
    color:#e91e8c
}
span.cateactual,span.marcaactual,span.subcateactual{
    font-weight:700;
    color:#000
}
ul.cates,ul.marcas,ul.subcates{
    border-bottom:1px solid #ddd;
    list-style-type:none!important;
    padding-bottom:15px;
    margin-left:0;
    padding-left:20px
}
ul.filtros,ul.menuUl{
    list-style-type:none!important
}
ul.menuUl{
    padding:0 20px;
    border-bottom:1px solid #ddd
}
li.menuLatTit{
    list-style-type:none;
    padding-bottom:8px
}
span.cf{
    background:#000;
    border-radius:10px;
    font-size:11px
}
div.cabcarrito{
    background:#e0e0e0;
    border-bottom:1px solid #aaa;
    padding:8px
}
div.cabcarrito>div{
    padding-left:15px;
    padding-right:15px
}
.resumencarrito .cajaresumencarrito,div.filacarrito{
    padding:20px 0;
    border:1px solid #e0e0e0;
    border-radius:4px;
    -webkit-border-radius:4px;
    margin:5px 0
}
.titproditemcarrito{
    font-weight:700
}
.preciounitarioitemcarrito{
    font-weight:700;
    color:#090
}
.preciosubtotalitemcarrito{
    font-weight:700;
    color:#e91e8c;
    font-size:16px
}
.resumencarrito .cajaresumencarrito{
    padding:20px
}
div.todocarrito{
    padding:15px
}
@media (max-width:480px){
    div.cabcarrito{
        display:none
    }
}
.cajanove{
    background:rgba(255,255,255,.5);
    padding:8px
}
.cajanove div.des_nov,.cajanove h1,.listado_noticias .cajanove div.des_nov,.listado_reviews .cajanove div.des_nov,.listado_videos .cajanove div.des_nov{
    color:#000;
    text-align:center
}
.cajanove h1{
    font:700 16px 'roboto condensed',sans-serif;
    color:#fff
}
#cotizarEnvio i,#recomendar2 i,.cajanove h1 a,.cajanove h1 a:hover,.fixedtop div.redestop .fa-facebook-square,.fixedtop div.redestop .fa-instagram,.fixedtop div.redestop .fa-twitter-square,button.btn.btn-buscartop i,span.cf{
    color:#fff
}
.listado_noticias .cajanove h1 a,.listado_noticias .cajanove h1 a:hover,.listado_reviews .cajanove h1 a,.listado_reviews .cajanove h1 a:hover,.listado_videos .cajanove h1 a,.listado_videos .cajanove h1 a:hover{
    color:#000
}
div.datospersonales>div{
    background:#f0f0f0;
    padding:8px
}
div.mispedidos>div{
    background:#e0e0e0;
    padding:8px
}
div.rma>div{
    background:#f0f0f0;
    padding:8px
}
div.cajascuenta h4{
    font:600 14px 'roboto',sans-serif;
    color:#666;
    border-bottom:1px solid #fff;
    padding:5px
}
div.cajascuenta ul{
    padding-left:20px
}
@media (max-width:480px){
    header .container.header,ul.nav.navbar-nav{
        width:100%;
        padding:0
    }
    .navbar{
        padding:0
    }
    ul.nav.navbar-nav{
        background:#ccc;
        margin-top:10px
    }
}
h1.botonfiltrar{
    border:1px solid #ccc;
    padding:8px;
    font:16px 'roboto',sans-serif;
    display:none
}
div.filtros_left,h1.botonfiltrar a{
    display:block
}
@media (max-width:768px){
    h1.botonfiltrar{
        display:block
    }
    div.filtros_left{
        display:none
    }
}
.sp-wrap{
    max-width:100%!important;
    border:1px solid #ccc!important
}
.modal-header{
    padding:8px
}
.modal-footer{
    display:block;
    text-align:center
}
div#ModalAgregar div.modal-footer{
    text-align:center;
    padding-bottom:10px
}
.product:hover .btn.btn-compra,div#ModalAgregar div.modal-footer a.btn.btn-primary{
    background:#e91e8c
}
a.btn.btn-secondary{
    color:#fff!important
}
ul#formaspago{
    margin:0;
    padding:0
}
span#titcheckout2{
    font:700 20px 'roboto',sans-serif;
    color:#e91e8c
}
div.padding{
    padding:0 15px
}
.bordeInterno{
    border:1px solid #ccc;
    padding:8px
}
.padding8{
    padding:8px
}
div.img-item,h6.tit-armado-1{
    text-align:center
}
div.caja-prod-armado{
    cursor:pointer
}
div.caja-prod-armado:hover{
    border:2px solid #e91e8c
}
h4.desc-item-armado{
    text-align:center;
    display:block
}
div.tit-parte-armado{
    font-size:20px;
    margin-bottom:15px
}
button.btn.btn-buscartop{
    background:#e91e8c;
    left:-10px
}
.owl-next,.owl-prev{
    font-weight:700;
    font-size:25px!important
}
.owl-next{
    float:right
}
div.detalle_noticia img{
    max-width:100%
}
div.container.header{
    position:relative
}
div.redestop{
    position:absolute;
    right:20px;
    bottom:5px
}
div.redestop i{
    color:#999;
    font-size:25px
}
@media (max-width:480px){
    div.redestop{
        display:none
    }
}
div.armarpc-seleccionados div.col-md-armarpc{
    width:20%
}
#redessh{
    margin-top:25px
}
#cotizarEnvio,#recomendar2{
    border-radius:3px;
    -webkit-border-radius:3px;
    padding:6px;
    position:relative;
    top:-10px;
    left:3px;
    color:#fff;
    border:0;
    cursor:pointer
}
#recomendar2{
    background:#f90
}
#cotizarEnvio{
    background:#e91e8c
}
div.redestop .fa-facebook-square{
    color:#069
}
div.redestop .fa-twitter-square{
    color:#00a3d9
}
div.redestop .fa-instagram{
    color:#f90
}
div#componentesAgregados div.row{
    border-bottom:1px dashed #ccc;
    padding-top:8px;
    padding-bottom:8px
}
img.img-componente-agregados{
    max-width:60px;
    margin-right:10px
}
div#componentesAgregados{
    border:1px dotted #ccc;
    padding:0 30px
}
div#componentesAgregados h6{
    font:700 16px 'roboto',sans-serif;
    color:#e91e8c
}
div.caja-prod-armado{
    border:1px solid #ccc;
    text-align:center
}
div.elementoclass{
    margin-bottom:15px
}
h6.tit-armado-1{
    color:#fff!important;
    padding:10px
}
h6.tit-armado-2{
    color:#e91e8c;
    text-align:center;
    padding:10px
}
.modificar{
    float:right;
    width:100%;
    text-align:right;
    color:#999
}
.precio-ami{
    font-size:18px;
    color:#090;
    padding:10px 0
}
.modificar a,.modificar a:hover{
    color:#999;
    text-decoration:none
}
.modificar a:hover{
    color:#e91e8c
}
div.modal-content div.search,div.modal-content div.search div.input-group input.search-form{
    width:100%
}
.ver_todas_las_noticias{
    background:#fff;
    padding:10px;
    display:block;
    width:200px;
    margin:10px auto;
    font-weight:700;
    text-decoration:none;
    text-transform:uppercase
}
.ver_todas_las_noticias:hover{
    background:#c61624;
    color:#fff
}
ul#formaspago,ul.op{
    list-style:none
}
p.subtit{
    color:#c61624;
    font-size:16px
}
#ctrlDataFiscal_image{
    width:50px
}
@media (max-width:480px){
    .no-js .owl-carousel,.owl-carousel.owl-loaded{
        margin-left:auto;
        margin-right:auto
    }
    #detallearmado,span.ws{
        display:none
    }
    #componentesAgregados .col-xs-3{
        width:25%
    }
    #componentesAgregados .col-xs-9{
        width:75%
    }
}
.ver_detalle_armado_pc{
    display:block;
    text-align:center
}
@media (min-width:481px){
    .ver_detalle_armado_pc{
        display:none
    }
}
@media (max-width:4096px) and (min-width:1921px){
    a.nav-link{
        font-size:15px;
        color:#e91e8c
    }
    .navbar.navbar-expand-lg{
        height:120px
    }
    div#navbarNavDropdown{
        position:absolute;
        bottom:5px;
        left:10px
    }
    .navbar-brand,div#carritoDesktop{
        position:absolute;
        top:0
    }
    .navbar-brand{
        padding:0;
        margin:0;
        top:10px
    }
}
.nav{
    background:#000!important
}
.nav-link,.nav-link.has-submenu{
    color:#fff!important
}
.dropdown-toggle.pull-right.hidden-md.hidden-lg,.fa.fa-search,a.ircarrito{
    color:#fff
}
#content-desktop{
    display:block
}
#content-mobile{
    display:none
}
@media screen and (max-width:768px){
    #content-desktop{
        display:none
    }
    #content-mobile{
        display:block
    }
}
#menu1 a:hover{
    background-color:e91e8c;
    color:#fff
}
.gb-offers-carousel-clock div em{
    font-size:34px;
    color:e91e8c;
    font-weight:700;
    display:block;
    margin-bottom:3px;
    font-style:initial
}
.nav-tabs .nav-link.active{
    color:#495057;
    background-color:#fff;
    border-color:#ddd #ddd #fff
}
#solapas a.nav-link,#solapas a.nav-link.active{
    font-size:14px;
    font-weight:700;
    color:#ff003dff!important
}
#solapas a.nav-link{
    color:#aaa!important
}
#solapas .nav{
    background:#fff!important
}
#solapas ul.nav.nav-tabs{
    width:100%!important
}
div.tab-pane{
    padding:15px
}
div.caja-prod-armado{
    height: 100%;
}

/* ======================================================================
   2. DISENO NUEVO GENERAL
   (antes estaba en: HEADER_CSS_JS)
   ====================================================================== */

/* =========================================================
   VARIABLES
   ========================================================= */
:root {
  --cg-accent: #d23f86;
  --cg-accent-hover: #b02f6d;
  --cg-accent-soft: rgba(210, 63, 134, .10);

  /* Alias: el footer y otras piezas usan --cg-ui-accent; asi toman el mismo color */
  --cg-ui-accent: var(--cg-accent);
  --cg-ui-accent-hover: var(--cg-accent-hover);
  --cg-bg: #0a0a0a;
  --cg-surface-hover: #1c0613;
  --cg-surface-open: #2a081c;
  --cg-text-2: #e4e4e4;
  --cg-text-muted: #a4a4a4;
  --cg-radius: 8px;
  --cg-dur: .3s;
  --cg-sidebar-w: 300px;

  /* Nombres originales, por si otras partes del sitio los usan */
  --compugarden-rojo: var(--cg-accent);
  --dark-theme-negro: #212529;
  --dark-theme-gris-oscuro: #181a1b;
  --dark-theme-gris: #999;
  --dark-theme-gris-alternativo: #e5e5e5;
  --dark-theme-gris-claro: #6b6b6b;
  --dark-theme-blanco: #fff;
  --dark-theme-blanco-oscuro: #f0f0f0;
}

/* Tipografia global COMPUGARDEN */
html,
body,
button,
input,
select,
textarea {
  font-family: "Manrope", Arial, sans-serif;
}

/* =========================================================
   HEADER Y BUSCADOR
   ========================================================= */
header { height: 90px !important; }
body #slides_ofertas { margin-top: 90px !important; }
section#slides_ofertas.slider { padding-bottom: 0; }

.gb-top-header { height: 30px; }
.logo-content   { width: 30% !important; }
.search-content { width: 40% !important; }
.gb-search form { width: 100% !important; }
div.gb-search input#tags { border-radius: 25px; }

#log1 i, #nolog1 i { color: var(--cg-accent) !important; }

.promo-content a,
.promo-content a:hover,
.promo-content a:visited {
  font-size: 14px !important;
  font-weight: 400 !important;
}

nav.barra {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin-top: 10px;
  border-top: 1px solid #222;
}
nav.barra a {
  padding: 10px 15px;
  border-radius: var(--cg-radius);
  background: rgba(255, 255, 255, .05);
  color: #f1f1f1;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--cg-dur), color var(--cg-dur);
}
nav.barra a:hover { background: var(--cg-accent); color: #fff; }

.icons { display: flex; gap: 20px; align-items: center; }
.icons a { color: #ccc; font-size: 14px; text-decoration: none; }
.icons a:hover { color: var(--cg-accent); }

.gb-category-menu.main-header--bottom-nav { max-width: 100%; }
.main-header--bottom-nav { font-size: 15px; padding: 0 20px 5px 10px !important; }
.bottom-nav--left-column { width: 100%; }
div.destacados.featured-list { width: 70%; }
div.destacados ul li { width: 12.5%; margin: 0; }
.destacados ul li a,
.destacados ul li a::before { height: auto !important; }
@media (max-width: 1951px) {
  .gb-category-menu.main-header--bottom-nav { margin-top: 10px !important; }
}

.main-footer { max-width: 100% !important; }

/* =========================================================
   TITULOS DE SECCION
   ========================================================= */
div.titulosHome { padding: 0 9px; margin-bottom: 10px; }
div.titulosHome h4 {
  padding: 4px 12px;
  border-left: 4px solid var(--cg-accent);
  font: 900 20px "Manrope", sans-serif;
  letter-spacing: -1px;
}
div.titulosHome a {
  color: var(--cg-accent) !important;
  font: 600 12px "Manrope", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}

/* =========================================================
   MEDIDAS DE LA HOME (un solo lugar para todo)
   Cambiando estos numeros se mueve todo junto:
   header, slider, beneficios, secciones, banners y footer.
   ========================================================= */
:root {
  --cg-ancho: 1440px;          /* ancho maximo del contenido */
  --cg-margen: 20px;           /* margen a los costados */
  --cg-radio-slider: 24px;     /* esquinas del slider */
  --cg-radio-tarjeta: 12px;    /* esquinas de tarjetas y banners */
  --cg-espacio-seccion: 32px;  /* espacio entre secciones */
}
@media (max-width: 767px) {
  :root {
    --cg-margen: 16px;
    --cg-radio-slider: 16px;
    --cg-espacio-seccion: 24px;
  }
}

/* Beneficios debajo del slider: sin barra, solo el texto, alineados con el slider */
html body section#bajoSlider,
html.dark body section#bajoSlider { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body section#bajoSlider { margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; }
html body section#bajoSlider > .container.row {
  width: 100% !important;
  max-width: var(--cg-ancho) !important;
  margin: 6px auto 0 !important;
  padding: 0 var(--cg-margen) !important;
  box-sizing: border-box !important;
  background: transparent !important;
}
html body section#bajoSlider .col-md-3,
html body section#bajoSlider .p-3 { background: transparent !important; }
html body section#bajoSlider > .container.row > .col-md-3:first-child,
html body section#bajoSlider > .container.row > .col-md-3:first-child .p-3 { padding-left: 0 !important; }
html body section#bajoSlider > .container.row > .col-md-3:last-child,
html body section#bajoSlider > .container.row > .col-md-3:last-child .p-3 { padding-right: 0 !important; }

/* =========================================================
   HOME: mismo ancho y margenes para todas las secciones
   La clase cg-home la pone el script de abajo solo en la pagina de inicio.
   ========================================================= */
html.cg-home .container:not(.header) {
  width: 100% !important;
  max-width: var(--cg-ancho) !important;
  padding-left: var(--cg-margen) !important;
  padding-right: var(--cg-margen) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
html.cg-home .container:not(.header) .container { padding-left: 0 !important; padding-right: 0 !important; }
html.cg-home .row.owl-carousel,
html.cg-home .row.owl-carousel.owl-theme.owl-loaded.owl-drag { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
html.cg-home #cg-resenas .cg-resenas__container { max-width: var(--cg-ancho) !important; padding-left: var(--cg-margen) !important; padding-right: var(--cg-margen) !important; box-sizing: border-box !important; }

/* Espacio parejo: de los beneficios a "Tu proxima PC" y entre secciones */
html body section#bajoSlider + .container { margin-top: 0 !important; padding-top: 0 !important; }
html body section#bajoSlider + .container > .sec-hd:first-child { margin-top: 12px !important; padding-top: 8px !important; }
html.cg-home section.spots_home_1 { margin-top: var(--cg-espacio-seccion) !important; }

/* Banners de categorias (Placas de video, Monitores...): mismos bordes que el resto.
   La plantilla BANNERS_HOME_1 tiene una fila dentro de otra (a proposito): la de afuera
   no se corre y la de adentro solo compensa el relleno de cada banner. */
html.cg-home section.spots_home_1 .container > .row { margin-left: 0 !important; margin-right: 0 !important; }
html.cg-home section.spots_home_1 .row .row { margin-left: -10px !important; margin-right: -10px !important; }
html.cg-home section.spots_home_1 img { border-radius: var(--cg-radio-tarjeta) !important; }
@media (max-width: 767px) {
  /* En el celular la seccion usaba el 90% del ancho: ahora ocupa lo mismo que las tarjetas */
  html.cg-home section.spots_home_1 { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 480px) {
  html.cg-home section.spots_home_1 .row .row { margin-left: -5px !important; margin-right: -5px !important; }
}

/* Botones de "Arma tu PC" y "PC Armadas": texto blanco siempre (en el celular se veia apagado) */
html body .editorial .ed-card .ed-btn,
html body .editorial .ed-card .ed-btn:link,
html body .editorial .ed-card .ed-btn:visited,
html body .editorial .ed-card .ed-btn:hover,
html body .editorial .ed-card .ed-btn:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* =========================================================
   LISTADOS (Articulos, Ofertas, Outlet, busquedas): mismo espacio arriba en todos.
   El header ya ocupa su lugar, asi que no hace falta la reserva vieja de 65 px
   (ni el 30% que tenia el celular), que en Ofertas dejaba un hueco grande.
   ========================================================= */
body.cg-store-enabled section#articulos { margin-top: 0 !important; padding-top: 0 !important; }
body.cg-store-enabled div.container#articulos { margin-top: 24px !important; padding-top: 0 !important; }
@media (max-width: 767px) {
  body.cg-store-enabled div.container#articulos { margin-top: 16px !important; }
}

/* =========================================================
   LISTADOS: barra superior (titulo + orden) y filtros de la izquierda
   Solo diseno: los enlaces, los filtros y el orden funcionan igual.
   ========================================================= */
#articulos {
  --lst-t: #111318; --lst-t2: #3a3f4b; --lst-m: #6b7280;
  --lst-bg: #ffffff; --lst-soft: #f3f4f6; --lst-line: #e6e8ec;
}
html.dark #articulos {
  --lst-t: #f2f3f5; --lst-t2: #d4d7dd; --lst-m: #9aa3af;
  --lst-bg: #1d1f24; --lst-soft: #262930; --lst-line: #2c2f36;
}

/* ---- Barra superior ---- */
#articulos #barrahormiga.breadcrumb {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 18px !important; padding: 0 0 14px !important;
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--lst-line) !important; border-radius: 0 !important;
}
#articulos #barrahormiga > [class*="col-"] { flex: 1 1 auto; max-width: none; width: auto; padding: 0 !important; }
#articulos #barrahormiga .catdeschormiga,
#articulos #barrahormiga .catdeschormiga a {
  color: var(--lst-t) !important; font: 800 22px/1.2 'Manrope', Arial, sans-serif !important;
  letter-spacing: -.02em; text-transform: none !important; text-decoration: none !important;
}
#articulos #barrahormiga .catdeschormiga .fa,
#articulos #barrahormiga .catdeschormiga i { display: none !important; }
#articulos #barrahormiga .barraformato {
  display: flex !important; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto;
}
#articulos #barrahormiga .barraformato select {
  height: 38px; margin: 0 !important; padding: 0 10px; border: 1px solid var(--lst-line) !important;
  border-radius: 8px !important; background: var(--lst-bg) !important; color: var(--lst-t) !important;
  font: 600 13px 'Manrope', Arial, sans-serif; cursor: pointer; outline: none; box-shadow: none;
}
#articulos #barrahormiga .barraformato select:focus { border-color: var(--cg-accent, #d23f86) !important; }
#articulos #barrahormiga .formatoico {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0 !important; border: 1px solid var(--lst-line); border-radius: 8px;
  background: var(--lst-bg); color: var(--lst-m) !important; font-size: 16px !important; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
#articulos #barrahormiga .formatoico:hover { border-color: var(--cg-accent, #d23f86); color: var(--cg-accent, #d23f86) !important; }
/* Sin los botones de vista grilla / lista: siempre en grilla */
#articulos #barrahormiga .formatoico { display: none !important; }

/* ---- Filtros de la izquierda ---- */
#articulos .leftcolumn { font-family: 'Manrope', Arial, sans-serif; }
#articulos .filtros_left h3,
#articulos .filtros_left li.menuLatTit {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 0 8px !important; padding: 14px 0 0 !important;
  border-top: 1px solid var(--lst-line); list-style: none !important;
  color: var(--lst-t) !important; font: 800 12px/1.2 'Manrope', Arial, sans-serif !important;
  letter-spacing: .08em; text-transform: uppercase;
}
#articulos .filtros_left > div:first-child h3 { margin-top: 0 !important; padding-top: 0 !important; border-top: 0; }
#articulos .filtros_left h3 i { color: var(--lst-m) !important; font-size: 13px; }
#articulos .filtros_left ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#articulos .filtros_left ul li { margin: 0 !important; padding: 0 !important; list-style: none !important; }

/* Categorias y subcategorias (enlaces) */
#articulos .filtros_left ul.cates a,
#articulos .filtros_left ul.subcates a {
  display: flex !important; align-items: center; justify-content: flex-start; gap: 9px;
  padding: 6px 10px !important; border-radius: 8px;
  color: var(--lst-t2) !important; font: 500 13.5px/1.3 'Manrope', Arial, sans-serif !important;
  text-decoration: none !important; transition: background .15s ease, color .15s ease;
}
#articulos .filtros_left ul.cates a:hover,
#articulos .filtros_left ul.subcates a:hover { background: var(--lst-soft); color: var(--cg-accent, #d23f86) !important; }
#articulos .filtros_left ul.cates a::before,
#articulos .filtros_left ul.subcates a::before {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px; box-sizing: border-box;
  border: 1.5px solid var(--lst-m); border-radius: 4px; background: var(--lst-bg);
}
#articulos .filtros_left ul.cates a:hover::before,
#articulos .filtros_left ul.subcates a:hover::before { border-color: var(--cg-accent, #d23f86); }
#articulos .filtros_left .cg-count { color: var(--lst-m); font-weight: 500; }

/* Categoria elegida: como una etiqueta que se puede quitar */
#articulos .filtros_left span.cateactual,
#articulos .filtros_left span.subcateactual,
#articulos .filtros_left span.marcaactual {
  display: inline-flex !important; align-items: center; padding: 5px 10px; border-radius: 999px;
  background: rgba(210,63,134,.10); color: var(--cg-accent, #d23f86) !important; font-size: 13px;
}
#articulos .filtros_left span.cateactual b,
#articulos .filtros_left span.subcateactual b { font-weight: 700; color: inherit !important; }
#articulos .filtros_left .borrarcate,
#articulos .filtros_left .borrarsubcate,
#articulos .filtros_left .borrarmarca { margin-left: 6px; color: var(--cg-accent, #d23f86) !important; }

/* Casillas (marcas y caracteristicas) */
#articulos .filtros_left li.term-item label {
  display: flex !important; align-items: center; gap: 9px; width: 100%; margin: 0 !important;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  color: var(--lst-t2) !important; font: 500 13.5px/1.3 'Manrope', Arial, sans-serif !important;
  transition: background .15s ease;
}
#articulos .filtros_left li.term-item label:hover { background: var(--lst-soft); }
#articulos .filtros_left li.term-item input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 16px; width: 16px; height: 16px; margin: 0 !important;
  border: 1.5px solid var(--lst-m); border-radius: 4px; background: var(--lst-bg); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
#articulos .filtros_left li.term-item input[type="checkbox"]:checked {
  border-color: var(--cg-accent, #d23f86);
  background: var(--cg-accent, #d23f86) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
#articulos .filtros_left li.term-item input[type="checkbox"]:focus-visible { outline: 2px solid var(--cg-accent, #d23f86); outline-offset: 2px; }
#articulos .filtros_left li.term-item label > span { margin-left: -4px; color: var(--lst-m) !important; font-weight: 500; }

/* Secciones plegables (como Maximus): titulo con flecha */
#articulos .filtros_left .cg-acc-head { cursor: pointer; user-select: none; }
#articulos .filtros_left .cg-acc-head::after {
  content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin: 0 4px 3px 10px;
  border-right: 2px solid var(--lst-m); border-bottom: 2px solid var(--lst-m);
  transform: rotate(45deg); transition: transform .18s ease;
}
#articulos .filtros_left .cg-acc-head.cg-cerrado::after { transform: rotate(-45deg); margin-bottom: 0; }
#articulos .filtros_left .cg-acc-head:hover { color: var(--cg-accent, #d23f86) !important; }
#articulos .filtros_left .cg-acc-head > i.fa-caret-down { display: none !important; }
#articulos .filtros_left .cg-acc-body.cg-cerrado { display: none !important; }

/* Filtros aplicados arriba, con "Limpiar todo" */
#articulos .cg-activos { margin: 0 0 16px; }
#articulos .cg-activos-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px;
  color: var(--lst-t); font: 800 12px/1.2 'Manrope', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
#articulos .cg-activos-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#articulos .cg-activos[hidden] { display: none; }
#articulos .cg-activo {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid rgba(210,63,134,.45); border-radius: 8px; background: rgba(210,63,134,.08);
  color: var(--cg-accent, #d23f86) !important; font: 600 12.5px 'Manrope', Arial, sans-serif;
  text-decoration: none !important; cursor: pointer;
}
#articulos .cg-activo::after { content: "\00D7"; font-size: 16px; line-height: 1; }
#articulos .cg-activo:hover { background: rgba(210,63,134,.16); }
#articulos .cg-limpiar {
  flex: 0 0 auto; color: var(--cg-accent, #d23f86) !important; font: 700 12px 'Manrope', Arial, sans-serif;
  letter-spacing: 0; text-transform: none; text-decoration: none !important;
}
#articulos .cg-limpiar:hover { text-decoration: underline !important; }
/* La categoria elegida ya se ve arriba como etiqueta */
#articulos .filtros_left span.cateactual,
#articulos .filtros_left span.subcateactual,
#articulos .filtros_left span.marcaactual,
#articulos .filtros_left .borrarcate,
#articulos .filtros_left .borrarsubcate,
#articulos .filtros_left .borrarmarca { display: none !important; }

/* Interruptor "Solo con stock en el local" */
#articulos .cg-local {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 14px; padding: 11px 12px; border: 1px solid var(--lst-line); border-radius: 10px;
  background: var(--lst-bg); color: var(--lst-t); font: 600 13.5px 'Manrope', Arial, sans-serif; cursor: pointer;
}
#articulos .cg-local input { position: absolute; opacity: 0; pointer-events: none; }
#articulos .cg-local-sw {
  position: relative; flex: 0 0 38px; width: 38px; height: 22px; border-radius: 999px;
  background: var(--lst-line); transition: background .18s ease;
}
#articulos .cg-local-sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease;
}
#articulos .cg-local input:checked + .cg-local-sw { background: var(--cg-accent, #d23f86); }
#articulos .cg-local input:checked + .cg-local-sw::after { transform: translateX(16px); }
#articulos .cg-local input:focus-visible + .cg-local-sw { outline: 2px solid var(--cg-accent, #d23f86); outline-offset: 2px; }
#articulos .col-md-prod.cg-no-local { display: none !important; }
#articulos .cg-local-aviso { margin: -6px 0 14px; color: var(--lst-m); font: 500 12px/1.4 'Manrope', Arial, sans-serif; }
#articulos .cg-local-aviso[hidden] { display: none; }

/* Paginacion de los listados: botones redondeados en lugar de las flechas viejas */
#articulos .col_pager { text-align: center; padding-top: 10px; }
#articulos .col_pager .button-pager {
  display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  margin: 10px 0 8px !important; padding: 0 !important; background: none !important;
}
#articulos .col_pager .button-pager li {
  display: inline-flex !important; list-style: none !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important;
}
#articulos .col_pager .button-pager li a,
#articulos .col_pager .button-pager li.button-rpager {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--lst-line) !important; border-radius: 8px !important;
  background: var(--lst-bg) !important; color: var(--lst-t) !important;
  font: 700 14px 'Manrope', Arial, sans-serif; text-decoration: none !important;
  transition: border-color .15s ease, color .15s ease;
}
#articulos .col_pager .button-pager li a:hover { border-color: var(--cg-accent, #d23f86) !important; color: var(--cg-accent, #d23f86) !important; }
#articulos .col_pager .button-pager li.button-rpager {
  background: var(--cg-accent, #d23f86) !important; border-color: var(--cg-accent, #d23f86) !important; color: #fff !important;
}
#articulos .col_pager .button-pager img { display: none !important; }
#articulos .col_pager .cg-flecha { font-size: 18px; line-height: 1; }
#articulos .col_pager > p { margin: 0 0 10px !important; color: var(--lst-m) !important; font: 500 12.5px 'Manrope', Arial, sans-serif; }

/* Boton "FILTRAR" (celular) */
#articulos .leftcolumn h1.botonfiltrar { margin: 0 0 12px !important; padding: 0 !important; background: none !important; border: 0 !important; }
#articulos .leftcolumn h1.botonfiltrar a {
  display: flex !important; align-items: center; justify-content: center; gap: 8px; height: 42px;
  border: 1px solid var(--lst-line); border-radius: 10px; background: var(--lst-bg);
  color: var(--lst-t) !important; font: 700 14px 'Manrope', Arial, sans-serif !important; cursor: pointer;
}
#articulos .leftcolumn h1.botonfiltrar a i { color: var(--cg-accent, #d23f86); }

/* =========================================================
   CIRCULO DE CARGA: liviano, moderno y con el color de la marca
   Reemplaza el dibujo rojo (loaderspinnercg.svg). Sin imagenes: solo CSS.
   ========================================================= */
html body #loader,
html body #loaderforchanges { background-image: none !important; }
html body #loader { background-color: #ffffff !important; transition: opacity .25s ease, visibility .25s ease; }
html.dark body #loader { background-color: #1a1a1a !important; }
html body #loader::after,
html body #loaderforchanges::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; box-sizing: border-box;
  border: 3px solid rgba(210,63,134,.18); border-top-color: var(--cg-accent, #d23f86);
  border-radius: 50%; animation: cg-girar .7s linear infinite;
}
html body #loader.cg-listo { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
@keyframes cg-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html body #loader::after, html body #loaderforchanges::after { animation-duration: 1.6s; }
}

/* Carrusel: sin flechas, solo el espacio inferior */
div.owl-stage { padding-bottom: 20px !important; }

/* =========================================================
   TARJETA DE PRODUCTO
   ========================================================= */
.product { padding-bottom: 10px !important; }
.product .image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 240px;
  max-height: 280px;
  background: #fff;
}
.product .image a img,
img.img-responsive {
  width: 90%;
  max-height: 210px;
}
.product:hover .image a img { width: 100% !important; }

.product div.contentDescription { padding: 10px; }

.product h4,
.product h4 a:hover {
  padding: 0 !important;
  margin-top: 10px;
  color: #3a3a3a;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
}

.precio-ami { color: var(--cg-accent) !important; }

#detalle .btn.btn-compra,
.btn.btn-compra {
  padding: 10px 0;
  border: 0;
  background: var(--cg-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}
.product:hover .btn.btn-compra {
  background: var(--cg-accent-hover);
  font-size: 14px;
  color: #fff;
  border: 0;
  cursor: pointer;
}

.product input.btn.btn-primary.btn-compra.compracantidad,
.product:hover input.btn.btn-primary.btn-compra.compracantidad {
  display: block !important;
  width: 100%;
}

/* Celular: tarjetas mas compactas y el boton siempre entra completo */
@media (max-width: 767px) {
  .product .image { min-height: 170px; max-height: 200px; }
  .product .image a img,
  .product img.img-responsive { max-height: 160px; }
  .product .btn.btn-compra,
  .product:hover .btn.btn-compra,
  .product input.btn.btn-primary.btn-compra.compracantidad {
    padding: 9px 4px !important;
    font-size: 11px !important;
    letter-spacing: .2px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
}

/* =========================================================
   BOTON DEL MENU
   ========================================================= */
.menu-toggle {
  position: absolute;
  top: 12px;
  left: 20px;
  z-index: 2001;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  border-radius: var(--cg-radius);
  background: rgba(10, 10, 10, .9);
  color: var(--cg-accent);
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  transition: background-color var(--cg-dur);
}
.menu-toggle:hover { background: var(--cg-surface-hover); }
button#menuBtn:focus { outline: none !important; }
.menu-toggle:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }
#closeBtn { display: none; }
#closeBtn.menu-toggle { top: 10px; }

/* =========================================================
   MENU LATERAL
   ========================================================= */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: var(--cg-sidebar-w);
  height: 100vh;
  height: 100dvh;   /* alto real en celulares; los navegadores viejos usan la linea de arriba */
  padding: 70px 20px 20px;
  background: var(--cg-bg);
  border-right: 1px solid rgba(255, 255, 255, .05);
  overflow: hidden;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: hidden;   /* cerrado: no se puede recorrer con Tab */
  transition: transform var(--cg-dur) ease, box-shadow var(--cg-dur) ease, visibility 0s linear var(--cg-dur);
}
.sidebar.active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
  overflow-y: auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  transition: transform var(--cg-dur) ease, box-shadow var(--cg-dur) ease, visibility 0s;
}
.sidebar::-webkit-scrollbar { width: 6px; background: var(--cg-bg); }
.sidebar::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #444; }
/* Solo Firefox (en Chrome esto anularia el estilo de arriba) */
@supports (-moz-appearance: none) {
  .sidebar { scrollbar-width: thin; scrollbar-color: #333 var(--cg-bg); }
}

.menu-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding: 14px 12px;
  border-radius: var(--cg-radius);
  color: var(--cg-text-2);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  transition: background var(--cg-dur) ease;
}
.menu-item a { color: var(--cg-text-2); }
.menu-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--cg-accent);
  opacity: 0;
  transition: opacity var(--cg-dur) ease;
}
.menu-item:hover::before,
.menu-item:focus::before,
.menu-item.open::before { opacity: 1; }
.menu-item:hover,
.menu-item:focus { background: var(--cg-surface-hover); }
.menu-item.open { background: var(--cg-surface-open); }

.menu-item span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  pointer-events: none;
}
.menu-item span.estesi { pointer-events: all !important; font-weight: 500; }
.menu-item i { transition: transform var(--cg-dur) ease; }
.menu-item:hover i:first-child { transform: scale(1.2); }

.menu-label {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--cg-accent-soft);
  color: var(--cg-accent);
  font-size: .8rem;
  font-weight: bold;
}

.chevron {
  display: none;
  color: var(--cg-accent);
  font-size: .8rem;
  pointer-events: none;
  transition: transform var(--cg-dur) ease;
}
.sidebar.active .chevron { display: inline-block; }
.menu-item.open .chevron { transform: rotate(90deg); }

/* Submenu: el JS pone el alto exacto; 800px queda de respaldo.
   El padding no se anima para que el JS mida bien el alto. */
.submenu {
  max-height: 0;
  margin: 0 0 4px 10px;
  padding-left: 10px;
  border-left: 2px solid var(--cg-accent);
  border-radius: 0 0 var(--cg-radius) var(--cg-radius);
  background: #121212;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--cg-dur) ease-in-out, opacity var(--cg-dur) ease;
}
.menu-item.open + .submenu {
  max-height: 800px;
  padding-top: 8px;
  padding-bottom: 8px;
  opacity: 1;
}

.submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
  padding: 10px 8px;
  border-radius: var(--cg-radius);
  color: #aaa;
  font-size: .95rem;
  cursor: pointer;
  transition: all var(--cg-dur);
}
.submenu-item a { display: block; width: 100%; color: var(--cg-text-muted); text-decoration: none; }
.submenu-item i {
  min-width: 20px;
  color: var(--cg-accent);
  text-align: center;
  transition: transform var(--cg-dur) ease;
}
.submenu-item:hover,
.submenu-item:focus {
  padding-left: 12px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
}
.submenu-item:hover i,
.submenu-item:focus i { transform: scale(1.2); }

.menu-item:focus-visible,
.submenu-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cg-accent); }

.divider {
  height: 1px;
  margin: 24px 0;
  border: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .1), transparent);
}
.submenu-note { padding: 6px 0; color: #888; font-size: .8rem; font-style: italic; text-align: center; }

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cg-dur) ease;
}
.backdrop.active { opacity: 1; pointer-events: all; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sidebar.active .menu-item {
  opacity: 0;
  animation: fadeIn .4s ease forwards;
  animation-delay: calc(.05s * var(--index, 0));
}

/* =========================================================
   SWITCH TEMA CLARO / OSCURO
   ========================================================= */
.categorias-mobile p,
.categorias-web p {
  margin-left: 5px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
.categorias-mobile { float: right; margin: 15px; }

.theme-switch-wrapper,
.theme-switch-wrapper-mob { display: flex; align-items: center; }

.theme-switch,
.theme-switch-mobile {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 15px;
  margin-left: .5em;
}
.theme-switch input,
.theme-switch-mobile input { display: none; }

.slider-theme,
.slider-theme-mob {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #ccc;
  cursor: pointer;
  transition: .4s;
}
.slider-theme::before,
.slider-theme-mob::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -1px;
  width: 15px;
  height: 15px;
  background: var(--cg-accent);
  transition: .4s;
}
input:checked + .slider-theme,
input:checked + .slider-theme-mob { background: #583e3e; }
input:checked + .slider-theme::before,
input:checked + .slider-theme-mob::before { transform: translateX(26px); }
.slider-theme.round,
.slider-theme-mob.round { border-radius: 34px; }
.slider-theme.round::before,
.slider-theme-mob.round::before { border-radius: 50%; }

/* =========================================================
   MENU SUPERIOR (dropdowns de GBP)
   ========================================================= */
#menu1 { background: #000 !important; }
#menu1 a { color: var(--cg-accent) !important; }
#menu1 a:hover { background: #000 !important; color: #fff !important; }
.dropdown-menu.sub-menu { background: #000 !important; }
html.dark .nav-submenu-title,
html.light .nav-submenu-title { color: var(--cg-accent); }

/* =========================================================
   TEMA OSCURO
   ========================================================= */
html.dark body { background: #1a1a1a; }
html.dark a,
html.dark body,
html.dark h1, html.dark h2, html.dark h4, html.dark h5, html.dark h6 { color: var(--dark-theme-blanco-oscuro); }

html.dark #loaderforchanges,
html.dark #loader { background: var(--dark-theme-negro); }

html.dark .brand-carousel { background: var(--dark-theme-blanco); }
html.dark ul.ui-autocomplete.ui-menu { background: var(--dark-theme-gris-oscuro); }
html.dark li.imagen_predictivo.ui-menu-item,
html.dark div.dcorta,
html.dark div.dlarga { color: var(--dark-theme-gris-claro); }

html.dark .cajalogin {
  background: var(--dark-theme-gris-oscuro);
  border: 1px solid var(--dark-theme-gris);
}
html.dark #pago-envio .card-header { background: var(--dark-theme-gris-oscuro) !important; }

html.dark .cajanove { background: var(--dark-theme-gris-oscuro); }
html.dark div.cajanove h1 a { color: var(--dark-theme-blanco-oscuro); }
html.dark div.cajanove h1 a:hover { color: var(--cg-accent); }
html.dark .ver_todas_las_noticias { background: var(--dark-theme-gris-oscuro); color: var(--dark-theme-blanco-oscuro); }
html.dark .ver_todas_las_noticias:hover { background: var(--cg-accent); }

html.dark .product {
  background: #1d1f24 !important;
  border: 1px solid #2c2f36 !important;
  border-radius: var(--cg-radio-tarjeta, 12px) !important;
}
/* Tarjeta de producto menos "cuadrada": la foto va en un recuadro blanco
   con esquinas redondeadas y un pequeno margen dentro de la tarjeta.
   (Solo el recuadro; la imagen se comporta igual que siempre.) */
.product { border-radius: var(--cg-radio-tarjeta, 12px) !important; overflow: hidden; }
.product .image {
  width: auto !important;
  margin: 8px 8px 0 !important;
  border-radius: calc(var(--cg-radio-tarjeta, 12px) - 4px) !important;
  overflow: hidden;
}
.product .btn.btn-compra,
.product input.btn.btn-primary.btn-compra.compracantidad { border-radius: 8px !important; }
html.dark .product:hover { border-color: #3a3d46 !important; }

/* =========================================================
   TARJETA DE PRODUCTO: mismo estilo en modo claro y oscuro
   Solo cambia el color para que contraste con el fondo.
   El magenta queda para el boton.
   ========================================================= */
/* Tarjeta y recuadro de la foto */
html:not(.dark) .product { background: #ffffff !important; border: 1px solid #e6e8ec !important; }
html:not(.dark) .product:hover { border-color: #d5d9df !important; }
html:not(.dark) .product .image { border: 1px solid #eef0f3; }

/* Titulo */
html .product h4,
html .product h4 a,
html .product .titprod {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1d2026 !important;
}
html.dark .product h4,
html.dark .product h4 a,
html.dark .product .titprod { color: #f2f3f5 !important; }

/* Precio tachado */
html .product .precio-tachado { color: #8a8f98 !important; font-size: 13px !important; font-weight: 600 !important; }
html.dark .product .precio-tachado { color: #7d828c !important; }

/* Precio: negrita y grande, neutro (casi negro en claro, blanco en oscuro) */
html .product .price,
html .product .price * {
  color: #111318 !important;
  font-family: "Manrope", Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}
html.dark .product .price,
html.dark .product .price * { color: #ffffff !important; }

/* Cuotas */
html .product div.price + div,
html .product div.price + div * { color: #5f6671 !important; font-size: 12.5px !important; font-weight: 500 !important; }
html.dark .product div.price + div,
html.dark .product div.price + div * { color: #a9b0bb !important; }

/* Todas las tarjetas iguales: el boton siempre abajo, haya o no precio tachado */
.product { display: flex !important; flex-direction: column !important; height: 100%; }
.product .contentDescription { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
/* Titulo: siempre el lugar de 2 lineas (si es mas largo, termina en "...") */
html .product .description h4 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 2.6em;
}
/* Precio tachado: el renglon queda reservado aunque no haya descuento */
.product .precio-tachado-content { min-height: 22px; }
/* Las cuotas empujan el boton hasta abajo de la tarjeta */
html .product .contentDescription > div.price + div { margin-bottom: auto !important; padding-bottom: 10px; }

@media (max-width: 767px) {
  html .product .price,
  html .product .price * { font-size: 18px !important; }
  html .product h4,
  html .product h4 a,
  html .product .titprod { font-size: 12px !important; }
}
html.dark .image,
html.dark .product .image a img,
html.dark img.img-responsive { mix-blend-mode: normal !important; }

html.dark .priceahora,
html.dark .titprod,
html.dark h5 { color: var(--dark-theme-blanco-oscuro); }
/* Igual que se veia antes: titulos en blanco, precio en fucsia */
html.dark .titprod:hover,
html.dark h5:hover { color: #fff !important; }
html.dark .priceahora:hover { color: var(--cg-accent); }
html.dark .price { color: #fff; font: 700 22px "Manrope", sans-serif; }

html.dark .main-footer { background: var(--dark-theme-gris-oscuro); }
html.dark .gb-footer-links .gb-menu-links-title,
html.dark .gb-menu-links > p { color: var(--dark-theme-blanco-oscuro); }

html.dark .navbar-nav .dropdown-menu { background: var(--dark-theme-gris-alternativo); }
html.dark .navbar-nav .dropdown-menu a { color: var(--dark-theme-gris-oscuro) !important; }

html.dark .breadcrumb { background: var(--dark-theme-gris-oscuro); }
html.dark ul.cates a:hover,
html.dark ul.marcas a:hover,
html.dark ul.subcates a:hover,
html.dark div#barrahormiga a:hover,
html.dark div#barrahormiga .catdeschormiga .fa.fa-arrow-circle-right,
html.dark .verCateTodos a:hover,
html.dark .card-header a:hover { color: var(--cg-accent); }

html.dark div.button-pager li { background: var(--dark-theme-gris-oscuro); }
html.dark div.button-pager li.button-rpager {
  background: var(--dark-theme-negro);
  color: var(--dark-theme-blanco-oscuro);
  border: 1px solid var(--dark-theme-gris-oscuro);
}

html.dark #detalle .planes-tarjetas { background: var(--dark-theme-gris-oscuro) !important; }
html.dark #detalle .planes-tarjetas strong { color: var(--dark-theme-gris) !important; }
html.dark #detalle #solapas .nav {
  background: var(--dark-theme-gris-oscuro) !important;
  border-bottom: 1px solid var(--dark-theme-gris) !important;
}
html.dark #detalle .nav-tabs .nav-link.active {
  background: var(--dark-theme-gris);
  border-color: var(--dark-theme-gris);
  color: var(--dark-theme-blanco-oscuro) !important;
}
html.dark #detalle .title-sol.style2 span { background: var(--dark-theme-negro); color: var(--dark-theme-gris); }
html.dark #detalle .title-sol.style2::after { background: var(--dark-theme-gris); }
html.dark #detalle .sp-wrap { background: var(--dark-theme-gris-oscuro) !important; }

html.dark .tableHeader,
html.dark section.specsMain .specsTable .content,
html.dark section.specsMain .specsTable .rowHeader,
html.dark span.cateactual,
html.dark span.marcaactual,
html.dark span.subcateactual { color: var(--dark-theme-gris); }

/* Antes apuntaba a una variable que no existia; se ve igual que antes (blanco) */
html.dark h1.titulos { background: var(--dark-theme-gris-oscuro); color: var(--dark-theme-blanco-oscuro); }

html.dark .card { background: var(--dark-theme-gris-oscuro); }

html.dark input[type=email],
html.dark input[type=number],
html.dark input[type=password],
html.dark input[type=text],
html.dark .form-control {
  background: var(--dark-theme-gris-oscuro);
  border-color: var(--dark-theme-gris);
  color: var(--dark-theme-gris);
}
html.dark div#barrahormiga select { background: var(--dark-theme-negro); color: var(--dark-theme-blanco-oscuro); }
html.dark .indicaciones-pago {
  background: var(--dark-theme-gris-oscuro) !important;
  border-color: var(--dark-theme-gris) !important;
  color: var(--dark-theme-gris) !important;
}
html.dark .gb-search-input { background: var(--dark-theme-blanco) !important; color: #333 !important; }
html.dark .micro-amd svg { fill: var(--dark-theme-blanco-oscuro) !important; }
html.dark b.componente,
html.dark h6.tit-armado-1 { color: var(--dark-theme-negro) !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  .gb-top-header { height: 0 !important; }
  .flexslider .slides img { margin-top: 0 !important; }
  .switch-theme-web { display: none !important; }
  html.dark ul.dropdown-menu.dropdown-cart {
    background: var(--dark-theme-gris-oscuro);
    color: var(--dark-theme-gris);
  }
}
@media (min-width: 780px) {
  div.categorias-mobile.switch-theme-mobile { display: none !important; }
}
@media (max-width: 480px) {
  :root { --cg-sidebar-w: 280px; }
  header { height: 60px !important; }
  header .container.header { padding: 0 !important; }
  .navbar a.navbar-brand img { position: sticky; margin-top: 5px !important; margin-left: 10px; }
  .menu-item { padding: 12px 10px; }
  .menu-toggle { top: 10px; left: 3px; }
}

/* =========================================================
   UNIFICACION DE COLOR
   Colores viejos de la hoja principal del sitio (cgnew9.css)
   pasan al color de marca. Se cambia solo desde --cg-accent.
   ========================================================= */
html .price { color: var(--cg-accent); }
html .category-name { color: var(--cg-accent); }
html #solapas a.nav-link.active { color: var(--cg-accent) !important; }
html #exampleModal button.btn-buscartop { background: var(--cg-accent); }
html .gb-button.primary {
  background-color: var(--cg-accent);
  border-color: transparent transparent var(--cg-accent-hover);
}
html .gb-button.primary:hover { background-color: var(--cg-accent-hover); }


/* ======================================================================
   3. ARMADOR DE PC
   (antes estaba en: HEADER_CSS_JS, bloque cg-armador-css)
   ====================================================================== */

/* ===== Armador - Portada (eleccion AMD / Intel) ===== */
html.cg-arm-portada #cg-armador {
	--cga: var(--cg-accent);
	--cga-hover: var(--cg-accent-hover);
	--arm-t: #111318;
	--arm-m: #5f6671;
	--arm-bg: #ffffff;
	--arm-soft: #f6f7f9;
	--arm-line: #e6e8ec;
	--arm-tint: color-mix(in srgb, var(--cga) 9%, transparent);
	font-family: Manrope, Arial, sans-serif;
	color: var(--arm-t);
}
html.dark.cg-arm-portada #cg-armador {
	--arm-t: #f2f3f5;
	--arm-m: #a9b0bb;
	--arm-bg: #1c1f25;
	--arm-soft: #1f2329;
	--arm-line: #343942;
	--arm-tint: color-mix(in srgb, var(--cga) 18%, transparent);
}
html.cg-arm-portada #cg-armador * { box-sizing: border-box; }
html.cg-arm-portada #cg-armador.container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 42px 20px 40px;
}
html.cg-arm-portada #cg-armador .cg-hero {
	position: relative;
	margin-bottom: 26px;
	text-align: center;
}
html.cg-arm-portada #cg-armador .cg-hero::before,
html.cg-arm-portada #cg-armador .cg-hero::after {
	content: "";
	position: absolute;
	top: 6px;
	width: 130px;
	height: 1px;
	opacity: .5;
	pointer-events: none;
}
html.cg-arm-portada #cg-armador .cg-hero::before { left: 0; transform: rotate(35deg); transform-origin: left; background: linear-gradient(90deg, transparent, var(--cga)); }
html.cg-arm-portada #cg-armador .cg-hero::after { right: 0; transform: rotate(-35deg); transform-origin: right; background: linear-gradient(270deg, transparent, var(--cga)); }
html.cg-arm-portada #cg-armador .cg-hero h1 {
	margin: 0;
	font-family: Manrope, Arial, sans-serif;
	font-size: 44px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--arm-t);
}
html.cg-arm-portada #cg-armador .cg-hero h1 span { font-weight: inherit; color: var(--cga); }
html.cg-arm-portada #cg-armador .cg-hero p {
	max-width: 520px;
	margin: 12px auto 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--arm-m);
}
html.cg-arm-portada #cg-armador .cg-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	row-gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}
html.cg-arm-portada #cg-armador .cg-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--arm-m);
	cursor: default;
}
html.cg-arm-portada #cg-armador .cg-steps li + li::before {
	content: "";
	width: 40px;
	height: 1px;
	margin: 0 12px;
	background: var(--arm-line);
}
html.cg-arm-portada #cg-armador .cg-steps b {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--arm-tint);
	color: var(--arm-t);
	font-size: 12px;
	font-weight: 800;
}
html.cg-arm-portada #cg-armador .cg-steps li.is-active { color: var(--arm-t); font-weight: 800; }
html.cg-arm-portada #cg-armador .cg-steps li.is-active b { background: var(--cga); color: #fff; }
html.cg-arm-portada #cg-armador .cg-steps-cap {
	margin: 10px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--arm-m);
}
html.cg-arm-portada #cg-armador .cg-brands {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
html.cg-arm-portada #cg-armador .cg-brand {
	float: none;
	width: auto;
	max-width: none;
	padding: 0;
	cursor: pointer;
}
html.cg-arm-portada #cg-armador .cg-brand .caja-prod-armado {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	height: 100%;
	min-height: 210px;
	margin: 0;
	padding: 30px 34px;
	border: 0;
	border-radius: 16px;
	text-align: left;
	box-shadow: 0 12px 28px rgba(10,12,20,.16);
	transition: transform .2s ease, box-shadow .2s ease;
}
html.cg-arm-portada #cg-armador .cg-brand-amd .caja-prod-armado {
	color: #ff5a24;
	background:
		radial-gradient(circle at 85% 50%, rgba(255,80,20,.28), transparent 45%),
		linear-gradient(135deg, #0c0c0f 0%, #151012 60%, #220c08 100%);
}
html.cg-arm-portada #cg-armador .cg-brand-intel .caja-prod-armado {
	color: #3d9bff;
	background:
		radial-gradient(circle at 85% 50%, rgba(40,140,255,.30), transparent 45%),
		linear-gradient(135deg, #060b18 0%, #0a1630 60%, #0c2352 100%);
}
html.cg-arm-portada #cg-armador .cg-brand .caja-prod-armado::before {
	content: "";
	position: absolute;
	top: -30%;
	right: 36%;
	width: 2px;
	height: 160%;
	background: linear-gradient(transparent, currentColor, transparent);
	box-shadow: 0 0 16px currentColor;
	opacity: .4;
	transform: rotate(32deg);
	pointer-events: none;
}
html.cg-arm-portada #cg-armador .cg-brand:hover .caja-prod-armado {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px rgba(10,12,20,.24);
}
html.cg-arm-portada #cg-armador .cg-brand .caja-prod-armado br,
html.cg-arm-portada #cg-armador .cg-brand .img-item > br { display: none; }
html.cg-arm-portada #cg-armador .cg-brand .img-item {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	grid-template-rows: auto auto auto;
	column-gap: 24px;
	align-items: center;
	width: 100%;
	text-align: left;
}
html.cg-arm-portada #cg-armador .cg-brand .imgsvg {
	grid-column: 2;
	grid-row: 1 / 4;
	justify-self: end;
	display: block;
	width: 180px !important;
	height: 50px !important;
	margin: 0;
	fill: #ffffff;
	filter: drop-shadow(0 0 22px color-mix(in srgb, currentColor 55%, transparent));
	transition: transform .3s ease;
}
html.cg-arm-portada #cg-armador .cg-brand-intel .imgsvg { width: 160px !important; height: 62px !important; }
html.cg-arm-portada #cg-armador .cg-brand:hover .imgsvg { transform: scale(1.05); }
html.cg-arm-portada #cg-armador .cg-brand .cg-brand-tag {
	grid-column: 1;
	margin: 0;
	overflow: hidden;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .12em;
	text-align: left;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255,255,255,.65);
}
html.cg-arm-portada #cg-armador .cg-brand .desc-item-armado {
	grid-column: 1;
	margin: 8px 0 20px;
	font-family: Manrope, Arial, sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.015em;
	color: #ffffff;
	text-align: left;
	text-transform: none;
}
html.cg-arm-portada #cg-armador .cg-brand-btn {
	grid-column: 1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	border-radius: 10px;
	background: var(--cga);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	transition: background .18s ease, gap .18s ease;
}
html.cg-arm-portada #cg-armador .cg-brand-btn svg { width: 16px; height: 16px; }
html.cg-arm-portada #cg-armador .cg-brand:hover .cg-brand-btn { background: var(--cga-hover); gap: 12px; }
html.cg-arm-portada #cg-armador .cg-ico {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--cga) 70%, #f39cc6) 0%, var(--cga) 55%, var(--cga-hover) 100%);
	color: #fff;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--cga) 30%, transparent);
}
html.cg-arm-portada #cg-armador .cg-ico svg { display: block; width: 24px; height: 24px; margin: 0; }
html.cg-arm-portada #cg-armador .cg-ico-wa {
	background: linear-gradient(135deg, #3ee07f 0%, #25d366 55%, #1da851 100%);
	box-shadow: 0 6px 16px rgba(37,211,102,.3);
}
html.cg-arm-portada #cg-armador .cg-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 18px;
	padding: 18px 0;
	border: 1px solid var(--arm-line);
	border-radius: 16px;
	background: var(--arm-soft);
}
html.cg-arm-portada #cg-armador .cg-feature {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 2px 24px;
}
html.cg-arm-portada #cg-armador .cg-feature + .cg-feature { border-left: 1px solid var(--arm-line); }
html.cg-arm-portada #cg-armador .cg-feature-text strong {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: var(--arm-t);
}
html.cg-arm-portada #cg-armador .cg-feature-text small {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	color: var(--arm-m);
}
html.cg-arm-portada #cg-armador .cg-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 18px;
}
html.cg-arm-portada #cg-armador .cg-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 1px solid var(--arm-line);
	border-radius: 14px;
	background: var(--arm-bg);
	color: inherit !important;
	text-decoration: none !important;
	transition: border-color .18s ease, transform .18s ease;
}
html.cg-arm-portada #cg-armador .cg-link:hover { border-color: var(--cga); transform: translateY(-1px); }
html.cg-arm-portada #cg-armador .cg-link-text { flex: 1 1 auto; min-width: 0; }
html.cg-arm-portada #cg-armador .cg-link-text strong {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: var(--arm-t);
}
html.cg-arm-portada #cg-armador .cg-link-text small {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	color: var(--arm-m);
}
html.cg-arm-portada #cg-armador .cg-link-arrow {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	color: var(--cga);
	transition: transform .18s ease;
}
html.cg-arm-portada #cg-armador .cg-link:hover .cg-link-arrow { transform: translateX(3px); }
@media (max-width: 1199px) {
	html.cg-arm-portada #cg-armador .cg-brand .img-item { grid-template-columns: minmax(0, 1fr) 140px; }
	html.cg-arm-portada #cg-armador .cg-brand .imgsvg { width: 140px !important; height: 40px !important; }
	html.cg-arm-portada #cg-armador .cg-brand-intel .imgsvg { width: 124px !important; height: 48px !important; }
	html.cg-arm-portada #cg-armador .cg-brand .desc-item-armado { font-size: 23px; }
	html.cg-arm-portada #cg-armador .cg-feature { padding: 2px 18px; }
}
@media (max-width: 991px) {
	html.cg-arm-portada #cg-armador.container { padding: 30px 16px 34px; }
	html.cg-arm-portada #cg-armador .cg-hero h1 { font-size: 38px; }
	html.cg-arm-portada #cg-armador .cg-hero::before,
	html.cg-arm-portada #cg-armador .cg-hero::after { display: none; }
	html.cg-arm-portada #cg-armador .cg-brands { grid-template-columns: 1fr; }
	html.cg-arm-portada #cg-armador .cg-brand .img-item { grid-template-columns: minmax(0, 1fr) 180px; }
	html.cg-arm-portada #cg-armador .cg-brand .imgsvg { width: 180px !important; height: 50px !important; }
	html.cg-arm-portada #cg-armador .cg-brand-intel .imgsvg { width: 160px !important; height: 62px !important; }
	html.cg-arm-portada #cg-armador .cg-brand .desc-item-armado { font-size: 26px; }
	html.cg-arm-portada #cg-armador .cg-features { grid-template-columns: 1fr; gap: 14px; padding: 16px 18px; }
	html.cg-arm-portada #cg-armador .cg-feature { padding: 0; }
	html.cg-arm-portada #cg-armador .cg-feature + .cg-feature { border-left: 0; }
	html.cg-arm-portada #cg-armador .cg-links { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 767px) {
	html.cg-arm-portada #cg-armador.container { padding: 25px 14px 28px; }
	html.cg-arm-portada #cg-armador .cg-hero h1 { font-size: 32px; }
	html.cg-arm-portada #cg-armador .cg-hero p { font-size: 14px; }
	html.cg-arm-portada #cg-armador .cg-steps li + li::before { width: 16px; margin: 0 6px; }
	html.cg-arm-portada #cg-armador .cg-steps li:not(.is-active) span { display: none; }
	html.cg-arm-portada #cg-armador .cg-brand .caja-prod-armado { min-height: 0; padding: 24px 22px; }
	html.cg-arm-portada #cg-armador .cg-brand .img-item { grid-template-columns: 1fr; }
	html.cg-arm-portada #cg-armador .cg-brand .imgsvg {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		width: 120px !important;
		height: 34px !important;
		margin-bottom: 14px;
	}
	html.cg-arm-portada #cg-armador .cg-brand-intel .imgsvg { width: 110px !important; height: 42px !important; }
	html.cg-arm-portada #cg-armador .cg-brand .desc-item-armado { font-size: 21px; }
}


/* ===== Armador - Pasos (barra de pasos, consejo y listado) ===== */
html.cg-arm-pasos #cg-armador {
	--cga: var(--cg-accent);
	--arm-t: #111318;
	--arm-m: #6b7280;
	--arm-bg: #ffffff;
	--arm-soft: #f5f6f8;
	--arm-line: #e3e6ea;
	--arm-tint: color-mix(in srgb, var(--cga) 10%, transparent);
	font-family: Manrope, Arial, sans-serif;
	color: var(--arm-t);
}
html.dark.cg-arm-pasos #cg-armador {
	--arm-t: #f2f3f5;
	--arm-m: #9aa3af;
	--arm-bg: #1b1e24;
	--arm-soft: #23272e;
	--arm-line: #343a44;
	--arm-tint: color-mix(in srgb, var(--cga) 22%, transparent);
}
html.cg-arm-pasos #cg-armador * { box-sizing: border-box; }
html.cg-arm-pasos #cg-armador.container {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 42px 20px 40px;
}

/* Neutraliza la grilla Bootstrap dentro del armador */
html.cg-arm-pasos #cg-armador .padding { padding: 0; }
html.cg-arm-pasos #cg-armador .row { margin: 0; }
html.cg-arm-pasos #cg-armador .row::after { display: none; }
html.cg-arm-pasos #cg-armador [class*="col-"] {
	float: none;
	width: auto;
	max-width: none;
	flex: 0 1 auto;
	min-height: 0;
	padding: 0;
}

/* ---- Titulo de pagina ---- */
html.cg-arm-pasos #cg-armador .cg-hero {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
html.cg-arm-pasos #cg-armador .cg-hero h1 {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: Manrope, Arial, sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-align: left;
	color: var(--arm-t);
}
html.cg-arm-pasos #cg-armador .cg-hero h1 span { font-weight: inherit; color: var(--cga); }
html.cg-arm-pasos #cg-armador .cg-hero p {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--arm-m);
}

html.cg-arm-pasos #cg-armador .cg-layout { display: block; }
html.cg-arm-pasos #cg-armador .cg-layout > [class*="col-"] { display: block; width: 100%; }

/* ---- Panel de progreso ---- */
html.cg-arm-pasos #cg-armador #componentesAgregados {
	margin-bottom: 14px;
	padding: 18px 20px 14px;
	border: 1px solid var(--arm-line);
	border-radius: 14px;
	background: var(--arm-bg);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
/* Fila vieja "VER DETALLE": oculta (escondia la barra de pasos) */
html.cg-arm-pasos #cg-armador #componentesAgregados > .row > .col-md-12 { display: none; }
html.cg-arm-pasos #cg-armador .cg-head { display: block; }
html.cg-arm-pasos #cg-armador .cg-head::before { display: none; }
html.cg-arm-pasos #cg-armador .cg-head-img,
html.cg-arm-pasos #cg-armador .cg-head-erp { display: none; }
html.cg-arm-pasos #cg-armador .cg-head-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
}
html.cg-arm-pasos #cg-armador .cg-head-step {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--arm-m);
}
html.cg-arm-pasos #cg-armador .cg-head-name {
	display: block;
	margin-top: 2px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--arm-t) !important;
}
html.cg-arm-pasos #cg-armador .cg-head-side {
	display: flex;
	align-items: center;
	gap: 22px;
}
html.cg-arm-pasos #cg-armador .cg-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--arm-line);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--arm-t) !important;
	text-decoration: none !important;
	transition: border-color .15s ease, color .15s ease;
}
html.cg-arm-pasos #cg-armador .cg-back[hidden] { display: none; }
html.cg-arm-pasos #cg-armador .cg-back svg { width: 15px; height: 15px; }
html.cg-arm-pasos #cg-armador .cg-back:hover { border-color: var(--cga); color: var(--cga) !important; }
html.cg-arm-pasos #cg-armador .cg-total { text-align: right; }
html.cg-arm-pasos #cg-armador .cg-total small {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--arm-m);
}
/* El script del ERP escribe "Total acumulado: <b>ARS ...</b>": se muestra solo el importe */
html.cg-arm-pasos #cg-armador #totalArmadoPC {
	font-size: 0;
	line-height: 1.2;
}
html.cg-arm-pasos #cg-armador #totalArmadoPC br { display: none; }
html.cg-arm-pasos #cg-armador #totalArmadoPC b {
	font-size: 21px;
	font-weight: 800;
	color: var(--arm-t) !important;
}
html.cg-arm-pasos #cg-armador #totalArmadoPC:empty::before {
	content: "ARS 0";
	font-size: 21px;
	font-weight: 800;
	color: var(--arm-t);
}

/* Barra de progreso */
html.cg-arm-pasos #cg-armador .cg-progress {
	height: 4px;
	margin: 14px 0 12px;
	border-radius: 4px;
	background: var(--arm-line);
	overflow: hidden;
}
html.cg-arm-pasos #cg-armador .cg-progress span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 4px;
	background: var(--cga);
	transition: width .5s ease;
}
html.cg-arm-pasos #cg-armador .tit-armado-2 { display: none; }

/* Pasos en chips */
html.cg-arm-pasos #cg-armador #detallearmado {
	display: flex !important;
	gap: 6px;
	overflow-x: auto;
	padding: 2px;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
html.cg-arm-pasos #cg-armador #detallearmado::-webkit-scrollbar { display: none; }
html.cg-arm-pasos #cg-armador #detallearmado > .col-md-12 { display: none; }
html.cg-arm-pasos #cg-armador #detallearmado > .row,
html.cg-arm-pasos #cg-armador #detallearmado > .cg-step-home {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 12px 0 9px;
	border: 1px solid var(--arm-line);
	border-radius: 999px;
	background: var(--arm-bg) !important;
	color: var(--arm-m);
	text-decoration: none !important;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
html.cg-arm-pasos #cg-armador #detallearmado > .row::before { display: none; }
/* En los pasos con producto elegido solo se ven el icono y el nombre */
html.cg-arm-pasos #cg-armador #detallearmado > .row > .cg-ci ~ :not(.cg-cn) { display: none !important; }
html.cg-arm-pasos #cg-armador #detallearmado > .row > .col-md-3,
html.cg-arm-pasos #cg-armador #detallearmado > .row > .cg-ci,
html.cg-arm-pasos #cg-armador #detallearmado .cg-step-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: inherit;
}
html.cg-arm-pasos #cg-armador #detallearmado svg {
	display: block;
	width: 16px !important;
	height: 16px;
	fill: none !important;
	stroke: currentColor;
}
html.cg-arm-pasos #cg-armador #detallearmado img { display: none; }
html.cg-arm-pasos #cg-armador #detallearmado > .row > .col-md-9,
html.cg-arm-pasos #cg-armador #detallearmado > .row > .cg-cn { font-size: 0; line-height: 1; }
html.cg-arm-pasos #cg-armador #detallearmado .col-md-9 br,
html.cg-arm-pasos #cg-armador #detallearmado .col-md-9 > b:not(.componente) { display: none; }
html.cg-arm-pasos #cg-armador #detallearmado .componente,
html.cg-arm-pasos #cg-armador #detallearmado .cg-step-name {
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	color: inherit !important;
}
/* Estados */
html.cg-arm-pasos #cg-armador #detallearmado > .cg-step-home,
html.cg-arm-pasos #cg-armador #detallearmado > .row.is-done {
	background: var(--arm-soft) !important;
	color: var(--arm-t);
}
html.cg-arm-pasos #cg-armador #detallearmado > .row.is-done > .col-md-3,
html.cg-arm-pasos #cg-armador #detallearmado > .row.is-done > .cg-ci,
html.cg-arm-pasos #cg-armador #detallearmado .cg-step-ico { color: var(--cga); }
html.cg-arm-pasos #cg-armador #detallearmado > .row.is-current,
html.cg-arm-pasos #cg-armador #detallearmado > .row[style*="e3eedf"] {
	border-color: var(--cga);
	background: var(--cga) !important;
	color: #fff;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--cga) 35%, transparent);
}
html.cg-arm-pasos #cg-armador #detallearmado > .row.is-current .componente,
html.cg-arm-pasos #cg-armador #detallearmado > .row[style*="e3eedf"] .componente { font-weight: 800; }
html.cg-arm-pasos #cg-armador #detallearmado > .row.is-next { opacity: .8; }
html.cg-arm-pasos #cg-armador #detallearmado > .row.is-link,
html.cg-arm-pasos #cg-armador #detallearmado > .cg-step-home { cursor: pointer; opacity: 1; }
html.cg-arm-pasos #cg-armador #detallearmado > .row.is-link:hover,
html.cg-arm-pasos #cg-armador #detallearmado > .cg-step-home:hover,
html.cg-arm-pasos #cg-armador #detallearmado > .row.is-link:focus-visible {
	border-color: var(--cga);
	color: var(--cga);
	outline: none;
}

/* ---- Consejo del paso ---- */
html.cg-arm-pasos #cg-armador .cg-tips {
	display: none;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--arm-tint);
}
html.cg-arm-pasos #cg-armador.has-tip .cg-tips { display: flex; }
html.cg-arm-pasos #cg-armador .cg-tip-ico {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--cga);
	color: #fff;
}
html.cg-arm-pasos #cg-armador .cg-tip-ico svg { display: block; width: 17px; height: 17px; }
html.cg-arm-pasos #cg-armador .cg-tip {
	display: none;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--arm-t) !important;
}
html.cg-arm-pasos #cg-armador .cg-tip.is-on { display: block; }

/* ---- Titulo del listado ---- */
html.cg-arm-pasos #cg-armador .tit-parte-armado {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: 800;
	color: var(--arm-t) !important;
}
html.cg-arm-pasos #cg-armador .tit-parte-armado svg {
	flex: 0 0 24px;
	width: 24px !important;
	height: 24px;
	fill: none !important;
	stroke: var(--cga);
}

/* ---- Listado de productos (plantillas armarpcitem / armarpcitemvacio) ---- */
html.cg-arm-pasos #cg-armador .cg-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
html.cg-arm-pasos #cg-armador .cg-list::before { display: none; }
html.cg-arm-pasos #cg-armador .cg-list > [class*="col-"] { width: 100%; }

/* ---- Tarjeta de producto (plantilla armarpcitem) ---- */
html.cg-arm-pasos #cg-armador .cg-list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
html.cg-arm-pasos #cg-armador .cg-list > .elementoclass {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--arm-line);
	border-radius: 12px;
	background: var(--arm-bg);
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
html.cg-arm-pasos #cg-armador .cg-list > .elementoclass:hover {
	border-color: var(--cga);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
html.cg-arm-pasos #cg-armador .cg-list .caja-prod-armado {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
html.cg-arm-pasos #cg-armador .cg-list .imagenitemarmado {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 130px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 10px !important;
	background: #ffffff;
}
html.cg-arm-pasos #cg-armador .cg-list .imagenitemarmado img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	margin: 0 auto;
	object-fit: contain;
	transition: transform .25s ease;
}
html.cg-arm-pasos #cg-armador .cg-list > .elementoclass:hover .imagenitemarmado img { transform: scale(1.04); }
html.cg-arm-pasos #cg-armador .cg-list .infoitemarmado {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--arm-line);
	text-align: center;
}
html.cg-arm-pasos #cg-armador .cg-list .desc-item-armado {
	display: -webkit-box;
	width: 100%;
	margin: 0;
	overflow: hidden;
	font-family: Manrope, Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	color: var(--arm-t) !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
html.cg-arm-pasos #cg-armador .cg-list .infoitemarmado > img {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: 14px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	object-fit: contain;
}
html.cg-arm-pasos #cg-armador .cg-list .precio-ami {
	margin: auto 0 0 !important;
	padding: 6px 0 0 !important;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-align: center;
	white-space: nowrap;
	color: var(--arm-t) !important;
}
html.cg-arm-pasos #cg-armador .cg-list .precio-ami .cg-stock { display: none; }

/* ---- Tarjeta del armador con el mismo estilo que las de la tienda ---- */
html.cg-arm-pasos #cg-armador .cg-list .imagenitemarmado {
	margin: 8px 8px 0 !important;
	border: 1px solid var(--arm-line);
	border-radius: 8px;
	overflow: hidden;
}
html.dark.cg-arm-pasos #cg-armador .cg-list .imagenitemarmado { border-color: transparent; }
html.cg-arm-pasos #cg-armador .cg-list .infoitemarmado { border-top: 0 !important; }

/* ---- Stock: etiqueta moderna en lugar de la imagen vieja del semaforo ---- */
html.cg-arm-pasos #cg-armador .cg-list .infoitemarmado > img.cg-semaforo-viejo { display: none !important; }
html.cg-arm-pasos #cg-armador .cg-stock-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
html.cg-arm-pasos #cg-armador .cg-stock-tag::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
html.cg-arm-pasos #cg-armador .cg-stock-tag.es-alto  { color: #15803d; background: rgba(34,197,94,.12); }
html.cg-arm-pasos #cg-armador .cg-stock-tag.es-medio { color: #1d4ed8; background: rgba(59,130,246,.12); }
html.cg-arm-pasos #cg-armador .cg-stock-tag.es-bajo  { color: #b45309; background: rgba(245,158,11,.15); }
html.cg-arm-pasos #cg-armador .cg-stock-tag.es-sin   { color: #b91c1c; background: rgba(239,68,68,.12); }
html.cg-arm-pasos #cg-armador .cg-stock-tag.es-web   { color: #1d4ed8; background: rgba(59,130,246,.12); }
html.dark.cg-arm-pasos #cg-armador .cg-stock-tag.es-alto  { color: #4ade80; background: rgba(34,197,94,.16); }
html.dark.cg-arm-pasos #cg-armador .cg-stock-tag.es-medio { color: #93c5fd; background: rgba(59,130,246,.18); }
html.dark.cg-arm-pasos #cg-armador .cg-stock-tag.es-bajo  { color: #fbbf24; background: rgba(245,158,11,.16); }
html.dark.cg-arm-pasos #cg-armador .cg-stock-tag.es-sin   { color: #f87171; background: rgba(239,68,68,.16); }
html.dark.cg-arm-pasos #cg-armador .cg-stock-tag.es-web   { color: #93c5fd; background: rgba(59,130,246,.18); }
html.cg-arm-pasos #cg-armador .cg-list select.cant-prod-armado {
	float: none;
	align-self: center;
	height: 28px;
	margin: 0 12px 10px;
	padding: 0 8px;
	border: 1px solid var(--arm-line);
	border-radius: 7px;
	background: var(--arm-soft);
	color: var(--arm-t);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}
html.cg-arm-pasos #cg-armador .cg-list select.cant-prod-armado:focus { outline: none; border-color: var(--cga); }

/* ---- Tablet ---- */
@media (max-width: 991px) {
	html.cg-arm-pasos #cg-armador.container { padding: 30px 16px 34px; }
}

/* ---- Movil ---- */
@media (max-width: 767px) {
	html.cg-arm-pasos #cg-armador.container { padding: 25px 14px 28px; }
	html.cg-arm-pasos #cg-armador .cg-hero { flex-direction: column; gap: 4px; }
	html.cg-arm-pasos #cg-armador .cg-hero h1 { font-size: 25px; }
	html.cg-arm-pasos #cg-armador #componentesAgregados { padding: 14px 14px 12px; }
	html.cg-arm-pasos #cg-armador .cg-head-main { flex-wrap: wrap; gap: 12px; }
	html.cg-arm-pasos #cg-armador .cg-head-name { font-size: 18px; }
	html.cg-arm-pasos #cg-armador .cg-head-side { width: 100%; justify-content: space-between; }
	html.cg-arm-pasos #cg-armador .cg-total { text-align: left; }
	html.cg-arm-pasos #cg-armador .cg-tips { align-items: flex-start; }
	html.cg-arm-pasos #cg-armador .cg-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
	html.cg-arm-pasos #cg-armador .cg-list .imagenitemarmado { height: 110px; padding: 8px; }
	html.cg-arm-pasos #cg-armador .cg-list .infoitemarmado { padding: 8px 10px 10px; }
	html.cg-arm-pasos #cg-armador .cg-list .desc-item-armado { font-size: 12.5px; }
	html.cg-arm-pasos #cg-armador .cg-list .precio-ami { font-size: 15px; }
	html.cg-arm-pasos #cg-armador .cg-list select.cant-prod-armado { margin: 0 10px 8px; }
}

/* ---- Pagina de compra (resumen final) ---- */
html.cg-arm-pasos #cg-armador.cg-compra #printJS-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}
html.cg-arm-pasos #cg-armador.cg-compra #printJS-form::before { display: none; }
html.cg-arm-pasos #cg-armador.cg-compra #printJS-form > [class*="col-"] { width: auto; }
html.cg-arm-pasos #cg-armador.cg-compra .elegidos h2 {
	margin: 0;
	font-family: Manrope, Arial, sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: var(--arm-t) !important;
}
html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-sub { margin: 4px 0 16px; font-size: 13.5px; color: var(--arm-m); }
html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items::before { display: none; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items > .item-pc-armada {
	display: flex;
	flex-direction: column;
	width: auto;
	padding: 12px 14px;
	border: 1px solid var(--arm-line);
	border-radius: 12px;
	background: var(--arm-bg);
	color: var(--arm-t);
}
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada img { max-width: 72px; height: auto; }
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .caja-prod-armado { height: auto; margin: 0; padding: 0 !important; border: 0 !important; background: transparent; }
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .caja-prod-armado * { text-align: left; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items > .item-pc-armada { position: relative; }
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .caja-prod-armado {
	display: grid !important;
	grid-template-columns: 72px minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 2px;
	align-items: start;
	padding-right: 22px !important;
}
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .caja-prod-armado::before,
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .caja-prod-armado::after { display: none !important; }
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .caja-prod-armado > :first-child { grid-column: 1; grid-row: 1 / span 12; }
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .caja-prod-armado > :not(:first-child) { grid-column: 2; }
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .caja-prod-armado > * {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .caja-prod-armado img { display: block; width: 72px !important; max-width: 72px; height: auto; float: none !important; margin: 0 !important; }
/* Tilde de "elegido": siempre arriba a la derecha de la tarjeta */
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .caja-prod-armado .fa { position: absolute !important; top: 12px; right: 14px; margin: 0 !important; color: var(--cga); }
/* Nombre del componente (Microprocesador, Cooler...): arriba del producto, no detras */
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .componente {
	display: block !important;
	position: static !important;
	transform: none !important;
	margin: 0 0 4px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .06em;
	text-align: left !important;
	text-transform: uppercase;
	color: var(--cga) !important;
	background: none !important;
}
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .modificar {
	display: flex;
	gap: 14px;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid var(--arm-line);
}
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .modificar a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0;
	color: var(--arm-m) !important;
	text-decoration: none !important;
}
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .modificar a i { font-size: 12px; }
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .modificar a::after { content: "Cambiar"; font-size: 12.5px; font-weight: 700; }
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .modificar a[href*="armarpccompra"]::after { content: "Quitar"; }
html.cg-arm-pasos #cg-armador.cg-compra .item-pc-armada .modificar a:hover { color: var(--cga) !important; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-side { position: sticky; top: 20px; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-resumen {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border: 1px solid var(--arm-line);
	border-radius: 14px;
	background: var(--arm-bg);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
html.cg-arm-pasos #cg-armador.cg-compra .cg-res-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--arm-m); }
html.cg-arm-pasos #cg-armador.cg-compra .cg-res-total { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--cga) !important; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-res-total span { color: inherit !important; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-res-nota { font-size: 12.5px; color: var(--arm-m); }
html.cg-arm-pasos #cg-armador.cg-compra #botoneraCompra { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; text-align: left !important; }
html.cg-arm-pasos #cg-armador.cg-compra #botoneraCompra .btn {
	width: 100%;
	height: 46px;
	margin: 0;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
}
html.cg-arm-pasos #cg-armador.cg-compra #agregarAlCarrito { background: var(--cga) !important; color: #fff !important; }
html.cg-arm-pasos #cg-armador.cg-compra #agregarAlCarrito:hover { background: var(--cg-accent-hover) !important; }
html.cg-arm-pasos #cg-armador.cg-compra #cancelarCompra {
	height: 38px !important;
	border: 1px solid var(--arm-line) !important;
	background: transparent !important;
	color: var(--arm-m) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}
html.cg-arm-pasos #cg-armador.cg-compra #cancelarCompra:hover { border-color: var(--cga) !important; color: var(--cga) !important; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-res-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--arm-line); }
html.cg-arm-pasos #cg-armador.cg-compra .cg-accion {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--arm-line);
	border-radius: 10px;
	background: var(--arm-soft);
	color: var(--arm-t) !important;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	text-align: left;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
html.cg-arm-pasos #cg-armador.cg-compra .cg-accion svg { flex: 0 0 18px; width: 18px; height: 18px; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-accion:hover { border-color: var(--cga); color: var(--cga) !important; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-accion-wa svg { color: #25d366; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-accion-wa:hover { border-color: #25d366; color: #1da851 !important; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-copiado { font-size: 12.5px; font-weight: 700; color: #1da851; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-copiado[hidden] { display: none; }
html.cg-arm-pasos #cg-armador.cg-compra .cg-res-legal { margin: 8px 0 0; font-size: 11.5px; color: var(--arm-m); }
html.cg-arm-pasos #cg-armador.cg-compra .cg-print-head,
html.cg-arm-pasos #cg-armador.cg-compra .cg-print-foot { display: none; }
@media (max-width: 991px) {
	html.cg-arm-pasos #cg-armador.cg-compra #printJS-form { grid-template-columns: 1fr; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-side { position: static; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-resumen { align-items: stretch; gap: 4px; max-width: 460px; margin: 0 auto; padding: 16px; text-align: center; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-res-total { font-size: 26px; }
	html.cg-arm-pasos #cg-armador.cg-compra #botoneraCompra { margin-top: 10px; }
	html.cg-arm-pasos #cg-armador.cg-compra #botoneraCompra .btn { height: 44px; }
	html.cg-arm-pasos #cg-armador.cg-compra #cancelarCompra { height: 36px !important; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-res-acciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-accion {
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		height: auto;
		min-height: 64px;
		padding: 8px 6px;
		font-size: 11.5px;
		line-height: 1.25;
		text-align: center;
	}
	html.cg-arm-pasos #cg-armador.cg-compra .cg-copiado { grid-column: 1 / -1; text-align: center; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-accion span { display: none; }
	html.cg-arm-pasos #cg-armador.cg-compra #cgPresupuesto::after { content: "Presupuesto PDF"; }
	html.cg-arm-pasos #cg-armador.cg-compra #cgCopiarLink::after { content: "Copiar link"; }
	html.cg-arm-pasos #cg-armador.cg-compra #cgWhatsApp::after { content: "WhatsApp"; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-res-legal { margin-top: 6px; }
}
@media (max-width: 600px) {
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items { grid-template-columns: 1fr; }
}
/* ---- Presupuesto en PDF (al imprimir o "Guardar como PDF") ---- */
@media print {
	@page { margin: 14mm; }
	html.cg-arm-pasos header, html.cg-arm-pasos footer, html.cg-arm-pasos .main-footer,
	html.cg-arm-pasos .sidebar, html.cg-arm-pasos .backdrop, html.cg-arm-pasos .menu-toggle,
	html.cg-arm-pasos .gb-top-header { display: none !important; }
	html.cg-arm-pasos body { background: #fff !important; }
	html.cg-arm-pasos body * { visibility: hidden !important; }
	html.cg-arm-pasos #cg-armador.cg-compra, html.cg-arm-pasos #cg-armador.cg-compra * { visibility: visible !important; }
	html.cg-arm-pasos #cg-armador.cg-compra {
		--arm-t: #111318; --arm-m: #4b5563; --arm-bg: #fff; --arm-soft: #fff; --arm-line: #d8dbe0;
		position: absolute; top: 0; left: 0;
		width: 100%; max-width: none; margin: 0; padding: 0;
		background: #fff; color: #111318;
	}
	html.cg-arm-pasos #cg-armador.cg-compra .cg-hero, html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-sub, html.cg-arm-pasos #cg-armador.cg-compra .modificar, html.cg-arm-pasos #cg-armador.cg-compra #botoneraCompra,
	html.cg-arm-pasos #cg-armador.cg-compra .cg-res-acciones, html.cg-arm-pasos #cg-armador.cg-compra .cg-res-legal { display: none !important; }
	html.cg-arm-pasos #cg-armador.cg-compra #printJS-form { display: block; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-print-head {
		display: flex; justify-content: space-between; gap: 20px;
		margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--cga);
	}
	html.cg-arm-pasos #cg-armador.cg-compra .cg-print-head strong { display: block; font-size: 16px; font-weight: 800; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-print-head span { display: block; font-size: 11px; color: #4b5563; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-print-doc { text-align: right; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-print-doc strong { color: var(--cga); }
	html.cg-arm-pasos #cg-armador.cg-compra .elegidos h2 { margin-bottom: 6px; font-size: 13px; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items { display: block; font-size: 11px; line-height: 1.3; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items img { display: none !important; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items .item-pc-armada .caja-prod-armado { display: block !important; padding-right: 0 !important; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items > .item-pc-armada {
		display: block; padding: 5px 0; border: 0; border-bottom: 1px solid var(--arm-line);
		border-radius: 0; background: none; break-inside: avoid; box-shadow: none;
	}
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items > .item-pc-armada.cg-vacio { display: none !important; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items .item-pc-armada * {
		text-align: left !important; border: 0 !important; box-shadow: none !important; background: none !important;
		position: static !important; float: none !important; width: auto !important; max-width: none !important;
		padding-left: 0 !important; margin-left: 0 !important; color: #111318 !important;
	}
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items .fa, html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items svg { display: none !important; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items .item-pc-armada .componente { display: block !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .05em; color: var(--cga) !important; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-items .item-pc-armada * { margin-top: 0 !important; margin-bottom: 0 !important; font-size: 11px !important; line-height: 1.3 !important; min-height: 0 !important; height: auto !important; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-compra-side { position: static; margin-top: 14px; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-resumen { align-items: flex-end; padding: 12px 16px; box-shadow: none; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-print-foot { display: block; margin-top: 16px; font-size: 10.5px; color: #4b5563; }
	html.cg-arm-pasos #cg-armador.cg-compra .cg-print-foot p { margin: 2px 0; }
}

/* ===== Armador Compugarden - aviso de armado sin terminar (portada del armador) ===== */
#cg-recuperar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px solid color-mix(in srgb, var(--cg-accent) 35%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, var(--cg-accent) 8%, transparent);
	font-family: Manrope, Arial, sans-serif;
	text-align: left;
}
#cg-recuperar .cg-rec-ico {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--cg-accent);
	color: #fff;
}
#cg-recuperar .cg-rec-ico svg { display: block; width: 22px; height: 22px; }
#cg-recuperar .cg-rec-txt { flex: 1 1 auto; min-width: 0; }
#cg-recuperar .cg-rec-txt strong { display: block; font-size: 15px; font-weight: 800; color: #111318; }
#cg-recuperar .cg-rec-txt span { display: block; margin-top: 2px; font-size: 13px; color: #5f6671; }
html.dark #cg-recuperar .cg-rec-txt strong { color: #f2f3f5; }
html.dark #cg-recuperar .cg-rec-txt span { color: #a9b0bb; }
#cg-recuperar .cg-rec-acc { display: flex; flex: 0 0 auto; gap: 8px; }
#cg-recuperar a,
#cg-recuperar button {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
}
#cg-recuperar a {
	border: 0;
	background: var(--cg-accent);
	color: #fff !important;
}
#cg-recuperar a:hover { background: var(--cg-accent-hover); }
#cg-recuperar button {
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	background: transparent;
	color: #5f6671;
}
html.dark #cg-recuperar button { color: #a9b0bb; }
#cg-recuperar button:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
@media (max-width: 767px) {
	#cg-recuperar { flex-wrap: wrap; }
	#cg-recuperar .cg-rec-acc { width: 100%; }
	#cg-recuperar a, #cg-recuperar button { flex: 1 1 0; justify-content: center; }
}


/* ======================================================================
   4. FILTROS DEL ARMADOR
   (antes estaba en: HEADER_CSS_JS, bloque cg-filtros-css)
   ====================================================================== */

#cg-armador .cg-fbar { margin: 0 0 14px; font-family: inherit; }
#cg-armador .cg-fbar-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#cg-armador .cg-fbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#cg-armador .cg-fbuscar {
	position: relative;
	flex: 1 1 260px;
	min-width: 0;
}
#cg-armador .cg-fbuscar svg {
	position: absolute;
	top: 50%;
	left: 12px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	color: var(--arm-m, #6b7280);
	pointer-events: none;
}
#cg-armador .cg-fbuscar input {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 12px 0 36px;
	border: 1px solid var(--arm-line, #e3e6ea);
	border-radius: 10px;
	background: var(--arm-bg, #fff);
	color: var(--arm-t, #111318);
	font-family: inherit;
	font-size: 14px;
	box-shadow: none;
	outline: none;
}
#cg-armador .cg-fbuscar input:focus { border-color: var(--cga, #d23f86); }
#cg-armador .cg-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
#cg-armador .cg-fchip,
#cg-armador .cg-fno {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--arm-line, #e3e6ea);
	border-radius: 999px;
	background: var(--arm-bg, #fff);
	color: var(--arm-t, #111318);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
#cg-armador .cg-fchip:hover,
#cg-armador .cg-fno:hover { border-color: var(--cga, #d23f86); color: var(--cga, #d23f86); }
#cg-armador .cg-fchip.is-on {
	border-color: var(--cga, #d23f86);
	background: var(--cga, #d23f86);
	color: #fff;
}
#cg-armador .cg-fchip:focus-visible,
#cg-armador .cg-fno:focus-visible { outline: 2px solid var(--cga, #d23f86); outline-offset: 2px; }
/* Boton "No incluir / Usar incluido" (reemplaza a la tarjeta vacia) */
#cg-armador .cg-fno { border-style: dashed; color: var(--arm-m, #6b7280); }
#cg-armador .cg-fno svg { width: 15px; height: 15px; flex: 0 0 15px; }
#cg-armador .cg-fno.is-reco { border-style: solid; border-color: #22c55e; background: rgba(34,197,94,.10); color: #16a34a; }
#cg-armador .cg-fno.is-reco:hover { background: rgba(34,197,94,.18); color: #15803d; }
#cg-armador .cg-forden {
	height: 40px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--arm-line, #e3e6ea);
	border-radius: 10px;
	background: var(--arm-bg, #fff);
	color: var(--arm-t, #111318);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	outline: none;
}
#cg-armador .cg-forden:focus { border-color: var(--cga, #d23f86); }
#cg-armador .cg-fcuenta { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--arm-m, #6b7280); }
#cg-armador .cg-fcuenta button {
	margin-left: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cga, #d23f86);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}
#cg-armador .cg-list > .cg-f-oculto { display: none !important; }
#cg-armador .cg-fchip[hidden] { display: none !important; }
#cg-armador .cg-fmas {
	display: flex;
	justify-content: center;
	margin: 16px 0 0;
}
#cg-armador .cg-fmas[hidden] { display: none; }
#cg-armador .cg-fmas button {
	height: 42px;
	padding: 0 22px;
	border: 1px solid var(--cga, #d23f86);
	border-radius: 10px;
	background: transparent;
	color: var(--cga, #d23f86);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
#cg-armador .cg-fmas button:hover { background: var(--cga, #d23f86); color: #fff; }
#cg-armador .cg-fvacio {
	margin: 6px 0 0;
	padding: 22px 16px;
	border: 1px dashed var(--arm-line, #e3e6ea);
	border-radius: 12px;
	font-size: 14px;
	text-align: center;
	color: var(--arm-m, #6b7280);
}
#cg-armador .cg-fvacio[hidden] { display: none; }
@media (max-width: 767px) {
	#cg-armador .cg-fbuscar { flex: 1 1 100%; }
	#cg-armador .cg-fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; padding-bottom: 2px; }
	#cg-armador .cg-fchips::-webkit-scrollbar { display: none; }
	#cg-armador .cg-forden { flex: 1 1 100%; }
}


/* ======================================================================
   5. FOOTER
   (antes estaba en: HEADER, bloque cg-footer-css)
   ====================================================================== */

/* ==========================================
   VARIABLES
   Fondo: el mismo azul de las tarjetas de la home.
   Color de marca: sale del header (--cg-accent).
========================================== */

.cg-foot {
  --f-acc: var(--cg-accent, #d23f86);
  --f-acc-h: var(--cg-accent-hover, #b02f6d);
  --f-panel: #20233a;
  --f-panel-h: #282c47;
  --f-line: #2e3248;
  --f-muted: #b9bdd3;
  --f-soft: #8a8fa8;

  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #181a27 !important;
  background-image: linear-gradient(135deg, #181a27 0%, #1b1d31 52%, #151723 100%) !important;
  color: #ffffff !important;
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Reset: el CSS general del sitio centraba y separaba todo */
.cg-foot, .cg-foot *, .cg-foot *::before, .cg-foot *::after { box-sizing: border-box; }
.cg-foot * { font-family: 'Manrope', Arial, sans-serif; text-align: left !important; }
.cg-foot a { text-decoration: none !important; }
.cg-foot ul, .cg-foot li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cg-foot p { margin: 0 !important; padding: 0 !important; }
.cg-foot strong, .cg-foot b { display: inline; margin: 0 !important; padding: 0 !important; }
.cg-foot a:focus-visible, .cg-foot summary:focus-visible { outline: 2px solid var(--f-acc); outline-offset: 3px; }

.cg-foot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--f-acc);
}

.cg-foot__wrap {
  width: 100%;
  max-width: var(--cg-ancho, 1440px);
  margin: 0 auto;
  padding: 0 var(--cg-margen, 20px);
}

/* ==========================================
   1) MARCA + BOTONES
========================================== */

.cg-foot__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0 18px;
  border-bottom: 1px solid var(--f-line);
}

.cg-foot__brand { min-width: 0; }

.cg-foot .cg-foot__name {
  display: block;
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -.045em;
}

.cg-foot .cg-foot__tagline {
  margin-top: 3px !important;
  color: var(--f-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.cg-foot__cta { display: flex; flex: 0 0 auto; gap: 8px; }

.cg-foot .cg-foot__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 8px;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid var(--f-line);
  border-radius: 10px;
  background: var(--f-panel);
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}

.cg-foot__btn svg { flex: 0 0 17px; width: 17px; height: 17px; }
.cg-foot .cg-foot__btn:hover { background: var(--f-panel-h); border-color: var(--f-acc); }
.cg-foot .cg-foot__btn--wa { background: var(--f-acc); border-color: var(--f-acc); }
.cg-foot .cg-foot__btn--wa:hover { background: var(--f-acc-h); border-color: var(--f-acc-h); }
.cg-foot__btn--wa svg { fill: #ffffff; }
.cg-foot__btn--ig svg { fill: none; stroke: var(--f-acc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================
   2) CUATRO COLUMNAS (acordeon en celular)
========================================== */

.cg-foot__cols {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr .9fr 1fr;
  gap: 28px;
  padding: 20px 0 18px;
}

.cg-foot__col { min-width: 0; }

.cg-foot__col > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 11px;
  padding: 0;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  list-style: none;
  cursor: default;
  pointer-events: none;
}

.cg-foot__col > summary::-webkit-details-marker { display: none; }

.cg-foot__col > summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cg-foot__col > summary span::before {
  content: "";
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--f-acc);
}

.cg-foot__list { display: flex !important; flex-direction: column; gap: 7px; }

.cg-foot__list li {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
}

.cg-foot__list li > svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  fill: none;
  stroke: var(--f-acc);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cg-foot .cg-foot__list a,
.cg-foot .cg-foot__list span {
  display: block;
  min-width: 0;
  color: var(--f-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
  transition: color .18s ease;
}

.cg-foot .cg-foot__list a:hover { color: #ffffff !important; }
.cg-foot .cg-foot__list strong { color: #ffffff !important; font-weight: 700 !important; }

/* Datos bancarios */
.cg-foot__bank { margin-top: 10px; }

.cg-foot__bank > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--f-line);
  border-radius: 8px;
  background: var(--f-panel);
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  list-style: none;
}

.cg-foot__bank > summary::-webkit-details-marker { display: none; }
.cg-foot__bank > summary::after { content: "+"; color: var(--f-acc); font-size: 17px; font-weight: 800; line-height: 1; transition: transform .2s ease; }
.cg-foot__bank[open] > summary::after { transform: rotate(45deg); }
.cg-foot__bank > summary:hover { border-color: var(--f-acc); background: var(--f-panel-h); }

.cg-foot__bank-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 10px;
  margin-top: 6px;
  padding: 10px 11px;
  border: 1px solid var(--f-line);
  border-radius: 8px;
  background: var(--f-panel);
}

.cg-foot .cg-foot__bank-label { color: var(--f-soft) !important; font-size: 11px !important; font-weight: 600 !important; }
.cg-foot .cg-foot__bank-value { color: #ffffff !important; font-size: 11.5px !important; font-weight: 700 !important; overflow-wrap: anywhere; }

/* ==========================================
   3) FRANJA DE CONFIANZA (una linea, sin cajas)
========================================== */

.cg-foot__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 30px;
  padding: 12px 0;
  border-top: 1px solid var(--f-line);
}

.cg-foot__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--f-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.cg-foot__trust-item svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--f-acc);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cg-foot .cg-foot__trust-item strong { color: #ffffff !important; font-weight: 800 !important; }

/* ==========================================
   4) PIE
========================================== */

.cg-foot__bottom {
  padding: 12px 0 16px;
  border-top: 1px solid var(--f-line);
}

.cg-foot .cg-foot__copy { color: var(--f-muted) !important; font-size: 11.5px !important; font-weight: 600 !important; }

.cg-foot .cg-foot__legal {
  margin-top: 4px !important;
  color: var(--f-soft) !important;
  font-size: 10.5px !important;
  line-height: 1.55 !important;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {
  .cg-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
}

/* ==========================================
   CELULAR: columnas plegables, todo compacto
========================================== */

@media (max-width: 700px) {

  .cg-foot__wrap { padding: 0 16px; }

  .cg-foot__top {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 20px 0 14px;
  }

  .cg-foot .cg-foot__name { font-size: 19px !important; }
  .cg-foot .cg-foot__tagline { font-size: 12.5px !important; }

  .cg-foot__cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
  .cg-foot .cg-foot__btn { width: 100%; height: 40px !important; padding: 0 10px !important; font-size: 12.5px !important; }

  .cg-foot__cols { display: block; padding: 4px 0 6px; }

  .cg-foot__col { border-bottom: 1px solid var(--f-line); }

  .cg-foot__col > summary {
    height: 46px;
    margin: 0;
    font-size: 12px !important;
    cursor: pointer;
    pointer-events: auto;
  }

  .cg-foot__col > summary::after {
    content: "+";
    color: var(--f-acc);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    transition: transform .2s ease;
  }

  .cg-foot__col[open] > summary::after { transform: rotate(45deg); }
  .cg-foot__col > .cg-foot__body { padding: 0 0 14px; }

  .cg-foot__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 0;
    border-top: 0;
  }

  .cg-foot__trust-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: 11px !important;
  }

  .cg-foot__bottom { padding: 12px 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cg-foot * { transition: none !important; }
}


/* ======================================================================
   6. VENTANAS
   (antes estaba en: HEADER, bloque cg-modales)
   ====================================================================== */

.modal-backdrop.show, .modal-backdrop.in { opacity: .7 !important; background: #07080b !important; }
.modal .modal-dialog { width: auto; max-width: 520px; margin: 1.75rem auto; }
.modal.modal-lg .modal-dialog, .modal .modal-dialog.modal-lg { max-width: 720px; }
.modal .modal-content {
  overflow: hidden;
  background: #16181d !important;
  color: #d9dbe2 !important;
  border: 1px solid #2c2f38 !important;
  border-top: 3px solid var(--cg-accent, #d23f86) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
  font-family: 'Manrope', Arial, sans-serif;
}
.modal .modal-header {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 54px !important;
  background: transparent !important;
  border-bottom: 1px solid #2c2f38 !important;
}
html .modal .modal-content .modal-title {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font: 700 17px/1.35 'Manrope', Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
}
.modal .modal-header .close {
  position: absolute !important;
  top: 50%;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #ffffff !important;
  font-size: 24px;
  line-height: 1;
  opacity: .85 !important;
  text-shadow: none !important;
  transform: translateY(-50%);
}
.modal .modal-header .close:hover,
.modal .modal-header .close:focus-visible { background: rgba(255,255,255,.08); color: var(--cg-accent, #d23f86) !important; opacity: 1 !important; outline: none; }
.modal .modal-body {
  padding: 20px 22px !important;
  color: #d9dbe2 !important;
  font-size: 14px;
  line-height: 1.55;
}
.modal .modal-body p { color: inherit; }
.modal .modal-body a { color: var(--cg-accent, #d23f86); }
.modal .modal-body hr { margin: 16px 0; border: 0; border-top: 1px solid #2c2f38; }
.modal .modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px 18px !important;
  background: transparent !important;
  border-top: 1px solid #2c2f38 !important;
  text-align: center;
}
.modal .modal-footer > * { margin: 0 !important; }
.modal .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px !important;
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: none !important;
}
.modal .btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #ffffff !important;
}
.modal .btn-secondary:hover { border-color: var(--cg-accent, #d23f86) !important; background: rgba(210,63,134,.10) !important; }
.modal .btn-primary, .modal .btn-success, .modal .btn-login, .modal .cg-modal-btn {
  background: var(--cg-accent, #d23f86) !important;
  border: 1px solid var(--cg-accent, #d23f86) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.modal .btn-primary:hover, .modal .btn-success:hover, .modal .btn-login:hover, .modal .cg-modal-btn:hover {
  background: var(--cg-accent-hover, #b02f6d) !important;
  border-color: var(--cg-accent-hover, #b02f6d) !important;
}
.modal .form-control, .modal select, .modal input[type="text"], .modal input[type="email"] {
  height: 44px;
  background: #f2f5fb;
  color: #1b1f2a;
  border: 1px solid #d8dfea;
  border-radius: 9px;
  box-shadow: none;
}
/* Bloques de contenido reutilizables (venta telefonica, empresas, avisos) */
.modal .cg-modal-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(210,63,134,.14);
  color: var(--cg-accent, #d23f86);
  font-size: 22px;
}
.modal .cg-modal-lead { margin: 0 0 14px !important; color: #ffffff !important; font-size: 16px; font-weight: 700; text-align: center; }
.modal .cg-modal-btn { width: 100%; min-height: 48px; font-size: 15px; gap: 8px; }
.modal .cg-modal-info { margin: 12px 0 0 !important; color: #a3a8b4 !important; font-size: 13px; text-align: center; }
.modal .cg-modal-lista { display: grid; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.modal .cg-modal-lista li {
  position: relative;
  padding-left: 26px;
  color: #d9dbe2;
  font-size: 14px;
  list-style: none !important;
}
.modal .cg-modal-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(210,63,134,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23d23f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
/* Tablas dentro de ventanas (ej.: "Tarjetas y promociones" del detalle de producto) */
.modal .modal-body table {
  width: 100%;
  margin: 4px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.modal .modal-body table th,
.modal .modal-body table thead td {
  padding: 0 10px 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #2c2f38 !important;
  color: #a3a8b4 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.modal .modal-body table td {
  padding: 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #23262d !important;
  color: #d9dbe2 !important;
}
.modal .modal-body table tr:last-child td { border-bottom: 0 !important; }
.modal .modal-body table td:first-child,
.modal .modal-body table td:last-child { color: #ffffff !important; font-weight: 600; }
.modal .modal-body table tbody tr:hover td { background: rgba(210,63,134,.08) !important; }
.modal .modal-body table th:first-child, .modal .modal-body table td:first-child { padding-left: 4px !important; }
.modal .modal-body table th:last-child, .modal .modal-body table td:last-child { padding-right: 4px !important; }
@media (max-width: 575px) {
  .modal .modal-dialog { margin: 12px !important; max-width: none; }
  .modal .modal-body { padding: 16px !important; }
  .modal .modal-footer { flex-direction: column; }
  .modal .modal-footer .btn { width: 100%; }
}


/* ======================================================================
   7. VENTANA DE CUOTAS
   (antes estaba en: HEADER, bloque cg-cuotas)
   ====================================================================== */

.modal.cg-cuotas-modal .modal-content { border-top: 0 !important; }
.modal.cg-cuotas-modal .modal-header {
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  padding: 18px 54px 20px !important;
  background: linear-gradient(135deg, #181a27 0%, #1b1d31 52%, #151723 100%) !important;
  border-bottom: 3px solid var(--cg-accent, #d23f86) !important;
}
html .modal.cg-cuotas-modal .modal-content .modal-title {
  color: #a3a8b4 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
.modal.cg-cuotas-modal .cg-cuotas-precio {
  color: #ffffff;
  font: 800 30px/1.15 'Manrope', Arial, sans-serif;
  letter-spacing: -.02em;
  text-align: center;
}
.modal.cg-cuotas-modal .cg-cuotas-oculto { display: none !important; }
.modal.cg-cuotas-modal .modal-body { padding: 16px 18px 12px !important; }
.modal.cg-cuotas-modal .cg-cuotas-mejor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(210,63,134,.45);
  border-radius: 12px;
  background: rgba(210,63,134,.12);
}
.modal.cg-cuotas-modal .cg-cuotas-mejor small {
  display: block;
  color: #f0a9cb;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.modal.cg-cuotas-modal .cg-cuotas-mejor strong { display: block; color: #ffffff; font-size: 18px; font-weight: 800; line-height: 1.2; }
.modal.cg-cuotas-modal .cg-cuotas-mejor span { display: block; color: #d9dbe2; font-size: 13px; }
.modal.cg-cuotas-modal .cg-cuotas-sello {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--cg-accent, #d23f86);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.modal.cg-cuotas-modal .modal-body table tr.cg-cuotas-cabecera td {
  padding: 0 4px 8px !important;
  border-bottom: 1px solid #2c2f38 !important;
  color: #a3a8b4 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent !important;
}
.modal.cg-cuotas-modal .modal-body table tr.cg-cuotas-cabecera td b { font-weight: 700; color: inherit; }
.modal.cg-cuotas-modal .modal-body table tr.cg-cuotas-cabecera td:nth-child(2),
.modal.cg-cuotas-modal .modal-body table tr.cg-cuotas-cabecera td:nth-child(3),
.modal.cg-cuotas-modal .modal-body table tr.cg-cuotas-fila td:nth-child(2),
.modal.cg-cuotas-modal .modal-body table tr.cg-cuotas-fila td:nth-child(3) { text-align: right !important; }
.modal.cg-cuotas-modal .modal-body table tr.cg-cuotas-fila td { padding: 10px 4px !important; }
.modal.cg-cuotas-modal .modal-body table tr.cg-cuotas-par td { background: rgba(255,255,255,.03) !important; }
.modal.cg-cuotas-modal .modal-body table tr.cg-sin-interes td { background: rgba(210,63,134,.10) !important; }
.modal.cg-cuotas-modal .cg-etiqueta-si {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(210,63,134,.18);
  color: #f0a9cb;
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: 1px;
}
.modal.cg-cuotas-modal .cg-cuotas-nota { margin: 12px 0 2px !important; color: #8a8fa8 !important; font-size: 11.5px; text-align: center; }
@media (max-width: 575px) {
  .modal.cg-cuotas-modal .cg-cuotas-precio { font-size: 26px; }
  .modal.cg-cuotas-modal .cg-cuotas-mejor strong { font-size: 16px; }
}


/* ======================================================================
   8. VENTANAS EN MODO CLARO
   (antes estaba en: HEADER, bloque cg-modales-claro)
   ====================================================================== */

html:not(.dark) .modal-backdrop.show, html:not(.dark) .modal-backdrop.in { opacity: .45 !important; background: #0b0c10 !important; }
html:not(.dark) .modal .modal-content,
html:not(.dark) .modal .modal-header,
html:not(.dark) .modal .modal-body,
html:not(.dark) .modal .modal-footer,
html:not(.dark) #modalcompra .modal-content,
html:not(.dark) #modalrecuperocontra .modal-content,
html:not(.dark) #modalrecuperocontra .modal-header,
html:not(.dark) #modalrecuperocontra .modal-body {
  background: #ffffff !important;
  color: #15171c !important;
}
html:not(.dark) .modal .modal-content { border-color: #e3e6ea !important; box-shadow: 0 18px 50px rgba(15,17,25,.18) !important; }
html:not(.dark) .modal .modal-header, html:not(.dark) #modalcompra .modal-header, html:not(.dark) #modalrecuperocontra .modal-header { border-bottom-color: #e3e6ea !important; }
html:not(.dark) .modal .modal-footer, html:not(.dark) #modalcompra .modal-footer { border-top-color: #e3e6ea !important; }
html:not(.dark) .modal .modal-content .modal-title,
html:not(.dark) #modalcompra .modal-title,
html:not(.dark) #modalrecuperocontra .modal-title { color: #15171c !important; }
html:not(.dark) .modal .modal-header .close,
html:not(.dark) #modalcompra .close,
html:not(.dark) #modalrecuperocontra .close { color: #15171c !important; }
html:not(.dark) .modal .modal-header .close:hover { background: #f1f2f5; color: var(--cg-accent, #d23f86) !important; }
html:not(.dark) .modal .modal-body, html:not(.dark) .modal .modal-body p, html:not(.dark) .modal .modal-body li,
html:not(.dark) #modalcompra #contenidoModalCompra,
html:not(.dark) #modalrecuperocontra .cg-recupero-box p { color: #3a3f4b !important; }
html:not(.dark) .modal .modal-body hr { border-top-color: #e3e6ea; }
html:not(.dark) .modal .cg-modal-lead, html:not(.dark) #modalrecuperocontra .cg-recupero-box h3 { color: #15171c !important; }
html:not(.dark) .modal .cg-modal-info { color: #6b7280 !important; }
html:not(.dark) .modal .btn-secondary,
html:not(.dark) #modalcompra .modal-footer .btn-secondary {
  background: #ffffff !important;
  border: 1px solid #d0d4da !important;
  color: #15171c !important;
}
html:not(.dark) .modal .btn-secondary:hover,
html:not(.dark) #modalcompra .modal-footer .btn-secondary:hover { border-color: var(--cg-accent, #d23f86) !important; color: var(--cg-accent, #d23f86) !important; }
/* Tablas */
html:not(.dark) .modal .modal-body table th,
html:not(.dark) .modal .modal-body table thead td { color: #6b7280 !important; border-bottom-color: #e3e6ea !important; }
html:not(.dark) .modal .modal-body table td { color: #3a3f4b !important; border-bottom-color: #eef0f3 !important; }
html:not(.dark) .modal .modal-body table td:first-child,
html:not(.dark) .modal .modal-body table td:last-child { color: #15171c !important; }
html:not(.dark) .modal.cg-cuotas-modal .modal-body table tr.cg-cuotas-par td { background: #f7f8fa !important; }
html:not(.dark) .modal.cg-cuotas-modal .modal-body table tr.cg-cuotas-cabecera td { color: #6b7280 !important; border-bottom-color: #e3e6ea !important; }
html:not(.dark) .modal.cg-cuotas-modal .modal-body table tr.cg-sin-interes td { background: rgba(210,63,134,.08) !important; }
/* "Tarjetas y promociones": la franja de arriba sigue azul en ambos temas */
html:not(.dark) .modal.cg-cuotas-modal .modal-header {
  background: linear-gradient(135deg, #181a27 0%, #1b1d31 52%, #151723 100%) !important;
  border-bottom-color: var(--cg-accent, #d23f86) !important;
}
html:not(.dark) .modal.cg-cuotas-modal .modal-content .modal-title { color: #a3a8b4 !important; }
html:not(.dark) .modal.cg-cuotas-modal .modal-header .close { color: #ffffff !important; }
html:not(.dark) .modal.cg-cuotas-modal .cg-cuotas-mejor { background: rgba(210,63,134,.07); }
html:not(.dark) .modal.cg-cuotas-modal .cg-cuotas-mejor small { color: #b02f6d; }
html:not(.dark) .modal.cg-cuotas-modal .cg-cuotas-mejor strong { color: #15171c; }
html:not(.dark) .modal.cg-cuotas-modal .cg-cuotas-mejor span { color: #3a3f4b; }
html:not(.dark) .modal.cg-cuotas-modal .cg-etiqueta-si { background: rgba(210,63,134,.12); color: #b02f6d; }
html:not(.dark) .modal.cg-cuotas-modal .cg-cuotas-nota { color: #6b7280 !important; }


/* ======================================================================
   9. DISENO VIEJO cgnew9.css
   (antes estaba en: GitHub MrObjection)
   ====================================================================== */

.main-header--center-nav {
 font-size:0;
 left:0;
 padding:10px 20px;
 position:relative;
 text-align:center;
 top:0;
 width:100%;
 z-index:1001;
 -webkit-transition:top 0.2s ease-out;
 -moz-transition:top 0.2s ease-out;
 -o-transition:top 0.2s ease-out;
 transition:top 0.2s ease-out
}
.inner-wrapper {
 margin:0 auto;
 max-width:100%
}
.logo-content {
 width:20%
}
.main-header-col-md,
.main-header-col-lg {
 box-sizing:border-box;
 display:inline-block;
 font-size:initial;
 vertical-align:middle
}
.gb-mobile-menu-button,
.gb-search-button-mobile,
.gb-search-button-shopping-cart,
.cp-mobile-menu-button,
.cp-search-button-mobile,
.cp-search-button-shopping-cart {
 display:none
}
.gb-icon-dehaze::before {
 content:"e3c7"
}
[class^="gb-icon-"],
[class*=" gb-icon-"] {
 font-family:'gb-font' !important;
 speak:none;
 font-style:normal;
 font-weight:normal;
 font-variant:normal;
 text-transform:none;
 line-height:1;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale
}
.logo-content .logo {
 display:inline-block;
 float:left
}
.header-content a {
 outline:none;
 cursor:pointer
}
.logo-content .logo img[src*="logo-compumundo.svg"] {
 width:270px
}
.logo-content .logo img {
 display:block;
 height:50px;
 max-width:100%
}
button::-moz-focus-inner,
input::-moz-focus-inner {
 border:0;
 padding:0
}
.gb-icon-search2::before {
 content:"e8b6";
 vertical-align:top
}
.header-content a {
 outline:none;
 cursor:pointer
}
.gb-mobile-menu-button,
.gb-search-button-mobile,
.gb-search-button-shopping-cart,
.cp-mobile-menu-button,
.cp-search-button-mobile,
.cp-search-button-shopping-cart {
 display:none
}
.gb-icon-shopping-cart::before {
 content:"e8cc"
}
.search-content {
 width:50%;
 padding:0 20px
}
.main-header-col-md,
.main-header-col-lg {
 box-sizing:border-box;
 display:inline-block;
 font-size:initial;
 vertical-align:middle
}
.gb-search {
 position:relative
}
.gb-search .gb-search-back,
.gb-search .gb-search-close-mobile,
.gb-search .gb-search-button-mobile {
 display:none
}
.header-content a {
 outline:none;
 cursor:pointer
}
button::-moz-focus-inner,
input::-moz-focus-inner {
 border:0;
 padding:0
}
.gb-search-input::placeholder {
 color:#9E9E9E
}
.gb-search-button img {
 width:20px;
 display:block;
 margin:0 auto
}
.gb-search-dropdown {
 background-color:#fff;
 border-radius:0 0 4px 4px;
 box-shadow:0 2px 4px 0 rgba(0,0,0,0.2);
 color:#333;
 display:none;
 font-size:14px;
 left:0;
 line-height:42px;
 max-height:500px;
 opacity:0;
 overflow:auto;
 padding:0 15px;
 position:absolute;
 right:0;
 text-align:left;
 top:40px;
 visibility:hidden
}
.promo-content {
 width:30%;
 text-align:right
}
.main-header-col-md,
.main-header-col-lg {
 box-sizing:border-box;
 display:inline-block;
 font-size:initial;
 vertical-align:middle
}
.promo-content a,
.promo-content a:hover,
.promo-content a:visited {
 color:#fff;
 display:inline-block;
 font-size:18px;
 font-weight:700;
 line-height:initial;
 word-break:break-all
}
.header-content a {
 outline:none;
 cursor:pointer
}
.ellipsis-text {
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 max-width:100%
}
.gb-search-button {
 background-color:transparent;
 border:none;
 border-left:1px solid #E2E2E2;
 height:28px;
 padding:0;
 position:absolute;
 right:0;
 top:50%;
 transform:translateY(-50%);
 width:45px
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
 -webkit-appearance:button;
 cursor:pointer
}
button,
input,
select,
textarea {
 font-family:inherit;
 font-size:100%;
 margin:0
}
.gb-search-button img {
 width:20px;
 display:block;
 margin:0 auto
}
.gb-search-input {
 background-color:#fff;
 border-radius:4px;
 border:none;
 box-shadow:0 2px 4px 0 rgba(0,0,0,0.2);
 color:#333;
 display:block;
 font-size:16px;
 height:40px;
 line-height:40px;
 padding:0 45px 0 15px;
 width:100%
}
.gb-search-button {
 background-color:transparent;
 border:none;
 border-left:1px solid #E2E2E2;
 height:28px;
 padding:0;
 position:absolute;
 right:0;
 top:50%;
 transform:translateY(-50%);
 width:45px
}
@media screen and (max-width:768px) {
 .logo-content .logo img {
  display:block;
  height:42px;
  max-width:100%
 }
 .search-content {
  width:100%;
  padding:0 20px
 }
}
.main-header--bottom-nav {
 font-size:15px;
 padding:0 20px 5px 45px;
 margin-top:-1.8%;
 max-width:1250px;
 margin-right:auto;
 margin-left:auto
}
.inner-wrapper {
 margin:0 auto;
 max-width:100%
}
.bottom-nav--left-column {
 max-width:100%
}
.bottom-nav--left-column,
.bottom-nav--right-column {
 display:inline-block
}
.is-inline-block {
 display:inline-block
}
.menu-content {
 display:inline-block;
 vertical-align:middle
}
.category-btn::after {
 border-bottom:5px solid #F6F6F6;
 border-left:5px solid transparent;
 border-right:5px solid transparent;
 display:none;
 right:-1px;
 top:calc(100% - 5px)
}
.category-btn::before,
.category-btn::after {
 content:"";
 position:absolute
}
.category-btn::before {
 border-top:5px solid #fff;
 border-left:4px solid transparent;
 border-right:4px solid transparent;
 bottom:100%;
 right:0px;
 top:50%;
 transform-origin:50% 50%;
 transform:translateY(-50%) rotate(0deg);
 transition:all .2s ease-in-out
}
.category-btn {
 color:#fff;
 cursor:pointer;
 display:inline-block;
 font-weight:700;
 line-height:30px;
 padding-right:13px;
 position:relative
}
.nav-menu {
 background-color:#F6F6F6;
 border-radius:4px;
 box-shadow:0 4px 8px 0 rgba(0,0,0,0.4);
 display:none;
 font-size:14px;
 margin-bottom:32px;
 min-height:525px;
 overflow:hidden;
 position:absolute;
 top:100%;
 vertical-align:top;
 z-index:100;
 transform:translateY(-5px)
}
.nav-menu-n1 {
 flex:0 0 240px;
 padding:10px 0;
 width:240px
}
.nav-menu-n1 li .nav-menu-n1-name,
.nav-menu-n1 li .nav-menu-n1-name:visited {
 color:#333
}
.ellipsis-text {
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 max-width:100%
}
.nav-menu-n1-name,
.nav-menu-n1-name:visited {
 cursor:pointer;
 display:block;
 font-weight:600;
 line-height:40px;
 padding:0 40px 0 20px;
 position:relative
}
.nav-submenu-content {
 background-color:#fff
}
.nav-submenu {
 display:none;
 padding:24px 30px 0 30px;
 width:960px;
 flex:0 0 960px
}
.nav-submenu-header {
 border-bottom:1px solid #E2E2E2;
 margin-bottom:20px;
 padding-bottom:5px;
 height:40px;
 overflow:hidden;
 margin-top:19px
}
.nav-submenu-title {
 color:#333;
 display:inline-block;
 font-size:24px;
 font-weight:300;
 line-height:initial;
 vertical-align:middle;
 margin-left:17px
}
.nav-submenu-header a,
.nav-submenu-header a:visited {
 border-left:1px solid #E2E2E2;
 color:#6B6B6B;
 display:inline-block;
 font-weight:600;
 line-height:23px;
 margin-bottom:-8px;
 margin-left:15px;
 padding:0 0 0 15px;
 vertical-align:middle
}
.nav-submenu-body {
 font-size:0
}
.nav-submenu--col-lg {
 width:calc(100% - 202px)
}
.nav-submenu--col-lg,
.nav-submenu--col-sm {
 display:inline-block;
 font-size:initial;
 vertical-align:top
}
.nav-submenu-categories {
 display:flex;
 flex-wrap:wrap
}
.nav-submenu-n2 {
 font-size:14px;
 line-height:24px;
 padding:0 30px 24px 0;
 width:33%
}
.nav-submenu-n2-name {
 line-height:initial;
 height:24px
}
.nav-submenu-n2-name a,
.nav-submenu-n2-name a:visited {
 color:#333;
 font-weight:700;
 font-size:14px
}
.nav-submenu-n2 a {
 display:inline-block;
 line-height:24px
}
.ellipsis-text {
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 max-width:100%
}
.nav-submenu-n3 li {
 display:block
}
.nav-submenu-n3 a,
.nav-submenu-n3 a:visited {
 color:#6B6B6B;
 font-size:13px;
 vertical-align:top
}
.nav-submenu-n2 a {
 display:inline-block;
 line-height:24px
}
.ellipsis-text {
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 max-width:100%
}
.nav-submenu--col-sm {
 width:202px
}
.nav-submenu--col-lg,
.nav-submenu--col-sm {
 display:inline-block;
 font-size:initial;
 vertical-align:top
}
.nav--image-quickLink {
 border:1px solid #E2E2E2;
 border-radius:4px;
 overflow:hidden;
 position:relative;
 margin-bottom:22px
}
.nav--image-quickLink img,
.nav--image-quickLink a {
 display:block;
 margin-left:auto;
 margin-right:auto;
 max-width:100%
}
.nav--image-quickLink img,
.nav--image-quickLink a {
 display:block;
 margin-left:auto;
 margin-right:auto;
 max-width:100%
}
.nav--image-quickLink-text {
 line-height:20px;
 display:block;
 display:-webkit-box;
 max-width:100%;
 max-height:40px;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
 text-overflow:ellipsis;
 bottom:10px;
 color:#333;
 font-size:16px;
 left:20px;
 position:absolute;
 right:20px;
 text-align:center
}
.nav--image-quickLink img,
.nav--image-quickLink a {
 display:block;
 margin-left:auto;
 margin-right:auto;
 max-width:100%
}
.nav--image-quickLink img,
.nav--image-quickLink a {
 display:block;
 margin-left:auto;
 margin-right:auto;
 max-width:100%
}
.nav--image-quickLink-text {
 line-height:20px;
 display:block;
 display:-webkit-box;
 max-width:100%;
 max-height:40px;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
 text-overflow:ellipsis;
 bottom:10px;
 color:#333;
 font-size:16px;
 left:20px;
 position:absolute;
 right:20px;
 text-align:center
}
.featured-list {
 display:inline-block;
 max-width:100%;
 vertical-align:middle
}
.featured-list li a,
.featured-list li a:visited {
 color:#fff;
 font-size:15px;
}
.featured-list li:last-child {
 margin-right:0
}
.featured-list li {
 line-height:30px;
 display:inline-block
}
.featured-list li a,
.featured-list li a:visited {
 color:#fff;
 font-size:15px;
}
.pull-right {
 float:right
}
.bottom-nav--left-column,
.bottom-nav--right-column {
 display:inline-block
}
.is-inline-block {
 display:inline-block
}
.header-links {
 text-align:right;
 vertical-align:middle;
 width:350px
}
.user-options {
 width:calc(100% - 110px)
}
.user-options,
.header-icons {
 display:inline-block;
 vertical-align:middle
}
.user-options a {
 font-size:15px;
 font-weight:700
}
.header-links a,
.header-links a:hover,
.header-links a:visited {
 color:#fff;
 display:inline-block;
 line-height:30px;
 margin-left:10px;
 margin-right:5px;
 vertical-align:middle
}
.is-inline-block {
 display:inline-block
}
.header-icons {
 width:105px;
 text-align:right
}
.user-options,
.header-icons {
 display:inline-block;
 vertical-align:middle
}
.inline-list {
 display:inline-block;
 font-size:0;
 margin:0;
 padding:0;
 margin-left:-30px;
 margin-top: 
}
.inline-list li {
 display:inline-block;
 font-size:initial
}
.header-icons a {
 display:inline-block;
 height:30px;
 padding:0 5px;
 position:relative;
 width:35px
}
.header-icons a span {
 display:block;
 position:absolute;
 top:50%;
 transform:translateY(-50%)
}
.header-icons a img {
 display:block;
 height:22px;
 vertical-align:middle;
 width:26px
}
.header-icons a {
 display:inline-block;
 height:30px;
 padding:0 5px;
 position:relative;
 width:35px
}
.header-icons a span {
 display:block;
 position:absolute;
 top:50%;
 transform:translateY(-50%)
}
.header-icons a img {
 display:block;
 height:22px;
 vertical-align:middle;
 width:26px
}
.featured-list li {
 line-height:30px;
 display:inline-block;
 margin-left:36px;
 margin-top:2%
}
div.ingresotop {
 text-align:left;
 display:inline-block
}
.navbar.navbar-expand-lg {
 height:50px;
 margin-right:0px
}
.mb-4 {
 margin-bottom:0rem !important
}
.dropbtn {
 color:white;
 border:none;
 cursor:pointer;
 background-color:black
}
.dropdown {
 position:relative;
 display:inline-block;
 color:white
}
#menu1 {
 background-color:#F6F6F6;
 border-radius:4px;
 box-shadow:0 4px 8px 0 rgba(0,0,0,0.4);
 font-size:14px;
 margin-bottom:32px;
 min-height:867px;
 min-width:160px;
 transform:translateY(-5px);
 vertical-align:top
}
.dropdown-menu.sub-menu {
 background-color:#F6F6F6;
 border-top-right-radius:4px; /*! box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4); */
 font-size: 14px;
 margin-bottom:32px;
 min-height:868px;
 min-width:160px;
 vertical-align:top;
 margin-left:-0.6px; /*! transform: translateY(-1.6%); */
 border-bottom-right-radius: 4px; /*! border-bottom-left-radius: 4px; */
}
}
.dropdown-content {
 background-color:#F6F6F6;
 border-radius:4px;
 box-shadow:0 4px 8px 0 rgba(0,0,0,0.4);
 display:none;
 font-size:14px;
 margin-bottom:32px;
 min-height:525px;
 overflow:hidden;
 position:absolute;
 top:100%;
 vertical-align:top;
 z-index:100;
 transform:translateY(-5px);
 min-width:160px
}
#menu1 a {
 color:black;
 padding:8px 16px;
 text-decoration:none;
 display:block;
 color:#6B6B6B;
 font-weight:700;
 margin-top:5px;
 margin-bottom:5px;
 font-size:15px
}
.catmenu::after {
 color:#6B6B6B;
 content:">";
 position:absolute;
 right:15px;
 top:50%;
 transform:translateY(-50%)
}
#menu1 a:hover::after {
 color:#fff
}
#menu1 a:hover {
 background-color:#ff003dff;
 color:#fff
}
.dropdown:hover .dropdown-content {
 display:block
}
.carritotop span {
 top:0;
 display:inline;
 transform:none
}
.ircarrito a {
 width:75px;
 left:-90%;
 margin-top:9px
}
#contador.cantidad_carrito {
 display:contents;
 top:0;
 transform:none
}
#montoCarrito.montocarrito {
 display:inline;
 transform:none;
 top:0
}
#submenu1:hover~#menu1.dropdown-content2 {
 display:block
}
.dropdown-content2 {
 background-color:#F6F6F6;
 border-radius:4px; /*! box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4); */
 display: none;
 font-size:14px;
 margin-bottom:32px;
 min-height:365px;
 overflow:hidden;
 position:absolute;
 top:550%;
 vertical-align:top;
 z-index:100;
 transform:translateY(-5px);
 min-width:320px
}
.menu1 a {
 color:black;
 padding:12px 16px;
 text-decoration:none;
 display:block;
 color:#6B6B6B;
 font-weight:700
}
.nav-header {
 color:black;
 padding:12px 16px;
 text-decoration:none;
 display:block;
 color:#black;
 font-weight:700;
 text-transform:uppercase
}
.menu1 {
 display:none;
 background-color:#F6F6F6;
 border-radius:4px;
 font-size:14px;
 margin-bottom:32px;
 min-height:365px;
 overflow:hidden;
 top:30%;
 vertical-align:top;
 z-index:100;
 transform:translateY(-5px);
 min-width:320px;
 position:absolute
}
.submenu1:hover~.menu1 {
 display:block
}
.sidebar-nav {
 padding:9px 0
}
.dropdown-menu .sub-menu {
 left:99%;
 position:fixed;
 top:0;
 visibility:hidden;
 margin-top:-1px;
 top:-0.1%;
 z-index:0
}
.dropdown-menu li:hover .sub-menu {
 visibility:visible
}
.dropdown:hover .dropdown-menu {
 display:block
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
 margin-top:0px
}
.navbar .sub-menu:before {
 border-bottom:7px solid transparent;
 border-left:none;
 border-right:7px solid rgba(0, 0, 0, 0.2);
 border-top:7px solid transparent;
 left:-7px;
 top:10px
}
.navbar .sub-menu:after {
 border-top:6px solid transparent;
 border-left:none;
 border-right:6px solid #fff;
 border-bottom:6px solid transparent;
 left:10px;
 top:11px;
 left:-6px
}
.titcate {
 text-transform:uppercase;
 font-weight:700;
 margin-top:10px
}
.nav-submenu-header a {
 border-left:1px solid #E2E2E2;
 color:#6B6B6B !important;
 display:inline-block !important;
 font-weight:600 !important;
 line-height:23px;
 margin-bottom:-8px !important;
 margin-left:15px;
 padding:0 0 0 15px !important;
 vertical-align:middle;
 margin-top:0px !important;
 font-size:18px
}
.col-md-3 ol {
 list-style:none
}
#noticiasHome img {
 width:100%;
 margin:0.1%
}
.textosvgbotgarden h2 {
 position:sticky;
 padding:5px 1px 5px 1px;
 margin-top:-15px;
 font-size:x-large;
 color:black;
 font-weight:bolder;
 font-family:'open sans',sans-serif;
 text-align:center;
 margin-left:20%
}
#svgboxbot.col-md-3.col-xs-6 {
 flex:0 0 19.5%
}
@media (max-width:767px) {
 #svgboxbot.col-md-3.col-xs-6 {
  display:none
 }
}
@media screen and (max-width:768px) {
 header .container.header {
  width:100%;
  padding:0;
  padding-top:20px;
  padding-bottom:20px
 }
 .navbar a.navbar-brand img {
  margin-top:-10px;
  margin-bottom:12px;
  margin-left:10px
 }
 a#usuarioMovilLogueado,
 a#usuarioMovilSinLoguear {
  position:absolute;
  top:19px;
  right:95px
 }
 .navbar-collapse {
  margin-top:-3%
 }
 div.flexslider {
  margin-top:90px
 }
}
@media screen and (max-width:476px) {
 .navbar a.navbar-brand img {
  margin-top:0%;
  margin-left:10px;
  position:sticky
 }
}
@media screen and (max-width:1247px) {
 .bottom-nav--left-column {
  margin-top:1%
 }
 .header-links.is-inline-block {
  margin-top:5%
 }
 .featured-list li a {
  font-size:14px
 }
}
@media screen and (max-width:1134px) {
 .bottom-nav--left-column {
  margin-top:1%
 }
 .header-links.is-inline-block {
  margin-top:4%;
 }
 .featured-list li a {
  font-size:14px
 }
}
@media screen and (max-width:1043px) {
 .bottom-nav--left-column {
  margin-top:1%
 }
 .header-links.is-inline-block {
  margin-top:3%;
 }
 .featured-list li a {
  font-size:14px
 }
}
@media screen and (max-width:907px) {
 .bottom-nav--left-column {
  margin-top:1%
 }
 .header-links.is-inline-block {
  margin-top:2%;
 }
 .featured-list li a {
  font-size:14px
 }
}
@media screen and (max-width:795px) {
 .bottom-nav--left-column {
  margin-top:1%
 }
 .header-links.is-inline-block {
  margin-top:2%
 }
 .featured-list li a {
  font-size:11px
 }
}
@media screen and (max-width:2267px) {
 .gb-category-menu.main-header--bottom-nav { /*! margin-top: -1.1%; */
 }
 .pull-right.bottom-nav--right-column {
  margin-top:1%
 }
 .header-links.is-inline-block {
  margin-top:6%
 }
}
@media screen and (max-width:1951px) {
 .gb-category-menu.main-header--bottom-nav {
  margin-top:-1.29%
 }
 .header-links.is-inline-block {
  margin-top:4%
 }
}
@media screen and (max-width:1700px) {
 .gb-category-menu.main-header--bottom-nav {
  margin-top:-1.40%
 }
 .header-links.is-inline-block {
  margin-top:2%
 }
}
@media screen and (max-width:1519px) {
 .gb-category-menu.main-header--bottom-nav {
  margin-top:-1.74%
 }
 .header-links.is-inline-block {
  margin-top:2%
 }
}
@media screen and (max-width:1319px) {
 .gb-category-menu.main-header--bottom-nav {
  margin-top:-2.19%
 }
 .header-links.is-inline-block {
  margin-top:4%
 }
}
@media screen and (max-width:1119px) {
 .gb-category-menu.main-header--bottom-nav {
  margin-top:-2.29%
 }
}
@media screen and (max-width:1019px) {
 .gb-category-menu.main-header--bottom-nav {
  margin-top:-2.15%
 }
}
section#noticiasHome {
 margin-top:15px;
 max-width:1250px;
 margin-right:auto;
 margin-left:auto
}
#svgboxbot:hover {
 -webkit-transform:scale(1.2);
 transform:scale(1.2);
 opacity:1
}
.gb-category-grid .gb-category-grid-item {
 background-size:cover;
 background-repeat:no-repeat;
 background-position:center;
 height:260px;
 padding:10px;
 position:relative;
 text-align:center;
 width:100%
}
.gb-home-module {
 padding:20px 0 0 0
}
.gb-category-grid a {
 display:block;
 height:100%; /*! margin-top: 30px; */
 text-decoration: none;
 width:100%;
 border:1px solid #E2E2E2
}
.gb-category-grid .gb-category-grid-item {
 background-size:cover;
 background-repeat:no-repeat;
 background-position:center;
 height:260px;
 padding:10px;
 position:relative;
 text-align:center;
 width:100%
}
.hover-box {
 -webkit-transition:all 0.15s linear;
 -khtml-transition:all 0.15s linear;
 -moz-transition:all 0.15s linear;
 -ms-transition:all 0.15s linear;
 -o-transition:all 0.15s linear;
 transition:all 0.15s linear;
 box-shadow:0 0 0 0 rgba(0,0,0,0.33)
}
.gb-category-grid .gb-category-grid-item .category-info {
 position:relative;
 top:180px
}
.category-info {
 text-align:center
}
.category-name--lg {
 font-size:18px
}
.category-name--lg {
 font-size:18px
}
.category-name {
 color:#333;
 font-size:16px;
 line-height:initial;
 padding:2px 0
}
.ellipsis-text {
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 max-width:100%
}
.category-discount--lg {
 font-size:18px;
 line-height:26px
}
.category-discount {
 color:#0F7300;
 font-size:15px;
 display:inline-block;
 line-height:20px
}
.gb-category-grid .gb-category-grid-inner [class*="col-"]:nth-child(1) a,
.gb-category-grid .gb-category-grid-inner [class*="col-"]:nth-child(2) a,
.gb-category-grid .gb-category-grid-inner [class*="col-"]:nth-child(3) a {
 margin-top:0
}
.gb-category-grid .gb-category-grid-item .category-grid-discount-highlight {
 -webkit-border-radius:50%;
 -khtml-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 -o-border-radius:50%;
 border-radius:50%;
 background-color:#333;
 border:2px solid #fff;
 color:#fff;
 font-size:14px;
 height:80px;
 padding-top:13px;
 position:absolute;
 right:15px;
 text-align:center;
 top:100px;
 width:80px
}
.gb-category-grid .gb-category-grid-item .category-grid-discount-highlight span {
 font-size:25px;
 font-weight:700;
 display:block
}
.gb-category-grid .gb-category-grid-item .category-info {
 position:relative;
 top:180px
}
.category-name.category-name--white {
 color:#fff
}
.category-name--lg {
 font-size:18px
}
.category-name {
 color:#bf0000;
 font-size:30px;
 line-height:72px;
 padding:2px 0
}
.row::after {
 clear:both
}
.row::after {
 clear:both
}
.row::before,
.row::after {
 content:"";
 display:table
}
.hover-box:hover {
 box-shadow:0 4px 8px 0 rgba(0,0,0,0.33);
 text-decoration:none
}
.gb-brand-module .gb-brand-list {
 background-color:#fff;
 border:1px solid #E2E2E2;
 display:table;
 height:100px;
 table-layout:fixed;
 width:100%
}
.gb-brand-module .gb-brand-list li:first-child {
 border-left:none
}
.gb-brand-module .gb-brand-list li {
 border-left:1px solid #E2E2E2;
 display:table-cell;
 height:100%;
 vertical-align:middle
}
.swiper-slide {
 -webkit-flex-shrink:0;
 -ms-flex:0 0 auto;
 flex-shrink:0;
 width:100%;
 height:100%;
 position:relative
}
.gb-brand-module .gb-brand-list li a {
 display:block;
 outline:none;
 padding:10px;
 text-align:center
}
.gb-brand-module .gb-brand-list li a img {
 -webkit-transition:all 0.2s ease-in-out;
 -khtml-transition:all 0.2s ease-in-out;
 -moz-transition:all 0.2s ease-in-out;
 -ms-transition:all 0.2s ease-in-out;
 -o-transition:all 0.2s ease-in-out;
 transition:all 0.2s ease-in-out;
 display:block;
 margin:0 auto;
 max-width:100%;
 height:80px;
 max-height:100px;
 vertical-align:middle;
 width:160px
}
.gb-brand-module .gb-brand-list {
 background-color:#fff;
 border:1px solid #E2E2E2;
 display:table;
 height:100px;
 table-layout:fixed;
 width:100%;
 padding-left:0%;
 padding-right:0%
}
.gb-brand-module .gb-brand-list li {
 border-left:1px solid #E2E2E2;
 display:table-cell;
 height:100%;
 vertical-align:middle
}
@media screen and (min-width:768px) {
 .gb-brand-module .gb-brand-list li a img {
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  filter:grayscale(100%)
 }
 .gb-brand-module .gb-brand-list li a:hover img {
  -webkit-filter:grayscale(0%);
  -moz-filter:grayscale(0%);
  -ms-filter:grayscale(0%);
  -o-filter:grayscale(0%);
  filter:grayscale(0%)
 }
}
.card-body {
 padding:0rem
}
#notselected:hover {
 -webkit-filter:grayscale(0%);
 -moz-filter:grayscale(0%);
 -ms-filter:grayscale(0%);
 -o-filter:grayscale(0%);
 filter:grayscale(0%)
}
#notselected {
 -webkit-filter:grayscale(100%);
 -moz-filter:grayscale(100%);
 -ms-filter:grayscale(100%);
 -o-filter:grayscale(100%);
 filter:grayscale(100%)
}
@media screen and (max-width:840px) {
 #topdisplay {
  display:none !important;
 }
}
.main-footer {
 background-color:#fff;
 border-top:1px solid #E2E2E2;
 margin-top:30px;
 max-width:1250px;
 margin-left:auto;
 margin-right:auto;
 border-bottom:1px solid #E2E2E2;
 margin-bottom:30px
}
.main-footer li {
 list-style:none
}
.main-footer .inner-wrapper-footer {
 box-sizing:border-box;
 margin:0 auto;
 padding:0px 30px
}
.main-footer .footer-section:last-child {
 border-bottom:none
}
.main-footer .footer-section {
 border-bottom:1px solid #E2E2E2;
 padding:30px 0
}
.gb-footer-links .gb-menu-links {
 font-size:0;
 margin:-15px 0;
 vertical-align:top
}
.gb-footer-links .gb-footer-links-container {
 display:inline-block;
 font-size:14px;
 margin:15px 25px 15px 0;
 vertical-align:top;
 width:calc((100% - 100px) / 4);
 text-align:center
}
.gb-footer-links .gb-footer-links-container ul {
 margin-left:-39px;
 margin-top:0;
 margin-bottom:0
}
.gb-footer-links .gb-menu-links-title {
 color:#333;
 font-weight:bold;
 line-height:20px;
 font-size:100%
}
.gb-footer-links li {
 margin-top:10px
}
.gb-footer-links a {
 color:#6B6B6B;
 line-height:initial
}
.gb-footer-links .gb-menu-links {
 font-size:0;
 margin:-15px 0;
 vertical-align:top
}
.gb-footer-links a:hover,
.gb-footer-links a:visited:hover {
 color:#ff003dff;
 text-decoration:none
}
.gb-footer-links a {
 color:#6B6B6B;
 line-height:initial
}
#ctrlDesignedBy_image {
 display:none !important
}
#div_DesignedBy {
 display:none !important
}
.destacados a.armados::before {
 background-size:50px;
 background-position-y:28px
}
.destacados a.armados1::before {
 background-size:50px;
 background-position-y:28px
}
.destacados a.armados2::before {
 background-size:50px;
 background-position-y:28px
}
.destacados a.armados3::before {
 background-size:50px;
 background-position-y:28px
}
.destacados a.armados4::before {
 background-size:50px;
 background-position-y:28px
}
.destacados a.armados5::before {
 background-size:50px;
 background-position-y:28px
}
.destacados a.armados6::before {
 background-size:50px;
 background-position-y:28px
}
.destacados a.armados7::before {
 background-size:50px;
 background-position-y:28px
}
.destacados a.armados::before {
 background-image:url("https://www.compugarden.com.ar/Temp/App_WebSite/App_PictureFiles/ico-micro.png");
 -webkit-filter:invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2);
 filter:grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2)
}
.destacados a.armados1::before {
 background-image:url("https://www.compugarden.com.ar/Temp/App_WebSite/App_PictureFiles/ico-mother.png");
 -webkit-filter:invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2);
 filter:grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2)
}
.destacados a.armados2::before {
 background-image:url("https://www.compugarden.com.ar/Temp/App_WebSite/App_PictureFiles/ico-memoria.png");
 -webkit-filter:invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2);
 filter:grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2)
}
.destacados a.armados3::before {
 background-image:url("https://www.compugarden.com.ar/Temp/App_WebSite/App_PictureFiles/ico-video.png");
 -webkit-filter:invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2);
 filter:grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2)
}
.destacados a.armados4::before {
 background-image:url("https://www.compugarden.com.ar/Temp/App_WebSite/App_PictureFiles/ico-hd1.png");
 -webkit-filter:invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2);
 filter:grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2)
}
.destacados a.armados5::before {
 background-image:url("https://www.compugarden.com.ar/Temp/App_WebSite/App_PictureFiles/ico-fuente.png");
 -webkit-filter:invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2);
 filter:grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2)
}
.destacados a.armados6::before {
 background-image:url("https://www.compugarden.com.ar/Temp/App_WebSite/App_PictureFiles/ico-gabinete.png");
 -webkit-filter:invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2);
 filter:grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2)
}
.destacados a.armados7::before {
 background-image:url("https://www.compugarden.com.ar/Temp/App_WebSite/App_PictureFiles/ico-monitor.png");
 -webkit-filter:invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2);
 filter:grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(0%) contrast(2)
}
.destacados a.armados8::before {
 background-image:url("https://www.compugarden.com.ar/Temp/App_WebSite/App_PictureFiles/ico-gabinete.png");
 -webkit-filter:invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
 filter:grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-50deg) saturate(1500%) contrast(1)
}
.destacados ul li a::before {
 background-repeat:no-repeat;
 background-size:80% auto;
 background-position:center center;
 content:"";
 display:block;
 width:80px;
 height:90px;
 margin:auto
}
.destacados ul li a::before {
 background-repeat:no-repeat;
 background-size:100% auto;
 background-position:center center;
 content:"";
 display:block;
 width:80px;
 height:90px;
 margin:auto
}
.destacados ul li a {
 font-size: .78em;
 text-transform:uppercase;
 font-weight:normal;
 color:#000;
 word-wrap:break-word;
 line-height:1.1em
}
.destacados ul li a {
 font-size: .708em;
 text-transform:capitalize;
 font-weight:normal;
 color:#fff;
 height:130px;
 width:100%;
 word-wrap:break-word;
 line-height:1.1em;
 float:left;
 margin:0; /*! padding-top: 6px; */
 font-weight: lighter;
 font-size: smaller;
 transition: transform 0.5s;
}
.destacados ul li {
 float:left;
 width:auto;
 text-align:center;
 flex-direction:column;
 justify-content:center;
 display:inline-flex;
 padding:0px 5px;
}
.destacados>div>ul {
 width:100%;
 float:left;
 position:relative;
 padding:0;
 display:flex;
 justify-content:space-between;
 align-items:stretch
}
.destacados>div {
 padding:0 0 0 116px;
 width:auto;
 float:none;
 position:relative
}
.destacados {
 float:none;
 width:auto;
 position:relative
}
.destacados ul li:hover a {
 color:#ff003dff;
 transform:scale(1.09);
 text-decoration: none !important;
}
.destacados ul li:hover a::before {
 opacity:0.6;
 transform:scale(1.09);
 -webkit-filter:invert(40%) grayscale(100%) brightness(100%) sepia(100%) hue-rotate(-50deg) saturate(1200%) contrast(100%);
 filter:grayscale(100%) brightness(100%) sepia(10%) hue-rotate(-50deg) saturate(8000%) contrast(100%);
 text-decoration: none !important;
}
.dropdown::before {
 content:"";
 height:70px;
 width:1px;
 background-color:#fdfdfd;
 display:block;
 position:absolute;
 right:-30px;
 top:calc(50% - 30px)
}
.flexslider .slides img {
 margin-top:59px
}
span.size.art_cod_precios {
 display:none
}
p.semaforostock {
 display:none !important;
}
input.compracantidad {
 display:none
}
input.btn.btn-primary.btn-compra.compracantidad {
 display:none !important;
}
div.bottom-nav--left-column {
 margin-top:-18px
}
@media screen and (min-width:769px) {
 .gb-offers-carousel-head {
  background-color:#fff;
  display:inline-block;
  height:100%;
  text-align:center;
  vertical-align:middle;
  position:relative;
  left:-11px;
  top:160px;
  bottom:0
 }
 .gb-offers-carousel-head .gb-offers-carousel-head-content {
  color:#000;
  display:inline-block;
  vertical-align:middle;
  top:50%;
  transform:translateY(-58%);
  width:240px;
  position:absolute;
  left:0
 }
 .gb-offers-carousel-head h3 {
  font-size:22px;
  font-weight:700;
  line-height:44px
 }
 .gb-offers-carousel-head h3 strong {
  line-height:40px;
  display:block;
  display:-webkit-box;
  max-width:100%;
  max-height:80px;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:36px;
  text-transform:uppercase;
  padding:0 15px
 }
 .gb-offers-carousel-clock {
  margin:10px 0;
  text-align: 
 }
 .gb-offers-carousel-clock div:first-of-type {
  margin-left:0
 }
 .gb-offers-carousel-clock div {
  display:inline-block;
  margin-left:10px;
  position:relative;
  text-align:center;
  width:45px
 }
 #time-mov2 {
  display:0;
  margin-left:0;
  position:0;
  text-align:0;
  width:0
 }
 .gb-offers-carousel-clock div em {
  font-size:34px;
  color:#ff003dff;
  font-weight:700;
  display:block;
  margin-bottom:3px;
  font-style:initial
 }
 .gb-offers-carousel-clock div span {
  display:block;
  font-size:12px;
  color:#9E9E9E;
  text-transform:uppercase
 }
 .gb-offers-carousel .gb-offers-carousel-head .gb-button {
  margin-top:10px
 }
 .gb-button.primary {
  -webkit-transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  -khtml-transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  -moz-transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  -ms-transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  -o-transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  color:#FFF;
  background-color:#0084E0;
  height:40px;
  line-height:40px;
  border-color:transparent transparent #016AB3;
  border-style:solid;
  border-width:1px 1px 2px
 }
 .gb-button.primary {
  -webkit-transition:background-color 0.2s ease-out,border-color 0.2s ease-out;
  -khtml-transition:background-color 0.2s ease-out,border-color 0.2s ease-out;
  -moz-transition:background-color 0.2s ease-out,border-color 0.2s ease-out;
  -ms-transition:background-color 0.2s ease-out,border-color 0.2s ease-out;
  -o-transition:background-color 0.2s ease-out,border-color 0.2s ease-out;
  transition:background-color 0.2s ease-out,border-color 0.2s ease-out;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  color:#fff;
  background-color:#0084E0;
  height:40px;
  line-height:40px;
  border-color:transparent transparent #016AB3;
  border-style:solid;
  border-width:1px 1px 2px
 }
 .gb-button {
  -webkit-border-radius:3px;
  -khtml-border-radius:3px;
  -moz-border-radius:3px;
  -ms-border-radius:3px;
  -o-border-radius:3px;
  border-radius:3px;
  -webkit-box-sizing:border-box;
  -khtml-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
  display:inline-block;
  padding:0 25px;
  border:1px solid transparent;
  cursor:pointer;
  text-align:center;
  outline:none;
  position:relative;
  text-transform:uppercase;
  -webkit-transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  -khtml-transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  -moz-transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  -ms-transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  -o-transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  color:#333;
  background-color:#E2E2E2;
  height:40px;
  line-height:40px;
  border-color:transparent transparent #9E9E9E;
  border-style:solid;
  border-width:1px 1px 2px
 }
 .gb-offers-carousel .gb-offers-carousel-head {
  text-align:center
 }
 .owl-stage-outer {
  margin-left:240px
 }
 .product:hover {
  border:1px solid #E2E2E2;
  box-shadow:0 4px 8px 0 rgba(0,0,0,0.33)
 }
 div.product:hover .image img {
  -webkit-transform:scale(1.15);
  transform:scale(1.15);
  opacity:50%
 }
 .row.owl-carousel.owl-theme.owl-loaded.owl-drag {
  border:1px solid #E2E2E2;
  box-shadow:0 4px 8px 0 rgba(0,0,0,0.15);
  max-width:1250px;
  margin-right:auto;
  margin-left:auto
 }
 div.container {
  margin-top:2%;
  margin-bottom:1%
 }
}
header {
 background:black !important;
}
@media (min-width:768px) {
 section.slider2 .flexslider .slides img {
  width:1220px;
  transition-duration:0s;
  position:relative;
  top:50%;
  left:50%;
  margin-right:-50%;
  transform:translate(-50%, 0);
  display:flex;
  background:#fff;
  max-width:100%;
  margin-bottom:20px
 }
}
@media (min-width:768px) {
 .flexslider .slides>li {
  background:#fff
 }
}
div.flexslider {
 margin-top:0px
}
#slides_ofertas {
 margin-top:150px
}
.gb-category-grid div.row {
 width:100%;
 margin-left:auto;
 margin-right:auto
}
#log1 i,
#nolog1 i {
 color:#ff003dff
}
.product {
 padding-bottom:0px;
 padding-top:0px
}
.owl-nav {
 display:none
}
.owl-dot {
 display:none
}
section#ofertas_home div.owl-carousel .col-md-prod,
section#novedades_home div.owl-carousel .col-md-prod {
 margin-top:0px;
 margin-bottom:0px
}
.owl-carousel .owl-stage-outer {
 padding-bottom:1px
}
@media (width:1280px) and (height:720px) {
 .flexslider .slides img {
  margin-top:54px
 }
}
@media (min-width:3000px) and (min-height:2000px) {
 .destacados.featured-list {
  margin-top:41px !important
 }
}
@media (min-width:1024px) and (min-height:768px) {
 .featured-list li {
  margin-left:13px
 }
}
@media (max-width:768px) {
 #exampleModal .modal-dialog {
  max-width:100%;
  margin:0
 }
 #exampleModal .modal-dialog {
  position:relative;
  width:auto;
  margin:0
 }
 #exampleModal .modal.fade .modal-dialog {
  -webkit-transform:translate(0,0%);
  transform:translate(0,0%)
 }
 #exampleModal .modal-content {
  position:relative;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  background-color:#000;
  background-clip:padding-box;
  border:0;
  border-radius:0;
  outline:0
 }
 #exampleModal .modal-body {
  position:relative;
  -ms-flex:1 1 auto;
  flex:1 1 auto;
  padding:7px;
  padding-top:32px;
  padding-bottom:35px
 }
 #exampleModal .modal.show .modal-dialog {
  max-width:100%
 }
 #exampleModal .input-group-btn {
  position:absolute
 }
 .#exampleModal input-group .form-control,
 .input-group-addon,
 .input-group-btn {
  display:inline
 }
 #exampleModal div.modal-content div.search {
  width:100%;
  margin-top:2%
 }
 #exampleModal button.btn-buscartop {
  margin-left:-35px !important;
  margin-top:0;
  background:#f00;
  padding: .85rem .9rem;
  left:5%
 }
 .fixedtop {
  position:initial !important;
  top:0;
  z-index:0;
  width:0;
  border-bottom:0;
  box-shadow:0;
  background:0
 }
 .navbar-collapse {
  margin-top:-6%
 }
 div.flexslider {
  margin-top:-60px
 }
 .flexslider .slides img {
  margin-top:29px
 }
 .slider.slider2 .flexslider .slides img {
  margin-top:29px
 }
 .slider.slider2 div.flexslider {
  margin-top:-7%
 }
}
@media (max-width:800px) and (max-height:600px) {
 .featured-list li {
  margin-left:0px
 }
 .destacados ul li {
  width:90px;
  font-size:11px;
  text-align:center
 }
 .main-header--bottom-nav {
  font-size:15px;
  padding:0 20px 5px 0px
 }
}
@media (min-width:769px) {
 .destacados {
  margin-top:0% !important
 }
 .featured-list li {
  margin-left:-5px;
 }
 .flexslider .slides img {
  margin-top:81px !important
 }
 .main-header--bottom-nav {
  font-size:13px;
  padding:0 00px 5px 02px
 }
}
@media (min-width:790px) {
 .destacados {
  margin-top:0% !important
 }
 .featured-list li {
  margin-left:-5px;
 }
 .flexslider .slides img {
  margin-top:81px !important
 }
 .main-header--bottom-nav {
  font-size:13px;
  padding:0 00px 5px 20px
 }
}
@media (min-width:830px) {
 .destacados {
  margin-top:0% !important
 }
 .featured-list li {
  margin-left:-5px;
 }
 .flexslider .slides img {
  margin-top:79px !important
 }
 .main-header--bottom-nav {
  font-size:13px;
  padding:0 20px 5px 25px
 }
}
@media (min-width:900px) {
 .destacados {
  margin-top:0% !important
 }
 .featured-list li {
  margin-left:0px
 }
 .flexslider .slides img {
  margin-top:79px !important
 }
 .main-header--bottom-nav {
  font-size:13px;
  padding:0 20px 5px 40px
 }
}
@media (min-width:970px) {
 .destacados {
  margin-top:0% !important
 }
 .featured-list li {
  margin-left:09px
 }
 .flexslider .slides img {
  margin-top:79px !important
 }
}
@media (min-width:1040px) {
 .destacados {
  margin-top:0% !important
 }
 .featured-list li {
  margin-left:19px
 }
 .flexslider .slides img {
  margin-top:77px !important
 }
}
@media (min-width:1056px) {
 .destacados {
  margin-top:0% !important
 }
 .featured-list li {
  margin-left:16px;
 }
 .flexslider .slides img {
  margin-top:76px !important
 }
}
@media (min-width: 1130px) {
 .destacados {
  margin-top:0.1% !important
 }
 .featured-list li {
  margin-left:29px
 }
 .flexslider .slides img {
  margin-top:79px !important
 }
}
@media (min-width: 1200px) {
 .destacados {
  margin-top:0.1% !important
 }
 .featured-list li {
  margin-left:29px
 }
 .flexslider .slides img {
  margin-top:55px !important
 }
}
@media (min-width:1246px) {
 .destacados {
  margin-top:0.1% !important
 }
 .featured-list li {
  margin-left:33px;
 }
 .flexslider .slides img {
  margin-top:55px !important
 }
}
@media (min-width:1360px) {
 .featured-list li {
  margin-left:31px;
 }
 .flexslider .slides img {
  margin-top:60px !important
 }
}
@media (min-width:1510px) {
 .featured-list li {
  margin-left:37px;
 }
 .flexslider .slides img {
  margin-top:58px !important
 }
}
@media (min-width:1600px) {
 .featured-list li {
  margin-left:31px
 }
 .main-header--bottom-nav {
  font-size:13px;
  padding:0 20px 5px 40px
 }
}
@media (min-width:1280px) {
 .flexslider .slides img {
  margin-top:79px
 }
 .main-header--bottom-nav {
  font-size:15px;
  padding:0 20px 5px 40px;
 }
}
@media (min-width:1600px) {
 .flexslider .slides img {
  margin-top:53px
 }
}
@media (min-width:1900px) {
 .destacados {
  margin-top:1% !important
 }
 .flexslider .slides img {
  margin-top:54px !important
 }
}
@media (min-width:2230px) {
 .destacados {
  margin-top:1.5% !important
 }
 .flexslider .slides img {
  margin-top:55px !important
 }
}
@media (min-width:2560px) {
 .destacados {
  margin-top:3% !important
 }
}
@media (min-width:2880px) {
 .destacados {
  margin-top:4% !important
 }
}
@media (min-width:3200px) {
 .destacados {
  margin-top:5% !important
 }
}
@media (min-width:3840px) {
 .destacados {
  margin-top:6% !important
 }
}
@media (min-width:4096px) {
 .destacados {
  margin-top:8% !important
 }
 .flexslider .slides img {
  margin-top:64px
 }
}
@media (max-width:768px) {
 .gb-offers-carousel-head-content {
  text-align:center;
  margin-bottom:9px;
  margin-top:5px;
  line-height:20px
 }
 .gb-offers-carousel-clock p {
  font-size:24px;
  margin-top:4px
 }
 .gb-offers-carousel-head-content h3 {
  font-size:20px
 }
 #time-mov {
  display:inline-flex;
  min-width:38px;
  margin-top:12px
 }
 #time-mov2 {
  display:inline-flex;
  min-width:38px;
  margin-top:12px;
  position:absolute;
  left:5%
 }
 .gb-offers-carousel-clock span {
  margin-top:8px;
  margin-left:2px;
  margin-right:2px;
  color:white
 }
 .gb-offers-carousel-clock {
  margin-top:10px;
  text-align:end;
  background:black;
  border-radius:13px
 }
 #segundos {
  margin-right:10px
 }
 #novedades_home div.container {
  border:1px solid #E2E2E2;
  box-shadow:1px 1px 4px 1px rgba(0,0,0,0.15);
  margin-right:auto;
  margin-left:auto;
  margin-bottom:30px
 }
}
@media (max-width:1134px) {
 .dropdown-menu .sub-menu .row.subitem {
  max-width:790px;
  font-size:12px
 }
 #menu1 {
  min-height:868px
 }
 #menu1 a {
  font-size:12px
 }
 .gb-category-grid-item.hover-box {
  background-size:118%;
  max-height:255px
 }
}
@media (max-width:1043px) {
 .dropdown-menu .sub-menu .row.subitem {
  max-width:700px;
  font-size:11px
 }
 .gb-category-grid-item.hover-box {
  background-size:118%;
  max-height:235px
 }
 #menu1 {
  min-height:1013px
 }
 #menu1 a {
  font-size:11px
 }
}
@media (max-width:975px) {
 .dropdown-menu .sub-menu .row.subitem {
  max-width:660px;
  font-size:11px
 }
 .gb-category-grid-item.hover-box {
  background-size:118%;
  max-height:219px
 }
 #menu1 {
  min-height:1013px
 }
 #menu1 a {
  font-size:11px
 }
}
@media (max-width:907px) {
 .dropdown-menu .sub-menu .row.subitem {
  max-width:595px;
  font-size:09px
 }
 .gb-category-grid-item.hover-box {
  background-size:118%;
  max-height:202px
 }
 #menu1 {
  min-height:1043px
 }
 #menu1 a {
  font-size:09px
 }
}
@media (max-width:839px) {
 .dropdown-menu .sub-menu .row.subitem {
  max-width:585px;
  font-size:09px
 }
 #menu1 {
  min-height:1073px
 }
 #menu1 a {
  font-size:09px
 }
 .gb-category-grid-item.hover-box {
  background-size:118%;
  max-height:185px
 }
}
@media (max-width:794px) {
 .dropdown-menu .sub-menu .row.subitem {
  max-width:555px;
  font-size:8.5px
 }
 #menu1 {
  min-height:1222px
 }
 .gb-category-grid-item.hover-box {
  background-size:118%;
  max-height:175px
 }
 #menu1 a {
  font-size:8.5px
 }
}
.product:hover {
 border-radius:4px 4px 4px 4px;
 box-shadow:1px 8px 16px 1px rgba(0,0,0,0.15)
}
@media screen and (max-width:768px) {
 .gb-footer-links .gb-footer-links-container {
  margin-left:auto;
  margin-right:auto;
  min-width:calc((100% - 0px) /2);
  width:calc((100% - 100px) / 4)
 }
 .main-footer {
  margin-top:0px
 }
}
@media (max-width:800px) {
 #bannersprod {
  -ms-flex:0 0 45%;
  flex:0 0 50%;
  max-width:50%;
  margin-bottom:10px;
  margin-top:10px !important
 }
 #novedades_home {
  margin-top:20px
 }
 section.slider {
  padding:0 0 00px 0
 }
 #pcgamer {
  background-image:url('https://cdn.jsdelivr.net/gh/MrObjection/compugarden/pcgamermov.jpg.webp') !important;
 }
 #armatupc {
  background-image:url('https://cdn.jsdelivr.net/gh/MrObjection/compugarden/armatupcmov.jpg.webp') !important;
 }
 .gb-category-grid-item.hover-box {
  background-size:110%
 }
}
@media (max-width:768px) {
 #switcherbrand {
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
  display:block !important
 }
}
.product:hover {
 border-radius:4px 4px 0 0;
 box-shadow:0 8px 16px 0 rgba(0,0,0,0.15);
 outline:none
}
.product {
 transition:all .3s ease 0;
 -moz-transition:all .3s ease 0;
 -webkit-transition:all .3s ease 0;
 -o-transition:all .3s ease 0;
 -ms-transition:all .3s ease 0;
 background:#fff;
 padding-bottom:10px;
 padding-top:4px;
 transition:all 0.15s linear;
 background-color:#fff;
 border-radius:4px;
 border:1px solid #E2E2E2;
 box-shadow:0 0 0 0 rgba(0,0,0,0.33)
}
@media screen and (min-width:769px) {
 header {
  margin-bottom:-130px;
  position:static
 }
}
.nav-tabs .nav-link.active {
 color:#495057;
 background-color:#fff;
 border-color:#ddd #ddd #fff
}
#solapas a.nav-link.active {
 font-size:14px;
 color:#59d802;
 font-weight:700
}
#solapas a.nav-link.active {
 font-size:14px;
 color:#f00 !important;
 font-weight:700;
 color:#ff003dff !important
}
#solapas a.nav-link {
 font-size:14px;
 color:#aaa;
 font-weight:700
}
#solapas a.nav-link {
 font-size:14px;
 color:#aaa !important;
 font-weight:700
}
#solapas .nav {
 background:white !important
}
#solapas ul.nav.nav-tabs {
 width:100% !important
}
div.tab-pane {
 padding:15px
}
@media (max-width:768px) {
 #slides_ofertas.slider.slider2 {
  display:none
 }
}
.contenido {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0) 81%,rgb(0, 0, 0) 99%);
}
.price {
	color: #f00;
}


/* ======================================================================
   10. BOTON FLOTANTE DE WHATSAPP
   (antes estaba en: HEADER)
   ====================================================================== */

  #cg-whatsapp-float {
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1020 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 50% !important;
    background: var(--cg-ui-accent, #d23f86) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.16) !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    transition: background-color .16s ease, transform .16s ease !important;
  }
  #cg-whatsapp-float svg {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: currentColor !important;
    stroke: none !important;
  }
  #cg-whatsapp-float svg path {
    fill: currentColor !important;
    stroke: none !important;
  }
  #cg-whatsapp-float:focus-visible {
    outline: 2px solid var(--cg-ui-accent, #d23f86) !important;
    outline-offset: 3px !important;
  }
  @media (hover: hover) and (pointer: fine) {
    #cg-whatsapp-float:hover {
      background: var(--cg-ui-accent-hover, #b02f6d) !important;
      color: #fff !important;
      transform: translateY(-2px) !important;
    }
  }
  @media (max-width: 767px) {
    #cg-whatsapp-float {
      right: 14px !important;
      bottom: 16px !important;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
      width: 44px !important;
      height: 44px !important;
      box-shadow: 0 2px 9px rgba(0,0,0,.14) !important;
    }
    #cg-whatsapp-float svg {
      width: 23px !important;
      height: 23px !important;
      min-width: 23px !important;
      min-height: 23px !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #cg-whatsapp-float { transition: none !important; }
  }


/* ======================================================================
   11. MENU LATERAL EN CELULAR
   (antes estaba en: HEADER)
   ====================================================================== */

		/* Permite recorrer todo el menu, especialmente en pantallas moviles. */
		#sidebar {
			padding-top: 0 !important;
			overflow-x: hidden !important;
			overflow-y: auto !important;
			-webkit-overflow-scrolling: touch;
			overscroll-behavior: contain;
		}
		/* Resalta unicamente la fila que esta debajo de un puntero real.
		   Evita el hover persistente de los navegadores tactiles. */
		@media (hover: hover) and (pointer: fine) {
			#sidebar .menu-item:hover,
			#sidebar .submenu-item:hover {
				background: #30232c !important;
				border-radius: 8px;
			}
		}
		/* Submenu abierto: mismo tono en computadora y celular. */
		#sidebar .menu-item.open {
			background: #30232c !important;
			border-radius: 8px;
		}
		/* En iPhone el menu ocupa tambien la zona de la hora: el encabezado baja lo justo. */
		#sidebar .cg-sidebar-head {
			padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
		}
		#sidebar .menu-item a,
		#sidebar .menu-item a:hover,
		#sidebar .menu-item a:focus,
		#sidebar .submenu-item a,
		#sidebar .submenu-item a:hover,
		#sidebar .submenu-item a:focus {
			text-decoration: none !important;
		}
		/* El enlace directo cubre toda la fila, no solamente el texto. */
		#sidebar > .menu-item {
			position: relative;
		}
		#sidebar > .menu-item > .estesi > a::before {
			content: "";
			position: absolute;
			inset: 0;
		}
		/* Separador compacto entre las categorias y los servicios. */
		#sidebar > .divider {
			margin: 4px 10px !important;
		}
		/* Cabecera y accesos rapidos. */
		#sidebar .cg-sidebar-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: static;
			min-height: 52px;
			z-index: 4;
			padding: 10px 10px 4px;
		}
		#sidebar .cg-brand {
			display: inline-block;
			font-size: 18px;
			font-weight: 900;
			font-style: normal;
			line-height: 1.25;
			letter-spacing: .5px;
			text-transform: uppercase;
			color: #ffffff;
			text-shadow: none;
		}
		#sidebar .switch-theme-mobile {
			position: static !important;
			display: none !important;
		}
		#sidebar #closeBtn {
			position: static !important;
			margin: 0 !important;
			flex: 0 0 auto;
		}
		#sidebar .cg-quick-actions {
			display: flex;
			flex-wrap: nowrap;
			gap: 8px;
			padding: 4px 10px 8px;
			border-bottom: 1px solid rgba(255,255,255,.08);
		}
		#sidebar .cg-quick-actions a,
		#sidebar .cg-theme-action {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 7px;
			min-height: 38px;
			padding: 0 12px;
			color: #ffffff;
			background: #222226;
			border: 1px solid #414146;
			border-radius: 7px;
			font-size: 13px;
			font-weight: 600;
			white-space: nowrap;
			flex: 0 0 auto;
			text-decoration: none !important;
			margin: 0 !important;
		}
		#sidebar .cg-quick-actions a:hover,
		#sidebar .cg-theme-action:hover,
		#sidebar .cg-quick-actions a:active,
		#sidebar .cg-theme-action:active,
		#sidebar .cg-quick-actions a.cg-tapped,
		#sidebar .cg-quick-actions a:focus-visible {
			background: #30232c;
			border-color: var(--cg-accent, #d23f86);
		}
		#sidebar .cg-theme-action {
			width: 100% !important;
			color: #ffffff !important;
			transition: color .22s ease, background .22s ease, border-color .22s ease;
		}
		#sidebar .cg-theme-action > span,
		#sidebar .cg-theme-action > i {
			color: #ffffff !important;
			-webkit-text-fill-color: #ffffff !important;
		}
		#sidebar .cg-theme-action input {
			position: absolute !important;
			opacity: 0 !important;
			pointer-events: none;
		}
		#sidebar .cg-theme-action .slider-theme-mob {
			display: none !important;
		}
		#sidebar > .menu-item {
			margin-left: 10px;
			margin-right: 10px;
			margin-top: 1px;
			margin-bottom: 1px;
			min-height: 44px;
			padding-top: 10px !important;
			padding-bottom: 10px !important;
			border-radius: 8px;
		}
		#sidebar > .submenu {
			margin-top: 0 !important;
			margin-bottom: 0 !important;
		}
		#sidebar > .divider ~ .menu-item a,
		#sidebar > .divider ~ .menu-item i {
			color: #ffffff !important;
			opacity: 1 !important;
		}
		#sidebar .chevron {
			transform: none !important;
		}
		@media (max-width: 1024px) {
			#sidebar {
				width: 100vw !important;
				max-width: none !important;
				height: 100vh !important;
				height: 100dvh !important;
				left: -100vw !important;
			}
			#sidebar.active {
				left: 0 !important;
			}
			#sidebar .cg-sidebar-head {
				display: flex;
				padding: 8px 10px 4px;
			}
			#sidebar .cg-brand {
				align-self: center;
			}
			#sidebar .switch-theme-mobile {
				display: flex !important;
				flex: 1 1 0;
				min-width: 0;
			}
			#sidebar .cg-quick-actions {
				display: grid;
				grid-template-columns: repeat(3, minmax(0, 1fr));
				gap: 8px;
				padding: 4px 10px 8px;
			}
			#sidebar .cg-quick-actions > a,
			#sidebar .cg-quick-actions > .switch-theme-mobile {
				width: 100% !important;
				height: 44px !important;
				min-height: 44px !important;
				position: static !important;
				top: auto !important;
				right: auto !important;
				bottom: auto !important;
				margin: 0 !important;
				align-self: stretch;
			}
			#sidebar .cg-quick-actions a,
			#sidebar .cg-theme-action {
				width: 100% !important;
				height: 44px !important;
				min-height: 44px !important;
				box-sizing: border-box;
				min-width: 0;
				gap: 4px;
				padding: 0 5px;
				font-size: clamp(10px, 2.6vw, 12px);
				font-weight: 700;
				line-height: 1.15;
			}
			#sidebar .menu-item:hover,
			#sidebar .menu-item:focus,
			#sidebar .submenu-item:hover,
			#sidebar .submenu-item:focus {
				background: transparent !important;
				box-shadow: none !important;
				border-left-color: transparent !important;
				outline: none;
			}
			#sidebar .menu-item,
			#sidebar .submenu-item,
			#sidebar .cg-quick-actions a,
			#sidebar .cg-theme-action {
				touch-action: manipulation;
				-webkit-tap-highlight-color: transparent;
				transition: background-color .18s ease, border-color .18s ease;
			}
			/* Fila tocada / abierta: mismo resaltado plano en todo el menu. */
			#sidebar .menu-item:active,
			#sidebar .submenu-item:active,
			#sidebar .menu-item.cg-category-tapped,
			#sidebar .submenu-item.cg-category-tapped,
			#sidebar .menu-item.active,
			#sidebar .menu-item.open,
			#sidebar .menu-item.expanded,
			#sidebar .menu-item[aria-expanded="true"] {
				background: #30232c !important;
				border-left: 3px solid var(--cg-accent, #d23f86) !important;
				box-shadow: none !important;
				border-radius: 8px;
			}
			#sidebar .menu-item.cg-category-tapped a,
			#sidebar .submenu-item.cg-category-tapped a,
			#sidebar .menu-item.active span,
			#sidebar .menu-item.open span,
			#sidebar .menu-item.expanded span,
			#sidebar .menu-item[aria-expanded="true"] span,
			#sidebar .menu-item[aria-expanded="true"] .chevron {
				color: #ffffff !important;
				text-decoration: none !important;
			}
			#sidebar .cg-direct-computadoras:focus {
				background: transparent !important;
				border-left-color: transparent !important;
				box-shadow: none !important;
			}
		}
	  


/* ======================================================================
   12. HEADER DE LA TIENDA
   (antes estaba en: HEADER, bloque cg-store-header-2026)
   ====================================================================== */

/* ---------- Base (tambien fuera de la tienda) ---------- */
header.cg-site-header .cg-nav {display:none !important;}
header.cg-site-header #cg-inline-mobile-search {display:none !important;}
body.cg-store-enabled header.cg-site-header .cg-legacy-nav {display:none !important;}

/* ---------- Colores de la barra superior: azul de las tarjetas de la home ---------- */
body.cg-store-enabled {
  --cg-topbar-edge:#151723;
  --cg-topbar-fill:#181a27;
  --cg-topbar-mid:#1b1d31;
}

/* ---------- Header fijo ---------- */
/* El fondo propio del header es el azul de la barra: Safari (iPhone) usa el color
   del elemento fijo de arriba para pintar la zona de la hora y la bateria. */
body.cg-store-enabled header.cg-site-header {
  position:sticky !important; top:0 !important; left:0 !important;
  display:block !important; width:100% !important; max-width:100% !important;
  height:auto !important; max-height:none !important; margin:0 !important;
  overflow:visible !important; z-index:1030 !important;
  background:var(--cg-topbar-fill) !important; box-sizing:border-box !important;
}
body.cg-store-enabled header.cg-site-header *,
body.cg-store-enabled header.cg-site-header *::before,
body.cg-store-enabled header.cg-site-header *::after {box-sizing:border-box}

/* ---------- Barra promocional ---------- */
body.cg-store-enabled header.cg-site-header .cg-promo {
  display:flex !important; width:100% !important; max-width:none !important;
  height:auto !important; min-height:30px !important; max-height:none !important;
  margin:0 !important; padding:0 12px !important;
  align-items:center; justify-content:center; border:0 !important;
  background-color:var(--cg-topbar-fill) !important;
  background-image:linear-gradient(90deg,var(--cg-topbar-edge) 0%,var(--cg-topbar-fill) 22%,var(--cg-topbar-mid) 50%,var(--cg-topbar-fill) 78%,var(--cg-topbar-edge) 100%) !important;
  color:#fff !important; box-shadow:none !important;
}
body.cg-store-enabled .cg-promo-track {display:flex; align-items:center; justify-content:center; gap:8px; min-height:30px; width:100%; max-width:100%; text-align:center;}
body.cg-store-enabled header.cg-site-header #cg-promo-message {color:#fff !important; font:600 12px/1.25 'Manrope',Arial,sans-serif; letter-spacing:.2px;}
body.cg-store-enabled header.cg-site-header .cg-promo-icon {color:#fff !important; font-size:11px;}

/* ---------- Fila principal (computadora) ---------- */
body.cg-store-enabled header.cg-site-header #content-desktop {
  display:block !important; background:#101010 !important; width:100% !important;
  max-width:none !important; height:auto !important; padding:0 !important;
}
body.cg-store-enabled header.cg-site-header #content-desktop > .inner-wrapper {
  display:flex !important; flex-wrap:nowrap !important; justify-content:space-between !important;
  align-items:center !important; width:100% !important; max-width:var(--cg-ancho,1440px) !important;
  min-width:0 !important; min-height:66px !important; margin:0 auto !important;
  padding:8px var(--cg-margen,20px) !important; gap:24px !important;
}
body.cg-store-enabled header.cg-site-header #content-desktop .logo-content {
  flex:0 0 clamp(160px,15vw,215px) !important; width:clamp(160px,15vw,215px) !important;
  min-width:0 !important; max-width:215px !important;
  margin:0 !important; padding:0 !important; overflow:visible !important;
}
body.cg-store-enabled header.cg-site-header #content-desktop .logo-content .logo {display:block !important; width:100% !important; max-width:100% !important; overflow:visible !important;}
body.cg-store-enabled header.cg-site-header #content-desktop .logo-content img {
  display:block !important; width:100% !important; max-width:100% !important;
  height:auto !important; max-height:48px !important; margin:0 !important;
  object-fit:contain !important; object-position:center !important;
}
body.cg-store-enabled header.cg-site-header #content-desktop .search-content {
  flex:1 1 420px !important; width:auto !important; max-width:520px !important;
  min-width:0 !important; margin:0 auto !important; padding:0 !important;
}
body.cg-store-enabled header.cg-site-header .search-content .form-search,
body.cg-store-enabled header.cg-site-header .search-content .gb-search,
body.cg-store-enabled header.cg-site-header .search-content form {width:100% !important; max-width:100% !important; min-width:0 !important;}
body.cg-store-enabled header.cg-site-header .search-content form {display:flex !important; align-items:center !important; margin:0 !important;}
body.cg-store-enabled header.cg-site-header #content-desktop .promo-content {
  display:flex !important; flex:0 0 auto !important; align-items:center !important;
  justify-content:flex-end !important; gap:20px !important;
  width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important;
}
body.cg-store-enabled header.cg-site-header .promo-content .ingresotop,
body.cg-store-enabled header.cg-site-header .promo-content .header-links {margin:0 !important; width:auto !important; white-space:nowrap !important;}
body.cg-store-enabled header.cg-site-header .promo-content p {margin:0 !important;}
body.cg-store-enabled header.cg-site-header #content-desktop .ingresotop a,
body.cg-store-enabled header.cg-site-header #content-desktop .ircarrito {display:inline-flex !important; align-items:center !important; gap:4px !important; text-decoration:none !important;}
body.cg-store-enabled header.cg-site-header #content-desktop .ingresotop i,
body.cg-store-enabled header.cg-site-header #content-desktop .ircarrito i {font-size:18px !important; line-height:1 !important; color:#f1f1f3 !important; vertical-align:middle !important; margin-right:5px !important;}

/* Buscador de computadora: rectangular, carbon, borde magenta al escribir */
body.cg-store-enabled header.cg-site-header .search-content .gb-search form {
  display:flex !important; align-items:center !important; min-height:42px !important; margin:0 !important;
  border:1px solid #515157 !important; border-radius:8px !important;
  background:#292929 !important; overflow:hidden !important; box-shadow:none !important;
}
body.cg-store-enabled header.cg-site-header .search-content .gb-search form:focus-within {border-color:var(--cg-accent,#d23f86) !important; box-shadow:none !important;}
body.cg-store-enabled header.cg-site-header .search-content .gb-search-input,
body.cg-store-enabled header.cg-site-header .search-content input#tags {
  flex:1 1 auto; width:100% !important; min-width:0 !important; max-width:100% !important;
  min-height:40px !important; height:40px !important; padding:0 16px !important;
  background:#292929 !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; font-size:14px !important;
}
body.cg-store-enabled header.cg-site-header .search-content input#tags::placeholder {color:#a6a6aa !important; -webkit-text-fill-color:#a6a6aa !important;}
body.cg-store-enabled header.cg-site-header .search-content .gb-search form > span {
  display:flex !important; flex:0 0 46px !important; align-items:center !important; justify-content:center !important;
  position:relative !important; float:none !important; inset:auto !important;
  width:46px !important; min-width:46px !important; max-width:46px !important; height:40px !important;
  margin:0 !important; padding:0 !important;
}
body.cg-store-enabled header.cg-site-header .search-content .gb-search-button {
  display:flex !important; align-items:center !important; justify-content:center !important;
  position:static !important; float:none !important; inset:auto !important; transform:none !important;
  width:46px !important; min-width:46px !important; max-width:46px !important;
  height:40px !important; min-height:40px !important; line-height:0 !important;
  margin:0 !important; padding:0 !important; vertical-align:middle !important;
  background:#292929 !important; border:0 !important; border-left:1px solid #424248 !important;
  border-radius:0 !important; box-shadow:none !important;
}
body.cg-store-enabled header.cg-site-header .search-content .gb-search-button:hover,
body.cg-store-enabled header.cg-site-header .search-content .gb-search-button:focus-visible {background:#382734 !important;}
body.cg-store-enabled header.cg-site-header .search-content .gb-search-button img {
  display:block !important; position:static !important; float:none !important; inset:auto !important; transform:none !important;
  width:21px !important; height:21px !important; min-width:21px !important; margin:0 auto !important; padding:0 !important;
  object-fit:contain !important; vertical-align:middle !important;
  filter:grayscale(1) brightness(0) invert(1) !important;
}
/* Lupa con icono propio (Font Awesome), sin depender de la imagen lupasearch.svg del GitHub viejo */
body.cg-store-enabled header.cg-site-header .search-content .gb-search-button img {display:none !important;}
body.cg-store-enabled header.cg-site-header .search-content .gb-search-button::before {
  content:'\f002'; font-family:'Font Awesome 6 Free'; font-weight:900; font-style:normal;
  font-size:17px; line-height:1; color:#ffffff;
}
body.cg-store-enabled header.cg-site-header .search-content .gb-search-button:hover::before {color:var(--cg-accent,#d23f86);}

/* ---------- Menu de categorias (computadora) ---------- */
body.cg-store-enabled header.cg-site-header .cg-nav {
  display:grid !important;
  grid-template-columns:minmax(44px,1fr) max-content minmax(110px,1fr) !important;
  align-items:center !important; justify-content:normal !important; column-gap:0 !important;
  position:relative !important; width:100% !important; max-width:none !important;
  height:46px !important; min-height:46px !important; max-height:46px !important; margin:0 !important;
  padding:0 max(var(--cg-margen,20px),calc((100% - var(--cg-ancho,1440px))/2 + var(--cg-margen,20px))) !important;
  background:#202020 !important; border:0 !important; border-top:1px solid #343434 !important;
  overflow:visible !important;
}
body.cg-store-enabled header.cg-site-header .cg-nav-links {
  grid-column:2 !important; grid-row:1 !important; justify-self:center !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex:0 0 auto !important; position:static !important; inset:auto !important; transform:none !important;
  width:max-content !important; max-width:100% !important; height:45px !important; min-height:45px !important;
  gap:0 !important; margin:0 !important; padding:0 !important;
  overflow:visible !important; background:transparent !important; white-space:nowrap !important;
}
body.cg-store-enabled header.cg-site-header .cg-nav-dropdown {
  display:flex !important; align-items:center !important; position:relative !important; flex:0 0 auto !important;
  height:45px !important; min-height:45px !important; max-height:45px !important; margin:0 !important; padding:0 !important;
}
body.cg-store-enabled header.cg-site-header .cg-nav-links > a,
body.cg-store-enabled header.cg-site-header .cg-nav .cg-nav-trigger {
  display:inline-flex !important; align-items:center !important; justify-content:center !important; align-self:center !important;
  flex:0 0 auto !important; gap:7px !important;
  height:45px !important; min-height:45px !important; max-height:45px !important;
  margin:0 !important; padding:0 clamp(6px,.65vw,12px) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0 !important;
  background:transparent !important; color:#f5f5f5 !important;
  font:600 13px/1 'Manrope',Arial,sans-serif !important;
  white-space:nowrap !important; text-decoration:none !important; vertical-align:middle !important; cursor:pointer;
}
body.cg-store-enabled header.cg-site-header .cg-nav-links > a:hover,
body.cg-store-enabled header.cg-site-header .cg-nav .cg-nav-trigger:hover,
body.cg-store-enabled header.cg-site-header .cg-nav .cg-nav-trigger[aria-expanded="true"] {
  background:#29292d !important; color:#fff !important; box-shadow:inset 0 -2px 0 var(--cg-accent,#d23f86) !important;
}
body.cg-store-enabled header.cg-site-header .cg-nav-links > a:focus-visible,
body.cg-store-enabled header.cg-site-header .cg-nav .cg-nav-trigger:focus-visible {outline:2px solid var(--cg-accent,#d23f86) !important; outline-offset:-3px !important;}
body.cg-store-enabled .cg-nav .cg-nav-trigger i {font-size:10px; color:var(--cg-accent,#d23f86); transition:transform .18s ease;}
body.cg-store-enabled .cg-nav .cg-nav-trigger[aria-expanded="true"] i {transform:rotate(180deg)}

/* Paneles desplegables */
body.cg-store-enabled .cg-nav-panel {
  display:none !important; position:absolute !important; top:100% !important; left:0 !important;
  width:240px !important; max-width:min(290px,90vw) !important; max-height:min(70vh,520px) !important;
  overflow-y:auto !important; padding:7px !important; background:#171719 !important;
  border:1px solid #38383d !important; border-radius:0 0 10px 10px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.38) !important; z-index:1900 !important;
}
body.cg-store-enabled .cg-nav-dropdown.is-open .cg-nav-panel {display:block !important;}
body.cg-store-enabled .cg-nav-panel a {display:block !important; padding:11px 12px !important; color:#eee !important; background:transparent !important; text-decoration:none !important; font:500 12px/1.35 'Manrope',Arial,sans-serif !important; border-radius:6px !important; white-space:normal;}
body.cg-store-enabled header.cg-site-header .cg-nav-panel a:hover,
body.cg-store-enabled header.cg-site-header .cg-nav-panel a:focus-visible {background:#27272b !important; color:#fff !important; box-shadow:inset 3px 0 0 var(--cg-accent,#d23f86) !important;}

/* Boton hamburguesa del menu de categorias */
body.cg-store-enabled header.cg-site-header .cg-nav-products {
  grid-column:1 !important; grid-row:1 !important; justify-self:start !important; align-self:center !important;
  position:static !important; inset:auto !important; transform:none !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:42px !important; min-width:42px !important; max-width:42px !important;
  height:36px !important; min-height:36px !important; max-height:36px !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important;
  background:#242427 !important; border:1px solid transparent !important; border-radius:6px !important;
  box-shadow:none !important; outline:0 !important; cursor:pointer;
}
body.cg-store-enabled header.cg-site-header .cg-nav-products::before,
body.cg-store-enabled header.cg-site-header .cg-nav-products::after {content:none !important; display:none !important;}
body.cg-store-enabled header.cg-site-header .cg-nav-products:hover {background:#30232c !important; border-color:var(--cg-accent,#d23f86) !important;}
body.cg-store-enabled header.cg-site-header .cg-nav-products:focus-visible {outline:2px solid var(--cg-accent,#d23f86) !important; outline-offset:-3px !important;}
body.cg-store-enabled header.cg-site-header .cg-nav-products i {display:block !important; position:static !important; transform:none !important; margin:0 !important; padding:0 !important; line-height:1 !important; font-size:21px !important; color:var(--cg-accent,#d23f86);}

/* Boton claro / oscuro (computadora) */
body.cg-store-enabled header.cg-site-header .cg-nav-theme {
  grid-column:3 !important; grid-row:1 !important; justify-self:end !important; align-self:center !important;
  position:static !important; inset:auto !important; transform:none !important;
  display:flex !important; align-items:center !important; justify-content:flex-end !important; flex:0 0 auto !important;
  width:auto !important; min-width:0 !important; height:45px !important; min-height:45px !important; max-height:45px !important;
  margin:0 !important; padding:0 !important; gap:8px !important; background:transparent !important;
}
body.cg-store-enabled header.cg-site-header .cg-nav-theme .modo-oscuro,
body.cg-store-enabled header.cg-site-header .cg-nav-theme .modo-claro {display:none !important;}
body.cg-store-enabled header.cg-site-header .cg-nav-theme .theme-switch-wrapper {display:flex !important; align-items:center !important; justify-content:center !important; gap:0 !important; margin:0 !important; padding:0 !important;}
body.cg-store-enabled header.cg-site-header .cg-nav-theme .cg-theme-label {display:inline-flex !important; align-items:center !important; color:#f0f0f2 !important; font:600 11px/1.2 'Manrope',Arial,sans-serif !important; white-space:nowrap !important;}
body.cg-store-enabled header.cg-site-header .cg-nav-theme .theme-switch {
  position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  flex:0 0 32px !important; width:32px !important; min-width:32px !important; max-width:32px !important;
  height:32px !important; min-height:32px !important; max-height:32px !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important; cursor:pointer !important;
  background:#29292d !important; background-image:none !important;
  border:1px solid #515159 !important; border-radius:50% !important; box-shadow:none !important;
}
body.cg-store-enabled header.cg-site-header .cg-nav-theme .theme-switch .slider-theme,
body.cg-store-enabled header.cg-site-header .cg-nav-theme .theme-switch .slider-theme::before,
body.cg-store-enabled header.cg-site-header .cg-nav-theme .theme-switch .slider-theme::after {display:none !important; content:none !important;}
body.cg-store-enabled header.cg-site-header .cg-nav-theme .theme-switch #checkbox {
  position:absolute !important; display:block !important; inset:0 !important; width:100% !important; height:100% !important;
  margin:0 !important; opacity:0 !important; cursor:pointer !important; z-index:2 !important;
}
body.cg-store-enabled header.cg-site-header .cg-nav-theme .cg-desktop-theme-icon {
  position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:22px !important; height:22px !important; margin:0 !important; padding:0 !important;
  color:#fff !important; font-size:17px !important; line-height:1 !important;
  font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
  pointer-events:none !important; z-index:1 !important;
}
body.cg-store-enabled header.cg-site-header .cg-nav-theme .cg-desktop-theme-icon::before {content:'\f186' !important; font-family:'Font Awesome 6 Free' !important; font-style:normal !important; font-weight:900 !important; display:block !important;}
html.dark body.cg-store-enabled header.cg-site-header .cg-nav-theme .cg-desktop-theme-icon::before {content:'\f185' !important;}
/* Contorno solo al llegar con el teclado */
body.cg-store-enabled header.cg-site-header .cg-nav-theme .theme-switch:has(#checkbox:focus-visible) {border-color:var(--cg-accent,#d23f86) !important; outline:2px solid var(--cg-accent,#d23f86) !important; outline-offset:2px !important;}

/* Sin reservas de espacio heredadas: el header es sticky y ocupa su lugar */
body.cg-store-enabled #slides_ofertas,
body.cg-store-enabled section#slides_ofertas.slider {margin-top:0 !important;}

@media (min-width:1025px) {
  body.cg-store-enabled header.cg-site-header #content-mobile,
  body.cg-store-enabled header.cg-site-header #menuBtn {display:none !important;}
}
@media (min-width:1025px) and (max-width:1450px) {
  body.cg-store-enabled header.cg-site-header .cg-nav-links > a,
  body.cg-store-enabled header.cg-site-header .cg-nav .cg-nav-trigger {font-size:12px !important; padding:0 clamp(4px,.45vw,8px) !important;}
  body.cg-store-enabled header.cg-site-header .cg-nav-theme .cg-theme-label {font-size:10px !important;}
}
@media (min-width:1025px) and (max-width:1250px) {
  body.cg-store-enabled header.cg-site-header #content-desktop > .inner-wrapper {gap:14px !important;}
  body.cg-store-enabled header.cg-site-header #content-desktop .promo-content {gap:10px !important;}
  body.cg-store-enabled header.cg-site-header .cg-nav {grid-template-columns:minmax(44px,1fr) max-content minmax(90px,1fr) !important;}
  body.cg-store-enabled header.cg-site-header .cg-nav-links > a,
  body.cg-store-enabled header.cg-site-header .cg-nav .cg-nav-trigger {font-size:11px !important; padding-left:4px !important; padding-right:4px !important;}
}
@media (min-width:1025px) and (max-width:1200px) {
  body.cg-store-enabled header.cg-site-header #content-desktop > .inner-wrapper {min-height:65px !important;}
}

/* ---------- Celular y tablet (incluye telefonos girados) ---------- */
@media (max-width:1024px), (orientation:landscape) and (pointer:coarse) and (max-height:550px) {
  body.cg-store-enabled header.cg-site-header #content-desktop,
  body.cg-store-enabled header.cg-site-header .cg-nav {display:none !important;}
  /* Barra promocional de lado a lado; en iPhone se extiende bajo la hora */
  body.cg-store-enabled header.cg-site-header .cg-promo {
    width:100vw !important; max-width:100vw !important; position:relative !important;
    left:50% !important; transform:translateX(-50%) !important;
    min-height:calc(28px + env(safe-area-inset-top, 0px)) !important;
    padding:env(safe-area-inset-top, 0px) 10px 0 !important;
  }
  body.cg-store-enabled header.cg-site-header #content-mobile {
    display:block !important; width:100% !important; max-width:100% !important;
    height:auto !important; max-height:none !important; overflow:visible !important; background:#101010 !important;
  }
  body.cg-store-enabled header.cg-site-header #content-mobile .container.header {width:100% !important; max-width:100% !important; margin:0 !important; padding:0 12px !important;}
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar {
    position:relative !important; display:block !important; width:100% !important; max-width:100% !important;
    height:68px !important; min-height:68px !important; margin:0 !important; padding:0 !important;
    background:#101010 !important; overflow:visible !important;
  }
  /* Logo centrado */
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar-brand {
    position:absolute !important; display:flex !important; align-items:center !important; justify-content:center !important;
    top:50% !important; left:47% !important; right:auto !important; transform:translate(-50%,-50%) !important;
    float:none !important; width:clamp(110px,42vw,195px) !important; max-width:calc(100vw - 236px) !important;
    height:54px !important; margin:0 !important; padding:0 !important; z-index:1 !important;
  }
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar-brand img {
    display:block !important; position:static !important; top:auto !important;
    width:100% !important; max-width:100% !important; height:auto !important; max-height:47px !important;
    margin:0 !important; object-fit:contain !important;
  }
  /* Iconos de busqueda, cuenta y carrito a la derecha */
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar > a.pull-right {
    position:absolute !important; top:50% !important; transform:translateY(-50%) !important; float:none !important;
    width:30px !important; height:40px !important; margin:0 !important; padding:0 !important;
    align-items:center !important; justify-content:center !important; text-decoration:none !important; z-index:3 !important;
  }
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar > a.pull-right i {font-size:21px !important; line-height:1 !important; color:#f4f4f5 !important;}
  body.cg-store-enabled header.cg-site-header #content-mobile #abrirpanelbusqueda {right:76px !important; display:flex !important;}
  body.cg-store-enabled header.cg-site-header #content-mobile #usuarioMovilLogueado,
  body.cg-store-enabled header.cg-site-header #content-mobile #usuarioMovilSinLoguear {right:42px !important;}
  body.cg-store-enabled header.cg-site-header #content-mobile #abrirpanelcarrito {right:6px !important; display:flex !important;}
  body.cg-store-enabled header.cg-site-header #content-mobile #abrirpanelcarrito .caret {display:none !important;}
  body.cg-store-enabled header.cg-site-header #content-mobile #carritoDesktop,
  body.cg-store-enabled header.cg-site-header #content-mobile #userDesktop,
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar-collapse {display:none !important;}
  body.cg-store-enabled header.cg-site-header #content-mobile .dropdown-cart {position:absolute; z-index:1902;}
  /* Boton del menu lateral */
  body.cg-store-enabled header.cg-site-header #menuBtn {
    position:absolute !important; top:calc(28px + env(safe-area-inset-top, 0px) + 12px) !important;
    left:clamp(10px,3vw,26px) !important; width:43px !important; height:43px !important; padding:8px !important;
    background:transparent !important; box-shadow:none !important; z-index:1901 !important;
  }
  body.cg-store-enabled header.cg-site-header #menuBtn i {font-size:24px !important; color:var(--cg-accent,#d23f86) !important;}
  body.cg-store-enabled header.cg-site-header #closeBtn {position:static !important;}
  /* Buscador desplegable debajo del logo */
  body.cg-store-enabled header.cg-site-header #cg-inline-mobile-search:not([hidden]) {
    display:block !important; position:relative !important; z-index:2 !important;
    width:100% !important; max-width:100% !important; margin:0 !important; padding:8px 12px 12px !important;
    background:#111113 !important; border:0 !important; border-bottom:2px solid var(--cg-accent,#d23f86) !important; box-shadow:none !important;
  }
  body.cg-store-enabled header.cg-site-header #cg-inline-mobile-search form {
    display:flex !important; align-items:center !important; width:100% !important; max-width:100% !important; min-width:0 !important;
    margin:0 !important; background:#292929 !important; border:1px solid #515157 !important;
    border-radius:8px !important; box-shadow:none !important; overflow:hidden !important;
  }
  body.cg-store-enabled header.cg-site-header #cg-inline-mobile-search form:focus-within {border-color:var(--cg-accent,#d23f86) !important;}
  body.cg-store-enabled header.cg-site-header #cg-mobile-search-input {
    display:block !important; flex:1 1 auto !important; width:100% !important; min-width:0 !important;
    height:44px !important; margin:0 !important; padding:0 14px !important;
    border:0 !important; border-radius:0 !important; outline:0 !important; box-shadow:none !important;
    background:transparent !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
    font:400 16px 'Manrope',Arial,sans-serif !important;
  }
  body.cg-store-enabled header.cg-site-header #cg-mobile-search-input::placeholder {color:#979797 !important; -webkit-text-fill-color:#979797 !important; opacity:1 !important;}
  body.cg-store-enabled header.cg-site-header #cg-inline-mobile-search button {
    display:flex !important; align-items:center !important; justify-content:center !important;
    flex:0 0 44px !important; width:44px !important; height:44px !important; margin:0 !important; padding:0 !important;
    border:0 !important; background:#292929 !important; color:#fff !important; cursor:pointer !important;
  }
  body.cg-store-enabled header.cg-site-header #cg-inline-mobile-search button:hover {background:#382734 !important;}
  body.cg-store-enabled header.cg-site-header #cg-inline-mobile-search button i {color:var(--cg-accent,#d23f86) !important;}
}
@media (max-width:350px) {
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar-brand {width:min(36vw,112px) !important; max-width:112px !important;}
}
/* iPhone girado: el contenido no queda debajo de la camara */
@media (orientation:landscape) and (pointer:coarse) {
  body.cg-store-enabled {padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px);}
}
@media (prefers-reduced-motion:reduce) {
  body.cg-store-enabled .cg-nav .cg-nav-trigger i {transition:none !important;}
}

/* ---------- Cuenta y carrito: icono arriba, texto abajo en una sola linea (solo computadora) ---------- */
@media (min-width:1025px) {
  body.cg-store-enabled header.cg-site-header #content-desktop .ingresotop a,
  body.cg-store-enabled header.cg-site-header #content-desktop .header-links .ircarrito {
    display:inline-block !important; text-align:center !important; white-space:nowrap !important;
    font:600 11px/1.2 'Manrope',Arial,sans-serif !important; color:#f1f1f3 !important;
  }
  body.cg-store-enabled header.cg-site-header #content-desktop .ingresotop i,
  body.cg-store-enabled header.cg-site-header #content-desktop .header-links .ircarrito i {
    display:block !important; margin:0 auto 4px !important; font-size:20px !important;
  }
  body.cg-store-enabled header.cg-site-header #content-desktop .ingresotop a:hover,
  body.cg-store-enabled header.cg-site-header #content-desktop .header-links .ircarrito:hover,
  body.cg-store-enabled header.cg-site-header #content-desktop .ingresotop a:hover i,
  body.cg-store-enabled header.cg-site-header #content-desktop .header-links .ircarrito:hover i {color:var(--cg-accent,#d23f86) !important;}
}

/* ---------- Modo claro: la barra de categorias pasa a clara (como Maximus) ----------
   La barra azul y la fila del logo quedan oscuras en los dos modos. */
html.light body.cg-store-enabled header.cg-site-header .cg-nav {
  background:#f3f4f6 !important; border-top:1px solid #e3e6ea !important; border-bottom:1px solid #e3e6ea !important;
}
html.light body.cg-store-enabled header.cg-site-header .cg-nav-links > a,
html.light body.cg-store-enabled header.cg-site-header .cg-nav .cg-nav-trigger {color:#23252b !important;}
html.light body.cg-store-enabled header.cg-site-header .cg-nav-links > a:hover,
html.light body.cg-store-enabled header.cg-site-header .cg-nav .cg-nav-trigger:hover,
html.light body.cg-store-enabled header.cg-site-header .cg-nav .cg-nav-trigger[aria-expanded="true"] {
  background:#e8e9ed !important; color:#111318 !important;
}
html.light body.cg-store-enabled header.cg-site-header .cg-nav-products {background:#e6e7eb !important;}
html.light body.cg-store-enabled header.cg-site-header .cg-nav-products:hover {background:#fbe9f2 !important;}
html.light body.cg-store-enabled header.cg-site-header .cg-nav-theme .cg-theme-label {color:#4b5058 !important;}
html.light body.cg-store-enabled header.cg-site-header .cg-nav-theme .theme-switch {background:#ffffff !important; border-color:#d0d4da !important;}
html.light body.cg-store-enabled header.cg-site-header .cg-nav-theme .cg-desktop-theme-icon {color:#23252b !important;}
/* Desplegables (Componentes, Perifericos) tambien claros */
html.light body.cg-store-enabled .cg-nav-panel {background:#ffffff !important; border-color:#e3e6ea !important; box-shadow:0 12px 30px rgba(15,17,25,.14) !important;}
html.light body.cg-store-enabled .cg-nav-panel a {color:#23252b !important;}
html.light body.cg-store-enabled header.cg-site-header .cg-nav-panel a:hover,
html.light body.cg-store-enabled header.cg-site-header .cg-nav-panel a:focus-visible {background:#f3f4f6 !important; color:#111318 !important;}

/* ---------- Menu lateral: botones rapidos como pastillas y accesos fijos abajo ---------- */
#sidebar.sidebar {display:flex !important; flex-direction:column !important;}
#sidebar.sidebar > * {flex-shrink:0;}
#sidebar .cg-quick-actions {display:flex !important; flex-wrap:wrap !important; gap:8px !important; padding:6px 12px 12px !important;}
#sidebar .cg-quick-actions > a,
#sidebar .cg-quick-actions > .switch-theme-mobile {width:auto !important; flex:0 0 auto !important; display:flex !important;}
#sidebar .cg-quick-actions a,
#sidebar .cg-theme-action {
  width:auto !important; height:36px !important; min-height:36px !important; padding:0 12px !important;
  gap:7px !important; border-radius:8px !important; font:600 13px/1 'Manrope',Arial,sans-serif !important;
}
#sidebar .cg-quick-actions a i,
#sidebar .cg-theme-action i {font-size:13px !important;}
#sidebar .cg-sidebar-foot {
  position:sticky; bottom:0; z-index:3; margin-top:auto; padding:8px 12px 12px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  background:var(--cg-bg,#0a0a0a); border-top:1px solid rgba(255,255,255,.08);
}
#sidebar .cg-sidebar-foot a {
  display:flex; align-items:center; gap:12px; min-height:40px; padding:0 8px; border-radius:8px;
  color:#bdbdc4 !important; font:500 14px/1.2 'Manrope',Arial,sans-serif; text-decoration:none !important;
}
#sidebar .cg-sidebar-foot a i {width:18px; text-align:center; font-size:15px; color:#8a8a93;}
#sidebar .cg-sidebar-foot a:hover,
#sidebar .cg-sidebar-foot a:active {background:#30232c; color:#ffffff !important;}
#sidebar .cg-sidebar-foot a:hover i {color:var(--cg-accent,#d23f86);}
/* Computadora: sin Empresas ni Modo claro/oscuro en el menu lateral (ya estan en la barra de arriba) */
@media (min-width:1025px) {
  #sidebar .cg-quick-actions > a.cg-solo-movil,
  #sidebar .cg-quick-actions > .switch-theme-mobile.categorias-mobile {display:none !important;}
}
/* Celular: los cuatro botones en una sola fila; el de tema queda solo con el icono */
@media (max-width:1024px) {
  #sidebar .cg-quick-actions {flex-wrap:nowrap !important; gap:6px !important; padding:6px 10px 12px !important;}
  #sidebar .cg-quick-actions > a {flex:1 1 auto !important; min-width:0 !important;}
  #sidebar .cg-quick-actions a {
    justify-content:center !important; padding:0 8px !important; gap:5px !important;
    font-size:clamp(11px, 3.2vw, 13px) !important; overflow:hidden; text-overflow:ellipsis;
  }
  #sidebar .cg-quick-actions a i {font-size:12px !important;}
  #sidebar .cg-quick-actions > .switch-theme-mobile {flex:0 0 36px !important; width:36px !important;}
  #sidebar .cg-theme-action {width:36px !important; min-width:36px !important; padding:0 !important; justify-content:center !important;}
  #sidebar .cg-theme-action > span {display:none !important;}
  #sidebar .cg-theme-action > i {font-size:15px !important;}
}
#sidebar .cg-sidebar-web {display:block; margin-top:6px; font:500 11px/1 'Manrope',Arial,sans-serif; color:#6b6b73; text-align:center;}
html.light #sidebar .cg-sidebar-foot {background:#ffffff; border-top-color:#eceef1;}
html.light #sidebar .cg-sidebar-foot a {color:#4b5058 !important;}
html.light #sidebar .cg-sidebar-foot a i {color:#8a8f98;}
html.light #sidebar .cg-sidebar-foot a:hover,
html.light #sidebar .cg-sidebar-foot a:active {background:#fbe9f2; color:#111318 !important;}
html.light #sidebar .cg-sidebar-web {color:#9aa0a8;}

/* ---------- Modo claro: menu lateral blanco ---------- */
html.light #sidebar.sidebar {background:#ffffff !important; border-right:1px solid #e3e6ea !important;}
html.light #sidebar.sidebar.active {box-shadow:0 0 30px rgba(15,17,25,.18) !important;}
html.light #sidebar::-webkit-scrollbar {background:#ffffff;}
html.light #sidebar::-webkit-scrollbar-thumb {background:#d0d4da;}
html.light #sidebar .cg-brand {color:#111318 !important;}
html.light body.cg-store-enabled #sidebar .cg-sidebar-head #closeBtn,
html.light body.cg-store-enabled #sidebar .cg-sidebar-head #closeBtn i,
html.light #sidebar #closeBtn, html.light #sidebar #closeBtn i {color:#111318 !important; background:transparent !important;}
/* Accesos rapidos (Arma tu PC, Ofertas, Modo oscuro) */
html.light #sidebar .cg-quick-actions {border-bottom-color:#eceef1 !important;}
html.light #sidebar .cg-quick-actions a,
html.light #sidebar .cg-theme-action {background:#f3f4f6 !important; border-color:#e3e6ea !important; color:#111318 !important;}
html.light #sidebar .cg-theme-action > span,
html.light #sidebar .cg-theme-action > i {color:#111318 !important; -webkit-text-fill-color:#111318 !important;}
html.light #sidebar .cg-quick-actions a i {color:var(--cg-accent,#d23f86) !important;}
html.light #sidebar .cg-quick-actions a:hover,
html.light #sidebar .cg-theme-action:hover,
html.light #sidebar .cg-quick-actions a:active,
html.light #sidebar .cg-theme-action:active,
html.light #sidebar .cg-quick-actions a.cg-tapped {background:#fbe9f2 !important; border-color:var(--cg-accent,#d23f86) !important;}
/* Categorias */
html.light #sidebar .menu-item,
html.light #sidebar .menu-item a,
html.light #sidebar .menu-item span,
html.light #sidebar > .divider ~ .menu-item a,
html.light #sidebar > .divider ~ .menu-item i:not(.chevron) {color:#23252b !important;}
html.light #sidebar .menu-item i:first-child,
html.light #sidebar .menu-item a i {color:var(--cg-accent,#d23f86) !important;}
html.light #sidebar .menu-item:hover,
html.light #sidebar .menu-item:focus,
html.light #sidebar .menu-item.open,
html.light #sidebar .menu-item.active,
html.light #sidebar .menu-item.expanded,
html.light #sidebar .menu-item[aria-expanded="true"],
html.light #sidebar .menu-item.cg-category-tapped,
html.light #sidebar .menu-item:active {background:#fbe9f2 !important;}
html.light #sidebar .menu-item.open span,
html.light #sidebar .menu-item[aria-expanded="true"] span,
html.light #sidebar .menu-item.cg-category-tapped a {color:#111318 !important;}
/* Submenus */
html.light #sidebar .submenu {background:#f7f8fa !important;}
html.light #sidebar .submenu-item a {color:#4b5058 !important;}
html.light #sidebar .submenu-item:hover,
html.light #sidebar .submenu-item:focus,
html.light #sidebar .submenu-item:active,
html.light #sidebar .submenu-item.cg-category-tapped {background:#fbe9f2 !important;}
html.light #sidebar .submenu-item:hover a,
html.light #sidebar .submenu-item.cg-category-tapped a {color:#111318 !important;}
html.light #sidebar .divider {background:linear-gradient(to right, transparent, rgba(0,0,0,.1), transparent) !important;}
@media (max-width:1024px) {
  html.light #sidebar .menu-item:hover,
  html.light #sidebar .menu-item:focus,
  html.light #sidebar .submenu-item:hover,
  html.light #sidebar .submenu-item:focus {background:transparent !important;}
  html.light #sidebar .menu-item.open,
  html.light #sidebar .menu-item[aria-expanded="true"],
  html.light #sidebar .menu-item.cg-category-tapped,
  html.light #sidebar .submenu-item.cg-category-tapped,
  html.light #sidebar .menu-item:active,
  html.light #sidebar .submenu-item:active {background:#fbe9f2 !important;}
}


/* ======================================================================
   13. ARREGLOS PARA CELULAR
   (antes estaba en: HEADER, bloque cg-mobile-three-fixes)
   ====================================================================== */

@media (max-width:1024px), (orientation:landscape) and (pointer:coarse) and (max-height:550px) {
  /* 1. El boton de busqueda no conserva el recuadro azul del navegador al tocarlo. */
  body.cg-store-enabled header.cg-site-header #content-mobile #abrirpanelbusqueda,
  body.cg-store-enabled header.cg-site-header #content-mobile #abrirpanelbusqueda:hover,
  body.cg-store-enabled header.cg-site-header #content-mobile #abrirpanelbusqueda:focus,
  body.cg-store-enabled header.cg-site-header #content-mobile #abrirpanelbusqueda:active {
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }
  body.cg-store-enabled header.cg-site-header #content-mobile #abrirpanelbusqueda:focus-visible {
    outline:2px solid var(--cg-accent,#d23f86) !important;
    outline-offset:2px !important;
    border-radius:5px !important;
  }
  /* 2. jQuery .show() asigna display:block al iniciar sesion: mantener flex
     para centrar el icono, sin volver visible el enlace oculto. */
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar > #usuarioMovilLogueado,
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar > #usuarioMovilSinLoguear {
    position:absolute !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    align-items:center !important;
    justify-content:center !important;
    vertical-align:middle !important;
    width:30px !important;
    padding:0 !important;
    margin:0 !important;
    height:42px !important;
    line-height:1 !important;
  }
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar > #usuarioMovilLogueado:not([style*="none"]),
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar > #usuarioMovilSinLoguear:not([style*="none"]) {
    display:flex !important;
  }
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar > #usuarioMovilLogueado i,
  body.cg-store-enabled header.cg-site-header #content-mobile .navbar > #usuarioMovilSinLoguear i {
    display:block !important;
    position:static !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    vertical-align:middle !important;
  }
  /* 3. La X permanece visible y pulsable incluso al abrir el menu por deslizamiento. */
  body.cg-store-enabled #sidebar .cg-sidebar-head #closeBtn {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:10 !important;
    flex:0 0 44px !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    height:44px !important;
    margin:0 !important;
    padding:0 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    color:#fff !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  body.cg-store-enabled #sidebar .cg-sidebar-head #closeBtn i {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#fff !important;
    font-size:23px !important;
    line-height:1 !important;
  }
  body.cg-store-enabled #sidebar .cg-sidebar-head #closeBtn:focus-visible {
    outline:2px solid var(--cg-accent,#d23f86) !important;
    outline-offset:-3px !important;
  }
}


/* ======================================================================
   14. VENTANA SE AGREGO AL CARRITO
   (antes estaba en: HEADER, bloque cg-modalcompra-ui)
   ====================================================================== */

/* Modal de compra: solo UI. Los colores principales salen del color de marca (--cg-accent). */
#modalcompra .modal-dialog {
  max-width:560px;
  margin:1.75rem auto;
}

#modalcompra .modal-content {
  background:#16191b;
  color:#ffffff;
  border:1px solid rgba(255,255,255,.30);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 55px rgba(0,0,0,.45);
}

#modalcompra .modal-header {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:17px 48px;
  border-bottom:1px solid rgba(255,255,255,.20);
  background:transparent;
}

#modalcompra .modal-title {
  width:100%;
  margin:0;
  color:#ffffff !important;
  font-family:var(--cg-ui-font, "Manrope", Arial, sans-serif);
  font-size:17px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
}

#modalcompra .close {
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  margin:0;
  padding:6px;
  color:#ffffff !important;
  opacity:.88;
  text-shadow:none;
  line-height:1;
}

#modalcompra .close:hover,
#modalcompra .close:focus {
  color:var(--cg-accent, #d23f86) !important;
  opacity:1;
  outline:none;
}

#modalcompra .modal-body {
  padding:16px 20px;
}

#modalcompra #contenidoModalCompra {
  display:block;
  min-height:96px;
  margin:0 !important;
  color:#ffffff !important;
  font-family:var(--cg-ui-font, "Manrope", Arial, sans-serif);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  overflow:hidden;
  word-break:normal;
  overflow-wrap:anywhere;
}

#modalcompra #contenidoModalCompra img {
  float:left;
  display:block;
  width:96px;
  max-width:32%;
  height:auto;
  margin:0 14px 8px 0 !important;
  padding:0;
  background:#ffffff;
  object-fit:contain;
}

#modalcompra .modal-footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px 20px 16px;
  border-top:1px solid rgba(255,255,255,.20);
  background:transparent;
}

#modalcompra .modal-footer .btn {
  min-height:42px;
  margin:0 !important;
  padding:10px 18px;
  border-radius:7px;
  font-family:var(--cg-ui-font, "Manrope", Arial, sans-serif);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

/* Accion secundaria */
#modalcompra .modal-footer .btn-secondary {
  background:transparent !important;
  border:1px solid rgba(255,255,255,.55) !important;
  color:#ffffff !important;
}

#modalcompra .modal-footer .btn-secondary:hover,
#modalcompra .modal-footer .btn-secondary:focus {
  background:var(--cg-accent-soft, rgba(210,63,134,.10)) !important;
  border-color:var(--cg-accent, #d23f86) !important;
  color:#ffffff !important;
}

/* Accion principal. En celular el texto no se oscurece al tocar. */
html body #modalcompra .modal-footer a.btn.btn-success,
html body #modalcompra .modal-footer a.btn.btn-success:link,
html body #modalcompra .modal-footer a.btn.btn-success:visited {
  background:var(--cg-accent, #d23f86) !important;
  border-color:var(--cg-accent, #d23f86) !important;
}
html body #modalcompra .modal-footer a.btn.btn-success,
html body #modalcompra .modal-footer a.btn.btn-success:link,
html body #modalcompra .modal-footer a.btn.btn-success:visited,
html body #modalcompra .modal-footer a.btn.btn-success:hover,
html body #modalcompra .modal-footer a.btn.btn-success:focus,
html body #modalcompra .modal-footer a.btn.btn-success:focus-visible,
html body #modalcompra .modal-footer a.btn.btn-success:active {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-decoration:none !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
  -webkit-appearance:none;
}
html body #modalcompra .modal-footer a.btn.btn-success:hover,
html body #modalcompra .modal-footer a.btn.btn-success:focus,
html body #modalcompra .modal-footer a.btn.btn-success:focus-visible,
html body #modalcompra .modal-footer a.btn.btn-success:active {
  background:var(--cg-accent-hover, #b02f6d) !important;
  border-color:var(--cg-accent-hover, #b02f6d) !important;
}

/* Movil: solo espaciado y botones; no altera contenido ni logica. */
@media (max-width:575px) {
  #modalcompra .modal-dialog {
    width:auto;
    max-width:none;
    margin:12px;
  }

  #modalcompra .modal-header {
    padding:15px 44px 15px 16px;
  }

  #modalcompra .modal-title {
    font-size:16px;
  }

  #modalcompra .modal-body {
    padding:14px 16px;
  }

  #modalcompra #contenidoModalCompra {
    min-height:82px;
    font-size:13px;
    line-height:1.35;
  }

  #modalcompra #contenidoModalCompra img {
    width:80px;
    max-width:30%;
    margin-right:12px !important;
  }

  #modalcompra .modal-footer {
    flex-direction:column;
    gap:9px;
    padding:13px 16px 15px;
  }

  #modalcompra .modal-footer .btn {
    width:100%;
  }
}


/* ======================================================================
   15. HOME VIEJA cgnewhome3.css
   (antes estaba en: GitHub MrObjection)
   ====================================================================== */

/* Solo en la pagina de inicio. :where() no suma especificidad, asi se comporta igual que antes. */
:where(html.cg-home) .product:hover {
	border-radius: 4px 4px 4px 4px !important;
	box-shadow: 1px 8px 16px 1px rgba(0,0,0,0.15) !important;
}
:where(html.cg-home) .product:hover {
border: 1px solid #E2E2E2 !important;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.33) !important;
}
:where(html.cg-home) div.product:hover .image img {
-webkit-transform: scale(1.15) !important;
transform: scale(1.15) !important;
opacity: 50% !important;
}
:where(html.cg-home) .product {
	padding-bottom: 0px !important;
	padding-top: 0px !important;
}
@media screen and (min-width:769px) {
:where(html.cg-home) header {
	margin-bottom: 0px !important;
	position: absolute !important;
}
}

/* ======================================================================
   16. LISTADOS EN CELULAR: 2 TARJETAS POR FILA (estilo Maximus)
   Solo en los listados (#articulos) y solo en pantallas chicas.
   ====================================================================== */

@media (max-width: 767px) {
  /* Grilla: 2 por fila, con poco espacio entre tarjetas */
  body.cg-store-enabled #articulos .col-md-10 > .row { margin-left: -5px !important; margin-right: -5px !important; }
  body.cg-store-enabled #articulos .col-md-prod {
    width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important;
    padding-left: 5px !important; padding-right: 5px !important; margin: 0 0 10px !important;
  }
  /* Tarjeta compacta, texto alineado a la izquierda */
  body.cg-store-enabled #articulos .product { text-align: left !important; padding-bottom: 8px !important; }
  /* Foto: recuadro mas bajo, la imagen entra entera y centrada */
  body.cg-store-enabled #articulos .product .image {
    height: 150px !important; min-height: 150px !important; max-height: 150px !important; margin: 6px 6px 0 !important;
  }
  body.cg-store-enabled #articulos .product .image a img,
  body.cg-store-enabled #articulos .product img.img-responsive {
    width: auto !important; max-width: 100% !important; max-height: 130px !important;
  }
  body.cg-store-enabled #articulos .product div.contentDescription { padding: 8px 8px 0 !important; }
  /* Titulo: 2 lineas, mas chico */
  body.cg-store-enabled #articulos .product h4,
  body.cg-store-enabled #articulos .product h4 a,
  body.cg-store-enabled #articulos .product .titprod {
    font-size: 12px !important; line-height: 1.3 !important; text-align: left !important;
  }
  /* Precios alineados a la izquierda */
  body.cg-store-enabled #articulos .product .precio-tachado,
  body.cg-store-enabled #articulos .product .precio-tachado-content { text-align: center !important; font-size: 11px !important; }
  body.cg-store-enabled #articulos .product .price,
  body.cg-store-enabled #articulos .product .price * { font-size: 17px !important; text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; }
  body.cg-store-enabled #articulos .product div.price + div,
  body.cg-store-enabled #articulos .product div.price + div * { font-size: 11px !important; text-align: center !important; }
  /* Boton: mas compacto */
  body.cg-store-enabled #articulos .product .btn.btn-compra,
  body.cg-store-enabled #articulos .product input.btn.btn-primary.btn-compra.compracantidad {
    padding: 9px 4px !important; font-size: 11px !important; letter-spacing: .2px !important; min-height: 0 !important;
  }
}

/* ===== FIN cg-diseno.css ===== */