/* Malicia Botánica — estilos base del tema.
 * Concepto: boutique botánica. Verde oliva del logo para marcos y cabecera,
 * avena para el fondo, dorado para detalles. Marcellus para títulos, Jost para texto.
 */
:root {
	--mb-olive: #364530;
	--mb-olive-deep: #2c3927;
	--mb-gold: #b89f5d;
	--mb-gold-ink: #8a7440;
	--mb-gold-soft: #e5d3a0;
	--mb-avena: #ede5d3;
	--mb-avena-2: #e2d7bf;
	--mb-paper: #f6f1e6;
	--mb-ink: #27311f;
	--mb-muted: #6a6852;
	--mb-line: #d3c6a8;
	--mb-on-olive: #d8cdb3;
	--mb-danger: #a0432e;
	--mb-ok: #4f6b3a;
	--mb-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
	--mb-body: "Jost", "Helvetica Neue", Arial, sans-serif;
	--mb-wrap: 1180px;
	--mb-gutter: max(16px, env(safe-area-inset-left, 0px));
	--mb-gutter-r: max(16px, env(safe-area-inset-right, 0px));
	--mb-header-h: 72px;
	--mb-radius: 2px;
}

/* Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--mb-header-h) + 24px); }
body {
	margin: 0;
	background: var(--mb-avena);
	color: var(--mb-ink);
	font-family: var(--mb-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body.mb-locked { overflow: hidden; }
img, video { max-width: 100%; height: auto; }
a { color: var(--mb-olive); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--mb-gold-ink); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--mb-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .01em;
	text-wrap: balance;
	margin: 0 0 .5em;
	color: var(--mb-ink);
}
strong, b { font-weight: 500; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--mb-gold); outline-offset: 2px; }
::selection { background: var(--mb-gold-soft); color: var(--mb-ink); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; z-index: 100000;
	top: 8px; left: 8px; background: var(--mb-paper); padding: 12px 18px;
}

.mb-wrap {
	max-width: var(--mb-wrap);
	margin-inline: auto;
	padding-left: var(--mb-gutter);
	padding-right: var(--mb-gutter-r);
}
.mb-eyebrow {
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mb-gold-ink);
	font-weight: 500;
	margin-bottom: .4rem;
}
.mb-h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.mb-h3 { font-size: 1.5rem; }
.mb-note { color: var(--mb-muted); }

/* Íconos y monograma ------------------------------------------------- */
.mb-ic {
	width: 28px; height: 28px; flex: none;
	fill: none; stroke: currentColor; stroke-width: 1.4;
	stroke-linecap: round; stroke-linejoin: round;
	vertical-align: middle;
}
.mb-mark {
	display: inline-block;
	aspect-ratio: 1258 / 912;
	width: 60px;
	background: currentColor;
	color: var(--mb-gold);
	-webkit-mask: url(../img/mark.svg) center / contain no-repeat;
	mask: url(../img/mark.svg) center / contain no-repeat;
}

/* Botones ------------------------------------------------------------ */
.mb-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.mb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	border: 1px solid var(--mb-gold);
	background: var(--mb-gold);
	color: var(--mb-ink);
	padding: 14px 26px;
	border-radius: var(--mb-radius);
	font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
	text-decoration: none; cursor: pointer; line-height: 1.2;
	transition: filter .2s, background .2s;
}
.mb-btn:hover { filter: brightness(1.06); color: var(--mb-ink); }
.mb-btn--ghost { background: transparent; color: var(--mb-avena); }
.mb-btn--ghost:hover { color: var(--mb-avena); background: rgba(184, 159, 93, .15); }
.mb-btn--solid { background: var(--mb-olive); border-color: var(--mb-olive); color: var(--mb-avena); }
.mb-btn--solid:hover { color: var(--mb-avena); }
.mb-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
	text-decoration: none; color: var(--mb-olive);
}
.mb-link .mb-ic { width: 20px; height: 20px; transition: transform .2s; }
.mb-link:hover .mb-ic { transform: translateX(4px); }

/* Barra superior y cabecera ----------------------------------------- */
.mb-topbar {
	background: var(--mb-olive);
	color: #e5dabf;
	font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
	padding-block: 7px;
	padding-top: calc(7px + env(safe-area-inset-top, 0px));
}
.mb-topbar .mb-wrap { display: flex; justify-content: center; align-items: center; gap: 8px; text-align: center; }
.mb-topbar .mb-ic { width: 18px; height: 18px; color: var(--mb-gold); }
@media (max-width: 600px) { .mb-topbar { font-size: .64rem; letter-spacing: .06em; } .mb-topbar .mb-ic { display: none; } }

.mb-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--mb-olive);
	color: var(--mb-avena);
	border-top: 1px solid rgba(184, 159, 93, .35);
}
.admin-bar .mb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mb-header { top: 0; } }
.mb-header-row { display: flex; align-items: center; gap: 16px; height: var(--mb-header-h); }
.mb-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.mb-brand:hover { color: inherit; }
.mb-brand .mb-mark { width: 54px; }
.mb-brand-text b {
	display: block; font-family: var(--mb-display); font-weight: 400;
	font-size: 1.25rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.05;
}
.mb-brand-text small { display: block; font-size: .6rem; letter-spacing: .32em; color: var(--mb-gold); text-transform: uppercase; }
.custom-logo-link img { max-height: 52px; width: auto; display: block; }

.mb-nav { margin-left: auto; }
.mb-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.mb-menu li { position: relative; }
.mb-menu a {
	color: inherit; text-decoration: none;
	font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
	opacity: .88; padding-block: 8px; display: inline-block;
}
.mb-menu a:hover, .mb-menu .current-menu-item > a { opacity: 1; color: var(--mb-gold); }
.mb-menu .sub-menu {
	list-style: none; margin: 0; padding: 10px 0;
	position: absolute; top: 100%; left: -16px; min-width: 210px;
	background: var(--mb-olive-deep); border: 1px solid rgba(184, 159, 93, .3);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s;
}
.mb-menu li:hover > .sub-menu, .mb-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mb-menu .sub-menu a { padding: 8px 16px; display: block; }

.mb-actions { display: flex; align-items: center; gap: 6px; }
.mb-nav + .mb-actions { margin-left: 18px; }
.mb-iconbtn {
	display: inline-grid; place-items: center;
	width: 42px; height: 42px; border: 0; background: none; color: inherit;
	border-radius: 50%; cursor: pointer; text-decoration: none;
}
.mb-iconbtn:hover { color: var(--mb-gold); background: rgba(184, 159, 93, .12); }
.mb-iconbtn .mb-ic { width: 26px; height: 26px; }
.mb-cartbtn {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid rgba(184, 159, 93, .6); border-radius: 999px;
	padding: 6px 8px 6px 12px; color: var(--mb-avena); text-decoration: none;
	font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.mb-cartbtn:hover { color: var(--mb-avena); background: rgba(184, 159, 93, .12); }
.mb-cartbtn .mb-ic { width: 22px; height: 22px; color: var(--mb-gold); }
.mb-cartbtn em { font-style: normal; }
.mb-cart-count {
	background: var(--mb-gold); color: var(--mb-olive);
	border-radius: 999px; min-width: 22px; height: 22px; padding: 0 6px;
	display: inline-grid; place-items: center; font-weight: 500; font-size: .74rem;
	font-variant-numeric: tabular-nums;
}
.mb-menu-toggle { display: none; margin-left: -8px; }

@media (max-width: 900px) {
	:root { --mb-header-h: 64px; }
	.mb-nav, .mb-hide-sm { display: none; }
	.mb-menu-toggle { display: inline-grid; }
	.mb-header-row { gap: 8px; }
	.mb-brand { margin-inline: auto; }
	.mb-brand .mb-mark { width: 44px; }
	.mb-brand-text b { font-size: 1rem; }
	.mb-cartbtn em { display: none; }
	.mb-cartbtn { padding: 5px 6px 5px 8px; }
}

/* Paneles laterales (menú móvil y bolsa) ---------------------------- */
.mb-drawer {
	position: fixed; top: 0; bottom: 0; z-index: 60;
	width: min(420px, 100%);
	background: var(--mb-paper);
	display: flex; flex-direction: column;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	visibility: hidden;
	transition: transform .35s ease, visibility 0s linear .35s;
	box-shadow: 0 0 40px rgba(20, 26, 17, .18);
}
.mb-drawer--right { right: 0; transform: translateX(100%); padding-right: env(safe-area-inset-right, 0px); }
.mb-drawer--left { left: 0; transform: translateX(-100%); padding-left: env(safe-area-inset-left, 0px); }
.mb-drawer.is-open { transform: none; visibility: visible; transition: transform .35s ease; }
.mb-drawer-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--mb-line);
}
.mb-drawer-title { font-family: var(--mb-display); font-size: 1.4rem; }
.mb-drawer-body { flex: 1; overflow: auto; padding: 18px 24px 24px; display: grid; align-content: start; grid-auto-rows: max-content; gap: 18px; }
.mb-menu--stack { flex-direction: column; gap: 0; }
.mb-menu--stack > li { border-bottom: 1px solid var(--mb-line); }
.mb-menu--stack a { color: var(--mb-ink); font-family: var(--mb-display); text-transform: none; letter-spacing: .02em; font-size: 1.25rem; padding-block: 14px; opacity: 1; }
.mb-menu--stack .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; padding: 0 0 10px 12px; }
.mb-menu--stack .sub-menu a { font-family: var(--mb-body); font-size: 1rem; padding: 6px 0; }
.mb-drawer-link { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--mb-ink); }
.mb-drawer-link .mb-ic { color: var(--mb-gold-ink); }
.mb-scrim {
	position: fixed; inset: 0; z-index: 55;
	background: rgba(20, 26, 17, .5);
	opacity: 0; transition: opacity .3s;
}
.mb-scrim.is-open { opacity: 1; }

/* Formularios generales --------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
input[type="search"], input[type="url"], input[type="date"], select, textarea {
	background: var(--mb-paper);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	padding: 11px 12px;
	font-size: 16px;
	color: var(--mb-ink);
	max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--mb-gold); outline: none; box-shadow: 0 0 0 3px rgba(184, 159, 93, .25); }
.search-form, .woocommerce-product-search { display: flex; gap: 8px; }
.search-form label, .woocommerce-product-search .search-field { flex: 1; }
.search-form .search-field { width: 100%; }
.search-form button, .search-form input[type="submit"], .woocommerce-product-search button {
	border: 1px solid var(--mb-olive); background: var(--mb-olive); color: var(--mb-avena);
	padding: 0 16px; border-radius: var(--mb-radius); cursor: pointer;
	font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
}

/* Portada ------------------------------------------------------------ */
.mb-hero { background: var(--mb-olive); color: var(--mb-avena); overflow: hidden; }
.mb-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: end; padding-top: 56px; }
.mb-hero-copy { padding-bottom: 72px; }
.mb-hero-mark { width: 76px; margin-bottom: 16px; }
.mb-hero .mb-eyebrow { color: var(--mb-gold); }
.mb-hero h1 { color: var(--mb-avena); font-size: clamp(2.4rem, 5.4vw, 4.3rem); line-height: 1.05; margin: 10px 0 20px; }
.mb-hero h1 em { font-style: normal; color: var(--mb-gold); }
.mb-hero p { max-width: 46ch; color: var(--mb-on-olive); font-size: 1.05rem; margin: 0; }
.mb-arch {
	position: relative; margin: 0;
	aspect-ratio: 4 / 5; max-width: 100%;
	border: 1px solid rgba(184, 159, 93, .55); border-bottom: 0;
	border-radius: 999px 999px 0 0;
	padding: 10px 10px 0;
}
.mb-arch img, .mb-arch-empty {
	width: 100%; height: 100%; object-fit: cover; display: block;
	border-radius: 999px 999px 0 0;
}
.mb-arch-empty { display: grid; place-items: center; align-content: center; gap: 12px; background: rgba(184, 159, 93, .12); text-align: center; padding: 24px; }
.mb-arch-empty .mb-mark { width: 120px; }
.mb-arch-empty small { color: var(--mb-on-olive); max-width: 26ch; }
.mb-arch figcaption {
	position: absolute; left: 26px; bottom: 22px;
	background: rgba(39, 49, 31, .84); color: var(--mb-avena);
	padding: 10px 16px; font-size: .82rem; border: 1px solid rgba(184, 159, 93, .5);
}
.mb-arch figcaption b { display: block; font-family: var(--mb-display); font-weight: 400; font-size: 1rem; color: var(--mb-gold-soft); }
@media (max-width: 820px) {
	.mb-hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
	.mb-hero-copy { padding-bottom: 0; }
	.mb-arch { width: 86%; justify-self: center; }
}

/* Beneficios --------------------------------------------------------- */
.mb-pillars { border-bottom: 1px solid var(--mb-line); }
.mb-pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 30px; }
.mb-pillar { display: flex; gap: 14px; align-items: flex-start; }
.mb-pillar .mb-ic { width: 40px; height: 40px; color: var(--mb-gold-ink); stroke-width: 1.2; }
.mb-pillar b { display: block; font-family: var(--mb-display); font-weight: 400; font-size: 1.05rem; }
.mb-pillar span { font-size: .86rem; color: var(--mb-muted); }
@media (max-width: 900px) { .mb-pillars-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .mb-pillars-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Secciones ---------------------------------------------------------- */
.mb-section { padding-block: 72px; }
.mb-sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.mb-sec-head .mb-h2 { margin: 0; }

.mb-cats { padding-bottom: 0; }
.mb-cats .mb-h2 { font-size: 1.6rem; margin-bottom: 20px; }
.mb-cats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.mb-cat {
	display: grid; justify-items: center; gap: 6px; text-align: center;
	padding: 22px 12px; border: 1px solid var(--mb-line); background: var(--mb-paper);
	text-decoration: none; color: var(--mb-ink); transition: border-color .2s, transform .2s;
}
.mb-cat:hover { border-color: var(--mb-gold); transform: translateY(-2px); color: var(--mb-ink); }
.mb-cat-ic { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--mb-gold); display: grid; place-items: center; color: var(--mb-gold-ink); }
.mb-cat-ic .mb-ic { width: 34px; height: 34px; stroke-width: 1.2; }
.mb-cat-name { font-family: var(--mb-display); font-size: 1.1rem; }
.mb-cat-count { font-size: .78rem; color: var(--mb-muted); }

.mb-story { background: var(--mb-avena-2); }
.mb-story-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 48px; align-items: center; }
.mb-story-mark { width: 160px; color: var(--mb-gold-ink); }
.mb-story p { max-width: 56ch; color: var(--mb-muted); }
.mb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mb-line); border: 1px solid var(--mb-line); }
.mb-facts div { background: var(--mb-avena-2); padding: 24px 20px; }
.mb-facts b { display: block; font-family: var(--mb-display); font-weight: 400; font-size: 2.1rem; line-height: 1.1; color: var(--mb-gold-ink); font-variant-numeric: tabular-nums; }
.mb-facts span { font-size: .86rem; color: var(--mb-muted); }
@media (max-width: 960px) { .mb-story-grid { grid-template-columns: 1fr; gap: 28px; } .mb-story-mark { width: 110px; } }

/* Páginas, blog y 404 ------------------------------------------------ */
.mb-main { padding-block: 40px 72px; min-height: 50vh; }
.mb-home { padding: 0; }
.mb-page-head { padding-block: 12px 28px; }
.mb-page-title { font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.mb-prose { max-width: 70ch; }
.mb-prose > * + * { margin-top: 1em; }
.mb-prose img { border-radius: var(--mb-radius); }
.mb-article-media { margin-bottom: 28px; }
.mb-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 24px; }
.mb-post-card h2 { font-size: 1.4rem; margin: 6px 0; }
.mb-post-card h2 a { color: inherit; text-decoration: none; }
.mb-post-media { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mb-avena-2); margin-bottom: 14px; }
.mb-post-media img { width: 100%; height: 100%; object-fit: cover; }
.mb-post-media .mb-mark { width: 90px; color: var(--mb-gold-ink); }
.mb-404 { text-align: center; display: grid; justify-items: center; gap: 12px; max-width: 620px; padding-block: 40px; }
.mb-404 .mb-mark { width: 140px; color: var(--mb-gold-ink); }
.mb-404 .woocommerce-product-search { width: 100%; }
.mb-comments { margin-top: 48px; max-width: 70ch; }
.mb-comment-list { padding-left: 1.2em; }
.nav-links { display: flex; gap: 8px; margin-top: 32px; }
.nav-links .page-numbers { padding: 6px 12px; border: 1px solid var(--mb-line); text-decoration: none; }
.nav-links .current { background: var(--mb-olive); color: var(--mb-avena); border-color: var(--mb-olive); }

/* Pie ---------------------------------------------------------------- */
.mb-footer { background: var(--mb-olive); color: var(--mb-on-olive); padding-block: 56px 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); font-size: .92rem; }
.mb-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.mb-footer h4 { color: #c9b172; font-size: 1rem; letter-spacing: .08em; margin-bottom: 12px; }
.mb-footer a { color: inherit; text-decoration: none; }
.mb-footer a:hover { color: var(--mb-gold-soft); }
.mb-footer-brand .mb-mark { width: 74px; }
.mb-footer-brand p { max-width: 34ch; }
.mb-footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mb-footer-menu a { opacity: .92; }
.mb-contact li { display: flex; gap: 10px; align-items: center; }
.mb-contact .mb-ic { width: 20px; height: 20px; color: var(--mb-gold); }
.mb-footer-extra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; border-top: 1px solid rgba(184, 159, 93, .3); padding-top: 24px; }
.mb-footer .mb-widget-title, .mb-footer .wp-block-heading, .mb-footer .widget-title { color: #c9b172; font-size: 1rem; letter-spacing: .08em; margin-bottom: 12px; }
.mb-footer .mb-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mb-footer .mb-widget input[type="email"], .mb-footer .mb-widget input[type="text"] { background: var(--mb-olive-deep); border-color: rgba(184, 159, 93, .4); color: var(--mb-avena); }
.mb-libro-link {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
	border: 1px solid rgba(184, 159, 93, .55); border-radius: 2px; color: var(--mb-avena) !important;
	font-size: .78rem; letter-spacing: .08em; opacity: 1;
}
.mb-libro-link .mb-ic { width: 22px; height: 22px; color: var(--mb-gold); }
.mb-libro-link:hover { background: rgba(184, 159, 93, .14); }
.mb-legal {
	grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	border-top: 1px solid rgba(184, 159, 93, .3); padding-top: 20px; font-size: .78rem; align-items: center;
}
@media (max-width: 820px) { .mb-footer-grid { grid-template-columns: 1fr 1fr; } .mb-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 440px) { .mb-footer-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
