/* ═══════════════════════════════════════════════════════════════════
   MUNICIPALIDAD DE WINIFREDA — hoja de estilos compartida
   Colores tomados de los archivos de logo entregados por el municipio.
   Una sola hoja para las 10 páginas: si algo cambia, se cambia acá.

   ÍNDICE — cada uno de estos títulos aparece tal cual como comentario
   más abajo; buscalo (Ctrl/Cmd+F) para saltar directo a esa sección.
   Van en el mismo orden en que aparecen en el archivo:

   Base y utilidades → Tipografía de sección → Barra de emergencias
   (fija) → Encabezado → Portada del inicio → Portada de páginas
   internas → Botones → Foto con pie → Carrusel de fotos del hero →
   Curva de la W → Ficha rápida → Accesos rápidos → Tarjetas de "hoy"
   → Agenda → Noticias → Paginación de noticias → Espacio de foto
   pendiente → Banda fotográfica → Mapa de puntos (Google My Maps) →
   Bloques oscuros (turismo, historia) → Parque Acuático → Fiesta del
   Mate / cifras → Directorio de teléfonos → Gobierno → Línea de
   tiempo → Tabla → Contacto → Pie → WhatsApp flotante → Adaptación a
   pantallas (media queries) → Saltar la navegación → Menú desplegable
   del encabezado → Filtro por rubro → Rejilla del directorio → Ficha
   ampliada

   CONVENCIÓN: reglas en una sola línea por selector (no es minificado
   por build, es el estilo elegido a mano). Los :root son las únicas
   variables del sitio — cambiá un color o tamaño ahí, nunca hardcodeado
   dentro de una regla.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Las cuatro tintas son las del manual de marca (v1.0 2024), pág. 11,
     columna HTML. No inventar tonos intermedios: el manual define dos
     degradés de DOS paradas, no de tres. */
  --azul:#272E63; --azul-medio:#233A83;
  --ambar:#F49911; --coral:#EB5B47;
  --degrade:linear-gradient(100deg,var(--ambar) 0%,var(--coral) 100%);
  /* Azules más profundos para los bloques oscuros: no están en el manual,
     se derivan del azul oficial bajándole la luminosidad y dejando el
     matiz (233°) y la saturación intactos, así la familia no se abre. */
  --azul-profundo:#1E234B; --azul-noche:#151935;
  /* El coral y el ámbar de marca son para fondos, bordes, íconos y texto
     sobre azul. Sobre fondo claro no llegan al contraste que pide la WCAG
     (el coral oficial da 3,15 sobre arena y hace falta 4,5), así que el
     texto usa estas dos variantes más oscuras: mismo matiz y saturación,
     4,6 de contraste sobre arena y sobre blanco. El manual prohíbe alterar
     los colores del LOGO (pág. 14), no los de un párrafo. */
  --coral-texto:#D32E17;
  --degrade-texto:linear-gradient(100deg,#9E6107 0%,#D32E17 100%);
  --arena:#F7F5F0; --arena-media:#EFEBE2; --arena-borde:#E2DCCE; --blanco:#FFFFFF;
  --tinta:#191E40; --tinta-suave:#5A5E7C; --tinta-tenue:#6D6F81;
  --verde:#25D366;
  /* El manual (pág. 12) pide Abril Display ExtraBold Italic + Montserrat.
     Abril Display es comercial y no tiene licencia web; se probó el corte
     libre (Abril Fatface) y se descartó: es una fatface redonda, mucho más
     pesada, y a tamaño de titular no leía igual. Se mantienen estas dos. */
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --texto:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r:14px; --r-lg:22px;
  --sombra:0 1px 2px rgba(27,30,61,.04),0 8px 24px -12px rgba(27,30,61,.18);
  --sombra-alta:0 2px 4px rgba(27,30,61,.06),0 22px 48px -20px rgba(27,30,61,.30);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ─── Tipografías (alojadas en el propio sitio) ───
   Antes se cargaban desde fonts.googleapis.com: cada visita mandaba la IP
   del vecino a Google sin necesidad. Son fuentes variables (un solo
   archivo cubre todo el rango de peso), subset latin — cubre español
   sin problema — descargadas de Google Fonts (licencia SIL OFL). */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('fuentes/manrope-var.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fuentes/playfair-display-normal-var.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:500 700;
  font-display:swap;
  src:url('fuentes/playfair-display-italic-var.woff2') format('woff2');
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--arena);color:var(--tinta);font-family:var(--texto);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.1;font-weight:600;letter-spacing:-.02em}
p{margin:0}
button{font:inherit;cursor:pointer}
table{border-collapse:collapse;width:100%}

.env{width:min(1220px,100% - 3rem);margin-inline:auto}
.env-angosto{width:min(880px,100% - 3rem);margin-inline:auto}
@media(max-width:640px){.env,.env-angosto{width:min(1220px,100% - 2rem)}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─── Tipografía de sección ─── */
.rotulo{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--coral-texto);margin-bottom:1rem}
.rotulo::before{content:"";width:26px;height:2px;background:var(--degrade);border-radius:2px}
.rotulo.claro{color:var(--ambar)}
.titulo-seccion{font-family:var(--display);font-size:clamp(2rem,4.2vw,3.1rem);font-weight:600;letter-spacing:-.025em;color:var(--azul)}
.titulo-seccion em{font-style:italic;background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.seccion{padding:clamp(4rem,8vw,6.5rem) 0}
.seccion.compacta{padding:clamp(2.8rem,5vw,4rem) 0}
.encabezado-seccion{max-width:62ch;margin-bottom:2.8rem}
.encabezado-seccion p{color:var(--tinta-suave);margin-top:.9rem;font-size:1.02rem}
.prosa p{color:var(--tinta-suave);margin-bottom:1.1rem;max-width:68ch}
.prosa p:last-child{margin-bottom:0}
.prosa b{color:var(--azul)}

/* Aparición al hacer scroll. Se oculta SOLO si JavaScript está activo
   (clase .js en <html>): si el script falla, el contenido se ve igual. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.9,.3,1),transform .7s cubic-bezier(.22,.9,.3,1)}
.js .reveal.visible{opacity:1;transform:none}

/* ─── Barra de emergencias (fija) ─── */
.emergencias{background:var(--azul-noche);color:#EAEAF4;font-size:.83rem;position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,.08)}
.emergencias .env{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;padding:.55rem 0}
.emergencias .marca{display:flex;align-items:center;gap:.5rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.68rem;color:var(--ambar)}
.pulso{width:7px;height:7px;border-radius:50%;background:var(--coral);animation:latir 2.4s infinite}
@keyframes latir{0%{box-shadow:0 0 0 0 rgba(235,91,71,.6)}70%{box-shadow:0 0 0 9px rgba(235,91,71,0)}100%{box-shadow:0 0 0 0 rgba(235,91,71,0)}}
.emergencias a{color:#EAEAF4;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;padding:.15rem 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.emergencias a:hover{color:var(--ambar);border-bottom-color:var(--ambar)}
.emergencias a b{font-weight:500;opacity:.72;font-size:.8rem}
.emergencias .tel{font-variant-numeric:tabular-nums;font-weight:700}
/* En celular el icono acompaña al NOMBRE del servicio, no al número: a este
   tamaño una forma sola nunca alcanza para distinguir hospital de bomberos
   de policía. Sin opacidad encima, que a 16px enturbiaba el trazo. */
.emergencias .ico-emer{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.9}

/* ─── Encabezado ───
   El top pegajoso toma el alto REAL de la barra de emergencias (lo mide
   scripts.js y lo guarda en --emergencias-h). En celulares angostos esa
   barra pasa a dos líneas y crece; con un valor fijo el encabezado le
   quedaba montado encima y tapaba el botón de menú. El 46px es el
   respaldo para el primer instante antes de que corra el JS. */
.cabecera{background:var(--azul);position:sticky;top:var(--emergencias-h,46px);z-index:55}
.cabecera .env{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem 0}
.logo{display:flex;align-items:center;gap:.85rem;text-decoration:none;flex-shrink:0}
.logo img{height:44px;width:auto}
.logo .lock{display:flex;flex-direction:column;line-height:1}
.logo .l1{font-size:.6rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.logo .l2{font-family:var(--display);font-style:italic;font-weight:600;font-size:1.48rem;color:#fff;margin-top:.2rem}
nav.principal ul{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0}
nav.principal a{color:rgba(255,255,255,.86);text-decoration:none;font-size:.88rem;font-weight:600;position:relative;padding:.35rem 0;transition:color .2s;white-space:nowrap}
nav.principal a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--degrade);border-radius:2px;transition:right .32s cubic-bezier(.22,.9,.3,1)}
nav.principal a:hover{color:#fff}
nav.principal a:hover::after{right:0}
nav.principal a.activo{color:#fff}
nav.principal a.activo::after{right:0}
.hamburguesa{display:none;background:none;border:0;color:#fff;padding:.45rem}
.hamburguesa svg{display:block}
.panel-movil{display:none;background:var(--azul-profundo);border-top:1px solid rgba(255,255,255,.1)}
/* La cabecera es sticky, así que si el panel abierto mide más que el resto
   de la pantalla, el scroll de la página no alcanza a destapar el final: la
   cabecera se vuelve a pegar arriba en cuanto se mueve un pixel. Por eso el
   panel tiene techo propio (lo que queda de pantalla debajo de la barra de
   emergencias y de la fila del logo, medido en scripts.js) y scroll interno
   cuando "Instituciones" está desplegado y no entra todo. */
.panel-movil.abierto{
  display:block;
  max-height:calc(100vh - var(--emergencias-h,46px) - var(--barra-h,73px));
  max-height:calc(100dvh - var(--emergencias-h,46px) - var(--barra-h,73px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.panel-movil ul{list-style:none;margin:0;padding:.6rem 0}
.panel-movil a{display:block;color:#fff;text-decoration:none;font-weight:600;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.panel-movil li:last-child a{border-bottom:0}

/* ─── Portada del inicio ─── */
.portada{position:relative;background:var(--azul);overflow:hidden;padding:clamp(3.5rem,7vw,6rem) 0 clamp(7rem,11vw,10rem)}
.portada::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 12% -10%,rgba(46,58,140,.9) 0%,transparent 55%),radial-gradient(60% 90% at 88% 0%,rgba(37,54,136,.75) 0%,transparent 60%),radial-gradient(90% 70% at 50% 115%,rgba(18,22,60,.85) 0%,transparent 60%)}
.portada::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.marca-agua{position:absolute;right:-6%;top:48%;transform:translateY(-50%);width:min(58%,720px);opacity:.07;pointer-events:none}
.portada .env{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.antetitulo{font-size:.75rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ambar);margin-bottom:1.4rem;display:block}
.portada h1{font-family:var(--display);color:#fff;font-weight:600;font-size:clamp(2.9rem,5.8vw,4.9rem);line-height:1;letter-spacing:-.035em}
.portada h1 em{font-style:italic;display:block;line-height:1.14;padding-bottom:.06em;background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.bajada{color:rgba(255,255,255,.78);font-size:clamp(1.02rem,1.5vw,1.16rem);max-width:44ch;margin-top:1.7rem;font-weight:300;line-height:1.7}
.acciones{display:flex;gap:.9rem;margin-top:2.4rem;flex-wrap:wrap}

/* Entrada del hero de la portada: es lo único de la home que hasta ahora
   aparecía de golpe, mientras el resto de las secciones hace fade-in al
   scrollear. Encadenado (no junto) para que el ojo tenga un recorrido.
   Gated por .js: sin JavaScript se ve completo desde el primer instante. */
.js .portada .antetitulo,
.js .portada h1,
.js .portada .bajada,
.js .portada .acciones,
.js .portada .retrato{opacity:0;animation:entra-portada .85s cubic-bezier(.22,.9,.3,1) forwards}
.js .portada .antetitulo{animation-delay:.05s}
.js .portada h1{animation-delay:.16s}
.js .portada .bajada{animation-delay:.32s}
.js .portada .acciones{animation-delay:.46s}
.js .portada .retrato{animation-delay:.38s}
@keyframes entra-portada{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ─── Portada de páginas internas ─── */
.hero-int{position:relative;background:var(--azul);overflow:hidden;padding:clamp(2.2rem,4vw,3.2rem) 0 clamp(4rem,7vw,6rem);color:#fff}
.hero-int::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 130% at 10% -20%,rgba(46,58,140,.9) 0%,transparent 58%),radial-gradient(70% 90% at 95% 10%,rgba(37,54,136,.7) 0%,transparent 62%)}
.hero-int::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.15;mix-blend-mode:overlay;pointer-events:none}
.hero-int .env{position:relative;z-index:2}
.hero-int.con-foto>picture{position:absolute;inset:0;z-index:0}
.hero-int.con-foto>picture img{width:100%;height:100%;object-fit:cover}
.hero-int.con-foto::before{background:linear-gradient(180deg,rgba(26,31,82,.72) 0%,rgba(18,22,60,.9) 100%);z-index:1}
.hero-int h1{font-family:var(--display);font-size:clamp(2.3rem,5vw,3.7rem);font-weight:600;letter-spacing:-.03em;color:#fff}
.hero-int h1 em{font-style:italic;color:var(--ambar)}
.hero-int .lead{color:rgba(255,255,255,.78);font-size:clamp(1rem,1.4vw,1.13rem);max-width:60ch;margin-top:1.2rem;font-weight:300;line-height:1.7}
.miga{display:flex;gap:.55rem;align-items:center;font-size:.78rem;color:rgba(255,255,255,.6);margin-bottom:1.4rem;flex-wrap:wrap}
.miga a{color:rgba(255,255,255,.75);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.miga a:hover{color:var(--ambar);border-bottom-color:var(--ambar)}
.miga span{opacity:.5}

/* ─── Botones ─── */
.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;padding:.92rem 1.7rem;border-radius:99px;font-weight:700;font-size:.93rem;transition:transform .22s cubic-bezier(.22,.9,.3,1),box-shadow .22s,background .22s;border:0}
.btn-primario{background:var(--degrade);color:#fff;box-shadow:0 10px 30px -12px rgba(240,128,44,.85)}
.btn-primario:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(240,128,44,.95)}
.btn-fantasma{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-fantasma:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{transform:translateY(-2px);background:var(--azul-medio)}
.btn-linea{background:transparent;color:var(--azul);border:1px solid var(--arena-borde)}
.btn-linea:hover{border-color:var(--coral);color:var(--coral-texto);transform:translateY(-2px)}
.mas{display:inline-flex;align-items:center;gap:.5rem;color:var(--coral-texto);text-decoration:none;font-weight:700;font-size:.92rem;margin-top:2rem}
.mas svg{transition:transform .25s}
.mas:hover svg{transform:translateX(4px)}
.mas.claro{color:var(--ambar)}

/* ─── Foto con pie ─── */
.retrato{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 34px 70px -34px rgba(0,0,0,.7)}
.retrato img{width:100%;height:auto;aspect-ratio:1.1;object-fit:cover}
.retrato figcaption{position:absolute;left:0;right:0;bottom:0;padding:3rem 1.5rem 1.2rem;background:linear-gradient(to top,rgba(18,22,60,.94) 12%,transparent);font-size:.83rem;color:rgba(255,255,255,.72);line-height:1.45}
.retrato figcaption b{display:block;color:#fff;font-weight:700;font-size:.95rem;margin-bottom:.15rem}

/* Variantes de proporción del retrato */
.retrato.ancha img{aspect-ratio:16/9}
.retrato.media img{aspect-ratio:3/2}
.retrato.vertical img{aspect-ratio:4/5}
/* Rellena la celda de la grilla en la que está (se estira a la par del bloque vecino) */
.retrato.rellena{height:100%;min-height:300px}
.retrato.rellena picture{display:block;height:100%}
.retrato.rellena img{height:100%;aspect-ratio:auto}
/* Sobre fondo claro el borde blanco no se ve: se usa el de arena */
.retrato.clara{border-color:var(--arena-borde);box-shadow:var(--sombra)}

/* ─── Carrusel de fotos del hero ───
   Todas las fotos ocupan el mismo lugar (position:absolute) y se
   cruzan con opacity. El alto lo da el aspect-ratio del contenedor,
   no cada imagen, porque si no la que está atrás con otra proporción
   deforma la caja al cargar. */
.retrato.carrusel{aspect-ratio:1.1}
.carrusel-item{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;transition:opacity 1.2s ease}
.carrusel-item.activa{opacity:1;pointer-events:auto;z-index:1}
.retrato.carrusel .carrusel-item img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block}
/* Le hace lugar a la fila de puntos, que si no queda pisando el pie de foto */
.js .retrato.carrusel figcaption{padding-bottom:2.7rem}
.carrusel-puntos{position:absolute;left:0;right:0;bottom:0;z-index:2;display:none;justify-content:center;gap:.5rem;padding:0 1.5rem 1.15rem}
.js .carrusel-puntos{display:flex}
.carrusel-punto{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.4);cursor:pointer;transition:background .25s,width .25s}
.carrusel-punto:hover{background:rgba(255,255,255,.7)}
.carrusel-punto.activo{width:22px;background:var(--ambar)}

/* Miniatura de noticia */
.nota .miniatura{margin:0;border-bottom:1px solid var(--arena-borde);background:var(--arena-media);overflow:hidden}
.nota .miniatura img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.nota:hover .miniatura img{transform:scale(1.04)}

/* ─── Mini-carrusel: noticias con más de una foto (p. ej. un "antes y
   después"). Mismo truco que el carrusel del hero (todas las fotos
   apiladas, se cruzan con opacity), pero sin rotar solo: acá la
   flecha la maneja quien mira. Sin JS se ve fija la primera foto. ─── */
.miniatura.mini-carrusel{position:relative;aspect-ratio:4/3}
.mini-carrusel-item{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s ease}
.mini-carrusel-item.activa{opacity:1;z-index:1}
.nota .miniatura.mini-carrusel img{height:100%}
.mini-carrusel-flecha{display:none;position:absolute;top:50%;right:.7rem;z-index:2;width:34px;height:34px;padding:0;border:0;border-radius:99px;background:rgba(15,20,50,.55);color:#fff;align-items:center;justify-content:center;cursor:pointer;transform:translateY(-50%);transition:background .2s,transform .2s}
.js .mini-carrusel-flecha{display:flex}
.mini-carrusel-flecha:hover{background:rgba(15,20,50,.8)}
.mini-carrusel-flecha svg{width:18px;height:18px}
.mini-carrusel-contador{display:none;position:absolute;left:.7rem;bottom:.7rem;z-index:2;background:rgba(15,20,50,.55);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:.2rem .55rem;border-radius:99px}
.js .mini-carrusel-contador{display:block}

/* ─── Curva de la W ─── */
.curva{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0}
.curva svg{width:100%;height:clamp(50px,6vw,110px);display:block}

/* ─── Ficha rápida ─── */
.ficha .env{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--arena-borde);border-radius:var(--r);overflow:hidden;margin-top:-2.5rem;position:relative;z-index:10;box-shadow:var(--sombra-alta)}
.dato{background:var(--blanco);padding:1.6rem 1.4rem;text-align:center}
.dato .n{font-family:var(--display);font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:600;color:var(--azul);line-height:1}
.dato .l{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-tenue);margin-top:.5rem}

/* ─── Accesos rápidos ─── */
.accesos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.acceso{position:relative;background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r);padding:1.9rem 1.7rem 1.7rem;text-decoration:none;color:inherit;overflow:hidden;transition:transform .28s cubic-bezier(.22,.9,.3,1),box-shadow .28s,border-color .28s;display:block}
.acceso::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--degrade);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.9,.3,1)}
.acceso:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta);border-color:transparent}
.acceso:hover::before{transform:scaleX(1)}
.acceso .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(244,148,10,.13),rgba(235,91,71,.09));margin-bottom:1.2rem}
.acceso .ico svg{width:22px;height:22px;stroke:var(--coral);fill:none;stroke-width:1.7}
.acceso h3{font-size:1.14rem;font-weight:700;color:var(--azul)}
.acceso p{font-size:.88rem;color:var(--tinta-suave);margin-top:.4rem;line-height:1.55}
.acceso .flecha{position:absolute;right:1.5rem;bottom:1.5rem;color:var(--coral-texto);opacity:0;transform:translateX(-6px);transition:opacity .28s,transform .28s}
.acceso:hover .flecha{opacity:1;transform:none}

/* ─── Tarjetas de "hoy" ─── */
.hoy{background:var(--arena-media);border-block:1px solid var(--arena-borde)}
.par{display:grid;grid-template-columns:1fr 1.25fr;gap:1.1rem}
.tarjeta{background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r);padding:1.9rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem}
.tarjeta .cab{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tarjeta .tit{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-tenue)}
.clima-n{font-family:var(--display);font-size:3.6rem;font-weight:600;color:var(--azul);line-height:1}
.clima-d{color:var(--tinta-suave);font-size:.95rem}
.clima-mm{display:flex;gap:1.4rem;font-size:.86rem;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.clima-mm b{color:var(--azul);font-weight:700}
.clima-prox{display:flex;flex-direction:column;gap:.35rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid rgba(0,0,0,.08)}
.clima-prox-dia{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;font-size:.82rem;color:var(--tinta-suave)}
.clima-prox-dia .cpd-nombre{flex:0 0 auto;font-weight:600;color:var(--tinta)}
.clima-prox-dia .cpd-desc{flex:1 1 auto;text-align:left}
.clima-prox-dia .cpd-mm{flex:0 0 auto;font-variant-numeric:tabular-nums}
.clima-prox-dia .cpd-mm b{color:var(--azul);font-weight:700}
.farmacia{background:var(--azul);border-color:transparent;position:relative;overflow:hidden}
.farmacia::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.12;pointer-events:none}
.farmacia>*{position:relative;z-index:2}
.farmacia .tit{color:var(--ambar)}
.farmacia .nombre{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:600;color:#fff;line-height:1.05;font-style:italic}
.farmacia .meta{color:rgba(255,255,255,.7);font-size:.9rem;margin-top:.7rem}
.farmacia .hasta{display:inline-flex;align-items:center;gap:.5rem;background:rgba(244,148,10,.16);border:1px solid rgba(244,148,10,.32);color:var(--ambar);border-radius:99px;padding:.4rem .95rem;font-size:.8rem;font-weight:700;white-space:nowrap}
.farmacia .resto{font-size:.83rem;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.12);padding-top:.9rem}
.farmacia .enlace{color:var(--ambar);text-decoration:none;font-weight:700;font-size:.88rem;border-bottom:1px solid rgba(244,148,10,.4);padding-bottom:.1rem;width:fit-content}
.farmacia .enlace:hover{border-bottom-color:var(--ambar)}

/* Tarjetón de farmacia de turno (página propia) */
.turno-grande{background:var(--azul);color:#fff;border-radius:var(--r-lg);padding:clamp(2rem,5vw,3.5rem);position:relative;overflow:hidden;text-align:center}
.turno-grande::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.12;pointer-events:none}
.turno-grande>*{position:relative;z-index:2}
.turno-grande .k{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ambar)}
.turno-grande .nom{font-family:var(--display);font-style:italic;font-size:clamp(2.2rem,6vw,4rem);font-weight:600;line-height:1.05;margin-top:.8rem}
/* Ojo: .sub también existe como subtítulo de sección (en serif). Acá se
   reescribe la tipografía a propósito: las direcciones y los números se leen
   mejor en la sans. */
.turno-grande .sub{font-family:var(--texto);font-weight:500;color:rgba(255,255,255,.72);margin-top:1rem;font-size:1.02rem}
.turno-grande #turnoDir{font-weight:700;color:#fff;font-size:1.15rem;margin-top:.9rem}
.proximos{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:.7rem}
.proximos li{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r);padding:1rem 1.3rem}
.proximos .f{font-weight:700;color:var(--coral-texto);font-size:.88rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.proximos .q{font-weight:700;color:var(--azul)}

/* ─── Agenda ─── */
.agenda-caja{background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r-lg);overflow:hidden}
.agenda-cab{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.6rem 2rem;border-bottom:1px solid var(--arena-borde);background:var(--arena)}
.agenda-cab .mes{font-family:var(--display);font-size:1.7rem;font-weight:600;color:var(--azul);text-transform:capitalize}
.agenda-cab .anio{color:var(--tinta-tenue);font-weight:600;font-size:.9rem;letter-spacing:.1em}
/* Fila de día. Dos columnas: la fecha y la lista de eventos de esa fecha.
   El municipio publica su agenda con el número de día grande y el nombre
   del día debajo; se replica ese formato. */
.dia{display:grid;grid-template-columns:96px 1fr;align-items:start;gap:1.5rem;padding:1.3rem 2rem;border-bottom:1px solid var(--arena-media);transition:background .22s;position:relative}
.dia:last-child{border-bottom:0}
.dia:hover{background:var(--arena)}
.dia::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--degrade);transform:scaleY(0);transition:transform .28s cubic-bezier(.22,.9,.3,1)}
.dia:hover::before{transform:scaleY(1)}
.dia.es-hoy{background:#FFFBF2}
.dia.es-hoy::before{transform:scaleY(1)}
.dia .fecha-dia{text-align:right;line-height:1}
.dia .num{display:block;font-family:var(--display);font-size:2.6rem;font-weight:600;line-height:.95;background:var(--degrade-texto);-webkit-background-clip:text;background-clip:text;color:transparent}
.dia .dsem{display:block;font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-tenue);margin-top:.35rem}
.eventos{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.ev{display:grid;grid-template-columns:1fr auto;gap:.3rem .9rem;align-items:baseline}
.ev-t{grid-column:1;font-weight:600;color:var(--azul);font-size:1.03rem;line-height:1.35}
.ev .chip{grid-column:2;grid-row:1}
.ev small{grid-column:1;font-weight:500;color:var(--tinta-suave);font-size:.85rem;line-height:1.5}
.chip{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:.34rem .78rem;border-radius:99px;white-space:nowrap}
.chip.local{background:rgba(235,91,71,.12);color:var(--coral-texto)}
.chip.efem{background:rgba(38,46,110,.08);color:var(--tinta-suave)}
.chip.hoy{background:var(--degrade);color:#fff}
.agenda-vacia{padding:2.5rem 2rem;text-align:center;color:var(--tinta-suave)}
.anio-completo{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}

/* ─── Noticias ─── */
.noticias{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.nota{background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.22,.9,.3,1),box-shadow .28s}
.nota:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.nota .cuerpo{padding:1.5rem}
.nota .fecha{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--coral-texto)}
/* h2 y h3 juntos: en la portada las notas cuelgan de un título de sección
   (van en h3) y en la página de noticias cuelgan del h1 (van en h2). */
.nota h2,.nota h3{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--azul);margin-top:.6rem;line-height:1.3}
.nota p{font-size:.9rem;color:var(--tinta-suave);margin-top:.6rem;line-height:1.6}
/* Las notas fuera de la página actual se ocultan con el atributo hidden.
   Hace falta declararlo porque .nota es display:flex y le gana al
   display:none que el navegador aplica por su cuenta. */
.nota[hidden]{display:none}

/* ─── Paginación de noticias ─── */
/* El paginador lo arma el JavaScript. Si el script no corre, no existe:
   se ven todas las notas, que es el comportamiento correcto de reserva. */
.paginacion{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem 1rem;margin-top:2.8rem}
.pag-flecha{display:inline-flex;align-items:center;gap:.55rem;background:var(--blanco);border:1px solid var(--arena-borde);border-radius:99px;padding:.6rem 1.15rem;color:var(--azul);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:var(--sombra);transition:transform .25s cubic-bezier(.22,.9,.3,1),box-shadow .25s,border-color .25s,color .25s}
.pag-flecha svg{width:15px;height:15px;stroke:var(--coral);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.22,.9,.3,1)}
.pag-flecha.atras svg{transform:scaleX(-1)}
.pag-flecha:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--sombra-alta);border-color:rgba(235,91,71,.45);color:var(--coral-texto)}
.pag-flecha:hover:not(:disabled) svg{transform:translateX(3px)}
.pag-flecha.atras:hover:not(:disabled) svg{transform:scaleX(-1) translateX(3px)}
.pag-flecha:disabled{opacity:.34;box-shadow:none;cursor:default}
.pag-numeros{display:flex;align-items:center;gap:.3rem}
.pag-num{width:42px;height:42px;display:grid;place-items:center;background:transparent;border:1px solid transparent;border-radius:12px;color:var(--tinta-suave);font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;transition:background .22s,color .22s,border-color .22s,box-shadow .28s}
.pag-num:hover{background:var(--blanco);border-color:var(--arena-borde);color:var(--azul)}
.pag-num[aria-current="page"]{background:var(--azul);border-color:var(--azul);color:#fff;box-shadow:0 8px 20px -10px rgba(38,46,110,.8)}
.pag-salto{width:26px;text-align:center;color:var(--tinta-tenue);font-weight:700;letter-spacing:.05em;user-select:none}
/* Renglón de conteo, con los mismos guiones en degradé que los rótulos */
.pag-conteo{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1.1rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-tenue)}
.pag-conteo::before,.pag-conteo::after{content:"";width:26px;height:2px;border-radius:2px;background:var(--degrade);opacity:.5}
/* Entrada escalonada de la tanda nueva. Se usa fill-mode backwards (no both)
   a propósito: al terminar, la tarjeta vuelve a sus estilos normales y el
   translateY del :hover sigue funcionando. */
@keyframes entra-nota{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.noticias.pasando .nota{animation:entra-nota .5s cubic-bezier(.22,.9,.3,1) backwards;animation-delay:calc(var(--i,0) * 65ms)}

/* ─── Espacio de foto pendiente ─── */
.foto{position:relative;background:linear-gradient(150deg,var(--arena-media),var(--arena));border:1px dashed rgba(235,91,71,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.6rem 1.2rem;gap:.5rem;min-height:190px}
.foto svg{width:26px;height:26px;stroke:var(--coral);fill:none;opacity:.75}
.foto .et{font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-texto)}
.foto .desc{font-size:.85rem;color:var(--tinta-suave);max-width:26ch;line-height:1.5}
.nota .foto{border-radius:0;border:0;border-bottom:1px dashed var(--arena-borde)}
.foto.oscura{background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border-color:rgba(244,148,10,.45)}
.foto.oscura .desc{color:rgba(255,255,255,.62)}
.foto.oscura svg{stroke:var(--ambar)}
.foto.oscura .et{color:var(--ambar)}

/* ─── Banda fotográfica ─── */
.banda{position:relative;overflow:hidden;color:#fff;text-align:center;min-height:clamp(290px,36vw,430px);display:grid;place-items:center}
.banda>picture{position:absolute;inset:0}
.banda>picture img{width:100%;height:100%;object-fit:cover}
/* El portal de acceso tiene el cartel en el tercio superior de la foto:
   se corre el encuadre hacia arriba para que no quede fuera del recorte. */
.banda.acceso>picture img{object-position:center 42%}
.banda::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,31,82,.46) 0%,rgba(18,22,60,.82) 100%)}
.banda .env{position:relative;z-index:2;padding:3rem 0}
.banda h2{font-family:var(--display);font-size:clamp(1.75rem,3.8vw,2.9rem);font-weight:600;letter-spacing:-.025em}
.banda h2 em{font-style:italic;color:var(--ambar)}
.banda p{color:rgba(255,255,255,.76);margin-top:1rem;font-size:1.02rem;max-width:52ch;margin-inline:auto}

/* ─── Mapa de puntos (Google My Maps) ───────────────────────────────
   Se resuelve como un "plano municipal": trama de plano técnico de fondo
   que se desvanece hacia abajo, y el mapa montado en un marco con chapa
   superior (título + coordenadas) y cartela al pie. */
.mapa-seccion{position:relative;background:var(--arena-media);overflow:hidden;border-top:1px solid var(--arena-borde);border-bottom:1px solid var(--arena-borde)}
.mapa-seccion::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(38,46,110,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(38,46,110,.06) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(125% 88% at 50% 0%,#000 18%,transparent 76%);
          mask-image:radial-gradient(125% 88% at 50% 0%,#000 18%,transparent 76%);
}
.mapa-seccion .env{position:relative;z-index:2}
.mapa-caja{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
.mapa-intro .titulo-seccion{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.mapa-intro>p{color:var(--tinta-suave);margin-top:.9rem;font-size:1.02rem;max-width:40ch}
.mapa-tips{list-style:none;margin:1.7rem 0 0;padding:0}
.mapa-tips li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;padding:.72rem 0;border-bottom:1px dashed var(--arena-borde);font-size:.9rem;color:var(--tinta-suave)}
.mapa-tips li:last-child{border-bottom:0}
.mapa-tips b{color:var(--azul);font-weight:700}
.mapa-tips svg{width:17px;height:17px;flex:none;margin-top:.2rem;fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.mapa-marco{margin:0;border-radius:var(--r-lg);background:var(--blanco);border:1px solid var(--arena-borde);box-shadow:var(--sombra-alta);overflow:hidden}
.mapa-barra{display:flex;align-items:center;gap:.7rem;padding:.75rem 1.15rem;background:var(--azul-noche);color:#EAEAF4}
.mapa-barra .chincheta{width:8px;height:8px;flex:none;border-radius:50%;background:var(--coral);animation:latir 2.4s infinite}
.mapa-barra .mapa-tit{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.mapa-barra .mapa-coord{margin-left:auto;font-size:.72rem;font-variant-numeric:tabular-nums;color:rgba(234,234,244,.6);white-space:nowrap}
.mapa-lienzo{position:relative;aspect-ratio:16/11;background:var(--arena-media)}
.mapa-lienzo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mapa-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.4rem;padding:.85rem 1.15rem;border-top:1px dashed var(--arena-borde);font-size:.8rem;color:var(--tinta-tenue)}
.mapa-pie .mas{margin-top:0;font-size:.85rem}

/* ─── Bloques oscuros (turismo, historia) ─── */
.oscura-seccion{position:relative;background:var(--azul-profundo);color:#fff;overflow:hidden}
.oscura-seccion::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,22,60,.65) 0%,rgba(18,22,60,0) 26%),radial-gradient(65% 70% at 88% 34%,rgba(235,91,71,.17) 0%,transparent 62%),radial-gradient(60% 90% at 8% 100%,rgba(46,58,140,.85) 0%,transparent 60%)}
.oscura-seccion::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.15;mix-blend-mode:overlay;pointer-events:none}
.oscura-seccion .env,.oscura-seccion .env-angosto{position:relative;z-index:2}
.oscura-seccion .titulo-seccion{color:#fff}
.oscura-seccion .encabezado-seccion p{color:rgba(255,255,255,.68)}

/* ─── Parque Acuático ─── */
.estrella-caja{display:grid;grid-template-columns:1.15fr .85fr;gap:1.1rem;margin-bottom:1.1rem}
.parque{background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(244,148,10,.32);border-radius:var(--r-lg);padding:clamp(1.8rem,3vw,2.6rem);position:relative;overflow:hidden}
.parque::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.1;pointer-events:none}
.parque>*{position:relative;z-index:2}
.insignia{display:inline-block;background:var(--degrade);color:#fff;font-size:.63rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:.36rem .8rem;border-radius:99px;margin-bottom:1.1rem}
.parque h2,.parque h3{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.02em;color:#fff}
.parque .desc-p{color:rgba(255,255,255,.74);margin-top:.9rem;max-width:46ch}
.datos-parque{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.8rem}
/* Variante de tres columnas (Vivero, en turismo.html). Solo de min-width
   761px para arriba: abajo de ahí manda la regla de una columna del media
   query de más abajo, que si no esta la pisa por especificidad y las tres
   columnas quedan apretadas y desbordan la página en el celular. */
@media(min-width:761px){
  .datos-parque.tres{grid-template-columns:repeat(3,1fr)}
}
.dp{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:.85rem 1rem}
.dp .k{font-size:.63rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ambar)}
.dp .v{font-weight:700;font-size:.95rem;margin-top:.25rem;color:#fff}
.dp .v small{display:block;font-weight:500;font-size:.8rem;color:rgba(255,255,255,.6)}
.dp .v a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.atracciones{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.atracciones li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:.42rem .9rem;font-size:.83rem;color:rgba(255,255,255,.85)}
.destinos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.destino{position:relative;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:#fff;border:1px dashed rgba(244,148,10,.34);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));padding:1.8rem;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;transition:transform .3s cubic-bezier(.22,.9,.3,1),border-color .3s,background .3s}
.destino:hover{transform:translateY(-5px);border-color:rgba(244,148,10,.7);background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04))}
.destino .et{font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ambar);margin-bottom:.7rem}
.destino h3{font-family:var(--display);font-size:1.5rem;font-weight:600}
.destino p{font-size:.87rem;color:rgba(255,255,255,.7);margin-top:.5rem}
.destino .tel-d{margin-top:.9rem;font-size:.85rem;font-weight:700;color:var(--ambar)}

/* ─── Fiesta del Mate / cifras ─── */
.mate-caja{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.linea-t{list-style:none;margin:1.8rem 0 0;padding:0}
.linea-t li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:.75rem 0;border-bottom:1px solid var(--arena-borde)}
.linea-t li:last-child{border-bottom:0}
.linea-t .p{font-family:var(--display);font-weight:600;color:var(--coral-texto);font-size:1.05rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.linea-t .d{color:var(--tinta-suave);font-size:.93rem}
.cifra{background:var(--azul);color:#fff;border-radius:var(--r-lg);padding:clamp(1.8rem,3vw,2.6rem);position:relative;overflow:hidden}
.cifra::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.12}
.cifra>*{position:relative;z-index:2}
.cifra .g{font-family:var(--display);font-size:clamp(3rem,7vw,4.6rem);font-weight:600;line-height:1;background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.05em}
.cifra .g-l{font-size:.95rem;color:rgba(255,255,255,.75);margin-top:.4rem}
.cifra hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:1.6rem 0}
.cifra p{color:rgba(255,255,255,.78);font-size:.95rem}
.cifra p b{color:#fff}

/* ─── Directorio de teléfonos ─── */
.grupo-dir{margin-bottom:2.6rem}
.grupo-dir:last-child{margin-bottom:0}
.grupo-dir h2,.grupo-dir h3{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--azul);margin-bottom:1.1rem;display:flex;align-items:center;gap:.75rem}
.grupo-dir svg{width:21px;height:21px;stroke:var(--coral);fill:none;stroke-width:1.8;flex-shrink:0}
.telefonos{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.telefonos.dos{grid-template-columns:repeat(2,1fr)}
.telefono{background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r);padding:1.1rem 1.3rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.2rem;transition:transform .22s,box-shadow .22s,border-color .22s}
.telefono:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:rgba(235,91,71,.45)}
.telefono .q{font-weight:700;color:var(--azul);font-size:.96rem;line-height:1.35}
.telefono .n{font-variant-numeric:tabular-nums;color:var(--coral-texto);font-weight:700;font-size:1.02rem}
.telefono .obs{font-size:.8rem;color:var(--tinta-tenue)}
.telefono .obs i{display:inline-block;margin-top:.3rem;font-style:normal;color:#8A6A14;background:#FFF8E8;border:1px dashed #E8C878;border-radius:6px;padding:.15rem .45rem;font-size:.74rem}
.telefono.de-turno .obs i{color:var(--ambar);background:rgba(244,148,10,.14);border-color:rgba(244,148,10,.34)}
.telefono.urgente{background:var(--azul);border-color:transparent}
.telefono.urgente .q{color:#fff}
.telefono.urgente .n{color:var(--ambar);font-size:1.25rem}
.telefono.urgente .obs{color:rgba(255,255,255,.6)}
/* Farmacia que está de turno hoy, dentro del listado */
.telefono.de-turno{background:var(--azul);border-color:transparent}
.telefono.de-turno .q{color:#fff}
.telefono.de-turno .q em{display:inline-block;font-style:normal;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--degrade);color:#fff;border-radius:99px;padding:.2rem .55rem;margin-left:.4rem;vertical-align:middle}
.telefono.de-turno .n{color:var(--ambar);font-size:1.2rem}
.telefono.de-turno .obs{color:rgba(255,255,255,.65)}
.telefono.sin-tel{cursor:default}
.telefono.sin-tel:hover{transform:none;box-shadow:none;border-color:var(--arena-borde)}
.telefono.sin-tel .n{color:var(--tinta-tenue);font-size:.9rem;font-weight:600}

/* Tarjetas de emergencia grandes */
.emerg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.emerg{background:var(--azul);color:#fff;border-radius:var(--r-lg);padding:1.9rem;text-decoration:none;display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden;transition:transform .26s cubic-bezier(.22,.9,.3,1),box-shadow .26s}
.emerg::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.12;pointer-events:none}
.emerg>*{position:relative;z-index:2}
.emerg:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.emerg .ico-e{width:44px;height:44px;border-radius:12px;background:rgba(244,148,10,.16);border:1px solid rgba(244,148,10,.3);display:grid;place-items:center;margin-bottom:.6rem}
.emerg .ico-e svg{width:22px;height:22px;stroke:var(--ambar);fill:none;stroke-width:1.8}
.emerg .q{font-family:var(--display);font-size:1.4rem;font-weight:600}
.emerg .n{font-size:1.9rem;font-weight:800;color:var(--ambar);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.emerg .obs{font-size:.86rem;color:rgba(255,255,255,.62)}

/* ─── Gobierno ─── */
.gobierno{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.intendenta{background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r-lg);padding:2rem;position:relative;overflow:hidden}
.intendenta::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--degrade)}
.intendenta .foto{min-height:250px;margin-bottom:1.6rem;border-radius:var(--r)}
.intendenta .retrato{margin-bottom:1.6rem;background:var(--arena-media)}
/* La intendenta mira hacia la derecha: el encuadre se corre para dejarle aire */
.intendenta .retrato img{object-position:55% 22%}
.intendenta .cargo{font-size:.7rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--coral-texto)}
.intendenta h2,.intendenta h3{font-family:var(--display);font-size:1.85rem;font-weight:600;color:var(--azul);margin-top:.5rem}
.intendenta p{color:var(--tinta-suave);font-size:.92rem;margin-top:.6rem}
.lista-limpia{list-style:none;margin:0;padding:0}
.secretaria{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;padding:1.05rem 0;border-bottom:1px solid var(--arena-borde)}
.secretaria:last-child{border-bottom:0}
.secretaria .n{font-weight:700;color:var(--azul);font-size:.98rem}
.secretaria .t{color:var(--tinta-suave);font-size:.88rem;text-align:right}
.sub{font-family:var(--display);font-size:1.35rem;font-weight:600;color:var(--azul);margin:2.4rem 0 .6rem}
.sub:first-child{margin-top:0}
.concejales{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.concejal{background:var(--blanco);border:1px solid var(--arena-borde);border-radius:99px;padding:.5rem 1.05rem;font-size:.88rem;font-weight:600;color:var(--azul)}

/* ─── Línea de tiempo ─── */
.linea{position:relative;padding-left:2.4rem;margin:0;list-style:none}
.linea::before{content:"";position:absolute;left:7px;top:.6rem;bottom:.6rem;width:2px;background:linear-gradient(180deg,var(--ambar),var(--coral),rgba(235,91,71,.15))}
.linea li{position:relative;padding:0 0 1.7rem}
.linea li:last-child{padding-bottom:0}
.linea li::before{content:"";position:absolute;left:-2.4rem;top:.55rem;width:16px;height:16px;border-radius:50%;background:var(--azul-profundo);border:3px solid var(--ambar)}
.linea .anio{font-family:var(--display);font-size:1.35rem;font-weight:600;color:var(--ambar);line-height:1;font-variant-numeric:tabular-nums}
.linea .hecho{color:rgba(255,255,255,.82);margin-top:.35rem;max-width:62ch}

.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.caja-clara{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:1.9rem}
.caja-clara h2,.caja-clara h3{font-family:var(--display);font-size:1.45rem;font-weight:600;color:#fff;margin-bottom:.9rem}
.caja-clara p{color:rgba(255,255,255,.75);font-size:.95rem}
.etiquetas{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.etiquetas span{background:rgba(244,148,10,.13);border:1px solid rgba(244,148,10,.28);color:var(--ambar);border-radius:99px;padding:.34rem .8rem;font-size:.8rem;font-weight:600}
.gente{list-style:none;margin:1.1rem 0 0;padding:0}
.gente li{padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.75);font-size:.93rem}
.gente li:last-child{border-bottom:0}
.gente b{color:#fff;display:block;font-weight:700}

/* ─── Tabla ─── */
.tabla-caja{background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r-lg);overflow:hidden;overflow-x:auto}
.tabla-caja table{min-width:520px}
.tabla-caja th{background:var(--arena);text-align:left;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-tenue);padding:1rem 1.4rem;border-bottom:1px solid var(--arena-borde)}
.tabla-caja td{padding:1rem 1.4rem;border-bottom:1px solid var(--arena-media);font-size:.95rem;color:var(--tinta-suave)}
.tabla-caja tr:last-child td{border-bottom:0}
.tabla-caja td:first-child{font-weight:700;color:var(--azul)}

/* ─── Contacto ─── */
.contacto-caja{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.bloque{background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r-lg);padding:2rem}
.bloque h2,.bloque h3{font-family:var(--display);font-size:1.45rem;font-weight:600;color:var(--azul);margin-bottom:1.2rem}
.campo{display:flex;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--arena-media)}
.campo:last-of-type{border-bottom:0}
.campo svg{width:19px;height:19px;stroke:var(--coral);fill:none;stroke-width:1.8;flex-shrink:0;margin-top:.25rem}
.campo .k{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-tenue)}
.campo .v{font-weight:600;color:var(--azul);font-size:.98rem}
.campo .v a{color:var(--coral-texto);text-decoration:none;font-variant-numeric:tabular-nums}
.campo .v a:hover{text-decoration:underline}
.campo .v small{display:block;font-weight:500;color:var(--tinta-suave);font-size:.83rem;margin-top:.15rem}
/* El degradé original (#1E9E52 a #25D366) se ve bien pero el extremo claro
   deja el texto blanco en 1,98:1 de contraste — invisible para buena parte
   de los vecinos, no solo para quien tiene baja visión. Estos dos tonos
   son el mismo verde, oscurecidos lo justo para que TODO el recorrido del
   degradé llegue a 4,5:1. */
.wsp-bloque{background:linear-gradient(150deg,#1A8847,#188842);color:#fff;border:0}
.wsp-bloque h2,.wsp-bloque h3{color:#fff}
.wsp-bloque p{color:rgba(255,255,255,.9);font-size:.96rem}
.btn-wsp{display:inline-flex;align-items:center;gap:.65rem;background:#fff;color:#12703C;text-decoration:none;font-weight:700;padding:.9rem 1.6rem;border-radius:99px;margin-top:1.4rem;transition:transform .22s}
.btn-wsp:hover{transform:translateY(-2px)}
.btn-wsp svg{width:20px;height:20px;fill:#12703C}
.pendiente{background:#FFF8E8;border:1px dashed #E8C878;border-radius:11px;padding:.85rem 1.1rem;font-size:.85rem;color:#7A5A12;margin-top:1.2rem}
.pendiente b{color:#5A4008}

/* ─── Legal (privacidad, accesibilidad) ─── */
.legal{display:grid;grid-template-columns:220px 1fr;gap:3rem;align-items:start}
.legal-indice{position:sticky;top:120px;display:flex;flex-direction:column;gap:.55rem}
.legal-indice a{color:var(--tinta-suave);text-decoration:none;font-size:.86rem;padding:.3rem 0 .3rem .9rem;border-left:2px solid var(--arena-borde);transition:color .2s,border-color .2s}
.legal-indice a:hover{color:var(--azul);border-color:var(--coral)}
.legal-cuerpo h2{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--azul);margin:2.6rem 0 1rem;scroll-margin-top:120px}
.legal-cuerpo h2:first-child{margin-top:0}
.legal-cuerpo .prosa ul{margin:0 0 1.1rem;padding-left:1.2rem}
.legal-cuerpo .prosa li{color:var(--tinta-suave);margin-bottom:.5rem;max-width:64ch}
.legal-cuerpo .prosa li b{color:var(--azul)}
.legal-fecha{font-size:.82rem;color:var(--tinta-tenue);margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--arena-borde)}
@media(max-width:900px){.legal{grid-template-columns:1fr}.legal-indice{position:static;flex-direction:row;flex-wrap:wrap;gap:.6rem 1.2rem}.legal-indice a{border-left:0;border-bottom:2px solid var(--arena-borde);padding:.2rem 0}}

/* ─── Pie ─── */
.pie{background:var(--azul-noche);color:rgba(255,255,255,.72);position:relative;overflow:hidden}
.pie::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.12;pointer-events:none}
.pie .env{position:relative;z-index:2}
.pie-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem;padding:clamp(3rem,6vw,4.5rem) 0 3rem}
.pie .logo-pie{height:74px;width:auto;margin-bottom:1.3rem}
.pie h2{color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.62rem}
.pie a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.9rem;transition:color .2s}
.pie a:hover{color:var(--ambar)}
.pie .dir{font-size:.9rem;line-height:1.75;max-width:34ch}
.pie .dir b{color:#fff;font-weight:600}
.redes{display:flex;gap:.65rem;margin-top:1.5rem}
.redes a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:background .22s,transform .22s,border-color .22s}
.redes a:hover{background:var(--degrade);transform:translateY(-2px);border-color:transparent}
.redes svg{width:19px;height:19px;fill:#fff}
.pie-bajo{border-top:1px solid rgba(255,255,255,.1);padding:1.5rem 0 5rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.82rem}
.pie-bajo span:last-child{max-width:min(100%,52ch)}

/* ─── WhatsApp flotante ─── */
.wsp{position:fixed;right:1.5rem;bottom:1.5rem;z-index:80;display:flex;align-items:center;gap:.7rem;text-decoration:none;background:var(--verde);color:#fff;padding:.85rem 1.35rem .85rem 1rem;border-radius:99px;font-weight:700;font-size:.92rem;box-shadow:0 6px 16px -4px rgba(0,0,0,.28),0 0 0 4px rgba(37,211,102,.16);transition:transform .25s cubic-bezier(.22,.9,.3,1),box-shadow .25s}
.wsp:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 28px -6px rgba(0,0,0,.34),0 0 0 6px rgba(37,211,102,.2)}
.wsp svg{width:23px;height:23px;fill:#fff;flex-shrink:0}

/* ─── Adaptación a pantallas ─── */
@media(max-width:1100px){
  nav.principal ul{gap:1.2rem}
  nav.principal a{font-size:.83rem}
}
@media(max-width:1024px){
  .portada .env{grid-template-columns:1fr}
  .marca-agua{opacity:.05}
  .accesos,.telefonos,.telefonos.dos{grid-template-columns:repeat(2,1fr)}
  .noticias{grid-template-columns:1fr 1fr}
  .destinos{grid-template-columns:1fr 1fr}
  .estrella-caja,.mate-caja,.dos-col,.contacto-caja,.anio-completo{grid-template-columns:1fr}
  .mapa-caja{grid-template-columns:1fr}
  .mapa-intro>p{max-width:60ch}
  .gobierno{grid-template-columns:1fr}
  .pie-top{grid-template-columns:1fr 1fr}
  nav.principal{display:none}
  .hamburguesa{display:block}
}
@media(max-width:760px){
  body{font-size:16px}
  html{scroll-padding-top:84px}
  .ficha .env{grid-template-columns:1fr 1fr}
  .accesos,.par,.noticias,.destinos,.telefonos,.telefonos.dos,.datos-parque,.emerg-grid{grid-template-columns:1fr}
  /* En el teléfono el mapa necesita altura, no ancho. */
  .mapa-lienzo{aspect-ratio:4/5}
  .mapa-barra .mapa-coord{display:none}
  .pie-top{grid-template-columns:1fr}
  .dia{grid-template-columns:56px 1fr;gap:1rem;padding:1.1rem 1.2rem}
  .dia .num{font-size:2rem}
  .dia .dsem{font-size:.6rem;letter-spacing:.08em}
  /* En una sola columna la etiqueta se ordena al final, para que no se
     interponga entre el título del evento y su detalle. */
  .ev{grid-template-columns:1fr}
  .ev-t{order:1}
  .ev small{order:2}
  .ev .chip{order:3;grid-column:1;grid-row:auto;justify-self:start;margin-top:.35rem}
  .agenda-cab{padding:1.3rem}
  .emergencias .env{gap:.5rem 1.1rem;font-size:.78rem}
  .emergencias a{padding:.32rem 0}
  .emergencias a b{font-weight:600;opacity:.95;font-size:.82rem}
  .emergencias .tel{display:none}
  .secretaria{flex-direction:column;gap:.2rem}
  .secretaria .t{text-align:left}
  .proximos li{flex-direction:column;gap:.2rem}
  .wsp span{display:none}
  .wsp{padding:.95rem;right:1rem;bottom:1rem}
  /* En el celular las flechas quedan solo con el ícono, así los números
     de página entran en un renglón sin apretarse. */
  .paginacion{gap:.4rem}
  .pag-flecha{padding:.72rem .8rem}
  .pag-flecha span{display:none}
  .pag-num{width:38px;height:38px;font-size:.9rem}
  .pag-conteo{letter-spacing:.12em}
}
/* Movimiento reducido.
   No se apaga todo con un 0.01ms: eso además de las animaciones borra la
   respuesta al clic y al foco, que es información útil y no decoración.
   Lo que se quita son los bucles y los desplazamientos; lo que se conserva,
   acortado, son los cambios de color y opacidad. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.12s!important;animation-iteration-count:1!important}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .portada .antetitulo,.js .portada h1,.js .portada .bajada,.js .portada .acciones,.js .portada .retrato{animation:none;opacity:1;transform:none}
  .pulso,.mapa-barra .chincheta,.noticias.pasando .nota,.ficha-velo,.ficha-hoja{animation:none}
  /* Nada se desplaza ni se agranda al pasar el mouse */
  .acceso:hover,.nota:hover,.inst:hover,.destino:hover,.emerg:hover,.telefono:hover,
  .redes a:hover,.wsp:hover,.btn:hover,.btn-wsp:hover,.btn-acento:hover,
  .ficha-cerrar:hover,.pag-flecha:hover:not(:disabled),.pag-num:hover,
  .saber:hover,.saber:nth-child(even):hover{transform:none}
  .nota:hover .miniatura img,.inst:hover .inst-img img,.mas:hover svg,
  .inst:hover .inst-pie svg,.pag-flecha:hover:not(:disabled) svg{transform:none}
  /* La flecha de "anteriores" tiene que seguir apuntando a la izquierda */
  .pag-flecha.atras svg,.pag-flecha.atras:hover:not(:disabled) svg{transform:scaleX(-1)}
}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:4px}

/* ─── Saltar la navegación ───
   Cada página repite unos treinta enlaces de menú antes del contenido. Sin
   este atajo, quien navega con teclado o lector de pantalla los recorre
   enteros en cada página. Invisible hasta que se lo enfoca. (WCAG 2.4.1) */
.salto{position:absolute;left:1rem;top:-6rem;z-index:300;background:var(--blanco);color:var(--azul);
  font-weight:700;font-size:.92rem;text-decoration:none;padding:.8rem 1.35rem;
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--sombra-alta);transition:top .18s}
.salto:focus{top:0}


/* ═══════════════════════════════════════════════════════════════════
   INSTITUCIONES
   Cada institución trae su propio color, tomado de su logo o de su
   fachada, en la variable --acento. Todo lo de abajo lo usa: la cinta
   de la tarjeta, la etiqueta de rubro y la cabecera de la ficha.
   Así el directorio se lee como un mosaico del pueblo y no como
   nueve tarjetas iguales.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Menú desplegable del encabezado ─── */
nav.principal li{position:relative}
/* El inline-flex va en TODOS los enlaces del primer nivel, no sólo en el que
   abre submenú. Cuando lo tenía sólo "Instituciones" (por la flechita), ese
   ítem quedaba con caja de 34,4px contra 30,4px de los demás: un enlace
   `inline` se mide por las métricas de la fuente y uno `inline-flex` por el
   line-height. El texto caía 2px más abajo y, peor, el subrayado del hover
   —que va anclado a `bottom:0`— aparecía 4px por debajo del de los otros.
   Igualando el display se igualan las tres cosas. El `gap` sólo tiene efecto
   donde hay flechita; en los demás no molesta. */
nav.principal>ul>li>a{display:inline-flex;align-items:center;gap:.34rem}
.con-menu .chev{transition:transform .28s cubic-bezier(.22,.9,.3,1);opacity:.7}
.con-menu:hover .chev,.con-menu:focus-within .chev{transform:rotate(180deg);opacity:1}
/* Se ancla al borde derecho del ítem, no al centro: "Instituciones" es el
   anteúltimo del menú y centrado se le sale de la pantalla. */
.submenu{position:absolute;top:100%;right:-1rem;left:auto;width:min(470px,88vw);margin-top:1.05rem;
  background:var(--blanco);border-radius:var(--r-lg);border:1px solid var(--arena-borde);
  box-shadow:0 4px 10px rgba(27,30,61,.08),0 30px 60px -24px rgba(27,30,61,.45);
  padding:1.15rem 1.15rem 1rem;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .26s cubic-bezier(.22,.9,.3,1),transform .26s cubic-bezier(.22,.9,.3,1),visibility .26s}
/* Puente invisible: sin esto el menú se cierra al cruzar el hueco con el mouse */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-1.15rem;height:1.15rem}
.con-menu:hover .submenu,.con-menu:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu .rot{display:block;font-size:.63rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-tenue);padding:0 .55rem .7rem}
nav.principal .submenu ul{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .5rem;list-style:none;margin:0;padding:0}
/* El prefijo `nav.principal` no es decorativo: sin él gana la regla de los
   enlaces del encabezado (que son blancos) y el submenú queda ilegible. */
nav.principal .submenu a{display:flex;align-items:center;gap:.6rem;color:var(--azul);font-size:.86rem;font-weight:600;
  text-decoration:none;padding:.5rem .55rem;border-radius:9px;white-space:normal;line-height:1.3;transition:background .2s,color .2s}
nav.principal .submenu a::after{display:none}
nav.principal .submenu a:hover{background:var(--arena);color:var(--coral-texto)}
nav.principal .submenu a .punto{width:9px;height:9px;border-radius:50%;background:var(--acento,var(--coral));flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acento,var(--coral)) 18%,transparent)}
nav.principal .submenu .pie-menu{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.7rem;padding:.75rem .55rem 0;
  border-top:1px solid var(--arena-media);font-size:.82rem;font-weight:700;color:var(--coral-texto);border-radius:0}
nav.principal .submenu .pie-menu:hover{background:transparent;color:var(--azul)}

/* Grupo desplegable del menú de celular */
.panel-movil .grupo{border-bottom:1px solid rgba(255,255,255,.08)}
.panel-movil .grupo summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  color:#fff;font-weight:600;padding:.85rem 0;cursor:pointer;list-style:none}
.panel-movil .grupo summary::-webkit-details-marker{display:none}
.panel-movil .grupo summary svg{transition:transform .28s;opacity:.7}
.panel-movil .grupo[open] summary svg{transform:rotate(180deg)}
.panel-movil .grupo ul{padding:.1rem 0 .8rem;margin:0;list-style:none}
.panel-movil .grupo ul a{display:flex;align-items:center;gap:.65rem;font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.82);padding:.6rem 0 .6rem .9rem;border-bottom:0}
.panel-movil .grupo ul a .punto{width:8px;height:8px;border-radius:50%;background:var(--acento,var(--ambar));flex-shrink:0}

/* ─── Filtro por rubro ─── */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filtro{background:var(--blanco);border:1px solid var(--arena-borde);border-radius:99px;padding:.55rem 1.15rem;
  font-size:.85rem;font-weight:700;color:var(--tinta-suave);transition:all .22s}
.filtro:hover{border-color:var(--coral);color:var(--coral-texto)}
.filtro[aria-pressed="true"]{background:var(--azul);border-color:transparent;color:#fff}
.filtro .cuenta{font-weight:600;opacity:.55;margin-left:.35rem;font-variant-numeric:tabular-nums}

/* ─── Rejilla del directorio ─── */
.instituciones{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.inst{position:relative;display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--arena-borde);
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s,border-color .3s}
.inst::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--acento);z-index:3;
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.9,.3,1)}
.inst:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta);border-color:transparent}
.inst:hover::before{transform:scaleX(1)}
.inst.oculta{display:none}

.inst-img{position:relative;margin:0;aspect-ratio:16/11;overflow:hidden;background:var(--arena-media);border-bottom:1px solid var(--arena-borde)}
.inst-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.inst:hover .inst-img img{transform:scale(1.05)}
/* Los logos no se recortan: van centrados sobre un fondo del color propio */
.inst-img.marca{background:color-mix(in srgb,var(--acento) 12%,var(--blanco))}
.inst-img.marca img{object-fit:contain;padding:1.5rem;transform:none}
.inst:hover .inst-img.marca img{transform:scale(1.05)}
/* --acento-fuerte: variante oscurecida que solo existe, por institución, en
   las que el color de marca no alcanza 4,5:1 sobre blanco (ver estilo inline
   en instituciones.html). Donde no está definida, el fallback usa --acento
   tal cual, que ya cumple. Se aplica en todo lugar donde --acento hace de
   TEXTO o de fondo bajo texto blanco; el borde y el punto decorativo del
   menú siguen con el color de marca original, que ahí no es texto. */
.inst-rubro{position:absolute;left:.9rem;bottom:.9rem;z-index:2;background:var(--acento-fuerte,var(--acento));color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:.36rem .75rem;border-radius:99px;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}

.inst-cuerpo{padding:1.5rem 1.5rem 1.3rem;display:flex;flex-direction:column;flex:1;gap:.55rem}
.inst-cuerpo h3{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--azul);line-height:1.22}
.inst-cuerpo .desde{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--acento-fuerte,var(--acento))}
.inst-cuerpo p{font-size:.89rem;color:var(--tinta-suave);line-height:1.6}
.inst-pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1rem;
  border-top:1px solid var(--arena-media);font-size:.83rem;font-weight:700;color:var(--acento-fuerte,var(--acento))}
.inst-pie .tel-i{color:var(--tinta-tenue);font-weight:600;font-variant-numeric:tabular-nums}
.inst-pie svg{transition:transform .25s}
.inst:hover .inst-pie svg{transform:translateX(4px)}
.sin-resultados{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:var(--tinta-suave)}

/* ─── Ficha ampliada ───
   Se abre con :target, así funciona sin JavaScript y además permite
   enlazar directo desde el menú (instituciones.html#bomberos). */
.ficha-inst{position:fixed;inset:0;z-index:200;display:none}
.ficha-inst:target{display:grid;place-items:end center}
html:has(.ficha-inst:target){overflow:hidden}
.ficha-velo{position:absolute;inset:0;background:rgba(12,15,40,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:velo-entra .3s ease both}
@keyframes velo-entra{from{opacity:0}to{opacity:1}}
.ficha-hoja{position:relative;width:min(940px,100%);max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--arena);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -10px 60px -12px rgba(0,0,0,.55);
  animation:hoja-entra .42s cubic-bezier(.22,.9,.3,1) both}
@keyframes hoja-entra{from{transform:translateY(38px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:761px){
  .ficha-inst:target{place-items:center;padding:2.2rem 1.5rem}
  .ficha-hoja{border-radius:var(--r-lg);max-height:88vh;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
}

.ficha-cab{position:relative;min-height:240px;display:flex;align-items:flex-end;padding:1.8rem;color:#fff;
  background:var(--acento);overflow:hidden}
.ficha-cab>picture{position:absolute;inset:0}
.ficha-cab>picture img{width:100%;height:100%;object-fit:cover}
/* El velo tiene que ser fuerte: arriba oscurece la foto y abajo se funde
   con el color de la institución, que es donde apoya el texto. */
.ficha-cab::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,34,.5) 0%,color-mix(in srgb,var(--acento) 82%,#0A0C22 18%) 78%)}
/* Ojo: acá NO va un `> *`, porque también alcanzaría al <picture> y la foto
   se treparía por encima del velo de color, dejando el título ilegible. */
.ficha-cab>div,.ficha-cab>.medalla{position:relative;z-index:2}
/* Variante para logos: no se recorta, se apoya como medallón sobre el color */
.ficha-cab.marca{align-items:center;justify-content:flex-start;gap:1.6rem;flex-wrap:wrap}
.ficha-cab.marca::after{background:radial-gradient(120% 140% at 12% 0%,rgba(255,255,255,.16) 0%,transparent 60%)}
.ficha-cab.marca .medalla{width:132px;height:132px;border-radius:50%;background:var(--blanco);flex-shrink:0;
  display:grid;place-items:center;padding:.7rem;box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
.ficha-cab.marca .medalla img{width:100%;height:100%;object-fit:contain}
.ficha-cab .rot-f{font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.ficha-cab h2{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:600;letter-spacing:-.02em;margin-top:.5rem;max-width:20ch}
.ficha-cab .bajo-t{color:rgba(255,255,255,.82);font-size:.93rem;margin-top:.5rem;max-width:48ch}

.ficha-cerrar{position:absolute;top:1rem;right:1rem;z-index:5;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  color:#fff;text-decoration:none;transition:background .22s,transform .22s}
.ficha-cerrar:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}

.ficha-cuerpo{padding:clamp(1.5rem,3vw,2.2rem)}
.ficha-cuerpo .prosa p{color:var(--tinta-suave);font-size:.97rem}
.ficha-cuerpo .prosa b{color:var(--azul)}
.ficha-datos{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:1.6rem 0}
.ficha-datos .d{background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r);padding:.9rem 1.1rem}
.ficha-datos .k{font-size:.63rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-tenue)}
.ficha-datos .v{font-weight:700;color:var(--azul);font-size:.96rem;margin-top:.25rem;line-height:1.4}
.ficha-datos .v a{color:var(--acento-fuerte,var(--acento));text-decoration:none;font-variant-numeric:tabular-nums}
.ficha-datos .v a:hover{text-decoration:underline}
.ficha-datos .v small{display:block;font-weight:500;color:var(--tinta-suave);font-size:.81rem;margin-top:.2rem}
.ficha-tit{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--azul);margin:1.8rem 0 .8rem}
.ficha-lista{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ficha-lista li{position:relative;padding-left:1.5rem;font-size:.93rem;color:var(--tinta-suave);line-height:1.55}
.ficha-lista li::before{content:"";position:absolute;left:0;top:.55rem;width:7px;height:7px;border-radius:50%;background:var(--acento)}
.ficha-lista li b{color:var(--azul)}
.ficha-acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.btn-acento{display:inline-flex;align-items:center;gap:.55rem;background:var(--acento-fuerte,var(--acento));color:#fff;text-decoration:none;
  padding:.85rem 1.5rem;border-radius:99px;font-weight:700;font-size:.9rem;transition:transform .22s,filter .22s}
.btn-acento:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn-acento svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}

@media(max-width:1024px){
  .instituciones{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .instituciones{grid-template-columns:1fr}
  .ficha-datos{grid-template-columns:1fr}
  .ficha-cab{min-height:200px;padding:1.3rem}
  .ficha-cab.marca .medalla{width:96px;height:96px}
  .filtros{gap:.4rem}
  .filtro{padding:.5rem .95rem;font-size:.8rem}
}

/* ════════════════════════════════════════════════════════════════
   HISTORIA
   Bloques que solo usa historia.html. Van al final del archivo, con
   sus propios media queries, porque los de más arriba ya pasaron.
   ════════════════════════════════════════════════════════════════ */

/* ─── Cita histórica ───
   Sirve en fondo claro y en fondo oscuro; la variante oscura solo
   cambia los colores del texto. */
.cita-hist{position:relative;margin:2.2rem 0 0;padding:.3rem 0 .3rem 1.7rem}
.cita-hist::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:var(--degrade)}
.cita-hist p{font-family:var(--display);font-style:italic;font-size:clamp(1.08rem,2vw,1.32rem);line-height:1.55;color:var(--azul);max-width:52ch}
.cita-hist cite{display:block;font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-tenue);margin-top:.95rem}
.oscura-seccion .cita-hist p{color:#fff}
.oscura-seccion .cita-hist cite{color:rgba(255,255,255,.55)}

/* ─── Cadena de nombres previos de la estación ─── */
.cadena{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .55rem;list-style:none;margin:1.7rem 0 0;padding:0}
.cadena li{display:flex;align-items:center;gap:.55rem}
.cadena li:not(:last-child)::after{content:"→";color:var(--coral);font-weight:700;opacity:.6}
.cadena b{display:block;background:var(--blanco);border:1px dashed var(--arena-borde);color:var(--tinta-suave);
  border-radius:99px;padding:.44rem 1rem;font-size:.86rem;font-weight:600;white-space:nowrap}
.cadena .hoy b{background:var(--degrade);border:0;color:#fff;box-shadow:0 8px 22px -12px rgba(240,128,44,.9)}

/* ─── Las tres fechas del "pueblo sin fundación" ─── */
.tres-fechas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.4rem}
.fecha-h{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:1.7rem 1.6rem;overflow:hidden}
.fecha-h .d{font-family:var(--display);font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:600;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.fecha-h .m{display:block;font-family:var(--texto);font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.6rem}
.fecha-h p{color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.6;margin-top:1rem}
/* La que quedó como fecha oficial: se distingue con el ámbar de la marca */
.fecha-h.oficial{border-color:rgba(244,148,10,.45);background:linear-gradient(155deg,rgba(244,148,10,.15),rgba(255,255,255,.03))}
.fecha-h.oficial .d{color:var(--ambar)}
.fecha-h.oficial .m{color:rgba(244,148,10,.8)}
.fecha-h.oficial p{color:rgba(255,255,255,.82)}
.sello{position:absolute;top:1.1rem;right:1.1rem;background:var(--degrade);color:#fff;font-size:.6rem;
  font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:.32rem .7rem;border-radius:99px}
.zanjado{margin-top:1.6rem;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2);
  border-radius:var(--r);padding:1.15rem 1.4rem;color:rgba(255,255,255,.76);font-size:.93rem;line-height:1.6}
.zanjado b{color:#fff}

/* ─── El éxodo de los años 30 en cifras ─── */
.exodo{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--arena-borde);
  border:1px solid var(--arena-borde);border-radius:var(--r-lg);overflow:hidden;margin-top:2.4rem}
.exodo div{background:var(--blanco);padding:1.7rem 1.3rem;text-align:center}
.exodo .n{font-family:var(--display);font-size:clamp(1.9rem,3.8vw,2.7rem);font-weight:600;line-height:1;
  background:var(--degrade-texto);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;font-variant-numeric:tabular-nums}
.exodo .l{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-tenue);margin-top:.55rem}
.exodo .s{font-size:.84rem;color:var(--tinta-suave);margin-top:.45rem;line-height:1.5}

/* ─── "¿Sabías que…?" ───
   Fichas de archivo sobre fondo de arena con textura de papel. El grano
   acá va en multiply y muy bajo: sobre claro, el mismo valor que se usa
   en los bloques oscuros lo ensuciaría. */
.saberes-seccion{position:relative;background:var(--arena-media);border-block:1px solid var(--arena-borde);overflow:hidden}
.saberes-seccion::before{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.06;
  mix-blend-mode:multiply;pointer-events:none}
.saberes-seccion .env{position:relative;z-index:2}

.saberes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:start;list-style:none;margin:0;padding:0}
.saber{position:relative;background:var(--blanco);border:1px solid var(--arena-borde);border-radius:var(--r);
  padding:1.6rem 1.55rem 1.5rem;box-shadow:var(--sombra);overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s,border-color .3s}
/* Mismo gesto que .acceso: la barra del degradé entra al pasar el mouse */
.saber::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--degrade);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.9,.3,1)}
.saber:hover{transform:translateY(-6px) rotate(-.45deg);box-shadow:var(--sombra-alta);border-color:transparent}
.saber:hover::before{transform:scaleX(1)}
/* Alternar el sentido del giro: la grilla queda como fichas sueltas y no
   como un bloque que se inclina entero para el mismo lado. */
.saber:nth-child(even):hover{transform:translateY(-6px) rotate(.45deg)}

.saber .cab-s{display:flex;align-items:baseline;gap:.75rem;padding-bottom:.85rem;margin-bottom:1rem;
  border-bottom:1px solid var(--arena-media)}
.saber .num{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--coral-texto);
  font-variant-numeric:tabular-nums;line-height:1}
.saber .et{font-size:.63rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-tenue)}
.saber h3{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--azul);line-height:1.28}
.saber p{font-size:.9rem;color:var(--tinta-suave);line-height:1.65;margin-top:.65rem}
.saber p b{color:var(--azul);font-weight:700}
.saber .anio-s{display:inline-block;margin-top:1.1rem;font-size:.7rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--coral-texto);background:rgba(235,91,71,.1);border-radius:99px;padding:.3rem .75rem}

/* ─── Nómina de comercios de 1917 ─── */
.comercios{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.15rem 1.6rem}
.comercios li{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px dashed rgba(255,255,255,.13);font-size:.9rem;color:rgba(255,255,255,.75)}
.comercios b{color:#fff;font-weight:700}

@media(min-width:1025px){
  /* Desplaza la columna del medio para que las fichas no queden en
     renglones perfectos: se leen como papeles apoyados, no como tabla. */
  .saberes>li:nth-child(3n+2){margin-top:2.2rem}
}
@media(max-width:1024px){
  .saberes,.tres-fechas{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .saberes,.tres-fechas,.exodo,.comercios{grid-template-columns:1fr}
  .cadena b{font-size:.8rem;padding:.4rem .85rem}
  .comercios li{border-bottom:1px dashed rgba(255,255,255,.13)}
}