/* ========================================================================== FUNDACIÓN PUNTO 37 — capa interactiva del mapa de "A dónde hemos ido" -------------------------------------------------------------------------- SEGUNDA VUELTA. El cliente devolvió la primera con tres reparos y los tres están resueltos aquí y en mapa.js. Conviene dejar por escrito qué se midió, porque las tres decisiones que siguen salen de números, no de gusto: 1. "Quita los espacios negativos". Medido sobre el propio archivo: de img/mapa-cachira-verde.webp sólo el 23,4% de los píxeles tiene tinta. El 76,6% restante es transparencia, y sobre la banda de cielo eso se ve como un rectángulo azul con un municipio pequeño en medio. No era una impresión del cliente: era la mayoría de la pieza. La respuesta es la LÁMINA (§2). Se rellenan los cuatro huecos grandes con piezas del brandbook, y se hace en DOS PLANOS distintos por un motivo concreto: · los adornos van DEBAJO del mapa. Como el mapa tiene transparencia, asoman por los huecos y quedan tapados por el verde. Así el municipio no se puede ocultar ni por accidente: es el recorte del propio arte el que hace de máscara. · el sello va ENCIMA, girado, como una chapa estampada sobre la lámina. Es el idioma que el brandbook le da al sello y además resuelve el detalle de que en esa esquina pasa una frontera punteada del arte: por debajo la línea le cruzaría la cara. 2. "El zoom funciona mal". → TERCERA VUELTA: EL ZOOM SE RETIRÓ. La segunda vuelta lo arregló midiendo (tope calculado del archivo en vez de fijo, paso animado, pinza de dos dedos, pan-y para no robarle el scroll a la página) y aun así el cliente volvió a pedir "una forma más cómoda de ver el mapa". Tenía razón: el problema no era el ajuste, era la idea. Un lienzo que pide gestos, metido en una columna de una página que se recorre con el dedo, obliga al visitante a negociar cada movimiento. Fuera: no hay transform, ni pinza, ni rueda, ni doble toque, ni arrastre, ni teclas de acercamiento. El mapa se ve entero, siempre. Ver mejor el mapa lo resuelven ahora otras tres cosas, que no piden nada a cambio: el RELIEVE (§2), los DIBUJOS (§2.e) y las etiquetas con el nombre que ya sacaba cada marcador. 3. "No es para nada interactiva". Cierto al pie de la letra: los puntos rojos del .webp son dibujo, y el arreglo de veredas está vacío porque el cliente todavía no entregó los nombres. La pieza tenía cero botones. Ahora tiene tres HITOS reales, puestos justo encima de los tres puntos grandes del arte, y su texto no se inventa aquí: sale del listado "Dónde estamos" que ya estaba escrito en index.html. Mapa y listado quedan enlazados en los dos sentidos. 4. "Detalla el mapa digital, añade relieve, añade dibujos como de niño y que funcione como un recorrido". → TERCERA VUELTA. · RELIEVE (§2): tres capas de luz recortadas con el ALFA DEL PROPIO MAPA —sombreado de dieciséis laderas, caída de luz general y textura— más un borde con volumen que se hace con drop-shadow sobre la silueta. El .webp aprobado no se toca: todo va encima. · DIBUJOS (§2.e): once garabatos repartidos por el territorio, trazados a mano en index.html. Cada uno se colocó en un hueco cuya holgura, medida sobre el propio archivo, es mayor que su media caja: ninguno tapa un punto rojo ni un rótulo del arte. · RECORRIDO (§2.d y §7.a): la barra que ya existía, ahora con el hilo punteado que une las paradas dibujado sobre el mapa. El trazo se calcula con las coordenadas de los propios puntos. · Y se retiró img/mapa-veredas.webp del panel de al lado, que era la foto de un mapa impreso. El archivo sigue en la carpeta; la página ya no lo muestra. Lo que NO cambia: el arte. Sigue siendo el mismo .webp del .ai aprobado, con sus puntos y sus rótulos dibujados, y la rosa de los vientos sigue suelta arriba a la derecha, en su sitio exacto. Todo se arma con las piezas que ya están en estilo.css y en marca.css: radio de 26px en la ficha, 22px en la barra del recorrido, 14px en chips, sombras SÓLIDAS desplazadas y los colores de la paleta. No hay ninguna tipografía ni ninguna forma nueva. Ni una librería, ni un CDN. Se carga DESPUÉS de estilo.css y de marca.css. El orden importa: la lámina reutiliza los tokens --p-sello, --p-guirnalda y compañía que marca.css declara en :root, en vez de volver a escribir las rutas. Nota sobre visibilidad: los únicos elementos que reposan en opacity:0 son decoración pura y están declarados aria-hidden (el anillo de latido) o son un duplicado de algo que ya se lee en otro sitio (la etiqueta del marcador, cuyo texto va también en el aria-label del botón y en el titular de la ficha). El relieve, la ruta y los once dibujos NO tienen estado escondido: nacen visibles y sus animaciones sólo mueven transform o el desfase del punteado. Ningún contenido depende de una animación para existir. La animación de llegada de los marcadores (§3.b) sigue la misma regla y por eso anima la ESCALA y nunca la opacidad: en su peor momento un marcador se ve pequeño, jamás desaparecido. ========================================================================== */ /* --- 1. ESTRUCTURA -------------------------------------------------------- .mapa-lienzo → raíz de todo. Es quien lleva data-mapa y quien sirve de marco de referencia a la ficha emergente. .mapa-arte → SOLO el mapa y el compás. Se deja así de ajustado a propósito: .mapa-arte .compas se posiciona en porcentajes (top:-6%, right:-4%) contra la altura de su contenedor, de modo que si le colgáramos también los mandos y el rótulo, la caja crecería y la rosa de los vientos se desplazaría sola respecto del arte aprobado. Con el compás y el visor como únicos hijos, la altura es la del mapa y el compás cae exactamente donde el .ai lo pone. .mapa-visor → la ventana que recorta el zoom. .mapa-plano → lo que se mueve y se escala. .mapa-pie → recorrido guiado, resumen y rótulo. Debajo del mapa, nunca encima, para no taparle nada al arte. */ /* min-width:0 no es decorativo: .mapa-lienzo es una celda de .mapa-grid y las celdas de rejilla arrancan con min-width:auto, es decir "nunca más estrecha que su contenido". La barra del recorrido lleva tres botones en fila y un rótulo sin partir, y su ancho mínimo empujaba la celda entera. Medido en una pantalla de 375: la columna se iba a 418px, o sea 43px de mapa fuera de la pantalla. No se veía barra de desplazamiento porque el body del sitio lleva overflow-x:hidden, que es justo lo que hace que un desbordamiento así pase desapercibido hasta que alguien mide. */ .mapa-lienzo{position:relative; min-width:0} /* La rosa de los vientos se dibuja encima del mapa y sobresale por la esquina, tal como manda el arte. Eso no cambia. Lo único que se le quita es la capacidad de interceptar el cursor: si el cliente llegara a ubicar una vereda justo debajo del compás, ese marcador quedaría inaccesible al ratón sin que nadie entendiera por qué. No altera ni un píxel de lo aprobado. */ .compas{pointer-events:none} /* El visor es la ventana. Recorta lo que se sale cuando el mapa está acercado, con el mismo radio de 26px de las tarjetas grandes del arte. La imagen del mapa tiene fondo transparente, así que el radio no se nota hasta que hay zoom; ahí sí sostiene el borde y evita que el mapa desborde la columna. */ /* EL ZOOM SE RETIRÓ ENTERO, Y CON ÉL LA MITAD DE ESTA CAJA. El cliente devolvió el mapa dos veces por lo mismo: "busca una forma más cómoda de ver el mapa", "el zoom funciona mal". La segunda vuelta intentó arreglarlo midiendo —tope calculado del archivo, encuadre animado, pinza de dos dedos, touch-action:pan-y para no robarle el scroll a la página— y funcionaba, pero seguía siendo un lienzo que pide gestos dentro de una columna de una página que se recorre con el dedo. En el teléfono no hay forma de que eso se sienta cómodo: cada gesto sobre el mapa es un gesto que el visitante tiene que negociar. Así que se quitó. No hay transform, no hay recorte que perseguir, no hay touch-action, no hay pinza, no hay rueda, no hay doble toque, no hay arrastre y no hay teclas de acercamiento. El mapa se ve entero siempre y el dedo pasa por encima sin que nadie se lo dispute. Lo que el cliente pedía de verdad —ver mejor el mapa— lo resuelven ahora el relieve (§2), los dibujos (§2.c) y las etiquetas de los marcadores, que no dependen de acercarse. El visor se queda por dos motivos, los dos vivos: sostiene el radio de 26px del arte y es el marco de referencia de la ficha emergente (§5). */ .mapa-visor{ position:relative; border-radius:26px; /* CLIP, no HIDDEN, y las dos líneas hacen falta: la primera es el respaldo para los navegadores que no conocen "clip" y la segunda gana en los que sí. "overflow:hidden" convierte la caja en un contenedor de desplazamiento de verdad: aunque no enseñe barras, el navegador la considera desplazable si su contenido sobresale aunque sea un píxel, y entonces un dedo que baja por la página se gasta los primeros píxeles moviendo el mapa por dentro. "overflow:clip" recorta igual pero NO crea contenedor de desplazamiento: no hay nada que desplazar, ni con el dedo, ni con la rueda, ni con el foco. Es lo que esta pieza necesita, y ahora más que antes, porque ya no queda ningún gesto propio que justifique lo contrario. */ overflow:hidden; overflow:clip; } /* El plano ya no se mueve ni se escala. Lo que sí necesita es AISLARSE. Las tres capas de relieve (§2) se funden con el dibujo usando mix-blend-mode, y una fusión sin grupo declarado se va a buscar el fondo al contexto de apilado que encuentre más arriba: acabaría mezclándose con la banda de cielo de la sección. isolation:isolate cierra el grupo aquí, en la caja del mapa, que es exactamente lo que hay que fundir. Antes lo hacía sin querer el "will-change:transform" que pedía el zoom. Al retirar el zoom había que declararlo a propósito o el relieve se salía. */ .mapa-plano{ position:relative; isolation:isolate; } /* estilo.css apunta a ".mapa-arte > img" y ahora la imagen del mapa cuelga dos niveles más abajo, así que la medida se vuelve a declarar aquí. La regla original sigue viva para el compás, que sí es hijo directo. position:relative + z-index:1 son nuevos y son la bisagra de toda la lámina: suben el mapa a un plano propio para que los adornos puedan quedarse DEBAJO (z-index 0) y el sello ENCIMA (z-index 2). Sin esto los tres elementos competirían por el orden de pintado según el orden del marcado, que es justo lo que no se quiere gobernar a mano. EL BORDE CON VOLUMEN va aquí y no en una capa aparte, y es la pieza más barata de las tres del relieve: drop-shadow trabaja sobre el canal alfa del elemento, así que la sombra sigue la SILUETA REAL del municipio recortado, no la caja rectangular. El municipio pasa a leerse como una calcomanía levantada del cielo en vez de como una mancha impresa sobre él. Desenfoque CERO y desplazada, como todas las sombras del tema: el brandbook no usa sombras difuminadas en ninguna pieza. El desplazamiento (3px a la derecha, 9px abajo) es coherente con la luz del sombreado de laderas, que entra por el noroeste. Se comprobó que cabe: la tinta del mapa termina en el 88% de la altura, así que la sombra no llega ni de lejos al borde. */ .mapa-plano > img{ width:100%; height:auto; display:block; position:relative; z-index:1; filter:drop-shadow(3px 9px 0 rgba(6,46,14,.30)); } /* La capa de marcadores se superpone al plano y ocupa exactamente la caja de la imagen, para que los porcentajes de x e y de cada punto signifiquen lo que dicen. z-index:5 la deja por encima de las cuatro capas que ahora hay debajo —lámina (0), mapa (1), relieve (2), ruta (3), dibujos (4)— y de paso la convierte en su propio contexto de apilado, donde el botón (3) y su etiqueta (4) sólo compiten entre ellos. Es lo único que se toca en todo el mapa, así que es lo que tiene que estar arriba del todo. */ .mapa-capa{position:absolute; inset:0; z-index:5} /* --- 1.b LÁMINA DE MARCA -------------------------------------------------- El relleno de los espacios negativos. Cuelga del PLANO, no del visor, y eso es deliberado: la lámina es papel impreso, así que se acerca y se arrastra junto con el mapa. Si se quedara fija mientras el mapa crece, las piezas flotarían encima del municipio en cuanto alguien acercara, que es exactamente el defecto que se está corrigiendo. Efecto secundario que sale gratis y que vale la pena entender: al estar los adornos por debajo del arte, acercarse sobre el municipio los va tapando solo. Se acerca uno y la decoración desaparece; queda el mapa limpio. La decoración es de la vista general, que es donde estaba el hueco. Dónde va cada pieza no es azar. Se levantó una rejilla de ocupación de 20x20 sobre el .webp y se colocaron sólo en celdas SIN tinta, de modo que ninguna pieza pisa el dibujo aunque estuviera por encima. Los cuatro huecos grandes quedan así, y con el compás del arte cerrando el noreste las cuatro esquinas pasan a estar ocupadas: noroeste → sello (la pieza pesada, y la que el cliente pidió por nombre) oeste → rastro de asteriscos, costura vertical bajo el sello sureste → guirnalda de equis, barrido en diagonal suroeste → aspa lima, remate pequeño norte y este → lunares y aspa verde, puntuación Rellenar no es saturar: seis piezas, ninguna al 100% de opacidad salvo el sello, y el municipio sigue siendo lo único que se lee de lejos. */ /* SIN z-index. Y no es un olvido: es el detalle del que depende que el sello quede por encima del mapa. Un elemento posicionado con z-index numérico crea contexto de apilado propio, y dentro de un contexto de apilado los z-index de los hijos sólo compiten entre ellos. Con "z-index:0" aquí, el "z-index:2" del sello no se medía contra el "z-index:1" del mapa: se quedaba encerrado en una capa que, entera, iba por debajo. Comprobado contando píxeles: la frontera punteada del arte se dibujaba encima de la cara del sello. Con z-index:auto esta capa no crea contexto, así que las piezas se ordenan directamente contra el mapa dentro del plano: las que no declaran z-index caen por debajo del mapa (que va en 1) y el sello, en 2, queda encima. El recorte propio evita que una pieza girada sobresalga de la caja del mapa y le devuelva al visor el desbordamiento que se acaba de quitar. */ .mapa-lamina{ position:absolute; inset:0; pointer-events:none; overflow:hidden; overflow:clip; } /* El ancho va en PORCENTAJE del plano, no en píxeles. marca.css dimensiona sus adornos en px porque viven en secciones de ancho fijo; aquí la pieza tiene que guardar la proporción con el mapa cuando la columna se estrecha, y un valor en px se volvería enorme en la mesa de 375. El alto lo pone aspect-ratio a partir de la proporción nativa del archivo, así que ninguna pieza puede salir aplastada. --esp voltea la pieza en horizontal. Sirve para usar dos veces la misma guirnalda sin que se note que es la misma: una baja hacia la derecha y la otra hacia la izquierda. Va dentro del mismo transform que el giro, y el fotograma del vaivén lo vuelve a escribir entero, porque un transform parcial en un keyframe borra lo que no repite. */ .lam{ position:absolute; width:var(--w); aspect-ratio:var(--ar); background:var(--img) center/contain no-repeat; transform:rotate(var(--giro,0deg)) scaleX(var(--esp,1)); opacity:var(--op,1); } /* QUÉ PIEZA SÍ Y QUÉ PIEZA NO, que esto se decidió mirando el resultado y no el catálogo. Se probaron todas las del repertorio sobre la banda de cielo y dos se descartaron: · LA TRAMA de rayado amarillo, que era la candidata obvia porque marca.css la reserva para "bandas de color plano que se ven vacías". Sobre el cian no funciona: el archivo sólo tiene un 20% de tinta y el amarillo #FFB400 rebajado sobre #00ACF9 da un gris verdoso. Rellenaba, sí, pero parecía suciedad de impresión, no marca. Fuera. · EL ASTERISCO MORADO grande. marca.css lo describe como la pieza más pesada del repertorio y ahí está el problema: al tamaño que hacía falta para llenar el suroeste se comía el rabo del municipio y se leía como un borrón. Se queda, pero pequeño y como acento. Lo que sí aguanta el cian es el coral y el verde: el sello, los lunares, las guirnaldas de equis, el rastro de asteriscos y las aspas. Así que la lámina se compone repitiendo esas piezas a tamaños y giros distintos, que es exactamente como el brandbook presenta su página de recursos gráficos: un reparto, no un relleno. Las rutas y las proporciones NO se vuelven a escribir: son las que marca.css ya declaró en :root al extraerlas del brandbook. Una sola fuente de verdad; si mañana se re-exporta una pieza, se cambia allí y aquí se entera sola. Cada posición se comprobó contra una rejilla de ocupación de 20x20 trazada sobre el propio .webp, para que ninguna pieza caiga sobre el municipio. Y aunque cayera no pasaría nada: van por debajo del arte. */ /* Las dos guirnaldas cruzan la lámina en diagonal y en sentidos opuestos. Son las que dan estructura: sin ellas el resto se lee como piezas sueltas. */ .lam-guirnalda-n{--img:var(--p-guirnalda); --ar:var(--ar-guirnalda); --w:44%; left:30%; top:-3%; --op:.8; --esp:-1} .lam-guirnalda {--img:var(--p-guirnalda); --ar:var(--ar-guirnalda); --w:58%; right:0; bottom:2%; --op:.9} /* Costura vertical del canto izquierdo, justo debajo del sello. */ .lam-rastro {--img:var(--p-rastro); --ar:var(--ar-rastro); --w:17%; left:1%; top:30%; --op:.85} /* Los lunares coral son los que reparten el color del sello por el resto de la lámina: uno arriba a la derecha, uno abajo a la izquierda y uno al este. Sin ellos el coral se quedaba concentrado en una sola esquina. */ .lam-lunares {--img:var(--p-lunares); --ar:var(--ar-lunares); --w:12%; left:62%; top:3%; --op:.9; --giro:-8deg} .lam-lunares-so {--img:var(--p-lunares); --ar:var(--ar-lunares); --w:10%; left:3%; top:87%; --op:.9; --giro:12deg} .lam-lunares-e {--img:var(--p-lunares); --ar:var(--ar-lunares); --w:8%; left:88%; top:84%; --op:.85; --giro:-6deg} /* Acentos. Pequeños a propósito: son puntuación, no frases. */ .lam-asterisco {--img:var(--p-asterisco); --ar:var(--ar-asterisco); --w:9%; left:3%; top:65%; --op:.85; --giro:-12deg} .lam-aspa-lima {--img:var(--p-aspa-lima); --ar:var(--ar-aspa-lima); --w:6%; left:30%; top:22%; --op:.9} .lam-aspa-lima-e{--img:var(--p-aspa-lima); --ar:var(--ar-aspa-lima); --w:6.5%;left:89%; top:68%; --op:.9; --giro:14deg} .lam-aspa-verde {--img:var(--p-aspa-verde);--ar:var(--ar-aspa-verde);--w:6%; left:26%; top:88%; --op:.9} /* EL SELLO VA ENCIMA (z-index 2), no debajo como el resto. Dos razones: · un sello es una chapa estampada sobre el papel, no una marca de agua impresa antes. Girado y por encima es como lo usa el brandbook, y es lo que .sello-marca--colgado de marca.css ya hace en las tarjetas. · por la esquina noroeste del arte pasa una frontera punteada azul. Por debajo, esa línea le cruzaría la cara al sello. Comprobado contando píxeles: de los 174 puntos de trazo que caen bajo el sello, con la capa mal apilada seguían viéndose todos y ahora sólo asoman seis, los de las esquinas de la caja girada, donde el sello es transparente. Se comprobó también que en ese rectángulo no hay ni un píxel de verde, así que estar encima no le quita nada al mapa. Va sobre la banda de cielo y no sobre papel, que es como el brandbook manda usarlo: su aro exterior es blanco y sobre blanco desaparecería media pieza. La sombra va con drop-shadow y desenfoque CERO, igual que .sello-marca: el tema no usa sombras difuminadas en ninguna pieza. */ .lam-sello{ --img:var(--p-sello); --ar:var(--ar-sello); --w:25%; left:3%; top:3%; z-index:2; --giro:-7deg; filter:drop-shadow(0 7px 0 rgba(0,0,0,.16)); } /* Vaivén lento. Se anima SÓLO transform y la pieza arranca y termina en su sitio, así que ningún fotograma la esconde. Períodos distintos y desfases negativos para que no respiren todas a la vez, que se leería como un error de sincronía y no como movimiento. Las dos guirnaldas van con los ciclos más largos porque son las piezas grandes: cuanto mayor la pieza, más delata la prisa. */ .lam-sello {animation:lam-vaiven 11s ease-in-out infinite} .lam-rastro {animation:lam-vaiven 14s ease-in-out infinite; animation-delay:-4s} .lam-lunares {animation:lam-vaiven 9s ease-in-out infinite; animation-delay:-6s} .lam-lunares-so {animation:lam-vaiven 10s ease-in-out infinite; animation-delay:-1s} .lam-lunares-e {animation:lam-vaiven 8s ease-in-out infinite; animation-delay:-5s} .lam-aspa-lima {animation:lam-vaiven 8s ease-in-out infinite; animation-delay:-2s} .lam-aspa-lima-e{animation:lam-vaiven 9s ease-in-out infinite; animation-delay:-6s} .lam-aspa-verde {animation:lam-vaiven 10s ease-in-out infinite; animation-delay:-7s} .lam-asterisco {animation:lam-vaiven 12s ease-in-out infinite; animation-delay:-3s} .lam-guirnalda {animation:lam-vaiven 16s ease-in-out infinite; animation-delay:-9s} .lam-guirnalda-n{animation:lam-vaiven 19s ease-in-out infinite; animation-delay:-13s} @keyframes lam-vaiven{ 0%,100%{transform:rotate(var(--giro,0deg)) scaleX(var(--esp,1)) translateY(0)} 50% {transform:rotate(var(--giro,0deg)) scaleX(var(--esp,1)) translateY(-2.2%)} } /* La rosa de los vientos del arte tampoco tiene por qué estar quieta. Gira apenas dos grados y sube cinco píxeles: lo justo para que la esquina noreste participe del conjunto. No lleva estado escondido ni cambia de opacidad. */ .compas{animation:mapa-compas 15s ease-in-out infinite} @keyframes mapa-compas{ 0%,100%{transform:rotate(0deg) translateY(0)} 50% {transform:rotate(2.2deg) translateY(-5px)} } /* --- 2. RELIEVE ---------------------------------------------------------- "Retira el mapa dibujado y detalla el mapa digital, añade relieve", dijo el cliente. Relieve AÑADIDO, no mapa sustituido: el .webp aprobado sigue intacto debajo y lo que va encima son tres capas de luz. LA MÁSCARA ES LA CLAVE. El archivo del mapa tiene canal alfa de verdad (medido: 213 valores distintos de alfa, y sólo el 23,4% de la imagen tiene tinta), así que se usa el propio mapa como máscara de las tres capas. El sombreado no puede salirse del municipio ni por un píxel, y no hay que recortar nada a mano: si mañana se re-exporta el arte con otra silueta, la máscara se entera sola. Sin máscara, cualquiera de estas capas pintaría un rectángulo sobre la banda de cielo y se vería el canto. POR QUÉ SON TRES HERMANAS Y NO UN BLOQUE ENVUELTO. Las tres se funden con el dibujo con mix-blend-mode. Un contenedor común crearía un grupo aislado —lo crea tanto una máscara como un z-index— y dentro de un grupo aislado las hijas se mezclan entre ellas y no con el mapa, que es justo lo contrario de lo que se busca. La máscara y la fusión tienen que ir en el MISMO elemento, y el elemento tiene que ser hermano del . Por eso el aislamiento se declara arriba, en .mapa-plano, y aquí no hay envoltorio. */ .rel{ position:absolute; inset:0; z-index:2; pointer-events:none; -webkit-mask-image:url("img/mapa-cachira-verde.webp"); mask-image:url("img/mapa-cachira-verde.webp"); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } /* 2.a SOMBREADO DE LADERAS Dieciséis lomas repartidas por el municipio. Cada loma son dos elipses: una clara arriba a la izquierda y una oscura abajo a la derecha, separadas 1,5% en horizontal y 1,7% en vertical. Ése desplazamiento constante es lo que hace que las dieciséis se lean como iluminadas por el MISMO sol —del noroeste, igual que el borde con volumen del y que la caída de luz de §2.b— y no como manchas sueltas. Las posiciones no son a ojo: se comprobó una por una contra el propio .webp que el centro de cada loma cae sobre tinta verde. Las dieciséis pasan. mix-blend-mode:soft-light y no "overlay" ni "multiply": soft-light aclara con el blanco y oscurece con el negro sin llevarse por delante el color de debajo. El verde del arte sigue siendo el mismo verde, sólo que ahora tiene caras. Con overlay el municipio viraba a un verde ácido que no es el del brandbook. */ .rel-laderas{ mix-blend-mode:soft-light; background-image: radial-gradient(ellipse 8% 7% at 23.0% 71.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 26.0% 74.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 28.5% 62.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 31.5% 65.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 35.0% 55.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 38.0% 58.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 41.5% 48.8%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 44.5% 52.2%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 48.5% 56.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 51.5% 59.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 49.5% 42.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 52.5% 45.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 56.0% 48.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 59.0% 51.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 60.5% 56.8%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 63.5% 60.2%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 64.5% 41.8%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 67.5% 45.2%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 70.0% 51.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 73.0% 54.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 75.5% 43.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 78.5% 46.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 79.0% 53.8%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 82.0% 57.2%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 84.5% 47.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 87.5% 50.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 19.5% 77.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 22.5% 80.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 43.5% 61.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 46.5% 64.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%), radial-gradient(ellipse 8% 7% at 54.5% 34.3%, rgba(255,255,255,.58), rgba(255,255,255,0) 70%), radial-gradient(ellipse 8% 7% at 57.5% 37.7%, rgba(0,0,0,.46), rgba(0,0,0,0) 70%); } /* 2.b CAÍDA DE LUZ GENERAL Lo que las lomas hacen en pequeño, esto lo hace en grande: aclara el noroeste del municipio y oscurece el sureste. Sin ella el conjunto de lomas se leía como una textura repetida; con ella, como un terreno que sube por un lado. Es la misma pieza que profundidad.css §4 ya le pone a las bandas grandes del sitio, aquí recortada al municipio. */ .rel-luz{ mix-blend-mode:soft-light; background-image:linear-gradient(152deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.12) 24%, rgba(255,255,255,0) 44%, rgba(0,0,0,.10) 62%, rgba(0,0,0,.36) 100%); } /* 2.c TEXTURA El grano del propio sitio, el mismo data-URI que estilo.css declara en :root y que ya viste todas las bandas de color. Recortado al municipio le quita al verde el aspecto de tinta plana y le pone superficie. Muy bajo: por encima de .30 empieza a leerse como suciedad de impresión y no como papel. */ .rel-grano{ mix-blend-mode:overlay; opacity:.30; background-image:var(--grano); background-size:150px 150px; } /* --- 2.d LA RUTA DEL RECORRIDO ------------------------------------------- El hilo punteado que une los puntos. Es lo que convierte tres marcadores sueltos en un RECORRIDO, que es la palabra que usó el cliente. No hay ni una coordenada escrita aquí ni en mapa.js: el trazo se calcula con las coordenadas de los propios puntos, en el mismo orden en que los visita el recorrido guiado. Si mañana se cargan doce veredas, la ruta pasa por las doce sin que nadie la redibuje. Si sólo hay un punto, no hay ruta y la capa se queda con [hidden]: un recorrido de una parada no es un recorrido. preserveAspectRatio="none" + vector-effect="non-scaling-stroke": el SVG se estira a la caja del mapa para que los porcentajes signifiquen lo mismo que en los marcadores, y el trazo se libra de esa deformación porque su grosor se mide en píxeles de pantalla. Sin lo segundo, los puntos de la ruta saldrían ovalados. */ .mapa-ruta{position:absolute; inset:0; z-index:3; pointer-events:none} .mapa-ruta[hidden]{display:none} .mapa-ruta svg{width:100%; height:100%; display:block; overflow:visible} /* Dos trazos superpuestos y no uno: el de abajo es la sombra que despega los puntos del verde, el de arriba el punteado blanco. Con uno solo, sobre las laderas claras la ruta se perdía. */ .ruta-fondo{ fill:none; stroke:rgba(0,0,0,.26); stroke-width:8.5; stroke-linecap:round; stroke-dasharray:0.1 14; } .ruta-linea{ fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-dasharray:0.1 14; } /* El punteado avanza despacio hacia el final del trazo. Es movimiento de reposo, perpetuo y de una sola propiedad: no esconde nada, no cambia la opacidad de nada y en su peor momento la ruta está toda dibujada. */ .ruta-fondo, .ruta-linea{animation:mapa-ruta-anda 3.2s linear infinite} @keyframes mapa-ruta-anda{ from{stroke-dashoffset:0} to {stroke-dashoffset:-28} } /* --- 2.e LOS DIBUJOS ----------------------------------------------------- "Dibujos como si los hubiese dibujado un niño, de elementos de interés", textual del cliente. Están trazados a mano en index.html y ahí está contado con qué recursos se consigue que parezcan de niño; aquí sólo se colocan. --x/--y son el CENTRO en porcentaje del mapa y --w el ancho, también en porcentaje: así los dibujos se estiran y se encogen con la columna igual que los marcadores, sin recalcular nada. --ar es la proporción del viewBox de cada motivo. Va explícita y no se deja al tamaño intrínseco del SVG a propósito: con aspect-ratio la caja queda determinada por el marcado y ningún dibujo puede salir aplastado mientras el navegador decide qué altura darle a un sin atributos. overflow:visible porque el relleno de cada dibujo va DESPLAZADO respecto del contorno —es lo que hace que parezca pintado sin respetar la raya— y ese desplazamiento saca color un par de unidades fuera del viewBox. Con el recorte por defecto del SVG se vería cortado a escuadra, que es exactamente el gesto de máquina que se está evitando. */ .mapa-garabatos{position:absolute; inset:0; z-index:4; pointer-events:none} .gar{ position:absolute; left:var(--x); top:var(--y); width:var(--w); height:auto; aspect-ratio:var(--ar,1); overflow:visible; transform:translate(-50%,-50%) rotate(var(--giro,0deg)); /* Sombra sólida y desplazada, la del tema, siguiendo la silueta del dibujo y no su caja: es el mismo recurso del del mapa y de .lam-sello. Los despega del verde sin ponerles marco. */ filter:drop-shadow(2px 4px 0 rgba(6,46,14,.26)); } /* Vaivén lento, uno distinto por dibujo. Mismo criterio que la lámina: sólo transform, períodos distintos y desfases negativos para que no respiren todos a la vez. El fotograma repite el transform ENTERO porque un transform parcial en un keyframe borra lo que no repite, y aquí se perdería el translate que centra el dibujo en su coordenada. */ .gar{ animation:gar-vaiven var(--vaiven,12s) ease-in-out infinite; animation-delay:var(--espera,0s); } @keyframes gar-vaiven{ 0%,100%{transform:translate(-50%,-50%) rotate(var(--giro,0deg)) translateY(0)} 50% {transform:translate(-50%,-50%) rotate(calc(var(--giro,0deg) + 1.8deg)) translateY(-3.5%)} } /* --- 3. MARCADORES ------------------------------------------------------- Los puntos rojos que ya vienen dibujados en la imagen del arte NO son interactivos: son parte del .webp. Estos marcadores son otra cosa, se pintan encima y son botones de verdad. Van redondos a propósito, para que hablen el mismo idioma que los puntos del arte, y en var(--rojo), el rojo de marca. Hay dos clases de marcador y comparten TODO el mecanismo: · HITO — los tres puntos que la fundación ya tiene publicados en el listado "Dónde estamos". Van clavados sobre los tres puntos grandes que el arte dibuja (Cáchira, Bucaramanga y Cúcuta), con las coordenadas medidas del propio archivo. · VEREDA — los que aparecerán cuando el cliente entregue la lista. No se distinguen por color: los tres puntos del arte son rojos y un marcador naranja encima de un punto rojo se leería como un error de registro. Se distinguen por tamaño de aro, que es como el propio arte separa el punto grande del pequeño. */ .mapa-punto{ position:absolute; z-index:3; width:22px; height:22px; padding:0; border:0; background:var(--rojo); border-radius:50%; cursor:pointer; /* Anillo blanco sólido + sombra sólida desplazada. Ninguna difuminada: el brandbook no usa desenfoque en ninguna pieza. */ box-shadow:0 0 0 3px #fff, 0 4px 0 rgba(0,0,0,.22); /* El orden dentro de transform importa: "scale(...) translate(-50%,-50%)" desplaza primero —lo que lleva el centro del botón justo sobre su coordenada— y escala después alrededor del origen 0 0. Así el marcador queda clavado en su punto por mucho que crezca al recibir el cursor. Al revés se despegaría del punto al agrandarse. Aquí había además una contraescala en la propiedad independiente "scale", alimentada por una variable que el zoom iba reescribiendo. Se retiró con el zoom: ya no hay nada que contrarrestar. */ transform-origin:0 0; transform:scale(1) translate(-50%,-50%); /* box-shadow sale de la transición: el aro blanco del hover aparece de una vez en lugar de fundirse. Interpolarlo obligaba a repintar el marcador en cada cuadro, y en un mapa con un marcador por vereda eso se multiplica. El crecimiento, que es lo que de verdad se lee, sigue en transform. */ transition:transform .16s ease; } /* BLANCO DE TOQUE. El punto se ve de 22px porque así de discretos son los puntos del arte, pero un círculo de 22px es imposible de acertar con el dedo. Este pseudo-elemento es un blanco invisible de 44px, la medida mínima que exige el encargo, centrado en el mismo punto. No se ve, no pinta nada y no altera el dibujo: sólo agranda la zona sensible. Va en ::before porque ::after ya está ocupado por el latido. */ .mapa-punto::before{ content:""; position:absolute; inset:-11px; border-radius:50%; } /* Estado activo: crece y SE ILUMINA. El halo son dos anillos sólidos, uno blanco y otro del rojo de marca rebajado. Sin desenfoque: el brandbook no usa sombras difuminadas en ninguna pieza, así que el "brillo" se construye con aros concéntricos, que es como se ilumina un punto en este lenguaje. */ .mapa-punto:hover, .mapa-punto:focus-visible, .mapa-punto.es-senalado{ transform:scale(1.34) translate(-50%,-50%); box-shadow:0 0 0 4px #fff, 0 0 0 9px rgba(255,60,0,.34), 0 5px 0 rgba(0,0,0,.26); } .mapa-punto[aria-expanded="true"]{ transform:scale(1.34) translate(-50%,-50%); background:var(--rojo-hondo); box-shadow:0 0 0 4px #fff, 0 0 0 9px rgba(255,60,0,.34), 0 5px 0 rgba(0,0,0,.26); } /* La vereda que el recorrido guiado está mostrando lleva un aro más ancho para que se distinga de las demás incluso si el visitante mueve el ratón a otra parte de la página. */ .mapa-punto.es-actual{ box-shadow:0 0 0 4px #fff, 0 0 0 11px rgba(255,60,0,.42), 0 5px 0 rgba(0,0,0,.26); } /* 3.a EL HITO Los tres puntos publicados. En el arte su punto está dibujado más grande que el de las veredas —medido: 2,15% del ancho del archivo contra 0,8%— así que el marcador repite esa jerarquía con un aro blanco más ancho en vez de con otro color. Encima del punto grande del dibujo, el marcador lo cubre entero y lo que era tinta pasa a ser botón sin que se note el relevo. */ .mapa-punto.es-hito{ box-shadow:0 0 0 5px #fff, 0 4px 0 rgba(0,0,0,.22); } .mapa-punto.es-hito:hover, .mapa-punto.es-hito:focus-visible, .mapa-punto.es-hito.es-senalado{ box-shadow:0 0 0 5px #fff, 0 0 0 11px rgba(255,60,0,.34), 0 5px 0 rgba(0,0,0,.26); } .mapa-punto.es-hito[aria-expanded="true"], .mapa-punto.es-hito.es-actual{ box-shadow:0 0 0 5px #fff, 0 0 0 13px rgba(255,60,0,.42), 0 5px 0 rgba(0,0,0,.26); } /* 3.b GESTO DE BIENVENIDA El encargo pide "algún gesto que invite a tocar". Es esto: la primera vez que la sección entra en pantalla, los marcadores aterrizan uno detrás de otro con un rebote corto. Se anima la ESCALA y NUNCA la opacidad, y no es un capricho de estilo: con animation-fill-mode:both el fotograma inicial se queda fijado durante todo el retardo, así que si esto animara opacity el último marcador de la fila pasaría medio segundo invisible y cualquier tropiezo del navegador lo dejaría así para siempre. Animando escala, su peor momento es un punto pequeño: se ve, se puede tocar y no hay nada que rescatar. Y termina de verdad: mapa.js quita la clase en animationend, con un reloj de respaldo por si el evento no llega. Hay que quitarla porque una animación con fill:forwards sigue mandando sobre transform para siempre y dejaría el marcador sin poder crecer al recibir el cursor. */ .mapa-punto.p-entra{ animation:mapa-aterriza .58s cubic-bezier(.22,.9,.24,1) both; animation-delay:var(--entra,0s); } @keyframes mapa-aterriza{ 0% {transform:scale(.3) translate(-50%,-50%)} 58% {transform:scale(1.3) translate(-50%,-50%)} 100%{transform:scale(1) translate(-50%,-50%)} } /* Latido: un anillo que se abre y se apaga. Escalonado con --retardo para que el conjunto no lata al unísono, que se leería como un error. */ .mapa-punto::after{ content:""; position:absolute; inset:-7px; border:2px solid var(--rojo); border-radius:50%; opacity:0; pointer-events:none; animation:mapa-latido 2.8s ease-out infinite; animation-delay:var(--retardo,0s); } @keyframes mapa-latido{ 0% {opacity:.55; transform:scale(.6)} 70% {opacity:0; transform:scale(1.5)} 100%{opacity:0; transform:scale(1.5)} } /* --- 4. ETIQUETA CON EL NOMBRE ------------------------------------------- Al pasar el cursor o llegar con Tab, el marcador dice cómo se llama sin necesidad de abrir nada. Es un chip de 14px de radio, el mismo de los chips del sitio. Por qué es HERMANA del botón y no hija: el botón se agranda con transform al recibir el cursor, y una etiqueta dentro heredaría ese crecimiento y saldría con el texto deformado. Como hermana inmediata se la alcanza con el selector "+" y conserva su tamaño. Va aria-hidden porque es un duplicado visual: el nombre ya viaja en el aria-label del botón, que es lo que anuncia el lector de pantalla, y vuelve a aparecer como titular de la ficha. Nadie pierde información si esta etiqueta no llega a mostrarse. */ .mapa-etiqueta{ position:absolute; z-index:4; transform-origin:0 0; transform:translate(-50%,-100%) translateY(-17px); background:#fff; color:var(--negro); border-radius:14px; padding:7px 13px; box-shadow:0 4px 0 rgba(0,0,0,.18); font-size:14px; font-weight:900; line-height:1.15; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .16s ease, visibility 0s linear .16s; } /* Variantes de anclaje. mapa.js decide cuál toca según dónde caiga el punto, para que la etiqueta no se salga por el borde del visor y quede cortada. */ .mapa-etiqueta.e-abajo{transform:translate(-50%,0) translateY(17px)} .mapa-etiqueta.e-izq{transform:translate(-14px,-100%) translateY(-17px)} .mapa-etiqueta.e-der{transform:translate(calc(-100% + 14px),-100%) translateY(-17px)} .mapa-etiqueta.e-abajo.e-izq{transform:translate(-14px,0) translateY(17px)} .mapa-etiqueta.e-abajo.e-der{transform:translate(calc(-100% + 14px),0) translateY(17px)} .mapa-punto:hover + .mapa-etiqueta, .mapa-punto:focus-visible + .mapa-etiqueta, .mapa-punto.es-senalado + .mapa-etiqueta, .mapa-punto.es-actual + .mapa-etiqueta{ opacity:1; visibility:visible; transition:opacity .16s ease, visibility 0s; } /* Con la ficha abierta la etiqueta sobra: el nombre está en el titular de la ficha, a dos centímetros, y las dos piezas se pisarían. Esta regla va después de la anterior y con la misma especificidad, así que gana. */ .mapa-punto[aria-expanded="true"] + .mapa-etiqueta{ opacity:0; visibility:hidden; } /* --- 5. FICHA EMERGENTE --------------------------------------------------- Mismo lenguaje que las .ficha de las páginas interiores: fondo blanco, radio redondo y sombra sólida desplazada. mapa.js escribe --tx y --ty con la posición ya calculada y recortada contra los bordes del visor. Cuelga del VISOR, no del lienzo. Así "100%" y "bottom" significan el mapa por definición, sin que nadie tenga que medir nada. ======================================================================= LO QUE ESTA FICHA DEJÓ DE SER (encargo del cliente) ----------------------------------------------------------------------- Textual: "las tarjetas con el nombre del lugar y que sede es, deberían ser más pequeñas o solo tener el nombre del lugar, y el centro ir aparte en una sección de texto aparte". Llevaba cuatro cosas: aspa de cerrar, nombre, papel del lugar ("centro de acopio") y un pie con anterior / "3 de 3" / siguiente. Se van dos, y las dos por el mismo motivo: ya estaban dichas en otra parte de la misma pantalla. 1. EL PAPEL DEL LUGAR SE VA. El panel "Dónde estamos", a la derecha del mapa, lista los tres sitios CON su papel: "Cáchira, sede principal", "Bucaramanga, centro de acopio", "Cúcuta, centro de acopio". La ficha repetía palabra por palabra un dato que está a un palmo, y encima es el panel el que manda: mapa.js LEE de esos renglones el nombre y el papel para construir los marcadores (§7.e). El dato no se pierde, se deja de decir dos veces. Y para que se lea sin buscarlo, el renglón del punto abierto se resalta en rojo mientras la ficha está abierta — eso ya existía y ahora es lo que sostiene la información (ver §7.e). 2. EL PIE DE NAVEGACIÓN SE VA. Las dos flechas del costado (§6.b) hacen exactamente lo mismo, están siempre a la vista y no se mueven de sitio; el conteo "3 de 3" lo sigue diciendo el aviso aria-live de mapa.js ("Cúcuta. 3 de 3.") y el chip "Viendo: Cúcuta" del resumen. Ese pie era además el bulto: 44 de botón + 18 de margen + 15 de relleno + 1 de filete = 78px de los 177 que medía la ficha. Quitarlo es lo que de verdad la hace pequeña. 3. EL ASPA DE CERRAR SE QUEDA. Es un role="dialog": necesita un mando de salida visible. Escape lo cierra, pero Escape no existe en un teléfono y no se ve en ninguna pantalla. Además va en posición absoluta dentro del relleno del titular, así que no cuesta ni un píxel de alto. 4. LOS CAMPOS DE DATOS SE QUEDAN EN EL CÓDIGO. .mapa-datos y .mapa-lineas hoy no pintan nada porque de las veredas el cliente no ha entregado ni un dato; el día que los entregue, ahí sí hay información propia del punto que no está en ningún otro sitio de la pantalla. Por eso la ficha conserva max-height y scroll interno: es la válvula para ese día. width:max-content es lo que hace que la ficha mida el nombre y nada más. Con un ancho fijo, "Cúcuta" dejaba el mismo bloque de 310px que "Cáchira, N. de S.", medio vacío. El max-width la acota para que un nombre largo no cruce el mapa de lado a lado. ======================================================================= */ .mapa-tarjeta{ position:absolute; left:0; top:0; z-index:6; width:max-content; max-width:min(250px,70%); /* Válvula para el día que un punto traiga jornadas, fecha, nota y líneas: la ficha nunca puede pasar del alto del mapa. Con el contenido de hoy —aspa y nombre— no llega ni a la cuarta parte, así que no se ve nunca. */ max-height:calc(100% - 24px); overflow-y:auto; background:#fff; color:var(--negro); border-radius:20px; padding:13px 16px; box-shadow:0 6px 0 rgba(0,0,0,.14); transform:translate(var(--tx,0px),var(--ty,0px)); } .mapa-tarjeta[hidden]{display:none} /* El relleno derecho reserva el sitio del aspa: 26 de botón + 10 del borde, menos los 16 de relleno de la ficha, y 6 de aire = 26. */ .mapa-tarjeta h4{font-size:17px; line-height:1.2; padding-right:26px} .mapa-tarjeta .mapa-datos{margin:12px 0 0; display:grid; gap:10px} .mapa-tarjeta .mapa-dato{display:grid; gap:2px} .mapa-tarjeta .mapa-dato dt{ font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--morado-hondo); } .mapa-tarjeta .mapa-dato dd{margin:0; font-size:15px; font-weight:300; line-height:1.4} /* Aquí vivía .mapa-papel, la frase con el papel del lugar. Se fue con el encargo del cliente: era la misma palabra que ya está en el renglón del panel "Dónde estamos", a un palmo de distancia. Ver el bloque de arriba. */ /* Las líneas de trabajo de la vereda, si el cliente las informa, se leen mejor como chips que como una lista. Mismo radio de 14px de los chips del sitio. */ .mapa-lineas{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 0; padding:0; list-style:none} .mapa-lineas li{ background:var(--gris-banda); color:var(--negro); border-radius:14px; padding:5px 11px; font-size:13px; font-weight:400; line-height:1.2; } /* Aquí vivía .mapa-ficha-nav, el pie con anterior / "3 de 3" / siguiente. Se fue entero con el encargo del cliente: las dos flechas del costado (§6.b) hacen lo mismo, están siempre a la vista y no se mueven, y el conteo lo siguen diciendo el aviso aria-live y el chip "Viendo:" del resumen. Era además el bulto de la ficha —78 de los 177px que medía—, así que quitarlo es lo que la hace pequeña de verdad. */ /* Botón de cierre. Redondo y negro como los botones del boletín del pie. Baja de 30 a 26px porque la ficha bajó de 22 a 13 de relleno: un aspa de 30 dentro de una ficha de 50px de alto se comía la pieza entera. */ .mapa-cerrar{ position:absolute; top:9px; right:10px; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:var(--negro); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:15px; line-height:1; } /* El aro invisible, igual que en los marcadores: el botón se ve de 26px porque así de discreto lo quiere el arte, pero el dedo acierta en 44 (26 + 9 por cada lado). Encoge lo que se ve, no lo que se toca. */ .mapa-cerrar::before{content:""; position:absolute; inset:-9px; border-radius:50%} .mapa-cerrar:hover{background:var(--rojo)} /* --- 6. LEYENDA DE LOS DIBUJOS ------------------------------------------- Aquí vivían los mandos del zoom. Se fueron con él. En su lugar, en el panel de al lado, va la leyenda. No es decoración: un dibujo puesto sobre un mapa se lee como que en ese punto pasa algo, y ahí no pasa nada concreto, porque de las veredas el cliente no ha entregado ni un nombre. La leyenda dice qué son de verdad —las cinco líneas de trabajo que la fundación sí tiene publicadas, más el paisaje— y así el mapa no promete información que no tiene. Los iconos son el MISMO que está sobre el mapa, instanciado en pequeño. Ni un dibujo repetido, ni una versión que pueda quedarse vieja. */ .panel-sub{ margin:22px 0 10px; font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--morado-hondo); } /* padding-left:0 y list-style:none vencen a ".panel-veredas ul" de estilo.css (que sangra 18px para las listas con viñeta) porque mapa.css se carga después y la especificidad empata con el selector de tipo. */ .panel-veredas ul.leyenda-mapa{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 14px; padding-left:0; list-style:none; } .panel-veredas ul.leyenda-mapa li{ display:flex; align-items:center; gap:7px; background:var(--gris-banda); border-radius:14px; padding:5px 12px 5px 7px; font-size:13.5px; font-weight:400; line-height:1.2; } .panel-veredas ul.leyenda-mapa svg{ flex:none; width:26px; height:26px; display:block; /* Los motivos tienen proporciones distintas (la mochila es alta, la moto es ancha). Con una caja cuadrada y el ajuste por defecto del , cada uno se centra dentro de sus 26px sin deformarse. */ } .panel-nota{ margin:0; font-size:13.5px; line-height:1.45; font-weight:300; color:#4a4a4a; } /* --- 6.b LAS DOS FLECHAS DEL RECORRIDO ----------------------------------- Antes había, DEBAJO del mapa, una barra blanca con cuatro piezas: flecha atrás, botón "Recorrido guiado", flecha adelante y un rótulo con el conteo. El cliente la devolvió: "cambiarlos por dos flechas que funcionen para moverse entre los puntos interactivos del mapa... ubicadas en un lateral". Esto es eso. Dos botones, un costado, y nada más. POR QUÉ VAN AQUÍ Y NO EN EL PIE. La barra no sólo estaba recargada: pesaba. .mapa-lienzo es una celda de rejilla, y una fila con tres mandos y un rótulo sin partir tiene un ancho mínimo que empuja la celda entera (por eso §1 tuvo que ponerle min-width:0 para que el mapa no se saliera de la pantalla en 375). Un mando en posición absoluta sobre lienzo vacío no aporta ni un píxel al ancho mínimo de nada: le devuelve al mapa el ancho que la barra le estaba quitando. Cuelgan de .mapa-arte y no del visor porque el visor recorta (overflow:clip, §1) y porque .mapa-arte mide exactamente lo que mide el mapa, que es contra lo que hay que centrarlas. Van en posición absoluta, así que no le cambian la altura a nadie y el compás sigue cayendo donde el .ai lo pone. ENCIMA DEL DIBUJO, NO EN EL MARGEN. Aquí vivían en left:1.4%, sobre la franja de cielo que el .webp deja libre a la izquierda del municipio: fuera de la silueta. El cliente lo devolvió: "las flechas para interactuar no deben ir a un lateral, deben ir sobre el mapa a un costado". Así que se mudaron adentro. La medida vieja no era falsa —esa franja sigue teniendo sólo el 0,23% de la tinta del archivo— pero contestaba a la pregunta equivocada: dónde NO hay dibujo, cuando lo que se pedía es dónde SÍ. POR QUÉ EL COSTADO IZQUIERDO, MEDIDO. Se barrió el mapa entero buscando dónde cabe la pareja de botones, y se puntuó cada posición con cuatro cosas sacadas del propio archivo: cuánto verde limpio hay debajo, cuánta tinta de rótulo se tapa, cuánto se pisa cada uno de los once dibujos (rasterizados de verdad desde sus , no por su caja) y si se cruza el blanco de toque de algún marcador. El máximo de todo el mapa cae en el flanco izquierdo: · los tres marcadores están en el 72,93% (Cáchira), el 94,73% (Cúcuta) y el 49,26% de x (Bucaramanga). Ninguno pisa el tercio izquierdo. · los tres rótulos impresos grandes —CÁCHIRA, CÚCUTA, BUCARAMANGA— caen en la mitad derecha y en el pie. El flanco izquierdo no tiene ni uno. · el compás sobresale por la esquina superior DERECHA (top:-6%, right:-4%): ese costado ya lo ocupa una pieza aprobada. · el flanco derecho, en cambio, obliga a elegir entre tapar la moto, el punto de Cúcuta o una tanda de nombres de vereda: medido, el mejor sitio de ese lado tapa un 7,7% de tinta de rótulo contra el 0,00% de éste. LO QUE TAPA ESTE SITIO, EN ESCRITORIO. Caja del 29,25% al 35,16% de ancho y del 64,93% al 79,57% de alto (1440): · 80,8% de la caja es verde de municipio limpio → va sobre el dibujo, que es lo que pidió el cliente. · 0,00% de tinta de rótulo. Ni una letra impresa del .webp. · del dibujo más cercano, la iglesita, tapa el 1,1%: la punta del alero. Ningún otro de los once entra en la caja. En 768 la caja crece un pelo (hasta el 35,49%) y suma un 1,0% de la casita. · el marcador más cercano, Bucaramanga, queda a 14 puntos de x y 9 de y de distancia: no se rozan a ninguna anchura. Se apilan en vertical porque el hueco es alto y estrecho, y por eso las puntas miran arriba y abajo: una pareja de flechas en columna apuntando a los lados no dice a dónde lleva ninguna de las dos. EL ICONO YA NO ES EL #flecha DEL SITIO. Era ese, girado un cuarto de vuelta a cada lado, y el cliente lo devolvió: "usa las flechas de la imagen, no me gustan las que están". El #flecha es un chevrón de canto recto y grosor constante, o sea lenguaje de icono de sistema en una página que está dibujada a mano de arriba abajo. Ahora cada dirección tiene su propio contorno de pincel —#f37-flecha-arriba y #f37-flecha-abajo, declarados en el del mapa en index.html— con la punta maciza, el mango de grosor irregular y los remates redondos. Al no ser el mismo dibujo girado, tampoco hacen falta las dos reglas de rotate que había aquí. */ /* z-index 4: por encima del mapa, de la lámina y de los dibujos, y por debajo de la ficha emergente, que va en 6. Ese orden ya no significa lo que significaba. Antes la ficha traía su propio "anterior / 2 de 3 / siguiente", así que daba igual que en 375 se acostara al pie del visor y tapara esta columna: el mando de recambio venía dentro de la propia ficha. Ahora la ficha es sólo un rótulo (§5) y estas dos flechas son el ÚNICO mando del recorrido, así que taparlas dejaría al visitante sin manera de pasar de punto a punto. La solución no está aquí sino en mapa.js: situarTarjeta() mide esta columna en el momento de colocar la ficha y le pone un suelo horizontal si las dos piezas se cruzan también en vertical. Se resuelve moviendo la ficha, no subiendo estos botones por encima de ella: unos botones flotando sobre el texto de la ficha serían peor problema que el que arreglan. */ .mapa-flechas{ position:absolute; z-index:4; /* left y top salen del barrido descrito arriba, no de la vista. top es el CENTRO de la pareja; el translate lo convierte en centro. */ left:29.25%; /* El translate va aquí, en el contenedor, y no en los botones: los botones usan su transform para el gesto de pulsación y un transform que se reescribe borra el que había. */ top:72.25%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; } .mapa-flechas[hidden]{display:none} /* 44px limpios de blanco de toque, que es el mínimo del encargo. No crecen en escritorio a propósito: ahora que van sobre el dibujo, cada píxel de más es un píxel de mapa tapado. EL CONTORNO NEGRO NO ES ADORNO: ES LO QUE LAS SEPARA DEL VERDE. En el margen de cielo un chip blanco se leía solo. Sobre el municipio no: medido el color medio del mapa justo debajo de esta caja —rgb(115,206,124) en escritorio, rgb(106,203,134) en móvil— el blanco queda en 1,94:1 y 2,00:1 de contraste, por debajo del 3:1 que pide un mando. El mismo negro queda en 10,84:1 y 10,50:1. La solución es la que ya usa el mapa para el mismo problema: el marcador es un punto rojo que tampoco se despegaría del verde, y se resuelve con un aro SÓLIDO alrededor (box-shadow:0 0 0 3px #fff). Aquí el aro es la tinta con la que están trazados los once dibujos —contorno grueso, remate redondo, cero desenfoque—, así que la pareja se lee como una pieza más del dibujo y no como un widget pegado encima. Ninguna sombra difuminada: el brandbook no usa ni una. Va en "border" y no en un aro de box-shadow porque box-sizing es border-box: los 3px se comen hacia dentro y el botón sigue midiendo 44x44 exactos, que es el mínimo del encargo. Quedan 38px de blanco para un icono de 26. */ .mapa-flecha{ flex:none; width:44px; height:44px; padding:0; border:3px solid var(--negro); cursor:pointer; border-radius:15px; background:#fff; color:var(--negro); display:flex; align-items:center; justify-content:center; /* Sombra sólida y sin desenfoque, del mismo tono que el contorno para que las dos piezas se lean como un solo trazo. Es el mismo recurso de .btn-dona en estilo.css, que también apoya su sombra en un color macizo. */ box-shadow:0 4px 0 var(--negro); transition:transform .14s ease, background-color .14s ease, color .14s ease; } .mapa-flecha:hover{background:var(--azul); color:#fff; transform:translateY(-2px)} .mapa-flecha:active{transform:translateY(1px)} /* EL ANILLO DEL FOCO TAMBIÉN CAMBIA AL MUDARSE AL VERDE. El :focus-visible general de estilo.css es un contorno de 3px en var(--azul) separado otros 3. Ese azul es exactamente el mismo #00ACF9 de la banda de cielo, así que en el margen —donde vivían estas flechas— el anillo era azul sobre azul: invisible por definición, y nadie lo había notado porque nadie mide un contorno que se supone que funciona. Encima del municipio no mejora: contra el verde medio de debajo de esta caja da 1,31:1. Se sustituye por el recurso con el que el propio mapa resuelve este mismo problema en el marcador (§3): aros sólidos concéntricos y ni un desenfoque. Blanco pegado al contorno para abrir el hueco y negro por fuera, que sobre este verde da 10,84:1. El outline se queda declarado en transparente porque el modo de alto contraste del sistema pinta outlines y descarta box-shadow: quitarlo del todo dejaría a ese modo sin ninguna señal de foco. */ .mapa-flecha:focus-visible{ outline:3px solid transparent; outline-offset:3px; box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--negro), 0 4px 0 var(--negro); } /* 26 y no los 20 que llevaba el chevrón. Un trazo de pincel necesita más caja que un icono geométrico: la parte que informa no es el contorno sino la diferencia de grosor entre el cuello y el medio del mango, y por debajo de unos 24px esa diferencia se come el antialias y la flecha se vuelve una mancha. Medido sobre el contorno: la tinta ocupa 91,9 de las 100 unidades del lienzo, así que 26px de caja son ~24px de dibujo dentro de un botón de 44. Sigue quedando blanco de sobra alrededor. */ .mapa-flecha svg{width:26px; height:26px; fill:currentColor; display:block; flex:none} /* --- 7. PIE DEL MAPA ------------------------------------------------------ Resumen y rótulos. Todo debajo del mapa y nada encima. Los mandos ya no viven aquí: se fueron al costado (§6.b). */ .mapa-pie{margin-top:16px; display:flex; flex-direction:column; align-items:flex-start; gap:12px} /* 7.a RESUMEN Chips con las cuentas. No hay ni una cifra escrita a mano: mapa.js las calcula del arreglo de puntos, así que el resumen no puede desmentir al mapa. Si no hay datos, no hay resumen. ES EL ÚNICO SITIO DONDE SE CUENTAN LOS PUNTOS. La barra anterior traía además un rótulo .mapa-progreso que en reposo decía exactamente lo mismo ("3 puntos de la fundación") justo encima de este chip: el mismo dato dos veces, a dos centímetros, con dos tipografías distintas. Ese rótulo se fue con la barra. Cuando hay una parada abierta, el conteo lo sigue completando el chip .vivo de aquí abajo ("Viendo: Cáchira"), y quien no ve la pantalla lo recibe por el aviso aria-live, que sí dice "1 de 3". */ .mapa-resumen{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none} .mapa-resumen[hidden]{display:none} .mapa-resumen li{ background:#fff; color:var(--negro); border-radius:14px; padding:8px 14px; box-shadow:0 4px 0 rgba(0,0,0,.14); font-size:14px; font-weight:300; line-height:1.2; } .mapa-resumen li b{font-weight:900} /* El chip que cambia con el recorrido se distingue del resto */ .mapa-resumen li.vivo{background:var(--naranja)} /* 7.b RÓTULO Los dos mensajes viven en el HTML, no aquí ni en el JS: son texto del sitio y el cliente tiene que poder editarlos sin abrir el código. mapa.js sólo decide cuál de los dos se muestra. */ .mapa-rotulo{ margin:0; /* El punto se alinea con la PRIMERA línea, no con el centro del bloque: en móvil el aviso ocupa tres renglones y un punto flotando a media altura se lee como una viñeta suelta. */ display:inline-flex; align-items:flex-start; gap:9px; background:#fff; color:var(--negro); border-radius:14px; padding:11px 17px; box-shadow:0 4px 0 rgba(0,0,0,.14); font-size:14.5px; font-weight:300; line-height:1.35; } .mapa-rotulo[hidden]{display:none} .mapa-rotulo b{font-weight:900} /* El punto del rótulo es el mismo rojo de los marcadores: enlaza el aviso con lo que el visitante va a encontrar sobre el mapa. */ .mapa-rotulo::before{ content:""; flex:none; width:11px; height:11px; border-radius:50%; background:var(--rojo); box-shadow:0 0 0 2px #fff; margin-top:.36em; } /* 7.d INVITACIÓN La otra mitad del gesto de bienvenida: el rebote de los marcadores llama la atención y este chip dice qué hacer con ellos. Va en naranja para que no se confunda con los dos rótulos blancos, que son informativos y permanentes; éste es pasajero. Nace con el atributo hidden puesto DESDE EL HTML y sólo mapa.js lo destapa, y únicamente si llegó a pintar marcadores. Si el JavaScript no corre, no hay marcadores que tocar y la invitación no aparece a mentir. Es el mismo patrón de los dos rótulos. Se retira al primer gesto del visitante, y también sola a los nueve segundos: una instrucción que sigue ahí cuando ya la seguiste es ruido. */ .mapa-invita{ margin:0; display:inline-flex; align-items:flex-start; gap:9px; background:var(--naranja); color:var(--negro); border-radius:14px; padding:11px 17px; box-shadow:0 4px 0 rgba(0,0,0,.18); font-size:14.5px; font-weight:300; line-height:1.35; } .mapa-invita[hidden]{display:none} .mapa-invita b{font-weight:900} .mapa-invita svg{ flex:none; width:17px; height:17px; fill:currentColor; display:block; margin-top:.16em; animation:mapa-invita-late 2.9s ease-in-out infinite; transform-origin:50% 50%; } @keyframes mapa-invita-late{ 0%,72%,100%{transform:scale(1) rotate(0deg)} 80% {transform:scale(1.32) rotate(16deg)} 88% {transform:scale(1) rotate(0deg)} } /* La salida es una animación de una pasada con forwards, no una transición, y mapa.js pone hidden al terminar. Así el chip no se queda nunca como un elemento presente en opacity:0, que es la trampa que este proyecto ya pagó una vez. */ .mapa-invita.se-va{animation:mapa-invita-adios .3s ease forwards} @keyframes mapa-invita-adios{ from{opacity:1; transform:none} to {opacity:0; transform:translateY(9px)} } /* --- 7.e EL LISTADO "DÓNDE ESTAMOS", ENLAZADO AL MAPA --------------------- El panel de la derecha ya traía los tres sitios escritos. En vez de repetirlos en el JavaScript —que sería la misma información en dos lugares y la garantía de que algún día se contradigan— mapa.js los LEE de ahí y los convierte en marcadores. De paso quedan enlazados en los dos sentidos: el dedo sobre el punto ilumina el renglón, y el dedo sobre el renglón ilumina el punto. Cada renglón pasa a ser un botón para que también se llegue con Tab. En reposo se ve exactamente igual que antes: sin fondo, sin borde, con la tipografía y el color heredados. Lo único que cambia es que ahora responde. El margen negativo compensa el relleno del chip para que el texto no se mueva de donde estaba al ganar el fondo. */ .hito-liga{ display:block; width:100%; margin:0 0 0 -10px; padding:3px 10px; border:0; border-radius:14px; background:none; font:inherit; color:inherit; text-align:inherit; letter-spacing:inherit; cursor:pointer; transition:background-color .14s ease, color .14s ease; } .panel-veredas li.es-resaltado > .hito-liga, .hito-liga:hover, .hito-liga:focus-visible{ background:var(--gris-banda); color:var(--rojo-hondo); } /* El renglón que la ficha está mostrando se marca aunque el puntero se haya ido a otra parte, igual que .es-actual en el marcador. */ .panel-veredas li.es-abierto > .hito-liga{ background:var(--rojo); color:#fff; } /* --- 8. RESPONSIVE -------------------------------------------------------- */ @media (max-width:600px){ /* LA FICHA YA NO SE ACUESTA AL PIE DEL MAPA. Aquí había una regla que en el teléfono la estiraba de canto a canto y la pegaba al borde inferior del visor. Existía por una razón que se acabó: la ficha llevaba nombre, papel y un pie de navegación y en 375 pasaba de 340px de alto, más que el propio mapa, así que flotar junto al punto era imposible. Con el contenido de hoy —aspa y nombre— la ficha mide unos 50px de alto y unos 190 de ancho. Flota junto a su marcador sin tapar nada, que además es mejor: una tarjeta pegada al canto inferior ya no señala a ningún punto en particular, y flotando sí. Y hay un motivo que obliga: al irse el pie de navegación, las DOS FLECHAS DEL COSTADO son el único mando para pasar de punto a punto. Una ficha acostada de canto a canto se las comía enteras (van en z-index 4 y la ficha en 6). Ahora mapa.js le pone a la ficha un suelo horizontal medido contra la columna de flechas, así que la ficha nunca se le monta encima. Ver situarTarjeta() en mapa.js. El max-height y el scroll interno no se pierden: subieron a la regla base de §5, donde protegen a las tres anchuras por igual. */ .mapa-tarjeta{padding:12px 14px} .mapa-tarjeta h4{font-size:16px} /* Los mandos del zoom ocupaban una franja de 56px bajo el mapa en el teléfono. Al retirarse el zoom, esa franja se devuelve a la página: el margen inferior de .mapa-arte vuelve a cero y la sección encoge lo que medían los botones. LOS CUATRO DIBUJOS MENUDOS SE RETIRAN. En la mesa de mano el mapa baja a unos 340px de ancho, así que un dibujo del 4% mide 14px: a ese tamaño no se distingue un árbol de una mancha. Se van los cuatro más pequeños —carpa y los tres árboles— y se quedan los siete que sí se leen: montaña, acordeón, iglesia, moto, mochila, balón y casita. Salen con display:none, que es lo correcto cuando detrás no hay contenido: son decoración y su lectura está publicada en la leyenda del panel, que no depende de esto. */ .gar-menuda{display:none} /* EL MARCADOR ENCOGE, PERO SU BLANCO DE TOQUE NO. El punto medía 22px en las tres pantallas y en la mesa de mano eso es desproporcionado: aquí el mapa baja a unos 340px de ancho, así que el punto grande que el arte dibuja se queda en 7px y el marcador le pasaba por encima al rótulo que el propio dibujo trae al lado. Se veía: el marcador de Bucaramanga partía la palabra "BUCARAMANGA" por la mitad. El tamaño no se eligió a ojo. Se localizó en el .webp la tinta oscura de los tres rótulos y se midió cuánto sitio libre deja cada uno desde el centro de su punto. El más apretado es Bucaramanga, con un 2,61% de la altura, que en una caja de 340px de ancho son 7,8px. Es decir: aro incluido, el marcador no puede pasar de 8px de radio. De ahí salen los 11px con aro de 2, o sea 7,5 de radio, que entra con margen. Con 12px el radio quedaba en 8 y se pasaba dos décimas: no se ve, pero un umbral que se cruza por dos décimas es un umbral que se cruza de verdad en cuanto alguien cambie una medida. En escritorio no hacía falta tocar nada: 22px con aro de 5 dan 16 de radio y ahí caben 17,1. Al recibir el cursor sí crece por encima del rótulo, pero eso dura lo que dura el gesto y además saca su propia etiqueta con el nombre. A este tamaño el aro ancho del hito ya no distingue nada de nada, así que los dos tipos comparten medida. Da igual: hoy no hay veredas con las que confundirlo, y cuando las haya seguirán separándose por la etiqueta y por la ficha. El blanco de toque va al revés: 11px de botón más 34 de aro invisible dan 45px, por encima del mínimo de 44 del encargo. Encoge lo que se ve, no lo que se toca. */ .mapa-punto, .mapa-punto.es-hito{ width:11px; height:11px; box-shadow:0 0 0 2px #fff, 0 3px 0 rgba(0,0,0,.22); } .mapa-punto::before{inset:-17px} .mapa-punto::after{inset:-5px} /* LAS FLECHAS EN LA MESA DE MANO. Los 44px de blanco de toque NO encogen: son el mínimo del encargo y en el teléfono es donde se tocan de verdad. Lo que se ajusta es dónde cae la columna, y hace falta ajustarlo porque en el teléfono la pareja pesa el triple sobre el dibujo: el mapa baja a 340x300, así que 44px de ancho son el 12,94% del mapa (contra el 5,91% en 1440) y la columna entera el 30,7% del alto (contra el 14,6%). El mismo mando, tres veces más grande respecto de lo que hay debajo. EL GAP BAJA DE 8 A 4. No es estética: la pareja pasa de 96 a 92px, o sea de 32,0% a 30,7% de la altura del mapa. Punto y tres décimas de dibujo que se recuperan sin tocar el blanco de toque de ninguno de los dos botones. DÓNDE CAE, MEDIDO SOBRE LA PÁGINA YA MONTADA. Caja del 26,50% al 39,44% de ancho y del 42,15% al 72,84% de alto: · 72,2% de la caja es verde de municipio limpio. · 0,00% de tinta de rótulo. Ni una letra impresa. · de los dibujos que sobreviven en móvil sólo entran dos, y por la punta: un 5,9% de la montaña (la falda izquierda, y es el dibujo más grande de los siete) y un 1,4% de la iglesita. Ninguno más. · marcador más cercano, Bucaramanga (49,26% · 88,56%): a diez puntos de x y quince de y. No se rozan. EL SITIO SE ELIGIÓ SOBRE LA FRONTERA, NO EN EL PRIMER HUECO QUE CUADRABA. Barriendo el flanco entero y quedándose con el mínimo de solape para cada nivel de verde: con 66% de verde se baja a un 1,9% del dibujo más pisado, con 69% a un 3,5% y con 74% se sube a un 9,3%. Éste es el codo. Por debajo la pareja empieza a asomar por el filo de la costa y deja de leerse como algo apoyado en el mapa, que es justo lo que pidió el cliente. Y ES EL SITIO DE LA CASITA. La casita vive del 28,85% al 36,35% de x y del 55,9% al 64,9% de y, o sea DENTRO de esta caja por los cuatro lados. A esta escala no hay forma de esquivarla: la columna mide 12,94x30,7% y la casita 7,5x9,0%, así que cualquier posición del flanco izquierdo se la come entera. Se retira en el teléfono, que es exactamente lo que este mismo archivo ya hace con los cuatro dibujos menudos (§4): antes que dejar un dibujo tapado del todo por un mando, se retira el dibujo, y así nadie ve un garabato asomando por debajo de un botón como si fuera un error de montaje. Puede retirarse porque no lleva contenido detrás: la casita es paisaje, no una línea de trabajo. Las cinco que sí significan algo —mochila, balón, acordeón, carpa y moto— tienen su lectura publicada en la leyenda del panel, y ninguna de las cinco entra aquí. */ .mapa-flechas{top:57.5%; gap:4px; left:26.5%} .gar-casita{display:none} .mapa-resumen li{font-size:13.5px; padding:7px 12px} .mapa-rotulo, .mapa-invita{font-size:13.5px; padding:10px 14px} .mapa-etiqueta{font-size:13px; padding:6px 11px} /* La lámina en la mesa de mano. El mapa baja a unos 340px de ancho, así que una pieza del 23% se queda en 78px y el sello deja de leerse. Las piezas grandes crecen en proporción y las tres pequeñas se retiran: en ese tamaño no decoran, ensucian. Las que se van son decoración pura y salen con display:none, que es lo correcto cuando detrás no hay contenido. Ningún elemento con texto entra en esta regla. */ /* El sello crece del 23% al 31% porque el mapa baja a unos 340px de ancho y al 23% se quedaba en 78px, un tamaño en el que su letra ya no se lee. El "top" sube del 2,5% al 4%: girado siete grados la caja del sello se ensancha un 11% por los cuatro lados, y medido en 375 el canto superior asomaba tres décimas por encima del borde, justo donde el visor tiene el radio de 26px y el recorte se nota. */ .lam-sello{--w:31%; left:3%; top:4%} .lam-guirnalda{--w:68%} .lam-guirnalda-n{--w:52%; left:26%} .lam-lunares{--w:16%; left:58%} .lam-lunares-so{--w:14%} /* Los acentos pequeños se retiran. En una caja de 340px un aspa del 6% mide 20px: a ese tamaño no decora, sólo ensucia. Se van con display:none, que es lo correcto cuando detrás no hay contenido; ningún elemento con texto entra en esta regla. Se quedan las piezas que sostienen la composición: el sello, las dos guirnaldas, dos lunares, el rastro y el asterisco. EL RASTRO Y EL ASTERISCO VUELVEN. Estaban aquí, con display:none, y por un motivo que ya no existe: eran las dos únicas piezas de la lámina que caían en el canto izquierdo (el rastro del 1% al 18% de x, el asterisco del 3% al 12%) y ahí vivían las flechas cuando flotaban en el margen de cielo. Ahora las flechas se mudaron encima del dibujo, del 26% al 38,9% de x (§6.b), así que ni se rozan: quedan a ocho puntos de x del rastro y a catorce del asterisco. El adorno se había retirado para no dejarlo medio tapado por un mando; retirado el mando, el adorno vuelve y el canto izquierdo del teléfono deja de ser un rectángulo de cielo vacío. */ .lam-lunares-e, .lam-aspa-lima, .lam-aspa-lima-e, .lam-aspa-verde{display:none} /* 44px limpios también en los renglones del listado: son botones y se tocan con el dedo igual que las flechas del recorrido. */ .hito-liga{min-height:44px; display:flex; align-items:center} } /* --- 9. MOVIMIENTO REDUCIDO ---------------------------------------------- Quien pidió menos movimiento no pierde ni una pieza del mapa: los once dibujos se quedan quietos y enteros, la ruta se queda dibujada de punta a punta, el relieve no depende de ninguna animación y sólo desaparece el latido de los marcadores. Comprobado midiendo con la preferencia activada: cero elementos por debajo del 2% de opacidad en toda la sección. La información sigue estando toda, porque nunca estuvo en la animación. */ @media (prefers-reduced-motion:reduce){ .mapa-punto::after{animation:none; opacity:0} .mapa-punto, .mapa-etiqueta, .mapa-flecha, .hito-liga{transition:none} /* Los dibujos y la ruta se quedan QUIETOS y ENTEROS. En los dos casos lo único que se apaga es la animación, y en los dos el estado de reposo del elemento es el estado visible: el dibujo en su sitio y su giro, la ruta dibujada de punta a punta. Nadie pierde una sola pieza del mapa por pedir menos movimiento. */ .gar, .ruta-fondo, .ruta-linea{animation:none} /* La lámina se queda quieta pero ENTERA: se apaga el vaivén, no la pieza. Y el gesto de bienvenida desaparece sin dejar rastro, con lo que el marcador cae en su transform de reposo, que es el estado visible. Quien pide menos movimiento no pierde ni un elemento de la composición. */ .lam, .compas, .mapa-invita svg{animation:none} .mapa-punto.p-entra{animation:none} /* La salida del chip tampoco se anima: mapa.js le pone hidden de una vez. Es el único camino en el que la animación era la que disparaba el hidden, así que el JavaScript trae su propio reloj de respaldo. */ .mapa-invita.se-va{animation:none; opacity:0} } /* ========================================================================== §6.c — AJUSTE PEDIDO: TRES ESPACIOS ARRIBA Y GIRO DE 45 GRADOS -------------------------------------------------------------------------- "muevas las flechas del mapa 3 espacios hacia arriba y luego rotalas en 45 grados". QUE ES UN "ESPACIO". Se toma la unidad que la pieza ya define: el alto del boton (44px) mas el hueco entre los dos (8px) = 52px por paso. Tres pasos son 156px. Va en calc sobre el porcentaje que ya tenian, asi el desplazamiento es exacto y no depende del alto del contenedor. POR QUE EN MOVIL NO SON 156px. Medido en vivo: el mapa mide 732px de alto en escritorio, asi que 156px son el 21,3% de su altura. En el telefono el mapa baja a ~300px; restar esos mismos 156px dejaria el centro de la pareja en 28px y su borde superior FUERA del dibujo. Se traslada el mismo 21,3% relativo (57,5% - 21,3% = 36,2%), que es el mismo gesto a la escala del mapa pequeño. EL GIRO VA EN EL SVG, NO EN EL BOTON. El boton tiene su transform ocupado por el gesto de pulsacion (:hover translateY(-2px), :active translateY(1px)) y un transform que se reescribe borra el que habia. Tampoco puede ir en .mapa-flechas, que usa el suyo para centrarse en vertical. CABE: 26px girados 45 grados dan una diagonal de 36,8px, y el hueco interior del boton es 44 - 3 - 3 = 38px. Entra sin recortarse. Girados 45 grados la de subir apunta arriba-derecha y la de bajar abajo-izquierda, que es la diagonal por la que corre el recorrido punteado entre Cachira y Bucaramanga. El gesto queda alineado con lo que hace. ========================================================================== */ .mapa-flechas{ top:calc(72.25% - 156px) } .mapa-flecha svg{ transform:rotate(45deg) } @media (max-width:900px){ .mapa-flechas{ top:36.2% } } /* ========================================================================== LIMPIEZA PEDIDA POR LA CLIENTA (mapa) -------------------------------------------------------------------------- Se retira la capa entera de laminas decorativas dispersas alrededor del mapa. Cubre tres correcciones del documento: · "Quitar el sello" -> .lam-sello · "Quitar los recursos por fuera del mapa: los puntos y los asteriscos" -> .lam-lunares*, .lam-asterisco, .lam-aspa* · "Quitar el corazon, las estrellas y el corazon azul" -> asteriscos/aspas (estrellas) Las guirnaldas y el rastro son de la misma capa suelta y se van con ella para dejar el mapa limpio. El mapa (img), los marcadores rojos y los dibujos sobre el territorio NO son .lam y se conservan. ========================================================================== */ .territorio .lam{ display:none !important } /* ========================================================================== MATACHOS DEL MAPA — quitar (comparado con el .ai, artboard Inicio) -------------------------------------------------------------------------- El .ai muestra el mapa LIMPIO: solo el territorio verde, la iglesia de Cáchira, los puntos rojos de las veredas, los marcadores de ciudad y las rutas punteadas — todo eso YA viene en la imagen mapa-cachira-verde.webp. Los dibujos de acordeón, montaña, balón, moto, mochila, casa, carpa y árboles iban encima como una capa extra (.mapa-garabatos) que el .ai no tiene: son los "matachos" que la clienta pidió quitar. Se oculta la capa entera; la imagen del mapa por debajo queda igual al arte. ========================================================================== */ .territorio .mapa-garabatos{ display:none !important } /* Recuadros bajo el mapa ("Toca los puntos", "Estamos rehaciendo el mapa"...) — quitar. Son instrucciones para los marcadores interactivos, que hoy no existen (la lista de veredas viene vacía), y el .ai no muestra nada bajo el mapa. Se ocultan para no dejar info de relleno ni espacio extra. */ .territorio .mapa-pie{ display:none !important } /* En móvil el panel va a todo el ancho, así que la brújula colgada con right negativo se saldría de la pantalla. Se ajusta para que quede sobre la esquina superior derecha del panel, dentro del viewport. */ @media (max-width:600px){ .compas{ width:64px; right:12px; top:-32px } } /* ========================================================================== CORTE DEL MAPA — nubes blancas cayendo sobre el azul (como el .ai) -------------------------------------------------------------------------- Por defecto .nube-arriba se cuelga arriba de la sección (top:-62) y sus lóbulos muerden hacia la sección de encima. En el mapa el .ai muestra lo contrario: nubes BLANCAS que descienden dentro del panel azul. Se voltea el festón (scaleY -1) y se baja a top:0 para que la base plana selle contra la sección blanca de arriba y los lóbulos blancos cuelguen sobre el azul. ========================================================================== */ .territorio > .nube-arriba{ top:0; transform:scaleY(-1); z-index:2; } /* ========================================================================== MARCO DE PINCEL DEL MAPA (Inicio .ai) -------------------------------------------------------------------------- El .ai rodea el panel azul del mapa con un marco pintado a mano (pincel blanco). Se aplica como border-image 9-slice sobre un overlay que cubre la sección, para que las esquinas se conserven y los lados se estiren sin tocar el mapa interactivo (que va por encima con z-index:2 vía .territorio .env). ========================================================================== */ .territorio{ position:relative } .territorio-marco{ position:absolute; inset:0; z-index:1; pointer-events:none; border:30px solid transparent; border-image:url('img/mapa-marco-pincel.webp') 70 / 30px / 0 stretch; } /* Ahora la sección es AZUL (borde infinito). El festón de arriba se reactiva como lóbulos AZULES que muerden hacia arriba la sección blanca de encima (programas), suavizando la transición. El de abajo se queda oculto: el corte inferior lo dan las nubes de la propia imagen del mapa. */ .territorio > .nube-abajo { display: block !important; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 4; pointer-events: none; } .territorio > .nube-arriba{ display:none !important } /* Nubes decorativas dentro del panel del mapa (como el .ai de Inicio). Van sobre el azul, detrás del contenido (z-index bajo). */ .territorio .mapa-nube{ position:absolute; z-index:3; pointer-events:none; line-height:0 } .territorio .mapa-nube svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 2px 0 rgba(0,0,0,.04)) } .territorio .mn-1{ top:38%; left:1.5%; width:min(150px,13vw); z-index:3 } .territorio .mn-2{ top:60%; left:2%; width:min(128px,11vw); z-index:3 } .territorio .mn-3{ top:82%; left:5%; width:min(118px,10vw); z-index:3 } /* ========================================================================== MAPA DE INICIO v2 — imagen del .ai + trazado animado + texto del panel Reemplaza el mapa interactivo. La imagen (mapa-inicio.webp) ya trae el panel azul, el marco de pincel, las nubes, las rutas, las ciudades, la iglesia, la brujula y el recuadro del panel. Encima solo van el texto y el trazado. ========================================================================== */ /* Fuera los overlays de la versión anterior */ .territorio-marco{ display:none !important } .territorio .mapa-nube:not(.mapa-nube-cierre){ display:none !important } /* solo las nubes del .ai (que ya vienen en la imagen); sin extras */ /* La sección ya no es azul: la imagen es el panel. Fondo claro y título oscuro. */ .territorio{ background:#fff !important; background-image:none !important; padding:30px 0 20px } .territorio::before, .territorio::after{ display:none !important } /* fuera el grano Y la veladura (linear-gradient con rgba(0,0,0,.12)) que dejaba un degradado gris hacia abajo */ .territorio h2{ color:var(--negro) } .territorio .bajada{ color:var(--negro) } .territorio .mapa-ai-wrap{ position:relative; width:100%; margin-top:16px; margin-bottom:32px; line-height:0 } .territorio .mapa-ai-img{ width:100%; height:auto; display:block; border-radius:8px } .territorio .mapa-ai-ruta{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none } .territorio .mapa-nube-cierre { display: none !important; } /* right:-25px/bottom:-35px (versión anterior) dejaba la nube casi entera fuera del rectángulo azul de la imagen (que NO tiene esquina redondeada visible a este tamaño): el canto recto del panel le partía la forma en dos, mitad sobre el azul y mitad flotando sola sobre el blanco de .territorio. Isaías pidió correrla más a la izquierda y más arriba para que vuelva a apoyarse sobre el panel en vez de quedar "cortada" por ese borde. */ /* Las nubes propias de la imagen (horneadas en mapa-inicio.webp) YA sangran un poco fuera de la esquina redondeada del panel — es el lenguaje visual del propio .ai, no un accidente. bottom:12px/right:4% (versión anterior) la dejaba demasiado adentro, "flotando" sin tocar el marco; esto la vuelve a acercar al borde, sin llegar a los -35px/-25px que la partían en dos contra el canto recto de antes de la esquina redondeada. */ .territorio .nube-flotante-user { position: absolute; right: -8px; bottom: -15px; width: min(280px, 24vw); height: auto; z-index: 50 !important; pointer-events: none; } @media (max-width: 600px) { .territorio .nube-flotante-user { right: -4px; bottom: -8px; width: 140px; } } .territorio .mapa-ai-ruta .ruta-linea{ fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round; stroke-dasharray:2 26; animation:ruta-fluye 1.3s linear infinite; } @keyframes ruta-fluye{ to{ stroke-dashoffset:-28 } } .territorio .mapa-ai-info{ position:absolute; left:66.4%; top:23.5%; width:23.6%; color:var(--negro); line-height:1.42; text-align:left; } /* El hace de título "Dónde estamos". Se le quita el triángulo nativo. */ .territorio .mapa-ai-info summary{ font-size:clamp(15px,1.55vw,22px); margin:0 0 9px; font-weight:900; color:var(--negro); list-style:none; cursor:default; } .territorio .mapa-ai-info summary::-webkit-details-marker{ display:none } .territorio .mapa-ai-info summary::marker{ content:"" } /* En desktop el contenido va SIEMPRE visible aunque el
esté cerrado: el summary solo es el título, no un acordeón. */ .territorio .mapa-ai-info > ul, .territorio .mapa-ai-info > p{ display:block } .territorio .mapa-ai-info ul{ list-style:none; margin:0 0 11px; padding:0; font-size:clamp(11px,1.15vw,15.5px) } .territorio .mapa-ai-info li{ margin-bottom:6px; padding-left:17px; position:relative } .territorio .mapa-ai-info li::before{ content:""; position:absolute; left:0; top:.34em; width:9px; height:9px; border-radius:50%; background:var(--rojo-hero,#FF3C00) } .territorio .mapa-ai-info p{ font-size:clamp(10px,1.05vw,15px); margin:0; font-weight:300; color:var(--negro) } /* TABLET (601–860px): se conserva el comportamiento previo — la imagen de escritorio (mapa a la izquierda + panel blanco a la derecha) con el acordeón "Dónde estamos" como pastilla tocable en la esquina. El diseño de tablet no es el apilado de teléfono, así que ese layout (abajo) queda acotado a ≤600px. */ @media (min-width:601px) and (max-width:860px){ .territorio .mapa-ai-info{ position:absolute; left:auto; right:12px; top:12px; width:auto; max-width:calc(100% - 24px); background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,.16); overflow:hidden; z-index:6; } .territorio .mapa-ai-info[open]{ left:12px; right:12px; max-width:none; } .territorio .mapa-ai-info summary{ margin:0; padding:9px 32px 9px 14px; font-size:15px; cursor:pointer; position:relative; user-select:none; } .territorio .mapa-ai-info summary::after{ content:""; position:absolute; right:14px; top:46%; width:8px; height:8px; border-right:2.5px solid var(--negro); border-bottom:2.5px solid var(--negro); transform:translateY(-70%) rotate(45deg); transition:transform .2s; } .territorio .mapa-ai-info[open] summary::after{ transform:translateY(-20%) rotate(225deg) } .territorio .mapa-ai-info > ul, .territorio .mapa-ai-info > p{ display:none } .territorio .mapa-ai-info[open] > ul{ display:block; font-size:14px; margin:0; padding:2px 14px 4px } .territorio .mapa-ai-info[open] > p{ display:block; font-size:13px; font-weight:400; padding:0 14px 12px } } /* MÓVIL (≤600px, documento .ai mesa de trabajo 375): el mapa va APILADO — la imagen mapa-inicio-movil.webp ya trae el mapa arriba y una CAJA BLANCA con la brújula abajo. El acordeón "Dónde estamos" se coloca DENTRO de esa caja dibujada: colapsado muestra solo la etiqueta (la caja se ve como en el documento); al tocarlo despliega las sedes sobre un panel blanco propio que cubre la caja. La ruta animada se oculta (las rutas ya vienen en la imagen). */ @media (max-width:600px){ .territorio .mapa-ai-ruta{ display:none } /* Info DIRECTA en la caja blanca dibujada (sin acordeón). Coordenadas de la caja dentro de la imagen: izq 8%, der 7%, arriba ~62%. La brújula ocupa la esquina sup-derecha, por eso el texto se ancla a la izquierda. El
queda abierto (el JS ya no lo colapsa en ≤600px) y el summary hace de título fijo, sin flecha ni toque. */ .territorio .mapa-ai-info{ position:absolute; left:13.5%; right:8%; top:62%; bottom:auto; width:auto; max-width:none; background:transparent; border:0; box-shadow:none; overflow:visible; z-index:6; } .territorio .mapa-ai-info summary{ margin:0 0 4px; padding:0; font-size:14.5px; font-weight:900; color:var(--negro); list-style:none; display:block; cursor:default; pointer-events:none; } .territorio .mapa-ai-info summary::after{ display:none } .territorio .mapa-ai-info > ul{ display:block; font-size:12px; margin:0; padding:0 } .territorio .mapa-ai-info li{ margin-bottom:2px } .territorio .mapa-ai-info > p{ display:block; font-size:11px; font-weight:400; margin:4px 0 0; padding:0 } } /* El mapa ocupa el ancho de la sección (rompe el max-width de .env) y se cierra el hueco con la sección siguiente (apoyo trae 126px de padding-top). */ .territorio .mapa-ai-wrap{ width:100%; margin-left:0; margin-right:0 } .territorio + .apoyo{ padding-top:40px } /* 2026-08-10: tanto escritorio (≥901px) como móvil (≤600px) tienen ya .apoyo aplanado a una plantilla (cierre.css) con su propio aire arriba horneado en la imagen — los 40px de aquí se sumaban ENCIMA de eso (y en escritorio, encima también de los 126px viejos de cierre.css), dejando la sección más alta de lo que Isaías pedía ("hay que desplazarse de más"). mapa.css carga DESPUÉS de cierre.css, así que aunque cierre.css ya pusiera padding-top:0, esta regla (misma especificidad, dos clases) le seguía ganando por orden. Se anula aquí mismo, en el archivo que manda, sólo en los dos anchos con plantilla aplanada — tablet (601-900px) sigue con el diseño viejo (texto real) y sigue necesitando este aire. */ @media (min-width:901px), (max-width:600px){ .territorio + .apoyo{ padding-top:0 } } /* ========================================================================== NOMBRES DE VEREDAS SOBRE EL MAPA (2026-08-19) -------------------------------------------------------------------------- 16 puntos rojos ya vienen pintados dentro de mapa-inicio.webp sin nombre; esto sólo agrega el texto al lado de cada uno, posicionado en % sobre .mapa-ai-wrap (que es position:relative y llena el ancho con el mismo lienzo 2304×1452 que la imagen). Coordenadas remapeadas por detección de color entre la referencia del cliente y esta imagen real — ver el comentario del HTML. Sólo escritorio/tablet: la composición móvil apilada (mapa-inicio-movil.webp) es una imagen distinta y estos % no le corresponden. */ .mapa-veredas{ position:absolute; inset:0; pointer-events:none; } /* Etiquetas de vereda: texto centrado DEBAJO del punto (como en la referencia). .v-encima = las excepciones que van ENCIMA del punto (Las cuadras, La carrera). */ .v-punto{ position:absolute; /* --dy/--dx: ajuste fino opcional en px (dy negativo = sube), sólo por inline style en el que lo necesite; por defecto no mueven nada. */ transform:translate(calc(-50% + var(--dx, 0px)), calc(6px + var(--dy, 0px))); /* centrado horizontal, arranca 6px bajo el punto */ text-align:center; font-family:'Outfit', 'Inter', sans-serif; font-weight:600; font-size:clamp(7px, 0.78vw, 10px); line-height:1; color:#3b2a7a; white-space:nowrap; text-shadow:0 1px 3px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.9); } /* Va justo por encima del punto (Las cuadras y La carrera) */ .v-encima{ transform:translate(-50%, calc(-100% - 6px + var(--dy, 0px))); } @media (max-width:600px){ .mapa-veredas{ display:none } } /* 2026-08-25: mismo patrón .v-punto/.v-encima, coordenadas propias para mapa-inicio-movil.webp (750×1280, ver comentario largo en el HTML sobre cómo se emparejó cada nombre con su punto real). Oculto por defecto (fuera de ≤600px no existe esta composición); .mapa-veredas ya se apaga arriba en ese mismo ancho, así que nunca se ven las dos a la vez. */ .mapa-veredas-movil{ position:absolute; inset:0; pointer-events:none; display:none; } @media (max-width:600px){ .mapa-veredas-movil{ display:block } } /* 2026-08-25b: en la imagen móvil casi la mitad de los puntos caen a menos de 20px unos de otros (geografía real, no el trazo esquemático del cliente) — con las 16 etiquetas "centradas debajo" por defecto, 9 de ellas se pisaban entre sí (Boca de monte/Villanueva, La caramba/Los mangos/La carrera, Planadas/Miraflores...). Se simuló el layout con las cajas reales (getBoundingClientRect de cada span ya renderizado) y se resolvió cada choque moviendo la etiqueta más apretada a un lado (v-izq/v-der, con el punto pegado al borde del texto en vez de centrado) o arriba (v-encima, ya existía) hasta que ninguna caja se tocara. Sólo Miraflores necesitó además bajar más lejos de lo normal (v-lejos) — ver qué clase lleva cada en el HTML. */ .v-der{ text-align:left; transform:translate(6px, calc(-50% + var(--dy, 0px))); } .v-izq{ text-align:right; transform:translate(calc(-100% - 6px), calc(-50% + var(--dy, 0px))); } .v-lejos{ transform:translate(-50%, calc(13px + var(--dy, 0px))); }