/*
 * Estilos do site do DeAcordo, montados sobre o design system (direção 4a · Disco tinta).
 * Cores, fontes, espaços e raios vêm de tokens.css, gerado pelo design system: não ponha valores soltos aqui.
 * Tema: data-theme="escuro" | "claro" no <html>, escolhido por tema.js.
 */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  hyphens: auto;
  background: var(--fundo);
  color: var(--texto);
  font: var(--text-corpo);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.conteudo { max-width: 1160px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)); }
@media (min-width: 720px) { .conteudo { padding: 0 var(--espaco-7); } }

/* Textos corridos justificados, com hifenização em português */
p, li, .perguntas details p { text-align: justify; }
.balao, .acoes, .rotulo, .chip, .passo, h1, h2, h3, summary { text-align: left; hyphens: manual; }

/* Tipografia (estilos do design system; títulos diminuem no celular) */
.rotulo { font: var(--text-rotulo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--destaque); margin: 0 0 var(--espaco-2); }
.titulo-1 { font: var(--text-titulo-1); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.titulo-2 { font: var(--text-titulo-2); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.titulo-3 { font: var(--text-titulo-3); margin: 0; }
.corpo-grande { font: var(--text-corpo-grande); color: var(--texto-apoio); margin: 0; }
@media (max-width: 720px) {
  .titulo-1 { font-size: 40px; }
  .titulo-2 { font-size: 30px; }
  .corpo-grande { font-size: 18px; }
}
.titulo-1 i, .titulo-2 i { color: var(--destaque); }
.de-acordo { font: var(--text-de-acordo); font-style: italic; }

/* MencaoWhatsApp: logo do WhatsApp logo depois da palavra, sem quebrar a linha entre os dois.
   marca/whatsapp.svg foi vetorizado da imagem do logo enviada para o projeto. */
.com-wa { white-space: nowrap; }
.wa {
  display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.3em; vertical-align: -0.08em;
  background: url(/marca/whatsapp.svg) center / contain no-repeat;
}
.titulo-1 .wa, .titulo-2 .wa { width: 26px; height: 26px; margin-left: 10px; vertical-align: 0.12em; }
@media (max-width: 720px) { .titulo-1 .wa, .titulo-2 .wa { width: 22px; height: 22px; } }

/* Botão */
.acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); }
.botao {
  display: inline-flex; align-items: center; min-height: 48px; padding: 14px 22px;
  border-radius: var(--raio-md); font: 600 17px/1 var(--font-texto); text-decoration: none; cursor: pointer;
}
.botao.principal { background: var(--acao-fundo); color: var(--acao-texto); border: 1px solid var(--acao-fundo); }
.botao.secundario { background: transparent; color: var(--texto); border: 1px solid var(--acao-contorno); }

/* Cabeçalho */
.topo { border-bottom: 1px solid var(--borda); }
.topo .conteudo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); min-height: 72px; }
.marca { display: inline-flex; }
.marca img { height: 36px; width: auto; display: block; }
.so-escuro, .so-claro { display: none !important; }
[data-theme="escuro"] .so-escuro, [data-theme="claro"] .so-claro { display: block !important; }
.topo nav { display: flex; align-items: center; gap: var(--espaco-6); }
.topo nav a { color: var(--texto-apoio); text-decoration: none; font-size: 16px; }
.topo nav a:hover { color: var(--texto); }
@media (max-width: 760px) { .topo nav a { display: none; } }
.tema {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio-md);
  background: transparent; color: var(--texto-apoio); border: 1px solid var(--borda); cursor: pointer;
}
.tema:hover { color: var(--texto); }
.tema svg { width: 20px; height: 20px; }
[data-theme="escuro"] .tema .sol, [data-theme="claro"] .tema .lua { display: block; }
.tema .sol, .tema .lua { display: none; }

/* Abertura */
.abertura .conteudo {
  display: grid; gap: var(--espaco-7); align-items: center;
  padding-top: var(--espaco-8); padding-bottom: var(--espaco-8);
}
@media (min-width: 960px) { .abertura .conteudo { grid-template-columns: 1.15fr 1fr; } }
.abertura .texto { display: flex; flex-direction: column; gap: var(--espaco-6); }

/* Conversa (mockup do WhatsApp) */
.conversa {
  background-color: var(--conversa-fundo);
  background-image: radial-gradient(color-mix(in srgb, var(--texto) 8%, transparent) 1px, transparent 1.4px);
  background-size: 16px 16px;
  border: 1px solid var(--borda); border-radius: var(--raio-xl); box-shadow: var(--sombra-conversa);
  padding: var(--espaco-5); display: flex; flex-direction: column; gap: 10px;
  max-width: 460px; width: 100%; justify-self: center;
}
.balao { max-width: 88%; padding: 10px 14px; font: var(--text-corpo); }
.balao.recebido { align-self: flex-start; background: var(--balao-recebido); color: var(--balao-recebido-texto); border-radius: var(--raio-sm) var(--raio-balao) var(--raio-balao) var(--raio-balao); }
.balao.enviado {
  align-self: flex-end; background: var(--balao-enviado); color: var(--balao-enviado-texto);
  border-radius: var(--raio-balao) var(--raio-sm) var(--raio-balao) var(--raio-balao);
  display: flex; align-items: flex-end; gap: var(--espaco-2); padding: 8px 12px;
}
.hora { font: var(--text-carimbo-data); color: var(--balao-hora); white-space: nowrap; }
.balao.recebido .hora { color: var(--texto-suave); }
.anexo { display: flex; align-items: center; gap: 10px; }
.selo-pdf { background: var(--verde-vivo); color: var(--grafite); font: var(--text-rotulo-pequeno); font-weight: 700; padding: 4px 6px; border-radius: var(--raio-sm); }

/* Documento e AdesivoAssinatura */
.documento-mini {
  position: relative; background: var(--papel); border-radius: var(--raio-sm);
  padding: var(--espaco-4) var(--espaco-4) var(--espaco-6); margin-top: var(--espaco-2);
  display: flex; flex-direction: column; gap: 7px; min-width: 250px;
}
.documento-mini h4 { margin: 0; font: var(--text-rotulo-pequeno); letter-spacing: 0.06em; color: var(--papel-texto-suave); }
.documento-mini .l { height: 6px; background: var(--papel-linha); border-radius: 2px; }
.documento-mini .assinante { margin-top: 30px; border-top: 1px solid var(--grafite); width: 50%; padding-top: 4px; font: 400 11px var(--font-texto); color: var(--papel-texto-suave); }
.adesivo {
  position: absolute; right: 12px; bottom: 16px; transform: rotate(-6deg);
  display: flex; align-items: center; gap: var(--espaco-2); padding: 6px 12px;
  border: 2.5px solid var(--grafite); border-radius: var(--raio-md); background: rgba(255, 255, 255, 0.85); color: var(--grafite);
}
.adesivo img { width: 28px; height: 28px; }
.adesivo .linhas { display: flex; flex-direction: column; gap: 2px; }
.adesivo .data { font: var(--text-carimbo-data); color: var(--tinta); }

/* Seções */
.secao { padding: 80px 0; border-top: 1px solid var(--borda); }
.secao.superficie { background: var(--superficie); }
.secao .cabeca { display: flex; flex-direction: column; gap: var(--espaco-3); margin-bottom: var(--espaco-7); max-width: 720px; }

/* Como funciona: faixa lateral com 5 passos (PassoComoFunciona) */
.como { background: var(--superficie); border-top: 1px solid var(--borda); }
.como .palco { padding: 80px 0 56px; }
.como .topo-secao { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--espaco-4); }
.como .contador { font: var(--text-rotulo); color: var(--texto-suave); white-space: nowrap; }
.faixa-janela { overflow-x: auto; scroll-snap-type: x mandatory; margin-top: var(--espaco-6); padding-bottom: var(--espaco-2); }
.faixa {
  display: flex; gap: var(--espaco-5); width: max-content;
  padding: 0 max(16px, calc((100vw - 1160px) / 2 + var(--espaco-7)));
}
.passo {
  scroll-snap-align: center; width: 300px; height: 290px; flex: none;
  background: var(--superficie-elevada); border-radius: var(--raio-lg); padding: var(--espaco-5);
  display: flex; flex-direction: column; gap: var(--espaco-3);
}
@media (max-width: 720px) { .passo { width: 85vw; } }
.passo .numero { font: var(--text-rotulo); color: var(--destaque); }
.passo .visual {
  flex: 1; background: var(--conversa-fundo); border-radius: var(--raio-md);
  display: flex; align-items: center; justify-content: center; padding: 0 14px; overflow: hidden;
}
.mini-doc { width: 68px; height: 86px; background: var(--papel); border-radius: var(--raio-sm); padding: 9px; display: flex; flex-direction: column; gap: 5px; }
.mini-doc .selo-pdf { align-self: flex-start; font-size: 10px; padding: 2px 5px; }
.mini-doc i { display: block; height: 4px; background: var(--papel-linha); }
.chips { display: flex; flex-direction: column; gap: var(--espaco-2); width: 100%; }
.chip { display: flex; align-items: center; gap: var(--espaco-2); background: var(--superficie-elevada); color: var(--texto); border-radius: var(--raio-pill); padding: 5px 12px 5px 5px; font-size: 14px; }
.chip em { font: 600 10px var(--font-rotulo); font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--disco); color: #fff; display: grid; place-items: center; }
.passo .balao { font-size: 14px; }
.passo .documento-mini { min-width: 0; width: 100%; transform: scale(0.82); }
.barra { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: var(--espaco-6); }
.barra span { height: 4px; border-radius: 2px; background: var(--borda); transition: background 0.2s; }
.barra span.vista { background: var(--destaque); }

/* Passo 4: três telinhas que se revezam (CPF, selfie com documento, confirmação) */
.passo .visual.telas { position: relative; display: block; padding: 0; }
.telas .tela {
  position: absolute; inset: 0 0 24px; padding: 10px 12px 0; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  opacity: 0; animation: troca-tela 9s infinite;
}
.telas .tela:nth-child(2) { animation-delay: 3s; }
.telas .tela:nth-child(3) { animation-delay: 6s; }
@keyframes troca-tela { 0% { opacity: 0; } 4%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
.telas .balao { font-size: 13px; padding: 7px 10px; max-width: 92%; }
.telas .balao.enviado { gap: 6px; }
.telas .foto { flex-direction: column; align-items: flex-end; gap: 2px; padding: 4px 4px 3px; }
.telas .foto svg { width: 84px; height: auto; display: block; border-radius: 6px; }
.foto-fundo { fill: var(--superficie-elevada); }
.foto-pessoa { fill: var(--texto-suave); }
.foto-documento { fill: var(--papel); stroke: var(--grafite); stroke-width: 1; }
.foto-detalhe { fill: var(--papel-linha); }
.foto-mao { fill: none; stroke: var(--texto-suave); stroke-width: 5; stroke-linecap: round; }
.sem-quebra { white-space: nowrap; }
.revisao { line-height: 1.3; padding-bottom: 0 !important; }
.botao-wa {
  display: block; margin: 6px -10px 0; padding: 6px 0; text-align: center; font-weight: 600;
  border-top: 1px solid var(--borda); color: var(--destaque);
}
.telas .etapas {
  position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 10px;
  font: var(--text-carimbo-data); color: var(--texto-suave);
}
.telas .etapas span { animation: etapa-ativa 9s infinite; }
.telas .etapas span:nth-child(2) { animation-delay: 3s; }
.telas .etapas span:nth-child(3) { animation-delay: 6s; }
@keyframes etapa-ativa { 0%, 33% { color: var(--destaque); } 34%, 100% { color: var(--texto-suave); } }
/* Animações de rolagem (de "Provas que se sustentam" em diante): só com JS e movimento permitido */
.animar .revelar, .animar .em-sequencia > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.animar .revelar.visivel, .animar .em-sequencia.visivel > * { opacity: 1; transform: none; }
.animar .em-sequencia.visivel > *:nth-child(2) { transition-delay: 0.08s; }
.animar .em-sequencia.visivel > *:nth-child(3) { transition-delay: 0.16s; }
.animar .em-sequencia.visivel > *:nth-child(4) { transition-delay: 0.24s; }
.animar .em-sequencia.visivel > *:nth-child(5) { transition-delay: 0.32s; }
.animar .em-sequencia.visivel > *:nth-child(6) { transition-delay: 0.4s; }
/* Cards de provas: cada um entra pela lateral (alternando esquerda e direita) num ponto da rolagem */
.animar .cards-um-a-um > * {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.animar .cards-um-a-um > *:nth-child(odd) { transform: translateX(-90px); }
.animar .cards-um-a-um > *:nth-child(even) { transform: translateX(90px); }
.animar .cards-um-a-um > .visivel { opacity: 1; transform: none; }
#seguranca { overflow-x: clip; }
/* Os adesivos "batem" no lugar, como um carimbo */
.animar .adesivo-figura { transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.5s; }
.animar .cards-um-a-um > :not(.visivel) .adesivo-figura { transform: scale(1.4) rotate(-14deg); }

@media (prefers-reduced-motion: reduce) {
  .telas .tela, .telas .etapas span { animation: none; }
  .telas .tela:nth-child(3) { opacity: 1; }
  .telas .etapas span:nth-child(3) { color: var(--destaque); }
}

/* Com JS e movimento permitido: a página desce e a faixa anda para o lado */
.como.lateral { height: 400vh; }
.como.lateral .palco { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0; overflow: hidden; }
.como.lateral .palco > .conteudo { width: 100%; }
.como.lateral .faixa-janela { overflow: visible; scroll-snap-type: none; }
.como.lateral .faixa { will-change: transform; }

/* Cartões (provas) */
.grade { display: grid; gap: var(--espaco-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cartao { background: var(--superficie-elevada); border-radius: var(--raio-lg); padding: var(--espaco-6) var(--espaco-5); }
.cartao h3 { margin-bottom: var(--espaco-2); }
.cartao p { margin: 0; color: var(--texto-apoio); }
/* Com figura: título e figura na mesma linha, texto embaixo na largura toda */
.cartao.com-figura { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--espaco-4); align-items: start; }
.cartao.com-figura .figura { grid-column: 2; grid-row: 1; width: 68px; margin-bottom: var(--espaco-3); }
.cartao.com-figura h3 { grid-column: 1; grid-row: 1; align-self: center; margin-bottom: var(--espaco-3); }
.cartao.com-figura p { grid-column: 1 / -1; }
.cartao .figura img, .cartao .figura svg { display: block; width: 100%; height: auto; }
/* Adesivo: papel com borda grafite e leve inclinação, como o adesivo de assinatura */
.adesivo-figura { background: var(--papel); border: 2.5px solid var(--grafite); border-radius: var(--raio-md); padding: 4px; }
.adesivo-figura.inclinado { transform: rotate(-6deg); }
.adesivo-figura.inclinado-direita { transform: rotate(5deg); padding: 2px; }
.adesivo-figura svg { border-radius: var(--raio-sm); }
/* Hash: adesivo de um documento assinado */
.doc-assinado { width: 100%; aspect-ratio: 3 / 4; padding: 7px 6px; display: flex; flex-direction: column; gap: 4px; }
.doc-assinado i { display: block; height: 3px; background: var(--papel-linha); border-radius: 1px; }
.doc-assinado .linha-assinatura { margin-top: auto; position: relative; border-top: 1px solid var(--grafite); width: 70%; }
.doc-assinado .linha-assinatura img { position: absolute; right: -14px; bottom: -6px; width: 20px; height: 20px; }
.cartao.com-figura .figura.adesivo-figura:has(.doc-assinado) { width: 58px; padding: 0; }

/* Assinatura digital do PDF: o mesmo adesivo da via assinada, fora do documento */
.cartao.com-figura .figura.figura-adesivo { width: auto; padding-top: 4px; }
.adesivo.solto { position: static; transform: rotate(-6deg); padding: 5px 9px; gap: 6px; }
.adesivo.solto img { width: 22px; height: 22px; }
.adesivo.solto .de-acordo { font-size: 16px; }
.adesivo.solto .data { font-size: 9px; }

/* Trilha de auditoria: escudo com o visto, nas cores do carimbo de cada tema */
.cartao.com-figura .figura.figura-escudo { width: 56px; }
.escudo-corpo { fill: var(--disco); }
.escudo-visto { fill: none; stroke: var(--verde-vivo); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="claro"] .escudo-corpo { fill: var(--papel); stroke: var(--grafite); stroke-width: 3; }
[data-theme="claro"] .escudo-visto { stroke: var(--tinta); }

/* QR Code em forma de carimbo: um pouco maior, sem inclinação (o carimbo nunca gira) */
.cartao.com-figura .figura.figura-carimbo { width: 84px; }
.animar .figura-carimbo { transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.5s, opacity 0.3s ease 0.5s; }
.animar .cards-um-a-um > :not(.visivel) .figura-carimbo { transform: scale(1.5); opacity: 0; }

/* Validade jurídica */
.lei { max-width: 760px; font: var(--text-corpo-grande); color: var(--texto-apoio); margin: 0; }

/* Dúvidas */
.perguntas { max-width: 820px; display: flex; flex-direction: column; gap: var(--espaco-3); }
.perguntas details { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: var(--espaco-4) var(--espaco-5); }
.perguntas summary { font: var(--text-titulo-3); font-size: 19px; cursor: pointer; }
.perguntas details p { color: var(--texto-apoio); margin: var(--espaco-3) 0 0; }

/* Chamada final */
.chamada { background: var(--superficie-elevada); border: 1px solid var(--borda); border-radius: var(--raio-xl); padding: 48px var(--espaco-7); display: grid; gap: var(--espaco-6); align-items: center; }
@media (min-width: 860px) { .chamada { grid-template-columns: auto 1fr auto; } }
.chamada img { width: 96px; height: 96px; }
.chamada p { margin: var(--espaco-2) 0 0; color: var(--texto-apoio); }

/* Rodapé */
.rodape { border-top: 1px solid var(--borda); padding: 32px 0; color: var(--texto-suave); font-size: 15px; }
.rodape .conteudo { display: flex; flex-wrap: wrap; gap: var(--espaco-3) var(--espaco-7); justify-content: space-between; }
.rodape nav { display: flex; gap: var(--espaco-5); flex-wrap: wrap; }
.rodape a { color: var(--texto-apoio); }

/* Páginas de texto (privacidade, termos) */
.texto-legal { max-width: 760px; margin: 0 auto; padding: var(--espaco-8) max(16px, env(safe-area-inset-left)) 80px; }
.texto-legal .atualizado { font: var(--text-rotulo); color: var(--texto-suave); margin: var(--espaco-3) 0 var(--espaco-7); }
.texto-legal h2 { font: var(--text-titulo-3); margin: 40px 0 var(--espaco-2); }
.texto-legal p, .texto-legal li { color: var(--texto-apoio); }
.texto-legal strong { color: var(--texto); }
.texto-legal a { color: var(--destaque); }
.texto-legal table { border-collapse: collapse; width: 100%; font-size: 15px; }
.texto-legal th { font: var(--text-rotulo-pequeno); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); text-align: left; }
.texto-legal th, .texto-legal td { padding: 10px 8px; border-bottom: 1px solid var(--borda); vertical-align: top; text-align: left; }
.tabela { overflow-x: auto; }
.pendente { background: var(--superficie-elevada); color: var(--destaque); border: 1px dashed var(--destaque); border-radius: var(--raio-sm); padding: 0 4px; }