﻿/* Evita que filhos flex/grid forcem a página para além do viewport. */
.app-layout,
.main-wrapper,
.main-content,
.section,
.container { min-width: 0; }

@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .service-card--featured {
        grid-column: 1 / -1;
    }

    .service-card--featured .service-card__list {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .capabilities {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(var(--sidebar-width), 88vw);
        height: 100vh;
        height: 100dvh;
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
        z-index: 1001;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .sidebar--open {
        transform: translateX(0);
    }

    .sidebar__header {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        padding: 1rem 1.25rem;
    }

    .sidebar__close {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(var(--primary-rgb), 0.06) !important;
        color: var(--dark) !important;
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .sidebar__close:hover {
        background: rgba(var(--primary-rgb), 0.15) !important;
        color: var(--primary) !important;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(var(--primary-rgb), 0.15);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-overlay--visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .topbar { z-index: 50; }
    .mobile-menu-toggle { display: flex; }
    .topbar__logo-mobile { display: block; }
    .main-wrapper { margin-left: 0; }

    .hero__grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .hero__description { margin: 0 auto 2rem; }
    .hero__buttons { justify-content: center; }
    /* .hero__visual responsivo tratado em hero.css */
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    .service-card--featured .service-card__list { grid-template-columns: 1fr 1fr; }
    .capabilities { grid-template-columns: repeat(2, 1fr); }
    .info-cards { grid-template-columns: 1fr; }
    .store-categories { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr 1fr; }
    .product-detail { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .section {
        padding: 3rem 0;
    }

    .container {
        padding: 0 1.25rem;
    }

    .hero {
        padding: 2rem 0 3rem;
    }

    .topbar {
        padding: 0 1.25rem;
        gap: 1rem;
    }

    .topbar__search {
        max-width: 100%;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .capabilities {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    
    .capability-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.5rem 1.25rem;
        gap: 0.35rem;
    }
    
    .capability-item__number {
        font-size: 2rem;
        margin-bottom: 0;
        line-height: 1;
    }
    
    .capability-item__label {
        font-size: 0.8rem;
        line-height: 1.3;
    }
    
    .capability-item__icon {
        display: flex !important;
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .cookie-banner__inner {
        flex-direction: column;
        text-align: center;
    }

    .hero__floating-card {
        display: none;
    }

    .topbar__search-shortcut {
        display: none;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero__buttons {
        flex-direction: column;
    }

    .hero__buttons .btn {
        justify-content: center;
    }

    .btn { max-width: 100%; white-space: normal; }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .service-card--featured .service-card__list {
        grid-template-columns: 1fr;
    }

    .topbar__lang-btn span {
        display: none;
    }

    .store-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .store-filter-btn {
        text-align: center;
    }
}

/* =============================================
   CORREÇÃO ZOOM OUT - TELAS PEQUENAS
   ============================================= */

@media (max-width: 576px) {
    html, body {
        width: 100%;
        max-width: 100%;
    }
    
    .dominios-grid,
    .dominios-paises-grid,
    .dominios-servicos-grid,
    .dominios-passos-grid,
    .sistemas-tipos-grid,
    .sistemas-planos-grid,
    .sistemas-recursos-grid,
    .sistemas-processo-grid,
    .sites-tipos-grid,
    .sites-planos-grid,
    .sites-incluido-grid,
    .sites-recursos-grid,
    .sites-design-grid,
    .sites-infra-grid,
    .sites-gestao-grid,
    .sites-processo-grid,
    .sites-tecnologias-grid,
    .hospedagens-grid,
    .hospedagens-servicos-grid,
    .hospedagens-passos-grid,
    .emails-planos-grid,
    .emails-recursos-grid,
    .emails-tipos-grid,
    .emails-gestao-grid,
    .emails-migracao,
    .emails-passos-grid,
    .central-ajuda-grid,
    .central-ajuda-tickets,
    .products-grid,
    .product-detail {
        grid-template-columns: 1fr !important;
        width: 100%;
        max-width: 100%;
    }
    
    .dominio-card,
    .sistemas-tipo-card,
    .sistemas-plano-card,
    .sites-tipo-card,
    .sites-plano-card,
    .hospedagem-card,
    .emails-plano-card,
    .emails-tipo-card,
    .product-card {
        padding: 1.25rem 1rem !important;
        width: 100%;
    }
    
    .container {
        padding: 0 1rem !important;
        width: 100%;
        min-width: 0;
    }
    
    .product-detail {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .product-detail__image {
        min-height: auto !important;
        aspect-ratio: auto !important;
    }
    
    .product-detail__info {
        width: 100%;
    }
    
    .product-detail .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .section {
        padding: 2rem 0 !important;
    }
    
    .section__title {
        font-size: 1.5rem !important;
    }
    
    .section__description {
        font-size: 0.9rem !important;
    }
    
    .btn--lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.85rem !important;
    }
}
