/* ══════════════════════════════════════════════════
   MOBILE — Revista M&T
   Camada final (depois de site.css + pages.css).
   Breakpoints alinhados ao template: 760 / 1080 / 1520 / 1700.
   ══════════════════════════════════════════════════ */

/* Foco visível (teclado e leitores) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-i:focus-visible{
  outline:2px solid var(--gold-lt);
  outline-offset:2px;
}
a,button{-webkit-tap-highlight-color:rgba(200,40,26,.18)}

/* Imagens e mídia nunca estouram a tela */
img,video{max-width:100%}
iframe{max-width:100%}
table{max-width:100%}
.corpo img{height:auto}

/* Home-top empilhado (<1700 já some o rail; <=1080 o externo entra no fluxo) */
@media (max-width:1080px){
  .home-top__ext .s-externo,
  .home-top__ext .s-externo-open{
    width:min(300px,100%);
    height:auto;
    aspect-ratio:300/250;
    max-width:100%;
  }
}

/* ── Tablet / abaixo de 1080: hamburger + 1 coluna ── */
@media (max-width:1080px){
  /* pages.css força overflow:visible p/ expand desktop — no mobile isso vaza */
  .band-topo,.band-h,.side,.cols,.wrap,.rail,.home-top,
  .home-top__main,.home-top__ext{
    overflow-x:hidden !important;
    overflow-x:clip !important;
  }
  .home-top,.home-top__main,.home-top__ext{overflow-y:visible !important}

  /* Home-top: hero em cima, externo 300×250 abaixo, sem competir */
  .home-top{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"main" "ext" !important;
    width:100%;
    max-width:none;
    padding:0 16px 28px;
    column-gap:0;
    row-gap:0;
  }
  .home-top__ext{
    width:min(300px,100%) !important;
    max-width:100%;
    justify-self:center;
    margin-top:24px;
    margin-bottom:8px;
    padding-top:20px;
    border-top:1px solid var(--rule);
  }
  .home-top__ext .s-externo,
  .home-top__ext .ad-wrap{margin:0 auto}
  .ad-expand-panel,
  .ad-open-btn{display:none !important}

  /* Nav: barra compacta + gaveta */
  #menu-principal{z-index:8600}
  .nav-in{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:10px;
    min-height:52px;
    padding:6px 0;
  }
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    min-width:44px;
    padding:8px 14px;
    background:transparent;
    border:1px solid #3A3A3A;
    color:#fff;
    font-family:var(--cond);
    font-size:16px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    cursor:pointer;
  }
  .nav-toggle[aria-expanded="true"]{border-color:var(--red);background:var(--red)}
  .nav-toggle-bars{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:18px;
  }
  .nav-toggle-bars span{
    display:block;
    height:2px;
    background:#fff;
    border-radius:1px;
  }
  .nav-an-m{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:8px 18px;
    background:var(--gold);
    color:var(--ink) !important;
    font-family:var(--cond);
    font-size:16px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
    margin-left:auto;
  }
  .nav-an-m:hover{background:var(--gold-lt);color:var(--ink) !important}

  .nav-panel{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(400px,88vw);
    max-width:100%;
    background:var(--ink);
    z-index:8700;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(110%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:-16px 0 40px rgba(0,0,0,.45);
    padding:0 0 32px;
  }
  body.nav-open .nav-panel{transform:none}
  .nav-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 18px 16px;
    border-bottom:3px solid var(--red);
    position:sticky;
    top:0;
    background:var(--ink);
    z-index:2;
  }
  .nav-panel-title{
    font-family:var(--cond);
    font-size:18px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#fff;
  }
  .nav-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    min-width:44px;
    padding:8px 14px;
    background:transparent;
    border:1px solid #3A3A3A;
    color:#BEBEBE;
    font-family:var(--cond);
    font-size:14px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    cursor:pointer;
  }
  .nav-close:hover{background:var(--red);border-color:var(--red);color:#fff}

  .nav-panel .nav-i{
    display:flex;
    flex-wrap:wrap;
    white-space:normal;
    min-height:48px;
    padding:14px 20px;
    border-bottom:1px solid #232323;
    margin:0;
    width:100%;
  }
  .nav-panel .nav-an{
    margin-left:0 !important;
    background:var(--gold) !important;
    color:var(--ink) !important;
  }
  .nav-panel .nav-drop{
    position:static;
    display:none;
    width:100%;
    min-width:0;
    border:none;
    border-top:1px solid #2A2A2A;
    box-shadow:none;
    background:#161616;
    margin:10px -20px -14px;
    padding:0;
  }
  .nav-panel .nav-i.is-open .nav-drop{display:block}
  .nav-panel .nav-drop a{
    padding:14px 20px 14px 28px;
    min-height:44px;
  }
  .nav-panel .nav-i em{margin-left:auto;transition:transform .2s}
  .nav-panel .nav-i.is-open em{transform:rotate(180deg)}
  .nav-panel-util{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:12px;
    padding:8px 0 0;
    border-top:1px solid #2A2A2A;
  }
  .nav-panel-util a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:12px 20px;
    font-family:var(--cond);
    font-size:15px;
    font-weight:600;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#8A8A8A;
    border-bottom:1px solid #1E1E1E;
  }
  .nav-panel-util a:hover{color:#fff}
  .util-busca--drawer{
    display:flex;
    width:calc(100% - 40px);
    margin:12px 20px 16px;
    border-color:#3A3A3A;
    background:rgba(255,255,255,.04);
    min-height:48px;
  }
  .util-busca--drawer input{
    flex:1;
    width:auto;
    min-width:0;
    font-size:16px;
    padding:0 14px;
    min-height:48px;
    color:#E4E4E4;
  }
  .util-busca--drawer input::placeholder{color:#6A6A6A}
  .util-busca--drawer button{
    font-size:14px;
    padding:0 18px;
    min-height:48px;
  }
  .social--drawer{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:4px 20px 16px;
  }
  .social--drawer a{
    width:44px;
    height:44px;
    border-color:#3A3A3A;
    color:#8A8A8A;
  }
  .social--drawer a:hover{
    background:var(--red);
    border-color:var(--red);
    color:#fff;
  }

  .nav-scrim{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.62);
    z-index:8650;
  }
  .nav-scrim.is-on{display:block}
  body.nav-open{overflow:hidden}

  /* Header / util */
  .util-in{gap:10px;padding:8px 0}
  .util-nav{display:none}
  .head-in{gap:18px;padding:18px 0;align-items:flex-start}
  .head-r{width:100%;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}
  .util-busca--head{min-width:0;max-width:none}
  .head-r .util-busca--head input{width:100%;min-width:0;flex:1}
  .head-r .head-note{text-align:left}
  .btn-nl{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:12px 22px;
  }
  .social a{width:44px;height:44px}
  .side-social-icons a{width:44px;height:44px}

  /* Banners no fluxo */
  .band-h,.band-slim,.band-topo{padding-left:0;padding-right:0}
  .rail-fb{padding-bottom:28px}
  .ad-wrap,.ad-wrap .slot{max-width:100%}

  /* Grids → coluna fluida */
  .g3,.g2,.g4,.exc-g,.pn-g,.mn-g,.cols,.cols2,.art-cols,.ls-cols,
  .ed-in,.fmt-g,.ct-g,.eq-g,.perfil,.dica-g{grid-template-columns:1fr}
  .ml-g{grid-template-columns:1fr}
  .ed-grid{grid-template-columns:repeat(2,1fr)}
  .ac-g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gl-g,.vd-g,.era-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-nums-g{grid-template-columns:repeat(2,1fr)}
  .geo{grid-template-columns:repeat(3,1fr)}
  .at-g,.rg{grid-template-columns:repeat(2,1fr)}
  .fc{grid-template-columns:1fr}
  .nw-grid{grid-template-columns:1fr}
  .dest,.ed-dest,.vd-dest{grid-template-columns:1fr}
  .mn-in{grid-template-columns:1fr}

  /* Tipografia / títulos */
  .ph-h1,.art-h1,.mk-h1,.cal-h1,.ct-h1,.pn-h1,.op-h1,.bs-h1,.era-h1,.mn-h1,.ed-t{
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  .ph-h1{font-size:36px}
  .art-h1{font-size:32px}
  .sec h2,.sec-h h2,.sec-h a{white-space:normal}

  /* Cards / listas */
  .lanc-t,.exc-t,.nc-t,.nl-t,.pn-t,.mc-t,.side-dest-t{overflow-wrap:anywhere}
  .nl{grid-template-columns:120px minmax(0,1fr)}
  .it{grid-template-columns:120px minmax(0,1fr)}
  .rs{grid-template-columns:120px minmax(0,1fr)}
  .oc{grid-template-columns:72px minmax(0,1fr)}

  /* Touch targets */
  .pill,.ano,.ef,.mf,.bf,.pg,.tag,.share-btn,.bt,.sb,.btn,
  .cal-lang a,.nw-tab,.e4-campo button,.bs-campo button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .hero-n{width:44px;height:44px}
  .hd{
    width:36px;
    height:44px;
    background:transparent;
    position:relative;
  }
  .hd::after{
    content:'';
    position:absolute;
    left:0;right:0;top:50%;
    height:4px;
    margin-top:-2px;
    background:rgba(255,255,255,.28);
  }
  .hd.on{width:44px}
  .hd.on::after{background:var(--red)}

  /* Forms: 16px evita zoom iOS */
  input,select,textarea,button{
    font-size:16px;
    max-width:100%;
  }
  .fc-form .campo input,.fc-form .campo select,.fc-form .campo textarea,
  .nw-form input[type=text],.nw-form input[type=email],.nw-form select,
  .bs-campo input,.e4-campo input,.nlb input,.ac-busca input,.busca input{
    font-size:16px;
    min-height:48px;
  }
  .fc-form .duplo,.nw-form .duplo{grid-template-columns:1fr}
  .fc-btn,.nw-btn,.nlb button,.gate-btn,.btn-nl{
    min-height:48px;
    width:100%;
    justify-content:center;
  }
  .head-r{grid-template-columns:1fr}
  .head-r .btn-nl{width:100%;max-width:100%}
  .util-busca--head{flex:1 1 100%;max-width:100%;width:100%}
  .foot-s a{width:44px;height:44px}
  .art-share .share-btn{font-size:13px;padding:10px 14px}

  /* Paywall / artigo */
  .corpo{font-size:18px;line-height:1.75;max-width:100%}
  .gate-box{padding:28px 20px}
  .art-share{margin-left:0;width:100%}
  .pwm{padding:12px;align-items:flex-end}
  .pwm-dialog{max-height:88vh;padding:24px 16px 18px}
  .pwm-actions{flex-direction:column;align-items:stretch}
  .pwm-btn,.pwm-btn-sec{width:100%;text-align:center}
  .pfl{right:8px;left:8px;bottom:8px;width:auto;padding:18px 16px 14px}
  .pfl-duplo{grid-template-columns:1fr}

  /* Min-widths que estouram 375px */
  .ac-cta h3,.mk-cta h3,.cal-hero-txt{min-width:0}
  .busca{margin-left:0;width:100%;min-width:0}
  .ac-busca,.ac-busca input{width:100%;max-width:100%}

  /* Lightbox / player */
  .lb-nav,.lb-x,.pl-x{min-width:44px;min-height:44px}
  .lb-mid{padding:16px 8px}
  .pl{padding:16px}

  /* Edição / capa */
  .capa{margin:0 auto}
  .ed-c{white-space:normal;min-width:0}
  .ed-i{align-items:flex-start}

  /* Overlay acervo: no toque o card já é o link */
  .ac-ov{pointer-events:none}
}

@media (max-width:760px){
  .wrap{max-width:calc(100% - 24px)}
  .band-h{padding-left:12px;padding-right:12px}
  .home-top{padding-left:12px;padding-right:12px;padding-bottom:24px}

  .brand-row{gap:12px}
  .brand-logo img{height:64px;max-width:min(240px,72vw)}
  .brand-slogan{font-size:16px;line-height:1.35;max-width:100%}
  .head-note{font-size:13px;line-height:1.45}
  .foot-tagline{font-size:15px;line-height:1.4}
  .util-date{font-size:13px;line-height:1.4}

  .hero-s{height:min(460px,92vw)}
  .hero-c{padding:22px 16px 52px;max-width:100%}
  .hero-s h2{font-size:1.45rem}
  .hero-s p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  .g3,.g2,.g4,.exc-g,.foot,.ml-g,.gl-g,.vd-g,.era-g,.ed-grid,
  .fmt-g,.ct-g,.eq-g,.at-g,.rg,.mk-nums-g,.geo,
  .ac-g{grid-template-columns:1fr}
  .ac-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

  .nl,.it,.mc,.rs{grid-template-columns:1fr}
  .nl-i,.it-i,.rs-i{height:180px}
  .mc-i{min-height:180px}

  .ph-h1{font-size:28px}
  .ph-desc,.ct-sub,.cal-sub,.mk-sub,.pn-sub,.era-sub,.mn-sub{font-size:18px}
  .art-h1{font-size:26px}
  .art-olho{font-size:18px}
  .ls-top h1{font-size:30px}
  .mk-h1,.cal-h1,.ct-h1,.pn-h1,.era-h1,.mn-h1,.bs-h1,.op-h1{font-size:28px;letter-spacing:-.4px}
  .pn-dest-t{font-size:24px}
  .ed-t{font-size:26px}
  .foot-m{font-size:40px}
  .foot-logo{height:92px;max-width:min(300px,78vw)}

  .mn{padding:36px 0}
  .mn-head h2{font-size:22px;letter-spacing:1.8px}
  .mn-flag{font-size:12px;padding:4px 10px}

  .filtros,.anos,.era-filtros,.mn-f,.bs-f{
    gap:8px;
  }
  .pill,.ano,.ef,.mf,.bf{padding:10px 14px;font-size:14px}

  .fc-form{padding:24px 18px}
  .fc-form .lgpd input{width:22px;height:22px}
  .info{padding:24px 18px}
  .mk-cta,.ac-cta,.dica,.tl,.pn-dest{padding:24px 18px;gap:18px}
  .gate-box h3{font-size:22px}
  .gate-btn{font-size:16px;padding:16px 20px}

  .bs-campo,.e4-campo{flex-direction:column}
  .bs-campo input,.e4-campo input{border-right:2px solid #3A3A3A;border-bottom:none;width:100%}
  .bs-campo button,.e4-campo button{width:100%}

  .cal-t{display:none}
  .cal-cards{display:block}
  .cal-lang{margin-left:0}

  .lb-nav{width:44px;height:44px}
  .lb-p{left:4px}.lb-x2{right:4px}
  .lb-top{padding:14px 14px}
  .lb-leg{padding:14px}

  .op-meta{margin-left:0;text-align:left}
  .op-corpo>p:first-of-type::first-letter{font-size:56px}

  .share-bar,.art-share,.op-share{gap:8px}
  .share-btn,.sb{flex:1 1 calc(50% - 8px);justify-content:center;text-align:center}

  .pn-tipo{border-right:none;border-bottom:1px solid var(--rule-soft);flex-direction:row;text-align:left}
  #secao-painel-edicao .pn-i,#lista-painel-edicao .pn-i{grid-template-columns:1fr}

  .vd-dest-b,.ed-dest-b{padding:24px 18px}
  .vd-play{width:64px;height:64px}

  .trilha .voltar{margin-left:0;width:100%}

  .geo{grid-template-columns:repeat(2,1fr)}
}

/* iPhone SE / 375 e menores */
@media (max-width:390px){
  .brand-slogan{font-size:15px}
  .hero-s h2{font-size:1.32rem}
  .ac-g{gap:10px}
  .ph-h1,.mk-h1,.cal-h1,.ct-h1,.era-h1{font-size:26px}
  .nav-panel{width:min(100vw,100%)}
}

/* Prefers reduced motion: gaveta sem slide longo */
@media (prefers-reduced-motion:reduce){
  .nav-panel{transition:none}
}

/* ══════════════════════════════════════════════════
   Revisão mobile 27/10 — leitura no celular
   ══════════════════════════════════════════════════ */

/* Até 1080: alvos de toque e barras presas que cobriam conteúdo */
@media (max-width:1080px){
  /* Ícones de compartilhar (34px) e fechar do paywall: alvo mínimo de 44px */
  .share-ic-b,.share-ic--sm .share-ic-b{width:44px;height:44px}
  .pwm-close{min-width:44px;min-height:44px;top:4px;right:4px}
  .pwm-lgpd input,.nw-form .lgpd input,.fc-form .lgpd input,.nlm-lgpd input{width:22px;height:22px;margin-top:0}
  .nlm-close{min-width:44px;min-height:44px;top:2px;right:2px}
  .nlm-lgpd{font-size:14px}

  /* Popup "Queremos te conhecer melhor": 16px evita zoom do iOS; botões com 44px */
  .pfl-campo input,.pfl-campo select{font-size:16px;min-height:44px}
  .pfl-fechar{min-width:44px;min-height:44px;top:2px;right:2px}
  .pfl-btn,.pfl-btn-sec{min-height:44px}
  .pfl-opcao{min-height:44px}

  /* Links "Ver todas", trilha, contatos e paginação com área de toque */
  .sec-m{display:inline-flex;align-items:center;min-height:44px}
  .trilha a{display:inline-flex;align-items:center;min-height:40px}
  .trilha{row-gap:0}
  .eq-l a{min-height:44px}
  .gate-nota a{display:inline-block;padding:11px 6px}
  .pg{min-width:44px;justify-content:center}

  /* Acervo: o "nav" genérico (sticky, fundo escuro) prendia década e anos no topo
     e cobria as capas ao rolar. No celular ficam no fluxo, anos numa linha rolável. */
  nav.rx-dec,nav.rx-anos{position:static;z-index:auto;background:transparent;border-bottom-color:var(--ink)}
  nav.rx-anos{border-bottom:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:10px}
  nav.rx-anos a{flex:none;min-height:44px;display:inline-flex;align-items:center}
  nav.rx-dec a{min-height:44px}
  .rx-ac-head > *{min-width:0}

  /* Leitor da revista: dica não estoura a tela */
  .rx-hint,.rx-load{white-space:normal;width:max-content;max-width:calc(100% - 24px);text-align:center;line-height:1.35}

  /* Barra de leitura da matéria: botões com 40px */
  .rx-bar-nav a,.rx-bar-nav .off{width:40px;height:40px}
  .rx-bar-ed{min-height:40px}

  /* Capa flutuante da edição: botão fechar com área de toque de 44px
     e recolhe enquanto o leitor rola para baixo (assets/js/widget-edicao.js) */
  .wed{transition:transform .25s ease,opacity .25s ease}
  .wed.wed--recolhido{transform:translateX(calc(-100% - 16px));opacity:0;pointer-events:none}
  .wed-x::before{content:'';position:absolute;inset:-6px}
}

/* Celular: cabeçalho mais baixo para a notícia aparecer mais cedo */
@media (max-width:760px){
  /* Barra da data some (a busca e os links úteis estão no menu) */
  .util{display:none}
  .head-in{padding:12px 0 14px;gap:12px}
  .brand-logo img{height:56px}
  .head-r{row-gap:6px}
  .head-r .util-busca--head{display:none}
  .head-r .btn-nl{height:46px;min-height:46px}
  .head-r .head-note{text-align:center;font-size:13px}

  /* Rodapé em duas colunas: menos rolagem e links com área de toque */
  .foot{grid-template-columns:1fr 1fr;gap:28px 18px}
  .foot > #rodape-sobre{grid-column:1 / -1}
  .foot-l{gap:0}
  .foot-l a{display:flex;align-items:center;min-height:42px;font-size:16px;line-height:1.25}
  .foot-end-info a{display:inline-block;padding:8px 0}

  /* Trilha numa linha só quando cabe: "Voltar" ao lado, não numa linha própria */
  .trilha{padding-top:14px;padding-bottom:4px}
  .trilha .voltar{margin-left:auto;width:auto}

  /* Capa flutuante menor no celular (cobre menos texto) */
  /* widget-edicao.css carrega depois deste arquivo: seletor mais forte */
  aside.wed{width:60px}
  aside.wed .wed-a img{max-height:82px}

  /* Notícia: chapéu legível */
  .art-cat{font-size:14px}
}

/* Tablet (761 a 1080): busca e newsletter lado a lado, cabeçalho mais baixo */
@media (min-width:761px) and (max-width:1080px){
  .head-in{padding:16px 0;gap:14px}
  .head-r{grid-template-columns:minmax(0,1fr) auto}
  .head-r .btn-nl{width:auto;max-width:none}
  .head-r .head-note{grid-column:1 / -1;text-align:right}
}

/* Rodapé no celular: links com contraste melhor sobre o fundo escuro */
@media (max-width:760px){
  .foot-l a{color:#9A9A9A}
  .foot-e a{display:inline-block;padding:12px 0}
}

/* Toque confortável em links pequenos (até 1080) */
@media (max-width:1080px){
  .rx-meta a{display:inline-flex;align-items:center;min-height:44px}
  .info-v a{display:inline-block;padding:6px 0}
  /* Pontos do carrossel: barra fina, mas área de toque de 44px */
  .nc-dots{gap:4px;margin-top:4px}
  .nc-dot{height:44px;width:34px;background:transparent;position:relative}
  .nc-dot.on{width:48px;background:transparent}
  .nc-dot::after{content:'';position:absolute;left:4px;right:4px;top:50%;height:4px;margin-top:-2px;background:var(--rule);transition:background .2s}
  .nc-dot.on::after{background:var(--red)}
  .nc-carousel--exc .nc-dots{padding-top:0}
}

/* Home, Tijolos posições 1 e 2: no celular a arte é a versão 300×250 (_MOBILE),
   mas a caixa herdava 100% × 450px do desktop e a coluna lateral alargava para 540px,
   cortando a peça e o bloco "Siga nas redes sociais" à direita. */
@media (max-width:1080px){
  .cols > .side{min-width:0;max-width:100%}
  .side .banner-tijolos-match{max-width:100%}
  .side .banner-tijolos-match .ad-wrap--tj{width:min(300px,100%);max-width:100%}
  .side .banner-tijolos-match .tj{width:min(300px,100%);height:auto;aspect-ratio:300/250}
}

/* Corpo de notícia/matéria: tabela larga rola dentro do texto; vídeo do YouTube em 16:9 */
@media (max-width:1080px){
  .corpo table{display:block;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .corpo iframe[src*="youtube"],.corpo iframe[src*="youtu.be"],.corpo iframe[src*="vimeo"]{height:auto;aspect-ratio:16/9}
  .corpo pre{white-space:pre-wrap;overflow-wrap:anywhere}
  .corpo a{overflow-wrap:anywhere}
}

/* Gaveta do menu: o #menu-principal (sticky, z 8600) cria contexto de empilhamento,
   então o painel (z 8700 dentro dele) ficava ABAIXO do fundo escuro (z 8650, no body):
   menu escurecido e os toques caíam no fundo. O fundo passa para baixo do menu. */
@media (max-width:1080px){
  .nav-scrim{z-index:8590}
  /* Itens da gaveta não encolhem (o submenu aberto ficava por cima dos itens seguintes) */
  .nav-panel > *{flex-shrink:0}
}