/* ESTILOS DE LA PÁGINA — los que escribió la landing, no el design system. Traen el reset del cuerpo, el color de enlace, los tokens que dependen del corte responsivo (un solo corte: 1024px) y la única transición de la página: el desplazamiento de los nodos del mapa al cambiar de vista, que responde a un clic y se apaga con prefers-reduced-motion. */ /* Solo lo que NO puede ser inline: reset del body, color de enlace por defecto, los tokens que dependen del corte responsivo, y la ÚNICA transición de la página (el cambio de vista del mapa, que responde a un clic) con su apagado por prefers-reduced-motion. ESTA RONDA SE ENTREGA QUIETA: no hay scroll-reveal, ni parallax, ni ambientales, ni fundidos de entrada. Todo el layout va inline. */ body{margin:0} a{color:var(--acento);-webkit-text-fill-color:var(--acento);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acento) 60%,transparent);text-underline-offset:3px} /* ⚠️ EL `:not()` NO ES ADORNO — ES LA MITAD QUE FALTABA DEL ARREGLO DE ABAJO. La regla de abajo cuenta cómo `a{-webkit-text-fill-color}` dejó un botón primario invisible EN REPOSO, y lo arregló devolviéndole `currentColor`. Pero sólo curó el relleno: aquí `:hover` le sube la especificidad a (0,1,1), que le gana a `.pol-btn--primario` (0,1,0), así que `color` SÍ se volvía terracota con el ratón encima… y `currentColor` lo sigue. O sea que el relleno obedecía a un color ya envenenado. MEDIDO el 7-ago con verificacion/hover.mjs, en 22 botones de las cinco páginas: el CTA del hero pasaba de blanco 5.34 a terracota 1.05 SOBRE FONDO TERRACOTA. El texto desaparecía justo en el instante de ir a hacer clic, y el `transform` era `none`, así que tampoco había movimiento que avisara. Lo que no son enlaces sueltos son los botones y la marca del encabezado. */ /* EL ENLACE TAMPOCO VIRA YA (misma decision que el boton, aplicada al texto). Antes el hover reescribia `color` y `-webkit-text-fill-color`, o sea que cambiaba el color de la letra justo en el instante de ir a hacer clic -- sobre un fondo que puede ser cualquiera de los doce acordes. Un solo color de letra, el mismo en reposo y con el raton encima, se comprueba una vez y vale para los doce. Un enlace no puede levantarse como el boton: es texto dentro de un renglon, y moverlo empujaria la linea. Su equivalente es el subrayado, que ya es la marca de que algo es un enlace: se acerca un pixel y se pone entero. La letra no se mueve ni cambia de color; lo que responde es la raya de abajo. Es el mismo gesto que el design system ya usa en el enlace de flecha, donde lo que avanza tres pixeles es la flecha y no el texto. ⚠️ EL COLOR SE VUELVE A DECLARAR, NO SE OMITE, y esto costo una medicion. El design system trae SU PROPIO hover de enlace en tokens/base.css: `a:not(.pol-btn,.pol-ibtn,.pol-fab,.pol-nav__b,.pol-lnk):hover{color:...}`. Tiene exactamente la misma especificidad que esta regla -- (0,2,1) las dos -- asi que borrar `color` de aqui no lo apaga: lo deja ganar por ser el unico que lo declara. Medido con el raton encima: el enlace se iba a otro tono igual, y el subrayado se iba con el porque sigue a currentColor. La linea de abajo es la misma neutralizacion que llevan los botones: se escribe el valor de reposo para que el hover no lo mueva. ⚠️ Hay un SEGUNDO color de reposo, y su neutralizacion NO vive aqui: dentro de .pg-pagina el enlace hereda el color del texto que lo rodea en vez de tomar el acento, asi que necesita su propia linea. Vive junto al resto de las reglas de .pg-pagina, mas abajo en este archivo, para que quien edite ese bloque las vea juntas -- tenerlas separadas por mil seiscientas lineas es como se desincronizan las cosas. */ a:not(.pol-btn,.nav__marca):hover{color:var(--acento);text-decoration-color:currentColor;text-decoration-thickness:2px;text-underline-offset:2px} /* OJO, ESTE COSTÓ UN BOTÓN ENTERO: la regla de arriba pinta el texto con -webkit-text-fill-color, que MANDA sobre `color`. Un botón primario es un , así que heredaba texto del color del acento… sobre un fondo del color del acento: invisible, y solo reaparecía al presionarlo (ahí cambia el fondo, no el texto). La flecha se salvaba porque usa currentColor, o sea la propiedad `color`, que sí la pisa la clase del botón. Devolverle currentColor al relleno alinea las dos otra vez, en TODOS los botones-enlace —no solo el primario: papel y contorno también venían pintados de naranja. */ a.pol-btn,a.pol-btn:hover{text-decoration:none;-webkit-text-fill-color:currentColor} /* RESPONSIVO — móvil primero, UN SOLO CORTE: 1024px (--corte-escritorio). */ :root{ /* ⚠️ --pg-gap ERA 12px, EXACTAMENTE LO MISMO QUE --e-3, que es el aire de DENTRO de cada tarjeta. Veintidós tarjetas encadenadas sin que la proximidad dijera dónde termina una y empieza la otra: el ojo agrupa por cercanía, y con la misma cercanía no agrupa nada. En escritorio no pasa porque las columnas ya separan, y ahí el gap además vale 16 contra 12. */ --pg-x:20px; --pg-y:72px; --pg-gap:20px; --pg-2:1fr; --pg-3:1fr; --pg-niveles:1fr; --pg-quienes:1fr; --pg-form:1fr; --pg-hero-abajo:120px; --pg-foto:min(100%,340px); --pg-q-tit:auto; --pg-q-foto:auto; --pg-q-cuerpo:auto; /* Mapa: el texto de los nodos NO se escala con transform, cambia de tamaño por corte — así nunca baja del piso de 12px. */ --mapa-txt:13px; --mapa-desc:12px; --mapa-chip:12px; } @media (min-width:1024px){ :root{ --pg-x:32px; --pg-y:112px; --pg-gap:16px; --pg-2:1fr 1fr; --pg-3:repeat(3,1fr); --pg-niveles:repeat(3,1fr); --pg-quienes:.85fr 1.15fr; --pg-form:1fr 1fr; --pg-hero-abajo:180px; --pg-foto:100%; --pg-q-tit:1 / 2 / 2 / 3; --pg-q-foto:1 / 1 / 3 / 2; --pg-q-cuerpo:2 / 2 / 3 / 3; --mapa-txt:14px; --mapa-desc:12.5px; --mapa-chip:12px; } } /* Tarjetas que igualan altura y anclan su última línea abajo. Un componente montado con x-import solo se puede estilar por clase. */ .pg-col{height:100%;display:flex;flex-direction:column;gap:var(--e-3)} /* La única animación autorizada: los nodos del mapa se mueven de una proyección a la otra al hacer clic en el control de vista. */ .pg-nodo{transition:left var(--dur-lenta) var(--ease-salida),top var(--dur-lenta) var(--ease-salida),width var(--dur-lenta) var(--ease-salida),opacity var(--dur-media) linear,transform var(--dur-media) var(--ease-salida),box-shadow var(--dur-media) var(--ease-salida)} .pg-trazos{transition:opacity var(--dur-media) linear} /* ════ EL RELIEVE SUSTITUYE A LA ATENUACIÓN ═════════════════════════════ Antes, tocar una pieza bajaba TODO lo demás al 28% de opacidad. Resaltaba, pero dejaba nueve de cada diez tarjetas en un gris ilegible — y el mapa existe para que se lean las diez. Decisión del dueño: que no se apague nada, y que lo que se toca SUBA. La pieza bajo el cursor se levanta tres píxeles y saca sombra; el resto se queda como estaba. Las líneas a los vecinos siguen igual: son las que dicen con quién se habla. Va con transform y box-shadow —no con width/height ni margin— para que el movimiento no obligue al navegador a recalcular el plano del mapa en cada entrada del ratón. EL RELIEVE NO SE PUEDE HACER CON :hover, y esto costó tres intentos: el mapa REEMPLAZA el nodo en cada entrada del ratón (mouseenter → setState → repinta). El elemento que recibió el hover se destruye en el acto y el que ocupa su lugar no está "hovered" hasta que el puntero se vuelva a mover, así que la regla se aplicaba a un nodo que ya no existía. Medido: con el cursor quieto encima, NINGÚN nodo cumplía :hover. Por eso el relieve lo pone el estado, en mapa.js —que es quien sabe cuál es la pieza activa— y aquí solo vive la transición que lo suaviza. De paso sale gratis el teclado: enfocar un nodo ya lo marca activo. */ @media (prefers-reduced-motion:reduce){ .pg-nodo,.pg-trazos{transition:none} } x-dc{display:none!important} /* ════ TEXTO SUELTO SOBRE LA AURORA — EL VELO SUSTITUYE AL HALO ═════════ Historia corta, porque explica por qué esto se ve así y no de otra forma. El fondo de cada sección NO es un color: es el arte del diseñador, y además VIAJA con el scroll. Un título en tinta que arriba se lee con 7:1 puede quedar en 1.7:1 cuando el recorte oscuro le pasa por debajo — medido: "Once funciones. Esto costaría contratarlas." caía a 2.2:1 sobre la banda vino de Granada. Como ningún color de texto aguanta TODO el recorrido, la ronda del 1-ago le puso un HALO a cada letra: resplandor crema detrás del texto oscuro. Se leía, pero se veía sucio — un resplandor alrededor de cada palabra ensucia el gradiente que está ahí para lucirse. DECISIÓN DEL DUEÑO, 2026-08-04, EN DOS PASOS. Primero se retiró el halo y se puso en su lugar un VELO sobre el arte —el mismo problema resuelto una capa más abajo: en vez de defender letra por letra, se le baja la luz al fondo de una vez y el texto pasa a papel—. Ese día se midió el velo mínimo que cada acorde necesitaba para pasar AA en once anchos: granada .30* ambar .32 amanecer .38 rubor .44 marea .49 laguna .54 brasa .30* (el pie) * .30 fue el piso del barrido: piden menos HORAS DESPUÉS EL DUEÑO PIDIÓ EL SEGUNDO PASO, y es el que está vigente: EL VELO SE VA. El color del arte manda sobre el contraste — "déjalo a tope, aunque afecte la legibilidad". Es una decisión de marca tomada con el costo a la vista: se midió sin velo, se vio en capturas y se sostuvo. Lo que cuesta, MEDIDO —no estimado— para que nadie lo redescubra creyendo que es un bug y lo "arregle" sin saber que fue a propósito: de 158-162 textos por ancho caen por debajo de AA entre 33 y 42, según el ancho. Dónde duele, del peor al menos malo (peor pixel en seis anchos): nosotros Laguna 1.10 6 textos ← el más grave: ahí no se lee niveles Marea 1.74 13-15 ← el que más textos se lleva diagnostico Rubor 1.69 7 precio Ámbar 2.33 3-4 (medido con el bloque anterior) el pie Brasa 2.44 1 ← CIFRA SUPERADA, ver abajo mapa Granada 3.04 3-10 ← el único que queda cerca Los tres primeros no son un asunto de baja visión: son texto que en una pantalla con reflejo no lo lee nadie. ⚠ EL RENGLÓN DEL PIE ESTÁ SUPERADO, Y SE DEJA PARA NO PERDER EL RESTO DE LA TABLA. Ese 2.44 se tomó con el medidor anterior, que RECONSTRUÍA el fondo a partir del archivo del acorde. Sobre el pie eso no vale, porque ahí el fondo es un video. El medidor de hoy fotografía el fondo en vez de calcularlo, y con él ese mismo titular da 3.71 con el bucle corriendo. Los otros seis renglones son de secciones sin video, donde el método viejo sí servía. LA PALANCA SIGUE VIVA Y ES UN SOLO NÚMERO: --velo-aurora. Ponerle un valor como rgb(10 6 4/.48) devuelve la legibilidad sin tocar nada más; ponerlo por acorde con la tabla de arriba es el ajuste fino. Se deja escrito porque la decisión puede volver a cambiar y no hay que volver a medirlo. ESTO DEVUELVE LA PÁGINA A "CERO OSCURECIMIENTO", que es lo que el design system ya decía (tokens/aurora.css, --ambiente-global: 0). El velo vive AQUÍ y no allá a propósito: _ds/ es copia exportada de Claude Design y una re-exportación lo pisaría. */ :root{--velo-aurora:transparent} /* ════ LOS CUATRO ESCALONES DE CUERPO QUE FALTABAN ══════════════════════ El sistema tenía los títulos creciendo con la pantalla —clamp() de 20 a 72— y el cuerpo CLAVADO en cuatro tamaños fijos: 12, 14, 16 y 18. En una pantalla de 1440 eso deja el texto corriendo chico debajo de titulares enormes, y es la razón de fondo por la que la dirección de diseño pide "subir el puntaje" sección tras sección. ⚠️ POR QUÉ ESTÁN AQUÍ Y NO SUELTOS EN CADA SECCIÓN. Las dos primeras secciones se corrigieron con clamp() escritos a mano y salieron CUATRO valores distintos en dos secciones. A ese ritmo, las siete secciones habrían dejado diez tamaños que nadie puede volver a igualar -- que es exactamente cómo el vidrio de este sitio acabó teniendo dieciocho recetas distintas: cada una correcta por separado, ninguna igual a su vecina. Van en rem y no en px para que respeten el tamaño de letra que cada quien tenga puesto en su navegador. A tamaño por omisión dan lo mismo que los clamp() que sustituyen: 16-17, 17-19, 19-22 y 21-25. ⚠️ No se redefinen en ningún @media, igual que sus hermanos: el clamp() ya hace el trabajo del punto de quiebre, y una lista de tamaños repetida dentro de una consulta es frágil por diseño. */ :root{ --txt-cuerpo-md:clamp(1rem,1.2vw,1.0625rem); /* cuerpo en columna estrecha */ --txt-realce:clamp(1.0625rem,1.3vw,1.1875rem); /* la frase que carga el peso */ --txt-cuerpo-xl:clamp(1.1875rem,1.5vw,1.375rem); /* el párrafo principal, sin caja */ --txt-titulo-4:clamp(1.3125rem,1.7vw,1.5625rem); /* subtítulo de columna */ } /* ════ EL GRANO SE APAGA, Y ES OTRA VEZ UN SOLO NÚMERO ══════════════════ Sobre cada acorde iba una textura de ruido finísimo al 16% en modo overlay -- grano de película. Se apaga por decisión de dirección de diseño: el degradado se quiere limpio. LO QUE COSTABA, MEDIDO ANTES DE QUITARLO, para que la decisión pueda revisarse con datos y no de memoria: sobre nueve puntos de una sección, con la animación congelada para que las dos tomas fueran del mismo instante del degradado, el grano movía el color 2.3 de 255 por canal y ACLARABA 2.3 de luz. O sea que no oscurecía nada -- lo que sí hacía era quitarle nitidez al degradado, y eso se percibe aunque el promedio de color casi no se mueva. LA PALANCA ES --grano-opacidad. Devolverlo es ponerle .16. Vive AQUÍ y no en _ds/ por lo mismo que el velo de arriba: esa carpeta es copia exportada y una re-exportación pisaría el cambio en silencio. */ :root{--grano-opacidad:0} /* ════ EL INTERLINEADO DE «UN EQUIPO QUE TE ENTIENDE» ═══════════════════ La dirección de diseño marcó esta sección como uno de los mejores ejemplos del sitio y le pidió una sola cosa: "cuidar un poco el puntaje y el interlineado, hay que reducirlo un poco". Es la única sección de la portada con una columna de texto larga y seguida -tres párrafos de oficio, uno tras otro-, y el 1.55 que sirve para un párrafo suelto ahí separa demasiado y los renglones dejan de leerse como bloque. Baja a 1.42 SÓLO aquí; el resto del sitio no se toca. */ #nosotros{--alto-cuerpo:1.42} /* ════ EL ANILLO DE FOCO ES UN PAR, Y ESO ESTÁ MEDIDO ═══════════════════ El anillo es el recuadro que marca dónde está parado quien navega con el teclado. Sólo se ve mientras se navega así. UN ANILLO DE UN SOLO COLOR NO PUEDE SERVIR, porque su luminancia coincide con la de ALGÚN fondo. Barrido sobre 32 fondos planos: el color de marca reprueba en 20 de ellos, de luminancia 0.014 a 0.479 — o sea en casi todo el rango medio, no sólo "en lo oscuro". Por eso el anillo lleva dos partes, una clara y una oscura, y basta con que una se lea. LAS DOS VAN OPACAS. Con el filo al 95% y el halo al 45% —como estaban— el par todavía reprueba en 5 de los 32, en una banda de medios tonos donde el claro ya no despega y el oscuro aún no oscurece. Opacas pasa en los 32. El barrido se rehace con `node verificacion/graficos.mjs --banda`. ⚠️ VIVE AQUÍ Y NO EN _ds/, POR LA MISMA RAZÓN QUE EL VELO DE ARRIBA: esa carpeta es copia exportada de Claude Design y una re-exportación la pisaría, y aquí la pérdida sería MUDA — el sitio volvería al anillo de un color sin error ni aviso. Y hay una segunda ganancia por vivir aquí: esta hoja carga DESPUÉS de _ds/componentes.css, así que este halo le gana a la sombra propia de cualquier componente del sistema que la traiga sin condición. Ninguno de esos se pinta hoy en este sitio, así que la ganancia es contra el futuro, no contra un defecto vivo — pero es gratis y cierra el hueco antes de que exista. El halo va por box-shadow porque un elemento sólo admite un outline. Un componente que necesite CONSERVAR su sombra propia al enfocarse lo hace con su propia regla —más específica— sumándole el halo; hay tres así más abajo. ⚠️ SOBRE ELEMENTOS DE SVG EL HALO NO SE PINTA: box-shadow es del modelo de caja de HTML. Ahí llega el filo y sólo el filo, así que en una superficie de SVG el contraste hay que medirlo en su sitio en vez de darlo por bueno. Las quince estrellas del resultado son ese caso, y están medidas. */ :root{--foco-filo:#FFFFFF;--foco-halo:#000000} :focus-visible{ outline:2px solid var(--foco-filo); outline-offset:2px; box-shadow:0 0 0 5px var(--foco-halo); } /* ════ BRASA VIVE: EL ACORDE DEL HERO Y DEL PIE ES UN VIDEO ═════════════ Pedido del dueño (2026-08-05): "el video que te pasé, reproduciéndose en loop atrás". No dentro de las letras — ATRÁS, de fondo. POR QUÉ UN midió la FLECHA en vez de la etiqueta y reportó 2.30 donde había 4.47. Estos números se corren completos o no se escriben. */ @media (min-aspect-ratio:4/5){ /* El min(0px, …) NO es adorno, es el tope que evita un hueco. Bajo cover el porcentaje de object-position resuelve contra (caja - imagen), que es NEGATIVO porque la imagen sobra; sumarle píxeles lo acerca a cero. Justo en la orilla de 4/5 la sobra vale CERO, así que sin tope el valor se volvería positivo, la imagen bajaría más de lo que hay y arriba quedaría una franja vacía. Con el tope, lo más lejos que llega es a pegar el borde de arriba del arte con el de la sección. Probado en la orilla. */ #hero>.pg-fondo{object-position:center min(0px,calc(var(--acorde-y,50%) + var(--brasa-baja,200px)))} /* Con movimiento reducido el video no se pinta y manda el arte estático; ahí la deriva está apagada, así que la posición se puede fijar sin que la animación se la gane. Se escriben las DOS capas del ::before o la lista se repite en ciclo y el tinte se lleva la posición del arte. */ @media (prefers-reduced-motion:reduce){ #hero.aurora::before{background-position:center,center min(0px,calc(var(--acorde-y,50%) + var(--brasa-baja,200px)))} } } /* ==== 2026-08-05 · UN PUNTO MÁS DE COLOR, SOLO EN LA COMPU ==== Pedido del dueño: +20% de saturación en el hero de escritorio y en ningún lado más — ni móvil, ni tableta, ni el pie. En el teléfono el arte ya se ve entero y con sus colores, así que ahí no hace falta y saturarlo sería virarlo sin motivo. POR QUÉ ancho + puntero y no solo ancho: por ancho NO hay línea limpia entre laptop y tableta —una iPad Pro apaisada mide 1366 y muchas laptops también—, así que se suma pointer:fine, que es lo más cerca de "compu" que sabe decir el CSS: ratón o trackpad, no dedo. No es perfecto —una tableta con teclado y trackpad puede colarse— pero se equivoca del lado bueno: si entra, entra en algo que igual se usa como computadora. VA EN EL VIDEO Y NO EN LA SECCIÓN a propósito. Si se pusiera en #hero, el filtro pintaría también los textos, los botones y el wordmark: saturaría la marca entera en vez del fondo. Aquí toca solo el .pg-fondo del hero, que es exactamente lo que se pidió. MEDIDO, porque el margen ya era corto: el CTA venía en 4.65 contra un umbral de 4.5, y saturar mueve píxeles. Con saturate(1.2) queda en 4.60 — pierde 0.05 y sigue pasando, que es lo que promete la fórmula: saturate rota el color alrededor de la luma y casi no toca el brillo. El colorido sube de 53.5 a 63.9, o sea el 20% pedido casi al punto. Verificado también que el filtro NO se cuela a donde no debe: el video del pie da none, el de 390 da none, el de una tableta apaisada de 1024 da none, y la sección #hero da none —o sea que los textos no se saturan—. La máscara del fundido de abajo sobrevive: filter y mask conviven, el filtro se aplica antes. ⚠ Este bloque deja el CTA a 0.10 de su umbral. Es el texto más apretado de la página: cualquier cosa que suba el brillo o el color del hero se mide contra él ANTES de darla por buena. */ @media (min-width:1200px) and (pointer:fine){ #hero>.pg-fondo{filter:saturate(var(--brasa-satura,1.2))} } /* La capa de arte del design system pinta [tinte ambiente] + [arte]. Aquí se sustituye el tinte —que vale transparente— por el velo. Solo cambia la imagen: tamaño, posición, repetición y volteo siguen siendo los del DS. */ .aurora::before{background-image:linear-gradient(var(--velo-aurora),var(--velo-aurora)),var(--acorde)} /* Con fundido son TRES capas y el tamaño hay que escribirlo completo: la lista de background-size se repite en ciclo, así que con dos valores el arte —que es la tercera— tomaría el "100% 100%" de la primera y saldría estirado. La posición la fija la animación de deriva con un valor único para las tres; las dos capas planas no acusan el movimiento. */ .aurora.aurora--fundido-abajo::before{ background-image: linear-gradient(to bottom,transparent calc(100% - var(--fundido-alcance,120px)),#020202 calc(100% - var(--fundido-remate,0px))), linear-gradient(var(--velo-aurora),var(--velo-aurora)), var(--acorde); background-size:100% 100%,100% 100%,cover} /* Los nueve acordes de día nacieron con texto TINTA porque el arte es luminoso. El dueño los quiere en BLANCO ("blanco en vez de negro", su nota sobre la sección de Ámbar), y eso se mantiene sin velo: es la decisión de marca, no una consecuencia del oscurecimiento. Voltea la polaridad COMPLETA —texto, panel, antetítulo y el relleno de los botones sólidos—, no solo el color del texto: un panel de papel translúcido con texto blanco adentro se lleva a su propio texto por delante. */ [data-acorde="ambar"],[data-acorde="granada"],[data-acorde="jacaranda"],[data-acorde="marea"], [data-acorde="duna"],[data-acorde="rubor"],[data-acorde="laguna"],[data-acorde="prisma"], [data-acorde="horizonte"]{ --texto-sobre-aurora:var(--texto-aurora-papel); --contra-aurora:var(--texto-aurora-tinta); --panel-base:var(--tinte); /* .24 y no .20 (el default del DS): sin velo, el panel es lo ÚNICO que separa el texto blanco del arte cuando el arte va claro. Subirlo es la forma de ganar legibilidad SIN tocar el color del gradiente: solo pinta detrás del texto, no la sección. Dos secciones lo suben más — abajo. */ --panel-alfa:.24; --panel-alfa-firme:.42; --panel-texto:var(--texto-aurora-papel); --panel-borde:rgb(255 255 255/.16); /* EL VIDRIO CLARO DEL CTA TAMBIÉN VOLTEA AQUÍ, y esto se descubrió mirando la captura, no la tabla: sobre estos nueve acordes el arte es luminoso, así que un cristal blanco cerrado se ve blanco y el texto va en tinta. Sobre la noche —Brasa, Amanecer, Boreal— el mismo cristal da GRIS, y un CTA gris parece deshabilitado. Ahí el vidrio se abre y el texto se va a papel: un panel de luz sobre el negro, que es la receta canónica del vidrio. Los valores de noche están en el bloque de glassmorfismo, más abajo. */ --vidrio-alfa-claro:.55; --vidrio-alfa-claro-hover:.70; --vidrio-claro-texto:var(--texto-aurora-tinta); --vidrio-claro-filo:rgb(255 255 255/.46); } /* ════ LAS DOS SECCIONES QUE EL DUEÑO REVISÓ UNA POR UNA ════════════════ Sin velo, Laguna y Marea son los dos acordes donde el texto blanco a pelo desaparecía (1.10:1 y 1.74:1). Cada una se resolvió como él pidió, y son dos caminos distintos a propósito. 1 · QUIÉNES SOMOS (Laguna) — EL TEXTO SE VA A TINTA. El arte ahí es rosa y turquesa claros: es fondo de día, y sobre día la tinta gana. Aplica SOLO a la columna de cuerpo —los cuatro textos que él listó—, no al título ni al antetítulo, que se quedan en papel: el título es display y aguanta, y esa mezcla es la que él pidió ver. Ojo: la cita de "no soy administrador" vive dentro de esta columna pero NO se pone en tinta, porque tiene su propio recuadro y ese va oscuro con texto blanco (punto 2). Por eso el token que cambia es el del texto sobre la aurora y no el del panel: son dos cosas distintas y aquí se separan. */ .pg-nosotros-cuerpo{--texto-sobre-aurora:var(--texto-aurora-tinta)} /* 2 · EL RECUADRO SE OSCURECE — LA CITA Y LA SECCIÓN DE ÁMBAR. Aquí el texto se queda en blanco y lo que cambia es el vidrio de atrás: .24 → .70. Medido, y por eso es .70 y no .60: con .60 seguían fallando entre 11 y 14 textos de estas secciones; con .70 pasan todos, en 390, 768 y 1440. Sigue siendo vidrio teñido con el acorde y no un gris plano —el color del acorde se sigue viendo dentro—, pero ya no pretende ser transparente: es un recuadro, y esa era la instrucción. NO toca el gradiente de la sección: el arte sigue a plena saturación. En #precio cae también sobre la cápsula del antetítulo, que comparte el token del panel firme: queda más sólida y a juego con el recuadro. */ .pg-nosotros-cuerpo{--panel-alfa:.70;--panel-alfa-firme:.70} /* ════ EL RELLENO DE LAS TRES SECCIONES QUE FALTABAN ════════════════════ Mismo problema que arriba y misma cura, en las tres secciones de la landing que quedaron fuera de aquella pasada: el vidrio deja pasar tanto arte que el texto de encima compite contra un fondo que cambia debajo de cada letra. ⚠️ ES .60 Y NO .70 A PROPÓSITO, y no contradice el comentario de arriba: allá se midió .60 contra OTRAS secciones y ahí no bastaba. Aquí sí, y la instrucción del dueño fue subir lo necesario y ni una décima más, porque cada décima de relleno es fondo que deja de verse. Medido sobre las cinco páginas en 320, 390, 1024 y 1440: con .55 se quedaban cuatro textos de #diagnostico por debajo del piso —uno en 4.49, a una centésima— y con .60 pasan los veinte, sin tumbar ninguno de los que ya pasaban. ⚠️ #mapa lleva :not(.pg-recuadros) y es obligatorio: el #mapa de /ecosistema lleva esa clase y YA está en .70, así que un selector de id sin la exclusión le BAJARÍA el relleno y tumbaría sus cuatro etiquetas. El resto del sitio no se toca. */ #diagnostico,#nosotros,#mapa:not(.pg-recuadros){--panel-alfa:.60;--panel-alfa-firme:.60} /* ════ EL WORDMARK DEL HERO DEJA PASAR LA AURORA ════════════════════════ Pedido del dueño: que POLARA no sea un blanco sólido, que se transparente un poco para que se vean los colores del fondo — pero SIN perder brillo. Bajarle la opacidad al texto hace lo contrario: sobre la noche de Brasa un blanco al 70% da un gris, y el gris no brilla. La receta que sí cumple las dos cosas es recortar el arte DENTRO de las letras — pero recortando LA BANDA QUE TIENE COLOR, no la que le toca. ESTE ES EL PUNTO, Y COSTÓ DOS INTENTOS: el arte de Brasa tiene el ámbar en el quinto de arriba y del 40% para abajo es prácticamente negro. El wordmark cae en la mitad baja del hero, o sea sobre el negro, así que recortar "lo que hay detrás" daba letras oscuras. Taparlas con papel para rescatarlas es justo lo que NO se debe hacer: papel sobre negro es gris, y el gris no brilla. En el teléfono era peor —la caja del texto es una tira angosta y ahí caía el parche verde-azulado del arte—: la P y la O salían verdosas y la LA crema. Se veía sucio, como una mancha, no como una marca. Ahora el recorte pide la banda del 10%, que es ámbar de lado a lado y por eso sale pareja, sin manchas — pero CON EL PAPEL ALTO ENCIMA. Esa es la segunda mitad de la receta y también costó una vuelta: con el papel bajo el recorte salía fiel al arte, o sea NARANJA, y el wordmark de Polara no es naranja. El dueño lo cortó en una línea: "déjalo en el color que está". Al 74-84% el arte ya solo aporta temperatura: las letras se leen crema luminoso, con un viraje cálido hacia la derecha que se nota si lo buscas. Ese es el equilibrio pedido — deja ver el color del acorde sin volverse ese color, y brilla, que era la otra mitad del encargo. · La banda se elegía con background-position, no con attachment: fixed. El anclaje al viewport se fue a propósito. Ataba el resultado al tamaño de la ventana, iOS lo trata como scroll sin avisar, y obligaba a tener una receta distinta por aparato — que fue exactamente por donde se coló el wordmark manchado del teléfono. ════ 2026-08-05 · EL WORDMARK SE VUELVE VIDRIO DE VERDAD ════ Pedido del dueño en la ronda de glassmorfismo: "el nombre POLARA que también tenga ese estilo, para que se transparente sutilmente lo de atrás — y no un cuadro de texto, sino las letras mismas". LO PRIMERO QUE SE PROBÓ Y NO FUNCIONA, para que nadie lo vuelva a intentar: backdrop-filter NO se recorta con background-clip:text. Se probó en el navegador y el resultado está a la vista: el difuminado pinta el RECTÁNGULO completo del span, no las letras. Ese es justo "el cuadro de texto" que el dueño no quería. Tampoco sirve enmascarar con un SVG de la palabra: la fuente no carga dentro de un data-URI, así que el texto de la máscara sale en otra tipografía y no coincide con el de abajo. LO QUE SÍ FUNCIONA: si lo que se ve como tinta es el FONDO del elemento, basta con que ese fondo sea TRANSLÚCIDO. Entonces las letras dejan pasar lo que hay detrás de verdad — el hero, en vivo, con su deriva — sin trucos. Por eso desapareció la capa del arte: era una imagen OPACA y mientras estuviera ahí no había nada que transparentar. Su trabajo —dar temperatura— lo hace ahora un degradado cálido, y de paso se llevó su propio bug: sin imagen no hay banda que elegir, así que el manchado verdoso del teléfono ya no puede volver. La receta es idéntica en todos los aparatos. LAS TRES CAPAS SON UNA IMITACIÓN DE VIDRIO REAL, en este orden: 1. el BRILLO: casi opaco en el filo de arriba y desvanecido al 58%. Es el reflejo especular, lo que hace que se lea como cristal y no como texto transparente. Es también lo que salva el brillo que el dueño no quiere perder: arriba las letras siguen siendo crema luminoso. 2. el CUERPO: papel cálido que se ABRE hacia abajo (.76 → .50). Arriba tapa, abajo deja ver. Un vidrio se ve así: opaco donde le pega la luz, transparente en el resto. 3. la TEMPERATURA: un barrido cálido de izquierda a derecha, al 36-38%. Es lo que antes aportaba el arte. Se queda BAJO a propósito: con más, el wordmark vira a naranja, y eso ya se probó y el dueño lo cortó en una línea — "déjalo en el color que está". Medido: en el tercio de abajo de las letras se ve pasar el turquesa de la izquierda y el ámbar del centro. Esa es la transparencia pedida. SI HAY QUE MOVERLO, son dos palancas y nada más: subir el CUERPO tapa más y transparenta menos; subir la TEMPERATURA lo vira a naranja. Debajo de ~.45 de cuerpo las letras se apagan sobre el negro del hero. ==== 2026-08-05 . EL MOVIMIENTO SE FUE ATRAS, QUE ES DONDE IBA ==== Esta capa fue durante unas horas un WebP animado con el video de Brasa recortado, para que la marca se moviera por dentro. Se probaron cuatro recetas y ninguna sirvio, y el dueno lo dijo en corto: "no se nota el movimiento, es muy sutil; la idea era el video reproduciendose atras". Tenia razon en el diagnostico y en el destino: el video ahora es el FONDO de la seccion (ver el bloque de .pg-fondo, arriba) y las letras, que son vidrio, lo dejan pasar. El movimiento se ve A TRAVES de la marca en vez de estar encerrado en ella -- que ademas es lo que hace un vidrio de verdad. LO QUE SE APRENDIO Y NO HAY QUE REPETIR, porque costo cuatro vueltas: . Medir el movimiento de algo TRANSLUCIDO sin congelar antes lo que tiene detras no mide nada: se reporto "11 de 255 entre capturas" y ese 11 era la deriva de la aurora vista A TRAVES de las letras. Congelandola, la receta media 0.24 -- o sea quieta, tal como se veia. . El movimiento de este material no esta donde parece. Medido por franjas, el borde donde el turquesa se apaga en negro (y 180-360) tiene TRES VECES la amplitud de la banda ambar de arriba (y 0-168), que fue la que se recorto primero justamente por ser la que tiene color. . Y aun con la franja correcta y con realce, el techo eran 1.7 de 255 de media. Este video es una deriva lentisima: dentro de un renglon de texto tapado por un velo de crema no hay receta que lo vuelva visible. La superficie tenia que ser mas grande, y la seccion entera lo es. Esta capa vuelve a ser lo que era: un barrido calido fijo, al 36-38%, que pone temperatura sin virar la marca a naranja. Es el único lugar de la página con este tratamiento: es la marca. Y va en los DOS wordmarks de Brasa, el del hero y el del pie, que es donde el dueño lo pidió. */ #hero .pol-wm,footer .pol-wm{ background-image: linear-gradient(to bottom,rgb(255 255 255/.92) 0%,rgb(255 255 255/.42) 24%,rgb(255 255 255/.06) 58%,rgb(255 255 255/0) 100%), linear-gradient(to bottom,rgb(255 249 242/.70) 0%,rgb(255 243 233/.52) 56%,rgb(255 238 226/.34) 100%), linear-gradient(100deg,rgb(255 210 162/.38),rgb(255 247 238/.38) 48%,rgb(255 202 156/.36)); background-size:100% 100%; background-position:center; -webkit-background-clip:text;background-clip:text; color:transparent; /* LOS TRES CANDADOS DE LA A — ver el bloque de abajo. El fondo de este elemento ES la tinta de las letras, así que su caja tiene que ser más ancha que el texto o las letras se pintan a medias. VAN TAMBIÉN EN EL DEL PIE desde que comparte la receta: ese span vive en un flex de columna con align-items:center, o sea que su ancho es el del texto — y el texto, con letter-spacing negativo, cierra ANTES de que termine la tinta de la A. Es la misma trampa, en el mismo sitio. */ flex:none; padding-inline:.04em .14em; margin-inline:-.04em -.14em; } /* ⚠ EL WORDMARK DEL PIE VA MÁS CERRADO QUE EL DEL HERO, y no es capricho: los dos son Brasa, pero NO tienen el mismo fondo debajo. El del hero cae sobre el negro de la mitad baja del acorde; el del pie cae sobre la BANDA ÁMBAR, porque el pie es mucho más corto y el recorte por `cover` le sube el arte. Y sobre un fondo claro, un cristal claro se acerca al fondo en vez de despegarse: toda transparencia ahí CUESTA contraste, no lo gana. Medido en cinco anchos, del más cerrado al más abierto (peor franja): cuerpo 390 768 1024 1440 1920 sólido 1.75 3.68 6.31 7.67 8.45 ← como estaba antes .86/.80/.72 1.54 2.81 4.72 5.58 6.13 ← el que va .76/.64/.50 1.32 2.26 3.64 4.18 4.60 ← el del hero Se eligió .86/.80/.72: el loop se sigue viendo moverse dentro de las letras y la pérdida contra el sólido es de .21 en el teléfono, donde ya era el punto flaco. Se probó también el vidrio AHUMADO (letras oscuras, que sobre ámbar contrastarían): da 3.21 en 390 pero 1.15 en 1440, o sea arregla un ancho y rompe el otro. No hay una polaridad que sirva para los dos. LO QUE ESTO DESTAPA, Y VIENE DE ANTES: el POLARA del pie ya medía 1.75 en el teléfono siendo sólido. El problema no es el vidrio, es DÓNDE cae: justo sobre lo más claro de su propia sección. Se arregla de verdad moviendo el --acorde-y del pie o dándole al bloque su propio panel — las dos cosas son decisión de diseño, así que quedan anotadas y no tomadas aquí. */ footer .pol-wm{ background-image: linear-gradient(to bottom,rgb(255 255 255/.92) 0%,rgb(255 255 255/.42) 24%,rgb(255 255 255/.06) 58%,rgb(255 255 255/0) 100%), linear-gradient(to bottom,rgb(255 249 242/.86) 0%,rgb(255 243 233/.80) 56%,rgb(255 238 226/.72) 100%), linear-gradient(100deg,rgb(255 210 162/.38),rgb(255 247 238/.38) 48%,rgb(255 202 156/.36)); } /* SIN TRANSPARENCIA NO HAY VIDRIO, y aquí eso significa volver al sólido: el wordmark recupera el papel opaco de siempre. No se queda en el translúcido con las capas subidas porque el punto de esta preferencia es justamente que no haya capas que componer — y de paso se ahorra el archivo animado. */ @media (prefers-reduced-transparency:reduce){ #hero .pol-wm,footer .pol-wm{background-image:linear-gradient(to bottom,rgb(255 249 242),rgb(255 240 228))} } /* RED DE SEGURIDAD: el recorte se apoya en `color:transparent`, así que en un navegador que no soporte background-clip:text el wordmark no se vería distinto — SE VERÍA VACÍO, y lo que desaparece es la marca en el hero. El soporte hoy es universal, pero el costo de esta red es una regla y el de no ponerla es una página sin logotipo. */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ #hero .pol-wm,footer .pol-wm{background-image:none;color:var(--texto-sobre-aurora)} } /* ════ POR QUÉ SE CORTABA LA A (Y LA P) ═════════════════════════════════ El dueño lo reportó CUATRO veces. Las tres primeras respuestas fueron incompletas y vale la pena dejar escrito por qué, porque cada error de método se puede repetir en cualquier otro elemento de esta página. LA CAUSA REAL, la de la cuarta vez, es la que importa: ESTE ELEMENTO NO TIENE COLOR DE TEXTO. Tiene color:transparent y un fondo recortado con background-clip:text — o sea que lo que se ve como tinta ES EL FONDO, y un fondo solo se pinta DENTRO DE LA CAJA DEL ELEMENTO. Si el texto sobresale de su propia caja, ese pedazo no recibe fondo, y como el color es transparente, sencillamente NO SE DIBUJA. No se ve un texto cortado por un contenedor: se ve una letra a medias, con un canto vertical perfecto donde termina la caja. Medido: el borde derecho de la caja caía en 1365 y el último píxel de tinta en 1364. Y la caja era más angosta que el texto —91px— porque este span es un flex item y se encogía. De ahí los tres candados de arriba: · flex:none — no se encoge nunca; su caja pasa a medir lo que mide el texto, que es 4.16em contra los 4.09em que ocupa la tinta. · padding-inline:.04em .14em — un colchón para que la tinta no quede al filo de su propia caja, que es donde muere el fondo. ES ASIMÉTRICO y esa es la parte fina: el letter-spacing de este wordmark es NEGATIVO (-.045em) y se aplica también DESPUÉS de la última letra, así que la caja del texto cierra antes de que termine la tinta de la A. Con un colchón parejo de .04em la A seguía muriendo a 2px del borde en los once anchos medidos — se veía completa de milagro. Del lado izquierdo sobra de nacimiento por el hombro de la P; el que hay que pagar es el derecho. · margin-inline:-.04em -.14em — le devuelve al layout lo que se llevó el padding, para que el bloque siga midiendo y centrándose igual que antes. Y como el conjunto ya no se encoge, tiene que caber de verdad: por eso 23.5vw bajó a 22.5vw en escritorio (ver más abajo). OJO SI ALGÚN DÍA SE TOCA: el mismo tratamiento está en .pol-wm--recorte del design system. Cualquier elemento con background-clip:text hereda esta trampa — su caja tiene que ser más ancha que su texto. LOS OTROS DOS CORTES, que eran de verdad y ya están arreglados: · El bloque que envuelve al wordmark traía overflow:hidden, heredado del diseño original. Recortaba en el borde del bloque —18px por lado en 1024, 11 en 1440, 2 en 1920—. El scroll lateral ya lo corta #hero con overflow-x:clip, en el borde de la PANTALLA, que es donde debe cortar; ese hidden no protegía de nada. Se quitó del HTML. · En una ventana de 652px de alto se cortaba además por la base. LOS ERRORES DE MÉTODO, para no repetirlos: · Se midió en una sola ventana (1905), donde el corte era de 2px e invisible en una captura escalada. Un elemento cuyo tamaño depende del viewport no se verifica en un tamaño: se barre el rango. · Se midió la GEOMETRÍA (dónde debería caer el texto) y se dio por verificado, cuando el defecto estaba en la PINTURA (qué píxeles se dibujan). Los números decían que sobraban 58px y la letra se veía partida. Cuando lo reportado es visual, la prueba es mirar los píxeles. · Al mirar los píxeles, la barra de scroll de Chromium —gris claro, 17px— se contó como tinta y dio "cortada" en los seis anchos. Un falso positivo por el lado contrario. Se excluye siempre. Los dos candados del corte por abajo siguen puestos: · el bloque del wordmark NO se encoge (flex:none). Si no cabe, el hero crece: más vale una pantalla y media que un logotipo mocho. · en pantallas bajas el hero recupera espacio recortando su propio aire, que es de donde tiene que salir. 324px de padding en una ventana de 652 es la mitad de la pantalla gastada en margen. */ #hero>*{flex:none} @media (max-height:820px) and (min-width:1024px){ #hero{--pg-hero-abajo:96px;padding-top:calc(var(--pg-y) / 2 + 32px)} } @media (max-height:620px){ #hero{--pg-hero-abajo:64px} } /* En el teléfono, además, 23.5vw no cabe ni quitando el overflow: la tinta se sale 19px en una pantalla de 390 y 26px en una de 320, y ahí el que recorta es el borde de la pantalla. 20.5vw es el valor medido para que quepa con holgura en 320, que es el estrecho de verdad; la marca pierde un 13% de tamaño y no pierde una letra. EL TAMAÑO VIVE AQUÍ Y NO EN EL ATRIBUTO style DEL HTML, y no es capricho: un estilo inline le gana a cualquier regla de hoja, así que mientras el 23.5vw estuvo escrito en el elemento, esta media query no hacía NADA —se escribió, se midió, y la holgura no se movió ni un píxel—. El HTML ahora pide var(--tam-wordmark) y el valor se decide aquí. EN ESCRITORIO BAJÓ DE 23.5 A 22.5vw. No es gusto: al dejar de encogerse, el bloque ocupa el avance real del texto más el colchón, 4.24em, y a 23.5vw eso son 0.996 anchos de ventana — no cabía en 1024, que es la pantalla apretada de escritorio. A 22.5vw sobran 15px por lado ahí y más en todo lo demás. La marca pierde un 4% de tamaño, que no se nota, y gana no salir mocha, que se notaba. */ :root{--tam-wordmark:22.5vw} @media (max-width:1023.98px){ :root{--tam-wordmark:20.5vw} } /* Aquí vivía una receta aparte del wordmark para el teléfono. Se fue: el relleno es UNO SOLO para todos los aparatos y está arriba. Tener dos era el bug — la del teléfono se quedó atrás y sacó un logotipo manchado. */ /* Aquí vivían las cuarenta líneas que volvían legible en el teléfono la tabla que ya no está. El bloque que ocupaba ese lugar salió de la página por decisión de marca: era un argumento de otra conversación, y al que viene por etiquetas le confundía. El detalle vive en la documentación interna. Con la tabla fuera, su CSS es peso muerto. */ /* ════ LO QUE TIENE PAPEL PROPIO NO TOMA EL COLOR DE LA AURORA ══════════ Esto no es cosmético. Las tarjetas de papel viven sobre una superficie OPACA (--superficie) pero están DENTRO de .aurora, así que heredaban --texto-sobre-aurora: el color pensado para el gradiente, no para el papel. Funcionaba de milagro — en un acorde de día ese color era tinta y coincidía con el de la superficie. Al voltear la polaridad se destapó: quedaban blancos sobre papel blanco. Lo que tiene fondo propio saca su color de ese fondo. Se excluyen las dos que NO tienen papel: la de vidrio, que ya declara --panel-texto, y la calada, que es transparente y sí va sobre la aurora. #pg-panel ENTRA AQUÍ POR LA MISMA RAZÓN, y llegó tarde: es el recuadro que se abre al tocar una pieza del mapa. Todas sus líneas declaran su color menos una —el NOMBRE de la pieza—, así que ese heredaba el papel de la aurora y caía papel sobre papel: se reportó con "Cumplimiento" ilegible. POR QUÉ NO LO CAZÓ EL VERIFICADOR DE CONTRASTE, que es la lección: el panel nace en display:none y solo aparece al TOCAR un nodo. Lo que está oculto no se mide. Un barrido de contraste ve la página en reposo; los estados que solo existen tras un clic hay que abrirlos antes de medir. ⚠ EL PANEL SE SACÓ DEL SELECTOR .aurora, Y NO ES COSMÉTICO. Al volverse modal (2026-08-05) se mudó al —lo obliga el position:fixed— y con eso ".aurora #pg-panel" dejó de casar: el nombre de la pieza volvió a heredar, ahora la tinta del tema claro del , y salió casi negro sobre vidrio oscuro. El mismo bug de antes por el camino contrario. Va suelto porque el panel ya NO depende de dónde cuelgue: lleva su data-acorde y su data-theme puestos, así que resuelve sus tokens solo. */ .aurora .pol-card:not(.pol-card--vidrio):not(.pol-card--calada){color:var(--texto-principal)} #pg-panel{color:var(--texto-principal)} /* ════ GLASSMORFISMO — LA PIEL DE TODOS LOS CONTROLES ═══════════════════ Pedido del dueño (2026-08-04): que todos los botones —y el organigrama— pasen a vidrio. La receta que pidió, textual: panel translúcido, difuminado fuerte del fondo, filo blanco de 1px en cada canto, y profundidad flotante con sombras anchas y suaves. Que el color del arte se vea ATRAVÉS de cada pieza. Y que NO derive en el Liquid Glass de Apple: ahí el vidrio se reserva a la capa de controles que flota sobre el contenido; aquí el vidrio es una piel decorativa que se le pone a cualquier superficie, tarjetas incluidas. ESTO NO ES UN SISTEMA NUEVO, ES TERMINAR EL QUE YA HABÍA. El design system ya hacía vidrio: .aurora-panel, .aurora-antetitulo y .pol-card--vidrio ya traen fondo translúcido + backdrop-filter + filo + color de panel. De las 12 tarjetas de la página, 10 ya eran de vidrio. Los únicos que se habían quedado en papel opaco eran justo los que se tocan: los nueve botones y los diecisiete nodos del mapa. Esta ronda los alinea y de paso sube los tres parámetros del vidrio viejo (8-10px de difuminado, filo al .16) a los que pidió el dueño (16px, filo al .25). ════ POR QUÉ HAY DOS VIDRIOS Y NO UNO, Y ES ARITMÉTICA, NO GUSTO ════ La receta canónica —blanco al 12% con texto blanco— asume un fondo oscuro. El de esta página va de casi negro (Brasa, en el hero) a casi blanco (Laguna, medido en 0.90 de luminancia). Ningún relleno translúcido con texto blanco encima aguanta ese recorrido: sobre un fondo claro haría falta subirlo al 85% para pasar AA, y al 85% ya no es vidrio, es pintura. La salida es elegir el PAR relleno+texto, no solo el relleno: · VIDRIO CLARO blanco al 55% + texto TINTA. Medido contra los dos extremos posibles: 5.03:1 sobre negro puro y 16.9:1 sobre blanco puro. Pasa AA sobre CUALQUIER fondo que el arte pueda producir, en cualquier punto de la deriva. · VIDRIO OSCURO negro cálido al 62% + texto PAPEL. Mismo barrido: 5.22:1 sobre blanco puro, y crece desde ahí. Los dos dejan pasar entre el 38 y el 45% del arte, que es harto color: el gradiente se ve moverse por dentro del botón. El tinte oscuro es negro CÁLIDO (14 9 6) y no gris: gris frío está prohibido por la marca. ════ LA JERARQUÍA NO SE PIERDE ════ Vidrio claro = lo que hay que pulsar (el CTA sobre la aurora). Vidrio oscuro = lo de apoyo (el secundario, el contorno, los conmutadores). Vidrio de marca = el primario naranja, que NO se blanquea: es el botón del formulario y el de la sección de precio, y despintarlos habría cambiado la conversión sin que nadie lo pidiera. Se queda naranja y se vuelve vidrio. ════ LA PALANCA, SI ALGÚN DÍA HAY QUE MOVERLO ════ Son cuatro números y están todos aquí arriba: --vidrio-alfa (oscuro), --vidrio-alfa-claro (claro), --vidrio-alfa-marca (primario) y --vidrio-alfa-nav (el botón del menú). Bajarlos deja pasar más color y cuesta contraste; subirlos hace lo contrario. Debajo de ~.50 el texto empieza a fallar sobre los acordes claros. ⚠️ El cuarto juega con otras reglas y por eso vive aparte: el botón del menú no lleva texto, así que su piso es 3:1 y no 4.5:1. Ese umbral NO se le puede aplicar a los otros tres, que sí llevan letra encima. */ :root{ --vidrio-difuminado:16px; --vidrio-saturado:1.4; --vidrio-tinta:14 9 6; /* Alfas de los vidrios que no pasan por --panel-alfa: obsidiana (menu, puertas y ventana) y tarjeta de papel sobre arte vivo. Son tokens y no literales para que la peticion de transparencia reducida los apague a todos de una vez. */ --obsidiana-alfa:.78;--obsidiana-alfa-ventana:.92;--papel-alfa:.88; --vidrio-alfa:.62; /* ⚠️ IBA EN .52, O SEA MÁS TRANSPARENTE QUE EL REPOSO, y esa era la dirección equivocada: la tinta es oscura (14 9 6) y el texto de estos botones es crema, así que aclarar el vidrio ACERCA los dos y cuesta contraste. Es lo mismo que ya advierte la nota de aquí arriba —"debajo de ~.50 el texto empieza a fallar"—, sólo que esa nota enumera TRES números medidos y los de hover no estaban entre ellos: nadie los había medido nunca. MEDIDO el 7-ago: .pol-btn--secundario sobre el fondo más claro de /ecosistema y /servicios caía de 5.56 a 3.94, contra el piso de 4.5. Los otros tres botones de vidrio pasaban sólo por tener holgura. Ahora sube en vez de bajar, con el mismo salto de .10 que tenía: el hover se siente igual de firme y el texto gana contraste en lugar de perderlo. */ --vidrio-alfa-hover:.72; /* Los nodos van un punto más firmes que los botones (.68 contra .62) y lo pidió la medición, no el gusto: su texto es de 12-14px y encima lleva el color de cada app, que es lo más delicado del reparto. Con .62, el rótulo de POLARA Estudio caía a 4.42 —de 4.5— pero SOLO con el panel abierto, que estira la sección y le corre por debajo otra banda del arte. Con .68 pasa con el panel abierto y cerrado, en los 22 nodos. */ --vidrio-alfa-nodo:.68; /* EL BOTÓN DEL MENÚ VA MÁS ABIERTO QUE EL RESTO DEL VIDRIO (.53 contra .62), y puede permitírselo porque NO LLEVA TEXTO: su contenido son tres barras de `background:currentColor`, o sea un objeto gráfico de interfaz, cuyo mínimo es 3:1 y no el 4.5:1 que le toca a una letra. Ahí está el margen que los botones con texto no tienen, y por eso el número vive aparte en vez de mover --vidrio-alfa, que es el vidrio de las seis páginas. MEDIDO el 11-ago con verificacion/graficos.mjs, barriendo el scroll completo de las cinco páginas en dos anchos y varios momentos del video: el peor caso del sitio pasa de 5.26 a 3.84, contra el piso de 3. El peor fondo es una franja de papel claro y aparece en cuatro de las cinco páginas. ⚠️ Barrer el scroll no es adorno: el botón es fixed y su fondo cambia de forma continua, así que mirar sólo el arranque de la página da 4.05 y se salta el punto malo, que está en 3.84. */ --vidrio-alfa-nav:.53; /* SUBE .10 en hover, igual que el vidrio general y por la misma razón que ya quedó medida arriba: la tinta es oscura y las barras son crema, así que aclarar el vidrio ACERCA los dos y cuesta contraste. Un hover más transparente que el reposo es la dirección equivocada. */ --vidrio-alfa-nav-hover:.63; /* EL VIDRIO CLARO DE NOCHE (Brasa, Amanecer, Boreal) — los de día los pone el bloque de polaridad, arriba. Sobre el negro del hero, un cristal cerrado da gris y el CTA se ve apagado; abierto al 20% da un panel de luz con el texto en papel, que es como se ve el vidrio sobre fondo oscuro. */ /* .20 ES UN TECHO MEDIDO, NO UN GUSTO. Se probó en .32 buscando más presencia y el CTA del hero cayó a 3.46-4.05 en los cinco anchos. Despejando: sobre la banda del arte que le toca al botón, el máximo que aguanta AA es .214. Se queda en .20 con margen, y la presencia se gana por otro lado — el resplandor de marca de abajo, que no cuesta contraste. */ --vidrio-alfa-claro:.20; --vidrio-alfa-claro-hover:.30; /* EL VIDRIO CLARO DEL ENCABEZADO, y vive aparte de --vidrio-alfa-claro a propósito. El encabezado es `position:fixed`: no está dentro de ningún acorde, así que heredaría el valor de NOCHE (.20) justo en las páginas donde el fondo es papel. Y no se puede fijar --vidrio-alfa-claro en el sin arrastrar con él a los .pol-btn--papel que caen fuera de acorde. Medido: la marca en tinta sobre este cristal da de 5.61 a 17.76 contra el piso de 4.5. El caso grande es la página del aviso, que pasa de 5.26 a 17.76 porque ahí el encabezado recorre casi todo el camino sobre papel liso. */ --vidrio-alfa-cabeza:.55; --vidrio-alfa-cabeza-hover:.70; --vidrio-claro-texto:var(--texto-aurora-papel); --vidrio-claro-filo:rgb(255 255 255/.55); --vidrio-alfa-marca:90%; --vidrio-filo:rgb(255 255 255/.25); --vidrio-filo-alto:rgb(255 255 255/.46); --vidrio-realce:inset 0 1px 0 rgb(255 255 255/.30); --vidrio-sombra:0 12px 32px -10px rgb(0 0 0/.42),0 3px 10px -4px rgb(0 0 0/.24); /* LA MISMA SOMBRA, PARA EL VIDRIO QUE VA SOBRE PAPEL. La de arriba es negro puro y está pensada para un chip oscuro sobre fondo oscuro, donde no hay con qué comparar el tono. Debajo de un cristal casi blanco sobre papel liso ese negro genérico deja un halo gris que choca de temperatura con el filo, que sí va tintado — y le quita a la pieza justo el aire de vidrio que se buscaba. Misma geometría, menos alfa, y tinta cálida en vez de negro: la pieza entera queda de un solo tono. */ --vidrio-sombra-papel:0 12px 32px -10px rgb(26 19 16/.14),0 3px 10px -4px rgb(26 19 16/.10); --vidrio-sombra-alta:0 18px 44px -12px rgb(0 0 0/.52),0 5px 14px -5px rgb(0 0 0/.30); } /* En el teléfono el difuminado baja a 12px. No es cosmético: cada superficie con backdrop-filter es una pasada de GPU por cuadro, y aquí hay una por nodo del mapa mientras el gradiente además se está moviendo con el scroll. 12px se ve igual a esa distancia y cuesta menos batería. */ @media (max-width:1023.98px){ :root{--vidrio-difuminado:12px} } /* El vidrio que YA existía se pone al día con la receta nueva. Solo sube el difuminado y el filo; el relleno lo siguen decidiendo --panel-alfa y --panel-alfa-firme, que están medidos y no se tocan. */ [data-acorde]{--panel-borde:rgb(255 255 255/.25)} .aurora-panel,.pol-card--vidrio{ -webkit-backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); box-shadow:var(--vidrio-sombra),var(--vidrio-realce); } .aurora-antetitulo{ -webkit-backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); box-shadow:var(--vidrio-realce); /* EL CHIP SE MIDE POR SU TEXTO, NO POR SU CONTENEDOR. Es inline-flex, pero dentro de una caja en columna el valor por omisión lo ESTIRA de lado a lado. Los chips que se veían bien no lo hacían por el componente: lo hacían porque su contenedor declaraba align-items:flex-start, una regla implícita que nunca se escribió como parte del chip. En cuanto una superficie no la copiaba, salía una barra en vez de una píldora. Medido antes de esta línea: "Lo que sí te garantizamos" ocupaba 1200px con 241px de texto, y los tres "Nivel" salían de ancho completo. No se notaba porque esos textos no tenían fondo: al darles el chip, la caja se dibuja y el estirón se ve. Aquí queda como invariante del componente. */ align-self:flex-start; } /* ── EL ANTETÍTULO QUE NO VIVE DENTRO DE UN ACORDE ──────────────────────── El chip toma su polaridad del acorde de la sección. Cuando lo ponen en una sección de papel liso —sin data-acorde y sin la clase aurora— no hereda ninguna, así que cae en los valores de reposo, que son los de noche: texto papel sobre vidrio oscuro. Y detrás no hay noche: hay papel sólido. El vidrio no alcanza a oscurecer y sale papel sobre papel. Aquí se le da la polaridad que le toca por el fondo que de verdad tiene. NO cuesta translucidez: el relleno sigue siendo el mismo, sólo cambia de qué lado está. Medido: los dos casos del sitio pasan de 2.49 a 15.95 y 14.32, y ningún otro antetítulo se mueve, porque el selector no los toca. Va con :not() y no con una clase nueva para que funcione sola: una sección futura sobre papel liso queda cubierta sin que nadie se acuerde. */ .aurora-antetitulo:not([data-acorde] *){ --panel-base:var(--texto-aurora-papel); --panel-texto:var(--texto-aurora-tinta); --panel-borde:rgb(26 19 16/.12); } /* ── LOS BOTONES ────────────────────────────────────────────────────────── El orden importa: esta hoja carga DESPUÉS de componentes.css, así que una regla de una sola clase (.pol-btn) le gana aquí a .pol-btn--secundario de allá por orden de aparición. Por eso cada variante se vuelve a declarar abajo: si no, todos los botones saldrían iguales. */ .pol-btn{ background-color:rgb(var(--vidrio-tinta)/var(--vidrio-alfa)); background-image:none; -webkit-backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); border:1px solid var(--vidrio-filo); box-shadow:var(--vidrio-sombra),var(--vidrio-realce); color:var(--texto-aurora-papel); transition:background-color var(--dur-rapida) var(--ease-estandar),border-color var(--dur-rapida) var(--ease-estandar),box-shadow var(--dur-media) var(--ease-estandar),transform var(--dur-rapida) var(--ease-estandar); } /* EL HOVER RESPONDE CON MOVIMIENTO, NO CON COLOR (decision del dueno). El boton sube 1px y su filo de vidrio se aclara. Ni el texto ni el relleno cambian de color, y la razon es que el color en reposo es el unico que esta medido: cualquier viraje abre un segundo estado que ningun medidor mira. ⚠️ EL RELLENO SE VUELVE A DECLARAR AQUI CON SU VALOR DE REPOSO, y no se quita y ya. El design system trae su propio :hover para cada variante y le sube el fondo; borrar la linea de aqui no apaga aquella, la deja ganar. Se neutraliza escribiendola, no omitiendola. Lo mismo abajo en cada variante. El levante va en `transform`, que no toca el plano de la pagina: no obliga a recalcular posiciones ni empuja a los vecinos. Y :active sigue mandando por encima, porque va declarado despues. */ .pol-btn:hover{ background-color:rgb(var(--vidrio-tinta)/var(--vidrio-alfa)); border-color:var(--vidrio-filo-alto); box-shadow:var(--vidrio-sombra-alta),var(--vidrio-realce); transform:translateY(-1px); } .pol-btn:active{transform:translateY(1px);box-shadow:var(--vidrio-sombra),var(--vidrio-realce)} /* VIDRIO CLARO — el CTA sobre la aurora. Antes era blanco sólido; ahora deja pasar el 45% del arte y el texto sigue en tinta, que es lo que lo salva. */ .pol-btn--papel{ background-color:rgb(255 255 255/var(--vidrio-alfa-claro)); background-image:linear-gradient(to bottom,rgb(255 255 255/.16),rgb(255 255 255/0)); border-color:var(--vidrio-claro-filo); color:var(--vidrio-claro-texto); /* EL RESPLANDOR DE MARCA es lo que separa este botón del de al lado. Hacía falta: sobre la noche el vidrio claro va abierto al 20% para no romper el contraste, y así de abierto pesa casi lo mismo que el secundario. Un halo cálido debajo lo enciende sin tocar ni el relleno ni el texto, o sea sin gastar un punto de contraste. Sobre los acordes de día el arte ya es luminoso y el halo casi no se nota: ahí la jerarquía la da el relleno. */ box-shadow:var(--vidrio-sombra-alta),0 10px 34px -8px color-mix(in srgb,var(--acento) 62%,transparent),inset 0 1px 0 rgb(255 255 255/.55); } /* El :hover del design system era filter:brightness(). Se sustituye a propósito: `filter` en el MISMO elemento que lleva backdrop-filter cambia cómo se compone el fondo y en algunos navegadores lo apaga. Aquí el hover sube el relleno, que hace lo mismo a la vista y no toca la composición. */ .pol-btn--papel:hover{filter:none;background-color:rgb(255 255 255/var(--vidrio-alfa-claro));border-color:rgb(255 255 255/.86)} /* ── EL CTA DE LAS DOS PORTADAS VUELVE AL VIDRIO CLARO DE DÍA (2026-08-07) ── "Pide tu diagnóstico gratis" es el ÚNICO botón de conversión de /servicios y /ecosistema, y se caía en las pantallas anchas: 4.32 a 1440 y **2.13 a 1920** en /servicios, 3.29 a 1920 en /ecosistema. 1920 es la pantalla de escritorio más común, y ese ancho nunca se había medido en esas dos páginas. LA CAUSA no es el botón: es que la banda del arte que le toca CAMBIA con el ancho. Brasa es un acorde vertical y `cover` lo escala por el ANCHO, así que en pantalla angosta bajo el botón cae el verde oscuro y en pantalla ancha cae el naranja brillante. La sección está en polaridad de NOCHE —el vidrio claro abierto al 20% con el texto en papel—, que es correcto sobre lo oscuro y se vuelve blanco sobre claro en cuanto la banda se ilumina. **Ninguna polaridad FIJA sirve aquí**; lo que sirve es un PAR relleno+texto de los dos que el LEEME autoriza, y éste es el par de día. Medido en los seis anchos y en las dos páginas: con .55 + tinta pasa en los doce casos. (El par oscuro —negro cálido .62 + papel— también pasa en los doce; se escogió el claro porque el botón de al lado es oscuro y así el principal se sigue leyendo como principal.) ⚠️ POR QUÉ ESTO NO TOCA EL HERO DE LA LANDING, que es el mismo acorde y el mismo botón: el hero es `#hero`, no `#portada`. Y ahí el `.20` NO es un gusto sino un TECHO MEDIDO —está anotado arriba: se probó en .32 y el CTA del hero cayó a 3.46-4.05—. Subir el token global habría arreglado dos páginas rompiendo la principal. ⚠️ DOS COSAS QUE SE PROBARON Y NO SIRVEN, para no repetirlas: · El VELO de la sección. `calibrar()` pide .51 para que Brasa aguante este botón a 1920, y a .51 el naranja del acorde se vuelve café. El lever correcto no es el arte. · Cambiar la clase a `.pol-btn--secundario`. NO GANA: el relleno computado se queda igual, así que la primera medición dio el mismo 2.13 y parecía que el vidrio oscuro no servía. No era cierto: cambiar de clase no toca ese relleno, así que no había nada que medir. Por eso aquí se mueven los TOKENS en el propio elemento en vez de pelear con clases: las reglas de `.pol-btn--papel` los leen de su propio ámbito y no hay pleito de especificidad ni `!important`. */ #portada .pol-btn--papel{ --vidrio-alfa-claro:.55; --vidrio-alfa-claro-hover:.70; --vidrio-claro-texto:var(--texto-aurora-tinta); --vidrio-claro-filo:rgb(255 255 255/.46); } /* VIDRIO DE MARCA — el primario. Al 90% deja pasar poco arte, y es deliberado: es el botón de enviar el formulario y el de la sección de precio, los dos sobre papel casi blanco, donde el texto va en blanco. Con menos relleno el texto blanco cae por debajo de AA (medido: al 86% da 4.46:1 sobre el lienzo; al 90% pasa). El vidrio se nota en el filo, el realce de arriba y la sombra ancha, no en la transparencia. */ .pol-btn--primario{ background-color:color-mix(in srgb,var(--acento) var(--vidrio-alfa-marca),transparent); border-color:rgb(255 255 255/.34); color:var(--texto-sobre-acento); box-shadow:var(--vidrio-sombra-alta),inset 0 1px 0 rgb(255 255 255/.28); } .pol-btn--primario:hover{background-color:color-mix(in srgb,var(--acento) var(--vidrio-alfa-marca),transparent);border-color:rgb(255 255 255/.72)} .pol-btn--primario:active{background-color:var(--acento-press)} /* VIDRIO OSCURO — el de apoyo. El contorno va más ligero (vive solo en el hero, sobre el negro de Brasa, donde el texto papel sobra de contraste) y el secundario lleva el relleno completo porque los conmutadores del mapa caen sobre Granada, que es mucho más claro. */ .pol-btn--contorno-papel{background-color:rgb(var(--vidrio-tinta)/.20);border-color:rgb(255 255 255/.22);color:var(--texto-aurora-papel);box-shadow:var(--vidrio-sombra),var(--vidrio-realce)} .pol-btn--contorno-papel:hover{background-color:rgb(var(--vidrio-tinta)/.20);border-color:var(--vidrio-filo-alto)} .pol-btn--secundario{background-color:rgb(var(--vidrio-tinta)/var(--vidrio-alfa));border-color:var(--vidrio-filo);color:var(--texto-aurora-papel)} .pol-btn--secundario:hover{background-color:rgb(var(--vidrio-tinta)/var(--vidrio-alfa));border-color:var(--vidrio-filo-alto)} .pol-btn--secundario:active{background-color:rgb(var(--vidrio-tinta)/var(--vidrio-alfa))} /* EL FOCO TIENE QUE VERSE SOBRE LOS DOS VIDRIOS Y SOBRE CUALQUIER ACORDE. El par claro+oscuro lo pone el anillo de sitio; esta regla existe sólo para conservar el vidrio del botón, que un box-shadow de foco borraría —esa propiedad no se suma—. Los colores salen de los tokens del par, no se reescriben aquí: un valor copiado es un valor que se queda atrás. */ .pol-btn:focus-visible,#pg-caja [role="button"]:focus-visible,#pg-marco [role="button"]:focus-visible{ outline:2px solid var(--foco-filo); outline-offset:2px; box-shadow:var(--vidrio-sombra-alta),var(--vidrio-realce),0 0 0 5px var(--foco-halo); } /* ── EL ORGANIGRAMA ─────────────────────────────────────────────────────── Las diecisiete piezas del mapa eran lo último que quedaba en papel opaco. Ahora son vidrio TINTADO CON EL ACENTO DE SU APP: el 16% del color de la pieza va disuelto en el tinte, así que cada tarjeta lleva su color por dentro y no solo en una línea del borde. Eso refuerza lo que la leyenda de la sección promete —"el color dice qué aplicación es"— en vez de dejarlo colgando de un filo de 3px. POR QUÉ EL TEXTO DE LOS NODOS CAMBIÓ DE COLOR SOLO: cada nodo lleva data-theme="dark" (lo pone mapa.js, y ahí está explicado por qué en el nodo y no en un ancestro). Al volverse vidrio oscuro, la tarjeta dejó de ser papel, y el design system ya trae medida la paleta para superficie oscura: los acentos por app cambian a su versión clara, los grises de texto suben. No se inventó ningún color aquí. EL FILO DE LOS SERVICIOS SIGUE PUNTEADO. Es información, no adorno: la leyenda dice que borde punteado = servicio. Lo único que cambia es que el punteado ya no es gris de papel sino blanco translúcido, que es lo que se ve sobre vidrio. ⚠ POR QUÉ AQUÍ NO HAY backdrop-filter, Y ES LO MENOS INTUITIVO DE TODA LA RONDA. El difuminado se escribió, se probó y SE QUITÓ, con la medición hecha: dentro de #pg-marco, subir el difuminado de un nodo de 0 a 30px mueve el peor píxel 2 de 255 y el promedio 0.01. O sea NADA. La causa: un elemento con backdrop-filter se vuelve "raíz de fondo" (backdrop root) para todo lo que cuelgue de él, y el marco YA lleva difuminado por ser .aurora-panel. Desde adentro, los nodos no ven la aurora: ven el relleno plano del marco, y difuminar un color plano devuelve el mismo color plano. Comprobado por el otro lado: quitándole el difuminado al marco, el mismo blur(30) en el nodo SÍ mueve píxeles (peor 17, promedio 7.91). Así que la elección real era una: una pasada de GPU (el marco) o diecisiete (los nodos), y la de diecisiete se ve casi igual. Se queda la del marco, que además cubre toda la superficie del mapa. Los nodos siguen siendo vidrio de verdad —translúcidos, con el arte pasando a través, filo y sombra—; lo que no llevan es una pasada de difuminado que no difumina nada. Los tres conmutadores del mapa SÍ lo llevan: viven fuera del marco, sobre la aurora, y ahí el difuminado trabaja. */ .pg-nodo,.pg-pildora,#pg-panel{ background-color:color-mix(in srgb,color-mix(in srgb,var(--acento) 16%,rgb(var(--vidrio-tinta))) calc(var(--vidrio-alfa-nodo) * 100%),transparent); border:1px solid var(--vidrio-filo); border-radius:var(--radio-md); box-shadow:var(--vidrio-sombra),var(--vidrio-realce); /* SOBRE VIDRIO NO CABEN TRES GRISES DE TEXTO, CABEN DOS. El terciario es el que usan "9 agentes adentro", "cuelga de Finanzas" y los rótulos del panel: sobre papel opaco mide 5.8:1 y sobrado, pero el vidrio deja pasar el arte y ahí el mismo gris cae entre 4.09 y 4.48 — debajo del 4.5 por un pelo, y medido en los cinco anchos. Fueron las ÚNICAS siete regresiones que dejó esta ronda; el resto del reporte salió idéntico al de antes. En vez de perseguirlas una por una, el terciario se colapsa al secundario mientras esté sobre vidrio: la jerarquía la siguen dando el tamaño y el peso, que es de donde debía venir. */ --texto-terciario:var(--texto-secundario); } .pg-nodo--app{border-top:3px solid var(--acento)} .pg-nodo--tu{border:2px solid var(--marca)} .pg-nodo--consejo{border:2px solid var(--acento);box-shadow:var(--vidrio-sombra-alta),var(--vidrio-realce)} .pg-nodo--servicio{border:2px dashed var(--vidrio-filo-alto);box-shadow:var(--vidrio-realce)} /* El nodo ALZADO —el activo o el fijado—. Vivía como estilo en línea escrito por mapa.js, y desde ahí le ganaba a la hoja entera: enfocar un nodo lo vuelve activo, así que el anillo de foco perdía su halo justo en los treinta nodos del mapa. Aquí es una clase y la regla de foco le gana por especificidad. */ .pg-nodo--alzado{transform:translateY(-3px);box-shadow:var(--vidrio-sombra-alta),var(--vidrio-realce)} .pg-pildora{background-color:rgb(255 255 255/.14);border-color:var(--vidrio-filo)} .pg-chip{ border:1px solid var(--vidrio-filo); background-color:color-mix(in srgb,var(--acento) 26%,transparent); color:var(--texto-principal); } /* ════ EL DETALLE DEL MAPA ES UN MODAL ══════════════════════════════════ Pedido del dueño (2026-08-05), y el diagnóstico es suyo: "cuando le das click a algo se abre un texto abajo del mapa, pero no cabe en la pantalla; no te enteras de que apareció, solo ves las líneas". El mapa tiene 22 piezas y TODO su contenido vivía en ese panel, así que la información estaba ahí sin que nadie la viera. Un panel que se abre fuera de cuadro es información que no existe. position:fixed CENTRA EN LO QUE ESTÁS VIENDO, no en la página: sea cual sea el punto del mapa que tocaste y a qué altura vayas del documento, el detalle sale enfrente. Eso es exactamente lo que se pidió — "en el centro de la pantalla enfocada al momento de dar click, no centrado en la página, que haya que buscar dónde apareció". ⚠ PARA QUE ESE fixed SIGNIFIQUE ALGO, EL PANEL TUVO QUE MUDARSE AL (se hace en mapa.js). Nacía dentro de #pg-marco, que lleva backdrop-filter —y eso lo vuelve bloque contenedor, así que fixed se habría anclado al MARCO en vez de a la pantalla— y encima overflow:hidden, que lo habría recortado. Quien mueva este panel de sitio tiene que revisar esa cadena otra vez. El vidrio ya se lo da la regla de arriba; aquí solo se le suma el difuminado real, que ANTES NO TENÍA: dentro del marco era un no-op medido —el marco ya difuminaba y desde adentro no se ve la aurora, se ve su relleno plano—, pero sobre el body sí trabaja y el mapa se ve borroso a través del panel, que es lo que hace que se lea como cristal encima y no como una tarjeta pegada. */ #pg-panel{ position:fixed;z-index:61;left:50%;top:50%;translate:-50% -50%; flex-direction:column; width:min(32rem,calc(100vw - 2rem)); /* svh y no vh: en el teléfono vh mide la ventana SIN la barra del navegador, así que un 80vh se sale por abajo justo en los aparatos donde más duele. */ max-height:min(80svh,42rem); margin:0; border-radius:var(--radio-lg); box-shadow:var(--vidrio-sombra-alta),var(--vidrio-realce); -webkit-backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); } /* SE DESPLAZA EL CUERPO, NO EL PANEL. Si el que se desplazara fuera el panel, la X se iría con el texto en cuanto el detalle sea largo — y una X que se va es una trampa. El padding derecho es el hueco que le deja a la X. */ #pg-panel .pg-cuerpo{overflow:auto;overscroll-behavior:contain;min-height:0;padding-right:1.9rem} #pg-velo{ position:fixed;inset:0;z-index:60; background-color:rgb(0 0 0/.42); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); } #pg-velo[hidden]{display:none} /* El velo no tapa el mapa, lo aparta: se sigue viendo detrás del cristal, que es lo que se pidió para poder seguir leyéndolo. De paso oscurece el fondo lo suficiente para que el texto del panel gane contraste en vez de perderlo. */ .pg-cerrar{ position:absolute;top:.55rem;right:.55rem;z-index:2; width:2rem;height:2rem;display:grid;place-items:center; font-size:1.35rem;line-height:1;cursor:pointer; border-radius:999px; border:1px solid var(--vidrio-filo); background-color:rgb(var(--vidrio-tinta)/.42); color:var(--texto-principal); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } .pg-cerrar:hover{background-color:rgb(var(--vidrio-tinta)/.62);border-color:var(--vidrio-filo-alto)} .pg-cerrar:focus-visible{outline:2px solid var(--foco-filo);outline-offset:2px} @media (prefers-reduced-motion:reduce){#pg-panel,#pg-velo{transition:none}} /* ── LAS DOS SALIDAS DE EMERGENCIA ──────────────────────────────────────── 1. Navegador sin backdrop-filter: sin difuminado, el vidrio se queda en pura transparencia y el texto pierde el fondo que lo sostenía. Se sube el relleno hasta donde aguanta solo. 2. prefers-reduced-transparency: hay quien pide explícitamente que no haya capas translúcidas —mareo, baja visión, o simplemente preferencia—. Ahí el vidrio se vuelve sólido y la página queda como antes de esta ronda. Se apaga también el difuminado: sin transparencia no filtra nada y seguiría costando GPU. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ /* El hover sube en vez de bajar, por la misma razón medida que allá arriba. Aquí el salto era de .08 (.80→.72) y se conserva, ahora hacia lo firme. */ /* El botón del menú vuelve al valor general en vez de conservar el suyo, y no es descuido: lo que le permite ir más abierto es que el difuminado enturbia lo que pasa por detrás. Sin difuminado ese fondo llega nítido, se lee a través del ícono y deja de parecer una pieza. */ /* --vidrio-alfa-cabeza entra aquí con todos los demás. Sin difuminado, un cristal blanco al .55 deja pasar el papel de atrás nítido y el encabezado deja de leerse como pieza; sube al .78 igual que sube el resto. */ :root{--vidrio-alfa:.80;--vidrio-alfa-hover:.88;--vidrio-alfa-nodo:.84;--vidrio-alfa-nav:.80;--vidrio-alfa-nav-hover:.88;--vidrio-alfa-claro:.34;--vidrio-alfa-claro-hover:.46;--vidrio-alfa-marca:96%;--vidrio-alfa-cabeza:.78;--vidrio-alfa-cabeza-hover:.88} [data-acorde="ambar"],[data-acorde="granada"],[data-acorde="jacaranda"],[data-acorde="marea"], [data-acorde="duna"],[data-acorde="rubor"],[data-acorde="laguna"],[data-acorde="prisma"], [data-acorde="horizonte"]{--vidrio-alfa-claro:.86;--vidrio-alfa-claro-hover:.94} } @media (prefers-reduced-transparency:reduce){ /* Sin transparencia el vidrio claro NO puede quedarse en blanco sólido sobre la noche: su texto ahí es papel, y papel sobre blanco no se lee. Vuelve al par sólido de siempre — relleno papel, texto tinta — en los dos casos. */ /* El botón del menú entra aquí con todos los demás. Quien pide que no haya capas translúcidas lo pide para TODAS, y este botón flota justo encima del texto: dejarlo abierto sería incumplir la petición donde más se nota. */ :root{--vidrio-alfa:1;--vidrio-alfa-hover:1;--vidrio-alfa-nodo:1;--vidrio-alfa-nav:1;--vidrio-alfa-nav-hover:1;--vidrio-alfa-claro:1;--vidrio-alfa-claro-hover:1;--vidrio-claro-texto:var(--texto-aurora-tinta);--vidrio-alfa-marca:100%;--vidrio-difuminado:0px;--vidrio-alfa-cabeza:1;--vidrio-alfa-cabeza-hover:1} .pol-btn,.aurora-panel,.pol-card--vidrio,.aurora-antetitulo,.nav__btn{-webkit-backdrop-filter:none;backdrop-filter:none} /* EL RELLENO DEL VIDRIO SE APAGA CON EL UNIVERSAL, NO CON UNA LISTA. Esto empezo siendo una lista de selectores repetidos y fue un error de diseno: el relleno se fija en DIECISEIS sitios entre esta hoja y los doce acordes, y bastaba que uno faltara para que esa seccion se quedara translucida ante alguien que pidio al sistema que no lo fuera. La lista fallo por las tres vias posibles, las tres medidas: · por ORDEN — .pg-recuadros vuelve a fijar su relleno mas abajo en este mismo archivo, con la misma especificidad, y ganaba; · por ESPECIFICIDAD — un id le gana a [data-acorde] este donde este; · por FORMA — un @media no aporta especificidad, asi que un selector de alla arriba con un :not() pesa mas que el mismo id escrito aqui. El universal con !important cierra las tres de una vez y, sobre todo, deja de ser una lista que alguien tiene que acordarse de ampliar: una seccion nueva queda cubierta sin que nadie haga nada. Es la unica regla del archivo con !important, y se gana el permiso porque expresa una peticion explicita de quien usa el sitio, que debe ganarle a cualquier decision de estilo. Solo toca estas dos propiedades; no hay nada mas apagandose aqui. */ *{--panel-alfa:1!important;--panel-alfa-firme:1!important;--vidrio-difuminado:0px!important;--vidrio-saturado:1!important} /* Los vidrios que no pasan por --panel-alfa se apagan por su propio token, y su difuminado con ellos: medido el 3-sep, seguian translucidos con la peticion puesta (puertas .78, ventana .92, tarjetas de papel .88). */ :root{--obsidiana-alfa:1;--obsidiana-alfa-ventana:1;--papel-alfa:1} /* El difuminado se apaga por su token en el universal de arriba, porque una regla aqui PIERDE POR ORDEN contra las puertas, que lo fijan mas abajo con la misma especificidad (medido: seguian con blur). La lista de abajo queda para los que lo escriben en pixeles y no por token. Con el id delante, porque las puertas fijan su difuminado bajo #puertas y un selector sin id aqui perdia por especificidad (medido: seguian con blur). */ .nav__panel,#puertas .pg-puerta,#puertas .pg-puertas-cierre,.pg-dialogo{-webkit-backdrop-filter:none;backdrop-filter:none} .pol-btn--papel{background-image:none} .pol-btn--primario{background-color:var(--acento)} .pg-pildora{background-color:var(--superficie-alterna)} .pg-chip{background-color:var(--acento-tenue)} } /* ════ EL MARCO DEL MAPA ════════════════════════════════════════════════ En el teléfono el marco suelta sus 24px de padding lateral: son 48px que el anillo necesita para que sus nodos no se toquen. El panel de detalle tenía aquí sus propios márgenes laterales, de cuando vivía dentro del marco. Se quitaron al volverse modal: ahora está centrado con translate y su ancho ya reserva el aire —min(32rem, 100vw - 2rem)—, así que un margen lateral no lo separaba de nada, lo descentraba. */ @media (max-width:1023.98px){ #pg-marco{padding-left:0!important;padding-right:0!important} } /* ════ ALTO CONTRASTE DEL SISTEMA ════════════════════════════════════════ Cuando alguien enciende el alto contraste de Windows, el navegador sustituye por su cuenta los colores de texto, fondo y borde por la paleta que esa persona eligio. El mapa sobrevive completo a esa sustitucion: cada pieza lleva su nombre escrito, asi que se sigue sabiendo cual es cual aunque los diez acentos queden en un solo color. Las lineas que unen las piezas son el unico sitio donde eso no alcanza, por dos razones que se juntan. Son lo unico del mapa que NO lleva rotulo: su color es todo lo que dicen. Y el navegador no sustituye el trazo de un SVG -- la sustitucion cubre color, fondo y borde, no `stroke` -- asi que se quedaban en su tono original, pastel y a media opacidad, encima del fondo claro que el sistema acababa de forzar. Casi invisibles, y justo para quien pidio maximo contraste. Van al color de texto del sistema. Se pierde de que aplicacion es cada linea, y esta bien: eso se recupera siguiendola hasta la pieza, que si esta rotulada. Lo que no se recuperaba era la linea entera. El !important no es adorno: mapa.js escribe `stroke` como estilo en linea al pintar cada trazo, y un estilo en linea le gana a la hoja entera. La opacidad se deja como esta, porque es la que distingue las conexiones de la pieza abierta de las demas -- y esa jerarquia no depende del color. */ @media (forced-colors:active){ #pg-caja svg line{stroke:CanvasText!important} } /* ════ MOVIMIENTO — la coreografía de ESTA página ════════════════════════ El vocabulario ya vive en el design system (tokens/movimiento.css): aquí solo se decide qué lo usa y dónde se apaga. Todo corre con animation-timeline: view(), o sea fuera del hilo principal; donde el navegador no lo soporte la declaración se ignora y el elemento se queda en su estado final, visible. Nada depende de JavaScript de scroll. · aurora--deriva el gradiente VIAJA mientras su sección cruza la pantalla. Es el efecto que hace que los acordes se fundan uno en otro al bajar. · aurora--respira escala lentísima, ciclo de 26 s. Solo en la noche (Brasa y Amanecer), donde el arte es más oscuro y el movimiento se lee como atmósfera y no como temblor. · aurora--grano-vivo el grano vaga unos píxeles: deja de ser una imagen plana pegada al fondo. ════ POR QUÉ SE APAGAN EN EL TELÉFONO ════ Decisión del dueño, y la razón es de física, no de gusto: el scroll con el dedo es INERCIAL y a saltos, no continuo como el de un trackpad. Una animación ligada a la posición del scroll se ve entrecortada justo donde más gente va a verla. Además, animar la escala de una imagen de 1600px sin parar cuesta cuadros en un teléfono de gama media. Debajo de 1024px se quedan la deriva y el grano —que son baratos— y se va la respiración, que es la única que corre en bucle infinito. */ @media (max-width:1023.98px){ /* OJO CON LA ESPECIFICIDAD, que aqui costo una medicion: el design system define .aurora--deriva.aurora--respira::before -DOS clases- para correr las dos animaciones juntas. Una regla de una sola clase NO la vence, asi que apagar solo .aurora--respira::before no hacia nada en las secciones que tienen las dos, que son todas. Hay que reescribir la combinada dejando unicamente la deriva. */ .aurora--respira::before{animation:none} .aurora--deriva.aurora--respira::before{ animation:mov-deriva var(--dur-deriva) linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ EL MENÚ — una hamburguesa fija, la misma en las seis páginas ═══════════════════════════════════════════════════════════════════════════ Un solo elemento flotante: el ícono. Nada aparece, nada viaja, nada depende del scroll. Al abrirlo entra a pantalla completa sobre el propio fondo difuminado. POR QUÉ NO ES UNA BARRA QUE APARECE AL BAJAR, que era el primer diseño: además de verse sucia mientras cruza la pantalla, dependía de animation- timeline atado al scroll, que Firefox y Safari NO soportan -- lo dice motion-respaldo.js textualmente. Habría dejado el sitio SIN NAVEGACIÓN en todos los iPhone, sin un solo error en pantalla que lo delatara. LO QUE ESTA FORMA VUELVE INNECESARIO, y por eso es más simple: no hay sticky, ni @supports, ni respaldo en JavaScript, ni animación que apagar con prefers-reduced-motion, ni scroll-margin-top en las secciones -- no hay franja que tape el contenido. */ /* .nav cubre la pantalla para que el panel abierto tenga dónde pararse, pero no intercepta nada: los toques pasan de largo y solo sus hijos los reciben. ⚠️ Y .nav NO lleva filtro, transform ni backdrop-filter. Cualquiera de los tres lo volvería bloque contenedor y el panel de adentro se anclaría a él en vez de a la pantalla. El vidrio va en los hijos, nunca aquí. */ .nav{position:fixed;inset:0;z-index:50;pointer-events:none} .nav>*{pointer-events:auto} /* EL ÍCONO VA EN VIDRIO OSCURO, y no es gusto: flota sobre Brasa -- que va de casi negro a naranja en la misma pantalla -- y también sobre el papel del aviso de privacidad. Vidrio oscuro con texto papel es el único par que aguanta los dos extremos (regla 8 del LEEME). Un ícono plano se pierde o se mancha: es lo que le pasó al wordmark y costó tres reportes. */ .nav__btn{ position:absolute;z-index:2; top:max(var(--e-4),env(safe-area-inset-top)); right:max(var(--e-4),env(safe-area-inset-right)); width:52px;height:52px; display:grid;place-items:center; cursor:pointer;list-style:none; border-radius:var(--radio-lg); background-color:rgb(var(--vidrio-tinta)/var(--vidrio-alfa-nav)); -webkit-backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); border:1px solid var(--vidrio-filo); box-shadow:var(--vidrio-sombra),var(--vidrio-realce); color:var(--texto-aurora-papel); transition:background-color var(--dur-rapida) var(--ease-estandar),border-color var(--dur-rapida) var(--ease-estandar); } /* El triángulo de
se quita por TRES caminos porque cada navegador escucha uno distinto: display:grid en el summary (Chrome/Firefox), ::marker vacío (estándar) y el pseudo con prefijo (Safari). */ .nav__btn::-webkit-details-marker{display:none} .nav__btn::marker{content:''} .nav__btn:hover{background-color:rgb(var(--vidrio-tinta)/var(--vidrio-alfa-nav-hover));border-color:var(--vidrio-filo-alto)} /* Las dos piezas de vidrio del encabezado. El par claro+oscuro ya se lo da el anillo de sitio; lo que esta regla agrega es CONSERVAR SU VIDRIO, porque el box-shadow del anillo no se suma al que ya tenían y las dejaba planas mientras estuvieran enfocadas. Un anillo de un solo color aquí no sirve: este botón es position:fixed y flota sobre lo que toque en ese punto del scroll — el intento blanco liso se pierde sobre lo claro: en el barrido de la banda, contra un fondo de luminancia .939 da 1.06:1 contra el piso de 3, o sea invisible en toda /aviso-de-privacidad. ⚠️ Aquí decía 1.008:1, un número que nadie pudo reproducir. Se cambió por el que sí sale del barrido versionado. La conclusión no se movió; el número sí. */ .nav__btn:focus-visible,.nav__marca:focus-visible{ outline:2px solid var(--foco-filo); outline-offset:2px; box-shadow:var(--vidrio-sombra),var(--vidrio-realce),0 0 0 5px var(--foco-halo); } .nav__barras{display:grid;gap:5px;width:22px} .nav__barras span{display:block;height:2px;border-radius:2px;background:currentColor; transition:transform var(--dur-media) var(--ease-estandar),opacity var(--dur-rapida) linear} /* 2+5+2+5+2 = 16px de alto: la barra de arriba baja 7 y la de abajo sube 7 para juntarse en el centro. Si cambia el gap, cambian los dos números. */ .nav[open] .nav__barras span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav[open] .nav__barras span:nth-child(2){opacity:0} .nav[open] .nav__barras span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (prefers-reduced-motion:reduce){.nav__barras span{transition:none}} .nav__panel{ position:absolute;inset:0;z-index:1; display:flex;flex-direction:column;justify-content:center;gap:var(--e-8); padding:calc(env(safe-area-inset-top) + 96px) var(--pg-x) calc(env(safe-area-inset-bottom) + var(--e-12)); overflow:auto;overscroll-behavior:contain; /* EL .78 ES ARITMÉTICA, NO GUSTO. El panel puede caer sobre el negro del hero o sobre el papel del aviso. Contra el peor caso -- papel blanco detrás -- .78 deja el relleno en ~rgb(67,62,60) y el texto papel encima da ~9.5:1. Con .62, que es el del botón, ese peor caso baja a ~5.0 y ya no queda margen para el texto chico. Se mide, no se estima. */ background-color:rgb(var(--vidrio-tinta)/var(--obsidiana-alfa)); -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2); color:var(--texto-aurora-papel); } .nav__lista{ list-style:none;margin:0 auto;padding:0;width:100%;max-width:34rem; display:flex;flex-direction:column;gap:var(--e-1); } /* Las entradas van GRANDES, no en miniatura: en 320px caben así, y el menú es para quien ya decidió ir a otro lado. La caja de toque nunca baja de 48px. */ .nav__lista a{ display:block;min-height:48px;padding:var(--e-3) var(--e-4); border-radius:var(--radio-lg); font-size:var(--txt-titulo-2);font-weight:var(--peso-semi); letter-spacing:var(--track-titulo);line-height:1.3; /* ⚠️ -webkit-text-fill-color MANDA sobre color: la regla de enlace del design system pinta con esa propiedad, y un que solo declare `color` sale del color del acento. Es el bug que dejó el botón primario sin texto. */ color:var(--texto-aurora-papel);-webkit-text-fill-color:var(--texto-aurora-papel); text-decoration:none; transition:background-color var(--dur-rapida) var(--ease-estandar); } /* ⚠️ EL COLOR SE RE-DECLARA EN HOVER Y EN :active, y hace falta. Estos cuatro enlaces son la ÚNICA navegación del sitio y viven dentro de un
que nace cerrado, o sea que sólo existen con el menú abierto. Ahí, sin esta regla, el renglón señalado se iba a terracota sobre el panel casi negro: de 7.41 a **1.13** — el elemento bajo el ratón quedaba MENOS legible que sus tres hermanos. La respuesta al hover se queda en el fondo, que ya estaba y sí se percibe. */ .nav__lista a:hover,.nav__lista a:active{background-color:rgb(255 255 255/.10);color:var(--texto-aurora-papel);-webkit-text-fill-color:var(--texto-aurora-papel)} /* La página en la que estás. aria-current ya lo dice a un lector de pantalla; esto lo dice a los ojos. */ .nav__lista a[aria-current="page"]{ background-color:rgb(255 255 255/.10); box-shadow:inset 0 0 0 1px var(--vidrio-filo); } /* Y al enfocarse, su filo se SUMA al halo en vez de reemplazarlo. Sin esta regla, el renglón de arriba —misma especificidad, más abajo en el archivo— se quedaba con la propiedad entera y este enlace era el único del sitio que recibía medio anillo. Es el mismo patrón que usan el botón del menú y los botones de vidrio: quien necesite conservar lo suyo, lo suma. */ .nav__lista a[aria-current="page"]:focus-visible{ box-shadow:inset 0 0 0 1px var(--vidrio-filo),0 0 0 5px var(--foco-halo); } .nav__panel>.pol-btn{margin-inline:auto;width:100%;max-width:34rem;justify-content:center} /* En el teléfono la página de atrás no se sigue moviendo. Solo ahí: en el escritorio quitar el scroll del html encoge la barra y la página entera da un salto lateral que se ve peor que el problema que resuelve. */ @media (max-width:1023.98px){ html.nav-abierto{overflow:hidden} } /* ═══ LAS FICHAS DE /ecosistema Y /servicios (T4 y T5, 2026-08-05) ═══ Las dos páginas nuevas describen cosas con la misma anatomía —un nombre, un descriptor y cuatro renglones fijos— así que comparten primitivas en vez de repetir estilos en línea veintitantas veces. VAN EN pagina.css Y NO EN UNA HOJA POR PÁGINA a propósito: son de las dos, y una hoja por página habría duplicado las mismas reglas en dos archivos que después se separan solos. Aquí también las hereda cualquier página futura. */ .pg-rejilla{display:grid;grid-template-columns:var(--pg-niveles);gap:var(--pg-gap);align-items:stretch} .pg-rejilla--par{grid-template-columns:var(--pg-2)} /* ⚠️ CINCO TARJETAS EN TRES COLUMNAS DEJAN UN HUECO ABAJO A LA DERECHA. Lo vuelve un hecho y no una opinión que el propio archivo escribió la regla para el caso gemelo 40 líneas antes ("un hueco en el cierre de las diez piezas se lee como que falta algo"): se aplicó a la ficha del Consejo y no a la sección de arriba. Medido: el hueco existe SÓLO de 1024px para arriba. A 390 y 768 la rejilla resuelve a una columna y no hay nada que centrar, así que el arreglo va dentro de la media query y no toca el teléfono. Se usa flex y no grid porque `justify-content:center` centra la última fila sola. Con grid habría que subdividir a seis columnas, y eso adelgaza cada tarjeta en un gap: mismo dibujo, otro ancho. `flex-grow:0` mantiene el ancho de tercio EXACTO, así que las tres de arriba se ven idénticas a hoy. */ @media(min-width:1024px){ .pg-rejilla--cinco{display:flex;flex-wrap:wrap;justify-content:center} .pg-rejilla--cinco>*{flex:0 1 calc((100% - 2*var(--pg-gap))/3)} } /* ⚠️ LA FICHA SUELTA SE LLEVABA 1200px DE RENGLÓN. Dentro de la rejilla la columna ya le pone freno, pero la única que vive FUERA —la del Consejo, que salió de la rejilla por una razón buena y escrita ("un hueco en el cierre se lee como que falta algo")— se llevó consigo el ancho entero: unos 150 caracteres por renglón a 14px, en el remate de las diez piezas. Se cambió un hueco por 150 caracteres. La medida se pone por defecto y se SUELTA dentro de la rejilla, que es donde estorbaría: así cualquier ficha futura fuera de rejilla nace con su freno, en vez de heredar el defecto. */ .pg-ficha{display:flex;flex-direction:column;gap:var(--e-3);max-width:var(--medida-lectura)} .pg-rejilla>.pg-ficha{max-width:none} .pg-ficha__nombre{font-size:var(--txt-titulo-3);line-height:var(--alto-titulo);letter-spacing:var(--track-titulo)} /* ⚠️ EL DESCRIPTOR Y LOS RÓTULOS NO SE APAGAN, Y AQUÍ ESTABA MI ERROR. La primera versión los rebajaba con color-mix contra transparente y el comentario decía que así se evitaba el problema de la opacidad. Es falso: mezclar con transparente ES bajar la opacidad, con otra sintaxis. Medido sobre el vidrio de ámbar daban 2.70:1 y 2.79:1 contra un mínimo de 4.5, y entre los dos ponían 42 de los 149 fallos de la página. Se distinguen por PESO, TAMAÑO y VERSALITAS, que no cuestan contraste. */ .pg-ficha__desc{font-size:var(--txt-meta);font-weight:var(--peso-semi);letter-spacing:var(--track-etiqueta);text-transform:uppercase} /* La cita es la voz del cliente — un punto mas grande que el cuerpo y en cursiva, que distingue sin gastar contraste (misma leccion que el descriptor, tres reglas arriba). El cuerpo lee al tamano de ficha que ya usaban los dd del formato anterior. */ .pg-ficha__cita{margin:0;font-style:italic;font-size:var(--txt-cuerpo-md);line-height:var(--alto-cuerpo)} .pg-ficha__cuerpo{margin:0;font-size:var(--txt-ui);line-height:var(--alto-cuerpo)} .pg-ficha dl{margin:0;display:flex;flex-direction:column;gap:var(--e-1)} .pg-ficha dt{font-size:var(--txt-meta);font-weight:var(--peso-semi);letter-spacing:var(--track-etiqueta);text-transform:uppercase} .pg-ficha dd{margin:0 0 var(--e-3);font-size:var(--txt-ui);line-height:var(--alto-cuerpo)} .pg-ficha dd:last-of-type{margin-bottom:0} /* EL ESTADO SE ANCLA ABAJO Y SE SEPARA CON UNA LINEA. Es el renglón que la página existe para decir con honestidad, y en tarjetas de altura despareja quedaba flotando a media caja en unas y al ras en otras: el ojo no lo encontraba en el mismo lugar dos veces. margin-top:auto lo pega abajo. */ /* ⚠️ EL FILO SE DERIVA DEL TEXTO, NO DE --vidrio-filo. Ese token es blanco al 25%: sirve sobre vidrio y se pierde sobre papel claro, porque blanco al 25% sobre blanco puro no existe. Y estas fichas viven en las dos superficies. Se resuelve igual que su vecina .pg-lista-plana, 10 líneas abajo, y por la misma razón escrita ahí: derivado de currentColor, el filo se tiñe con el color del texto donde caiga, así que nunca puede quedar del tono de su fondo. El 25% se conserva para que las fichas de vidrio no cambien. */ .pg-ficha__estado{margin-top:auto;padding-top:var(--e-3);border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);font-size:var(--txt-ui);line-height:var(--alto-cuerpo)} /* La lista de agentes y la de trámites: renglones sueltos, no viñetas. ⚠️ EL TINTE SALE DEL PROPIO COLOR DEL TEXTO, no de --superficie-alterna. Con la superficie del design system estas píldoras midieron 1.11:1: es un papel claro, y adentro de un panel de vidrio el texto que hereda es blanco. Papel claro con texto blanco es papel sobre papel — el mismo error que ya había mordido en la tabla que vivía aquí y en las píldoras del mapa. Derivándolo de currentColor, la píldora se tiñe con el color que tenga el texto donde caiga, así que nunca puede quedar del mismo tono que su letra. */ .pg-lista-plana{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--e-2)} .pg-lista-plana>li{padding:6px 12px;border-radius:var(--radio-pill);background:color-mix(in srgb,currentColor 12%,transparent);border:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:var(--txt-ui);line-height:1.35} /* ⚠️ EL VIDRIO SE CIERRA EN LAS SECCIONES QUE LLEVAN RECUADROS. Esto NO es una decisión nueva: es el mismo remedio medido que la landing ya aplica en #precio y la columna de quiénes somos (regla de arriba, .24 → .70). El default .24 existe para paneles sueltos sobre la noche; en una sección clara, con el arte a plena saturación asomando por atrás, el texto blanco de la tarjeta cae hasta 3.46:1. VA POR CLASE Y NO AGREGANDO IDS A LA LISTA DE ARRIBA a propósito: esa lista ya nombra tres lugares y crecería con cada página nueva hasta que un día alguien escriba una sección con recuadros, se le olvide anotarla, y el fallo sea texto ilegible — que no truena, no avisa y solo se ve midiendo. Con la clase, quien escribe la sección declara lo que la sección tiene. */ .pg-recuadros{--panel-alfa:.70;--panel-alfa-firme:.70} /* ⚠️ EL BLOQUE DE PROSA. La primera versión de estas dos páginas puso los párrafos A PELO sobre la aurora y midió 41 fallos en /servicios, con textos en 1.20:1 — ilegibles de verdad, no "justo abajo del mínimo". La regla ya estaba escrita en el propio design system y yo no la seguí: _ds/tokens/aurora.css línea 72 dice "TEXTO CHICO (párrafos) → .aurora-panel". Los títulos sí van a pelo: son display, aguantan, y son el look de la página. Lo que no aguanta es el cuerpo. */ .pg-bloque{padding:var(--e-4) var(--e-5);display:flex;flex-direction:column;gap:var(--e-3);max-width:var(--medida-lectura)} .pg-bloque>p{font-size:var(--txt-cuerpo);line-height:var(--alto-cuerpo)} .pg-bloque>h3{font-size:var(--txt-titulo-3);line-height:var(--alto-titulo)} /* ⚠️ LOS ENLACES DE TEXTO DE LAS PÁGINAS NUEVAS VAN DEL COLOR DE SU TEXTO. La regla de enlace del design system pinta con --acento, que está medido contra papel. Sobre la aurora de ámbar, ese naranja cayó a 1.00:1 — o sea EXACTAMENTE el color del fondo, invisible. Es el mismo bug del botón primario sin texto, otra vez, en otro sitio. El enlace se sigue reconociendo por el subrayado, que es lo que pide la norma: color solo no basta para distinguir un enlace, y subrayado sí. Se limita a .pg-pagina —las dos páginas nuevas— para no repintar de un golpe los enlaces del pie, del aviso ni de la landing, que ya están medidos y no son de esta tanda. */ .pg-pagina a:not(.pol-btn){color:inherit;-webkit-text-fill-color:currentColor;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent)} /* El `color` se re-declara para neutralizar el hover del design system, igual que arriba: aqui el valor de reposo es `inherit`, no el acento. */ .pg-pagina a:not(.pol-btn):hover{color:inherit;text-decoration-color:currentColor} /* ⚠️ EL ENLACE DEL RENGLON DE CIERRE ES UNA ACCION, ASI QUE SE TOCA COMO UNA. Los seis "→ Ver el detalle" de /ecosistema leen como fila de acción —flecha más verbo— pero eran texto suelto de 14px: la zona tocable medía unos 85x22px, la mitad del minimo de 44. En un telefono eso se falla, y se falla seis veces seguidas. El sitio ya tiene su piso escrito (--tap-min). Se resuelve con la caja del enlace, sin rediseñar la ficha. */ /* ⚠️ IBA COMO `.pg-ficha__estado a` Y AGARRABA DE MÁS. El selector se escribió pensando en los seis renglones de acción, pero cogía CUALQUIER enlace del bloque — y dos van a media oración ("Todos trabajan dentro de y le reportan…"). Ese renglón saltaba a 44px mientras el resto del párrafo iba a 21.7: un brinco de interlínea a media frase. No se puede distinguir por estructura —los seis de acción TAMPOCO son hijo único, van precedidos de su frase y una flecha—, así que se marcan por lo que son: `.pg-ficha__ir`. Un enlace de acción se declara, no se adivina. */ .pg-ficha__estado a.pg-ficha__ir{display:inline-flex;align-items:center;min-height:var(--tap-piso)} /* Y los que NO son de acción —los que van a media oración— ganan su toque SIN ocupar espacio, con la misma caja invisible del wordmark del pie. Un ::after absoluto no cuenta para el alto de la línea, así que la interlínea del párrafo no se entera: es exactamente lo que evita el brinco a media frase que la regla de arriba tuvo que dejar de causar. Medido antes de escribirlo, en los seis anchos: los dos ocupan UN renglón siempre (si se partieran, la caja se anclaría sólo al primer fragmento) y su vecino tocable más cercano está a 121px en el peor caso, contra los 14.5px que la caja sobresale por lado. */ .pg-ficha__estado a:not(.pg-ficha__ir){position:relative} .pg-ficha__estado a:not(.pg-ficha__ir)::after{content:"";position:absolute; left:0;right:0;top:50%;height:var(--tap-piso);transform:translateY(-50%)} /* ── LA MARCA DEL ENCABEZADO ──────────────────────────────────────────────── Mismo vidrio, misma altura y misma banda vertical que el botón del menú, en el lado contrario. Lleva su propio position:fixed —no cuelga de .nav— porque dentro de un
el tiene que ir primero. z-index 49, uno menos que .nav: con el menú abierto, el panel la cubre. */ .nav__marca{ position:fixed;z-index:49; top:max(var(--e-4),env(safe-area-inset-top)); left:max(var(--e-4),env(safe-area-inset-left)); display:inline-flex;align-items:center; min-height:52px;padding:0 var(--e-4); border-radius:var(--radio-lg); font-weight:var(--peso-semi);font-size:var(--txt-ui); letter-spacing:.14em; background-color:rgb(var(--vidrio-tinta)/var(--vidrio-alfa)); -webkit-backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); border:1px solid var(--vidrio-filo); box-shadow:var(--vidrio-sombra),var(--vidrio-realce); /* -webkit-text-fill-color explícito: la regla de enlace del design system pinta con esa propiedad y le gana a `color`. Sin esto sale del color del acento sobre el vidrio oscuro — es el bug del botón sin texto otra vez. */ color:var(--texto-aurora-papel);-webkit-text-fill-color:var(--texto-aurora-papel); text-decoration:none; transition:background-color var(--dur-rapida) var(--ease-estandar); } /* El color se RE-DECLARA en hover, y no es redundancia: `.nav__marca` es una clase de esta app, así que el sistema de diseño no puede excluirla de su regla de enlaces como sí excluye a las suyas. Sin estas dos declaraciones la marca del encabezado se iba a terracota sobre el vidrio oscuro: 1.66 medido, contra el piso de 4.5. Es la tercera vez que esta piedra sale en este archivo — la primera fue el botón primario en reposo, la segunda el hover. Y el selector lleva `a` PEGADO a propósito: sin él queda en (0,2,0) y la regla del sistema, que es (0,2,1), le sigue ganando aunque cargue antes. Medido: con `.nav__marca:hover` el texto SEGUÍA yéndose a terracota. */ a.nav__marca:hover{background-color:rgb(var(--vidrio-tinta)/var(--vidrio-alfa-hover));color:var(--texto-aurora-papel);-webkit-text-fill-color:var(--texto-aurora-papel)} /* Y `:active` con él, que en un teléfono es EL ÚNICO estado que existe: ahí no hay ratón. Se midió forzándolo por CDP y la marca se iba a --acento-press en las cinco páginas. Arreglar sólo el hover habría dejado el defecto justo en el aparato donde más gente lo iba a ver. */ /* Y el fondo va con él: fijar sólo el color dejaba la marca SIN NINGUNA señal al presionarla —antes al menos viraba, aunque virara mal—. Y eso no es mejorar: quitar una respuesta rota sin poner una buena es cambiar un defecto por otro. `.nav__marca` no hereda el `:active{translateY(1px)}` de `.pol-btn` porque no es un `.pol-btn`, así que se le da el mismo fondo que en hover. */ a.nav__marca:active{background-color:rgb(var(--vidrio-tinta)/var(--vidrio-alfa-hover));color:var(--texto-aurora-papel);-webkit-text-fill-color:var(--texto-aurora-papel)} /* ════ LA POLARIDAD DEL ENCABEZADO ══════════════════════════════════════════ El encabezado es UNO para las seis páginas y es `position:fixed`, así que no cuelga de ninguna sección y no tiene de dónde heredar el acorde que hay debajo. Sobre la noche de la landing el vidrio oscuro se hunde bien; sobre papel el difuminado no tiene nada que filtrar y el 62% de negro se vuelve PINTURA GRIS. Por eso la polaridad la declara la página, en el . ⚠️ NO ES UN ARREGLO DE CONTRASTE: el oscuro sobre papel PASA (5.48 contra un piso de 4.5). Es que se ve como losa. Al medirlo resultó que además gana contraste, y bastante: de 5.61 a 17.76 contra 5.26–5.48. ⚠️ SON LAS DOS PIEZAS QUE SE VEN SIN TOCAR NADA — el wordmark y el botón del menú. El PANEL del menú se queda oscuro por diseño: no está en reposo, se abre sobre su propio velo y ahí el fondo de la página ya no manda. Lo que sí habría sido un defecto nuevo es dejar una pieza clara y la otra oscura EN REPOSO, que es cuando se ven las dos juntas. ⚠️ El hover conserva lo que esta casa ya decidió para el wordmark: no se levanta —no es un .pol-btn— y responde subiendo el relleno. Sube, no baja, por la misma razón medida que el resto del vidrio: aquí el texto es tinta sobre cristal blanco, así que cerrar el cristal ALEJA los dos y gana contraste. El color del texto no se mueve, que es lo que manda aquí. ⚠️ Y EL FILO SE ENCIENDE CON ÉL, cosa que en la polaridad oscura no hacía falta. Sobre papel casi blanco, subir un cristal blanco del .55 al .70 es un cambio que casi no se ve: el relleno no tiene a dónde ir cuando el fondo ya es del color al que va. El filo sí tiene margen —pasa de .12 a .28 de tinta— y es el que carga la respuesta ahí. */ [data-polaridad="papel"] .nav__marca, [data-polaridad="papel"] .nav__btn{ background-color:rgb(255 255 255/var(--vidrio-alfa-cabeza)); border-color:rgb(26 19 16/.12); color:var(--texto-aurora-tinta); box-shadow:var(--vidrio-sombra-papel),var(--vidrio-realce); } /* -webkit-text-fill-color aparte, y sólo en el wordmark: es el único de los dos que lleva texto. En el botón, `color` es lo que pinta las tres barras, que usan `background:currentColor`. */ [data-polaridad="papel"] .nav__marca{-webkit-text-fill-color:var(--texto-aurora-tinta)} [data-polaridad="papel"] a.nav__marca:hover, [data-polaridad="papel"] a.nav__marca:active{ background-color:rgb(255 255 255/var(--vidrio-alfa-cabeza-hover)); border-color:rgb(26 19 16/.28); color:var(--texto-aurora-tinta); -webkit-text-fill-color:var(--texto-aurora-tinta); } [data-polaridad="papel"] .nav__btn:hover{ background-color:rgb(255 255 255/var(--vidrio-alfa-cabeza-hover)); border-color:rgb(26 19 16/.28); } /* ⚠️ EL ANILLO DE FOCO SE RE-DECLARA AQUÍ, Y NO ES REDUNDANCIA. El halo de estas dos piezas no se pinta con `outline` —eso es sólo el filo blanco— sino con la TERCERA sombra de su `box-shadow`. Y la regla que lo pone, `.nav__btn:focus-visible`, tiene (0,2,0): exactamente la misma especificidad que `[data-polaridad="papel"] .nav__btn`. Al empatar decide el ORDEN, y esta sección vive 300 líneas más abajo — o sea que darle sombra propia al vidrio de papel se lleva el halo por delante. Por eso el anillo se re-declara COMPLETO —sombra de papel, realce y halo— con (0,3,0), que le gana a las dos por especificidad estricta y no por orden: así la regla sobrevive a que alguien reordene el archivo. ⚠️ Antes de darle `box-shadow` a una pieza de este encabezado, mira quién más la está usando: aquí esa propiedad lleva tres encargos a la vez —profundidad, realce y anillo— y son indistinguibles desde la sintaxis. */ [data-polaridad="papel"] .nav__btn:focus-visible, [data-polaridad="papel"] .nav__marca:focus-visible{ box-shadow:var(--vidrio-sombra-papel),var(--vidrio-realce),0 0 0 5px var(--foco-halo); } /* Su anillo va con el del botón del menú, 250 líneas más arriba: son las dos piezas de vidrio del encabezado y las dos necesitan conservarlo al enfocarse. */ /* EN LA LANDING NO VA: su hero ya es un POLARA a pantalla completa, y dos wordmarks en la misma vista es ruido. #hero solo existe ahí, así que la condición se lee sola. Si :has() no está soportado, la marca simplemente aparece también en la landing — el modo de fallo es cosmético, no roto. */ body:has(#hero) .nav__marca{display:none} /* ⚠️ LA VUELTA AL MAPA. /ecosistema mide ~18 pantallas en un teléfono y el mapa está hasta arriba: tocar una pieza baja bien, pero para ver una segunda había que subir a mano todo ese camino. El menú no sirve —solo cambia de página—, así que cada grupo de fichas cierra con su regreso. Es un enlace de acción, así que se toca como tal: 44px de alto, no un renglón de texto. */ /* ⚠️ IBA COMO TEXTO SUELTO Y FALLABA CONTRASTE: 2.56 a 3.02 contra un mínimo de 4.5, a pelo sobre la aurora de ámbar. Es el mismo error que esta tanda ya había cometido con los párrafos, dos veces en el mismo día. Ahora usa el botón que el sitio ya tiene: trae su vidrio, su color por acorde y sus 44px de zona tocable, sin CSS nuevo. */ .pg-volver{margin:0} /* ⚠️ EL MISMO BOTÓN, OCHO VECES, CON TRES COMPORTAMIENTOS. Cuatro de los ocho viven DENTRO de `.pg-rejilla` y por eso ocupaban UNA COLUMNA: a 1440px medían 389 y 592px de los 1200 disponibles — en `#capas` el regreso quedaba encerrado en el tercio izquierdo de una fila propia. Además heredaban el gap de la rejilla (12/16px) en vez de los 32px de sus hermanos de fuera. `1/-1` los devuelve al ancho completo y el margen compensa el gap heredado para que se separen igual que sus hermanos de fuera de la rejilla. Se resuelve por contenedor y no por posición a propósito: un selector que cuente hermanos se rompe el día que alguien agregue un grupo. */ .pg-rejilla>.pg-volver{grid-column:1/-1;margin-top:calc(var(--e-8) - var(--pg-gap))} /* ══════════════════════════════════════════════════════════════════════════ EL PISO DE 44px, que es de esta casa y NO de la norma. Se comprobó uno por uno: no hay violación de WCAG 2.5.8 AA en ninguno. Lo que falla es el piso propio, más estricto. ⚠️ LA TÉCNICA SE ELIGIÓ MIDIENDO, no por gusto — y es DISTINTA por sujeto, porque la pregunta que decide no es "¿cuánto mide?" sino "¿cuánto espacio hay entre los centros de los vecinos?": · Si el vecino tocable está LEJOS, se agranda el blanco sin tocar el layout, con una caja invisible. No mueve un pixel. · Si el vecino está a MENOS de 44px, esa caja invisible se ENCIMA con la de al lado, y tocar en medio abre el que quedó encima. Eso es peor que un blanco chico: falla en silencio y culpa al dedo. Ahí hay que separar de verdad, aunque mueva geometría. Los enlaces DENTRO DE PROSA no se tocan: WCAG 2.5.8 los exime, sus centros ya están a 61.8px, y agrandarlos invadiría los renglones vecinos. ══════════════════════════════════════════════════════════════════════════ */ /* El wordmark del pie mide 36.8px y su vecino tocable más cercano está a 168px. Caja invisible: gana sus 44px sin mover el pie ni un pixel. */ .pg-pie__marca{position:relative;display:inline-block} .pg-pie__marca::after{content:"";position:absolute;left:0;right:0;top:50%; height:var(--tap-piso);transform:translateY(-50%)} /* Los tres enlaces de contacto son texto de 14px y en el teléfono sus centros quedan a 35.5px unos de otros: ahí una caja invisible de 44px se encimaría con la de arriba. Por eso aquí se sube el alto real. Sube el pie unos 45px en el teléfono, y se acepta: son las vías de contacto directo. */ /* ⚠️ align-items VA EN EL CONTENEDOR Y NO ES DECORATIVO. Entre los tres enlaces vive un —"CDMX, México"— que no es tocable y se queda en su alto de texto. Sin esta línea el renglón corre con dos alturas y el texto se desalinea. Si algún día se agrega otro elemento no tocable a esta fila, esta regla es la que lo mantiene a la misma altura. */ .pg-pie__enlaces{align-items:center} .pg-pie__enlaces a{display:inline-flex;align-items:center;min-height:var(--tap-piso)} /* El índice del aviso: nueve enlaces a 17px con los centros a 33px. Misma razón que arriba, y aquí sin riesgo de arte: es una página de texto. */ .pg-indice a{display:inline-flex;align-items:center;min-height:var(--tap-piso)} /* Las píldoras del Consejo llevan role="button" y tabindex: son controles de verdad, no etiquetas. Miden 29px, y a 320px sus centros quedan a 42.5px. */ .pg-pildora{min-height:var(--tap-piso);display:flex;align-items:center} /* ════ LA PORTADA DE /ecosistema SUBE EL DEGRADADO ══════════════════════ Sin velo y sin tinte: el arte conserva su color, su saturación y su opacidad, y lo único que cambia es QUÉ BANDA cae en pantalla. La palanca es la del sistema (--acorde-y → qué banda se recorta) más un lienzo al doble de alto, para que la franja encendida quede de ceja arriba del título y el texto corra sobre la parte serena del arte. Medido por franjas sobre la página real: la ceja conserva el color vivo (brillo 144.7) y el cuerpo queda oscuro Y parejo (32.3, desvío 25.9) — parejo importa tanto como oscuro: texto sobre fondo estable, no sobre un degradado corriendo. ⚠️ EL :not(.lam-seccion) NO ES ADORNO: hay OTRA sección #portada en el sitio (la de las láminas apagadas, que viste esa clase) con su propio recorte puesto en línea. Sin la exclusión, estas reglas le pelearían el panel y el tamaño de letra. */ #portada:not(.lam-seccion){--acorde-y:38%} #portada:not(.lam-seccion).aurora::before{background-size:100% 200%} /* Fuera la caja de vidrio: el texto va directo sobre la banda serena, en el escalón de cuerpo mayor. La caja se pidió fuera junto con el cambio de banda — son la misma decisión. */ #portada:not(.lam-seccion) .aurora-panel{ background:none;border:0;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; padding:0;max-width:68ch; } #portada:not(.lam-seccion) .aurora-panel p{ font-size:var(--txt-cuerpo-xl);line-height:var(--alto-cuerpo); } #portada:not(.lam-seccion) .aurora-panel p + p{margin-top:var(--e-4)} /* ════ EL MAPA ES UNA TABLA SOBRE PAPEL ═════════════════════════════════ El catálogo vive en partes/mapa.html (una sola parte, dos páginas) y estos estilos lo visten. La sección deja el degradado pleno y toma la receta que ya usan «Cuéntanos de ti» y «Las cosas claras»: papel liso con el arte del acorde PROPIO encima al 8% — granada en la portada, amanecer en /ecosistema, porque cada sección conserva su color aunque compartan receta. La opacidad la eligió el dueño viendo las variantes. */ #mapa{background:var(--lienzo)} #mapa.aurora::before{ background-image:var(--acorde); background-size:cover; background-position:center center; background-repeat:no-repeat; opacity:.08; } /* Las DOS secciones #mapa vuelven a la pareja de tinta. La regla de arriba que viste de papel los nueve acordes de día («blanco en vez de negro») habla del gradiente pleno; aquí el gradiente ya no está pleno — es papel con el arte al 8% — y texto de papel sobre papel es un fantasma. Medido: el título salió crema sobre claro a la primera toma, en las dos páginas. */ #mapa{ --texto-sobre-aurora:var(--texto-aurora-tinta); --contra-aurora:var(--texto-aurora-papel); --halo-texto:var(--halo-tinta); --contorno-color:var(--contorno-tinta); } /* La píldora del título se viste del fondo nuevo, no del acorde viejo — misma razón y misma ropa que la de «Cuéntanos de ti». */ #mapa .aurora-antetitulo{ background:color-mix(in srgb,var(--texto-aurora-tinta) 7%,transparent); color:var(--texto-aurora-tinta); border-color:color-mix(in srgb,var(--texto-aurora-tinta) 20%,transparent); } /* ── LA TABLA. Tres columnas, que son las tres preguntas que trae encima quien visita. DESDE EL 2026-09-09 LA COMPARTEN DOS SECCIONES: el mapa de la portada y «Seis servicios» en /ecosistema (decision del dueno: la tabla A sobre papel + ambar al 15 %). El :is() conserva la especificidad del id, para que ninguna regla vecina cambie de ganador en el mapa, que ya esta medido. -- el texto original sigue: quien visita: qué me llevo, qué hace, y quién trabaja adentro. ── */ :is(#mapa,#servicios-que-alimentan) .t{display:flex;flex-direction:column;gap:8px;color:var(--texto-aurora-tinta)} :is(#mapa,#servicios-que-alimentan) .t-cab,:is(#mapa,#servicios-que-alimentan) .t-fila{ display:grid; grid-template-columns:minmax(190px,1.05fr) minmax(0,1.5fr) minmax(0,1.25fr); gap:var(--e-4); align-items:center; } :is(#mapa,#servicios-que-alimentan) .t-cab{ padding:0 var(--e-5) 10px; border-bottom:1px solid color-mix(in srgb,var(--texto-aurora-tinta) 22%,transparent); } :is(#mapa,#servicios-que-alimentan) .t-cab span{ font-size:var(--txt-meta);font-weight:var(--peso-semi); letter-spacing:var(--track-etiqueta);text-transform:uppercase; color:color-mix(in srgb,var(--texto-aurora-tinta) 72%,transparent); } :is(#mapa,#servicios-que-alimentan) .t-fila{ padding:var(--e-4) var(--e-5); border-radius:var(--radio-pill); background:rgb(255 255 255/.42); border:1px solid color-mix(in srgb,var(--texto-aurora-tinta) 10%,transparent); /* El hover NUNCA cambia el color del texto ni del relleno: responde con movimiento. Es regla de la casa y está medida. */ transition:transform .18s cubic-bezier(.23,1,.32,1); } @media (hover:hover) and (pointer:fine){ :is(#mapa,#servicios-que-alimentan) .t-fila:hover{transform:translateX(4px)} } @media (prefers-reduced-motion:reduce){ :is(#mapa,#servicios-que-alimentan) .t-fila{transition:none} } /* El nombre, grande y EN SU COLOR. Los acentos son los que ya existían en el sistema — aquí no se inventó ninguno: cada fila los enciende con su data-app. */ :is(#mapa,#servicios-que-alimentan) .t-nombre{ font-size:var(--txt-titulo-4); font-weight:var(--peso-semi); letter-spacing:var(--track-titulo); line-height:1.15; color:var(--acento); } :is(#mapa,#servicios-que-alimentan) .t-nombre small{ display:block;font-size:var(--txt-meta);font-weight:var(--peso-semi); letter-spacing:var(--track-etiqueta);text-transform:uppercase; color:color-mix(in srgb,var(--texto-aurora-tinta) 68%,transparent); margin-bottom:2px; } :is(#mapa,#servicios-que-alimentan) .t-que,:is(#mapa,#servicios-que-alimentan) .t-trae{font-size:var(--txt-cuerpo-md);line-height:var(--alto-cuerpo)} :is(#mapa,#servicios-que-alimentan) .t-trae{color:color-mix(in srgb,var(--texto-aurora-tinta) 82%,transparent)} :is(#mapa,#servicios-que-alimentan) .t-trae b{color:var(--texto-aurora-tinta);font-weight:var(--peso-semi)} /* El Consejo, separado por una línea: no es una pieza más de la cuenta. */ :is(#mapa,#servicios-que-alimentan) .t-consejo{margin-top:var(--e-5);padding-top:var(--e-5); border-top:1px solid color-mix(in srgb,var(--texto-aurora-tinta) 22%,transparent)} :is(#mapa,#servicios-que-alimentan) .t-incluido{ display:inline-flex;align-items:center;min-height:26px;padding:0 12px; border-radius:var(--radio-pill); background:color-mix(in srgb,var(--acento) 14%,transparent); border:1px solid color-mix(in srgb,var(--acento) 32%,transparent); color:var(--acento); font-size:var(--txt-meta);font-weight:var(--peso-semi); letter-spacing:var(--track-etiqueta);text-transform:uppercase; margin-top:6px; } /* ── EN EL TELÉFONO la rejilla de tres columnas no cabe: cada fila se vuelve una tarjeta, con su rótulo delante de cada dato para que se entienda sin el encabezado — que es exactamente donde el mapa dibujado se rompía. La píldora de escritorio tampoco funciona cuando la fila es un bloque alto (el radio le come las esquinas al texto): baja al escalón mayor de la escala, el de tarjetas. ── */ @media (max-width:760px){ :is(#mapa,#servicios-que-alimentan) .t-cab{display:none} :is(#mapa,#servicios-que-alimentan) .t-fila{grid-template-columns:1fr;gap:10px;border-radius:var(--radio-xl); padding:var(--e-4) var(--e-4)} :is(#mapa,#servicios-que-alimentan) .t-que::before,:is(#mapa,#servicios-que-alimentan) .t-trae::before{ content:attr(data-rotulo);display:block; font-size:var(--txt-meta);font-weight:var(--peso-semi); letter-spacing:var(--track-etiqueta);text-transform:uppercase; color:color-mix(in srgb,var(--texto-aurora-tinta) 68%,transparent); margin-bottom:2px; } } /* ════ «SEIS SERVICIOS» EN TABLA, SOBRE PAPEL + AMBAR AL 15 % (2026-09-09) ════ Decision del dueno tras dos laminas (8 y 9 de septiembre): fuera las seis cajas de vidrio, la misma tabla que el mapa, y el fondo de «Las tres formas» pero con el ambar --que es el acorde del catalogo de arriba-- en vez del boreal, que a 15 % iba de verde a rosa y no le gusto. Medido en el banco de pruebas: 0 textos abajo del minimo en los seis anchos, con las cinco recetas candidatas. La banda vuelta papel viste a la seccion con la pareja de tinta, igual que #formas. */ #servicios-que-alimentan{ background:var(--lienzo); color:var(--texto-aurora-tinta); --texto-sobre-aurora:var(--texto-aurora-tinta); --contra-aurora:var(--texto-aurora-papel); --halo-texto:var(--halo-tinta); --contorno-color:var(--contorno-tinta); } #servicios-que-alimentan.aurora::before{ background-image:var(--acorde-ambar); background-size:cover; background-position:center center; background-repeat:no-repeat; opacity:.15; } #servicios-que-alimentan .aurora-antetitulo{ background:color-mix(in srgb,var(--texto-aurora-tinta) 7%,transparent); color:var(--texto-aurora-tinta); border-color:color-mix(in srgb,var(--texto-aurora-tinta) 20%,transparent); } #servicios-que-alimentan .pg-sv-intro{ max-width:var(--medida-lectura); font-size:var(--txt-cuerpo-xl); line-height:var(--alto-cuerpo); margin:0; } /* Los servicios no tienen acento propio (no son piezas con data-app): el nombre va en tinta, y su subtitulo debajo del nombre, no arriba como el «POLARA» del mapa. */ #servicios-que-alimentan .t-nombre{color:var(--texto-aurora-tinta)} #servicios-que-alimentan .t-nombre small{margin:4px 0 0} #servicios-que-alimentan .t-trae a{display:inline-flex;align-items:center;min-height:var(--tap-piso)} /* La salida secundaria del mapa («Ver todo lo que hacemos») viste el vidrio oscuro al .20, afinado para cuando caía sobre el degradado pleno. Sobre papel, ese vidrio deja el texto crema sin piso. El par oscuro medido en la ronda de la portada de /ecosistema —negro cálido al .62 con texto papel— pasa en los doce fondos: se sube el relleno, no se cambia la pareja. */ #mapa .pol-btn--contorno-papel, #mapa .pol-btn--contorno-papel:hover{background-color:rgb(var(--vidrio-tinta)/.62)} /* ════ LAS FICHAS SUELTAN LA CAJA ═══════════════════════════════════════ La variante que gano (31-ago): fuera el vidrio, el texto corre libre en tinta y cada ficha se ancla con una linea superior — el lenguaje de las garantias de «Cuentanos de ti». La condicion para poder soltar la caja es el fondo: la seccion toma la receta de papel + arte del acorde propio al 8%, porque sobre el ambar vivo el cuerpo sin caja reprueba contraste (149 textos medidos cuando se intento; la regla vive en la cabecera de la pagina de ecosistema). */ #capas{background:var(--lienzo)} #capas.aurora::before{ background-image:var(--acorde); background-size:cover; background-position:center center; background-repeat:no-repeat; opacity:.08; } /* La banda vuelta papel viste a la seccion con la pareja de tinta — el mismo volteo, por la misma razon y con las mismas cuatro llaves que #mapa. */ #capas{ --texto-sobre-aurora:var(--texto-aurora-tinta); --contra-aurora:var(--texto-aurora-papel); --halo-texto:var(--halo-tinta); --contorno-color:var(--contorno-tinta); } #capas .aurora-antetitulo{ background:color-mix(in srgb,var(--texto-aurora-tinta) 7%,transparent); color:var(--texto-aurora-tinta); border-color:color-mix(in srgb,var(--texto-aurora-tinta) 20%,transparent); } /* Los dos paneles de la seccion (la entrada y «La sala de juntas») tambien sueltan el vidrio: texto libre en tinta. */ #capas .aurora-panel{ background:none;border:0;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; padding:0;color:var(--texto-aurora-tinta);max-width:76ch; } /* La ficha, desnuda y anclada a su linea. El border:0 primero y el border-top despues EN EL MISMO BLOQUE: en bloques separados con menos especificidad, el reset se come la linea — paso en la primera toma de la variante. */ #capas .pg-ficha.pol-card{ background:none;border:0;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0; padding:0; border-top:1px solid color-mix(in srgb,var(--texto-aurora-tinta) 24%,transparent); padding-top:var(--e-5); } #capas .pg-rejilla{gap:var(--e-8) var(--e-12)} #capas .pg-ficha{color:var(--texto-aurora-tinta)} /* Sin caja no hay pie que anclar: el estado sigue a su cuerpo — anclado flotaba a media nada en las fichas cortas. */ #capas .pg-ficha__estado{margin-top:0; border-top-color:color-mix(in srgb,var(--texto-aurora-tinta) 25%,transparent)} /* EL NOMBRE, GRANDE Y EN SU COLOR. Los acentos son los del sistema y entran por el data-app de cada ficha — aqui no vive ningun hexadecimal. */ #capas .pg-ficha__nombre{ font-size:var(--txt-titulo-2);line-height:1.1;text-wrap:balance; color:var(--acento); } #capas .pg-ficha__nombre small{ font-size:.45em;font-weight:var(--peso-semi); color:color-mix(in srgb,var(--texto-aurora-tinta) 68%,transparent); } #capas .pg-ficha__desc{color:color-mix(in srgb,var(--texto-aurora-tinta) 72%,transparent);line-height:1.45} #capas .pg-ficha__cita{color:color-mix(in srgb,var(--texto-aurora-tinta) 82%,transparent)} /* El «Volver al mapa» del cierre respira: pegado al renglon final del Consejo se leia como parte de la ficha. Pedido del dueno, 31-ago. */ #capas .pg-volver{margin:var(--e-6) 0 0} /* ════ «POR QUÉ EXISTIMOS» SE VISTE DE PAPEL Y ÁMBAR ════════════════════ Bajó a tercera seccion y le dejó el amanecer vivo a la seccion nueva de las puertas, que se funde con el hero. Aqui va papel con el arte ambar al 15% — el mismo que traia «Cuentanos de ti» antes de fundirse en «Las cosas claras» (decision del dueno, 1-sep): al 8 se leia como papel liso. */ #problema{background:var(--lienzo)} #problema.aurora::before{ background-image:var(--acorde-ambar); background-size:cover; background-position:center center; background-repeat:no-repeat; opacity:.15; } #problema{ --texto-sobre-aurora:var(--texto-aurora-tinta); --contra-aurora:var(--texto-aurora-papel); --halo-texto:var(--halo-tinta); --contorno-color:var(--contorno-tinta); } #problema .aurora-antetitulo{ background:color-mix(in srgb,var(--texto-aurora-tinta) 7%,transparent); color:var(--texto-aurora-tinta); border-color:color-mix(in srgb,var(--texto-aurora-tinta) 20%,transparent); } #problema .pol-card--vidrio{ background:none;border:0;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; padding:0;color:var(--texto-aurora-tinta); } /* ════ «¿QUÉ NECESITAS HOY?» — DOCE VENTANAS DE VIDRIO OBSIDIANA ═════════ La seccion nueva hereda el amanecer vivo que se funde con el hero. Las tarjetas son un PREVIEW, no botones: vidrio oscuro con texto papel, y cada una trae un «Cuentame mas» que abre una ventana encima con el detalle y, ahi si, el enlace a la ficha. Al cerrarla se sigue donde se iba: nadie sale de la pagina a la segunda pantalla. Pedido del dueno (1-sep): las tarjetas claras con enlace lucian a botones y mandaban a otra pagina a medio leer. El texto suelto de la entrada lleva el halo del sistema y cae en la banda oscura de arriba; el resto vive en el vidrio, asi que la seccion no lleva velo — el amanecer se ve tal cual, tambien en el telefono. */ #puertas .pg-puertas-intro,#puertas .pg-puertas-cierre{text-shadow:var(--halo-texto)} /* Cuatro columnas en pantalla ancha, una en el telefono: con tres renglones por tarjeta, doce en una columna se sentian lista interminable. El min(100%,…) evita que en el telefono la columna se salga del ancho. */ #puertas .pg-puertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--pg-gap);align-items:stretch} #puertas .pg-puerta{ position:relative; display:flex;flex-direction:column;gap:6px; padding:var(--e-4) calc(var(--e-5) + 30px) var(--e-4) var(--e-5); border-radius:var(--radio-lg); background-color:rgb(var(--vidrio-tinta)/var(--obsidiana-alfa)); border:1px solid rgb(255 255 255/.16); -webkit-backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); color:var(--texto-aurora-papel); } #puertas .pg-puerta__dice{ margin:0;font-size:var(--txt-cuerpo-md);font-weight:var(--peso-semi);font-style:italic; line-height:1.3;color:var(--texto-aurora-papel);text-wrap:balance; } #puertas .pg-puerta__que{margin:0;font-size:var(--txt-ui);line-height:var(--alto-cuerpo);color:rgb(255 246 238/.84)} /* El boton de informacion, arriba a la derecha: la tarjeta es el gancho y la ventana el detalle. Responde con movimiento, nunca con color. */ #puertas .pg-puerta__info{ position:absolute;top:10px;right:10px; width:30px;height:30px;display:grid;place-items:center; border-radius:999px;border:1px solid rgb(255 246 238/.45); background:none;padding:0;cursor:pointer; color:var(--texto-aurora-papel); transition:transform .18s cubic-bezier(.23,1,.32,1); } #puertas .pg-puertas-cierre a{color:var(--texto-aurora-papel);-webkit-text-fill-color:var(--texto-aurora-papel);text-decoration-color:rgb(255 246 238/.5)} /* La linea de cierre cae sobre la banda clara del amanecer y en papel suelto se lavaba (2.76 medido): va en la misma tira de obsidiana. */ #puertas .pg-puertas-cierre{ grid-column:1/-1;margin:0;padding:var(--e-4) var(--e-5); border-radius:var(--radio-lg); background-color:rgb(var(--vidrio-tinta)/var(--obsidiana-alfa)); border:1px solid rgb(255 255 255/.16); -webkit-backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); text-shadow:none; } @media (hover:hover) and (pointer:fine){ #puertas .pg-puerta__info:hover{transform:scale(1.1)} } @media (prefers-reduced-motion:reduce){ #puertas .pg-puerta__info{transition:none} } /* La ventana: del navegador, en la capa de arriba, con el mismo vidrio obsidiana. El velo oscurece y difumina lo de atras para que el texto gane contraste. */ .pg-dialogo{ width:min(34rem,calc(100vw - 2rem));max-height:min(84svh,44rem); margin:auto;padding:var(--e-6) var(--e-6) var(--e-5); border:1px solid rgb(255 255 255/.16);border-radius:var(--radio-lg); background-color:rgb(var(--vidrio-tinta)/var(--obsidiana-alfa-ventana)); color:var(--texto-aurora-papel); box-shadow:var(--vidrio-sombra-alta),var(--vidrio-realce); -webkit-backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); backdrop-filter:blur(var(--vidrio-difuminado)) saturate(var(--vidrio-saturado)); overflow:auto;overscroll-behavior:contain; } .pg-dialogo::backdrop{background:rgb(0 0 0/.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .pg-dialogo .pg-cerrar{color:var(--texto-aurora-papel)} .pg-dialogo__dice{margin:0 0 var(--e-2);padding-right:2.4rem;font-style:italic;font-size:var(--txt-cuerpo-md);line-height:1.3;color:rgb(255 246 238/.72)} .pg-dialogo__t{margin:0 0 var(--e-3);font-size:var(--txt-titulo-3);line-height:var(--alto-titulo);color:var(--texto-aurora-papel)} .pg-dialogo p{margin:0 0 var(--e-3);font-size:var(--txt-cuerpo);line-height:var(--alto-cuerpo)} .pg-dialogo__pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-5);margin-top:var(--e-5)} .pg-dialogo a:not(.pol-btn){color:var(--texto-aurora-papel);-webkit-text-fill-color:var(--texto-aurora-papel);text-decoration-color:rgb(255 246 238/.5);font-weight:var(--peso-semi)} /* Con una ventana abierta, la pagina de atras no se desplaza. */ html:has(dialog.pg-dialogo[open]){overflow:hidden} /* Quien llega por un ancla aterriza DEBAJO del menu flotante y de la marca, no detras. Pedido del dueno: al llegar a una ficha, el logo y el menu le tapaban el titulo. */ section[id],[id^="pieza-"]{scroll-margin-top:calc(var(--e-12) + 56px)} /* ════ «TRES MANERAS» SE VISTE DE PAPEL Y GRANADA ═══════════════════════ Antes: su acorde de marea calmado con un velo de papel al 62%. Ahora toma la receta de papel de «Cuentanos de ti» pero con el arte granada al 15% — el mismo fantasma de color que ya usa «Las cosas claras», para que las tres secciones del centro de la pagina respiren en la misma familia. La imagen unica pisa las dos capas del sistema (velo + acorde), por eso se escriben las cinco propiedades del fondo y no solo la imagen. */ #formas{background:var(--lienzo)} #formas.aurora::before{ background-image:var(--acorde-granada); background-size:cover; background-position:center center; background-repeat:no-repeat; opacity:.15; } /* La banda vuelta papel viste a la seccion con la pareja de tinta — el mismo volteo de cuatro llaves de #mapa y #capas. El texto de la seccion ya venia en tinta explicita; esto cubre lo que entra por token. */ #formas{ --texto-sobre-aurora:var(--texto-aurora-tinta); --contra-aurora:var(--texto-aurora-papel); --halo-texto:var(--halo-tinta); --contorno-color:var(--contorno-tinta); } #formas .aurora-antetitulo{ background:color-mix(in srgb,var(--texto-aurora-tinta) 7%,transparent); color:var(--texto-aurora-tinta); border-color:color-mix(in srgb,var(--texto-aurora-tinta) 20%,transparent); } /* ════ «QUIENES SOMOS» SIN LA FOTO ══════════════════════════════════════ La foto del equipo salio de la pagina (decision del dueno, 31-ago) y el hueco del grid se cierra con el reparto clasico del sitio: titulo en la columna angosta, cuerpo en la ancha. En el telefono no cambia nada — ahi el grid ya era una sola columna. Los tokens de la foto siguen definidos en :root por si algun dia vuelve. */ @media (min-width:1024px){ #nosotros{--pg-q-tit:1 / 1 / 2 / 2;--pg-q-cuerpo:1 / 2 / 3 / 3} } /* ════ ECOSISTEMA · LAS TARJETAS SE ACLARAN SOBRE EL BOREAL VIVO ════════ La seccion de los seis servicios conserva su arte a plena saturacion; lo que cambia es la caja: de vidrio oscuro a tarjeta clara con el texto en tinta — la maqueta que dio la direccion de diseno con la tabla de prueba sobre gradiente. Todo el interior hereda la tinta del contenedor, y los enlaces ya tienen su acento medido sobre claro. */ #servicios-que-alimentan .pol-card--vidrio, #servicios-que-alimentan .aurora-panel{ background:rgb(255 246 238/var(--papel-alfa)); border:1px solid rgb(26 19 16/.12); box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; color:var(--texto-aurora-tinta); } /* ════ ECOSISTEMA · «DOS COSAS QUE NO SE REPITEN» SE VISTE DE PAPEL ═════ La receta de papel con el arte del acorde propio (laguna) al 8%, las cuatro llaves del volteo, y el panel suelto: texto libre en tinta. */ #mas{background:var(--lienzo)} #mas.aurora::before{ background-image:var(--acorde); background-size:cover; background-position:center center; background-repeat:no-repeat; opacity:.08; } #mas{ --texto-sobre-aurora:var(--texto-aurora-tinta); --contra-aurora:var(--texto-aurora-papel); --halo-texto:var(--halo-tinta); --contorno-color:var(--contorno-tinta); } #mas .aurora-antetitulo{ background:color-mix(in srgb,var(--texto-aurora-tinta) 7%,transparent); color:var(--texto-aurora-tinta); border-color:color-mix(in srgb,var(--texto-aurora-tinta) 20%,transparent); } #mas .aurora-panel{ background:none;border:0;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; padding:0;color:var(--texto-aurora-tinta);max-width:76ch; } /* ════ SERVICIOS · LAS TARJETAS SE ACLARAN EN LAS TRES SECCIONES VIVAS ══ Cimientos, Cumplimiento y A la medida conservan su arte a plena saturación; sus cajas toman la misma tarjeta crema con texto en tinta que la sección de servicios del ecosistema. */ #cimientos .pol-card--vidrio,#cimientos .aurora-panel, #cumplimiento .pol-card--vidrio,#cumplimiento .aurora-panel, #medida .pol-card--vidrio,#medida .aurora-panel{ background:rgb(255 246 238/var(--papel-alfa)); border:1px solid rgb(26 19 16/.12); box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; color:var(--texto-aurora-tinta); } /* ════ SERVICIOS · «MARCA» Y «CONTABILIDAD» SE VISTEN DE PAPEL Y GRANADA Las dos claras de la página, con el mismo fantasma granada al 15 de «Tres maneras»: así el recorrido de la página alterna vivo y claro sin ser un uno-y-uno. Cuatro llaves, cápsula en tinta y cajas sueltas. */ #marca,#contabilidad{background:var(--lienzo)} #marca.aurora::before,#contabilidad.aurora::before{ background-image:var(--acorde-granada); background-size:cover; background-position:center center; background-repeat:no-repeat; opacity:.15; } #marca,#contabilidad{ --texto-sobre-aurora:var(--texto-aurora-tinta); --contra-aurora:var(--texto-aurora-papel); --halo-texto:var(--halo-tinta); --contorno-color:var(--contorno-tinta); } #marca .aurora-antetitulo,#contabilidad .aurora-antetitulo{ background:color-mix(in srgb,var(--texto-aurora-tinta) 7%,transparent); color:var(--texto-aurora-tinta); border-color:color-mix(in srgb,var(--texto-aurora-tinta) 20%,transparent); } #marca .aurora-panel,#contabilidad .aurora-panel{ background:none;border:0;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; padding:0;color:var(--texto-aurora-tinta);max-width:76ch; } /* La ficha suelta la caja y se ancla a su línea — border:0 y border-top en el MISMO bloque, como en #capas. */ #contabilidad .pg-ficha.pol-card{ background:none;border:0;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0; padding:0; border-top:1px solid color-mix(in srgb,var(--texto-aurora-tinta) 24%,transparent); padding-top:var(--e-5); color:var(--texto-aurora-tinta); max-width:76ch; } /* ════ PORTADA · LOS CUATRO DIFERENCIADORES SOBRE LA MAREA VIVA ═════════ El bloque que nadie mas puede firmar toma el acorde que «Tres maneras» dejo libre al pasarse a papel — y lo toma sin su viejo problema de contraste, porque aqui el texto va en tarjeta clara con tinta, la misma receta de los servicios. */ #diferencia .pol-card--vidrio{ background:rgb(255 246 238/var(--papel-alfa)); border:1px solid rgb(26 19 16/.12); box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; color:var(--texto-aurora-tinta); } /* Los enlaces de texto del cierre (WhatsApp y correo) sobre el rubor vivo: en acento daban 2.9-3.2 contra 4.5. En tinta pasan; el acento se queda en el subrayado. */ #diagnostico p a{ color:var(--texto-aurora-tinta);-webkit-text-fill-color:var(--texto-aurora-tinta); text-decoration-color:var(--acento); } /* ════ LA HOJA · la ilustración de dos tintas, con el velo de su acorde ═══ Decisión del dueño del 2026-09-09 (docs/decisiones/2026-09-09-imagenes- el-registro-y-el-velo.md): la ilustración trae su propio papel y se para como una hoja sobre el acorde, al 100 % — la opacidad (80, 50) se probó y se vio mal. Encima va EL ARTE DEL ACORDE DE SU SECCIÓN, multiplicado, al 29 % (--velo; 15 u 8 si la sección es de papel con el arte a ese tanto). La hoja se aísla para que la mezcla ocurra adentro de ella y no dependa del apilado del sistema (.aurora>* lleva z-index:3, aurora.css). El velo hereda var(--acorde) del data-acorde de la sección; en una sección SIN acorde (#produccion) va en 0, porque :root la hereda de brasa. */ .pg-hoja{ margin:0;width:100%;max-width:560px; position:relative;isolation:isolate;overflow:hidden; border-radius:var(--radio-lg);background:var(--texto-aurora-papel); /* la sombra «Flotante» del DESIGN.md (hojas, modales) sobre --sombra-color */ box-shadow:0 10px 30px -8px rgb(var(--sombra-color)/.22),0 3px 8px -3px rgb(var(--sombra-color)/.12); } .pg-hoja img{display:block;width:100%;height:auto} .pg-hoja::after{ content:"";position:absolute;inset:0; background-image:var(--acorde);background-size:cover;background-position:center; opacity:var(--velo,.29);mix-blend-mode:multiply;pointer-events:none; } /* La lámina de capítulo (ecosistema, servicios) termina donde termina la columna de lectura: a 720 px fijos sobresalía 150 px de las tarjetas. */ .pg-hoja--ancha{max-width:var(--medida-lectura)} /* ════ LA ESTRELLA · la viñeta del sitio ═══════════════════════════════ La estrella del isotipo (assets/estrella.svg, un solo trazado) pintada como máscara: el archivo solo trae la forma y el color lo pone la superficie con currentColor. Decisión del 2026-09-09. */ .pg-estrella{ display:inline-block;width:.9em;height:.9em; background-color:currentColor; -webkit-mask:url(/assets/estrella.svg) center/contain no-repeat; mask:url(/assets/estrella.svg) center/contain no-repeat; vertical-align:-.08em;margin-right:.45em; } .pg-estrella--chip{width:.8em;height:.8em}