/* ==========================================================================
GUATAPÉ · sitio de destino
Paleta tomada de turismoguatape.com. Fondo blanco, como el suyo.
LA IDEA QUE ORDENA EL DISEÑO
En Guatapé el zócalo no es un adorno: es el friso pintado en relieve al pie
de cada fachada, y cada casa cuenta ahí de qué vive la familia. Aquí el
zócalo hace lo mismo — es la estructura del sitio, no su decoración. Cada
sección lleva su propio motivo, y el motivo dice de qué habla la sección:
ondas donde está el agua, casas donde se duerme, soles en los imperdibles,
escalones en la historia del embalse. Se pintan al entrar en pantalla, de
izquierda a derecha, que es como los pinta un zoquero.
========================================================================== */
:root{
/* ======================================================================
PALETA OFICIAL — «Guía básica Marca Guatapé», 2026-09-08.
Los HEX se MIDIERON del PDF, no se convirtieron del CMYK: una conversión
sin perfil de color sale más saturada que el original.
⚠️ Ninguno de los cinco colores oficiales pasa AA como texto sobre
blanco. El mejor, el bermellón, se queda en 4,21:1. Son colores de
fondo, franja y motivo; para texto está la variante -hondo de cada uno.
Tabla completa y medida en brand/paleta.md.
====================================================================== */
/* --- Los cinco de la guía, tal cual --- */
--celeste:#9BD4DE; /* C49 M0 Y16 K0 — 1,63:1 sobre blanco */
--bermellon:#E6392C; /* C0 M94 Y91 K0 — 4,21:1 */
--amarillo:#F7E05B; /* C5 M8 Y80 K0 — 1,33:1 */
--azul-marca:#3D97CD; /* C81 M33 Y5 K0 — 3,23:1 */
--verde:#AFC861; /* C45 M5 Y84 K0 — 1,87:1 */
--petroleo:#083D43; /* fondo de la guía — blanco encima 11,94:1 */
/* --- Derivados que SÍ son texto (luminosidad HLS bajada, tono intacto) --- */
--celeste-hondo:#2F8190; /* 4,50:1 */
--bermellon-hondo:#D7271A; /* 5,01:1 — el de los botones, con margen */
--amarillo-hondo:#897607; /* 4,51:1 */
--azul-hondo:#2D7DAE; /* 4,51:1 */
--verde-hondo:#6A7E2C; /* 4,53:1 */
--blanco:#FFFFFF;
--crudo:#F6F2E9;
--crudo-2:#EDE7DA;
--texto:#1D4E55;
--titular:#0B3238;
/* ⚠️ La escala de texto pasó de opacidades a SÓLIDOS medidos (2026-09-08).
Una opacidad se compone contra el fondo que tenga debajo, así que el
mismo token daba 4,54:1 sobre blanco y 4,35:1 sobre crudo — pasaba AA en
una sección y lo fallaba en la de al lado, sin que nada lo dijera. Y el
tenue (α .46) daba 2,39:1 en todas partes.
Estos dos se midieron contra el fondo MÁS CLARO que los lleva. */
--texto-70:#2C626D; /* 6,83 blanco · 6,42 crudo · 5,74 crudo-2 */
--texto-45:#32717E; /* 5,53 blanco · 5,20 crudo · 4,64 crudo-2 */
--linea:rgba(32,72,80,.14);
/* --- Turquesa operativo: el del equipo local. Se conserva porque el sitio
entero está medido sobre él y porque es el color con el que el municipio
ya se identifica en su propio sitio. El celeste de la guía es demasiado
claro (1,63:1) para hacer este trabajo. --- */
--turquesa:#083D43;
--turquesa-hondo:#083D43;
--turquesa-tarjeta:#083D43;
--turq-txt:#2F8190;
--azul:#2D7DAE;
--hondo:#083D43; /* agua profunda — alineado al petróleo oficial */
/* --coral queda como alias del bermellón oficial: lo usan ~40 reglas y
renombrarlas no aporta nada. El valor sí es ahora el de la guía. */
--coral:#E6392C;
--coral-texto:#D7271A;
--bl-72:#FFFFFF; /* era blanco al 75%: una opacidad no es una escala de texto */
/* ⚠️ El blanco tenue se mide contra el fondo oscuro MÁS CLARO que lo lleva
—turquesa-tarjeta #083D43—, no contra el petróleo. Con α .48 daba 3,99:1
sobre petróleo y 2,9:1 sobre el turquesa. α .78 pasa AA en los dos. */
--bl-45:#9BD4DE; /* celeste oficial: 7,31:1 sobre petróleo */
--bl-18:rgba(255,255,255,.2);
/* Sobre el amarillo OFICIAL, medido: titular 11,73:1 · petróleo 8,96:1 ·
azul 6,26:1. Los tres mejoran respecto al amarillo anterior. */
--sobre-am:#0B3238;
--sobre-am-70:rgba(10,39,47,.72);
--sobre-am-45:rgba(10,39,47,.5);
--display:'Bricolage Grotesque','Helvetica Neue',sans-serif;
--cuerpo:'Literata',Georgia,serif;
--dato:'IBM Plex Mono',ui-monospace,monospace;
--marco:clamp(1.15rem,4vw,4.5rem);
--ancho:1320px;
--t:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
/* ══════════════════════════════════════════════════════════════════════
COLOR-SCHEME — por qué esta línea es obligatoria
══════════════════════════════════════════════════════════════════════
Chrome en Android aplica su **modo oscuro automático** a toda página que
NO declara `color-scheme`: recalcula la paleta por su cuenta, oscureciendo
los campos y desaturando los colores. El resultado es que el bermellón, el
amarillo y el celeste de la guía de la Alcaldía salen apagados y cambiados
— reportado desde un teléfono real el 2026-09-24.
Declarar `light` no fuerza nada al usuario: dice que esta página ya está
diseñada para fondo claro y que no hace falta que el navegador la
reinterprete. Los colores de un manual de marca municipal no son una
sugerencia que el navegador pueda recalcular.
Va en `:root` y además como `` en el ``:
el meta lo lee el navegador ANTES del CSS y evita el parpadeo. */
:root{color-scheme:light}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blanco);color:var(--texto);font-family:var(--cuerpo);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:var(--turq-txt)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.035em;margin:0;color:var(--titular);text-wrap:balance}
h1{font-size:clamp(2.9rem,1.2rem + 7vw,8rem)}
h2{font-size:clamp(2.3rem,1.3rem + 3.9vw,5.2rem)}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.6rem);font-weight:600;letter-spacing:-.015em;line-height:1.1}
.kicker{font-family:var(--dato);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--turq-txt);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7em}
.kicker::before{content:'';width:2em;height:2px;background:currentColor;flex-shrink:0}
.prosa{max-width:60ch;color:var(--texto-70)}
.prosa p{margin:0 0 1.05em}
.prosa p:last-child{margin-bottom:0}
.prosa b{color:var(--texto);font-weight:600}
.prosa--corta{max-width:52ch}
.env{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--marco)}
.seccion{padding-block:clamp(3.5rem,7vw,7rem);position:relative;scroll-margin-top:5.5rem}
.seccion--crudo{background:var(--crudo)}
.oscura{background:var(--hondo);color:var(--blanco)}
.oscura h1,.oscura h2,.oscura h3{color:var(--blanco)}
.oscura .prosa{color:var(--bl-72)}
.oscura .prosa b{color:var(--blanco)}
.oscura .kicker{color:var(--amarillo)}
/* ==========================================================================
EL ZÓCALO — el sistema
Un friso por sección. El motivo no decora: nombra de qué habla la sección.
Se pinta de izquierda a derecha al entrar, como lo pinta un zoquero.
⚠️ El recorte va en el ::after, nunca en el propio .friso. Un elemento con
clip-path a cero no intersecta, así que su IntersectionObserver no dispara
nunca y el friso se queda sin pintar para siempre.
========================================================================== */
.friso{height:clamp(18px,2.6vw,30px);width:100%;position:relative;overflow:hidden}
/* ⚠⚠ LAS «LÍNEAS» DETRÁS DE LOS ZÓCALOS (corregido 2026-09-24).
El motivo de la cenefa mide 24 px de alto y la banda NUNCA medía eso:
`clamp(18px,2.6vw,30px)` da 18 px en móvil y hasta 30 en escritorio.
· En escritorio sobraban hasta 6 px, y `background-repeat` los llenaba
con la PARTE DE ARRIBA DE LA FILA SIGUIENTE: las puntas de los rombos
y el centro amarillo, que se leen como una línea de trazos sobre la
banda. Eso es lo que el CEO reportó.
· En móvil faltaban 6 px y el dibujo salía cortado por abajo.
Se arregla haciendo que el motivo SE AJUSTE a la banda —`auto 100%`
conserva su proporción y llena el alto exacto— y prohibiendo la repetición
vertical con `repeat-x`. Así la banda mide lo que quiera y el dibujo
siempre entra entero, una sola fila.
⚠ `--f-size` de cada modificador ya no manda el alto: si se vuelve a poner
un valor fijo ahí, el problema regresa. */
.friso::after{content:'';position:absolute;inset:0;
background-color:var(--f-fondo,var(--turquesa));
background-image:var(--f-img,none);
background-size:auto 100%;
background-repeat:repeat-x;
background-position:center;
clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--t)}
.friso[data-visible]::after{clip-path:inset(0 0 0 0)}
/* ==========================================================================
LOS MOTIVOS SON LOS DE LA MARCA — «Guía básica Marca Guatapé», 2026-09-08.
Hasta esa fecha los seis frisos eran inventados: ondas, tejados, soles,
escalones y dientes. La guía trae la cenefa real, y ampliada a 600 dpi se
ve exactamente qué es: UN ROMBO DOBLE ALTERNANDO CON UNA FLOR DE CUATRO
PÉTALOS, a ritmo constante. Eso es lo que se dibuja aquí.
Va en SVG incrustado y no en gradientes porque la flor de cuatro pétalos
no se puede hacer con gradientes sin que parezca otra cosa — y la fidelidad
al motivo es justamente el encargo.
Los cuatro iconos a color (velero, oveja, flor, rombo) viven en
site/assets/img/zocalos/*.svg y se usan GRANDES, como marcador de sección:
a 24px de alto un velero no se lee. Ver brand/motivos.md.
========================================================================== */
/* Cenefa base — turquesa con los motivos en bermellón y amarillo. */
.friso--cenefa{--f-fondo:var(--turquesa);
--f-img:url("data:image/svg+xml,");
--f-size:48px 24px}
/* Sobre el agua honda: la cenefa en celeste, que sobre petróleo da 7,31:1. */
.friso--velero{--f-fondo:var(--hondo);
--f-img:url("data:image/svg+xml,");
--f-size:48px 24px}
/* El campo: verde de la guía sobre crudo. */
.friso--oveja{--f-fondo:var(--verde);
--f-img:url("data:image/svg+xml,");
--f-size:48px 24px}
/* La memoria: bermellón pleno, que es el color de los rombos de la guía. */
.friso--rombo{--f-fondo:var(--bermellon);
--f-img:url("data:image/svg+xml,");
--f-size:48px 24px}
/* Los imperdibles: sobre papel, para que la cenefa se lea como zócalo pintado. */
.friso--flor{--f-fondo:var(--crudo);
--f-img:url("data:image/svg+xml,");
--f-size:48px 24px}
/* El Contador: amarillo pleno, el color que la marca ya le tenía reservado. */
.friso--diente{--f-fondo:var(--amarillo);
--f-img:url("data:image/svg+xml,");
--f-size:48px 24px}
/* Alias de los nombres viejos, para que el HTML antiguo no se quede sin friso. */
.friso--sol{--f-fondo:var(--crudo);
--f-img:url("data:image/svg+xml,");
--f-size:48px 24px}
.friso--onda{--f-fondo:var(--hondo);
--f-img:url("data:image/svg+xml,");
--f-size:48px 24px}
.friso--casa{--f-fondo:var(--verde);
--f-img:url("data:image/svg+xml,");
--f-size:48px 24px}
.friso--escalon{--f-fondo:var(--bermellon);
--f-img:url("data:image/svg+xml,");
--f-size:48px 24px}
.pintada::after{content:'';position:absolute;left:-.04em;right:-.04em;bottom:-.11em;
height:.13em;border-radius:1px;
background:
repeating-linear-gradient(90deg, var(--p-a,var(--amarillo)) 0 .28em, var(--p-b,var(--coral)) .28em .56em);
clip-path:inset(0 100% 0 0);
transition:clip-path 1.15s cubic-bezier(.32,.72,.36,1)}
.pintada[data-visible]::after{clip-path:inset(0 0 0 0)}
.oscura .pintada{--p-a:var(--amarillo);--p-b:var(--turquesa)}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--dato);font-size:.84rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:.95em 1.9em;border:2px solid transparent;border-radius:4px;text-decoration:none;cursor:pointer;transition:background .22s var(--t),color .22s var(--t),border-color .22s var(--t),transform .22s var(--t)}
/* El rojo de la guía. El bermellón puro da 4,21:1 con blanco y un botón
lleva texto pequeño, así que va la variante honda: 5,01:1. */
.boton--coral{background:var(--bermellon-hondo);color:var(--blanco);border-color:var(--bermellon-hondo)}
.boton--coral:hover{background:var(--petroleo);border-color:var(--petroleo);transform:translateY(-2px)}
.boton--linea{border-color:var(--linea);color:var(--texto)}
.boton--linea:hover{border-color:var(--bermellon-hondo);color:var(--bermellon-hondo)}
.oscura .boton--linea,.hero .boton--linea{border-color:var(--bl-18);color:var(--blanco)}
.oscura .boton--linea:hover,.hero .boton--linea:hover{border-color:var(--blanco);background:rgba(255,255,255,.1)}
:where(a,button,input,summary,[tabindex]):focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.oscura :where(a,button,input):focus-visible{outline-color:var(--amarillo)}
/* --- Barra ---------------------------------------------------------------- */
.barra{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.65rem var(--marco)}
.marca{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0}
.marca img{height:clamp(40px,4.4vw,54px);width:auto}
.marca-bajada{font-family:var(--dato);font-size:.62rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--turq-txt);max-width:7.5em;line-height:1.35}
.barra nav{display:flex;gap:clamp(.85rem,1.8vw,1.7rem)}
.barra nav a{font-family:var(--dato);font-size:.77rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--texto-70);white-space:nowrap;position:relative;padding-block:.25em}
.barra nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--t)}
.barra nav a:hover{color:var(--turq-txt)}
.barra nav a:hover::after{transform:scaleX(1)}
@media (max-width:1080px){.barra nav{display:none}.marca-bajada{display:none}}
/* ══════════════════════════════════════════════════════════════════════
MENÚ DE MÓVIL
══════════════════════════════════════════════════════════════════════
Hasta el 2026-09-24 el nav se ocultaba por debajo de 1080 px y NO se
ponía nada en su lugar: en un teléfono no había forma de moverse por el
sitio. En un sitio de turismo municipal, donde el móvil es el aparato
con el que se consulta, eso es un fallo de primer orden.
No es el panel oscuro a pantalla completa de manual. Un zócalo es una
BANDA, y una pila de bandas que comparten filete es lo que se ve al
doblar una esquina en Guatapé: campo crudo, filete de 1 px entre
entradas, y la página actual marcada con un filete bermellón a la
izquierda — el mismo recurso del detalle del calendario.
El botón está SIEMPRE en el HTML, no lo crea el JS: un menú que depende
del JavaScript desaparece si algo falla y no lo ve un buscador. */
.menu-btn{display:none;align-items:center;gap:.5rem;background:none;border:0;
padding:.5rem;cursor:pointer;color:var(--titular);
font-family:var(--dato);font-size:.7rem;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;min-height:44px}
.menu-icono{display:block;width:22px}
.menu-icono i{display:block;height:2.5px;background:currentColor;margin:4px 0;
transition:transform .25s var(--t),opacity .2s var(--t)}
.menu-btn[aria-expanded="true"] .menu-icono i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icono i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-icono i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu-btn:focus-visible{outline:3px solid var(--bermellon-hondo);outline-offset:2px}
.menu-movil{display:none}
.menu-movil[hidden]{display:none}
@media (max-width:1080px){
.menu-btn{display:inline-flex}
.menu-movil:not([hidden]){display:block;
position:fixed;left:0;right:0;top:var(--barra-alto,58px);bottom:0;z-index:59;
background:var(--crudo);overflow-y:auto;overscroll-behavior:contain;
border-top:1px solid var(--linea)}
.menu-movil nav{display:block}
.menu-movil nav a{
display:flex;align-items:center;min-height:56px;
padding:.9rem var(--marco) .9rem calc(var(--marco) + .5rem);
border-bottom:1px solid var(--linea);
border-left:5px solid transparent;
font-family:var(--dato);font-size:.82rem;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;
color:var(--titular);text-decoration:none;background:var(--crudo)}
.menu-movil nav a[aria-current="page"]{
border-left-color:var(--bermellon-hondo);background:var(--crudo-2)}
.menu-movil nav a:active{background:var(--crudo-2)}
.menu-movil nav a:focus-visible{outline:3px solid var(--bermellon-hondo);
outline-offset:-3px}
.menu-lang{color:var(--turq-txt) !important}
.menu-cta{display:flex;margin:1.4rem var(--marco) 2.4rem;justify-content:center}
/* Mientras el menú está abierto, la página de detrás no se mueve. */
body:has(.menu-movil:not([hidden])){overflow:hidden}
}
/* ⚠ Esta regla estaba ANIDADA dentro del @media de 1080 px. Un navegador que
no parsee media queries anidadas salta, por recuperación de errores del
estándar, hasta la llave de cierre — y se habría llevado por delante TODO
el bloque del menú, dejándolo invisible sin dar ningún error. Va suelta.
El CTA de la barra cabe al lado del botón hasta 520 px; por debajo, el
menú ya lo lleva dentro y repetirlo roba media barra. */
@media (max-width:520px){ .barra-cta{display:none} }
@media (prefers-reduced-motion:reduce){ .menu-icono i{transition:none} }
/* ══════════════════════════════════════════════════════════════════════
LA BARRA, Y POR QUÉ ESTA REGLA ESTÁ ESCRITA AL REVÉS
══════════════════════════════════════════════════════════════════════
Esto ha desbordado DOS veces, y las dos por la misma razón: se parcheaba
el rango concreto que fallaba y quedaba un borde sin cubrir.
· 2026-09-09 — se salía entre 1341 y 1381 px (ahí cae 1366). Se tapó
con un `max-width:1340px` → `max-width:1400px`.
· 2026-09-23 — al añadir el conmutador de idioma el nav pasó a NUEVE
enlaces y volvió a salirse, ahora entre 1405 y 1485 px. Ahí cae
**1440**, de las resoluciones de portátil más comunes que hay.
Medido a tamaño completo: marca 174 + nav 1035 + botón 176, más huecos y
márgenes ≈ **1525 px**. Por debajo de eso la barra NO cabe.
Por eso la regla va invertida: **comprimido es el estado normal** por
encima de 1080, y el tamaño completo solo entra donde está medido que
cabe, con margen. Si mañana se añade un décimo enlace, el peor caso es
una barra comprimida —nunca un botón fuera de pantalla—. */
@media (min-width:1081px){
.barra nav{gap:clamp(.65rem,1.2vw,1.2rem)}
.barra nav a{font-size:.73rem;letter-spacing:.05em}
.marca-bajada{display:none}
}
@media (min-width:1560px){
.barra nav{gap:clamp(.85rem,1.8vw,1.7rem)}
.barra nav a{font-size:.77rem;letter-spacing:.07em}
.marca-bajada{display:block}
}
/* Datos duros de un imperdible (Monasterio): fuera del párrafo, como placas. */
.imp-datos{margin:1rem 0 0;display:grid;gap:.5rem;font-size:var(--t-pie,.875rem);line-height:1.45}
.imp-datos div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:.6rem;padding:.55rem 0;border-top:1px solid var(--linea)}
.imp-datos dt{font-family:var(--display);font-weight:700;color:var(--tinta);margin:0}
.imp-datos dd{margin:0;color:var(--texto-70)}
.imp-web{margin:.75rem 0 0;font-size:var(--t-pie,.875rem)}
/* ⚠ `--turq-txt` (#2F8190) está medido contra BLANCO: da 4,50:1 justo. Esta
ficha va sobre crudo, donde cae a 4,03 y falla AA. Es el caso que el
README ya documenta —los colores de texto de la guía pierden un escalón
sobre crudo— y volvió a aparecer aquí. `--texto-70` es un sólido medido
que pasa sobre los tres fondos del sitio: 6,11 sobre crudo, 5,54 sobre
crudo-2 y 6,83 sobre blanco. */
.imp-web a{color:var(--texto-70)}
@media (max-width:480px){.imp-datos div{grid-template-columns:1fr;gap:.15rem}}
/* --- Directorio en campaña (2026-09-16) ------------------------------------
El directorio se publica vacío mientras la Alcaldía actualiza el registro:
una declaración con sello y un solo botón. Mismo bloque en /directorio/ y
en la home (ahí sobre petróleo hondo). */
.dir-campana{max-width:64ch}
.dir-campana-sello{font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.02em;color:var(--tinta);margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:3px solid var(--bermellon)}
.dir-campana h2{font-size:clamp(1.8rem,1.1rem + 2.4vw,3.2rem);max-width:18ch;margin:0}
.dir-campana-txt{margin:1.1rem 0 0;font-size:var(--t-entradilla,1.25rem);line-height:1.5;color:var(--texto-70)}
.dir-campana-cta{margin:1.8rem 0 0}
.dir-campana-pie{margin:1.4rem 0 0;font-size:var(--t-pie,.875rem);color:var(--texto-45)}
.dir-campana--oscura{color:var(--blanco)}
.dir-campana--oscura h2,.dir-campana--oscura .dir-campana-txt,.dir-campana--oscura .dir-campana-pie{color:var(--blanco)}
.dir-campana--oscura .dir-campana-sello{color:var(--amarillo);border-color:var(--amarillo)}
/* --- Galería (la calle de fotografías, 2026-09-16) -------------------------
Usa el componente «calle» de formas.css; aquí solo va lo propio de la foto:
marco de moldura como el zócalo, esquinas vivas, sin sombra, y el pie fuera
del marco. Sangra al borde derecho: el panel siguiente asoma y dice «hay más». */
.galeria{padding-block:clamp(2.5rem,5vw,4.5rem)}
.galeria .entradilla{margin-bottom:1.5rem}
.galeria .calle{margin:0}
.galeria .calle-tira{padding-inline:var(--marco) 2.5rem;gap:1.25rem}
.galeria .calle-pista{margin-inline:var(--marco)}
.calle--foto .calle-item{flex-basis:clamp(300px,46vw,660px)}
/* La moldura doble del zócalo, pero desde fuera: una sombra `inset` no se
pinta encima de una imagen, así que la línea interior es el borde y la
exterior un outline separado 2 px (el hueco enseña el fondo de la sección). */
/* 2026-09-20: la Alcaldía pidió quitar «los bordes cuadrados de doble línea
de las imágenes». La foto va limpia; la leyenda sigue debajo. */
.foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
background:var(--mortero)}
.foto{margin:0;padding:0}
.foto figcaption{margin-top:.7rem;font-size:var(--t-pie,.875rem);color:var(--texto-70);line-height:1.45}
@media (max-width:640px){.calle--foto .calle-item{flex-basis:min(78vw,420px)}}
/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;min-height:min(94vh,880px);display:flex;align-items:flex-end;overflow:hidden}
.hero-fondo{position:absolute;inset:0}
.hero-fondo img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* El agua del embalse es clara y el texto de apoyo cae justo encima. */
.hero-fondo::after{content:'';position:absolute;inset:0;background:
linear-gradient(to top, rgba(3,47,65,.95) 0%, rgba(3,47,65,.82) 26%,
rgba(3,47,65,.5) 52%, rgba(3,47,65,.14) 78%, rgba(3,47,65,.45) 100%),
linear-gradient(100deg, rgba(3,47,65,.6) 0%, rgba(3,47,65,.2) 48%, transparent 76%)}
.hero-in{position:relative;width:100%;padding-block:clamp(2.5rem,5vw,4rem)}
/* El logo del destino en el primer viewport, a la derecha del texto
(decisión del CEO, 2026-09-16, con maqueta). Medido en la maqueta: el logo
ocupa el 35 % del ancho del viewport y va centrado en vertical contra el
bloque de texto, con el titular en DOS líneas. Por eso el ancho del logo es
una fracción del viewport (no de la columna) y el titular cede antes. */
.hero-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem clamp(1.5rem,4vw,4rem);align-items:center}
.hero-txt{min-width:0}
.hero-logo{width:clamp(240px,33vw,600px)}
.hero-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 36px rgba(3,47,65,.45))}
@media (max-width:860px){
.hero-cuerpo{grid-template-columns:1fr;gap:1rem}
.hero-logo{width:min(56%,260px)}
}
.hero h1{color:var(--blanco);max-width:18ch;font-size:clamp(2.4rem,.6rem + 4.4vw,5.6rem)}
.hero h1 em{font-style:normal;color:var(--amarillo)}
.hero-sub{font-family:var(--dato);font-size:.78rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--bl-45);margin:0 0 1.4rem}
.hero-lema{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.15;font-size:clamp(1.15rem,.85rem + 1.3vw,1.9rem);color:var(--bl-72);margin:.9rem 0 0;max-width:24ch}
.hero-bajo{margin-top:1.6rem;max-width:52ch;color:var(--bl-72);font-size:1.06rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.hero-datos{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--bl-18)}
.hero-dato b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);color:var(--amarillo);line-height:1}
.hero-dato span{display:block;font-family:var(--dato);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bl-45);margin-top:.5em}
/* La entrada del hero: el titular sube por líneas, como se descubre un zócalo
recién pintado. Una sola vez, al cargar. */
@media (prefers-reduced-motion:no-preference){
.hero-sub,.hero h1,.hero-lema,.hero-bajo,.hero-cta,.hero-datos{animation:sube .95s var(--t) backwards}
.hero-lema{animation-delay:.14s}
.hero h1{animation-delay:.08s}
.hero-bajo{animation-delay:.2s}
.hero-cta{animation-delay:.28s}
.hero-datos{animation-delay:.36s}
}
@keyframes sube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* --- Encabezado de sección con contador ---------------------------------- */
.cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cabeza-cifra{font-family:var(--display);font-weight:800;font-size:clamp(3rem,2rem + 5vw,7rem);
line-height:.8;letter-spacing:-.05em;color:var(--crudo-2);flex-shrink:0}
.oscura .cabeza-cifra{color:rgba(255,255,255,.16)}
.seccion--am .cabeza-cifra{color:rgba(10,39,47,.16)}
/* --- Carrusel de imperdibles --------------------------------------------- */
.carrusel-caja{width:100%;overflow:hidden}
.carrusel{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem var(--marco) 1.5rem;scrollbar-width:thin;cursor:grab}
.carrusel[data-arrastrando]{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carrusel[data-arrastrando] *{pointer-events:none}
.carrusel-pie{padding-inline:var(--marco)}
.carrusel::-webkit-scrollbar{height:6px}
.carrusel::-webkit-scrollbar-thumb{background:var(--crudo-2);border-radius:99px}
.atractivo{flex:0 0 clamp(15rem,26vw,20rem);scroll-snap-align:start;position:relative;border-radius:8px;overflow:hidden;background:var(--crudo-2);aspect-ratio:4/5}
.atractivo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--t)}
.atractivo:hover img{transform:scale(1.06)}
.atractivo::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,39,47,.92) 10%,rgba(10,39,47,.18) 58%,transparent)}
.atractivo-txt{position:absolute;inset:auto 0 0 0;padding:1.4rem 1.2rem 1.15rem;z-index:2;color:var(--blanco)}
.atractivo-txt b{display:block;font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.08;letter-spacing:-.03em}
.atractivo-txt span{display:block;margin-top:.45em;font-size:.85rem;color:var(--bl-72);line-height:1.45}
.atractivo-min{position:absolute;top:.9rem;left:.9rem;z-index:2;background:var(--amarillo);color:var(--titular);font-family:var(--dato);font-size:.68rem;font-weight:600;letter-spacing:.06em;padding:.32em .6em;border-radius:3px}
.carrusel-pie{display:flex;align-items:center;gap:1rem;font-family:var(--dato);font-size:.74rem;color:var(--texto-45);letter-spacing:.06em}
.oscura .carrusel-pie{color:var(--bl-45)}
/* ==========================================================================
EL AGUA
Ocho tarjetas en cuadrícula. Antes era una marquesina en movimiento continuo:
se veía bien y no se podía usar — para llegar a la octava había que esperar a
que pasara. El movimiento se quedó donde no estorba: la entrada escalonada y
el hover.
========================================================================== */
.carrusel--agua{margin-top:2.2rem}
.carrusel--agua::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28)}
.chapuzon{flex:0 0 clamp(13rem,22vw,17rem);scroll-snap-align:start;position:relative;border-radius:8px;overflow:hidden;aspect-ratio:3/4;
background:var(--hondo);border:2px solid rgba(255,255,255,.14);
transition:border-color .3s var(--t),transform .3s var(--t)}
.chapuzon:hover{border-color:var(--amarillo);transform:translateY(-5px)}
.chapuzon img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:transform .8s var(--t),opacity .3s var(--t)}
.chapuzon:hover img{transform:scale(1.07);opacity:1}
.chapuzon-txt{position:absolute;inset:auto 0 0 0;padding:1.6rem 1.15rem 1.1rem;
background:linear-gradient(to top,rgba(3,47,65,.97) 30%,transparent);color:var(--blanco)}
.chapuzon-txt b{display:block;font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.03em;line-height:1}
.chapuzon-txt span{display:block;margin-top:.5em;font-size:.82rem;color:var(--bl-72);line-height:1.4}
.chapuzon-min{position:absolute;top:.8rem;right:.8rem;font-family:var(--dato);font-size:.66rem;font-weight:600;
letter-spacing:.06em;color:var(--hondo);background:var(--amarillo);padding:.28em .55em;border-radius:3px}
.rio-pie{margin-top:1.5rem;font-family:var(--dato);font-size:.74rem;letter-spacing:.06em;color:var(--bl-45)}
/* --- Dónde dormir --------------------------------------------------------- */
.camas{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.7rem}
@media (max-width:1080px){.camas{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.camas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.camas{grid-template-columns:1fr}}
.cama[hidden]{display:none}
.camas-vacio{margin-top:1.5rem;font-family:var(--dato);font-size:.8rem;color:var(--texto-45)}
.cama{position:relative;display:flex;flex-direction:column;background:var(--blanco);
border:2px solid var(--linea);border-radius:8px;overflow:hidden;
transition:border-color .25s var(--t),transform .25s var(--t),box-shadow .25s var(--t)}
.cama:hover{border-color:var(--coral);transform:translateY(-5px);box-shadow:0 16px 34px -22px rgba(10,39,47,.6)}
.cama-foto{aspect-ratio:4/5;overflow:hidden;background:var(--crudo-2)}
.cama-foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--t)}
.cama:hover .cama-foto img{transform:scale(1.05)}
.cama-txt{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.cama-txt h3{font-size:1.3rem;font-weight:800;letter-spacing:-.03em}
.cama-txt p{margin:0;font-size:.87rem;color:var(--texto-70);line-height:1.5}
.cama-etq{align-self:flex-start;font-family:var(--dato);font-size:.64rem;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--blanco);background:var(--turquesa-tarjeta);padding:.32em .62em;border-radius:3px}
/* Los filtros del contador viven sobre amarillo; estos, sobre blanco. */
.filtros--cama .filtro{border-color:var(--linea);color:var(--texto-70)}
.filtros--cama .filtro:hover{border-color:var(--turq-txt);color:var(--turq-txt)}
.filtros--cama .filtro[aria-pressed="true"]{background:var(--turquesa-tarjeta);color:var(--blanco);border-color:var(--turquesa-tarjeta)}
/* ==========================================================================
LA HISTORIA BAJO EL AGUA
========================================================================== */
.historia{position:relative;color:var(--blanco);overflow:hidden;
background:#083D43}
.historia h2,.historia h3{color:var(--blanco)}
.historia .kicker{color:var(--amarillo)}
.historia .cabeza-cifra{color:rgba(255,255,255,.18)}
.agua{position:absolute;inset:auto 0 0 0;height:var(--nivel,0%);background:linear-gradient(to bottom,rgba(4,151,177,.62),rgba(3,47,65,.9));border-top:2px solid rgba(255,255,255,.45);transition:height 1s var(--t);pointer-events:none;z-index:1}
.agua::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 14px,transparent 14px 28px)}
.historia-in{position:relative;z-index:2}
.linea{display:flex;gap:0;margin-top:2.5rem;border-top:2px solid rgba(255,255,255,.28);
background:rgba(3,47,65,.55);border-radius:6px 6px 0 0;
overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.linea::-webkit-scrollbar{display:none}
.hito{flex:1 0 auto;min-width:7.5rem;scroll-snap-align:start;padding:1.1rem 1rem .9rem;
border-right:1px solid rgba(255,255,255,.18);text-align:left;position:relative;
display:block;text-decoration:none;color:inherit;cursor:pointer;
transition:background .25s var(--t)}
.hito:last-child{border-right:0}
.hito:hover{background:rgba(255,255,255,.08)}
.hito[aria-selected="true"]{background:rgba(250,219,11,.16)}
.hito[aria-selected="true"]::before{content:'';position:absolute;top:-2px;left:0;right:0;height:4px;background:var(--amarillo)}
.hito b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,1rem + .8vw,1.75rem);letter-spacing:-.02em;color:var(--blanco)}
.hito span{display:block;margin-top:.3em;font-family:var(--dato);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bl-45)}
.hito[aria-selected="true"] span{color:var(--amarillo)}
/* El relato: el texto a la izquierda, las cifras y lo que queda hoy a la
derecha. «Qué queda hoy» es el campo que convierte historia en plan — sin él
la línea de tiempo es un dato de museo. */
.relatos{margin-top:2rem;min-height:22rem}
.relato{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
gap:clamp(1.4rem,3.5vw,3.5rem);align-items:start}
.relato[hidden]{display:none}
/* Sin JS los ocho se leen seguidos: hace falta separarlos y decir de qué época
es cada uno, que con pestañas lo dice la pestaña. */
.relato + .relato{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid rgba(255,255,255,.2)}
.relato-epoca{display:block;font-family:var(--dato);font-size:.72rem;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--amarillo);margin-bottom:.6rem}
.relatos[data-pestanas] .relato-epoca{display:none}
.relatos[data-pestanas] .relato + .relato{margin-top:0;padding-top:0;border-top:0}
.relato-txt{max-width:58ch;background:rgba(3,47,65,.62);border-radius:8px;
padding:clamp(1.1rem,2.2vw,1.8rem) clamp(1.2rem,2.4vw,2rem)}
.relato h3{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.5rem);margin-bottom:.75rem;
font-weight:800;letter-spacing:-.035em;line-height:1}
.relato p{margin:0 0 .9em;color:var(--bl-72);font-size:1.02rem}
.nivel-etq{display:inline-flex;align-items:baseline;gap:.5em;margin-top:.6rem;
font-family:var(--dato);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--amarillo);background:rgba(3,47,65,.5);padding:.5em .85em;border-radius:4px;
border:1px solid rgba(250,219,11,.4)}
.relato-lado{display:flex;flex-direction:column;gap:1.1rem}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.7rem}
.dato{background:rgba(3,47,65,.42);border:1px solid rgba(255,255,255,.16);
border-radius:6px;padding:.85rem .95rem}
.dato b{display:block;font-family:var(--display);font-weight:800;
font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);letter-spacing:-.035em;
color:var(--amarillo);line-height:1}
.dato span{display:block;margin-top:.5em;font-family:var(--dato);font-size:.63rem;
font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--bl-45);line-height:1.4}
.queda{background:rgba(3,47,65,.42);border:1px solid rgba(255,255,255,.16);
border-left:4px solid var(--amarillo);border-radius:0 6px 6px 0;padding:1rem 1.1rem}
.queda-tit{display:block;font-family:var(--dato);font-size:.66rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--amarillo);margin-bottom:.5rem}
.queda p{margin:0;font-size:.9rem;color:var(--bl-72);line-height:1.55}
.queda-ir{display:inline-block;margin-top:.8rem;font-family:var(--dato);font-size:.72rem;
font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amarillo);
text-decoration:none;border-bottom:1px solid rgba(250,219,11,.45);padding-bottom:.15em}
.queda-ir:hover{border-bottom-color:var(--amarillo)}
.historia-pie{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.18);
font-family:var(--dato);font-size:.7rem;line-height:1.7;color:var(--bl-45);max-width:78ch}
@media (max-width:880px){
.relato{grid-template-columns:1fr;gap:1.5rem}
.relatos{min-height:0}
}
/* --- Guías / blog SEO ----------------------------------------------------- */
.guias{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.25rem;margin-top:2rem}
.guia{display:flex;flex-direction:column;background:var(--blanco);border:2px solid var(--linea);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .25s var(--t),transform .25s var(--t)}
.guia:hover{border-color:var(--coral);transform:translateY(-3px)}
.guia-foto{aspect-ratio:16/10;overflow:hidden;background:var(--crudo-2)}
.guia-foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--t)}
.guia:hover .guia-foto img{transform:scale(1.05)}
.guia-txt{padding:1.2rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.guia-etq{font-family:var(--dato);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-texto)}
.guia h3{font-size:1.22rem;line-height:1.2}
.guia p{margin:0;font-size:.88rem;color:var(--texto-70);flex:1}
.guia-leer{font-family:var(--dato);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--turq-txt)}
/* ==========================================================================
EL CONTADOR DE NOCHES
El amarillo estaba reservado a esta herramienta. Aquí se toma la pantalla
entera: es la única sección del sitio que pide algo del visitante.
========================================================================== */
.seccion--am{background:var(--amarillo);color:var(--sobre-am)}
.seccion--am h2,.seccion--am h3{color:var(--sobre-am)}
.seccion--am .kicker{color:var(--azul)}
.seccion--am .prosa{color:var(--sobre-am-70)}
.seccion--am .prosa b{color:var(--sobre-am);font-weight:700}
.seccion--am .pintada{--p-a:var(--titular);--p-b:var(--azul)}
.seccion--am :where(a,button,input):focus-visible{outline-color:var(--titular)}
.filtros{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.6rem}
.filtro{font-family:var(--dato);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.52em 1em;border:2px solid rgba(10,39,47,.22);border-radius:99px;color:var(--sobre-am-70);background:transparent;transition:border-color .2s var(--t),background .2s var(--t),color .2s var(--t)}
.filtro:hover{border-color:var(--titular);color:var(--titular)}
.filtro[aria-pressed="true"]{background:var(--titular);color:var(--amarillo);border-color:var(--titular)}
.carta{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.7rem;margin:0;padding:0;list-style:none}
.plato{margin:0}
.plato[hidden]{display:none}
.plato input{position:absolute;opacity:0;width:0;height:0}
.plato label{display:flex;flex-direction:column;gap:.42rem;height:100%;cursor:pointer;background:var(--blanco);border:2px solid transparent;border-radius:6px;padding:1rem 1.1rem;transition:border-color .2s var(--t),background .2s var(--t),transform .2s var(--t),box-shadow .2s var(--t)}
.plato label:hover{border-color:var(--titular);transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(10,39,47,.55)}
.plato input:focus-visible + label{outline:3px solid var(--titular);outline-offset:2px}
.plato input:checked + label{background:var(--titular);border-color:var(--titular)}
.plato-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem}
.plato-nom{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.15;color:var(--titular);letter-spacing:-.02em}
.plato-min{font-family:var(--dato);font-size:.76rem;font-weight:600;color:var(--turq-txt);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:.15em}
.plato-desc{font-size:.83rem;line-height:1.5;color:var(--texto-70);margin:0}
.plato input:checked + label .plato-nom{color:var(--amarillo)}
.plato input:checked + label .plato-min{color:var(--amarillo)}
.plato input:checked + label .plato-desc{color:var(--bl-72)}
.plato-etq{display:flex;flex-wrap:wrap;align-items:center;gap:.28rem;margin-top:auto;padding-top:.45rem}
.etq{font-family:var(--dato);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.24em .5em;border-radius:3px;background:var(--crudo-2);color:var(--texto-70)}
.plato input:checked + label .etq{background:rgba(255,255,255,.16);color:var(--bl-72)}
.etq--imp{background:var(--coral-texto);color:var(--blanco)}
.plato input:checked + label .etq--imp{background:var(--coral-texto);color:var(--blanco)}
.marca-check{width:1.1rem;height:1.1rem;border:2px solid var(--linea);border-radius:3px;margin-left:auto;flex-shrink:0;display:grid;place-items:center;background:var(--blanco)}
.plato input:checked + label .marca-check{background:var(--amarillo);border-color:var(--amarillo)}
.marca-check::after{content:'';width:.36rem;height:.68rem;border:solid var(--titular);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .18s var(--t)}
.plato input:checked + label .marca-check::after{transform:rotate(45deg) scale(1)}
.tablero{position:sticky;bottom:0;z-index:50;margin-top:1.5rem;background:var(--titular);color:var(--blanco);border-radius:6px 6px 0 0;padding:1rem clamp(1rem,2.4vw,1.7rem);box-shadow:0 -6px 28px -10px rgba(10,39,47,.45);display:grid;grid-template-columns:auto auto 1fr auto auto;gap:clamp(.9rem,2.6vw,2.2rem);align-items:center}
.tablero[data-vacio] .tablero-cta{pointer-events:none}
.tablero[data-vacio] .boton--coral{background:transparent;border-color:var(--bl-18);color:var(--bl-45)}
.marcador{display:flex;flex-direction:column;line-height:1}
.marcador b{font-family:var(--display);font-weight:800;font-size:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);letter-spacing:-.04em;color:var(--blanco);font-variant-numeric:tabular-nums}
.marcador span{font-family:var(--dato);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bl-45);margin-top:.4em}
.marcador--noches b{color:var(--amarillo)}
.aviso{font-family:var(--display);font-weight:600;font-size:clamp(.92rem,.88rem + .3vw,1.15rem);line-height:1.25;color:var(--blanco);min-height:1.2em}
.tablero-cta{white-space:nowrap}
.tablero .boton--coral{background:var(--amarillo);border-color:var(--amarillo);color:var(--titular)}
.tablero .boton--coral:hover{background:var(--blanco);border-color:var(--blanco);color:var(--titular)}
@media (max-width:900px){.tablero{grid-template-columns:auto auto auto;row-gap:.7rem}.aviso{grid-column:1/-1;order:4}.tablero-cta{grid-column:1/-1;order:5}.tablero .boton{width:100%}}
.plan{margin-top:2.25rem;display:none}
.plan[data-visible]{display:block}
.plan h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1.15rem}
.dia{background:var(--blanco);border-left:6px solid var(--titular);border-radius:0 6px 6px 0;padding:1.1rem 1.3rem;margin-bottom:.7rem}
.dia-top{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.75rem;
padding-bottom:.55rem;border-bottom:1px solid var(--linea)}
.dia-n{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--titular);letter-spacing:-.03em}
.dia-min{font-family:var(--dato);font-size:.72rem;color:var(--texto-45);font-variant-numeric:tabular-nums}
.dia-cuerpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem 1.6rem}
.bloque-tit{display:flex;align-items:baseline;gap:.6rem;font-family:var(--dato);font-size:.68rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--turq-txt);margin-bottom:.4rem}
.bloque-tit i{font-style:normal;letter-spacing:.04em;color:var(--texto-45);font-variant-numeric:tabular-nums}
.bloque--noche .bloque-tit{color:var(--coral-texto)}
.bloque--todo{grid-column:1/-1}
.bloque ol{margin:0;padding-left:1.1rem;font-size:.91rem;color:var(--texto-70)}
.bloque li{margin-bottom:.28em}
.bloque li b{color:var(--texto);font-weight:600}
.bloque li i{font-style:normal;color:var(--texto-45);font-family:var(--dato);font-size:.76rem}
.fila-tras{list-style:'→ ';color:var(--texto-45)}
.nota-honesta{margin-top:1.35rem;padding-top:1.1rem;border-top:1px solid rgba(10,39,47,.2);font-size:.85rem;color:var(--sobre-am-70);max-width:72ch}
.seccion--am .boton--linea{border-color:rgba(10,39,47,.3);color:var(--sobre-am)}
.seccion--am .boton--linea:hover{border-color:var(--titular);background:rgba(10,39,47,.08)}
/* --- Directorio ----------------------------------------------------------- */
.verbos{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.8rem;margin-top:1.9rem}
.verbo{background:var(--turquesa-tarjeta);border:2px solid var(--bl-18);border-radius:8px;padding:1.4rem 1.35rem;transition:border-color .2s var(--t),background .2s var(--t),transform .2s var(--t)}
.verbo:hover{border-color:var(--amarillo);background:#083D43;transform:translateY(-4px)}
.verbo h3{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--amarillo);letter-spacing:-.035em;margin-bottom:.4rem}
.verbo p{margin:0;font-size:.88rem;color:var(--bl-72)}
/* Nombre a la izquierda, dato a la derecha. El dato es la nota pública salvo
en Compra, donde no hay volumen de reseñas para ordenar y dice el oficio. */
.verbo .verbo-tit{margin:1.25rem 0 .55rem;font-family:var(--dato);font-size:.72rem;
font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amarillo)}
.verbo-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.verbo-lista li{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
padding:.38rem 0;border-top:1px solid rgba(255,255,255,.14);font-size:.86rem}
.verbo-lista li:first-child{border-top:0}
.verbo-lista span{color:#fff;min-width:0}
.verbo-lista b{flex-shrink:0;font-weight:700;color:var(--amarillo);font-variant-numeric:tabular-nums}
.verbo-lista i{font-style:normal;font-family:var(--dato);font-size:.68rem;color:var(--bl-45);
font-variant-numeric:tabular-nums}
.verbo-lista--oficio b{font-size:.72rem;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:rgba(255,255,255,.62)}
.verbo .verbo-pie{margin:.75rem 0 0;font-size:.75rem;line-height:1.45;color:rgba(255,255,255,.6)}
/* ==========================================================================
QUÉ PASA EN GUATAPÉ — la agenda
Filas, no tarjetas: una agenda se lee en vertical y por fecha. El bloque de
la fecha es lo primero que se ve porque es lo único que el visitante compara
contra su calendario.
========================================================================== */
.agenda-aviso{margin:1.6rem 0 0;padding:.85rem 1.1rem;max-width:72ch;
background:var(--blanco);border-left:5px solid var(--coral-texto);border-radius:0 5px 5px 0;
font-size:.85rem;line-height:1.5;color:var(--texto-70)}
.agenda-aviso b{color:var(--coral-texto);font-weight:600}
.agenda{list-style:none;margin:2rem 0 0;padding:0;border-top:2px solid var(--linea)}
.cita{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.4rem);
padding:1.5rem 0;border-bottom:1px solid var(--linea);transition:background .2s var(--t)}
.cita[hidden]{display:none}
.cita:hover{background:var(--blanco)}
.cita-fecha{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
min-width:clamp(4.5rem,9vw,6.5rem);padding:.7rem .5rem .6rem;border-radius:6px;
background:var(--turquesa-tarjeta);color:var(--blanco);line-height:1;align-self:flex-start}
.cita-fecha b{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);letter-spacing:-.04em}
.cita-fecha span{font-family:var(--dato);font-size:.68rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--amarillo);margin-top:.45em}
.cita-fecha i{font-style:normal;font-family:var(--dato);font-size:.66rem;letter-spacing:.1em;
color:var(--bl-45);margin-top:.5em}
.cita-txt{min-width:0}
.cita-txt h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.85rem);font-weight:800;letter-spacing:-.03em;margin:.45rem 0 .4rem}
.cita-txt p{margin:0;font-size:.92rem;color:var(--texto-70);max-width:62ch;line-height:1.6}
.cita-tipo{display:inline-block;font-family:var(--dato);font-size:.68rem;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;padding:.26em .6em;border-radius:3px;
background:var(--crudo-2);color:var(--texto-70)}
/* El color de la etiqueta dice el tipo sin tener que leerla. Todos medidos
contra su fondo: ninguno baja de 4,5:1. */
.cita-tipo--fiesta{background:var(--coral-texto);color:var(--blanco)}
.cita-tipo--cultura{background:var(--azul);color:var(--blanco)}
.cita-tipo--deporte{background:var(--turquesa-tarjeta);color:var(--blanco)}
.cita-tipo--religioso{background:var(--titular);color:var(--blanco)}
.cita-tipo--mercado{background:var(--amarillo);color:var(--titular)}
.cita-tipo--naturaleza{background:#6A7E2C;color:var(--blanco)}
.cita-pie{margin-top:.7rem !important;font-family:var(--dato);font-size:.72rem;
letter-spacing:.04em;color:var(--texto-45) !important}
.agenda-vacio{margin-top:1.5rem;font-family:var(--dato);font-size:.8rem;color:var(--texto-45)}
@media (max-width:560px){
.cita{grid-template-columns:1fr;gap:.9rem}
.cita-fecha{flex-direction:row;align-items:baseline;gap:.5em;align-self:flex-start;
justify-self:start;min-width:0;padding:.5rem .8rem}
.cita-fecha span,.cita-fecha i{margin-top:0}
}
/* --- Pie ------------------------------------------------------------------ */
/* Llevaba el logo, el lema y medio metro de hueco en medio. Ahora carga el
mapa del sitio: es lo que un pie hace, recoger a quien llegó al final sin
encontrar lo que venía a buscar. */
.pie{background:var(--petroleo);color:var(--bl-72);
padding:clamp(2.6rem,5vw,4rem) var(--marco) 1.6rem;
border-top:6px solid var(--amarillo)}
.pie-in{max-width:var(--ancho);margin-inline:auto;display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(2rem,5vw,4rem);
align-items:start}
.pie-marca img{height:72px;width:auto;display:block}
.pie-lema{font-family:var(--display);font-weight:800;
font-size:clamp(1.35rem,1rem + 1.5vw,2.1rem);letter-spacing:-.035em;
margin:1.2rem 0 0;max-width:12ch;line-height:1;color:var(--blanco)}
.pie-firma{margin:1rem 0 0;font-size:.9rem;max-width:32ch;line-height:1.6;
color:var(--bl-45)}
.pie-mapa{display:grid;gap:clamp(1.4rem,3vw,2.4rem);
grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.pie-col h3{margin:0 0 .8rem;font-family:var(--dato);font-size:.72rem;font-weight:600;
letter-spacing:.15em;text-transform:uppercase;color:var(--amarillo)}
.pie-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pie-col a{color:var(--bl-72);text-decoration:none;font-size:.95rem;line-height:1.4;
border-bottom:1px solid transparent;padding-bottom:1px}
.pie-col a:hover,.pie-col a:focus-visible{color:var(--blanco);border-bottom-color:var(--celeste)}
/* ==========================================================================
REDES SOCIALES — una tira de tres zócalos que comparten filete
==========================================================================
Apagados en reposo: solo la moldura. Al pasar o enfocar, el zócalo SE
ENCIENDE —campo amarillo, figura en tinta, 10,32:1—. Es movimiento que
responde a una acción del visitante, el único que admite el sistema.
No se usan los colores corporativos de cada red: este es el sitio de un
municipio y la paleta es la de la guía de marca, no la de tres empresas.
Tres zócalos con un filete compartido, como una retícula de 1 px. */
.redes{list-style:none;display:flex;margin:1.4rem 0 0;padding:0;
gap:1px;background:var(--bl-18);width:max-content;
border:1px solid var(--bl-18)}
.red{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:.3rem;width:74px;padding:.7rem .4rem;background:var(--petroleo);
color:var(--bl-72);text-decoration:none;
transition:background .2s var(--t),color .2s var(--t)}
.red-nom{font-family:var(--dato);font-size:.66rem;font-weight:600;
letter-spacing:.09em;text-transform:uppercase}
.red:hover,.red:focus-visible{background:var(--amarillo);color:var(--titular)}
.red:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}
@media (max-width:420px){ .red{width:64px} }
/* ==========================================================================
FLOTANTE DE WHATSAPP — un letrero de esquina, no un botón circular
==========================================================================
El manual del oficio pide aquí un círculo verde con sombra. Este sitio pide
lo contrario: esquinas VIVAS y pintura SOBRE el muro, no flotando encima.
Así que es un zócalo pequeño, con la misma moldura doble que los demás
(`border` + los dos `inset` de .zoc-marco), campo verde pleno de la guía y
una sola palabra. Verde con tinta: 7,37:1 medido. */
.wa-flota{
position:fixed;z-index:60;
right:clamp(12px,2.5vw,26px);bottom:clamp(12px,2.5vw,26px);
display:inline-flex;align-items:center;gap:.55rem;
padding:.72rem 1rem;
background:var(--verde);color:var(--titular);
/* 2026-09-24 (CEO): sin moldura — solo el campo verde. */
border:0;box-shadow:none;
border-radius:0;text-decoration:none;
font-family:var(--dato);font-size:.7rem;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;
transition:background .2s var(--t)}
.wa-flota:hover{background:var(--amarillo)}
.wa-flota:focus-visible{outline:3px solid var(--titular);outline-offset:4px}
.wa-flota .red-fig{flex:none}
/* En móvil pierde la palabra y queda el letrero mínimo: una barra ancha
pegada al borde roba pantalla, y aquí es donde se consulta el sitio. */
@media (max-width:560px){
.wa-flota{padding:.7rem .78rem;gap:0}
.wa-flota span{position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap}
}
@media print{ .wa-flota{display:none} }
/* Aval institucional (2026-09-24, CEO): a la izquierda el LOCKUP HORIZONTAL
de la Alcaldía —escudo a todo color, sin tocarle un tono, y el claim
«Municipio de Guatapé · Departamento de Antioquia» en blanco, como la
versión para fondo oscuro que entregó la propia Alcaldía—; a la derecha, la
Mesa de Empresarios. Origen de los dos: _build_avales.py.
76 px de alto y no menos: el escudo ocupa todo el alto del lockup y son
cuatro cuarteles con figura propia; por debajo se leen como una mancha. */
.pie-aval{max-width:var(--ancho);margin:clamp(2rem,4vw,3rem) auto 0;padding-top:1.6rem;
border-top:1px solid var(--bl-18);display:flex;align-items:center;
justify-content:space-between;flex-wrap:wrap;gap:1.6rem 2rem}
.pie-aval-alcaldia{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.4rem}
.pie-aval-alcaldia img{height:76px;width:auto;display:block;flex:none}
/* La frase se separa del lockup con un filete, no con aire: son dos
enunciados distintos —quién es y qué es este sitio—. */
.pie-aval-alcaldia p{margin:0;padding-left:1.4rem;border-left:1px solid var(--bl-18);
font-family:var(--dato);font-size:.74rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--bl-72);line-height:1.6}
.pie-aval strong{display:block;font-weight:600;color:var(--blanco);letter-spacing:.06em;
font-size:.92rem}
/* La Mesa de Empresarios sobre un campo blanco, SIN recuadro (CEO,
2026-09-24). Su logo es verde hondo sobre blanco: sobre petróleo no se lee,
y el logo de un tercero no se recolorea — se le da el campo para el que fue
dibujado. */
.pie-mesa{flex:none;background:var(--blanco);padding:.55rem .9rem;border-radius:0}
.pie-mesa img{height:60px;width:auto;display:block}
@media (max-width:640px){
.pie-aval-alcaldia p{padding-left:0;border-left:0;flex-basis:100%}
}
@media (max-width:520px){
.pie-aval-alcaldia img{height:62px}
.pie-mesa img{height:52px}
}
.pie-legal{max-width:var(--ancho);margin:1.6rem auto 0;padding-top:1.4rem;
border-top:1px solid var(--bl-18);display:flex;flex-wrap:wrap;gap:.5rem 2rem;
font-family:var(--dato);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--bl-45)}
/* El 123 del pie medía 24×15 px. Mismo criterio que la banda: es un número
de emergencia y tiene que poder pulsarse a la primera. */
.pie-legal a{color:var(--amarillo);text-underline-offset:3px;
display:inline-block;padding:.3rem .5rem;margin:-.3rem -.5rem;min-height:24px}
@media (max-width:820px){ .pie-in{grid-template-columns:1fr} }
/* ==========================================================================
LAS APARICIONES
Los bloques entran subiendo cuando les toca. El atributo lo pone el JS, no
el HTML: si el JS no corre, nada queda escondido.
--r escalona los hermanos dentro de una misma sección, para que el bloque
se lea como una secuencia y no como seis cosas apareciendo a la vez.
========================================================================== */
[data-revela]{opacity:0;transform:translateY(26px);
transition:opacity .75s var(--t),transform .75s var(--t);
transition-delay:calc(var(--r,0) * 90ms)}
[data-revela][data-visible]{opacity:1;transform:none}
/* Las tarjetas de una fila entran una detrás de otra, de izquierda a derecha,
como se llena una fila de verdad. */
[data-revela-hijos] > *{opacity:0;transform:translateY(24px);
transition:opacity .7s var(--t),transform .7s var(--t)}
[data-revela-hijos][data-visible] > *{opacity:1;transform:none}
[data-revela-hijos][data-visible] > *:nth-child(1){transition-delay:.04s}
[data-revela-hijos][data-visible] > *:nth-child(2){transition-delay:.11s}
[data-revela-hijos][data-visible] > *:nth-child(3){transition-delay:.18s}
[data-revela-hijos][data-visible] > *:nth-child(4){transition-delay:.25s}
[data-revela-hijos][data-visible] > *:nth-child(5){transition-delay:.32s}
[data-revela-hijos][data-visible] > *:nth-child(6){transition-delay:.39s}
[data-revela-hijos][data-visible] > *:nth-child(n+7){transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
[data-revela],[data-revela-hijos] > *{opacity:1;transform:none}
.agua{transition:none}
.friso::after{clip-path:none}
.pintada::after{clip-path:none}
}
/* ==========================================================================
PÁGINAS INTERIORES — reforma 2026-09-08
==========================================================================
Cinco páginas nuevas. Cada una se estructura por lo que su contenido ES,
no por una retícula común:
· Experiencias — una CALLE DE FACHADAS. Cada experiencia es una franja a
ancho completo con su color y su motivo. Diez tarjetas iguales habrían
convertido Guatapé en un catálogo; diez franjas de color son el pueblo.
· Imperdibles — agrupados por ZONA, porque lo que está junto se hace junto.
La foto no sostiene la fila, así que los seis lugares sin foto no cojean.
· Antes de viajar — sin decoración. Tipografía, tablas e índice. El
contraste con las demás ES la decisión.
· Turismo responsable — el manifiesto solo en la pantalla; las nueve reglas
SIN numerar, porque no son una secuencia.
========================================================================== */
/* --- Portada de página interior ------------------------------------------ */
.portada{padding:clamp(3.5rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem);background:var(--crudo)}
.portada h1{max-width:16ch}
/* El logo del destino junto al título de cada interior (CEO, 2026-09-16, con
maqueta). Medido: el 21 % del ancho del viewport, ALINEADO ARRIBA con el
titular y PEGADO al final del título —no al borde derecho—, con el párrafo
debajo a todo el ancho. Retícula de tres columnas: el título ocupa lo que
mide (y cede línea si no cabe), el logo va en la segunda, la tercera es aire.
`.portada-txt` es `display:contents` para que sus hijos entren en la retícula. */
.portada-in{display:grid;grid-template-columns:minmax(0,max-content) clamp(170px,21vw,320px) minmax(0,1fr);column-gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
.portada-txt{display:contents}
.portada-txt > *{grid-column:1 / -1}
.portada-txt > h1{grid-column:1;grid-row:1;max-width:none}
.portada-logo{grid-column:2;grid-row:1;margin-top:.1em}
.portada-logo img{display:block;width:100%;height:auto}
@media (max-width:720px){
.portada-in{grid-template-columns:1fr}
.portada-txt > h1{grid-column:1;grid-row:2}
.portada-logo{grid-column:1;grid-row:1;width:min(52%,220px);margin:0 0 .75rem}
}
.portada-bajo{margin:1.4rem 0 0;max-width:56ch;font-size:1.12rem;color:var(--texto-70)}
.portada-lema{margin:.7rem 0 0;font-family:var(--display);font-weight:800;
font-size:clamp(1.3rem,.9rem + 1.7vw,2.3rem);color:var(--turq-txt);max-width:22ch;line-height:1.1}
.portada-cuenta{margin:1.8rem 0 0;font-family:var(--dato);font-size:.78rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--texto-45)}
.portada--tr{background:var(--crudo-2)}
.portada--util{background:var(--blanco);border-bottom:1px solid var(--linea)}
.portada--sit{background:var(--hondo)}
.portada--sit h1,.portada--sit .portada-bajo{color:var(--blanco)}
.portada--sit .portada-bajo{color:var(--bl-72)}
/* --- EXPERIENCIAS: la calle de fachadas ---------------------------------- */
.exp{padding:clamp(2.6rem,6vw,4.6rem) 0}
.exp-in{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
gap:clamp(1.6rem,4vw,4rem);align-items:start}
.exp-motivo{display:block;width:clamp(48px,5vw,72px);height:auto;margin-bottom:1rem}
.exp-kicker{font-family:var(--dato);font-size:.72rem;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;margin:0 0 .5rem;opacity:.75}
.exp-titulo h2{font-size:clamp(1.7rem,1.1rem + 2.2vw,3rem);line-height:.98}
.exp-entrada{margin:0 0 1.6rem;font-size:1.08rem;max-width:62ch;line-height:1.75}
.exp-sub{margin:1.6rem 0 .7rem;font-family:var(--dato);font-size:.72rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.exp-lista{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;max-width:68ch}
.exp-lista li{padding-left:1.5rem;position:relative;line-height:1.65}
.exp-lista li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:9px;
transform:rotate(45deg);background:currentColor;opacity:.5}
.exp-lista b{font-family:var(--display);font-weight:700;display:block}
.exp-cierre{margin-top:1.5rem;font-style:italic;max-width:60ch;opacity:.9}
.exp-cta{margin:1.8rem 0 0}
.exp-cta a{font-family:var(--dato);font-size:.8rem;font-weight:600;letter-spacing:.05em;
color:inherit;text-underline-offset:5px}
/* Los cinco tonos de la calle. Cada uno se comprobó con su texto encima. */
.exp--celeste {background:var(--celeste);color:var(--titular)} /* 12,0:1 */
.exp--verde {background:var(--verde);color:var(--titular)} /* 10,6:1 */
.exp--amarillo {background:var(--amarillo);color:var(--sobre-am)} /* 11,7:1 */
.exp--bermellon{background:var(--bermellon);color:var(--blanco)} /* 4,2:1 — solo titulares y texto ≥1.05rem */
.exp--petroleo {background:var(--petroleo);color:var(--blanco)} /* 11,9:1 */
.exp--bermellon .exp-lista li,.exp--bermellon .exp-entrada{font-size:1.05rem}
.exp--petroleo .exp-cta a,.exp--bermellon .exp-cta a{color:var(--blanco)}
/* --- IMPERDIBLES: agrupados por zona ------------------------------------- */
.zona{padding:clamp(2.6rem,6vw,4.4rem) 0}
.zona:nth-child(even){background:var(--crudo)}
.zona-cabeza{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;
padding-bottom:1.1rem;border-bottom:2px solid var(--linea);margin-bottom:1.8rem}
.zona-cabeza h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem)}
.zona-cabeza p{margin:0;color:var(--texto-70);flex:1 1 16rem}
.zona-cifra{font-family:var(--display);font-weight:800;font-size:2.2rem;
color:var(--turquesa-tarjeta);line-height:1}
.imp-lista{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.imp{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:1.4rem;
align-items:center;padding-bottom:1.4rem;border-bottom:1px solid var(--linea)}
.imp:last-child{border-bottom:0;padding-bottom:0}
.imp-foto img{width:100%;height:7.5rem;object-fit:cover;border-radius:2px;display:block}
.imp-sinfoto{display:block;width:100%;height:7.5rem;border-radius:2px;
background:var(--crudo-2);
background-image:linear-gradient(45deg,transparent 46%,rgba(32,72,80,.14) 46% 54%,transparent 54%);
background-size:14px 14px}
.imp-kicker{margin:0 0 .3rem;font-family:var(--dato);font-size:.68rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--turq-txt)}
.imp-txt h3{font-size:1.18rem;margin:0 0 .35rem}
.imp-txt p{margin:0;color:var(--texto-70);max-width:62ch;line-height:1.62}
.imp-alterno{display:block;font-family:var(--cuerpo);font-weight:400;font-style:italic;
font-size:.86rem;color:var(--texto-45);letter-spacing:0}
.imp-tiempo{margin:0;text-align:right;white-space:nowrap}
.imp-tiempo b{display:block;font-family:var(--display);font-weight:800;font-size:1.25rem;
color:var(--titular);line-height:1}
.imp-tiempo span{font-family:var(--dato);font-size:.68rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--texto-45)}
/* --- ANTES DE VIAJAR: la página que se calla ------------------------------ */
.indice{position:sticky;top:0;z-index:20;background:var(--hondo);
overflow-x:auto;-webkit-overflow-scrolling:touch}
.indice-in{display:flex;gap:1.6rem;padding-block:.85rem}
.indice a{font-family:var(--dato);font-size:.74rem;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--bl-72);text-decoration:none;white-space:nowrap;
padding-block:.2em;border-bottom:2px solid transparent}
.indice a:hover,.indice a:focus-visible{color:var(--blanco);border-bottom-color:var(--amarillo)}
.util{padding:clamp(2.6rem,6vw,4.6rem) 0}
.util--alt{background:var(--crudo)}
.util h2{font-size:clamp(1.6rem,1.1rem + 1.9vw,2.6rem);max-width:20ch}
.util-entrada{margin:1rem 0 2rem;max-width:60ch;font-size:1.08rem;color:var(--texto-70)}
.rutas,.opciones{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;
grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.rutas li,.opciones li{padding:1.3rem 1.4rem;background:var(--blanco);
border-left:4px solid var(--turquesa)}
.util--alt .rutas li,.util--alt .opciones li{background:var(--blanco)}
.ruta-dest{margin:0 0 .5rem;font-family:var(--dato);font-size:.72rem;font-weight:600;
letter-spacing:.13em;text-transform:uppercase;color:var(--turq-txt)}
.rutas h3,.opciones h3{font-size:1.1rem;margin:0 0 .5rem}
.rutas p,.opciones p{margin:0;color:var(--texto-70);line-height:1.62}
.aviso{margin-top:1.4rem;font-size:.94rem;color:var(--texto-45);max-width:64ch}
.parqueo{margin-top:1.8rem;padding:1.3rem 1.5rem;background:var(--crudo-2);border-radius:2px}
.parqueo h3{margin:0 0 .5rem;font-size:1.05rem}
.parqueo p{margin:0;color:var(--texto)}
.serv{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1.6rem;
padding:1.7rem 0;border-top:1px solid var(--linea);align-items:start}
.serv-dato{margin:0;font-family:var(--display);font-weight:800;font-size:1.05rem;
color:var(--turquesa-tarjeta);line-height:1.2}
.serv-txt h3{margin:0 0 .55rem;font-size:1.22rem}
.serv-txt p{margin:0 0 .8rem;max-width:64ch;line-height:1.7;color:var(--texto)}
.consejo{padding:.9rem 1.1rem;background:var(--crudo);border-left:3px solid var(--amarillo);
font-size:.96rem}
.consejo b{font-family:var(--dato);font-size:.7rem;font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--amarillo-hondo);display:block;margin-bottom:.25rem}
.consejo--suave{border-left-color:var(--verde);background:transparent;padding-left:1.1rem}
.tabla-caja{overflow-x:auto;margin:.4rem 0 1rem}
.tabla{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
.tabla caption{text-align:left;font-family:var(--dato);font-size:.7rem;font-weight:600;
letter-spacing:.13em;text-transform:uppercase;color:var(--texto-45);padding-bottom:.6rem}
.tabla th,.tabla td{text-align:left;padding:.6rem .9rem;border-bottom:1px solid var(--linea)}
.tabla th{font-family:var(--dato);font-size:.72rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;background:var(--crudo)}
.util--seguridad{background:var(--crudo-2)}
.seg-entrada{font-size:1.2rem;max-width:56ch;margin:1rem 0 1.2rem;line-height:1.6}
.seg-texto{max-width:64ch;line-height:1.75;margin:0 0 1rem}
.seg-cierre{max-width:56ch;font-weight:600;color:var(--titular)}
.util--emergencias{background:var(--hondo);color:var(--bl-72)}
.util--emergencias h2,.util--emergencias h3{color:var(--blanco)}
.emg-123{margin:.6rem 0 0;font-family:var(--display);font-weight:800;
font-size:clamp(2rem,1.2rem + 3vw,3.4rem);color:var(--amarillo);line-height:1}
.emg-123 a{color:inherit;text-decoration:none}
.util--emergencias .util-entrada{color:var(--bl-72)}
.entidades{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1rem;
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.entidades li{padding:1.1rem 1.2rem;background:rgba(255,255,255,.07);border-radius:2px}
.entidades b{display:block;font-family:var(--display);color:var(--blanco);margin-bottom:.3rem}
.entidades span{font-family:var(--dato);font-size:.92rem;color:var(--celeste)}
.entidades em{display:block;margin-top:.5rem;font-size:.82rem;color:var(--bl-45);font-style:normal}
.ent-nota{display:block;margin-top:.45rem;font-family:var(--cuerpo);font-size:.85rem;
color:var(--bl-45)}
.proteccion{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--bl-18)}
.proteccion p{max-width:60ch}
.proteccion ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.proteccion li b{display:inline;color:var(--blanco);margin-right:.6rem}
.proteccion a{color:var(--amarillo)}
.qa-caja{display:grid;gap:2.2rem}
.qa-grupo-tit{font-family:var(--dato);font-size:.74rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--turq-txt);margin:0 0 1.1rem;
padding-bottom:.6rem;border-bottom:1px solid var(--linea)}
.qa{padding:.9rem 0}
.qa h3{font-size:1.1rem;margin:0 0 .4rem}
.qa p{margin:0;max-width:66ch;color:var(--texto-70);line-height:1.7}
/* --- TURISMO RESPONSABLE ------------------------------------------------- */
.manifiesto{background:var(--hondo);color:var(--bl-72);
padding:clamp(3rem,8vw,6rem) 0}
.manifiesto-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
gap:clamp(1.8rem,5vw,4rem);align-items:start}
.manifiesto h2{color:var(--blanco);font-size:clamp(1.5rem,1rem + 2vw,2.5rem);max-width:16ch}
.manifiesto-txt p{margin:0 0 1.1rem;max-width:58ch;line-height:1.8;font-size:1.05rem}
.manifiesto-txt p:last-child{margin-bottom:0}
.denuncia{background:var(--bermellon);color:var(--blanco);padding:clamp(2.4rem,6vw,4rem) 0}
.denuncia h2{color:var(--blanco);font-size:clamp(1.4rem,1rem + 1.6vw,2.1rem)}
.denuncia-txt{max-width:58ch;margin:.9rem 0 1.6rem;font-size:1.08rem;line-height:1.7}
.denuncia-canales{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.denuncia-canales li{padding:1rem 1.1rem;background:rgba(0,0,0,.17);border-radius:2px}
.denuncia-canales b{display:block;font-family:var(--display);margin-bottom:.15rem}
.denuncia-canales span{display:block;font-size:.86rem;opacity:.85;margin-bottom:.5rem}
.denuncia-canales a{color:var(--amarillo);font-family:var(--dato);font-weight:600}
.conducta{padding:clamp(2.6rem,6vw,4.6rem) 0}
.dato-dir{font-family:var(--dato);font-size:.92rem;color:var(--turq-txt)}
/* --- SIT ------------------------------------------------------------------ */
.sit-preguntas{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.7rem;max-width:52ch}
.sit-preguntas li{padding-left:1.6rem;position:relative;line-height:1.6;color:var(--texto)}
.sit-preguntas li::before{content:'';position:absolute;left:0;top:.6em;width:9px;height:9px;
transform:rotate(45deg);background:var(--bermellon)}
.looker{padding:1.6rem 1.7rem;background:var(--crudo);border-left:4px solid var(--turquesa)}
.looker--espera p{margin:0;max-width:58ch;color:var(--texto-70);line-height:1.7}
.looker-eti{margin:0 0 .5rem !important;font-family:var(--dato);font-size:.72rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--turq-txt)}
.looker-nota{margin:.8rem 0 0;font-size:.9rem;color:var(--texto-45)}
.looker iframe{width:100%;min-height:min(80vh,700px);border:0;margin-top:1rem;background:var(--blanco)}
/* --- BANDA «Guatapé a mano» ---------------------------------------------- */
/* Va encima del pie, en las siete páginas. NO es fija: una barra pegada al
borde roba pantalla permanentemente en móvil, que es justo donde se
consulta una emergencia. */
.banda{background:var(--petroleo);color:var(--bl-72);padding:clamp(2rem,4vw,3rem) 0;
border-top:4px solid var(--amarillo)}
.banda-tit{font-family:var(--dato);font-size:.76rem;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--amarillo);margin:0 0 1.5rem}
.banda-rejilla{display:grid;gap:clamp(1.5rem,3vw,2.6rem);
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.banda-eti{margin:0 0 .6rem;font-family:var(--dato);font-size:.7rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--celeste)}
.banda-123{margin:0 0 .3rem;font-family:var(--display);font-weight:800;font-size:2.4rem;
line-height:1}
.banda-123 a{color:var(--amarillo);text-decoration:none}
.banda-123 a:hover{text-decoration:underline}
.banda-nota{margin:0 0 1rem;font-size:.85rem;color:var(--bl-45)}
.banda-lista{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.banda-lista li{display:flex;gap:.7rem;flex-wrap:wrap;font-size:.92rem}
.banda-lista b{font-family:var(--display);font-weight:600;color:var(--blanco);min-width:8.5rem}
/* ⚠ DIANA TÁCTIL. Estos son los teléfonos de Policía, Hospital y Bomberos:
lo que alguien pulsa con prisa y nervios. Medían 106×19 px, por debajo
del mínimo de 24×24 de WCAG 2.5.8. El `padding-block` los sube sin mover
la maqueta, porque la lista ya tiene su propio `gap`. */
.banda-lista a{color:var(--celeste);font-family:var(--dato);text-underline-offset:3px;
display:inline-block;padding-block:.35rem;min-height:24px}
.banda-aviso{display:block;width:100%;font-size:.78rem;color:var(--bl-45);font-family:var(--cuerpo)}
.banda-dato{margin:0 0 .6rem;line-height:1.6;max-width:34ch}
.banda-horario{margin:0;font-family:var(--dato);font-size:.88rem;color:var(--celeste);line-height:1.7}
.banda-enlaces{margin:.4rem 0 0;display:grid;gap:.4rem}
.banda-enlaces a{color:var(--celeste);font-size:.92rem;text-underline-offset:3px;
display:inline-block;padding-block:.3rem;min-height:24px}
/* --- Móvil ---------------------------------------------------------------- */
@media (max-width:860px){
.exp-in{grid-template-columns:1fr;gap:1.3rem}
.serv{grid-template-columns:1fr;gap:.6rem}
.imp{grid-template-columns:5rem minmax(0,1fr);grid-template-areas:'foto txt' 'tiempo tiempo'}
.imp-foto{grid-area:foto}.imp-txt{grid-area:txt}
.imp-tiempo{grid-area:tiempo;text-align:left;display:flex;gap:.5rem;align-items:baseline}
.imp-foto img,.imp-sinfoto{height:5rem}
.manifiesto-in{grid-template-columns:1fr}
}
/* ⚠️ CASCADA: la regla global `h1,h2,h3{color:var(--titular)}` gana por
especificidad sobre el `color` que hereda el contenedor, así que en las
franjas bermellón y petróleo los titulares salían petróleo sobre petróleo
—invisibles— sin ningún error que lo delatara. Los titulares de las
secciones con fondo propio HEREDAN. */
.exp h2,.exp h3,
.manifiesto h2,.denuncia h2,.denuncia h3,
.util--emergencias h2,.util--emergencias h3,
.portada--sit h1,.banda h2{color:inherit}
/* El motivo va en el color del texto de la franja, no en su color fijo:
el rombo bermellón sobre fondo bermellón desaparecía. */
.exp--bermellon .exp-motivo,.exp--petroleo .exp-motivo{filter:brightness(0) invert(1);opacity:.92}
/* ⚠️ El bermellón OFICIAL (#E6392C) con blanco encima da 4,21:1: sirve para
un titular grande (que solo pide 3:1) pero NO para el cuerpo de texto, que
pide 4,5:1. Las superficies bermellón que llevan texto corrido usan la
variante honda —mismo tono, 5,01:1—. El bermellón puro queda para los
motivos de la cenefa, los botones y las franjas sin texto pequeño. */
.exp--bermellon{background:var(--bermellon-hondo)}
.denuncia{background:var(--bermellon-hondo)}
.denuncia-canales span{opacity:1;color:rgba(255,255,255,.88)}
/* --- Tres correcciones de contraste, medidas ------------------------------ */
/* La portada del SIT no declaraba color de texto: con `h1{color:inherit}`
el titular pasó a heredar --texto sobre petróleo, 1,20:1. Se declara. */
.portada--sit{color:var(--blanco)}
.portada--sit h1{color:var(--blanco)}
/* Los enlaces del pie: el pie es ahora petróleo, así que van en amarillo
(8,96:1). La corrección anterior los pintaba en turquesa oscuro, que sobre
el pie claro funcionaba y sobre el nuevo da 1,97:1. */
/* El amarillo-hondo sobre crudo daba 4,24:1 a 11,2px. Un paso más abajo. */
.consejo b{color:#897607} /* 6,00:1 sobre --crudo */
.atractivo-alt{display:block;font-family:var(--cuerpo);font-style:italic;font-size:.78rem;
color:var(--texto-45);margin:.15rem 0 .35rem;line-height:1.35}
/* --- Las seis fiestas oficiales ------------------------------------------ */
/* Van antes de la agenda de muestra y con superficie propia: son lo único
confirmado de esa sección, y mezclarlas con lo inventado las rebajaría. */
.fiestas{margin:1.8rem 0 2.2rem;padding:1.6rem 1.7rem;background:var(--blanco);
border-left:4px solid var(--bermellon)}
.fiestas-cabeza h3{font-size:1.3rem;margin:0 0 .4rem}
.fiestas-cabeza p{margin:0 0 1.4rem;color:var(--texto-70);max-width:58ch;font-size:.98rem}
.fiestas-lista{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.fiesta-mes{margin:0 0 .25rem;font-family:var(--dato);font-size:.72rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--coral-texto)}
.fiesta h4{font-family:var(--display);font-weight:700;font-size:1.03rem;margin:0 0 .3rem;
color:var(--titular);line-height:1.25}
.fiesta-txt{margin:0;font-size:.92rem;color:var(--texto-70);line-height:1.6}
/* ⚠️ Una celda de grid tiene `min-width:auto`, así que su contenido más ancho
la estira desde dentro y el `overflow-x:auto` del hijo no llega a actuar.
La tabla de recolección de residuos (min-width 34rem) empujaba la columna
a 544px dentro de una ventana de 390 y desbordaba TODA la página.
Se ve solo en móvil y solo en esa página. */
.serv,.serv-txt,.exp-in,.exp-cuerpo,.manifiesto-in,.imp{min-width:0}
.serv-txt,.exp-cuerpo{min-width:0;max-width:100%}
.tabla-caja{max-width:100%}
/* El cierre de las páginas interiores reutiliza .seccion + .prosa de la home,
donde el h2 es un titular de sección a pantalla completa. Aquí es un pie de
página: se baja a la escala del contenido que encabeza. */
.conducta ~ .seccion h2,
.zona ~ .seccion h2{font-size:clamp(1.25rem,1rem + 1vw,1.7rem);max-width:24ch}
/* ==========================================================================
EL ZÓCALO COMO COMPONENTE — rediseño 2026-09-08 (segunda vuelta)
==========================================================================
Crítica del equipo de la Alcaldía: FALTA COLOR. Y la información
institucional se había publicado como párrafos.
Un zócalo de Guatapé es un panel enmarcado en moldura, con el campo
pintado de un color pleno y una figura en el centro que dice de qué vive
esa casa. Se leen en fila, al pie de la fachada.
Así que cada dato institucional es ahora un zócalo: un servicio público,
un teléfono de emergencia, una regla de conducta, un mes con fiesta.
La figura es el dato; el párrafo va DEBAJO, fuera del marco.
No es la retícula de tarjetas con otro nombre:
· moldura doble, no sombra · esquinas vivas, no redondeadas
· campo de color PLENO · figura grande, no icono de 16px
========================================================================== */
.zocalos{display:grid;gap:clamp(1.1rem,2.2vw,1.8rem);
grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
.zocalos--anchos{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.zoc{min-width:0}
.zoc-marco{border:3px solid var(--z-marco);padding:5px;background:var(--z-marco)}
.zoc-campo{background:var(--z-campo);color:var(--z-tinta);
padding:1.5rem 1.2rem 1.3rem;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:.7rem;min-height:9.5rem;
border:2px solid var(--z-linea)}
.zoc-fig{display:block;flex-shrink:0}
.zoc-dato{margin:0;font-family:var(--display);font-weight:800;line-height:.95;
font-size:clamp(1.35rem,1.05rem + 1.1vw,2rem);text-align:center;letter-spacing:-.03em}
.zoc-leyenda{margin:0;padding:.55rem .6rem .15rem;text-align:center;
font-family:var(--dato);font-size:.72rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--z-pie)}
.zoc-txt{margin:.85rem 0 0;font-size:.95rem;line-height:1.62;color:var(--texto-70)}
/* Los cinco colores de la guía, rotando como las casas de una calle.
Cada uno con su tinta ya medida contra su campo. */
.zoc--celeste {--z-campo:#9BD4DE;--z-tinta:#083D43;--z-marco:#083D43;--z-linea:rgba(8,61,67,.22);--z-pie:var(--bl-72)}
.zoc--bermellon{--z-campo:#D7271A;--z-tinta:#FFFFFF;--z-marco:#0B3238;--z-linea:rgba(255,255,255,.28);--z-pie:rgba(255,255,255,.85)}
.zoc--amarillo {--z-campo:#F7E05B;--z-tinta:#0B3238;--z-marco:#0B3238;--z-linea:rgba(10,39,47,.22);--z-pie:var(--bl-72)}
.zoc--verde {--z-campo:#AFC861;--z-tinta:#0B3238;--z-marco:#0B3238;--z-linea:rgba(10,39,47,.22);--z-pie:rgba(255,255,255,.85)}
.zoc--azul {--z-campo:#3D97CD;--z-tinta:#0B3238;--z-marco:#0B3238;--z-linea:rgba(6,36,52,.25);--z-pie:var(--bl-72)}
.zoc--petroleo {--z-campo:#083D43;--z-tinta:#F7E05B;--z-marco:#0B3238;--z-linea:rgba(247,224,91,.28);--z-pie:var(--bl-72)}
/* Sobre fondo oscuro la moldura se ilumina, no se hunde. */
.oscura .zoc-leyenda,.util--emergencias .zoc-leyenda,.banda .zoc-leyenda{color:var(--bl-72)}
.oscura .zoc-txt,.util--emergencias .zoc-txt{color:var(--bl-72)}
/* Zócalo grande: para un teléfono de emergencia, que debe leerse a un metro. */
.zoc--grande .zoc-campo{min-height:11.5rem;padding:1.7rem 1.2rem}
.zoc--grande .zoc-dato{font-size:clamp(1.7rem,1.2rem + 1.9vw,2.7rem);font-variant-numeric:tabular-nums}
.zoc--grande .zoc-dato a{color:inherit;text-decoration:none}
.zoc--grande .zoc-dato a:hover{text-decoration:underline;text-underline-offset:4px}
.zoc-dato small{display:block;font-family:var(--dato);font-size:.8rem;font-weight:600;
letter-spacing:.06em;margin-top:.35rem;opacity:.85}
/* --- La semana de recolección --------------------------------------------- */
/* Una tabla obliga a cruzar filas con columnas. Una semana se mira. */
.semana{margin:1.4rem 0 0}
.semana-tit{margin:0 0 .8rem;font-family:var(--dato);font-size:.72rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--texto-45)}
.semana-rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
border:3px solid var(--petroleo);background:var(--petroleo);padding:4px}
.sem-dia{background:var(--blanco);padding:.6rem .4rem;min-height:6.5rem;
display:flex;flex-direction:column;gap:.35rem}
.sem-dia--vacio{background:var(--crudo-2)}
.sem-eti{margin:0 0 .2rem;text-align:center;font-family:var(--display);font-weight:800;
font-size:1.05rem;color:var(--titular)}
.sem-eti abbr{text-decoration:none}
.sem-marca{display:block;padding:.35rem .4rem;border-radius:2px;text-align:center}
.sem-marca b{display:block;font-family:var(--dato);font-size:.68rem;font-weight:600;
letter-spacing:.04em;line-height:1.25}
.sem-marca i{display:block;font-style:normal;font-family:var(--dato);font-size:.66rem;
opacity:.85;margin-top:.15rem}
.sem-marca--petroleo {background:var(--petroleo);color:var(--amarillo)}
.sem-marca--verde {background:#6A7E2C;color:#fff}
.sem-marca--azul {background:#2D7DAE;color:#fff}
.sem-marca--bermellon{background:var(--bermellon-hondo);color:#fff}
/* --- Los enchufes, dibujados ---------------------------------------------- */
.enchufes{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
margin:1.2rem 0 0;padding:1.3rem 1.4rem;background:var(--crudo);
border:3px solid var(--titular)}
.enchufes figure{margin:0;text-align:center;flex-shrink:0}
.enchufes figcaption{margin-top:.5rem;font-family:var(--dato);font-size:.66rem;
font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-70)}
.enchufes-txt{flex:1 1 17rem;margin:0;font-size:.96rem;line-height:1.65}
/* --- El detalle de cada servicio, debajo de los zócalos -------------------- */
.detalles{margin-top:2.6rem;display:grid;gap:2.2rem}
.detalle{padding-top:1.6rem;border-top:3px solid var(--linea)}
.detalle h3{margin:0 0 .6rem;font-size:1.3rem}
.detalle > p{margin:0 0 .9rem;max-width:64ch;line-height:1.72}
/* --- La línea 123, que es lo primero que hay que ver ----------------------- */
.emg-linea{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;
margin:1.2rem 0 2rem;padding:1.4rem 1.6rem;background:var(--bermellon-hondo);
border:3px solid var(--blanco)}
.emg-linea .emg-123{margin:0;font-size:clamp(2.6rem,2rem + 3vw,4.4rem);color:var(--blanco)}
.emg-linea p:last-child{margin:0;flex:1 1 18rem;color:var(--blanco);max-width:44ch;
font-size:1.02rem;line-height:1.6}
/* --- El FAQ se abre y se cierra: 17 preguntas abiertas son un muro --------- */
.qa{border-bottom:1px solid var(--linea)}
.qa summary{cursor:pointer;padding:.95rem 2.2rem .95rem 0;position:relative;
font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--titular);
list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'';position:absolute;right:.4rem;top:1.35rem;width:12px;height:12px;
border-right:3px solid var(--bermellon-hondo);border-bottom:3px solid var(--bermellon-hondo);
transform:rotate(45deg);transition:transform .2s var(--t)}
.qa[open] summary::after{transform:rotate(-135deg);top:1.55rem}
.qa summary:hover{color:var(--bermellon-hondo)}
.qa summary:focus-visible{outline:3px solid var(--bermellon-hondo);outline-offset:3px}
.qa p{margin:0 0 1.1rem;max-width:66ch;color:var(--texto-70);line-height:1.72}
@media (max-width:720px){
.semana-rejilla{grid-template-columns:repeat(4,1fr)}
.enchufes{gap:1rem}
}
/* --- El año de Guatapé, dibujado ------------------------------------------ */
/* Un calendario no se lee: se mira. Doce meses; los cuatro con fiesta se
pintan como zócalos y los ocho restantes se quedan en papel. */
.anio{margin:1.8rem 0 2.4rem}
.anio-cabeza h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);margin:0 0 .45rem}
.anio-cabeza p{margin:0 0 1.5rem;color:var(--texto-70);max-width:52ch}
.anio-tira{list-style:none;margin:0;padding:5px;display:grid;
grid-template-columns:repeat(12,1fr);gap:5px;
background:var(--petroleo);border:4px solid var(--petroleo)}
.mes{background:var(--blanco);min-height:8.5rem;display:flex;flex-direction:column;
align-items:stretch;gap:3px;padding:0 0 3px}
.mes-eti{display:block;text-align:center;padding:.4rem 0 .3rem;
font-family:var(--dato);font-size:.68rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--texto-45)}
.mes-eti abbr{text-decoration:none}
.mes--quieto{background:var(--crudo-2)}
.mes--quieto .mes-eti{color:var(--texto-45)}
.mes-fiesta{flex:1;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:.3rem;margin:0 3px;padding:.5rem .2rem;
text-decoration:none;text-align:center;transition:transform .18s var(--t)}
.mes-fiesta:hover{transform:scale(1.05)}
.mes-fiesta:focus-visible{outline:3px solid var(--titular);outline-offset:2px}
.mes-nombre{font-family:var(--dato);font-size:.68rem;font-weight:600;line-height:1.2;
letter-spacing:.02em}
.mes-fiesta--bermellon{background:var(--bermellon-hondo);color:#fff}
.mes-fiesta--azul {background:#2D7DAE;color:#fff}
.mes-fiesta--verde {background:var(--verde);color:var(--titular)}
.mes-fiesta--celeste {background:var(--celeste);color:var(--titular)}
.mes-fiesta--amarillo {background:var(--amarillo);color:var(--titular)}
.mes-fiesta--petroleo {background:var(--petroleo);color:var(--amarillo)}
.anio-detalle{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.9rem;
grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.f{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;
padding:1rem 1.1rem;border-left:5px solid var(--f-color)}
.f-sel{width:54px;height:54px;display:grid;place-items:center;background:var(--f-color);
color:var(--f-tinta);flex-shrink:0}
.f-cuando{margin:0 0 .2rem;font-family:var(--dato);font-size:.7rem;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--texto-45)}
.f-sello{margin-left:.6rem;padding:.1em .5em;background:var(--crudo-2);border-radius:2px;
letter-spacing:.06em;font-size:.92em}
.f h4{margin:0 0 .3rem;font-family:var(--display);font-weight:700;font-size:1.04rem;
color:var(--titular);line-height:1.25}
.f-txt p:last-child{margin:0;font-size:.93rem;color:var(--texto-70);line-height:1.6}
.f--bermellon{--f-color:var(--bermellon-hondo);--f-tinta:#fff;background:rgba(230,57,44,.06)}
.f--azul {--f-color:#2D7DAE;--f-tinta:#fff;background:rgba(61,151,205,.08)}
.f--verde {--f-color:var(--verde);--f-tinta:var(--titular);background:rgba(175,200,97,.14)}
.f--celeste {--f-color:var(--celeste);--f-tinta:var(--titular);background:rgba(155,212,222,.18)}
.f--amarillo {--f-color:var(--amarillo);--f-tinta:var(--titular);background:rgba(247,224,91,.2)}
.f--petroleo {--f-color:var(--petroleo);--f-tinta:var(--amarillo);background:rgba(8,61,67,.07)}
/* ⚠ LA FIGURA DEL CALENDARIO NO HEREDABA SU COLOR (corregido 2026-09-23).
`formas.css` trae `.zoc-fig{color:var(--tinta)}`, y esa regla se aplica AL
PROPIO SVG, así que gana sobre el color que el calendario define por tono en
el elemento padre. Medido: sobre petróleo la figura daba **1,15:1** contra su
campo —invisible—, y las dos celebraciones de ese tono, Feria del Libro y
Carnaval de Fin de Año, se veían como un bloque macizo sin icono. Sobre
bermellón daba 2,75:1, que tampoco es suficiente.
Es la misma trampa que ya mordió dos veces en el workspace: la regla propia
del hijo gana sobre el color heredado del padre, y no hay ningún error.
`_contraste.py` no lo ve porque solo mide TEXTO, no figuras. */
.mes-fiesta .zoc-fig,
.f-sel .zoc-fig{color:inherit}
.anio-pie{margin:1.4rem 0 0;font-size:.9rem;color:var(--texto-45);max-width:60ch}
@media (max-width:860px){
.anio-tira{grid-template-columns:repeat(6,1fr)}
.mes{min-height:7rem}
}
@media (max-width:480px){
.anio-tira{grid-template-columns:repeat(4,1fr)}
}
/* --- Las nueve reglas son una fachada ------------------------------------- */
/* Nueve zócalos en fila, cada uno con su figura y su color: exactamente cómo
una casa de Guatapé cuenta de qué vive. Sin numerar — no son una secuencia. */
.reglas{list-style:none;margin:0;padding:0}
.reglas .zoc-campo{min-height:10.5rem;gap:.85rem}
.reglas .zoc-dato{font-size:clamp(1.05rem,.95rem + .5vw,1.28rem);line-height:1.15}
.reglas .zoc-fig{width:56px;height:56px}
.reglas img.zoc-fig{filter:none}
.zoc--bermellon img.zoc-fig,.zoc--petroleo img.zoc-fig{filter:brightness(0) invert(1)}
.zoc--verde img.zoc-fig,.zoc--celeste img.zoc-fig,.zoc--amarillo img.zoc-fig{
filter:brightness(0) saturate(100%) invert(9%) sepia(28%) saturate(1600%) hue-rotate(155deg)}
/* El texto del campo pintado SIEMPRE toma la tinta del zócalo. Se declara
aquí, al final, porque el markup de las reglas de conducta cambió a
zócalos y las reglas antiguas (.regla p) seguían repintándolo en gris:
«Compra local» y «Cumple las normas» quedaban ilegibles sobre su color. */
.zoc-campo .zoc-dato,.zoc-campo p{color:var(--z-tinta)}
/* Los cuatro verbos se diseñaron para la sección oscura de la home: sus
cifras van en blanco tenue. Puestos sobre papel daban 3,79:1. En
/directorio/ recuperan su superficie. */
.util--oscura{background:var(--hondo);color:var(--bl-72)}
.util--oscura h2,.util--oscura h3{color:var(--blanco)}
.util--oscura .util-entrada{color:var(--bl-72)}
/* Tres restos de la escala de texto, cada uno sobre una superficie distinta */
.verbo .verbo-pie{color:var(--bl-45)}
.oscura .aviso,.util--oscura .aviso{color:var(--bl-72)}
/* El turquesa-hondo es el fondo oscuro más claro del sitio: ni el blanco al
85% pasa AA encima. El texto pequeño que caiga ahí va en blanco puro. */
.verbo--turq .verbo-pie,[style*="turquesa-hondo"] .verbo-pie{color:#fff}
/* Los dos últimos restos de la escala vieja de opacidades */
/* El oficio de cada taller (Sombrillas, Cerámica…) llevaba blanco al 62%
sobre el turquesa de la tarjeta: 3,79:1. */
.verbo-lista--oficio b{color:var(--bl-45)}
/* El aviso del Contador está DENTRO del tablero oscuro, no de la sección
amarilla: un color pensado para papel daba 2,83:1 sobre el titular. */
.tablero .aviso{color:var(--bl-72)}
/* ⚠️ `--turquesa-hondo` #083D43 es el fondo oscuro MÁS CLARO del sitio: ni el
blanco al 85% pasa AA encima (4,14:1). El texto corrido que caiga ahí va en
blanco puro. Si en el futuro hace falta texto tenue sobre esa superficie,
lo que hay que cambiar es la superficie, no la opacidad. */
#directorio.oscura .prosa,#directorio.oscura .prosa p{color:#fff}
/* Un portátil de 13" en 1280×720 —y cualquier pantalla más baja— no da para
el titular a tamaño completo Y la fila de datos. Aquí sí se toca el
titular: vale más que la primera pantalla se lea entera. */
@media (min-width:641px) and (max-height:740px){
.hero h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem)}
.hero-lema{font-size:clamp(1rem,.9rem + .7vw,1.35rem)}
.hero-bajo{margin-top:.7rem}
.hero-cta{margin-top:1rem}
.hero-datos{margin-top:1.1rem;padding-top:.85rem}
}
/* Una celda de grid lleva `min-width:auto` y su contenido la estira desde
dentro: en 320 px las fichas de «Antes de viajar» empujaban la página
22 px a la derecha. Es la misma trampa que ya desbordó la tabla de
residuos. `min-width:0` deja que la celda encoja hasta su columna. */
.detalles > *{min-width:0}
/* ══════════════════════════════════════════════════════════════════════
MEDIDA DE LÍNEA — auditoría responsive del 2026-09-24
══════════════════════════════════════════════════════════════════════
Medido a 1440 px: `.rio-pie` llegaba a **204 caracteres por línea** y el
pie de `.parqueo` a 136. Por encima de ~85 el ojo pierde el renglón al
volver a la izquierda y hay que releer.
Son pies y notas al margen de secciones que no llevaban ancho máximo: el
cuerpo principal sí lo tenía.
⚠ El valor es **62ch y no 72**, y la diferencia importa: `ch` mide el
ancho del glifo «0», que en Bricolage Grotesque es bastante más ancho que
el carácter medio. 72ch daban 715 px y ahí caben ~100 caracteres reales,
no 72. El número se ajustó midiendo el ancho medio del texto con canvas,
no confiando en la unidad. */
.rio-pie,
.historia-pie,
.enchufes-txt,
.dir-campana-pie,
.parqueo p,
.util .env > p,
.semana-pie,
.aviso,
.util-entrada,
.seg-entrada,
.seg-texto{max-width:62ch}
/* ⚠ Este bloque va AL FINAL del archivo a propósito. Puesto arriba no hacía
nada: `.rio-pie` se vuelve a declarar en la línea 418 y ganaba por orden
de cascada. Es la tercera vez en este proyecto que una corrección se
escribe antes que la regla que pretende corregir. */
/* ⚠ DIANAS TÁCTILES — auditoría del 2026-09-24, segunda pasada.
Quedaban tres enlaces por debajo de 24×24: el 123 y el 141 de los bandos
de `/turismo-responsable/` y el enlace a teprotejo.org. Son los canales de
denuncia de explotación infantil y las líneas de emergencia; que se pulsen
a la primera no es un detalle de acabado.
Los del nav se quedaban en 23,5 px entre 1180 y 1340: se les da el píxel
que falta con `padding-block`, sin mover la barra. */
.senal-txt a,
.banda-lista a,
.pie-legal a{display:inline-block;min-height:24px;padding-block:.25rem}
.senal-txt a{padding-inline:.2rem;margin-inline:-.2rem}
.util-lista a,
.util li > a{display:inline-block;min-height:24px;padding-block:.2rem}
@media (min-width:1081px) and (max-width:1400px){
.barra nav a{padding-block:.4em}
}
/* Regla de cierre: TODO enlace de teléfono o correo cumple la diana mínima
de 24×24 (WCAG 2.5.8), venga de donde venga. Se prefiere esto a ir caso
por caso porque son precisamente los enlaces que alguien pulsa con prisa
—una emergencia, una denuncia, una reserva— y porque un número corto
como «141» se queda estrecho por más ancho que tenga su contenedor. */
a[href^="tel:"],
a[href^="mailto:"],
.imp-web a{display:inline-block;min-width:24px;min-height:24px;
padding-block:.25rem;text-align:center}