/* ============================================================
   @pvbarbosa — design system de landing (marca pessoal PV)
   Paleta cobre/creme/dark quente · JetBrains Mono (estrutura) + Inter (corpo) + Fraunces itálica (wordmark/serifa)
   Web adota Inter no corpo (igual Proxiz v5); Inconsolata só nos posts/slides.
   Fonte da verdade da marca: marketing/marca/pvbarbosa/pvbarbosa-design-guide.md
   ============================================================ */

/* Fraunces da MARCA (instância com o eixo wonk — a "tombadinha" no b do barbosa).
   É a mesma ttf do brandbook/renderer PDF, NÃO a do Google Fonts (que vem sem wonk). */
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/Fraunces-Italic.ttf') format('truetype');
}

:root{
  --void:#120F0D;        /* dark principal (nunca #000) */
  --dark-alt:#1C1612;    /* dark alternativo */
  --creme:#EDE8DF;       /* claro principal */
  --creme-alt:#E4DDD3;   /* claro alternativo */
  --cobre:#B8885A;       /* acento */
  --cobre-soft:rgba(184,136,90,.42);
  --creme-text:#F0E8DC;  /* texto sobre dark */
  --proxiz-blue:#0633FE; /* SÓ menção à Proxiz */
  --muted:#9c8a76;       /* texto secundário sobre dark */
  --muted-light:#8a7a68; /* texto secundário sobre creme */
  --line:rgba(184,136,90,.22);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--void); color:var(--creme-text);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- wordmark @pv barbosa ---------- */
.wm{font-family:'JetBrains Mono',monospace;line-height:1;white-space:nowrap;text-transform:none;display:inline-flex;align-items:baseline}
.wm .at{font-weight:300;font-size:1em;color:var(--cobre-soft)}
.wm .pv{font-weight:800;font-size:1em;letter-spacing:-.1em;color:var(--cobre)}
.wm .br{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:1.32em;color:var(--creme-text);margin-left:2px}

/* ---------- top bar (sticky) ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(18,15,13,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.topbar .wm{font-size:19px}
.topbar .meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px}
.topbar .meta .dot{color:var(--cobre)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;letter-spacing:.02em;padding:15px 28px;border-radius:6px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border:1px solid transparent}
.btn-cobre{background:var(--cobre);color:var(--void);box-shadow:0 8px 30px rgba(184,136,90,.28)}
.btn-cobre:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(184,136,90,.4)}
.btn-ghost{background:transparent;color:var(--creme-text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cobre);color:var(--cobre)}
.btn-lg{padding:18px 36px;font-size:15px}
.btn-sm{padding:10px 18px;font-size:12px}

/* ---------- sections ---------- */
.section{padding:104px 0}
.section.tight{padding:72px 0}
.section.dark{background:var(--void)}
.section.darkalt{background:var(--dark-alt)}
.section.creme{background:var(--creme);color:var(--void)}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--cobre);margin-bottom:22px}
.section.creme .eyebrow{color:#8a5e34}
h1,h2,h3{font-family:'JetBrains Mono',monospace;font-weight:800;letter-spacing:-.02em;line-height:1.06}
h1{font-size:clamp(38px,6.2vw,72px)}
h2{font-size:clamp(30px,4.6vw,52px)}
h3{font-size:clamp(20px,2.4vw,27px)}
.serif{font-family:'Fraunces',serif;font-style:italic;font-weight:400;color:var(--cobre)}
.lead{font-family:'Inter',sans-serif;font-size:clamp(18px,2.1vw,22px);line-height:1.55;color:#d9cdbd;max-width:780px}
.section.creme .lead{color:#4a3f33}
.cobre-rule{width:96px;height:4px;background:var(--cobre);border-radius:3px;margin:30px 0}

/* ---------- hero (foto do PV ao fundo, pessoa à direita) ---------- */
.hero{position:relative;min-height:660px;display:flex;align-items:center;padding:88px 0;
  background:
    linear-gradient(90deg, var(--void) 0%, var(--void) 26%, rgba(18,15,13,.80) 46%, rgba(18,15,13,.28) 70%, rgba(18,15,13,0) 100%),
    url('hero.jpg');
  background-size:cover, cover;
  background-position:center, right center;
  background-repeat:no-repeat;}
.hero .container{position:relative;z-index:2}
.hero .eyebrow,.hero h1,.hero .lead,.hero-ctas{max-width:600px}
.hero .when-row{max-width:640px}
@media(max-width:820px){
  .hero{min-height:0;padding:0 0 56px;align-items:stretch;
    background:
      linear-gradient(180deg, rgba(18,15,13,.30) 0%, rgba(18,15,13,.72) 52%, var(--void) 82%),
      url('hero.jpg');
    background-size:cover,cover; background-position:top right, top right;}
  .hero .container{padding-top:330px}
}
.hero .eyebrow{margin-bottom:26px}
.hero h1{margin-bottom:26px}
.hero .lead{margin-bottom:34px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero-ctas .note{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.04em}
.when-row{display:flex;flex-wrap:wrap;gap:36px;margin-top:42px;padding-top:30px;border-top:1px solid var(--line)}
.when-item .k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cobre);margin-bottom:5px}
.when-item .v{font-size:19px;color:var(--creme-text)}

/* ---------- VSL ---------- */
.vsl-wrap{max-width:880px;margin:0 auto;text-align:center}
.vsl-label{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cobre);margin-bottom:14px}
.vsl-sub{color:var(--muted);margin-bottom:30px}
.vsl-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--dark-alt);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vsl-frame iframe,.vsl-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vsl-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(135deg,#1C1612,#120F0D);color:var(--muted)}
.vsl-placeholder .play{width:78px;height:78px;border-radius:50%;background:var(--cobre);display:flex;align-items:center;justify-content:center}
.vsl-placeholder .play svg{width:28px;height:28px;fill:var(--void);margin-left:4px}
.vsl-placeholder small{font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.vsl-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;display:block;
  background:url('vsl-cover.jpg') center/cover no-repeat;transition:filter .2s ease,transform .2s ease}
.vsl-poster:hover{filter:brightness(1.06)}
.vsl-poster:active{transform:scale(.997)}

/* ---------- marquee ---------- */
.marquee{background:var(--dark-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:18px 0}
.marquee .track{display:flex;gap:38px;white-space:nowrap;animation:scroll 28s linear infinite;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.marquee .track span{display:inline-flex;align-items:center;gap:38px}
.marquee .track b{color:var(--cobre);font-weight:700}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- feature/learn grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:48px}
.card{background:var(--dark-alt);border:1px solid var(--line);border-radius:12px;padding:30px;transition:border-color .2s ease,transform .2s ease}
.card:hover{border-color:var(--cobre);transform:translateY(-3px)}
.card .num{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cobre);margin-bottom:14px}
.card h3{margin-bottom:10px;font-size:20px}
.card p{color:#cabba9;font-size:16px}
.section.creme .card{background:#fff;border-color:rgba(140,94,52,.18)}
.section.creme .card p{color:#5a4d3f}

/* ---------- manifesto ---------- */
.manifesto{max-width:840px}
.manifesto p{font-size:clamp(19px,2.2vw,24px);line-height:1.6;color:#d9cdbd;margin-bottom:20px}
.manifesto .big{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:clamp(26px,3.6vw,40px);line-height:1.15;color:var(--creme-text);letter-spacing:-.02em;margin-bottom:28px}
.manifesto em{color:var(--cobre);font-style:normal}

/* ---------- bio / quem conduz ---------- */
.bio{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center}
.bio img{border-radius:14px;border:1px solid var(--line)}
.bio .body p{font-size:17px;line-height:1.6;color:#d9cdbd;margin-bottom:16px}
@media(max-width:720px){.bio{grid-template-columns:1fr}}

/* ---------- price ---------- */
.price{max-width:560px;margin:40px auto 0;background:var(--dark-alt);border:1px solid var(--cobre);border-radius:16px;padding:44px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.price .badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cobre);border:1px solid var(--line);padding:7px 14px;border-radius:30px;margin-bottom:22px}
.price .big{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:clamp(56px,10vw,84px);line-height:1;color:var(--creme-text)}
.price .per{font-family:'Inter',sans-serif;font-size:18px;color:var(--muted)}
.price .sub{color:var(--muted);margin:10px 0 26px;font-size:15px}
.price ul{list-style:none;text-align:left;margin:0 0 28px;display:grid;gap:12px}
.price li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:#d9cdbd}
.price li svg{flex:0 0 auto;width:22px;height:22px;margin-top:1px}
.price .foot{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-top:18px;letter-spacing:.04em}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:44px auto 0}
.faq-item{border-bottom:1px solid var(--line);cursor:pointer}
.faq-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0}
.faq-q{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:18px}
.faq-toggle{color:var(--cobre);font-size:24px;flex:0 0 auto}
.faq-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-body{max-height:400px}
.faq-a{padding:0 0 24px;color:#cabba9;font-size:16px;line-height:1.6;max-width:720px}

/* ---------- footer ---------- */
footer{background:var(--void);border-top:1px solid var(--line);padding:56px 0 40px}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:flex-end}
.footer-top .wm{font-size:24px}
.footer-top p{color:var(--muted);font-size:14px;margin-top:10px;max-width:340px}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.footer-bottom .site{color:var(--cobre);font-weight:700;text-transform:lowercase}

/* ---------- proxiz mention ---------- */
.proxiz{color:var(--proxiz-blue);font-weight:700}

@media(max-width:640px){
  .section{padding:72px 0}
  .when-row{gap:24px}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
}