/* Duca Web Design · pulsante WhatsApp (10/11, versione 3 «premium», richiesta di Federico).
   In basso a sinistra su tutte le pagine, gemello di «Analizza il tuo sito» a destra: stessa altezza, stesso blu, stessa ombra.
   Dentro: l'icona di WhatsApp (fumetto bianco, bordo e telefono verdi) in un piccolo cerchio bianco con il pallino verde «online»,
   e la scritta. Al passaggio del mouse una schedina in vetro chiaro con la foto di Federico e «Apri la chat».
   Telefono e tablet: cerchio blu da 54 px come quello a destra, con il cerchio bianco e il pallino verde. */
.wa{--wa-verde:#25D366;--wa-ease:cubic-bezier(.2,.8,.2,1);position:fixed;left:24px;bottom:24px;z-index:900;font-family:"Inter Tight",system-ui,-apple-system,sans-serif;
  translate:0 140%;opacity:0;transition:translate .7s var(--wa-ease),opacity .5s}
.wa.pronto{translate:0 0;opacity:1}
.wa.via,html.an-blocca .wa,html.menu-mob-aperto .wa{translate:0 140%;opacity:0;pointer-events:none}

/* pillola: misure e colori di «Analizza il tuo sito» */
.wa-b{position:relative;display:flex;align-items:center;gap:9px;height:40px;padding:0 17px 0 5px;border-radius:99px;text-decoration:none;color:#fff;
  background:linear-gradient(150deg,#2A78C4,#0F4C81);box-shadow:0 14px 30px -12px rgba(15,76,129,.65),inset 0 1px 0 rgba(255,255,255,.25);
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;transition:filter .35s ease,box-shadow .35s ease}
.wa-b:hover,.wa-b:focus-visible{filter:brightness(1.1);box-shadow:0 16px 34px -12px rgba(15,76,129,.75),inset 0 1px 0 rgba(255,255,255,.3)}
.wa-b:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* cerchio bianco con l'icona: il bianco del fumetto si fonde con il cerchio, restano bordo e telefono verdi */
.wa-bd{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;
  box-shadow:0 4px 10px -4px rgba(4,20,45,.45),inset 0 -1px 0 rgba(15,40,80,.08)}
.wa-bd svg{width:20px;height:20px;color:var(--wa-verde)}
.wa-on-p{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--wa-verde);box-shadow:0 0 0 2px #1A5E9E;animation:waRespira 2.6s ease-in-out infinite}
@keyframes waRespira{50%{box-shadow:0 0 0 2px #1A5E9E,0 0 0 6px rgba(37,211,102,.28)}}

/* schedina al passaggio del mouse (solo computer) */
.wa-sc{position:absolute;left:0;bottom:54px;width:272px;padding:16px;border-radius:22px;background:rgba(255,255,255,.96);color:#1D1D1F;
  box-shadow:0 0 0 1px rgba(15,40,80,.06),0 34px 70px -28px rgba(4,12,30,.5);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  opacity:0;translate:0 10px;scale:.97;transform-origin:22px 100%;pointer-events:none;transition:opacity .3s ease,translate .5s var(--wa-ease),scale .5s var(--wa-ease)}
.wa:hover .wa-sc,.wa:focus-within .wa-sc{opacity:1;translate:0 0;scale:1;transition-delay:.06s}
.wa-sc::after{content:"";position:absolute;left:20px;bottom:-6px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:0 0 3px 0}
.wa-sc-t{display:flex;align-items:center;gap:12px}
.wa-f{position:relative;flex:none;width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 6px 14px -6px rgba(4,20,45,.5)}
.wa-f img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.wa-f i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--wa-verde);box-shadow:0 0 0 2.5px #fff}
.wa-sc b{display:block;font-size:15.5px;font-weight:650;letter-spacing:-.015em;line-height:1.2}
.wa-sc small{display:block;font-size:12.5px;color:#86868B}
.wa-sc p{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:#515154}
.wa-cta{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;height:38px;border-radius:99px;font-size:13.5px;font-weight:600;color:#0F4C81;background:#EEF3F9}
.wa-cta svg{width:17px;height:17px;color:var(--wa-verde)}

/* telefono e tablet: cerchio blu da 54 px, gemello di quello a destra */
@media (max-width:1023px){
  .wa{left:14px;bottom:14px}
  .wa-b{width:54px;height:54px;padding:0;justify-content:center;gap:0;border-radius:50%}
  .wa-t,.wa-sc{display:none}
  .wa-bd{width:34px;height:34px}
  .wa-bd svg{width:23px;height:23px}
  .wa-on-p{width:11px;height:11px}
}
/* se c'e' la chat (plugin AI Chat Assistant) «Analizza il tuo sito» passa a sinistra: WhatsApp sale sopra di lui */
html body:has(#aca-root) .wa{bottom:76px}
@media (max-width:1023px){html body:has(#aca-root) .wa{bottom:80px}}
@media (prefers-reduced-motion:reduce){.wa,.wa-sc{transition:none}.wa-on-p{animation:none}}

/* 12/11 · telefono e tablet, versione «premium» (richiesta di Federico): cerchio verde WhatsApp lucido con il fumetto bianco,
   riflesso in alto, ombra verde morbida e un'onda leggera ogni pochi secondi. Entra con una piccola molla. */
@media (max-width:1023px){
  .wa{translate:0 0;scale:.6;opacity:0;transition:scale .6s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}
  .wa.pronto{scale:1;opacity:1}
  .wa.via,html.an-blocca .wa,html.menu-mob-aperto .wa{translate:0 0;scale:.6;opacity:0}
  .wa-b{width:56px;height:56px;background:radial-gradient(120% 120% at 30% 18%,#6BF0A0 0%,#25D366 42%,#12924D 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(0,60,25,.25),0 16px 30px -12px rgba(18,146,77,.75)}
  .wa-b::before{content:"";position:absolute;left:9px;right:9px;top:4px;height:42%;border-radius:50% 50% 45% 45%;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
  .wa-b::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.45);animation:waOnda 4.5s ease-out 1.5s infinite;pointer-events:none}
  .wa-bd{width:auto;height:auto;background:transparent;box-shadow:none}
  .wa-bd svg{width:28px;height:28px;color:#fff;filter:drop-shadow(0 2px 3px rgba(0,60,25,.35))}
  .wa-bd .wa-dentro{fill:transparent}
  .wa-on-p{display:none}
}
@keyframes waOnda{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}30%,100%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){.wa,.wa-b::after{transition:none;animation:none}}

/* 12/11 (2) · telefono e tablet: cerchio nel blu del sito (non piu' verde), stessa altezza della pillola «Analizza il tuo sito» */
@media (max-width:1023px){
  .wa-b{width:46px;height:46px;background:radial-gradient(120% 120% at 30% 18%,#5FA2E6 0%,#1E6CB6 45%,#0B3D6B 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 8px rgba(0,20,50,.3),0 16px 30px -12px rgba(15,76,129,.8)}
  .wa-b::before{left:8px;right:8px;top:3px}
  .wa-b::after{animation-name:waOndaBlu}
  .wa-bd svg{width:24px;height:24px;filter:drop-shadow(0 2px 3px rgba(0,20,50,.35))}
}
@keyframes waOndaBlu{0%{box-shadow:0 0 0 0 rgba(42,120,196,.45)}30%,100%{box-shadow:0 0 0 12px rgba(42,120,196,0)}}

/* 13/11 · telefono e tablet, «vetro blu notte» (scelto da Federico sul mock-up): vetro scuro sfocato, niente riflessi lucidi
   ne' onda, un filo di luce che gira piano sul bordo come il pulsante «Offerta web» ma piu' discreto. 42 px come la pillola a destra. */
@property --fl-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes flGiro{to{--fl-a:360deg}}
@media (max-width:1023px){
  .wa-b{width:42px;height:42px;background:rgba(8,27,54,.68);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px -10px rgba(4,12,30,.6)}
  .wa-b::before{left:0;right:0;top:0;bottom:0;height:auto;inset:0;border-radius:inherit;padding:1px;
    background:conic-gradient(from var(--fl-a),rgba(156,195,238,.16) 0deg,rgba(220,235,251,.95) 50deg,rgba(91,149,214,.35) 110deg,rgba(156,195,238,.16) 170deg,rgba(156,195,238,.16) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    animation:flGiro 6s linear infinite}
  .wa-b::after{display:none}
  .wa-bd{position:static}
  .wa-bd svg{width:21px;height:21px;color:#fff;filter:none}
  .wa-on-p{display:block;top:8px;right:8px;bottom:auto;width:7px;height:7px;background:#30D158;box-shadow:0 0 0 2px rgba(8,27,54,.95);animation:none}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){.wa-b::before{animation:none}}

/* 13/11 · computer: la pillola WhatsApp resta quella di prima (Federico preferisce la versione precedente sul computer);
   la schedina al passaggio del mouse diventa blu notte con «Apri la chat» blu. */
@media (min-width:1024px){
  /* schedina */
  .wa-sc{background:rgba(8,27,54,.94);color:#fff;box-shadow:inset 0 0 0 1px rgba(156,195,238,.2),0 34px 70px -28px rgba(4,12,30,.7)}
  .wa-sc::after{box-shadow:inset -1px -1px 0 rgba(156,195,238,.2)}
  .wa-f{box-shadow:0 0 0 2px rgba(156,195,238,.35),0 6px 14px -6px rgba(0,0,0,.6)}
  .wa-f i{box-shadow:0 0 0 2.5px #081B36;background:#30D158}
  .wa-sc b{color:#fff}.wa-sc small{color:#9FB0C6}.wa-sc p{color:#B7C3D3}
  .wa-cta{color:#fff;background:#0F4C81;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
  .wa-cta svg{color:#fff}.wa-cta .wa-dentro{fill:transparent}
}

/* 13/11 · computer: pillola blu di prima + il filo di luce che gira sul bordo (Federico: «da' un tocco in piu'») */
@media (min-width:1024px){.wa-b::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--fl-a),rgba(255,255,255,.12) 0deg,rgba(255,255,255,.95) 50deg,rgba(156,195,238,.45) 110deg,rgba(255,255,255,.12) 170deg,rgba(255,255,255,.12) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:flGiro 6s linear infinite}}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.wa-b::before{animation:none}}
/* 13/11 · telefono: il pallino verde senza contorno scuro (Federico) */
@media (max-width:1023px){.wa-on-p{box-shadow:none!important}}