:root{
  --bg:#0f0f0f;
  --bg2:#303132;
  --txt:#f4f1eb;
  --mut:#8e9191;
  --line:#ffffff22;
  --lineStrong:#ffffff35;
  --c:#D47A32;
}
:root[data-theme="light"]{
  --bg:#e7e4df;
  --bg2:#f2ede6;
  --txt:#282b2c;
  --mut:#555b5d;
  --line:#20232424;
  --lineStrong:#2023243c;
  --c:#C96F2C;
}

*{box-sizing:border-box}
html,body{width:100%;height:100%}
body{
  margin:0;
  overflow:hidden;
  background:var(--bg);
  color:var(--txt);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  min-height:100vh;
  transition:background-color .9s cubic-bezier(.22,.61,.36,1),color .9s cubic-bezier(.22,.61,.36,1);
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1);
}
body::before{
  opacity:1;
  background:
    radial-gradient(
      ellipse 60% 74% at var(--glow-x) var(--glow-y),
      rgba(56,57,58,.94) 0%,
      rgba(41,42,43,.78) 28%,
      rgba(22,23,24,.62) 52%,
      rgba(15,15,15,0) 81%
    );
}
body::after{
  opacity:0;
  background:
    radial-gradient(
      ellipse 72% 82% at var(--glow-x) var(--glow-y),
      rgba(201,111,44,.12) 0%,
      rgba(201,111,44,.055) 20%,
      rgba(231,228,223,.72) 48%,
      rgba(231,228,223,1) 82%
    );
}
:root[data-theme="light"] body::before{opacity:0}
:root[data-theme="light"] body::after{opacity:1}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
#app{position:relative;z-index:1;width:100%;height:100%}
main{position:absolute;inset:0}

/* Header */
.top{
  background:transparent;
  height:120px;
  position:fixed;
  z-index:8;
  left:4vw;
  right:3.95vw;
  top:0;
  display:flex;
  align-items:flex-start;
  padding-top:13px;
  pointer-events:none;
}
.brandLockup{
  display:flex;
  align-items:flex-start;
  gap:25px;
  margin-left:max(-45px, calc(16px - 4vw));
  pointer-events:auto;
}
.brand{width:150px;display:block;flex:none}
.brand img{width:100%;height:auto;display:block}
.brandMessage{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:9px;
  color:var(--txt);
  font-size:10.5px;
  line-height:1.38;
  letter-spacing:.21em;
  text-transform:uppercase;
  white-space:nowrap;
}
.top nav{
  margin-left:auto;
  display:flex;
  gap:clamp(12px, 1.7vw, 28px);
  pointer-events:auto;
}
.top nav button{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--mut);
  padding:10px 0;
  transition:color .9s cubic-bezier(.22,.61,.36,1),border-color .9s cubic-bezier(.22,.61,.36,1);
}
.top nav button.active{color:var(--txt);border-bottom:1px solid var(--c)}
.themeToggle{
  margin-left:2.2vw;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  line-height:0;
  color:var(--txt);
  border:1px solid var(--lineStrong);
  border-radius:50%;
  pointer-events:auto;
  transition:transform .35s ease,color .9s cubic-bezier(.22,.61,.36,1),border-color .9s cubic-bezier(.22,.61,.36,1);
}
.themeToggle:hover{transform:rotate(10deg);border-color:var(--c)}
.themeToggle .themeIcon{width:100%;height:100%;display:grid;place-items:center;line-height:0}
.themeToggle svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}

/* Challenge rail */
.rail{
  position:fixed;
  z-index:7;
  left:4vw;
  top:max(23%,160px);
  bottom:10%;
  width:80px;
}
.count{font-size:23px;color:var(--txt);transition:color .9s ease}
.count b,.num.active{color:var(--c)}
.line{position:absolute;left:6px;top:66px;bottom:55px;width:1px;background:var(--line)}
#list{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.num{color:var(--mut);text-align:left;padding-left:16px;font-size:11px;position:relative;transition:color .9s ease}
#list{width:clamp(80px,calc(var(--scene-left) - 4vw - 12px),230px)}
.num{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num.active:before{content:"";position:absolute;left:4px;top:50%;width:5px;height:5px;border-radius:50%;transform:translateY(-50%);background:var(--c);box-shadow:0 0 7px color-mix(in srgb,var(--c) 55%,transparent)}
.arrows{position:absolute;bottom:0;display:flex;gap:12px}
.arrows button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  line-height:0;
  border:1px solid var(--lineStrong);
  border-radius:50%;
  transition:border-color .9s ease,color .9s ease,background-color .9s ease,transform .25s ease;
}
.arrows button:hover{transform:translateY(-1px);border-color:var(--c)}
.arrows button svg{width:27px;height:27px;display:block;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}

/* Central stage */
.stage{position:absolute;left:14vw;right:26vw;top:9%;bottom:9%;container-type:size}
.stage > *, .stage::before{--stage-diameter:min(100cqw,100cqh,690px)}
.stage #canvas{position:absolute;left:50%;top:50%;width:calc(var(--stage-diameter) * .94);height:calc(var(--stage-diameter) * .94);transform:translate(-50%,-50%);z-index:4}
.stage canvas{width:100%!important;height:100%!important;cursor:grab;position:relative;z-index:4}
.stage canvas:active{cursor:grabbing}

.ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1}
.r1{
  width:var(--stage-diameter);
  height:var(--stage-diameter);
  border:2px solid color-mix(in srgb,var(--txt) 17%,transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--txt) 7%,transparent),0 0 30px color-mix(in srgb,var(--txt) 3%,transparent);
  filter:blur(.18px);
}
.r2{
  width:calc(var(--stage-diameter) * .71);
  height:calc(var(--stage-diameter) * .71);
  border:2.2px solid color-mix(in srgb,var(--c) 64%,transparent);
  box-shadow:0 0 7px color-mix(in srgb,var(--c) 52%,transparent),0 0 18px color-mix(in srgb,var(--c) 32%,transparent),0 0 38px color-mix(in srgb,var(--c) 18%,transparent),inset 0 0 12px color-mix(in srgb,var(--c) 10%,transparent);
  filter:blur(.25px);
}
.r2::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid color-mix(in srgb,var(--c) 28%,transparent);filter:blur(7px);opacity:.8;pointer-events:none}

.stage::before{
  content:"";
  position:absolute;
  width:var(--stage-diameter);
  height:var(--stage-diameter);
  left:50%;
  top:53%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(56,57,58,.22) 0%,rgba(41,42,43,.10) 40%,transparent 72%);
  pointer-events:none;
  filter:blur(18px);
  z-index:0;
}
:root[data-theme="light"] .stage::before{
  background:radial-gradient(circle,rgba(201,111,44,.085) 0%,rgba(201,111,44,.035) 28%,transparent 68%);
  filter:blur(32px);
}
:root[data-theme="light"] .r1{border-color:rgba(40,43,44,.15);box-shadow:none}

/* Floating bullets */
.node{
  position:absolute;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--txt);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:18px;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  pointer-events:auto;
  will-change:transform;
  transition:color .9s ease,opacity .35s ease;
}
.node .nodeIcon{
  position:relative;
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  line-height:0;
  border:1.25px solid color-mix(in srgb,var(--txt) 34%,transparent);
  border-radius:50%;
  background:color-mix(in srgb,var(--bg) 18%,transparent);
  transition:transform .32s ease,background-color .9s ease,border-color .9s ease,box-shadow .32s ease;
}
.node .nodeIcon svg{width:38px;height:38px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.node:hover .nodeIcon,.node.active .nodeIcon{transform:scale(1.06);border-color:var(--c);background:color-mix(in srgb,var(--c) 5%,transparent);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 5%,transparent),0 0 18px color-mix(in srgb,var(--c) 16%,transparent)}
.node small{font-size:9px;letter-spacing:.2em;color:var(--txt);text-shadow:0 0 10px color-mix(in srgb,var(--bg) 40%,transparent)}
.n1{left:10%;top:31%;animation:logicFloatA 9s ease-in-out infinite}
.n2{left:4%;bottom:17%;animation:logicFloatB 10.5s ease-in-out infinite}
.n3{right:4%;top:27%;animation:logicFloatC 8.5s ease-in-out infinite}
.n4{right:7%;bottom:14%;animation:logicFloatD 11s ease-in-out infinite}
@keyframes logicFloatA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(3px,-4px,0)}}
@keyframes logicFloatB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-4px,3px,0)}}
@keyframes logicFloatC{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3px,-4px,0)}}
@keyframes logicFloatD{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4px,3px,0)}}
:root[data-theme="light"] .node .nodeIcon{background:rgba(255,255,255,.12);border-color:#20232444}
:root[data-theme="light"] .node:hover .nodeIcon,:root[data-theme="light"] .node.active .nodeIcon{border-color:var(--c);background:rgba(201,111,44,.05)}

/* Dynamic information panel */
.info{position:fixed;z-index:7;right:4vw;top:27%;width:22vw;max-width:350px;max-height:67vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--lineStrong) transparent;padding-right:5px}
.infoContent{opacity:1;transform:translate3d(0,0,0);transition:opacity .24s ease,transform .28s ease}
.infoContent:not(.isVisible){opacity:0;transform:translate3d(12px,0,0)}
.eyebrow{color:var(--mut);letter-spacing:.22em;font-size:9px;transition:color .9s ease}
.info h1{font-size:clamp(36px,4vw,60px);letter-spacing:.13em;font-weight:500;margin:10px 0 28px}
.info h2{font-size:clamp(30px,3vw,48px);letter-spacing:.08em;font-weight:500;line-height:1.06;margin:10px 0 28px}
.info h1,.info h2{color:var(--txt);transition:color .9s ease}
.info #diff>span{display:block;color:var(--mut);letter-spacing:.18em;font-size:9px;margin-bottom:9px}
.info #diff>div{display:flex;gap:7px}
.dot{width:12px;height:12px;border:1px solid color-mix(in srgb,var(--txt) 32%,transparent);border-radius:50%;display:inline-block}
.dot.on{background:var(--c);border-color:var(--c)}
.hair{width:42px;height:1px;background:var(--line);margin:30px 0}
.info p{color:var(--mut);line-height:1.75;font-size:12px;transition:color .9s ease}
.metaBlock{display:grid;grid-template-columns:1fr auto;gap:20px;padding:13px 0;border-top:1px solid var(--line);color:var(--mut)}
.metaBlock span{font-size:9px;letter-spacing:.18em}.metaBlock strong{color:var(--txt);font-size:12px;font-weight:500;letter-spacing:.08em}

/* Dynamic section transitions */
.viewWrap{position:absolute;inset:0;opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);transition:opacity .46s cubic-bezier(.22,.61,.36,1),transform .58s cubic-bezier(.22,.61,.36,1),filter .58s cubic-bezier(.22,.61,.36,1)}
.viewWrap.isLeaving{opacity:0;transform:translate3d(0,14px,0) scale(.985);filter:blur(4px);pointer-events:none}
.viewWrap.isEntering{opacity:0;transform:translate3d(0,-14px,0) scale(1.012);filter:blur(3px)}
.viewWrap.isEntering *{pointer-events:none}
.sectionAltScene{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:6;overflow:hidden}
.sectionAltScene.visible{display:flex}
main[data-section="desafios"] .promoScene,main[data-section="desafios"] .brandScene,main[data-section="sensoriais"] .promoScene,main[data-section="sensoriais"] .brandScene{display:none}
main[data-section="promocoes"] .promoScene,main[data-section="marca"] .brandScene{display:flex}
main[data-section="promocoes"] .rail,main[data-section="promocoes"] .stage,main[data-section="promocoes"] .info,main[data-section="marca"] .rail,main[data-section="marca"] .stage,main[data-section="marca"] .info{display:none}
.comingSoon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--txt);font-size:clamp(34px,4vw,60px);font-weight:500;letter-spacing:.22em;text-transform:uppercase;text-align:center}

/* Digital presence */
footer{position:fixed;z-index:8;left:4vw;right:4vw;bottom:3vh;display:flex;align-items:center;justify-content:space-between;color:var(--mut);font-size:8px;letter-spacing:.18em;text-transform:uppercase}
.socials{display:flex;align-items:center;gap:14px}
.socialIcon{width:40px;height:40px;display:grid;place-items:center;line-height:0;color:var(--txt);opacity:.78;border:1px solid color-mix(in srgb,var(--txt) 18%,transparent);border-radius:50%;text-decoration:none;transition:color .3s ease,opacity .3s ease,transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.socialIcon svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.socialIcon[aria-label="Threads"] svg{width:29px;height:29px;stroke-width:1.25}
.socialIcon:hover{color:var(--c);opacity:1;transform:translateY(-2px) scale(1.05);border-color:var(--c);box-shadow:0 0 8px color-mix(in srgb,var(--c) 25%,transparent),0 0 18px color-mix(in srgb,var(--c) 12%,transparent)}
.footerProgress{display:flex;align-items:center;color:var(--mut)}
footer i{display:inline-block;width:130px;height:2px;background:linear-gradient(90deg,var(--c) 0 var(--progress,10%),color-mix(in srgb,var(--txt) 14%,transparent) var(--progress,10%) 100%);box-shadow:0 0 7px color-mix(in srgb,var(--c) 18%,transparent);vertical-align:middle;margin-left:12px}

/* Shared theme transitions */
body.themeSwitching .top,body.themeSwitching .rail,body.themeSwitching .stage,body.themeSwitching .info,body.themeSwitching footer,body.themeSwitching .node,body.themeSwitching .ring,body.themeSwitching .themeToggle{transition:color .9s cubic-bezier(.22,.61,.36,1),border-color .9s cubic-bezier(.22,.61,.36,1),background-color .9s cubic-bezier(.22,.61,.36,1),box-shadow .9s cubic-bezier(.22,.61,.36,1)}

@media(prefers-reduced-motion:reduce){.node{animation:none!important}.viewWrap{transition:none!important}}
@media(max-width:980px){
  .brandMessage{display:none}
  .themeToggle{width:38px;height:38px}
  .socials{gap:9px}
  .socialIcon{width:34px;height:34px}
  .socialIcon svg{width:20px;height:20px}
  .socialIcon[aria-label="Threads"] svg{width:24px;height:24px}
}
@media(max-width:600px){.count{font-size:16px}}

.challengeGeometry{
  width:46px;
  height:48px;
  display:block;
  flex:none;
  background:currentColor;
  mask:url('../public/brand/challenge-geometry-mask-bold.png') center/contain no-repeat;
  -webkit-mask:url('../public/brand/challenge-geometry-mask-bold.png') center/contain no-repeat;
}

/* Catalog panels */
.infoContent h1{font-size:clamp(32px,3.3vw,54px);font-weight:700;letter-spacing:.08em;margin:9px 0 24px}
.infoContent h1{overflow-wrap:anywhere}
.infoContent h1 .titleVariant{font-size:.68em;letter-spacing:.04em;white-space:nowrap}
.subLabel,.videoSectionLabel{color:var(--mut);font-size:8px;letter-spacing:.2em;text-transform:uppercase;margin:22px 0 9px}
.qualityText{margin-bottom:18px}
.channelList{display:grid;gap:0;margin-top:18px}
.channelList a,.channelList .channelDisabled{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 0;color:var(--txt);border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.08em;text-decoration:none}
.channelList a:hover{color:var(--c)}
.channelList a span{color:var(--c)}
.findActions{display:grid;grid-template-columns:max-content;justify-content:start;gap:10px;margin-top:24px}
.findActions .explore{margin-top:0;justify-content:space-between}
.channelDisabled{opacity:.46;cursor:default}
.channelDisabled em{color:var(--mut);font-style:normal;font-size:8px;letter-spacing:.14em}
.videoPanel{width:100%;aspect-ratio:16/9;margin:20px 0 16px;overflow:hidden;border:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 34%,transparent)}
.videoPanel iframe{width:100%;height:100%;display:block;border:0}
.videoPlaceholder{width:100%;height:100%;min-height:165px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;color:var(--mut);font-size:8px;letter-spacing:.2em}
.videoPlaceholderIcon{display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--lineStrong);border-radius:50%}
.videoPlaceholderIcon svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.5}
.videoThumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 20px}
.videoThumb{padding:0;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);background:none}
.videoThumb img{width:100%;height:100%;object-fit:cover;display:block}
.solutionCard{display:flex;align-items:center;gap:12px;padding:13px;margin:8px 0 20px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 18%,transparent)}
.solutionLock{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--lineStrong);border-radius:50%;flex:none}
.solutionLock svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4}
.solutionCard strong{display:block;font-size:9px;letter-spacing:.16em;margin-bottom:4px}
.solutionCard span{display:block;color:var(--mut);font-size:9px;line-height:1.45}

/* Consistent arrows, typography and buttons in both themes */
.arrows #next{border-color:var(--lineStrong);color:var(--txt)}
.arrows #next:hover,.arrows #next:focus-visible,.arrows #prev:hover,.arrows #prev:focus-visible{border-color:var(--c);color:var(--c)}
.info p,.info .eyebrow,.info .subLabel,.info .videoSectionLabel,.info #diff>span,.info .metaBlock,.info .solutionCard span,.info .channelDisabled em{color:var(--txt)}
.explore,.promoLink{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;padding:13px 22px;border:1px solid var(--c);border-radius:999px;color:var(--txt);font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:color .2s,border-color .2s,background-color .2s}
.explore:hover,.explore:focus-visible{color:var(--c);background:color-mix(in srgb,var(--c) 8%,transparent)}
.explore span{display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--c);font-size:26px;line-height:.65;font-weight:300}
.solutionDetails{flex:1;min-width:0}
.solutionForm{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.solutionForm input{min-width:0;flex:1 1 145px;max-width:100%;padding:9px;border:1px solid var(--lineStrong);border-radius:5px;background:var(--bg);color:var(--txt);font:inherit;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.solutionForm button{border:1px solid var(--c);border-radius:5px;padding:9px;color:var(--txt);font-size:9px;letter-spacing:.06em}
.solutionForm button:hover{color:var(--c)}
.solutionFeedback{margin-top:8px;color:var(--c)!important}

/* Compact video layout on desktop; scroll fallback on small screens */
.explore .buttonArrow,.promoLink .buttonArrow{
  width:27px;height:27px;display:grid;place-items:center;
  line-height:0;color:var(--c);flex:none;
}
.explore .buttonArrow svg,.promoLink .buttonArrow svg{
  width:27px;height:27px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.55;
  stroke-linecap:round;stroke-linejoin:round;
}
.info:has(.videoCatalog){top:17%;max-height:none;overflow:visible;padding-right:0}
.videoCatalog h1{margin-bottom:10px}
.videoCatalog .videoPanel{margin:10px 0 8px}
.videoCatalog .videoSectionLabel{margin:9px 0 7px}
.videoCatalog .videoThumbs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;margin:0 0 12px;
}
.videoCatalog .videoThumb{cursor:pointer;border:1px solid var(--lineStrong);transition:border-color .2s,box-shadow .2s}
.videoCatalog .videoThumb.isSelected{border-color:var(--c);box-shadow:0 0 8px color-mix(in srgb,var(--c) 34%,transparent)}
.videoCatalog .videoThumb:hover,.videoCatalog .videoThumb:focus-visible{border-color:var(--c)}
.videoCatalog .solutionCard{padding:10px 11px;gap:10px;margin:0 0 10px;align-items:center}
.videoCatalog .solutionForm{margin-top:7px;gap:6px;flex-wrap:nowrap}
.videoCatalog .solutionForm input{flex:1 1 auto;width:0;min-width:0;padding:8px 7px;font-size:9px}
.videoCatalog .solutionForm button{flex:none;padding:8px 8px;font-size:8px}
.videoCatalog .solutionCard span{font-size:9px}
.videoCatalog .solutionFeedback:empty{display:none}
.videoCatalog .explore{margin-top:3px}
/* Scrollbar styling for wide screens. */
@media (min-width:981px){
  .info{scrollbar-width:thin;scrollbar-color:var(--lineStrong) transparent}
}
/* Solução desbloqueada: miniatura independente na linha abaixo dos outros vídeos. */
.videoCatalog .solutionCard.isUnlocked{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  margin:0 0 8px;padding:0;border:0;background:none;
}
.videoCatalog .solutionSectionLabel{
  font-size:8px;letter-spacing:.2em;color:var(--txt);font-weight:600;
}
.videoCatalog .solutionThumb{
  width:calc((100% - 21px)/4);max-width:none;flex:none;
  aspect-ratio:16/9;border:1px solid var(--c);
}
@media (max-width:900px){
  .videoCatalog .solutionThumb{width:calc((100% - 21px)/4)}
}

/* Data-driven color options (one solid or two diagonally divided colors per swatch) */
.colorOptionsRow{align-items:center}
.colorOptions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px;min-width:0;max-width:100%}
.colorSwatch{
  display:inline-block;flex:none;width:19px;height:19px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--txt) 38%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--bg) 42%,transparent);
  overflow:hidden;
}
.colorSwatch svg{display:block;width:100%;height:100%;border-radius:50%}
.colorChoice{padding:0;cursor:pointer;appearance:none;background:transparent;overflow:visible}
.colorChoice[aria-pressed="true"]{outline:2px solid var(--accent,#c6773c);outline-offset:3px}
.colorChoice:focus-visible{outline:2px solid var(--txt);outline-offset:4px}
@media(max-width:600px){.colorChoice{width:30px;height:30px}.colorOptions{max-width:190px}}

/* v0.4.6: dynamic catalog (1–20 entries) */
#list{max-height:calc(100% - 145px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--lineStrong) transparent}
.arrows button:disabled{opacity:.28;cursor:default;pointer-events:none}
.emptyCatalogScene{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:6;pointer-events:none}
/* Compact layout: preserve a minimum working area and crop the viewport below it. */
.brand{width:clamp(75px, min(11vw, 18vh), 150px)}
@media(max-width:980px){
  #app{min-width:500px;min-height:760px;overflow:hidden}
  .top{position:absolute;left:20px;right:auto;top:0;width:calc(100% - 40px);height:120px;padding:8px 0 0}
  .brandLockup{margin:0}
  .brand{width:clamp(75px, 11vw, 110px)}
  .top nav{position:static;margin-left:auto;gap:clamp(10px,2vw,24px)}
  .top nav button{font-size:9px;letter-spacing:.1em}
  .themeToggle{margin-left:16px;flex:none}
  .rail{position:absolute;left:20px;top:145px;bottom:auto;height:300px}
  .rail .arrows{top:auto;bottom:0;left:0}
  .stage{left:100px;right:auto;top:145px;bottom:auto;width:clamp(260px,calc(100% - 200px),400px);height:320px}
  .info,.info:has(.videoCatalog){position:absolute;left:100px;right:30px;top:495px;bottom:auto;width:auto;max-width:none;max-height:235px;overflow-y:auto;padding-right:5px}
  .info #diff,.info p,.info .hair{display:block}
  footer{display:none}
}
@media(max-width:600px){
  .themeToggle{margin-left:auto}
}
.emptyCatalogScene.visible{display:flex}

/* A continuous stage size up to the compact layout's 320px minimum. */
:root{
  --scene-size:clamp(320px,calc(100vw - 480px),min(690px,calc(100vh - 235px)));
  --scene-left:clamp(100px,calc(100px + (100vw - 800px) * .28),calc(100vw - var(--scene-size) - 396px));
  --bullet-gap:clamp(16px,calc(16px + (100vw - 800px) * .015),32px);
  --bullet-center:max(calc(var(--scene-left) + var(--scene-size) + var(--bullet-gap) + 21px),calc(100vw - 555px));
  --glow-x:calc(var(--scene-left) + var(--scene-size) / 2);
  --glow-y:calc(145px + var(--scene-size) / 2);
}
.stage > .node{left:calc(50% + var(--stage-diameter) * .5 + var(--bullet-gap));right:auto;bottom:auto;gap:3px}
.stage > .n1{top:3%}.stage > .n3{top:27%}.stage > .n2{top:51%}.stage > .n4{top:75%}
.node .nodeIcon{width:42px;height:42px}
.node .nodeIcon svg{width:25px;height:25px}
.node .challengeGeometry{width:28px;height:28px}
.node small{font-size:8px;letter-spacing:.1em}
@media(min-width:801px){
  #app{min-width:0;min-height:0;overflow:visible}
  .stage{left:var(--scene-left);right:auto;top:145px;bottom:auto;width:var(--scene-size);height:var(--scene-size)}
  .stage > .node{left:calc(var(--bullet-center) - var(--scene-left) - 21px)}
  .info,.info:has(.videoCatalog){position:fixed;left:calc(var(--bullet-center) + 48px);right:calc(3.95vw + 20px);top:145px;bottom:auto;width:auto;max-width:none;max-height:calc(100vh - 165px);overflow-y:auto;padding-right:5px}
  .info #diff,.info p,.info .hair{display:block}
  footer{display:flex}
}
@media(min-width:801px) and (max-width:980px){.info,.info:has(.videoCatalog){right:39px}}
@media(min-width:801px) and (max-height:540px){footer{display:none}}
@media(max-width:800px){
  :root{--bullet-gap:16px;--glow-x:260px;--glow-y:305px}
  .stage{width:320px;height:320px}
}

/* Phone: one active surface and persistent navigation. */
.nodeModel{display:none}
.mobileMedia{display:none}
@media(max-width:600px){
  html,body{height:100%;min-height:0;overflow:hidden}
  #app{min-width:0;min-height:0;width:100%;height:100dvh;overflow:hidden}
  .top{left:16px;right:16px;width:auto;height:108px;min-width:0}
  .brand{width:55px}
  .top nav{position:absolute;left:0;right:0;top:58px;justify-content:space-between;gap:4px}
  .top nav button{font-size:8px;letter-spacing:.04em}
  .themeToggle{width:36px;height:36px}
  .rail{left:16px;top:105px;right:16px;width:auto;height:37px;bottom:auto}
  .rail .line{display:none}
  .rail #list{position:absolute;left:72px;top:0;display:flex;flex-direction:row;margin:0;max-width:calc(100% - 160px);max-height:35px;overflow:auto}
  .rail #list{width:auto}
  .rail #list .num{width:auto;flex:none}
  .rail .arrows{left:auto;right:0;top:0;bottom:auto;gap:4px}
  .rail .arrows button{width:32px;height:32px}
  .stage{position:absolute;left:0;right:0;top:150px;bottom:80px;width:100%;height:auto;min-height:0;pointer-events:none}
  .stage > *,.stage::before{--stage-diameter:min(90cqw,100cqh,450px)}
  .stage #canvas{pointer-events:auto;touch-action:none}
  .stage > .node{position:fixed;top:auto;bottom:calc(9px + env(safe-area-inset-bottom));right:auto;gap:2px;z-index:12;animation:none;pointer-events:auto}
  .stage > .nodeModel{display:flex;left:calc(8.333% - 21px)}
  .stage > .n1{left:calc(25% - 21px)}
  .stage > .n3{left:calc(41.667% - 21px)}
  .stage > .n2{left:calc(58.333% - 21px)}
  .stage > .n4{left:calc(75% - 21px)}
  .stage > .node .nodeIcon{width:42px;height:42px}
  .stage > .node small{font-size:8px}
  .stage .challengeGeometry{transform:translateY(-1px)}
  .rail .arrows button{padding:0;place-items:center}
  .rail .arrows button svg{width:23px;height:23px;display:block}
  .stage > .node:focus-visible{outline:2px solid var(--c);outline-offset:3px}
  .info,.info:has(.videoCatalog){position:absolute;left:20px;right:20px;top:150px;bottom:78px;width:auto;height:auto;max-height:none;overflow-y:auto;padding:0 4px 20px 0}
  .info h1{font-size:clamp(28px,8vw,40px)}
  .info #diff,.info p,.info .hair{display:block}
  .emptyCatalogScene{bottom:60px}
  :root[data-mobile-panel="modelo"] .info{visibility:hidden;pointer-events:none}
  :root:not([data-mobile-panel="modelo"]) .stage .ring,:root:not([data-mobile-panel="modelo"]) .stage #canvas,:root:not([data-mobile-panel="modelo"]) .stage::before{visibility:hidden;pointer-events:none}
  :root{--glow-x:50vw;--glow-y:calc(150px + (100dvh - 230px)/2)}
  .mobileMedia{display:block;position:fixed;z-index:13;left:calc(91.667% - 21px);bottom:calc(9px + env(safe-area-inset-bottom))}
  .mobileMediaButton{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;color:var(--txt)}
  .mobileMediaButton .nodeIcon{display:grid;place-items:center;width:42px;height:42px;border:1.25px solid color-mix(in srgb,var(--txt) 34%,transparent);border-radius:50%;background:var(--bg)}
  .mobileMediaButton svg{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .mobileMediaButton small{font-size:8px;letter-spacing:.1em}
  .mobileMediaButton[aria-expanded="true"] .nodeIcon{color:var(--c);border-color:var(--c)}
  .mobileMediaButton:focus-visible{outline:2px solid var(--c);outline-offset:3px}
  .mobileMediaMenu{position:absolute;right:0;bottom:66px;max-height:calc(100dvh - 100px);overflow-y:auto;padding:8px;background:var(--bg);border:1px solid var(--lineStrong);border-radius:24px}
  .mobileMediaMenu[hidden]{display:none}
  .mobileMediaMenu .socials{display:flex;flex-direction:column;gap:6px}
  .mobileMediaMenu .socialIcon{width:36px;height:36px}
}

/* Institutional brand channel: provisional content, independently scrollable. */
.brandScene{align-items:stretch;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:150px 5vw 110px}
.brandStory{width:min(1200px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(45px,8vw,140px);align-items:center}
.brandStoryIntro{position:relative;padding:35px 0}
.brandStoryIntro::before{content:"";position:absolute;z-index:-1;width:min(42vw,530px);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--c) 32%,transparent);border-radius:50%;left:15%;top:50%;transform:translateY(-50%);box-shadow:0 0 35px color-mix(in srgb,var(--c) 12%,transparent),inset 0 0 35px color-mix(in srgb,var(--c) 7%,transparent);pointer-events:none}
.brandStoryEyebrow,.brandStoryDetails article>span{font-size:9px;letter-spacing:.2em;color:var(--c);font-weight:700}
.brandStory h1{font-size:clamp(36px,4.8vw,72px);line-height:1.08;letter-spacing:.01em;font-weight:500;margin:22px 0 28px}
.brandStory h1 em{font-style:normal;color:var(--c)}
.brandStory p{font-size:14px;line-height:1.8;color:var(--mut);max-width:490px;margin:0}
.brandStoryDetails article{padding:21px 0;border-top:1px solid var(--lineStrong)}
.brandStoryDetails h2{font-size:20px;letter-spacing:.03em;font-weight:500;margin:10px 0}
.brandStoryDetails p{font-size:12px}
@media(max-width:800px){.brandScene{padding:135px 30px 80px}.brandStory{grid-template-columns:1fr;gap:35px}.brandStoryIntro::before{width:min(80vw,400px)}}
@media(max-width:600px){.brandScene{padding:125px 22px 90px}.brandStory{gap:20px}.brandStoryIntro{padding:15px 0}.brandStory h1{font-size:clamp(34px,10vw,48px)}.brandStoryIntro::before{width:75vw;left:12%}.brandStoryDetails article{padding:18px 0}}
body:has(main[data-section="marca"]) .footerProgress,body:has(main[data-section="promocoes"]) .footerProgress,body:has(main[data-section="parceiros"]) .footerProgress{display:none}

/* Lojas físicas: palco de destaque e diretório independente do catálogo 3D. */
.partnersScene{align-items:stretch;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:145px 4vw 95px}
.partnersLayout{width:min(1160px,100%);min-height:min(590px,calc(100vh - 240px));margin:auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(265px,.7fr);gap:clamp(45px,8vw,120px);align-items:center}
.partnerFeature{min-width:0;position:relative;scroll-margin-top:20px}
.partnerWelcome{--partner-ring-size:var(--scene-size);position:relative;min-height:440px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:35px 25px}
.partnerWelcome::before,.partnerWelcome::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--partner-ring-size);aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--txt) 16%,transparent);pointer-events:none}
.partnerWelcome::after{width:calc(var(--partner-ring-size) * .71);border-color:color-mix(in srgb,var(--c) 64%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--c) 25%,transparent),inset 0 0 24px color-mix(in srgb,var(--c) 8%,transparent)}
.partnerWelcome>*{position:relative;z-index:1}
.partnerWelcomeMark{width:54px;height:54px;border:1px solid color-mix(in srgb,var(--c) 65%,transparent);border-radius:50%;display:grid;place-items:center;color:var(--c);margin-bottom:20px}
.partnerWelcomeMark svg,.partnerImageFallback svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.partnersEyebrow{font-size:9px;letter-spacing:.2em;color:var(--c);font-weight:700}
.partnerWelcome h2{font-size:clamp(30px,3.5vw,50px);line-height:1.1;letter-spacing:.03em;font-weight:600;margin:14px 0 17px}.partnerWelcome h2 em{font-style:normal;color:var(--c)}
.partnerWelcome p{font-size:13px;line-height:1.65;max-width:310px;margin:0;color:var(--txt)}
.partnerHint{font-size:8px;letter-spacing:.16em;color:var(--mut);margin-top:22px;line-height:1.5}
.partnersDirectory{align-self:center;min-width:0}.partnersDirectory h1{font-size:clamp(32px,3.2vw,48px);letter-spacing:.04em;line-height:1.1;margin:14px 0}.partnersDirectory h1 span{color:var(--c)}
.partnersIntro{font-size:13px;line-height:1.6;margin:0 0 26px;color:var(--mut)}
.partnersList{border-top:1px solid var(--lineStrong);max-height:min(52vh,460px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--lineStrong) transparent}
.partnersEmpty{padding:23px 0}.partnersEmpty p,.partnersLoading{font-size:13px;line-height:1.5;margin:0 0 8px;color:var(--txt)}.partnersEmpty small{font-size:11px;color:var(--mut);line-height:1.5}.partnersEmptyLine{display:block;width:26px;height:2px;background:var(--c);margin-bottom:17px}
.partnerRow{display:flex;align-items:center;width:100%;gap:14px;text-align:left;border-bottom:1px solid var(--line);padding:14px 4px;transition:background-color .2s,color .2s}.partnerRow:hover,.partnerRow.selected{background:color-mix(in srgb,var(--c) 6%,transparent)}.partnerRow:focus-visible{outline:2px solid var(--c);outline-offset:-2px}
.partnerThumb{width:62px;height:62px;object-fit:cover;border:1px solid var(--lineStrong);flex:none}.partnerImageFallback{display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 6%,transparent)}
.partnerRowText{display:grid;gap:5px;min-width:0;flex:1}.partnerRowText strong{font-size:13px;overflow-wrap:anywhere}.partnerRowText small{font-size:10px;color:var(--mut);line-height:1.35}.partnerRowArrow{color:var(--c);display:grid;place-items:center;flex:none}.partnerRowArrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.partnerDetails{width:100%;max-width:620px;margin:auto}.partnerDetailsHeader{display:flex;align-items:center;gap:20px;margin-bottom:20px}.partnerFeatureImage{width:86px;height:86px;object-fit:cover;border:1px solid var(--lineStrong);flex:none}.partnerDetails h2{font-size:clamp(28px,3.2vw,46px);line-height:1.1;margin:9px 0;overflow-wrap:anywhere}.partnerDetailsHeader p{font-size:12px;line-height:1.5;color:var(--mut);margin:0}
.partnerMap{border:1px solid var(--lineStrong);background:color-mix(in srgb,var(--bg2) 35%,transparent)}.partnerMap iframe{width:100%;height:auto;aspect-ratio:16 / 9;border:0;display:block}.partnerMap>a,.partnerContacts a{display:inline-flex;align-items:center;gap:9px;padding:11px 14px;color:var(--txt);text-decoration:none;font-size:9px;letter-spacing:.12em}.partnerMap>a:hover,.partnerContacts a:hover{color:var(--c)}.partnerMap .buttonArrow svg,.partnerContacts .buttonArrow svg{width:18px;height:18px;fill:none;stroke:var(--c);stroke-width:1.5}.partnerContacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}.partnerContacts a{border:1px solid var(--lineStrong);border-radius:24px}
@media(max-width:800px){.partnersScene{padding:125px 24px 95px}.partnersLayout{display:flex;flex-direction:column;gap:25px;align-items:stretch}.partnerWelcome{--partner-ring-size:320px;min-height:340px}.partnersDirectory{width:100%}.partnersList{max-height:none}.partnerDetails{padding-top:15px}}
@media(max-width:600px){.partnersScene{padding:110px 20px 100px}.partnerWelcome{--partner-ring-size:min(90vw,calc(100dvh - 230px),450px);min-height:310px;padding:25px 12px}.partnerWelcome h2{font-size:32px}.partnerWelcome p{font-size:12px;max-width:270px}.partnerWelcomeMark{width:46px;height:46px;margin-bottom:15px}.partnerHint{margin-top:14px}.partnersDirectory h1{font-size:32px}}
@media(max-width:360px){.partnerWelcomeMark{width:34px;height:34px;margin-bottom:8px}.partnerWelcomeMark svg{width:20px;height:20px}.partnerWelcome h2{font-size:26px;margin:8px 0 10px}.partnerWelcome p{font-size:11px;max-width:225px}.partnerHint{font-size:7px;margin-top:8px}}

.resetFractal{position:absolute;z-index:6;bottom:5%;left:50%;transform:translateX(-50%);border:1px solid var(--line, #777);border-radius:999px;background:rgba(30,30,30,.82);color:#fff;padding:8px 14px;cursor:pointer;font:inherit;font-size:12px;pointer-events:auto}.resetFractal[hidden]{display:none}
@media(max-width:600px){:root:not([data-mobile-panel="modelo"]) .resetFractal{display:none}}