/* ============================================================
   FX STUDIOS | Sistema de design
   Preto #0E0D0B + Dourado #C9A24B / #E6CC85
   Marca do Felipe Xavier. Nunca vinho (vinho e da Azenate).
   ============================================================ */

:root{
  /* superficies */
  --preto:        #0E0D0B;
  --preto-2:      #141210;
  --preto-3:      #1A1714;
  --preto-4:      #232019;
  --linha:        rgba(201,162,75,.26);
  --linha-forte:  rgba(201,162,75,.46);

  /* dourado */
  --ouro:         #C9A24B;
  --ouro-claro:   #E6CC85;
  --ouro-fundo:   rgba(201,162,75,.09);

  /* texto */
  --papel:        #F7F4EE;
  --texto:        #EDE7DC;
  --texto-2:      #B7AE9E;
  /* Subiu de #857D70 para #9A9184. O antigo dava 4,78:1 contra o preto puro,
     mas ele e usado em texto de 10,5 a 13px sobre paineis que LEVANTAM o
     fundo, e ali caia para 4,38:1, abaixo do AA. Agora fica em 5,7:1 no pior
     caso e continua sendo claramente o terceiro degrau. */
  --texto-3:      #9A9184;

  /* sinal */
  --verde:        #4E9E6A;
  --vermelho:     #B5544A;

  /* medidas */
  --max:          1160px;
  --max-texto:    720px;
  --raio:         14px;
  --raio-s:       9px;

  /* tipografia */
  --display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- empilhamento ----------
     Escala nomeada. Antes os valores viviam soltos no vendas.css e nada
     dizia por que 50 e menor que 60. */
  --z-fundo:   -1;   /* atmosfera fixa atras de tudo */
  --z-grao:     1;   /* grao por cima do conteudo, sem capturar clique */
  --z-topo:    50;   /* cabecalho pegajoso */
  --z-barra:   60;   /* barra fixa de compra no celular */
  --z-pular:  999;   /* link de pular para o conteudo */

  /* ---------- movimento ----------
     Curvas exponenciais de saida. Nada de bounce nem elastico. */
  --saida:       cubic-bezier(.22,.8,.24,1);
  --saida-longa: cubic-bezier(.16,1,.3,1);

  /* ---------- relevo ----------
     Toda superficie desta pagina e preta sobre preta. Sem uma luz na borda
     de cima e uma sombra na de baixo, painel nenhum tem espessura: vira
     retangulo desenhado. Estas tres variaveis sao a espessura. */
  --luz-borda:      inset 0 1px 0 rgba(230,204,133,.07);
  --luz-borda-alta: inset 0 1px 0 rgba(230,204,133,.13), inset 0 -1px 0 rgba(0,0,0,.45);
  --sombra-painel:  0 26px 64px -38px rgba(0,0,0,.92);
}

*,*::before,*::after{ box-sizing:border-box; }
/* O atributo hidden precisa vencer qualquer display vindo de classe.
   A regra do navegador para [hidden] tem especificidade de atributo, entao
   um `.classe{display:grid}` a derruba em silencio e o bloco escondido vai
   ao ar. Foi o que aconteceu com a ficha da mentoria: quatro campos
   "A DEFINIR" apareceram na pagina publicada. */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* O topo e sticky com 66px. Sem isto, toda ancora do menu para embaixo dele. */
  scroll-padding-top:82px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--preto);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- atmosfera ----------
   O preto chapado da pagina inteira era o que fazia ela parecer sem graca:
   1160px de conteudo no meio de um vazio sem profundidade nenhuma. Esta
   camada fixa poe um claro no alto, um claro no rodape e um escurecimento
   nas duas pontas, entao o fundo passa a ter um "em cima" e um "embaixo".
   z-index -1 mantem ela atras de todo conteudo, positioned ou nao. */
body::before{
  content:""; position:fixed; inset:0; z-index:var(--z-fundo); pointer-events:none;
  background:
    radial-gradient(128% 62% at 50% -12%, rgba(201,162,75,.075), transparent 62%),
    radial-gradient(96% 52% at 50% 112%, rgba(201,162,75,.05), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,.42), transparent 20%, transparent 80%, rgba(0,0,0,.5));
}

img,svg,video{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0 0 .5em;
  color:var(--papel);
  /* Serif de display em 3 linhas quase sempre deixa a ultima com uma palavra
     so. balance reparte as linhas antes de quebrar. */
  text-wrap:balance;
}
p{ margin:0 0 1.15em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; color:var(--papel); }

::selection{ background:var(--ouro); color:var(--preto); }

:focus-visible{
  outline:2px solid var(--ouro-claro);
  outline-offset:3px;
  border-radius:4px;
}

.pular-para-conteudo{
  position:absolute; left:-9999px; top:0; z-index:var(--z-pular);
  background:var(--ouro); color:var(--preto);
  padding:12px 20px; font-weight:600; border-radius:0 0 8px 0;
}
.pular-para-conteudo:focus{ left:0; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }
.wrap--estreito{ max-width:840px; }
.secao{ padding:clamp(64px,10vw,120px) 0; position:relative; }
.texto{ max-width:var(--max-texto); }

/* Divisoria de secao.
   Era uma linha dourada de ponta a ponta, identica em 11 secoes seguidas:
   de longe a pagina virava uma pilha de retangulos do mesmo tamanho. Agora
   e um filete que nasce e morre no vazio, entao ele separa sem carimbar. */
.secao--borda::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(201,162,75,.30) 16%, rgba(201,162,75,.30) 84%, transparent);
}
/* Um ponto de luz no centro da divisoria, do tamanho de um grao de arroz.
   E o unico enfeite repetido da pagina, e ele existe para dar um centro
   optico a linha, que senao flutua. */
.secao--borda::after{
  content:""; position:absolute; top:-1px; left:50%; width:88px; height:3px;
  transform:translateX(-50%);
  background:radial-gradient(50% 100% at 50% 50%, rgba(230,204,133,.5), transparent 70%);
  pointer-events:none;
}

/* Ritmo. Nem toda secao merece a mesma altura de respiro: as de leitura
   longa apertam, as de virada abrem. */
.secao--folgada{ padding:clamp(84px,13vw,156px) 0; }
.secao--justa{ padding:clamp(52px,7vw,86px) 0; }

/* ---------- marca ----------
   Mora aqui, e nao no css da pagina de vendas, porque TODA pagina usa:
   vendas, entrar, portal, obrigado, termos e 404. Deixar isto no vendas.css
   fazia a sigla virar texto solto em tudo que nao fosse a home. */
.marca{ display:inline-flex; align-items:center; gap:11px; flex:none; min-height:44px; }
.marca .sigla{
  width:34px; height:34px; border-radius:8px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(160deg,var(--ouro-claro),var(--ouro) 65%);
  color:#1A1408; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:-.03em;
}
/* O monograma de verdade dentro do selo. Ele e mais largo que alto
   (518x400), entao a largura manda e a altura acompanha: fixar as duas
   deformaria a marca. */
.marca .sigla img{ width:20px; height:auto; display:block; }

.marca .nome{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texto-2);
}

/* ---------- rotulos ---------- */
.rotulo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:500; color:var(--ouro);
  margin:0 0 22px;
}
.rotulo::before{
  content:""; width:26px; height:1px; background:var(--ouro); opacity:.6; flex:none;
}
.rotulo--sozinho::before{ display:none; }

.olho{ color:var(--ouro); }
.ouro{ color:var(--ouro-claro); }
.apagado{ color:var(--texto-2); }

/* ---------- titulos de secao ---------- */
.titulo-secao{
  font-size:clamp(31px,5.6vw,55px);
  max-width:17ch;
  margin-bottom:.42em;
  letter-spacing:-.022em;
}
.titulo-secao--largo{ max-width:24ch; }
.lead{
  font-size:clamp(17px,2.3vw,20px);
  color:var(--texto-2);
  max-width:60ch;
  line-height:1.6;
  text-wrap:pretty;
}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--sans);
  font-weight:600; font-size:15.5px; letter-spacing:-.005em;
  padding:17px 30px;
  border-radius:var(--raio-s);
  border:1px solid transparent;
  cursor:pointer;
  text-align:center; line-height:1.3;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
  /* will-change permanente promove camada em todo botao da pagina, cerca de 20,
     e segura memoria de GPU o tempo todo por uma transicao de 120ms. O ganho e
     nulo e o custo e continuo. */
}
/* O dourado era um gradiente liso de duas paradas: em tela grande lia como
   plastico. Agora tem uma quina de luz no alto, um escurecimento na base e
   um brilho que atravessa no hover, que e o que metal faz quando a luz anda
   por cima dele. */
.btn--ouro{
  background:
    linear-gradient(175deg,#F0DCA8,var(--ouro-claro) 26%,var(--ouro) 66%,#B08B39 100%);
  color:#1A1408;
  box-shadow:
    0 1px 0 rgba(255,255,255,.32) inset,
    0 -1px 0 rgba(90,64,14,.35) inset,
    0 10px 30px -10px rgba(201,162,75,.5);
  position:relative; overflow:hidden; isolation:isolate;
}
.btn--ouro::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.42) 50%, transparent 66%);
  transform:translateX(-115%);
  transition:transform .62s var(--saida-longa);
}
.btn--ouro:hover::after,.btn--ouro:focus-visible::after{ transform:translateX(115%); }
.btn--ouro:hover,.btn--ouro:focus-visible{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.42) inset,
    0 -1px 0 rgba(90,64,14,.35) inset,
    0 16px 40px -12px rgba(201,162,75,.66);
}
.btn--ouro:active{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .btn--ouro::after{ display:none; }
}

.btn--linha{
  background:transparent; color:var(--papel);
  border-color:var(--linha-forte);
}
.btn--linha:hover,.btn--linha:focus-visible{
  border-color:var(--ouro); color:var(--ouro-claro); background:var(--ouro-fundo);
}

.btn--fantasma{
  background:transparent; color:var(--texto-2); padding:12px 18px;
}
.btn--fantasma:hover{ color:var(--papel); }

.btn--largo{ width:100%; }
.btn--grande{ padding:20px 38px; font-size:16.5px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

.btn .seta{ transition:transform .16s ease; }
.btn:hover .seta{ transform:translateX(3px); }

/* ---------- cartoes ---------- */
.cartao{
  background:linear-gradient(168deg,var(--preto-3),var(--preto-2));
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:28px 26px;
  position:relative;
  box-shadow:var(--luz-borda), var(--sombra-painel);
}
.cartao--realce{ border-color:var(--linha-forte); }

/* ---------- texturas reutilizaveis ----------
   Textura de verdade e material, nao ruido jogado por cima. Sao tres, e cada
   uma resolve um problema diferente do preto chapado. */

/* 1. Trama. Fio diagonal de 1px a cada 5px. De perto e tecido, de longe some.
   Serve em painel grande, que e onde o vazio aparece. */
.tem-trama{ position:relative; }
.tem-trama::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; opacity:.6;
  background-image:repeating-linear-gradient(128deg,
    rgba(247,244,238,.016) 0 1px, transparent 1px 5px);
}

/* 2. Filete de luz no alto do painel, como se a borda pegasse o claro da
   secao. Ja existia solto em .sins__caixa e .oferta__caixa; agora tem nome. */
.tem-filete{ position:relative; }
.tem-filete::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent); opacity:.5;
}

.grade{ display:grid; gap:18px; }
@media (min-width:720px){
  .grade--2{ grid-template-columns:repeat(2,1fr); }
  .grade--3{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:980px){
  .grade--4{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- utilidades ---------- */
.mono{ font-family:var(--mono); font-size:.9em; letter-spacing:-.01em; }
.centro{ text-align:center; margin-left:auto; margin-right:auto; }
.nowrap{ white-space:nowrap; }
.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- grao ----------
   Duas camadas em vez de uma. A fina (frequencia alta, ladrilho de 180px) da
   a granulacao de filme; a grossa, quase invisivel, quebra o padrao do
   ladrilho, que em tela grande aparecia como quadriculado repetido.
   stitchTiles='stitch' costura as bordas do ladrilho: sem isso, cada emenda
   de 180px vira uma linha visivel no preto. */
/* ORDEM IMPORTA: em CSS, a primeira imagem da lista fica POR CIMA. A camada
   grossa vem primeiro justamente porque ela e semitransparente (opacity .5 no
   proprio SVG) e modula a fina. Invertido, a fina, que e opaca, cobria a
   grossa inteira e a segunda camada nao existia na pratica.
   opacity .042: acima disso o ruido cinza levanta o preto da pagina de 14
   para mais de 20 e a marca perde o quase-preto. */
.grao{
  position:fixed; inset:0; pointer-events:none; z-index:var(--z-grao); opacity:.042;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23m)' opacity='.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:420px 420px, 180px 180px;
}

/* ---------- animacao de entrada ---------- */
/* A classe .js entra no <html> antes de qualquer pintura, por script inline no
   head. Sem ela, o CSS nao esconde nada e quem tem JS desligado ve tudo.
   O vendas.js poe .aparece em TODO filho direto de .wrap, o que daria a mesma
   entrada identica umas 90 vezes. As regras abaixo diferenciam por papel:
   titulo entra de outro jeito que paragrafo, e lista entra item a item. */
.js .aparece{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--saida-longa), transform .6s var(--saida-longa);
}
.js .aparece.visivel{ opacity:1; transform:none; }

/* Titulo: sobe de mais longe e chega em foco. O desfoque saindo le como o
   texto assentando, e nao como mais um bloco deslizando. */
.js h1.aparece,
.js .titulo-secao.aparece{
  transform:translateY(22px); filter:blur(9px);
  transition:opacity .85s var(--saida-longa), transform .85s var(--saida-longa), filter .85s var(--saida-longa);
}
.js h1.aparece.visivel,
.js .titulo-secao.aparece.visivel{ filter:blur(0); }

/* Escada dentro de uma lista so. Isto e legitimo; o que nao e legitimo e a
   mesma entrada em toda secao da pagina.
   Usa `animation`, e nao `transition`, DE PROPOSITO: a regra tem
   especificidade maior que a do componente, entao um `transition` aqui
   apagaria o `transition` de hover que a celula ja declara (fundo da .dor,
   halo da .prova, linha da .entrega) e os hovers passariam a trocar de
   estado seco. Animacao e transicao convivem no mesmo elemento. */
/* O bloco que tem escada nao se move: quem se move sao os itens dentro dele.
   Sem isto, o painel sobe 14px enquanto cada celula sobe outros 13px, e o
   olho le duas entradas empilhadas em cima da mesma coisa. */
.js .escada.aparece{ transform:none; }
.js .escada.aparece > *{ opacity:0; }
.js .escada.aparece.visivel > *{ animation:escada-sobe .55s var(--saida-longa) both; }
.js .escada.aparece.visivel > *:nth-child(2){ animation-delay:.07s; }
.js .escada.aparece.visivel > *:nth-child(3){ animation-delay:.14s; }
.js .escada.aparece.visivel > *:nth-child(4){ animation-delay:.21s; }
.js .escada.aparece.visivel > *:nth-child(5){ animation-delay:.28s; }
.js .escada.aparece.visivel > *:nth-child(6){ animation-delay:.35s; }
.js .escada.aparece.visivel > *:nth-child(7){ animation-delay:.42s; }
.js .escada.aparece.visivel > *:nth-child(8){ animation-delay:.49s; }
.js .escada.aparece.visivel > *:nth-child(9){ animation-delay:.56s; }
.js .escada.aparece.visivel > *:nth-child(n+10){ animation-delay:.63s; }
@keyframes escada-sobe{
  from{ opacity:0; transform:translateY(13px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .js .aparece,
  .js h1.aparece,
  .js .titulo-secao.aparece{
    opacity:1; transform:none; filter:none; transition:none;
  }
  .js .escada.aparece > *{ opacity:1; }
  .js .escada.aparece.visivel > *{ animation:none; }
}