/* ============================================================
   MAXTEM V5.3 — Responsive final
   TV 4K | Desktop | Notebook | iPad | Tablet | Mobile
   Banners Havan: 1410×270 / 1920×370
   ============================================================ */

/* ---------- TV / Ultra-wide ---------- */
@media (min-width: 2560px) {
    :root { --container: 1600px; }
    .hero-slide {
        min-height: 300px;
        max-height: 400px;
        aspect-ratio: 1920 / 370;
    }
}

/* ---------- Desktop grande ---------- */
@media (min-width: 1400px) and (max-width: 2559px) {
    .hero-slide {
        min-height: 270px;
        max-height: 370px;
        aspect-ratio: 1410 / 270;
    }
    .produtos-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Notebook ---------- */
@media (max-width: 1366px) {
    .produtos-grid { grid-template-columns: repeat(4, 1fr); }
    .categorias-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
    .categoria-label { font-size: 11px; padding: 10px 6px; }
    .hero-slide {
        min-height: 240px;
        max-height: 320px;
        aspect-ratio: 1410 / 270;
    }
}

/* ---------- Tablet landscape / small notebook ---------- */
@media (max-width: 1200px) {
    .produtos-grid { grid-template-columns: repeat(3, 1fr); }
    .categorias-grid { grid-template-columns: repeat(3, 1fr); }
    .beneficios-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .sobre-grid { grid-template-columns: 1fr 1fr; }
    .sobre-local { grid-column: 1 / -1; }
    .nav-link { padding: 12px 12px; font-size: 12px; }
    .header-actions .action-text { display: none; }
    .btn-whatsapp-header { font-size: 10px; padding: 8px 12px; }
    .produtos-grid-6 { grid-template-columns: repeat(3, 1fr); }
    .marcas-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tablet / iPad portrait ---------- */
@media (max-width: 992px) {
    .maxtem-nav { display: none; }
    .mobile-toggle { display: flex; }
    .header-search { max-width: none; flex: 1; min-width: 0; }
    .header-actions .account { display: none; }
    .maxtem-header { position: relative; }

    .hero-slide {
        min-height: 200px;
        max-height: 280px;
        aspect-ratio: 16 / 6;
        height: auto;
    }
    .hero-img {
        object-position: center center;
    }

    .produtos-grid { grid-template-columns: repeat(2, 1fr); }
    .posts-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .topbar-center { display: none; }
    .qualidade-title { font-size: 28px; }

    body.maxtem-tv .mtv-header .container {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ---------- Mobile / large phone ---------- */
@media (max-width: 768px) {
    .topbar-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        text-align: center;
        font-size: 11px;
    }
    .topbar-left, .topbar-right { width: 100%; justify-content: center; }

    .header-inner {
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }
    .header-logo { order: 1; }
    .mobile-toggle { order: 2; margin-left: auto; }
    .header-actions { order: 3; }
    .header-search {
        order: 4;
        width: 100%;
        max-width: none;
        flex: 1 1 100%;
    }

    /* Banner mobile: prioriza imagem mobile do <picture>, altura confortável */
    .hero-slide {
        min-height: 180px;
        max-height: 240px;
        aspect-ratio: 16 / 9;
        height: auto;
    }
    .hero-content {
        padding: 16px !important;
    }
    .hero-prev, .hero-next {
        display: none !important;
    }
    .swiper-pagination.hero-pagination {
        bottom: 8px !important;
    }

    .produtos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .produtos-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .categorias-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .categoria-label { font-size: 11px; padding: 8px 4px; }
    .beneficios-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .sobre-grid { grid-template-columns: 1fr; }
    .marcas-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: 1fr; }
    .posts-grid { grid-template-columns: 1fr; }

    .maxtem-beneficios { padding: 24px 0; }
    .maxtem-categorias { padding: 36px 0 28px; }
    .maxtem-produtos { padding: 28px 0 40px; }
    .maxtem-sobre { padding: 40px 0; }
    .maxtem-qualidade { min-height: 320px; }

    .cta-bar-inner { flex-direction: column; text-align: center; }
    .cta-bar-text { flex-direction: column; }

    .btn-primary, .btn-whatsapp {
        display: block;
        margin: 8px auto;
        max-width: 280px;
    }

    /* Portal home */
    .portal-ring-wrap {
        width: min(160px, 42vw);
        height: min(160px, 42vw);
    }
    .portal-gateway { padding: 28px 16px; }
    .portal-gateway h2 { font-size: 20px; }

    /* MaxTem TV mobile */
    body.maxtem-tv .mtv-header .container {
        flex-direction: column;
        align-items: stretch;
    }
    body.maxtem-tv .mtv-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    body.maxtem-tv .mtv-search-form {
        flex: 1;
        max-width: none;
        min-width: 0;
    }
    body.maxtem-tv .hero-slide {
        min-height: 160px;
        max-height: 220px;
        aspect-ratio: 16 / 9;
    }
    body.maxtem-tv .mtv-posts-grid {
        grid-template-columns: 1fr;
    }
    body.maxtem-tv .mtv-search-posts {
        max-width: none;
        width: 100%;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
    .hero-slide {
        min-height: 150px;
        max-height: 200px;
        aspect-ratio: 16 / 10;
    }
    .produtos-grid,
    .produtos-grid-6 {
        grid-template-columns: 1fr;
    }
    .categorias-grid { grid-template-columns: 1fr 1fr; }
    .marcas-grid { grid-template-columns: 1fr 1fr; }
    .logo-main { font-size: 18px; }
    .btn-whatsapp-header {
        font-size: 9px;
        padding: 8px 10px;
    }

}

/* ---------- Touch ---------- */
@media (hover: none) and (pointer: coarse) {
    .nav-link { padding: 16px 18px; }
    .btn-produto-whatsapp { padding: 14px; }
    .categoria-card:hover,
    .produto-card:hover {
        transform: none;
    }
    .btn-portal,
    .btn-hero,
    .mtv-search-btn {
        min-height: 44px;
    }
}

/* ---------- Print ---------- */
@media print {
    .maxtem-topbar,
    .maxtem-nav,
    .whatsapp-float,
    .btn-whatsapp-header,
    .mobile-toggle,
    .maxtem-portal-section {
        display: none !important;
    }
}


/* ---- Correção espaço branco lateral mobile ---- */
@media (max-width: 992px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .maxtem-header .container,
    .maxtem-topbar .container,
    .header-inner {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .header-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
    .header-search {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .maxtem-hero,
    .hero-swiper,
    .swiper-slide,
    .hero-slide,
    .hero-bg,
    .hero-img {
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .hero-img {
        object-fit: cover;
        object-position: center center;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* evita filhos com largura fixa estourando */
    .maxtem-main,
    .maxtem-categorias,
    .maxtem-produtos,
    .maxtem-portal-section,
    section {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .categorias-grid,
    .produtos-grid,
    .produtos-grid-6 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .produto-card,
    .categoria-card {
        max-width: 100%;
        box-sizing: border-box;
    }
}