/* Estilos próprios do site vozara.com.br — só o que a biblioteca não tem.
 * Mesma regra do design system: nenhuma cor, px ou fonte crua; tudo via var(--…)
 * (tests/test_site.php roda o lint de aderência sobre este arquivo). */

/* CTA do hero: botões + micro-copy abaixo (Sugarman: reduzir ansiedade junto do botão). */
.site-ctas{gap:var(--space-3)}

.site-stake{align-items:baseline;flex-wrap:nowrap}
.site-fracasso{max-width:var(--measure);padding-left:var(--space-4);border-left:var(--border-thick) solid var(--vz-coral)}
.site-fecho{max-width:var(--vz-measure-lead);font-family:var(--font-display);font-size:var(--text-h4);line-height:var(--leading-snug);color:var(--text-primary)}
.site-argumento{font-family:var(--font-display);font-size:var(--text-h4);line-height:var(--leading-snug);color:var(--text-primary)}

/* Linha do tempo "Na prática": marcador redondo + fio vertical ligando as etapas. */
.site-ciclo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-8);position:relative}
.site-ciclo::before{content:"";position:absolute;left:calc(var(--vz-size-iconbtn-md) / 2 - var(--border-hair));top:var(--space-2);bottom:var(--space-2);width:var(--border-thick);background:var(--border-subtle)}
.site-ciclo__item{position:relative;display:grid;grid-template-columns:var(--vz-size-iconbtn-md) minmax(0,1fr);gap:var(--space-5);align-items:start}
.site-ciclo__marca{
  display:grid;place-items:center;width:var(--vz-size-iconbtn-md);height:var(--vz-size-iconbtn-md);
  border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--text-accent);
  border:var(--border-hair) solid var(--border-glass);box-shadow:var(--shadow-sm);position:relative;z-index:1;
}
.site-ciclo__num{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.site-ciclo__titulo{margin:var(--space-1) 0 var(--space-2);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-h4);line-height:var(--leading-snug);color:var(--text-primary)}
.site-sticky{align-self:start}
@media (min-width:47.5625em){.site-sticky{position:sticky;top:calc(var(--space-24) + var(--space-4))}}

/* "Na prática": linha do tempo à esquerda, celular com a conversa à direita (fica parado ao rolar). */
.site-pratica{display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr) minmax(0,var(--vz-device-phone-w));align-items:start}
.site-pratica__celular{position:sticky;top:calc(var(--space-24) + var(--space-4))}
@media (max-width:60em){
  .site-pratica{grid-template-columns:minmax(0,1fr)}
  .site-pratica__celular{position:static}
}

/* Diagrama do ciclo + fecho + CTA sob os 3 passos, num painel SÓLIDO sobre a onda: vidro forte com o
   mesmo desfoque dos cards dos passos (vz-step), e um fundo escuro por baixo como garantia onde o
   navegador não suporta backdrop-filter — a malha nunca passa atrás do texto. */
.site-diagrama{
  padding:var(--space-8);border-radius:var(--radius-xl);border:var(--border-hair) solid var(--border-glass);
  background:linear-gradient(var(--surface-glass-strong),var(--surface-glass-strong)),var(--vz-ink-2);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}
.site-diagrama__fecho{
  display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;justify-content:space-between;
  margin-top:var(--space-8);padding-top:var(--space-8);border-top:var(--border-hair) solid var(--border-glass);
}
.site-diagrama__fecho .site-fecho{flex:1 1 var(--vz-grid-min-2xl)}
@media (max-width:47.5em){.site-diagrama{padding:var(--space-6) var(--space-4)}}

/* Painel real: capturas uma embaixo da outra, na largura do contêiner — lado a lado o texto das telas
   caía para ~7px e virava textura (revisão de lançamento 2026-09-29). Imagens recortadas na área útil. */
.site-painel{display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr)}
.site-painel__nota{text-align:center}

.site-tambem{gap:var(--space-2)}

/* "Para quem é": exemplos de ramos + fecho para quem não se achou na lista. */
.site-exemplos__fecho{
  display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;justify-content:space-between;
  padding:var(--space-6);border-radius:var(--radius-lg);background:var(--surface-glass);border:var(--border-hair) solid var(--border-glass);
}
.site-exemplos__fecho > div{flex:1 1 var(--vz-grid-min-xl)}

/* Listas com ícone (quem faz o quê, contrapartidas, confiança). */
.site-lista{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.site-lista__item{flex-wrap:nowrap;align-items:flex-start;gap:var(--space-3);color:var(--text-secondary);line-height:var(--leading-body)}
.site-lista__item .vz-icon{margin-top:var(--vz-gap-2xs)}

.site-link-seta{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-link)}
.vz-card--interactive:hover .site-link-seta{color:var(--interactive-hover-soft)}

/* Seção final: painel petróleo com o texto de um lado e o formulário do outro. */
.site-conversa{align-items:flex-start}
.site-conversa__form{flex:1 1 var(--vz-cta-heading-basis);min-width:0;max-width:var(--vz-width-dialog)}
.site-form{padding:var(--space-8);border-radius:var(--radius-xl);background:var(--surface-raised);border:var(--border-hair) solid var(--border-glass)}
.site-form__ok{padding:var(--space-8);border-radius:var(--radius-xl);background:var(--surface-raised);border:var(--border-hair) solid var(--border-glass)}
.site-form__ok:focus{outline:none}
/* Honeypot: fora da tela para gente e leitor de tela (aria-hidden), mas presente para robô. */
.site-form__isca{position:absolute;left:-100vw;width:var(--border-hair);height:var(--border-hair);overflow:hidden}
#conversa-erros{width:100%;margin-bottom:var(--space-4)}
@media (max-width:47.5em){
  .site-form,.site-form__ok{padding:var(--space-5)}
}

/* ── Revisão de lançamento (2026-09-29) ── */

/* Recursos: 8 cards em 4+4 (o auto-fill fazia 5+3 com buraco); 2 colunas no meio. */
@media (min-width:40em){.site-recursos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.site-recursos{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* FAQ: pergunta longa em CAIXA-ALTA cansa e quebra em 3 linhas no celular — caixa normal, cor de texto. */
.site-faq .vz-accordion__q{text-transform:none;letter-spacing:normal;color:var(--text-primary);line-height:var(--leading-snug)}

/* Micro-copy sob os botões do hero: passava sobre a malha animada; ganha um fundo de vidro. */
.vz-hero .site-ctas .vz-caption{
  align-self:flex-start;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);
  color:var(--text-secondary);background:var(--surface-glass-strong);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}

/* "O que acontece depois" ao lado do formulário. */
.site-depois__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.site-depois__item{display:grid;grid-template-columns:var(--vz-size-iconbtn-md) minmax(0,1fr);gap:var(--space-4);align-items:center;color:var(--text-secondary);line-height:var(--leading-body)}
.site-depois__marca{
  display:grid;place-items:center;width:var(--vz-size-iconbtn-md);height:var(--vz-size-iconbtn-md);
  border-radius:var(--radius-pill);background:var(--surface-glass-strong);color:var(--text-accent);border:var(--border-hair) solid var(--border-glass);
}