/* ==========================================
   PROJECTS SECTION - RESPONSIVE
   ========================================== */

/* TABLET */
@media (max-width: 1100px) {
    .projects-section {
        padding: 80px 20px;
    }
    
    .projects-header {
        margin-bottom: 45px;
    }
    
    .projects-title {
        font-size: clamp(2rem, 5vw, 3rem);
    }
    
    /* Pill responsive en tablet */
    .pill-container {
        width: 75px;
        height: 55px;
        margin: 0 8px;
    }
    
    .pill-button {
        width: 75px;
        height: 35px;
    }
    
    .pill-isotipo {
        width: 36px;
        height: 36px;
        top: -4px;
    }
    
    .projects-subtitle {
        font-size: 1rem;
    }
    
    .projects-carousel {
        padding: 20px 30px;
        height: 480px;
    }
    
    :root {
        --project-card-w: 280px;
        --project-card-h: 380px;
        --project-card-expanded-w: 340px;
        --project-card-expanded-h: 440px;
    }
}

/* ==========================================
   MOBILE
   ========================================== */
@media (max-width: 768px) {
    
    .projects-section {
        padding: 60px 20px;
    }
    
    .projects-header {
        margin-bottom: 40px;
    }
    
    .projects-title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }
    
    /* Pill responsive en mobile */
    .pill-container {
        width: 60px;
        height: 45px;
        margin: 0 6px;
    }
    
    .pill-button {
        width: 60px;
        height: 28px;
    }
    
    .pill-isotipo {
        width: 28px;
        height: 28px;
        top: -3px;
    }
    
    .projects-subtitle {
        font-size: 0.95rem;
        padding: 0 15px;
    }
    
    .projects-carousel {
        padding: 20px 20px;
        gap: 15px;
        height: 440px;
    }
    
    :root {
        --project-card-w: 260px;
        --project-card-h: 340px;
        --project-card-expanded-w: 300px;
        --project-card-expanded-h: 400px;
    }
    
    .project-card {
        border-radius: 25px;
    }
    
    .project-category {
        top: 20px;
        left: 20px;
        font-size: 10px;
        padding: 5px 12px;
    }
    
    .project-arrow {
        top: 20px;
        right: 20px;
        font-size: 20px;
    }
    
    .project-content {
        bottom: 25px;
        left: 25px;
        right: 25px;
    }
    
    .project-content h3 {
        font-size: 20px;
    }
    
    .project-description {
        font-size: 13px;
    }
    
    /* Barra de progreso más pequeña */
    .projects-scroll-control {
        margin-top: 35px;
    }
    
    .projects-scroll-track {
        width: 200px;
    }
    
    .projects-scroll-thumb {
        width: 40px;
    }
}

/* MOBILE PEQUEÑO */
@media (max-width: 480px) {
    
    .projects-section {
        padding: 50px 15px;
    }
    
    .projects-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    /* Pill responsive en mobile pequeño */
    .pill-container {
        width: 55px;
        height: 42px;
        margin: 0 5px;
    }
    
    .pill-button {
        width: 55px;
        height: 26px;
    }
    
    .pill-isotipo {
        width: 25px;
        height: 25px;
        top: -2px;
    }
    
    .projects-subtitle {
        font-size: 0.9rem;
    }
    
    .projects-carousel {
        padding: 20px 15px;
        height: 420px;
    }
    
    :root {
        --project-card-w: 240px;
        --project-card-h: 320px;
        --project-card-expanded-w: 280px;
        --project-card-expanded-h: 380px;
    }
    
    .projects-scroll-track {
        width: 150px;
    }
    
    .projects-scroll-thumb {
        width: 30px;
    }
}