/* ============================================================
   SOS DIREITO — L-1A
   A página mais importante do site. Escrita como jornada de
   consciência: cada bloco empurra pro próximo.
   ============================================================ */

/* ---- Bloco 1: identificação ----
   O mais silencioso da página. Frases grandes, muito respiro,
   sem ícone, sem CTA. O espaço em branco é o argumento. */
.bloco-identificacao .frase {
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.05rem);
  font-weight: var(--peso-corpo);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--texto);
  text-wrap: pretty;
}
.js .bloco-identificacao .frase { opacity: 0; }
.js-sem-motion .bloco-identificacao .frase { opacity: 1; }

.bloco-identificacao .frase + .frase { margin-top: clamp(2rem, 4.5vw, 3.5rem); }

.bloco-identificacao .frase--peso {
  color: var(--principal);
  font-weight: var(--peso-corpo);
}

/* ---- Bloco 2: a primeira vez que o termo aparece ---- */
.bloco-nome__titulo {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-6);
}
.destaque-termo {
  position: relative;
  display: inline-block;
  color: var(--principal);
  font-weight: var(--peso-corpo);
  white-space: nowrap;
  /* Sem contexto de empilhamento próprio, o grifo em z-index -1 cairia
     atrás do fundo da seção e sumiria. */
  isolation: isolate;
}
.destaque-termo__grifo {
  position: absolute;
  left: -0.08em;
  right: -0.08em;
  bottom: 0.04em;
  height: 0.32em;
  background: color-mix(in srgb, var(--principal) 17%, transparent);
  border-radius: 2px;
  z-index: -1;
  transform-origin: left;
}
.js .destaque-termo__grifo { transform: scaleX(0); }
.js-sem-motion .destaque-termo__grifo { transform: scaleX(1); }

/* ---- Bloco 4: a frase que fecha com mais força ---- */
.frase-fecho {
  max-width: 30ch;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2rem);
  font-weight: var(--peso-corpo);
  line-height: 1.3;
  letter-spacing: var(--ls-titulo);
  color: var(--principal);
  text-align: center;
  text-wrap: balance;
}
.frase-fecho::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--principal);
  margin: 0 auto var(--sp-6);
}

/* ---- Bloco 8: a única prova social da página ----
   Uma linha pequena embaixo do botão, e nada além disso. O peso de
   convencimento vem da identificação e da quebra de objeção lá em cima. */
.assinatura-prova {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--texto-inverso-suave);
}

/* A bifurcação do Bloco 3 é o tratamento mais pesado da página. */
@media (min-width: 821px) {
  .caminho--forte { min-height: 100%; }
}