/* Static Room uploaded visual scraps */
.hero-interface{position:relative;z-index:3}
.section>.asset-doodle,.newsletter>.asset-doodle{z-index:1}
.section>:not(.asset-doodle),.newsletter>:not(.asset-doodle){position:relative;z-index:2}
.asset-doodle{
  position:absolute;
  display:block;
  max-width:none;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(4px 5px 0 rgba(19,13,22,.78));
  transform-origin:center;
}
.hero>.asset-doodle{z-index:1}
.doodle-cloud{width:clamp(120px,18vw,310px);left:3%;bottom:3%;transform:rotate(-8deg);opacity:.96}
.doodle-orbit{width:clamp(90px,11vw,190px);right:3%;top:18%;transform:rotate(13deg);animation:scrapFloat 5.5s ease-in-out infinite}
.doodle-spring{width:clamp(95px,13vw,220px);right:-2%;top:7%;transform:rotate(18deg)}
.doodle-star{width:clamp(72px,9vw,150px);left:2%;top:24%;transform:rotate(-14deg);animation:scrapPulse 3.4s ease-in-out infinite}
.doodle-spiral{width:clamp(90px,12vw,210px);right:2%;top:4%;transform:rotate(8deg)}
.doodle-archive{width:clamp(105px,16vw,260px);left:-2%;bottom:4%;transform:rotate(-9deg);opacity:.92}
.doodle-news{width:clamp(100px,14vw,240px);right:1%;bottom:4%;transform:rotate(11deg)}
.product-scrap{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:min(72%,260px);
  max-height:78%;
  object-fit:contain;
  transform:translate(-50%,-50%) rotate(-7deg);
  filter:drop-shadow(6px 7px 0 rgba(19,13,22,.85));
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.product-card:nth-child(2) .product-scrap{transform:translate(-50%,-50%) rotate(6deg);width:min(76%,280px)}
.product-card:nth-child(3) .product-scrap{transform:translate(-50%,-50%) rotate(-2deg);width:min(70%,250px)}
.product-visual.has-scrap::after{opacity:.16;z-index:1}
.product-visual.has-scrap::before{z-index:0}
.note-card{position:relative;overflow:visible}
.note-scrap{
  position:absolute;
  z-index:3;
  right:-20px;
  top:-45px;
  width:115px;
  transform:rotate(12deg);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(3px 4px 0 rgba(19,13,22,.75));
}
@keyframes scrapFloat{0%,100%{transform:rotate(13deg) translateY(0)}50%{transform:rotate(18deg) translateY(-12px)}}
@keyframes scrapPulse{0%,100%{transform:rotate(-14deg) scale(1)}50%{transform:rotate(-8deg) scale(1.08)}}
@media (max-width:900px){
  .doodle-spring{right:-8%}
  .doodle-star{left:-3%}
  .doodle-spiral{right:-5%}
  .doodle-archive{left:-7%}
}
@media (max-width:620px){
  .doodle-orbit,.doodle-archive{display:none}
  .doodle-cloud{width:125px;left:-8px;bottom:1%}
  .doodle-spring{width:100px;right:-25px;top:2%}
  .doodle-star{width:76px;left:-15px;top:17%}
  .doodle-spiral{width:88px;right:-22px}
  .doodle-news{width:100px;right:-25px;bottom:2%}
  .note-scrap{width:86px;right:-10px;top:-30px}
}
@media (prefers-reduced-motion:reduce){.doodle-orbit,.doodle-star{animation:none}}

/* Um pouco maior. Sem fundar um segundo header. */
.site-nav .brand-logo{
  width:clamp(292px,29vw,415px) !important;
  max-height:98px !important;
  transform:translateY(-9px) !important;
}
@media(max-width:900px){
  .site-nav .brand-logo{
    width:clamp(270px,38vw,345px) !important;
    max-height:86px !important;
    transform:translateY(-7px) !important;
  }
}
@media(max-width:620px){
  .site-nav .brand-logo{
    width:245px !important;
    max-height:76px !important;
    transform:translateY(-5px) !important;
  }
}

/* Agora cresce o PNG de verdade, não só a área clicável. */
.site-nav .nav-links{
  overflow:visible !important;
}
.site-nav .nav-links a{
  overflow:visible !important;
}
.site-nav .nav-label-image{
  width:auto !important;
  height:clamp(68px,5vw,92px) !important;
  max-width:none !important;
  transform:scale(1.14);
  transform-origin:center;
}
.site-nav .nav-links a:hover .nav-label-image,
.site-nav .nav-links a:focus-visible .nav-label-image{
  transform:translateY(-2px) rotate(-1deg) scale(1.18) !important;
}
@media(min-width:901px){
  .site-nav .nav-links{
    flex:1 1 auto !important;
    justify-content:space-evenly !important;
    gap:0 !important;
    margin-left:clamp(8px,1vw,18px) !important;
    margin-right:clamp(8px,1vw,18px) !important;
    min-width:0;
  }
  .site-nav .nav-links a{
    flex:1 1 25%;
    min-width:0;
    padding-inline:0 !important;
  }
}
@media(max-width:900px){
  .site-nav .nav-label-image{
    height:58px !important;
    transform:scale(1.08);
  }
}

/* Mantém o PNG grande, mas traz a faixa amarela para dentro do header. */
@media(min-width:901px){
  .site-nav{
    min-height:118px !important;
    padding-top:8px !important;
    padding-bottom:14px !important;
    align-items:center !important;
    overflow:visible !important;
  }
  .site-nav .nav-links{
    align-self:stretch;
    align-items:center !important;
  }
  .site-nav .nav-links a{
    min-height:96px !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .site-nav .nav-label-image{
    transform:translateY(-6px) scale(1.14) !important;
  }
  .site-nav .nav-links a:hover .nav-label-image,
  .site-nav .nav-links a:focus-visible .nav-label-image{
    transform:translateY(-8px) rotate(-1deg) scale(1.18) !important;
  }
}

/* A marca volta a ser a maior criatura do header. */
@media(min-width:901px){
  .site-nav .brand{
    height:104px !important;
    align-items:center !important;
  }
  .site-nav .brand-logo{
    width:clamp(330px,32vw,455px) !important;
    max-height:112px !important;
    transform:translateY(-5px) scale(1.06) !important;
    transform-origin:left center !important;
  }
}
@media(max-width:900px){
  .site-nav .brand-logo{
    width:clamp(290px,41vw,370px) !important;
    max-height:96px !important;
    transform:translateY(-5px) scale(1.04) !important;
    transform-origin:left center !important;
  }
}
@media(max-width:620px){
  .site-nav .brand-logo{
    width:260px !important;
    max-height:82px !important;
    transform:translateY(-3px) scale(1.03) !important;
  }
}

/* Quase encosta na borda, sem atropelar os adesivos. */
@media(min-width:901px){
  .site-nav .brand{
    height:116px !important;
    margin-left:clamp(-48px,-3vw,-16px) !important;
    overflow:visible !important;
  }
  .site-nav .brand-logo{
    width:clamp(360px,35vw,510px) !important;
    max-height:122px !important;
    transform:translateY(-3px) scale(1.05) !important;
    transform-origin:left center !important;
  }
}
@media(max-width:900px){
  .site-nav .brand-logo{
    width:clamp(310px,44vw,405px) !important;
    max-height:104px !important;
    transform:translateY(-4px) scale(1.04) !important;
  }
}
@media(max-width:620px){
  .site-nav .brand-logo{
    width:282px !important;
    max-height:88px !important;
    transform:translateY(-3px) scale(1.03) !important;
  }
}