/* Folha compartilhada pela home e pelas sete paginas de forma de ganhar.
   Sai do <style> que vivia dentro do index.html, para as oito paginas nao
   carregarem oito copias das mesmas regras. */
:root {
    --tinta: #1F2E3A; --creme: #F6F5F2; --linha: #E3E0D9;
    --verde: #2F6B4F; --suave: #5A6673; --branco: #FFFFFF;
  }
  * { box-sizing: border-box; }
  /* O atributo hidden vale display:none pela folha do navegador, que qualquer regra
     nossa de display:flex derruba sem avisar. Sem este !important, os blocos de
     visitante e de logada apareciam os dois ao mesmo tempo. */
  [hidden] { display: none !important; }
  body {
    margin: 0; background: var(--creme); color: var(--tinta);
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  }
  .env { max-width: 920px; margin: 0 auto; padding: 0 20px; }
  h1, h2, h3 { font-family: Newsreader, Georgia, "Times New Roman", serif; font-weight: 500; text-wrap: balance; margin: 0; }
  p { margin: 0; }
  .olho { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--verde); margin: 0; }

  /* ----------------------------------------------------------- cabeçalho */
  /* Faixa escura, como no desenho. Ela nao gruda no topo: quem gruda e a fila de
     atalhos logo abaixo, que e o que a pessoa usa enquanto rola a pagina. */
  .topo { background: var(--tinta); color: var(--creme); }
  .topo__env {
    max-width: 920px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  }
  .marca {
    font-family: Newsreader, Georgia, serif; font-size: 20px; letter-spacing: .15em;
    text-transform: uppercase; text-decoration: none; color: var(--creme);
    display: flex; align-items: baseline; gap: 14px;
  }
  .marca span {
    font-family: Archivo, Arial, sans-serif; font-size: 12px; letter-spacing: .04em;
    text-transform: none; opacity: .75;
  }

  /* Os botoes do modulo de conta nascem pensados para fundo claro; na faixa escura
     eles precisam inverter. A especificidade do .topo na frente basta. */
  .topo .clc-b { background: transparent; color: var(--creme); border-color: rgba(246,245,242,.45); }
  .topo .clc-b:hover { background: rgba(246,245,242,.12); }
  .topo .clc-b--cheio { background: var(--creme); color: var(--tinta); border-color: var(--creme); }
  .topo .clc-b--cheio:hover { background: #fff; }
  .topo .clc-eu__bolha { background: #8E9BA6; color: var(--tinta); }

  /* ----------------------------------------------------------- hero */
  .hero { padding: 68px 0 54px; border-bottom: 1px solid var(--linha); }
  .hero h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.12; margin: 16px 0 0; max-width: 20ch; }
  .hero__texto { font-size: 17px; color: var(--suave); margin: 20px 0 0; max-width: 56ch; }
  .hero__acoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 30px 0 0; }

  .b {
    font: inherit; font-size: 14px; line-height: 1; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
    padding: 14px 24px; border: 1px solid var(--tinta); background: transparent; color: var(--tinta);
    border-radius: 4px; transition: background .18s, color .18s, border-color .18s;
  }
  .b:hover { background: var(--tinta); color: var(--creme); }
  .b--cheio { background: var(--tinta); color: var(--creme); }
  .b--cheio:hover { background: var(--verde); border-color: var(--verde); }

  /* ----------------------------------------------------------- blocos */
  .faixa { padding: 54px 0; border-bottom: 1px solid var(--linha); }
  .faixa > .env > h2 { font-size: clamp(23px, 4vw, 30px); margin: 14px 0 0; max-width: 26ch; }
  .faixa__texto { color: var(--suave); margin: 16px 0 0; max-width: 58ch; }

  .passos { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
  .passos li { background: var(--creme); padding: 20px 22px; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; align-items: start; }
  .passos b { font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); padding-top: 4px; }
  .passos h3 { font-size: 18px; margin: 0 0 5px; }
  .passos p { font-size: 14.5px; color: var(--suave); }

  .formas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin: 30px 0 0; }
  .forma { background: var(--branco); border: 1px solid var(--linha); padding: 20px; }
  .forma span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); }
  .forma h3 { font-size: 17px; margin: 7px 0 0; }

  /* ----------------------------------------------------------- formulário */
  .form { background: var(--branco); border: 1px solid var(--linha); padding: 26px; margin: 30px 0 0; }
  .form__grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
  .campo { display: grid; gap: 6px; min-width: 0; }
  .campo--largo { grid-column: 1 / -1; }
  .campo label { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
  /* 16px evita o zoom automático do Safari do iPhone ao focar o campo. */
  .campo input, .campo select, .campo textarea {
    font: inherit; font-size: 16px; padding: 11px 12px; width: 100%; color: var(--tinta);
    border: 1px solid var(--linha); border-radius: 2px; background: var(--branco); -webkit-appearance: none; appearance: none;
  }
  .campo select {
    background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px;
  }
  .campo select[disabled] { color: var(--suave); background-color: var(--creme); }
  .campo textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
  .campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
  .form__nota { font-size: 13px; color: var(--suave); margin: 18px 0 0; }
  .form__envio { margin: 22px 0 0; }

  .pe { padding: 40px 0 60px; }
  .pe p { font-size: 13px; color: var(--suave); }
  :focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

  /* ----------------------------------------------------------- telas pequenas */
  @media (max-width: 620px) {
    .env, .topo__env { padding-left: 16px; padding-right: 16px; }
    .hero { padding: 44px 0 38px; }
    .faixa { padding: 38px 0; }
    .form { padding: 20px 16px; }
    /* 54px de recuo some o texto num celular estreito: o número vai para cima do título. */
    .passos li { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 17px 18px; }
    .passos b { padding-top: 0; }
    /* Botão com altura de dedo, e largura cheia para não ficar um toque minúsculo no canto. */
    .b { padding: 15px 22px; min-height: 48px; }
    .hero__acoes .b, .form__envio .b { width: 100%; text-align: center; }
  }
  @media (max-width: 360px) {
    .marca { font-size: 16px; }
    .topo__env { gap: 10px; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ------------------------------------------------- páginas de forma de ganhar */

.volta { font-size: 13px; color: var(--suave); text-decoration: none; display: inline-block; margin: 0 0 18px; }
.volta:hover { color: var(--tinta); }

.etiquetas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.etiqueta {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--linha); padding: 4px 10px; border-radius: 999px; color: var(--suave);
}
.etiqueta--aberta { color: var(--verde); border-color: var(--verde); }

/* O número que a pessoa veio ver. Fica sozinho de propósito: é o que ela repete
   para outra pessoa depois de sair da página. */
.destaque { background: var(--branco); border: 1px solid var(--linha); padding: 22px 24px; margin: 28px 0 0; }
.destaque b { font-family: Newsreader, Georgia, serif; font-size: 40px; font-weight: 500; line-height: 1; display: block; }
.destaque p { font-size: 14.5px; color: var(--suave); margin: 8px 0 0; max-width: 46ch; }

.resumo { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.resumo li { background: var(--creme); padding: 13px 18px; display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap; font-size: 14.5px; }
.resumo span { color: var(--suave); }

/* A tabela rola na horizontal dentro da própria caixa: num celular estreito ela
   não pode empurrar a página inteira para o lado. */
.rolagem { overflow-x: auto; margin: 26px 0 0; border: 1px solid var(--linha); background: var(--branco); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 380px; }
.tabela th, .tabela td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--linha); }
.tabela th { font-family: Archivo, Arial, sans-serif; font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.tabela td + td, .tabela th + th { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tr:last-child td { border-bottom: 0; font-weight: 500; }
.tabela tr:last-child { background: var(--creme); }
.legenda { font-size: 12.5px; color: var(--suave); margin: 10px 0 0; }

.cartoes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); margin: 28px 0 0; }
.cartao { background: var(--branco); border: 1px solid var(--linha); padding: 20px; }
.cartao span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); }
.cartao h3 { font-size: 17px; margin: 7px 0 0; }
.cartao p { font-size: 14.5px; color: var(--suave); margin: 9px 0 0; }

.duplo { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin: 28px 0 0; }
.coluna { background: var(--branco); border: 1px solid var(--linha); padding: 20px 22px; }
.coluna h3 { font-size: 16px; margin: 0 0 12px; }
.marcada { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.marcada li { font-size: 14.5px; color: var(--suave); padding-left: 20px; position: relative; }
.marcada li::before { content: "—"; position: absolute; left: 0; color: var(--verde); }

.perguntas { margin: 28px 0 0; border-top: 1px solid var(--linha); }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta summary { cursor: pointer; padding: 16px 0; font-size: 15.5px; list-style: none; display: flex; gap: 14px; justify-content: space-between; align-items: baseline; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: "+"; color: var(--verde); font-size: 18px; line-height: 1; flex: none; }
.pergunta[open] summary::after { content: "–"; }
.pergunta p { font-size: 14.5px; color: var(--suave); padding: 0 0 18px; max-width: 62ch; }

.outras { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.outras a { background: var(--creme); padding: 16px 20px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 16px; align-items: center; text-decoration: none; color: inherit; }
.outras a:hover { background: var(--branco); }
.outras b { font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); }
.outras h3 { font-size: 15.5px; }
.outras em { font-style: normal; font-size: 13px; color: var(--suave); text-align: right; }

@media (max-width: 620px) {
  .destaque b { font-size: 34px; }
  .outras a { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 15px 18px; }
  .outras em { text-align: left; }
}

/* Um cartão de forma vira link quando a página dela existe; os outros ficam como
   cartão parado, com a etiqueta dizendo que a página ainda está sendo escrita. */
.forma em { display: block; font-style: normal; font-size: 12.5px; color: var(--suave); margin: 9px 0 0; }
.forma--link { text-decoration: none; color: inherit; display: block; transition: border-color .18s, background .18s; }
.forma--link:hover { border-color: var(--verde); background: var(--creme); }
.forma--link em { color: var(--verde); }

/* ------------------------------------------------- painel da criadora */

.saudacao { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.saudacao h1 { font-size: clamp(27px, 5vw, 38px); line-height: 1.15; margin: 10px 0 0; }
.saudacao .quando { color: var(--suave); font-size: 14.5px; margin: 6px 0 0; }
.nivel-chip {
  display: flex; align-items: center; gap: 10px; background: var(--branco);
  border: 1px solid var(--linha); border-radius: 999px; padding: 9px 17px; font-size: 14px;
}
.nivel-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); flex: none; }
.nivel-chip span { color: var(--suave); }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin: 28px 0 0; }
.numero { background: var(--branco); border: 1px solid var(--linha); padding: 20px; }
.numero .rotulo { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--suave); }
.numero .valor { font-size: 28px; line-height: 1.2; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
/* padding: 0 porque .pe tambem e a classe do rodape, que no celular ganha 40px/60px. */
.numero .pe { font-size: 13px; color: var(--suave); margin: 7px 0 0; padding: 0; }
/* Sem venda nenhuma ainda, o traço é mais honesto que um zero: zero parece um resultado,
   traço parece o que é — ainda não há o que contar. */
.numero--vazio .valor { color: var(--suave); }

.escuro { background: var(--tinta); color: var(--creme); padding: 28px 30px; margin: 28px 0 0; }
.escuro h2 { font-size: 22px; margin: 0 0 10px; color: var(--creme); }
.escuro p { font-size: 15px; opacity: .88; max-width: 70ch; }
.criterios { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; list-style: none; padding: 0; }
.criterios li { font-size: 13px; border: 1px solid rgba(246,245,242,.34); border-radius: 999px; padding: 8px 14px; }

.caixa-cupom { background: var(--branco); border: 1px solid var(--linha); padding: 22px; }
.caixa-cupom .rotulo { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--suave); }
.caixa-cupom p { font-size: 13.5px; color: var(--suave); margin: 7px 0 14px; }
.codigo {
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 22px; letter-spacing: .07em;
  background: var(--creme); border: 1px dashed var(--tinta); padding: 11px 17px; display: inline-block;
}
.codigo--vazio { border-style: solid; border-color: var(--linha); color: var(--suave); font-size: 14px; letter-spacing: 0; }

.aviso-painel {
  background: var(--branco); border: 1px solid var(--linha); border-left: 3px solid var(--verde);
  padding: 16px 18px; margin: 28px 0 0; font-size: 14.5px; color: var(--suave);
}
.aviso-painel strong { color: var(--tinta); font-weight: 500; }

/* ------------------------------------------------- home: as sete e os níveis */

/* A fila de atalhos é o que gruda no topo, em pílulas, e rola na horizontal no
   celular — foi assim que o desenho resolveu caber cinco seções em 390px. */
.atalhos {
  position: sticky; top: 0; z-index: 400; background: var(--creme);
  border-bottom: 1px solid var(--linha); padding: 12px 0;
}
.atalhos__env {
  max-width: 920px; margin: 0 auto; padding: 0 20px;
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
}
.atalhos__env::-webkit-scrollbar { display: none; }
.atalhos a {
  flex: none; font-size: 13.5px; color: var(--tinta); background: var(--branco);
  border: 1px solid #D8D4CB; border-radius: 999px; padding: 11px 19px;
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
.atalhos a:hover { border-color: var(--tinta); }
/* A forma em que a pessoa está fica preenchida: numa fila que rola, é o único jeito
   de ela saber onde está sem contar as pílulas. */
.atalhos a[aria-current="page"] { background: var(--tinta); color: var(--creme); border-color: var(--tinta); }
.atalhos .num { opacity: .55; margin-right: 7px; font-variant-numeric: tabular-nums; }

/* A barra de baixo existe só no celular: ali o polegar alcança o rodapé, não o topo.
   É a decisão que a nota do desenho chama de "navegação ao alcance do polegar". */
.barra-baixo { display: none; }
@media (max-width: 760px) {
  .barra-baixo {
    position: sticky; bottom: 0; z-index: 450; display: flex; gap: 12px; align-items: center;
    background: var(--creme); border-top: 1px solid var(--linha);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .barra-baixo .b { flex: 1; }
  .barra-baixo .b--texto { flex: none; border: 0; background: none; padding: 14px 8px; }
  /* No celular o "criar conta" do cabeçalho seria o mesmo botão da barra de baixo. */
  .topo .clc-b--cheio { display: none; }
  .marca { font-size: 15px; letter-spacing: .14em; }
  .marca span { display: none; }
}

/* Cada forma é uma entrada de lista, não um cartão solto: a ordem carrega informação
   (da mais simples de entrar à mais disputada) e uma grade esconderia isso. */
.listaformas { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.listaformas > li { background: var(--branco); }
.listaformas a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 24px 26px; text-decoration: none; color: inherit; }
.listaformas a:hover { background: var(--creme); }
.listaformas .n { font-size: 12px; letter-spacing: .12em; color: var(--verde); padding-top: 5px; }
.listaformas .selos { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 9px; }
.listaformas h3 { font-size: 19px; margin: 0 0 8px; }
.listaformas p { font-size: 14.5px; color: var(--suave); max-width: 64ch; }
.listaformas .pagamento { font-size: 13px; color: var(--tinta); margin: 12px 0 0; }
.listaformas .pagamento b { font-weight: 400; color: var(--suave); }
.listaformas .ler { font-size: 13.5px; color: var(--verde); margin: 12px 0 0; }

.niveis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin: 30px 0 0; }
.nivel { background: var(--branco); border: 1px solid var(--linha); padding: 22px; }
.nivel h3 { font-size: 20px; margin: 0; }
.nivel .prefixo { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); margin: 0 0 7px; }
.nivel .comissao { font-size: 13.5px; color: var(--suave); margin: 9px 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--linha); }
.nivel--topo { background: var(--tinta); color: var(--creme); border-color: var(--tinta); }
.nivel--topo .prefixo { color: #C9A45B; }
.nivel--topo .comissao { color: rgba(246,245,242,.8); border-bottom-color: rgba(246,245,242,.26); }
.nivel--topo .marcada li { color: rgba(246,245,242,.85); }
.nivel--topo .marcada li::before { color: #C9A45B; }

.quem { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 26px 0 0; }
.quem td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
.quem td:first-child { width: 38%; }
.quem td:last-child { color: var(--suave); }

@media (max-width: 620px) {
  .listaformas a { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 18px; }
  .listaformas .n { padding-top: 0; }
  .quem td { display: block; border-bottom: 0; padding: 2px 0; }
  .quem td:first-child { width: auto; padding-top: 12px; }
  .quem tr { display: block; border-bottom: 1px solid var(--linha); padding: 0 0 12px; }
}

/* ------------------------------------------------- resumo das sete formas */

.resumo-formas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.resumo-formas li {
  background: var(--branco); padding: 20px 22px;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; align-items: center;
}
.resumo-formas .n { font-size: 12px; letter-spacing: .12em; color: var(--verde); }
.resumo-formas h2 { font-size: 17px; margin: 0 0 6px; }
.resumo-formas p { font-size: 14.5px; color: var(--suave); max-width: 62ch; }
.resumo-formas .b { flex: none; white-space: nowrap; }

@media (max-width: 680px) {
  .resumo-formas li { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; }
  .resumo-formas .b { width: 100%; }
}

/* ------------------------------------------------- aviso de que falta se candidatar */

/* Vermelho claro: é um empurrão, não um erro. O texto fica em tinta normal para
   continuar legível — vermelho sobre vermelho cansa de ler. */
.chamada {
  background: #FCF1F3; border: 1px solid #F0D3DA; border-left: 3px solid var(--critico);
  padding: 20px 22px; margin: 28px 0 0;
}
.chamada h3 { font-size: 17px; margin: 0 0 8px; color: var(--critico); }
.chamada p { font-size: 14.5px; color: var(--tinta); margin: 0 0 16px; max-width: 60ch; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chamada { background: #2A1B20; border-color: #4A2B34; }
}

/* ---------- painel: cupom, link e lista de vendas ---------- */
.b--mini { min-height: 40px; padding: 8px 16px; font-size: 13px; margin: 12px 0 0; }
.codigo--link { font-size: 14px; letter-spacing: 0; word-break: break-all; }
/* A .tabela destaca a última linha porque nas páginas das formas ela é o total. Numa lista
   de vendas a última linha é só a venda mais antiga. */
.tabela--lista tr:last-child { background: transparent; }
.tabela--lista tr:last-child td { font-weight: 400; }
.tabela--lista { min-width: 0; }
.tabela--lista td small { display: block; font-size: 12.5px; color: var(--suave); margin: 3px 0 0; }
@media (max-width: 760px) { .tabela--lista th, .tabela--lista td { padding: 12px 12px; } }