/* ==========================================================================
   Garimpo de Leads — LP em dioramas

   Tema claro, layout em split: o diorama de um lado, o texto do outro,
   sobre um fundo creme contínuo. Os renders têm fundo #E9ECE5–#F0F3EC,
   praticamente o --quartzo dos tokens — então o objeto pousa na página
   sem moldura, e a rolagem vira uma superfície única.

   Enquadramento: cada cena tem --escala e --foco (medidos do bounding box
   do objeto no render). Isso normaliza o tamanho aparente do diorama entre
   as cenas e vale igual para o poster e para o vídeo — nada é recortado no
   arquivo, para o poster casar 1:1 com o primeiro frame do vídeo.

   Técnica de vídeo: play ao entrar no viewport. Nenhum scrub de currentTime.
   Paleta espelha frontend/src/styles/tokens.css
   ========================================================================== */

:root {
  --quartzo: #EFF2EC;
  --papel: #F9FBF7;
  --papel-2: #E9EDE5;
  --tinta: #14261C;
  --tinta-2: #4C5E52;
  --tinta-3: #7C8C80;
  --linha: #D8DFD3;
  --linha-forte: #B9C4B4;
  --esmeralda: #122A1F;
  --esmeralda-2: #1B3A2B;
  --malaquita: #17804A;
  --malaquita-escura: #0F5C34;
  --ouro: #A8842B;
  --ouro-claro: #E0C069;
  --oxido: #A93B26;

  /* fundo médio dos sete renders — o que faz o objeto pousar sem emenda */
  --bancada: #EDF0E9;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 6rem);
  --curva: cubic-bezier(.16, .84, .28, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bancada);
}

body {
  margin: 0;
  background: var(--bancada);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(1rem, .55vw + .88rem, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }

.pular { position: absolute; left: -9999px; }
.pular:focus {
  left: var(--gutter);
  top: 1rem;
  z-index: 100;
  background: var(--papel);
  color: var(--tinta);
  padding: .6rem 1rem;
  border-radius: 999px;
}

/* ---------- topo ---------- */

.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  color: var(--tinta);
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--curva), backdrop-filter .5s var(--curva),
              border-color .5s var(--curva);
}
.topo[data-solido="true"] {
  background: color-mix(in srgb, var(--bancada) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linha);
}

.marca {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: .01em;
}
.marca-ponto { color: var(--ouro); }

.topo-nav {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  font-size: .9rem;
}
.topo-nav a { color: inherit; text-decoration: none; }
.topo-nav a:hover { text-decoration: underline; text-underline-offset: .3em; }

/* ---------- botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .3s var(--curva), background-color .3s, color .3s, border-color .3s;
}
.botao:hover { transform: translateY(-2px); }
.botao:focus-visible { outline: 2px solid var(--malaquita); outline-offset: 3px; }

.botao-solido { background: var(--esmeralda); color: var(--papel); }
.botao-solido:hover { background: var(--esmeralda-2); }

.botao-ouro { background: var(--ouro); color: var(--papel); }
.botao-ouro:hover { background: #967424; }

.botao-fantasma {
  border: 1px solid var(--linha-forte);
  padding: .55rem 1.1rem;
}
.botao-fantasma:hover { border-color: var(--tinta-2); }

.botao-texto {
  padding-inline: 0;
  color: var(--tinta-2);
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-color: var(--linha-forte);
}

/* ==========================================================================
   Cena — split: mídia de um lado, texto do outro
   ========================================================================== */

.cena {
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  padding: clamp(3.5rem, 8vh, 6rem) var(--gutter);
  min-height: 100svh;
}

/* alterna o lado a cada cena marcada como invertida */
@media (min-width: 60rem) {
  .cena { grid-template-columns: 1.05fr .95fr; }
  .cena-media { grid-column: 1; grid-row: 1; }
  .cena-texto { grid-column: 2; grid-row: 1; }
  .cena-invertida .cena-media { grid-column: 2; }
  .cena-invertida .cena-texto { grid-column: 1; }
}

/* ---------- mídia ---------- */

.cena-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  /* Dissolve as bordas no fundo da página: sem moldura, sem emenda.
     O fundo do render (#E9ECE5–#F0F3EC) e o da página (--bancada) são
     próximos mas não idênticos; a máscara elimina a linha do retângulo. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.cena-video,
.cena-poster {
  width: 100%;
  height: 100%;
  /* `contain`, não `cover`: o diorama nunca pode ser cortado. A sobra fica
     preenchida por --bancada, que é a própria cor de fundo do arquivo — ou
     seja, invisível. É o que torna seguro escalar por cena sem clipar. */
  object-fit: contain;
  object-position: var(--foco, 50% 50%);
  /* --escala normaliza o tamanho aparente do objeto entre as cenas;
     --desloca é o parallax leve escrito pelo JS */
  transform: scale(var(--escala, 1)) translate3d(0, var(--desloca, 0px), 0);
  transform-origin: var(--foco, 50% 50%);
  transition: opacity .9s var(--curva);
}

/* Enquadramento e fundo por cena.
   --escala/--foco: medidos do bounding box do objeto em cada render, para o
     diorama ter o mesmo tamanho aparente nas sete cenas.
   --bancada: cor de fundo amostrada do próprio render, para a seção inteira
     ter exatamente o tom do arquivo — é isso que apaga o retângulo da imagem.
   Ambos valem igualmente para o poster e para o vídeo. */
.cena[data-cena="1"] { --escala: .895;  --foco: 53.2% 51.2%; --bancada: #EAEBE3; }
.cena[data-cena="2"] { --escala: .896;  --foco: 53.2% 51.2%; --bancada: #EAEBE3; }
.cena[data-cena="3"] { --escala: .847;  --foco: 53.2% 56.8%; --bancada: #ECEDE7; }
.cena[data-cena="4"] { --escala: 1.287; --foco: 55.1% 53.6%; --bancada: #EDEFEC; }
.cena[data-cena="5"] { --escala: 1.099; --foco: 52.7% 51.1%; --bancada: #ECEDE7; }
.cena[data-cena="6"] { --escala: 1.031; --foco: 45.3% 52.9%; --bancada: #EFF1EC; }
.cena[data-cena="7"] { --escala: 1.046; --foco: 46.0% 55.3%; --bancada: #F1F2ED; }
.cena { background: var(--bancada); }

/* o vídeo entra por cima do poster quando começa a tocar */
.cena-video {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.cena[data-tocando="true"] .cena-video { opacity: 1; }

/* ---------- texto ---------- */

.cena-texto {
  max-width: 34rem;
  display: grid;
  gap: 1.05rem;
  align-content: center;
}
.cena-texto-centro {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
  max-width: 52rem;
}

.olho, .etapa {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.cena-texto-centro .olho,
.cena-texto-centro .etapa { justify-content: center; }

.etapa span {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--tinta-3);
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
  color: var(--esmeralda);
}
h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.titulo-hero { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h1 em, h2 em {
  font-style: italic;
  color: var(--malaquita);
}

.cena-texto p {
  margin: 0;
  color: var(--tinta-2);
  text-wrap: pretty;
}
.chamada { font-size: clamp(1.05rem, .5vw + .95rem, 1.2rem); }

.destaque {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.4vw + .9rem, 1.6rem);
  font-style: italic;
  color: var(--esmeralda) !important;
  border-left: 2px solid var(--ouro);
  padding-left: 1.1rem;
  line-height: 1.32;
}

.marcadores {
  margin: .3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .65rem;
}
.marcadores li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--tinta-2);
  font-size: .98rem;
}
.marcadores li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ouro) 16%, transparent);
}

.numeros {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3rem);
  margin-top: .6rem;
}
.numeros div { display: grid; gap: .2rem; }
.numeros strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.6vw, 3.2rem);
  line-height: 1;
  color: var(--malaquita);
  font-variant-numeric: tabular-nums;
}
.numeros span {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-3);
  max-width: 12rem;
}

/* ==========================================================================
   Ficha técnica da etapa

   Diz, ao lado do diorama, o que o software faz naquela etapa: território,
   classe de site, ficha do lead, laudo, briefing, versões da demo, proposta.

   Forma deliberadamente editorial, não de aplicativo. A primeira versão disto
   era um cartão com borda, raio, sombra e caixa de seleção verde — cara de
   painel administrativo colado numa página que é cinema. Aqui não há caixa:
   só fio de 1 px, rótulo em caixa-alta miúda e valor em serifada, como a
   página de especificação de um produto caro. Também não é captura de tela:
   print custaria ~200 KB por cena e envelheceria a cada mudança de UI.
   ========================================================================== */

.ficha {
  display: grid;
  gap: .55rem;
  margin: .5rem 0 0;
  max-width: 27rem;
}

/* Rótulos em --tinta-2, não --tinta-3: em 11–12 px maiúsculo o --tinta-3 dá
   3,3:1 sobre o fundo, abaixo do 4,5:1 da WCAG AA; --tinta-2 dá 6,5:1. */
.ficha-titulo {
  margin: 0;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.ficha-lista {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--linha);
}

.ficha-linha {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding-block: .58rem;
  border-bottom: 1px solid var(--linha);
}
.ficha-linha dt {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.ficha-linha dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.28;
  color: var(--esmeralda);
  text-wrap: pretty;
}

/* tela estreita: rótulo em cima do valor, senão a coluna fixa come a linha */
@media (max-width: 30rem) {
  .ficha-linha {
    grid-template-columns: 1fr;
    gap: .15rem;
    padding-block: .5rem;
  }
}

/* fora do fluxo do pipeline: fica dito, sem alarde e sem risco no texto */
.ficha-linha[data-fora="true"] dt,
.ficha-linha[data-fora="true"] dd { color: var(--tinta-3); }

/* versão escolhida: o número vira ouro, o resto continua igual */
.ficha-versao dt {
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-3);
}
.ficha-versao[data-atual="true"] dt { color: var(--ouro); }
.ficha-versao[data-atual="true"] dd { color: var(--esmeralda); }
.ficha-versao:not([data-atual="true"]) dd { color: var(--tinta-2); }

/* amostra da paleta: sete faixas rentes, sem borda nem raio — cartela de
   tinta, não swatch de editor de cor */
.ficha-paleta {
  display: grid;
  grid-auto-flow: column;
  height: .85rem;
  margin-bottom: .1rem;
}
.ficha-paleta span { display: block; }

/* laudo: a nota é tipografia, não medidor. Sem barra colorida — o número
   grande em serifada e a nota por pilar em tabular já dizem tudo. */
.ficha-nota {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 .1rem;
}
.ficha-nota b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: .9;
  color: var(--esmeralda);
  font-variant-numeric: tabular-nums;
}
.ficha-nota span {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.ficha-linha dd .pilar-nota {
  font-variant-numeric: tabular-nums;
  color: var(--oxido);
}

/* A ficha se preenche linha por linha depois que o texto pousa — o dado
   chegando na tela, mesmo gesto das anotações sobre o diorama.
   Quem marca [data-visivel] é a .cena (split) ou o .bloco (palco fixo). */
.ficha > *,
.ficha-lista > * {
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity .6s var(--curva), transform .6s var(--curva);
}
[data-visivel="true"] .ficha > *,
[data-visivel="true"] .ficha-lista > * { opacity: 1; transform: none; }
.ficha > :nth-child(1) { transition-delay: .28s; }
.ficha > :nth-child(2) { transition-delay: .36s; }
.ficha > :nth-child(3) { transition-delay: .44s; }
.ficha-lista > :nth-child(1) { transition-delay: .44s; }
.ficha-lista > :nth-child(2) { transition-delay: .54s; }
.ficha-lista > :nth-child(3) { transition-delay: .64s; }
.ficha-lista > :nth-child(4) { transition-delay: .74s; }
.ficha-lista > :nth-child(5) { transition-delay: .84s; }

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: .7rem;
}
.cena-texto-centro .acoes { justify-content: center; }

/* ---------- abertura e fechamento: mídia larga, texto centrado ---------- */

.cena-abertura,
.cena-fechamento {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(.5rem, 2vh, 1.5rem);
}
@media (min-width: 60rem) {
  .cena-abertura,
  .cena-fechamento { grid-template-columns: 1fr; }
  .cena-abertura .cena-media,
  .cena-fechamento .cena-media,
  .cena-abertura .cena-texto,
  .cena-fechamento .cena-texto { grid-column: 1; grid-row: auto; }
}
/* o texto vem primeiro: o diorama não pode empurrar a promessa para fora da tela */
.cena-abertura .cena-texto,
.cena-fechamento .cena-texto { order: -1; }

.cena-abertura .cena-media,
.cena-fechamento .cena-media {
  aspect-ratio: 16 / 9;
  /* O teto de altura entra como teto de LARGURA, mantendo a proporção.
     Com `max-height` a caixa achatava sem estreitar, virava 2,6:1, e o
     `object-fit` comia a base do diorama. */
  width: min(100%, 68rem, calc(60svh * 16 / 9));
}

/* ---------- indicador de rolagem ---------- */

.rolar {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  translate: -50% 0;
  width: 1px;
  height: 3.2rem;
  background: var(--linha);
  overflow: hidden;
}
.rolar span {
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--ouro);
  animation: escorre 2.4s var(--curva) infinite;
}
@keyframes escorre {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

/* ---------- reveal por scroll ---------- */

[data-anim] {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity .8s var(--curva), transform .8s var(--curva);
  transition-delay: calc((var(--i, 1) - 1) * 110ms);
}
.cena[data-visivel="true"] [data-anim] {
  opacity: 1;
  transform: none;
}

.cena-media {
  opacity: 0;
  transform: translateY(1.8rem);
  transition: opacity 1s var(--curva), transform 1s var(--curva);
}
.cena[data-visivel="true"] .cena-media {
  opacity: 1;
  transform: none;
}

/* ---------- rodapé ---------- */

.rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding: 2.5rem var(--gutter);
  background: var(--esmeralda);
  color: color-mix(in srgb, var(--papel) 60%, var(--tinta-3));
  font-size: .85rem;
}
.rodape-nota { color: color-mix(in srgb, var(--papel) 42%, var(--tinta-3)); }

/* ---------- responsivo ---------- */

@media (max-width: 60rem) {
  .cena { min-height: 0; padding-block: clamp(3rem, 8vh, 5rem); }
  .cena-texto { max-width: none; }
  /* Caixa na mesma proporção da mídia: em 4/3 sobrava faixa vazia em cima e
     embaixo, e o diorama ficava pequeno à toa. Sangra até a borda da tela
     para ganhar a largura das gutters — o texto não é afetado. */
  .cena-media {
    aspect-ratio: 16 / 9;
    margin-inline: calc(var(--gutter) * -1);
  }
  /* Com a caixa na proporção exata da mídia, o `contain` já a encaixa inteira:
     qualquer --escala acima de 1 passaria a cortar. No desktop a caixa é 16/11
     e sobra altura para ampliar; aqui não. Escala neutra: nada é cortado, e o
     diorama fica no maior tamanho possível para a largura da tela. */
  .cena[data-cena] { --escala: 1; }
  .cena-abertura .cena-media,
  .cena-fechamento .cena-media { width: auto; max-height: none; }
}

@media (max-width: 40rem) {
  .topo-nav a:not(.botao) { display: none; }
}

/* ---------- acessibilidade / preferências ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cena-video, .cena-poster { transition: none; }
  .cena-video { transform: scale(var(--escala, 1)); }
  .cena-poster { transform: scale(var(--escala, 1)); }
  [data-anim], .cena-media { opacity: 1; transform: none; transition: none; }
  .ficha > *, .ficha-lista > * { opacity: 1; transform: none; transition: none; }
  .rolar { display: none; }
  .botao:hover { transform: none; }
}

/* fallback sem JS: mostra tudo */
.sem-js [data-anim],
.sem-js .cena-media,
.sem-js .ficha > *,
.sem-js .ficha-lista > * { opacity: 1; transform: none; }