/* ==========================================================================
   RESPONSIVE.CSS - Horizonte Médico CUU (Versión Final Corregida)
   ========================================================================== */

/* --- Ajustes Globales de Pantalla --- */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Elimina el cuadro blanco a la derecha */
}

/* ===================================
   TABLETS (768px - 1024px)
   =================================== */
@media (max-width: 1024px) {
    .header-container {
        padding: 0 3%;
        gap: 20px;
    }

    .header-nav {
        gap: 15px;
    }

    .header-nav li a {
        font-size: 13px;
    }

    .logo img {
        height: 100px;
    }
}

/* ===================================
   MÓVILES (Menos de 768px)
   =================================== */
@media (max-width: 767px) {
    /* Ajuste del Header */
    #header {
        height: auto;
        padding: 15px 0;
    }

    .header-container {
        display: flex;
        flex-direction: column; /* Apila Logo arriba y Menú abajo */
        align-items: center;
        gap: 15px;
        grid-template-columns: 1fr; /* Anula el grid de escritorio */
    }

    /* Forzar Menú en una sola línea */
    .header-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center;
        gap: 20px !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-nav li a {
        font-size: 12px !important;
        margin: 0 !important; /* Elimina márgenes que rompen el diseño */
        letter-spacing: 1px;
    }

    .logo img {
        height: 80px; /* Logo más manejable en celular */
    }

    .header-spacer {
        display: none; /* Quitamos el espacio vacío en móviles */
    }

    /* Ajuste del Hero / Video Section */
    .video-container {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .hero-col-1, .hero-col-2 {
        width: 100%;
    }

    .foto-portada {
        width: 80%;
        margin: 0 auto;
    }

    /* Otros elementos */
    .podcast-grid, .testimonials-grid, .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   MÓVILES PEQUEÑOS (Menos de 480px)
   =================================== */
@media (max-width: 480px) {
    .header-nav {
        gap: 10px !important;
    }

    .header-nav li a {
        font-size: 11px !important;
    }

    .logo img {
        height: 65px;
    }

    h2 {
        font-size: 1.5rem;
    }
}

/* --- Parche de Seguridad para el Scroll Lateral --- */
* {
    max-width: 100vw;
    box-sizing: border-box;
}
/* FUERZA BRUTA PARA EL MENÚ HORIZONTAL */
#header .header-container nav.header-menu-left ul.header-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important; /* Alinea a la izquierda */
    align-items: center !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#header .header-nav li a {
    color: #ffffff !important; /* Fuerza letra blanca */
    background-color: rgba(0,0,0,0.5); /* Fondo oscuro suave para que resalte si el header es blanco */
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

@media (min-width: 1025px) {
    #header .header-container nav.header-menu-left ul.header-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important; /* Alineado a la izquierda */
        align-items: center !important;
        gap: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #header .header-nav li a {
        color: #ffffff !important; /* Color Blanco */
        font-size: 17px !important; /* Un punto más grande */
        font-weight: 800 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        font-family: 'Montserrat', sans-serif !important;
    }
}