/* =====================================================================================================================
 * MotorCasión · WOODMART VESTIDO CON EL SISTEMA DE DISEÑO (03/10/2026, F8). Cabecera, menús, barra del móvil, la caja «¿Tienes un
 * taller?» y el pie programado (partes/pie.php). Sin !important: se gana con un selector más (html body …) a las «parts» de Woodmart,
 * que cargan después del tema hijo. Solo tokens --mc-*. Se carga con MC_SISTEMA_DISENO o MC_CABECERA_PIE (inc/estilos.php).
 * ===================================================================================================================== */

/* Letras de la marca en toda la web (Woodmart las pedía a Google: ahora salen del tema) */
html body { font-family: var(--mc-letra-texto); color: var(--mc-texto-2); }
html body :where(h1, h2, h3, h4, h5, h6, .title, .entry-title) { font-family: var(--mc-letra-titulos); }

/* ---- Cabecera ---- */
html body .whb-general-header { background-color: var(--mc-fondo); border-bottom: 1px solid var(--mc-borde); }
html body .whb-header .wd-nav-main > li > a,
html body .whb-header .wd-nav > li > a { font-family: var(--mc-letra-titulos); font-weight: 600; letter-spacing: 0.04em; color: var(--mc-texto); } /* sin min-height: partía el menú en dos filas */
html body .whb-header .wd-nav > li > a:hover,
html body .whb-header .wd-nav > li.current-menu-item > a { color: var(--mc-rojo-texto); }
html body .whb-header .wd-nav > li.current-menu-item > a .nav-link-text { box-shadow: inset 0 -3px 0 var(--mc-rojo-logo); }
html body .whb-header .wd-tools-element > a, html body .whb-header .mc-tema-boton { color: var(--mc-texto); }
html body .whb-header .wd-header-mobile-nav .wd-tools-text { font-family: var(--mc-letra-titulos); font-weight: 700; }

/* La caja «¿Tienes un taller?» (partes/cabecera-pro.php) */
.mc-cab-pro { display: inline-flex; align-items: center; gap: var(--mc-e-3); padding: 6px 6px 6px 14px; border: 1.5px solid var(--mc-texto); border-radius: var(--mc-r-l); background: var(--mc-superficie); color: var(--mc-texto); text-decoration: none; transition: box-shadow var(--mc-mov-rapido), transform var(--mc-mov-rapido); min-height: var(--mc-tactil); }
.mc-cab-pro:hover { box-shadow: var(--mc-sombra-2); color: var(--mc-texto); }
.mc-cab-pro__texto { display: grid; line-height: 1.15; font-size: var(--mc-t-s); color: var(--mc-texto-3); }
.mc-cab-pro__texto strong { font-family: var(--mc-letra-titulos); font-size: 0.95rem; color: var(--mc-texto); }
.mc-cab-pro__boton { display: inline-flex; align-items: center; gap: 6px; padding: 0.55rem 0.9rem; position: relative; color: var(--mc-sobre-rojo); font-family: var(--mc-letra-titulos); font-weight: 700; font-size: 12.5px; isolation: isolate; white-space: nowrap; }
.mc-cab-pro__boton::before { content: ""; position: absolute; inset: 0; background: var(--mc-rojo); border-radius: var(--mc-r-m); transform: skewX(var(--mc-inclinacion)); z-index: -1; transition: background-color var(--mc-mov-rapido); }
.mc-cab-pro:hover .mc-cab-pro__boton::before { background: var(--mc-rojo-hover); }
.mc-cab-pro .mc-icono { width: 1em; height: 1em; }
html body .whb-header-bottom .mc-cab-pro { width: 100%; justify-content: space-between; }

/* Barra de abajo en el móvil (donde va la caja) */
html body .whb-header-bottom.whb-with-bg { background-color: var(--mc-fondo-2); border-bottom: 1px solid var(--mc-borde); }

/* Menú lateral del móvil */
html body .mobile-nav { background-color: var(--mc-fondo); }
html body .mobile-nav .wd-nav-mobile > li > a { color: var(--mc-texto); font-family: var(--mc-letra-titulos); font-weight: 600; min-height: var(--mc-tactil); border-color: var(--mc-borde); }
html body .mobile-nav .mc-tema-item .mc-tema-boton { width: 100%; justify-content: flex-start; padding: 0 20px; min-height: var(--mc-tactil); color: var(--mc-texto); }

/* Modo oscuro: Woodmart pinta fondos blancos fijos en la cabecera y en el contenido */
:root[data-tema="oscuro"] body, :root[data-tema="oscuro"] .website-wrapper, :root[data-tema="oscuro"] .main-page-wrapper { background-color: var(--mc-fondo); color: var(--mc-texto-2); }
:root[data-tema="oscuro"] .whb-general-header, :root[data-tema="oscuro"] .whb-sticked .whb-general-header { background-color: var(--mc-fondo); }
:root[data-tema="oscuro"] .whb-header-bottom.whb-with-bg { background-color: var(--mc-fondo-2); }
:root[data-tema="oscuro"] .whb-general-header .wd-logo img:not(.mc-logo-noche) { filter: invert(1) hue-rotate(180deg); } /* el logo negro para fondo claro: se invierte el negro y el rojo vuelve a su tono (180°) */

/* ---- Pie programado (partes/pie.php) ---- */
.mc-pie { background: var(--mc-negro); color: #C9CDD3; font-family: var(--mc-letra-texto); margin-top: var(--mc-e-12); }
.mc-pie a { color: #E8EAEE; text-decoration: none; }
.mc-pie a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.mc-pie a:focus-visible, .mc-pie summary:focus-visible { outline: 3px solid #FF8A00; outline-offset: 3px; border-radius: 4px; }
.mc-pie__rejilla { display: grid; gap: var(--mc-e-2); padding-block: var(--mc-e-10) var(--mc-e-6); }
@media (min-width: 850px) { .mc-pie__rejilla { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--mc-e-8); padding-block: var(--mc-e-16) var(--mc-e-10); } }
.mc-pie__marca { margin-bottom: var(--mc-e-6); }
.mc-pie__logo { display: inline-flex; align-items: center; font-family: var(--mc-letra-titulos); font-weight: 700; font-style: italic; font-size: 1.75rem; letter-spacing: -0.01em; line-height: 1; }
.mc-pie__motor { color: #FFFFFF; }
.mc-pie__casion { position: relative; color: var(--mc-sobre-marca); padding: 0.15em 0.3em 0.08em; margin-left: 0.12em; isolation: isolate; }
.mc-pie__casion::before { content: ""; position: absolute; inset: 0; background: var(--mc-rojo-logo); transform: skewX(var(--mc-inclinacion)); z-index: -1; }
.mc-pie__com { color: #FFFFFF; font-size: 0.55em; margin-left: 0.25em; align-self: flex-end; }
.mc-pie__lema { margin: var(--mc-e-4) 0 var(--mc-e-3); max-width: 38ch; color: #C9CDD3; }
.mc-pie__nota { display: flex; gap: var(--mc-e-2); font-size: var(--mc-t-s); color: #A9AFB8; margin: 0; max-width: 40ch; }
.mc-pie__nota .mc-icono { flex: none; margin-top: 2px; }
.mc-pie__col { border-top: 1px solid #2C3038; }
@media (min-width: 850px) { .mc-pie__col { border-top: 0; } .mc-pie__titulo { pointer-events: none; } .mc-pie__titulo::after { display: none; } }
.mc-pie__titulo { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: var(--mc-tactil); font-family: var(--mc-letra-titulos); font-weight: 700; color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--mc-t-xs); }
.mc-pie__titulo::-webkit-details-marker { display: none; }
.mc-pie__titulo::after { content: "+"; font-size: 1.25rem; }
.mc-pie__col[open] .mc-pie__titulo::after { content: "–"; }
.mc-pie__lista { list-style: none; margin: 0 0 var(--mc-e-4); padding: 0; display: grid; gap: 0; }
.mc-pie__lista a { display: inline-flex; align-items: center; min-height: 44px; } /* 44 px (revisión visual del iMac, leves): antes 40 */
.mc-pie__base { border-top: 1px solid #2C3038; font-size: var(--mc-t-s); color: #A9AFB8; }
.mc-pie__base-in { display: flex; flex-wrap: wrap; gap: var(--mc-e-2) var(--mc-e-6); justify-content: space-between; align-items: center; padding-block: var(--mc-e-4); }
.mc-pie__base p { margin: 0; }
.mc-pie__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mc-e-1) var(--mc-e-5); }
.mc-pie__legal a { display: inline-flex; align-items: center; min-height: 44px; color: #C9CDD3; }

/* 03/10 · el menú principal tiene 10 apartados (los del negocio viejo incluidos: es decisión de Sergio, P1). Para que quepa en UNA fila
   junto a la caja «¿Tienes un taller?» se aprieta un poco (13 px, separación 10 px) y no se parte. Medido a 1440 en claro y oscuro. */
html body .whb-general-header .wd-nav-main { flex-wrap: nowrap; --nav-gap: 4px; } /* medido: con el hueco de 20 px de Woodmart el menú medía 1000 px en una columna de 917 */
html body .whb-general-header .wd-nav-main > li > a { font-size: 11.5px; /* px y no rem: medido a 14 px de raíz; con la raíz a 16 px (tokens.css) el menú no cabía */ letter-spacing: 0.01em; padding-inline: 7px; white-space: nowrap; }
html body .whb-general-header .whb-col-right { flex: 0 0 auto; }
html body .whb-general-header .whb-col-center { min-width: 0; }
@media (max-width: 1799px) { html body .whb-general-header .mc-cab-pro__texto { display: none; } html body .whb-general-header .mc-cab-pro { padding: 4px; border-color: transparent; } }
/* 03/10 (2.ª medida, Playwright, raíz a 16 px): el menú de 10 apartados se montaba sobre la columna derecha de 1300 a 1599 px y a 1025.
   De 1200 a 1599: letra de 10,5 px y menos aire (cabe: medido a 1200, 1299, 1300, 1440 y 1599). Por debajo de 1200, la cabecera del móvil. */
@media (min-width: 1200px) and (max-width: 1599px) {
	html body .whb-general-header .wd-nav-main > li > a { font-size: 10.5px; letter-spacing: 0; padding-inline: 4px; }
	html body .whb-general-header .wd-nav-main { --nav-gap: 2px; }
	html body .whb-general-header .wd-logo img { max-width: 170px; }
	/* 03/10 (06:18, medido): Woodmart pone style="max-width:280px" EN LÍNEA en la imagen y eso gana a la regla de arriba: el logo medía
	   230 px y pisaba «INICIO» 35 px a 1200 y 17 px a 1299. Se limita el enlace que lo envuelve y la imagen ocupa su ancho. */
	html body .whb-general-header .site-logo .wd-logo { display: block; max-width: 170px; }
	html body .whb-general-header .site-logo .wd-logo img { width: 100%; height: auto; }
	html body .whb-general-header .whb-col-left { flex: 0 0 190px; max-width: 190px; }
}

/* 03/10 · En las pantallas que pinta el tema no hay barra lateral: fuera el botón ☰ flotante de Woodmart (salía encima de las tarjetas a 375). */
html body.mc-propia .wd-sidebar-opener { display: none; }

/* 03/10 · De 1025 a 1199 px, la cabecera del MÓVIL (receta medida de VisionLovers, inc/cabecera-1200.php): el menú de ordenador no cabe. */
@media (min-width: 1025px) and (max-width: 1199px) {
	html body .whb-header .whb-visible-lg, html body .whb-header .whb-hidden-mobile { display: none; }
	html body .whb-header .whb-column.whb-hidden-lg { display: flex; }
	html body .whb-header .whb-row.whb-hidden-desktop, html body .whb-header .whb-row.whb-hidden-lg { display: block; }
	html body .whb-header .whb-flex-row { --wd-top-bar-h: var(--wd-top-bar-sm-h); --wd-header-general-h: var(--wd-header-general-sm-h); --wd-header-bottom-h: var(--wd-header-bottom-sm-h); }
}
/* 03/10 · El botón «subir» de Woodmart medía 40 × 40 px: a 44 como mínimo para el dedo (medido con herramientas/calidad.cjs). */
html body .scrollToTop { width: 44px; height: 44px; }

/* 03/10 (F8.1) · La banda de logos de marcas del prefooter (bloque HTML de WPBakery, P11) en MODO OSCURO: su fondo #f9f9f9 viene con
   !important en el CSS guardado del bloque (vc_custom_…), así que no se cambia el fondo: se tapa con una capa del tema por debajo de
   los logos (::before) y cada logo, que es una imagen con fondo blanco, queda como una ficha clara con esquinas. Sin !important. */
:root[data-tema="oscuro"] body .wd-prefooter .vc_row { position: relative; isolation: isolate; }
:root[data-tema="oscuro"] body .wd-prefooter .vc_row::before { content: ""; display: block; position: absolute; inset: 0; z-index: -1; background: var(--mc-fondo-2); } /* display: block: WPBakery le pone display: table (su «clearfix»), y una tabla no se estira con inset */
:root[data-tema="oscuro"] body .wd-prefooter .wd-brands .wd-brand-item img,
:root[data-tema="oscuro"] body .wd-prefooter .wd-brands img { background: #fff; border-radius: var(--mc-r-s); padding: var(--mc-e-1); opacity: .85; } /* Woodmart las deja a media opacidad: en oscuro salían fichas grises */

/* Encargo 6: la franja de arriba del pie (la de VisionLovers), separada de las columnas por una línea. Botón claro: blanco sobre carbón. */
.mc-pie__cta { border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-block: var(--mc-e-8); }
.mc-pie__cta-in { display: grid; gap: var(--mc-e-5); align-items: center; }
.mc-pie__cta-t { margin: 0 0 var(--mc-e-1); font-family: var(--mc-letra-titulos); font-weight: 700; font-size: var(--mc-t-h3); color: #FFFFFF; }
.mc-pie__cta-x { margin: 0; color: #C9CDD3; }
.mc-pie__cta-botones { display: flex; flex-wrap: wrap; gap: var(--mc-e-3); }
.mc-pie .mc-pie__cta .mc-boton--primario, .mc-pie .mc-pie__cta .mc-boton--primario:hover { color: var(--mc-sobre-boton); text-decoration: none; }
.mc-pie .mc-pie__cta .mc-boton--claro { color: #FFFFFF; border-color: #FFFFFF; }
.mc-pie .mc-pie__cta .mc-boton--claro:hover { background: #FFFFFF; color: #111214; text-decoration: none; }
@media (min-width: 850px) { .mc-pie__cta-in { grid-template-columns: 1fr auto; } }
@media (max-width: 599px) { .mc-pie__cta-botones .mc-boton { width: 100%; } }

/* =====================================================================================================================
 * ENCARGO 6 (03/10/2026, entrega/informes/encargo6-cwv.md, medido en las 17 plantillas a 375):
 * 1 · La franja vacía de 16 px a la derecha de la cabecera móvil: el CSS personalizado de Woodmart (sus ajustes, 202 !important) pone
 *     «margin: 0 -16px !important» a esa fila y la deja empezar en x = −16. Sin !important: se coloca 16 px a la derecha. (El arreglo de fondo
 *     es limpiar ese CSS personalizado en el montaje, con copia: en la COLA.)
 * 2 · El doble margen lateral (15 px de Woodmart + 16 del tema = 31 por lado; el contenido se quedaba en 313 px a 375): en las pantallas del
 *     tema manda el margen del tema.
 * 3 · El botón «Abrir menú» del móvil medía 106 × 40: a 44 de alto.
 * ===================================================================================================================== */
@media (max-width: 1024px) {
	html body .whb-header-bottom .whb-header-bottom-inner { position: relative; left: 16px; }
	html body .whb-header .wd-header-mobile-nav > a { min-height: 44px; }
}
html body.mc-propia .wd-content-layout { padding-inline: 0; }

/* =====================================================================================================================
 * REVISIÓN DE DISEÑO DE LA NUBE (03/10/2026, entrega/revision/diseno-movil-marca.md), lo confirmado:
 * 1 · De noche la fila de abajo de la cabecera móvil seguía blanca (la regla de arriba solo cubría .whb-with-bg).
 * 3 · Un solo color de acción (D49): «Ver planes» de la cabecera, en secundario (borde y letra carbón); el naranja queda para la acción
 *     principal de cada pantalla.
 * 4 · El menú principal salía a 10,5 px a 1440: a 13 px desde 1440 (entre 1025 y 1439 se queda en 11,5 para que quepa).
 * 5 · «Cerrar» del menú móvil en el azul viejo #1F6DFF.  6 · El «subir arriba» blanco de noche.
 * ===================================================================================================================== */
:root[data-tema="oscuro"] body .whb-header-bottom, :root[data-tema="oscuro"] body .whb-header-bottom .whb-header-bottom-inner { background-color: var(--mc-fondo); }
html body .whb-header .mc-cab-pro__boton { color: var(--mc-texto); }
html body .whb-header .mc-cab-pro__boton::before { background: transparent; box-shadow: inset 0 0 0 2px var(--mc-texto); }
html body .whb-header .mc-cab-pro:hover .mc-cab-pro__boton::before { background: var(--mc-texto); }
html body .whb-header .mc-cab-pro:hover .mc-cab-pro__boton { color: var(--mc-fondo); }
@media (min-width: 1440px) { html body .whb-general-header .wd-nav-main > li > a { font-size: 12px; padding-inline: 6px; } }   /* 13 px tocaba el logo con los 10 apartados de la réplica (en la web real son 8: programa 80) */
html body .mobile-nav .close-side-widget > a, html body .mobile-nav .wd-action-icon { color: var(--mc-texto); }
:root[data-tema="oscuro"] body .scrollToTop { background-color: var(--mc-superficie); color: var(--mc-texto); }
/* La fila sigue blanca de noche porque el CSS personalizado de Woodmart le pone «background: #ffffff !important» (medido en el navegador,
   wd-style-theme_settings_default-inline-css). Sin !important no se le gana a eso: se pinta el fondo oscuro en una capa por DEBAJO del
   contenido y por ENCIMA de su fondo (isolation + z-index −1). El arreglo de fondo es limpiar ese CSS personalizado (COLA). */
:root[data-tema="oscuro"] body .whb-header-bottom .whb-header-bottom-inner { position: relative; isolation: isolate; }
:root[data-tema="oscuro"] body .whb-header-bottom .whb-header-bottom-inner::before { content: ""; position: absolute; inset: 0 -16px; z-index: -1; background: var(--mc-fondo); }
/* 03/10 (revisión visual del iMac, punto 12): en el móvil la cabecera fija ocupaba 151 de 812 px. La fila de «¿Tienes un taller?»
   (whb-header-bottom) no va fija en el móvil: al bajar se oculta, como Woodmart hace con las filas que no son fijas. */
@media (max-width: 1024px) { html body .whb-sticked .whb-header-bottom { display: none; } }
/* 03/10 (revisión visual del iMac, leves): el «Cerrar» del menú del móvil medía menos de 44 px de alto. */
html body .mobile-nav .close-side-widget > a, html body .wd-side-hidden .close-side-widget > a { display: inline-flex; align-items: center; min-height: 44px; }