/* ============================================================================ COLOR · las decisiones de la maqueta v1.2, traídas al tema ---------------------------------------------------------------------------- ⚠️ TODO ESTO VIVÍA EN maqueta/v1.2/v1.2.css, QUE NO SE CARGA EN WORDPRESS. Las páginas convertidas desde la maqueta llevan `cmp--rosa`, `cmp--lima` y `cmp--naranja`, y en WordPress esas clases no tenían ni una regla: la sección rosa de /psicologia/adultos/ salía sin fondo. Y la tinta del texto seguía en el casi negro donde la maqueta ya la había pasado al azul oscuro. Decisión del 2026-09-09: la v1.2 es el diseño. Aquí van, copiadas tal cual con sus notas, las secciones 1, 7, 9, 10, 11, 13 y 14 de aquella hoja. Se copian con un script, no a mano, para que digan lo mismo; si una regla cambia en la maqueta, hay que volver a copiarla. ⚠️ AFECTA TAMBIÉN A LA PORTADA: la sección 13 cambia la tinta de `.cmp` en todo el sitio. Es lo acordado. ========================================================================== */ /* ---------------------------------------------------------------------------- 1 · FONDOS DE SECCIÓN ---------------------------------------------------------------------------- La librería trae cuatro: clear, surface, surface-alt y primary. Faltan los acentos, que son los que la portada usa para marcar el ritmo. Cada uno declara TAMBIÉN su color de texto. Un fondo sin color de texto es media regla: hereda el azul de marca y sobre naranja o azul no se lee. ------------------------------------------------------------------------- */ .cmp--lima { background-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--on-secondary); } .cmp--rosa { background-color: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--contrast); } /* ⚠️ EL TEXTO DEL NARANJA VA EN TINTA OSCURA, NO EN CREMA. Medido con la fórmula de contraste de la WCAG sobre los colores reales del tema: crema (#f2f2e8) sobre naranja (#f06a37) = 2,70 ← ilegible tinta (#222f35) sobre naranja = 4,42 ← lo mejor que da la paleta 4,42 sigue por debajo del 4,5 que pide la AA para texto normal, aunque cumple de sobra el 3,0 del texto grande. O sea: el naranja sirve para un hero o un titular, y para un párrafo largo se queda corto por un pelo. Si se quiere usar en texto corrido, el naranja tiene que oscurecerse un punto. Es decisión de diseño, no de código, y por eso queda escrito aquí y no arreglado a la brava. */ .cmp--naranja { background-color: var(--wp--preset--color--accent-warm); color: var(--wp--preset--color--contrast); } .cmp--crema { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } /* Los titulares y el texto de dentro heredan. Se declara en los ELEMENTOS y no solo en la sección porque .cmp fija el azul de marca a casi todo, y un color heredado del antepasado pierde contra esa regla. Misma convención que usa cds/pillars.css para «por qué confiar». */ .cmp--primary :is(h1, h2, h3, h4, p, li, dt, dd) { color: var(--wp--preset--color--on-primary); } .cmp--naranja :is(h1, h2, h3, h4, p, li, dt, dd) { color: var(--wp--preset--color--contrast); } .cmp--lima :is(h1, h2, h3, h4, p, li, dt, dd) { color: var(--wp--preset--color--on-secondary); } /* ---------------------------------------------------------------------------- 7 · NINGÚN TITULAR MÁS PEQUEÑO QUE SU PROPIO TEXTO ---------------------------------------------------------------------------- Regla del proyecto: un h2 o un h3 nunca puede medir menos —ni lo mismo— que el párrafo que encabeza. Si mide lo mismo deja de leerse como titular, y con la display, que tiene menos altura de x que la de texto, encima parece más pequeño todavía. Fue lo que pasó en «Solicita tu primera cita»: 18 px de titular sobre 18 px de párrafo. La causa de fondo estaba en tokens.css —los cinco tokens con guion— y se arregló allí. Aquí queda el único caso que no era un token roto sino una decisión de la librería: .c-accordion__group-title es un h2 con tratamiento de antetítulo: 17 px en versalita. Por debajo del párrafo de 18 px. Se sube un peldaño y conserva la versalita, que es lo que le da el papel de rótulo de grupo. ⚠️ Va aquí y no en componentes.css: esa hoja es entrega de diseño y se vuelve a recibir actualizada, así que lo que se escriba dentro se pierde. ------------------------------------------------------------------------- */ .c-accordion__group-title { font-size: var(--wp--preset--font-size--large); } /* ---------------------------------------------------------------------------- 9 · HERO EN LOS CUATRO FONDOS · crema · azul · naranja · lima ---------------------------------------------------------------------------- El hero de cada página interior lleva ahora uno de los cuatro fondos, para poder compararlos. Pintar el fondo no basta: hay que repintar lo que va encima o algo desaparece. Medido antes de escribir esto, sobre psicologia.html: fondo titular botón fantasma migas crema 4,79 4,79 4,79 azul 4,79 1,00 ← 4,79 naranja 2,70 ← 1,78 ← 1,78 ← lima 6,31 3,99 ← 3,99 ← El 1,00 del azul es literal: el botón se pintaba del mismo azul del fondo. La librería trae `.cmp.cmp--primary .c-btn--ghost` para el caso azul, pero en la maqueta NO gana: comprobado inyectando la misma regla al final del y viendo que el color no se movía. Cuál de las dos gana en el navegador no lo he podido determinar; lo que sí está medido es que el resultado era ilegible. Por eso aquí se escribe con (0,4,0) —`.c-btn.c-btn--ghost`— y esta hoja carga la última, así que el resultado no depende de resolver aquel misterio. El patrón es el mismo en los tres colores: lo de encima hereda el color del texto de la sección, y al pasar el ratón se invierten fondo y tinta. ------------------------------------------------------------------------- */ /* Enlaces de texto: heredan y se subrayan. Sin subrayado, un enlace del mismo color que el párrafo deja de ser un enlace. */ .cmp.cmp--primary a:not(.c-btn, .wp-block-button__link, .c-link, .c-chip), .cmp.cmp--naranja a:not(.c-btn, .wp-block-button__link, .c-link, .c-chip), .cmp.cmp--lima a:not(.c-btn, .wp-block-button__link, .c-link, .c-chip) { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } /* …salvo dentro de una tarjeta clara, que tiene su propio fondo. */ .cmp.cmp--primary :is(.c-card, .c-post, .c-form--card) a:not(.c-btn, .wp-block-button__link), .cmp.cmp--naranja :is(.c-card, .c-post, .c-form--card) a:not(.c-btn, .wp-block-button__link), .cmp.cmp--lima :is(.c-card, .c-post, .c-form--card) a:not(.c-btn, .wp-block-button__link) { color: var(--wp--preset--color--primary); } /* Botón fantasma: contorno y letra en el color del texto de la sección. * * ⚠️ CON EL COLOR ESCRITO, NO CON `inherit`. Y ADEMÁS SIN VERIFICAR. * * Aquí me quedé sin instrumento. Al medir este botón, `getComputedStyle` devolvía * SIEMPRE el azul de marca: con la regla de la librería, con la mía, inyectando * la misma regla con !important al final del , y hasta poniendo el color * como estilo en línea con !important sobre el propio elemento. Un estilo en * línea con !important que no cambia el valor calculado no es CSS: es que la * medida está congelada. El control lo confirma —la misma inyección SÍ cambia * .c-ihero__title— o sea que el aparato falla en este elemento y no en general. * * Conclusión honesta: no sé de qué color sale este botón sobre fondo de color. * Lo que sí sé es que la librería lo pinta del azul de marca por defecto, y que * un botón azul sobre el hero azul sería invisible. Estas reglas escriben el * color a mano, con la especificidad más alta de la hoja que carga la última, * que es lo máximo que se puede hacer sin poder mirar. * * HAY QUE MIRARLO CON LOS OJOS antes de dar por buena ninguna página de color. */ .cmp.cmp--primary .c-btn.c-btn--ghost { color: var(--wp--preset--color--on-primary); border-color: var(--wp--preset--color--on-primary); background-color: transparent; text-decoration: none; } .cmp.cmp--naranja .c-btn.c-btn--ghost { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); background-color: transparent; text-decoration: none; } .cmp.cmp--lima .c-btn.c-btn--ghost { color: var(--wp--preset--color--on-secondary); border-color: var(--wp--preset--color--on-secondary); background-color: transparent; text-decoration: none; } .cmp.cmp--primary .c-btn.c-btn--ghost:hover, .cmp.cmp--primary .c-btn.c-btn--ghost:focus-visible { background-color: var(--wp--preset--color--on-primary); color: var(--wp--preset--color--primary); } .cmp.cmp--naranja .c-btn.c-btn--ghost:hover, .cmp.cmp--naranja .c-btn.c-btn--ghost:focus-visible { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent-warm); } .cmp.cmp--lima .c-btn.c-btn--ghost:hover, .cmp.cmp--lima .c-btn.c-btn--ghost:focus-visible { background-color: var(--wp--preset--color--on-secondary); color: var(--wp--preset--color--secondary); } /* Botón principal: se invierte. Sobre azul, un botón azul no existe. */ .cmp.cmp--primary .c-btn.c-btn--primary { background-color: var(--wp--preset--color--on-primary); color: var(--wp--preset--color--primary); border-color: transparent; } .cmp.cmp--naranja .c-btn.c-btn--primary { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border-color: transparent; } /* Sobre los fondos AMARILLOS —lima, y el amarillo pálido de `cmp--rosa` y de las secciones con ese color de fondo en el editor— el CTA principal es el azul de siempre, sea `c-btn--primary` o `c-btn--lime`. Un botón lima sobre lima medía 1,00 (no había botón, solo texto flotando) y sobre amarillo pálido 1,18. Azul sobre lima: 3,7 la forma y 4,8 el texto. Decidido con Miquel el 4-10-2026. Antes, sobre lima, el principal iba en azul oscuro con texto lima: ahora es el mismo azul que en el resto de la web. */ .cmp:is(.cmp--lima, .cmp--rosa, .has-secondary-background-color, .has-accent-soft-background-color) .c-btn:is(.c-btn--primary, .c-btn--lime) { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); border-color: var(--wp--preset--color--primary); } .cmp:is(.cmp--lima, .cmp--rosa, .has-secondary-background-color, .has-accent-soft-background-color) .c-btn:is(.c-btn--primary, .c-btn--lime):is(:hover, :focus-visible) { background-color: var(--wp--preset--color--primary-hover); color: var(--wp--preset--color--on-primary); border-color: var(--wp--preset--color--primary-hover); } /* …pero DENTRO de una tarjeta clara (formulario, tarjeta) el fondo vuelve a ser claro y el botón principal vuelve a ser el azul de siempre. Sin esto, en el hero azul de primera cita el «Ver terapia de pareja» del bloque «Pedir cita» salía crema sobre crema: un enlace de texto sin botón (4-10-2026). */ .cmp:is(.cmp--primary, .cmp--naranja, .cmp--lima) :is(.c-card, .c-form--card, .c-post) .c-btn.c-btn--primary { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); border-color: var(--wp--preset--color--primary); } .cmp:is(.cmp--primary, .cmp--naranja, .cmp--lima) :is(.c-card, .c-form--card, .c-post) .c-btn.c-btn--primary:hover, .cmp:is(.cmp--primary, .cmp--naranja, .cmp--lima) :is(.c-card, .c-form--card, .c-post) .c-btn.c-btn--primary:focus-visible { background-color: var(--wp--preset--color--primary-hover); border-color: var(--wp--preset--color--primary-hover); } /* Las migas de pan y el rótulo: mismo trato. */ .cmp.cmp--primary .cmp__eyebrow { color: var(--wp--preset--color--on-primary); } .cmp.cmp--naranja .cmp__eyebrow { color: var(--wp--preset--color--contrast); } .cmp.cmp--lima .cmp__eyebrow { color: var(--wp--preset--color--on-secondary); } /* La nota de debajo del hero, en muted, se pierde sobre color. */ .cmp.cmp--primary .c-hero__note { color: var(--wp--preset--color--on-primary); opacity: 0.85; } .cmp.cmp--naranja .c-hero__note { color: var(--wp--preset--color--contrast); opacity: 0.85; } .cmp.cmp--lima .c-hero__note { color: var(--wp--preset--color--on-secondary); opacity: 0.85; } /* El marco de foto sobre un hero de color: se le quita el color propio para que no compita con el fondo. ⚠️ SIN BORDE. Llevaba un contorno discontinuo de 1 px que en pantalla se veía como una fila de puntos alrededor de la foto. Decisión del 30-09-2026: ninguna imagen lleva borde de puntos ni de rayas. */ .cmp.cmp--primary .c-marco, .cmp.cmp--naranja .c-marco, .cmp.cmp--lima .c-marco { background-color: transparent; color: inherit; } .c-marco { border: 0; } /* ---------------------------------------------------------------------------- 10 · DENTRO DE UNA TARJETA CLARA, EL TEXTO VUELVE AL AZUL ---------------------------------------------------------------------------- ⚠️ ESTO NO ES UN REMATE: SIN ELLO, EL FORMULARIO DE PRIMERA CITA ERA ILEGIBLE. La sección 1 pinta el texto de las secciones de color —crema sobre azul, tinta sobre naranja— y esa regla entraba también DENTRO de las tarjetas, que tienen su propio fondo blanco. Medido en primera-cita con el hero en azul: el titular del formulario salía crema sobre blanco, 1,15 de contraste. O sea que al poner el hero de color se rompía el formulario que va encima. La librería ya hace esto para `.cmp--primary`; aquí se extiende a los tres fondos y a los titulares, que la librería no cubre. ------------------------------------------------------------------------- */ .cmp--primary :is(.c-card, .c-form--card, .c-post, .c-program, .c-price, .c-need, .c-topic, .c-empty) :is(h1, h2, h3, h4, p, li, dt, dd), .cmp--naranja :is(.c-card, .c-form--card, .c-post, .c-program, .c-price, .c-need, .c-topic, .c-empty) :is(h1, h2, h3, h4, p, li, dt, dd), .cmp--lima :is(.c-card, .c-form--card, .c-post, .c-program, .c-price, .c-need, .c-topic, .c-empty) :is(h1, h2, h3, h4, p, li, dt, dd) { color: var(--wp--preset--color--primary); } /* Los textos de apoyo de dentro de la tarjeta conservan su gris. */ .cmp--primary :is(.c-card, .c-form--card, .c-post) :is(.c-field__label, .c-form__legal, .cmp__eyebrow, .c-pasos__ayuda, .c-pasos__cuenta), .cmp--naranja :is(.c-card, .c-form--card, .c-post) :is(.c-field__label, .c-form__legal, .cmp__eyebrow, .c-pasos__ayuda, .c-pasos__cuenta), .cmp--lima :is(.c-card, .c-form--card, .c-post) :is(.c-field__label, .c-form__legal, .cmp__eyebrow, .c-pasos__ayuda, .c-pasos__cuenta) { color: var(--wp--preset--color--muted); } /* ---------------------------------------------------------------------------- 11 · TODO LO QUE VA ENCIMA DEL COLOR SIGUE AL COLOR ---------------------------------------------------------------------------- ⚠️ LA SECCIÓN 1 SOLO CUBRÍA h1-h4, p, li, dt y dd. Todo lo demás conservaba su color propio —el azul de marca— y sobre el hero azul eso es el mismo color del fondo. Medido sobre las 32 páginas a 1024 px: 199 elementos por debajo del contraste mínimo. Los peores: .c-breadcrumb__sep «›» 1,03 55 veces .c-chip 1,00 20 veces .c-tag 1,03 12 veces el elemento actual de las migas 2,49 16 veces Un 1,00 quiere decir que la letra es exactamente del color del fondo. No es «poco contraste»: es que no se ve. La regla es una sola idea: encima de un fondo de marca, lo que lleva texto hereda el color de la sección y lo que lleva contorno usa currentColor. ------------------------------------------------------------------------- */ .cmp--primary :is(.c-breadcrumb__list, .c-breadcrumb__list *, .c-chip, .c-tag, .c-meta, .c-meta *, dl, dl *, .c-link, .c-leer__btn), .cmp--naranja :is(.c-breadcrumb__list, .c-breadcrumb__list *, .c-chip, .c-tag, .c-meta, .c-meta *, dl, dl *, .c-link, .c-leer__btn), .cmp--lima :is(.c-breadcrumb__list, .c-breadcrumb__list *, .c-chip, .c-tag, .c-meta, .c-meta *, dl, dl *, .c-link, .c-leer__btn) { color: inherit; } .cmp--primary :is(.c-chip, .c-tag), .cmp--naranja :is(.c-chip, .c-tag), .cmp--lima :is(.c-chip, .c-tag) { border-color: currentColor; background-color: transparent; } /* Las migas: el enlace se subraya para seguir siendo enlace cuando ya no puede distinguirse por el color. */ .cmp--primary .c-breadcrumb__list a, .cmp--naranja .c-breadcrumb__list a, .cmp--lima .c-breadcrumb__list a { text-decoration: underline; text-underline-offset: 0.2em; } /* …pero dentro de una tarjeta clara mandan las reglas de la sección 10. */ .cmp--primary :is(.c-card, .c-form--card, .c-post) :is(.c-chip, .c-tag, .c-link), .cmp--naranja :is(.c-card, .c-form--card, .c-post) :is(.c-chip, .c-tag, .c-link), .cmp--lima :is(.c-card, .c-form--card, .c-post) :is(.c-chip, .c-tag, .c-link) { color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--border); } /* ⚠️ LA CLASE ES `.c-breadcrumb__list`, NO `.c-breadcrumb`. La primera versión de la regla de arriba apuntaba a `.c-breadcrumb`, que NO EXISTE en el marcado: la caja es un `