/* ============================================================
   BLINDA CNH — Landing CNH Provisória (PPD em risco)
   Complementa styles.css + cnh-cassada.css
   Público duplo: jovem motorista (urgência) + pais (confiança)
   ============================================================ */

:root{
  --cyan:#00D4AA;
  --cyan-soft:rgba(0,212,170,.12);
  --cyan-line:rgba(0,212,170,.34);
  --alert:#ff6f5e;
  --alert-soft:rgba(226,80,60,.12);
  --alert-line:rgba(226,80,60,.28);
}

/* superfície alternada (igual cnh-cassada) */
.section.alt{
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section{padding:clamp(64px,9vw,118px) 0}

/* header só com logo + CTA (sem navegação) */
.header-cta .btn-gold{padding:13px 22px;font-size:.94rem}

/* hero highlight em risco */
.hero h1 .risk-hl{color:var(--gold);white-space:nowrap}
.hero-mini .m.parent svg{color:var(--cyan)}

/* ============================================================
   HERO VISUAL — carteira PPD com escudo de proteção
   ============================================================ */
.ppd-visual{position:relative;perspective:1200px}
.ppd-visual::before{content:"";position:absolute;inset:-14% -10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(195,146,28,.20),transparent 72%);filter:blur(8px)}

/* faixa "validade 1 ano" dentro do card */
.ppd-meter{margin-top:16px;padding-top:15px;border-top:1px dashed var(--line-strong)}
.ppd-meter .pm-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.ppd-meter .pm-head .lab{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dim)}
.ppd-meter .pm-head b{font-family:'Space Grotesk',sans-serif;font-size:.82rem;color:var(--gold-bright);letter-spacing:.04em}
.ppd-meter .pm-track{height:8px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden}
.ppd-meter .pm-fill{height:100%;width:64%;border-radius:100px;
  background:linear-gradient(90deg,var(--gold),var(--alert));}
.ppd-meter .pm-note{margin-top:9px;font-size:.68rem;color:var(--alert);display:flex;align-items:center;gap:6px}
.ppd-meter .pm-note svg{width:13px;height:13px;flex:none}

/* badge "PPD protegida" flutuante */
.ppd-shield{
  position:absolute;top:-24px;right:-20px;z-index:4;width:88px;height:100px;
  display:grid;place-items:center;color:var(--gold);
  filter:drop-shadow(0 16px 26px rgba(195,146,28,.42));
  animation:floaty 6s ease-in-out infinite;
}
.ppd-shield svg.sh{width:100%;height:100%}
.ppd-shield .chk{position:absolute;color:#fff;width:32px;height:32px}

/* toast de alerta de prazo */
.ppd-toast{
  position:absolute;left:-30px;bottom:30px;z-index:4;width:248px;
  display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border-radius:16px;
  background:rgba(12,16,30,.88);border:1px solid var(--line-strong);
  backdrop-filter:blur(14px);box-shadow:var(--shadow);
  animation:floaty 6s ease-in-out infinite .8s;
}
.ppd-toast .ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--alert-soft);color:var(--alert)}
.ppd-toast .ic svg{width:21px;height:21px}
.ppd-toast .tx b{display:block;font-family:'Space Grotesk',sans-serif;font-size:.86rem;color:#fff;margin-bottom:3px}
.ppd-toast .tx span{font-size:.76rem;color:var(--muted);line-height:1.4;display:block}

/* ============================================================
   IDENTIFICAÇÃO (reusa .check-grid de cnh-cassada) — 5º item full
   ============================================================ */
.check-grid.five .check:last-child{grid-column:1 / -1}

/* ============================================================
   POR QUE É SÉRIO — 3 cards (reusa .know de cnh-cassada)
   ============================================================ */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* ============================================================
   SOLUÇÃO — 3 passos (grid de 3, não 4)
   ============================================================ */
.steps.s3{grid-template-columns:repeat(3,1fr)}
.steps.s3 .step .connector{top:46px}

/* ============================================================
   FAIXA DE TRANQUILIDADE PARA OS PAIS (dual-audience)
   ============================================================ */
.parent-strip{
  display:flex;align-items:center;gap:20px;
  max-width:760px;margin:36px auto 0;padding:22px 26px;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(0,212,170,.06),rgba(255,255,255,.02));
  border:1px solid var(--cyan-line);
}
.parent-strip .ps-ic{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--cyan-soft);border:1px solid var(--cyan-line);color:var(--cyan)}
.parent-strip .ps-ic svg{width:25px;height:25px}
.parent-strip p{font-size:.98rem;color:var(--text);line-height:1.5}
.parent-strip p b{color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600}

@media (max-width:960px){
  .why-grid{grid-template-columns:1fr}
  .steps.s3{grid-template-columns:1fr;gap:18px}
  .steps.s3 .step .connector{display:none}
  .ppd-visual{max-width:420px;margin:0 auto}
}
@media (max-width:640px){
  .check-grid.five .check:last-child{grid-column:auto}
  .parent-strip{flex-direction:column;text-align:center;gap:14px}
  .ppd-shield{right:0;top:-16px;width:72px;height:82px}
  .ppd-toast{left:-8px;width:214px}
}


/* ---------- Mobile hardening (updated) ---------- */
@media (max-width:960px){
  /* Seção Hero - Ajustes para Tablet/Mobile */
  .hero-grid{grid-template-columns:1fr 0.8fr;gap:40px;align-items: center;}
  .hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align: left;}
  .hero-copy .support{margin-left:0;border-left:2px solid var(--gold-line);border-top:none;padding-left:16px;padding-top:0;text-align:left}
  
  /* CNH Card Mobile */
  .cnh-card{transform:scale(0.85);transform-origin: right center;margin:0;max-width:100%;background:linear-gradient(135deg,#121a30,#0a0f1d);border:1px solid rgba(255,255,255,.1)}
  .ppd-visual::before{inset:-10%;opacity:.5}
  
  /* Linhas e detalhes do cartão (recuperando visual) */
  .cnh-card .cnh-body{display:flex;gap:20px;padding:24px}
  .cnh-card .cnh-lines{flex:1;display:flex;flex-direction:column;gap:12px}
  .cnh-card .cnh-lines .lab{font-size:.6rem;text-transform:uppercase;color:rgba(255,255,255,.4);letter-spacing:.08em;margin-bottom:4px;text-align:left}
  .cnh-card .cnh-lines .bar{height:4px;background:rgba(255,255,255,.08);border-radius:10px}
  .cnh-card .cnh-lines .bar.w1{width:80%}
  .cnh-card .cnh-lines .bar.w2{width:40%}
  .cnh-card .cnh-lines .bar.w3{width:60%}
  
  /* Toast e Shield */
  .ppd-toast{position:absolute;left:-40px;bottom:10px;margin:0;width:220px;text-align:left; transform: scale(0.9); z-index: 5;}
  .ppd-shield{display:block; transform: scale(0.8); right: -10px; top: -15px;}
}

@media (max-width:640px){
  .hero-grid{grid-template-columns: 1fr; text-align: center;}
  .hero-copy{align-items: center; text-align: center;}
  .hero-copy .support{border-left: none; border-top: 2px solid var(--gold-line); padding-left: 0; padding-top: 16px; text-align: center;}
  .cnh-card{transform: none; transform-origin: center; margin: 0 auto;}
  .ppd-toast{position:relative; left: auto; bottom: auto; margin: 24px auto 0; width: 100%; max-width: 320px; transform: none;}
  .ppd-shield{display: none;}
  .hero-copy h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .hero-actions{width:100%}
  .hero-actions .btn{width:100%}
  
  .parent-strip{flex-direction:column;text-align:center;gap:14px;padding:20px}
  .check-grid.five .check:last-child{grid-column:auto}
}

/* ---------- Footer: igual CNH Suspensa em mobile e tablet ---------- */
@media (max-width:900px){
  .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}
}

/* ============================================================
   CTA FINAL (Estilo Recurso de Multa - Sem fundo amarelo)
   ============================================================ */
.cta-final{padding:clamp(64px,9vw,118px) 0;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.cta-box{max-width:820px;margin:0 auto;text-align:center}

.cta-final .eyebrow{margin-bottom:12px;display:inline-flex}
.cta-final h2{font-size:clamp(1.85rem,4.2vw,3rem);margin:16px 0 20px;color:var(--white)}
.cta-final p{font-size:1.1rem;color:var(--muted);line-height:1.6;margin-bottom:38px}

.cta-actions{display:flex;justify-content:center;gap:16px}
.cta-final .btn-gold{padding:18px 34px;font-size:1.06rem}
.cta-final .btn-ghost{padding:18px 34px;font-size:1.06rem}

@media (max-width:640px){
  .cta-actions{flex-direction:column;padding:0 24px}
  .cta-actions .btn{width:100%}
}