/* GIUMAG International: estilos */
:root{
  --canvas:#F3EADD;
  --panel:#EADCC8;
  --accent:#A8461F;
  --accent-hover:#8C3816;
  --accent-muted:#D9A27F;
  --sea:#2D5457;
  --sea-deep:#22413F;
  --text-secondary:#6A5747;
  --text-primary:#231812;
  --light:#FBF4EA;
  --line:rgba(35,24,18,.16);
  --line-strong:rgba(35,24,18,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.45,0,.2,1);
  --gutter:clamp(16px,5vw,72px);
  --tshadow:0 1px 2px rgba(20,10,5,.9),0 3px 12px rgba(20,10,5,.7),0 10px 44px rgba(20,10,5,.75);
  --display:'Italiana',Georgia,serif;
  --text:'Jost',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font:300 18px/1.6 var(--text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;letter-spacing:.005em}
p{margin:0}
.mono{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em}
.label{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:18px}
.lede{max-width:46ch;color:var(--text-secondary);font-size:1.08rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--text-primary);color:var(--light);padding:10px 16px;border-radius:8px;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:16px}

/* ---------- ambiente: grão e poeira dourada ---------- */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:150;opacity:.07;mix-blend-mode:multiply;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient i{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,rgba(217,162,127,.9),rgba(217,162,127,0) 70%);animation:dust 80s linear infinite alternate}
.ambient i:nth-child(1){left:8%;top:30%;animation-delay:-12s}
.ambient i:nth-child(2){left:22%;top:70%;animation-duration:96s;animation-delay:-40s}
.ambient i:nth-child(3){left:47%;top:18%;animation-duration:70s;animation-delay:-5s}
.ambient i:nth-child(4){left:63%;top:58%;animation-delay:-55s}
.ambient i:nth-child(5){left:81%;top:26%;animation-duration:110s;animation-delay:-22s}
.ambient i:nth-child(6){left:91%;top:78%;animation-duration:88s;animation-delay:-63s}
.ambient i:nth-child(7){left:35%;top:88%;animation-duration:74s;animation-delay:-31s}
@keyframes dust{0%{transform:translate(0,0);opacity:.2}50%{opacity:.9}100%{transform:translate(60px,-140px);opacity:.3}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- navegação ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:76px;padding:0 var(--gutter);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;color:var(--light);transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.nav::before{content:"";position:absolute;inset:0 0 -40px 0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(28,14,6,.55),rgba(28,14,6,0));transition:opacity .5s var(--ease)}
.nav.solid::before{opacity:0}
.nav a,.nav button{text-shadow:0 1px 6px rgba(20,10,5,.45)}
.nav.solid a,.nav.solid button{text-shadow:none}
.nav .brand img{width:118px;height:auto;filter:invert(1) brightness(1.1);transition:filter .5s var(--ease)}
.nav .links{display:flex;justify-content:center;gap:clamp(16px,2.4vw,36px);list-style:none;margin:0;padding:0}
.nav .links a{text-decoration:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;position:relative;padding:6px 0}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav .links a:hover::after{transform:scaleX(1)}
.nav .tools{display:flex;align-items:center;gap:12px}
.seg{display:inline-flex;border:1px solid currentColor;border-radius:999px;padding:2px;opacity:.9}
.seg button{border:0;background:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;padding:5px 9px;border-radius:999px;transition:background .3s var(--ease),color .3s var(--ease)}
.seg button[aria-pressed="true"]{background:currentColor}
.seg button[aria-pressed="true"]{background:var(--light);color:var(--text-primary)}
.bag-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid currentColor;background:none;border-radius:999px;padding:7px 14px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.bag-btn .count{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--accent);color:#FFF7EE;font-size:.68rem;letter-spacing:0}
.nav.solid{background:rgba(243,234,221,.9);color:var(--text-primary);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.solid .brand img{filter:none}
.nav.solid .seg button[aria-pressed="true"]{background:var(--text-primary);color:var(--canvas)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#FFF7EE;text-decoration:none;border:1px solid var(--accent);border-radius:999px;padding:14px 28px;font:500 .95rem/1 var(--text);letter-spacing:.05em;text-shadow:none;transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:rgba(251,244,234,.75);color:var(--light)}
.btn.ghost:hover{background:rgba(251,244,234,.14)}
.btn.wide{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:6px 0;color:var(--accent);font:500 .95rem var(--text);letter-spacing:.04em;text-decoration:none;border-bottom:1px solid currentColor}
.link-arrow::after{content:"→";transition:transform .35s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}
.link-arrow.light{color:var(--light)}
@media (pointer:coarse){.btn,.link-arrow,.seg button,.bag-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- hero ---------- */
.hero{position:relative;height:460vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#2a1a10;color:var(--light)}
.poster,#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
#hero-video{opacity:0;transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 95% at 50% 45%,rgba(28,14,6,0) 40%,rgba(28,14,6,.55) 100%),linear-gradient(to bottom,rgba(28,14,6,.35),rgba(28,14,6,0) 18%)}
.band{position:absolute;top:50%;transform:translateY(-50%);width:min(27vw,420px);text-shadow:var(--tshadow);opacity:0;will-change:opacity}
.band.left{left:4vw}
.band.right{right:4vw;text-align:right}
.band::before{content:"";position:absolute;inset:-38% -30%;z-index:-1;pointer-events:none;opacity:calc(.3 + .7*var(--k,1));background:radial-gradient(ellipse 62% 56% at 50% 50%,rgba(26,12,5,var(--pk,.66)) 0%,rgba(26,12,5,calc(var(--pk,.66)*.62)) 48%,rgba(26,12,5,0) 76%)}
.band-1{--pk:.7}.band-2{--pk:.68}.band-3{--pk:.72;top:54%}
.band h1,.band h2{font-size:clamp(2.3rem,3.6vw,4.1rem)}
.band .big{font-family:var(--display);font-size:clamp(2.1rem,3.3vw,3.7rem);line-height:1.1}
.band .kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:20px;opacity:.92}
.band .sub{margin-top:20px;font-size:1.06rem;max-width:34ch;color:#F4E9DA}
.band .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.split .w{display:inline-block;white-space:nowrap}
.split .c{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* entrada 1, trama: letras chegam alternando de cima e de baixo */
.fx-weave .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*var(--jy,0px)))}
/* entrada 2, deriva para baixo */
.fx-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
/* entrada 3, subida em etapas */
.fx-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*30px))}
.fx-rise .sub{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.fx-rise .ctas{--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}
.static-copy{display:none}
.loader{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--light);transition:opacity .6s var(--ease)}
.ring{width:34px;height:34px;transform:rotate(-90deg)}
.ring-fill{transition:stroke-dashoffset .2s linear}
.stage.video-ready .ring{opacity:0;transition:opacity .6s var(--ease)}
.chip{background:rgba(26,14,8,.5);border:1px solid rgba(251,244,234,.28);border-radius:10px;padding:5px 12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 1px 3px rgba(20,10,5,.85)}
.stage.scrolled .loader{opacity:0}
@media (max-height:560px){.loader{display:none}}

/* hero estático: os cinco portões (idênticos aos do JS) */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:100svh;min-height:600px}
  .poster{background-image:url("hero-ending.jpg");background-position:50% 40%}
  #hero-video,.band,.loader{display:none}
  .scrim{background:linear-gradient(to bottom,rgba(28,14,6,.45),rgba(28,14,6,0) 22%,rgba(28,14,6,0) 42%,rgba(28,14,6,.82) 100%)}
  .static-copy{display:block;position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(32px,7vh,72px);text-shadow:var(--tshadow);max-width:560px}
  .static-copy h1{font-size:clamp(2.5rem,9vw,4.2rem)}
  .static-copy .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:16px}
  .static-copy .sub{margin:16px 0 26px;color:#F4E9DA;max-width:34ch}
}

/* ---------- conteúdo ---------- */
main{position:relative;z-index:1;outline:none}
section{position:relative}
.thread{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.thread path{fill:none;stroke:var(--accent-muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.thread{display:none}}
.story,.chapter.knot,.shop,.film,.faq,.contact{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto}

/* revelação coreografada */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*110ms)}
.in .rv{opacity:1;transform:none}
.in.done .rv{transition-delay:0s}

/* história */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(96px,13vw,190px) 0 clamp(80px,10vw,150px)}
.story h2{font-size:clamp(2.6rem,5.4vw,5.2rem);max-width:12ch;margin-bottom:28px}
.story-img{margin:0;border-radius:200px 200px 6px 6px;overflow:hidden;aspect-ratio:3/4}
.story-img img{width:100%;height:100%;object-fit:cover}

/* capítulo I */
.chapter-head{display:grid;grid-template-columns:auto 1fr 1fr;gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.numeral{font-family:var(--display);font-size:clamp(6rem,14vw,12rem);line-height:.8;color:var(--accent-muted)}
.chapter h2{font-size:clamp(3rem,6vw,5.6rem)}
.knot{padding:clamp(60px,8vw,120px) 0 clamp(90px,12vw,170px)}
.knot-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.8vw,24px);align-items:start}
.knot-grid figure{margin:0;overflow:hidden;border-radius:4px}
.knot-grid img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform 1.4s var(--ease)}
.knot-grid figure:hover img{transform:scale(1.035)}
.g1{grid-column:1/6;grid-row:1/3;aspect-ratio:3/4.4}
.g2{grid-column:6/9;grid-row:1;aspect-ratio:3/4;margin-top:18%!important}
.g3{grid-column:6/9;grid-row:2;aspect-ratio:3/4}
.g4{grid-column:9/13;grid-row:2;aspect-ratio:3/4}
.tie{grid-column:9/13;grid-row:1;align-self:center;padding:24px 0 24px 8%}
.tie-btn{display:flex;align-items:center;gap:18px;background:none;border:0;padding:0;text-align:left;font:400 1.02rem var(--text);user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
.tie-btn svg{width:92px;height:92px;flex:none;transform:rotate(-90deg)}
.tie-track{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.tie-prog{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));stroke-linecap:round}
.tie-knot{fill:none;stroke:var(--text-primary);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));transform:rotate(90deg);transform-origin:60px 60px}
.tie-ghost{fill:none;stroke:var(--accent-muted);stroke-width:2;stroke-dasharray:3 5;stroke-linecap:round;opacity:.8;transform:rotate(90deg);transform-origin:60px 60px}
.tie-reveal{margin-top:26px}
.tie-reveal>*{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.tie-reveal .link-arrow{transition-delay:.25s;margin-top:14px}
.tie.tied .tie-reveal>*{opacity:1;transform:none}
.tie-done{font-family:var(--display);font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.15}

/* capítulo II */
.brush{background:var(--sea);color:var(--light);padding:0 0 clamp(80px,10vw,150px)}
.brush .label{color:#DCCDB9}
.brush .lede{color:#E9DECF}
.brush-hero{margin:0;position:relative;height:min(92vh,900px);overflow:hidden}
.brush-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.brush-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(34,65,63,.92),rgba(34,65,63,.2) 55%,rgba(34,65,63,0))}
.brush-card{position:absolute;z-index:1;left:var(--gutter);bottom:clamp(36px,6vw,80px);max-width:560px}
.brush-card .numeral{color:rgba(217,162,127,.85);display:block;margin-bottom:6px}
.brush-card h2{margin-bottom:20px}
.strip{display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;padding:clamp(40px,5vw,72px) var(--gutter) 18px;scrollbar-width:thin;scrollbar-color:rgba(251,244,234,.4) transparent}
.strip figure{margin:0;flex:0 0 auto;height:min(64vh,620px);aspect-ratio:3/4;scroll-snap-align:start;overflow:hidden;border-radius:4px}
.strip img{width:100%;height:100%;object-fit:cover}
.jasmim{width:min(1240px,100% - 2*var(--gutter));margin:clamp(40px,5vw,72px) auto 0;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,60px);align-items:baseline;border-top:1px solid rgba(251,244,234,.25);padding-top:32px}
.jasmim .label{margin:0}
.jasmim-line{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.2;max-width:30ch}

/* loja */
.shop{padding:clamp(96px,12vw,170px) 0 clamp(60px,8vw,110px)}
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.shop h2{font-size:clamp(2.6rem,5vw,4.6rem)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{border:1px solid var(--line-strong);background:none;border-radius:999px;padding:9px 18px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;transition:background .3s var(--ease),color .3s var(--ease)}
.filters button[aria-pressed="true"]{background:var(--text-primary);color:var(--canvas);border-color:var(--text-primary)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px) clamp(14px,2vw,26px)}
.card{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.card.hide{display:none}
.card button{all:unset;display:block;cursor:pointer;width:100%}
.card button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.card .ph{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--panel)}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.card .ph img+img{opacity:0}
.card button:hover .ph img:first-child{transform:scale(1.03)}
.card button:hover .ph img+img{opacity:1}
.card .tag{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(243,234,221,.92);padding:5px 9px;border-radius:999px;color:var(--text-primary)}
.card h3{font-family:var(--text);font-weight:400;font-size:1rem;line-height:1.35;margin:14px 0 4px}
.card .by{font-size:.84rem;color:var(--text-secondary);line-height:1.4}
.card .row{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.card .price{font-family:var(--mono);font-size:.86rem}
.card .view{font-size:.8rem;color:var(--accent);opacity:0;transform:translateX(-4px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.card button:hover .view,.card button:focus-visible .view{opacity:1;transform:none}

/* filme */
.film{padding:clamp(40px,6vw,80px) 0 clamp(90px,12vw,160px)}
.film-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.film h2{font-size:clamp(2.4rem,4.4vw,4rem)}
.film-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#1c120b}
.film-frame img,.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:1px solid rgba(251,244,234,.7);background:rgba(28,14,6,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;transition:transform .5s var(--ease),background .4s var(--ease)}
.play::before{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 0 rgba(251,244,234,.5);animation:pulse 4.5s var(--ease-soft) infinite;animation-delay:-1.5s}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,244,234,.45)}70%,100%{box-shadow:0 0 0 22px rgba(251,244,234,0)}}
.play svg{width:30px;height:30px;fill:var(--light);margin-left:4px}
.play:hover{transform:scale(1.06);background:rgba(168,70,31,.75)}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);padding:clamp(40px,6vw,80px) 0 clamp(90px,12vw,160px)}
.faq h2{font-size:clamp(2.6rem,5vw,4.4rem)}
.faq details{border-top:1px solid var(--line-strong);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:1.12rem;font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--accent);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--text-secondary);max-width:58ch;animation:open .5s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* contato */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);background:var(--panel);border-radius:6px;padding:clamp(40px,6vw,90px);margin-bottom:clamp(80px,10vw,140px)}
.contact h2{font-size:clamp(2.4rem,4.6vw,4.2rem);margin-bottom:20px}
.contact .lede{margin-bottom:30px}
.news h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:20px}
.news label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
.news-row{display:flex;gap:10px}
.news input{flex:1;min-width:0;border:1px solid var(--line-strong);background:var(--canvas);border-radius:999px;padding:13px 20px;font:300 1rem var(--text);color:var(--text-primary)}
.news-msg{min-height:1.6em;margin-top:12px;font-size:.92rem}

/* rodapé */
.foot{position:relative;z-index:1;text-align:center;padding:60px var(--gutter) 70px;border-top:1px solid var(--line);display:grid;justify-items:center;gap:12px;color:var(--text-secondary);font-size:.95rem}
.foot img{width:110px}
.foot a{color:var(--text-primary)}

/* diálogos */
dialog{border:0;padding:0;background:var(--canvas);color:var(--text-primary);border-radius:8px;max-height:92vh;box-shadow:0 30px 80px rgba(35,24,18,.35)}
dialog::backdrop{background:rgba(35,24,18,.55);backdrop-filter:blur(4px)}
dialog[open]{animation:dlg .5s var(--ease)}
@keyframes dlg{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.x{position:absolute;right:14px;top:10px;z-index:2;width:44px;height:44px;border:0;background:rgba(243,234,221,.9);border-radius:50%;font-size:1.6rem;line-height:1}
.pd{width:min(1040px,100% - 32px);display:none}
.pd[open]{display:grid;grid-template-columns:1.1fr 1fr}
.pd-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--panel);max-height:92vh}
.pd-gallery img{flex:0 0 100%;width:100%;object-fit:cover;scroll-snap-align:start;aspect-ratio:4/5}
.pd-info{padding:clamp(28px,4vw,52px);overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.pd-info h2{font-size:clamp(2rem,3vw,2.8rem)}
.pd-info .label{margin:0}
.pd-hours{color:var(--accent)}
.sizes{border:0;padding:0;margin:10px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.sizes legend{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:10px}
.sizes label{position:relative}
.sizes input{position:absolute;opacity:0;inset:0}
.sizes span{display:inline-grid;place-items:center;min-width:52px;height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;font-family:var(--mono);font-size:.82rem;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.sizes input:checked+span{background:var(--text-primary);color:var(--canvas);border-color:var(--text-primary)}
.sizes input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.pd-info #pd-guide{align-self:flex-start;font-size:.86rem}
.pd-msg{min-height:1.4em;font-size:.9rem;color:var(--accent)}
.guide{width:min(620px,100% - 32px);padding:clamp(28px,4vw,48px)}
.guide h2{font-size:2.2rem;margin-bottom:22px}
.guide table{width:100%;border-collapse:collapse;font-size:.92rem}
.guide th,.guide td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}
.guide th{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--text-secondary)}
.note{font-size:.84rem;color:var(--text-secondary);line-height:1.5}
.guide .note{margin-top:18px}

/* sacola */
.bag-shade{position:fixed;inset:0;z-index:180;background:rgba(35,24,18,.45);opacity:0;transition:opacity .45s var(--ease)}
.bag-shade.on{opacity:1}
.bag{position:fixed;top:0;right:0;bottom:0;z-index:190;width:min(440px,100%);background:var(--canvas);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .55s var(--ease);box-shadow:-20px 0 60px rgba(35,24,18,.2)}
.bag.open{transform:none}
.bag>header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 16px;border-bottom:1px solid var(--line)}
.bag>header h2{font-size:2rem}
.bag>header .x{position:static}
.bag-items{list-style:none;margin:0;padding:8px 24px;overflow-y:auto;flex:1}
.bag-items li{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.bag-items img{width:72px;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.bag-items h3{font:400 .95rem/1.35 var(--text)}
.bag-items .meta{font-size:.82rem;color:var(--text-secondary)}
.bag-items .qty{display:inline-flex;align-items:center;gap:6px;margin-top:8px}
.bag-items .qty button{width:30px;height:30px;border:1px solid var(--line-strong);background:none;border-radius:50%}
.bag-items .rm{border:0;background:none;color:var(--text-secondary);font-size:.78rem;text-decoration:underline;padding:4px 0}
.bag-empty{padding:40px 24px;color:var(--text-secondary)}
.bag>footer{padding:18px 24px 24px;border-top:1px solid var(--line);display:grid;gap:12px}
.bag-total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.05rem}
#bag-checkout:disabled{opacity:.45;cursor:not-allowed;transform:none}
.bag.is-empty>footer{display:none}
.bag-country{display:grid;gap:6px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.bag-country select{font:400 .95rem var(--text);letter-spacing:0;text-transform:none;color:var(--text-primary);background:var(--light);border:1px solid var(--line-strong);border-radius:6px;padding:10px 12px;min-height:44px}
.bag-line{display:flex;justify-content:space-between;align-items:baseline;margin:0;font-size:.92rem;color:var(--text-secondary)}
.bag-line small{font-size:.78rem}
.bag-total{margin:0}
#bag-msg{color:var(--accent-hover);margin:0}
.thanks{max-width:min(520px,calc(100% - 32px));padding:40px 36px;text-align:center}
.thanks h2{font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:16px}
.thanks .note{margin:0 auto 26px;max-width:40ch}

.toast{position:fixed;left:50%;bottom:28px;z-index:210;transform:translate(-50%,20px);opacity:0;background:var(--text-primary);color:var(--canvas);padding:12px 20px;border-radius:999px;font-size:.92rem;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .nav>nav{display:none}
  .nav{grid-template-columns:auto 1fr}
  .nav .tools{justify-self:end}
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .story,.faq,.contact{grid-template-columns:1fr}
  .story-img{max-width:520px;width:100%}
  .chapter-head{grid-template-columns:auto 1fr}
  .chapter-head .lede{grid-column:1/-1}
  .knot-grid{grid-template-columns:1fr 1fr}
  .g1{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5}
  .g2{grid-column:1;grid-row:auto;margin-top:0!important}
  .g3{grid-column:2;grid-row:auto}
  .g4{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5}
  .tie{grid-column:1/-1;grid-row:auto;padding:28px 0}
  .jasmim{grid-template-columns:1fr}
  .pd[open]{grid-template-columns:1fr;overflow-y:auto}
  .pd-gallery{max-height:none}
}
@media (max-width:720px){
  body{font-size:17px}
  .nav{height:64px;gap:10px}
  .nav .brand img{width:96px}
  .nav .tools{gap:6px}
  .seg button{padding:5px 7px}
  .bag-btn{padding:6px 10px}
  .bag-btn>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .grid{grid-template-columns:1fr 1fr;gap:28px 12px}
  .card .view{display:none}
  .brush-hero{height:78vh}
  .strip figure{height:56vh}
  .news-row{flex-direction:column}
}
@media (max-width:380px){
  .nav .brand img{width:80px}
  .seg button{padding:5px 5px;font-size:.62rem}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rv{opacity:1;transform:none}
  .tie-reveal>*{opacity:1;transform:none}
}