/* Colores y posición del mapa público. El HTML lo mete en .container, así que
el ancho es el de ese contenedor, no el de toda la página. El alto en
escritorio sigue siendo el del bloque «Trámites y Servicios»: 930 px. */
.mapa-proyectos {
--primary: #055A1C;
--claro: #D9E8D5;
--contraste: #033711;
--accent: #E60064;
--detalles: #3B2720;
position: relative;
width: 100%;
height: 930px;
overflow: hidden;
/* Ancho del panel del catálogo (escritorio); el mapa ocupa el resto. */
--catalogo-ancho: 47%;
background: transparent;
color: var(--contraste);
font-family: "Montserrat", "Segoe UI", "Liberation Sans", sans-serif;
}
.mapa-proyectos, .mapa-proyectos * { box-sizing: border-box; }
.mapa-proyectos > svg { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.marca { cursor: pointer; }
.marca foreignObject { overflow: visible; pointer-events: none; }
.marca-icono {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
line-height: 1;
}
.marca-calle { background: none; border: 0; }
.marca-calle span {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #E60064;
color: #fff;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(3, 23, 8, 0.45);
font-size: 16px;
}
.muni { cursor: pointer; stroke-linejoin: round; }
.etiqueta, .placa { pointer-events: none; }
.mun-nombre, .mun-fondo { cursor: pointer; }
.mun-cuenta { font-size: 0.92em; font-weight: 800; fill: #E60064; }
.obra-pin { background: none; border: 0; }
.obra-pin span {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #E60064;
color: #fff;
font-weight: 800;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(3, 23, 8, 0.45);
}
.region-nombre, .region-cuenta { text-anchor: middle; font-family: "Montserrat", "Segoe UI", "Liberation Sans", sans-serif; }
.region-nombre { font-size: 22px; font-weight: 700; letter-spacing: 2.4px; }
.region-cuenta { font-size: 12px; font-family: "Montserrat", "Segoe UI", "Liberation Sans", sans-serif; letter-spacing: 0.4px; }
.mun-nombre {
font-weight: 700;
fill: #033711;
text-anchor: middle;
paint-order: stroke fill;
stroke: #ffffff;
stroke-linejoin: round;
}
#mapa.oculto { visibility: hidden; }
#calles { position: absolute; inset: 0; z-index: 2; background: #e8e4d8; }
#calles[hidden] { display: none; }
#calles.leaflet-container { width: 100%; height: 100%; }
.mapa-proyectos .leaflet-container img {
max-width: none !important;
max-height: none !important;
}
/* Que los botones de zoom no queden debajo del botón "Volver a la región". */
.leaflet-top.leaflet-left { margin-top: 46px; }
/* Tarjeta de un logro: ventana emergente sobre el mapa, como la de la
referencia (foto arriba, datos debajo y su propia barra de desplazamiento). */
#ficha {
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(340px, calc(100% - 32px));
max-height: calc(100% - 32px);
overflow: auto;
background: #fff;
color: var(--contraste);
border-radius: 16px;
box-shadow: 0 18px 50px rgba(3, 55, 17, 0.35);
/* El texto de la ficha va en Montserrat; el título conserva la serif. */
font-family: "Montserrat", "Segoe UI", "Liberation Sans", sans-serif;
}
/* Con el catálogo abierto, la tarjeta se centra en el mapa (a la derecha del
panel), no en todo el plugin. */
.mapa-proyectos.catalogo-abierto #ficha {
left: calc(var(--catalogo-ancho) + (100% - var(--catalogo-ancho)) / 2);
}
/* En el mapa de calles la tarjeta viaja dentro de una ventana de Leaflet: la
coloca el propio Leaflet por encima del punto (con su punta), así que el
punto de la obra queda siempre a la vista, y sigue al pin al mover o
acercar el mapa. Aquí la tarjeta sólo aporta su contenido. */
#ficha.en-popup {
position: static;
top: auto;
left: auto;
transform: none;
width: min(340px, 72vw);
/* El retrato pide algo más de alto que la foto apaisada: 70 vh deja ver la
tarjeta entera (foto y datos) sin que el popup se salga del mapa. */
max-height: 70vh;
border-radius: 14px;
box-shadow: none;
}
.leaflet-popup.ficha-popup .leaflet-popup-content-wrapper {
padding: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 18px 46px rgba(3, 55, 17, 0.35);
}
.leaflet-popup.ficha-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.leaflet-popup.ficha-popup .leaflet-popup-tip { box-shadow: none; }
#ficha[hidden] { display: none; }
/* El bloque del mapa va sin fondo propio (manda el fondo de la página) y con
las esquinas redondeadas, como los demás bloques del sitio. */
.seccion-mapa-proyectos {
border-radius: 24px;
overflow: hidden;
}
/* El filete verde del título es del tema y mide 150 px fijos: con un título
más corto no cabe en su caja, los márgenes automáticos no pueden centrarlo
y se ve corrido hacia la derecha. Aquí se centra con el propio texto. */
.titulo-mapa.green-line::after {
left: 50%;
right: auto;
margin: 0;
transform: translateX(-50%);
}
/* La foto de la obra con comparador antes/después: la capa de «después» se
descubre moviendo el eje, como en la referencia. El «antes» va en gris,
igual que en el catálogo.
La caja tiene la proporción de las fotos del logro (3/2, apaisada,
como los 1920x1280 que hay) y ocupa todo el ancho de la tarjeta: así los
márgenes de los lados son iguales, la foto llena la caja con contain y no
quedan franjas. El tope de alto (56 vh) evita que se coma la tarjeta en
ventanas bajas. */
#ficha-hero {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
max-height: 56vh;
/* Fondo neutro del tema: rellena las franjas que deja la foto al verse
entera (background-size: contain), nunca un gris sucio. */
background: var(--claro);
border-radius: 16px 16px 0 0;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
/* El gesto vertical es del comparador; el horizontal sigue siendo el del
scroll de la página. */
touch-action: pan-x;
}
/* Hasta que las fotos del par ya están descargadas, el fondo verde no debe
verse como si fuera la imagen. La de antes, si ya llegó, sí se pinta. */
#ficha-hero.esperando-foto {
background-color: transparent;
}
#ficha-hero.esperando-foto .comparador-despues,
#ficha-hero.esperando-foto .comparador-eje,
#ficha-hero.esperando-foto .comparador-rotulo {
visibility: hidden;
}
.comparador { position: absolute; inset: 0; }
/* Las dos capas usan el MISMO encuadre: la foto entera (contain) y centrada,
sin repetir y sin deformar. Al quedar alineadas, el antes y el después
siguen coincidiendo al mover el eje. */
.comparador-antes,
.comparador-despues {
position: absolute;
inset: 0;
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
/* Capa del fundido cruzado: guarda la imagen que sale y se desvanece encima
de la que entra (el HTML sólo trae dos capas). La crea mapa.js. */
.comparador-fundido {
position: absolute;
inset: 0;
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
opacity: 0;
pointer-events: none;
}
/* El gris va en una capa interna (hereda el fondo): el rótulo de la capa
queda a color y se ve por encima. */
.comparador-gris {
position: absolute;
inset: 0;
background: inherit;
filter: grayscale(1) contrast(0.94) brightness(0.96);
}
/* El recorte se hace con clip-path: la capa no cambia de tamaño, así que la
foto nunca se deforma al mover el eje. El comparador es VERTICAL: la capa
de «después» ocupa la parte de abajo y se recorta desde arriba.
0 % = el después llena toda la caja; 100 % = no se ve nada de él. Cada
imagen arranca en el 50 % (el centro) y el eje barre hacia arriba desde
mapa.js hasta el 0 %. */
.comparador-despues { clip-path: inset(var(--comparador-y, 50%) 0 0 0); }
/* Cambio de par: FUNDIDO CRUZADO limpio, sin desplazamiento. La imagen que
sale se va en la capa .comparador-fundido (la desvanece mapa.js) y la que
entra aparece con opacidad aquí, en 700 ms y con un ease-in-out suave
(0.4, 0.3, 0.6, 0.7): ningún tramo de 100 ms pasa del 20 % del recorrido,
así que no hay tirón al empezar ni al acabar. */
@keyframes comparador-fundido-entra {
from { opacity: 0; }
to { opacity: 1; }
}
.comparador.entrando .comparador-despues {
animation: comparador-fundido-entra 700ms cubic-bezier(0.4, 0.3, 0.6, 0.7) both;
}
@media (prefers-reduced-motion: reduce) {
.comparador.entrando .comparador-despues { animation: none; }
}
/* Eje horizontal que sube y baja, con su mando redondo. */
.comparador-eje {
position: absolute;
left: 0;
right: 0;
top: var(--comparador-y, 50%);
height: 2px;
margin-top: -1px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 6px rgba(3, 23, 8, 0.35);
cursor: ns-resize;
/* El gesto vertical es del comparador; el horizontal sigue siendo el del
scroll de la página. */
touch-action: pan-x;
}
.comparador-eje[hidden] { display: none; }
.comparador-eje:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Mando discreto: 27 px, blanco con un punto de transparencia, sombra corta y
un filo fino que lo separa de la foto. Dentro van las dos flechas giradas
para que apunten arriba y abajo (el eje es vertical). */
.comparador-mando {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
display: flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: var(--primary);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
box-shadow: 0 1px 5px rgba(3, 23, 8, 0.35), inset 0 0 0 1px rgba(3, 55, 17, 0.22);
}
.comparador-rotulo {
position: absolute;
padding: 5px 11px 4px;
border-radius: 999px;
background: rgba(3, 55, 17, 0.85);
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
text-shadow: 0 1px 2px rgba(3, 23, 8, 0.55);
box-shadow: 0 2px 8px rgba(3, 23, 8, 0.45);
pointer-events: none;
}
.comparador-rotulo[hidden] { display: none; }
/* Cada rótulo se coloca dentro de su capa: el «Antes» arriba a la izquierda
(capa de base, en gris) y el «Después» abajo a la derecha (capa recortada,
viaja con el clip: al subir el eje hasta abajo desaparece con su mitad). */
.comparador-rotulo-antes { top: 8px; left: 8px; }
.comparador-rotulo-despues { bottom: 8px; right: 8px; }
/* Filete institucional al pie de la foto. */
#ficha-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
pointer-events: none;
}
.hero-vacio {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 22px;
text-align: center;
font-size: 14px;
color: var(--claro);
}
.hero-vacio[hidden] { display: none; }
#ficha-hero:not(.sin-foto):not(.sin-despues) { cursor: ns-resize; }
#ficha-hero.sin-foto .comparador,
#ficha-hero.sin-foto::after { display: none; }
/* Una sola foto: se ve el antes, sin eje ni rótulo de después. */
#ficha-hero.sin-despues .comparador-eje,
#ficha-hero.sin-despues .comparador-rotulo-despues,
#ficha-hero.sin-despues .comparador-despues { display: none; }
/* Puntos del carrusel de imágenes. */
.par-puntos {
position: absolute;
left: 50%;
bottom: 11px;
z-index: 2;
display: flex;
gap: 6px;
transform: translateX(-50%);
}
.par-puntos[hidden] { display: none; }
/* Mismas barras que los indicadores del carrusel del sitio. */
.par-punto {
width: 2.5rem;
height: 0.5rem;
padding: 0;
border: 0;
border-radius: 5% / 50%;
background-color: var(--tertiary, #76b82a);
opacity: 0.5;
box-shadow: 0 1px 4px rgba(3, 23, 8, 0.35);
transition: opacity 180ms ease;
cursor: pointer;
}
.par-punto.activo { opacity: 1; }
@media (max-width: 575px) {
#par-anterior, #par-siguiente { width: 2rem; opacity: 0.4; }
}
.par-punto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ficha-cuerpo { padding: 12px 14px 16px; }
/* Con el comparador no hay estado «antes/después»: el detalle se lee siempre. */
#ficha-texto { opacity: 1; }
#ficha h2 { margin: 6px 0 4px; font-family: "Montserrat", "Segoe UI", "Liberation Sans", sans-serif; font-size: 20px; line-height: 1.2; }
#ficha .kicker { margin: 0; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; color: var(--accent); font-weight: 700; }
#ficha p { margin: 8px 0; line-height: 1.45; }
/* Detalle de la tarjeta, pieza por pieza: de qué tipo es, dónde y cuándo,
qué cuenta y qué se puede hacer. */
#ficha .ficha-categoria {
display: inline-block;
margin: 0 0 8px;
padding: 5px 11px 4px;
border-radius: 999px;
background: rgba(5, 90, 28, 0.1);
color: var(--primary);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
#ficha .ficha-categoria[hidden] { display: none; }
/* Dónde y cuándo, cada dato con su icono: igual en la tarjeta del mapa y en
las del catálogo. */
.ficha-datos {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin: 2px 0 0;
}
/* En la tarjeta del mapa manda el margen del bloque; el `#ficha p` pesa más. */
#ficha .ficha-datos { margin: 2px 0 6px; }
.ficha-dato {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
color: #41563f;
}
.ficha-dato i { color: var(--primary); font-size: 12px; }
.ficha-dato[hidden] { display: none; }
#ficha #ficha-texto { margin: 6px 0 0; color: #41563f; }
#ficha #ficha-texto[hidden] { display: none; }
/* El contador «Imagen N de M» ya no se usa: su nodo lo retira mapa.js. */
/* La acción, como botón: la misma que en las tarjetas del catálogo. */
#ficha .ficha-pie { margin: 14px 0 0; }
#ficha .ficha-pie[hidden] { display: none; }
#ficha-fuente {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 999px;
background: var(--primary);
color: var(--claro);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: background 160ms ease;
}
#ficha-fuente::after { content: "\203A"; font-weight: 800; }
#ficha-fuente:hover { background: var(--contraste); text-decoration: none; }
#ficha-fuente[hidden] { display: none; }
#cerrar-ficha, #volver { font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 999px; }
/* Cerrar: flota en la esquina superior derecha, discreto sobre la foto. */
#cerrar-ficha {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
background: rgba(3, 23, 8, 0.42);
color: rgba(255, 255, 255, 0.94);
font-size: 13px;
line-height: 1;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-shadow: 0 3px 10px rgba(3, 23, 8, 0.22);
transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
/* La zona sensible es mayor que el círculo: en el móvil el dedo no falla. */
#cerrar-ficha::before { content: ""; position: absolute; inset: -10px; }
#cerrar-ficha:hover {
transform: scale(1.06);
background: rgba(230, 0, 100, 0.85);
color: #fff;
}
#cerrar-ficha:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Sin franjas laterales para pasar de imagen: el pase va solo (automático) y
con las barras del pie. La foto entera queda libre para el comparador. */
#par-anterior, #par-siguiente { display: none; }
#par-anterior, #par-siguiente {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
width: 3rem;
height: 100%;
border: 0;
border-radius: 0;
background-color: var(--slp-oscuro, #3B2720);
color: #fff;
font: inherit;
font-weight: 700;
opacity: 0.25;
transition: all 0.3s ease;
cursor: pointer;
}
#par-anterior { left: 0; }
#par-siguiente { right: 0; }
#par-anterior:hover, #par-siguiente:hover,
#par-anterior:focus-visible, #par-siguiente:focus-visible { opacity: 0.75; }
#par-anterior[hidden], #par-siguiente[hidden] { display: none; }
/* En pantalla angosta la ficha ocupa casi toda la pantalla: sólo queda un
margen fino alrededor. La foto va arriba, con su proporción de cámara. */
@media (max-width: 720px) {
#ficha {
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
width: auto;
max-height: none;
transform: none;
border-radius: 22px;
box-shadow: 0 18px 50px rgba(3, 55, 17, 0.35);
}
/* En pantalla angosta la caja mantiene la proporción de las fotos (3/2),
con un tope de alto para que quepan los datos: la tarjeta sigue siendo
simétrica. */
#ficha-hero {
height: auto;
aspect-ratio: 3 / 2;
max-height: 46vh;
}
.ficha-cuerpo { padding: 14px 18px calc(20px + env(safe-area-inset-bottom)); }
#ficha h2 { font-size: 24px; }
#ficha .kicker { font-size: 11px; }
#ficha p { font-size: 15px; }
}
#volver {
position: absolute;
top: 12px;
right: 12px;
z-index: 7;
border: 0;
border-radius: 999px;
padding: 10px 16px;
background: var(--primary);
color: var(--claro);
/* Sombra para que la píldora se despegue de lo que tenga debajo (el mapa
de calles, los polígonos de una región o el fondo de la sección). */
box-shadow: 0 6px 18px rgba(3, 55, 17, 0.35);
font: inherit;
font-weight: 700;
cursor: pointer;
}
#volver[hidden] { display: none; }
#estado {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
margin: 0;
color: var(--detalles);
font-size: clamp(13px, 2.4vw, 16px);
}
/* Tarjetas de las cuatro regiones: carrusel infinito en móvil y
fila de tarjetas sobre el mapa completo en escritorio. */
#carrusel {
flex-direction: column;
overflow: hidden;
background: linear-gradient(180deg, #eef6ec 0%, #e0ecdd 100%);
display: none;
}
#carrusel[hidden] { display: none !important; }
.carrusel-cabeza { padding: 0 22px 6px; text-align: center; }
.carrusel-cabeza .kicker {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--primary);
}
.carrusel-cabeza h2 {
margin: 4px 0 4px;
font-family: "Montserrat", "Segoe UI", "Liberation Sans", sans-serif;
font-size: clamp(22px, 6.4vw, 30px);
line-height: 1.1;
color: var(--contraste);
}
.carrusel-cabeza p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--detalles); }
.carrusel-ventana { position: relative; flex: 1 1 auto; min-height: 0; }
#carrusel-pista {
display: flex;
height: 100%;
touch-action: pan-y;
will-change: transform;
transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
cursor: grab;
}
#carrusel-pista.arrastrando { cursor: grabbing; }
.slide {
flex: 0 0 100%;
display: flex;
align-items: center;
justify-content: center;
}
.slide-tarjeta {
display: flex;
flex-direction: column;
width: 100%;
max-width: 460px;
height: auto;
max-height: 100%;
padding: 14px 14px 16px;
text-align: left;
font: inherit;
color: var(--contraste);
/* Sin fondo: el mapa y el nombre de la región van sobre el fondo del
carrusel, no dentro de un recuadro blanco. */
background: transparent;
border: 0;
box-shadow: none;
cursor: pointer;
}
.slide-tarjeta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.slide-mapa { display: flex; flex: 1 1 auto; min-height: 0; }
.slide-mapa svg { width: 100%; height: auto; max-height: 100%; }
.slide-pie { display: flex; flex: none; flex-direction: column; gap: 3px; padding-top: 10px; }
.slide-region { display: flex; align-items: center; gap: 9px; }
.slide-punto { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.slide-nombre {
margin: 0;
font-family: "Montserrat", "Segoe UI", "Liberation Sans", sans-serif;
font-size: clamp(22px, 6.6vw, 27px);
line-height: 1.1;
}
/* Listado de municipios con logros dentro de cada diapositiva. */
.slide-munis { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.slide-munis button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px 5px 9px;
border: 1px solid rgba(5, 90, 28, 0.25);
border-radius: 999px;
background: #fff;
color: var(--primary);
font: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.slide-munis button::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--primary);
}
.slide-munis button:hover { background: var(--claro); }
.slide-mas {
display: inline-flex;
align-items: center;
padding: 5px 11px;
border-radius: 999px;
background: rgba(5, 90, 28, 0.1);
color: var(--primary);
font-size: 12px;
font-weight: 700;
}
.carrusel-pie {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 12px 0 2px;
}
/* Fuera las bolas blancas de las flechas: el carrusel se maneja con las
barras del indicador (y con el avance automático). */
.carrusel-flecha { display: none; }
.carrusel-flecha {
flex: none;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: #fff;
color: var(--primary);
font: inherit;
font-size: 21px;
font-weight: 700;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 16px rgba(3, 55, 17, 0.2);
}
/* Indicador del carrusel: las mismas barras que los indicadores del carrusel
del sitio (alto 0.5rem, ancho 4rem, color --tertiary) y el mismo criterio
de Bootstrap para la activa: opaca, el resto al 50 %. */
#carrusel-puntos { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.carrusel-punto {
height: 0.5rem;
width: 4rem;
padding: 0;
border: 0;
border-radius: 5% / 50%;
background-color: var(--tertiary);
opacity: 0.5;
cursor: pointer;
transition: opacity 180ms ease;
}
.carrusel-punto.activo { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #carrusel-pista { transition: none; } }
/* Teléfono: manda el ancho de la pantalla. En pantallas más grandes manda la
vista de laptop/escritorio (el mapa). */
@media (max-width: 720px) {
.mapa-proyectos {
height: auto;
min-height: 0;
}
.mapa-proyectos > svg.oculto { display: none; }
#carrusel {
position: relative;
inset: auto;
border-radius: 24px;
overflow: hidden;
z-index: 1;
display: flex;
height: auto;
min-height: 480px;
padding: 14px 0;
}
/* Mapa en la mitad de arriba y catálogo como hoja inferior, con el mapa a
la vista: el mismo reparto que la referencia. */
.mapa-proyectos.en-municipio {
height: 100vh;
min-height: 560px;
}
.mapa-proyectos.en-municipio > svg { display: none; }
/* El mapa se queda con algo menos de un tercio: así la hoja de abajo tiene
altura suficiente para que la primera tarjeta se vea entera. */
.mapa-proyectos.en-municipio #calles {
top: 0;
bottom: auto;
height: 32%;
}
#lista-obras,
#ficha,
#calles,
#volver {
position: absolute;
}
#ficha {
top: 8px;
right: 8px;
bottom: 8px;
left: 8px;
width: auto;
}
}
/* Pantalla de teléfono pero baja (horizontal o ventana bajita): carrusel compacto */
@media (max-width: 720px) and (max-height: 620px) {
#carrusel { padding: 8px 0; }
.carrusel-cabeza { padding: 0 18px 2px; }
.carrusel-cabeza h2 { margin: 2px 0; font-size: 20px; }
.carrusel-cabeza p { display: none; }
.slide-pie { padding-top: 6px; gap: 2px; }
.slide-nombre { font-size: 20px; }
.carrusel-pie { padding: 6px 0 0; gap: 12px; }
.carrusel-flecha { width: 32px; height: 32px; font-size: 18px; }
}
/* El texto de estado se lee por encima del mapa de calles. */
#estado.sobre-mapa {
right: auto;
z-index: 4;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.93);
font-weight: 600;
box-shadow: 0 3px 10px rgba(3, 55, 17, 0.15);
}
/* Lista de municipios con obras (botón "Ver las obras" en móvil) */
#lista-obras {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(3, 30, 12, 0.38);
padding: 0;
}
#lista-obras[hidden] { display: none; }
.lista-caja {
display: flex;
flex-direction: column;
width: 100%;
max-width: 560px;
max-height: 82vh;
padding: 16px 16px 14px;
background: #fff;
border-radius: 24px 24px 0 0;
box-shadow: 0 -14px 40px rgba(3, 55, 17, 0.28);
}
.lista-cabeza { flex: none; padding: 0 2px 8px; }
.lista-cabeza .kicker {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--primary);
}
.lista-cabeza h2 {
margin: 4px 0 2px;
font-family: "Montserrat", "Segoe UI", "Liberation Sans", sans-serif;
font-size: 24px;
line-height: 1.1;
}
.lista-meta { margin: 0; font-size: 13px; color: var(--detalles); font-weight: 600; }
.lista-items {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
margin: 6px 0 10px;
padding: 0;
list-style: none;
-webkit-overflow-scrolling: touch;
}
.lista-items li + li { border-top: 1px solid #e8efe6; }
.lista-items button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 6px;
border: 0;
background: none;
font: inherit;
color: var(--contraste);
text-align: left;
cursor: pointer;
}
.lista-items button:active { background: #f2f7f0; }
.lista-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.lista-nombre { flex: 1 1 auto; font-weight: 600; }
.lista-cuenta { flex: none; font-weight: 700; color: var(--accent); font-size: 13px; }
.lista-ver {
flex: none;
padding: 6px 10px;
border-radius: 999px;
background: var(--primary);
color: var(--claro);
font-size: 12px;
font-weight: 700;
}
#lista-cerrar {
flex: none;
align-self: center;
padding: 10px 22px;
border: 0;
border-radius: 999px;
background: var(--primary);
color: var(--claro);
font: inherit;
font-weight: 700;
cursor: pointer;
}
#ficha-fuente[hidden] { display: none; }
/* Catálogo completo: modal que cubre el mapa y muestra una tarjeta por
logro. Sigue el mismo lenguaje visual que el catálogo /logros/. */
html.modal-proyectos-abierto { overflow: hidden; }
/* El panel lateral vive dentro del mapa: ahí la página se sigue desplazando,
para poder ver el mapa completo y el encabezado del propio panel. */
html.modal-proyectos-abierto.catalogo-lateral { overflow: visible; }
#modal-proyectos {
/* Cubre la ventana completa. Antes era absolute dentro de la caja del mapa,
que mide 930 px: si el mapa no cabía entero en pantalla, el resto del
modal quedaba bajo el pliegue y la página no se podía desplazar. */
position: fixed;
inset: 0;
/* Por encima del menú del sitio: section.menu usa z-index 1000. */
z-index: 2000;
display: flex;
align-items: stretch;
justify-content: center;
padding: 14px;
background: rgba(3, 30, 12, 0.55);
}
#modal-proyectos[hidden] { display: none; }
.modal-caja {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1180px;
min-height: 0;
overflow: hidden;
background: #fff;
border-radius: 24px;
box-shadow: 0 22px 60px rgba(3, 55, 17, 0.35);
}
.modal-cabeza {
flex: none;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 20px 22px 12px;
}
.modal-cabeza .kicker {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--primary);
}
.modal-cabeza h2 {
margin: 5px 0 4px;
font-family: "Montserrat", "Segoe UI", "Liberation Sans", sans-serif;
font-size: clamp(22px, 3.4vw, 32px);
line-height: 1.1;
color: var(--contraste);
}
.modal-meta { margin: 0; font-size: 13px; font-weight: 600; color: var(--detalles); }
.modal-lista {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
/* La rueda dentro del panel no se arrastra a la página al llegar al final. */
overscroll-behavior: contain;
/* Sin esto las filas se aplastan para caber en la caja: la lista nunca
desborda, la rueda no tiene nada que desplazar y las tarjetas encogen. */
grid-auto-rows: max-content;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
padding: 4px 22px 22px;
-webkit-overflow-scrolling: touch;
}
.proyecto-tarjeta {
display: flex;
flex-direction: column;
overflow: hidden;
/* Pulsar la tarjeta centra el mapa en ese logro. */
cursor: pointer;
background: #fff;
border: 1px solid #e8efe6;
border-radius: 18px;
box-shadow: 0 6px 18px rgba(3, 55, 17, 0.08);
transition: transform 200ms ease, box-shadow 200ms ease;
}
.proyecto-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(3, 55, 17, 0.16); }
.tarjeta-foto {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
/* Blanco, como la tarjeta: mientras la foto carga no aparece el verde del tema. */
background: #fff;
}
.tarjeta-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tarjeta-sin-foto {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: rgba(5, 90, 28, 0.4);
font-size: 34px;
}
.tarjeta-badge {
position: absolute;
left: 10px;
top: 10px;
max-width: calc(100% - 20px);
overflow: hidden;
padding: 5px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.93);
color: var(--primary);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
text-overflow: ellipsis;
}
.tarjeta-cuerpo { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
.tarjeta-titulo {
margin: 0;
font-family: "Montserrat", "Segoe UI", "Liberation Sans", sans-serif;
font-size: 17px;
line-height: 1.2;
color: var(--contraste);
}
.tarjeta-titulo a { color: inherit; text-decoration: none; }
.tarjeta-titulo i { margin-right: 6px; color: var(--primary); }
.tarjeta-resumen {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: #3d4a3f;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tarjeta-pie {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 7px;
}
/* Mismo botón y mismo efecto al pasar el cursor que el de la tarjeta del
mapa (#ficha-fuente): pastilla verde que se oscurece, con su flecha. */
.tarjeta-ver {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 999px;
background: var(--primary);
color: var(--claro);
font-size: 12px;
font-weight: 700;
text-decoration: none;
transition: background 160ms ease;
}
.tarjeta-ver::after { content: "\203A"; font-weight: 800; }
.tarjeta-ver:hover {
background: var(--contraste);
color: var(--claro);
text-decoration: none;
}
.modal-vacio { margin: 0; padding: 30px 22px; text-align: center; font-weight: 600; color: var(--detalles); }
.modal-vacio[hidden] { display: none; }
/* En el mapa de calles (municipio) el catálogo se abre como panel dentro del
mapa: 1/3 del ancho del plugin, pegado a la izquierda, para no tapar la
calle que se está viendo. La clase la pone el JavaScript al abrirlo. */
@media (min-width: 721px) {
#modal-proyectos.catalogo-lateral {
position: absolute;
inset: 0 auto 0 0;
width: var(--catalogo-ancho);
padding: 10px 0 10px 10px;
background: transparent;
/* Dentro del plugin el panel es contenido de la página: queda por encima
del mapa (2..8) pero por debajo del menú del sitio (1000), para que no
se vea salirse del plugin por arriba. */
z-index: 10;
}
#modal-proyectos.catalogo-lateral .modal-caja {
max-width: none;
border-radius: 18px;
box-shadow: 0 18px 46px rgba(3, 55, 17, 0.35);
}
#modal-proyectos.catalogo-lateral .modal-cabeza { padding: 16px 16px 10px; }
#modal-proyectos.catalogo-lateral .modal-cabeza h2 { font-size: 22px; }
/* Tarjetas en dos columnas, como el listado de la referencia. */
#modal-proyectos.catalogo-lateral .modal-lista {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
padding: 4px 16px 18px;
}
/* Un solo logro en el panel: una columna, y su tarjeta se estira para
llenar el alto disponible; la foto ocupa el hueco recortándose
(object-fit: cover), así que crece sin deformarse. */
#modal-proyectos.catalogo-lateral .modal-lista.tarjeta-unica {
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
}
#modal-proyectos.catalogo-lateral .modal-lista.tarjeta-unica > .proyecto-tarjeta {
height: 100%;
}
#modal-proyectos.catalogo-lateral .modal-lista.tarjeta-unica .tarjeta-foto {
aspect-ratio: auto;
flex: 1 1 auto;
min-height: 200px;
}
}
/* Con el catálogo abierto el mapa se separa: el panel manda a la izquierda y
el mapa ocupa el resto, sin quedarle debajo. La clase la pone el JavaScript
al abrir el catálogo. */
@media (min-width: 721px) {
.mapa-proyectos.catalogo-abierto > svg {
margin-left: var(--catalogo-ancho);
width: calc(100% - var(--catalogo-ancho));
}
.mapa-proyectos.catalogo-abierto #calles {
left: var(--catalogo-ancho);
right: 0;
width: auto;
}
}
/* Teléfono: el modal aprovecha toda la caja. */
@media (max-width: 720px) {
/* «Ver municipios» va arriba a la derecha. */
#volver {
top: 10px;
right: 10px;
}
/* En teléfono el catálogo deja un margen mínimo; el position: fixed ya
viene de la regla general. */
#modal-proyectos { padding: 8px; }
.modal-caja { border-radius: 20px; }
.modal-cabeza { padding: 16px 16px 10px; }
.modal-cabeza h2 { font-size: 22px; }
.modal-lista {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
padding: 4px 16px 18px;
}
.tarjeta-resumen { -webkit-line-clamp: 2; }
}
/* Teléfono: el catálogo del mapa de calles es una hoja inferior dentro del
plugin, con el mapa a la vista arriba (el mismo reparto que la referencia).
Este bloque va al final para imponerse a las reglas base del modal. */
@media (max-width: 720px) {
/* La página se puede desplazar hasta el plugin aunque el catálogo esté
abierto: la hoja vive dentro de él, no encima de toda la pantalla. */
html.modal-proyectos-abierto { overflow: visible; }
#modal-proyectos {
position: absolute;
inset: auto 0 0 0;
height: 68%;
padding: 0;
align-items: flex-end;
justify-content: stretch;
background: transparent;
}
#modal-proyectos .modal-caja {
width: 100%;
max-width: none;
height: 100%;
border-radius: 18px 18px 0 0;
box-shadow: 0 -14px 40px rgba(3, 55, 17, 0.3);
}
/* Asa de la hoja. */
#modal-proyectos .modal-cabeza { position: relative; padding-top: 20px; }
#modal-proyectos .modal-cabeza::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
width: 44px;
height: 4px;
margin-left: -22px;
border-radius: 999px;
background: rgba(5, 90, 28, 0.22);
}
#modal-proyectos .modal-lista {
grid-template-columns: 1fr;
padding: 4px 14px calc(16px + env(safe-area-inset-bottom));
}
/* Tarjeta más compacta: la foto en 16:9, para que quepa entera. */
#modal-proyectos .tarjeta-foto { aspect-ratio: 16 / 9; }
}
/* SCROLL-SIN-BARRA: la lista del panel se sigue desplazando con la rueda, el
dedo o el teclado, pero no dibuja la barra cuando las tarjetas caben (que es
lo habitual). Sin esto aparecía una barra fina a la derecha del panel aunque
no hubiera nada que desplazar. */
#modal-proyectos .modal-lista { scrollbar-width: none; -ms-overflow-style: none; }
#modal-proyectos .modal-lista::-webkit-scrollbar { width: 0; height: 0; }
/* SCROLL-SIN-BARRA-2: ningún contenedor del panel del catálogo dibuja barra
(la lista, la caja y el popup de la ficha). Se siguen desplazando igual con
la rueda, el dedo o el teclado, pero sin la barra a la vista. */
#modal-proyectos,
#modal-proyectos .modal-caja,
#modal-proyectos .modal-lista,
.leaflet-popup-content-wrapper,
.leaflet-popup-content { scrollbar-width: none; -ms-overflow-style: none; }
#modal-proyectos::-webkit-scrollbar,
#modal-proyectos .modal-caja::-webkit-scrollbar,
#modal-proyectos .modal-lista::-webkit-scrollbar,
.leaflet-popup-content-wrapper::-webkit-scrollbar,
.leaflet-popup-content::-webkit-scrollbar { width: 0; height: 0; }
/* ALTO-PANTALLA: el plugin tenía 930 px fijos y en pantallas de 900 px se salía
de la vista: había que desplazar la página para ver el mapa completo. Ahora su
alto es el de la ventana menos la barra del CMS y la cabecera del sitio, con un
mínimo para que no se aplaste en ventanas bajas. */
.mapa-proyectos {
height: min(930px, calc(100vh - 260px));
min-height: 520px;
}
/* TARJETAS-COMPACTAS: las tarjetas del catálogo se veían grandes para el ancho
del panel (dos por fila y con la foto muy alta). Se estrecha el mínimo de
columna (caben tres cuando hay sitio), se baja la proporción de la foto y se
aprietan rellenos y tipografía. */
#modal-proyectos .modal-lista,
#modal-proyectos.catalogo-lateral .modal-lista {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
padding: 4px 14px 16px;
}
#modal-proyectos .proyecto-tarjeta { padding: 10px 10px 12px; border-radius: 14px; }
#modal-proyectos .tarjeta-foto { aspect-ratio: 16 / 10; }
#modal-proyectos .tarjeta-categoria { font-size: 11px; padding: 4px 9px; }
#modal-proyectos .tarjeta-titulo { font-size: 15px; }
#modal-proyectos .tarjeta-datos,
#modal-proyectos .ficha-dato { font-size: 12px; }
#modal-proyectos .tarjeta-ver { padding: 7px 13px; font-size: 12px; }
/* CUATRO-COLUMNAS: el catálogo se reparte en cuatro columnas que abarcan todo el
ancho del panel. Con `auto-fit` y un mínimo de 140 px caben cuatro por fila, y
cuando hay menos tarjetas se estiran para llenar el ancho en vez de dejar la
rejilla a medias. */
#modal-proyectos .modal-lista,
#modal-proyectos.catalogo-lateral .modal-lista {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
/* REJILLA-CUATRO: el catálogo es siempre una rejilla de cuatro columnas, así que
caben cuatro tarjetas por fila sin desplazamiento dentro del panel. Cuando hay
menos de cuatro, las que hay se reparten el ancho (una ocupa las cuatro, dos
ocupan dos cada una) en vez de quedarse apiladas a la izquierda. */
#modal-proyectos .modal-lista,
#modal-proyectos.catalogo-lateral .modal-lista {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#modal-proyectos .modal-lista > .proyecto-tarjeta { grid-column: span 1; min-width: 0; }
#modal-proyectos .modal-lista:has(> .proyecto-tarjeta:nth-child(2):last-child) > .proyecto-tarjeta { grid-column: span 2; }
#modal-proyectos .modal-lista.tarjeta-unica > .proyecto-tarjeta { grid-column: span 4; }
/* FICHA-COMPACTA: la tarjeta que se abre sobre el mapa se veía muy grande al
lado de las del catálogo. Se iguala a ellas (mismo ancho que una tarjeta del
modal) y se ajustan foto, tipografía y botón en la misma proporción. */
#ficha { width: min(280px, calc(100% - 32px)); }
#ficha h2 { font-size: 17px; }
#ficha .ficha-categoria { font-size: 11px; padding: 4px 10px; }
#ficha .ficha-datos, #ficha .ficha-dato { font-size: 12px; }
#ficha .ficha-cuerpo { padding: 10px 12px 14px; }
#ficha-fuente { padding: 7px 13px; font-size: 12px; }
/* FICHA-COMPACTA-POPUP: la variante que va dentro del popup de Leaflet tiene su
propia anchura; se iguala también al tamaño de las tarjetas del catálogo. */
#ficha.en-popup { width: min(280px, 72vw); }
#ficha.en-popup .ficha-hero,
#ficha.en-popup #ficha-hero { height: auto; aspect-ratio: 3 / 2; }
/* MOVIL-UNA-COLUMNA: en pantalla pequeña la rejilla de cuatro columnas dejaba dos
tarjetas apretadas por fila. En móvil va una sola tarjeta por fila, a todo el
ancho del panel. */
@media (max-width: 720px) {
#modal-proyectos .modal-lista,
#modal-proyectos.catalogo-lateral .modal-lista,
#modal-proyectos .modal-lista.tarjeta-unica {
grid-template-columns: 1fr;
}
#modal-proyectos .modal-lista > .proyecto-tarjeta,
#modal-proyectos .modal-lista.tarjeta-unica > .proyecto-tarjeta {
grid-column: span 1;
width: 100%;
}
}
/* SIN-BORDE: el bloque del plugin mostraba un filo claro alrededor (lo pinta el
borde del contenedor del tema). Se anula y se conserva solo el redondeo. */
.seccion-mapa-proyectos {
border: 0 !important;
outline: 0 !important;
}
/* SIN-REDONDEO: el cliente no quiere las esquinas redondeadas en el bloque del
plugin (ni en el carrusel de la versión móvil): se dejan rectas, sin filo ni
recorte de esquinas. */
.seccion-mapa-proyectos { border-radius: 0 !important; }
@media (max-width: 720px) {
#carrusel { border-radius: 0 !important; }
}
/* ALTO-IGUAL-MAPA: el panel tenía 10 px de relleno arriba y abajo, así que su
tarjeta blanca quedaba 20 px más corta que el mapa. Se anula ese relleno
vertical para que la tarjeta mida exactamente lo mismo que el mapa. */
#modal-proyectos.catalogo-lateral {
padding-top: 0;
padding-bottom: 0;
}
#modal-proyectos.catalogo-lateral .modal-caja { height: 100%; }
/* SIN-FRANJA-IZQ: el panel tenía 10 px de relleno a la izquierda, que dejaban ver
una franja del fondo entre el borde de la ventana y la tarjeta. Se pega al
borde para que no asome. */
#modal-proyectos.catalogo-lateral {
padding-left: 0;
}
/* RESUMEN-RECORTADO: la tarjeta del mapa mostraba el resumen completo y, con un
texto largo, tapaba el mapa. Se recorta a unas pocas líneas —un poco más que
en las tarjetas del catálogo— y se remata con puntos suspensivos. */
#ficha-texto,
#ficha .ficha-texto {
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 6.6em;
}
/* DOS-COLUMNAS-CATALOGO: el catálogo del panel va a dos tarjetas por fila (antes
la rejilla de cuatro dejaba tres apretadas en la misma línea). Con una sola
tarjeta, esa ocupa las dos columnas; en móvil sigue siendo una por fila. */
#modal-proyectos .modal-lista,
#modal-proyectos.catalogo-lateral .modal-lista {
/* !important para que gane a cualquier rejilla anterior o de tema. */
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Reparto explícito: con varias tarjetas cada una ocupa UNA columna; solo la
tarjeta única (clase que pone el JavaScript cuando hay un solo logro) ocupa
las dos. Nada de :has, que en algunos navegadores deja el reparto raro. */
#modal-proyectos .modal-lista > .proyecto-tarjeta { grid-column: auto !important; }
#modal-proyectos .modal-lista.tarjeta-unica > .proyecto-tarjeta { grid-column: 1 / -1 !important; }
@media (max-width: 720px) {
/* !important porque la regla de escritorio también lo lleva: en móvil manda
esta y las tarjetas van de una en una. */
#modal-proyectos .modal-lista,
#modal-proyectos.catalogo-lateral .modal-lista { grid-template-columns: 1fr !important; }
#modal-proyectos .modal-lista > .proyecto-tarjeta { grid-column: auto !important; }
}
/* BOTON-VER-LEGIBLE: el botón «Ver ficha» se quedaba verde sobre verde (el tema
pisa el color del enlace). Se fija el color claro en los tres estados. */
#modal-proyectos .tarjeta-ver,
#modal-proyectos .tarjeta-ver:visited,
#modal-proyectos .tarjeta-ver:hover,
#modal-proyectos .tarjeta-ver:focus,
#modal-proyectos .tarjeta-ver:active {
color: var(--claro, #d9e8d5) !important;
text-decoration: none !important;
}
#modal-proyectos .tarjeta-ver:hover { background: var(--contraste, #033711) !important; }
/* BOTON-VOLVER-LEGIBLE: el botón «Las cuatro regiones» / «Ver municipios» se
pintaba con --primary, que es justo uno de los fondos que ofrece el plugin
(campo «fondo» de la sección). Al elegir «Primario» el botón quedaba del
mismo color que el fondo y solo se veía el texto suelto. Ahora el botón usa
el color contrario al fondo elegido: blanco con el color primario del sitio
en los fondos oscuros (los que el tema pinta con texto blanco) y --primary
con texto blanco en el fondo gris claro. */
.seccion-mapa-proyectos.slpColors-bg-v1 #volver,
.seccion-mapa-proyectos.slpColors-bg-v2 #volver,
.seccion-mapa-proyectos.slpColors-bg-v3 #volver,
.seccion-mapa-proyectos.slpColors-bg-r1 #volver,
.seccion-mapa-proyectos.slpColors-bg-oscuro #volver {
background: #ffffff;
color: var(--primary, #055A1C);
box-shadow: 0 6px 18px rgba(3, 55, 17, 0.35);
}
.seccion-mapa-proyectos.slpColors-bg-g3 #volver {
background: var(--primary, #055A1C);
color: var(--claro, #ffffff);
}
/* VOLVER-SOBRE-EL-MAPA: en el mapa de calles el botón flota sobre los mosaicos
(claros) y la píldora blanca del fondo «Primario» se perdía entre las calles.
Ahí vuelve al verde del sitio, con un filo claro y sombra para despegarlo de
los mosaicos. El selector es más específico que el de arriba, así que gana en
cualquiera de los fondos. */
.seccion-mapa-proyectos .mapa-proyectos.en-municipio #volver {
background: var(--primary, #055A1C);
color: var(--claro, #ffffff);
box-shadow: 0 6px 18px rgba(3, 55, 17, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.9);
}
/* MAS-ES-BOTON: el «+N más» del carrusel móvil pasó de texto a botón (para que
abra la lista de municipios con logros). Conserva el aspecto de chip suave y
pierde el punto verde que llevan las pastillas de municipio. */
.slide-munis button.slide-mas {
padding: 5px 11px;
border: 0;
background: rgba(5, 90, 28, 0.1);
}
.slide-munis button.slide-mas::before { content: none; }
.slide-munis button.slide-mas:hover,
.slide-munis button.slide-mas:focus-visible { background: rgba(5, 90, 28, 0.2); }
/* LISTA-SIN-CONTEO: en el teléfono la fila de la lista de municipios se queda
con el nombre y el botón «Ver mapa»; el «5 logros» de cada fila sobraba y
apretaba el renglón. En pantalla grande el conteo se sigue viendo. */
@media (max-width: 720px) {
#lista-obras .lista-cuenta { display: none; }
}
/* ETIQUETAS-SOLO-EN-GRANDE: al abrir una región se dibuja una píldora blanca por
municipio con logros (hasta 20 en la Huasteca). En el teléfono no caben sin
encimarse, así que ahí no se muestran: la navegación va en el carrusel de
regiones y en la lista del «+N más». En pantalla grande siguen saliendo, ya
sin encimes (las que no encuentran hueco no se dibujan). */
@media (max-width: 720px) {
.mapa-proyectos .mun-nombre,
.mapa-proyectos .mun-fondo,
.mapa-proyectos .mun-guia { display: none !important; }
}