/* ============================
   PITIAS — Responsive
   Media queries: Mobile, Tablet, Desktop
   ============================ */

/* ═══════════════════════════════
   TABLET (max-width: 1024px)
   ═══════════════════════════════ */

@media (max-width: 1024px) {

    /* Tipografía */
    h1 {
        font-size: var(--font-size-3xl);
    }

    h2 {
        font-size: var(--font-size-2xl);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

/* ═══════════════════════════════
   MOBILE (max-width: 640px)
   ═══════════════════════════════ */

@media (max-width: 640px) {

    /* ── Layout General ── */
    :root {
        --container-padding: var(--space-md);
    }

    /* ── Tipografía ── */
    h1 {
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    h3 {
        font-size: var(--font-size-lg);
    }

    /* ── Header ── */
    .nav-list {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .mobile-menu-overlay {
        display: block;
    }

    .header-logo img {
        height: 36px;
    }

    /* ── Botones ── */
    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-lg {
        padding: var(--space-md) var(--space-lg);
    }

    /* ── Cards ── */
    .card {
        padding: var(--space-lg);
    }

    /* ── Footer ── */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
    }

    /* ── Modales ── */
    .modal {
        width: 95%;
        padding: var(--space-lg);
    }
}

/* ═══════════════════════════════
   DESKTOP GRANDE (min-width: 1400px)
   ═══════════════════════════════ */

@media (min-width: 1400px) {

    :root {
        --container-max: 1320px;
    }

    h1 {
        font-size: 3.5rem;
    }
}