/*
 * Bloom: animações de hover partilhadas por todas as páginas.
 * Só em dispositivos com rato (hover: hover) e desligadas com prefers-reduced-motion.
 * Usa as propriedades translate, scale e rotate (independentes de transform) e mantém
 * as transições de opacity e transform das animações de entrada (com os respetivos atrasos).
 * Incluir depois dos outros estilos:  <link rel="stylesheet" href="assets/hover.css">
 */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){

  /* ---------- Botões: sobem, a seta avança e passa um brilho ---------- */
  .btn, .send, .icon-btn{
    position: relative;
    overflow: hidden;
    transition: opacity .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), transform .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), translate .35s cubic-bezier(.2,.7,.1,1), scale .2s cubic-bezier(.2,.7,.1,1), box-shadow .35s cubic-bezier(.2,.7,.1,1), background-color .25s, color .25s, border-color .25s;
  }
  .btn::after, .send::after{
    content: "";
    position: absolute; top: 0; bottom: 0; left: -60%;
    width: 50%;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg) translateX(0);
    pointer-events: none;
    opacity: 0;
  }
  .btn:hover::after, .send:hover::after{ animation: bloom-sheen .75s cubic-bezier(.2,.7,.1,1); }
  @keyframes bloom-sheen{
    0%{ left: -60%; opacity: 0; }
    20%{ opacity: 1; }
    100%{ left: 120%; opacity: 0; }
  }
  .btn:hover, .send:hover, .icon-btn:hover:not(:disabled){
    translate: 0 -2px;
    box-shadow: 0 12px 24px -14px rgba(17,21,40,.45);
  }
  .btn:active, .send:active, .icon-btn:active{ translate: 0 0; scale: .98; box-shadow: none; }
  .btn svg, .send svg{ transition: transform .35s cubic-bezier(.2,.7,.1,1); }
  .btn:hover svg, .send:hover svg{ transform: translateX(5px); }

  /* ---------- Planos ---------- */
  .plan{
    transition: opacity .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), transform .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), translate .45s cubic-bezier(.2,.7,.1,1), box-shadow .45s cubic-bezier(.2,.7,.1,1), border-color .3s;
  }
  .plan:hover{
    translate: 0 -8px;
    border-color: rgba(17,21,40,.45);
    box-shadow: 0 28px 48px -28px rgba(17,21,40,.35);
  }
  .plan.featured:hover{ box-shadow: inset 0 0 0 1px #111528, 0 32px 56px -28px rgba(17,21,40,.4); }
  .plan-price strong{ display: inline-block; transform-origin: left bottom; transition: transform .45s cubic-bezier(.2,.7,.1,1), color .3s; }
  .plan:hover .plan-price strong{ transform: scale(1.06); color: #3651D9; }
  .plan-price span{ transition: translate .45s cubic-bezier(.2,.7,.1,1); }
  .plan:hover .plan-price span{ translate: 8px 0; }
  .plan-features li svg{ transition: transform .35s cubic-bezier(.22,1,.36,1); }
  .plan:hover .plan-features li svg{ transform: scale(1.35) rotate(-8deg); }
  .plan:hover .plan-features li:nth-child(2) svg{ transition-delay: .06s; }
  .plan:hover .plan-features li:nth-child(3) svg{ transition-delay: .12s; }
  .plan:hover .plan-features li:nth-child(4) svg{ transition-delay: .18s; }
  .plan h3{ transition: letter-spacing .4s cubic-bezier(.2,.7,.1,1); }
  .plan:hover h3{ letter-spacing: .01em; }
  .plan .badge{ transition: transform .3s; }
  .plan:hover .badge{ animation: bloom-badge 1.2s ease-in-out infinite; }
  @keyframes bloom-badge{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }

  /* ---------- Factos do topo: a linha de cima enche-se de azul ---------- */
  .facts > div{ position: relative; transition: opacity .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), transform .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), translate .35s cubic-bezier(.2,.7,.1,1); }
  .facts > div::before{
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: #4F6BF6; transform: scaleX(0); transform-origin: left;
    transition: transform .5s cubic-bezier(.2,.7,.1,1);
  }
  .facts > div:hover::before{ transform: scaleX(1); }
  .facts > div:hover{ translate: 0 -3px; }

  /* ---------- Faixa de serviços e etiquetas ---------- */
  .marquee li, .quick a{
    transition: opacity .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), transform .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), background-color .25s, color .25s, border-color .25s, translate .3s cubic-bezier(.2,.7,.1,1);
  }
  .marquee li:hover, .quick a:hover{
    background: #111528; color: #F6F3EC; border-color: #111528; translate: 0 -2px;
  }

  /* ---------- Passos do processo ---------- */
  .step{ transition: background-color .3s; }
  .step .step-num, .step h3, .step p{ transition: translate .45s cubic-bezier(.2,.7,.1,1), color .3s; }
  .step:hover{ background: rgba(79,107,246,.05); }
  .step:hover .step-num{ color: #3651D9; translate: 8px 0; }
  .step:hover h3{ translate: 8px 0; }
  .step:hover p{ color: #111528; }

  /* ---------- Vantagens (negócios locais) ---------- */
  .features li{ position: relative; transition: opacity .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), transform .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)); }
  .features li > *{ transition: translate .4s cubic-bezier(.2,.7,.1,1); }
  .features li::before{
    content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px;
    background: #4F6BF6; transform: scaleY(0); transform-origin: top;
    transition: transform .4s cubic-bezier(.2,.7,.1,1);
  }
  .features li:hover > *{ translate: 16px 0; }
  .features li:hover::before{ transform: scaleY(1); }

  /* ---------- Exemplo de conversa ---------- */
  .chat{ transition: translate .45s cubic-bezier(.2,.7,.1,1), rotate .45s cubic-bezier(.2,.7,.1,1), box-shadow .45s; }
  .chat:hover{ translate: 0 -4px; rotate: -.4deg; box-shadow: 0 24px 40px -28px rgba(17,21,40,.35); }

  /* ---------- Links com sublinhado que cresce ---------- */
  .footer a, .cta-contacts a, .contact-alt a, .form-note a, .section a:not(.btn), .footer-link-btn{
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: opacity .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), transform .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), background-size .35s cubic-bezier(.2,.7,.1,1), color .25s;
  }
  .footer-bottom a, .footer-link-btn, .section a:not(.btn), .contact-alt a, .form-note a{ background-size: 100% 1px; }
  .footer a:hover, .cta-contacts a:hover, .footer-link-btn:hover{ background-size: 100% 1px; }
  .footer-bottom a:hover, .footer-link-btn:hover, .section a:not(.btn):hover, .contact-alt a:hover, .form-note a:hover{ background-size: 0% 1px; background-position: 100% 100%; }

  /* ---------- Índice das páginas legais ---------- */
  .toc a{ transition: translate .3s cubic-bezier(.2,.7,.1,1), color .25s; }
  .toc a:hover{ translate: 6px 0; }

  /* ---------- Cartões das páginas legais e de contacto ---------- */
  .card, .rights li, .contact-points li{ transition: opacity .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), transform .85s cubic-bezier(.2,.7,.1,1) var(--d, var(--md, 0s)), translate .35s cubic-bezier(.2,.7,.1,1), border-color .3s; }
  .rights li:hover, .card:hover{ translate: 0 -3px; border-color: rgba(17,21,40,.3); }
  .contact-points li:hover{ translate: 6px 0; }

  /* ---------- Campos do formulário ---------- */
  .field input, .field textarea{ transition: border-color .25s, background-color .25s, translate .3s cubic-bezier(.2,.7,.1,1); }
  .field input:hover, .field textarea:hover{ translate: 0 -1px; }

  /* ---------- Logótipo, botões flutuantes e idioma ---------- */
  .brand img{ transition: rotate .5s cubic-bezier(.22,1,.36,1), scale .5s cubic-bezier(.22,1,.36,1); }
  .brand:hover img{ rotate: -4deg; scale: 1.04; }
  .wa-float{ transition: scale .4s cubic-bezier(.22,1,.36,1), rotate .4s cubic-bezier(.22,1,.36,1); }
  .wa-float:hover{ transform: none; scale: 1.1; rotate: -8deg; }
  .to-top{ transition: opacity .3s, visibility .3s, transform .3s cubic-bezier(.2,.7,.1,1), translate .35s cubic-bezier(.2,.7,.1,1); }
  .to-top.show:hover{ translate: 0 -4px; }
  .lang-switch button{ transition: color .2s, translate .25s; }
  .lang-switch button:hover{ translate: 0 -1px; }

  /* ---------- Trabalhos (quando a secção estiver ativa) ---------- */
  .work-card .ph{ transition: scale .6s cubic-bezier(.2,.7,.1,1); }
  .work-card:hover .ph{ transform: none; scale: .97; }
}