/* ============================================================================
   Setor 3 Contabilidade — biblioteca de componentes
   ----------------------------------------------------------------------------
   Construída sobre tokens.css. Cada componente reproduz a geometria e o
   comportamento MEDIDOS no donatekart.com — ver docs/donatekart-design-system.md.
   Onde o DonateKart não tem o padrão, o componente é derivado dos tokens e está
   marcado com DERIVADO.

   Carregue sempre nesta ordem:
     <link rel="stylesheet" href="/assets/css/tokens.css">
     <link rel="stylesheet" href="/assets/css/componentes.css">
   ========================================================================= */

/* ============================================================ MARCA / LOGO
   Tratamento LEVE: o quadrado deixa de ser um bloco sólido e vira um campo
   quase branco; as barras é que ganham a cor. O S fica de uma cor só.

   Sobre contraste: a WCAG isenta explicitamente logotipo de exigência de
   contraste (1.4.3 e 1.4.11), então aqui vale legibilidade, não a régua de
   4,5:1. As barras laranja sobre o campo claro fazem 2,84:1 — suficiente para
   um símbolo em 32px ou mais.

   O FAVICON continua sólido: em 16px este tratamento leve some, e é prática
   corrente a marca ter uma versão cheia só para o ícone. */
:root {
  --s3-logo-setor:    var(--s3-laranja);   /* a palavra "Setor" */
  --s3-logo-numero:   var(--s3-tinta);     /* o número "3"      */
  --s3-logo-simbolo:  #F1E3DC;             /* campo do monograma, quase branco */
  --s3-logo-barra:    var(--s3-laranja);   /* as barras, todas na mesma cor */
  --s3-logo-acento:   var(--s3-laranja);   /* haste igual às barras: uma cor só */
}

/* ================================================================ ESTRUTURA */
.s3-container {
  width: 100%;
  max-width: var(--s3-container);
  margin-inline: auto;
  padding-inline: var(--s3-margem-lateral);
}
.s3-container--texto { max-width: var(--s3-container-texto); }
.s3-container--largo { max-width: var(--s3-container-largo); }

/* Respiro entre seções. Foi comprimido a 44px quando sete das onze seções
   estouravam a janela; com a esteira e o carrossel no lugar das grades
   antigas as seções encolheram, e 44px passou a colar uma na outra.
   64px é o teto que devolve o ar sem estourar: a 72px a seção do método
   passava 12px da janela — medido seção a seção. */
.s3-secao { padding-block: clamp(40px, 4.4vw, 64px); }
.s3-secao--clara  { background-color: var(--s3-tela); }
.s3-secao--quente { background-color: var(--s3-tela-quente); }
.s3-secao--areia  { background-color: var(--s3-tela-areia); }

/* COSTURA: a seção rebaixada ganha filete e uma sombra interna curta no topo,
   como se estivesse recuada no plano. Reforça a troca de seção sem depender
   só da cor — que é o que faltava quando três seções seguidas liam iguais. */
.s3-secao--quente, .s3-secao--areia, .s3-secao--destaque {
  border-top: 1px solid rgba(67, 33, 25, .07);
  box-shadow: inset 0 8px 16px -14px rgba(67, 33, 25, .28);
}

/* TRANSIÇÃO FUNDIDA: quando a seção de acento vem logo depois da areia, a
   aresta dura entre dois tons quentes parecidos lia como sujeira. Aqui a
   costura sai e o acento NASCE da cor da areia, cruzando em ~180px — uma
   passagem, não uma emenda. */
.s3-secao--areia + .s3-secao--destaque {
  border-top: none;
  box-shadow: none;
  background-image: linear-gradient(180deg, var(--s3-tela-areia) 0, rgba(241, 236, 224, 0) 180px);
}
/* SEÇÃO DE DESTAQUE — clara, não escura.
   No donatekart.com a tinta #432119 aparece 874 vezes em 17 rotas e só DUAS
   como fundo: o site é branco com laranja. As seções escuras que eu tinha
   posto vieram do Blackbaud e do indicium, outras referências, e era isso que
   deixava tudo pesado. O acento forte do sistema continua sendo a faixa
   laranja dos números, que a medição sustenta (73 ocorrências como fundo). */
.s3-secao--destaque {
  background-color: var(--s3-laranja-suave);
  color: var(--s3-texto);
  position: relative;
}
.s3-secao--destaque::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(120% 80% at 50% -20%, rgba(144,58,39,.10), transparent 62%);
  pointer-events: none;
}
.s3-secao--destaque > * { position: relative; z-index: var(--s3-z-base); }


/* ======================================================= AREAS DE COR
   Institucional=azul, Jornal S3=rosa, Diagnostico=verde; o resto fica no
   laranja padrao. Vale por pagina (data-secao no body, posto pelo gerador)
   e por secao da home (.s3-area--*). O primario de conversao e o logo NAO
   mudam de cor em area nenhuma. */
body[data-secao="sobre"], body[data-secao="projetos"], body[data-secao="contato"],
.s3-area--azul {
  --s3-acento: var(--s3-azul);
  --s3-acento-acao: var(--s3-azul-acao);
  --s3-acento-texto: var(--s3-azul-texto);
  --s3-acento-clara: var(--s3-azul-clara);
}
body[data-secao="conteudos"], .s3-area--rosa {
  --s3-acento: var(--s3-rosa);
  --s3-acento-acao: var(--s3-rosa-acao);
  --s3-acento-texto: var(--s3-rosa-texto);
  --s3-acento-clara: var(--s3-rosa-clara);
}
body[data-secao="diagnostico"], .s3-area--verde {
  --s3-acento: var(--s3-verde);
  --s3-acento-acao: var(--s3-verde-acao);
  --s3-acento-texto: var(--s3-verde-texto);
  --s3-acento-clara: var(--s3-verde-clara);
}

/* mantido como apelido: nada mais deve usar, mas evita quebrar página antiga */
.s3-secao--escura { background-color: var(--s3-laranja-suave); color: var(--s3-texto); }
.s3-secao--escura .s3-texto-fraco { color: rgba(255, 255, 255, .62); }

.s3-pilha    { display: flex; flex-direction: column; }
.s3-pilha > * + * { margin-top: var(--s3-e-6); }
.s3-linha    { display: flex; align-items: center; gap: var(--s3-e-5); flex-wrap: wrap; }
.s3-entre    { display: flex; align-items: center; justify-content: space-between; gap: var(--s3-e-6); flex-wrap: wrap; }

.s3-grade { display: grid; gap: var(--s3-e-8); }
.s3-grade--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.s3-grade--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.s3-grade--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* =============================================================== TIPOGRAFIA
   Título PESADO em face calorosa. Foi o caminho até aqui:
   condensada dura -> leve demais -> pesada e aberta. */
.s3-heroi, .s3-titulo-secao, .s3-subsecao, .s3-titulo-pagina,
.s3-titulo-cartao {
  margin: 0;
  font-family: var(--s3-fonte-display);
  letter-spacing: normal;
  text-wrap: balance;
}
.s3-heroi {
  /* Os DOIS POLOS do governo, medidos: título grande é LEVE (38px/500 no
     sc.gov.br), título pequeno é PESADO (18-28px/700, muitas vezes em caixa
     alta). Nós achatávamos tudo em 600 — era isso que tirava a seriedade. */
  font-weight: var(--s3-peso-medio);
  font-size: clamp(34px, 4.6vw, var(--s3-t-heroi));
  line-height: var(--s3-t-heroi-lh);
  letter-spacing: -.01em;
}
.s3-titulo-secao {
  font-weight: var(--s3-peso-medio);
  font-size: clamp(27px, 3.2vw, var(--s3-t-secao));
  line-height: var(--s3-t-secao-lh);
  letter-spacing: -.005em;
}
.s3-subsecao {
  font-weight: var(--s3-peso-negro);
  font-size: clamp(26px, 3vw, var(--s3-t-subsecao));
  line-height: var(--s3-t-subsecao-lh);
}
.s3-titulo-pagina {
  font-weight: var(--s3-peso-negro);
  font-size: clamp(21px, 2.4vw, var(--s3-t-titulo));
  line-height: var(--s3-t-titulo-lh);
}
.s3-titulo-cartao {
  font-weight: var(--s3-peso-negro);
  font-size: var(--s3-t-cartao);
  line-height: var(--s3-t-cartao-lh);
}

/* O olho de seção segue o RÓTULO do governo: caixa alta, peso 700, espaçado
   (medido: h3 20/700 uppercase no sc.gov.br). O DonateKart usava texto cinza
   normal aqui; a troca para o rótulo institucional é parte do pedido de
   seriedade — e casa com o cabeçalho do balancete, que já era assim. */
.s3-olho {
  margin: 0 0 var(--s3-e-4);
  font-size: 13px;
  line-height: 1.4;
  font-weight: var(--s3-peso-negro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--s3-acento-texto);
}
.s3-subtitulo {
  margin: 0;
  font-size: clamp(16px, 1.8vw, var(--s3-t-leitura));
  line-height: var(--s3-t-leitura-lh);
  font-weight: var(--s3-peso-normal);
}
.s3-texto  { font-size: var(--s3-t-corpo); line-height: var(--s3-t-corpo-lh); margin: 0; }
.s3-apoio  { font-size: var(--s3-t-apoio); line-height: var(--s3-t-apoio-lh); margin: 0; }
.s3-legenda {
  font-size: var(--s3-t-legenda); line-height: var(--s3-t-legenda-lh);
  font-weight: var(--s3-peso-forte); text-transform: uppercase;
  letter-spacing: .06em; margin: 0;
}
.s3-numero {
  font-family: var(--s3-fonte-display);
  font-size: var(--s3-t-titulo); line-height: 1.1;
  font-weight: var(--s3-peso-black);
}
.s3-texto-fraco { color: var(--s3-texto-fraco); }
.s3-destaque    { color: var(--s3-acento-texto); }

/* Medida de leitura confortável em texto corrido. */
.s3-prosa { max-width: 68ch; }
.s3-texto, .s3-apoio, .s3-titulo-cartao,
.s3-titulo-secao, .s3-heroi { overflow-wrap: break-word; }
.s3-prosa > * + * { margin-top: var(--s3-e-6); }

/* ==================================================================== LOGO
   Proporções do manual da marca. O SVG é inline nas páginas; aqui só a
   palavra e o alinhamento. */
/* ================================================================== BOTÕES
   Geometria medida: altura 40px, raio 6px, padding 0 24px, rótulo em caixa
   alta 16/24 peso 700 na fonte de display. */
.s3-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3-e-3);
  min-height: 40px;
  padding: 0 var(--s3-e-7);
  border: 1px solid transparent;
  border-radius: var(--s3-raio-botao);
  font-family: var(--s3-fonte);
  font-weight: var(--s3-peso-forte);
  font-size: var(--s3-t-rotulo);
  line-height: var(--s3-t-rotulo-lh);
  /* caixa normal: botão de governo não grita. A caixa alta do DonateKart
     saiu na volta da sobriedade. */
  text-transform: none;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--s3-transicao-cor), transform var(--s3-tempo) var(--s3-curva-saida),
              box-shadow var(--s3-tempo) var(--s3-curva-saida);
}
.s3-btn:hover:not(:disabled) { transform: translateY(-2px); }
.s3-btn:active:not(:disabled) { transform: translateY(0); }
.s3-btn:disabled, .s3-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* Sólido, como os botões de governo — o gradiente saiu na volta da
   sobriedade; a profundidade fica por conta da sombra discreta. */
.s3-btn--primario {
  background-color: var(--s3-laranja-acao);
  color: var(--s3-papel);
  border-color: transparent;
  box-shadow: var(--s3-sombra-marca);
}
.s3-btn--primario:hover:not(:disabled) {
  background-color: var(--s3-laranja-texto);
  box-shadow: 0 4px 14px rgba(189, 59, 23, .30);
}

.s3-btn--azul {
  background-color: var(--s3-azul); color: var(--s3-papel);
  box-shadow: 0 4px 14px rgba(0, 105, 255, .22);
}
.s3-btn--azul:hover:not(:disabled) {
  background-color: var(--s3-azul-pressionado);
  box-shadow: 0 6px 20px rgba(0, 105, 255, .32);
}

/* A inversão completa no hover é a micro-interação mais característica do
   DonateKart: fundo e texto trocam de lugar. */
.s3-btn--vazado {
  background: var(--s3-papel);
  color: var(--s3-acento-texto);
  border: 1.5px solid var(--s3-acento);
}
.s3-btn--vazado:hover:not(:disabled) { background: var(--s3-acento-acao); color: var(--s3-papel); }

.s3-btn--escuro {
  background: var(--s3-papel);
  color: var(--s3-tinta);
  border: 1px solid var(--s3-tinta);
  border-radius: var(--s3-raio-pequeno);
  height: 38px;
}
.s3-btn--escuro:hover:not(:disabled) {
  background: var(--s3-laranja); color: var(--s3-papel); border-color: var(--s3-laranja);
}

.s3-btn--texto {
  height: auto; padding: 0; background: none; border: none;
  color: var(--s3-laranja-texto);
  font-family: var(--s3-fonte);
  font-weight: var(--s3-peso-medio);
  text-transform: none;
}
.s3-btn--texto:hover:not(:disabled) { text-decoration: underline; }

.s3-btn--pequeno { height: var(--s3-altura-botao-pequeno); border-radius: var(--s3-raio-pequeno); }
.s3-btn--largo   { width: 100%; }

.s3-btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: var(--s3-papel);
  color: var(--s3-tinta);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-circulo);
  cursor: pointer;
  transition: var(--s3-transicao-cor);
}
.s3-btn-icone:hover { border-color: var(--s3-laranja); color: var(--s3-laranja); }

/* ================================================================== LINKS */
.s3-link { color: var(--s3-laranja-texto); text-decoration: none; }
.s3-link:hover { text-decoration: underline; }

/* Na navegação a cor vai de tinta para laranja em 200ms ease — medido. */
.s3-nav-link {
  color: var(--s3-tinta); text-decoration: none;
  font-size: var(--s3-t-apoio); line-height: var(--s3-t-apoio-lh);
  font-weight: var(--s3-peso-forte);
  transition: color var(--s3-tempo) var(--s3-curva);
}
.s3-nav-link:hover, .s3-nav-link[aria-current="page"] { color: var(--s3-laranja-texto); }

/* ================================================================ CARTÕES
   Raio 8px é o valor mais frequente do site (332 ocorrências). */
.s3-cartao {
  background-color: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-cartao);
  overflow: hidden;
}
.s3-cartao__corpo { padding: var(--s3-e-7); }
.s3-cartao__pe {
  padding: var(--s3-e-5) var(--s3-e-7);
  border-top: 1px solid var(--s3-borda);
}

/* A foto encosta no topo e acompanha o raio só em cima — 52 ocorrências. */
.s3-cartao__midia {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--s3-raio-imagem-topo);
  background: var(--s3-tela);
}

/* O salto do cartão, MEDIDO no sc.gov.br: escala (lá 1,1 num cartão de 205px;
   aqui 1,05, que cresce os mesmos ~20px num cartão de 360), halo central
   rgba(0,0,0,.25) 0 0 10px e 400ms. O z-index sobe para o cartão crescer POR
   CIMA dos vizinhos — é isso que dá o "sobressair". */
.s3-cartao--clicavel { display: block; text-decoration: none; color: inherit;
  position: relative;
  transition: border-color 400ms var(--s3-curva),
              box-shadow 400ms var(--s3-curva),
              transform 400ms var(--s3-curva); }
.s3-cartao--clicavel:hover {
  border-color: var(--s3-laranja);
  box-shadow: 0 0 10px rgba(0, 0, 0, .25);
  transform: scale(1.05);
  z-index: var(--s3-z-elevado);
}
.s3-cartao--destaque { box-shadow: var(--s3-sombra-marca); border-color: var(--s3-laranja); }

/* ================================================================ SELOS */
.s3-selo {
  display: inline-flex; align-items: center; gap: var(--s3-e-1);
  padding: 5px var(--s3-e-5);
  border-radius: var(--s3-raio-pilula);
  font-size: var(--s3-t-legenda); line-height: var(--s3-t-legenda-lh);
  font-weight: var(--s3-peso-forte); text-transform: uppercase;
  background: var(--s3-tela); color: var(--s3-texto-fraco);
  white-space: nowrap;
}
.s3-selo--marca   { background: var(--s3-acento-clara);  color: var(--s3-acento-texto); }
.s3-selo--sucesso { background: var(--s3-sucesso-claro);  color: var(--s3-sucesso-texto); }
.s3-selo--erro    { background: var(--s3-erro-claro);     color: var(--s3-erro); }
.s3-selo--aviso   { background: var(--s3-aviso-claro);    color: var(--s3-aviso); }
.s3-selo--info    { background: var(--s3-azul-claro);     color: var(--s3-azul); }
.s3-selo--solido  { background: var(--s3-laranja-texto);  color: var(--s3-papel); }

/* ============================================================== FORMULÁRIO */
.s3-campo { display: block; margin-bottom: var(--s3-e-7); }
.s3-campo > label:not(.s3-opcao) {
  display: block;
  font-size: var(--s3-t-apoio); line-height: var(--s3-t-apoio-lh);
  font-weight: var(--s3-peso-forte);
  margin-bottom: var(--s3-e-2);
}
.s3-campo__ajuda { display: block; font-size: var(--s3-t-apoio); color: var(--s3-texto-fraco); margin-top: var(--s3-e-2); }
.s3-campo__erro  { display: block; font-size: var(--s3-t-apoio); color: var(--s3-erro); margin-top: var(--s3-e-2); }

.s3-entrada, .s3-selecao, .s3-area {
  width: 100%;
  min-height: var(--s3-altura-campo);
  /* padding vertical zero no campo de uma linha: com padding, a altura ia a
     46px em vez dos 40px medidos. A área de texto recebe o seu logo abaixo. */
  padding: 0 var(--s3-e-5);
  background: var(--s3-papel);
  color: var(--s3-texto);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-botao);
  font-family: var(--s3-fonte);
  font-size: var(--s3-t-corpo);
  line-height: var(--s3-t-corpo-lh);
  transition: var(--s3-transicao-cor), var(--s3-transicao-sombra);
}
.s3-area { min-height: 120px; padding: var(--s3-e-4) var(--s3-e-5); resize: vertical; }
.s3-entrada::placeholder, .s3-area::placeholder { color: var(--s3-texto-fraco); }
.s3-entrada:hover, .s3-selecao:hover, .s3-area:hover { border-color: var(--s3-cinza-medio); }
.s3-entrada:focus, .s3-selecao:focus, .s3-area:focus {
  outline: none;
  border-color: var(--s3-laranja);
  box-shadow: var(--s3-sombra-brilho);
}
.s3-entrada[aria-invalid="true"], .s3-area[aria-invalid="true"] { border-color: var(--s3-erro); }

.s3-selecao {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23292925' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

/* Opção com controle próprio: o rádio nativo tem tamanho e espaçamento
   diferentes em cada sistema, e era isso que colava a bolinha no texto. */
.s3-opcoes { display: flex; flex-direction: column; gap: var(--s3-e-5); }
.s3-opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--s3-e-5);
  padding: var(--s3-e-5) var(--s3-e-7);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-botao);
  font-size: var(--s3-t-corpo);
  line-height: var(--s3-t-corpo-lh);
  cursor: pointer;
  transition: var(--s3-transicao-cor);
}
.s3-opcao:hover { border-color: var(--s3-laranja); background: var(--s3-laranja-clara); }
.s3-opcao input[type="radio"], .s3-opcao input[type="checkbox"] {
  appearance: none;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  /* centraliza na primeira linha: (24px de linha − 20px do controle) / 2 */
  margin: 2px 0 0;
  border: 2px solid var(--s3-cinza-medio);
  border-radius: var(--s3-raio-circulo);
  background: var(--s3-papel);
  cursor: pointer;
  transition: var(--s3-transicao-cor);
}
.s3-opcao input[type="checkbox"] { border-radius: var(--s3-raio-pequeno); }
.s3-opcao input:checked {
  border-color: var(--s3-laranja);
  background-color: var(--s3-laranja);
  box-shadow: inset 0 0 0 4px var(--s3-papel);
}
.s3-opcao input[type="checkbox"]:checked { box-shadow: inset 0 0 0 3px var(--s3-papel); }
.s3-opcao > span { flex: 1 1 auto; min-width: 0; }
.s3-opcao:has(input:checked) { border-color: var(--s3-laranja); background: var(--s3-laranja-clara); }

/* Envio de arquivo. DERIVADO — o DonateKart não tem upload. */
.s3-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3-e-3);
  padding: var(--s3-e-9) var(--s3-e-7);
  border: 2px dashed var(--s3-borda);
  border-radius: var(--s3-raio-cartao);
  background: var(--s3-papel);
  text-align: center;
  cursor: pointer;
  transition: var(--s3-transicao-cor);
}
.s3-upload:hover, .s3-upload[data-arrastando="true"] {
  border-color: var(--s3-laranja);
  background: var(--s3-laranja-clara);
}

/* ============================================================== PROGRESSO
   Existe no DonateKart (keyframe style_progress): trilha na cor de borda,
   preenchimento laranja, cantos em pílula. */
.s3-progresso {
  height: 8px;
  background: var(--s3-borda);
  border-radius: var(--s3-raio-pilula);
  overflow: hidden;
}
.s3-progresso__barra {
  height: 100%;
  background: var(--s3-acento);
  border-radius: var(--s3-raio-pilula);
  transition: width var(--s3-tempo-lento) var(--s3-curva-expressiva);
}
.s3-progresso--sucesso .s3-progresso__barra { background: var(--s3-sucesso); }

/* ================================================================ TABELA
   DERIVADO — o DonateKart não expõe tabela de dados. */
.s3-tabela-env { width: 100%; overflow-x: auto; }
.s3-tabela { width: 100%; border-collapse: collapse; font-size: var(--s3-t-apoio); }
.s3-tabela th {
  text-align: left;
  padding: var(--s3-e-5) var(--s3-e-6);
  font-size: var(--s3-t-legenda); line-height: var(--s3-t-legenda-lh);
  font-weight: var(--s3-peso-forte); text-transform: uppercase;
  color: var(--s3-texto-fraco);
  border-bottom: 1px solid var(--s3-borda);
  white-space: nowrap;
}
.s3-tabela td {
  padding: var(--s3-e-5) var(--s3-e-6);
  border-bottom: 1px solid var(--s3-borda);
  vertical-align: middle;
}
.s3-tabela tbody tr { transition: background var(--s3-tempo) var(--s3-curva); }
.s3-tabela tbody tr:hover { background: var(--s3-tela-quente); }

/* ============================================================== ACORDEÃO */
.s3-acordeao { border: 1px solid var(--s3-borda); border-radius: var(--s3-raio-cartao); overflow: hidden; background: var(--s3-papel); }
.s3-acordeao__item + .s3-acordeao__item { border-top: 1px solid var(--s3-borda); }
.s3-acordeao__gatilho {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3-e-6);
  width: 100%; padding: var(--s3-e-7);
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--s3-fonte);
  font-size: var(--s3-t-cartao); line-height: var(--s3-t-cartao-lh);
  font-weight: var(--s3-peso-forte); color: var(--s3-texto);
  transition: var(--s3-transicao-cor);
}
.s3-acordeao__gatilho:hover { color: var(--s3-laranja); }
.s3-acordeao__sinal { flex: 0 0 auto; color: var(--s3-laranja); transition: transform var(--s3-tempo-medio) var(--s3-curva); }
.s3-acordeao__gatilho[aria-expanded="true"] .s3-acordeao__sinal { transform: rotate(45deg); }
.s3-acordeao__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--s3-tempo-medio) var(--s3-curva-saida); }
.s3-acordeao__painel[data-aberto="true"] { grid-template-rows: 1fr; }
.s3-acordeao__conteudo { overflow: hidden; }
.s3-acordeao__conteudo > div { padding: 0 var(--s3-e-7) var(--s3-e-7); color: var(--s3-texto-fraco); }

/* ================================================================== ABAS */
.s3-abas { display: flex; gap: var(--s3-e-2); border-bottom: 1px solid var(--s3-borda); overflow-x: auto; }
.s3-aba {
  padding: var(--s3-e-5) var(--s3-e-6);
  background: none; border: none; border-bottom: 2px solid transparent;
  font-family: var(--s3-fonte);
  font-size: var(--s3-t-apoio); font-weight: var(--s3-peso-forte);
  color: var(--s3-texto-fraco); cursor: pointer; white-space: nowrap;
  transition: var(--s3-transicao-cor);
}
.s3-aba:hover { color: var(--s3-texto); }
.s3-aba[aria-selected="true"] { color: var(--s3-laranja); border-bottom-color: var(--s3-laranja); }

/* =============================================================== ETAPAS
   DERIVADO — linha do tempo do processo seletivo. */
.s3-etapas { display: flex; flex-direction: column; gap: 0; }
.s3-etapa { display: grid; grid-template-columns: 32px 1fr; gap: var(--s3-e-6); position: relative; padding-bottom: var(--s3-e-8); }
.s3-etapa:last-child { padding-bottom: 0; }
.s3-etapa::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: 0;
  width: 2px; background: var(--s3-borda);
}
.s3-etapa:last-child::before { display: none; }
.s3-etapa__marca {
  width: 32px; height: 32px; border-radius: var(--s3-raio-circulo);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--s3-t-apoio); font-weight: var(--s3-peso-negro);
  background: var(--s3-papel); border: 2px solid var(--s3-borda);
  color: var(--s3-texto-fraco); position: relative; z-index: var(--s3-z-base);
}
.s3-etapa--concluida .s3-etapa__marca { background: var(--s3-sucesso-texto); border-color: var(--s3-sucesso-texto); color: var(--s3-papel); }
.s3-etapa--concluida::before { background: var(--s3-sucesso); }
.s3-etapa--atual .s3-etapa__marca {
  background: var(--s3-laranja); border-color: var(--s3-laranja); color: var(--s3-papel);
  box-shadow: var(--s3-sombra-brilho);
}

/* ================================================================ AVISOS */
.s3-aviso {
  display: flex; gap: var(--s3-e-5);
  padding: var(--s3-e-6) var(--s3-e-7);
  border-radius: var(--s3-raio-cartao);
  border: 1px solid var(--s3-borda);
  background: var(--s3-tela);
  font-size: var(--s3-t-apoio); line-height: var(--s3-t-apoio-lh);
}
.s3-aviso--sucesso { background: var(--s3-sucesso-claro); border-color: var(--s3-sucesso); }
.s3-aviso--erro    { background: var(--s3-erro-claro);    border-color: var(--s3-erro); }
.s3-aviso--atencao { background: var(--s3-aviso-claro);   border-color: var(--s3-aviso); }
.s3-aviso--info    { background: var(--s3-azul-claro);    border-color: var(--s3-azul); }
.s3-aviso--marca   { background: var(--s3-laranja-clara); border-color: var(--s3-laranja); }

/* ================================================================= MODAL */
.s3-modal-fundo {
  position: fixed; inset: 0; z-index: var(--s3-z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s3-e-7);
  background: rgba(67, 33, 25, .55);
}
.s3-modal {
  position: relative;
  width: min(100%, 560px);
  max-height: 88vh; overflow-y: auto;
  background: var(--s3-papel);
  border-radius: var(--s3-raio-medio);
  box-shadow: var(--s3-sombra-4);
  padding: clamp(20px, 4vw, 32px);
  animation: s3-sobe var(--s3-tempo-medio) var(--s3-curva-expressiva);
}
@keyframes s3-sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ============================================================== ESQUELETO
   O DonateKart usa shimmer para carregamento — reproduzido aqui. */
.s3-esqueleto {
  background: linear-gradient(90deg, var(--s3-tela) 25%, var(--s3-borda-suave) 37%, var(--s3-tela) 63%);
  background-size: 400% 100%;
  border-radius: var(--s3-raio-pequeno);
  animation: s3-shimmer 1.4s ease infinite;
}
@keyframes s3-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ============================================================== REVELAÇÃO
   Entrada por scroll. O JS marca [data-revelar] e liga [data-visivel]. */
[data-revelar] {
  opacity: 0; translate: 0 24px;
  /* A lista inclui as propriedades do hover: `transition` não se acumula
     entre regras — esta substituía a do cartão e o salto ficava seco,
     sem os 400ms medidos no governo. */
  transition: opacity var(--s3-tempo-medio) var(--s3-curva-saida),
              translate var(--s3-tempo-medio) var(--s3-curva-saida),
              transform 400ms var(--s3-curva),
              box-shadow 400ms var(--s3-curva),
              border-color var(--s3-tempo-rapido) var(--s3-curva);
}
[data-revelar][data-visivel="true"] { opacity: 1; translate: none; }

/* ============================================================= UTILITÁRIOS */
.s3-oculto { display: none !important; }
.s3-so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.s3-pular {
  position: absolute; left: 0; top: 0; z-index: var(--s3-z-modal);
  background: var(--s3-tinta); color: var(--s3-papel);
  padding: var(--s3-e-5) var(--s3-e-7); border-radius: 0 0 var(--s3-raio-botao) 0;
  /* recorte em vez de left:-9999px: aquele deslocamento gera rolagem lateral
     em alguns navegadores. */
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.s3-pular:focus {
  width: auto; height: auto; overflow: visible;
  clip: auto; clip-path: none;
}

@media (max-width: 640px) {
  .s3-btn { width: 100%; }
  .s3-linha .s3-btn { width: auto; }
  /* Rótulo longo como "Quero entender se minha entidade pode obter o CEBAS"
     com nowrap forçava 463px de largura mínima e arrastava a grade inteira
     para fora da tela. No celular ele quebra. */
  .s3-btn {
    white-space: normal;
    height: auto;
    min-height: var(--s3-altura-botao);
    padding-block: var(--s3-e-3);
    text-align: center;
  }
}

/* ============================================================== CABEÇALHO
   Altura 74px, fundo sólido, sombra só depois que a página rola. */
.s3-cabecalho {
  position: sticky; top: 0; z-index: var(--s3-z-cabecalho);
  background: var(--s3-papel);
  border-bottom: 1px solid transparent;
  transition: border-color var(--s3-tempo) var(--s3-curva),
              box-shadow var(--s3-tempo) var(--s3-curva-saida);
}
.s3-cabecalho[data-rolado="true"] {
  border-bottom-color: var(--s3-borda);
  box-shadow: var(--s3-sombra-1);
}
.s3-cabecalho__nav   { display: flex; align-items: center; gap: var(--s3-e-1); }
/* Os links simples da navegação recebem o mesmo padding dos gatilhos de menu:
   sem isso "Conteúdos" e "Diagnóstico" ficam colados um no outro. */
.s3-cabecalho__nav > .s3-nav-link { padding: var(--s3-e-3) var(--s3-e-5); }
.s3-cabecalho__acoes { display: flex; align-items: center; gap: var(--s3-e-6); }
.s3-cabecalho__menu  { display: none; }

/* mega-menu */
.s3-menu { position: relative; }
.s3-menu__gatilho {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--s3-e-3) var(--s3-e-5);
  background: none; border: none; cursor: pointer;
  font-family: var(--s3-fonte);
}
.s3-menu__seta { font-size: 9px; transition: transform var(--s3-tempo) var(--s3-curva); }
.s3-menu[data-aberto] .s3-menu__seta { transform: rotate(180deg); }
.s3-menu[data-aberto] .s3-menu__gatilho { color: var(--s3-laranja); }
.s3-mega {
  position: absolute; top: 100%; left: 0; padding-top: var(--s3-e-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--s3-tempo) var(--s3-curva),
              transform var(--s3-tempo) var(--s3-curva), visibility var(--s3-tempo);
}
.s3-menu[data-aberto] .s3-mega { opacity: 1; visibility: visible; transform: none; }
.s3-mega__caixa {
  min-width: 320px; padding: var(--s3-e-3);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-cartao);
  box-shadow: var(--s3-sombra-3);
}
.s3-mega__item {
  display: flex; gap: var(--s3-e-5); align-items: flex-start;
  padding: var(--s3-e-4) var(--s3-e-5);
  border-radius: var(--s3-raio-botao);
  text-decoration: none; color: var(--s3-texto);
  transition: background var(--s3-tempo) var(--s3-curva);
}
.s3-mega__item:hover { background: var(--s3-laranja-clara); }
.s3-mega__icone { color: var(--s3-laranja); margin-top: 2px; }
.s3-mega__rot   { display: block; font-size: var(--s3-t-apoio); font-weight: var(--s3-peso-forte); }
.s3-mega__meta  { display: block; font-size: var(--s3-t-legenda); text-transform: uppercase;
                  color: var(--s3-texto-fraco); margin-top: 2px; }

/* ================================================================= GAVETA */
.s3-gaveta { position: fixed; inset: 0; z-index: var(--s3-z-menu); }
.s3-gaveta__fundo {
  position: absolute; inset: 0; background: rgba(67, 33, 25, .5);
  opacity: 0; transition: opacity var(--s3-tempo-medio) var(--s3-curva);
}
.s3-gaveta[data-aberta] .s3-gaveta__fundo { opacity: 1; }
.s3-gaveta__painel {
  position: absolute; inset: 0 0 0 auto;
  width: min(88vw, 380px); padding: var(--s3-e-7);
  background: var(--s3-papel); overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--s3-tempo-medio) var(--s3-curva-saida);
}
.s3-gaveta[data-aberta] .s3-gaveta__painel { transform: none; }
.s3-gaveta__link {
  display: flex; align-items: center; gap: var(--s3-e-5);
  padding: var(--s3-e-5) 0;
  border-bottom: 1px solid var(--s3-borda);
  color: var(--s3-texto); text-decoration: none;
  font-size: var(--s3-t-corpo); font-weight: var(--s3-peso-medio);
}
.s3-gaveta__link:hover { color: var(--s3-laranja); }
.s3-gaveta__link svg { color: var(--s3-laranja); }

/* ================================================================= RODAPÉ */
.s3-rodape {
  background: var(--s3-tinta); color: var(--s3-papel);
  padding-block: clamp(48px, 6vw, 72px) var(--s3-e-9);
}
.s3-rodape__grade {
  display: grid; gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  padding-bottom: var(--s3-e-10);
}
.s3-rodape__tit { color: rgba(255, 255, 255, .55); margin-bottom: var(--s3-e-6); }
.s3-rodape__link {
  display: block; color: rgba(255, 255, 255, .82); text-decoration: none;
  font-size: var(--s3-t-apoio); line-height: var(--s3-t-apoio-lh);
  padding-block: 5px;
  transition: color var(--s3-tempo) var(--s3-curva);
}
.s3-rodape__link:hover { color: var(--s3-laranja); }
.s3-rodape__pe {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3-e-6); flex-wrap: wrap;
  padding-top: var(--s3-e-7);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--s3-t-apoio); color: rgba(255, 255, 255, .55);
}
.s3-rodape__fim { display: flex; align-items: center; gap: var(--s3-e-6); }
/* O cadeado do painel administrativo: discreto, quase invisível em repouso. */
.s3-rodape__cadeado {
  display: inline-flex; color: rgba(255, 255, 255, .26);
  transition: color var(--s3-tempo) var(--s3-curva);
}
.s3-rodape__cadeado:hover { color: var(--s3-laranja); }

@media (max-width: 980px) {
  .s3-cabecalho__nav, .s3-cabecalho__acoes { display: none; }
  .s3-cabecalho__menu { display: inline-flex; }
  .s3-rodape__grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .s3-rodape__grade { grid-template-columns: 1fr; }
}

/* ======================================================= SEÇÕES DO SITE
   Vocabulário de layout do DonateKart aplicado ao conteúdo da Setor 3. */

/* herói: texto à esquerda, cartão da contadora à direita */
.s3-heroi-grade {
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: 1.25fr 1fr; align-items: center;
}

/* linha de solução — o padrão de listagem do site */
/* duas colunas: cinco linhas empilhadas eram a maior fatia dos 631px que a
   seção Soluções estourava */
.s3-sols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s3-e-5);
  border-top: none;
}
@media (max-width: 1100px) { .s3-sols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .s3-sols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* TILE: as frentes secundárias em coluna compacta (ícone + nome + etapa).
   A descrição sai — ela já vive na página da frente. Em linha horizontal
   cada uma pedia 163px de altura e a seção estourava a janela em 522px. */
.s3-sols .s3-sol {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'n' 'i' 'e' 't';
  gap: 10px;
  align-items: start;
  padding: var(--s3-e-6);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-grande);
  background: var(--s3-papel);
}
.s3-sols .s3-sol__n     { grid-area: n; }
.s3-sols .s3-sol__icone { grid-area: i; width: 46px; height: 46px; }
.s3-sols .s3-sol__etapa { grid-area: e; }
.s3-sols .s3-sol__txt   { grid-area: t; }
/* a seta e o resumo somem no tile; o título carrega a frente */
.s3-sols .s3-sol > :last-child:not(.s3-sol__txt) { display: none; }
.s3-sols .s3-sol__txt .s3-apoio { display: none; }
.s3-sols .s3-sol:hover { background: var(--s3-laranja-clara); border-color: var(--s3-laranja); }
.s3-sol {
  display: grid;
  grid-template-columns: auto auto 150px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.5vw, 28px);
  align-items: center;
  padding: var(--s3-e-8) var(--s3-e-5);
  border-bottom: 1px solid var(--s3-borda);
  text-decoration: none; color: inherit;
  transition: background var(--s3-tempo) var(--s3-curva);
}
.s3-sol:hover { background: var(--s3-laranja-clara); }
.s3-sol__n { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--s3-laranja); }
.s3-sol__icone {
  display: inline-flex; width: 56px; height: 56px; flex: 0 0 auto;
  align-items: center; justify-content: center;
  background-color: var(--s3-tela);
  border-radius: var(--s3-raio-medio);
  color: var(--s3-laranja);
  transition: var(--s3-transicao-cor), transform var(--s3-tempo-rapido) var(--s3-curva);
}
.s3-sol:hover .s3-sol__icone { transform: scale(1.06) rotate(-3deg); }
.s3-sol:hover .s3-sol__icone { background: var(--s3-papel); }
.s3-sol__etapa {
  font-size: var(--s3-t-legenda); text-transform: uppercase;
  font-weight: var(--s3-peso-forte); color: var(--s3-texto-fraco);
}
.s3-sol__txt { display: flex; flex-direction: column; gap: var(--s3-e-2); min-width: 0; }
.s3-sol__seta { color: var(--s3-laranja); transition: transform var(--s3-tempo) var(--s3-curva); }
.s3-sol:hover .s3-sol__seta { transform: translateX(4px); }

/* jornada: grade densa sobre fundo escuro */
.s3-jornada {
  display: grid; gap: 1px;
  background: var(--s3-borda);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-cartao); overflow: hidden;
  /* divisores exatos de 8 itens: 4, 2 e 1 — auto-fit dava 5 e sobrava
     buraco na segunda linha */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative; z-index: var(--s3-z-base);
  box-shadow: var(--s3-sombra-3);
}
.s3-jornada__item {
  display: block; padding: var(--s3-e-8) var(--s3-e-7);
  background: var(--s3-papel);
  color: var(--s3-texto); text-decoration: none;
  transition: background var(--s3-tempo-rapido) var(--s3-curva),
              transform var(--s3-tempo) var(--s3-curva-saida);
}
.s3-jornada__item:hover {
  background: var(--s3-laranja-clara);
  transform: translateY(-2px);
}

.s3-ciclo {
  margin-top: var(--s3-e-10);
  padding: clamp(28px, 4vw, 48px);
  /* opaco de propósito: sobre a malha de pontos, fundo translúcido deixava os
     pontos atravessarem o cartão e ele sumia como superfície */
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-medio);
  box-shadow: var(--s3-sombra-3);
  text-align: center;
  position: relative; z-index: var(--s3-z-base);
}
.s3-ciclo__trilha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.s3-ciclo__passo {
  padding: var(--s3-e-4) var(--s3-e-7);
  border: 1px solid var(--s3-laranja); border-radius: var(--s3-raio-pilula);
  color: var(--s3-laranja-texto); font-size: var(--s3-t-apoio); font-weight: var(--s3-peso-medio);
  transition: var(--s3-transicao-cor);
}
.s3-ciclo__passo:hover { background: var(--s3-laranja); color: var(--s3-papel); }
.s3-ciclo__seta { color: var(--s3-laranja); }

/* método */
.s3-metodo { display: grid; gap: var(--s3-e-9); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.s3-metodo__item { border-top: 2px solid var(--s3-laranja); padding-top: var(--s3-e-7); }

/* chamada final */
.s3-cta { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: 1.3fr 1fr; align-items: center; }
.s3-promessa {
  margin: 0; padding: clamp(24px, 3vw, 36px);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-medio);
  box-shadow: var(--s3-sombra-3);
  position: relative; z-index: var(--s3-z-base);
}

/* Enquanto as fotos não chegam, a mídia do cartão é um campo de cor da própria
   paleta — não um espaço reservado cinza. Some sozinho quando houver <img>. */
.s3-cartao__midia:not(img) { background: linear-gradient(135deg, var(--s3-laranja), var(--s3-laranja-pressionada)); }
/* Os nomes vêm de C.AREA_CLASSE, não de remoção de acento. */
.s3-midia--educacao   { background: linear-gradient(135deg, #903A27, #A6432B) !important; }
.s3-midia--esporte    { background: linear-gradient(135deg, #556B4A, #47593E) !important; }
.s3-midia--cultura    { background: linear-gradient(135deg, #A6432B, #ff8a3d) !important; }
.s3-midia--assistencia{ background: linear-gradient(135deg, #432119, #4a4a44) !important; }
.s3-midia--saude      { background: linear-gradient(135deg, #047857, #00ae5b) !important; }
.s3-midia--ambiente   { background: linear-gradient(135deg, #556B4A, #6B7F5E) !important; }
.s3-midia--inclusao   { background: linear-gradient(135deg, #A6432B, #903A27) !important; }
.s3-midia--outros     { background: linear-gradient(135deg, #6b6b66, #432119) !important; }
/* os quatro grupos FASFIL que faltavam: sem eles C.classeArea devolvia
   'outros' e quatro categorias diferentes pintavam o mesmo cinza */
.s3-midia--religiao   { background: linear-gradient(135deg, #7C5A2E, #432119) !important; }
.s3-midia--direitos   { background: linear-gradient(135deg, #903A27, #556B4A) !important; }
.s3-midia--patronais  { background: linear-gradient(135deg, #432119, #903A27) !important; }
.s3-midia--habitacao  { background: linear-gradient(135deg, #A6432B, #B6A790) !important; }

@media (max-width: 900px) {
  .s3-heroi-grade, .s3-cta { grid-template-columns: minmax(0, 1fr); }
  .s3-sol { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: var(--s3-e-4); }
  .s3-sol__n, .s3-sol__etapa { display: none; }
}

/* ================================================= FAIXA DE TOPO DE PÁGINA */
.s3-faixa {
  background: var(--s3-tela-quente);
  border-bottom: 1px solid var(--s3-borda);
  padding-block: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 48px);
}
.s3-voltar {
  display: inline-block; margin-bottom: var(--s3-e-8);
  font-size: var(--s3-t-apoio); font-weight: var(--s3-peso-forte);
  color: var(--s3-texto-fraco); text-decoration: none;
}
.s3-voltar:hover { color: var(--s3-laranja); }

/* ==================================================== SOLUÇÕES — cartão grande */
.s3-solcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-cartao);
  text-decoration: none; color: inherit;
  transition: border-color var(--s3-tempo) var(--s3-curva),
              box-shadow var(--s3-tempo) var(--s3-curva-saida);
}
.s3-solcard:hover { border-color: var(--s3-laranja); box-shadow: var(--s3-sombra-marca); }
.s3-solcard__marca { display: flex; flex-direction: column; align-items: center; gap: var(--s3-e-4); }
/* O ÍCONE DESTA LISTA É O SELO EM RELEVO DA CASA (`.s3-selo3d`), emitido por
   `seloRelevo()` no gerador. Havia aqui um `.s3-solcard__icone`: quadrado de
   72px com `background-color: var(--s3-tela)` — o cinza do sistema, nem da
   paleta —, ícone chapado dentro e um `rotate(-4deg)` no hover que girava a
   caixa inteira. Era a única lista de ícones do site fora do relevo.

   O gatilho é o CARTÃO (`data-selo-palco`), não o ícone: apontar qualquer
   canto levanta o selo, e o alvo passa a ter o tamanho do cartão. É o mesmo
   arranjo das frentes do traço da marca, onde a linha inteira é o gatilho do
   selo do número. */
.s3-solcard__txt { min-width: 0; }
.s3-solcard__btn { white-space: nowrap; }

/* ===================================================== SOLUÇÃO — herói escuro */
.s3-sol-heroi {
  background-color: var(--s3-laranja-suave);
  color: var(--s3-texto);
  padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 80px);
  position: relative; overflow: hidden;
}
.s3-sol-heroi > .s3-container { position: relative; z-index: var(--s3-z-base); }
.s3-sol-heroi__grade { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
.s3-sol-heroi__icone {
  display: inline-flex; width: 88px; height: 88px; flex: 0 0 auto;
  align-items: center; justify-content: center;
  background: var(--s3-papel);
  border: 1.5px solid var(--s3-laranja);
  border-radius: var(--s3-raio-grande);
  color: var(--s3-laranja);
  box-shadow: var(--s3-sombra-marca);
}
.s3-2col { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(20px, 4vw, 56px); align-items: start; }

/* A GRADE `.s3-recursos` E O CARTÃO `.s3-recurso` SAÍRAM. Eles desenhavam o
   "O que fazemos" das páginas de solução em três colunas de cartões claros.
   As frentes agora moram na contraforma do "S" em marca-traco.css, que é onde
   o desenho da marca as põe, e isso vale para as sete soluções — não há mais
   página que use a grade. */

.s3-proxima {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3-e-6);
  margin-top: clamp(28px, 4vw, 44px); padding: var(--s3-e-7) var(--s3-e-8);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-cartao);
  text-decoration: none; text-align: left;
  /* cor explícita: o markup tinha dois atributos class no mesmo span, o
     segundo era descartado e o texto herdava a cor de LINK do navegador —
     azul quando não visitado, roxo quando visitado. */
  color: var(--s3-tinta);
  transition: background var(--s3-tempo) var(--s3-curva),
              border-color var(--s3-tempo) var(--s3-curva),
              transform var(--s3-tempo) var(--s3-curva);
}
.s3-proxima:hover { background: var(--s3-laranja-clara); border-color: var(--s3-laranja); }
.s3-proxima__txt { display: block; min-width: 0; }
.s3-proxima__rot {
  display: block;
  font-size: 12.5px; font-weight: var(--s3-peso-forte);
  color: var(--s3-texto-fraco);
  margin-bottom: 2px;
}
.s3-proxima__nome {
  display: block;
  font-family: var(--s3-fonte-display);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: var(--s3-peso-negro);
  line-height: 1.25;
  color: var(--s3-tinta);
}
.s3-proxima__seta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--s3-raio-circulo);
  background: var(--s3-laranja-clara); color: var(--s3-laranja-texto);
  transition: transform var(--s3-tempo) var(--s3-curva),
              background var(--s3-tempo) var(--s3-curva);
}
.s3-proxima:hover .s3-proxima__seta {
  background: var(--s3-laranja); color: var(--s3-papel);
  transform: translateX(4px);
}

/* ========================================================= PROJETOS — filtro */
.s3-filtros { display: flex; gap: var(--s3-e-3); flex-wrap: wrap; margin-bottom: var(--s3-e-10); }
.s3-filtro {
  padding: var(--s3-e-4) var(--s3-e-6);
  background: transparent; color: var(--s3-texto);
  border: 1px solid var(--s3-borda); border-radius: var(--s3-raio-pilula);
  font-family: var(--s3-fonte); font-size: var(--s3-t-apoio);
  font-weight: var(--s3-peso-medio); cursor: pointer;
  transition: var(--s3-transicao-cor);
}
.s3-filtro:hover { border-color: var(--s3-laranja); color: var(--s3-laranja-texto); }
.s3-filtro[aria-pressed="true"] { background: var(--s3-laranja-texto); border-color: var(--s3-laranja-texto); color: var(--s3-papel); }

/* ======================================================= PROJETO — detalhe */
.s3-proj-heroi {
  padding-block: clamp(32px, 4vw, 48px) clamp(40px, 5vw, 64px);
  position: relative;
}
.s3-proj-heroi::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(67, 33, 25, .55), transparent 62%);
  pointer-events: none;
}
.s3-proj-heroi > * { position: relative; z-index: var(--s3-z-base); }
.s3-proj-grade { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.s3-proj-lado { position: sticky; top: 96px; }
.s3-resultados {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--s3-borda); border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-cartao); overflow: hidden;
}
.s3-orc {
  display: grid; gap: 1px; background: var(--s3-borda);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 620px) { .s3-orc { grid-template-columns: minmax(0, 1fr); } }
.s3-orc > div { background: var(--s3-papel); padding: var(--s3-e-7); }
.s3-orc__v {
  display: block; margin-top: var(--s3-e-4);
  font-family: var(--s3-fonte); font-weight: var(--s3-peso-negro);
  font-size: clamp(22px, 3vw, 32px); line-height: 1.1; color: var(--s3-texto);
}

@media (max-width: 900px) {
  .s3-solcard { grid-template-columns: auto minmax(0, 1fr); }
  .s3-solcard__btn { display: none; }
  .s3-sol-heroi__grade, .s3-2col, .s3-proj-grade { grid-template-columns: minmax(0, 1fr); }
  .s3-proj-lado { position: static; }
  .s3-resultados { grid-template-columns: 1fr; }
}


/* ============================================================================
   PADRÕES DO DONATEKART — lidos das capturas enviadas pelo Alexandre
   ========================================================================= */

/* Ícone em círculo tingido — o cartão de "Why Donatekart?" */
.s3-icone-circulo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: var(--s3-raio-circulo);
  background: var(--s3-laranja-clara);
  color: var(--s3-laranja);
  transition: transform var(--s3-tempo) var(--s3-curva-saida),
              background-color var(--s3-tempo-rapido) var(--s3-curva);
}
.s3-icone-circulo--azul  { background: var(--s3-azul-claro);    color: var(--s3-azul); }
.s3-icone-circulo--verde { background: var(--s3-sucesso-claro); color: var(--s3-sucesso-texto); }
.s3-cartao--clicavel:hover .s3-icone-circulo,
.s3-motivo:hover .s3-icone-circulo { transform: scale(1.12) rotate(-6deg); }

/* Cartão de motivo: ícone + título + texto, borda leve, elevação no hover */
.s3-motivos { display: grid; gap: var(--s3-e-7); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.s3-motivo {
  display: flex; gap: var(--s3-e-6); align-items: flex-start;
  padding: var(--s3-e-8);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda-suave);
  border-radius: var(--s3-raio-cartao);
  transition: var(--s3-transicao-mov), border-color var(--s3-tempo-rapido) var(--s3-curva);
}
.s3-motivo { position: relative; }
.s3-motivo:hover {
  border-color: var(--s3-laranja);
  box-shadow: 0 0 10px rgba(0, 0, 0, .22);
  transform: scale(1.04);
  z-index: var(--s3-z-elevado);
}

/* Passos com conector vertical — o bloco "How it works?" */
.s3-passos { display: flex; flex-direction: column; }
.s3-passo {
  display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--s3-e-6); position: relative; padding-bottom: var(--s3-e-9);
}
.s3-passo:last-child { padding-bottom: 0; }
.s3-passo::before {
  content: ""; position: absolute; left: 25px; top: 56px; bottom: 4px;
  width: 2px; background: var(--s3-laranja); opacity: .35;
}
.s3-passo:last-child::before { display: none; }
.s3-passo--azul::before { background: var(--s3-azul); }

/* Abas com ícone em cima — a barra de categorias das campanhas */
.s3-abas-icone {
  display: flex; gap: var(--s3-e-3); overflow-x: auto;
  border-bottom: 1px solid var(--s3-borda);
  scrollbar-width: thin;
}
.s3-aba-icone {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3-e-3);
  padding: var(--s3-e-6) var(--s3-e-7);
  background: none; border: none; border-bottom: 3px solid transparent;
  color: var(--s3-texto-fraco); cursor: pointer; white-space: nowrap;
  font-family: var(--s3-fonte); font-size: var(--s3-t-apoio);
  font-weight: var(--s3-peso-medio);
  transition: var(--s3-transicao-cor), transform var(--s3-tempo) var(--s3-curva-saida);
}
.s3-aba-icone:hover { color: var(--s3-texto); transform: translateY(-2px); }
.s3-aba-icone[aria-selected="true"] { color: var(--s3-laranja); border-bottom-color: var(--s3-laranja); }

/* Selo no canto da imagem — o "Tax benefits" verde */
.s3-midia-env { position: relative; overflow: hidden; }
.s3-selo-canto {
  position: absolute; top: 0; right: 0; z-index: var(--s3-z-base);
  padding: var(--s3-e-2) var(--s3-e-5);
  background: var(--s3-sucesso-texto); color: var(--s3-papel);
  font-size: var(--s3-t-legenda); font-weight: var(--s3-peso-forte);
  border-bottom-left-radius: var(--s3-raio-pequeno);
}
.s3-faixa-canto {
  position: absolute; left: 0; bottom: 0; z-index: var(--s3-z-base);
  padding: var(--s3-e-3) var(--s3-e-6);
  background: var(--s3-papel); color: var(--s3-laranja-texto);
  font-size: var(--s3-t-apoio); font-weight: var(--s3-peso-forte);
  border-top-right-radius: var(--s3-raio-pequeno);
}
/* O zoom interno da foto saiu: com o cartão inteiro escalando (padrão do
   governo), escala sobre escala distorcia a imagem. */

/* Faixa rolante de parceiros — keyframe `marquee-horizontal` do indicium */
.s3-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.s3-marquee__trilha { display: flex; gap: var(--s3-e-12); width: max-content; animation: s3-marquee 32s linear infinite; }
.s3-marquee:hover .s3-marquee__trilha { animation-play-state: paused; }
@keyframes s3-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Revelação com deslocamento — 350ms ease em transform, do indicium */
[data-revelar] {
  opacity: 0; translate: 0 24px;
  /* A lista inclui as propriedades do hover: `transition` não se acumula
     entre regras — esta substituía a do cartão e o salto ficava seco,
     sem os 400ms medidos no governo. */
  transition: opacity var(--s3-tempo-medio) var(--s3-curva-saida),
              translate var(--s3-tempo-medio) var(--s3-curva-saida),
              transform 400ms var(--s3-curva),
              box-shadow 400ms var(--s3-curva),
              border-color var(--s3-tempo-rapido) var(--s3-curva);
}
[data-revelar][data-visivel="true"] { opacity: 1; translate: none; }

/* A barra de progresso preenche quando entra na tela */
.s3-progresso__barra { transition: width var(--s3-tempo-lento) var(--s3-curva-saida); }
[data-preencher] .s3-progresso__barra { width: 0 !important; }
[data-preencher][data-visivel="true"] .s3-progresso__barra { width: var(--pct) !important; }

/* Sublinhado que cresce no link de navegação */
.s3-nav-link { position: relative; }
.s3-nav-link::after {
  content: ""; position: absolute; left: var(--s3-e-5); right: var(--s3-e-5); bottom: 2px;
  height: 2px; background: var(--s3-laranja);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--s3-tempo) var(--s3-curva-saida);
}
.s3-nav-link:hover::after, .s3-nav-link[aria-current="page"]::after { transform: scaleX(1); }


/* Duas colunas de passos — o desenho do bloco "How it works?", com um cartão
   para cada público. */
.s3-metodo-grade { display: grid; gap: var(--s3-e-8); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* O atributo data-revelar já cuida da entrada; aqui só o preenchimento da
   barra, que espera o elemento aparecer para animar de 0 até a porcentagem. */
[data-preencher] .s3-progresso__barra { width: 0 !important; }
[data-preencher][data-visivel="true"] .s3-progresso__barra { width: var(--pct) !important; }

/* ============================================================================
   MALHA DE PONTOS — o "flux" do indicium, na paleta da Setor 3
   O brilho não é keyframe: é `fill` e `opacity` transicionando em 350ms, que é
   exatamente o que o original faz (2.318 ocorrências dessa transição lá).
   ========================================================================= */
.s3-pontos {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  /* a malha entra e sai desvanecendo: ponto colado na aresta da seção era
     metade da feiura da transição */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 120px), transparent 100%);
}
/* Medido no indicium: só `fill` e `transform` transicionam, em 350ms ease.
   A escala é 1,08 — discreta de propósito; o efeito de relevo vem de muitos
   pontos fazendo isso ao mesmo tempo, não de um ponto crescendo muito. */
.s3-pontos__ponto {
  fill: rgba(67, 33, 25, .18);
  transition: fill var(--s3-tempo) var(--s3-curva),
              transform var(--s3-tempo) var(--s3-curva);
  will-change: transform;
}
/* o transform é escrito pelo JS (translate + scale contínuos); aqui só a cor,
   senão a regra de CSS sobrescreveria o deslocamento */
.s3-pontos__ponto[data-aceso="suave"] { fill: rgba(144, 58, 39, .55); }
.s3-pontos__ponto[data-aceso="forte"] { fill: var(--s3-laranja); }

/* Sobre fundo claro a malha inverte. */
/* variante para quando a malha cair sobre fundo escuro de novo */
.s3-pontos--escuro .s3-pontos__ponto { fill: rgba(255, 255, 255, .22); }
/* OS ACESOS TAMBÉM PRECISAM INVERTER. A cor de repouso já estava aqui, mas os
   dois níveis de aceso continuavam terracota — e sobre um fundo terracota o
   ponto aceso ficaria invisível, que é o contrário de acender. */
.s3-pontos--escuro .s3-pontos__ponto[data-aceso="suave"] { fill: rgba(255, 240, 232, .55); }
.s3-pontos--escuro .s3-pontos__ponto[data-aceso="forte"] { fill: rgba(255, 246, 240, .92); }

/* A seção escura já tem ::before para o brilho radial; a malha entra por baixo
   do conteúdo e por cima do fundo. */
.s3-secao--pontos { position: relative; overflow: hidden; }
.s3-secao--pontos > .s3-container { position: relative; z-index: var(--s3-z-base); }

/* ============================================================================
   CARTÃO COM FOCO DE LUZ — o cursor acende a região que está sob ele
   ========================================================================= */
.s3-cartao--luz { position: relative; isolation: isolate; }
.s3-cartao--luz::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(220px circle at var(--lx, 50%) var(--ly, 50%),
              rgba(144, 58, 39, .13), transparent 70%);
  transition: opacity var(--s3-tempo) var(--s3-curva);
}
.s3-cartao--luz:hover::after { opacity: 1; }

/* Citação: a aspa gira e ganha cor quando o cartão acende. */
.s3-citacao {
  /* coluna: a fileira aspa+tema em cima, a frase embaixo — o texto fluía ao
     lado do chip quando isto era flex-row */
  display: flex; flex-direction: column; gap: var(--s3-e-4);
  padding: var(--s3-e-7);
  /* TERRACOTA COMO LAVAGEM, e não como bloco. Chegou a ser #903A27 cheio, e
     o problema não era cada cartão — era a SOMA: doze blocos de cor saturada
     juntam mais área de terracota do que o resto da home inteira, deixam de
     ser cartões em destaque e viram parede.

     Voltar ao papel também não servia: papel era o estado anterior ao pedido
     de destaque, com um filete de 18% que não destacava nada. Esta é a mesma
     cor com uma fração da massa — terracota a ~6% sobre papel. */
  background-image: linear-gradient(150deg, #FDF7F4 0%, #F9EFEA 52%, #F7E9E3 100%);
  color: var(--s3-texto);
  /* 22% e não 18%: sobre a lavagem o filete precisa de um pouco mais de peso
     para ainda desenhar a borda */
  border: 1px solid rgba(144, 58, 39, .22);
  border-radius: var(--s3-raio-cartao);
  /* rasa. O bloco cheio precisava de sombra funda para não flutuar; a
     lavagem não precisa provar nada. */
  box-shadow: 0 6px 16px -12px rgba(110, 43, 29, .3);
  transition: border-color var(--s3-tempo-rapido) var(--s3-curva),
              transform var(--s3-tempo) var(--s3-curva-saida),
              box-shadow var(--s3-tempo) var(--s3-curva-saida);
}
/* O NEGRITO É O ACENTO, e ele custa uma palavra de cor em vez de um retângulo
   inteiro. Sobre o bloco terracota a hierarquia precisava vir por
   luminosidade (creme contra branco); sobre a lavagem ela volta a vir por
   COR — café no corpo, terracota no trecho destacado. */
.s3-citacao .s3-texto { color: var(--s3-texto); }
.s3-citacao .s3-texto b,
.s3-citacao .s3-texto strong {
  color: var(--s3-laranja-texto);
  font-weight: var(--s3-peso-negro);
}
.s3-citacao { position: relative; }
.s3-citacao:hover {
  border-color: var(--s3-laranja);
  transform: scale(1.04);
  box-shadow: 0 14px 30px -14px rgba(110, 43, 29, .42);
  z-index: var(--s3-z-elevado);
}
/* A ASPA É MARCA-D'ÁGUA, não um item de fileira.
   Como glifo de 15px ela dividia o topo com o rótulo — e, sendo um
   <svg display:block> dentro de um <span> inline, partia a linha e mandava
   o rótulo para a linha de baixo sozinho. Gastava uma fileira inteira do
   cartão para dizer o que uma marca-d'água diz melhor. Vai para o canto
   INFERIOR direito: fecha a citação, ocupa a sobra e nunca disputa espaço
   com o selo, que mora no topo à esquerda. */
.s3-citacao__aspa {
  position: absolute; right: 14px; bottom: 10px;
  /* de volta ao terracota: sobre a lavagem clara é ele que aparece */
  color: var(--s3-laranja);
  opacity: .1;
  pointer-events: none;
  transition: opacity 300ms var(--s3-curva),
              transform 300ms var(--s3-curva-saida);
}
.s3-citacao:hover .s3-citacao__aspa {
  opacity: .17;
  transform: scale(1.08) rotate(-6deg);
}

/* ------------------------------------------------------- SELO DE ASSUNTO
   Duas camadas, a mesma gramática dos ícones da casa: um DISCO sólido em
   terracota com o ícone do assunto em papel, e o NOME em micro-caixa-alta
   sobre a lavagem da mesma terracota.

   O padding é assimétrico de propósito (3px à esquerda, 12px à direita): o
   disco encosta na curva da pílula e o texto respira. É essa assimetria que
   faz ler como peça desenhada em vez de texto dentro de uma caixa.

   E o selo FILTRA — ver dorfiltro.js. */
.s3-dorselo {
  /* o cartão é uma coluna flex: sem `align-self` o selo esticaria de ponta
     a ponta e a pílula viraria faixa */
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%;
  padding: 3px 12px 3px 3px;
  font-family: var(--s3-fonte);
  font-size: 10.5px; font-weight: var(--s3-peso-forte);
  letter-spacing: .07em; text-transform: uppercase;
  /* A PÍLULA SAI. Ela existia para o selo se separar de um cartão terracota
     cheio — etiqueta clara sobre fundo escuro. Sobre a lavagem clara, uma
     pílula de papel não se separa de nada e ainda soma mais uma caixa dentro
     da caixa.

     E é isso que faz o conjunto funcionar: sem ela, o DISCO METÁLICO passa a
     ser o único elemento pesado de cada cartão — um ponto de interesse por
     cartão, sobre fundo leve, em vez de um bloco pesado com um disco pesado
     dentro. O metal ganha por contraste com o que está em volta. */
  color: var(--s3-laranja-texto);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0 4px 0 0;
  cursor: pointer;
  transition: background 220ms var(--s3-curva), border-color 220ms var(--s3-curva),
              box-shadow 220ms var(--s3-curva);
}
/* ---------------------------------------------------------------- O METAL
   O que faz metal ser metal, e não plástico colorido, é o reflexo NÃO-LINEAR:
   uma superfície torneada devolve claro-escuro-claro em saltos curtos ao
   redor do eixo, porque cada micro-sulco pega a luz num ângulo diferente. Um
   `linear-gradient` de duas paradas dá transição monótona — que é justamente
   a leitura de plástico brilhante.

   QUATRO CAMADAS DE BACKGROUND, e nenhum pseudo-elemento. A primeira versão
   punha a especular num `::after` com `mix-blend-mode: screen`, e isso é
   frágil aqui: blend mistura com o fundo do contexto de empilhamento mais
   próximo, e `.s3-citacao:hover` aplica `transform: scale(1.04)` — que CRIA
   contexto. O que o brilho mistura mudava ao apontar o cartão. Sem
   pseudo-elemento também não há nada absoluto que possa transbordar do botão
   e disputar o clique do filtro (ver dorfiltro.js).

   AS OITO PARADAS DO CONIC, e a conta é no raio que importa. Eu tinha
   justificado oito medindo o arco na borda do DISCO; o raio que decide é a
   borda do GLIFO, onde o olho compara banda clara com banda escura. A 18px
   isso dá r=5,5px, 34,6px de circunferência, 4 ciclos = 4,3px por banda
   clara. Com 12 ciclos cairia para 1,4px — e aí o `scale` do hover (1,08 do
   disco × 1,04 do cartão = 1,12) reamostra tudo e bandas finas rastejam
   durante a transição.

   A primeira e a última parada são a MESMA cor de propósito: é o que apaga a
   costura de 0°/360°. Quem for ajustar a paleta precisa trocar as duas.

   E OS QUATRO BRILHOS NÃO SÃO IGUAIS. Quatro reflexos idênticos leem como
   padrão impresso; luz real chega de uma direção dominante e os lóbulos
   decaem conforme se afastam dela. O lóbulo forte fica em 315°, alinhado com
   a luz de 150° que o resto da casa usa. */
.s3-dorselo__disco {
  --disco: 20px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--disco); height: var(--disco);
  border-radius: 50%;
  /* glifo em creme quase branco: sobre metal escuro, terracota sumiria. E os
     ícones são preenchimento sólido em viewBox 32 — a 11px, detalhes de 2
     unidades ficam em 0,69px, sub-pixel. É outra razão para o miolo escuro:
     traço fino só sobrevive com o máximo de contraste debaixo. */
  color: #FFF6EF;
  /* o chapado de antes vira o piso: se `conic-gradient` faltar, a declaração
     de background-image cai inteira e sobra isto — a peça deixa de ser metal
     e não quebra */
  background-color: var(--s3-laranja);

  /* a PRIMEIRA camada é a de CIMA */
  background-image:
    /* 1. ESPECULAR — crista ACHATADA colada na borda de cima, não domo.
          Um domo largo (era 58% × 48% em 32%/24%) alcança o anel onde a tinta
          do glifo passa e come o contraste dele. Achatada e ancorada em y=0,
          ela morre antes de encostar na tinta: o brilho deixa de ser pago
          pela legibilidade. */
    radial-gradient(ellipse 56% 24% at 36% 0%,
      rgba(255, 244, 236, .5), rgba(255, 244, 236, 0) 74%),

    /* 2. QUIQUE — metal real recebe luz de volta do que está embaixo. Sem
          isto o vale inferior é parede morta. Estreito e colado no aro. */
    radial-gradient(ellipse 50% 20% at 62% 100%,
      rgba(232, 150, 116, .5), rgba(232, 150, 116, 0) 72%),

    /* 3. O MIOLO — e ele não é enfeite: é a CAMA DO GLIFO.
          O centro de um conic é uma singularidade: as oito paradas se
          encontram dentro de um pixel do meio e o miolo serrilha, exatamente
          onde o ícone mora. Esta mancha tapa isso E derruba o valor do metal
          debaixo da tinta, o que sobe o contraste do glifo. O defeito de
          renderização e o requisito de legibilidade tinham a mesma solução.
          `closest-side` para o círculo terminar no raio real do disco, e não
          em 55% da largura, que daria 110% do raio. */
    radial-gradient(circle closest-side at 50% 50%,
      rgba(52, 20, 12, .78)   0%,
      rgba(52, 20, 12, .70)  34%,
      rgba(52, 20, 12, .46)  62%,
      rgba(52, 20, 12, 0)    90%),

    /* 4. O ESCOVADO — quatro brilhos e quatro vales a cada 45° */
    conic-gradient(from 200deg,
      #E8AE8D   0deg,   /* brilho 1 */
      #8E3B27  45deg,   /* vale */
      #D08A66  90deg,   /* brilho 2 */
      #6E2B1D 135deg,   /* vale */
      #C4714F 180deg,   /* brilho 3 */
      #5C2316 225deg,   /* vale — o mais fundo, oposto à luz */
      #B96844 270deg,   /* brilho 4 — o mais fraco */
      #7A2F1F 315deg,   /* vale */
      #E8AE8D 360deg);  /* MESMA cor da parada 0: apaga a costura */

  box-shadow:
    /* aro de luz: 1px FIXO de propósito. Reflexo de quina é hairline físico,
       não proporcional — 0,9px a 18px não fica mais fino, fica borrado. */
    inset 0 0 0 1px rgba(255, 240, 230, .34),
    inset 0 calc(var(--disco) * -.09) calc(var(--disco) * .16) calc(var(--disco) * -.09) rgba(45, 16, 9, .78),
    /* o disco POUSA na pílula clara: sem contato ele lê como adesivo */
    0 calc(var(--disco) * .06) calc(var(--disco) * .12) calc(var(--disco) * -.04) rgba(45, 16, 9, .5);
  transition: transform 260ms var(--s3-curva-saida),
              box-shadow 260ms var(--s3-curva-saida);
}
/* o glifo CUNHADO no metal: a sombra de 1px por baixo é o que o assenta na
   superfície em vez de deixá-lo desenhado por cima. `drop-shadow` porque o
   glifo é SVG, e `text-shadow` não o alcança. */
.s3-dorselo__disco svg {
  filter: drop-shadow(0 1px 0 rgba(45, 16, 9, .6));
}

/* GIRAR METAL MOVE O REFLEXO — é a rotação que denuncia a superfície
   anisotrópica, e por isso o giro aqui vale mais do que valia no disco
   chapado, onde ele só inclinava um círculo de cor sólida. */
.s3-citacao:hover .s3-dorselo__disco,
.s3-dorselo:hover .s3-dorselo__disco {
  transform: scale(1.1) rotate(-14deg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 236, .5),
    inset 0 calc(var(--disco) * -.09) calc(var(--disco) * .16) calc(var(--disco) * -.09) rgba(45, 16, 9, .78),
    0 calc(var(--disco) * .1) calc(var(--disco) * .2) calc(var(--disco) * -.05) rgba(45, 16, 9, .6);
}

/* nome longo ("Prestação de contas") não empurra a largura do cartão */
.s3-dorselo__rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sem pílula, o hover do selo mora no texto e no disco — que já sobe e gira */
.s3-dorselo:hover { color: var(--s3-laranja-pressionada); }
/* GIRAR METAL MOVE O REFLEXO — é a rotação que denuncia a superfície
   anisotrópica, e por isso o giro aqui vale mais do que valia no disco
   chapado, onde ele só inclinava um círculo de cor sólida. */
.s3-citacao:hover .s3-dorselo__disco,
.s3-dorselo:hover .s3-dorselo__disco {
  transform: scale(1.1) rotate(-14deg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 236, .5),
    inset 0 calc(var(--disco) * -.09) calc(var(--disco) * .16) calc(var(--disco) * -.09) rgba(45, 16, 9, .78),
    0 calc(var(--disco) * .1) calc(var(--disco) * .2) calc(var(--disco) * -.05) rgba(45, 16, 9, .6);
}
/* O ANEL DE FOCO acompanha o cartão. Ele já foi papel, quando o cartão era
   terracota cheio — anel terracota sobre fundo terracota é anel invisível, e
   foi por isso. Com o cartão claro de novo, terracota é o que aparece. */
.s3-dorselo:focus-visible {
  outline: 2px solid var(--s3-laranja);
  outline-offset: 3px;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .s3-cartao--luz::after { display: none; }
  .s3-cartao--clicavel:hover, .s3-motivo:hover, .s3-citacao:hover { transform: none; }
  .s3-citacao:hover .s3-citacao__aspa { transform: none; }
}


/* Qualquer cartão que caia sobre a malha precisa ser OPACO — com fundo
   translúcido os pontos atravessam e o cartão deixa de ler como superfície. */
.s3-secao--pontos .s3-cartao,
.s3-secao--pontos .s3-orc > div {
  background-color: var(--s3-papel);
  background-image: none;
  border: 1px solid var(--s3-borda);
  position: relative; z-index: var(--s3-z-base);
}

/* Cartão de acento: laranja sólido, para o bloco que precisa puxar a ação.
   Substitui o cartão escuro — o acento do sistema é a laranja, não a tinta. */
.s3-cartao--acento {
  background-color: var(--s3-laranja-texto);   /* 5,52:1 com o branco */
  border-color: transparent;
  color: var(--s3-papel);
  box-shadow: var(--s3-sombra-marca);
}
.s3-cartao--acento .s3-legenda { color: rgba(255, 255, 255, .8); }
.s3-btn--claro {
  background: var(--s3-papel); color: var(--s3-laranja-texto); border-color: var(--s3-papel);
}
.s3-btn--claro:hover:not(:disabled) { background: var(--s3-tela); color: var(--s3-laranja-texto); }


/* ============================================================================
   MÉTODO — progressão numerada
   O desenho anterior eram dois cartões gêmeos: nada dizia o que vinha antes,
   nem o que era mais importante. Aqui a coluna da esquerda ancora a mensagem e
   fica parada; a trilha numerada dá a ordem de leitura; e o desfecho aparece
   em acento, ao fim da progressão, como resultado — não como cartão irmão.
   ========================================================================= */
.s3-metodo-v2 {
  display: grid; gap: clamp(20px, 2.4vw, 40px);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
.s3-metodo-v2__lado { position: sticky; top: 110px; }

.s3-etapas-m { list-style: none; margin: 0; padding: 0; position: relative; }
/* o traço que liga os passos, e o rastro que o preenche conforme a rolagem */
.s3-etapas-m__linha {
  position: absolute; left: 21px; top: 14px; bottom: 14px; width: 2px;
  background: var(--s3-borda); border-radius: 2px; overflow: hidden;
}
.s3-etapas-m__preenche {
  display: block; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--s3-laranja), var(--s3-laranja-pressionada));
  transition: height var(--s3-tempo-medio) var(--s3-curva-saida);
}

.s3-etapa-m {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s3-e-5);
  align-items: start;
  /* com o 6º passo (conformidade) a trilha passou 154px da janela — 20px
     entre passos viraram 14px, medido de novo */
  padding-bottom: 14px;
  position: relative;
}
.s3-etapa-m:last-child { padding-bottom: 0; }

/* o número grande, em fantasma: é ele que cria a hierarquia */
.s3-etapa-m__n {
  position: absolute; left: 64px; top: -14px; z-index: 0;
  font-family: var(--s3-fonte-display);
  font-weight: var(--s3-peso-negro);
  font-size: 64px; line-height: 1;
  color: var(--s3-laranja);
  opacity: .09;
  pointer-events: none;
  transition: opacity var(--s3-tempo) var(--s3-curva), transform var(--s3-tempo) var(--s3-curva-saida);
}
.s3-etapa-m:hover .s3-etapa-m__n { opacity: .18; transform: translateY(-4px); }

.s3-etapa-m__marca {
  position: relative; z-index: var(--s3-z-base);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--s3-papel);
  border: 1.5px solid var(--s3-borda);
  border-radius: var(--s3-raio-circulo);
  color: var(--s3-laranja);
  transition: var(--s3-transicao-cor), transform var(--s3-tempo) var(--s3-curva-saida);
}
.s3-etapa-m:hover .s3-etapa-m__marca {
  border-color: var(--s3-laranja);
  box-shadow: var(--s3-sombra-marca);
  transform: scale(1.06);
}
.s3-etapa-m__txt { position: relative; z-index: var(--s3-z-base); padding-top: 2px; }
.s3-etapa-m__txt h3 { margin-bottom: var(--s3-e-3); }

/* o desfecho: acento laranja, ao fim da trilha */
.s3-desfecho {
  margin-top: var(--s3-e-9);
  padding: clamp(24px, 3.5vw, 36px);
  background-color: var(--s3-laranja-texto);
  color: var(--s3-papel);
  border-radius: var(--s3-raio-medio);
  box-shadow: var(--s3-sombra-marca);
}
.s3-desfecho .s3-legenda { color: rgba(255, 255, 255, .82); }
.s3-desfecho__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3-e-6); }
.s3-desfecho__lista li {
  display: flex; gap: var(--s3-e-5); align-items: flex-start;
  font-size: var(--s3-t-apoio); line-height: var(--s3-t-apoio-lh);
  color: rgba(255, 255, 255, .92);
}
.s3-desfecho__lista svg { flex: 0 0 auto; margin-top: 2px; }
.s3-desfecho__lista b { color: var(--s3-papel); }

@media (max-width: 900px) {
  .s3-metodo-v2 { grid-template-columns: minmax(0, 1fr); }
  .s3-metodo-v2__lado { position: static; }
  .s3-etapa-m__n { left: auto; right: 0; font-size: 52px; }
}


/* ------------------------------------------------------------ herói + livro
   O balancete vive numa FOLHA emoldurada à direita, não mais atrás do texto.
   Sem sobreposição não há véu, e a tabela volta à opacidade cheia. */
/* ------------------------------------------------------ textura do herói
   O "grainy gradient" da referência, na paleta da casa: manchas suaves de
   laranja respirando sobre o creme (::before) e GRÃO de filme por cima
   (::after) — ruído fractal de um SVG embutido, dessaturado no próprio
   filtro, fundido em soft-light. O conteúdo fica acima das duas camadas. */
.s3-heroi-secao { background-color: var(--s3-tela-quente); position: relative; }
.s3-heroi-secao::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 64% at 16% 24%, rgba(144, 58, 39, .09), transparent 68%),
    radial-gradient(44% 58% at 84% 12%, rgba(255, 255, 255, .85), transparent 62%),
    radial-gradient(56% 70% at 68% 96%, rgba(166, 67, 43, .06), transparent 66%),
    radial-gradient(38% 46% at 42% 60%, rgba(255, 238, 233, .55), transparent 70%);
}
.s3-heroi-secao::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: .95;
}
.s3-heroi-secao > .s3-container { position: relative; z-index: 1; }
.s3-heroi-grade {
  display: grid;
  /* Proporcional, não largura fixa: com `minmax(0, 690px)` o painel segurava
     os 690px a 1200px de viewport e espremia o texto a 382px — medido. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 1300px) {
  .s3-heroi-grade { grid-template-columns: minmax(0, 1fr); }
  /* A folha é decorativa (aria-hidden) e uma tabela de 6 colunas não sobrevive
     abaixo desta largura: some, em vez de virar grade espremida. O corte em
     1300px garante folga: no menor caso o painel tem ~614px e a descrição
     mais longa (183px) ainda sobra 10px. */
  .s3-heroi-painel { display: none; }
}

.s3-heroi-painel { position: relative; container-type: inline-size; }
/* a segunda folha espiando atrás — dá espessura de documento à peça */
.s3-heroi-painel::before {
  content: '';
  position: absolute; inset: 14px -10px -12px 22px;
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-grande);
  transform: rotate(1.1deg);
  opacity: .55;
}

.s3-livro {
  position: relative;
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-grande);
  box-shadow: 0 18px 44px -22px rgba(67, 33, 25, .30),
              0 2px 6px rgba(67, 33, 25, .05);
  overflow: hidden;
}
.s3-livro__folha {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  line-height: 1.5;
  color: var(--s3-texto-fraco);
  transition: opacity 700ms var(--s3-curva-saida);
}
.s3-livro__folha[data-saindo="true"] { opacity: 0; }

/* cabeçalho da folha: faixa própria, como o topo de um balancete impresso */
.s3-livro__cabeca {
  padding: 14px 18px 12px;
  background: linear-gradient(180deg, var(--s3-laranja-clara), rgba(255, 238, 233, .35));
  border-bottom: 1px solid var(--s3-borda);
}
.s3-livro__titulo {
  margin: 0;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--s3-laranja-texto);
}
.s3-livro__sub { margin: 3px 0 0; font-size: 12.5px; color: var(--s3-tinta); font-weight: 600; }

.s3-livro__grade, .s3-livro__linha {
  display: grid;
  /* classificação | descrição | saldo anterior | débito | crédito | saldo atual
     Larguras MEDIDAS com o conteúdo real INCLUINDO A LINHA DE TOTAIS — a
     primeira versão dimensionou Débito/Crédito pelos maiores movimentos das
     linhas (66px) e os totais, que são somas maiores ("1.065.031,17" em
     negrito ≈ 69px), estouravam a coluna e colavam um no outro. A 10px:
     código 56, anterior 78, débito/crédito 72 (cabem os totais), saldo 80,
     descrição mais longa 183. Na menor largura do painel (628px) sobram
     ~24px de folga. Uma grade só, sem limiar frágil. */
  grid-template-columns: 56px minmax(0, 1fr) 78px 72px 72px 80px;
  gap: 0 6px;
  align-items: baseline;
  padding-inline: 15px;
}
/* o marcador ocupa os 3px da esquerda; o conteúdo recua para não encostar */
.s3-livro__linha[data-restricao] { padding-left: 18px; }

.s3-livro__th {
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--s3-texto-fraco);
  padding-block: 10px 7px;
  border-bottom: 1px solid var(--s3-borda);
}
.s3-livro__num { text-align: right; font-variant-numeric: tabular-nums; }

.s3-livro__linha {
  padding-block: 5px;
  border-bottom: 1px solid rgba(221, 222, 233, .5);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 320ms var(--s3-curva-saida),
              translate 320ms var(--s3-curva-saida),
              background-color 180ms ease;
}
.s3-livro__linha[data-posto="true"] { opacity: 1; translate: none; }
.s3-livro__conta {
  font-size: 9.5px;
  color: var(--s3-texto-fraco);
  font-variant-numeric: tabular-nums;
}
.s3-livro__desc {
  display: flex; align-items: baseline; gap: 6px;
  min-width: 0;
  color: var(--s3-tinta);
}
.s3-livro__desc > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* MARCADOR DE FINALIDADE na borda da linha: laranja = com restrição,
   cinza = sem. Substitui o selo de texto, que truncava as descrições. */
.s3-livro__linha[data-restricao] { box-shadow: inset 3px 0 0 var(--s3-borda); }
.s3-livro__linha[data-restricao="com restrição"] { box-shadow: inset 3px 0 0 var(--s3-laranja); }
.s3-livro__linha[data-restricao="sem restrição"] { box-shadow: inset 3px 0 0 #c9c9c0; }

.s3-livro__legenda {
  margin: 7px 0 0; display: flex; gap: 14px;
  font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--s3-texto-fraco);
}
.s3-livro__chave { display: flex; align-items: center; gap: 5px; }
.s3-livro__chave::before {
  content: ''; width: 3px; height: 11px; border-radius: 2px;
  background: var(--s3-laranja);
}
.s3-livro__chave[data-restricao="sem restrição"]::before { background: #c9c9c0; }
.s3-livro__saldo { color: var(--s3-tinta); font-weight: 600; }
/* o saldo anterior é contexto, não notícia: recua um tom */
.s3-livro__anterior { color: var(--s3-texto-fraco); opacity: .8; }
.s3-livro__num[data-rolando] { color: var(--s3-tinta); }

/* a régua do contador: a linha sob o cursor se destaca */
.s3-livro__linha[data-regua="true"] { background: rgba(67, 33, 25, .06); }

/* os totais e a prova da partida dobrada */
.s3-livro__totais {
  margin-top: 2px;
  padding-block: 10px 14px;
  border-top: 2px solid var(--s3-tinta);
  border-bottom: none;
  color: var(--s3-tinta);
  font-weight: 700;
}
.s3-livro__totais .s3-livro__desc {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.s3-livro__prova {
  font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--s3-sucesso-texto);
}
.s3-livro__totais[data-confere="true"] .s3-livro__prova::before { content: '✓ '; }
.s3-livro__totais[data-confere="false"] .s3-livro__prova { color: var(--s3-laranja-texto); }

/* as letras miúdas: itálico discreto no pé, como a nota de rodapé das
   demonstrações reais ("As notas explicativas são parte integrante…") */
.s3-livro__aviso {
  margin: 0;
  padding: 8px 18px 12px;
  border-top: 1px solid var(--s3-borda-suave);
  font-size: 8.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--s3-texto-fraco);
  opacity: .85;
}




/* ------------------------------------------------------------- solmaior
   As frentes-âncora: cartão grande, entregas em check, CTA próprio. */
.s3-solmaiores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3-e-7);
}
@media (max-width: 900px) { .s3-solmaiores { grid-template-columns: minmax(0, 1fr); } }
.s3-solmaior {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(18px, 1.9vw, 24px);
}
.s3-solmaior__topo { display: flex; align-items: center; justify-content: space-between; }
.s3-solmaior__etapa {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--s3-laranja-texto);
}
/* o número da frente, no mesmo mono laranja das linhas 03–07 — é ele que
   torna as "sete" contáveis: 01/02 nos cartões grandes, o resto na lista */
.s3-solmaior__etapa b {
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 700;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid var(--s3-borda);
}
.s3-solmaior__lista { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.s3-solmaior__item {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--s3-texto);
}
.s3-solmaior__item svg { flex: 0 0 auto; color: var(--s3-sucesso-texto); transform: translateY(2px); }
.s3-solmaior__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: var(--s3-e-3);
  font-size: 14px; font-weight: 700; color: var(--s3-laranja-texto);
}
.s3-solmaior:hover .s3-solmaior__cta svg { transform: translateX(4px); }
.s3-solmaior__cta svg { transition: transform 250ms var(--s3-curva); }


/* ------------------------------------------------------------------ bento
   Diferenciais em grade assimétrica: âncora metálica (2 colunas), quatro
   peças brancas com foco de luz, fecho em areia com marca d'água. */
.s3-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3-e-5);
}
.s3-bento__peca {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s3-e-4);
  padding: clamp(18px, 2vw, 24px);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: var(--s3-raio-grande);
  overflow: hidden;
  transition: transform 400ms var(--s3-curva), box-shadow 400ms var(--s3-curva),
              border-color 400ms var(--s3-curva);
}
.s3-bento__peca:hover {
  transform: scale(1.03);
  box-shadow: 0 0 10px rgba(0, 0, 0, .22);
  border-color: var(--s3-laranja);
  z-index: var(--s3-z-elevado);
}
/* sem `grid-row: span 2`: a âncora esticava até a altura de duas linhas e
   enchia a seção de vazio (187px de estouro vinham daí) */
/* volta a ocupar duas linhas: sem isso, as colunas 1-2 da segunda linha
   ficavam vazias e abria um buraco na grade */
.s3-bento__peca--ancora { grid-column: span 2; grid-row: span 2; justify-content: center; gap: var(--s3-e-4); }
/* o fecho atravessa a grade inteira — sem buraco no canto */
.s3-bento__peca--fecho {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: var(--s3-e-6);
  flex-wrap: wrap;
}
.s3-bento__peca--fecho > h3 { margin-right: var(--s3-e-4); }
.s3-bento__peca--fecho > p { flex: 1 1 320px; margin: 0; }
@media (max-width: 980px) {
  .s3-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s3-bento__peca--ancora { grid-row: span 1; }
}
@media (max-width: 640px) {
  .s3-bento { grid-template-columns: minmax(0, 1fr); }
  .s3-bento__peca--ancora { grid-column: span 1; }
  .s3-bento__peca--fecho { flex-direction: column; align-items: flex-start; }
}

/* numeral fantasma: editorial, dá régua de leitura sem gritar */
.s3-bento__n {
  position: absolute; top: 14px; right: 20px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 15px; font-weight: 700;
  color: var(--s3-texto-fraco); opacity: .45;
}
.s3-bento__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--s3-laranja-clara); color: var(--s3-laranja-texto);
  transition: transform 350ms var(--s3-curva);
}
.s3-bento__peca:hover .s3-bento__icone { transform: scale(1.1) rotate(-5deg); }

/* a ÂNCORA, à moda institucional: cartão claro com FAIXA de bandeira à
   esquerda e selos de norma — credencial em vez de brilho. O tom
   governamental veio no lugar do metal chamativo, a pedido. */
.s3-bento__peca--ancora {
  background: var(--s3-papel);
  border-left: 5px solid var(--s3-laranja);
}
.s3-bento__peca--ancora .s3-texto { max-width: 46ch; }
.s3-bento__selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3-e-4); }


/* o FECHO: areia com o ícone em marca d'água */
.s3-bento__peca--fecho { background: var(--s3-tela-areia); border-color: transparent; }
.s3-bento__peca--fecho .s3-bento__marca {
  position: absolute; right: -22px; bottom: -30px;
  color: var(--s3-laranja); opacity: .10;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .s3-bento__peca, .s3-bento__peca--ancora { transition: none; }
  .s3-bento__peca:hover { transform: none; }
}


/* o acordeão da FAQ em duas colunas: com uma, a seção estourava 252px */
@media (min-width: 900px) {
  .s3-acordeao { columns: 2; column-gap: var(--s3-e-8); }
  .s3-acordeao > * { break-inside: avoid; }
}


/* Cabeçalho de seção mais justo: os 40px de var(--s3-e-10) aplicados por
   estilo inline em cada bloco de título somavam altura em TODA seção. */
.s3-secao [style*="margin-bottom:var(--s3-e-10)"] { margin-bottom: var(--s3-e-8) !important; }
.s3-secao [style*="margin-bottom:var(--s3-e-9)"]  { margin-bottom: var(--s3-e-7) !important; }


/* Última régua de altura: nas três seções que ainda passavam de uma tela,
   o texto de apoio do cabeçalho e as trilhas internas ganham medidas mais
   justas — medido, não estimado. */
.s3-secao .s3-subtitulo { line-height: 1.45; }
.s3-ciclo { padding: var(--s3-e-7); }


/* O texto de apoio dos cabeçalhos de seção fica em medida mais curta: era
   ele que empurrava Soluções e Ciclo para além de uma tela. */
.s3-entre .s3-texto, .s3-secao > .s3-container > div > .s3-texto { font-size: 15px; }


/* Últimos 21px de Soluções e 14 do Ciclo: o respiro entre o cabeçalho da
   seção e a grade. Medido seção a seção — sem isso, duas das onze ainda
   pediam rolagem para serem vistas inteiras em 1440x900. */
.s3-secao .s3-entre { margin-bottom: var(--s3-e-6) !important; }
.s3-solmaiores { gap: var(--s3-e-6); }
.s3-secao--destaque > .s3-container > div:first-child { margin-bottom: var(--s3-e-6) !important; }

/* Os últimos 13px (Soluções) e 6px (Ciclo): margem do rótulo intermediário
   e da trilha final. Com isto, as onze seções da home cabem em 1440x900. */
.s3-secao .s3-olho { margin-bottom: 10px; }
.s3-ciclo__trilha { gap: 8px; }


@media (max-width: 1100px) { .s3-jornada { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .s3-jornada { grid-template-columns: minmax(0, 1fr); } }


/* ----------------------------------------------------------- constelação
   Padrão do componente "integrations-3" portado para o nosso stack: campo
   de ladrilhos 2-3-2 com a marca no centro e véu radial desvanecendo as
   bordas, ao lado do texto e da ação. */
.s3-const {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .s3-const { grid-template-columns: minmax(0, 1fr); } }

.s3-const__campo { position: relative; width: fit-content; margin-inline: auto; }
/* gap-2 (8px) e margens de 8px, como no original */
.s3-const__linha { display: flex; justify-content: center; gap: 8px; margin-block: 8px; }

/* o véu: `bg-radial from-transparent to-75%` — as bordas dissolvem de
   verdade, e é isso que dá o ar da referência */
.s3-const__veu {
  position: absolute; inset: -8px; z-index: 10; pointer-events: none;
  /* A COR DO VEU E A DA SECAO, nao branco: com o papel morno do manual o
     branco puro virava um quadrado mais claro boiando sobre o fundo.
     Qualquer secao de outro tom so precisa redefinir --veu. */
  --veu: 251, 248, 243;   /* --s3-papel em RGB, para o alfa do gradiente */
  /* 0,88 no fim, não opaco: o original desvanece logos coloridos, que
     resistem; ícone monocromático some por completo com o mesmo véu. */
  background: radial-gradient(ellipse at center,
    rgba(var(--veu), 0) 0%, rgba(var(--veu), 0) 38%, rgba(var(--veu), .88) 88%);
}
/* nas seções mornas/creme o véu acompanha o fundo */
.s3-secao--quente .s3-const__veu { --veu: 242, 236, 228; }
.s3-secao--areia .s3-const__veu  { --veu: 231, 223, 207; }

/* size-20 (80px) com o ícone em size-8 (32px), centrado — a proporção que
   deixa o ladrilho arejado em vez de apertado */
.s3-const__card {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 80px; height: 80px;
  border-radius: 12px;
  background: var(--s3-papel);
  border: 1px solid rgba(67, 33, 25, .2);
  color: var(--s3-laranja);
  transition: transform 320ms var(--s3-curva), box-shadow 320ms var(--s3-curva),
              border-color 320ms var(--s3-curva);
}
.s3-const__card:hover {
  transform: translateY(-3px);
  border-color: var(--s3-laranja);
  box-shadow: 0 10px 22px -12px rgba(144, 58, 39, .45);
  z-index: 20;   /* acima do véu: o ladrilho sob o cursor fica nítido */
}

/* o ladrilho da marca: borda 25% e sombra xl, como o card destacado */
.s3-const__card--marca {
  border-color: rgba(67, 33, 25, .25);
  box-shadow: 0 20px 25px -5px rgba(67, 33, 25, .1), 0 8px 10px -6px rgba(67, 33, 25, .1);
}
.s3-const__card--marca svg { border-radius: 22%; display: block; }

.s3-const__txt { display: flex; flex-direction: column; gap: var(--s3-e-5); max-width: 46ch; }
.s3-const__txt .s3-olho { margin: 0; }
.s3-const__selos { display: flex; flex-wrap: wrap; gap: 8px; }
.s3-const__txt .s3-btn { align-self: flex-start; }

/* No celular a fileira de 3 ladrilhos de 104px + gaps pede 332px, e com as
   margens do container isso transborda 360px de tela — medido. Os ladrilhos
   encolhem para caber, sem quebrar a formação 2-3-2. */
@media (max-width: 380px) {
  .s3-const__card { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .s3-const__card { transition: none; }
  .s3-const__card:hover { transform: none; }
}


/* --------------------------------------------- leitor da constelação
   A coluna de texto mostra a competência apontada. min-height reservada
   para a descrição mais longa, senão o bloco pula ao trocar de ladrilho. */
/* 9em: a descrição mais longa ("Especialização real") mede 140px contra os
   134 das outras — sem esta reserva o bloco saltava 6px ao trocar. */
.s3-const__leitura { min-height: 9em; }
.s3-const__nome {
  margin: 0 0 6px;
  font-family: var(--s3-fonte-display);
  font-size: 19px; font-weight: var(--s3-peso-negro);
  color: var(--s3-tinta);
}
.s3-const__leitura [data-desc] { margin: 0; transition: color 200ms ease; }
.s3-const__leitura[data-lendo] [data-desc] { color: var(--s3-texto); }
.s3-const__dica {
  margin: 8px 0 0;
  font-size: 12px; font-style: italic;
}
.s3-const__leitura[data-lendo] .s3-const__dica { visibility: hidden; }

/* o ladrilho é botão: zera a aparência nativa e marca o ativo */
.s3-const__card {
  appearance: none; padding: 0; font: inherit; cursor: pointer;
}
.s3-const__card[data-ativo] {
  transform: translateY(-3px);
  border-color: var(--s3-laranja);
  box-shadow: 0 10px 22px -12px rgba(144, 58, 39, .45);
  z-index: 20;
}
.s3-const__card:focus-visible {
  outline: 2px solid var(--s3-laranja);
  outline-offset: 3px;
  z-index: 20;
}
@media (max-width: 900px) { .s3-const__leitura { min-height: 0; } }


/* ------------------------------------------------- grades sem buraco
   Nas grades que desenham filetes com `gap: 1px` sobre fundo da cor da
   borda, uma célula vazia na última linha aparece como bloco cinza. Em vez
   de acertar a contagem de colunas caso a caso — que muda com a largura e
   com o conteúdo — a última peça se estende pelo que sobrar da linha.
   Vale para qualquer número de itens. */
.s3-orc      > :last-child:nth-child(3n + 1),
.s3-resultados > :last-child:nth-child(3n + 1) { grid-column: span 3; }

.s3-orc      > :last-child:nth-child(3n + 2),
.s3-resultados > :last-child:nth-child(3n + 2) { grid-column: span 2; }

.s3-jornada > :last-child:nth-child(4n + 1) { grid-column: span 4; }
.s3-jornada > :last-child:nth-child(4n + 2) { grid-column: span 3; }
.s3-jornada > :last-child:nth-child(4n + 3) { grid-column: span 2; }

/* nas larguras de 2 colunas as regras de 3 e 4 não valem: substituídas */
@media (max-width: 1100px) {
  .s3-jornada > :last-child:nth-child(4n + 1),
  .s3-jornada > :last-child:nth-child(4n + 2),
  .s3-jornada > :last-child:nth-child(4n + 3) { grid-column: auto; }
  .s3-jornada > :last-child:nth-child(2n + 1) { grid-column: span 2; }
}
/* em coluna única nada precisa se estender */
@media (max-width: 620px) {
  .s3-jornada > :last-child, .s3-orc > :last-child { grid-column: auto; }
}


/* --------------------------------------------------- botões da faixa CTA
   Sobre o campo laranja, o par de botões era dois blocos brancos chapados.
   Ganham elevação sutil e um salto de 1px no hover: convite, não bloco. */
.s3-secao[style*="--s3-laranja"] .s3-btn,
.s3-cta .s3-btn {
  box-shadow: 0 1px 2px rgba(67, 33, 25, .12);
  transition: transform 220ms var(--s3-curva), box-shadow 220ms var(--s3-curva),
              background var(--s3-tempo-rapido) var(--s3-curva),
              color var(--s3-tempo-rapido) var(--s3-curva);
}
.s3-secao[style*="--s3-laranja"] .s3-btn:hover:not(:disabled),
.s3-cta .s3-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(67, 33, 25, .35);
}
/* O vazado sobre laranja começou como vidro com rótulo branco: bonito e
   REPROVADO — branco sobre #903A27 faz 3,19:1 contra o mínimo de 4,5 (medido
   em checar_contraste.js). Fica o vidro claro com rótulo em tinta escura,
   que passa folgado e mantém a leveza. */
.s3-secao[style*="--s3-laranja"] .s3-btn--vazado {
  /* OPACO de propósito: com fundo translúcido o verificador mede o texto
     contra o laranja da seção (1,46:1) — e ele está certo, porque a mistura
     depende do que estiver atrás. Cor sólida é verificável e passa. */
  background: var(--s3-laranja-clara);
  color: var(--s3-laranja-texto);
  border-color: var(--s3-laranja-clara);
}
.s3-secao[style*="--s3-laranja"] .s3-btn--vazado:hover:not(:disabled) {
  background: var(--s3-papel);
  color: var(--s3-laranja-texto);
  border-color: var(--s3-papel);
}
@media (prefers-reduced-motion: reduce) {
  .s3-secao[style*="--s3-laranja"] .s3-btn:hover, .s3-cta .s3-btn:hover { transform: none; }
}


/* ----------------------------------------------------------- numeral-chip
   O numeral no chip do logo — a mesma peça do "3" de setor3 — usado no
   texto corrido: "[7] frentes, [1] só sistema." */
.s3-numchip {
  display: inline-block;
  font-family: var(--s3-fonte-display);
  font-weight: 800;
  line-height: 1.05;
  padding: 0 .18em .05em;
  border-radius: .22em;
  background-image: none;
  background-color: var(--s3-laranja);
  color: #F2ECE4;
  transform: translateY(-.03em);
}
.s3-numchip--grande { font-size: 44px; padding: 0 .2em .06em; }

/* ------------------------------------------------------ carrossel circular
   Padrão do circular-carousel no tema claro. Sem JS (classe --ativo
   ausente) os cartões ficam em grade normal — conteúdo sempre acessível. */
.s3-carrossel { outline: none; }
.s3-carrossel:focus-visible { outline: 2px solid var(--s3-laranja); outline-offset: 4px; border-radius: 8px; }
.s3-carrossel__pista {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s3-e-5);
}
.s3-carrossel--ativo .s3-carrossel__pista {
  display: block;
  /* acompanha a altura do cartão da frente: carrossel.js resolve a elipse por
     `2*ry + cartão <= pista`. Cartão mais alto sem pista mais alta corta o pé
     do cartão de baixo. */
  height: 486px;
}

.s3-carrossel__card {
  display: flex; flex-direction: column; gap: 7px;
  width: 312px; min-height: 196px;
  padding: var(--s3-e-7);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: 16px;
  text-decoration: none; color: var(--s3-tinta);
  box-shadow: 0 8px 24px -10px rgba(67, 33, 25, .18);
}
.s3-carrossel--ativo .s3-carrossel__card {
  position: absolute; left: 50%; top: 50%;
  transition: transform 650ms cubic-bezier(.22, 1, .36, 1),
              opacity 650ms cubic-bezier(.22, 1, .36, 1),
              box-shadow 300ms ease, border-color 300ms ease;
  will-change: transform, opacity;
}
.s3-carrossel__card[data-ativo] {
  border-color: var(--s3-laranja);
  border-width: 2px;
  box-shadow: 0 24px 60px -18px rgba(144, 58, 39, .4);
}
.s3-carrossel__tag {
  align-self: flex-start;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--s3-borda-suave); color: var(--s3-texto-fraco);
}
.s3-carrossel__tag--forte { background: var(--s3-laranja-clara); color: var(--s3-laranja-texto); }
.s3-carrossel__tit {
  font-family: var(--s3-fonte-display);
  font-size: 17px; font-weight: var(--s3-peso-negro); line-height: 1.25;
}
.s3-carrossel__desc {
  font-size: 13px; line-height: 1.5; color: var(--s3-texto-fraco);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.s3-carrossel__centro {
  display: none;
  position: absolute; left: 50%; top: 89%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.s3-carrossel--ativo .s3-carrossel__centro { display: block; }
.s3-carrossel__de {
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--s3-texto-fraco);
}

.s3-carrossel__controles {
  display: flex; align-items: center; justify-content: center; gap: var(--s3-e-6);
  margin-top: var(--s3-e-6);
}
.s3-carrossel__controles > button,
.s3-carrossel__nav > button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--s3-raio-circulo);
  background: var(--s3-papel); color: var(--s3-laranja-texto);
  border: 1px solid var(--s3-borda); cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms var(--s3-curva);
}
.s3-carrossel__controles > button:hover,
.s3-carrossel__nav > button:hover { background: var(--s3-laranja); color: #fff; transform: scale(1.07); }
.s3-carrossel__controles > [data-carrossel-ante] svg,
.s3-carrossel__nav > [data-carrossel-ante] svg { transform: rotate(180deg); }
.s3-carrossel__pontos { display: flex; align-items: center; gap: 6px; }
.s3-carrossel__pontos button {
  width: 7px; height: 7px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(67, 33, 25, .18); padding: 0;
  transition: width 300ms var(--s3-curva), background 200ms ease;
}
.s3-carrossel__pontos button:hover { background: rgba(67, 33, 25, .38); }
.s3-carrossel__pontos button[data-ativo] { width: 24px; background: var(--s3-laranja); }

@media (max-width: 640px) {
  .s3-carrossel__card { width: 212px; min-height: 150px; padding: var(--s3-e-6); }
  .s3-carrossel--ativo .s3-carrossel__pista { height: 424px; }
  .s3-numchip--grande { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .s3-carrossel--ativo .s3-carrossel__card { transition: none; }
}


/* ------------------------------------------------- soluções: duo com malha
   Título empilhado à esquerda, carrossel à direita, malha de pontos LARANJA
   sobre branco abrindo caminho para o cursor (pontos.js — a física medida
   na indicium). */
.s3-solduo {
  display: grid;
  grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
}
.s3-solduo__lado { display: flex; flex-direction: column; gap: var(--s3-e-5); }
.s3-solduo__lado .s3-olho { margin: 0; }
.s3-solduo__lado .s3-btn { align-self: flex-start; }
@media (max-width: 1020px) {
  .s3-solduo { grid-template-columns: minmax(0, 1fr); }
  .s3-solduo__lado { align-items: flex-start; }
}

/* pontos laranja em repouso, mais vivos quando o cursor passa */
/* repouso discreto: a malha é cenário; quem manda é o carrossel */
.s3-pontos--laranja .s3-pontos__ponto { fill: rgba(144, 58, 39, .34); }

/* ------------------------------------------------------------- solquadro
   A moldura da seção: borda visível, canto largo, malha clipada dentro.
   É o contraste de borda que separa a seção das vizinhas claras. */
.s3-solquadro {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 44px);
  /* Fundo alaranjado com gradiente diagonal: o quadro branco sobre seção
     branca dependia só da borda para se destacar. O tom mais quente e mais
     fundo puxa a seção para frente sem escurecer o site. */
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(166, 67, 43, .11), transparent 62%),
    radial-gradient(90% 80% at 92% 96%, rgba(144, 58, 39, .09), transparent 60%),
    linear-gradient(152deg, #F9F5EE 0%, #F4EDE2 52%, #EDE2D3 100%);
  border: 1px solid rgba(144, 58, 39, .20);
  border-radius: 24px;
  box-shadow: 0 26px 64px -30px rgba(144, 58, 39, .32);
}
.s3-solquadro > .s3-pontos { position: absolute; inset: 0; }
.s3-solquadro > .s3-solduo { position: relative; z-index: 1; }

/* os cartões do carrossel são superfície opaca sobre a malha — e com mais
   presença que ela: sombra funda no conjunto, mais ainda no ativo */
/* cartão branco sobre o fundo quente: o contraste vem da cor, não só da
   sombra — e por isso a sombra pode ser mais discreta */
.s3-solquadro .s3-carrossel__card {
  background-color: var(--s3-papel);
  border-color: rgba(144, 58, 39, .14);
  box-shadow: 0 14px 34px -14px rgba(150, 40, 6, .28);
}

/* HOVER: o cartão apontado ganha borda laranja, cresce e sobe acima de
   todos — inclusive dos que estão à frente na elipse. O opacity!important
   é necessário porque o JS escreve a opacidade da posição em style inline;
   sem isso um cartão do fundo continuaria apagado sob o cursor. */
.s3-carrossel--ativo .s3-carrossel__card:hover,
.s3-carrossel--ativo .s3-carrossel__card:focus-visible {
  border-color: var(--s3-laranja);
  border-width: 2px;
  opacity: 1 !important;
  z-index: 40 !important;
  box-shadow: 0 28px 64px -18px rgba(144, 58, 39, .5);
}
.s3-carrossel--ativo .s3-carrossel__card:focus-visible { outline: none; }
.s3-solquadro .s3-carrossel__card[data-ativo] {
  box-shadow: 0 28px 70px -20px rgba(144, 58, 39, .45);
}
.s3-carrossel:not(.s3-carrossel--ativo) .s3-carrossel__card { position: relative; }


/* ------------------------------------------------------- dores em esteira
   Padrão community-testimonial: fileiras que rolam sozinhas em direções
   opostas, laço por duplicação (-50%), fade nas bordas, pausa no hover e
   brilho radial no pé. */
.s3-doresfluxo { position: relative; display: flex; flex-direction: column; gap: var(--s3-e-8); }
.s3-doresfluxo__cabeca {
  text-align: center;
  max-width: 62ch; margin-inline: auto;
  display: flex; flex-direction: column; gap: var(--s3-e-5);
}
.s3-doresfluxo__cabeca .s3-olho { margin: 0; }
.s3-doresfluxo__fitas { display: flex; flex-direction: column; gap: var(--s3-e-6); position: relative; z-index: 1; }
.s3-doresfluxo__acao { text-align: center; position: relative; z-index: 1; }
.s3-doresfluxo__acao .s3-apoio { margin-top: var(--s3-e-4); }

/* ------------------------------------------------- esteira (fileira única)
   Container de ROLAGEM de verdade: é isso que permite arrastar, usar a roda
   e o teclado. O avanço automático (esteira.js) só incrementa scrollLeft. */
.s3-esteira { position: relative; }
.s3-esteira__fita {
  display: flex;
  overflow-x: auto;
  /* overflow-x:auto FORCA overflow-y:auto — sem respiro vertical o recorte
     comia a borda de cima do cartao e a sombra. O padding devolve o espaco
     e a margem negativa impede a secao de crescer por causa dele. */
  overflow-y: hidden;
  /* 36px embaixo porque a sombra do cartao desce 32px (14 + 34 - 16): com
     20px o recorte a decepava numa linha reta de ponta a ponta */
  padding-block: 16px 36px;
  margin-block: -16px -36px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;                 /* a barra some: quem conduz é o gesto */
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.s3-esteira__fita::-webkit-scrollbar { display: none; }
.s3-esteira__fita[data-arrastando] { cursor: grabbing; scroll-behavior: auto; }
.s3-esteira__fita:focus-visible { outline: 2px solid var(--s3-laranja); outline-offset: 4px; border-radius: 12px; }
.s3-esteira__grupo { display: flex; gap: 20px; padding-inline: 10px; }

/* CARTÃO MAIOR e com texto grande: a fileira única deu o espaço */
.s3-esteira__cartao {
  width: 400px; flex: 0 0 auto;
  padding: var(--s3-e-8);
  user-select: none;                     /* arrastar não seleciona o texto */
}
.s3-esteira__cartao .s3-texto {
  font-size: 19px; line-height: 1.5;
}
@media (max-width: 640px) {
  .s3-esteira__cartao { width: 300px; padding: var(--s3-e-7); }
  .s3-esteira__cartao .s3-texto { font-size: 16.5px; }
}

/* setas: fora da fita, centradas embaixo */
.s3-esteira__setas {
  display: flex; justify-content: center; gap: var(--s3-e-6);
  /* acima da faixa de sombra da fita, com fundo próprio: medido, os botões
     nasciam 16px DENTRO dela e a sombra passava por cima */
  position: relative; z-index: 2;
  /* a fita tem margin-bottom -36px: a margem precisa pagar isso ANTES de
     comecar a afastar, senao os botoes nascem dentro da faixa de sombra */
  margin-top: calc(36px + var(--s3-e-7));
}
.s3-esteira__setas > button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--s3-raio-circulo);
  background: var(--s3-papel); color: var(--s3-laranja-texto);
  border: 1px solid var(--s3-borda); cursor: pointer;
  box-shadow: 0 2px 10px -4px rgba(67, 33, 25, .22);
  transition: background 200ms ease, color 200ms ease,
              transform 200ms var(--s3-curva), box-shadow 200ms var(--s3-curva);
}
/* SETA LIMPA: o conjunto é duotônico e, neste tamanho, a silhueta a 22%
   vira um borrão atrás do traço. Aqui fica só a frente. */
.s3-esteira__setas > button svg path[opacity] { display: none; }
.s3-esteira__setas > button svg { width: 19px; height: 19px; }
.s3-esteira__setas > button:hover {
  background: var(--s3-laranja); color: var(--s3-papel);
  border-color: var(--s3-laranja);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(144, 58, 39, .4);
}
.s3-esteira__setas > [data-esteira-ante] svg { transform: rotate(180deg); }

/* cabeçalho maior da seção */
.s3-doresfluxo__cabeca--grande { max-width: 70ch; }
.s3-doresfluxo__cabeca--grande .s3-titulo-secao {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06;
}
.s3-doresfluxo__cabeca--grande .s3-olho { font-size: 14px; }
.s3-doresfluxo__cabeca--grande .s3-texto {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  max-width: 62ch; margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .s3-esteira__setas > button { transition: none; }
  .s3-esteira__setas > button:hover { transform: none; }
}



/* o cartão de desfecho acompanha a trilha de seis passos */
/* o desfecho é a peça mais folgada da trilha de seis: aperta 20px sem
   perder legibilidade — medido, era o que faltava para a seção caber */
.s3-desfecho { padding: clamp(18px, 1.9vw, 24px) !important; margin-top: var(--s3-e-5) !important; }
.s3-desfecho .s3-subsecao { margin: var(--s3-e-3) 0 var(--s3-e-5) !important; font-size: 21px; }
.s3-desfecho__lista { gap: 9px !important; }
.s3-metodo-v2 .s3-etapa-m__n { font-size: 46px; }
/* com seis passos, o texto de cada etapa fica mais justo */
.s3-etapa-m__txt h3 { margin-bottom: 2px; font-size: 16px; }
.s3-etapa-m__txt p { font-size: 14px; line-height: 1.45; }


/* ------------------------------------------------------- menu de serviços
   Gatilho no herói que abre as sete frentes num painel. */
.s3-menuserv { position: relative; }
.s3-menuserv__gatilho {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 var(--s3-e-6);
  background: transparent; border: 1px dashed rgba(144, 58, 39, .45);
  border-radius: var(--s3-raio-botao);
  font-family: var(--s3-fonte); font-weight: var(--s3-peso-forte);
  font-size: var(--s3-t-rotulo); color: var(--s3-laranja-texto);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.s3-menuserv__gatilho svg { transition: transform 260ms var(--s3-curva); }
.s3-menuserv[data-aberto] .s3-menuserv__gatilho,
.s3-menuserv__gatilho:hover {
  background: var(--s3-laranja-clara);
  border-style: solid; border-color: var(--s3-laranja);
}
.s3-menuserv[data-aberto] .s3-menuserv__gatilho svg { transform: rotate(-90deg); }

.s3-menuserv__painel {
  position: absolute; z-index: 60;
  /* ABRE PARA CIMA: o gatilho fica no pé do herói e a lista de sete frentes
     não cabe abaixo — nasceria cortada pela dobra da janela. */
  bottom: calc(100% + 10px); left: 0;
  width: min(520px, 86vw);
  padding: var(--s3-e-7);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: 18px;
  box-shadow: 0 -22px 60px -24px rgba(67, 33, 25, .34);
  opacity: 0; translate: 0 8px;
  transition: opacity 220ms var(--s3-curva-saida), translate 220ms var(--s3-curva-saida);
}
.s3-menuserv[data-aberto] .s3-menuserv__painel { opacity: 1; translate: none; }
@media (max-width: 560px) { .s3-menuserv__painel { left: 50%; transform: translateX(-50%); } }

.s3-menuserv__rot {
  margin: 0 0 var(--s3-e-5);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--s3-texto-fraco);
}
.s3-menuserv__grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
}
@media (max-width: 520px) { .s3-menuserv__grade { grid-template-columns: minmax(0, 1fr); } }

.s3-menuserv__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  text-decoration: none; color: var(--s3-tinta);
  transition: background 180ms ease;
}
.s3-menuserv__item:hover { background: var(--s3-laranja-clara); }
.s3-menuserv__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
  background: var(--s3-laranja-clara); color: var(--s3-laranja-texto);
}
.s3-menuserv__item:hover .s3-menuserv__icone { background: var(--s3-laranja); color: #fff; }
.s3-menuserv__etapa {
  display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--s3-texto-fraco);
}
.s3-menuserv__nome { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; }

.s3-menuserv__todos {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s3-e-5); padding-top: var(--s3-e-5);
  border-top: 1px solid var(--s3-borda);
  width: 100%;
  font-size: 13px; font-weight: 700; color: var(--s3-laranja-texto);
  text-decoration: none;
}
.s3-menuserv__todos svg { transition: transform 220ms var(--s3-curva); }
.s3-menuserv__todos:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .s3-menuserv__painel { transition: none; }
  .s3-menuserv__gatilho svg, .s3-menuserv__todos svg { transition: none; }
}


/* o cartão de desfecho respira mais agora que o texto encurtou */
.s3-desfecho .s3-subsecao { line-height: 1.25; }
.s3-desfecho__lista li { line-height: 1.5; }


/* --------------------------------------------------------- mapa do Brasil
   Presença nacional: malha oficial do IBGE, estados-clientes em laranja,
   tabela Estado|Cidade e cartão da sede. Hover sincronizado mapa↔tabela. */
.s3-mapa {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 64px);
  align-items: center;
}
@media (max-width: 960px) {
  .s3-mapa { grid-template-columns: minmax(0, 1fr); }
  .s3-mapa__quadro { order: 2; }
}

.s3-mapa__svg { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; }
.s3-mapa__uf {
  /* mais fundo que tela-areia: sobre o fundo quente da secao, a areia lia a
     delta 0,09 e o mapa sumia. #E0D6C2 devolve delta 0,15 — a mesma
     definicao que o mapa tinha quando a secao era branca. */
  fill: #E0D6C2;
  stroke: #fff; stroke-width: 1.1;
  transition: fill 180ms ease;
}
.s3-mapa__uf:hover, .s3-mapa__uf[data-ativo] { fill: #CDBFA5; }
.s3-mapa__uf--cliente { fill: var(--s3-laranja); cursor: pointer; }
.s3-mapa__uf--cliente:hover, .s3-mapa__uf--cliente[data-ativo] { fill: #5E2517; }

/* PINTURA POR ROLAGEM. A classe --anima so e posta pelo JS: sem script, ou
   com movimento reduzido, o mapa ja nasce pintado e nada disto vale. Cada
   estado acende quando a rolagem cruza o seu limiar, de norte para sul. */
.s3-mapa--anima .s3-mapa__uf--cliente {
  fill: #E0D6C2;
  transition: fill 620ms var(--s3-curva);
}
.s3-mapa--anima .s3-mapa__uf--cliente[data-pintado] { fill: var(--s3-laranja); }
.s3-mapa--anima .s3-mapa__rotulo {
  opacity: 0;
  transition: opacity 420ms ease 160ms;
}
.s3-mapa--anima .s3-mapa__rotulo[data-pintado] { opacity: 1; }
.s3-mapa--anima .s3-mapa__guia { opacity: 0; transition: opacity 420ms ease 160ms; }
.s3-mapa--anima .s3-mapa__guia[data-pintado] { opacity: .85; }
/* o hover continua mandando mais que a pintura */
.s3-mapa--anima .s3-mapa__uf--cliente:hover,
.s3-mapa--anima .s3-mapa__uf--cliente[data-ativo] { fill: #5E2517; }

@media (prefers-reduced-motion: reduce) {
  .s3-mapa--anima .s3-mapa__uf--cliente { fill: var(--s3-laranja); transition: none; }
  .s3-mapa--anima .s3-mapa__rotulo { opacity: 1; transition: none; }
  .s3-mapa--anima .s3-mapa__guia { opacity: .85; transition: none; }
}
.s3-mapa__rotulo {
  font-family: var(--s3-fonte); font-size: 13px; font-weight: 700;
  fill: #fff; pointer-events: none;
}
.s3-mapa__rotulo--fora { fill: #fff; }
.s3-mapa__guia { stroke: #fff; stroke-width: 1.4; opacity: .85; }

.s3-mapa__sede-marca { cursor: pointer; outline: none; }
.s3-mapa__sede-marca .s3-mapa__ponto {
  fill: var(--s3-tinta); stroke: #fff; stroke-width: 1.5;
  transition: fill 180ms ease, r 180ms var(--s3-curva);
}
/* alvo invisível: 15px de raio para o ponteiro pegar sem mira de precisão */
.s3-mapa__alvo { fill: transparent; }
.s3-mapa__sede-marca:hover .s3-mapa__ponto { fill: var(--s3-laranja-texto); r: 6; }
.s3-mapa__pulso {
  fill: none; stroke: var(--s3-tinta); stroke-width: 1.5; opacity: .5;
  transform-box: fill-box; transform-origin: center;
  animation: s3-mapa-pulso 2.6s ease-out infinite;
}
@keyframes s3-mapa-pulso {
  0% { transform: scale(.45); opacity: .55; }
  70% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

.s3-mapa__leitura {
  margin: var(--s3-e-4) 0 0; text-align: center;
  font-size: 13.5px; color: var(--s3-texto-fraco); min-height: 1.5em;
}
.s3-mapa__legenda {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 18px; margin-top: var(--s3-e-4);
  font-size: 12.5px; color: var(--s3-texto-fraco);
}
.s3-mapa__legenda span { display: inline-flex; align-items: center; gap: 7px; }
.s3-mapa__cor {
  width: 12px; height: 12px; border-radius: 4px;
  background: #E0D6C2; border: 1px solid var(--s3-borda);
}
.s3-mapa__cor--cliente { background: var(--s3-laranja); border-color: var(--s3-laranja); }
.s3-mapa__cor--sede { background: var(--s3-tinta); border-color: var(--s3-tinta); border-radius: 999px; }

.s3-mapa__info .s3-texto { margin-top: var(--s3-e-5); }
.s3-mapa__tabela {
  width: 100%; margin-top: var(--s3-e-6);
  border-collapse: collapse; font-size: 13.5px;
}
.s3-mapa__tabela th {
  padding: 7px 12px; text-align: left;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--s3-texto-fraco);
  border-bottom: 2px solid var(--s3-borda);
}
.s3-mapa__tabela td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--s3-borda-suave);
}
.s3-mapa__tabela td:first-child { font-weight: 600; }
.s3-mapa__tabela tr[data-ativo] td, .s3-mapa__tabela tbody tr:hover td {
  background: var(--s3-laranja-clara); color: var(--s3-laranja-texto);
}

.s3-mapa__sede {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: var(--s3-e-6); padding: var(--s3-e-6);
  /* papel, nao tela-quente: a secao agora E quente, e o cartao sumiria */
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda); border-radius: 14px;
}
.s3-mapa__sede-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
  background: var(--s3-laranja-clara); color: var(--s3-laranja-texto);
}
.s3-mapa__sede-tit { margin: 0 0 3px; font-size: 14px; font-weight: 700; }
.s3-mapa__sede-tit span { font-weight: 500; color: var(--s3-texto-fraco); }
.s3-mapa__sede-txt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--s3-texto-fraco); }
.s3-mapa__sede-txt--breve { color: var(--s3-laranja-texto); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .s3-mapa__pulso { animation: none; opacity: .35; transform: scale(.8); }
}


/* ------------------------------------------------------------- instagram
   Coluna de texto + embed oficial da publicacao em destaque. A largura do
   embed manda na altura dele: 430px rende ~638px na variante sem legenda,
   que e o que cabe no orcamento de uma janela. */
.s3-insta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .s3-insta { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .s3-insta__txt { text-align: center; }
}

.s3-insta__txt .s3-texto { margin-top: var(--s3-e-5); max-width: 46ch; }
.s3-insta__seguir { margin-top: var(--s3-e-8); }

.s3-insta__quadro {
  width: 100%;
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(67, 33, 25, .3);
}
.s3-insta__frame {
  display: block; width: 100%; height: 638px; border: 0;
  transition: height 220ms var(--s3-curva);
}
@media (prefers-reduced-motion: reduce) {
  .s3-insta__frame { transition: none; }
}


/* fundo claro com a malha de pontos: acolhimento em vez de bloco de cor.
   O quadro do embed continua opaco e acima da malha. */
.s3-secao--pontos-claro { position: relative; background-color: var(--s3-papel); }
.s3-secao--pontos-claro > .s3-pontos { position: absolute; inset: 0; }
.s3-secao--pontos-claro > .s3-container { position: relative; z-index: 1; }


/* ------------------------------------------------ balão da sede no mapa
   Aparece ao apontar o marcador de Santos: endereço + chamada para o Maps.
   Posicionado por JS em coordenadas do quadro, e preso dentro dele. */
.s3-mapa__quadro { position: relative; }
.s3-mapa__balao {
  position: absolute; z-index: 5;
  width: 232px; padding: 12px 14px;
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(67, 33, 25, .34);
  /* precisa RECEBER ponteiro: e dentro dele que esta o link do Maps */
  pointer-events: auto;
  cursor: pointer; text-decoration: none; color: inherit;
  opacity: 0; translate: 0 6px;
  transition: opacity 180ms var(--s3-curva), translate 180ms var(--s3-curva),
              border-color 180ms ease, box-shadow 180ms ease;
}
/* enquanto fechado NAO pode capturar clique: o atributo hidden ja tira do
   fluxo, mas durante os 240ms de saida ele ainda esta na tela */
.s3-mapa__balao:not([data-aberto]) { pointer-events: none; }
.s3-mapa__balao:hover {
  border-color: var(--s3-laranja);
  box-shadow: 0 20px 44px -14px rgba(144, 58, 39, .34);
}
.s3-mapa__balao-tit, .s3-mapa__balao-txt, .s3-mapa__balao-cta { display: block; }
.s3-mapa__balao:hover .s3-mapa__balao-cta { text-decoration: underline; }
.s3-mapa__balao[data-aberto] { opacity: 1; translate: none; }
.s3-mapa__balao-tit {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 5px; font-size: 13px; font-weight: 700;
  color: var(--s3-tinta);
}
.s3-mapa__balao-txt { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--s3-texto-fraco); }
.s3-mapa__balao-cta {
  display: flex; align-items: center; gap: 5px;
  margin: 8px 0 0; padding-top: 8px;
  border-top: 1px solid var(--s3-borda-suave);
  font-size: 12px; font-weight: 700; color: var(--s3-laranja-texto);
}

/* o cartão da sede agora é link: ganha afordância sem virar botão */
a.s3-mapa__sede { text-decoration: none; color: inherit; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--s3-curva); }
a.s3-mapa__sede:hover {
  border-color: var(--s3-laranja);
  box-shadow: 0 14px 30px -16px rgba(144, 58, 39, .32);
  transform: translateY(-2px);
}
a.s3-mapa__sede:focus-visible { outline: 2px solid var(--s3-laranja); outline-offset: 3px; }
.s3-mapa__sede-maps {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 11px 0 0; padding: 9px 16px;
  background: var(--s3-laranja-acao); color: #fff;
  border-radius: var(--s3-raio-botao);
  font-size: 13px; font-weight: 700;
  box-shadow: var(--s3-sombra-marca);
  transition: background 200ms ease;
}
a.s3-mapa__sede:hover .s3-mapa__sede-maps { background: var(--s3-laranja-pressionada); }
.s3-mapa__sede-seta { display: inline-flex; transition: transform 200ms var(--s3-curva); }
a.s3-mapa__sede:hover .s3-mapa__sede-seta { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .s3-mapa__balao { transition: none; }
  a.s3-mapa__sede, .s3-mapa__sede-seta { transition: none; }
  a.s3-mapa__sede:hover { transform: none; }
}


/* ===================================================== FORMULÁRIOS (páginas)
   Diagnóstico, agendamento e orçamento compartilham o mesmo quadro: cartão
   claro sobre seção morna, barra de progresso no topo, um passo por vez. */
.s3-container--estreito { max-width: 780px; }

.s3-form-quadro {
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: 20px;
  padding: clamp(24px, 3.4vw, 44px);
  box-shadow: 0 22px 56px -30px rgba(67, 33, 25, .28);
}
.s3-form-quadro__topo { margin-bottom: var(--s3-e-8); }
.s3-form-quadro__topo .s3-progresso { margin-top: 8px; }
.s3-form__titulo { font-size: clamp(21px, 2.6vw, 28px); margin: var(--s3-e-4) 0 var(--s3-e-8); }
.s3-form__titulo:focus-visible { outline: none; }
.s3-form__acoes {
  display: flex; align-items: center; gap: var(--s3-e-7);
  flex-wrap: wrap; margin-top: var(--s3-e-8);
}
.s3-form__selos { display: flex; gap: 8px; margin: var(--s3-e-7) 0 var(--s3-e-5); }

/* OPÇÃO-BOTÃO: no quiz, clicar já avança — então a opção é <button>, não
   input. Herda a aparência de .s3-opcao e ganha comportamento de alvo. */
.s3-opcao--botao {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--s3-papel); font: inherit; color: inherit;
}
.s3-opcao--botao:hover { border-color: var(--s3-laranja); background: var(--s3-laranja-clara); }
.s3-opcao--botao:focus-visible { outline: 2px solid var(--s3-laranja); outline-offset: 2px; }
.s3-opcao--linha { margin-top: -16px; margin-bottom: var(--s3-e-7); }
.s3-opcao__nome { display: block; font-weight: 600; }
.s3-opcao__desc { display: block; margin-top: 3px; font-size: 13px; color: var(--s3-texto-fraco); }

.s3-form-confianca {
  list-style: none; margin: var(--s3-e-8) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
}
.s3-form-confianca li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--s3-texto-fraco);
}

.s3-form__fim { text-align: center; padding: var(--s3-e-8) 0; }
.s3-form__fim-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: var(--s3-e-7);
  border-radius: var(--s3-raio-circulo);
  background: var(--s3-laranja-clara); color: var(--s3-laranja-texto);
}
.s3-form__fim .s3-texto { max-width: 46ch; margin: var(--s3-e-6) auto var(--s3-e-8); }

/* ------------------------------------------------------------ agendamento */
.s3-agenda__dias {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  margin-top: var(--s3-e-5);
}
@media (max-width: 560px) { .s3-agenda__dias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s3-agenda__dia {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; cursor: pointer;
  background: var(--s3-papel); border: 1px solid var(--s3-borda);
  border-radius: 10px; font-family: var(--s3-fonte); color: var(--s3-tinta);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--s3-curva);
}
.s3-agenda__dia:hover { border-color: var(--s3-laranja); transform: translateY(-2px); }
.s3-agenda__dia[data-ativo] { background: var(--s3-laranja); border-color: var(--s3-laranja); color: #fff; }
.s3-agenda__sem { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--s3-texto-fraco); }
.s3-agenda__dia[data-ativo] .s3-agenda__sem,
.s3-agenda__dia[data-ativo] .s3-agenda__mes { color: rgba(255, 255, 255, .82); }
.s3-agenda__num { font-family: var(--s3-fonte-display); font-size: 20px; font-weight: 700; line-height: 1.1; }
.s3-agenda__mes { font-size: 11px; color: var(--s3-texto-fraco); }

.s3-agenda__horas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s3-e-5); }
.s3-agenda__hora {
  min-width: 92px; padding: 11px 14px; cursor: pointer;
  background: var(--s3-papel); border: 1px solid var(--s3-borda); border-radius: 10px;
  font-family: var(--s3-fonte); font-size: 14px; color: var(--s3-tinta);
  transition: border-color 180ms ease, background 180ms ease;
}
.s3-agenda__hora:hover:not(:disabled) { border-color: var(--s3-laranja); }
.s3-agenda__hora[data-ativo] { background: var(--s3-laranja); border-color: var(--s3-laranja); color: #fff; }
.s3-agenda__hora:disabled { opacity: .42; cursor: not-allowed; }
.s3-agenda__horas + form { margin-top: var(--s3-e-9); }

/* ------------------------------------------- resultado do diagnóstico */
.s3-diag-nota {
  display: flex; align-items: center; gap: var(--s3-e-8);
  padding: var(--s3-e-8); border-radius: 16px;
  background: var(--s3-acento-clara); border: 1px solid var(--s3-acento);
}
@media (max-width: 560px) { .s3-diag-nota { flex-direction: column; text-align: center; } }
.s3-diag-nota__valor {
  font-family: var(--s3-fonte-display); font-size: 54px; font-weight: 800;
  line-height: 1; color: var(--s3-laranja-texto); flex: 0 0 auto;
}
.s3-diag-nota__valor small { font-size: 18px; font-weight: 600; opacity: .6; }
.s3-diag-nota--alto { background: var(--s3-verde-clara); border-color: var(--s3-verde); }
.s3-diag-nota--alto .s3-diag-nota__valor { color: var(--s3-verde-texto); }
.s3-diag-nota .s3-olho { margin: 0 0 5px; }

.s3-diag-h { margin: var(--s3-e-10) 0 var(--s3-e-6); }
.s3-diag-barras { display: flex; flex-direction: column; gap: var(--s3-e-6); }
.s3-diag-barra .s3-progresso { margin-top: 6px; }
.s3-progresso__barra--baixo { background: #A6432B; }
.s3-progresso__barra--medio { background: var(--s3-laranja); }
.s3-progresso__barra--alto  { background: var(--s3-verde); }

.s3-diag-cartoes { display: flex; flex-direction: column; gap: var(--s3-e-6); }
.s3-diag-cartao {
  padding: var(--s3-e-7); border-radius: 14px;
  border: 1px solid var(--s3-borda); border-left: 3px solid var(--s3-laranja);
  background: var(--s3-tela-quente);
}
.s3-diag-cartao--alto { border-left-color: var(--s3-verde); }
.s3-diag-cartao--baixo { border-left-color: #A6432B; }
.s3-diag-cartao header { display: flex; align-items: center; gap: 11px; margin-bottom: var(--s3-e-6); }
.s3-diag-cartao__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
  background: var(--s3-laranja-clara); color: var(--s3-laranja-texto);
}
.s3-diag-cartao header h4 { margin: 2px 0 0; }
.s3-diag-cartao .s3-apoio { margin: 0 0 8px; }
.s3-diag-cartao .s3-link { font-size: 13px; }

.s3-diag-futuro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3-e-6); }
.s3-diag-futuro li {
  display: flex; gap: 14px; align-items: flex-start;
  padding-left: 14px; border-left: 2px solid var(--s3-laranja);
  font-size: 15px; line-height: 1.55;
}
.s3-diag-futuro span {
  font-family: var(--s3-fonte-display); font-weight: 800;
  color: var(--s3-laranja-texto); flex: 0 0 auto;
}
.s3-diag-cta {
  margin-top: var(--s3-e-10); padding-top: var(--s3-e-8);
  border-top: 1px solid var(--s3-borda); text-align: center;
}
.s3-diag-cta .s3-texto { max-width: 48ch; margin: var(--s3-e-4) auto var(--s3-e-7); }

/* ------------------------------------------------- documento legal (LGPD) */
.s3-legal {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
@media (max-width: 900px) { .s3-legal { grid-template-columns: minmax(0, 1fr); } }
.s3-legal__indice { position: sticky; top: 96px; }
@media (max-width: 900px) { .s3-legal__indice { position: static; } }
.s3-legal__indice ol {
  margin: var(--s3-e-5) 0 0; padding-left: 1.15em;
  display: flex; flex-direction: column; gap: 7px;
}
.s3-legal__indice a { font-size: 13px; color: var(--s3-texto-fraco); text-decoration: none; }
.s3-legal__indice a:hover { color: var(--s3-laranja-texto); text-decoration: underline; }
.s3-legal__corpo { display: flex; flex-direction: column; gap: var(--s3-e-10); }
.s3-legal__secao { scroll-margin-top: 96px; }
.s3-legal__titulo {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--s3-fonte-display); font-size: clamp(19px, 2.2vw, 23px);
  font-weight: var(--s3-peso-negro); margin: 0 0 var(--s3-e-6);
}
.s3-legal__titulo span { font-size: 13px; color: var(--s3-laranja-texto); flex: 0 0 auto; }
.s3-legal__secao .s3-texto { margin: 0 0 var(--s3-e-5); max-width: 68ch; }
.s3-legal__lista {
  margin: 0; padding-left: 1.2em;
  display: flex; flex-direction: column; gap: 9px; max-width: 68ch;
}
.s3-legal__lista li { font-size: 15px; line-height: 1.6; color: var(--s3-texto); }

/* link legal no pé do rodapé: mesma linha do aviso de direitos */
.s3-rodape__link--pe { display: inline; margin-left: 6px; text-decoration: underline; }


/* --------------------------------- destaque do Instagram com mídia local
   Usado quando o post não pode ser incorporado (autor privado / colab).
   Mesma silhueta do embed, mas é nosso: carrega rápido e não quebra. */
.s3-insta__quadro--proprio {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--s3-tinta);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--s3-curva);
}
.s3-insta__quadro--proprio:hover {
  border-color: var(--s3-laranja);
  box-shadow: 0 26px 56px -22px rgba(144, 58, 39, .34);
  transform: translateY(-3px);
}
.s3-insta__quadro--proprio:focus-visible { outline: 2px solid var(--s3-laranja); outline-offset: 3px; }

.s3-insta__cabeca { display: flex; align-items: center; gap: 10px; padding: 13px 15px; }
.s3-insta__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--s3-raio-circulo);
  background: var(--s3-laranja-clara); color: var(--s3-laranja-texto);
}
.s3-insta__perfil { display: block; font-size: 13.5px; font-weight: 700; }
.s3-insta__local { display: block; font-size: 12px; color: var(--s3-texto-fraco); }

.s3-insta__midia {
  display: block; width: 100%;
  /* 1/1 porque a origem É quadrada: em 4/5 o cartão cortava as bordas da
     cena. Corrigir o recorte também devolve ~107px de altura para o texto. */
  aspect-ratio: 1 / 1;
  object-fit: cover; background: var(--s3-tela-areia);
}
.s3-insta__legenda {
  display: -webkit-box; -webkit-line-clamp: 11; -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 14px 15px 0; font-size: 13px; line-height: 1.5; color: var(--s3-texto);
}
.s3-insta__pe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding: 13px 15px;
  font-size: 12.5px; color: var(--s3-texto-fraco);
}
.s3-insta__ver {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--s3-laranja-texto);
}
.s3-insta__ver svg { transition: transform 200ms var(--s3-curva); }
.s3-insta__quadro--proprio:hover .s3-insta__ver svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .s3-insta__quadro--proprio, .s3-insta__ver svg { transition: none; }
  .s3-insta__quadro--proprio:hover { transform: none; }
}


/* ------------------------------------------------- nuvem (antigravity)
   Poeira de pontos atras do conteudo do quadro; o canvas e do nuvem.js. */
.s3-nuvem { position: absolute; inset: 0; pointer-events: none; }
.s3-nuvem canvas { display: block; }
.s3-solquadro > .s3-solcentro { position: relative; z-index: 1; }

/* --------------------------------------------- servicos em composicao central
   Cabecalho centrado, carrossel centrado embaixo — o desenho da referencia. */
.s3-solcentro__cabeca {
  text-align: center;
  max-width: 58ch; margin: 0 auto 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.s3-solcentro__cabeca .s3-olho { margin: 0; }
.s3-solcentro__cabeca .s3-titulo-secao { margin: 0; }

/* controles em grade: nav no centro geometrico, Ver todas na direita */
.s3-carrossel__controles--grade {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.s3-carrossel__nav { display: inline-flex; align-items: center; gap: var(--s3-e-6); }
.s3-carrossel__todas { justify-self: end; }
@media (max-width: 640px) {
  .s3-carrossel__controles--grade { grid-template-columns: 1fr; gap: var(--s3-e-5); justify-items: center; }
  .s3-carrossel__todas { justify-self: center; }
}


/* --------------------------------------- cartao ativo com argumento completo
   So o cartao da frente mostra o bloco extra: resumo maior, beneficios e
   riscos em bullets de uma linha, e a chamada (o cartao inteiro e o link). */
.s3-carrossel__extra { display: none; }
.s3-carrossel__card[data-ativo] {
  width: 420px;
  padding: 22px 24px 20px;
  gap: 9px;
}
.s3-carrossel__card[data-ativo] .s3-carrossel__tit { font-size: 20px; line-height: 1.22; }
.s3-carrossel__card[data-ativo] .s3-carrossel__desc {
  /* 3 linhas: em 2 o resumo terminava em reticências antes de dizer o que o
     serviço é — e é ele que decide o clique, não os bullets. */
  font-size: 14px; line-height: 1.5; color: var(--s3-texto);
  -webkit-line-clamp: 3;
}
.s3-carrossel__card[data-ativo] .s3-carrossel__extra {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--s3-borda-suave);
}
.s3-carrossel__args { display: flex; flex-direction: column; gap: 8px; }
.s3-carrossel__arg {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; line-height: 1.4;
}
.s3-carrossel__arg svg { flex: 0 0 auto; translate: 0 2px; }
.s3-carrossel__arg i { font-style: normal; }
.s3-carrossel__arg--sim svg { color: var(--s3-verde-acao); }
.s3-carrossel__arg--nao svg { color: #A6432B; }
.s3-carrossel__arg--nao i { color: var(--s3-texto-fraco); }
/* BOTÃO, e não texto. O cartão inteiro é o link, mas num cartão que é só
   texto escuro em linhas curtas a chamada em terracota sem fundo tinha menos
   presença que os bullets acima dela — o olho não achava onde clicar. */
.s3-carrossel__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 2px;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--s3-laranja); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 8px 18px -10px rgba(144, 58, 39, .6);
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms var(--s3-curva);
}
.s3-carrossel__cta svg { transition: transform 200ms var(--s3-curva); }
.s3-carrossel__card[data-ativo]:hover .s3-carrossel__cta {
  background: var(--s3-laranja-pressionada);
  box-shadow: 0 12px 24px -10px rgba(144, 58, 39, .7);
  transform: translateY(-1px);
}
.s3-carrossel__card[data-ativo]:hover .s3-carrossel__cta svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .s3-carrossel__cta, .s3-carrossel__card[data-ativo]:hover .s3-carrossel__cta { transition: none; transform: none; }
}

/* CELULAR — e este bloco tem de vir DEPOIS do de cima.
   `.s3-carrossel__card[data-ativo]` tem a mesma especificidade nas duas
   regras; quando o ajuste de celular ficava lá em cima, na media query da
   seção do carrossel, os 420px de computador venciam por serem os últimos, o
   cartão saía com 420 numa tela de 390 e a home rolava de lado. */
@media (max-width: 640px) {
  .s3-carrossel__card[data-ativo] {
    width: min(300px, calc(100vw - 48px));
    padding: 16px 16px 14px;
  }
  .s3-carrossel__card[data-ativo] .s3-carrossel__tit { font-size: 17px; }
  .s3-carrossel__card[data-ativo] .s3-carrossel__desc { font-size: 13px; }
  .s3-carrossel__card[data-ativo] .s3-carrossel__arg { font-size: 12px; }
  .s3-carrossel__cta { padding: 10px 14px; font-size: 13px; }
}
.s3-carrossel__conversar { justify-self: start; }
@media (max-width: 640px) { .s3-carrossel__conversar { justify-self: center; } }


/* contador compacto na barra de navegacao (o grande saiu do meio da pista:
   o cartao ativo alto engoliu a coluna central) */
.s3-carrossel__contador {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--s3-texto-fraco);
}
.s3-carrossel__contador .s3-numchip { font-size: 15px; }


/* ================================================================ JORNAL S3
   Indice de artigos: destaque, filtros, grade de filete e materiais. */
/* `hidden` PASSA A ESCONDER, SEMPRE — e a regra é global de propósito.

   O navegador declara `[hidden] { display: none }`, mas qualquer `display` de
   autor vence isso por especificidade. Neste projeto o mesmo tropeço apareceu
   TRÊS vezes: na esteira das dores (`display:flex`), no Jornal S3
   (`display:grid` no destaque e `display:flex` nos cartões) e no filtro de
   projetos (`.s3-cartao--clicavel { display: block }`). Nos três casos o JS
   punha o atributo, nada sumia da tela, e o filtro parecia não funcionar.

   Consertar caso a caso convida a quarta vez. `!important` aqui é a exceção
   que se justifica: `hidden` não é decoração, é estado — e um elemento
   marcado como escondido não deveria ficar visível por causa de uma regra de
   layout escrita em outro arquivo. */
[hidden] { display: none !important; }
.s3-jornal__destaque {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  background: var(--s3-acento-clara);
  border: 1px solid var(--s3-acento);
  border-radius: 18px; overflow: hidden;
  text-decoration: none; color: var(--s3-tinta);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.s3-jornal__destaque:hover {
  border-color: var(--s3-acento-acao);
  box-shadow: 0 22px 50px -26px rgba(144, 58, 39, .34);
}
@media (max-width: 820px) { .s3-jornal__destaque { grid-template-columns: minmax(0, 1fr); } }
.s3-jornal__destaque-txt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(26px, 3.6vw, 46px);
}
.s3-jornal__meta { color: var(--s3-texto-fraco); }
.s3-jornal__destaque-tit {
  font-family: var(--s3-fonte-display);
  font-size: clamp(23px, 3vw, 34px); font-weight: var(--s3-peso-negro);
  line-height: 1.14; max-width: 20ch;
}
.s3-jornal__destaque-txt .s3-texto { max-width: 46ch; }
.s3-jornal__destaque-marca {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .5);
  opacity: .5;
}
@media (max-width: 820px) { .s3-jornal__destaque-marca { display: none; } }

.s3-jornal__ler {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--s3-acento-texto);
}
.s3-jornal__ler svg { transition: transform 200ms var(--s3-curva); }
.s3-jornal__destaque:hover .s3-jornal__ler svg,
.s3-jornal__item:hover .s3-jornal__ler svg { transform: translateX(4px); }

.s3-jornal__filtros {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: var(--s3-e-9) 0 var(--s3-e-7);
}
.s3-jornal__filtro {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--s3-borda);
  font-family: var(--s3-fonte); font-size: 12.5px; font-weight: 600;
  color: var(--s3-texto);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.s3-jornal__filtro:hover { border-color: var(--s3-acento); color: var(--s3-acento-texto); }
.s3-jornal__filtro[data-ativo] {
  background: var(--s3-acento-acao); border-color: var(--s3-acento-acao); color: #fff;
}

/* grade de filete: 1px de vao sobre a borda, como as outras do site */
.s3-jornal__grade {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--s3-borda);
  border: 1px solid var(--s3-borda); border-radius: 12px; overflow: hidden;
}
@media (max-width: 980px) { .s3-jornal__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .s3-jornal__grade { grid-template-columns: minmax(0, 1fr); } }
/* sem buraco: o ultimo item sozinho na linha ocupa a linha inteira */
.s3-jornal__grade > .s3-jornal__item:last-child:nth-child(3n + 1) { grid-column: span 3; }
@media (max-width: 980px) {
  .s3-jornal__grade > .s3-jornal__item:last-child:nth-child(3n + 1) { grid-column: span 2; }
  .s3-jornal__grade > .s3-jornal__item:last-child:nth-child(2n + 1) { grid-column: span 2; }
}
@media (max-width: 620px) {
  .s3-jornal__grade > .s3-jornal__item:last-child:nth-child(3n + 1),
  .s3-jornal__grade > .s3-jornal__item:last-child:nth-child(2n + 1) { grid-column: span 1; }
}

.s3-jornal__item {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--s3-papel);
  text-decoration: none; color: var(--s3-tinta);
  transition: background 180ms ease;
}
.s3-jornal__item:hover { background: var(--s3-tela-quente); }
.s3-jornal__tit {
  font-family: var(--s3-fonte-display);
  font-size: 18px; font-weight: var(--s3-peso-negro); line-height: 1.25;
  margin: 0;
}
.s3-jornal__item .s3-apoio { flex: 1; margin: 0; }
.s3-jornal__pe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: var(--s3-e-5); padding-top: var(--s3-e-5);
  border-top: 1px solid var(--s3-borda-suave);
}
.s3-jornal__vazio { margin-top: var(--s3-e-8); text-align: center; }

@media (max-width: 1020px) { .s3-jornal__materiais { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .s3-jornal__materiais { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- artigo */
.s3-container--leitura { max-width: 760px; }
.s3-voltar-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--s3-texto-fraco); text-decoration: none;
}
.s3-voltar-link svg { transform: rotate(180deg); }
.s3-voltar-link:hover { color: var(--s3-acento-texto); }
.s3-artigo__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: var(--s3-e-8) 0 var(--s3-e-6);
}
.s3-artigo__titulo {
  font-family: var(--s3-fonte-display);
  font-size: clamp(30px, 4.6vw, 48px); font-weight: var(--s3-peso-negro);
  line-height: 1.08; letter-spacing: -.02em; margin: 0 0 var(--s3-e-6);
}
.s3-artigo__linhafina {
  font-size: clamp(17px, 2.1vw, 21px); line-height: 1.5;
  color: var(--s3-texto-fraco); margin: 0;
}
/* as tres barras da marca, como fio de abertura */
.s3-artigo__barras { display: flex; flex-direction: column; gap: 5px; margin: var(--s3-e-9) 0; }
.s3-artigo__barras i { height: 8px; border-radius: 2px; background: var(--s3-laranja); }
.s3-artigo__barras i:nth-child(2) { width: 88%; background: var(--s3-laranja-clara); }
.s3-artigo__barras i:nth-child(3) { width: 72%; background: #E0D6C2; }

.s3-artigo__p {
  font-size: 17.5px; line-height: 1.75; color: var(--s3-texto);
  margin: 0 0 var(--s3-e-7);
}
.s3-artigo__capitular {
  float: left; font-family: var(--s3-fonte-display);
  font-size: 58px; line-height: .84; font-weight: var(--s3-peso-negro);
  color: var(--s3-laranja-texto);
  margin: 6px 10px 0 0;
}
.s3-artigo__selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3-e-9); }
.s3-artigo__selos .s3-selo { display: inline-flex; align-items: center; gap: 6px; }
.s3-artigo__cta {
  text-align: center; max-width: 56ch; margin-inline: auto;
}
.s3-artigo__cta .s3-texto { margin: var(--s3-e-4) 0 var(--s3-e-7); }

@media (prefers-reduced-motion: reduce) {
}


/* ============================================================== QUEM SOMOS
   Cartoes empilhados (padrao donatekart/about-us): cada um gruda perto do
   topo com um degrau de 14px; o seguinte sobe por cima ao rolar e os
   anteriores ficam espiando como lombadas coloridas. CSS puro. */
.s3-pilha {
  display: flex; flex-direction: column; gap: var(--s3-e-9);
  /* a moldura da referencia, GARANTIDA em qualquer janela: nunca menos de
     70px de respiro por lado (o print do Alexandre era viewport ~1250 com
     scaling do Windows — la o 1100 fixo comia as margens) */
  max-width: min(1020px, calc(100% - 140px));
  margin-inline: auto;
  margin-top: var(--s3-e-8);
  padding-bottom: 56px;
}
.s3-valor {
  position: sticky;                 /* o top vem inline: 96px + i*18 */
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 3.4vw, 48px); align-items: center;
  min-height: clamp(330px, 44vh, 420px);
  padding: clamp(24px, 2.8vw, 40px) clamp(26px, 3.4vw, 48px);
  border-radius: 24px;
  box-shadow: 0 -14px 40px -22px rgba(67, 33, 25, .35);
}
@media (max-width: 860px) {
  .s3-valor { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* as cinco cores da paleta, com o par de texto que passa no contraste */
.s3-valor--rosa   { background: var(--s3-tela-areia); color: var(--s3-tinta); }   /* creme+café 10,8 */
.s3-valor--marrom { background: var(--s3-laranja);    color: #E7DFCF; }            /* terracota+creme 5,6 */
.s3-valor--viva   { background: #D4C7B0;              color: var(--s3-tinta); }    /* areia+café 8,6 */
.s3-valor--verde  { background: var(--s3-verde);      color: var(--s3-papel); }    /* sálvia+branco-q 5,5 */
.s3-valor--azul   { background: var(--s3-tinta);      color: #E7DFCF; }            /* café+creme 10,8 */

.s3-valor__titulo {
  font-family: var(--s3-fonte-display);
  font-size: clamp(24px, 2.8vw, 36px); font-weight: 600;
  line-height: 1.12; margin: 0 0 var(--s3-e-6);
}
.s3-valor__enfase {
  font-weight: var(--s3-peso-negro); white-space: nowrap;
  display: inline-block;
}
.s3-valor__texto {
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6;
  margin: 0; max-width: 46ch;
}
.s3-valor--marrom .s3-valor__texto { color: #E7DFCF; }
.s3-valor--azul .s3-valor__texto { color: #E7DFCF; }
.s3-valor--verde .s3-valor__texto { color: var(--s3-papel); }
.s3-valor__apoio {
  margin: var(--s3-e-6) 0 0; max-width: 44ch;
  font-size: 15px; line-height: 1.55; font-style: italic;
  color: inherit; opacity: .82;
}

.s3-valor__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s3-e-7); }
.s3-valor__chip {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; border-radius: 10px;
  background: rgba(255, 255, 255, .16);
  font-size: 12px; line-height: 1.3;
}
.s3-valor__chip b { font-family: var(--s3-fonte-display); font-size: 19px; }
.s3-valor--rosa .s3-valor__chip, .s3-valor--verde .s3-valor__chip,
.s3-valor--viva .s3-valor__chip { background: rgba(255, 255, 255, .55); }
.s3-valor__chip--miudo {
  flex-direction: row; padding: 7px 13px;
  font-size: 12.5px; font-weight: 600; border-radius: 999px;
}
.s3-valor__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s3-e-8); }
/* botão vazado sobre o laranja vivo: borda e texto em tinta, não em laranja */
.s3-valor--azul .s3-valor__btn-claro {
  background: transparent;             /* o vazado base e papel: branco-no-branco */
  border-color: rgba(255, 255, 255, .65); color: #fff;
}
.s3-valor--azul .s3-valor__btn-claro:hover { background: rgba(255, 255, 255, .18); }

.s3-valor__quadro {
  border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, .22);
  min-height: 200px; max-width: 520px; justify-self: end; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 860px) { .s3-valor__quadro { justify-self: stretch; max-width: none; } }
.s3-valor--suave .s3-valor__quadro, .s3-valor--areia .s3-valor__quadro { background: rgba(255, 255, 255, .6); }
.s3-valor__midia { display: block; width: 100%; height: 100%; max-height: 300px; object-fit: cover; }
.s3-valor__marca { opacity: .45; }
@media (max-width: 860px) { .s3-valor__quadro { min-height: 200px; } }

/* -------------------------------------------- entrada na home (o leque) */
.s3-quem {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
@media (max-width: 900px) { .s3-quem { grid-template-columns: minmax(0, 1fr); } }
.s3-quem__txt .s3-texto { margin: var(--s3-e-5) 0 var(--s3-e-8); max-width: 46ch; }
.s3-quem__leque { position: relative; height: 372px; }
/* cada lâmina é a PRÉVIA de um valor: a ênfase fica na faixa visível e a
   pergunta aparece ao apontar; clicar leva ao cartão em /sobre/ */
.s3-quem__lamina {
  position: absolute; left: calc(var(--i) * 20px); right: calc((4 - var(--i)) * 20px);
  top: calc(var(--i) * 52px); height: 168px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 20px 16px;
  border-radius: 16px; text-decoration: none;
  box-shadow: 0 -10px 26px -14px rgba(67, 33, 25, .45);
  z-index: calc(var(--i) + 1);
  transition: transform 280ms var(--s3-curva), box-shadow 280ms var(--s3-curva);
}
/* a faixa visível de cada lâmina: "Por que existimos: PROTEGER" */
.s3-quem__val {
  font-family: var(--s3-fonte-display);
  font-size: 17px; font-weight: 420; line-height: 1.15; letter-spacing: -.01em;
}
.s3-quem__val b { font-weight: 700; }
/* frase + chamada: só ao apontar, quando a lâmina vem à frente */
.s3-quem__corpo {
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; translate: 0 -5px;
  transition: opacity 240ms var(--s3-curva), translate 240ms var(--s3-curva);
}
.s3-quem__frase { font-size: 13.5px; line-height: 1.45; opacity: .9; }
.s3-quem__ir {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--s3-fonte); font-size: 12.5px; font-weight: 700;
  padding: 7px 14px; border-radius: var(--s3-raio-botao);
  border: 1.5px solid currentColor;
}
.s3-quem__ir svg { transition: transform 200ms var(--s3-curva); }
.s3-quem__lamina:hover .s3-quem__ir svg { transform: translateX(4px); }
.s3-quem__lamina:hover, .s3-quem__lamina:focus-visible {
  z-index: 20; transform: translateY(-10px);
  box-shadow: 0 18px 40px -14px rgba(67, 33, 25, .5);
}
.s3-quem__lamina:hover .s3-quem__corpo,
.s3-quem__lamina:focus-visible .s3-quem__corpo { opacity: 1; translate: none; }
/* a lamina da FRENTE ja esta inteira visivel: nasce aberta, sem hover */
.s3-quem__lamina:last-child .s3-quem__corpo { opacity: 1; translate: none; }
.s3-quem__lamina:focus-visible { outline: 2px solid var(--s3-papel); outline-offset: -5px; }

/* pares de cor já medidos na pilha */
.s3-quem__lamina.s3-valor--rosa   { color: var(--s3-tinta); }
.s3-quem__lamina.s3-valor--marrom { color: #E7DFCF; }
.s3-quem__lamina.s3-valor--viva   { color: var(--s3-tinta); }
.s3-quem__lamina.s3-valor--verde  { color: var(--s3-papel); }
.s3-quem__lamina.s3-valor--azul   { color: #E7DFCF; }

/* ---------------------------------------------- a cascata das lâminas
   `--e` é a entrada de cada lâmina, de 0 a 1, escrita por interacoes.js a
   partir da posição da seção na tela. Vai em `translate`, e não em
   `transform`, porque o hover da lâmina já ocupa o `transform` — na mesma
   propriedade, apontar uma lâmina durante a entrada apagaria a cascata.

   Sem transição de propósito: o valor vem da rolagem, então ele já é o
   valor certo para o instante; transição aqui só atrasaria a lâmina em
   relação ao dedo. */
.s3-quem__leque[data-cascata] .s3-quem__lamina {
  opacity: var(--e, 1);
  translate: 0 calc((1 - var(--e, 1)) * 76px);
  /* a lâmina também CRESCE ao chegar, de 0,94 a 1. Num cartão de 168px de
     altura o deslocamento sozinho era discreto demais para ser notado; a
     escala torna a chegada legível sem precisar do percurso longo dos
     cartões grandes de /sobre/. `scale` é propriedade própria, então não
     disputa com o `transform` do hover nem com o `translate` daqui. */
  scale: calc(.94 + var(--e, 1) * .06);
}
@media (max-width: 900px) {
  .s3-quem__leque[data-cascata] .s3-quem__lamina {
    translate: 0 calc((1 - var(--e, 1)) * 52px);
  }
}
/* quem pede menos movimento recebe as cinco lâminas prontas */
@media (prefers-reduced-motion: reduce) {
  .s3-quem__leque[data-cascata] .s3-quem__lamina { opacity: 1; translate: none; scale: 1; }
}

/* âncora dos valores: o cabeçalho é fixo, o alvo precisa de folga */
.s3-valor { scroll-margin-top: 120px; }

@media (max-width: 900px) {
  .s3-quem__leque { height: 340px; }
  .s3-quem__lamina { left: calc(var(--i) * 12px); right: calc((4 - var(--i)) * 12px);
                     top: calc(var(--i) * 46px); height: 150px; }
  .s3-quem__val { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .s3-quem__lamina, .s3-quem__corpo, .s3-quem__ir svg { transition: none; }
  .s3-quem__lamina:hover { transform: none; }
}


/* Fundo menta da área verde (diagnóstico).

   O QUE ESTAVA ERRADO, medido: a faixa acima é #F2ECE4 (creme quente,
   luminância 0,8447) e o menta era #EDEFE3 (0,8528) — ou seja, o menta era
   até MAIS CLARO que o creme. Diferença de luminância: 0,008. A regra de
   ritmo deste projeto pede 0,055 entre seções vizinhas.
   
   Sem diferença de claridade não há degrau para ler como proposital; com o
   desvio de matiz (quente → frio) sobrando, a emenda lia como sujeira. E a
   borda de 1px mais a sombra interna, que existiam para marcar a costura,
   desenhavam exatamente a linha dura que incomodava.

   A CORREÇÃO NÃO É OUTRA COR CHAPADA, É CHEGAR EM VEZ DE CORTAR. O gradiente
   parte da cor EXATA da faixa de cima e desce até um menta mais fundo
   (#E3E9D6, luminância 0,7946 — degrau de 0,050 em relação ao creme). Não há
   emenda: a cor vira ao longo de 260px, e a seção ganha identidade abaixo
   disso. Por isso a borda e a sombra saem. */
.s3-secao--menta {
  background-color: #E3E9D6;
  background-image: linear-gradient(180deg, #F2ECE4 0, #E3E9D6 260px);
  background-repeat: no-repeat;
}
/* A FAIXA NÃO FECHA COM LINHA QUANDO DESAGUA NO VERDE.
   `.s3-faixa` tem `border-bottom: 1px solid var(--s3-borda)` em todo o site, e
   era ELE — não a diferença de cor — que desenhava o corte: medido, um salto
   de 0,22 de luminância entre duas linhas de pixel vizinhas, contra 0,05 de
   variação da cor ao longo de 260px. O gradiente parte da cor exata da faixa;
   com a borda no meio, a continuidade não aparecia.
   Escopo só no diagnóstico: no resto do site a linha é o que separa a faixa
   da seção seguinte, e continua fazendo falta. */
body[data-secao="diagnostico"] .s3-faixa { border-bottom: none; }


/* ================================================= MANUAL — TIPOGRAFIA
   Fraunces 400 nos títulos (serifa de eixo alto, rastreio levemente
   negativo); Red Hat Display nos títulos de cartão e no logo; Lato no corpo
   (já é o --s3-fonte); IBM Plex Mono em olho, selos, legendas e numerais. */
.s3-titulo-secao, .s3-artigo__titulo, .s3-valor__titulo,
.s3-jornal__destaque-tit, .s3-jornal__tit, .s3-subsecao {
  font-family: var(--s3-fonte-display);
  font-weight: 420;
  letter-spacing: -.02em;
}
.s3-valor__enfase { font-weight: 640; }
.s3-titulo-cartao, .s3-carrossel__tit, .s3-mapa__sede-tit {
  font-family: var(--s3-fonte-grotesca);
  font-weight: 700;
  letter-spacing: 0;
}
.s3-olho, .s3-legenda, .s3-selo, .s3-carrossel__tag, .s3-carrossel__contador,
.s3-numeros__selo, .s3-mapa__balao-cta, .s3-menuserv__rot, .s3-menuserv__etapa,
.s3-agenda__sem, .s3-artigo__meta .s3-legenda, .s3-jornal__meta {
  font-family: var(--s3-fonte-mono);
  letter-spacing: .12em;
}
.s3-olho { font-weight: 600; font-size: 12.5px; letter-spacing: .18em; }
.s3-numchip, .s3-diag-nota__valor, .s3-agenda__num, .s3-valor__chip b,
.s3-carrossel__contador .s3-numchip {
  font-family: var(--s3-fonte-grotesca);
}
/* numerais e réguas documentais em mono, como no manual */
.s3-livro, .s3-livro * { font-family: var(--s3-fonte-mono); }

/* grafismo das três faixas: terracota / linho / sálvia */
.s3-artigo__barras i { background: var(--s3-laranja); }
.s3-artigo__barras i:nth-child(2) { background: var(--s3-texto-tenue); }
.s3-artigo__barras i:nth-child(3) { background: var(--s3-verde); }

/* selos com cara de carimbo: mono, canto reto, contorno fino */
.s3-selo {
  font-family: var(--s3-fonte-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10.5px;
  border-radius: 3px;
}




/* ============================================ constelação: tons do manual
   Cada ladrilho carrega um tom da paleta secundária; ao apontar, a leitura
   ao lado ganha FUNDO nesse tom com filete à esquerda — o destaque de texto
   pedido, usando cores que já eram da marca. */
.s3-const__card[data-tom="terracota"] { --tom: 144, 58, 39; }
.s3-const__card[data-tom="telha"]     { --tom: 166, 67, 43; }
.s3-const__card[data-tom="salvia"]    { --tom: 85, 107, 74; }
.s3-const__card[data-tom="cafe"]      { --tom: 67, 33, 25; }
.s3-const__card[data-tom="linho"]     { --tom: 138, 118, 92; }
.s3-const__card { color: rgb(var(--tom, 144, 58, 39)); }
.s3-const__card:hover, .s3-const__card[data-ativo] {
  border-color: rgb(var(--tom));
  background: rgba(var(--tom), .07);
  box-shadow: 0 10px 22px -12px rgba(var(--tom), .45);
}

/* a leitura, quando lendo: painel no tom, com filete e um respiro */
.s3-const__leitura[data-tom="terracota"] { --tom: 144, 58, 39; }
.s3-const__leitura[data-tom="telha"]     { --tom: 166, 67, 43; }
.s3-const__leitura[data-tom="salvia"]    { --tom: 85, 107, 74; }
.s3-const__leitura[data-tom="cafe"]      { --tom: 67, 33, 25; }
.s3-const__leitura[data-tom="linho"]     { --tom: 138, 118, 92; }
/* cartao no padrao da casa: papel, borda de 1px, raio de cartao e sombra
   discreta — o mesmo vocabulario de .s3-citacao e dos cartoes de servico.
   O TOM aparece no filete da esquerda e no titulo, sem tingir o fundo. */
/* o MESMO cartao de Nossos Servicos: borda uniforme de 1px em terracota a
   14% e sombra propria. Sem filete grosso na esquerda — o tom da
   competencia ja aparece no titulo, e basta. */
.s3-const__leitura {
  /* 2px e 16px: os valores MEDIDOS no cartao de Nossos Servicos.
     O cartão é PERMANENTE: antes o repouso era transparente e a descrição
     ficava solta na página, sem contorno. Apontar um ícone agora ELEVA um
     cartão que já existe, em vez de fazer um aparecer do nada. */
  border-radius: 16px;
  padding: var(--s3-e-6) var(--s3-e-7);
  background: var(--s3-papel);
  /* O MESMO do cartão ATIVO de Nossos serviços: terracota sólida, 2px. Eu
     tinha usado o contorno dos cartões em REPOUSO (.18), que é fraco demais
     aqui — este cartão está sempre em destaque, é a leitura principal da
     seção. */
  border: 2px solid var(--s3-laranja);
  box-shadow: 0 18px 44px -20px rgba(144, 58, 39, .32);
  box-shadow: 0 8px 22px -16px rgba(110, 43, 29, .22);
  transition: background 260ms var(--s3-curva), border-color 260ms var(--s3-curva),
              box-shadow 260ms var(--s3-curva);
}
.s3-const__leitura[data-lendo] {
  background: var(--s3-papel);
  border-color: rgba(144, 58, 39, .45);
  box-shadow: 0 14px 34px -14px rgba(110, 43, 29, .28);
}
.s3-const__leitura[data-lendo] .s3-const__nome {
  color: rgb(var(--tom, 144, 58, 39));
}
@media (prefers-reduced-motion: reduce) { .s3-const__leitura { transition: none; } }


/* ------------------------------ cartão das dores: simétrico e emoldurado
   O topo tinha menos ar que o pé (a fileira aspa+tema colava no alto) e a
   borda era quase invisível. Agora o respiro é igual em cima e embaixo, e
   a moldura usa a mesma família dos cartões de Nossos Serviços. */
.s3-esteira__cartao {
  justify-content: flex-start;
  gap: var(--s3-e-6);
  /* a borda e a sombra vêm do `.s3-citacao`, que agora é terracota: um filete
     a 18% de terracota sobre terracota não desenharia nada */
}
.s3-esteira__cartao .s3-texto { margin: 0; }
.s3-esteira__cartao:hover {
  border-color: rgba(144, 58, 39, .45);
  box-shadow: 0 16px 34px -20px rgba(110, 43, 29, .3);
}

/* o título agora é a pergunta: sem o olho, o bloco começa por ele */
.s3-doresfluxo__cabeca--grande .s3-titulo-secao { margin: 0; }
.s3-doresfluxo__cabeca--grande .s3-texto { margin-top: var(--s3-e-5); }


/* mapa inline no cartão de valor: painel claro, mapa contido sem corte */
.s3-valor__mapa {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 18px;
  background: var(--s3-papel); border-radius: 12px;
}
.s3-valor__mapa svg { display: block; width: 100%; height: auto; max-height: 300px; }





/* seta limpa também nos controles do carrossel */
.s3-carrossel__nav > button svg path[opacity],
.s3-carrossel__controles > button svg path[opacity] { display: none; }


/* cartão "em breve" do Jornal: preenche a última célula da grade e diz o
   que vem — buraco cinza não comunica nada */
.s3-jornal__breve {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--s3-tela-quente);
  text-align: center;
}
.s3-jornal__breve-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 0 auto 4px; border-radius: 12px;
  background: var(--s3-acento-clara); color: var(--s3-acento-texto);
}
.s3-jornal__breve-tit {
  font-family: var(--s3-fonte-display);
  font-size: 18px; font-weight: var(--s3-peso-negro); line-height: 1.25; margin: 0;
}
.s3-jornal__breve .s3-apoio { margin: 0; max-width: 30ch; margin-inline: auto; }

/* inscrição no boletim, dentro da última célula da grade */
/* mesma marcação dos outros formulários (.s3-campo + <label>); só o
   compacto muda, porque isto vive dentro de uma célula da grade */
.s3-boletim { text-align: left; margin-top: 8px; }
.s3-boletim .s3-campo { margin-bottom: var(--s3-e-5); }
.s3-boletim .s3-campo > label { font-size: 13px; margin-bottom: 5px; }
.s3-boletim .s3-entrada { min-height: 40px; font-size: 14.5px; padding: 0 11px; }
.s3-boletim .s3-btn { margin-top: 4px; min-height: 42px; font-size: 13.5px; }
.s3-boletim__aviso { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; text-align: center; }
.s3-boletim__aviso[data-erro] { color: var(--s3-erro); }
.s3-boletim__aviso[data-ok] { color: var(--s3-verde-texto); }


/* balancete ao vivo dentro do cartão de valor.

   AQUI NÃO HÁ ESCALA. Quem escala é o balancete.js, e ele é o único dos dois
   que sabe consertar o efeito colateral: `transform` não muda o espaço que o
   elemento ocupa no fluxo, então depois de escalar é preciso DEVOLVER a
   altura reduzida ao hospedeiro (`alvo.style.height`).

   Havia aqui um `transform: scale(.62)` com `width: 161.3%`, e ele fazia dois
   estragos, os dois medidos em /sobre/:

     · encolhia o `.s3-livro` inteiro sem compensar altura, então a caixa
       continuava reservando 527px enquanto o desenho ocupava 527 × 0,62 =
       327px — 184px de vão vazio embaixo da tabela, 34% da caixa;
     · o `width: 161.3%` inflava o hospedeiro, então o JS media uma largura
       disponível que não existia e concluía que quase não precisava escalar
       (0,971). A escala real era 0,62 × 0,971 = 0,602, produto de duas contas
       que não se conheciam.

   Sem ela, o JS mede a largura de verdade (~480px contra os 620px naturais da
   folha) e resolve em 0,77 — maior que os 0,602 de antes, então a tabela
   ainda ganha legibilidade. */
.s3-valor__livro {
  display: block; width: 100%; overflow: hidden;
  background: var(--s3-papel); border-radius: 12px;
  padding: 10px;
}
/* o balancete dentro do cartão é ilustração, não instrumento: não captura o
   cursor. Nada a ver com escala. */
.s3-valor__livro .s3-livro { pointer-events: none; }


/* ------------------------------------------------- seção do Jornal (home)
   Creme TINGIDO DE TELHA — a cor da área do Jornal. O creme puro ficava a
   delta 0,065 do "Próximo passo"; este dá 0,132, e 0,265 do Instagram. */
.s3-secao--jornal {
  background-color: #E6D3C8;
  border-top: 1px solid rgba(67, 33, 25, .07);
  box-shadow: inset 0 8px 16px -14px rgba(67, 33, 25, .28);
}
/* telha normal mede 4,20:1 neste fundo — o acento escurece para passar */
.s3-secao--jornal { --s3-acento-texto: #8F3A25; }

/* ====================================== SELO 3D DO JORNAL (COM SOBRESSALTO)
   Mesma peça do botão "Siga-nos" do cabeçalho (.s3-cabecalho__rede), em
   escala maior: mesmo gradiente de 150°, mesma pilha de sombras, mesmo
   brilho de topo, mesmo raio relativo (9/32 ≈ .28 do lado). A profundidade
   vem de sombras internas — não de um bloco extrudado, que era o que
   deixava o selo de outra família visual.

   O SOBRESSALTO dispara ao apontar o CARTÃO inteiro (data-selo-palco) — a
   52px o ícone sozinho seria alvo pequeno — e também no foco por teclado.
   Movimento vertical e reto: nada de rotação ou wobble. */
.s3-selo3d {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: var(--selo, 56px); height: var(--selo, 56px);
  border-radius: calc(var(--selo, 56px) * .28);
  color: #F2ECE4;
  background-image: linear-gradient(150deg, #B4543C 0%, #903A27 52%, #6E2B1D 100%);
  box-shadow:
    0 7px 17px -5px rgba(110, 43, 29, .45),
    0 2px 3px rgba(63, 21, 12, .3),
    inset 0 2px 0 rgba(251, 248, 243, .34),
    inset 0 -3px 10px -3px rgba(63, 21, 12, .5);
  transition: transform 420ms var(--s3-curva-expressiva),
              box-shadow 420ms var(--s3-curva-expressiva);
}
/* crista de luz no topo — o mesmo ::before do botão, proporcional */
.s3-selo3d::before {
  content: ''; position: absolute;
  inset: 2px 2px auto 2px; height: 46%;
  border-radius: calc(var(--selo, 56px) * .25) calc(var(--selo, 56px) * .25) 40% 40%;
  background: linear-gradient(180deg, rgba(242, 236, 228, .26), transparent);
  pointer-events: none;
}
.s3-selo3d > svg {
  position: relative;
  filter: drop-shadow(0 2px 2px rgba(63, 21, 12, .55));
}
/* a lâmina de luz espera fora do quadro e atravessa a face no salto */
.s3-selo3d__luz {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.s3-selo3d__luz::after {
  content: ''; position: absolute; top: -30%; bottom: -30%;
  left: -40%; width: 34%;
  background: linear-gradient(90deg,
    transparent, rgba(255, 246, 236, .5) 42%, rgba(255, 246, 236, .5) 58%, transparent);
  transform: translateX(-120%) rotate(18deg);
  opacity: 0;
}

/* ---------------------------------------------------------- sobressalto */
[data-selo-palco]:hover .s3-selo3d,
[data-selo-palco]:focus-within .s3-selo3d,
.s3-selo3d:hover {
  transform: translateY(-6px) scale(1.07);
  box-shadow:
    0 18px 28px -10px rgba(110, 43, 29, .5),
    0 3px 6px rgba(63, 21, 12, .32),
    inset 0 2px 0 rgba(251, 248, 243, .42),
    inset 0 -3px 10px -3px rgba(63, 21, 12, .5);
}
[data-selo-palco]:hover .s3-selo3d__luz::after,
[data-selo-palco]:focus-within .s3-selo3d__luz::after,
.s3-selo3d:hover .s3-selo3d__luz::after {
  animation: s3-selo-varrer 760ms cubic-bezier(.3, 0, .2, 1) 60ms;
}
@keyframes s3-selo-varrer {
  0%   { transform: translateX(-120%) rotate(18deg); opacity: 0; }
  16%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { transform: translateX(420%)  rotate(18deg); opacity: 0; }
}

/* ================================================== MEDALHÃO DE ORGANIZAÇÃO
   Primo do `.s3-selo3d`: mesmo gradiente terracota, mesma crista de luz no
   alto, mesma sombra interna no pé. A diferença é que aqui o relevo é um ARO
   em volta de uma foto, e não um disco cheio com um ícone dentro.

   Mora aqui, e não em oscs.css, porque é usado em mais de uma página — e
   oscs.css só é carregado em /projetos/.

   TAMANHO: só `--d`. O metal do aro e o encaixe do vidro saem dele em
   porcentagem, não em px fixo: 6px em 124 de diâmetro são 4,8% de metal, e os
   mesmos 6px em 76 seriam 7,9% — a peça engordaria ao encolher, e deixaria de
   ser a mesma peça em outro tamanho.

   REAÇÃO: `[data-med-gatilho]` no ancestral que é o alvo do ponteiro. O
   gatilho fica no HTML porque é lá que se sabe o que é clicável; antes as
   reações estavam presas a `.s3-oscbotao`, e a peça só ganhava vida dentro
   da grade de /projetos/. */
.s3-oscmed__palco {
  perspective: 620px;
  display: grid; place-items: center;
  padding: 6px;
}
.s3-oscmed {
  --d: 124px;
  --aro: 4.8%;          /* metal do aro, proporcional ao diâmetro */
  --rx: 0deg; --ry: 0deg;
  --mx: 50%; --my: 30%;
  position: relative;
  width: var(--d); height: var(--d);
  border-radius: var(--s3-raio-circulo);
  padding: var(--aro);
  background: linear-gradient(163deg, #C4664C 0%, #A6432B 34%, #903A27 62%, #6B2A1C 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 236, 226, .74),
    inset 0 -9px 15px -9px rgba(52, 22, 15, .9),
    0 16px 30px -14px rgba(67, 33, 25, .5),
    0 4px 10px -5px rgba(67, 33, 25, .34);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 460ms var(--s3-curva-saida),
              translate 460ms var(--s3-curva-saida),
              box-shadow 460ms var(--s3-curva-saida);
}
[data-med-gatilho]:hover .s3-oscmed,
[data-med-gatilho]:focus-visible .s3-oscmed {
  translate: 0 -7px;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 240, 232, .86),
    inset 0 -9px 15px -9px rgba(52, 22, 15, .9),
    0 30px 52px -18px rgba(107, 42, 28, .58),
    0 8px 16px -8px rgba(67, 33, 25, .4);
}

/* halo: brilho difuso que floresce por baixo do medalhão ao apontar */
.s3-oscmed__halo {
  position: absolute; inset: -18%;
  border-radius: var(--s3-raio-circulo);
  background: radial-gradient(circle at 50% 52%, rgba(166, 67, 43, .5), rgba(166, 67, 43, 0) 66%);
  filter: blur(12px);
  opacity: 0; scale: .82;
  transition: opacity 420ms ease, scale 520ms var(--s3-curva-saida);
  pointer-events: none;
  z-index: -1;
}
[data-med-gatilho]:hover .s3-oscmed__halo,
[data-med-gatilho]:focus-visible .s3-oscmed__halo { opacity: 1; scale: 1.06; }

.s3-oscmed__foto {
  display: block;
  width: 100%; height: 100%;
  border-radius: var(--s3-raio-circulo);
  object-fit: cover;
  background: #fff;
  transition: scale 620ms var(--s3-curva-saida);
}
/* logo que não é quadrado: contido, com folga, para não decapitar o desenho.
   São dois: o brasão dos Conferentes (159×117) e o escudo do Hulk Fights
   (961×1136). Sem isto, o corte redondo cortava a cabeça dos dois. */
.s3-oscmed__foto[data-ajuste="conter"] {
  object-fit: contain;
  padding: 13%;
  background: #fff;
}
[data-med-gatilho]:hover .s3-oscmed__foto { scale: 1.045; }

/* O VIDRO. Existe porque `box-shadow: inset` numa <img> fica ATRÁS do
   conteúdo dela — a sombra interna que assenta a foto dentro do aro precisa
   de um elemento por cima. É ele também que carrega o reflexo que segue o
   cursor (--mx/--my, escritos por oscs.js). O `inset` acompanha o aro: se
   ficasse em px, o vidro descolaria do metal em outro tamanho. */
.s3-oscmed__vidro {
  position: absolute; inset: var(--aro);
  border-radius: var(--s3-raio-circulo);
  pointer-events: none;
  box-shadow:
    inset 0 3px 9px -3px rgba(52, 22, 15, .5),
    inset 0 -2px 5px -2px rgba(255, 255, 255, .5);
  background:
    radial-gradient(52% 44% at var(--mx) var(--my), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 62%),
    linear-gradient(200deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 42%);
  opacity: .72;
  transition: opacity 380ms ease;
}
[data-med-gatilho]:hover .s3-oscmed__vidro { opacity: .95; }

/* a crista de luz no alto do aro, do .s3-selo3d */
.s3-oscmed__luz {
  position: absolute; left: 12%; right: 12%; top: 2px; height: 34%;
  border-radius: var(--s3-raio-circulo);
  background: linear-gradient(180deg, rgba(255, 244, 238, .58), rgba(255, 244, 238, 0));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .s3-oscmed, .s3-oscmed__foto, .s3-oscmed__halo {
    transition: none; transform: none; translate: none; scale: none;
  }
}
/* a descida é mais lenta que a subida: peso, não elástico de desenho */
.s3-selo3d { transition-duration: 560ms; }
[data-selo-palco]:hover .s3-selo3d,
[data-selo-palco]:focus-within .s3-selo3d,
.s3-selo3d:hover { transition-duration: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .s3-selo3d { transition: none; }
  [data-selo-palco]:hover .s3-selo3d,
  [data-selo-palco]:focus-within .s3-selo3d,
  .s3-selo3d:hover { transform: none; }
  [data-selo-palco]:hover .s3-selo3d__luz::after,
  [data-selo-palco]:focus-within .s3-selo3d__luz::after,
  .s3-selo3d:hover .s3-selo3d__luz::after { animation: none; }
}

/* faixa de inscrição no fim da seção */
.s3-assina {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3vw, 48px); align-items: center;
  margin-top: var(--s3-e-9);
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 36px);
  background: var(--s3-papel);
  border: 1px solid rgba(166, 67, 43, .2);
  border-radius: 18px;
  box-shadow: 0 12px 30px -20px rgba(67, 33, 25, .3);
}
@media (max-width: 900px) { .s3-assina { grid-template-columns: minmax(0, 1fr); } }
.s3-assina__txt { display: flex; align-items: flex-start; gap: 16px; }
.s3-assina__tit {
  font-family: var(--s3-fonte-display);
  font-size: clamp(19px, 2.1vw, 24px); font-weight: 420; line-height: 1.2;
  margin: 0 0 6px;
}
.s3-assina__txt .s3-apoio { margin: 0; max-width: 34ch; }
.s3-assina__form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  align-items: end;
}
@media (max-width: 640px) { .s3-assina__form { grid-template-columns: minmax(0, 1fr); } }
.s3-assina__form .s3-campo { margin-bottom: 0; }
.s3-assina__form .s3-campo > label { font-size: 12.5px; margin-bottom: 4px; }
.s3-assina__form .s3-entrada { min-height: 42px; font-size: 14px; }
.s3-assina__form .s3-btn { grid-column: 1 / -1; min-height: 44px; }
.s3-assina__form .s3-boletim__aviso { grid-column: 1 / -1; margin: 0; }


/* ------------------------------------------------------------- carimbo
   "Zero surpresa" no padrão de carimbo do manual: relevo, brilho no topo e
   um tique de conferência que bate ao apontar — leve giro, como carimbo
   encostando no papel. */
.s3-carimbo {
  position: relative; display: inline-flex; align-items: center; gap: 0;
  padding: 9px 18px; border-radius: 4px; cursor: default;
  font-family: var(--s3-fonte-mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: #F2ECE4;
  background-image: linear-gradient(150deg, #B4543C 0%, #903A27 52%, #6E2B1D 100%);
  box-shadow: 0 2px 6px -2px rgba(110, 43, 29, .5),
              inset 0 1px 0 rgba(242, 236, 228, .28);
  transition: transform 260ms var(--s3-curva), box-shadow 260ms var(--s3-curva);
}
.s3-carimbo__tique {
  display: inline-flex; align-items: center; overflow: hidden;
  width: 0; opacity: 0;
  transition: width 300ms var(--s3-curva), opacity 240ms var(--s3-curva),
              margin-left 300ms var(--s3-curva);
}
.s3-carimbo:hover, .s3-carimbo:focus-visible {
  /* sobrio: sobe e a sombra abre. Sem giro, sem escala. */
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(110, 43, 29, .5),
              inset 0 1px 0 rgba(242, 236, 228, .35);
  outline: none;
}
.s3-carimbo:hover .s3-carimbo__tique,
.s3-carimbo:focus-visible .s3-carimbo__tique { width: 16px; opacity: 1; margin-left: 8px; }
@media (prefers-reduced-motion: reduce) {
  .s3-carimbo, .s3-carimbo__tique { transition: none; }
  .s3-carimbo:hover { transform: none; }
}


/* ================================================================ CORTINA
   Abertura do heroi (cortina.js). O bloco abaixo e o FALLBACK so-CSS:
   listras verticais nas cores do manual + facho de luz, desfazendo-se
   sozinho aos 3,6s — sem JavaScript ninguem fica trancado do lado de fora.
   Quando cortina.js assume (data-viva), o fundo sai e o canvas e a seda. */
.s3-cortina {
  position: absolute; inset: 0; z-index: var(--s3-z-elevado);
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(85% 70% at 38% 100%, rgba(240, 231, 215, .38), transparent 62%),
    repeating-linear-gradient(90deg,
      #2A1410 0 22px, #432119 22px 52px, #903A27 52px 86px,
      #6E2B1D 86px 108px, #432119 108px 148px);
  animation: s3-cortina-sair 900ms var(--s3-curva) 3.6s forwards;
}
.s3-cortina[data-viva] { background: none; animation: none; }
@keyframes s3-cortina-sair { to { opacity: 0; visibility: hidden; } }
.s3-cortina__tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* o logo do site centrado, sobre um sombreado que garante leitura em
   qualquer fase do tecido */
.s3-cortina__emblema {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 320ms var(--s3-curva);
}
.s3-cortina__emblema::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(620px, 90%); height: min(300px, 72%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(36, 16, 12, .5), transparent 74%);
}
/* o lockup do cabeçalho, maior e com sombra própria para descolar do pano */
.s3-cortina__logo {
  position: relative;
  gap: var(--s3-e-6);
  filter: drop-shadow(0 6px 20px rgba(36, 16, 12, .5));
}
.s3-cortina__logo .s3-logo__sub { font-size: 12px; margin-top: 8px; }
@media (max-width: 560px) {
  .s3-cortina__logo .s3-logo__nome { font-size: 30px !important; }
  .s3-cortina__logo .s3-logo__simbolo { width: 46px; height: 46px; }
  .s3-cortina__logo .s3-logo__sub { font-size: 10px; letter-spacing: .3em; }
}
.s3-cortina[data-abrindo] .s3-cortina__emblema { opacity: 0; }

/* sem movimento: a cortina nem entra em cena */
@media (prefers-reduced-motion: reduce) { .s3-cortina { display: none; } }


/* ================================================ CABEÇALHO EM DUAS LINHAS
   Padrão LegX: em cima logo + sede + e-mail + ações; embaixo a navegação
   com o "Siga-nos". Ao rolar, a linha de cima recolhe (histerese no
   layout.js) e o cabeçalho de ~125px vira só a faixa de navegação. */
.s3-cabecalho__topo {
  max-height: 76px; overflow: hidden;
  visibility: visible;
  transition: max-height 260ms var(--s3-curva), opacity 200ms var(--s3-curva),
              visibility 0s;
}
/* visibility:hidden é obrigatório, não enfeite: max-height:0 e opacity:0
   escondem aos olhos mas NÃO tiram os links da ordem de tabulação nem da
   árvore de acessibilidade — quem navega por teclado atravessaria quatro
   paradas invisíveis, sem indicador de foco, e poderia ativar um link que
   não vê. O delay de 260ms deixa a animação de recolhimento terminar
   antes de sumir de vez. */
.s3-cabecalho[data-compacto="true"] .s3-cabecalho__topo {
  max-height: 0; opacity: 0; visibility: hidden;
  transition: max-height 260ms var(--s3-curva), opacity 200ms var(--s3-curva),
              visibility 0s linear 260ms;
}
.s3-cabecalho__topo-linha {
  display: flex; align-items: center; gap: var(--s3-e-6);
  height: 76px;
}
.s3-cabecalho__dados {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
  margin-left: auto;
}
/* dois margin-left:auto distribuem: logo | dados ao centro-direita | acoes
   na ponta — e quando os dados somem (<=1080px) as acoes seguem na direita */
.s3-cabecalho__topo-linha .s3-cabecalho__acoes { margin-left: auto; }
.s3-cabecalho__dados + .s3-cabecalho__acoes { margin-left: var(--s3-e-6); }
@media (max-width: 1080px) {
  .s3-cabecalho__dados + .s3-cabecalho__acoes { margin-left: auto; }
}
.s3-dado {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--s3-texto);
}
/* PEÇA EM RELEVO: mesma linguagem do monograma da marca — gradiente
   terracota de três paradas, brilho na metade de cima, sombra projetada na
   própria cor (cinza sobre papel quente suja) e o ícone em papel com sombra
   dentro da peça. */
.s3-dado__icone {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  color: #F2ECE4;
  background-image: linear-gradient(150deg, #B4543C 0%, #903A27 52%, #6E2B1D 100%);
  box-shadow:
    0 4px 10px -3px rgba(110, 43, 29, .45),
    0 1px 2px rgba(63, 21, 12, .3),
    inset 0 1px 0 rgba(251, 248, 243, .34),
    inset 0 -2px 6px -2px rgba(63, 21, 12, .5);
  transition: transform 260ms var(--s3-curva), box-shadow 260ms var(--s3-curva);
}
/* a faixa de brilho: é ela que faz a peça parecer abaulada */
.s3-dado__icone::before {
  content: ''; position: absolute;
  inset: 1px 1px auto 1px; height: 46%;
  border-radius: 10px 10px 40% 40%;
  background: linear-gradient(180deg, rgba(242, 236, 228, .26), transparent);
  pointer-events: none;
}
.s3-dado__icone { position: relative; }
.s3-dado__icone svg {
  position: relative;
  filter: drop-shadow(0 1.5px 1.5px rgba(63, 21, 12, .55));
}
/* SOBRESSALTO no hover — o mesmo gesto do logo do cabeçalho */
.s3-dado:hover .s3-dado__icone,
.s3-dado:focus-visible .s3-dado__icone {
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 12px 20px -8px rgba(110, 43, 29, .5),
    0 2px 4px rgba(63, 21, 12, .32),
    inset 0 1px 0 rgba(251, 248, 243, .4),
    inset 0 -2px 6px -2px rgba(63, 21, 12, .5);
}
.s3-dado__rot {
  display: block;
  font-size: var(--s3-t-legenda); text-transform: uppercase;
  letter-spacing: .08em; color: var(--s3-texto-fraco);
}
.s3-dado__info {
  display: block; font-size: 13.5px; line-height: 1.3;
  font-weight: var(--s3-peso-forte);
  transition: color var(--s3-tempo) var(--s3-curva);
}
.s3-dado:hover .s3-dado__info { color: var(--s3-laranja); }

.s3-cabecalho__faixa { border-top: 1px solid var(--s3-borda); }
.s3-cabecalho__nav { width: 100%; }
.s3-cabecalho__nav > .s3-nav-link { padding: 13px var(--s3-e-5); }
.s3-cabecalho__faixa .s3-menu__gatilho { padding-block: 13px; }
.s3-cabecalho__siga {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
}
.s3-cabecalho__siga-rot {
  font-size: var(--s3-t-legenda); letter-spacing: .12em;
  text-transform: uppercase; color: var(--s3-texto-fraco);
}
/* o Instagram é a mesma peça, em tamanho menor */
.s3-cabecalho__rede {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  color: #F2ECE4;
  background-image: linear-gradient(150deg, #B4543C 0%, #903A27 52%, #6E2B1D 100%);
  box-shadow:
    0 4px 10px -3px rgba(110, 43, 29, .45),
    0 1px 2px rgba(63, 21, 12, .3),
    inset 0 1px 0 rgba(251, 248, 243, .34),
    inset 0 -2px 6px -2px rgba(63, 21, 12, .5);
  transition: transform 260ms var(--s3-curva), box-shadow 260ms var(--s3-curva);
}
.s3-cabecalho__rede::before {
  content: ''; position: absolute;
  inset: 1px 1px auto 1px; height: 46%;
  border-radius: 8px 8px 40% 40%;
  background: linear-gradient(180deg, rgba(242, 236, 228, .26), transparent);
  pointer-events: none;
}
.s3-cabecalho__rede svg {
  position: relative;
  filter: drop-shadow(0 1.5px 1.5px rgba(63, 21, 12, .55));
}
.s3-cabecalho__rede:hover, .s3-cabecalho__rede:focus-visible {
  transform: translateY(-3px) scale(1.08);
  box-shadow:
    0 12px 20px -8px rgba(110, 43, 29, .5),
    0 2px 4px rgba(63, 21, 12, .32),
    inset 0 1px 0 rgba(251, 248, 243, .4),
    inset 0 -2px 6px -2px rgba(63, 21, 12, .5);
}

/* contato no pé da gaveta (celular) */
.s3-gaveta__contato {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--s3-borda);
  display: flex; flex-direction: column; gap: 4px;
}
.s3-gaveta__dado {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 0; text-decoration: none;
  color: var(--s3-texto); font-size: var(--s3-t-apoio); line-height: 1.4;
}
.s3-gaveta__dado svg { color: var(--s3-laranja); flex: 0 0 auto; margin-top: 2px; }
.s3-gaveta__dado:hover { color: var(--s3-laranja); }

/* a sede é a primeira a ceder — o WhatsApp é canal de conversão e fica */
@media (max-width: 1140px) { .s3-dado--sede { display: none; } }
@media (max-width: 1080px) { .s3-cabecalho__dados { display: none; } }
@media (max-width: 980px) {
  .s3-cabecalho__faixa { display: none; }
  .s3-cabecalho__topo,
  .s3-cabecalho[data-compacto="true"] .s3-cabecalho__topo {
    max-height: 64px; opacity: 1; visibility: visible;
  }
  .s3-cabecalho__topo-linha { height: 64px; }
  .s3-cabecalho__menu { margin-left: auto; }
}


/* dois campos lado a lado (nome + sobrenome); empilham no celular */
.s3-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3-e-5); }
@media (max-width: 560px) { .s3-dupla { grid-template-columns: 1fr; } }


/* ÂNCORAS sob o cabeçalho sticky de duas linhas (125px no topo, 49px
   recolhido). O valor antigo (96px) foi calibrado para o cabeçalho de
   linha única e deixava o alvo encoberto. */
:root { --s3-folga-ancora: 138px; }
.s3-legal__secao, .s3-valor, [id^="valor-"], [id^="sec-"] {
  scroll-margin-top: var(--s3-folga-ancora);
}
@media (max-width: 980px) { :root { --s3-folga-ancora: 84px; } }


/* na gaveta a mesma peça, para o celular não ficar com a versão chapada */
.s3-gaveta__dado svg {
  box-sizing: content-box;
  padding: 8px; border-radius: 10px;
  color: #F2ECE4;
  background-image: linear-gradient(150deg, #B4543C 0%, #903A27 52%, #6E2B1D 100%);
  box-shadow:
    0 4px 10px -3px rgba(110, 43, 29, .45),
    inset 0 1px 0 rgba(251, 248, 243, .34),
    inset 0 -2px 6px -2px rgba(63, 21, 12, .5);
  transition: transform 260ms var(--s3-curva), box-shadow 260ms var(--s3-curva);
}
.s3-gaveta__dado:hover svg {
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 12px 20px -8px rgba(110, 43, 29, .5),
    inset 0 1px 0 rgba(251, 248, 243, .4),
    inset 0 -2px 6px -2px rgba(63, 21, 12, .5);
}

/* o relevo fica; só o movimento sai */
@media (prefers-reduced-motion: reduce) {
  .s3-dado__icone, .s3-cabecalho__rede, .s3-gaveta__dado svg { transition: none; }
  .s3-dado:hover .s3-dado__icone,
  .s3-cabecalho__rede:hover,
  .s3-gaveta__dado:hover svg { transform: none; }
}


/* =========================================== FILTRO DE ASSUNTOS DAS DORES
   Chips discretos entre o cabeçalho e a esteira. Cada um traz a contagem —
   é a informação que decide se vale clicar. */
.s3-dorfiltro {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s3-e-4);
  margin-bottom: var(--s3-e-8);
}
.s3-dorchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  font-family: var(--s3-fonte); font-size: 13.5px;
  font-weight: var(--s3-peso-medio);
  color: var(--s3-texto);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms var(--s3-curva), border-color 200ms var(--s3-curva),
              color 200ms var(--s3-curva), transform 200ms var(--s3-curva);
}
.s3-dorchip:hover {
  border-color: rgba(144, 58, 39, .4);
  transform: translateY(-1px);
}
.s3-dorchip__n {
  font-family: var(--s3-fonte-mono); font-size: 11px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--s3-tela-areia); color: var(--s3-texto-fraco);
}
/* o assunto escolhido: terracota sólida, como os botões primários */
.s3-dorchip[aria-pressed="true"] {
  background: var(--s3-laranja); border-color: var(--s3-laranja);
  color: #FBF8F3;
}
.s3-dorchip[aria-pressed="true"] .s3-dorchip__n {
  background: rgba(251, 248, 243, .22); color: #FBF8F3;
}
.s3-dorchip:focus-visible { outline: 2px solid var(--s3-laranja); outline-offset: 2px; }

/* o cartão fora do assunto some da esteira por inteiro — display:none, e
   não opacidade: um cartão invisível continuaria ocupando largura e
   deixaria buracos no meio da fita */
.s3-esteira__cartao[data-fora] { display: none; }

.s3-dorfiltro__vazio {
  text-align: center; margin: var(--s3-e-7) 0 0;
  color: var(--s3-texto-fraco); font-style: italic;
}

@media (prefers-reduced-motion: reduce) { .s3-dorchip { transition: none; } }
@media (max-width: 560px) {
  .s3-dorfiltro { gap: 6px; }
  .s3-dorchip { padding: 6px 11px; font-size: 12.5px; }
}


/* --------------------------------- esteira sem laço (filtro com poucos itens)
   Quando o grupo cabe na tela não existe laço a fechar: a cópia é escondida
   pelo dorfiltro.js e o que sobra é centralizado. As setas somem porque não
   há para onde rolar — seta que não move nada é promessa falsa. */
/* a cópia do laço só existe para o scroll voltar sem emenda; sem laço ela é
   repetição visível. `display:none` aqui e não o atributo [hidden]: o grupo
   declara `display:flex`, e display de autor vence o do atributo. */
.s3-esteira[data-sem-laco="true"] .s3-esteira__grupo + .s3-esteira__grupo { display: none; }
.s3-esteira[data-sem-laco="true"] .s3-esteira__fita { justify-content: center; }
.s3-esteira[data-sem-laco="true"] .s3-esteira__setas { display: none; }


/* ------------------------------------------------ cartão com realce
   O MESMO tratamento do cartão das dores, que é o padrão do site: moldura em
   terracota, sombra que desce e realce ao apontar. Existe como modificador de
   `.s3-cartao` (e não como classe nova solta) para o próximo cartão do site
   herdar isto em vez de inventar um quarto jeito de desenhar cartão.
   Os valores são os medidos lá — copiar a olho é como duas peças que deviam
   ser iguais começam a divergir. */
.s3-cartao--realce {
  display: flex; flex-direction: column;
  gap: var(--s3-e-5);
  padding: var(--s3-e-8);
  border: 1px solid rgba(144, 58, 39, .18);
  box-shadow: 0 10px 26px -18px rgba(110, 43, 29, .22);
  transition: border-color var(--s3-tempo) var(--s3-curva),
              box-shadow var(--s3-tempo) var(--s3-curva),
              transform var(--s3-tempo) var(--s3-curva);
}
.s3-cartao--realce:hover {
  border-color: rgba(144, 58, 39, .45);
  box-shadow: 0 16px 34px -20px rgba(110, 43, 29, .3);
  transform: translateY(-3px);
}
.s3-cartao--realce .s3-cartao__tit {
  font-family: var(--s3-fonte-display);
  font-size: clamp(19px, 2vw, 22px); font-weight: 600; line-height: 1.2;
  margin: 0;
}
.s3-cartao--realce .s3-apoio { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .s3-cartao--realce { transition: none; }
  .s3-cartao--realce:hover { transform: none; }
}


/* o balancete escalado (ver balancete.js): o transform não muda o espaço no
   fluxo, então o JS devolve a altura reduzida ao hospedeiro. `overflow:hidden`
   evita que a folha em tamanho natural vaze antes de o primeiro quadro
   aplicar a escala. */
/* display:block porque o hospedeiro no cartão de valor é um <span>, e span
   inline tem clientWidth 0 — a escala saía cedo e não fazia nada, sem erro
   nenhum no console. */
.s3-livro { display: block; overflow: hidden; }
.s3-livro__folha { transform-origin: top left; }


/* ---------------------------------------------- pilha de valores: a saída
   Um sticky solta quando o rodapé do PAI alcança o seu `top + altura`. Com
   `top` crescente, o ÚLTIMO cartão — o que cobre todos — tem a maior soma e
   solta PRIMEIRO, descobrindo a pilha. Medido antes: topos -54/-2/-2/-2/-22,
   o primeiro 52px acima dos demais.

   A folga extra no pai empurra a soltura para depois de a seção sair de cena,
   e o `margin-bottom` decrescente iguala o `top + altura` de todos, para que
   soltem no MESMO ponto. Sair junto lê como a página rolando; sair um a um lê
   como defeito. */
.s3-pilha { padding-bottom: clamp(320px, 46vh, 460px); }
/* A MOLDURA DE 140px É DE DESKTOP. Ela existe para garantir ~70px de respiro
   por lado numa janela larga; numa de 390 ela comia 40% da largura útil e a
   pilha inteira ficava com 210px — o cartão sobrava 158px de conteúdo e o
   balancete dentro dele escalava a 0,22. No celular o respiro já vem do
   `.s3-container`, que dá 20px de cada lado.

   O corte fica em 1000px, acima dos 860px em que `.s3-valor` vira uma coluna:
   trocar as duas coisas no mesmo ponto tornaria difícil saber qual delas
   causou o quê da próxima vez. */
@media (max-width: 999px) {
  .s3-pilha { max-width: min(1020px, 100%); }
}
.s3-pilha > .s3-valor:nth-child(1) { margin-bottom: 72px; }
.s3-pilha > .s3-valor:nth-child(2) { margin-bottom: 54px; }
.s3-pilha > .s3-valor:nth-child(3) { margin-bottom: 36px; }
.s3-pilha > .s3-valor:nth-child(4) { margin-bottom: 18px; }

/* ------------------------------------- cartões de serviço maiores e legíveis
   O carrossel usava corpo de 14px num cartão de 360px: legível de perto,
   apertado na leitura real. Cresce o cartão e a tipografia junto — aumentar só
   a fonte deixaria o texto batendo na borda. */
.s3-carrossel__card {
  /* o `min(88vw, …)` é o que impede o cartão de estourar a tela: sem ele o
     piso de 360px mais o respiro do container dava 380px numa janela de
     360px — medido, transbordo horizontal na home */
  width: min(88vw, clamp(360px, 34vw, 460px));
  padding: var(--s3-e-8) var(--s3-e-8) var(--s3-e-7);
}
.s3-carrossel__card .s3-sol__titulo,
.s3-carrossel__card h3 {
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.2;
}
.s3-carrossel__card .s3-texto,
.s3-carrossel__card p {
  font-size: 16px;
  line-height: 1.55;
}
.s3-carrossel__card li,
.s3-carrossel__card .s3-arg__item { font-size: 15px; line-height: 1.45; }
.s3-carrossel__card .s3-selo,


/* ============================================ constelação: órbita da marca
   Os seis ladrilhos giram em torno do símbolo. A marcação continua sendo três
   fileiras (2-3-2) — é o layout de reserva, usado quando a órbita está
   desligada por preferência de movimento reduzido.

   DUAS CAMADAS DE ROTAÇÃO, e é isso que faz o efeito ser elegante em vez de
   tonto: o conjunto gira e cada ladrilho CONTRA-GIRA na mesma velocidade. O
   que orbita é a posição; o ícone nunca vira de cabeça para baixo. Sem a
   contra-rotação viraria carrossel de parque.

   80s por volta: devagar o bastante para ler como respiração, não como
   movimento disputando atenção com o texto ao lado. */
.s3-const__campo[data-orbita] {
  /* UMA variável governa o campo e o raio: o ladrilho mais externo fica
     sempre dentro da borda, em qualquer largura. Com raio fixo, numa tela de
     360px o campo media 281px e os ladrilhos alcançavam 316px — 21px além da
     tela. A sonda por elemento não pegava, porque cada ladrilho sozinho cabe;
     quem estoura é a soma. */
  /* 70vw e 10px de folga são MEDIDOS, não deduzidos: a conta geométrica dava
     78vw, e a medição a 360px mostrou o campo saindo 17px além da tela — o
     `vw` não bate com a largura útil quando há barra de rolagem, e os
     ladrilhos são absolutos, então saem da caixa sem ninguém reclamar. */
  /* O campo é QUADRADO, então a largura vira altura: a 420px ele passava dos
     ~272px que a grade 2-3-2 ocupava e empurrava a seção. 320px devolve a
     altura ao patamar de antes.
     O raio desconta meio ladrilho MAIS 26px: é o que traz os satélites para
     perto do símbolo — longe demais, o conjunto deixa de ler como órbita e
     vira seis caixas espalhadas. */
  --campo: min(360px, 74vw);
  --lado: 80px;                      /* o ladrilho é quadrado */
  /* PISO no raio: sem ele, em telas estreitas a conta encolhe até os
     ladrilhos ENCOSTAREM no símbolo — medido, folga de -12px a 360px. O piso
     é meio ladrilho de cada lado mais 16px de respiro. */
  --raio: max(calc(var(--lado) + 16px),
              calc(var(--campo) / 2 - var(--lado) / 2 - 26px));
  width: var(--campo);
  height: var(--campo);
  position: relative;
}
.s3-const__campo[data-orbita] .s3-const__linha {
  display: contents;                 /* as fileiras somem; os filhos ficam */
}
.s3-const__campo[data-orbita] .s3-const__card {
  position: absolute;
  top: 50%; left: 50%;
  margin: 0;
  /* transform-origin no CANTO, não no centro do ladrilho: `top/left: 50%`
     coloca o CANTO dele no centro do campo, e é em torno desse ponto que a
     rotação tem de acontecer. Com a origem padrão (o centro do próprio
     ladrilho, 40px adiante) as voltas saíam de um eixo deslocado e os raios
     medidos variavam 50px. */
  transform-origin: 0 0;
  /* Posição na circunferência e contra-rotação, as duas DENTRO do transform.
     A propriedade individual `rotate` não serve aqui: o CSS a aplica ANTES do
     transform, então o ladrilho giraria primeiro e o translate sairia numa
     direção torta — medido, os raios viravam 124 a 173px em vez de 148. */
  transform:
    rotate(var(--a, 0deg))
    translate(var(--raio, 148px))
    rotate(calc(var(--a, 0deg) * -1))
    translate(-50%, -50%);
  animation: s3-orbita-contra 80s linear infinite;
}
/* A marca é o eixo: não translada, mas CONTRA-GIRA. Estar no centro poupa o
   deslocamento, não a rotação — ela é filha do campo que gira, e sem desfazer
   a volta o símbolo aparece tombado. */
/* o centro não é mais um ladrilho com moldura: quem desenha é o selo em
   relevo, o mesmo do botão do Instagram */
.s3-const__card--marca {
  background: none; border: none; box-shadow: none; padding: 0;
}
.s3-const__campo[data-orbita] .s3-const__card--marca {
  transform-origin: 50% 50%;
  animation: s3-orbita-marca 80s linear infinite;
  z-index: 3;
}
@keyframes s3-orbita-marca {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
/* o campo inteiro gira; cada ladrilho desfaz a rotação em si mesmo */
.s3-const__campo[data-orbita] { animation: s3-orbita 80s linear infinite; will-change: transform; }
.s3-const__campo[data-orbita]:hover,
.s3-const__campo[data-orbita]:focus-within { animation-play-state: paused; }
.s3-const__campo[data-orbita]:hover .s3-const__card,
.s3-const__campo[data-orbita]:focus-within .s3-const__card { animation-play-state: paused; }

/* o conjunto gira; cada ladrilho desfaz a volta em si mesmo, na mesma
   duração — o que orbita é a POSIÇÃO, e o ícone nunca fica de cabeça para
   baixo. Um jogo de keyframes serve aos seis porque `--a` entra na conta. */
@keyframes s3-orbita { to { transform: rotate(360deg); } }
@keyframes s3-orbita-contra {
  from {
    transform: rotate(var(--a, 0deg)) translate(var(--raio, 148px))
               rotate(calc(var(--a, 0deg) * -1)) translate(-50%, -50%);
  }
  to {
    transform: rotate(var(--a, 0deg)) translate(var(--raio, 148px))
               rotate(calc(var(--a, 0deg) * -1 - 360deg)) translate(-50%, -50%);
  }
}

.s3-const__campo[data-orbita] .s3-const__card--orb1 { --a: -90deg; }
.s3-const__campo[data-orbita] .s3-const__card--orb2 { --a: -30deg; }
.s3-const__campo[data-orbita] .s3-const__card--orb3 { --a: 150deg; }
.s3-const__campo[data-orbita] .s3-const__card--orb4 { --a: 30deg; }
.s3-const__campo[data-orbita] .s3-const__card--orb5 { --a: 210deg; }
.s3-const__campo[data-orbita] .s3-const__card--orb6 { --a: 90deg; }

@media (max-width: 720px) {
  /* o ladrilho encolhe (regra existente); o raio acompanha sozinho */
  .s3-const__campo[data-orbita] { --lado: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  /* volta à grade 2-3-2: ela nunca deixou de existir */
  .s3-const__campo[data-orbita],
  .s3-const__campo[data-orbita] .s3-const__card { animation: none; }
  .s3-const__campo[data-orbita] { width: fit-content; height: auto; }
  .s3-const__campo[data-orbita] .s3-const__linha { display: flex; }
  .s3-const__campo[data-orbita] .s3-const__card { position: relative; top: auto; left: auto; transform: none; }
}


/* ------------------------------------------ órbita: distribuição e folga
   Seis satélites pedem 360/6 = 60° exatos. Com os vãos desiguais que eu tinha
   (50° e 65°), dois ladrilhos de 80px num raio de 96px não cabiam e
   encavalavam — aritmética, não gosto.

   O piso do raio passa a garantir o VÃO ENTRE VIZINHOS, e não só a folga até
   o logo: numa circunferência de raio r, seis pontos a 60° ficam a r unidades
   um do outro (o lado do hexágono é igual ao raio). Para dois ladrilhos de
   `--lado` não se tocarem, o raio precisa ser maior que `--lado` + respiro. */
.s3-const__campo[data-orbita] {
  /* O piso é `--lado * 1.5`, e o fator vem da forma do ladrilho. A conta do
     hexágono dá a distância entre CENTROS (igual ao raio), que a 102px já era
     maior que os 80px do ladrilho — e mesmo assim eles encavalavam 6px. O
     motivo: o ladrilho é QUADRADO, e no pior ângulo do par a separação útil
     cai para cos(45°) = 0,707 da distância. 102 × 0,707 = 72px, menos que 80.
     Daí 1/0,707 ≈ 1,42; medindo, 1,5 ainda deixava -1px a 390px, então 1,62. */
  --raio: max(calc(var(--lado) * 1.62),
              calc(var(--campo) / 2 - var(--lado) / 2 - 26px));
}


/* o eixo da constelação: o símbolo da marca em relevo, com o mesmo
   sobressalto do selo do Instagram (data-selo-palco no cartão) */
.s3-const__marca { display: block; line-height: 0; }
.s3-const__marca svg {
  filter: drop-shadow(0 6px 16px rgba(110, 43, 29, .34));
  transition: transform 420ms var(--s3-curva-expressiva);
}
[data-selo-palco]:hover .s3-const__marca svg,
[data-selo-palco]:focus-within .s3-const__marca svg { transform: translateY(-4px) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .s3-const__marca svg { transition: none; }
  [data-selo-palco]:hover .s3-const__marca svg { transform: none; }
}


/* ------------------------------------------------- trio sem célula vazia
   Três cartões numa `auto-fit minmax(300px, 1fr)` dentro do container
   estreito não cabiam lado a lado (3×300 + 2×32 = 964px), então a grade
   quebrava em duas colunas e o terceiro ficava sozinho, com um vazio ao
   lado. O mínimo cai para 240px — 3×240 + 2×32 = 784px, que cabe — e, se
   ainda assim não couberem três, o último se estende pelo que sobrar.
   É o mesmo padrão das grades de filete do projeto, pelo mesmo motivo:
   acertar a contagem de colunas caso a caso é frágil, porque ela muda com a
   largura e com o conteúdo. */
.s3-grade--trio {
  /* 190px de mínimo e vão menor: 3×190 + 2×20 = 610px, que cabe nos ~720px do
     container estreito. Com 240px eles não cabiam e a grade quebrava em 2+1. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s3-e-6);
}
.s3-grade--trio .s3-cartao--realce { padding: var(--s3-e-7); }
.s3-grade--trio .s3-cartao__tit { font-size: clamp(17px, 1.7vw, 19px); }
.s3-grade--trio .s3-apoio { font-size: 14px; line-height: 1.5; }
/* SÓ na faixa de duas colunas. `:last-child:nth-child(odd)` casa com o
   terceiro item sempre (3 é ímpar), então sem o recorte ele esticava mesmo
   quando os três cabiam — medido, 245/245/1320. Três cartões cabem a partir
   de 3×240 + 2×32 = 784px; abaixo de 560 a grade vira uma coluna. */
@media (min-width: 481px) and (max-width: 609px) {
  .s3-grade--trio > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .s3-grade--trio { grid-template-columns: 1fr; }
}


/* ==================================== AS DOZE DORES — TRÊS MODOS DE LEITURA
   Os cartões existem UMA vez no HTML; o que muda entre os modos é só o
   arranjo. Isso é o que impede o defeito de "cartão repetido" que existia
   enquanto havia duas cópias para o laço da esteira fechar. */

/* ------------------------------------------------------ seletor de modo */
.s3-doresmodo {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--s3-e-7);
}
.s3-doresmodo__rot {
  font-family: var(--s3-fonte-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--s3-texto-fraco);
  margin-right: 8px;
}
.s3-doresmodo__b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-family: var(--s3-fonte); font-size: 13.5px; font-weight: var(--s3-peso-medio);
  color: var(--s3-texto);
  background: var(--s3-papel);
  border: 1px solid var(--s3-borda);
  transition: background 200ms var(--s3-curva), border-color 200ms var(--s3-curva),
              color 200ms var(--s3-curva);
}
.s3-doresmodo__b:hover { border-color: rgba(144, 58, 39, .4); }
.s3-doresmodo__b[aria-pressed="true"] {
  background: var(--s3-laranja); border-color: var(--s3-laranja); color: #FBF8F3;
}
.s3-doresmodo__b:focus-visible { outline: 2px solid var(--s3-laranja); outline-offset: 2px; }
.s3-doresmodo__b svg { flex: 0 0 auto; }

/* ------------------------------------------------------------- o palco */
.s3-dorespalco { position: relative; }
.s3-dores__nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: var(--s3-e-7);
}
.s3-dores__seta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--s3-borda); background: var(--s3-papel);
  color: var(--s3-laranja); cursor: pointer;
  transition: border-color 200ms var(--s3-curva), background 200ms var(--s3-curva);
}
.s3-dores__seta:hover { border-color: var(--s3-laranja); background: var(--s3-laranja-clara); }
.s3-dores__seta:first-child svg { transform: rotate(180deg); }
.s3-dores__pontos { display: flex; align-items: center; gap: 6px; }
.s3-dores__pontos button {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: var(--s3-borda); cursor: pointer;
  transition: width 240ms var(--s3-curva), background 240ms var(--s3-curva);
}
.s3-dores__pontos button[aria-current="true"] {
  width: 22px; border-radius: 4px; background: var(--s3-laranja);
}
/* cartão fora do filtro some em qualquer modo */
.s3-dores [data-dor][data-fora] { display: none; }

/* ================================================================ FEED
   A GRADE DO PERFIL do Instagram: cartões retangulares, 4 a 5 por fileira,
   descendo até o limite da seção. O resto abre no "Ver todas".

   `auto-fill` desce sozinho de 5 para 4, 3, 2 e 1 conforme a tela aperta —
   sem limiar escrito à mão para manter. */
.s3-dores[data-modo="feed"] .s3-dorespalco {
  display: grid;
  /* 212px trava o TETO em 5 colunas. O número é MEDIDO, não estimado: o
     palco chega a 1320px, onde 5 colunas pedem 1116px (cabe) e 6 pedem
     1342px (não cabe). Com 190px a grade formava 6, e 6×2 cobria os 12
     cartões — o "Ver todas" nunca aparecia justamente no desktop. */
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.s3-dores[data-modo="feed"] .s3-esteira__cartao {
  width: auto; min-height: 168px;
  padding: var(--s3-e-6) var(--s3-e-7);
  gap: var(--s3-e-4);
}
.s3-dores[data-modo="feed"] .s3-esteira__cartao .s3-texto {
  font-size: 15.5px; line-height: 1.45;
}
/* no cartão do feed tudo encolhe junto: marca-d'água, disco e nome */
.s3-dores[data-modo="feed"] .s3-citacao__aspa { right: 11px; bottom: 7px; opacity: .07; }
.s3-dores[data-modo="feed"] .s3-citacao__aspa svg { width: 34px; height: 34px; }
.s3-dores[data-modo="feed"] .s3-dorselo { font-size: 9.5px; padding-right: 10px; }
/* no feed a peça inteira encolhe pela variável: o aro, o assento e a sombra
   saem de `--disco`, então nenhum deles engorda proporcionalmente */
.s3-dores[data-modo="feed"] .s3-dorselo__disco { --disco: 18px; }
.s3-dores[data-modo="feed"] .s3-dorselo__disco svg { width: 11px; height: 11px; }
/* cartão além das duas fileiras: some até a pessoa pedir para ver */
.s3-dores[data-modo="feed"] .s3-esteira__cartao[data-oculto] { display: none; }

/* no feed as setas não servem — a grade mostra tudo de uma vez */
.s3-dores[data-modo="feed"] .s3-dores__nav { display: none; }

/* "Ver todas": só aparece quando existe cartão escondido */
.s3-dores__mais { display: none; justify-content: center; margin-top: var(--s3-e-6); }
.s3-dores[data-modo="feed"] .s3-dores__mais[data-tem] { display: flex; }
.s3-dores__mais button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--s3-fonte); font-size: 13.5px; font-weight: var(--s3-peso-medio);
  color: var(--s3-laranja-texto);
  background: var(--s3-papel);
  border: 1px solid rgba(144, 58, 39, .35);
  transition: background 200ms var(--s3-curva), border-color 200ms var(--s3-curva);
}
.s3-dores__mais button:hover { background: var(--s3-laranja-clara); border-color: var(--s3-laranja); }
.s3-dores__mais button:focus-visible { outline: 2px solid var(--s3-laranja); outline-offset: 2px; }

/* ============================================================= CAMADAS
   Três à vista: a da frente e duas lombadas. Mais que isso vira baralho e a
   leitura da primeira se perde. */
.s3-dores[data-modo="camadas"] .s3-dorespalco {
  display: block;
  /* `width: 100%` NÃO é redundante: com todos os cartões em position:absolute
     o palco fica sem conteúdo no fluxo, e a largura intrínseca colapsa para
     zero. Medido: cartões de 50px com o texto quebrando letra a letra e
     1665px de altura — o que fazia o alvo do arrasto cair fora da janela. */
  width: 100%;
  height: 300px;
  max-width: 560px; margin-inline: auto;
  perspective: 900px;
}
.s3-dores[data-modo="camadas"] .s3-esteira__cartao {
  position: absolute; inset: 0 0 auto 0;
  width: 100%; min-height: 250px;
  transition: transform 420ms var(--s3-curva-expressiva),
              opacity 420ms var(--s3-curva-expressiva);
  will-change: transform;
}
.s3-dores[data-modo="camadas"] .s3-esteira__cartao[data-camada="0"] {
  transform: translateY(0) scale(1);
  cursor: grab;
}
.s3-dores[data-modo="camadas"] .s3-esteira__cartao[data-camada="0"]:active { cursor: grabbing; }
.s3-dores[data-modo="camadas"] .s3-esteira__cartao[data-camada="1"] {
  transform: translateY(16px) scale(.955);
  opacity: .75;
}
.s3-dores[data-modo="camadas"] .s3-esteira__cartao[data-camada="2"] {
  transform: translateY(31px) scale(.91);
  opacity: .45;
}
/* as demais ficam fora de cena, mas NÃO em display:none — sair do fluxo
   causaria salto quando elas voltassem ao topo da pilha */
.s3-dores[data-modo="camadas"] .s3-esteira__cartao[data-camada="fora"] {
  transform: translateY(40px) scale(.88);
  opacity: 0; pointer-events: none;
}
.s3-dores[data-modo="camadas"] .s3-esteira__cartao .s3-texto {
  font-size: clamp(18px, 1.9vw, 21px);
}
/* selo de cartão coberto não clica: as lombadas 1 e 2 continuam recebendo
   ponteiro (só a camada "fora" é desligada), e um selo meio escondido que
   filtrasse seria um alvo que a pessoa não sabe que acertou */
.s3-dores[data-modo="camadas"] .s3-esteira__cartao:not([data-camada="0"]) .s3-dorselo {
  pointer-events: none;
}

/* =========================================================== CARROSSEL
   Como estava, sem o movimento automático: rola por arrasto, roda, teclado
   e pelas setas. */
.s3-dores[data-modo="carrossel"] .s3-dorespalco {
  display: flex; gap: 20px;
  overflow-x: auto; overflow-y: hidden;
  /* o mesmo respiro vertical de antes: overflow-x força overflow-y, e sem
     folga o recorte comia a borda de cima do cartão e a sombra */
  padding: 14px 10px 36px;
  margin: -14px -10px -36px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.s3-dores[data-modo="carrossel"] .s3-dorespalco::-webkit-scrollbar { display: none; }
.s3-dores[data-modo="carrossel"] .s3-esteira__cartao {
  flex: 0 0 auto; scroll-snap-align: start;
}
/* o cursor é a única pista de que dá para puxar; sem ele o gesto existe e
   ninguém descobre */
.s3-dores[data-modo="carrossel"] .s3-dorespalco { cursor: grab; }
.s3-dores[data-modo="carrossel"] .s3-dorespalco[data-arrastando] {
  cursor: grabbing;
  /* durante o arrasto o texto não pode ser selecionado, senão o gesto vira
     seleção e o carrossel não anda */
  user-select: none; -webkit-user-select: none;
  scroll-behavior: auto;   /* o `smooth` das setas atrapalharia o 1:1 */
}
/* o selo continua sendo um botão: mão, não punho */
.s3-dores[data-modo="carrossel"] .s3-dorselo { cursor: pointer; }
.s3-dores[data-modo="carrossel"] .s3-dores__pontos { display: none; }

@media (prefers-reduced-motion: reduce) {
  .s3-dores[data-modo="camadas"] .s3-esteira__cartao { transition: none; }
  .s3-doresmodo__b, .s3-dores__seta, .s3-dores__pontos button { transition: none; }
}

@media (max-width: 640px) {
  .s3-doresmodo__rot { display: none; }
  .s3-doresmodo__b span { display: none; }
  .s3-doresmodo__b { padding: 9px 12px; }
  .s3-dores[data-modo="camadas"] .s3-dorespalco { height: 330px; }
}


/* ------------------------------------------- selo em relevo com NÚMERO
   Mesmo chrome do `.s3-selo3d` (gradiente terracota, crista de luz, sombra
   interna); o que muda é o miolo. */
.s3-selo3d--num { font-family: var(--s3-fonte-mono); }
.s3-selo3d__n {
  position: relative; z-index: 1;
  font-size: calc(var(--selo, 40px) * .34);
  font-weight: 700; letter-spacing: .02em;
  color: #F2ECE4;
  text-shadow: 0 1px 0 rgba(63, 21, 12, .45);
}

/* O CARTÃO `.s3-problema` SAIU. Ele era a seção "O problema" das páginas de
   solução: cartão claro com o ícone do serviço gigante e apagado ao fundo. O
   problema agora mora na barra do topo do traço da marca, que é o pedido —
   "o problema está no risco do topo do ícone da logo". */




/* ============================================== FAIXA DAS OSCs (home)
   Fileira dos dez logos redondos passando devagar, entre "Nossos serviços" e
   "Como trabalhamos". O motor é o esteira.js; aqui está só a caixa.

   O FUNDO É TERRACOTA, herdado da faixa de números que saiu daqui. Contra o
   papel dá 7,07:1 — passa em AA e AAA para texto normal.

   NÃO reusa `.s3-esteira__fita`: o padding daquela (16px em cima, 36px
   embaixo) foi medido para a sombra do cartão das dores, que desce 32px.
   Aqui o objeto é um disco de 84px. */
.s3-faixaosc-secao {
  position: relative; overflow: hidden;
  background-color: var(--s3-laranja);
  color: var(--s3-papel);
  /* MAIS BAIXA: a seção é sobre os logos, não sobre o texto. O respiro caiu
     de clamp(48,7vw,80) para cá, e o olho saiu do cabeçalho — juntos, ~130px
     a menos de altura sem perder nada legível. */
  padding-block: clamp(28px, 3.4vw, 44px);
  /* A LUZ DAS PONTAS. Dois clarões ancorados nas bordas, com raio grande o
     bastante para desvanecer longe de qualquer aresta — e a caixa deles é a
     seção inteira, então não há um retângulo interno para aparecer.

     Ela fica ATRÁS de tudo, e isso é melhor do que uma camada por cima: a luz
     não clareia os discos, clareia o CHÃO perto das pontas. O disco que se
     dissolve passa a se dissolver sobre um chão iluminado — que é o que
     "sumir na luz" quer dizer. */
  background-image:
    radial-gradient(46% 130% at 0% 52%, rgba(228, 162, 136, .3), rgba(228, 162, 136, 0) 68%),
    radial-gradient(46% 130% at 100% 52%, rgba(228, 162, 136, .3), rgba(228, 162, 136, 0) 68%);
}
.s3-faixaosc__cabeca {
  text-align: center; max-width: 44ch; margin: 0 auto var(--s3-e-7);
}
/* título de FAIXA, não de seção: aqui ele é legenda dos logos, e 38px de
   manchete competiam com eles */
.s3-faixaosc__tit {
  margin: 0;
  font-family: var(--s3-fonte-display);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: var(--s3-peso-forte);
  line-height: 1.2;
  color: var(--s3-papel);
  text-wrap: balance;
}

.s3-faixaosc { position: relative; }

/* A LUZ DAS PONTAS MORA NO FUNDO DA SEÇÃO — ver `.s3-faixaosc-secao`. Havia
   aqui um par de elementos-véu, e eles falharam duas vezes pelo mesmo motivo
   de fundo: luz pendurada num elemento COM CAIXA.

   Se o degradê não chega a zero antes da borda, é a BORDA DO ELEMENTO que
   aparece — foi um retângulo mais claro de 168px, com quatro cantos. Se chega
   cedo demais, aparece o RIM da própria elipse. Não havia tamanho certo;
   havia o lugar errado. */

.s3-faixaosc__fita {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  /* respiro para o halo e a sombra do medalhão, devolvido em margem negativa
     para a seção não crescer por causa dele */
  padding-block: 20px 26px;
  margin-block: -20px -26px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  /* A DISSOLUÇÃO É SÓ ISTO, e ela é longa.

     A rampa anterior ia de 4% a 13% — cerca de 120px para atravessar do
     transparente ao opaco. O disco cruzando uma rampa curta encontra a borda
     circular dele com a borda da rampa, e o olho lê uma RETA VERTICAL. Era a
     "reta grotesca" da queixa.

     Agora a rampa vai de 0 a 30% de cada lado, ~400px, com seis paradas por
     lado: seis paradas aproximam uma curva, três desenham quinas. E o
     `alpha` cresce devagar no começo, que é onde a aresta aparecia. */
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .06) 7%, rgba(0, 0, 0, .22) 13%,
    rgba(0, 0, 0, .5) 19%, rgba(0, 0, 0, .8) 25%, #000 30%,
    #000 70%, rgba(0, 0, 0, .8) 75%, rgba(0, 0, 0, .5) 81%,
    rgba(0, 0, 0, .22) 87%, rgba(0, 0, 0, .06) 93%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .06) 7%, rgba(0, 0, 0, .22) 13%,
    rgba(0, 0, 0, .5) 19%, rgba(0, 0, 0, .8) 25%, #000 30%,
    #000 70%, rgba(0, 0, 0, .8) 75%, rgba(0, 0, 0, .5) 81%,
    rgba(0, 0, 0, .22) 87%, rgba(0, 0, 0, .06) 93%, rgba(0, 0, 0, 0) 100%);
  /* arrastar não seleciona nem carrega a imagem junto */
  user-select: none; -webkit-user-select: none;
}
.s3-faixaosc__fita::-webkit-scrollbar { display: none; }
.s3-faixaosc__fita[data-arrastando] { cursor: grabbing; scroll-behavior: auto; }
.s3-faixaosc__fita:focus-visible {
  outline: 2px solid var(--s3-papel); outline-offset: 4px; border-radius: 12px;
}

/* O VÃO É 68px POR ARITMÉTICA, não por gosto. O grupo precisa ser MAIS LARGO
   que a janela, senão a janela abraça o fim de um grupo e o começo do outro e
   o mesmo logo aparece duas vezes:

     grupo  = 10 × 84 (discos) + 9 × 68 (vãos) + 2 × 34 (respiro) = 1.520px
     janela = 1.400 (container) − 2 × 40 (margem) = 1.320px, no máximo

   1.520 > 1.320, com 200px de folga. Aumentei o VÃO e não o disco porque as
   logos vieram em 150×150 e crescer o disco as borraria.

   O respiro de 34px em cada ponta é METADE do vão de propósito: na emenda
   entre os dois grupos ele encontra o respiro do outro e soma 68 — o mesmo
   vão de dentro. Sem isso a costura do laço apareceria como um vão maior. */
.s3-faixaosc__grupo {
  display: flex; align-items: center; gap: 68px;
  list-style: none; margin: 0; padding: 0 34px;
}
.s3-faixaosc__item { flex: 0 0 auto; }
/* 84px: as logos vieram em 150×150 (o avatar do Instagram), então acima disso
   começam a borrar em tela de alta densidade */
.s3-oscmed--faixa { --d: 84px; }
.s3-faixaosc__item .s3-oscmed__palco { padding: 4px; }
/* FIO DE CREME por fora do aro. Sem ele o medalhão encostaria no fundo: o
   gradiente do aro vai de #C4664C a #6B2A1C e a seção é #903A27 — o aro cai
   dentro da própria faixa de tom do fundo. O fio é o que descola a peça. */
.s3-faixaosc__item .s3-oscmed {
  box-shadow:
    0 0 0 1px rgba(251, 248, 243, .3),
    inset 0 1.5px 0 rgba(255, 236, 226, .74),
    inset 0 -9px 15px -9px rgba(52, 22, 15, .9),
    0 16px 30px -14px rgba(52, 22, 15, .55);
}
.s3-faixaosc__item[data-med-gatilho]:hover .s3-oscmed {
  box-shadow:
    0 0 0 1px rgba(251, 248, 243, .62),
    inset 0 1.5px 0 rgba(255, 240, 232, .86),
    inset 0 -9px 15px -9px rgba(52, 22, 15, .9),
    0 26px 44px -16px rgba(40, 16, 10, .6);
}
/* o halo do medalhão é terracota, e sobre terracota não aparece: aqui vira luz */
.s3-faixaosc__item .s3-oscmed__halo {
  background: radial-gradient(circle at 50% 52%, rgba(255, 226, 210, .5), rgba(255, 226, 210, 0) 66%);
}

/* O BOTÃO INVERTE sobre o fundo escuro: papel cheio com texto terracota. O
   `--primario` do site é terracota sobre claro e sumiria aqui. */
/* A MALHA NA ESCALA DA FAIXA. O desvanecimento padrão de `.s3-pontos` é de
   160px no topo e 120px no pé — medidos para seções altas, como o herói. A
   faixa tem ~300px: 160 + 120 deixariam uns 20px de malha visível, ou seja,
   praticamente nenhuma. Aqui a rampa acompanha a altura. */
.s3-faixaosc-secao .s3-pontos {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 44px), transparent 100%);
}

.s3-faixaosc__foto, .s3-faixaosc__item img { -webkit-user-drag: none; }
.s3-faixaosc__acao { text-align: center; margin-top: var(--s3-e-7); }
.s3-faixaosc__btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--s3-papel); color: var(--s3-laranja-texto);
  border: 1px solid transparent;
  box-shadow: 0 14px 26px -14px rgba(40, 16, 10, .7);
}
.s3-faixaosc__btn:hover:not(:disabled) {
  background: #fff; color: var(--s3-laranja-pressionada);
  box-shadow: 0 18px 32px -14px rgba(40, 16, 10, .8);
}
.s3-faixaosc__btn svg { transition: transform 200ms var(--s3-curva); }
.s3-faixaosc__btn:hover svg { transform: translateX(4px); }

@media (max-width: 640px) {
  .s3-oscmed--faixa { --d: 66px; }
  /* 10 × 66 + 9 × 44 + 2 × 22 = 1.100px contra uma janela de no máximo
     640 − 40 = 600px: a folga aqui é enorme, e o vão pode ser menor */
  .s3-faixaosc__grupo { gap: 44px; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .s3-faixaosc__btn svg { transition: none; }
  .s3-faixaosc__btn:hover svg { transform: none; }
}