/* ============================================================
   blog.css · MOTORCASIÓN · artículo y listado del blog (inc/blog.php · MC_BLOG). 03/10/2026 · F5.
   Solo tokens --mc-*, sin !important, sin @layer. Móvil primero. Texto a --mc-medida (68 caracteres por línea).
   ============================================================ */

/* ---- Tarjeta de artículo ---- */
.mc-pagina .mc-art { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%; }
.mc-pagina .mc-art__foto { margin: 0; border-bottom: 1px solid var(--mc-borde); background: var(--mc-fondo-2); }
.mc-pagina .mc-art__foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mc-pagina .mc-art__cuerpo { display: flex; flex-direction: column; gap: var(--mc-e-2); padding: var(--mc-e-4) var(--mc-e-5) var(--mc-e-5); flex: 1; }
.mc-pagina .mc-art__cat { margin: 0; font-family: var(--mc-letra-titulos); font-size: var(--mc-t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mc-rojo-texto); }
.mc-pagina .mc-art__titulo { margin: 0; line-height: var(--mc-lh-titulo); }
.mc-pagina .mc-art__resumen { margin: 0; font-size: var(--mc-t-s); color: var(--mc-texto-2); }
.mc-pagina .mc-art .mc-tarjeta__meta { margin: auto 0 0; padding-top: var(--mc-e-2); }
.mc-pagina .mc-art:focus-within { box-shadow: var(--mc-foco-anillo); }
.mc-pagina .mc-art .mc-tarjeta__titulo a:focus-visible { outline: none; }
.mc-pagina .mc-art--grande .mc-art__titulo { font-size: var(--mc-t-h2); }
.mc-pagina .mc-blog__rejilla { display: grid; gap: var(--mc-e-5); grid-template-columns: 1fr; }
.mc-pagina .mc-blog__cabecera { margin-bottom: var(--mc-e-6); }
.mc-pagina .mc-blog__cabecera .mc-h1 { margin: 0 0 var(--mc-e-3); }
.mc-pagina .mc-blog__pag { font-size: 0.6em; color: var(--mc-texto-3); font-weight: 600; }
.mc-pagina .mc-blog__chips { margin-bottom: var(--mc-e-6); }
.mc-pagina--blog .mc-caja-cta { margin-top: var(--mc-seccion); }

/* ---- Artículo ---- */
.mc-pagina .mc-articulo { max-width: 1040px; }
.mc-pagina .mc-articulo__cabecera { max-width: 860px; margin-bottom: var(--mc-e-6); }
.mc-pagina .mc-articulo__cat { text-decoration: none; }
.mc-pagina .mc-articulo__cat:hover { color: var(--mc-sobre-rojo); }
.mc-pagina .mc-articulo__titulo { margin: 0 0 var(--mc-e-4); }
.mc-pagina .mc-articulo__entradilla { margin: 0 0 var(--mc-e-4); }
.mc-pagina .mc-articulo__meta { display: flex; flex-wrap: wrap; gap: var(--mc-e-2) var(--mc-e-5); margin: 0; font-size: var(--mc-t-s); color: var(--mc-texto-3); }
.mc-pagina .mc-articulo__meta span { display: inline-flex; align-items: center; gap: 0.35em; }
.mc-pagina .mc-articulo__meta .mc-icono { width: 1.15em; height: 1.15em; }
.mc-pagina .mc-articulo__foto { margin: 0 0 var(--mc-e-8); max-width: 860px; }
.mc-pagina .mc-articulo__foto img { width: 100%; height: auto; border-radius: var(--mc-r-l); display: block; }
.mc-pagina .mc-articulo__rejilla { display: grid; gap: var(--mc-e-6); }
.mc-pagina .mc-articulo__indice details { border: 1px solid var(--mc-borde); border-radius: var(--mc-r-m); background: var(--mc-fondo-2); padding: 0 var(--mc-e-4); }
.mc-pagina .mc-articulo__indice summary { cursor: pointer; min-height: var(--mc-tactil); display: flex; align-items: center; font-family: var(--mc-letra-titulos); font-weight: 700; color: var(--mc-texto); }
.mc-pagina .mc-articulo__indice ol { margin: 0 0 var(--mc-e-4); padding-left: 1.3em; display: grid; gap: 0; font-size: var(--mc-t-s); }
.mc-pagina .mc-articulo__indice li { margin: 0; }
/* 03/10/2026 (encargo del iMac, punto 3): si los apartados ya traen su número en el texto, la lista no pone el suyo («1. 1. Coste…»). */
.mc-pagina .mc-articulo__indice ol.mc-articulo__indice-lista--propios { list-style: none; padding-left: 0; }
.mc-pagina .mc-articulo__indice a { color: var(--mc-texto-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }   /* encargo 6: 17 px de alto incumplía WCAG 2.5.8 (medido a 375) */
.mc-pagina .mc-articulo__indice a:hover { color: var(--mc-azul); text-decoration: underline; }
.mc-pagina .mc-articulo__aviso { display: flex; gap: var(--mc-e-2); align-items: flex-start; margin: var(--mc-e-8) 0 0; padding: var(--mc-e-3) var(--mc-e-4); border-radius: var(--mc-r-m); background: var(--mc-fondo-2); font-size: var(--mc-t-s); color: var(--mc-texto-2); }
.mc-pagina .mc-articulo__aviso .mc-icono { width: 1.2em; height: 1.2em; flex: none; margin-top: 0.15em; color: var(--mc-azul); }
.mc-pagina .mc-articulo__caja { margin-top: var(--mc-e-8); }
.mc-pagina .mc-articulo__etiquetas { display: flex; flex-wrap: wrap; gap: var(--mc-e-2); margin-top: var(--mc-e-6); }

/* ---- Prosa: el texto del artículo (lo que escribe el sistema de contenidos o la redacción) ---- */
.mc-pagina .mc-prosa { max-width: var(--mc-medida); font-size: 1.0625rem; line-height: 1.7; color: var(--mc-texto-2); min-width: 0; }
.mc-pagina .mc-prosa > * + * { margin-top: var(--mc-e-4); }
.mc-pagina .mc-prosa p { margin: 0 0 var(--mc-e-4); }
.mc-pagina .mc-prosa h2 { font-size: var(--mc-t-h2); margin: var(--mc-e-10) 0 var(--mc-e-3); color: var(--mc-texto); scroll-margin-top: var(--mc-e-16); position: relative; padding-top: var(--mc-e-3); }
.mc-pagina .mc-prosa h2::before { content: ""; position: absolute; top: 0; left: 0; width: var(--mc-firma-ancho); height: var(--mc-firma-alto); background: var(--mc-rojo-logo); transform: skewX(var(--mc-inclinacion)); }
.mc-pagina .mc-prosa h3 { font-size: var(--mc-t-h3); margin: var(--mc-e-8) 0 var(--mc-e-2); color: var(--mc-texto); scroll-margin-top: var(--mc-e-16); }
.mc-pagina .mc-prosa h4 { font-size: var(--mc-t-h4); margin: var(--mc-e-6) 0 var(--mc-e-2); color: var(--mc-texto); }
.mc-pagina .mc-prosa a { color: var(--mc-azul); text-decoration: underline; text-underline-offset: 3px; }
.mc-pagina .mc-prosa a:hover { text-decoration-thickness: 2px; color: var(--mc-enlace-hover); }   /* opción 1 (11:26): al pasar, #A85300 (de noche #FFB04A) */
/* Los botones dentro del texto no son enlaces de texto: sin subrayado y con su color (la regla de arriba los pintaba azules y subrayados) */
.mc-pagina .mc-prosa a.mc-boton { text-decoration: none; }
.mc-pagina .mc-prosa .mc-caja-cta a.mc-boton--primario, .mc-pagina .mc-prosa .mc-caja-cta a.mc-boton--primario:hover { color: #0B0C0E; }
.mc-pagina .mc-prosa a.mc-boton--primario { color: var(--mc-sobre-rojo); }
.mc-pagina .mc-prosa .mc-caja-cta p { margin: 0; }
.mc-pagina .mc-prosa strong { color: var(--mc-texto); font-weight: var(--mc-peso-fuerte); }
.mc-pagina .mc-prosa ul, .mc-pagina .mc-prosa ol { margin: 0 0 var(--mc-e-4); padding-left: 1.4em; }
.mc-pagina .mc-prosa li { margin: 0 0 var(--mc-e-2); }
.mc-pagina .mc-prosa ul > li::marker { color: var(--mc-rojo-texto); }
.mc-pagina .mc-prosa ol > li::marker { color: var(--mc-texto); font-weight: 700; }
.mc-pagina .mc-prosa blockquote { margin: var(--mc-e-6) 0; padding: var(--mc-e-2) 0 var(--mc-e-2) var(--mc-e-5); border-left: 4px solid var(--mc-rojo-logo); font-size: var(--mc-t-l); color: var(--mc-texto); }
.mc-pagina .mc-prosa img { max-width: 100%; height: auto; border-radius: var(--mc-r-m); }
.mc-pagina .mc-prosa figure { margin: var(--mc-e-6) 0; }
.mc-pagina .mc-prosa figcaption { font-size: var(--mc-t-s); color: var(--mc-texto-3); margin-top: var(--mc-e-2); }
.mc-pagina .mc-prosa table { width: 100%; border-collapse: collapse; font-size: var(--mc-t-s); display: block; overflow-x: auto; }
.mc-pagina .mc-prosa th, .mc-pagina .mc-prosa td { padding: var(--mc-e-2) var(--mc-e-3); border-bottom: 1px solid var(--mc-borde); text-align: left; vertical-align: top; }
.mc-pagina .mc-prosa th { color: var(--mc-texto); background: var(--mc-fondo-2); font-weight: 700; }
.mc-pagina .mc-prosa hr { border: 0; border-top: 1px solid var(--mc-borde); margin: var(--mc-e-8) 0; }
.mc-pagina .mc-prosa code { font-size: 0.9em; background: var(--mc-fondo-2); padding: 0.1em 0.35em; border-radius: 4px; }
.mc-pagina .mc-prosa iframe { max-width: 100%; }

/* ---- Lo que mete en el texto el módulo SEO de Sergio (mc-seo: sus ficheros no se tocan; se viste desde aquí, CLAUDE.md §3.4b) ---- */
/* Sus migas: el artículo ya lleva las del tema arriba (salían dos). Sus migas en datos estructurados no se tocan. */
.mc-pagina .mc-prosa .mcseo-crumbs { display: none; }
/* Su foto dentro del texto: es la foto principal (la del tema no se pinta si está esta) */
.mc-pagina .mc-prosa .mcseo-img { margin: 0 0 var(--mc-e-6); }
.mc-pagina .mc-prosa .mcseo-img img { width: 100%; height: auto; border-radius: var(--mc-r-l); }
/* Su «respuesta rápida»: caja con el filo rojo de la casa */
.mc-pagina .mc-prosa .mcseo-cita { margin: var(--mc-e-6) 0; padding: var(--mc-e-4) var(--mc-e-5); border-left: 4px solid var(--mc-rojo-logo); border-radius: 0 var(--mc-r-m) var(--mc-r-m) 0; background: var(--mc-fondo-2); color: var(--mc-texto); }
.mc-pagina .mc-prosa .mcseo-cita p { margin: 0; }
/* Sus preguntas frecuentes (<details>): como el acordeón del sistema de diseño */
.mc-pagina .mc-prosa .mcseo-faq details { border: 1px solid var(--mc-borde); border-radius: var(--mc-r-m); background: var(--mc-superficie); margin: 0 0 var(--mc-e-2); }
.mc-pagina .mc-prosa .mcseo-faq summary { cursor: pointer; min-height: var(--mc-tactil); display: flex; align-items: center; padding: var(--mc-e-3) var(--mc-e-4); font-weight: var(--mc-peso-fuerte); color: var(--mc-texto); }
.mc-pagina .mc-prosa .mcseo-faq details[open] summary { border-bottom: 1px solid var(--mc-borde); }
.mc-pagina .mc-prosa .mcseo-faq details p { margin: 0; padding: var(--mc-e-3) var(--mc-e-4) var(--mc-e-4); }
/* Su «Sigue leyendo» */
.mc-pagina .mc-prosa .mcseo-sigue { margin: var(--mc-e-8) 0; padding: var(--mc-e-4) var(--mc-e-5); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-m); }
.mc-pagina .mc-prosa .mcseo-sigue h3 { margin: 0 0 var(--mc-e-2); font-size: var(--mc-t-h4); }
.mc-pagina .mc-prosa .mcseo-sigue ul { margin: 0; }

@media (min-width: 640px) {
	.mc-pagina .mc-blog__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc-pagina .mc-art--grande { grid-column: 1 / -1; }
}
@media (min-width: 1025px) {
	.mc-pagina .mc-blog__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mc-pagina .mc-art--grande { flex-direction: row; }
	.mc-pagina .mc-art--grande .mc-art__foto { flex: 0 0 58%; border-bottom: 0; border-right: 1px solid var(--mc-borde); }
	.mc-pagina .mc-art--grande .mc-art__foto img { height: 100%; aspect-ratio: auto; min-height: 320px; }
	.mc-pagina .mc-art--grande .mc-art__cuerpo { justify-content: center; padding: var(--mc-e-8); }
	/* El índice a la izquierda, fijo; el texto a la derecha */
	.mc-pagina .mc-articulo__rejilla { grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: var(--mc-e-10); }
	.mc-pagina .mc-articulo__indice { position: sticky; top: var(--mc-e-6); }
	.mc-pagina .mc-articulo__rejilla > .mc-prosa:only-child { grid-column: 2; }
}

/* ==== encargo 6 · respuesta corta (03/10/2026, inc/seo/esquema.php · plantillas/articulo.php · MC_ESQUEMA) ====
 * «En resumen»: 1-3 frases del propio artículo, arriba, para quien tiene prisa y para AI Overviews. Sustituye arriba al recuadro de
 * respuesta del módulo de Sergio (que ya no sale abajo): por eso lleva su mismo filo de la casa. Móvil primero, solo tokens.
 * Contraste (tokens.css): --mc-texto sobre --mc-fondo-2 y --mc-texto-2 (8,92 en claro) para el antetítulo; en oscuro, los tokens oscuros. */
.mc-pagina .mc-respuesta { max-width: 860px; margin: 0 0 var(--mc-e-6); padding: var(--mc-e-4); border-left: 4px solid var(--mc-rojo-logo); border-radius: 0 var(--mc-r-m) var(--mc-r-m) 0; background: var(--mc-fondo-2); color: var(--mc-texto); }
.mc-pagina .mc-respuesta__titulo { margin: 0 0 var(--mc-e-2); font-family: var(--mc-letra-titulos); font-size: var(--mc-t-s); font-weight: var(--mc-peso-fuerte); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mc-texto-2); }
.mc-pagina .mc-respuesta__texto { margin: 0; font-size: var(--mc-t-l); line-height: var(--mc-lh-texto); max-width: 68ch; }
@media (min-width: 640px) {
	.mc-pagina .mc-respuesta { padding: var(--mc-e-5) var(--mc-e-6); }
}