/* =============================================================================
   Verthus — home.css (frente Verthus Geral, azul-marinho). Carregamento diferido.
   Blocos específicos da Home: canais, áreas, passos, fechamento e respiro
   da barra fixa.
   ============================================================================= */

/* A barra fixa inferior não pode cobrir o rodapé (ZIP: padding-bottom 88px) */
body.pg-home { padding-bottom: 88px; }

/* ---------- 02 — Canais ---------- */
.canal {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.canal:first-child { min-height: 220px; }
.canal .ic { width: 28px; height: 28px; stroke-width: 1.75; color: var(--c-pri); }
.canal h3 {
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
}
.canal p { font-size: 15px; color: var(--c-texto-2); }
.canal--destaque { background: var(--c-pri); color: var(--branco); }
.canal--destaque .ic { color: var(--branco); }
.canal--destaque h3 {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}
.canal--destaque p { color: var(--branco); }
.canal--destaque .canal__nota {
  margin-top: auto;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.canal--destaque :focus-visible { outline-color: var(--branco); }
.canais__ctas { margin-top: 32px; }

/* ---------- 03 — Comparativo ---------- */
.comp__nota { margin-top: 16px; font-size: 13px; color: var(--cinza-texto); max-width: 70ch; }

/* ---------- 04 — Áreas ---------- */
.area {
  padding: 24px 20px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.area__n { font-size: 12px; color: var(--cinza-texto); font-feature-settings: "tnum" 1; }
.area h3 {
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}
.area p:not(.area__n) { font-size: 14px; color: var(--c-texto-2); line-height: 1.5; }
.area .link-seta { margin-top: auto; padding-top: 10px; font-size: 13px; }
.area .link-seta .ic { width: 14px; height: 14px; stroke-width: 2.5; }

/* ---------- 05 — Como funciona ---------- */
.h2--passos { max-width: 22ch; margin-bottom: 32px; }
.passo {
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
}
.passo__n {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--c-pri);
  letter-spacing: -0.02em;
}
.passo h3 {
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
}
.passo p:last-child { font-size: 15px; color: var(--c-texto-2); }
.passos__rodape {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
}
.passos__res {
  font-family: var(--font-titulo);
  font-size: 22px;
  line-height: 1.3;
  max-width: 34ch;
}

/* ---------- 09 — Fechamento ---------- */
.fecho { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.fecho h2 {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.fecho__sub { margin-top: 24px; font-size: clamp(17px, 1.4vw, 20px); max-width: 40ch; }
.fecho .ctas { margin-top: 32px; }
.fecho__seo {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--c-borda-hero);
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-claro);
  max-width: 78ch;
}