@layer tokens; /* ═══════════════════════════════════════════════════════════════ CAPA 1: TOKENS Design tokens de CLM Asesores. ÚNICO archivo con valores literales de color, fuente y medida. Nomenclatura en inglés (convención Xavi 2026-10-15). ─────────────────────────────────────────────────────────── */ :root { /* ── Color ──────────────────────────────────────────── Fuente: style_dynamic.css + stylesheet.min.css de Bridge. Todos los valores están «confirmado» salvo que se indique lo contrario. → tokens.md sección 1 y 5 para detalles de evidencia. */ --color-primary: #065274; --color-accent: #005071; --color-heading: #6e6f6f; --color-text: #3d3d3d; --color-body: #818181; --color-text-secondary: #616161; /* texto secundario con contraste AA (≈6,2:1 sobre blanco; mismo valor que --color-topbar-text). Sustituye a --color-body (#818181, 3,9:1) en la fecha y el extracto de .post-card */ --color-border: #e5e5e5; --color-surface-alt: #efefef; --color-submenu: #a3a3a3; --color-submenu-hover: #686868; --color-surface: #ffffff; --color-nav-link: #9d9d9d; --color-nav-active: #303030; --color-link: #303030; --color-link-hover: #005071; /* = --color-accent */ --color-footer-text: #818181; --color-topbar-link: #777; --color-topbar-text: #616161; /* gris de la topbar en MÓVIL: contraste AA (≈5.4:1 sobre --color-surface-alt; ≈6.2:1 sobre blanco). Sustituye a --color-body (#818181, 3.9:1) solo en el breakpoint móvil */ --color-footer-link: #ffffff; /* nuevo: corrige contraste AA del pie (P9) */ --color-inverse: #ffffff; /* blanco para texto/borde sobre fondos primarios (botón inverse, aviso de cookies) */ /* ── Tipografía ─────────────────────────────────────── Fuente: stylesheet.min.css de Bridge (sección 2 de tokens.md). Los valores «supuesto» llevan comentario. ESCALA FLUIDA (ITEM 7, Xavi 2026-10-15): los tamaños de texto se expresan con clamp() interpolando entre 390px y 1440px de viewport: clamp( MIN , calc( MIN + (MAX - MIN) * ((100vw - 390px) / 1050px)) , MAX ) MAX = valor actual del token (tamaño medido en escritorio). MIN = tamaño real de producción (clmasesores.com) a 390px; nunca menor. Medición con Playwright (2026-10-15) + tokens.md §2: la tipografía de producción NO se reduce en móvil, así que MIN == MAX en casi toda la escala y el clamp queda constante (mismo valor que hoy). Única excepción: el título de página (producción 17px → token 24px, P11). NOTA: El respaldo original era «sans-serif» (error de Bridge); se adopta la pila serif completa (aprobada con P1–P12). */ --font-base: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; --body-font-size: clamp(14px, 14px, 14px); /* min == max: producción móvil = 14px = escritorio */ --body-line-height: 26px; --body-font-weight: 400; --h1-font-size: clamp(30px, 30px, 30px); /* min == max: producción no reduce h1 en móvil */ --h1-line-height: 1.25; --h1-font-weight: 700; /* supuesto: no declarado en Bridge; cae a bold */ --h2-font-size: clamp(24px, 24px, 24px); /* min == max: producción móvil = 24px */ --h2-line-height: 1.384615384615385; --h2-text-transform: uppercase; --h2-letter-spacing: 1px; --h2-font-weight: 600; --h3-font-size: clamp(17px, 17px, 17px); /* min == max: producción móvil = 17px */ --h3-line-height: 1.304347826086957; --h3-text-transform: uppercase; --h3-letter-spacing: 1px; --h3-font-weight: 600; /* Encabezados del contenido de página (.page-content__body), capa de componentes. Jerarquía pedida por Xavi (2026-10-16): H2 y H3 del contenido en --color-primary; el H2 va en MAYÚSCULAS con letter-spacing (los hereda de la escala general h2) y el H3 SIN mayúsculas. Valores FIJOS (min == max: mismo tamaño en móvil y escritorio) para que la jerarquía se mantenga en todo el rango: H1 de la banda 22px (en escritorio; fluido 20→22px, ver --page-title-band-font-size) > H2 19px > H3 16px > cuerpo 14px (--body-font-size). El H3 queda SIEMPRE por encima del cuerpo. clamp() solo aquí (1-tokens.css). */ --content-h2-font-size: clamp(19px, 19px, 19px); --content-h3-font-size: clamp(16px, 16px, 16px); --h4-font-size: clamp(19px, 19px, 19px); /* min == max: producción móvil = 19px */ --h4-line-height: 1.375; --h4-font-weight: 400; --h5-font-size: clamp(15px, 15px, 15px); /* min == max: producción no reduce h5 en móvil */ --h5-line-height: 1.571428571428571; --h5-text-transform: uppercase; --h5-letter-spacing: 1px; --h5-font-weight: 600; --h6-font-size: clamp(13px, 13px, 13px); /* min == max: producción móvil = 13px */ --h6-line-height: 1.538461538461538; --h6-text-transform: uppercase; --h6-letter-spacing: 1px; --h6-font-weight: 600; --menu-font-size: clamp(13px, 13px, 13px); /* min == max: producción móvil = 13px */ --menu-line-height: 92px; --menu-text-transform: uppercase; --menu-letter-spacing: 1px; --menu-font-weight: 600; --topbar-font-size: 13px; --topbar-line-height: 33px; --page-title-font-size: clamp(20px, calc(20px + (24px - 20px) * ((100vw - 390px) / 1050px)), 24px); /* FLUIDO 20→24: MIN = 20px (> 17px h3, P11); MAX = 24px del token. No baja de 20px. */ --page-title-line-height: 1.384615384615385; /* = interlineado de h2, coherente con el nuevo tamaño */ --page-title-text-transform: uppercase; --page-title-letter-spacing: 1.5px; /* 1px → 1.5px (+0.5px): alivia la densidad de las mayúsculas del título de banda */ --page-title-font-weight: 500; /* 600 → 500: la pila serif (Palatino/Georgia) solo tiene 400/700, así que 500 rinde como regular y las mayúsculas pesan menos */ /* Banda del título de página (.section--band). El H1 de la banda AHORA escala DE VERDAD con el ancho (antes era constante, 22px en todo el rango): ≈20px en móvil y 22px desde ≈1000px (preferido 16px + 0.6vw, acotado a [20px, 22px]). El mínimo sube a 20px para que el H1 de la franja NUNCA quede por debajo del H2 del contenido (19px, --content-h2-font-size) en ningún ancho: 20px ≥ 19px. En px, NO en rem (el `html` mide 14px, así que 1rem ≠ 16px). El aire vertical lo aporta --section-band-padding-block. clamp() solo aquí (1-tokens.css). */ --page-title-band-font-size: clamp(20px, calc(16px + 0.6vw), 22px); /* Padding vertical de la banda: aire reducido en móvil (8px, antes 11px) y el MISMO cierre de escritorio (16px a 1440px). */ --section-band-padding-block: clamp(8px, calc(8px + (16px - 8px) * ((100vw - 390px) / 1050px)), 16px); /* Cabecera de la ENTRADA (.entry-header, single.php). Sustituye la franja azul del título (punto 4 de la mejora 2026-10-18): fondo blanco, alineada a la COLUMNA DE TEXTO del artículo (--measure) y texto a la izquierda. Contiene etiqueta de categoría, título, entradilla opcional (extracto manual) y fecha completa con año. El título abandona las mayúsculas CSS (formato frase) y la escala de banda: ≈26px en móvil (26–28px en todo el rango móvil) y hasta 32px en escritorio, con el MISMO clamp 390→1440px que el resto de la escala. Interlineado y grosor del título reutilizan --h1-* (700). La entradilla queda «algo mayor que el cuerpo» (14px): 16px. clamp() solo aquí (1-tokens.css). */ --entry-title-font-size: clamp(26px, calc(26px + (32px - 26px) * ((100vw - 390px) / 1050px)), 32px); --entry-category-font-size: 12px; --entry-category-line-height: 1.4; --entry-category-letter-spacing: 1.5px; --entry-category-font-weight: 600; --entry-subtitle-font-size: 16px; --entry-subtitle-line-height: 1.5; --entry-date-font-size: 13px; --entry-date-line-height: 1.4; /* Tarjeta de entrada del listado y de los archivos (.post-card). Cada entrada va en UNA sola columna: fecha (con año) → título → extracto. El extracto se acota con line-clamp (3 líneas en móvil, 2 en escritorio) y el aire vertical entre entradas se reduce a --space-2 (antes --space-3), conservando el filete fino --color-border. El color de fecha y extracto usa --color-text-secondary (AA). */ --post-card-padding-block: var(--space-2); --post-card-meta-gap: var(--space-1); --post-card-meta-margin-bottom: var(--space-1); --post-card-excerpt-lines: 3; --post-card-excerpt-lines-desktop: 2; /* Botón reutilizable (.button). Tipografía = la de las etiquetas del menú (mayúsculas, espaciado y grosor del menú); el TAMAÑO se deriva del token del menú (--menu-font-size), que es el mínimo admitido («el del menú o algo mayor»). El resto son medidas fijas del criterio visual de Xavi (2026-10-16): padding 12px 28px y borde de 1px. La flecha → la aporta el ::after del componente y se desplaza --button-arrow-shift a la derecha en hover/foco. */ --button-font-size: var(--menu-font-size); --button-line-height: 1.2; --button-text-transform: uppercase; --button-letter-spacing: var(--menu-letter-spacing); --button-font-weight: var(--menu-font-weight); --button-padding-y: 12px; --button-padding-x: 28px; --button-border-width: 1px; --button-arrow-shift: 4px; /* Modificador .button--small (botón «Descarga» del bloque Archivo): menos padding que .button y letra más pequeña, conservando padding horizontal suficiente para que el objetivo sea cómodo. */ --button-small-font-size: 12px; --button-small-padding-y: 8px; --button-small-padding-x: 20px; /* Tarjeta de descarga del adjunto PDF (punto 6, 2026-10-18). Sustituye el visor del bloque Archivo (core/file) por una tarjeta con icono, título, tamaño y botón «Descargar PDF». El icono es un documento azul de identidad con la etiqueta PDF en blanco; sus medidas viven aquí porque son valores literales. El resto reutiliza --space-*, --radius, --border-width y los tokens tipográficos del contenido. */ --download-card-icon-size: 48px; --download-card-icon-label-size: 11px; /* Aviso de cookies (plugin Cookie Notice). Sus botones llevan la clase `button` (option `css_class`), así que heredan el componente; este par de tokens conserva su aspecto anterior (borde de 2px y padding compacto) sin acoplar el plugin al diseño del componente .button. */ --cookie-button-border-width: 2px; /* Paginación del listado y de los archivos (rediseño 2026-10-19). Escritorio: números como texto primario sin caja, con área clicable ≥44×44px (WCAG 2.5.5), página actual en bloque primario y pasos «← Anteriores» / «Siguientes →» como enlaces de texto. Móvil: una sola línea con los pasos a los extremos. El aire vertical separa la paginación de las tarjetas y, sobre todo, del pie (nunca pegada a la franja azul). */ --pagination-number-size: 44px; --pagination-font-size: 16px; --pagination-step-font-size: 14px; --pagination-mobile-font-size: 13px; --pagination-gap: var(--space-1); --pagination-margin-top: 48px; --pagination-margin-bottom: 64px; --pagination-mobile-margin-top: 32px; --pagination-mobile-margin-bottom: 40px; /* ── Medidas ────────────────────────────────────────── Fuente: style_dynamic.css + stylesheet.min.css (tokens.md §3). */ --header-height: 92px; --header-height-scroll: 40px; --logo-height-fixed: 46px; --content-width: 1100px; --header-inner-width: 1150px; /* Gutter lateral GLOBAL. Margen lateral único y compartido por TODOS los contenedores principales (topbar, cabecera, bandas de título, secciones de contenido y pie): sustituye los paddings laterales sueltos por sección (antes --space-1/--space-2 dentro de la capa de layout). Comportamiento: · móvil/tablet (≤768px): 24px; y 20px por debajo de 400px de ancho; · a partir de tablet/escritorio (>768px): se conserva el eje actual (--space-2, 15→20px). Los literales 20/24px y las media queries viven AQUÍ (1-tokens.css es el único archivo con valores literales de medida). Supersede al antiguo --header-side-padding (45px, `.header_bottom{padding:0 45px}` de Bridge), que no se usaba en el tema. */ --gutter: var(--space-2); --topbar-height: 33px; --topbar-border-width: 1px; --map-height: 300px; /* Mapa de la página de contacto. Corregido en Fase 3: la regla heredada .google_map es 450px, pero /contacto/ en producción NO usa esa regla (widget VC sin clase vc_map_responsive) y su recuadro real mide 300px de alto (medido con Playwright a 1440 y 390). Ver page-contacto.php. */ /* Slider de portada (M5): franja de imagen FULL-BLEED (100 % de ventana, no limitada al eje) con ALTURA FIJA de 300px (decisión de Xavi 2026-10-16, sin clamp). Las imágenes se recortan con object-fit: cover. */ --slider-height: 300px; /* Autoplay del slider (M5): fundido (crossfade) de 1s cada 6s, en bucle. slider.js lee ambos tokens; el intervalo y la duración salen de tokens. */ --slider-fade-duration: 1s; --slider-interval: 6s; /* Banda de texto opcional sobre el slide (solo si el slide tiene texto): azul primario con alfa (identidad) y texto blanco. */ --slider-overlay-bg: rgba(6, 82, 116, 0.78); /* = --color-primary con alfa */ --slider-overlay-color: #ffffff; --member-photo-width: 300px; --member-photo-height: 400px; --contact-image-width: 1130px; --contact-image-height: 550px; /* Bloque de datos de la página de contacto (punto 7, 2026-10-18): cada dato es una pareja «etiqueta pequeña + valor» con un icono primario delante. El hueco DENTRO de la pareja (etiqueta↔valor) es PEQUEÑO (--contact-data-item-gap, «pegados») y el hueco ENTRE parejas es MAYOR (--contact-data-row-gap), de modo que cada pareja se lee como un grupo. En escritorio el bloque pasa a dos columnas. El color no añade tokens: el valor usa --color-text (AA) y el icono, --color-primary. */ --contact-data-icon-size: 18px; --contact-data-icon-gap: var(--space-2); --contact-data-item-gap: 2px; --contact-data-row-gap: var(--space-2); --contact-data-label-font-size: 11px; --contact-data-label-line-height: 1.2; --contact-data-value-line-height: 1.35; /* Logos de ayudas FEDER/XPANDE (portada). Fluido para que los cuatro quepan en una sola fila ya en 390px sin desbordar. */ --grant-logo-size: clamp(80px, calc(80px + (110px - 80px) * ((100vw - 390px) / 1050px)), 110px); --radius: 4px; --border-width: 1px; /* ── Escala de espaciado ────────────────────────────── Escala única derivada de los márgenes reales (10/20/30/50/70). Sustituye el padding de párrafo heredado (--padding-parrafo = 30px → --space-3) y los márgenes en línea del editor antiguo. ESCALA FLUIDA (ITEM 7): mismo clamp que la tipografía. MAX = valor de escritorio (= token original). MIN = mínimo móvil sensato ≈75 % del máximo (≈70–80 %, Xavi 2026-10-15); queda por encima de producción, que no reduce estos espaciados. Los @media siguen con literales en px (no var() ni clamp). --space-0 = 0: extremo de la escala, para listas compactas sin separación entre filas (página de contacto, Xavi 2026-10-16). */ --space-0: 0; --space-1: clamp(8px, calc(8px + (10px - 8px) * ((100vw - 390px) / 1050px)), 10px); --space-2: clamp(15px, calc(15px + (20px - 15px) * ((100vw - 390px) / 1050px)), 20px); --space-3: clamp(23px, calc(23px + (30px - 23px) * ((100vw - 390px) / 1050px)), 30px); --space-4: clamp(38px, calc(38px + (50px - 38px) * ((100vw - 390px) / 1050px)), 50px); --space-5: clamp(53px, calc(53px + (70px - 53px) * ((100vw - 390px) / 1050px)), 70px); /* ── Medidas de composición ─────────────────────────── Respaldan las mejoras P1–P12 (aprobadas, Xavi 2026-10-15). */ --measure: 800px; /* medida de línea legible (P12); columna centrada, densidad media-alta */ /* Logo de firma del contenido (P5, 2026-10-18): las circulares firman con el logo de CLM incrustado en el cuerpo. Se normaliza su ancho (~170px) para que no se vea enorme; el alto se deriva de la proporción natural (`height:auto`). Vive aquí por ser una medida literal de imagen. */ --content-signature-logo-width: 170px; --menu-gap: clamp(16px, calc(2.727vw - 11.27px), 28px); /* separación uniforme del menú (P3) */ --header-height-mobile: 64px; /* cabecera en móvil (P8) */ --logo-height-mobile: 80px; /* logo en móvil (~80px como producción, separado de header-height) */ /* Logo en MÓVIL (mejora 2026-10-18, punto 3; punto 2: 215→195px): ancho máximo acotado (≈195px) para liberar la fila, donde ahora conviven hamburguesa (izq.), logo (centro óptico) y selector de idioma (der.). El alto se deriva de la proporción natural (327×92) gracias a `width:auto; height:auto`; nunca se deforma. En escritorio el logo recupera su tamaño completo (327×92) por el override del bloque ≥1000px. */ --logo-max-width-mobile: 195px; /* Aire vertical de la cabecera en MÓVIL (mejora 2026-10-18, punto 3): separa el logo de la topbar por arriba y de la franja/título de página por abajo. Solo aplica al breakpoint móvil del tema (≤999.98px). */ --header-padding-block-mobile: 14px; /* Cabecera de ESCRITORIO (mejora 2026-10-19): logo más pequeño y aire. El logo abandona su tamaño natural (327×92) y su ancho se acota a --logo-max-width-desktop (260px); el alto se DERIVA de la proporción natural (≈73px, sin deformar). La fila de marca respira por arriba (--header-padding-top-desktop, 24px desde la línea de la topbar) y el menú queda equilibrado con el MISMO aire arriba (logo↔menú) y abajo (menú↔borde inferior de la cabecera) mediante --header-nav-padding-block-desktop (18px). --logo-height-desktop es el alto nominal del logo (≈73px) y de la fila de marca: lo comparten el mínimo de `.header__primary` y el alto del selector de idioma, de modo que este queda centrado con el logo (no con el borde superior). Solo aplican en ≥1000px; el móvil no cambia. */ --logo-max-width-desktop: 260px; --logo-height-desktop: 73px; --header-padding-top-desktop: 24px; --header-nav-padding-block-desktop: 18px; /* Selector de idioma compacto en la cabecera MÓVIL (punto 2, 2026-10-18): botón con el código del idioma actual («ES») + chevron que despliega los otros tres códigos, y fila «ES · EN · PT · FR» del panel del menú. `--lang-switcher-min-size` es el lado mínimo del botón y de cada opción (área táctil ≥44px, WCAG 2.5.5); el resto de medidas usa --space-*. */ --lang-switcher-min-size: 44px; --topbar-line-height-mobile: 22px; /* barra superior compacta en móvil (ajuste Xavi, pre-Fase 3) */ /* Topbar en MÓVIL (mejora 2026-10-18): barra compacta (≈80px) útil con los teléfonos en dos columnas, la dirección en una línea y el email en icono. Se aplica al MISMO corte que la cabecera móvil (≤999,98px; escritorio en ≥1000px) para que en 769–999px no convivan topbar de escritorio y cabecera móvil. En escritorio la topbar no cambia. */ --topbar-mobile-padding-block: 8px; /* aire vertical interno de la barra (compacto y uniforme) */ --topbar-phone-column-gap: 8px; /* separación entre las dos columnas de teléfono */ --topbar-phone-label-font-size: 11px; /* etiqueta corta («Económica»/«Legal»), menor peso */ --topbar-phone-label-line-height: 1.15; --topbar-phone-number-font-size: 15px; /* número con MÁS peso visual que la etiqueta */ --topbar-phone-number-line-height: 1.2; --topbar-phone-number-font-weight: 700; --topbar-address-font-size: 12px; /* dirección en una línea, pequeña y centrada (12px: legible sin romper la línea a 360px) */ --topbar-address-line-height: 1.35; --topbar-email-icon-size: 22px; /* sobre del email (SVG de trazo = currentColor), algo mayor para leerse como botón */ --topbar-mobile-row-gap: 2px; /* hueco entre la fila de teléfonos y la dirección */ --topbar-touch-target-min: 44px; /* área táctil mínima del enlace tel: (WCAG 2.5.5) */ /* ── Foco e interacción ─────────────────────────────── El contrato (§8) fija el foco con el color primario y las transiciones de estado con duraciones tokenizadas (§10). */ --focus-outline-width: 2px; --focus-outline-offset: 2px; --transition-duration: 0.2s; --transition-easing: ease; /* ── Textos auxiliares y apilamiento ─────────────────── */ --caption-font-size: 12px; /* Escala única de z-index (de abajo arriba). Todo componente que necesite apilarse usa estos tokens; no se escriben valores sueltos fuera de aquí. El salto entre niveles deja hueco para estados intermedios. content — contenido posicionado (slider, tarjetas, figuras); header — cabecera sticky de escritorio; overlay — avisos fijos sobre el contenido (cookies); menu — panel de navegación móvil abierto (por encima de todo); modal — diálogos modales (reservado). El panel del menú NO puede quedar dentro de un contexto de apilamiento creado por un ancestro con z-index: participa del contexto raíz para superar al hero/slider de la portada. */ --z-content: 1; --z-header: 100; --z-overlay: 200; --z-menu: 300; --z-modal: 400; /* ── Icono hamburguesa (menú móvil) ──────────────────── */ --hamburger-width: 26px; --hamburger-bar-height: 2px; --hamburger-line-offset: 8px; /* ── Breakpoints (mobile-first) ─────────────────────── Fuente: responsive.min.css + stylesheet.min.css de Bridge. Bridge no es mobile-first; estos valores se reutilizan como cortes para el nuevo tema. */ --bp-desktop: 1000px; /* valor medido en Bridge (tokens.md §4); con la cabecera de dos filas el menú ya no compite con el logo, así que se recupera el corte real */ --bp-tablet: 768px; --bp-mobile: 480px; --bp-large: 1200px; /* ── Tokens legacy (Fase 3) ─────────────────────────── Espaciados en porcentaje heredados del editor antiguo (Visual Composer) en portada y equipo. No encajan en la escala px --space-*; se conservan con nombre en inglés y COMENTADOS hasta rehacer esas piezas en Fase 3. --front-page-inset-25: 25%; --front-page-inset-12: 12%; --front-page-inset-10: 10%; ─────────────────────────────────────────────────────────── */ } /* ── Gutter global en móvil/tablet ──────────────────────────── --gutter pasa a 24px hasta el breakpoint de tablet (≤768px) y a 20px por debajo de 400px de ancho. Literal de 768px = token --bp-tablet; los media queries no admiten var(). Los valores viven aquí (único archivo de medida). */ @media (max-width: 768px) { :root { --gutter: 24px; } } @media (max-width: 399.98px) { :root { --gutter: 20px; } }