/* ============================================================
   RESPONSIVE — só ajustes de breakpoint. Mobile-first no style.
   ============================================================ */

@media (max-width: 1040px) {
    .rodape__interno { grid-template-columns: 1.6fr 1fr 1fr; }
    .rodape__marca { grid-column: 1 / -1; }

    /* Cabeçalho: logo + 6 itens de nav + idiomas somam ~970px em PT —
       abaixo de 1040px o hamburguer assume (corrige o vazamento 720–960). */
    .nav-principal, .seletor-idioma, .botao--restrito { display: none; }
    .menu-hamburguer { display: flex; }
    .cabecalho.is-menu-aberto .nav-principal {
        display: flex; flex-direction: column; gap: 1.25rem;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--branco); padding: 1.5rem var(--padding-lat);
        border-bottom: 1px solid var(--borda-clara); box-shadow: var(--sombra-m);
    }
    /* Seletor de idiomas dentro do menu aberto */
    .cabecalho.is-menu-aberto .nav-principal .seletor-idioma--menu {
        display: flex; gap: 0.5rem;
        padding-top: 1.25rem; border-top: 1px solid var(--borda-clara);
    }
    /* Eco do botão Restrito dentro do menu aberto (mesmo tratamento do seletor de idiomas) */
    .cabecalho.is-menu-aberto .nav-principal .nav-principal__link--restrito {
        display: inline-flex;
    }
}

@media (max-width: 960px) {
    /* Empilhamento do hero fica em style.css (colagem editorial). */
    .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .bento__item:first-child { grid-row: auto; grid-column: 1 / -1; }
    .forn { grid-template-columns: 1fr; }
    .insights { grid-template-columns: 1fr; }
    .kpis { grid-template-columns: repeat(2, 1fr); }
    /* Cartões da agenda empilham cedo: 2 colunas espreme o título do evento */
    .eventos-grade { grid-template-columns: 1fr; }
    /* About: missão empilha (foto no topo, formato paisagem); certificações em 1 coluna */
    .missao { grid-template-columns: 1fr; }
    .missao__foto { min-height: 0; aspect-ratio: 16 / 10; }
    .certs { grid-template-columns: 1fr; }
    /* Contato: form empilha sobre a foto/nota; foto encolhe e centraliza;
       cartões de perfil e canais viram 1 coluna (mesmo padrão de .certs);
       mapa empilha (moldura em cima, cartão de endereço embaixo) */
    .contato { grid-template-columns: 1fr; }
    .contato__aside { position: static; }
    .contato__foto { max-width: 320px; margin-inline: auto; }
    .perfis { grid-template-columns: 1fr; }
    .canais { grid-template-columns: 1fr; }
    .mapa { grid-template-columns: 1fr; }
    /* Produtos: as duas listas de destinos empilham (10 linhas cada em 2 col
       espremem o nome do país); janelas de suprimento empilham texto/painel.
       A grade de variedades não precisa de regra: é auto-fill. */
    .mercados { grid-template-columns: 1fr; }
    .safra { grid-template-columns: 1fr; }
    /* Market Insights: relatório (texto/painel) empilha; newsletter (texto/botão)
       vira coluna à esquerda. A grade de artigos não precisa de regra: auto-fill. */
    .relatorio { grid-template-columns: 1fr; }
    /* Painel BI público: chamada acima, iframe abaixo (mesma lógica do .relatorio) */
    .painel-bi__grade { grid-template-columns: 1fr; }
    .painel-bi__texto { max-width: none; }
}

@media (max-width: 640px) {
    /* Lightbox do BI em telas pequenas: praticamente tela cheia. */
    .lightbox-bi { width: 96vw; height: 90vh; padding: 0.6rem; gap: 0.5rem; }
    .lightbox-bi__fechar { top: 0.5rem; right: 0.5rem; width: 2.3rem; height: 2.3rem; }
    .newsletter { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 800px) {
    /* Mini-hero das internas: KPI desce para baixo do texto, alinhado à esquerda */
    .hero-interna__grade { grid-template-columns: 1fr; align-items: start; }
    .hero-interna__kpi { justify-self: start; text-align: left; max-width: none; }

    /* Pilares empilham: número acima do texto, ambos à esquerda (fim da alternância) */
    .pilar { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
    .pilar--dir .pilar__num-zona { order: 0; align-items: flex-start; text-align: left; }
}

@media (max-width: 720px) {
    .bento { grid-template-columns: 1fr; }
    .bento__item:first-child { grid-column: auto; }
    .kpis { grid-template-columns: 1fr 1fr; }
    .rodape__interno { grid-template-columns: 1fr 1fr; }
    /* Empilhado, os 4 blocos de links ficam próximos demais sem uma referência
       visual entre eles — linha divisória acima de cada um (também separa o
       primeiro bloco de nav do bloco de marca/descrição logo acima). */
    .rodape__col { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 1.5rem; }
    .summit { grid-template-columns: 1fr; }
    .summit__corpo { gap: 1.25rem; }
    /* Panorama vira a base do cartão: largura total, sangrado até as bordas,
       proporção nativa do arquivo (zero corte) */
    .summit__media { aspect-ratio: 1203 / 515; }
    /* About: os dois cartões de fundadores empilham */
    .fundadores { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    /* Cartão de evento empilha: foto vira o topo, sangrada, formato paisagem */
    .evento { grid-template-columns: 1fr; }
    .evento__media { order: -1; aspect-ratio: 16 / 9; }
    /* Contato: campos do formulário (nome/e-mail/empresa/...) em 1 coluna */
    .campos { grid-template-columns: 1fr; }
    /* Nav ← anterior / próximo → empilha: dois cards lado a lado espremem o
       título; o card de "próximo" volta a alinhar à esquerda quando sozinho */
    .artigo-nav { grid-template-columns: 1fr; gap: 0.75rem; }
    .artigo-nav__link--proximo { text-align: left; }
}

@media (max-width: 480px) {
    .kpis { grid-template-columns: 1fr; }
    .rodape__interno { grid-template-columns: 1fr; }
    /* 404: os dois botões ("início" / "voltar") ficam largos demais lado a
       lado em 320–375px; empilhados, cada um vira alvo de toque full-width. */
    .erro-404__acoes { flex-direction: column; width: 100%; }
    .erro-404__acoes .botao { width: 100%; }
}