/* ARRA — Capa de equivalencias con el sistema de diseño. * ========================================================================= * * POR QUÉ EXISTE ESTE ARCHIVO * * Los artboards de Claude Design traen todos los estilos en línea y usan los * nombres de variable del sistema de diseño: --fg, --corp, --gold, --r-lg, * --section-pad-y, --ease-out… * * Sin esta capa, volcar un artboard significa leer cada estilo en línea y * reescribirlo a mano como clases del tema. Eso es una traducción, no un * volcado, y en cada traducción se cuela un fallo: un padding que no coincide, * un centrado que se pierde, un estado de scroll que se olvida. * * Con esta capa, el HTML del artboard funciona casi tal cual: basta quitar el * envoltorio , resolver los {{ }} y enlazar este archivo. El volcado * deja de ser artesanía. * * theme.json sigue siendo la fuente de verdad. Aquí no se define ni un color * nuevo: solo se da el nombre viejo al token que ya existe. * * CUÁNDO SE RETIRA * Cuando una página deje de usar marcado de artboard y esté hecha con patrones * de bloques propios, ya no necesita esta capa. Es un puente, no un destino. * ========================================================================= */ :root { /* ---------------------------------------------------------------- color */ --fg: var(--wp--preset--color--tinta-900); --fg-soft: var(--wp--preset--color--tinta-500); --fg-faint: var(--wp--preset--color--tinta-300); --bg: var(--wp--preset--color--neutro-200); --surface: var(--wp--preset--color--blanco); --border: var(--wp--preset--color--neutro-400); --arra-bg-section: var(--wp--preset--color--neutro-200); --arra-bg-subtle: var(--wp--preset--color--neutro-100); --arra-surface: var(--wp--preset--color--blanco); --arra-ink: var(--wp--preset--color--tinta-900); --arra-ink-carbon: var(--wp--preset--color--carbon-950); --arra-ink-soft: var(--wp--preset--color--tinta-500); --arra-ink-faint: var(--wp--preset--color--tinta-300); --arra-line: var(--wp--preset--color--neutro-400); --arra-line-soft: var(--wp--preset--color--neutro-300); /* De qué color es el suelo de la sección en la que estás. Lo redeclara `.arra-fondo-suave` con su gris, y lo consultan las piezas que llevan fondo propio para taparse a sí mismas —el titular pegado del mazo de «Soluciones», que necesita ser opaco para que las fichas le pasen por debajo—. Antes esas piezas escribían «blanco» a pelo, y en cuanto la sección pasó a gris el blanco se vio como un rectángulo. Ver destilar.py, css_de_los_fondos() y css_de_la_pila(). */ --arra-fondo-seccion: var(--wp--preset--color--blanco); --arra-neutral-600: var(--wp--preset--color--tinta-500); /* El navy #0e1a2b del sistema no tiene equivalente entre los veinte. Se resuelve con carbón, que es el oscuro institucional aprobado. Si el navy importa como superficie propia, hay que añadirlo a la paleta. */ --arra-ink-navy: var(--wp--preset--color--carbon-950); --arra-ink-deep: var(--wp--preset--color--carbon-950); --arra-ink-warm: var(--wp--preset--color--tinta-900); /* EL VERDE DE CORE ES EL DE SU MARCA, NO EL DE SU FILETE. * * Estuvo en `verde-400`, que la paleta anota como «color de LINEA de * Core»: un verde palido pensado para un filete de 1 px. Como color de * marca fallaba por los dos lados, y los dos se miden. * * De peso: `--corp` es `burdeos-700`, con una luz de 0,0520; `verde-400` * tiene 0,2893, o sea CINCO VECES MAS CLARO. Puestas las dos tarjetas de * la portada una al lado de la otra, la de Corporate se lee maciza y la * de Core lavada. Lo vio el cliente (23/09/2026): «los colores para la * parte de Core deben ser los originales de Core, como el tono del fondo * del menu en vista movil de Core». * * Y de contraste: seis reglas de la hoja ponen `color: #ffffff` sobre * `background: var(--core)`, y son los botones de conversion de Core * -«Ver servicios», «Ver packs», «Escribenos»-. Sobre `verde-400` eso da * **3,09:1**, por debajo del 4,5:1 que pide AA para el rotulo de un * boton. No era un problema de esta seccion: lo era de todos los botones * verdes del sitio. * * `verde-900` es justo el tono que nombra el cliente -el del menu movil * de Core- y ademas el que CUADRA: 0,0433 de luz contra los 0,0520 de * `burdeos-700`, o sea el mismo peso, y el blanco encima sube a 11,25:1. * `verde-700` seria el paralelo por posicion en la escala, pero con 0,1016 * sigue siendo el doble de claro que el granate. * * `--arra-linea` de Core NO cambia: sigue en `verde-700`, que es otro * sistema -el del color de linea- y tiene su propia regla. */ --core: var(--wp--preset--color--verde-900); --core-ink: var(--wp--preset--color--verde-700); /* #c8d4bf: verde palido de fondo de tarjeta. Mapearlo a verde-500 lo dejaba 298 puntos RGB por debajo —oscuro donde debia ser claro—. Se mezcla. */ --core-tint: color-mix(in srgb, var(--wp--preset--color--verde-400) 38%, var(--wp--preset--color--blanco)); --corp: var(--wp--preset--color--burdeos-700); --corp-ink: var(--wp--preset--color--burdeos-700); --corp-deep: var(--wp--preset--color--burdeos-950); --corp-alt: var(--wp--preset--color--burdeos-900); --corp-rose: var(--wp--preset--color--burdeos-500); /* #d9b8bf: rosa palido. Mismo caso que --core-tint. */ --corp-tint: color-mix(in srgb, var(--wp--preset--color--burdeos-500) 32%, var(--wp--preset--color--blanco)); --gold: var(--wp--preset--color--dorado-500); --gold-warm: var(--wp--preset--color--dorado-500); --gold-bronze: var(--wp--preset--color--dorado-700); --gold-deep: var(--wp--preset--color--dorado-700); --gold-soft: color-mix(in srgb, var(--wp--preset--color--dorado-300) 70%, var(--wp--preset--color--blanco)); /* Los *-wash del sistema son tintes muy pálidos (#eef2ea, #f3e6e9) que no existen entre los veinte colores. Se resuelven mezclando el color de línea con el neutro claro: mismo efecto, sin ampliar la paleta. */ --core-wash: color-mix(in srgb, var(--wp--preset--color--verde-400) 12%, var(--wp--preset--color--neutro-100)); --corp-wash: color-mix(in srgb, var(--wp--preset--color--burdeos-700) 10%, var(--wp--preset--color--neutro-100)); /* #f0f0f0, que es lo que dice `design/tokens/colors.css` y lo que usa la web de referencia de ARRA. No está en la paleta de veinte colores y aproximarlo con neutro-100 (#f7f8f8) dejaba la barra más clara de lo que debe. Es el tercer color fuera de paleta, con los dos de abajo. */ --nav-light: #f0f0f0; --nav-core: var(--wp--preset--color--verde-700); /* `burdeos-700` y no el `burdeos-900` de Design: es el granate del boton «Agenda una reunion» -o sea `--corp`-, que es el que el cliente ha elegido para la barra. Los paneles de los desplegables cuelgan de ella, asi que van con ella: con tonos distintos se ven como dos piezas. OJO: el color de la BARRA no sale de aqui, lo escribe `_FLOTA_BURDEOS` en `destilar.py` como un rgba con transparencia -la barra lleva desenfoque detras y el panel no-. Si se cambia uno hay que mirar el otro. */ --nav-corp: var(--wp--preset--color--burdeos-700); /* ATENCION · dos colores del manual que la paleta de veinte no contiene. Los usa la barra clara de la home generica, y son la razon de que el boton «Area de clientes» no coincidiera con Design: --nav-ink #604646 topo calido, texto y borde del boton de la barra --nav-gold #c29535 dorado activo sobre barra clara Aproximarlos desvia 149 y 68 puntos RGB respectivamente. Mientras no se decida si entran en la paleta, se declaran con su valor real: son de la barra, no del contenido, y no los toca el editor de bloques. Decision pendiente: añadirlos como topo-700 y dorado-600, o aceptar la aproximacion y que el boton no sea exactamente el del manual. */ --nav-gold: #c29535; --nav-ink: #604646; --overlay-core: color-mix(in srgb, var(--wp--preset--color--verde-400) 55%, transparent); --overlay-corp: color-mix(in srgb, var(--wp--preset--color--burdeos-700) 55%, transparent); --overlay-dark: color-mix(in srgb, var(--wp--preset--color--tinta-900) 62%, transparent); /* ----------------------------------------------------------- tipografía */ /* Dos familias y ninguna más: Sora en titulares, Inter en texto. Chillax y Pilcrow Rounded, que Design reservaba como --font-legacy-*, quedan fuera por decisión: ni están declaradas ni hay archivo. Lo que las usaba se resolvía ya a Inter por omisión; ahora lo dice el nombre. Los rótulos en versales de la barra van en Sora, como la web anterior. */ --font-display: var(--wp--preset--font-family--titulares); --font-body: var(--wp--preset--font-family--texto); --font-sans: var(--wp--preset--font-family--texto); --font-legacy-display: var(--wp--preset--font-family--titulares); --fs-kicker: var(--wp--preset--font-size--kicker); --fs-label: var(--wp--preset--font-size--kicker); --fs-body-sm: var(--wp--preset--font-size--pequeno); --fs-body: var(--wp--preset--font-size--base); --fs-body-lg: var(--wp--preset--font-size--grande); --fs-h4: var(--wp--preset--font-size--h4); --fs-h3: var(--wp--preset--font-size--h3); --fs-h2: var(--wp--preset--font-size--h2); --fs-h1: var(--wp--preset--font-size--h1); --fs-display: var(--wp--preset--font-size--display); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-display: 500; --fw-body: 400; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-loose: 1.6; --tr-tight: var(--wp--custom--tracking--ajustado); --tr-normal: 0; --tr-wide: var(--wp--custom--tracking--ancho); --tr-xwide: var(--wp--custom--tracking--extra-ancho); /* --------------------------------------------------------------- radios */ --r-xs: var(--wp--custom--radio--xs); --r-sm: var(--wp--custom--radio--sm); --r-md: var(--wp--custom--radio--md); --r-lg: var(--wp--custom--radio--lg); --r-xl: var(--wp--custom--radio--xl); --r-2xl: var(--wp--custom--radio--xxl); --r-pill: var(--wp--custom--radio--pastilla); /* -------------------------------------------------------------- sombras */ --shadow-0: none; --shadow-1: var(--wp--custom--sombra--suave); --shadow-2: var(--wp--custom--sombra--media); --shadow-3: var(--wp--custom--sombra--alta); --shadow-badge: var(--wp--custom--sombra--insignia); /* ------------------------------------------------------------ movimiento */ --ease-out: var(--wp--custom--movimiento--salida); --ease-in-out: var(--wp--custom--movimiento--entrada-salida); --dur-fast: var(--wp--custom--movimiento--rapido); --dur-base: var(--wp--custom--movimiento--base); --dur-slow: var(--wp--custom--movimiento--lento); /* ------------------------------------------------------------- espaciado */ --s-1: var(--wp--preset--spacing--1); --s-2: var(--wp--preset--spacing--2); --s-3: var(--wp--preset--spacing--3); --s-4: var(--wp--preset--spacing--4); --s-5: var(--wp--preset--spacing--5); --s-6: var(--wp--preset--spacing--6); --s-7: var(--wp--preset--spacing--7); --s-8: var(--wp--preset--spacing--8); --s-9: var(--wp--preset--spacing--9); --s-10: var(--wp--preset--spacing--10); --s-11: var(--wp--preset--spacing--11); --s-12: var(--wp--preset--spacing--12); --section-pad-y: var(--wp--preset--spacing--seccion); --section-pad-x: var(--wp--preset--spacing--9); --content-max: var(--wp--style--global--wide-size); } /* ------------------------------------------------------------------------- Los artboards se diseñan a ancho de lienzo y no declaran min-width:0 en los hijos de sus rejillas. Por defecto un hijo de grid no puede encogerse por debajo del ancho mínimo de su contenido, así que un marquee con nowrap o una rejilla interna estiran el contenedor: en móvil eso saca scroll lateral de cientos de píxeles. Medido en la página de efectos: fichas de 1980 px en una ventana de 393. Va con :where() para especificidad cero: corrige sin pelear con nada. ------------------------------------------------------------------------- */ :where([style*="grid-template-columns"]) > * { min-inline-size: 0; } :where([style*="display: flex"]) > * { min-inline-size: 0; } /* Fotogramas que los artboards usan por nombre. Van aquí y no en motion.css porque pertenecen al vocabulario del artboard, no al del tema. */ @keyframes arra-wordroll { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-40px); } 66%, 94% { transform: translateY(-80px); } 100% { transform: translateY(-80px); } } @keyframes arra-float { from { transform: translateY(-6px); } to { transform: translateY(6px); } } @keyframes arra-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes arra-spin { to { transform: rotate(360deg); } } @keyframes arra-draw { to { stroke-dashoffset: 0; } } @keyframes arra-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes arra-fadeslot { 0% { opacity: 0; } 6%, 30% { opacity: 1; } 38%, 100% { opacity: 0; } } @keyframes arra-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } @keyframes arra-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.6); opacity: 0; } } @keyframes arra-shine { 0%, 55% { background-position: 110% 0; } 85%, 100% { background-position: -110% 0; } } @keyframes arra-slidein { from { transform: translateX(-10px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes arra-progress { 0% { inline-size: 0; } 80%, 100% { inline-size: 100%; } } @media (prefers-reduced-motion: reduce) { [style*="animation"] { animation: none !important; } } /* ------------------------------------------------------------------------- VALORES POR ELEMENTO DEL SISTEMA DE DISEÑO Los artboards dan por supuesta la hoja `styles.css` de Design, que importa tokens/typography.css y tokens/base.css. Ahí viven cosas que el marcado no repite en línea porque no hace falta: que un

sea Sora 500 con tracking negativo, que un

no tenga margen, que .arra-kicker sea dorado en mayúsculas. Enlazar aquella hoja tal cual traería también SUS colores y SUS tamaños, y pelearía con theme.json. Así que se porta solo la parte de elementos, escrita contra los tokens del tema. Antes iba acotado a `.arra-volcado`, el envoltorio del volcado, para que no alcanzara a los patrones. Ya no: los patrones SON el marcado del artboard destilado, y necesitan exactamente estos valores. Sin ellos, WordPress pone los suyos —un margen en cada

, otro peso en los

— y la pagina se desplaza unos pixeles por seccion, que acumulados se ven. Todo con :where() para especificidad cero: son valores por defecto, los pisa cualquier cosa. ------------------------------------------------------------------------- */ body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where(h1, h2) { font-family: var(--font-display); color: var(--fg); font-weight: var(--fw-display); /* 500. Sora NO va en negrita: lo dice el sistema */ letter-spacing: var(--tr-tight); line-height: var(--lh-tight); text-wrap: balance; margin: 0; } :where(h3, h4, h5) { font-family: var(--font-body); color: var(--fg); font-weight: var(--fw-regular); letter-spacing: 0; line-height: var(--lh-snug); text-wrap: balance; margin: 0; } :where(h1) { font-size: var(--fs-h1); } :where(h2) { font-size: var(--fs-h2); line-height: var(--lh-snug); } :where(h3) { font-size: var(--fs-h3); } :where(h4) { font-size: var(--fs-h4); } :where(p) { margin: 0; text-wrap: pretty; } :where(small, .caption) { font-size: var(--fs-body-sm); color: var(--fg-soft); } :where(a) { color: var(--arra-ink-navy); text-decoration-color: var(--gold); } :where(a:hover) { color: var(--gold-bronze); } /* ------------------------------------------------------------------------- .arra-kicker — 190 apariciones en los 25 artboards, ninguna con estilo en línea. Sin esta regla salen como texto corrido y la sección pierde su antetítulo: eso era lo que se veía roto en la home. OJO · ESTA VERSIÓN NO PASA WCAG AA. Es la de Design —dorado sobre claro—, y está aquí para que el volcado sea fiel. --gold (#caa971) sobre blanco da 1,9:1; el mínimo para texto pequeño es 4,5:1. El tema resuelve lo mismo en style.css con filete dorado y texto en burdeos-900 (11,76:1), que sí pasa. O sea: el volcado enseña lo que diseñó Design; el patrón usará el accesible. Decisión tuya si el antetítulo definitivo lleva filete o no. ------------------------------------------------------------------------- */ .arra-kicker { font-family: var(--font-body); font-size: var(--fs-kicker); font-weight: var(--fw-regular); letter-spacing: var(--tr-xwide); text-transform: uppercase; color: var(--gold); display: inline-block; } .arra-label { font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--tr-wide); text-transform: uppercase; } .arra-accent-core { color: var(--core); } .arra-accent-corp { color: var(--corp); } /* El parche de min-inline-size de más arriba deja encoger a los hijos de cualquier flex. En la cinta de logos eso es justo lo que no queremos: el track va en nowrap y sus fichas tienen min-width propio. */ :where(.arra-marquee-track) > * { min-inline-size: auto; } /* ------------------------------------------------------------------------- ENVOLTORIOS DEL NUCLEO WordPress envuelve la pagina en `.wp-site-blocks` y separa sus hijos —cabecera, main, pie— con el `blockGap` del tema: 24px entre cada uno. El diseno de Design no tiene esa separacion: las secciones van pegadas y cada una pone su propio espacio por dentro. Esos 24px desplazaban la pagina entera 55px hacia abajo respecto al artboard. Va sin capa porque los estilos globales de WordPress tambien van sin capa, y dentro de una capa esto perderia. ------------------------------------------------------------------------- */ .wp-site-blocks { margin-block-start: 0; } .wp-site-blocks > * { margin-block-start: 0; } /* El
no aporta nada al diseno: es el envoltorio semantico que pide la plantilla. Que no cree contexto de bloque ni espacios propios. */ .wp-site-blocks > main { margin-block: 0; padding: 0; } /* Los iconos de trazo del artboard pintaban en blanco con un atributo del SVG. Ese blanco pasa a salir de la paleta. */ .arra-tinta-clara { color: var(--wp--preset--color--blanco); } /* El enlace «Saltar al contenido» que WordPress pone el primero. Es de accesibilidad y tiene que estar, pero si el tema no lo esconde ocupa una linea y empuja la pagina entera 23px hacia abajo. Se esconde sin quitarlo del arbol, para que siga funcionando con el teclado. */ .screen-reader-text:not(:focus):not(:active) { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 100000; inline-size: auto; block-size: auto; padding: 0.75rem 1.25rem; background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--tinta-900); border-radius: var(--wp--custom--radio--sm); box-shadow: var(--wp--custom--sombra--alta); clip-path: none; } /* Las imagenes llevan width y height en el atributo para que el navegador reserve su hueco antes de descargarlas. Pero el atributo `width` tambien fija el ancho usado, y aqui la altura la manda el diseno: con las dos cosas a la vez el logo salia a 340 px en vez de a 96. Devolviendo el ancho a automatico, el navegador lo calcula de la proporcion que le dan los atributos, que es justo lo que queremos: hueco reservado y medida correcta. */ img[width][height] { inline-size: auto; } /* Dentro del contenido, WordPress separa cada bloque con el `blockGap` del tema: 24 px entre uno y el siguiente. Las secciones destiladas de los artboards traen su propio espacio por dentro —cada una con su padding de sección— asi que ese hueco extra las desplaza. Con trece bloques por pagina, se acumulaba. */ .entry-content > *, .wp-block-post-content > * { margin-block-start: 0; }