/* ============================================================
   IBR — estados iniciais/finais dos efeitos (o motion roda em fx.js).
   ATENÇÃO: sem transition nos estados de reveal de propósito: o Windows do usuário
   encurta transition. Hovers declaram transition só para o morph() ler a duração.
   ============================================================ */

/* ---- reveal: tudo que entra ao rolar nasce escondido (só com fx ativo) ---- */
html.fx .reveal:not(.in) { opacity: 0; }
html.fx :is(.stats-sec__txt, .metodo__txt, .pilares__txt, .faq-sec__txt, .contato__form).reveal:not(.in) { opacity: 1; }
html.fx :is(.stats-sec__txt, .metodo__txt, .pilares__txt, .faq-sec__txt, .contato__form).reveal:not(.in) > * { opacity: 0; }
html.fx :is(.srow, .tcar, .garantia__card).reveal:not(.in) { opacity: 1; }
html.fx .srow:not(.in) :is(img, h3, p) { opacity: 0; }
html.fx .srow:not(.in)::after { transform: scaleY(0); }
html.fx .tcar:not(.in) .tcard { opacity: 0; }
html.fx .garantia__card.reveal:not(.in) > * { opacity: 0; }
html.fx .garantia__card.reveal:not(.in) { opacity: 0; }

/* abertura da página: some até as fontes carregarem para não piscar */
html.fx:not(.fx-ready) :is(.nav__pill, .hero__txt h1, .hero__txt p, .simul) { opacity: 0; }

/* medição do estado final no morph() */
.fx-snap, .fx-snap *, .fx-snap::before, .fx-snap::after, .fx-snap *::before, .fx-snap *::after { transition: none !important; }

/* palavras atrás de máscara (margem negativa: não mexe no layout nem corta acento) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .09em .2em; margin: -.14em -.09em -.2em; }
.wi { display: inline-block; will-change: transform; }

/* ---- títulos dourados com brilho que atravessa ---- */
.gold-title {
  background: linear-gradient(100deg, #d99f2f 0%, #f3d680 14%, #d99f2f 30%, #f3d680 42%, #fff3c9 50%, #f3d680 58%, #d99f2f 72%, #f3d680 86%, #d99f2f 100%);
  background-size: 300% 100%; background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text;
}

/* ---- fio de leitura no topo da tela ---- */
.thread { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, #d99f2f, #f3d680); transform: scaleX(var(--read, 0)); transform-origin: left; }

/* ---- hero: fundo (carro) fixo, sem movimento ---- */
.hero { position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: -4% -3% -6%; background: url(img/banners-site-3.webp) center bottom / cover no-repeat; }
.hero__in { position: relative; z-index: 1; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 0; pointer-events: none; background: linear-gradient(rgba(0, 26, 66, 0), #001a42 92%); }

/* ---- nav compacta ao rolar; um indicador só desliza entre os links ---- */
.nav.is-compact .nav__pill { height: 92px; }
.nav.is-compact .nav__logo img { width: 62px; height: 62px; }
.menu { position: relative; }
.menu a::after { display: none; }
.menu__ind { position: absolute; left: 0; top: calc(50% + 24px); width: 100px; height: 2px; background: var(--gold); transform-origin: 0 50%; border-radius: 2px; pointer-events: none; }

/* ---- botões: brilho que cruza ---- */
.btn, .btn-form { position: relative; overflow: hidden; }
.btn::before, .btn-form::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg); translate: -160% 0;
}
.btn { transition: scale .5s; }
.btn:hover { scale: 1.035; }
.btn-form { transition: background-color .5s; }
.btn-form.is-sent { background: #0a8f1f; }
.btn-form.is-sent::after { content: '✓'; margin-left: .6em; }

/* ---- vídeo ---- */
.video { transition: box-shadow .8s; }
.video:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.video img { transition: scale 1.2s, filter 1.2s; }
.video:hover img { scale: 1.04; filter: brightness(1.08); }
.video__play { position: absolute; }
.video__play::after { content: ''; position: absolute; inset: 4px 10px; border-radius: 18px; border: 2px solid #fff; opacity: 0; pointer-events: none; }
.video.is-playing .video__play { display: none; }

/* ---- números ---- */
.stat { transition: translate .7s, border-color .7s, box-shadow .7s; }
.stat:hover { translate: 0 -8px; border-color: var(--gold); box-shadow: 0 22px 40px rgba(0, 26, 66, .35), 0 0 0 1px rgba(215, 179, 73, .5); }

/* ---- serviços: foto dentro de moldura que recorta o parallax ---- */
.srow__media { overflow: hidden; border-radius: 30px; aspect-ratio: 605 / 358; }
.srow__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; scale: 1.08; will-change: translate; }
.srow { transition: none; }
.srow img { transition: scale 1.4s; }
.srow:hover img { scale: 1.14; }

/* ---- passos: pilha de cartas (só desktop) ---- */
.mcard { position: relative; }
.mcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #00091f; opacity: var(--dim, 0); pointer-events: none; }
@media (min-width: 901px) {
  .mcard { position: sticky; top: calc(130px + var(--i, 0) * 18px); transform-origin: 50% 0; will-change: scale; }
}

/* ---- depoimentos ---- */
.tcar__box { position: relative; }
.tcar__prog { position: absolute; left: 30px; right: 30px; bottom: 9px; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.tcar__track { cursor: grab; }
.tcar__track.is-drag { cursor: grabbing; user-select: none; }
.tcard { transition: translate .7s, box-shadow .7s; }
.tcard:hover { translate: 0 -6px; box-shadow: 0 18px 34px rgba(0, 0, 0, .35); }
.tcar__btn { transition: scale .5s, background-color .5s; }
.tcar__btn:hover { scale: 1.15; background: var(--gold); }

/* ---- pilares ---- */
.pcard { transition: translate .7s, box-shadow .7s; }
.pcard:hover { translate: -8px 0; box-shadow: 0 26px 34px rgba(0, 0, 0, .5); }
.pcard img { transition: rotate .9s, scale .9s; }
.pcard:hover img { rotate: -7deg; scale: 1.1; }

/* ---- garantia: foto numa camada própria (parallax) sob um véu fixo ---- */
.garantia__card { position: relative; overflow: hidden; background: var(--navy); }
.garantia__img { position: absolute; inset: -10% 0; background: url(img/0326.webp) center / cover no-repeat; will-change: translate; }
.garantia__card::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(0, 26, 66, .92) 34%, rgba(0, 26, 66, .15) 80%); }
.garantia__txt { position: relative; z-index: 1; }

/* ---- formulários ---- */
.simul input, .contato input, .contato select { transition: box-shadow .5s, border-color .5s; }
[aria-invalid] { border-color: #d33 !important; box-shadow: 0 0 0 3px rgba(221, 51, 51, .22); }

/* ---- FAQ: cartões com ícone, botão circular e brilho dourado quando abre ---- */
.faq { display: grid; gap: 14px; align-content: start; }
.faq details { position: relative; border-radius: 22px; border: 1px solid rgba(215, 179, 73, .22); background: rgba(255, 255, 255, .04);
  transition: background-color .6s, border-color .6s, translate .6s, box-shadow .6s; }
.faq details:hover { border-color: rgba(215, 179, 73, .55); background: rgba(255, 255, 255, .07); translate: 6px 0; }
.faq details[open] { border-color: rgba(215, 179, 73, .7); background: linear-gradient(135deg, rgba(215, 179, 73, .14), rgba(255, 255, 255, .04) 60%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(215, 179, 73, .25); translate: 0 0; }
.faq details::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--gold); opacity: 0; pointer-events: none; }
.faq details[open]::before { opacity: 1; }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px 1fr 40px; align-items: center; gap: 18px; padding: 18px 20px 18px 18px;
  font: 700 clamp(16px, 1.1vw, 19px)/1.3 var(--font); color: #fff; border-radius: 22px; }
.faq summary::-webkit-details-marker { display: none; }
.faq__ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--gold);
  background: rgba(215, 179, 73, .1); border: 1px solid rgba(215, 179, 73, .3); transition: background-color .6s, color .6s, rotate .6s; }
.faq__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faq details:hover .faq__ic { rotate: -6deg; }
.faq details[open] .faq__ic { background: var(--gold); color: var(--navy); }
.faq summary::after { content: ''; width: 40px; height: 40px; border-radius: 50%; font-size: 0; border: 1.5px solid rgba(215, 179, 73, .6); color: var(--gold);
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; }
.faq details[open] summary::after { border-color: var(--gold); color: var(--navy); background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, var(--gold); }
.faq details p { padding: 0 28px 26px 84px; font: 400 clamp(15px, 1vw, 17px)/1.65 var(--font); color: #d8d5d5; margin: 0; }
@media (max-width: 760px) {
  .faq summary { grid-template-columns: 40px 1fr 34px; gap: 12px; padding: 14px; }
  .faq__ic { width: 40px; height: 40px; border-radius: 12px; }
  .faq__ic svg { width: 20px; height: 20px; }
  .faq summary::after { width: 34px; height: 34px; }
  .faq details p { padding: 0 18px 20px 18px; }
  .faq details:hover { translate: 0 0; }
}

/* ---- navegação e rodapé ---- */
.menu a { transition: color .5s; }
.nav__logo { transition: scale .6s; }
.nav__logo:hover { scale: 1.08; }
.foot__grid a { transition: translate .5s, color .5s; }
.foot__grid a:hover { translate: 5px 0; }
.foot__logo img { will-change: rotate, opacity; }

@media (max-width: 760px) {
  .garantia__card::after { background: rgba(0, 26, 66, .9); }
  .menu { position: absolute; }
  .menu__ind { display: none; }
  .nav.is-compact .nav__pill { height: 70px; }
  .nav.is-compact .nav__logo img { width: 48px; height: 48px; }
}

/* ---- botão flutuante de WhatsApp (celular e PC, aparece depois do hero) ---- */
.wa-fab { display: grid; position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 64px; height: 64px; border-radius: 50%;
  background: var(--green); place-items: center; box-shadow: 0 10px 28px rgba(0, 170, 23, .55); }
.wa-fab svg { width: 33px; height: 33px; fill: #fff; }
html:not(.past-hero) .wa-fab { visibility: hidden; }
@media (max-width: 760px) {
  .wa-fab { right: 16px; bottom: 16px; width: 58px; height: 58px; }
  .wa-fab svg { width: 30px; height: 30px; }
}

/* ---- hambúrguer vira X (morph lê estas durações) ---- */
.burger i { transition: top .5s, rotate .5s, opacity .5s; }
.nav.open .burger i:nth-child(1) { top: 21px; rotate: 45deg; }
.nav.open .burger i:nth-child(2) { opacity: 0; }
.nav.open .burger i:nth-child(3) { top: 21px; rotate: -45deg; }