/**
 * Responsive Design Breakpoints
 * H. Ayuntamiento de Escárcega
 *
 * Soportado en: 320px, 375px, 430px, 768px, 1024px, 1280px, 1440px, 1920px
 */

/* ==================================================
   Pantallas Grandes (Desktop XL / 1440px - 1920px)
   ================================================== */
@media (min-width: 1440px) {
    :root {
        --container-width: 1320px;
    }

    .hero-section {
        min-height: 680px;
    }
}

/* ==================================================
   Desktop Intermedio y Laptops (<= 1200px)
   ================================================== */
@media (max-width: 1200px) {
    .nav-list {
        gap: 0.25rem;
    }

    .nav-link {
        padding: 0.5rem 0.65rem;
        font-size: 0.85rem;
    }

    .quick-access-grid {
        gap: 1rem;
    }

    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1.2fr 1fr;
        gap: 2rem;
    }
}

/* ==================================================
   Tablets (<= 1024px)
   ================================================== */
@media (max-width: 1024px) {
    /* Header: ocultar menú desktop y mostrar botón móvil */
    .header-nav-desktop {
        display: none;
    }

    .header-mobile-toggle {
        display: flex;
        align-items: center;
    }

    .topbar-tagline {
        display: none;
    }

    .topbar-container {
        justify-content: flex-end;
    }

    /* Hero: apilado en tablet */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-panel-wrapper {
        justify-content: flex-start;
    }

    .hero-direct-panel {
        max-width: 100%;
    }

    /* Accesos rápidos: 3 columnas */
    .quick-access-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* Noticias: columnas adaptables en tablet */
    .news-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .news-featured-card {
        grid-template-columns: 1fr;
    }

    .news-featured-media {
        min-height: 280px;
    }

    /* Conoce nuestro municipio: apilado */
    .municipality-split-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .municipality-media-col {
        height: 320px;
    }

    /* Footer: 2 columnas */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    /* Módulo de Gobierno Canónico (<= 1024px) */
    .gov-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .gov-hero-card-col {
        max-width: 580px;
    }

    .gov-president-trio {
        grid-template-columns: 280px 1fr;
        gap: 2rem;
    }

    .gov-pres-quote-wrap {
        grid-column: 1 / -1;
    }

    .gov-cabildo-grid,
    .gov-regidores-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    .gov-dept-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    /* Trámites y Servicios (<= 1024px) */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .services-desk-card {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .services-desk-media {
        min-height: 260px;
    }

    .services-desk-info {
        padding: 2rem;
    }

    .gov-organigrama-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .gov-norm-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* Nuestro Municipio (<= 1024px) */
    .muni-history-grid,
    .muni-symbols-wrapper,
    .muni-economy-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .muni-shield-frame {
        max-width: 380px;
        margin: 0 auto;
    }

    .muni-indicators-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .muni-attractions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contacto y Ubicación (<= 1024px) */
    .contact-hq-card,
    .contact-map-card {
        grid-template-columns: 1fr;
    }

    .contact-hq-image-col {
        min-height: 280px;
        max-height: 360px;
    }

    .contact-hq-details-col {
        padding: 2rem;
    }

    .contact-map-embed-wrapper {
        min-height: 340px;
    }

    .contact-map-info-col {
        padding: 2rem;
    }
}

/* ==================================================
   Móviles Grandes y Tablets Pequeñas (<= 768px)
   ================================================== */
@media (max-width: 768px) {
    .header-container {
        height: 72px;
    }

    .brand-symbol {
        width: 44px;
    }

    .brand-symbol.brand-logo-dif {
        width: auto;
        height: 48px;
        max-height: 50px;
        max-width: 115px;
    }

    .brand-title {
        font-size: 1.05rem;
    }

    .brand-prefix {
        font-size: 0.62rem;
    }

    .brand-location {
        font-size: 0.68rem;
    }

    /* Barra auxiliar superior: simplificada */
    .auxiliary-list {
        gap: 0.85rem;
    }

    .auxiliary-link {
        font-size: 0.75rem;
    }

    /* Hero */
    .hero-section {
        min-height: auto;
        padding-top: 3rem;
        padding-bottom: 3.5rem;
    }

    .hero-title {
        font-size: 2.15rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-direct-panel {
        padding: 1.5rem 1.25rem;
    }

    .direct-access-card {
        padding: 0.75rem 0.85rem;
    }

    /* Accesos rápidos: 2 columnas en mobile */
    .quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .quick-access-circle {
        width: 64px;
        height: 64px;
    }

    .quick-access-icon svg {
        width: 24px;
        height: 24px;
    }

    /* Noticias: 1 columna en mobile */
    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-featured-media {
        min-height: 220px;
    }

    .news-archive-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Conoce nuestro municipio */
    .municipality-content-col {
        padding: 2rem 1.5rem;
    }

    .municipality-media-col {
        height: 250px;
    }

    /* Footer: 1 columna apilada */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .footer-escudo {
        width: 75px;
    }

    .footer-bottom-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .footer-legal-list {
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* Módulo de Gobierno Canónico (<= 768px) */
    .gov-hero-canon {
        padding: 3rem 0;
    }

    .gov-hero-title {
        font-size: 2.25rem;
    }

    .gov-hero-subtitle {
        font-size: 1rem;
    }

    .gov-president-trio {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gov-pres-photo-frame {
        max-width: 320px;
        margin: 0 auto;
        min-height: 360px;
    }

    .gov-cabildo-grid,
    .gov-regidores-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .gov-sindicos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .gov-dept-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    .gov-organigrama-diagram {
        padding: 1.5rem 1rem;
        overflow-x: auto;
    }

    .gov-org-level-subs {
        gap: 0.5rem;
    }

    .gov-org-node--branch {
        font-size: 0.75rem;
        padding: 0.65rem 0.35rem;
    }

    .gov-norm-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Trámites y Servicios (<= 768px) */
    .services-hero {
        padding: 2.5rem 0;
    }

    .services-hero-title {
        font-size: 2rem;
    }

    .services-search-box {
        padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    }

    .services-filter-nav {
        gap: 0.5rem;
    }

    .service-card {
        padding: 1.25rem;
    }

    .service-meta-grid {
        grid-template-columns: 1fr;
    }

    /* Nuestro Municipio (<= 768px) */
    .muni-hero {
        padding: 2.5rem 0;
    }

    .muni-hero-title {
        font-size: 2.1rem;
    }

    .muni-elements-grid,
    .muni-history-meta-box {
        grid-template-columns: 1fr;
    }

    .muni-chiclero-media {
        height: 260px;
    }

    .muni-tren-card {
        min-height: 360px;
    }

    /* Contacto y Ubicación (<= 768px) */
    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .contact-form-wrapper {
        padding: 1.5rem;
    }

    .contact-emergency-grid,
    .contact-offices-grid,
    .contact-hq-actions-grid {
        grid-template-columns: 1fr;
    }

    .contact-gps-buttons {
        flex-direction: column;
    }

    .contact-gps-btn,
    .contact-submit-btn {
        width: 100%;
        justify-content: center;
    }

    /* Atención Ciudadana (<= 768px) */
    .citizen-form-grid {
        grid-template-columns: 1fr;
    }

    .citizen-form-wrapper {
        padding: 1.75rem 1.25rem;
    }

    .citizen-channels-grid,
    .citizen-reports-grid,
    .citizen-process-grid {
        grid-template-columns: 1fr;
    }

    .citizen-form-bottom {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .citizen-submit-btn {
        width: 100%;
        justify-content: center;
    }

    /* Directorio Municipal (<= 768px) */
    .directory-switchboard-card {
        flex-direction: column;
        text-align: center;
        padding: 1.75rem;
    }

    .directory-sw-addr,
    .directory-sw-details {
        justify-content: center;
    }

    .directory-sw-actions {
        width: 100%;
    }

    .directory-sw-btn {
        justify-content: center;
    }

    .directory-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================
   Móviles Estándar y Pequeños (<= 430px - 320px)
   ================================================== */
@media (max-width: 430px) {
    .header-container {
        height: 66px;
    }

    .brand-symbol {
        width: 38px;
    }

    .brand-symbol.brand-logo-dif {
        width: auto;
        height: 42px;
        max-height: 44px;
        max-width: 100px;
    }

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

    .brand-prefix {
        font-size: 0.58rem;
    }

    .brand-location {
        display: none;
    }

    .header-topbar .auxiliary-item:first-child {
        display: none; /* Simplificar en 320px */
    }

    .hero-title {
        font-size: 1.85rem;
    }

    .hero-badge {
        font-size: 0.65rem;
        padding: 0.3rem 0.75rem;
    }

    .direct-card-title {
        font-size: 0.88rem;
    }

    .direct-card-subtitle {
        display: none;
    }

    .quick-access-item {
        padding: 0.75rem 0.25rem;
    }

    .quick-access-label {
        font-size: 0.8rem;
    }

    .quick-access-desc {
        display: none;
    }

    .municipality-title {
        font-size: 1.6rem;
    }

    /* Módulo de Gobierno Canónico (<= 430px) */
    .gov-hero-title {
        font-size: 1.85rem;
    }

    .gov-hero-glass-card {
        padding: 1.5rem 1.25rem;
    }

    .gov-hero-glass-top {
        flex-direction: column;
        gap: 0.75rem;
    }

    .gov-pres-photo-frame {
        max-width: 260px;
        min-height: 300px;
    }

    .gov-cabildo-grid,
    .gov-regidores-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .gov-sindicos-grid {
        grid-template-columns: 1fr;
        max-width: 260px;
        margin: 0 auto;
        gap: 1.25rem;
    }

    .gov-cabildo-photo-box {
        max-width: 220px;
        margin: 0 auto;
    }

    .gov-dept-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .gov-org-level-subs {
        flex-direction: column;
        gap: 0.65rem;
    }

    .gov-org-tree-line-h {
        display: none;
    }

    /* Trámites y Servicios (<= 430px) */
    .services-hero-title {
        font-size: 1.75rem;
    }

    .services-desk-info {
        padding: 1.5rem 1.25rem;
    }

    .services-desk-actions {
        flex-direction: column;
    }

    /* Nuestro Municipio (<= 430px) */
    .muni-hero-title {
        font-size: 1.85rem;
    }

    .muni-indicators-grid,
    .muni-attractions-grid {
        grid-template-columns: 1fr;
    }

    .muni-welcome-banner {
        padding: 2rem 1.25rem;
    }

    .muni-wb-actions {
        flex-direction: column;
    }

    /* Contacto y Ubicación (<= 430px) */
    .contact-hero-title {
        font-size: 1.85rem;
    }

    .contact-section-title {
        font-size: 1.5rem;
    }

    .contact-em-phone {
        font-size: 1.05rem;
    }

    .contact-hq-details-col {
        padding: 1.5rem 1rem;
    }

    .contact-form-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .contact-secure-badge {
        justify-content: center;
    }

    /* Atención Ciudadana (<= 430px) */
    .citizen-hero-title {
        font-size: 1.85rem;
    }

    .citizen-section-title {
        font-size: 1.45rem;
    }

    .citizen-quick-nav {
        flex-direction: column;
    }

    .citizen-quick-link {
        width: 100%;
        justify-content: center;
    }

    /* Directorio Municipal (<= 430px) */
    .directory-hero-title {
        font-size: 1.85rem;
    }

    .directory-sw-title {
        font-size: 1.2rem;
    }

    .directory-category-filters {
        flex-direction: column;
    }

    .directory-cat-btn {
        width: 100%;
        text-align: center;
    }
}

/* Protección general contra desbordamiento horizontal (clip no desactiva position: sticky) */
body, html {
    overflow-x: clip;
    width: 100%;
}