/* ==========================================================================
   LuxeGarbo Brasil — landing page
   Paleta preto + ouro, alternando com seções em marfim (estrutura inspirada em
   sites institucionais de alto padrão: muito respiro, cartões arredondados, rótulos
   em fonte mono). Títulos na Playfair (identidade da marca), texto na Inter,
   rótulos e botões na JetBrains Mono.
   ========================================================================== */

:root{
  --preto:#0a0a0c;
  --preto-2:#101014;
  --preto-3:#15151a;
  --borda:#23232a;
  --borda-ouro:rgba(201,162,77,.32);
  --texto:#ece9e4;
  --texto-2:#a7a39c;
  --texto-3:#75726c;
  --ouro:#c9a24d;
  --ouro-claro:#e0c175;
  --ouro-escuro:#8d6f2e;
  --verde:#4ea96b;

  /* Seções claras */
  --marfim:#f3eee4;
  --marfim-2:#fbf9f4;
  --tinta:#17140f;
  --tinta-2:#5b5449;
  --tinta-3:#8e877b;
  --linha:#e2dacb;

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --larg:1120px;
  --larg-estreita:760px;
  --larg-larga:1440px;
  --raio:4px;
  --raio-g:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --transicao:.45s var(--ease);
}

*{box-sizing:border-box;}
/* Sem isto, um display: flex/grid vence o atributo hidden e o elemento continua
   na tela — era o que fazia os três painéis da demonstração aparecerem juntos. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--preto);
  color:var(--texto);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ol,ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:500;line-height:1.18;margin:0;}
em{font-style:normal;}

/* Contorno de foco na cor da marca, só para quem navega por teclado. */
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:2px;}
:focus:not(:focus-visible){outline:none;}

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

.container{width:100%;max-width:var(--larg);margin:0 auto;padding:0 24px;}
.container.estreito{max-width:var(--larg-estreita);}
.container.largo{max-width:var(--larg-larga);padding:0 14px;}

/* Sobretítulo dourado em caixa alta — usado na demonstração. */
.sobretitulo{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ouro);font-weight:500;margin:0 0 18px;
}

/* Rótulo em mono, espaçado — assina as demais seções. */
.rotulo{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ouro);margin:0 0 20px;
}
.rotulo-escuro{color:var(--ouro-escuro);}

/* ================= ANIMAÇÕES ================= */
/* Reveal simples no scroll. Sem JS (ou com movimento reduzido) tudo já aparece. */
.no-js .anima{opacity:1;transform:none;}
.anima{opacity:0;transform:translateY(22px);}
.anima.is-visivel{
  opacity:1;transform:none;
  transition:opacity .9s ease, transform .9s var(--ease);
}
.anima[data-atraso="1"].is-visivel{transition-delay:.09s;}
.anima[data-atraso="2"].is-visivel{transition-delay:.18s;}
.anima[data-atraso="3"].is-visivel{transition-delay:.27s;}
.anima[data-atraso="4"].is-visivel{transition-delay:.36s;}

/* ================= BOTÕES ================= */
/* Mono, caixa alta, com o triângulo que avança no hover. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  white-space:nowrap;
  padding:15px 22px;border:1px solid transparent;border-radius:3px;
  font-family:var(--mono);font-size:.7rem;font-weight:500;line-height:1.2;
  letter-spacing:.18em;text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease),
    box-shadow .35s var(--ease), filter .35s var(--ease);
}
.btn::after{
  content:'';flex-shrink:0;width:0;height:0;
  border-left:5px solid currentColor;border-block:3.5px solid transparent;
  transition:transform .35s var(--ease);
}
.btn:hover::after{transform:translateX(4px);}
.btn:disabled{opacity:.6;cursor:wait;filter:none;box-shadow:none;}
.btn-cheio{
  background:linear-gradient(135deg,var(--ouro) 0%, var(--ouro-claro) 52%, var(--ouro) 100%);
  color:#15110a;
}
.btn-cheio:hover{filter:brightness(1.06);box-shadow:0 12px 30px rgba(201,162,77,.25);}
.btn-contorno{border-color:rgba(236,233,228,.4);color:var(--texto);}
.btn-contorno:hover{border-color:var(--ouro);color:var(--ouro-claro);}
.btn-escuro{background:var(--tinta);color:var(--marfim-2);}
.btn-escuro:hover{background:#2b251b;}
.btn-contorno-escuro{border-color:rgba(23,20,15,.3);color:var(--tinta);}
.btn-contorno-escuro:hover{border-color:var(--tinta);}

/* Botão dourado clássico — continua só na chamada da demonstração. */
.btn-ouro{
  display:inline-block;padding:17px 44px;
  background:linear-gradient(135deg,var(--ouro) 0%, var(--ouro-claro) 52%, var(--ouro) 100%);
  color:#15110a;font-size:.8rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  border-radius:var(--raio);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.btn-ouro:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(201,162,77,.26);filter:brightness(1.05);}
.btn-ouro:active{transform:translateY(0);}

/* ================= CABEÇALHO ================= */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 24px;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, padding .35s ease, transform .5s var(--ease);
}
.topbar.is-fixo{
  background:rgba(10,10,12,.86);backdrop-filter:blur(14px);
  border-bottom-color:var(--borda);padding-block:13px;
}
.topbar.is-oculto{transform:translateY(-100%);}

/* Logo oficial (PNG branco com sombra, recortado em 640x100 — proporção 6,4:1).
   A altura manda; a largura acompanha. */
.marca{display:flex;align-items:center;flex-shrink:0;min-height:44px;}
.marca-img{display:block;height:28px;width:auto;transition:height .35s ease;}
.topbar.is-fixo .marca-img{height:24px;}
@media (min-width:1024px){
  .marca-img{height:34px;}
  .topbar.is-fixo .marca-img{height:28px;}
}

/* Navegação em linha (desktop). A seta aparece no hover, e a seção que está na tela
   fica dourada. */
.nav-topo{display:none;}
.nav-topo a{
  white-space:nowrap;
  position:relative;font-size:.9rem;font-weight:400;color:var(--texto);
  transition:color .3s ease;
}
.nav-topo a::after{
  content:'';position:absolute;left:calc(100% + 7px);top:50%;
  border-left:5px solid currentColor;border-block:3.5px solid transparent;
  opacity:0;transform:translate(-4px,-50%);
  transition:opacity .25s ease, transform .3s var(--ease);
}
.nav-topo a:hover{color:var(--ouro-claro);}
.nav-topo a:hover::after{opacity:1;transform:translate(0,-50%);}
.nav-topo a.is-atual{color:var(--ouro);}

.topbar-acoes{display:flex;align-items:center;gap:14px;}
.btn-topo{display:none;padding:11px 16px;white-space:nowrap;}

.menu-btn{width:34px;height:34px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;}
.menu-btn span{display:block;height:1.4px;background:var(--texto);transition:transform .3s ease, opacity .3s ease;}
.menu-btn span:nth-child(1){width:22px;}
.menu-btn span:nth-child(2){width:16px;}
.menu-btn span:nth-child(3){width:22px;}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.4px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg);}

/* Menu lateral (gaveta), entra pela direita, do lado do botão.
   Camadas: fundo escurecido (50) < gaveta (55) < cabeçalho (60). O cabeçalho fica por
   cima de propósito — assim o botão, que vira um X, continua visível e clicável pra
   fechar, e a marca não some. A gaveta começa abaixo dele (padding-top). */
.menu{
  position:fixed;top:0;right:0;bottom:0;width:min(330px,86vw);z-index:55;
  background:var(--preto-2);border-left:1px solid var(--borda);
  display:flex;flex-direction:column;
  padding:104px 30px 32px;overflow-y:auto;
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--transicao), visibility 0s linear .45s;
}
.menu.is-aberto{
  transform:none;visibility:visible;
  transition:transform var(--transicao), visibility 0s;
  box-shadow:-24px 0 60px rgba(0,0,0,.5);
}
.menu-rotulo{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--texto-3);margin:0 0 10px;
}
.menu a:not(.menu-cta){
  display:flex;align-items:baseline;gap:14px;
  padding:17px 0;font-size:1.04rem;color:var(--texto);
  border-bottom:1px solid var(--borda);
  transition:color .25s ease, padding-left .25s ease;
}
.menu a:not(.menu-cta):hover{color:var(--ouro);padding-left:6px;}
.menu-num{font-family:var(--mono);font-size:.68rem;color:var(--ouro);letter-spacing:.06em;}
.menu-cta{margin-top:auto;}
/* Entra em cascata quando a gaveta abre. Só desliza — NUNCA parte de opacity:0: se a
   animação não rodar por algum motivo, os links continuam visíveis (antes ficavam
   invisíveis e o menu parecia vazio). */
.menu.is-aberto a{animation:entraMenu .5s var(--ease);}
.menu.is-aberto a:nth-of-type(2){animation-duration:.56s;}
.menu.is-aberto a:nth-of-type(3){animation-duration:.62s;}
.menu.is-aberto a:nth-of-type(4){animation-duration:.68s;}
.menu.is-aberto a:nth-of-type(5){animation-duration:.76s;}
@keyframes entraMenu{from{transform:translateX(18px);}to{transform:none;}}

.menu-fundo{position:fixed;inset:0;z-index:50;background:rgba(5,5,7,.7);backdrop-filter:blur(3px);}

/* ================= HERO ================= */
/* A seção tem 160% da altura da tela e o palco fica preso no topo enquanto ela passa.
   Nesse trecho, --p (0 → 1, vindo do main.js) recolhe o banner: ele encolhe até virar
   um cartão arredondado sobre o marfim — do mesmo tamanho e raio da vitrine de
   "O problema", que vem logo em seguida. O texto sobe e esmaece junto. */
.hero{
  --recuo:14px;
  position:relative;height:160svh;background:var(--marfim);
}
.hero-palco{
  position:sticky;top:0;height:100svh;min-height:580px;
  display:flex;align-items:flex-end;overflow:hidden;
  clip-path:inset(calc(var(--p, 0) * var(--recuo)) round calc(var(--p, 0) * var(--raio-g)));
  background:
    radial-gradient(120% 90% at 78% 42%, rgba(201,162,77,.13) 0%, rgba(201,162,77,0) 58%),
    linear-gradient(180deg, #0c0c10 0%, var(--preto) 72%);
}
.hero-fundo{position:absolute;inset:0;pointer-events:none;overflow:hidden;}

/* ---- Anéis ----
   São arcos (stroke-dasharray) girando devagar em sentidos alternados; sem o recorte
   seriam círculos fechados e a rotação não apareceria. Ao recolher o banner eles se
   afastam um pouco (escala menor). O mouse ainda desloca a camada de fora (até 14px). */
.hero-arcos{position:absolute;inset:0;opacity:.85;transition:transform 1.4s var(--ease);}
.hero-arcos svg{
  width:100%;height:100%;overflow:visible;
  transform-origin:78% 50%;
  transform:scale(calc(1 - var(--p, 0) * .12));
}
.anel{transform-box:view-box;transform-origin:470px 300px;animation:girar 120s linear infinite;}
.anel-2{animation-duration:95s;animation-direction:reverse;}
.anel-3{animation-duration:150s;}
.anel-4{animation-duration:110s;animation-direction:reverse;}
.anel-5{animation-duration:180s;}
@keyframes girar{to{transform:rotate(360deg);}}

.hero-brilho{
  position:absolute;border-radius:50%;
  filter:blur(70px);will-change:transform,opacity;
}
.hero-brilho-1{
  width:46vw;height:46vw;min-width:420px;min-height:420px;
  top:4%;right:4%;
  background:radial-gradient(circle, rgba(201,162,77,.26) 0%, rgba(201,162,77,0) 68%);
  animation:deriva1 26s ease-in-out infinite;
}
.hero-brilho-2{
  width:34vw;height:34vw;min-width:300px;min-height:300px;
  bottom:-6%;left:8%;
  background:radial-gradient(circle, rgba(201,162,77,.14) 0%, rgba(201,162,77,0) 70%);
  animation:deriva2 34s ease-in-out infinite;
}
@keyframes deriva1{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.85;}
  50%{transform:translate3d(-5%,6%,0) scale(1.14);opacity:1;}
}
@keyframes deriva2{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.6;}
  50%{transform:translate3d(7%,-8%,0) scale(1.2);opacity:.9;}
}

/* .hero na frente: a regra .container dos breakpoints zerava o padding vertical. */
.hero .hero-conteudo{
  position:relative;z-index:2;
  padding-top:130px;padding-bottom:clamp(56px,11svh,120px);
  transform:translate3d(0, calc(var(--p, 0) * -70px), 0) scale(calc(1 - var(--p, 0) * .04));
  transform-origin:left bottom;
  opacity:calc(1 - var(--p, 0) * .45);
}
.hero h1{
  font-size:clamp(2.5rem,8.4vw,4.2rem);font-weight:400;
  line-height:1.06;letter-spacing:-.02em;margin-bottom:30px;
  text-wrap:balance;
}
.hero h1 em{display:block;color:var(--ouro-claro);font-style:italic;}
.hero-texto{
  font-size:clamp(1rem,2.4vw,1.1rem);color:var(--texto-2);
  max-width:30em;margin:0 0 30px;
}
.hero-nota{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin:20px 0 0;
}

/* ================= SEÇÕES CLARAS ================= */
.secao-clara{
  --espaco:84px;
  position:relative;background:var(--marfim);color:var(--tinta);
  padding:var(--espaco) 0;scroll-margin-top:70px;
}
.secao-clara + .secao-clara{padding-top:0;}
.secao-clara h2{color:var(--tinta);}

/* ---- O problema: vitrine escura ---- */
#problema{padding-top:14px;}
@media (min-width:720px){#problema{padding-top:20px;}}
.vitrine{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;gap:44px;align-content:end;
  min-height:620px;padding:64px 24px 40px;
  border-radius:var(--raio-g);background:var(--preto);color:var(--texto);
}
.vitrine-fundo{position:absolute;inset:0;z-index:-1;}
.vitrine-fundo img{
  width:100%;height:100%;object-fit:cover;
  animation:aproxima 32s ease-in-out infinite alternate;
}
/* Véu escuro: garante leitura do texto sobre qualquer parte da foto. */
.vitrine-fundo::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.82) 45%, rgba(10,10,12,.94) 100%);
}
@keyframes aproxima{from{transform:scale(1.02);}to{transform:scale(1.14) translate3d(-1.5%,1%,0);}}

.vitrine h2{
  color:var(--texto);font-weight:400;letter-spacing:-.015em;line-height:1.08;
  font-size:clamp(2.2rem,7vw,3.7rem);margin-bottom:22px;
}
.vitrine-texto{color:var(--texto-2);max-width:32em;margin:0;}

.perguntas{border-top:1px solid rgba(236,233,228,.22);}
.perguntas li{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 0;border-bottom:1px solid rgba(236,233,228,.22);
  font-size:clamp(1rem,2.6vw,1.12rem);font-weight:400;
}
/* Linha dourada que se desenha da esquerda pra direita no hover. */
.perguntas li::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--ouro);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.perguntas li:hover::after{transform:scaleX(1);}
.pergunta-num{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(236,233,228,.5);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;
  transition:border-color .35s ease, color .35s ease, background .35s ease;
}
.perguntas li:hover .pergunta-num{border-color:var(--ouro);color:var(--ouro-claro);background:rgba(201,162,77,.1);}

/* ---- O que você recebe: título em degradê + cartão com sanfona ---- */
.cabeca-centro{text-align:center;max-width:780px;margin:0 auto 48px;}
.titulo-degrade{
  font-size:clamp(2.3rem,6vw,4rem);font-weight:400;letter-spacing:-.02em;line-height:1.08;
  background:linear-gradient(100deg, var(--tinta) 0%, var(--tinta) 38%, var(--ouro-escuro) 72%, var(--ouro) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em;
}

.cartao-claro{
  background:var(--marfim-2);border-radius:var(--raio-g);
  padding:22px 22px 30px;
  box-shadow:0 1px 0 rgba(23,20,15,.04), 0 34px 70px -34px rgba(23,20,15,.28);
}

.sanfona-item{border-bottom:1px solid var(--linha);}
.sanfona-item h3{font:inherit;margin:0;}
.sanfona-cab{
  position:relative;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;text-align:left;
  font-size:1.04rem;font-weight:400;color:var(--tinta);
}
.sanfona-cab::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:var(--tinta);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.sanfona-cab:hover::after{transform:scaleX(1);background:var(--ouro);}
.sanfona-item.is-aberto .sanfona-cab{font-weight:600;}
.sanfona-item.is-aberto .sanfona-cab::after{transform:scaleX(1);background:var(--tinta);}

/* Sinal de + que gira e vira × quando o item abre. */
/* Giram só as linhas, não o círculo: girar a caixa inteira fazia ela passar da borda. */
.sanfona-sinal{
  position:relative;flex-shrink:0;width:24px;height:24px;border-radius:50%;
  border:1px solid rgba(23,20,15,.3);
  transition:border-color .3s ease;
}
.sanfona-sinal::before,.sanfona-sinal::after{
  content:'';position:absolute;left:50%;top:50%;width:9px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);
  transition:transform .45s var(--ease);
}
.sanfona-sinal::after{transform:translate(-50%,-50%) rotate(90deg);}
.sanfona-item.is-aberto .sanfona-sinal{border-color:var(--tinta);}
.sanfona-item.is-aberto .sanfona-sinal::before{transform:translate(-50%,-50%) rotate(45deg);}
.sanfona-item.is-aberto .sanfona-sinal::after{transform:translate(-50%,-50%) rotate(135deg);}

/* Celular: o corpo abre embaixo do título (altura animada com grid 0fr → 1fr). */
.sanfona-corpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease);}
.sanfona-item.is-aberto .sanfona-corpo{grid-template-rows:1fr;}
.sanfona-conteudo{overflow:hidden;min-height:0;}
.sanfona-conteudo > *:last-child{margin-bottom:24px;}
.sanfona-icone{
  width:30px;height:30px;margin:2px 0 14px;
  fill:none;stroke:var(--ouro-escuro);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
}
.sanfona-num{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--tinta-3);margin:0 0 8px;
}
.sanfona-titulo{display:none;}
.sanfona-texto{font-size:1rem;color:var(--tinta-2);margin:0;max-width:28em;}

.cartao-claro-rodape{margin-top:28px;}
.cartao-claro-rodape p{color:var(--tinta-2);font-size:.95rem;margin:0 0 22px;max-width:34em;}
.botoes{display:flex;flex-wrap:wrap;gap:10px;}

/* ================= SEÇÃO ESCURA (demonstração) ================= */
.secao{padding:110px 0;position:relative;scroll-margin-top:92px;}
.secao > .container{position:relative;z-index:1;}
#demo{background-image:radial-gradient(54% 66% at 74% 56%, rgba(201,162,77,.12) 0%, rgba(201,162,77,0) 66%);}
.secao h2{font-size:clamp(1.9rem,4.6vw,2.9rem);letter-spacing:-.01em;margin-bottom:20px;}
.secao-texto{color:var(--texto-2);max-width:40em;margin:0 0 46px;}

/* ================= DEMONSTRAÇÃO ================= */
/* Celular/tablet: os três exemplos são uma faixa de pílulas lado a lado — antes eram
   três botões grandes empilhados que empurravam o aparelho pra longe. Só o rótulo
   aparece; manchete e tempo de leitura entram no desktop, onde há espaço. */
.abas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:26px;
  padding:5px;background:var(--preto-3);border:1px solid var(--borda);border-radius:999px;
}
.aba{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:11px 8px;border-radius:999px;text-align:center;
  color:var(--texto-2);
  transition:background .35s ease, color .35s ease, box-shadow .35s ease;
}
.aba:hover{color:var(--texto);}
.aba-rotulo{font-size:.82rem;font-weight:500;line-height:1.2;}
.aba-titulo,.aba-meta{display:none;}
.aba.is-ativa{
  background:linear-gradient(135deg,var(--ouro) 0%, var(--ouro-claro) 55%, var(--ouro) 100%);
  color:#15110a;box-shadow:0 6px 18px rgba(201,162,77,.22);
}
.aba.is-ativa .aba-rotulo{font-weight:600;}

/* ---- Índice "Nesta análise" ----
   No celular vira uma faixa de etapas rolável logo abaixo do aparelho. */
.demo-indice{margin-top:26px;}
.demo-indice-titulo{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro);
  margin:0 0 12px;font-weight:500;
}
.indice{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:4px;margin:0 -24px;padding-inline:24px;
  scroll-snap-type:x proximity;
}
.indice::-webkit-scrollbar{display:none;}
.indice li{flex-shrink:0;scroll-snap-align:start;}
.indice-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;border:1px solid var(--borda);border-radius:999px;
  background:var(--preto-3);color:var(--texto-2);font-size:.8rem;white-space:nowrap;
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.indice-item:hover{border-color:var(--borda-ouro);color:var(--texto);}
.indice-num{font-family:var(--serif);font-size:.7rem;color:var(--texto-3);transition:color .3s ease;}
.indice-item.is-lido .indice-num{color:var(--ouro-escuro);}
.indice-item.is-ativo{border-color:var(--ouro);color:var(--texto);background:rgba(201,162,77,.1);}
.indice-item.is-ativo .indice-num{color:var(--ouro);}
.demo-indice-progresso{font-size:.72rem;color:var(--texto-3);margin:12px 0 0;letter-spacing:.04em;}
.demo-indice-progresso span{color:var(--ouro);font-weight:600;}

/* Chamada no fim da seção: quem acabou de ver o produto ganha o próximo passo, em
   vez de a demonstração terminar sem saída. */
.demo-cta{
  margin-top:22px;padding:20px 20px 22px;
  border:1px solid var(--borda-ouro);border-radius:var(--raio);
  background:linear-gradient(160deg, rgba(201,162,77,.1) 0%, rgba(201,162,77,.02) 100%);
}
.demo-cta p{font-family:var(--serif);font-size:1.02rem;line-height:1.35;margin:0 0 16px;color:var(--texto);}
.demo-cta .btn-ouro{display:block;text-align:center;padding:15px 20px;}

/* Painel + "celular": o conteúdo da análise vive dentro do aparelho. */
.painel{display:flex;justify-content:center;}
.painel.is-saindo{opacity:0;transform:translateY(10px);}
.painel.is-ativo{
  opacity:1;transform:none;
  transition:opacity .45s ease, transform .45s ease;
}

.celular{
  width:min(420px,100%);
  background:var(--preto-2);
  border:1px solid var(--borda);
  border-radius:26px;
  box-shadow:0 34px 90px rgba(0,0,0,.6), 0 0 0 7px #000, 0 0 0 8px #1e1e24;
  overflow:hidden;
}
.celular-topo{
  display:grid;grid-template-columns:30px 1fr 30px;align-items:center;
  padding:16px 18px 13px;border-bottom:1px solid var(--borda);
}
.celular-menu{display:flex;flex-direction:column;gap:4px;}
.celular-menu span{display:block;width:17px;height:1.3px;background:var(--texto);}
.celular-menu span:nth-child(2){width:12px;}
.celular-marca{
  justify-self:center;text-align:center;
  font-family:var(--serif);font-size:.98rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.1;
}
.celular-marca em{
  display:block;font-size:.48rem;letter-spacing:.4em;color:var(--ouro);padding-left:.4em;
}
.celular-logo{display:block;height:18px;width:auto;}

.ticker{
  display:flex;align-items:center;gap:7px;
  padding:9px 18px;border-bottom:1px solid var(--borda);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);
}
.ticker-pulso{
  width:6px;height:6px;border-radius:50%;background:var(--verde);flex-shrink:0;
  animation:pulsa 2s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:1;}50%{opacity:.25;}}
.ticker-valor{margin-left:auto;color:var(--texto-2);white-space:nowrap;}
.ticker-valor strong{color:var(--texto);font-weight:500;}
.ticker-valor .alta{color:var(--verde);}

/* Barra de leitura no topo do aparelho: mostra quanto da análise já passou. */
.leitura{height:2px;background:var(--borda);}
.leitura span{
  display:block;height:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--ouro-escuro),var(--ouro-claro));
  transition:transform .15s linear;
}

/* A matéria é longa de propósito: quem rola é o aparelho, não a página. A altura é
   presa à da janela pra que o celular inteiro caiba na seção sem empurrar o resto.
   position:relative faz o offsetTop das partes ser medido a partir daqui (o índice
   usa isso pra saltar até cada trecho). */
.celular-corpo{
  position:relative;
  padding:22px 20px 26px;
  max-height:clamp(300px,54svh,560px);
  overflow-y:auto;scrollbar-width:thin;
  /* Sem cor definida o Chrome desenha a barra padrão (branca) por cima do tema escuro. */
  scrollbar-color:var(--borda) transparent;
  /* Esmaece a última linha, deixando claro que há mais conteúdo abaixo. */
  mask-image:linear-gradient(to bottom,#000 calc(100% - 42px),transparent 100%);
}
.celular-corpo.no-fim{mask-image:none;}
.celular-corpo::-webkit-scrollbar{width:4px;}
.celular-corpo::-webkit-scrollbar-thumb{background:var(--borda);border-radius:4px;}

.kicker{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ouro);margin:0 0 12px;font-weight:500;
}
.materia-titulo{font-size:1.42rem;line-height:1.26;margin:0 0 18px;}
.materia-figura{margin:0 0 18px;}
.materia-figura img{border-radius:var(--raio);width:100%;height:auto;}
.materia-figura figcaption{
  font-size:.62rem;color:var(--texto-3);margin-top:7px;letter-spacing:.05em;
}
.materia-lead{font-size:.92rem;color:var(--texto-2);margin:0 0 24px;}
.materia-rodape{
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--borda);
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-3);text-align:center;
}

/* --- Bloco da análise premium --- */
.analise{
  background:var(--preto-3);border:1px solid var(--borda);
  border-radius:var(--raio);padding:22px 19px;
}
.selo{
  display:flex;align-items:center;gap:8px;margin:0 0 16px;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro);font-weight:500;
}
.selo-marca{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  background:var(--ouro);color:#15110a;
  display:flex;align-items:center;justify-content:center;font-size:.6rem;
}
.analise h4{font-size:1.24rem;line-height:1.28;margin:0 0 12px;}
.analise-sub{font-size:.86rem;color:var(--texto-2);margin:0 0 22px;}

.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px;}
.chip{
  padding:12px 8px;text-align:center;
  background:var(--preto-2);border:1px solid var(--borda);border-radius:var(--raio);
}
.chip strong{
  display:block;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--texto);font-weight:500;margin-bottom:4px;
}
.chip span{font-size:.58rem;color:var(--texto-3);line-height:1.3;display:block;}

.pontos{display:flex;flex-direction:column;gap:20px;margin-bottom:22px;}
.pontos li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;}
.ponto-num{
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--borda-ouro);color:var(--ouro);
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;letter-spacing:.04em;margin-top:1px;
}
.pontos h5{font-size:.96rem;line-height:1.35;margin:0 0 6px;}
.pontos p{font-size:.84rem;color:var(--texto-2);margin:0;}

.caixa{
  border-left:2px solid var(--borda-ouro);
  background:rgba(201,162,77,.05);
  padding:14px 16px;border-radius:0 var(--raio) var(--raio) 0;
  margin-bottom:12px;
}
.caixa-conclusao{border-left-color:var(--ouro);background:rgba(201,162,77,.1);margin-bottom:0;}
.caixa-rotulo{
  font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ouro);margin:0 0 7px;font-weight:500;
}
.caixa p:last-child{margin:0;font-size:.84rem;color:var(--texto);}

/* ================= TRANSIÇÃO ================= */
/* z-index: fica por cima da curva da faixa final, que sobe por trás dela. */
.transicao{text-align:center;z-index:1;}
.transicao h2{
  font-size:clamp(1.9rem,4.6vw,3rem);font-weight:400;letter-spacing:-.01em;line-height:1.16;
  max-width:18em;margin:0 auto 18px;
}
.transicao h2 em{color:var(--ouro-escuro);font-style:italic;}
.transicao p{color:var(--tinta-2);max-width:34em;margin:0 auto;font-size:1rem;}
.transicao .selo-mono{
  display:inline-block;margin-top:36px;padding:14px 26px;
  background:var(--marfim-2);border-radius:6px;
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tinta);box-shadow:0 14px 34px -20px rgba(23,20,15,.4);
}

/* ================= LISTA DE ESPERA (faixa final) ================= */
/* O marfim da transição termina numa curva com a borda acesa em dourado — o horizonte
   do banner visto de baixo — e um brilho desce dela sobre o preto. overflow-x:clip
   (e não hidden) corta a elipse larga sem quebrar o sticky do título. */
.final{
  position:relative;overflow-x:clip;scroll-margin-top:0;
  padding:150px 0 100px;
  background:
    radial-gradient(70% 420px at 50% 0%, rgba(201,162,77,.16) 0%, rgba(201,162,77,0) 70%),
    var(--preto);
}
.final::before{
  content:'';position:absolute;left:-30%;right:-30%;top:-150px;height:220px;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:var(--marfim);
  box-shadow:
    0 1px 0 rgba(236,214,160,.85),
    0 14px 40px rgba(224,193,117,.3),
    0 50px 130px rgba(201,162,77,.18);
}
.final > .container{position:relative;}
.final-cabeca{margin:0 0 44px;}
.final-cabeca .rotulo{color:var(--ouro-claro);}
.final h2{
  font-size:clamp(2.1rem,6vw,3.6rem);font-weight:400;letter-spacing:-.02em;line-height:1.1;
  color:#f6f1e7;margin-bottom:20px;text-wrap:balance;
}
.final h2 em{color:var(--ouro-claro);font-style:italic;}
.final-texto{color:var(--texto-2);max-width:30em;margin:0;}
.final-form{max-width:780px;}

/* ================= FORMULÁRIO ================= */
.formulario{
  background:rgba(16,16,20,.84);backdrop-filter:blur(10px);
  border:1px solid var(--borda);border-radius:var(--raio-g);padding:30px 24px;
}
.passos{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap;}
.passo{
  flex:1 1 130px;display:flex;align-items:center;gap:9px;justify-content:center;
  padding:12px 10px;border:1px solid var(--borda);border-radius:var(--raio);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-3);
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.passo span{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  border:1px solid currentColor;display:flex;align-items:center;justify-content:center;
  font-size:.6rem;letter-spacing:0;
}
.passo.is-ativo{border-color:var(--ouro);color:var(--ouro);background:rgba(201,162,77,.07);}
.passo.is-feito{color:var(--texto-2);border-color:var(--borda-ouro);}

.etapa{border:none;margin:0;padding:0;display:none;}
.etapa.is-ativa{display:block;animation:entra .4s ease;}
@keyframes entra{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.campo{display:block;margin-bottom:18px;}
.campo > span{
  display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-2);margin-bottom:8px;
}
.passo-nome{font-style:normal;}
/* Campo-isca anti-spam: fora da tela (não display:none, que alguns robôs detectam). */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.campo > span em{font-family:var(--sans);text-transform:none;letter-spacing:0;color:var(--texto-3);}
.campo input,.campo textarea{
  width:100%;padding:14px 15px;
  background:var(--preto-2);border:1px solid var(--borda);border-radius:var(--raio);
  color:var(--texto);font-family:inherit;font-size:.94rem;
  transition:border-color .3s ease, background .3s ease;
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3);}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--ouro);background:#131318;}
.campo textarea{resize:vertical;min-height:84px;}
.campo-ajuda{font-size:.86rem;color:var(--texto-2);margin:0 0 16px;}

.opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-bottom:6px;}
.opcao{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:13px 15px;background:var(--preto-2);
  border:1px solid var(--borda);border-radius:var(--raio);
  font-size:.88rem;transition:border-color .28s ease, background .28s ease;
}
.opcao:hover{border-color:var(--borda-ouro);}
.opcao input{accent-color:var(--ouro);width:15px;height:15px;flex-shrink:0;}
.opcao:has(input:checked){border-color:var(--ouro);background:rgba(201,162,77,.08);}

.form-acoes{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap;}
.form-acoes .btn{flex:1 1 auto;padding-block:17px;}
.form-erro{color:#e06d6d;font-size:.84rem;margin:14px 0 0;min-height:1.2em;}
.form-nota{font-size:.74rem;color:var(--texto-3);margin:18px 0 0;text-align:center;}

.form-sucesso{
  background:rgba(16,16,20,.84);border:1px solid var(--borda-ouro);
  border-radius:var(--raio-g);padding:36px 28px;text-align:center;
  animation:entra .5s ease;
}
.form-sucesso .selo{justify-content:center;}
.form-sucesso h3{font-size:1.6rem;margin:0 0 12px;}
.form-sucesso p{color:var(--texto-2);margin:0;max-width:30em;margin-inline:auto;}

/* ================= RODAPÉ ================= */
/* Fecha a página com o vocabulário dela: anéis dourados girando ao fundo, a frase da
   marca em destaque, colunas de navegação e a assinatura gigante cortada no pé. */
.rodape{
  --pr:1;
  position:relative;overflow:hidden;isolation:isolate;
  padding:84px 0 28px;
  background:var(--preto-2);
}
/* Filete dourado que some nas pontas, separando do formulário. */
.rodape::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(201,162,77,.55) 50%, transparent 100%);
}
/* Parallax (--pr: 0 quando o rodapé começa a entrar, 1 no fim da página):
   - anéis: começam 160px acima e descem até o lugar, mais devagar que a página;
   - brilho: faz o caminho oposto e cresce um pouco;
   - assinatura gigante: sobe 70px até se encaixar no pé.
   As camadas são maiores que o rodapé (inset negativo) pra não mostrar borda ao andar. */
.rodape-aneis{
  position:absolute;inset:-160px 0 0;z-index:-1;pointer-events:none;opacity:.45;
  transform:translate3d(0, calc((1 - var(--pr)) * -160px), 0);
  will-change:transform;
}
.rodape-brilho{
  position:absolute;z-index:-1;pointer-events:none;
  width:70vw;height:70vw;max-width:1100px;max-height:1100px;right:-18vw;top:-20vw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,77,.13) 0%, rgba(201,162,77,0) 64%);
  transform:translate3d(0, calc((1 - var(--pr)) * 220px), 0) scale(calc(.85 + var(--pr) * .15));
  will-change:transform;
}
.rodape-aneis svg{width:100%;height:100%;overflow:visible;}
.rodape-aneis .anel{animation-duration:220s;}
.rodape-aneis .anel-2{animation-duration:260s;}
.rodape-aneis .anel-3{animation-duration:300s;}

.rodape-topo{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  padding-bottom:48px;border-bottom:1px solid var(--borda);
}
.rodape-citacao{margin:0;}
.rodape-citacao p{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,5vw,3rem);
  line-height:1.14;letter-spacing:-.015em;color:var(--texto);margin:0;max-width:15em;
  text-wrap:balance;
}
.rodape-citacao em{display:block;color:var(--ouro-claro);font-style:italic;}

/* Voltar ao topo: círculo com a seta, que sobe no hover. */
.rodape-subir{
  flex-shrink:0;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--borda-ouro);color:var(--ouro);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.rodape-subir svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease);}
.rodape-subir:hover{background:var(--ouro);border-color:var(--ouro);color:#15110a;}
.rodape-subir:hover svg{transform:translateY(-3px);}

.rodape-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 24px;padding:48px 0 8px;}
.rodape-marca{grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.rodape-marca .marca-img{height:42px;}
.rodape-marca p{margin:0;color:var(--texto-2);font-size:.95rem;max-width:22em;}
.rodape-marca .btn{margin-top:6px;}
.rodape-rotulo{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ouro);margin:0 0 16px;
}
.rodape-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.rodape-links a{
  position:relative;font-size:.92rem;color:var(--texto-2);transition:color .25s ease;
}
.rodape-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ouro);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.rodape-links a:hover{color:var(--texto);}
.rodape-links a:hover::after{transform:scaleX(1);}

/* Assinatura gigante: o nome atravessa a largura, em dourado que se apaga para baixo, e
   é cortado pelo pé da página. */
.rodape-assinatura{
  transform:translate3d(0, calc((1 - var(--pr)) * 70px), 0);
  will-change:transform;
  width:min(92vw, 1500px);aspect-ratio:1200 / 187;margin:44px auto -1.2vw;
  background:linear-gradient(180deg, rgba(224,193,117,.42) 0%, rgba(224,193,117,.12) 55%, rgba(224,193,117,0) 95%);
  -webkit-mask:url(assets/logo-luxegarbo-mascara.png) center / contain no-repeat;
  mask:url(assets/logo-luxegarbo-mascara.png) center / contain no-repeat;
}

.rodape-base{
  position:relative;
  display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--borda);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3);
}
.rodape-base p{margin:0;}
.rodape-base a:hover{color:var(--ouro);}

/* ================= RESPONSIVO ================= */
@media (min-width:720px){
  .celular-corpo{padding:26px 24px 30px;}
  .btn-topo{display:inline-flex;}
  .container.largo{padding:0 20px;}
  .hero{--recuo:20px;}
  .vitrine{padding:80px 48px 52px;}
  .cartao-claro{padding:36px 40px 40px;}
  .formulario{padding:38px 40px;}
}

@media (min-width:960px){
  .secao{padding:130px 0;}
  .topbar{padding-inline:40px;}
  .container{padding:0 40px;}
  .container.largo{padding:0 20px;}
  .secao-clara{--espaco:110px;}
}

/* ---- Desktop ----
   Navegação em linha; hero em duas colunas (título grande à esquerda, texto e chamada à
   direita, os dois apoiados no pé da tela); vitrine e sanfona lado a lado. */
@media (min-width:1024px){
  .nav-topo{display:flex;gap:30px;}
  .btn-topo{display:none;}
  .menu-btn{display:none;}

  .hero-conteudo{
    display:grid;grid-template-columns:1.6fr 1fr;gap:72px;align-items:end;
    max-width:var(--larg-larga);padding-inline:56px;
  }
  .hero-lado{padding-bottom:10px;}

  .vitrine{
    grid-template-columns:1fr 1fr;align-items:center;align-content:center;gap:80px;
    min-height:700px;padding:96px 80px;
  }
  .vitrine-fundo::after{
    background:linear-gradient(90deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.78) 46%, rgba(10,10,12,.62) 100%);
  }

  /* Sanfona: a lista ocupa 44% à esquerda e o corpo do item aberto é posicionado na
     coluna da direita (left/width em % da própria lista: 123% ≈ 54% do cartão). */
  .cartao-claro{padding:64px 64px 52px;}
  .sanfona{position:relative;width:44%;min-height:300px;}
  .sanfona-corpo{
    position:absolute;top:0;left:123%;width:104%;
    grid-template-rows:1fr;
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
  }
  .sanfona-item.is-aberto .sanfona-corpo{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .6s var(--ease) .08s, transform .6s var(--ease) .08s, visibility 0s;
  }
  .sanfona-conteudo{overflow:visible;}
  .sanfona-conteudo > *:last-child{margin-bottom:0;}
  .sanfona-icone{width:40px;height:40px;margin-bottom:26px;}
  .sanfona-titulo{
    display:block;font-family:var(--serif);font-size:clamp(2rem,2.8vw,2.6rem);
    line-height:1.12;letter-spacing:-.01em;color:var(--tinta);margin:0 0 18px;
  }
  .sanfona-texto{font-size:1.1rem;}
  .sanfona-cab{padding:19px 0;}

  .cartao-claro-rodape{
    display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
    margin-top:44px;padding-top:30px;border-top:1px solid var(--linha);
  }
  .cartao-claro-rodape p{margin:0;max-width:30em;}
  .botoes{flex-wrap:nowrap;}

  .final{padding:190px 0 130px;}
  .final > .container{
    display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:start;
    max-width:var(--larg-larga);padding-inline:56px;
  }
  .final-cabeca{position:sticky;top:120px;margin:0;}
  .final-form{max-width:none;}

  .rodape{padding-top:110px;}
  .rodape .container{max-width:var(--larg-larga);padding-inline:56px;}
  .rodape-topo{padding-bottom:64px;}
  .rodape-grade{grid-template-columns:2fr 1fr 1fr;gap:40px;padding:64px 0 12px;}
  .rodape-marca{grid-column:auto;}
}

/* ---- Telas grandes ---- */
@media (min-width:1100px){
  :root{--larg:1280px;--larg-estreita:1280px;}

  .secao{padding:150px 0;}
  .secao-clara{--espaco:120px;}

  .hero h1{font-size:clamp(3.2rem,4.4vw,5.4rem);}
  .hero-texto{font-size:1.14rem;}

  .transicao h2{font-size:clamp(2.3rem,3.2vw,3.2rem);}

  /* Demonstração em três colunas: exemplos | aparelho | índice da análise.
     O aparelho fica no centro, como protagonista; à esquerda a escolha, à direita o
     mapa do que tem dentro e o próximo passo. */
  .demo-palco{
    display:grid;grid-template-columns:minmax(250px,300px) auto minmax(220px,1fr);
    gap:0 56px;align-items:start;margin-top:18px;
  }
  .painel{justify-content:center;}
  /* O aparelho cresce com a tela: 400px em 1100px, ~460px em 1440px e no máximo
     500px. A largura mínima das outras colunas garante que as três caibam em 1100px. */
  .celular{width:clamp(400px,32vw,500px);}
  /* A matéria ocupa ~52% da altura da janela (entre 320 e 640px), o bastante pra ler
     um bloco inteiro sem rolar o aparelho a cada parágrafo. */
  .celular-corpo{max-height:clamp(320px,52svh,640px);}
  #demo{padding:80px 0;}
  
  /* Exemplos viram cartões em coluna, agora com manchete e tempo de leitura. */
  .abas{
    display:flex;flex-direction:column;gap:10px;margin:0;padding:0;
    background:none;border:none;border-radius:0;
  }
  .aba{
    align-items:flex-start;text-align:left;gap:7px;
    padding:18px 20px 18px 22px;border-radius:var(--raio);
    background:var(--preto-3);border:1px solid var(--borda);
    position:relative;overflow:hidden;
    transition:border-color .35s ease, background .35s ease, transform .35s ease;
  }
  /* Filete dourado à esquerda marca o exemplo aberto. */
  .aba::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--ouro);transform:scaleY(0);transform-origin:top;
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .aba:hover{border-color:var(--borda-ouro);transform:translateX(3px);}
  .aba-rotulo{
    font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ouro);font-weight:500;
  }
  .aba-titulo{
    display:block;font-family:var(--serif);font-size:1rem;line-height:1.32;
    color:var(--texto);
  }
  .aba-meta{display:block;font-size:.72rem;color:var(--texto-3);}
  .aba.is-ativa{
    background:linear-gradient(120deg, rgba(201,162,77,.14) 0%, rgba(201,162,77,.03) 100%);
    border-color:var(--borda-ouro);color:var(--texto);box-shadow:none;
  }
  .aba.is-ativa::before{transform:scaleY(1);}
  .aba.is-ativa .aba-rotulo{font-weight:600;}
  
  /* Índice em lista vertical, como um sumário de leitura. */
  .demo-indice{margin-top:0;position:sticky;top:110px;}
  .indice{
    flex-direction:column;gap:0;overflow:visible;margin:0;padding:0;
    border-left:1px solid var(--borda);
  }
  .indice-item{
    width:100%;border:none;border-radius:0;background:none;
    padding:11px 0 11px 18px;margin-left:-1px;
    border-left:2px solid transparent;white-space:normal;text-align:left;font-size:.88rem;
  }
  .indice-item:hover{background:none;color:var(--texto);border-left-color:var(--borda-ouro);}
  .indice-item.is-ativo{background:none;border-left-color:var(--ouro);color:var(--texto);}
}

@media (min-width:1280px){
  .nav-topo{gap:38px;}
  .btn-topo{display:inline-flex;}
}

/* Acima de 1500px o conteúdo para de crescer, mas ganha respiro. */
@media (min-width:1500px){
  :root{--larg:1400px;--larg-estreita:1400px;}
  .secao{padding:170px 0;}
}
@media (max-width:719px){
  .btn{letter-spacing:.12em;padding-inline:18px;}
  .chips{grid-template-columns:1fr;}
  .chip{display:flex;align-items:baseline;gap:8px;text-align:left;}
  .chip strong{margin:0;}
  /* As três etapas sempre numa linha só, mesmo com o rótulo em mono. */
  .passos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
  .passo{padding:10px 4px;gap:6px;font-size:.54rem;letter-spacing:.06em;}
  .passo span{width:16px;height:16px;font-size:.54rem;}
  .aba-rotulo{font-size:.76rem;}
  .celular{border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.55);}
  .form-acoes .btn{flex:1 1 100%;}
  .botoes .btn{flex:1 1 100%;}
  .topbar{padding-inline:18px;}
}

/* SVG só com definições (gradiente dos anéis) na página interna: não ocupa espaço. */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* ================= CAIXA DE ACEITE (formulário) ================= */
.aceite{
  display:flex;align-items:flex-start;gap:12px;margin-top:6px;
  padding:14px 15px;background:var(--preto-2);
  border:1px solid var(--borda);border-radius:var(--raio);
  font-size:.86rem;line-height:1.55;color:var(--texto-2);cursor:pointer;
  transition:border-color .28s ease, background .28s ease;
}
.aceite:hover{border-color:var(--borda-ouro);}
.aceite:has(input:checked){border-color:var(--ouro);background:rgba(201,162,77,.07);color:var(--texto);}
.aceite.is-erro{border-color:#e06d6d;}
.aceite input{accent-color:var(--ouro);width:17px;height:17px;margin:2px 0 0;flex-shrink:0;}
.aceite a,.form-nota a{color:var(--ouro-claro);text-decoration:underline;text-underline-offset:3px;}
.aceite a:hover,.form-nota a:hover{color:var(--ouro);}

/* ================= PÁGINA INTERNA (Política de Privacidade) ================= */
.pagina-topo{
  position:relative;overflow:hidden;isolation:isolate;
  padding:150px 0 72px;background:var(--preto);border-bottom:1px solid var(--borda);
}
.pagina-topo-brilho{
  position:absolute;z-index:-1;width:70vw;height:70vw;max-width:900px;max-height:900px;
  right:-20vw;top:-30vw;border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,77,.16) 0%, rgba(201,162,77,0) 64%);
}
.pagina-topo h1{
  font-size:clamp(2.4rem,7vw,4.4rem);font-weight:400;letter-spacing:-.02em;line-height:1.06;
  margin-bottom:22px;
}
.pagina-topo h1 em{color:var(--ouro-claro);font-style:italic;}
.pagina-topo p{color:var(--texto-2);max-width:38em;margin:0;}
.pagina-topo .atualizacao{
  margin-top:26px;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texto-3);
}

.documento{background:var(--marfim);color:var(--tinta);padding:64px 0 96px;}
.doc-grade{display:grid;gap:36px;}

/* Índice: no celular é um bloco no topo; no desktop fica preso ao lado do texto. */
.doc-indice{
  background:var(--marfim-2);border-radius:var(--raio-g);padding:22px 22px 14px;
  box-shadow:0 20px 50px -34px rgba(23,20,15,.3);
}
.doc-indice-titulo{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ouro-escuro);margin:0 0 10px;
}
.doc-indice ol{columns:2;column-gap:20px;}
.doc-indice li{break-inside:avoid;}
.doc-indice a{
  display:flex;gap:10px;padding:7px 0;font-size:.88rem;color:var(--tinta-2);
  transition:color .25s ease;
}
.doc-indice a span{font-family:var(--mono);font-size:.62rem;color:var(--tinta-3);padding-top:3px;}
.doc-indice a:hover{color:var(--tinta);}

.doc-corpo{max-width:720px;}
.doc-corpo h2{
  font-size:clamp(1.55rem,3.4vw,2.1rem);font-weight:400;letter-spacing:-.01em;line-height:1.2;
  color:var(--tinta);margin:56px 0 16px;scroll-margin-top:96px;
}
.doc-corpo h2 .num{
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;color:var(--ouro-escuro);
}
.doc-corpo p,.doc-corpo li{color:var(--tinta-2);font-size:1rem;line-height:1.75;}
.doc-corpo p{margin:0 0 16px;}
.doc-corpo strong{color:var(--tinta);font-weight:500;}
/* Só links de texto; os botões do fim mantêm o estilo de botão. */
.doc-corpo a:not(.btn){color:var(--ouro-escuro);text-decoration:underline;text-underline-offset:3px;}
.doc-corpo a:not(.btn):hover{color:var(--tinta);}
.doc-corpo ul{margin:0 0 18px;}
.doc-corpo li{position:relative;padding-left:24px;margin-bottom:8px;}
/* Marcador em losango, o mesmo da sanfona. */
.doc-corpo li::before{
  content:'';position:absolute;left:3px;top:.68em;width:7px;height:7px;
  background:var(--ouro-escuro);transform:rotate(45deg);
}
.doc-destaque{
  background:var(--marfim-2);border-left:3px solid var(--ouro);border-radius:0 var(--raio-g) var(--raio-g) 0;
  padding:20px 24px;box-shadow:0 20px 50px -36px rgba(23,20,15,.3);
}
.doc-destaque p{margin:0;color:var(--tinta);}
.doc-voltar{display:flex;flex-wrap:wrap;gap:10px;margin-top:48px;padding-top:32px;border-top:1px solid var(--linha);}

/* ---- Faixa intermediária (1024–1199px) ----
   Logo + menu já ocupam o topo; o resto ainda não tem largura pra duas colunas
   folgadas. O rodapé do cartão da sanfona empilha e a lista de espera fica em uma
   coluna só (em duas, a etapa 3 do formulário caía pra outra linha). */
@media (min-width:1024px) and (max-width:1199px){
  .cartao-claro-rodape{flex-direction:column;align-items:flex-start;gap:24px;}
  .final > .container{display:block;max-width:860px;}
  .final-cabeca{position:static;margin-bottom:44px;}
}

@media (min-width:1024px){
  .pagina-topo{padding:190px 0 96px;}
  .pagina-topo .container,.documento .container{max-width:var(--larg-larga);padding-inline:56px;}
  .documento{padding:96px 0 130px;}
  .doc-grade{grid-template-columns:260px minmax(0,1fr);gap:96px;align-items:start;}
  .doc-indice{position:sticky;top:110px;background:none;box-shadow:none;padding:0;}
  .doc-indice ol{columns:1;border-left:1px solid var(--linha);}
  .doc-indice a{padding:8px 0 8px 18px;margin-left:-1px;border-left:2px solid transparent;transition:color .25s ease, border-color .25s ease;}
  .doc-indice a:hover{border-left-color:var(--ouro);}
  .doc-indice a.is-atual{color:var(--tinta);border-left-color:var(--ouro);}
}

/* ---- Telas estreitas (até 419px) ---- */
@media (max-width:419px){
  /* Título do banner menor: em telas baixas (ex.: 320x640) ele subia até o cabeçalho. */
  .hero h1{font-size:2.15rem;margin-bottom:22px;}
  .hero-texto{margin-bottom:24px;}
  /* Etapas: só a ativa mostra o nome; as outras ficam no número. */
  .passos{display:flex;}
  .passo{flex:0 0 auto;padding-inline:10px;}
  .passo.is-ativo{flex:1 1 auto;}
  .passo:not(.is-ativo) .passo-nome{display:none;}
  /* Selo da transição numa linha só. */
  .transicao .selo-mono{letter-spacing:.14em;padding:12px 16px;font-size:.6rem;}
  .doc-indice ol{columns:1;}
}
/* Telas baixas em geral: a nota do banner sai pra sobrar espaço ao título. */
@media (max-height:680px) and (max-width:719px){
  .hero-nota{display:none;}
}

/* Quem pede menos movimento vê tudo parado: sem palco preso, sem reveal, sem giro. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .anima{opacity:1 !important;transform:none !important;transition:none !important;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .hero{height:auto;}
  .hero-palco{position:relative;}
  .rodape{--pr:1 !important;}
}

/* Sem JavaScript a sanfona não abre: todos os itens aparecem abertos, empilhados. */
.no-js .sanfona{width:auto;min-height:0;}
.no-js .sanfona-corpo{position:static;width:auto;grid-template-rows:1fr;opacity:1;visibility:visible;transform:none;}
.no-js .sanfona-titulo{display:none;}
.no-js .sanfona-conteudo > *:last-child{margin-bottom:24px;}