/* ========================================================================== tokens.css — Sistema de Diseño Marc Zamora Asesor Financiero Nivel L0-3 · Fuente: DESIGN.md + brand_assets/brand-kit.{css,md} + CORRECCIONES.md Documento hermano: spec/L0-3-design-system.md ESTADO: copia ejecutable de spec/tokens.css (L0-3), enqueued como aditivo (junto a brand-kit.css, nunca en su lugar) en páginas construidas sobre el sistema de tokens nuevo: /empresas/, /planificacion-financiera/. Las 13 páginas restantes siguen en brand-kit.css hasta que se apruebe la migración completa (ver TRACKER.md). Cambios de fondo van primero en spec/tokens.css. REGLAS DE ESTE ARCHIVO - Los nombres de token existentes NO se renombran (romperían 13 páginas de CSS). - Lo nuevo se añade; lo divergente se marca con [FIX] y su justificación. - Ninguna página de Nivel 1 define colores, tamaños ni radios fuera de aquí. - La carga de fuentes va por wp_enqueue_style (marc-google-fonts en functions.php), no por @import: se omite aquí a propósito. ========================================================================== */ :root { /* ══════════════════════════════════════════════════════════════════════ 1. COLOR — Estrategia: Restrained (DESIGN.md) Dos colores reales (#1B1832 / #FFFFFF) + un único acento (#00EBA3). Todo lo demás son neutros tintados hacia el hue 280 de la marca. ══════════════════════════════════════════════════════════════════════ */ /* --- Marca (canónicos, NO tocar — vienen de brand_assets/) --- */ --color-primary: #1B1832; --color-white: #FFFFFF; --color-cta: #00EBA3; --color-link: #000000; /* --- Texto --- */ --color-text: #1B1832; /* 17.2:1 sobre blanco */ --color-text-muted: oklch(45% 0.02 280); /* 7.4:1 sobre blanco */ --color-text-on-dark: #FFFFFF; /* 17.2:1 sobre --color-primary */ --color-text-on-dark-muted: rgba(255, 255, 255, 0.55); /* 5.9:1 sobre primary */ /* --- Superficies --- */ --color-surface: #FFFFFF; --color-surface-alt: oklch(97.5% 0.003 280); /* [FIX] sustituye a #f8f9fa, #f8fafc, #f4f6f9 y oklch(97.5% 0 0), cuatro grises distintos para el mismo rol */ --color-surface-sunken: oklch(95% 0.004 280); --color-surface-inverse: #1B1832; /* --- Bordes --- [FIX] --color-border se usaba en honorarios.css sin estar definida en ningún :root. var() inválida = la declaración border-top completa se descarta: esos separadores no se están pintando. */ --color-border: oklch(88% 0.008 280); /* separador decorativo */ --color-border-strong: oklch(66% 0.015 280); /* 3.1:1 — obligatorio en el contorno de cualquier control (input, checkbox, botón outline). WCAG 1.4.11 */ --color-border-on-dark: rgba(255, 255, 255, 0.40); /* 3.8:1 sobre primary. [FIX] el 0.30 actual del footer da 2.7:1 */ --color-divider-on-dark: rgba(255, 255, 255, 0.10); /* decorativo, sin requisito de contraste */ /* --- CTA --- */ --color-cta-ink: #004731; /* 6.9:1 sobre #00EBA3. NUNCA blanco: blanco sobre #00EBA3 da 1.6:1 */ /* [FIX] inversion.css usa #003D2B para el mismo rol. Consolidar en #004731. */ /* --- Estados semánticos --- ⚠️ PROPUESTA PENDIENTE DE APROBACIÓN DEL CLIENTE. brand_assets/brand-kit.md línea 73 dice literalmente: "No hay colores de estado (error, success, warning) definidos en el sistema actual — definir en web-3.0". Son los únicos valores de este archivo que no salen de una fuente de marca. Derivados y verificados, no inventados al gusto: - success reutiliza el verde oscuro del CTA (cero hues nuevos) - error es un rojo desaturado hacia el hue frío de la marca, NO #ef4444 (Tailwind red-500, prohibido por CLAUDE.md y hoy presente en contacto.css) */ --color-success: #004731; /* 10.8:1 sobre blanco */ --color-success-surface: #E6FDF4; /* texto success encima: 10.1:1 */ --color-error: #B00034; /* 7.3:1 sobre blanco */ --color-error-surface: #FDECF0; /* texto error encima: 6.4:1 */ --color-error-on-dark: #FF9BB0; /* 8.6:1 sobre --color-primary */ --color-warning: #8A5A00; /* 6.0:1 sobre blanco. Opcional: hoy ninguna página necesita estado de aviso */ /* --- Foco --- */ --color-focus: #1B1832; /* sobre fondo claro */ --color-focus-on-dark: #00EBA3; /* sobre fondo oscuro */ /* --- Overlay de foto (L2-1 B13, 28/09/2026) --- CORRECCIONES §HTML regla 30: degradado horizontal a transparente, único para todo hero con foto de fondo (y el fondo de foto del FAQ de la home). Antes estaba copiado literal en 9 CSS. Uso: background: var(--overlay-hero); */ --overlay-hero: linear-gradient( 90deg, color-mix(in oklch, var(--color-primary) 65%, transparent) 0%, color-mix(in oklch, var(--color-primary) 35%, transparent) 45%, transparent 75% ); /* ══════════════════════════════════════════════════════════════════════ 2. TIPOGRAFÍA ══════════════════════════════════════════════════════════════════════ */ /* --- Familias (canónicas, brand_assets/) --- */ --font-heading: 'Open Sans', system-ui, sans-serif; --font-body: 'Roboto', system-ui, sans-serif; /* --- Pesos --- */ --fw-eyebrow: 400; /* CORRECCIONES regla 8: eyebrows nunca en negrita */ --fw-body: 400; --fw-accent: 500; /* Roboto Medium · nav links */ --fw-heading: 600; /* Open Sans SemiBold · todos los H1–H6 */ --fw-bold: 700; /* solo cifras/precios destacados. Requiere la petición de fuentes de arriba */ /* PROHIBIDO: 100, 200, 300, 800, 900 — no se descargan y se sintetizan mal. [FIX] honorarios.css:407 usa 300. Migrar a 400. */ /* --- Escala fluida --- Interpola entre el valor mobile (≤768px) y el desktop (≥1200px). [FIX] Sustituye el patrón actual de "valor desktop + bloque de overrides @media (max-width:767px)", que produce un salto brusco en tablet. Endpoints idénticos a los que ya renderiza el sitio → sin regresión visual en 375 / 768 / 1200+; solo cambia la interpolación intermedia. */ --text-h1: clamp(40px, calc(25.78px + 1.85vw), 48px); --text-h2: clamp(32px, calc(17.78px + 1.85vw), 40px); --text-h3: clamp(28px, calc(20.89px + 0.93vw), 32px); --text-h4: clamp(24px, calc(16.89px + 0.93vw), 28px); --text-h5: clamp(20px, calc(12.89px + 0.93vw), 24px); --text-h6: clamp(18px, calc(14.44px + 0.46vw), 20px); --text-body: clamp(16px, calc(12.44px + 0.46vw), 18px); --text-link: var(--text-body); --text-sm: clamp(14px, calc(12.22px + 0.23vw), 15px); --text-xs: 14px; /* PISO ABSOLUTO de texto legible. Nada por debajo. [FIX] .gdpr-clause y .char-counter usan 12px */ --text-meta: 12px; /* solo metadatos no esenciales (copyright del footer). Nunca para texto que el usuario deba leer */ /* --- Hero (eyebrow/h1/lead superpuestos a imagen de fondo) --- Decisión de usuario 11/09/2026 (CORRECCIONES regla 26): el hero usa estos tamaños propios, más grandes que --text-h1/--text-sm/--text-h6 — no es un descuido, es la referencia visual elegida (la de la home) para que home/nosotros/empresas y el resto de heros coincidan entre sí. */ --text-hero-eyebrow: clamp(13px, 1.6vw, 20px); --tracking-hero-eyebrow: 0.32em; --text-hero-title: clamp(32px, 4.8vw, 58px); --text-hero-desc: clamp(17px, 2vw, 22px); /* --- Alturas de línea (unitless: `em` no se hereda bien) --- [FIX] DESIGN.md documenta 1.5em; el CSS real usa 1.3em. Se adopta 1.3, correcto para headings en caja alta. Ver Incidencia #1 del documento. */ --lh-heading: 1.3; --lh-display: 1.15; /* solo H1 de hero a tamaño máximo */ --lh-body: 1.6; --lh-ui: 1.2; /* botones, labels, nav */ /* --- Tracking --- TODO heading va en UPPERCASE con tracking POSITIVO (DESIGN.md). Nunca un valor negativo: en caja alta destruye la legibilidad. */ --tracking-display: 0.02em; /* H1, H2 */ --tracking-heading: 0.03em; /* H3, H4 */ --tracking-heading-sm: 0.05em; /* H5, H6, botón CTA */ --tracking-label: 0.08em; /* enlaces de nav y footer en caja alta */ --tracking-eyebrow: 0.14em; /* eyebrows y cabeceras de columna */ --tracking-body: 0; /* body y links: nunca se toca */ /* --- Medida de línea --- */ --measure: 68ch; /* párrafos largos (65–75ch) */ --measure-short: 46ch; /* subtítulos, leads */ /* --- Ancho de columna de contenido --- Para bloques internos que sí necesitan un tope de ancho (hero-inner, about-content-wrap...), distinto de --bp-desktop aunque comparta valor. No aplica a secciones enteras (CORRECCIONES regla 2). */ --content-max: 1200px; /* ══════════════════════════════════════════════════════════════════════ 3. ESPACIADO — escala base 4px ══════════════════════════════════════════════════════════════════════ */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px; /* --- Ritmo vertical fluido --- */ --space-section: clamp(56px, 8vw, 112px); /* padding-block de sección */ --space-section-lg: clamp(80px, 11vw, 160px); /* separación entre macro- secciones similares · CORRECCIONES regla 13 */ --space-title: clamp(32px, 4vw, 48px); /* margin-bottom de .section-title · CORRECCIONES regla 4 */ /* --- Padding lateral --- CORRECCIONES regla 2: NUNCA .container ni max-width en secciones. El contenido nace desde la izquierda y se expande a todo el viewport. */ --pad-inline: clamp(20px, 5%, 60px); --pad-inline-lg: clamp(24px, 5vw, 80px); /* header y footer */ /* --- Gaps de rejilla --- */ --gap-grid: clamp(20px, 2.5vw, 32px); --gap-cards: clamp(24px, 3vw, 40px); /* ══════════════════════════════════════════════════════════════════════ 4. RADIOS ══════════════════════════════════════════════════════════════════════ */ --radius-xs: 2px; /* anillo de foco en links inline */ --radius-sm: 4px; /* checkbox, botones icono */ --radius-md: 8px; /* inputs pequeños, badges */ --radius-cta: 10px; /* CANÓNICO del botón CTA — DESIGN.md */ --radius-lg: 12px; /* cards, inputs de formulario */ --radius-xl: 16px; /* cards grandes, paneles */ --radius-2xl: 20px; /* bloques hero, panel de formulario */ --radius-pill: 999px; --radius-circle: 50%; /* FUERA DE ESCALA en el CSS actual (migrar): 6px, 11px, 14px, 30px, 40px, 0.5rem, 2rem. El dropdown de nav va SIN radius (DESIGN.md §Nav Menu). */ /* ══════════════════════════════════════════════════════════════════════ 5. ELEVACIÓN DESIGN.md: sin glassmorphism, sin sombra plana genérica. Tinte hacia #1B1832, opacidad baja, en capas. [FIX] El CSS actual usa rgba(12, 30, 63, x) — un tinte AZUL que no es de la marca. Estas sombras usan el hue 280 real. ══════════════════════════════════════════════════════════════════════ */ --shadow-xs: 0 1px 2px oklch(14% 0.04 280 / 0.05); --shadow-sm: 0 2px 8px oklch(14% 0.04 280 / 0.06); --shadow-md: 0 4px 12px oklch(14% 0.04 280 / 0.06), 0 1px 3px oklch(14% 0.04 280 / 0.04); --shadow-lg: 0 8px 24px oklch(14% 0.04 280 / 0.08), 0 2px 6px oklch(14% 0.04 280 / 0.05); --shadow-xl: 0 16px 48px oklch(14% 0.04 280 / 0.10), 0 4px 12px oklch(14% 0.04 280 / 0.06); --shadow-header: 0 1px 0 oklch(90% 0.005 280); --shadow-header-scrolled: 0 1px 0 oklch(90% 0.005 280), 0 4px 24px oklch(14% 0.04 280 / 0.08); /* Hover de TARJETA: --shadow-lg + translateY(-4px). Nunca elevaciones agresivas en elementos informativos · CORRECCIONES regla 5. */ /* ══════════════════════════════════════════════════════════════════════ 6. Z-INDEX — escala semántica [FIX] Hoy .site-header, .custom-select-options y .faq-sidebar comparten z-index:100. El apilamiento lo decide el orden del DOM, no el diseño. ══════════════════════════════════════════════════════════════════════ */ --z-base: 0; --z-raised: 1; --z-overlay: 10; /* overlays sobre imagen, decoración de sección */ --z-sticky: 50; /* sidebars sticky dentro de contenido */ --z-dropdown: 100; /* selects y menús desplegables de página */ --z-sticky-header: 300; --z-backdrop: 400; --z-modal: 500; --z-toast: 600; --z-skip-link: 900; /* Nunca 999 ni 9999. */ /* ══════════════════════════════════════════════════════════════════════ 7. MOVIMIENTO Solo transform / opacity + propiedades de color (color, background-color, border-color, box-shadow). NUNCA `transition: all`. NUNCA propiedades de layout (width, height, top, margin). ══════════════════════════════════════════════════════════════════════ */ --dur-fast: 140ms; /* hover de link, cambio de color */ --dur-base: 200ms; /* estándar: botones, dropdowns */ --dur-slow: 320ms; /* apertura de acordeón, nav mobile */ --ease-out: cubic-bezier(0.25, 0, 0.10, 1); /* por defecto */ --ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1); /* entradas con carácter */ --ease-in: cubic-bezier(0.90, 0, 1, 1); /* salidas */ /* Sin bounce, sin elastic, sin spring. */ /* ══════════════════════════════════════════════════════════════════════ 8. INTERACCIÓN Y ACCESIBILIDAD ══════════════════════════════════════════════════════════════════════ */ --tap-min: 44px; /* área táctil mínima (WCAG 2.5.5) */ --tap-gap: 8px; /* separación mínima entre targets */ --focus-ring-width: 3px; --focus-ring-offset: 3px; /* ══════════════════════════════════════════════════════════════════════ 9. BREAKPOINTS (referencia — las custom properties NO funcionan dentro de @media; hay que escribir el literal) ══════════════════════════════════════════════════════════════════════ */ --bp-mobile: 375px; --bp-tablet: 768px; --bp-desktop: 1200px; /* [FIX] El valor 1025px que arrastran brand-kit.css, contacto.css, footer.css y header.css es incorrecto: CORRECCIONES regla 11. Solo se permiten tres breakpoints: 768px y 1200px (y 375px como referencia de diseño, no como media query). */ } /* ========================================================================== ESTILOS BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html body { margin: 0; font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--tracking-body); color: var(--color-text); background-color: var(--color-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html h1, html h2, html h3, html h4, html h5, html h6 { font-family: var(--font-heading); font-weight: var(--fw-heading); text-transform: uppercase; line-height: var(--lh-heading); color: var(--color-text); text-wrap: balance; margin-top: 0; } html h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-display); } html h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-display); } html h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-heading); } html h4 { font-size: var(--text-h4); letter-spacing: var(--tracking-heading); } html h5 { font-size: var(--text-h5); letter-spacing: var(--tracking-heading-sm); } html h6 { font-size: var(--text-h6); letter-spacing: var(--tracking-heading-sm); } /* [FIX] brand-kit.css asigna un color fijo por nivel de heading (h2 blanco en preview, h2 primary en child-theme, h1/h4/h5/h6 en #000000). Es un artefacto del export de Elementor: acopla el color al nivel semántico en vez de al fondo. Los headings heredan --color-text; sobre fondo oscuro se aplica la clase de contexto. */ .on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark h6 { color: var(--color-text-on-dark); } p { text-wrap: pretty; } a { color: var(--color-link); font-family: inherit; transition: color var(--dur-fast) var(--ease-out); } /* ── Foco visible: innegociable ──────────────────────────────────────────── Nunca `outline: none` sin sustituto. Regla única para todo el sitio. */ :focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } .on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--color-focus-on-dark); } /* ── Movimiento reducido: obligatorio ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Componente: acordeón FAQ único del sitio (decisión de Marc, 24/09/2026) Canónico = el de /nosotros/: filas con caja, 2 columnas desde 1200px (antes 992px; pasado a 1200 el 28/09/2026, L2-1 B12 — tablets en 1 columna), pregunta en texto normal y botón "+" a la derecha.
/ nativo, sin JS. Marcado:
Pregunta

Respuesta

Si el necesita un heading (h3) por jerarquía, va dentro y hereda. ========================================================================== */ .faq-acc { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; width: 100%; } @media (min-width: 1200px) { .faq-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .faq-acc__item { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .faq-acc__item[open] { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .faq-acc__q { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.4; letter-spacing: normal; text-transform: none; text-align: left; color: var(--color-primary); min-height: 44px; padding: 1.25rem 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; } .faq-acc__q::-webkit-details-marker { display: none; } .faq-acc__q > * { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; } .faq-acc__q::after { content: '+'; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-circle); font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--color-primary); transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .faq-acc__item[open] .faq-acc__q::after { transform: rotate(135deg); background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } /* El item recorta con overflow:hidden: el anillo de foco va hacia dentro */ .faq-acc__q:focus-visible { outline-offset: -3px; border-radius: var(--radius-lg); } .faq-acc__a { padding: 0 1.5rem 1.25rem; } .faq-acc__a p { color: var(--color-text); line-height: 1.7; margin: 0 0 0.75rem; } .faq-acc__a p:last-child { margin-bottom: 0; } /* Variantes de marcado admitidas: lista (
  • …) y respuesta de un solo párrafo (

    ). */ ul.faq-acc { list-style: none; margin: 0; padding: 0; } ul.faq-acc > li { margin: 0; padding: 0; } p.faq-acc__a { color: var(--color-text); line-height: 1.7; margin: 0; } /* Una sola columna también en escritorio (p. ej. junto a una barra lateral) */ @media (min-width: 1200px) { .faq-acc--1col { grid-template-columns: 1fr; } } /* Un heading dentro del

    no debe heredar el text-wrap: balance global */ .faq-acc__q > * { text-wrap: wrap; max-width: none; } /* Listas dentro de la respuesta (marcador en verde de marca, CORRECCIONES regla 20) */ .faq-acc__a ul, .faq-acc__a ol { margin: 0 0 1rem; padding-left: 1.5rem; } .faq-acc__a li { margin-bottom: 0.5rem; line-height: 1.7; color: var(--color-text); } .faq-acc__a li:last-child { margin-bottom: 0; } /* Viñeta: guion verde canónico (.list-dash), solo en listas sin numerar. */ .faq-acc__a ul { list-style: none; padding-left: 0; } .faq-acc__a ul > li { position: relative; padding-left: calc(10px + var(--space-xs)); } .faq-acc__a ul > li::before { content: ''; position: absolute; left: 0; top: calc(0.8em - 1px); /* respaldo si no hay unidad lh */ top: calc(0.5lh - 1px); width: 10px; height: 2px; background-color: var(--color-cta); } /* Apertura: fundido corto de la respuesta, igual en todas las páginas. Solo opacity + transform; con movimiento reducido lo anula la regla global. */ .faq-acc__item[open] .faq-acc__a { animation: faqAccIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes faqAccIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== Componente: lista con guion verde (L2-1 B11, 28/09/2026) Marcador canónico de CORRECCIONES §HTML regla 20: guion 10×2px en --color-cta, centrado en la primera línea del
  • (0.5lh). Sustituye al ✓ en círculo, al punto de 6px y al check SVG. Se añade como clase extra:
      …
    La lista local conserva su layout (gap, margin, font-size); no redefine el marcador ni el padding-left del
  • . ========================================================================== */ .list-dash { list-style: none; margin: 0; padding: 0; } .list-dash > li { position: relative; padding-left: calc(10px + var(--space-xs)); } .list-dash > li::before { content: ''; position: absolute; left: 0; top: calc(0.8em - 1px); /* respaldo si no hay unidad lh */ top: calc(0.5lh - 1px); width: 10px; height: 2px; background-color: var(--color-cta); } /* ========================================================================== NEVE (tema padre): sus variables y reglas globales (:root inline, body, h1-h6, .btn) llegan DESPUÉS de este archivo (p. ej. tras la combinación de NitroPack) y pisan tipografía y botones (Arial, botón azul). `html:root` (0,1,1) vence a `:root` (0,1,0) sin depender del orden de carga. Añadido 29/09/2026. ========================================================================== */ html:root { --bodyfontfamily: var(--font-body); --headingsfontfamily: var(--font-heading); --h1fontfamily: var(--font-heading); --h2fontfamily: var(--font-heading); --h3fontfamily: var(--font-heading); --h4fontfamily: var(--font-heading); --h5fontfamily: var(--font-heading); --h6fontfamily: var(--font-heading); --primarybtnbg: var(--color-cta); --primarybtnhoverbg: var(--color-cta); --primarybtncolor: var(--color-cta-ink); --primarybtnhovercolor: var(--color-cta-ink); --primarybtnborderradius: var(--radius-cta); } /* Flechas del carrusel de reseñas: Neve da a todo