/* Layout de página (do mockup home-institucional) */
body { background: #fff; }
.mk { padding: var(--space-8) 0; }
.mk--alt { background: var(--atc-gray-50); }

/* Logo do header — preservar proporção (tagline-cinza, sem achatar) */
.atc-navbar__logo img { height: 54px; width: auto; max-width: 100%; object-fit: contain; }
.atc-navbar__main .atc-container { min-height: 84px; }

/* Páginas internas (listagem + post) */
.pagehero { background: var(--atc-gradient-blue); color: #fff; padding: var(--space-7) 0; }
.pagehero h1 { color: #fff; margin: 8px 0 0; }
.filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-xs); }
.chip { font-family: var(--font-display); font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: #fff; color: var(--color-text-muted); cursor: pointer; text-decoration: none; }
.chip.is-active { background: var(--atc-blue-700); color: #fff; border-color: var(--atc-blue-700); }
.prose p { font-size: 1.0625rem; line-height: 1.8; color: var(--atc-gray-800); margin: 0 0 1.2rem; }
.prose h2 { font-size: 1.6rem; margin: 2rem 0 1rem; }
.prose blockquote { border-left: 4px solid var(--atc-cyan-500); background: var(--atc-cyan-100); margin: 1.5rem 0; padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; font-style: italic; }
.atc-card__media { position: relative; }

/* Carrossel de banners (topo da home) */
.atc-carousel { position: relative; }
.atc-carousel__track { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.atc-carousel__slide { display: none; min-height: 220px; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
/* Variante full width (edge-to-edge) */
.atc-carousel--full { width: 100%; }
.atc-carousel--full .atc-carousel__track { border-radius: 0; box-shadow: none; }
.atc-carousel--full .atc-carousel__slide { min-height: 450px; font-size: 2rem; }
.atc-carousel--full .atc-carousel__dots { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; }
.atc-carousel--full .atc-carousel__dots button { background: rgba(255,255,255,.5); }
.atc-carousel--full .atc-carousel__dots button.is-active { background: #fff; }
.atc-carousel__slide.is-active { display: flex; animation: atc-fade .5s ease; }
@keyframes atc-fade { from { opacity: .3 } to { opacity: 1 } }
.atc-carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.atc-carousel__dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--atc-gray-300); cursor: pointer; padding: 0; }
.atc-carousel__dots button.is-active { background: var(--color-primary, var(--atc-blue-700)); }

/* Faixa de banners (Patrocínios — Advanced Ads) */
.atc-banners .atc-banner-slot a { display: block; }
.atc-banners .atc-banner-slot a > div { min-height: 200px; display: flex; align-items: center; justify-content: center; }

/* Landings de subsite */
.sub-hero { color: #fff; padding: var(--space-8) 0; }
.sub-hero h1 { color: #fff; font-size: 2.6rem; margin: 8px 0 10px; }
.sub-hero p { color: rgba(255,255,255,.9); max-width: 60ch; font-size: 1.1rem; }
.sub-bignum { font-family: var(--font-display); font-weight: 800; font-size: 4rem; line-height: 1; color: #fff; }
.ods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.ods-cell { border-radius: var(--radius-md); padding: 16px; color: #fff; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-display); }
.ods-cell b { font-size: 1.8rem; }

/* ==========================================================================
   Blindagem de responsividade — mobile (≤767px)                    27/08/2026
   --------------------------------------------------------------------------
   Medido em iPhone 390×844 antes desta folha:
     · coluna de leitura do post = 302px de 390 (34 caracteres por linha),
       porque o container de topo do Elementor recua 20px de cada lado e o
       .atc-container aninhado recua mais 24px — 88px de tela comidos;
     · 427 posts com <table>: larguras de 843 a 850px numa tela de 390, e como
       há ancestral com overflow a tabela é CORTADA, não rolável — metade do
       dado simplesmente não existe para quem lê no celular;
     · 298 posts com largura fixa em style inline, 4.681 com text-align:justify
       (que na coluna estreita abre rios de espaço entre palavras).

   O !important aqui vence estilo INLINE do conteúdo migrado do site antigo —
   nenhuma folha alcança inline de outro jeito. Não substitui controle nativo
   do Elementor: o padding do editor segue mandando no desktop.
   ========================================================================== */
@media (max-width: 767px) {

  /* 1 · Coluna de leitura — margem lateral se declara UMA vez.
        O .atc-container aninhado repetia o recuo do container que o envolve. */
  .e-con .e-con.atc-container { padding-left: 0; padding-right: 0; }

  /* 2 · Tabela do conteúdo editorial: rola dentro da própria caixa em vez de
        ser decepada. display:block cria uma tabela anônima interna que mede o
        conteúdo — é o que permite o overflow funcionar num <table>. */
  .elementor-widget-theme-post-content table,
  .elementor-widget-text-editor table,
  .prose table {
    display: block;
    width: auto !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .elementor-widget-theme-post-content table td,
  .elementor-widget-theme-post-content table th,
  .elementor-widget-text-editor table td,
  .elementor-widget-text-editor table th,
  .prose table td,
  .prose table th {
    min-width: 7rem;          /* sem isto a coluna espreme até uma letra por linha */
    word-break: normal;
  }

  /* 3 · Mídia do conteúdo nunca é mais larga que a coluna. */
  .elementor-widget-theme-post-content :is(img, iframe, video, embed, object, svg),
  .elementor-widget-text-editor :is(img, iframe, video, embed, object, svg),
  .prose :is(img, iframe, video, embed, object, svg) {
    max-width: 100% !important;
    height: auto;
  }
  .elementor-widget-theme-post-content iframe,
  .elementor-widget-text-editor iframe,
  .prose iframe { width: 100%; }

  /* 4 · Largura e recuo cravados em style inline pelo editor antigo. */
  .elementor-widget-theme-post-content [style*="width"],
  .elementor-widget-text-editor [style*="width"],
  .prose [style*="width"] { max-width: 100% !important; }

  .elementor-widget-theme-post-content [style*="padding-left"],
  .elementor-widget-text-editor [style*="padding-left"],
  .prose [style*="padding-left"] { padding-left: 0 !important; }

  .elementor-widget-theme-post-content [style*="padding-right"],
  .elementor-widget-text-editor [style*="padding-right"],
  .prose [style*="padding-right"] { padding-right: 0 !important; }

  /* 5 · Justificado em coluna estreita vira rio de espaço. */
  .elementor-widget-theme-post-content [style*="justify"],
  .elementor-widget-text-editor [style*="justify"],
  .prose [style*="justify"] { text-align: left !important; }

  /* 6 · Palavra longa (URL colada, nome composto) não empurra a coluna. */
  .elementor-widget-theme-post-content,
  .elementor-widget-text-editor,
  .prose { overflow-wrap: break-word; }
}

/* --- complementos medidos depois da primeira passada -------------------- */
@media (max-width: 767px) {

  /* 7 · Widget dentro de container flex não encolhe sozinho. O container do
        Elementor é flex-COLUMN, então a largura é o eixo cruzado: ali quem
        manda é o tamanho intrínseco do conteúdo, não min-width — uma tabela
        de planilha esticava o widget para 422px dentro de um container de
        350px, e a tabela media então 100% desses 422.

        Precisa de (0,5,0): a concorrente é o custom_css do próprio template
        de página — .elementor-182247 .elementor-element-1247f75 .prose
        {max-width:none} —, que é (0,4,0) e vence pela ordem, porque o CSS do
        Elementor sai inline no <head>, depois da folha do tema. Três .e-con
        ganham por especificidade, sem precisar de !important. E é width, não
        só max-width, que trava: resolve contra o container, não o conteúdo. */
  .e-con > .elementor-widget,
  .e-con > .e-con-inner > .elementor-widget { min-width: 0; }

  .e-con.e-con.e-con > .elementor-widget.elementor-widget-theme-post-content,
  .e-con.e-con.e-con > .elementor-widget.elementor-widget-text-editor,
  .e-con.e-con.e-con > .e-con-inner > .elementor-widget.elementor-widget-theme-post-content,
  .e-con.e-con.e-con > .e-con-inner > .elementor-widget.elementor-widget-text-editor {
    width: 100%;
    max-width: 100%;
  }

  /* 8 · Tabela colada de planilha vem aninhada em outra tabela, e cada nível
        aplica o seu font-size relativo: 16px → 14,4 → 11,52. Em /associados/
        são 169 células ilegíveis. Tamanho absoluto quebra a cascata. */
  .elementor-widget-theme-post-content table :is(td, th),
  .elementor-widget-text-editor table :is(td, th),
  .prose table :is(td, th) { font-size: 0.9375rem; }

  /* 9 · Alvo de toque: link solto dentro do texto corrido segue como está,
        mas botão e item de lista de navegação precisam de área tocável. */
  .elementor-button { min-height: 40px; }
}

/* --- correções por elemento, medidas em 390px --------------------------- */
@media (max-width: 767px) {

  /* 10 · Barra da Agenda do Controle dos subsites. O rótulo fixo
        "AGENDA DO CONTROLE" ocupa 235px dos 390 da tela e sobra 137px para o
        letreiro — o que aparece é "2026  02/0", data decepada e nenhum título
        de evento. No celular o rótulo sai e a faixa inteira vai para o
        letreiro, que já se explica sozinho (data + nome do evento).
        Um id por subsite: PNTP, MMDi-TC, Rede Integrar, Projetos, Boas Práticas
        e — desde 27/08 à noite — Clube de Benefícios, que só entrou aqui
        quando ganhou domínio próprio em clube.atricon.org.br. */
  .elementor-element-d643927 > :first-child,
  .elementor-element-9cc9b96 > :first-child,
  .elementor-element-d69451e > :first-child,
  .elementor-element-cff2d1f > :first-child,
  .elementor-element-a07889a > :first-child,
  .elementor-element-e3eed2b > :first-child { display: none; }

  .elementor-element-d643927 > :last-child,
  .elementor-element-9cc9b96 > :last-child,
  .elementor-element-d69451e > :last-child,
  .elementor-element-cff2d1f > :last-child,
  .elementor-element-a07889a > :last-child,
  .elementor-element-e3eed2b > :last-child { flex: 1 1 100%; width: 100%; }

  /* 11 · A linha do tempo do MMDi-TC (4bc425a, min-width:1120px) NÃO é
        defeito: o container que a envolve tem overflow-x:auto e ela rola de
        verdade no celular — medido, rolou 826px. Chequei porque ela aparece
        como "7 blocos de 168px numa tela de 390"; rolagem horizontal ali é
        deliberada, com trilho em gradiente. Não empilhar. */
}

/* Recuo do conteúdo aninhado — MEDIDO E DESCARTADO em 27/08/2026.
   Zerar o --padding-left do container de topo do .elementor aninhado dentro do
   widget de conteúdo rendeu +0px em 26 páginas: aqueles containers já vinham
   com recuo zero. O que ainda estreita a coluna são 22 a 24px no TERCEIRO
   nível, dentro do próprio conteúdo, onde o mesmo container costuma ser um
   bloco com fundo — mexer ali tira o respiro do bloco. E 306px numa tela de
   390 são 78% da largura, 35 a 39 caracteres por linha: está dentro do
   confortável para celular. Não perseguir esses 20px. */

/* --- vazamentos pontuais, medidos em 390px ------------------------------ */
@media (max-width: 767px) {

  /* 13 · Rede Integrar, container do CTA (16 páginas): três filhos somam
        392px numa faixa de 358 e o container está em nowrap, então o botão
        saía 66px para fora da tela. Deixar quebrar a linha resolve sem mexer
        em tamanho de nada. */
  .elementor-element-eecb7d4,
  .elementor-element-c1038f4 { flex-wrap: wrap; }

  /* 14 · Deslocamento lateral manual em coluna da estrutura antiga. Em
        /contatos/ o .elementor-widget-wrap tem margin-left:100px cravado para
        o desktop, sem versão de celular: 100 + 313 = 413px numa coluna de
        350, e o bloco de endereço saía pela direita. No celular a coluna é
        única — recuo lateral manual ali não tem função.
        A regra do Elementor é (0,4,0) e usa o shorthand margin junto das
        custom properties --e-column-margin-*; daí o .elementor repetido, para
        (0,5,0), e as duas formas zeradas. */
  .elementor.elementor .elementor-column > .elementor-widget-wrap.elementor-element-populated {
    --e-column-margin-left: 0px;
    --e-column-margin-right: 0px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* --- layout do template PHP do tema e tabelas fora do widget de conteúdo -- */
@media (max-width: 767px) {

  /* 15 · As listagens servidas pelo template PHP do tema (arquivo de
        categoria dos subsites, por exemplo) trazem
        style="display:grid;grid-template-columns:1fr 320px" INLINE, sem
        versão de celular. Em 342px de largura o 1fr resolve para 20px: a
        lista de notícias inteira ficava numa tira de vinte pixels ao lado de
        uma sidebar de 320. Empilha. O !important é para vencer o inline —
        nenhuma folha alcança style de outro jeito. */
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 320px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* 16 · Tabela que não está no widget de conteúdo — a de ranking do PNTP
        vive num bloco próprio (.atc-rank) e media 390px numa coluna de 350.
        Mesma receita da regra 2, agora para o resto da rede. */
  .elementor table,
  .mk table {
    display: block;
    width: auto !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .elementor table :is(td, th),
  .mk table :is(td, th) { min-width: 7rem; word-break: normal; }
}

/* --- redundância deliberada contra o <style> inline de 108 KB ------------ */
@media (max-width: 767px) {

  /* 17 · O wrapper de conteúdo do post e da página nasce `--flex-direction:row`
        (no desktop é conteúdo + coluna lateral) e só vira `column` numa
        @media que mora no <style> INLINE do Elementor — 108 KB no <head>, com
        a regra de desktop no byte 120.665 e a de celular no 129.343, 8,6 KB
        adiante. Se essa folha chegar incompleta ao aparelho, o wrapper fica em
        row: o bloco de autor e a foto vão para a mesma linha, e o texto do post
        e o rodapé saem da tela. Foi o defeito que o Thiago fotografou três
        vezes em 27/08 e que não se reproduz aqui — servidor e borda entregam a
        página inteira, medido 15 vezes.
        Estas duas linhas dizem a mesma coisa a partir de um ARQUIVO externo de
        14 KB. Redundância de propósito: se o inline falhar, o layout continua
        de pé. Quando tudo chega, o valor é idêntico e nada muda.

        Não basta redeclarar a custom property: a regra do Elementor é
        .elementor-182242 .elementor-element.elementor-element-7e0015d — (0,3,0)
        — e vence um seletor de (0,2,0). Aqui trava-se o `flex-direction` em si,
        com !important, que é imune a especificidade e a variável que não chegou.
        Medido antes de aplicar: os 8 containers dos três primeiros níveis do
        template de post JÁ são column no celular, então isto não muda layout
        nenhum — só garante que continue assim quando o inline falhar. */
  .elementor-location-single > .e-con,
  .elementor-location-single > .e-con > .e-con,
  .elementor-location-single > .e-con > .e-con > .e-con {
    flex-direction: column !important;
  }
}

/* ==========================================================================
   Cabeçalho — a marca encostava no menu                          31/08/2026
   --------------------------------------------------------------------------
   Reportado pelo Ederson. Medido em 1440px: o container da marca (b76bd2c)
   mede 156px e a imagem dentro dele mede 184px — o custom_css do cabeçalho
   força `width:auto; max-width:none !important` para fixar a altura em 48px,
   e com isso a imagem transborda 28px do próprio container. Como a linha é
   flex com gap de apenas 10px, o resultado é o item "Principal" começando em
   296 enquanto a marca só termina em 304: 8px de SOBREPOSIÇÃO, não de aperto.

   `width: fit-content` faz o container medir a imagem de verdade — é a mesma
   correção que já está registrada no projeto para container que precisa medir
   o próprio conteúdo dentro de uma linha flex.

   O gap sobe de 10 para 24px. Cheguei a pôr 40 e o menu perdeu 79px: o item
   "Agenda do Controle" encavalou no botão Associe-se, que passou a estourar
   35px da linha. Com 24 a marca ganha folga e o menu continua cabendo — a
   linha tem 1200px e o menu precisa de 906.
   ========================================================================== */
.elementor-141 .e-con-inner > .elementor-element.elementor-element-b76bd2c {
  width: fit-content !important;
  flex: 0 0 auto;
}
.elementor-141 .elementor-element.elementor-element-23ee269 > .e-con-inner {
  gap: 24px;
}

/* O menu não cabia na linha, e isso é ANTERIOR ao ajuste da marca: medido com
   o gap original de 10px, "Agenda do Controle" já invadia o botão Associe-se
   em 15px e o botão já estourava 31px da linha de 1200. Ninguém tinha visto
   porque a sobreposição cai no espaço vazio do botão.

   São 7 itens com 16px de recuo de cada lado — 224px só de respiro interno,
   num menu de 939px para ~870 disponíveis. Baixar para 10px devolve 84px, que
   é exatamente o que falta: marca 184 + menu 855 + botões 103 + os dois gaps
   de 24 fecham em 1190 de 1200. O texto dos itens não muda de tamanho. */
.elementor-141 .elementor-element.elementor-element-66ef13f .e-n-menu-title {
  padding-inline: 10px;
}

/* ==========================================================================
   Pedido de 16/09/2026, vindo de um leitor pelo grupo: lupa mais visível,
   revisão de responsividade e um modo de impressão. A lupa foi resolvida no
   próprio widget (template 141) — o controle "tamanho do ícone" do Elementor
   é PORCENTAGEM do botão, não px, e 20 virava 7,6px de glifo. Aqui ficam os
   outros dois.
   ========================================================================== */

/* O botão "Associe-se" SAÍA DA TELA entre 1024 e 1280px — 17px em 1024, 15 em
   1100, 12 em 1200, e zero em 1440. É a faixa de notebook, justamente onde
   está boa parte do público.

   A linha do cabeçalho é flex sem quebra, e os três filhos são marca (que não
   encolhe), menu e o grupo "lupa + Associe-se". Os dois últimos nascem
   `flex: 0 1 auto`, então o grupo da direita é espremido: mediu 104px quando
   precisa de 171, e o botão, que não encolhe, transbordou o próprio container
   (o pai media 52px com o botão em 103).

   Quem deve ceder espaço é o MENU, não o grupo de ações: em 1024 ele já está
   em hambúrguer e a caixa dele reservava 640px vazios. */
@media (max-width: 1366px) {
  .elementor-location-header .e-con-inner > .elementor-element:last-child {
    flex: 0 0 auto;
  }
  .elementor-location-header .e-con-inner > .elementor-element:nth-child(2) {
    min-width: 0;
  }
  .elementor-location-header a.elementor-button {
    white-space: nowrap;
  }
}

/* A linha de leitura da matéria passava de 90 caracteres. Medido com
   canvas.measureText (a conta largura÷meio-corpo mente, já custou uma rodada
   neste projeto): 77 caracteres em 1920 e em 1366, e **91 em 1024** — ali a
   coluna lateral empilha e o texto herda a largura toda, então encolher a
   janela PIORA a leitura. A régua do DESIGN.md é 60–70.

   `max-width` em ch resolve sem tocar no Elementor e sem media query: a
   coluna passa a medir o texto, não o container. 68ch dá ~68 caracteres em
   qualquer largura acima de ~800px e não muda nada no celular, onde a coluna
   já é mais estreita que isso. */
.elementor-widget-theme-post-content > .elementor-widget-container > *,
.elementor-widget-theme-post-content > * {
  max-width: 68ch;
}
.elementor-widget-theme-post-content > .elementor-widget-container > figure,
.elementor-widget-theme-post-content > .elementor-widget-container > .wp-block-image,
.elementor-widget-theme-post-content > .elementor-widget-container > table,
.elementor-widget-theme-post-content > .elementor-widget-container > .wp-block-embed {
  max-width: 100%;
}

/* ==========================================================================
   IMPRESSÃO
   O site não tinha folha de impressão nenhuma: em 2.586 regras carregadas
   havia UM bloco @media print, e ele vem do reset do Elementor. Imprimir uma
   matéria levava para o papel o cabeçalho fixo, o letreiro da agenda, o campo
   de busca, o menu, o aviso de cookies, a coluna "Mais recentes" e 481px de
   rodapé — antes do texto.

   O objetivo aqui é o documento, não a página: sai só o conteúdo, em preto
   sobre branco, com o endereço de cada link preservado para quem lê no papel.
   ========================================================================== */
@media print {
  /* o que é navegação, e não conteúdo */
  .elementor-location-header,
  .elementor-location-footer,
  .atc-navbar, .atc-utilbar, .atc-megafooter,
  .elementor-widget-search-form,
  .e-n-menu, .elementor-nav-menu,
  [class*="cookie-notice"], #cookie-notice,
  .pojo-a11y-toolbar, [class*="pojo-a11y"],
  .elementor-widget-loop-carousel, [class*="swiper"],
  .elementor-pagination, .e-load-more-anchor,
  .elementor-share-buttons, .addtoany_share_save_container {
    display: none !important;
  }

  /* a coluna lateral da matéria não é o documento */
  .elementor-widget-loop-grid:not(.elementor-widget-theme-post-content) {
    display: none !important;
  }

  /* o texto ocupa a folha */
  html, body { background: #fff !important; color: #000 !important; font-size: 11.5pt; }
  .e-con, .e-con-inner, .elementor-widget-container, .atc-container {
    width: auto !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
  }
  .elementor-widget-theme-post-content > *,
  .elementor-widget-theme-post-content > .elementor-widget-container > * { max-width: none; }

  /* legibilidade no papel */
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 13pt; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; color: #000 !important; }
  p, li, blockquote, figure, table, img { break-inside: avoid; page-break-inside: avoid; }
  img { max-width: 100% !important; height: auto !important; }
  table { width: 100% !important; border-collapse: collapse; }
  table td, table th { border: 1px solid #999; padding: 4px 6px; }

  /* no papel o link precisa dizer para onde vai — só os do texto */
  .elementor-widget-theme-post-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt; word-break: break-all; color: #444;
  }
  a { color: #000 !important; text-decoration: underline; }

  @page { margin: 1.6cm; }
}