/* ==========================================
   PROYECTOS PAGE — 480px
   ========================================== */

@media (max-width: 480px) {

    /* Hero */
    .hero-proyectos .hero-content {
        padding: 100px 0 60px;
    }

    .hero-proyectos .hero-main-title {
        font-size: 1.9rem;
    }

    .hero-proyectos .hero-description {
        font-size: 0.98rem;
    }

    .hero-proyectos .hero-stats {
        flex-direction: row;
        justify-content: center;
    }

    .hero-proyectos .hero-stat {
        padding: 0 1rem;
    }

    .hero-proyectos .stat-number {
        font-size: 1.8rem;
    }

    /* Pills — en columna */
    .hero-nav-pills {
        flex-direction: column;
        align-items: center;
    }

    .hero-nav-pill {
        width: 100%;
        max-width: 240px;
        justify-content: center;
    }

    /* Category tabs — solo íconos */
    .category-tab span {
        display: none;
    }

    .category-tab {
        padding: 0.875rem 1.2rem;
    }

    /* Block header */
    .block-header {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .bg-azul .block-icon,
    .bg-light .block-icon {
        width: 56px;
        height: 56px;
    }

    .bg-azul .block-icon i,
    .bg-light .block-icon i {
        font-size: 1.6rem;
    }

    .bg-azul .block-title,
    .bg-light .block-title {
        font-size: 1.4rem;
    }

    .bg-azul .block-stats,
    .bg-light .block-stats {
        gap: 0.75rem;
    }

    .bg-azul .stat-box,
    .bg-light .stat-box {
        min-width: 90px;
        padding: 0.75rem 1rem;
    }

    /* Grid — 1 columna */
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Secciones */
    .projects-section {
        padding: 3.5rem 0;
    }

    /* CTA */
    .proyectos-cta {
        padding: 4rem 0;
    }

    .proyectos-cta .cta-title {
        font-size: 1.75rem;
    }

    .proyectos-cta .cta-description {
        font-size: 0.95rem;
    }

    .proyectos-cta .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-btn-primary,
    .cta-btn-secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

}