/* Arroyo Web · Dicionário do Site Premium */
:root{
  --bg:#0C0C0E; --bg2:#141417; --ink:#EFEBE3; --muted:#9A958C; --line:#26262B;
  --signal:#FF5B1F; --signal-ink:#140A05; --lilac:#B9B0FF; --paper:#EFEBE3; --paper-ink:#16161A;
  --display:"Syne", "Arial Black", system-ui, sans-serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --gutter:clamp(16px, 4vw, 56px);
  --space:clamp(96px, 12vw, 180px);
  --ease:cubic-bezier(.22,1,.36,1);
  --r:22px;
}
*{box-sizing:border-box}
html{background:var(--bg); overflow-x:clip}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); line-height:.98; letter-spacing:-.025em; margin:0; text-wrap:balance}
h2{font-size:clamp(36px, 5vw, 76px); font-weight:700; letter-spacing:-.035em}
h2 em, h1 em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; font-size:1.12em; line-height:.9; color:var(--lilac)}
p{margin:0}
:focus-visible{outline:2px solid var(--signal); outline-offset:4px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.grain{position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- nav ---------- */
.nav{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:40; display:flex; align-items:center; gap:26px;
  padding:7px 7px 7px 20px; border-radius:999px; border:1px solid rgb(255 255 255 / .09);
  background:rgb(12 12 14 / .6); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); width:max-content; max-width:calc(100% - 24px)}
.nav-logo{font:800 17px var(--display); text-decoration:none; letter-spacing:-.02em}
.nav-logo span{color:var(--signal)}
.nav-links{display:flex; gap:22px; font-size:14px}
.nav-links a{text-decoration:none; color:var(--muted); transition:color .3s}
.nav-links a:hover{color:var(--ink)}

/* ---------- botões ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 28px; border-radius:999px; border:0; cursor:pointer;
  background:var(--signal); color:var(--signal-ink); font:700 16px var(--body); text-decoration:none; transition:background .3s, color .3s, box-shadow .4s}
.btn:hover{background:var(--ink); box-shadow:0 0 0 6px rgb(255 91 31 / .18)}
.btn-small{padding:10px 18px; font-size:14px}
.btn-big{padding:20px 36px; font-size:18px}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid rgb(239 235 227 / .25)}
.btn-ghost:hover{background:var(--ink); color:var(--bg)}
.link-arrow{color:var(--ink); text-decoration:none; font-weight:600; border-bottom:1px solid rgb(239 235 227 / .3); padding-bottom:2px}
.link-arrow::after{content:" ↓"; color:var(--signal)}

.eyebrow{font:500 12px/1.2 var(--mono); text-transform:uppercase; letter-spacing:.16em; color:var(--signal)}
.lead{color:var(--muted); font-size:clamp(17px, 1.3vw, 20px); max-width:52ch}

/* ---------- hero ---------- */
.hero{position:relative}
.hero-pin{position:relative; height:100svh; min-height:620px; overflow:hidden; background:#0b0a0b}
.book-stage{position:absolute; inset:0; overflow:hidden; transform:scale(.86); transform-origin:80% 58%}
.bk{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 62%; will-change:transform, opacity}
.bk-open{opacity:0}
.hero-pin::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgb(12 12 14 / .92) 0%, rgb(12 12 14 / .6) 32%, rgb(12 12 14 / 0) 58%), linear-gradient(0deg, rgb(12 12 14 / .9), rgb(12 12 14 / 0) 28%)}
.hero-copy{position:absolute; left:var(--gutter); bottom:clamp(40px, 8vh, 90px); max-width:min(600px, 44vw); display:flex; flex-direction:column; gap:22px; z-index:2}
.hero-title{font-size:clamp(34px, 4.6vw, 72px); font-weight:700; letter-spacing:-.04em; display:grid}
.ht{grid-area:1/1; display:block}
html.js .ht-2, html.js .ht-3{opacity:0; visibility:hidden}
.hero-sub{color:var(--muted); font-size:clamp(17px, 1.3vw, 20px); max-width:42ch}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px}
.scroll-cue{position:absolute; right:var(--gutter); bottom:clamp(40px, 8vh, 90px); display:flex; flex-direction:column; align-items:center; gap:10px; font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.scroll-cue span{width:1px; height:56px; background:linear-gradient(var(--signal), transparent); animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden; border-block:1px solid var(--line); padding-block:20px; background:var(--bg)}
.marquee-track{display:flex; width:max-content; animation:marquee 38s linear infinite; font:700 clamp(22px, 3vw, 40px)/1 var(--display); white-space:nowrap}
.marquee-track span{padding-right:.4em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- seções ---------- */
.section{padding:var(--space) var(--gutter); max-width:1440px; margin:0 auto}
.sec-head{display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(40px, 6vw, 72px); max-width:980px}

/* presente */
.gift-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.gift-card{position:relative; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:30px; display:flex; flex-direction:column; gap:14px; transform-style:preserve-3d; overflow:hidden}
.gift-card::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(140deg, rgb(255 91 31 / .6), transparent 40%, rgb(185 176 255 / .45)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.gift-n{font:500 12px var(--mono); color:var(--muted)}
.gift-card h3{font-size:clamp(28px, 2.6vw, 38px)}
.gift-card p{color:var(--muted)}
.gift-card .btn{align-self:flex-start; margin-top:auto}
.gift-meta{list-style:none; padding:0; margin:0 0 8px; display:flex; flex-wrap:wrap; gap:8px}
.gift-meta li{font:500 12px var(--mono); padding:6px 10px; border-radius:999px; background:rgb(239 235 227 / .06); color:var(--ink)}
.gift-art{height:150px; border-radius:16px; background:#0f0f12; position:relative; overflow:hidden; margin-bottom:6px}
.gift-art-book i{position:absolute; top:26px; width:92px; height:100px; border-radius:4px 10px 10px 4px; left:50%; background:var(--paper); box-shadow:0 18px 30px rgb(0 0 0 / .5)}
.gift-art-book i:nth-child(1){transform:translateX(-120%) rotate(-10deg); background:#2a2a30}
.gift-art-book i:nth-child(2){transform:translateX(-50%) rotate(2deg); background:var(--signal)}
.gift-art-book i:nth-child(3){transform:translateX(22%) rotate(12deg)}
.gift-art-skill{display:flex; align-items:center; justify-content:center; gap:10px; font:500 24px var(--mono); color:var(--ink)}
.gift-art-skill b{display:grid; place-items:center; width:54px; height:54px; border-radius:14px; background:var(--lilac); color:var(--paper-ink); font:800 30px var(--display)}
.gift-art-skill span::after{content:"▍"; color:var(--signal); animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.offer-strip{margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; padding:22px 26px; border-radius:var(--r); text-decoration:none;
  background:linear-gradient(120deg, rgb(255 91 31 / .16), rgb(185 176 255 / .1)); border:1px solid rgb(255 91 31 / .35); transition:border-color .3s}
.offer-strip:hover{border-color:var(--signal)}
.os-txt{color:var(--muted); max-width:60ch} .os-txt b{color:var(--ink)}
.os-cta{font-weight:700; color:var(--signal); white-space:nowrap}
.swipe-hint{display:none}
/* barra de compra fixa (celular) */
.buybar{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:45; display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 10px 10px 18px; border-radius:18px; background:var(--paper); color:var(--paper-ink); text-decoration:none; box-shadow:0 18px 40px rgb(0 0 0 / .5);
  transform:translateY(160%); transition:transform .5s var(--ease)}
.buybar.on{transform:none}
.bb-txt{display:flex; flex-direction:column; line-height:1.2} .bb-txt b{font:700 15px var(--display)} .bb-txt small{font-size:12px; color:#6a655c}
.bb-btn{background:var(--signal); color:var(--signal-ink); font-weight:800; font-size:16px; padding:12px 16px; border-radius:12px; white-space:nowrap}

/* efeitos */
.fx-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px}
.fx-card{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:10px 10px 20px; display:flex; flex-direction:column; gap:14px}
.fx-card.free{border-color:rgb(185 176 255 / .35)}
.fx-demo{position:relative; height:220px; border-radius:14px; overflow:hidden; background:#0f0f12; isolation:isolate; outline-offset:-2px}
.fx-hint{position:absolute; right:10px; bottom:10px; z-index:20; font:500 10px/1 var(--mono); background:var(--lilac); color:var(--paper-ink); padding:6px 9px; border-radius:999px; pointer-events:none}
.fx-info{padding:0 10px; display:flex; flex-direction:column; gap:6px}
.fx-no{font:500 11px var(--mono); color:var(--muted); letter-spacing:.08em}
.fx-no em{font-style:normal; color:var(--lilac)}
.fx-name{font:800 22px/1.1 var(--display); letter-spacing:-.01em}
.fx-name.locked{color:#4a4a52; display:flex; align-items:center; gap:10px; letter-spacing:.02em; font-size:18px; white-space:nowrap; overflow:hidden}
.lock{flex:none; width:22px; height:22px; border-radius:6px; background:var(--signal); position:relative}
.lock::before{content:""; position:absolute; left:6px; top:-7px; width:10px; height:10px; border:2.5px solid var(--signal); border-bottom:0; border-radius:8px 8px 0 0}
.lock::after{content:""; position:absolute; left:9.5px; top:8px; width:3px; height:6px; border-radius:2px; background:var(--signal-ink)}
.fx-what{color:var(--muted); font-size:15px; line-height:1.5}

/* demo: produto em camadas */
.xb{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; --p:0}
.xb i{display:block; transition:transform .9s var(--ease); transform:translateY(calc(var(--dy) * var(--p) * 1px)); filter:drop-shadow(0 8px 10px rgb(0 0 0 / .45))}
.fx-explode:hover .xb, .fx-explode:focus-visible .xb, .fx-explode.auto .xb{--p:1}
.x1{--dy:-38; width:120px; height:42px; border-radius:60px 60px 12px 12px; background:radial-gradient(circle at 35% 35%, #f6dca8 2px, transparent 3px) 0 0/18px 12px, linear-gradient(170deg,#E9A04E,#C9772C); position:relative; z-index:6}
.x2{--dy:-22; width:128px; height:10px; border-radius:6px; background:#5aa83a; margin-top:-2px}
.x3{--dy:-8; width:116px; height:9px; border-radius:6px; background:#D6452E}
.x4{--dy:5; width:126px; height:10px; background:#F3BA14; clip-path:polygon(0 0,100% 0,100% 50%,80% 50%,74% 100%,68% 50%,30% 50%,24% 90%,18% 50%,0 50%)}
.x5{--dy:18; width:120px; height:20px; border-radius:10px; background:linear-gradient(#6B3F27,#4A2A18); margin-top:-3px}
.x6{--dy:34; width:118px; height:20px; border-radius:6px 6px 16px 16px; background:linear-gradient(#DD9444,#B86A26)}

/* demo: luz que segue */
.fx-spot{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px}
.sp{--x:-200px; --y:-200px; border-radius:10px; border:1px solid #26262b; padding:12px; display:flex; flex-direction:column; justify-content:flex-end; font:700 15px var(--display);
  background:radial-gradient(150px circle at var(--x) var(--y), rgb(255 91 31 / .38), transparent 65%), #151518}
.sp span{font:400 11px var(--body); color:var(--muted)}

/* demo: botão magnético */
.fx-mag{display:grid; place-items:center}
.mag-ring{position:absolute; width:210px; height:140px; border:1px dashed #33333a; border-radius:50%}
.mag-btn{position:relative; background:var(--signal); color:var(--signal-ink); border:0; border-radius:999px; padding:16px 26px; font:700 15px var(--body); cursor:pointer}

/* demo: comparação arrastável */
.fx-ba{--x:50%}
.ba-side{position:absolute; inset:0; display:grid; place-items:center; padding:14px}
.ba-side em{position:absolute; top:10px; font:500 10px var(--mono); font-style:normal; background:rgb(0 0 0 / .55); padding:4px 7px; border-radius:5px; color:#fff}
.ba-a em{left:10px} .ba-b em{right:10px}
.ba-a{background:#e9e9e9}
.ba-b{clip-path:inset(0 0 0 var(--x)); background:radial-gradient(circle at 70% 30%, #3a2012, #0e0b09)}
.ba-site{width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; gap:7px}
.common{font-family:Arial, sans-serif; color:#222; padding:10px}
.common b{font-size:17px; color:#1a3ea8} .common i{display:block; height:7px; background:#c9c9c9; width:90%} .common i:nth-child(3){width:70%}
.common span{align-self:flex-start; background:#1a3ea8; color:#fff; font-size:11px; padding:5px 9px}
.prem{color:var(--ink); padding:10px 16px}
.prem small{font:500 9px var(--mono); color:var(--signal); text-transform:uppercase; letter-spacing:.14em}
.prem b{font:800 24px/.95 var(--display)}
.prem span{align-self:flex-start; background:var(--signal); color:var(--signal-ink); font-size:11px; font-weight:700; padding:7px 13px; border-radius:99px}
.ba-bar{position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:var(--lilac); z-index:3; pointer-events:none}
.ba-bar::after{content:"◂ ▸"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--lilac); color:var(--paper-ink); font:600 11px var(--mono); padding:6px 8px; border-radius:99px; white-space:nowrap}
.ba-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:4; margin:0}

/* demo: card inclinado */
.fx-tilt{display:grid; place-items:center; perspective:700px}
.tl-card{position:relative; width:170px; height:112px; border-radius:14px; padding:14px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  background:linear-gradient(135deg, var(--signal), #7a2412); color:#fff; box-shadow:0 20px 40px rgb(0 0 0 / .45); transform-style:preserve-3d; will-change:transform}
.tl-card small{font:500 10px var(--mono); opacity:.8} .tl-card b{font:800 17px/1 var(--display)}
.tl-shine{position:absolute; inset:0; background:radial-gradient(120px circle at var(--sx, 50%) var(--sy, 0%), rgb(255 255 255 / .35), transparent 60%); pointer-events:none}

/* demo: título linha por linha */
.fx-text{display:flex; align-items:center; padding:0 22px}
.tx{font:800 30px/1.02 var(--display)}
.tx span{display:block; overflow:hidden}
.tx i{display:block; font-style:normal}
.fx-text.play .tx i{animation:rise 1.2s var(--ease) both}
.fx-text.play .tx span:nth-child(2) i{animation-delay:.12s} .fx-text.play .tx span:nth-child(3) i{animation-delay:.24s; color:var(--signal)}
@keyframes rise{from{transform:translateY(110%)} to{transform:none}}
.fx-replay{position:absolute; right:10px; bottom:10px; background:none; border:1px solid #33333a; color:var(--muted); font:500 10px var(--mono); padding:5px 9px; border-radius:99px; cursor:pointer}

/* demo: parallax (liberado) */
.fx-px{background:linear-gradient(#2a2140, #0f0f12)}
.px{position:absolute; left:-10%; right:-10%; bottom:-10px; transition:transform .25s ease-out}
.l1{height:130px; background:#3b2f63; clip-path:polygon(0 60%,15% 20%,30% 55%,48% 5%,66% 50%,82% 18%,100% 55%,100% 100%,0 100%)}
.l2{height:95px; background:#6d4ab0; clip-path:polygon(0 50%,20% 10%,38% 60%,55% 20%,75% 65%,90% 25%,100% 45%,100% 100%,0 100%)}
.l3{height:55px; background:var(--signal); clip-path:polygon(0 40%,25% 0,45% 55%,70% 10%,100% 50%,100% 100%,0 100%)}
.px-t{position:absolute; left:16px; top:16px; font:800 20px var(--display); color:var(--ink)}

/* demo: marquee (liberado) */
.fx-mq{display:flex; flex-direction:column; justify-content:center; gap:10px}
.mq{display:flex; width:max-content; white-space:nowrap; font:800 30px/1 var(--display); animation:marquee 14s linear infinite}
.mq span{padding-right:.3em}
.mq.rev{animation-direction:reverse; color:var(--signal); font-family:var(--serif); font-style:italic; font-weight:400}

.fx-more{margin-top:40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:28px 32px; border-radius:var(--r); background:linear-gradient(120deg, rgb(255 91 31 / .12), rgb(185 176 255 / .08)); border:1px solid var(--line)}
.fx-more p{max-width:60ch; color:var(--muted)}
.fx-more b{color:var(--ink)}

/* pedido */
.ask-grid{display:grid; grid-template-columns:1fr 1.25fr; gap:20px}
.ask-card{border-radius:var(--r); padding:30px; border:1px solid var(--line); background:var(--bg2); display:flex; flex-direction:column; gap:20px}
.ask-card.good{background:var(--paper); color:var(--paper-ink); border-color:var(--paper)}
.ask-tag{font:500 12px var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
.good .ask-tag{color:#b3401a}
.ask-q{font:500 clamp(19px, 1.6vw, 24px)/1.5 var(--body)}
.redact{background:var(--paper-ink); color:#6d6d75; border-radius:6px; padding:0 8px; letter-spacing:.05em; font-size:.8em; white-space:nowrap; -webkit-user-select:none; user-select:none}
.ask-res{margin-top:auto; display:flex; flex-direction:column; gap:7px; padding:16px; border-radius:14px; background:#1c1c20}
.ask-res i{height:8px; border-radius:4px; background:#35353c} .ask-res i:nth-child(2){width:80%} .ask-res i:nth-child(3){width:60%}
.ask-res span{font:500 13px var(--mono); color:var(--muted); margin-top:6px}
.good-res{background:var(--paper-ink)}
.good-res i{background:linear-gradient(90deg, var(--signal), var(--lilac))}
.good-res span{color:var(--ink)}
.ask-note{margin-top:28px; color:var(--muted); text-align:center}

/* prova */
.proof{max-width:none; padding:clamp(80px, 8vw, 120px) 0 56px; overflow:hidden}
.proof .sec-head{padding-inline:var(--gutter); max-width:1440px; margin-inline:auto}
.proof-track{display:flex; gap:22px; padding:0 var(--gutter); width:max-content}
.site{margin:0; width:min(46vw, 640px, calc((100svh - 330px) * 1.86)); flex:none; border-radius:16px; overflow:hidden; background:var(--bg2); border:1px solid var(--line)}
.site-bar{display:flex; gap:6px; align-items:center; height:30px; padding:0 12px; background:#1b1b1f; font:500 11px var(--mono); color:var(--muted)}
.site-bar i{width:8px; height:8px; border-radius:50%; background:#3a3a40}
.site-bar span{margin-left:10px}
.site-vid{display:block; width:100%; height:auto; aspect-ratio:960/516; object-fit:cover; background:#101013}
.site figcaption{padding:12px 16px; display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--muted)}
.site figcaption b{color:var(--ink); font-weight:600}
.site figcaption span{text-align:right}

/* kit */
.kit-wrap{display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(24px, 4vw, 60px); align-items:start}
.kit-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.kit-list li{display:grid; grid-template-columns:64px 1fr; gap:14px; padding:28px 0; border-bottom:1px solid var(--line)}
.kit-n{font:800 22px var(--display); color:var(--signal)}
.kit-list h3{font-size:clamp(22px, 2vw, 30px); margin-bottom:8px}
.kit-list p{color:var(--muted)}
.price-card{position:sticky; top:100px; border-radius:28px; padding:36px 32px; background:var(--paper); color:var(--paper-ink); display:flex; flex-direction:column; gap:10px; box-shadow:0 40px 80px rgb(0 0 0 / .45)}
.price-top{font:500 12px var(--mono); text-transform:uppercase; letter-spacing:.14em; color:#6a655c}
.price{display:flex; align-items:flex-start; gap:6px; line-height:.85}
.price small{font:700 24px var(--display); margin-top:10px}
.price b{font:800 clamp(88px, 9vw, 128px) var(--display); letter-spacing:-.05em}
.price-sub{color:#6a655c; margin-bottom:12px}
.price-card .btn{width:100%}
.price-card .btn:hover{background:var(--paper-ink); color:var(--ink)}
.price-trust{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px}
.price-trust li{padding-left:26px; position:relative}
.price-trust li::before{content:"✓"; position:absolute; left:0; color:#b3401a; font-weight:700}

/* para quem é */
.who-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.who-col{border-radius:var(--r); padding:32px; border:1px solid var(--line); background:var(--bg2)}
.who-col h3{font-size:clamp(26px, 2.4vw, 34px); margin-bottom:18px}
.who-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.who-col li{padding-left:28px; position:relative}
.yes li::before{content:"✓"; position:absolute; left:0; color:var(--signal); font-weight:700}
.no li::before{content:"✕"; position:absolute; left:0; color:var(--muted)}
.no{color:var(--muted)}

/* faq */
.faq-list{max-width:900px; border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer; list-style:none; padding:24px 44px 24px 0; font:700 clamp(18px, 1.5vw, 22px) var(--body); position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font:400 30px var(--body); color:var(--signal); transition:transform .4s var(--ease)}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-list details p{padding:0 0 24px; color:var(--muted); max-width:66ch}

/* final */
.final{text-align:center; display:flex; flex-direction:column; align-items:center; gap:40px}
.final h2{font-size:clamp(40px, 6.4vw, 110px); max-width:14ch}

/* footer */
.footer{padding:56px var(--gutter) 24px; border-top:1px solid var(--line); overflow:hidden}
.footer-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; color:var(--muted); font-size:15px}
.footer-row a{text-decoration:none} .footer-row a:hover{color:var(--signal)}
.footer-mark{font:800 clamp(64px, 18vw, 300px)/.8 var(--display); letter-spacing:-.05em; margin:40px 0 0; opacity:.07; white-space:nowrap}

/* toast (links que ainda vão entrar) */
.toast{position:fixed; left:50%; bottom:24px; z-index:70; transform:translate(-50%, 220%); visibility:hidden; background:var(--ink); color:var(--bg); font:600 15px var(--body); padding:14px 22px; border-radius:999px; box-shadow:0 20px 40px rgb(0 0 0 / .4); transition:transform .5s var(--ease), visibility 0s .5s; max-width:calc(100% - 32px); text-align:center}
.toast.on{transform:translate(-50%, 0); visibility:visible; transition:transform .5s var(--ease)}

/* cursor */
.cursor{position:fixed; top:0; left:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--ink);
  pointer-events:none; z-index:60; mix-blend-mode:difference; opacity:0; transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease)}
.cursor.is-hover{width:48px; height:48px; margin:-24px 0 0 -24px}

/* animações só com JS */
html.js.anim [data-reveal]{opacity:0; transform:translateY(32px)}

@media (max-width: 1100px){
  .fx-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 767px){
  .nav{gap:14px}
  .nav-links{display:none}
  .hero-pin{min-height:560px}
  .hero-copy{max-width:none; right:var(--gutter); bottom:28px; gap:16px}
  .hero-title{font-size:clamp(30px, 8.6vw, 44px)}
  .hero-sub{font-size:15px}
  .scroll-cue{display:none}
  .book-stage{transform:none}
  .bk{inset:auto; top:72px; left:-38%; width:130%; max-width:none; height:auto; object-fit:fill; -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent)}
  .hero-pin::after{background:linear-gradient(0deg, rgb(12 12 14 / .97) 30%, rgb(12 12 14 / .55) 52%, rgb(12 12 14 / 0) 72%)}
  .gift-grid, .ask-grid, .kit-wrap, .who-grid{grid-template-columns:1fr}
  :root{--space:76px}
  .buybar{display:flex}
  .toast{bottom:96px}
  .footer{padding-bottom:110px}
  /* efeitos: carrossel de arrastar no celular */
  .swipe-hint{display:block; font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--lilac); margin:-24px 0 14px}
  .fx-grid{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter) 8px; scrollbar-width:none}
  .fx-grid::-webkit-scrollbar{display:none}
  .fx-card{flex:0 0 84%; scroll-snap-align:center}
  .fx-more{margin-top:24px; padding:22px}
  .fx-more .btn{width:100%}
  .offer-strip{padding:18px}
  .hero-cta .btn{flex:1}
  .price-card{position:relative; top:auto}
  .proof{padding-top:76px}
  .proof-track{width:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; scrollbar-width:none}
  .proof-track::-webkit-scrollbar{display:none}
  .site{width:86vw; scroll-snap-align:center}
  .site figcaption{flex-direction:column; gap:2px} .site figcaption span{text-align:left}
  .cursor{display:none}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track, .mq, .scroll-cue span, .gift-art-skill span::after{animation:none}
  html.js.anim [data-reveal]{opacity:1; transform:none}
  html.js .ht-1{opacity:0; visibility:hidden} html.js .ht-3{opacity:1; visibility:visible}
  .bk-open{opacity:1}
}