/* ==========================================================================
   Materiais para download.

   Herda o sistema do site: mesmos tokens, mesmo container, mesmos botões. A
   densidade é o ponto — 22 arquivos viram uma biblioteca legível, não uma
   parede de cartões grandes. Cada item mostra só o necessário: miniatura,
   nome, formato/tamanho e o botão.
   ========================================================================== */

.adjuto-mat__intro {
  max-width: 46rem;
  margin-bottom: 2.4rem;
}
.adjuto-mat__intro .adjuto-section__lead {
  margin-bottom: 0;
}

/* ----- blocos por categoria ---------------------------------------------- */
.adjuto-mat__bloco + .adjuto-mat__bloco {
  margin-top: 2.8rem;
}
.adjuto-mat__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--adjuto-campaign-accent, #6db800);
}
.adjuto-mat__titulo {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--adjuto-campaign-ink, #114093);
  margin: 0;
}
.adjuto-mat__cont {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--adjuto-color-muted, #5f6b80);
}

/* ----- grade -------------------------------------------------------------
   auto-fill em vez de auto-fit: com poucos itens numa categoria, auto-fit
   esticaria os cartões até a largura toda e os wallpapers ficariam gigantes
   ao lado das imagens pequenas. As colunas guardam a mesma medida nas três
   categorias, e é isso que faz a página ler como uma biblioteca só. */
.adjuto-mat__grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1.1rem;
}
.adjuto-mat__grade--alta {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.adjuto-mat__grade--audio {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.adjuto-mat__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

/* ----- miniatura ---------------------------------------------------------
   A proporção é fixa e a imagem entra em `contain`: as figurinhas são
   quadradas e os wallpapers são retratos altos: sem isto uma categoria
   esmagaria a outra. O xadrez leve revela a transparência dos PNGs, que é
   informação real sobre o arquivo. */
.adjuto-mat__fig {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--adjuto-color-border, #dfe6ec);
  border-radius: var(--adjuto-campaign-radius, 10px);
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #f1f4f8 25%, transparent 25%, transparent 75%, #f1f4f8 75%),
    linear-gradient(45deg, #f1f4f8 25%, transparent 25%, transparent 75%, #f1f4f8 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.adjuto-mat__grade--alta .adjuto-mat__fig {
  aspect-ratio: 3 / 4;
}
.adjuto-mat__fig img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.adjuto-mat__nome {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--adjuto-color-text, #101f39);
  margin: 0;
}
.adjuto-mat__meta {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--adjuto-color-muted, #5f6b80);
  margin: 0 0 0.5rem;
  font-variant-numeric: tabular-nums;
}

/* O botão encosta no fim do cartão: com nomes de uma ou duas linhas, sem isto
   os botões da mesma fileira ficam em alturas diferentes. */
.adjuto-mat__baixar {
  margin-top: auto;
  align-self: flex-start;
}

/* ----- áudio -------------------------------------------------------------- */
.adjuto-mat__item--audio {
  border: 1px solid var(--adjuto-color-border, #dfe6ec);
  border-radius: var(--adjuto-campaign-radius, 10px);
  padding: 1rem 1.1rem 1.1rem;
  background: #ffffff;
}
.adjuto-mat__audio {
  width: 100%;
  margin: 0.2rem 0 0.75rem;
}

/* ----- mobile ------------------------------------------------------------- */
@media (max-width: 560px) {
  .adjuto-mat__intro { margin-bottom: 1.8rem; }
  .adjuto-mat__bloco + .adjuto-mat__bloco { margin-top: 2.2rem; }
  .adjuto-mat__titulo { font-size: 1.15rem; }
  .adjuto-mat__grade {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.9rem;
  }
  .adjuto-mat__grade--alta {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  }
  .adjuto-mat__grade--audio { grid-template-columns: 1fr; }
  /* 44px de alvo de toque, como no seletor da Agenda. */
  .adjuto-mat__baixar {
    align-self: stretch;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   Chamada na Home — duas variantes de direção de arte
   ==========================================================================
   O cartão branco com borda verde e botão solto foi reprovado: parecia
   componente de SaaS, não seção de campanha. As duas variantes abaixo partem
   dos MATERIAIS REAIS como matéria visual, e nenhuma repete o vocabulário da
   Agenda — sem quadro único, sem divisória de 1px, sem faixa geométrica.

   A classe na seção decide qual aparece; a outra sai do fluxo.
   ========================================================================== */

.mat-var-a .mat-b,
.mat-var-b .mat-a { display: none; }

:root[data-site-mode="officialCampaign"] #materiais-teaser.adjuto-section {
  /* Padding ASSIMÉTRICO, com a mesma soma de antes: o miolo sobe ~29px sem que
     a seção mude de altura. É o que dá folga entre a base do palco e a diagonal
     azul do Instagram, que sobe --adjuto-cut e comia a ponta direita da faixa
     de jingles. Redistribuição, não crescimento. */
  padding-top: clamp(1rem, 1.6vw, 1.4rem);
  padding-bottom: clamp(4.2rem, 7vw, 6.3rem);
}

/* Centralização óptica no desktop.
   Medido: o conjunto texto+showcase tinha 24px de respiro acima e 46px abaixo
   em 1440 (21 e 32 em 1180) — alto demais dentro da massa branca. Desce ~11px
   em 1440 e ~8px em 1180, redistribuindo o padding com a MESMA soma: a altura
   da seção não muda, só a posição do grupo.

   O limite inferior considerado é a DIAGONAL do Instagram no centro do grupo,
   não a borda retangular da seção — a base é inclinada e medir até o retângulo
   daria um respiro que não existe.

   Só acima de 900px: abaixo disso o layout empilha e a medição mostrou o
   mobile JÁ equilibrado (desvio ideal de −5px em 768 e −1px em 375). Herdar o
   deslocamento do desktop ali seria estragar o que está certo. */
@media (min-width: 901px) {
  :root[data-site-mode="officialCampaign"] #materiais-teaser.adjuto-section {
    padding-top: clamp(2rem, 2.89vw, 2.7rem);
    padding-bottom: clamp(3.4rem, 5.69vw, 5.2rem);
  }
}

/* --------------------------------------------------------------------------
   M-A — editorial / showcase (refinada)

   MALHA COMPARTILHADA COM O INSTAGRAM. As duas seções já usam .adjuto-container,
   então a borda esquerda coincide; o que faltava era a proporção interna. O
   Instagram divide o miolo em 1.4fr para a fala e o resto para o botão, e a
   coluna de texto daqui passa a usar a mesma medida. Resultado: eyebrow,
   headline e apoio de Materiais nascem no mesmo eixo do @adjutodias logo
   abaixo, e a leitura desce por uma régua só.

   RELAÇÃO COM A DIAGONAL. O Instagram sobe --adjuto-cut e corta o próprio topo
   numa diagonal que SOBE para a direita (campaign.css:1107) — ou seja, o
   branco disponível encurta justamente do lado onde mora a composição. Em vez
   de brigar com isso, o grupo acompanha: o wallpaper fica mais baixo à
   esquerda e a pilha de figurinhas sobe à direita, na mesma inclinação. A
   composição pousa sobre a transição em vez de flutuar acima dela, e nada é
   cortado nem invade o azul.
   -------------------------------------------------------------------------- */
.mat-a {
  display: grid;
  /* 1.28fr em vez de 1.4fr: a segunda coluna começa ~26px mais à esquerda, e
     o palco vem junto. Combinado com o max-width maior do texto abaixo, o vão
     central cai de 192px para ~134px sem mover as margens externas — os dois
     blocos crescem um em direção ao outro em vez de se deslocarem. */
  grid-template-columns: 1.28fr minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem 2.6rem;
}
.mat-a__texto { max-width: 36rem; }
.mat-a__titulo {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  color: var(--adjuto-campaign-ink, #114093);
  /* Apertado: título e apoio são a mesma fala, e o vão de 0.7rem os separava
     como se fossem dois assuntos. */
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
.mat-a__apoio {
  margin: 0 0 0.85rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--adjuto-color-muted, #5f6b80);
  max-width: 30rem;
}

/* Os números viram três grupos separados por um filete vertical: "15 imagens ·
   4 wallpapers · 3 jingles" comunica a variedade real, que o "22 arquivos"
   anterior escondia. */
.mat-a__conta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0 0 1.15rem;
  font-size: 0.88rem;
  color: var(--adjuto-color-muted, #5f6b80);
}
.mat-a__conta span { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.mat-a__conta span + span {
  padding-left: 0.9rem;
  border-left: 1px solid var(--adjuto-color-border, #dfe6ec);
}
.mat-a__conta b {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--adjuto-campaign-ink, #114093);
  font-variant-numeric: tabular-nums;
}

/* Mesma família do botão do Instagram (campaign.css:.adjuto-btn--instagram):
   mesmo padding, mesmo corpo. Só a cor se inverte — azul preenchido aqui,
   branco preenchido lá —, que é a inversão desejada. */
.mat-a__cta {
  padding: 1rem 1.8rem;
  font-size: 1.05rem;
}

/* ----- showcase: o palco e as três zonas ----------------------------------
   A composição deixou de ser decoração. Cada categoria é uma ZONA com função
   declarada: mostra o material, diz quantos são e leva à âncora da página
   completa. Três alvos, um por categoria — não uma coleção de imagens
   clicáveis competindo entre si.

   O palco é a geometria que explica por que os objetos estão juntos: um plano
   angular pálido, recortado no mesmo ângulo dos cortes da campanha. Não é
   card: não tem borda fechada nem sombra de container, e a cor é fraca o
   bastante para os materiais continuarem sendo o que se vê.

   REGRA DE SOBREPOSIÇÃO: zero. As figurinhas trazem a frase na base da arte;
   qualquer avanço horizontal cobriria o texto da vizinha, que foi o defeito
   apontado em "Bora/Oxente/Um abraço". Sobreposição só se pagasse por si, e
   com estes assets ela não paga. -------------------------------------------- */
.mat-a__palco {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "wall img"
    "som  som";
  align-items: end;
  gap: 0.55rem 0.85rem;
  padding: 0.7rem 0.85rem 0.65rem;
  isolation: isolate;
  /* A diagonal do Instagram sobe --adjuto-cut e, na borda direita do palco, o
     azul já começava acima da base da faixa de jingles: a ponta da barra ficava
     coberta pelo azul, e era isso que parecia "escapar do palco". Subir o
     conjunto por transform resolve sem tocar no fluxo — a seção continua com a
     mesma altura, e o espaço liberado embaixo é o que o plano ocupa. */
  transform: translateY(-2px);
}
/* O plano do palco, atrás de tudo. */
.mat-a__palco::before {
  content: "";
  position: absolute;
  /* O plano cresce nos dois sentidos SEM ocupar espaço no fluxo — é um pseudo
     absoluto, então a altura da seção não muda em nenhum dos dois ajustes.
     Topo: o wallpaper encostava na borda. Base: a faixa de jingles saía. */
  /* A base do plano desce o máximo que a geometria permite sem encostar no
     Instagram. O branco disponível hoje é finito: 23px em 1440, 13px em 1180,
     23 em 768 e 31 em 375 — medidos da borda pintada do plano até a diagonal
     azul. Estender além disso não seria "ocupar mais o branco", seria invadir
     a seção seguinte. O alvo é deixar ~11px de respiro deliberado em todos.
     Só o inferior muda; o topo segue reto em -16px. */
  inset: -16px 0 -24px 0;
  z-index: -1;
  background: linear-gradient(150deg, #eef4fa 0%, #f4f9ee 100%);
  /* TOPO RETO, BASE EM DIAGONAL.
     A divisão acima de Materiais é horizontal, então o topo do palco também
     é: os dois pontos superiores têm o mesmo Y. A diagonal fica só embaixo, e
     na MESMA direção da do Instagram — a dele é
     polygon(0 var(--adjuto-cut), 100% 0, …), que sobe para a direita, então a
     base daqui sobe para a direita também. As duas conversam sem se tocar.

     Corte em px, nunca em porcentagem: com 5% ele acompanhava a altura da
     caixa e, quando o plano cresceu, passou a comer 18px do canto inferior
     direito. Em clamp o ângulo é previsível e acompanha o breakpoint. */
  --ag-corte: clamp(12px, 1.35vw, 20px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ag-corte)), 0 100%);
  border-radius: 6px;
}

/* Entre 901 e 1279px a seção é mais curta e sobra bem menos branco: em 1180
   são 13px no total, contra 23 em 1440. Aqui o plano quase não desce —
   esticá-lo como no desktop largo encostaria na diagonal.

   Precisa vir DEPOIS da regra base: as duas têm a mesma especificidade, e na
   primeira tentativa este bloco ficou antes e simplesmente não valeu, deixando
   1px de respiro em 1180. */
@media (min-width: 901px) and (max-width: 1279px) {
  .mat-a__palco::before { inset: -16px 0 -14px 0; }
}

.mat-a__zona {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  text-decoration: none;
  border-radius: 10px;
  transition: transform 0.15s ease;
}
.mat-a__zona:hover { transform: translateY(-2px); }
.mat-a__zona:focus-visible {
  outline: 2px solid var(--adjuto-campaign-ink, #114093);
  outline-offset: 4px;
}
.mat-a__zona--wall { grid-area: wall; }
.mat-a__zona--img  { grid-area: img; }
.mat-a__zona--som  { grid-area: som; }

/* Rótulo: é ele que informa, não a imagem. Discreto, mas presente nas três. */
.mat-a__rotulo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--adjuto-color-muted, #5f6b80);
  white-space: nowrap;
}
.mat-a__rotulo b {
  font-size: 0.75rem;
  color: var(--adjuto-campaign-ink, #114093);
  font-variant-numeric: tabular-nums;
}
.mat-a__zona:hover .mat-a__rotulo { color: var(--adjuto-campaign-ink, #114093); }

/* Âncora da composição: o wallpaper na moldura. */
.mat-a__tela {
  display: block;
  width: clamp(78px, 7.6vw, 103px);
  aspect-ratio: 9 / 18;
  border: 3px solid var(--adjuto-campaign-ink, #114093);
  border-radius: 16px;
  padding: 3px;
  background: var(--adjuto-campaign-ink, #114093);
  overflow: hidden;
}
.mat-a__tela img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Deck: três lado a lado, inclinações pequenas e alternadas, z-index
   explícito. Nenhuma cobre a outra — a margem negativa foi removida. */
.mat-a__deck {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(2px, 0.5vw, 8px);
}
.mat-a__deck img {
  width: clamp(46px, 5.3vw, 73px);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(17, 64, 147, 0.16));
}
.mat-a__deck img:nth-child(1) { transform: rotate(-6deg); z-index: 1; }
.mat-a__deck img:nth-child(2) { transform: rotate(0deg);  z-index: 3; }
.mat-a__deck img:nth-child(3) { transform: rotate(6deg);  z-index: 2; }

/* Jingles: faixa na base, atravessando as duas colunas. É o que amarra o
   grupo por baixo em vez de pendurar um selo na lateral. */
.mat-a__zona--som {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.6rem;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(17, 64, 147, 0.1);
}
/* Não esticar a onda pela faixa toda: com space-between em ~500px as barras
   se afastavam tanto que a forma virava uma linha pontilhada. Densidade fixa,
   e o rótulo ocupa o resto. */
.mat-a__zona--som .mat-a__onda { flex: 0 0 auto; gap: 3px; }
.mat-a__zona--som { justify-content: flex-start; }
.mat-a__zona--som .mat-a__rotulo { flex: 0 0 auto; }

/* Onda: barras de altura fixa, sem animação. Sinal gráfico de que ali existe
   som — não um player. As alturas vêm de um padrão que se repete a cada seis
   barras, então a faixa cresce ou encolhe sem precisar de nth-child novo. */
.mat-a__onda,
.mat-b__onda {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}
.mat-a__onda i,
.mat-b__onda i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--adjuto-campaign-accent, #6db800);
  height: 45%;
}
.mat-a__onda i:nth-child(6n + 1),
.mat-b__onda i:nth-child(6n + 1) { height: 30%; }
.mat-a__onda i:nth-child(6n + 2),
.mat-b__onda i:nth-child(6n + 2) { height: 72%; }
.mat-a__onda i:nth-child(6n + 4),
.mat-b__onda i:nth-child(6n + 4) { height: 100%; }
.mat-a__onda i:nth-child(6n + 5),
.mat-b__onda i:nth-child(6n + 5) { height: 58%; }
.mat-a__onda i:nth-child(6n),
.mat-b__onda i:nth-child(6n) { height: 85%; }

@media (max-width: 900px) {
  /* Fala primeiro, composição depois — a ordem de leitura pedida no mobile. */
  .mat-a { grid-template-columns: 1fr; gap: 1.6rem; }
  .mat-a__texto { max-width: none; }
  .mat-a__mostra { justify-content: flex-start; }
  .mat-a__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  /* O palco NÃO empilha mais.

     Empilhado, o wallpaper ficava sozinho numa faixa larguíssima, as três
     imagens caíam bem abaixo e os jingles ainda mais — três blocos vazios de
     lado e uma coluna altíssima. A composição de duas colunas do desktop já
     era a certa; o que faltava era caber, e cabe: no mobile o wallpaper mede
     78px e sobram cerca de 200px de largura útil ao lado dele.

     Mantém-se, portanto, "wall img" com "som som" atravessando por baixo. */
  .mat-a__palco {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "wall img"
      "som  som";
    align-items: end;
    gap: 0.7rem 0.8rem;
  }

  /* As três imagens formam um triângulo: duas em cima, a terceira centrada
     abaixo. É o que ocupa a largura ao lado do wallpaper em vez de deixá-la
     vazia — e permite que elas fiquem MAIORES do que quando estavam em fila,
     não menores. */
  .mat-a__deck {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.3rem;
  }
  .mat-a__deck img { width: clamp(62px, 23vw, 96px); }
  .mat-a__deck img:nth-child(3) { margin-top: -0.15rem; }

  /* A faixa de jingles encosta no conjunto e usa a largura toda do palco. */
  .mat-a__zona--som { margin-top: 0.15rem; }
}

/* --------------------------------------------------------------------------
   M-B — biblioteca integrada
   Um painel só, em azul da campanha, com as três categorias correndo como
   uma trilha horizontal. Não são três cartões: é uma superfície contínua com
   três segmentos rotulados, e o azul é o que a distingue do resto da Home sem
   pedir emprestado nada da Agenda.
   -------------------------------------------------------------------------- */
.mat-b__painel {
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(2, 63, 249, 0.45) 0%, rgba(2, 63, 249, 0) 58%),
    var(--adjuto-campaign-ink, #114093);
  border-radius: 14px;
  padding: 1.7rem 1.9rem 1.8rem;
  color: #ffffff;
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem 2rem;
}
.mat-b__cab .adjuto-section__eyebrow { color: var(--adjuto-campaign-accent, #6db800); }
.mat-b__cab .adjuto-section__eyebrow::before { background: var(--adjuto-campaign-accent, #6db800); }
.mat-b__titulo {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.12;
  margin: 0 0 0.35rem;
  color: #ffffff;
  text-wrap: balance;
}
.mat-b__apoio {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

.mat-b__trilha {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 1.6rem;
  min-width: 0;
  overflow: hidden;
}
.mat-b__faixa {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.mat-b__rotulo {
  font-family: var(--adjuto-campaign-font-display, inherit);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
.mat-b__rotulo b { color: var(--adjuto-campaign-accent, #6db800); }

.mat-b__tiras { display: flex; align-items: flex-end; gap: 6px; }
.mat-b__tiras img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.mat-b__tiras--altas img {
  width: 34px;
  height: 60px;
  object-fit: cover;
}
.mat-b__ondas { display: flex; align-items: flex-end; gap: 10px; height: 46px; }
.mat-b__ondas .mat-b__onda { height: 26px; }

.mat-b__cta { justify-self: end; }

@media (max-width: 1080px) {
  .mat-b__painel { grid-template-columns: 1fr; }
  .mat-b__trilha { flex-wrap: wrap; gap: 1.2rem 1.6rem; }
  .mat-b__cta { justify-self: start; }
}
/* CTA de toque: no mobile o botão ocupa a largura do conteúdo. Encostado à
   esquerda, ele era um alvo pequeno num canto — e num telefone o polegar que
   alcança esse canto depende de qual mão segura o aparelho. */
@media (max-width: 560px) {
  .mat-a__cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .mat-b__painel { padding: 1.3rem 1.2rem 1.4rem; }
  .mat-b__cta {
    justify-self: stretch;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   Foto de apoio

   Vive dentro da página de Materiais, com os mesmos tokens de tudo o mais:
   nenhuma cor própria, nenhum raio próprio, e o :focus-visible global do
   base.css valendo também aqui.
   ========================================================================== */
.adjuto-fa{
  margin:0 0 var(--adjuto-space-8);
  padding-bottom:var(--adjuto-space-7);
  border-bottom:1px solid var(--adjuto-color-border);
}
.adjuto-fa__titulo{margin:0 0 var(--adjuto-space-2);font-size:1.35rem;line-height:1.2;}
.adjuto-fa__lead{margin:0 0 var(--adjuto-space-5);opacity:.8;}

/* Escolha da moldura. As miniaturas mostram a arte sobre um xadrez discreto,
   para que a área transparente — onde a foto vai entrar — se leia como vazio
   e não como fundo branco. */
.adjuto-fa__molduras{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--adjuto-space-3);margin-bottom:var(--adjuto-space-5);
}
.adjuto-fa__moldura{
  display:block;padding:0;cursor:pointer;
  border:2px solid var(--adjuto-color-border);
  border-radius:12px;overflow:hidden;
  background:
    linear-gradient(45deg,rgba(12,42,74,.06) 25%,transparent 25%,transparent 75%,rgba(12,42,74,.06) 75%) 0 0/16px 16px,
    linear-gradient(45deg,rgba(12,42,74,.06) 25%,transparent 25%,transparent 75%,rgba(12,42,74,.06) 75%) 8px 8px/16px 16px,
    var(--adjuto-color-white);
}
.adjuto-fa__moldura img{width:100%;aspect-ratio:1;object-fit:contain;display:block;}
.adjuto-fa__moldura-nome{
  display:block;padding:6px 8px;
  background:var(--adjuto-color-white);
  font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--adjuto-color-text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Selecionada por borda E por peso do rótulo: não é só cor. */
.adjuto-fa__moldura.is-ativa{border-color:var(--adjuto-color-navy-800);}
.adjuto-fa__moldura.is-ativa .adjuto-fa__moldura-nome{
  color:var(--adjuto-color-navy-800);font-weight:800;
}

/* Seletor de formato.

   Os rótulos são escritos por extenso, com as dimensões: a proporção do botão
   sozinha não diz nada a quem usa leitor de tela, e "Story" sem o 1080×1920
   não informa o que sai no arquivo. */
.adjuto-fa__rotulo-grupo{
  margin:0 0 var(--adjuto-space-2);
  font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--adjuto-color-text-muted);
}
.adjuto-fa__formatos{
  display:flex;flex-wrap:wrap;gap:var(--adjuto-space-2);
  margin-bottom:var(--adjuto-space-3);
}
.adjuto-fa__formato{
  padding:8px 14px;min-height:44px;
  border:2px solid var(--adjuto-color-border);
  border-radius:999px;background:var(--adjuto-color-white);
  color:var(--adjuto-color-text-muted);
  font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
}
/* Ativo por borda E por peso, nunca só por cor. */
.adjuto-fa__formato.is-ativa{
  border-color:var(--adjuto-color-navy-800);
  color:var(--adjuto-color-navy-800);
  font-weight:800;
}
.adjuto-fa__sugestao{
  margin:0 0 var(--adjuto-space-4);
  font-size:.85rem;font-weight:700;color:var(--adjuto-color-navy-800);
}

/* A prévia acompanha a proporção real da saída — a variável é escrita pelo JS
   a cada troca de formato.

   O limite de altura existe por causa do Story: 1080×1920 numa coluna de
   520px daria mais de 900px de altura, e os controles sairiam da tela. O
   canvas ENCOLHE visualmente mantendo a proporção; as dimensões internas
   continuam sendo as reais do arquivo. Responsividade da página e formato do
   arquivo final são coisas diferentes, e é aqui que elas se separam. */
.adjuto-fa__palco{
  --fa-proporcao:1 / 1;
  position:relative;
  width:100%;max-width:520px;
  aspect-ratio:var(--fa-proporcao);
  max-height:min(62vh, 720px);
  margin:0 auto var(--adjuto-space-4);
  display:flex;align-items:center;justify-content:center;
}
.adjuto-fa__canvas{
  max-width:100%;max-height:100%;
  width:auto;height:auto;display:block;
  border-radius:12px;
  background:var(--adjuto-color-offwhite);
  touch-action:none;              /* o arrasto reposiciona a foto, não rola a página */
  cursor:grab;
}
.adjuto-fa__canvas.is-vazio{cursor:default;}
.adjuto-fa__canvas:active{cursor:grabbing;}
.adjuto-fa__vazio{
  position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%);
  margin:0;text-align:center;pointer-events:none;
  color:var(--adjuto-color-text-muted);font-size:.95rem;
}

.adjuto-fa__ajuste{
  display:flex;align-items:center;gap:var(--adjuto-space-3);
  max-width:520px;margin:0 auto var(--adjuto-space-4);
}
.adjuto-fa__rotulo{flex:0 0 auto;font-size:.85rem;font-weight:700;}
.adjuto-fa__ajuste input[type="range"]{flex:1 1 auto;min-width:0;}

.adjuto-fa__acoes{
  display:flex;flex-wrap:wrap;gap:var(--adjuto-space-3);
  justify-content:center;margin-bottom:var(--adjuto-space-4);
}
/* O input de arquivo fica fora da tela, mas continua focável e acionável —
   esconder com display:none o tiraria do teclado. */
.adjuto-fa__entrada{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.adjuto-fa__erro{
  margin:0 auto var(--adjuto-space-3);max-width:520px;text-align:center;
  color:var(--adjuto-color-danger,#b42318);font-size:.9rem;font-weight:600;
}
.adjuto-fa__privacidade{
  margin:0 auto;max-width:560px;text-align:center;
  font-size:.82rem;line-height:1.6;opacity:.72;
}

@media (max-width:560px){
  .adjuto-fa__molduras{grid-template-columns:repeat(2,minmax(0,1fr));}
  .adjuto-fa__acoes .adjuto-btn{flex:1 1 100%;}
  /* No celular a tela é mais alta que larga: o Story pode respirar um pouco
     mais sem esconder os controles. */
  .adjuto-fa__palco{max-height:min(58vh, 620px);}
  .adjuto-fa__formato{flex:1 1 calc(50% - var(--adjuto-space-2));text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .adjuto-fa__moldura{transition:none;}
}

/* Enquadramento: dica, instrução e recados.

   A dica aparece só depois que existe foto, porque antes disso não há o que
   arrastar. A instrução fica sempre, porque é ela que o leitor de tela lê
   junto do canvas — o canvas a referencia por aria-describedby. */
.adjuto-fa__dica{
  margin:0 auto var(--adjuto-space-2);max-width:520px;text-align:center;
  font-size:.9rem;font-weight:700;color:var(--adjuto-color-navy-800);
}
.adjuto-fa__instrucao{
  margin:0 auto var(--adjuto-space-4);max-width:520px;text-align:center;
  font-size:.82rem;line-height:1.5;opacity:.7;
}
/* Recado só para tecnologia assistiva: sai da tela sem sair da árvore. */
.adjuto-fa__aviso{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* O canvas recebe foco pelo teclado; o anel precisa aparecer. */
.adjuto-fa__canvas:focus-visible{outline-offset:3px;}

/* Selfie como ação principal; foto existente como alternativa.

   A hierarquia é de peso, não só de posição: o botão principal é o de ação
   destacada do sistema, e a alternativa é uma frase com um link. Ela nunca
   some, porque é o caminho de quem negou a câmera, está no computador ou
   simplesmente prefere uma foto que já tem. */
.adjuto-fa__alternativa{
  margin:0 auto var(--adjuto-space-4);text-align:center;
  font-size:.88rem;opacity:.8;
}
.adjuto-fa__alternativa.is-destaque{
  opacity:1;font-weight:700;
  color:var(--adjuto-color-navy-800);
}
.adjuto-fa__link{
  appearance:none;border:0;background:none;padding:0;
  font:inherit;font-weight:700;color:var(--adjuto-color-navy-800);
  text-decoration:underline;cursor:pointer;
}

/* Pergunta de destino, antes de abrir a câmera. */
.adjuto-fa__pergunta{
  display:flex;flex-direction:column;gap:8px;align-items:center;
  max-width:520px;margin:0 auto var(--adjuto-space-4);
  padding:16px;border:2px solid var(--adjuto-color-border);border-radius:12px;
}
.adjuto-fa__pergunta-titulo{
  margin:0 0 4px;font-weight:800;color:var(--adjuto-color-navy-800);
}
.adjuto-fa__pergunta .adjuto-btn{width:100%;}

/* Painel da câmera. A prévia é o canvas: nele o vídeo já entra recortado no
   formato final, com a moldura e o guia por cima — a pessoa vê a composição
   antes de capturar, em vez de descobrir depois. */
.adjuto-fa__camera{
  max-width:520px;margin:0 auto var(--adjuto-space-4);
}
.adjuto-fa__previa{
  width:100%;max-height:min(58vh,660px);height:auto;display:block;
  margin:0 auto;border-radius:12px;background:var(--adjuto-color-navy-900);
}
.adjuto-fa__cam-dica{
  margin:var(--adjuto-space-2) 0;text-align:center;
  font-size:.85rem;font-weight:700;color:var(--adjuto-color-navy-800);
}
.adjuto-fa__cam-acoes{
  display:flex;flex-wrap:wrap;gap:var(--adjuto-space-2);justify-content:center;
}
.adjuto-fa__formato:disabled{
  opacity:.45;cursor:not-allowed;text-decoration:line-through;
}
@media (max-width:560px){
  .adjuto-fa__cam-acoes .adjuto-btn{flex:1 1 100%;}
}