/* =====================================================================
   HOVER com a biblioteca de movimento da casa (sem-cara-de-ia, kinetics)
   26/09/2026. Três efeitos, puxados do catálogo, não inventados:
     lift -10px spring  cartões sobem com mola e sombra jade
     draw(400ms)        o sublinhado do link se desenha da esquerda
     magnet(0.35)       o botão principal é puxado pelo cursor (kinetics.js)
   Ajustes da casa em cima do catálogo: 300ms no lugar de 500/400 (teto de
   interface), sombra na cor da marca (o catálogo vinha com preto 0,7), e
   tudo dentro de (hover: hover): no celular o toque não "gruda" o efeito.
   ===================================================================== */
:root{--mola:cubic-bezier(.34,1.56,.64,1);--desenho:cubic-bezier(.65,0,.35,1)}

@media (hover:hover) and (pointer:fine){
  /* lift -10px spring (a mola com quique mora SÓ aqui, uma vez no site) */
  .dor,.lp-item,.degraus a,.reel-tela,.cred-item{
    transition:transform 300ms var(--mola),box-shadow 300ms var(--mola),border-color 240ms ease;
  }
  .dor:hover,.lp-item:hover,.degraus a:hover,.cred-item:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 40px -18px rgba(22,67,58,.38);
    border-color:#9BCDBF;
  }
  .reel:hover .reel-tela{transform:translateY(-8px);box-shadow:0 26px 50px -22px rgba(22,67,58,.5)}
  /* o hover do pai acende um filho: o cartão parece vivo, não só deslocado */
  .dor:hover h3,.lp-item:hover b{color:#1F6B5A}
  .lp-item .k{transition:transform 300ms var(--mola)}
  .lp-item:hover .k{transform:rotate(-8deg) scale(1.08)}

  /* draw(400ms): o sublinhado se desenha. Em repouso fica o fio rosê, que
     já dizia "isto é link"; no hover o traço jade anda por cima dele */
  .nav .links a,.reel-ver,.degraus .ir,.lp-preco .alt,.ig-link span{position:relative;text-decoration:none}
  .nav .links a::after,.reel-ver::after,.degraus .ir::after,.lp-preco .alt::after,.ig-link span::after{
    content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;
    background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--desenho)
  }
  .reel-ver::before,.degraus .ir::before{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:#DBA4A4}
  .nav .links a:hover::after,.reel:hover .reel-ver::after,.degraus a:hover .ir::after,.lp-preco .alt:hover::after,.ig-link:hover span::after{transform:scaleX(1)}
  .nav .links a:hover{text-decoration:none!important;opacity:1}

  /* magnet(0.35): o JS escreve --mx/--my; a volta é curta e sem quique */
  /* .btn.ima com duas classes: o .btn:hover da marca também mexe no transform e ganharia */
  .btn.ima,.btn.ima:hover{transition:transform 150ms cubic-bezier(.23,1,.32,1),background 240ms ease,box-shadow 240ms ease;transform:translate(var(--mx,0),var(--my,0))}
  .btn.ima:hover{box-shadow:0 14px 34px -12px rgba(235,207,156,.55)}
  .btn.ima:active{transform:translate(var(--mx,0),var(--my,0)) scale(.97)}
}
@media (prefers-reduced-motion:reduce){
  .dor,.lp-item,.degraus a,.reel-tela,.cred-item,.ima,.lp-item .k{transition:none!important;transform:none!important}
}