/* Ajustes de tipografia (Edu, 03-nov): títulos mais fechados (-0.02em além do anterior), textos pequenos dos cards maiores e mais firmes. */
html body .h2{letter-spacing:-.055em}
html body .hero h1,html body .final h2{letter-spacing:-.06em}
html body .ahead h1{letter-spacing:-.055em}
html body .sc b,html body .scard .big,html body .bc .n{letter-spacing:-.07em}
html body .ac .n{letter-spacing:-.065em}
html body .ph h2{letter-spacing:-.05em}
html body .lead2,html body .also h2,html body .prose h2{letter-spacing:-.045em}
html body .plan h3,html body .stxt h3,html body .cred b{letter-spacing:-.04em}

/* Convênios */
html body .plan .ps{font-size:14.5px}
html body .plan h4{font-size:14px;font-weight:500}
html body .plan ul{font-size:14.5px;font-weight:400;color:#2a2c2f}
html body .plan.dark ul{color:rgba(255,255,255,.88)}
html body .plan .foot{font-size:13.5px;font-weight:500}

/* outros cards com texto miúdo */
html body .trow span,html body .tc,html body .cred span,html body .bc small{font-size:13.5px}
html body .trow b,html body .tc b,html body .bc b{font-size:13.5px}
html body .ac header{font-size:13.5px}

/* Abertura (Edu, 03-nov 23:23): título até 70px e mais encorpado; texto de apoio +2px e um nível de peso a mais */
html body .hero h1{font-size:clamp(40px,4.9vw,70px);font-weight:500;letter-spacing:-.055em}
html body .hero p{font-size:18px;font-weight:500}
@media (max-width:680px){html body .hero p{font-size:16.5px}}
/* o que afinava o branco no Safari: suavização "antialiased" do body e o texto de apoio em 82% de branco */
html body .hero{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
html body .hero h1{line-height:1.05}
html body .hero p{color:rgba(255,255,255,.94)}
/* volta do peso (Edu, 03-nov 23:44): tamanho fica, peso volta ao anterior, linhas mais juntas */
html body .hero{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html body .hero h1{font-weight:400;line-height:.98}
html body .hero p{font-weight:400}
/* título a 70% (Edu, 04-nov 01:25 UTC): o título ocupa 70% da largura da tela e passa por cima da coluna dos números, que ficam embaixo, à direita */
@media (min-width:1001px){html body .hero h1{max-width:none;width:70vw}}

/* Termos em pílulas do tamanho do texto (Edu, 04-nov 01:36 UTC): texto bem maior, largura pelo conteúdo, alinhadas à esquerda */
html body .dgrid{display:flex;flex-wrap:wrap;gap:10px;max-width:1100px;justify-content:flex-start}
html body .doc{display:inline-flex;align-items:center;gap:14px;width:auto;padding:9px 26px 9px 9px;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em}
html body .doc i{width:46px;height:46px;font-size:10px;flex:none}
@media (max-width:680px){html body .doc{font-size:17px;padding:7px 20px 7px 7px}html body .doc i{width:38px;height:38px}}
/* Termos no estilo da referência (pílulas de contorno, Edu 04-nov 01:38 UTC), tema claro: contorno tinta, texto grande, preenchidas no hover */
html body .dgrid{justify-content:center;gap:14px 12px;max-width:1180px}
html body .doc{background:transparent;border:1.5px solid var(--ink);border-radius:999px;padding:12px 26px;gap:10px;font-size:clamp(19px,1.75vw,26px);font-weight:400;color:var(--ink);transition:background .25s,color .25s}
html body .doc i{width:auto;height:auto;background:none;border-radius:0;font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--ink-3);order:2;transition:color .25s}
@media (hover:hover){html body .doc:hover{background:var(--ink);color:#fff}html body .doc:hover i{color:rgba(255,255,255,.6)}}
@media (max-width:680px){html body .doc{font-size:17px;padding:10px 18px}}
/* ajuste pela especificação (04-nov 01:38 UTC): à esquerda, 24px, PDF 12px a 60%, foco preenche igual ao hover */
html body .dgrid{justify-content:flex-start;gap:16px}
html body .doc{padding:12px 22px;font-size:clamp(18px,1.67vw,24px);font-weight:400;letter-spacing:normal;min-height:44px;transition:background .2s,color .2s}
html body .doc i{font-size:12px;font-weight:500;letter-spacing:.04em;color:currentColor;opacity:.6}
html body .doc:focus-visible{background:var(--ink);color:#fff;outline:2px solid var(--blue);outline-offset:3px}
@media (hover:hover){html body .doc:hover i{color:currentColor}}
/* termos: no hover/foco o "PDF" dá lugar ao ícone Iconly Pro Light "Cloud download" (Edu, 04-nov 01:40 UTC) */
html body .doc{order:0}
html body .doc .doc-end{display:inline-grid;align-items:center;justify-items:center;min-width:28px;order:2}
html body .doc .doc-end>*{grid-area:1/1;transition:opacity .2s,transform .2s}
html body .doc .dl{width:20px;height:20px;opacity:0;transform:translateY(-4px)}
@media (hover:hover){html body .doc:hover .doc-end i{opacity:0;transform:translateY(4px)}html body .doc:hover .dl{opacity:1;transform:none}}
html body .doc:focus-visible .doc-end i{opacity:0}
html body .doc:focus-visible .dl{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html body .doc .doc-end>*{transition:none}}
/* Como funciona preso: sem encolher a foto no hover (deixava a 3ª mais baixa) */
@media (min-width:1024px){html body #como-funciona .step:hover .img{transform:none}}