/* ======================================================================
   Camada premium: acabamento sobre estilo.css e ferramentas.css.
   Mantém as cores dos temas; muda tipografia, superfícies e detalhes.
   ====================================================================== */

:root {
  --t-xl: clamp(2.5rem, 1.2rem + 4vw, 4.75rem);
  --raio: 28px;
  --vidro: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  --luz-borda: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, .02) 62%, color-mix(in srgb, var(--sinal) 45%, transparent));
  --sombra-funda: 0 50px 100px -50px rgba(0, 0, 0, .9);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- Grão de filme sobre a página ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Tipografia: mais leve, mais larga, mais calma ---------- */
.hero-titulo {
  font-weight: 400;
  font-variation-settings: "opsz" 96, "wdth" 96;
  letter-spacing: -.03em;
  line-height: .96;
}
.titulo, .final-titulo {
  font-weight: 400;
  font-variation-settings: "opsz" 96, "wdth" 100;
  letter-spacing: -.028em;
  line-height: 1;
}
.funil-faixa h3, .dif-lista h3, .relatorio-titulo, .quiz-pergunta, .faq summary,
.ficha-principal strong, .vaz-resumo strong, .numeros-lista dd, .extrato-etapas strong,
.diario-coluna p, .sobre blockquote p, .plano-titulo, .saz-pico strong, .ferramentas-titulo {
  font-weight: 400;
  letter-spacing: -.018em;
}
.numeros-lista dd { font-weight: 300; font-size: clamp(2.4rem, 1rem + 2.4vw, 3.5rem); letter-spacing: -.035em; }
.extrato-etapas strong { font-weight: 300; letter-spacing: -.02em; }
.funil-num { font-weight: 300; }
.quiz-nota { font-weight: 300; letter-spacing: -.035em; }
.sobre blockquote p { font-weight: 300; letter-spacing: -.025em; }
.secao-intro, .hero-sub { letter-spacing: -.005em; }
.hero-sub { color: color-mix(in srgb, var(--texto) 62%, transparent); }

/* ---------- Ritmo: mais respiro entre seções ---------- */
.secao { padding-top: clamp(120px, 14vw, 200px); }
.secao-cabeca { margin-bottom: clamp(48px, 7vw, 88px); }

/* ---------- Topo: cápsula flutuante ao rolar ---------- */
.topo {
  left: 0; right: 0; margin: 0 auto; max-width: 100%;
  transition: max-width .6s var(--curva), top .6s var(--curva), border-radius .6s var(--curva),
              padding .6s var(--curva), background .4s, border-color .4s;
}
.topo.rolou {
  top: 12px; max-width: min(1180px, calc(100% - 24px));
  padding: 10px 10px 10px 24px; border-radius: 999px;
  background: rgba(14, 14, 14, .58);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 50px -20px rgba(0, 0, 0, .8);
}
.menu a { position: relative; padding: 6px 0; }
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--curva);
}
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Botões com volume e brilho ---------- */
.botao {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sinal) 82%, #fff), var(--sinal) 55%, color-mix(in srgb, var(--sinal) 85%, #000));
  border-color: color-mix(in srgb, var(--sinal) 70%, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 14px 34px -14px var(--cromo-reflexo);
  transition: transform .5s var(--curva), box-shadow .4s, background .3s, color .3s;
  will-change: transform;
}
.botao::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--curva);
}
.botao:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--sinal) 82%, #fff), var(--sinal) 55%, color-mix(in srgb, var(--sinal) 85%, #000)); border-color: color-mix(in srgb, var(--sinal) 70%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 18px 44px -12px var(--cromo-reflexo); }
.botao:hover::after { transform: translateX(120%); }
.botao-linha, .botao-linha:hover {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .14);
  color: var(--texto);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.botao-linha:hover { border-color: rgba(255, 255, 255, .3); }
.botao-linha::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%); }

/* ---------- Hero: grade fina de colunas ao fundo ---------- */
.hero::after {
  content: ""; position: absolute; inset: 0 var(--margem); z-index: -2; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px calc(100% / 12));
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%);
}

/* ---------- Superfícies de vidro com borda iluminada ---------- */
.calc-form, .vaz-form, .saz, .diario-caixa, .quiz, .ferramentas-lista a, .plano-fases > li,
.ficha, .vaz-painel, .final {
  position: relative; isolation: isolate;
  border-color: transparent;
  border-radius: var(--raio);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--sombra-funda);
}
@media (min-width: 901px) {
  .ficha, .vaz-painel { position: sticky; }
}
.calc-form, .vaz-form, .saz, .diario-caixa, .quiz, .ferramentas-lista a, .plano-fases > li {
  background: var(--vidro), rgba(8, 8, 8, .6);
}
.ficha, .vaz-painel, .final {
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--sinal) 16%, transparent), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--sinal-forte) 14%, transparent), transparent 65%),
    var(--campo);
}
/* borda em degradê (luz batendo no canto) */
.calc-form::after, .vaz-form::after::after, .saz::after, .diario-caixa::after, .quiz::after,
.ferramentas-lista a::after, .plano-fases > li::after, .ficha::after, .vaz-painel::after::after, .final::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: var(--luz-borda);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* luz que segue o cursor (posição definida em premium.js) */
.calc-form::before, .vaz-form::before::before, .saz::before, .diario-caixa::before, .quiz::before,
.ferramentas-lista a::before, .ficha::before, .vaz-painel::before::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--sinal) 11%, transparent), transparent 70%);
  opacity: 0; transition: opacity .5s;
}
.com-luz:hover::before { opacity: 1; }
.diario-caixa { overflow: hidden; }

/* Cartões de ferramentas */
.ferramentas-lista a { padding: 24px 22px 26px; transition: transform .6s var(--curva); }
.ferramentas-lista a:hover { background: var(--vidro), rgba(8, 8, 8, .6); transform: translateY(-4px); }
.ferramentas-lista strong { font-weight: 500; letter-spacing: -.015em; }

/* Funil do método com brilho de metal */
.funil-faixa { border-color: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.funil-faixa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, .06), transparent 40%);
}

/* Relatório e cartões claros ganham sombra mais profunda */
.relatorio { border-radius: var(--raio); box-shadow: var(--sombra-funda); }
.entregas-resultado {
  border-radius: var(--raio);
  background: linear-gradient(160deg, color-mix(in srgb, var(--sinal) 80%, #fff), var(--sinal) 45%, color-mix(in srgb, var(--sinal) 75%, var(--sinal-forte)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 40px 90px -40px var(--cromo-reflexo);
}
.entregas-resultado li { font-weight: 400; letter-spacing: -.03em; }

/* ---------- Faixa contínua de nichos ---------- */
.nichos { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }
.faixa-nichos {
  position: relative; overflow: hidden;
  margin-top: clamp(56px, 7vw, 96px);
  padding: 26px 0;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.faixa-trilho { display: flex; width: max-content; animation: desliza 48s linear infinite; }
.faixa-nichos:hover .faixa-trilho { animation-play-state: paused; }
.faixa-trilho span {
  display: inline-flex; align-items: center; gap: clamp(28px, 3vw, 48px); padding-right: clamp(28px, 3vw, 48px);
  font-family: var(--display); font-weight: 300; font-size: clamp(2rem, 1rem + 3vw, 3.75rem);
  letter-spacing: -.03em; line-height: 1; white-space: nowrap; color: var(--texto);
}
.faixa-trilho span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--texto) 45%, transparent); }
.faixa-trilho svg { width: .5em; height: auto; fill: var(--sinal); flex: none; }
@keyframes desliza { to { transform: translateX(-50%); } }

/* ---------- Rodapé com assinatura em cromo ---------- */
.rodape { padding-top: clamp(96px, 10vw, 140px); }
.rodape-assinatura {
  grid-column: 1 / -1; margin: 8px 0 -0.08em; overflow: hidden; user-select: none;
  font-family: var(--display); font-weight: 300; font-variation-settings: "opsz" 96, "wdth" 100;
  font-size: clamp(4.5rem, 18.5vw, 17.5rem); line-height: .82; letter-spacing: -.04em; text-align: center;
  background: linear-gradient(180deg, #f3f5f4 0%, #b9c0bd 34%, color-mix(in srgb, var(--sinal) 40%, #3a403d) 66%, rgba(0, 0, 0, 0) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.final { border-radius: 36px; }
.final-a { fill: color-mix(in srgb, var(--sinal) 10%, var(--campo-2)); }

/* ---------- Revelação dos títulos (um único efeito, ao entrar na tela) ---------- */
.premium-js .titulo:not(.visto), .premium-js .final-titulo:not(.visto) {
  opacity: 0; transform: translateY(.35em); filter: blur(8px);
}
.premium-js .titulo, .premium-js .final-titulo {
  transition: opacity 1.1s var(--curva), transform 1.1s var(--curva), filter 1.1s var(--curva);
}

/* ---------- Seção clara ---------- */
.sobre { background: radial-gradient(80% 90% at 85% 10%, #fff, var(--claro) 60%); }

/* ---------- Celular ---------- */
@media (max-width: 600px) {
  .topo.rolou { padding: 8px 8px 8px 18px; }
  .hero-titulo { letter-spacing: -.025em; }
  .faixa-trilho { animation-duration: 32s; }
}
@media (prefers-reduced-motion: reduce) {
  .faixa-trilho { animation: none; }
  .premium-js .titulo:not(.visto), .premium-js .final-titulo:not(.visto) { opacity: 1; transform: none; filter: none; }
}
@media print {
  body::after { display: none; }
}

/* ======================================================================
   Topo da página: palco do logo, título prateado, faixa em vidro
   ====================================================================== */

/* sem a grade de colunas: o palco já dá profundidade */
.hero::after { display: none; }

/* Título em degradê prateado, linha a linha (combina com o cromo do logo) */
.hero-titulo { font-weight: 450; }
.hero-titulo .linha { margin-bottom: -.12em; }
.hero-titulo .linha > span {
  padding-bottom: .12em;
  background: linear-gradient(180deg, #ffffff 22%, color-mix(in srgb, var(--sinal) 18%, #aab2af) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Palco: feixe de luz de cima, chão com brilho e anéis em perspectiva */
.hero-cromo { --chao: 70%; isolation: isolate; }
.palco { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 900px; }
.palco-feixe {
  position: absolute; left: 50%; top: -30%; width: 78%; height: calc(var(--chao) + 30%);
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--sinal) 16%, transparent), transparent 100%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 85%, transparent 100%);
  filter: blur(34px);
  opacity: .8;
}
.palco-anel {
  position: absolute; left: 50%; top: var(--chao); width: var(--d); aspect-ratio: 1;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, var(--a, .1));
  transform: translate(-50%, -50%) rotateX(77deg);
  animation: orbita var(--t) linear infinite;
}
.palco-anel::after {
  content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--sinal); box-shadow: 0 0 14px 3px var(--sinal);
}
.palco-anel-1 { --d: 70%; --t: 24s; --a: .16; }
.palco-anel-2 { --d: 102%; --t: 38s; --a: .09; animation-direction: reverse; }
.palco-anel-3 { --d: 136%; --t: 56s; --a: .05; }
.palco-anel-3::after { opacity: .5; }
@keyframes orbita { to { transform: translate(-50%, -50%) rotateX(77deg) rotate(360deg); } }

/* brilho do chão sob a base do "A" */
.hero-cromo.tem-3d::after {
  top: var(--chao); bottom: auto; left: 10%; right: 10%; height: 56px; transform: translateY(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sinal) 55%, transparent), transparent);
  filter: blur(10px); opacity: .75;
}
/* o reflexo do 3D some aos poucos para baixo */
.cromo-3d {
  position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--chao) + 1%), rgba(0, 0, 0, .45) calc(var(--chao) + 7%), transparent 97%);
          mask-image: linear-gradient(180deg, #000 calc(var(--chao) + 1%), rgba(0, 0, 0, .45) calc(var(--chao) + 7%), transparent 97%);
}

/* Faixa "Do anúncio à venda" em painel de vidro */
.extrato {
  position: relative; isolation: isolate;
  margin-top: 36px; margin-bottom: 8px; padding: 22px 28px 26px;
  border-top: 0; border-radius: 24px;
  background: var(--vidro), rgba(8, 8, 8, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--sombra-funda);
}
.extrato::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: var(--luz-borda);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

@media (max-width: 600px) {
  .extrato { padding: 18px 18px 20px; }
  .palco-anel-3 { display: none; }
}