/* ===================================================================================================================== * MotorCasión · TOKENS DEL SISTEMA DE DISEÑO «Taller premium» (03/10/2026, Claude Code en la nube · F1) * El ÚNICO sitio donde vive un color, una letra, un espacio o una sombra. Documentado en diseno/SISTEMA-DISENO.md. * La marca: 7 variables «fuente» (§1). Hoy, de reserva, el ámbar del encargo 4; las propuestas A, B y C de Sergio (encargo 5) las cambia * inc/logo.php con MC_MARCA. El rojo #FF1616 y el azul #1F6DFF de antes ya no son de marca. * Contraste comprobado con `node herramientas/contraste.cjs` (todas las parejas ≥ 4,5 en texto y ≥ 3 en gráficos, claro y oscuro). * Reglas: sin !important, sin @layer (Woodmart va sin capas y ganaría), mobile-first. Claro siempre; oscuro solo con el botón. * ===================================================================================================================== */ /* Letras servidas desde el tema (licencia OFL en assets/fonts/): nada de Google Fonts (la IP del visitante no sale a Google). */ @font-face { font-family: "Hind"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/hind-latin-600-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; } @font-face { font-family: "Hind"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/hind-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @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; } @font-face { font-family: "Hind"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/hind-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Karla"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/karla-latin-wght-normal.woff2") format("woff2-variations"); 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; } @font-face { font-family: "Karla"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/karla-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* 03/10/2026 · LA LETRA BASE, 16 px. Woodmart pone html { font-size: var(--wd-text-font-size) } y en esta web vale 14 px (medido con Playwright): todo el sistema (en rem) salía un 12 % más pequeño y los campos de 14 px hacen zoom solos en el iPhone. «html:root» gana a su «:root» por un selector más, sin !important. Solo donde se carga este fichero (pantallas del camino B). */ html:root { --wd-text-font-size: 16px; } /* Encargo 6 (03/10/2026): Woodmart imprime su «:root{ --wd-primary-color: rgb(31,109,255) … }» DESPUÉS de esta hoja (medido en /planes-profesionales/ con la llave: seguía saliendo el azul viejo, 4,48 sobre blanco, que no llega para texto). Con «html:root» (un selector más) mandan los colores de la marca. Solo los 4 de marca: los enlaces de Woodmart siguen como estaban (negros). */ html:root { --wd-primary-color: var(--mc-texto-marca); /* Woodmart lo usa como color de letra: el naranja que se lee */ --wd-alternative-color: var(--mc-texto-marca); --btn-accented-bgcolor: var(--mc-boton); --btn-accented-bgcolor-hover: var(--mc-boton-hover); } :root { /* ---- 1 · Color: LA MARCA EN 7 FUENTES (encargo 6, 03/10/2026) ---- TODO el color de marca de la web sale de estas 7 variables (+ el degradado). Elegir la marca de Sergio (A, B o C: MC_MARCA en inc/interruptores.php) solo cambia estas 7 (las pinta inc/logo.php, mc_marca_css()); nada más se toca. Lo de abajo es LA MARCA ELEGIDA POR SERGIO (03/10/2026, 11:06): la A, naranja #FF8A00 con degradado hasta #FF5A3D (el ámbar del encargo 4 queda en diseno/PALETA-AMBAR.md). LOS BOTONES (03/10, 11:26, decisión del iMac por orden de Sergio; entrega/referencias/botones-elegidos/): OPCIÓN 1 · NARANJA VIVO. Un solo color de acción: el naranja es SOLO para la acción principal. Los enlaces van en carbón y subrayados; el texto naranja de día, #A85300 (nunca #FF8A00 sobre blanco: 2,36). Contrastes: node herramientas/contraste.cjs. */ --mc-acento: #FF8A00; /* ADORNO y gráfico: el coche, la caja inclinada, subrayados, sellos. NUNCA letra sobre blanco (2,36) */ --mc-boton: #FF8A00; /* fondo del botón principal (carbón encima 7,93) */ --mc-boton-hover: #FFA01F; /* (carbón encima 9,19) */ --mc-sobre-boton: #111214; /* letra sobre el botón */ --mc-enlace: #111214; /* enlaces: carbón y SUBRAYADOS (17,04 sobre la tarjeta #F5F4F1) */ --mc-enlace-hover: #A85300; /* enlace al pasar el ratón (5,38 sobre blanco) */ --mc-texto-marca: #A85300; /* texto en naranja de día: antetítulos, cifras (5,38 sobre blanco; 4,89 sobre #F5F4F1) */ --mc-foco: #111214; /* anillo de foco */ --mc-acento-suave: #FFF4EC; /* fondo de avisos y sellos suaves (texto naranja encima 4,97) */ --mc-carbon: #111214; /* casi negro: títulos, barras, pie */ /* El degradado de la marca (Sergio, 03/10 10:42: «el logo irá con un degradado de A #FF8A00 a C #FF5A3D»). Solo ADORNO (nunca debajo de un texto pequeño). Va del naranja A al C. */ --mc-acento-2: #FF5A3D; /* el naranja C: el final del degradado */ --mc-degradado: linear-gradient(100deg, var(--mc-acento) 0%, var(--mc-acento-2) 100%); /* Nombres con significado (los usan las hojas): todos apuntan a las 7 fuentes. */ --mc-marca: var(--mc-acento); --mc-marca-hover: var(--mc-boton-hover); --mc-sobre-marca: #111214; /* letra SOBRE el acento (la caja inclinada): carbón (7,93 sobre #FF8A00) */ --mc-marca-texto: var(--mc-texto-marca); --mc-marca-suave: var(--mc-acento-suave); /* Los nombres de antes se quedan (los usan unas 150 reglas). Medido: --mc-rojo-logo solo se usa como fondo, borde o relleno. */ --mc-rojo-logo: var(--mc-acento); --mc-rojo: var(--mc-boton); --mc-rojo-hover: var(--mc-boton-hover); --mc-rojo-texto: var(--mc-texto-marca); --mc-rojo-suave: var(--mc-acento-suave); --mc-negro: var(--mc-carbon); --mc-azul-marca: var(--mc-acento); --mc-azul: var(--mc-enlace); /* enlaces e información */ --mc-azul-suave: var(--mc-acento-suave); --mc-sobre-azul: #FFFFFF; /* letra sobre el color de enlace usado como fondo */ /* ---- Color: neutros ---- */ --mc-fondo: #FFFFFF; --mc-fondo-2: #F5F4F1; /* «asfalto claro»: bandas alternas, fondo de paneles */ --mc-fondo-calido: #FFF9F3; /* banda suave con un punto del naranja (VisionLovers: su lila --vl-bg-soft). Texto encima como sobre blanco */ --mc-superficie: #F5F4F1; /* tarjetas y formularios (opción 1, 11:26) */ --mc-superficie-2: #FAFAFB; --mc-borde: #DDE0E5; /* separadores (decorativo) */ --mc-borde-fuerte: #878C96; /* bordes de campos: 3,07 sobre #F5F4F1 (el #8A8F99 elegido daba 2,95: el gris más cercano que llega) */ --mc-texto: #111214; /* 18,74 */ --mc-texto-2: #5A5F6A; /* el gris de la opción 1: 6,40 sobre blanco, 5,82 sobre #F5F4F1 */ --mc-texto-3: #5A5F6A; /* ayudas y metadatos: el mismo gris (6,40) */ --mc-sobre-rojo: var(--mc-sobre-boton); /* letra sobre el botón principal */ --mc-sobre-negro: #FFFFFF; /* ---- Color: estados ---- */ --mc-exito: #13703A; --mc-exito-suave: #E9F7EF; --mc-aviso: #6E5A00; --mc-aviso-suave: #FFF8D6; /* amarillo oscuro (tono 49), lejos del naranja de los enlaces (ΔE 13,8) */ --mc-error: #B42318; --mc-error-suave: #FDECEC; /* el rojo, SOLO para errores (6,57) */ --mc-info: var(--mc-texto-marca); --mc-info-suave: var(--mc-acento-suave); /* ---- 2 · Tipografía: Hind (títulos, firme y deportiva) + Karla (texto, cálida y legible). Las de la marca. ---- */ --mc-letra-titulos: "Hind", "Segoe UI", system-ui, -apple-system, sans-serif; --mc-letra-texto: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif; --mc-letra-num: "Hind", "Segoe UI", system-ui, sans-serif; /* precios y cifras: tabulares */ /* Escala móvil (375): base 16 px. En ≥ 850 px los títulos crecen (ver abajo). */ --mc-t-xs: 0.8125rem; /* 13 · sellos, antetítulos (siempre en mayúsculas espaciadas, nunca párrafos) */ --mc-t-s: 0.875rem; /* 14 · ayudas, metadatos */ --mc-t-m: 1rem; /* 16 · cuerpo */ --mc-t-l: 1.125rem; /* 18 · entradilla */ --mc-t-h4: 1.125rem; --mc-t-h3: 1.25rem; --mc-t-h2: 1.5rem; --mc-t-h1: 1.875rem; /* 30 en móvil: nada de títulos de 48 px en un teléfono */ --mc-t-cifra: 2rem; --mc-lh-texto: 1.6; --mc-lh-titulo: 1.15; --mc-peso-texto: 400; --mc-peso-fuerte: 650; --mc-peso-titulo: 700; --mc-medida: 68ch; /* 65-75 caracteres por línea en artículos */ /* ---- 3 · Espacios (escala de 4 px), radios, sombras, foco, movimiento ---- */ --mc-e-1: 0.25rem; --mc-e-2: 0.5rem; --mc-e-3: 0.75rem; --mc-e-4: 1rem; --mc-e-5: 1.25rem; --mc-e-6: 1.5rem; --mc-e-8: 2rem; --mc-e-10: 2.5rem; --mc-e-12: 3rem; --mc-e-16: 4rem; --mc-seccion: var(--mc-e-10); /* aire entre secciones en móvil (48-64 en ordenador) */ --mc-ancho: 1200px; /* ancho máximo del contenido */ --mc-gutter: 1rem; /* margen lateral en móvil */ --mc-r-s: 6px; --mc-r-m: 10px; --mc-r-l: 14px; --mc-r-pildora: 999px; --mc-sombra-1: 0 1px 2px rgba(11, 12, 14, 0.06), 0 1px 1px rgba(11, 12, 14, 0.04); --mc-sombra-2: 0 4px 14px rgba(11, 12, 14, 0.08), 0 1px 3px rgba(11, 12, 14, 0.06); --mc-sombra-3: 0 12px 32px rgba(11, 12, 14, 0.12), 0 2px 6px rgba(11, 12, 14, 0.06); --mc-foco-anillo: 0 0 0 3px var(--mc-fondo), 0 0 0 6px var(--mc-foco); /* 3 px visible, también sobre fondos de color */ --mc-tactil: 48px; /* zona táctil mínima */ --mc-campo-alto: 48px; --mc-mov-rapido: 120ms; --mc-mov: 200ms; --mc-curva: cubic-bezier(0.2, 0.7, 0.2, 1); /* ---- 3b · EL SISTEMA DE VISIONLOVERS, CON LA MARCA DE MOTORCASIÓN (encargo 6, Sergio 11:09: «el diseño cogido de VisionLovers») ---- Su receta de 3 capas (tokens.css de VisionLovers §«neón»), con el naranja A en vez del rosa neón. El naranja SOLO adorna: halos y aros. Capa 1, halo de las tarjetas: sombra suave oscura + halo naranja al 18 % + filo de 1 px. Esquinas de 24 px. Al pasar el ratón, más. */ --mc-acento-rgb: 255, 138, 0; --mc-halo: 0 10px 30px rgba(11, 12, 14, 0.08), 0 8px 32px rgba(var(--mc-acento-rgb), 0.16), 0 0 0 1px rgba(var(--mc-acento-rgb), 0.26); --mc-halo-fuerte: 0 14px 40px rgba(11, 12, 14, 0.10), 0 10px 44px rgba(var(--mc-acento-rgb), 0.26), 0 0 0 1px rgba(var(--mc-acento-rgb), 0.45); --mc-aro: 0 0 0 1px var(--mc-acento), 0 0 0 4px rgba(var(--mc-acento-rgb), 0.15); /* capa 2: pastillas y chips */ --mc-aro-fuerte: 0 0 0 1px var(--mc-acento), 0 0 0 5px rgba(var(--mc-acento-rgb), 0.28); --mc-r-xl: 24px; /* tarjetas con halo (VisionLovers: 24–30) */ --mc-lift: -2px; /* lo que sube una tarjeta al pasar el ratón */ --mc-e-14: 3.5rem; --mc-e-18: 4.5rem; /* secciones de la portada: 56 en móvil, 72 en ordenador (VisionLovers: 48 / 72) */ /* ---- 4 · LA FIRMA: la caja roja inclinada del logo («CASION»). Medida en el logo: lados a unos 12°. ---- */ --mc-inclinacion: -12deg; /* skewX del paralelogramo */ --mc-firma-alto: 4px; /* subrayado de títulos de sección */ --mc-firma-ancho: 48px; /* Woodmart: sus variables apuntan a las nuestras (sin pelear con su CSS) */ --wd-primary-color: var(--mc-texto-marca); /* Woodmart lo usa también como color de letra: el naranja que se lee (5,38) */ --wd-link-color: var(--mc-azul); --wd-link-color-hover: var(--mc-texto); --wd-text-color: var(--mc-texto-2); --wd-title-color: var(--mc-texto); --wd-main-bgcolor: var(--mc-fondo); color-scheme: light; } @media (min-width: 850px) { :root { --mc-t-h1: 2.5rem; /* 40 */ --mc-t-h2: 1.875rem; /* 30 */ --mc-t-h3: 1.375rem; /* 22 */ --mc-t-cifra: 2.5rem; --mc-seccion: var(--mc-e-16); --mc-gutter: 1.5rem; } } @media (min-width: 1200px) { :root { --mc-t-h1: 3rem; --mc-gutter: 2rem; } /* 48 solo en ordenador */ } /* ---- 5 · MODO OSCURO: solo si el visitante pulsa ☾ (data-tema="oscuro" en , inc/modo-oscuro.php) ---- */ :root[data-tema="oscuro"] { /* De noche (opción 1): el botón es el mismo naranja con letra carbón; enlace al pasar y foco #FFB04A; el texto naranja, #FFB04A. */ --mc-enlace: #F5F4F1; /* enlaces: el color del texto, subrayados */ --mc-enlace-hover: #FFB04A; /* 10,32 sobre el fondo */ --mc-texto-marca: #FFB04A; /* 9,29 sobre la superficie */ --mc-foco: #FFB04A; --mc-acento-suave: #2A1A10; /* (texto naranja encima 9,22) */ --mc-carbon: #0B0C0E; --mc-sobre-azul: #111214; --mc-fondo: #111214; --mc-fondo-2: #16181C; --mc-fondo-calido: #17130F; --mc-superficie: #1B1D21; --mc-superficie-2: #22252A; --mc-borde: #2C3038; --mc-borde-fuerte: #6B707B; /* 3,77 sobre el fondo, 3,40 sobre la superficie */ --mc-texto: #F5F4F1; --mc-texto-2: #9AA0AA; /* 7,12 sobre el fondo, 6,42 sobre la superficie */ --mc-texto-3: #9AA0AA; --mc-exito: #5BD38D; --mc-exito-suave: #10291B; --mc-aviso: #E3D25E; --mc-aviso-suave: #26230F; /* amarillo: el ámbar de antes se confundía con el naranja de los enlaces */ --mc-error: #FF7A7A; --mc-error-suave: #2D1315; --mc-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5); --mc-sombra-2: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04); --mc-sombra-3: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05); --mc-halo: 0 10px 30px rgba(0, 0, 0, 0.45), 0 8px 32px rgba(var(--mc-acento-rgb), 0.10), 0 0 0 1px rgba(var(--mc-acento-rgb), 0.30); --mc-halo-fuerte: 0 14px 40px rgba(0, 0, 0, 0.5), 0 10px 44px rgba(var(--mc-acento-rgb), 0.18), 0 0 0 1px rgba(var(--mc-acento-rgb), 0.55); color-scheme: dark; } /* Movimiento reducido: se respeta siempre (una de las dos excepciones de !important permitidas, CLAUDE.md §6.11) */ @media (prefers-reduced-motion: reduce) { :root { --mc-lift: 0px; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }