@font-face{font-family:"Work Sans";src:url("fonts/work_sans-500.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Zen Tokyo Zoo";src:url("fonts/zen_tokyo_zoo-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{--butter:#fff9bb;--ink:#121212;--spritz:#ff470f;--off:#f0f0f0;--grey:#545050;--soft:#3b3737;--line:#d6d6d6;--pad:clamp(16px,3vw,32px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Work Sans",system-ui,sans-serif;font-weight:500;font-size:16px;line-height:1.5;color:var(--ink);background:#fff}
h1,h2,h3,dt,strong{font-weight:500}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--spritz);outline-offset:3px}
.s-ship a:focus-visible{outline-color:var(--ink)}
.s-lab a:focus-visible,.s-club a:focus-visible,.s-bag a:focus-visible,.rodape a:focus-visible{outline-color:var(--butter)}

/* ---------- bloco do pacote ---------- */
.pular{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--butter);padding:12px 16px;z-index:100;text-decoration:none}
.pular:focus{left:8px}
.rascunho{background:var(--butter);color:var(--ink);text-align:center;font-size:13px;line-height:1.4;padding:8px 12px}
.pacote{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:8px var(--pad);background:#fff;border-bottom:1px solid var(--line)}
.pacote-abas{display:flex;flex-wrap:wrap;gap:2px}
.pacote-abas a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.pacote-abas a[aria-current="page"]{border-bottom-color:var(--ink)}
.pacote-abas a:hover{border-bottom-color:var(--grey)}
.curto{display:none}
.chat{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;background:var(--ink);color:var(--butter);font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.rodape{background:var(--ink);color:#f4efdc;padding:40px var(--pad);font-size:14px}
.rodape p{max-width:900px;margin:0 0 14px}
.rodape a{color:var(--butter)}
.rodape-chat{display:inline-flex;align-items:center;min-height:44px}
.rodape-fontes{color:#cfc9b4}

/* ---------- base ---------- */
section{overflow-x:clip;padding-block:clamp(52px,7vw,92px)}
section[id]{scroll-margin-top:12px}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--pad)}
.sticky{position:sticky;top:24px;align-self:start}
h1{margin:0 0 14px;font-size:clamp(46px,8.4vw,112px);line-height:.95;letter-spacing:-.04em}
h2{margin:0 0 .5em;font-size:clamp(30px,4.4vw,60px);line-height:1.02;letter-spacing:-.035em}
h3{margin:0;font-size:17px;line-height:1.25;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.45}
.eyebrow{margin:0 0 16px;font-size:13px;letter-spacing:.08em;color:var(--grey)}
.caps{text-transform:uppercase}
.note{font-size:15px;color:var(--grey)}
.price{font-size:17px;white-space:nowrap}
.ulink{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;background:var(--ink);color:var(--butter);font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.rules{list-style:none;margin:20px 0;padding:0}
.rules li{padding:10px 0;border-top:1px solid var(--line);font-size:16px}

/* caixa que marca: o selo da mala */
.box{display:inline-block;position:relative;flex:none;width:32px;height:32px;border:2px solid currentColor}
.box::after{content:"";position:absolute;left:9px;top:1px;width:9px;height:18px;border:solid currentColor;border-width:0 3px 3px 0;transform:rotate(40deg);transition:opacity .35s ease}
.tick{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:7px 14px 7px 8px;background:var(--butter);color:var(--ink);font-size:13px;letter-spacing:.07em;text-transform:uppercase}
.tick+.tick{margin-left:8px}
.tick .box{width:22px;height:22px}
.tick .box::after{left:5px;top:0;width:6px;height:12px;border-width:0 2px 2px 0}
.com-js .tick:not(.in) .box::after,.com-js .ledger:not(.final) li:not(.packed) .box::after{opacity:0}

/* reveal: o estado escondido só existe com .com-js */
.com-js .rv{transition:opacity .6s ease,transform .6s ease}
.com-js .rv:not(.in){opacity:0;transform:translateY(18px)}

/* ---------- hero ---------- */
.s-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:clamp(640px,56vw,820px);padding:0;background:#fff;overflow:hidden}
.hero-img{order:2;width:100%;height:100%;max-width:none;object-fit:cover}
.hero-wrap{order:1;display:flex;align-items:flex-end;max-width:none;margin:0;padding-block:48px clamp(32px,4.5vw,64px);padding-inline:max(var(--pad),calc((100vw - 1320px)/2 + var(--pad))) var(--pad)}
.hero-card{width:100%}
.s-hero h1{font-size:clamp(46px,6.2vw,84px);overflow-wrap:anywhere}
.hero-sub{margin:0;font-size:clamp(17px,1.6vw,22px)}
.hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:22px 0 0}
.hero-links .ulink{display:inline-flex;align-items:center;min-height:48px}

/* ---------- faixa de oferta ---------- */
.s-ticket{display:flex;align-items:center;min-height:150px;padding-block:24px;background:var(--butter)}
.s-ticket .wrap{width:100%}
.ticket-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 36px}
.ticket-row p{margin:0}
.ticket-lead{font-size:15px;letter-spacing:.03em}
.ticket-row .ulink{display:inline-flex;align-items:center;min-height:44px;font-size:14px;letter-spacing:.04em}

/* ---------- lista de mala ---------- */
.grid-packing{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.ledger{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.ledger li{border-bottom:1px solid var(--ink)}
.ledger a,.ledger .line{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:20px;min-height:96px;padding:12px 0;color:inherit;text-decoration:none}
.ledger .item{font-size:clamp(24px,3.3vw,44px);line-height:1.05;letter-spacing:-.03em}
.ledger .tag{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.ledger a:hover .item{text-decoration:underline;text-underline-offset:6px}
.ledger li.packed .item{text-decoration:line-through;text-decoration-thickness:2px;color:var(--grey)}

/* ---------- peças (linhas de produto) ---------- */
.pieces{list-style:none;margin:24px 0;padding:0}
.piece{padding:14px 0;border-top:1px solid var(--line)}
.piece-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.piece p{margin:6px 0 0;font-size:15px;color:var(--soft)}

/* ---------- base layer ---------- */
.grid-base{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3.5fr) minmax(0,3.5fr);gap:clamp(24px,3vw,48px);align-items:start}
.base-col h3{margin:14px 0 6px;font-size:20px}
.base-col>p{font-size:15px;color:var(--soft)}
.base-col .pieces{margin-bottom:0}

/* ---------- laboratório de tecidos ---------- */
.s-lab{background:var(--ink);color:#f4efdc}
.s-lab h2,.s-lab h3{color:var(--butter)}
.s-lab .eyebrow{color:#d8d2bc}
.lab-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);margin-bottom:48px;align-items:start}
.lab-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.lab-tiles figure{margin:0}
.lab-tiles figcaption p{margin:6px 0 0;font-size:15px}
.lab-tiles h3{margin:14px 0 0;font-size:19px}

/* ---------- outerwear ---------- */
.grid-shell{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:start}
.pieces.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;margin:0}
.shell-title{text-align:right}
.shell-title .tick{margin:0 0 12px}

/* ---------- parede de down ---------- */
.s-wall{background:var(--off)}
.wall-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:end}
.wall{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-top:36px}
.wall-label{margin:0;padding-bottom:8px;border-bottom:2px solid var(--ink);font-size:15px;display:flex;justify-content:space-between;gap:12px}
.l-jacket{grid-column:1/5;grid-row:1}
.l-vest{grid-column:5/8;grid-row:1}
.wall figure{margin:0}
.wall img{width:100%;aspect-ratio:2/3;object-fit:contain}
.wall figcaption{margin-top:6px;font-size:14px}

/* ---------- midlayer ---------- */
.mid-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px;align-items:end;margin-bottom:36px}
.mid-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.mid-grid figure{margin:0}
.mid-grid figcaption{margin-top:14px}
.mid-grid figcaption p{margin:6px 0 0;font-size:15px;color:var(--soft)}

/* ---------- acessórios ---------- */
.grid-acc{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,64px);align-items:start}
.acc-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.acc-figs figure{margin:0}
.acc-figs figcaption{margin-top:8px;font-size:14px;color:var(--soft)}

/* ---------- second lift ---------- */
.grid-lift{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,64px);align-items:start}
.lift-fig{margin:0}
.lift-grades{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;margin:28px 0 0;padding:0}
.lift-grades li{padding:14px 0 0;border-top:3px solid var(--ink);font-size:16px;line-height:1.4}

/* ---------- manifesto ---------- */
.s-club{background:var(--ink);color:#f4efdc}
.s-club h2{color:var(--butter);font-size:clamp(44px,7vw,96px)}
.s-club .eyebrow{color:#d8d2bc}
.grid-club{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start}
.club-fig{margin:0}
.plate{background:var(--butter)}
.plate img{width:100%;mix-blend-mode:multiply}
.club-fig figcaption{margin-top:10px;font-size:13px;letter-spacing:.07em;color:#d8d2bc}

/* ---------- linhas do tempo ---------- */
.grid-tracks{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:clamp(24px,4vw,48px);align-items:start}
.tracks-figs,.years-figs{display:grid;gap:16px}
.tracks-figs img{width:100%;aspect-ratio:4/5;object-fit:cover}
.timeline{list-style:none;margin:24px 0 0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;padding:13px 0;border-top:1px solid var(--line)}
.when{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);padding-top:3px}
.what{font-size:17px;line-height:1.35}
.grid-years{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,64px);align-items:start}
.years-figs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.years-figs img{width:100%;aspect-ratio:4/5;object-fit:cover}
.years-figs .wide{grid-column:1/-1;aspect-ratio:16/10}

/* ---------- ano inteiro ---------- */
.year-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,64px);align-items:start;margin-bottom:36px}
.stack{list-style:none;margin:0;padding:0;font-size:clamp(44px,7vw,96px);line-height:.95;letter-spacing:-.04em;text-transform:uppercase}
.stack .off{color:#6b6666}
.year-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.year-grid figure{margin:0}
.year-grid img{width:100%;aspect-ratio:3/4;object-fit:cover}
.year-grid figcaption{margin-top:10px}
.year-grid h3{font-size:15px}
.year-grid .price{font-size:15px}
.year-grid figcaption p{margin:4px 0 0;font-size:14px;color:var(--soft)}

/* ---------- eventos ---------- */
.s-chat{padding-block:clamp(48px,6vw,64px)}
.chat-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,64px);align-items:end;margin-bottom:28px}
.chat-head p{margin:0}
.chat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}
.event img{width:100%;margin-bottom:12px}
.event:not(.big) img{aspect-ratio:3/4;object-fit:cover}
.event h3{font-size:18px;margin-bottom:8px}
.event p{font-size:15px;color:var(--soft)}
.event .price{font-size:15px;color:var(--ink)}
.event.big{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-content:start}
.event.big img{grid-column:1;grid-row:1/span 5;width:100%;height:100%;min-height:420px;margin-bottom:0;object-fit:cover}
.event.big>:not(img){grid-column:2}
.status{display:inline-block;margin:0 0 10px;padding:4px 10px;background:var(--ink);color:var(--butter)!important;font-size:13px!important;letter-spacing:.06em;text-transform:uppercase;justify-self:start}
.when-line{color:var(--ink)!important}
.slack-band{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:24px;align-items:center;margin-top:28px;padding-top:20px;border-top:2px solid var(--ink)}
.slack-band p{margin:6px 0 0;font-size:15px}

/* ---------- loja ---------- */
.s-store{background:var(--butter)}
.grid-store{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,64px);align-items:center}
.store-fig{margin:0}

/* ---------- cuidado ---------- */
.care-head{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:clamp(24px,5vw,64px);align-items:start;margin-bottom:36px}
.care-head figure{margin:0}
.care-head figcaption{margin-top:8px;font-size:14px;color:var(--soft)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px}
.steps li{padding:18px 0 0;border-top:3px solid var(--ink)}
.steps h3{margin-bottom:8px;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.steps p{font-size:15px;color:var(--soft)}

/* ---------- frete ---------- */
.s-ship{background:var(--spritz);color:var(--ink)}
.tags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.s-ship{padding-block:clamp(36px,4vw,48px)}
.s-ship h2{text-align:center;margin-bottom:.8em}
.s-wall{padding-block:clamp(40px,5vw,56px)}
.s-lab{padding-block:clamp(72px,9vw,128px)}
.s-tracks{padding-block:clamp(64px,9vw,128px)}
.s-care{padding-block:clamp(44px,5vw,60px)}
.s-gift{padding-block:clamp(88px,12vw,176px)}
.s-base,.s-years,.s-faq{background:var(--off)}
.tag-card{position:relative;padding:28px 24px 12px;background:#fff}
.tag-card::before{content:"";position:absolute;top:12px;right:12px;width:12px;height:12px;border-radius:50%;background:var(--spritz)}
.tag-card h3{margin-bottom:10px;font-size:22px}
.tag-card p{font-size:15px}

/* ---------- perguntas ---------- */
.grid-faq{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(32px,5vw,64px);align-items:start}
.faq-side img{margin-top:20px}
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0}
.qa{padding:18px 0;border-top:2px solid var(--ink)}
.qa dt{margin-bottom:6px;font-size:18px;line-height:1.25}
.qa dd{margin:0;font-size:15px;color:var(--soft)}

/* ---------- vale-presente ---------- */
.gift-wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.gift-wrap h2{max-width:18ch}
.gift-wrap .lead{max-width:34em}
.gift-wrap img{width:100%;max-width:420px;margin:8px 0 24px}
.amounts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.amounts li{display:inline-flex;align-items:center;justify-content:center;min-width:76px;min-height:44px;padding:0 16px;border:2px solid var(--ink);font-size:18px}

/* ---------- mala pronta ---------- */
.s-bag{background:var(--ink);color:#f4efdc}
.s-bag h2{color:var(--butter);font-size:clamp(40px,6vw,84px)}
.s-bag .eyebrow{color:#d8d2bc}
.s-bag .btn{background:var(--butter);color:var(--ink)}
.s-bag .ledger{border-top-color:#7d7868;margin-bottom:32px}
.s-bag .ledger li{border-bottom-color:#7d7868}
.s-bag .ledger .line{min-height:72px;grid-template-columns:32px minmax(0,1fr)}
.s-bag .ledger .item{font-size:clamp(22px,2.6vw,34px)}
.grid-bag{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,64px);align-items:start}
.bag-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bag-figs img:first-child{grid-column:1/-1;aspect-ratio:2/1;object-fit:cover;width:100%}
.bag-text{position:sticky;top:24px}

/* ---------- celular ---------- */
@media (max-width:900px){
  .longo{display:none}
  .curto{display:inline}
  .sticky,.bag-text,.event.big img{position:static}
  .grid-packing,.grid-base,.lab-head,.grid-shell,.wall-head,.mid-head,.grid-acc,.grid-lift,.grid-club,.grid-tracks,.grid-years,.year-head,.chat-head,.grid-store,.care-head,.grid-faq,.grid-bag{grid-template-columns:minmax(0,1fr)}
  .shell-title{order:-1;text-align:left}
  .pieces.cols{grid-template-columns:minmax(0,1fr)}
  .lab-tiles,.mid-grid,.year-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .l-jacket,.l-vest{grid-column:1/-1}
  .l-vest{grid-row:4}
  .chat-grid{grid-template-columns:minmax(0,1fr)}
  .event.big{grid-column:auto;grid-template-columns:minmax(0,1fr)}
  .event.big img,.event.big>:not(img){grid-column:1;grid-row:auto}
  .tags,.steps,.faq-list{grid-template-columns:minmax(0,1fr)}
  .steps li{margin-bottom:16px}
  .tracks-figs,.years-figs,.acc-figs,.bag-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tracks-fig img{max-width:320px}
  .ledger a,.ledger .line{grid-template-columns:32px minmax(0,1fr);gap:14px;min-height:80px}
  .ledger .tag{grid-column:2}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:2px}
  .slack-band{grid-template-columns:minmax(0,1fr)}
  .slack-band img{max-width:220px}
  .s-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-wrap{padding:36px var(--pad) 32px}
  .hero-img{height:420px;object-position:62% center}
  .ticket-row,.lift-grades{grid-template-columns:minmax(0,1fr)}
  .lift-grades li{margin-bottom:12px}
  .event.big img{height:auto;aspect-ratio:4/3;min-height:0;margin-bottom:12px}
  .tracks-figs img,.years-figs img{aspect-ratio:4/5}
}
@media (max-width:480px){
  .wall figcaption{font-size:13px}
  .year-grid figcaption p{font-size:13px}
  .tick+.tick{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
  .com-js .rv:not(.in){opacity:1;transform:none}
  .com-js .tick .box::after,.com-js .ledger li .box::after{opacity:1!important}
}
