/* ==========================================================
   SKATE MONKEY CREW — surf de asfalto, madeira e hang loose
   ========================================================== */

:root{
  --cream:  #F5EBDC;
  --cream2: #F2E5CF;
  --ink:    #1E1A16;
  --ink2:   #15120F;
  --orange: #E8622D;
  --mustard:#EFAF2F;
  --teal:   #176E6C;
  --teal-d: #114B4E;
  --brick:  #C03B2B;
  --pink:   #E8A0B4;
  --disp: 'Shrikhand', 'Georgia', serif;
  --body: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --bd: 3px solid var(--ink);
  --sh: 6px 6px 0 var(--ink);
  --r: 20px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
/* granulado oldschool por cima de tudo */
body::after{
  content:""; position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{ background:var(--orange); color:var(--cream); }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:3px dashed var(--orange); outline-offset:3px; }

.container{ width:min(1180px, 92vw); margin-inline:auto; }
[id]{ scroll-margin-top:96px; }

/* ---------- abertura: entrando na oficina ---------- */
body.intro-lock{ overflow:hidden; }
html.intro-seen .intro{ display:none; }
html.intro-seen body.intro-lock{ overflow:auto; }
.intro{ position:fixed; inset:0; z-index:200; overflow:hidden; cursor:pointer; }
.intro.gone{ display:none; }
.intro-half{
  position:absolute; left:0; right:0; height:50.15%;
  background:repeating-linear-gradient(98deg,
    #E7CB9E 0 14px, #DDBA84 14px 20px, #E2C293 20px 38px, #D2AC74 38px 44px);
  display:flex; justify-content:center;
  transition:transform .8s cubic-bezier(.7,0,.25,1);
}
.intro-top{ top:0; align-items:flex-end; padding-bottom:3rem; }
.intro-bottom{ bottom:0; align-items:flex-start; padding-top:2.4rem; }
/* camadas do compensado aparecendo na borda do corte */
.intro-top::after, .intro-bottom::before{
  content:""; position:absolute; left:0; right:0; height:9px; opacity:0;
  background:repeating-linear-gradient(90deg, #C9A06B 0 16px, #AA8050 16px 32px);
  transition:opacity .25s ease;
}
.intro-top::after{ bottom:0; }
.intro-bottom::before{ top:0; }
.intro.open .intro-top::after, .intro.open .intro-bottom::before{ opacity:1; }
.intro.open .intro-top{ transform:translateY(-103%); }
.intro.open .intro-bottom{ transform:translateY(103%); }
.intro-stencil{ text-align:center; opacity:0; transform:scale(1.6) rotate(-6deg); }
.intro.on .intro-stencil{
  opacity:1; transform:scale(1) rotate(-2deg);
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,1.5,.35,1);
}
.brand-logo{ border-radius:50%; object-fit:cover; display:block; }
.intro-stencil .brand-logo{ width:76px; height:76px; margin:0 auto .55rem; }
.intro-eyebrow{
  display:block; font-weight:700; text-transform:uppercase;
  letter-spacing:.3em; font-size:.7rem; color:var(--brick); margin-bottom:.15rem;
}
.intro-name{
  display:block; font-family:var(--disp); font-weight:400;
  font-size:clamp(1.7rem, 5vw, 3rem); color:var(--ink); line-height:1.1;
}
.intro-sub{
  font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  font-size:.78rem; color:#6B5430; opacity:0;
}
.intro.cutting .intro-sub{ opacity:1; transition:opacity .4s ease .15s; }
.intro-cut{
  position:absolute; top:50%; left:0; width:100%; height:0;
  border-top:4px dashed rgba(30,26,22,.62);
  transform:scaleX(0); transform-origin:left;
}
.intro.cutting .intro-cut{ transform:scaleX(1); transition:transform 1.7s linear; }
.intro-saw{
  position:absolute; top:50%; left:-150px;
  transform:translateY(-71%); pointer-events:none;
  filter:drop-shadow(3px 4px 0 rgba(30,26,22,.22));
}
.intro.cutting .intro-saw{ left:calc(100% + 150px); transition:left 1.7s linear; }
.intro-saw svg{ display:block; animation:sawjig .09s linear infinite alternate; }
@keyframes sawjig{
  from{ transform:translateX(-5px) rotate(2deg); }
  to{   transform:translateX(5px)  rotate(-2deg); }
}
.intro.open .intro-cut, .intro.open .intro-saw{ opacity:0; transition:opacity .25s ease; }
.intro .dustp{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:#C9A06B; pointer-events:none;
  animation:dustp .85s ease-out forwards;
}
.intro .dustp:nth-child(odd){ background:#B08A55; width:4px; height:4px; }
@keyframes dustp{
  from{ opacity:.95; transform:translate(0,0); }
  to{ opacity:0; transform:translate(var(--dx,20px), var(--dy,30px)); }
}
.intro-skip{
  position:absolute; right:20px; bottom:18px;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  border:var(--bd); border-radius:999px; background:var(--cream);
  font-family:var(--body); font-weight:700; font-size:.8rem;
  padding:.45rem 1rem; cursor:pointer; box-shadow:3px 3px 0 var(--ink);
  opacity:0; transition:opacity .3s ease .6s, transform .15s ease;
}
.intro.on .intro-skip{ opacity:1; }
.intro.open .intro-skip{ opacity:0; transition:opacity .2s ease; }
.intro-skip:hover{ transform:translate(-1px,-1px); }
.intro-sound{ right:auto; left:20px; }
@media (max-height: 480px){
  .intro-stencil .brand-logo{ width:46px; height:46px; margin-bottom:.25rem; }
  .intro-name{ font-size:1.45rem; }
  .intro-top{ padding-bottom:1.3rem; }
  .intro-bottom{ padding-top:.9rem; }
}

/* ---------- botões sticker ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.6rem; border:var(--bd); border-radius:999px;
  font-family:var(--body); font-weight:700; font-size:1rem;
  background:var(--cream); color:var(--ink);
  box-shadow:var(--sh); cursor:pointer; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn-primary{ background:var(--orange); color:var(--cream); }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-sm{ padding:.5rem 1.05rem; font-size:.88rem; box-shadow:4px 4px 0 var(--ink); }
.btn-lg{ padding:1.05rem 2.2rem; font-size:1.18rem; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:18px 0; transition:padding .25s ease, background .25s ease, border .25s ease;
}
.nav.scrolled{
  background:rgba(245,235,220,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:var(--bd); padding:10px 0;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:var(--disp); font-size:1.12rem; letter-spacing:.5px;
}
.brand .brand-logo{ width:44px; height:44px; transition:transform .3s ease; }
.brand:hover .brand-logo{ transform:rotate(-12deg); }
.nav-links{ display:flex; align-items:center; gap:1.5rem; }
.nav-link{
  text-decoration:none; font-weight:700; font-size:.92rem; letter-spacing:.04em;
  position:relative; padding:.2rem 0;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:4px;
  background:var(--orange); border-radius:4px;
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav-link:hover::after{ transform:scaleX(1); }

.burger{
  display:none; flex-direction:column; gap:5px; background:var(--mustard);
  border:var(--bd); border-radius:12px; padding:11px 10px; cursor:pointer;
  box-shadow:4px 4px 0 var(--ink); z-index:70;
}
.burger span{ width:24px; height:3.5px; background:var(--ink); border-radius:3px; transition:.25s ease; }
body.menu-open .burger span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }

.mmenu{
  position:fixed; inset:0; z-index:60; background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  transform:translateY(-102%); transition:transform .35s cubic-bezier(.65,.05,.36,1);
}
body.menu-open .mmenu{ transform:translateY(0); }
.mlink{
  font-family:var(--disp); font-size:2rem; text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.mlink:hover{ color:var(--orange); transform:rotate(-2deg); }
.mmenu-shaka{ font-size:2.4rem; margin-top:1rem; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:96px 0 64px; }
.hero-top{
  display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:2.2rem; row-gap:.3rem; margin-bottom:1.15rem;
}
.hero-top h1{ margin:0; font-size:clamp(1.85rem, 3.4vw, 2.7rem); }
.hero-top .hero-sub{
  margin:0; flex:1; min-width:300px; max-width:none;
  text-align:left; font-size:.97rem;
}
.hero-sub a{ color:var(--brick); font-weight:700; }
.sunburst{
  position:absolute; top:30px; left:50%; transform:translateX(-50%);
  width:min(720px, 95vw); opacity:.32; z-index:-1;
  animation:sunspin 90s linear infinite;
}
@keyframes sunspin{ to{ transform:translateX(-50%) rotate(360deg); } }
.hero-inner{ text-align:center; max-width:880px; }
.eyebrow-chip{
  display:inline-block; background:var(--mustard); border:var(--bd); border-radius:999px;
  padding:.42rem 1.15rem; font-weight:700; font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-1.5deg);
}
h1{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2.4rem, 5.6vw, 4.4rem);
  line-height:1.05; margin:.9rem 0 1rem;
}
h1 .hl{ color:var(--orange); text-shadow:5px 5px 0 var(--mustard); }
.hero-sub{
  font-size:1.07rem; max-width:620px; margin:0 auto 1.5rem; color:#4A4138;
}
.hero-sub strong{ color:var(--teal); }
.hero-ctas{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.hero-stats{
  display:flex; justify-content:center; gap:2.6rem; flex-wrap:wrap; margin-top:2.6rem;
}
.stat b{
  display:block; font-family:var(--disp); font-weight:400;
  font-size:1.8rem; color:var(--teal); line-height:1.1;
}
.stat small{
  text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; color:#6B5F50;
}
.stats-strip{ justify-content:flex-start; margin:-1rem 0 2.6rem; }

/* ferramentas do palco 3D — tudo ícone, numa linha só */
.stage-tools{
  display:flex; flex-wrap:nowrap; gap:.4rem; align-items:center;
  justify-content:space-between; margin:0 0 .8rem;
  position:relative; z-index:9;
}
.stage-views, .stage-tools-right{ display:flex; flex-wrap:nowrap; gap:.4rem; }
.stage-tools .chip{
  font-size:1rem; line-height:1; padding:.36rem .52rem;
  box-shadow:2px 2px 0 var(--ink);
}
.sview.active, .stage-spin.active{ background:var(--teal); color:var(--cream); }

/* preview do pranchão em tela cheia */
.smc-preview{
  position:fixed; inset:0; z-index:180; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(30,26,22,.82);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.smc-preview.show{ display:flex; }
.smc-preview img{
  max-width:96vw; max-height:88vh; border:var(--bd); border-radius:18px;
  box-shadow:10px 10px 0 rgba(0,0,0,.35); background:var(--cream);
}
.smc-preview-x{
  position:absolute; top:18px; right:20px;
  width:46px; height:46px; border:var(--bd); border-radius:50%;
  background:var(--cream); color:var(--ink);
  font-size:1.05rem; font-weight:700; cursor:pointer;
  box-shadow:4px 4px 0 var(--ink); transition:transform .15s ease;
}
.smc-preview-x:hover{ transform:translate(-1px,-1px); }

/* palco 3D (preenche o board-wrap) */
.board3d{ display:none; position:absolute; inset:0; }
.board3d.on{ display:block; }
.board3d canvas{
  width:100%; height:100%; display:block;
  touch-action:pan-y; cursor:grab; border-radius:18px;
}
.board3d canvas:active{ cursor:grabbing; }
.b3d-hint{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(30,26,22,.6); background:rgba(245,235,220,.75);
  padding:.28rem .8rem; border-radius:999px; pointer-events:none; white-space:nowrap;
  transition:opacity .6s ease;
}
.b3d-hint.hide{ opacity:0; }
.b3d-load{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:700; text-align:center; padding:1rem;
}

.hero-board{
  position:relative; z-index:8; width:min(1080px, 94vw);
  margin:1.5rem auto -110px; cursor:pointer;
  animation:float 5s ease-in-out infinite alternate;
}
.hero-board svg{
  width:100%; height:auto;
  filter:drop-shadow(10px 14px 0 rgba(30,26,22,.16));
}
@keyframes float{
  from{ transform:translateY(0) rotate(-1deg); }
  to{ transform:translateY(-14px) rotate(-.2deg); }
}
.hero-board svg.spin{ animation:spin .9s cubic-bezier(.2,.7,.3,1) 1; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.stamp{
  position:absolute; z-index:9; width:100px; height:100px; border-radius:50%;
  border:3px dashed var(--ink); background:var(--mustard);
  display:grid; place-items:center; text-align:center; padding:10px;
  font-weight:800; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:var(--sh); pointer-events:none;
  animation:wiggle 4s ease-in-out infinite alternate;
}
.stamp-a{ bottom:-26px; left:-26px; transform:rotate(-10deg); }
.stamp-b{ bottom:-26px; right:-20px; background:var(--pink); animation-delay:1.2s; }
@keyframes wiggle{
  from{ rotate:-4deg; } to{ rotate:5deg; }
}

/* ---------- marquees ---------- */
.marquee{
  position:relative; z-index:7; overflow:hidden;
  border-top:var(--bd); border-bottom:var(--bd);
  padding:.72rem 0; margin:-26px 0;
}
.tilt-l{ transform:rotate(-1.3deg) scale(1.04); }
.tilt-r{ transform:rotate(1.2deg) scale(1.04); }
.mq-y{ background:var(--mustard); }
.mq-o{ background:var(--orange); color:var(--cream); }
.m-track{ display:flex; width:max-content; animation:mscroll 28s linear infinite; }
.marquee:hover .m-track{ animation-play-state:paused; }
.m-set{ display:flex; align-items:center; gap:2.2rem; padding-right:2.2rem; }
.m-set span{
  font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  font-size:.92rem; white-space:nowrap;
}
.m-set i{ font-style:normal; color:var(--brick); }
.mq-o .m-set i{ color:var(--mustard); }
@keyframes mscroll{ to{ transform:translateX(-50%); } }

/* ---------- seções ---------- */
.sec{ position:relative; padding:110px 0 96px; }
.dark{ background:var(--ink); color:var(--cream); }
.tealbg{ background:var(--teal-d); color:var(--cream); }
.sec-crew{ padding-top:175px; }
.sec-builder{ padding-top:150px; }
.has-wave{ padding-top:170px; }
.wave-top{
  position:absolute; top:-1px; left:0; width:100%; height:64px;
}
.wave-ink path{ fill:var(--ink); }
.wave-cream path{ fill:var(--cream); }
.wave-teal path{ fill:var(--teal-d); }

.sec-head{ margin-bottom:3rem; }
.eyebrow{
  font-weight:700; text-transform:uppercase; letter-spacing:.2em;
  font-size:.78rem; color:var(--orange);
}
.tealbg .eyebrow{ color:var(--mustard); }
h2{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2.1rem, 4.6vw, 3.3rem); line-height:1.1; margin:.35rem 0 .5rem;
}
.squig{ width:140px; height:14px; }
.squig path{ stroke:var(--orange); }
.tealbg .squig path, .dark .squig path{ stroke:var(--mustard); }
.sec-sub{ max-width:640px; margin-top:1rem; font-size:1.06rem; color:#5A5045; }
.tealbg .sec-sub, .dark .sec-sub{ color:#D8CCBC; }
.pilot-badge{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
  background:var(--mustard); color:var(--ink); border:var(--bd); border-radius:999px;
  padding:.45rem 1.05rem; font-weight:700; font-size:.82rem; box-shadow:3px 3px 0 var(--ink);
}
.pilot-note{
  font-size:.78rem; color:#8A7B68; font-style:italic; text-align:center; margin-top:.7rem;
}

/* ---------- a crew ---------- */
.crew-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:center;
}
.crew-story p{
  font-size:1.08rem; line-height:1.8; color:#D8CCBC; margin-bottom:1.15rem;
}
.crew-story strong{ color:var(--mustard); }
.vcards{ display:grid; gap:1.15rem; }
.vcard{
  display:flex; gap:1rem; align-items:flex-start;
  border:3px solid var(--cream); border-radius:var(--r);
  background:rgba(245,235,220,.05); padding:1.25rem 1.4rem;
  box-shadow:6px 6px 0 var(--orange);
  transition:transform .2s ease;
}
.vcard:hover{ transform:translate(-3px,-3px); }
.vemoji{ font-size:1.7rem; line-height:1.3; }
.vcard h3{ font-family:var(--disp); font-weight:400; font-size:1.08rem; margin-bottom:.2rem; }
.vcard p{ color:#CFC2B0; font-size:.95rem; line-height:1.6; }

/* ---------- o rolê semanal ---------- */
.role-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.role-card{
  display:flex; flex-direction:column; gap:1.5rem;
  background:var(--cream2); border:var(--bd); border-radius:26px;
  padding:1.9rem 2rem; box-shadow:var(--sh);
}
.role-info{ display:flex; flex-direction:column; gap:1.05rem; }
.role-item{ display:flex; align-items:center; gap:.85rem; }
.role-ic{ font-size:1.9rem; line-height:1; }
.role-item b{ display:block; font-family:var(--disp); font-weight:400; font-size:1.1rem; }
.role-item small{ display:block; color:#8A7B68; font-size:.8rem; margin-top:.1rem; }
.role-card .btn{ width:100%; justify-content:center; }

/* ---------- o simulador ---------- */
.sim-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:start;
}
.diagram-card{
  border:var(--bd); border-radius:24px; background:var(--cream2);
  box-shadow:8px 8px 0 var(--ink); padding:1.6rem 1.4rem 1.2rem;
}
.diagram-card svg{ width:100%; height:auto; font-family:var(--body); }
.diagram-cap{
  text-align:center; font-size:.9rem; color:#6B5F50; margin-top:.8rem; font-weight:500;
}
.sim-steps .step{ display:flex; gap:1.15rem; margin-bottom:1.5rem; }
.step-num{
  flex-shrink:0; width:54px; height:54px; display:grid; place-items:center;
  font-family:var(--disp); font-size:1.15rem; color:var(--cream);
  background:var(--teal); border:var(--bd); border-radius:16px;
  box-shadow:4px 4px 0 var(--ink); transform:rotate(-3deg);
}
.step:nth-child(even) .step-num{ background:var(--orange); transform:rotate(3deg); }
.step h3{ font-family:var(--disp); font-weight:400; font-size:1.12rem; margin-bottom:.2rem; }
.step p{ color:#5A5045; line-height:1.65; font-size:.99rem; }
.step strong{ color:var(--brick); }
.specs{
  border:var(--bd); border-radius:var(--r); background:#FFF8EA;
  box-shadow:var(--sh); padding:1.4rem 1.6rem; margin-top:1.8rem;
}
.specs h3{
  font-family:var(--disp); font-weight:400; font-size:1.1rem; margin-bottom:.7rem;
}
.specs ul{ list-style:none; }
.specs li{
  padding:.4rem 0; font-size:.98rem;
  border-bottom:2px dashed rgba(30,26,22,.15);
}
.specs li:last-child{ border-bottom:none; }
.specs strong{ color:var(--teal); }

/* ---------- manobras ---------- */
.tricks{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.trick{
  background:var(--cream); color:var(--ink);
  border:var(--bd); border-radius:22px; padding:1.5rem 1.2rem 1.6rem;
  box-shadow:7px 7px 0 rgba(0,0,0,.3); text-align:center;
  transition:transform .22s ease;
}
.trick:hover{ transform:translateY(-7px) rotate(-1.3deg); }
.ticon{ width:86px; height:auto; margin:0 auto .9rem; }
.trick h3{ font-family:var(--disp); font-weight:400; font-size:1.15rem; margin-bottom:.4rem; }
.trick p{ font-size:.9rem; color:#5A5045; line-height:1.6; }

/* ---------- galeria ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:160px;
  gap:1rem; margin-bottom:2.6rem;
}
.gphoto{
  position:relative; margin:0; border-radius:18px; overflow:hidden;
  border:3px solid var(--cream); box-shadow:5px 5px 0 rgba(0,0,0,.35);
}
.gphoto picture{ display:block; width:100%; height:100%; }
.gphoto img{ width:100%; height:100%; object-fit:cover; display:block; }
.gphoto-wide{ grid-column:span 2; grid-row:span 2; }
.testimonial{
  display:flex; align-items:center; gap:1.6rem; max-width:720px; margin:0 auto;
  background:rgba(245,235,220,.06); border:2px solid var(--cream); border-radius:22px;
  padding:1.6rem 1.9rem;
}
.testimonial-photo{
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  border:3px solid var(--mustard); flex-shrink:0;
}
.testimonial blockquote{ margin:0; }
.testimonial p{ font-size:1.05rem; font-style:italic; color:var(--cream); line-height:1.6; margin-bottom:.5rem; }
.testimonial cite{ font-size:.82rem; color:#CFC2B0; font-style:normal; }

/* ---------- loja ---------- */
.shop-cats{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.6rem; }
.chip.soon{
  opacity:.55; cursor:default; box-shadow:none; border-style:dashed;
  display:inline-flex; align-items:center; gap:.4rem;
}
.chip.soon i{
  font-style:normal; font-weight:700; font-size:.64rem; text-transform:uppercase;
  letter-spacing:.06em; background:var(--ink); color:var(--cream);
  padding:.15rem .42rem; border-radius:999px;
}
.shop-single{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.8rem; align-items:start; }
.prod-stage{ padding-bottom:1.1rem; }
.shirt-mock{ position:relative; width:100%; max-width:380px; margin:0 auto; }
.shirt-mock .shirt-shape{ width:100%; height:auto; display:block; }
.shirt-print{
  position:absolute; left:50%; transform:translateX(-50%);
  border-radius:50%; object-fit:cover; display:none;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.shirt-print-front{ width:15%; top:20%; left:60%; }
.shirt-print-back{ width:40%; top:35%; left:50%; }
.shirt-mock[data-view="frente"] .shirt-print-front{ display:block; }
.shirt-mock[data-view="verso"] .shirt-print-back{ display:block; }
.prod-options h3{ font-family:var(--disp); font-weight:400; font-size:1.5rem; margin:.3rem 0 .6rem; }
.prod-desc{ font-size:.98rem; color:#5A5045; line-height:1.6; margin-bottom:1.3rem; }
.prod-cta{ width:100%; justify-content:center; margin-top:1.3rem; }

/* ---------- faq ---------- */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:.9rem; }
.faq-item{
  background:rgba(245,235,220,.06); border:2px solid var(--cream);
  border-radius:16px; padding:.2rem 1.3rem;
}
.faq-item summary{
  cursor:pointer; padding:1.1rem 0; font-family:var(--disp); font-weight:400; font-size:1.05rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.4rem; color:var(--mustard); flex-shrink:0;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ padding-bottom:1.2rem; margin:0; color:#D8CCBC; font-size:.95rem; line-height:1.6; }

/* ---------- builder ---------- */
.noscript-note{
  text-align:center; font-weight:700; background:var(--mustard);
  border:var(--bd); border-radius:14px; padding:1rem; margin-bottom:2rem;
}
.builder-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:2.8rem; align-items:start;
}
.board-stage{
  position:relative;
  border:var(--bd); border-radius:26px;
  background:
    radial-gradient(rgba(30,26,22,.08) 1.5px, transparent 1.6px) 0 0/18px 18px,
    var(--cream2);
  box-shadow:8px 8px 0 var(--ink); padding:1.2rem 1.2rem .8rem;
}
.stage-badge{
  position:absolute; top:-17px; right:24px; transform:rotate(3deg);
  background:var(--pink); border:var(--bd); border-radius:999px;
  padding:.35rem .95rem; font-weight:800; font-size:.76rem;
  letter-spacing:.08em; text-transform:uppercase; box-shadow:4px 4px 0 var(--ink);
}
.board-wrap{
  position:relative; aspect-ratio:16/9;
  display:flex; align-items:center;
}
.board-wrap svg{ width:100%; height:auto; }
.stage-note{
  text-align:center; font-size:.74rem; color:#8A7B68; margin-top:.55rem; font-style:italic;
}
/* abas do montador */
.btabs{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.9rem; }
.btab{
  border:var(--bd); background:var(--cream); border-radius:999px;
  padding:.48rem .95rem; font-family:var(--body); font-weight:700; font-size:.84rem;
  cursor:pointer; box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s ease, background .15s ease;
}
.btab:hover{ transform:translateY(-2px); }
.btab.active{ background:var(--ink); color:var(--cream); }
.bpanels{
  border:3px dashed rgba(30,26,22,.3); border-radius:18px;
  background:rgba(255,253,247,.65); padding:1.05rem 1.15rem;
  min-height:158px;
}
.bpanel{ animation:panelin .25s ease; }
@keyframes panelin{ from{ opacity:0; transform:translateY(6px); } }
.opt-hint{ font-size:.74rem; color:#8A7B68; font-style:italic; margin-top:.5rem; }

.opt-group{ margin-bottom:.95rem; }
.opt-group:last-child{ margin-bottom:0; }
.opt-group h4{
  text-transform:uppercase; letter-spacing:.13em; font-size:.72rem;
  margin-bottom:.45rem; color:#4A4138;
}
.swatches{ display:flex; flex-wrap:wrap; gap:.5rem; }
.swatch{
  width:33px; height:33px; border-radius:50%;
  border:2.5px solid var(--ink); box-shadow:2.5px 2.5px 0 var(--ink);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  padding:0; background:#ccc;
}
.swatch:hover{ transform:translateY(-3px); }
.swatch.active{
  box-shadow:0 0 0 3px var(--cream), 0 0 0 6px var(--orange), 3px 3px 0 6px rgba(0,0,0,0);
  transform:scale(1.06);
}
.swatch.wood{
  background:repeating-linear-gradient(100deg,
    #E7CB9E 0 6px, #D8B581 6px 9px, #E2C293 9px 16px, #D2AC74 16px 19px);
}
.swatch.woodlt{
  background:repeating-linear-gradient(100deg,
    #F2E3C4 0 6px, #E7CFA0 6px 9px, #EDD8B0 9px 16px, #E3CB98 16px 19px);
}
.swatch.wooddk{
  background:repeating-linear-gradient(100deg,
    #C49A63 0 6px, #A87C46 6px 9px, #B58A55 9px 16px, #9E743E 16px 19px);
}
/* swatch arco-íris: qualquer cor liberada */
.swatch.custom{
  position:relative; display:inline-grid; place-items:center;
  background:conic-gradient(#E8622D,#EFAF2F,#8BC34A,#176E6C,#3F51B5,#9C27B0,#E8A0B4,#E8622D);
}
.swatch.custom input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; border:0; padding:0;
}
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{
  border:var(--bd); background:var(--cream); border-radius:999px;
  padding:.4rem .85rem; font-family:var(--body); font-weight:700; font-size:.8rem;
  cursor:pointer; box-shadow:3px 3px 0 var(--ink); transition:.16s ease;
}
.chip:hover{ transform:translateY(-2px); }
.chip.active{ background:var(--teal); color:var(--cream); }
#boardName{
  width:100%; max-width:340px;
  border:var(--bd); border-radius:12px; padding:.55rem .9rem;
  font-family:var(--body); font-weight:700; font-size:.92rem; letter-spacing:.1em;
  text-transform:uppercase; background:#FFFDF7; box-shadow:3px 3px 0 var(--ink);
}
#boardName:focus{ outline:3px dashed var(--orange); outline-offset:2px; }
.builder-actions{
  display:flex; gap:.65rem; flex-wrap:wrap;
  margin-top:1rem; padding-top:.9rem;
  border-top:3px dashed rgba(30,26,22,.25);
}
.builder-actions .btn{
  padding:.55rem 1rem; font-size:.86rem; box-shadow:4px 4px 0 var(--ink);
}
/* linha de export: formato + baixar/compartilhar */
.export-row{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-top:.8rem;
}
.export-label{
  text-transform:uppercase; letter-spacing:.1em; font-size:.72rem;
  font-weight:700; color:#4A4138;
}
.fmt-chips{
  display:flex; gap:0; border:var(--bd); border-radius:999px;
  overflow:hidden; box-shadow:3px 3px 0 var(--ink);
}
.fmt{
  border:0; background:var(--cream); cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:.78rem;
  padding:.4rem .8rem; border-left:2px solid var(--ink);
  transition:background .15s ease;
}
.fmt:first-child{ border-left:0; }
.fmt.active{ background:var(--teal); color:var(--cream); }
.export-row .btn{ margin-left:auto; }

/* toast (aviso flutuante do pedido) */
.smc-toast{
  position:fixed; left:50%; bottom:24px;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, 20px);
  background:var(--ink); color:var(--cream);
  font-weight:700; font-size:.9rem; line-height:1.4;
  padding:.85rem 1.3rem; border:2px solid var(--mustard); border-radius:18px;
  box-shadow:6px 6px 0 rgba(0,0,0,.25);
  z-index:150; opacity:0; pointer-events:none; max-width:90vw; text-align:center;
  transition:opacity .3s ease, transform .3s ease;
}
.smc-toast.show{ opacity:1; transform:translate(-50%, 0); }
.tip{
  margin-top:1.5rem; background:var(--mustard); border:var(--bd); border-radius:16px;
  padding:.95rem 1.15rem; font-size:.93rem; box-shadow:4px 4px 0 var(--ink); line-height:1.55;
}

/* ---------- instagram cta ---------- */
.igcta{ text-align:center; padding:170px 0 120px; }
.ig-monkey{ width:96px; height:96px; margin:0 auto 1.2rem; }
.igcta h2{ margin-bottom:.6rem; }
.igcta p{ color:#C9BCAA; font-size:1.1rem; margin-bottom:1.8rem; }

/* ---------- footer ---------- */
.footer{ background:var(--ink2); color:#B9AC99; padding:60px 0 26px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.2rem;
}
.f-brand{ font-family:var(--disp); color:var(--cream); font-size:1.4rem; margin-bottom:.5rem; }
.f-motto{ font-size:.95rem; line-height:1.7; max-width:300px; }
.footer h4{
  color:var(--mustard); text-transform:uppercase; letter-spacing:.15em;
  font-size:.78rem; margin-bottom:.8rem;
}
.footer a{
  display:block; text-decoration:none; padding:.22rem 0; font-size:.95rem;
  transition:color .18s ease, transform .18s ease;
}
.footer a:hover{ color:var(--orange); transform:translateX(4px); }
.footer p{ font-size:.95rem; line-height:1.7; }
.footer-bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:2px solid rgba(245,235,220,.12); padding-top:1.4rem;
  font-size:.84rem;
}

/* ---------- animações de entrada ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.stagger > *{ opacity:0; transform:translateY(26px); transition:opacity .65s ease, transform .65s ease; }
.stagger.in > *{ opacity:1; transform:none; }
.stagger.in > *:nth-child(2){ transition-delay:.12s; }
.stagger.in > *:nth-child(3){ transition-delay:.24s; }
.stagger.in > *:nth-child(4){ transition-delay:.36s; }
.stagger.in > *:nth-child(5){ transition-delay:.48s; }

/* ---------- responsivo ---------- */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .crew-grid, .sim-grid, .builder-grid, .shop-single{ grid-template-columns:1fr; gap:2.4rem; }
  .tricks{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .stamp{ display:none; }
  .role-cards{ grid-template-columns:1fr; }
  .hero{ padding-top:108px; }
  .hero-board{ margin-bottom:-60px; }
  .sec-crew{ padding-top:140px; }
}
@media (max-width: 700px){
  .b3d-hint{
    white-space:normal; font-size:.6rem; line-height:1.5;
    max-width:86%; text-align:center; bottom:8px; padding:.3rem .75rem;
  }
  .board-stage{ padding:.9rem .85rem .7rem; }
  .bpanels{ padding:.9rem .9rem; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
  .gphoto-wide{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width: 600px){
  .tricks{ grid-template-columns:1fr; }
  .testimonial{ flex-direction:column; text-align:center; padding:1.8rem 1.4rem; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:1.6rem; }
  .builder-actions .btn{ flex:1; justify-content:center; }
  .marquee{ margin:-18px 0; }
}
@media (max-width: 380px){
  .intro-skip{ font-size:.72rem; padding:.4rem .75rem; right:12px; }
  .intro-sound{ left:12px; right:auto; }
}
/* alvos de toque maiores em telas de dedo */
@media (pointer: coarse){
  .swatch{ width:42px; height:42px; }
  .chip{ padding:.5rem 1rem; }
  .btab{ padding:.55rem 1.05rem; }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .m-track, .hero-board, .sunburst, .stamp{ animation:none !important; }
  .reveal, .stagger > *{ opacity:1; transform:none; transition:none; }
  .intro{ display:none; }
  body.intro-lock{ overflow:auto; }
  .bpanel{ animation:none; }
}