/* ============================================================
   RESPONSIVE GENERAL HEADER + BANNER
   ============================================================ */

@media (max-width: 991.98px) {

    /* Ocultamos la topbar en móviles/tablet */
    .td-header-top {
        display: none;
    }

    /* Navbar móvil oscura */
    .navbar.navbar-expand-lg {
        background-color: #111111 !important;
    }

    /* Logo más pequeño */
    .navbar-brand img {
        height: 38px;
    }

    /* Hamburguesa en blanco */
    .navbar-toggler {
        border-color: rgba(255,255,255,0.4) !important;
    }

    .navbar-toggler-icon {
        filter: invert(1);
    }

    /* Contenedor del menú desplegado */
    #mainNavbar {
        background-color: #111111;
        padding: 1rem;
    }

    #mainNavbar .nav-link {
        color: #ffffff !important;
    }

    #mainNavbar .dropdown-menu {
        background-color: #1c1c1c;
    }

    /* =======================================================
       BANNER HERO (móvil/tablet)
       ======================================================= */

    .td-banner-hero {
        height: 600px; /* tablet y móviles grandes */
    }

    .td-banner-hero__overlay {
        padding: 2rem 0;
    }

    .td-banner-hero__box {
        padding: 1.4rem 1.6rem;
        margin: 0 1rem;
    }

    .td-banner-hero__title {
        font-size: 1.6rem;
    }

    .td-banner-hero__subtitle {
        font-size: 0.95rem;
    }

    .td-banner-hero__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .td-banner-hero__actions .btn {
        width: 100%;
        margin-right: 0 !important;
    }

    .td-banner-hero__actions .btn + .btn {
        margin-top: 0.5rem;
    }
}

/* ============================================================
   MÓVILES MUY PEQUEÑOS (IPHONE SE, ANDROID PEQUEÑOS)
   ============================================================ */
@media (max-width: 575.98px) {

    .td-banner-hero {
        min-height: 450px; /* móviles pequeños */
    }
}