.btn-whatsapp {
	display: block;
	width: 70px;
	height: 70px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	border-radius: 50%;
	line-height: 5px;
	text-align: center;
	z-index: 999;
}


/* Contenedor en grilla responsiva (se adapta a celus y compus) */
.contenedor-botones-muni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Estilo de cada botón individual */
.tarjeta-boton-muni {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  background-color: #ffffff;
  padding: 30px 20px;
  border-radius: 12px;
  border: 1px solid #eaeaea;
  /* Animación suave al soltar el mouse */
  transition: all 0.3s ease-in-out; 
}

/* Estilo del texto */
.tarjeta-boton-muni h3 {
  margin-top: 15px;
  font-size: 16px;
  color: #333333;
  font-weight: 600;
  text-align: center;
  transition: color 0.3s ease;
}

/* Estilo del ícono */
.icono-muni {
  font-size: 40px;
  color: #555555; /* Color gris oscuro inicial */
  transition: all 0.3s ease;
}

/* --- AQUÍ OCURRE LA MAGIA DEL EFECTO HOVER (ANIMACIÓN) --- */
.tarjeta-boton-muni:hover {
  border-color: #2e7d32; /* Cambia el borde al verde institucional al pasar el mouse */
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05); /* Sombra suave de elevación */
  transform: translateY(-5px); /* El botón "flota" 5 píxeles hacia arriba */
}

/* El ícono y el texto también reaccionan al pasar el mouse */
.tarjeta-boton-muni:hover .icono-muni {
  color: #2e7d32; /* El ícono se vuelve verde */
  transform: scale(1.1); /* Se agranda un 10% sutilmente */
}

.tarjeta-boton-muni:hover h3 {
  color: #2e7d32;
}


/* =================================================== */
/* REDUCCIÓN DE ESPACIOS CRUCIAL PARA ELEMENTOR IN MÓVIL*/
/* =================================================== */
@media screen and (max-width: 600px) {
  
  /* Quita el espacio exagerado abajo de la sección de los botones */
  .elementor-section {
    margin-bottom: 0px !important;
    padding-bottom: 5px !important;
  }

  /* Quita el espacio exagerado arriba del bloque de texto de turismo */
  .elementor-column,
  .elementor-widget-wrap {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }

  /* Ajusta el título h4 para que termine de pegar el salto hacia arriba */
  .elementor-widget-heading h4,
  h4 {
    margin-top: 5px !important;
    padding-top: 0px !important;
  }
}





/* --- Contenedor Enlace Global --- */
.wsp-channel-bar-link {
    text-decoration: none !important;
    display: none; /* Se oculta en PC por defecto */
}

/* --- Estructura de la Barra --- */
.wsp-channel-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #0b141a; /* Fondo oscuro oficial de la interfaz */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4);
    z-index: 999999;
    padding: 12px 16px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    border-top: 1px solid #202c33;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Efecto sutil al mantener presionado en el celular */
.wsp-channel-bar:active {
    background-color: #111b21;
}

.wsp-channel-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 500px;
    margin: 0 auto;
}

.wsp-channel-logo svg {
    width: 36px;
    height: 36px;
    fill: #25d366; /* Verde original del logo */
    display: block;
}

.wsp-channel-text {
    flex-grow: 1;
    margin-left: 14px;
    margin-right: 8px;
}

.wsp-channel-text span {
    color: #e9edef;
    font-size: 14px;
    font-weight: 600;
    display: block;
    line-height: 1.3;
}

.wsp-channel-text p {
    color: #8696a0;
    font-size: 11px;
    margin: 2px 0 0 0;
    line-height: 1.2;
}

/* Estilo del indicador visual de botón */
.wsp-channel-btn {
    background-color: #00a884; 
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* El verificado idéntico a la captura de pantalla */
.wsp-badge-check {
    background-color: #1fa37a;
    color: #0b141a;
    font-size: 9px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    margin-left: 2px;
}

/* --- Media Query: Activación móvil --- */
@media (max-width: 480px) {
    .wsp-channel-bar-link {
        display: block;
    }
    body {
        margin-bottom: 65px; /* Evita que la barra tape el pie de página */
    }
}






/* --- Contenedor Principal del Mapa --- */
.municipio-map-container {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: 1140px;
    margin: 30px auto;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid #e1e8ed;
}

/* --- Tarjeta de Información (Izquierda) --- */
.map-info-card {
    padding: 35px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.map-info-card h3 {
    color: #0b141a;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.map-card-subtitle {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.map-card-divider {
    border: 0;
    height: 1px;
    background: #e2e8f0;
    margin-bottom: 25px;
}

.map-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.map-icon {
    font-size: 20px;
    margin-right: 15px;
    margin-top: 2px;
}

.map-info-item strong {
    color: #0b141a;
    font-size: 14px;
    font-weight: 600;
    display: block;
}

.map-info-item p {
    color: #475569;
    font-size: 13px;
    margin: 3px 0 0 0;
    line-height: 1.4;
}

/* --- Botón GPS --- */
.map-gps-btn {
    margin-top: 15px;
    background-color: #00a884; /* Verde en sintonía con la barra de WhatsApp */
    color: #ffffff !important;
    text-decoration: none !important;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.map-gps-btn:hover {
    background-color: #008f72;
}

/* --- Bloque Contenedor del Mapa (Derecha) --- */
.map-iframe-wrapper {
    position: relative;
    width: 100%;
    min-height: 350px;
}

.map-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- Diseño Responsivo (Pantallas de PC) --- */
@media (min-width: 768px) {
    .municipio-map-container {
        flex-direction: row; /* Se transforma en dos columnas */
    }
    
    .map-info-card {
        width: 40%; /* La tarjeta ocupa el 40% */
        border-right: 1px solid #e2e8f0;
    }
    
    .map-iframe-wrapper {
        width: 60%; /* El mapa ocupa el 60% sobrante */
        min-height: 100%;
    }
}




/* --- FORZAR ANCHO COMPLETO DESDE EL CSS (De extremo a extremo) --- */
.muni-footer-fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #ffffff; /* Fondo blanco limpio como la sección del mapa */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05); /* Sombra suave superior */
    border-top: 1px solid #e2e8f0;
}

/* --- DISEÑO DEL CONTENEDOR INTERNO --- */
.juntas-footer-clean {
    max-width: 1140px;
    margin: 0 auto;
    padding: 45px 20px;
    font-family: 'Montserrat', sans-serif;
}

.juntas-footer-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* --- MARCA INSTITUCIONAL (Identidad en Verde Las Juntas) --- */
.juntas-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.juntas-brand-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.juntas-muni-logo {
    width: 85px;
    height: auto;
}

.juntas-brand-titles h2 {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #64748b; /* Gris suave secundario */
}

.juntas-brand-titles h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 2px 0 0 0;
    line-height: 1.1;
    color: #00a884; /* Verde característico de tu gestión */
}

.juntas-lema {
    font-size: 13px;
    font-style: italic;
    color: #64748b;
    margin: 8px 0 0 0;
}

/* --- ICONOS DE REDES SOCIALES --- */
.juntas-social-icons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.juntas-social-icons a {
    display: inline-block;
    transition: transform 0.2s ease;
}

.juntas-social-icons svg {
    width: 24px;
    height: 24px;
    fill: #00a884; /* Iconos en verde uniforme */
}

/* --- COLUMNA CONTACTO --- */
.juntas-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.juntas-footer-contact h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #0b141a;
}

.juntas-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.juntas-icon {
    font-size: 16px;
    margin-top: 2px;
}

.juntas-contact-item p {
    font-size: 13px;
    margin: 0;
    color: #475569;
    line-height: 1.4;
}

/* --- RESPONSIVE: COMPORTAMIENTO PC EN PANTALLA ANCHA --- */
@media (min-width: 768px) {
    .juntas-footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .juntas-footer-brand {
        align-items: flex-start;
        text-align: left;
    }

    .juntas-brand-wrap {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .juntas-muni-logo {
        width: 90px;
    }

    .juntas-social-icons {
        margin-left: 110px; /* Alineado perfectamente debajo de las letras en PC */
    }

    .juntas-footer-contact {
        width: 40%;
    }
}



/* 1. Por defecto (en PC): el enlace no muestra la manito de link */
.juntas-contact-item p a {
    cursor: default;
    color: inherit; /* Mantiene el color gris del texto original */
    text-decoration: none; /* Quita el subrayado azul */
}

/* 2. En celulares (pantallas menores a 767px): se activa la manito para tocar y llamar */
@media (max-width: 767px) {
    .juntas-contact-item p a {
        cursor: pointer;
    }
}






/* --- CONTENEDOR FULL WIDTH (De extremo a extremo de la pantalla) --- */
.juntas-news-banner-full {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* --- ESTRUCTURA DEL BANNER CON LA IMAGEN DE FONDO --- */
.juntas-news-banner-overlay {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px; /* Altura ideal intermedia tipo la de referencia */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    box-sizing: border-box;
}

/* --- FILTRO OPACO DESVANECIDO (Crea la capa oscura sobre la foto) --- */
.juntas-news-dark-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.85) 100%);
    z-index: 1;
}

/* --- CONTENEDOR DE TEXTOS Y BOTÓN (Por encima del filtro oscuro) --- */
.juntas-news-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    font-family: 'Montserrat', sans-serif;
}

.juntas-news-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.juntas-news-description {
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 400;
    margin: 0 0 25px 0;
    line-height: 1.5;
}

/* --- BOTÓN INTERACTIVO CON MOVIMIENTO (Estilo Las Juntas) --- */
.juntas-news-btn {
    display: inline-block;
    background-color: #00a884; /* Nuestro verde de gestión */
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 10px 30px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 168, 132, 0.3);
    
    /* Configuración de la animación: suaviza la respuesta del cursor */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(0);
}

/* --- EFECTO AL PASAR EL CURSOR (Hover en PC) --- */
@media (min-width: 768px) {
    .juntas-news-btn:hover {
        background-color: #00bf96; /* Se vuelve un verde un toque más vivo */
        transform: translateY(-4px); /* El botón se eleva físicamente */
        box-shadow: 0 8px 20px rgba(0, 168, 132, 0.5); /* La sombra se expande dando sensación de flotado */
    }
}

/* --- EFECTO AL TOCAR EN PANTALLAS TÁCTILES (Celular/Tablet) --- */
.juntas-news-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 168, 132, 0.4);
}

/* --- ADAPTACIÓN TOTALMENTE RESPONSIVA --- */
@media (max-width: 767px) {
    .juntas-news-banner-overlay {
        min-height: 250px; /* Reducimos un toque la altura en celulares */
        padding: 45px 15px;
    }
    
    .juntas-news-title {
        font-size: 22px; /* Tipografía más compacta para que entre en una sola línea de celular */
    }
    
    .juntas-news-description {
        font-size: 13px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .juntas-news-title {
        font-size: 26px; /* Ajuste intermedio para Tablets */
    }
}





/* --- CONTENEDOR INTEGRAL FULL WIDTH --- */
.juntas-mails-banner-full {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    overflow: hidden;
}

/* --- CAPA DE FONDO Y ENCUADRE --- */
.juntas-mails-overlay {
    position: relative;
    background-size: cover;
    background-position: center 60% !important; /* Encuadre institucional en horizontal */
    background-repeat: no-repeat;
    padding: 80px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Canvas Full Screen */
}

/* --- FILTRO OSCURO DE CONTRASTE --- */
.juntas-mails-dark-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.88) 100%);
    z-index: 1;
}

/* --- CONTENEDOR DE TEXTOS GENERALES --- */
.juntas-mails-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.juntas-mails-title {
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 12px 0;
    text-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

.juntas-mails-subtitle {
    color: #cbd5e1;
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 45px 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}

/* --- LA GRILLA ELÁSTICA INTELIGENTE --- */
.juntas-mails-grid {
    display: grid;
    /* Auto-acomoda las tarjetas según el ancho de pantalla (mínimo 280px c/u) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 24px;
    justify-content: center;
    width: 100%;
}

/* --- DISEÑO UNIFORME DE LAS TARJETAS --- */
.juntas-mail-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 30px 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    
    /* Animación de aparición suave */
    animation: juntasCardFadeIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.juntas-mail-icon-box {
    font-size: 26px;
    margin-bottom: 12px;
}

.juntas-mail-card h3 {
    color: #00a884; /* Verde oficial de la gestión */
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: 0.3px;
}

.juntas-mail-address {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 500;
    margin: 0;
    word-break: break-all; /* Evita roturas en pantallas chicas */
    user-select: all; /* Permite copiar el mail con un solo toque */
}

/* --- EFECTO HOVER (Solo en PC) --- */
@media (min-width: 1025px) {
    .juntas-mail-card {
        transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    }
    .juntas-mail-card:hover {
        transform: translateY(-4px);
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(0, 168, 132, 0.4);
    }
}

/* --- AJUSTES RESPONSIVOS (Móviles) --- */
@media (max-width: 767px) {
    .juntas-mails-overlay {
        padding: 50px 15px;
        min-height: auto;
    }

    .juntas-mails-title {
        font-size: 24px;
    }

    .juntas-mails-subtitle {
        font-size: 14px;
        margin-bottom: 30px;
    }
    
    .juntas-mail-card {
        padding: 22px 15px;
    }
}

/* --- ANIMACIÓN --- */
@keyframes juntasCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* --- ELIMINAR LÍNEA BLANCA SUPERIOR EN CANVAS --- */
html, body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.juntas-mails-banner-full {
    margin-top: 0 !important; /* Asegura que el banner se pegue arriba del todo */
}








/* --- CONTENEDOR PRINCIPAL DEL FORMULARIO --- */
.wpforms-container {
    background: rgba(255, 255, 255, 0.96) !important; /* Blanco apenas translúcido muy sobrio */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px; /* Esquinas redondeadas idénticas a las tarjetas */
    padding: 40px 35px !important;
    max-width: 650px !important; /* Ancho acotado para que se vea estilizado y centrado */
    margin: 50px auto !important; /* Lo separa de los mails y lo centra horizontalmente */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
    font-family: 'Montserrat', sans-serif !important;
    box-sizing: border-box;
}

/* --- ESTILO DE LAS ETIQUETAS (Nombres de los campos) --- */
.wpforms-form .wpforms-field-label {
    color: #1e293b !important; /* Gris oscuro muy elegante */
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block;
}

/* --- CONFIGURACIÓN DE LOS CAMPOS DE ENTRADA (Inputs y Textarea) --- */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form select,
.wpforms-form textarea {
    background-color: #f8fafc !important; /* Gris institucional sutil de fondo */
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-family: 'Montserrat', sans-serif !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Efecto foco al hacer clic en un casillero */
.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
    background-color: #ffffff !important;
    border-color: #00a884 !important; /* Resalta con el verde oficial de gestión */
    box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.15) !important;
    outline: none !important;
}

/* --- EL BOTÓN DE ENVIAR OFICIAL --- */
.wpforms-form .wpforms-submit-container {
    padding-top: 10px !important;
    text-align: center !important; /* Centra el botón en el formulario */
}

.wpforms-form button.wpforms-submit {
    background-color: #00a884 !important; /* El verde exacto de tu gestión */
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 14px 40px !important;
    cursor: pointer !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3) !important;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Efecto hover sobre el botón */
.wpforms-form button.wpforms-submit:hover {
    background-color: #008f6f !important; /* Oscurece sutilmente */
    transform: translateY(-2px) !important; /* Elevación suave */
    box-shadow: 0 6px 18px rgba(0, 168, 132, 0.4) !important;
}

.wpforms-form button.wpforms-submit:active {
    transform: translateY(0) !important;
}

/* --- MENSAJE DE ÉXITO (Confirmación al enviar) --- */
.wpforms-confirmation-container-id {
    background: rgba(255, 255, 255, 0.96) !important;
    border-left: 4px solid #00a884 !important; /* Línea verde de confirmación */
    border-radius: 12px;
    padding: 30px !important;
    max-width: 650px !important;
    margin: 50px auto !important;
    text-align: center !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    color: #1e293b !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* --- AJUSTE RESPONSIVO PARA MÓVILES --- */
@media (max-width: 767px) {
    .wpforms-container {
        padding: 30px 20px !important;
        margin: 30px 15px !important;
        max-width: 100% !important;
    }
    
    .wpforms-form button.wpforms-submit {
        width: 100% !important; /* El botón ocupa todo el ancho en celulares */
    }
}