/* ==========================================================================
   Cida Queiroz — camada de movimento + seção "Antes e depois"
   Carregado depois de style.css. Os efeitos de entrada só são escondidos
   quando assets/js/motion.js roda (classe "anim" no <html>); se o JS falhar,
   tudo aparece normalmente.
   ========================================================================== */

:root {
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-suave: cubic-bezier(.45, .1, .2, 1);
}
html { scroll-padding-top: 84px; }

/* ---------- Barra de progresso de leitura ---------- */
.progresso {
  position: fixed; left: 0; top: 0; right: 0; z-index: 70;
  height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--oliva) 0%, var(--ouro) 100%);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

/* ---------- Topo: gruda, ganha vidro e encolhe ao rolar ---------- */
.topo {
  position: sticky; top: 0;
  transition: background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
.topo__barra { transition: height .45s var(--ease); }
.marca__logo { transition: transform .45s var(--ease), box-shadow .3s ease; transform-origin: 0 50%; }
.marca:hover .marca__logo { transform: rotate(-8deg) scale(1.06); }
.topo.is-rolado {
  background: rgba(251, 248, 243, .84);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  box-shadow: 0 14px 30px -24px rgba(51, 36, 26, .55);
}
.topo.is-rolado .topo__barra { height: 68px; }
.topo.is-rolado .marca__logo { transform: scale(.84); }
.topo.is-rolado .marca:hover .marca__logo { transform: rotate(-8deg) scale(.9); }
@media (min-width: 1024px) {
  .topo.is-rolado .topo__barra { height: 76px; }
  .menu__lista a.is-atual { background-size: 100% 1px; color: var(--oliva); }
}

/* ---------- Entrada ao rolar ---------- */
.js.anim .rv {
  opacity: 0;
  transform: translate3d(var(--rv-x, 0), var(--rv-y, 30px), 0) scale(var(--rv-s, 1));
  transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
  will-change: opacity, transform;
}
.js.anim .rv--esq { --rv-x: -44px; --rv-y: 0px; }
.js.anim .rv--dir { --rv-x: 44px; --rv-y: 0px; }
.js.anim .rv--zoom { --rv-y: 14px; --rv-s: .93; }
.js.anim .rv--sobe { --rv-y: 70px; --rv-s: .96; transform-origin: 50% 100%; }
.js.anim .rv.in { opacity: 1; transform: none; }

/* fotos: cortina que abre de baixo para cima + zoom suave */
.js.anim .rv--foto {
  opacity: 1; transform: none;
  clip-path: inset(100% 0 0 0 round 0 0 0 0);
  transition: clip-path 1.3s var(--ease-suave) var(--d, 0s);
}
.js.anim .rv--foto img { transform: scale(1.18); transition: transform 1.8s var(--ease) var(--d, 0s); }
.js.anim .rv--foto.in { clip-path: inset(0 0 0 0); }
.js.anim .rv--foto.in img { transform: none; }

/* títulos: palavra por palavra, saindo de uma máscara */
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em; margin: 0 -.04em -.14em; }
.pal__i { display: inline-block; }
.js.anim .pal__i {
  transform: translate3d(0, 112%, 0) rotate(3deg);
  transition: transform 1.05s var(--ease) var(--d, 0s);
}
.js.anim .rv-titulo.in .pal__i { transform: none; }

/* filete e linhas: desenham de dentro para fora */
.js.anim .filete.rv { transform: scaleX(0); transform-origin: 50% 50%; }
.js.anim .filete.rv.in { transform: scaleX(1); }

/* ---------- Hero ---------- */
@media all {
  .hero__forma { animation: flutuar 9s ease-in-out 2s infinite; }
  .hero__foto { animation: surgir 1.1s var(--ease) .15s both; }
  .hero__marcas li { animation: surgir .9s var(--ease) both; }
  .hero__marcas li:nth-child(1) { animation-delay: .9s; }
  .hero__marcas li:nth-child(2) { animation-delay: 1.05s; }
  .hero__marcas li:nth-child(3) { animation-delay: 1.2s; }
  .hero__estrela { transform-box: fill-box; transform-origin: 50% 50%; }
  .hero__estrela { animation: aparecer .6s ease 1.9s forwards, cintilar 3.4s ease-in-out 2.6s infinite; }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media all {
    .hero__linha--oliva {
      background: linear-gradient(100deg, var(--oliva) 0 38%, #98A272 50%, var(--oliva) 62% 100%) 100% 0 / 260% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: brilho-texto 5.5s ease-in-out 2.4s infinite;
    }
  }
}
@keyframes brilho-texto { 0%, 18% { background-position: 100% 0; } 62%, 100% { background-position: 0 0; } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes cintilar {
  0%, 100% { transform: scale(.85) rotate(0deg); opacity: .75; }
  50% { transform: scale(1.18) rotate(45deg); opacity: 1; }
}

/* ---------- Faixa de atendimentos (rolagem contínua) ---------- */
.faixa {
  position: relative; overflow: hidden;
  background: var(--oliva-profundo); color: var(--areia);
  padding-block: 17px;
  border-block: 1px solid rgba(214, 182, 127, .25);
}
.faixa__trilho { display: flex; width: max-content; }
.faixa__lista { display: flex; flex: none; }
.faixa__lista li {
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--serif); font-size: clamp(1.15rem, .95rem + .9vw, 1.55rem);
  letter-spacing: .02em; line-height: 1;
}
.faixa__lista li::after {
  content: ""; width: 6px; height: 6px; margin-inline: clamp(22px, 3.2vw, 40px);
  background: var(--ouro-claro); transform: rotate(45deg); flex: none;
}
.faixa.is-ativa .faixa__trilho { animation: correr var(--tempo, 42s) linear infinite; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
@keyframes correr { to { transform: translate3d(calc(-100% / var(--n, 2)), 0, 0); } }

/* ---------- Botões ---------- */
.botao { position: relative; overflow: hidden; isolation: isolate; transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .35s ease, transform .35s var(--ease); }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.98); }
.botao--oliva:hover { box-shadow: 0 16px 28px -14px rgba(57, 64, 43, .8); }
.botao--oliva::after, .botao--claro::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -60%;
  width: 40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .4) 50%, transparent 100%);
  transform: skewX(-18deg) translateX(0);
}
.botao--claro::after { background: linear-gradient(105deg, transparent 0%, rgba(176, 138, 79, .28) 50%, transparent 100%); }
.anim .botao--oliva::after, .anim .botao--claro::after { animation: brilho-botao 5.2s ease-in-out 1.6s infinite; }
.botao:hover::after { animation-duration: 1.1s !important; }
@keyframes brilho-botao { 0%, 62% { left: -60%; } 100% { left: 130%; } }

.link-oliva .icone { transition: transform .35s var(--ease); }
.link-oliva:hover .icone { transform: rotate(-10deg) scale(1.12); }

/* WhatsApp flutuante: anel pulsante */
.whats-flutuante::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--oliva); opacity: 0; pointer-events: none;
}
.anim .whats-flutuante.is-visivel::before { animation: pulso 2.8s ease-out 1s infinite; }
.whats-flutuante:hover { transform: scale(1.08) rotate(-6deg) !important; }
@keyframes pulso { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- Atendimentos ---------- */
.destaque__corpo { transition: transform .5s var(--ease), box-shadow .5s ease; }
.destaque::before { transition: transform .5s var(--ease); }
.destaque:hover .destaque__corpo { transform: translate(-3px, -3px); box-shadow: 0 30px 50px -34px rgba(57, 64, 43, .55); }
.destaque:hover::before { transform: translate(15px, 15px); }
.destaque__icone svg { transform-origin: 50% 50%; }
.anim .destaque__icone svg { animation: oscilar 6s ease-in-out infinite; }
@keyframes oscilar { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }
.acordeao__nome { transition: transform .4s var(--ease), color .3s ease; }
.acordeao__botao:hover .acordeao__nome { transform: translateX(6px); }
.acordeao__botao:hover .acordeao__icone svg { transform: scale(1.14) rotate(-6deg); }

/* ---------- Sinais ---------- */
.sinal {
  position: relative; overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s ease, border-color .4s ease, background-color .4s ease, opacity 1s var(--ease) var(--d, 0s);
}
.sinal::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--oliva), var(--ouro));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease);
}
.sinal:hover { transform: translateY(-5px); background: #FFFDF9; border-color: var(--oliva-linha-forte); box-shadow: 0 26px 40px -30px rgba(51, 36, 26, .5); }
.sinal:hover::after { transform: scaleX(1); }
.sinal__marca { transition: transform .5s var(--ease); }
.sinal:hover .sinal__marca { transform: scale(1.18) rotate(-8deg); }
.js.anim .sinal .sinal__marca { transform: scale(0) rotate(-90deg); transition: transform .8s var(--ease) calc(var(--d, 0s) + .25s); }
.js.anim .sinal.in .sinal__marca, .js.anim .sinal.rv-feito .sinal__marca { transform: none; }
.js.anim .sinal.rv-feito:hover .sinal__marca { transform: scale(1.18) rotate(-8deg); }

/* ---------- Sobre ---------- */
.sobre__numero { will-change: translate; }
.credenciais li { transition: padding-left .4s var(--ease), background-color .4s ease; }
.credenciais li:hover { padding-left: 10px; background: linear-gradient(90deg, rgba(85, 96, 60, .06), transparent 70%); }
.credenciais__icone svg { transition: transform .5s var(--ease); }
.credenciais li:hover .credenciais__icone svg { transform: scale(1.2) rotate(-8deg); }
.js.anim .credenciais .credenciais__icone svg { transform: scale(0); transition: transform .7s var(--ease) calc(var(--d, 0s) + .3s); }
.js.anim .credenciais li.in .credenciais__icone svg, .js.anim .credenciais li.rv-feito .credenciais__icone svg { transform: none; }
.js.anim .credenciais li.rv-feito:hover .credenciais__icone svg { transform: scale(1.2) rotate(-8deg); }

/* brilhos (estrela de quatro pontas) cintilando */
.sobre__brilho, .homecare__brilho, .contato__brilho { transform-origin: 50% 50%; }
.anim .sobre__brilho, .anim .homecare__brilho, .anim .contato__brilho { animation: cintilar 3.6s ease-in-out infinite; }

/* ---------- Home Care ---------- */
.anim .homecare__curva path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-suave); }
.anim .homecare.in .homecare__curva path { stroke-dashoffset: 0; }
.anim .homecare__ponta { opacity: 0; transition: opacity .8s ease 2.2s; }
.anim .homecare.in .homecare__ponta { opacity: 1; }
.homecare__porta::before { transition: border-color .6s ease; }
.anim .homecare__porta::after { animation: respirar 7s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.homecare__losango { transition: transform .6s var(--ease); }
.anim .homecare__losango { animation: losango 4.5s ease-in-out infinite; }
@keyframes losango { 0%, 100% { transform: translate(-50%, -50%) rotate(45deg) scale(1); } 50% { transform: translate(-50%, -50%) rotate(225deg) scale(1.3); } }
.assinatura__script { display: inline-block; }
.anim .assinatura__script { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease-suave) .5s; }
.anim .homecare__porta.in .assinatura__script { clip-path: inset(0 -4% 0 0); }

/* ---------- Depoimentos ---------- */
.depo { transition-property: transform, opacity, background-color, border-color, filter, box-shadow; }
.depo.is-ativo { box-shadow: 0 34px 60px -40px rgba(51, 36, 26, .55); }
.depo__aspas { display: inline-block; }
.anim .depo.is-ativo .depo__aspas { animation: aspas 4s ease-in-out infinite; }
@keyframes aspas { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-5deg); } }
.carrossel__seta { transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .35s var(--ease); }
.carrossel__seta:not(:disabled):hover { transform: scale(1.1); }

/* ---------- Contato final ---------- */
.contato__linha, .contato__arco { will-change: translate; }
.anim .contato__linha { animation: contorno 8s ease-in-out infinite; }
@keyframes contorno { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(7px, -5px); } }
.contato__foto { transition: transform .8s var(--ease); }
.contato__visual:hover .contato__foto { transform: scale(1.03); }
.contato .botao--claro { box-shadow: 0 0 0 0 rgba(214, 182, 127, .5); }
.anim .contato .botao--claro { animation: halo 3.2s ease-out 1.5s infinite; }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(214, 182, 127, .5); } 70%, 100% { box-shadow: 0 0 0 18px rgba(214, 182, 127, 0); } }

/* ---------- Rodapé ---------- */
.rodape__links a .icone { transition: transform .35s var(--ease); }
.rodape__links a:hover .icone { transform: translateY(-3px) rotate(-8deg); }
.rodape__marca img { transition: transform .6s var(--ease); }
.rodape__marca:hover img { transform: rotate(360deg); }

/* ==========================================================================
   ANTES E DEPOIS
   ========================================================================== */
.resultados {
  position: relative; overflow: hidden;
  padding-block: 88px 104px;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(223, 224, 207, .7), transparent 70%),
    linear-gradient(180deg, var(--papel) 0%, var(--nevoa-claro) 100%);
  border-top: 1px solid var(--oliva-linha);
}
.resultados__grade {
  position: relative; z-index: 1;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px;
}
.resultados__topo .selo { margin-bottom: 20px; }
.resultados__oliva { color: var(--oliva); }
.resultados__intro { margin-top: 20px; max-width: 40ch; color: var(--tinta-suave); }
.resultados__cta { width: 100%; justify-self: start; }
.resultados__brilho { position: absolute; color: var(--ouro); pointer-events: none; width: 22px; height: 22px; }
.resultados__brilho--a { top: 9%; right: 8%; }
.resultados__brilho--b { bottom: 8%; left: 5%; width: 16px; height: 16px; opacity: .8; }
.anim .resultados__brilho { animation: cintilar 4s ease-in-out infinite; }
.anim .resultados__brilho--b { animation-delay: 1.4s; }

.resultados__palco { position: relative; isolation: isolate; margin-right: 12px; }
.resultados__palco::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--oliva-linha-forte);
  border-top-right-radius: 96px;
  transform: translate(12px, 12px);
}
.resultados__palco::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: #FFFDF9; border-top-right-radius: 96px;
  box-shadow: 0 40px 70px -50px rgba(51, 36, 26, .55);
}
.resultados__palco { padding: 18px 18px 20px; }

.abas { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.aba {
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--oliva-linha-forte); background: transparent; color: var(--oliva);
  font: 650 .9rem/1 var(--sans); cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.aba:hover { transform: translateY(-2px); background: rgba(85, 96, 60, .08); }
.aba.is-ativo { background: var(--oliva); border-color: var(--oliva); color: var(--claro); }

.caso[hidden] { display: none; }
.caso.is-ativo { animation: entrar-caso .75s var(--ease) both; }
@keyframes entrar-caso { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.comparador__quadro, .video-quadro {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 14px 14px 14px 14px;
  background: var(--salvia);
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  -webkit-tap-highlight-color: transparent;
}
.comparador__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none;
}
.comparador__img--antes { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.comparador__rotulo {
  position: absolute; top: 14px; z-index: 3;
  padding: 7px 14px 8px; border-radius: 999px;
  font: 700 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--claro); background: rgba(51, 36, 26, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  pointer-events: none; transition: opacity .35s ease, transform .5s var(--ease);
}
.comparador__rotulo--antes { left: 14px; }
.comparador__rotulo--depois { right: 14px; background: rgba(85, 96, 60, .72); }
.comparador[style*="--pos:0"] .comparador__rotulo--antes { opacity: 0; }
.comparador__linha {
  position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7));
  box-shadow: 0 0 0 1px rgba(51, 36, 26, .12), 0 0 18px rgba(255, 255, 255, .6);
  pointer-events: none;
}
.comparador__alca {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papel); color: var(--oliva);
  box-shadow: 0 10px 24px -8px rgba(51, 36, 26, .6), 0 0 0 5px rgba(255, 255, 255, .35);
  transition: transform .35s var(--ease), box-shadow .3s ease;
}
.comparador__alca svg { width: 24px; height: 24px; }
.comparador__quadro:hover .comparador__alca { transform: scale(1.1); }
.comparador.is-arrastando .comparador__alca { transform: scale(.94); box-shadow: 0 6px 16px -8px rgba(51, 36, 26, .7), 0 0 0 9px rgba(255, 255, 255, .3); }
.comparador:not(.tocou) .comparador__alca { animation: dica 2.4s ease-in-out 1s infinite; }
@keyframes dica {
  0%, 100% { box-shadow: 0 10px 24px -8px rgba(51, 36, 26, .6), 0 0 0 5px rgba(255, 255, 255, .35); }
  50% { box-shadow: 0 10px 24px -8px rgba(51, 36, 26, .6), 0 0 0 14px rgba(255, 255, 255, 0); }
}
.comparador__range {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.comparador:has(.comparador__range:focus-visible) .comparador__alca { outline: 3px solid var(--oliva); outline-offset: 4px; }

.video-quadro { cursor: default; touch-action: auto; background: var(--cacau); }
.video-quadro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.resultados__nota { margin-top: 16px; font-size: .86rem; line-height: 1.5; color: var(--tinta-suave); }

@media (min-width: 640px) {
  .resultados__cta { width: auto; padding-inline: 30px; }
  .resultados__palco { padding: 24px 24px 24px; }
  .comparador__quadro, .video-quadro { aspect-ratio: 16 / 10; border-radius: 18px; }
}
@media (min-width: 1024px) {
  .resultados { padding-block: 120px 132px; }
  .resultados__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; grid-template-areas: "topo palco" "cta palco"; row-gap: 36px; }
  .resultados__topo { grid-area: topo; align-self: end; }
  .resultados__palco { grid-area: palco; margin-right: 14px; }
  .resultados__cta { grid-area: cta; align-self: start; }
}

/* ==========================================================================
   Movimento reduzido: quem pediu menos animação no sistema continua vendo as
   entradas, mas só como um fade suave (sem deslocamentos, loops ou parallax).
   ========================================================================== */
html.sem-mov {
  scroll-behavior: auto;
}
html.sem-mov .js.anim .rv, .sem-mov.js.anim .rv { --rv-x: 0px; --rv-y: 0px; --rv-s: 1; }
html.sem-mov *, html.sem-mov *::before, html.sem-mov *::after { animation: none !important; transition: none !important; }
html.sem-mov.js.anim .rv { transition: opacity .7s ease var(--d, 0s) !important; }
html.sem-mov.js.anim .rv--foto { clip-path: none; transition: none !important; }
html.sem-mov.js.anim .rv--foto img { transform: none; }
html.sem-mov.js.anim .pal__i, html.sem-mov.js.anim .sinal .sinal__marca, html.sem-mov.js.anim .credenciais .credenciais__icone svg { transform: none; }
html.sem-mov.js.anim .filete.rv { transform: none; }
html.sem-mov.anim .homecare__curva path { stroke-dashoffset: 0; }
html.sem-mov.anim .homecare__ponta { opacity: 1; }
html.sem-mov.anim .assinatura__script { clip-path: none; }

/* palavras dos títulos: vencem regras "span { display:inline }" do style.css */
.titulo-secao .pal, .depoimentos__titulo .pal, .contato__titulo .pal { display: inline-block; }
.titulo-secao .pal__i, .depoimentos__titulo .pal__i, .contato__titulo .pal__i { display: inline-block; }

/* ==========================================================================
   V4 — MAIS MOVIMENTO
   ========================================================================== */

/* ---------- Abertura (cortina de entrada) ---------- */
.intro { display: none; }
.js .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(ellipse at 50% 40%, #FFFDF9 0%, var(--papel) 55%, var(--creme) 100%);
  clip-path: inset(0 0 0 0);
}
.js .intro.sai { animation: cortina 1.1s var(--ease-suave) forwards; }
.pronto .intro { display: none !important; }
@keyframes cortina { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }
.intro__miolo { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 24px; }
.intro__logo {
  width: 96px; height: 96px; border-radius: 50%; position: relative; z-index: 1;
  box-shadow: 0 0 0 1px var(--oliva-linha), 0 18px 40px -20px rgba(51, 36, 26, .5);
  animation: intro-logo 1.2s var(--ease) both;
}
.intro__anel {
  position: absolute; width: 96px; height: 96px; border-radius: 50%;
  border: 1px solid var(--ouro); opacity: 0;
  animation: intro-anel 1.8s ease-out .3s infinite;
}
.intro__nome {
  font-family: var(--serif); font-size: clamp(1.3rem, 5vw, 1.8rem);
  letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--cacau);
  animation: surgir .9s var(--ease) .35s both;
}
.intro__linha {
  display: block; width: 140px; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro), transparent);
  transform-origin: 50% 50%; animation: intro-linha 1.1s var(--ease-suave) .55s both;
}
.intro__sub { font-size: .8rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--oliva); animation: surgir .9s var(--ease) .7s both; }
@keyframes intro-logo { from { opacity: 0; transform: scale(.4) rotate(-120deg); } to { opacity: 1; transform: none; } }
@keyframes intro-anel { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes intro-linha { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
/* o hero só começa a animar quando a cortina abre */
.js:not(.liberado) .hero *, .js:not(.liberado) .hero *::before, .js:not(.liberado) .hero *::after { animation-play-state: paused !important; }
.js:not(.liberado) .topo { transform: translateY(-100%); }
.topo { transition: transform .9s var(--ease) .1s, background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease; }

/* ---------- Manchas de luz e partículas ---------- */
.anim .servicos, .anim .sinais, .anim .resultados, .anim .homecare, .anim .hero, .anim .contato { isolation: isolate; }
.anim .servicos, .anim .sinais { overflow: clip; position: relative; }
.blob {
  position: absolute; z-index: -1; pointer-events: none;
  width: clamp(260px, 38vw, 520px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--c, rgba(142, 150, 114, .32)) 0%, transparent 68%);
  animation: vagar var(--t, 22s) ease-in-out var(--dl, 0s) infinite alternate;
}
.blob--a { top: -12%; left: -10%; }
.blob--b { bottom: -16%; right: -8%; --c: rgba(214, 182, 127, .3); --t: 27s; --dl: -9s; }
.blob--c { top: 38%; left: 52%; --c: rgba(223, 224, 207, .7); --t: 31s; --dl: -15s; width: clamp(200px, 28vw, 380px); }
.contato .blob { --c: rgba(176, 138, 79, .22); }
@keyframes vagar {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7vw, 5vh, 0) scale(1.18); }
  100% { transform: translate3d(-5vw, 9vh, 0) scale(.92); }
}
.faiscas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx {
  position: absolute; bottom: -24px; left: var(--x, 50%);
  width: var(--s, 10px); height: var(--s, 10px);
  background: var(--ouro); opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: subir var(--dur, 12s) linear var(--atr, 0s) infinite;
}
.contato .fx { background: var(--ouro-claro); }
@keyframes subir {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.6); opacity: 0; }
  12% { opacity: .85; }
  80% { opacity: .6; }
  100% { transform: translate3d(var(--dx, 30px), -105vh, 0) rotate(360deg) scale(1.1); opacity: 0; }
}

/* ---------- Cursor com brilho e rastro de faíscas (só mouse) ---------- */
.cursor, .cursor-ponto { display: none; }
@media (hover: hover) and (pointer: fine) {
  .anim .cursor, .anim .cursor-ponto { display: block; position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
  .anim .cursor.on, .anim .cursor-ponto.on { opacity: 1; }
  .cursor {
    width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
    border: 1px solid rgba(85, 96, 60, .55);
    background: radial-gradient(circle, rgba(214, 182, 127, .14), transparent 70%);
    transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s ease, border-color .3s ease, opacity .3s ease !important;
  }
  .cursor.sobre-link { width: 70px; height: 70px; margin: -35px 0 0 -35px; background-color: rgba(85, 96, 60, .12); border-color: var(--ouro); }
  .cursor.sobre-arraste { width: 84px; height: 84px; margin: -42px 0 0 -42px; background-color: rgba(251, 248, 243, .35); border-color: #fff; }
  .cursor.sobre-escuro { border-color: var(--ouro-claro); }
  .cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ouro); transform: rotate(45deg); }
  .faisca {
    position: fixed; z-index: 89; left: 0; top: 0; pointer-events: none;
    width: var(--s, 9px); height: var(--s, 9px); background: var(--ouro);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: faisca 900ms ease-out forwards;
  }
  @keyframes faisca {
    from { transform: translate3d(var(--x), var(--y), 0) scale(1) rotate(0deg); opacity: .95; }
    to { transform: translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), 0) scale(0) rotate(180deg); opacity: 0; }
  }
}

/* ---------- Botões: magnético + ondinha ao clicar ---------- */
.botao, .aba, .carrossel__seta, .whats-flutuante { translate: var(--mx-t, 0) var(--my-t, 0); }
.botao { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .35s ease, transform .35s var(--ease), translate .6s cubic-bezier(.2, 1.5, .4, 1); }
.mag-on { transition-property: background-color, color, border-color, box-shadow, transform !important; }
.onda {
  position: absolute; z-index: 2; pointer-events: none; border-radius: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  background: rgba(255, 255, 255, .55);
  animation: onda .75s ease-out forwards;
}
.botao--claro .onda, .aba .onda { background: rgba(85, 96, 60, .28); }
@keyframes onda { to { transform: scale(var(--k, 18)); opacity: 0; } }
.aba { position: relative; overflow: hidden; }

/* ---------- Tilt 3D e brilho que segue o mouse ---------- */
[data-tilt] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); will-change: transform; }
[data-tilt].tilt-on { transition: transform .12s linear; }
.sinal:hover { transform: perspective(900px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.sinal.tilt-on { transition: transform .12s linear, box-shadow .5s ease, border-color .4s ease, background-color .4s ease; }
.sinal { background-image: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(214, 182, 127, 0), transparent 60%); }
.sinal:hover { background-image: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 50%), rgba(214, 182, 127, .24), transparent 62%); }
.destaque:hover .destaque__corpo { transform: perspective(1000px) translate(-3px, -3px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.destaque__corpo.tilt-on { transition: transform .12s linear, box-shadow .5s ease; }
.destaque__corpo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), transparent 62%);
}
.destaque:hover .destaque__corpo::before { opacity: 1; }

/* números grandes nos sinais */
.sinais__lista { counter-reset: sinal; }
.sinal { counter-increment: sinal; }
.sinal::before {
  content: counter(sinal, decimal-leading-zero);
  position: absolute; right: 16px; top: 6px; z-index: 0; pointer-events: none;
  font-family: var(--serif); font-size: 3.6rem; line-height: 1; letter-spacing: -.02em;
  color: rgba(85, 96, 60, .1);
  transition: transform .6s var(--ease), color .4s ease;
}
.sinal:hover::before { transform: translateY(6px) scale(1.12); color: rgba(176, 138, 79, .4); }

/* ---------- Faixas: segunda faixa (contorno, sentido contrário) ---------- */
.faixa--b { background: var(--creme); color: var(--oliva); border-color: var(--oliva-linha); padding-block: 22px; }
.faixa--b .faixa__lista li { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.8rem); color: transparent; -webkit-text-stroke: 1px var(--oliva); letter-spacing: .01em; }
.faixa--b .faixa__lista li:nth-child(even) { color: var(--oliva); -webkit-text-stroke: 0; font-style: normal; }
.faixa--b .faixa__lista li::after { background: var(--ouro); width: 9px; height: 9px; }
.faixa--b.is-ativa .faixa__trilho { animation-direction: reverse; }

/* ---------- Extras de texto e detalhes ---------- */
.sobre__fecho span { background: linear-gradient(var(--ouro), var(--ouro)) 0 100% / 0 1px no-repeat; padding-bottom: 4px; transition: background-size 1.6s var(--ease-suave) .6s; }
.sobre__fecho.in span, .sobre__fecho.rv-feito span { background-size: 100% 1px; }
.js .acordeao__item.is-aberto .acordeao__conteudo > * { animation: surgir .6s var(--ease) both; }
.js .acordeao__item.is-aberto .acordeao__conteudo > :nth-child(2) { animation-delay: .12s; }
.anim .whats-flutuante svg { animation: balancar 7s ease-in-out 3s infinite; transform-origin: 50% 80%; }
@keyframes balancar { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-14deg); } 93% { transform: rotate(12deg); } 96% { transform: rotate(-8deg); } 98% { transform: rotate(4deg); } }
.anim .depo.is-ativo .depo__avatar { animation: pulso-av 3s ease-out infinite; }
@keyframes pulso-av { 0% { box-shadow: 0 0 0 0 rgba(85, 96, 60, .35); } 70%, 100% { box-shadow: 0 0 0 12px rgba(85, 96, 60, 0); } }
.hero__marcas li { transition: transform .45s var(--ease); }
.hero__marcas li:hover { transform: translateY(-4px); }
.anim .comparador__quadro::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%) -120% 0 / 220% 100% no-repeat;
  animation: reluzir 6s ease-in-out 2s infinite;
}
@keyframes reluzir { 0%, 55% { background-position: -120% 0; } 100% { background-position: 120% 0; } }
.hero__foto, .sobre__foto, .contato__foto { filter: drop-shadow(0 22px 28px rgba(51, 36, 26, .18)); }

html.sem-mov .intro, html.sem-mov .cursor, html.sem-mov .cursor-ponto, html.sem-mov .faiscas, html.sem-mov .blob, html.sem-mov .faisca { display: none !important; }
html.sem-mov [data-tilt] { transform: none !important; }

/* botão para quem prefere menos animação */
.botao-mov {
  position: fixed; z-index: 60; left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  min-height: 36px; padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; border: 1px solid var(--oliva-linha-forte);
  background: rgba(251, 248, 243, .88); color: var(--oliva);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 650 .76rem/1 var(--sans); cursor: pointer;
}
.botao-mov i { width: 8px; height: 8px; background: var(--ouro); transform: rotate(45deg); }
.botao-mov[aria-pressed="false"] i { background: var(--tinta-suave); opacity: .5; }
.botao-mov:hover { background: #fff; }