/* ============================================================
   GALAXY MEDIA — BASE
   Reset, grid, tipografia, componentes compartilhados.
   Depende de tokens.css. Sem @import encadeado (§17).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* O scroll suave é do Lenis. `scroll-behavior: smooth` do CSS briga com ele
   e produz o travamento. Só volta a valer quando o Lenis não está ativo. */
html:not(.lenis) { scroll-behavior: smooth; }

/* Folha mínima exigida pelo Lenis 1.x */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--w-regular);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--bg-base);
  overflow-x: hidden;
}

/* Nada de itálico em nenhum ponto do site (§7.2). */
i, em, address, cite, dfn, var { font-style: normal; }

img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* ============================================================
   FOCO
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent); color: var(--accent-contrast);
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.section {
  position: relative;
  padding-block: var(--section-py);
  background: var(--bg-base);
  color: var(--text-primary);
}

/* Sobreposição entre seções: cada uma sobe sobre a anterior, com um topo
   arredondado e uma linha de luz. O empilhamento em z é crescente para
   que a seção nova cubra a antiga, nunca o contrário. */
.section--stack {
  z-index: var(--z-content);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  margin-top: calc(var(--radius-lg) * -1);
}
/* Títulos de seção equilibram as linhas: sem isso sobra uma ou duas
   palavras órfãs na última linha, que é o que deixa a quebra irregular. */
.section__title, .page-head__title, .hero__title { text-wrap: balance; }

/* ── Quebra de titulo em tela estreita ──────────────────────────────
   `balance` iguala o comprimento das linhas minimizando a MAIOR delas.
   Numa medida larga isso fica bonito; numa estreita ele prefere varias
   linhas curtas a uma cheia, e o resultado sao palavras sozinhas
   ("Voce / investe / pesado no seu negocio."). Pior no titulo da secao
   do problema, cujas palavras sao `inline-block` para o efeito letra a
   letra: cada uma vira um bloco indivisivel para o balanceador.

   Abaixo de 768px voltamos ao enchimento guloso, que preenche cada
   linha antes de passar para a proxima. As duas declaracoes sao
   propositais e nesta ordem: quem nao conhece `pretty` — Safari antigo
   do iPhone — ignora a segunda e fica com `normal`, que ja resolve.
   Quem conhece ganha tambem a protecao contra orfa na ultima linha. */
@media (max-width: 767px) {
  .section__title,
  .page-head__title,
  .hero__title,
  .hero__sub,
  .page-head__sub,
  .problema__titulo,
  .sobre__titulo,
  .manifesto__frase,
  .orbita__frase {
    text-wrap: normal;
    text-wrap: pretty;
  }

  /* As quebras manuais foram escritas para tela larga. Numa estreita
     elas isolam pedacos que nao cabem — "O que define como o mercado"
     mede 419px numa caixa de 371 e larga "mercado" sozinho na linha.
     Escondidas, a frase volta a ser uma so e quebra onde couber. O
     espaco em volta do <br> no HTML e o que segura as palavras
     separadas quando ele some. */
  .hero__title br,
  .page-head__title br,
  .section__title br { display: none; }
}

/* Cabeçalho de seção.
   A largura vem em rem, não em ch: `ch` resolve na fonte do PAI (16px),
   o que espremia o título em ~270px e produzia a quebra em escada. */
.section__head { margin-bottom: var(--sp-10); }
.section__head--center {
  margin-inline: auto;
  text-align: center;
  max-width: 56rem;
}
.section__head--center .section__title { margin-inline: auto; }
.section__head--center .section__sub { margin-inline: auto; }

.section__title { max-width: 22em; }
.section__sub {
  margin-top: var(--sp-5);
  max-width: 44rem;
  color: var(--text-secondary);
  font-size: var(--text-lg);
  font-weight: var(--w-light);
  letter-spacing: var(--track-body);
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4 {
  font-weight: var(--w-medium);
  letter-spacing: var(--track-title);
  line-height: var(--leading-snug);
}

h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
.section__title { font-size: var(--text-h2); line-height: var(--leading-tight); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { max-width: var(--measure); text-wrap: pretty; letter-spacing: var(--track-body); }

.lead {
  font-size: var(--text-lg);
  font-weight: var(--w-light);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* Rótulo mono em caixa alta — único lugar com caixa alta */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   LOGO — assinatura completa por padrão; ao rolar vira só o símbolo
   ============================================================ */
.logo {
  position: relative;
  display: inline-flex; align-items: center;
  color: var(--text-primary);
  height: 30px;
}
/* Sem `height: 100%` aqui: `.logo svg` tem especificidade maior que
   `.logo__word` e sobrescreveria as alturas definidas abaixo. */
.logo svg { display: block; width: auto; }

/* Só opacity e transform animam — nada de largura, que dispararia layout. */
.logo__word {
  height: 21px;
  transition: opacity var(--dur-normal) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transform-origin: left center;
}
.logo__mark {
  position: absolute; left: 0; top: 50%;
  height: 26px;
  opacity: 0;
  transform: translateY(-50%) scale(0.7);
  transition: opacity var(--dur-normal) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.nav[data-scrolled] .logo__word { opacity: 0; transform: scaleX(0.82); }
.nav[data-scrolled] .logo__mark { opacity: 1; transform: translateY(-50%) scale(1); }

/* No rodapé a assinatura é sempre a completa. */
.footer .logo__mark { display: none; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  min-height: 44px;
  padding-inline: var(--sp-5);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out);
}
.btn > span { position: relative; z-index: 2; }

/* Preenchimento que sobe de baixo no hover — o "efeito sutil" */
.btn::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  transform: translateY(101%);
  transition: transform var(--dur-normal) var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn__arrow {
  position: relative; z-index: 2;
  flex: none;
  transition: transform var(--dur-normal) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--sm { min-height: 40px; padding-inline: var(--sp-4); gap: var(--sp-2); }
.btn--md { min-height: 46px; }
.btn--lg { min-height: 54px; padding-inline: var(--sp-7); font-size: var(--text-xs); }
.btn--full { width: 100%; }

/* Hover inverte para o fundo da marca em vez de clarear para lilás.
   #F2EEFC sobre #0C0718 dá 16.4:1 — o lilás antigo dava 3.1:1 e lavava
   o botão justo no estado em que ele precisa parecer mais firme. */
.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-light) 30%, transparent) inset;
  transition: color var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out);
}
.btn--primary::before { background: var(--c-accent-deep); }
.btn--primary:hover {
  color: var(--c-offwhite);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-light) 45%, transparent) inset;
}

.btn--ghost {
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn--ghost::before { background: var(--text-primary); }
.btn--ghost:hover { color: var(--bg-base); border-color: var(--text-primary); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
  .btn--primary:hover { background: var(--c-accent-deep); color: var(--c-offwhite); }
  .btn--ghost:hover { color: var(--text-primary); }
}

/* Link com seta */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-primary);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--border-strong);
  transition: color var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out);
}
.link-arrow::after {
  content: '\2192';
  transition: transform var(--dur-normal) var(--ease-out);
}
.link-arrow:hover { color: var(--accent-on-dark); border-color: var(--accent-on-dark); }
.link-arrow:hover::after { transform: translateX(4px); }

/* Área de toque mínima de 44px em ponteiro grosso */
@media (hover: none), (pointer: coarse) {
  a, button { min-height: 44px; display: inline-flex; align-items: center; }
  .logo, .footer__nav a, .footer__contact a, .contato__direct a, .link-arrow { min-height: 44px; }
  p a { min-height: 0; display: inline; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  display: flex; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; flex: none; align-items: center; gap: var(--sp-8);
  padding-right: var(--sp-8);
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track li {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.marquee__track li::after { content: '\00B7'; margin-left: var(--sp-8); opacity: 0.5; }
@keyframes marquee { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
}

/* ============================================================
   FORMULÁRIO
   ============================================================ */
.field { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); }
.field--full { grid-column: 1 / -1; }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.field__opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }

.field__input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--sp-3) var(--sp-4);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.field__input:hover { border-color: var(--border-strong); }
.field__input:focus { outline: none; border-color: var(--accent-on-dark); }
.field__input:focus-visible { outline: none; }
textarea.field__input { resize: vertical; min-height: 120px; }

select.field__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 20px center, right 15px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--sp-8);
}
select.field__input option { background: var(--bg-elevated); color: var(--text-primary); }

.field__input[aria-invalid="true"] { border-color: var(--danger); }
.field__error {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  color: var(--danger);
}

.form__status {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  min-height: 1.4em;
}
.form__status[data-state="ok"]  { color: var(--success); }
.form__status[data-state="err"] { color: var(--danger); }

/* ============================================================
   ESTADO INICIAL DAS ANIMAÇÕES
   O CSS entrega o estado FINAL. motion.js marca <html class="js">
   e só então recua os elementos. Sem JS, tudo já está visível.
   ============================================================ */
.js [data-anim="fade"] { opacity: 0; transform: translateY(28px); }
.js [data-anim="lines"] .line__inner { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim="fade"] { opacity: 1; transform: none; }
  .js [data-anim="lines"] .line__inner { transform: none; }
}

/* Wrapper gerado pelo split por linha.
   O padding abre a caixa de recorte para não cortar descendentes;
   a margem negativa devolve o espaço e mantém o ritmo vertical. */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.line__inner { display: block; will-change: transform; }

/* ============================================================
   CURSOR PERSONALIZADO
   Ponto que segue o ponteiro sem atraso e anel que chega depois.
   O cursor nativo e escondido so onde ha ponteiro fino: em toque nao
   existe ponteiro para substituir, e esconder deixaria a pessoa sem
   nada. Links e botoes voltam a mostrar o nativo se o JS falhar.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  html.cursor-on, html.cursor-on * { cursor: none; }
}

.cursor-ponto,
.cursor-anel {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-toast);
  will-change: transform;
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-out);
}
html.cursor-ativo .cursor-ponto,
html.cursor-ativo .cursor-anel { opacity: 1; }

.cursor-ponto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-offwhite);
}

.cursor-anel {
  width: 30px; height: 30px;
  border: 1px solid color-mix(in srgb, var(--c-light) 55%, transparent);
  border-radius: 50%;
  transition: width var(--dur-normal) var(--ease-out),
              height var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              background var(--dur-normal) var(--ease-out),
              opacity var(--dur-normal) var(--ease-out);
}

/* Sobre algo clicavel o anel abre e ganha corpo. */
.cursor-anel.is-over {
  width: 52px; height: 52px;
  border-color: color-mix(in srgb, var(--c-light) 85%, transparent);
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
}
html.cursor-ativo .cursor-ponto.is-over { opacity: 0; }

/* Em secao clara o traco escuro le melhor. */
.is-inverse .cursor-anel { border-color: color-mix(in srgb, var(--c-primary) 60%, transparent); }

.cursor-orb {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 132, 240, 0.035) 0%, transparent 62%);
  pointer-events: none;
  will-change: transform;
}

@media (hover: none), (pointer: coarse) {
  .cursor-ponto, .cursor-anel, .cursor-orb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-ponto, .cursor-anel, .cursor-orb { display: none; }
}


.particles {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-float);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
@media (hover: none), (pointer: coarse) { .particles { display: none; } }
@media (prefers-reduced-motion: reduce) { .particles { display: none; } }

/* ============================================================
   LOADING
   ------------------------------------------------------------
   Pintado pelo HTML, não pelo JS: precisa cobrir a tela já no
   primeiro quadro. O X da marca se desenha, a asa entra depois,
   e a barra mostra que existe fim. main.js remove no load.
   ============================================================ */
.loader {
  position: fixed; inset: 0;
  z-index: var(--z-toast);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-7);
  background: var(--bg-base);
  transition: opacity var(--dur-slow) var(--ease-out),
              visibility var(--dur-slow) var(--ease-out);
}

.loader[data-pronto] { opacity: 0; visibility: hidden; }

.loader__mark { width: clamp(64px, 9vw, 104px); height: auto; overflow: visible; }

/* O traço se desenha; o comprimento real é medido no JS e gravado
   em --len (o fallback cobre o caso de o script falhar). */
.loader__x {
  fill: none;
  stroke: var(--c-offwhite);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1800);
  stroke-dashoffset: var(--len, 1800);
  animation: loader-traco 1.1s var(--ease-out) forwards,
             loader-preenche 0.5s var(--ease-out) 1s forwards;
}

.loader__wing {
  fill: var(--c-primary);
  opacity: 0;
  transform-origin: 70% 50%;
  animation: loader-asa 0.7s var(--ease-out) 0.85s forwards;
}

@keyframes loader-traco { to { stroke-dashoffset: 0; } }
@keyframes loader-preenche { to { fill: var(--c-offwhite); stroke-width: 0; } }
@keyframes loader-asa {
  from { opacity: 0; transform: translateX(14px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

.loader__bar {
  display: block;
  width: clamp(120px, 16vw, 190px);
  height: 1px;
  background: var(--border-strong);
  overflow: hidden;
}
.loader__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--c-light));
  transform: scaleX(var(--carga, 0));
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Quem pediu menos movimento vê a marca parada e a tela sai na hora. */
@media (prefers-reduced-motion: reduce) {
  .loader__x { animation: none; stroke-dashoffset: 0; fill: var(--c-offwhite); stroke-width: 0; }
  .loader__wing { animation: none; opacity: 1; }
  .loader { transition-duration: 1ms; }
}

/* ── Tamanho dos titulos em tela estreita ───────────────────────────
   No fim do arquivo de proposito: a regra precisa vir depois de
   `.section__title { font-size: var(--text-h2) }`, que tem a mesma
   especificidade e venceria por ordem.

   `--text-h2` da 28,8px numa caixa de 350. As frases mais longas sobram
   por poucos pixels e largam a ultima palavra sozinha numa linha. Em
   6.7vw (~26px) elas fecham na linha anterior. Sao 10% de diferenca,
   invisivel isolada, e vale o titulo sair inteiro. */
@media (max-width: 767px) {
  .section__title,
  .page-head__title { font-size: clamp(1.35rem, 6.7vw, 1.85rem); }
}