/* ============================================================
   Municipalidad de Hipólito Yrigoyen — hoja de estilos
   Paleta de marca (del escudo):
     --azul     #001080  azul profundo (principal)
     --celeste  #1090f0
     --rojo     #e00010
     --amarillo #f0f000
   ============================================================ */

:root {
  --azul:      #001080;
  --azul-2:    #0a2496;
  --azul-3:    #1626a8;
  --celeste:   #1090f0;
  --celeste-d: #0b77c9;
  --rojo:      #e00010;
  --amarillo:  #f0f000;

  --tinta:     #0f172a;
  --tinta-suave: #475569;
  --gris:      #94a3b8;
  --fondo:     #f6f8fb;
  --blanco:    #ffffff;
  --borde:     #e2e8f0;

  --radio:     16px;
  --radio-lg:  24px;
  --sombra:    0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --sombra-lg: 0 12px 40px rgba(0, 16, 128, .14);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Al saltar a un ancla (#seccion), deja margen para que el header sticky
   no tape el título de la sección. */
[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--celeste-d); text-decoration: none; }
a:hover { color: var(--azul); }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; color: var(--tinta); font-weight: 800; letter-spacing: -.02em; }

.container { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Barra tricolor superior ---------- */
.tricolor {
  height: 5px;
  background: linear-gradient(90deg,
    var(--celeste) 0%, var(--celeste) 45%,
    var(--amarillo) 45%, var(--amarillo) 55%,
    var(--rojo) 55%, var(--rojo) 100%);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--borde);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 76px;
}

/* Lockup: escudo + texto lateral */
.lockup { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
.lockup__escudo { width: 52px; height: 52px; flex-shrink: 0; }
.lockup__texto { display: flex; flex-direction: column; line-height: 1.05; }
.lockup__pre { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.lockup__nombre { font-size: 1.05rem; font-weight: 800; color: var(--azul); letter-spacing: -.01em; }

/* Navegación */
.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .5rem .8rem; border-radius: 10px;
  color: var(--tinta); font-weight: 600; font-size: .95rem;
  transition: background .15s, color .15s;
}
.nav a:hover { background: rgba(0, 16, 128, .07); color: var(--azul); }
.nav a.activo { color: var(--azul); background: rgba(0, 16, 128, .09); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--borde); border-radius: 10px;
  width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; stroke: var(--azul); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(16, 144, 240, .35), transparent 60%),
    linear-gradient(135deg, var(--azul) 0%, #050a4a 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url('/imagenes/escudo.png');
  background-repeat: no-repeat; background-position: right 24px center; background-size: 280px;
  opacity: .07;
}
.hero__inner { position: relative; z-index: 1; padding: 5rem 0 4.5rem; }
.hero__kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
}
.hero__kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--amarillo); display: inline-block; }
.hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); margin: 1.2rem 0 .8rem; text-wrap: balance; }
.hero__lead { color: rgba(255, 255, 255, .82); font-size: 1.15rem; max-width: 72ch; margin: 0 0 2rem; text-wrap: balance; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 12px; font-weight: 700; font-size: .98rem;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .12s, background .15s;
  text-decoration: none; line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }

.btn-wa { background: #25d366; color: #06301a; }
.btn-wa:hover { background: #1fb958; color: #06301a; }

.btn-celeste { background: var(--celeste); color: #fff; }
.btn-celeste:hover { background: var(--celeste-d); color: #fff; }

.btn-fantasma { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-fantasma:hover { background: rgba(255,255,255,.12); color: #fff; }

.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-2); color: #fff; }

.btn-blanco { background: #fff; color: var(--azul); }
.btn-blanco:hover { background: #eaf1ff; color: var(--azul-2); }

.btn-mapa {
  background: #fff; color: var(--tinta); border-color: var(--borde);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.btn-mapa:hover {
  background: #fff; border-color: var(--celeste); color: var(--tinta);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

/* ---------- Secciones ---------- */
.seccion { padding: 4rem 0; }
.seccion--blanca { background: var(--blanco); }

.seccion__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.seccion__cabeza h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.seccion__kicker { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--celeste-d); margin-bottom: .4rem; }
.seccion__mas {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .85rem; color: var(--celeste-d);
  background: rgba(16, 144, 240, .08);
  border: 1px solid rgba(16, 144, 240, .22);
  padding: .42rem 1rem; border-radius: 999px; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.seccion__mas:hover { background: var(--celeste); border-color: var(--celeste); color: #fff; }

/* ---------- Grids y tarjetas ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.4rem; box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s, border-color .15s;
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .6rem;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); border-color: rgba(0,16,128,.2); }

.tarjeta__icono {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 16, 128, .08); color: var(--azul);
}
.tarjeta__icono svg { width: 24px; height: 24px; }
.tarjeta h3 { margin: 0; font-size: 1.08rem; }
.tarjeta p { margin: 0; color: var(--tinta-suave); font-size: .93rem; }
.tarjeta .flecha { color: var(--celeste-d); font-weight: 700; font-size: .88rem; margin-top: .2rem; }

/* ---------- Noticias ---------- */
.noticia {
  display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0;
}
.noticia__img {
  height: 170px; background: linear-gradient(135deg, var(--azul-2), var(--celeste-d));
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85);
  font-size: 2rem;
}
.noticia__img--foto { display: block; background: var(--fondo); }
.noticia__img--foto img { width: 100%; height: 100%; object-fit: contain; }
.noticia__cuerpo { padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.noticia__cuerpo p { margin: 0; color: var(--tinta-suave); font-size: .93rem; }
.noticia__fecha { font-size: .8rem; font-weight: 700; color: var(--celeste-d); text-transform: uppercase; letter-spacing: .05em; }
.noticia h3 { font-size: 1.05rem; }

.estado-vacio {
  border: 2px dashed var(--borde); border-radius: var(--radio-lg);
  padding: 3rem 1.5rem; text-align: center; color: var(--tinta-suave); background: var(--blanco);
}
.estado-vacio__icono { font-size: 2rem; margin-bottom: .6rem; }
.estado-vacio h3 { color: var(--tinta); margin-bottom: .3rem; }

/* ---------- CTA WhatsApp ---------- */
.cta-wa {
  position: relative; overflow: hidden; color: #fff; border-radius: var(--radio-lg);
  background: linear-gradient(120deg, var(--azul), #0a2496);
  padding: 3rem; margin-top: 4rem;
}
.cta-wa h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .4rem; }
.cta-wa p { color: rgba(255,255,255,.85); margin: 0 0 1.6rem; max-width: 60ch; }
.cta-wa .btn-wa { background: #25d366; color: #06301a; }

/* ---------- Footer ---------- */
.site-footer { background: #050a2a; color: rgba(255,255,255,.72); padding: 3.5rem 0 1.5rem; margin-top: 0; }
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.site-footer .lockup__nombre { color: #fff; }
.site-footer .lockup__pre { color: rgba(255,255,255,.6); }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: .8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.2rem;
  font-size: .85rem; color: rgba(255,255,255,.5);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav {
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: #fff; border-bottom: 1px solid var(--borde); padding: .75rem 1.25rem 1rem;
    box-shadow: 0 16px 30px rgba(15,23,42,.1);
    display: none;
  }
  .nav.abierto { display: flex; }
  .nav a { padding: .8rem .6rem; }
  .nav-toggle { display: flex; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero__inner { padding: 3.5rem 0 3rem; }
  .lockup__nombre { font-size: .92rem; }
  .lockup__pre { font-size: .6rem; }
  .lockup__escudo { width: 44px; height: 44px; }
  .cta-wa { padding: 2rem 1.4rem; }
}

/* ============================================================
   Clima
   ============================================================ */
.aviso {
  display: flex; align-items: center; gap: .75rem;
  background: #fff7e6; border: 1px solid #f5d78a; color: #7a5200;
  border-radius: var(--radio); padding: 1rem 1.25rem;
}
.aviso p { margin: 0; }

/* Hero del clima actual */
.wx-hero {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--azul), #050a4a);
  color: #fff; border-radius: var(--radio-lg); padding: 2rem; box-shadow: var(--sombra-lg);
}
.wx-hero__emoji { font-size: 4.5rem; line-height: 1; }
.wx-hero__main { flex: 1; min-width: 200px; }
.wx-hero__temp { font-size: 3.2rem; font-weight: 800; line-height: 1; }
.wx-hero__temp span { font-size: 1.4rem; font-weight: 400; }
.wx-hero__desc { font-size: 1.2rem; margin-top: .25rem; }
.wx-hero__sens { color: rgba(255,255,255,.65); font-size: .95rem; }
.wx-hero__side { text-align: right; }
.wx-hero__hi { font-size: 1.1rem; font-weight: 700; }
.wx-hero__hi span { color: rgba(255,255,255,.6); font-weight: 600; font-size: .85rem; }
.wx-hero__fecha { color: rgba(255,255,255,.65); font-size: .9rem; margin-top: .4rem; }

/* Métricas */
.wx-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0; }
.wx-metric {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1rem; display: flex; flex-direction: column; gap: .2rem; box-shadow: var(--sombra);
}
.wx-metric__i { font-size: 1.4rem; line-height: 1.2; }
.wx-metric__lbl { font-size: .72rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.wx-metric__val { font-size: 1.15rem; font-weight: 800; color: var(--tinta); }
.wx-metric__sub { font-size: .8rem; color: var(--gris); }

/* Tarjetas de sección */
.wx-card {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--sombra);
}
.wx-card__titulo { font-size: 1.1rem; margin: 0 0 1rem; color: var(--azul); }

/* Próximas horas */
.wx-hours { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.wx-hour {
  flex: 0 0 auto; width: 82px; text-align: center;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px; padding: .8rem .4rem;
}
.wx-hour__h { font-size: .78rem; color: var(--tinta-suave); }
.wx-hour__e { font-size: 1.6rem; line-height: 1.4; }
.wx-hour__t { font-weight: 800; color: var(--tinta); }
.wx-hour__p { font-size: .7rem; color: var(--celeste-d); }

/* Próximos días */
.wx-days { display: flex; flex-direction: column; }
.wx-day { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--borde); }
.wx-day:last-child { border-bottom: 0; }
.wx-day__e { font-size: 1.5rem; width: 42px; text-align: center; flex-shrink: 0; }
.wx-day__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wx-day__n { font-weight: 700; color: var(--tinta); }
.wx-day__d { font-size: .85rem; color: var(--tinta-suave); }
.wx-day__p { font-size: .85rem; color: var(--celeste-d); white-space: nowrap; }
.wx-day__temps { font-size: .95rem; color: var(--tinta-suave); white-space: nowrap; }
.wx-day__temps b { color: var(--tinta); font-size: 1.05rem; }

/* Widget de clima en la home (card clara, hermana de la farmacia) */
.widget-clima {
  display: flex; align-items: center; gap: 1rem;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.4rem; box-shadow: var(--sombra); text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.widget-clima:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); border-color: rgba(16, 144, 240, .3); }
.widget-clima__emoji { font-size: 2.9rem; line-height: 1; }
.widget-clima__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.widget-clima__etiqueta {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.widget-clima__temp { font-size: 2rem; font-weight: 800; color: var(--azul); line-height: 1; }
.widget-clima__desc { color: var(--tinta); font-size: .95rem; }
.widget-clima__hilo { font-size: .85rem; color: var(--tinta-suave); }
.widget-clima__ver {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 700; color: var(--celeste-d);
  background: rgba(16, 144, 240, .08);
  border: 1px solid rgba(16, 144, 240, .22);
  padding: .42rem 1rem; border-radius: 999px; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.widget-clima__ver:hover { background: var(--celeste); border-color: var(--celeste); color: #fff; }

/* Widget de farmacia de turno en la home (fila compacta, 50% junto al clima) */
.farmacia-turno {
  display: flex; align-items: center; gap: 1rem;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.4rem; box-shadow: var(--sombra);
}
.farmacia-turno__icono {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 163, 74, .12); color: #16a34a;
}
.farmacia-turno__icono svg { width: 24px; height: 24px; }
.farmacia-turno__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.farmacia-turno__etiqueta {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.farmacia-turno__chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; color: #1a7f37;
  text-transform: none; letter-spacing: 0;
}
.farmacia-turno__punto {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
}
.farmacia-turno__nombre { font-size: 1.15rem; font-weight: 800; color: var(--tinta); line-height: 1.25; }
.farmacia-turno__dir { color: var(--tinta-suave); font-size: .9rem; }
.farmacia-turno__ciudad { color: var(--gris); font-size: .88rem; }
.farmacia-turno__vacio { color: var(--tinta-suave); font-size: .93rem; }
.farmacia-turno__acciones { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; flex: none; min-width: 150px; }
.farmacia-turno__btn { padding: .58rem 1rem; font-size: .9rem; justify-content: center; }

@media (max-width: 640px) {
  .farmacia-turno { flex-wrap: wrap; }
  .farmacia-turno__acciones { width: 100%; min-width: 0; }
}

@media (max-width: 900px) {
  .wx-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wx-hero__side { text-align: left; width: 100%; }
  .widget-clima { flex-wrap: wrap; }
  .widget-clima__ver { width: 100%; }
}

/* ============================================================
   Noticias — listado y detalle
   ============================================================ */
.paginacion { display: flex; gap: .5rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.paginacion a {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .8rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--blanco);
  color: var(--tinta); font-weight: 600;
}
.paginacion a:hover { border-color: var(--azul); color: var(--azul); }
.paginacion a.activa { background: var(--azul); color: #fff; border-color: var(--azul); }

.noticia-detalle { max-width: 820px; }
.noticia-detalle > a { display: inline-block; margin-bottom: 1.5rem; font-weight: 600; }
.noticia-detalle h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: .3rem 0 .4rem; }
.noticia-detalle > .noticia__fecha { display: block; margin-bottom: 1.5rem; }
/* Galería de la noticia: imagen principal + miniaturas + lightbox (estilo misionesconecta). */
.galeria { margin: 0 0 1.5rem; }
.galeria__principal {
  position: relative; aspect-ratio: 16 / 9; background: #0b1220;
  border-radius: var(--radio); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.galeria__principal .galeria__img {
  width: 100%; height: 100%; object-fit: contain; cursor: zoom-in;
}
.galeria__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .5); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.galeria__nav:hover { background: rgba(0, 0, 0, .78); }
.galeria__nav--prev { left: .75rem; }
.galeria__nav--next { right: .75rem; }

.galeria__thumbs {
  display: flex; gap: .6rem; overflow-x: auto;
  padding: .75rem 0 .25rem; scrollbar-width: thin;
}
.galeria__thumb {
  flex: 0 0 auto; width: 100px; height: 70px;
  padding: 0; border: 2px solid transparent; border-radius: 10px;
  overflow: hidden; cursor: pointer; background: none; opacity: .5;
  transition: opacity .2s, border-color .2s;
}
.galeria__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria__thumb.activa { opacity: 1; border-color: var(--celeste); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 2rem;
  background: rgba(5, 10, 42, .94);
}
.lightbox.abierta { display: flex; }
.lightbox__img {
  max-width: 95%; max-height: 82vh; object-fit: contain;
  border: 6px solid #fff; border-radius: 8px;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5);
}
.lightbox__cerrar {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .3); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
@media (max-width: 560px) {
  .lightbox { padding: 1rem; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox__nav--prev { left: .5rem; }
  .lightbox__nav--next { right: .5rem; }
}

/* Galería simple de la Guía Local (fotos extra de un lugar). */
.galeria-lugar {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem; margin-bottom: 1.5rem;
}
.galeria-lugar img {
  width: 100%; height: 200px; object-fit: cover;
  border-radius: var(--radio); border: 1px solid var(--borde);
}
.noticia-detalle__texto { font-size: 1.05rem; line-height: 1.7; }

/* ============================================================
   Áreas de gobierno
   ============================================================ */
.hero--pantalla .hero__inner { padding: 3rem 0 2.75rem; }
.hero--pantalla h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
/* El hero interior es más bajo: el escudo de marca de agua va más chico para no cortarse. */
.hero--pantalla::after { background-size: 220px; }

/* Tarjeta de área (imagen full-bleed + cuerpo) */
.tarjeta.area { overflow: hidden; }
.tarjeta.area .area__img { margin: -1.4rem -1.4rem 1rem; }
.area__img {
  height: 150px; background: linear-gradient(135deg, var(--azul-2), var(--celeste-d));
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 2rem;
}
.area__img img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta.area .flecha { margin-top: auto; }
.area__responsable { display: block; }
.area__responsable-nombre { font-size: .9rem; color: var(--tinta); font-weight: 700; }
.area__cargo { font-size: .8rem; font-weight: 600; color: var(--tinta-suave); }
.tarjeta__icono--emoji { font-size: 1.7rem; line-height: 1; }

/* Organigrama */
.organigrama, .organigrama ol { list-style: none; margin: 0; padding: 0; }
.organigrama ol { margin-left: 1.5rem; border-left: 2px solid var(--borde); padding-left: 1.25rem; }
.organigrama__nodo {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .9rem 1.1rem; margin: .6rem 0; box-shadow: var(--sombra);
}
.organigrama__nodo a { font-weight: 700; color: var(--azul); font-size: 1.02rem; }
.organigrama__nodo a:hover { color: var(--celeste-d); }
.organigrama__emoji { font-size: 1.5rem; line-height: 1; }
.organigrama__cargo { font-size: .8rem; color: var(--tinta-suave); }

/* Detalle de área */
.area-detalle { max-width: 860px; }
.area-detalle__volver { display: inline-block; margin-bottom: 1.5rem; font-weight: 600; }
.area-detalle__cabeza { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.5rem; }
.area-detalle__img { flex: 0 0 220px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); }
.area-detalle__img img { width: 100%; height: 180px; object-fit: cover; }
.area-detalle__titulo { flex: 1; min-width: 240px; }
.area-detalle__emoji { font-size: 2.6rem; line-height: 1; }
.area-detalle__titulo h1 { margin: .4rem 0 .3rem; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.area-detalle__responsable { margin: 0; color: var(--tinta-suave); }
.area-detalle__personas { display: flex; flex-direction: column; gap: .3rem; margin-top: .35rem; }
.area-detalle__persona { font-size: 1rem; color: var(--tinta-suave); }
.area-detalle__persona strong { color: var(--tinta); }
.area-detalle__persona span { color: var(--tinta-suave); }
.area-detalle__desc { font-size: 1.05rem; line-height: 1.7; margin: 1.5rem 0; }
.area-detalle__datos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 1.5rem 0;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem;
}
.dato { display: flex; gap: .7rem; align-items: flex-start; }
.dato__i { font-size: 1.3rem; line-height: 1.3; }
.dato__lbl {
  display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-suave);
}
.dato div { font-size: .95rem; }

.area-detalle__wa {
  justify-self: start; align-self: start;
  padding: .5rem 1.1rem; font-size: .9rem;
  background: #25d366; color: #fff; border-color: transparent;
}
.area-detalle__wa:hover { background: #1fb958; color: #fff; }

@media (max-width: 560px) {
  .area-detalle__datos { grid-template-columns: 1fr; }
  .area-detalle__img { flex-basis: 100%; }
}

/* Directorio de áreas (/areas): fichas completas en una sola página. */
.area-bloque { margin-bottom: 3.5rem; }
.area-bloque:last-child { margin-bottom: 0; }

.area-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.area-card--raiz {
  border-radius: var(--radio-lg);
  padding: 2rem;
  border-color: rgba(0, 16, 128, .18);
  box-shadow: var(--sombra-lg);
}

.area-card__cabeza { display: flex; align-items: center; gap: 1rem; }
.area-card__emoji {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; line-height: 1;
  background: rgba(0, 16, 128, .08);
}
.area-card--raiz .area-card__emoji { width: 68px; height: 68px; font-size: 2.4rem; border-radius: 18px; }

.area-card__img {
  height: 160px; border-radius: var(--radio); overflow: hidden;
  background: linear-gradient(135deg, var(--azul-2), var(--celeste-d));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85); font-size: 2rem;
}
.area-card__img img { width: 100%; height: 100%; object-fit: cover; }
.area-card--raiz .area-card__img { height: 220px; }

.area-card__titulo { min-width: 0; }
.area-card__titulo h3 { margin: 0; font-size: 1.15rem; color: var(--azul); }
.area-card--raiz .area-card__titulo h3 { font-size: 1.5rem; }
.area-card__personas { display: flex; flex-direction: column; gap: .4rem; }
.area-card__personas-lbl {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-suave);
}
.area-card__personas-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .25rem;
}
.area-card__personas-lista li { font-size: .95rem; }
.area-card__personas-lista li strong { color: var(--tinta); }
.area-card__personas-lista li span { color: var(--tinta-suave); }

.area-card__desc { margin: 0; color: var(--tinta-suave); font-size: .97rem; line-height: 1.65; }

.area-card__datos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.1rem;
}
.area-card__wa {
  grid-column: 1 / -1; justify-self: start;
  padding: .55rem 1.1rem; font-size: .9rem;
}

.area-hijos { margin-top: 1.5rem; }
.area-hijos__lbl {
  display: block; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--celeste-d); margin-bottom: .9rem;
}

@media (max-width: 560px) {
  .area-card__datos { grid-template-columns: 1fr; }
  .area-card--raiz { padding: 1.4rem; }
  .area-card__cabeza { align-items: flex-start; }
}

/* Mapa del lugar (Leaflet + CARTO) */
.lugar-mapa { margin: 1.5rem 0 0; }
.lugar-mapa h2 { margin: 0 0 .75rem; }
.lugar-mapa__lienzo {
  height: 340px; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--borde); background: #eceff1;
}
.lugar-mapa h3 { font-size: 1.5em; margin: 1.25rem 0 .75rem; }
.lugar-mapa__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }

@media (max-width: 560px) {
  .lugar-mapa__lienzo { height: 260px; }
}

/* ============================================================
   Fiesta de la Alegría
   ============================================================ */
/* Franja de datos del evento (dentro del hero). */
.fiesta-datos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.fiesta-dato {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  padding: .5rem .95rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  color: #fff;
}
.fiesta-dato__i { font-size: 1.1rem; line-height: 1; }

/* Título de sección centrado (candidatas e historial): el contenido debajo
   está centrado, así que el título también lo está para mantener el eje. */
.seccion__cabeza--centrada {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .3rem; margin-bottom: 2.5rem;
}
.seccion__cabeza--centrada .seccion__kicker { margin-bottom: 0; }
.seccion__cabeza--centrada h2 { text-wrap: balance; }
.seccion__cabeza--centrada::after {
  content: ""; width: 56px; height: 4px; border-radius: 999px; margin-top: .4rem;
  background: linear-gradient(90deg, var(--celeste), var(--celeste-d));
}

/* Tarjetas centradas (candidatas y embajadoras históricas): flex centrado
   para que las filas incompletas queden centradas, como en raíces. */
.tarjetas-centradas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem;
}
.tarjetas-centradas > * { flex: 0 0 270px; max-width: 100%; }
@media (max-width: 560px) {
  .tarjetas-centradas > * { flex: 0 0 100%; }
}

/* Tarjeta de candidata: foto full-bleed arriba, cuerpo abajo. */
.candidata { padding: 0; overflow: hidden; gap: 0; }
.candidata__foto {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--azul-2), var(--celeste-d));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .85); font-size: 3rem;
}
.candidata__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform .35s ease;
}
.candidata:hover .candidata__foto img { transform: scale(1.04); }
.candidata__cuerpo { padding: 1.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; }
.candidata__badge {
  align-self: center;
  background: linear-gradient(135deg, var(--celeste), var(--celeste-d)); color: #fff;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .28rem .8rem; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(16, 144, 240, .35);
}
.candidata--ganadora {
  border-color: var(--celeste);
  box-shadow: 0 0 0 3px rgba(16, 144, 240, .16), var(--sombra);
}
.candidata h3 { margin: 0; font-size: 1.15rem; color: var(--tinta); letter-spacing: -.01em; }
.candidata__edad {
  font-size: .85rem; font-weight: 600; color: var(--celeste-d);
  letter-spacing: .02em;
}
.candidata p { margin: 0; color: var(--tinta-suave); font-size: .93rem; line-height: 1.6; }

/* Historial de embajadoras. */
.historial-card { align-items: center; text-align: center; }
.historial-card__anio {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--celeste-d);
}
.historial-card__foto {
  width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--borde); background: linear-gradient(135deg, var(--azul-2), var(--celeste-d));
}
.historial-card__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.historial-card h3 { margin: .25rem 0 0; font-size: 1.05rem; }
.historial-card__vacio { margin: .5rem 0 0; color: var(--gris); font-style: italic; }
.historial-card--actual {
  border-color: var(--celeste);
  box-shadow: 0 0 0 3px rgba(16, 144, 240, .16), var(--sombra);
}
.historial-card__badge {
  align-self: center;
  background: linear-gradient(135deg, var(--celeste), var(--celeste-d)); color: #fff;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .28rem .8rem; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(16, 144, 240, .35);
}

/* Botones "cómo llegar" del mapa (pill, estilo raíces). */
.btn-pill { border-radius: 999px; }
.btn-borde { background: transparent; color: var(--tinta); border-color: var(--borde); }
.btn-borde:hover { background: transparent; color: var(--celeste-d); border-color: var(--celeste); }

/* Galería de la Fiesta (fotos + videos por edición). */
/* Barra de navegación por ediciones (pills de años). */
.gal-anios {
  position: sticky; top: 76px; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.gal-anios__inner {
  display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 0;
}
.gal-anios__pill {
  display: inline-flex; align-items: center;
  padding: .42rem 1.1rem; border-radius: 999px;
  font-weight: 700; font-size: .9rem; color: var(--tinta);
  border: 1px solid var(--borde); background: var(--blanco);
  text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.gal-anios__pill:hover { border-color: var(--celeste); color: var(--celeste-d); }
.gal-anios__pill--activo { background: var(--celeste); border-color: var(--celeste); color: #fff; }

/* Sección de edición: ancla con margen para header + barra de años. */
.gal-edicion { scroll-margin-top: 140px; }

/* Encabezado de edición: año protagonista. */
.gal-cabeza h2 { font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: -.03em; color: var(--azul); }
.gal-cabeza::after { order: 2; }
.gal-cabeza .gal-meta { order: 3; }
.gal-meta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0; font-size: .92rem; font-weight: 600; color: var(--tinta-suave);
}
.gal-meta__sep { color: var(--gris); }

/* Grilla mixta (fotos + videos). */
.galeria-fiesta {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .85rem;
}
.galeria-fiesta__item {
  position: relative; padding: 0; border: 0; background: var(--fondo); cursor: zoom-in;
  border-radius: var(--radio); overflow: hidden;
  aspect-ratio: 4 / 3; display: block; box-shadow: var(--sombra);
}
.galeria-fiesta__item img,
.galeria-fiesta__item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.galeria-fiesta__item:hover img,
.galeria-fiesta__item:hover video { transform: scale(1.06); }

/* Overlay de lupa (fotos). */
.galeria-fiesta__lupa {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, background .2s ease;
}
.galeria-fiesta__item:hover .galeria-fiesta__lupa { opacity: 1; background: rgba(0, 16, 128, .32); }

/* Overlay de play (videos). */
.galeria-fiesta__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.galeria-fiesta__play span {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0, 16, 128, .6); color: #fff;
  font-size: 1.25rem; padding-left: .2rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .2s ease, background .2s ease;
}
.galeria-fiesta__item:hover .galeria-fiesta__play span {
  transform: scale(1.08); background: rgba(0, 16, 128, .78);
}

/* Lightbox: contador + video. */
.lightbox__contador {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, .55); color: #fff;
  padding: .3rem .85rem; border-radius: 999px; font-size: .9rem; font-weight: 700;
  letter-spacing: .05em;
}
.lightbox__video {
  max-width: 95%; max-height: 82vh;
  border-radius: 8px; background: #000;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5);
  display: none;
}

/* CTA "Ver galería" (banner azul antes del mapa). */
.cta-galeria {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--azul), var(--azul-2));
  color: #fff; border-radius: var(--radio-lg); padding: 2rem 2.25rem;
  box-shadow: var(--sombra-lg);
}
.cta-galeria h2 { color: #fff; font-size: 1.35rem; margin: 0 0 .3rem; }
.cta-galeria p { margin: 0; color: rgba(255, 255, 255, .85); }
.cta-galeria .btn { flex-shrink: 0; }