.lp-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  isolation:isolate;
}

.lp-hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--color-primary);
  transition:background .9s ease;
}
.lp-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 35%);
  pointer-events:none;
}


/* HERO */
.lp-hero-container{
  width:min(100%,1480px);
  min-height:100vh;
  margin-inline:auto;
  padding:135px 110px 76px;
  display:grid;
  grid-template-columns:minmax(560px,690px) minmax(250px,292px) minmax(170px,220px);
  align-items:center;
  column-gap:89px;
}
.lp-hero-copy{
  min-height:455px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.lp-hero-title{
  width:100%;
  max-width:690px;
  color:var(--color-light);
  font-size:72px;
  line-height:.98;
  letter-spacing:-2px;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  background:linear-gradient(100deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,1) 40%,rgba(255,235,225,1) 50%,rgba(255,255,255,1) 60%,rgba(255,255,255,.88) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lp-hero-title.is-animating{
  animation:lpTitleReveal .95s cubic-bezier(.22,.75,.18,1) both,lpTitleShine 2.2s ease .55s both;
}
@keyframes lpTitleReveal{
  from{opacity:0;transform:translate3d(-68px,0,0);filter:blur(11px)}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
@keyframes lpTitleShine{
  from{background-position:180% 50%}
  to{background-position:-40% 50%}
}
.lp-hero-cta{
  display:inline-flex;
  align-items:center;
  gap:21px;
  width:max-content;
  color:var(--color-light);
  font-size:21px;
  line-height:1.08;
  transition:opacity .25s ease, transform .25s ease;
}
.lp-hero-cta img{
  width:55px;
  height:auto;
  flex:0 0 auto;
}
.lp-hero-cta:hover{
  opacity:.78;
  transform:translateX(6px);
}
.lp-hero-cta.is-animating{
  animation:lpFadeLink .85s cubic-bezier(.22,.75,.18,1) both;
}
@keyframes lpFadeLink{
  from{opacity:0; transform:translate3d(-30px,0,0); filter:blur(7px)}
  to{opacity:1; transform:translate3d(0,0,0); filter:blur(0)}
}

/* STORIES SOBREPOSTOS À FOTO */
.lp-stories{
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  z-index:10;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  pointer-events:auto;
}
.lp-stories button{
  position:relative;
  height:4px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.38);
  cursor:pointer;
}
.lp-stories button span{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--color-light);
  transform:scaleX(0);
  transform-origin:left center;
}
.lp-stories button.is-past span{transform:scaleX(1)}
.lp-stories button.is-active span{animation:lpStoryProgress 8s linear forwards}
@keyframes lpStoryProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* IMAGEM */
.lp-hero-media-wrap{
  justify-self:end;
  width:292px;
}
.lp-hero-media{
  position:relative;
  width:100%;
  aspect-ratio:720/1280;
  overflow:hidden;
  border-radius:13px;
  cursor:pointer;
  box-shadow:0 18px 52px rgba(61,31,29,.18);
  -webkit-tap-highlight-color:transparent;
}
.lp-hero-media::after{
  content:"";
  position:fixed;
  left:50%;
  top:50%;
  width:16vmax;
  height:16vmax;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.42) 0%, rgba(255,255,255,.18) 26%, rgba(255,255,255,0) 70%);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
  z-index:8;
}
.lp-hero-media.is-bursting::after{
  animation:lpMediaBurst .58s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes lpMediaBurst{
  0%{opacity:0; transform:translate(-50%,-50%) scale(0)}
  18%{opacity:.95}
  100%{opacity:0; transform:translate(-50%,-50%) scale(14)}
}
.lp-hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:13px;
  opacity:0;
  transform:translateY(-105%);
  filter:brightness(1.9) saturate(.18) contrast(.72);
  will-change:transform,opacity,filter;
}
.lp-hero-media img.is-active{
  z-index:3;
  animation:lpImageDown .78s cubic-bezier(.22,.75,.18,1) forwards;
}
.lp-hero-media img.is-outgoing{
  z-index:2;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .35s ease, transform .35s ease;
}
@keyframes lpImageDown{
  0%{transform:translateY(-105%);opacity:0;filter:brightness(2.05) saturate(.08) contrast(.68)}
  68%{transform:translateY(0);opacity:1;filter:brightness(1.28) saturate(.62) contrast(.88)}
  100%{transform:translateY(0);opacity:1;filter:brightness(1) saturate(1) contrast(1)}
}

/* LINKS LATERAIS */
.lp-slide-nav{
  justify-self:end;
  align-self:center;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.lp-slide-nav button{
  width:178px;
  display:block;
  padding-bottom:14px;
  border:0;
  border-bottom:3px solid rgba(255,255,255,.46);
  background:transparent;
  color:rgba(243,240,236,.50);
  font-size:13px;
  line-height:1.04;
  font-weight:600;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.lp-slide-nav button:hover,
.lp-slide-nav button.is-active{
  color:var(--color-light);
  border-color:var(--color-light);
  transform:translateX(4px);
}

/* SETA SCROLL */
.lp-scroll-indicator{
  position:absolute;
  left:50%;
  bottom:28px;
  z-index:15;
  width:30px;
  height:52px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s ease, opacity .25s ease;
}
.lp-scroll-indicator span{
  width:22px;
  height:22px;
  border-right:3px solid rgba(255,255,255,.88);
  border-bottom:3px solid rgba(255,255,255,.88);
  transform:rotate(45deg);
  animation:lpScrollBlink 1.9s ease-in-out infinite;
}
.lp-scroll-indicator:hover{
  transform:translateX(-50%) translateY(5px);
}
@keyframes lpScrollBlink{
  0%,100%{opacity:.26}
  50%{opacity:1}
}

/* NOTEBOOK */
@media (max-width:1399px){
  .lp-hero-container{
    padding:125px 89px 76px;
    grid-template-columns:minmax(500px,610px) minmax(240px,280px) minmax(160px,200px);
    column-gap:68px;
  }
  .lp-hero-copy{min-height:430px}
  .lp-hero-title{font-size:72px;max-width:610px}
  .lp-hero-media-wrap{width:280px}
}

/* TABLET */
@media (max-width:1199px){
  .lp-hero-container{
    grid-template-columns:minmax(430px,1fr) 260px 180px;
    padding:120px 40px 68px;
    column-gap:38px;
  }
  .lp-hero-copy{min-height:410px}
  .lp-hero-title{font-size:72px;max-width:540px}
  .lp-hero-media-wrap{width:260px}
}

/* MOBILE / TABLET VERTICAL */
@media (max-width:991px){
  .lp-hero-container{
    min-height:100vh;
    grid-template-columns:1fr 250px;
    align-items:center;
    padding:120px 34px 90px;
    column-gap:34px;
  }
  .lp-hero-copy{min-height:410px}
  .lp-hero-title{font-size:55px;max-width:440px;line-height:1}
  .lp-hero-media-wrap{width:250px}
  .lp-slide-nav{display:none}
}

/* MOBILE */
@media (max-width:767px){
  .lp-hero{min-height:auto}
  .lp-hero-container{
    display:flex;
    flex-direction:column;
    min-height:auto;
    padding:115px 21px 104px;
    gap:34px;
  }
  .lp-hero-copy{min-height:auto;gap:34px;width:100%}
  .lp-hero-title{font-size:55px;max-width:100%;line-height:.98}
  .lp-hero-cta{font-size:21px;gap:21px}
  .lp-hero-cta img{width:55px}
  .lp-hero-media-wrap{width:min(68vw,260px);align-self:center}
  .lp-scroll-indicator{bottom:34px}
}

/* MOBILE PEQUENO */
@media (max-width:480px){
  .lp-hero-title{font-size:42px}
  .lp-hero-cta{font-size:18px}
  .lp-hero-cta img{width:42px}
  .lp-hero-media-wrap{width:min(76vw,240px)}
}

/* ENTRADA DO HERO APÓS O PRELOADER */
.lp-hero-intro{
  opacity:0;
  transform:translate3d(0,34px,0);
  filter:blur(6px);
}
body.lp-page-ready .lp-hero-intro{
  animation:lpHeroIntro .9s cubic-bezier(.22,.75,.18,1) forwards;
}
body.lp-page-ready .lp-hero-copy{animation-delay:.12s}
body.lp-page-ready .lp-hero-media-wrap{animation-delay:.22s}
body.lp-page-ready .lp-slide-nav{animation-delay:.32s}
body.lp-page-ready .lp-scroll-indicator{animation-delay:.46s}
@keyframes lpHeroIntro{
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}

@media (prefers-reduced-motion:reduce){
  .lp-hero-intro{opacity:1;transform:none;filter:none}
  body.lp-page-ready .lp-hero-intro,
  .lp-hero-title.is-animating,
  .lp-hero-cta.is-animating,
  .lp-hero-media img.is-active,
  .lp-hero-media.is-bursting::after,
  .lp-scroll-indicator span,
  .lp-stories button.is-active span{animation:none}
}

/* PACK DE CORREÇÃO — TÍTULO SEM QUEBRA FORÇADA */
.lp-hero-title{
  width:100%;
  max-width:690px;
  color:var(--color-light);
  font-size:clamp(58px,4.7vw,72px);
  line-height:.98;
  letter-spacing:-2px;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:balance;
  background:linear-gradient(100deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,1) 40%,
    rgba(255,235,225,1) 50%,
    rgba(255,255,255,1) 60%,
    rgba(255,255,255,.88) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lp-hero-title.is-animating{
  animation:lpTitleRevealSingle .95s cubic-bezier(.22,.75,.18,1) both,
            lpTitleShineSingle 2.2s ease .55s both;
}
@keyframes lpTitleRevealSingle{
  from{opacity:0;transform:translate3d(-68px,0,0);filter:blur(11px)}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
@keyframes lpTitleShineSingle{
  from{background-position:180% 50%}
  to{background-position:-40% 50%}
}
.lp-title-line,
.lp-title-shine{display:contents!important}

@media (max-width:1199px){
  .lp-hero-title{max-width:540px;font-size:clamp(48px,5.4vw,64px)}
}
@media (max-width:767px){
  .lp-hero-title{
    width:100%;
    max-width:100%;
    font-size:clamp(39px,12vw,55px);
    line-height:1;
    text-wrap:pretty;
  }
  .lp-hero-copy{position:relative;z-index:20}
  .lp-hero-media-wrap{position:relative;z-index:5}
  .lp-hero-media{pointer-events:auto}
}


/* AJUSTE — PALETA DOS 4 TEMAS E NAVEGAÇÃO LATERAL */
.lp-hero[data-slide="0"] .lp-hero-bg{background:#d4c7b7}
.lp-hero[data-slide="1"] .lp-hero-bg{background:#c5a49d}
.lp-hero[data-slide="2"] .lp-hero-bg{background:#bfb5b3}
.lp-hero[data-slide="3"] .lp-hero-bg{background:#96857d}

.lp-slide-nav{gap:25px}
.lp-slide-nav button{
  width:190px;
  display:grid;
  grid-template-columns:18px 1fr;
  align-items:center;
  column-gap:13px;
  padding:0 0 13px;
  border-bottom:1px solid rgba(255,255,255,.34);
  color:rgba(255,255,255,.62);
  font-family:var(--font-sans);
  font-size:11px;
  line-height:1;
  font-weight:400;
  letter-spacing:4.5px;
  text-transform:uppercase;
}
.lp-slide-nav button i{
  width:18px;
  font-size:13px;
  text-align:center;
  transition:transform .25s ease,opacity .25s ease;
}
.lp-slide-nav button span{white-space:nowrap}
.lp-slide-nav button:hover,
.lp-slide-nav button.is-active{
  color:#fff;
  border-color:rgba(255,255,255,.85);
  transform:translateX(4px);
}
.lp-slide-nav button.is-active i{transform:scale(1.06)}

@media (max-width:1199px){
  .lp-slide-nav button{width:170px;letter-spacing:3.5px}
}
