/* Las tipografías, servidas desde aquí y no desde Google. * * Hasta agosto de 2026 las 31 páginas las pedían a fonts.googleapis.com, o sea * que el navegador de cada visitante le entregaba su IP a Google en cada carga, * sin que nadie escribiera nada. En una clínica de salud mental —donde la * página /empresas/seguridad se dedica a decir con precisión quién ve qué— * eso era un tercero que no hacía falta. * * Son las variables de Google, no las estáticas: un archivo cubre los pesos * 300 a 600 en vez de uno por peso. Bajó de 20 archivos y 790 KB a 6 y 234 KB, * y quien visita en español se lleva unos 98 KB. * * Se conservan los unicode-range tal como los publica Google: son los que * hacen que el navegador NO baje el archivo latin-ext si la página no usa * ningún carácter de ese rango. * * Para actualizarlas: pedir el CSS a fonts.googleapis.com con un User-Agent * moderno (si no, contesta con formatos viejos), quedarse con los bloques * latin y latin-ext, y bajar los .woff2 a public/fuentes/. */ @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 400;font-display:swap; src:url('/fuentes/cormorant-garamond-italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 400;font-display:swap; src:url('/fuentes/cormorant-garamond-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap; src:url('/fuentes/cormorant-garamond-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap; src:url('/fuentes/cormorant-garamond-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'DM Sans';font-style:normal;font-weight:300 600;font-display:swap; src:url('/fuentes/dm-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'DM Sans';font-style:normal;font-weight:300 600;font-display:swap; src:url('/fuentes/dm-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* Los tokens de Soul Healing. Una sola fuente para todo el sitio. * * Por qué este archivo existe * --------------------------- * La portada nunca cargó sitio.css: su CSS vive dentro del propio index.html. * Eso ya costó tres errores reales y distintos —.campo sin definir dejó el * formulario de citas torcido, var(--radio) inexistente dejó dos tarjetas con * las esquinas cuadradas, y el selector de idioma salió sin un solo estilo en * la página más visitada—. Todos con la misma causa: dos hojas que se creían * una. * * Los tokens viven aquí y los carga CADA página, incluida la portada. Lo que * esté definido aquí funciona en todas partes; lo que no, en ninguna. * * Dos mundos, una empresa * ----------------------- * El brief pide que consumidor y empresas se sientan de la misma casa pero con * densidad distinta. Eso NO se resuelve con dos paletas: se resuelve con dos * superficies y la misma tinta. El lado de personas va sobre papel cálido; el * de empresas sobre una superficie más fría y un punto más densa, que es lo * que hace que una tabla o un tablero se lean como instrumento y no como * folleto. */ :root{ /* ── tinta y texto ─────────────────────────────────────────────── */ --fg:#3A2740; /* berenjena: el texto */ --fg-suave:#6E6278; /* secundario, notas, pies */ --fg-tenue:#8A7F94; /* terciario: solo para rótulos, nunca cuerpo */ --fg-inverso:#FDFBFA; /* ── superficies ───────────────────────────────────────────────── */ --bg:#FDFBFA; /* fondo de página, consumidor: blanco cálido */ --superficie:#FFFFFF; /* tarjetas sobre el fondo */ --superficie-alta:#FFFFFF; /* lo que flota: menús, paneles */ --superficie-baja:#F6F1F8; /* hundido: bandas, celdas alternas */ /* La superficie de empresas. Más fría y más profunda que el papel del lado consumidor: pequeña diferencia, pero es la que hace que un tablero se lea como instrumento. Misma marca, otra densidad. */ --bg-emp:#F7F6F9; --superficie-emp:#FFFFFF; --superficie-emp-baja:#EFEDF3; /* ── acentos ───────────────────────────────────────────────────── */ --acento:#5C4467; /* las acciones */ --acento-fuerte:#3A2740; /* estado activo/hover de las acciones */ --acento-suave:#8A6E96; /* rótulos, iconografía */ --acento-2:#5F7288; /* azul pizarra: datos, lo analítico */ --acento-lavado:#F1ECF5; /* relleno de acento, muy bajo */ /* ── semánticos ────────────────────────────────────────────────── */ /* Van aparte del acento a propósito: "bien / atención / riesgo" tiene que leerse aunque el acento cambie, y no debe competir con él. */ --ok:#3F6B54; --ok-bg:#E6EFE9; --aviso:#95592F; --aviso-bg:#F8EDE4; --riesgo:#8D3B4A; --riesgo-bg:#F8E9EC; --neutro:#6E6278; --neutro-bg:#F1EFF4; /* El borde de cada estado: más oscuro que el fondo y más claro que el texto, que es lo que hace legible un chip sin rellenarlo de color. Vivían a mano en panel.css (#B9D3BE, #E4C9AE, #D8B4B4) y no eran token de nada — los únicos tres colores del sitio que no salían de aquí. */ --ok-linea:#B9D3BE; --aviso-linea:#E4C9AE; --riesgo-linea:#D8B4B4; /* ── líneas ────────────────────────────────────────────────────── Ojo con el nombre: --borde ya existía en sitio.css como ATAJO completo ("1px solid var(--linea)"), no como color, y hay reglas escritas "border:var(--borde)". Si aquí se redefiniera como color, esas reglas se quedarían sin borde. Los colores llevan --linea; el atajo se respeta. */ --linea:#E5DDEC; --linea-tenue:#F0EAF4; /* separadores internos, filas de tabla */ --linea-fuerte:#CBB9DE; /* lo que hay que ver: foco de tarjeta, activo */ --borde:1px solid var(--linea); /* ── foco ──────────────────────────────────────────────────────── */ /* Un solo estilo de foco en todo el sitio. Visible sobre las dos superficies; se prueba con teclado, no de vista. */ --foco:#5C4467; --foco-anillo:2px; --foco-sep:2px; /* ── sombra ────────────────────────────────────────────────────── */ /* Muy poca, y teñida de la tinta: una sombra gris sobre fondo cálido se ve sucia. Tres niveles y ni uno más. */ --sombra-1:0 1px 2px rgba(58,39,64,.05); --sombra-2:0 1px 2px rgba(58,39,64,.04), 0 6px 20px rgba(58,39,64,.06); --sombra-3:0 2px 4px rgba(58,39,64,.05), 0 18px 44px rgba(58,39,64,.09); /* ── datos ─────────────────────────────────────────────────────── */ /* Los colores de las visualizaciones salen de aquí y NUNCA se escriben a mano en un gráfico. La rampa es categórica: cinco tonos que se distinguen entre sí, todos de la familia de la marca, ordenados de más a menos protagonista. */ --dato-1:#5C4467; --dato-2:#5F7288; --dato-3:#8B9A7A; --dato-4:#B08A5A; --dato-5:#A8768F; --dato-vacio:#E5DDEC; /* la parte no usada de una barra */ --dato-rejilla:#EFEAF3; /* líneas de fondo de un gráfico */ --dato-eje:#8A7F94; /* Secuencial, para intensidad de riesgo (bajo → alto). No usa rojo hasta el final: un mapa de riesgo todo en rojo no informa, alarma. */ --riesgo-1:#E8EDE9; --riesgo-2:#CFD9D2; --riesgo-3:#E6D3B8; --riesgo-4:#D9A98A; --riesgo-5:#C08479; /* ── tipografía ────────────────────────────────────────────────── */ --display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --texto:'DM Sans','Helvetica Neue',Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* Escala. El cuerpo no crece con la pantalla; los títulos sí, que son los que se desbordan en celular. */ --t-micro:10.5px; /* rótulos en versalitas */ --t-nota:12.5px; --t-chico:14px; --t-base:15.5px; --t-lead:17.5px; --t-h4:clamp(15px,1.8vw,17px); --t-h3:clamp(17px,2.2vw,21px); --t-h2:clamp(23px,3.4vw,32px); --t-h1:clamp(30px,5.2vw,46px); --t-portada:clamp(34px,6.2vw,58px); --t-cifra:clamp(28px,4.6vw,44px); /* métricas de tablero */ --t-cifra-gr:clamp(40px,8vw,76px); /* la cifra que manda en una sección */ --alto-apretado:1.12; --alto-normal:1.62; --alto-suelto:1.75; --track-versalita:.18em; /* ── espacio ───────────────────────────────────────────────────── */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px; /* Aire entre secciones: en celular la mitad, o la página se vuelve scroll. */ --seccion:clamp(44px,7vw,96px); --rejilla:var(--e4); --rejilla-ancha:var(--e5); /* ── anchos ────────────────────────────────────────────────────── */ --ancho-texto:68ch; /* medida de lectura */ --ancho-angosto:680px; --ancho:1060px; /* columna de contenido */ --ancho-emp:1180px; /* empresas: más denso, más ancho */ --ancho-barra:1280px; /* la cabecera puede pasarse del contenido */ --ancho-tablero:1320px; /* ── esquinas ──────────────────────────────────────────────────── */ --r-chico:3px; /* campos, celdas, píldoras cuadradas */ --r-caja:14px; /* tarjetas */ --r-grande:20px; /* paneles, mockups de producto */ --r-pastilla:999px; /* ── movimiento ────────────────────────────────────────────────── */ /* Todo horizontal, nada que rebote. Es decisión de marca, no de gusto. */ --paso:.22s cubic-bezier(.22,.61,.36,1); --paso-lento:.42s cubic-bezier(.22,.61,.36,1); } /* ── puntos de corte ────────────────────────────────────────────── No se pueden usar variables en @media, así que se escriben aquí. EL JUEGO ES ESTE Y NO HAY OTRO: 560px celular ancho · pareja para max-width: 559px 760px tableta · pareja para max-width: 759px 1160px escritorio · pareja para max-width: 1159px El 1160 es el mismo corte con el que nav.js recoge el menú en la hamburguesa (`var CORTE`; en empresas usa 1280 por su barra más ancha). El diseño móvil arranca en 390px, que es el iPhone que más se usa. Cómo está el sitio hoy (07-sep-2026), contado con el parser: 175 reglas @media con ancho, de las cuales 147 son canónicas y 28 son excepciones con su razón escrita. 16 anchos distintos, contra los 25 de antes del remapeo. 560px se usa 23 veces, 760px 72 y 1160px 14. Cómo se eligió: antes del remapeo, 560 y 760 ya eran los que cargaban el diseño —14 y 41 usos—. Los otros 23 anchos NO estaban cada uno en una hoja, como decía este bloque antes de contarlos: 640px vivía en 10 archivos, 620px en 8, y 720, 860 y 900 en 7 cada uno. Por eso el remapeo tocó 33 archivos y no un puñado. Y este bloque llegó a declarar 560/760/1100/1280, con 1100px sin aparecer ni una vez en el sitio: era una lista en la que había que creer. OJO CON CÓMO SE CUENTA: un `grep -o "width:560px"` da 33, porque engancha por igual el paréntesis de un @media y la PROPIEDAD max-width de cualquier regla. Solo cuenta lo que va dentro del paréntesis de un @media, y hay que mirar .css, .html Y .js —nav.js inyecta sus propias reglas—. Los números de arriba salieron mal dos veces por saltarse esto. LA REGLA, y la única excepción que admite ----------------------------------------- Toda regla responsive usa uno de esos tres anchos —también el CSS que se inyecta desde JavaScript—. Se permite otro SOLO si la regla mide GEOMETRÍA y no maquetación de página —el ancho de un teléfono dibujado, cuántas columnas caben en un diagrama, el tamaño de tipografía de una pantalla muy angosta—, y entonces tiene que llevar arriba un comentario que empiece con: Excepción al juego canónico (560/760/1160): Hoy son 28 y todas lo dicen. La diferencia importa: si el ancho lo decide el CONTENIDO (una tabla, un dibujo, un número), el corte es del contenido; si lo decide la PÁGINA, es de esta lista. Y una regla no viaja sola: si depende de otra —la flecha que gira con su ruta, la animación que acompaña a una reja—, las dos se mueven juntas o no se mueve ninguna. Aquí ya se rompió una vez en los dos sentidos. */ /* Quien pidió no ver animaciones, no las ve. Va aquí y no en cada hoja. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* Un solo foco visible en todo el sitio. Sin esto cada página inventa el suyo y algunas se quedan sin ninguno, que es como se rompe el teclado. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:var(--foco-anillo) solid var(--foco); outline-offset:var(--foco-sep); border-radius:2px; } /* ── nombres de antes ────────────────────────────────────────────── El sitio ya escrito usa estos nombres en cientos de reglas. Se quedan apuntando a los tokens nuevos para no reescribir todo de golpe —que sería cambiar el aspecto de páginas que hoy se ven bien, a ciegas—. Lo nuevo usa los nombres de arriba; esto se va vaciando conforme se toque cada página. */ :root{ --blanco:var(--superficie); --papel:var(--bg); --tinta:var(--fg); --suave:var(--fg-suave); --uva:var(--acento); --lila-marca:var(--acento-suave); --nube:var(--superficie-baja); --malva:#CBB9DE; --bruma:#DDD2E6; --rosa:#D9A5AE; /* Las cinco áreas de la clínica. Siguen siendo código de color, no adorno. */ --salvia:#8B9A7A; --cielo:#7A8AA0; --ambar:#C1974E; --terracota:#B5644A; --lila:#96849E; --radio:var(--r-caja); --sombra:var(--sombra-2); --sombra-suave:var(--sombra-1); --t-mini:var(--t-micro); --ancho-medio:900px; --ancho-max:1180px; --radio-chico:var(--r-chico); --radio-caja:var(--r-caja); --radio-pastilla:var(--r-pastilla); } /* Solo para lectores de pantalla. Se usa en títulos de tabla y rótulos que el diseño no enseña pero que sin ellos dejan a alguien sin saber qué está leyendo. No usar display:none: eso también lo esconde del lector, que es justo lo contrario. */ /* Un bloque que solo existe en un idioma. * * Lo usan las páginas legales. El aviso de privacidad y los términos están * redactados en español para cumplir la LFPDPPP, y ese es el texto que obliga. * Traducirlos crearía un SEGUNDO documento legal —trabajo de abogada, no de * traducción— y publicar uno que no calce con el otro es peor que no * publicarlo. Así que en inglés se explica eso; en español no hace falta * decir nada, y por eso no es un par del diccionario. * * Se cuelga de data-idioma —el idioma que ESCOGIÓ la persona— y no de lang, * que dice en qué idioma está el contenido. En estas páginas justamente no * coinciden: el contenido sigue en español y por eso lang se queda en es-MX, * pero la nota tiene que salir cuando alguien pidió inglés. */ .solo-en{display:none} html[data-idioma-activo="en"] .solo-en{display:block} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap;border:0}