/* =====================================================================================================================
 * MotorCasión · EL LOGO NUEVO (03/10/2026, encargo 4; inc/logo.php). El coche del favicon de siempre, en ámbar, que se dibuja
 * solo una vez por visita, y el nombre «Motor» + «Casión» en la caja inclinada. Sin halo, sin borde, sin brillo.
 * Colores de la marca A (03/10 11:06; antes el ámbar del encargo 4): naranja #FF8A00 · enlaces y foco #111214 (botones opción 1, 11:26) · carbón #111214. Escritos aquí también como valor de
 * reserva por si el sistema de diseño (tokens.css) no está encendido en esta visita.
 * Reglas de la casa: sin !important (salvo «reducir movimiento»), sin @layer, móvil primero.
 * ===================================================================================================================== */

@font-face { font-family: "Hind"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/hind-latin-700-normal.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; }

.mc-logo {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-family: "Hind", "Segoe UI", system-ui, sans-serif; font-weight: 700; font-size: 1.375rem; line-height: 1; letter-spacing: -0.01em;
	color: var(--mc-texto, #121417); text-decoration: none; white-space: nowrap;
	min-height: 48px;   /* zona táctil */
}
.mc-logo:hover, .mc-logo:focus { color: var(--mc-texto, #121417); text-decoration: none; }
.mc-logo:focus-visible { outline: 3px solid var(--mc-foco, #111214); outline-offset: 4px; border-radius: 4px; }
.mc-logo__coche { width: 2.05em; height: auto; flex: none; color: var(--mc-marca, #FF8A00); overflow: visible; }
.mc-logo__nombre { display: inline-flex; align-items: center; }
.mc-logo__casion { position: relative; isolation: isolate; color: var(--mc-sobre-marca, #111214); padding: 0.14em 0.32em 0.06em; margin-left: 0.1em; }
.mc-logo__casion::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mc-marca, #FF8A00); transform: skewX(var(--mc-inclinacion, -12deg)); }
/* Opción B (MC_LOGO_NOMBRE = 'naranja'): todo el nombre en ámbar, sin caja. Es un logotipo (gráfico grande), no texto de lectura. */
.mc-logo--naranja .mc-logo__motor, .mc-logo--naranja .mc-logo__casion { color: var(--mc-marca, #FF8A00); }
.mc-logo--naranja .mc-logo__casion { padding: 0; margin: 0; }
.mc-logo--naranja .mc-logo__casion::before { content: none; }

@media (min-width: 850px) { .mc-logo { font-size: 1.5rem; } }

/* De noche (botón ☾): «Motor» en blanco; la caja y el coche, el mismo ámbar. */
html[data-tema="oscuro"] .mc-logo, html[data-tema="oscuro"] .mc-logo:hover { color: #F3F4F6; }

/* Filas de Woodmart con fondo oscuro (whb-color-light: la barra negra de arriba en el móvil, medido el 03/10): «Motor» en blanco,
   como el logo para fondo oscuro de siempre. Un selector más que el de Woodmart, sin !important. */
.whb-color-light .site-logo .mc-logo, .whb-color-light .site-logo .mc-logo:hover, .whb-color-light .site-logo .mc-logo:focus { color: #FFFFFF; }
.whb-color-light .site-logo .mc-logo:focus-visible { outline-color: #FF8A00; }   /* 7,52 sobre la barra negra */

/* El pie (fondo oscuro): versión blanca. El coche en blanco; la caja se queda en ámbar con letra carbón. */
.mc-logo--pie, .mc-logo--pie:hover, .mc-logo--pie:focus { color: #FFFFFF; font-size: 1.625rem; }
.mc-logo--pie .mc-logo__coche { color: #FFFFFF; }
.mc-logo--pie:focus-visible { outline-color: #FF8A00; }

/* Woodmart pone su propio display a .wd-logo y carga después: se gana con un selector más (medido a 1200: coche y nombre
   desalineados). Entre 1025 y 1439 px la columna del logo es estrecha (a 1200 el menú empieza a ~214 px): letra 20 px. */
html body .site-logo a.mc-logo.wd-logo, .mc-logo-nuevo .site-logo a.mc-logo { display: inline-flex; align-items: center; gap: 0.45em; max-width: none; }
@media (min-width: 1025px) and (max-width: 1439px) { html body .site-logo a.mc-logo.wd-logo { font-size: 1.25rem; } }

/* ---------- EL DIBUJO: una vez por visita (clase mc-logo-anima en <html>, inc/logo.php) ----------
   Cada trazo lleva pathLength="1": al bajar stroke-dashoffset de 1 a 0 el trazo aparece como si lo pintara un bolígrafo.
   Carrocería → techo → parabrisas → faros → rejilla → ruedas: 1,5 s en total. Al acabar se queda quieto (forwards). */
.mc-logo-anima .mc-logo__t { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mc-logo-traza var(--mc-logo-dur, 0.4s) cubic-bezier(0.45, 0, 0.25, 1) var(--mc-logo-ret, 0s) forwards; }
.mc-logo-anima .mc-logo__t1 { --mc-logo-dur: 0.45s; --mc-logo-ret: 0.05s; }
.mc-logo-anima .mc-logo__t2 { --mc-logo-dur: 0.35s; --mc-logo-ret: 0.45s; }
.mc-logo-anima .mc-logo__t3 { --mc-logo-dur: 0.25s; --mc-logo-ret: 0.78s; }
.mc-logo-anima .mc-logo__t4 { --mc-logo-dur: 0.18s; --mc-logo-ret: 1.02s; }
.mc-logo-anima .mc-logo__t5 { --mc-logo-dur: 0.18s; --mc-logo-ret: 1.1s; }
.mc-logo-anima .mc-logo__t6 { --mc-logo-dur: 0.14s; --mc-logo-ret: 1.24s; }
.mc-logo-anima .mc-logo__t7 { --mc-logo-dur: 0.2s; --mc-logo-ret: 1.32s; }
.mc-logo-anima .mc-logo__t8 { --mc-logo-dur: 0.15s; --mc-logo-ret: 1.5s; }
@keyframes mc-logo-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Encargo 5 (10:12, Sergio: «cómo se va haciendo el logo»): al acabar el coche, el nombre se descubre de izquierda a derecha (1,2 → 1,85 s). */
.mc-logo-anima .mc-logo--letra .mc-logo__nombre { animation: mc-logo-nombre 0.65s cubic-bezier(0.3, 0, 0.2, 1) 1.2s both; }
@keyframes mc-logo-nombre { from { clip-path: inset(0 100% 0 0); opacity: 0.2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* «Reducir movimiento»: quieto y entero (la otra excepción de !important permitida, CLAUDE.md §6.11). */
@media (prefers-reduced-motion: reduce) {
	.mc-logo__t, .mc-logo__nombre { animation: none !important; stroke-dashoffset: 0 !important; clip-path: none !important; opacity: 1 !important; }
}

/* =====================================================================================================================
 * ENCARGO 5 (03/10/2026): las 3 propuestas de marca (inc/logo.php, mc_marcas). Coche nuevo de líneas en el naranja CLARO; «Motor» en
 * carbón (blanco de noche y en barras oscuras) y «Casión» en el naranja de BOTÓN (≥ 4,5 sobre blanco: se lee en el móvil); de noche, el
 * claro. Letra fuerte de motor, servida desde el tema: A Saira Condensed 800 (en mayúsculas) · B Barlow Semi Condensed 800 cursiva ·
 * C Exo 2 800 cursiva (las tres, licencia OFL en assets/fonts/).
 * ===================================================================================================================== */
.mc-logo--letra { font-family: var(--mc-logo-letra), "Hind", system-ui, sans-serif; font-style: var(--mc-logo-estilo, normal); font-weight: 800; letter-spacing: 0; gap: 0.4em; }
.mc-logo--letra .mc-logo__coche { width: 3.4em; margin-block: -0.3em; }
.mc-logo--letra .mc-logo__casion { padding: 0; margin: 0; color: var(--mc-marca); }   /* el naranja claro y vivo: es un logotipo (gráfico), no texto de lectura */
.mc-logo--letra .mc-logo__casion::before { content: none; }
.mc-logo--marca-a { text-transform: uppercase; letter-spacing: 0.01em; }
.mc-logo--pie.mc-logo--letra .mc-logo__coche { color: var(--mc-marca); }
@media (min-width: 1025px) and (max-width: 1439px) { html body .site-logo a.mc-logo.mc-logo--letra { font-size: 1.2rem; } }

/* =====================================================================================================================
 * D47 (03/10/2026, 10:47): EL COCHE DE SERGIO (su Canva), calcado con potrace y dibujado como el ojo de VisionLovers (inc/logo.php,
 * mc_logo_coche_canva_svg). Las rayas de la máscara usan las mismas reglas de arriba (.mc-logo__t); sus tiempos van en línea (9 trazos,
 * 1,72 s). Después aparece «MotorCasión» (--mc-logo-fin). Color: degradado A→C; versiones rojo, negro y blanco.
 * ===================================================================================================================== */
.mc-logo--canva .mc-logo__coche { width: 2.6em; height: auto; margin-block: -0.2em; overflow: visible; }
.mc-logo--letra.mc-logo--canva .mc-logo__coche { width: 2.9em; }
.mc-logo-anima .mc-logo--canva .mc-logo__nombre { animation: mc-logo-nombre 0.6s cubic-bezier(0.3, 0, 0.2, 1) var(--mc-logo-fin, 1.7s) both; }
/* «Casión» con el mismo degradado que el coche (Sergio: «el logo irá con un degradado de A a C»). Es un logotipo: sin mínimo de contraste
   (WCAG 1.4.3), y el nombre lo da el aria-label del enlace. Si el navegador no recorta el fondo al texto, sale en el naranja de acento. */
.mc-logo--letra.mc-logo--canva .mc-logo__casion { color: var(--mc-acento, #FF8A00); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.mc-logo--letra.mc-logo--canva.mc-logo--coche-degradado .mc-logo__casion { background: linear-gradient(100deg, #FF8A00 0%, #FF5A3D 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.mc-logo--coche-rojo .mc-logo__tinta { fill: #CD1719; }
.mc-logo--coche-rojo.mc-logo--letra .mc-logo__casion { color: #CD1719; }
.mc-logo--coche-negro .mc-logo__tinta { fill: #111214; }
.mc-logo--coche-blanco .mc-logo__tinta { fill: #FFFFFF; }
html[data-tema="oscuro"] .mc-logo--coche-negro .mc-logo__tinta { fill: #FFFFFF; }   /* el negro no se ve de noche: pasa a blanco */