/* Estilos globales */
*{box-sizing:border-box} html,body{margin:0}
html { font-size: 16px; box-sizing: border-box; }
body{ font-family: 'Lato', Arial, sans-serif; color:#1A1A1A; }
body{ padding-top: var(--muab-offset, 0); }
.wrap{ max-width:1140px; margin:0 auto; padding-top:2.4rem; padding-bottom: 2.4rem; }
h1, h2, h3, h4 {
color: #2A7A7A;
padding: 0;
margin: 0;
font-weight: 900;
padding-bottom: 2rem;
text-align: center;
}
h1 { font-size: 4rem; }
h2 { font-size: 3.22rem; }
/* ===== Header base ===== */
#site-header{
position:absolute; /* overlay en home si usas header--overlay */
left:0;width:100%;
z-index:100000000; box-sizing:border-box;
}
#site-header .wrap{display:flex;align-items:center;gap:1rem;}
.header-wrap{justify-content:space-between}
/* Nav desktop */
.header-nav{display:flex;align-items:center;padding:12px 24px;background: rgba(51, 51, 51, 0.8);}
.menu{display:flex;gap:.9rem;list-style:none;margin:0;padding:0}
.menu a{color:#fff;text-decoration:none;line-height:1.2; transition: color .18s ease;}
.menu a:hover{color:#2A7A7A;}
.cart-link{margin-left:1rem; text-decoration:none; padding-top: 6px; display:inline-flex; align-items:center; }
.cart-link img{
display:block;
transform-origin:center;
transition: transform .18s cubic-bezier(.22,.8,.2,1);
will-change: transform;
}
/* efecto sutil al pasar el mouse o con teclado */
.cart-link:hover img,
.cart-link:focus-visible img{
transform: scale(1.06); /* ajustá a 1.04–1.08 si querés */
}
/* ===== Hamburguesa ===== */
.hamburger {
display: none;
background: transparent;
border: 0;
cursor: pointer;
z-index: 100000000000000;
position: absolute;
right: 1.56rem;
}
#hamburger .hamburger-box {
display: inline-block;
width: 28px;
height: 20px;
position: relative;
z-index: 100000000000;
}
#hamburger-fab .hamburger-box {
display: inline-block;
width: 28px;
height: 20px;
position: relative;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after{
content:"";position:absolute;left:0;width:28px;height:3px;background:#fff;transition:transform .2s, opacity .2s;
}
.is-active .hamburger-inner, .is-active .hamburger-inner::before, .is-active .hamburger-inner::after{
background:#000;
}
.hamburger-fab .hamburger-inner{
top:50%;
left:0;
transform:translateY(-50%);
}
.hamburger-inner::before{top:-8px}
.hamburger-inner::after{top:8px}
.hamburger.is-active .hamburger-inner{transform:translateY(-50%) rotate(45deg)}
.hamburger.is-active .hamburger-inner::before{opacity:0}
.hamburger.is-active .hamburger-inner::after{transform:rotate(-90deg);top:0}
/* ===== Mobile panel ===== */
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
z-index: 100000;
background: #E6F7F7;
padding: 0px;
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
opacity: 0;
pointer-events: none;
transform: translate3d(0, -80px, 0);
transition: transform .50s var(--tf, cubic-bezier(.16,1,.3,1)), opacity .35s ease-out;
will-change: transform, opacity;
border-radius: 12px;
padding-top: 3rem;
}
.mobile-menu__list ul {
list-style: none;
}
/* Timing al ENTRAR: ease-out fuerte (desacelera al final) */
.mobile-menu.anim-in{ --tf: cubic-bezier(.16,1,.3,1); }
/* Timing al SALIR: ease-in (acelera al inicio, se va hacia arriba) */
.mobile-menu.anim-out{ --tf: cubic-bezier(.55,.06,.68,.19); }
.mobile-menu.is-open{
opacity: 1; pointer-events: auto; transform: translateY(0);
}
.mobile-menu__list {
list-style: none;
margin: 0;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 0rem;
justify-content: center;
}
.mobile-menu__list a {
font-size: 1.3rem;
color: #2A7A7A;
text-decoration: none;
font-weight: 300;
padding-left: 1.5rem;
}
/* Solo afecta al panel móvil */
.mobile-menu li {
position: relative;
border-color: rgba(64, 64, 64, 0.1);
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 15px;
}
.mobile-menu .sub-menu{
display:block;
margin:.4rem 0 0 1rem; /* sangría de hijos */
padding:0;
list-style:none;
}
.mobile-menu li.is-open > .sub-menu{ display:block; }
/* Botón +/– a la derecha del ítem padre */
.mobile-menu .mm-toggle {
position: absolute;
left: 0;
width: 32px;
height: 32px;
border: 0;
background: transparent;
color: #2A7A7A;
cursor: pointer;
font-size: 2rem;
line-height: 32px;
text-align: center;
}
.mm-toggle[aria-expanded="true"] {
top: 0.55rem;
}
.mm-toggle[aria-expanded="false"] { top: 0.8rem;}
.mobile-menu .mm-toggle:focus{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }
/* Texto del enlace no se solape con el botón */
.mobile-menu li.menu-item-has-children > a {
padding-left: 1.5rem;
display: inline-block;
}
li.page_item:active {
color: #2A7A7A;
}
/* Evita scroll del body cuando está abierto el panel */
.body-lock{overflow:hidden;touch-action:none}
/* Resp. */
@media (max-width:900px){
.header-nav{display:none}
.hamburger{display:block;margin-left:auto;}
/* #hero{padding:2.5rem 0} */
.home-search{grid-template-columns:1fr;gap:.5rem}
.benefits{grid-template-columns:1fr}
}
/* Botón fijo fuera del header */
.hamburger-fab{
position:fixed;
right:14px;
top:44px;
z-index:10000000000;
display:none; /* por defecto */
padding:10px;
border-radius:999px;
border-radius: 50%;
background: rgba(44, 122, 122, 1);
width: 56px;
height: 56px;
}
.hamburger-fab .hamburger-inner,
.hamburger-fab .hamburger-inner::before,
.hamburger-fab .hamburger-inner::after{ background:#fff }
/* Estado visible controlado por JS */
.hamburger-fab.is-visible{ display:block; }
.hamburger-fab[hidden]{ display:none !important; }
/* Sólo en móvil */
@media (min-width:901px){
.hamburger-fab{ display:none !important; }
}
/* Hero */
#hero {
background: #1F3A4A;
color: #fff;
height: 100dvh;
background-image: url('../img/fondo-hero.webp');
background-size: cover;
background-repeat: no-repeat;
background-position: 60% center;
min-height: 700px;
}
.hero-inner {
width: 50%;
min-width: 320px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: relative;
z-index: 2;
}
.hero {
display: flex;
align-items: center;
position: relative;
height: 100%;
}
#hero h1 {
font-size: 4rem;
/* margin: 0 0 1rem; */
font-weight: 900;
text-align: left;
color: #fff;
padding-bottom: 1rem;
}
.home-search{width: 100%;}
.input-text {
width: 75%;
padding: 1.5rem 1.25rem;
font-size: 1rem;
background: #E6F3F7;
border: 1px solid #d1d5db;
border-radius: 20px;
outline: none;
transition: .25s;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.input-text::placeholder { color: #9BD2D2; font-style: italic; opacity: 1; }
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1rem 0 0;padding:0;list-style:none}
.benefits li{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:.85rem}
.benefits strong{display:block}
/* escritorio (tu estilo original) */
#bullets { background: #fff; position: relative; }
.bullets-wrap { display: flex; gap: 2rem; justify-content: center; align-items: flex-start; padding-top: 4.8rem; }
.bullet { flex: 1 1 0; text-align: center; color: #398081; box-sizing: border-box; min-width: 0; }
.bullet-icon { display: block; margin-bottom: 0.5rem; }
.bullet-title { font-weight: 900; font-size: 2rem; margin-bottom: .3rem; color: #398081; }
.bullet-desc { font-size: 1rem; font-weight: 400; color: #398081; opacity: 0.85; margin-top: .1rem; line-height: 1.25; }
/* Flechas (ocultas en escritorio si no querés) */
.bullets-section { position: relative; }
.bullets-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: transparent;
color: #2A7A7A;
font-size: 20px;
cursor: pointer;
z-index: 30;
display:flex;
align-items:center;
justify-content:center;
opacity: .95;
}
.bullets-prev { left: 8px; }
.bullets-next { right: 8px; }
/* Móvil: un bullet por pantalla con scroll-snap */
@media (max-width: 768px) {
.bullets-wrap {
display: flex; /* ya lo es, pero importante */
gap: 1rem;
padding: 1.6rem 0 2.4rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
justify-content: flex-start; /* importante para que el primer slide no quede oculto */
}
.bullet {
flex: 0 0 100%;
max-width: 100%;
scroll-snap-align: center;
padding: 0 1rem;
}
/* Ajustes visuales */
.bullet-title { font-size: 1.6rem; }
.bullet-desc { font-size: 0.95rem; }
/* ocultar scroll bar visual (estético) */
.bullets-wrap::-webkit-scrollbar { height: 8px; }
.bullets-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 999px; }
.bullets-wrap { -ms-overflow-style: none; scrollbar-width: none; padding: 4rem 1.56rem !important;}
/* mostrar flechas en móvil */
.bullets-nav { display: flex; background: transparent; }
}
/* ocultar flechas en pantallas grandes si no querés */
@media (min-width: 769px) {
.bullets-nav { display: none; }
}
@media (max-width:768px){
.bullets-wrap.__noSnap { scroll-snap-type: none !important; }
}
.estilo-de-vida {
max-width: 1140px;
margin: auto;
height: 700px;
display: flex;
gap: 15px;
}
.estilo-columna-1 { width: 38.7%; height: 100%; float: left; }
.contenededor-1-2 { width: 61.3%; height: 100%; float: left; display: flex; flex-direction: column; gap: 15px; }
.estilo-fila-1 { width: 100%; height: 62.1%; float: left; display: flex; gap: 15px; }
.estilo-fila-2 { width: 100%; height: 37.9%; float: left; display: flex; gap: 15px; }
.estilo2 { height: 100%; width: 61.5%; float: left; }
.estilo3, .estilo4 { height: 100%; width: 38.5%; float: left; }
.estilo5 { height: 100%; width: 61.5%; float: left; }
.estilo-item {
background-image: var(--img);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
height: 100%;
filter: grayscale(30%) brightness(0.85);
transition: filter 0.35s, transform 0.35s;
cursor: pointer;
}
.estilo-item .estilo-overlay {
position: absolute;
inset: 0;
background: rgba(16,24,32,0.38);
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0;
transition: opacity 0.35s;
}
.estilo-item .estilo-info {
text-align: center;
width: 100%;
padding-bottom: 2.5rem;
}
.estilo-titulo {
color: #fff;
font-size: 2.2rem;
font-weight: bold;
margin-bottom: 1rem;
letter-spacing: 1.2px;
text-shadow: 0 1px 8px #10182044;
}
.estilo-btn:hover, .wc-block-components-button__text:hover { background: #a24d29; }
/* Efecto HOVER: */
.estilo-item:hover, .estilo-item:focus {
filter: none;
z-index: 2;
transform: scale(1.04);
}
.estilo-item:hover .estilo-overlay,
.estilo-item:focus .estilo-overlay {
opacity: 1;
background: rgba(16,24,32,0.38);
}
/* Desenfocar otras imágenes cuando una está activa */
.estilo-de-vida:hover .estilo-item:not(:hover) {
filter: grayscale(80%) brightness(0.75) blur(1px);
transform: scale(1);
z-index: 1;
}
@media (min-width: 900px) {
/* Estado activo inicial */
.estilo-item.is-active{
filter:none;
transform:scale(1.04);
z-index:2;
}
.estilo-item.is-active .estilo-overlay{
opacity:1;
background:rgba(16,24,32,0.38);
}
/* Cuando NO hay hover, pero hay activo, desenfoca el resto */
.estilo-de-vida:not(:hover) .estilo-item:not(.is-active){
filter:grayscale(80%) brightness(0.75) blur(1px);
transform:scale(1);
z-index:1;
}
}
/* WooCommerce – grilla coherente */
.woocommerce ul.products{
display: grid;
gap: 1rem;
margin: 0;
padding: 0;
justify-content: center; /* centra la grid si hay columnas sobrantes */
grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
}
.woocommerce ul.products li.product{
width: auto;
justify-self: center;
margin: 0;
}
.woocommerce .products.grid-cursos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.mu-carousel-box { position: relative; }
.swiper { padding-bottom: 2.5rem; }
.swiper-slide.mu-prod-card {
display: flex;
flex-direction: column;
height: 100%;
min-height: 585px;
}
.mu-prod-img-wrap { width:100%; position:relative; }
.mu-prod-badge {
position: absolute;
top: 8px;
right: 8px;
background: #8E5796;
color: #fff;
font-size: 1.50rem;
border-radius: 50%;
width: 80px; /* O el tamaño que te guste */
height: 80px; /* Igual que el width, sí o sí */
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
padding: 0; /* Importante: SIN padding */
box-sizing: border-box;
text-align: center;
}
.mu-prod-desc {
min-height: unset;
max-height: 1.4em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0.84rem;
}
.mu-prod-price { font-size:1.64rem; font-weight:900; margin-bottom:0.84rem; text-align:left; }
.mu-prod-price .mu-regular { font-size:1rem; text-decoration:line-through; font-weight:400; }
/* .swiper-button-next, .swiper-button-prev { background:#fff; color:#398081; border-radius:50%; width:38px; height:38px; box-shadow:0 2px 10px #0002; top:40%; } */
.swiper-button-next:after, .swiper-button-prev:after { font-size:1.5rem; }
.swiper-button-next.mu-swiper-nav {
right: 2px;
}
.swiper-button-prev.mu-swiper-nav {
left: 2px;
}
.swiper-button-prev.mu-swiper-nav, .swiper-button-next.mu-swiper-nav {
color: #4AA3A8;
transition:.30s;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
scale: 1.3;
color: #3C8F8F;
}
.mu-prod-title h3{
font-size: 1.31rem;
text-align: left;
color: #000;
padding-bottom: 0.84rem;
}
span.mu-sale {
display: block;
width: 100%;
margin-bottom: -0.6rem;
}
.mu-prod-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.31rem;
height: 100%;
}
.mu-prod-content {
flex-shrink: 0;
min-height: 140px;
}
.mu-prod-btns {
display: flex;
gap: 0.6rem;
width: 100%;
}
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover, button.mu-testimonios-cta:hover {
background:#a24d29;; color:#fff;
}
.woocommerce-message {
border: none;
background-color: transparent;
margin: 0;
color: #fff;
padding: 20px;
}
.woocommerce-message__text {
float: left;
padding: 12px 16px;
margin-left: 17px;
}
.woocommerce-notices-wrapper {
background-color: #4AA3A8;
}
.woocommerce-message::before {
content: "\e015";
color: #fff;
}
.woocommerce-message:focus {
outline: none !important;
}
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
font-family: WooCommerce;
display: inline-block;
position: absolute;
top: 34px;
left: 1.5em;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0 !important;
pointer-events: none !important;
z-index: 20 !important;
}
.mu-carousel-pagination {
text-align: center;
margin-top: 20px;
padding-bottom: 10px;
min-height: 32px;
position: relative;
z-index: 2;
}
.mu-carousel-bullet {
display: inline-block;
width: 32px;
height: 32px;
margin: 0 4px;
border-radius: 50%;
background: #e6e8e6;
opacity: 1;
border: 2px solid #d7d7d7;
transition: background .3s, border .2s;
cursor: pointer;
}
.swiper-pagination-bullet {
opacity: 1 !important;
background-color: #fff !important;
}
.mu-carousel-bullet-active,
.mu-carousel-bullet.swiper-pagination-bullet-active {
background: #3C8F8F !important;
border: 2px solid #3C8F8F !important;
}
.swiper-pagination.mu-carousel-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: -40px;
}
/* Animación suave al pasar el mouse por una card de producto */
.swiper-slide.mu-prod-card {
transition: box-shadow 0.28s cubic-bezier(.35,1.7,.69,.84), transform 0.29s cubic-bezier(.22,1.05,.55,.89);
/* box-shadow: 0 3px 14px 0 #0001; */
will-change: transform, box-shadow;
background: #fff;
border-radius: 18px;
overflow: hidden;
}
.swiper-slide.mu-prod-card:hover,
.swiper-slide.mu-prod-card:focus-visible {
transform: translateY(-10px) scale(1.032);
box-shadow: 0 8px 32px 0 #0002, 0 2px 8px #ffd16633;
z-index: 2;
}
/* Barra fija arriba */
#muab-notice-bar{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1999;
background: #D3D53D;
color: #222;
text-align: center;
box-shadow: 0 2px 14px #0001;
}
/* Contenedor interno */
#muab-notice-bar .muab-notice-inner{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 6px 36px 6px 14px; /* deja espacio al botón cerrar */
position: relative;
}
/* Items en flujo normal: uno visible por vez */
.muab-notice-item{
display: none;
opacity: 0;
transform: translateY(-6px);
transition: opacity .42s cubic-bezier(.2,.9,.2,1), transform .42s cubic-bezier(.2,.9,.2,1);
}
/* Visible */
.muab-notice-item.visible{
display: block;
opacity: 1;
transform: translateY(0);
}
/* Botón cerrar dentro de la barra */
#muab-close{
position: absolute;
right: 8px;
top: 6px;
background: transparent;
border: 0;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: #222;
}
.menu-categorias {
display: none;
position: absolute;
top: 120%; left: 0;
width: 100%;
background: #2A7A7A;
border: 1px solid #e6e8e6;
border-radius: 10px;
box-shadow: 0 8px 24px #0001;
z-index: 10;
padding: 6px 0;
max-height: 280px;
overflow-y: auto;
font-size: 1.1em;
}
.menu-cat-item {
padding: 10px 18px;
cursor: pointer;
transition: background 0.15s;
}
.menu-cat-item:hover, .menu-cat-item:focus {
background: #E6F7F7;
color: #257a7a;
}
.label-search:focus-within .menu-categorias,
.input-text:focus + .menu-categorias {
display: block;
}
.content-area.tienda-con-sidebar {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 2.5rem;
max-width: 1140px;
margin: 0 auto;
}
.tienda-con-sidebar #secondary,
.tienda-con-sidebar .widget-area {
width: 260px;
min-width: 180px;
margin-right: 0;
order: 1;
}
.tienda-con-sidebar .site-main {
flex: 1 1 0;
min-width: 0;
order: 2;
}
.swiper {
overflow: visible !important;
}
/* filtro precios */
.widget {
margin-bottom: 2rem;
border-bottom: 1px solid #E6F7F7;
padding-bottom: 2rem;
}
h3.widget-title {
text-align: left;
padding-bottom: 1rem;
}
input[type="number"] {
border: 1px solid #d1d5db;
padding: 0.2rem 0.5rem;
border-radius: 6px;
outline: none;
transition: .25s;
}
header.woocommerce-products-header {
display: none;
}
/* =============================
Ajustes: cards en página de products
============================= */
/* Mantener min-height grande solo para slides del carousel */
.swiper-slide.mu-prod-card { min-height: 585px; }
/* Para la grilla de WooCommerce no queremos ese min-height */
.woocommerce ul.products li.product.mu-prod-card,
.woocommerce .products .mu-prod-card {
min-height: 0;
height: auto;
padding: 0;
background: #fff;
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Contenido y layout interior */
.woocommerce ul.products li.product.mu-prod-card .mu-prod-body {
padding: 1.25rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.75rem;
flex: 1 1 auto;
min-height: 266px;
}
.woocommerce ul.products li.product.mu-prod-card .mu-prod-content { min-height: 120px; }
/* Descripción: permitir multilinea controlada */
.woocommerce ul.products li.product.mu-prod-card .mu-prod-desc {
white-space: normal;
max-height: 3.6em; /* ~2 líneas */
overflow: hidden;
text-overflow: ellipsis;
}
/* Botones: full width y coherentes con grid */
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns {
display: flex;
gap: 0.6rem;
}
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns .button,
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns .mu-btn {
flex: 1 1 0;
min-width: 0;
padding: .9rem;
}
/* Ajustes responsive para la grilla (si hace falta) */
/* Marco fijo 250×220 centrado */
.woocommerce ul.products li.product.mu-prod-card .mu-prod-img-wrap {
width:100% !important;
max-width:250px !important;
height:220px !important;
display:grid !important;
place-items:center !important;
margin:0 auto !important;
overflow:visible !important; /* sin recorte */
}
.swiper-slide.mu-prod-card.swiper-slide .contenedor-producto .mu-prod-img-wrap {
width:100% !important;
max-width:364px !important;
height:320px !important;
display:grid !important;
place-items:center !important;
margin:0 auto !important;
overflow:visible !important; /* sin recorte */
}
/* La imagen encaja sin recorte y se centra */
.woocommerce ul.products li.product.mu-prod-card .mu-prod-img-wrap > a{
display:grid !important;
place-items:center !important;
width:100% !important;
height:100% !important;
}
.mu-prod-img-wrap {
display:grid !important;
place-items:center !important;
width:100% !important;
height:100% !important;
}
/* === Center product gallery image (both axes) === */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image > a{
display:grid; /* crea un frame */
place-items:center; /* centra X e Y */
min-height:420px; /* frame mínimo; ajustá si querés */
}
.single-product .woocommerce-product-gallery__image img{
display:block;
margin:0; /* sin márgenes raros */
width:auto !important; /* evita estirar */
height:auto !important;
max-width:100% !important;
max-height:100% !important;
object-fit:contain; /* respeta proporciones */
object-position:center;
}
/* Single product: estabilidad cuando faltan tabs/relacionados */
.single-product .product::after{content:"";display:block;clear:both} /* clearfix por si hay floats */
.single-product .woocommerce-product-gallery,
.single-product .summary{min-height:1px} /* evita colapsos si falta alguna columna */
/* Gap condicional impreso por el template */
.spacer-footer-guard{height:64px}
@media (max-width:900px){.spacer-footer-guard{height:40px}}
.swiper-slide.mu-prod-card.swiper-slide .contenedor-producto .mu-prod-img-wrap > a {
display:grid !important;
place-items:center !important;
width:100% !important;
height:100% !important;
}
.woocommerce ul.products li.product.mu-prod-card .mu-prod-img-wrap img {
width:auto !important;
height:auto !important;
max-width:250px !important; /* ≤ 250 */
max-height:220px !important; /* ≤ 220 */
object-fit:contain !important;
object-position:center !important;
display:block !important;
}
.swiper-slide.mu-prod-card.swiper-slide .contenedor-producto .mu-prod-img-wrap img {
width:auto !important;
height:auto !important;
max-width:364px !important; /* ≤ 250 */
max-height:320px !important; /* ≤ 220 */
object-fit:contain !important;
object-position:center !important;
display:block !important;
}
/* contenedor */
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns{
display:flex;
gap:0.6rem;
align-items:stretch; /* obliga a igualdad de alto */
}
/* eliminar diferencias por estilos heredados (si es necesario) */
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns .button[aria-disabled="true"],
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns .button.disabled {
opacity:.6;
pointer-events:none;
}
.widget_mu_filter_price_multi button{
width:24px;
height:24px;
padding:0;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:1px solid rgba(42,122,122,0.18);
background:linear-gradient(180deg,#ffffff 0%, #f7fbfb 100%);
box-shadow: 0 4px 10px rgba(31,58,74,0.06);
cursor:pointer;
transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
color:#2A7A7A;
}
/* icono centrado (usa la fuente swiper-icons) */
.widget_mu_filter_price_multi button::after{
content: 'next';
font-family: "swiper-icons";
font-size:12px; /* tamaño del icono dentro del círculo */
line-height:1;
display:inline-block;
transform:translateY(0);
}
/* Formato: poner botón al lado de los campos (price filter) */
.widget_mu_filter_price_multi .mu-filter-price-form {
display: flex;
gap: 8px;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
}
/* Inputs: que ocupen el espacio disponible y mantengan proporción */
.widget_mu_filter_price_multi .mu-filter-price-form input[type="number"] {
flex: 1 1 0;
min-width: 72px;
height: 36px;
padding: 6px 8px;
box-sizing: border-box;
}
/* Botón: no se estire, centrado verticalmente */
.widget_mu_filter_price_multi .mu-filter-price-form button {
flex: 0 0 auto;
width: 36px; /* ancho visual del círculo */
height: 36px; /* alto para coincidir con inputs */
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(42,122,122,0.18);
background: linear-gradient(180deg,#ffffff 0%, #f7fbfb 100%);
box-shadow: 0 4px 10px rgba(31,58,74,0.06);
color: #2A7A7A;
transition: transform .12s, box-shadow .12s, border-color .12s;
}
/* Icono dentro del botón (mantener tamaño proporcional) */
.widget_mu_filter_price_multi .mu-filter-price-form button::after {
font-size: 14px;
line-height: 1;
}
.woocommerce .woocommerce-ordering select {
vertical-align: top;
border-radius: 12px;
padding: 0.5rem;
border: 1px solid #C2C2C2;
color: #464646;
}
/* Fuerza quitar apariencia nativa y dibujar flecha propia */
.woocommerce-ordering select.orderby,
.woocommerce form .orderby {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 1rem;
line-height: 1;
background-repeat: no-repeat;
background-position: right 12px center; /* <-- mueve la flecha respecto al borde derecho */
background-size: 14px 14px; /* tamaño del icono */
/* icono SVG inline (color ajustable). Cambia fill=%233C8F8F por otro color si hace falta */
background-image: url("data:image/svg+xml;utf8,");
}
/* Si el tema aplica reglas más específicas, usa !important (sólo si hace falta) */
/* Foco accesible */
.woocommerce-ordering select.orderby:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(42,122,122,0.08);
border-color: #2A7A7A;
}
/* Nota: iOS Safari mantiene su UI nativa en algunos casos. Si necesitas control total en iOS
debes envolver el select en un .mu-select-wrap y usar la técnica de wrapper que te propuse antes. */
/* Variante: si querés mantener 24px en vez de 36px
descomenta estas líneas y comenta las anteriores de width/height 36px */
/*
.widget_mu_filter_price_multi .mu-filter-price-form button {
width:24px;height:24px;
}
.widget_mu_filter_price_multi .mu-filter-price-form input[type="number"] { height:28px; }
.widget_mu_filter_price_multi .mu-filter-price-form button::after { font-size:12px; }
*/
/* Responsive: apilar en pantallas pequeñas */
.mu-filter-menu li {
list-style: none;
}
.mu-filter-menu li a{
text-decoration: none;
color: inherit;
}
.widget ul {
padding-inline-start: 0;
margin: 0;
}
.widget_mu_filter_tags_multi .mu-filter-menu li {
padding: 0.25rem 0;
}
a.mu-sub-add{
position: relative;
padding-inline-start: 18px; /* mantiene espacio para el guion */
display: inline-block;
}
/* guion ubicado en la zona del padding, verticalmente centrado */
a.mu-sub-add::before{
content: "–"; /* guion (puedes cambiar por "-" o "—") */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: #333;
font-weight: 700;
line-height: 1;
margin-right: 6px;
}
/* Categories widget: subcategorías colapsables, toggle inmediatamente a la derecha */
.mu-filter-cat-menu{ list-style:none; margin:0; padding:0; }
.mu-filter-cat-menu .mu-cat-item{ margin:6px 0; }
/* fila: nombre y toggle juntos; toggle aparece después del nombre en el flujo visual */
.mu-cat-row {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-start;
}
/* contenedor izquierdo para nombre/links; ocupa el espacio necesario pero no empuja toggle */
.mu-cat-row .mu-cat-left {
order: 1;
display: flex;
align-items: center;
gap: 8px;
flex: 0 1 auto;
min-width: 0;
}
/* toggle (+ / −) visible a la derecha del nombre (no se empuja al extremo) */
.mu-cat-toggle {
order: 2;
margin-left: 8px;
width:28px;
height:28px;
border:1px solid #e1e1e1;
color:#333;
background:#fff;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:500;
font-size:24px;
line-height:1;
padding:0;
}
.mu-cat-toggle:focus{ outline: none; box-shadow: 0 0 0 4px rgba(42,122,122,0.08); }
/* placeholder cuando no hay toggle (mantiene alineación) */
.mu-cat-no-toggle{ order:2; width:28px; display:inline-block; }
/* nombres y links dentro de la celda izquierda */
.mu-cat-add, .mu-sub-add,
.mu-cat-name, .mu-sub-name {
text-decoration:none;
color:inherit;
display:inline-block;
border-radius:8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* estilo para elemento activo (seleccionado) */
.mu-cat-name.active, .mu-sub-name.active {
font-weight:700;
padding:6px 10px;
background:#E6F7F7;
border-radius:8px;
}
/* remove link (pequeña X) */
.mu-cat-remove, .mu-sub-remove {
margin-left:8px;
color:#c33;
text-decoration:none;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* sublista */
.mu-cat-sub{ list-style:none; margin:6px 0 0 0; padding-left:34px; transition: max-height .18s ease, opacity .12s ease; }
.mu-cat-sub.collapsed{ display:none; }
.mu-cat-sub.open{ display:block; }
.mu-sub-item{ margin:4px 0; }
/* mobile: compacto pero mantiene toggle a la derecha del nombre */
.mu-applied-filters{margin:0.25rem 0;}
.mu-filter-chip{display:inline-block;padding:6px 10px;border-radius:16px;background:#f1f1f1;color:#111;text-decoration:none;margin:4px;font-size:13px}
.mu-filter-chip .mu-chip-x{margin-left:8px;opacity:.7}
/* Fuerza grilla 3/2/1 y alineado a la izquierda (sobrescribe reglas previas) */
.tienda-con-sidebar .site-main .woocommerce ul.products,
.woocommerce ul.products {
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
justify-content: start; /* alinea la grilla a la izquierda */
align-items: start;
}
/* Desktop: 3 columnas iguales */
@media (min-width: 1140px) {
.woocommerce ul.products {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* Cada item ocupa su columna y no se estira a más columnas */
.woocommerce ul.products li.product {
width: auto;
margin: 0;
justify-self: stretch;
align-self: start;
max-width: none;
}
/* En caso de que haya estilos que centren internamente el .site-main */
.tienda-con-sidebar .site-main { align-items: start; }
/* SVG del botón: tamaño y color controlados por CSS */
.mu-load-more-btn { color: #2A7A8A; } /* color del icono */
.mu-load-more-btn .mu-load-more-svg {
width: 32px;
height: 32px;
display: inline-block;
vertical-align: middle;
transition: background 50s;
transform: translateY(1px);
}
.mu-load-more-btn:active .mu-load-more-svg,
.mu-load-more-btn:focus .mu-load-more-svg,
.mu-load-more-btn:hover .mu-load-more-svg {
color: #fff; /* color en hover/focus */
transform: translateY(3px);
}
.mu-load-more-wrap{ display:flex; justify-content:flex-start; margin:1.25rem 0 2rem; }
.mu-load-more-btn {
width: 40px;
border: none;
background: #9BD2D2;
display: inline-flex;
transform: translateY(1px);
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
color: #2A7A8A;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
margin: auto;
padding: 6px;
border-radius: 50%;
height: 40px;
}
.mu-load-more-btn[disabled]{ opacity:.45; cursor:default; transform:none }
.mu-load-more-busy{ width:18px; height:18px; border:2px solid rgba(0,0,0,0.12); border-top-color:#2A7A8A; border-radius:50%; animation:mu-spin .8s linear infinite; }
@keyframes mu-spin{ to{ transform:rotate(360deg); } }
main#main {
max-width: 1140px;
margin: auto;
margin-top: 2rem;
}
.woocommerce div.product .product_title {
text-align: left;
}
/* Badge % OFF estilo similar al de la grid */
.onsale {
position: absolute;
top: 8px;
background: #8E5796;
color: #fff;
font-size: 1.50rem;
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
padding: 0;
box-sizing: border-box;
text-align: center;
}
/* Asegurar que el contenedor de la imagen permite posicionamiento absoluto */
.woocommerce-product-gallery,
.woocommerce div.product .images {
position: relative;
}
/* Variante más pequeña en grids */
ul.products .product .mu-onsale,
.swiper-slide.mu-prod-card .mu-onsale {
width: 48px;
height: 48px;
font-size: 12px;
top: 8px;
right: 8px;
}
/* Mostrar precio de venta encima y precio regular (del) debajo */
.price {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
margin-top: 20px;
}
/* Forzar que el (precio actual) aparezca primero visualmente */
.price ins, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
order: -1;
font-size: 2rem;
font-weight: 900;
color: #111;
line-height: 1.05;
text-decoration: none;
}
.woocommerce-product-details__short-description p {
margin: 0;
margin-top: 20px;
}
.entry-summary form.cart {
margin-top: 20px;
}
p.whatsapp-1 {
margin: 0;
margin-top: 20px;
}
.product_meta {
margin-top: 20px;
display: flex;
gap: 1rem;
}
.button-whatsapp-1{
display:inline-flex;
align-items:center; /* centra verticalmente el texto respecto al icono */
gap:10px; /* espacio entre icono y texto */
color:#075E54;
text-decoration:none;
line-height:1;
vertical-align:middle;
}
.posted_in, .tagged_as{
background-color: #E6F7F7;
padding: 0.75rem;
border-radius: 12px;
font-size: 0.85rem;
}
.posted_in a, .tagged_as a {
color:#075E54;
}
ul.tabs.wc-tabs {
display: none;
}
.woocommerce-Tabs-panel h2 {
font-size: 1.22rem;
text-align: left;
padding-bottom: 0px;
}
.woocommerce div.product .woocommerce-tabs .panel {
margin: 0 0 2em;
padding: 5rem;
background-color: #E6F7F7;
border-radius: 16px;
}
/* fuerza tamaño fijo del SVG y evita que deforme la línea */
.button-whatsapp-1 svg{
width:32px;
height:32px;
flex:0 0 32px;
display:block;
}
/* si necesitas un texto más pequeño/ajustado */
.button-whatsapp-1 .whatsapp-text{
display:inline-block;
font-size:1rem;
font-weight:600;
}
/* Estilo para el precio regular (tachado) debajo */
.price del {
order: 0;
font-size: 1rem; /* ajusta tamaño */
color: #111;
text-decoration: line-through;
opacity: .95;
margin-top: .15rem;
}
/* pequeños ajustes para que los spans internos no rompan el layout */
.price .woocommerce-Price-amount,
.price .woocommerce-Price-currencySymbol {
display: inline;
}
/*MODULO MINI CARRITO*/
/* --- Reset / box model --- */
.mini-cart-cuatroelementos-panel,
.mini-cart-cuatroelementos-item,
.mini-cart-cuatroelementos-item * { box-sizing: border-box; }
.contenedor-footer-mini-carro {
max-width: 120px;
}
.boton-mini-carro {
display: flex
;
gap: 5px;
}
/* --- Toggle (botón flotante) --- */
.mini-cart-cuatroelementos-toggle{
position:fixed;
right:18px;
bottom:90px;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
width:64px;
height:64px;
border-radius:50%;
background:#2A7A7A;
color:#fff;
cursor:pointer;
box-shadow:0 6px 18px rgba(0,0,0,.18);
transition:transform .12s ease, box-shadow .12s ease;
}
.mini-cart-cuatroelementos-toggle{
border:1px solid rgba(0,0,0,.08);
transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
will-change: transform, box-shadow;
overflow:visible;
}
.mini-cart-cuatroelementos-toggle::before{
content:"";
inset:0;
border-radius:50%;
pointer-events:none;
background: linear-gradient(135deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 40%);
mix-blend-mode:soft-light;
}
.mini-cart-cuatroelementos-toggle:hover{
outline:0;
box-shadow:
0 10px 24px rgba(0,0,0,.22),
0 0 0 6px rgba(42,122,122,.10);
}
/* .mini-cart-cuatroelementos-toggle:active{ transform:translateY(1px); box-shadow:0 4px 12px rgba(0,0,0,.16); } */
.mini-cart-cuatroelementos-toggle:active{
transform:translateY(2px) scale(.995);
box-shadow:
0 6px 14px rgba(0,0,0,.20),
inset 0 1.5px 0 rgba(255,255,255,.30),
inset 0 -4px 10px rgba(0,0,0,.06);
filter:brightness(.98);
}
.mini-cart-cuatroelementos-toggle .mini-cart-count{
position:absolute;
top:-6px;
right:-6px;
background:#D3D53D;
color:#000;
border-radius:16px;
padding:2px 7px;
font-size:12px;
font-weight:700;
}
/* --- Panel --- */
.mini-cart-cuatroelementos-panel{
position:fixed;
right:96px;
bottom:18px;
z-index:99999;
width:360px;
max-width:92vw;
background:#fff;
border-radius:12px;
box-shadow:0 8px 30px rgba(0,0,0,.25);
overflow:hidden;
/* mantener en DOM para animar sin 'display:none' */
display:block;
transform-origin:100% 100%;
/* estado cerrado */
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(18px) scale(.985);
transition:
opacity .34s cubic-bezier(.22,.9,.32,1),
transform .34s cubic-bezier(.22,.9,.32,1),
visibility .34s;
will-change: transform, opacity;
}
/* estado abierto (se activa con aria-hidden="false") */
.mini-cart-cuatroelementos-panel[aria-hidden="false"]{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0) scale(1);
}
/* header */
.mini-cart-cuatroelementos-panel .mini-cart-header {
background-color: #2A7A7A;
padding: 6px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.titulo-header-mini-cart{ color:#fff; font-weight:500; font-size:15px; }
.mini-cart-cuatroelementos-close{
background:transparent;
border:none;
font-size:18px;
padding:8px;
cursor:pointer;
color:aliceblue;
}
.mini-cart-cuatroelementos-close:hover{ color:#e9f6f5; transform:translateY(-1px); }
/* items container */
.mini-cart-cuatroelementos-items{
max-height:58vh;
overflow:auto;
-webkit-overflow-scrolling:touch;
background:#fff;
}
/* single item - layout improved */
.mini-cart-cuatroelementos-item {
display: flex
;
gap: 12px;
padding: 20px 10px;
border-bottom: 1px solid #f4f4f4;
align-items: flex-start;
min-height: 76px;
background: #fff;
}
/* thumbnail */
.mini-cart-cuatroelementos-item .mini-cart-item-thumb{ flex:0 0 64px; display:block; }
.mini-cart-cuatroelementos-item .mini-cart-item-thumb img,
.mini-cart-cuatroelementos-item .mini-cart-item-thumb a img{
width:auto;
height:65px;
object-fit:cover;
display:block;
}
/* info column */
.mini-cart-cuatroelementos-item .mini-cart-item-info{
flex:1;
min-width:0;
display:flex;
align-items:flex-start;
}
.mini-cart-cuatroelementos-item .mini-cart-item-sub-info{
display:flex;
flex-direction:column;
width:100%;
}
.mini-cart-cuatroelementos-item .mini-cart-item-title {
display: block;
font-size: 16px;
/* font-weight: 500; */
color: #222;
/* line-height: 1.15; */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* price + savings */
.mini-cart-precio{ margin-top:0; }
.mini-cart-item-subtotal {
font-weight: 700;
margin-left: 0;
font-size: 18px;
display: inline-block;
}
.mini-cart-item-savings {
font-size: 12px;
color: #8E5796;
}
.mini-cart-savings{
font-size:12px;color:#8E5796;
}
/* controls column (cantidad + eliminar) */
.mini-cart-cuatroelementos-qty{
display:flex;
align-items:center;
justify-content:flex-end; /* alinea todo a la derecha */
}
/* cantidad input */
.mini-cart-cantidad{
display:flex;
flex-direction:column; /* apila verticalmente */
align-items:flex-end; /* alinea a la derecha; usar center/stretch si querés otra alineación */
justify-content:center; /* controla el reparto vertical (podés poner space-between) */ /* separación entre elementos */
flex:0 0 auto;
box-sizing:border-box;
}
.mini-cart-cuatroelementos-qty input,
.mu-qty-input{
width:64px;
height:43px;
padding:4px 6px;
text-align:center;
border:1px solid #e6e6e6;
border-radius:0px;
font-size:14px;
background:#fff;
box-sizing:border-box;
}
.mini-cart-cuatroelementos-qty input:focus,
.mu-qty-input:focus{ outline:2px solid rgba(42,122,122,.12); box-shadow:none; }
/* remove button aligned bottom */
.mini-cart-cuatroelementos-remove {
margin-top: 0;
height: 36px;
min-width: 8px;
padding: 0 10px;
display: inline-flex
;
align-items: center;
justify-content: center;
border-radius: 0 !important;
border: 0px !important;
background: #fff;
cursor: pointer;
font-size: 24px;
color: darkgray;
transition: background .12s ease, transform .06s ease, color .12s ease;
}
.mini-cart-cuatroelementos-remove:hover{
background:rgba(42,122,122,.06);
color:#15343a;
transform:translateY(-1px);
}
/* legacy qty buttons (if used elsewhere) */
.mini-cart-cuatroelementos-qty button{
width:30px; height:19px; border-radius:0px; border:1px solid #ddd; background:#fff; cursor:pointer;
}
/* footer */
.mini-cart-cuatroelementos-footer{
padding:22px 12px;
display:flex;
justify-content:space-between;
align-items:center;
background:#fff;
}
.mini-cart-cuatroelementos-footer .mini-cart-total{
font-weight:700;
}
/* empty state */
.mini-cart-cuatroelementos-empty{
padding:18px;
text-align:center;
color:#666;
background:#fff;
}
/* overlay para oscurecer fondo cuando el panel está abierto */
#mu-mini-cart-overlay{
position:fixed; inset:0;
background:rgba(0,0,0,.75); /* menos opaco para no "matar" la página */
z-index:99990;
opacity:0; visibility:hidden;
transition:opacity .34s cubic-bezier(.22,.9,.32,1), visibility .34s;
}
#mu-mini-cart-overlay.visible{ opacity:1; visibility:visible; }
/* scrollbar cosmetico */
.mini-cart-cuatroelementos-items::-webkit-scrollbar{ width:8px; }
.mini-cart-cuatroelementos-items::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.08); border-radius:6px; }
/* accessibility helper */
.sr-only{
position:absolute!important;
width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0);
white-space:nowrap; border:0;
}
/* MODULO TESTIMONIOS */
.mu-testimonios-wrap {
margin: 0 auto;
padding: 4rem 0;
box-sizing: border-box;
background-color: #9BD2D2;
}
html, body { overflow-x: hidden; }
.mu-testimonios-wrap h2 { text-align:center; margin:0 0 1rem; color:#174a4a; }
/* contenedor con perspectiva centrado (altura reducida) */
.mu-testimonios-carousel {
width:100%;
height:250px; /* menor altura para tarjetas más compactas */
position:relative;
margin:0 auto;
perspective:1200px;
perspective-origin:50% 50%;
overflow:visible;
display:block;
}
/* pista central. mantiene el punto de rotación en el centro del contenedor */
.mu-testimonios-track {
position:absolute;
left:50%;
top:50%;
width:0;
height:0;
transform-style:preserve-3d;
transform: translate(-50%,-50%) rotateY(0deg);
transition: transform 0.8s ease;
}
.boton-testimonio {
position: relative;
min-height: 100px;
top: 30px;
}
.boton-testimonio > button{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
/* cada tarjeta ubicada en 0,0 del track; transform en JS hace el resto */
/* ancho y padding reducidos, radio menor */
.mu-testimonio-slide {
position:absolute;
left:50%;
top:50%;
width:260px; /* antes 320px */
box-sizing:border-box;
transform-origin:50% 50% 0;
backface-visibility: hidden;
background:#fff;
border-radius:32px; /* menos redondeo si preferís */
padding:1.6rem; /* antes 3rem */
box-shadow: 0 8px 18px rgba(0,0,0,0.07);
border:4px solid #C4E8E8;
transition: transform .6s cubic-bezier(.2,.9,.3,1), opacity .45s ease;
will-change: transform, opacity;
margin:0;
}
/* contenido interno: ajustar tamaños de fuente para mantener proporciones */
.mu-testimonio-quote { font-style:normal; color:#133f3f; line-height:1.4; margin-bottom:10px; font-size:14px; }
.mu-testimonio-author { font-weight:700; color:#175b5b; margin-bottom:4px; font-size:15px; }
.mu-testimonio-local { font-size:12px; color:#2f6f6f; }
/* controles */
.mu-testimonios-controls { position:absolute; left:0; right:0; bottom:-35px; display:flex; justify-content:center; gap:8px; z-index:50; }
.mu-testimonios-btn { background:transparent; border:none; padding:8px; cursor:pointer; }
.mu-testimonio-quote,
.mu-testimonio-author,
.mu-testimonio-local {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
}
/* pausa al hover */
.mu-testimonios-carousel:hover .mu-testimonios-track { animation-play-state: paused; }
/* modal styles */
.mu-t-modal { position: fixed; left:0; top:0; width:100%; height:100%; display:none; align-items:center; justify-content:center; padding:20px; z-index:100000; }
.mu-t-modal.open { display:flex; }
.mu-t-modal-bg { position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.75); }
.mu-t-modal-panel { position:relative; background:#fff; border-radius:10px; max-width:720px; width:100%; padding:1rem; z-index:2; box-shadow:0 20px 60px rgba(0,0,0,0.25); max-height:90vh; overflow:auto; }
.mu-t-modal-close { position:absolute; right:10px; top:10px; background:transparent; border:0; font-size:20px; cursor:pointer; }
.mu-t-modal-panel h2 {
font-size: 2rem;
padding-bottom: 1rem;
}
/* MU Testimonios - Formulario minimalista moderno */
.mu-testimonios-form {
max-width: 640px;
margin: 0 auto;
padding: 28px;
border-radius: 12px;
box-sizing: border-box;
color: #333;
}
/* mensaje de estado */
.mu-test-form-msg {
margin-bottom: 12px;
padding: 10px 12px;
border-radius: 8px;
font-size: 14px;
}
.mu-test-form-msg[role="alert"] { background:#FFECE8; color:#6b1f1f; border:1px solid rgba(180,60,60,0.12); }
.mu-test-form-msg[role="status"] { background:#EDF8F6; color:#0f5d58; border:1px solid rgba(30,120,110,0.08); }
/* campos */
.mu-field {
display: block;
margin-bottom: 14px;
}
.mu-field label {
display:block;
font-size:13px;
margin-bottom:8px;
color: #2b5656;
font-weight:600;
letter-spacing:0.1px;
}
.mu-input,
.mu-textarea {
width:100%;
padding:12px 14px;
border-radius:10px;
border:1px solid rgba(36,95,95,0.12);
background: #fbffff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
font-size:15px;
color:#133f3f;
transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
outline: none;
resize: vertical;
}
/* foco visible, sutil elevación */
.mu-input:focus,
.mu-textarea:focus {
border-color: rgba(47,111,111,0.28);
box-shadow: 0 6px 20px rgba(27,71,71,0.06);
transform: translateY(-1px);
}
/* placeholder */
.mu-input::placeholder,
.mu-textarea::placeholder { color: rgba(19,63,63,0.4); }
/* botón principal */
.mu-btn-primary {
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 18px;
border-radius:10px;
background: linear-gradient(180deg, #196a66 0%, #155652 100%);
color:#fff;
border: none;
cursor: pointer;
font-weight:700;
letter-spacing:0.2px;
box-shadow: 0 8px 20px rgba(21,86,82,0.14);
transition: transform .12s ease, box-shadow .14s ease, opacity .12s ease;
font-size:15px;
}
.mu-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(21,86,82,0.16); }
.mu-btn-primary:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(21,86,82,0.12); }
.mu-btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }
@media (max-width: 599.98px){
.mu-swiper-nav{ display:none !important; }
}
/*header*/
#site-header.header--overlay {
position: absolute;
left: 0;
width: 100%;
background: transparent;
z-index: 1000;
}
#site-header.header--static {
position: -webkit-sticky;
position: relative;
left: 0;
width: 100%;
z-index: 1000;
background: #fff;
background-color: #3C645E;
}
/* Contenedor */
.mu4e-filter-area{ margin-bottom:1rem; }
/* Botón móvil */
.mu4e-filter-toggle{
display:none;
width:100%;
padding:.75rem 1rem;
border:0;
border-radius:10px;
background:#2A7A7A;
color:#fff;
font-weight:700;
cursor:pointer;
}
/* Chips */
.mu4e-filter-tags{
display:flex; flex-wrap:wrap; gap:.5rem;
margin:.5rem 0 0;
}
.mu4e-chip{
display:inline-block;
padding:.35rem .6rem;
border-radius:999px;
background:#E8F1F1;
color:#2A7A7A;
font-size:.85rem;
line-height:1;
white-space:nowrap;
}
/* Box de filtros (widgets) */
.mu4e-filter-box{
margin-top:.75rem;
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
padding:1rem;
opacity:0; transform:translateY(-8px);
transition:opacity .22s ease, transform .22s ease;
}
.mu4e-filter-box.is-open{ opacity:1; transform:translateY(0); }
/* Desktop: igual que antes, siempre visible */
@media (min-width: 901px){
.mu4e-filter-toggle{ display:none; }
.mu4e-filter-box{
opacity:1 !important; transform:none !important;
transition:none !important;
}
.mu4e-filter-box[hidden]{ display:block !important; } /* asegura visible */
}
.woocommerce .products ul::after, .woocommerce .products ul::before, .woocommerce ul.products::after, .woocommerce ul.products::before {
content: none;
display: table;
}
.woocommerce ul.products li.product.mu-prod-card, .woocommerce .products .mu-prod-card {
width: 100%;
}
/* === NAV DESKTOP === */
.header-nav .menu { position: relative; }
.header-nav .menu > .menu-item{ position:relative; --submenu-offset: 20px; }
/* Submenú */
.header-nav .menu > .menu-item > .sub-menu{
position:absolute;
top: calc(100% + var(--submenu-offset));
min-width: 240px;
/* tamaño y estilo */
box-sizing:border-box;
padding: .5rem;
margin:0;
list-style:none;
background:rgba(51,51,51);
border-radius: .5rem; /* nuevo */
/* border-radius: 0 0 10px 10px; */
z-index:9999;
/* ergonomía */
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
max-height: min(70vh, 640px);
/* columnas auto */
display:block;
/* estado base oculto + animación desde arriba */
visibility:hidden;
opacity:0;
transform-origin: top;
transform: translateY(8px);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
/* transición más notoria y elegante */
will-change: transform, opacity, clip-path;
pointer-events:none;
transition: opacity .16s ease, transform .16s ease, visibility 0s .16s;
scrollbar-gutter: stable;
}
/* Abierto por hover/focus */
.header-nav .menu > .menu-item.menu-item-has-children:hover > .sub-menu,
.header-nav .menu > .menu-item.menu-item-has-children:focus-within > .sub-menu {
visibility:visible;
opacity:1;
transform: translateY(0);
pointer-events:auto;
box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.header-nav .menu > .menu-item:last-child > .sub-menu { left: auto; right: 0; }
.header-nav .menu > .menu-item > .sub-menu > .menu-item > a{
display: block;
padding: .5rem .75rem; /* más área */
border-radius: .375rem; /* foco visible */
color: #111; /* texto oscuro sobre fondo claro */
}
.header-nav .menu > .menu-item > .sub-menu > .menu-item > a:hover,
.header-nav .menu > .menu-item > .sub-menu > .menu-item > a:focus{
background:rgba(255,255,255,.12);
color:#fff;
}
/* Scrollbar custom dark + acento */
#menu-menu-principal .sub-menu{
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(255,255,255,.55) rgba(255,255,255,.06);
scrollbar-gutter: stable both-edges;
}
/* Chromium/WebKit */
#menu-menu-principal .sub-menu::-webkit-scrollbar{
width: 12px; height: 12px;
}
#menu-menu-principal .sub-menu::-webkit-scrollbar-track{
background: rgba(255,255,255,.06);
border-radius: 999px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
#menu-menu-principal .sub-menu::-webkit-scrollbar-thumb{
background: linear-gradient(180deg,
rgba(255,255,255,.55), rgba(255,255,255,.45));
border-radius: 999px;
border: 3px solid rgba(51,51,51,.8); /* “acolcha” el thumb */
}
#menu-menu-principal .sub-menu::-webkit-scrollbar-thumb:hover{
background: #2A7A7A; /* acento */
}
#menu-menu-principal .sub-menu::-webkit-scrollbar-thumb:active{
background: #246a6a; /* acento activo */
}
.header-nav .menu > .menu-item > a { padding: .75rem .5rem; }
.header-nav .menu a:focus-visible{
outline: 2px solid rgba(42,122,122,.35);
outline-offset: 2px;
border-radius: 6px;
}
/* Mantener abierto al pasar sobre el panel */
.header-nav .menu > .menu-item > .sub-menu:hover{
visibility:visible;
opacity:1;
transform: translateY(0) scale(1);
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
pointer-events:auto;
}
/* Puente de hover para salvar el gap */
.header-nav .menu > .menu-item.menu-item-has-children::after{
content:"";
position:absolute;
left:0; right:0;
top:100%;
height: var(--submenu-offset);
}
/* MENU FOOTER*/
#site-footer{background:#1A1A1A;color:#eee;}
.footer-wrap{max-width:1180px;margin:0 auto;padding:4rem 0rem}
.footer-links{
display:flex;
flex-direction:column;
list-style:none;
margin:0 0 1rem;
padding:0;
gap: 6px;
}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.copy{text-align:center;font-size:.85rem;padding:1rem;border-top:1px solid #333; color: #A1A1A1;}
.footer-col h3 {
font-size: 2rem;
padding-bottom: 0.5rem;
text-align: left;
}
.footer-col .menu-item a{
color: #fff;
text-decoration: underline;
text-underline-offset: .2em; /* distancia al subrayado */
text-decoration-thickness: 1px;
text-decoration-color: currentColor; /* opcional */
text-decoration-skip-ink: auto; /* evita chocar con descendentes */
transition: color .18s ease;
}
.footer-col .menu-item a:hover{
color:#2A7A7A;
}
.contact{ list-style:none; padding:0; margin:0; }
.contact li{
display:flex;
align-items:center;
gap:.5rem;
list-style: none;
margin: 0px 0px 6px;
padding: 0px;
line-height:1.3;
min-height:16px;
}
.contact li a {
color: rgb(255, 255, 255);
text-underline-offset: 0.2em;
text-decoration-skip-ink: auto;
text-decoration: underline 1px currentcolor;
transition: color 0.18s;
}
.contact li::before{
content:"";
content:"";
width:16px; height:16px; /* cuadrado y consistente */
flex:0 0 16px;
display:block;
background: center / contain no-repeat var(--icon);
}
/* asigná el PNG por clase */
.contact .icon-location{ --icon: url('../img/ubicacion.png'); }
.contact .icon-whatsapp{ --icon: url('../img/whatsapp-footer.png'); }
.contact .icon-mail{ --icon: url('../img/email.png'); }
.socials {
list-style: none;
display: flex;
gap: 1rem;
padding: 0;
margin: 0;
padding-top: 0.75rem;
}
.socials .icon{
display:inline-block;
width:36px; height:36px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: transform .18s ease;
}
.socials .icon:hover,
.socials .icon:focus-visible{ transform:scale(1.06); }
/* imágenes base */
.icon-facebook{ background-image:url('../img/facebook.png'); }
.icon-instagram{ background-image:url('../img/instagram.png'); }
.icon-whatsapp-social{ background-image:url('../img/whatsapp-icono.png'); }
/* hover */
.icon-facebook:hover,
.icon-facebook:focus-visible{ background-image:url('../img/facebook-hover.png'); }
.icon-instagram:hover,
.icon-instagram:focus-visible{ background-image:url('../img/instagram-hover.png'); }
.icon-whatsapp-social:hover,
.icon-whatsapp-social:focus-visible{ background-image:url('../img/whatsapp-icono-hover.png'); }
/*carrito*/
.wc-block-cart-item__prices {
display: none;
}
.wc-block-components-product-badge.wc-block-components-sale-badge {
display: none;
}
th.wc-block-cart-items__header-image {
text-transform: capitalize;
font-size: 1rem;
}
a.wc-block-components-product-name {
color: #333;
}
span.wc-block-formatted-money-amount.wc-block-components-formatted-money-amount.wc-block-components-product-price__value {
font-size: 1.5rem;
font-weight: 600;
}
.wc-block-components-product-metadata__description {
display: none;
}
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
min-height: 3em;
background: transparent;
border: none;
}
/*Pedir direccion*/
/* --- Overlay & Modal --- */
#ce-vloc-overlay{
position:fixed; inset:0; background:rgba(0,0,0,.45);
z-index:99998; display:none;
}
#ce-vloc-modal{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%, -50%);
width:min(92vw,720px);
max-width:1024px;
background:#fff;
box-shadow:0 20px 60px rgba(0,0,0,.2);
z-index:99999;
display:none; /* lo mostrás con JS */
}
#ce-vloc-header{ padding:16px 20px; border-bottom:1px solid #eee; }
#ce-vloc-title{ margin:0; font-size:18px; font-weight:600; padding-bottom:0; }
#ce-vloc-body{ padding:14px 20px; }
/* --- Inputs / Selects (base) --- */
#ce-vloc-form input,
#ce-vloc-form select{
width:100%; padding:10px 12px; border:1px solid #ddd;
border-radius:8px; font-size:14px; box-sizing:border-box;
}
/* --- Footer --- */
#ce-vloc-footer{
display:flex; justify-content:flex-end; gap:10px;
padding:12px 0px; border-top:1px solid #eee;
}
#ce-vloc-close{ background:transparent; border:0; color:#666; cursor:pointer; }
#ce-vloc-note{ color:#666; font-size:12px; margin-top:6px; }
/* --- Layout: mapa izquierda / campos derecha --- */
#ce-vloc-form{
display:grid;
grid-template-columns: 340px 1fr; /* ajustá ancho del mapa si querés */
gap:12px;
align-items:start;
}
/* Mapa (columna izquierda) */
#ce-vloc-map{
min-height:150px; height:100%;
overflow:hidden; border:1px solid #eee;
}
/* Columna derecha con su propio grid para los campos */
#ce-vloc-fields{
display:grid; gap:10px; grid-auto-rows:min-content;
}
/* Anular reglas antiguas que expandían elementos a todo el ancho */
#ce-vloc-form .full{ grid-column:auto !important; }
#ce-vloc-desc {
margin: 0;
font-size: 0.9rem;
}
/* --- Responsive --- */
@media (max-width:640px){
#ce-vloc-form{ grid-template-columns:1fr; }
#ce-vloc-map{ min-height:200px; }
}
#ce-radius-msg{ display:none !important; }
.mu-explore-card { text-align:center;}
.mu-explore-ctr { min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px; }
.mu-explore-btn { display:inline-block; padding:.9rem 1.2rem; font-weight:600; border-radius:10px; text-decoration:none; }
.swiper-slide.mu-prod-card.mu-explore-card {
background: transparent;
height: auto;
}
.swiper-slide.mu-prod-card.mu-explore-card:hover {
transform: none;
box-shadow: none;
z-index: 2;
}
section.mu-carousel-section {
padding-bottom: 2rem;
}
#ship-to-different-address,
.woocommerce-shipping-fields,
.woocommerce-billing-fields > h3 { display:none !important; }
/* Forzar 1 columna interna en el formulario */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width:100% !important; float:none !important; }
.woocommerce-checkout #customer_details .col-2 { display:none !important; }
/* Título propio */
.ce-checkout-title { margin:0 0 12px; font-size:1.25rem; font-weight:600; }
/* Layout general con áreas:
móvil: title → form → reviewH → review (1 columna)
desktop: 2 columnas: izquierda title+form, derecha reviewH+review */
.woocommerce-checkout form.checkout {
display:grid; gap:0;
grid-template-columns: 1fr;
grid-template-areas:
"title"
"form"
"reviewH"
"review";
}
/* Asignación de áreas */
.ce-checkout-title { grid-area: title; }
.woocommerce #customer_details,
.woocommerce-checkout #customer_details { grid-area: form; }
#order_review_heading { grid-area: reviewH; }
#order_review { grid-area: review; }
@media (min-width: 992px) {
.woocommerce-checkout form.checkout {
grid-template-columns: minmax(0,1fr) 420px;
grid-template-areas:
"title reviewH"
"form review";
align-items:start;
}
#order_review { position:sticky; top:16px; }
}
/* Ajustes menores */
.woocommerce-checkout #customer_details { margin:0; }
.woocommerce-checkout #order_review_heading { margin-top:0; }
p#billing_country_field {
display: none;
}
.woocommerce form .form-row .input-text, .woocommerce form .form-row select{
border-radius: 16px;
padding: 12px;
border:1px solid rgba(0,0,0,.06);
color: #333;
}
.select2-container .select2-dropdown, .select2-container .select2-selection {
border-radius: 16px;
padding: 5px;
border:1px solid rgba(0,0,0,.06);
color: #333;
}
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2, table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block, table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block, .wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
width: 100% !important;
float: none !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
padding: 30px;
border:1px solid rgba(0,0,0,.06);
border-bottom: 1px solid rgba(0,0,0,.06);
color: #333;
}
.woocommerce table.shop_table {
border: none;
margin: 0 -1px 24px 0;
text-align: left;
width: 100%;
border-collapse: separate;
border-radius: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
border:1px solid rgba(0,0,0,.06);
padding: 30px;
color: #333;
}
.woocommerce-checkout #customer_details {
margin: 0;
padding-right: 50px !important;
}
.woocommerce form .form-row label {
line-height: 2;
color: #4AA3A8;
margin-left: 12px;
}
h2.ce-checkout-title, h3#order_review_heading {
text-align: left;
padding-bottom: 6px;
font-size: 1.5rem;
font-weight: 500;
}
.woocommerce-info {
border-top-color: transparent;
padding: 24px;
background-color: #E6F7F7;
}
a.showcoupon {
color: unset;
margin-left: 6px;
}
.woocommerce-info::before {
display: none;
}
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
border:0;
padding: 20px;
margin: 2em 0;
text-align: left;
border-radius: 0;
background-color: #E6F7F7;
position: relative;
top: -50px;
display: flex;
align-items: center;
gap: 20px;
}
.woocommerce table.shop_table th {
font-weight: 500 !important;
color: #4AA3A8;
font-size: 1.2rem;
}
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
background: #9BD2D2;
border-radius: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
border:1px solid rgba(0,0,0,.06);
padding: 30px;
}
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 1em;
margin: 1em 0;
font-size: .92em;
border-radius: 2px;
line-height: 1.5;
background-color: #57A5A5;
color: #515151;
}
#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before {
content: "";
display: block;
border: 1em solid #57A5A5;
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
position: absolute;
top: -.75em;
left: 0;
margin: -1em 0 0 2em;
}
#add_payment_method #payment div.payment_box p:last-child, .woocommerce-cart #payment div.payment_box p:last-child, .woocommerce-checkout #payment div.payment_box p:last-child {
margin-bottom: 0;
margin: 14px;
color: #fff;
}
form.checkout.woocommerce-checkout input:not(:checked){
accent-color: #8E5796; /* borde/punto apagado */
}
/* SELECCIONADO */
form.checkout.woocommerce-checkout input:checked{
accent-color: #8E5796; /* punto activo */
}
.woocommerce ul#shipping_method li input {
margin: 3px .4375em 0 0;
vertical-align: baseline;
}
@media (min-width: 900px) {
.swiper-slide.mu-prod-card {
max-width: 33%;
}
}
/* Oculto el bloque original solo en web */
.woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name,
.woocommerce-bacs-bank-details .bacs_details { display:none; }
.ce-bacs-cards{ display:grid; gap:12px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top:.75rem; }
.ce-bacs-card {
text-transform: uppercase;
padding: 14px;
border: 1px solid rgba(0, 0, 0, .06);
}
.ce-bacs-card .ce-title{ font-weight:600; margin:0 0 .5rem; color:#222; }
.ce-bacs-field{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:.25rem 0; border-top:1px dashed #eee; }
.ce-bacs-field:first-of-type{ border-top:0; }
.ce-label{ font-size:.86rem; color:#666; white-space:nowrap; }
.ce-value{ font-size:.95rem; color:#111; word-break:break-all; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.ce-value.bank{ font-family:inherit; }
@media (max-width:1100px){ .ce-bacs-cards{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .ce-bacs-cards{ grid-template-columns: 1fr; } }
ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
padding-left: 0;
}
article.page.post-10.type-page.status-publish.hentry h1 {
display: none;
}
p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
font-size: 1.5rem;
color: #2A7A7A;
}
li.woocommerce-order-overview__order.order {
color: #fff;
background-color: #8E5796;
}
.woocommerce ul.order_details li {
float: left;
margin-right: 0;
text-transform: uppercase;
font-size: .715em;
line-height: 1;
border-right: 1px dashed #cfc8d8;
padding-right: 2em;
margin-left: 0;
padding-left: 0;
list-style-type: none;
padding: 15px 30px;
}
h2.wc-bacs-bank-details-heading, h2.woocommerce-order-details__title, h2.woocommerce-column__title, h3.titulo-comprobante{
text-align: left;
font-size: 2rem;
font-weight: 500;
padding-top: 1rem;
padding-bottom: 1rem;
}
section.woocommerce-bacs-bank-details {
padding-bottom: 2rem;
}
table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
border: 0;
padding: 0;
box-shadow: none;
}
td.woocommerce-table__product-name.product-name a {
text-decoration: none;
color: #333;
}
.woocommerce-message.ce-bacs-receipt-notice {
background-color: #57A5A5;
text-align: center;
}
.woocommerce-message.ce-bacs-receipt-notice::before {
display: none;
}
/* CE – bloque comprobante: se ajusta al contenido */
#ce-upload-receipt {
display: block;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
box-sizing: border-box;
padding: 30px;
border: 1px solid rgba(0, 0, 0, .06);
margin: 10px 0;
}
.ce-bacs-upload p {
font-size: 0.85rem;
color: rgba(0, 0, 0, .65);
}
/* Fallback si algún navegador ignora fit-content */
@supports not (width:fit-content){
#ce-upload-receipt{ display:inline-block; margin:16px auto; }
/* Centrado para inline-block: */
.woocommerce-order{ text-align:center; }
.woocommerce-order #ce-upload-receipt{ text-align:left; } /* no centrar el texto interno */
}
form.form-comprobante {
display: flex;
gap: .6rem;
flex-direction: column;
}
a.button.button-secondary.ce-bacs-wa-notify {
border: none;
color: #3C645E;
text-decoration: underline;
background-color: transparent;
}
a.button.button-secondary.ce-bacs-wa-notify:hover {
color: #5ea59a;
background-color: transparent;
}
form.ce-order-lookup-form {
margin: auto;
border: 1px solid;
padding: 40px;
border: 1px solid rgba(0, 0, 0, .1);
margin-bottom: 50px;
}
.ce-order-lookup-form input[type="text"], .ce-order-lookup-form input[type="tel"] {
border-radius: 16px;
padding: 12px;
border: 1px solid rgba(0, 0, 0, .1);
color: #333;
}
.ce-order-lookup-form input[type="text"]:is(:focus, :focus-visible),
.ce-order-lookup-form input[type="tel"]:is(:focus, :focus-visible){
border: 1px solid rgba(0, 0, 0, .5);
outline:1px solid transparent; /* evita outline azul por defecto */
}
label {
line-height: 2;
color: #4AA3A8;
}
.contenedor-estado {
padding: 40px;
border: 1px solid rgba(0, 0, 0, .06);
}
.estado-pedido {
color: #fff;
background-color: #8E5796;
padding: 10px;
border-radius: 12px;
}
.ce-cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.ce-order-lookup-result h3 {
text-align: left;
padding: 0;
border-bottom: 1px solid rgba(0, 0, 0, .06);
padding-bottom: 10px;
}
.ce-order-lookup-result h4 {
margin: 0;
padding: 20px;
padding-top: 40px;
font-size: 19px;
}
.ce-order-items {
display: grid;
grid-template-columns: 0.75fr 8fr 1fr 1fr;
padding: 20px 40px;
border: 1px solid rgba(0, 0, 0, .06);
align-items: center;
}
.ce-items-head, .ce-item {
border-right: 1px solid #e5e7eb;
padding: 5px;
border-bottom: 1px solid #e5e7eb;
}
.ce-item, .ce-item-2 {
height: 50px;
align-items: center;
display: flex;
border-bottom: 1px solid #e5e7eb;
}
.ce-item-2, .ce-items-head-2 {
padding: 5px;
border-bottom: 1px solid #e5e7eb;
}
.ce-item-thumb img.attachment-thumbnail.size-thumbnail {
width: auto;
height: auto;
max-height: 48px;
}
.contenedor-comprobante-seguimiento .woocommerce-message.ce-bacs-receipt-notice{
display: none;
}
.contenedor-comprobante-seguimiento #ce-upload-receipt
{
margin: auto;
}
.ce-bacs-proof-actions {
margin-top: 10px;
display: flex;
gap: 10px;
}
.ce-bacs-proof-actions a.button {
border: none;
text-decoration: underline !important;
background-color: transparent !important;
color: #DF7D53 !important;
}
.ce-bacs-proof-actions a.button:hover {
background: transparent;
color: #a24d29 !important;
}
.contenedor-comprobante-seguimiento h4 {
display: none;
}
.contenedor-comprobante-seguimiento {
margin-top: 4rem;
margin-bottom: 2rem;
}
/*BOTONES */
.mu-btn-secondary { background:#fff; color:#DF7D53; }
.mu-prod-btns .mu-btn, .mu-prod-btns .button, button.mu-open-mini-cart, button.mu-testimonios-cta {
flex: 1 1 0;
min-width: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border:1px solid #DF7D53;
font-weight:700;
font-size:1rem;
cursor:pointer;
text-decoration:none;
transition:.13s;
padding: 1rem;
}
.botones-search { margin-top: 1.5rem; }
.btn-primary,.btn-secondary {display:inline-block;padding:.8rem 1.1rem;border-radius:10px;font-weight:700;border:0;cursor:pointer}
.btn-secondary{color:#DF7D53; font-size: 1rem; padding: 1rem 2rem; font-weight: 500;}
.estilo-btn, .wc-block-components-button__text {
background: #DF7D53;
color: #fff;
border-radius: 9px;
border: none;
font-weight: 600;
font-size: 1.1rem;
padding: 12px 36px;
text-decoration: none;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.09);
transition: background 0.25s;
}
.wc-block-components-button:not(.is-link) {
text-decoration: none;
}
.woocommerce .mu-prod-card .button, .wc-forward {
flex: 1 1 0;
min-width: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border:1px solid #DF7D53;
font-weight:700;
font-size:1rem;
cursor:pointer;
text-decoration:none;
transition:.13s;
padding: 1rem;
}
.wc-forward {
background:#fff !important;
}
.mu-open .checkout {
background:#DF7D53 !important;
color:#fff !important;
flex: 1 1 0;
min-width: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px !important;
border:1px solid #DF7D53;
font-weight:700;
font-size:1rem;
cursor:pointer;
text-decoration:none;
transition:.13s;
}
.mu-open .checkout:hover {
background:#a24d29 !important;
}
/* Hover/Focus */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .form-comprobante button.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:focus-visible,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:focus-visible,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:focus-visible,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:focus-visible,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:focus-visible,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:focus-visible,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:focus-visible,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:focus-visible,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:focus-visible,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:focus-visible,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:focus-visible,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:focus-visible {
background:#a24d29;
color:#fff;
}
.woocommerce .woocommerce-error .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-message .button, .woocommerce-page .woocommerce-error .button, .woocommerce-page .woocommerce-info .button, .woocommerce-page .woocommerce-message .button {
box-sizing: border-box;
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: .75rem 1rem;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
border: 1px solid #DF7D53;
background: #DF7D53 !important;
color: #fff;
cursor: pointer;
line-height: 1;
margin: 0;
}
.woocommerce .quantity .qty {
padding:.75rem 1rem;
font-weight:700;
border:1px solid #DF7D53;
background-color: #fff;
border-radius:8px;
line-height:1;
box-sizing:border-box;
flex:1 1 0;
font-size: 100%;
min-height:48px;
color: #DF7D53;
}
/* estilo botón secundario */
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns .mu-btn-secondary,
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns .button.alt {
background:#fff;
color:#DF7D53;
border:1px solid #DF7D53;
}
a.button, button.button-pagar, .form-comprobante button.button {
background: #FFF;
color: #DF7D53;
border: 1px solid #DF7D53 !important;
padding: 12px 12px !important;
border-radius: 12px !important;
text-decoration: none;
display: inline-block;
transition:.13s !important;
text-align: center;
cursor: pointer;
}
a.button-pagar, button.button-pagar {
background: #DF7D53;
color: #fff;
}
a.button:hover, button.button-pagar:hover, .form-comprobante button.button:hover {
background:#a24d29;; color:#fff;
}
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
float: left;
background: #DF7D53;
color: #fff;
border-radius: 9px;
border: none;
font-weight: 600;
font-size: 1.1rem;
padding: 12px 36px;
text-decoration: none;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.09);
transition: background 0.25s;
width: 100%;
}
.woocommerce #payment #place_order:hover, .woocommerce-page #payment #place_order:hover{
background: #a24d29;
}
.mu-prod-btns .button, button.mu-open-mini-cart, button.mu-testimonios-cta {background:#DF7D53; color:#fff;}
.mu-btn:hover, .mu-btn:focus, .mu-prod-btns .button:hover, button.mu-open-mini-cart:hover, .mu-prod-btns .button:focus, .woocommerce div.product form.cart .button:hover { background:#a24d29;; color:#fff; }
.mu-prod-btns .button, button.mu-open-mini-cart, button.mu-testimonios-cta {
background:#DF7D53; color:#fff;}
.btn-primary{background:#DF7D53;color:#fff; transition: background 50s; font-size: 1rem; padding: 1rem 4rem; font-weight: 500;}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button, .form-comprobante button.button {
background:#DF7D53;
color:#fff;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt {
background:#DF7D53;
color:#fff;
transition:.13s;
}
/* normalizar botones/links dentro del contenedor */
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns .button,
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns .mu-btn,
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns a,
.woocommerce ul.products li.product.mu-prod-card .mu-prod-btns button,
.woocommerce div.product form.cart .button{
box-sizing:border-box;
flex:1 1 0; /* que sean iguales y crezcan igual */
display:flex;
align-items:center; /* centrar contenido vertical */
justify-content:center;/* centrar texto/icon horizontal */
min-height:48px; /* altura consistente */
padding:.75rem 1rem;
border-radius:8px;
font-weight:700;
text-decoration:none;
border:1px solid #DF7D53;
background:#DF7D53;
color:#fff;
cursor:pointer;
line-height:1;
margin:0; /* anula márgenes nativos */
}
#ce-vloc-btn{
padding:.75rem 1rem;
border-radius:8px;
font-weight:700;
text-decoration:none;
border:1px solid #DF7D53;
background:#DF7D53;
color:#fff;
cursor:pointer; cursor:pointer;
}
.mu-filter-brands-menu{
display:flex;
flex-wrap:wrap;
gap:.5rem .5rem;
margin:0; padding:0;
list-style:none;
}
/* cada ítem “pill” */
.mu-filter-brands-menu > li{
margin:0;
}
/* botón simple */
.mu-filter-brands-menu a{
display:inline-block;
padding:.35rem .6rem;
border:1px solid rgba(51,51,51,.25);
border-radius:999px;
text-decoration:none;
line-height:1;
color:rgba(51,51,51,.9);
background:transparent;
transition:background-color .15s ease, border-color .15s ease, color .15s ease;
font-size:.95rem;
white-space:nowrap;
font-size: 0.85rem;
}
/* hover/focus/active */
.mu-filter-brands-menu a:hover,
.mu-filter-brands-menu a:focus{
background:#E6F7F7;
border-color:#E6F7F7;
outline:none;
}
.mu-filter-brands-menu a:active{
background:rgba(51,51,51,.12);
}
/* si querés igualar al color del menú para un tema oscuro */
.mu-filter-brands-menu{
color:rgba(51,51,51,.8); /* hereda al texto del link */
}
/* desde aqui son los cambios*/
.mu-btn-secondary {
background-color: transparent !important;
color: #DF7D53 !important;
}
a.mu-btn.mu-btn-secondary:hover, a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover{
background:#a24d29 !important; color:#fff !important;
}
.boton-mini-carro a.button.button-pagar {
background-color: #DF7D53;
color: #fff;
}
.boton-mini-carro a.button.button-pagar:hover {
background:#a24d29 !important; color:#fff !important;
}
.boton-mini-carro a.button {
background-color: transparent;
color: #DF7D53;
}
.botones-search button:hover{
background:#a24d29; color:#fff;
}
button.submenu-toggle {
display: none;
}
@media (max-width:1025px){
#menu-menu-principal {
gap: 0.2rem !important;
}
#site-header .wrap {
margin: 10px;
}
.hero {
margin: 0 10px;
}
.wrap {
padding-left: 10px;
padding-right: 10px;
}
.footer-wrap {
padding: 4rem 10px;
}
}
/* Agregar filtros: visible en móvil, oculto en desktop */
@media (max-width:900px){
.mu4e-filter-toggle{ display:block; }
.content-area.tienda-con-sidebar{ flex-direction:column; gap:1rem; }
.tienda-con-sidebar #secondary,
.tienda-con-sidebar .widget-area{ order:2; width:100%; min-width:0; margin-right:0; }
.tienda-con-sidebar .site-main{ order:1; }
.mu4e-filter-box[hidden]{ display:none !important; }
.muc-countdown-wrap {right:10px;}
}
/* En desktop, el contenedor se ve siempre aunque tenga [hidden] */
@media (min-width:901px){
.mu4e-filter-toggle{ display:none !important; }
.mu4e-filter-box[hidden]{ display:block !important; }
}
/* Cursor de zoom visual */
.woocommerce-product-gallery--zoom .woocommerce-product-gallery__image {
cursor: zoom-in;
}
.woocommerce-product-gallery--zoom .woocommerce-product-gallery__image {
cursor: zoom-in;
}
.single-product .woocommerce-product-gallery .zoomImg {
max-width: none !important;
max-height: none !important;
width: auto !important;
height: auto !important;
}
/* Caja visible */
.single-product .flex-viewport {
max-height: 500px;
overflow: hidden;
}
/* Centrado en cada slide */
.single-product .woocommerce-product-gallery__image {
display: flex;
align-items: center;
justify-content: center;
min-height: 500px; /* igual al tope del viewport */
}
/* La imagen no se deforma ni rebasa */
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .zoomImg {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
}
section.related.products {
width: 100%;
position: relative;
float: left;
}
/* Alto fijo del visor */
.single-product .flex-viewport { max-height: 500px; overflow: hidden; }
/* Cada slide se usa como marco centrador */
.single-product .woocommerce-product-gallery__image {
display: flex;
align-items: center;
justify-content: center;
height: 500px; /* mismo alto que el visor */
}
/* Imagen y zoom centrados y “cover” */
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .zoomImg {
width: 100%;
height: 100%;
object-fit: cover; /* muestra el centro, recorta bordes */
object-position: center; /* centra siempre */
}
.single-product .flex-viewport {
height: 500px !important;
max-height: 500px !important;
overflow: hidden;
}
.single-product .woocommerce-product-gallery__image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 500px !important;
}
.single-product .woocommerce-product-gallery__image img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
margin: 0 auto !important;
}