/* MotorCasión · portada (plantillas/portada.php). Solo tokens. Móvil primero. */
.mc-portada { padding-top: 0; }
.mc-portada-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--mc-e-10) var(--mc-e-12); background: var(--mc-fondo); }
.mc-portada-hero::before { content: ""; position: absolute; z-index: -1; right: -18%; top: -10%; width: 62%; height: 120%; background: var(--mc-fondo-2); transform: skewX(var(--mc-inclinacion)); }
.mc-portada-hero::after { content: ""; position: absolute; z-index: -1; right: 6%; top: 0; width: 14px; height: 100%; background: var(--mc-rojo-logo); transform: skewX(var(--mc-inclinacion)); }
.mc-portada-hero__t { max-width: 16ch; }
.mc-portada-caminos { list-style: none; margin: var(--mc-e-8) 0 0; padding: 0; display: grid; gap: var(--mc-e-3); max-width: 1100px; }
@media (min-width: 900px) { .mc-portada-caminos { grid-template-columns: repeat(3, 1fr); gap: var(--mc-e-4); } .mc-portada-hero { padding-block: var(--mc-e-16); } .mc-portada-hero::after { right: 9%; width: 22px; } }
.mc-camino { display: flex; align-items: center; gap: var(--mc-e-4); min-height: 88px; padding: var(--mc-e-4) var(--mc-e-5); background: var(--mc-superficie); border: 1.5px solid var(--mc-borde-fuerte); border-radius: var(--mc-r-l); box-shadow: var(--mc-sombra-1); color: var(--mc-texto-2); text-decoration: none; transition: transform var(--mc-mov) var(--mc-curva), box-shadow var(--mc-mov), border-color var(--mc-mov); }
.mc-camino:hover { transform: translateY(-2px); box-shadow: var(--mc-sombra-2); border-color: var(--mc-texto); color: var(--mc-texto-2); }
.mc-camino__icono { flex: none; width: 48px; height: 48px; display: grid; place-items: center; position: relative; color: var(--mc-sobre-negro); isolation: isolate; }
.mc-camino__icono::before { content: ""; position: absolute; inset: 0; background: var(--mc-negro); border-radius: 6px; transform: skewX(var(--mc-inclinacion)); z-index: -1; }
.mc-camino--rojo .mc-camino__icono::before { background: var(--mc-rojo); }
.mc-camino--rojo .mc-camino__icono { color: var(--mc-sobre-boton); }   /* encargo 6: la letra del botón (ámbar: carbón 7,94; A/B/C: blanco ≥ 4,67). Con carbón, C daba 2,43 */
.mc-camino__icono .mc-icono { width: 24px; height: 24px; }
.mc-camino__texto { display: grid; gap: 2px; flex: 1; font-size: var(--mc-t-s); }
.mc-camino__texto strong { font-family: var(--mc-letra-titulos); font-size: 1.0625rem; color: var(--mc-texto); }
.mc-camino__flecha { color: var(--mc-texto-3); }
.mc-camino--rojo { border-color: var(--mc-rojo); }
:root[data-tema="oscuro"] .mc-camino__icono::before { background: var(--mc-superficie-2); box-shadow: inset 0 0 0 1px var(--mc-borde-fuerte); }
:root[data-tema="oscuro"] .mc-camino--rojo .mc-camino__icono::before { background: var(--mc-rojo); box-shadow: none; }
.mc-servicio__desc { display: block; font-size: var(--mc-t-s); color: var(--mc-texto-3); }
.mc-portada .mc-servicio .mc-tarjeta__titulo { font-size: 1.0625rem; }
.mc-portada-pasos { list-style: none; margin: 0; padding: 0; }
.mc-portada-pasos__n { font-family: var(--mc-letra-num); font-style: italic; font-weight: 700; font-size: 3rem; line-height: 1; color: var(--mc-rojo-texto); margin: 0 0 var(--mc-e-2); }
.mc-portada-pro { background: var(--mc-negro); color: #D9DCE1; padding-block: var(--mc-e-12); position: relative; overflow: hidden; isolation: isolate; }
.mc-portada-pro::before { content: ""; position: absolute; z-index: -1; left: -60px; top: 0; bottom: 0; width: 180px; background: var(--mc-rojo-logo); transform: skewX(var(--mc-inclinacion)); opacity: 0.95; }
.mc-portada-pro__in { display: grid; gap: var(--mc-e-6); align-items: center; padding-left: max(var(--mc-gutter), 140px); }
.mc-portada-pro h2 { color: #FFFFFF; }
.mc-portada-pro__botones { display: flex; flex-wrap: wrap; gap: var(--mc-e-3); }
.mc-portada .mc-boton--claro { color: #FFFFFF; border-color: #FFFFFF; }
.mc-portada .mc-boton--claro:hover { background: #FFFFFF; color: #0B0C0E; }
@media (min-width: 900px) { .mc-portada-pro__in { grid-template-columns: 1.4fr 1fr; } .mc-portada-pro__botones { justify-content: flex-end; } }
/* 03/10 (revisión visual del iMac, punto 7): a 375 la franja rozaba el «¿T» del título. En el móvil, banda fina arriba y el texto sin sangría. */
@media (max-width: 599px) { .mc-portada-pro::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 6px; transform: none; } .mc-portada-pro__in { padding-left: var(--mc-gutter); } }
.mc-portada-art__img { margin: calc(var(--mc-e-5) * -1) calc(var(--mc-e-5) * -1) var(--mc-e-4); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--mc-r-l) var(--mc-r-l) 0 0; background: var(--mc-fondo-2); }
.mc-portada-art__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-portada-mas { margin-top: var(--mc-e-4); }

/* =====================================================================================================================
 * ENCARGO 6 (03/10/2026, Sergio 11:09): la portada con el SISTEMA DE VISIONLOVERS (su base.css, componentes.css y plantilla-portada.css)
 * traducido al motor y con la marca de MotorCasión. Secciones de 56 px en el móvil y 72 en el ordenador (VisionLovers: 48 / 72), cabecera
 * de sección con antetítulo + título + entradilla (máx. 720 px), bandas a todo el ancho, tarjetas con halo, pastillas de provincia de
 * 44 px y cifras grandes en el naranja que se lee. Sin !important, sin @layer, móvil primero.
 * ===================================================================================================================== */
/* Las bandas a todo el ancho no abren barra de desplazamiento: Woodmart ya pone overflow-x en la página (medido: scrollWidth = ancho de la ventana). */
.mc-portada-seccion { padding-block: var(--mc-e-14); }
@media (min-width: 1024px) { .mc-portada-seccion { padding-block: var(--mc-e-18); } }
/* Bandas a todo el ancho (el truco de VisionLovers: la portada vive dentro del .container de Woodmart). */
.mc-portada-seccion--suave, .mc-portada-seccion--gris, .mc-portada .mc-portada-pro { margin-inline: calc(50% - 50vw); }
.mc-portada-seccion--suave { background: var(--mc-fondo-calido); }
.mc-portada-seccion--gris { background: var(--mc-fondo-2); }
.mc-portada .mc-bloque { margin-top: 0; }

/* Cabecera de sección (VisionLovers: .vl-section__head + __eyebrow + __subtitle) */
.mc-portada-cabeza { max-width: 720px; margin-bottom: var(--mc-e-8); }
.mc-portada-cabeza .mc-titulo-seccion { margin-bottom: var(--mc-e-3); }
.mc-portada-cabeza__ante { margin: 0 0 var(--mc-e-2); font-family: var(--mc-letra-titulos); font-size: var(--mc-t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mc-texto-marca); }
.mc-portada-cabeza__sub { margin: 0; font-size: var(--mc-t-m); line-height: var(--mc-lh-texto); color: var(--mc-texto-2); }

/* 1 · Héroe: título con su segunda mitad en el naranja que se lee (6,09), botones y 3 garantías */
.mc-portada-hero__t span { display: block; color: var(--mc-texto-marca); }
.mc-portada-hero__t { max-width: 22ch; }
.mc-portada-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--mc-e-3); margin-top: var(--mc-e-5); }
.mc-portada-hero__meta { list-style: none; margin: var(--mc-e-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mc-e-2) var(--mc-e-5); font-size: var(--mc-t-s); color: var(--mc-texto-2); }
.mc-portada-hero__meta li { display: inline-flex; align-items: center; gap: 0.4em; margin: 0; }
.mc-portada-hero__meta .mc-icono { width: 18px; height: 18px; color: var(--mc-exito); }
@media (max-width: 599px) { .mc-portada-hero__ctas .mc-boton { width: 100%; } }

/* 3 · Los 3 caminos (VisionLovers: .vl-card con badge, icono, título, meta, cuerpo, pie y nota) */
.mc-portada .mc-portada-caminos { margin: 0; max-width: none; }
.mc-camino-tarjeta { display: flex; flex-direction: column; gap: var(--mc-e-2); padding: var(--mc-e-6); margin: 0; }
.mc-camino-tarjeta__sello { margin: 0; font-family: var(--mc-letra-titulos); font-size: var(--mc-t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mc-texto-marca); }
.mc-camino-tarjeta__icono { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--mc-r-m); background: var(--mc-acento-suave); color: var(--mc-texto-marca); margin: var(--mc-e-1) 0; }
.mc-camino-tarjeta__icono .mc-icono { width: 26px; height: 26px; }
.mc-camino-tarjeta__t { margin: 0; font-family: var(--mc-letra-titulos); font-size: var(--mc-t-h3); line-height: var(--mc-lh-titulo); color: var(--mc-texto); }
.mc-camino-tarjeta__meta { margin: 0; font-size: var(--mc-t-s); color: var(--mc-texto-3); }
.mc-camino-tarjeta__texto { margin: 0 0 var(--mc-e-3); color: var(--mc-texto-2); flex: 1; }
.mc-camino-tarjeta__nota { margin: var(--mc-e-2) 0 0; padding-top: var(--mc-e-3); border-top: 1px solid var(--mc-borde); font-size: var(--mc-t-s); color: var(--mc-texto-3); }

/* 4 · «¿Qué le pasa a tu coche?»: cabecera a la izquierda y la lista a la derecha desde 1024 */
@media (min-width: 1024px) { .mc-portada-dos { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--mc-e-10); align-items: start; } .mc-portada-dos .mc-portada-cabeza { margin-bottom: 0; } }
.mc-sintomas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mc-e-3); }
@media (min-width: 640px) { .mc-sintomas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mc-sintomas__lista li { margin: 0; }
.mc-sintoma { display: flex; align-items: center; gap: var(--mc-e-3); min-height: 64px; height: 100%; padding: var(--mc-e-3) var(--mc-e-4); border-radius: var(--mc-r-l); background: var(--mc-superficie); box-shadow: var(--mc-halo); color: var(--mc-texto); text-decoration: none; transition: box-shadow var(--mc-mov-rapido) var(--mc-curva), transform var(--mc-mov-rapido) var(--mc-curva); }
.mc-sintoma:hover, .mc-sintoma:focus-visible { box-shadow: var(--mc-halo-fuerte); transform: translateY(var(--mc-lift)); color: var(--mc-texto); text-decoration: none; }
.mc-sintoma:focus-visible { outline: 3px solid var(--mc-foco); outline-offset: 3px; }
.mc-sintoma__icono { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--mc-r-m); background: var(--mc-acento-suave); color: var(--mc-texto-marca); }
.mc-sintoma__icono .mc-icono { width: 22px; height: 22px; }
.mc-sintoma__t { flex: 1; display: grid; gap: 2px; font-family: var(--mc-letra-titulos); font-weight: 700; line-height: 1.3; }
.mc-sintoma__quien { font-family: var(--mc-letra-texto); font-weight: 400; font-size: var(--mc-t-s); color: var(--mc-texto-3); }
.mc-sintoma__flecha { flex: none; width: 18px; height: 18px; color: var(--mc-texto-3); }

/* 7 · Cifras de verdad, provincias con su número y las 3 de la semana */
.mc-cifras { display: grid; gap: var(--mc-e-4); margin: 0 0 var(--mc-e-8); padding: 0; }
@media (min-width: 640px) { .mc-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mc-cifras__item { margin: 0; }
.mc-cifras dt { font-family: var(--mc-letra-num); font-size: 2.25rem; line-height: 1.1; font-weight: 800; color: var(--mc-texto-marca); font-variant-numeric: tabular-nums; }
.mc-cifras dd { margin: 2px 0 0; font-size: var(--mc-t-s); color: var(--mc-texto-2); }
.mc-provincias { margin: 0 0 var(--mc-e-8); }
.mc-provincias__t { margin: 0 0 var(--mc-e-3); font-family: var(--mc-letra-titulos); font-weight: 700; color: var(--mc-texto); }
.mc-provincias__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mc-e-2); }
.mc-provincias__lista li { margin: 0; }
.mc-provincias__item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--mc-r-pildora); background: var(--mc-superficie); color: var(--mc-texto); font-weight: 650; text-decoration: none; box-shadow: 0 0 0 1px var(--mc-borde); transition: box-shadow var(--mc-mov-rapido) var(--mc-curva); }
.mc-provincias__item:hover, .mc-provincias__item:focus-visible { box-shadow: var(--mc-aro-fuerte); color: var(--mc-texto); text-decoration: none; }
.mc-provincias__n { color: var(--mc-texto-marca); font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-portada-semana { margin: 0; }
.mc-portada-semana__item { margin: 0; }
.mc-portada-botones { display: flex; flex-wrap: wrap; gap: var(--mc-e-3); margin-top: var(--mc-e-8); }
/* La raya naranja inclinada del héroe pasaba POR DETRÁS del texto a 375 (medido en la captura de noche): solo desde 900 px, donde va a la derecha del texto. */
@media (max-width: 899px) { .mc-portada-hero::after { content: none; } }
/* El héroe a todo el ancho y con fondo cálido, como el lila del héroe de VisionLovers (--vl-bg-hero). */
.mc-portada .mc-portada-hero { margin-inline: calc(50% - 50vw); background: var(--mc-fondo-calido); }

/* =====================================================================================================================
 * ENCARGO 11 (03/10/2026, órdenes de Sergio con capturas de la web real).
 * 1 · «Elige cómo quieres seguir con tu coche»: el botón de la tarjeta del medio quedaba más abajo (la de la izquierda no lleva sello, las
 *     otras dos sí) y las notas de abajo no coincidían (medido a 1440: botones a 304/326/304 px del borde de arriba). Cada tarjeta usa las
 *     7 filas de la rejilla (subgrid): sello · icono · título · subtítulo · texto · botón · nota. Cada parte, a la misma altura en las 3.
 *     Desde 768 px, en 3 columnas (antes 2 hasta 899 y «Calcular» sola en su fila: punto 19 de la revisión visual del iMac).
 * 2 · Huecos blancos: entre la cabecera y el héroe había 40 px (el padding-top de <main> de Woodmart) y entre el bloque oscuro de
 *     profesionales y el pie 152 px a 1440 (64 de la página + 40 de <main> + 48 del pie). En la portada, a 0: el héroe empieza bajo la
 *     cabecera y el pie sigue al bloque oscuro, separados por una línea fina como la de dentro del pie.
 * ===================================================================================================================== */
@media (min-width: 768px) {
	.mc-portada .mc-portada-caminos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); row-gap: 0; }
	.mc-portada .mc-portada-caminos > .mc-camino-tarjeta { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: var(--mc-e-2); align-content: start; }
	.mc-portada .mc-camino-tarjeta > .mc-camino-tarjeta__sello { grid-row: 1; align-self: end; }
	.mc-portada .mc-camino-tarjeta > .mc-camino-tarjeta__icono { grid-row: 2; }
	.mc-portada .mc-camino-tarjeta > .mc-camino-tarjeta__t { grid-row: 3; }
	.mc-portada .mc-camino-tarjeta > .mc-camino-tarjeta__meta { grid-row: 4; }
	.mc-portada .mc-camino-tarjeta > .mc-camino-tarjeta__texto { grid-row: 5; }
	.mc-portada .mc-camino-tarjeta > .mc-boton { grid-row: 6; align-self: end; margin-top: 0; }
	.mc-portada .mc-camino-tarjeta > .mc-camino-tarjeta__nota { grid-row: 7; }
}
html body .wd-content-layout:has(> .mc-pagina.mc-portada), html body .wd-content-layout:has(.mc-pagina.mc-portada) { padding-top: 0; padding-bottom: 0; }
html body .mc-pagina.mc-portada { padding-bottom: 0; }
html body:has(.mc-pagina.mc-portada) .mc-pie { margin-top: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
/* De 768 a 1023 (tarjetas de ~235 px): «Ver cómo venderlo» se partía en dos líneas (medido a 768). Menos relleno y el botón en una línea. */
@media (min-width: 768px) and (max-width: 1023px) {
	.mc-portada .mc-portada-caminos > .mc-camino-tarjeta { padding: var(--mc-e-5); }
	.mc-portada .mc-camino-tarjeta > .mc-boton { padding-inline: var(--mc-e-3); white-space: nowrap; }
}

/* =====================================================================================================================
 * ENCARGO 18 (revisión de diseño final del iMac, 04/10/2026)
 * D3 · La etiqueta del héroe se partía en 2 líneas a 375: hasta 480 px, «Automoción independiente» (14 px, nunca menos).
 * D4 · La mitad derecha del héroe, vacía a 1440: el coche del logo, grande y suave (0,2 de día, 0,3 de noche), solo desde 1024 px,
 *      decorativo (aria-hidden). Se dibuja una vez al cargar (1,2 s) con los mismos trazos del logo; «reducir movimiento»: quieto y entero
 *      (regla de logo.css). Detrás del texto (z-index -1, dentro del héroe que ya aísla su capa).
 * ===================================================================================================================== */
.mc-portada-hero__eti-c { display: none; }
@media (max-width: 480px) {
	.mc-portada-hero__eti-l { display: none; }
	.mc-portada-hero__eti-c { display: inline; }
}
.mc-portada-hero__coche { display: none; }
@media (min-width: 1024px) {
	.mc-portada .mc-portada-hero .mc-portada-hero__coche {
		display: block; position: absolute; z-index: -1; right: 11%; top: 9%; width: min(30vw, 500px); height: auto; /* arriba a la derecha, junto al título: sin cruzar la caja del buscador ni pasar por detrás del texto (medido a 1024, 1200 y 1440) */
		color: var(--mc-marca); opacity: 0.2; pointer-events: none;
	}
	:root[data-tema="oscuro"] .mc-portada .mc-portada-hero .mc-portada-hero__coche { opacity: 0.3; }
	.mc-portada-hero__coche .mc-logo__t { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mc-logo-traza calc(var(--mc-logo-dur, 0.4s) * 0.8) cubic-bezier(0.45, 0, 0.25, 1) calc(var(--mc-logo-ret, 0s) * 0.8) forwards; }
}
@media (min-width: 1024px) and (max-width: 1199px) { /* cabecera del móvil, héroe más bajo: un poco más pequeño para no tocar la entradilla (medido a 1100) */
	.mc-portada .mc-portada-hero .mc-portada-hero__coche { width: 28vw; }
}