/* Capa de diseno del sitio. Carga ultima, despues del CSS de Uncode, para poder
pisarlo sin pelear especificidad.
Este es el unico archivo que hay que tocar para un re-skin: cambiar los valores
de :root alcanza para cambiar la paleta. Las reglas de abajo son las que conectan
esas variables con los selectores que usa Uncode.
Los valores de --tx-acento y --tx-overlay son del logo (cropped-trapexium_icono-1-1.png,
el icono "X"), pedido explicito de re-skin. Primero se muestrearon los pixeles del PNG
(los dos colores solidos dominantes del icono dieron #f59d0f naranja y #009cb4 teal,
>700 muestras cada uno sobre una grilla de 100x100) y despues el cliente paso los hex
exactos de su guia de marca -- #f79c12 y #009fad, muy cerca de lo muestreado -- que son
los que quedaron. El resto de la paleta (--tx-texto, --tx-fondo, etc.) sigue siendo la
que ya tenia el sitio, extraida de style-custom.css.
OJO con !important: style-custom.css declara ".text-accent-color" (y varias
reglas mas) con !important. Sin !important de este lado, esta hoja pierde esa
pelea aunque cargue ultima -- source order solo desempata cuando la especificidad
es igual, y !important le gana a cualquier regla sin !important sin importar el
orden. Se verifico con una prueba real: cambiar --tx-acento no movia un pixel
hasta agregar !important aca. Donde hace falta !important para conectar de
verdad, se usa; donde no (el resto de las reglas de abajo gana por especificidad
o por no tener contrincante), no. */
:root {
/* --- Paleta --- */
--tx-acento: #f79c12; /* links y botones -- naranja del icono */
--tx-texto: #303133; /* texto de cuerpo */
--tx-texto-tenue: #777777; /* texto secundario */
--tx-borde: #eaeaea; /* separadores */
--tx-fondo: #ffffff; /* fondo principal */
--tx-fondo-alt: #f7f7f7; /* secciones alternas */
--tx-oscuro: #141618; /* footer y overlays */
/* --- Tipografia ---
Inter se carga de verdad desde Google Fonts (ASSET_FUENTES en
tools/build.py, insertado en el de las 24 paginas justo antes de
este link). El fallback sigue en la lista por si la request a Google
Fonts falla. */
--tx-fuente: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--tx-fuente-titulos: var(--tx-fuente);
/* --- Overlays ---
Conectada mas abajo a los 4 selectores .style-color-*-bg huerfanos: son
clases que el HTML usa (el overlay sobre los heroes con video/imagen, en
20 de las 24 paginas) pero que ningun CSS servido definia -- bug real
del sitio original, no algo que rompio la migracion. Sin esta conexion,
esos overlays quedaban con background-color transparent: el video/
imagen se veia sin tinte y el texto/logo/menu claro (pensado para
leerse sobre el tinte) perdia contraste.
Color: teal de la guia de marca (#009fad, el mismo origen que --tx-acento
-- ver el comentario de la cabecera del archivo),
pedido explicito de re-skin -- antes era un neutro oscuro
(rgba(20, 22, 24, 0.45)). El alfa subio de 0.45 a 0.55 porque el teal es
mas claro que el neutro que reemplaza: con la misma transparencia de
antes, el tinte quedaba mas debil y el texto blanco perdia el contraste
que el overlay esta para darle. */
--tx-overlay: rgba(0, 159, 173, 0.55);
}
/* --- Conexion de las variables con los selectores de Uncode --- */
/* M-7 de la revision final de la rama: las var() de abajo (las que conectan
de verdad -- las 4 que siguen, no las que quedan sin usar en :root) llevan
fallback. Hoy 81 declaraciones del CSS podado de Uncode dependen de esta
hoja para tener color: si tema.css no carga (falla la request, un typo en
el de un re-skin futuro), sin fallback el sitio entero queda sin
color -- texto y fondo por default del navegador, botones sin color de
fondo. El fallback es el mismo valor que tiene hoy el :root de arriba, asi
que en el caso normal (la hoja carga bien) no cambia nada. */
body,
.style-light .h1, .style-light .h2, .style-light .h3,
.style-light .h4, .style-light .h5, .style-light .h6 {
font-family: var(--tx-fuente, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
body {
color: var(--tx-texto, #303133);
background-color: var(--tx-fondo, #ffffff);
}
a { color: var(--tx-acento, #f79c12); }
/* style-custom.css fija esta misma clase con !important (color y fill): sin
!important aca tambien, la regla de arriba queda muerta para siempre. */
.text-accent-color {
color: var(--tx-acento, #f79c12) !important;
fill: var(--tx-acento, #f79c12) !important;
}
/* .btn-color-prif es el boton "primario" de Uncode, pero su color real -- el que
style-custom.css fuerza con !important -- es el oscuro (#303133), no el acento:
nunca fue un boton celeste. Se conecta a --tx-texto, que es el valor que
realmente tiene hoy, y con !important para que la conexion sea real. */
.btn-color-prif {
background-color: var(--tx-texto, #303133) !important;
border-color: var(--tx-texto, #303133) !important;
}
/* --- Overlays de hero huerfanos (pedido de diseño, ver comentario de
--tx-overlay en :root) ---
Los 4 IDs de color de abajo salieron del propio dist/: son los que el
HTML de las 24 paginas usa (.style-color--bg) que NINGUN css servido
define. No son un hash unico por bloque -- son un numero chico de colores
del selector de paleta de Uncode que alguien borro de la paleta sin
sacarlos de los bloques que los tenian puestos, en el sitio original.
- 165147-bg: fondo del wrapper del header (home ES/EN).
- 174228-bg: el mismo overlay en las 5 paginas de servicio con video de
fondo (auditorias, qc-qa, asuntos-regulatorios, consultoria-gmp,
infraestructura, + pares EN) Y el fondo de la fila del hero de la home.
- 188696-bg: el overlay del hero con video de la home.
- 737891-bg: el overlay del header de las 4 entradas de blog + home.
Las cuatro son el mismo tipo de elemento (fondo o overlay de un hero con
imagen/video detras), asi que las cuatro se conectan al mismo
--tx-overlay. El div ya trae su propio opacity inline (0.64 a 0.95 segun
la pagina) puesto por Uncode -- no se toca, se compone con el alfa de
--tx-overlay. */
.style-color-165147-bg,
.style-color-174228-bg,
.style-color-188696-bg,
.style-color-737891-bg {
background-color: var(--tx-overlay, rgba(0, 159, 173, 0.55));
}
/* --- Titulos de las 7 tarjetas de servicios, home (pedido de diseño,
ronda 2: tamaño y peso parejos en las 7) ---
h3.h2 es la combinacion tag+clase que Uncode usa unicamente para estos 7
titulos en el home -- verificado contra dist/: aparece exactamente 7
veces en toda la pagina, ni una mas. No hace falta scoping mas fino que
body.home (evita pisar los mismos h3.h2 que puedan existir, con otro
criterio, en paginas de servicio). */
body.home h3.h2 {
font-size: 22px;
font-weight: 300; /* Inter Light -- sumado a ASSET_FUENTES en tools/build.py */
}
/* --- Color de tarjeta sobre foto, home (pedido de diseño, ronda 1) ---
De las 7, dos ("Consultoria GMP" y "Cannabis") son las unicas con una
foto de fondo detras del titulo (el resto esta sobre fondo plano). El
titulo hereda el gris oscuro del tema (#1b1d1f / #303133 segun la
tarjeta) y con el overlay turquesa de arriba detras, queda con
contraste bajo. Blanco arregla las dos -- tamaño y peso ya los pone la
regla de arriba, pareja para las 7, asi que aca solo queda el color.
Selector: por el href real de "+ INFO" de cada tarjeta (el mismo enlace
en ES y EN salvo el slug de GMP), no por posicion -- :nth-child se
rompe si el orden de las tarjetas cambia; el href no cambia mientras el
contenido siga congelado. :has() tiene soporte universal en navegadores
modernos (Chrome/Edge 105+, Safari 15.4+, Firefox 121+); donde no hay
soporte, el titulo se queda con el gris oscuro de antes -- degrada
bien, no rompe nada. */
body.home .uncont:has(> span.btn-container > a[href$="/consultoria-gmp/"]) h3,
body.home .uncont:has(> span.btn-container > a[href$="/gmp-consulting/"]) h3,
body.home .uncont:has(> span.btn-container > a[href$="/cannabis/"]) h3 {
color: #ffffff !important;
}