/* ===========================================================================
   André Silva Teclas — base compartilhada (home + páginas de curso)

   Reconstrução 19/09/2026 no modelo de referência definido em
   identidade/design-guide.md ("Site de cliente: os dois pilares"):
   imagem impactante carrega o site, e animação vale pela fluidez, não pela
   complexidade.

   SISTEMA DE MOVIMENTO — as três regras que fazem parecer caro:
   1. Curva com saída longa (--saida). Entra rápido, desacelera devagar.
      É o que separa "animação de site" de "animação de template".
   2. Duração alta (700-900ms) e escalonamento entre irmãos (--i * 90ms).
      Tudo entrando junto parece barato, mesmo com a curva certa.
   3. Só transform e opacity. Qualquer outra propriedade força o navegador
      a recalcular layout a cada quadro, e é daí que vem o engasgo no
      celular intermediário.

   Paleta vintage quente: vinho, laranja queimado, âmbar e creme.
   =========================================================================== */

:root {
  /* ---- cor ---- */
  --vinho: #7a1f2b;
  --vinho-claro: #a52f33;
  --laranja: #c0562a;
  --ambar: #e0a144;
  --dourado: #ffc46b;
  --roxo: #a855f7;
  --whats: #25D366;

  --fundo: #120c0b;          /* escuro base */
  --fundo-2: #1a110f;        /* escuro alternado */
  --carta: #201513;
  --borda: #34211d;
  --texto: #f7ece0;
  --texto-fraco: #c2ab99;

  /* superfície clara: é o que dá o ar editorial da referência.
     Site só escuro fica pesado; a alternância creme/escuro é metade do efeito. */
  --creme: #efe7dc;
  --creme-2: #e5dacb;
  --creme-borda: #d6c7b4;
  --tinta: #24150f;          /* texto sobre creme */
  --tinta-fraca: #6b5647;

  /* ---- movimento ---- */
  --saida: cubic-bezier(0.16, 1, 0.3, 1);
  --saida-curta: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 820ms;
  --dur-curta: 420ms;
  --passo: 90ms;             /* atraso entre elementos irmãos */

  /* ---- medida ---- */
  --nav-altura: 72px;
  --raio: 20px;
  --limite: 1180px;
}

/* ---------------------------------------------------------------- reset --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { scroll-behavior: smooth; }


body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas, svg { max-width: 100%; display: block; }
section { position: relative; }
a { color: inherit; }
::selection { background: var(--ambar); color: #1a0f08; }

/* #palco: invólucro de TODO o conteúdo da página. Nada position:fixed pode
   morar aqui dentro: nav, botão flutuante e canvas do cursor ficam fora.
   Nada o transforma desde 19/09/2026, quando o scroll por interpolação saiu.
   Por isso ele NÃO leva will-change: criar camada de composição pra página
   inteira sem necessidade custa memória e não devolve nada. */

/* ------------------------------------------------------------ tipografia --- */
/* Duas famílias em contraste, como nos modelos de referência:
   serifa display pro momento nobre, sans geométrica pro resto. */
.display {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; }

.titulo-secao {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin-bottom: 1.1rem;
}
.titulo-secao .destaque { font-style: italic; color: var(--dourado); }
.faixa-creme .titulo-secao .destaque { color: var(--laranja); }

.kicker {
  text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 700;
  color: var(--ambar); display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem; font-family: "Inter Tight", system-ui, sans-serif;
}
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.faixa-creme .kicker { color: var(--laranja); }

.texto { color: var(--texto-fraco); line-height: 1.75; font-size: 1.03rem; margin: 0; }
.faixa-creme .texto { color: var(--tinta-fraca); }
.centro { text-align: center; }
.centro .kicker { justify-content: center; }

/* ---------------------------------------------------------------- layout --- */
.secao { padding: clamp(4.5rem, 10vw, 8.5rem) 1.5rem; scroll-margin-top: var(--nav-altura); }
.limite { max-width: var(--limite); margin: 0 auto; }
.faixa-escura { background: var(--fundo-2); }
.faixa-creme { background: var(--creme); color: var(--tinta); }
.faixa-creme h1, .faixa-creme h2, .faixa-creme h3 { color: var(--tinta); }

/* ------------------------------------------------------------- movimento --- */
/* .revela é o único jeito de um bloco entrar na tela. O atraso vem do --i
   inline, que é o índice do elemento dentro do grupo. */
.revela {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity var(--dur) var(--saida),
    transform var(--dur) var(--saida);
  transition-delay: calc(var(--i, 0) * var(--passo));
}
.revela.visivel { opacity: 1; transform: translate3d(0, 0, 0); }

/* imagem que cresce ao entrar: o corte fica no pai, a escala no filho,
   pra continuar sendo só transform */
.moldura { overflow: hidden; border-radius: var(--raio); position: relative; }
.moldura > img, .moldura > video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.16);
  transition: transform 1.5s var(--saida);
  transition-delay: calc(var(--i, 0) * var(--passo));
}
.moldura.visivel > img, .moldura.visivel > video { transform: scale(1); }

/* ---------------------------------------------------------------- botões --- */
/* Padrão validado em vídeo (13/09/2026): brilho diagonal atravessa uma vez
   no hover e some. Sem rotação, sem animação contínua em repouso. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: linear-gradient(135deg, var(--laranja), var(--ambar));
  color: #24120a; padding: 1rem 1.9rem; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: .95rem; border: none;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 30px rgba(192, 86, 42, .32);
  transition: transform var(--dur-curta) var(--saida), box-shadow var(--dur-curta) var(--saida), filter .2s ease;
}
.btn:hover, .btn:focus-visible {
  transform: translate3d(0, -3px, 0); filter: brightness(1.05);
  box-shadow: 0 18px 40px rgba(224, 161, 68, .42);
}
.btn::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 1;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .7s var(--saida); pointer-events: none;
}
.btn:hover::before, .btn:focus-visible::before { left: 130%; }

.btn--whats { background: var(--whats); color: #062c14; box-shadow: 0 10px 30px rgba(37,211,102,.3); }
.btn--whats:hover { box-shadow: 0 18px 40px rgba(37,211,102,.42); }
.btn--vazado {
  background: transparent; color: var(--texto);
  border: 1px solid rgba(247,236,224,.3); box-shadow: none;
}
.btn--vazado:hover { background: rgba(247,236,224,.09); box-shadow: none; }
.faixa-creme .btn--vazado { color: var(--tinta); border-color: rgba(36,21,15,.25); }
.faixa-creme .btn--vazado:hover { background: rgba(36,21,15,.06); }
.btn--pequeno { padding: .65rem 1.2rem; font-size: .84rem; }
.btn--largo { width: 100%; }

/* link com sublinhado que corre, no lugar de botão quando o peso não cabe */
.link-seta {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-weight: 600; font-size: .9rem; letter-spacing: .02em; text-transform: uppercase;
  color: inherit; padding-bottom: .3rem; position: relative;
}
.link-seta::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform .5s var(--saida);
}
.link-seta:hover::after { transform: scaleX(0); }
.link-seta span { transition: transform .5s var(--saida); }
.link-seta:hover span { transform: translate3d(5px, 0, 0); }

/* ------------------------------------------------------------------- nav --- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--nav-altura);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.1rem, 4vw, 3rem);
  background: transparent;
  transition: background var(--dur-curta) ease, border-color var(--dur-curta) ease, backdrop-filter var(--dur-curta) ease;
  border-bottom: 1px solid transparent;
}
/* No topo o nav flutua sobre o hero, que é CLARO: aqui o texto precisa ser
   escuro. Assim que rola, o vidro escuro entra e o texto vira claro.
   A home marca .nav--claro; as páginas internas nascem com fundo escuro e
   não precisam disso. */
.nav--claro .nav__logo { color: #2b1008; }
.nav--claro .nav__logo span { color: #9c3520; }
.nav--claro .nav__links a { color: rgba(43,16,8,.72); }
.nav--claro .nav__links a:hover { color: #2b1008; }
.nav--claro .nav__links a::after { background: #9c3520; }

.nav--rolado {
  background: rgba(18,12,11,.9); backdrop-filter: blur(14px);
  border-bottom-color: var(--borda);
}
.nav--rolado.nav--claro .nav__logo { color: var(--texto); }
.nav--rolado.nav--claro .nav__logo span { color: var(--dourado); }
.nav--rolado.nav--claro .nav__links a { color: rgba(247,236,224,.72); }
.nav--rolado.nav--claro .nav__links a:hover { color: var(--texto); }
.nav--rolado.nav--claro .nav__links a::after { background: var(--dourado); }

.nav__logo {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: 1.35rem; text-decoration: none; letter-spacing: -0.01em; line-height: 1;
  color: var(--texto); transition: color var(--dur-curta) ease;
}
.nav__logo span { font-style: italic; color: var(--dourado); transition: color var(--dur-curta) ease; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  text-decoration: none; color: rgba(247,236,224,.72); font-size: .86rem; font-weight: 500;
  position: relative; padding: .25rem 0; transition: color var(--dur-curta) ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--dourado); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--saida);
}
.nav__links a:hover { color: var(--texto); }
.nav__links a:hover::after { transform: scaleX(1); }
@media (max-width: 900px) { .nav__links { display: none; } }

/* --------------------------------------------------------------- rodapé --- */
/* Refeito em 07/10/2026: era só a marca apagada e três botões ("ficou
   muito simples"). Agora abre com uma fileira de teclas, tem colunas de
   cursos e navegação, contato com WhatsApp, e fecha com a marca gigante
   sangrando no pé, como no hero. Igual nas 7 páginas. */
.rodape {
  position: relative; overflow: hidden; color: var(--texto-fraco); font-size: .9rem;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(240,138,60,.12), transparent 70%),
    var(--fundo);
}
/* fileira de teclas: brancas em degradê repetido, pretas desenhadas na
   posição certa de uma oitava (7 brancas = 196px; pretas depois da 1ª,
   2ª, 4ª, 5ª e 6ª branca) */
.rodape__teclas {
  height: 30px; opacity: .92;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 20px, #120c0b 20px 36px, transparent 36px 48px, #120c0b 48px 64px,
      transparent 64px 104px, #120c0b 104px 120px, transparent 120px 132px, #120c0b 132px 148px,
      transparent 148px 160px, #120c0b 160px 176px, transparent 176px 196px) 0 0 / 100% 62% no-repeat,
    repeating-linear-gradient(90deg, #efe4d4 0 26px, #b9a690 26px 28px) 0 0 / 100% 100%;
  box-shadow: inset 0 -8px 12px rgba(0,0,0,.25), 0 1px 0 rgba(240,138,60,.5), 0 8px 30px rgba(240,138,60,.12);
}

.rodape__grade {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem 2rem;
  padding: clamp(3.5rem, 7vw, 5rem) 1.5rem 2rem;
}
.rodape__logo {
  font-family: "Instrument Serif", Georgia, serif; font-size: 1.9rem; line-height: 1;
  color: var(--texto); text-decoration: none; letter-spacing: -0.01em;
}
.rodape__logo span { font-style: italic; color: var(--dourado); }
.rodape__sobre p { margin: 1rem 0 1.4rem; line-height: 1.7; max-width: 34ch; }
.rodape__sociais { display: flex; gap: .55rem; }
/* cada rede na cor oficial dela, ícone branco por cima (pedido do usuário,
   07/10/2026). O seletor é pelo aria-label pra não precisar de classe nova
   nas 7 páginas. No hover, sobe e acende um brilho da mesma cor. */
.rodape__sociais a {
  --brilho: rgba(255,255,255,.25);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; border: 0;
  transition: transform var(--dur-curta) var(--saida), box-shadow var(--dur-curta) ease, filter var(--dur-curta) ease;
}
.rodape__sociais a[aria-label="Instagram"] {
  --brilho: rgba(214,36,159,.55);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.rodape__sociais a[aria-label="YouTube"] { --brilho: rgba(255,0,0,.5); background: #ff0000; }
.rodape__sociais a[aria-label="WhatsApp"] { --brilho: rgba(37,211,102,.5); background: #25d366; }
.rodape__sociais a:hover { transform: translate3d(0,-3px,0); filter: brightness(1.08); box-shadow: 0 10px 24px var(--brilho); }
.rodape__sociais svg { width: 19px; height: 19px; fill: currentColor; }

.rodape__titulo {
  margin: .2rem 0 1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar);
}
.rodape__col { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.rodape__col a:not(.btn) {
  color: var(--texto-fraco); text-decoration: none; position: relative;
  transition: color var(--dur-curta) ease, transform var(--dur-curta) var(--saida);
}
.rodape__col a:not(.btn):hover { color: var(--texto); transform: translate3d(4px,0,0); }
.rodape__contato p { margin: 0 0 .5rem; line-height: 1.65; max-width: 30ch; }
.rodape__grupo { display: inline-flex; gap: .4rem; margin-top: .9rem; font-size: .86rem; font-weight: 600; color: var(--texto-fraco); text-decoration: none; }
.rodape__grupo:hover { color: var(--whats); }
.rodape__contato .btn { display: flex; width: max-content; }

/* marca gigante sangrando no pé, apagando pra baixo */
.rodape__gigante {
  font-family: "Instrument Serif", Georgia, serif; font-size: clamp(3.2rem, 12.6vw, 13.5rem);
  line-height: .8; letter-spacing: -0.02em; white-space: nowrap; text-align: center;
  margin: .5rem 0 -.08em; pointer-events: none; user-select: none;
  background: linear-gradient(180deg, rgba(247,236,224,.16), rgba(247,236,224,0) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rodape__base {
  position: relative; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.3rem 1.5rem 1.6rem; border-top: 1px solid var(--borda); font-size: .8rem;
}
.rodape__base a { color: var(--texto-fraco); text-decoration: none; }
.rodape__base a:hover { color: var(--dourado); }
/* botão discreto pro André entrar no painel (métricas, blog, vídeos) */
.rodape__links { display: inline-flex; align-items: center; gap: .6rem 1.4rem; flex-wrap: wrap; justify-content: center; }
.rodape__painel {
  display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .85rem;
  border: 1px solid var(--borda); border-radius: 999px;
  transition: border-color var(--dur-curta) ease, color var(--dur-curta) ease;
}
.rodape__base a.rodape__painel:hover { border-color: rgba(255,196,107,.45); }

@media (max-width: 960px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__sobre, .rodape__contato { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .rodape__base { justify-content: center; text-align: center; }
  /* o botão flutuante do WhatsApp fica no canto: sobra espaço pra ele */
  .rodape__base { padding-bottom: 5.5rem; }
}

/* --------------------------------------------------- whatsapp flutuante --- */
.whats-flutuante {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 45;
  width: 56px; height: 56px; border-radius: 50%; background: var(--whats);
  display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 12px 28px rgba(37,211,102,.42);
  transition: transform var(--dur-curta) var(--saida);
}
.whats-flutuante:hover { transform: scale(1.09); }

/* ------------------------------------------------- notas flutuantes (FAQ) --- */
.notas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.nota {
  position: absolute; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 14px; font-size: 1.15rem;
  background: rgba(192,86,42,.1); border: 1px solid rgba(192,86,42,.22);
  color: var(--laranja); opacity: .55;
  animation: nota-flutua 9s ease-in-out infinite;
}
/* Em tela estreita não existe margem lateral sobrando: a nota cairia em
   cima do card. Melhor sumir do que atrapalhar. */
@media (max-width: 1100px) { .notas { display: none; } }
@keyframes nota-flutua {
  0%, 100% { transform: translate3d(0,0,0) rotate(-4deg); }
  50%      { transform: translate3d(0,-16px,0) rotate(4deg); }
}

/* ------------------------------------------------------ cursor e rastro --- */
body.cursor-proprio, body.cursor-proprio a, body.cursor-proprio button { cursor: crosshair; }
#rastro { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }

/* --------------------------------------------------- acessibilidade base --- */
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

/* Quem pediu menos movimento recebe o site inteiro, parado e legível.
   Nada aqui pode depender de animação pra aparecer. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  .moldura > img, .moldura > video { transform: none; transition: none; }
  .nota { animation: none; }
  #rastro { display: none; }
  body.cursor-proprio, body.cursor-proprio a { cursor: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}