/* Theme Name: Moblix Template: astra Description: Tienda de Moblix, muebles a medida en Coquimbo y La Serena. Negro espresso, cobre y crema del logo. Author: VendeWEB.cl Author URI: https://vendeweb.cl Version: 1.0.0 Text Domain: moblix */ :root { --mbx-negro: #140b06; /* fondo del logo */ --mbx-negro-2: #1e130b; --mbx-negro-3: #2b1c10; --mbx-cobre: #d6a052; /* dorado del logo, solo sobre oscuro (8,9:1) */ --mbx-cobre-2: #c08236; --mbx-cobre-txt: #8a4f16; /* cobre quemado para texto sobre claro (6:1) */ --mbx-crema: #f3e6c8; /* letras «Moblix» del logo */ --mbx-fondo: #fbf8f3; --mbx-crema-sec: #f3ebdd; --mbx-tinta: #1d140d; --mbx-gris: #6a5d52; --mbx-gris-osc: #b9ab99; /* texto secundario sobre oscuro */ --mbx-borde: #e5dccd; --mbx-wa: #128c4a; --mbx-radio: 14px; --mbx-ancho: 1240px; --mbx-tit: 'Outfit', system-ui, sans-serif; --mbx-txt: 'DM Sans', system-ui, sans-serif; --mbx-sombra: 0 1px 2px rgb(20 11 6 / .06), 0 12px 32px -12px rgb(20 11 6 / .22); } /* ---------- Base ---------- */ body.mbx { font-family: var(--mbx-txt); color: var(--mbx-tinta); background: var(--mbx-fondo); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body.mbx h1, body.mbx h2, body.mbx h3, body.mbx h4, body.mbx .entry-title, body.mbx .product_title { font-family: var(--mbx-tit); color: inherit; letter-spacing: -.015em; line-height: 1.12; font-weight: 600; } body.mbx :where(a) { color: var(--mbx-cobre-txt); } body.mbx :where(img) { max-width: 100%; height: auto; } :where(.mbx-i) { width: 1.15em; height: 1.15em; flex: none; } body.mbx.ast-separate-container, body.mbx.ast-plain-container { background: var(--mbx-fondo); } body.mbx .ast-container { max-width: var(--mbx-ancho); } body.mbx.ast-separate-container .ast-article-single, body.mbx.ast-separate-container .ast-article-post, body.mbx.ast-separate-container .ast-woocommerce-container { background: transparent; padding-left: 0; padding-right: 0; } body.mbx.ast-separate-container #primary, body.mbx.ast-plain-container #primary { margin: 2rem 0 3rem; } body.mbx.mbx-ancho #content > .ast-container { max-width: none; padding: 0; display: block; } body.mbx.mbx-ancho #primary { margin: 0 !important; padding: 0; width: 100%; } body.mbx.mbx-ancho .ast-article-single, body.mbx.mbx-ancho .entry-content, body.mbx.mbx-ancho article { margin: 0; padding: 0; } body.mbx-sin-scroll { overflow: hidden; } .mbx-saltar { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--mbx-cobre); color: var(--mbx-negro) !important; padding: .6rem 1rem; } .mbx-saltar:focus { left: 1rem; top: 1rem; } body.mbx :focus-visible { outline: 2px solid var(--mbx-cobre-2); outline-offset: 3px; } /* ---------- Botones ---------- */ .mbx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .78rem 1.35rem; border-radius: 999px; font: 600 .95rem/1.1 var(--mbx-txt); text-decoration: none !important; border: 1.5px solid transparent; transition: transform .18s, background .18s, box-shadow .18s, color .18s; cursor: pointer; white-space: nowrap; } .mbx-btn:hover { transform: translateY(-1px); } .mbx-btn--xl { padding: 1rem 1.7rem; font-size: 1rem; } .mbx-btn--ancho { width: 100%; } .mbx-btn--cobre { background: linear-gradient(180deg, #e0ad60, var(--mbx-cobre-2)); color: var(--mbx-negro) !important; box-shadow: 0 8px 20px -10px rgb(192 130 54 / .8), inset 0 1px 0 rgb(255 255 255 / .35); } .mbx-btn--cobre:hover { background: linear-gradient(180deg, #e8b96e, #c98b3d); } .mbx-btn--linea { border-color: rgb(243 230 200 / .45); color: var(--mbx-crema) !important; background: rgb(255 255 255 / .03); } .mbx-btn--linea:hover { border-color: var(--mbx-cobre); color: #fff !important; } .mbx-btn--osc { background: var(--mbx-negro); color: var(--mbx-crema) !important; } .mbx-btn--osc:hover { background: var(--mbx-negro-3); } .mbx-btn--linea-osc { border-color: var(--mbx-tinta); color: var(--mbx-tinta) !important; background: transparent; } .mbx-btn--linea-osc:hover { background: var(--mbx-tinta); color: var(--mbx-crema) !important; } .mbx-btn--wa { background: var(--mbx-wa); color: #fff !important; } .mbx-btn--wa:hover { background: #0e7a3f; } .mbx-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--mbx-cobre-txt) !important; text-decoration: none !important; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; white-space: nowrap; } .mbx-link .mbx-i { transition: transform .2s; } .mbx-link:hover .mbx-i { transform: translateX(3px); } .mbx-eyebrow { font: 600 .78rem/1.2 var(--mbx-txt); letter-spacing: .16em; text-transform: uppercase; color: var(--mbx-cobre); margin: 0 0 .9rem; display: flex; align-items: center; gap: .7rem; } .mbx-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: currentColor; } .mbx-eyebrow--osc { color: var(--mbx-cobre-txt); } /* ---------- Franja y cabecera ---------- */ .mbx-franja { background: #0c0603; color: var(--mbx-gris-osc); font-size: .8rem; } .mbx-franja__in { max-width: var(--mbx-ancho); margin: 0 auto; padding: .45rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; } .mbx-franja p { margin: 0; display: flex; gap: 1.4rem; align-items: center; } .mbx-franja p:first-child span + span::before { content: '·'; margin-right: 1.4rem; color: var(--mbx-cobre); } .mbx-franja a { color: var(--mbx-crema) !important; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .mbx-franja a:hover { color: var(--mbx-cobre) !important; } .mbx-franja .mbx-i { color: var(--mbx-cobre); } .mbx-cab { position: sticky; top: 0; z-index: 100; background: rgb(20 11 6 / .97); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid rgb(214 160 82 / .16); transition: box-shadow .2s; } .admin-bar .mbx-cab { top: 32px; } .mbx-cab.is-scroll { box-shadow: 0 10px 30px -12px rgb(0 0 0 / .6); } .mbx-cab__in { max-width: var(--mbx-ancho); margin: 0 auto; padding: .7rem 1.25rem; display: flex; align-items: center; gap: 1.6rem; transition: padding .2s; } .mbx-cab.is-scroll .mbx-cab__in { padding-top: .45rem; padding-bottom: .45rem; } .mbx-marca { display: block; flex: none; } .mbx-marca img { height: 62px; width: auto; display: block; transition: height .2s; } .mbx-cab.is-scroll .mbx-marca img { height: 50px; } .mbx-nav { flex: 1; display: flex; align-items: center; } .mbx-nav > ul { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: .15rem; } .mbx-nav li { position: relative; margin: 0; } .mbx-nav a { color: var(--mbx-crema); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .55rem .75rem; border-radius: 8px; display: flex; align-items: center; gap: .3rem; } .mbx-nav > ul > li > a:hover, .mbx-nav > ul > li:focus-within > a { color: var(--mbx-cobre); } .mbx-nav svg { width: 12px; height: 12px; } .mbx-nav__sub > ul { position: absolute; top: 100%; left: -.5rem; min-width: 250px; list-style: none; margin: 0; padding: .5rem; background: var(--mbx-negro-2); border: 1px solid rgb(214 160 82 / .2); border-radius: 12px; box-shadow: 0 20px 40px -12px rgb(0 0 0 / .6); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; } .mbx-nav__sub:hover > ul, .mbx-nav__sub:focus-within > ul { opacity: 1; visibility: visible; transform: none; } .mbx-nav__sub > ul a { padding: .55rem .8rem; font-size: .92rem; } .mbx-nav__sub > ul a:hover { background: rgb(214 160 82 / .1); color: var(--mbx-cobre); } .mbx-nav__sub > ul li:last-child { border-top: 1px solid rgb(214 160 82 / .15); margin-top: .3rem; padding-top: .3rem; } .mbx-nav__cta, .mbx-buscar--movil { display: none !important; } .mbx-cab__acc { display: flex; align-items: center; gap: .4rem; flex: none; } .mbx-icobtn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--mbx-crema) !important; background: transparent; border: 0; cursor: pointer; padding: 0; } .mbx-icobtn:hover { background: rgb(214 160 82 / .12); color: var(--mbx-cobre) !important; } .mbx-icobtn .mbx-i { width: 22px; height: 22px; } .mbx-carro__n { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--mbx-cobre); color: var(--mbx-negro); font: 700 .68rem/18px var(--mbx-txt); text-align: center; padding: 0 4px; } .mbx-carro__n[data-n="0"] { display: none; } .mbx-cab__cta { margin-left: .4rem; padding: .62rem 1.15rem; } .mbx-menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 11px 10px; cursor: pointer; flex-direction: column; justify-content: space-between; } .mbx-menu-btn span { display: block; height: 2px; background: var(--mbx-crema); border-radius: 2px; transition: .2s; } .mbx-buscador { border-top: 1px solid rgb(214 160 82 / .14); background: var(--mbx-negro-2); } .mbx-buscador[hidden] { display: none !important; } .mbx-buscador form { max-width: 760px; margin: 0 auto; padding: .9rem 1.25rem; display: flex; align-items: center; gap: .7rem; color: var(--mbx-cobre); } .mbx-buscador input[type=search] { flex: 1; background: rgb(255 255 255 / .06) !important; border: 1px solid rgb(214 160 82 / .3) !important; color: #fff !important; border-radius: 999px !important; padding: .7rem 1.1rem !important; font-size: 1rem; } .mbx-buscador input::placeholder { color: var(--mbx-gris-osc); } /* ---------- Héroe ---------- */ .mbx-heroe { background: radial-gradient(1200px 600px at 85% 10%, rgb(192 130 54 / .18), transparent 60%), var(--mbx-negro); color: var(--mbx-crema); overflow: hidden; } .mbx-heroe__in { max-width: var(--mbx-ancho); margin: 0 auto; padding: 4.2rem 1.25rem 4.6rem; display: grid; grid-template-columns: 1.02fr 1fr; gap: 3.5rem; align-items: center; } .mbx-heroe h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); color: #fff; margin: 0 0 1.2rem; font-weight: 600; } .mbx-heroe h1 em { font-style: normal; background: linear-gradient(100deg, #f0c47a, var(--mbx-cobre) 55%, #b5742c); -webkit-background-clip: text; background-clip: text; color: transparent; } .mbx-heroe__lead { font-size: 1.12rem; color: #e4d7bf; max-width: 34em; margin: 0 0 2rem; } .mbx-heroe__acc { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.4rem; } .mbx-heroe__sellos { list-style: none; margin: 0; padding: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; border-top: 1px solid rgb(214 160 82 / .18); font-size: .92rem; color: var(--mbx-gris-osc); } .mbx-heroe__sellos li { display: flex; align-items: center; gap: .5rem; margin: 0; } .mbx-heroe__sellos .mbx-i { color: var(--mbx-cobre); width: 20px; height: 20px; } .mbx-heroe__fotos { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: min(600px, 64vw); } .mbx-heroe__fotos figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .7); } .mbx-heroe__fotos img { width: 100%; height: 100%; object-fit: cover; display: block; } .mbx-heroe__f1 { grid-row: 1 / 3; } .mbx-heroe__fotos figcaption { position: absolute; left: 12px; bottom: 12px; background: rgb(20 11 6 / .78); backdrop-filter: blur(6px); color: var(--mbx-crema); font-size: .78rem; font-weight: 500; padding: .35rem .7rem; border-radius: 999px; border: 1px solid rgb(214 160 82 / .25); } /* ---------- Secciones ---------- */ .mbx-sec { padding: 5rem 0; } .mbx-sec--pegado { padding-top: 2.2rem; } .mbx-sec--claro { background: var(--mbx-fondo); } .mbx-sec--crema { background: var(--mbx-crema-sec); } .mbx-sec--osc { background: var(--mbx-negro); color: var(--mbx-crema); } .mbx-sec--osc h2 { color: #fff; } .mbx-sec__in { max-width: var(--mbx-ancho); margin: 0 auto; padding: 0 1.25rem; } .mbx-sec__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2.4rem; } .mbx-sec__cab h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); margin: 0; max-width: 18em; } .mbx-sec__cab--centro { flex-direction: column; align-items: center; text-align: center; } .mbx-sec__cab--centro .mbx-eyebrow { justify-content: center; } .mbx-sec__cab--centro .mbx-eyebrow::after { content: ''; width: 28px; height: 1.5px; background: currentColor; } .mbx-sec__cab--centro p:not(.mbx-eyebrow) { color: var(--mbx-gris-osc); margin: .8rem 0 0; max-width: 36em; } /* Categorías: mosaico */ .mbx-cats { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 14px; } .mbx-cat { position: relative; border-radius: var(--mbx-radio); overflow: hidden; display: block; text-decoration: none !important; background: var(--mbx-negro); isolation: isolate; } .mbx-cat--0 { grid-column: span 2; grid-row: span 2; } .mbx-cat--1 { grid-row: span 2; } .mbx-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); z-index: -1; } .mbx-cat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(14 7 3 / .88)); z-index: -1; } .mbx-cat:hover img { transform: scale(1.05); } .mbx-cat__txt { position: absolute; left: 1.2rem; bottom: 1.1rem; right: 3.8rem; color: #fff; display: flex; flex-direction: column; } .mbx-cat__txt strong { font: 600 1.25rem/1.2 var(--mbx-tit); } .mbx-cat--0 .mbx-cat__txt strong { font-size: 1.8rem; } .mbx-cat__txt small { color: var(--mbx-crema); opacity: .85; font-size: .85rem; margin-top: .2rem; } .mbx-cat__fl { position: absolute; right: 1rem; bottom: 1.05rem; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mbx-cobre); color: var(--mbx-negro); transition: transform .2s; } .mbx-cat:hover .mbx-cat__fl { transform: translateX(3px); } /* Antes / después */ .mbx-ad { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } .mbx-comp { margin: 0; } .mbx-comp__marco { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #000; user-select: none; } .mbx-comp__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .mbx-comp__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .mbx-comp__antes img { filter: saturate(.75); } .mbx-comp__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--mbx-cobre); transform: translateX(-1px); pointer-events: none; } .mbx-comp__linea span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--mbx-cobre); box-shadow: 0 6px 18px rgb(0 0 0 / .45); } .mbx-comp__linea span::before { content: '‹ ›'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--mbx-negro); font: 700 1.05rem/1 var(--mbx-txt); letter-spacing: .15em; } .mbx-comp input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; } .mbx-comp__et { position: absolute; top: 14px; padding: .3rem .75rem; border-radius: 999px; font: 600 .8rem/1.2 var(--mbx-txt); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; } .mbx-comp__et--a { left: 14px; background: rgb(255 255 255 / .9); color: var(--mbx-tinta); } .mbx-comp__et--d { right: 14px; background: var(--mbx-cobre); color: var(--mbx-negro); } .mbx-comp figcaption { margin-top: .9rem; color: var(--mbx-gris-osc); font-size: .92rem; text-align: center; } /* Proceso */ .mbx-proceso { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--mbx-borde); } .mbx-proceso li { margin: 0; padding: 2rem 1.6rem 0 0; position: relative; } .mbx-proceso li + li { padding-left: 1.6rem; border-left: 1px solid var(--mbx-borde); } .mbx-proceso__n { display: block; font: 600 .8rem/1 var(--mbx-tit); color: var(--mbx-cobre-txt); letter-spacing: .1em; margin-bottom: 1.3rem; } .mbx-proceso .mbx-i { width: 34px; height: 34px; color: var(--mbx-cobre-txt); margin-bottom: 1rem; } .mbx-proceso h3 { font-size: 1.3rem; margin: 0 0 .5rem; } .mbx-proceso p { margin: 0; color: var(--mbx-gris); font-size: .96rem; } /* Videos */ .mbx-reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .mbx-reel { margin: 0; position: relative; border-radius: var(--mbx-radio); overflow: hidden; background: var(--mbx-negro); aspect-ratio: 9 / 16; } .mbx-reel video { width: 100%; height: 100%; object-fit: cover; display: block; } .mbx-reel__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgb(214 160 82 / .95); color: var(--mbx-negro); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgb(0 0 0 / .45); transition: transform .2s; } .mbx-reel__play:hover { transform: scale(1.07); } .mbx-reel__play .mbx-i { width: 26px; height: 26px; margin-left: 3px; } .mbx-reel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem 1rem; background: linear-gradient(transparent, rgb(14 7 3 / .9)); color: #fff; display: flex; flex-direction: column; pointer-events: none; transition: opacity .2s; } .mbx-reel figcaption strong { font: 600 1.02rem/1.25 var(--mbx-tit); } .mbx-reel figcaption span { font-size: .8rem; color: var(--mbx-crema); opacity: .85; } .mbx-reel.is-play .mbx-reel__play, .mbx-reel.is-play figcaption { opacity: 0; pointer-events: none; } .mbx-reel:not(.is-play) video::-webkit-media-controls { display: none !important; } /* Accesorios */ .mbx-acc-sec { display: grid; grid-template-columns: .8fr 2fr; gap: 3rem; align-items: center; } .mbx-acc-sec__txt h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 1rem; } .mbx-acc-sec__txt p:not(.mbx-eyebrow) { color: var(--mbx-gris); margin: 0 0 1.6rem; } /* Terminaciones */ .mbx-term__in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1rem 4rem; align-items: center; } .mbx-term h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 1rem; } .mbx-term__in > div > p:not(.mbx-eyebrow) { color: var(--mbx-gris-osc); margin: 0 0 1.4rem; } .mbx-term__extras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.2rem; font-size: .93rem; } .mbx-term__extras li { margin: 0; padding-left: 1.3rem; position: relative; } .mbx-term__extras li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--mbx-cobre); transform: rotate(45deg); } .mbx-muestras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem .9rem; } .mbx-muestras li { margin: 0; font-size: .82rem; color: var(--mbx-crema); text-align: center; line-height: 1.3; } .mbx-muestras span { display: block; aspect-ratio: 1; border-radius: 12px; background: var(--c); margin-bottom: .55rem; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 10px 20px -10px rgb(0 0 0 / .7); background-image: linear-gradient(135deg, rgb(255 255 255 / .16), transparent 45%), repeating-linear-gradient(90deg, rgb(0 0 0 / .025) 0 2px, transparent 2px 7px); } .mbx-term__nota { grid-column: 2; margin: 0; font-size: .8rem; color: var(--mbx-gris-osc); text-align: right; } /* Zona */ .mbx-zona__in { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .mbx-zona h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 1rem; } .mbx-zona__in > div > p:not(.mbx-eyebrow) { color: var(--mbx-gris); margin: 0 0 1.6rem; } .mbx-zona__acc { display: flex; flex-wrap: wrap; gap: .7rem; } .mbx-zona__lista { background: #fff; border: 1px solid var(--mbx-borde); border-radius: 20px; padding: 1.8rem; box-shadow: var(--mbx-sombra); } .mbx-zona__lista > p { margin: 0 0 1rem; font: 600 1.05rem/1.2 var(--mbx-tit); } .mbx-zona__lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .mbx-zona__lista li { margin: 0; display: inline-flex; align-items: center; gap: .35rem; background: var(--mbx-crema-sec); border-radius: 999px; padding: .4rem .8rem; font-size: .88rem; } .mbx-zona__lista .mbx-i { color: var(--mbx-cobre-txt); width: 15px; height: 15px; } /* Llamado previo al pie */ .mbx-precta { background: linear-gradient(120deg, var(--mbx-negro-3), var(--mbx-negro) 70%); color: var(--mbx-crema); border-top: 1px solid rgb(214 160 82 / .2); } .mbx-precta__in { max-width: var(--mbx-ancho); margin: 0 auto; padding: 3.6rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; } .mbx-precta h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 0 0 .6rem; max-width: 20em; } .mbx-precta p:not(.mbx-eyebrow) { margin: 0; color: var(--mbx-gris-osc); max-width: 38em; } .mbx-precta__acc { display: flex; gap: .8rem; flex-wrap: wrap; flex: none; } /* Pie */ .mbx-pie { background: #0c0603; color: var(--mbx-gris-osc); font-size: .93rem; } .mbx-pie__in { max-width: var(--mbx-ancho); margin: 0 auto; padding: 3.6rem 1.25rem 2.6rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.4rem; } .mbx-pie h2 { font: 600 .8rem/1.2 var(--mbx-txt); letter-spacing: .14em; text-transform: uppercase; color: var(--mbx-cobre); margin: 0 0 1.1rem; } .mbx-pie ul { list-style: none; margin: 0; padding: 0; } .mbx-pie li { margin: 0 0 .55rem; } .mbx-pie a { color: var(--mbx-crema) !important; text-decoration: none; } .mbx-pie a:hover { color: var(--mbx-cobre) !important; } .mbx-pie__marca img { width: 130px; margin-bottom: 1rem; display: block; } .mbx-pie__marca p { margin: 0 0 1.2rem; max-width: 26em; } .mbx-redes { display: flex; gap: .5rem; } .mbx-redes a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(214 160 82 / .3); } .mbx-redes a:hover { background: var(--mbx-cobre); color: var(--mbx-negro) !important; } .mbx-redes .mbx-i { width: 19px; height: 19px; } .mbx-pie__contacto a, .mbx-pie__contacto span { display: inline-flex; gap: .55rem; align-items: flex-start; } .mbx-pie__contacto .mbx-i { color: var(--mbx-cobre); margin-top: .2em; } .mbx-pie__base { border-top: 1px solid rgb(214 160 82 / .12); } .mbx-pie__base p { max-width: var(--mbx-ancho); margin: 0 auto; padding: 1.2rem 1.25rem; font-size: .84rem; } .mbx-pie__base a { color: var(--mbx-cobre) !important; font-weight: 600; } .mbx-wa-flot { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; align-items: center; gap: .5rem; background: var(--mbx-wa); color: #fff !important; text-decoration: none !important; padding: .8rem 1.1rem .8rem .9rem; border-radius: 999px; font-weight: 600; font-size: .92rem; box-shadow: 0 12px 28px -8px rgb(0 0 0 / .45); transition: transform .2s; } .mbx-wa-flot:hover { transform: translateY(-2px); } .mbx-wa-flot .mbx-i { width: 24px; height: 24px; } /* ---------- Bandas de página (tienda, categorías, páginas propias) ---------- */ .mbx-banda { position: relative; background: var(--mbx-negro); color: var(--mbx-crema); overflow: hidden; isolation: isolate; } .mbx-banda__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .5; } .mbx-banda::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(20 11 6 / .97) 25%, rgb(20 11 6 / .55)); } .mbx-banda__in { max-width: var(--mbx-ancho); margin: 0 auto; padding: 3.6rem 1.25rem 3.4rem; } .mbx-banda--pag .mbx-banda__in { padding: 5rem 1.25rem 4.6rem; } .mbx-banda--corta .mbx-banda__in { padding: 3.8rem 1.25rem 3.4rem; } .mbx-banda h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); margin: 0 0 .8rem; } .mbx-banda p:not(.mbx-eyebrow) { max-width: 40em; margin: 0; color: #e0d3bb; font-size: 1.05rem; } .mbx-banda .woocommerce-breadcrumb { color: var(--mbx-gris-osc) !important; margin: 0 0 1rem !important; font-size: .85rem; } .mbx-banda .woocommerce-breadcrumb a { color: var(--mbx-crema) !important; } .mbx-migas__sep { margin: 0 .5rem; opacity: .5; } .mbx-filtros { display: flex; gap: .5rem; flex-wrap: wrap; } .mbx-filtros--tienda { max-width: var(--mbx-ancho); margin: 0 auto; padding: 1.4rem 1.25rem 0; } .mbx-filtros a, .mbx-filtros button { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--mbx-borde); background: #fff; color: var(--mbx-tinta) !important; text-decoration: none; font: 500 .9rem/1.2 var(--mbx-txt); cursor: pointer; transition: .15s; } .mbx-filtros a:hover, .mbx-filtros button:hover { border-color: var(--mbx-tinta); } .mbx-filtros a[aria-current], .mbx-filtros button[aria-pressed=true] { background: var(--mbx-negro); border-color: var(--mbx-negro); color: var(--mbx-crema) !important; } .mbx-filtros small { opacity: .6; font-size: .82rem; } /* ---------- WooCommerce: tarjetas ---------- */ body.mbx.woocommerce-js ul.products, body.mbx .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.4rem; margin: 0 !important; } body.mbx .woocommerce ul.products.columns-3, body.mbx.woocommerce-js ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); } body.mbx ul.products::before, body.mbx ul.products::after { display: none !important; } body.mbx ul.products li.product { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; background: #fff; border-radius: var(--mbx-radio); overflow: hidden; border: 1px solid var(--mbx-borde); display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; } body.mbx ul.products li.product:hover { box-shadow: var(--mbx-sombra); transform: translateY(-3px); } body.mbx ul.products li.product .astra-shop-thumbnail-wrap { margin: 0 !important; overflow: hidden; position: relative; } body.mbx ul.products li.product .astra-shop-thumbnail-wrap img { margin: 0 !important; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); } body.mbx ul.products li.product:hover .astra-shop-thumbnail-wrap img { transform: scale(1.04); } body.mbx ul.products li.product .astra-shop-summary-wrap { padding: 1.1rem 1.15rem 1.2rem; flex: 1; display: flex; flex-direction: column; } body.mbx ul.products li.product .woocommerce-loop-product__title { font: 600 1.08rem/1.3 var(--mbx-tit) !important; letter-spacing: 0; color: var(--mbx-tinta); margin: 0 0 .3rem; padding: 0; } body.mbx ul.products li.product .ast-woo-product-category, body.mbx ul.products li.product .ast-on-card-button, body.mbx ul.products li.product .ast-select-options-trigger, body.mbx ul.products li.product .star-rating { display: none !important; } .mbx-tarjeta__lugar { display: flex; align-items: center; gap: .3rem; color: var(--mbx-gris); font-size: .84rem; margin: 0 0 .7rem; } .mbx-tarjeta__lugar .mbx-i { width: 14px; height: 14px; color: var(--mbx-cobre-txt); } body.mbx ul.products li.product .price { order: 3; margin: auto 0 .8rem !important; color: var(--mbx-tinta) !important; font-weight: 700; font-size: 1.05rem; } body.mbx ul.products li.product .astra-shop-summary-wrap > a:first-child { order: 1; } body.mbx ul.products li.product .astra-shop-summary-wrap .button { order: 4; } .mbx-precio-cot { font: 600 .85rem/1.2 var(--mbx-txt); color: var(--mbx-cobre-txt); letter-spacing: .04em; text-transform: uppercase; } body.mbx.woocommerce-js ul.products li.product a.button, body.mbx .woocommerce ul.products li.product a.button { margin: 0 !important; width: 100%; text-align: center; border-radius: 999px !important; padding: .72rem 1rem !important; font: 600 .92rem/1.2 var(--mbx-txt) !important; background: var(--mbx-negro) !important; color: var(--mbx-crema) !important; border: 0 !important; } body.mbx.woocommerce-js ul.products li.product a.button:hover, body.mbx .woocommerce ul.products li.product a.button:hover { background: var(--mbx-cobre-2) !important; color: var(--mbx-negro) !important; } body.mbx ul.products li.product .added_to_cart { display: block; text-align: center; margin-top: .5rem; font-size: .85rem; } /* Botones de WooCommerce en general (Astra los pinta en .woocommerce-js a.button) */ body.mbx.woocommerce-js a.button, body.mbx.woocommerce-js button.button, body.mbx.woocommerce-js input.button, body.mbx.woocommerce-js .woocommerce-message .button, body.mbx.woocommerce-js button.button.alt, body.mbx.woocommerce-js #place_order, body.mbx.woocommerce-js .checkout-button, body.mbx.woocommerce-js .single_add_to_cart_button { background: var(--mbx-negro) !important; color: var(--mbx-crema) !important; border-radius: 999px !important; font-family: var(--mbx-txt) !important; font-weight: 600 !important; border: 0 !important; padding: .9rem 1.5rem !important; } body.mbx.woocommerce-js a.button:hover, body.mbx.woocommerce-js button.button:hover, body.mbx.woocommerce-js #place_order:hover, body.mbx.woocommerce-js .checkout-button:hover, body.mbx.woocommerce-js .single_add_to_cart_button:hover { background: var(--mbx-cobre-2) !important; color: var(--mbx-negro) !important; } body.mbx .woocommerce-ordering select { border-radius: 999px; border-color: var(--mbx-borde); padding: .5rem 2rem .5rem 1rem; } body.mbx .woocommerce-result-count { color: var(--mbx-gris); font-size: .9rem; } body.mbx .woocommerce-pagination ul { border: 0 !important; display: flex !important; gap: .4rem; justify-content: center; } body.mbx .woocommerce-pagination ul li { border: 0 !important; } body.mbx .woocommerce-pagination ul li a, body.mbx .woocommerce-pagination ul li span { border-radius: 50%; width: 40px; height: 40px; display: grid !important; place-items: center; padding: 0 !important; border: 1px solid var(--mbx-borde) !important; } body.mbx .woocommerce-pagination ul li span.current { background: var(--mbx-negro) !important; color: var(--mbx-crema) !important; } body.mbx .woocommerce-message, body.mbx .woocommerce-info, body.mbx .woocommerce-error { border-radius: 12px; border-top-color: var(--mbx-cobre-2) !important; background: #fff; } body.mbx .woocommerce-message::before, body.mbx .woocommerce-info::before { color: var(--mbx-cobre-2) !important; } /* ---------- Ficha de producto ---------- */ body.mbx.single-product .woocommerce-breadcrumb { font-size: .85rem; color: var(--mbx-gris); margin-bottom: 1.4rem; } body.mbx.single-product div.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem 3.4rem; align-items: start; } body.mbx.single-product div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; position: sticky; top: 100px; } body.mbx.single-product div.product .summary { width: 100% !important; float: none !important; margin: 0 !important; } body.mbx.single-product div.product .woocommerce-tabs, body.mbx.single-product div.product .related, body.mbx.single-product div.product .up-sells { grid-column: 1 / -1; } body.mbx.single-product .woocommerce-product-gallery__wrapper img, body.mbx.single-product .flex-viewport { border-radius: 18px; } body.mbx.single-product .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px !important; } body.mbx.single-product .flex-control-thumbs li { width: auto !important; margin: 0 !important; } body.mbx.single-product .flex-control-thumbs img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; opacity: .6; transition: .2s; } body.mbx.single-product .flex-control-thumbs img.flex-active, body.mbx.single-product .flex-control-thumbs img:hover { opacity: 1; } body.mbx.single-product .product_title { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0 0 .7rem; } .mbx-ficha__lugar { display: flex; align-items: center; gap: .4rem; color: var(--mbx-gris); margin: 0 0 1rem; font-size: .95rem; } .mbx-ficha__lugar .mbx-i { color: var(--mbx-cobre-txt); } body.mbx.single-product .summary .price { margin: 0 0 1.1rem; font-size: 1.5rem; color: var(--mbx-tinta) !important; font-weight: 700; } body.mbx.single-product .summary .price .mbx-precio-cot { font-size: .9rem; background: var(--mbx-crema-sec); padding: .45rem .8rem; border-radius: 8px; display: inline-block; } body.mbx.single-product .woocommerce-product-details__short-description { font-size: 1.08rem; color: #3d322a; margin-bottom: 1.4rem; } .mbx-cotiza-caja { background: var(--mbx-negro); color: var(--mbx-crema); border-radius: 18px; padding: 1.6rem; margin: 0 0 1.4rem; } .mbx-cotiza-caja__t { font: 600 1.25rem/1.2 var(--mbx-tit); color: #fff; margin: 0 0 .4rem; } .mbx-cotiza-caja__p { color: var(--mbx-gris-osc); margin: 0 0 1.2rem; font-size: .95rem; } .mbx-cotiza-caja__acc { display: grid; gap: .6rem; } .mbx-cotiza-caja .mbx-btn--linea-osc { border-color: rgb(243 230 200 / .4); color: var(--mbx-crema) !important; } .mbx-cotiza-caja .mbx-btn--linea-osc:hover { background: var(--mbx-crema); color: var(--mbx-negro) !important; } .mbx-incluye { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .9rem; } .mbx-incluye li { margin: 0; display: flex; gap: .85rem; align-items: flex-start; } .mbx-incluye .mbx-i { width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: var(--mbx-crema-sec); color: var(--mbx-cobre-txt); } .mbx-incluye span { display: flex; flex-direction: column; font-size: .9rem; color: var(--mbx-gris); } .mbx-incluye strong { color: var(--mbx-tinta); font-size: .98rem; } body.mbx.single-product .product_meta { font-size: .85rem; color: var(--mbx-gris); border-top: 1px solid var(--mbx-borde); padding-top: 1rem; } body.mbx.single-product .product_meta a { color: var(--mbx-cobre-txt); } body.mbx .woocommerce-tabs { border-top: 1px solid var(--mbx-borde); padding-top: 2rem; margin-top: 2rem; } body.mbx .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 1.2rem !important; border: 0 !important; } body.mbx .woocommerce-tabs ul.tabs li { border: 0 !important; background: none !important; padding: 0 !important; } body.mbx .woocommerce-tabs ul.tabs li a { font: 600 1.3rem/1.2 var(--mbx-tit) !important; color: var(--mbx-tinta) !important; padding: 0 !important; } body.mbx .woocommerce-tabs ul.tabs li::before, body.mbx .woocommerce-tabs ul.tabs li::after, body.mbx .woocommerce-tabs ul.tabs::before { display: none !important; } body.mbx .woocommerce-tabs .panel { max-width: 50em; font-size: 1.02rem; } body.mbx .woocommerce-tabs .panel ul { margin: 0 0 1rem 1.2rem; } body.mbx .woocommerce-tabs .panel li { margin-bottom: .35rem; } body.mbx .woocommerce-tabs .panel li::marker { color: var(--mbx-cobre-2); } body.mbx .related.products > h2, body.mbx .up-sells > h2 { font-size: 1.8rem; margin: 2.4rem 0 1.4rem; } /* Carro y pago */ body.mbx.woocommerce-cart .entry-title, body.mbx.woocommerce-checkout .entry-title { font-size: 2.2rem; } body.mbx .woocommerce table.shop_table { border-radius: 14px; border-color: var(--mbx-borde); background: #fff; } body.mbx .woocommerce form .form-row input.input-text, body.mbx .woocommerce form .form-row textarea, body.mbx .woocommerce form .form-row select, body.mbx .select2-container .select2-selection { border-radius: 10px !important; border-color: var(--mbx-borde) !important; } body.mbx #order_review, body.mbx .cart-collaterals .cart_totals { background: #fff; border: 1px solid var(--mbx-borde); border-radius: 16px; padding: 1.4rem; } /* ---------- Galería de proyectos ---------- */ .mbx-galeria { columns: 3; column-gap: 14px; margin-top: 1.6rem; } .mbx-galeria__it { break-inside: avoid; margin: 0 0 14px; position: relative; border-radius: 12px; overflow: hidden; background: var(--mbx-crema-sec); } .mbx-galeria__it[hidden] { display: none !important; } .mbx-galeria__it > a { display: block; } .mbx-galeria__it img { width: 100%; display: block; transition: transform .5s; } .mbx-galeria__it:hover img { transform: scale(1.03); } .mbx-galeria__it figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem .9rem .8rem; background: linear-gradient(transparent, rgb(14 7 3 / .85)); display: flex; flex-direction: column; pointer-events: none; } .mbx-galeria__it figcaption a { color: #fff !important; font: 600 1rem/1.25 var(--mbx-tit); text-decoration: none; pointer-events: auto; } .mbx-galeria__it figcaption span { color: var(--mbx-crema); font-size: .8rem; opacity: .85; } .mbx-lb { position: fixed; inset: 0; z-index: 999; background: rgb(10 5 2 / .94); display: flex; align-items: center; justify-content: center; padding: 1rem 4rem; } .mbx-lb[hidden] { display: none !important; } .mbx-lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; } .mbx-lb img { max-height: calc(100vh - 7rem); max-width: 100%; object-fit: contain; border-radius: 10px; } .mbx-lb figcaption { color: var(--mbx-crema); margin-top: .8rem; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; justify-content: center; text-align: center; } .mbx-lb figcaption a { color: var(--mbx-cobre) !important; font-weight: 600; } .mbx-lb__x, .mbx-lb__nav { position: absolute; background: rgb(255 255 255 / .08); border: 0; color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; } .mbx-lb__x:hover, .mbx-lb__nav:hover { background: var(--mbx-cobre); color: var(--mbx-negro); } .mbx-lb__x { top: 16px; right: 16px; } .mbx-lb__prev { left: 12px; top: 50%; transform: translateY(-50%); } .mbx-lb__next { right: 12px; top: 50%; transform: translateY(-50%); } /* ---------- Cotizador ---------- */ .mbx-cotiza > *, .mbx-historia > *, .mbx-detalle > *, .mbx-zona__in > *, .mbx-term__in > *, .mbx-acc-sec > * { min-width: 0; } .mbx-cotiza { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: start; } .mbx-form { background: #fff; border: 1px solid var(--mbx-borde); border-radius: 20px; padding: 2rem; box-shadow: var(--mbx-sombra); } .mbx-form fieldset { border: 0; padding: 0; margin: 0 0 1.8rem; } .mbx-form legend { font: 600 1.2rem/1.2 var(--mbx-tit); margin-bottom: 1rem; padding: 0; } .mbx-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .mbx-chips label { cursor: pointer; } .mbx-chips input { position: absolute; opacity: 0; pointer-events: none; } .mbx-chips span { display: inline-block; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--mbx-borde); font-size: .92rem; transition: .15s; } .mbx-chips input:checked + span { background: var(--mbx-negro); color: var(--mbx-crema); border-color: var(--mbx-negro); } .mbx-chips input:focus-visible + span { outline: 2px solid var(--mbx-cobre-2); outline-offset: 2px; } .mbx-campo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; font-size: .9rem; font-weight: 600; } .mbx-campo small { font-weight: 400; color: var(--mbx-gris); font-size: 12.5px; } .mbx-campo input, .mbx-campo select, .mbx-campo textarea { width: 100%; border: 1px solid var(--mbx-borde) !important; border-radius: 10px !important; padding: .75rem .9rem !important; font: 400 1rem/1.4 var(--mbx-txt) !important; background: var(--mbx-fondo) !important; color: var(--mbx-tinta) !important; box-shadow: none !important; } .mbx-campo input:focus, .mbx-campo select:focus, .mbx-campo textarea:focus { border-color: var(--mbx-cobre-2) !important; background: #fff !important; outline: none; } .mbx-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .mbx-fila3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; } .mbx-check { display: flex; gap: .6rem; align-items: center; font-size: .95rem; cursor: pointer; } .mbx-check input { width: 18px; height: 18px; accent-color: var(--mbx-negro); } .mbx-form__err { background: #fdecea; color: #8c1d18; padding: .7rem 1rem; border-radius: 10px; font-size: .92rem; } .mbx-form__err[hidden] { display: none; } .mbx-form__nota { text-align: center; font-size: .85rem; color: var(--mbx-gris); margin: .8rem 0 0; } .mbx-cotiza__lado { position: sticky; top: 110px; } .mbx-cotiza__lado img { border-radius: 18px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: 1.4rem; } .mbx-cotiza__lado h2 { font-size: 1.4rem; margin: 0 0 1rem; } .mbx-cotiza__directo { font-size: .95rem; color: var(--mbx-gris); } .mbx-cotiza__directo a { font-weight: 700; } /* ---------- Nosotros ---------- */ .mbx-historia { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: center; } .mbx-historia h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 1.2rem; } .mbx-historia__txt p:not(.mbx-eyebrow) { color: #3d322a; font-size: 1.04rem; } .mbx-historia__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mbx-historia__fotos img { border-radius: 16px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; } .mbx-historia__fotos img:last-child { margin-top: 2.5rem; } .mbx-detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .mbx-detalle h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 1rem; } .mbx-detalle p:not(.mbx-eyebrow) { color: var(--mbx-gris-osc); margin: 0 0 1.6rem; } .mbx-detalle__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mbx-detalle__fotos img { border-radius: 16px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .mbx-nav a { padding: .5rem .55rem; font-size: .9rem; } .mbx-cab__in { gap: 1rem; } } @media (max-width: 1024px) { .mbx-menu-btn { display: flex; } .mbx-cab { backdrop-filter: none; background: var(--mbx-negro); } /* el filtro vuelve a la cabecera el bloque contenedor del menú fijo */ .mbx-nav { position: fixed; inset: 0 0 0 auto; width: min(380px, 88vw); background: var(--mbx-negro-2); flex-direction: column; align-items: stretch; padding: 5rem 1.25rem 2rem; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .28s, visibility .28s; z-index: 101; box-shadow: -20px 0 50px rgb(0 0 0 / .5); } .mbx-nav-abierta .mbx-nav { transform: none; visibility: visible; } .mbx-nav-abierta::after { content: ''; position: fixed; inset: 0; background: rgb(0 0 0 / .55); z-index: 99; } .mbx-nav > ul { flex-direction: column; margin: 0; gap: 0; } .mbx-nav > ul > li { border-bottom: 1px solid rgb(214 160 82 / .12); } .mbx-nav a { padding: .85rem .3rem; font-size: 1.05rem; } .mbx-nav__sub > ul { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; padding: 0 0 .6rem .8rem; min-width: 0; } .mbx-nav__sub > ul a { padding: .45rem .3rem; font-size: .95rem; color: var(--mbx-gris-osc); } .mbx-nav__sub > a svg { display: none; } .mbx-nav__cta { display: flex !important; margin-top: 1.4rem; } .mbx-buscar--movil { display: block !important; margin-bottom: 1rem; } .mbx-buscar--movil input[type=search] { width: 100%; background: rgb(255 255 255 / .06) !important; border: 1px solid rgb(214 160 82 / .3) !important; color: #fff !important; border-radius: 999px !important; padding: .7rem 1.1rem !important; } .mbx-nav-abierta .mbx-menu-btn { position: relative; z-index: 102; } .mbx-nav-abierta .mbx-menu-btn span:nth-child(1) { transform: translateY(10px) rotate(45deg); } .mbx-nav-abierta .mbx-menu-btn span:nth-child(2) { opacity: 0; } .mbx-nav-abierta .mbx-menu-btn span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } .mbx-cab__acc { margin-left: auto; } .mbx-heroe__in { grid-template-columns: 1fr; gap: 2.6rem; padding-top: 3rem; } .mbx-heroe__fotos { height: 72vw; max-height: 560px; } .mbx-cats { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } .mbx-cat--1 { grid-row: span 1; } .mbx-proceso { grid-template-columns: 1fr 1fr; } .mbx-proceso li:nth-child(3) { padding-left: 0; border-left: 0; } .mbx-proceso li { padding-bottom: 2rem; } .mbx-reels { grid-template-columns: repeat(2, 1fr); } .mbx-acc-sec, .mbx-term__in, .mbx-zona__in, .mbx-historia, .mbx-detalle, .mbx-cotiza { grid-template-columns: 1fr; gap: 2rem; } .mbx-term__nota { grid-column: 1; text-align: left; } .mbx-pie__in { grid-template-columns: 1fr 1fr; } .mbx-precta__in { flex-direction: column; align-items: flex-start; } body.mbx.single-product div.product { grid-template-columns: 1fr; } body.mbx.single-product div.product .woocommerce-product-gallery { position: static; } .mbx-cotiza__lado { position: static; } .mbx-galeria { columns: 2; } } @media (max-width: 782px) { .admin-bar .mbx-cab { top: 46px; } } @media (max-width: 760px) { body.mbx { font-size: 16px; } .mbx-franja p:first-child { display: none; } .mbx-franja__in { justify-content: center; } .mbx-franja__der a:first-child { display: none; } .mbx-cab__cta { display: none; } .mbx-marca img, .mbx-cab.is-scroll .mbx-marca img { height: 42px; } .mbx-sec { padding: 3.4rem 0; } .mbx-sec__cab { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 1.8rem; } .mbx-sec__cab--centro { align-items: center; } .mbx-heroe__in { padding: 2.4rem 1.25rem 3rem; } .mbx-heroe__lead { font-size: 1.02rem; } .mbx-heroe__acc .mbx-btn { flex: 1 1 100%; } .mbx-heroe__fotos { height: 108vw; gap: 10px; grid-template-columns: 1.2fr 1fr; } .mbx-cats { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 10px; } .mbx-cat--0 { grid-row: span 1; } .mbx-cat__txt { left: .85rem; bottom: .8rem; right: .85rem; } .mbx-cat__txt strong, .mbx-cat--0 .mbx-cat__txt strong { font-size: 1.05rem; } .mbx-cat__fl { display: none; } .mbx-ad { grid-template-columns: 1fr; } .mbx-proceso { grid-template-columns: 1fr; } .mbx-proceso li, .mbx-proceso li + li { padding: 1.4rem 0; border-left: 0; border-bottom: 1px solid var(--mbx-borde); display: grid; grid-template-columns: 46px 1fr; column-gap: 1rem; } .mbx-proceso__n { grid-column: 1 / -1; margin-bottom: .6rem; } .mbx-proceso .mbx-i { grid-row: span 2; } .mbx-reels { grid-template-columns: repeat(4, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; scrollbar-width: none; } .mbx-reel { scroll-snap-align: start; } body.mbx.woocommerce-js ul.products, body.mbx .woocommerce ul.products, body.mbx .woocommerce ul.products.columns-3, body.mbx.woocommerce-js ul.products.columns-3 { grid-template-columns: 1fr 1fr; gap: .9rem; } body.mbx ul.products li.product .astra-shop-summary-wrap { padding: .8rem .8rem .9rem; } body.mbx ul.products li.product .woocommerce-loop-product__title { font-size: .95rem !important; } .mbx-precio-cot { font-size: .76rem; letter-spacing: .02em; } body.mbx.woocommerce-js ul.products li.product a.button, body.mbx .woocommerce ul.products li.product a.button { padding: .62rem .6rem !important; font-size: .85rem !important; } .mbx-muestras { grid-template-columns: repeat(4, 1fr); gap: .9rem .6rem; } .mbx-muestras li { font-size: .8rem; } .mbx-term__extras { grid-template-columns: 1fr; } .mbx-pie__in { grid-template-columns: 1fr 1fr; gap: 2rem 1.4rem; } .mbx-pie__marca { grid-column: 1 / -1; } .mbx-precta__acc { width: 100%; } .mbx-precta__acc .mbx-btn { flex: 1; } .mbx-wa-flot span { display: none; } .mbx-wa-flot { padding: .85rem; } .mbx-banda--pag .mbx-banda__in { padding: 3.2rem 1.25rem 3rem; } .mbx-banda__in { padding: 2.6rem 1.25rem 2.4rem; } .mbx-filtros--tienda, .mbx-filtros--js { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; } .mbx-filtros a, .mbx-filtros button { flex: none; } .mbx-filtros--tienda { margin: 0; } .mbx-form { padding: 1.3rem; } .mbx-fila2 { grid-template-columns: 1fr; } .mbx-lb { padding: 1rem; } .mbx-lb__nav { top: auto; bottom: 16px; transform: none; } .mbx-historia__fotos img:last-child { margin-top: 1.5rem; } } @media (max-width: 340px) { .mbx-cats { grid-template-columns: 1fr; grid-auto-rows: 180px; } .mbx-cat--0 { grid-column: span 1; } .mbx-fila3 { grid-template-columns: 1fr 1fr 1fr; gap: 0 .5rem; } .mbx-muestras { grid-template-columns: repeat(4, 1fr); } .mbx-pie__in { grid-template-columns: 1fr; } } @media (min-width: 1800px) { :root { --mbx-ancho: 1440px; } body.mbx { font-size: 17.5px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } body.mbx.single-product .product_meta { display: none; } /* Astra pinta todos los