/* ============================================================
   HPLUSON — home
   ============================================================ */

.hero{background:#0B1038;color:#E8ECFF;padding:clamp(52px,8vw,104px) 0 clamp(48px,7vw,92px);
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -55% 55%;height:70%;
  background:radial-gradient(closest-side,rgba(0,255,233,.16),transparent 72%);
  pointer-events:none}
.hero__in{position:relative;z-index:1;display:grid;gap:clamp(34px,5vw,60px)}
@media (min-width:980px){ .hero__in{grid-template-columns:1.08fr .92fr;align-items:center} }
.hero .olho{color:#00FFE9}
.hero h1{font-size:clamp(33px,6.2vw,60px);font-weight:800;letter-spacing:-.03em;max-width:15ch}
.hero h1 em{font-style:normal;color:#00FFE9}
.hero__lead{margin-top:20px;font-size:clamp(16.5px,1.7vw,19.5px);color:#9AA6D6;max-width:48ch;
  line-height:1.55}
.hero__selos{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;
  font-size:13.5px;color:#9AA6D6}
.hero__selos li{display:flex;align-items:center;gap:8px}
.hero__selos svg{width:15px;height:15px;stroke:#00FFE9;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* cartao de oferta dentro do hero — o unico bloco de preco acima da dobra */
.oferta{background:#151D57;border:1px solid #2B3579;border-radius:var(--raio);
  padding:clamp(24px,3.2vw,34px)}
.oferta__topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.oferta__topo h2{font-size:19px;font-weight:800;letter-spacing:-.015em;color:#E8ECFF}
.oferta__tag{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:#071026;background:#00FFE9;padding:4px 9px;border-radius:2px}
.oferta__preco{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-top:20px}
.oferta__de{font-size:15px;color:#9AA6D6;text-decoration:line-through}
.oferta__por{font-family:var(--display);font-size:clamp(38px,5vw,50px);font-weight:800;
  letter-spacing:-.032em;line-height:1;color:#E8ECFF}
.oferta__mes{font-size:14.5px;color:#9AA6D6}
.oferta__nota{margin-top:7px;font-size:13.5px;color:#9AA6D6}
.oferta__lista{margin:22px 0 0;padding-top:20px;border-top:1px solid #2B3579;display:grid;gap:11px}
.oferta__lista li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;
  color:#C3CBEE;line-height:1.45}
.oferta__lista svg{width:16px;height:16px;margin-top:2px;flex:0 0 auto;stroke:#00FFE9;
  fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.oferta .botoes{margin-top:24px}
.oferta .botoes .b{flex:1 1 190px}

/* faixa de numeros logo abaixo do hero */
.provas{background:#070B26;color:#AEB7DE;padding:clamp(28px,4vw,44px) 0;
  border-top:1px solid #1A2050}
.provas__g{display:grid;gap:clamp(18px,3vw,30px)}
@media (min-width:620px){ .provas__g{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .provas__g{grid-template-columns:repeat(4,1fr)} }
.provas__v{font-family:var(--display);font-size:clamp(29px,3.6vw,38px);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:#00FFE9}
.provas__r{margin-top:8px;font-size:13.5px;line-height:1.45;max-width:24ch}

/* comparativo rapido de formatos */
.formatos{display:grid;gap:clamp(18px,2.4vw,26px)}
@media (min-width:880px){ .formatos{grid-template-columns:repeat(2,1fr)} }
.formato{border:1px solid var(--ln);border-radius:var(--raio);padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;background:#fff}
.formato h3{font-size:clamp(20px,2.3vw,24px);font-weight:800}
.formato__quem{margin-top:12px;font-size:15px;color:var(--tx2);line-height:1.55}
.formato__lista{margin-top:20px;display:grid;gap:10px;font-size:14.5px;color:var(--tx2)}
.formato__lista li{display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.formato__preco{margin-top:22px;padding-top:18px;border-top:1px solid var(--ln);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.formato__preco b{font-family:var(--display);font-size:29px;font-weight:800;letter-spacing:-.028em}
.formato__preco span{font-size:14px;color:var(--tx2)}
.formato .b{margin-top:20px}

/* livres */
.livres{display:grid;gap:14px}
@media (min-width:640px){ .livres{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .livres{grid-template-columns:repeat(4,1fr)} }
.livre{border:1px solid var(--ln);border-radius:var(--raio);padding:22px;background:#fff;
  display:flex;flex-direction:column;gap:10px}
.livre h3{font-size:17px;font-weight:700}
.livre p{font-size:14px;color:var(--tx2);line-height:1.5;flex:1}
.livre .v{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.02em}
.livre .v small{font-family:var(--corpo);font-size:13px;font-weight:400;color:var(--tx2)}
.livre a{font-size:14px;font-weight:600;color:var(--acc);text-decoration:none}
.livre a:hover{text-decoration:underline}