/* ==================================================
   BASE
   ================================================== */

html {
  background: url(../imagenes/fondo-total.png) no-repeat center center fixed;
  background-size: cover;
}

body {
  background: transparent;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #333;
}

/* ==================================================
   FONDOS POR SECCIÓN
   ================================================== */

body.fondo-agua {
  background: url("../imagenes/fondo-agua.jpeg") no-repeat center center fixed;
  background-size: cover;
}

body.fondo-obras {
  background: url("../imagenes/fondo-obras.jpeg") no-repeat center center fixed;
  background-size: cover;
}

body.fondo-registro {
  background: url("../imagenes/fondo-registro.jpeg") no-repeat center center fixed;
  background-size: cover;
}

body.fondo-tesoreria {
  background: url("../imagenes/fondo-tesoreria.jpeg") no-repeat center center fixed;
  background-size: cover;
}

body.fondo-turismo {
  background: url("../imagenes/fondo-turismo.jpeg") no-repeat center center fixed;
  background-size: cover;
}

/* ==================================================
   FONDOS ART 8 / 8-DIF / 15 / 70 / 71
   ================================================== */

body.fondo-art {
  background: url("../imagenes/fondo-art-8.jpeg") no-repeat center center fixed;
  background-size: cover;
}

/* ==================================================
   FONDOS ARMONIZACION
   ================================================== */

body.fondo-arm {
  background: url("../imagenes/fondo-calculadora.jpeg") no-repeat center center fixed;
  background-size: cover;
}

/* ==================================================
   FONDOS ARMONIZACION
   ================================================== */

body.fondo-lic {
  background: url("../imagenes/fondo-total.png") no-repeat center center fixed;
  background-size: cover;
}

/* ==================================================
   COLORES INSTITUCIONALES
   ================================================== */

.color1 { color: #a32929; }
.color2 { color: #21215F; }

/* ==================================================
   HEADER / NAVBAR (BOOTSTRAP 3 REAL)
   ================================================== */

header {
  background: #21215F url(../imagenes/fondo-top.png) no-repeat bottom center;
  position: relative;
}

/* Navbar base */
.navbar {
  border-radius: 0;
  margin-bottom: 0;
  border: none;
}

/* Navbar institucional */
.navbar-institucional {
  height: 90px;
  min-height: 90px;
  background-color: #a32929;
}

/* Header interno */
.navbar-institucional .navbar-header {
  height: 90px;
}

/* Logo */
.navbar-brand-fix {
  height: 90px;
  padding: 12px 15px;
}

.navbar-brand-fix img {
  max-height: 65px;
  width: auto;
  display: block;
}

/* Menú alineado verticalmente */
.navbar-menu-fix > li > a {
  height: 90px;
  line-height: 90px;
  padding: 0 15px;
  color: #fff !important;
}

/* Dropdown */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: #8f2323;
  color: #fff;
}

.dropdown-menu > li > a {
  color: #333;
}

.dropdown-menu > li > a:hover {
  background-color: #a32929;
  color: #fff;
}

/* ==================================================
   LINKS
   ================================================== */

a {
  text-decoration: none;
}

header a,
footer a {
  color: #fff;
}

a:hover,
a:focus-visible {
  color: #a32929;
  text-decoration: underline;
}

/* ==================================================
   HERO (CENTRADO REAL)
   ================================================== */

.hero-logo {
  margin: 30px auto 50px;
  text-align: center;
  margin-top: 150px;
  margin-bottom: 150px;
}

.hero-logo img {
  display: block;
  margin: 0 auto;
  float: none;
  max-width: 100%;
}

/* ==================================================
   HERO SERVICIOS
   ================================================== */
.hero {
  position: relative;
  height: 380px;
  background: rgba(163, 41, 41, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero img {
  max-width: 320px;
}

/* ==================================================
   BIENVENIDA (BLOQUE BLANCO INSTITUCIONAL)
   ================================================== */

.bienvenida {
  position: relative;
  z-index: 10;
}

.bienvenida-box {
  background-color: #ffffff;
  padding: 50px 50px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  margin-bottom: 80px;
}

.bienvenida p {
  line-height: 1.7;
  font-size: 15px;
  color: #333;
}

.img-presidenta {
  border: 6px solid #f2f2f2;
  margin-top: 10px;
}

/* ==================================================
   SECCIONES GENERALES
   ================================================== */

.bg-gray {
  background-color: #f5f5f5;
  padding: 50px 50px;
  margin-bottom: 80px;
}

hr {
  border-top: 2px solid #a32929;
  width: 80px;
  margin: 20px auto;
}

/* ==================================================
   CONTENIDO BLANCO REUTILIZABLE
   ================================================== */

.contenido-blanco {
  background-color: #ffffff;
  padding: 50px 50px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* ==================================================
   SECCIÓN BLANCA FULL WIDTH
   ================================================== */

.seccion-blanca-full {
  background-color: #ffffff;
  padding: 80px 0;
  position: relative;
  z-index: 10;
}

/* ==================================================
   SECCIÓN BLANCA FULL WIDTH VER
   ================================================== */

.seccion-fraccion {
  background-color: #ffffff;
  padding: 80px 0;
  position: relative;
  z-index: 10;
  min-height: 60vh;
}

.listado-archivos li {
  margin-bottom: .5rem;
}

.listado-archivos a {
  display: inline-block;
  color: #666;
}

.listado-archivos a:hover {
  color: #a32929;
}

.yearselector{
    color: #fff;
    font-weight: 600;
}

.yearselector:hover{
    background-color:#8f2323;
}

/* ==================================================
   AÑOS Y MESES COLAPSABLES
   ================================================== */

.folder-title {
    cursor: pointer;
    background: #a32929;
    color: #fff;
    padding: 10px;
    margin-top: 8px;
    font-weight: bold;
}

.folder-title::after {
    content: "▸";
    float: right;
    transition: transform .2s;
}

.folder.open > .folder-title::after {
    transform: rotate(90deg);
}

.folder-content {
    display: none;
    margin-left: 20px;
    margin-top: 6px;
}

/* ==================================================
   CARRUSEL
   ================================================== */

.carousel {
  margin-bottom: 20px;
}

.carousel-inner > .item > img {
  width: 100%;
  height: auto;
}

/* ==================================================
   SERVICIOS
   ================================================== */

.block {
  margin-bottom: 20px;
}

.zoom {
  display: block;
  margin: 0 auto;
  transition: transform .25s ease;
}

.zoom:hover {
  transform: scale(1.1);
}

/* ==================================================
   FACEBOOK FIX
   ================================================== */

.facebook-col {
  min-height: 400px;
  overflow: visible;
}

.fb-page,
.fb-page span,
.fb-page iframe {
  width: 100% !important;
}

.fb-page {
  display: block;
  position: relative;
  background: #fff;
}

/* ==================================================
   SEPARADOR INSTITUCIONAL
   ================================================== */

.separador-rojo {
  width: 100%;
  height: 380px;
  background-color: rgba(163, 41, 41, 0.75);
  margin: 0px 0;
}

/* ==================================================
   SECCION COLOR (SEPARADOR ORIGINAL)
   ================================================== */

.seccion-color {
  width: 100%;
  height: 380px;
  background-image: url(../imagenes/fondo-color.png);
  background-repeat: repeat;
  background-position: center;
  background-size: auto;
}

/* ==================================================
   MAPA (NO INVADIR FOOTER)
   ================================================== */

.mapa-fix {
  display: block;
  margin-bottom: 0px;
  background: #fff;
}

.mapa-fix iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

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

footer {
  background-color: #666;
  color: #fff;
}

.footer-fix {
  position: relative;
  z-index: 5;
  padding: 0px 0;
  font-size: 13px;
}

.copy {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.footer-top {
  background-color: #C0BEBF;
  color: #333;
  padding: 60px 0;
}

.footer-bottom {
  padding: 40px 0;
}

footer ul {
  list-style: none;
  padding-left: 0;
}

footer ul li {
  line-height: 1.8;
}

.footer-top h3 {
  color: #333;
}

.footer-top a {
  color: #333;
}

.footer-top a:hover {
  color: #a32929;
  text-decoration: none;
}

.footer-top hr {
  border-top: 2px solid #a32929;
  width: 60px;
}

/* ==================================================
   CENTRADO DE TARJETAS
   ================================================== */

.gobierno-item {
  margin-bottom: 40px;
}

.gobierno-row {
  text-align: center;
}

.img-circular {
  border-radius: 50%;
  max-width: 220px;
  margin: 0 auto 15px;
}

.gobierno-presidenta-item {
  margin-bottom: 40px;
  float: none !important;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}

/*
.img-hex {
  height: 283px;
  object-fit: cover;
  display: block;
  margin: 0 auto 15px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
*/

/* =========================================
   BOTONES FLOTANTES SCROLL
========================================= */

.scroll-buttons {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0.6;
  transition: opacity .3s ease;
}

.scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border-radius: 50%;
  transition: background .3s ease, opacity .3s ease;
}

.scroll-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.1);
  opacity: 1;
}

/* =============================
   FORMULARIO DE CONTACTO
   ============================= */
.form-contacto {
  background: #ffffff;
  padding: 30px;
  border-radius: 8px;
  max-width: 520px;
  margin: 40px auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.form-contacto .form-control {
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: none;
}

.form-contacto .form-control:focus {
  border-color: #7fbf3f; /* verde institucional */
  box-shadow: none;
}

.form-contacto label {
  font-weight: 600;
  margin-bottom: 5px;
}

.form-contacto .btn {
  margin-top: 15px;
  font-weight: 600;
}

/* ==================================================
   PRELOAD + BLUR
   ================================================== */
body.preload-active {
  overflow: hidden;
}

#page {
  filter: blur(12px);
  transition: filter 1s ease;
}

#preloader {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 1s ease;
}

#preloader img {
  width: 320px;
}

#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}

#page.unblur {
  filter: blur(0);
}

.no-loader #preloader {
  display: none;
}

.no-loader #page {
  filter: none;
}

/* ==================================================
   MISC
   ================================================== */
.whats {
  color: #a32929;
  font-weight: bold;
  margin-top: 5px;
}

@media (max-width: 767px) {
  .hero-logo {
    margin: 12vh 0;
  }
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mtb-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.img-responsive {
  max-width: 95%;
}

html {
  scroll-behavior: smooth;
}