/* ==========================================================================
   b.elzark — Blocos específicos das landing pages
   Complementa home.css (que serve de base de componentes do site inteiro).
   ========================================================================== */

/* --- Navegação: página atual --------------------------------------------- */
.menu-desktop a[aria-current="page"],
.menu-mobile a[aria-current="page"] { font-weight: var(--peso-black); opacity: 1; }

/* --- Dor: as frases na voz do público ------------------------------------- */
.dor-grade {
  display: grid;
  gap: var(--e-4);
}
.citacao {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  padding-top: clamp(3rem, 8vw, 4rem);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.citacao::before {
  content: "\201C";
  position: absolute;
  top: 0.25rem;
  left: clamp(1.25rem, 3.5vw, 2rem);
  font-size: clamp(3.5rem, 10vw, 5rem);
  font-weight: var(--peso-thin);
  line-height: 1;
  color: var(--texto-suave);
}
.citacao p {
  font-size: var(--t-h4);
  font-weight: var(--peso-medium);
  line-height: 1.35;
}
.dor-fecho {
  margin-top: clamp(2rem, 6vw, 3rem);
  font-size: var(--t-corpo-g);
  font-weight: var(--peso-light);
  color: var(--texto-suave);
  max-width: 46ch;
}
.dor-fecho strong { color: var(--texto); font-weight: var(--peso-bold); }
@media (min-width: 40rem) { .dor-grade { grid-template-columns: 1fr 1fr; } }

/* --- Desqualificação: os dois caminhos falsos + o verdadeiro --------------- */
.desqual-grade { display: grid; gap: var(--e-4); }
.falso-caminho {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  color: var(--texto-suave);
}
.falso-caminho .tag,
.caminho-real .tag {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--peso-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--e-3);
}
.falso-caminho h3 {
  font-size: var(--t-h4);
  font-weight: var(--peso-bold);
  color: var(--texto);
  margin-bottom: var(--e-3);
}
.caminho-real {
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--texto);
  border-radius: var(--raio);
  background: rgba(0, 0, 0, 0.03); /* destaque sutil em seção clara */
}
.inverso .caminho-real { background: rgba(255, 255, 255, 0.04); }
.caminho-real h3 {
  font-size: var(--t-h3);
  margin-bottom: var(--e-4);
}
.caminho-real p { color: var(--texto-suave); max-width: 60ch; }
.caminho-real p + p { margin-top: var(--e-3); }
.caminho-real strong { color: var(--texto); }
@media (min-width: 48rem) {
  .desqual-grade { grid-template-columns: 1fr 1fr; }
  .desqual-grade .caminho-real { grid-column: 1 / -1; }
  /* Reframe (LP já-tenho-marca): comparação 1x1, cards lado a lado */
  .reframe .desqual-grade .caminho-real { grid-column: auto; }
}

/* --- Picture: quadro futuro ------------------------------------------------ */
.picture-secao p {
  font-size: clamp(1.375rem, 4.5vw, 2.25rem);
  font-weight: var(--peso-thin);
  line-height: 1.35;
  max-width: 28ch;
}
.picture-secao p strong {
  font-weight: var(--peso-black);
}
.picture-secao p + p { margin-top: clamp(1.5rem, 5vw, 2.5rem); }

/* --- Prova: números + apoio ------------------------------------------------ */
.prova-apoio {
  margin-top: clamp(2rem, 6vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--borda);
  font-size: var(--t-corpo-g);
  font-weight: var(--peso-light);
  color: var(--texto-suave);
  max-width: 52ch;
}
.prova-apoio strong { color: var(--texto); font-weight: var(--peso-medium); }

/* --- Redução de risco ------------------------------------------------------- */
.risco-grade { display: grid; gap: var(--e-4); }
.risco-item {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.risco-item .codigo {
  display: block;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: var(--peso-thin);
  line-height: 1;
  color: var(--texto-suave);
  margin-bottom: var(--e-4);
  font-variant-numeric: tabular-nums;
}
.risco-item h3 {
  font-size: var(--t-h4);
  font-weight: var(--peso-bold);
  margin-bottom: var(--e-2);
}
.risco-item p { color: var(--texto-suave); }
@media (min-width: 48rem) { .risco-grade { grid-template-columns: repeat(3, 1fr); } }