/* ======================================================================
   COMPUGARDEN - TODO EL DISENO DEL SITIO
   cg-diseno-v7.css (2026-10): TODO EL DISENO EN UN SOLO LUGAR. Pasan aca los estilos que estaban dentro de
   las plantillas: HEAD (seccion 00), barra de arriba del HEADER (18), SLIDER2 (19), BANNERS_HOME_1 (20)
   y la home (21, solo en la pagina principal). Quedan en plantillas solo: la pantalla de carga
   (HEADER_CSS_JS, tiene que verse en el primer instante) y una regla del HEADER con variable de GBP (§TISID§).
   cg-diseno-v6.css (2026-10): el ajuste del celular girado (CG-GIRADO) pasa a este archivo (seccion 0).
   cg-diseno-v5.css (2026-10): boton "Agregar" de las tarjetas con contorno fino (seccion 17, al final).
   cg-diseno-v4.css (2026-10): UNA SOLA LETRA. Roboto, Roboto Condensed, Calibri y Open Sans pasan a
   Manrope, y se saca la descarga de Roboto (@import). Las fuentes de iconos no se tocan.
   cg-diseno-v3.css (2026-10): footer nuevo en la seccion 5 (para que tambien se vea en el checkout).
   cg-diseno-v2.css (2026-10): UN SOLO MAGENTA. Todos los tonos viejos (#e91e8c, #ff003d, #c61624,
   #bf0000) pasan a var(--cg-accent) = #d23f86, y su version oscura a var(--cg-accent-hover) = #b02f6d.
   Para cambiar el magenta de toda la web: editar solo esas dos variables (seccion 2, VARIABLES).
   Los rojos de "Sin stock" quedan rojos a proposito. La ventana de cuotas y las variables de la
   barra pasan del azul viejo al grafito #16171c.
   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
   ====================================================================== */

/* ======================================================================
   00. PLANTILLA HEAD
   Antes estaba dentro de la plantilla HEAD. Va al PRINCIPIO porque antes se aplicaba antes que este archivo.
   ====================================================================== */

  header { width:100% !important }
  .logo-content .logo img {
    display: block;
    height: 20px !important;
    max-width: 100%;
}
  .slick-slide img {
    display: block;
    height: 110px;
}
  .btn-comfpra, .carrito_top, .price, .tipoCambio, p.semaforostock {
    display: block !important;
}
  .product { position:relative }
  div#campana, #detalle div#relacionados div#campana {
	display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    /* border: 1px solid; */
    position: absolute;
    top: 10px; right:10px;
    padding: 5px;
    padding-top: 5px;
    background: rgba(100,100,100,0.05);
    color: #ccc; font-size:1em; cursor:pointer;
	left:auto
  }
  #detalle div#campana { margin-top:0px; position:absolute; right:5px; top:0px; background:none }
  #detalle div#campana i { font-size:1em; top:0px; position:relative }
  .avisostock{
	font-size: 1em;
    color: #303133;
    cursor: pointer;
}
.avisostock:hover{
	font-size: 1em;
    color: red;
    cursor: pointer;
}
.avisostockon{
	font-size: 1em;
    color: #ff0000;
    /*padding-top: 10px;*/
    cursor: pointer;
}
.avisostockon:focus{
	font-size: 1.5em;
    color: red;
    /*padding-top: 10px;*/
    cursor: pointer;
}
#campana.fa-bell:hover{
	cursor:pointer;
	color:red;
}
#detalle .avisostock, #detalle .avisostockon { font-size:1em !important; top:0px; position:relative }
  div#solo-armador {
  border: 1px solid #ccc;
    padding: 15px;
    margin-top: 15px;
    display: inline-block;
    font-weight: bold;
  }
/*.fa-bell{
	color:#958f8f;
}*/
.fa-bell:focus{
	color:red;
}
.fa-bell:hover{
	color:red;
	cursor:pointer;
}
  ul#ui-id-1 { z-index:9999 }
  
.agregarAFavorito:focus{
	color:red;
}
  
  .imagen_predictivo.ui-menu-item { font-size:11px; font-weight:400 }
#tags { border:none }
#tags:focus { outline:none }



li.imagen_predictivo.ui-menu-item {
	font-weight: normal;
    font-size: 12px;
    text-transform: capitalize; border-bottom:1px dotted #ccc
}
ul.ui-autocomplete.ui-menu {
	border: none;
    background: #f2f2f2;
} 
  div.cajanove { margin-bottom:25px }
ul.ui-autocomplete.ui-menu li:hover { background:#eaeaea }
li.imagen_predictivo.ui-menu-item img { background:none !important; border-color:transparent !important}
  @media (max-width:480px) {
	div#solo-armador { text-align:center }
	div#solo-armador a { display:inline-block;}
	/*section.spots_home_1 div.spot7, section.spots_home_1 div.spot8 { display:none } */
  }
  .gb-footer-links .gb-footer-links-container {
    display: inline-block;
    font-size: 14px;
    margin: 0 !important;
    vertical-align: top;
    width: calc((100% - 80px) / 5) !important;
    text-align: center;
}
  section.spots_home_1 div a img { margin-bottom:5px; width:100% }
div.container#articulos, div.container#detalle, div.container#marcas, div.container.checkout, div.container.contenidos, div.container.detalle_contenido, div.container.listado_noticias, div.container.listado_reviews, div.container.listado_videos, div.container.login, div.container.micuenta, div.container.registro, div.flexslider {
   margin-top: 65px;
}
@media screen and (min-width: 769px) {
		.owl-stage-outer {
    		margin-left: 0 !important;
		}
	.row.owl-carousel.owl-theme.owl-loaded.owl-drag {
    border: none !important; 
		box-shadow: none !important;
    		max-width: 1250px;
   		 margin-right: auto;
   		 margin-left: auto;
		}
  }
  /*
div.product:hover input.btn.btn-primary.btn-compra.compracantidad {
	display:block !important;
	bottom:0px !important;
	width:100% !important;
	position:absolute
} */
  .product:hover .image a img {
	width: 70%;
}
.product div.description, .product div.price, .product div.price + div, div.product input.btn.btn-primary.btn-compra.compracantidad {
	transition: all .5s ease 0;
	-webkit-transition: all .5s ease 0;
	-moz-transition: all .5s ease 0;
	-ms-transition: all .5s ease 0;
	transition: all 0.5s ease;
}
  /*
  .product:hover div.description, .product:hover div.price, .product:hover div.price + div { translate:0 -30px }
.product:hover div.price + div { translate:0 -40px }
  .gb-search form {
    width: 50%;
    margin: 0 auto; position:relative
}
  */
  section.spots_home_1 img, ul.brand-carousel img {
	transition: all .5s ease 0;
	-webkit-transition: all .5s ease 0;
	-moz-transition: all .5s ease 0;
	-ms-transition: all .5s ease 0;
	transition: all 0.5s ease;
  }
  section.spots_home_1 img:hover, ul.brand-carousel img:hover {
    transform: scale(1.01);
}
    .dropdown-menu .sub-menu {
    left: 99%;
    position: fixed;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
    top: -0.1%;
    z-index: 0;
    width: 100%;
}
  
  
    .dropdown-menu .sub-menu ol {
list-style:none; padding:0px 20px ; margin:0  }
  .nav-submenu-header { margin-bottom:0 !important; padding-bottom:0 !important }
  .nav-submenu-header a {
    border-bottom: 1px solid #E2E2E2;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    height: 30px;
    overflow: hidden;
    margin-top: 19px;
}
  .titcate { margin-top:0 }
  .titcate a {
    text-transform: none !important;
    font-weight: 500 !important;
    margin-top: 0px !important;
}
  #menu1 ul.dropdown-menu a { padding:0 16px !important }
    #menu1 a:hover {
    background-color: #ddd !important;
    color: #f00 !important;
}
  /* AGREGADOS 27/11/24 */
  #menu1 a:hover {
    background-color: #ddd !important;
    color: #f00 !important;
}
  li.slick-slide img {
    border-radius: 50% !important;
}
  html.dark .brand-carousel { background:none !important }
  
  .slick-slider .slick-list, .slick-slider .slick-track {
    padding: 10px;
}
  section.spots_home_1 img {
    border-radius: 5px;
}
  section.spots_home img { margin-bottom:10px }
  section.spots_home_1 div.col-md-3.col-xs-6.col-6 { padding:8px 10px !important }
  @media(max-width:480px) {
	.brand-carousel.slick-initialized, .imageShowCase.slick-initialized {display:none !important }
	section.spots_home_1 div a img {
    	margin-top: 5px !important;margin-bottom: 5px !important;
	}
	#novedades_home div.container { border:none !important}
	section.spots_home_1 { width:90%; margin:0 auto; margin-top:20px }
	section.spots_home_1 div.col-md-3.col-xs-6.col-6 {
    padding: 0px 5px !important;
	}

}
  @media (max-width: 480px) {
    div.container#articulos, div.container#detalle, div.container#marcas, div.container.checkout, div.container.contenidos, div.container.detalle_contenido, div.container.listado_noticias, div.container.listado_reviews, div.container.listado_videos, div.container.login, div.container.micuenta, div.container.registro {
        margin-top: 75px;
    }
}
.destacados ul li a { white-space:nowrap; padding:0 15px }
@media (min-width: 1900px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 1600px) {
    .flexslider .slides img {
        margin-top: 0px;
    }
}
@media (min-width: 1280px) {
    .flexslider .slides img {
        margin-top: 0px;
    }
}
@media (min-width: 1510px) {
    .flexslider .slides img {
        /* margin-top: 58px !important; */
    }
}
@media (min-width: 1360px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 1246px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 1200px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 1130px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 1056px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 1040px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 970px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 900px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 830px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 790px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
@media (min-width: 769px) {
    .flexslider .slides img {
        margin-top: 0px !important;
    }
}
.flexslider .slides img {
    margin-top: 0px;
}
  @media (max-width: 768px) {
    div.flexslider {
        margin-top: -30px !important;
    }
}

/* ======================================================================
   0. CELULAR GIRADO [CG-GIRADO v1.0]
   Pantalla ancha pero bajita (hasta 500 px de alto): menu lateral de 380 px, slider como maximo
   a la mitad de la altura y beneficios en una fila. Antes estaba en HEADER_CSS_JS; va al PRINCIPIO
   de este archivo para que se aplique en el mismo orden que antes (sin cambios visuales).
   ====================================================================== */
/* [CG-GIRADO v1.0] Celular girado (pantalla ancha pero bajita, hasta 500 px de alto) */
@media (orientation: landscape) and (max-height: 500px) {
  /* Menú lateral: panel de 380 px (no toda la pantalla) y el pie al final de la lista */
  html body #sidebar { width: min(380px, 82vw) !important; max-width: 380px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  html body #sidebar .cg-sidebar-foot { position: static !important; margin-top: 16px !important; }
  /* Slider: como máximo la mitad de la altura, centrado, con su forma (10:3) */
  html body section#slides_ofertas.slider { max-width: calc(50vh * 10 / 3 + 2 * var(--cg-margen, 20px)) !important; }
  /* Beneficios: una sola fila compacta (ícono + título) */
  html body #bajoSlider { padding: 4px 0 !important; margin: 8px 0 0 !important; }
  html body #bajoSlider .container.row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 16px !important; }
  html body #bajoSlider .container.row::before, html body #bajoSlider .container.row::after { display: none !important; content: none !important; }
  html body #bajoSlider .col-md-3 { float: none !important; width: auto !important; max-width: none !important; padding: 0 !important; }
  html body #bajoSlider .p-3 { padding: 6px 4px !important; gap: 8px; justify-content: center; }
  html body #bajoSlider img { width: 18px !important; height: 18px !important; margin-right: 0 !important; flex: 0 0 18px; }
  html body #bajoSlider b { font-size: 11.5px !important; line-height: 1.25 !important; }
  html body #bajoSlider br, html body #bajoSlider .cg-beneficio-sub { display: none !important; }
}

/* ======================================================================
   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).
   ====================================================================== */

/* [v4] Sin la descarga de Roboto y Roboto Condensed: toda la web usa Manrope (se carga en HEADER_CSS_JS) */
html{
    overflow-x:hidden
}
body,h1,h2,h3,h4,h5,h6,i.carritoeliminar span{
    font-family:'Manrope',Arial,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:'Manrope',Arial,sans-serif;
    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 'Manrope',Arial,sans-serif
}
h1.titulos{
    font:600 20px 'Manrope',Arial,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:var(--cg-accent)
}
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:var(--cg-accent)
}
.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:var(--cg-accent);
    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:var(--cg-accent)
    }
    .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 'Manrope',Arial,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:var(--cg-accent)
}
.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 'Manrope',Arial,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:var(--cg-accent)
}
.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:'Manrope',Arial,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 'Manrope',Arial,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:var(--cg-accent);
    cursor:pointer;
    color:#fff;
    display:block;
    margin:0 auto
}
span#errorlogin span,span#errorlogin2 span{
    color:var(--cg-accent);
    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:var(--cg-accent)
}
.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:var(--cg-accent);
    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:var(--cg-accent);
        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:var(--cg-accent)
}
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 'Manrope',Arial,sans-serif;
    color:#333
}
.prod-codigo{
    font:400 13px 'Manrope',Arial,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 'Manrope',Arial,sans-serif;
    color:var(--cg-accent)
}
.checkout h5 i,i.borrarcate,i.borrarmarca,i.borrarsubcate{
    color:var(--cg-accent)
}
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:var(--cg-accent);
    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 'Manrope',Arial,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 'Manrope',Arial,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 'Manrope',Arial,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:var(--cg-accent)
}
a.btn.btn-secondary{
    color:#fff!important
}
ul#formaspago{
    margin:0;
    padding:0
}
span#titcheckout2{
    font:700 20px 'Manrope',Arial,sans-serif;
    color:var(--cg-accent)
}
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 var(--cg-accent)
}
h4.desc-item-armado{
    text-align:center;
    display:block
}
div.tit-parte-armado{
    font-size:20px;
    margin-bottom:15px
}
button.btn.btn-buscartop{
    background:var(--cg-accent);
    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:var(--cg-accent)
}
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 'Manrope',Arial,sans-serif;
    color:var(--cg-accent)
}
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:var(--cg-accent);
    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:var(--cg-accent)
}
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:var(--cg-accent);
    color:#fff
}
ul#formaspago,ul.op{
    list-style:none
}
p.subtit{
    color:var(--cg-accent);
    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:var(--cg-accent)
    }
    .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:var(--cg-accent);
    color:#fff
}
.gb-offers-carousel-clock div em{
    font-size:34px;
    color:var(--cg-accent);
    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:var(--cg-accent)!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 (CG-FOOTER v2.2)
   Diseño nuevo, sobrio: grafito / gris claro, redes chicas y monocromas, datos bancarios
   como submenú en Ayuda. Va ACÁ y no dentro de la plantilla del footer porque en el checkout
   la página la arma Vue, que descarta los <style> de la plantilla (el footer quedaba sin diseño).
   El diseño viejo (.cg-foot__…) se sacó: no se usaba más.
   ====================================================================== */

  html body footer.cg-foot.cgf {
    --cgf-fondo: #f6f6f8; --cgf-texto: #16171c; --cgf-suave: #62656f; --cgf-linea: #e3e4e9;
    display: block !important; width: 100% !important; margin: 48px 0 0 !important; padding: 0 !important;
    background: var(--cgf-fondo) !important; color: var(--cgf-texto) !important; border: 0 !important;
    border-top: 1px solid var(--cgf-linea) !important; text-align: left !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
  }
  html body footer.cg-foot.cgf { box-shadow: none !important; background-image: none !important; outline: 0 !important; }
  html body footer.cg-foot.cgf::before, html body footer.cg-foot.cgf::after,
  html body footer.cgf .cgf__wrap::before, html body footer.cgf .cgf__wrap::after,
  html body footer.cgf .cgf__top::before, html body footer.cgf .cgf__top::after { content: none !important; display: none !important; }
  html.dark body footer.cg-foot.cgf { --cgf-fondo: #111214; --cgf-texto: #e9e9ee; --cgf-suave: #8b8e99; --cgf-linea: #23242a; }
  footer.cgf *, footer.cgf *::before, footer.cgf *::after { box-sizing: border-box; }
  footer.cgf .cgf__wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 36px var(--cg-margen, 20px) 22px; }

  /* Marca y redes */
  footer.cgf .cgf__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--cgf-linea); }
  footer.cgf .cgf__nom { display: block; font-size: 15px; font-weight: 800; letter-spacing: .14em; color: var(--cgf-texto); }
  footer.cgf .cgf__tag { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--cgf-suave); }
  footer.cgf .cgf__redes { display: flex; gap: 8px; flex: 0 0 auto; }
  html body footer.cgf .cgf__redes a {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--cgf-linea); border-radius: 50%; background: transparent;
    color: var(--cgf-texto) !important; text-decoration: none !important; transition: color .2s, border-color .2s;
  }
  html body footer.cgf .cgf__redes a:hover,
  html body footer.cgf .cgf__redes a:focus-visible { color: var(--cg-accent, #d23f86) !important; border-color: var(--cg-accent, #d23f86); outline: none; }
  footer.cgf .cgf__redes svg { display: block; width: 16px; height: 16px; }

  /* Columnas */
  footer.cgf .cgf__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 26px 0; }
  footer.cgf .cgf__col > summary { display: block; list-style: none; margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cgf-suave); cursor: default; }
  footer.cgf .cgf__col > summary::-webkit-details-marker { display: none; }
  footer.cgf ul { margin: 0; padding: 0; list-style: none; }
  footer.cgf li { margin: 0 0 8px; padding: 0; font-size: 13.5px; line-height: 1.5; color: var(--cgf-texto); }
  html body footer.cgf li a { color: var(--cgf-texto) !important; text-decoration: none !important; transition: color .2s; }
  html body footer.cgf li a:hover,
  html body footer.cgf li a:focus-visible { color: var(--cg-accent, #d23f86) !important; outline: none; }
  footer.cgf .cgf__suave { color: var(--cgf-suave); }

  /* Datos bancarios: submenú dentro de Ayuda, mismo tamaño que los demás enlaces */
  footer.cgf .cgf__banco { margin: 0; }
  footer.cgf .cgf__banco > summary {
    display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
    font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--cgf-texto); transition: color .2s;
  }
  footer.cgf .cgf__banco > summary::-webkit-details-marker { display: none; }
  footer.cgf .cgf__banco > summary:hover,
  footer.cgf .cgf__banco > summary:focus-visible,
  footer.cgf .cgf__banco[open] > summary { color: var(--cg-accent, #d23f86); outline: none; }
  footer.cgf .cgf__banco > summary::after {
    content: ""; width: 6px; height: 6px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform .2s;
  }
  footer.cgf .cgf__banco[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
  footer.cgf .cgf__banco-datos {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 10px 0 2px; padding: 12px 14px;
    border: 1px solid var(--cgf-linea); border-radius: 10px; font-size: 12.5px; line-height: 1.45;
  }
  footer.cgf .cgf__banco-datos span:nth-child(odd) { color: var(--cgf-suave); }
  footer.cgf .cgf__banco-datos span:nth-child(even) { color: var(--cgf-texto); font-weight: 700; word-break: break-all; }

  /* Pie */
  footer.cgf .cgf__pie { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--cgf-linea); }
  footer.cgf .cgf__pie p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--cgf-suave); }
  footer.cgf .cgf__pie .cgf__legal { font-size: 11.5px; max-width: 980px; }

  /* Tablet */
  @media (max-width: 991px) {
    footer.cgf .cgf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Celular: columnas plegables */
  @media (max-width: 700px) {
    html body footer.cg-foot.cgf { margin-top: 32px !important; }
    footer.cgf .cgf__wrap { padding: 26px 16px 18px; }
    footer.cgf .cgf__top { align-items: center; padding-bottom: 18px; }
    footer.cgf .cgf__cols { display: block; padding: 6px 0 14px; }
    footer.cgf .cgf__col { border-bottom: 1px solid var(--cgf-linea); }
    footer.cgf .cgf__col > summary { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 15px 0; cursor: pointer; }
    footer.cgf .cgf__col > summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
    footer.cgf .cgf__col[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
    footer.cgf .cgf__col > ul, footer.cgf .cgf__col > .cgf__cuerpo { padding-bottom: 14px; }
  }
  @media (prefers-reduced-motion: reduce) { footer.cgf * { 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: #16171c !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 en grafito en ambos temas */
html:not(.dark) .modal.cg-cuotas-modal .modal-header {
  background: #16171c !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: var(--cg-accent-hover); }
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: var(--cg-accent-hover); }
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:var(--cg-accent);
 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:'Manrope',Arial,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:var(--cg-accent);
 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:var(--cg-accent);
 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:var(--cg-accent);
 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:var(--cg-accent);
  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:var(--cg-accent)
}
.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:var(--cg-accent) !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:#16171c;
  --cg-topbar-fill:#16171c;
  --cg-topbar-mid:#16171c;
}

/* ---------- 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 ===== */

/* ======================================================================
   [CG-ARREGLOS v1.0 · 2026-09] Carrito en el celular y buscador de arriba
   Solo diseño: no cambia cómo funcionan el carrito ni el checkout.
   ====================================================================== */

/* Carrito: la plantilla CHECKOUT pone "overflow-x: hidden" en html y body, y en el iPhone eso
   hace saltar la página al hacer scroll. "clip" hace lo mismo (no deja correr la página hacia
   los costados) sin confundir al Safari del iPhone. Solo actúa en la página del checkout. */
html:has(#checkoutPage),
html:has(#checkoutPage) body {
  overflow-x: clip !important;
}
html:has(#checkoutPage) #checkoutPage { overflow-anchor: none; }

/* Carrito en el celular: "Resumen de pedido" (total y Continuar) arriba de la lista */
@media (max-width: 767px) {
  #checkoutPage #step-cart .carritocontenido > .col-md-4 {
    order: -1;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }
}

/* Buscador de arriba: el cuadro y la lupa del mismo alto y alineados, sin el recuadro azul */
body.cg-store-enabled header.cg-site-header .search-content .gb-search form {
  height: 44px !important; min-height: 44px !important; align-items: stretch !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 {
  align-self: stretch !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
}
body.cg-store-enabled header.cg-site-header .search-content .gb-search form > span {
  align-self: stretch !important; height: auto !important;
}
body.cg-store-enabled header.cg-site-header .search-content .gb-search-button {
  height: 100% !important; min-height: 0 !important; outline: none !important;
}
body.cg-store-enabled header.cg-site-header .search-content .gb-search-button:focus { outline: none !important; box-shadow: none !important; }
body.cg-store-enabled header.cg-site-header .search-content .gb-search-button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cg-accent, #d23f86) !important;
}
body.cg-store-enabled header.cg-site-header .search-content input#tags:focus,
body.cg-store-enabled header.cg-site-header .search-content .gb-search-input:focus { outline: none !important; }
/* [/CG-ARREGLOS] */

/* [CG-TARJETAS-CORTAS v1.0 · 2026-09] Tarjetas de producto más cortas (solo el alto)
   No cambia el ancho ni cuántas van por fila. Solo diseño: el botón agrega con la misma función de GBP.
   Para volver atrás, se borra este bloque.
   (Antes estaba dentro de HEADER_CSS_JS; se mudó acá.) */
html body.cg-store-enabled .product { padding-bottom: 8px !important; }
html body.cg-store-enabled .product .image {
  height: 190px !important; min-height: 190px !important; max-height: 190px !important; margin: 6px 6px 0 !important;
}
html body.cg-store-enabled .product .image a img,
html body.cg-store-enabled .product .image img.img-responsive {
  width: auto !important; max-width: 88% !important; max-height: 165px !important; object-fit: contain;
}
html body.cg-store-enabled .product:hover .image a img { width: auto !important; }
html body.cg-store-enabled .product div.contentDescription { padding: 8px 10px 0 !important; }
html body.cg-store-enabled .product h4,
html body.cg-store-enabled .product h4 a,
html body.cg-store-enabled .product .titprod { margin: 2px 0 0 !important; font-size: 12.5px !important; line-height: 1.3 !important; }
html body.cg-store-enabled .product .precio-tachado-content { min-height: 16px !important; margin-top: 4px; }
html body.cg-store-enabled .product .precio-tachado { font-size: 12px !important; }
html body.cg-store-enabled .product .price,
html body.cg-store-enabled .product .price * { font-size: 19px !important; line-height: 1.2 !important; }
html body.cg-store-enabled .product .contentDescription > div.price + div,
html body.cg-store-enabled .product .contentDescription > div.price + div * { font-size: 12px !important; }
html body.cg-store-enabled .product .contentDescription > div.price + div { padding-bottom: 8px !important; margin-top: 1px; }
html body.cg-store-enabled .product .btn.btn-compra,
html body.cg-store-enabled .product:hover .btn.btn-compra,
html body.cg-store-enabled .product input.btn.btn-primary.btn-compra.compracantidad {
  height: 38px !important; min-height: 38px !important; padding: 0 8px !important; font-size: 12.5px !important;
}
@media (max-width: 767px) {
  html body.cg-store-enabled .product .image { height: 130px !important; min-height: 130px !important; max-height: 130px !important; margin: 5px 5px 0 !important; }
  html body.cg-store-enabled .product .image a img,
  html body.cg-store-enabled .product .image img.img-responsive { max-height: 112px !important; }
  html body.cg-store-enabled .product div.contentDescription { padding: 6px 8px 0 !important; }
  html body.cg-store-enabled .product .price,
  html body.cg-store-enabled .product .price * { font-size: 16px !important; }
  html body.cg-store-enabled .product .btn.btn-compra,
  html body.cg-store-enabled .product:hover .btn.btn-compra,
  html body.cg-store-enabled .product input.btn.btn-primary.btn-compra.compracantidad { height: 32px !important; min-height: 32px !important; font-size: 11.5px !important; }
}
/* [/CG-TARJETAS-CORTAS] */

/* ======================================================================
   17. [CG-BOTON-AGREGAR v1.0 · 2026-10] Botón "Agregar" de las tarjetas de producto
   Contorno fino y sobrio (antes: magenta relleno, ancho completo y letras espaciadas).
   Gris en reposo, magenta al pasar el mouse, con ícono de carrito. Solo las TARJETAS
   (.product): el botón grande de la ficha de producto sigue en magenta.
   Va al final y con :not(#cg-x) para ganarle a las reglas anteriores del botón.
   ====================================================================== */
html body .product .btn.btn-compra:not(#cg-x),
html body .product:hover .btn.btn-compra:not(#cg-x) {
  display: block !important; width: 100% !important;
  height: 38px !important; min-height: 38px !important; margin: 0 !important;
  padding: 0 0 0 24px !important;
  border: 1px solid #d5d8de !important; border-radius: 8px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316171c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-size: 16px 16px !important;
  background-position: calc(50% - 38px) 50% !important;
  color: #16171c !important; -webkit-text-fill-color: #16171c !important;
  font-family: 'Manrope', Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important; line-height: 36px !important;
  text-align: center !important; text-shadow: none !important; box-shadow: none !important;
  opacity: 1 !important; transform: none !important;
  transition: border-color .18s ease, color .18s ease !important;
}
html.dark body .product .btn.btn-compra:not(#cg-x),
html.dark body .product:hover .btn.btn-compra:not(#cg-x) {
  border-color: #3a3d46 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f3f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
  color: #f2f3f5 !important; -webkit-text-fill-color: #f2f3f5 !important;
}
html body .product .btn.btn-compra:not(#cg-x):hover,
html body .product .btn.btn-compra:not(#cg-x):focus-visible,
html.dark body .product .btn.btn-compra:not(#cg-x):hover,
html.dark body .product .btn.btn-compra:not(#cg-x):focus-visible {
  border-color: var(--cg-accent, #d23f86) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d23f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
  color: var(--cg-accent, #d23f86) !important; -webkit-text-fill-color: var(--cg-accent, #d23f86) !important;
  outline: none !important;
}
html body .product .btn.btn-compra:not(#cg-x):active { transform: scale(.98) !important; }
@media (max-width: 767px) {
  html body .product .btn.btn-compra:not(#cg-x),
  html body .product:hover .btn.btn-compra:not(#cg-x) {
    height: 34px !important; min-height: 34px !important; line-height: 32px !important;
    padding-left: 22px !important; font-size: 12.5px !important;
    background-size: 15px 15px !important; background-position: calc(50% - 35px) 50% !important;
  }
}
@media (prefers-reduced-motion: reduce) { html body .product .btn.btn-compra:not(#cg-x) { transition: none !important; } }
/* [/CG-BOTON-AGREGAR] */

/* ======================================================================
   18. BARRA DE ARRIBA (CG-PROMO v2.1)
   Antes estaba en la plantilla HEADER (bloque cg-promo-css).
   ====================================================================== */

	  /* [CG-PROMO v2.1] El azul de la barra vieja venía de estas 3 variables de cg-diseno.css, que también
	     pintan el fondo del header (Safari en iPhone usa ese color para la zona de la hora y la batería).
	     Se redefinen con el grafito de la barra: header, barra y zona de la hora quedan del mismo color. */
	  html body.cg-store-enabled { --cg-topbar-edge: #16171c; --cg-topbar-fill: #16171c; --cg-topbar-mid: #16171c; }
	  html body header.cg-site-header .cg-promo {
	    background: #16171c !important; background-image: none !important;
	    border: 0 !important; border-bottom: 1px solid #23242a !important; box-shadow: none !important;
	  }
	  html body header.cg-site-header .cg-promo .cg-promo-track { display: flex; align-items: center; justify-content: center; gap: 8px; }
	  html body header.cg-site-header .cg-promo .cg-promo-icon { display: none !important; }
	  html body header.cg-site-header .cg-promo #cg-promo-message {
	    font-family: 'Manrope', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 500 !important;
	    letter-spacing: .01em !important; text-transform: none !important; color: #c9cad1 !important;
	    transition: opacity .25s ease;
	  }
	  html body header.cg-site-header .cg-promo #cg-promo-message::before {
	    content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 1px 0; border-radius: 50%;
	    background: var(--cg-accent, #d23f86); vertical-align: middle;
	  }
	  html body header.cg-site-header .cg-promo #cg-promo-message.cg-promo-fuera { opacity: 0; }
	  @media (prefers-reduced-motion: reduce) { html body header.cg-site-header .cg-promo #cg-promo-message { transition: none; } }

/* ======================================================================
   19. SLIDER DE LA PORTADA (SLIDER2 v3.0, Splide)
   Antes estaba en la plantilla SLIDER2. Solo toca su seccion (#slides_ofertas).
   ====================================================================== */

    /* ==========================================
       SLIDER: caja, tamaño y bordes
    ========================================== */
    #slides_ofertas .splide { position: relative; visibility: visible !important; }
    #slides_ofertas .splide__track { overflow: hidden; isolation: isolate; border-radius: 16px; }
    #slides_ofertas .splide__list { margin: 0 !important; padding: 0 !important; }
    #slides_ofertas .splide__list > li {
        position: relative;
        overflow: hidden;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    #slides_ofertas .splide__list > li > a { display: block; position: relative; z-index: 1; }

    /* Antes de que arranque Splide: se ve solo el primer banner (sin saltos ni espera) */
    #slides_ofertas .splide:not(.is-initialized) .splide__list { display: flex; }
    #slides_ofertas .splide:not(.is-initialized) .splide__list > li { flex: 0 0 100%; width: 100%; }
    #slides_ofertas .splide:not(.is-initialized) .splide__list > li:not(:first-child) { display: none !important; }

    /* Computadora: tamaño fijo 10:3. La imagen se ve entera adentro. */
    #slides_ofertas .splide__list > li img {
        position: relative;
        z-index: 1;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        aspect-ratio: 10 / 3 !important;
        object-fit: contain !important;
    }
    /* Relleno: copia difuminada de la misma imagen, detrás, para los espacios que sobran */
    #slides_ofertas .cg-fondo {
        position: absolute;
        inset: -24px;
        z-index: 0;
        background-position: center;
        background-size: cover;
        filter: blur(22px) brightness(.9) saturate(1.1);
        pointer-events: none;
    }

    /* Computadora */
    @media (min-width: 768px) {
        html body.cg-store-enabled section#slides_ofertas.slider,
        html body section#slides_ofertas.slider {
            width: 100% !important;
            max-width: 1440px !important;
            margin: 16px auto 0 !important;
            padding: 0 var(--cg-margen, 20px) !important;
            box-sizing: border-box !important;
        }
        #slides_ofertas .splide__track { border-radius: 28px; }
    }

    /* Celular: más separado de la barra de arriba, tamaño fijo 16:9 */
    @media (max-width: 767px) {
        html body.cg-store-enabled section#slides_ofertas.slider,
        html body section#slides_ofertas.slider {
            width: 100% !important;
            margin: 18px 0 0 !important;
            padding: 0 var(--cg-margen, 16px) !important;
            box-sizing: border-box !important;
        }
        #slides_ofertas .splide__track { border-radius: 16px; }
        #slides_ofertas .splide__list > li img { aspect-ratio: 16 / 9 !important; }
    }

    /* ==========================================
       PUNTITOS DEBAJO DEL BANNER (estilo CompraGamer)
    ========================================== */
    #slides_ofertas .splide__pagination {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        width: max-content !important;
        max-width: 95% !important;
        margin: 10px auto 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
    }
    #slides_ofertas .splide__pagination li {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        line-height: 0 !important;
    }
    #slides_ofertas .splide__pagination__page {
        display: block !important;
        width: 9px !important;
        height: 9px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1.5px solid var(--cg-accent, #d23f86) !important;
        border-radius: 100px !important;
        background: transparent !important;
        box-sizing: border-box !important;
        opacity: .85 !important;
        cursor: pointer !important;
        transform: none !important;
        transition: width .25s ease, background .25s ease, opacity .25s ease !important;
    }
    #slides_ofertas .splide__pagination__page.is-active {
        width: 22px !important;
        background: var(--cg-accent, #d23f86) !important;
        opacity: 1 !important;
    }
    @media (hover: hover) {
        #slides_ofertas .splide__pagination__page:hover { background: var(--cg-accent, #d23f86) !important; opacity: 1 !important; }
    }
    #slides_ofertas .splide__pagination__page:focus-visible {
        outline: 2px solid var(--cg-accent, #d23f86) !important;
        outline-offset: 4px !important;
    }
    @media (max-width: 767px) {
        #slides_ofertas .splide__pagination { margin-top: 8px !important; gap: 6px !important; }
        #slides_ofertas .splide__pagination__page { width: 7px !important; height: 7px !important; }
        #slides_ofertas .splide__pagination__page.is-active { width: 18px !important; }
    }

/* ======================================================================
   20. CATEGORIAS DE LA HOME (BANNERS_HOME_1)
   Antes estaba en la plantilla BANNERS_HOME_1. Solo toca su seccion (#cg-categorias-home).
   ====================================================================== */

	/* ---------- Sección: mismo ancho y centrado que el slider ---------- */
	html body section#cg-categorias-home.spots_home_1 {
		width: 100% !important; max-width: 1440px !important; margin: 18px auto 0 !important;
		padding: 0 var(--cg-margen, 20px) !important; box-sizing: border-box !important;
	}
	html body section#cg-categorias-home .container,
	html body section#cg-categorias-home .row {
		display: block !important; float: none !important; width: 100% !important; max-width: none !important;
		min-width: 0 !important; margin: 0 !important; padding: 0 !important; flex: none !important;
	}
	/* ---------- Celular: 3 arriba y 2 centradas abajo, verticales 2:3 ---------- */
	html body section#cg-categorias-home .row.cg-spots {
		display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px !important;
		width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
	}
	html body section#cg-categorias-home .row.cg-spots::before,
	html body section#cg-categorias-home .row.cg-spots::after { display: none !important; content: none !important; }
	html body section#cg-categorias-home .row.cg-spots div[class*="spot"] {
		float: none !important; width: auto !important; max-width: none !important; flex: none !important;
		margin: 0 !important; padding: 0 !important;
	}
	html body section#cg-categorias-home .row.cg-spots div[class*="spot"] { grid-column: span 2 !important; }
	html body section#cg-categorias-home .row.cg-spots:not(:has(.spot6)) div.spot4 { grid-column: 2 / span 2 !important; }
	html body section#cg-categorias-home .row.cg-spots :is(.spot7, .spot8) { display: none !important; }
	/* ---------- Recuadro fijo: bordes redondeados, imagen entera + relleno difuminado ---------- */
	html body section#cg-categorias-home .row.cg-spots a {
		position: relative !important; display: block !important; overflow: hidden !important;
		border-radius: 10px !important; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black);
		border: 1px solid rgba(255,255,255,.07); box-sizing: border-box;
	}
	html body section#cg-categorias-home .row.cg-spots img {
		position: relative; z-index: 1; display: block !important;
		width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important;
		margin: 0 !important; border-radius: 0 !important;
		aspect-ratio: 2 / 3 !important; object-fit: contain !important; transition: transform .25s ease;
	}
	html body section#cg-categorias-home .cg-fondo {
		position: absolute; inset: -20px; z-index: 0; pointer-events: none;
		background-position: center; background-size: cover; filter: blur(18px) brightness(.9) saturate(1.1);
	}
	/* ---------- Título (solo si hay tarjetas) ---------- */
	html body section#cg-categorias-home .cg-tit-tarjetas { grid-column: 1 / -1 !important; order: -1; display: none; margin: 0 !important; padding: 0 0 4px !important; }
	html body section#cg-categorias-home:has(:is(.spot1, .spot2, .spot3, .spot4, .spot5, .spot6):not([style*="none"])) .cg-tit-tarjetas { display: block; }
	html body section#cg-categorias-home .cg-tit-kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
	@media (max-width: 767px) {
		html body section#cg-categorias-home.spots_home_1 { padding: 0 var(--cg-margen, 16px) !important; margin-top: 14px !important; }
		/* Celular: una sola fila deslizable, 3 tarjetas a la vista */
		html body section#cg-categorias-home .row.cg-spots {
			display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important;
			scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
			scrollbar-width: none; gap: 8px !important;
		}
		html body section#cg-categorias-home .row.cg-spots::-webkit-scrollbar { display: none; }
		html body section#cg-categorias-home .row.cg-spots div[class*="spot"],
		html body section#cg-categorias-home .row.cg-spots:not(:has(.spot6)) div.spot4 {
			flex: 0 0 calc((100% - 16px) / 3) !important; width: calc((100% - 16px) / 3) !important;
			grid-column: auto !important; scroll-snap-align: start;
		}
		/* Flechitas */
		html body section#cg-categorias-home .cg-carril { position: relative; }
		html body section#cg-categorias-home .cg-flecha {
			position: static; width: 30px; height: 30px; padding: 0;
			display: flex; align-items: center; justify-content: center; border-radius: 50%;
			border: 1px solid rgba(255,255,255,.18); background: rgba(18,19,23,.78); color: #fff;
			box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; transition: opacity .2s ease;
			-webkit-tap-highlight-color: transparent;
		}
		html:not(.dark) body section#cg-categorias-home .cg-flecha { background: rgba(255,255,255,.92); color: #181a27; border-color: rgba(0,0,0,.1); }
		html body section#cg-categorias-home .cg-flecha svg { width: 14px; height: 14px; }
		html body section#cg-categorias-home .cg-flecha[disabled] { opacity: .3; pointer-events: none; }
	}
	/* En la computadora no hay flechitas */
	@media (min-width: 768px) { html body section#cg-categorias-home .cg-flecha { display: none !important; } }
	/* Encabezado: título a la izquierda; "Ver todas" (y en el celular, las flechitas) a la derecha */
	html body section#cg-categorias-home .cg-tit-tarjetas { margin: 0 0 12px !important; }
	html body section#cg-categorias-home:has(:is(.spot1, .spot2, .spot3, .spot4, .spot5, .spot6):not([style*="none"])) .cg-tit-tarjetas {
		display: flex !important; align-items: flex-end; justify-content: space-between; gap: 12px;
	}
	html body section#cg-categorias-home .cg-tit-der { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
	html body section#cg-categorias-home .cg-flechas { display: none; gap: 8px; }
	@media (max-width: 767px) {
		html body section#cg-categorias-home .cg-flechas { display: flex; }
		html body section#cg-categorias-home a.cg-ver-todas {
			padding: 0 !important; border: 0 !important; background: none !important; min-height: 0 !important;
			font-size: 12px !important; font-weight: 700 !important; letter-spacing: .02em; color: var(--cg-accent, #d23f86) !important;
			text-transform: none !important; white-space: nowrap;
		}
		html body section#cg-categorias-home .cg-tit-tarjetas .sec-title { font-size: 18px !important; line-height: 1.15 !important; }
	}
	/* ---------- Computadora: una fila de 5 tarjetas verticales 2:3 ---------- */
	@media (min-width: 768px) {
		html body section#cg-categorias-home .row.cg-spots { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; }
		html body section#cg-categorias-home .row.cg-spots:has(.spot6) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
		html body section#cg-categorias-home .row.cg-spots div[class*="spot"],
		html body section#cg-categorias-home .row.cg-spots div.spot4,
		html body section#cg-categorias-home .row.cg-spots:not(:has(.spot6)) div.spot4 { grid-column: auto !important; }
		html body section#cg-categorias-home .row.cg-spots img { aspect-ratio: 2 / 3 !important; }
		html body section#cg-categorias-home .row.cg-spots a { border-radius: 14px !important; transition: transform .2s ease, box-shadow .2s ease; }
		html body section#cg-categorias-home .cg-tit-kicker { font-size: 12px; }
	}
	@media (min-width: 768px) and (hover: hover) {
		html body section#cg-categorias-home .row.cg-spots a:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(210, 63, 134, .35); }
	}

/* ======================================================================
   21. HOME (beneficios, encabezados, boton "Ver todas", carruseles)
   Antes estaba en la plantilla de la home. Cada regla lleva html.cg-home: SOLO se aplica en la pagina
   principal (la marca la pone HEADER_CSS_JS). Version compacta (una regla por linea).
   ====================================================================== */

@media (max-width:360px){html.cg-home .flexslider .slides img{max-height:142px}}
@media (max-width:400px){html.cg-home .flexslider .slides img{max-height:157px}}
@media (max-width:450px){html.cg-home .flexslider .slides img{max-height:177px}}
@media (min-width:768px){html.cg-home .slider .flexslider .flex-viewport{max-height:57vh!important}html.cg-home .slider.slider2 .flexslider .flex-viewport{max-height:22.5vh!important}html.cg-home body #slides_ofertas{margin-top:122px!important}}
@media (min-width:2560px){html.cg-home .slider.slider2 .flexslider .flex-viewport{max-height:12.5vh!important}}
html.cg-home section#bajoSlider div.container{margin-top:0;margin-bottom:0}
@media (min-width:768px){html.cg-home #bajoSlider .container.row{display:flex;align-items:center;flex-wrap:wrap;margin-left:auto!important;margin-right:auto!important}html.cg-home #bajoSlider .container.row>.col-md-3{min-width:0}html.cg-home #bajoSlider .container.row>.col-md-3>.p-3{display:flex;align-items:center;min-height:62px;padding:9px 7px!important;gap:6px}html.cg-home #bajoSlider .container.row .cg-ben-ico{flex:0 0 22px;width:22px!important;height:22px!important;margin-right:6px!important}html.cg-home #bajoSlider .container.row .p-3>div{min-width:0}html.cg-home #bajoSlider .col-md-3 b{color:#353540!important;font-size:12px!important;font-weight:800!important;line-height:1.35!important}html.cg-home #bajoSlider .cg-beneficio-sub{color:#454551!important;font-size:11.5px!important;font-weight:600!important;line-height:1.35!important}}
html.cg-home body #bajoSlider .cg-ben-ico{display:block;flex:0 0 22px;width:22px;height:22px;color:var(--cg-accent,#d23f86)}
@media (orientation:landscape) and (max-height:500px){html.cg-home body #bajoSlider .cg-ben-ico{flex-basis:18px;width:18px!important;height:18px!important;margin-right:0!important}}
html.cg-home.dark #bajoSlider b,html.cg-home body.dark #bajoSlider b,html.cg-home.dark-mode #bajoSlider b,html.cg-home body.dark-mode #bajoSlider b,html.cg-home[data-theme="dark"] #bajoSlider b,html.cg-home body[data-theme="dark"] #bajoSlider b,html.cg-home[data-bs-theme="dark"] #bajoSlider b,html.cg-home body[data-bs-theme="dark"] #bajoSlider b{color:#ffffff!important}
html.cg-home.dark #bajoSlider .cg-beneficio-sub,html.cg-home body.dark #bajoSlider .cg-beneficio-sub,html.cg-home.dark-mode #bajoSlider .cg-beneficio-sub,html.cg-home body.dark-mode #bajoSlider .cg-beneficio-sub,html.cg-home[data-theme="dark"] #bajoSlider .cg-beneficio-sub,html.cg-home body[data-theme="dark"] #bajoSlider .cg-beneficio-sub,html.cg-home[data-bs-theme="dark"] #bajoSlider .cg-beneficio-sub,html.cg-home body[data-bs-theme="dark"] #bajoSlider .cg-beneficio-sub{color:#dddded!important}
html.cg-home body #bajoSlider,html.cg-home body #bajoSlider b,html.cg-home body #bajoSlider .cg-beneficio-sub{font-family:'Manrope',system-ui,sans-serif!important}
html.cg-home body .sec-hd{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:12px!important;margin:0 0 14px!important;padding:0!important;border:0!important}
html.cg-home body .sec-hd .sec-hd-left{display:block!important;min-width:0;padding:0!important;border:0!important}
html.cg-home body .sec-hd .sec-accent{display:none!important}
html.cg-home body .sec-hd .cg-tit-kicker{display:block!important;margin:0 0 6px!important;font-family:'Manrope',system-ui,sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--cg-accent,#d23f86)!important;-webkit-text-fill-color:var(--cg-accent,#d23f86)!important;opacity:1!important}
html.cg-home body .sec-hd .sec-title{margin:0!important;padding:0!important;font-family:'Manrope',system-ui,sans-serif!important;font-size:24px!important;font-weight:800!important;line-height:1.15!important;letter-spacing:-.02em!important;text-transform:none!important;color:#111318!important;-webkit-text-fill-color:#111318!important;background:none!important}
html.cg-home.dark body .sec-hd .sec-title{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
html.cg-home body section#cg-categorias-home .cg-tit-tarjetas{flex-direction:column!important;align-items:flex-start!important}
html.cg-home body section#cg-categorias-home .cg-tit-der{width:100%!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
html.cg-home body section#cg-categorias-home .cg-tit-tarjetas .sec-title{font-size:24px!important}
html.cg-home body .cg-home-section-subtitle{display:none!important}
html.cg-home body section#novedades_home .owl-carousel,html.cg-home body section#ofertas_home .owl-carousel{display:flex!important;flex-wrap:nowrap!important;gap:12px;width:100%!important;max-width:none!important;margin:0!important;padding:4px 1px 16px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
html.cg-home body section#novedades_home .owl-carousel::-webkit-scrollbar,html.cg-home body section#ofertas_home .owl-carousel::-webkit-scrollbar{display:none}
html.cg-home body section#novedades_home .owl-carousel::before,html.cg-home body section#novedades_home .owl-carousel::after,html.cg-home body section#ofertas_home .owl-carousel::before,html.cg-home body section#ofertas_home .owl-carousel::after{display:none!important;content:none!important}
html.cg-home body section#novedades_home .owl-carousel>*,html.cg-home body section#ofertas_home .owl-carousel>*{flex:0 0 calc((100% - 48px) / 5)!important;width:auto!important;max-width:none!important;float:none!important;margin:0!important;padding:0!important;scroll-snap-align:start}
@media (max-width:999px){html.cg-home body section#novedades_home .owl-carousel>*,html.cg-home body section#ofertas_home .owl-carousel>*{flex-basis:calc((100% - 24px) / 3)!important}}
@media (max-width:767px){html.cg-home body section#novedades_home .owl-carousel,html.cg-home body section#ofertas_home .owl-carousel{gap:8px}html.cg-home body section#novedades_home .owl-carousel>*,html.cg-home body section#ofertas_home .owl-carousel>*{flex-basis:calc((100% - 8px) / 2)!important}}
html.cg-home body .cg-car{position:relative}
html.cg-home body .cg-car-flecha{position:absolute;top:calc(50% - 28px);z-index:5;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(22,23,28,.88);color:#ffffff;box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer;transition:opacity .2s ease, border-color .2s ease, color .2s ease;-webkit-tap-highlight-color:transparent}
html.cg-home:not(.dark) body .cg-car-flecha{background:rgba(255,255,255,.95);color:#16171c;border-color:#e3e4e9;box-shadow:0 4px 14px rgba(0,0,0,.12)}
html.cg-home body .cg-car-flecha:hover,html.cg-home body .cg-car-flecha:focus-visible{border-color:var(--cg-accent,#d23f86);color:var(--cg-accent,#d23f86);outline:none}
html.cg-home body .cg-car-flecha svg{width:16px;height:16px}
html.cg-home body .cg-car-izq{left:-14px}
html.cg-home body .cg-car-der{right:-14px}
html.cg-home body .cg-car-flecha[disabled]{opacity:0;pointer-events:none}
@media (max-width:767px),(hover:none){html.cg-home body .cg-car-flecha{display:none!important}}
@media (prefers-reduced-motion:reduce){html.cg-home body section#novedades_home .owl-carousel,html.cg-home body section#ofertas_home .owl-carousel{scroll-behavior:auto}}
@media (max-width:767px){html.cg-home #bajoSlider{display:none!important}html.cg-home body .sec-hd{gap:10px!important;margin-bottom:12px!important}html.cg-home body .sec-hd .sec-title,html.cg-home body section#cg-categorias-home .cg-tit-tarjetas .sec-title{font-size:20px!important}html.cg-home body .sec-hd .cg-tit-kicker{font-size:10.5px!important;margin-bottom:5px!important}}
html.cg-home body a.cg-ver-todas,html.cg-home body section#cg-categorias-home a.cg-ver-todas{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px;height:40px!important;min-height:0!important;padding:0 18px!important;margin:0!important;border:0!important;border-radius:10px!important;background:var(--cg-accent,#d23f86)!important;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;font-family:'Manrope',system-ui,sans-serif!important;font-size:14px!important;font-weight:700!important;letter-spacing:0!important;line-height:1!important;text-transform:none!important;text-decoration:none!important;white-space:nowrap!important;box-shadow:0 6px 16px -8px rgba(210,63,134,.7)!important;cursor:pointer;transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
html.cg-home body a.cg-ver-todas *{color:inherit!important;-webkit-text-fill-color:inherit!important;text-decoration:none!important}
html.cg-home body a.cg-ver-todas:hover,html.cg-home body a.cg-ver-todas:focus-visible{background:var(--cg-accent-hover,#b02f6d)!important;transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(210,63,134,.8)!important;outline:none}
html.cg-home body a.cg-ver-todas:active{transform:translateY(0)}
@media (max-width:767px){html.cg-home body a.cg-ver-todas,html.cg-home body section#cg-categorias-home a.cg-ver-todas{height:38px!important;padding:0 16px!important;font-size:13.5px!important}}

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