/* ============================================
   RESPONSIVE.CSS - Media Queries
   ============================================ */

/* Tablets y pantallas medianas */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-visual {
        order: -1;
    }

    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-item.large {
        grid-column: span 2;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-card.featured {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }

    .news-card.featured .news-image {
        height: 250px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-item.large,
    .bento-item.wide {
        grid-column: span 1;
    }

    .programs-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .stat-item {
        text-align: center;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    :root {
        --section-padding: 60px;
    }

    .hero {
        padding: 100px 5% 60px;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .floating-card {
        padding: 1.5rem;
    }

    .program-content {
        padding: 1.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}