/* ==========================================================================
   Betânia Assis — folha de estilo única
   Valores extraídos do design (Betania - Site.dc.html / Betania - Blog.dc.html).
   O design era desktop-fixo; os breakpoints ao final são acréscimo necessário.
   ========================================================================== */

:root {
  /* Fundos */
  --creme: #FFFDFB;
  --rose-50: #F7EFEA;
  /* Trilha vazia da barra de progresso do quiz. Cai entre rose-50 e rose-100,
     e por isso entra na escala em vez de virar hex solto na regra. */
  --rose-75: #EFE1DA;
  --rose-100: #E9D9D2;
  --rose-200: #E3BDB3;
  --rose-300: #D9BDB4;

  /* Marca */
  --terra: #A9685C;
  --terra-escuro: #7E4438;
  --terra-profundo: #8E5347;
  --ouro: #C2A15E;

  /* Tinta e texto */
  --tinta: #2E2322;
  --tinta-2: #382A28;
  --tinta-3: #4A3634;
  --texto: #5C4844;
  --texto-suave: #9A817C;

  /* Sobre fundo escuro */
  --claro: #F3E8E3;
  --claro-alto: #FFF6F2;
  --claro-hero: #FFF8F5;
  --claro-lead: #E8D6D0;
  --claro-suave: #C0AAA4;
  --claro-mudo: #B9A29C;

  /* Linhas */
  --linha: #E1CCC4;
  --linha-2: #DCC7BF;
  --linha-escura: #7B615C;
  --linha-escura-2: #4A3936;

  --fonte-titulo: Marcellus, 'Times New Roman', Georgia, serif;
  --fonte-texto: Karla, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Cantos: o site tem só dois raios — pílula nos botões e este, dos blocos e
     das opções do quiz. Os 999px continuam literais nas regras antigas. */
  --raio: 4px;

  /* Respiro horizontal das seções — muda nos breakpoints */
  --gutter: 64px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--terra); text-decoration: none; }
a:hover { color: var(--terra-escuro); }

img { max-width: 100%; }

::selection { background: var(--rose-200); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}

/* Link "pular para o conteúdo" — acessibilidade */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--claro-alto);
  color: var(--tinta);
  font-size: 14px;
}
.pular:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   Elementos recorrentes
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra);
}
.eyebrow--rose { color: var(--rose-200); }
.eyebrow--ouro { color: var(--ouro); }
.eyebrow--terra-profundo { color: var(--terra-profundo); }

.h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 42px;
  line-height: 1.15;
  font-weight: 400;
}

.btn {
  display: inline-block;
  padding: 15px 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease, box-shadow 0.22s ease;
}
.btn--grande { padding: 18px 38px; font-size: 16px; }
.btn--pequeno { padding: 12px 26px; font-size: 14px; }

.btn--rose { background: var(--rose-200); color: var(--tinta); font-weight: 600; }
.btn--rose:hover { background: #D8AEA3; color: var(--tinta); }

.btn--tinta { background: var(--tinta); color: var(--claro-alto); font-weight: 600; }
.btn--tinta:hover { background: #1F1615; color: var(--claro-alto); }

.btn--creme { background: var(--claro-alto); color: var(--terra); font-weight: 600; white-space: nowrap; }
.btn--creme:hover { background: #fff; color: var(--terra-escuro); }

.btn--contorno-claro { border-color: rgba(255, 246, 242, 0.55); color: var(--claro-alto); }
.btn--contorno-claro:hover { border-color: var(--claro-alto); background: rgba(255, 246, 242, 0.1); color: var(--claro-alto); }

.btn--contorno-escuro { border-color: var(--linha-escura); color: var(--claro); }
.btn--contorno-escuro:hover { border-color: var(--rose-200); color: var(--claro-alto); }

/* As duas variantes de contorno acima são para fundo escuro. Esta é a ação
   secundária sobre fundo claro — "Voltar" e "Refazer o quiz".

   A borda usa --texto-suave, e não o --linha-2 do design: num botão de
   contorno a borda é a única coisa que identifica o controle, e --linha-2 sobre
   creme dá 1,60:1. */
.btn--contorno-terra { border-color: var(--texto-suave); color: var(--texto); }
.btn--contorno-terra:hover { border-color: var(--terra); color: var(--tinta); }

.auto-inicio { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Botões que levam ao WhatsApp
   --------------------------------------------------------------------------
   Duas camadas: micro-interação no hover em todos, e um halo que respira só
   nos CTAs principais (`.btn--wa-pulso`). O halo fica num ::after para não
   disputar a propriedade box-shadow com o hover — animação vence declaração
   normal, e as duas no mesmo elemento se anulariam.

   O ritmo é lento de propósito: é o site de uma psicóloga, não um banner. */

.btn--wa {
  position: relative;
  /* cor do halo, sobrescrita por variante logo abaixo */
  --halo: rgba(227, 189, 179, 0.55);
}

.btn--wa:hover,
.btn--wa:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(46, 35, 34, 0.5);
}

.btn--wa:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px -6px rgba(46, 35, 34, 0.45);
}

/* Halo por variante, para contrastar com o fundo de cada seção */
.btn--rose.btn--wa { --halo: rgba(255, 246, 242, 0.7); }
.btn--creme.btn--wa { --halo: rgba(255, 246, 242, 0.75); }
.btn--tinta.btn--wa { --halo: rgba(46, 35, 34, 0.45); }
.btn--contorno-claro.btn--wa { --halo: rgba(255, 246, 242, 0.5); }
.btn--contorno-escuro.btn--wa { --halo: rgba(227, 189, 179, 0.5); }

/* O anel é estático (a cor vem de --halo) e o que anima é transform/opacity.
   Não usar var() dentro do @keyframes: a interpolação não é confiável, o
   box-shadow fica preso no quadro de 0%. transform/opacity também são as duas
   propriedades que o compositor resolve sem repaint. */
.btn--wa-pulso::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--halo);
  opacity: 0;
  animation: wa-pulso 3.4s ease-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Quem já encontrou o botão não precisa mais do chamado. */
.btn--wa-pulso:hover::after,
.btn--wa-pulso:focus-visible::after {
  animation: none;
  opacity: 0;
}

@keyframes wa-pulso {
  0% { transform: scale(1); opacity: 0.8; }
  55% { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Hero (home)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(140deg, #3A2B29, #6E4A42);
}

/* A foto é um retrato quadrado (1254x1254) e, num hero full-bleed, é escalada
   pela largura — sempre sobra altura, e o corte tem de sair de algum lado.
   `30%` mostra mais do alto da cabeça, mantendo rosto e mãos no quadro. */
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Véu mais forte que o do design pelo mesmo motivo: sobre uma foto clara e
   próxima, o gradiente original não dava contraste suficiente para o título. */
.hero__veu {
  position: absolute;
  inset: 0;
  /* Diagonal do design, reforçada: a foto é clara e próxima. A faixa superior
     extra saiu junto com o alinhamento ao topo — com `46%` o alto do quadro já
     é o cabelo escuro dela, e o header não precisa de reforço. */
  background: linear-gradient(100deg, rgba(46, 35, 34, 0.95) 0%, rgba(46, 35, 34, 0.84) 32%, rgba(46, 35, 34, 0.34) 60%, rgba(46, 35, 34, 0.06) 86%);
}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px var(--gutter);
}

.marca {
  font-family: var(--fonte-titulo);
  font-size: 21px;
  color: var(--claro-alto);
  letter-spacing: 0.04em;
}
.marca:hover { color: var(--claro-alto); }
.marca__crp {
  font-family: var(--fonte-texto);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--rose-300);
  white-space: nowrap;
}

.hero__conteudo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 180px var(--gutter) 76px;
  max-width: 720px;
}

.hero__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 66px;
  line-height: 1.06;
  font-weight: 400;
  color: var(--claro-hero);
  letter-spacing: -0.015em;
}
.hero__titulo em { font-style: italic; color: var(--rose-200); }

.hero__lead {
  margin: 0;
  max-width: 560px;
  font-size: 19px;
  line-height: 1.7;
  color: var(--claro-lead);
}

/* --------------------------------------------------------------------------
   Manifesto
   -------------------------------------------------------------------------- */

.manifesto {
  padding: 100px 120px;
  background: var(--creme);
  text-align: center;
}
.manifesto__texto {
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--fonte-titulo);
  font-size: 38px;
  line-height: 1.42;
  color: var(--tinta);
  text-wrap: pretty;
}
.manifesto__texto em { font-style: italic; color: var(--terra); }

/* --------------------------------------------------------------------------
   Dupla de cartões escuros (quiz / e-book, e-book / WhatsApp)
   -------------------------------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--tinta);
  color: var(--claro);
}

.duo__celula {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 76px 60px;
}
.duo__celula--alt { background: var(--tinta-2); }

.duo__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 42px;
  line-height: 1.15;
  font-weight: 400;
}
.duo__titulo--md { font-size: 34px; line-height: 1.2; }
.duo__titulo--sm { font-size: 30px; line-height: 1.2; }

.duo__texto {
  margin: 0;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--claro-suave);
}

.duo .btn { margin-top: 6px; }

/* --------------------------------------------------------------------------
   Quem eu atendo
   -------------------------------------------------------------------------- */

.publicos {
  padding: 92px var(--gutter);
  background: var(--rose-50);
}
.publicos .h2 { margin-bottom: 44px; }

.publicos__lista { display: flex; flex-direction: column; }

.publico {
  display: grid;
  grid-template-columns: 60px 300px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--linha);
}
.publico__num {
  font-family: var(--fonte-titulo);
  font-size: 17px;
  color: var(--terra);
}
.publico__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 25px;
  line-height: 1.25;
  font-weight: 400;
}
.publico__texto {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   O processo
   -------------------------------------------------------------------------- */

.processo {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  padding: 92px var(--gutter);
  background: var(--creme);
}

.processo__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 40px;
  align-self: start;
}
.processo__aside .btn { margin-top: 14px; }

.processo__passos { display: flex; flex-direction: column; gap: 34px; }

.passo {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 24px;
  align-items: start;
}
.passo__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid var(--linha-2);
  font-family: var(--fonte-titulo);
  font-size: 19px;
  color: var(--terra);
}
.passo__corpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}
.passo__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 400;
}
.passo__texto {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--texto);
  max-width: 520px;
}

/* --------------------------------------------------------------------------
   Sobre mim
   -------------------------------------------------------------------------- */

.sobre {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 64px;
  align-items: center;
  padding: 92px var(--gutter);
  background: var(--rose-100);
}
.sobre__texto-bloco { display: flex; flex-direction: column; gap: 20px; }
.sobre__paragrafo {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--tinta-3);
  max-width: 560px;
}
.sobre__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 999px;
  background: linear-gradient(140deg, #D9BDB4, #A9685C);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
}
.chip {
  padding: 9px 18px;
  background: var(--creme);
  border-radius: 999px;
  font-size: 14px;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Blog na home
   -------------------------------------------------------------------------- */

.blog-home {
  padding: 92px var(--gutter);
  background: var(--creme);
}
.blog-home__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.blog-home__link { font-size: 15px; }

/* O fio de 1px entre os cartões é o fundo aparecendo pelo gap — truque do
   design. Por isso as trilhas precisam colapsar quando há menos de 3 cartões
   (ex.: "Também em ..."), senão o fundo vira um bloco cheio. auto-fit faz isso. */
.cartoes-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--linha);
}

.cartao {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 30px;
  background: var(--creme);
  color: var(--tinta);
  min-height: 200px;
  transition: background-color 0.18s ease;
}
.cartao:hover { background: var(--rose-50); color: var(--tinta); }
.cartao__tag {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
}
.cartao__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 23px;
  line-height: 1.3;
  font-weight: 400;
  text-wrap: pretty;
}
.cartao__resumo {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Faixa de CTA
   -------------------------------------------------------------------------- */

.faixa-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 34px var(--gutter);
  background: var(--terra);
  color: var(--claro-alto);
}
.faixa-cta__texto {
  font-family: var(--fonte-titulo);
  font-size: 26px;
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.rodape {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding: 44px var(--gutter);
  background: var(--tinta);
  color: var(--claro-mudo);
  font-size: 13px;
  line-height: 1.7;
}
.rodape--com-borda { border-top: 1px solid var(--linha-escura-2); }
.rodape__marca-bloco { display: flex; flex-direction: column; gap: 6px; }
.rodape__marca {
  font-family: var(--fonte-titulo);
  font-size: 19px;
  color: var(--claro);
}
.rodape__legal { max-width: 460px; text-align: right; }

/* --------------------------------------------------------------------------
   Navbar escura (blog e artigo)
   -------------------------------------------------------------------------- */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--gutter);
  background: var(--tinta);
  color: var(--claro);
}
.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__link { font-size: 14px; color: var(--rose-300); }
.nav__link:hover { color: var(--claro-alto); }
.nav__atual {
  font-size: 14px;
  color: var(--claro-alto);
  border-bottom: 1px solid var(--terra);
  padding-bottom: 3px;
}

/* --------------------------------------------------------------------------
   Blog — topo, filtros, destaque, grade
   -------------------------------------------------------------------------- */

.blog-topo {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 64px;
  align-items: end;
  padding: 84px var(--gutter) 56px;
  background: var(--rose-50);
}
.blog-topo__bloco { display: flex; flex-direction: column; gap: 20px; }
.blog-topo__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 60px;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.blog-topo__lead {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--texto);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 var(--gutter) 48px;
  background: var(--rose-50);
}
.filtro {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--linha-2);
  background: transparent;
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.filtro:hover { border-color: var(--terra); color: var(--texto); }
.filtro--ativo {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--claro-alto);
}
.filtro--ativo:hover { color: var(--claro-alto); }

.destaque-area {
  padding: 76px var(--gutter) 0;
  background: var(--creme);
}
.destaque {
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--linha);
}
.destaque__meta { display: flex; flex-direction: column; gap: 10px; }
.destaque__data { font-size: 14px; color: var(--texto-suave); }
.destaque__link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--tinta);
  max-width: 720px;
}
.destaque__link:hover { color: var(--tinta); }
.destaque__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 44px;
  line-height: 1.15;
  font-weight: 400;
  text-wrap: pretty;
}
.destaque__resumo {
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
  color: var(--texto);
}
.destaque__cta {
  font-size: 15px;
  color: var(--terra);
  border-bottom: 1px solid var(--linha-2);
  align-self: flex-start;
  padding-bottom: 3px;
}
.destaque__link:hover .destaque__cta { border-color: var(--terra); }

.grade-area {
  padding: 56px var(--gutter) 92px;
  background: var(--creme);
}
.grade-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linha);
}
.post-cartao {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 32px 40px;
  background: var(--creme);
  color: var(--tinta);
  min-height: 260px;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  transition: background-color 0.18s ease;
}
.post-cartao:hover { background: var(--rose-50); color: var(--tinta); }
.post-cartao__data {
  margin-top: auto;
  font-size: 13px;
  color: var(--texto-suave);
}

.vazio {
  margin: 48px 0 0;
  font-size: 17px;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Artigo (página de leitura) — não existia no design, segue os mesmos tokens
   -------------------------------------------------------------------------- */

.artigo {
  padding: 84px var(--gutter) 92px;
  background: var(--creme);
}
.artigo__interno { max-width: 760px; margin: 0 auto; }
.artigo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--texto-suave);
}
.artigo__titulo {
  margin: 0 0 22px;
  font-family: var(--fonte-titulo);
  font-size: 46px;
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.artigo__resumo {
  margin: 0 0 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--linha);
  font-size: 19px;
  line-height: 1.7;
  color: var(--texto);
}
.artigo__corpo p {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.85;
  color: var(--tinta-3);
}
.artigo__voltar {
  display: inline-block;
  margin-top: 22px;
  font-size: 15px;
  border-bottom: 1px solid var(--linha-2);
  padding-bottom: 3px;
}

.relacionados {
  padding: 0 var(--gutter) 92px;
  background: var(--creme);
}
.relacionados .h2 {
  font-size: 30px;
  margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   Quiz — abertura
   -------------------------------------------------------------------------- */

.quiz-abertura {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
  padding: 96px var(--gutter);
  background: var(--rose-50);
}

.quiz-abertura__bloco {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.quiz-abertura__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 58px;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.quiz-abertura__titulo em { font-style: italic; color: var(--terra); }

.quiz-abertura__lead {
  margin: 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--texto);
}

.quiz-abertura__cta { margin-top: 8px; }

/* O retrato é quadrado; num quadro 4/5 o corte tem de sair de algum lado, e
   `55% 22%` mantém o rosto no alto do arco. */
.quiz-abertura__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% 22%;
  border-radius: 280px 280px var(--raio) var(--raio);
  background: linear-gradient(140deg, var(--rose-300), var(--terra));
}

.quiz-aviso {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 540px;
  padding: 24px 26px;
  background: var(--creme);
  border-radius: var(--raio);
}
.quiz-aviso__rotulo {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto);
}
.quiz-aviso__texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Quiz — perguntas
   --------------------------------------------------------------------------
   Duas apresentações do mesmo HTML. Sem JavaScript, a lista inteira aparece
   numerada e a pessoa envia no fim. Com JavaScript, o quiz.js marca a seção
   com `.quiz-passos--passo-a-passo`, esconde as perguntas fora da vez e liga a
   barra de progresso — é o que o design mostrava. */

.quiz-passos {
  padding: 76px var(--gutter) 92px;
  background: var(--creme);
}

.quiz-passos form {
  max-width: 860px;
  margin: 0 auto;
}

.quiz-progresso {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--linha);
}
.quiz-progresso__contador {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto);
  white-space: nowrap;
}
.quiz-progresso__trilha {
  flex: 1;
  height: 3px;
  background: var(--rose-75);
  border-radius: 999px;
  overflow: hidden;
}
.quiz-progresso__barra {
  display: block;
  width: 0;
  height: 100%;
  background: var(--terra);
  transition: width 0.24s ease;
}

.quiz-alerta {
  margin: 0 0 32px;
  padding: 16px 20px;
  border-left: 3px solid var(--terra);
  background: var(--rose-50);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta-3);
}

.quiz-lista {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quiz-pergunta__grupo {
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* `legend` não aceita flex nem grid de forma confiável entre navegadores; como
   bloco com o número inline ela se comporta. */
.quiz-pergunta__enunciado {
  display: block;
  width: 100%;
  padding: 0;
  font-family: var(--fonte-titulo);
  font-size: 42px;
  line-height: 1.22;
  color: var(--tinta);
  text-wrap: pretty;
}
.quiz-pergunta__num {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--terra-profundo);
}

.quiz-opcoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* O design usava <button> nas opções, o que perde o estado "selecionado" para
   quem usa leitor de tela. Aqui é rádio nativo: o controle fica invisível mas
   focável, e o rótulo inteiro é o alvo de clique. */
.opcao {
  position: relative;
  display: block;
  cursor: pointer;
}
.opcao__controle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
/* A borda é o contorno do controle, então precisa de 3:1 — o `--linha-2` do
   design dava 1,60:1 sobre o creme, e o cartão desaparecia no fundo da página.
   `--texto-suave` chega a 3,56:1 sem virar um traço pesado a 1px. */
.opcao__rotulo {
  display: block;
  padding: 20px 26px;
  border: 1px solid var(--texto-suave);
  border-radius: var(--raio);
  background: var(--creme);
  font-size: 17px;
  line-height: 1.4;
  color: var(--tinta);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.opcao:hover .opcao__rotulo { border-color: var(--terra); }

.opcao__controle:checked + .opcao__rotulo {
  border-color: var(--terra);
  background: var(--rose-50);
  box-shadow: inset 0 0 0 1px var(--terra);
}

/* O controle está escondido, então o anel de foco tem de ir para o rótulo —
   senão o foco de teclado fica invisível. */
.opcao__controle:focus-visible + .opcao__rotulo {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}

.quiz-pergunta__erro {
  margin: 0;
  font-size: 15px;
  color: var(--terra-escuro);
}

.quiz-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 42px;
}
.quiz-acoes__nota {
  font-size: 14px;
  color: var(--texto);
}

/* Modo passo a passo: o número sai (a contagem passa a ser a da barra) e o
   espaçamento da lista não faz mais sentido com uma pergunta só na tela. */
.quiz-passos--passo-a-passo .quiz-pergunta__num { display: none; }
.quiz-passos--passo-a-passo .quiz-lista { gap: 0; }

/* --------------------------------------------------------------------------
   Quiz — resultado
   -------------------------------------------------------------------------- */

.resultado {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
  padding: 88px var(--gutter);
  background: var(--rose-50);
}

.resultado__placar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resultado__numero {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.resultado__pontos {
  font-family: var(--fonte-titulo);
  font-size: 76px;
  line-height: 1;
  font-weight: 400;
  color: var(--tinta);
}
.resultado__escala {
  font-size: 17px;
  color: var(--texto);
}

.resultado__trilha {
  max-width: 320px;
  height: 6px;
  background: var(--rose-100);
  border-radius: 999px;
  overflow: hidden;
}
.resultado__barra {
  display: block;
  height: 100%;
  background: var(--terra);
}

.resultado__nota {
  margin: 6px 0 0;
  max-width: 340px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto);
}

.resultado__leitura {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.resultado__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 46px;
  line-height: 1.14;
  font-weight: 400;
  text-wrap: pretty;
}
.resultado__texto {
  margin: 0;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.8;
  color: var(--tinta-3);
}

.resultado__recomendacoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
}

.recomendacoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.recomendacao {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}
.recomendacao__num {
  padding-top: 2px;
  font-family: var(--fonte-titulo);
  font-size: 15px;
  color: var(--terra-profundo);
}
.recomendacao__texto {
  margin: 0;
  max-width: 600px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta-3);
}

.resultado__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
}

/* --------------------------------------------------------------------------
   Responsivo — acréscimo ao design (que era desktop-fixo)
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --gutter: 44px; }

  .hero { min-height: 640px; }
  .hero__titulo { font-size: 52px; }
  .hero__conteudo { padding-top: 160px; }

  .manifesto { padding: 80px 44px; }
  .manifesto__texto { font-size: 31px; }

  .h2, .duo__titulo { font-size: 36px; }
  .blog-topo__titulo { font-size: 46px; }
  .destaque__titulo { font-size: 36px; }
  .artigo__titulo { font-size: 38px; }

  .duo { grid-template-columns: 1fr; }
  .duo__celula { padding: 56px 44px; }

  .processo { grid-template-columns: 1fr; gap: 44px; }
  .processo__aside { position: static; }

  .sobre { grid-template-columns: 1fr; gap: 44px; }
  .sobre__foto { max-width: 380px; }

  .blog-topo { grid-template-columns: 1fr; gap: 28px; }

  .destaque { grid-template-columns: 1fr; gap: 20px; }

  .grade-posts { grid-template-columns: repeat(2, 1fr); }

  .publico { grid-template-columns: 44px 1fr; gap: 8px 20px; }
  .publico__texto { grid-column: 2; }

  .quiz-abertura { grid-template-columns: 1fr; gap: 44px; }
  .quiz-abertura__titulo { font-size: 46px; }
  /* Empilhado, o arco ocuparia a largura toda e empurraria as perguntas para
     fora da primeira tela. */
  .quiz-abertura__foto { max-width: 420px; }

  .quiz-pergunta__enunciado { font-size: 34px; }

  .resultado { grid-template-columns: 1fr; gap: 40px; }
  .resultado__titulo { font-size: 38px; }
}

@media (max-width: 680px) {
  :root { --gutter: 22px; }

  /* A 375px, marca + Blog + "Agendar uma conversa" não cabem numa linha. Sem
     nowrap o nome quebrava no meio ("Betânia / Assis"); com wrap na topbar a
     navegação desce para a segunda linha, inteira. */
  .topbar {
    padding: 20px var(--gutter);
    gap: 10px 12px;
    flex-wrap: wrap;
  }
  .marca { font-size: 18px; white-space: nowrap; }
  .marca__crp { display: block; font-size: 10px; }

  .hero { min-height: 0; }
  .hero__conteudo { padding: 150px var(--gutter) 56px; gap: 20px; }
  .hero__titulo { font-size: 38px; }
  .hero__titulo br { display: none; }
  .hero__lead { font-size: 17px; }
  .hero__veu {
    background: linear-gradient(180deg, rgba(46, 35, 34, 0.82) 0%, rgba(46, 35, 34, 0.7) 45%, rgba(46, 35, 34, 0.86) 100%);
  }

  .manifesto { padding: 60px var(--gutter); }
  .manifesto__texto { font-size: 25px; line-height: 1.38; }

  .h2, .duo__titulo, .duo__titulo--md, .duo__titulo--sm { font-size: 28px; }
  .duo__titulo br, .blog-topo__titulo br, .sobre__titulo br,
  .quiz-abertura__titulo br { display: none; }
  .duo__celula { padding: 48px var(--gutter); }

  .publicos, .processo, .sobre, .blog-home { padding: 60px var(--gutter); }
  .publicos .h2 { margin-bottom: 28px; }

  .publico__titulo { font-size: 21px; }
  .passo { grid-template-columns: 44px 1fr; gap: 16px; }
  .passo__num { width: 44px; height: 44px; font-size: 16px; }
  .passo__titulo { font-size: 21px; }

  .blog-topo { padding: 60px var(--gutter) 40px; }
  .blog-topo__titulo { font-size: 34px; }
  .blog-topo__lead { font-size: 16px; }
  .filtros { padding: 0 var(--gutter) 32px; }

  .destaque-area { padding: 48px var(--gutter) 0; }
  .destaque__titulo { font-size: 28px; }
  .destaque__resumo { font-size: 16px; }
  .grade-area { padding: 40px var(--gutter) 60px; }

  .cartoes-3, .grade-posts { grid-template-columns: 1fr; }
  /* No empilhamento, a régua do destaque já separa as seções — a borda de
     topo da grade viraria uma segunda linha colada nela. */
  .grade-posts { border-top: 0; }
  .cartao { min-height: 0; }
  .post-cartao { min-height: 0; border-right: 0; padding: 28px 0 32px; }
  .post-cartao:hover { background: var(--creme); }

  .navbar { flex-wrap: wrap; padding: 18px var(--gutter); }
  .nav { gap: 20px; }

  /* Alvo de toque de 44px (o design vinha com 38px) e rótulo em uma linha:
     "Agendar uma conversa" não cabe nos 26px de padding original a 375px. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .topbar .btn--wa,
  .navbar .btn--wa {
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
  }

  .artigo { padding: 56px var(--gutter) 60px; }
  .artigo__titulo { font-size: 30px; }
  .artigo__resumo { font-size: 17px; }
  .artigo__corpo p { font-size: 17px; }
  .relacionados { padding: 0 var(--gutter) 60px; }

  .faixa-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 32px var(--gutter);
  }
  .faixa-cta__texto { font-size: 22px; }

  .rodape {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 36px var(--gutter);
  }
  .rodape__legal { text-align: left; max-width: none; }

  .blog-home__cabeca { flex-direction: column; align-items: flex-start; gap: 10px; }

  .quiz-abertura { padding: 60px var(--gutter); gap: 32px; }
  .quiz-abertura__titulo { font-size: 34px; }
  .quiz-abertura__lead { font-size: 17px; }
  .quiz-aviso { padding: 20px 22px; }

  .quiz-passos { padding: 48px var(--gutter) 60px; }
  .quiz-progresso { gap: 14px; margin-bottom: 32px; padding-bottom: 20px; }
  .quiz-lista { gap: 44px; }
  .quiz-pergunta__grupo { gap: 24px; }
  .quiz-pergunta__enunciado { font-size: 26px; }
  .opcao__rotulo { padding: 16px 20px; font-size: 16px; }
  .quiz-acoes { gap: 14px; margin-top: 32px; }

  .resultado { padding: 56px var(--gutter); gap: 32px; }
  .resultado__pontos { font-size: 58px; }
  .resultado__titulo { font-size: 28px; }
  .resultado__texto { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  /* Sem o halo e sem o deslocamento, o hover ainda precisa dar retorno visível. */
  .btn--wa:hover,
  .btn--wa:focus-visible {
    transform: none;
    box-shadow: 0 0 0 2px var(--halo);
  }
}