/* css/landing-nova.css — estilos exclusivos da Home (index.html, promovida
   da proposta index_nova em ago/2026). Carregado JUNTO com landing.css, que
   segue fornecendo as classes compartilhadas (.ds-breather, .ds-segment-card,
   .section-heading); o bloco .hero antigo de landing.css ficou sem uso após a
   promoção. */

/* ══════════════════════════════════════════════════════════════════════
   HERO v5 — iteração final: texto e fotografia numa ÚNICA composição.
   A foto é o cenário da mensagem (Creative Direction §12.1: "a primeira
   dobra deve ser dominada por fotografia real"), atrás de um scrim em
   degradê da própria cor da marca — nunca preto genérico. A legibilidade
   não é estimada: o pior pixel da zona de texto foi verificado por cálculo
   sobre os pixels reais da imagem composta com o degradê (ver nota de
   verificação no fim deste bloco) — anti-pattern #76 tratado como
   requisito de engenharia, não de bom senso.

   Mobile: degradê vertical — quase sólido onde vivem slogan, título, CTAs
   e chips; a foto se revela na base do bloco, tingida de terracota (mesmo
   "tom" do tratamento fotográfico do projeto, Creative Direction §3.1).
   Desktop: degradê horizontal — coluna de texto à esquerda, pessoas
   visíveis à direita.

   VERIFICAÇÃO DE CONTRASTE (recalcular se trocar foto ou stops):
   pior pixel da zona de texto (branco #fff sobre foto+scrim), varredura em
   390×546 e 1440×540 sobre os JPEGs reais — mobile 5,22:1 (zona até 79% da
   altura, chips terminam em 75%) · desktop 5,29:1 (coluna até 46% da
   largura). AA exige 4,5:1 (Brand DS §12.1). */
.hero-v5 {
  position: relative;
  background: var(--brand-dark);
  color: #fff;
  overflow: hidden;
}
.hero-v5-bg {
  position: absolute;
  inset: 0;
}
.hero-v5-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.hero-v5-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(124,67,38,0.97) 0%,
    rgba(124,67,38,0.94) 60%,
    rgba(124,67,38,0.82) 78%,
    rgba(124,67,38,0.32) 100%);
}
.hero-v5-conteudo {
  position: relative;
  z-index: 1;
  padding-top: clamp(1.5rem, 4vw, 4rem);
  /* padding inferior = a janela onde a foto se revela no mobile */
  padding-bottom: clamp(8.5rem, 30vw, 10rem);
}
.hero-v5 .ds-eyebrow { color: var(--brand-tint); }
.hero-v5 h1 {
  color: #fff;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.875rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  text-wrap: balance;
}
.hero-v5-lead {
  font-size: clamp(var(--text-base), 0.6vw + .95rem, var(--text-md));
  color: rgba(255,255,255,0.95);
  line-height: 1.5;
  max-width: 30rem;
  margin-bottom: 1rem;
}
.hero-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hero-cta .btn { box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.18); }
@media (max-width: 575.98px) {
  .hero-cta .btn { width: 100%; }
}
/* Credibilidade discreta: três fatos verificáveis, uma linha — nunca selo
   decorativo (Brand DS §1.4). */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  padding: 0;
  margin: 0.75rem 0 0;
  list-style: none;
  font-size: var(--text-sm);
  color: #fff;
}
.hero-chips i { color: var(--brand-tint); margin-right: 0.3rem; }

@media (min-width: 992px) {
  .hero-v5-bg img { object-position: 70% center; }
  .hero-v5-scrim {
    background: linear-gradient(90deg,
      rgba(124,67,38,0.97) 0%,
      rgba(124,67,38,0.93) 40%,
      rgba(124,67,38,0.48) 68%,
      rgba(124,67,38,0.14) 100%);
  }
  .hero-v5-conteudo {
    min-height: clamp(430px, 52vh, 540px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 3.5rem;
  }
  .hero-v5-texto { max-width: 46%; }
}

/* ── FAIXA DO ECOSSISTEMA — "a associação inteira dentro dela" ───────────
   Iteração final: sai a nuvem de 12 chips do mesmo tamanho (sem
   hierarquia, leitura cansativa); entram 3 grupos com ícone + papel +
   pessoas — comunica "toda a comunidade na mesma plataforma" em três
   olhadas, não em doze (Lei de Hick; anti-pattern #78 continua atendido).
   Contraste: branco puro sobre --brand = 5,0:1; sobre o fundo do grupo
   (mistura com --brand-dark) ≥ 5,4:1 (AA, Brand DS §12.1) — hierarquia por
   peso e tamanho, nunca por opacidade. */
.ecossistema {
  background: var(--brand);
  color: #fff;
  padding: var(--space-lg) 0;
  text-align: center;
}
.ecossistema-rotulo {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.ecossistema-grupos {
  display: grid;
  gap: 0.6rem;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--space-md);
}
@media (min-width: 768px) {
  .ecossistema-grupos { grid-template-columns: repeat(3, 1fr); }
}
.eco-grupo {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  background: rgba(124,67,38,0.40);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
}
.eco-grupo > i {
  font-size: 1.35rem;
  color: var(--brand-tint);
  line-height: 1.2;
  flex-shrink: 0;
}
.eco-grupo strong { display: block; margin-bottom: 0.1rem; }
.eco-grupo span { font-size: var(--text-sm); line-height: 1.4; display: block; }
.ecossistema-fecho {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
}

/* Botão WhatsApp secundário sobre fundo escuro */
.btn-whatsapp-outline {
  color: #fff !important;
  border-color: rgba(255,255,255,0.7) !important;
}
.btn-whatsapp-outline:hover,
.btn-whatsapp-outline:focus {
  background: rgba(255,255,255,0.12) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* ── BENEFÍCIOS — grade 2×2 no mobile (copy curta, um incômodo por item) */
@media (max-width: 767.98px) {
  #beneficios .ds-benefit h3 { font-size: var(--text-base); }
}

/* ── TUDO EM UM ÚNICO LUGAR — categorias de funcionalidades ──────────────
   Benefício primeiro (título da categoria é a transformação), módulos como
   chips de apoio — nunca grade fria de ícones (Creative Direction §12.2)
   nem lista técnica (Brand DS §8.3). */
.categoria-card {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-lg);
}
.categoria-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-md);
  margin-bottom: 0.35rem;
}
.categoria-card h3 i { color: var(--brand); font-size: 1.1em; }
.categoria-card > p {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin-bottom: 0.6rem;
}
.categoria-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.categoria-chips li {
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 0.2rem 0.6rem;
}

/* ── DISPOSITIVOS — PLACEHOLDERS PREPARADOS PARA SCREENSHOT REAL ─────────
   Nenhum dashboard inventado, nenhum número fabricado (anti-pattern #66).
   Dentro de cada moldura há apenas o nome real da tela do produto e blocos
   neutros de estrutura — a "silhueta" da interface, no mesmo espírito de um
   skeleton screen (Brand DS §13.1).
   SUBSTITUIÇÃO FUTURA: quando houver screenshot real aprovado, trocar o
   conteúdo interno de .device-screen por <img> — as molduras permanecem,
   sem nenhuma mudança de layout. */
.device-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.device-slot { text-align: center; }
.device-legenda {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0.75rem auto 0;
  max-width: 17rem;
}
.device-legenda strong { display: block; color: var(--ink); }
/* Legendas com a mesma altura para que as bases dos três aparelhos fiquem
   alinhadas na mesma linha (alinhamento = sinal de confiança, Creative
   Direction §10.5). */
@media (min-width: 768px) { .device-legenda { min-height: 4.75rem; } }
.device {
  background: var(--ink);
  border-radius: 20px;
  padding: 9px;
  box-shadow: var(--shadow-lg);
  margin-inline: auto;
}
.device-screen {
  background: var(--surface-alt);
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
}
.device-phone { width: min(210px, 58vw); }
.device-phone .device-screen { height: 340px; }
.device-laptop { display: none; border-radius: 10px 10px 0 0; padding: 9px 9px 0; position: relative; }
.device-laptop .device-screen { width: 320px; height: 220px; border-radius: 6px 6px 0 0; }
.device-laptop::after {
  content: "";
  position: absolute;
  left: -16px; right: -16px; bottom: -10px;
  height: 10px;
  background: var(--ink);
  border-radius: 0 0 10px 10px;
}
.device-desktop { display: none; border-radius: 12px; padding: 10px 10px 20px; }
.device-desktop .device-screen { width: 400px; height: 260px; border-radius: 6px; }
@media (min-width: 768px)  { .device-laptop  { display: block; } }
@media (min-width: 1200px) { .device-desktop { display: block; } }

.device-bar {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  padding: 7px 10px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.device-body { padding: 10px; display: grid; gap: 8px; }
/* Blocos neutros = estrutura da tela, nunca conteúdo inventado. */
.sk {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 9px;
  display: grid;
  gap: 6px;
}
.sk span {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: rgba(33,29,24,0.10);
}
.sk span.w-70 { width: 70%; }
.sk span.w-50 { width: 50%; }
.sk span.w-40 { width: 40%; }
.sk span.tall { height: 22px; border-radius: 6px; }
.sk span.brand { background: rgba(168,90,52,0.35); }
.sk-row { display: flex; gap: 6px; }
.sk-row .sk { flex: 1; }
.sk-cta {
  background: rgba(168,90,52,0.28);
  border-radius: 8px;
  height: 26px;
}

/* ── EVOLUÇÃO / CUSTOMIZAÇÃO (compacta, 3 colunas) ────────────────────── */
.evolucao-item {
  height: 100%;
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.evolucao-item .ds-feature-row-icon { flex-shrink: 0; }
.evolucao-item h3 { font-size: var(--text-md); margin-bottom: 0.25rem; }
.evolucao-item p { font-size: var(--text-sm); }

/* ── CASO REAL COMO HISTÓRIA (grade 2×2 no mobile, copy curta) ────────── */
.historia-step {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 992px) { .historia-step { padding: var(--space-md) var(--space-lg); } }
.historia-step .ds-eyebrow { display: block; margin-bottom: 0.3rem; }
.historia-step p { color: var(--ink-muted); font-size: var(--text-sm); margin: 0; }
.depoimento {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.depoimento blockquote {
  font-size: clamp(var(--text-base), 1vw + 0.85rem, var(--text-lg));
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--space-md);
}
.depoimento-autor { display: flex; align-items: center; gap: var(--space-md); }
.depoimento-autor-simbolo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-dark);
  font-size: 20px;
  flex-shrink: 0;
}

/* ── SEGMENTOS — grade 2×2 no mobile (foto continua protagonista, texto
   curto de apoio; 4 cards empilhados eram a seção mais alta da página) ── */
@media (max-width: 767.98px) {
  #segmentos .ds-segment-body { padding: var(--space-md); }
  #segmentos .ds-segment-body h3 { font-size: var(--text-base); }
}

/* ── PLANOS (resumo na Home; detalhe vive em pages/planos.html) ────────── */
.planos-preco {
  font-size: clamp(var(--text-lg), 1.5vw + 1rem, var(--text-2xl));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
}
.planos-trilha {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}
.planos-trilha li {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.planos-trilha li.destaque {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ── FAQ — accordion na paleta da marca (anti-pattern #85) ──────────── */
#faq .accordion-button:not(.collapsed) {
  background-color: var(--brand-light);
  color: var(--brand-dark);
  box-shadow: inset 0 -1px 0 var(--border-subtle);
}
#faq .accordion-button:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.25rem rgba(168,90,52,0.25);
}
#faq .accordion-button:not(.collapsed)::after {
  filter: hue-rotate(180deg) saturate(0.3) brightness(0.9);
}

/* Links de corpo na cor da marca, nunca azul Bootstrap (Brand DS §6.1). */
main a:not(.btn) {
  color: var(--brand-dark);
  text-decoration-color: rgba(124,67,38,0.4);
}
main a:not(.btn):hover { color: var(--brand); }

/* ── CONTATO + CTA FINAL (uma seção só) ─────────────────────────────── */
.contato-canal {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}
.contato-canal .ds-feature-row-icon { flex-shrink: 0; }
.contato-canal h3 { font-size: var(--text-base); }