/* =========================================================
   HEXA MAG · versão mista
   Base visual da v1 (style.css) + dinâmicas da v2
   ========================================================= */
:root{--ease:cubic-bezier(.2,.75,.2,1)}
:focus-visible{outline:2.5px solid var(--lime);outline-offset:3px;border-radius:6px}

/* ---------- Hero: palco com o pote e os cristais ---------- */
.hero__lattice{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23B6E37E' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");-webkit-mask-image:radial-gradient(ellipse 55% 70% at 75% 50%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 55% 70% at 75% 50%,#000 10%,transparent 72%)}
.hero__stage{--R:clamp(140px,17vw,214px);position:relative;width:min(520px,100%);aspect-ratio:1;justify-self:center}
.stage__glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(182,227,126,.55) 0%,rgba(125,185,85,.18) 45%,transparent 70%);filter:blur(10px)}
.stage__hex{position:absolute;inset:6%;fill:rgba(255,255,255,.05);stroke:rgba(182,227,126,.5);stroke-width:.5;filter:drop-shadow(0 0 24px rgba(125,185,85,.35))}
.stage__hex--2{inset:20%;fill:none;stroke:rgba(255,255,255,.35);stroke-dasharray:2 2;transform:rotate(30deg);filter:none}
/* pote 3D: canvas WebGL; a imagem do pote original fica como reserva sem WebGL */
.stage__3d{position:absolute;inset:0;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.stage__3d.is-grabbing{cursor:grabbing}
.stage__3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage__fallback{position:absolute;left:50%;top:50%;height:74%;width:auto;translate:-50% -50%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));pointer-events:none}
.stage__3d.is-live .stage__fallback{display:none}
.stage__3d::before{content:"";position:absolute;left:50%;bottom:9%;width:34%;height:7%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(4px);pointer-events:none}
.stage__hint{position:absolute;left:50%;bottom:1%;translate:-50% 0;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(6,24,13,.55);border:1px solid rgba(255,255,255,.18);padding:6px 14px 6px 10px;border-radius:99px;pointer-events:none;white-space:nowrap;transition:opacity .4s}
.stage__hint svg{width:16px;height:16px;fill:none;stroke:var(--lime-glow);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stage__3d.was-touched .stage__hint{opacity:0}
.crystals{position:absolute;inset:0}
.crystal{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(var(--R)) rotate(calc(-1 * var(--a)))}
.crystal svg{position:absolute;max-width:none;width:54px;height:54px;left:-27px;top:-27px;fill:var(--lime);stroke:var(--lime-glow);stroke-width:4;filter:drop-shadow(0 0 14px rgba(182,227,126,.55))}
.crystal i{position:absolute;top:32px;left:50%;transform:translateX(-50%);font-style:normal;font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;background:rgba(6,24,13,.55);border:1px solid rgba(255,255,255,.18);padding:2px 10px;border-radius:99px;backdrop-filter:blur(4px)}
/* abertura: cristais se encaixam no hexágono e o pote sobe */
.js .crystal>*{opacity:0;translate:var(--fx) var(--fy);scale:.4;transition:opacity .7s var(--ease) var(--d),translate 1.1s var(--ease) var(--d),scale 1.1s var(--ease) var(--d)}
.js .stage__3d{opacity:0;translate:0 40px;transition:opacity .9s var(--ease) .7s,translate 1.1s var(--ease) .7s}
.js .stage__hex,.js .stage__glow{opacity:0;scale:.85;transition:opacity 1s var(--ease) .1s,scale 1.2s var(--ease) .1s}
.is-ready .crystal>*{opacity:1;translate:0 0;scale:1}
.is-ready .stage__3d{opacity:1;translate:0 0}
.is-ready .stage__hex,.is-ready .stage__glow{opacity:1;scale:1}

/* ---------- Kits com potes desenhados ---------- */
.kit__media{background:radial-gradient(ellipse at 50% 80%,#DDEDD0 0%,#F2F6EE 60%,#F7F9F5 100%);padding:46px 0 18px}
.pots{display:flex;justify-content:center;align-items:flex-end;height:150px}
.pots img{height:150px;width:auto;flex:none;filter:drop-shadow(0 12px 14px rgba(11,46,24,.2));transition:transform .4s var(--ease)}
.pots img+img{margin-left:-36px}
.pots[data-n="4"] img{height:138px}
.pots[data-n="4"] img+img{margin-left:-36px}
.kit:hover .pots img:nth-child(odd){transform:translateY(-6px)}
.kit:hover .pots img:nth-child(even){transform:translateY(-3px)}
.kit.is-selected .kit__media{background:radial-gradient(ellipse at 50% 80%,#C6E3AA 0%,#E9F3E0 60%,#F7F9F5 100%)}

/* ---------- As 6 formas: hexágono acompanha a rolagem ---------- */
.scrolly{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);margin-top:20px}
.scrolly__stick{position:sticky;top:90px;height:calc(100vh - 120px);max-height:700px;display:grid;place-items:center;align-self:start}
.hexmap{width:100%;max-width:540px;overflow:visible}
.hexmap__orbit{fill:none;stroke:rgba(255,255,255,.1);stroke-dasharray:3 6}
.hexmap__edge{fill:rgba(255,255,255,.03);stroke:rgba(182,227,126,.25);stroke-width:1.2}
.hexmap__spokes line{stroke:rgba(255,255,255,.12);stroke-width:1.2;transition:stroke .4s,stroke-width .4s}
.hexmap__spokes line.is-on{stroke:var(--lime);stroke-width:2.5}
.hexmap__core use{fill:#fff;filter:drop-shadow(0 0 30px rgba(182,227,126,.5))}
.core-a{font-family:var(--font);font-size:22px;font-weight:300;fill:var(--forest)}
.core-b{font-family:var(--font);font-size:26px;font-weight:900;fill:var(--forest)}
.node circle{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.28);stroke-width:1.3;transition:fill .4s,stroke .4s,r .4s}
.node text{font-family:var(--font);font-size:18px;font-weight:800;fill:rgba(255,255,255,.55);transition:fill .4s}
.node .node__lbl{font-size:16px;font-weight:500;fill:rgba(255,255,255,.45)}
.node.is-done circle{fill:#2C6A3A;stroke:var(--lime)}
.node.is-done text{fill:#fff}
.node.is-on circle{fill:var(--lime);stroke:var(--lime-glow);r:36;filter:drop-shadow(0 0 16px rgba(182,227,126,.7))}
.node--sat.is-on circle{r:28}
.node.is-on text{fill:var(--deep)}
.node.is-on .node__lbl,.node.is-done .node__lbl{fill:#fff}
.node--sat circle{stroke-dasharray:3 3}
.step{min-height:70vh;display:flex;flex-direction:column;justify-content:center;max-width:44ch;opacity:.28;transition:opacity .5s}
.step.is-on{opacity:1}
.step__tag{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime-glow);font-weight:700;margin-bottom:12px}
.step h3{font-size:clamp(26px,2.6vw,36px);font-weight:800;color:#fff;line-height:1.1;margin-bottom:12px;letter-spacing:-.02em}
.step p{font-size:18px}
.step .btn{margin-top:26px;align-self:flex-start}

/* ---------- Mosaico ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start;margin-top:12px}
.mosaic figure{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:9/16;box-shadow:var(--shadow)}
.mosaic figure:nth-child(even){margin-top:64px}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mosaic figure:hover img{transform:scale(1.04)}

/* ---------- Calendário (modo de uso) ---------- */
#modo-de-uso .calendar{background:#fff;border-radius:var(--r-lg);padding:clamp(18px,3vw,30px);color:var(--text);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);max-width:520px;justify-self:center;width:100%}
.calendar__t{font-weight:800;color:var(--ink);font-size:18px;margin-bottom:16px}
.calendar__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.day{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border-radius:12px;background:var(--mist);transition:background .2s,transform .2s}
.day:hover{background:#DDEDD0;transform:translateY(-2px)}
.day small{font-size:11px;color:var(--muted);font-weight:600}
.day .pair{display:flex;gap:4px}
.day svg{width:9px;height:21px;fill:var(--forest);stroke:var(--lime);stroke-width:1.2}
.js .calendar .day{opacity:0;scale:.85;transition:opacity .4s,scale .4s}
.calendar.is-in .day{opacity:1;scale:1;transition-delay:calc(var(--i) * 25ms)}
.calendar figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.calendar figcaption b{font-size:30px;font-weight:900;color:var(--forest);margin-right:6px;letter-spacing:-.02em}

/* ---------- Comparativo com botão ---------- */
.versus{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(30px,5vw,64px);align-items:center}
.versus .cmp{margin:0}
.versus__viz{display:flex;flex-direction:column;align-items:center;gap:18px;background:var(--mist);border-radius:var(--r-lg);padding:28px 20px}
.toggle{display:inline-flex;padding:5px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.toggle button{padding:10px 16px;border-radius:999px;font-size:14.5px;font-weight:700;color:var(--muted);transition:background .25s,color .25s}
.toggle button[aria-selected=true]{background:var(--forest);color:#fff}
.minihex{width:min(260px,70vw)}
.minihex__edge{fill:none;stroke:var(--line);stroke-width:2;transition:stroke .4s}
.mh{fill:var(--lime);stroke:var(--lime-glow);stroke-width:3;transition:fill .4s,stroke .4s}
.minihex[data-mode=hexa] .minihex__edge{stroke:var(--lime)}
.minihex[data-mode=mono] .mh:not(.mh--keep){fill:transparent;stroke:#C9D3C4;stroke-dasharray:5 5}
.minihex__n{font-family:var(--font);font-size:110px;font-weight:900;fill:var(--forest)}
.versus__caption{text-align:center;max-width:30ch;min-height:3.2em;color:var(--muted);font-size:15px}

/* ---------- Stories ---------- */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.story{position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;text-align:left;background:var(--forest);box-shadow:var(--shadow)}
.story img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.story:hover img{transform:scale(1.05)}
.story::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 18%,transparent 58%,rgba(6,24,13,.85))}
.story__bar{position:absolute;z-index:2;top:14px;left:14px;right:14px;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.story__bar::after{content:"";position:absolute;inset:0;width:30%;background:#fff;border-radius:3px;transition:width 1.4s var(--ease)}
.story:hover .story__bar::after{width:100%}
.story__who{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;color:rgba(255,255,255,.85);font-size:15px}
.story__who b{display:block;font-size:24px;color:#fff}
.story .play{z-index:2}

/* ---------- Garantia em forma de rótulo ---------- */
.label-card{display:grid;grid-template-columns:72px 1fr;max-width:1000px;margin-inline:auto;background:#fff;border-radius:36px;overflow:hidden;box-shadow:0 0 0 1px var(--line),var(--shadow);position:relative}
.label-card::after{content:"";position:absolute;right:0;top:0;bottom:0;width:10px;background:var(--lime)}
.label-card__stripe{background:var(--lime);display:flex;align-items:flex-end;justify-content:center;position:relative}
.label-card__stripe::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:var(--forest)}
.label-card__stripe span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:30px;color:#fff;font-weight:300;letter-spacing:.02em;position:relative;z-index:1;margin-bottom:28%}
.label-card__stripe b{font-weight:800}
.label-card__stripe sup{font-size:10px}
.label-card__body{padding:clamp(26px,4vw,48px) clamp(26px,5vw,60px) clamp(26px,4vw,44px)}
.label-card__top{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;color:var(--ink);padding-bottom:14px;border-bottom:1.5px solid var(--ink)}
.label-card__top svg{width:12px;height:28px;fill:none;stroke:var(--ink);stroke-width:1.4}
.label-card__main{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,50px);align-items:center;padding:30px 0}
.label-card__num{font-size:clamp(110px,14vw,180px);line-height:.8;font-weight:300;font-stretch:125%;color:var(--forest);letter-spacing:-.06em;display:flex;align-items:flex-start}
.label-card__num span{font-size:.14em;font-weight:800;letter-spacing:0;background:var(--lime);color:var(--deep);padding:4px 12px;border-radius:99px;margin:.3em 0 0 .3em;font-stretch:100%}
.label-card__main .h-sec{margin-bottom:8px}
.label-card__main p{color:var(--muted);max-width:44ch}
.label-card__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line);font-weight:600;color:var(--ink)}

/* ---------- Footer: wordmark gigante ---------- */
.ft__wm{font-size:clamp(60px,16.5vw,232px);line-height:.78;letter-spacing:-.05em;color:var(--lime);font-weight:300;margin:56px 0 0 -.04em;white-space:nowrap;opacity:.9}
.ft__wm b{font-weight:900;font-stretch:125%}
.ft__legal{border-top:1px solid rgba(255,255,255,.1);margin-top:18px}

/* ---------- Barra mobile com o pote + progresso ---------- */
.sticky-buy__bottle{height:44px;width:auto;flex:none}
.progress{position:fixed;right:22px;bottom:22px;z-index:55;width:56px;height:56px;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s}
.progress.is-on{opacity:1;pointer-events:auto}
.progress svg{position:absolute;inset:0}
.progress__bg{fill:var(--forest);stroke:rgba(255,255,255,.15);stroke-width:5}
.progress__fg{fill:none;stroke:var(--lime-glow);stroke-width:5;stroke-dasharray:100;stroke-dashoffset:100;stroke-linejoin:round}
.progress span{position:relative;font-weight:800;color:#fff;font-size:18px}

/* ---------- Responsivo ---------- */
@media (max-width:1000px){
  .versus{grid-template-columns:1fr}
}
@media (max-width:820px){
  .hero__stage{width:min(330px,90%);order:-1;margin-top:-10px}
  .slide[data-theme=forest] .slide__in{padding-top:28px}
  .pots{height:auto;width:100%}
  .pots img{height:104px}
  .pots img+img{margin-left:-26px}
  .pots[data-n="4"] img{height:92px}
  .pots[data-n="4"] img+img{margin-left:-25px}
  .kit__media{padding:34px 6px 14px;align-items:center}
  .kit__flag{left:10px;right:auto;top:10px;transform:none;font-size:9.5px;padding:5px 10px}
  .kit__price{display:flex;flex-direction:column}
  .kit__price b{font-size:26px;white-space:nowrap}
  .kit__meta{margin-bottom:8px}
  .scrolly{grid-template-columns:1fr}
  .scrolly__stick{top:68px;height:40vh;z-index:2;background:var(--forest);margin-inline:-24px;padding-inline:24px;box-shadow:0 18px 20px -6px var(--forest)}
  .hexmap{max-height:38vh}
  .step{min-height:50vh}
  .step:last-child{min-height:60vh}
  .mosaic{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-24px;padding:0 24px 14px;scrollbar-width:none}
  .mosaic figure{flex:0 0 62%;scroll-snap-align:start;margin-top:0!important}
  .stories{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-24px;padding:0 24px 14px;scrollbar-width:none;max-width:none}
  .story{scroll-snap-align:start}
  .label-card{grid-template-columns:48px 1fr}
  .label-card__stripe span{font-size:20px}
  .label-card__main{grid-template-columns:1fr}
  .progress{display:none}
  .sticky-buy{padding-left:12px}
  .sticky-buy>div{flex:1}
}
@media (max-width:520px){
  .crystal svg{width:40px;height:40px;left:-20px;top:-20px}
  .crystal i{top:23px;font-size:11px;padding:1px 8px}
  .scrolly__stick,.mosaic,.stories{margin-inline:-16px;padding-inline:16px}
  .calendar__grid{gap:5px}
  .day{padding:7px 2px 6px}
  .day svg{width:7px;height:16px}
  .label-card__foot .btn{width:100%;justify-content:center}
  .toggle button{padding:9px 12px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .js .crystal>*,.js .stage__3d,.js .stage__hex,.js .stage__glow,.js .calendar .day{opacity:1;translate:none;scale:none}
}