/* ==========================================================================
   SECCIÓN HERO CON VIDEO - AYUNTAMIENTO DE CHARO
   ========================================================================== */

.hero-video-section {
    width: 100%;
    height: 60vh;
    /* Altura proporcional responsiva */
    min-height: 400px;
    max-height: 650px;
    background-color: #000000;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mantiene la proporción sin deformar la imagen */
    object-position: center;
    display: block;
}

/* Capa oscura transparente encima del video */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    .hero-video-section {
        height: 45vh;
        min-height: 280px;
    }
}

/* ==========================================================================
   ESTILOS FONDO OSCURO Y MOVIMIENTO CIUDADANO (PRESIDENCIA Y TARJETA)
   ========================================================================== */

/* Colores de Marca */
:root {
    --mc-orange: #FF6B00;
    --mc-orange-hover: #E05E00;
    --dark-bg: #121619;
    --dark-card-bg: #1C2226;
}

/* Fondos */
.bg-dark-mc {
    background-color: var(--dark-bg) !important;
}

.bg-dark-card {
    background-color: var(--dark-card-bg) !important;
}

/* Bordes y Textos */
.border-orange-mc {
    border-color: var(--mc-orange) !important;
}

.text-orange-mc {
    color: var(--mc-orange) !important;
}

.text-light-muted {
    color: #D1D5DB !important;
    /* Gris claro para lectura óptima */
}

/* Animación y Hover de la Tarjeta del Presidente */
.card-presidente-animated {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-top: 5px solid var(--mc-orange) !important;
    /* Borde Naranja MC */
}

/* Elevación de la tarjeta con resplandor naranja */
.card-presidente-animated:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(255, 107, 0, 0.25) !important;
}

.president-img-wrapper {
    background-color: #000000;
}

/* EFECTO DE ZOOM Y ESCALA DE LA IMAGEN */
.img-president-hover {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
    display: block;
    object-fit: cover;
    aspect-ratio: 4/5;
}

/* Zoom progresivo al pasar el cursor */
.card-presidente-animated:hover .img-president-hover {
    transform: scale(1.06);
    filter: brightness(1.05);
}

/* Resplandor overlay sutil en hover */
.img-overlay-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

.card-presidente-animated:hover .img-overlay-glow {
    opacity: 0.9;
}

/* BOTONES ESTILO MOVIMIENTO CIUDADANO */
.bg-orange-mc {
    background-color: var(--mc-orange) !important;
}

.btn-orange-mc {
    background-color: var(--mc-orange);
    color: #ffffff;
    border: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-orange-mc:hover {
    background-color: var(--mc-orange-hover);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-outline-light-mc {
    color: #ffffff;
    border: 2px solid #ffffff;
    background: transparent;
    transition: all 0.2s ease;
}

.btn-outline-light-mc:hover {
    background-color: #ffffff;
    color: var(--dark-bg);
    transform: translateY(-2px);
}

/* ==========================================================================
   ESTILOS SECCIÓN NUESTRO MUNICIPIO - FONDO NARANJA Y TOGGLES
   ========================================================================== */

/* Fondo Naranja Institucional */
.bg-naranja-municipio {
    background-color: #f7945d !important;
}

/* Título con estilo tipográfico manuscrito/cursivo */
.title-nuestro-municipio {
    font-family: 'Georgia', 'Brush Script MT', cursive, serif;
    font-style: italic;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
}

/* Contenedores con transparencia sutil */
.card-toggles-container,
.card-slider-container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
}

/* Personalización del Acordeón / Toggles */
.custom-municipio-accordion .accordion-button {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding-right: 20px;
}

/* Ícono de círculo con flecha en la derecha del toggle */
.custom-municipio-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3.793L6.354 7.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 8.293V4.5z'/%3e%3c/svg%3e") !important;
    background-size: 1.25rem;
    transition: transform 0.3s ease;
}

.custom-municipio-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.custom-municipio-accordion .accordion-body {
    border-radius: 0 0 8px 8px;
}

/* Ajustes del Carousel / Slider de Imágenes */
.img-municipio-slide {
    height: 480px;
    object-fit: cover;
    object-position: center;
}

/* Dispositivos móviles */
@media (max-width: 768px) {
    .img-municipio-slide {
        height: 300px;
    }
}

/* ==========================================================================
   ESTILOS SECCIÓN NUESTRO TRABAJO - FONDO BLANCO CON DIFUMINADO
   ========================================================================== */

/* Fondo Blanco con gradientes de difuminado arriba y abajo */
.bg-white-blur {
    background-color: #ffffff !important;
    position: relative;
}

.bg-white-blur::before,
.bg-white-blur::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 2;
    pointer-events: none;
}

/* Difuminado Superior */
.bg-white-blur::before {
    top: 0;
    background: linear-gradient(180deg, rgba(203, 207, 216, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Difuminado Inferior */
.bg-white-blur::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(203, 207, 216, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Tarjeta Limpia para los Feeds */
.card-feed-clean {
    border: 1px solid #e5e7eb !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-feed-clean:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Wrapper para forzar la altura del feed de Facebook */
.fb-iframe-wrapper {
    width: 100%;
    height: 700px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

.fb-iframe-wrapper iframe {
    width: 100% !important;
    height: 700px !important;
}

/* ==========================================================================
   ESTILOS DE LA SECCIÓN CONTÁCTANOS Y FORMULARIO (FONDO NARANJA DIFUMINADO)
   ========================================================================== */

/* Fondo Naranja Institucional con Difuminado y Textura Radial */
.bg-orange-blur {
    background: radial-gradient(circle at 50% 30%, #ff8533 0%, #FF6B00 50%, #e05e00 100%) !important;
    position: relative;
}

/* Difuminado sutil en bordes superior e inferior */
.bg-orange-blur::before,
.bg-orange-blur::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 45px;
    z-index: 2;
    pointer-events: none;
}

.bg-orange-blur::before {
    top: 0;
    background: linear-gradient(180deg, rgba(18, 22, 25, 0.4) 0%, rgba(255, 107, 0, 0) 100%);
}

.bg-orange-blur::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(18, 22, 25, 0.4) 0%, rgba(255, 107, 0, 0) 100%);
}

/* Tarjetas sobre el fondo naranja difuminado */
.card-contacto-animated {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    backdrop-filter: blur(8px);
}

.card-contacto-animated:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3) !important;
}

.icon-contact-wrapper {
    background-color: #ffffff !important;
    color: var(--mc-orange) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Botones de contacto rápido ajustados para contraste sobre fondo naranja */
.btn-outline-light-mc {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background-color: rgba(255, 255, 255, 0.08);
}

.btn-outline-light-mc:hover {
    background-color: #ffffff !important;
    color: var(--mc-orange) !important;
    border-color: #ffffff !important;
    transform: translateX(4px);
}

.btn-outline-light-mc:hover i,
.btn-outline-light-mc:hover div {
    color: var(--mc-orange) !important;
}

/* ==========================================================================
   ESTILOS SECCIÓN VEN, VISÍTANOS Y MARCO GLOW (CON DIFUMINADO INFERIOR)
   ========================================================================== */

#ven-visitanos {
    position: relative;
}

/* Difuminado sutil en la parte inferior hacia naranja */
#ven-visitanos::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(0deg, var(--mc-orange) 0%, rgba(255, 107, 0, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

.glow-frame-container {
    position: relative;
    padding: 22px;
    /* Grosor del marco */
    background-color: #ff3b30;
    /* Color base del marco estilo muestra */
    border-radius: 12px;

    /* EFECTO DE GLOW / RESPLANDOR DIFUMINADO EXTERNO E INTERNO */
    box-shadow:
        0 0 25px rgba(255, 59, 48, 0.8),
        0 0 50px rgba(255, 107, 0, 0.6),
        inset 0 0 20px rgba(0, 0, 0, 0.5);

    transition: box-shadow 0.4s ease;
}

.glow-frame-container:hover {
    box-shadow:
        0 0 35px rgba(255, 59, 48, 0.95),
        0 0 65px rgba(255, 107, 0, 0.8),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.img-visitanos-slide {
    height: 520px;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .glow-frame-container {
        padding: 12px;
    }

    .img-visitanos-slide {
        height: 300px;
    }
}

/* ==========================================================================
   ESTILOS ASISTENTE VISUAL & ACCESIBILIDAD
   ========================================================================== */

/* Clases de Accesibilidad aplicables al body */
body.high-contrast {
    background-color: #000000 !important;
    color: #ffff00 !important;
}

body.high-contrast *:not(.btn-orange-mc) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffff00 !important;
}

body.grayscale-mode {
    filter: grayscale(100%);
}

/* Transiciones suaves de escala */
body {
    transition: font-size 0.2s ease, filter 0.3s ease;
}

.accessibility-menu {
    z-index: 1060;
    backdrop-filter: blur(10px);
}