/* =========================================================
   PrecNet — LP Credor: componentes novos em relação à antecipe.
   Formulário de captação, fachada de vídeo e banner de consentimento.
   Usa os tokens de styles.css; nada aqui redefine a paleta.
   ========================================================= */

/* ---------- utilitários ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Honeypot: fora da tela, fora da ordem de tabulação, invisível para leitor
   de tela. Só um robô que preenche tudo cai nele. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ---------- cartão do formulário ---------- */
.form-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(20px,3vw,30px);
  box-shadow:var(--shadow);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  align-self:start;
  position:relative;
  scroll-margin-top:100px;
}

.form-title{
  font-size:clamp(20px,2.2vw,25px);
  margin:0 0 .25em;
}
.form-title strong{ color:var(--green-200); }

.form-sub{
  color:var(--text-soft);
  font-size:.92rem;
  margin:0 0 22px;
}

/* ---------- indicador de passos ---------- */
.form-steps{
  display:flex; align-items:center; gap:8px;
  list-style:none; margin:0 0 22px; padding:0;
}
.form-steps li{
  flex:1; display:flex; align-items:center; gap:8px;
  color:var(--text-dim); font-size:.8rem; font-weight:600;
}
.form-steps li span{
  display:grid; place-items:center;
  width:28px; height:28px; flex:0 0 28px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:var(--surface-2);
  transition:all .25s var(--ease);
}
.form-steps li::after{
  content:""; flex:1; height:2px; background:var(--line); border-radius:2px;
}
.form-steps li:last-child::after{ display:none; }
.form-steps li.is-active span{
  border-color:var(--green-400); color:var(--white); background:var(--green-600);
}
.form-steps li.is-done span{
  border-color:var(--green-400); background:var(--green-400); color:#0b2c0b;
}
.form-steps li.is-done::after{ background:var(--green-600); }

/* ---------- passos ---------- */
.form-passo{
  display:none;
  border:0; padding:0; margin:0; min-inline-size:0;
}
.form-passo.is-active{
  display:block;
  animation:passoEntra .3s var(--ease) both;
}
@keyframes passoEntra{
  from{ opacity:0; transform:translateX(10px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .form-passo.is-active{ animation:none; }
}

/* ---------- campos ---------- */
.campo{ margin-bottom:16px; }
.campo label{
  display:block;
  font-size:.85rem; font-weight:600;
  color:var(--text-soft);
  margin-bottom:6px;
}
.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select{
  width:100%;
  padding:12px 14px;
  background:var(--bg-alt);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font:inherit;
  font-size:.95rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.campo select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238A908A'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:22px;
  padding-right:38px;
  cursor:pointer;
}
.campo input::placeholder{ color:var(--text-dim); }
.campo input:focus-visible,
.campo select:focus-visible{
  outline:none;
  border-color:var(--green-400);
  box-shadow:0 0 0 3px rgba(80,162,80,.22);
}
.campo input.tem-erro,
.campo select.tem-erro{ border-color:#E06666; }

.erro{
  display:none;
  margin:6px 0 0;
  font-size:.8rem;
  color:#F0A0A0;
}
.erro.is-visivel{ display:block; }

/* ---------- aceite ---------- */
.campo-aceite{ margin:18px 0 20px; }
.aceite{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.83rem; font-weight:400;
  color:var(--text-soft);
  line-height:1.5;
  cursor:pointer;
  margin:0;
}
.aceite input[type="checkbox"]{
  flex:0 0 18px;
  width:18px; height:18px;
  margin-top:2px;
  accent-color:var(--green-400);
  cursor:pointer;
}
.aceite a{
  color:var(--green-200);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ---------- navegação do formulário ---------- */
.form-nav{
  display:flex; gap:10px; margin-top:20px;
}
.form-nav .btn{ flex:1; justify-content:center; }
.form-nav .btn-ghost{ flex:0 0 auto; }

.form-erro-geral{
  margin:16px 0 0; padding:11px 14px;
  background:rgba(224,102,102,.12);
  border:1px solid rgba(224,102,102,.35);
  border-radius:var(--radius);
  color:#F0A0A0;
  font-size:.85rem;
}

.form-rodape{
  margin:18px 0 0;
  font-size:.75rem;
  color:var(--text-dim);
  line-height:1.5;
}
.form-rodape a{ color:var(--text-soft); text-decoration:underline; }

/* ---------- sucesso ---------- */
.form-sucesso{
  text-align:center;
  padding:20px 0 6px;
  animation:passoEntra .35s var(--ease) both;
}
.form-sucesso svg{
  color:var(--green-400);
  margin:0 auto 12px;
}
.form-sucesso h3{
  font-size:1.25rem;
  margin-bottom:.4em;
}
.form-sucesso p{
  color:var(--text-soft);
  font-size:.9rem;
  margin-bottom:18px;
}

/* ---------- fachada do vídeo ---------- */
.video-section .section-head{ text-align:center; }
.video-facade{
  position:relative;
  aspect-ratio:16 / 9;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-alt);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.video-facade iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}
.video-play{
  display:block; width:100%; height:100%;
  padding:0; border:0; background:none;
  cursor:pointer; position:relative;
}
.video-play img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.video-play:hover img{ transform:scale(1.03); opacity:.8; }
.video-play-icon{
  position:absolute; inset:0; margin:auto;
  width:76px; height:76px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--green-600);
  color:var(--white);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.video-play:hover .video-play-icon{
  transform:scale(1.08);
  background:var(--green-500);
}
.video-play-icon svg{ width:34px; height:34px; margin-left:4px; }
.video-play:focus-visible{ outline:3px solid var(--green-200); outline-offset:3px; }

/* ---------- banner de consentimento ---------- */
.consent{
  position:fixed; inset:auto 0 0 0;
  z-index:60;
  background:var(--surface);
  border-top:2px solid var(--green-600);
  box-shadow:0 -14px 40px rgba(0,0,0,.5);
  padding:18px var(--pad);
  transform:translateY(110%);
  transition:transform .35s var(--ease);
}
.consent.is-visivel{ transform:none; }
.consent-inner{
  max-width:var(--wrap); margin:0 auto;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.consent-texto{ flex:1 1 380px; }
.consent-texto h2{
  font-size:1rem; margin:0 0 .35em;
}
.consent-texto p{
  margin:0; font-size:.83rem; color:var(--text-soft); line-height:1.55;
}
.consent-texto a{ color:var(--green-200); text-decoration:underline; }
.consent-acoes{
  display:flex; gap:10px; flex-wrap:wrap;
}
.consent-acoes .btn{ white-space:nowrap; }

.consent-detalhes{
  flex:1 1 100%;
  margin-top:6px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.consent-detalhes[hidden]{ display:none; }
.consent-cat{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0;
  font-size:.83rem;
  border-bottom:1px solid var(--line);
}
.consent-cat:last-child{ border-bottom:0; }
.consent-cat input{
  flex:0 0 18px; width:18px; height:18px; margin-top:2px;
  accent-color:var(--green-400);
}
.consent-cat input:disabled{ opacity:.5; }
.consent-cat strong{ display:block; }
.consent-cat span{ color:var(--text-dim); }

/* Reabre as preferências depois de decidido. */
.consent-revisit{
  position:fixed; left:16px; bottom:16px; z-index:55;
  width:42px; height:42px;
  display:none; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  background:var(--surface); color:var(--text-soft);
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.consent-revisit.is-visivel{ display:grid; }
.consent-revisit svg{ width:20px; height:20px; }

@media (max-width: 720px){
  /* Em 375px os três botões numa linha só ficavam com ~110px cada e o
     "Aceitar tudo" quebrava para baixo, onde o CTA fixo o encobria.
     Aqui a ação primária ganha a linha inteira e vem primeiro. */
  .consent{ max-height:86vh; overflow-y:auto; }
  .consent-acoes{ width:100%; }
  .consent-acoes .btn{ flex:1 1 calc(50% - 5px); justify-content:center; }
  .consent-acoes [data-aceitar]{ flex:1 1 100%; order:-1; }
  .consent-revisit{ bottom:auto; top:80px; }
}

/* ---------- ajustes do hero com formulário ---------- */
@media (min-width: 981px){
  .hero-inner{ align-items:start; }
}

/* ---------- Prova social ----------
   Substitui a faixa de texto verde. O selo do Reclame Aqui e o embed oficial,
   entao mostra o estado verificado de verdade — nao uma imagem que envelhece
   sem ninguem perceber. As estrelas ficam douradas porque e assim que o Google
   as mostra; verde aqui leria como enfeite, nao como avaliacao. */
.proof{
  background:
    radial-gradient(120% 140% at 15% 0%, var(--green-600) 0%, transparent 60%),
    linear-gradient(135deg, var(--green-800) 0%, var(--green-900) 55%, #062f06 100%);
  padding-block:clamp(30px,4.5vw,54px);
  border-block:1px solid rgba(255,255,255,.07);
}
.proof-inner{ text-align:center; }

.proof-head{ max-width:640px; margin:0 auto clamp(22px,3vw,32px); }
.proof-head h2{
  font-size:clamp(21px,2.6vw,30px);
  color:var(--white);
  margin:0 0 .3em;
}
.proof-head h2 strong{ color:var(--green-100); }
.proof-head p{
  margin:0;
  color:#BFDCBF;
  font-size:.95rem;
}

.proof-cards{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  max-width:760px; margin:0 auto;
}
.proof-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  padding:22px 20px;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  backdrop-filter:blur(2px);
}
.proof-card-link{
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.proof-card-link:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(0,0,0,.36);
  transform:translateY(-2px);
}
.proof-card-link:focus-visible{ outline:3px solid var(--green-100); outline-offset:3px; }

/* O widget do Reclame Aqui vem com arte sobre fundo claro. */
.proof-selo{
  background:var(--white);
  border-radius:6px;
  padding:8px;
  min-height:96px;
  display:grid; place-items:center;
  min-width:150px;
}
.proof-selo img,
.proof-selo iframe{ max-width:100%; }

.proof-label{
  margin:0;
  font-size:.95rem;
  color:#D9EDD9;
  line-height:1.45;
}
.proof-label strong{ color:var(--white); }

.stars-lg svg{ width:32px; height:32px; }

.proof-cta{
  font-size:.88rem; font-weight:600; color:var(--white);
  border-bottom:2px solid rgba(255,255,255,.45);
  padding-bottom:2px;
}
.proof-card-link:hover .proof-cta{ border-color:var(--white); }

.proof-foot{
  margin:clamp(20px,3vw,28px) auto 0;
  max-width:60ch;
  font-size:.93rem;
  color:#BFDCBF;
}
.proof-foot strong{ color:var(--white); }

/* ---------- Convivencia entre o banner de consentimento e o CTA fixo ----------
   Os dois sao position:fixed no rodape. O .sticky-cta tem z-index 70 e estava
   cobrindo a linha de botoes do banner — no mobile, o "Aceitar tudo" sumia
   atras dele. Enquanto ha decisao pendente, o CTA fixo sai de cena: uma
   decisao de cada vez. */
.consent{ z-index:90; }
body.tem-consentimento-aberto .sticky-cta{
  transform:translateY(110%);
  pointer-events:none;
}

/* ---------- /consulta/: telas e bloco de dados do processo ---------- */
.consulta-tela[hidden]{ display:none; }
.consulta-tela.is-ativa{ animation:passoEntra .35s var(--ease) both; }

.dados-processo{
  margin:0 0 24px;
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--green-400);
  border-radius:var(--radius);
}
.dados-processo > div{
  display:flex; flex-wrap:wrap; gap:6px 10px;
  padding:6px 0;
  border-bottom:1px solid var(--line);
}
.dados-processo > div:last-child{ border-bottom:0; }
.dados-processo dt{
  color:var(--text-soft);
  font-size:.85rem;
  min-width:150px;
}
.dados-processo dd{
  margin:0;
  font-weight:700;
  font-size:.95rem;
  word-break:break-word;
}

@media (max-width: 560px){
  .dados-processo dt{ min-width:100%; }
}

/* ---------- /consulta/: a tela 1 não tem par ----------
   O hero é um grid de duas colunas porque na LP principal a segunda é o
   formulário. Na tela 1 da consulta o formulário ainda não apareceu, então a
   segunda coluna ficava vazia: ~480px de nada à direita, espremendo o texto
   numa coluna estreita e empurrando o botão para baixo da dobra.

   Na etapa 1 o hero vira uma coluna só, centrada e com medida de leitura
   confortável. Na etapa 2 as duas colunas voltam, agora com o formulário. */
.consulta-hero[data-etapa="1"]{
  grid-template-columns:minmax(0, 860px);
  justify-content:center;
}
.consulta-hero[data-etapa="1"] .hero-copy h1{ max-width:20ch; }
.consulta-hero[data-etapa="1"] .lead,
.consulta-hero[data-etapa="1"] .hero-copy p{ max-width:68ch; }

/* O CTA da tela 1 precisa estar visível sem rolagem: é o único caminho adiante. */
.consulta-hero[data-etapa="1"] .hero-cta{ margin-top:28px; }

@media (max-width: 980px){
  .consulta-hero[data-etapa="1"]{ grid-template-columns:1fr; }
}

/* A pergunta da tela 1 carrega o nome do requerido e pode ficar longa; um
   corpo um pouco menor mantém o CTA acima da dobra sem perder o impacto. */
.consulta-hero[data-etapa="1"] .hero-copy h1{
  font-size:clamp(1.75rem,3.4vw,2.7rem);
  margin-bottom:16px;
}
.consulta-hero[data-etapa="1"] .hero-trust{ margin-top:26px; }