/* =========================================================================
   VOAGIO — sistema de design "Sol Místico"
   Direção travada: sol / lua / borboleta / cobra · ferrugem + marinho + sépia
   Regras completas e proibições anti-slop em DESIGN-SYSTEM.md
   ========================================================================= */

/* ---------- 1. tipografia (self-hosted, funciona em qualquer aparelho) ---- */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces.woff2) format("woff2");
  font-weight:300 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-italic.woff2) format("woff2");
  font-weight:300 900;font-style:italic;font-display:swap;}
@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");
  font-weight:300 900;font-stretch:62% 125%;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Mono";src:url(fonts/spacemono.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Voagio Marker";src:url(fonts/marker.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}

/* ---------- 2. tokens ----------------------------------------------------- */
:root{
  /* cor */
  --paper:#f3e7d2; --paper-2:#eadfc4; --cream-white:#fbf5e7;
  --sepia:#7a5230; --navy:#1e3a52; --rust:#c4522a; --rust-deep:#a8421f;

  --bg:var(--paper); --surface:var(--cream-white); --surface-2:var(--paper-2);
  --text:var(--navy); --text-dim:rgba(30,58,82,.66);
  --accent:var(--rust); --accent-2:var(--navy); --mystic:var(--sepia);
  --line:rgba(30,58,82,.18); --line-strong:rgba(30,58,82,.38);

  /* tipo */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono","Courier New",monospace;
  --font-hand:"Voagio Marker","Bradley Hand",cursive;

  /* escala com saltos reais — nada de degraus de 1,1x */
  --t-hero:clamp(1.95rem,3.5vw,3.2rem);
  --t-h1:clamp(2.1rem,4.6vw,3.6rem);
  --t-h2:clamp(1.6rem,3vw,2.4rem);
  --t-h3:1.15rem;
  --t-body:1.02rem;
  --t-small:.88rem;
  --t-label:.7rem;

  /* espaço */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --edge:clamp(20px,5vw,56px);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.62;
  font-variation-settings:"wght" 400,"wdth" 100;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* granulado de papel — o site tem que parecer impresso, não renderizado */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;text-wrap:balance;}
p{margin:0;}

/* ---------- 3. vozes tipográficas ---------------------------------------- */
/* display: Fraunces com WONK ligado — é o que dá o desenho "gordinho" e torto */
.disp{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-variation-settings:"opsz" 120,"SOFT" 30,"WONK" 1,"wght" 800;
  letter-spacing:-.012em; line-height:1.02; text-wrap:balance;
}
/* caps grossas condensadas: a voz de "declaração" sobre foto */
.chunky{
  font-family:var(--font-body); text-transform:uppercase; font-weight:900;
  font-variation-settings:"wght" 880,"wdth" 84; letter-spacing:-.008em; line-height:.94;
}
.marker{font-family:var(--font-hand);font-weight:400;letter-spacing:.005em;line-height:1.25;}
.label{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.2em;
  font-size:var(--t-label); color:var(--text-dim); display:inline-block;
}
.mono{font-family:var(--font-mono);}
.lead{font-size:1.1rem;color:var(--text-dim);max-width:58ch;}

/* ---------- 4. estrutura -------------------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--edge);}
.wrap.wide{max-width:1400px;}
.wrap.narrow{max-width:720px;}
.section{padding:clamp(56px,8vw,var(--s9)) 0;}
.section.tight{padding:clamp(32px,4.5vw,var(--s7)) 0;}
.section.rust{background:var(--rust);color:var(--cream-white);
  --text:var(--cream-white);--text-dim:rgba(251,245,231,.82);
  --line:rgba(251,245,231,.3);--line-strong:rgba(251,245,231,.5);--accent:var(--cream-white);}
.section.rust .label{color:rgba(251,245,231,.72);}
.section.rust .lead{color:rgba(251,245,231,.84);}
.section.cream{background:var(--surface);}
.section.sand{background:var(--surface-2);}
.section.navy{background:var(--navy);color:var(--paper);
  --text:var(--paper);--text-dim:rgba(243,231,210,.78);
  --line:rgba(243,231,210,.24);--line-strong:rgba(243,231,210,.42);--accent:#E8845A;}
.section.navy .label{color:rgba(243,231,210,.66);}
.section.navy .lead{color:rgba(243,231,210,.8);}
.rule{height:1px;background:var(--line);border:0;margin:0;}

/* cabeçalho de seção: rótulo mono + título display, sempre nessa ordem */
.head{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--s6);}
.head h2{font-size:var(--t-h2);}
.head .lead{margin-top:2px;}

/* ---------- 5. navegação -------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:14px var(--edge);max-width:1400px;margin:0 auto;}
.nav .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);
  font-weight:900;font-variation-settings:"opsz" 96,"SOFT" 20,"WONK" 1,"wght" 900;
  text-transform:uppercase;letter-spacing:.005em;font-size:1.3rem;}
.nav .brand svg{width:32px;height:32px;flex:none;}
.nav .links{display:flex;gap:24px;font-size:.95rem;}
.nav .links a{color:var(--text);font-variation-settings:"wght" 600,"wdth" 96;
  padding-bottom:3px;border-bottom:2px solid transparent;transition:color .12s ease;}
.nav .links a.on{color:var(--accent);border-bottom-color:var(--accent);}
.nav .links a.cta{color:var(--rust);border:1.5px solid var(--rust);padding:6px 14px;
  border-bottom-width:1.5px;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;}
.nav .links a.cta:hover{background:var(--rust);color:var(--cream-white);}
.nav .links a:hover{color:var(--accent);}
.nav-toggle{display:none;}
@media (max-width:820px){
  .nav .links{position:fixed;inset:60px 0 0 0;background:var(--bg);flex-direction:column;gap:0;
    padding:8px var(--edge);transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .16s ease,transform .16s ease;overflow-y:auto;}
  .nav .links.open{opacity:1;transform:translateY(0);pointer-events:auto;}
  .nav .links a{padding:16px 0;border-bottom:1px solid var(--line);font-size:1.12rem;}
  .nav .links a.cta{margin:14px 0;text-align:center;font-size:.8rem;padding:14px;}
  .nav-toggle{display:block;background:var(--rust);border:1.5px solid var(--rust);
    width:46px;height:40px;font-size:1.25rem;color:var(--cream-white);cursor:pointer;}
}

/* ---------- 6. botões (impressos: sombra dura, sem raio, sem brilho) ------ */
.btn{
  display:inline-block;padding:13px 26px;border:1.5px solid currentColor;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn.solid{background:var(--accent);color:var(--cream-white);border-color:var(--accent);
  box-shadow:5px 5px 0 var(--navy);}
.btn.solid:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--navy);}
.btn.outline{color:var(--text);border-color:var(--line-strong);}
.btn.outline:hover{border-color:var(--accent);color:var(--accent);}
.btn.on-rust{color:var(--cream-white);border-color:var(--cream-white);}
.btn.on-rust.solid{background:var(--cream-white);color:var(--rust);box-shadow:5px 5px 0 var(--navy);}
.btn.on-rust:hover{transform:translate(2px,2px);}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* ---------- 7. tratamento de foto ---------------------------------------- */
/* leve de propósito: as fotos da Gio são o ativo, não o fundo */
.photo{position:relative;overflow:hidden;background:var(--surface-2);}
.photo img{width:100%;height:100%;object-fit:cover;
  filter:sepia(.13) saturate(1.06) contrast(1.03) brightness(.99);}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(165deg,rgba(196,82,42,.11),rgba(30,58,82,.15));mix-blend-mode:multiply;}
.photo .cap{position:absolute;left:12px;bottom:10px;z-index:2;color:#fff;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 5px rgba(0,0,0,.6);}
.photo.plain::after{display:none;}

/* ---------- 8. hero ------------------------------------------------------- */
.hero{background:var(--rust);color:var(--cream-white);position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:min(84vh,700px);}
.hero-media{position:relative;background:var(--navy);min-height:340px;}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:sepia(.13) saturate(1.06) contrast(1.03);}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(196,82,42,.13),rgba(30,58,82,.2));mix-blend-mode:multiply;}
.hero-media .cap{position:absolute;left:20px;bottom:18px;z-index:2;color:#fff;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 5px rgba(0,0,0,.6);}
.hero-text{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  gap:var(--s4);padding:clamp(36px,5vw,76px);}
.hero-text h1{font-size:var(--t-hero);color:var(--cream-white);max-width:15ch;}
.hero-text .sub{max-width:40ch;color:rgba(251,245,231,.86);font-size:1.05rem;}
.hero-text .hand{color:rgba(251,245,231,.92);font-size:1.5rem;transform:rotate(-2.2deg);
  display:inline-block;margin-bottom:-6px;}
/* sol enorme sangrando pela borda — a ilustração é elemento de composição, não ícone */
.hero-sun{position:absolute;right:-118px;bottom:-138px;width:420px;height:420px;z-index:1;
  opacity:.16;pointer-events:none;}
.hero-grid.no-media{grid-template-columns:1fr;}
.hero-grid.no-media .hero-media{display:none;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{min-height:300px;order:-1;}
  .hero-text h1{max-width:none;}
  .hero-sun{width:290px;height:290px;right:-90px;bottom:-100px;}
}

/* cabeçalho das páginas internas */
.page-hero{background:var(--rust);color:var(--cream-white);position:relative;overflow:hidden;
  padding:clamp(48px,7vw,84px) 0;}
.page-hero .label{color:rgba(251,245,231,.72);}
.page-hero h1{font-size:var(--t-h1);color:var(--cream-white);margin-top:10px;max-width:16ch;}
.page-hero .marker{color:rgba(251,245,231,.9);font-size:1.35rem;display:inline-block;transform:rotate(-2deg);}
.page-hero .lead{color:rgba(251,245,231,.84);margin-top:14px;}
.page-hero .deco{position:absolute;right:-70px;top:-70px;width:300px;height:300px;opacity:.15;}
@media (max-width:700px){.page-hero .deco{width:200px;height:200px;right:-60px;top:-50px;}}

/* ---------- 9. os quatro elementos (placa gravada, não fileira de cards) -- */
.plate{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid rgba(251,245,231,.28);}
.plate .el{padding:var(--s6) var(--s5) var(--s5);text-align:center;
  border-right:1px solid rgba(251,245,231,.28);}
.plate .el:last-child{border-right:0;}
.plate .el svg{width:132px;height:132px;margin:0 auto var(--s4);
  --mystic:rgba(251,245,231,.92);--mystic-fill:none;--mystic-stroke:rgba(251,245,231,.92);}
.plate .el .n{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;
  color:rgba(251,245,231,.6);display:block;margin-bottom:6px;}
.plate .el h3{font-family:var(--font-body);text-transform:uppercase;font-weight:900;
  font-variation-settings:"wght" 850,"wdth" 86;font-size:.98rem;letter-spacing:.01em;}
.plate .el p{color:rgba(251,245,231,.76);font-size:.85rem;margin-top:8px;}
@media (max-width:860px){
  .plate{grid-template-columns:repeat(2,1fr);}
  .plate .el{border-bottom:1px solid rgba(251,245,231,.28);}
  .plate .el:nth-child(2n){border-right:0;}
  .plate .el:nth-child(n+3){border-bottom:0;}
  .plate .el svg{width:104px;height:104px;}
}
@media (max-width:460px){
  .plate{grid-template-columns:1fr;}
  .plate .el{border-right:0;border-bottom:1px solid rgba(251,245,231,.28);}
  .plate .el:last-child{border-bottom:0;}
}

/* ---------- 10. destinos: um dominante + secundários ---------------------- */
.feature{display:grid;grid-template-columns:1.35fr 1fr;gap:0;border:1px solid var(--line);
  background:var(--surface);}
.feature .photo{aspect-ratio:16/11;}
.feature .body{padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;
  justify-content:center;gap:var(--s3);}
.feature .body h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-variation-settings:"opsz" 100,"SOFT" 30,"WONK" 1,"wght" 800;
  font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.04;}
.feature .body p{color:var(--text-dim);}
.feature .body .more{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-top:var(--s2);}
@media (max-width:820px){.feature{grid-template-columns:1fr;}}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4);}
.mini{border:1px solid var(--line);background:var(--surface);display:flex;align-items:stretch;gap:0;}
.mini .photo{width:40%;flex:none;min-height:150px;}
.mini .body{padding:var(--s5);display:flex;flex-direction:column;justify-content:center;gap:6px;}
.mini h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-variation-settings:"opsz" 60,"SOFT" 30,"WONK" 1,"wght" 800;font-size:1.35rem;line-height:1.05;}
.mini p{color:var(--text-dim);font-size:.86rem;}
.mini .more{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-top:4px;}
.mini .sym{width:40%;flex:none;background:var(--navy);display:flex;align-items:center;
  justify-content:center;min-height:150px;}
.mini .sym svg{width:56%;--mystic:rgba(251,245,231,.85);}
@media (max-width:760px){.pair{grid-template-columns:1fr;}}

/* ---------- 11. nota escrita à mão --------------------------------------- */
.note{background:var(--surface);border:1px solid var(--line);
  padding:clamp(26px,4vw,var(--s7));position:relative;max-width:820px;}
.note::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-1.4deg);
  width:104px;height:22px;background:rgba(196,82,42,.16);border:1px solid rgba(196,82,42,.22);}
.note .marker{color:var(--accent);font-size:clamp(1.4rem,3.4vw,2rem);display:block;
  margin-bottom:var(--s3);transform:rotate(-1.2deg);}
.note p{font-size:1.06rem;}
.note p + p{margin-top:var(--s3);}

/* ---------- 12. faixa de fotos ------------------------------------------- */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;}
.strip .photo{aspect-ratio:3/4;}
@media (max-width:900px){.strip{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.strip{grid-template-columns:repeat(2,1fr);}}

/* declaração em caps grossas sobre foto — a voz do @noplansfortmr */
.overlay-photo{position:relative;overflow:hidden;width:100%;max-width:100%;}
.overlay-photo img{width:100%;height:100%;object-fit:cover;filter:sepia(.13) saturate(1.06) brightness(.68) contrast(1.04);}
.overlay-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 50%,rgba(20,34,48,.42),rgba(20,34,48,.14));pointer-events:none;}
.overlay-photo .say{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:var(--s5);gap:var(--s5);z-index:2;}
.overlay-photo .say .chunky{color:var(--cream-white);font-size:clamp(1.8rem,6vw,4rem);
  text-shadow:0 2px 22px rgba(0,0,0,.55);}
.overlay-photo .say .marker{color:#FF8A56;font-size:clamp(1.25rem,3vw,2rem);
  transform:rotate(-2deg);text-shadow:0 2px 12px rgba(0,0,0,.75),0 0 30px rgba(0,0,0,.5);}
.overlay-photo .say .marker,.overlay-photo .say .chunky{max-width:100%;overflow-wrap:break-word;}
@media (max-width:560px){
  .overlay-photo .say{padding:var(--s4);gap:var(--s4);}
  .overlay-photo .say .marker{font-size:1.05rem;}
  .overlay-photo .say .chunky{font-size:1.65rem;}
}

/* ---------- 13. listas / conteúdo interno -------------------------------- */
.stack{display:grid;gap:0;border-top:1px solid var(--line);}
.stack .row{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start;
  padding:var(--s5) 0;border-bottom:1px solid var(--line);}
.stack .row .sym{width:88px;height:88px;flex:none;margin-top:-6px;}
.stack .row .idx{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  color:var(--accent);padding-top:5px;min-width:34px;}
.stack .row h3{font-family:var(--font-body);text-transform:uppercase;font-weight:900;
  font-variation-settings:"wght" 840,"wdth" 88;font-size:1.05rem;}
.stack .row p{color:var(--text-dim);margin-top:6px;max-width:62ch;}

.timeline{position:relative;margin-top:var(--s3);}
.timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--line-strong);}
.tl-item{position:relative;padding:0 0 var(--s6) 40px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;
  background:var(--accent);}
.tl-item .day{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);}
.tl-item h4{font-family:var(--font-body);text-transform:uppercase;font-weight:900;
  font-variation-settings:"wght" 840,"wdth" 88;font-size:1.02rem;margin-top:5px;}
.tl-item p{color:var(--text-dim);font-size:.94rem;margin-top:6px;max-width:60ch;}

.tips-list{display:grid;gap:0;border-top:1px solid var(--line);margin-top:var(--s4);}
.tip{display:flex;gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--line);
  align-items:flex-start;}
.tip svg{width:44px;height:44px;flex:none;}
.tip p{color:var(--text-dim);font-size:.95rem;}
.tip b{color:var(--text);font-variation-settings:"wght" 700;}

.grid{display:grid;gap:var(--s4);}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

/* card sobrou só para listas de links externos (descontos) — sem raio, sem sombra */
.card{background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:border-color .14s ease;}
.card:hover{border-color:var(--accent);}
.card .body{padding:var(--s5);}
.card .kicker{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  color:var(--accent);text-transform:uppercase;}
.card h3{font-family:var(--font-body);text-transform:uppercase;font-weight:900;
  font-variation-settings:"wght" 840,"wdth" 90;font-size:1.02rem;margin-top:8px;}
.card p{color:var(--text-dim);font-size:.9rem;margin-top:8px;}
.card .more{margin-top:var(--s3);font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.card .media{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--navy);}
.card .media img{width:100%;height:100%;object-fit:cover;filter:sepia(.13) saturate(1.06);}

.photo-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2px;margin-top:var(--s5);}
.photo-gallery .photo{aspect-ratio:4/5;}

.placeholder-note{border:1px dashed var(--line-strong);padding:var(--s4) var(--s5);
  color:var(--text-dim);font-size:.88rem;background:var(--surface-2);}


/* ---------- 15. produtos (Rota FIFO / Consultoria) ----------------------- */
.offers{display:grid;grid-template-columns:1.42fr 1fr;gap:var(--s4);align-items:start;}
@media (max-width:900px){.offers{grid-template-columns:1fr;}}

.offer{border:1.5px solid var(--line-strong);background:var(--surface);
  padding:clamp(24px,3.4vw,42px);display:flex;flex-direction:column;gap:var(--s4);height:100%;}
.offer .tag{align-self:flex-start;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;border:1px solid currentColor;padding:5px 10px;
  color:var(--accent);}
.offer h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-variation-settings:"opsz" 110,"SOFT" 30,"WONK" 1,"wght" 800;
  font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.02;}
.offer .what{color:var(--text-dim);}
.offer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;}
.offer li{position:relative;padding-left:22px;font-size:.93rem;color:var(--text-dim);}
.offer li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--accent);}
.offer .facts{display:flex;gap:var(--s5);flex-wrap:wrap;padding-top:var(--s3);
  border-top:1px solid var(--line);margin-top:auto;}
.offer .fact b{display:block;font-family:var(--font-display);font-weight:800;
  font-variation-settings:"opsz" 40,"SOFT" 30,"WONK" 1,"wght" 800;font-size:1.5rem;line-height:1;}
.offer .fact span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);}
.offer .cta-row{margin-top:var(--s2);}

/* variante principal: fundo ferrugem, o produto carro-chefe */
.offer.hero-offer{background:var(--rust);border-color:var(--rust);
  --text:var(--cream-white);--text-dim:rgba(251,245,231,.84);
  --line:rgba(251,245,231,.3);--accent:var(--cream-white);color:var(--cream-white);}
.offer.hero-offer li::before{background:rgba(251,245,231,.9);}

/* grade de módulos do curso */
.modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:var(--s5);}
.modules .mod{background:var(--surface);padding:16px 18px;}
.modules .mod .n{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;color:var(--accent);}
.modules .mod h4{font-family:var(--font-body);text-transform:uppercase;font-weight:900;
  font-variation-settings:"wght" 820,"wdth" 90;font-size:.88rem;margin-top:5px;line-height:1.25;}
.modules .mod p{color:var(--text-dim);font-size:.8rem;margin-top:5px;}

/* ---------- 16. artigo longo (páginas de destino) ------------------------ */
.prose{max-width:68ch;}
.prose > * + *{margin-top:var(--s4);}
.prose p{font-size:1.05rem;line-height:1.72;}
.prose h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-variation-settings:"opsz" 90,"SOFT" 30,"WONK" 1,"wght" 800;
  font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.06;margin-top:var(--s8);}
.prose h3 + p{margin-top:var(--s4);}
.prose h4{font-family:var(--font-body);text-transform:uppercase;font-weight:900;
  font-variation-settings:"wght" 840,"wdth" 88;font-size:1rem;margin-top:var(--s6);}
.prose a{color:var(--accent);border-bottom:1px solid rgba(196,82,42,.45);}
.prose a:hover{background:rgba(196,82,42,.1);}
.prose ul{list-style:none;padding:0;margin-top:var(--s4);display:grid;gap:12px;}
.prose li{position:relative;padding-left:24px;color:var(--text-dim);font-size:.98rem;line-height:1.62;}
.prose li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;background:var(--accent);}
.prose .callout{border-left:3px solid var(--accent);padding:4px 0 4px var(--s4);
  font-size:1.02rem;color:var(--text);}
.prose .callout b{font-variation-settings:"wght" 700;}
/* figuras dentro do artigo */
.prose figure{margin:var(--s7) 0;}
.prose figure .photo{aspect-ratio:4/3;}
.prose figure.wide .photo{aspect-ratio:16/10;}
.prose figure.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.prose figure.duo .photo{aspect-ratio:3/4;}
.prose figcaption{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim);margin-top:10px;}
.prose figure.duo figcaption{grid-column:1 / -1;}
@media (max-width:560px){.prose figure.duo{grid-template-columns:1fr;}}

.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s8);align-items:start;}
.article-layout .aside{position:sticky;top:90px;border-top:2px solid var(--accent);padding-top:var(--s4);}
.article-layout .aside h4{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim);}
.article-layout .aside ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:9px;
  font-size:.88rem;counter-reset:s;}
.article-layout .aside a{color:var(--text-dim);}
.article-layout .aside a:hover{color:var(--accent);}
@media (max-width:960px){
  .article-layout{grid-template-columns:1fr;gap:var(--s5);}
  .article-layout .aside{position:static;order:-1;}
}

/* faixa de citação tipográfica (quando não há foto) */
.pullquote{background:var(--navy);color:var(--paper);padding:clamp(40px,6vw,72px) 0;}
.pullquote .wrap{text-align:center;}
.pullquote .marker{color:#E8845A;font-size:clamp(1.2rem,2.6vw,1.7rem);display:block;
  transform:rotate(-1.6deg);margin-bottom:var(--s4);}
.pullquote p{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-variation-settings:"opsz" 110,"SOFT" 30,"WONK" 1,"wght" 800;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.06;max-width:20ch;margin:0 auto;}

/* ---------- 17. rodapé ---------------------------------------------------- */
.site-footer{background:var(--navy);color:var(--paper);padding:var(--s7) 0 var(--s6);}
.site-footer .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:900;font-variation-settings:"opsz" 72,"SOFT" 20,"WONK" 1,"wght" 900;
  text-transform:uppercase;font-size:1.05rem;color:var(--paper);}
.site-footer .brand svg{width:24px;height:24px;--mystic-fill:none;--mystic-stroke:var(--paper);}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap;}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;font-size:.82rem;color:rgba(243,231,210,.72);}
.footer-links a:hover{color:#fff;}
.footer-bottom{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(243,231,210,.2);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(243,231,210,.6);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.site-footer .legal{margin-top:var(--s4);font-size:.72rem;line-height:1.55;
  color:rgba(243,231,210,.5);max-width:78ch;}

/* ---------- 18. formulário de captura ------------------------------------- */
.form-lead{max-width:480px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4);}
.field label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);}
.field input{font-family:var(--font-body);font-size:1rem;padding:13px 14px;
  border:1.5px solid var(--line-strong);background:var(--cream-white);color:var(--navy);
  appearance:none;-webkit-appearance:none;}
.field input:focus{outline:none;border-color:var(--accent);}
button.btn{appearance:none;-webkit-appearance:none;cursor:pointer;font:inherit;
  font-family:var(--font-mono);}
.form-lead .btn{width:100%;text-align:center;}
.form-note{font-size:.78rem;color:var(--text-dim);margin-top:var(--s3);}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}