/* As telas públicas do Garimpo: landing, preços, política de dados e pedido de
   remoção. Carregada DEPOIS de `base.css`, e só com o que o site tem e o
   painel não tem.
   =========================================================================

   Três coisas que decidem este arquivo, e que não são gosto:

   1. NENHUMA COR, DURAÇÃO OU CURVA LITERAL. Tudo sai de `tokens.css`, que veio
      medido da referência. Há teste varrendo e falhando se aparecer.

   2. O SITE PÚBLICO NÃO USA JAVASCRIPT. Nenhuma linha. Dois motivos, nessa
      ordem: (a) a conferência de tela abre a página do DISCO (`file://`), e o
      Chromium recusa `<script type="module">` de origem `file://` por CORS —
      medido em 05/10, o `gaveta.mjs` nem carrega, então qualquer navegação que
      dependesse de JS apareceria morta justamente no print; (b) tela de venda
      que não abre sem JS é tela que não abre. Por isso o cabeçalho do celular
      não tem gaveta: ele mostra o essencial e a navegação inteira vive no
      rodapé. A gaveta com ☰ continua valendo para o painel, que é servido por
      HTTP e tem muitos itens — é lá que o padrão mobile da casa mira.

   3. A ORDEM É BASE PRIMEIRO, `@media` DEPOIS. Regra base escrita depois de uma
      `@media`, na mesma especificidade, sobrescreve a do celular. Já apagou um
      ☰ num painel da casa.

   Ordem do arquivo:
     1. esqueleto da página (contorno, faixa, títulos de seção)
     2. cabeçalho e rodapé
     3. abertura (o número, o piso em gradiente, a moldura do produto)
     4. como funciona (os três passos)
     5. de onde vem o dado
     6. os planos (o trecho que `ferramentas/gerar-precos.mjs` escreve)
     7. páginas de texto e o formulário de remoção
     8. celular
     9. movimento reduzido */

/* --------------------------------------------------- 1. esqueleto */

.contorno {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-32);
}

.faixa {
  padding-top: var(--section-gap);
}

/* Título de seção. É o degrau do meio: menor que a abertura, maior que o
   título de cartão — sem ele tudo fica no mesmo tamanho mudando só o peso, que
   é a primeira coisa reprovada. */
.faixa__titulo {
  color: var(--color-paper);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-510);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  margin-bottom: var(--spacing-12);
}

.faixa__texto {
  color: var(--color-fog);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  margin-bottom: var(--spacing-32);
}

/* ------------------------------------------- 2. cabeçalho e rodapé */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 72px;
  display: flex;
  align-items: center;
  background: color-mix(in oklab, var(--surface-void) 88%, transparent);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-graphite);
}

.cabecalho .contorno {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}

.marca {
  color: var(--color-paper);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-510);
  letter-spacing: var(--tracking-body-sm);
  margin-right: auto;
}

.cabecalho__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
}

.elo {
  color: var(--color-fog);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-ui);
  transition: color var(--dur-hover) var(--ease-control);
}

.elo:hover {
  color: var(--color-hover-text);
}

.rodape {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--color-graphite);
  padding: var(--spacing-48) 0;
}

.rodape .contorno {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-32);
  justify-content: space-between;
}

.rodape__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.rodape__titulo {
  color: var(--color-mist);
  font-size: var(--text-12);
  font-weight: var(--font-weight-510);
  letter-spacing: 0;
  margin-bottom: var(--spacing-4);
}

.rodape__nota {
  color: var(--color-fog);
  font-size: var(--text-12);
  letter-spacing: 0;
  max-width: 40ch;
}

/* ------------------------------------------------- 3. a abertura */

/* A primeira tela abre com UMA coisa em escala grande: o número que o produto
   entrega. Não com uma fileira de cartõezinhos. */
.abertura {
  position: relative;
  overflow: hidden;
  padding: calc(var(--spacing-96) + var(--spacing-48)) 0 var(--spacing-96);
}

/* A ATMOSFERA DO HERO.
   A referência (Raycast) faz uma coisa de propósito que o resto do sistema
   proíbe: no hero, cor, desfoque e escala vão ao máximo, e a página volta ao
   escuro austero logo abaixo. Sem isso a abertura era metade de tela escrita e
   metade de preto morto — que foi exatamente a reprovação de 07/10.
   Aqui o acento é o ouro de bateia do produto, não o coral dela. */
.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 820px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 52% at 50% 20%, color-mix(in oklab, var(--color-garimpo-ouro) 22%, transparent), transparent 70%),
    radial-gradient(42% 38% at 76% 42%, color-mix(in oklab, var(--color-garimpo-ouro) 12%, transparent), transparent 72%),
    radial-gradient(50% 44% at 18% 52%, color-mix(in oklab, var(--color-garimpo-ocre) 14%, transparent), transparent 74%);
  filter: blur(42px);
  opacity: 0;
  animation: aurora-acende var(--dur-aurora) var(--ease-scene) var(--delay-aurora) both;
}

@keyframes aurora-acende {
  from { opacity: 0; transform: translateY(-14px) scale(1.04); }
  to   { opacity: 1; transform: none; }
}

/* O hero passa a ocupar a largura inteira e a ficar centrado. */
.abertura .contorno {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.abertura .contorno {
  position: relative;
  z-index: 1;
}

.abertura__titulo {
  display: block;
  margin-bottom: var(--spacing-24);
}

/* A tipografia como objeto: 72px com o tracking da referência (-1.584px), que
   é o degrau `display` do sistema. É a única letra desse tamanho no produto
   inteiro — no painel o número de destaque para em 32px. */
/* Tipo grande APERTA — é a regra da casa (29/09) e é o que separa "display" de
   "texto grande". O tamanho responde à tela em vez de ser um número só. */
.numerao {
  display: block;
  color: var(--color-paper);
  font-size: var(--text-display);
  font-weight: var(--font-weight-510);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--spacing-8);
}

.abertura__frase {
  display: block;
  max-width: 22ch;
  margin-inline: auto;
  color: var(--color-mist);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-400);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

.abertura__texto {
  max-width: 62ch;
  margin-inline: auto;
  color: var(--color-fog);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  margin-bottom: var(--spacing-24);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-32);
}

.ressalva {
  color: var(--color-fog);
  font-size: var(--text-12);
  letter-spacing: 0;
  max-width: 56ch;
  margin-bottom: var(--spacing-48);
}

/* O piso em gradiente da referência: void em 10% até mist em 100%, a lavagem
   de luz que ancora a interface no vazio. É o ÚNICO gradiente permitido no
   produto, e tem função — sem ele a moldura flutua sobre nada.
   A opacidade é nossa [INFERIDO]: cheio, o gradiente viraria uma faixa clara
   no pé da tela. */
.piso {
  position: absolute;
  inset: auto 0 0 0;
  height: 340px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--color-void) 10%, var(--color-mist) 100%);
  opacity: 0.13;
  animation: piso-acende var(--dur-scene) var(--ease-scene) var(--delay-scene) both;
}

@keyframes piso-acende {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.11;
  }
  100% {
    opacity: 0.13;
  }
}

/* A moldura com o produto trabalhando. O texto da abertura já está no primeiro
   quadro — quem chega lê na hora; só a atmosfera e a moldura acendem depois de
   1,3s, como uma sala que liga a luz. São os tempos medidos na referência, e é
   o ÚNICO momento orquestrado da página. */
.moldura {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--surface-carbon);
  border-radius: var(--radius-16);
  padding: var(--spacing-8);
  /* A sombra de tecla da referência MAIS a profundidade: o cartão fica
     apertado contra o fundo, com um anel de luz de 1px, em vez de chapado. */
  box-shadow: var(--shadow-key), var(--shadow-float);
  animation: moldura-acende var(--dur-moldura) var(--ease-scene) var(--delay-moldura) both;
}

@keyframes moldura-acende {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mock {
  background: var(--surface-void);
  border-radius: var(--radius-9);
  padding: var(--spacing-20) var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.mock__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-12);
  padding-bottom: var(--spacing-12);
  border-bottom: 1px solid var(--color-graphite);
}

.mock__andamento {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
}

.mock__estado {
  color: var(--color-mist);
  font-size: var(--text-caption);
  margin-right: auto;
}

.mock__cidades {
  display: flex;
  flex-direction: column;
}

.mock__cidades li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-8) 0;
  border-top: 1px solid var(--color-graphite);
  color: var(--color-mist);
  font-size: var(--text-caption);
}

/* ---------------------------------------- 4. como funciona (3 passos) */

/* São três passos de uma sequência de verdade — por isso numerados. A régua
   que separa um do outro é uma linha fina, não um cartão: três cartões iguais
   lado a lado é a primeira coisa que o padrão visual da casa reprova. */
.passos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-32);
}

.passo {
  border-left: 1px solid var(--color-graphite);
  padding-left: var(--spacing-20);
}

.passo__n {
  display: block;
  color: var(--color-fog);
  font-size: var(--text-subheading);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--spacing-14);
}

.passo__titulo {
  color: var(--color-paper);
  font-size: var(--text-14);
  font-weight: var(--font-weight-510);
  letter-spacing: var(--tracking-ui);
  margin-bottom: var(--spacing-8);
}

.passo p {
  color: var(--color-mist);
  font-size: var(--text-caption);
  line-height: var(--leading-body-sm);
}

/* ------------------------------------------- 5. de onde vem o dado */

.fatos {
  border-bottom: 1px solid var(--color-graphite);
}

.fato {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--spacing-24);
  padding: var(--spacing-20) 0;
  border-top: 1px solid var(--color-graphite);
}

.fato dt {
  color: var(--color-paper);
  font-size: var(--text-14);
  font-weight: var(--font-weight-510);
  letter-spacing: var(--tracking-ui);
}

.fato dd {
  color: var(--color-mist);
  font-size: var(--text-caption);
  line-height: var(--leading-body-sm);
}

/* --------------------------------------------------- 6. os planos */

/* Daqui para baixo, o HTML é escrito por `ferramentas/gerar-precos.mjs` a
   partir de `servidor/planos.json`. Preço nenhum é digitado em tela. */

.proposta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-12);
  max-width: none;
  margin-bottom: var(--spacing-24);
  color: var(--color-mist);
  font-size: var(--text-caption);
}

.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-16);
  max-width: 760px;
}

.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.plano__marca {
  position: absolute;
  top: var(--spacing-20);
  right: var(--spacing-20);
  background: var(--color-veil-8);
  color: var(--color-mist);
  border-radius: var(--radius-pills);
  padding: var(--spacing-2) var(--spacing-10);
  font-size: var(--text-12);
  letter-spacing: 0;
}

.plano__nome {
  color: var(--color-paper);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-510);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
}

.plano__preco {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  margin: 0;
}

.plano__valor {
  color: var(--color-paper);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-400);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

.plano__proposta {
  margin-top: calc(-1 * var(--spacing-8));
}

.plano__itens li {
  display: flex;
  gap: var(--spacing-6);
  padding: var(--spacing-8) 0;
  border-top: 1px solid var(--color-graphite);
  color: var(--color-mist);
  font-size: var(--text-caption);
}

.plano__itens .numero {
  color: var(--color-paper);
}

.plano__acao {
  margin-top: auto;
  align-self: flex-start;
}

/* ------------------------------- 7. páginas de texto e formulário */

.prosa {
  max-width: 68ch;
}

.prosa h2,
.prosa h3 {
  color: var(--color-paper);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-510);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
  margin: var(--spacing-32) 0 var(--spacing-12);
}

.prosa p,
.prosa li {
  color: var(--color-mist);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  margin-bottom: var(--spacing-12);
}

.prosa li {
  padding-left: var(--spacing-16);
  border-left: 1px solid var(--color-graphite);
}

.formulario {
  display: grid;
  gap: var(--spacing-16);
  max-width: 440px;
  margin-top: var(--spacing-24);
}

.formulario__campo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.aviso {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  align-items: flex-start;
  margin-bottom: var(--spacing-24);
}

/* O PROTOCOLO da remoção. É a única coisa que a pessoa precisa levar daquela
   tela, e ela vai copiar à mão de um celular: cartão próprio, mono grande e
   seleção fácil. Largura presa ao conteúdo para o cartão não virar uma faixa
   vazia num monitor largo. */
.protocolo {
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-6);
  margin: var(--spacing-24) 0;
}

.protocolo__codigo {
  font-family: var(--font-berkeley-mono);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-510);
  letter-spacing: 0.04em;
  color: var(--color-paper);
  user-select: all;
}

/* ----------------------------------------------------- 8. celular */

@media (max-width: 640px) {
  .contorno {
    padding: 0 var(--spacing-16);
  }

  .faixa {
    padding-top: var(--spacing-56);
  }

  .cabecalho {
    height: auto;
    padding: var(--spacing-8) 0;
  }

  .cabecalho .contorno {
    gap: var(--spacing-12);
  }

  /* Sem gaveta aqui: três alvos de toque no cabeçalho e a navegação inteira no
     rodapé. O site público não carrega JavaScript (ver o topo do arquivo). */
  .cabecalho__nav {
    gap: var(--spacing-12);
  }

  .abertura {
    padding: var(--spacing-48) 0 var(--spacing-32);
  }

  /* O degrau de baixo da escala de cartaz. Medido em 390px: "20.000" em 64px
     ocupa ~210 de 358px úteis, então sobra margem para a vírgula de um número
     maior. Em 72px o número encostaria na borda. */
  .numerao {
    font-size: var(--text-heading-lg);
    line-height: var(--leading-heading-lg);
    letter-spacing: var(--tracking-heading-lg);
  }

  .abertura__frase {
    max-width: none;
    font-size: var(--text-body-lg);
    line-height: var(--leading-body-lg);
    letter-spacing: var(--tracking-body-lg);
  }

  .acoes .botao {
    flex: 1 1 100%;
  }

  .mock {
    padding: var(--spacing-16);
  }

  .mock__cidades li {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4);
  }

  .passos {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24);
  }

  .fato {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-6);
  }

  .planos {
    grid-template-columns: minmax(0, 1fr);
  }

  .plano__acao {
    align-self: stretch;
  }

  .rodape .contorno {
    gap: var(--spacing-24);
  }
}

/* ------------------------------------------ 9. movimento reduzido */

/* Os seletores são OS DESTAS PÁGINAS. O que anima aqui é o momento de entrada
   da abertura — e só ele. Com movimento reduzido, a atmosfera e a moldura já
   nascem acesas: a página continua inteira, só não liga a luz na frente de
   quem pediu para nada se mexer.
   (O ponto dourado de "coletando agora" é classe da folha base, e para no
   bloco de lá, junto das outras classes que ele desliga. Escrito sem o nome do
   arquivo de propósito: a guarda de animação do teste varre o texto inteiro e
   leria `base` seguido de ponto e extensão como se fosse um seletor. Afrouxar a
   guarda para caber o comentário é o que faz guarda deixar de guardar.) */
@media (prefers-reduced-motion: reduce) {
  .piso,
  .aurora,
  .moldura {
    animation: none;
    opacity: 1;
  }

  .piso {
    opacity: 0.13;
  }

  .elo {
    transition-duration: 0ms;
  }
}


/* ───────────────────────────────────────────────────────────────────────────
   O acento, onde ele tem dono (07/10)

   A referência raciona cor: a página é quase toda acromática e o acento aparece
   em POUCOS lugares, com papel. A landing estava racionando até sumir — o ouro
   de bateia existia num ponto de 6px e em mais nada, e o resultado foi uma
   página cinza. Aqui ele tem três lugares, e só estes três: a aurora do hero, a
   barra da coleta de exemplo (que é o produto trabalhando) e a marca.
   ─────────────────────────────────────────────────────────────────────────── */

.mock .barra__cheio {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--color-garimpo-ouro) 70%, var(--color-garimpo-ocre)),
    var(--color-garimpo-ouro));
  box-shadow: 0 0 18px color-mix(in oklab, var(--color-garimpo-ouro) 45%, transparent);
}

/* A marca leva o acento num ponto só — o pingo da bateia — em vez de um
   degradê que corta a palavra no meio e parece defeito de fonte. */
.marca::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  vertical-align: 2px;
  border-radius: var(--radius-pills);
  background: var(--color-garimpo-ouro);
  box-shadow: 0 0 10px color-mix(in oklab, var(--color-garimpo-ouro) 60%, transparent);
}

/* A nav vira a pílula de vidro fosco da referência: flutua, não encosta no
   topo, e o conteúdo passa POR BAIXO dela em vez de parar numa linha reta. */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: var(--spacing-12) 0;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

.cabecalho .contorno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-veil-8);
  border-radius: var(--radius-16);
  background: color-mix(in oklab, var(--color-void) 72%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--color-veil-8) 0 1px 1px inset;
}

/* A ressalva sai de baixo do botão e vira o selo do próprio exemplo: a
   honestidade continua inteira (o número É simulado e isso está dito em cima
   dele), mas ela deixa de ser a última coisa que alguém lê antes de decidir
   assinar. */
.ressalva {
  order: 2;
  max-width: 46ch;
  margin: var(--spacing-16) auto 0;
  text-align: center;
  color: var(--color-ash);
}

.abertura .moldura {
  order: 1;
}

/* Em tela larga o cartaz cresce. O tracking acompanha em `em` porque tracking
   em px fixo, num tipo que dobra de tamanho, deixa de apertar: é a regra da
   casa de que tipo grande APERTA, e -1.584px em 128px não aperta nada. */
@media (min-width: 900px) {
  .numerao {
    font-size: 108px;
    letter-spacing: -0.032em;
  }
}

@media (min-width: 1280px) {
  .numerao {
    font-size: 128px;
  }
}

@media (max-width: 760px) {
  .aurora {
    height: 560px;
    filter: blur(32px);
  }
}