/* ==========================================================================
   Components — peças reutilizáveis por todas as seções
   Linguagem editorial: superfícies chapadas, filete de 1px como estrutura,
   nenhum gradiente decorativo e nenhuma sombra em elemento de fluxo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.btn {
  --btn-py: 0.8125rem;
  --btn-px: 1.5rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.btn .icone {
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--dur-base) var(--ease-out);
}

/* --- Sólido: navy chapado, sem gradiente nem brilho --- */
.btn--solid {
  background-color: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--ink-inverse);
}

.btn--solid:hover {
  background-color: var(--navy-600);
  border-color: var(--navy-600);
}

.btn--solid:hover .icone {
  transform: translate3d(2px, -2px, 0);
}

/* --- Outline: o botão característico da referência --- */
.btn--outline {
  background-color: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

/* No header o botão pousa sobre a foto: precisa de borda mais definida */
.site-header__cta.btn--outline {
  border-color: rgba(4, 37, 80, 0.28);
}

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

.btn--outline:hover .icone {
  transform: translate3d(2px, -2px, 0);
}

/* --- Verde: reservado para conversão via WhatsApp --- */
.btn--green {
  background-color: var(--green-600);
  border-color: var(--green-600);
  color: var(--ink-inverse);
}

.btn--green:hover {
  background-color: var(--green-700);
  border-color: var(--green-700);
}

/* --- Texto puro: links de ação discretos --- */
.btn--ghost {
  color: var(--ink-2);
  padding-inline: var(--sp-3);
}

.btn--ghost:hover {
  color: var(--brand-navy);
}

/* --- Tamanhos --- */
.btn--lg {
  --btn-py: 0.9375rem;
  --btn-px: 1.75rem;
  font-size: var(--fs-body);
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Eyebrow / label micro
   O rótulo minúsculo em verde é a assinatura tipográfica do layout:
   marca o início de cada bloco e substitui qualquer badge decorativo.
   -------------------------------------------------------------------------- */

.label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--green-600);
}

/* --------------------------------------------------------------------------
   Enter — animação de entrada na carga, 100% CSS
   Usada acima da dobra. Não depende de JavaScript: o conteúdo do primeiro
   paint nunca fica refém de um script que pode falhar ou atrasar.
   -------------------------------------------------------------------------- */

[data-enter] {
  opacity: 0;
  animation: ox-rise var(--dur-slower) var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}

/* Escalonamento — classes em vez de style inline (compatível com CSP restrita) */
.delay-1 { --d: 70ms; }
.delay-2 { --d: 140ms; }
.delay-3 { --d: 210ms; }
.delay-4 { --d: 280ms; }
.delay-5 { --d: 350ms; }
.delay-6 { --d: 420ms; }
.delay-7 { --d: 490ms; }
.delay-8 { --d: 560ms; }

@media (prefers-reduced-motion: reduce) {
  [data-enter] {
    opacity: 1;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Reveal — entrada ao chegar na viewport, orquestrada por JS
   Reservada às seções ABAIXO da dobra. A classe .js-reveal só é adicionada
   quando o script confirma suporte, então sem JS o conteúdo fica visível.
   -------------------------------------------------------------------------- */

.js-reveal [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

.js-reveal [data-reveal].is-visible {
  animation: ox-rise var(--dur-slower) var(--ease-out) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

/* Concluída a animação, libera a camada de composição */
.js-reveal [data-reveal].is-done {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    animation: none !important;
  }
}