/* ============================================================
   HPLUSON — blocos reutilizados nas paginas internas
   ============================================================ */

/* ---------- capa de pagina interna ---------- */
.capa{padding:clamp(46px,7vw,86px) 0 clamp(40px,6vw,72px)}
.capa .t1{max-width:17ch}
.capa .lead{margin-top:20px}
.migalha{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--tx2);margin:0 0 20px}
.migalha a{text-decoration:none;color:var(--tx2)}
.migalha a:hover{color:var(--acc)}
.migalha span[aria-hidden]{opacity:.5}

/* ---------- cartao de plano ---------- */
.planos{display:grid;gap:clamp(18px,2.4vw,26px);align-items:start}
@media (min-width:900px){ .planos{grid-template-columns:repeat(2,1fr)} }
.plano{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--ln);
  border-radius:var(--raio);padding:clamp(24px,3vw,34px);height:100%}
.plano--destaque{border-color:var(--marinho);border-width:2px;position:relative}
.faixa--escura .plano{background:var(--surf);border-color:var(--ln)}
.faixa--escura .plano--destaque{border-color:var(--ciano)}
.plano__selo{position:absolute;top:-11px;left:clamp(24px,3vw,34px);
  background:var(--marinho);color:#fff;font-size:11px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:5px 11px;border-radius:2px}
.faixa--escura .plano__selo{background:var(--ciano);color:#071026}
.plano__nome{font-size:clamp(20px,2.4vw,25px);font-weight:800}
.plano__formato{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.plano__chamada{margin-top:14px;color:var(--tx2);font-size:15px;line-height:1.55}
.plano__preco{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-top:22px}
.plano__de{font-size:15px;color:var(--tx2);text-decoration:line-through}
.plano__por{font-family:var(--display);font-size:clamp(34px,4.4vw,44px);font-weight:800;
  letter-spacing:-.03em;line-height:1}
.plano__mes{font-size:14px;color:var(--tx2)}
.plano__parcela{margin-top:6px;font-size:13.5px;color:var(--tx2)}
.plano__lista{margin:24px 0 0;display:grid;gap:13px;border-top:1px solid var(--ln);padding-top:22px}
.plano__lista li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--tx2)}
.plano__lista b{color:var(--tx);font-weight:600}
.plano__acao{margin-top:26px;padding-top:0}
.plano .b--larga{margin-top:auto}
.tick{flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--acc);display:grid;place-items:center}
.tick svg{width:10px;height:10px;display:block;stroke:#fff;fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.faixa--escura .tick svg{stroke:#071026}

/* ---------- tabela comparativa ---------- */
.comparar{border:1px solid var(--ln);border-radius:var(--raio);background:var(--bg)}
.comparar table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
.comparar th,.comparar td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--ln);
  vertical-align:top}
.comparar thead th{font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx2);font-weight:600;white-space:nowrap}
.comparar tbody tr:last-child td{border-bottom:0}
.comparar td:first-child,.comparar th:first-child{font-weight:600;color:var(--tx)}
.comparar .sim{color:var(--acc);font-weight:600}
.comparar .nao{color:var(--tx2)}

/* ---------- cartoes genericos ---------- */
.cartao{background:var(--bg);border:1px solid var(--ln);border-radius:var(--raio);
  padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:11px;height:100%}
.faixa--surf .cartao{background:#fff}
.faixa--escura .cartao{background:var(--surf);border-color:var(--ln)}
.cartao h3{font-size:17.5px;font-weight:700}
.cartao p{font-size:14.5px;color:var(--tx2);line-height:1.55}
.cartao__n{font-family:var(--display);font-size:13px;font-weight:700;color:var(--acc);
  letter-spacing:.08em}

/* ---------- passos numerados (sequencia real) ---------- */
.passos{counter-reset:p;display:grid;gap:clamp(20px,3vw,34px)}
@media (min-width:860px){ .passos{grid-template-columns:repeat(2,1fr)} }
.passo{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.passo::before{counter-increment:p;content:counter(p,decimal-leading-zero);
  font-family:var(--display);font-size:14px;font-weight:700;color:var(--acc);
  border:1.5px solid var(--ln-forte);border-radius:50%;width:40px;height:40px;
  display:grid;place-items:center;flex:0 0 auto}
.faixa--escura .passo::before{border-color:var(--ln-forte)}
.passo h3{font-size:18px;font-weight:700;margin-bottom:8px}
.passo p{font-size:14.5px;color:var(--tx2);line-height:1.55}

/* ---------- numeros de prova social ---------- */
.numeros{display:grid;gap:clamp(20px,3vw,32px)}
@media (min-width:640px){ .numeros{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .numeros{grid-template-columns:repeat(4,1fr)} }
.numero__v{font-family:var(--display);font-size:clamp(34px,4.6vw,48px);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--acc)}
.numero__r{margin-top:10px;font-size:14.5px;color:var(--tx2);line-height:1.45;max-width:26ch}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--ln);max-width:78ch}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-weight:600;font-size:16.5px;font-family:var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--acc);border-bottom:2px solid var(--acc);
  transform:translateY(-70%) rotate(45deg);transition:transform .16s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq div.r{padding:0 0 20px;color:var(--tx2);font-size:15px;line-height:1.6;max-width:70ch}
.faq div.r p + p{margin-top:12px}

/* ---------- aviso / lista em atualizacao ---------- */
.aviso{border:1px dashed var(--ln-forte);border-radius:var(--raio);
  padding:clamp(22px,3vw,32px);background:var(--surf);max-width:64ch}
.aviso h3{font-size:18px;font-weight:700;margin-bottom:10px}
.aviso p{color:var(--tx2);font-size:15px;line-height:1.6}
.aviso p + p{margin-top:12px}

/* ---------- lista de aprovados ---------- */
.aprovados{display:grid;gap:10px}
@media (min-width:700px){ .aprovados{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .aprovados{grid-template-columns:repeat(3,1fr)} }
.aprovado{border:1px solid var(--ln);border-radius:var(--raio);padding:15px 17px;background:var(--bg)}
.aprovado b{display:block;font-size:15.5px;font-weight:600}
.aprovado span{display:block;font-size:13.5px;color:var(--tx2);margin-top:3px}

/* ---------- chamada final ---------- */
.final{text-align:center}
.final .t2{max-width:19ch;margin:0 auto}
.final .lead{margin-left:auto;margin-right:auto;text-align:center}
.final .botoes{justify-content:center}

/* ---------- texto legal ---------- */
.legal{max-width:72ch}
.legal h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;margin:38px 0 14px}
.legal h3{font-size:18px;font-weight:700;margin:26px 0 10px}
.legal p,.legal li{color:var(--tx2);font-size:15.5px;line-height:1.65}
.legal p + p{margin-top:13px}
.legal ul{list-style:disc;padding-left:22px;margin:12px 0}
.legal li{margin-bottom:8px}
.legal a{color:var(--acc);font-weight:500}

/* ---------- contato ---------- */
.contato{display:grid;gap:clamp(24px,4vw,48px)}
@media (min-width:900px){ .contato{grid-template-columns:1.1fr .9fr;align-items:start} }
.canal{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--ln)}
.canal:last-child{border-bottom:0}
.canal__i{flex:0 0 auto;width:38px;height:38px;border-radius:var(--raio);
  background:var(--surf);display:grid;place-items:center}
.faixa--escura .canal__i{background:var(--surf)}
.canal__i svg{width:18px;height:18px;stroke:var(--acc);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.canal h3{font-size:16.5px;font-weight:700;margin-bottom:5px}
.canal p{font-size:14.5px;color:var(--tx2);line-height:1.5}
.canal a{color:var(--acc);font-weight:600;text-decoration:none}
.canal a:hover{text-decoration:underline}

/* ---------- 404 ---------- */
.p404{min-height:56vh;display:grid;place-items:center;text-align:center}
.p404 .cod{font-family:var(--display);font-size:clamp(64px,14vw,132px);font-weight:800;
  letter-spacing:-.05em;line-height:1;color:var(--acc)}