/* =========================================================
   RESET GENERAL
========================================================= */
body{
  background:#e8e4db !important;
  margin:0;
  overflow-x:hidden;
}

html{
  overflow-x:hidden;
}

/* =========================================================
   NAVBAR
========================================================= */
#barra{
  background:#f7efec !important;
  border-top:5px solid #d69e91;
  padding:10px 0;
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;
}

#barra .container{ padding-left:120px; }

#logoFijo{
  position:fixed;
  top:0;
  left:50px;
  z-index:1050;
}

@media(max-width:992px){
  #logoFijo{ display:none; }
  #barra .container{ padding-left:0; }
}

/* LINKS NAVBAR */
#barra .nav-link{
  font-weight:bold;
  text-transform:uppercase;
  transition:.3s ease;
}

#barra .nav-link:hover,
#barra .dropdown-item:hover{
  background:#e2e6ea;
  color:#804000 !important;
}

/* BOTÓN DESTACADO */
#barra .texto-animado{
  display:inline-block;
  background:#f8f9fa;
  color:#000;
  font-weight:bold;
  text-transform:uppercase;
  padding:.4rem 1.5rem;
  border-radius:.5rem;
  box-shadow:0 0 12px rgba(255,102,0,.75);
  animation:glowPulse 2s infinite ease-in-out;
  transition:.3s ease;
}

#barra .texto-animado:hover{
  transform:scale(1.08);
  box-shadow:0 0 24px rgba(255,102,0,1);
  text-decoration:none;
}

@keyframes glowPulse{
  0%,100%{ box-shadow:0 0 8px rgba(255,102,0,.6); }
  50%{ box-shadow:0 0 18px rgba(255,102,0,1); }
}

/* =========================================================
   LOADER
========================================================= */
#loader{
  position:fixed;
  inset:0;
  background:#f7efec;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  transition:opacity .3s ease;
}

.spinner{
  width:60px;
  height:60px;
  border:8px solid #f3f3f3;
  border-top:8px solid #804000;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* =========================================================
   EFECTOS GENERALES
========================================================= */
.fade-in{ animation:fadeIn .7s ease-in; }

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =========================================================
   CAROUSEL
========================================================= */
.carousel-item img{
  width:100%;
  max-height:100vh;
  object-fit:cover;
}

.home-hero{
  background:#033238;
  overflow:hidden;
}

.home-hero .carousel{
  overflow:hidden;
}

.home-hero .carousel-item{
  min-height:clamp(520px,78vh,760px);
  background:#033238;
}

.home-hero .carousel-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,50,56,.82) 0%,rgba(3,50,56,.45) 45%,rgba(3,50,56,.12) 100%);
  z-index:1;
}

.home-hero .carousel-item img{
  min-height:clamp(520px,78vh,760px);
  object-fit:cover;
}

.home-hero-caption{
  left:7%;
  right:7%;
  bottom:50%;
  z-index:2;
  width:min(720px,86vw);
  max-width:86vw;
  text-align:left;
  transform:translateY(50%);
}

.home-hero-caption span{
  display:block;
  color:#f2d48b;
  font-size:.85rem;
  font-weight:900;
  letter-spacing:.08rem;
  text-transform:uppercase;
  margin-bottom:10px;
}

.home-hero-caption h1{
  color:#fff;
  font-size:clamp(2rem,4.4vw,4rem);
  font-weight:900;
  line-height:1.05;
  margin-bottom:24px;
  text-shadow:0 3px 18px rgba(0,0,0,.35);
  overflow-wrap:anywhere;
}

.home-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.home-section{
  padding-top:30px;
  padding-bottom:30px;
}

.home-page .home-section.my-5,
.home-page .civic-section.my-5{
  margin-top:1.5rem !important;
  margin-bottom:1.5rem !important;
}

.section-heading{
  max-width:760px;
  margin-bottom:20px;
}

.section-heading h2{
  color:#033238;
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:900;
  margin-bottom:10px;
}

.section-heading p{
  color:#5d6668;
  line-height:1.6;
  margin:0;
}

.home-service-link{
  display:block;
  height:100%;
  text-decoration:none;
}

.home-slogan{
  background:#033238;
  color:#fff;
  margin:12px 0;
  padding:18px 0;
  text-align:center;
}

.home-slogan p{
  color:#f2d48b;
  font-weight:900;
  letter-spacing:.03rem;
  margin:0;
  text-transform:uppercase;
}

.president-message{
  display:grid;
  grid-template-columns:190px 1fr;
  align-items:stretch;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(3,50,56,.08);
  border-radius:18px;
  box-shadow:0 18px 42px rgba(0,0,0,.1);
}

.president-photo{
  background:linear-gradient(135deg,#033238 0%,#7d5a50 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.president-photo img{
  width:100%;
  max-height:230px;
  object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.28));
}

.president-content{
  padding:34px;
}

.president-content h2{
  color:#033238;
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:900;
  margin-bottom:12px;
}

.president-content p{
  color:#4d5557;
  line-height:1.7;
  margin-bottom:18px;
}

.president-content blockquote{
  color:#804000;
  border-left:4px solid #d69e91;
  font-size:1.1rem;
  font-weight:900;
  margin:0 0 22px;
  padding-left:16px;
}

@media(max-width:768px){
  .president-message{
    grid-template-columns:1fr;
  }

  .president-photo img{
    max-height:220px;
  }

  .president-content{
    padding:26px 20px;
  }
}

.empty-state{
  background:#fff;
  border:1px solid rgba(3,50,56,.08);
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  padding:38px;
  text-align:center;
}

.empty-state i{
  color:#804000;
  font-size:2.4rem;
  margin-bottom:14px;
}

.empty-state h3{
  color:#033238;
  font-weight:900;
}

.home-social-card{
  background:#fff;
  border:1px solid rgba(3,50,56,.08);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  min-height:100%;
  padding:24px;
  text-align:center;
}

.home-social-card h3{
  color:#033238;
  font-size:1.2rem;
  font-weight:900;
  margin-bottom:18px;
}

.home-image-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
}

.home-image-card img{
  max-height:390px;
  object-fit:contain;
}

.home-image-card p{
  color:#4d5557;
  line-height:1.6;
}

.quick-links .quick-link-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:210px;
  height:100%;
  color:#033238;
  background:#fff;
  border:1px solid rgba(3,50,56,.08);
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  padding:22px;
  text-decoration:none;
  transition:.25s ease;
}

.quick-links .quick-link-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 36px rgba(0,0,0,.12);
}

.quick-links img{
  max-height:82px;
  max-width:80%;
  object-fit:contain;
  margin-bottom:16px;
}

.quick-links strong{
  font-weight:900;
}

@media(max-width:768px){
  .home-hero-caption{
    left:16px;
    right:16px;
    width:auto;
    max-width:calc(100vw - 32px);
    bottom:42%;
  }

  .home-hero-caption h1{
    font-size:clamp(1.7rem,9vw,2.6rem);
  }

  .home-hero-actions .btn{
    width:100%;
  }
}

/* =========================================================
   HOME: TARJETAS DE ALTURA CONSISTENTE
   Excluye el carrusel principal.
========================================================= */
.home-page .servicio-card{
  min-height:150px;
}

.home-page .servicio-card .card-body{
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.home-page .noticia-card,
.home-page .card-gob{
  min-height:100%;
}

.home-page .noticia-card .media-box,
.home-page .card-gob .media-box{
  aspect-ratio:16/10;
  background:#ddd;
}

.home-page .noticia-card .card-body,
.home-page .card-gob .card-body{
  min-height:260px;
}

.home-page .civic-panel{
  min-height:100%;
}

.home-page .civic-section .civic-panel{
  display:flex;
  flex-direction:column;
}

.home-page .civic-section .transparency-links,
.home-page .civic-section form{
  margin-top:auto;
}

.home-page .civic-section{
  background:#fff;
  border:1px solid rgba(3,50,56,.08);
  border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.1);
  padding:0;
  overflow:hidden;
}

.home-page .civic-section > .row{
  --bs-gutter-x:0;
  --bs-gutter-y:0;
}

.home-page .civic-section .civic-panel{
  border:0;
  border-radius:0;
  box-shadow:none;
  min-height:100%;
  padding:34px;
}

.home-page .civic-section .transparency-panel{
  border-right:1px solid rgba(3,50,56,.08);
}

.home-page .civic-section .transparency-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.home-page .civic-section .transparency-links a{
  align-items:flex-start;
  min-height:108px;
}

.home-page .civic-section .citizen-panel{
  background:#fbfaf8;
}

.home-page .home-comms-grid{
  background:linear-gradient(135deg,#033238 0%,#7d5a50 100%);
  border:none;
}

.home-page .home-comms-grid .section-heading{
  max-width:none;
  margin:0;
  padding:30px 34px 20px;
  border-bottom:1px solid rgba(255,255,255,.16);
}

.home-page .home-comms-grid .section-heading h2{
  color:#fff;
  margin-bottom:6px;
}

.home-page .home-comms-grid .section-heading p{
  color:rgba(255,255,255,.82);
}

.home-page .home-comms-grid .section-heading .section-kicker{
  color:#f2d48b;
}

.home-page .home-comms-grid > .row{
  padding:20px;
}

.home-page .home-comms-grid .channel-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:430px;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:24px;
}

.home-page .home-comms-grid .channel-card h3{
  color:#033238;
  font-size:1.18rem;
  font-weight:900;
  line-height:1.25;
  margin-bottom:10px;
}

.home-page .home-comms-grid .channel-card p{
  color:#4d5557;
  font-size:.92rem;
  line-height:1.55;
}

.home-page .home-comms-grid .col-md-6{
  border-right:1px solid rgba(255,255,255,.16);
}

.home-page .home-comms-grid .col-md-6:last-child{
  border-right:0;
}

.home-page .home-comms-grid .channel-links{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:auto;
}

.home-page .home-comms-grid .channel-links a{
  color:#033238;
  background:#f8f3ee;
  border:1px solid rgba(3,50,56,.08);
  border-radius:10px;
  font-size:.9rem;
  font-weight:800;
  padding:9px 10px;
  text-decoration:none;
  transition:.2s ease;
}

.home-page .home-comms-grid .channel-links a:hover{
  background:#033238;
  color:#fff;
}

.channel-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  color:#fff;
  background:#033238;
  border-radius:14px;
  font-size:1.35rem;
  margin-bottom:16px;
}

.channel-facebook{
  overflow:hidden;
}

.channel-facebook .channel-icon{
  background:#1877f2;
}

.channel-facebook .fb-page,
.channel-facebook iframe{
  max-width:100% !important;
}

.home-page .home-comms-grid .channel-card .btn{
  width:100%;
}

.home-channel-card{
  overflow:hidden;
  min-height:300px !important;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}

.home-channel-card .card-body{
  min-height:150px;
  padding:16px;
}

.home-channel-card .btn{
  padding:6px 12px;
  font-size:.88rem;
}

.home-channel-media{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16/5;
  background:#033238;
  color:#f2d48b;
  font-size:2.1rem;
}

.home-channel-card .card-title{
  font-size:1rem;
  margin-bottom:8px;
}

.home-channel-card .card-text{
  font-size:.88rem;
  line-height:1.45;
  margin-bottom:12px;
}

.home-channel-card .channel-extra{
  color:#6b7477;
  font-size:.83rem;
  line-height:1.45;
}

.home-channel-media.accent-media{
  background:#7d5a50;
}

.home-channel-media.facebook-media{
  background:#1877f2;
  color:#fff;
}

.home-channel-card .channel-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

.home-channel-card .channel-links a{
  color:#033238;
  background:#f8f3ee;
  border:1px solid rgba(3,50,56,.08);
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  padding:6px 8px;
  text-align:center;
  text-decoration:none;
}

.home-channel-card .channel-links a:hover{
  background:#033238;
  color:#fff;
}

@media(min-width:768px) and (max-width:991px){
  .home-page .home-comms-grid .col-md-6:nth-child(even){
    border-right:0;
  }

  .home-page .home-comms-grid .col-md-6:nth-child(-n+2){
    border-bottom:1px solid rgba(3,50,56,.08);
  }
}

@media(min-width:992px){
  .home-page .home-comms-grid .col-md-6{
    border-bottom:0;
  }

  .home-page .home-comms-grid .col-md-6:last-child{
    border-right:0;
  }
}

@media(max-width:767px){
  .home-page .civic-section .transparency-panel{
    border-right:0;
    border-bottom:1px solid rgba(3,50,56,.08);
  }

  .home-page .home-comms-grid .section-heading{
    padding:24px 18px 18px;
  }

  .home-page .home-comms-grid .channel-card{
    min-height:auto;
    padding:22px 18px;
  }

  .home-page .home-comms-grid .col-md-6{
    border-right:0;
    border-bottom:1px solid rgba(3,50,56,.08);
  }

  .home-page .home-comms-grid .col-md-6:last-child{
    border-bottom:0;
  }
}

@media(max-width:576px){
  .home-page .civic-section{
    border-radius:14px;
  }

  .home-page .civic-section .civic-panel{
    padding:24px 18px;
  }

  .home-page .civic-section .transparency-links{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   NOTICIAS
========================================================= */
.noticias-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:linear-gradient(135deg,#033238 0%,#7d5a50 100%);
  color:#fff;
  border-radius:14px;
  padding:28px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.noticias-banner:hover{
  color:#fff;
  transform:translateY(-3px);
  transition:.25s ease;
}

.noticias-banner-kicker,
.noticias-kicker{
  display:block;
  color:#f2d48b;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08rem;
  text-transform:uppercase;
  margin-bottom:8px;
}

.noticias-banner h2{
  font-weight:800;
  margin:0 0 8px;
}

.noticias-banner p{
  margin:0;
  color:rgba(255,255,255,.86);
}

.noticias-banner-action{
  flex:0 0 auto;
  background:#fff;
  color:#033238;
  border-radius:999px;
  padding:10px 18px;
  font-weight:800;
}

.noticias-page{
  background:#f4f6f8;
  min-height:70vh;
}

.noticias-hero{
  background:linear-gradient(135deg,#092136 0%,#123b54 55%,#1b6b74 100%);
  color:#fff;
  padding:118px 0 72px;
}

.noticias-hero h1{
  font-size:clamp(2rem,4vw,3.4rem);
  font-weight:900;
  letter-spacing:0;
  margin-bottom:14px;
}

.noticias-hero p{
  color:rgba(255,255,255,.86);
  font-size:1.05rem;
  margin:0;
}

.noticias-section-title{
  color:#123b54;
  font-weight:900;
  margin-bottom:6px;
}

.noticia-featured{
  background:#fff;
  border:1px solid rgba(16,38,56,.08);
  border-radius:8px;
  box-shadow:0 18px 42px rgba(16,38,56,.1);
  overflow:hidden;
}

.noticia-featured-img{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
}

.noticia-featured-body{
  height:100%;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.noticia-featured-body h3{
  color:#102638;
  font-size:clamp(1.55rem,2.5vw,2.2rem);
  font-weight:900;
  letter-spacing:0;
  margin:10px 0 14px;
}

.noticia-featured-body p{
  color:#526473;
  line-height:1.68;
}

.noticia-card,
.noticia-embed-card{
  border:none;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 14px 32px rgba(16,38,56,.08);
}

.noticia-img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#ddd;
}

.noticia-img-placeholder{
  width:100%;
  aspect-ratio:16/10;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#033238;
  color:#f2d48b;
  font-size:3rem;
}

.noticia-source{
  color:#1b6b74;
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:10px;
}

.noticia-card-title{
  color:#102638;
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:0;
  line-height:1.3;
  margin-bottom:12px;
}

.noticia-text{
  color:#526473;
  line-height:1.6;
}

.noticia-card .media-box{
  aspect-ratio:16/10;
  background:#ddd;
}

.noticia-embed-card h3{
  color:#123b54;
  font-size:1.25rem;
  font-weight:900;
  text-align:center;
  margin-bottom:18px;
}

@media (min-width:992px){
  .noticias-hero .container{
    padding-left:190px;
  }
}

@media(max-width:768px){
  .noticias-hero{
    padding:104px 0 48px;
  }

  .noticias-banner{
    align-items:flex-start;
    flex-direction:column;
  }

  .noticias-banner-action{
    width:100%;
    text-align:center;
  }

  .noticia-featured-img{
    min-height:230px;
  }

  .noticia-featured-body{
    padding:24px;
  }
}
/* ==========================
   PORTAL DE SERVICIOS
========================== */
.servicio-card {
    border: none;
    border-radius: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.servicio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.servicio-card h6 {
    font-weight: 600;
    color: #033238;
}
/* =========================================================
   BOTONES
========================================================= */
.btn-custom{
  background:#94766c;
  color:#fff;
  border:none;
}

.btn-custom:hover{ background:#e5ccb8; }

/* =========================================================
   TRANSPARENCIA Y PARTICIPACION
========================================================= */
.civic-section{
  margin-top:3rem;
  margin-bottom:3rem;
}

.civic-panel{
  background:#fff;
  border:1px solid rgba(3,50,56,.08);
  border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.08);
  padding:28px;
}

.section-kicker{
  display:block;
  color:#804000;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08rem;
  text-transform:uppercase;
  margin-bottom:8px;
}

.civic-panel h2{
  color:#033238;
  font-size:1.7rem;
  font-weight:900;
  line-height:1.2;
  margin-bottom:12px;
}

.civic-panel p{
  color:#4d5557;
  line-height:1.6;
}

.transparency-panel{
  background:linear-gradient(180deg,#fff 0%,#f8f3ee 100%);
}

.transparency-links{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:22px;
}

.transparency-links a{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:74px;
  color:#033238;
  background:#fff;
  border:1px solid rgba(3,50,56,.1);
  border-radius:12px;
  padding:14px;
  text-decoration:none;
  transition:.25s ease;
}

.transparency-links a:hover{
  border-color:#d69e91;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transform:translateY(-2px);
}

.transparency-links i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  color:#fff;
  background:#033238;
  border-radius:50%;
}

.transparency-links strong,
.transparency-links small{
  display:block;
}

.transparency-links small{
  color:#6b7477;
  margin-top:3px;
}

.citizen-panel .form-label{
  color:#033238;
  font-weight:700;
}

.citizen-panel .form-control,
.citizen-panel .form-select{
  border-color:#d8d2ca;
  border-radius:10px;
  padding:.7rem .85rem;
}

.citizen-panel .form-control:focus,
.citizen-panel .form-select:focus{
  border-color:#94766c;
  box-shadow:0 0 0 .2rem rgba(148,118,108,.18);
}

.privacy-note{
  color:#6b7477;
  font-size:.9rem;
  margin:16px 0 0;
}

/* =========================================================
   PAGINA GRACIAS
========================================================= */
.thanks-page{
  background:#f3efe8;
  min-height:70vh;
}

.thanks-hero{
  background:linear-gradient(135deg,#033238 0%,#7d5a50 100%);
  padding:76px 0 64px;
}

.thanks-card{
  max-width:820px;
  margin:0 auto;
  color:#033238;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 42px rgba(0,0,0,.18);
  padding:42px;
  text-align:center;
}

.thanks-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  color:#fff;
  background:#1f5f3a;
  border-radius:50%;
  font-size:2rem;
  margin-bottom:18px;
}

.thanks-card h1{
  color:#033238;
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:900;
  margin-bottom:14px;
}

.thanks-card p{
  max-width:620px;
  color:#4d5557;
  line-height:1.7;
  margin:0 auto 24px;
}

.thanks-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

.thanks-info-card{
  background:#fff;
  border:1px solid rgba(3,50,56,.08);
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  padding:26px;
}

.thanks-info-card i{
  color:#804000;
  font-size:2rem;
  margin-bottom:14px;
}

.thanks-info-card h2{
  color:#033238;
  font-size:1.2rem;
  font-weight:900;
}

.thanks-info-card p{
  color:#4d5557;
  line-height:1.6;
}

.thanks-info-card a{
  color:#804000;
  font-weight:800;
  text-decoration:none;
}

.thanks-info-card a:hover{
  text-decoration:underline;
}

@media(max-width:768px){
  .thanks-card{
    padding:30px 22px;
  }
}

/* =========================================================
   TRAMITES Y SERVICIOS
========================================================= */
.tramites-page{
  background:#f3efe8;
  min-height:70vh;
}

.tramites-hero{
  background:linear-gradient(135deg,#033238 0%,#7d5a50 100%);
  color:#fff;
  padding:72px 0 52px;
}

.tramites-hero h1{
  font-size:clamp(2rem,4vw,3.4rem);
  font-weight:900;
  margin-bottom:14px;
}

.tramites-hero p{
  max-width:760px;
  color:rgba(255,255,255,.86);
  font-size:1.05rem;
  margin:0;
}

.tramites-search{
  background:#fff;
  border:1px solid rgba(3,50,56,.08);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  padding:22px;
  margin-bottom:22px;
}

.tramites-search .form-label{
  color:#033238;
  font-weight:800;
}

.tramites-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:28px;
}

.tramites-tabs a{
  color:#033238;
  background:#fff;
  border:1px solid rgba(3,50,56,.12);
  border-radius:999px;
  font-weight:800;
  padding:8px 14px;
  text-decoration:none;
}

.tramites-tabs a.active,
.tramites-tabs a:hover{
  color:#fff;
  background:#033238;
}

.tramites-title{
  color:#033238;
  font-weight:900;
  margin-bottom:6px;
}

.tramite-card{
  background:#fff;
  border:1px solid rgba(3,50,56,.08);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  padding:24px;
}

.tramite-category,
.tramite-year{
  color:#804000;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
}

.tramite-card h3{
  color:#033238;
  font-size:1.35rem;
  font-weight:900;
  line-height:1.25;
  margin:12px 0;
}

.tramite-area{
  color:#4d5557;
  font-weight:700;
}

.tramite-detail{
  border-top:1px solid rgba(3,50,56,.08);
  padding-top:14px;
  margin-top:14px;
}

.tramite-detail h4{
  color:#033238;
  font-size:.92rem;
  font-weight:900;
  text-transform:uppercase;
}

.tramite-detail p{
  color:#4d5557;
  line-height:1.6;
  margin-bottom:0;
}

.tramite-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}

.tramite-meta span{
  background:#f8f3ee;
  border-radius:10px;
  color:#394447;
  padding:10px;
}

@media(max-width:768px){
  .tramite-meta{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TARJETAS INSTITUCIONALES
========================================================= */
.card-gob{
  border:none;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:.3s ease;
}

.card-gob:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.media-box{
  overflow:hidden;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

.media-box img,
.media-box iframe{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card-gob .card-title{
  font-weight:800;
  color:#804000;
  margin-bottom:.8rem;
}

.card-gob .card-title span{
  display:block;
  font-size:.85rem;
  color:#a67c52;
}

.card-gob .card-text{
  font-size:.95rem;
  color:#444;
  line-height:1.6;
}

.list-gob{
  list-style:none;
  padding:0;
  margin-bottom:1rem;
}

.list-gob li::before{
  content:"✔";
  color:#a67c52;
  margin-right:8px;
}

.btn-gob-primary{
  background:#804000;
  color:#fff;
  border-radius:30px;
  padding:6px 18px;
}

.btn-gob-primary:hover{ background:#5f2f00; }

.btn-gob-outline{
  border:1px solid #804000;
  color:#804000;
  border-radius:30px;
  padding:6px 18px;
}

.firma{
  font-weight:bold;
  text-align:right;
}

.firma span{
  display:block;
  font-weight:normal;
  font-size:.85rem;
  color:#666;
}

/* =========================================================
   FOOTER INSTITUCIONAL
========================================================= */
#piepag{
  background:linear-gradient(135deg,#0f1c2e 0%,#0b1624 100%);
  text-align: center;
  color:#fff;
  position:relative;
  border-top:6px solid #d4af37;
  border-bottom:4px solid #1f5f3a;
  box-shadow:0 -8px 25px rgba(0,0,0,.25);
  
}
#piepag .container{ position:relative; z-index:2; }

#piepag::before{
  content:"";
  position:absolute;
  top:-50px;
  right:-50px;
  width:200px;
  height:200px;
  background:radial-gradient(circle,rgba(212,175,55,.15) 0%,transparent 70%);
  border-radius:50%;
}

#piepag .footer-title{
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:1px;
  margin-bottom:.8rem;
  text-transform:uppercase;
  position:relative;
}

#piepag .footer-title::after{
  content:"";
  display:block;
  width:40px;
  height:2px;
  background:#d4af37;
  margin:8px auto 0;
}

#piepag .footer-text,
#piepag .footer-links a{
  font-size:.95rem;
  line-height:1.6;
  color:#dcdcdc;
}

#piepag address{ font-style:normal; }

#piepag .footer-links li{ margin-bottom:8px; }

#piepag .footer-links a{
  text-decoration:none;
  display:inline-block;
  transition:.3s ease;
}

#piepag .footer-links a:hover{
  color:#d4af37;
  transform:translateX(4px);
}

#piepag .footer-logo{ max-width:220px; transition:.3s ease; }
#piepag .footer-logo:hover{ transform:scale(1.05); }

#piepag .footer-badge{ max-width:140px; transition:.3s ease; }
#piepag .footer-badge:hover{ transform:scale(1.08); }

#piepag .footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin:0 8px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  color:#d4af37;
  font-size:1.1rem;
  transition:.3s ease;
}

#piepag .footer-social a:hover{
  background:#d4af37;
  color:#000;
  transform:translateY(-4px);
}

#piepag .footer-divider{
  border:none;
  height:1px;
  background:linear-gradient(to right,transparent,#d4af37,transparent);
  margin:20px auto;
  width:80%;
}

#piepag .text-muted{ color:#aaa !important; font-size:.85rem; }
#piepag .text-gold{ color:#d4af37 !important; }

#piepag #btnTop{
  position:fixed;
  bottom:25px;
  right:25px;
  background:#d4af37;
  color:#000;
  border:none;
  width:45px;
  height:45px;
  border-radius:50%;
  cursor:pointer;
  font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:.3s ease;
  display:none;
  z-index:999;
}

#piepag #btnTop:hover{
  background:#fff;
  transform:translateY(-4px);
}

@media(max-width:768px){
  #piepag{ text-align:center; }
  #piepag .footer-title::after{ margin:6px auto 0; }
  #piepag .footer-logo{ margin-bottom:15px; }
}

/* =========================================================
   REDES SOCIALES LATERALES
========================================================= */
.social{
  position:fixed;
  right:0;
  top:250px;
  z-index:2000;
}

/* =========================================================
   DECLARACION PATRIMONIAL
========================================================= */
.declara-page{
  background:#f4f6f8;
  color:#102638;
}

.declara-hero{
  background:linear-gradient(135deg,#092136 0%,#123b54 55%,#1b6b74 100%);
  color:#fff;
  padding:118px 0 70px;
}

.declara-hero h1{
  font-size:clamp(2rem,4vw,3.35rem);
  font-weight:900;
  letter-spacing:0;
  margin:10px 0 14px;
}

.declara-hero p{
  color:rgba(255,255,255,.85);
  font-size:1.08rem;
  max-width:720px;
}

.declara-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.declara-hero-img{
  width:min(320px,82vw);
  max-height:330px;
  object-fit:contain;
  filter:drop-shadow(0 22px 36px rgba(0,0,0,.22));
}

.declara-card,
.declara-side,
.declara-contact{
  background:#fff;
  border:1px solid rgba(16,38,56,.08);
  border-radius:8px;
  box-shadow:0 14px 32px rgba(16,38,56,.08);
}

.declara-card{
  padding:28px;
}

.declara-card h2,
.declara-side h2,
.declara-contact h3{
  color:#123b54;
  font-weight:850;
  letter-spacing:0;
  margin-bottom:14px;
}

.declara-card p{
  color:#475867;
  line-height:1.72;
  margin-bottom:12px;
}

.declara-timeline{
  display:grid;
  gap:16px;
}

.declara-step{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  align-items:start;
}

.declara-step span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#d4af37;
  color:#092136;
  font-weight:900;
}

.declara-step h3{
  font-size:1.04rem;
  font-weight:850;
  margin:0 0 4px;
  color:#102638;
}

.declara-mini{
  height:100%;
  padding:18px;
  border-radius:8px;
  background:#f6f8fa;
  border:1px solid rgba(16,38,56,.08);
}

.declara-mini i{
  color:#1b6b74;
  font-size:1.35rem;
  margin-bottom:12px;
}

.declara-mini strong,
.declara-mini span{
  display:block;
}

.declara-mini strong{
  color:#102638;
  margin-bottom:4px;
}

.declara-mini span{
  color:#667482;
  font-size:.92rem;
}

.declara-side,
.declara-contact{
  padding:24px;
}

.declara-side{
  position:sticky;
  top:100px;
}

.declara-side p,
.declara-contact p{
  color:#556675;
}

.declara-side ul{
  list-style:none;
  padding:0;
  margin:18px 0 22px;
}

.declara-side li{
  display:flex;
  gap:10px;
  color:#405361;
  margin-bottom:10px;
}

.declara-side li i{
  color:#1b6b74;
  margin-top:4px;
}

@media (min-width:992px){
  .declara-hero .container{
    padding-left:190px;
  }
}

@media (max-width:767.98px){
  .declara-hero{
    padding:104px 0 48px;
  }

  .declara-card,
  .declara-side,
  .declara-contact{
    padding:20px;
  }

  .declara-side{
    position:static;
  }
}

/* =========================================================
   DIRECTORIO MUNICIPAL
========================================================= */
.directorio-page{
  background:#f4f6f8;
  color:#102638;
}

.directorio-hero{
  background:linear-gradient(135deg,#092136 0%,#123b54 55%,#1b6b74 100%);
  color:#fff;
  padding:118px 0 72px;
}

.directorio-hero h1{
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:900;
  letter-spacing:0;
  margin:10px 0 14px;
}

.directorio-hero p{
  max-width:760px;
  color:rgba(255,255,255,.86);
  font-size:1.08rem;
}

.directorio-search{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:22px;
  background:#fff;
  border:1px solid rgba(16,38,56,.08);
  border-radius:8px;
  box-shadow:0 14px 32px rgba(16,38,56,.08);
  padding:24px;
  margin-bottom:28px;
}

.directorio-search h2{
  color:#123b54;
  font-weight:850;
  letter-spacing:0;
  margin-bottom:4px;
}

.directorio-search-box{
  position:relative;
  min-width:min(420px,100%);
}

.directorio-search-box i{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:#667482;
}

.directorio-search-box .form-control{
  padding-left:42px;
  min-height:46px;
}

.directorio-card{
  height:100%;
  background:#fff;
  border:1px solid rgba(16,38,56,.08);
  border-radius:8px;
  box-shadow:0 12px 28px rgba(16,38,56,.08);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}

.directorio-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(16,38,56,.13);
}

.directorio-photo-wrap{
  background:linear-gradient(180deg,#eef4f5 0%,#fff 100%);
  padding:22px 18px 10px;
  text-align:center;
}

.directorio-photo{
  width:178px;
  height:178px;
  object-fit:cover;
  object-position:top center;
  border-radius:50%;
  border:5px solid #fff;
  box-shadow:0 10px 24px rgba(16,38,56,.16);
  background:#fff;
}

.directorio-card-body{
  display:flex;
  flex-direction:column;
  height:calc(100% - 210px);
  padding:20px;
  text-align:center;
}

.directorio-card h3{
  color:#102638;
  font-size:1.08rem;
  font-weight:850;
  letter-spacing:0;
  margin-bottom:8px;
}

.directorio-position{
  color:#1b6b74;
  font-weight:750;
  margin-bottom:4px;
}

.directorio-dependency{
  color:#667482;
  font-size:.92rem;
  min-height:42px;
  margin-bottom:14px;
}

.directorio-contact{
  display:grid;
  gap:8px;
  text-align:left;
  color:#526473;
  font-size:.9rem;
  margin-bottom:16px;
}

.directorio-contact span,
.directorio-contact a{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:#526473;
  text-decoration:none;
  min-width:0;
  overflow-wrap:anywhere;
}

.directorio-contact i{
  color:#1b6b74;
  width:16px;
  margin-top:3px;
  flex:0 0 auto;
}

.directorio-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:auto;
}

@media (min-width:992px){
  .directorio-hero .container{
    padding-left:190px;
  }
}

@media (max-width:767.98px){
  .directorio-hero{
    padding:104px 0 48px;
  }

  .directorio-search{
    display:block;
    padding:20px;
  }

  .directorio-search-box{
    margin-top:16px;
  }
}

/* =========================================================
   MISION Y VISION
========================================================= */
.mision-page{
  background:#f4f6f8;
  color:#102638;
}

.mision-hero{
  background:linear-gradient(135deg,#092136 0%,#123b54 55%,#1b6b74 100%);
  color:#fff;
  padding:118px 0 72px;
}

.mision-hero h1{
  font-size:clamp(2rem,4vw,3.3rem);
  font-weight:900;
  letter-spacing:0;
  margin:10px 0 14px;
}

.mision-hero p{
  max-width:760px;
  color:rgba(255,255,255,.86);
  font-size:1.08rem;
}

.mision-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.mision-hero-img{
  width:min(380px,86vw);
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:8px;
  border:6px solid rgba(255,255,255,.85);
  box-shadow:0 24px 48px rgba(0,0,0,.24);
}

.mision-card,
.mision-principio{
  background:#fff;
  border:1px solid rgba(16,38,56,.08);
  border-radius:8px;
  box-shadow:0 14px 32px rgba(16,38,56,.08);
}

.mision-card{
  padding:30px;
}

.mision-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf3f4;
  color:#1b6b74;
  font-size:1.45rem;
  margin-bottom:18px;
}

.mision-card h2,
.mision-section-heading h2{
  color:#123b54;
  font-weight:900;
  letter-spacing:0;
}

.mision-card p{
  color:#475867;
  line-height:1.72;
  margin-bottom:0;
}

.mision-section-heading{
  max-width:720px;
  margin-bottom:22px;
}

.mision-section-heading p{
  color:#667482;
  margin-bottom:0;
}

.mision-principio{
  height:100%;
  padding:22px;
  transition:transform .22s ease, box-shadow .22s ease;
}

.mision-principio:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(16,38,56,.13);
}

.mision-principio i{
  color:#d4af37;
  font-size:1.55rem;
  margin-bottom:14px;
}

.mision-principio h3{
  color:#102638;
  font-size:1.08rem;
  font-weight:850;
  letter-spacing:0;
  margin-bottom:8px;
}

.mision-principio p{
  color:#667482;
  margin-bottom:0;
}

@media (min-width:992px){
  .mision-hero .container{
    padding-left:190px;
  }
}

@media (max-width:767.98px){
  .mision-hero{
    padding:104px 0 48px;
  }

  .mision-card{
    padding:22px;
  }
}

/* =========================================================
   PLAN MUNICIPAL DE DESARROLLO
========================================================= */
.pmd-page{
  background:#f4f6f8;
  color:#102638;
}

.pmd-hero{
  background:linear-gradient(135deg,#092136 0%,#123b54 55%,#1b6b74 100%);
  color:#fff;
  padding:118px 0 72px;
}

.pmd-hero h1{
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:900;
  letter-spacing:0;
  margin:10px 0 14px;
}

.pmd-hero p{
  max-width:780px;
  color:rgba(255,255,255,.86);
  font-size:1.08rem;
}

.pmd-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.pmd-hero-img{
  width:min(380px,86vw);
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:8px;
  border:6px solid rgba(255,255,255,.85);
  box-shadow:0 24px 48px rgba(0,0,0,.24);
}

.pmd-card,
.pmd-download,
.pmd-eje{
  background:#fff;
  border:1px solid rgba(16,38,56,.08);
  border-radius:8px;
  box-shadow:0 14px 32px rgba(16,38,56,.08);
}

.pmd-card,
.pmd-download{
  padding:30px;
}

.pmd-card h2,
.pmd-download h2,
.pmd-section-heading h2{
  color:#123b54;
  font-weight:900;
  letter-spacing:0;
}

.pmd-card p{
  color:#475867;
  line-height:1.72;
}

.pmd-download{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.pmd-download p{
  color:#667482;
}

.pmd-pdf-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fbeaea;
  color:#b32525;
  font-size:1.75rem;
  margin-bottom:18px;
}

.pmd-section-heading{
  max-width:720px;
  margin-bottom:22px;
}

.pmd-section-heading p{
  color:#667482;
  margin-bottom:0;
}

.pmd-eje{
  height:100%;
  padding:22px;
  transition:transform .22s ease, box-shadow .22s ease;
}

.pmd-eje:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(16,38,56,.13);
}

.pmd-eje i{
  color:#d4af37;
  font-size:1.55rem;
  margin-bottom:14px;
}

.pmd-eje h3{
  color:#102638;
  font-size:1.08rem;
  font-weight:850;
  letter-spacing:0;
  margin-bottom:8px;
}

.pmd-eje p{
  color:#667482;
  margin-bottom:0;
}

@media (min-width:992px){
  .pmd-hero .container{
    padding-left:190px;
  }
}

@media (max-width:767.98px){
  .pmd-hero{
    padding:104px 0 48px;
  }

  .pmd-card,
  .pmd-download{
    padding:22px;
  }
}

/* =========================================================
   SEGUIMIENTO DE REPORTES
========================================================= */
.seguimiento-page{
  background:#f4f6f8;
  color:#102638;
}

.seguimiento-hero{
  background:linear-gradient(135deg,#092136 0%,#123b54 55%,#1b6b74 100%);
  color:#fff;
  padding:118px 0 72px;
}

.seguimiento-hero h1{
  font-size:clamp(2rem,4vw,3.3rem);
  font-weight:900;
  letter-spacing:0;
  margin:10px 0 14px;
}

.seguimiento-hero p{
  max-width:760px;
  color:rgba(255,255,255,.86);
  font-size:1.08rem;
}

.seguimiento-panel,
.seguimiento-card,
.seguimiento-empty{
  background:#fff;
  border:1px solid rgba(16,38,56,.08);
  border-radius:8px;
  box-shadow:0 14px 32px rgba(16,38,56,.08);
}

.seguimiento-panel,
.seguimiento-card{
  padding:24px;
}

.seguimiento-panel h2,
.seguimiento-card h2,
.seguimiento-empty h2{
  color:#123b54;
  font-weight:900;
  letter-spacing:0;
}

.seguimiento-panel h3{
  color:#102638;
  font-size:1.05rem;
  font-weight:850;
  letter-spacing:0;
}

.seguimiento-panel p,
.seguimiento-empty p{
  color:#667482;
}

.seguimiento-new-report{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:16px;
  padding:14px 18px;
  border-radius:8px;
  background:#102638;
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

.seguimiento-new-report:hover{
  background:#1b6b74;
  color:#fff;
}

.seguimiento-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:24px;
}

.seguimiento-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border-radius:8px;
  background:#f0f3f5;
  color:#667482;
}

.seguimiento-step span{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#d8e0e7;
  color:#fff;
  flex:0 0 auto;
}

.seguimiento-step.active{
  background:#eaf3f4;
  color:#102638;
}

.seguimiento-step.active span{
  background:#1b6b74;
}

.seguimiento-step.canceled{
  background:#f4eeee;
}

.seguimiento-step.canceled span{
  background:#8a1f1f;
}

.seguimiento-detail{
  height:100%;
  padding:16px;
  border-radius:8px;
  background:#f6f8fa;
  border:1px solid rgba(16,38,56,.08);
}

.seguimiento-detail strong,
.seguimiento-detail span{
  display:block;
}

.seguimiento-detail strong{
  color:#102638;
  margin-bottom:6px;
}

.seguimiento-detail span{
  color:#526473;
}

.seguimiento-photo{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(16,38,56,.08);
}

.seguimiento-chat{
  max-height:420px;
  overflow-y:auto;
  padding:16px;
  border-radius:8px;
  background:#f6f8fa;
  border:1px solid rgba(16,38,56,.08);
}

.seguimiento-msg{
  max-width:82%;
  padding:12px 14px;
  border-radius:8px;
  margin-bottom:12px;
  box-shadow:0 6px 16px rgba(16,38,56,.06);
}

.seguimiento-msg strong,
.seguimiento-msg small{
  display:block;
}

.seguimiento-msg p{
  margin:6px 0;
}

.seguimiento-msg small{
  color:#6c7884;
  font-size:.78rem;
}

.seguimiento-msg.citizen{
  margin-left:auto;
  background:#eaf3f4;
  color:#102638;
}

.seguimiento-msg.admin{
  margin-right:auto;
  background:#fff;
  color:#102638;
}

.seguimiento-empty{
  text-align:center;
  padding:42px 28px;
}

.seguimiento-empty i{
  color:#d4af37;
  font-size:2.6rem;
  margin-bottom:18px;
}

@media (min-width:992px){
  .seguimiento-hero .container{
    padding-left:190px;
  }
}

@media (max-width:767.98px){
  .seguimiento-hero{
    padding:104px 0 48px;
  }

  .seguimiento-steps{
    grid-template-columns:1fr;
  }

  .seguimiento-msg{
    max-width:100%;
  }
}

.social ul{
  list-style:none;
  padding:0;
  margin:0;
}

.social ul li a{
  display:inline-block;
  color:#fff;
  background:#000;
  padding:10px 15px;
  transition:.4s ease;
}

.social ul li a:hover{
  background:rgba(255,255,255,.9);
  padding:10px 30px;
}