/* ============================================================
   BLINDA CNH — Landing CNH Suspensa  (complementa styles.css)
   Identificação · amplificação · prova social · resultado
   ============================================================ */

/* solução: 3 passos centralizados (não 4) */
.steps.s3{grid-template-columns:repeat(3,1fr)}
/* desktop/tablet: número e ícone lado a lado no topo do card */
.steps.s3 .step{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num ic" "title title" "desc desc";column-gap:18px;align-items:center;padding:28px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);position:relative}
.steps.s3 .step .step-n{grid-area:num;font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:700;background:linear-gradient(160deg,var(--gold-bright),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.steps.s3 .step .step-ic{grid-area:ic;justify-self:end;margin:0;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line-strong);color:var(--gold)}
.steps.s3 .step .step-ic svg{width:23px;height:23px}
.steps.s3 .step h3{grid-area:title;margin-top:18px;font-size:1.12rem}
.steps.s3 .step p{grid-area:desc;font-size:.92rem;color:var(--muted)}
@media (max-width:900px){.steps.s3{grid-template-columns:1fr}.steps.s3 .step .connector{display:none}}

:root{
  --cyan:#00D4AA;
  --cyan-soft:rgba(0,212,170,.12);
  --cyan-line:rgba(0,212,170,.34);
}

/* ---------- HERO VISUAL: cartão CNH suspensa ---------- */
.cnh-card .cnh-status{
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-family:'Space Grotesk',sans-serif;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#ff7a69;
}
.cnh-card .cnh-status .d{width:7px;height:7px;border-radius:50%;background:#ff6f5e;box-shadow:0 0 9px rgba(255,111,94,.8)}
.cnh-foot .stat.bad b{color:#ff8676}

/* ---------- IDENTIFICAÇÃO: checklist ---------- */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:34px}
.check{
  display:flex;gap:15px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s,background .3s;
}
.check:hover{transform:translateY(-4px);border-color:var(--gold-line);background:var(--glass-2)}
.check .ck{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold)}
.check .ck svg{width:17px;height:17px}
.check p{font-size:1rem;color:var(--text);font-weight:500;line-height:1.4}
.check-note{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;text-align:center;margin-bottom:30px}
.check-note p{font-style:italic;color:var(--muted);font-size:1.06rem}
.id-cta{display:flex;justify-content:center}

/* ---------- AMPLIFICAÇÃO: consequências ---------- */
.cons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cons{
  position:relative;overflow:hidden;padding:30px 28px;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(226,80,60,.07),rgba(255,255,255,.02));
  border:1px solid rgba(226,80,60,.18);
  transition:transform .3s var(--ease),border-color .3s;
}
.cons:hover{transform:translateY(-5px);border-color:rgba(226,80,60,.36)}
.cons .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(226,80,60,.14);border:1px solid rgba(226,80,60,.3);color:#ff7a69}
.cons .ic svg{width:25px;height:25px}
.cons h3{font-size:1.12rem;margin-bottom:8px;color:#fff}
.cons p{font-size:.95rem;color:var(--muted);line-height:1.55}

/* ---------- PROVA SOCIAL ---------- */
.proof-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:clamp(40px,5vw,60px);
}
.pstat{
  text-align:center;padding:28px 20px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--line);
}
.pstat .num{
  font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1;
  font-size:clamp(2.1rem,4.6vw,3rem);
  background:linear-gradient(160deg,var(--gold-bright),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pstat .lab{margin-top:12px;color:var(--muted);font-size:.96rem;font-weight:500}

.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:clamp(32px,4vw,44px)}
.tcard{
  display:flex;flex-direction:column;gap:14px;padding:28px 26px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s,background .3s;
}
.tcard:hover{transform:translateY(-5px);border-color:var(--gold-line);background:var(--glass-2)}
.tcard .who{display:flex;align-items:center;gap:13px}
.tcard .av{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.02rem;color:#1a1303;
  background:linear-gradient(160deg,var(--gold-bright),var(--gold-deep));
}
.tcard .who b{display:block;font-family:'Space Grotesk',sans-serif;font-size:.98rem;color:#fff;font-weight:600}
.tcard .who span{font-size:.82rem;color:var(--muted-dim)}
.tcard .stars{display:flex;gap:3px;color:var(--gold)}
.tcard .stars svg{width:16px;height:16px}
.tcard .quote{font-size:.98rem;color:var(--text);line-height:1.6}

.badges{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.rbadge{
  display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:100px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.04em;
  color:var(--cyan);background:var(--cyan-soft);border:1px solid var(--cyan-line);
}
.rbadge svg{width:18px;height:18px}

@media (max-width:960px){
  .cons-grid{grid-template-columns:1fr}
  .proof-stats{grid-template-columns:repeat(3,1fr);gap:14px}
  .tgrid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .check-grid{grid-template-columns:1fr}
  .proof-stats{grid-template-columns:1fr}
}

/* ---------- Mobile hardening (added) ---------- */
@media (max-width:640px){
  .check{padding:18px 18px}
  .check p{font-size:.94rem}
  .cons{padding:24px 22px}
  .pstat{padding:22px 16px}
  .tcard{padding:24px 22px}
}

/* ---------- Steps: layout mobile mais equilibrado ---------- */
@media (max-width:900px){
  .steps.s3 .step{padding:22px 22px 24px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num ic" "title title" "desc desc";column-gap:16px;row-gap:6px;align-items:center}
  .steps.s3 .step .step-n{grid-area:num;font-size:2rem}
  .steps.s3 .step .step-ic{grid-area:ic;justify-self:end;width:42px;height:42px;margin:0}
  .steps.s3 .step .step-ic svg{width:20px;height:20px}
  .steps.s3 .step h3{grid-area:title;margin-top:10px;margin-bottom:4px}
  .steps.s3 .step p{grid-area:desc}
}

/* ---------- Fixes: disclaimer icon + footer no mobile ---------- */
@media (max-width:640px){
  /* icone do disclaimer do quiz alinhado ao topo do texto multilinha */
  .quiz-disclaimer{align-items:flex-start;text-align:left;gap:10px;padding:0 6px}
  .quiz-disclaimer svg{margin-top:3px}

  /* footer: empilhar marca e contato, reduzir logo */
  .footer .footer-grid{flex-direction:column !important;align-items:flex-start !important;gap:24px !important;text-align:left}
  .footer .footer-brand{flex-direction:column !important;align-items:flex-start !important;gap:14px !important}
  .footer .footer-brand img{width:72px !important;height:72px !important}
  .footer .footer-brand p{max-width:100% !important;font-size:.94rem;line-height:1.55}
  .footer .footer-contact{width:100%}
}