/* Animações e interações */
:root{--ease:cubic-bezier(.2,.7,.2,1)}

/* revelar ao fazer scroll (as classes são postas pelo app.js) */
.js .rv{opacity:0;transform:translate3d(0,30px,0);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s);will-change:opacity,transform}
.js .rv--esq{transform:translate3d(-40px,0,0)}
.js .rv--dir{transform:translate3d(40px,0,0)}
.js .rv--zoom{transform:scale(.94)}
.js .rv.is-in{opacity:1;transform:none}
.rv-all .rv{opacity:1!important;transform:none!important}
.js .eyebrow--center.rv::before,.js .eyebrow--center.rv::after{transform:scaleX(0);transition:transform 1.1s var(--ease) .25s}
.js .eyebrow--center.rv::before{transform-origin:right}
.js .eyebrow--center.rv::after{transform-origin:left}
.js .eyebrow--center.rv.is-in::before,.js .eyebrow--center.rv.is-in::after{transform:scaleX(1)}

/* entrada do topo */
@keyframes sobe{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.js .hero .nav{animation:aparece 1s ease .2s both}
.js .hero__text>*{animation:sobe 1s var(--ease) both}
.js .hero__text>:nth-child(1){animation-delay:.35s}
.js .hero__text>:nth-child(2){animation-delay:.5s}
.js .hero__text>:nth-child(3){animation-delay:.68s}
.js .hero__text>:nth-child(4){animation-delay:.82s}
.js .hero__text>:nth-child(5){animation-delay:.96s}
.js .hero__text>:nth-child(6){animation-delay:1.1s}
.js .pg-form .form-intro>*,.js .pg-form .cartao-form,.js .obrigado__box>*{animation:sobe .9s var(--ease) both}
.js .pg-form .form-intro>:nth-child(2){animation-delay:.1s}
.js .pg-form .form-intro>:nth-child(3){animation-delay:.2s}
.js .pg-form .form-intro>:nth-child(4){animation-delay:.3s}
.js .pg-form .form-intro>:nth-child(5){animation-delay:.4s}
.js .pg-form .cartao-form{animation-delay:.25s}
.js .obrigado__box>:nth-child(2){animation-delay:.15s}
.js .obrigado__box>:nth-child(3){animation-delay:.3s}
.js .obrigado__box>:nth-child(4){animation-delay:.45s}
.js .obrigado__box>:nth-child(5){animation-delay:.6s}

/* barra fixa */
.barra{position:fixed;inset:0 0 auto 0;z-index:40;background:rgba(47,58,34,.9);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(240,212,147,.18);box-shadow:0 10px 30px rgba(20,26,12,.18);transform:translateY(-105%);transition:transform .5s var(--ease)}
.barra.is-on{transform:none}
.barra .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0}
.barra .logo b{font-size:20px}
.barra .logo i{font-size:13px}
.barra__links{display:flex;align-items:center;gap:34px}
.barra__links a:not(.btn){font-weight:500;font-size:17px;color:var(--creme-txt);text-decoration:none;position:relative}
.barra__links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--ouro);transform:scaleX(0);transition:transform .35s var(--ease)}
.barra__links a:not(.btn):hover::after,.barra__links a.is-atual::after{transform:scaleX(1)}
.barra .btn{padding:13px 26px;font-size:12.5px}
.barra .nav__menu{display:none}
.nav__links a:not(.btn){position:relative}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--ouro);transform:scaleX(0);transition:transform .35s var(--ease)}
.nav__links a:not(.btn):hover::after{transform:scaleX(1)}

/* botões */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn--roxo::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,244,214,.38),transparent);transform:skewX(-18deg);transition:left .8s var(--ease);z-index:-1}
.btn--roxo:hover::after{left:120%}
.btn--claro,.btn--oliva{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.btn--claro:hover{background:var(--creme-txt);color:var(--oliva-3);transform:translateY(-2px)}
.btn--oliva:hover{background:var(--oliva-txt);color:var(--creme);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}

/* cartões */
.frase,.testemunho,.espaco,.opcao,.credencial,.cartao-ferr,.pergunta{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s ease}
.frase:hover,.espaco:hover,.cartao-ferr:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(70,81,42,.14)}
.testemunho:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 28px 54px rgba(78,43,75,.2)}
.opcao:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(47,58,34,.22)}
.pergunta:hover{border-color:var(--roxo)}
.motivo img,.passo img,.espaco__topo img{transition:transform .5s var(--ease)}
.motivo:hover img,.passo:hover img,.espaco:hover .espaco__topo img{transform:scale(1.08) rotate(-4deg)}
.ferramentas__img img,.sobre__foto img{transition:transform 1.4s var(--ease)}
.ferramentas__img:hover img,.sobre__foto:hover img{transform:scale(1.04)}
.preco__bg{transition:transform .5s var(--ease)}
.opcao:hover .preco__bg,.faixa:hover .preco__bg{transform:rotate(-3deg) scale(1.04)}

/* respostas que abrem com suavidade */
@keyframes desdobra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pergunta[open] p{animation:desdobra .45s var(--ease)}
.pergunta summary::after{transition:transform .35s var(--ease)}
.pergunta[open] summary::after{transform:rotate(180deg)}

/* céu e lótus */
@keyframes cintila{0%{opacity:.55}50%{opacity:1}100%{opacity:.7}}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes brilho{0%,100%{filter:drop-shadow(0 0 0 rgba(240,212,147,0))}50%{filter:drop-shadow(0 0 22px rgba(240,212,147,.45))}}
.objetivo__estrelas{animation:cintila 5s ease-in-out infinite alternate}
.objetivo__lotus.is-in{animation:flutua 6s ease-in-out infinite,brilho 6s ease-in-out infinite}

/* paralaxe (o JS aplica --py) */
.consulta__foto,.final__foto,.hero__media{overflow:hidden}
.par{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.consulta__foto img.par,.final__foto img.par,.onde__bg.par{transform:translate3d(0,var(--py,0px),0) scale(1.12)}

/* aspas grandes dos testemunhos */
.js .testemunhos__aspas{transition:transform 1.4s var(--ease),opacity 1.4s ease;transform:translateY(40px);opacity:0}
.js .testemunhos.is-in .testemunhos__aspas{transform:none;opacity:.35}

@media (max-width:1279px){.barra__links a:not(.btn){display:none}}
@media (max-width:760px){
  .barra .wrap{padding:10px 0;gap:12px}
  .barra .logo b{font-size:15px}
  .barra .logo i{font-size:11.5px}
  .barra .btn{width:auto;padding:11px 16px;font-size:11px;letter-spacing:.08em}
  .barra .nav__menu{display:block;padding:4px}
  .barra .nav__menu img{width:24px;height:18px}
  .barra__links{gap:10px}
  .js .rv--esq,.js .rv--dir{transform:translate3d(0,26px,0)}
  .frase:hover,.espaco:hover,.opcao:hover,.testemunho:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .hero__text>*,.js .hero .nav,.js .testemunhos__aspas{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .js .testemunhos__aspas{opacity:.35!important}
  .objetivo__estrelas,.objetivo__lotus.is-in{animation:none!important}
  .par{transform:none!important}
  .js .pg-form .form-intro>*,.js .pg-form .cartao-form,.js .obrigado__box>*{animation:none!important}
}