/* ============================================================================
   Divisão de seções — padrão único do projeto
   ----------------------------------------------------------------------------
   Antes, cada tela separava seus blocos do próprio jeito: um <hr> fino aqui,
   só um <h3> ali, uma borda tracejada acolá. Em telas longas (configurações do
   "Sobre", formulário público) o resultado era um paredão contínuo, sem pista
   de onde um assunto termina e o outro começa.

   O padrão é um cabeçalho de bloco com três sinais somados — espaço em branco
   generoso acima, uma régua horizontal e um marcador colorido antes do título.
   Redundância proposital: só espaçamento é fraco em tela cheia de conteúdo, e
   só cor não serve para quem não a distingue (WCAG 1.4.1).

   Carregado por base.html e base_publico.html, ou seja, vale para as telas
   internas e para as páginas públicas.

   Como usar:
   - `.mc-secoes` num container: todo <h3> filho vira cabeçalho de bloco
     automaticamente (o primeiro não ganha régua nem espaço extra).
   - `.mc-subsecao` + `.mc-subsecao-titulo`: divisão interna, mais leve, para
     agrupar campos dentro de um mesmo cartão.
   ========================================================================== */

/* `h3:not(.card-title)`: nessas telas o <h3> é sempre um título de bloco —
   o .card-title fica de fora porque é o cabeçalho de um cartão, que já tem
   moldura própria. O seletor é por descendente (e não filho direto) porque os
   blocos costumam vir dentro de uma grade `.row > .col-*`. */
.mc-secoes h3:not(.card-title),
.mc-secao-titulo {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 2.5rem 0 1.15rem;
  padding-top: 1.75rem;
  border-top: 2px solid var(--tblr-border-color);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* O primeiro bloco abre a área: não precisa se separar de nada acima — vale
   tanto para o <h3> solto quanto para o que está dentro da primeira grade. */
.mc-secoes > h3:first-child,
.mc-secoes > *:first-child h3:not(.card-title),
.mc-secao-titulo:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Marcador colorido à esquerda do título — a "âncora" que o olho encontra ao
   percorrer a página de cima a baixo. */
.mc-secoes h3:not(.card-title)::before,
.mc-secao-titulo::before {
  content: "";
  flex-shrink: 0;
  width: .3rem;
  height: 1.15rem;
  border-radius: .25rem;
  background: var(--tblr-primary);
}

/* Linha de apoio logo abaixo do título, quando existir. */
.mc-secao-descricao {
  margin: -.7rem 0 1.15rem;
  color: var(--tblr-secondary-color, var(--tblr-secondary));
  font-size: .875rem;
}

/* ---- Subseção: mesma ideia em escala menor, para blocos dentro de um cartão
   (ex.: "Endereço" dentro de "Dados do Solicitante"). ---- */
.mc-subsecao {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--tblr-border-color);
}
.mc-subsecao-titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.mc-subsecao-titulo::before {
  content: "";
  flex-shrink: 0;
  width: .25rem;
  height: .95rem;
  border-radius: .2rem;
  background: var(--tblr-primary);
  opacity: .55;
}

/* ---- Cartões que representam uma seção inteira (formulário público) ----
   O cabeçalho ganha peso e uma faixa superior colorida, para a quebra entre
   um cartão e o seguinte ficar evidente mesmo com pouco espaço entre eles. */
.mc-card-secao { border-top: 3px solid var(--tblr-primary); }
.mc-card-secao > .card-header {
  background: var(--tblr-bg-surface-secondary, rgba(127, 127, 127, .035));
  border-bottom: 1px solid var(--tblr-border-color);
  padding-top: .9rem;
  padding-bottom: .9rem;
}
.mc-card-secao > .card-header .card-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
/* Numeração automática das seções: dá noção de progresso ("2 de 4") sem
   exigir que o template saiba a posição de cada cartão. */
.mc-secoes-numeradas { counter-reset: mc-secao; }
.mc-secoes-numeradas .mc-card-secao { counter-increment: mc-secao; }
.mc-secoes-numeradas .mc-card-secao > .card-header .card-title::before {
  content: counter(mc-secao);
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: .45rem;
  background: var(--tblr-primary-lt);
  color: var(--tblr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 700;
}

/* ---- Cabeçalho das páginas públicas (marca + ferramentas de acessibilidade)
   ----------------------------------------------------------------------------
   Markup em sesuite/_mc_topo_publico.html — vale para as 5 páginas públicas
   do microcrédito. Morava inline em templates/base_publico.html; passou pra
   cá para poder ser reaproveitado de verdade (mesmas classes, não uma cópia)
   na pré-visualização ao vivo da tela Configurações gerais, que estende
   base.html — os dois layouts carregam este arquivo (ver o topo dele).

   Três variantes de fundo (`--mc-topo-publico--*`, escolhidas em
   Configurações gerais → Identidade e logo, campo `topo_estilo_fundo`):
   nasceu só "transparente", que é o motivo do cabeçalho ficar "escondido" —
   sem plano de fundo próprio, ele se misturava com a página e desaparecia
   sob o peso do degradê da seção logo abaixo. "Cartão" (padrão atual) dá a
   ele a mesma superfície elevada de qualquer cartão do sistema; "cor
   primária" vira uma faixa colorida no estilo banner, usando a versão
   negativa da logo quando ela existir. */
.mc-topo-publico {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  flex-wrap: wrap; padding: .25rem 0 1rem; transition: background-color .2s ease, box-shadow .2s ease;
}
.mc-topo-marca { display: flex; align-items: center; gap: .85rem; min-width: 0; }
/* Espaço para DUAS logos (as duas configuráveis em Configurações gerais e
   as duas opcionais): elas ficam lado a lado, separadas por um filete
   vertical discreto, e o bloco inteiro só existe se pelo menos uma
   estiver configurada. */
.mc-topo-logos { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; min-width: 0; }
.mc-topo-logos .mc-topo-logo + .mc-topo-logo {
  padding-left: .75rem; border-left: 1px solid var(--tblr-border-color);
}
/* Altura configurável (Configurações gerais → Identidade e logo): escala
   suavemente com a largura da tela em vez de um salto brusco de breakpoint —
   o mínimo (2.5rem) garante legibilidade no celular, o valor configurado é o
   teto em telas largas. max-width subiu de 220px para 420px junto da altura
   máxima configurável (ver LOGO_ALTURA_TOPO_MAX em sesuite/models.py): uma
   logo bem mais larga que alta (brasão + nome do órgão, caso real de
   produção) tinha a altura configurada silenciosamente cortada pela largura
   — a pessoa arrastava o controle de altura e a logo simplesmente não
   crescia mais depois de um certo ponto. flex-shrink já cuida de encolher a
   logo de novo se faltar espaço (nome do órgão comprido, tela estreita), daí
   dar mais folga aqui não quebrar telas menores. */
.mc-topo-logo {
  max-height: clamp(2.25rem, 7vw, var(--mc-logo-altura, 84px));
  max-width: 420px; object-fit: contain; flex-shrink: 1; min-width: 0;
  transition: max-height .2s ease;
}
.mc-topo-identificacao { min-width: 0; }
.mc-topo-orgao {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
  color: var(--tblr-secondary-color, var(--tblr-secondary));
}
/* A linha do órgão é um link pro site oficial da Prefeitura (ver
   _mc_topo_publico.html) — reset do sublinhado/cursor padrão de <a>, cor já
   vem de .mc-topo-orgao acima (inclusive nas variantes de fundo mais abaixo). */
.mc-topo-orgao-link { display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; }
.mc-topo-orgao-link:hover { text-decoration: underline; }
.mc-topo-orgao-seta { opacity: .7; flex-shrink: 0; }
.mc-topo-nome {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
  font-family: var(--mc-fonte-titulos, inherit);
}
/* Sem a linha do órgão (campo deixado em branco), o nome da página ocupa
   o espaço das duas linhas em vez de deixar um vão no cabeçalho. */
.mc-topo-nome-sozinho { font-size: 1.2rem; line-height: 1.3; }
.mc-topo-ferramentas { display: flex; align-items: center; gap: .25rem; }
.mc-topo-ferramenta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 .45rem; border-radius: .45rem;
  border: 1px solid var(--tblr-border-color); background: transparent;
  color: var(--tblr-secondary-color, var(--tblr-secondary));
  font-size: .8125rem; font-weight: 600; line-height: 1; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mc-topo-ferramenta:hover { background: var(--tblr-primary-lt); color: var(--tblr-primary); border-color: var(--tblr-primary); }
.mc-topo-ferramenta[aria-pressed="true"] { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; }
/* Alternador (hambúrguer) das ferramentas de acessibilidade — só existe
   visualmente abaixo de 576px (ver o bloco @media mais abaixo); acima disso
   as 5 ferramentas continuam sempre visíveis em linha, como sempre foram. */
.mc-topo-ferramentas-alternador { display: none; }

/* Variante "Cartão" (padrão): plano de fundo próprio, elevado, com uma faixa
   fina (3px) na cor de destaque embaixo — um acento discreto que ajuda a
   reconhecer a marca mesmo num relance. É essa separação (fundo + sombra +
   acento) que resolve o cabeçalho "sumindo" contra o degradê da seção
   seguinte. No tema claro, --tblr-bg-surface é praticamente igual ao fundo
   da página — só a sombra (bem sutil) e o filete amarelo não bastavam para
   o cartão se destacar, ficando "solto" sobre o fundo branco. A borda de
   1px ao redor dá um contorno definido em qualquer tema; a sombra mais
   forte reforça a elevação. border-bottom vem depois de propósito, para
   sobrescrever só o lado de baixo da borda geral com o acento mais grosso. */
.mc-topo-publico--card {
  background: var(--tblr-bg-surface, var(--tblr-body-bg));
  border-radius: .9rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--tblr-border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 10px 26px -14px rgba(0, 0, 0, .2);
  border-bottom: 3px solid var(--mc-cor-destaque, var(--tblr-yellow, #f59f00));
}
/* Variante "Faixa com a cor primária": banner cheio, mesma linguagem do
   hero/rodapé (degradê da cor primária para a secundária), texto e
   ferramentas em branco. A logo normal ganha um chip branco automático
   quando não existe uma versão negativa configurada — mesmo recurso já
   usado no rodapé (.mc-rodape-logo) para a logo colorida não sumir sobre
   fundo saturado. */
.mc-topo-publico--cor_primaria {
  background: linear-gradient(135deg, var(--tblr-primary), var(--mc-cor-secundaria, color-mix(in srgb, var(--tblr-primary) 55%, #6f42c1)));
  border-radius: .9rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  color: #fff;
  border-bottom: 3px solid var(--mc-cor-destaque, #f59f00);
}
.mc-topo-publico--cor_primaria .mc-topo-orgao { color: rgba(255, 255, 255, .8); }
.mc-topo-publico--cor_primaria .mc-topo-nome { color: #fff; }
.mc-topo-publico--cor_primaria .mc-topo-logos .mc-topo-logo + .mc-topo-logo { border-left-color: rgba(255, 255, 255, .3); }
.mc-topo-publico--cor_primaria .mc-topo-logo.mc-topo-logo-chip {
  background: #fff; border-radius: .4rem; padding: .3rem .45rem;
}
.mc-topo-publico--cor_primaria .mc-topo-ferramenta {
  border-color: rgba(255, 255, 255, .4); color: #fff;
}
.mc-topo-publico--cor_primaria .mc-topo-ferramenta:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.mc-topo-publico--cor_primaria .mc-topo-ferramenta[aria-pressed="true"] { background: #fff; color: var(--tblr-primary); border-color: #fff; }

/* Duas logos + identificação + alternador não cabem lado a lado em tela
   estreita. Antes disto era um flex de 2 itens (.mc-topo-marca inteiro vs.
   o alternador) com flex-wrap: como o texto do título sozinho (largura
   "hipotética", sem quebrar linha) já era maior que a tela, o algoritmo de
   quebra de linha do flexbox jogava o ALTERNADOR INTEIRO pra uma segunda
   linha — sobrando um vão vazio ao lado do ícone de menu, com o título
   espremido ao lado das logos lá em cima.

   Aqui vira uma grade de 2 colunas x 2 linhas: logos e alternador SEMPRE
   na mesma primeira linha (uma grade não "quebra" um item pra outra linha
   pela largura hipotética do vizinho, só flexbox faz isso), e a
   identificação (órgão + nome da página) ganha a LARGURA INTEIRA do
   cabeçalho numa segunda linha — em vez de espremida ao lado das logos.
   .mc-topo-marca vira `display: contents`: ele deixa de gerar caixa
   própria e os filhos dele (logos, identificação) passam a ser itens
   diretos da grade, sem mexer no HTML do parcial. */
@media (max-width: 575.98px) {
  .mc-topo-publico {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "logos hamb" "titulo titulo";
    align-items: center;
    row-gap: .4rem;
    column-gap: .75rem;
    /* Margem de segurança mesmo na variante "Transparente" (sem cartão/faixa
       própria) — antes dependia só do gutter do .container-xl por baixo, que
       numa tela estreita deixava a logo quase encostada na borda da janela. */
    padding-left: .5rem;
    padding-right: .5rem;
  }
  .mc-topo-marca { display: contents; }
  /* min-height igual ao do alternador (2.75rem): sem isso, a caixa das logos
     rende mais baixa que o botão de hambúrguer (a logo raramente enche os
     40px de max-height da página) — align-items: center ainda alinha os dois
     pelo meio, mas com alturas tão diferentes o resultado parecia "torto" em
     vez de nivelado. Com a mesma altura de caixa, centralizar os dois vira
     também alinhar as bordas, que é o que o olho espera ver. */
  .mc-topo-logos { grid-area: logos; gap: .5rem; min-height: 2.75rem; }
  .mc-topo-logos .mc-topo-logo + .mc-topo-logo { padding-left: .5rem; }
  .mc-topo-identificacao { grid-area: titulo; }
  .mc-topo-publico--card, .mc-topo-publico--cor_primaria { padding: .85rem 1rem; border-radius: .75rem; }
  /* Sem órgão E sem nome de página (só a página "Sobre" alcança isso, com o
     campo de órgão em branco e o interruptor "Exibir nome da página"
     desligado — ver _mc_topo_publico.html): .mc-topo-identificacao existe no
     DOM mas fica sem nenhum filho visível. Diferente do gap do flexbox
     (só conta entre itens que existem), o row-gap de uma grid explícita é
     desenhado entre as linhas declaradas em grid-template-areas mesmo que uma
     delas fique vazia — por isso remover só o CONTEÚDO não bastaria; aqui a
     própria linha "titulo" some do layout.

     Isso por si só não bastava: uma vez que a área nomeada "titulo" deixa de
     existir no grid-template-areas acima, o item com grid-area: titulo (o
     próprio .mc-topo-identificacao, vazio) para de casar com ela — e uma
     grid não simplesmente descarta um item sem área correspondente, ela cai
     no posicionamento automático, criando uma SEGUNDA linha implícita só pra
     ele. Mesmo vazia (sem filhos), essa linha ainda ocupa a altura de uma
     linha de texto normal, e é essa altura fantasma sobrando embaixo da
     primeira linha (logos + alternador) que empurrava os dois pro topo do
     cabeçalho em vez de centralizados — display: none tira o item da árvore
     do grid, sem segunda linha nenhuma para reservar espaço. */
  .mc-topo-publico--sem-identificacao { grid-template-areas: "logos hamb"; row-gap: 0; }
  .mc-topo-publico--sem-identificacao .mc-topo-identificacao { display: none; }

  /* Ferramentas de acessibilidade viram um menu hambúrguer: 5 botões sempre
     visíveis competiam por espaço com a logo/identificação numa tela
     estreita. O alternador abre/fecha via JS embutido no próprio parcial
     (sesuite/_mc_topo_publico.html); os 5 botões continuam os MESMOS
     elementos com os MESMOS ids (contrato com o script de acessibilidade em
     base_publico.html) — só ficam ocultos até o alternador abrir. */
  .mc-topo-ferramentas-alternador { grid-area: hamb; display: inline-flex; min-width: 2.75rem; height: 2.75rem; }
  /* Sem área nomeada de propósito: fechado (display: none), o painel nem
     entra na grade, então não sobra uma terceira linha vazia com gap
     indevido embaixo do título. Aberto, a grade cria essa linha extra
     sozinha (auto) e grid-column o estica pelas 2 colunas. */
  .mc-topo-ferramentas {
    display: none; grid-column: 1 / -1; flex-wrap: wrap; justify-content: space-between;
    gap: .35rem; margin-top: .15rem;
  }
  .mc-topo-ferramentas.mc-topo-ferramentas--aberta { display: flex; }
  .mc-topo-ferramentas .mc-topo-ferramenta { flex: 1 1 18%; min-width: 2.75rem; height: 2.75rem; }
}
@media print {
  .mc-topo-publico--card, .mc-topo-publico--cor_primaria { background: none; box-shadow: none; border: 0; color: #000; }
  .mc-topo-publico--cor_primaria .mc-topo-nome, .mc-topo-publico--cor_primaria .mc-topo-orgao { color: #000; }
  .mc-topo-ferramentas { display: none; }
}

/* ---- Faixa de abertura das páginas públicas de conteúdo ----
   Mesma linguagem do hero da página "Sobre o programa" (gradiente da cor
   primária), em versão simples: título, linha de apoio, metadados e ações.
   Sem ela, o título ficava colado no cabeçalho e sem nenhum peso visual, e a
   página parecia começar no meio. Usada pelo aviso de privacidade e pela
   consulta de solicitação. */
.mc-hero-publico {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.75rem;
  padding: 2rem 1.5rem;
  border-radius: .9rem;
  background: linear-gradient(135deg, var(--tblr-primary), var(--mc-cor-secundaria, color-mix(in srgb, var(--tblr-primary) 55%, #6f42c1)));
  color: #fff;
  text-align: center;
}
/* Círculos decorativos — mesmo enfeite do hero do "Sobre", atrás do texto. */
.mc-hero-publico::before,
.mc-hero-publico::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.mc-hero-publico::before { width: 18rem; height: 18rem; right: -6rem; top: -8rem; background: rgba(255, 255, 255, .08); }
.mc-hero-publico::after { width: 10rem; height: 10rem; left: -4rem; bottom: -5rem; background: rgba(255, 255, 255, .06); }
.mc-hero-publico > * { position: relative; }
.mc-hero-titulo {
  font-size: clamp(1.6rem, 4.5vw, 2.35rem);
  font-weight: 700; letter-spacing: -.02em; margin-bottom: .35rem;
  font-family: var(--mc-fonte-titulos, inherit);
}
.mc-hero-subtitulo { font-size: 1.05rem; opacity: .95; margin-bottom: .6rem; font-family: var(--mc-fonte-texto, inherit); }
.mc-hero-meta {
  display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap;
  font-size: .8125rem; opacity: .85;
}
.mc-hero-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.15rem; }
/* Botões claros sobre o fundo colorido — contraste alto sem depender da cor
   do tema. */
.mc-hero-acoes .btn {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.mc-hero-acoes .btn:hover { background: #fff; border-color: #fff; color: var(--tblr-primary); }
@media (max-width: 575.98px) {
  .mc-hero-publico { padding: 1.5rem 1.1rem; margin-bottom: 1.25rem; border-radius: .75rem; }
  .mc-hero-subtitulo { font-size: .95rem; }
  .mc-hero-acoes { flex-direction: column; }
  .mc-hero-acoes .btn { width: 100%; min-height: 44px; }
}
/* No papel, o fundo colorido só gasta tinta — o texto vira preto sobre branco. */
@media print {
  .mc-hero-publico { background: none; color: #000; padding: 0; margin-bottom: 1rem; }
  .mc-hero-publico::before, .mc-hero-publico::after { display: none; }
  .mc-hero-acoes { display: none; }
}

/* ---- Rodapé das páginas públicas (markup em sesuite/_mc_rodape_publico.html)
   Faixa colorida que fecha a página, com marca, atalhos e contato. ---- */
.mc-rodape-publico {
  margin: 2.5rem 0 0;
  padding: 1.75rem 1.25rem 1.25rem;
  border-radius: .9rem .9rem 0 0;
  background: linear-gradient(135deg, var(--tblr-primary), var(--mc-cor-secundaria, color-mix(in srgb, var(--tblr-primary) 55%, #6f42c1)));
  color: #fff;
}
.mc-rodape-grid { display: grid; gap: 1.5rem; }
/* As duas logos configuráveis (as mesmas do topo) lado a lado — cada uma no
   próprio quadro branco, porque o filete divisório do topo sumiria no fundo
   colorido daqui. */
.mc-rodape-logos { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mc-rodape-logo {
  max-height: 52px; max-width: 170px; object-fit: contain;
  /* A logo é colorida sobre fundo claro; no fundo azul ela some. O quadro
     branco a mantém legível sem precisar de uma segunda arte. */
  background: #fff; border-radius: .5rem; padding: .35rem .5rem;
}
.mc-rodape-nome { font-weight: 700; font-size: 1.05rem; line-height: 1.25; font-family: var(--mc-fonte-titulos, inherit); }
.mc-rodape-orgao { font-size: .8125rem; opacity: .85; margin-top: .15rem; }
.mc-rodape-titulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  opacity: .8; margin: 0 0 .6rem;
}
/* min-width: 0 é o que permite a coluna encolher abaixo do e-mail de
   contato (o texto sem espaços mais comprido do rodapé): sem ele, um item
   de grid herda min-width: auto e o e-mail empurra a coluna "Fale com a
   gente" mais larga que a fração (fr) reservada pra ela, desalinhando as
   três colunas do rodapé. O overflow-wrap no link quebra o texto dentro da
   coluna se ainda faltar espaço mesmo com a coluna no tamanho certo. */
.mc-rodape-bloco { min-width: 0; }
.mc-rodape-bloco ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.mc-rodape-bloco a {
  /* 2.25rem de altura: alvo de toque confortável na lista do celular. */
  display: inline-flex; align-items: center; min-height: 2.25rem;
  color: #fff; text-decoration: none; font-size: .9375rem; opacity: .92;
  overflow-wrap: anywhere;
}
.mc-rodape-bloco a:hover { opacity: 1; text-decoration: underline; }
.mc-rodape-legal {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: .8125rem; opacity: .85; line-height: 1.55;
}
.mc-rodape-assinatura { margin-top: .75rem; font-size: .8125rem; opacity: .7; }
@media (min-width: 768px) {
  .mc-rodape-publico { padding: 2.25rem 2rem 1.5rem; }
  /* Quatro colunas: marca + "Serviços" + "Institucional" + "Fale com a
     gente". É o rodapé inteiro — ele é o mesmo em toda página pública, não
     ganha nem perde blocos conforme a tela (ver a templatetag
     `rodape_publico`). Entre 768px e 1099px a marca ocupa a linha inteira
     sozinha e os três blocos de links dividem a linha de baixo (ficariam
     apertados demais em 4 colunas nessa faixa); só acima de 1100px é que
     cabem as 4 colunas lado a lado. */
  .mc-rodape-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .mc-rodape-marca { grid-column: 1 / -1; }
  .mc-rodape-bloco a { min-height: 0; padding: .15rem 0; font-size: .875rem; }
}
@media (min-width: 1100px) {
  .mc-rodape-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .mc-rodape-marca { grid-column: auto; }
}
@media print { .mc-rodape-publico { display: none; } }

@media (max-width: 767.98px) {
  .mc-secoes h3:not(.card-title),
  .mc-secao-titulo { margin-top: 1.75rem; padding-top: 1.25rem; }
}