/*
 * Marketing Digital Core — base compartida "Método Creativo"
 * Fuentes locales, tokens y componentes comunes (botón, precio, etiquetas).
 * La usan landing.css y catalog.css.
 */

/* ---------- Fuentes locales (variables, subconjunto latino) ---------- */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
	--mdc-bg: #FAF9F5;
	--mdc-surface: #FFFFFF;
	--mdc-surface-alt: #F3F1EA;
	--mdc-ink: #1F1E1B;
	--mdc-muted: #6E6B65;
	--mdc-line: #EFECE6;
	--mdc-line-strong: #DCD7CC;
	--mdc-terra: #B5603F;
	--mdc-terra-deep: #A9573A; /* fondo de botones: contraste AA (5:1) con texto blanco */
	--mdc-forest: #2A3B30;
	--mdc-on-accent: #FFFFFF;
	--mdc-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	--mdc-shadow-real: 0 1px 2px rgba(31, 30, 27, .06), 0 12px 24px -8px rgba(31, 30, 27, .12), 0 40px 60px -30px rgba(31, 30, 27, .28);

	--mdc-font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
	--mdc-font-body: "Jost", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mdc-tracking-display: 0.01em;
	--mdc-tracking-caps: 0.18em;
	--mdc-tracking-button: 0.12em;

	--mdc-max: 1160px;
	--mdc-gutter: clamp(1.25rem, 5vw, 2.5rem);
	--mdc-radius: 4px;
	--mdc-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Ámbito ---------- */
.mdc-scope, .mdc-scope *, .mdc-scope *::before, .mdc-scope *::after { box-sizing: border-box; }
.mdc-scope { font-family: var(--mdc-font-body); color: var(--mdc-ink); -webkit-font-smoothing: antialiased; }
.mdc-scope img { max-width: 100%; height: auto; display: block; }
.mdc-scope :where(h1, h2, h3, p, ul, figure, blockquote) { margin: 0; }
.mdc-scope :where(ul) { padding: 0; }
.mdc-scope :where(h1, h2, h3) {
	font-family: var(--mdc-font-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: var(--mdc-tracking-display);
	color: var(--mdc-ink);
}
.mdc-scope :focus-visible { outline: 2px solid var(--mdc-terra); outline-offset: 3px; }

.mdc-wrap { max-width: var(--mdc-max); margin: 0 auto; padding: 0 var(--mdc-gutter); }
.mdc-sr, .mdc-scope .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mdc-eyebrow {
	font: 500 .75rem/1.4 var(--mdc-font-body);
	letter-spacing: var(--mdc-tracking-caps);
	text-transform: uppercase;
	color: var(--mdc-forest);
}
.mdc-h2 { font-size: clamp(2.2rem, 5vw, 3.25rem); font-weight: 400; }

/* ---------- Botón ---------- */
.mdc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
	min-height: 3.4rem; padding: 0 2rem; border-radius: 999px; border: 0;
	background: var(--mdc-terra-deep); color: var(--mdc-on-accent) !important;
	font: 500 .875rem/1 var(--mdc-font-body);
	letter-spacing: var(--mdc-tracking-button); text-transform: uppercase; text-decoration: none !important;
	box-shadow: 0 10px 24px -14px rgba(169, 87, 58, .9);
	transition: background-color .3s var(--mdc-ease), transform .3s var(--mdc-ease), box-shadow .3s var(--mdc-ease);
	cursor: pointer;
}
.mdc-btn:hover { background: var(--mdc-forest); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(42, 59, 48, .8); }
.mdc-btn--sm { min-height: 2.75rem; padding: 0 1.25rem; font-size: .75rem; }
.mdc-btn__arrow { transition: transform .3s var(--mdc-ease); }
.mdc-btn:hover .mdc-btn__arrow { transform: translateX(3px); }

/* ---------- Precio (marcado de WooCommerce) ---------- */
.mdc-price { font: 500 1.25rem/1.3 var(--mdc-font-body); color: var(--mdc-ink); letter-spacing: .01em; }
.mdc-price del { color: var(--mdc-muted); font-weight: 400; font-size: .85em; margin-right: .4rem; }
.mdc-price ins { text-decoration: none; }
.mdc-price .woocommerce-price-suffix { font-size: .7em; color: var(--mdc-muted); }

@media (prefers-reduced-motion: reduce) {
	.mdc-scope *, .mdc-scope *::before, .mdc-scope *::after { transition: none !important; animation: none !important; }
}