/* =========================================================
   VARIABLES BASE
========================================================= */
:root{
  --azul:#0b3c7a;
  --azul-claro:#1a5fa7;
  --borde:#c9d9ee;
}

/* RESET */
*{
  box-sizing:border-box;
}
body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#ffffff;
  color:#111;
}
a{
  text-decoration:none;
  color:inherit;
}

/* =========================================================
   TOPBAR
========================================================= */
.topbar{
  background:#ffffff;
  border-bottom:2px solid var(--azul-claro);
  font-size:0.8rem;
}
.topbar-inner{
  max-width:1400px;
  margin:auto;
  padding:6px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* izquierda */
.topbar-left{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--azul);
  font-weight:600;
  white-space:nowrap;
}
.topbar-left strong{
  font-weight:800;
}

/* centro */
.topbar-center{
  display:flex;
  gap:10px;
}
.topbar-center a{
  color:var(--azul);
  opacity:.85;
}
.topbar-center a:hover{
  opacity:1;
}

/* derecha */
.topbar-right{
  display:flex;
  gap:4px;
}
.topbar-btn{
  border:1px solid var(--azul-claro);
  padding:4px 10px;
  border-radius:0px;
  text-align:center;
  font-size:0.65rem;
  font-weight:700;
  color:var(--azul);
  background:#fff;
  white-space:nowrap;
}
.topbar-btn span{
  font-size:0.6rem;
  font-weight:500;
}
.topbar-btn:hover{
  background:var(--azul-claro);
  color:#fff;
}

/* responsive topbar */
@media(max-width:900px){
  .topbar-right{display:none;}
}
@media(max-width:600px){
  .topbar-center{display:none;}
}

/* =========================================================
   HEADER BRAND
========================================================= */
.header-brand{
  background:#ffffff;
}
.header-brand-inner{
  max-width:1400px;
  margin:auto;
  padding:18px 14px 10px;
  display:flex;
  align-items:center;
  gap:30px;
}
.brand-left img{
  height:58px;
  display:block;
}
.brand-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
}
.brand-slogan{
  font-size:1.15rem;
  font-weight:800;
  color:var(--azul-claro);
  white-space:nowrap;
}
.brand-line{
  height:2px;
  background:var(--azul-claro);
  flex:1;
  margin-top:4px;
}

/* =========================================================
   MENÚ PRINCIPAL
========================================================= */
/* =========================================================
   MENÚ PRINCIPAL – LIMPIO Y ALINEADO
========================================================= */

.main-nav{
  background:#ffffff;
}

.main-nav-inner{
  max-width:1400px;
  margin:auto;
  padding:20px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* CONTENEDOR */
.nav-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0;
  margin:0;
  list-style:none;
  flex-wrap:wrap;
}

/* ITEM */
.nav-tabs > li{
  position:relative;
  display:flex;
  align-items:center;
}

/* BOTÓN */
.nav-tabs > li > a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid var(--azul);
  background:#fff;
  color:var(--azul);
  font-size:0.9rem;
  font-weight:700;
  white-space:nowrap;
  line-height:1;
  transition:all .25s ease;
}

/* HOVER */
.nav-tabs > li > a:hover{
  background:var(--azul);
  color:#fff;
}

/* ================= DROPDOWNS ================= */

.nav-dropdown{
  display:flex;
  align-items:center;
}

.dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:240px;
  background:var(--azul);
  padding:8px 0;
  margin:0;
  list-style:none;
  border-radius:12px;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
  display:none;
  z-index:1000;
}

/* items dropdown */
.dropdown-menu li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  color:#fff;
  font-size:0.85rem;
  font-weight:600;
  transition:background .2s ease;
}

.dropdown-menu li a:hover{
  background:#f4b400;
  color:#000;
}

/* visible */
.nav-dropdown.open .dropdown-menu{
  display:block;
}

/* ================= ACCIONES DERECHA ================= */

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

@media(max-width:900px){
  .nav-actions{
    display:none;
  }
}

/* acciones */
.nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.btn-1512{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:var(--azul);
  color:#fff;
  font-weight:900;
  font-size:0.8rem;
  border-radius:8px;
}
.btn-chip{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:#dbeafe;
  color:var(--azul);
  font-weight:800;
  font-size:0.75rem;
  border-radius:8px;
}
.btn-chip:hover{background:#c7ddf6;}
.btn-1512:hover{background:#092f5f;}

@media(max-width:900px){
  .nav-actions{display:none;}
}

/* =========================================================
   HERO + ACCESOS (BLOQUE ÚNICO)
========================================================= */
.hero-slider{
  position:relative;
  width:100%;
  margin-bottom:380px; /* ⬅ espacio real para las cartillas */
}

.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;   /* 👈 ahora sí se ve grande */
}

.slide-caption h2,
.slide-caption .slide-tag{
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
}


/* slider */
.slider-wrapper{
  position:relative;
  width:100%;
  height:640px;          /* 👈 MÁS ALTO */
  max-height:85vh;       /* 👈 casi pantalla completa */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* imagen del banner */
.hero-img{
  width:100%;
  height:100%;
  object-fit:contain;    /* 👈 NO SE CORTA */
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.slide-gradient{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:45%;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.65) 100%
  );
}
.slide-caption{
  position:absolute;
  left:50%;
  bottom:70px;
  transform:translateX(-50%);
  width:100%;
  max-width:1400px;
  padding:0 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  color:#ffffff;
}
.slide-text{
  max-width:780px;
}
.slide-tag{
  font-size:0.85rem;
  font-weight:600;
  opacity:.9;
}
.slide-text h2{
  margin:6px 0 0;
  font-size:1.9rem;
  font-weight:800;
  line-height:1.2;
}
.slide-btn{
  background:#ffffff;
  color:#000;
  padding:8px 18px;
  border-radius:18px;
  font-weight:800;
  font-size:0.85rem;
  white-space:nowrap;
}

/* =========================================================
   ACCESOS RÁPIDOS (ANCLADOS AL HERO)
========================================================= */
.quick-access-exact{
  position:absolute;
  left:50%;
  top:120%;
  transform:translate(-50%, -50%);
  z-index:20;
}






.qa-grid-exact{
  display:grid;
  grid-template-columns:repeat(6, 150px);
  grid-template-rows:repeat(2, 180px);
  gap:4px;
}



.qa-item{
  height:180px;
  border-radius:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px;
  color:#ffffff;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(0,0,0,.28);

}
.qa-item i{
  font-size:2.6rem;
  margin-top:8px;
}

.qa-item span{
  font-size:0.8rem;
  font-weight:800;
  text-align:center;
  line-height:1.2;
  transform:none;       /* CLAVE */
  white-space:normal;
}
.qa-item.vertical span{
  transform: rotate(-90deg);
  white-space: nowrap;
}

.qa-item.blue{ background:#2f6fb2; }
.qa-item.navy{ background:#1e3a8a; }
.qa-item.teal{ background:#0f8f85; }


/* responsive hero */
@media(max-width:768px){
  .slider-wrapper{height:300px;}
  .slide-caption{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .slide-text h2{
    font-size:1.25rem;
  }
  .quick-access-exact{
    position:static;
    margin:24px auto 0;
  }
  .qa-item span{
    transform:none;
    margin:0;
  }
}



/* =========================================================
   NOTICIAS
========================================================= */


/* ================= NOTICIAS HEADER ================= */
.news-header{
  max-width:1400px;
  margin:60px auto 6px;
  padding:0 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

/* título izquierda */
.news-title h2{
  margin:0;
  font-size:1.35rem;
  font-weight:900;
  font-style:italic;      /* 👈 CLAVE */
  color:var(--azul);
}


.news-title h2{
  margin:0;
  font-size:1.35rem;
  font-weight:900;
  color:var(--azul);
}

/* botón boletín */
.news-bulletin{
  background:var(--azul);
  color:#ffffff;
  font-size:0.75rem;
  font-weight:600;
  padding:10px 18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.news-bulletin i{
  font-size:0.9rem;
}

/* línea azul */
.news-divider{
  max-width:1400px;
  height:2px;
  background:var(--azul);
  margin:0px auto 22px;
}




/* ================= NOTICIAS GRID ================= */
.news-grid{
  max-width:1400px;
  margin:0 auto 80px;
  padding:0 14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

/* CARD */
.news-card{
  background:transparent;   /* 👈 sin fondo */
  border-radius:0;
  box-shadow:none;          /* 👈 sin sombra */
  display:flex;
  flex-direction:column;
}



/* imagen */
.news-card img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;

  border-radius:0 0 50px 50px;     /* 👈 SOLO abajo */
}


/* contenido */
.news-content{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;   /* 👈 CLAVE */
  gap:10px;
}



.news-content h3{
  margin:0;
  font-size:0.95rem;
  font-weight:800;
  color:#000;
}

.news-content p{
  margin:0;
  font-size:0.8rem;
  line-height:1.4;
  color:#444;
}

.news-card::before{
  content:"";
  display:block;
  height:4px;
  background:var(--azul);          /* azul institucional */
}


.news-link{
  display:block;          /* 👈 CLAVE */
  margin:14px auto 0;     /* 👈 CLAVE */
  width:max-content;      /* 👈 evita que se estire */
  font-size:0.7rem;
  font-weight:700;
  padding:6px 18px;
  border:1px solid var(--azul);
  color:var(--azul);
  background:#fff;
  text-align:center;
}
.news-link:hover{
  background:var(--azul);
  color:#fff;
}



/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .news-grid{
    grid-template-columns:1fr;
  }
}




/* =========================================================
   BANNER PORTAL VECINAL (MISMO ANCHO QUE NOTICIAS)
========================================================= */

.portal-banner-section{
  margin:40px 0 80px; /* separación arriba y abajo */
}

.portal-banner-wrapper{
  max-width:1400px;     /* 👈 MISMO ancho que noticias */
  margin:0 auto;
  padding:0 14px;       /* 👈 MISMO padding */
}

.portal-banner-wrapper img{
  width:100%;
  height:auto;
  display:block;
}







/* ================= FOOTER MUNICIPAL ================= */

.footer-muni{
  background:#2f5f8f;
  color:#ffffff;
  padding:48px 0 36px;
  font-size:0.75rem;
}

.footer-inner{
  max-width:1400px;
  margin:auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:260px 1fr 360px;
  gap:36px;
  align-items:flex-start;
}

/* IZQUIERDA */
.footer-escudo{
  width:180px;
  height:auto;
  opacity:.95;
}

/* CENTRO */
.footer-brand img { 
  max-height: 40px;
  width: auto;
  margin-bottom: 10px;
}


.footer-info p{
  margin:0 0 6px;
  line-height:1.4;
}

.footer-hours{
  margin-top:8px;
}

.footer-phone{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
}

/* DERECHA */
.footer-slogan{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.footer-slogan strong{
  font-size:0.9rem;
}

.footer-line{
  height:1px;
  background:#ffffff;
  flex:1;
  opacity:.7;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0 0 16px;
}

.footer-links li{
  margin-bottom:4px;
}

.footer-links a{
  color:#ffffff;
  opacity:.9;
}

.footer-links a:hover{
  opacity:1;
  text-decoration:underline;
}

.footer-social{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

.footer-social span{
  margin-right:6px;
}

.footer-social a{
  font-size:1rem;
  color:#ffffff;
  opacity:.9;
}

.footer-social a:hover{
  opacity:1;
}

/* RESPONSIVE */
@media(max-width:900px){
  .footer-inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-left,
  .footer-right{
    justify-self:center;
  }

  .footer-slogan{
    justify-content:center;
  }
}







/* ================= INSTAGRAM ================= */
.instagram-section {
  background: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

.instagram-header {
  margin-bottom: 30px;
}

.instagram-header i {
  font-size: 40px;
  color: #e1306c;
}

.instagram-header h2 {
  margin: 10px 0 5px;
  font-size: 28px;
  color: #0b1740;
}

.instagram-header p {
  color: #6b7280;
  font-weight: 500;
}

.instagram-embed iframe {
  width: 100%;
  max-width: 540px;
  height: 600px;
  margin: 0 auto;
  border-radius: 16px;
}
/* ================= INSTAGRAM ================= */







/* =========================================================
   RESPONSIVE GLOBAL (TABLET + MOBILE)
========================================================= */

/* =========================
   <= 1024px (tablet)
========================= */
@media (max-width:1024px){

  .header-brand-inner,
  .main-nav-inner,
  .topbar-inner,
  .news-header,
  .news-grid,
  .portal-banner-wrapper,
  .footer-inner{
    max-width:100%;
  }

  .nav-tabs{
    gap:8px;
    flex-wrap:wrap;
  }

  .nav-tabs a{
    font-size:0.85rem;
    padding:6px 12px 10px;
  }

  .slider-wrapper{
    height:480px;
  }

  .qa-grid-exact{
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:auto;
  }

  .qa-item{
    height:160px;
  }
}


/* =========================
   <= 768px (mobile grande)
========================= */
@media (max-width:768px){

  /* TOPBAR */
  .topbar-left span{
    display:none;
  }

  /* HEADER BRAND */
  .header-brand-inner{
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:14px 14px 6px;
  }

  .brand-right{
    width:100%;
  }

  .brand-slogan{
    font-size:0.95rem;
  }

  /* MENÚ PRINCIPAL */
  .main-nav-inner{
    flex-direction:column;
    padding:16px 14px;
  }

  .nav-tabs{
    justify-content:center;
    flex-wrap:wrap;
    row-gap:6px;
  }

  .nav-tabs a::after{
    display:none;
  }

  /* HERO */
  .slider-wrapper{
    height:300px;
  }

  .slide-caption{
    bottom:30px;
    gap:10px;
  }

  .slide-text h2{
    font-size:1.2rem;
  }

  /* ACCESOS RÁPIDOS */
  .quick-access-exact{
    position:static;
    transform:none;
    margin:20px auto 0;
  }


  .qa-grid-exact{
    display:grid;
    grid-template-columns:repeat(2, 1fr); /* 👈 2 columnas */
    gap:12px;
  }

  .qa-item{
    height:130px;
    border-radius:12px;
    padding:12px;
    box-shadow:0 6px 16px rgba(0,0,0,.22);
  }

  .qa-item i{
    font-size:2rem;
  }

  .qa-item span{
    font-size:0.75rem;
    font-weight:800;
    line-height:1.2;
    text-align:center;
  }


  /* NOTICIAS */
  .news-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .news-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .news-card img{
    height:180px;
  }

  /* INSTAGRAM */
  .instagram-embed iframe{
    height:520px;
  }
}


/* =========================
   <= 480px (mobile chico)
========================= */
@media (max-width:480px){

  body{
    font-size:14px;
  }

  /* TOPBAR */
  .topbar{
    font-size:0.7rem;
  }

  .topbar-left strong{
    font-size:0.75rem;
  }

  /* LOGO */
  .brand-left img{
    height:46px;
  }

  .brand-slogan{
    font-size:0.85rem;
  }

  /* HERO */
  .slider-wrapper{
    height:240px;
  }

  .slide-text h2{
    font-size:1.05rem;
  }

  .slide-btn{
    font-size:0.75rem;
    padding:6px 14px;
  }

  /* ACCESOS */
  .qa-grid-exact{
    grid-template-columns:repeat(2, 1fr); /* 👈 sigue en cuadritos */
    gap:10px;
  }

  .qa-item{
    height:110px;
    gap:8px;
  }

  .qa-item i{
    font-size:1.7rem;
  }

  .qa-item span{
    font-size:0.7rem;
  }


  /* FOOTER */
  .footer-inner{
    padding:0 14px;
    gap:24px;
  }

  .footer-escudo{
    width:140px;
  }

  /* INSTAGRAM */
  .instagram-header h2{
    font-size:22px;
  }

  .instagram-embed iframe{
    height:460px;
  }
}


/* =========================================================
   FIX ESPACIO ENTRE ACCESOS Y NOTICIAS – SOLO MOBILE
========================================================= */

@media (max-width:768px){

  .hero-slider{
    margin-bottom:40px; /* 👈 reduce el vacío */
  }

}

@media (max-width:480px){

  .hero-slider{
    margin-bottom:24px; /* 👈 aún más compacto */
  }

}





/* ===== BOTÓN LOGO 1512 ===== */
.logo-1512 {
  padding: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
}

.logo-1512-img {
  height: 50px;     /* tamaño desktop */
  width: auto;
  display: block;
}

/* Hover */
.logo-1512:hover .logo-1512-img {
  opacity: 0.9;
}

/* Mobile */
@media (max-width: 768px) {
  .logo-1512-img {
    height: 34px;
  }
}



/* ===============================
   HOVER ACCESOS RÁPIDOS
=============================== */

.qa-item{
  transition:
    background-color .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.qa-item:hover{
  background:#f4b400;      /* amarillo SOLO al hover */
  color:#000000;
  transform: translateY(-6px);
  box-shadow:0 14px 28px rgba(0,0,0,.35);
}

/* íconos e iconos bootstrap */
.qa-item:hover i{
  color:#000000;
}

/* texto */
.qa-item:hover span{
  color:#000000;
}






/* ================= DROPDOWN MUNICIPALIDAD ================= */

.nav-dropdown {
  display: flex;
  align-items: center;
}


.nav-dropdown > a {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Menú oculto */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #0b3c7a;
  min-width: 240px;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  display: none;
  z-index: 999;
}

/* Items */
.dropdown-menu li a {
  display: block;
  padding: 10px 18px;
  color: #fff;
  font-size: 14px;
  transition: background .2s ease;
}

.dropdown-menu li a:hover {
  background: #ffc107;
  color: #000;
}

/* Activo */
.nav-dropdown.open .dropdown-menu {
  display: block;
}


/* ===============================
   HERO CAROUSEL (SIN ROMPER LAYOUT)
=============================== */

.hero-carousel{
  position:relative;
  width:100%;
  height:100%;
}

.hero-carousel .hero-img{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s ease;
}

.hero-carousel .hero-img.active{
  opacity:1;
  position:relative;
}


/* ===== POPUP SOLO IMAGEN ===== */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-overlay.active {
  display: flex;
}

.popup-image-box {
  position: relative;
  max-width: 520px;
  width: 92%;
  animation: popupFade 0.3s ease;
}

.popup-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

.popup-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #000;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
}

.popup-check {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #fff;
  justify-content: center;
}

@keyframes popupFade {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ===== FIN POPUP ===== */