/* ============================================================
   MOBILE / _checkout.css — Página de checkout (/x)
   Archivo desktop relacionado: checkout_moderno.css
   ============================================================ */

/* ── Campos del formulario apilados en móvil ────────────────── */
@media (max-width: 639px) {

    .fila-form {
        flex-direction: column;
        gap: 0;
    }

    .form-grupo.mitad {
        margin-bottom: var(--space-md, 16px);
    }

    /* Padding de secciones del formulario */
    .form-moderno .seccion-form {
        padding: 16px;
    }

    /* Botón de pago full width y táctil */
    .checkout-pay-btn {
        padding: 16px !important;
        font-size: 1rem;
        min-height: 52px;
    }

    /* Imagen de ítem en resumen */
    .checkout-figma-item-img {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
    }
}

/* ── Tablet (640px – 1023px): layout a 1 columna ───────────── */
@media (min-width: 640px) and (max-width: 1023px) {

    .fila-form {
        flex-direction: row;
        gap: var(--space-lg, 24px);
    }

    .form-grupo.mitad { margin-bottom: 0; }
}

/* ── Página completa: layout checkout ──────────────────────── */
/* El checkout usa un layout de 2 columnas en desktop.
   En tablet/móvil se apila en 1 columna. */
@media (max-width: 1023px) {

    .checkout-figma {
        grid-template-columns: 1fr;
    }

    .checkout-figma .checkout-resumen {
        margin-top: 24px;
    }
}