/* ============================================================
   SISTEMA VISUAL DAS LANDING PAGES · HYPERFLOW
   ------------------------------------------------------------
   Linguagem editorial: estrutura por FIOS e ESPAÇO, não por
   caixas. Sem cantos arredondados, sem gradientes decorativos,
   sem sombras. Tipografia e a marca fazem o trabalho.

   COMO USAR: carregue DEPOIS do <style> da própria LP:
     <link rel="stylesheet" href="brand/hyperflow-lp.css">

   PROTEÇÃO DOS MOCKUPS: qualquer elemento marcado com a classe
   .hf-keep (e tudo dentro dele) fica intocado. Use nos mockups
   de WhatsApp e no iPhone, que PRECISAM de cantos arredondados
   e sombras para parecerem reais.
   ============================================================ */

:root {
  /* Marca (manual oficial) */
  --hf-navy: #24135f;
  --hf-navy-deep: #1a0d4a;
  --hf-purple: #685bc7;
  --hf-lavender: #d5d0fc;
  --hf-sage: #d9f5c4;
  --hf-wa: #25d366;
  --hf-wa-deep: #128c4b;

  /* Superfícies */
  --hf-paper: #fafaff;
  --hf-white: #ffffff;
  --hf-tint: #efedff;

  /* Texto */
  --hf-ink: #24135f;
  --hf-ink-2: #3a2c58;
  --hf-ink-3: #786d9f;

  /* Fios: o elemento estrutural do sistema */
  --hf-rule: #e8e6f0;
  --hf-rule-strong: #cfcadf;
  --hf-rule-dark: rgba(255, 255, 255, 0.16);

  /* Ritmo vertical */
  --hf-sec: clamp(64px, 9vw, 128px);
}

/* ── 1. RESET EDITORIAL ─────────────────────────────────────
   Mata a "impressão digital de IA": cantos arredondados e
   sombras. Preserva tudo dentro de .hf-keep (mockups). */

*:not(.hf-keep):not(.hf-keep *) {
  border-radius: 0 !important;
}

*:not(.hf-keep):not(.hf-keep *) {
  box-shadow: none !important;
}

/* Exceções legítimas: formas que são redondas por natureza */
.hf-round,
.hf-round * {
  border-radius: 999px !important;
}

/* ── 2. TIPOGRAFIA ──────────────────────────────────────────
   Display pesado e apertado; corpo largo e respirando. */

.hf-display {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--hf-ink);
}

.hf-h2 {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--hf-ink);
}

.hf-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--hf-ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}

/* Olho da seção: mono, numerado, caixa alta espaçada.
   É a assinatura que conecta todas as páginas. */
.hf-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  font-family: "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hf-purple);
}
/* numero da secao removido a pedido do cliente: sem ::before em .hf-eyebrow */

/* Números e dados em mono, sempre tabulares */
.hf-num {
  font-family: "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Número gigante de destaque (estatística) */
.hf-stat {
  font-family: "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--hf-ink);
}

/* ── 3. ESTRUTURA POR FIOS ──────────────────────────────────
   Substitui os cards: a informação é separada por linhas de
   1px e por espaço, como em jornal. */

.hf-sec {
  padding-block: var(--hf-sec);
}

.hf-wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.hf-rule {
  border: 0;
  border-top: 1px solid var(--hf-rule);
  margin: 0;
}

/* Lista de itens separada por fios (troca a grade de cards) */
.hf-list {
  border-top: 1px solid var(--hf-rule);
}
.hf-list > * {
  border-bottom: 1px solid var(--hf-rule);
  padding-block: clamp(20px, 3vw, 32px);
}

/* Grade assimétrica: quebra o padrão de 3 colunas iguais */
.hf-split {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) {
  .hf-split {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .hf-split--wide {
    grid-template-columns: 1.4fr 1fr;
  }
  .hf-split--narrow {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

/* Colunas divididas por fio vertical, sem caixa */
@media (min-width: 900px) {
  .hf-cols {
    display: grid;
    grid-template-columns: repeat(var(--n, 3), 1fr);
    border-top: 1px solid var(--hf-rule);
  }
  .hf-cols > * {
    padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
    border-left: 1px solid var(--hf-rule);
  }
  .hf-cols > *:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .hf-cols > *:last-child {
    padding-right: 0;
  }
}
@media (max-width: 899px) {
  .hf-cols > * {
    padding-block: 22px;
    border-bottom: 1px solid var(--hf-rule);
  }
}

/* ── 4. FUNDOS ──────────────────────────────────────────────
   Chapados. Sem gradiente decorativo. */

.hf-bg-paper { background: var(--hf-paper); }
.hf-bg-white { background: var(--hf-white); }
.hf-bg-tint  { background: var(--hf-tint); }

.hf-bg-navy {
  background: var(--hf-navy);
  color: #fff;
}
.hf-bg-navy .hf-display,
.hf-bg-navy .hf-h2,
.hf-bg-navy .hf-stat { color: #fff; }
.hf-bg-navy .hf-lede { color: var(--hf-lavender); }
.hf-bg-navy .hf-eyebrow { color: var(--hf-sage); }
.hf-bg-navy .hf-eyebrow::before { color: rgba(255, 255, 255, 0.45); }
.hf-bg-navy .hf-rule,
.hf-bg-navy .hf-list,
.hf-bg-navy .hf-list > *,
.hf-bg-navy .hf-cols,
.hf-bg-navy .hf-cols > * { border-color: var(--hf-rule-dark); }

/* Foto de fundo com véu navy chapado (sem gradiente) */
.hf-photo {
  position: relative;
  isolation: isolate;
  background: var(--hf-navy-deep);
  color: #fff;
}
.hf-photo > img.hf-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hf-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 13, 74, 0.72);
  z-index: -1;
}
.hf-photo--soft::after { background: rgba(26, 13, 74, 0.55); }
.hf-photo--deep::after { background: rgba(26, 13, 74, 0.85); }

/* ── 5. AÇÕES ───────────────────────────────────────────────
   Retangulares, sólidas, sem brilho. */

.hfx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  padding: 1.05em 1.9em;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.12s ease;
}
.hfx-btn:active { transform: translateY(1px); }
.hfx-btn:focus-visible {
  outline: 2px solid var(--hf-purple);
  outline-offset: 3px;
}

.hfx-btn--wa {
  background: var(--hf-wa);
  color: var(--hf-navy);
}
.hfx-btn--wa:hover { background: #1fbe5b; }

.hfx-btn--navy {
  background: var(--hf-navy);
  color: #fff;
}
.hfx-btn--navy:hover { background: var(--hf-purple); }

.hfx-btn--ghost {
  background: transparent;
  color: var(--hf-navy);
  border-color: var(--hf-rule-strong);
}
.hfx-btn--ghost:hover { border-color: var(--hf-navy); }

.hf-bg-navy .hfx-btn--ghost,
.hf-photo .hfx-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.hf-bg-navy .hfx-btn--ghost:hover,
.hf-photo .hfx-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Link com seta, alternativa ao terceiro botão */
.hf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  color: var(--hf-purple);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.hf-link:hover { color: var(--hf-navy); }
.hf-bg-navy .hf-link,
.hf-photo .hf-link { color: var(--hf-sage); }

/* ── 6. MARCA E PROVA ───────────────────────────────────────
   Selos e logos oficiais, sem moldura. */

.hf-seals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
}
.hf-seals img {
  height: clamp(38px, 5vw, 54px);
  width: auto;
  display: block;
}

.hf-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 52px);
}
.hf-logos img {
  height: clamp(24px, 3vw, 32px);
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.hf-logos img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* Print da plataforma: moldura só de fio, sem sombra */
.hf-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hf-rule);
}
.hf-bg-navy .hf-shot,
.hf-photo .hf-shot { border-color: var(--hf-rule-dark); }

.hf-cap {
  margin-top: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hf-ink-3);
}

/* ── 7. MOVIMENTO ───────────────────────────────────────────
   Discreto: entrada com deslocamento pequeno. */

.hf-rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hf-rv.on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hf-rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  * { animation-duration: 0.01ms !important; }
}

/* ── 8. CAMADA TECNOLÓGICA ──────────────────────────────────
   O "efeito tech" da marca: fios de circuito com pulsos de
   dados percorrendo. É a metáfora literal da Hyperflow, uma
   conversa entrando de um lado e virando dado do outro.
   Continua sendo FIO: 1px, sem gradiente, sem caixa.
   Aplique com o atributo data-hf-circuit em qualquer seção. */

.hf-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hf-fx svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Empilhamento: foto no fundo, malha por cima dela, conteúdo na frente */
[data-hf-circuit] { position: relative; }
[data-hf-circuit] > *:not(.hf-fx):not(.hf-hero-photo) {
  position: relative;
  z-index: 2;
}

.hf-fx-track { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hf-fx-pulse { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hf-fx-node  { stroke-width: 1; }

/* Sobre fundo escuro */
.hf-fx--dark .hf-fx-track { stroke: rgba(255, 255, 255, 0.13); }
.hf-fx--dark .hf-fx-pulse { stroke: var(--hf-sage); }
.hf-fx--dark .hf-fx-node  { fill: var(--hf-navy-deep); stroke: rgba(255, 255, 255, 0.22); }

/* Sobre fundo claro */
.hf-fx--light .hf-fx-track { stroke: rgba(36, 19, 95, 0.09); }
.hf-fx--light .hf-fx-pulse { stroke: var(--hf-purple); }
.hf-fx--light .hf-fx-node  { fill: #fff; stroke: rgba(36, 19, 95, 0.13); }

/* O pulso: um segmento curto que percorre o fio inteiro */
@keyframes hf-pulse-run {
  from { stroke-dashoffset: var(--len); }
  to   { stroke-dashoffset: calc(var(--len) * -1); }
}
.hf-fx-pulse {
  stroke-dasharray: 46 9999;
  animation: hf-pulse-run var(--dur, 7s) linear var(--del, 0s) infinite;
  opacity: 0.9;
}

/* Nó pulsando: indica um sistema conectado */
@keyframes hf-node-blink {
  0%, 72%, 100% { opacity: 0.5; }
  80%           { opacity: 1; }
}
.hf-fx-node--live { animation: hf-node-blink 4.5s ease-in-out var(--del, 0s) infinite; }

/* ── Foto de fundo no hero, com véu chapado ── */
.hf-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hf-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  filter: grayscale(0.35) contrast(1.05);
}
.hf-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 13, 74, var(--veil, 0.82));
}

/* ── Varredura: um fio de luz cruza o print uma vez ao aparecer ── */
.hf-scan { position: relative; overflow: hidden; }
.hf-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--hf-wa);
  box-shadow: 0 0 12px 1px rgba(37, 211, 102, 0.55);
  opacity: 0;
  pointer-events: none;
}
.hf-scan.on::after { animation: hf-scan-run 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.25s 1; }
@keyframes hf-scan-run {
  0%   { transform: translateY(0);      opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(var(--h, 400px)); opacity: 0; }
}

/* ── Indicador "ao vivo" ── */
.hf-live {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hf-live::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--hf-wa);
  animation: hf-live-beat 1.9s ease-in-out infinite;
}
@keyframes hf-live-beat {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

/* ── Contador: números sobem quando entram na tela ── */
.hf-count { font-variant-numeric: tabular-nums; }

/* ── Entrada em cascata: use style="--d:.08s" ── */
.hf-rv { transition-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  .hf-fx-pulse,
  .hf-fx-node--live,
  .hf-scan.on::after,
  .hf-live::before { animation: none !important; }
  .hf-fx-pulse { opacity: 0.35; stroke-dasharray: none; }
}

/* ── 9. SELO OFICIAL NO TOPO ────────────────────────────────
   Barra: lockup Hyperflow + Meta, fixo em todas as páginas.
   Hero: selo Parceiro Oficial Meta logo acima do título. */

.navbar-logo-white,
.navbar-logo {
  height: clamp(22px, 3.4vw, 28px) !important;
  width: auto !important;
}

.hf-selo-topo {
  margin: 0 0 clamp(20px, 3vw, 28px);
  line-height: 0;
}
.hf-selo-topo img {
  height: clamp(34px, 4.6vw, 44px);
  width: auto;
  display: inline-block;
}

/* ── 10. MOBILE: TOPO CENTRALIZADO ──────────────────────────
   No celular a primeira dobra fica centralizada, que é como
   a informação é lida na tela estreita. */

@media (max-width: 899px) {
  .hero .hero-copy,
  .hero .hero-copy > *,
  .hero .sec-head,
  .hero .hero-inner > div:first-child {
    text-align: center;
  }

  /* elementos que são flex precisam centralizar o eixo, não o texto */
  .hero .hf-eyebrow,
  .hero .hero-kicker,
  .hero .hf-selo-topo,
  .hero .hero-actions,
  .hero .hf-seals,
  .hero .hero-proof-item,
  .hero .hero-spec {
    justify-content: center;
  }
  .hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* texto corrido centralizado precisa de largura contida */
  .hero .hf-lede,
  .hero .hero-sub,
  .hero .hero-note {
    margin-inline: auto;
  }

  /* listas numeradas do hero: o número acima do texto, centralizado */
  .hero .hero-spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
}

/* ── 11. NADA QUEBRADO NO DESKTOP ───────────────────────────
   Impede palavra órfã sozinha na última linha e impede que
   texto longo estoure a coluna. */

.hf-display,
.hf-h2,
.hero h1,
.hero h2,
h1, h2, h3 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hf-lede,
.hero-sub,
p, li, figcaption {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* botões nunca quebram no meio da palavra */
.hfx-btn,
.hfx-btn,
.navbar-cta {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .hfx-btn,
  .hfx-btn {
    white-space: normal;
    text-align: center;
  }
}