/** * Design tokens — "Mindful Advocacy". * * Única fuente de verdad para tipografía, ritmo y formas, y para CÓMO se usa * cada color. Pero OJO: aquí NO se decide QUÉ color es cada color de marca. * * Los cinco colores de marca (--sg-linen, --sg-sand, --sg-fir, --sg-clay, * --sg-sage) no se definen aquí: se LEEN de variables que genera WordPress, y * el valor que llevan esas variables viene de esta cadena: * * 1. inc/gutenberg.php → silviagarcia_default_colors() ← EL VALOR EN CÓDIGO * 2. Apariencia → Personalizar → Colores de Marca ← lo anula, si se guarda * 3. WordPress publica la paleta como --wp--preset--color--verde-abeto, etc. * (theme.json NO manda: inc/gutenberg.php sustituye su paleta al cargar) * 4. esta hoja: --sg-fir: var(--wp--preset--color--verde-abeto, #xxxxxx) * 5. el resto del CSS usa var(--sg-fir) * * Por eso cambiar el #xxxxxx de la línea de abajo no cambia nada: es solo el * valor de reserva por si WordPress no publicase la variable, y nunca llega a * usarse. Para cambiar un color de marca, ver IMPLEMENTACION.md §5 «Cambiar un * color de marca». La auditoría avisa si esta reserva, theme.json y * inc/gutenberg.php dejan de coincidir. * * @package SilviaGarcia */ :root { /* Color -------------------------------------------------------------- */ --sg-linen: var(--wp--preset--color--lino, #faf8f3); --sg-sand: var(--wp--preset--color--arena, #e9e1d3); --sg-fir: var(--wp--preset--color--verde-abeto, #1a3725); --sg-clay: var(--wp--preset--color--arcilla, #b58863); --sg-sage: var(--wp--preset--color--salvia, #94a791); --sg-white: #fff; /* Derivados (opacidades de marca) */ --sg-fir-80: color-mix(in srgb, var(--sg-fir) 80%, transparent); --sg-fir-70: color-mix(in srgb, var(--sg-fir) 70%, transparent); --sg-fir-10: color-mix(in srgb, var(--sg-fir) 10%, transparent); --sg-fir-05: color-mix(in srgb, var(--sg-fir) 5%, transparent); --sg-fir-03: color-mix(in srgb, var(--sg-fir) 3%, transparent); --sg-fir-25: color-mix(in srgb, var(--sg-fir) 25%, transparent); --sg-fir-35: color-mix(in srgb, var(--sg-fir) 35%, transparent); --sg-fir-50: color-mix(in srgb, var(--sg-fir) 50%, transparent); --sg-linen-70: color-mix(in srgb, var(--sg-linen) 70%, transparent); --sg-linen-50: color-mix(in srgb, var(--sg-linen) 50%, transparent); --sg-linen-10: color-mix(in srgb, var(--sg-linen) 10%, transparent); --sg-clay-50: color-mix(in srgb, var(--sg-clay) 50%, transparent); --sg-sage-40: color-mix(in srgb, var(--sg-sage) 40%, transparent); --sg-sage-20: color-mix(in srgb, var(--sg-sage) 20%, transparent); /* * Salvia profundo: el mismo verde, oscurecido con Abeto hasta tener contraste * de texto. El Salvia puro sobre Lino da 2,4:1 (WCAG pide 4,5:1 para texto); * este da 5,2:1 sobre Lino y 4,3:1 sobre Arena. Es el Salvia "para escribir": * enlaces del menú y botones de contorno. El Salvia puro se queda para lo que * se rellena (botones, fondos, iconos, filetes). */ --sg-sage-deep: color-mix(in srgb, var(--sg-sage) 50%, var(--sg-fir)); /** * Asignación de color por elemento. * * El resto del CSS de marca (fir/clay/sage) está repartido por más de * media docena de archivos: cada regla decide su color en el sitio donde * vive. Para una pieza concreta eso está bien —es la especificidad * necesaria para que la sección oscura vire sola, por ejemplo—, pero hace * imposible encontrar "qué color tiene el menú" sin buscar en todo el * proyecto, y hace que probar una paleta distinta signifique tocar cinco * sitios a la vez. * * Estas variables son el punto único para las piezas donde eso importa de * verdad: iconos, menú de cabecera y su botón (normal y al pasar el * ratón), los dos estilos de botón de contenido (sólido y contorno, cada * uno con su propio hover) y la palabra destacada en cursiva dentro de un * titular. El CSS que las consume (icons.css, header.css, blocks.css) ya * no escribe --sg-clay/--sg-fir/--sg-sage directamente en esos sitios, * escribe la variable de aquí. * * Lo que queda fuera a propósito, porque no es "un color de marca * reasignable" sino un ajuste de contraste ligado a un fondo concreto: * el menú móvil (offcanvas), el botón terciario "enlace en versalitas", y * las variantes de botón/acento sobre fondo oscuro (.has-verde-abeto- * background-color, .sg-section--dark). Si alguna vez hace falta probar * paleta también ahí, se amplía esta misma lista. * * PRUEBA DE COLOR PARA LA CLIENTA (18/09/2026): iconos, menú y su botón a * Salvia. El resto se ha añadido con su valor "de marca" normal, sin * cambiar cómo se ve hoy — solo para que a partir de ahora también se * pueda probar cambiándolo aquí. Los valores "de marca" de cada línea * quedan comentados a la derecha; volver a ellos deshace la prueba. */ /* * REGLA DE CONTRASTE CON EL SALVIA (21/10/2026). El Salvia predomina, pero * ni Lino ni Salvia se leen sobre el otro (2,4:1). Se resuelve por papeles: * * Salvia puro RELLENOS: fondos, botones, iconos, filetes. * Abeto sobre él el TEXTO de lo que va relleno de Salvia (5,2:1). * Salvia profundo el texto que va SUELTO sobre claro: menú y contorno. * Lino sobre Abeto el estado de pasar el ratón (12,7:1). * * Para probar otra paleta se reasignan estas líneas; si una combinación baja * de 4,5:1 para texto, hay que cambiar también su pareja de texto. */ --sg-icon-color: var(--sg-sage); --sg-nav-link-color: var(--sg-sage-deep); --sg-nav-link-color-hover: var(--sg-fir); --sg-header-cta-bg: var(--sg-sage); --sg-header-cta-text: var(--sg-fir); --sg-header-cta-bg-hover: var(--sg-fir); --sg-header-cta-text-hover: var(--sg-linen); /* Botón de contenido — sólido (el estilo por defecto de Gutenberg). */ --sg-btn-solid-bg: var(--sg-sage); --sg-btn-solid-text: var(--sg-fir); --sg-btn-solid-bg-hover: var(--sg-fir); --sg-btn-solid-text-hover: var(--sg-linen); /* Botón de contenido — contorno (estilo "Esquema" de Gutenberg). */ --sg-btn-outline-color: var(--sg-sage-deep); --sg-btn-outline-bg-hover: var(--sg-fir); /* Palabra destacada en cursiva dentro de un titular (.sg-accent, /). */ --sg-accent-color: var(--sg-clay); /* Filete bajo un titular que está directamente sobre una sección Salvia. */ --sg-rule-on-sage: var(--sg-white); /* * Sección de reseñas (fondo Salvia). El Arcilla del acento y del filete no se * lee sobre Salvia (contraste 1,2:1), así que esta sección tiene su propio * juego: la palabra en cursiva del titular, el filete y las comillas en * Blanco; el antetítulo y el texto en Abeto. Blanco sobre Salvia da 2,6:1, * por debajo del 3:1 que WCAG pide para texto grande (el Abeto da 5,2:1 y el * Arcilla 1,2:1). Es una decisión de estilo: si hace falta más contraste, * poner aquí var(--sg-fir). */ --sg-reviews-accent: var(--sg-white); --sg-reviews-eyebrow: var(--sg-fir); --sg-reviews-text: var(--sg-fir); --sg-reviews-stars: var(--sg-fir); /* * Tarjeta de cada reseña (21/10/2026): sobre Salvia las reseñas sueltas se * fundían con el fondo. Para probar otro color basta cambiar esta línea: * var(--sg-linen) blanco cálido de la marca (por defecto; Abeto 12,7:1) * var(--sg-sand) Arena, más cálido y menos contraste con el texto (10,3:1) * var(--sg-white) blanco puro (13,4:1), el más nítido sobre el verde * Las comillas son Arcilla: legibles sobre Lino (3,0:1) y Blanco (3,2:1), pero * no sobre Arena (2,4:1); con Arena, poner aquí var(--sg-fir). */ --sg-reviews-card-bg: var(--sg-linen); --sg-reviews-quote: var(--sg-clay); /* * Formulario de contacto (tarjeta .sg-form-card). Fondo Salvia, y todo lo * demás se reasigna para que se lea sobre él. Contrastes medidos sobre * #94A791: Abeto 5,2:1 (texto, etiquetas, filetes, botón) · Lino sobre * Abeto 12,7:1 (texto del botón) · Arcilla 1,2:1 (por eso ya no se usa aquí * para el foco, el enlace ni el botón) · Alerta 2,7:1 (por eso el mensaje de * error va en una pastilla de Lino, donde da 6,4:1). */ --sg-form-bg: var(--sg-sage); --sg-form-text: var(--sg-fir); --sg-form-line: var(--sg-fir); --sg-form-notice-bg: var(--sg-linen); /* Botón de envío: Abeto con letra Lino; al pasar el ratón se invierte. */ --sg-form-btn-bg: var(--sg-fir); --sg-form-btn-text: var(--sg-linen); --sg-form-btn-bg-hover: var(--sg-linen); --sg-form-btn-text-hover: var(--sg-fir); /* * Alerta. Único color fuera de la paleta de marca: un error de validación * no puede confundirse con el arcilla, que aquí significa «acción». * Contraste sobre lino 6,9:1. */ --sg-alert: #9c3b30; --sg-alert-bg: #f7e8e5; --sg-alert-border: #e0bdb7; /* * Tipografía ---------------------------------------------------------- * * Cambio de marca (16/09/2026): la pareja titular-serif / texto-sans se * sustituye por una única familia, Lato, diferenciada por peso — 400 el * cuerpo, 600 los titulares (--sg-heading-weight). El motivo es legibilidad * y fuerza visual, no estética: un serif fino en los titulares se leía * débil junto a un cuerpo ya en sans. * * La cursiva serif no desaparece: se aísla en --sg-font-quote y queda * reservada a las citas destacadas y al acento dentro de un titular * (.sg-accent), que es justo donde antes vivía como "recurso de marca". * Con los titulares ya en sans, ese contraste serif/sans se nota más, no * menos. */ --sg-font-heading: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif; --sg-font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif; --sg-font-quote: "Cormorant Garamond", georgia, "Times New Roman", serif; --sg-heading-weight: 600; --sg-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); /* 36 → 48 */ --sg-display-lh: 1.24; --sg-headline-md: clamp(1.75rem, 1.4rem + 1.2vw, 2rem); /* 28 → 32 */ --sg-headline-sm: 1.5rem; /* 24 */ /* * Titulares de contenido H2 y H3 — subida del 15/10/2026. Se separan de * --sg-headline-md/-sm porque estos dos los comparten piezas que NO deben * crecer: el rótulo del logotipo de la cabecera, los títulos del pie, las * citas y los títulos de las teselas (calibrados al ancho de la tarjeta). * * H2 28 → 32 pasa a 30 → 40 (se alcanza el máximo hacia 930 px) * H3 24 pasa a 25 → 28 * * Proporción H2/H3: 1,2 en móvil y 1,43 en escritorio (antes 1,17 y 1,33), * y H1 (36 → 56) siempre por encima de H2. theme.json (h2 y h3) lee estas * mismas variables, así que el editor y la web coinciden. */ --sg-h2-size: clamp(1.875rem, 1.45rem + 1.8vw, 2.5rem); /* 30 → 40 */ --sg-h3-size: clamp(1.5625rem, 1.35rem + 0.55vw, 1.75rem); /* 25 → 28 */ /* * Escala de texto — subida del 14/10/2026 por legibilidad. La clienta no leía * bien el cuerpo (17px) ni los textos pequeños (12px): la legibilidad es un * pilar de la web, así que toda la escala sube un escalón en vez de tocar * solo el cuerpo, para que la jerarquía entre niveles se mantenga. * * cuerpo 17 → 19 · entradilla 20,8 → 22 · pequeño 14 → 16 · etiqueta 12 → 14 * * Lo que depende de estos valores en OTRO sitio (theme.json: tamaños * predefinidos del editor) hay que mantenerlo a mano; ver IMPLEMENTACION.md §5. */ --sg-body-lg: 1.375rem; /* 22 */ --sg-body-md: 1.1875rem; /* 19 */ --sg-body-sm: 1rem; /* 16 */ --sg-label: 0.875rem; /* 14 */ --sg-label-tracking: 0.08em; /* Antetítulo (.is-style-sg-eyebrow, h6) y botón terciario en versalitas. */ --sg-eyebrow-size: 0.9375rem; /* 15 — antes 12 */ /* Todos los botones: de contenido, de cabecera y de formulario. */ --sg-button-size: 1.125rem; /* 18 — antes 15–16 */ /* * Peso del texto corrido secundario (entradillas, extractos, listas, texto * del pie). Antes 300: en Lato 300 es un trazo muy fino y a la clienta le * costaba leerlo. Lato no tiene 500; el 400 es el siguiente archivo real. */ --sg-weight-text: 400; /* * Entradilla (.sg-lead). Lato solo está instalado en 100, 300, 400, 700 y 900 * (assets/fonts): un 500 o un 600 caen al 400 o al 700, así que los pasos * reales son 400 o 700. Con 700 todo pesaba igual (titulares, antetítulos, * entradilla) y la jerarquía se empastaba, así que la entradilla vuelve a 400 * y se distingue por TAMAÑO (21 → 24 px frente a 19 del cuerpo) y por su * interlineado, no por trazo. Los titulares quedan como único texto en negrita. */ --sg-weight-lead: var(--sg-weight-text); --sg-lead-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.5rem); /* 21 → 24 */ /* * Cursiva serif de acento ( en titulares, .sg-accent). Cormorant * Garamond tiene la altura de la «x» en 0,395 em frente a 0,513 em de Lato: * al mismo font-size se ve ~23 % más pequeña. 1,25 la iguala casi al 96 % * sin que las ascendentes (b, d, l) sobresalgan de forma exagerada. * Medido con fontTools sobre los archivos reales. */ --sg-accent-scale: 1.25; /* * Ritmo de los titulares. El hueco depende de QUÉ va detrás: * un componente necesita separación de sección; un párrafo es la bajada * del titular y va pegado a él. */ --sg-heading-gap: calc(var(--sg-unit) * 12); /* titular → componente */ --sg-heading-gap-tight: calc(var(--sg-unit) * 3); /* titular → texto */ --sg-lead-gap: calc(var(--sg-unit) * 9); /* texto → componente */ /* * Cierre (CTA): anchos medidos sobre el texto real para que el titular y * el párrafo caigan en dos líneas. Van en `em`, no en px: un custom * property se resuelve en el elemento que lo consume, de modo que la * medida sigue al tamaño de letra y el recuento de líneas no cambia * cuando el clamp encoge el titular en tablet. * * Margen comprobado con las métricas reales de las fuentes: * titular «¿Necesitas orientación para tomar una decisión importante?» * mide 28,25em → 2 líneas con cualquier ancho entre 15 y 28em. * párrafos miden entre 39,7em y 59,6em → 2 líneas entre 30 y 39em. * * Reverificado el 16/09/2026 al pasar el titular a Lato: el mismo texto en * Lato 700 mide 26,67em (menos que en Libre Caslon Text), y sigue dando 2 * líneas en cualquier ancho entre 15 y ~26em. 18em sigue siendo seguro. Los * párrafos no cambian: siguen en Lato, la misma fuente que ya tenían. */ --sg-cta-title: 18em; --sg-cta-text: 34em; /* Ritmo y medidas ---------------------------------------------------- */ --sg-container: 1140px; --sg-container-wide: 1440px; /* * Escala de anchos intermedios. Se aplican con las utilidades sg-w-* * (ver layout.css) y sirven para estrechar una sección sin tocar el CSS. */ --sg-width-xs: 560px; --sg-width-sm: 720px; --sg-width-md: 900px; --sg-width-lg: 1020px; --sg-measure: 68ch; /* Ancho cómodo de lectura (blog). */ --sg-gutter: 24px; --sg-margin-mobile: 20px; --sg-page-padding: var(--sg-margin-mobile); --sg-section-gap: 64px; --sg-unit: 8px; --sg-header-height: 80px; /* Formas y profundidad ----------------------------------------------- */ --sg-radius-sm: 0.25rem; --sg-radius: 0.5rem; --sg-radius-pill: 9999px; /* * UN solo radio (8 px) para botones, tarjetas, paneles, recuadros, imágenes y * formulario (21/10/2026). Antes los botones eran rectos y las tarjetas y las * imágenes llevaban 12 px. Para cambiar el redondeo de toda la web basta con * cambiar --sg-radius; cada alias se puede soltar de él si un día hiciera falta * (p. ej. --sg-radius-button: var(--sg-radius-pill) para botones en píldora). */ --sg-radius-card: var(--sg-radius); --sg-radius-media: var(--sg-radius); --sg-radius-button: var(--sg-radius); /* Geometría común de los botones: la comparten el sólido y el de contorno. */ --sg-button-padding: 0.875rem 2rem; /* Versión compacta, para interfaces pequeñas como el banner de cookies. */ --sg-button-padding-sm: 0.625rem 1.5rem; --sg-shadow-soft: 0 10px 30px -10px color-mix(in srgb, var(--sg-fir) 8%, transparent); --sg-shadow-lift: 0 14px 40px -12px color-mix(in srgb, var(--sg-fir) 16%, transparent); --sg-border: 1px solid var(--sg-fir-10); /* Filetes de separación: casi imperceptibles, solo insinúan el borde. */ --sg-hairline-light: 1px solid var(--sg-fir-05); /* sobre fondo claro */ --sg-hairline-dark: 1px solid var(--sg-linen-10); /* sobre fondo abeto */ /* Movimiento --------------------------------------------------------- */ --sg-ease: cubic-bezier(0.4, 0, 0.2, 1); --sg-transition: 0.3s var(--sg-ease); } @media (min-width: 768px) { :root { --sg-page-padding: var(--sg-gutter); --sg-section-gap: 120px; --sg-header-height: 90px; } } /* Respeto por las preferencias de movimiento reducido. */ @media (prefers-reduced-motion: reduce) { :root { --sg-transition: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /** * Fallback para navegadores sin color-mix(). Las variables derivadas se * recalculan con rgba() sobre los valores de marca por defecto. */ @supports not (color: color-mix(in srgb, #000 50%, transparent)) { :root { --sg-fir-80: rgba(27, 52, 36, 0.8); --sg-fir-70: rgba(27, 52, 36, 0.7); --sg-fir-10: rgba(27, 52, 36, 0.1); --sg-fir-05: rgba(27, 52, 36, 0.05); --sg-fir-03: rgba(27, 52, 36, 0.03); --sg-fir-25: rgba(27, 52, 36, 0.25); --sg-fir-35: rgba(27, 52, 36, 0.35); --sg-fir-50: rgba(27, 52, 36, 0.5); --sg-shadow-soft: 0 10px 30px -10px rgba(27, 52, 36, 0.08); --sg-shadow-lift: 0 14px 40px -12px rgba(27, 52, 36, 0.16); --sg-linen-70: rgba(250, 248, 243, 0.7); --sg-linen-50: rgba(250, 248, 243, 0.5); --sg-linen-10: rgba(250, 248, 243, 0.1); --sg-clay-50: rgba(181, 136, 99, 0.5); --sg-sage-40: rgba(148, 167, 145, 0.4); --sg-sage-20: rgba(148, 167, 145, 0.2); --sg-sage-deep: #586e5a; } }