/*
    Club El Ceibo - Rediseño 2026
    Responsive Design
*/

/* ===================================================
   MENÚ MÓVIL/TABLET: oculto por defecto (< 1024px)
   Se muestra con la clase .nav-open (gestionada por JS)
   =================================================== */
@media (max-width: 1023px) {
    .nav-menu {
        display: none;
    }

    /* Menú desplegado verticalmente */
    .nav-menu.nav-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #1B203E;
        border-top: 2px solid #E30613;
        z-index: 999;
        padding: 10px 0 20px;
    }

    .nav-menu.nav-open ul {
        flex-direction: column;
        gap: 0;
    }

    .nav-menu.nav-open ul li a {
        display: block;
        padding: 14px 25px;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        color: white;
    }

    .nav-menu.nav-open ul li:last-child a {
        border-bottom: none;
    }

    .nav-menu.nav-open ul li a:hover {
        background: rgba(227, 6, 19, 0.15);
        color: #E30613;
        padding-left: 35px;
    }
}

/* ===================================================
   DESKTOP (>= 1024px): nav siempre visible
   =================================================== */
@media (min-width: 1024px) {
    .mobile-menu-btn {
        display: none !important;
    }

    .nav-menu {
        display: block !important;
    }
}

/* ===================================================
   TABLET: 768px – 1023px
   Dos columnas, sin CTA en header
   =================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 0 30px;
    }

    .header-cta {
        display: none;
    }

    .hero-content h1 {
        font-size: 4rem;
    }

    .section-title h2 {
        font-size: 2.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .disciplina-block {
        height: 300px;
    }

    .disciplina-block h3 {
        font-size: 2rem;
    }

    section {
        padding: 80px 0;
    }
}

/* ===================================================
   MOBILE: < 768px
   Una columna, sin CTA en header
   =================================================== */
@media (max-width: 767px) {
    .container {
        padding: 0 16px;
    }

    /* Header */
    .header-cta {
        display: none;
    }

    .logo img {
        height: 45px;
    }

    /* Hero */
    .hero {
        height: 70vh;
        padding-bottom: 50px;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    /* Sections */
    section {
        padding: 60px 0;
    }

    .section-title h2 {
        font-size: 1.8rem;
    }

    .section-title p {
        font-size: 1rem;
    }

    /* Cards */
    .card h3 {
        font-size: 1.2rem;
    }

    .card-content {
        padding: 20px;
    }

    /* Disciplinas */
    .disciplina-block {
        height: 220px;
    }

    .disciplina-block h3 {
        font-size: 1.4rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    footer {
        padding: 50px 0 30px;
    }
}

/* ===================================================
   MUY PEQUEÑO: < 480px
   =================================================== */
@media (max-width: 479px) {
    .hero {
        height: 60vh;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

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