/* ==========================================================================
   MUGMUG · base
   Fuentes locales, tokens de marca y estilos base de texto y WooCommerce.
   ========================================================================== */

/* --- Fuentes (SIL OFL 1.1, alojadas en el propio servidor) --------------- */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations");
	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: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
	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: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens de marca ----------------------------------------------------- */

:root {
	--mm-rojo: #E0203F;        /* Rojo MUG (cereza): botones, logo */
	--mm-rojo-hondo: #B3122E;  /* hover, enlaces y textos rojos pequeños */
	--mm-moflete: #FACED5;     /* acentos y fondos suaves */
	--mm-crema: #FFF6EC;       /* fondo general */
	--mm-tinta: #1E1A1D;       /* textos y carita */
	--mm-blanco: #FFFFFF;

	--mm-font-titulo: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
	--mm-font-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	--mm-radio: 14px;
	--mm-radio-boton: 999px;
}

/* --- Texto --------------------------------------------------------------- */

body,
body .et_pb_text,
body .woocommerce,
body input,
body select,
body textarea,
body button {
	font-family: var(--mm-font-texto);
	color: var(--mm-tinta);
}

body {
	background-color: var(--mm-crema);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--mm-font-titulo);
	font-weight: 800;
	color: var(--mm-tinta);
	letter-spacing: -0.015em;
	line-height: 1.1;
}

a {
	color: var(--mm-rojo-hondo);
}
a:hover,
a:focus-visible {
	color: var(--mm-rojo);
}

/* Precios con la fuente de titulares */
.woocommerce .price,
.woocommerce-Price-amount {
	font-family: var(--mm-font-titulo);
	font-weight: 800;
	color: var(--mm-tinta);
}

/* --- Botones ------------------------------------------------------------- */

body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .woocommerce a.button.alt,
body .woocommerce button.button.alt {
	font-family: var(--mm-font-texto);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mm-blanco);
	background-color: var(--mm-rojo);
	border: 0;
	border-radius: var(--mm-radio-boton);
	padding: 0.75em 1.4em;
	line-height: 1.2;
	transition: background-color 0.15s ease;
}
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover {
	color: var(--mm-blanco);
	background-color: var(--mm-rojo-hondo);
	padding: 0.75em 1.4em;
}
/* Divi añade una flecha al pasar el ratón; la quitamos */
body .woocommerce a.button::after,
body .woocommerce button.button::after {
	display: none;
}

/* --- Foco visible y accesible ------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--mm-rojo);
	outline-offset: 2px;
}

/* --- Estrellas de valoración (contraste suficiente) ---------------------- */

.woocommerce .star-rating span::before {
	color: var(--mm-rojo-hondo);
}