/* ========================================
   CUSTOM STYLES
   ======================================== */

/* --- DESKTOP: Centrar las tarjetas --- */
@media (min-width: 769px) {
    .componentes-scroll-container {
        justify-content: center;
    }

    .componente-card h3 {
        font-size: 0.9rem; 
    }
}

/* --- MOBILE: Ajustes de tamaño de tarjeta y letra --- */
@media (max-width: 768px) {
    .componente-card {
        flex-basis: 95%; 
        min-height: 30rem; 
    }

    .componente-card h3 {
        font-size: 1rem; 
    }

    .componente-card .flex-shrink-0 {
        width: 3.5rem; 
        height: 3.5rem; 
    }

    .componente-card .flex-shrink-0 svg {
        width: 2.25rem; 
        height: 2.25rem; 
    }
}

/* ========================================
   DESKTOP SUBMENU PANEL (EL PANEL REAL DE PC)
   ======================================== */
#desktop-submenu-panel {
    position: fixed;
    top: 63px; 
    
    /* Posición FINAL deseada (cuando está abierto) */
    left: 61% !important; 
    
    /* === ANIMACIÓN DE ENTRADA DESDE LA IZQUIERDA === */
    /* Estado inicial (cerrado): Desplazado hacia la izquierda y oculto */
    transform: translateX(-100%) !important; 
    opacity: 0;
    visibility: hidden;
    
    /* Transición suave para el efecto de deslizamiento */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    /* ============================================== */
    
    /* Dimensiones Fijas */
    width: 1250px !important;  /* Aumentado un poco */
    max-width: 98vw !important; 
    min-width: 300px !important;
    height: 755px !important; 
    max-height: calc(100vh - 80px) !important; 
    
    background-color: #ffffff;
    border: 2px solid #eff3f1; /* Borde grs claro */
    border-radius: 0 0 32px 16px; /* Esquina inferior derecha más redondeada */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 1201; 
    overflow-y: auto;
    padding: 1.5rem;
    
    /* Ocultar barra de desplazamiento */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
}

/* Ocultar scrollbar en Chrome, Safari y Opera */
#desktop-submenu-panel::-webkit-scrollbar {
    display: none;
}

/* Estado ABIERTO: Se mueve a su posición final (-50% para centrar relativo al left:66%) */
#desktop-submenu-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) !important; 
}

@media (max-width: 1023px) {
    #desktop-submenu-panel {
        display: none;
    }
}

#desktop-submenu-panel .panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #14532d; 
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #166534; 
    text-align: center;
}

/* Estilos de los botones (Ancho 370px) */
#desktop-submenu-panel .panel-button {
    display: block;
    width: 370px !important; /* Aumentado para aprovechar el espacio */
    max-width: 100%;
    padding: 0.5rem 0.8rem; 
    margin-bottom: 0.4rem;
    text-align: left;
    font-size: 1rem; /* Aumentado para PC */
    line-height: 1.3;
    color: #374151; 
    background-color: #dcfce7; /* Verde claro sutil */
    border: 1px solid #d1fae5;
    border-radius: 0.375rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: all 0.2s;
    cursor: pointer;
    white-space: normal; 
}

#desktop-submenu-panel .panel-button:hover {
    background-color: #166534; 
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#desktop-submenu-panel .panel-submenu-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #16a34a; 
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #d1d5db;
    text-align: center;
    text-transform: uppercase;
}

/* Configuración de columnas */
.panel-columns {
    display: flex !important; 
    flex-direction: row;
    align-items: flex-start;
    justify-content: center; 
    gap: 1.5rem; 
    width: 100%; 
    height: 100%; 
}

/* Cada columna dentro del panel */
.panel-columns > div {
    display: flex;
    flex-direction: column;
    width: 370px !important; /* Aumentado para aprovechar el espacio */
    flex-shrink: 0;
}

.dropdown-menu-content {
    background-color: white;
}

.menu-item-stack {
    display: block;
    width: 60%;
    padding: 0.8rem 1.5rem;
    font-weight: 500;
    text-align: left;
    font-size: 1rem;
    color: #374151;
    transition: background-color 0.2s, color 0.2s;
}

.menu-item-stack:hover {
    background-color: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

/* AJUSTES MENÚ MÓVIL (Sin cambios que afecten PC) */
@media (min-width: 1024px) {
    .mobile-dropdown .dropdown-menu-content > .menu-item-stack {
        display: block !important;
        width: 100% !important;
    }
}

/* Ocultar menú hamburguesa izquierdo en PC */
@media (min-width: 1024px) {
    #mobile-menu-btn {
        display: none !important;
    }
}

/* Centrar los paneles móviles en tablet y móviles grandes */
@media (min-width: 640px) and (max-width: 1023px) {
    .mobile-dropdown,
    .mobile-dropdown-right {
        width: min(95%, 640px) !important;
        max-width: 640px !important;
        left: 50% !important;
        right: auto !important;
    }
    .mobile-dropdown {
        transform: translateX(-150%) !important;
    }
    .mobile-dropdown-right {
        transform: translateX(150%) !important;
    }
    .mobile-dropdown.show,
    .mobile-dropdown-right.show {
        transform: translateX(-50%) !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   BLOQUE DE RESCATE: VISIBILIDAD DE SECCIONES
   ============================================================ */

/* MODIFICADO: Se eliminaron los estilos de "tarjeta" (fondo blanco, sombra)
   de las secciones internas para evitar el doble borde, manteniendo solo
   la estructura necesaria. */
#credenciales-section,
#directiva-section,
section[id$="-section"]:not(#homepage-section) {
    display: none;
    background-color: transparent; /* Eliminado el fondo blanco */
    border-radius: 0;             /* Eliminado el borde redondeado */
    padding: 0;                   /* Eliminado padding extra */
    margin: 5rem auto 1rem auto;  /* Ajustado margen superior para respetar el logo */
    max-width: 100%;              /* Ancho completo dentro del contenedor padre */
    box-shadow: none;             /* Eliminada la sombra */
    position: relative;
    z-index: 50;
}

#credenciales-section.active,
#directiva-section.active,
section[id$="-section"].active {
    display: block !important;
    animation: fadeIn 0.5s ease-out;
}

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

#credenciales-section *, 
#directiva-section * {
    color: #1f2937; 
}

#credenciales-section h1, #credenciales-section h2, #credenciales-section h3,
#directiva-section h1, #directiva-section h2, #directiva-section h3 {
    color: inherit; 
}

.credenciales-main-title { color: #EAB308 !important; }
.credenciales-main-subtitle { color: #EAB308 !important; }
.credenciales-section-title { color: #F54C38 !important; }

body:not(.homepage) {
    background-image: url('../images/101.webp') !important; 
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* ========================================
   MODAL AVISO PROFESIONAL
   ======================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    /* Transición para entrada y salida */
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

.modal-content {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 550px;
    width: 90%;
    position: relative;
    text-align: center; /* CENTRAR TODO EL CONTENIDO POR DEFECTO */
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
    /* Transición para entrada y salida */
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.modal-overlay.show .modal-content {
    transform: scale(1);
    opacity: 1;
}

.modal-logo {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem auto;
    display: block;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
    text-align: center;
}

.modal-content p {
    margin-bottom: 1rem;
    text-align: justify;
}

.modal-content p strong {
    text-align: left; /* Para que los strong no se justifiquen */
}

.modal-content strong {
    color: #1d4ed8;
}

.modal-divider {
    border: 0;
    height: 1px;
    background-color: #e5e7eb;
    margin: 1.5rem 0;
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: #1f2937;
}

.modal-accept-button {
    background-color: #16a34a;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1.5rem;
    transition: background-color 0.2s ease;
}

.modal-accept-button:hover {
    background-color: #15803d;
}
@media (max-width: 768px) {
    .modal-content {
        width: 97%;
    }
}

/* ============================================================
   DESKTOP: Eliminar barra verde y container al mismo nivel que mobile
   ============================================================ */
@media (min-width: 1024px) {
    body.show-directiva .desktop-navbar,
    body.show-credenciales .desktop-navbar {
        display: none !important;
    }

    body.show-directiva #contenido.card-container,
    body.show-credenciales #contenido.card-container {
        margin-top: 4.0rem !important;
        border-radius: 1.8rem !important;
    }

    /* Título más arriba en PC */
    body.show-directiva #main-section,
    body.show-credenciales #credenciales-section {
        margin-top: 3.5rem !important;
    }

    body.show-directiva #main-section > header {
        padding-top: 0.5rem !important;
    }

    body.show-credenciales .credenciales-title-container {
        margin-top: 0.5rem !important;
    }
}

/* ============================================================
   MOBILE: Ajustes Directivas y Credenciales
   ============================================================ */
@media (max-width: 767px) {
    /* Container pegado justo debajo del banner, con bordes redondeados */
    #contenido.card-container {
        margin-top: 4.8rem !important;
        padding-top: 0.75rem !important;
        border-radius: 1.8rem !important;
    }

    /* Bajar un poco el título en Directivas y Credenciales */
    #main-section,
    #credenciales-section {
        margin-top: 5.0rem !important;
    }

    /* Subir título en Directivas */
    #main-section > header {
        padding-top: 0.5rem !important;
    }

    /* Subir título en Credenciales */
    .credenciales-title-container {
        margin-top: 0.5rem !important;
    }

    /* Chevron: esquina superior derecha, z-index por encima de las secciones (z-index:50) */
    #credenciales-arrow-back-btn {
        top: 0.7rem !important;
        right: 0.5rem !important;
        margin-top: 0 !important;
        z-index: 60 !important;
    }
}

/* Chevron desktop: neutralizar space-y-6 */
@media (min-width: 768px) {
    #credenciales-arrow-back-btn {
        top: 1.1rem !important;
        margin-top: 0 !important;
        z-index: 60 !important;
    }
}

/* ========================================
   ACCESIBILIDAD: TAMAÑO MÍNIMO DE ÁREAS TÁCTILES
   ======================================== */

/* Botones del menú desktop */
.desktop-nav-item {
    min-height: 40px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
}

/* Asegurar espaciado mínimo entre botones */
.desktop-nav-item + .desktop-nav-item {
    margin-left: 8px !important;
}

/* Botones del dropdown */
.desktop-dropdown button,
.desktop-dropdown a {
    min-height: 38px !important;
    padding: 8px 10px !important;
}

/* Botones móviles — solo aplica en pantallas >= 600px */
@media (min-width: 600px) {
    .mobile-dropdown .submenu button,
    .mobile-dropdown .submenu-parent-btn,
    .mobile-dropdown .dropdown-menu-content > button,
    .mobile-dropdown .dropdown-menu-content > a {
        min-height: 42px !important;
        padding: 10px 14px !important;
    }

    /* Botones del menú de leyes */
    .mobile-dropdown .submenu.leyes-compactas button {
        min-height: 40px !important;
        padding: 8px 14px !important;
    }
}

/* ========================================
   MOBILE DROPDOWN POSITION FIX
   ======================================== */
@media (max-width: 767px) {
    .mobile-dropdown {
        top: 4rem !important;
        height: calc(100vh - 4rem) !important;
        z-index: 1500 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* --- Submenú "Links de Interés": texto centrado --- */
.desktop-submenu.submenu-centered .desktop-submenu-item {
    text-align: center;
    justify-content: center;
}

.mobile-dropdown .submenu.submenu-compact.submenu-centered button {
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* ========================================
   CELULARES PEQUEÑOS (≤ 380px)
   ======================================== */

/* Banner pill y menú: escalado fluido para todos los celulares */
@media (max-width: 1023px) {
    #banner {
        width: calc(100% - 1rem) !important;
        /* La altura la controla --banner-pill-h definido en el
           <style> de index.html (línea 1745) para que coincida
           con el spacer del scroll. */
    }
    #banner > div {
        gap: 0 !important;
        padding-left: clamp(0.25rem, 1.5vw, 0.5rem) !important;
        padding-right: clamp(0.25rem, 1.5vw, 0.5rem) !important;
    }

    /* Imagen aniversario (agrandada en móvil) */
    #banner-aniversario {
        width: clamp(160px, 48vw, 240px) !important;
        max-width: clamp(160px, 48vw, 240px) !important;
        height: clamp(64px, 20vw, 80px) !important;
        max-height: clamp(64px, 20vw, 80px) !important;
        margin-left: clamp(1rem, 3.6vw, 1.8rem) !important;
        object-fit: contain !important;
    }

    /* Logo OS10 */
    #banner .logo-os10-container img,
    #banner > div > div:first-child img {
        height: clamp(38px, 10vw, 50px) !important;
        width: auto !important;
    }

    /* Número de visitas en negrillas */
    .banner-text-small #visit-counter {
        font-weight: 800 !important;
    }

    /* Lupa */
    #global-search-button {
        min-width: clamp(36px, 10vw, 44px) !important;
        min-height: clamp(36px, 10vw, 44px) !important;
        width: clamp(36px, 10vw, 44px) !important;
        height: clamp(36px, 10vw, 44px) !important;
        padding: clamp(4px, 1vw, 6px) !important;
    }
    #global-search-button svg,
    #global-search-button .search-icon {
        width: clamp(20px, 5.5vw, 24px) !important;
        height: clamp(20px, 5.5vw, 24px) !important;
    }

    /* Contador de visitas */
    #banner-counter-group {
        margin-right: clamp(0.25rem, 1.2vw, 0.5rem) !important;
        padding: 0 clamp(0.25rem, 1vw, 0.5rem) 0 0 !important;
    }
    .banner-text-small {
        font-size: clamp(0.95rem, 4.2vw, 1.18rem) !important;
    }
    .banner-text-small #visit-counter {
        font-size: clamp(1rem, 4.6vw, 1.3rem) !important;
    }
    .banner-text-small svg {
        width: clamp(1.4rem, 5.6vw, 1.75rem) !important;
        height: clamp(1.4rem, 5.6vw, 1.75rem) !important;
    }

    /* Hamburger menu button */
    #mobile-menu-btn {
        margin-left: clamp(6px, 1.6vw, 10px) !important;
    }
    #mobile-menu-btn-right {
        margin-right: clamp(6px, 1.6vw, 10px) !important;
    }
    #mobile-menu-btn,
    #mobile-menu-btn-right {
        width: clamp(44px, 10vw, 48px) !important;
        height: clamp(44px, 10vw, 48px) !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: clamp(4px, 1vw, 6px) !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
        z-index: 10 !important;
    }
    #mobile-menu-btn svg,
    #mobile-menu-btn-right svg {
        width: clamp(22px, 6vw, 26px) !important;
        height: clamp(22px, 6vw, 26px) !important;
    }
    /* Close icons del menú móvil: color específico según menú abierto */
    #menu-icon-close {
        color: #047857 !important;
        stroke-width: 3 !important;
    }
    #menu-icon-close-right {
        color: #0633af !important;
        stroke-width: 3 !important;
    }
    #menu-icon-close path,
    #menu-icon-close-right path {
        stroke-width: 3 !important;
    }

    /* Menú dropdown: extensión del banner pill */
    .mobile-dropdown,
    .mobile-dropdown-right {
        position: fixed !important;
        top: 8px !important;
        width: calc(100% - 0.4rem) !important;
        max-width: 500px !important;
        max-height: calc(100vh - 16px) !important;
        height: auto !important;
        padding-top: 0 !important;
        border-radius: 28px !important;
        background: rgba(255, 255, 255, 0.79) !important;
        backdrop-filter: saturate(180%) blur(40px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(40px) !important;
        border: 1px solid rgba(255,255,255,0.55) !important;
        box-shadow: 0 8px 40px rgba(0,0,0,0.16) !important;
    }
    .mobile-dropdown {
        left: 0.2rem !important;
        right: auto !important;
    }
    .mobile-dropdown-right {
        left: auto !important;
        right: 0.2rem !important;
    }
    /* Botones del menú: texto más grande y en negrillas */
    /* PRUEBA: Tipografía Arial para todos los textos de ambos menús móviles
       (izquierdo: #mobile-dropdown, derecho: #mobile-dropdown-right, paneles drill) */
    body #mobile-dropdown,
    body #mobile-dropdown *,
    body #mobile-dropdown-right,
    body #mobile-dropdown-right *,
    body #drill-detail-panel,
    body #drill-detail-panel *,
    body #drill-detail-panel-right,
    body #drill-detail-panel-right * {
        font-family: Arial, Helvetica, sans-serif !important;
    }
    body .mobile-dropdown .submenu-parent-btn {
        padding: clamp(0.4rem, 1.8vw, 0.8rem) clamp(0.6rem, 2.5vw, 1.5rem) !important;
        font-size: clamp(1rem, 3.2vw, 1.15rem) !important;
        font-weight: 700 !important;
    }
    body .mobile-dropdown .submenu button,
    body .mobile-dropdown .dropdown-menu-content > button,
    body .mobile-dropdown .dropdown-menu-content > a {
        padding: clamp(0.3rem, 1.3vw, 0.5rem) clamp(0.6rem, 2.5vw, 1.5rem) !important;
        font-size: clamp(0.95rem, 3vw, 1.1rem) !important;
        font-weight: 600 !important;
    }
    body .mobile-dropdown .dropdown-menu-header h3 {
        font-size: clamp(1.05rem, 3.4vw, 1.2rem) !important;
        font-weight: 800 !important;
    }
    body .mobile-dropdown .submenu.submenu-compact button,
    body .mobile-dropdown .submenu.leyes-compactas button {
        padding-left: clamp(1rem, 4vw, 2.5rem) !important;
        font-size: clamp(0.82rem, 2.5vw, 0.95rem) !important;
        font-weight: 600 !important;
    }
    /* Flechas del menú */
    body .mobile-dropdown .submenu-arrow {
        width: clamp(0.9rem, 3vw, 1.25rem) !important;
        height: clamp(0.9rem, 3vw, 1.25rem) !important;
    }
    /* Accesibilidad táctil fluida */
    body .mobile-dropdown .submenu button,
    body .mobile-dropdown .submenu-parent-btn,
    body .mobile-dropdown .dropdown-menu-content > button,
    body .mobile-dropdown .dropdown-menu-content > a {
        min-height: clamp(34px, 9vw, 42px) !important;
    }
}

/* Menú: pantallas menores a 374px */
@media (max-width: 374px) {
    body .mobile-dropdown .submenu-parent-btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.68rem !important;
    }
    body .mobile-dropdown .submenu button,
    body .mobile-dropdown .dropdown-menu-content > button,
    body .mobile-dropdown .dropdown-menu-content > a {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.68rem !important;
    }
    body .mobile-dropdown .submenu.submenu-compact button,
    body .mobile-dropdown .submenu.leyes-compactas button {
        padding-left: 0.8rem !important;
        font-size: 0.56rem !important;
    }
    body .mobile-dropdown .dropdown-menu-header h3 {
        font-size: 0.72rem !important;
    }
    body .mobile-dropdown .submenu-arrow {
        width: 0.8rem !important;
        height: 0.8rem !important;
    }
    body .mobile-dropdown .submenu button,
    body .mobile-dropdown .submenu-parent-btn {
        min-height: 30px !important;
    }
}

@media (max-width: 380px) {
    /* Contenedor principal más ancho */
    .card-container {
        width: 100% !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* Sección homepage más compacta (celulares pequeños) */
    .homepage-section {
        min-height: 400px !important;
        height: 58vh !important;
        max-height: 560px !important;
    }

    /* Botones homepage más angostos */
    .homepage-btn {
        width: 80% !important;
        min-width: unset !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* Tarjetas de trámites */
    .tramite-card {
        flex-basis: 98% !important;
        min-width: unset !important;
        padding: 1rem !important;
    }

    .tramite-card h3 {
        font-size: 1rem !important;
    }

    /* Carousel de componentes */
    #componentes-seguridad .carousel-card {
        width: 98% !important;
        flex-basis: 98% !important;
        padding: 1rem !important;
        min-height: 240px !important;
    }

    /* Textos generales más pequeños */
    .text-sm {
        font-size: 0.8rem !important;
    }

    .text-base {
        font-size: 0.875rem !important;
    }

    /* Banner */
    #banner {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .banner-text-small {
        font-size: 0.95rem !important;
    }
    .banner-text-small #visit-counter {
        font-size: 1rem !important;
    }

    /* Chat widget más pequeño */
    #chat-toggle-button {
        width: 60px !important;
        height: 60px !important;
    }

    /* Menú móvil: adaptación pantallas chicas */
    .mobile-dropdown {
        width: calc(100% - 0.5rem) !important;
        border-radius: 18px !important;
    }
    body .mobile-dropdown .submenu-parent-btn {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.72rem !important;
    }
    .carousel-container.carousel-desktop-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        padding-bottom: 0 !important;
    }
    .carousel-container.carousel-desktop-grid .carousel-card {
        flex: 1 1 auto !important;
        width: auto !important;
        min-height: 18rem !important;
    }
    #tramites-principales .pagination-dots {
        display: none !important;
    }
    #banner-cierre {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    #banner-cierre .max-w-5xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    #banner-cierre .text-right {
        text-align: right !important;
    }
    body .mobile-dropdown .submenu button,
    body .mobile-dropdown .dropdown-menu-content > button,
    body .mobile-dropdown .dropdown-menu-content > a {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.72rem !important;
    }
    body .mobile-dropdown .submenu.submenu-compact button,
    body .mobile-dropdown .submenu.leyes-compactas button {
        padding-left: 1rem !important;
        font-size: 0.6rem !important;
    }
    body .mobile-dropdown .dropdown-menu-header h3 {
        font-size: 0.78rem !important;
    }
    body .mobile-dropdown .submenu-arrow {
        width: 0.85rem !important;
        height: 0.85rem !important;
    }
    body .mobile-dropdown .submenu button,
    body .mobile-dropdown .submenu-parent-btn {
        min-height: 32px !important;
    }

    /* Credenciales */
    .credenciales-main-title {
        font-size: 1.2rem !important;
    }

    .credenciales-main-subtitle {
        font-size: 0.85rem !important;
    }

    .credenciales-download-btn {
        min-width: 200px !important;
        font-size: 0.85rem !important;
        padding: 6px 16px !important;
    }

    /* Tablas responsivas */
    .credenciales-responsive-table th,
    .credenciales-responsive-table td {
        padding: 8px !important;
        font-size: 0.8rem !important;
    }

    /* Modal */
    .modal-content {
        width: 98% !important;
        padding: 1.25rem !important;
        font-size: 0.95rem !important;
    }

    .modal-title {
        font-size: 1.2rem !important;
    }

    /* Elegant cards */
    .elegant-card {
        padding: 1.25rem !important;
    }

    /* Evitar desbordamiento horizontal */
    body {
        overflow-x: hidden !important;
    }

    * {
        max-width: 100vw;
    }

    img, svg, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ========================================
   CELULARES MUY PEQUEÑOS (≤ 324px)
   - Logo OS10 más pequeño
   - Textos del menú (Leyes y Normativa, Informativos SPD, etc.) más pequeños
   ======================================== */
@media (max-width: 324px) {
    /* Logo OS10: reducir cuando la imagen aniversario ya está pequeña */
    #banner .logo-os10-container img,
    #banner > div > div:first-child img:not(#banner-aniversario) {
        height: clamp(34px, 10vw, 44px) !important;
        width: auto !important;
    }

    /* Imagen aniversario: en celulares chicos también más grande/alta */
    #banner-aniversario {
        width: clamp(130px, 40vw, 160px) !important;
        max-width: clamp(130px, 40vw, 160px) !important;
        height: clamp(66px, 20vw, 84px) !important;
        max-height: clamp(66px, 20vw, 84px) !important;
        margin-left: clamp(0.3rem, 1.4vw, 0.6rem) !important;
        object-fit: contain !important;
    }

    /* Botones principales del menú (Normativa, Informativos SPD, etc.) */
    body .mobile-dropdown .submenu-parent-btn {
        padding: 0.25rem 0.45rem !important;
        font-size: 0.6rem !important;
    }

    /* Botones internos del menú */
    body .mobile-dropdown .submenu button,
    body .mobile-dropdown .dropdown-menu-content > button,
    body .mobile-dropdown .dropdown-menu-content > a {
        padding: 0.22rem 0.45rem !important;
        font-size: 0.6rem !important;
    }

    /* Submenús compactos (leyes-compactas, submenu-compact) */
    body .mobile-dropdown .submenu.submenu-compact button,
    body .mobile-dropdown .submenu.leyes-compactas button {
        padding-left: 0.7rem !important;
        font-size: 0.5rem !important;
    }

    /* Encabezado del dropdown */
    body .mobile-dropdown .dropdown-menu-header h3 {
        font-size: 0.65rem !important;
    }

    /* Flechas del menú */
    body .mobile-dropdown .submenu-arrow {
        width: 0.72rem !important;
        height: 0.72rem !important;
    }

    /* Altura mínima táctil reducida */
    body .mobile-dropdown .submenu button,
    body .mobile-dropdown .submenu-parent-btn {
        min-height: 28px !important;
    }
}

/* ========================================
   CHATBOT — TAMAÑO FLUIDO (escala con la pantalla)
   El popup se achica de forma CONTINUA a medida que la
   pantalla se reduce, adaptándose a tablets, celulares
   normales y celulares pequeños — sin saltos bruscos.
   - clamp(min, preferido, max): el ancho/alto crecen y se
     reducen junto al viewport, con topes mínimo y máximo.
   ======================================== */
@media (max-width: 1023px) {
    #chat-popup {
        /* Ancho: hasta 450px en tablet, se reduce con el ancho de pantalla.
           98vw → en celulares normales queda un poquito más ancho. */
        width: clamp(280px, 98vw, 450px) !important;
        max-width: 98vw !important;
        /* Alto: escala fluido con la altura de pantalla (reducido un poco más) */
        height: clamp(280px, 52vh, 400px) !important;
        max-height: 80vh !important;
        /* Pegado al fondo: sin espacio entre el cuadro y el fin de la pantalla */
        bottom: 0 !important;
    }

    /* La cabecera y el pie también se compactan en pantallas chicas */
    #chat-popup header { padding: clamp(0.5rem, 2vw, 0.75rem) !important; }
    #chat-popup footer { padding: clamp(0.5rem, 2vw, 0.75rem) !important; }
    #chat-popup #chat-messages { padding: clamp(0.6rem, 2.5vw, 1rem) !important; }
}

/* ========================================
   CHATBOT — CELULARES (≤ 767px)
   Cabecera simplificada: se deja SOLO el ícono del bot,
   el título "Asistente", el parlante y la X.
   Se ocultan el subtítulo "O.S.10 Coquimbo 👍✅" y el
   selector de voz (Diego, Antoni, ...).
   Además la letra se reduce un poquito para adaptarse mejor.
   ======================================== */
@media (max-width: 767px) {
    /* Ocultar subtítulo (nombre OS10 + pulgar) */
    #chat-popup header p { display: none !important; }
    /* Ocultar el selector de voz (el nombre para elegir) */
    #chat-popup #voiceSelector,
    #chat-popup .voice-selector { display: none !important; }

    /* Letra de los mensajes un poquito más pequeña */
    #chat-popup #chat-messages { font-size: 0.86rem !important; line-height: 1.3 !important; }
    #chat-popup #chat-messages .max-w-sm,
    #chat-popup #chat-messages .max-w-xs { font-size: 0.86rem !important; }
    #chat-popup #user-input { font-size: 0.86rem !important; }
}

/* ========================================
   CHATBOT — CELULARES PEQUEÑOS (≤ 380px)
   El bot se hace aún más pequeño y la letra se reduce
   para que todo entre cómodo en pantallas chicas.
   ======================================== */
@media (max-width: 380px) {
    #chat-popup {
        width: clamp(250px, 98vw, 380px) !important;
        max-width: 98vw !important;
        height: clamp(270px, 50vh, 380px) !important;
        max-height: 78vh !important;
        bottom: 0 !important;
    }

    /* Letra de los mensajes (burbujas) más pequeña */
    #chat-popup #chat-messages { font-size: 0.78rem !important; line-height: 1.3 !important; }
    #chat-popup #chat-messages .max-w-sm,
    #chat-popup #chat-messages .max-w-xs { font-size: 0.78rem !important; }

    /* Burbujas: menos relleno */
    #chat-popup #chat-messages .p-3 { padding: 0.5rem 0.65rem !important; }

    /* Avatares (bot/usuario) más chicos */
    #chat-popup #chat-messages .w-8 { width: 1.6rem !important; height: 1.6rem !important; }

    /* Botones de respuesta del bot */
    #chat-popup .response-button {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.55rem !important;
    }

    /* Cabecera más compacta */
    #chat-popup header h1 { font-size: 0.85rem !important; }
    #chat-popup header p { font-size: 0.62rem !important; }
    #chat-popup .voice-selector { font-size: 0.62rem !important; }

    /* Entrada de texto y aviso del pie */
    #chat-popup #user-input { font-size: 0.78rem !important; }
    #chat-popup footer .text-xs { font-size: 0.6rem !important; }
}

/* Colores específicos para menús móviles abiertos */
#mobile-dropdown.show {
    color: #047857 !important;
}
#mobile-dropdown.show .submenu-parent-btn,
#mobile-dropdown.show .dropdown-menu-content > button,
#mobile-dropdown.show .dropdown-menu-content > a,
#mobile-dropdown.show .submenu button,
#mobile-dropdown.show .menu-item-stack,
#mobile-dropdown.show .dropdown-menu-header h3,
#mobile-dropdown.show .submenu-title {
    color: #047857 !important;
}
#mobile-dropdown.show .submenu-arrow,
#mobile-dropdown.show .close-mobile-menu-btn svg {
    stroke: #047857 !important;
    color: #047857 !important;
}
#mobile-dropdown.show .submenu-parent-btn .submenu-arrow path,
#mobile-dropdown.show .close-mobile-menu-btn svg path {
    stroke: #047857 !important;
}

#mobile-dropdown-right.show {
    color: #062a8a !important;
}
#mobile-dropdown-right.show .submenu-parent-btn,
#mobile-dropdown-right.show .dropdown-menu-content > button,
#mobile-dropdown-right.show .dropdown-menu-content > a,
#mobile-dropdown-right.show .submenu button,
#mobile-dropdown-right.show .menu-item-stack,
#mobile-dropdown-right.show .dropdown-menu-header h3,
#mobile-dropdown-right.show .submenu-title {
    color: #062a8a !important;
}
#mobile-dropdown-right.show .submenu-arrow,
#mobile-dropdown-right.show .close-mobile-menu-btn svg {
    stroke: #062a8a !important;
    color: #062a8a !important;
}
#mobile-dropdown-right.show .submenu-parent-btn .submenu-arrow path,
#mobile-dropdown-right.show .close-mobile-menu-btn svg path {
    stroke: #062a8a !important;
}

/* ========================================
   FRANJA VERDE FINAL — O.S.10 COQUIMBO
   100 AÑOS — 1925-2025
   Se renderiza al final del <body>, después
   del footer existente (Contacto se mantiene).
   ======================================== */
#os10-bottom-band {
    width: 100%;
    background: linear-gradient(180deg, #146314 0%, #0e4a0e 100%);
    color: #ffffff;
    padding: 1.1rem 1rem;
    border-top: 3px solid #d4af37;
}

#os10-bottom-band .os10-band-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
}

#os10-bottom-band .os10-band-col {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

#os10-bottom-band .os10-band-col--logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

#os10-bottom-band .os10-band-title {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

#os10-bottom-band .os10-band-title strong {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #ffffff;
}

#os10-bottom-band .os10-band-title span {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}

#os10-bottom-band .os10-band-divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

#os10-bottom-band .os10-band-col--aniv img {
    width: 64px;
    height: 40px;
    object-fit: contain;
}

#os10-bottom-band .os10-band-col--text p {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.95);
}

#os10-bottom-band .os10-band-years {
    font-size: 0.78rem;
    font-weight: 700;
    color: #d4af37;
    margin-top: 2px;
    display: inline-block;
}

#os10-bottom-band .os10-band-col--text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* Móvil: más compacto, todo cabe en una fila */
@media (max-width: 640px) {
    #os10-bottom-band {
        padding: 0.85rem 0.6rem;
    }
    #os10-bottom-band .os10-band-inner {
        gap: 0.5rem;
    }
    #os10-bottom-band .os10-band-col--logo img {
        width: 42px;
        height: 42px;
    }
    #os10-bottom-band .os10-band-title strong {
        font-size: 0.78rem;
    }
    #os10-bottom-band .os10-band-title span {
        font-size: 0.66rem;
    }
    #os10-bottom-band .os10-band-divider {
        height: 38px;
    }
    #os10-bottom-band .os10-band-col--aniv img {
        width: 48px;
        height: 30px;
    }
    #os10-bottom-band .os10-band-col--text p,
    #os10-bottom-band .os10-band-years {
        font-size: 0.62rem;
    }
}

/* ========================================
   TRÁMITES PRINCIPALES — TARJETAS BLANCAS
   En móvil: cards blancas con ícono verde
   circular a la izquierda, título verde y
   descripción gris (estilo imagen mockup).
   ======================================== */
@media (max-width: 767px) {
    #tramites-principales .carousel-container.carousel-desktop-grid {
        gap: 0.85rem !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    #tramites-principales .carousel-container.carousel-desktop-grid .carousel-card {
        background: #ffffff !important;
        border: 1px solid rgba(20, 99, 20, 0.12) !important;
        border-radius: 18px !important;
        padding: 1rem 0.9rem !important;
        min-height: 11.5rem !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.45rem !important;
        position: relative !important;
    }

    /* Ícono: círculo verde claro + ícono verde */
    #tramites-principales .carousel-card .flex-shrink-0 {
        background: rgba(20, 99, 20, 0.12) !important;
        color: #146314 !important;
        width: 3rem !important;
        height: 3rem !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin-bottom: 0.2rem !important;
    }
    #tramites-principales .carousel-card .flex-shrink-0 svg {
        color: #146314 !important;
        width: 1.7rem !important;
        height: 1.7rem !important;
        stroke: #146314 !important;
    }

    /* Fila ícono + título — apilar verticalmente como la imagen */
    #tramites-principales .carousel-card .flex.items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem !important;
    }

    /* Título verde */
    #tramites-principales .carousel-card h3 {
        color: #146314 !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        margin: 0 !important;
        line-height: 1.15 !important;
    }

    /* Descripción gris oscuro */
    #tramites-principales .carousel-card p {
        color: #4b5563 !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        margin-top: 0.3rem !important;
    }

    /* Chevron de la flecha siempre visible (color verde) */
    #tramites-principales .carousel-card span.absolute {
        color: #146314 !important;
        opacity: 1 !important;
        right: 0.7rem !important;
        top: auto !important;
        bottom: 0.7rem !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
    }

    #tramites-principales .carousel-card:hover {
        background: #f8fbf7 !important;
    }
}

/* ========================================
   OCULTAR DUPLICADO DE OS10 + 100 AÑOS EN MÓVIL
   El bloque #banner-cierre repite la franja "O.S.10
   Coquimbo / 100 años / Un siglo de servicio" justo
   bajo Trámites Principales. Como ya tenemos la franja
   verde final (#os10-bottom-band) con 1927-2027, en
   móvil/tablet ocultamos el duplicado.
   PC NO se toca (el bloque sigue visible en ≥1024px).
   ======================================== */
@media (max-width: 1023px) {
    #banner-cierre {
        display: none !important;
    }
}

/* ========================================
   HERO — ALINEACIÓN A LA IZQUIERDA (SOLO MÓVIL/TABLET)
   En PC (>=1024px) NO se aplica: el título queda centrado
   como estaba. Aquí solo afectamos teléfonos pequeños,
   normales y tablets (<1024px).
   ======================================== */
@media (max-width: 1023px) {
    /* Forzar texto del contenedor del título a la izquierda */
    #homepage-section {
        text-align: left !important;
        /* Hero más bajo verticalmente: reducción moderada del carrusel */
        min-height: 440px !important;
        height: 70vh !important;
        max-height: 620px !important;
    }
    /* Título bajado un poco para respirar mejor bajo el banner pill */
    #hero-title-container {
        text-align: left !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        top: 150px !important; /* coincide con inline-critical.css */
    }
    #hero-title-container h1 {
        text-align: left !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.55) !important;
    }
    #hero-title-container p {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        max-width: 100% !important;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55) !important;
    }
    /* El pill "Plataforma Oficial" también a la izquierda */
    #hero-title-container .hero-oficial-pill {
        margin-left: 0 !important;
    }

    /* Overlay VERDE GRADUAL desde la izquierda — color institucional
       #173A32 (rgb 23, 58, 50). El lado izquierdo queda verde opaco
       para que el título blanco contraste fuerte, y se desvanece
       hacia la derecha para dejar ver el video / foto del fondo. */
    #homepage-section > div.absolute.inset-0.bg-black\/30 {
        background: linear-gradient(
            90deg,
            rgba(23, 58, 50, 0.92) 0%,
            rgba(23, 58, 50, 0.80) 25%,
            rgba(23, 58, 50, 0.55) 50%,
            rgba(23, 58, 50, 0.25) 75%,
            rgba(23, 58, 50, 0.05) 100%
        ) !important;
    }
}

/* Móviles pequeños: bajar un poco menos el título para no perderlo */
@media (max-width: 380px) {
    #hero-title-container {
        top: 130px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ========================================
   TARJETA BLANCA — 4 ACCESOS RÁPIDOS (MÓVIL)
   Credenciales · Directivas · Documentos · Contacto
   Sólo visible en pantallas <1024px. En PC NO se muestra.
   ======================================== */
.mobile-quick-access {
    display: none; /* Por defecto oculto (PC) */
}

/* Envoltorio posicionado: contiene la tira deslizable + las flechas
   chevron laterales. La "tarjeta blanca" visible vive ahora aquí. */
.mqa-wrap {
    position: relative;
    display: none; /* se activa en los breakpoints donde se ve la tarjeta */
}

/* Oculta la barra de scroll: se navega con las flechas o el auto-scroll */
.mobile-quick-access {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mobile-quick-access::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Flechas chevron laterales (auto-scroll al hacer clic) */
.mqa-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #146314;
    box-shadow: none;
    cursor: pointer;
    transition: opacity .2s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.mqa-arrow--left { left: 0.35rem; }
.mqa-arrow--right { right: 0.35rem; }
.mqa-arrow:hover { background: transparent; }
.mqa-arrow:active { transform: translateY(-50%) scale(0.9); }
.mqa-arrow[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 1023px) {
    /* Tarjeta blanca (ahora el envoltorio) */
    .mqa-wrap {
        display: block !important;
        background: #ffffff !important;
        /* margin-top un poquito mayor (sube la tarjeta sobre el hero)
           y margin-bottom en 0 → pegada a Trámites Principales */
        margin: -5rem 0.35rem 0 0.35rem !important;
        padding: 1.1rem 1.3rem 1.15rem 1.3rem !important; /* lados: mínimo para los chevrones */
        border-radius: 1.1rem;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
        z-index: 50 !important; /* sobre el video del hero */
        /* Forzar nueva capa de composición → no parpadea / no
           desaparece durante las transiciones del Ken Burns carousel */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Tira deslizable interior */
    .mobile-quick-access {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        gap: 1.5rem;
        background: transparent !important; /* Se revierte el fondo transparente a la barra de botones */
        /* Se eliminan los estilos de blur, borde, sombra y border-radius de la barra de botones */
        /* backdrop-filter: saturate(180%) blur(18px) !important; */
        /* -webkit-backdrop-filter: saturate(180%) blur(18px) !important; */
        /* border: 1px solid rgba(255, 255, 255, 0.5) !important; */
        /* border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; */
        /* box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important; */
        /* border-radius: 9999px !important; */
        margin: 0 !important;
        padding: 0 0.75rem !important;
        width: 100%;
        position: relative !important;
        z-index: 1;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mqa-arrow { display: inline-flex; }

    /* La sección verde "Trámites Principales" sube y se mete
       detrás del contenedor blanco, pegándose al hero (sin gap). */
    #homepage-content-wrapper {
        margin-top: -5.5rem !important;
        position: relative;
        z-index: 1; /* la tarjeta blanca queda encima (z-index: 50) */
    }
    /* Padding superior compensado para que el título "Trámites
       Principales" no quede tapado por la tarjeta blanca */
    #homepage-content-wrapper #tramites-principales {
        padding-top: 4.5rem !important;
    }

    .mobile-quick-access .mqa-btn {
        flex: 0 0 auto;
        width: calc((100% - 4.5rem) / 4); /* 4 botones visibles con gap 1.5rem × 3 = 4.5rem */
        min-width: 4.3rem;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.55rem;
        background: transparent;
        border: none;
        padding: 0.4rem 0.2rem;
        cursor: pointer;
        text-align: center;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-quick-access .mqa-icon {
        width: 3.1rem;
        height: 3.1rem;
        border-radius: 0.85rem;
        background: rgba(20, 99, 20, 0.12);
        color: #146314;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, transform 0.15s ease;
    }

    .mobile-quick-access .mqa-icon svg {
        width: 1.55rem;
        height: 1.55rem;
        stroke: #146314;
    }

    .mobile-quick-access .mqa-btn:active .mqa-icon {
        background: rgba(20, 99, 20, 0.22);
        transform: scale(0.96);
    }

    .mobile-quick-access .mqa-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #1f2937;
        line-height: 1.1;
        letter-spacing: 0.02em;
    }
}

/* ========================================
   PC (>=1024px): la misma tarjeta blanca reemplaza a los 3 botones
   del hero. Ancho completo (igual que el banner superior) y misma
   posición/anclaje que en celular (superpuesta al fondo del hero).
   ======================================== */
@media (min-width: 1024px) {
    /* Tarjeta blanca (ahora el envoltorio) */
    .mqa-wrap {
        display: block !important;
        background: #ffffff !important;
        /* Ancho original de la tarjeta (900px); todas las secciones de
           abajo usan este mismo ancho para quedar alineadas */
        width: calc(100% - 4rem);
        max-width: 900px;
        /* Sube la tarjeta sobre el fin del hero (como en celular) */
        margin: -5rem auto 0 auto !important;
        padding: 0.7rem 2.75rem 0.75rem 2.75rem !important; /* lados: espacio para las flechas; vertical reducido en PC */
        border-radius: 1.1rem;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
        z-index: 50 !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Tira deslizable interior */
    .mobile-quick-access {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        gap: 0.5rem;
        background: transparent !important; /* Se revierte el fondo transparente a la barra de botones */
        /* Se eliminan los estilos de borde, sombra y border-radius de la barra de botones */
        /* border: 1px solid rgba(255,255,255,0.45) !important; */
        /* border-bottom: 1px solid rgba(255,255,255,0.45) !important; */
        /* box-shadow: 0 2px 16px rgba(0,0,0,0.10) !important; */
        /* border-radius: 9999px !important; */
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        position: relative !important;
        z-index: 1;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mqa-arrow { display: inline-flex; }

    /* Carrusel (hero) más bajo en PC para que asome la sección verde.
       (body delante para ganarle al calc(100vh - 30px) inline) */
    body .homepage-section {
        min-height: calc(100vh - 180px) !important;
        height: calc(100vh - 180px) !important;
    }

    /* La sección verde sube hasta la MITAD de la tarjeta (~123px de
       alto): el borde visible carrusel/verde pasa justo por su centro,
       dejando media tarjeta sobre el carrusel y media sobre el verde.
       (body delante para ganarle al -160px inline de index.html) */
    body #homepage-content-wrapper {
        margin-top: -3.85rem !important;
        position: relative;
        z-index: 1;
    }
    #homepage-content-wrapper #info-section-unified {
        padding-top: 6rem !important;
    }

    .mobile-quick-access .mqa-btn {
        flex: 0 0 auto;
        width: calc((100% - 1.5rem) / 4); /* 4 botones visibles; el resto se desliza */
        min-width: 5rem;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.4rem;
        background: transparent;
        border: none;
        padding: 0.35rem 0.2rem;
        cursor: pointer;
        text-align: center;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-quick-access .mqa-icon {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 0.85rem;
        background: rgba(20, 99, 20, 0.12);
        color: #146314;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, transform 0.15s ease;
    }

    .mobile-quick-access .mqa-icon svg {
        width: 1.75rem;
        height: 1.75rem;
        stroke: #146314;
    }

    .mobile-quick-access .mqa-btn:hover .mqa-icon {
        background: rgba(20, 99, 20, 0.22);
        transform: scale(1.05);
    }
    .mobile-quick-access .mqa-btn:active .mqa-icon {
        transform: scale(0.96);
    }

    .mobile-quick-access .mqa-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #1f2937;
        line-height: 1.1;
    }
}

/* Móviles pequeños: ajuste fino */
@media (max-width: 380px) {
    .mqa-wrap {
        margin-left: 0.2rem !important;
        margin-right: 0.2rem !important;
        padding: 0.85rem 1.1rem !important;
    }
    .mobile-quick-access {
        gap: 0.3rem !important;
        padding: 0 0.6rem !important;
    }
    .mqa-arrow { width: 1.7rem; height: 1.7rem; }
    .mqa-arrow--left { left: 0.2rem; }
    .mqa-arrow--right { right: 0.2rem; }
    .mobile-quick-access .mqa-icon {
        width: 2.7rem !important;
        height: 2.7rem !important;
        border-radius: 0.7rem !important;
    }
    .mobile-quick-access .mqa-icon svg {
        width: 1.35rem !important;
        height: 1.35rem !important;
    }
    .mobile-quick-access .mqa-label {
        font-size: 0.7rem !important;
    }
}

/* Tablets (601px – 1023px): tarjeta un poco más grande y centrada */
@media (min-width: 601px) and (max-width: 1023px) {
    .mqa-wrap {
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 1.1rem 2.75rem !important;
    }
    .mobile-quick-access .mqa-icon {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
    .mobile-quick-access .mqa-icon svg {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    .mobile-quick-access .mqa-label {
        font-size: 0.85rem !important;
    }
}

/* SECCIÓN INFORMATIVA UNIFICADA: Ajustes de posición y color */
#info-section-unified {
    padding-top: 140px !important; /* Espacio para librar botones en móvil */
}

@media (min-width: 1024px) {
    #info-section-unified {
        padding-top: 4.5rem !important; /* Espacio estandar en PC */
        padding-bottom: 2rem !important;
        background-color: #146314 !important; /* Fondo verde institucional */
        border-bottom: none !important; /* Eliminar borde inferior */
    }
    /* Centrar el contenido dentro del contenedor principal de la sección */
    #info-section-unified > div.max-w-5xl.mx-auto {
        text-align: center !important;
    }
    /* Asegurar que el título y los párrafos sean blancos */
    #info-section-unified h2,
    #info-section-unified p,
    #info-section-unified strong {
        color: white !important;
    }
    /* Contenedores de avisos: transparentes con borde blanco sutil y sin sombra */
    #info-section-unified > div.max-w-5xl.mx-auto > div > div {
        background-color: transparent !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        box-shadow: none !important;
    }
    /* Botón "Ver Informativo Nº 5": fondo blanco y texto verde */
    #info-section-unified > div.max-w-5xl.mx-auto button {
        background-color: white !important;
        color: #173A32 !important;
    }
}

/* ========================================
   HERO — BADGE "PLATAFORMA OFICIAL"
   Pastilla verde con ícono escudo, debajo del
   subtítulo del hero (BIENVENIDOS A...).
   ======================================== */
.hero-oficial-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding: 0.55rem 1.1rem;
    background: rgba(20, 83, 45, 0.55);
    color: #ffffff;
    border: 1.5px solid #237c4e;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.hero-oficial-pill svg {
    width: 1.1rem;
    height: 1.1rem;
    color: #237c4e;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .hero-oficial-pill {
        font-size: 0.82rem;
        padding: 0.45rem 0.95rem;
        margin-top: 0.85rem;
    }
    .hero-oficial-pill svg {
        width: 1rem;
        height: 1rem;
    }
}

/* ========================================
   CHATBOT FLOTANTE — ESTILO "ASISTENTE OS10"
   Botón circular verde con avatar del carabinero
   y etiqueta "Asistente OS10" debajo del avatar.
   ======================================== */
#chat-toggle-button.chat-toggle-asistente {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #1f6b3a 0%, #14532d 60%, #0e3d20 100%) !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

#chat-toggle-button.chat-toggle-asistente .chat-toggle-avatar {
    position: absolute !important;
    top: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 72% !important;
    height: 72% !important;
    object-fit: contain !important;
    object-position: top center !important;
}

#chat-toggle-button.chat-toggle-asistente .chat-toggle-label {
    position: absolute !important;
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    #chat-toggle-button.chat-toggle-asistente {
        width: 84px !important;
        height: 84px !important;
    }
    #chat-toggle-button.chat-toggle-asistente .chat-toggle-label {
        font-size: 9px !important;
        bottom: 5px !important;
    }
}

@media (max-width: 380px) {
    #chat-toggle-button.chat-toggle-asistente {
        width: 76px !important;
        height: 76px !important;
    }
    #chat-toggle-button.chat-toggle-asistente .chat-toggle-label {
        font-size: 8.5px !important;
        bottom: 4px !important;
    }
}

/* ===== Asistente (bot) en PC: un poquito más arriba ===== */
@media (min-width: 1024px) {
    #chat-widget-container {
        bottom: 11rem !important;
    }
}

/* Al abrir el chat, el botón del bot desaparece (no se queda sobre el
   cuadro de conversación). Refuerza el display:none que aplica el JS. */
#chat-popup.chat-popup-visible ~ #chat-toggle-button {
    display: none !important;
}

/* ===== PC: todos los contenedores con el mismo ancho y alineados ===== */
@media (min-width: 1024px) {
    /* Solo Información (avisos) y Trámites Principales comparten el ancho
       de la tarjeta blanca (900px). El resto conserva su ancho original. */
    #info-section-unified > .max-w-5xl,
    #tramites-principales > .max-w-5xl {
        max-width: 900px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================================
   EFECTO DE ENCENDIDO (GLOW) PARA ÍCONOS (TRÁMITES Y COMPONENTES)
   ========================================================================== */

/* Animación de pulso de brillo utilizando currentColor */
@keyframes iconGlowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 5px currentColor);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.05), inset 0 0 6px currentColor;
    }
    50% {
        filter: drop-shadow(0 0 12px currentColor) brightness(1.2);
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.1), inset 0 0 10px currentColor;
    }
}

/* --- Trámites Principales (Efecto constante y pulsante) --- */
#tramites-principales .carousel-card .flex-shrink-0 {
    animation: iconGlowPulse 3s infinite ease-in-out;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#tramites-principales .carousel-card .flex-shrink-0 svg {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#tramites-principales .carousel-card:hover .flex-shrink-0 {
    animation: none !important;
    box-shadow: 0 0 20px currentColor, inset 0 0 12px currentColor !important;
    transform: scale(1.1) !important;
}

#tramites-principales .carousel-card:hover .flex-shrink-0 svg {
    filter: drop-shadow(0 0 12px currentColor) brightness(1.4) !important;
}

/* --- Componentes del Sistema (Efecto al pasar el cursor / hover) --- */
#componentes-seguridad .carousel-card button .flex-shrink-0,
#componentes-seguridad .carousel-card button .flex-shrink-0 svg {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#componentes-seguridad .carousel-card button:hover .flex-shrink-0 {
    box-shadow: 0 0 18px currentColor, inset 0 0 10px currentColor !important;
    transform: scale(1.1) !important;
}

#componentes-seguridad .carousel-card button:hover .flex-shrink-0 svg {
    filter: drop-shadow(0 0 10px currentColor) brightness(1.3) !important;
}