@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Playfair+Display:wght@700&display=swap');

/* Importar los iconos de Material Design de Google */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Definir el estilo para usar los iconos */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'Montserrat', sans-serif; box-sizing: border-box}
a{ text-decoration:none; transition:.2s; display:block}

img{ border:0}
body{ /*background-image:linear-gradient(to top, #fff 80%, #a8e6ff 88%, var(--color1) 97%);*/
background-color:#eee}
body,ul{margin:0; padding:0}
li{list-style:none}

:root {
	--color1: #B3244C;
	--color2: #cd5375;
	--color3: #B3244C;
	--color4: #911D3D;
	--colorLight1: #DD8AA1;
}

.ui-helper-hidden-accessible { display:none; }

input, select, textarea{border-radius:5px; outline:none; border:solid 1px transparent; box-shadow:0 0 3px 1px rgba(0,0,0,.2); padding:10px 5px; color:black !important;}
option{color:black !important; margin:7px 0;}
textarea{ height:auto !important; resize:vertical;}
input[type="checkbox"]{ border:none; box-shadow:none; display: inline-block !important; width: auto !important;  }
input[type="button"],input[type="submit"]{ background-color: var(--color1); color:white !important; border:none; padding:11px 30px}
*::selection{background-color:var(--colorLight1); color:white}
input:focus, select:focus, textarea:focus{ background-color:#fff; border-color: var(--color1);  }

input[type="button"]:focus,input[type="submit"]:focus, input[type="button"]:hover,input[type="submit"]:hover{background-color:var(--color2);}
input[type="button"]:active,input[type="submit"]:active{background-color:var(--color3); box-shadow:0 0 2px 2px rgba(0,0,0,.2)}

.clear{ clear:both}
.clearMovil{ clear:none}


footer *{color: white; }

.Footer-Estilo-f0{
    background-color: #0b0e13;
    color: #fff;
}


.colSe {
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    width: 20%;
    float: left;
    min-height: 1px;
}

.grilla.LayoutFooterFinal {
    padding-top: 20px;
    padding-bottom: 2px;
}

.colSe_1_2 {width: 50%}

.estructura p{
    margin: 0 0 0.75em;
    line-height: 1.5;

}
.estructura {
    width: 100%;
    max-width: 75em;
    margin: 0 auto;
}

.estructura:before, .estructura:after {
    content: " ";
    display: table;
}

.estructura:after {
    clear: both;
}


.cintaTop{width: 100%; font-size: 14px; padding: 7px 0; background-color: black; border-bottom: solid 1px #000;}
.cintaTop a{text-decoration: none; display: inline-block; color: #fff; transition: .3s}
.cintaTop b{margin: 0 10px; color: #fff; }
.cintaTopLeft{ width:50%; text-align:center; color: #fff; }
.cintaTopRight{width:50%; text-align: right;
    padding-right: 30px;	}
.cintaTopRight a{margin: 0 5px; }



.banner_ofertas_head{ width:25%; float:left; height:70px; }
.banner_ofertas_head img{ max-width:90%; margin:0 5%; height:70px; padding:7px 0}

.mailRegistrado{position: relative; cursor: pointer; margin-right: 27px; min-width: 300px; }
.mailRegistrado #btnMenu{position: relative; border: solid 1px #888;
    border-radius: 18px; }
.mailRegistrado #btnMenu img{position: absolute; top: 11px; right: -13px; transform: rotate(90deg); transition: .3s; }
.flechaMiCuenta{transform: rotate(-90deg) !important; }
#menuMiCuenta{position: absolute; top: 33px; right: -10px; z-index: 45454545 !important; 
	width: auto;
	border-radius: 12px;
	background-color: #dfdfdf;
}

.itemMenuMiCuenta a{width: 100%; background-color: var(--colorLight1); color: #333; padding: 15px 0; text-align: center; border-bottom: solid 1px #ccc; font-size: 14px; display: block; border-radius: 0; }
.itemMenuMiCuenta a:hover{background-color: var(--color1); color: white; }

#fondoBlanco{ width:100%; height:100%; position:fixed; background-color:rgba(0,0,0,.2); display:none; top:0; left:0; z-index:45454542 !important; }


#menu_movil{ display:none}
#menu_resp{ display:none}

.menu{ display:block; background-color:black; font-size:0px; width:100%; box-shadow:0 2px 4px 2px rgba(0,0,0,.3); }
.menu>nav>ul{ text-align: center; }
.menu>nav>ul>li{ display:inline-block; font-size:12px; white-space:normal; position:relative;}
.menu>nav>ul>li>a{padding: 14px 8px 12px 8px; display:block; border-bottom:solid 3px transparent; color:white}

.menu>nav>ul>li:hover{background-color: #851333; }

.menu>nav>ul>li:hover > ul{ display: flex;
    flex-direction: column; min-width: 180px; }
.menu_selected{border-bottom:solid 3px white !important; background-color: rgba(204, 138, 3, 0.73);}
.menu_selected:hover{}

.submenu{ display:none; font-size:0px; position:absolute; top:45px; left:0; z-index:3000; padding-top:0px; margin-top: -1px; }
.submenu .triang{width:0; height:0; border-style: solid; border-width: 0 15px 15px 15px;  border-color: transparent transparent var(--color1) transparent; top:0px; right:0; left:20px; position:absolute; z-index:4002; display: none; }
.submenu>li{ font-size:14px; white-space:normal; background-color:var(--color1); }
.submenu>li>a{color: white;
    padding: 12px 26px;
    white-space: nowrap; }
.submenu>li>a:hover{background-color:black; color:#fff;}


.cart{position:relative; padding-left:50px !important; background-color:#000; color: white !important;}
.cart *{color:white}
.cart:hover{box-shadow:0 3px 5px 3px rgba(0,0,0,.3); background-color:#000 !important;}
.cart img{vertical-align:bottom; width:25px; position:absolute; left:16px; top:11px}

.productos{display:block; width:80%; margin:30px 10%; padding:4px; background-color:transparent; }

.item_producto{ float:left; height: 440px; width:30.33%; margin:20px 1.5%; padding: 5px 15px; position:relative; background-color:#fff; transition:none; box-shadow: 0 0 5px 3px rgba(0,0,0,.2);}
.item_producto:hover{box-shadow:0 25px 20px 18px rgba(0,0,0,.16), 0 -1px 18px 6px rgba(0,0,0,.1); background-color:#efefef}



.item_producto h2{font-size:15px; min-height:50px; max-height:50px; overflow:hidden; margin-top: 10px; margin-bottom: 10px; text-align: left; font-weight: normal;}

.item_producto .nombreProd{font-size:15px; min-height:50px; max-height:60px; overflow:hidden; margin-top: 10px; margin-bottom: 10px; text-align: left; font-weight: normal; display: none}

.item_producto .divPrecioViejo{display: block; text-align: left; padding-top: 20px;}
.item_producto .divPrecioViejo span{margin-left: 10px; color:#00a650; font-weight: normal; display: inline-block; font-size: 16px;}

.item_producto .divImgIndex{width: 100%; height: 231px; border-bottom: 1px solid #ccc; background-color: white }
.item_producto img{ width:100%; margin:0; height:230px; object-fit:contain}
.item_producto p{font-size:14px; width:90%; margin:-10px 5% 0 5%; min-height:50px; max-height:50px; overflow:hidden; text-align:justify;}
.item_producto h1{font-size:22px; display:block; text-align: left}
.item_producto h1 span{margin-left: 10px; color:#00a650; font-weight: normal; font-size: 15px; display: none}
.item_producto i{font-size:15px; font-style:normal; display:inline-block; position:relative;}
.item_producto i::after{content:''; position:absolute; top:55%; left:0; right:0; border-bottom:1px solid #9E9E9E}
.item_producto b{font-size:18px; display:block; margin:0; margin-top:-15px; min-height:45px !important;}

.item_producto .aviso_descuento{position: absolute; top: 10px; left: 10px; width: max-content; border-radius: 7px; padding:6px 8px; background-color: var(--colorDark); color: white; font-size: 13px; }

.trapecio{width:140px; position:absolute; height:0px; border-right:30px solid transparent; border-left:30px solid transparent; border-bottom:30px solid #388E3C; transform:rotate(-45deg); line-height:30px; top:24px; left:-32px; z-index:1000; color:white}

.sinStock{position: absolute; top: 185px; width: 90%; margin-left: 5%; left:0; background-color: #fab901; padding: 3px}
.sinStock span{display: inline-block; font-size: 13px; width: 100%; background-color: transparent; border:solid 2px black; border-radius: 5px; font-weight: bold; padding: 10px 5px;}

.envioGratis{text-align: left; display: block}
.envioGratis span{display: inline-block; font-size: 16px; background-color: transparent; border:none; border-radius: 5px; font-weight: normal; padding: 0px 5px; color: #00a650; }
.envioGratis span img{vertical-align: middle; width: 23px; height: 23px; margin:0 5px 0 0}

.descuento2{position: absolute; top: 7px; right: 7px; background-color: var(--color1); padding: 1px; display: none;}
.descuento2 span{display: inline-block; font-size: 15px; background-color: #000; border: solid 2px var(--color1); border-radius: 5px; font-weight: bolder; padding: 5px 17px; color: var(--color1); min-height: 27px;}
.descuento2 span img{vertical-align: middle; width: 23px; height: 23px; margin:0 5px 0 0}


.item_producto .new{ position:absolute; z-index:10; right:5px; top:5px; height:50px; width:50px; background-color:var(--color1); font-size:12px; line-height:52px; border-radius:100%; box-shadow:2px 2px 4px 2px rgba(0,0,0,.4); transform:rotate(-15deg); color:black}

.item_producto .add_cart{ background-color:var(--color1); font-size:14px; width:100%; margin:8px 0; border-radius:5px; padding:13px 20px; text-transform:uppercase; user-select:none; display:block; color:black}

.pasos_compra{ width:100%; display:none;}
.pasos_compra img{ width:100%; height:auto}

.footer1 a:hover{ text-decoration:underline}
.footer1{line-height:30px; padding-bottom:50px}
.footer1 h2{ text-decoration:underline; font-size:20px; font-weight:normal;}

.footer_contacto{ width:30%; margin-left:15%; float:left}
.footer_contacto img{ width:22px; vertical-align:text-bottom; margin-right:10px}
.footer_contacto>div{ text-align:left; padding-left:30px; }
.footer_contacto div a{ display:inline-block}


.banner1{background-color: #222; padding: 60px 30px; padding-top: 85px;}
.sectionBanner1{float: left; margin:0 2%; position: relative; background-color: #000; width: 29.33%; padding:40px 70px; border-radius: 10px; font-size: 24px;}
.contIconBanner1{position: absolute; background-color: var(--color1); width: 50px; height: 50px; border-radius: 100%; top: -25px; left: 50%; margin-left: -25px;}
.contIconBanner1 img{position: absolute; width: 30px; top: 10px; left:10px}
.textoBanner1{text-align: center; color:white}


.footer_susc{background-color:var(--color1); padding: 20px 0;}
.footer_susc h1{font-size:22px; font-weight:bolder; text-align: right; margin: 0; display: inline-block; padding-right: 20px; padding-top: 5px;}
.footer_susc h1 img{width: 30px; vertical-align: middle; margin-right: 7px;}
.footer_susc h1 span{font-size:18px; font-weight:normal; }
.footer_susc form{text-align: left; display: inline-block;}
.footer_susc input[type="email"]{width:300px}
.footer_susc input[type="submit"]{background-color: black !important; color: white !important}
.footer_categorias{ width:20%; float:left}

.footer_perfil{ width:20%; margin-right:15%; float:left}
.footer_perfil a{ cursor:pointer}

.footer2{ padding:25px 0; color:white !important}




/*----------------------------- DETALLE PRODUCTO FULL -----------------------*/

.item_producto_full{ width:90%; margin:30px 5% ; padding:40px 20px; background-color:white; box-shadow:0 0 6px 2px rgba(0,0,0,.1)}

.item_producto_full .submenu_prod_full{ width:40%; padding:10px; text-align:left; margin-top:20px; padding-left:20px; float:left}
.item_producto_full .submenu_prod_full a{ padding:5px 12px; margin:3px; display:inline-block; font-size:17px; border-radius:8px; background-color:var(--color1); color:white !important}
.item_producto_full .submenu_prod_full a:hover{ text-decoration:underline; }
.item_producto_full .share{ width:100%; text-align: left; float:none; padding: 40px 0; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; margin-top: 60px; }
.item_producto_full .share span{ padding:5px 0; margin:3px 0; display:inline-block; font-size:17px; font-weight:bolder; padding-right:15px}
.item_producto_full .share a{display:inline-block; margin:0 10px; width: 40px; height: 40px;}
.item_producto_full .share a img{ width:40px; padding:5px; transition:all .2s ease; margin:0; vertical-align:text-bottom; margin-bottom:-10px; user-select:none; }
.item_producto_full .share a img:hover{ width:40px; padding:0; }

.item_producto_full .share #favorito{cursor:pointer;}
.item_producto_full .share .imgFav {padding:0 !important; filter: grayscale(0%) !important}
.item_producto_full .share .separador{border-left:solid 2px darkmagenta; margin:auto 7px}

.item_producto_full .datos_producto{width:35%; margin:0; float: right;}

.item_producto_full h2{font-size:27px; font-weight: normal; width:90%; margin:0; margin-bottom:10px; float: left; text-align: left; line-height: 1; }
.item_producto_full .imgs_prod{ width:65%; float:left; padding-right:20px}
.item_producto_full .imgs_prod>img{ width:85%; height:400px; object-fit:contain; margin:0; border:1px solid #ddd}
.item_producto_full .imgs_prod>img:hover{cursor:zoom-in}
.item_producto_full .mas_imgs{ width:13%; margin:0; float:left}
.item_producto_full .mas_imgs>.divImg{ width:98%; height: 70px; margin:3px 2% 0 0; border:solid 1px #ddd; cursor:pointer}
.item_producto_full .mas_imgs>.divImg>img{ width:100%; height: 68px; object-fit:cover; }
.item_producto_full p{font-size: 20px; margin: 0; margin-top: 30px; margin-left: 5%; width: 90%; padding: 10px; text-align: left; font-weight: lighter; line-height: 1.5; word-break: break-word;}

.item_producto_full h1{font-size:40px; margin:0; margin-top: -5px; font-weight: lighter; float: left}

.item_producto_full .descuentoProductoFull{margin-left: 10px; color:#00a650; font-weight: normal; display: inline-block; font-size: 20px; position: relative; top: -5px; left: 10px;}

.item_producto_full b{font-size:18px; display:block; margin:0; margin-top:-10px; margin-bottom:15px; }

.item_producto_full .flags{height:40px; width:100%; padding-top:10px;}
.item_producto_full .descuento{display:inline-block; color:black !important; margin:0 25px 0 10px; vertical-align:central; font-size:17px; font-weight:bolder; padding:4px 13px; border-radius:7px; border:solid 2px var(--color1); background-color: var(--color1)}

.item_producto_full .new{height:30px; width:90px; background-color:var(--color1); font-size:14px; line-height:30px; border-radius:7px; display:inline-block; color:black; margin-left:10px; vertical-align:text-bottom}

.item_producto_full #form_prod{text-align: left; margin-top: 2px;}

.item_producto_full .add_cart{
	background-color: var(--color3);
    font-size: 14px;
    width: 65%;
    margin: 30px 0;
    border-radius: 15px;
    padding: 14px 0;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    display: block;
    border: none;
    outline: none;
    color: #fff;
}
.item_producto_full .add_cart:hover{background-color:var(--color4)}
.item_producto_full .add_cart:active{background-color:var(--color4); box-shadow:0 2px 4px 2px rgba(0,0,0,.4)}
.item_producto_full input{ width:90px; font-size:18px; text-align:center; border: solid 1px #ddd; box-shadow: 0 0 6px 1px rgba(0,0,0,.1);}

.variantes{display:block; margin:20px 0 10px 0; padding:18px 0px; border-radius:10px; }
.itemVariantes{float:left; width:106px; height:106px; position:relative; border:solid 3px transparent; margin:0 2px 20px 2px; cursor:pointer; border-radius: 20px; transition: .3s; transform: scale(.8);}
.contImgVariante{width:100px; height: 100px;}
.contImgVariante img{width:100px; height: 100px; object-fit: contain; border-radius: 20px;  }
.colorVarianteProd{width: 100%; height: 100%; border-radius: 18px; padding: 0px;}

.selectedVariante{ border:solid 3px var(--color3); transform: scale(1); z-index: 100}
.itemVariantes .nombre_variante{width:100%; height:15px; border-radius:5px 5px 0 0; font-size:12px; letter-spacing:normal; position:absolute; bottom:-20px; left:0; color:black !important}


.ratingActual{ display:block; font-size:0px; margin-top:15px; position:relative; text-align:left; padding-left:20px; float:left; width:25%;}
.ratingActual span{font-size:50px; color:darkgoldenrod; margin-right:10px; font-weight: 300}
.ratingActual div{font-size:14px; display: inline-block; margin-left:-90px; font-weight: 400; letter-spacing: normal !important}
.ratingActual .star{ display:inline-block; opacity:.3; width:18px; vertical-align:top; margin-top: 10px}
.ratingActual .starMark{ opacity:1 !important}
.ratingActual b{padding: 5px 10px; margin: 0; position: absolute; bottom: 10px; right: 10px; font-size:18px; cursor: pointer; color:darkgoldenrod;}
.ratingActual b:hover{  text-decoration: underline}



.rating{font-size:0px; padding:20px 0 20px 0; position: relative; float:left; width: 25%;}
.rating span{ display:inline-block; font-size:16px; padding-top:5px; padding-right:10px; }
.rating .star{ display:inline-block; width:30px; cursor:pointer; transition:.2s; vertical-align:top; }
.rating .starSelected{}
.rating em{ font-size: 14px; display:block; font-style: normal; margin-top:7px; font-weight: 400; letter-spacing: normal !important}

.productoFavorito{text-align: right; margin-bottom: 20px; float: left; width: 10%}

.productoFavorito img{ cursor: pointer; width: 30px; margin-right: 0px; margin-top: -19px;}




.selectorVar{border-radius: 10px; padding: 10px; color: #444; font-weight: bold; text-align: center; position: relative; border:solid 1px #ccc; cursor: pointer; user-select: none; background-color: #ffe2e2; transition: .3s; z-index: 100; }
.selectorVarAbierto{border-radius: 10px 10px 0 0; border-bottom: none; }
#imgSelectorVar{position: absolute; right: 10px; top: 8px; transform: rotate(90deg); width: 26px; height: 26px; transition: .15s; }
.flechaGirada{transform: rotate(-90deg) !important; }

.listaVar{border-radius: 5px; border: 1px #E0E0E0 solid; max-height: 330px; overflow-y: scroll; display: none; margin-top: -10px; padding-top: 10px; border-top: none; }


.listaVar::-webkit-scrollbar{width: 5px; background-color: #F5F5F5;}
.listaVar::-webkit-scrollbar-track{background-color: #F5F5F5;}
.listaVar::-webkit-scrollbar-thumb{background-color: #D9D9D9; }


.itemListaVar{padding: 9px; border-bottom: 1px #E0E0E0 solid; position: relative; }
.itemListaVar:last-child{border-bottom: none; }
.picItemVar{width: 9%; height: 31px; float: left; border-radius: 4px; }
.picItemVar img{width: 100%; height: 100%; object-fit: contain; }
.nombreItemVar{float:left; font-size: 15px; font-weight: bold; width: 55%; padding: 5px; padding-top: 0; text-align: left; margin-top: -4px; }
.precioItemVar{position: absolute; left: 13%; top: 24px; font-size: 14px; }
.menosItemVar{float:left; font-weight: bold; background-color: #F5F3DE; text-align: center; width: 10%; padding: 4px 0; cursor: pointer; user-select: none; }
.cantItemVar{float:left; font-weight: bold; text-align: center; width: 16% !important; padding: 2px 0; user-select: none; border: solid 1px #efefef !important; box-shadow: none !important; border-radius: 0;  }
.masItemVar{float:left; font-weight: bold; background-color: #F5F3DE; text-align: center; width: 10%; padding: 4px 0; cursor: pointer; user-select: none; }

.cantItemVar::-webkit-outer-spin-button,
.cantItemVar::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.cantItemVar{-moz-appearance: textfield;}

/*----------------------------- ***FINAL*** ---  DETALLE PRODUCTO FULL -----------------------*/



.nombres_cat{ width:90%; margin:0 5%; padding-top:35px; font-size:22px; text-align:center; color:var(--color1); display:none}


.banner_ofertas{ width:100%; display:block; padding:15px 0; font-size:60px; background-color:orangered}

.toast{color:white; padding:20px 40px; display:none; position:fixed; top:70px; box-shadow:0 5px 10px 5px rgba(0,0,0,.4); border-radius:20px; width:400px; left:50%; margin-left:-200px; z-index:10000; text-align: center; }

.carrito{width:94%; margin:30px 3%; padding:30px 30px; text-align:center; background-color: #f7f7f7; border-radius: 20px; box-shadow: 0 5px 7px 3px #ccc;}


.titulo_carrito{ font-size:30px; padding-top:35px; color:#333}
.item_carrito{width:100%; margin-left:0; height:auto; border-bottom:solid 1px #b5b5b5; box-sizing:content-box; position: relative}
.delete_item_cart{cursor:pointer; position: absolute; font-size: 14px; color: #2967B0;
    bottom: 5px;
    right: 35px;
    left: auto;
}

.delete_item_cart:hover{text-decoration: underline }
.item_carrito:first-child{border-top:solid 1px #ddd}
.item_carrito .img_cart{ width:10%; float:left; }
.item_carrito img{ width:100%; max-height:100px; object-fit:contain; }
.item_carrito .nombre_cart{ width:47%; float:left; text-align:left; padding-left:10px; }
.item_carrito .nombre_cart a{color:#333; padding-top: 40px; }
.item_carrito .nombre_cart a:hover{ color:#000; text-decoration:underline}

#popupCart .carrito .item_carrito .nombre_cart a {
    padding-top: 0px;
}


.msjAlert{color: #ef1000;
    background-color: #ffcf86;
    border-radius: 5px;
    padding: 2px 5px;
    margin-bottom: 11px;
    font-size: 13px;
    white-space: normal;}

.msjAlertCarrito{
width: max-content; margin: 5px auto 30px; font-size: 15px; padding: 4px 10px;
}

.item_carrito .variante_cart{ width:10%; float:left; text-align:left; padding-left:10px; display:flex; justify-content:center; align-content:center; flex-direction:column; height:50px; padding-top: 50px;}
.item_carrito .variante_cart select{}

.item_carrito .cantidad_cart{ width:5%; float:left; height:50px; display:flex; justify-content:center; align-content:center; flex-direction:column; text-align: right; padding-top: 50px;}
.item_carrito .precio_cart{ width:10%; float:left; height:50px; display:flex; justify-content:center; align-content:center; flex-direction:column; text-align:right; padding-top: 50px;}
.item_carrito .subt_cart{ width:15%; float:left; height:50px; display:flex; justify-content:center; align-content:center; flex-direction:column; text-align:right; padding-right:0; padding-top: 50px; font-size: 19px; font-weight: bolder;}
.item_carrito .delete_item_cart img{ width:30px;}

.carrito .total_cart{width:100%; margin-left:0; text-align:right; padding:20px; font-size:28px; background-color:#e9e9e9; color:black !important; font-weight:bolder}
.carrito .envio_cart{padding:10px; background-color:transparent;}
.carrito .total_cart span{font-size:18px; background-color:transparent; color:#333 !important; font-weight:lighter; width: 75%; text-align: right; float: left; line-height: 32px;}
.carrito .total_cart b{width: 30%; text-align: right}
.carrito .envio_cart b{font-weight: normal; font-size:22px; padding-right: 10px; }

.carrito .buttons{width:100%; margin-left:0; text-align:right;}
.carrito .buttons .button_cart{ background-color:DodgerBlue; padding:15px 45px; border-radius:5px; box-shadow:0 0 4px 1px slategray; border:none; outline:none; margin:20px 0 20px 23px; font-size:15px; position:relative; cursor:pointer; user-select:none; color:white}
.carrito .buttons .button_cart:hover{ background-color:#116cc4}
.carrito .buttons .button_cart:active{background-color:#013970; box-shadow:0 2px 5px 3px slategray;}

.carrito .buttons .button_cart b{ position:absolute; top:10px; display: none}
.carrito .buttons .next_cart b{right:12px;}
.carrito .buttons img{ width:30px; height:30px}

.carrito .buttons .prev_cart{padding:10px 20px 10px 62px;}
.carrito .buttons .prev_cart b{left:12px;}


.headCarrito{ text-align: center; border-top: 8px solid black; height: 100px; width: 100%; padding:10px 20px; background-color: white; }
.headCarrito img{height: 80px; width:auto; }


#pagar{ background-color:#fff; width:70%; margin-left:15%; padding:20px 0; border-radius:4px; }
#form_pay fieldset label{ display:block; margin-bottom:15px; position:relative}
#form_pay fieldset legend{ }
.carrito #form_pay{width:100%; margin-left:0%; padding:10px 10%;}
.carrito input[type="text"]{width:60%}

.carrito input[type="radio"]{box-shadow:none; padding:3px; margin:0; margin-right:8px; width:20px; height:20px; vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-clip:content-box; border:2px solid #444; background-color:#e7e6e7; border-radius:50%; transition:.3s}
.carrito input[type="radio"]:checked{background-color:#000;}

.carrito fieldset{ border-radius:10px; text-align:left; width:70%; margin:30px 15% 10px 15%; padding-bottom:26px; border:solid 2px #000}
#img_mp{ max-width:230px; position:absolute; top:0; margin-left:10px}
.total_pay{width:90%; margin-left:5%; text-align:center; padding:30px 20px 10px 0; font-size:20px; color:black !important}
#pagar .buttons{ text-align:center} 
.total_pay b{ color:#000; font-size:28px}

/*----------------------    items productos en buscar------------------*/


#result_buscar{display:block; width:80%; margin:30px 10%; padding:20px; background-color:white; box-shadow:0 0 3px 2px rgba(0,0,0,.3)}


.item_producto_buscar{width:100%; margin:0; padding:20px 35px; border-bottom:solid 1px gray;}
.item_producto_buscar *{color:#555}
.item_producto_buscar:hover{background-color:#eee}
.item_producto_buscar:hover em, .item_producto_buscar:hover h1, .item_producto_buscar:hover h2{color:#000 !important}

.item_producto_buscar:last-child{ margin-bottom:0px}
.item_producto_buscar .datos_producto{width:80%; margin:0; float:right; text-align:left}

.label_buscar{width:90%; margin:0 5%; padding-top:45px; font-size:24px; text-align:center; color:#000}

.item_producto_buscar h2{font-size:20px; width:100%; margin:0; text-align:left}
.item_producto_buscar .imgs_prod{ width:20%; float:left; padding-right:20px;}
.item_producto_buscar .imgs_prod>img{ width:120px; height:120px; object-fit:cover; margin:0; padding:3px}
.item_producto_buscar em{font-size:14px; margin:0; margin-top:8px; width:100%; text-align:justify; display:block; max-height:70px; overflow:hidden}
.item_producto_buscar h1{font-size:22px; display:inline-block;}
.item_producto_buscar i{font-size:18px; font-style:normal; display:inline-block; position:relative}
.item_producto_buscar i::after{content:''; position:absolute; top:55%; left:0; right:0; border-bottom:1px solid #555}
.item_producto_buscar b{font-size:16px; display:block; margin:0; margin-bottom:2px;}

.item_producto_buscar .descuento{background-color:transparent; font-size:20px; line-height:25px; border:none; display:inline-block; margin:0 35px; color:green}

.item_producto_buscar .new{height:25px; width:90px; background-color:var(--color1); font-size:14px; line-height:25px; border-radius:5px; display:inline-block; text-align:center; margin-left:15px; color:black !important; vertical-align: text-top}

.botonBuscarMas{
	padding: 12px 30px;
    background-color: var(--color1);
    width: max-content;
    margin: 0px auto 40px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    color: white;
    text-transform: uppercase;
    font-size: 20px;
	transition: .3s;
}
.botonBuscarMas:hover{background-color:var(--color2); transform: translateY(-3px); }

.finBusquedas{background-color:transparent; cursor:default; width: max-content; margin: 0px auto 40px; font-size:20px; color:black !important}





/*----------------------   final items productos en buscar------------------*/




/*----------------------    items productos en SUGERIDOS------------------*/

#sugeridos{ margin:30px 0; box-shadow:none; border-top:solid 3px var(--color1); padding:30px; width:100% !important; }
.item_producto_sug{width:70%; margin:0 15%; padding:20px 15px; border-bottom:1px solid #ccc; float:left; background-color:#fff}
.item_producto_sug:hover{background-color: #e7e7e7}
.item_producto_sug:hover h2, .item_producto_sug:hover h1{color:black}
.item_producto_sug:first-child{border-top:0px solid #ccc;}
.item_producto_sug:last-child{ margin-bottom:0px}
.item_producto_sug .datos_producto{width:80%; margin:0; float:right; text-align:left}

.item_producto_sug h2{font-size:20px; width:100%; margin:0; text-align:left; color:#444}
.item_producto_sug .imgs_prod{ width:20%; float:left; padding-right:20px;}
.item_producto_sug .imgs_prod>img{ width:90px; height:90px; object-fit:cover; margin:0; padding:3px}
.item_producto_sug em{font-size:14px; margin:0; width:100%; text-align:justify; display:block;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#444;}
.item_producto_sug h1{font-size:22px; display:inline-block; color:#444;}
.item_producto_sug i{font-size:18px; font-style:normal; display:inline-block; position:relative}
.item_producto_sug i::after{content:''; position:absolute; top:55%; left:0; right:0; border-bottom:1px solid gray}

.item_producto_sug .flags{height:40px; padding:0 30px; display:inline-block; text-align:left}
.item_producto_sug .descuento{height:25px; min-width:90px; background-color: transparent; font-size:20px; line-height:25px; border:none; display:inline-block }

.item_producto_sug .new{height:25px; width:90px; background-color:#e07f08; font-size:14px; line-height:25px; border-radius:5px; display:inline-block}


/*----------------------   final items productos en sugeridos------------------*/



.titulo_registro{font-size:25px; margin-bottom:15px}
.registro{ width:100%; margin:30px 0%; padding:10px; text-align:center; background-color: transparent; box-shadow: none;}

.registro form{ width:100%; left:0; position:relative; max-width: 500px; margin: 0 auto; }
.container_admin .registro form{ max-width: 100%;  }
.registro input, .registro textarea, .registro select{ display:block; margin-top: 3px; width: 100%; border-radius: 3px; font-size: 16px; color: #222;}
.registro textarea{ height:200px !important; }
.selectAngosto{ width:30% !important; margin-right:30% !important}
.selectAngostoX{ width:15% !important; margin-right:45% !important}
.registro label{ display:block; margin-top:20px; width:100%; float:left; text-align: left; padding-right:10px; transition:.15s !important; font-size: 12px; color: #333 !important;}
.registro input[type="submit"]{ float:none; cursor: pointer; }
.registro label a{ display:block;}
.registro label a:hover{text-decoration:underline; color:orangered !important}
.registro .olvide, .registro .soy_nuevo { text-align: center; width: 50%; padding: 10px 0;}
.registro .lbl_recover{text-align:center; width:auto; padding:10px 0}

/* ------------------------------------*/

.container_micuenta{ padding:20px 0; width: 100%; margin: 20px 0; }
.container_micuenta *{ color:#000}
.container_micuenta .titulo{margin-bottom:20px; font-size:28px;}
.container_micuenta .accesos{width:100%; padding:10px 0 30px 0; text-align:center}
.container_micuenta .accesos a{background-color:slategray; margin:10px 4px; font-size: 14px; letter-spacing:normal; border-radius:5px; box-shadow:0 0 5px 2px #ccc; padding:10px 15px; width:250px; display:inline-block; color:white}
.container_micuenta .accesos a:hover{background-color:darkslategray; box-shadow:0 3px 6px 2px #c4c4c4;}

.container_micuenta .compras{ width:100%; padding:20px;}
.container_micuenta .compras .item_compras{ width:100%; border:solid 2px var(--color1); padding:20px; display:block; margin: 30px 0}

.container_micuenta .compras .headCompras{background-color: var(--color1)}
.container_micuenta .compras .headCompras div{font-size: 15px}
.container_micuenta .compras .item_compras div{letter-spacing: normal; font-size: 14px; text-align: left}
.container_micuenta .compras .item_compras .fecha{width:100%; display:block; padding: 10px; font-size:17px }
.container_micuenta .compras .item_compras .total{width:100%; display:block; padding: 10px; font-size:17px }
.container_micuenta .compras .item_compras .estado{width:100%; display:block; padding: 10px; font-size:17px }
.container_micuenta .compras .item_compras .forma_pago{width:100%; display:block; padding: 10px; font-size:17px }
.container_micuenta .compras .item_compras .estado_pago{width:100%; display:block; padding: 10px; font-size:17px }

.itemCompraSelected{
	background-color:#FFFCE8; margin: 30px 0; box-shadow: 0 0 15px 7px #F8EA75; border:solid 3px var(--color1);
}

.container_micuenta #favoritos{ margin-top:30px; padding-top:20px; display:none; width:100%; background-color: white}
.container_micuenta .containerMisFav{width: 70%; margin: 30px 15%; }
.container_micuenta .misFav:first-child{border-top:1px solid #ccc;}
.container_micuenta .misFav{width:100%; margin:0; border-bottom:1px solid #ccc; position: relative; padding: 20px;  }
.container_micuenta .misFav:hover{background-color:#e7e7e7; }
.container_micuenta .misFav a{ color:darkred !important; display: block; margin-left:15px; }
.container_micuenta .misFav h1{ color:#0b72af !important; margin: 0; display: block; text-align: left; margin-left:15px; }
.container_micuenta .misFav h2{margin: 0; }
.container_micuenta .misFav > .datos_producto{position:relative; float: left; }
.container_micuenta .misFav .btnDelete{position:absolute; top: 25px; right:5px; width:30px; cursor:pointer;  }
.container_micuenta .misFav img{ max-width:100px; float: left;}

.container_micuenta #datosBanco{ width:100%; margin:30px 0; box-shadow:0 0 8px 3px #c1bfbf; padding:50px 0; display:none; background-image:linear-gradient(to bottom, #dbad3b 0%, #846000 100%)}
.container_micuenta #datosBanco h2{ }

/*******************************************************************/

.itemDetalle{ border-bottom:solid 1px #B4B4B4;}
.containerCompra{width:100%; background-color: transparent; font-size:0; padding:15px 5px; position: relative; }
.containerCompra .btnCancelarCompra{position: absolute; bottom: 30px; left: 20px; font-size: 17px; text-decoration: underline; color: #777; }
.containerCompra .btnCancelarCompra:hover{color: #000; }
.containerCompra *{color:#333}
.headCompra div, .itemDetalle div, .totalItem{font-size:15px; letter-spacing:normal !important; padding:10px 5px; display:inline-block; text-align:left;}
.containerCompra .headCompra{border-bottom:solid 2px var(--color1); margin-bottom:15px}
.containerCompra .headCompra .idItem{width:30%; }
.containerCompra .headCompra .estadoItem{width:33.333%; color:var(--color2)}
.containerCompra .headCompra .fechaPedidoItem{width:35%;}
.containerCompra .headCompra .fechaEnvioItem{width:35%;}
.containerCompra .headCompra .direccionItem{width:100%;}

.containerCompra .itemDetalle .imgItemDetalle{width:5%; text-align:center; border-bottom-color: transparent;}
.containerCompra .itemDetalle .imgItemDetalle img{ width:100%; vertical-align:middle}
.containerCompra .itemDetalle .cantidadItemDetalle{width:10%; text-align:center; display: none}
.containerCompra .itemDetalle .productoItemDetalle{width:73%;}
.containerCompra .itemDetalle .precioItemDetalle, .containerCompra .itemDetalle .subtotalItemDetalle,.containerCompra .itemDetalle .editItemDetalle, .containerCompra .itemDetalle .deleteItemDetalle{width:10%;}
.containerCompra .subtotalItemDetalle, .containerCompra .precioItemDetalle{text-align: right !important; }
.containerCompra .itemDetalle .editItemDetalle, .containerCompra .itemDetalle .deleteItemDetalle{ text-align:center}
.containerCompra .itemDetalle .editItemDetalle img, .containerCompra .itemDetalle .deleteItemDetalle img{text-align:center; padding:6px; border-radius:100%; box-sizing:content-box;margin-bottom:-8px}

.containerCompra .itemDetalle .editItemDetalle img:active, .containerCompra .itemDetalle .deleteItemDetalle img:active{background-color:#ccc;}

.containerCompra .totalItem{width:100%; text-align:right !important; padding-right:15px; font-size:28px !important; background-color:#f5f5f5; }
.containerCompra .itemDetalle .headDet{ background-color:var(--color1);}


/****       ADMIN  --    ADMIN  --    ADMIN  --    ADMIN  --    ADMIN  --          ***/


.admin_back{background-color:#000 !important; border-bottom:2px solid #ccc; padding:5px 0; display: flex; }
.admin_back .head_title1{ padding: 0 !important;
    width: 20% !important;
    text-align: center;
    margin: 0 auto; }
.admin_back .head_title2{width:75% !important; padding-right:20px; height:auto !important}
.admin_back .head_title1 img{ max-height:50px !important}
.admin_back .head_item1{height:auto; padding:0; margin-left:5px; font-size:13px}
.admin_back .head_item1 a{ padding:10px; display:block}
.admin_back .head_item1 a:hover{background-color: white !important; text-decoration:underline}
.admin_back .adminRegistrado{ padding-right:50px !important}
.admin_back .adminRegistrado:hover{ text-decoration:none !important}

.menu_admin{ width:100%; margin:0; background-color:var(--color1); border-radius:5px; }
.item_admin_cat{ font-size:0; border-bottom:1px solid slategray; text-align: center; }
.item_admin_cat:hover{ background-color:var(--colorLight1)}
.item_admin_cat:last-child{border-bottom:none}
.item_admin_cat a{font-size:16px; padding: 12px 0; color: white;}
.item_admin_cat .nombre_cat{ width:68%; display:inline-block; box-sizing:border-box; text-align:left; color:black !important; }
.item_admin_cat .action_cat{ width:12%; display:inline-block; font-size:20px; padding:4px 0}


/*--------------*/

.container_admin{
	margin: 10px 1%;
    width: 78%;
    box-shadow: 0 0 6px 3px #ccc;
    background-color: #fff;
    float: right;
    padding: 20px;
}

.container_menu_admin{ margin:40px 1% 40px 1%; width:18%; background-color:#fff; float:left}


.container_admin input[type="submit"]{background-color: var(--color1) !important; margin: 20px auto;}
.container_admin input[type="submit"]:hover{ background-color: var(--color3) !important}


.container_admin .registro form{box-shadow:none; padding-top:0; margin-top:0;}
.container_admin .registro{ padding:30px; padding-top: 30px; width:100%; box-shadow:none; margin:0; background-color:transparent}

.container_admin .item_option_edit90{ width:90%; display:inline-block !important}
.container_admin .item_option_edit80{ width:80%; display:inline-block !important}
.container_admin .campo_delete{ display:inline-block; width:10%;}
.container_admin .campo_delete img:hover{ background-color:#CCC}
.container_admin .campo_delete img{ cursor:pointer; padding:6px; border-radius:100%; box-sizing:content-box}
.container_admin .item_option_edit{display:block; padding:7px; border-bottom:solid 1px slategray}
.sinPadding{ padding:0px !important}
.container_admin .item_option_edit img{ width:60px; height:40px; object-fit:contain; vertical-align: text-bottom}
.container_admin .head_optionedit{ background-color:#444; padding:7px 0; font-weight:bolder; color:white !important;}

.campo1,.campo2,.campo3,.campo4,.campo5,.campo6,.campo7{display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:6px 0; vertical-align:middle}
.container_admin .campo1{ width:10%;}
.container_admin .campo2{ width:15%;}
.container_admin .campo3{ width:20%;}
.container_admin .campo4{ width:25%;}
.container_admin .campo5{ width:30%;}
.container_admin .campo6{ width:40%;}
.container_admin .campo7{ width:5%;}
.container_admin .align-left{ text-align:left}

.fila .campo_delete{width:9% !important}

.divBuscar{padding: 0 10px 20px}
.divBuscar input{width:100%}

.masVariantes{width:100%; margin:40px 0; padding:10px; border:solid 2px slategray; border-radius: 10px }

.masVariantes input, .masVariantes select, .masVariantes textarea{padding: 4px 5px;}

.masVariantes select{ height: 30px !important;}

.masVariantes .selectorVariante{
	width: 40px;
    height: 40px;
    padding: 0 !important;
    position: absolute;
    left: 50px;
    margin-left: -20px;
    bottom: -20px;
    z-index: 501;
    opacity: 0;
    margin-top: 0;
}
.masVariantes .tituloVariante{ width:30%;}
.masVariantes .selectAngostoX{width:25%; margin:25px 0 0 7px !important; float:left}

.masVariantes .submitMasImg{
	width: max-content;
	padding: 8px 8px !important;
	height: max-content !important;
	font-size: 12px;
}

.linkDelete{cursor:pointer; color:var(--color3) !important; font-size: 14px; text-align: left; margin-top: 15px; clear: both; display: block; white-space: nowrap;
    padding-bottom: 5px;}
.linkDelete:hover{text-decoration:underline;}
.itemVariantesEditCont{width: 100%; display:block; padding: 10px; float: left; background-color: #d7d7d7; border-radius: 10px; margin: 8px 0; }


/*.itemVariantesEditCont:nth-child(even) {border-right: solid 1px #bbb; }*/

.divImgVariante{width: 100px; height: 100px; float: left; margin-right: 20px; border-radius:20px; position: relative; border: solid 2px transparent; text-align: left; }
.divImgVariante img{width: 96px; border-radius:20px; object-fit: contain; height: 96px; }

.divColorVariante{width:100px; height:100px; float:left; margin-right:20px; border-radius:20px; position: relative; border: solid 2px transparent;  }

.divImgVariante span, .divColorVariante span{position: absolute; width:50px; height: 50px; left: 50px; margin-left: -25px; bottom: -25px; background-color:var(--color3); border-radius: 100%; cursor: pointer; display: block; z-index: 500; box-shadow: 0 2px 7px 3px rgba(0,0,0,.2); }

.divImgVariante span img, .divColorVariante span img{position: absolute; width: 24px; height: 24px; left: 13px; top:13px; }

.NombreFile{margin-top:27px; width: max-content; max-width: 290%; background-color:#e5e5e5; border-radius:3px; padding:3px 5px; display:none; word-wrap: break-word; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position: absolute; text-align: left; bottom: -60px;}

.okSelect{background-color: #087C40; border-radius: 100%; width: 20px; height: 20px; position: absolute; top: 10px; right: 10px; display: none; }
.okSelect img{position: absolute; width: 16px; height: 16px; left: 2px; top:2px;  }

.checkedVariante{border: solid 2px var(--color3); }
.checkedVariante i{display: block}

.grupoVariante1{width:100%; position: relative; }

.grupoVariante2 {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
}


.infoVariante1, .infoVariante2, .infoVariante3{float: left; padding: 0 4px; }
.infoVariante1 input, .infoVariante2 input, .infoVariante3 input, .infoVariante1 label, .infoVariante2 label, .infoVariante3 label{width:100%; }

.infoVariante1{width:40%;}
.infoVariante2{width:20%;}
.infoVariante3{width:15%;}

.formMasImgProd .infoVariante1{width:35%;}
.formMasImgProd .infoVariante2{width:12%;}
.formMasImgProd .infoVariante3{width:10%;}
.formMasImgProd .submitMasImg{float: left;}


.masImgProd {
    width: 100%;
    margin: 40px 0;
    padding: 10px;
    border: solid 3px #333;
    border-radius: 20px;
    background-color: #eee;
}

.itemMasImg {
    width: 125px;
    height: 145px;
    float: left;
    padding: 3px;
    border: solid 1px #ccc;
    margin: 5px 2px;
    display: block;
    position: relative;
    border-radius: 4px;
}
.itemMasImg img {
    max-width: 100%;
    max-height: 120px;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    object-fit: contain;
    margin: 0;
    margin-top: -11px;
}
.itemMasImg span {
    text-align: center;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    bottom: -1px;
    left: 0;
}
.itemMasImg span:hover{text-decoration:underline; color:darkmagenta !important}

.formMasImgProd .submitMasImg{ padding:8px !important; height:auto !important; display:inline-block !important; margin:0 !important; clear:both}
.formMasImgProd .fileMasImg{ width:65% !important; padding:8px 4px !important; height:auto !important; display:inline-block !important; margin:0 !important; float:none; margin-right:10px !important}


.fstNuevaImgGaleria{ width:90%; margin:20px 5%; padding-bottom:25px; background-color:white; outline:none; border-radius:10px; border:solid 1px slategray}
.fstNuevaImgGaleria legend{ font-size:18px; background-color:white; border-radius:5px; padding:5px 15px}
.fstNuevaImgGaleria label{ width:20%;}
.fstNuevaImgGaleria input[type="file"]{ width:80%; text-align:left; display:block; margin-bottom:15px}
.fstNuevaImgGaleria input[type="submit"]{ width:30%; display:inline-block; margin:0; margin-left:3%; padding:6px}
.fstNuevaImgGaleria input[type="text"]{width:67%; display:inline-block; margin:0}

.item_img_galeria{ width:100%; margin:0; padding: 35px 5px; border-bottom: solid 2px #333;}
.item_img_galeria:hover{ background-color:#fdfdfd}
.item_img_galeria form{width:100% !important}
.item_img_galeria img{ width:40%; vertical-align:middle; display:block; float:none; margin-bottom: 12px;}
.item_img_galeria input[type="text"]{display: block; width: 100% !important; text-align: left; padding-left: 5px; float: none; margin: 9px 0;}
.item_img_galeria select{ font-weight:normal; display:inline-block; width:23% !important; float:none; margin-right: 40px;}
.item_img_galeria strong{ font-weight:normal; display:inline-block; width:13%; text-align:center; color:Fuchsia !important; text-decoration:none; cursor:pointer;}
.item_img_galeria strong:hover{text-decoration:underline; color:darkmagenta !important; }
.item_img_galeria label{margin-bottom:4px; margin-top: 8px; }

/*////////////////////////////////*/

.FondoModal{ width:100%; height:100%; position:fixed; background-color:rgba(0,0,0,.8); display:none; top:0; left:0; z-index:38500; }
.FormAgregarNuevo{ width:40%; left:50%; top:15%; margin-left:-20%; position:fixed; background-color:#fff; padding:20px 0; box-shadow:inset 0 0 5px 2px #ccc; z-index:40000; display:none;
overflow-y:scroll; overflow-x:hidden; max-height:70%;}
.FormAgregarNuevo form{ padding-bottom:0; display:none}
.FormAgregarNuevo form label{width:50% !important; margin:15px 25% 0 25% !important; text-align:left }
.FormAgregarNuevo input{ width:60% !important; margin:4px 20% !important}
.FormAgregarNuevo .selectAngosto{ width:40% !important; margin:4px 30% !important}
.FormAgregarNuevo .selectAngostoX{ width:20% !important; margin:4px 40% !important}



.containerContacto{width: 100%; background-color: #fff; padding: 30px}
.contacto1,.contacto2,.contacto3{float: left; width: 33.33%; padding: 15px; text-align: left;}
.containerContacto h2, .containerContacto h4{color:#555; text-align: left; font-weight: normal; }
.containerContacto h4 img{width: 20px; vertical-align: sub; margin-right: 7px; filter: brightness(.3)}
.containerContacto a{text-decoration: none; color:#555555; display: block}
.containerContacto h4 a{display: inline-block}
.containerContacto a:hover{color:var(--color3); text-decoration: underline}
.linkEldored{display:block; color:white; margin: 40px 0 20px 0;}
.linkEldored a{color:white; display: inline-block}
.linkEldored a:hover{text-decoration: underline}

.containerContacto .logoFooter{width: 130px; padding-left: 20px}

.containerContacto h2 {
    color: #333; font-size: 17px; font-weight: bolder;
}


.containerContacto h4 {
    margin: 15px 0
}

.contacto2 a, .contacto3 a{
	padding: 7px 0
}

.contacto2, .contacto3 {
	padding-top: 50px
}


.divRedes h4{
	text-align: center;
}

.divRedes a{
	display: inline-block;
}

.divRedes img{
	width:40px !important;
}

.divRedes a:hover img{
	filter: invert(93%) sepia(99%) saturate(9927%) hue-rotate(622deg) brightness(470%) contrast(147%);
}


.miniFabCarrito{display:block; position:fixed; right:20px; bottom:60px; height:23px; width:23px; border-radius:100%; background-color:slategray; z-index:343003 !important; font-size:13px; color:white; line-height:24px; text-align: center; }
.fabCarrito{display:block; position:fixed; right:16px; bottom:16px; height:55px; width:55px; border-radius:100%; background-color:var(--color1); box-shadow:0 1px 3px 2px rgba(0,0,0,.3); background-image:url("../img/ic_cart.png"); background-repeat:no-repeat; background-position:center center; background-size:27px 27px; z-index:343000 !important}
.fabCarrito:active{box-shadow:0 1px 5px 3px rgba(0,0,0,.35); background-color:var(--color2)}

.fabWhat{display:block; position:fixed; right:16px; bottom:105px; height:55px; width:55px; border-radius:100%; background-color:#25d366; box-shadow:0 1px 3px 2px rgba(0,0,0,.3); background-image:url("../img/ic_whatsapp_white.svg"); background-repeat:no-repeat; background-position:center center; background-size:27px 27px; z-index:343000 !important}
.fabWhat:active{box-shadow:0 1px 5px 3px rgba(0,0,0,.35); background-color:#199246}


.container_admin .containerCompra .itemDetalle .productoItemDetalle {
    width: 49%;
}

.admin_back .head_title2 {
	padding-top: 0;
    display: flex;
    align-content: space-around;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin_back .head_item1 a {
color:white}


.divOpiniones{background-color: white; padding: 50px 0}
.divOpiniones h2{text-align: center}
.itemOpinion{text-align: center; display: inline-block; width: 32.33%; padding: 20px; height:140px; margin: 0 .5%; border: solid 1px #ccc; background-color: white; box-shadow: 8px 8px 1px -3px #555; }
.txtOpinion{font-size: 18px; text-align: center; font-style: italic}
.autorOpinion{font-size: 15px; text-align: center; font-style: italic; color:#555; margin-top: 10px}

.fondoNegro{ width:100%; height:100%; position:fixed; background-color:rgba(0,0,0,.8); display:block; top:0; left:0; z-index:38500; }
.popupSusc{ width:60%; left:20%; top:30px; position:absolute; background-color:rgba(220,220,220,.82); padding:20px; z-index:40000; height:auto; display: block; text-align: center}
.popupSusc .imgClose, #popupCart .imgClose{position: absolute; width: 25px; top: 8px; right: 8px; cursor: pointer}
.popupSusc .iconMain{width: 60px; border-radius: 100%}
.popupSusc h1{}
.popupSusc h4{}
.popupSusc form{padding: 20px}
.popupSusc .textSusc{width:100%; margin-top:15px; padding:15px 10px;}
.popupSusc .btnSusc{width:100%; margin-top:15px; box-shadow: none; padding:15px 10px; font-size: 17px;}
.popupSusc .popupSuscRedes{margin: 20px 0; text-align: center}
.popupSusc .popupSuscRedes a{display: inline-block; margin: 0 10px; }
.popupSusc .popupSuscRedes a img{width: 40px; filter: brightness(.3); transition: .3s}
.popupSusc .popupSuscRedes a:hover img{filter: brightness(0);}


.containerFaq{width: 100%}
.itemFaq{border-radius: 10px; border: solid 1px #ccc; width: 60%; margin: 20px 20%; background-color: #F5F5F5; box-shadow: 0 3px 7px 2px #ccc; }
.pregFaq{font-size: 20px; font-weight: bolder; padding: 20px; text-align:left; cursor: pointer}
.respFaq{font-size: 17px; font-weight: normal; display: none; padding:0 20px 20px 35px; text-align:left}
.respFaq img{width: 20px; vertical-align: bottom; margin-right: 10px}



#fondoPopupCart{position: fixed; top: 0; left: 0; width: 100%; height: 140%; z-index: 2500; background-color: rgba(0,0,0,.5); display:none}
#popupCart{position: fixed; top: 0; right: 0; width: 40%; height: 100%; overflow:auto; padding: 30px 0; z-index: 12600; background-color: #F8F8F8; display:none}

#popupCart .carrito { width: 96%; margin: 30px 2%; padding: 30px 0; background-color: transparent; box-shadow: none}
#popupCart .item_carrito {width: 100%; margin-left: 0%; height: auto;}
#popupCart .carrito .buttons .button_cart { margin: 20px .5%; font-size: 14px; width: 48%; padding: 15px; }
#popupCart .item_carrito .img_cart { width: 10%; float: left;}
#popupCart .item_carrito img {object-fit: contain; max-height: 550px;}
#popupCart .item_carrito .nombre_cart { width: 90%; float: left; height: auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#popupCart .item_carrito .nombre_cart .cantTotal{ width:100%; display: block; padding: 8px 10px; color: #777; }
#popupCart .item_carrito .nombre_cart .cantTotal:hover{text-decoration: none !important}

#popupCart .carrito .buttons .prev_cart {padding: 15px;}

.carritoFinalizar{width:60% !important; margin: 0 !important}
.detalleCarrito{padding: 80px 30px 30px 30px !important;}
.detalleCarrito .imgClose{display: none;}
.detalleCarrito .finishCart{width: 100% !important; }
.detalleCarrito .btnFinishCartLoading{pointer-events: none; text-align: center}
.detalleCarrito .btnFinishCartLoading img{width: 30px}
#popupCart .item_carrito .nombre_cart .cantTotal {text-align: right;}
#popupCart .item_carrito .nombre_cart {padding-top: 0;}
#popupCart .item_carrito .nombre_cart a{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#popupCart .item_carrito {padding:16px 0;}
#popupCart .carrito .total_cart{padding:15px; }
#popupCart .carrito .envio_cart{padding:10px; }

#popupCart .item_carrito .unitPopupCart{margin-left: 7px; width: 25%; display: inline-block;}
#popupCart .item_carrito .subtPopupCart{margin-left: 7px; width: 25%; display: inline-block;}
#popupCart .carrito .total_cart span {width: 50%;}

#popupCart .carrito .envio_cart span {line-height: 30px;}

.filtros{width: 20%; margin: 60px 1% 50px 4%; float: left; padding-left: 10px;}
.productos{width: 94%;
    margin: 50px 3%;
    float: left;}
.grupoFiltro{padding:0 20px; margin-top: 30px; width: 100%; text-align: left}
.grupoFiltro .inputFiltro{width: 35%; margin-right: 3px; padding: 7px 3px 7px 5px; float:left; box-shadow: 0 0 1px 1px rgba(0,0,0,.08);}
.grupoFiltro .btnFiltro{width:30px; height:30px; position: relative; background-color: var(--color1); border-radius: 100%; float:left; cursor: pointer}
.grupoFiltro .btnFiltro img{width:24px; height:24px; position: absolute; top: 3px; left: 3px; }
.grupoFiltro .titleGrupoFiltro{color:#333; margin-bottom: 5px; font-size: 16px}
.grupoFiltro .linkFiltro{color:#555; display: block; padding: 4px 10px; padding-left: 30px; font-size: 14px; width: max-content; position: relative; margin: 3px 0;}
.grupoFiltro .linkFiltro:hover{color:#000; text-decoration: underline}
.grupoFiltro .linkFiltro span{color:#555}
.grupoFiltro .linkFiltro span:hover{color:#000}
.grupoFiltro .linkFiltro .imgCancelFiltro{display: inline-block; width: 14px; margin-left: 7px; vertical-align: text-top;}

.grupoFiltro .linkFiltro .markLinkFiltro{background-color: transparent; border-radius: 100%; border: solid 1px var(--color1); position: absolute; width: 16px; height: 16px; left: 5px; top: 4px;}
.grupoFiltro .linkFiltro .markLinkFiltroSelected{background-color: var(--color1); border-radius: 100%; padding: 2px; position: absolute; top:2px; left:2px; width: 10px; height: 10px; display: none}
.grupoFiltro .linkFiltroSelected{background-color: white; border-radius: 5px;}
.grupoFiltro .linkFiltroSelected .markLinkFiltroSelected{display: block}

.grupoFiltro .marcaSelected{background-color: #fff; border-radius: 3px; padding-left: 4px;}



.btnShowFiltros{display: none; text-align: left; color: #333; text-decoration: underline; padding: 10px 40px 10px 20px; margin: 15px 5% 5px 65%; width: 30%; background-color: var(--color1); border-radius: 10px; font-size: 18px; font-weight: bold; position: relative}
.btnShowFiltros .imgShow{position: absolute; right: 4px; top: 7px; transform: rotate(90deg); width: 30px; transition: .3s}
.btnShowFiltros .imgGirada{transform: rotate(-90deg);}



.carritoDatos{width: 60%; margin: 30px 20%; margin-top:0; padding: 25px 60px; padding-top: 0; text-align: center; background-color: transparent; border-radius: 20px; box-shadow:none;}
.btnGoHome{width:200px; margin-top:25px; box-shadow: none; padding:15px; font-size: 16px; background-color: dodgerblue; border-radius: 7px; margin-left: 50%; left: -100px; position: relative; color: white}


.btnAviso {
	background-color: var(--color1);
    color: white;
    border-color: var(--color1);
    padding: 10px 15px;
    border: 1px solid;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    width: 100%;
    margin-top: 25px;
    box-shadow: none;
    margin-left: 0;
    left: 0;
    position: relative;
}

.btnGoHomeContacto{width:max-content; margin-top:25px; box-shadow: none; padding:15px; padding-left: 60px; font-size: 16px; background-color: transparent; border:solid 1px white; border-radius: 7px; margin-left: 50%; left: -100px; position: relative; color: white; background-image:url("../img/ic_whatsapp_white.svg"); background-repeat:no-repeat; background-position:21px 11px; background-size:27px 27px; }
.btnGoHomeContacto:hover{background-color: dodgerblue; border-color: dodgerblue}

.carritoFinish{width: 100%; margin: 0 !important; padding: 0 !important;}
.headFinish{padding:50px 20px}
.headFinish h2, .headFinish h4{font-weight: normal}
.headFinish h2 img{width: 100px; }
.headAprobado{background-color:#0dbd50; }
.headAprobado *, .headPendiente *, .headFallo *{color:white !important; }
.headPendiente{background-color:#01B7AE; }
.headFallo{background-color:#f23d4f; }

.grupoOpcionesCarrito{padding: 20px; border-radius: 15px; margin-bottom: 20px}
.opcionCarrito{padding:25px 10px 25px 35px; border-radius: 10px; background-color: #e6e4e4; text-align: left; margin: 8px 0; position: relative; cursor: pointer; }
.opcionCarrito2{padding: 15px 10px ; text-align: center; margin: 3px 2% 10px; width: 46%; float: left; background-color: var(--color1); color:white; }
.txtOpcionCarrito1{color:#555; font-size:18px; text-align:left}
.txtOpcionCarrito2{color:#555; font-size:17px; font-weight: bold; text-align:left; padding: 10px 0; }
.txtOpcionCarrito3{color:#555; font-size:15px; text-align:left}
#formInvitado{display:none; padding:20px 15%}

.opcionCarrito .markLinkFiltro{background-color: transparent; border-radius: 100%; border: solid 1px #333; position: absolute; width: 16px; height: 16px; left: 10px; top: 27px;}
.opcionCarrito .markLinkFiltroSelected{background-color: #555; border-radius: 100%; padding: 2px; position: absolute; top:2px; left:2px; width: 10px; height: 10px; display: none}

.btnMapsSucursal{border-radius: 5px; padding: 3px 6px; background-color: var(--color1); display: inline-block; margin-left: 7px; font-size: 12px; font-weight: normal; color: white; }
.btnMapsSucursal:hover{background-color: var(--color3); }

.btnComoLlegar img{width: 15px; vertical-align: sub; margin-right: 3px;}

.btnEditarOpcionCarrito{position: absolute; top: 10px; right: 10px; font-size: 14px; background-color: transparent; font-weight: normal; color: #2967B0;}
.btnEditarOpcionCarrito:hover{background-color: transparent; color: #0b36af; text-decoration: underline; }

.opcionCarritoDomicilios{padding-left: 70px}
.imgLocation{position: absolute; top: 33px; left: 14px; width: 45px; border: solid 2px #f8f8f8; border-radius: 100%; filter: brightness(0.4); padding: 5px; }

#formInvitado .opcionCarrito2 {
    padding: 14px 10px;
    margin: 20px 2% 10px;
    border-radius: 9px;
}

#formInvitado .divInput{width:100%; margin: 15px 0 0 0}
.divInput{width:100%; float: left; padding: 0; margin-top: 15px}
.divInput50{width:50% !important;}
.divInput25{width:24% !important; margin-right: 1% !important}
.divInput15{width:14% !important; margin-right: 1% !important}
.divInput33{width:32% !important; margin-right: 1% !important}
.divInput49{width:49% !important; margin-right: 1% !important}

.divInput50{width:50%; float: left; position:  relative; }
.divInput50 .selectAngostoX{
	width: 45% !important;
	margin-right: 15% !important;
}
.divInput50 .selectAngosto {
    width: 55% !important;
    margin-right: 5% !important;
}

.divInput33 .selectAngosto {
    width: 80% !important;
    margin-right: 10% !important;
}


.divInput25 .selectAngosto {
    width: 100% !important;
    margin-right: 0% !important;
}

.divInput33 .btnMas {
    left: 82%;
	top: 41px;
}



#formInvitado label{display: block; padding-left: 5%; text-align: left; font-size: 14px; color: #777;}
#formInvitado input{width: 100%; margin:0; box-shadow: 0 0 1px 1px rgba(0,0,0,.01); border: 1px solid #ccc; }

.opcionCarrito .logo_mp{max-width: 80px; margin-left: 15px; vertical-align: text-top;}
.opcionCarrito .cards_mp{max-width: 65%; margin-top: 20px; vertical-align: text-top; margin-left: -170px;}

.divCuotas{width: 100%; text-align: left; margin-top: 0px; margin-bottom: 10px;}
.divCuotas>img{width: 20px; vertical-align: text-top; margin-right: 5px;}
.divCuotas span{font-size: 16px}
.divCuotas .mediosPago{width: 100%; text-align: left; margin-top: 7px;}
.divCuotas .mediosPago img{width: 55%}


#loadingPopupCart{position: fixed; width: 100%; height: 100%; text-align: center; padding-top: 40%; background-color: rgba(255,255,255,.4); z-index: 255; margin-top: -30px;}
#loadingPopupCart img{
	position: relative;
    left: 0;
    top: 30%;
    width: 100px;
    margin-left: 0;
    margin: 0 auto;
}

.notFound{background-color: #F9DFE0}

.tagDescuento{display: none;}

.item_producto .divPrecioViejo2 {display: none}



.btnMas{
	color: #555 !important;
    cursor: pointer;
    position: static;
    font-size: 11px;
    background: #ddd;
    padding: 2px 7px;
    border-radius: 30px;
}


.divFechaDash{width: 100%; padding: 0 35px;  }
.fechaDash, .fechaDesdeDash, .fechaHastaDash, .goFechaDash{width: max-content !important; border-radius: 10px !important; border: solid 1px #ccc; color: #777 !important; float: left; margin-right: 20px; }
.goFechaDash{ background-color: var(--color3); padding: 12px 14px 11px 14px; color: white !important; border: none; margin-top: 3px; cursor: pointer; }
.fechaDash{padding:10px 12px}
.dash{width: 100%; padding: 20px; }
.itemDash{float: left; width: 23%; margin: 10px 1%; height: 88px; padding: 10px; border-radius: 12px; }
.valorItemDash{font-size: 30px; color: white !important; display: block; text-align: center; }
.nombreItemDash{font-size: 20px; color: white !important; display: block; text-align: center; }

.sugeridos{margin:30px 2%; width: 96%; }
.sugeridos .item_producto { width: 22%;}
.sugeridos .tituloSugeridos{width: 100%; padding: 10px; color: var(--color3); font-weight: bold; font-size: 23px; margin-top: 20px; grid-column: span 5; }




.containerPreguntas{
border-top: 1px solid #dad9d9;
margin: 40px 35% 30px 2%;
width: 63%;
padding: 50px 15px;
}
.formPreguntas{
text-align: left;
position: relative;
}
.itemPreg{
margin-bottom: 35px;
}
.subt31{
width: 100% !important;
float: none !important;
margin-bottom: 30px !important;
}
.subt32{
text-align: left;
margin: 45px 0 12px 0;
margin-left: 4px;
font-size: 18px;
}
.subt33{
text-align: left;
}
.subt34{
padding: 5px 0 10px 20px;
text-align: left;
}
.subt35{
float: left;
width: 2%;
}
.subt36{
float: left;
text-align: left;
width: 98%;
padding-left: 9px;
color: #888 !important;
}
.subt37{
font-size: 12px;
color: #9e9e9e;
padding-left: 10px;
}

.input2{
min-width: 70%;
text-align: left !important;
font-size: 14px !important;
resize: none;
overflow-y: scroll;
min-height: 41px !important;
max-height: 153px;
float:left;
}
.input2::-webkit-scrollbar {
    opacity: 0;
}

.input3{
width: max-content !important;
padding: 10px 30px 9px 30px !important;
float:left;
margin-left: 10px;
position: relative;
top: -2px;
border-radius: 7px;
}

.loadingPregunta{
text-align: center;
width: 105%;
height: 105%;
position: absolute;
display: none;
top: -3px;
left: -5px;
background-color: rgba(255,255,255,.7);
z-index: 11111;
}





.divEncuesta{padding: 30px 70px; margin-top: -40px; position: relative; background-image: linear-gradient(to top, #f778a3 0%, #ffd84a 80%); margin-bottom: 40px}

.divEncuesta h2{
margin: 0;
margin-bottom: 0.444em;
font-weight: normal; text-align: left; 
line-height: 1.8em;
}

.divEncuesta img{ position: absolute;
    top: 33px;
    right: 120px;
    width: 150px; }
.divEncuesta .txtLeyendaEncuesta{font-size: 38px;}
.divEncuesta a{background-image: linear-gradient(to bottom, #ec7265 0%, #B3244C 100%);
    border-color: #e14635;
    background-color: #B3244C; background-repeat: repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
    color: #fff;
    margin-bottom: 18px;}




.divMisCompras{display: block; margin-top: 40px; }
.divMisCompras h1{text-align: center; font-size: 1.7em}
.divMisCompras .compra{display: block; padding:15px; border-bottom: 1px solid #FACED1}
.divMisCompras .compra:hover{background-color: #FACED1}
.divMisCompras .compra .col1{float:left; width: 20%}
.divMisCompras .compra .col2{float:left; width: 25%; text-align: left}
.divMisCompras .compra .col3{float:left; width: 30%; text-align: right}
.divMisCompras .compra .col4{float:left; width: 25%; text-align: center}
.divMisCompras .compra .col1Canje{float:left; width:35%}
.divMisCompras .compra .col2Canje{float:left; width:25%;}
.divMisCompras .compra .col3Canje{float:left; width:20%;}
.divMisCompras .compra .col4Canje{float:left; width:20%;}
.txtLeyendaEncuesta{font-size: 38px}
.leyendaEncuesta{position: absolute; top: 33px; right: 120px; width: 150px;}


.divCP{float: left; width: 100%;}
.divCP #codpostal_ingreso{width: 25%; }
#formInvitado .divCP #codpostal_ingreso{width: 35%; }
.divCP #nombreLocalidad, .divCP #nombreLocalidadBuscando{float: left;
    margin-top: 14px;
    margin-left: 7px; }





.comprasPendientes{width: 70%; margin: 10px 15%; }

.itemCompraPendiente{border-bottom: 3px solid #ccc;
    background-color: white;
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 20px;}

.itemCompraPendiente .containerCompra{margin-bottom: 0;}
.itemCompraPendiente .containerCompra .totalItem {background-color: transparent;}

.itemCompraPendiente .avisoCompraPendiente{background-color: #FFE2BD; color: orangered; border: solid 2px orangered; border-radius: 10px; padding: 10px; font-size: 14px }


.envioExpress{}
.envioExpress img{width: 100%; height: 50px; object-fit: cover; }








/* Autocomplete
----------------------------------*/
/* --- CONTENEDOR PRINCIPAL (La caja flotante) --- */
.ui-autocomplete {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px; /* Bordes redondeados modernos */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sombra suave para profundidad */
    padding: 0;
    max-height: 300px; /* Si hay muchos, hace scroll */
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99999 !important; /* Asegura que tape todo lo de abajo */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	
}

/* --- EL ITEM (El renglón) --- */
.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    border-bottom: 1px solid #f0f0f0; /* Separador gris muy suave */
}

/* --- EL CONTENIDO DEL ITEM (El texto adentro) --- */
.ui-menu-item .ui-menu-item-wrapper {
    display: block;
    padding: 8px 12px; /* Espacio vertical y horizontal */
    font-size: 12px; /* 12px es chico pero legible. 11px cansa la vista */
    color: #444; /* Gris oscuro, no negro puro (más elegante) */
    line-height: 1.4;
    cursor: pointer;
	text-align: left;
    transition: background 0.1s ease;
	width: 100%;
}
html .ui-autocomplete { width:1px; }
/* --- ESTADO HOVER Y ACTIVO (Cuando pasas el mouse o usas flechas) --- */
.ui-menu-item .ui-menu-item-wrapper:hover,
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background-color: #e8f0fe !important; /* Azul "Google" muy clarito */
    color: #0877D3 !important; /* El azul de tu sistema para el texto */
    border: none !important; 
    margin: 0 !important;
	
}

/* --- DETALLES FINOS --- */
/* Quitar borde al último item para que quede prolijo */
.ui-menu .ui-menu-item:last-child {
    border-bottom: none;
}

/* Scrollbar fina y moderna (opcional, para Chrome/Edge) */
.ui-autocomplete::-webkit-scrollbar {
    width: 6px;
}
.ui-autocomplete::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}




:root {
	--primary: #B3244C;
	--dark: #2c3e50;
	--gray: #f4f6f8;
	--text: #333;
	--radius: 8px;
	--shadow: 0 2px 8px rgba(0,0,0,0.08);
}

body { font-family: 'Inter', sans-serif; background-color: #ffebeb; margin: 0; color: var(--text); }
a { text-decoration: none; color: inherit; }

/* Contenedor */
.main-container { max-width: 1200px; margin: 0 auto; padding: 20px; }

/* Header Sección */
.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px;}
.section-title { font-size: 1.5rem; font-weight: 700; color: var(--dark); margin: 0; }

/* GRILLA */
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px; padding-bottom: 20px;
}

/* CARD PRODUCTO */
.product-card {
	background: white;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform 0.2s;
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.badge-off {
	position: absolute; top: 10px; right: 10px;
	background: #4caf50;
    color: white;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 15px;
    z-index: 2;
}

.card-img {
	width: 100%; height: 200px;
	object-fit: contain; padding: 0px;
	border-bottom: 1px solid #f0f0f0;
}

.card-body { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; }
.card-brand { color: #888; font-size: 0.75rem; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; text-align: left; }
.card-title { font-size: 0.95rem; font-weight: 600; margin: 0 0 10px 0; line-height: 1.4; color: var(--dark); flex-grow: 1; }

.card-title a{ text-align: left;
    font-size: 13px; }

.card-price { margin-top: auto; }
.old-price { text-decoration: line-through; color: #888; font-size: 0.8rem; text-align: left; }
.final-price { 
	font-size: 23px; 
	text-align: left; 
	font-weight: bold; 
	color: #333; 
	display: flex; 
	justify-content: flex-start;
    align-items: center;
    gap: 15px;
}


.final-price .badge-off {
	position: static;
    font-size: 14px;
    padding: 4px 12px;
    width: max-content;
	color: #039d0a;
    background: #dafbda;
	font-weight: bolder;
}


.no-stock { color: var(--primary); font-weight: 600; font-size: 0.9rem; }

/* LOGIN GOOGLE */
.google-login-wrapper {
	background: white; padding: 30px; border-radius: var(--radius);
	text-align: center; margin-bottom: 30px; box-shadow: var(--shadow);
}



/* Contenedor principal: define la altura fija */
.banner-video-container {
    position: relative;
    width: 100%;
    height: 320px; /* Tu requisito de altura máxima */
    overflow: hidden; /* Corta cualquier sobrante del video */
    display: flex;
    align-items: center; /* Centra el texto verticalmente */
    justify-content: center; /* Centra el texto horizontalmente */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* O la fuente de tu sitio */
}

/* El Video: Se comporta como una imagen de fondo dinámica */
.banner-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover; /* MAGIA: Esto hace que el 16:9 llene el espacio sin deformarse */
    z-index: 1;
}

/* Overlay Negro: Oscurece el video para que el texto se lea bien */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255, 0.3); /* Negro al 50% de opacidad. Ajustalo a gusto */
    z-index: 2;
}

/* Texto sobre el video */
.banner-content {
    position: relative;
    z-index: 3; /* Para que esté encima del video y del overlay */
    text-align: center;
    color: #ffffff;
    padding: 0 20px;
}

.banner-content h1 {
    font-size: 3rem; /* Tamaño grande */
    font-weight: 700;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px; font-family: 'Playfair Display', serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Sombra para mejor lectura */
}


.banner-content p {
    font-size: 1.5rem; /* Tamaño chico */
    font-weight: 300;
    margin: 0; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* Opcional: Ajuste para celulares (Responsive) */
@media (max-width: 768px) {
    .banner-video-container {
        height: 300px; /* Quizás 400px es mucho para un celular, podés bajarlo acá */
    }
    .banner-content h1 {
        font-size: 2rem; 
    }
    .banner-content p {
        font-size: 1.1rem;
    }
}



/* --- NUEVO HEADER FLEXBOX (Reemplaza la lógica de floats anterior) --- */

.cinta_head {
    width: 100%;
    height: auto; /* Dejamos que el contenido defina la altura */
    min-height: 100px;
    background-color: #fff;
    position: relative;
    z-index: 1000;
    padding: 10px 20px;
    display: flex; /* La clave para ordenar todo */
    align-items: center; /* Centra verticalmente */
    justify-content: space-between; /* Separa izquierda de derecha */
    flex-wrap: wrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Un toque moderno sutil */
}

/* Grupo Izquierda: Logo + Buscador */
.head_group_left {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Ocupa el espacio disponible */
    max-width: 70%;
}

.cont_logo {
    width: auto; /* Ya no fijo */
    height: auto;
    float: none;
    padding: 0;
    margin-right: 30px; /* Separación con el buscador */
}

.cont_logo img {
    max-height: 80px; /* Controlamos la altura del logo */
    width: auto;
    padding: 0;
}

/* Buscador Modernizado */
.form_search {
    width: 100%;
    max-width: 400px; /* Que no sea infinito */
    float: none;
    height: auto;
    display: flex; /* Flex para input y botón */
    position: relative;
}

.form_search form {
    display: flex;
    width: 100%;
    position: relative;
    top: 0; left: 0; /* Reseteamos posicionamiento viejo */
}

.form_search form input[type="text"] {
    position: relative;
    top: 0; left: 0;
    width: 100%;
    border-radius: 25px 0 0 25px;
    border: 2px solid #000;
    border-right: none;
    height: 40px;
}

.form_search form input[type="submit"] {
    position: relative;
    top: 0; left: 0;
    width: 60px;
    height: 40px;
    border-radius: 0 25px 25px 0;
    background-color: #000;
    background-image: url(../img/ic_search_2.svg); /* Asegurate que la ruta sea correcta, o usa ic_search.svg */
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #000;
    padding: 0 !important;
}

.form_search form input[type="submit"]:hover {
    background-color: var(--color1);
    border-color: var(--color1);
}

/* Grupo Derecha: Usuario */
.head_group_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
}

.head_item1 {
    display: inline-block;
    height: auto;
    line-height: normal;
    padding: 0;
    margin-left: 15px;
    float: none;
}

.head_item1 a {
    padding: 8px 15px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
	background-color: transparent !important;
}

.head_item1 a:hover {
    background-color: var(--color1) !important;
    color: #fff;
    text-decoration: none;
	border: 1px solid lightgray;
}

/* --- NUEVA SECCIÓN: PROMO BANNER (Reemplazo de Popup) --- */
.daily-promo {
    width: 100%;
    background-image: linear-gradient(to right, #000 40%, #333 100%); /* Fondo por si falla la imagen */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 0px; /* Pegado al menú */
    height: 120px; /* Altura contenida */
}

/* Si quieres poner una imagen de fondo real */
.daily-promo-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.4; /* Oscurecer imagen para leer texto */
    z-index: 1;
	object-position: bottom;
}

.daily-promo-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}

.promo-text h3 {
    font-size: 24px;
    margin: 0;
    font-weight: 700;
    color: var(--color1); /* Usamos tu variable de rojo */
    text-transform: uppercase;
}
.promo-text p {
    font-size: 16px;
    margin: 5px 0 0 0;
    color: #fff;
}

.btn-promo {
    background-color: var(--color1);
    color: white !important;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.btn-promo:hover {
    background-color: white;
    color: var(--color1) !important;
}

/* Ajustes Responsive básicos para el header nuevo */
@media (max-width: 768px) {
    .cinta_head { flex-direction: column; padding: 10px; }
    .head_group_left { width: 100%; max-width: 100%; flex-direction: column; margin-bottom: 10px; }
    .cont_logo { margin-right: 0; margin-bottom: 10px; }
    .form_search { max-width: 100%; }
    .head_group_right { width: 100%; justify-content: center; padding: 9px 0; }
    
    /* Promo Banner responsive */
    .daily-promo { height: auto; padding: 20px 0; }
    .daily-promo-content { flex-direction: column; text-align: center; }
    .promo-text { margin-bottom: 15px; }
}


/* Estilos Modal Registro */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7); /* Fondo oscuro transparente */
    z-index: 9999;
    display: flex; justify-content: center; align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    width: 90%; max-width: 400px;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: fadeIn 0.3s ease;
}

.close-modal {
    position: absolute; top: 10px; right: 15px;
    font-size: 28px; font-weight: bold; color: #aaa; cursor: pointer;
}
.close-modal:hover { color: #000; }

.modal-content h2 { color: var(--color1); margin-top: 0; }
.modal-content input { 
    width: 100%; margin-bottom: 15px; margin-top: 5px; 
    border: 1px solid #ccc; padding: 10px; border-radius: 5px;
}
.modal-content label { text-align: left; display: block; font-weight: 600; font-size: 14px; color: #333; }

.btn-enviar-modal {
    background-color: var(--color1); color: white !important;
    border: none; padding: 12px; font-size: 16px; cursor: pointer;
    text-transform: uppercase; font-weight: bold; margin-top: 10px;
    transition: background 0.3s;
}
.btn-enviar-modal:hover { background-color: #333; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }




.modal-registro{
	text-align:left; max-width:500px;max-height: 90%; overflow-y: scroll;
}
.modal-registro::-webkit-scrollbar{width: 5px; background-color: #F5F5F5;}
.modal-registro::-webkit-scrollbar-track{background-color: #F5F5F5;}
.modal-registro::-webkit-scrollbar-thumb{background-color: #D9D9D9; }


/* --- FOOTER MODERNO --- */
.site-footer {
    background-color: #0b0e13; /* Mismo tono oscuro que venías usando */
    color: #e0e0e0;
    padding: 40px 0 0 0;
    font-size: 14px;
    border-top: 4px solid var(--color1); /* Línea roja arriba */
    width: 100%;
    margin-top: 50px;
}

/* GRILLA DE SUCURSALES */
.footer-branches-container {
    display: grid;
    /* Esto crea columnas automáticas. Mínimo 200px ancho, Máximo 1 fracción del espacio */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px 20px;
    text-align: left; /* Alineación a la izquierda es más legible */
}

.footer-branch {
    padding: 10px;
    border-left: 1px solid #333; /* Separador sutil entre columnas */
}

/* Títulos de sucursales */
.footer-branch h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-branch h4 span {
    color: var(--color1); /* El asterisco rojo */
    font-size: 18px;
    margin-right: 5px;
}

/* Texto de dirección */
.branch-address {
    color: #aaa;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Enlaces de contacto (tel, mail, wa) */
.branch-contact a {
    display: block;
    color: #fff;
    text-decoration: none;
    margin-bottom: 5px;
    transition: color 0.3s;
    font-weight: 500;
}

.branch-contact a:hover {
    color: var(--color1);
    text-decoration: none;
}

/* --- BARRA INFERIOR (LEGALES) --- */
.footer-bottom {
    background-color: #000;
    padding: 20px;
	padding-bottom: 180px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #222;
}

/* Data Fiscal */
.footer-data-fiscal img {
    width: 50px;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.footer-data-fiscal img:hover { opacity: 1; }

/* Centro Legal */
.footer-legal {
    text-align: center;
    flex-grow: 1;
    padding: 0 20px;
}

.footer-legal p {
    margin: 0 0 10px 0;
    color: #777;
    font-size: 13px;
}

/* Botón de Arrepentimiento */
.btn-arrepentimiento {
    display: inline-block;
    border: 1px solid var(--color1);
    color: var(--color1) !important;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s;
}

.btn-arrepentimiento:hover {
    background-color: var(--color1);
    color: #fff !important;
    text-decoration: none;
}

/* Redes Sociales */
.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social img {
    width: 30px;
    height: 30px;
    transition: all 0.3s;
}

.footer-social a:hover img {
    opacity: 1;
    transform: scale(1.1);
    filter: none; /* Recupera el color original al hover si lo deseas */
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .site-footer { text-align: center; }
    
    .footer-branches-container {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 40px;
        text-align: center;
    }

    .footer-branch {
        border-left: none;
        border-bottom: 1px solid #222;
        padding-bottom: 20px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
    }
    
    .footer-legal { order: 2; } /* Ponemos el legal al final o medio */
    .footer-social { order: 1; margin-bottom: 10px;}
    .footer-data-fiscal { order: 3; }
}


/*---------------------------------------------------*/

/* --- NUEVOS ESTILOS ADMIN EDIT --- */

/* Navegación rápida entre productos */
.admin-nav-arrows {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.nav-arrow {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 20px;
    text-decoration: none;
    transition: background .2s;
}
.nav-arrow:hover { background-color: var(--color1); color: white; }

/* Grilla del Formulario Principal */
.admin-grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 columnas para flexibilidad */
    gap: 15px;
    align-items: end; /* Alinea los inputs abajo */
}

/* Clases utilitarias para anchos */
.span-12 { grid-column: span 12; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.span-2 { grid-column: span 2; }

/* Ajuste de inputs dentro de la grilla */
.admin-grid-container input, 
.admin-grid-container select, 
.admin-grid-container textarea {
    width: 100% !important;
    margin-top: 5px;
    box-sizing: border-box;
}
.admin-grid-container label {
    margin-top: 0;
    font-size: 13px;
    color: #666;
    margin-bottom: 2px;
}

/* Input URL Imagen */
.input-url-img {
    border: 2px dashed #0877D3 !important;
    background-color: #f0f8ff;
}

/* --- NUEVAS VARIANTES TIPO LISTA --- */
.variantes-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.variant-card-row {
    display: grid;
    grid-template-columns: 80px 1fr 100px 100px 80px 40px; /* Estructura fija */
    gap: 15px;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.variant-img-col {
    position: relative;
    width: 60px;
    height: 60px;
}
.variant-img-col img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
    border: 1px solid #eee;
}
.variant-color-circle {
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid #ddd; cursor: pointer;
}

.variant-input-group label { display: none; } /* Ocultamos labels internos para limpiar */
.variant-input-group input { margin: 0 !important; }

.btn-del-variant {
    color: red; cursor: pointer; font-size: 20px; text-align: center;
}
.btn-del-variant:hover { transform: scale(1.2); }

/* Responsive para movil */
@media (max-width: 768px) {
    .span-6, .span-4, .span-3, .span-2 { grid-column: span 12; }
    .variant-card-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .variant-img-col { grid-row: span 2; }
}




/* --- ESTILOS ADMIN DENSE (Modo Experto) --- */
.admin-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #ddd; margin-bottom: 15px;
}
.admin-toolbar h2 { margin: 0; font-size: 18px; color: #333; font-weight: 700; text-transform: uppercase; }
.btn-nav-group { display: flex; gap: 5px; }
.btn-nav {
    background: #f0f0f0; border: 1px solid #ccc; padding: 5px 12px;
    font-size: 13px; color: #333; border-radius: 4px; text-decoration: none; display: flex; align-items: center;
}
.btn-nav:hover { background: #e0e0e0; color: #000; border-color: #999; }
.btn-nav-web { background: var(--color1); color: white !important; border:none; }
.btn-nav-web:hover { background: #333; color: white; }

/* Grid Denso */
.dense-grid {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; align-items: end;
}

.infoVariante1 label, .infoVariante2 label, .infoVariante3 label, .dense-input label {
    font-size: 11px; color: #555; font-weight: 600; display: block; text-transform: uppercase; margin-top: 5px;
}

.infoVariante1 input, .infoVariante2 input, .infoVariante3 input, .infoVariante1 select, .infoVariante2 select, .infoVariante3 select, .dense-input input, .dense-input select, .dense-input textarea {
    height: 30px; /* Input bajito */
    font-size: 13px;
    padding: 2px 8px;
    width: 100%;
    border: 1px solid #ccc; border-radius: 3px;
}
.dense-input textarea { height: 60px !important; padding: 5px; resize: vertical; }

/* Spans utilitarios */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* Secciones Secundarias Compactas */
.sec-section {
    border: 1px solid #eee; background: #fdfdfd; padding: 10px; margin-top: 15px; border-radius: 5px;
}
.sec-title {
    font-size: 14px; font-weight: bold; border-bottom: 2px solid #ddd; margin-bottom: 10px; padding-bottom: 5px; color: #444;
}
.img-thumb-grid {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
}
.mini-thumb {
    width: 60px; height: 60px; object-fit: contain; border: 1px solid #ccc; background: white; cursor: grab;
}
.mini-card {
    position: relative; width: 60px; height: 60px;
}
.mini-card span {
    position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(255,0,0,0.7);
    color: white; font-size: 9px; text-align: center; cursor: pointer; display: none;
}
.mini-card:hover span { display: block; }


/* --- ESTILOS SECCIONES SECUNDARIAS (Variantes y Multimedia) --- */

/* Contenedor de lista con scroll */
.variantes-scroll-area {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 4px;
}

/* Encabezado de la tabla de variantes */
.variant-header {
    display: grid;
    /* Columnas: Img(40px) | Nombre(Auto) | Precio(80px) | Stock(60px) | Color(40px) | Borrar(30px) */
    grid-template-columns: 40px 1fr 80px 60px 40px 30px; 
    gap: 10px;
    padding: 8px 10px;
    background: #f4f4f4;
    border-bottom: 2px solid #ddd;
    font-size: 11px;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
}

/* Fila de cada variante */
.variant-row {
    display: grid;
    grid-template-columns: 40px 1fr 80px 60px 40px 30px; /* Mismas medidas que el header */
    gap: 10px;
    padding: 8px 10px;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}
.variant-row:hover { background-color: #f9fbff; }
.variant-row:last-child { border-bottom: none; }

/* Inputs dentro de la variante (más limpios) */
.variant-row input[type="text"], 
.variant-row input[type="number"] {
    width: 100%;
    border: 1px solid transparent; /* Invisible hasta hover */
    background: transparent;
    font-size: 13px;
    padding: 4px;
    border-radius: 3px;
}
.variant-row input:focus, 
.variant-row:hover input {
    border-color: #ddd; /* Aparece borde al pasar mouse */
    background: #fff;
}

/* Miniatura de variante */
.var-thumb {
    width: 36px; height: 36px; 
    object-fit: contain; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    cursor: pointer; 
    background: #fff;
}

/* Circulo de Color */
.var-color-circle {
    width: 24px; height: 24px; 
    border-radius: 50%; 
    border: 2px solid #ddd; 
    cursor: pointer; 
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Botón Borrar */
.btn-trash {
    color: #ccc; cursor: pointer; text-align: center; font-size: 18px;
}
.btn-trash:hover { color: #ff4444; }

/* --- SECCION MULTIMEDIA (Videos / Fotos) --- */
.media-input-group {
    display: flex; gap: 0; 
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}
.media-input-group input[type="file"], 
.media-input-group input[type="text"] {
    border: none !important;
    background: #fff;
    padding: 8px !important;
    height: 35px !important;
}
.media-input-group input[type="submit"] {
    border: none;
    background: #333;
    color: white;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0 15px;
}
.media-input-group input[type="submit"]:hover { background: var(--color1); }

/* Grilla de Miniaturas Multimedia */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
}
.media-item {
    position: relative;
    height: 70px;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}
.media-item img {
    width: 100%; height: 100%; object-fit: cover;
}
.media-overlay-del {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.2s; cursor: pointer;
}
.media-item:hover .media-overlay-del { opacity: 1; }
.media-overlay-del span { color: white; font-weight: bold; font-size: 10px; text-transform: uppercase; }



/* Mensaje de Éxito Recuperar Clave */
.msg-exito-recover {
    background-color: #ffffff;
    border-left: 5px solid #2ecc71; /* Borde verde éxito */
    padding: 30px 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Sombra suave */
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    animation: fadeInDown 0.5s ease;
}

.msg-exito-recover .icon-check-circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: #2ecc71;
    color: white;
    font-size: 28px;
    font-weight: bold;
    margin: 0 auto 15px auto;
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
}

.msg-exito-recover h3 {
    color: #2ecc71;
    margin: 0 0 10px 0;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.msg-exito-recover p {
    font-size: 15px;
    color: #555;
    margin: 0;
    line-height: 1.6;
}

.msg-exito-recover strong {
    color: #333;
    text-decoration: underline;
    text-decoration-color: #2ecc71;
}

/* Animación de entrada suave */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


.btnPedidoRecibido{
	border: none;
    margin: 30px auto 0;
    width: max-content;
    position: static;
    background-color: #2ecc71 !important;
}




/* --- MIS COMPRAS: ESTILO MODERNO --- */

.titulo-mis-compras {
    font-size: 24px;
    color: var(--color1);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}


/* Tarjeta de Pedido */
.order-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.order-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Header de la tarjeta (Resumen) */
.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f9f9f9;
    cursor: pointer;
    flex-wrap: wrap; /* Para móviles */
    gap: 10px;
}

.order-date {
    font-weight: 600;
    color: #555;
    font-size: 14px;
    flex: 1; /* Ocupa espacio */
    min-width: 150px;
}

.order-status {
    font-weight: 700;
    color: gray;
    font-size: 14px;
    flex: 2;
    text-align: left;
}

.order-payment {
    font-size: 13px;
    color: #555;
    flex: 3;
    text-align: right;
}

.btn-toggle-detail {
    font-size: 12px;
    color: #0877D3;
    text-decoration: underline;
    margin-left: 10px;
    white-space: nowrap;
}

/* Cuerpo del detalle (Oculto por defecto) */
.order-body {
    padding: 20px;
    border-top: 1px solid #eee;
    display: none; /* Se maneja con JS */
}

/* Items del detalle */
.detail-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-right: 15px;
}

.detail-info {
    flex-grow: 1;
}

.detail-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.detail-price {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.detail-subtotal {
    font-weight: bold;
    color: #333;
    min-width: 100px;
    text-align: right;
}

/* Totales y Acciones */
.order-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.order-total-price {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.btn-cancel {
    background-color: transparent;
    color: #d32f2f;
    border: 1px solid #d32f2f;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.2s;
}
.btn-cancel:hover {
    background-color: #d32f2f;
    color: #fff;
}

/* --- ESTILOS TABLA COMPRAS SUCURSAL (Estilo Zebra) --- */
.branch-sales-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.branch-sales-table thead {
    background-color: #333;
    color: white;
}

.branch-sales-table th {
    padding: 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.branch-sales-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #555;
}

.branch-sales-table tr:hover {
    background-color: #f9f9f9;
}

/* Responsive */
@media (max-width: 768px) {
    .order-header { flex-direction: column; align-items: flex-start; }
    .order-payment { text-align: left; margin-top: 5px; }
    .order-footer { flex-direction: column; gap: 15px; align-items: flex-end; }
    
    /* Tabla Sucursal en móvil */
    .branch-sales-table thead { display: none; } /* Ocultar headers */
    .branch-sales-table tr { display: block; margin-bottom: 15px; border: 1px solid #eee; padding: 10px; }
    .branch-sales-table td { display: flex; justify-content: space-between; padding: 5px 0; border: none; }
    .branch-sales-table td::before {
        content: attr(data-label); /* Usa el atributo data-label para poner titulo */
        font-weight: bold;
        margin-right: 10px;
        color: #333;
    }
}


/* --- ESTILO MODERNO CARRITO (Flexbox) --- */
.cart-modern-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    background: #fff;
    transition: background 0.2s;
}
.cart-modern-item:hover { background: #fcfcfc; }

.cart-modern-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-right: 10px;
    background: #fff;
}

.cart-modern-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-modern-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.3;
    text-decoration: none;
	text-align: left;
    width: calc(100% - 75px);
    overflow: hidden;
}
.cart-modern-title:hover { color: var(--color1); text-decoration: underline; }

.cart-modern-variant {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Controles de cantidad y precio en una linea */
.cart-modern-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.cart-select-qty {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
	width: 100%;
}

.cart-modern-price {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}
.cart-modern-unit-price {
    font-size: 11px;
    color: #999;
    font-weight: normal;
}

.cart-btn-delete {
    position: absolute;
    top: 15px;
    right: 0;
    color: #ff4444;
    font-size: 12px;
    cursor: pointer;
    background: transparent;
    border: none;
}
.cart-btn-delete:hover { text-decoration: underline; }

/* --- CUPÓN DE DESCUENTO --- */
.coupon-section {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px dashed #ccc;
}
.coupon-input-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.coupon-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
.btn-apply-coupon {
    background-color: #333;
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}
.btn-apply-coupon:hover { background-color: var(--color1); }

.coupon-success-msg {
    color: #27ae60;
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
}
.btn-remove-coupon {
    color: #c0392b;
    cursor: pointer;
    text-decoration: underline;
    font-size: 11px;
}

/* Totales Modernos */
.cart-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 15px;
    color: #555;
}
.cart-totals-final {
    font-size: 20px;
    font-weight: 800;
    color: #000;
    border-top: 2px solid #eee;
    margin-top: 10px;
    padding-top: 10px;
}



/* --- ESTILO PAGINA CARRITO PRINCIPAL --- */

.cart-page-item {
    display: flex;
    flex-wrap: wrap; /* Permite que en movil baje */
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* Imagen del producto */
.cart-page-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-right: 20px;
    flex-shrink: 0;
}

/* Contenedor de Info (Nombre, Variante) */
.cart-page-info {
    flex: 2;
    min-width: 200px;
    padding-right: 20px;
}

.cart-page-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 8px;
    text-decoration: none;
    line-height: 1.4;
}
.cart-page-title:hover { color: var(--color1); }

/* Variante Select */
.cart-page-variant-select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    color: #555;
    max-width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
}

/* Contenedor de Precios y Cantidad */
.cart-page-pricing {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 150px;
    gap: 10px;
	padding-right: 25px;
}

/* Input Cantidad */
.cart-page-qty-select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background: #fff;
    cursor: pointer;
}

/* Precios */
.cart-page-total {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
.cart-page-unit {
    font-size: 13px;
    color: #888;
}

/* Botón Eliminar */
.cart-page-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #999;
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.cart-page-delete:hover { color: #d32f2f; }

/* Alerta Stock */
.cart-page-alert {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
}

/* Responsive Móvil */
@media (max-width: 600px) {
    .cart-page-item { padding-top: 40px; } /* Espacio para la X de borrar */
    .cart-page-img { width: 80px; height: 80px; margin-right: 15px; }
    .cart-page-info { width: 100%; margin-bottom: 15px; padding-right: 0; }
    .cart-page-pricing { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding-top: 15px; }
    .cart-page-delete { top: 10px; right: 10px; font-size: 24px; padding: 5px; }
}


/* Estilo Grid Minimalista para Admin */
.form-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
    gap: 15px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.form-group-full { grid-column: span 4; } /* Para ocupar todo el ancho */
.form-group-half { grid-column: span 2; } /* Para ocupar mitad */

.form-grid-container label {
    display: block; font-size: 12px; font-weight: bold; color: #555; margin-bottom: 5px;
}
.form-grid-container input, .form-grid-container select {
    width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px;
}
.form-grid-container input:focus { border-color: var(--color1); }




/* --- LISTADO MODERNO ADMINISTRADOR (GRID) --- */

/* Contenedor de la fila */
.admin-list-row {
    display: grid;
    /* Definimos las columnas: ID | CODIGO | DESCUENTO | VENCIMIENTO | USOS | ESTADO | BORRAR */
    grid-template-columns: 50px 2fr 1.5fr 1.5fr 1fr 100px 50px;
    gap: 10px;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    transition: background 0.2s;
    text-decoration: none; /* Para los links */
    color: #555;
    font-size: 13px;
}

/* Header de la tabla */
.admin-list-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    font-weight: 700;
    color: #495057;
    text-transform: uppercase;
    font-size: 11px;
    border-radius: 5px 5px 0 0;
}

/* Estilos para las filas de datos */
.admin-list-data:hover {
    background-color: #f1f8ff; /* Color hover suave */
    transform: translateY(-1px); /* Efecto leve de elevación */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    z-index: 1;
    position: relative;
}

/* Estilos específicos de celdas */
.cell-code {
    font-family: 'Courier New', monospace; /* Fuente tipo código */
    font-weight: bold;
    color: #0877D3;
    font-size: 14px;
    background: #eef6fc;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
}

.cell-discount {
    font-weight: 600;
    color: #333;
}

.cell-status {
    text-align: center;
}

/* Badges de estado (Pastillas de colores) */
.badge-status {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}
.badge-active { background-color: #d4edda; color: #155724; }
.badge-inactive { background-color: #f8d7da; color: #721c24; }
.badge-expired { background-color: #e2e3e5; color: #383d41; }

/* Botón Borrar */
.btn-delete-row {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.btn-delete-row img {
    width: 20px; 
    height: 20px;
    filter: grayscale(100%); /* Icono gris por defecto */
    opacity: 0.6;
}
.btn-delete-row:hover img {
    filter: none; /* Color original al hover */
    opacity: 1;
    transform: scale(1.1);
}
.btn-delete-row:hover {
    background: transparent; /* Evita heredar fondos raros */
}




/* --- AVISOS IMPOSITIVOS MAYORISTAS --- */

/* 1. Banner Superior Fijo (Header) */
.banner-mayorista-top {
    background-color: #fff3cd; /* Fondo amarillo suave */
    color: #856404; /* Texto marrón oscuro legible */
    border-bottom: 1px solid #ffeeba;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 0 15px;
    height: 50px; /* Altura fija solicitada aprox */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 0;
}
.banner-mayorista-top img {
    margin-right: 10px;
    width: 20px;
    vertical-align: sub;
}

/* 2. Cartel en el Carrito (Antes de pagar) */
.cart-tax-notice {
    background-color: #e3f2fd; /* Azul muy suave */
    border: 1px solid #bbdefb;
    color: #0d47a1;
    border-radius: 6px;
    padding: 15px;
    margin: 20px 0;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}
.cart-tax-notice strong {
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 12px;
}


.price-final-calc {
    color: #27ae60 !important; /* Verde éxito */
    font-weight: bold;
    font-size: 1.1em;
    margin-left: 2px;
}



/* Aviso de Envío a Cargo del Comprador */
.shipping-notice-box {
    display: flex;
    align-items: center;
    justify-content: center; /* O 'flex-start' si preferís alineado a la izq */
    gap: 10px;
    background-color: #f8f9fa; /* Gris muy suave */
    border: 1px dashed #ccc; /* Borde punteado discreto */
    border-radius: 6px;
    padding: 12px;
    margin: 15px 0;
    text-align: left;
    color: #555;
}

.shipping-notice-box .icon {
    font-size: 20px; /* Tamaño del camioncito */
}

.shipping-notice-box strong {
    display: block;
    font-size: 15px;
    color: #333;
    margin-bottom: 2px;
}

.shipping-notice-box small {
    display: block;
    font-size: 13px;
    color: #777;
    line-height: 1.2;
}




@media (max-width: 750px) {
	
.form_search form input[type="text"] {
	padding: 22px 16px;
}


.form_search form input[type="submit"] {
    padding: 22px 15px !important;
}



	
}






.marquee-wrapper {
    background: #fff; /* Fondo blanco o el que uses */
    overflow: hidden;
    padding: 20px 0;
    position: relative;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.marquee-track {
    display: flex;
    width: max-content; /* El ancho se adapta al contenido */
    animation: scroll 100s linear infinite; /* 40s es la velocidad, ajustalo */
}


/* Efecto Hover: Pausa al pasar el mouse */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

.marca-item {
    padding: 0 30px; /* Espacio entre logos */
    display: flex;
    align-items: center;
    justify-content: center;
}

.marca-item img {
    height: 60px; /* Altura fija para uniformidad */
    width: auto;
    max-width: 100px;
    object-fit: contain;
    filter: grayscale(100%); /* Efecto elegante: gris */
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Al pasar el mouse sobre UN logo específico */
.marca-item img:hover {
    filter: grayscale(0%); /* Vuelve a color */
    opacity: 1;
    transform: scale(1.1); /* Crece un poquito */
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Se mueve hasta la mitad (donde empieza la copia) */
}



/* El contenedor relativo permite posicionar el icono adentro */
.pass-wrapper {
    position: relative;
    width: 100%; /* O el ancho que necesites */
    display: flex; /* Opcional, ayuda a alinear */
    align-items: center;
}

/* Ajustamos el input para dejar espacio al icono a la derecha */
.pass-wrapper input {
    width: 100%;
    padding-right: 40px !important; /* Espacio para que el texto no toque el icono */
    box-sizing: border-box; /* Importante para que el padding no agrande el input */
}

/* El icono flotante */
.pass-wrapper .toggle-pass {
    position: absolute;
    right: 10px; /* Separación desde la derecha */
    top: 45%;
    transform: translateY(-50%); /* Centrado vertical exacto */
    width: 20px; /* Tamaño del icono */
    height: 20px;
    cursor: pointer;
    opacity: 0.6; /* Un poco transparente para que no moleste */
    transition: opacity 0.3s;
    user-select: none; /* Que no se seleccione como texto */
}

.pass-wrapper .toggle-pass:hover {
    opacity: 1; /* Al pasar el mouse se ve nítido */
}



@media (max-width: 750px) {

.colSe {
    width: 100%;
}


.menu>nav>ul>li>a{color:black}


.itemDash {
	width: 48%;
}
	


/* ==========================================================================
RESPONSIVE: CINTA TOP (Celulares)
========================================================================== */

.cintaTopLeft {
	display: none; /* Nos aseguramos de que siga oculto */
}

.cintaTopRight {
	width: 100%;
	float: none; /* Quitamos el float que rompe la estructura */
	padding-right: 0; /* Quitamos el padding para que quede bien centrado */
	display: flex; /* La magia para ponerlos en fila */
	justify-content: space-evenly;
	align-items: center;
	gap: 15px; /* Separación horizontal entre los 3 items */
	padding: 5px 0; /* Un pequeño respiro arriba y abajo */
}

.cintaTopRight a {
	display: inline-block; /* Fuerza a que estén en la misma línea */
	margin: 0; /* Eliminamos el margen vertical gigante que tenías */
	font-size: 14px; /* Letra chica, ideal para celulares */
	font-weight: 600; /* Un poquito de grosor para que se lea claro */
	padding: 4px 0;
}




.mailRegistrado #btnMenu {
    font-size: 14px;
    padding: 20px;
	width: max-content;
    margin: auto;
}

.mailRegistrado #btnMenu:hover {
	background-color: transparent;
}

.mailRegistrado #btnMenu img {
    top: 4px;
    right: -28px;
    width: 28px !important;
}

.head_item1 a {
    padding: 15px;
    font-size: 15px;
}

#menuMiCuenta{
	top: 50px;
    right: 0;
	width: max-content;
    left: 0;
    margin: 0 auto;
}

.itemMenuMiCuenta {
    width: 100%;
}

.itemMenuMiCuenta a {
    padding: 20px;
    font-size: 13px;
    width: 100%;
}


/*#menu_resp:before{float:left; content:"MENU"; font-size:25px; padding:13px 0 8px 50px;}*/

#menu_resp{display:block !important; height:auto; text-align:right; cursor:pointer; background-color:transparent; float: left; width:50%; }
#menu_resp img{ width:40px; height:40px; margin:25px 35px; padding:5px; box-sizing:content-box; border-radius:100%}
#menu_resp img:hover{ background-color:rgba(255,255,255,.4)}

.menuFocus{ width:100%; border-radius:0; top:0; left:0; background-color:blue}

.menu{ display:none; font-size:0px; margin-bottom: 20px;}

.menu>nav>ul>li{ display:block; font-size:15px; white-space:normal; background-color:#f5f5f5}
.menu>nav>ul>li>a{width:100%; padding:14px 0; display:block; border-bottom:dotted 1px #ccc; transition:none;}
.menu>nav>ul>li>a:last-child{border-bottom:none;}
.menu>nav>ul>li>a:hover{ background-color:var(--color1); color:white}
.menu>nav>ul>li:hover > ul{ display:none}
.menu_selected{ color:white !important; background-color:var(--color1)}
.menu_selected:hover{ color:white !important}
.submenu{ display: none;}
.cart{position:relative; color:white !important; padding-left:50px !important; background-color:#444; font-size:17px}
.cart *{color:white !important;}
.cart:hover{background-color:#000 !important}
.cart img{vertical-align:bottom; width:30px; position:absolute; left:10px; top:5px}


.miniFabCarrito{display:block;}
.fabCarrito{display:block;}

.productos {
    width: 96%;
    margin: 30px 2%;
}



.item_producto {
	width: 100%;
	height: 190px;
	margin: 0;
	box-shadow: none;
	border-bottom: 1px solid #ccc;
	padding: 15px 3px;
}

.item_producto:hover {
    box-shadow: none;
}


.descuento2 {
    right: 145px;
	top: 20px;
}

.descuento2 span {
    padding: 5px 7px;
}

.envioGratis {
    left: auto;
    right: 6px;
	top: 20px;
}



.item_producto .divImgIndex {
    height: 160px;
	width: 33%;
    margin: 0;
	float: left;
	border-bottom: none;
}

.item_producto img {
    height: 160px;
	width: 100%;
    margin: 0;padding: 10px;
}

.item_producto h1 {
    font-size: 21px;
    display: block;
    text-align: left;
    margin-top: 8px;
}

.item_producto h1 span{display: inline-block}
.item_producto .nombreProd{display: block; font-size: 17px;}

.item_producto h2{
    display: none
}

.item_producto .divPrecioViejo {
    border-top: none;
    padding-top: 0px;
	text-align: left;
	display: none;
}

.item_producto .divPrecioViejo span {
    font-size: 19px;
}

.item_producto i {
    font-size: 18px;
}


.sinStock {
    top: auto;
    width: 30%;
    margin-left: 0;
    left: 4px;
    padding: 0px;
    bottom: 25px;
}

.sinStock span {
    border: solid 1px black;
    padding: 3px;
}

.banner1 {
    padding: 26px;
    padding-top: 40px;
}

.sectionBanner1 {
    margin: 30px 5%;
    width: 90%;
    padding: 30px 20px;
    font-size: 19px;
}


.footer_susc {
    padding: 20px 0;
}


.footer_susc h1 {
    font-size: 19px;
    font-weight: normal;
    margin-bottom: 20px;
    color: black;
	width: 85%;
}

.popupSusc {
    width: 90%;
    left: 5%;
    top: 20px;
    padding: 10px;
}


.footer_susc form {
    width: 90%;
}

.footer_susc input[type="email"] {
    width: 70%;
	float:left;
	
}


.footer_susc input[type="submit"] {
    width: 28%;
	margin-left: 2%;
	float:left;
	padding: 11px 5px;
	
}

.contacto1, .contacto2, .contacto3 {
    width: 95%;
}

.footer2 {
    padding: 25px;
}



.item_producto_full{ width: 100%; margin:0; padding:10px; background-color:white; box-shadow: none}

.item_producto_full .submenu_prod_full{ width:40%; padding:10px; text-align:left; margin-top:20px; padding-left:20px; float:left}
.item_producto_full .submenu_prod_full a{ padding:5px 12px; margin:3px; display:inline-block; font-size:17px; border-radius:8px; background-color:#C62828; color:white !important}
.item_producto_full .submenu_prod_full a:hover{ text-decoration:underline; }
.item_producto_full .share{ width:100%; padding:10px; text-align:center; margin-top:20px;}
.item_producto_full .share span{ padding:5px 0; margin:3px 0; display:block; font-size:17px; font-weight:bolder;}
.item_producto_full .share a{width: 60px; height: 60px;}
.item_producto_full .share a img{ width:60px;}
.item_producto_full .share a img:hover{ width:60px; padding:0; }


.item_producto_full .share #favorito{cursor:pointer;}
.item_producto_full .share .imgFav {padding:0 !important; filter: grayscale(0%) !important}
.item_producto_full .share .separador{border-left:solid 2px darkmagenta; margin:auto 7px}

.item_producto_full .datos_producto{width:100%; margin:0; text-align:center; padding: 0 15px; }

.item_producto_full h2{padding: 10px 0; font-size: 28px;}
.item_producto_full .imgs_prod{ width:100%; padding:5px 15px}
.item_producto_full .imgs_prod>img{ width:100%; height: 330px; object-fit:contain; margin:0; border:1px solid #d5d5d5}
.item_producto_full .mas_imgs{ width:100%; margin:0; font-size:0px}
.item_producto_full .mas_imgs>.divImg{ width:23%; height: 76px; margin:3px 1% 0 1%; border:solid 1px #777; cursor:pointer; float: left}
.item_producto_full .mas_imgs>.divImg>img{ width:100%; height: 74px; object-fit: contain}
.item_producto_full p{width:100%; text-align:left; margin-left: 0; font-size: 18px }
.item_producto_full h1{font-size:45px; display:inline-block}

.item_producto_full b{font-size:18px; display:block; margin:0; margin-top:-10px; margin-bottom:15px; }

.item_producto_full .flags{width:100%; padding-top:0px;}
.item_producto_full .descuento{display:inline-block; color: black !important; background-color: var(--color1)!important; margin: 0 25px 0 10px; vertical-align: unset; font-size: 20px; padding: 4px 13px; border-radius: 20px; border: solid 2px var(--color1);}

.item_producto_full .new{height:30px; width:90px; background-color:#C62828; font-size:14px; line-height:30px; border-radius:7px; display:inline-block; color:white !important; margin-left:10px; vertical-align:text-bottom}

.item_producto_full input{ width:90px; padding: 25px 0; font-size:22px; text-align:center}


/*.variantes{display:block; margin:20px 0 30px 0; padding:18px 10px; border-radius:10px; border:solid 2px #888}
.itemVariantes{float:left; background-image:url(../img/colores/unas_esmaltes_default.png); background-repeat:no-repeat; background-size:contain; width:90px; height:90px; position:relative; border:solid 3px #fff; margin:0 2px; cursor:pointer}
.selectedVariante{ border:solid 3px goldenrod; box-shadow:0 0 2px 1px goldenrod}
.itemVariantes .nombre_variante{width:100%; height:15px; background-color:rgba(0,0,0,.45); border-radius:5px 5px 0 0; font-size:12px; letter-spacing:normal; position:absolute; bottom:0; left:0; color:white !important}*/


.ratingActual{ display:block; font-size:0px; margin-top:15px; position:relative; text-align:center; width:100%;}
.ratingActual span{font-size:60px; color:darkgoldenrod; margin-right:10px; font-weight: 300}
.ratingActual div{font-size:14px; display: inline-block; margin-left:-110px; font-weight: 400; letter-spacing: normal !important}
.ratingActual .star{ display:inline-block; opacity:.3; width:25px; vertical-align:top; margin-top: 10px}
.ratingActual .starMark{opacity:1 !important}




.rating{font-size:0px; padding:20px 0; position: relative; width:100%;}
.rating span{ display:inline-block; font-size:22px; padding-top:15px}
.rating .star{ display:inline-block; width:40px; cursor:pointer; transition:.2s; vertical-align:top; }
.rating .starSelected{}
.rating em{ font-size:19px; display:block; font-style:normal; margin-top:7px; font-weight:400; letter-spacing:normal !important}

.carrito {
    width: 100%;
    margin: 30px 0;
	padding: 10px;
    box-shadow: none;
    border-radius: 0;
}

.item_carrito {
    height: auto;
	padding: 30px 5px;
}

.carrito .buttons .button_cart {
    width: 60%;
	margin: 10px 0;
	margin-top: 20px;
}

#popupCart .carrito .buttons .button_cart {
	padding: 15px 5px;
	
}


.item_carrito .img_cart {
    width: 15%;
}

.item_carrito .nombre_cart {
    width: 80%;
	padding-top: 0px;
}

.item_carrito .cantidad_cart {
    width: 27%;
	padding-top:0;
	clear: both;
}

.item_carrito .precio_cart {
    width: 30%;
	padding-top:0;
	
}

.item_carrito .subt_cart {
    width: 40%;
	padding-top:0;
	
}

.item_carrito .delete_item_cart {
    width: 18%;
	right: auto;
    left: 40%;
}


.btnEditarOpcionCarrito{
	top: auto;
    bottom: 7px;
}

.detalleCarrito .carrito .total_cart::before {
    font-size: 19px;
    left: 12px;
    top: 34px;
}


.carritoFinalizar {
    width: 100% !important;
    margin: 0 !important;
}

.carritoFinalizar .opcionCarrito{
	padding: 35px 10px 45px 35px;
}

.carritoFinalizar .opcionCarritoDomicilios {
    padding-left: 70px;
}


.detalleCarrito {
    padding: 30px !important;
    right: 0px !important;
    position: relative !important;
}





#pagar {
    width: 100%;
    margin-left: 0%;
    padding: 15px 0;
}

.carrito #form_pay {
    padding: 10px;
}

.carrito fieldset {
    width: 96%;
    margin: 30px 2% 10px 2%;
}

#img_mp {
    max-width: 170px;
}

.total_pay b {
    display: block;
}


#sugeridos {
    margin: 30px 0;
    padding: 30px 0;
}

.item_producto_sug {
    width: 100%;
    margin: 0;
    padding: 20px 12px;
}

.item_producto_sug .imgs_prod {
    width: 25%;
    padding-right: 20px;
}

.item_producto_sug .imgs_prod>img {
    width: 100%;
}

.item_producto_sug .datos_producto {
    width: 75%;
    margin: 0;
}



.container_micuenta {
    padding: 15px 5px 50px 5px;
    width: 100%;
    margin:  0 0 20px 0;
}

.container_micuenta .compras {
    padding: 6px;
}


.containerCompra {
    margin-bottom:0px;
}

.container_micuenta .compras .item_compras {
    padding: 10px;
}


.containerCompra .itemDetalle .imgItemDetalle {
    width: 30%;
}


.containerCompra .itemDetalle .productoItemDetalle {
    width: 69%;
}

.containerCompra .itemDetalle .precioItemDetalle, .containerCompra .itemDetalle .subtotalItemDetalle{
    width: 49%; text-align: right !important;
}

.container_micuenta .compras .item_compras .estado, .container_micuenta .compras .item_compras .forma_pago,
.container_micuenta .compras .item_compras .estado_pago{font-size:15px }

.container_micuenta .compras .item_compras .forma_pago i{display: block}



.admin_back .head_title2 {
    padding: 0;
}

.admin_back .adminRegistrado {
    padding-right: 5px !important;
}

.admin_back .head_item1 a {
    padding:0 5px;
	margin-top: 9px;
	font-size: 12px;
}



.container_menu_admin {
    width: 100%;
    margin: 10px 0;
}

.container_admin{
	margin: 40px 0;
    width: 100%;
}

.registro form input, .registro form select, .registro form textarea{
	display: block;
    margin-top: 15px;
    width: 100%;
    float: left;
    margin-left: 0;
	padding: 15px;
}


.registro form {
    width: 100%;
	margin-left: 0;
    left: 0;
	padding: 20px 30px;
}

.registro label {
    margin-top: 30px;
    width: 100%;
    float: left;
    text-align: left;
    padding-right: 0;
    margin-bottom: -11px;
    padding-left: 27px;
}

.registro .olvide, .registro .soy_nuevo {
    width: 100%; font-size: 15px;
}

.registro {
    width: 100%;
    margin: 30px 0;
    padding: 30px;
    text-align: center;
    background-color: transparent;
    box-shadow: none;
}


.container_admin .selectAngostoX {
    width: 80% !important;
    margin-right: 0% !important;
    margin-top: 16px;
}

.container_admin .selectAngosto {
    width: 80% !important;
    margin-right: 19% !important;
}

.registro input[type="submit"] {
    float: none;
    margin-left: 0;
    margin-bottom: 20px;
	width: 100%;
    padding: 15px;
    height: auto;
    cursor: pointer;
}

.container_admin .registro input[type="submit"] {
    color: white !important;
}

.formMasImgProd .fileMasImg {
    width: 90% !important;
    padding: 10px !important;
    height: auto !important;
    margin: 0 !important;
	margin-left: 5% !important;
    float: none;
    margin-right: 0px !important;
}

.formMasImgProd .submitMasImg {
    width: 90% !important;
    padding: 11px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
	margin-left: 5% !important;
    clear: both;
}


.itemFaq {
    width: 90%;
    margin: 20px 5%;
}

.pregFaq {
    font-size: 18px;
}

.respFaq {
    font-size: 15px;
}

.respFaq img {
    width: 18px;
}



#popupCart {
    top: 40%;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 60%;
}

#popupCart .item_carrito .unitPopupCart, #popupCart .item_carrito .subtPopupCart{
	margin-left: 10px; width: 30%;
}


#popupCart .item_carrito .delete_item_cart {
    left: 0%;
}


#popupCart .carrito .buttons .button_cart b {
   top: 11px;
}

.btnShowFiltros{
	display: inline-block
}

.filtros {
    width: 90%;
    margin: 5px 5%;
    padding-left: 0;
	display: none;
}

.productos {
    width: 100%;
    margin: 15px 0%;
    padding: 0;
}


.productoFavorito img {
    margin-right: 11px;
    margin-top: 8px;
}


.item_producto_full .add_cart {
    font-size: 16px;
    width: 100%;
    margin: 45px 0;
    padding: 17px 0;
}


.envioGratis span {
    font-size: 17px;
}

.envioGratis span img {
    width: 28px;
    height: 28px;
    margin: 0 14px 0 0;
	
}

.item_producto_full .descuentoProductoFull {
    font-size: 24px;
}

.item_producto_full #form_prod {
}

.headCarrito {
    text-align: center;
}

.headCarrito img {
    margin-left: 0;
}

.botonBuscarMas{margin: 0px auto 20px auto; font-size:18px; }
.finBusquedas{margin: 0px auto 20px auto; }


.carrito .total_cart span {
    width: 40%;
}


.divCuotas>img {
    width: 23px;
    vertical-align: sub;
    margin-right: 5px;
}

.divCuotas span {
    font-size: 18px;
}

.divCuotas .mediosPago img {
    width: 76%;
}


#loadingPopupCart img {
    top: 100px;
    margin-left: 20%;
}


#formInvitado {
    padding: 20px 0%;
}


.item_producto_full .envioGratis{
	background-color: transparent;
}


.item_producto_full .envioGratis span{
	color: #00a650;
	font-size: 20px;
    text-transform: none;
}

.item_producto_full .envioGratis span img{
	display: inline-block;
}

.clearMovil{ clear:both}


.containerPreguntas {
    margin: 40px 0;
    width: 100%;
}


.input2 {
    min-width: 100%;
    margin-bottom: 15px;
}

#btnPregunta{
	float: right;
}


.next {
    right: -20px;
	display: none;
}

.prev {
    left: -20px;
	display: none;
}




.divEncuesta img {
    top: 95px;
    right: 20px;
    width: 90px;
}

.divEncuesta .txtLeyendaEncuesta {
    font-size: 29px;
    line-height: 1.4;
}

.divEncuesta {
    padding: 30px;
    margin-top: -18px;
}


#fondoBlanco{ background-color:rgba(0,0,0,0.3);}


.divMisCompras .compra .col1{float:left; width: 20%}
.divMisCompras .compra .col2{float:left; width: 25%;}
.divMisCompras .compra .col3{float:left; width: 30%;}
.divMisCompras .compra .col4{float:left; width: 25%;}
.divMisCompras .compra .col1Canje{float:left; width:100%; text-align: left; font-size:13px}
.divMisCompras .compra .col2Canje{float:left; width: 40%; font-size:13px}
.divMisCompras .compra .col3Canje{float:left; width:30%; font-size:13px}
.divMisCompras .compra .col4Canje{float:left; width:30%; font-size:13px}
.txtLeyendaEncuesta{font-size: 30px}
.leyendaEncuesta{position: absolute; top: auto; right: 20px; width: 100px; bottom: 10px;}








.popupMetodoDelivery {
    width: 90%;
    left: 5%;
}


.comprasPendientes{width: 96%; margin: 10px 2%; }


.envioExpress img {
    height: auto;
}





}





@media (max-width: 400px){
	.envioGratis span {
		font-size: 14px;
	}
}




/* ==========================================================================
   RESPONSIVE: GRILLA DE PRODUCTOS (Celulares)
   ========================================================================== */
@media (max-width: 768px) {
	
	.sugeridos .tituloSugeridos {
		grid-column: span 2;
	}

    .product-grid {
        /* Forzamos exactamente 2 columnas del mismo tamaño */
        grid-template-columns: repeat(2, 1fr);
        
        /* Achicamos un poquito la separación para aprovechar mejor la pantalla chica */
        gap: 10px; 
    }

    /* Como las tarjetas ahora son más angostas, achicamos un poco los márgenes internos */
    .product-card .card-body {
        padding: 10px; 
    }

    /* Opcional: Podés achicar un poquito la letra del título para que no ocupe 5 renglones */
    .product-card .card-title {
        font-size: 13px;
    }
    
    .product-card .card-price .final-price {
        font-size: 16px;
    }
	

	.productos {
		width: 96%;
		margin: 15px 2%;
	}
	
	
}


/* ==========================================================================
   NUEVOS ESTILOS RESPONSIVE: DETALLE DE PRODUCTO
   ========================================================================== */
.item_producto_full {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 30px auto;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

/* Columna Izquierda: Imágenes */
.imgs_prod { width: 100% !important; float: none !important; padding: 0 !important; }
#img_main { width: 100%; border-radius: 12px; border: 1px solid #f0f0f0; object-fit: contain; max-height: 450px; background: #fff;}

.mas_imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; width: 100% !important; justify-content: flex-start;}
.mas_imgs .divImg { width: 70px !important; height: 70px !important; float: none !important; border-radius: 8px; border: 1px solid #ddd; cursor: pointer; overflow: hidden; flex-shrink: 0; margin: 0 !important; transition: border 0.2s;}
.mas_imgs .divImg:hover { border-color: var(--color1); }
.mas_imgs .divImg img { width: 100%; height: 100%; object-fit: cover; }

/* Columna Derecha: Datos */
.datos_producto { width: 100% !important; float: none !important; text-align: left !important; padding: 0 !important;}
.datos-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 15px;}
.datos_producto h2 { font-size: 26px; font-weight: 700; color: #333; line-height: 1.3; margin: 0; width: auto; float: none;}
.productoFavorito { width: auto; float: none; flex-shrink: 0; margin: 0; }
.productoFavorito img { margin: 0; width: 30px !important; }

/* Precios */
.precio-container { margin: 20px 0; }
.precio-container h1 { font-size: 36px; color: #333; font-weight: 700; margin: 0; display: flex; align-items: center; flex-wrap: wrap; float: none;}
.descuentoProductoFull { background: #4caf50; color: white !important; font-size: 14px !important; padding: 4px 8px; border-radius: 6px; margin-left: 15px !important; font-weight: bold !important; position: static !important; }

/* Envío y Cuotas */
.divCuotas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }
.envioGratis { position: static; display: inline-flex; align-items: center; background: #f0fff4; color: #2e7d32; padding: 12px 15px; border-radius: 8px; font-weight: 600; width: 100%; box-sizing: border-box; margin-top: 10px; min-height: auto;}
.envioGratis span { display: flex; align-items: center; font-size: 15px; }

/* Variantes */
.variantes { margin: 0 !important; padding: 0 !important; border: none !important; }
.selectorVar { font-size: 16px; font-weight: 600; margin-bottom: 15px; color: #444; cursor: pointer; border-bottom: 2px solid #eee; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; background: transparent; }
.listaVar { display: block; max-height: 400px; overflow-y: auto; border: 1px solid #eee; border-radius: 8px; padding: 5px; margin-top: 10px; }

.picItemVar { width: 45px !important; height: 45px !important; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); flex-shrink: 0; margin-right: 15px !important; float: none !important; display: none; }

.itemListaVar { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 12px; 
    border-bottom: 1px solid #f0f0f0; 
    gap: 10px; 
    flex-wrap: nowrap; /* Evita que los botones bajen de linea */
}

.itemListaVar-info { 
    display: flex; 
    align-items: center; 
    flex-grow: 1; 
    min-width: 0;
}

.infoVarContainer { 
    flex-grow: 1; 
    min-width: 0;
}

.nombreItemVar { 
    font-size: 13px; 
    font-weight: 600; 
    color: #333; 
    text-align: left !important; 
    padding: 0; 
    margin: 0; 
    white-space: normal; /* Permite que baje de renglón */
    word-break: break-word; /* Corta la palabra si es extremadamente larga */
    line-height: 1.3;
    display: block;
}

.precioItemVar { font-size: 12px; color: #888; float: none !important; width: 100% !important; text-align: left !important; margin-top: 2px; position: static; }

/* Controles de cantidad */
.controlsVar { display: flex; align-items: center; background: #fff; border: 1px solid #ddd; border-radius: 25px; height: 36px; overflow: hidden; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
.menosItemVar, .masItemVar { width: 36px !important; height: 100% !important; display: flex !important; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: var(--color1); cursor: pointer; background: #f9f9f9; float: none !important; margin: 0 !important; user-select: none;}
.menosItemVar:hover, .masItemVar:hover { background-color: #eee; }
.cantItemVar { width: 45px !important; height: 100% !important; border: none !important; text-align: center; font-size: 16px; font-weight: 600; color: #333; margin: 0 !important; float: none !important; background: #fff; box-shadow: none !important; -moz-appearance: textfield; padding-left: 0 !important; }

/* Botón Agregar al Carrito */
.add_cart { width: 100%; background-color: var(--color1); color: white; font-size: 18px; font-weight: 700; text-transform: uppercase; padding: 16px; border-radius: 8px; text-align: center; margin-top: 20px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3); float: none !important; }
.add_cart:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4); background-color: var(--color2); }

/* Compartir y Descripción */
.share-container { margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; display: flex; align-items: center; gap: 15px; width: 100%; }
.share-container span { font-weight: 600; color: #777; font-size: 15px; margin: 0; padding: 0;}
.share-container a { display: flex; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; border-radius: 50%; background: #f5f5f5; transition: all 0.3s; margin: 0 !important; }
.share-container a img { width: 22px !important; margin: 0 !important; padding: 0 !important; }
.share-container a:hover { background: #e0e0e0; transform: translateY(-2px); }

.desc-producto { grid-column: span 2; margin-top: 0; padding-top: 25px; line-height: 1.6; color: #555; border-top: 1px solid #eee; font-size: 16px; word-break: break-word;}

/* Fix Preguntas QA */
.containerPreguntas { width: 100% !important; margin: 0 !important; padding: 0 !important; border: none; max-width: 100%; }

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
    .item_producto_full { grid-template-columns: 1fr; gap: 20px; padding: 20px; width: auto; border-radius: 8px;}
    .datos_producto h2 { font-size: 22px; }
    .precio-container h1 { font-size: 30px; }
    .desc-producto { grid-column: span 1; }
    .share-container { justify-content: center; flex-wrap: wrap; }

    /* Botón flotante abajo en móviles para incitar compra */
    .add_cart { bottom: 15px; left: 15px; right: 15px; width: calc(100% - 30px); z-index: 999; margin: 0; box-shadow: 0 -2px 15px rgba(0,0,0,0.2); font-size: 16px; padding: 14px;}
    .productos.sugeridos { padding-bottom: 90px; } /* Espacio para que el boton flotante no tape los sugeridos */
	
	
	/* 1. CONTENEDOR PRINCIPAL (Rompemos el Flexbox para usar bloques) */
    .itemListaVar {
        display: block !important; 
        position: relative;
        padding: 15px 12px;
    }

    /* 2. RESETEAMOS LOS CONTENEDORES INTERNOS */
    .itemListaVar-info, .infoVarContainer {
        display: block;
        width: 100%;
    }

    /* 3. OCULTAMOS EL CIRCULITO DE COLOR/IMAGEN */
    .picItemVar {
        display: none !important;
    }

    /* 4. FILA 1: NOMBRE LIBRE (Sin cortes, letra 13px) */
    .nombreItemVar {
        font-size: 14px !important;
        white-space: normal !important; /* Permite que el texto fluya hacia abajo */
        line-height: 1.4;
        width: 100% !important;
        margin-bottom: 20px !important; /* Empuja la fila de abajo */
        display: block;
    }

    /* 5. FILA 2 (IZQUIERDA): PRECIO Y STOCK */
    .precioItemVar {
        display: block;
        width: calc(100% - 130px) !important; /* Le deja un "hueco" a los botones a la derecha */
        margin: 0 !important;
        padding-top: 5px; /* Para centrarlo a ojo con los botones */
    }

    /* 6. FILA 2 (DERECHA): CONTROLES DE CANTIDAD (+ / -) */
    .controlsVar {
        position: absolute;
        bottom: 12px; /* Lo clava contra el piso a la derecha */
        right: 12px;
        margin: 0;
    }
}



/* Galeria estilos */
.hello-slide { width: 100%; max-width: 400px; color: #FFF; margin: 120px auto 0; text-align: center; font-family: "Helvetica Neue", Arial, sans-serif; }
h1 { font-weight: normal; }
.hello-slide a { color: #B5AEF7 !important; }
.pswp img { object-fit: contain; }
.pswp__top-bar .pswp__button { display: none; }
.pswp__top-bar{ background-color: transparent !important; }
.pswp__bg{ background-color: rgba(0,0,0,.5) !important; }
.pswp__counter { right: 50%; font-size: 14px; opacity: 1; background-color: rgba(0,0,0,.3); border-radius: 50px; transform: translateX(50%); left: auto; padding: 7px 17px; line-height: normal; height: auto; top: 10px; }
.pswp__button--arrow--left:before, .pswp__button--arrow--right:before { height: 50px; width: 50px; border-radius: 100%; }
.pswp__button--arrow--left:before { background-position: -128px -34px; }
.pswp__button--arrow--right:before { background-position: -84px -34px; }



/*inicio*/

/* --- 1. NAVBAR / HEADER --- */
.landing-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 5%;
	background: #ffffff;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header-logo img {
	max-width: 250px;
	height: auto;
}

.header-actions {
	display: flex;
	gap: 15px;
	align-items: center;
}

/* Botones Modernos */
.btn-modern {
	text-decoration: none;
	padding: 10px 24px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.btn-outline {
	background: transparent;
	color: var(--color1);
	border-color: var(--color1);
}

.btn-outline:hover {
	background: var(--color1);
	color: #fff;
	box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3); /* Cambiado a rojo */
}

.btn-solid {
	background: var(--color1);
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(231, 76, 60, 0.2); /* Cambiado a rojo */
}

.btn-solid:hover {
	background: #c0392b; /* Rojo más oscuro al hover */
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

/* --- 2. HERO SECTION --- */
.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
	background: url('https://www.cristaldigital.com.ar/img/hero.jpg') center/cover no-repeat;
	text-align: center;
	padding: 40px 20px;
}

.hero-content {
	max-width: 850px;
	animation: fadeInUP 1s ease-out;


	/* EL TRUCO (Glassmorphism): Una caja blanca semi-transparente con desenfoque */
	background: rgba(255, 255, 255, 0.4); /* 85% de blanco, deja ver un poco el fondo */
	padding: 50px 60px;
	border-radius: 20px; /* Bordes bien redondeados y modernos */
	box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Sombra elegante */
	backdrop-filter: blur(5px); /* Hace que el fondo que se trasluce se vea borrosito */

}


.hero h1 {
	font-family: var(--font-titles);
	font-size: 2.5rem;
	font-weight: 900;
	margin-bottom: 20px;
	line-height: 1.1;
	/* Quitamos el text-shadow porque ahora la caja blanca hace todo el contraste */
}

.hero h1 span {
	color: var(--color1);
}

.hero p {
	font-size: 1.25rem;
	color: #444; /* Gris oscuro para lectura perfecta sobre el fondo blanco translúcido */
	margin-bottom: 0; /* Quitamos margen porque ya no hay botones abajo */
	line-height: 1.6;
	font-weight: 600;
}

/* Ajuste responsive para la cajita en celulares */
@media (max-width: 768px) {
	.hero-content {
		padding: 35px 25px;
	}
	.hero h1 {
		font-size: 2.2rem;
	}
}


/* --- 3. BANNER INFO (Beneficios) --- */
.benefits {
	display: flex;
	justify-content: space-around;
	background: #ffffff;
	padding: 40px 5%;
	margin: 30px auto 50px;
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.05);
	max-width: 1300px;
	position: relative;
	z-index: 10;
	flex-wrap: wrap;
	gap: 20px;
}

.benefit-item {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1;
	min-width: 250px;
}

.benefit-item img {
	width: 45px;
	height: 45px;
	padding: 10px;
	background: #fdf2f0; /* Tono rojizo clarito */
	border-radius: 50%;
}

.benefit-text h4 {
	margin: 0 0 5px 0;
	font-family: var(--font-titles);
	font-size: 16px;
	color: var(--color2);
}

.benefit-text p {
	margin: 0;
	font-size: 13px;
	color: #777;
}

/* --- BANNERS ZIGZAG --- */
.banner-zigzag {
	display: flex;
	flex-direction: row; /* Por defecto: Imagen izquierda, Texto derecha */
	align-items: stretch; /* Hace que las dos mitades midan lo mismo de alto */
	margin: 60px auto;
	max-width: 1300px;
	min-height: 350px;
	background-color: #ffffff; /* Fondo blanco para la zona de texto */
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(0,0,0,0.06); /* Sombra suave */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner-zigzag:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* La magia del zigzag: Invertimos el orden si tiene la clase .reverse */
.banner-zigzag.reverse {
	flex-direction: row-reverse; 
}

/* Mitad Imagen */
.banner-img {
	flex: 1; /* Ocupa el 50% */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 300px; /* Asegura que la foto no desaparezca en celulares */
}

/* Mitad Texto */
.banner-content {
	flex: 1; /* Ocupa el 50% */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 50px 60px;
	text-align: left;
}

.banner-content h2 {
	font-family: var(--font-titles);
	font-size: 2.2rem;
	margin-bottom: 15px;
	font-weight: 900;
	letter-spacing: 0.5px;
	color: var(--color2) !important; /* Ahora el título es oscuro */
}

.banner-content p {
	font-size: 1.1rem;
	margin-bottom: 30px;
	line-height: 1.6;
	color: #444 !important; /* Párrafo gris oscuro */
	text-shadow: none;
}

.btn-banner {
	align-self: flex-start; /* Hace que el botón no se estire a todo el ancho */
	display: inline-block;
	padding: 12px 30px;
	background-color: var(--color1); /* Fondo rojo/azul */
	color: #ffffff !important;
	text-decoration: none;
	font-weight: bold;
	border-radius: 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s;
}

.btn-banner:hover {
	background-color: var(--color4); /* Rojo más oscuro */
	box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

/* Ajuste para que se vea perfecto en Celulares */
@media (max-width: 900px) {
	.banner-zigzag, 
	.banner-zigzag.reverse {
		flex-direction: column; /* En celular se pone SIEMPRE la foto arriba y el texto abajo */
		margin: 30px 15px;
	}
	.banner-img {
		min-height: 250px;
	}
	.banner-content {
		padding: 40px 25px;
		text-align: center;
	}
	.btn-banner {
		align-self: center; /* Centramos el botón en celulares */
	}
}


/* --- MARQUESINA DE MARCAS --- */
.marcas-section {
	padding: 60px 0;
	background: #ffffff; /* Fondo blanco para que resalte más */
	text-align: center;
	overflow: hidden;
}

.marcas-section h3 {
	font-family: var(--font-titles);
	font-size: 24px;
	color: #aaa;
	margin-bottom: 40px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.marquee-wrapper {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
}

.marquee-wrapper::before, .marquee-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	width: 150px;
	height: 100%;
	z-index: 2;
}
.marquee-wrapper::before {
	left: 0;
	background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}
.marquee-wrapper::after {
	right: 0;
	background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

.marquee-track {
	display: inline-block;
	animation: scroll-left 90s linear infinite;
}

.marquee-track:hover {
	animation-play-state: paused;
}

.marca-item {
	display: inline-block;
	margin: 0 30px;
	vertical-align: middle;
	transition: transform 0.3s;
}

.marca-item:hover {
	transform: scale(1.1);
}

.marca-item img {
	max-height: 60px;
	width: auto;
	filter: grayscale(100%) opacity(0.7);
	transition: filter 0.3s;
}

.marca-item:hover img {
	filter: grayscale(0%) opacity(1);
}

@keyframes scroll-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes fadeInUP {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
	.hero h1 { font-size: 2.5rem; }
	.hero p { font-size: 1rem; }
	.benefits { padding: 30px 20px; }
	.header-actions { gap: 10px; }
	.btn-modern { padding: 8px 15px; font-size: 11px; }
	.banner-content h2 { font-size: 1.8rem; }
	.banner-horizontal { margin: 30px 15px; min-height: 250px; }
}



/* ==========================================================================
   CARRUSELES HORIZONTALES (Sugeridos estilo MercadoLibre)
   ========================================================================== */
.slider-section {
    width: 100%;
    margin: 40px 0;
    position: relative;
}

.slider-section h2 {
    font-size: 22px;
    color: #333;
    font-weight: 700;
    text-align: left;
    border-bottom: 2px solid #eee;
}

.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* La pista donde corren las tarjetas */
.slider-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0 5px 20px; /* Padding para que la sombra de las cards no se corte */
    scrollbar-width: none; /* Oculta scrollbar en Firefox */
    -ms-overflow-style: none;  /* Oculta scrollbar en IE/Edge */
    width: 100%;
}

.slider-track::-webkit-scrollbar {
    display: none; /* Oculta scrollbar en Chrome/Safari/Opera */
}

/* Forzamos a las tarjetas a mantener su ancho y no achicarse */
.slider-track .product-card {
    flex: 0 0 240px; /* Ancho fijo de 240px por tarjeta */
    margin: 0; /* Anulamos márgenes viejos */
    height: auto;
}

/* Botones Flotantes */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    color: var(--color1);
    transition: all 0.2s;
    user-select: none;
}

.slider-btn:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: var(--color3);
    transform: translateY(-50%) scale(1.05);
}

.slider-btn.prev { left: -22px; }
.slider-btn.next { right: -22px; }

/* Responsive */
@media (max-width: 768px) {
    /* En celular ocultamos los botones, la gente desliza con el dedo (swipe) */
    .slider-btn { display: none !important; }
    
    /* Achicamos un poco las tarjetas para que se vea que "sigue" a la derecha */
    .slider-track .product-card { flex: 0 0 70%;
    padding: 15px 5px;  }
    .slider-section h2 { font-size: 18px; border-bottom: none; }
	
	.slider-track .card-title a {
		font-size: 16px;
	}
	
	.product-card .card-price .final-price {
		font-size: 22px;
	}
	
	
}




/* ==========================================================================
   HERO CAROUSEL - CRISTAL DIGITAL (100% Responsive & Snap)
   ========================================================================== */
.hero-wrapper {
	position: relative;
	width: 100vw;
	max-width: 100%;
	margin: 0 0 40px 0;
	overflow: hidden;
	background-color: #f8f9fa; /* Fondo neutro para resaltar las cards */
	padding: 30px 0;
}

.hero-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none; /* Oculta scrollbar en Firefox */
	padding: 10px 5vw; /* Padding lateral para mostrar un 'vistazo' de la siguiente card */
}

.hero-track::-webkit-scrollbar {
	display: none; /* Oculta scrollbar en Chrome/Safari */
}

/* La Tarjeta Hero */
.hero-card {
	flex: 0 0 90%; /* En móvil ocupa casi toda la pantalla */
	max-width: 900px;
	scroll-snap-align: center;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.05);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.hero-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(8, 119, 211, 0.1);
}

.hero-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	background: #2EB73E;
	color: white;
	padding: 8px 16px;
	border-radius: 30px;
	font-weight: 800;
	font-size: 14px;
	z-index: 2;
	box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}

.hero-img-box {
	width: 100%;
	height: 250px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
}

.hero-img-box img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.5s ease;
}

.hero-card:hover .hero-img-box img {
	transform: scale(1.05);
}

.hero-info {
	padding: 25px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(to right, #ffbbbb, #ffd4ee);
}

/* Textos con Priming */
.hero-priming {
	color: var(--color1, #0877D3);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 700;
	margin-bottom: 8px;
}

.hero-title {
	color: #2c3e50;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 20px 0;
	font-family: 'Montserrat', sans-serif;
}

.hero-btn {
	background: var(--color1, #0877D3);
	color: white;
	padding: 12px 28px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background 0.3s;
	justify-content: center;
}

.hero-card:hover .hero-btn {
	background: #065b99;
}

/* Flechas de Navegación */
.hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	color: var(--color1, #0877D3);
	transition: all 0.2s;
}

.hero-arrow:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.arrow-prev { left: 2vw; }
.arrow-next { right: 2vw; }

/* Desktop Version: Split Layout (Mitad foto, mitad texto) */
@media (min-width: 768px) {
	.hero-card {
		flex-direction: row;
		flex: 0 0 75%; /* Tarjeta ancha que deja ver la siguiente */
		height: 350px; border: 1px dashed #ffbbbb;
	}
	.hero-img-box {
		width: 50%;
		height: 100%;
		border-right: 1px solid #f0f0f0;
	}
	.hero-info {
		width: 50%;
		padding: 40px;
	}
	.hero-title {
		font-size: 28px;
	}
	.arrow-prev { left: 5vw; }
	.arrow-next { right: 5vw; }
}

/* Ajuste vital para el comportamiento del Scroll en móviles */
.hero-track {
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; /* Fluidez extra en iOS */
}
.hero-card {
	scroll-snap-align: center; /* Cada card frena exactamente en el centro */
}





/* ==========================================================================
	   SECCIÓN MAQUILLAJE (Tabs + Slider Auto)
	   ========================================================================== */
	.makeup-section {
		width: 100%;
		max-width: 1200px;
		margin: 60px auto;
		background: #ffffff;
		border: 1px solid #eaeaea;
		border-radius: 24px;
		padding: 40px;
		box-sizing: border-box;
		box-shadow: 0 10px 30px rgba(0,0,0,0.02);
	}

	.makeup-header {
		text-align: center;
		margin-bottom: 30px;
	}

	.makeup-header h2 {
		font-size: 32px;
		font-family: 'Montserrat', sans-serif;
		font-weight: 900;
		color: #2c3e50;
		margin: 0 0 10px 0;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	/* Frase de Priming */
	.makeup-priming {
		font-size: 16px;
		color: #7f8c8d;
		font-weight: 600;
		margin-bottom: 25px;
	}

	/* Tabs */
	.makeup-tabs {
		display: flex;
		justify-content: center;
		gap: 30px;
		border-bottom: 2px solid #eee;
		margin-bottom: 30px;
	}

	.makeup-tab {
		background: none;
		border: none;
		padding: 10px 20px;
		font-size: 16px;
		font-weight: 700;
		color: #aaa;
		cursor: pointer;
		position: relative;
		transition: all 0.3s ease;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.makeup-tab::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 100%;
		height: 3px;
		background: var(--color1, #0877D3);
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}

	.makeup-tab.active {
		color: var(--color1, #0877D3);
	}

	.makeup-tab.active::after {
		transform: scaleX(1);
	}

	/* Slider Container */
	.makeup-slider-wrapper {
		position: relative;
		overflow: hidden;
		padding: 10px 0;
	}

	.makeup-track {
		display: flex;
		gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		padding-bottom: 20px; /* Sombra de las cards */
	}

	.makeup-track::-webkit-scrollbar { display: none; }

	/* La Tarjeta de Producto (Vertical) */
	.makeup-card {
		flex: 0 0 260px; /* Ancho fijo */
		scroll-snap-align: start;
		background: #fff;
		border: 1px solid #f0f0f0;
		border-radius: 16px;
		padding: 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		text-decoration: none;
		transition: transform 0.3s, box-shadow 0.3s;
		position: relative;
	}

	.makeup-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 15px 25px rgba(0,0,0,0.06);
		border-color: #e0e0e0;
	}

	.makeup-img {
		width: 100%;
		height: 200px;
		object-fit: contain;
		margin-bottom: 15px;
		border-radius: 10px;
	}

	.makeup-badge {
		position: absolute;
		top: 10px;
		left: 10px;
		background: #e74c3c;
		color: white;
		font-size: 11px;
		font-weight: bold;
		padding: 4px 8px;
		border-radius: 12px;
	}

	.makeup-name {
		font-size: 14px;
		color: #333;
		font-weight: 700;
		margin: 0 0 10px 0;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2; /* Corta el texto en 2 líneas */
		-webkit-box-orient: vertical;
		overflow: hidden;
		flex-grow: 1; /* Empuja el precio y botón hacia abajo */
	}

	.makeup-price {
		font-size: 20px;
		color: var(--color1, #0877D3);
		font-weight: 900;
		margin-bottom: 15px;
	}

	.makeup-btn {
		background: #f8f9fa;
		color: var(--color1, #0877D3);
		border: 1px solid var(--color1, #0877D3);
		padding: 10px;
		border-radius: 8px;
		text-align: center;
		font-weight: 700;
		font-size: 13px;
		transition: all 0.3s;
		text-transform: uppercase;
	}

	.makeup-card:hover .makeup-btn {
		background: var(--color1, #0877D3);
		color: white;
	}

	/* Flechas de Navegación */
	.mk-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		background: #fff;
		border: 1px solid #eee;
		border-radius: 50%;
		box-shadow: 0 4px 10px rgba(0,0,0,0.1);
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		color: var(--color1, #0877D3);
		transition: all 0.2s;
	}

	.mk-arrow:hover {
		background: var(--color1, #0877D3);
		color: #fff;
		border-color: var(--color1, #0877D3);
	}

	.mk-prev { left: 0; }
	.mk-next { right: 0; }

	/* Responsive */
	@media (max-width: 768px) {
		.makeup-section { padding: 25px 15px; border-radius: 0; border-left: none; border-right: none; }
		.makeup-tabs { gap: 10px; overflow-x: auto; white-space: nowrap; padding-bottom: 10px; justify-content: flex-start;}
		.makeup-card { flex: 0 0 220px; }
		.mk-arrow { display: none !important; } /* En celular ocultamos flechas para que usen el dedo */
	}


/* ==========================================================================
   SECCIÓN MARCA DESTACADA (Sidebar + Carrusel)
   ========================================================================== */
.brand-section {
    /* 1. Gradiente sutil y elegante para perfumería */
    background: linear-gradient(135deg, #fff9eb 0%, #e91e63 110%); 
    
    /* 2. Ocupamos todo el ancho de pantalla para el fondo */
    width: 100vw;
    max-width: 100%;
    margin: 60px 0; /* Separación vertical con el resto */
    padding: 60px 0; /* Padding vertical interno para dar aire */
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    
    /* 3. Centramos el contenido flex internamente */
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden; /* Evita scrolls raros del gradiente */
	flex-wrap: wrap;
}

.brand-section h2{
		font-size: 32px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #2c3e50;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
	text-align: center;
}

/* Contenedor interno para mantener el contenido a 1200px */
.brand-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Columna Izquierda: Fija con el Logo (Se mantiene igual, solo saqué sombras pesadas) */
.brand-sidebar {
    flex: 0 0 280px;
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03); /* Sombra más suave */
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #f3f3f3;
}


/* Responsive: En celular se apilan */
@media (max-width: 900px) {
    .brand-section { padding: 0; }
    .brand-container { flex-direction: column; gap: 0; padding: 0; }
    .brand-sidebar { width: 100%; border-radius: 0; padding: 30px 20px; flex: none; border: none;}
    .br-arrow { display: none !important; }
    .brand-card { flex: 0 0 200px; }
    .brand-carousel-wrapper { padding: 30px 15px; width: 100%; box-sizing: border-box;}
}



/* Columna Izquierda: Fija con el Logo */
.brand-sidebar {
	flex: 0 0 280px; /* Ancho fijo para la info de la marca */
	background: #fff;
	border-radius: 20px;
	padding: 40px 30px;
	text-align: center;
	box-shadow: 0 15px 35px rgba(0,0,0,0.04);
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #f9f9f9;
}

.brand-logo-img {
	height: auto;
	margin-bottom: 20px;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
}

.brand-sidebar h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	color: #2c3e50;
	margin: 0 0 10px 0;
	font-weight: 900;
}

/* Priming de la Marca */
.brand-priming {
	font-size: 14px;
	color: #7f8c8d;
	line-height: 1.6;
	margin-bottom: 25px;
}

.brand-view-all {
	background: #fdfdfd;
	color: var(--color1, #0877D3);
	border: 2px solid var(--color1, #0877D3);
	padding: 10px 20px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.3s ease;
}

.brand-view-all:hover {
	background: var(--color1, #0877D3);
	color: #fff;
	box-shadow: 0 5px 15px rgba(8, 119, 211, 0.2);
}

/* Columna Derecha: El Carrusel */
.brand-carousel-wrapper {
	flex: 1; /* Toma todo el espacio sobrante */
	min-width: 0; /* TRUCO CLAVE para que flexbox no desborde la pantalla */
	position: relative;
	border-radius: 20px;
	padding: 10px 0;
}

.brand-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 10px;
}

.brand-track::-webkit-scrollbar { display: none; }

/* Tarjeta de Producto */
.brand-card {
	flex: 0 0 240px;
	scroll-snap-align: center;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 16px;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: transform 0.3s, box-shadow 0.3s;
	position: relative;
}

.brand-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.08);
	border-color: #e0e0e0;
}

.brand-img {
	width: 100%;
	height: 180px;
	object-fit: contain;
	margin-bottom: 15px;
	border-radius: 8px;
}

.brand-card-cat {
	font-size: 11px;
	color: #95a5a6;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 800;
	margin-bottom: 5px;
}

.brand-card-name {
	font-size: 15px;
	color: #333;
	font-weight: 700;
	margin: 0 0 10px 0;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex-grow: 1;
}

.brand-card-price {
	font-size: 22px;
	color: var(--color1, #0877D3);
	font-weight: 900;
	margin-bottom: 15px;
}

.brand-card-btn {
	background: #f8f9fa;
	color: var(--color1, #0877D3);
	padding: 12px;
	border-radius: 8px;
	text-align: center;
	font-weight: 800;
	font-size: 14px;
	transition: all 0.3s;
	border: 1px solid #eee;
}

.brand-card:hover .brand-card-btn {
	background: var(--color1, #0877D3);
	color: white;
	border-color: var(--color1, #0877D3);
}

/* Flechas */
.br-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 45px;
	height: 45px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 50%;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	color: var(--color1, #0877D3);
	transition: all 0.2s;
}

.br-arrow:hover { background: var(--color1, #0877D3); color: #fff; }
.br-prev { left: -20px; }
.br-next { right: -20px; }


.brand-section { padding: 60px 15px;
    max-width: 1300px;
    margin: 0 auto;
    border-radius: 24px; }
.brand-container { display: flex; gap: 30px; align-items: stretch; }

/* LA SIDEBAR QUE SE DESTACA (Como pediste) */
.brand-sidebar {
	flex: 0 0 320px; 
	background: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: 20px;
	padding: 40px 30px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.08); 
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.brand-sidebar::before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 6px;
	background: linear-gradient(90deg, var(--color1, #0877D3), #9b59b6);
}

.brand-logo-img {
	width: 100%;
	height: auto;
	object-fit: contain;
	padding: 20px;
	background: #fdfdfd; 
	border-radius: 16px;
	border: 1px dashed #e0e0e0; 
	box-sizing: border-box;
	margin-bottom: 25px;
}

.brand-priming { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 30px; flex-grow: 1; }
.brand-view-all {
	display: inline-block; background: var(--color1, #0877D3); color: white; text-decoration: none; padding: 14px 25px;
	border-radius: 50px; font-weight: bold; font-size: 14px; text-transform: uppercase; transition: 0.3s; width: 100%; box-sizing: border-box; box-shadow: 0 5px 15px rgba(8, 119, 211, 0.3);
}
.brand-view-all:hover { background: #065b99; transform: translateY(-3px); color: white; }

@media (max-width: 900px) {
	.brand-container { flex-direction: column; }
	.brand-sidebar { flex: auto; padding: 30px 20px; }
}



.newsletter-wrapper { width: 100%; padding: 0 15px; box-sizing: border-box; margin: 60px 0; }
.newsletter-section { background: linear-gradient(135deg, var(--color1, #0877D3), #065b99); color: white; border-radius: 24px; padding: 50px 20px; text-align: center; max-width: 1300px; margin: 0 auto; box-shadow: 0 15px 35px rgba(8, 119, 211, 0.2); }
.nl-icon { font-size: 48px; margin-bottom: 10px; color: #fff; opacity: 0.9;}
.nl-title { font-size: 28px; font-weight: 900; margin: 0 0 10px 0; font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px;}
.nl-subtitle { font-size: 15px; opacity: 0.9; margin: 0 0 30px 0; }
.nl-form { display: flex; max-width: 500px; margin: 0 auto; gap: 10px; position: relative; }
.nl-input { flex: 1; padding: 15px 25px; border-radius: 50px; border: none; font-size: 15px; outline: none; text-transform: lowercase; font-weight: 600; color: #333; }
.nl-input::placeholder { color: #aaa; font-weight: normal; text-transform: none;}
.nl-btn { background: #2c3e50; color: white; border: none; padding: 0 30px; border-radius: 50px; font-weight: bold; font-size: 14px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
.nl-btn:hover { background: #1a252f; transform: scale(1.02); }
.nl-msg { margin-top: 20px; font-weight: bold; font-size: 14px; display: none; align-items: center; justify-content: center; gap: 5px;}
.nl-msg.success { color: #a8ffb2; display: flex; }
.nl-msg.error { color: #ffbaba; display: flex; }
@media (max-width: 600px) { .nl-form { flex-direction: column; } .nl-btn { padding: 15px; justify-content: center; } }


.reels-wrapper { 
    width: 100%;
    padding: 60px 0;
    background: #fafafa;
    overflow: hidden;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 0 auto;
    max-width: 1300px; 
    position: relative;
}
.reels-title { 
    text-align: center; 
    font-size: 28px; 
    font-weight: 900; 
    margin: 0 auto 40px auto; /* Asegura el centrado absoluto */
    color: #2c3e50; 
    font-family: 'Montserrat', sans-serif; 
    letter-spacing: 0.5px; 
    width: 100%;
    display: block;
}
.reels-container { 
    display: flex; 
    gap: 20px; 
    overflow-x: auto; 
    /* Cambiamos 50vw por 50% para que respete los 1300px exactos */
    padding: 30px calc(50% - 125px);  
    scroll-behavior: smooth; 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}
.reels-container::-webkit-scrollbar { display: none; }
.reel-item { flex: 0 0 250px; height: 444px; border-radius: 16px; position: relative; cursor: pointer; background: #000; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transform: scale(0.85); opacity: 0.6; filter: grayscale(30%) blur(2px); }
.reel-item.active { transform: scale(1.05); opacity: 1; filter: none; box-shadow: 0 15px 35px rgba(8, 119, 211, 0.3); z-index: 2; border: 2px solid var(--color1, #0877D3); }
.reel-video { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.reel-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.9); font-size: 65px !important; pointer-events: none; transition: 0.3s; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.reel-item.playing .reel-play-btn { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }

/* ESTILO NUEVO PARA EL BOTÓN CTA */
.reel-cta {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color1, #0877D3);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.2);
}
.reel-item.active .reel-cta {
    opacity: 1;
    visibility: visible;
}
.reel-cta:hover {
    background: #065b99;
    transform: translateX(-50%) scale(1.05);
    color: white;
}

.rewards-wrapper { width: 100%; max-width: 1300px; margin: 60px auto; padding: 0; box-sizing: border-box; }
.rewards-container { display: flex; gap: 30px; background: #fff; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; overflow: hidden; padding: 20px; }
.rewards-banner { flex: 0 0 350px; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #111, #333); border-radius: 20px; padding: 40px; display: flex; flex-direction: column; justify-content: center; color: white; box-sizing: border-box; position: relative; overflow: hidden; align-items: center;}
.rewards-banner h2 { font-size: 28px; font-weight: 900; margin: 0 0 15px 0; font-family: 'Montserrat', sans-serif; line-height: 1.2; }
.rewards-banner p { font-size: 15px; opacity: 0.9; margin: 0 0 30px 0; line-height: 1.5; }
.btn-rewards-main { background: var(--color1, #0877D3); color: white; text-decoration: none; padding: 12px 25px; border-radius: 50px; font-weight: bold; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; width: fit-content; transition: 0.3s; }
.btn-rewards-main:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(8, 119, 211, 0.4); }

/* Modificaciones para las flechas de navegación en Rewards */
.rewards-carousel-wrapper { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.rw-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.95); border: 1px solid #eee; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: 0.3s; color: #555; }
.rw-arrow:hover { background: var(--color1, #0877D3); color: white; border-color: var(--color1, #0877D3); }
.rw-prev { left: -10px; } 
.rw-next { right: -10px; }

.rewards-carousel { flex: 1; display: flex; gap: 20px; overflow-x: auto; padding: 10px; scroll-behavior: smooth; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
.rewards-carousel::-webkit-scrollbar { display: none; }
.reward-card { flex: 0 0 220px; background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 15px; text-decoration: none; color: #333; display: flex; flex-direction: column; transition: 0.3s; scroll-snap-align: start; box-sizing: border-box; }
.reward-card:hover { border-color: var(--color1, #0877D3); box-shadow: 0 8px 25px rgba(8, 119, 211, 0.15); transform: translateY(-5px); }
.reward-img-container { width: 100%; aspect-ratio: 1 / 1; background: #f8f9fa; border-radius: 12px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.reward-img { width: 100%; height: 100%; object-fit: cover; }
.reward-title { font-size: 14px; font-weight: 700; margin: 0 0 10px 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; }
.reward-pts { display: inline-flex; align-items: center; gap: 5px; background: #fff9e6; color: #d35400; padding: 6px 12px; border-radius: 8px; font-weight: 900; font-size: 15px; width: fit-content; }

@media (max-width: 900px) {
	.rewards-container { flex-direction: column; padding: 0; background: transparent; box-shadow: none; border: none; }
	.rewards-banner { flex: auto; border-radius: 20px; aspect-ratio: auto; padding: 40px 25px; }
	.rewards-carousel { padding: 10px 0; }
	.rw-arrow { display: none; } /* En móvil se scrollea con el dedo */
}



.acp-wrapper {
	width: 100%;
	padding: 80px 15px;
	background-color: #FFC4D8; 
	box-sizing: border-box;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	margin: 40px 0;
}

.acp-header-container {
	max-width: 1000px;
	margin: 0 auto 50px auto;
	text-align: center;
}

.acp-priming {
	font-size: 16px;
	color: var(--color1, #0877D3);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 800;
	margin-bottom: 10px;
}

.acp-title {
	font-size: 48px;
	font-weight: 900;
	color: #2c3e50;
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: -1px;
}

@media (max-width: 600px) {
	.acp-title { font-size: 36px; }
}

/* Contenedor del Carrusel y Flechas */
.acp-carousel-wrapper {
	position: relative;
	max-width: 1250px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.acp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.95);
	border: 1px solid #eee;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	transition: 0.3s;
	color: #555;
}

.acp-arrow:hover {
	background: var(--color1, #0877D3);
	color: white;
	border-color: var(--color1, #0877D3);
}

.acp-prev { left: -20px; } 
.acp-next { right: -20px; }

/* El Track (Pista) del Carrusel */
.acp-carousel {
	display: flex;
	gap: 30px;
	overflow-x: auto;
	padding: 20px 10px; /* Padding para que la sombra de las cards no se corte */
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scrollbar-width: none;
	width: 100%;
}

.acp-carousel::-webkit-scrollbar { display: none; }

/* Tarjetas */
.acp-card {
	flex: 0 0 320px; /* Ancho fijo de las tarjetas */
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	border: 1px solid #f0f0f0;
	scroll-snap-align: start; /* Para que frenen justo al inicio */
}

.acp-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.acp-img-box {
	width: 100%;
	height: 200px;
	background: #e9ecef;
	position: relative;
}

.acp-img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.acp-badge-nuevo {
	position: absolute;
	top: 15px;
	right: 15px;
	background: #FF558F;
	color: white;
	padding: 5px 12px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 3px 10px rgba(231, 76, 60, 0.4);
}

.acp-info {
	padding: 25px 20px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.acp-course-name {
	font-size: 20px;
	font-weight: 800;
	color: #333;
	margin: 0 0 15px 0;
	line-height: 1.3;
}

.acp-details {
	list-style: none;
	padding: 0;
	margin: 0 0 25px 0;
	flex-grow: 1;
}

.acp-details li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #666;
	margin-bottom: 10px;
}

.acp-details li i {
	font-size: 18px;
	color: #95a5a6;
}

.acp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: #25D366; 
	color: white;
	text-decoration: none;
	padding: 14px 0;
	border-radius: 8px;
	font-weight: bold;
	font-size: 15px;
	text-transform: uppercase;
	transition: 0.3s;
}

.acp-btn:hover {
	background: #1EBE5D;
	color: white;
}

@media (max-width: 900px) {
	.acp-arrow { display: none; } /* En móviles se desliza con el dedo */
	.acp-card { flex: 0 0 280px; } /* Tarjetas un poquito más angostas en celu */
}

.acp-badge-sede {
	background: #FF558F;
	color: white;
	padding: 8px 18px;
	border-radius: 30px;
	font-size: 13px;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 20px; /* Separación con el botón de WhatsApp */
	width: fit-content;
	box-shadow: 0 4px 10px rgba(8, 119, 211, 0.2);
}


/* --- ENCABEZADO ESCUELA ACP --- */
.acp-header-container {
    display: flex;
    align-items: center; /* Centra el logo con el texto verticalmente */
    gap: 25px;
    margin-bottom: 35px;
    background: #ffffff;
    padding: 25px 30px;
    border-radius: 16px;
    border-left: 6px solid #e8368c; /* Un toque de color de tu degradé */
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    border: 1px solid #eaeaea;
}

.acp-logo-box {
    flex-shrink: 0; /* Evita que el logo se aplaste */
}

.acp-logo-box img {
    width: 110px; /* Ajustá este tamaño a gusto si tu logo es más ancho */
    height: auto;
    object-fit: contain;
}

.acp-title-box {
    flex-grow: 1;
}

.acp-priming {
    font-size: 15px;
    color: #666;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.5;
}

.acp-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    font-size: 26px;
    color: #2c3e50;
    font-weight: 800;
}

/* --- EL BOTÓN DEGRADÉ --- */
.acp-title-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #e8368c, #0877D3); /* La magia de los dos colores */
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 15px rgba(8, 119, 211, 0.25);
    transition: all 0.3s ease;
    border: none;
}

.acp-title-btn:hover {
    background: linear-gradient(135deg, #d22878, #065b99); /* Tonos apenitas más oscuros al hover */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(8, 119, 211, 0.4);
    color: white;
}

.acp-title-btn i {
    font-size: 18px;
    transition: transform 0.3s;
}

.acp-title-btn:hover i {
    transform: translateX(5px);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .acp-header-container {
        flex-direction: column;
        text-align: center;
        border-left: 1px solid #eaeaea;
        border-top: 6px solid #e8368c; /* Pasamos la línea de color arriba */
        padding: 20px;
    }
    .acp-title {
        justify-content: center;
    }
}


.info-important{
	font-size: 13px;
    color: #e17200;
    margin-bottom: 15px;
    text-align: left;
    background-color: #ffedba;
    padding: 9px 12px;
    border-radius: 10px;
    font-weight: bold;
    border-left: 4px solid #e17200;
}

/* ==========================================================================
           ESTILOS DEL PORTAL MAYORISTA
           ========================================================================== */


        .portal-container {
            max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
			width: 100%;
        }

        .portal-header {
            background: #ffffff;
            border-radius: 12px;
            padding: 5px 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            margin-bottom: 0px;
            text-align: center;
        }

        .portal-header h1 {
            color: var(--color1); /* Tu azul principal */
            margin: 0 0 10px 0;
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
        }

        .fecha-verif {
            color: #777;
            font-size: 14px;
            margin-bottom: 20px;
        }

        .alert-info {
            background-color: #e8f5e9;
            color: #2e7d32;
            padding: 15px;
            border-radius: 8px;
            border-left: 5px solid #4caf50;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 20px;
            text-align: left;
        }

        /* --- Buscador --- */
        .search-box {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            background: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
			position: sticky;
    		top: 0;
			z-index: 11;
        }

        .search-box input[type="search"] {
            flex: 1;
            padding: 15px 20px;
            border: 2px solid #eee;
            border-radius: 8px;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s;
            font-family: 'Quicksand', sans-serif;
        }

        .search-box input[type="search"]:focus {
            border-color: var(--color1);
        }

        .btn-search {
            background-color: var(--color1);
            color: white;
            border: none;
            padding: 0 40px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
            text-transform: uppercase;
        }

        .btn-search:hover {
            background-color: #065b99;
        }

        /* --- Acordeones de Filtros --- */
        .filter-section {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            overflow: hidden;
        }

        .filter-header {
            background: #fafafa;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            user-select: none;
        }

        .filter-header h3 {
            margin: 0;
            font-size: 16px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .filter-header input[type="checkbox"] {
            transform: scale(1.3);
            margin: 0;
        }

        .arrow-icon {
            transition: transform 0.3s;
            width: 15px;
            opacity: 0.5;
			transform: rotate(90deg);
        }
        .arrow-icon.rotated {
            transform: rotate(-90deg);
        }

        .filter-body {
            display: none;
            padding: 20px;
            background: #fff;
        }

        .checkbox-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #555;
            cursor: pointer;
        }

        .checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .marcas-seleccionadas {
            font-size: 12px;
            color: var(--color1);
            padding: 10px 20px;
            background: #fdfdfd;
            border-bottom: 1px solid #eee;
            display: none;
        }

        /* --- Loading y Resultados --- */
        .loader-container {
            display: none;
            text-align: center;
            padding: 50px 0;
        }

        #resultado {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            padding: 20px;
            margin-top: 20px;
            overflow-x: auto;
        }

        /* --- Responsive --- */
        @media (max-width: 768px) {
            .search-box {
                flex-direction: column;
            }
            .btn-search {
                padding: 15px;
                width: 100%;
            }
            .checkbox-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 480px) {
            .checkbox-grid {
                grid-template-columns: 1fr;
            }
            .portal-header h1 {
                font-size: 24px;
            }
        }




/* =========================================
   1. CINTA TOP
   ========================================= */

.cintaTop{
	width:100%;
	background:#111;
	border-bottom:1px solid #000;
	padding:0;
}

.cintaTopRight{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
}

.botones-ingreso-top{
	display:flex;
	justify-content:center;
	gap:8px;
	width:100%;
	max-width:1200px;
	padding:5px;
}

.btn-top-login{
	display:flex;
	align-items:center;
	justify-content:center;
	height:80px;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	flex:1;
	max-width:250px;
	border-radius:8px;
	line-height:1.2;
	padding:0 10px;
	transition:.3s;
}

.btn-top-login:hover{
	filter:brightness(1.15);
	transform:translateY(-2px);
	color:#fff;
}

/* Botones */

.btn-mayorista{background:#144496;}
.btn-profesional{background:#0095d6;}
.btn-particular{background:#e8368c;}


/* =========================================
   2. HEADER
   ========================================= */

.cinta_head{
	width:100%;
	background:#fff;
	position:relative;
	z-index:1000;
	padding:15px 20px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	box-shadow:0 2px 10px rgba(0,0,0,.05);
	box-sizing:border-box;
	margin:auto;
}

/* LOGO */

.head_logo_container{
	flex:0 0 250px;
	display:flex;
	justify-content:center;
}

.head_logo_container img{
	width:100%;
	max-width:250px;
	height:auto;
}

/* BUSCADOR */

.head_search_container{
	flex:1;
	max-width:500px;
}

.form-buscador-nuevo{
	display:flex;
	width:100%;
	border:2px solid #eee;
	border-radius:50px;
	background:#f9f9f9;
}

.form-buscador-nuevo input{
	flex:1;
	border:none;
	padding:12px 20px;
	background:transparent;
	outline:none;
	font-size:14px;
}

.form-buscador-nuevo .btn-lupa-nuevo{
	background:var(--color1,#0877D3);
	color:#fff;
	border:none;
	padding:0 20px;
	cursor:pointer;
	transition:.3s;
	display: flex;
    align-items: center;
	border-radius: 0 30px 30px 0;
}

/* ACCIONES */

.head_actions_container{
	display:flex;
	align-items:center;
}

.iconos-accion-head{
	display:flex;
	gap:15px;
	align-items:center;
}


/* =========================================
   3. BANNER ACP
   ========================================= */

.banner-acp-head {
    display: block;
    border-radius: 5px;
    text-decoration: none;
    transition: .3s;
	width: 200px;
}

.banner-acp-head:hover{
	transform:translateY(-3px);
	color:#fff;
}

.banner-acp-head img{
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
	
}

.banner-acp-texto{
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.banner-acp-titulo{
	font-size:18px;
	font-weight:900;
	line-height:1.1;
	letter-spacing:.5px;
}

.banner-acp-subtitulo{
	font-size:12px;
	font-weight:400;
	opacity:.95;
}

.cintaTopRight a {
    padding: 0px 50px;
    display: flex;
    height: 60px;
    margin: 10px;
	font-size: 15px !important;
}


/* =========================================
   4. RESPONSIVE
   ========================================= */

@media (max-width:900px){

	.botones-ingreso-top{
		gap: 5px;
    	padding: 6px 7px;
	}
		
	.cintaTopRight a {
		padding: 0px;
		margin: 3px;
		font-size: 13px !important;
	}
	
	.btn-top-login{
		height:70px;
		font-size:11px;
	}

	.cinta_head{
		flex-direction:column;
		padding:15px 10px;
		gap:15px;
	}

	.form-buscador-nuevo input {
		padding: 17px 20px;
		font-size: 15px;
	}


	.head_logo_container{
		flex:0;
	}

	.head_logo_container img{
		max-width:60%;
	}

	.head_logo_container,
	.head_search_container,
	.head_actions_container{
		width:100%;
		max-width:100%;
		text-align:center;
		justify-content:center;
	}

	

	.banner-acp-head{
		flex:1;
		justify-content:center;
		padding: 10px 20px;
	}
	
	.banner-acp-head img{
		height:55px;
	}

	.banner-acp-titulo {
		font-size: 20px;
	}
	
	.banner-acp-subtitulo {
		font-size: 17px;
	}

	/* MENÚ MOBILE */

	.menu{
		display:block!important;
		width:100%;
		overflow-x:auto;
		white-space:nowrap;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		background:#000;
		border-top:1px solid #333;
	}

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

	.menu>nav>ul{
		display:block;
		padding:10px 15px;
		margin:0;
	}

	.menu>nav>ul>li{
		display:inline-block;
		margin-right:15px;
		background-color: transparent;
	}

	.menu>nav>ul>li>a{
		display:block;
		color:#fff;
		font-size:14px;
		padding: 10px;
		background:transparent;
		font-weight:500;	
		border: none;
	}

	.submenu{
		display:none!important;
	}
}


/* =========================================
   MENÚ DESPLEGABLE MI CUENTA
   ========================================= */
   
/* Contenedor principal */
#menuMiCuenta {
    position: absolute;
    top: 40px; /* Lo bajamos un poquito para que respire */
    right: 0;
    background: #ffffff;
    z-index: 9999;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Sombra más amplia y difuminada */
    min-width: 200px; /* Un poco más ancho para mayor comodidad */
    border: 1px solid #eaeaea;
    transform-origin: top right;
    animation: menuFadeIn 0.2s ease-out;
}

/* El triangulito superior (apunta hacia el nombre del usuario) */
#menuMiCuenta::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 25px; /* Ajustá esto si querés mover el pico más al centro */
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: rotate(45deg);
    border-left: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    z-index: 1;
}

/* Contenedor de cada ítem */
.itemMenuMiCuenta {
    border-bottom: 1px solid #f2f2f2;
    position: relative;
    z-index: 2; /* Para que el fondo blanco tape el sobrante del triangulito */
    background: #ffffff;
}

.itemMenuMiCuenta:first-child { border-radius: 12px 12px 0 0; }
.itemMenuMiCuenta:last-child { border-bottom: none; border-radius: 0 0 12px 12px; }

/* Los enlaces */
.itemMenuMiCuenta .aItem {
    display: block !important;
    padding: 15px 20px !important;
    color: #444444 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
	height: auto;
	margin: 0;
	background-color: transparent;
}

/* Efecto al pasar el mouse (general) */
.itemMenuMiCuenta a:hover {
    background-color: #ffdef9; 
    color: var(--color1, #0877D3); 
    padding-left: 26px; /* Efectito de empuje visual hacia la derecha */
}

/* Estilo y efecto específico para "Salir" */
.itemMenuMiCuenta a.btn-salir-menu {
    color: var(--rojo-cristal, #cc0000);
    font-weight: bold;
}

.itemMenuMiCuenta a.btn-salir-menu:hover {
    background-color: #fff0f0; /* Un rojo súper suave de fondo */
    color: #a30000;
}

/* Animación de entrada suave */
@keyframes menuFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}


/* --- ESTILOS BANNER DE PUNTOS --- */
.banner-puntos-head {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    background: #fffbeb; /* Fondo amarillito/dorado muy suave */
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid #fde68a;
    transition: all 0.3s ease;
}

.banner-puntos-head:hover {
    background: #fef3c7;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}

.icono-puntos {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* Estrella dorada/naranja */
    color: white;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(217, 119, 6, 0.3);
}

.icono-puntos .material-symbols-outlined {
    font-size: 24px;
    margin: 0;
}

.banner-puntos-titulo {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #b45309; /* Texto haciendo juego */
    line-height: 1.2;
    font-family: 'Montserrat', sans-serif;
}

.banner-puntos-subtitulo {
    display: block;
    font-size: 12px;
    color: #d97706;
    font-weight: 600;
}


/* --- CONTROLES DE CARRITO (LISTADO) --- */
.action-group {
    display: flex; 
    align-items: center; 
    gap: 8px; 
    width: 100%;
}

.action-qty-box {
    display: flex; 
    align-items: center; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    overflow: hidden; 
    height: 38px;
    flex-shrink: 0; /* Para que en PC no se achique */
}

/* En PC (pantallas mayores a 600px), el input numérico mide 36px */
.action-qty-box input {
    width: 36px;
}

.action-btn-add {
    flex: 1; 
    height: 38px; 
    border-radius: 4px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    font-weight: bold; 
    font-size: 13px; 
    transition: 0.2s;
    border: none;
    color: white;
}

/* === REGLA MOBILE (Pantallas chicas) === */
@media (max-width: 600px) {
    .action-group {
        flex-direction: column; /* Apila los elementos uno abajo del otro */
        gap: 10px;
    }
    
    .action-qty-box {
        width: 100%; /* El selector de cantidad ocupa el 100% */
        height: 44px; /* Un poco más alto para facilitar el toque con el dedo */
    }
    
    .action-qty-box button {
        width: 50px !important; /* Botones +/- más anchos */
        font-size: 26px !important;
    }
    
    .action-qty-box input {
        flex: 1; /* El input numérico se estira para llenar el espacio del medio */
		font-size: 18px;
    }
    
    .action-btn-add {
        width: 100%; /* El botón agregar ocupa el 100% */
        height: 44px; /* Un poco más alto */
        font-size: 13px;
    	padding: 11px 0;
    }
}



/* Etiqueta Dinámica de Oferta (Hot Sale, Black Friday, etc) */
.badge-leyenda {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--color1); /* Tu color terracota/principal */
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 20px;
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(184, 91, 72, 0.3);
}

/* Etiqueta Dinámica de Oferta (Hot Sale, Black Friday, etc) */
.badge-leyenda-full {
    top: 15px;
    left: 15px;
    background: var(--color1); /* Tu color terracota/principal */
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 6px;
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(184, 91, 72, 0.3);
	margin-left: 5px;
}