/* =====================================================================
   4pbox — Página "Em breve" · ESTILO
   ---------------------------------------------------------------------
   Peça autônoma: uma tela só, sem rolagem, pensada para ir ao ar antes da
   landing completa. Depende APENAS de tokens.css — não carrega base.css
   nem sections.css de propósito, para o primeiro byte chegar rápido.

   Princípios herdados do DS (ver DESIGN.md): escuro canônico · borda antes
   de sombra · um acento racionado. A exceção declarada aqui é o TEXTO EM
   LUZ: nesta página ele é a peça visual inteira, então ganha o gradiente
   completo da paleta de dados. Na landing isso continuaria proibido.

   ⚠️ LARANJA NÃO ENTRA. A referência que originou esta página usava
   laranja/dourado; laranja é a marca antiga 4pShop e está vetado. O calor
   aqui vem do rosa (--chart-5), igual ao fundo da landing.
   ===================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------------- Fundo: luz + vinheta + grão ----------------
   Mesma receita da landing (três manchas derivando devagar), mais uma
   VINHETA que a landing não tem. Aqui ela é necessária: numa tela única e
   centralizada, sem vinheta a luz vaza para os cantos e o texto perde o
   foco óptico. O grão existe para o gradiente não fazer banding. */

.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.fundo i {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.fundo i:nth-child(1) {
  width: 62vmax; height: 62vmax;
  top: -26vmax; left: -18vmax;
  background: radial-gradient(circle, hsl(var(--chart-1) / 0.26), transparent 66%);
  animation: deriva-a 78s var(--ease-standard) infinite alternate;
}
.fundo i:nth-child(2) {
  width: 56vmax; height: 56vmax;
  top: 12vmax; right: -24vmax;
  background: radial-gradient(circle, hsl(var(--chart-4) / 0.22), transparent 66%);
  animation: deriva-b 96s var(--ease-standard) -30s infinite alternate;
}
.fundo i:nth-child(3) {
  width: 52vmax; height: 52vmax;
  bottom: -24vmax; right: -10vmax;
  background: radial-gradient(circle, hsl(var(--chart-5) / 0.24), transparent 66%);
  animation: deriva-c 110s var(--ease-standard) -60s infinite alternate;
}

/* Vinheta — escurece as bordas e empurra o olho para o centro */
.fundo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 118% 82% at 50% 42%,
      transparent 0%,
      hsl(var(--background) / 0.42) 54%,
      hsl(var(--background) / 0.88) 100%);
}

/* Grão — estático, nunca anima */
.fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

@keyframes deriva-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(7vmax, 5vmax, 0) scale(1.14); }
}
@keyframes deriva-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-6vmax, -7vmax, 0) scale(1); }
}
@keyframes deriva-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-5vmax, -4vmax, 0) scale(1.1); }
}

/* ---------------- Palco ---------------- */

/* ⚠️ TODA medida daqui para baixo tem um TETO em `vh`, via `min()`.
   O motivo é o mesmo da landing, mas aqui é mais crítico: esta página tem
   que caber numa tela SEM rolagem, e quem manda nisso é a ALTURA. Um
   `clamp()` por `vw` sozinho entrega tipo de 52px num notebook de 639px de
   altura e a peça estoura em 100px. O teto em `vh` faz a composição
   inteira encolher junto, mantendo a proporção.

   Os `max()` dentro dos tetos são piso de legibilidade: em tela muito
   baixa a página volta a rolar um pouco, e isso é melhor do que texto de
   13px. */
.palco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: min(clamp(2rem, 1rem + 3vw, 3.5rem), 4.8vh) var(--page-gutter);
}

/* Halo atrás do bloco de texto: é ele que dá a sensação de "a frase emite
   luz", e não só de "a frase é colorida". Fica no pseudo-elemento para não
   entrar no fluxo nem afetar a altura. */
.palco::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(820px, 92vw);
  aspect-ratio: 1 / 0.72;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: radial-gradient(ellipse at center,
      hsl(var(--chart-4) / 0.20) 0%,
      hsl(var(--chart-1) / 0.10) 42%,
      transparent 68%);
}

.marca {
  width: min(clamp(124px, 14vw, 172px), max(21vh, 108px));
  height: auto;
  margin-bottom: min(clamp(1.5rem, 1rem + 2vw, 2.5rem), 3.2vh);
}

/* Selo de estado — o ponto pulsa devagar; é o único movimento de interface
   da página. Verde (--chart-2) porque aqui ele CLASSIFICA um estado
   ("estamos trabalhando"), que é o uso autorizado da paleta de dados. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  margin-bottom: min(clamp(1.25rem, 0.75rem + 1.5vw, 2rem), 2.6vh);
  border: 1px solid hsl(var(--border-strong));
  border-radius: 999px;
  background: hsl(var(--card) / 0.6);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.selo i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: hsl(var(--chart-2));
  box-shadow: 0 0 0 0 hsl(var(--chart-2) / 0.55);
  animation: pulso 2.6s var(--ease-standard) infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 hsl(var(--chart-2) / 0.5); }
  70%  { box-shadow: 0 0 0 9px hsl(var(--chart-2) / 0); }
  100% { box-shadow: 0 0 0 0 hsl(var(--chart-2) / 0); }
}

/* `max-width: 26ch` e não 17ch: com a medida curta a frase quebrava em TRÊS
   linhas (184px medidos). Em duas linhas ela ocupa ~100px e ainda ganha
   impacto — é a proporção da referência. O `text-wrap: balance` distribui. */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: min(clamp(1.75rem, 0.9rem + 4.2vw, 4.25rem), max(7vh, 26px));
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  max-width: 26ch;
  text-wrap: balance;
  margin-bottom: min(clamp(1.25rem, 0.75rem + 1.5vw, 1.75rem), 2.5vh);
}

/* ---------------- O texto em luz ----------------
   Gradiente recortado pelo texto + brilho.

   ⚠️ O brilho é `filter: drop-shadow`, NÃO `text-shadow`. Com
   `color: transparent` (obrigatório para o background-clip aparecer), a
   text-shadow é pintada ATRÁS do recorte e vira uma mancha sólida com a
   forma das letras — o efeito quebra. `drop-shadow` respeita o alfa do que
   foi realmente desenhado, então acompanha o gradiente.

   A varredura é lenta de propósito (19s, amplitude curta): o teste do DS
   vale aqui — se alguém notar o movimento em vez de ler a frase, está
   exagerado. */
.luz {
  background-image: linear-gradient(100deg,
      hsl(var(--chart-1)) 0%,
      hsl(var(--chart-4)) 38%,
      hsl(var(--chart-5)) 66%,
      hsl(var(--chart-4)) 84%,
      hsl(var(--chart-1)) 100%);
  background-size: 190% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px hsl(var(--chart-4) / 0.38));
  animation: varrer 19s var(--ease-standard) infinite alternate;
}
@keyframes varrer {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.lead {
  font-size: min(clamp(1rem, 0.95rem + 0.4vw, 1.1875rem), max(2.7vh, 15px));
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
  max-width: 58ch;
  text-wrap: pretty;
  margin-bottom: min(clamp(1.75rem, 1rem + 2vw, 2.5rem), 3.6vh);
}
.lead strong { color: hsl(var(--foreground)); font-weight: 600; }

/* ---------------- Ação ----------------
   Botão branco, como manda o DS (ação primária = inversão de tom). O que a
   referência resolvia com cor berrante, aqui resolve o HALO: a sombra
   colorida faz o botão parecer aceso sem inventar uma cor de marca. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: min(16px, 2.2vh) 30px;
  border-radius: var(--radius-md);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: min(var(--fs-lead), max(2.7vh, 15px));
  font-weight: 600;
  min-height: 48px;   /* alvo de toque, mesmo com o padding encolhido */
  box-shadow: 0 14px 44px -10px hsl(var(--chart-1) / 0.55),
              0 4px 14px -6px hsl(var(--chart-4) / 0.45);
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.cta:hover {
  background: hsl(var(--primary-hover));
  transform: translateY(-2px);
  box-shadow: 0 20px 56px -10px hsl(var(--chart-1) / 0.7),
              0 6px 18px -6px hsl(var(--chart-4) / 0.55);
}
.cta:active { transform: translateY(0); }
.cta svg { width: 21px; height: 21px; flex: none; }

.nota {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: hsl(var(--muted-foreground));
}

/* ---------------- Rodapé ---------------- */

.rodape {
  padding: var(--sp-6) var(--page-gutter);
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--surface) / 0.7);
  font-size: var(--fs-sm);
  color: hsl(var(--muted-foreground));
  text-align: center;
}
.rodape__linhas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2) var(--sp-6);
}
.rodape a:hover { color: hsl(var(--foreground)); }
.rodape .sep { color: hsl(var(--border-strong)); }

/* ⚠️ No celular o rodapé era o que estourava a tela, não o conteúdo: as três
   informações quebram em três linhas e, com o espaçamento de desktop, ele
   media 154px — quase um quarto do iPhone SE. Aqui ele vira bloco compacto e
   os separadores saem (numa coluna eles não separam nada).

   O resto do bloco aperta a composição na vertical: em tela estreita o lead
   passa de 6 linhas e é ele, somado ao rodapé, que tirava o botão da tela. */
@media (max-width: 560px) {
  .rodape {
    padding: 12px var(--page-gutter);
    font-size: 0.75rem;
    line-height: 1.45;
  }
  .rodape__linhas { gap: 1px 10px; }
  .rodape .sep { display: none; }

  /* ⚠️ 3.1vh, não 3.4: o lead foi reescrito em 21/09 e ficou ~12 caracteres
     mais longo, o que empurrou 1px de rolagem em 360×640. Este é o ponto de
     folga da peça — se o texto crescer de novo, é aqui que se compensa. */
  .palco { padding: min(1.75rem, 3.1vh) var(--page-gutter); }
  .marca {
    width: min(clamp(104px, 29vw, 138px), max(16vh, 96px));
    margin-bottom: min(1.25rem, 2.4vh);
  }
  .selo { margin-bottom: min(1rem, 2.2vh); }
  h1 { margin-bottom: min(1rem, 2.2vh); }
  .lead {
    font-size: min(1rem, max(2.4vh, 14.5px));
    line-height: 1.5;
    margin-bottom: min(1.5rem, 3vh);
  }
  .nota { margin-top: var(--sp-3); }
}

/* ⚠️ Não havia mais patamares de `max-height` aqui: eles existiram na
   primeira versão e foram REMOVIDOS. Os tetos em `vh` de cada medida fazem
   o mesmo trabalho de forma contínua, e as regras dentro das media queries
   sobrescreviam os tetos justamente nas telas onde eles importam. Se for
   preciso ajustar altura, mexa no coeficiente `vh` da peça, não adicione
   uma media query por cima. */

/* ---------------- Quem pediu menos movimento ----------------
   Tudo para: manchas, varredura do gradiente e pulso do selo. A frase
   continua colorida — o gradiente é estático, não é animação. */
@media (prefers-reduced-motion: reduce) {
  .fundo i:nth-child(1),
  .fundo i:nth-child(2),
  .fundo i:nth-child(3) { animation: none; }
  .luz { animation: none; background-position: 28% 50%; }
  .selo i { animation: none; }
  .cta { transition: none; }
  .cta:hover { transform: none; }
}