/* ==========================================================================
   Falleiros Martins — site institucional
   Cores: tokens da marca (02-MARCA/assets/tokens.css). Nada fora desta paleta.
   ========================================================================== */

/* ---- fontes (hospedadas no próprio site — Red Hat Display e Red Hat Text, licença SIL OFL 1.1).
   Sem Google Fonts: nenhum pedido a terceiros ao abrir a página. ---- */
@font-face { font-family: 'Red Hat Display'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fontes/red-hat-display-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Red Hat Display'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fontes/red-hat-display-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fontes/red-hat-text-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fontes/red-hat-text-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --safira-900: #0C1F3A;
  --safira-800: #0F2847;
  --safira-700: #14335C;
  --safira-600: #1C4478;
  --safira-500: #2A5A96;
  --safira-200: #A9BCD4;
  --safira-100: #D6E0EC;
  --safira-50:  #EEF2F7;
  --ouro:        #8F6D3C;
  --ouro-hover:  #7E5F33;
  --ouro-claro:  #C6A15B;
  --ouro-texto:  #7A5C31;
  --tinta:   #1A1A1A;
  --grafite: #3D4756;
  --cinza:   #5A6472;
  --borda:   #DDE3EA;
  --borda-forte: #7A8698;
  --papel:   #F7F6F3;
  --branco:  #FFFFFF;
  --erro:    #B42318;
  --sucesso: #177245;

  --fonte-display: 'Red Hat Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-texto: 'Red Hat Text', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --largura: 1200px;
  --margem: 20px;
  --secao: 64px;
  --raio: 6px;
  --campo: 52px;
  --curva: cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 600px)  { :root { --margem: 32px; --secao: 80px; } }
@media (min-width: 1024px) { :root { --margem: 40px; --secao: 96px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 1024px) { body { font-size: 17px; } }
img, svg, video, iframe { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--safira-600); text-decoration: none; }
a:hover { color: var(--safira-700); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fonte-display); font-weight: 400; line-height: 1.15; color: var(--safira-700); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--safira-500); outline-offset: 3px; border-radius: 4px; }
.fundo-escuro :focus-visible { outline-color: var(--ouro-claro); }
[hidden] { display: none !important; }

.pular { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--safira-700); color: var(--branco); border-radius: var(--raio); font-weight: 600; }
.pular:focus { top: 12px; color: var(--branco); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(var(--largura), 100% - 2 * var(--margem)); margin-inline: auto; }
.secao { padding-block: var(--secao); }
.secao--papel { background: var(--papel); }
.secao--nevoa { background: var(--safira-50); }
.secao--safira { background: var(--safira-700); color: var(--safira-100); }
.secao--safira h2, .secao--safira h3 { color: var(--branco); }
.pilha { display: flex; flex-direction: column; gap: 16px; }

/* ---------- tipografia ---------- */
.rotulo { font-family: var(--fonte-texto); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-texto); }
.fundo-escuro .rotulo, .secao--safira .rotulo { color: var(--safira-200); }
.titulo-1 { font-weight: 300; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.14; }
.titulo-2 { font-size: clamp(27px, 3.2vw, 36px); }
.titulo-3 { font-size: clamp(21px, 2vw, 23px); font-weight: 500; line-height: 1.25; }
.lead { font-size: clamp(16px, 1.4vw, 17px); line-height: 1.65; color: var(--grafite); }
.texto-apoio { font-size: 15px; line-height: 1.6; color: var(--cinza); }
.cabeca-secao { display: grid; gap: 16px 64px; margin-bottom: clamp(28px, 4vw, 44px); align-items: end; }
@media (min-width: 900px) { .cabeca-secao--dupla { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); } }

/* ---------- ícones e setas ---------- */
.icone { width: 24px; height: 24px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.seta { width: 18px; height: 18px; flex-shrink: 0; transition: transform .26s var(--curva); }
.link-seta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; color: var(--safira-700); }
.link-seta:hover .seta, .botao:hover .seta, .cartao:hover .seta, .porta:hover .seta { transform: translateX(4px); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--fonte-texto); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.2; text-align: center; white-space: nowrap;
  transition: background-color .2s linear, border-color .2s linear, color .2s linear;
}
.botao .seta { width: 16px; height: 16px; margin-right: -2px; }
.botao { max-width: 100%; }
.botao .seta, .botao .icone { flex: none; }
/* Celular: se o texto não cabe numa linha, o botão quebra em duas linhas
   equilibradas — nunca estoura a tela. */
@media (max-width: 599px) { .botao { white-space: normal; text-wrap: balance; padding-block: 12px; } }
.botao--ouro { background: var(--ouro); color: var(--branco); }
.botao--ouro:hover { background: var(--ouro-hover); color: var(--branco); }
.botao--safira { background: var(--safira-700); color: var(--branco); }
.botao--safira:hover { background: var(--safira-600); color: var(--branco); }
.botao--contorno { border-color: var(--safira-700); color: var(--safira-700); background: transparent; }
.botao--contorno:hover { background: var(--safira-700); color: var(--branco); }
.botao--claro { border-color: rgba(255,255,255,.7); color: var(--branco); background: transparent; }
.botao--claro:hover { background: var(--branco); color: var(--safira-700); }
.botao--compacto { min-height: 44px; padding: 0 20px; font-size: 12px; }
.botao--whatsapp .icone { width: 20px; height: 20px; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
@media (max-width: 599px) {
  .acoes--bloco { width: 100%; flex-direction: column; align-items: stretch; }
  .acoes--bloco .botao { width: 100%; padding-inline: 18px; white-space: normal; text-wrap: balance; }
}

/* ---------- faixa superior e cabeçalho ---------- */
.faixa-topo { display: none; background: var(--safira-800); color: var(--safira-100); font-size: 13px; }
@media (min-width: 1024px) { .faixa-topo { display: block; } }
.faixa-topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; }
.faixa-topo__acoes { display: flex; align-items: center; gap: 4px; }
.faixa-topo__acoes > * + *::before { content: ''; width: 1px; height: 14px; margin-right: 12px; background: var(--safira-500); }
.faixa-topo a, .faixa-topo button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; background: none; border: 0; color: var(--branco); font-size: 13px; font-weight: 600; }
.faixa-topo .icone { width: 18px; height: 18px; }
.faixa-topo a, .faixa-topo button { white-space: nowrap; }
.faixa-topo__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Entre 1024 e 1279 px a frase não cabe ao lado dos atalhos: fica só o que é ação. */
@media (max-width: 1279px) { .faixa-topo__texto { display: none; } .faixa-topo__linha { justify-content: flex-end; } }

.cabecalho { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--borda); }
@supports (backdrop-filter: blur(8px)) { .cabecalho { background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); } }
.cabecalho__linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
@media (min-width: 1024px) { .cabecalho__linha { min-height: 88px; } }

/* O descritor começa exatamente onde começa o F: o arquivo é o lockup corrido
   oficial, sem respiro lateral, então a borda esquerda da imagem é o F. */
.marca { display: inline-flex; flex-direction: column; gap: 7px; color: inherit; }
.marca img { width: 196px; height: auto; }
.marca__descritor { font-family: var(--fonte-texto); font-size: var(--descritor, 8.74px); font-weight: 600; letter-spacing: .2em; line-height: 1; color: var(--cinza); white-space: nowrap; margin-left: -.03em; }
@media (min-width: 1024px) { .marca { gap: 8px; } .marca img { width: 232px; } .marca__descritor { font-size: var(--descritor-g, 9.76px); } }

/* Entrada do logotipo: uma vez por visita, e de novo quando a pessoa clica no logo
   para voltar ao início. O desenho não muda — só é revelado da esquerda para a
   direita, e o descritor assenta o espaçamento. */
html.marca-entra .cabecalho .marca img { animation: marca-revela 1.1s var(--curva) .15s both; }
html.marca-entra .cabecalho .marca__descritor { animation: marca-descritor 1s var(--curva) .6s both; }
@keyframes marca-revela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes marca-descritor { from { opacity: 0; letter-spacing: .38em; } to { opacity: 1; letter-spacing: .2em; } }
.cabecalho .marca { transition: opacity .2s linear; }
.cabecalho .marca:hover { opacity: .82; }
.marca--clara .marca__descritor { color: var(--safira-100); }

.navegacao { display: none; }
@media (min-width: 1280px) {
  .navegacao { display: flex; align-items: center; gap: clamp(18px, 1.8vw, 28px); font-size: 15px; font-weight: 500; }
  .navegacao a { position: relative; padding: 32px 0 30px; color: var(--tinta); }
  .navegacao a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--safira-700); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--curva); }
  .navegacao a:hover::after, .navegacao a[aria-current="page"]::after { transform: scaleX(1); }
  .navegacao a[aria-current="page"] { color: var(--safira-700); font-weight: 700; }
}
.cabecalho__cta { display: none; }
@media (min-width: 760px) { .cabecalho__cta { display: inline-flex; } }
.cabecalho__direita { display: flex; align-items: center; gap: 10px; }
.botao-menu { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 48px; min-height: 48px; padding: 0 12px; margin-right: -12px; background: none; border: 0; border-radius: var(--raio); color: var(--safira-700); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.botao-menu__barras { position: relative; width: 22px; height: 14px; }
.botao-menu__barras span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--curva), opacity .2s linear; }
.botao-menu__barras span:nth-child(1) { top: 0; }
.botao-menu__barras span:nth-child(2) { top: 6px; }
.botao-menu__barras span:nth-child(3) { top: 12px; }
.botao-menu[aria-expanded="true"] .botao-menu__barras span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.botao-menu[aria-expanded="true"] .botao-menu__barras span:nth-child(2) { opacity: 0; }
.botao-menu[aria-expanded="true"] .botao-menu__barras span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1280px) { .botao-menu { display: none; } }

.menu-movel { position: fixed; inset: 72px 0 0 0; z-index: 49; overflow-y: auto; background: var(--branco); padding: 8px 0 32px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s linear, transform .3s var(--curva), visibility 0s linear .3s; overscroll-behavior: contain; }
.menu-movel.aberto { transform: none; opacity: 1; visibility: visible; transition: opacity .25s linear, transform .3s var(--curva); }
@media (min-width: 1024px) { .menu-movel { inset: 124px 0 0 0; } }
@media (min-width: 1280px) { .menu-movel { display: none; } }
.menu-movel nav a { display: flex; align-items: center; justify-content: space-between; min-height: 60px; border-bottom: 1px solid var(--borda); font-family: var(--fonte-display); font-size: 21px; color: var(--safira-700); }
.menu-movel nav a[aria-current="page"] { font-weight: 600; }
.menu-movel__contato { display: grid; gap: 12px; margin-top: 28px; }
.menu-movel__contato .botao { width: 100%; }
.menu-movel__rodape { margin-top: 24px; font-size: 14px; color: var(--cinza); }
body.menu-aberto { overflow: hidden; }

/* ---------- hero da página inicial ---------- */
.hero { position: relative; background: var(--branco); }
.hero__painel { position: relative; overflow: hidden; background: var(--safira-700); color: var(--safira-100); isolation: isolate; }
.hero__painel::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 30px); animation: deriva 8s linear infinite; }
.hero__painel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 85% 85%, rgba(42,90,150,.75), rgba(42,90,150,0) 55%), linear-gradient(90deg, var(--safira-700) 18%, rgba(20,51,92,.35) 100%); }
.hero__arcos { position: absolute; z-index: -1; right: -120px; top: -40px; width: 560px; height: 560px; pointer-events: none; }
.hero__conteudo { padding: 48px 0 64px; display: flex; flex-direction: column; gap: 20px; }
.hero h1 { color: var(--branco); max-width: 15ch; }
.hero__sub { max-width: 34em; color: var(--safira-100); font-size: 16px; line-height: 1.6; }
.hero__guias { padding: 32px 0 40px; }
@media (min-width: 1024px) {
  .hero { display: grid; grid-template-columns: 50% 50%; min-height: 470px; }
  .hero__painel { clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
  .hero__conteudo { width: auto; margin: 0; padding: 56px 88px 56px max(var(--margem), calc((100vw - var(--largura)) / 2)); justify-content: center; height: 100%; }
  .hero__guias { width: auto; margin: 0; padding: 56px max(var(--margem), calc((100vw - var(--largura)) / 2)) 36px 64px; display: flex; flex-direction: column; }
  .hero__linha { position: absolute; inset: 0; pointer-events: none; }
}
@media (max-width: 1023px) {
  .hero__painel { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
  .hero__arcos { width: 380px; height: 380px; right: -140px; top: -120px; }
  .hero__linha { display: none; }
}
.guias { display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.guias__titulo { font-family: var(--fonte-display); font-size: clamp(22px, 2.1vw, 27px); line-height: 1.25; color: var(--safira-700); }
.guias__titulo:hover { color: var(--safira-600); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.guias__para { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--cinza); }
.etiqueta { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--safira-50); color: var(--tinta); font-size: 13px; font-weight: 600; }
.guias__rodape { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.guias__pontos { display: flex; gap: 8px; }
.guias__ponto { position: relative; width: 56px; height: 40px; padding: 0; border: 0; background: none; }
.guias__ponto::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--safira-100); }
.guias__ponto span { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--ouro); transform: scaleX(0); transform-origin: left; }
.guias__ponto[aria-current="true"] span { transform: scaleX(1); }
.guias.rodando .guias__ponto[aria-current="true"] span { animation: progresso 8s linear both; }
.guias__slide { display: flex; flex-direction: column; gap: 14px; }
.guias__conteudo { display: flex; flex-direction: column; gap: 14px; transition: opacity .35s linear; }
.guias__conteudo.trocando { opacity: 0; }

/* ---------- faixa informativo ---------- */
.faixa-info { background: var(--safira-800); color: var(--safira-100); }
.faixa-info__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 18px; }
.faixa-info__texto { display: flex; align-items: center; gap: 14px; }
.faixa-info__texto::before { content: ''; width: 3px; align-self: stretch; min-height: 36px; background: var(--ouro-claro); }
.faixa-info strong { display: block; color: var(--branco); font-size: 15px; }
.faixa-info span { font-size: 14px; }
@media (min-width: 1024px) { .faixa-info__linha { padding-left: calc(50% - (100vw - min(var(--largura), 100vw - 2 * var(--margem))) / 2 + 64px); } }

/* ---------- portas (3 colunas com filete) ---------- */
.portas { display: grid; gap: 28px; }
@media (min-width: 900px) { .portas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }
.porta { position: relative; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: inherit; }
.porta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--safira-500); transform-origin: top; animation: traca-y .9s var(--curva) both; }
.porta__titulo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fonte-display); font-size: 22px; color: var(--safira-700); }
.porta__titulo .seta { color: var(--ouro); }
.porta p { color: var(--grafite); font-size: 16px; }

/* ---------- como podemos ajudar ---------- */
.ajuda { position: relative; overflow: hidden; }
.ajuda__grade { position: relative; z-index: 1; display: grid; gap: 14px; }
@media (min-width: 700px) { .ajuda__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .ajuda__conteudo { max-width: 800px; } }
.ladrilho { display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding: 22px 24px; border-radius: var(--raio); background: var(--safira-50); color: var(--tinta); transition: background-color .2s linear; }
.ladrilho:hover { background: var(--safira-100); color: var(--tinta); }
.ladrilho__nome { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--safira-700); }
.ladrilho p { font-size: 14.5px; line-height: 1.55; color: var(--grafite); }
.circulo { position: absolute; z-index: 0; border-radius: 50%; background: var(--ouro); color: var(--branco); display: flex; flex-direction: column; animation: flutua 9s ease-in-out infinite; }
.circulo__numero { font-family: var(--fonte-display); font-weight: 300; line-height: 1; }
.circulo__rotulo { font-weight: 600; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; }
/* Celular: o círculo sai só um pouco da tela — número e rótulo ficam inteiros. */
.ajuda .circulo { right: -30px; top: -40px; width: 180px; height: 180px; padding: 58px 0 0 28px; }
.ajuda .circulo__numero { font-size: 46px; }
.ajuda .circulo__rotulo { font-size: 10px; }
@media (min-width: 1024px) {
  .ajuda .circulo { left: calc(50% + 230px); right: auto; top: 140px; width: 600px; height: 600px; padding: 100px 0 0 92px; }
  .ajuda .circulo__numero { font-size: 150px; }
  .ajuda .circulo__rotulo { font-size: 22px; font-family: var(--fonte-display); font-weight: 400; }
}
/* 1024–1279 px: conteúdo mais estreito e círculo menor, para o "+20" caber inteiro. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ajuda__conteudo { max-width: 600px; }
  .ajuda .circulo { left: auto; right: -170px; top: 120px; width: 520px; height: 520px; padding: 96px 0 0 80px; }
  .ajuda .circulo__numero { font-size: 120px; }
  .ajuda .circulo__rotulo { font-size: 18px; }
}
@media (max-width: 1023px) { .ajuda .cabeca-secao h2 { padding-right: 130px; } }

/* ---------- consulta interativa ---------- */
.consulta { position: relative; overflow: hidden; background: var(--safira-600); color: var(--safira-100); }
.consulta h2 { color: var(--branco); font-weight: 300; }
.consulta__anel { position: absolute; right: -160px; top: -300px; width: 600px; height: 600px; pointer-events: none; }
.consulta__campos { position: relative; display: grid; gap: 22px; margin-top: 28px; }
.consulta__grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.consulta__grupo legend { padding: 0; margin-bottom: 12px; color: var(--branco); font-size: 15px; font-weight: 600; }
.consulta .pilulas { gap: 8px; }
.consulta .pilula span { min-height: 44px; padding: 0 18px; background: transparent; border-color: rgba(255,255,255,.5); color: var(--branco); font-size: 14.5px; transition: background-color .2s linear, color .2s linear, border-color .2s linear; }
.consulta .pilula span:hover { border-color: var(--branco); background: rgba(255,255,255,.08); }
.consulta .pilula input:checked + span { background: var(--branco); border-color: var(--branco); color: var(--safira-700); }
.consulta .pilula input:focus-visible + span { outline-color: var(--ouro-claro); }
@media (min-width: 1100px) { .consulta__campos { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; } }
.consulta label { color: var(--branco); }
.consulta__resultados { position: relative; display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 700px) { .consulta__resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; } }
@media (min-width: 1100px) { .consulta__resultados { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.resultado { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.3); display: flex; flex-direction: column; gap: 10px; }
.resultado__status { align-self: flex-start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid rgba(255,255,255,.5); color: var(--branco); }
.resultado__status--pode { background: var(--branco); border-color: var(--branco); color: var(--safira-700); }
.resultado__status--conversa { border-color: var(--ouro-claro); }
.resultado__nome { font-family: var(--fonte-display); font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--branco); }
.resultado p { font-size: 15px; line-height: 1.55; }
.consulta__rodape { position: relative; margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.consulta__aviso { max-width: 58ch; font-size: 14px; }

/* ---------- formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label, .campo legend { font-size: 15px; font-weight: 600; color: var(--tinta); }
.campo__ajuda { font-size: 14px; line-height: 1.5; color: var(--cinza); }
.obrigatorio { color: var(--erro); font-weight: 700; }
.entrada, .selecao select, .area-texto {
  width: 100%; min-height: var(--campo); padding: 0 20px;
  border: 1px solid var(--safira-200); border-radius: 999px;
  background: var(--papel); color: var(--tinta); font-size: 16px; line-height: 1.4;
  transition: border-color .15s linear, box-shadow .15s linear, background-color .15s linear;
}
.area-texto { padding: 14px 20px; border-radius: 18px; min-height: 120px; resize: vertical; }
.entrada:hover, .selecao select:hover, .area-texto:hover { border-color: var(--safira-500); }
.entrada:focus, .selecao select:focus, .area-texto:focus { outline: none; border-color: var(--safira-600); background: var(--branco); box-shadow: 0 0 0 3px rgba(42,90,150,.22); }
.entrada::placeholder, .area-texto::placeholder { color: #6B7482; }
.campo--erro .entrada, .campo--erro select, .campo--erro .area-texto { border-color: var(--erro); }
.campo__erro { font-size: 14px; font-weight: 600; color: var(--erro); }

/* Seta da seleção: desenhada pelo próprio site (a nativa varia de navegador para
   navegador). 20px de respiro à direita e área reservada de 52px, para o texto
   nunca encostar nela. */
.selecao { position: relative; }
.selecao select { appearance: none; -webkit-appearance: none; padding-right: 52px; cursor: pointer; text-overflow: ellipsis; }
.selecao::after { content: ''; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--safira-700); border-bottom: 2px solid var(--safira-700); transform: rotate(45deg); pointer-events: none; transition: transform .2s var(--curva); }
.selecao:focus-within::after { transform: translateY(2px) rotate(45deg); }
.selecao--clara select { background: var(--branco); border-color: var(--branco); }


.escolha, .campo .escolha { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 8px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--tinta); cursor: pointer; }
.escolha input { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--safira-700); cursor: pointer; }
.pilulas { display: flex; flex-wrap: wrap; gap: 10px; }
.pilula { position: relative; }
.pilula input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilula span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--safira-200); border-radius: 999px; background: var(--branco); color: var(--safira-700); font-size: 15px; font-weight: 600; cursor: pointer; transition: all .15s linear; }
.pilula input:checked + span { background: var(--safira-700); border-color: var(--safira-700); color: var(--branco); }
.pilula input:focus-visible + span { outline: 3px solid var(--safira-500); outline-offset: 3px; }
.grade-campos { display: grid; gap: 20px; }
@media (min-width: 700px) { .grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } .grade-campos .inteiro { grid-column: 1 / -1; } }
.armadilha { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.formulario__envio { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.formulario__nota { font-size: 14px; line-height: 1.5; color: var(--grafite); }
.aviso-envio { padding: 16px 20px; border-left: 3px solid var(--safira-700); background: var(--safira-50); font-size: 15px; line-height: 1.55; }
.aviso-envio--erro { border-color: var(--erro); background: #FDF1F0; }

/* ---------- cartões e grades ---------- */
.grade-2 { display: grid; gap: 32px; }
.grade-3 { display: grid; gap: 24px; }
.grade-4 { display: grid; gap: 20px; }
/* Bloco com outra grade dentro: só vira duas colunas quando há largura para as duas. */
@media (max-width: 1023px) { .grade-2--largo { grid-template-columns: minmax(0, 1fr) !important; } }
/* Coluna de grid não cresce além da tela por causa de conteúdo longo (e-mail, capa). */
.grade-2 > *, .grade-3 > *, .grade-4 > *, .contato-grade > *, .video-e-listas > * { min-width: 0; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (min-width: 700px) { .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-3, .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grade-2 { gap: 48px; } .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cartao { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--branco); border-top: 2px solid var(--safira-700); color: var(--tinta); transition: background-color .2s linear, opacity .3s linear; }
.secao:not(.secao--papel) .cartao { background: var(--papel); }
a.cartao:hover { background: var(--safira-50) !important; color: var(--tinta); }
.cartao__tipo { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }
.cartao--prioritario { border-top-color: var(--ouro); }
.cartao--prioritario .cartao__tipo { color: var(--ouro-texto); }
.cartao__nome { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--safira-700); }
.cartao__desc { font-size: 15px; line-height: 1.55; color: var(--grafite); }
.cartao__para { margin-top: auto; padding-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--cinza); }
.cartao__base { font-size: 13.5px; line-height: 1.5; color: var(--grafite); }
.cartao__base strong { color: var(--tinta); font-weight: 600; }
.cartao__acao { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--safira-700); }
.esmaecido { opacity: .35; }
.cartao-conteudo { transition: opacity .3s linear; }
a.cartao-conteudo:hover .video__titulo { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.selo { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border-radius: 999px; background: var(--safira-700); color: var(--branco); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.cartao__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; }
.filtro { min-height: 44px; padding: 0 20px; border: 1px solid var(--safira-200); border-radius: 999px; background: var(--branco); color: var(--safira-700); font-size: 15px; font-weight: 600; transition: all .15s linear; }
.filtro:hover { border-color: var(--safira-700); }
.filtro[aria-pressed="true"] { background: var(--safira-700); border-color: var(--safira-700); color: var(--branco); }
.barra-filtro { position: sticky; top: 72px; z-index: 20; background: var(--branco); border-bottom: 1px solid var(--borda); box-shadow: 0 6px 16px -14px rgba(20,51,92,.5); }
@media (min-width: 1024px) { .barra-filtro { top: 88px; } }
.barra-filtro__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 18px; }
.contagem { display: flex; align-items: baseline; gap: 10px; }
.contagem strong { font-family: var(--fonte-display); font-size: clamp(40px, 5vw, 60px); font-weight: 300; line-height: 1; color: var(--ouro); }
.contagem span { max-width: 190px; font-size: 14.5px; line-height: 1.4; color: var(--grafite); }
/* Celular: a barra fica presa no topo — precisa ser baixa. Chips numa linha
   rolável (com degradê indicando que há mais), contagem numa linha só. */
@media (max-width: 759px) {
  .barra-filtro__linha { display: grid; gap: 10px; padding-block: 12px; }
  .barra-filtro__linha > .pilha { gap: 10px !important; min-width: 0; }
  .barra-filtro .titulo-3 { font-size: 16px; }
  .barra-filtro .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scroll-padding-inline: var(--margem);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .barra-filtro .filtros::-webkit-scrollbar { display: none; }
  .barra-filtro .filtros.filtros--fim { -webkit-mask-image: none; mask-image: none; }
  .barra-filtro .filtro { flex: none; min-height: 42px; padding: 0 16px; font-size: 14.5px; white-space: nowrap; scroll-snap-align: start; }
  .contagem { align-items: baseline; gap: 8px; }
  .contagem strong { font-size: 22px; font-weight: 500; }
  .contagem span { max-width: none; font-size: 13.5px; }
}

/* ---------- listas de conferência ---------- */
.lista-check { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
.lista-check li::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; background: currentColor; color: var(--safira-700); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.lista-check--nao li { color: var(--grafite); }
.lista-check--nao li::before { color: var(--borda-forte); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }

/* ---------- fotografias (prontas para receber os arquivos) ---------- */
.foto { position: relative; margin: 0; overflow: hidden; background: var(--safira-100); border-radius: var(--raio); }
.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--4x5 { aspect-ratio: 4 / 5; }
.foto--16x9 { aspect-ratio: 16 / 9; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 30%); }
.foto__pendente { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; font-size: 14px; color: var(--grafite); background-image: repeating-linear-gradient(0deg, rgba(20,51,92,.07) 0 1px, transparent 1px 22px); }
.foto__pendente .icone { width: 34px; height: 34px; stroke-width: 1.3; }
.com-hachura { display: grid; grid-template-columns: minmax(0, 1fr) clamp(48px, 10vw, 140px); }
.com-hachura::after { content: ''; background-image: repeating-linear-gradient(135deg, rgba(20,51,92,.35) 0 1px, transparent 1px 9px); animation: hachura 3s linear infinite; }

/* ---------- vídeos ---------- */
.video { display: flex; flex-direction: column; gap: 14px; }
.video__capa { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--raio); background: var(--safira-700); }
.video__capa svg.capa { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__play { position: absolute; left: 50%; top: 38%; width: clamp(52px, 14%, 76px); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: var(--branco); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(255,255,255,.5); animation: pulso 2.4s ease-out infinite; }
.video__play svg { width: 34%; height: 34%; margin-left: 6%; fill: var(--safira-700); }
.video__titulo { font-family: var(--fonte-display); font-size: clamp(21px, 2vw, 25px); font-weight: 300; line-height: 1.25; color: var(--safira-700); }
.video__meta { font-size: 14px; color: var(--cinza); }
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(12,31,58,.88); }
.modal__caixa { width: min(880px, 100%); display: flex; flex-direction: column; gap: 14px; }
.modal__fechar { align-self: flex-end; }
.modal__quadro { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--raio); background: var(--safira-900); }
/* Vídeos do escritório: verticais (9:16), do tamanho da tela sem cortar. */
.modal__caixa--vertical { width: min(440px, 100%, calc((100vh - 120px) * 9 / 16)); }
.modal__video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: calc(100vh - 120px); border-radius: 10px; background: var(--safira-900); box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); }
.modal__titulo { color: var(--branco); font-size: 15px; font-weight: 600; text-align: center; }
/* Linha "texto + vídeo" (Como funciona) */
.video-linha { display: grid; gap: 24px; align-items: center; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--borda); }
@media (min-width: 900px) { .video-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; } }
.modal__aviso { padding: 40px 28px; border-radius: var(--raio); background: var(--safira-800); color: var(--safira-100); text-align: center; }
.modal__aviso h2 { color: var(--branco); margin-bottom: 8px; font-size: 24px; }

/* ---------- números ---------- */
.numeros { display: grid; gap: 32px; }
@media (min-width: 760px) { .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding-left: 40px; } }
.numero { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 760px) { .numero { grid-template-columns: 1fr; gap: 18px; } }
.numero strong { font-family: var(--fonte-display); font-size: clamp(72px, 9vw, 128px); line-height: .9; font-weight: 300; color: var(--ouro); }
.numero span { font-size: 16px; line-height: 1.55; max-width: 290px; }

/* ---------- faixa do guia ---------- */
.faixa-guia { position: relative; overflow: hidden; background: var(--safira-700); color: var(--safira-100); }
.faixa-guia__ondas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.faixa-guia__linha { position: relative; display: grid; gap: 24px; padding-block: clamp(56px, 8vw, 110px); }
@media (min-width: 900px) { .faixa-guia__linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; } }
.faixa-guia h2 { font-weight: 500; font-size: clamp(42px, 5vw, 62px); line-height: 1.04; color: var(--ouro-claro); }
.faixa-guia p { font-size: 16px; line-height: 1.65; max-width: 34em; }
.faixa-guia strong { color: var(--branco); }
.faixa-guia .link-seta { color: var(--branco); }
.faixa-guia .link-seta .seta { color: var(--ouro-claro); width: 34px; }

/* ---------- escritório (bloco da home) ---------- */
.bloco-escritorio { display: grid; gap: 40px; }
@media (min-width: 1024px) { .bloco-escritorio { grid-template-columns: 440px minmax(0, 1fr); gap: 110px; align-items: start; } }
.itens-link { display: flex; flex-direction: column; gap: 28px; }
.item-link__titulo { display: inline-flex; align-items: center; gap: 14px; min-height: 36px; font-family: var(--fonte-display); font-size: 20px; font-weight: 500; color: var(--ouro-texto); }
.item-link__titulo .seta { color: var(--tinta); width: 30px; }
.item-link__titulo:hover { color: var(--ouro-hover); }
.item-link p { color: var(--grafite); font-size: 16px; }

/* ---------- perguntas frequentes (details nativo) ---------- */
.perguntas { display: flex; flex-direction: column; gap: 8px; }
.pergunta { border-radius: var(--raio); background: var(--papel); }
.secao--papel .pergunta { background: var(--branco); }
.pergunta summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 14px 20px 14px 24px; cursor: pointer; font-family: var(--fonte-display); font-size: clamp(17px, 1.6vw, 19px); font-weight: 500; line-height: 1.35; color: var(--safira-700); border-radius: var(--raio); }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: ''; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5C31' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s var(--curva); }
.secao--papel .pergunta summary::after { background-color: var(--papel); }
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta__resposta { padding: 0 24px 24px; max-width: 72ch; color: var(--grafite); font-size: 16px; line-height: 1.65; }

/* ---------- chamada final ---------- */
.chamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 60px; }
.chamada__texto { max-width: 720px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- cadastro (informativo) ---------- */
.cadastro { position: relative; overflow: hidden; background: var(--safira-50); }
.cadastro__linha { position: relative; display: grid; gap: 28px; padding-block: var(--secao); }
@media (min-width: 1024px) { .cadastro__linha { grid-template-columns: 360px minmax(0, 1fr); gap: 72px; align-items: center; } }
.cadastro__caixa { padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 52px); background: var(--branco); border-radius: var(--raio); display: flex; flex-direction: column; gap: 22px; }
.cadastro__arcos { position: absolute; left: -140px; bottom: -220px; width: 520px; height: 520px; pointer-events: none; }

/* ---------- cabeçalho das páginas internas ---------- */
.topo-pagina { position: relative; overflow: hidden; background: var(--safira-700); color: var(--safira-100); isolation: isolate; }
.topo-pagina::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 30px); animation: deriva 8s linear infinite; }
.topo-pagina::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--safira-700) 35%, rgba(20,51,92,.45) 100%); }
.topo-pagina__arcos { position: absolute; z-index: -1; right: -180px; top: -200px; width: 560px; height: 560px; pointer-events: none; }
.topo-pagina__linha { display: flex; flex-direction: column; gap: 14px; padding-block: clamp(48px, 7vw, 84px); }
.topo-pagina h1 { color: var(--branco); max-width: 22ch; }
.topo-pagina p { max-width: 42em; font-size: clamp(16px, 1.4vw, 17px); line-height: 1.6; }
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.trilha a { color: var(--safira-100); text-decoration: underline; text-underline-offset: 4px; }
.trilha a:hover { color: var(--branco); }
.trilha span[aria-hidden] { color: var(--ouro-claro); }

/* ---------- abas (seus direitos) ---------- */
.abas { position: sticky; top: 72px; z-index: 20; background: var(--branco); border-bottom: 1px solid var(--borda); }
@media (min-width: 1024px) { .abas { top: 88px; } }
.abas__lista { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.abas__lista::-webkit-scrollbar { display: none; }
.aba { flex: 1 0 auto; min-width: 200px; min-height: 76px; padding: 12px 18px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border: 0; border-bottom: 3px solid transparent; background: var(--branco); text-align: left; color: var(--grafite); scroll-snap-align: start; transition: background-color .2s linear; }
.aba:hover { background: var(--papel); }
.aba[aria-selected="true"] { background: var(--safira-50); border-bottom-color: var(--safira-700); color: var(--safira-700); }
.aba__num { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--cinza); }
.aba[aria-selected="true"] .aba__num { color: var(--ouro-texto); }
.aba__nome { font-family: var(--fonte-display); font-size: 16px; font-weight: 500; line-height: 1.3; }
@media (min-width: 1024px) { .aba { flex: 1 1 0; min-width: 0; min-height: 92px; padding: 14px 20px; } .aba__nome { font-size: 17px; } }
@media (max-width: 1023px) {
  .abas { position: static; border-bottom: 0; background: var(--papel); }
  .abas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-block: 12px; overflow: visible; }
  .aba { min-width: 0; min-height: 68px; padding: 10px 14px; border: 1px solid var(--borda); border-bottom-width: 3px; border-radius: 8px; }
  .aba__nome { font-size: 15px; }
}
.painel:focus { outline: none; }
.o-que-e { display: grid; gap: 36px; }
@media (min-width: 1024px) { .o-que-e { grid-template-columns: minmax(0, 1fr) 520px; gap: 80px; } }
.ilustracao { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ilustracao__quadro { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 3vw, 32px); border-radius: var(--raio); background: var(--safira-50); overflow: hidden; }
.ilustracao__cabeca { display: flex; flex-direction: column; gap: 6px; }
.ilustracao__titulo { font-family: var(--fonte-display); font-size: clamp(18px, 1.6vw, 20px); font-weight: 500; line-height: 1.3; color: var(--safira-700); }
.ilustracao__sub, .ilustracao__nota { font-size: 14.5px; line-height: 1.5; color: var(--grafite); }
.ilustracao__desenho svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Celular: o quadro vai de borda a borda e os rótulos do desenho crescem 20%. */
@media (max-width: 599px) {
  .ilustracao__quadro { margin-inline: calc(-1 * var(--margem)); border-radius: 0; padding-inline: var(--margem); }
  .ilustracao__desenho { margin-inline: -8px; }
  .ilustracao figcaption { padding-inline: 0; }
  .ilu-rotulo { font-size: calc(var(--fs) * 1.2) !important; }
}
.ilustracao figcaption { font-size: 13.5px; color: var(--cinza); }
.ficha { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.55; color: var(--grafite); }
.ficha strong { color: var(--tinta); }
.video-e-listas { display: grid; gap: 40px; }
@media (min-width: 1024px) { .video-e-listas { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 72px; } }

/* ---------- é o meu caso? — perguntas de sim ou não ----------
   Sem JavaScript: lista completa, com a orientação de cada parada por extenso.
   Com JavaScript (.verifica--ativa): uma pergunta por vez, trilha à esquerda e
   uma bolinha que acompanha a resposta até o resultado. */
.verifica { position: relative; max-width: 760px; }
.verifica-bloco { display: grid; gap: 28px; }
.verifica-bloco .cabeca-secao { margin-bottom: 0; }
@media (min-width: 1024px) {
  .verifica-bloco { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 72px; align-items: start; }
  .verifica-bloco .cabeca-secao { position: sticky; top: 150px; }
}
.verifica__passos { position: relative; display: grid; gap: 16px; list-style: none; padding-left: 44px; }
.verifica__passos::before { content: ''; position: absolute; left: 10px; top: 30px; bottom: 30px; width: 2px; background: var(--borda); }
.verifica__passo, .verifica__resultado { position: relative; }
.verifica__marca { position: absolute; left: -41px; top: 23px; width: 16px; height: 16px; border-radius: 50%; background: var(--branco); border: 2px solid var(--borda-forte); transition: background-color .3s linear, border-color .3s linear; }
.verifica__passo.respondida .verifica__marca { background: var(--safira-700); border-color: var(--safira-700); }
.verifica__passo.parou .verifica__marca { background: var(--branco); border-color: var(--safira-700); }
.verifica__resultado .verifica__marca { border-color: var(--ouro); }
.verifica__caixa { display: flex; flex-direction: column; gap: 14px; padding: 20px clamp(18px, 3vw, 28px) 22px; background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; }
.secao:not(.secao--papel) .verifica__caixa { background: var(--papel); border-color: transparent; }
.verifica__num { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }
.verifica__pergunta { margin-top: -8px; font-family: var(--fonte-display); font-size: clamp(19px, 2vw, 22px); font-weight: 500; line-height: 1.3; color: var(--safira-700); }
.verifica__respostas { display: flex; flex-wrap: wrap; gap: 10px; }
.verifica__resposta { min-width: 112px; min-height: 48px; padding: 0 26px; border: 1.5px solid var(--safira-700); border-radius: 999px; background: var(--branco); color: var(--safira-700); font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .2s linear, color .2s linear, box-shadow .2s linear, transform .15s ease-out; }
.verifica__resposta:hover { background: var(--safira-50); }
.verifica__resposta:active { transform: scale(.97); }
.verifica__resposta[aria-pressed="true"] { background: var(--safira-700); color: var(--branco); box-shadow: 0 6px 16px -8px rgba(20,51,92,.6); }
.verifica__parada { padding: 14px 18px; border-left: 3px solid var(--safira-700); border-radius: 0 8px 8px 0; background: var(--safira-50); font-size: 15.5px; line-height: 1.55; color: var(--tinta); }
.verifica__se { font-weight: 700; color: var(--safira-700); }
.verifica__parada a { font-weight: 700; color: var(--safira-700); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.verifica__resultado .verifica__caixa { background: var(--ouro); border-color: var(--ouro); color: var(--branco); }
.secao:not(.secao--papel) .verifica__resultado .verifica__caixa { background: var(--ouro); }
.verifica__resultado .verifica__num { color: rgba(255,255,255,.85); }
.verifica__texto { margin-top: -6px; font-family: var(--fonte-display); font-size: clamp(19px, 2vw, 22px); font-weight: 500; line-height: 1.3; }
.verifica__resultado .botao { align-self: flex-start; }
.verifica__ponto { display: none; }
.verifica__refazer { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 18px 0 0 44px; padding: 0 4px; background: none; border: 0; color: var(--safira-700); font-size: 14.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.verifica__refazer svg { width: 18px; height: 18px; }
.verifica__refazer[hidden] { display: none; }
/* Com JavaScript */
.verifica--ativa .verifica__se { display: none; }
.verifica--ativa .verifica__respostas { display: flex; }
.verifica:not(.verifica--ativa) .verifica__respostas { display: none; }
.verifica--ativa .verifica__passos::before { top: var(--ini, 31px); bottom: auto; height: var(--trilha, 0px); background: linear-gradient(var(--safira-700), var(--safira-700)) 0 0 / 100% var(--feito, 0px) no-repeat, var(--borda); transition: height .5s var(--curva), background-size .5s var(--curva); }
.verifica--ativa .verifica__ponto { display: block; position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ouro); border: 3px solid var(--branco); box-shadow: 0 0 0 5px rgba(143,109,60,.22); pointer-events: none; transition: transform .55s var(--curva), background-color .3s linear, border-color .3s linear, box-shadow .3s linear; }
/* No resultado a bolinha não se confunde com a caixa dourada: branca, contorno safira. */
.verifica__ponto--fim { background: var(--branco) !important; border-color: var(--safira-700) !important; box-shadow: 0 0 0 6px rgba(20,51,92,.14) !important; animation: pulso-fim 2.4s ease-out 0.6s infinite; }
.verifica__ponto--parou { background: var(--safira-700) !important; box-shadow: 0 0 0 5px rgba(20,51,92,.16) !important; }
@keyframes pulso-fim { 0% { box-shadow: 0 0 0 0 rgba(20,51,92,.28); } 70%, 100% { box-shadow: 0 0 0 12px rgba(20,51,92,0); } }
.verifica .entra-suave, .consulta .entra-suave { animation: sobe .5s var(--curva) both; }

/* ---------- etapas (do primeiro contato ao pagamento) ---------- */
.etapas { position: relative; display: grid; gap: 28px; list-style: none; padding-left: 36px; }
.etapas::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--ouro-claro); transform-origin: top; animation: traca-y 1.6s var(--curva) .3s both; }
.etapa { position: relative; display: flex; flex-direction: column; gap: 8px; }
.etapa::before { content: ''; position: absolute; left: -36px; top: 4px; width: 12px; height: 12px; background: var(--ouro-claro); }
.etapa .icone { width: 26px; height: 26px; color: var(--branco); }
.etapa__num { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--safira-200); }
.etapa h3 { font-size: 21px; color: var(--branco); }
.etapa p { font-size: 15px; line-height: 1.55; color: var(--safira-100); }
@media (min-width: 1024px) {
  .etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 42px 0 0; }
  .etapas::before { left: 24px; right: 20%; top: 23px; bottom: auto; width: auto; height: 2px; transform-origin: left; animation-name: traca; }
  .etapa { padding-right: 32px; }
  .etapa::before { left: 18px; top: -25px; }
  .etapas__ponto { position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--branco); box-shadow: 0 0 0 5px rgba(198,161,91,.45); animation: etapas 12s cubic-bezier(.65,0,.35,1) 1.6s infinite; }
}
@media (max-width: 1023px) { .etapas__ponto { display: none; } }
/* Tablet: a linha do tempo continua vertical, mas cada etapa usa a largura da tela. */
@media (min-width: 700px) and (max-width: 1023px) {
  .etapas { gap: 34px; }
  .etapa { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 28px; row-gap: 6px; align-items: start; }
  .etapa > .icone { grid-column: 1; grid-row: 1; }
  .etapa__num { grid-column: 1; grid-row: 2; }
  .etapa h3 { grid-column: 2; grid-row: 1; }
  .etapa p { grid-column: 2; grid-row: 2; max-width: 52ch; }
}
/* Versão clara (Como funciona): logo abaixo do topo azul, o fundo branco separa os blocos. */
.secao--etapas-clara { background: var(--branco); border-bottom: 1px solid var(--borda); }
.secao--etapas-clara .lead { color: var(--grafite); }
.secao--etapas-clara .etapas::before, .secao--etapas-clara .etapa::before { background: var(--ouro); }
.secao--etapas-clara .etapa .icone { color: var(--safira-700); }
.secao--etapas-clara .etapa__num { color: var(--cinza); }
.secao--etapas-clara .etapa h3 { color: var(--safira-700); }
.secao--etapas-clara .etapa p { color: var(--grafite); }
.secao--etapas-clara .etapas__ponto { background: var(--safira-700); box-shadow: 0 0 0 5px rgba(20,51,92,.16); }
.secao--safira .lead { color: var(--safira-100); }
.notas-etapas { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 900px) { .notas-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
.nota { padding: 20px 24px; border-left: 2px solid var(--ouro-claro); background: rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 6px; }
.nota strong { color: var(--branco); font-size: 16px; }
.nota span { font-size: 15px; line-height: 1.55; }
.nota--clara { border-left-color: var(--ouro); background: var(--papel); }
.nota--clara strong { color: var(--safira-700); }
.nota--clara span { color: var(--grafite); }

/* ---------- missão, visão e valores ---------- */
.principios { display: grid; gap: 20px; }
@media (min-width: 1024px) { .principios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.principio { padding: clamp(24px, 3vw, 36px); background: var(--branco); border-top: 2px solid var(--safira-700); display: flex; flex-direction: column; gap: 14px; }
.principio h3 { font-size: clamp(23px, 2.2vw, 28px); font-weight: 400; }
.principio p { font-size: 17px; line-height: 1.7; color: var(--grafite); }
.principio--valores { grid-column: 1 / -1; border-top-color: var(--ouro); }
.valores { display: grid; gap: 12px; list-style: none; }
@media (min-width: 600px) { .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .valores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.valores li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; background: var(--papel); font-family: var(--fonte-display); font-size: 19px; color: var(--safira-700); }
.valores li::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; background: var(--ouro); }

.como-trabalhamos { display: grid; gap: 32px; }
@media (min-width: 700px) { .como-trabalhamos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
@media (min-width: 1100px) { .como-trabalhamos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.socio { display: flex; flex-direction: column; gap: 14px; }
.socio h3 { font-size: clamp(22px, 2.2vw, 25px); font-weight: 400; }
.socio__oab { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--ouro-texto); }
.socio .lista-check li { font-size: 15.5px; }

/* ---------- contato ---------- */
.contato-grade { display: grid; gap: 28px; }
@media (min-width: 1024px) { .contato-grade { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; } }

/* ---------- mapa ---------- */
.mapa { display: grid; gap: 32px; }
@media (min-width: 1024px) { .mapa { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 72px; align-items: start; } }
.mapa__quadro { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio); background: var(--safira-50); border: 1px solid var(--borda); }
.mapa__fundo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* O mapa do Google só entra quando a pessoa pede (privacidade: sem cookie de terceiro na abertura da página). */
.mapa__quadro iframe { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; animation: surge .5s ease-out both; }
.mapa__pino { position: absolute; z-index: 2; left: 50%; top: 50%; width: 32px; height: 44px; transform: translate(-50%, -100%); filter: drop-shadow(0 4px 6px rgba(12,31,58,.35)); }
.mapa__pino svg { width: 100%; height: 100%; display: block; }
.mapa__pino::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 14px; height: 6px; margin-left: -7px; border-radius: 50%; background: rgba(12,31,58,.25); }
.mapa__rotulo { position: absolute; z-index: 2; left: 50%; top: calc(50% + 10px); transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--safira-700); color: var(--branco); font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px rgba(12,31,58,.2); }
.mapa__carregar { display: none; position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap; min-height: 40px; padding: 0 16px; border: 1px solid var(--safira-700); border-radius: 999px; background: var(--safira-700); color: var(--branco); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background-color .2s linear; }
.mapa__carregar:hover { background: var(--safira-600); }
.js .mapa__carregar { display: inline-flex; align-items: center; }
.mapa__quadro.carregado .mapa__carregar { display: none; }
.mapa__abrir { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--branco); color: var(--safira-700); font-size: 13.5px; font-weight: 700; box-shadow: 0 4px 14px rgba(12,31,58,.18); transition: background-color .2s linear; }
.mapa__abrir:hover { background: var(--safira-50); }
.mapa__abrir .icone { width: 18px; height: 18px; }
.mapa__aviso { margin-top: 10px; font-size: 13.5px; color: var(--cinza); }
.mapa__endereco { font-style: normal; font-size: 17px; line-height: 1.65; color: var(--tinta); }

/* ---------- canais oficiais ---------- */
.canais { background: var(--branco); border-top: 2px solid var(--safira-700); padding: 4px clamp(18px, 3vw, 28px) 8px; }
.canal { display: grid; gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--borda); align-items: baseline; }
.canal:last-child { border-bottom: 0; }
@media (min-width: 700px) { .canal { grid-template-columns: 190px minmax(0, 1fr); } }
.canal dt { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
.canal dd { margin: 0; font-size: 17px; font-weight: 600; }
.canal dd a { color: var(--safira-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cartao-alerta { padding: 28px; background: var(--papel); border-top: 2px solid var(--erro); display: flex; flex-direction: column; gap: 12px; }
.cartao-alerta .icone { width: 36px; height: 36px; color: var(--erro); }
.painel-safira { padding: clamp(24px, 3vw, 32px); background: var(--safira-700); color: var(--safira-100); display: flex; flex-direction: column; gap: 14px; }
.painel-safira h3, .painel-safira strong { color: var(--branco); }
.painel-safira a:not(.botao) { color: var(--branco); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- rodapé ---------- */
.rodape { background: var(--papel); border-top: 1px solid var(--borda); padding-block: clamp(56px, 7vw, 80px) 40px; font-size: 15px; }
.rodape__topo { display: grid; gap: 36px; }
@media (min-width: 700px) { .rodape__topo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rodape__topo { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); gap: 40px; } }
.rodape__coluna { display: flex; flex-direction: column; gap: 10px; }
.rodape__coluna h2 { font-family: var(--fonte-texto); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro-texto); margin-bottom: 4px; }
.rodape__coluna a { display: inline-flex; align-items: center; min-height: 32px; color: var(--tinta); }
/* O logotipo no rodapé mantém o alinhamento do F com o S (a regra acima centralizaria). */
.rodape__coluna a.marca { align-items: flex-start; align-self: flex-start; min-height: 0; }
.rodape__coluna a:hover { color: var(--safira-600); text-decoration: underline; text-underline-offset: 4px; }
.rodape__contato { display: grid; gap: 24px; margin-top: 44px; }
@media (min-width: 900px) { .rodape__contato { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.rodape__contato address { font-style: normal; line-height: 1.65; }
.rodape__contato strong { display: block; }
.rodape__contato a { color: var(--safira-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rodape__contato a { display: inline-block; padding-block: 2px; }
@media (max-width: 899px) { .rodape__contato a { padding-block: 8px; } }
.rodape__base { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.rodape__legal { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.6; color: var(--grafite); max-width: 900px; }
.rodape__legal strong { color: var(--tinta); }
.botao-movimento { min-height: 44px; padding: 0 18px; border: 1px solid var(--borda-forte); border-radius: 999px; background: transparent; color: var(--grafite); font-size: 13px; font-weight: 600; }
.botao-movimento:hover { border-color: var(--safira-700); color: var(--safira-700); }

/* ---------- barra de contato fixa no celular ---------- */
.barra-contato { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px var(--margem) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97); border-top: 1px solid var(--borda); box-shadow: 0 -6px 24px rgba(12,31,58,.08); transform: translateY(110%); transition: transform .35s var(--curva); }
.barra-contato.visivel { transform: none; }
.barra-contato .botao { min-height: 48px; padding: 0 12px; font-size: 12px; }
@media (min-width: 760px) { .barra-contato { display: none; } }
@media (max-width: 759px) { body { padding-bottom: 76px; } }

/* ---------- ilustrações e motivos ---------- */
.desenha { stroke-dasharray: 2400; stroke-dashoffset: 0; animation: desenha 2.6s cubic-bezier(.45,0,.2,1) both; }
.gira { transform-box: fill-box; transform-origin: center; animation: gira 90s linear infinite; }
.gira-inv { transform-box: fill-box; transform-origin: center; animation: gira 140s linear infinite reverse; }
.onda { animation: onda 26s linear infinite; }
.onda-lenta { animation: onda 40s linear infinite reverse; }
.cresce { transform-box: fill-box; transform-origin: bottom center; animation: cresce .9s var(--curva) both; }
.estica { transform-box: fill-box; transform-origin: left center; animation: estica .9s var(--curva) both; }
.surge { animation: surge .7s ease-out both; }
.fluxo-linha { stroke-dasharray: 6 6; animation: fluxo .9s linear infinite; }
/* Percursos RPV × precatório: rótulos em HTML (legíveis no celular), trilha em SVG. */
.percursos { display: grid; gap: 22px; }
.percurso { display: grid; gap: 8px; }
.percurso__rotulo { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--safira-700); }
.percurso svg { display: block; width: 100%; height: auto; overflow: visible; }
.percurso__via { stroke: var(--safira-200); stroke-width: 6; stroke-linecap: round; fill: none; }
.percurso__marca { stroke: var(--papel); stroke-width: 3; }
.percurso__fim { fill: var(--ouro); }
.percurso__ponto { fill: var(--safira-700); }
.percurso__legenda { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--grafite); }
.percurso__quadro { width: 16px; height: 16px; border-radius: 4px; background: var(--ouro); flex: none; }
.percurso__nota { font-size: 15px; line-height: 1.5; color: var(--grafite); border-top: 1px solid var(--borda); padding-top: 16px; }
.trilha-curta { animation: trilha-c 4.5s cubic-bezier(.4,0,.2,1) infinite; }
.trilha-longa { animation: trilha-l 11s cubic-bezier(.4,0,.2,1) infinite; }
.pulso-svg { transform-box: fill-box; transform-origin: center; animation: pulso-svg 2.4s ease-out infinite; }
.entra { animation: sobe .9s var(--curva) both; }

@keyframes deriva { to { background-position: 44px 0, 0 30px; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes onda { to { transform: translateX(-720px); } }
@keyframes hachura { to { background-position: 0 18px; } }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 100% { box-shadow: 0 0 0 22px rgba(255,255,255,0); } }
@keyframes pulso-svg { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sobe { from { opacity: .25; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes traca { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes traca-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes desenha { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
@keyframes cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes estica { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes fluxo { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes etapas { 0% { opacity: 0; transform: translateX(0); } 4%, 14% { opacity: 1; transform: translateX(0); } 22%, 30% { transform: translateX(var(--e1, 240px)); } 38%, 46% { transform: translateX(var(--e2, 480px)); } 54%, 62% { transform: translateX(var(--e3, 720px)); } 70%, 90% { opacity: 1; transform: translateX(var(--e4, 960px)); } 100% { opacity: 0; transform: translateX(var(--e4, 960px)); } }
@keyframes trilha-c { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 72% { transform: translateX(288px); opacity: 1; } 88%, 100% { transform: translateX(288px); opacity: 0; } }
@keyframes trilha-l { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 1; } 18%, 26% { transform: translateX(120px); } 42%, 50% { transform: translateX(250px); } 66%, 74% { transform: translateX(380px); } 90% { transform: translateX(518px); opacity: 1; } 100% { transform: translateX(518px); opacity: 0; } }

/* Movimento: desligado pelo botão do rodapé ou pela preferência do sistema. */
html[data-movimento="desligado"] *, html[data-movimento="desligado"] *::before, html[data-movimento="desligado"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media print {
  .faixa-topo, .cabecalho, .menu-movel, .barra-contato, .consulta, .cadastro, .botao-movimento, .video__play { display: none !important; }
  body { padding: 0; font-size: 12pt; }
  .secao--safira, .topo-pagina, .faixa-guia { background: none !important; color: #000 !important; }
  .topo-pagina h1, .faixa-guia h2 { color: #000 !important; }
}

/* ---------- redes sociais ---------- */
.redes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; }
.redes__rotulo { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
.redes__lista { display: flex; gap: 8px; }
.redes__item { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--borda); border-radius: 50%; color: var(--safira-700); background: var(--branco); transition: background-color .2s linear, color .2s linear, border-color .2s linear; }
.redes__item svg { width: 20px; height: 20px; }
a.redes__item:hover { background: var(--safira-700); border-color: var(--safira-700); color: var(--branco); }
.redes__item--em-breve { color: var(--borda-forte); cursor: default; }
.redes__aviso { font-size: 13px; color: var(--cinza); }
.redes--menu { margin-top: 28px; }

/* ---------- páginas de texto legal (privacidade, termos) ---------- */
.documento { display: grid; gap: 40px; }
@media (min-width: 1024px) { .documento { grid-template-columns: 260px minmax(0, 760px); gap: 72px; align-items: start; } .documento__indice { position: sticky; top: 150px; } }
.documento__indice { padding: 22px 24px; border-radius: var(--raio); background: var(--papel); }
.documento__indice ol { display: grid; gap: 8px; margin-top: 12px; padding-left: 20px; font-size: 14.5px; line-height: 1.4; }
.documento__indice a { color: var(--safira-700); }
.documento__indice a:hover { text-decoration: underline; text-underline-offset: 3px; }
.documento__corpo { display: grid; gap: 36px; }
.documento__secao { display: grid; gap: 12px; scroll-margin-top: 110px; }
.documento__secao h2 { display: flex; align-items: baseline; gap: 12px; }
.documento__num { font-family: var(--fonte-texto); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ouro-texto); }
.documento__secao p, .documento__secao li { font-size: 16.5px; line-height: 1.7; color: var(--grafite); }
.documento__secao strong { color: var(--tinta); }
.documento__secao a { color: var(--safira-700); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rodape__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rodape__direitos { margin-top: 6px; color: var(--cinza); }