/* ============================================================
   Lucas Ferrauche · Advisor Financeiro — base do site
   IDENTIDADE V2 (Pepe, 22/09): a peça "Mais controle. Menos
   preocupação." em marca/identidade-v2-referencia.webp.
   Substitui a paleta clara do brand book Edição 01 no site.
   - Fundo quase preto esverdeado; nada de off-white nem areia.
   - Dourado quente (#E2BD8F) para acento, filete e ícone.
   - Manrope para tudo: título forte (600/700) em duas cores,
     rótulo em caixa-alta bem espaçada. Sem fonte mono.
   - Botão em pílula com a seta à esquerda.
   ============================================================ */
:root{
  --fundo:#06120F; --painel:#0A1A16; --rodape:#040D0B;
  --ouro:#E2BD8F; --ouro-claro:#F0D6AE; --ouro-linha:rgba(226,189,143,.32);
  --branco:#F7F5F0; --texto:rgba(247,245,240,.78); --texto-2:rgba(247,245,240,.56);
  --linha:rgba(247,245,240,.12);
  --sans:'Manrope',system-ui,sans-serif;
  --max:1160px; --gut:clamp(16px,5vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fundo);color:var(--texto);font-family:var(--sans);font-weight:400;
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.rotulo{font-weight:500;font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ouro)}
h1,h2,h3{color:var(--branco);font-weight:600;letter-spacing:-.025em;line-height:1.08}
h1 em,h2 em,blockquote em{font-style:normal;color:var(--ouro)}
h2{font-size:clamp(28px,4vw,44px)}
h3{font-size:19px;letter-spacing:-.01em;line-height:1.3}
.regua{display:block;width:72px;height:2px;background:var(--ouro)}

/* Botão — pílula, seta à esquerda, caixa-alta espaçada (a peça) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;padding:0 30px;
     border-radius:999px;border:1px solid var(--ouro);
     font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;
     text-decoration:none;cursor:pointer;white-space:nowrap;
     transition:background .2s,color .2s,border-color .2s}
.btn .seta{order:-1;font-size:18px;letter-spacing:0;line-height:1;color:var(--ouro);transition:transform .2s}
.btn:hover .seta{transform:translateX(3px)}
/* Primário = dourado cheio: só na ação que vende (checkout, conversa). */
.btn-claro{background:var(--ouro);color:var(--fundo)}
.btn-claro .seta{color:var(--fundo)}
.btn-claro:hover{background:var(--ouro-claro);border-color:var(--ouro-claro)}
/* Secundário = contorno dourado, como na peça. */
.btn-linha,.btn-verde{background:transparent;color:var(--branco)}
.btn-linha:hover,.btn-verde:hover{background:rgba(226,189,143,.08)}

/* Topo — monograma | filete | assinatura em texto (nítida em qualquer tela) */
header{background:rgba(6,18,15,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
       border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:20}
header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:24px}
.assin{display:flex;align-items:center;gap:18px;text-decoration:none;color:var(--branco);flex-shrink:0}
.assin img{width:38px;height:auto}
.assin > div{border-left:1px solid var(--ouro-linha);padding-left:18px}
.assin .nome{font-weight:400;font-size:13px;letter-spacing:.3em;text-transform:uppercase;line-height:1.2}
.assin .desc{font-size:9.5px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--ouro);margin-top:5px}
nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:flex-end}
nav a{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
     color:var(--texto-2);text-decoration:none;white-space:nowrap}
nav a:hover,nav a[aria-current]{color:var(--branco)}
nav a.cta{color:var(--ouro);border:1px solid var(--ouro-linha);border-radius:999px;padding:9px 16px}
nav a.cta:hover{border-color:var(--ouro)}

/* Hero — a luz quente da janela vira um brilho no canto */
.hero{color:var(--branco);padding:clamp(56px,9vw,120px) 0 clamp(56px,8vw,100px);
      background:radial-gradient(55% 70% at 88% 0%,rgba(226,189,143,.13),transparent 62%),var(--fundo)}
.hero h1{font-weight:700;font-size:clamp(38px,4.6vw,60px);letter-spacing:-.035em;line-height:1.02;margin:22px 0 28px}
.hero .regua{margin-bottom:26px}
.hero p.lead{font-size:clamp(17px,1.8vw,19px);max-width:34em;color:var(--texto)}
.hero .sub{font-size:13px;font-weight:400;letter-spacing:.3em;line-height:1.95;text-transform:uppercase;
           color:rgba(247,245,240,.84);max-width:30em}
.hero .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}

/* Cabeçalho de seção — numeração sempre visível */
section{padding:clamp(64px,9vw,116px) 0}
.cab{display:grid;grid-template-columns:120px 1fr;gap:24px;margin-bottom:clamp(36px,5vw,56px);
     border-top:1px solid var(--linha);padding-top:24px}
.cab .num{font-weight:300;font-size:14px;color:var(--ouro);letter-spacing:.2em}
.cab .rotulo{margin-bottom:14px;display:block}
.cab p{max-width:40em;margin-top:16px}

/* Três colunas */
.cols{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linha)}
.cols > div{padding:30px 28px 30px 0;border-right:1px solid var(--linha)}
.cols > div + div{padding-left:28px}
.cols > div:last-child{border-right:0}
.cols .n{font-weight:300;font-size:34px;line-height:1;color:var(--ouro);display:block;margin-bottom:20px}
.cols h3{margin-bottom:10px}

/* Faixa alternada — um tom acima do fundo, nunca claro */
.painel{background:var(--painel);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}

/* Passos numerados */
.passos{list-style:none}
.passos li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--linha)}
.passos li:last-child{border-bottom:1px solid var(--linha)}
.passos .n{font-weight:500;font-size:11.5px;color:var(--ouro);letter-spacing:.24em;padding-top:5px}
.passos h3{margin-bottom:6px}

/* Pares (pacotes, portas) */
.par{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linha);background:rgba(247,245,240,.015)}
.par > div{padding:34px;display:flex;flex-direction:column;gap:14px}
.par > div + div{border-left:1px solid var(--linha)}
.par .faixa{font-weight:300;font-size:30px;letter-spacing:-.01em;color:var(--branco);
     border-left:2px solid var(--ouro);padding-left:16px;margin:6px 0 0}
.par .per{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--texto-2)}
.par p{flex:1}
.par ul{list-style:none;font-size:15px}
.par li{padding:10px 0;border-top:1px solid var(--linha)}
.par .btn{align-self:flex-start;margin-top:8px}

/* Tabela de preço */
table{width:100%;border-collapse:collapse;font-size:15px}
th{font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
   text-align:left;color:var(--texto-2);padding:0 0 14px;border-bottom:1px solid var(--linha)}
td{padding:15px 12px 15px 0;border-bottom:1px solid var(--linha);vertical-align:top;color:var(--branco)}
td:last-child{padding-right:0;font-weight:300;white-space:nowrap;text-align:right}
th:last-child{text-align:right}
td .sub{font-size:14px;color:var(--texto-2)}

/* Transparência */
.nao{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linha)}
.nao > div{padding:28px 28px 28px 0;border-bottom:1px solid var(--linha)}
.nao > div:nth-child(2n){padding-left:28px;border-left:1px solid var(--linha)}
.nao .n{font-size:12px;font-weight:500;color:var(--ouro);letter-spacing:.2em;display:block;margin-bottom:10px}
.nao h3{margin-bottom:6px}

/* Manifesto + CTA final */
.final{background:radial-gradient(60% 90% at 0% 100%,rgba(226,189,143,.10),transparent 60%),var(--painel);
       border-top:1px solid var(--linha);color:var(--branco)}
.final .grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.final img{width:clamp(84px,11vw,128px)}
.final blockquote{font-weight:600;font-size:clamp(26px,3.6vw,42px);letter-spacing:-.025em;line-height:1.18;max-width:22em}
.final .rotulo{display:block;margin-bottom:20px}
.final .acao{margin-top:38px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.final .acao > span{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-2)}
.mail{font-size:14px;letter-spacing:.04em;color:var(--ouro);text-decoration:none;border-bottom:1px solid var(--ouro-linha)}
.mail:hover{border-color:var(--ouro)}

/* FAQ */
details{border-top:1px solid var(--linha);padding:24px 0}
details:last-of-type{border-bottom:1px solid var(--linha)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
        font-size:18px;font-weight:500;color:var(--branco)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-weight:300;font-size:22px;line-height:1;color:var(--ouro)}
details[open] summary::after{content:'\2212'}
details p{margin-top:12px;max-width:44em}
details a{color:var(--ouro);text-decoration:none;border-bottom:1px solid var(--ouro-linha)}

footer{background:var(--rodape);color:var(--texto-2);border-top:1px solid var(--linha);padding:30px 0}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;
             font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
footer nav{gap:20px}
/* "Site por Pepe" (23/09): leva à página de autor dele no site da Vinteo. */
footer .credito a{color:var(--ouro);text-decoration:none}
footer .credito a:hover{border-bottom:1px solid var(--ouro-linha)}
/* Linha de parceria (Vinteo, 23/09): link com motivo no texto, não rodapé. */
.parceria{margin-top:28px;font-size:15px;color:var(--texto)}
.parceria a{color:var(--ouro);text-decoration:none;border-bottom:1px solid var(--ouro-linha)}

@media (max-width:860px){
  header .wrap{flex-wrap:wrap;padding-top:14px;padding-bottom:14px;min-height:0}
  nav{width:100%;justify-content:flex-start;gap:18px}
  nav a.so-desktop{display:none}
  .cab,.passos li{grid-template-columns:1fr;gap:8px}
  .cols,.par,.nao,.final .grid{grid-template-columns:1fr}
  .cols > div,.cols > div + div{padding:26px 0;border-right:0;border-bottom:1px solid var(--linha)}
  .par > div{padding:26px}
  .par > div + div{border-left:0;border-top:1px solid var(--linha)}
  .nao > div,.nao > div:nth-child(2n){padding:24px 0;border-left:0}
  td:last-child{white-space:normal}
  .btn{white-space:normal;text-align:center;font-size:11.5px;letter-spacing:.14em;gap:12px;padding:0 18px}
  footer .wrap{flex-direction:column;align-items:flex-start}
}

/* WhatsApp — o contato do fim das páginas (pedido do Lucas, 22/09) */
.whats{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.04em;color:var(--ouro);
       text-decoration:none;border-bottom:1px solid var(--ouro-linha);padding-bottom:3px}
.whats svg{width:22px;height:22px;flex-shrink:0}
.whats:hover{border-color:var(--ouro)}
.final .acao.contato{margin-top:22px}