@media (max-width: 899px) {
    /*
     * Mobile-specific visual controls.
     * Edit these to tune spacing and corner style on small screens
     * without affecting desktop values.
     */
    :root {
        --content-grid-gap: 12px;
        --card-radius: 10px;
        --slot-radius: 10px;
    }

    .top-bar-inner {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .top-bar-contact {
        gap: 20px;
    }

    .top-bar-whatsapp {
        width: 28px;
        height: 28px;
    }

    .top-bar-whatsapp img {
        width: 100%;
        height: 100%;
    }

    .language-switcher {
        margin-left: auto;
    }

    .site-header {
        top: var(--top-bar-height, 48px);
    }

    .middle-bar-inner {
        height: 72px;
        padding: 0 14px;
        position: relative;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        column-gap: 10px;
    }

    .middle-bar-spacer {
        display: none;
    }

    .brand-logo img {
        max-height: 44px;
    }

    .hamburger {
        display: block;
        position: static;
        right: auto;
        top: auto;
        transform: none;
        z-index: 3;
    }

    .top-nav {
        top: calc(var(--top-bar-height, 48px) + var(--site-header-height, 72px));
        left: 0;
        padding: 12px 14px;
        display: none;
        flex-direction: column;
        width: 100%;
        z-index: 975;
        background: #fff;
    }

    body.menu-open .top-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .nav-item {
        text-align: center;
        padding: 10px;
        font-size: 0.95rem;
    }

    .main-content {
        padding: 6px 14px 12px;
    }

    .hero,
    .content-card {
        padding: 16px;
        border-radius: var(--card-radius);
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--content-grid-gap);
    }

    .content-slot {
        min-height: 160px;
        border-radius: var(--slot-radius);
    }

    .site-footer {
        padding: 0 14px;
        margin-bottom: 18px;
    }

    .top-bar.is-hidden + .site-header {
        top: 0;
    }

    .top-bar.is-hidden + .site-header + .top-nav {
        top: var(--site-header-height, 72px);
    }
}