/*
 * Estilos responsive globales
 * Mobile First - adaptación a todos los tamaños
 */

/* ─── Pantallas pequeñas (< 480px) ─────────────────────── */
@media (max-width: 480px) {
    :root {
        --margin-desktop: 1rem;
        --section-padding: var(--section-padding-mobile);
    }

    h1, .h1 {
        font-size: var(--text-4xl);
    }

    h2, .h2 {
        font-size: var(--text-2xl);
    }

    .container {
        padding: 0 var(--margin-mobile);
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ─── Móviles grandes (481px - 640px) ──────────────────── */
@media (min-width: 481px) and (max-width: 640px) {
    :root {
        --margin-desktop: 1.25rem;
        --section-padding: var(--section-padding-mobile);
    }

    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr 1fr;
    }
}



/* ─── Tablets (641px - 768px) ──────────────────────────── */
@media (min-width: 641px) and (max-width: 768px) {
    :root {
        --margin-desktop: 2rem;
    }
}

/* ─── Tablets grandes / portátiles pequeños (769px - 1024px) ─ */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --margin-desktop: 2.5rem;
    }
}

/* ─── Portátiles (1025px - 1440px) ─────────────────────── */
@media (min-width: 1025px) and (max-width: 1440px) {
    :root {
        --margin-desktop: 4rem;
    }
}

/* ─── Pantallas 2K (1441px - 2560px) ───────────────────── */
@media (min-width: 1441px) and (max-width: 2560px) {
    :root {
        --container-max: 1400px;
        --margin-desktop: 6rem;
    }

    html {
        font-size: 18px;
    }
}

/* ─── Pantallas 4K (> 2560px) ──────────────────────────── */
@media (min-width: 2561px) {
    :root {
        --container-max: 1600px;
        --margin-desktop: 8rem;
    }

    html {
        font-size: 20px;
    }
}

/* ─── Contenido dentro de .container para pantallas grandes ─ */
@media (max-width: 640px) {
    .container {
        padding: 0 var(--margin-mobile);
    }
}

/* ─── Formulario de contacto: 2 columnas → 1 en móvil ──── */
@media (max-width: 640px) {
    form[action*="contacto"] > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ─── Ajustes generales para móvil muy pequeño ──────────── */
@media (max-width: 360px) {
    :root {
        --text-4xl: 2rem;
        --text-3xl: 1.625rem;
        --text-2xl: 1.25rem;
    }

    .hero__title {
        font-size: var(--text-4xl);
    }
}