/* ══════════════════════════════════════════════════════════════
   CRYSTAL — COMPONENTS
   Blocos de UI reutilizáveis: logo, nav, botões, pills,
   eyebrows, cards, reveal animations.
   ══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   LOGO
   Símbolo losango em CSS + nome "Crystal"
   Variante --light para uso em fundos escuros
───────────────────────────────────────────────────────────── */
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.014em;
  color: var(--c-ink);
}

/* O losango é criado com dois pseudo-elementos rotacionados */
.logo-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.logo-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  transform: rotate(45deg);
  border-radius: 2px;
}

.logo-mark::after {
  content: '';
  position: absolute;
  inset: 7px;
  background: var(--c-bg);    /* Buraco interno: combina com o fundo */
  transform: rotate(45deg);
  border-radius: 1px;
}

/* Variante clara (fundo escuro) */
.logo--light { color: var(--c-surface-2); }
.logo--light .logo-mark::before { background: var(--c-surface-2); }
.logo--light .logo-mark::after  { background: var(--c-dark); }

/* No footer, o buraco do logo combina com o fundo dark */
.footer .logo-mark::after { background: var(--c-dark); }

/* Transição base do logo — cobre entrada e saída de qualquer estado */
.nav .logo { transition: color 0.3s ease; }
.nav .logo .logo-mark::before { transition: background 0.3s ease; }
.nav .logo .logo-mark::after  { transition: background 0.3s ease; }

/* Logo sobre seções escuras (§03, §06, §07) — branco neutro */
.nav.is-dark .logo { color: #F5F5F5; }
.nav.is-dark .logo .logo-mark::before { background: #F5F5F5; }
.nav.is-dark .logo .logo-mark::after  { background: #1A1614; }

/* Logo sobre o ticker — mesma cor fixa de .is-dark (não mix-blend):
   o ticker é uma faixa sólida full-bleed (var(--c-dark-2), sem gaps
   claros em nenhuma posição horizontal), então não precisa do
   auto-contraste do blend — e sem blend, o vidro do nav (≤768px)
   pode ficar ligado durante essa travessia também. */
.nav.is-ticker .logo { color: #F5F5F5; }
.nav.is-ticker .logo .logo-mark::before { background: #F5F5F5; }
.nav.is-ticker .logo .logo-mark::after  { background: #1A1614; }

/* Logo sobre cards escuros soltos (§01 quote-card, §05 tflow--crystal)
   — mesmo tratamento de .is-dark (cor fixa, não mix-blend): aqui o JS
   já confirmou por geometria que a logo está de fato sobre o card, então
   a cor real por trás é sempre a mesma (ink escuro), sem precisar do
   auto-contraste do blend. */
.nav.is-card-dark .logo { color: #F5F5F5; }
.nav.is-card-dark .logo .logo-mark::before { background: #F5F5F5; }
.nav.is-card-dark .logo .logo-mark::after  { background: #1A1614; }

/* Exceção específica para o card isolado: logo preta, resto claro, em >= 1130px */
@media (min-width: 1130px) {
  .nav.is-card-dark.is-half-dark .logo { color: #1A1614; }
  .nav.is-card-dark.is-half-dark .logo .logo-mark::before { background: #1A1614; }
  .nav.is-card-dark.is-half-dark .logo .logo-mark::after  { background: #F4F0E8; }
}

/* O resto do header inverte junto com a logo — não só ela. Mesmos
   tons (#F5F5F5 / #1A1614) das regras acima, por consistência: o que
   era escuro (texto do pill) fica claro; o que era um botão preto
   sólido (nav-cta/nav-mobile-cta) vira um botão branco sólido. */
.nav.is-dark .nav-pill a,
.nav.is-card-dark .nav-pill a,
.nav.is-ticker .nav-pill a {
  color: #F5F5F5;
}
.nav.is-dark .nav-pill a:hover,
.nav.is-card-dark .nav-pill a:hover,
.nav.is-ticker .nav-pill a:hover {
  background: rgba(245, 245, 245, 0.1);
}

.nav.is-dark .nav-cta,
.nav.is-card-dark .nav-cta,
.nav.is-ticker .nav-cta {
  background: #F5F5F5 !important;
  color: #1A1614 !important;
}

.nav.is-dark .nav-mobile-cta,
.nav.is-card-dark .nav-mobile-cta,
.nav.is-ticker .nav-mobile-cta {
  background: #F5F5F5;
  color: #1A1614;
}


/* ─────────────────────────────────────────────────────────────
   NAV
   Header fixo: logo à esquerda, pill de links ao centro,
   badge de localização à direita.
───────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  max-width: 1440px;
  margin: 0 auto;
  pointer-events: none; /* Permite clicar através do espaço vazio do nav */
}

/* Cada filho do nav volta a receber eventos de clique */
.nav > * { pointer-events: auto; }

/* Pill de navegação — flutuante, com blur.
   Posicionado absolutamente no centro matemático da nav:
   independente das larguras do logo e do badge lateral. */
.nav-pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px 5px 20px;
  background: rgba(255, 253, 248, 0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-pill a {
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--c-ink);
  border-radius: var(--r-full);
  transition: background var(--t-fast) var(--ease-out), color 0.3s ease;
  white-space: nowrap; /* links do pill nunca quebram — evita o CTA virar "bola" */
}

.nav-pill a:hover {
  background: rgba(26, 22, 20, 0.05);
}

/* Botão CTA dentro do pill */
.nav-cta {
  padding: 10px 20px !important;
  font-weight: 500 !important;
  color: var(--c-surface-2) !important;
  background: var(--c-ink) !important;
  border-radius: var(--r-full) !important;
  margin-left: 6px;
  transition: opacity var(--t-fast) var(--ease-out) !important,
              background 0.3s ease !important, color 0.3s ease !important;
}

.nav-cta:hover {
  opacity: 0.85;
  background: var(--c-ink) !important;
}

/* Badge de localização */
.nav-location {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  background: rgba(255, 253, 248, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: 12px;
  color: var(--c-ink);
  transition: color 0.3s ease, background 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-location-dot {
  width: 7px;
  height: 7px;
  background: var(--c-accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.nav.is-dark-final .nav-location-dot {
  background: #ffdda5;
}

/* Botão mobile — visível apenas em telas pequenas (via responsive.css) */
.nav-mobile-cta {
  display: none;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-surface-2);
  background: var(--c-ink);
  border-radius: var(--r-full);
  pointer-events: auto;
  transition: background 0.3s ease, color 0.3s ease;
}


/* ─────────────────────────────────────────────────────────────
   EYEBROW PILL
   Pílula pequena acima dos títulos, anuncia o tema da seção.
   Padrão: § 01 — Nome da seção
───────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 251, 243, 0.8);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  margin-bottom: var(--s-8);
}

.eyebrow span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  font-weight: 500;
}

/* Variante para fundos escuros */
.eyebrow--dark {
  background: rgba(250, 246, 238, 0.05);
  border-color: var(--c-border-dk);
}

.eyebrow--dark span {
  color: var(--c-accent-lt);
}


/* ─────────────────────────────────────────────────────────────
   BOTÕES
   Primário (dark fill), Outline (borda leve), variantes
───────────────────────────────────────────────────────────── */

/* Botão primário */
.btn {
  position: relative;
  overflow: hidden;            /* contém o shimmer dentro do pill */
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 28px 17px 32px;
  background: var(--c-ink);
  color: var(--c-surface-2);
  border-radius: var(--r-full);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), var(--shadow-md);
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  white-space: nowrap;
}

.btn:hover  { opacity: 0.87; transform: translateY(-1px); }
.btn:active { opacity: 1;    transform: translateY(0); }

/* Shimmer — luz diagonal atravessando o botão (uma passada por hover).
   Só no botão escuro: em fundo escuro a luz aparece. Loop seria "saldo";
   passada única é premium. Em repouso fica fora da tela (sem efeito);
   no hover, cruza a superfície uma vez, por cima de texto e ícone. */
.btn:not(.btn--light)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  pointer-events: none;
}

.btn:not(.btn--light):hover::after {
  animation: btn-shimmer var(--t-slow) var(--ease-out);
}

@keyframes btn-shimmer {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

/* Ícone circular à direita do texto */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  background: var(--c-surface-2);
  color: var(--c-ink);
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  flex-shrink: 0;
}

.btn-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: auto;
}

/* Modificador: tamanho grande (CTA final) */
.btn--lg {
  padding: 22px 34px 22px 38px;
  font-size: 17px;
  gap: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 2px rgba(26,22,20,0.12), 0 20px 48px rgba(26,22,20,0.22);
}

.btn--lg .btn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 0;
  line-height: 0;
}

.btn--lg .btn-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: auto;
}

/* Modificador: versão clara (uso em fundos escuros) */
.btn--light {
  background: var(--c-surface-2);
  color: var(--c-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--shadow-dk-lg);
}

.btn--light .btn-icon {
  background: var(--c-ink);
  color: var(--c-surface-2);
}

/* Botão outline */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 22px 17px 26px;
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 400;
  border-radius: var(--r-full);
  border: 1px solid var(--c-border-lg);
  background: #0E0E0E;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  transition: background var(--t-fast) var(--ease-out);
  white-space: nowrap;
}

.btn-outline:hover { background: #1A1A1A; }

/* Ícone SVG do btn-outline (arrow para baixo, sem fundo) */
.btn-outline .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  min-width: 14px;
  background: none;
  color: #FFFFFF;
  border-radius: 0;
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
}

.btn-outline .btn-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: auto;
}


/* ─────────────────────────────────────────────────────────────
   TRUST STRIP
   Linha de micro-indicadores abaixo dos CTAs
───────────────────────────────────────────────────────────── */
.trust-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: #FAF6EE;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  justify-content: center;
}

/* Cada frase + sua(s) bolinha(s) é um único item flex — a quebra de
   linha nunca separa uma bolinha do texto ao qual pertence (o grupo
   inteiro pula de linha junto, nunca uma palavra ou bolinha sozinha). */
.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}

.trust-dot {
  width: 4px;
  height: 4px;
  background: var(--c-ink-3);
  border-radius: 50%;
  opacity: 0.4;
  flex-shrink: 0;
}

/* O ponto final (depois do último item) só deve existir quando a
   linha realmente quebra — decidido via JS (ver main.js,
   initTrustStripDot), não por breakpoint: a faixa onde o wrap
   acontece não é contínua (varia com o texto/fonte disponíveis),
   então nenhum valor fixo de largura cobre certo todos os casos. */


/* ─────────────────────────────────────────────────────────────
   DIAMANTE DECORATIVO
   Elemento visual de identidade: quadrado rotacionado 45°
───────────────────────────────────────────────────────────── */
.diamond-deco {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(26, 22, 20, 0.04);
  pointer-events: none;
  border-radius: 2px;
}


/* ─────────────────────────────────────────────────────────────
   BADGES
   Pílulas de informação (trust strip do CTA final)
───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  background: rgba(255, 251, 243, 0.6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: 12.5px;
  color: var(--c-ink);
}

.badge-dot {
  width: 7px;
  height: 7px;
  background: var(--c-accent);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   REVEAL — Animação de entrada por scroll
   Ativada via JS (IntersectionObserver) adicionando .is-visible.
   Delays escalonados para grupos de cards.
───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays para revelar cards em sequência (múltiplos de --stagger) */
.reveal-d1 { transition-delay: calc(var(--stagger) * 1); }
.reveal-d2 { transition-delay: calc(var(--stagger) * 2); }
.reveal-d3 { transition-delay: calc(var(--stagger) * 3); }
.reveal-d4 { transition-delay: calc(var(--stagger) * 4); }

/* Entrada do hero — "blur rise": cada elemento materializa de um leve
   desfoque enquanto sobe uma distância curta (movimento longo e elegante,
   deslocamento pequeno). Todos os .reveal-hero partilham o mesmo gesto,
   sincronizados pela sequência escalonada do JS — o conjunto guia o olhar
   de cima a baixo, em harmonia. */
.reveal-hero {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(12px);
  transition: opacity var(--t-signature) var(--ease-out),
              transform var(--t-signature) var(--ease-out),
              filter var(--t-signature) var(--ease-out);
}

.reveal-hero.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}


/* ─────────────────────────────────────────────────────────────
   REVEAL PALAVRA-A-PALAVRA
   Primitivo de assinatura para o pico emocional: cada palavra entra
   com atraso escalonado (--stagger-slow), fazendo a frase "chegar"
   aos poucos — copy e movimento dizendo a mesma coisa.
   O índice de cada palavra (--word-i) é definido no JS.
   Aplicado via [data-word-stagger]; sem JS, degrada para texto normal.
───────────────────────────────────────────────────────────── */
.word-stagger .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(8px);
  transition: opacity var(--t-signature) var(--ease-out),
              transform var(--t-signature) var(--ease-out),
              filter var(--t-signature) var(--ease-out);
  transition-delay: calc(var(--word-i, 0) * var(--stagger-slow));
}

.word-stagger.is-visible .word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}