/* ============================================================
   Braghini & Co. | components.css
   Camada de componentes: header, logo, navegacao, botoes e
   hero. Depende dos tokens definidos em base.css.
   ============================================================ */

/* ============================================================
   1. Botoes
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-body-s);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  border-radius: var(--radius-sm);
  border: var(--border-ink-rule);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn:active {
  transform: scale(var(--press-scale));
}

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Primario: tinta cheia */
.btn--primary {
  background-color: var(--ink-950);
  color: var(--text-inverse);
  border-color: var(--ink-950);
}

.btn--primary:hover {
  background-color: var(--ink-800);
  border-color: var(--ink-800);
}

/* Secundario: contorno */
.btn--outline {
  background-color: transparent;
  color: var(--text-strong);
  border-color: var(--border-strong);
}

.btn--outline:hover {
  border-color: var(--border-ink);
  background-color: var(--surface-raised);
}

/* Variante compacta (header) */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-caption);
}

/* ============================================================
   2. Header fixo
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-normal) var(--ease-standard);
}

/* Hairline inferior aparece apenas com a pagina rolada */
.site-header.is-scrolled {
  border-bottom-color: var(--border-hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--header-h);
  padding-block: var(--space-3);
}

/* ---- Logo tipografico (lockup de assinatura) ---- */
.logo {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--ink-950);
  line-height: 1;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.logo:hover {
  opacity: var(--hover-fade);
}

.logo__signature {
  font-family: var(--font-signature);
  font-weight: var(--weight-regular);
  font-size: 36px;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

/* Descritor subordinado: pequeno, tinta fraca e tracking de legenda,
   para que a assinatura serif domine opticamente o lockup */
.logo__descriptor {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}

/* Desktop estreito: o lockup completo (Braghini & Co. sobre
   Advisory Board Network) e mais largo; reduz um passo para
   nao disputar espaco com a nav antes do colapso em 860px */
@media (min-width: 861px) and (max-width: 1140px) {
  .site-header .logo__signature {
    font-size: 32px;
  }

  .site-header .logo__descriptor {
    font-size: 12px;
  }
}

/* ---- Navegacao desktop ---- */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Desktop estreito: com 6 itens + CTA e o lockup grande, o gap
   padrao aperta contra a assinatura; fecha um passo entre 861 e
   1140px para preservar a folga sem remover nenhum item */
@media (min-width: 861px) and (max-width: 1140px) {
  .site-nav .site-nav__list {
    gap: var(--space-4);
  }

  .site-nav .site-nav__link {
    font-size: var(--text-caption);
  }
}

.site-nav__link {
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--text-body-s);
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
  color: var(--text-body);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-nav__link:hover {
  color: var(--text-strong);
}

/* Secao visivel: cor de tinta cheia + sublinhado hairline */
.site-nav__link.is-active {
  color: var(--text-strong);
}

.site-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background-color: var(--ink-950);
}

.site-nav__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

/* ---- Acoes do header ---- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ---- Botao hamburger (apenas mobile) ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 1px;
  margin-inline: auto;
  background-color: var(--ink-950);
  transition: transform var(--duration-normal) var(--ease-standard);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* ---- Painel de navegacao mobile ---- */
.mobile-nav {
  display: none;
  padding: var(--space-6) var(--gutter-page) var(--space-10);
  background-color: var(--surface-page);
  border-top: var(--border);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
}

.mobile-nav__link {
  display: block;
  padding-block: var(--space-4);
  font-size: var(--text-body-l);
  font-weight: var(--weight-light);
  color: var(--text-strong);
  border-bottom: var(--border);
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.mobile-nav__link:hover {
  opacity: var(--hover-fade);
}

.mobile-nav__cta {
  margin-top: var(--space-8);
  width: 100%;
}

/* ---- Responsivo: colapsa nav em telas estreitas ---- */
@media (max-width: 860px) {
  :root {
    --header-h: 88px;
  }

  .site-nav,
  .site-header__cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Assinatura serif "Braghini & Co." recua um passo no mobile
     para nao encostar no hamburger; tracking do descritor fecha
     levemente para caber sob ela */
  .logo__signature {
    font-size: 30px;
  }

  .logo__descriptor {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  .mobile-nav:not([hidden]) {
    display: block;
  }
}

/* ============================================================
   3. Hero
   ============================================================ */

/* Dobra exata: o hero ocupa a viewport menos o header fixo e
   centraliza o conteudo, garantindo CTAs visiveis sem scroll */
.hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(24px, 4vh, 56px);
}

.hero .container {
  width: 100%;
}

.hero__content {
  max-width: 820px;
}

/* Ritmo interno mais denso que o stack--loose padrao */
.hero__content > * + * {
  margin-top: var(--space-6);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(34px, 4.2vw, 44px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  overflow-wrap: break-word;
}

.hero__lead {
  max-width: 64ch;
  font-size: var(--text-body-l);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

/* Telas baixas e estreitas: compacta sem perder hierarquia */
@media (max-width: 640px) {
  .hero {
    padding-block: var(--space-3);
  }

  /* Ritmo mais denso no mobile: a linha editorial acrescenta altura e
     os rotulos de CTA (aplicacao) quebram em duas linhas; os gaps
     fecham um passo para manter os dois CTAs na dobra em 375x667 */
  .hero__content > * + * {
    margin-top: var(--space-3);
  }

  .hero__lead {
    font-size: var(--text-body-m);
  }

  /* CTAs empilhados em largura total: rotulos longos deixam de brigar
     por espaco lado a lado e o par cabe na dobra */
  .hero__actions {
    gap: var(--space-2);
    padding-top: 0;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* ============================================================
   3b. Faixa editorial (contraponto entre a hero e o Problema)
   Bloco escuro contido, uma nota sobria em Newsreader italico.
   Nao participa do reveal on scroll (permanece visivel sem JS).
   ============================================================ */
.marquee {
  background-color: var(--ink-950);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: clamp(28px, 5vw, 48px);
}

.marquee__text {
  max-width: 68ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-200);
  text-align: center;
}

/* ============================================================
   4. Cabecalho de secao (padrao eyebrow + titulo + lead)
   ============================================================ */
.section-header {
  max-width: 900px;
}

.section-header__title {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(32px, 4.5vw, var(--text-display-m));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.section-header__lead {
  max-width: 82ch;
  font-size: var(--text-body-l);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* ============================================================
   5. Secao O Problema
   ============================================================ */

/* Fundo alternado (papel quente) para ritmo entre secoes */
.problem {
  background-color: var(--surface-raised);
  border-top: var(--border);
  border-bottom: var(--border);
}

/* Grid editorial das dores: coluna no mobile, 2x2 no desktop */
.problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-16);
  border-top: var(--border);
}

.problem-item {
  padding-block: var(--space-8);
  border-bottom: var(--border);
}

/* Cabecalho do item: icone alinhado a primeira linha do titulo */
.problem-item__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.problem-item__head .icon {
  margin-top: 2px;
}

.problem-item__title {
  font-family: var(--font-sans);
  font-size: var(--text-heading-s);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.problem-item__text {
  margin-top: var(--space-3);
  max-width: 44ch;
  font-size: var(--text-body-m);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

@media (min-width: 861px) {
  .problem__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-20);
  }

  .problem-item {
    padding-block: var(--space-10);
  }
}

/* Ponte de fechamento em destaque tipografico */
.problem__bridge {
  margin-top: var(--space-16);
  max-width: 40ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: clamp(24px, 3.2vw, var(--text-heading-l));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

/* ============================================================
   6. Secao Diferenciais
   ============================================================ */
.differentials {
  background-color: var(--surface-page);
}

/* Pilares: coluna no mobile, 3 colunas hairline no desktop */
.differentials__grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-16);
}

.pillar {
  padding-block: var(--space-8);
  border-top: var(--border);
}

/* Cabecalho do pilar: numeral mono a esquerda, icone a direita,
   sem competir com o numero (mesma linha, pontas opostas) */
.pillar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pillar__number {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

.pillar__title {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-heading-m);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.pillar__text {
  margin-top: var(--space-4);
  font-size: var(--text-body-m);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

@media (min-width: 861px) {
  .differentials__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pillar {
    padding: var(--space-2) var(--space-10) var(--space-2) 0;
  }

  .pillar + .pillar {
    padding-left: var(--space-10);
    border-left: var(--border);
  }

  .pillar:last-child {
    padding-right: 0;
  }
}

/* ============================================================
   7. Secao Solucoes por Desafio
   ============================================================ */

/* Fundo alternado (papel quente), como a secao O Problema */
.solutions {
  background-color: var(--surface-raised);
  border-top: var(--border);
  border-bottom: var(--border);
}

/* Categorias: coluna no mobile, 2x2 no desktop */
.solutions__grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-16);
  border-top: var(--border);
}

.solution-group {
  padding-block: var(--space-8);
  border-bottom: var(--border);
}

/* Cabecalho da categoria: icone alinhado ao titulo serif */
.solution-group__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.solution-group__head .icon {
  margin-top: 4px;
}

.solution-group__title {
  font-family: var(--font-display);
  font-size: var(--text-heading-m);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.solution-group__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Marcador discreto: traco curto hairline */
.solution-group__item {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-body-m);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

.solution-group__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 12px;
  height: 1px;
  background-color: var(--ink-400);
}

@media (min-width: 861px) {
  .solutions__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-20);
  }

  .solution-group {
    padding-block: var(--space-10);
  }
}

/* ============================================================
   8. Secao Planos
   ============================================================ */
.plans {
  background-color: var(--surface-page);
}

/* Cards: coluna no mobile, 3 colunas no desktop */
.plans__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-16);
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background-color: var(--surface-card);
  border: var(--border);
  border-radius: var(--radius-lg);
}

/* Destaque discreto do plano Escala: borda tinta em vez de hairline */
.plan-card--featured {
  border-color: var(--border-ink);
}

/* Camada de entrada gratuita: banner horizontal de largura total,
   superficie warm para distinguir dos cards pagos em branco */
.plan-card--free {
  background-color: var(--surface-raised);
  border-color: var(--border-strong);
}

/* O badge do card gratuito usa o badge base preenchido (tinta cheia),
   dando destaque a "100% Gratuito" em paralelo ao "Mais procurado" */

/* Layout interno do banner: empilhado no mobile, duas colunas no
   desktop (intro + lista de inclusoes) */
.plan-free__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.plan-free__intro {
  display: flex;
  flex-direction: column;
}

.plan-free__focus {
  margin-top: var(--space-6);
  max-width: 44ch;
  font-size: var(--text-body-s);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

.plan-free__cta {
  align-self: flex-start;
  margin-top: var(--space-8);
}

/* Lista de inclusoes do banner: remove o filete e o crescimento do
   card padrao; vira grade de 2 colunas quando ha espaco */
.plan-free__list {
  flex-grow: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

@media (min-width: 861px) {
  .plan-card--free {
    grid-column: 1 / -1;
  }

  .plan-free__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: var(--space-16);
    align-items: center;
  }

  .plan-free__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-8);
  }
}

/* Badge pequeno em caps mono sobre a borda superior */
.plan-card__badge {
  position: absolute;
  top: 0;
  left: var(--space-8);
  transform: translateY(-50%);
  padding: var(--space-1) var(--space-3);
  background-color: var(--ink-950);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-xs);
}

.plan-card__name {
  font-family: var(--font-display);
  font-size: var(--text-heading-l);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.plan-card__subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-body-s);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

/* Faixa de faturamento em mono, como dado tecnico */
.plan-card__range {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

/* Lista de inclusoes; flex-grow alinha foco e CTA na base */
.plan-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border);
}

.plan-card__item {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-body-s);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* Check SVG fino no lugar do marcador, alinhado a primeira linha */
.plan-card__item .icon--check {
  position: absolute;
  left: 0;
  top: 3px;
}

/* Linha de heranca do plano anterior, sem marcador */
.plan-card__item--carry {
  padding-left: 0;
  color: var(--text-muted);
}

.plan-card__focus {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border);
  font-size: var(--text-body-s);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

.plan-card__focus-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.plan-card__cta {
  width: 100%;
  margin-top: var(--space-8);
}

@media (min-width: 861px) {
  .plans__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   9. Secao Modulos Adicionais
   ============================================================ */

/* Fundo alternado (papel quente) apos os planos em branco */
.modules {
  background-color: var(--surface-raised);
  border-top: var(--border);
  border-bottom: var(--border);
}

/* Grid hairline: coluna no mobile, 2 col no tablet, 3x2 no desktop */
.modules__grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-16);
  border-top: var(--border);
}

.module {
  padding-block: var(--space-8);
  border-bottom: var(--border);
}

/* Cabecalho do card: icone alinhado a primeira linha do titulo */
.module__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.module__head .icon {
  margin-top: 2px;
}

.module__title {
  font-family: var(--font-sans);
  font-size: var(--text-heading-s);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.module__text {
  margin-top: var(--space-3);
  max-width: 44ch;
  font-size: var(--text-body-m);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

@media (min-width: 640px) and (max-width: 860px) {
  .modules__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-12);
  }
}

@media (min-width: 861px) {
  .modules__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-16);
  }

  .module {
    padding-block: var(--space-10);
  }
}

/* ============================================================
   10. Secao Metodologia
   ============================================================ */
.methodology {
  background-color: var(--surface-page);
}

/* Lista editorial vertical com hairlines entre os passos */
.methodology__steps {
  margin-top: var(--space-16);
  border-top: var(--border);
}

.method-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-bottom: var(--border);
}

/* Numeral mono grande e discreto, quase marca d'agua */
.method-step__number {
  font-family: var(--font-mono);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-faint);
}

.method-step__title {
  font-family: var(--font-display);
  font-size: var(--text-heading-m);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.method-step__text {
  margin-top: var(--space-4);
  max-width: 62ch;
  font-size: var(--text-body-m);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

@media (min-width: 861px) {
  .method-step {
    grid-template-columns: 160px 1fr;
    column-gap: var(--space-10);
    align-items: start;
    padding-block: var(--space-12);
  }

  .method-step__number {
    padding-top: var(--space-1);
  }
}

/* ============================================================
   11. Secao CTA final (Contato)
   ============================================================ */

/* Bloco escuro que fecha a pagina: inversao total do esquema */
.cta {
  background-color: var(--ink-950);
}

.cta__content {
  max-width: 760px;
}

/* Eyebrow em versao clara sobre a tinta */
.cta__eyebrow {
  color: var(--ink-400);
}

.cta__title {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(34px, 5.5vw, var(--text-display-l));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--ink-50);
}

.cta__lead {
  max-width: 58ch;
  font-size: var(--text-body-l);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--ink-300);
}

.cta__actions {
  padding-top: var(--space-2);
}

/* Botao claro sobre o fundo escuro */
.btn--inverse {
  background-color: var(--paper);
  color: var(--ink-950);
  border-color: var(--paper);
}

.btn--inverse:hover {
  background-color: var(--ink-100);
  border-color: var(--ink-100);
}

.btn--inverse:focus-visible {
  outline-color: var(--paper);
}

/* ============================================================
   12. Footer
   ============================================================ */

/* Continua o bloco escuro do CTA; hairline clara faz a divisa */
.site-footer {
  background-color: var(--ink-950);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--space-16) var(--space-10);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
}

/* Mesmo lockup do header, em versao clara */
.site-footer__logo {
  color: var(--ink-50);
}

.site-footer__logo:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
}

.site-footer__link {
  font-family: var(--font-sans);
  font-size: var(--text-body-s);
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
  color: var(--ink-300);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-footer__link:hover {
  color: var(--ink-50);
}

.site-footer__link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

/* Tagline discreta em serifa italica clara */
.site-footer__tagline {
  margin-top: var(--space-12);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: var(--text-body-l);
  line-height: var(--leading-relaxed);
  color: var(--ink-400);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__copy {
  font-size: var(--text-caption);
  font-weight: var(--weight-light);
  color: var(--ink-400);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.site-footer__link--legal {
  font-size: var(--text-caption);
  color: var(--ink-400);
}

.site-footer__link--legal:hover {
  color: var(--ink-100);
}

@media (min-width: 861px) {
  .site-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ============================================================
   13. Reveal on scroll (estados de entrada)
   A classe .reveal e adicionada apenas via JavaScript; sem JS
   nada aqui se aplica e a pagina permanece visivel. Com
   prefers-reduced-motion: reduce o bloco inteiro e ignorado.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   14. Icones (SVG inline, traco 1.5, sempre em tinta)
   Estilo Lucide: viewBox 24, stroke fino, cor herdada via
   currentColor. Decorativos: todos carregam aria-hidden.
   ============================================================ */
.icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ink-600);
}

/* Check fino das listas de plano: menor e mais recuado */
.icon--check {
  width: 16px;
  height: 16px;
  color: var(--ink-500);
}

/* Ancoras nao ficam escondidas sob o header fixo */
[id] {
  scroll-margin-top: 96px;
}

/* ============================================================
   15. Secao Sobre o Fundador (bloco escuro premium)
   Inversao monocromatica: tinta ink-950 ao fundo, texto claro.
   Prova de autoridade antes da oferta. Sem cor, so tinta.
   ============================================================ */
.founder {
  background-color: var(--ink-950);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Eyebrow e titulo em versao clara sobre a tinta */
.founder__eyebrow {
  color: var(--ink-400);
}

.founder__title {
  color: var(--ink-50);
}

.founder__lead {
  margin-top: var(--space-6);
  max-width: 82ch;
  font-size: var(--text-body-l);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--ink-300);
}

/* Tres facetas: coluna no mobile, 3 colunas hairline no desktop */
.founder__grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.founder-facet {
  padding-block: var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Subtitulo pequeno em caps mono, tinta clara atenuada */
.founder-facet__title {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-400);
}

.founder-facet__text {
  margin-top: var(--space-4);
  font-size: var(--text-body-m);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--ink-300);
}

@media (min-width: 861px) {
  .founder__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .founder-facet {
    padding: var(--space-8) var(--space-10) var(--space-8) 0;
  }

  .founder-facet + .founder-facet {
    padding-left: var(--space-10);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .founder-facet:last-child {
    padding-right: 0;
  }
}

/* Faixa de estatisticas em mono: numero grande claro + label atenuado,
   com divisores hairline claros entre os itens */
.founder__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.founder-stat {
  padding: var(--space-8) var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Divisor vertical entre colunas (nao na primeira de cada linha) */
.founder-stat:nth-child(odd) {
  padding-left: 0;
}

.founder-stat:nth-child(even) {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.founder-stat__number {
  font-family: var(--font-mono);
  font-size: clamp(32px, 5vw, 44px);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-50);
}

.founder-stat__label {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
  line-height: var(--leading-normal);
  color: var(--ink-400);
}

@media (min-width: 861px) {
  .founder__stats {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Reseta as regras mobile de par/impar e aplica divisor por coluna */
  .founder-stat:nth-child(odd),
  .founder-stat:nth-child(even) {
    padding-left: var(--space-8);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .founder-stat:first-child {
    padding-left: 0;
    border-left: none;
  }
}

/* ============================================================
   16. Secao Boardroom (showcase editorial, tier gratuito)
   Fundo branco entre o bloco escuro do fundador e o warm de
   solucoes. Duas colunas assimetricas: copy + recursos de um
   lado, o print principal numa moldura flutuante do outro, com
   chamadas anotadas, print secundario em camada e float sutil.
   ============================================================ */
.boardroom {
  background-color: var(--surface-page);
  overflow: hidden; /* protege contra overflow horizontal das camadas */
}

/* -- Cabecalho editorial do tour --------------------------- */
.boardroom__title {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(32px, 4.5vw, var(--text-display-m));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.boardroom__lead {
  margin-top: var(--space-6);
  max-width: 78ch;
  font-size: var(--text-body-l);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

.boardroom__lead strong {
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}

/* ------------------------------------------------------------
   Product tour: tablist (capitulos) + midia com crossfade.
   Toda a animacao vive em @media (prefers-reduced-motion:
   no-preference); no estado reduzido a UI aparece no valor
   final. Sem JS, o primeiro slide e todos os paineis permanecem
   visiveis (progressive enhancement, comportamento via JS).
   ------------------------------------------------------------ */
.tour {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-top: var(--space-12);
}

/* Rotulo mono caps que abre a coluna dos capitulos */
.tour__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* -- Coluna dos capitulos: tablist ------------------------- */
.tour__tabs {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-6);
  border-left: 1px solid var(--border-hairline);
}

.tour-tab {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  margin-left: -1px;
  text-align: left;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  transition:
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.tour-tab:hover {
  color: var(--text-strong);
  background-color: var(--surface-raised);
}

.tour-tab[aria-selected='true'] {
  color: var(--text-strong);
  border-left-color: var(--ink-950);
  background-color: var(--surface-raised);
  /* Colapsa o respiro inferior do rotulo ativo: a descricao encosta
     logo abaixo, formando um bloco continuo com o painel */
  padding-bottom: var(--space-2);
}

.tour-tab__index {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
}

.tour-tab[aria-selected='true'] .tour-tab__index {
  color: var(--text-muted);
}

.tour-tab__label {
  font-family: var(--font-sans);
  font-size: var(--text-heading-s);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
}

/* -- Paineis descritivos (acordeao inline) -----------------
   Cada capitulo agrupa o rotulo (tab) e a sua descricao (panel).
   So o capitulo ativo revela o painel, logo sob o proprio rotulo;
   os inativos ficam compactos (indice + rotulo). O painel ativo
   continua a barra/tinta do rotulo, lendo-se como um bloco unico. */
.tour-chapter {
  display: block;
}

.tour-panel[hidden] {
  display: none;
}

.tour-panel {
  margin-left: -1px;
  padding: 0 var(--space-5) var(--space-6);
  border-left: 2px solid var(--ink-950);
  background-color: var(--surface-raised);
}

.tour-panel:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.tour-panel__text {
  /* Sem margem superior: o respiro minimo vem do padding-bottom do
     rotulo ativo, mantendo rotulo + descricao como um bloco continuo */
  margin-top: 0;
  max-width: 52ch;
  font-size: var(--text-body-s);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

.tour__cta {
  margin-top: var(--space-10);
}

/* -- Coluna da midia: palco com crossfade ------------------
   Grade sobreposta (todos os slides na mesma celula): a altura
   do palco acompanha sempre o slide mais alto, sem salto ao
   trocar de capitulo. Slides inativos ficam com opacity 0 e sao
   removidos do foco/AT via JS (inert + aria-hidden). */
.tour-stage {
  position: relative;
  display: grid;
}

.tour-slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}

.tour-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.tour-frame {
  position: relative;
  margin: 0;
  height: 100%;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.tour-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* -- Slide do Score: anel SVG proprio ---------------------- */
.score-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.score-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Rotulo da conta de exemplo: nome + faixa de faturamento, como um
   registro real de dashboard (mono sobrio, alinhado ao centro do card) */
.score-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.score-card__account {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.score-card__range {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.score-ring {
  position: relative;
  width: clamp(140px, 34%, 220px);
  aspect-ratio: 1;
}

.score-ring__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.score-ring__track {
  stroke: var(--ink-200);
}

.score-ring__progress {
  stroke: var(--ink-950);
}

.score-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.score-ring__value {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(38px, 8vw, 58px);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}

.score-ring__scale {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.score-dims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
  width: 100%;
  max-width: 320px;
}

.score-dim {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-s);
  font-weight: var(--weight-light);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}

.score-dim:hover {
  color: var(--text-strong);
}

.score-dim__mark {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-xs);
  background-color: var(--ink-400);
}

.score-dim--1 .score-dim__mark { background-color: var(--ink-950); }
.score-dim--2 .score-dim__mark { background-color: var(--ink-700); }
.score-dim--3 .score-dim__mark { background-color: var(--ink-500); }
.score-dim--4 .score-dim__mark { background-color: var(--ink-300); }

.score-dim__label {
  flex: 1 1 auto;
  text-align: left;
}

.score-dim__val {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-body);
}

/* -- Hotspots discretos sobre o print do dashboard --------- */
.tour-hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hotspot {
  position: absolute;
  width: 22px;
  height: 22px;
  padding: 0;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
}

.hotspot--score { top: 27%; left: 31%; }
.hotspot--trend { top: 80%; left: 30%; }

.hotspot__dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background-color: var(--ink-950);
  border: 2px solid var(--paper);
  box-shadow: var(--shadow-sm);
}

.hotspot__tip {
  position: absolute;
  z-index: 3;
  max-width: 200px;
  padding: 6px 10px;
  background-color: var(--ink-950);
  color: var(--text-inverse);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  opacity: 0;
  pointer-events: none;
}

#hotspot-tip-score {
  top: 27%;
  left: 31%;
  transform: translate(-50%, calc(-100% - 16px));
}

#hotspot-tip-trend {
  top: 80%;
  left: 30%;
  transform: translate(-50%, 16px);
}

.hotspot:hover + .hotspot__tip,
.hotspot:focus-visible + .hotspot__tip {
  opacity: 1;
}

/* -- Faixa de estatisticas (count-up ao entrar na viewport) - */
.tour-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-16);
  border-top: 1px solid var(--border-hairline);
  background-color: var(--border-hairline);
}

.tour-stat {
  padding: var(--space-6) var(--space-4) var(--space-4);
  background-color: var(--surface-page);
}

.tour-stat__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--text-strong);
}

.tour-stat__label {
  margin-top: var(--space-2);
  font-size: var(--text-body-s);
  font-weight: var(--weight-light);
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   Desktop: capitulos a esquerda, midia a direita
   ------------------------------------------------------------ */
@media (min-width: 640px) {
  .tour-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .tour {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }

  /* Midia fixa no topo enquanto a lista de capitulos cresce, para
     que o print do capitulo ativo permaneca alinhado ao rail. */
  .tour__media {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    align-self: start;
  }
}

/* ------------------------------------------------------------
   Animacoes do tour: apenas com movimento permitido. Com
   prefers-reduced-motion o crossfade e instantaneo, o anel ja
   aparece no valor final (offset e numero no HTML) e os
   hotspots nao pulsam.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .tour-slide {
    transform: scale(0.99);
    transition:
      opacity var(--duration-normal) var(--ease-out),
      transform var(--duration-normal) var(--ease-out);
  }

  .tour-slide.is-active {
    transform: none;
  }

  /* Descricao do capitulo ativo entra com um fade + deslize sutil
     ao abrir. No modo reduzido nada anima: o painel aparece pronto. */
  .tour-panel:not([hidden]) {
    animation: tour-panel-in var(--duration-normal) var(--ease-out);
  }

  @keyframes tour-panel-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }

  .hotspot__tip {
    transition: opacity var(--duration-fast) var(--ease-standard);
  }

  .hotspot__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    border: 1px solid var(--ink-950);
    animation: hotspot-pulse 2.4s var(--ease-standard) infinite;
  }

  @keyframes hotspot-pulse {
    0% { transform: scale(0.9); opacity: 0.55; }
    70%, 100% { transform: scale(2.1); opacity: 0; }
  }
}