/* ===========================================================
   home.css  ·  camada de UI da home (mobile primeiro)
   Depende de css/saude-base.css, que carrega os tokens.
   Não é usado por nenhuma outra página: mexer aqui não
   afeta briefing, proposta, admin nem as landings de teste.
   =========================================================== */

/* ---------- base ---------- */

body { padding-bottom: 0; }

/* respiro vertical mais curto no celular do que o padrão da base,
   porque a home tem muitas seções e o acúmulo é o que fazia
   a página passar de 14 telas */
.sec { padding: clamp(56px, 11vw, 104px) 0; }
.sec-t { padding-top: clamp(40px, 8vw, 72px); }

/* ---------- barra de ação fixa (só no celular) ---------- */

.acao {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(244, 241, 234, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease);
}
.acao.on { transform: translateY(0); }
.acao .btn, .acao .btn-ghost {
  flex: 1;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding: 0 14px;
  white-space: nowrap;
}
/* a barra fixa do rodapé foi aposentada em 26/08/2026: cobria o rodapé
   do card de escopo no celular, e o CTA passou a morar no header. O
   bloco .acao fica no CSS caso volte, mas nunca é exibido. */

/* ---------- topo ---------- */

.topo { position: sticky; top: 0; z-index: 50; background: rgba(244,241,234,0.9);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
.topo.desceu { border-bottom-color: var(--line); }
.topo-in { min-height: 62px; }
.topo .btn { padding: 11px 20px; font-size: 14px; white-space: nowrap; }
/* no celular o botão do topo sai: a barra fixa de baixo cobre a função,
   e ele estava quebrando em duas linhas dentro do header */
@media (max-width: 860px) { .topo .btn { display: none; } }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: clamp(46px, 9vw, 96px) 0 clamp(40px, 7vw, 80px);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-image: url('../assets/hero-busca-desk.jpg');
  background-size: cover;
  background-position: 62% 50%;
  opacity: 0.92;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(244,241,234,0.30) 0%, rgba(244,241,234,0.72) 46%, rgba(244,241,234,0.94) 74%, var(--cream) 100%),
    linear-gradient(270deg, rgba(244,241,234,0.62) 0%, rgba(244,241,234,0.20) 62%, rgba(244,241,234,0.10) 100%);
}
.hero .wrap { position: relative; z-index: 1; }

.hero .eyebrow { margin-bottom: 16px; }
.hero h1 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(37px, 8.6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 16ch;
  text-wrap: balance;
  margin: 0 0 22px;
}
.hero h1 em { font-style: normal; font-weight: 300; color: var(--teal-deep); }
.hero .sub { font-size: clamp(17px, 4.2vw, 20px); max-width: 40ch; margin: 0 0 30px; color: var(--ink-soft); }

.hero-cta { display: flex; flex-direction: column; gap: 11px; }
.hero-cta .btn, .hero-cta .btn-ghost { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
@media (min-width: 620px) { .hero-cta { flex-direction: row; } .hero-cta .btn, .hero-cta .btn-ghost { padding-left: 30px; padding-right: 30px; } }

/* selo de credibilidade, logo abaixo do CTA */
.selo { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.selo i { font-style: normal; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.selo i b { font-family: var(--display); font-weight: 500; color: var(--teal-deep); font-size: 14px; }
.selo svg { width: 15px; height: 15px; flex: none; color: var(--teal); }

/* ---------- cabeçalho de seção ---------- */

.head { max-width: 62ch; margin-bottom: clamp(30px, 5vw, 52px); }
.head h2 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(27px, 6.4vw, 46px);
  line-height: 1.14; letter-spacing: -0.02em;
  text-wrap: balance; margin: 0 0 12px;
}
/* :not(.eyebrow) porque o eyebrow também é um <p> dentro de .head, e
   esta regra vinha depois da base, sobrescrevendo o tamanho e a margem
   dele: virava 16px com margem zero, colado no título. */
.head p:not(.eyebrow) { font-size: clamp(16px, 4vw, 18px); color: var(--ink-soft); margin: 0; }

/* eyebrow: menor e menos espaçado que o padrão da base, e com respiro
   até o título logo abaixo. 0.16em de letter-spacing em caixa alta
   deixava a linha larga demais. */
.head .eyebrow, .hero .eyebrow, .eyebrow {
  font-size: clamp(10.5px, 2.7vw, 11.5px);
  letter-spacing: 0.11em;
  gap: 9px;
  margin: 0 0 14px;
}
.eyebrow::before { width: 17px; height: 7px; border-top-width: 1.5px; border-bottom-width: 1.5px; }

/* ---------- a lacuna: linha do tempo ---------- */

.linha { position: relative; padding-left: 30px; }
.linha::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--teal) 0%, var(--terra) 100%);
  opacity: 0.28; border-radius: 2px;
}
.mom { position: relative; padding: 0 0 clamp(24px, 5vw, 34px); }
.mom:last-child { padding-bottom: 0; }
.mom::before {
  content: ""; position: absolute; left: -30px; top: 5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--teal);
}
.mom.fim::before { border-color: var(--terra); background: var(--terra); }
.mom-k {
  font-family: var(--display); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep);
  display: block; margin-bottom: 5px;
}
.mom h3 { font-size: clamp(18px, 4.6vw, 21px); font-weight: 500; margin: 0 0 6px; line-height: 1.3; }
.mom p { font-size: clamp(15px, 3.9vw, 16px); margin: 0; color: var(--ink-soft); }

/* cartão do dado */
.dado {
  margin-top: clamp(32px, 6vw, 44px);
  padding: clamp(26px, 6vw, 38px);
  border-radius: 20px;
  background: var(--offwhite);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.dado-n {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(46px, 13vw, 76px); line-height: 1;
  letter-spacing: -0.03em; color: var(--terra);
  display: block; margin-bottom: 14px;
}
.dado p { font-size: clamp(15.5px, 4vw, 17px); margin: 0 0 12px; }
.dado .fonte { font-size: 13.5px; color: var(--muted); margin: 0; }
.dado .alivio {
  margin: 20px 0 0; padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink); font-size: clamp(15.5px, 4vw, 17px);
}
.dado .btn-ghost { margin-top: 22px; width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 620px) { .dado .btn-ghost { width: auto; padding-left: 30px; padding-right: 30px; } }

/* ---------- frentes ---------- */

.frentes { display: grid; gap: clamp(16px, 3vw, 22px); }
@media (min-width: 860px) { .frentes { grid-template-columns: 1fr 1fr; } }

.fr {
  border-radius: 20px; background: var(--offwhite);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  padding: clamp(26px, 5.5vw, 36px);
  display: flex; flex-direction: column;
}
.fr-ico {
  width: 46px; height: 46px; border-radius: 13px;
  background: rgba(46,139,142,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-deep); margin-bottom: 18px;
}
.fr-ico svg { width: 23px; height: 23px; }
.fr h3 { font-size: clamp(20px, 5vw, 24px); font-weight: 500; margin: 0 0 10px; line-height: 1.26; }
.fr > p { font-size: clamp(15.5px, 4vw, 16px); color: var(--ink-soft); margin: 0; }
.fr ul { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.fr li {
  display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start;
  padding: 12px 0;
  font-size: clamp(15px, 3.9vw, 15.5px); color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.fr li:last-child { border-bottom: 0; padding-bottom: 0; }


/* mockup do painel dentro da frente 02 */
.tela {
  margin-top: 22px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--cream);
}
.tela-topo { display: flex; gap: 5px; padding: 10px 13px; border-bottom: 1px solid var(--line); background: var(--cream-soft); }
.tela-topo i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,73,74,0.16); }
.tela-lin { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); font-size: 13px; }
.tela-lin:last-child { border-bottom: 0; }
.tela-lin b { font-weight: 500; color: var(--ink); font-family: var(--display); }
.tela-lin span { margin-left: auto; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  font-family: var(--display); font-weight: 500; padding: 4px 9px; border-radius: 20px; }
.tela-lin .e-hoje { background: rgba(201,113,61,0.13); color: #9C5326; }
.tela-lin .e-esp  { background: rgba(46,139,142,0.13); color: var(--teal-deep); }
.tela-lin .e-ret  { background: rgba(0,73,74,0.08); color: var(--muted); }
.tela-lin em { font-style: normal; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }

/* ---------- recusa (fundo escuro) ---------- */

.escuro { background: var(--dark); color: var(--offwhite); }
.escuro .head h2 { color: var(--offwhite); }
.escuro .head p { color: rgba(250,248,245,0.72); }
.escuro .eyebrow { color: var(--teal-bright); }

.nao { display: grid; gap: 0; }
@media (min-width: 860px) { .nao { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); } }
.nao-i {
  display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start;
  padding: 17px 0; border-bottom: 1px solid rgba(250,248,245,0.13);
}
.nao-i svg { width: 17px; height: 17px; color: var(--teal-bright); margin-top: 3px; }
.nao-i h4 { font-size: clamp(16px, 4.2vw, 17.5px); font-weight: 500; margin: 0 0 4px; color: var(--offwhite); }
.nao-i p { font-size: clamp(14.5px, 3.8vw, 15px); margin: 0; color: rgba(250,248,245,0.70); line-height: 1.55; }

.escuro .fecho { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(250,248,245,0.16); }
.escuro .fecho p { color: rgba(250,248,245,0.80); font-size: clamp(16px, 4vw, 17px); margin: 0 0 18px; max-width: 46ch; }

/* ---------- escopos: carrossel no celular ---------- */

.escopos {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px var(--pad) 8px;
  margin: 0 calc(-1 * var(--pad));
  scrollbar-width: none;
}
.escopos::-webkit-scrollbar { display: none; }
.escopos > * { scroll-snap-align: center; }
@media (min-width: 860px) {
  .escopos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 20px; }
}

.esc {
  border-radius: 20px; background: var(--offwhite); border: 1px solid var(--line);
  padding: clamp(24px, 5vw, 32px); display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.esc.destaque { border-color: var(--teal); border-width: 1.5px; box-shadow: var(--shadow-lg); }
.esc-tag {
  font-family: var(--display); font-weight: 500; font-size: 11px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal-deep);
  margin: 0 0 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.esc-tag b { background: var(--teal); color: var(--offwhite); padding: 3px 9px; border-radius: 20px; font-size: 10px; letter-spacing: 0.1em; }
.esc-p { font-family: var(--display); font-weight: 200; font-size: clamp(34px, 9vw, 44px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 4px; }
.esc-p span { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.esc-q { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.esc h3 { font-size: clamp(17px, 4.4vw, 19px); font-weight: 500; margin: 0 0 14px; line-height: 1.3; }
.esc ul { list-style: none; margin: 0 0 18px; padding: 0; }
.esc li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start;
  padding: 8px 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }

.esc .rota { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }

.dica-arrasta { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.dica-arrasta svg { width: 15px; height: 15px; }
@media (min-width: 860px) { .dica-arrasta { display: none; } }

.nota {
  margin-top: clamp(26px, 5vw, 36px); padding: clamp(22px, 5vw, 30px);
  border-radius: 18px; border: 1px solid var(--line); background: var(--cream-soft);
}
.nota p { font-size: clamp(15px, 3.9vw, 16px); margin: 0 0 12px; color: var(--ink-soft); }
.nota p:last-child { margin-bottom: 0; }
.nota b { color: var(--ink); font-weight: 700; }

/* ---------- faixa de nichos (marquee) ---------- */

/* Fita que corre sozinha logo abaixo do hero, dizendo quem a Mindle
   atende. Dois blocos idênticos: o segundo é cópia visual (aria-hidden)
   e existe só pra emenda ficar contínua quando o primeiro sai da tela.
   Por isso o translateX é de exatamente 50%. Mexer no conteúdo de um
   bloco exige mexer no outro, senão a emenda salta. */

.marquee {
  border-block: 1px solid rgba(250, 248, 245, 0.12);
  padding-block: 16px;
  overflow: hidden;
  position: relative; z-index: 1;
  background: var(--dark);
}
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; align-items: center; gap: 36px; padding-right: 36px; flex: none; }
.marquee-set span {
  font-family: var(--display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.62); white-space: nowrap;
}
.marquee-set .mq-claim { color: var(--offwhite); }
.marquee-set .mq-sep { color: var(--teal-bright); opacity: 0.85; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* quem desliga animação no sistema vê a fita parada, legível */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- processo (trilha vertical) ---------- */

/* Trilha com linha que se preenche conforme a pessoa rola, no lugar das
   quatro colunas antigas. A linha e a bolinha marcam a etapa ativa, e o
   número grande dá a leitura de ordem sem depender de ler o rótulo. */

.rail { position: relative; }
.rail-line {
  position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px;
  background: var(--line);
}
.rail-progress {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--teal);
  transform: scaleY(0); transform-origin: 0 0;
  display: block;
}

.steps {
  list-style: none;
  margin: 0;
  display: grid; gap: clamp(3.5rem, 7vw, 6rem);
  padding-left: clamp(32px, 5vw, 64px);
}
.step {
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: clamp(80px, 11vw, 150px) 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}
.node {
  position: absolute;
  left: calc(-1 * clamp(32px, 5vw, 64px));
  top: 12px;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(0, 73, 74, 0.22);
  transition: background-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.step.is-active .node {
  background: var(--teal);
  box-shadow: 0 0 0 6px rgba(46, 139, 142, 0.14);
}
.step-num {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--cream-soft);
  transition: color 0.6s var(--ease);
}
.step.is-active .step-num { color: var(--teal); }
.step-tag {
  font-family: var(--display); font-weight: 500;
  font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.step-body { max-width: 56ch; }
.step-body h3 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; margin: 0 0 10px; }
.step-body p:not(.step-tag) { font-size: clamp(15px, 3.9vw, 16px); margin: 0; color: var(--ink-soft); }

@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: 12px; }
  .step-num { font-size: 56px; }
}

/* ---------- faq em acordeão ---------- */

.faq { max-width: 74ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 19px 0; min-height: 46px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(16.5px, 4.3vw, 18.5px); line-height: 1.36;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-left: auto; margin-top: 5px;
  border-right: 2px solid var(--teal-deep); border-bottom: 2px solid var(--teal-deep);
  transform: rotate(45deg); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 4px; }
.faq-c { padding: 0 0 22px; font-size: clamp(15.5px, 4vw, 16.5px); color: var(--ink-soft); max-width: 66ch; }
.faq-c p { margin: 0; }
.faq-c a { color: var(--teal-deep); }

/* ---------- fechamento ---------- */

.final { text-align: center; }
/* o margin-bottom precisa ser explícito: sem ele o h2 herda margin:0
   da regra de cabeçalho e o texto de apoio cola no título. O valor
   acompanha o vão que existe abaixo do texto, até o botão. */
.final h2 { max-width: 18ch; margin: 0 auto 30px; }
.final .sub { max-width: 46ch; margin: 0 auto 30px; color: var(--ink-soft); font-size: clamp(16px, 4vw, 18px); }
.final-cta { display: flex; flex-direction: column; gap: 11px; align-items: stretch; max-width: 380px; margin: 0 auto; }
.final-cta .btn, .final-cta .btn-ghost { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 620px) { .final-cta { flex-direction: row; justify-content: center; max-width: none; } .final-cta .btn, .final-cta .btn-ghost { padding-left: 30px; padding-right: 30px; } }

/* espaço pra barra fixa não cobrir o rodapé */
@media (max-width: 860px) { .pe { padding-bottom: 96px; } }

/* ---------- animação de entrada ---------- */

.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rv.on { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.07s; }
.rv-d2 { transition-delay: 0.14s; }
.rv-d3 { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .acao { transition: none; }
  .faq summary::after { transition: none; }
  html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }

/* ---------- acessibilidade e marca ---------- */

.pula {
  position: absolute; left: 12px; top: -70px; z-index: 100;
  background: var(--teal-deep); color: var(--offwhite);
  padding: 13px 20px; min-height: 44px; display: inline-flex; align-items: center;
  border-radius: 10px; text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: 14px;
  transition: top 0.2s var(--ease);
}
.pula:focus { top: 12px; }

.marca { display: inline-block; border-radius: 4px; line-height: 0; }
.marca:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 5px; }

/* alvo de toque mínimo em qualquer link de texto dentro de conteúdo */
.faq-c a { text-underline-offset: 3px; }

/* alvos de toque: logo e links inline dentro do FAQ */
.marca { padding: 6px 0; }
.faq-c a { display: inline-block; padding: 4px 0; }

/* o btn-ghost dentro da barra fixa precisa de fundo próprio:
   sobre o vidro fosco ele estava se misturando com o conteúdo atrás */
.acao .btn-ghost {
  background: var(--offwhite);
  border: 1px solid var(--line);
  text-decoration: none;
}

/* o header é sticky: sem isso, âncoras e rolagem programática
   escondem o topo da seção atrás dele */
section[id] { scroll-margin-top: 76px; }


/* ---------- ícones dos itens de lista ----------
   Cada item carrega o ícone do que ele diz, não um marcador genérico.
   O <use> aponta pro sprite no topo do body, então o peso é de um
   desenho só por símbolo, mesmo repetindo na página. */

.li-i {
  width: 20px; height: 20px;
  flex: none;
  color: var(--teal);
  margin-top: 1px;
}
.esc .li-i { width: 18px; height: 18px; margin-top: 2px; }

/* o texto do item fica no segundo trilho da grade */
.fr li > span, .esc li > span { min-width: 0; }

/* o check dos escopos tem traço mais grosso e desenho mais simples que
   os ícones descritivos das frentes, então precisa de menos área pra
   ter o mesmo peso visual na página */
.esc .li-i { width: 16px; height: 16px; margin-top: 3px; color: var(--teal-deep); }
.esc li { grid-template-columns: 18px 1fr; gap: 10px; }

/* faixa de herança nos escopos: diz o que o escopo acrescenta ao
   anterior, em vez de listar de novo o que já veio. Substitui a
   necessidade de mostrar ausências. */
.heranca {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 11px;
  background: rgba(46,139,142,0.09);
  font-family: var(--display); font-weight: 500; font-size: 14px;
  color: var(--teal-deep);
  display: flex; align-items: center; gap: 9px;
}
.heranca svg { width: 16px; height: 16px; flex: none; }

/* ===========================================================
   AJUSTES DE CELULAR (26/08/2026)
   O card de escopo tinha 803px numa tela de 844, e header mais
   barra fixa comiam 146px. Não cabia inteiro em tela nenhuma.
   Quatro mudanças, todas só abaixo de 860px: o desktop fica igual.
   =========================================================== */

@media (max-width: 720px) {

  /* 1. header de vidro, mais fino e com o botão de volta.
        A barra de baixo saiu, então o CTA precisa morar aqui. */
  .topo {
    /* vidro precisa ser opaco o bastante pra o texto que passa por
       baixo não competir com o logo. 0.72 deixava o número do card
       atravessar. */
    background: rgba(244, 241, 234, 0.88);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: transparent;
  }
  .topo.desceu { border-bottom-color: var(--line); }
  /* a base fixa height:74px no .topo-in, então min-height não vence */
  .topo-in { height: 54px; gap: 12px; }
  .topo .logo { width: 108px; }

  .topo .btn {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 15px;
    font-size: 13px;
    white-space: nowrap;
    border-radius: 999px;
  }

  /* 2. a barra fixa do rodapé sai de cena */
  .acao { display: none; }
  .pe { padding-bottom: clamp(40px, 8vw, 64px); }

  /* 3. card de escopo mais compacto, pra caber na tela */
  .escopos { grid-auto-columns: 86%; }
  .esc { padding: 22px 20px; border-radius: 18px; }
  .esc-tag { font-size: 10.5px; margin-bottom: 10px; }
  .esc-p { font-size: 30px; }
  .esc-p span { font-size: 13px; }
  .esc-q { font-size: 13px; margin-bottom: 13px; }
  .esc h3 { font-size: 16.5px; margin-bottom: 11px; }
  .esc li { padding: 5px 0; font-size: 13.8px; line-height: 1.42; }
  .esc .li-i { width: 15px; height: 15px; margin-top: 2px; }
  .esc li { grid-template-columns: 17px 1fr; gap: 9px; }
  .esc .rota { padding-top: 12px; font-size: 12.5px; }
  .heranca { margin-bottom: 12px; padding: 9px 12px; font-size: 13px; }
  .heranca svg { width: 14px; height: 14px; }

  /* 4. o topo da seção sobe menos, já que o header encolheu */
  section[id] { scroll-margin-top: 58px; }
}

/* ---------- hero: número da dor no lugar dos selos ---------- */

.fisgada {
  margin: 0 0 28px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(250, 248, 245, 0.82);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: clamp(15px, 3.9vw, 16.5px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 44ch;
}
.fisgada b {
  font-family: var(--display);
  font-weight: 500;
  color: var(--terra);
  font-size: 1.18em;
  letter-spacing: -0.01em;
}

/* ---------- selos, agora na seção de escopos ---------- */

#escopos .selo {
  border-top: 0;
  margin: 0 0 clamp(24px, 4vw, 34px);
  padding-top: 0;
}

/* ---------- legibilidade do texto sobre a foto ----------
   O contraste nominal do subtítulo passava (7.75:1 contra o creme),
   mas ele é medido contra a cor de fundo, não contra a foto que passa
   por baixo. Onde a imagem clareia, o texto sumia. Estas três regras
   resolvem na origem: painel mais opaco atrás do texto, subtítulo em
   tinta mais forte, e a imagem puxada pro lado. */

.hero .sub { color: var(--ink-soft); font-weight: 400; }

.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(244,241,234,0.24) 0%, rgba(244,241,234,0.52) 46%, rgba(244,241,234,0.86) 80%, var(--cream) 100%),
      linear-gradient(270deg, rgba(244,241,234,0.04) 0%, rgba(244,241,234,0.42) 40%, rgba(244,241,234,0.88) 100%);
}


/* ---------- hero no desktop: texto à esquerda, celular à direita ----------
   A foto tem o aparelho ancorado na direita e o respiro na esquerda, então
   o texto fica preso na metade esquerda pra não passar por cima dele. */

@media (min-width: 721px) {
  .hero .wrap > * { max-width: 640px; }
  .hero h1 { max-width: 12ch; }
  .hero .sub { max-width: 34ch; }
  .fisgada { max-width: 40ch; }
}

/* ---------- hero no celular: versão vertical da foto ----------
   A horizontal cortava a cena em coluna estreita: sobrava fundo e o
   celular sumia. A vertical põe o aparelho embaixo e deixa o topo
   livre, que é onde o texto fica. */

@media (max-width: 720px) {
  .hero-bg {
    background-image: url('../assets/hero-busca-mob.jpg');
    background-position: 50% 100%;
    opacity: 0.95;
  }

  /* na vertical o assunto está embaixo, então o véu protege de cima
     pra baixo, ao contrário do desktop */
  .hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(244,241,234,0.93) 0%,
        rgba(244,241,234,0.88) 38%,
        rgba(244,241,234,0.55) 62%,
        rgba(244,241,234,0.34) 82%,
        rgba(244,241,234,0.72) 100%);
  }

  /* a foto agora ocupa a altura toda da seção */
  .hero { padding-bottom: clamp(56px, 12vw, 92px); }
}