/* Página de captura do INDEX — reconstrução em fundo claro.
   Paleta de design gráfico (não a de vestuário do estilo.css): índigo sobre
   #F5F5F4. Arquivo separado de propósito — as outras 3 páginas do site
   continuam na paleta escura, sem tocar aqui.
   Sem fontes externas, sem bibliotecas de animação — ver desenho.md em
   producao/index/pagina-de-capturar-index/ pro porquê de cada escolha. */

:root {
  --fundo:        #F5F5F4;
  --fundo-caixa:  #D9D9D9;
  --tinta:        #181f27;
  --tinta-fraca:  #59636E;  /* H1 dobra 1, 1ª linha — um tico mais clara, ~6:1 sobre o fundo */
  --tinta-suave:  #6E6C69;  /* corpo de H2 — ~15% mais fraca que a versão anterior */
  --tinta-corpo:  #55534F;  /* descrições da dobra 2 — mais escura que --tinta-suave, mais legível */
  --tinta-cta:    #4A4844;  /* cinzas da CTA final — ainda mais escura, contraste com o glow */
  --linha-campo:  #C9C7C4;  /* borda do campo de e-mail — cinza, não preto */
  --indigo:       #181284;
  --indigo-alto:  #321193;
  --coral:        #F73640;
  --laranja:      #F85A2E;
  --laranja-texto: #C24010;  /* laranja escurecido — 4,77:1 sobre o fundo (o puro dá só 3,4:1) */
  --violeta:      #5E17EC;
  --vermelho:     #B6120A;
  --branco:       #ffffff;

  --fonte: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --raio: 4px;               /* foto ganha curva — mas discreta */

  /* Escala de espaçamento — dentro do bloco ~1,25×, entre blocos ~5× */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 5rem;

  /* Deslocamento do grid da dobra 1 pra centralizar no vão entre o aviso e
     "Ideias rápidas" — mesma variável lida por .painel (margin-top) e
     .dobra-2 (padding-top), por isso vive no :root, não numa das duas
     regras. Valores calibrados no browser, não estimados. */
  --grid-desloca: 38px;
  /* Quanto o bloco "Ideias rápidas / O Melhor…" desce. Metade disso vai pro
     margin-top do grid e metade pro padding-top da dobra-2 — é o que mantém
     o grid no centro exato do vão novo sem recalibrar à mão. */
  --dobra2-empurra: 72px;
  /* Onde o centro do glow do CTA final cai, medido do topo da seção —
     alinhado ao centro do bloco H1+H2 (era o centro da seção inteira,
     ou seja, bem abaixo do texto). */
  --cta-glow-topo: 142px;
}

@media (min-width: 640px) {
  :root { --grid-desloca: 20px; --dobra2-empurra: 96px; --cta-glow-topo: 167px; }
}

* { box-sizing: border-box; }

/* overflow-x: clip (não hidden) — o glow do CTA final é maior que a tela em
   mobile e cria uma barra de rolagem lateral fantasma. clip recorta sem
   criar contexto de rolagem; hidden no body sozinho não resolve porque o
   overflow do body propaga pro viewport quando o html está visible. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.envolucro {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Tipografia — H1/H2 muito mais dramáticos, centralizados na página inteira */

h1 {
  font-family: var(--fonte);
  font-weight: 700;
  font-size: clamp(1.85rem, 8.2vw, 4.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 1rem;
}

h2 {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--tinta-suave);
  text-align: center;
  margin: 0 auto var(--sp-3);
  max-width: 32rem;
}

em { font-style: italic; }

/* A quebra do H1 da dobra 1 agora é fixa em todos os tamanhos — a primeira
   frase cabe sozinha na primeira linha com o clamp abaixo (calibrado pra
   isso), a segunda quebra em 1-2 linhas por conta própria. */

@media (min-width: 640px) {
  h1 { margin-bottom: 2.2rem; letter-spacing: -0.025em; }
  h2 { font-size: 1.1875rem; line-height: 1.7; margin-bottom: var(--sp-4); }
}

/* Scroll reveal (JS liga a classe) ------------------------------------ */

.revelar {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 700ms ease, transform 700ms ease;
}

.revelar--visivel {
  opacity: 1;
  transform: none;
}

/* ============================================================
   DOBRA 1 — texto + captura em cima, grid como ponte visual embaixo
   ============================================================ */

.dobra-1 {
  /* Rodada 8: 96svh (era 100svh) — a página inteira sobe 4%, porque tudo
     que vem depois desta seção (grid, dobra 2, dobra 3, CTA) é empurrado
     junto pela redução da altura desta primeira dobra, e não só o miolo
     dela por dentro (era o que a tentativa da rodada 7 fazia — só
     redistribuía o espaço livre DENTRO de .captura, sem afetar a página). */
  min-height: 96svh;
  display: flex;
  flex-direction: column;
}

.captura {
  --grid-visivel: 20svh;
  flex: 1 0 auto;
  min-height: calc(96svh - var(--grid-visivel));
  display: flex;
  flex-direction: column;
  max-width: 34rem;
  margin: 0 auto;
  width: 100%;
  padding: var(--sp-2) 1.25rem;
}

@media (min-width: 640px) {
  .captura { --grid-visivel: 30vh; max-width: 40rem; padding: var(--sp-5) 1.5rem; }
}

@media (min-width: 1024px) {
  .captura { max-width: 62rem; }
}

/* Miolo (H1/H2/form/aviso) empurrado pro rodapé da dobra via margin-top:auto —
   o respiro sobra em cima e o grid fica colado no aviso. */
.captura__miolo {
  margin-top: auto;
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-2);
}

/* 3 degraus calibrados no browser — o container do H1 fica travado em
   40rem (640px) entre 640 e 1024px de viewport, então o tamanho de fonte
   não pode continuar escalando por vw nesse intervalo sem estourar e
   quebrar "Uma Ideia muda seu dia," em 2 linhas (era o bug desta rodada). */
.captura h1 {
  font-size: clamp(1.7rem, 7.3vw, 2.6rem);
}

@media (min-width: 640px) {
  .captura h1 { font-size: 2.75rem; }
}

@media (min-width: 1024px) {
  .captura h1 { font-size: clamp(2.75rem, 3.6vw, 3.6rem); }
}

.captura__destaque { color: var(--indigo); }

/* Degrau de cor entre as duas frases do H1 da dobra 1 */
.captura h1 .linha-contexto { color: var(--tinta-fraca); }
.captura h1 .linha-arremate { color: var(--tinta); }

/* Largura do conjunto = largura do aviso ("100% Gratuito. Acesso imediato.
   Não enviarei Spam." cabe em ~20rem a 13px) — form e aviso vivem dentro
   desse wrapper comum, mais estreito que o container do H1/H2. */
.captura__acao {
  max-width: 20rem;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .captura__acao { max-width: 22rem; }
}

.form-captura {
  margin-top: var(--sp-1);
}

@media (min-width: 640px) {
  .form-captura { margin-top: var(--sp-2); }
}

.campo-email {
  display: block;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.75rem 1rem;
  margin-bottom: var(--sp-2);
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 1.0625rem;
  text-align: left;
}

.campo-email::placeholder { color: var(--tinta-suave); opacity: 0.6; font-size: 0.9375rem; }

.campo-email:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
  border-color: var(--indigo);
}

.botao-principal {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.9375rem 1.25rem;
  border: 0;
  border-radius: var(--raio);
  background: var(--indigo);
  color: #fff;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.botao-principal:hover,
.botao-principal:focus-visible {
  background: var(--indigo-alto);
  transform: translateY(-1px);
}

.aviso {
  color: var(--tinta-suave);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  margin: var(--sp-3) 0 0;
}

/* Painel de refs — grid simulando o feed, ponte visual até a dobra 2 */

.painel {
  position: relative;
  width: 100%;
  max-width: 52rem;
  margin: calc(var(--grid-desloca) + var(--dobra2-empurra) / 2) auto 0;
  height: calc(40svh * 1.12); /* rodada 6: 12% mais alto, só no mobile — a
     regra >=640px abaixo tem seu próprio height e sobrescreve isso inteiro */
  overflow: hidden;
  padding: 0 4.5rem;
  flex: 0 0 auto;
}

@media (min-width: 640px) {
  .painel { height: 64vh; padding: 0 7rem; }
}

.painel__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  height: 185%;
  margin-top: -20%;
  transform: perspective(1000px) rotateX(13deg) rotateZ(4deg) scale(1.08);
  transform-origin: 50% 50%;
}

@media (min-width: 640px) {
  .painel__grade { grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
}

.painel__coluna {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
}

/* 4 colunas no DOM sempre; a 4ª só aparece a partir do breakpoint —
   evita que ela quebre linha num grid de 3 colunas no mobile. */
.painel__coluna:nth-child(4) { display: none; }

@media (min-width: 640px) {
  .painel__coluna:nth-child(4) { display: block; }
}

.painel__trilha {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: painel-subir var(--vel, 100s) linear infinite;
  will-change: transform;
}

.painel__trilha img {
  width: 100%;
  height: auto;
  border-radius: var(--raio);
}

@keyframes painel-subir {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.painel__degrade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top,    transparent 62%, var(--fundo) 100%),
    linear-gradient(to bottom, transparent 62%, var(--fundo) 100%);
}

/* ============================================================
   GLOW — usado no destaque do carrossel e atrás de "O Grande INDEX"
   Rodada 2: laranja no comando, com vermelho e violeta como apoio —
   substitui o índigo/coral da rodada 1 (print "Sugestão de cores pra
   salpicar"). Mais de um acento saturado por peça é veto do
   sistema-de-design.md — decisão consciente do Gabriel pra esta página,
   registrada no desenho.md.
   ============================================================ */

.glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  /* Raio termina bem antes da borda da caixa (32-38%, não 55-60%) — a
     margem transparente é o que o blur precisa pra dissolver em névoa,
     em vez de suavizar um retângulo pintado até quase a borda. */
  background:
    radial-gradient(circle at 34% 38%, rgba(248,90,46,0.55) 0%, transparent 34%),
    radial-gradient(circle at 66% 44%, rgba(247,54,64,0.42) 0%, transparent 36%),
    radial-gradient(circle at 50% 70%, rgba(94,23,236,0.28) 0%, transparent 38%);
}

/* ============================================================
   DOBRA 2 — faixa contínua de refs
   ============================================================ */

.dobra-2 {
  /* padding-top reduzido pelo --grid-desloca (definido no :root) — o grid
     da dobra 1 desce esse tanto (ver .painel) pra ficar centralizado no
     vão entre o aviso e "Ideias rápidas". */
  padding-top: calc(var(--sp-6) - var(--grid-desloca) + var(--dobra2-empurra) / 2);
  padding-bottom: var(--sp-6);
  text-align: center;
  overflow: hidden;
}

.dobra-2__intro { margin-bottom: var(--sp-5); }

.faixa {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Rodada 9: recalibrado do zero, medido no browser (não estimado).
     Antes, o par padding-top/padding-bottom centralizava o bloco
     "legenda + foto" entre o H2 acima e o H1 "Uma verdadeira Curadoria"
     abaixo — o padding-top era bem maior só pra sobrar espaço pra legenda
     nascer ali (bottom: calc(100% + gap), fora do fluxo, cortada pelo
     overflow:hidden se não coubesse). Agora o Gabriel pediu pra centralizar
     pela FOTO em si (a trilha, que não inclui a legenda no fluxo), com o
     vão total entre os dois textos +4% maior.
     A conta: gapAcima = margin-bottom de .dobra-2__intro (3rem) +
     padding-top; gapAbaixo = margin-top de .dobra-2__curadoria (5rem) +
     padding-bottom. Pra gapAcima = gapAbaixo (foto centralizada) com esses
     dois margins fixos (diferença de 2rem entre eles, sempre), padding-top
     tem que ficar exatamente 2rem acima de padding-bottom, em qualquer
     breakpoint — daí não precisar mais de uma variável de correção.
     A legenda continua cabendo: mesmo com menos padding-top que antes,
     sobra espaço pra ~4 linhas nos dois breakpoints (o pior caso
     documentado é 3-4). */
  padding-top: 5.53rem;
  padding-bottom: 3.53rem;
}

@media (min-width: 640px) {
  .faixa { padding-top: 6.59rem; padding-bottom: 4.59rem; }
}

.faixa__trilha {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: max-content;
  /* Sem animation CSS — o JS move a trilha por passo (translateX direto a
     cada frame), pra centralizar exatamente um item de cada vez. */
  will-change: transform;
}

.faixa__item {
  position: relative;
  flex: 0 0 auto;
  transition: transform 1100ms cubic-bezier(.22,.9,.3,1);
  /* Faixa espacial contínua: cada foto é um trapézio, com a aresta do lado
     do centro mais baixa e a de fora mais alta — e a aresta de uma batendo
     com a aresta vizinha da foto ao lado, sem degrau. Só a foto do centro
     fica flat. --escala-y e --gira são calculados por frame no JS (ver
     calcularGeometria lá), a partir da mesma curva de espessura de antes.

     A perspective() vai AQUI, dentro do transform do item, não no
     container: no container o ponto de fuga seria o centro da trilha
     inteira (~4200px de largura) e cada foto giraria em torno de um eixo
     errado. Dentro do item, cada foto gira em torno do próprio eixo. */
  transform: translate(var(--desloca-x, 0), var(--sobe, 0)) scaleY(var(--escala-y, 1))
             perspective(300px) rotateY(var(--gira, 0deg));
}

.faixa__item img {
  display: block;
  position: relative;
  z-index: 1;
  /* Rodada 9: mesma técnica da rodada 8, teto maior — +30% em cima do
     23,8rem que já tinha (23,8 × 1,3 = 30,94rem), mobile intocado (17rem,
     mesmo piso). Âncoras iguais: 17rem em 640px, teto em 1280px+ (macbook
     maximizado). A legenda e os paddings de .faixa continuam
     independentes da altura da foto — sem mudança no espaçamento delas
     por causa disso. */
  height: clamp(17rem, 3.06rem + 34.85vw, 30.94rem);
  width: auto;
  border-radius: var(--raio);
  opacity: 1;
}

.faixa__legenda {
  position: absolute;
  bottom: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  text-align: center;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--tinta);
  line-height: 1.25;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 700ms ease, filter 700ms ease;
  pointer-events: none;
}

@media (min-width: 640px) {
  .faixa__legenda { font-size: 1.1875rem; }
}

/* O deslocamento do destaque é só --sobe (escrito pelo JS quando o item
   entra no estado "parado") — a escala continua vindo de --away, calculada
   por frame conforme a distância ao centro da faixa. */
.faixa__item--destaque .faixa__legenda { opacity: 1; filter: blur(0); }

.dobra-2__curadoria { margin-top: var(--sp-6); }

.dobra-2__navegue {
  font-weight: 400;
  text-align: center;
  color: var(--tinta-suave);
  margin: 2.2rem 0 var(--sp-5);
}

/* "Curadoria" em grupos de 2-3 letras — contraste conferido contra o fundo
   claro (índigo, violeta e vermelho já cumprem 4,5:1; o laranja precisou
   escurecer pra --laranja-texto pra não ficar abaixo do mínimo). */
.curadoria-1 { color: var(--indigo); }
.curadoria-2 { color: var(--violeta); }
.curadoria-3 { color: var(--vermelho); }
.curadoria-4 { color: var(--laranja-texto); }


/* ============================================================
   "Navegue por" — lista vertical de eixos, dentro da dobra 2
   (a dobra 3 original, com foto trocando categoria, foi removida)
   ============================================================ */

.eixos {
  max-width: 34rem;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  text-align: center;
}

.eixo strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.eixo span {
  display: block;
  color: var(--tinta-corpo);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Rodada 3: todos os rótulos na mesma cor (era uma cor por eixo). */
.eixo strong { color: var(--violeta); }

/* ============================================================
   CTA FINAL
   ============================================================ */

.cta-final {
  position: relative;
  padding: var(--sp-6) 0 var(--sp-5);
  text-align: center;
  /* Sem overflow:hidden — o glow, maior que a seção, pode extravasar pra
     dobra-2 e rodapé sem custura visível (mesmo fundo em toda a página).
     Antes o corte reto do overflow:hidden era a "linha dura" do print. */
}

.cta-final .glow {
  left: 50%;
  top: var(--cta-glow-topo);
  width: 44rem;
  height: 28rem;
  margin-left: -22rem;
  margin-top: -14rem;
  filter: blur(90px);
  /* quente e fraquinho — o fundo continua claro por cima (0.4 é o teto,
     não o repouso: repousa em 0 e sobe quando o TÍTULO cruza uma altura
     específica da tela, ver .glow--visivel abaixo) */
  opacity: 0;
  /* Rodada 10: o gatilho deixou de ser um delay de tempo fixo e virou uma
     posição de scroll — o JS observa o título "O Grande INDEX" (rodada 11;
     era o próprio glow, mas a caixa do glow é bem maior que o título e
     disparava cedo demais) com rootMargin calibrado pra disparar só quando
     ele cruza 70% da tela (desktop) ou 50% (mobile), e adiciona
     .glow--visivel nesse instante. Rodada 11: 1400ms, ease-in-out (era
     600ms, ease). 2026-08-27: encurtado pra 800ms, mantendo ease-in-out —
     a suavidade fica no formato da curva, não na duração. */
  transition: opacity 800ms ease-in-out;
  /* Máscara radial própria: dissolve o glow nos 4 lados por construção,
     em vez de depender de recorte do container (era a origem da caixa
     dura no CTA anterior). */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%);
}

.cta-final .glow.glow--visivel { opacity: 0.4; }

.cta-final__conteudo { position: relative; z-index: 1; }

.cta-final h2,
.cta-final .aviso {
  color: var(--tinta-cta);
}

.cta-final .form-captura {
  margin-top: var(--sp-4);
}

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

.rodape {
  padding: var(--sp-5) 1.5rem 8rem;
  text-align: center;
}

.rodape small {
  display: block;
  color: var(--tinta-suave);
  font-size: 0.8125rem;
}

/* Banner de cookies (informativo) ---------------------------------------
   Rodada 7: base = mobile (topo, texto+botão numa linha só, mais discreto);
   @media (min-width:640px) abaixo restaura o visual anterior (embaixo,
   tamanho maior) só a partir do desktop/tablet. */

.banner-cookies {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  top: 0.75rem;
  bottom: auto;
  z-index: 50;
  max-width: 34rem;
  margin: 0 auto;
  background: var(--tinta);
  color: var(--fundo);
  border-radius: var(--raio);
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  transform: translateY(-1rem);
  opacity: 0;
  pointer-events: none;
  transition: transform 300ms ease, opacity 300ms ease;
}

.banner-cookies--visivel {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.banner-cookies p {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.25;
  text-align: left;
  flex: 1 1 auto;
}

.banner-cookies__acoes {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.banner-cookies button {
  border: 0;
  border-radius: var(--raio);
  padding: 0.4rem 0.65rem;
  font-family: var(--fonte);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.banner-cookies__entendi {
  background: var(--indigo);
  color: #fff;
}

@media (min-width: 640px) {
  .banner-cookies {
    top: auto;
    bottom: var(--sp-3);
    left: 1rem;
    right: 1rem;
    padding: var(--sp-2) var(--sp-3);
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    transform: translateY(1.5rem);
  }
  .banner-cookies p { font-size: 0.8125rem; line-height: 1.5; }
  .banner-cookies button { padding: 0.5rem 0.9rem; font-size: 0.8125rem; }
}

/* Acessibilidade --------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .painel__trilha,
  .faixa__trilha {
    animation: none !important;
  }
  .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cta-final .glow {
    opacity: 0.4;
    transition: none;
  }
}