:root{ 
  /* Paleta VERDE institucional (desde las capturas) */
  --emerald-900:#0d4f43;  /* borde oscuro */
  --emerald-800:#0e5f50;
  --emerald-700:#116b59;  /* navbar hover */
  --emerald-600:#137764;  /* botones primarios */
  --emerald-500:#16836f;  /* acentos */
  --emerald-100:#d9efe9;  /* chips claros */

  --bg:#f5f7f6;
  --card:#ffffff;
  --ink:#0f1b16;
  --muted:#6b7b73;

  --brand:var(--emerald-600);
  --brand-strong:var(--emerald-700);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:system-ui, -apple-system, Segoe UI, Roboto, "Plus Jakarta Sans", Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
}

/* ===========================
   HEADER
   =========================== */
.site-header{
  background:#0f5f52; /* franja superior */
  color:#fff;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-header .container{
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand{
  color:#fff; text-decoration:none;
  display:flex; align-items:center; gap:.55rem;
  font-weight:800; letter-spacing:.2px;
}
.brand img{display:block}
.site-header .nav{display:flex; align-items:center; gap:18px}
.site-header .nav-link{
  color:#e9fffb; font-weight:600; text-decoration:none;
  position:relative; padding:.25rem 0;
}
.site-header .nav-link::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:0%; height:2px; background:#e9fffb;
  transition: width .25s ease; border-radius:2px; opacity:.9;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus{color:#fff}
.site-header .nav-link:hover::after,
.site-header .nav-link:focus::after,
.site-header .nav-link.active::after{width:100%}
.theme-toggle{
  border:1px solid rgba(255,255,255,.35); background:transparent;
  color:#fff; border-radius:10px; padding:.45rem .6rem;
  transition:transform .15s ease, background .2s ease;
}
.theme-toggle:hover{transform: translateY(-1px); background:rgba(255,255,255,.08)}
#btnLogout{border-color: rgba(255,255,255,.45); color:#fff}
#btnLogout:hover{background: rgba(255,255,255,.12); color:#fff}
#btnLogin{background: var(--emerald-600); border-color: var(--emerald-600); font-weight:700}
#btnLogin:hover{background: var(--emerald-700); border-color: var(--emerald-700)}
#roleBadge.badge{
  background: rgba(255,255,255,.18); color:#fff;
  border:1px solid rgba(255,255,255,.28);
  font-weight:600; padding:.4rem .55rem; border-radius:999px;
}

/* ===========================
   BOTONES
   =========================== */
.btn-primary{
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-strong);
  --bs-btn-hover-border-color:var(--brand-strong);
}
.btn-outline-primary{
  --bs-btn-color:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand);
  --bs-btn-hover-border-color:var(--brand);
  --bs-btn-hover-color:#fff;
}
.btn-ghost, .btn-ghost-light{
  background:transparent; border:1px solid rgba(0,0,0,.08);
}
.btn-ghost-light{color:#fff; border-color:rgba(255,255,255,.35)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}

/* ===========================
   HERO
   =========================== */
.hero-emerald{
  background:linear-gradient(135deg, #0f5f52 0%, #0d4f43 100%);
  color:#fff; padding:56px 0;
}
.hero-grid{
  display:grid; grid-template-columns:1.2fr .9fr; gap:28px; align-items:center;
}
.hero-emerald .overline{opacity:.9; letter-spacing:.4px}
.underline{border-bottom:6px solid rgba(255,255,255,.65); padding-bottom:.05em}

/* ===========================
   CARDS
   =========================== */
.card.elevate{border:none; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08)}
.info-card img{width:100%; height:160px; object-fit:cover; border-radius:16px 16px 0 0}
.pill-card{
  background:var(--card); border:1px solid #e5efec; padding:14px 18px; border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.05)
}

/* ===========================
   STATS
   =========================== */
.stats .stat{background:var(--card); border:1px solid #e5efec; border-radius:12px; padding:18px}
.stats .num{font-size:32px; font-weight:800; color:var(--brand)}

/* ===========================
   FOOTER (FULL-BLEED)
   =========================== */
.site-footer {
  background: linear-gradient(180deg, #0e2b26 0%, #09332e 100%);
  color: #dbe7e4;
  padding: 20px 0 15px;   /* antes 60px 0 30px → ahora compacto */
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .1) inset;
  margin-top: 30px;       /* menos separación con el contenido */
  font-family: 'Plus Jakarta Sans', sans-serif;

  /* Full-bleed */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Centrado de container */
.site-footer .container,
.site-footer .container-sm,
.site-footer .container-md,
.site-footer .container-lg,
.site-footer .container-xl,
.site-footer .container-xxl {
  max-width: 1200px !important;
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Grid */
.site-footer .grid-4 {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 20px;  /* más compacto */
}

/* Títulos */
.site-footer h4,
.site-footer h5,
.site-footer .h6 {
  color: #fff;
  margin: 0 0 .5rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .2px;
  position: relative;
}
.site-footer h4::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: #e6fffb;
}

/* Textos */
.site-footer p {
  margin: .25rem 0;
  color: #d6ece7;
  line-height: 1.5;
  font-size: .9rem;
}

/* Links */
.site-footer a {
  color: #e6fffb;
  text-decoration: none;
  position: relative;
  transition: color .2s ease;
}
.site-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: #e6fffb;
  transition: width .3s ease;
  border-radius: 2px;
  opacity: .85;
}
.site-footer a:hover {
  color: #fff;
}
.site-footer a:hover::after {
  width: 100%;
}

/* Botón */
.site-footer .btn.btn-ghost {
  color: #e6fffb;
  border: 1px solid rgba(230, 255, 251, .35);
  background: transparent;
  border-radius: 10px;
  padding: .4rem .9rem;
  font-size: .85rem;
  transition: all .25s ease;
}
.site-footer .btn.btn-ghost:hover {
  background: rgba(230, 255, 251, .15);
  border-color: #e6fffb;
  transform: translateY(-2px);
}

/* Redes */
.site-footer .socials a {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  margin-right: 8px;
  font-size: .95rem;
  transition: transform .2s ease, background .25s ease, border-color .25s ease;
}
.site-footer .socials a:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgba(230, 255, 251, .15);
  border-color: #e6fffb;
  color: #fff;
}

/* Línea divisoria */
.site-footer::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
  margin-top: 15px;  /* antes 30px */
}
.site-footer .copy {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: .8rem;
  color: #cfe5df;
  margin-top: 10px;
  text-align: center;
}

/* 📱 Responsivo */
@media (max-width: 992px) {
  .site-footer .grid-4 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
@media (max-width: 576px) {
  .site-footer .grid-4 {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  .site-footer h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .site-footer .socials {
    justify-content: center;
  }
}



/* ===========================
   LIGHTBOX
   =========================== */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:1050}
.lb-stage img, .lb-stage iframe{max-width:min(100vw - 80px, 1100px); max-height:80vh; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.lb-close{position:absolute; top:16px; right:20px; font-size:30px; background:transparent; color:#fff; border:0}

/* ===========================
   BOTÓN TO TOP
   =========================== */
.to-top{position:fixed; right:18px; bottom:18px; border-radius:50%; width:44px; height:44px; border:0; background:var(--brand); color:#fff; display:none}
.to-top.show{display:flex; align-items:center; justify-content:center}

/* ===========================
   AUTH
   =========================== */
.auth-bg{display:grid; place-items:center; min-height:100vh; background:linear-gradient(135deg, #0f5f52, #0d4f43)}
.auth-card{width: min(420px, 90%); padding:24px; background:var(--card)}

/* ===========================
   VARIANTES
   =========================== */
.badge.bg-soft{background:var(--emerald-100); color:var(--emerald-700)}
.btn-outline-light-subtle{border-color:rgba(255,255,255,.35); color:#fff}

/* ===========================
   RESPONSIVE GENERAL
   =========================== */
@media (max-width: 992px){
  .hero-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .site-header .nav{display:none}
}
@media (max-width: 576px){
  .grid-4{grid-template-columns:1fr}
}

/* Píldoras (ya con hover verde) */
.pill-card{
  background: var(--card);
  border: 1px solid #e5efec;
  padding: 14px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  font-weight: 700;
  color: var(--emerald-700);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  width: 100%;
}
.pill-card:hover{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.pill-card:focus-visible{
  outline: 3px solid rgba(19,119,100,.35);
  outline-offset: 3px;
}

/* Panel inline */
.pill-panel{
  margin: 16px auto 0;
  max-width: 900px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #e5efec;
}
.pill-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; margin-bottom: 8px;
}
#pillTitle{ color: var(--emerald-700); font-weight: 800; }
#pillDesc{ line-height: 1.5; }

/* Animación suave mostrar/ocultar */
.pill-panel[hidden]{ display:none !important; }
.pill-panel.show{ animation: panelIn .18s ease-out both; }
@keyframes panelIn{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Paleta ya definida: --brand y --emerald-700 */
:root{
  --ring-bg:#e9e9e9;
  --ring-green: var(--emerald-700, #116b59);
}

/* Contenedor / SVG */
.stat{display:flex; flex-direction:column; align-items:center}
.circle{position:relative; width:140px; height:140px}
.circle svg{transform:rotate(-90deg); width:100%; height:100%}
circle{fill:none; stroke-width:12; r:56; cx:70; cy:70}
circle.bg{stroke:var(--ring-bg)}
circle.progress{
  stroke: var(--ring-green);             /* se sobrescribe en JS según avance */
  stroke-linecap: round;
  stroke-dasharray: 352;                 /* 2πr (≈ 351.86) */
  stroke-dashoffset: 352;
  transition: stroke-dashoffset .2s linear;
}

.num{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:800; font-size:28px; color: var(--emerald-700);
}

.label{margin-top:10px; font-weight:600}

/* Animación de aparición */
.stat .circle{animation: pop .35s ease-out}
@keyframes pop{from{transform:scale(.98); opacity:.6} to{transform:scale(1); opacity:1}}
/* ===== FIX visual para el slider ===== */
.hero-media{
  position: relative;
  overflow: hidden;
  border-radius: 16px;             /* respeta .card.elevate */
  background: #0f5f52;             /* color de fondo si tarda la imagen */
  min-height: 300px;               /* altura base (ajústala si quieres) */
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Todas las imágenes apiladas y recortadas correctamente */
.hero-media .slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .45s ease, transform .6s ease;
  display: block !important;       /* evita display:none heredado */
  border-radius: inherit;
}
.hero-media .slide.active{         /* la visible */
  opacity: 1;
  transform: scale(1);
}

/* Controles: quita el estilo de botón nativo/Bootstrap y flótalos */
.hero-media .slide-ctrl{
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;

  /* reset del botón nativo */
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;

  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px) saturate(110%);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: background .2s ease, transform .15s ease, opacity .2s ease;
}
.hero-media .slide-ctrl.prev{ left: 10px; }
.hero-media .slide-ctrl.next{ right: 10px; }
.hero-media .slide-ctrl:hover{ background: rgba(255,255,255,.28); transform: translateY(-1px); }
.hero-media .slide-ctrl:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }

/* Muestra los controles al pasar el mouse en desktop */
@media (hover:hover){
  .hero-media .slide-ctrl{ opacity: 0; }
  .hero-media:hover .slide-ctrl{ opacity: 1; }
}

/* Dots */
.hero-media .slider-dots{
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 8px;
  z-index: 6;
}
.hero-media .slider-dots button,
.hero-media .slider-dots .dot{
  width: 10px; height: 10px; border-radius: 999px;
  border: 0; padding: 0;
  background: rgba(255,255,255,.45);
  box-shadow: 0 1px 3px rgba(0,0,0,.25) inset;
  transition: transform .15s ease, background .2s ease, width .2s ease;
}
.hero-media .slider-dots button:hover{ transform: translateY(-1px); background: rgba(255,255,255,.75); }
.hero-media .slider-dots .active{ width: 22px; background: #e9fffb; }

/* Soporte para usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .hero-media .slide{ transition: opacity .2s linear; transform: none !important; }
  .hero-media .slide-ctrl{ transition: none; }
}
/* ===== Noticias ===== */
.section-news{
  padding: 28px 0 40px;
}
.section-news .news-head{
  text-align:center; margin-bottom: 22px;
}
.section-news .news-head .overline{
  text-transform: uppercase; color: var(--muted);
  letter-spacing: .1em; font-weight: 700;
}
.section-news .news-head h2{
  margin: 6px 0 0;
  font-weight: 800; letter-spacing:.02em;
}
.section-news .news-head h2 span{ font-weight:700; color:#5c6670 }
.section-news .news-head h2 b{ font-weight:900; color: var(--ink) }

.news-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: start;
}

/* Destacada */
.news-feature{ overflow:hidden; }
.news-feature .nf-thumb{ display:block; }
.news-feature .nf-thumb img{
  width:100%; height: 320px; object-fit: cover; display:block;
  border-radius: 12px 12px 0 0;
}
.news-feature .nf-body{ padding: 14px 16px 16px; }
.nf-title{ font-size: 1.15rem; font-weight: 800; line-height:1.3; }
.nf-title a{ color: var(--ink); text-decoration: none; }
.nf-title a:hover{ text-decoration: underline; }
.nf-meta{ margin-top: 8px; color: var(--muted); font-weight: 600; }
.nf-meta i{ margin-right:8px; }

/* Lista derecha */
.news-list{
  position: relative;
  display: grid; gap: 22px;
  padding-left: 18px;
}
.news-list::before{
  content:""; position:absolute; left:0; top:0; bottom:54px;
  width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--emerald-600), transparent);
  opacity:.3;
}
.news-item{
  display:grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center;
}
.news-item .ni-thumb img{
  width: 120px; height: 84px; object-fit: cover; border-radius: 8px;
}
.news-item .ni-title{ font-weight: 800; line-height:1.25; margin:0 0 6px; }
.news-item .ni-title a{ color: var(--ink); text-decoration:none; }
.news-item .ni-title a:hover{ text-decoration: underline; }
.news-item .ni-meta{ color: var(--muted); font-weight: 600; }
.news-item .ni-meta i{ margin-right:8px; }

.news-cta{ margin-top: 6px; }
.btn-news{ display:inline-flex; gap:8px; align-items:center; }

/* ===== Gobierno / Contacto ===== */
.section-gov{ padding: 20px 0 40px; }
.gov-title{
  text-align:center; font-weight: 900; letter-spacing:.03em; margin-bottom: 18px;
}

.gov-grid{
  display:grid; grid-template-columns: .62fr 1.38fr; gap: 32px; align-items: start;
}

/* Perfil */
.gov-profile{
  text-align:center; padding: 18px;
}
.gp-photo{
  width: 180px; height: 180px; object-fit: cover; border-radius: 50%;
  display:block; margin: 0 auto 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  border: 6px solid #fff;
}
.gp-name{ font-weight: 900; margin: 8px 0 4px; }
.gp-role{ color: var(--muted); margin: 0; }
.gp-term{ color: var(--muted); margin: 0 0 10px; }
.gp-socials{ display:flex; gap:10px; justify-content:center; }
.gp-socials a{
  width: 40px; height: 40px; display:grid; place-items:center;
  border: 1px solid #e0ece8; border-radius: 50%;
  color: var(--emerald-700);
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.gp-socials a:hover{ transform: translateY(-2px); background: var(--emerald-100); color: var(--emerald-700); }

/* Enlaces/Secretarías */
.gov-links{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.gov-link{
  display:block; padding: 12px 8px 10px; border-radius: 8px;
  border: 1px solid #e5efec; background: #fff;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.gov-link span{ display:block; color: var(--muted); font-weight:700; font-size:.9rem; }
.gov-link b{
  display:block; font-weight: 900; color: var(--ink); line-height:1.15; margin-top: 2px;
  position:relative; padding-bottom:6px;
}
.gov-link b::after{
  content:""; position:absolute; left:0; right:40%; bottom:0; height:4px; border-radius:4px;
  background: rgba(22,131,111,.5);   /* subrayado en verde institucional */
}
.gov-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-color: var(--emerald-100);
}

.gov-cta{
  grid-column: 1 / -1;
  display:flex; justify-content:center; margin-top: 6px;
}

/* Responsive */
@media (max-width: 992px){
  .news-grid{ grid-template-columns: 1fr; }
  .news-feature .nf-thumb img{ height: 260px; }
  .gov-grid{ grid-template-columns: 1fr; }
  .gov-links{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .news-item{ grid-template-columns: 100px 1fr; }
  .news-item .ni-thumb img{ width:100px; height:72px; }
  .gov-links{ grid-template-columns: 1fr; }
}
/* ========================================
   GALERÍA MULTIMEDIA — MEJORADA
   ======================================== */

/* --- Botones de filtro --- */
.btn-group .btn {
  border-radius: 20px !important;
  padding: 0.5rem 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-group .btn.active,
.btn-group .btn:hover {
  background-color: #137764 !important;  /* verde institucional */
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- Tarjetas de la galería --- */
#gridGaleria .card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
#gridGaleria .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.15);
}

/* Imagen dentro de la card */
#gridGaleria .card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
#gridGaleria .card:hover img {
  transform: scale(1.08);
}

/* Títulos de la card */
#gridGaleria .card-body {
  padding: 0.75rem 1rem;
  background: #fff;
}
#gridGaleria .card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #137764;
  margin: 0;
}
#gridGaleria .card-text {
  font-size: 0.85rem;
  color: #555;
}

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}
.lightbox .lb-stage img,
.lightbox .lb-stage video {
  max-width: 90%;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.lb-close {
  position: absolute;
  top: 20px; right: 30px;
  font-size: 2rem;
  color: #fff;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.lb-close:hover {
  transform: scale(1.2);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  #gridGaleria .card img {
    height: 160px;
  }
}
/* ==============================
   GALERÍA: FIX DE LAYOUT + LOOK
   ============================== */

/* 1) Toma control del contenedor (aunque tenga class="row") */
#gridGaleria{
  display: grid !important;                           /* anula .row de Bootstrap */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;                                          /* equivalente a g-3 */
  align-items: stretch;
}

/* 2) Cada hijo (img, figure, a > img, etc.) se vuelve una “card” uniforme */
#gridGaleria > *{
  position: relative;
  background: var(--card);
  border: 1px solid #e5efec;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  aspect-ratio: 16 / 9;                               /* 🔸 miniaturas parejas */
  transition: transform .12s ease, box-shadow .22s ease, border-color .2s ease;
}
#gridGaleria > *:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  border-color: var(--emerald-100);
}

/* 3) Cubre el contenedor siempre (soporta <img>, <video>, <a><img>…) */
#gridGaleria > * > img,
#gridGaleria > * > video,
#gridGaleria > a > img,
#gridGaleria > figure > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                                  /* recorta sin deformar */
  display: block;
  transition: transform .35s ease;
}
#gridGaleria > *:hover > img,
#gridGaleria > *:hover > video{ transform: scale(1.03) }

/* 4) Badge para videos (opcional si marcas con data-kind="video") */
#gridGaleria > [data-kind="video"]::after{
  content: "VIDEO";
  position: absolute; left: 10px; top: 10px;
  font: 700 .72rem/1 system-ui, -apple-system, Segoe UI, Roboto, "Plus Jakarta Sans", Arial, sans-serif;
  color: var(--emerald-700);
  background: var(--emerald-100);
  padding: .25rem .5rem; border-radius: 999px;
}

/* 5) Títulos o captions dentro del item (si los agregas) */
#gridGaleria > * .g-caption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  color: #fff; font-weight: 800; font-size: .95rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* 6) Responsive: ajusta la densidad/ratio en pantallas pequeñas */
@media (max-width: 1200px){
  #gridGaleria{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 768px){
  #gridGaleria{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  #gridGaleria > *{ aspect-ratio: 16 / 10; }
}
@media (max-width: 480px){
  #gridGaleria{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  #gridGaleria > *{ aspect-ratio: 4 / 3; }
}

/* 7) Lightbox (por si se abría con tamaños raros) */
.lightbox .lb-stage img,
.lightbox .lb-stage video{
  max-width: 92vw; max-height: 86vh;
  border-radius: 12px; object-fit: contain;
}
/* =========================================
   ⚡️RESPONSIVO GLOBAL (PEGA AL FINAL)
   ========================================= */

/* Evita barra horizontal indeseada por full-bleed del footer o grids */
html, body { overflow-x: hidden; }

/* Medios fluidos por defecto */
img, video, iframe, canvas { max-width: 100%; height: auto; }

/* Tipografía fluida (no afecta tu paleta ni pesos) */
:root{
  --fs-hero: clamp(1.4rem, 1.1rem + 2.2vw, 2.4rem);
  --fs-h1: clamp(1.35rem, 1.1rem + 1.8vw, 2rem);
  --fs-h2: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
  --fs-body: clamp(.95rem, .9rem + .3vw, 1.05rem);
}
body{ font-size: var(--fs-body); }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }

/* ==========================
   Header: colapso elegante
   ========================== */
/* Si tienes un botón hamburguesa, estilízalo (opcional, no rompe si no existe) */
#navToggle{
  display:none;
  background:transparent; border:1px solid rgba(255,255,255,.35);
  color:#fff; border-radius:10px; padding:.45rem .6rem; font-weight:700;
}
@media (max-width: 992px){
  .site-header .container{ gap:10px; }
  #navToggle{ display:inline-flex; align-items:center; gap:.4rem; }
  /* Menú en columna al colapsar */
  .site-header .nav{
    display:flex; flex-direction:column; gap:10px;
    position: static; width: 100%;
  }
}

/* ==========================
   Hero y layout base
   ========================== */
.hero-emerald{ padding: clamp(28px, 4vw, 56px) 0; }
.hero-grid{
  grid-template-columns: 1.2fr .9fr;
  gap: clamp(14px, 3vw, 28px);
}
@media (max-width: 1200px){
  .hero-grid{ grid-template-columns: 1fr .9fr; }
}
@media (max-width: 992px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ min-height: 260px; }
}
@media (max-width: 576px){
  .hero-media{ min-height: 220px; }
}

/* ==========================
   Cards / info / stats
   ========================== */
.info-card img{ height: clamp(140px, 24vw, 160px); }
.stats{
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px){
  .stats{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .stats{ grid-template-columns: 1fr; }
}

/* ==========================
   Noticias (ya tenías base)
   ========================== */
.news-grid{
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(14px, 2.2vw, 26px);
}
.news-feature .nf-thumb img{
  height: clamp(200px, 30vw, 320px);
}
.news-item{
  grid-template-columns: 120px 1fr;
}
.news-item .ni-thumb img{
  width: 120px; height: 84px;
}
@media (max-width: 992px){
  .news-grid{ grid-template-columns: 1fr; }
  .news-list::before{ bottom: 30px; }
}
@media (max-width: 576px){
  .news-item{ grid-template-columns: 100px 1fr; }
  .news-item .ni-thumb img{ width:100px; height:72px; }
  .nf-title{ font-size: 1.05rem; }
}

/* ==========================
   Gobierno / Contacto
   ========================== */
.gov-grid{ grid-template-columns: .62fr 1.38fr; gap: clamp(16px, 3vw, 32px); }
.gov-links{ grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gp-photo{ width: clamp(120px, 20vw, 180px); height: clamp(120px, 20vw, 180px); }

@media (max-width: 992px){
  .gov-grid{ grid-template-columns: 1fr; }
  .gov-links{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .gov-links{ grid-template-columns: 1fr; }
}

/* ==========================
   Galería (refuerzos)
   ========================== */
#gridGaleria{
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(10px, 2vw, 14px);
}
@media (max-width: 1200px){
  #gridGaleria{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 768px){
  #gridGaleria{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 480px){
  #gridGaleria{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Ajusta ratio e imágenes en móviles para evitar “recortes raros” */
@media (max-width: 768px){
  #gridGaleria > *{ aspect-ratio: 16 / 10; }
}
@media (max-width: 480px){
  #gridGaleria > *{ aspect-ratio: 4 / 3; }
}

/* ==========================
   Footer (full‑bleed seguro)
   ========================== */
.site-footer{
  padding: clamp(34px, 6vw, 60px) 0 30px;
}
.site-footer .grid-4{
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: clamp(16px, 3vw, 32px);
}
@media (max-width: 992px){
  .site-footer .grid-4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px){
  .site-footer .grid-4{ grid-template-columns: 1fr; }
}

/* ==========================
   Accesibilidad/Motion
   ========================== */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* ==========================
   Pequeños utilitarios
   ========================== */
.container,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
  padding-left: clamp(12px, 3vw, 20px);
  padding-right: clamp(12px, 3vw, 20px);
}

/* Botón “to-top” más tolerante en móviles */
@media (max-width: 480px){
  .to-top{ right: 12px; bottom: 12px; width: 40px; height: 40px; }
}

/* Píldoras: que no se corten en pantallas estrechas */
.pill-panel{ padding: clamp(12px, 2.2vw, 16px) clamp(12px, 2.2vw, 18px); }
.pill-card{ padding: clamp(10px, 2vw, 14px) clamp(12px, 2.4vw, 18px); }

/* =============== */
/*  STICKY FOOTER  */
/* =============== */

/* 1) El body compone la página en 3 filas: header (auto) + contenido (1fr) + footer (auto) */
body{
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;      /* fallback */
  min-height: 100dvh;     /* corrige en móviles */
}

/* 2) Asegura que el footer siempre sea la última fila visible */
.site-footer{ grid-row: 3; }

/* 3) El botón "to-top" es fixed; evita que cree una fila extra en el grid */
.to-top{ grid-row: 1 / 2; }

/* 4) Evita que el full‑bleed (width:100vw) del footer cree scroll horizontal */
html, body{ overflow-x: hidden; }

/* 5) Si una página tiene muy poco contenido, añade un respiro antes del footer */
main, .container:has(> .row), .section-news, .section-gov, .hero-emerald{
  /* no cambia tu diseño; solo ayuda cuando el contenido es escaso */
  scroll-margin-top: 64px;
}
/* === GALERÍA — PATCH DE ANCHO Y STRETCH === */

/* El grid manda y estira a los hijos */
#gridGaleria{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin: 0 auto !important;
  padding: 10px;
  max-width: 1200px;                 /* centra y evita overflow */
  justify-items: stretch;            /* << estira horizontal */
  align-items: start;                /* evita estirar vertical */
  overflow-x: hidden;                /* sin barra abajo */
}

/* Cualquier tarjeta dentro del grid se estira al 100% */
#gridGaleria > *{
  width: 100% !important;            /* << clave para evitar “píldoras” delgadas */
  max-width: none !important;        /* por si algo le pone un tope */
  flex: 1 1 auto;                    /* si es flex interno */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e7efec;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  cursor: pointer;
}
#gridGaleria > *:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.16);
  border-color: rgba(19,119,100,.35);
}

/* Miniatura grande y consistente */
#gridGaleria img,
#gridGaleria video{
  display: block !important;
  width: 100% !important;
  height: 240px !important;          /* súbelo a 260–280 si quieres aún más grandes */
  object-fit: cover !important;
  background: #0b1224;
  transition: transform .3s ease, filter .25s ease;
}
#gridGaleria > *:hover img{ transform: scale(1.05); filter: saturate(1.05); }

/* Cuerpo de la tarjeta (funciona con .card-body, .media-body o .body) */
#gridGaleria .card-body,
#gridGaleria .media-body,
#gridGaleria > * > .body{
  padding: 14px;
  background:#fff;
}
#gridGaleria .card-title,
#gridGaleria .media-title,
#gridGaleria .item-title{
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--emerald-700);
}
#gridGaleria .card-text,
#gridGaleria .media-meta{
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 768px){
  #gridGaleria{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
  #gridGaleria img, #gridGaleria video{ height: 180px !important; }
}

/* Por si el overflow viene de otro contenedor */
html, body { overflow-x: clip; }
/* ===== Stats: tarjetas grandes, llenan su columna y son fluidas ===== */

/* Que cada columna Bootstrap estire la tarjeta a la misma altura */
.stats > [class^="col-"],
.stats > [class*=" col-"]{
  display: flex;
}
.stats > [class^="col-"] .stat,
.stats > [class*=" col-"] .stat{
  flex: 1 1 auto;                 /* ocupa todo el alto disponible */
}

/* Tarjeta */
.stats .stat{
  background: var(--card, #fff);
  border: 1px solid #e5efec;
  border-radius: 16px;
  padding: clamp(16px, 3.2vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(200px, 28vw, 280px); /* se ve grande entre 768–1200px */
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* Círculo */
.stats .circle{
  position: relative;
  width: clamp(120px, 18vw, 170px);
  height: clamp(120px, 18vw, 170px);
  margin-bottom: .9rem;
}
.stats .circle svg{
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
  display: block;
}
.stats .circle circle{
  fill: none;
  stroke-width: 12;
  cx: 50%;
  cy: 50%;
  r: calc((min(100%, 100%) - 12px)/2 - 6px);  /* radio dinámico, evita cortes */
}
.stats .circle .bg{ stroke: var(--ring-bg, #e9e9e9); }
.stats .circle .progress{
  stroke: var(--ring-green, #116b59);
  stroke-linecap: round;
  stroke-dasharray: 352;
  stroke-dashoffset: 352;
  transition: stroke-dashoffset .25s linear;
}

/* Número centrado dentro del círculo */
.stats .num{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 32px);
  color: var(--emerald-700, #116b59);
}

/* Etiqueta */
.stats .label{
  margin-top: .25rem;
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(.95rem, .6rem + .8vw, 1.1rem);
  color: var(--ink, #0f1b16);
  max-width: 22ch;
}

/* ------- Breakpoints pensados para Bootstrap ------- */
/* XS: 1 por fila (Bootstrap ya lo hace, refuerzo de alturas) */
@media (max-width: 575.98px){
  .stats .circle{
    width: clamp(128px, 56vw, 180px);
    height: clamp(128px, 56vw, 180px);
  }
  .stats .stat{ min-height: clamp(220px, 56vw, 320px); }
}

/* SM (>=576 y <768): 2 por fila (si no usas col-sm-6) */
@media (min-width:576px) and (max-width:767.98px){
  .stats > [class^="col-"],
  .stats > [class*=" col-"]{
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* MD (>=768): se respeta tu col-md-3 (4 por fila),
   pero mantenemos tamaño cómodo entre 768 y 1200px */
@media (min-width:768px) and (max-width:1199.98px){
  .stats .stat{ min-height: 260px; }
  .stats .circle{ width: 150px; height: 150px; }
}

/* XL (>=1200): un poco más compacto para no “sobresalir” */
@media (min-width:1200px){
  .stats .stat{ min-height: 240px; }
}

/* ============================
   DIRECTORIO — MAP TOOLBAR UI
   ============================ */
.map-toolbar{
  /* Usa tu paleta y look de tarjeta */
  backdrop-filter: blur(2px);
  border-radius: 16px;
  background: var(--card, #fff);
  border: 1px solid #e5efec;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 1rem 1rem 0.5rem;
}

.map-toolbar .form-label{
  color: var(--emerald-700);
  letter-spacing: .2px;
}

.map-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Botones grandes + micro-interacciones */
.map-actions .btn{
  border-radius: 12px;
  padding: .65rem 1rem;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.map-actions .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Énfasis institucional hacia tu verde */
.btn-outline-success{
  --bs-btn-color: var(--emerald-600);
  --bs-btn-border-color: var(--emerald-600);
  --bs-btn-hover-bg: var(--emerald-600);
  --bs-btn-hover-border-color: var(--emerald-600);
  --bs-btn-hover-color: #fff;
}

/* Complementos para los otros botones */
.btn-outline-primary{
  --bs-btn-color: var(--brand, #0d6efd);
  --bs-btn-border-color: var(--brand, #0d6efd);
  --bs-btn-hover-bg: var(--brand, #0d6efd);
  --bs-btn-hover-border-color: var(--brand, #0d6efd);
  --bs-btn-hover-color: #fff;
}
.btn-outline-secondary{
  --bs-btn-color: var(--ink, #0f1b16);
  --bs-btn-border-color: rgba(0,0,0,.25);
  --bs-btn-hover-bg: var(--emerald-100);
  --bs-btn-hover-border-color: rgba(0,0,0,.35);
}

/* Mapa con look de tarjeta */
.map-shell, #map{
  height: 520px;
  background: #eaf3f1;
  border-radius: 16px;
  border: 1px solid #e5efec;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  overflow: hidden;
}

/* === Tabla más legible: header sticky === */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  border-bottom: 1px solid #e9efec;
  padding: 0.75rem;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
  color: #333;
}

/* === Badge de rubro con paleta personalizada === */
.badge-rubro {
  background: var(--emerald-100);
  color: var(--emerald-700);
  font-weight: 700;
  border: 1px solid rgba(17, 107, 89, 0.15);
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  display: inline-block;
  white-space: nowrap;
}

/* === Links de nombre con subrayado elegante === */
#tbodyResultados a[data-id] {
  text-decoration: none;
  font-weight: 800;
  color: var(--emerald-700);
  border-bottom: 2px solid rgba(17, 107, 89, 0.2);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#tbodyResultados a[data-id]:hover {
  color: var(--emerald-600);
  border-color: rgba(17, 107, 89, 0.35);
}

/* === Responsive de la toolbar (si usás botones de acción) === */
@media (max-width: 576px) {
  .map-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-bottom: 0.5rem;
  }
}

/* === RESPONSIVE: scroll horizontal para pantallas pequeñas === */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.5rem;
}

/* === Evita que las columnas se colapsen en pantallas chicas === */
.table {
  min-width: 768px; /* Ajustable si tienes muchas columnas */
  width: 100%;
  border-collapse: collapse;
}

/* === Scrollbar estilizado en móviles (opcional) === */
.table-responsive::-webkit-scrollbar {
  height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}


/* ===== Directorio: layout sin caja blanca ===== */
.minw-220 { min-width: 220px; }

.map-actions .btn,
.d-flex.flex-wrap.gap-2 .btn {
  border-radius: 12px;
  padding: .65rem 1rem;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .22s ease;
}
.map-actions .btn:hover,
.d-flex.flex-wrap.gap-2 .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Asegura aire entre filtros/botones y el mapa */
#map { margin-top: .25rem; }

/* Responsive: botones en columna en pantallas chicas */
@media (max-width: 576px){
  .d-flex.flex-wrap.gap-2 { justify-content: stretch; }
  .d-flex.flex-wrap.gap-2 .btn { width: 100%; }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 25px;
}

h2 {
  font-size: 30px;
  color: var(--color-principal);
  margin-bottom: 25px;
  text-align: center;
  position: relative;
}

h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--color-principal);
  margin: 10px auto 0;
  border-radius: 2px;
}

.rubros {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
}

.rubro {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  flex: 1 1 calc(30% - 25px);
  border-radius: 15px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 25px 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.rubro:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.rubro img {
  width: 70px;
  height: 70px;
  margin-bottom: 15px;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s;
}

.rubro:hover img {
  transform: scale(1.1);
}

.rubro h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--color-principal);
}

.rubro p {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.5;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.galeria img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galeria img:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

@media (max-width: 1024px) {
  .rubro {
    flex: 1 1 calc(45% - 25px);
  }
}

@media (max-width: 768px) {
  h2 {
    font-size: 24px;
  }

  .rubro {
    flex: 1 1 100%;
    padding: 20px 15px;
  }

  .rubro img {
    width: 60px;
    height: 60px;
  }

  .galeria img {
    height: 160px;
  }
}
/* =======================================================
             SE AGREGO PARA LO DEL MAPA EN INDEX
   ======================================================= */
/* =======================================================
   Banner a pantalla completa (full-bleed) + layout base
   ======================================================= */
.section-intro.intro-spacious{
  /* ocupar todo el ancho aunque esté dentro de .container */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* espacios cómodos */
  padding: clamp(56px, 9vw, 120px) clamp(24px, 6vw, 96px);
  margin-block: clamp(16px, 3vw, 40px);
  padding-bottom: clamp(56px, 8vw, 96px); /* espacio para el icono inferior */

  /* sin esquinas para efecto de franja */
  border-radius: 0;

  /* fondo esmeralda difuminado */
  background:
    radial-gradient(1200px 380px at 85% 30%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, #116b59 0%, #0f8a6a 45%, #0ca577 100%);
  color: #fff;
}

/* =========================================
   Título, texto y botón (tipografía/espacio)
   ========================================= */
.section-intro h2{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 1vw, .8rem);
  text-align: center;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.2;
  margin: 0 0 .75rem 0;
  position: static; /* asegura que no afecte al icono */
}

.section-intro .intro-sub{
  max-width: 72ch;
  margin: 0 auto 1.25rem;
  text-align: center;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  opacity: .98;
}

.section-intro .btn-intro{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-inline: auto;               /* centrado */
  margin-bottom: clamp(12px, 2vw, 20px); /* respiro con el icono */
  padding: 14px 32px;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.section-intro .btn-intro:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

/* ==============================
   Icono de ubicación (parte baja)
   ============================== */
.section-intro .intro-loc{
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vw, 36px);
  transform: translateX(-50%);
  z-index: 1;

  display: grid;
  place-items: center;

  width: clamp(48px, 6vw, 72px);
  height: clamp(48px, 6vw, 72px);
  border-radius: 50%;
  background: #fff;
  color: #116b59;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);

  pointer-events: none; /* no bloquea el click del botón */
  animation: pinFloat 4s ease-in-out infinite;
}
.section-intro .intro-loc i{
  font-size: clamp(22px, 3.2vw, 30px);
}

/* Animación sutil del icono (respeta el centrado) */
@keyframes pinFloat{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%    { transform: translateX(-50%) translateY(-3px); }
}



/* Contenedor del directorio (se abre debajo) */
#directorio-section{
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(2, 24, 14, .18);
  padding: clamp(16px, 2.4vw, 24px);
}
#directorio-section[hidden]{ display:none !important; }

/* Botón cerrar rojo (ya lo tenías) */
#directorio-section .btn-close{
  position:absolute;
  top:10px; right:10px;
  width:40px; height:40px;
  border-radius:50%;
  background:#e53935; color:#fff; border:none;
  display:grid; place-items:center;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
#directorio-section .btn-close:hover{
  transform: scale(1.08);
  background:#c62828;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}
#directorio-section .btn-close:focus-visible{
  outline: 3px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}


/* ---------- Contenedor del directorio embebido ---------- */
#directorio-section{
  position: relative;
  margin-top: clamp(18px, 3vw, 28px);
  display:none;           /* lo controlas con JS */
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  padding: clamp(16px, 2.4vw, 24px);
  filter: var(--blur);
}
.dark #directorio-section,
[data-theme="dark"] #directorio-section{
  background: rgba(12,18,30,.65);
  border-color: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

/* Close button (usa .btn-close del index) */
#directorio-section .btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e53935; /* 🔴 Rojo base */
  color: #fff; /* Icono en blanco */
  border: none;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

#directorio-section .btn-close:hover {
  transform: scale(1.08);
  background: #c62828; /* 🔴 Rojo más oscuro al pasar el mouse */
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}

#directorio-section .btn-close:focus-visible {
  outline: 3px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}


/* ---------- Mapa ---------- */
#map{
  height: clamp(380px, 48vh, 520px);
  border-radius: var(--radius-lg);
  background: var(--ink-100);
  border: 1px solid var(--ink-300);
  box-shadow: var(--shadow-1);
}
.leaflet-control-zoom a{
  border-radius: 10px !important;
}
.map-legend{
  background: rgba(255,255,255,.9);
  border: 1px solid var(--ink-300);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-1);
  font-size: .92rem;
}
.dark .map-legend{
  background: rgba(20,26,36,.88);
  border-color: rgba(255,255,255,.12);
}

/* ---------- Panel de filtros / botones ---------- */
#directorio-main .form-label{
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: .35rem;
}
.dark #directorio-main .form-label{ color: var(--ink-900); }

#directorio-main .form-select,
#directorio-main input[type="search"]{
  border-radius: 12px;
  border-color: var(--ink-300);
  transition: box-shadow .18s ease, border-color .18s ease;
}
#directorio-main .form-select:focus,
#directorio-main input[type="search"]:focus{
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 .2rem rgba(16,185,129,.25);
}

#btnLocate.btn,
#btnFit.btn,
#btnClear.btn{
  border-radius: 999px;
  padding: .6rem 1.05rem;
  font-weight: 700;
}

/* ---------- Tarjeta y tabla de resultados ---------- */
#directorio-main .card{
  border-radius: var(--radius-xl);
  border: 1px solid var(--ink-300);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
#directorio-main .card-header{
  background: var(--ink-100);
  border-bottom: 1px solid var(--ink-300);
  font-weight: 700;
}
.dark #directorio-main .card-header{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}

#directorio-main table{
  --row-hover: rgba(16,185,129,.06);
}
#directorio-main thead th{
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--ink-300) !important;
  white-space: nowrap;
}
.dark #directorio-main thead th{ color: var(--ink-900); }

#directorio-main tbody td{
  vertical-align: middle;
}
#directorio-main tbody tr:hover{
  background: var(--row-hover);
}
#directorio-main tbody a[href^="#"],
#directorio-main tbody a[data-id]{
  text-decoration: none;
  border-bottom: 1px dashed var(--emerald-600);
}
#directorio-main tbody a[data-id]:hover{
  color: var(--emerald-700);
  border-bottom-style: solid;
}

/* Badge de rubro (colores ya vienen desde JS) */
.badge-rubro{
  font-weight: 700;
  border-radius: 999px;
  padding: .35rem .6rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

/* ---------- Micro-transiciones ---------- */
@media (prefers-reduced-motion:no-preference){
  .section-intro{ transition: box-shadow .25s ease, transform .25s ease; }
  .section-intro:hover{ transform: translateY(-1px); }
  #directorio-section{ transition: opacity .22s ease, transform .22s ease; }
  #directorio-section[style*="display: block"]{ opacity:1; transform:none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 576px){
  .section-intro h2{ font-size: 1.35rem; }
  #directorio-section{ padding: 14px; }
  #btnLocate.btn, #btnFit.btn, #btnClear.btn{ padding: .55rem .9rem; }
}

/* ---------- Accesibilidad extra ---------- */
#directorio-section :is(button, a, input, select):focus-visible{
  outline: 3px solid rgba(16,185,129,.55);
  outline-offset: 2px;
}

/* Opcional: estilo para icono de pin SVG que inyectas en JS */
.pin-icon svg{ filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }


/* =======================================================
               AQUI TERMINA LO DEL MAPA DE INDEX
   ======================================================= */
   /* =======================================================
/* =======================================================
             ORGANIGRAMA JAPEM - ESTILOS
   ======================================================= */

.section-news.organigrama {
    font-family: Arial, sans-serif;
    padding: 40px 20px;
    background: url('https://mijapem.com.mx/img/2con_orga2.png') no-repeat center top;
    background-size: contain; /* Mantiene proporciones del fondo */
    border: 3px solid #27ae60;
    position: relative;
    height: 1000px; /* Altura fija */
}

/* Ajuste: el recuadro externo iguala el tamaño de la imagen */
.section-news.organigrama {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  aspect-ratio: 1920 / 1080; /* ajusta según proporción de tu imagen real */
  height: auto;              /* deja que derive de la proporción */
  
}


.org-chart {
    position: relative;
    min-height: 70vh;
}

.box {
    background: #0f5f52;
    color: #fff;
    border: 2px solid #27ae60;
    padding: 16px 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;

    /* 🔹 Ajuste automático al texto */
    width: fit-content;      /* se adapta al contenido */
    min-width: 180px;        /* ancho mínimo */
    max-width: 320px;        /* ancho máximo */
    white-space: normal;     /* permite salto de línea */
    line-height: 1.3em;
    box-sizing: border-box;

    /* 🔹 Posición absoluta fija según tu HTML */
    position: absolute;
    transform: none !important; /* NO mover desde el centro */
    right: auto !important;
    bottom: auto !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* === Escalado responsivo de las cajas respecto a la imagen === */
.section-news.organigrama { --org-scale: 1; }  /* variable que controlaremos por JS */

.section-news.organigrama .org-chart { height: 100% !important; }

/* Escala tipografía, padding, bordes y anchos mínimos/máximos de las cajas */
.section-news.organigrama .org-chart .box {
  font-size: calc(16px * var(--org-scale)) !important;
  padding: calc(16px * var(--org-scale)) calc(20px * var(--org-scale)) !important;
  border-radius: calc(8px * var(--org-scale)) !important;
  min-width: calc(180px * var(--org-scale)) !important;
  max-width: calc(320px * var(--org-scale)) !important;
  box-shadow: 0 calc(4px * var(--org-scale)) calc(12px * var(--org-scale)) rgba(0,0,0,0.2) !important;
  line-height: calc(1.3em * var(--org-scale)) !important; /* mantiene proporción del texto */
}

/* Si tienes números/íconos dentro de .box, también escalarán suavemente */
.section-news.organigrama .org-chart .box * {
  font-size: inherit;
  line-height: inherit;
}
/* --- Hacer que las posiciones (%) dependan del tamaño real de la imagen --- */
.section-news.organigrama { position: relative; } /* ya lo tienes, lo reafirmo */
.section-news.organigrama .container {
  max-width: 100% !important;   /* que el organigrama use todo el ancho del recuadro */
  padding: 0 !important;         /* sin sangrías que desalineen respecto a la imagen */
}
.section-news.organigrama .org-chart {
  position: absolute !important; /* que las .box se posicionen respecto al recuadro/imagen */
  inset: 0 !important;           /* ocupa exactamente el área de la imagen */
  height: 100% !important;
  width: 100% !important;
  z-index: 1;                    /* cajas por encima del fondo */
}

/* === Organigrama: que las posiciones en % dependan del área completa de la imagen === */
.section-news.organigrama { 
  position: relative; 
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain; /* ya lo tenías; lo reafirmo aquí */
}

/* La .container no debe introducir márgenes internos que desplacen las cajas */
.section-news.organigrama .container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Las .box se posicionarán respecto a TODO el recuadro de la imagen */
.section-news.organigrama .org-chart {
  position: absolute !important;
  inset: 0 !important;     /* top/right/bottom/left = 0 */
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}


/* ===================== FLIP 3D FORZADO (agregar al final) ===================== */

/* La perspectiva debe vivir en el contenedor, no en la caja */
.section-news.organigrama .org-chart {
  perspective: 1000px !important;
}

/* Prepara cada caja para 3D y transición, sin cambiar su layout */
.section-news.organigrama .org-chart .box {
  transform: rotateY(0deg) !important;         /* estado base, vence el 'none !important' */
  transform-style: preserve-3d !important;
  transition: transform 600ms ease, color 150ms ease !important;
  backface-visibility: hidden !important;      /* oculta el reverso de la cara frontal */
  position: absolute;                           /* respeta tu posicionamiento */
}

/* Cara trasera: usa el texto de data-back, cubre totalmente la caja */
.section-news.organigrama .org-chart .box::after {
  content: attr(data-back);
  position: absolute;
  inset: 0;                                     /* top/right/bottom/left: 0 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  text-align: center;
  line-height: 1.3em;
  white-space: normal;

  background: #0f5f52;
  color: #fff;
  border: 2px solid #27ae60;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

  transform: rotateY(180deg) translateZ(1px);   /* gírala para que mire al frente al voltear */
  backface-visibility: hidden !important;
  pointer-events: none;                         /* que no bloquee hover */
}

/* Al pasar el cursor, gira la caja (180°) y "oculta" el texto frontal */
.section-news.organigrama .org-chart .box:hover {
  transform: rotateY(180deg) !important;        /* CLAVE: vence 'none !important' */
  color: transparent !important;                /* el texto del frente se hace invisible */
}

/* Opcional: mejora de suavidad (no cambia tu layout) */
.section-news.organigrama .org-chart .box {
  will-change: transform;
  transform-origin: center center !important;
}

/* En pantallas táctiles sin hover, desactiva flip para evitar confusión */
@media (hover: none) and (pointer: coarse) {
  .section-news.organigrama .org-chart .box:hover {
    transform: rotateY(0deg) !important;
    color: inherit !important;
  }
  .section-news.organigrama .org-chart .box::after {
    display: none !important;
  }

/* =======================================================
             AQUÍ TERMINA ORGANIGRAMA JAPEM - ESTILOS
   ======================================================= */


}