/* Mobile — 375px audit */

@media (max-width: 640px) {
    /* Landing hero */
    .phone-device {
        width: min(240px, 85vw);
        padding: 8px;
    }
    .phone-device::before {
        width: 72px;
        height: 20px;
        top: 10px;
    }
    #hero-phone .float-card,
    #hero-phone .float-card-delay {
        display: none;
    }
    #site-nav .btn-brand {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }
    #site-nav a[href*="login"] {
        display: none !important;
    }

    /* Bento stacks naturally; tighten padding */
    .bento-card {
        padding: 1.25rem;
    }

    /* CTA buttons full width on landing hero */
    section .flex-col.sm\:flex-row .btn-brand,
    section .flex-col.sm\:flex-row .btn-ghost {
        width: 100%;
    }

    /* Pricing badge position */
    .relative.overflow-hidden.rounded-3xl.border-2 .absolute.right-4 {
        position: static;
        display: inline-block;
        margin-bottom: 0.75rem;
    }

    /* FAQ touch targets */
    .faq-item summary {
        min-height: 44px;
        align-items: center;
    }

    /* Comparativa cards */
    #comparativa .grid.md\:grid-cols-2 {
        gap: 1rem;
    }
}

/* Client app — mobile */
@media (max-width: 640px) {
    .cart-bar {
        inset-inline: 0.75rem;
        bottom: 5rem;
        font-size: 0.875rem;
    }
    .product-row {
        gap: 0.75rem;
    }
    .product-thumb {
        width: 3.5rem;
        height: 3.5rem;
    }
    .btn-icon {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 44px;
        min-height: 44px;
    }
    .client-nav-link {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
}

/* Dashboard — mobile order cards */
@media (max-width: 640px) {
    .pill-filter-row {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
    .pill-filter-row .ml-auto {
        margin-left: 0;
        flex-shrink: 0;
    }
    .order-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .order-row > .flex.items-center.gap-3 {
        justify-content: space-between;
        width: 100%;
    }
    .pill-filter {
        flex-shrink: 0;
    }
    .sidebar {
        display: none;
    }
}

/* WCAG contrast tweak — handled in a11y.css */