@font-face{font-family:"Alegreya";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/alegreya-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/alegreya-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/alegreya-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/alegreya-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/alegreya-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/alegreya-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/alegreya-sans-latin-700-normal.woff2) format("woff2")}

:root{
  --grafite:#22262C; --nevoa:#5F6670; --papel:#FCFCFA; --branco:#FFFFFF;
  --pauta:#C3D2E3; --pauta-forte:#9DB3CC; --caneta:#2E4D7B; --caneta-claro:#E8EEF6;
  --zap:#1F7A4D; --zap-escuro:#18633E;
  --rule:32px; --margem:clamp(44px,10vw,128px);
  --serif:"Alegreya", Georgia, serif;
  --sans:"Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--grafite);font-family:var(--serif);font-size:19px;line-height:1.62;font-variant-numeric:oldstyle-nums proportional-nums;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%;height:auto}
p{margin:0 0 .85em}
a{color:var(--caneta)}
:focus-visible{outline:2px solid var(--caneta);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--branco);padding:8px 12px;z-index:40}
.skip:focus{left:12px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.col{max-width:680px}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.2;text-decoration:none;
  padding:14px 22px;border-radius:999px;background:var(--zap);color:#fff;font-variant-numeric:lining-nums}
.btn:hover{background:var(--zap-escuro)}
.btn svg{width:22px;height:22px;flex:none}
.link{font-family:var(--sans);font-weight:500;font-size:17px}

/* topo */
.top{background:var(--papel);border-bottom:1px solid var(--pauta-forte);position:relative;z-index:5}
.top .bar{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px;padding:0 32px 0 var(--margem)}
.brand{font-family:var(--sans);font-weight:500;font-size:16px;color:var(--caneta);text-decoration:none;white-space:nowrap}
.top nav{display:flex;gap:22px;font-family:var(--sans);font-size:16px}
.top nav a{color:var(--grafite);text-decoration:none;white-space:nowrap}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--caneta);text-decoration:underline;text-underline-offset:4px}

/* hero: página de caderno */
.ruled{background-color:var(--papel);
  background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule) - 1px), var(--pauta) calc(var(--rule) - 1px), var(--pauta) var(--rule));}
.hero{position:relative;overflow:hidden;background-position:0 20px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:min(86vh,740px)}
.hero::before,.contact::before{content:"";position:absolute;left:clamp(20px,5vw,64px);top:0;bottom:0;width:1.5px;background:var(--pauta-forte)}
.hero-text{position:relative;padding:72px 32px 72px var(--margem);display:flex;flex-direction:column;justify-content:center}
.kicker{font-family:var(--sans);font-weight:500;font-size:18px;color:var(--caneta);margin:0 0 14px;line-height:var(--rule)}
.hero h1{font-weight:500;font-size:clamp(48px,7.4vw,88px);line-height:.98;letter-spacing:-.015em;margin:0 0 20px}
.hero h1 span{display:block}
.hero .sub{font-style:italic;font-size:clamp(23px,2.7vw,30px);line-height:1.25;margin:0 0 18px;max-width:20em}
.hero .lead{font-size:20px;line-height:var(--rule);max-width:26em;margin:0 0 30px}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.hero figure{margin:0;position:relative;min-height:100%}
.hero figure img,.hero figure video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 28%}
.hero .art{display:flex;align-items:center;justify-content:center;padding:48px 40px;background:var(--branco);border-left:1px solid var(--pauta)}
.hero .art svg{width:100%;max-width:460px}

/* seções */
section{padding:88px 0 8px}
h2{font-weight:500;font-size:clamp(32px,4vw,42px);line-height:1.12;letter-spacing:-.01em;margin:0}
.h2-rule{height:2px;width:72px;background:var(--caneta);margin:16px 0 30px;border:0}
h3{font-weight:700;font-size:21px;line-height:1.3;margin:0 0 6px}
.lead-p{font-size:21px;line-height:1.55}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:start}
figcaption{font-family:var(--sans);font-size:15px;color:var(--nevoa);margin-top:8px}
.clip{margin:0}
.clip video,.clip img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#ddd}
.clip.tall video{aspect-ratio:9/16;max-height:620px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* instrumentos (página inicial) */
.instruments{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--caneta)}
.instruments li{border-bottom:1px solid var(--pauta)}
.instruments li + li{border-left:1px solid var(--pauta)}
.instruments a{display:flex;flex-direction:column;height:100%;padding:24px 24px 26px;text-decoration:none;color:var(--grafite)}
.instruments a:hover{background:var(--branco)}
.instruments a:hover .go{text-decoration:underline}
.instruments .name{font-size:34px;font-weight:500;line-height:1.1;margin:0 0 6px}
.instruments .desc{font-family:var(--sans);font-size:17px;color:var(--nevoa);line-height:1.45;margin:0 0 18px}
.instruments .mini{height:200px;display:flex;align-items:center;justify-content:center;margin:0 0 16px;background:var(--branco);border:1px solid var(--pauta)}
.instruments .mini svg{height:184px;width:auto;max-width:100%}
.instruments .go{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--caneta);margin-top:auto}
.instruments-note{font-family:var(--sans);font-size:16px;color:var(--nevoa);margin-top:14px}

/* passos / trilha */
.steps{list-style:none;padding:0;margin:0;counter-reset:passo;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 48px;max-width:920px}
.steps li{counter-increment:passo;position:relative;padding:0 0 22px 58px}
.steps li::before{content:counter(passo);position:absolute;left:0;top:-1px;width:38px;height:38px;border:1.5px solid var(--caneta);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:500;font-size:17px;color:var(--caneta);font-variant-numeric:lining-nums}
.steps strong{display:block;font-size:19px}
.steps span{font-size:17px;line-height:1.5;display:block}
.note{font-family:var(--sans);font-size:16px;color:var(--nevoa)}

/* fatos */
.facts{margin:0;display:grid;grid-template-columns:200px minmax(0,1fr);font-family:var(--sans);font-size:18px;line-height:1.45;max-width:780px}
.facts dt{font-weight:700;padding:12px 16px 12px 0;border-bottom:1px solid var(--pauta)}
.facts dd{margin:0;padding:12px 0;border-bottom:1px solid var(--pauta)}
.needs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:0;border-top:1.5px solid var(--caneta);max-width:920px}
.needs li{padding:16px 18px 16px 0;border-bottom:1px solid var(--pauta);font-family:var(--sans);font-size:17px;line-height:1.4}
.needs b{display:block;font-family:var(--serif);font-size:20px;font-weight:700;margin-bottom:2px}
.forwho{max-width:760px;padding-left:1.1em}
.forwho li{margin:0 0 .5em}

/* método */
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;margin:0 0 48px;max-width:860px}
.pillars h3{font-size:22px}
.pillars p{margin:0;font-size:18px}
.sheet-box{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px;align-items:center;background:var(--branco);border:1px solid var(--pauta);padding:36px}
.sheet-box h3{font-size:24px;font-weight:500;margin-bottom:10px}
.sheet-box p{font-size:18px}
.sheet-box figure{margin:0}
.sheet-box .strum{margin-top:22px;padding-top:18px;border-top:1px solid var(--pauta)}

/* investimento */
.price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px;border-top:1.5px solid var(--caneta);margin:0 0 20px}
.price div{padding:22px 24px 22px 0;border-bottom:1px solid var(--pauta)}
.price div + div{padding-left:24px;border-left:1px solid var(--pauta)}
.price .what{font-family:var(--sans);font-weight:500;font-size:17px;color:var(--nevoa);display:block}
.price .val{font-size:44px;font-weight:500;line-height:1.1;font-variant-numeric:lining-nums;display:block;margin:4px 0}
.price .how{font-family:var(--sans);font-size:16px;color:var(--nevoa);display:block}
.terms{font-size:18px;max-width:780px}

/* perguntas */
.faq{max-width:820px;border-top:1.5px solid var(--caneta)}
.faq details{border-bottom:1px solid var(--pauta)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:700;font-size:20px;line-height:1.35;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-family:var(--sans);font-weight:400;font-size:28px;color:var(--caneta)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;font-size:18px;max-width:700px}

/* outros instrumentos */
.also{display:flex;flex-wrap:wrap;gap:12px 28px;font-family:var(--sans);font-size:18px;margin:0}
.also a{font-weight:500}

/* contato: fecha o caderno */
.contact{margin-top:88px;padding:88px 0 96px;position:relative;background-position:0 0}
.contact .wrap{padding-left:var(--margem);max-width:none}
.contact h2{font-size:clamp(36px,5vw,54px)}
.contact .lead-p{line-height:var(--rule);max-width:28em;margin:20px 0 30px}
.contact .where{font-family:var(--sans);font-size:17px;line-height:var(--rule);color:var(--nevoa);margin:28px 0 0}
.contact .where b{color:var(--grafite);font-weight:500}
.privacy{font-family:var(--sans);font-size:15px;color:var(--nevoa);max-width:40em;margin:20px 0 0;line-height:1.5}

footer{font-family:var(--sans);font-size:15px;color:var(--nevoa);border-top:1px solid var(--pauta);padding:22px 0 28px}
footer .wrap{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--nevoa)}

.mobile-cta{display:none}

@media (max-width:900px){
  body{font-size:18px}
  .top .bar{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 20px 10px 52px}
  .top nav{gap:18px;overflow-x:auto;max-width:100%;padding-bottom:2px;font-size:15.5px}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-text{padding:40px 22px 36px 52px}
  .hero figure{height:min(100vw,480px);min-height:0}
  .hero figure.art{height:auto;min-height:0;border-left:0;border-top:1px solid var(--pauta);padding:28px 20px}
  .hero .art svg{max-width:400px}
  .split,.sheet-box{grid-template-columns:1fr;gap:28px}
  .sheet-box{padding:22px}
  .sheet-box figure{overflow-x:auto;margin:0 -22px;padding:0 22px}
  .sheet-box figure svg{min-width:480px}
  .instruments{grid-template-columns:1fr}
  .instruments li + li{border-left:0}
  .instruments a{padding:22px 0}
  .facts{grid-template-columns:1fr}
  .facts dt{border-bottom:0;padding-bottom:0}
  .pillars,.steps{grid-template-columns:1fr}
  .price{grid-template-columns:1fr}
  .price div + div{padding-left:0;border-left:0}
  section{padding-top:64px}
  .contact{padding:64px 0 72px;margin-top:64px}
  .contact .wrap{padding-left:52px}
  .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(252,252,250,.96);border-top:1px solid var(--pauta)}
  .mobile-cta .btn{width:100%;justify-content:center}
  body{padding-bottom:84px}
}

/* sobre o instrumento / por onde começar */
.facts.parts{grid-template-columns:170px minmax(0,1fr);font-size:17px;align-self:start;border-top:1.5px solid var(--caneta);margin-top:8px}
.steps.one{grid-template-columns:1fr;max-width:none}
.buy{background:var(--branco);border:1px solid var(--pauta);padding:28px 30px 12px;align-self:start;margin-top:8px}
.buy h3{margin-bottom:14px}
.buy .forwho{font-size:17px;padding-left:1.1em;margin:0}
@media (max-width:900px){
  .facts.parts{grid-template-columns:1fr}
  .buy{padding:22px 20px 8px}
}