/* ==========================================================================
   SIA.AI Design System v2 — Layout público
   --------------------------------------------------------------------------
   Telas sem sessão: login, recuperação de senha, sessão expirada e páginas de
   erro. É o par de app-shell.css — os dois nunca são carregados juntos.

   Referência visual vigente: `7a` (desktop) e `7b` (notebook e mobile) do
   Design System v2. `7a` substituiu `6a` no inventário.

   Composição, em um markup só (o painel institucional é sempre o mesmo
   componente; o que muda é o CSS):

     mobile    uma coluna. Faixa institucional escura no topo — marca,
               mensagem, texto de apoio e o traço âmbar —, e o formulário
               logo abaixo em superfície clara, subindo sobre a faixa por um
               canto superior arredondado. É a transição de `7b`.
     tablet    a mesma faixa, com mais respiro.
     desktop   duas colunas dentro do shell: institucional (52,4%) e conteúdo
               (47,6%), com rodapé.
     notebook  mesma composição de desktop, com a coluna institucional
               estreita (300px) e o grafismo recortado.

   O shell tem medida controlada e permanece centralizado na viewport conforme
   7a/7b. Margem externa, borda, raio e sombra funcionam apenas como acabamento.

   Todo valor de cor vem de tokens `--sia-v2-*`; todo seletor é prefixado
   `sia-v2-`. Nenhuma animação: o grafismo é estático.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Escala pública
   A escala interna foi calibrada para densidade de operação — dezenas de
   linhas na mesma tela. Aqui há um formulário só, e aquela escala aparece
   miniaturizada num monitor grande. As variáveis abaixo derivam dos mesmos
   tokens, um degrau acima, e sobem junto com a largura da janela.

   Os degraus reproduzem a tipografia da referência: mensagem institucional
   21px no mobile (`7b`), 22px no notebook (`7b`, adaptação deliberada dos 24px da referência) e 38px no monitor grande
   (`7a`); título do formulário 18px, 19px e 26px nos mesmos pontos.
   -------------------------------------------------------------------------- */
.sia-v2-public {
  --sia-v2-public-shell-width: none;
  --sia-v2-public-shell-height: 100vh;
  --sia-v2-public-shell-padding: var(--sia-v2-space-0);
  --sia-v2-public-shell-rows: auto minmax(0, 1fr);
  --sia-v2-public-shell-columns: minmax(0, 1fr);
  --sia-v2-public-panel-width: 384px;
  --sia-v2-public-control-height: var(--sia-v2-touch-target);
  --sia-v2-public-control-font-size: var(--sia-v2-font-size-card-title);
  --sia-v2-public-title-size: calc(var(--sia-v2-font-size-page-title) - 4px);
  --sia-v2-public-lead-size: var(--sia-v2-font-size-card-title);
  --sia-v2-public-statement-size: calc(var(--sia-v2-font-size-page-title) - 1px);
  --sia-v2-public-support-size: var(--sia-v2-font-size-secondary);
  /* A mensagem quebra por `<br>`, como na referência. A medida só existe
     para impedir que o texto de apoio corra a coluna inteira. */
  --sia-v2-public-statement-measure: 30ch;

  min-height: 100vh;
  background-color: var(--sia-v2-surface-app);
}

/* --------------------------------------------------------------------------
   Estrutura
   `__layout` é a viewport; `__shell` é a composição. No mobile o shell sangra
   de borda a borda: um cartão estreito dentro de outro cartão só encolheria
   os campos sem dar nada em troca.
   -------------------------------------------------------------------------- */
.sia-v2-public__layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sia-v2-public-shell-padding);
  overflow-x: hidden;
}

.sia-v2-public__shell {
  display: grid;
  grid-template-columns: var(--sia-v2-public-shell-columns);
  grid-template-rows: var(--sia-v2-public-shell-rows);
  width: 100%;
  max-width: var(--sia-v2-public-shell-width);
  min-height: var(--sia-v2-public-shell-height);
  background-color: var(--sia-v2-surface);
}

/* --------------------------------------------------------------------------
   Painel institucional (marca e contexto)
   Existe em todos os formatos — no mobile como faixa superior, no desktop
   como coluna. Esconder a marca inteira no telefone deixaria a tela sem
   nenhuma identificação antes do formulário.
   -------------------------------------------------------------------------- */
.sia-v2-public__aside {
  /* Foco do gradiente de profundidade — o mesmo ponto que a referência usa
     para clarear o painel atrás do nó do grafismo. */
  --sia-v2-public-depth-x: 78%;
  --sia-v2-public-depth-y: 68%;

  /* Sem `width`: o painel é célula do grid e ocupa a faixa/coluna inteira.
     Quem define a proporção é `--sia-v2-public-shell-columns`. */
  display: flex;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--sia-v2-space-3);
  /* O respiro inferior maior é o que a lâmina do formulário ocupa quando
     sobe sobre a faixa, no mobile. */
  padding: 20px var(--sia-v2-gutter) 36px;
  background-color: var(--sia-v2-surface-nav);
  /* Profundidade da referência: o painel não é chapado, tem um foco
     levemente mais claro atrás do nó do grafismo. */
  background-image: radial-gradient(
    120% 90% at var(--sia-v2-public-depth-x) var(--sia-v2-public-depth-y),
    color-mix(in srgb, var(--sia-v2-brand-green-bright) 7%, var(--sia-v2-surface-nav)) 0%,
    var(--sia-v2-surface-nav) 62%
  );
  color: var(--sia-v2-text-on-nav);
}

/* Grafismo de conexão e fluxo — SVG decorativo, inline no componente
   institucional. É a linguagem de operação conectada: curvas finas que
   convergem para um nó, não um plano de fundo genérico. Nada brilha, nada
   gira e nada sugere "inteligência artificial".

   Por que SVG e não gradiente: a referência `7a` desenha oito curvas de
   Bézier com trajetórias próprias. `linear-gradient` só produz retas
   infinitas — a versão anterior riscava o painel de ponta a ponta e não
   tinha fidelidade. A geometria agora vem dos mesmos paths da referência.

   Cada formato tem o seu desenho, porque a referência reduz a composição por
   breakpoint e não apenas a escala: 8 curvas no desktop, 5 no notebook e 3 no
   mobile, com o campo de pontos só no desktop e os nós diminuindo junto. */
.sia-v2-public__graphic {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Prefixado com `.sia-v2-public` pelo mesmo motivo do botão primário e do
   botão de senha: o reset de fundações (`.sia-v2-body svg { display: block }`)
   alcança qualquer <svg> e pesa mais que a classe do componente. Sem essa
   margem de especificidade os três desenhos aparecem empilhados de uma vez. */
.sia-v2-public .sia-v2-public__graphic-svg {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
}

/* Mobile é o padrão: três curvas e só o marcador âmbar. */
.sia-v2-public .sia-v2-public__graphic-svg--mobile {
  display: block;
}

.sia-v2-public__aside-top,
.sia-v2-public__aside-bottom,
.sia-v2-public__aside-footer {
  position: relative;
  z-index: var(--sia-v2-z-sticky);
}

.sia-v2-public__brand {
  display: flex;
  align-items: center;
  gap: var(--sia-v2-space-3);
}

.sia-v2-public__brand-logo {
  height: 28px;
  width: auto;
}

.sia-v2-public__brand-divider {
  width: 1px;
  height: 18px;
  background-color: var(--sia-v2-border-nav-strong);
}

/* O lockup do produto é mono e verde na referência — é o que separa a marca
   da empresa do nome da plataforma sem precisar de um segundo logo. */
.sia-v2-public__product {
  font-family: var(--sia-v2-font-mono);
  font-size: var(--sia-v2-font-size-caption);
  font-weight: var(--sia-v2-font-weight-semibold);
  letter-spacing: var(--sia-v2-letter-spacing-section);
  color: var(--sia-v2-brand-green-bright);
}

/* Mensagem institucional — bloco solto no eixo vertical, sem cartão ou cápsula.
   A medida é do parágrafo, nunca do bloco: limitar o bloco encolheria junto a
   descrição, que tem escala própria. */
.sia-v2-public__statement-block {
  width: 100%;
}

.sia-v2-public__statement {
  font-size: var(--sia-v2-public-statement-size);
  font-weight: var(--sia-v2-font-weight-bold);
  line-height: 1.18;
  letter-spacing: var(--sia-v2-letter-spacing-tight);
  color: var(--sia-v2-text-on-nav-strong);
}

/* A segunda oração recebe o verde da marca: é a única cor de destaque no
   texto do painel, e é ela que fecha a frase da referência. */
.sia-v2-public__statement-accent {
  color: var(--sia-v2-brand-green-bright);
}

/* Linha de apoio no mesmo eixo tipográfico da mensagem. Presente em todos os
   formatos: no mobile a referência `7b` mantém as duas frases na faixa. */
.sia-v2-public__statement-support {
  max-width: var(--sia-v2-public-statement-measure);
  margin-top: var(--sia-v2-space-3);
  font-size: var(--sia-v2-public-support-size);
  font-weight: var(--sia-v2-font-weight-regular);
  line-height: 1.6;
  color: var(--sia-v2-text-on-nav);
}

/* Traço âmbar — o único ornamento do painel. Fecha o bloco de texto e é o
   mesmo elemento nos três formatos, só mudando de largura. */
.sia-v2-public__statement-rule {
  display: block;
  width: 26px;
  height: 2px;
  margin-top: var(--sia-v2-space-4);
  background-color: var(--sia-v2-brand-yellow);
}

.sia-v2-public__aside-footer {
  display: none;
  padding-top: var(--sia-v2-space-6);
  font-size: 11.5px;
  line-height: var(--sia-v2-line-height-tight);
  color: var(--sia-v2-text-on-nav-muted);
}

/* --------------------------------------------------------------------------
   Área do formulário / mensagem
   -------------------------------------------------------------------------- */
.sia-v2-public__main {
  /* No mobile o conteúdo começa logo abaixo da faixa institucional; centrar
     na altura restante deixaria o formulário boiando no meio da tela. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--sia-v2-space-6) var(--sia-v2-gutter);
  background-color: var(--sia-v2-surface);
}

.sia-v2-public__panel {
  width: 100%;
  max-width: var(--sia-v2-public-panel-width);
  margin-inline: auto;
}

.sia-v2-public__title {
  font-size: var(--sia-v2-public-title-size);
  font-weight: var(--sia-v2-font-weight-bold);
  line-height: var(--sia-v2-line-height-tight);
  letter-spacing: var(--sia-v2-letter-spacing-tight);
  color: var(--sia-v2-text);
}

.sia-v2-public__description {
  margin-top: var(--sia-v2-space-2);
  font-size: var(--sia-v2-public-lead-size);
  line-height: var(--sia-v2-line-height-base);
  color: var(--sia-v2-text-muted);
}

.sia-v2-public__form {
  display: flex;
  flex-direction: column;
  gap: var(--sia-v2-space-4);
  margin-top: var(--sia-v2-space-5);
}

.sia-v2-public__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sia-v2-space-3);
  margin-top: var(--sia-v2-space-5);
}

.sia-v2-public__footer {
  width: 100%;
  max-width: var(--sia-v2-public-panel-width);
  margin-inline: auto;
  margin-top: var(--sia-v2-space-6);
  padding-top: var(--sia-v2-space-4);
  border-top: var(--sia-v2-border-width) solid var(--sia-v2-border-subtle);
  font-size: var(--sia-v2-font-size-caption);
  color: var(--sia-v2-text-subtle);
}

/* --------------------------------------------------------------------------
   Controles na escala pública
   Campos e botões desta tela seguem `--sia-v2-public-control-*`. Sem isso o
   formulário fica com a altura da operação (36px) numa tela que tem só ele.
   -------------------------------------------------------------------------- */
.sia-v2-public__panel .sia-v2-input {
  min-height: var(--sia-v2-public-control-height);
  font-size: var(--sia-v2-public-control-font-size);
}

.sia-v2-public__panel .sia-v2-button {
  min-height: var(--sia-v2-public-control-height);
  font-size: var(--sia-v2-public-control-font-size);
  font-weight: var(--sia-v2-font-weight-semibold);
}

.sia-v2-public__panel .sia-v2-field__label {
  font-size: var(--sia-v2-font-size-body);
}

/* Cor do rótulo da ação principal.
   O reset de formulário do v2 (`.sia-v2-body button { color: inherit }`)
   alcança qualquer <button> e tem especificidade maior que a classe do
   componente: sem a regra abaixo o rótulo herdaria a cor de texto do corpo e
   apareceria escuro sobre o verde. A cor vem do token de texto sobre ação —
   nunca de herança de body, de link ou do botão genérico. Fundo de hover,
   active, foco e disabled continuam com o componente. */
.sia-v2-public .sia-v2-button--primary,
.sia-v2-public .sia-v2-button--primary:hover,
.sia-v2-public .sia-v2-button--primary:active {
  color: var(--sia-v2-text-on-brand);
}

/* --------------------------------------------------------------------------
   Rótulo de contexto da página de erro
   Estado nunca depende só da cor: o código vem acompanhado do nome.
   -------------------------------------------------------------------------- */
.sia-v2-public__eyebrow {
  display: block;
  margin-bottom: var(--sia-v2-space-2);
  font-family: var(--sia-v2-font-mono);
  font-size: var(--sia-v2-font-size-micro);
  font-weight: var(--sia-v2-font-weight-semibold);
  letter-spacing: var(--sia-v2-letter-spacing-label);
  text-transform: uppercase;
  color: var(--sia-v2-text-subtle);
}

/* --------------------------------------------------------------------------
   Campo de senha com botão de exibição
   O botão é irmão do input, dentro de um container relativo: o texto do campo
   nunca passa por baixo do rótulo do botão.
   -------------------------------------------------------------------------- */
.sia-v2-password {
  position: relative;
  display: flex;
  align-items: center;
}

.sia-v2-password .sia-v2-input {
  padding-inline-end: 88px;
}

/* Prefixado com `.sia-v2-public` pelo mesmo motivo do botão primário: o reset
   de formulário sobrepõe fonte e cor de qualquer <button> sem essa margem de
   especificidade. */
.sia-v2-public .sia-v2-password__toggle {
  position: absolute;
  inset-inline-end: var(--sia-v2-space-1);
  min-height: var(--sia-v2-control-height-sm);
  padding: 0 var(--sia-v2-space-2);
  border: 0;
  border-radius: var(--sia-v2-radius-tag);
  background-color: transparent;
  font-family: var(--sia-v2-font-sans);
  font-size: var(--sia-v2-font-size-secondary);
  font-weight: var(--sia-v2-font-weight-semibold);
  color: var(--sia-v2-text-muted);
}

.sia-v2-public .sia-v2-password__toggle:hover {
  background-color: var(--sia-v2-surface-sunken);
  color: var(--sia-v2-text);
}

.sia-v2-public .sia-v2-password__toggle[aria-pressed="true"] {
  color: var(--sia-v2-text);
}

/* --------------------------------------------------------------------------
   Rodapé do campo — rótulo e link auxiliar na mesma linha
   -------------------------------------------------------------------------- */
.sia-v2-public__field-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sia-v2-space-2);
}

.sia-v2-public__field-link {
  font-size: var(--sia-v2-font-size-secondary);
  font-weight: var(--sia-v2-font-weight-semibold);
}

/* --------------------------------------------------------------------------
   Lista de regras de senha (help_text do Django)
   -------------------------------------------------------------------------- */
.sia-v2-public__help {
  font-size: var(--sia-v2-font-size-secondary);
  line-height: var(--sia-v2-line-height-base);
  color: var(--sia-v2-text-subtle);
}

.sia-v2-public__help ul {
  padding-inline-start: var(--sia-v2-space-4);
  list-style: disc;
}

/* --------------------------------------------------------------------------
   Mobile — alvo de toque confortável e nenhuma rolagem horizontal
   Altura e fonte dos controles já vêm da escala pública; aqui sobra o que é
   específico do toque e a transição da referência `7b`: a lâmina do
   formulário sobe sobre a faixa institucional por um canto arredondado.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .sia-v2-public .sia-v2-password__toggle {
    min-height: var(--sia-v2-hit-target);
  }

  .sia-v2-public__main {
    position: relative;
    z-index: var(--sia-v2-z-sticky);
    margin-top: -14px;
    border-start-start-radius: 18px;
    border-start-end-radius: 18px;
    padding-top: var(--sia-v2-space-5);
  }
}

/* --------------------------------------------------------------------------
   Tablet — o shell vira contêiner: margem externa discreta, borda, raio e
   sombra sobre a superfície neutra do app. A faixa institucional continua no
   topo, com mais respiro.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .sia-v2-public {
    --sia-v2-public-shell-height: calc(100vh - 2 * var(--sia-v2-space-5));
    --sia-v2-public-shell-padding: var(--sia-v2-space-5);
    --sia-v2-public-title-size: calc(var(--sia-v2-font-size-page-title) + 2px);
    --sia-v2-public-statement-size: calc(var(--sia-v2-font-size-page-title) + 4px);
    --sia-v2-public-support-size: var(--sia-v2-font-size-card-title);
    --sia-v2-public-statement-measure: 42ch;
  }

  .sia-v2-public__shell {
    border: var(--sia-v2-border-width) solid var(--sia-v2-border);
    border-radius: var(--sia-v2-radius-card);
    box-shadow: var(--sia-v2-shadow-overlay);
    overflow: hidden;
  }

  .sia-v2-public__aside {
    padding: var(--sia-v2-space-5) var(--sia-v2-space-6);
  }

  .sia-v2-public__statement-rule {
    width: 30px;
    margin-top: var(--sia-v2-space-5);
  }
}

/* --------------------------------------------------------------------------
   Desktop — duas colunas dentro do mesmo shell
   A coluna institucional fica com 52,4% e a de conteúdo com 47,6%, como na
   referência `7a`. O shell possui medida controlada e fica centralizado; a margem
   externa é apenas acabamento.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .sia-v2-public {
    /* A composição tem medida: `7a` é um card de 1360 × 660. Deixar o shell
       crescer com o monitor esticava a coluna do formulário e afastava a
       proporção institucional da referência. O limite abaixo é a medida de
       `7a`; a margem externa continua discreta e o conjunto fica centrado. */
    --sia-v2-public-shell-width: 1360px;
    --sia-v2-public-shell-height: min(
      calc(100vh - 2 * var(--sia-v2-space-6)),
      660px
    );
    --sia-v2-public-shell-padding: var(--sia-v2-space-6) 2%;
    --sia-v2-public-shell-rows: minmax(0, 1fr);
    --sia-v2-public-shell-columns: var(--sia-v2-public-aside-width) minmax(0, 1fr);
    /* `flex:1.1` contra `flex:1` em `7a`. */
    --sia-v2-public-aside-width: 52.4%;
    --sia-v2-public-panel-width: 384px;
    --sia-v2-public-control-height: var(--sia-v2-hit-target);
    --sia-v2-public-title-size: calc(var(--sia-v2-font-size-page-title) + 4px);
    --sia-v2-public-statement-size: calc(var(--sia-v2-font-size-page-title) + 12px);
    --sia-v2-public-statement-measure: 38ch;
  }

  /* Acabamento, não moldura: some a sombra de sobreposição, que dava ao shell
     a leitura de caixa flutuante. Borda e raio bastam para fechar a forma. */
  .sia-v2-public__shell {
    box-shadow: var(--sia-v2-shadow-none);
  }

  .sia-v2-public__aside {
    gap: 0;
    padding: var(--sia-v2-space-7) 56px;
  }

  /* Acima de 1024px o desenho do desktop entra no lugar do mobile. Entre
     1024 e 1439 o bloco do notebook troca de novo, logo abaixo. */
  .sia-v2-public .sia-v2-public__graphic-svg--mobile {
    display: none;
  }

  .sia-v2-public .sia-v2-public__graphic-svg--desktop {
    display: block;
  }

  /* Título no terço central esquerdo: o bloco cresce e centraliza no eixo
     vertical, entre a marca no topo e o rodapé na base. */
  .sia-v2-public__aside-bottom {
    display: flex;
    flex: 1;
    align-items: center;
    width: 100%;
  }

  .sia-v2-public__statement-rule {
    width: 34px;
    margin-top: var(--sia-v2-space-6);
  }

  .sia-v2-public__aside-footer {
    display: block;
  }

  /* Coluna inteira: aqui o conteúdo se equilibra no eixo vertical, ao lado do
     painel, em vez de encostar no topo. */
  .sia-v2-public__main {
    justify-content: center;
    padding: var(--sia-v2-space-7) 40px;
  }
}

/* --------------------------------------------------------------------------
   Notebook (1280 × 720 é o caso de referência `7b`)
   `7b` é um card compacto de 780px — 300px de coluna institucional e o resto
   para o formulário —, centrado na viewport. Deixar o shell em ~96% da janela
   abria uma área clara vazia à direita e deixava o formulário perdido nela.
   O respiro cai o suficiente para o formulário caber inteiro — botão, links e
   rodapé — em 720px de altura, sem exigir rolagem.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1439px) {
  .sia-v2-public {
    --sia-v2-public-shell-width: 780px;
    --sia-v2-public-shell-height: min(
      calc(100vh - 2 * var(--sia-v2-space-6)),
      520px
    );
    --sia-v2-public-aside-width: 300px;
    /* Card de 780px: o formulário acompanha a proporção da referência. */
    --sia-v2-public-panel-width: 320px;
    --sia-v2-public-title-size: calc(var(--sia-v2-font-size-page-title) - 3px);
    /* A referência usa 24px numa coluna de 244px úteis; aqui sobram 236px, e
       24px joga "Decisões mais seguras." para uma terceira linha. O degrau
       abaixo mantém a quebra em duas linhas de `7b`. */
    --sia-v2-public-statement-size: var(--sia-v2-font-size-page-title);
    --sia-v2-public-support-size: var(--sia-v2-font-size-secondary);
    /* A coluna de 300px já é a medida: um limite em `ch` estreitaria de novo. */
    --sia-v2-public-statement-measure: none;
  }

  .sia-v2-public__aside {
    padding: 26px 28px;
  }

  /* Cinco curvas e dois nós, sem campo de pontos: o desenho de `7b`. */
  .sia-v2-public .sia-v2-public__graphic-svg--desktop {
    display: none;
  }

  .sia-v2-public .sia-v2-public__graphic-svg--notebook {
    display: block;
  }

  /* "Suporte Imagem" apenas — a referência encurta o rodapé na coluna
     estreita, onde o complemento quebraria em duas linhas. */
  .sia-v2-public__aside-footer-extra {
    display: none;
  }

  .sia-v2-public__brand-logo {
    height: 26px;
  }

  .sia-v2-public__brand-divider {
    height: 16px;
  }

  .sia-v2-public__statement-support {
    margin-top: 10px;
    line-height: var(--sia-v2-line-height-relaxed);
  }

  .sia-v2-public__statement-rule {
    width: 26px;
    margin-top: var(--sia-v2-space-5);
  }

  .sia-v2-public__aside-footer {
    padding-top: var(--sia-v2-space-4);
    font-size: 10.5px;
  }

  .sia-v2-public__main {
    padding: 28px;
  }
}

/* Notebook de tela baixa: o formulário precisa caber em 720px de altura sem
   cortar botão, links ou rodapé. */
@media (min-width: 1024px) and (max-width: 1439px) and (max-height: 800px) {
  .sia-v2-public__form {
    gap: var(--sia-v2-space-3);
    margin-top: var(--sia-v2-space-4);
  }

  .sia-v2-public__footer {
    margin-top: var(--sia-v2-space-5);
  }
}

/* --------------------------------------------------------------------------
   Monitor grande (1440px e acima, o que inclui os 1512px de referência):
   é aqui que a composição de `7a` aparece inteira — card de 1360 × 660,
   mensagem em 38px, apoio em 15px, formulário de 384px e as oito curvas com
   toda a abertura.
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .sia-v2-public {
    --sia-v2-public-panel-width: 384px;
    --sia-v2-public-title-size: calc(var(--sia-v2-font-size-page-title) + 4px);
    --sia-v2-public-statement-size: calc(var(--sia-v2-font-size-page-title) + 16px);
    --sia-v2-public-support-size: calc(var(--sia-v2-font-size-card-title) + 1px);
  }

  /* O complemento do rodapé volta: a coluna larga comporta a linha inteira. */
  .sia-v2-public__aside-footer-extra {
    display: inline;
  }

  /* Respiro de `7a`. */
  .sia-v2-public__aside {
    padding: 52px 58px;
  }

  .sia-v2-public__statement-support {
    margin-top: var(--sia-v2-space-5);
  }

  .sia-v2-public__main {
    padding: 52px 44px;
  }
}