/* ==========================================================================



   Hero Section — layout isolado (overrides Webflow via #hero)



   ========================================================================== */







#hero.hero-section {



  --hero-portal-video-width: 55%;



  --hero-portal-video-half: 27.5%;



  --hero-portal-object-y: 36%;



  --hero-portal-origin-x: 50%;



  --hero-portal-origin-y: 50%;



  --hero-portal-logo-offset-y: -4.5vh;



  --hero-phrase-inset: clamp(3.5vw, 2.5vw, 4.5);



  --hero-exit-opacity: 1;



  position: relative;



  width: 100%;



  z-index: 1;



  background-color: #000;



  overflow: hidden;



}



#hero.hero-section.hero-exiting {



  background-color: transparent;



}



#hero .hero_scroll-area {



  position: relative;



  z-index: 1;



  height: 140vh !important;



  transform: none !important;



  transform-style: flat;



}







#hero .hero-stage,



#hero .hero-w_bg {



  position: sticky !important;



  top: 0 !important;



  right: 0 !important;



  bottom: auto !important;



  left: 0 !important;



  width: 100%;



  height: 100vh;



  height: 100dvh;



  overflow: hidden;



  transform: none !important;



  z-index: 0;



  opacity: var(--hero-exit-opacity, 1);



}



#hero .hero-stage.hero-portal-animating .portal-layer video {



  will-change: transform, filter;



}







/* --- Camada portal (z-index: 1) --- */







#hero .hero-layer--portal {



  position: absolute;



  inset: 0;



  z-index: 1;



  pointer-events: none;



  overflow: hidden;



}







#hero .portal-layer {



  position: absolute;



  inset: 0;



  display: flex;



  align-items: center;



  justify-content: center;



  overflow: hidden;



}







#hero .portal-layer video {



  display: block;



  width: var(--hero-portal-video-width);



  height: 48vh;



  height: 55dvh;



  object-fit: cover;



  object-position: center var(--hero-portal-object-y);



  transform-origin: 0 0;



  will-change: auto;



}







/* --- Camada conteúdo (z-index: 2) --- */







#hero .hero-layer--content,



#hero .content-layer {



  position: absolute;



  inset: 0;



  z-index: 2;



  pointer-events: none;



}







#hero .hero-portal-logo-link {



  position: absolute;



  top: var(--hero-portal-origin-y);



  left: 50%;



  transform: translate(-50%, calc(-50% + var(--hero-portal-logo-offset-y)));



  z-index: 3;



  pointer-events: auto;



  line-height: 0;



  text-decoration: none;



}







#hero .hero-portal-center-logo {



  display: block;



  width: clamp(222px, 28.75vw, 350px);



  height: auto;



}







#hero .hero-side-phrase.left-side {



  position: absolute;



  top: 50%;



  left: var(--hero-phrase-inset);



  right: auto;



  max-width: min(650px, 32.5vw);



  display: flex;



  justify-content: flex-start;



  transform: translateY(-50%);



  z-index: 2;



}







#hero .hero-right-phrase.right-side {



  position: absolute;



  top: 50%;



  right: 8vw;



  left: auto;



  max-width: min(525px, 27.5vw);



  display: flex;



  justify-content: flex-end;



  transform: translateY(-50%);



  z-index: 2;



}







#hero .hero-side-phrase__img,



#hero .hero-right-phrase__img {



  display: block;



  width: auto;



  max-width: clamp(250px, 35vw, 650px);



  height: auto;



}







#hero .hero-right-phrase__img {



  max-width: clamp(225px, 30vw, 525px);



}







body:not(.entered-site) .header_logo {



  opacity: 0 !important;



  visibility: hidden !important;



  pointer-events: none !important;



}







#hero .hero-side-phrase.left-side,

#hero .hero-right-phrase.right-side,

#hero .hero-hand-under {

  will-change: opacity, transform;

}



#hero .hero-hand-under {



  position: absolute;



  bottom: 0;



  left: auto;



  right: 0;



  --hero-portal-hand-y: 0px;



  --hero-portal-hand-scale: 1;



  --hero-portal-periph-opacity: 1;



  transform: translateX(clamp(-260px, -38vw, -520px))

    translateY(var(--hero-portal-hand-y))

    scale(var(--hero-portal-hand-scale));



  opacity: var(--hero-portal-periph-opacity);



  width: auto;



  height: clamp(300px, 62vh, 680px);



  max-width: min(92vw, 980px);



  object-fit: contain;



  object-position: center bottom;



  z-index: 4;



  pointer-events: none;



}







/* --- Scroll hint --- */







#hero .hero-s_bot,



body > .hero-s_bot[data-synapse-viewport-dock] {



  position: fixed;



  right: clamp(24px, 3.8vw, 56px);



  bottom: clamp(20px, 3vh, 40px);



  z-index: 10;



  pointer-events: none;



}







#hero .hero-s_bot_scroll,



body > .hero-s_bot[data-synapse-viewport-dock] .hero-s_bot_scroll {



  display: flex;



  flex-direction: column;



  align-items: flex-end;



  justify-content: flex-end;



}







#hero .hero-s_bot_scroll_cont,



body > .hero-s_bot[data-synapse-viewport-dock] .hero-s_bot_scroll_cont {



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 8px;



}







#hero .hero-s_bot .l1,



body > .hero-s_bot[data-synapse-viewport-dock] .l1 {



  margin: 0;



  color: #fff;



  font-size: clamp(10px, 0.85vw, 12px);



  letter-spacing: 0.12em;



  text-transform: uppercase;



  opacity: 0.85;



}







/* --- Responsivo --- */







@media screen and (max-width: 991px) {



  #hero.hero-section {



    --hero-phrase-inset: clamp(6%, 7.2vw, 9.4%);



    --hero-portal-video-width: calc(55dvh * 16 / 9);



    --hero-portal-video-half: calc(27.5dvh * 16 / 9);



    --hero-portal-object-y: 34%;



    --hero-portal-origin-y: 50%;



  }



  #hero .portal-layer video {



    width: var(--hero-portal-video-width);



    height: 55dvh;



    max-width: none;



    object-fit: contain;



  }



  #hero .hero_scroll-area {



    height: 140vh !important;



  }







  #hero .hero-side-phrase.left-side {



    left: var(--hero-phrase-inset);



    right: auto;



    max-width: min(350px, 42.5vw);



    display: flex;



    justify-content: flex-start;



    transform: translateY(-50%);



  }







  #hero .hero-right-phrase.right-side {



    right: var(--hero-phrase-inset);



    left: auto;



    max-width: min(300px, 37.5vw);



    display: flex;



    justify-content: flex-end;



    transform: translateY(-50%);



  }







  #hero .hero-side-phrase__img {



    max-width: clamp(343px, 87.890625vw, 685px);



  }







  #hero .hero-right-phrase__img {



    max-width: clamp(294px, 78.125vw, 586px);



  }







  #hero .hero-hand-under {

    display: none;

  }



}



@media screen and (max-width: 479px) {



  #hero .hero-side-phrase.left-side {



    top: clamp(72px, 14vh, 120px);



    right: var(--hero-phrase-inset);



    left: auto;



    bottom: auto;



    transform: none;



    justify-content: flex-end;



  }



  #hero .hero-right-phrase.right-side {



    top: auto;



    bottom: clamp(100px, 18vh, 160px);



    left: var(--hero-phrase-inset);



    right: auto;



    transform: none;



    justify-content: flex-start;



  }



  #hero .hero-side-phrase__img {



    max-width: clamp(244px, 68.359375vw, 439px);



  }



  #hero .hero-right-phrase__img {



    max-width: clamp(294px, 78.125vw, 489px);



  }



  #hero .hero_scroll-area {

    height: 140vh !important;

  }



}