/* ==========================================================================
   RESPONSIVE CSS — DigiLab Creativo Core Engine v1.0
   Mobile-First Media Queries
   Developed by Leidy Jaimes
   ========================================================================== */

/* ──────────────────────────────────────────────
   TABLET & BELOW (max-width: 1024px)
   ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Header */
    .dl-header__hamburger {
        display: flex;
    }

    .dl-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 85vw);
        height: 100vh;
        background: var(--dl-primary);
        border-left: 1px solid var(--dl-glass-border);
        z-index: 1000;
        transition: right var(--dl-transition-base);
        padding: calc(80px + var(--dl-space-xl)) var(--dl-space-xl) var(--dl-space-xl);
        overflow-y: auto;
    }

    .dl-nav--open {
        right: 0;
    }

    .dl-nav__list {
        flex-direction: column;
        gap: var(--dl-space-xs);
    }

    .dl-nav__link {
        padding: var(--dl-space-md) var(--dl-space-lg);
        font-size: var(--dl-text-base);
        border-radius: var(--dl-radius-md);
        width: 100%;
    }

    .dl-nav__link:hover,
    .dl-nav__link--active {
        background: rgba(0, 212, 170, 0.05);
    }

    .dl-nav__link::after {
        display: none;
    }

    .dl-nav__link--cta {
        margin-top: var(--dl-space-md);
        text-align: center;
    }

    /* Footer */
    .dl-footer__top {
        grid-template-columns: 1fr 1fr;
        gap: var(--dl-space-2xl);
    }

    .dl-footer__brand {
        grid-column: span 2;
    }

    /* Bento Grid */
    .dl-bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .dl-bento__card--wide {
        grid-column: span 2;
    }

    /* Stats */
    .dl-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dl-stats__item:nth-child(2)::after {
        display: none;
    }

    /* Portfolio */
    .dl-portfolio__grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* ──────────────────────────────────────────────
   MOBILE (max-width: 768px)
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hero */
    .dl-hero__content {
        padding: var(--dl-space-3xl) var(--dl-space-md);
    }

    .dl-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .dl-hero__actions .dl-btn {
        width: 100%;
        justify-content: center;
    }

    /* Stats */
    .dl-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--dl-space-md);
        padding-block: var(--dl-space-2xl);
    }

    .dl-stats__item::after {
        display: none;
    }

    .dl-stats__item {
        padding: var(--dl-space-md);
    }

    /* Bento & Service Cards */
    .dl-bento {
        grid-template-columns: 1fr;
    }

    .dl-bento__card--wide,
    .dl-service-card--wide {
        grid-column: span 1 !important;
    }

    .dl-service-card > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: var(--dl-space-xl) !important;
    }

    .dl-service-card {
        padding: var(--dl-space-xl) !important;
    }

    .dl-bento__card--tall {
        grid-row: span 1;
    }

    /* Footer & Newsletter */
    .dl-footer__newsletter-card {
        grid-template-columns: 1fr !important;
        padding: var(--dl-space-xl) !important;
        gap: var(--dl-space-lg) !important;
    }

    .dl-contact-grid {
        grid-template-columns: 1fr !important;
    }

    .dl-footer__top {
        grid-template-columns: 1fr;
        gap: var(--dl-space-2xl);
    }

    .dl-footer__brand {
        grid-column: span 1;
    }

    .dl-footer__bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--dl-space-sm);
    }

    /* Blog */
    .dl-blog__grid {
        grid-template-columns: 1fr;
    }

    /* Portfolio */
    .dl-portfolio__grid {
        grid-template-columns: 1fr;
    }

    .dl-portfolio__card-overlay {
        opacity: 1;
    }

    /* Form */
    .dl-form {
        padding: 0 var(--dl-space-md);
    }

    /* Modal */
    .dl-modal__content {
        padding: var(--dl-space-lg);
        margin: var(--dl-space-md);
    }

    /* Testimonials */
    .dl-testimonials__quote {
        font-size: var(--dl-text-xl);
    }

    .dl-testimonials__card {
        padding: var(--dl-space-xl);
    }

    /* WhatsApp Button */
    .dl-whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: var(--dl-space-lg);
        right: var(--dl-space-lg);
    }

    .dl-whatsapp-float__icon {
        width: 24px;
        height: 24px;
    }

    /* Page Header */
    .dl-page-header {
        padding-top: calc(70px + var(--dl-space-3xl));
        padding-bottom: var(--dl-space-2xl);
    }

    /* Tabs */
    .dl-tabs {
        flex-direction: column;
    }

    /* Table */
    .dl-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dl-table {
        min-width: 600px;
    }

    /* Toasts */
    .dl-toast-container {
        left: var(--dl-space-md);
        right: var(--dl-space-md);
    }

    .dl-toast {
        max-width: 100%;
    }
}

/* ──────────────────────────────────────────────
   SMALL MOBILE (max-width: 480px)
   ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .dl-hero__content {
        padding: var(--dl-space-2xl) var(--dl-space-sm);
    }

    .dl-header__logo-text {
        font-size: var(--dl-text-lg);
    }

    .dl-stats__grid {
        grid-template-columns: 1fr 1fr;
    }

    .dl-bento__card {
        padding: var(--dl-space-lg);
    }

    .dl-filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--dl-space-xs);
    }

    .dl-filter-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ──────────────────────────────────────────────
   LARGE DESKTOP (min-width: 1440px)
   ────────────────────────────────────────────── */
@media (min-width: 1440px) {
    .dl-hero__content {
        max-width: 1000px;
    }

    .dl-bento {
        grid-template-columns: repeat(4, 1fr);
    }
}