/* Sobrescritas por largura. Só o que muda — o resto herda. */

/* Abaixo disto a canaleta não cabe ao lado do texto e vira uma linha acima. */
@media (max-width: 1000px){
  .colunas{grid-template-columns:1fr; gap:var(--v-2)}
  .canaleta{
    position:static;
    padding:0 0 var(--v-1);
    border-bottom:1px solid var(--risco);
  }
  .canaleta:empty{display:none}

  .contato-in{grid-template-columns:1fr; gap:var(--v-4)}
}

@media (max-width: 860px){
  .rodape-in{grid-template-columns:1fr 1fr}
  .rodape-col:first-child{grid-column:1 / -1}
}

/* Menu em telefone: o botão aparece e a navegação vira lista sob o cabeçalho. */
@media (max-width: 760px){
  .menu-btn{display:block}

  .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--papel);
    border-bottom:1px solid var(--risco);
    padding:var(--v-2) var(--v-3) var(--v-3);
    z-index:40;
  }
  .nav.aberto{display:flex}
  .nav a{padding:12px 0; border-bottom:1px solid var(--risco)}
  .nav a[aria-current]{border-bottom-color:var(--marca)}
  .nav-contato{
    margin-top:var(--v-2);
    text-align:center;
    padding:12px 14px !important;
  }

  .topo{position:relative}

  h1{font-size:1.75rem}
  h2{font-size:1.3125rem}

  .secao{padding:var(--v-4) 0}
  .abertura{padding:var(--v-4) 0 var(--v-3)}

  .faixa{padding:0 var(--v-2)}

  .campo-dupla{grid-template-columns:1fr; gap:0}

  .rodape-in{grid-template-columns:1fr; gap:var(--v-3)}
  .rodape-base{flex-direction:column; align-items:flex-start}
  .rodape-base p:last-child{margin-left:0}
}

/* O SVG do diagrama fica ilegível abaixo desta largura: entra a versão em texto. */
@media (max-width: 780px){
  .diagrama svg{display:none}
  .diagrama-txt{display:block}
}