/*
Theme Name: MiCaminoFit
Theme URI: https://micaminofit.com
Author: Samuel
Author URI: https://micaminofit.com
Description: Child theme de GeneratePress para micaminofit.com — blog de vida saludable y fitness, con estética urbana.
Template: generatepress
Version: 0.4.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: micaminofit
Tags: blog, two-columns, right-sidebar, custom-colors, translation-ready
*/

/* =========================================================================
 * ÍNDICE
 *   1. Tipografía autoalojada
 *   2. Tokens de marca
 *   3. Texturas
 *   4. Variables globales de GeneratePress
 *   5. Tipografía
 *   6. Fondo de página y estructura
 *   7. Cabecera y navegación
 *   8. Tarjetas del listado
 *   9. Entrada individual
 *  10. Barra lateral
 *  11. Formularios
 *  12. Pie
 *  13. Componentes de monetización
 *
 * CRITERIO GENERAL
 * La textura vive en el marco: fondo, cabecera, pie y bordes. El cuerpo de
 * los artículos va sobre papel limpio y con fuente del sistema, porque es
 * lo único que no se puede sacrificar por estética.
 * ====================================================================== */


/* -------------------------------------------------------------------------
 * 1. Tipografía autoalojada
 *
 * Oswald variable (200-700), servida desde nuestro dominio. Ni un byte sale
 * hacia Google desde el navegador del visitante, que es lo que las
 * sentencias europeas sobre Google Fonts señalan.
 *
 * El subconjunto `latin` cubre todo el español (ñ, acentos, ¿, ¡), así que
 * en la práctica solo se descarga ese archivo. `latin-ext` queda de reserva
 * y el navegador lo ignora salvo que aparezca un carácter que lo necesite.
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url('assets/fonts/oswald-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: 'Oswald';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url('assets/fonts/oswald-latin-ext.woff2') format('woff2');
	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;
}


/* -------------------------------------------------------------------------
 * 2. Tokens de marca
 * ---------------------------------------------------------------------- */

:root {
	/* Muro */
	--mcf-asfalto:      #16181a;
	--mcf-hormigon:     #23272a;
	--mcf-hormigon-2:   #32373b;
	/* Bloque de hormigón, no ladrillo de tejar: el terracota desentonaba
	   con una paleta que es asfalto, hormigón y lima. */
	--mcf-ladrillo:     #2b3033;

	/* Papel: los carteles pegados encima */
	--mcf-papel:        #f6f3ec;
	--mcf-papel-2:      #eae5da;
	--mcf-tinta:        #1a1c1b;
	--mcf-tinta-2:      #55534e;

	/* Spray: color vivo solo sobre superficie oscura */
	--mcf-spray:        #b6f24a;
	--mcf-spray-2:      #ff5c39;

	/* Verde de marca, para enlaces sobre papel (el lima no daría
	   contraste suficiente sobre fondo claro). */
	--mcf-verde:        #26684a;
	--mcf-verde-oscuro: #1a4b35;

	--mcf-fuente:  system-ui, -apple-system, "Segoe UI", Roboto,
	               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--mcf-display: 'Oswald', var(--mcf-fuente);

	--mcf-espacio: 1.5rem;

	/* Sombra dura, de serigrafía. Un desenfoque suave no pega con esto. */
	--mcf-sombra:       6px 6px 0 rgba(0, 0, 0, .55);
	--mcf-sombra-hover: 10px 10px 0 rgba(0, 0, 0, .55);
}


/* -------------------------------------------------------------------------
 * 3. Texturas
 *
 * Todas generadas con SVG en línea: pesan menos de 1 KB cada una, escalan
 * sin pixelarse y no añaden peticiones. Una foto de muro serían cientos de
 * KB y se cargaría el LCP, que en un sitio con anuncios importa.
 * ---------------------------------------------------------------------- */

:root {
	/* Grano de hormigón: ruido fractal desaturado. */
	--mcf-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");

	/* Bloques a soga: hiladas alternas desplazadas media pieza. La junta va
	   en claro y no en negro, porque sobre un bloque oscuro un trazo negro
	   no se vería. */
	--mcf-ladrillos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='44' viewBox='0 0 90 44'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.09' stroke-width='2' fill='none'%3E%3Cpath d='M0 1H90M0 22H90M0 43H90'/%3E%3Cpath d='M45 0V22M0 22V44M90 22V44M22 22V44M68 22V44'/%3E%3C/g%3E%3C/svg%3E");

	/* Trazo de spray: bloques de anchos irregulares, alturas desiguales y
	   salpicaduras sueltas. Un degradado a intervalos regulares delata que
	   es CSS; esto no. */
	--mcf-trazo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='14' viewBox='0 0 320 14'%3E%3Cg fill='%23b6f24a'%3E%3Crect x='0' y='3' width='54' height='7'/%3E%3Crect x='58' y='2' width='31' height='9'/%3E%3Crect x='95' y='4' width='72' height='6'/%3E%3Crect x='173' y='1' width='43' height='9'/%3E%3Crect x='221' y='4' width='26' height='7'/%3E%3Crect x='252' y='2' width='61' height='8'/%3E%3Ccircle cx='91' cy='12' r='1.4'/%3E%3Ccircle cx='170' cy='1.5' r='1.1'/%3E%3Ccircle cx='219' cy='12.5' r='1.6'/%3E%3Ccircle cx='249' cy='1' r='1'/%3E%3Ccircle cx='316' cy='11' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
}


/* -------------------------------------------------------------------------
 * 4. Variables globales de GeneratePress
 *
 * GeneratePress pinta todo el theme con estas siete variables. Como el CSS
 * del hijo carga después de su CSS en línea, redefinirlas aquí recolorea el
 * theme entero.
 *
 * ⚠️ Consecuencia: cambiar estos colores desde el Personalizador NO tendrá
 * efecto. La paleta se cambia en este archivo, no en wp-admin.
 * ---------------------------------------------------------------------- */

:root {
	--contrast:   var(--mcf-tinta);     /* texto sobre papel            */
	--contrast-2: var(--mcf-tinta-2);   /* metadatos                    */
	--contrast-3: #9a978f;              /* bordes suaves                */
	--base:       var(--mcf-papel-2);   /* separadores                  */
	--base-2:     var(--mcf-asfalto);   /* fondo de página: el muro     */
	--base-3:     var(--mcf-papel);     /* tarjetas y widgets: el papel */
	--accent:     var(--mcf-verde);     /* enlaces sobre papel          */
}


/* -------------------------------------------------------------------------
 * 5. Tipografía
 * ---------------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
	font-family: var(--mcf-fuente);
}

body {
	font-size: 17px;
	line-height: 1.7;
}

/* Oswald condensada en mayúsculas para todo lo que "grita": titulares,
   navegación, etiquetas. El cuerpo del texto NO la usa. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.main-title,
.main-navigation a,
.widget h2,
.widget .widget-title,
.cat-links a,
.wp-block-button__link,
button,
input[type="submit"] {
	font-family: var(--mcf-display);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.1;
}

/* Los subtítulos dentro del artículo mantienen Oswald pero sin mayúsculas:
   un h2 gritado cada tres párrafos cansa al leer. */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	text-transform: none;
	letter-spacing: .01em;
}

.entry-content h2 {
	font-size: 1.75rem;
	margin-top: 2.4rem;
	padding-bottom: .3rem;
	border-bottom: 3px solid var(--mcf-spray);
	display: inline-block;
}

.entry-content h3 {
	font-size: 1.3rem;
	margin-top: 1.8rem;
}


/* -------------------------------------------------------------------------
 * 6. Fondo de página y estructura
 * ---------------------------------------------------------------------- */

body {
	background-color: var(--mcf-asfalto);
	background-image: var(--mcf-grano);
	color: var(--mcf-papel);
}

/* Papel pegado al muro: sombra dura, sin redondeos. */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.sidebar .widget {
	background-color: var(--mcf-papel);
	color: var(--mcf-tinta);
	border-radius: 0;
	box-shadow: var(--mcf-sombra);
}

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--mcf-spray);
	font-weight: 600;
}

.entry-content a:hover {
	background: var(--mcf-spray);
	color: var(--mcf-tinta);
	text-decoration-color: transparent;
}


/* -------------------------------------------------------------------------
 * 7. Cabecera y navegación
 * ---------------------------------------------------------------------- */

.site-header {
	background-color: var(--mcf-hormigon);
	background-image: var(--mcf-grano);
	border-bottom: 0;
	position: relative;
}

/* Trazo de spray bajo la cabecera. */
.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -14px;
	height: 14px;
	background-image: var(--mcf-trazo);
	background-repeat: repeat-x;
	pointer-events: none;
}

/* Logo. Se sirve al doble de la altura de presentación para que se vea
   nítido en pantallas de alta densidad; el alto lo fija el CSS. */
.site-logo img {
	height: 64px;
	width: auto;
	max-width: 100%;
}

/* Con logo puesto, GeneratePress sigue imprimiendo el título en texto y se
   ven los dos a la vez. Se oculta a la vista pero NO al lector de
   pantalla: sigue siendo el h1 de la portada y el nombre del sitio.
   Con `display: none` se perdería esa información. */
.site-header .main-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 768px) {
	.site-logo img {
		height: 48px;
	}
}

.main-title a,
.main-title a:hover {
	color: var(--mcf-papel);
	letter-spacing: .04em;
}

/* La marca, subrayada a spray: como una firma sobre el muro.
   El trazo va en ::before y el enlace se eleva con z-index para quedar por
   encima. Con z-index negativo se colaría DETRÁS del fondo de la cabecera,
   porque .site-header tiene position:relative pero sin z-index, así que no
   crea contexto de apilamiento propio. */
.main-title {
	position: relative;
	display: inline-block;
}

.main-title::before {
	content: "";
	position: absolute;
	left: -6px;
	right: -6px;
	bottom: -1px;
	height: 8px;
	background-image: var(--mcf-trazo);
	background-repeat: repeat-x;
	background-size: auto 8px;
	transform: rotate(-1.2deg);
}

.main-title a {
	position: relative;
	z-index: 1;
}

.main-navigation,
.main-navigation ul ul {
	background-color: transparent;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--mcf-papel);
	font-size: .95rem;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
	color: var(--mcf-tinta);
	background-color: var(--mcf-spray);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--mcf-spray);
}

/* Los submenús sí necesitan fondo propio, o quedarían flotando. */
.main-navigation ul ul {
	background-color: var(--mcf-hormigon-2);
}


/* -------------------------------------------------------------------------
 * 8. Tarjetas del listado
 *
 * Solo en portada, archivos y búsqueda: en la entrada individual el
 * artículo ocupa el ancho completo.
 * ---------------------------------------------------------------------- */

.blog .site-main,
.archive .site-main,
.search-results .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: calc(var(--mcf-espacio) * 1.2);
	align-items: start;
}

.blog .site-main > .page-header,
.archive .site-main > .page-header,
.search-results .site-main > .page-header,
.blog .site-main > .paging-navigation,
.archive .site-main > .paging-navigation,
.search-results .site-main > .paging-navigation {
	grid-column: 1 / -1;
}

.blog .site-main > article,
.archive .site-main > article,
.search-results .site-main > article {
	margin-bottom: 0;
	transition: transform .15s ease, box-shadow .15s ease;
}

.blog .site-main > article:hover,
.archive .site-main > article:hover,
.search-results .site-main > article:hover {
	transform: translate(-3px, -3px);
}

.blog .site-main > article:hover > .inside-article,
.archive .site-main > article:hover > .inside-article,
.search-results .site-main > article:hover > .inside-article {
	box-shadow: var(--mcf-sombra-hover);
}

/* GeneratePress imprime la imagen DESPUÉS de la cabecera (hook
   generate_after_entry_header). En la tarjeta la queremos arriba, y se
   sube con flexbox en vez de sobrescribir plantillas PHP. */
.blog .site-main > article > .inside-article,
.archive .site-main > article > .inside-article,
.search-results .site-main > article > .inside-article {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	position: relative;
}

.blog .site-main .post-image,
.archive .site-main .post-image,
.search-results .site-main .post-image {
	order: -1;
	margin: 0;
	position: relative;
}

.blog .site-main .post-image img,
.archive .site-main .post-image img,
.search-results .site-main .post-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: saturate(.85) contrast(1.08);
}

/* El padding va en los hijos para que la imagen llegue al borde. */
.blog .site-main .entry-header,
.blog .site-main .entry-summary,
.archive .site-main .entry-header,
.archive .site-main .entry-summary,
.search-results .site-main .entry-header,
.search-results .site-main .entry-summary {
	padding-left: 1.4rem;
	padding-right: 1.4rem;
}

.blog .site-main .entry-header,
.archive .site-main .entry-header,
.search-results .site-main .entry-header {
	padding-top: 1.1rem;
}

.blog .site-main .entry-title,
.archive .site-main .entry-title,
.search-results .site-main .entry-title {
	font-size: 1.32rem;
	margin-bottom: .35rem;
}

.blog .site-main .entry-title a,
.archive .site-main .entry-title a {
	color: var(--mcf-tinta);
}

.blog .site-main .entry-title a:hover,
.archive .site-main .entry-title a:hover {
	color: var(--mcf-verde);
}

/* El extracto es el último elemento de la tarjeta: el pie se desengancha
   en los listados (ver inc/display.php), así que el relleno inferior tiene
   que ponerlo él. `flex: 1 0 auto` mantiene todas las tarjetas de una fila
   a la misma altura aunque los títulos ocupen distinto número de líneas. */
.blog .site-main .entry-summary,
.archive .site-main .entry-summary,
.search-results .site-main .entry-summary {
	flex: 1 0 auto;
	color: var(--mcf-tinta-2);
	font-size: .95rem;
	padding-bottom: 1.4rem;
}

/* Categoría como pegatina de spray, ligeramente torcida. */
.entry-meta .cat-links a {
	display: inline-block;
	padding: .2em .8em;
	background: var(--mcf-spray);
	color: var(--mcf-tinta);
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
	transform: rotate(-1.5deg);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
}

.entry-meta .cat-links a:hover {
	background: var(--mcf-spray-2);
	color: var(--mcf-papel);
}

@media (max-width: 480px) {
	.blog .site-main,
	.archive .site-main,
	.search-results .site-main {
		grid-template-columns: 1fr;
	}
}


/* -------------------------------------------------------------------------
 * 9. Entrada individual
 * ---------------------------------------------------------------------- */

.single .entry-content,
.page .entry-content {
	max-width: 68ch; /* línea cómoda de leer */
}

.single .entry-title,
.page .entry-title {
	font-size: 2.2rem;
}

/* Tablas: este blog va a vivir de tablas comparativas, así que merecen
   estilo propio en vez de los bordes por defecto del navegador. */
.entry-content .wp-block-table {
	margin: 2.2rem 0;
}

.entry-content .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: .94rem;
	border: 0;
}

.entry-content .wp-block-table thead {
	background: var(--mcf-hormigon);
}

.entry-content .wp-block-table th {
	color: var(--mcf-papel);
	font-family: var(--mcf-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: .88rem;
	text-align: left;
	padding: .7rem .8rem;
	border: 0;
}

.entry-content .wp-block-table td {
	padding: .7rem .8rem;
	border: 0;
	border-bottom: 1px solid var(--mcf-papel-2);
	vertical-align: top;
}

.entry-content .wp-block-table tbody tr:nth-child(even) {
	background: rgba(38, 104, 74, .05);
}

.entry-content .wp-block-table td:first-child {
	font-weight: 600;
	color: var(--mcf-tinta);
}

/* En pantallas estrechas la tabla puede desbordar; WordPress ya pone
   overflow en el <figure>, aquí solo se avisa de que se puede arrastrar. */
@media (max-width: 600px) {
	.entry-content .wp-block-table {
		overflow-x: auto;
	}

	.entry-content .wp-block-table table {
		font-size: .86rem;
	}
}

/* Pies de imagen: los diagramas llevan explicación y conviene que se
   distinga del texto del artículo. */
.entry-content figcaption,
.entry-content .wp-element-caption {
	font-size: .86rem;
	line-height: 1.5;
	color: var(--mcf-tinta-2);
	text-align: left;
	margin-top: .6rem;
	padding-left: .9rem;
	border-left: 3px solid var(--mcf-spray);
}

.entry-content .wp-block-image {
	margin: 2.2rem 0;
}

.entry-content .wp-block-image img {
	border: 1px solid var(--mcf-papel-2);
}


/* -------------------------------------------------------------------------
 * 10. Barra lateral
 * ---------------------------------------------------------------------- */

.sidebar .widget .widget-title,
.sidebar .widget h2 {
	font-size: 1.05rem;
	color: var(--mcf-tinta);
	background: var(--mcf-spray);
	display: inline-block;
	padding: .2em .6em;
	margin: 0 0 1rem;
	transform: rotate(-1deg);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
	border-bottom: 0;
}

/* Últimas entradas: solo títulos, sin miniatura.
 *
 * La miniatura se quitó a propósito: las ilustraciones de categoría son
 * demasiado densas para leerse a 56 px y ahí se convertían en ruido de
 * color. También se desactiva en el propio bloque
 * (displayFeaturedImage:false), que es un ajuste de base de datos y hay
 * que replicarlo en producción. Esto es solo la presentación de la lista. */
.sidebar .wp-block-latest-posts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar .wp-block-latest-posts__list li {
	padding: .65rem 0;
	border-bottom: 2px dashed var(--mcf-papel-2);
}

.sidebar .wp-block-latest-posts__list li:first-child {
	padding-top: 0;
}

.sidebar .wp-block-latest-posts__list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.sidebar .wp-block-latest-posts__list a {
	font-size: .92rem;
	line-height: 1.35;
	font-weight: 600;
	text-decoration: none;
	color: var(--mcf-tinta);
}

.sidebar .wp-block-latest-posts__list a:hover {
	color: var(--mcf-verde);
}

.sidebar .wp-block-categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar .wp-block-categories li {
	border-bottom: 2px dashed var(--mcf-papel-2);
}

.sidebar .wp-block-categories li:last-child {
	border-bottom: 0;
}

.sidebar .wp-block-categories a {
	display: inline-block;
	padding: .5rem 0;
	text-decoration: none;
	font-weight: 700;
	font-family: var(--mcf-display);
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* -------------------------------------------------------------------------
 * 11. Formularios
 *
 * ⚠️ Hay que declarar color Y fondo de los campos explícitamente.
 *
 * GeneratePress usa `--base-2` para DOS cosas a la vez: el fondo de la
 * página y el fondo de los campos de formulario. Al mapear `--base-2` al
 * asfalto para oscurecer la página, los campos se fueron con él, pero el
 * texto se quedó en `--contrast`, que es el color pensado para el papel.
 * Resultado: texto casi negro sobre fondo casi negro, contraste 1,03:1 —
 * al escribir en el buscador o en un comentario no se veía nada.
 * ---------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	color: var(--mcf-papel);
	background-color: var(--mcf-hormigon);
	border: 2px solid var(--mcf-tinta);
	border-radius: 0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	color: var(--mcf-papel);
	background-color: var(--mcf-hormigon-2);
	border-color: var(--mcf-spray);
	outline: none;
}

/* El marcador de posición, legible pero claramente secundario. */
input::placeholder,
textarea::placeholder {
	color: rgba(246, 243, 236, .55);
	opacity: 1; /* Firefox lo rebaja por su cuenta */
}

/* Botones: bloque macizo, sin redondeos. */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-search__button {
	background-color: var(--mcf-tinta);
	color: var(--mcf-papel);
	border-radius: 0;
	letter-spacing: .04em;
}

button:hover,
input[type="submit"]:hover,
.wp-block-search__button:hover {
	background-color: var(--mcf-verde);
	color: var(--mcf-papel);
}


/* -------------------------------------------------------------------------
 * 12. Pie
 * ---------------------------------------------------------------------- */

.site-info {
	background-color: var(--mcf-ladrillo);
	background-image: var(--mcf-ladrillos);
	color: var(--mcf-papel);
	border-top: 6px solid var(--mcf-hormigon);
}

.site-info a {
	color: var(--mcf-spray);
}

/* Enlaces legales. Discretos pero legibles: la ley pide que el acceso sea
   fácil y directo, así que nada de gris sobre gris. */
.mcf-legal {
	margin-top: .6em;
	font-size: .85em;
	letter-spacing: .03em;
}

.mcf-legal a {
	color: var(--mcf-papel);
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

.mcf-legal a:hover,
.mcf-legal a:focus {
	color: var(--mcf-spray);
}

.mcf-legal span {
	opacity: .5;
}


/* -------------------------------------------------------------------------
 * 13. Componentes de monetización
 *
 * El marcado lo genera el plugin micaminofit-affiliates; el theme solo le
 * da forma.
 * ---------------------------------------------------------------------- */

.mcf-aviso-afiliado {
	background: var(--mcf-hormigon);
	background-image: var(--mcf-grano);
	border-left: 6px solid var(--mcf-spray);
	color: var(--mcf-papel);
	padding: calc(var(--mcf-espacio) * .8);
	margin-bottom: var(--mcf-espacio);
	font-size: .9em;
}

.mcf-aviso-afiliado a {
	color: var(--mcf-spray);
}

/* Botón de producto, el que genera el shortcode [amazon].
   Macizo y sin redondeos, como el resto de botones del sitio. Va en
   bloque y centrado porque es una llamada a la acción, no un enlace
   dentro de una frase: si se mimetiza con el texto, el lector no
   distingue lo que es publicidad de lo que no. */
.mcf-boton-afiliado {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: var(--mcf-espacio) auto;
	padding: .7em 1.6em;
	background-color: var(--mcf-verde);
	color: var(--mcf-papel);
	font-family: var(--mcf-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-align: center;
	text-decoration: none;
	border-radius: 0;
}

.mcf-boton-afiliado:hover,
.mcf-boton-afiliado:focus {
	background-color: var(--mcf-tinta);
	color: var(--mcf-papel);
}

/* Reserva de espacio para los anuncios: evita que el contenido salte al
   cargar (CLS). Ajusta las alturas a tus formatos reales. */
.mcf-anuncio {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: calc(var(--mcf-espacio) * 1.5) auto;
	border: 3px dashed var(--mcf-papel-2);
	color: var(--mcf-tinta-2);
	font-family: var(--mcf-display);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .85rem;
	min-height: 280px;
}

@media (min-width: 769px) {
	.mcf-anuncio {
		min-height: 250px;
	}
}