/* ===========================
   RESPONSIVE
   Breakpoints: 1200 / 992 / 768 / 480
=========================== */

/* ---------- Navbar: menú hamburguesa (oculto en escritorio) ---------- */
.nav-toggle{
    display:none;
    background:none;
    border:none;
    color:var(--text-primary, #fff);
    font-size:26px;
    cursor:pointer;
}

/* ---------- <=1200px ---------- */
@media (max-width:1200px){
    .benefits-grid{ grid-template-columns:repeat(2, 1fr); }
    .courses-grid{ grid-template-columns:repeat(2, 1fr); }

    .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
    .footer-col.footer-newsletter{ grid-column:1 / -1; max-width:420px; }
}

/* ---------- <=992px ---------- */
@media (max-width:992px){
    .navbar-container{ padding:0 30px; }

    /* Sin esto, "Cerrar sesión"/"Iniciar Sesión" mantienen el padding y
       tamaño de letra de escritorio y envuelven a 2 líneas, viéndose
       enorme junto al logo y el menú hamburguesa en pantallas chicas. */
    .btn-login{
        padding:9px 16px;
        font-size:13px;
        gap:6px;
        white-space:nowrap;
    }

    .nav-links{
        position:fixed;
        top:80px;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        background:rgba(20,25,38,.96);
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        border-bottom:1px solid var(--border-subtle, rgba(255,255,255,.08));
        max-height:0;
        overflow:hidden;
        transition:max-height .35s ease;
    }

    .nav-links.nav-open{ max-height:300px; }

    .nav-links a{
        padding:18px 30px;
        border-top:1px solid rgba(255,255,255,.06);
    }

    .nav-links a::after{ display:none; }

    .nav-toggle{ display:block; }

    .hero-container{
        padding:0 30px;
        text-align:center;
    }

    .hero-left{ max-width:none; margin:0 auto; }

    .hero-buttons{ justify-content:center; }
    .hero-stats{ justify-content:center; }

    .bull-bg{
        left:50%;
        top:55%;
        width:900px;
        opacity:.35;
    }

    .section{ padding:80px 0; }

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

    .auth-wrapper{ grid-template-columns:1fr; }
    .auth-brand{ display:none; }
    .auth-form-side{ padding:50px 24px; min-height:calc(100vh - 80px); }

    .account-layout{ grid-template-columns:1fr; }

    .curso-layout{ grid-template-columns:1fr; }
    .curso-buy-card{ position:static; }
}

/* ---------- <=768px ---------- */
@media (max-width:768px){
    .benefits-grid{ grid-template-columns:1fr; }
    .courses-grid{ grid-template-columns:1fr; }
    .library-grid{ grid-template-columns:1fr; }

    .testimonial-card{ padding:32px 24px; }
    .testimonial-quote{ font-size:17px; }

    .footer-grid{ grid-template-columns:1fr; gap:36px; }
    .footer-brand p{ max-width:100%; }

    .footer-bottom{
        flex-direction:column;
        gap:14px;
        text-align:center;
    }

    .footer-bottom a{ margin:0 10px; }
}

/* ---------- <=480px ---------- */
@media (max-width:480px){
    .tag{ font-size:12px; }

    .hero-stats{ gap:10px; }
    .stat-card{ padding:14px 18px; font-size:14px; }

    .newsletter-form{ flex-direction:column; }

    .form-row{ flex-direction:column; align-items:flex-start; gap:12px; }
}