/* =====================================================================================================================
 * MotorCasión · LA CABECERA NUEVA (03/10/2026, encargo 11; inc/cabecera-iconos.php, interruptor MC_CABECERA_ICONOS).
 * Órdenes de Sergio con capturas de la web real: «logo y menú grandes y visibles igual en móvil, tablet y ordenador» y «el móvil como
 * VisionLovers, móvil primero». Modelo medido: entrega/referencias/vl-cabecera-movil/ (VL: logo de 38 px de alto en el móvil, 44 en la
 * tableta, 24-40 en el ordenador; fila de 6 iconos de 64 px; cabecera fija de 117 px a 375 con el «sticky» del navegador).
 * Reglas de la casa: solo tokens --mc-*, sin !important, sin @layer. Woodmart carga sus hojas después: se gana con un selector más
 * (todo cuelga de «html body.mc-cab-nueva», la clase del <body>; la fila de iconos es .mc-cab-iconos). Las alturas de las filas se cambian con las variables de Woodmart (--wd-…-h) en :root,
 * donde él las declara, para que sus cuentas (el hueco de la cabecera fija) salgan con las alturas nuevas.
 * Cortes: la cabecera del ordenador desde 1200 px; por debajo, la del móvil (Woodmart hasta 1024 y el tema de 1025 a 1199, woodmart.css).
 * ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------------------------
 * 1 · ORDENADOR (1200 px o más). Antes (medido en la réplica a 1354 y 1440): logo de 170 y 210 px de ancho con la letra a 19 y 24 px;
 *     menú a 10,5 y 12 px con 2-4 px entre apartados («INICIO BLOG VENDE TU COCHE…» pegados). Ahora: fila de 76 px, logo de 26-30 px
 *     de letra (el tamaño del de VisionLovers: su «Vision Lovers» mide unos 20 px de mayúscula a 1440), menú a 14-15 px con 22-28 px de
 *     aire, centrado de verdad (las dos columnas de los lados miden lo mismo) y a la derecha «Ver planes» y ☾.
 *     El menú de la web real tiene 6 apartados; el de la réplica, 10 (los del negocio viejo que el programa 80 quita). Con 8 o más se
 *     aprieta solo (:has, nth-child) para no partirse ni montarse sobre el logo.
 * --------------------------------------------------------------------------------------------------------------------- */
@media (min-width: 1200px) {
	:root:has(> body.mc-cab-nueva) { --wd-header-general-h: 76px; }
	html body.mc-cab-nueva .whb-general-header .whb-general-header-inner { gap: var(--mc-e-6); }
	html body.mc-cab-nueva .whb-general-header .whb-col-left,
	html body.mc-cab-nueva .whb-general-header .whb-col-right { flex: 1 1 0; min-width: max-content; max-width: none; }
	html body.mc-cab-nueva .whb-general-header .whb-col-center { flex: 0 1 auto; min-width: 0; }
	html body.mc-cab-nueva .whb-general-header .whb-col-right { gap: var(--mc-e-2); margin-right: 0; }
	/* «Ver planes» pegado al ☾ (medido: el bloque de texto de Woodmart crecía y lo dejaba 125 px a la izquierda del ☾) y sin la caja gris
	   de alrededor cuando el texto «¿Tienes un taller?» está escondido (por debajo de 1800 px, woodmart.css): solo el botón inclinado. */
	html body.mc-cab-nueva .whb-general-header .whb-col-right .wd-header-text { flex: 0 0 auto; }
	html body.mc-cab-nueva .whb-general-header .mc-cab-pro { background: transparent; box-shadow: none; }

	/* El logo: sin el tope de 170 px de woodmart.css (1200-1599) y más grande. */
	html body.mc-cab-nueva .whb-general-header .site-logo a.mc-logo.wd-logo { max-width: none; font-size: 1.625rem; }
	html body.mc-cab-nueva .whb-general-header .site-logo { padding: 0; }

	/* El menú: letra clara y aire. */
	html body.mc-cab-nueva .whb-general-header .wd-nav-main { --nav-gap: 22px; justify-content: center; }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main > li > a { font-size: 14px; letter-spacing: 0.05em; padding-inline: 0; min-height: 44px; min-width: 44px; justify-content: center; font-weight: 600; color: var(--mc-texto); } /* 44 × 44 también en «Inicio» y «Blog» (medido: 33 y 30 de ancho) */
	html body.mc-cab-nueva .whb-general-header .wd-nav-main > li > a:hover { color: var(--mc-texto); }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main > li > a .nav-link-text { padding-block: 4px; }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main > li > a:hover .nav-link-text { box-shadow: inset 0 -3px 0 var(--mc-acento); }

	/* 8 o más apartados (la réplica): más juntos para que quepan sin partirse. */
	html body.mc-cab-nueva .whb-general-header .wd-nav-main:has(> li:nth-child(8)) { --nav-gap: 14px; }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main:has(> li:nth-child(8)) > li > a { font-size: 13px; letter-spacing: 0.02em; }
	html body.mc-cab-nueva .whb-general-header:has(.wd-nav-main > li:nth-child(8)) :is(.whb-col-left, .whb-col-right) { flex: 0 0 auto; }
	html body.mc-cab-nueva .whb-general-header:has(.wd-nav-main > li:nth-child(8)) .whb-col-center { flex: 1 1 auto; }

	/* La cabecera pegada de Woodmart (al subir) mide 56 px: el logo un poco más pequeño para que quepa con aire. */
	/* 13b (revisión del 13, MEDIO 2): con la navegación nueva la cabecera pegada mide lo mismo que suelta: el logo no encoge (antes, al
	   bajar 1 px, el logo perdía 35-70 px y todo el menú saltaba a la izquierda). */
	html body.mc-cab-nueva:not(.mc-nav) .whb-sticked .whb-general-header .site-logo a.mc-logo.wd-logo { font-size: 1.375rem; }
}
/* 10 apartados (solo la réplica hoy): medido a 1200, 1354 y 1440 sin montarse sobre «Ver planes» (a 1200, con 12 px, se montaba 56 px). */
@media (min-width: 1200px) and (max-width: 1439px) {
	html body.mc-cab-nueva .whb-general-header .wd-nav-main:has(> li:nth-child(10)) { --nav-gap: 4px; }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main:has(> li:nth-child(10)) > li > a { font-size: 12px; letter-spacing: 0; }
}
@media (min-width: 1200px) and (max-width: 1359px) {
	html body.mc-cab-nueva .whb-general-header .wd-nav-main:has(> li:nth-child(10)) > li > a { font-size: 11px; min-width: 0; }
	html body.mc-cab-nueva .whb-general-header:has(.wd-nav-main > li:nth-child(10)) .site-logo a.mc-logo.wd-logo { font-size: 1.375rem; }
}
@media (min-width: 1440px) {
	html body.mc-cab-nueva .whb-general-header .site-logo a.mc-logo.wd-logo { font-size: 1.875rem; }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main { --nav-gap: 28px; }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main > li > a { font-size: 15px; }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main:has(> li:nth-child(8)) { --nav-gap: 16px; }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main:has(> li:nth-child(8)) > li > a { font-size: 13.5px; }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main:has(> li:nth-child(10)) { --nav-gap: 6px; }
	html body.mc-cab-nueva .whb-general-header .wd-nav-main:has(> li:nth-child(10)) > li > a { font-size: 12.5px; letter-spacing: 0; }
	html body.mc-cab-nueva .whb-general-header:has(.wd-nav-main > li:nth-child(10)) .site-logo a.mc-logo.wd-logo { font-size: 1.625rem; }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * 2 · MÓVIL Y TABLETA (hasta 1199 px), como VisionLovers:
 *     fila 1 · el logo grande, centrado, sobre el fondo de la página (antes una franja negra de 48 px con el logo a 22 px de letra);
 *     fila 2 · «MENÚ» a la izquierda; «Ver planes» y ☾ a la derecha;
 *     después, fuera de la cabecera, la fila de 6 iconos (§3).
 *     Fija al bajar con position: sticky (VisionLovers, logo-vivo.css, 29/09): la fija de Woodmart (whb-sticky-prepared) decide por el
 *     APARATO y no por el ancho: en un ordenador estrecho deja un hueco y en un móvil de verdad no se pega. Se anula en todo el tramo.
 * --------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	:root:has(> body.mc-cab-nueva) { --wd-top-bar-sm-h: 64px; --wd-header-general-sm-h: 52px; }
	/* Con «Ver planes» en la fila del menú (lo copia el JavaScript de inc/cabecera-iconos.php §3), la fila «¿Tienes un taller?» sobra:
	   fuera, y su alto fuera de las cuentas de Woodmart. Sin JavaScript, se queda. Revisión de los montajes 8 y 11 (BAJO 18): antes se
	   decidía con :has(.mc-cab-planes), que solo existe cuando corre el JavaScript, y en páginas largas la fila se pintaba y luego
	   desaparecía (todo subía unos 50 px). Ahora lo decide la clase mc-cab-js que pone el <head> (antes de pintar nada); si la copia
	   falla, el JavaScript la quita y la fila vuelve. */
	:root.mc-cab-js:has(> body.mc-cab-nueva) { --wd-header-bottom-sm-h: 0.00001px; }
	html.mc-cab-js body.mc-cab-nueva .whb-header .whb-header-bottom { display: none; }
	/* MEDIO 6 (revisión de los montajes 8 y 11): con la cabecera fija, un salto a un apartado (el índice del artículo, «Ver…» de servicio)
	   dejaba el título debajo de ella. scroll-padding-top = el alto real de la cabecera (las variables de Woodmart: sin JavaScript cuenta
	   también la fila de abajo) y se SUMA al scroll-margin-top de cada título. También evita que el foco del teclado quede tapado (WCAG 2.4.11). */
	:root:has(> body.mc-cab-nueva) { scroll-padding-top: calc(var(--wd-admin-bar-h, 0px) + var(--wd-top-bar-sm-h) + var(--wd-header-general-sm-h) + var(--wd-header-bottom-sm-h, 0px)); }
	/* De 1025 a 1199 Woodmart ya trata la cabecera fija como de ordenador: al pegarse la encogía de 124 a 112 px (sus alturas «sticky» de
	   56 + 56) y todo saltaba 12 px; y «MENÚ» medía 40 px de alto. Medido con la revisión del encargo 11 de la nube (8b): mismas alturas
	   pegada o no, y 44 px de alto para MENÚ. */
	:root:has(> body.mc-cab-nueva) { --wd-top-bar-sticky-h: var(--wd-top-bar-sm-h); --wd-header-general-sticky-h: var(--wd-header-general-sm-h); }
	html body.mc-cab-nueva .whb-header .wd-header-mobile-nav > a { min-height: 44px; }

	/* El CSS personalizado de Woodmart (sus ajustes) pone «body { overflow-x: hidden }» para que no salga barra horizontal: eso convierte el
	   <body> en una caja con desplazamiento propio que nunca se desplaza, y el sticky de dentro no se pega nunca (medido: la cabecera se iba
	   a −1400 al bajar). «clip» recorta igual lo que se sale por los lados pero sin crear esa caja. Navegadores sin «clip» (Safari < 16):
	   se quedan con el «hidden» de antes y la cabecera baja con la página, como hoy. */
	html body.mc-cab-nueva { overflow-x: clip; }
	html body.mc-cab-nueva .whb-header { position: sticky; top: var(--wd-admin-bar-h, 0px); z-index: 390; }
	html body.mc-cab-nueva .whb-header.whb-sticky-prepared { padding-top: 0; }
	html body.mc-cab-nueva .whb-header.whb-sticky-prepared .whb-main-header,
	html body.mc-cab-nueva .whb-header.whb-sticked .whb-main-header,
	html body.mc-cab-nueva .whb-header.whb-scroll-stick.whb-scroll-down .whb-main-header { position: relative; top: auto; transform: none; }
	html body.mc-cab-nueva .whb-header .whb-main-header { background-color: var(--mc-fondo); box-shadow: 0 1px 0 var(--mc-borde); }
	html body.mc-cab-nueva .whb-header.whb-sticked .whb-main-header { box-shadow: 0 1px 0 var(--mc-borde), 0 6px 18px rgba(17, 18, 20, 0.08); }

	/* Fila 1: el logo. Fondo de la página (antes negro, de los ajustes de la cabecera de Woodmart, sin !important). */
	html body.mc-cab-nueva .whb-header .whb-top-bar,
	html body.mc-cab-nueva .whb-header .whb-top-bar.whb-with-bg { background-color: var(--mc-fondo); }
	html body.mc-cab-nueva .whb-header .whb-top-bar .site-logo a.mc-logo,
	html body.mc-cab-nueva .whb-header .whb-top-bar .site-logo a.mc-logo:hover,
	html body.mc-cab-nueva .whb-header .whb-top-bar .site-logo a.mc-logo:focus { color: var(--mc-texto); font-size: 1.875rem; max-width: none; }
	html body.mc-cab-nueva .whb-header .whb-top-bar .site-logo a.mc-logo:focus-visible { outline-color: var(--mc-foco); }
	html body.mc-cab-nueva .whb-header .whb-top-bar .site-logo { display: flex; align-items: center; } /* medido: la caja medía 57 px (línea de texto) y el logo quedaba pegado arriba (y = 3) */

	/* Fila 2: MENÚ · Ver planes · ☾ */
	html body.mc-cab-nueva .whb-general-header { border-bottom: 0; }
	html body.mc-cab-nueva .whb-general-header .whb-mobile-right { gap: var(--mc-e-2); margin-right: 0; align-items: center; }
	html body.mc-cab-nueva .whb-general-header .whb-mobile-left { margin-left: 0; }
	html body.mc-cab-nueva .whb-general-header .mc-cab-planes {
		display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--mc-e-4);
		border: 2px solid var(--mc-texto); border-radius: var(--mc-r-pildora); background: var(--mc-fondo); color: var(--mc-texto);
		font-family: var(--mc-letra-titulos); font-weight: 700; font-size: 0.9375rem; line-height: 1; white-space: nowrap; text-decoration: none;
		transition: background-color var(--mc-mov-rapido), color var(--mc-mov-rapido);
	}
	html body.mc-cab-nueva .whb-general-header .mc-cab-planes:hover { background: var(--mc-texto); color: var(--mc-fondo); }
	html body.mc-cab-nueva .whb-general-header .mc-cab-planes:focus-visible { outline: 3px solid var(--mc-foco); outline-offset: 3px; }
	html body.mc-cab-nueva .whb-general-header .whb-mobile-right .mc-tema-boton { min-width: 44px; min-height: 44px; }
}
/* MEDIO 7 (revisión de los montajes 8 y 11): de 1024 a 1199 las columnas laterales que se quedan quietas al bajar se pegaban a 24-110 px
   del borde, DEBAJO de la cabecera fija (124 px). Ahora se pegan justo debajo de ella. Desde 1024 (y no 1025) por vehículos, altas y venta. */
@media (min-width: 1024px) and (max-width: 1199px) {
	html body.mc-cab-nueva .mc-pagina :is(.mc-articulo__indice, .mc-dir__mapa, .mc-ficha__lateral, .mc-serv__lado, .mc-serv__hero .mc-serv__cabecera, .mc-coche__lateral),
	html body.mc-cab-nueva :is(.mc-alta__intro, .mc-venta-hero__texto, .mc-area__pestanas) {
		top: calc(var(--wd-admin-bar-h, 0px) + var(--wd-top-bar-sm-h) + var(--wd-header-general-sm-h) + var(--wd-header-bottom-sm-h, 0px) + var(--mc-e-4));
	}
}
/* Encargo 8c (revisión del 8b, BAJO 9): las pestañas de «Mi área» (sticky desde 1024 px en app/area-cliente) van en la lista de arriba.
   BAJO 7: con sesión, de 1025 a 1199 Woodmart pone --wd-admin-bar-h: 32px en el <body>, pero scroll-padding-top se calcula en :root,
   donde vale 0,001: los saltos quedaban 32 px cortos. Se pone el mismo valor en :root. Hasta 1024 no se toca: Woodmart deja la barra
   de WordPress «absolute» (se va al bajar). */
@media (min-width: 1025px) and (max-width: 1199px) {
	:root:has(> body.admin-bar.mc-cab-nueva) { --wd-admin-bar-h: 32px; }
}
/* Encargo 8c (revisión del 8b, BAJO 8): el ☾ lo añade modo-oscuro.js (diferido) al final de la columna derecha, alineada a la derecha:
   «Ver planes» saltaba a la izquierda al llegar (medido: 52 px a 375 y 1024; 56 px a 1440). Se le guarda su hueco (44 px hasta 1199,
   48 en ordenador; el gap de 8 px ya lo pone la columna) solo donde va a salir (el <head> lleva #mc-tema-inicio y la clase mc-js),
   y desaparece cuando llega el botón. Sin JavaScript no hay hueco. */
:root.mc-js:has(#mc-tema-inicio) body.mc-cab-nueva:not(.mc-nav) .whb-general-header .whb-mobile-right:not(:has(.mc-tema-boton))::after { content: ""; flex: 0 0 44px; height: 44px; }
@media (min-width: 1200px) {
	:root.mc-js:has(#mc-tema-inicio) body.mc-cab-nueva:not(.mc-nav) .whb-general-header .whb-col-right:not(:has(.mc-tema-boton))::after { content: ""; flex: 0 0 48px; height: 48px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	:root:has(> body.mc-cab-nueva) { --wd-top-bar-sm-h: 72px; }
	html body.mc-cab-nueva .whb-header .whb-top-bar .site-logo a.mc-logo { font-size: 2.125rem; }   /* VL: 44 px de alto en la tableta */
}
@media (max-width: 359px) {
	html body.mc-cab-nueva .whb-header .whb-top-bar .site-logo a.mc-logo { font-size: 1.625rem; }
	html body.mc-cab-nueva .whb-general-header .mc-cab-planes { padding: 0 var(--mc-e-3); font-size: 0.875rem; }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * 3 · LA FILA DE 6 ICONOS (inc/cabecera-iconos.php §2; VL: inc/remate.php §8). Debajo de la cabecera, NO fija. Solo hasta 1199 px.
 *     Iconos del juego único (assets/img/iconos/, trazo 1,8). Letra 12 px en una línea (VL: a 14 px «Mi cuenta» se salía de su casilla).
 *     «Estás aquí»: la palabra en carbón y debajo la caja inclinada naranja de la marca (adorno: no lleva texto encima).
 *     Contraste medido: palabra #5A5F6A sobre blanco 6,40; de noche #9AA0AA sobre #111214 7,12; activa #111214 18,74.
 * --------------------------------------------------------------------------------------------------------------------- */
.mc-cab-iconos { display: none; }
@media (max-width: 1199px) {
	html body .mc-cab-iconos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0 4px; margin: 0; background: var(--mc-fondo); border-bottom: 1px solid var(--mc-borde); }
	html body .mc-cab-iconos .mc-cab-iconos__a {
		position: relative; display: grid; grid-template-rows: 24px auto; justify-items: center; align-content: center; gap: 5px;
		min-height: 64px; padding: 6px 1px; color: var(--mc-texto-2); text-decoration: none;
		font-family: var(--mc-letra-titulos); font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0; white-space: nowrap;
		transition: color var(--mc-mov-rapido), background-color var(--mc-mov-rapido);
	}
	html body .mc-cab-iconos .mc-icono { width: 24px; height: 24px; color: currentColor; }
	html body .mc-cab-iconos .mc-cab-iconos__a:hover { color: var(--mc-texto); background-color: var(--mc-fondo-2); }
	html body .mc-cab-iconos .mc-cab-iconos__a:focus-visible { outline: 3px solid var(--mc-foco); outline-offset: -3px; border-radius: var(--mc-r-s); }
	html body .mc-cab-iconos .mc-cab-iconos__a[aria-current="page"] { color: var(--mc-texto); }
	html body .mc-cab-iconos .mc-cab-iconos__a[aria-current="page"]::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 4px; background: var(--mc-acento); transform: skewX(var(--mc-inclinacion)); }
	html body .mc-cab-iconos .mc-cab-iconos__t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	html body .mc-cab-iconos { padding-inline: var(--mc-gutter); }
	html body .mc-cab-iconos .mc-cab-iconos__a { font-size: 13px; }
	html body .mc-cab-iconos .mc-icono { width: 26px; height: 26px; }
}
@media (max-width: 359px) {
	html body .mc-cab-iconos { padding: 0; }
	html body .mc-cab-iconos .mc-cab-iconos__a { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	html body .mc-cab-iconos .mc-cab-iconos__a, html body.mc-cab-nueva .whb-general-header .mc-cab-planes { transition: none; }
}