/* ARRA — Componentes de sección. * * Estos son los estilos que consumirán los patrones de bloques. Viven en el * tema, no en preview/: la previsualización los enlaza, nunca los copia. * Ni un hex literal — todo sale de theme.json. */ @layer componentes { /* ===================================================================== NAVEGACIÓN El color de línea es la única superficie grande permitida, y solo aquí. La home genérica va en claro con el logo dorado-burdeos. ===================================================================== */ .arra-nav__enlace:hover, .arra-nav--corp .arra-nav__enlace, .arra-nav--corp .arra-nav__enlace:hover, /* ===================================================================== SECCIÓN ===================================================================== */ .arra-seccion { padding-block: var(--wp--preset--spacing--seccion); padding-inline: clamp(1.25rem, 5vw, 4rem); } .arra-seccion--carbon { background-color: var(--wp--preset--color--carbon-950); } .arra-seccion--carbon :is(h1, h2, h3, h4) { color: var(--wp--preset--color--blanco); } .arra-seccion--carbon p { color: var(--wp--preset--color--tinta-300); } .arra-cabecera { margin-block-end: var(--wp--preset--spacing--8); } .arra-cabecera--centrada { text-align: center; margin-inline: auto; } /* :is(h1,h2,h3,p) y no solo h2: en el router del artboard el titular de sección es un h1, y con la regla antigua no se centraba. */ .arra-cabecera--centrada :is(h1, h2, h3, h4, p) { margin-inline: auto; } .arra-cabecera--centrada .arra-kicker { justify-content: center; } .arra-cabecera h2 { margin-block: var(--wp--preset--spacing--3) 0; } .arra-cabecera p { margin-block-start: var(--wp--preset--spacing--4); font-size: var(--wp--preset--font-size--grande); line-height: 1.6; color: var(--wp--preset--color--tinta-500); } /* ===================================================================== HÉROE ===================================================================== */ /* ===================================================================== TARJETA DE RUTA — la doble entrada Core / Corporate ===================================================================== */ .arra-ruta:hover, /* Filete de línea: identifica la vía sin pintar la tarjeta entera. */ /* ===================================================================== TARJETA DE SERVICIO — icono circular dorado, capa firma ===================================================================== */ .arra-rejilla { display: grid; gap: var(--wp--preset--spacing--5); grid-template-columns: repeat(auto-fit, minmax(min(var(--arra-min, 15rem), 100%), 1fr)); } /* ===================================================================== CIFRA DE PRUEBA ===================================================================== */ .arra-seccion--carbon .arra-cifra__valor { color: var(--wp--preset--color--dorado-300); } .arra-seccion--carbon .arra-cifra__etiqueta { color: var(--wp--preset--color--tinta-300); } /* ===================================================================== MOCKUP — mini-interfaz dibujada. Nunca stock, nunca portátil de archivo. ===================================================================== */ /* ===================================================================== FRANJA DE PLATAFORMAS ===================================================================== */ /* ===================================================================== BOTONES ===================================================================== */ /* ===================================================================== PIE ===================================================================== */ /* ===================================================================== PAR: texto a un lado, pieza visual al otro ===================================================================== */ } @layer componentes { /* ===================================================================== NAVEGACIÓN MÓVIL Por debajo de 900 px el menú en línea desborda: se repliega tras un botón. ===================================================================== */ .arra-nav--corp .arra-nav__boton span, .arra-nav__panel a:hover, @media (width < 900px) { /* El CTA de cliente se va al panel: en la barra no cabe con el logo. */ } /* Nada debe provocar scroll lateral, a ningún ancho. */ .arra-nav, .arra-seccion, .arra-pie { max-inline-size: 100%; } } @layer componentes { /* ===================================================================== HÉROE DUAL DIAGONAL — la constante de marca de la home genérica. Dos mitades cortadas con la pendiente del motivo diagonal, cada una con su foto, su velo y su color de línea. En móvil se apilan: una diagonal a 360 px parte los titulares y deja de leerse. ===================================================================== */ /* Ken burns al acercarse: la foto respira, no salta. */ .arra-hero-dual__mitad:hover .arra-hero-dual__foto, /* Tres capas de velo: degradado de línea, viñeta y oscurecido al enfocar. Sin ellas el texto blanco no llega a AA sobre fotografía. */ .arra-hero-dual__mitad:hover .arra-hero-dual__sombra, @media (width < 860px) { } /* ===================================================================== FRANJA DE CIFRAS ===================================================================== */ /* ===================================================================== TARJETA DE SERVICIO GRANDE — filete de línea y sub-tarjetas dentro ===================================================================== */ /* ===================================================================== BLOG ===================================================================== */ .arra-articulo { display: flex; flex-direction: column; text-decoration: none; background-color: var(--wp--preset--color--neutro-200); border: 1px solid var(--wp--preset--color--neutro-300); border-radius: var(--wp--custom--radio--lg); overflow: hidden; transition: transform var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida), box-shadow var(--wp--custom--movimiento--base) var(--wp--custom--movimiento--salida); } .arra-articulo:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--sombra--media); } /* ===================================================================== MARQUEE DE PLATAFORMAS — cards claras, patrón evolve.es ===================================================================== */ .arra-marquee-plataformas .arra-marquee-track { gap: var(--wp--preset--spacing--4); padding-inline-end: var(--wp--preset--spacing--4); } /* ===================================================================== PANEL DE CUADRO DE MANDO — gráfico de barras dibujado, nunca stock ===================================================================== */ /* Icono en círculo de 64 px con borde, como en el artboard */ } @layer componentes { /* Tick blanco en círculo dorado — capa firma. Nunca viñetas de lista. */ .tick-list li { line-height: 1.5; color: var(--wp--preset--color--tinta-900); max-inline-size: 60ch; } /* Enlace activo de la navegación: dorado con filete, como en el artboard. */ .arra-nav--corp .arra-nav__enlace.is-activo, } /* ========================================================================= CORRECCIONES CONTRA EL ARTBOARD Medidas tomadas de Home Generica.dc.html, no aproximadas. ========================================================================= */ @layer componentes { :root { /* Altura real de la barra. La usan la propia barra y el cálculo del héroe, para que no puedan desajustarse: si cambia aquí, el héroe sigue llenando exactamente lo que queda de pantalla. */ --arra-nav-h: 5rem; } @media (width < 900px) { :root { --arra-nav-h: 4.25rem; } } /* Enlaces de la barra: tracking 0.17em y escala del artboard. */ /* ------------------------------------------------------------------- BOTONES — tamaños del artboard ------------------------------------------------------------------- */ /* Principal: 15px / 30px, pastilla, tracking 0.12em. */ /* Botón de la barra: 10px vertical, radio 3px, tracking 0.17em. Sale a unos 35 px de alto, por debajo de los 44 px que uso como norma en táctil. Se acepta aquí porque en la barra solo aparece en escritorio —por debajo de 900 px se va al panel del menú, donde sí mide 44— y en ratón el mínimo exigible de WCAG AA son 24 px. */ .arra-boton--linea:hover, /* Dentro de tarjeta de servicio: 14px / 22px y radio pequeño. */ /* CTA final: 16px / 30px. */ /* ------------------------------------------------------------------- HÉROE A PANTALLA COMPLETA Regla del proyecto: el panel superior ocupa lo que queda de pantalla bajo la barra. Con svh en lugar de vh, para que en móvil no lo tape la barra del navegador al aparecer y desaparecer. ------------------------------------------------------------------- */ @media (width < 860px) { /* Apilado: cada mitad ocupa media pantalla, y entre las dos siguen llenando el alto disponible. */ } } @layer componentes { /* ===================================================================== PORTADA — barra + panel superior ocupando exactamente una pantalla. Regla del proyecto: el panel de ARRA Core y ARRA Corporate se ajusta al alto de la pantalla en la que se esté ejecutando. No se resta una altura fija de barra: la barra mide lo que miden su logo y su padding, y eso cambia con el ancho. Se envuelven las dos en un contenedor de una pantalla y el panel se queda con lo que sobra. Así el ajuste es exacto en cualquier pantalla y no hay que tocar nada si mañana cambia el alto del logo. ===================================================================== */ @media (width < 860px) { /* Apilado: las dos mitades juntas siguen llenando la pantalla, pero pueden crecer si el texto lo pide. */ } } @layer componentes { /* ===================================================================== PORTADA — corrige el ajuste del panel superior. ===================================================================== Regla del proyecto: el panel de ARRA Core y ARRA Corporate se ajusta al alto de la pantalla en la que se esté ejecutando. Restar una altura fija de barra no vale: la barra mide lo que miden su logo y su padding, y eso cambia con el ancho. Con --arra-nav-h a 5rem la barra medía 105 px reales y sobraban 25 px de pantalla. Como en el artboard, la barra pasa a fija y el panel mide 100svh: una pantalla exacta, sin cuentas. svh y no vh para que en móvil la barra del navegador no se lo coma al aparecer. El envoltorio .arra-portada queda descartado: cruzaba el
y rompía el anidamiento del documento. ===================================================================== */ /* La barra flota encima, así que el contenido de cada mitad se baja para que el centrado óptico sea real y el titular no quede debajo de ella. */ .arra-hero-dual__mitad--core, @media (width < 860px) { } } @layer componentes { /* ===================================================================== BARRA FLOTANTE AL BAJAR Estaba en el artboard y la había perdido en el volcado. A partir de los 70 px de scroll la barra se separa de los bordes y se convierte en una píldora de 1180 px con sombra. Valores del artboard: navWrapPad 0 -> 14px 16px 0 navMaxW 100% -> 1180px navPad 7px 12-64px -> 6px 12px 6px 22px navRadius 0 -> 999px navShadow none -> sombra alta logoH 48-68px -> 54px Transición de 320ms, la del artboard, no la base del tema. ===================================================================== */ .arra-nav--corp.is-flotante, /* La barra flotante deja de tocar los bordes, así que el panel del menú móvil y el contenido no deben moverse por ello: la barra sigue fija. */ @media (prefers-reduced-motion: reduce) { } } /* --------------------------------------------------------------------- Globo ARRA La media esfera de puntos dorados. El lienzo lo pinta globo.js; aquí solo va la caja. El alto viaja en --arra-globo-alto para que el patrón pueda cambiarlo sin escribir un estilo en línea, que el linter prohíbe. --------------------------------------------------------------------- */ .arra-globo { position: relative; inline-size: 100%; } .arra-globo__lienzo { display: block; inline-size: 100%; block-size: var(--arra-globo-alto, 380px); } /* Sobre fondo oscuro el dorado medio luce más que el bronce. */ .arra-seccion--carbon .arra-globo { --arra-globo-color: var(--wp--preset--color--dorado-500); } /* ========================================================================= LO QUE SE TOCA CON EL DEDO MIDE 44 px ========================================================================= Medido el 19/09/2026 sobre `/corporate/` a 375 px: de los 78 elementos pulsables de la página, **27 median menos de 44 px de alto**. No todos son un problema. Los de la barra y el menú se quedan entre 32,5 y 42,6, que pasa de sobra el mínimo de 24×24 de WCAG 2.5.8 (AA) y solo se queda corto frente a los 44 de AAA y de las guías de Apple y Google. Los que sí eran un fallo son los que se quedaban **en la altura de su propia línea de texto**, sin un píxel de relleno: · el campo de la newsletter, 19 px · «Agenda una reunión», 18,1 · «Ver tecnología y método», 18,8 · el teléfono y el correo del pie, 17 · los cinco enlaces de «Enlaces de interés», 20,3 y a 12 px unos de otros POR QUÉ SE CRECE LA CAJA Y NO SE PONE UN ÁREA INVISIBLE. La otra salida es un `::after` absoluto de 44 px centrado en el enlace, que no ocupa sitio y deja la maquetación intacta. Se descartó: con los enlaces del pie a 12 px unos de otros, esas bandas **se solaparían 11,7 px**, y un blanco ambiguo donde el dedo no sabe qué va a pulsar es peor que un objetivo pequeño. Creciendo la caja el hueco es real. Cuesta unos 118 px de alto en el pie del teléfono, que es donde sobra sitio. POR QUÉ `pointer: coarse` Y NO UN ANCHO. La regla es del dedo, no de la pantalla: un móvil apaisado sigue siendo un dedo y una ventana estrecha en el escritorio sigue siendo un ratón. Así, además, **ninguna de las veinticuatro páginas se mueve un píxel en ordenador**. POR QUÉ ESTO VA FUERA DE `@layer`, como el bloque del globo que tiene justo encima. Casi toda esta hoja vive en `componentes`, pero quien declara el `display: block` de estos enlaces y el `gap: 12px` de su columna es `paginas.css`, que va SIN capa. Lo sin capa gana siempre, así que dentro de la capa esta regla no pintaría nada. Es la misma razón por la que `compat-design.css` está sin capa; ver CLAUDE.md. Y LOS SELECTORES NO NOMBRAN NINGUNA CLASE NUMERADA. `arra-pie-9` o `arra-tecnologia-reporting-5` se renumeran solas en cuanto cambia un estilo del artboard. Se buscan por lo que son: el enlace que lleva dentro la flecha del tema, el que apunta a `tel:`, el que cuelga directamente de un `
` del pie. ========================================================================= */ @media (pointer: coarse) { /* Las llamadas a la acción de texto. Las macizas ya miden 44,1 con su relleno, así que esto solo alcanza a las dos planas. */ a:has(> .arra-cta-flecha) { min-block-size: 44px; align-items: center; } /* Los enlaces sueltos del pie: los cinco de «Enlaces de interés» y, de paso, el teléfono y el correo, que también cuelgan directamente de su `
`. El logotipo no entra —lleva un `` dentro y crecerlo movería la marca— y los dos enlaces de la frase de arquitectura tampoco: van DENTRO de un párrafo, y un enlace en medio de un texto corrido está exceptuado de la regla justamente porque no se puede agrandar sin romper el renglón. Los tres enlaces legales de la última línea tampoco entran, y su exclusión va en una regla APARTE, unas líneas más abajo. Ver allí por qué no se puede hacer con un `:not()` aquí. */ footer div > a:not(:has(img)) { display: flex; align-items: center; min-block-size: 44px; } /* Y la columna de enlaces deja de separarlos: el relleno de cada uno ya es el hueco. Con el `gap` encima, el paso pasaría de 32,3 px a 56. ESTA REGLA NO SE APLICÓ NUNCA, Y EL MOTIVO NO ES LA ESPECIFICIDAD. Estaba escrita `footer div:has(> a:not(:has(img)))`, con un `:has()` DENTRO de otro `:has()`, y eso el selector no lo permite: el navegador descarta la regla entera por inválida. Comprobado en la página — `element.matches()` con ese selector lanza excepción, y con el de abajo devuelve true—. Costó un diagnóstico falso: el primer arreglo subió la especificidad a (0,1,4) con `div[class]`, razonando que `.arra-pie-8` es (0,1,0) y le ganaba. El razonamiento era correcto y el efecto, ninguno: un selector inválido no compite, no existe. Se vio porque el cliente midió con el ojo lo que este comentario daba por hecho —«el apartado de enlaces de interés tiene muchísimo espaciado»— y el paso seguía siendo 56, exactamente el número que aquí se decía evitar. Una regla que no se aplica no avisa: se queda escrita, con su comentario explicando un efecto que no ocurre. OJO, la de arriba SÍ es válida: `footer div > a:not(:has(img))` mete el `:has()` dentro de un `:not()`, que sí se permite. Lo prohibido es anidarlo dentro de otro `:has()`. Y HACÍAN FALTA LAS DOS COSAS. Con el selector ya válido el paso seguía en 56: `:has()` toma la especificidad de su argumento, así que `footer div:has(> a):not(:has(img))` es (0,0,4) —cuatro elementos y ninguna clase— y `.arra-pie-8` es (0,1,0). Una clase gana a cualquier número de elementos. El `[class]` sube el selector a (0,1,4) y es estable: esa columna siempre tiene clase, mientras que su NOMBRE se renumera en cada compilación y por eso no se puede nombrar. */ footer div[class]:has(> a):not(:has(img)) { gap: 0; } footer input { min-block-size: 44px; } /* LOS TRES ENLACES LEGALES DEL CIERRE SE QUEDAN EN LÍNEA, Y LA EXCEPCIÓN TIENE QUE SER UNA REGLA PROPIA. * * «Aviso legal», «Privacidad» y «Cookies» viven dentro de «© 2026 ARRA * Asesores · Todos los derechos reservados · …», que es un bloque de * texto corrido —el artboard lo dibuja con un `
` y no con un `

`, * que es lo único que los separa de los dos enlaces de la frase de * arquitectura—. WCAG 2.5.8 excepciona justamente el destino que va «en * una frase o en un bloque de texto». Sin esto, medido: cada uno pasaba * a 44 px, esa línea iba de 63 a 232 px y `/corporate/` —congelada— * crecía 169 px a 375. * * POR QUÉ NO SE AÑADE UN `:not(.arra-pie-legal)` ARRIBA, que es lo * primero que uno escribe. Porque `:not()` TOMA LA ESPECIFICIDAD DE SU * ARGUMENTO: el selector pasaba de (0,0,4) a (0,1,4) y con eso empezaba * a ganarle a la red de seguridad de aquí abajo, que es (0,1,2) y está * ahí para devolver el teléfono y el correo a `inline-flex`. Al volverse * `flex` —o sea, bloque—, el `
` que tienen delante abría una línea * vacía y el bloque de la dirección crecía 26,6 px, que son exactamente * los 26 px que le salían de más a `/corporate/`. Una excepción escrita * como regla aparte no toca la especificidad de nadie. * * La clase se puede nombrar porque NO es una de las numeradas: la * escribe destilar.py como constante, en `legales_en_el_pie()`. */ footer div > a.arra-pie-legal { display: inline; min-block-size: 0; } } /* LA RED DE SEGURIDAD DEL `:has()`, Y VA DESPUÉS A PROPÓSITO. * * Todo lo de arriba se apoya en `:has()`, que hoy entienden los tres * motores. Si algún día no —o en un navegador viejo—, un selector * desconocido tira la regla ENTERA, y con ella se irían el teléfono y el * correo del pie, que en un móvil son el enlace más útil de la página. * Estos dos se pueden nombrar sin `:has()`, así que se nombran, en su * propia regla y detrás, donde no la pisa nadie. Cuando `:has()` funciona * —que es siempre— esta regla solo cambia el `flex` por `inline-flex`, que * es lo que les corresponde: son una línea más de un bloque de dirección * separado con `
`, no una fila de menú. */ @media (pointer: coarse) { footer a[href^="tel:"], footer a[href^="mailto:"] { display: inline-flex; align-items: center; min-block-size: 44px; } }