/* ==================================================================
   Landing page — Os 10 piores erros do Lula

   Decisoes registradas em docs/decisoes/2026-09-04-visual-da-landing-page.md.

   Os tokens abaixo sao COPIA do bloco :root de build/estilos/base.css.
   Copia, e nao @import, para a pagina nao depender de arquivo fora de
   site/ na hora de publicar. Se mudar a cor la, muda aqui tambem.

   Tema unico e claro: a identidade do projeto e de material impresso.
   Mobile primeiro; o unico ponto de quebra esta em 44rem.
   ================================================================== */

:root {
  --tinta:        #14161a;
  --tinta-fraca:  #55606e;
  --papel:        #ffffff;
  --papel-morno:  #f5f2ec;
  --destaque:     #a8322d;
  --destaque-esc: #8d2723;   /* so da LP: estado :hover do botao */
  --linha:        #d8d2c8;

  --serifada:     Georgia, "Times New Roman", serif;
  --sem-serifa:   "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* escala de espaco (densidade 3/10 — pagina de venda, nao painel) */
  --e1: .5rem;
  --e2: 1rem;
  --e3: 1.5rem;
  --e4: 2.5rem;
  --e5: 4rem;
}

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

body {
  margin: 0;
  color: var(--tinta);
  background: var(--papel);
  font-family: var(--serifada);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--sem-serifa);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--e2); }

a { color: var(--destaque); }
a:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* ------------------------------------------------------------------
   Esqueleto: faixa (a secao) + centro (a coluna de leitura).
   Espacamento vertical mora na faixa, nao nos elementos internos, para
   nao haver duas regras brigando pelo mesmo espaco.
   ------------------------------------------------------------------ */
.faixa  { padding: var(--e5) var(--e3); }
.centro { max-width: 40rem; margin: 0 auto; }
.morno  { background: var(--papel-morno); }
.escura { background: var(--tinta); color: var(--papel); }

/* rotulo: a linha em versalete que anuncia cada secao */
.rotulo {
  font-family: var(--sem-serifa);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--destaque);
  margin: 0 0 var(--e2);
}
.escura .rotulo { color: #e8a49f; }   /* o vermelho puro nao passa no fundo escuro */

h2 {
  font-size: clamp(1.8rem, 6.5vw, 2.6rem);
  font-weight: 800;
  margin-bottom: var(--e3);
}

.legenda {
  font-family: var(--sem-serifa);
  font-size: .9rem;
  color: var(--tinta-fraca);
  margin-top: var(--e3);
}
.escura .legenda { color: #a9b2bd; }

/* ==================================================================
   1. TOPO — o contador
   ================================================================== */
.topo {
  padding: var(--e4) var(--e3) var(--e4);
  border-bottom: 3px solid var(--tinta);
}

.contador { margin: 0 0 var(--e4); }

.contador__valor {
  font-family: var(--sem-serifa);
  font-size: clamp(4.5rem, 22vw, 9rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--destaque);
  margin: 0;
  /* digito de largura fixa: sem isso o numero treme enquanto conta */
  font-variant-numeric: tabular-nums;
}
.contador__pct { font-size: .45em; letter-spacing: -.02em; }

.contador__data {
  font-family: var(--sem-serifa);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tinta);
  margin: var(--e1) 0 var(--e2);
}

/* trilho: a linha fina que preenche junto com a contagem */
.trilho {
  height: 3px;
  background: var(--linha);
  margin-bottom: var(--e2);
}
.trilho__preenche {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--destaque);
  transform-origin: left center;
}

.contador__fonte {
  font-family: var(--sem-serifa);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--tinta-fraca);
}
.contador__fonte strong { color: var(--tinta); }

.regua {
  border: 0;
  border-top: 1px solid var(--linha);
  margin: 0 0 var(--e3);
}

/* O h1 e as copias fatiadas partilham a mesma tipografia: elas precisam
   cair exatamente sobre ele, letra por letra. Mexeu aqui, mexeu nas duas. */
.topo h1,
.topo .fatia {
  font-family: var(--sem-serifa);
  font-size: clamp(2.4rem, 10vw, 4.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.topo h1 { margin: 0 0 var(--e3); }
.topo h1 em,
.topo .fatia em { font-style: normal; color: var(--destaque); }

.promessa {
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  color: var(--tinta-fraca);
  max-width: 34rem;
}

.botao {
  display: inline-block;
  font-family: var(--sem-serifa);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: var(--destaque);
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 2px;
  min-height: 44px;          /* alvo de toque minimo */
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;

  /* contem a varredura de luz do ::after (bloco dos componentes
     comerciais, no fim deste arquivo) */
  position: relative;
  overflow: hidden;
}
.botao:hover { background: var(--destaque-esc); transform: translateY(-1px); }

.sob-botao {
  font-family: var(--sem-serifa);
  font-size: .9rem;
  color: var(--tinta-fraca);
  margin-top: var(--e2);
}

.selos {
  list-style: none;
  display: grid;
  gap: var(--e2);
  padding: var(--e3) 0 0;
  margin: var(--e4) 0 0;
  border-top: 1px solid var(--linha);
  font-family: var(--sem-serifa);
  font-size: .85rem;
  color: var(--tinta-fraca);
}
.selos b {
  display: block;
  color: var(--tinta);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   3. Sumario dos dez capitulos
   A numeracao e informacao: a ordem E a tese do livro.
   ================================================================== */
.sumario { list-style: none; padding: 0; margin: 0; counter-reset: cap; }
.sumario li {
  counter-increment: cap;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--e2);
  align-items: baseline;
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--linha);
}
.sumario li::before {
  content: counter(cap, decimal-leading-zero);
  font-family: var(--sem-serifa);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.03em;
  color: var(--destaque);
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   4. A prova — o pedaco real do livro.
   Estes componentes espelham build/estilos/base.css de proposito:
   e o mesmo objeto que o comprador recebe.
   ================================================================== */
.pagina {
  background: var(--papel);
  border: 1px solid var(--linha);
  box-shadow: 0 18px 40px rgba(20, 22, 26, .10);
  padding: var(--e4) var(--e3);
  font-size: .95rem;
}
.pagina__cap {
  font-family: var(--sem-serifa);
  font-weight: 800;
  font-size: 1.5rem;
  margin: 0 0 var(--e3);
}
.pagina__cap span { color: var(--destaque); }

.ficha-erro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25em .9em;
  font-family: var(--sem-serifa);
  font-size: .8em;
  border-top: 2px solid var(--tinta);
  border-bottom: 1px solid var(--linha);
  padding: .7em 0;
  margin: 0 0 1.5em;
}
.ficha-erro .rot {
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .82em;
  color: var(--destaque);
  padding-top: .15em;
}

.grafico { font-family: var(--sem-serifa); font-size: .8em; margin: 1.4em 0; }
.grafico__titulo { font-weight: 600; margin-bottom: .6em; }
.grafico__linha {
  display: grid;
  grid-template-columns: 4.5rem 1fr 3.2rem;
  align-items: center;
  gap: .5em;
  margin-bottom: .3em;
}
/* a largura mora numa custom property para o GSAP animar a barra
   sem precisar reescrever o valor final que o HTML ja declarou */
.grafico .barra {
  display: block;
  height: .8em;
  width: var(--w);
  background: var(--destaque);
  transform-origin: left center;
}
.grafico .val { text-align: right; font-variant-numeric: tabular-nums; }
.grafico__escala { color: var(--tinta-fraca); font-size: .9em; margin: .6em 0 0; }

.analise {
  background: var(--papel-morno);
  border-left: 4px solid var(--destaque);
  padding: .8em 1em;
  margin: 1.4em 0;
  font-size: .95em;
}
.analise::before {
  content: "Análise do autor — opinião, não fato";
  display: block;
  font-family: var(--sem-serifa);
  font-size: .72em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--destaque);
  margin-bottom: .4em;
}

.fontes {
  border-top: 1px solid var(--linha);
  margin-top: 1.6em;
  padding-top: .8em;
  font-size: .82em;
  color: var(--tinta-fraca);
}
.fontes b {
  font-family: var(--sem-serifa);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85em;
  color: var(--tinta);
}
.fontes p { margin: .5em 0 0; }
.fontes .url { word-break: break-all; }

/* ==================================================================
   5. A capa — o grafico E a capa
   ================================================================== */
.recebe { display: grid; gap: var(--e4); }

.capa {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.414;          /* proporcao A4, igual ao PDF */
  background: var(--papel);
  border: 1px solid var(--linha);
  box-shadow: 0 18px 40px rgba(20, 22, 26, .14);
  padding: var(--e3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* a escada de barras ocupa o pe da capa, atras do texto */
.capa__grafico {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 2%;
  padding: 0 var(--e3);
}
/* A opacidade sobe junto com a barra: a escada fica legivel de longe
   e a propria intensidade conta a historia da serie. */
.capa__grafico span {
  display: block;
  height: var(--h);
  background: var(--destaque);
  opacity: var(--o);
}

.capa__titulo,
.capa__pe { position: relative; }   /* acima do grafico */

.capa__titulo {
  font-family: var(--sem-serifa);
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0;
}

.capa__pe {
  font-family: var(--sem-serifa);
  font-size: .78rem;
  font-weight: 600;
  color: var(--tinta);
  margin: 0;
  padding-top: var(--e1);
  border-top: 2px solid var(--tinta);
  font-variant-numeric: tabular-nums;
}
.capa__pe span { font-weight: 400; color: var(--tinta-fraca); }

/* ==================================================================
   6. O segundo livro (faixa escura)
   ================================================================== */
.quadro { border: 1px solid rgba(255, 255, 255, .25); padding: var(--e3); }
.escura .ficha-erro {
  border-top-color: var(--papel);
  border-bottom-color: rgba(255, 255, 255, .25);
}
.escura .ficha-erro .rot { color: #e8a49f; }

/* ==================================================================
   7. As quatro regras
   ================================================================== */
/* margin-bottom para o caso em que a lista e seguida de texto (secao
   "Como este livro foi feito"). Na secao do metodo ela e o ultimo
   elemento, entao a margem cai dentro do padding da faixa e nao muda nada. */
.regras { list-style: none; padding: 0; margin: 0 0 var(--e3); display: grid; gap: var(--e3); }
.regras li { border-left: 3px solid var(--destaque); padding-left: var(--e2); }
.regras b { font-family: var(--sem-serifa); display: block; margin-bottom: .2em; }

/* ==================================================================
   8. Fecho e rodape
   ================================================================== */
footer {
  font-family: var(--sem-serifa);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--tinta-fraca);
  padding: var(--e4) var(--e3);
  border-top: 1px solid var(--linha);
}
footer strong { color: var(--tinta); }
footer p { margin: 0 0 var(--e1); }

/* ==================================================================
   FOTOGRAFIA

   Toda foto neste projeto tem licenca verificada e credito visivel ao
   leitor. A origem de cada uma esta em docs/creditos-de-imagem.md.
   O credito nao e enfeite: e a condicao da licenca. Nao remover.
   ================================================================== */

.foto { margin: 0; }
.foto img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--papel-morno);   /* reserva o espaco enquanto carrega */
}

.credito {
  font-family: var(--sem-serifa);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--tinta-fraca);
  margin: .5rem 0 0;
}
.escura .credito { color: #8b95a1; }

.foto--larga { margin: var(--e3) 0 var(--e4); }

/* Quadro rotativo: as fotos se revezam dentro de uma janela de altura
   fixa. As tres ficam empilhadas no mesmo lugar; o script mostra uma
   de cada vez. Sem script, a primeira cobre as outras. */
.quadro-foto { margin: 0 0 var(--e4); }
.quadro-foto__janela {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--papel-morno);
  border: 1px solid var(--linha);
}
.quadro-foto__janela .foto {
  position: absolute;
  inset: 0;
}
.quadro-foto__janela .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* rosto acima do centro geometrico */
}
/* Empilhadas na ordem do HTML: sem script, a primeira e a que se ve. */
.quadro-foto__janela .foto:first-child { z-index: 2; }

/* ==================================================================
   TIPOGRAFIA EM MOVIMENTO

   Estas classes sao criadas pelo script.js — nunca vem no HTML. Se o
   JavaScript nao rodar, nada disso existe e o texto fica normal.

   Inspiracao (vista no 21st, reescrita a mao para HTML/CSS/GSAP,
   conforme a regra do CLAUDE.md): "Vertical Cut Reveal", "Text Reveal"
   e "Hero Shutter Text".
   ================================================================== */

/* Palavra dentro de uma mascara: o texto sobe de dentro dela, como
   tipo sendo impresso. O padding + margem negativa existe porque
   overflow:hidden corta a perna do "p" e do "g" sem isso. */
.palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.palavra > span { display: inline-block; }

/* Fatias do titulo do topo: copias do h1, cada uma recortada numa faixa
   horizontal. O h1 original continua no fluxo — para o layout, para o
   leitor de tela e para o buscador — so que transparente; as copias e
   que sao vistas.

   As copias ficam num envelope AO LADO do h1, nunca dentro dele: dentro,
   o texto do titulo apareceria quatro vezes no conteudo do elemento, o
   que parece enchimento de palavra-chave numa pagina que vende rigor.
   O envelope e criado pelo script; sem JavaScript ele nao existe e o h1
   fica com a margem que ja tinha. */
.fatiado { position: relative; margin: 0 0 var(--e3); }
.fatiado h1 { margin: 0; }
.fatiado.pronto h1,
.fatiado.pronto h1 em { color: transparent; }
.fatia {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
  color: var(--tinta);
}

/* ==================================================================
   Telas largas
   ================================================================== */
@media (min-width: 44rem) {
  body { font-size: 18px; }

  .topo, .faixa, footer { padding-left: var(--e5); padding-right: var(--e5); }
  .topo { padding-top: var(--e5); }

  .selos { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
  .pagina { padding: var(--e5); }

  /* a capa de pe, ao lado do texto */
  .recebe { grid-template-columns: 15rem 1fr; align-items: start; gap: var(--e4); }
}

/* ==================================================================
   BLOCOS COMERCIAIS — spec de 07/09.

   Nenhum deles anima. Carregam informacao de compra (preco, prazo,
   garantia), entao precisam estar legiveis mesmo com movimento
   reduzido ligado — a armadilha nº 1 do docs/ESTADO.md.
   ================================================================== */

/* Faixa de lancamento: a primeira coisa acima do topo.
   Texto, nao contador — a virada de preco e manual.

   As mensagens ficam empilhadas na MESMA celula de grid, entao a barra
   tem a altura da mais alta e nada precisa de position:absolute nem de
   altura fixa. Sem JavaScript, so a .ativa do HTML aparece. */
.faixa-lancamento {
  /* sticky, nao fixed: ela ocupa espaco no fluxo antes de grudar, entao
     o topo da pagina nao fica escondido atras dela no primeiro quadro */
  position: sticky;
  top: 0;
  z-index: 30;

  overflow: hidden;
  display: grid;
  margin: 0;
  padding: var(--e2) var(--e3);
  background: var(--destaque);
  color: var(--papel);
  text-align: center;
}

.faixa-lancamento__msg {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--sem-serifa);
  font-size: .95rem;
  line-height: 1.3;
  letter-spacing: .07em;
  text-transform: uppercase;

  /* o "gooey" do 21st sem o filtro SVG de threshold: sobre a barra
     vermelha ele empastelaria o preco, e preco ilegivel nao vende.
     Fica o desfoque no cross-fade, que da a mesma sensacao e custa
     uma transicao de compositor em vez de um filtro por quadro. */
  opacity: 0;
  filter: blur(6px);
  transition: opacity .55s ease, filter .55s ease;
}

.faixa-lancamento__msg.ativa { opacity: 1; filter: blur(0); }

.faixa-lancamento strong { font-weight: 700; }

/* Varredura de luz. Adaptada do spotlight do 21st, que segue o mouse e
   foi feito para fundo escuro: aqui a luz varre sozinha, entao aparece
   no celular tambem — onde pointermove nao existe. So transform, que o
   compositor resolve sem repintar. */
.faixa-lancamento::after,
.botao::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 42%,
    rgba(255, 255, 255, .30) 50%,
    transparent 58%);
  transform: translateX(-100%);
}

.faixa-lancamento::after { animation: varre 6s ease-in-out 1.5s infinite; }
.botao::after           { animation: varre 7s ease-in-out 3s infinite; }

@keyframes varre { to { transform: translateX(100%); } }

/* ------------------------------------------------------------------
   CTA fixo no rodape da tela.

   visibility junto do transform de proposito: so o transform deixaria o
   botao fora da tela mas ainda alcancavel pelo Tab, e um link invisivel
   no caminho do teclado e defeito de acessibilidade, nao detalhe.
   ------------------------------------------------------------------ */
.cta-fixo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;

  padding: var(--e2) var(--e3);
  /* respeita a barra de gestos do iPhone */
  padding-bottom: max(var(--e2), env(safe-area-inset-bottom));

  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--linha);
  text-align: center;

  visibility: hidden;
  transform: translateY(100%);
  transition: transform .3s ease, visibility .3s;
}

.cta-fixo.visivel {
  visibility: visible;
  transform: translateY(0);
}

.cta-fixo .botao {
  display: block;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
}

/* Bloco da oferta: o que o comprador leva, e o prazo. */
.leva {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e3);
  display: grid;
  gap: var(--e2);
}

.leva li {
  padding-left: 1.6em;
  position: relative;
}

.leva li::before {
  content: "\2014";              /* travessao, nao bolinha: a pagina e de texto impresso */
  position: absolute;
  left: 0;
  color: var(--destaque);
}

.leva b { font-family: var(--sem-serifa); }

.prazo {
  font-family: var(--sem-serifa);
  font-size: 1.05rem;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: var(--e2) 0;
  margin: 0 0 var(--e3);
}

.prazo strong { color: var(--destaque); }

/* FAQ. <details> nativo — sem JavaScript, sem plugin, funciona com o
   CDN do GSAP fora do ar e abre pelo teclado. */
.faq { border-top: 1px solid var(--linha); }

.faq details { border-bottom: 1px solid var(--linha); }

.faq summary {
  font-family: var(--sem-serifa);
  font-weight: 600;
  padding: var(--e2) 0;
  cursor: pointer;
}

.faq summary::marker { color: var(--destaque); }

.faq details p { margin: 0 0 var(--e2); }

/* ==================================================================
   Movimento reduzido: quem pede menos movimento nao recebe nenhum.
   O script tambem checa isso; esta regra cobre transicoes de CSS.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  /* A varredura de luz some de vez: com a regra acima ela ainda daria um
     lampejo de um quadro. E a mensagem ativa da barra fica nitida, porque
     ali o desfoque nao e enfeite — e o estado de transicao. */
  .faixa-lancamento::after,
  .botao::after { display: none; }

  .faixa-lancamento__msg.ativa { filter: none; }
}