/**
 * responsive.css — Media queries del theme Recoplast
 * Mobile-first: los estilos base son mobile, aquí se añaden breakpoints.
 */

/* ══════════════════════════════════════════════
   TABLET — ≤ 992px
══════════════════════════════════════════════ */

@media (max-width: 992px) {
    :root {
        --header-height: 70px;
        --gutter: 1.25rem;
    }

    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }

    /* Grid 3 → 2 columnas */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ══════════════════════════════════════════════
   MOBILE — ≤ 768px
══════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --gutter: 1rem;
        --space-4xl: 4rem;
    }

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

    /* Grid 2 → 1 columna */
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* Section */
    .section {
        padding-block: var(--space-3xl);
    }

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

    /* Botones */
    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn + .btn {
        margin-block-start: var(--space-sm);
    }
}

/* ══════════════════════════════════════════════
   PEQUEÑO MÓVIL — ≤ 480px
══════════════════════════════════════════════ */

@media (max-width: 480px) {
    :root {
        --gutter: 0.875rem;
    }

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

    .error-404__code {
        font-size: 5rem;
    }
}