/*
Theme Name:   Salient Child · Amanda Noronha
Theme URI:    https://amandanoronha.com.br
Description:  Tema filho do Salient com o design system da marca Amanda Noronha®. Traz tokens de cor, tipografia Chivo e Inter, os quatro arranjos de pad, selos de série, flags, etiquetas de natureza do dado, botões, cards e cartão de foto. Todas as classes começam com an- para não conflitar com o tema pai.
Author:       Amanda Noronha
Author URI:   https://amandanoronha.com.br
Template:     salient
Version:      1.6.0
Requires PHP: 7.4
Text Domain:  salient-child-amanda
*/

/* ==========================================================================
   Este arquivo carrega depois de todo o CSS do Salient, por prioridade 9999
   no functions.php. Por isso quase nada aqui precisa de !important.
   ========================================================================== */

/* ==========================================================================
   Amanda Noronha®: Design System Web
   Versão 1.0 · 08/09/2026
   Derivado do Brandbook Master (seções 63, 65 e 66) e do documento canônico
   "Padrões e Modelos de post".

   Onde colar: child theme do Salient (style.css) ou
   Salient > Theme Options > CSS/JS > Custom CSS.
   Tudo aqui é escopado em .an-* para não conflitar com o Salient.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Paleta oficial */
  --an-fucsia:        #EC1180;  /* cor de marca. Um elemento por peça. */
  --an-fucsia-forte:  #C40E6B;  /* uso funcional: link e hover sobre fundo claro */
  --an-fucsia-medio:  #DA31A5;
  --an-noturno:       #0C1438;  /* fundo escuro padrão */
  --an-elevado:       #142155;  /* blocos elevados sobre o escuro */
  --an-bic:           #003A8C;  /* selos, tarjas, fundos chapados */
  --an-roxo:          #5A0099;  /* profundidade e topo de gradiente */
  --an-roxo-suave:    #A881D4;
  --an-ciano:         #22E8F0;  /* acento de detalhe e marcação */
  --an-gelo:          #F4F7FF;  /* fundo claro padrão */
  --an-cinza-suave:   #E3E6EF;  /* divisores e reforço neutro */

  /* Texto sobre fundo escuro */
  --an-fg:            #F4F7FF;
  --an-fg-soft:       #C4CBE4;
  --an-fg-muted:      #8E9AC4;

  /* Texto sobre fundo claro */
  --an-fg-claro:      #0C1438;
  --an-fg-claro-soft: #313A5E;
  --an-fg-claro-muted:#5C6787;  /* corrigido de #7B85A6 por contraste (3.41 reprova em corpo) */

  /* Cor por família editorial */
  --an-fam-prova:       #EC1180;
  --an-fam-didatica:    #22E8F0;
  --an-fam-autoridade:  #003A8C;
  --an-fam-pessoal:     #5A0099;

  /* Tipografia */
  --an-font-titulo: "Chivo", "Chivo Fallback", system-ui, sans-serif;
  --an-font-corpo:  "Inter", "Inter Fallback", system-ui, sans-serif;

  /* Escala tipográfica fluida */
  --an-t-display: clamp(2.6rem, 1.4rem + 5.2vw, 5.2rem);
  --an-t-h1:      clamp(2.2rem, 1.3rem + 3.6vw, 3.8rem);
  --an-t-h2:      clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem);
  --an-t-h3:      clamp(1.3rem, 1.05rem + 1vw, 1.6rem);
  --an-t-corpo:   clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --an-t-rotulo:  0.8125rem;

  /* Ritmo */
  --an-secao-y:   clamp(64px, 8vw, 128px);
  --an-gap:       clamp(20px, 2.4vw, 40px);
  --an-raio:      14px;
  --an-raio-sm:   8px;
  --an-max:       1180px;
}

/* --------------------------------------------------------------------------
   2. FUNDOS: pads radiais canônicos
   Regra do brandbook: base chapada em Azul Noturno com halos radiais por cima.
   Todo pad desaparece em transparência em 62% do raio. Rampa linear sai do sistema.
   A, B e C são escala crescente de intensidade. D é exceção de lançamento.
   -------------------------------------------------------------------------- */
.an-pad-a {
  background:
    radial-gradient(120% 95% at 15% 12%, rgba(90,0,153,.52) 0%, rgba(90,0,153,0) 62%),
    var(--an-noturno);
}
.an-pad-a-baixo {
  background:
    radial-gradient(120% 95% at 15% 12%, rgba(90,0,153,.17) 0%, rgba(90,0,153,0) 62%),
    var(--an-noturno);
}
.an-pad-b {
  background:
    radial-gradient(110% 90% at 80% 15%, rgba(90,0,153,.46) 0%, rgba(90,0,153,0) 62%),
    radial-gradient(120% 90% at 10% 85%, rgba(20,33,85,.95) 0%, rgba(20,33,85,0) 62%),
    var(--an-noturno);
}
.an-pad-c {
  background:
    radial-gradient(95% 70% at 14% 10%, rgba(90,0,153,.50) 0%, rgba(90,0,153,0) 62%),
    radial-gradient(105% 78% at 88% 46%, rgba(20,33,85,.95) 0%, rgba(20,33,85,0) 62%),
    radial-gradient(82% 56% at 30% 100%, rgba(122,27,94,.50) 0%, rgba(122,27,94,0) 62%),
    var(--an-noturno);
}
.an-pad-d { /* só página de lançamento. Nunca junto de selo ou barra fúcsia. */
  background:
    radial-gradient(95% 70% at 14% 10%, rgba(90,0,153,.48) 0%, rgba(90,0,153,0) 62%),
    radial-gradient(105% 78% at 86% 50%, rgba(20,33,85,.90) 0%, rgba(20,33,85,0) 62%),
    radial-gradient(70% 52% at 100% 0%, rgba(236,17,128,.18) 0%, rgba(236,17,128,0) 62%),
    var(--an-noturno);
}
/* Pad claro não existe no sistema: fundo claro é Gelo Técnico chapado. */
.an-fundo-claro { background: var(--an-gelo); }

/* --------------------------------------------------------------------------
   3. SEÇÃO E GRADE
   -------------------------------------------------------------------------- */
.an-secao {
  font-family: var(--an-font-corpo);
  color: var(--an-fg);
  padding: var(--an-secao-y) clamp(20px, 5vw, 48px);
  position: relative;
  overflow: hidden;
}
.an-secao.an-fundo-claro { color: var(--an-fg-claro); }
.an-wrap { max-width: var(--an-max); margin-inline: auto; }
.an-grade { display: grid; gap: var(--an-gap); }
.an-g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.an-g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.an-g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.an-g-hero { grid-template-columns: 1.15fr .85fr; align-items: center; }
@media (max-width: 999px) {
  .an-g3, .an-g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .an-g-hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .an-g2, .an-g3, .an-g4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA
   -------------------------------------------------------------------------- */
.an-secao h1, .an-secao h2, .an-secao h3, .an-secao h4,
.an-titulo, .an-display {
  font-family: var(--an-font-titulo);
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin: 0 0 .5em;
  color: inherit;
}
.an-display { font-size: var(--an-t-display); font-weight: 900; max-width: 20ch; }
.an-secao h1, .an-h1 { font-size: var(--an-t-h1); font-weight: 900; }
.an-secao h2, .an-h2 { font-size: var(--an-t-h2); font-weight: 800; }
.an-secao h3, .an-h3 { font-size: var(--an-t-h3); font-weight: 700; line-height: 1.15; }

.an-kicker {
  font-family: var(--an-font-titulo);
  font-weight: 800;
  font-size: var(--an-t-rotulo);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--an-fucsia);
  margin: 0 0 18px;
  display: block;
}
.an-fundo-claro .an-kicker { color: var(--an-fucsia-forte); }

.an-secao p, .an-corpo {
  font-size: var(--an-t-corpo);
  line-height: 1.62;
  color: var(--an-fg-soft);
  margin: 0 0 1em;
  max-width: 62ch;
}
.an-fundo-claro p, .an-fundo-claro .an-corpo { color: var(--an-fg-claro-soft); }
.an-lead { font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.5; }
.an-nota { font-size: .8125rem; color: var(--an-fg-muted); line-height: 1.5; }
.an-fundo-claro .an-nota { color: var(--an-fg-claro-muted); }

.an-secao a { color: var(--an-fucsia); text-decoration: none; }
.an-secao a:hover { color: var(--an-fucsia-medio); }
.an-fundo-claro a { color: var(--an-fucsia-forte); text-decoration: underline; text-underline-offset: 3px; }

/* Número grande, âncora visual */
.an-num {
  font-family: var(--an-font-titulo);
  font-weight: 900;
  font-size: clamp(2.8rem, 1.6rem + 4vw, 4.4rem);
  line-height: .92;
  letter-spacing: -0.03em;
  color: var(--an-fg);
  display: block;
}
.an-fundo-claro .an-num { color: var(--an-fg-claro); }

/* Marca-texto sólido, um por peça */
.an-destaque {
  background: var(--an-fucsia);
  color: #FFFFFF;
  padding: .04em .22em .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   5. ETIQUETAS: três níveis. Nunca mais de dois na mesma peça.
   -------------------------------------------------------------------------- */
/* Nível 1 · selo de série */
.an-selo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--an-font-titulo); font-weight: 800;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--an-fam-prova); color: #FFFFFF;
}
.an-selo svg { width: 16px; height: 16px; flex: none; }
.an-selo--prova      { background: var(--an-fam-prova);      color:#FFFFFF; }
.an-selo--didatica   { background: var(--an-fam-didatica);   color:#0C1438; }
.an-selo--autoridade { background: var(--an-fam-autoridade); color:#FFFFFF; }
.an-selo--pessoal    { background: var(--an-fam-pessoal);    color:#FFFFFF; }

/* Nível 2 · flag de estado. Bandeirinha chanfrada, sem ícone. */
.an-flag {
  display: inline-block;
  font-family: var(--an-font-corpo); font-weight: 600;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 18px 6px 12px; color: #0C1438; background: var(--an-ciano);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}

/* Nível 3 · marcador inline */
.an-marcador {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--an-font-corpo); font-weight: 600;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--an-fg-soft);
}
.an-marcador::before {
  content: ""; width: 9px; height: 9px; background: var(--an-fucsia); flex: none;
}
.an-fundo-claro .an-marcador { color: var(--an-fg-claro-soft); }

/* Etiqueta de natureza do dado: exigência do Brandbook Master.
   Dado verificado e interpretação nunca ocupam o mesmo bloco. */
.an-etiqueta {
  display: inline-block; font-family: var(--an-font-corpo); font-weight: 600;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 4px; border: 1px solid currentColor;
  margin-bottom: 10px;
}
.an-etiqueta--fato      { color: var(--an-ciano); }
.an-etiqueta--estimativa{ color: var(--an-roxo-suave); }
.an-etiqueta--hipotese  { color: var(--an-fg-muted); }
.an-etiqueta--autoral   { color: var(--an-fucsia); }
.an-fundo-claro .an-etiqueta--fato       { color: var(--an-bic); }
.an-fundo-claro .an-etiqueta--estimativa { color: var(--an-roxo); }
.an-fundo-claro .an-etiqueta--hipotese   { color: var(--an-fg-claro-muted); }
.an-fundo-claro .an-etiqueta--autoral    { color: var(--an-fucsia-forte); }
.an-fonte { display: block; font-size: .75rem; color: var(--an-fg-muted); margin-top: 10px; }
.an-fundo-claro .an-fonte { color: var(--an-fg-claro-muted); }

/* --------------------------------------------------------------------------
   6. BOTÕES
   Contraste medido: branco sobre #EC1180 dá 4.24:1. Por isso o botão primário
   trava peso 700 e tamanho mínimo de 19px, faixa de texto grande da WCAG.
   -------------------------------------------------------------------------- */
.an-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--an-font-titulo); font-weight: 700;
  font-size: 1.1875rem; line-height: 1;
  padding: 18px 30px; border-radius: 999px;
  text-decoration: none; border: 2px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.an-btn:hover { transform: translateY(-2px); }
.an-btn--primario { background: var(--an-fucsia); color: #FFFFFF !important; }
.an-btn--primario:hover { background: var(--an-fucsia-forte); color: #FFFFFF !important; }
.an-btn--fantasma { background: transparent; color: var(--an-fg) !important; border-color: rgba(244,247,255,.35); }
.an-btn--fantasma:hover { border-color: var(--an-ciano); color: var(--an-ciano) !important; }
.an-fundo-claro .an-btn--fantasma { color: var(--an-fg-claro) !important; border-color: rgba(12,20,56,.22); }
.an-fundo-claro .an-btn--fantasma:hover { border-color: var(--an-bic); color: var(--an-bic) !important; }
.an-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.an-card {
  background: var(--an-elevado);
  border: 1px solid rgba(244,247,255,.09);
  border-radius: var(--an-raio);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.an-card:hover { border-color: rgba(34,232,240,.45); transform: translateY(-3px); }
.an-card h3 { margin: 0; }
.an-card p { margin: 0; }
.an-fundo-claro .an-card {
  background: #FFFFFF; border-color: var(--an-cinza-suave);
}
.an-fundo-claro .an-card:hover { border-color: var(--an-bic); }

/* Barra lateral em cor de família: gradiente vertical, força total no miolo */
.an-card--barra { padding-left: clamp(30px, 3vw, 44px); }
.an-card--barra::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 8px;
}
.an-barra-prova::before      { background: linear-gradient(180deg,#3B1150 0%,#EC1180 34%,#EC1180 66%,#3B1150 100%); }
.an-barra-didatica::before   { background: linear-gradient(180deg,#242064 0%,#22E8F0 34%,#22E8F0 66%,#242064 100%); }
.an-barra-autoridade::before { background: linear-gradient(180deg,#242064 0%,#003A8C 34%,#003A8C 66%,#242064 100%); }
.an-barra-pessoal::before    { background: linear-gradient(180deg,#2A1140 0%,#5A0099 34%,#5A0099 66%,#2A1140 100%); }

/* Card de número, para prova e indicador */
.an-card--dado { justify-content: space-between; min-height: 200px; }

/* --------------------------------------------------------------------------
   8. ÍCONE DE EDITORIA: pictograma fixo por família
   -------------------------------------------------------------------------- */
.an-icone {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; flex: none;
  background: rgba(244,247,255,.07);
}
.an-icone svg { width: 24px; height: 24px; }
.an-icone--prova      svg { stroke: var(--an-fam-prova); }
.an-icone--didatica   svg { stroke: var(--an-fam-didatica); }
.an-icone--autoridade svg { stroke: #6E9BEA; } /* azul bic clareia sobre noturno para manter leitura */
.an-icone--pessoal    svg { stroke: var(--an-roxo-suave); }
.an-fundo-claro .an-icone { background: var(--an-cinza-suave); }
.an-fundo-claro .an-icone--autoridade svg { stroke: var(--an-fam-autoridade); }
.an-fundo-claro .an-icone--pessoal svg { stroke: var(--an-fam-pessoal); }
.an-fundo-claro .an-icone--didatica svg { stroke: #0E7F86; } /* ciano puro não entra em fundo claro */

/* --------------------------------------------------------------------------
   9. RUNA E ASSINATURA: uma runa por arte
   -------------------------------------------------------------------------- */
.an-runa { width: 40px; height: 40px; display: inline-block; }
.an-runa svg { width: 100%; height: 100%; }
.an-assinatura {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--an-font-corpo); font-size: .8125rem; font-weight: 500;
  color: var(--an-fg-muted); letter-spacing: .04em;
}
.an-fundo-claro .an-assinatura { color: var(--an-fg-claro-muted); }

/* --------------------------------------------------------------------------
   10. UTILITÁRIOS
   -------------------------------------------------------------------------- */
.an-divisor { height: 1px; background: rgba(244,247,255,.12); border: 0; margin: var(--an-gap) 0; }
.an-fundo-claro .an-divisor { background: var(--an-cinza-suave); }
.an-centro { text-align: center; }
.an-centro .an-corpo, .an-centro p, .an-centro .an-display { margin-inline: auto; }
.an-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.an-lista li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  font-size: var(--an-t-corpo); line-height: 1.55; color: var(--an-fg-soft);
}
.an-fundo-claro .an-lista li { color: var(--an-fg-claro-soft); }
.an-lista li::before {
  content: ""; width: 10px; height: 10px; margin-top: .5em;
  background: var(--an-ciano); transform: rotate(45deg);
}
.an-fundo-claro .an-lista li::before { background: var(--an-bic); }

/* Moldura de foto com máscara da marca */
.an-foto { position: relative; border-radius: var(--an-raio); overflow: hidden; }
.an-foto img { display: block; width: 100%; height: auto; }
.an-foto--halo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 80% 0%, rgba(236,17,128,.20) 0%, rgba(236,17,128,0) 62%);
}

/* Acessibilidade e movimento */
.an-secao :focus-visible { outline: 3px solid var(--an-ciano); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .an-btn, .an-card { transition: none; }
  .an-btn:hover, .an-card:hover { transform: none; }
}

/* Ajustes de convivência com o Salient */
.an-secao .wpb_content_element { margin-bottom: 0; }
body .an-secao ul.an-lista { list-style: none; }

/* --------------------------------------------------------------------------
   11. CARTÃO DE FOTO
   Foto com legenda curta. A legenda existe para dar contexto verificável:
   evento, instituição e o que estava acontecendo.
   -------------------------------------------------------------------------- */
.an-cartao-foto {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--an-raio);
  background: var(--an-elevado);
  border: 1px solid rgba(244,247,255,.10);
}
.an-fundo-claro .an-cartao-foto { background: #FFFFFF; border-color: var(--an-cinza-suave); }
.an-cartao-foto img { display: block; width: 100%; height: auto; }
.an-cartao-foto figcaption {
  padding: 16px 18px 18px;
  display: grid; gap: 4px;
  font-size: .8125rem; line-height: 1.45;
}
.an-cartao-foto figcaption strong {
  font-family: var(--an-font-titulo); font-weight: 700; font-size: .95rem;
  color: var(--an-fg); letter-spacing: -0.01em;
}
.an-cartao-foto figcaption span { color: var(--an-fg-muted); }
.an-fundo-claro .an-cartao-foto figcaption strong { color: var(--an-fg-claro); }
.an-fundo-claro .an-cartao-foto figcaption span { color: var(--an-fg-claro-muted); }

/* Halo fúcsia opcional, um por seção */
.an-cartao-foto--halo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 80% 0%, rgba(236,17,128,.20) 0%, rgba(236,17,128,0) 62%);
}

/* Símbolo: o traço herda a cor do elemento pai */
.an-runa { color: var(--an-fucsia); line-height: 0; }
.an-runa .an-runa-svg { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------------------
   12. LOGOTIPO
   Símbolo mais nome, montado em HTML para que o nome use a Chivo carregada
   pelo tema. Proporções travadas: o símbolo tem 1,72 vez a altura da caixa
   do nome e o respiro entre os dois é 0,30 vez a altura do símbolo.
   -------------------------------------------------------------------------- */
.an-logo {
  --an-logo-sim: 48px;                          /* altura do símbolo */
  display: inline-flex; align-items: center;
  gap: calc(var(--an-logo-sim) * .30);
  color: var(--an-fucsia);
  text-decoration: none; line-height: 1;
}
.an-logo:hover { color: var(--an-fucsia); }
.an-logo__marca { width: var(--an-logo-sim); height: var(--an-logo-sim); flex: none; }
.an-logo__marca svg { width: 100%; height: 100%; display: block; }
.an-logo__texto { display: grid; gap: calc(var(--an-logo-sim) * .09); }
.an-logo__nome {
  font-family: var(--an-font-titulo);
  font-weight: 900;
  font-size: calc(var(--an-logo-sim) / 1.72);
  letter-spacing: -0.025em;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}
.an-logo__descritor {
  font-family: var(--an-font-corpo);
  font-weight: 600;
  font-size: calc(var(--an-logo-sim) / 5.1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--an-fg-claro-soft);
  white-space: nowrap;
}
.an-secao:not(.an-fundo-claro) .an-logo__descritor,
.an-logo--claro .an-logo__descritor { color: var(--an-fg-soft); }

/* Sobre fundo escuro, o lockup inteiro em Gelo Técnico */
.an-logo--claro { color: var(--an-gelo); }

/* Empilhado, para espaço estreito */
.an-logo--empilhado { flex-direction: column; gap: calc(var(--an-logo-sim) * .22); text-align: center; }
.an-logo--empilhado .an-logo__texto { justify-items: center; }
.an-logo--empilhado .an-logo__nome { font-size: calc(var(--an-logo-sim) / 2.6); }
.an-logo--empilhado .an-logo__descritor { font-size: calc(var(--an-logo-sim) / 7.5); }

/* --------------------------------------------------------------------------
   13. CONVIVÊNCIA COM AS ROWS DO SALIENT
   As faixas de fundo precisam sangrar de ponta a ponta, mesmo quando o
   conteúdo respeita o container. O Salient marca a row de largura total como
   .full-width-section, e é nela que o pad é pintado.
   -------------------------------------------------------------------------- */
.wpb_row.an-pad-a, .wpb_row.an-pad-a-baixo, .wpb_row.an-pad-b,
.wpb_row.an-pad-c, .wpb_row.an-pad-d, .wpb_row.an-fundo-claro,
.full-width-section.an-pad-a, .full-width-section.an-pad-a-baixo,
.full-width-section.an-pad-b, .full-width-section.an-pad-c,
.full-width-section.an-pad-d, .full-width-section.an-fundo-claro {
  background-attachment: scroll;
}
/* O Salient escurece o texto por padrão em row clara; nas faixas escuras o
   texto vem do design system. */
.an-pad-a, .an-pad-a-baixo, .an-pad-b, .an-pad-c, .an-pad-d { color: var(--an-fg); }
.an-pad-a h1, .an-pad-a h2, .an-pad-a h3, .an-pad-a h4, .an-pad-a h5, .an-pad-a h6,
.an-pad-a-baixo h1, .an-pad-a-baixo h2, .an-pad-a-baixo h3, .an-pad-a-baixo h4, .an-pad-a-baixo h5, .an-pad-a-baixo h6,
.an-pad-b h1, .an-pad-b h2, .an-pad-b h3, .an-pad-b h4, .an-pad-b h5, .an-pad-b h6,
.an-pad-c h1, .an-pad-c h2, .an-pad-c h3, .an-pad-c h4, .an-pad-c h5, .an-pad-c h6 { color: var(--an-fg); }

/* --------------------------------------------------------------------------
   14. LOGOTIPO NO CABEÇALHO
   O Salient aceita logo em texto, que usa a Chivo definida em Theme Options.
   Esta regra desenha o símbolo antes do nome, sem precisar subir imagem.
   Para desligar, remova o bloco.
   -------------------------------------------------------------------------- */
#header-outer #top .row .col.span_3 .brand a.brand-name,
#header-outer #top .row .col.span_3 #logo.brand-name {
  display: inline-flex; align-items: center; gap: .42em;
  font-family: var(--an-font-titulo); font-weight: 900; letter-spacing: -0.025em;
}
#header-outer #top .row .col.span_3 .brand a.brand-name::before,
#header-outer #top .row .col.span_3 #logo.brand-name::before {
  content: ""; flex: none;
  width: 1.72em; height: 1.72em;
  background: currentColor;
  -webkit-mask: var(--an-simbolo) center / contain no-repeat;
  mask: var(--an-simbolo) center / contain no-repeat;
}
:root {
  /* símbolo em máscara, para herdar a cor do cabeçalho */
  --an-simbolo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-330%20-330%20660%20660%27%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27294.1%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%2748.2%27%2F%3E%3Cpath%20transform%3D%27translate%28-391.4%2C-373.3%29%20translate%280%2C742%29%20scale%280.1%2C-0.1%29%27%20fill%3D%27%23000%27%20fill-rule%3D%27evenodd%27%20d%3D%27M3350%203395%20l0%20-2475%20185%200%20185%200%200%201088%200%201087%2023%2014%20c12%208%20168%20103%0A347%20211%20179%20108%20535%20324%20793%20480%20257%20155%20467%20286%20467%20290%200%2017%20-182%20305%20-191%0A302%20-13%20-3%20-69%20-37%20-1147%20-690%20-156%20-95%20-285%20-172%20-287%20-172%20-3%200%20-5%20208%20-5%0A463%20l0%20463%2033%2019%20c245%20143%201381%20839%201380%20845%20-2%205%20-43%2076%20-93%20158%20l-91%20150%0A-177%20-108%20c-769%20-466%20-1029%20-623%20-1039%20-627%20-10%20-4%20-13%2097%20-13%20486%20l0%20491%0A-185%200%20-185%200%200%20-2475z%27%2F%3E%3C%2Fsvg%3E");
}

/* ==========================================================================
   15. CAMADA EDITORIAL DO BLOG
   Versão 1.4.0 · 11/09/2026

   O que esta seção resolve, medido no post publicado em 11/09/2026:

   O Salient centraliza célula de tabela dentro de post, pela regra
   `.post table td, .post table th { text-align: center }`. Centralizar
   funciona em célula de uma palavra e atrapalha em célula de três linhas,
   porque cada linha começa num ponto diferente e o olho perde a margem de
   retorno. Aqui o alinhamento volta para a esquerda.

   O Salient também deixa a célula em `vertical-align: baseline` com
   `line-height: 28px` sobre fonte de 14px. Com linhas de altura desigual,
   o conteúdo flutua. Aqui a célula alinha pelo topo.

   A especificidade usa `body .main-content` de propósito, porque o Salient
   define a borda da célula em `body:not(.woocommerce-cart) .main-content td`,
   que ganha de seletor mais curto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15.1 TABELA
   Estilo fixo para qualquer tabela do site, em post e em página.
   -------------------------------------------------------------------------- */

body .main-content figure.wp-block-table,
body .main-content .wpb_text_column figure.wp-block-table {
  margin: 34px 0;
  /* Em tela estreita a tabela rola na horizontal em vez de esmagar coluna.
     Três colunas de texto abaixo de 560px viram uma palavra por linha. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

body .main-content figure.wp-block-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--an-cinza-suave);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  font-family: var(--an-font-corpo);
  font-size: 15px;
  line-height: 1.55;
  color: var(--an-fg-claro-soft);
}

body .main-content figure.wp-block-table thead th {
  background: var(--an-noturno);
  color: var(--an-gelo);
  font-family: var(--an-font-titulo);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
  padding: 14px 18px;
  border: 0;
}

body .main-content figure.wp-block-table tbody td {
  text-align: left;
  vertical-align: top;
  padding: 15px 18px;
  border: 0;
  border-top: 1px solid var(--an-cinza-suave);
  font-size: 15px;
  line-height: 1.55;
}

body .main-content figure.wp-block-table tbody tr:first-child td { border-top: 0; }

/* Zebra discreta. O suficiente para o olho seguir a linha numa tabela larga,
   sem virar listra. */
body .main-content figure.wp-block-table tbody tr:nth-child(even) td {
  background: #FAFBFF;
}

/* A primeira coluna funciona como rótulo da linha. */
body .main-content figure.wp-block-table tbody td:first-child {
  font-weight: 600;
  color: var(--an-fg-claro);
  min-width: 9em;
}

body .main-content figure.wp-block-table td a { color: var(--an-fucsia-forte); }

body .main-content figure.wp-block-table figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--an-fg-claro-muted);
  text-align: left;
}

/* Tabela sobre faixa escura. */
body .main-content .an-fundo-escuro figure.wp-block-table table,
body .main-content figure.wp-block-table.an-escura table {
  background: var(--an-elevado);
  border-color: rgba(255,255,255,.14);
  color: #C4CBE4;
}
body .main-content .an-fundo-escuro figure.wp-block-table thead th,
body .main-content figure.wp-block-table.an-escura thead th {
  background: #0A102E;
  color: var(--an-ciano);
}
body .main-content .an-fundo-escuro figure.wp-block-table tbody td,
body .main-content figure.wp-block-table.an-escura tbody td {
  border-top-color: rgba(255,255,255,.10);
}
body .main-content .an-fundo-escuro figure.wp-block-table tbody tr:nth-child(even) td,
body .main-content figure.wp-block-table.an-escura tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.03);
}
body .main-content .an-fundo-escuro figure.wp-block-table tbody td:first-child,
body .main-content figure.wp-block-table.an-escura tbody td:first-child {
  color: var(--an-gelo);
}

@media (max-width: 690px) {
  body .main-content figure.wp-block-table table { font-size: 14px; }
  body .main-content figure.wp-block-table thead th,
  body .main-content figure.wp-block-table tbody td { padding: 12px 14px; }
}

/* --------------------------------------------------------------------------
   15.2 ETIQUETA DE DADO
   As quatro etiquetas da seção 8 do Brandbook Master, desenhadas sobre o
   bloco de citação do núcleo do WordPress. Assim elas funcionam sem depender
   de plugin, e degradam para uma citação comum se o tema mudar.
   -------------------------------------------------------------------------- */

body .main-content blockquote.an-dado {
  --an-et: var(--an-fucsia);
  margin: 28px 0;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--an-cinza-suave);
  border-left: 4px solid var(--an-et);
  border-radius: 4px 12px 12px 4px;
  font-style: normal;
  quotes: none;
}
body .main-content blockquote.an-dado::before,
body .main-content blockquote.an-dado::after { content: none; }

body .main-content blockquote.an-dado p {
  margin: 0;
  font-family: var(--an-font-corpo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--an-fg-claro);
  font-style: normal;
}

body .main-content blockquote.an-dado p strong:first-child {
  font-family: var(--an-font-titulo);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--an-et);
  display: block;
  margin-bottom: 7px;
}

/* Ciano do brandbook reprova em contraste sobre fundo claro, então a etiqueta
   de fato usa a versão escurecida. Medido: 22E8F0 sobre branco dá 1,47. */
body .main-content blockquote.an-dado--fato       { --an-et: #0E8E96; }
body .main-content blockquote.an-dado--estimativa { --an-et: var(--an-roxo); }
body .main-content blockquote.an-dado--hipotese   { --an-et: var(--an-fucsia-medio); }
body .main-content blockquote.an-dado--autoral    { --an-et: var(--an-fucsia); }

/* --------------------------------------------------------------------------
   15.3 LINHA DE APOIO E MARCA DE PENDÊNCIA
   -------------------------------------------------------------------------- */

body .main-content p.an-apoio {
  font-family: var(--an-font-corpo);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--an-fg-claro-soft);
  margin: 0 0 30px;
}
body .main-content p.an-apoio em { font-style: normal; }

/* Marca de trabalho interno. Fica propositalmente feia para ninguém publicar
   sem ver. Some do texto quando a lacuna for resolvida. */
body .main-content p.an-pendencia {
  margin: 26px 0;
  padding: 14px 16px;
  background: #FFF4E5;
  border: 1px dashed #B26B00;
  border-radius: 8px;
  color: #7A4A00;
  font-size: 15px;
  line-height: 1.55;
}
body .main-content p.an-pendencia strong { color: #7A4A00; letter-spacing: .06em; }


/* ==========================================================================
   16. CAMADA DE CELULAR
   Versão 1.5.0 · 11/09/2026

   O que esta seção resolve, medido no site publicado em 11/09/2026, em
   visor de 375 × 812:

   O Salient calcula o recuo de coluna para desktop e não o reduz no celular.
   O resultado é uma margem lateral que varia de 23 px a 96 px entre seções
   da mesma home, e cartões que sobram com 183 px úteis de texto num visor
   de 375, ou 49% da tela virada em margem.

   A medida única adotada é 22 px, que é o valor que a maioria das seções já
   usava. Para mudar, basta trocar --an-margem-celular.
   ========================================================================== */

:root { --an-margem-celular: 22px; }

@media (max-width: 690px) {

  /* ------------------------------------------------------------------------
     16.1 MARGEM LATERAL ÚNICA
     O container do Salient usa 88% de largura, o que dá 22,5 px em 375 e
     cresce junto com a tela. Fixar em pixel mantém a margem igual em 360,
     em 375 e em 430.
     ------------------------------------------------------------------------ */

  body .container,
  body .container-wrap .container,
  body .main-content > .container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--an-margem-celular);
    padding-right: var(--an-margem-celular);
  }

  /* As linhas de largura total do WPBakery saem da margem por margem
     negativa. Aqui elas voltam para dentro dela. */
  body .main-content .wpb_row > .row_col_wrap_12,
  body .main-content .wpb_row > .col.span_12 {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* ------------------------------------------------------------------------
     16.2 RECUO INTERNO DE COLUNA
     É o que produz os 96 px de margem nos cartões da home. O valor de
     desktop chega a 48 px de cada lado dentro de um cartão de 281 px.
     ------------------------------------------------------------------------ */

  body .main-content .wpb_column > .vc_column-inner,
  body .main-content .wpb_column > .column-bg-overlay-wrap + .vc_column-inner,
  body .main-content .vc_col-sm-12,
  body .main-content .vc_col-sm-6,
  body .main-content .vc_col-sm-4,
  body .main-content .vc_col-sm-3 {
    padding-left: 0;
    padding-right: 0;
  }

  body .main-content .wpb_column.has-animation > .vc_column-inner,
  body .main-content .wpb_column[class*="padding"] > .vc_column-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Linha interna do WPBakery que sangra 25 px para cada lado. Em desktop
     isso monta a calha entre colunas. Em celular, com as colunas já
     empilhadas, sobra só o estouro de borda. */
  body .main-content .wpb_row.inner_row > .row_col_wrap_12_inner {
    margin-left: 0;
    margin-right: 0;
  }

  /* ------------------------------------------------------------------------
     16.3 TEXTO LONGO SEM ESPAÇO PARA QUEBRAR
     Endereço de e-mail e URL não têm ponto de quebra natural, então saem
     pela borda em vez de passar para a linha de baixo. É o que corta
     contato@amandanoronha.com.br na página de Contato.
     ------------------------------------------------------------------------ */

  body .main-content h1,
  body .main-content h2,
  body .main-content h3,
  body .main-content h4,
  body .main-content h5,
  body .main-content p,
  body .main-content li,
  body .main-content td {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body .main-content h3 { font-size: 19px; line-height: 1.3; }

  /* ------------------------------------------------------------------------
     16.4 ALINHAMENTO
     Centralizar funciona em rótulo e em título curto. Em parágrafo de oito
     linhas, cada linha começa num ponto diferente e o olho perde a margem
     de retorno a cada quebra.
     ------------------------------------------------------------------------ */

  body .main-content .wpb_text_column p,
  body .main-content .nectar-responsive-text p {
    text-align: left;
  }

  body.single-post .main-content h1,
  body.single-post .main-content .entry-title {
    text-align: left;
  }

  /* ------------------------------------------------------------------------
     16.5 ÁREA DE TOQUE
     A WCAG 2.2 pede no mínimo 24 × 24 px no critério 2.5.8, nível AA, e
     44 × 44 px no critério 2.5.5, nível AAA. Os botões do site respondem
     hoje numa faixa de 27 px, porque o preenchimento está no invólucro e
     não no link. Nada muda visualmente.
     ------------------------------------------------------------------------ */

  body .nectar-cta .link_wrap { padding: 0; }

  body .nectar-cta .link_wrap > a.link_text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 24px;
  }

  body #footer-outer a[class*="social"],
  body .main-content a[class*="social"],
  body .nectar-social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   16.6 LISTAGEM DO BLOG
   A caixa de título é dimensionada pelo conteúdo, então um título longo
   quebra em 149 px dentro de um cartão de 330 px enquanto sobra largura ao
   lado. Vale em qualquer largura, não só em celular.
   -------------------------------------------------------------------------- */

body .post-area .article-content-wrap .title-wrap,
body .nectar-post-grid-item .content .title,
body .masonry-blog-item .article-content-wrap h2,
body .post-area article .title-wrap h2 {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 690px) {
  body .post-area article h2,
  body .nectar-post-grid-item h3 { font-size: 19px; line-height: 1.25; }
}

/* --------------------------------------------------------------------------
   16.7 BOTÃO SECUNDÁRIO, EM LINHA

   Dois problemas resolvidos pela mesma decisão.

   O primeiro é de hierarquia. Quando o botão secundário também é preenchido,
   os dois disputam o mesmo peso e o par fica pesado. Em linha, o primário
   continua sendo o único bloco cheio de cor, e o secundário se lê como a
   alternativa que ele é.

   O segundo é técnico. O Salient aplica backdrop-filter: blur(14px) no
   invólucro do botão, que tem canto de 100 px. Durante a animação de entrada
   do hero o navegador promove esse elemento a camada própria e deixa de
   aplicar o recorte arredondado ao fundo desfocado, então por cerca de dois
   segundos o botão aparece como um retângulo claro. Conferido em Chromium em
   11/09/2026, na mesma página, antes e depois da animação terminar. Fundo
   transparente dispensa o desfoque, e o retângulo não tem como aparecer.

   O contorno usa o Ciano, que no sistema da marca é cor de acento e não de
   ação principal. Contraste do Ciano sobre o gradiente escuro do hero em
   torno de 9 para 1, e do Noturno sobre o Ciano no estado de foco em torno
   de 12 para 1, ambos acima do mínimo de 4,5 da WCAG para texto.
   -------------------------------------------------------------------------- */

body .nectar-cta[class*="backdrop_filter_blur"] .link_wrap,
body .nectar-cta.an-bt-linha .link_wrap {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  border: 1.5px solid var(--an-ciano, #22E8F0);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

body .nectar-cta[class*="backdrop_filter_blur"] .link_wrap a,
body .nectar-cta[class*="backdrop_filter_blur"] .link_wrap a span,
body .nectar-cta.an-bt-linha .link_wrap a,
body .nectar-cta.an-bt-linha .link_wrap a span {
  color: var(--an-ciano, #22E8F0);
}

body .nectar-cta[class*="backdrop_filter_blur"] .link_wrap:hover,
body .nectar-cta[class*="backdrop_filter_blur"] .link_wrap:focus-within,
body .nectar-cta.an-bt-linha .link_wrap:hover,
body .nectar-cta.an-bt-linha .link_wrap:focus-within {
  background: var(--an-ciano, #22E8F0);
  border-color: var(--an-ciano, #22E8F0);
}

body .nectar-cta[class*="backdrop_filter_blur"] .link_wrap:hover a,
body .nectar-cta[class*="backdrop_filter_blur"] .link_wrap:hover a span,
body .nectar-cta[class*="backdrop_filter_blur"] .link_wrap:focus-within a,
body .nectar-cta[class*="backdrop_filter_blur"] .link_wrap:focus-within a span,
body .nectar-cta.an-bt-linha .link_wrap:hover a,
body .nectar-cta.an-bt-linha .link_wrap:hover a span,
body .nectar-cta.an-bt-linha .link_wrap:focus-within a,
body .nectar-cta.an-bt-linha .link_wrap:focus-within a span {
  color: var(--an-noturno, #0C1438);
}

/* Em faixa clara o Ciano perde contraste contra o Gelo. Ali o contorno
   assume o Fúcsia Forte, que é a mesma família do botão primário e mantém a
   leitura de secundário pela ausência de preenchimento. */
.an-bt-linha--claro .link_wrap,
body .light-bg .nectar-cta.an-bt-linha .link_wrap {
  border-color: var(--an-fucsia-forte, #C40E6B);
}

.an-bt-linha--claro .link_wrap a,
.an-bt-linha--claro .link_wrap a span,
body .light-bg .nectar-cta.an-bt-linha .link_wrap a,
body .light-bg .nectar-cta.an-bt-linha .link_wrap a span {
  color: var(--an-fucsia-forte, #C40E6B);
}

.an-bt-linha--claro .link_wrap:hover,
.an-bt-linha--claro .link_wrap:focus-within,
body .light-bg .nectar-cta.an-bt-linha .link_wrap:hover,
body .light-bg .nectar-cta.an-bt-linha .link_wrap:focus-within {
  background: var(--an-fucsia-forte, #C40E6B);
  border-color: var(--an-fucsia-forte, #C40E6B);
}

.an-bt-linha--claro .link_wrap:hover a,
.an-bt-linha--claro .link_wrap:hover a span,
body .light-bg .nectar-cta.an-bt-linha .link_wrap:hover a,
body .light-bg .nectar-cta.an-bt-linha .link_wrap:hover a span {
  color: #FFFFFF;
}


/* ==========================================================================
   17. SUBTÍTULO DO CABEÇALHO DE PÁGINA

   O Salient escreve o subtítulo dentro do h1, como um span. O functions.php,
   seção 8, tira o span de lá e o transforma neste parágrafo. As regras abaixo
   devolvem a ele a aparência de linha de apoio, agora numa linha própria.
   ========================================================================== */

.row .col.section-title .an-cab__sub,
.an-cab__sub {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: normal;
  color: #54608A;
  margin: 12px 0 0;
  padding: 0;
  max-width: 62ch;
}

@media only screen and (max-width: 690px) {

  .row .col.section-title .an-cab__sub,
  .an-cab__sub {
    font-size: 15px;
    line-height: 24px;
    margin-top: 8px;
  }
}