/* ═══════════════════════════════════════════════════════════════════════════
   Salvatore Arcidiacono — consulente del credito, Catania
   📱 «LA CIFRA CHE TI ASPETTA» — ristrutturazione grafica del 22/09/2026 (CONCEPT.md, approvato da Domenico).
   Il foglio di prima è in _Archivio-sito/2026-09-22_prima-della-grafica/style.css.

   Colore: l'azzurro della rete in tre intensità + un verde che vuol dire «fatto». Niente giallo, niente rosso.
   Titoli Bricolage Grotesque, testo Atkinson Hyperlegible: tutti e due serviti da questo sito.
   Si animano solo transform e opacity.
   ✏️ Modifiche 3 (22/09/2026): via i bollini dell'apertura, recensioni intere, la tabella del consulente
   creditizio, Facebook e Instagram, testi di «Chi è» giustificati, piede senza la colonna della rete.
   ✏️ Modifiche 4 (23/09/2026): i marchi UFFICIALI di Facebook, Instagram e Gmail (§ 13, § 15, modulo) e la firma
   delle banche che entrano nel telefono anche da telefono (§ 19-bis).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Bricolage";src:url(../font/bricolage.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../font/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../font/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --notte:#0A2342; --notte2:#0F2F57; --notte3:#17416F;
  --azzurro:#2F76B4; --azs:#1D5A93; --elettrico:#3BA3FF; --cielo:#8ED0FF; --cielo2:#D6EEFF; --cielo3:#EEF7FF;
  --menta:#3DDC97; --mentas:#12925E; --mentat:#0B7A4D;
  --carta:#F7FAFF; --bianco:#FFFFFF; --ink:#0B1B30; --ten:#51627A; --tenb:#C3D8EE;
  --filo:#E1EBF5; --filo2:#C9DAEC; --filo3:#7A8FA8; --err:#B3261E;
  --tit:"Bricolage",system-ui,-apple-system,"Segoe UI",sans-serif;
  --txt:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:36px; --s5:56px; --s6:clamp(72px,9vw,124px);
  --r1:28px; --r2:18px; --r3:999px;
  --o1:0 1px 2px rgba(10,35,66,.06),0 10px 26px -14px rgba(10,35,66,.22);
  --o2:0 28px 60px -26px rgba(10,35,66,.42);
  --e:cubic-bezier(.2,.8,.2,1); --t:.3s var(--e); --tl:.8s var(--e);
  --barra:74px;
}

/* ── 1 · base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--barra) + 12px)}
body{font:400 1.06rem/1.6 var(--txt);color:var(--ink);background:var(--carta);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--cielo);color:var(--notte)}
:focus-visible{outline:3px solid var(--azs);outline-offset:3px;border-radius:6px}
.notte :focus-visible,.barra :focus-visible,.menu :focus-visible,.apertura :focus-visible,.testata :focus-visible,.fascia-video :focus-visible,footer :focus-visible,.cookie :focus-visible{outline-color:var(--elettrico)}
.schermo :focus-visible{outline-color:var(--azs)}
/* i numeri che salgono non spostano il testo accanto */
[data-conta],[data-cifra]{font-variant-numeric:tabular-nums}
[data-conta]{display:inline-block;min-width:2ch;text-align:right}
.js:not([data-vivo]) [data-conta],.js:not([data-vivo]) [data-cifra]{opacity:0}
h1,h2,h3,h4{font-family:var(--tit);font-weight:800;line-height:1.05;letter-spacing:-.028em}
h1{font-size:clamp(2.5rem,1.5rem + 3.6vw,4.6rem);line-height:1.02}
h2{font-size:clamp(1.9rem,1.25rem + 2.2vw,3.1rem)}
h3{font-size:clamp(1.12rem,1rem + .4vw,1.32rem);font-weight:700;letter-spacing:-.018em}
p+p{margin-top:.8em}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.salta{position:fixed;top:10px;left:10px;z-index:99;background:var(--notte);color:#fff;padding:12px 18px;border-radius:var(--r2);text-decoration:none;transform:translateY(-240%);transition:transform var(--t)}
.salta:focus{transform:none}

.tela{width:min(1200px,100% - 2*clamp(16px,4vw,48px));margin-inline:auto}
.sez{position:relative;padding:var(--s6) 0}
/* i quattro fondi della pagina: si alternano, così non ci sono mai due fasce uguali di fila */
.notte{background:var(--notte);color:#fff}
.carta{background:var(--carta)}
.bianco{background:var(--bianco)}
.cielo{background:linear-gradient(180deg,var(--cielo3),var(--bianco))}

/* l'etichetta a pillola, con il punto verde di «in corso» */
.et{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:var(--r3);border:1px solid var(--filo2);background:var(--bianco);font:700 .74rem/1.2 var(--tit);letter-spacing:.14em;text-transform:uppercase;color:var(--azs);margin-bottom:var(--s3)}
.et::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--menta);box-shadow:0 0 0 4px rgba(61,220,151,.18)}
.notte .et{background:transparent;border-color:rgba(142,208,255,.35);color:var(--cielo)}
.lead{font-size:clamp(1.08rem,1rem + .4vw,1.28rem);line-height:1.55;color:var(--azs);max-width:58ch}
.notte .lead{color:#DCEBFA}
.testa{max-width:66ch;margin-bottom:clamp(30px,3.6vw,52px)}
.testa h2+.lead,.testa h1+.lead,.testa h1+p{margin-top:var(--s2)}
.testa.mezzo{margin-inline:auto;text-align:center}
.testa.mezzo .lead{margin-inline:auto}

/* ── 2 · il pulsante ─────────────────────────────────────────────────────── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:15px 26px;border:0;border-radius:var(--r3);background:var(--notte);color:#fff;font:700 1.02rem/1.2 var(--tit);text-decoration:none;text-align:center;cursor:pointer;transition:transform var(--t),box-shadow var(--t),background var(--t)}
.cta svg{flex:none;transition:transform var(--t)}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(10,35,66,.6)}
.cta:hover svg{transform:translateX(4px)}
.cta.chiaro,.notte .cta{background:var(--cielo);color:var(--notte)}
.cta.chiaro:hover,.notte .cta:hover{box-shadow:0 16px 36px -14px rgba(142,208,255,.55)}
.cta.vuoto{background:transparent;color:var(--notte);box-shadow:inset 0 0 0 1.5px var(--filo2)}
.notte .cta.vuoto{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(142,208,255,.5)}

/* ── 3 · la barra e il menu ──────────────────────────────────────────────── */
.barra{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;min-height:var(--barra);padding:12px clamp(16px,4vw,48px);background:rgba(10,35,66,.92);color:#fff;border-bottom:1px solid rgba(142,208,255,.14);transition:box-shadow var(--t)}
.barra.giu{box-shadow:0 14px 34px -20px rgba(0,0,0,.7)}
.bnome{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;font:700 1.12rem/1.1 var(--tit);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.bruolo{font:400 .8rem/1.2 var(--txt);letter-spacing:0;color:var(--cielo);margin-top:3px}
.bnav{display:flex;gap:24px;margin-inline:auto}
.bnav a{position:relative;white-space:nowrap;padding:8px 0;font:500 .98rem/1 var(--tit);text-decoration:none;color:#E6F1FC}
.bnav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--cielo);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.bnav a:hover::after{transform:scaleX(1)}
.brete{flex:none;display:flex;align-items:center;padding-left:20px;border-left:1px solid rgba(142,208,255,.2)}
.brete img{height:14px;width:auto;max-width:none;opacity:.85}
.bcta{min-height:46px;padding:11px 20px;font-size:.97rem}
.barra .cta{background:var(--cielo);color:var(--notte)}
.barra .cta.vuoto{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(142,208,255,.5)}
.bmenu{display:none;align-items:center;gap:9px;margin-left:auto;min-height:44px;padding:9px 16px;border:1.5px solid rgba(142,208,255,.4);border-radius:var(--r3);background:transparent;color:#fff;font:700 .95rem/1 var(--tit);cursor:pointer}
.bmenu i{width:16px;height:11px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.bmenu i::after{content:"";position:absolute;top:2.5px;left:0;right:0;height:2px;background:currentColor}
@media (max-width:1120px){.bnav,.blav{display:none}.bmenu{display:inline-flex}.bcta{margin-left:auto}.bcta+.bmenu{margin-left:0}}
@media (max-width:860px){.bcta,.bruolo{display:none}.brete{margin-left:auto;border-left:0;padding-left:0}.bmenu{margin-left:0}}

.menu{position:fixed;inset:0;z-index:70;background:var(--notte);color:#fff;padding:calc(var(--barra) + 22px) 24px 40px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity var(--t),transform var(--t),visibility var(--t)}
.menu.aperto{opacity:1;visibility:visible;transform:none;transition:opacity var(--t),transform var(--t),visibility 0s}
.menu ul{width:min(560px,100%);margin-inline:auto}
.menu li{border-bottom:1px solid rgba(142,208,255,.14);opacity:0;transform:translateY(12px);transition:opacity var(--tl),transform var(--tl);transition-delay:calc(var(--i,0)*26ms)}
.menu.aperto li{opacity:1;transform:none}
.menu a{display:block;padding:16px 0;font:700 1.25rem/1.25 var(--tit);text-decoration:none;transition:transform var(--t),color var(--t)}
.menu a:hover{transform:translateX(6px);color:var(--cielo)}
.menu li:first-child a{color:var(--cielo)}
.menu li.capo{border-bottom:0;padding-top:var(--s3)}
.menu .et{margin:0;background:transparent;border-color:rgba(142,208,255,.3);color:var(--cielo)}
.menu li.sotto{position:relative}
.menu li.sotto a{padding-left:var(--s3);font-size:1.06rem;font-weight:500}
.menu li.sotto a::before{content:"";position:absolute;left:0;top:50%;width:9px;height:2px;background:var(--cielo);opacity:.6}
.menu li.fuori a{font-size:1rem;font-weight:500;color:var(--tenb)}
.menu-x{position:absolute;top:16px;right:20px;min-height:44px;padding:10px 18px;border:1.5px solid rgba(142,208,255,.35);border-radius:var(--r3);background:transparent;color:#fff;font:700 .95rem/1 var(--tit);cursor:pointer}

/* ── 4 · L'APERTURA: la persona felice e la cifra che ti aspetta ─────────── */
.apertura{position:relative;isolation:isolate;overflow:hidden;background:var(--notte);color:#fff;padding:clamp(28px,5vw,64px) 0 clamp(48px,6vw,88px)}
.luce{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;will-change:transform}
.luce.a{width:70vmax;height:70vmax;left:-20vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(59,163,255,.34),transparent);animation:deriva 22s ease-in-out infinite alternate}
.luce.b{width:60vmax;height:60vmax;right:-22vmax;bottom:-30vmax;background:radial-gradient(closest-side,rgba(142,208,255,.22),transparent);animation:deriva 26s ease-in-out infinite alternate-reverse}
@keyframes deriva{to{transform:translate3d(8vmax,6vmax,0) scale(1.08)}}
.apertura .tela{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center;min-height:calc(100svh - var(--barra) - 110px)}
.apertura .tela+.tela{display:block;min-height:0}
/* l'apertura è su fondo notte: testo chiaro, pulsante azzurro chiaro, etichetta trasparente */
.apertura .lead{color:#DCEBFA}
.apertura .cta{background:var(--cielo);color:var(--notte)}
.apertura .cta:hover{box-shadow:0 16px 36px -14px rgba(142,208,255,.55)}
.apertura .et{background:transparent;border-color:rgba(142,208,255,.35);color:var(--cielo)}
.apertura h1{max-width:13ch;word-spacing:.04em}
.parola{display:inline-block}
.js .apertura .parola{opacity:0;transform:translateY(.45em);animation:sale .8s var(--e) forwards;animation-delay:calc(var(--i)*70ms + 120ms)}
@keyframes sale{to{opacity:1;transform:none}}
/* «il mutuo giusto»: il pennarello azzurro che passa sotto le parole */
.segno{position:relative;white-space:nowrap}
.segno::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.26em;z-index:-1;border-radius:.2em;background:var(--elettrico);transform:scaleX(0);transform-origin:left;animation:segna .9s cubic-bezier(.6,0,.2,1) 1s forwards}
@keyframes segna{to{transform:scaleX(1)}}
.apertura .lead{margin-top:22px;max-width:36ch}
.azioni{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.azioni .cta{min-height:58px;padding:16px 28px;font-size:1.05rem}
.spunta{display:flex;align-items:center;gap:9px;color:var(--tenb);font-size:.98rem}
.spunta::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2342' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.mini-banche{margin-top:34px;display:flex;align-items:center;gap:14px;color:var(--tenb);font-size:.95rem;line-height:1.35;text-decoration:none}
.mini-banche>span:last-child{max-width:32ch}
.pila{display:flex}
.pila span{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-left:-10px;border:2px solid var(--notte);overflow:hidden}
.pila span:first-child{margin-left:0}
.pila img{width:30px;height:auto}
.mini-banche b{font:800 1.5rem/1 var(--tit);color:#fff;margin-right:4px}

.scena{position:relative;justify-self:end;width:min(540px,100%);aspect-ratio:4/5;margin-right:2%}
.arco{position:absolute;inset:5% -3% -3% 22%;border-radius:999px 999px 36px 36px;background:linear-gradient(160deg,var(--cielo),var(--elettrico))}
.finestra{position:absolute;inset:0 2% 6% 28%;border-radius:999px 999px 30px 30px;overflow:hidden;background:var(--notte2);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.finestra video,.finestra img{width:100%;height:100%;object-fit:cover}
.bollino{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r3);background:#fff;color:var(--ink);font:700 .86rem/1 var(--tit);white-space:nowrap;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);animation:galleggia2 7s ease-in-out infinite}
.bollino i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2342' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat}
@keyframes galleggia2{50%{transform:translateY(-8px)}}

/* le quattro corsie in fondo all'apertura: i servizi, a colpo d'occhio */
.corsie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(36px,5vw,64px)}
.corsie a{display:flex;gap:14px;align-items:center;height:100%;padding:16px 18px;border-radius:var(--r2);background:rgba(255,255,255,.07);border:1px solid rgba(142,208,255,.18);text-decoration:none;transition:transform var(--t),background var(--t)}
.corsie a:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}
.corsie .chip{width:44px;height:44px;border-radius:14px;background:var(--cielo)}
.corsie .ct{display:block;font:700 1.02rem/1.2 var(--tit);letter-spacing:-.018em;color:#fff}
.corsie span span{display:block;margin-top:2px;font-size:.9rem;line-height:1.35;color:var(--tenb)}
@media (max-width:1000px){.corsie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.corsie{grid-template-columns:minmax(0,1fr);gap:8px}.corsie a{padding:12px 14px}}

/* ── 5 · il TELEFONO (apertura e firma) ─────────────────────────────────── */
.telefono{position:absolute;left:-6%;bottom:-4%;width:246px;aspect-ratio:9/17.2;border-radius:40px;background:#0B0F17;padding:9px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1.5px rgba(255,255,255,.08) inset;transform-origin:left bottom;transform:rotate(-4deg) scale(var(--s,1));animation:galleggia 6s ease-in-out infinite}
@keyframes galleggia{50%{transform:rotate(-4deg) scale(var(--s,1)) translateY(-10px)}}
/* il telefono si USA: sotto il mouse o il dito smette di galleggiare (i nastri invece non si fermano mai) */
.telefono:hover,.telefono:focus-within,.telefono:active{animation-play-state:paused}
.schermo{position:relative;height:100%;border-radius:32px;background:var(--carta);color:var(--ink);overflow:hidden;display:flex;flex-direction:column;padding:34px 14px 14px;gap:10px}
.schermo::before{content:"";position:absolute;top:8px;left:50%;width:84px;height:22px;border-radius:var(--r3);background:#0B0F17;transform:translateX(-50%)}
.ora{position:absolute;top:10px;left:18px;right:18px;display:flex;justify-content:space-between;font:700 .62rem var(--tit)}
.titolo-tel{font:800 .98rem/1.1 var(--tit);letter-spacing:-.02em}
.scelte{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.scelte button{min-height:32px;padding:4px;border-radius:10px;border:1.5px solid #D5E3F2;background:#fff;font:700 .7rem/1.1 var(--tit);color:var(--ink);cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t)}
.scelte button[aria-pressed=true]{background:var(--notte);border-color:var(--notte);color:#fff}
.cifra{border-radius:16px;background:#fff;border:1px solid var(--filo);padding:10px 12px}
.cifra small{display:block;font:700 .62rem/1.2 var(--tit);color:var(--ten);text-transform:uppercase;letter-spacing:.08em}
.cifra output{display:block;margin-top:2px;font:800 1.9rem/1.05 var(--tit);letter-spacing:-.03em;color:var(--notte);white-space:nowrap}
.cifra output.parole{font-size:1.45rem;white-space:normal}
.cifra input{width:100%;margin-top:6px;accent-color:var(--azzurro);cursor:pointer}
.conf{display:flex;align-items:center;gap:8px;font:700 .7rem/1.2 var(--tit)}
.conf .mini{display:flex}
.conf .mini span{width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid var(--carta);margin-left:-7px;display:grid;place-items:center;overflow:hidden}
.conf .mini span:first-child{margin-left:0}
.conf .mini img{width:17px;height:auto}
.conf b{margin-left:auto;color:var(--mentat);white-space:nowrap}
.consulente{display:flex;align-items:center;gap:8px;padding:8px;border-radius:14px;background:var(--cielo2);font:700 .68rem/1.25 var(--tit)}
.consulente img{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.consulente span{display:block;font-weight:400;color:var(--ten)}
.schermo .cta{margin-top:auto;min-height:40px;padding:9px 10px;font-size:.7rem;line-height:1.2;border-radius:12px;background:var(--notte);color:#fff}
.schermo .cta:hover{transform:none;box-shadow:none}

/* ── 6 · LA FIRMA: le banche che entrano nel telefono ────────────────────── */
.confronto{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;min-height:min(760px,calc(100svh - var(--barra)))}
.confronto .testa{margin-bottom:0}
.contatore{display:flex;align-items:baseline;gap:14px;margin-top:var(--s4)}
.contatore b{font:800 clamp(4.5rem,3rem + 6vw,8.5rem)/.9 var(--tit);letter-spacing:-.05em;background:linear-gradient(120deg,var(--azs),var(--azzurro));-webkit-background-clip:text;background-clip:text;color:transparent}
.contatore span{font:700 1.1rem/1.25 var(--tit);color:var(--azs);max-width:10ch}
.palco{position:relative;height:100%;min-height:560px}
.palco .telefono{position:absolute;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%) rotate(-3deg);animation:none;z-index:2}
.palco .schermo{justify-content:flex-start}
.pozzo{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pozzo span{aspect-ratio:3/2;border-radius:10px;background:#fff;border:1px solid var(--filo);display:grid;place-items:center;padding:4px;opacity:.25;transition:opacity .4s,transform .4s}
.pozzo span.acceso{opacity:1}
.pozzo img{max-height:18px;width:auto}
.grande-conta{margin-top:auto;border-radius:16px;background:var(--notte);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px}
.grande-conta b{font:800 2rem/1 var(--tit);letter-spacing:-.03em}
.grande-conta span{font:700 .72rem/1.2 var(--tit);color:var(--cielo)}
.grande-conta i{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2342' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/15px no-repeat;opacity:.2;transform:scale(.7);transition:opacity .4s,transform .4s var(--e)}
.grande-conta.fatto i{opacity:1;transform:none}
/* la nuvola: le tessere che volano dentro il telefono (solo computer, solo con il movimento acceso) */
.nuvola{position:absolute;inset:0;z-index:3;pointer-events:none}
.nuvola .tessera{position:absolute;left:var(--x);top:var(--y);min-width:0;height:54px;padding:0 16px;translate:-50% -50%;rotate:var(--r,0deg)}
.nuvola .tessera img{height:24px}
.loghi{display:grid;gap:14px;margin-top:var(--s5)}
.nastro{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* lo spazio fra gli elementi sta DENTRO ogni elemento: metà nastro è esattamente metà e il giro non scatta.
   ⛔ Non si ferma mai, nemmeno col mouse sopra (regola THK). */
.nastro ul{display:flex;width:max-content;animation:nastro 46s linear infinite}
.nastro li{flex:none;padding-right:var(--s2)}
.loghi .nastro ul{animation-duration:170s}
.loghi .nastro.inverso ul{animation-direction:reverse;animation-duration:160s}
.loghi .nastro li{padding-right:14px}
@keyframes nastro{to{transform:translateX(-50%)}}
.tessera{display:grid;place-items:center;min-width:150px;height:78px;padding:0 24px;background:#fff;border:1px solid var(--filo);border-radius:var(--r2);box-shadow:var(--o1)}
.tessera img{height:36px;width:auto;max-width:none}
.tessera.scura{background:var(--notte);border-color:var(--notte)}

/* ── 7 · Come possiamo aiutarti? ─────────────────────────────────────────── */
.servizi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.servizi li{--c:var(--azzurro);position:relative;display:flex;flex-direction:column;gap:12px;padding:12px 12px 24px;background:#fff;border:1px solid var(--filo);border-radius:var(--r1);box-shadow:var(--o1);overflow:hidden;transition:transform var(--t),box-shadow var(--t)}
.servizi li::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c)}
.servizi li:nth-child(2){--c:var(--elettrico)}
.servizi li:nth-child(3){--c:var(--menta)}
.servizi li:nth-child(4){--c:var(--cielo)}
.servizi li:hover{transform:translateY(-6px);box-shadow:var(--o2)}
.media{display:block;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--cielo2)}
.media img,.media video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.servizi li:hover .media img,.servizi li:hover .media video{transform:scale(1.06)}
.servizi h3,.servizi p,.servizi .vai{margin-inline:6px}
.servizi p{font-size:.98rem;line-height:1.5;color:#26374D}
.vai{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:700 .95rem/1.3 var(--tit);color:var(--azs);text-decoration:none}
.vai::after{content:"→";transition:transform var(--t)}
.vai:hover{color:var(--azzurro)}
.vai:hover::after{transform:translateX(4px)}

/* ── 8 · Recensioni e modulo ─────────────────────────────────────────────── */
.cont{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,3.6vw,56px);align-items:start}
.rec{display:grid;gap:14px}
.rec li{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px 20px;background:#fff;border:1px solid var(--filo);border-radius:var(--r2);box-shadow:var(--o1);transition:transform var(--t),box-shadow var(--t)}
.rec li::before{content:"“";position:absolute;right:18px;top:-6px;font:800 5rem/1 var(--tit);color:var(--cielo)}
.rec li:hover{transform:translateY(-3px);box-shadow:var(--o2)}
/* le recensioni INTERE (Modifiche 3): testo leggibile, la frase forte in grassetto con il pennarello dell'apertura.
   Le più lunghe si chiudono a 7 righe con «Leggi tutta» (main.js § 13); senza JS si leggono intere. */
.stelle{font-size:1.02rem;letter-spacing:.14em;line-height:1;color:var(--azzurro)}
.rec blockquote{position:relative;font:400 1rem/1.6 var(--txt);color:#26374D}
.rec blockquote strong{font-weight:700;color:var(--notte);background:linear-gradient(transparent 58%,var(--cielo2) 58%)}
.js .rec li:not(.aperta) .testo{max-height:11.2em;overflow:hidden}
.js .rec li.lunga:not(.aperta) .testo{-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.leggi{align-self:flex-start;min-height:44px;margin-top:-8px;padding:0;border:0;background:none;font:700 .95rem/1.2 var(--tit);color:var(--azs);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.leggi:hover{color:var(--azzurro)}
.leggi[hidden]{display:none}
.quando{margin-left:auto;font-size:.88rem;color:var(--ten);white-space:nowrap}
.fonte{margin-top:var(--s2);font-size:.95rem;color:var(--ten)}
.fonte a{color:var(--azs);font-weight:700}
.chi{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--filo)}
.tondo{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,var(--cielo),var(--elettrico));color:var(--notte);font:800 1rem/1 var(--tit)}
.chi cite{font-style:normal;font-weight:700;color:var(--notte)}
.modulo{position:relative;display:grid;gap:var(--s3);padding:clamp(24px,3vw,40px);background:#fff;border-radius:var(--r1);box-shadow:0 0 0 1px var(--filo),0 0 0 7px rgba(142,208,255,.25),var(--o2)}
/* solo dove il modulo ci sta tutto (fino a ~800 px con gli errori accesi): su un portatile basso il pulsante resterebbe sotto il bordo */
@media (min-width:901px) and (min-height:920px){.cont .modulo{position:sticky;top:calc(var(--barra) + 24px)}}
.modulo h2{font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);font-weight:800}
.modulo>p:not([class]){color:var(--ten);margin-top:-12px}
.due{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.campo{display:grid;gap:7px;min-width:0}
.campo label{font:700 .98rem/1.2 var(--tit);color:var(--notte)}
.campo label .gmail{display:inline-block;width:20px;height:15px;margin-right:8px;vertical-align:-2px}
.campo input,.campo select,.campo textarea{width:100%;min-height:54px;padding:13px 15px;border:1.5px solid var(--filo3);border-radius:14px;background:var(--carta);color:var(--ink);font:400 1rem/1.35 var(--txt);transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.campo textarea{min-height:120px;resize:vertical}
.campo select{appearance:none;cursor:pointer;padding-right:42px;background:var(--carta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F76B4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--azzurro)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--azzurro);background:#fff;box-shadow:0 0 0 4px var(--cielo2)}
.campo.acceso textarea,.campo.acceso select,.campo.acceso input{border-color:var(--elettrico);box-shadow:0 0 0 4px var(--cielo2)}
.campo.acceso{animation:acceso .7s var(--e) both}
@keyframes acceso{30%{transform:scale(1.015)}}
.consenso{display:flex;gap:10px;align-items:flex-start;font:400 .95rem/1.45 var(--txt);color:var(--ten);cursor:pointer}
.campo .consenso input{flex:none;width:20px;height:20px;min-height:0;margin-top:2px;padding:0;accent-color:var(--azzurro);cursor:pointer}
.campo .consenso input:focus-visible{outline:3px solid var(--azs);outline-offset:2px;box-shadow:none}
.err{display:none;font-size:.9rem;color:var(--err)}
.campo.ko input,.campo.ko select,.campo.ko textarea{border-color:var(--err)}
.campo.ko .err{display:block}
.campo.ko .consenso{color:var(--err)}
.modulo .cta{width:100%}
.risp{font-size:1rem}
.risp:empty{position:absolute}
.risp.ok{color:var(--mentat);font-weight:700}
.risp.errata{color:var(--err)}
.nota{font-size:.95rem;color:var(--ten)}

/* ── 9 · Perché affidarti a noi? ─────────────────────────────────────────── */
.perche-tela{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(26px,4vw,64px);align-items:center}
.schede{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.schede li{display:grid;gap:14px;align-content:start;padding:clamp(20px,2.4vw,28px);border-radius:var(--r2);background:rgba(255,255,255,.06);border:1px solid rgba(142,208,255,.16);transition:transform var(--t),background var(--t)}
.schede li:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)}
.schede b{display:block;margin-bottom:6px;font:700 1.08rem/1.25 var(--tit);color:#fff}
.schede p{font-size:.98rem;line-height:1.5;color:var(--tenb)}
.chip{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--cielo2);transition:transform var(--t)}
.chip img{width:24px;height:24px}
.notte .chip{background:var(--cielo)}
.schede li:hover .chip{transform:rotate(-6deg) scale(1.06)}
.arco-video{position:relative;aspect-ratio:4/5;justify-self:center;width:min(400px,100%)}
.arco-video::before{content:"";position:absolute;inset:6% -5% -4% 12%;border-radius:999px 999px 30px 30px;background:linear-gradient(160deg,var(--cielo),var(--elettrico))}
.arco-video .finestra{inset:0 8% 5% 0}
.arco-video .bollino{left:-8%;right:auto;bottom:14%;top:auto}
.bollino.grande{padding:12px 18px 12px 12px;font-size:1rem;gap:10px}
.bollino.grande b{font:800 1.9rem/1 var(--tit);letter-spacing:-.03em;color:var(--notte)}
.bollino.grande i{width:28px;height:28px;background-size:15px}
.perche-tela .lead+.lead{margin-top:var(--s2)}
/* la tabella di confronto (come euroansahub.it/mutui, nei nostri colori): la colonna di Salvatore è accesa */
.confronta{margin-top:clamp(56px,7vw,96px)}
.confronta h2{max-width:22ch;margin-bottom:clamp(26px,3vw,40px)}
.tavola{border-radius:var(--r1);background:rgba(255,255,255,.04);border:1px solid rgba(142,208,255,.16);padding:clamp(8px,1.6vw,20px)}
.tavola table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.tavola th,.tavola td{padding:14px clamp(6px,1.4vw,18px);vertical-align:middle}
.tavola thead th{font:700 clamp(.78rem,.7rem + .3vw,1rem)/1.25 var(--tit);color:var(--cielo);text-align:center;vertical-align:bottom;width:19%}
.tavola thead th.noi{color:#fff}
.tavola thead th img{width:44px;height:44px;margin:0 auto 8px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid var(--cielo)}
.tavola thead small{display:block;margin-top:3px;font:400 .8rem/1.2 var(--txt);color:var(--cielo)}
.tavola tbody th{font:700 clamp(.92rem,.85rem + .3vw,1.08rem)/1.35 var(--tit);color:#fff;text-align:left}
.tavola tbody td{text-align:center}
.tavola tbody tr+tr>*{border-top:1px solid rgba(142,208,255,.13)}
.tavola .noi{background:rgba(142,208,255,.1)}
.tavola .corto{display:none}
.tavola thead .noi{border-radius:18px 18px 0 0}
.tavola tbody tr:last-child .noi{border-radius:0 0 18px 18px}
.si,.no{display:inline-block;width:30px;height:30px;border-radius:50%;vertical-align:middle}
.si{background:var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2342' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat}
.no{background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8FA8' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:inset 0 0 0 1px rgba(142,208,255,.16)}
/* le spunte di Salvatore si accendono una riga dopo l'altra quando la tabella entra */
.js .confronta .noi .si{transform:scale(0);opacity:0}
.js .confronta.dentro .noi .si{animation:spunta .55s var(--e) both;animation-delay:calc(var(--i,0)*90ms + 250ms)}
@keyframes spunta{0%{transform:scale(0);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:none;opacity:1}}

/* ── 10 · la fascia con il video (Prima consulenza gratuita) ────────────── */
.fascia-video{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(96px,12vw,170px) 0}
.fascia-video>video,.fascia-video>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.fascia-video::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(10,35,66,.94) 20%,rgba(10,35,66,.55) 70%,rgba(10,35,66,.35))}
.fascia-video .testa{margin-bottom:0}
.fascia-video h2{max-width:16ch}
.fascia-video .lead{color:#E3EFFB}
.fascia-video .cta{margin-top:var(--s4)}

/* ── 11 · il nastro di foto e video ─────────────────────────────────────── */
.nastro .q{display:block;aspect-ratio:3/2;width:clamp(210px,22vw,300px);border-radius:var(--r2);overflow:hidden;background:var(--cielo2)}
.nastro .q img,.nastro .q video{width:100%;height:100%;object-fit:cover}
.striscia{padding:var(--s5) 0}

/* ── 12 · Chi è Salvatore Arcidiacono ────────────────────────────────────── */
.chi-tela{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,72px);align-items:center}
.ritratto{position:relative;aspect-ratio:4/5;width:min(420px,100%);justify-self:center}
.ritratto::before{content:"";position:absolute;inset:6% -6% -4% 10%;border-radius:999px 999px 30px 30px;background:linear-gradient(160deg,var(--cielo),var(--elettrico))}
.ritratto .finestra{inset:0 6% 5% 0}
.ritratto .finestra img{object-position:50% 20%}
.chi-tela .lead{color:var(--ink);font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}
/* giustificati, come ha chiesto Salvatore (22/09/2026): con la sillabazione italiana, così non si aprono buchi fra le parole */
.chi-tela .lead,.bio p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3}
.bio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.bio li{display:flex;gap:var(--s2);align-items:flex-start;padding:clamp(22px,2.4vw,30px);background:#fff;border:1px solid var(--filo);border-radius:var(--r2);box-shadow:var(--o1)}
.bio p{font-size:1rem;line-height:1.6}
.bio-due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);margin-top:var(--s5);align-items:start}
.bio-due h3{margin-bottom:var(--s2)}
.apre{margin-bottom:var(--s2);color:var(--ten)}
.elenco{display:grid;gap:10px}
.elenco li{display:flex;gap:12px;align-items:center;padding:10px 14px 10px 10px;background:#fff;border:1px solid var(--filo);border-radius:16px;font-size:.98rem;line-height:1.35;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.elenco li:hover{transform:translateX(4px);border-color:var(--cielo);box-shadow:var(--o1)}
.elenco .chip{width:40px;height:40px;border-radius:12px}

/* ── 13 · Contatti: tre tessere grandi ──────────────────────────────────── */
.tessere{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.tessere a{position:relative;display:grid;gap:10px;align-content:start;min-height:190px;padding:28px;border-radius:var(--r1);text-decoration:none;overflow:hidden;transition:transform var(--t),box-shadow var(--t)}
.tessere a:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(0,0,0,.7)}
.tessere .tel{background:var(--cielo);color:var(--notte)}
.tessere .wa{background:var(--menta);color:var(--notte)}
.tessere .mail{background:#fff;color:var(--notte)}
.tessere .chip{background:rgba(255,255,255,.7);width:54px;height:54px}
.tessere b{font:800 1.3rem/1.2 var(--tit)}
.tessere span:last-child{font-size:1rem;overflow-wrap:anywhere}
.tessere a::after{content:"→";position:absolute;right:26px;bottom:22px;font:800 1.6rem/1 var(--tit);transition:transform var(--t)}
.tessere a:hover::after{transform:translateX(6px)}
.social{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3)}
.social a{display:flex;gap:16px;align-items:center;padding:18px 22px;border-radius:var(--r2);background:rgba(255,255,255,.07);border:1px solid rgba(142,208,255,.18);text-decoration:none;transition:transform var(--t),background var(--t)}
.social a:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}
.social b{display:block;font:800 1.15rem/1.2 var(--tit);color:#fff}
.social span span{display:block;margin-top:2px;font-size:.95rem;color:var(--tenb);overflow-wrap:anywhere}
/* i marchi ufficiali (Modifiche 4): Facebook e Instagram a colori, a tutta tessera; Gmail su una tessera bianca con il filo */
.social .marchio{width:48px;height:48px;background:none}
.social .marchio img{width:44px;height:44px}
.tessere .mail .marchio{background:#fff;box-shadow:0 0 0 1px var(--filo),var(--o1)}
.tessere .marchio img{width:32px;height:24px}

/* ── 14 · Domande frequenti ─────────────────────────────────────────────── */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,64px);align-items:start}
.faq .cta{margin-top:var(--s4)}
.fd{border-bottom:1px solid var(--filo2)}
.fd summary{display:flex;align-items:center;gap:var(--s2);justify-content:space-between;min-height:64px;padding:18px 0;cursor:pointer;list-style:none;font:700 1.12rem/1.35 var(--tit);color:var(--notte)}
.fd summary::-webkit-details-marker{display:none}
.fd summary i{flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:var(--cielo2);transition:transform var(--t),background var(--t)}
.fd summary i::before,.fd summary i::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2.4px;border-radius:2px;background:var(--azzurro);transform:translate(-50%,-50%)}
.fd summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform var(--t)}
.fd[open] summary i{background:var(--cielo);transform:rotate(180deg)}
.fd[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.rp{padding:0 0 20px}
.r{color:#26374D;max-width:60ch}

/* ── 15 · piede ─────────────────────────────────────────────────────────── */
footer{background:var(--notte);color:var(--tenb);padding:var(--s6) 0 var(--s4)}
.piede{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.85fr));gap:var(--s4)}
.piede p{font-size:.98rem;line-height:1.55}
.pnome{font:800 1.25rem/1.2 var(--tit);color:#fff;margin-bottom:8px}
.piede .et{margin-bottom:var(--s1);background:transparent;border-color:rgba(142,208,255,.28);color:var(--cielo)}
.piede nav{display:grid;align-content:start}
.piede nav a{display:inline-flex;align-items:center;min-height:44px;width:fit-content;font-size:1rem;text-decoration:none;transition:color var(--t),transform var(--t)}
.piede nav a:hover{color:#fff;transform:translateX(4px)}
.psocial{display:flex;gap:10px;margin-top:var(--s2)}
.psocial a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;transition:transform var(--t),background var(--t)}
.psocial img{width:32px;height:32px}
.psocial a:hover{transform:translateY(-3px);background:rgba(142,208,255,.14)}
.firma{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(142,208,255,.15);font-size:.95rem}
.firma a{color:#fff}

/* ── 16 · il banner dei cookie: una riga ────────────────────────────────── */
.cookie{position:fixed;left:14px;right:14px;bottom:14px;z-index:65;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s2);padding:10px 12px 10px 20px;border-radius:var(--r3);background:var(--notte);color:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity var(--t),transform var(--t),visibility var(--t);max-width:640px;margin-inline:auto}
.cookie.viva{opacity:1;visibility:visible;transform:none}
.cookie a{color:var(--cielo);font-size:.95rem}
.cookie button{flex:none;min-height:44px;padding:10px 20px;border:0;border-radius:var(--r3);background:var(--cielo);color:var(--notte);font:700 .95rem/1 var(--tit);cursor:pointer}
.nota a,.firma a,.cookie a,.legale p a{position:relative;display:inline-block}
.nota a::after,.firma a::after,.cookie a::after,.legale p a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* ── 17 · le altre pagine: «Lavora con noi» e privacy ───────────────────── */
.testata{position:relative;isolation:isolate;overflow:hidden;background:var(--notte);color:#fff;padding:clamp(56px,8vw,110px) 0}
.testata::before{content:"";position:absolute;z-index:-1;width:70vmax;height:70vmax;left:-20vmax;top:-34vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(59,163,255,.32),transparent)}
.testata .et{background:transparent;border-color:rgba(142,208,255,.35);color:var(--cielo)}
.testata h1{max-width:18ch}
.testata p{margin-top:var(--s2);max-width:56ch;color:#DCEBFA}
.testata .lead{color:#DCEBFA}
.testata .cta{background:var(--cielo);color:var(--notte);margin-top:var(--s4)}
.fasce{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.fasce>li{display:grid;align-content:start;background:#fff;border:1px solid var(--filo);border-radius:var(--r1);box-shadow:var(--o1);overflow:hidden;transition:transform var(--t),box-shadow var(--t)}
.fasce>li:hover{transform:translateY(-6px);box-shadow:var(--o2)}
.fasce>li:focus-within{outline:3px solid var(--azs);outline-offset:3px}
.fasce a.liv:focus-visible{outline:0}
.fasce a.liv{display:grid;grid-template-rows:auto auto 1fr;gap:14px;height:100%;padding:28px;color:inherit;text-decoration:none}
.fasce p{font-size:1rem;line-height:1.5;color:#26374D}
.fasce b{display:block;margin-bottom:6px;font:800 1.2rem/1.25 var(--tit);color:var(--notte)}
.fasce .vai{align-self:end}
.punti{display:grid;gap:var(--s2)}
.punti li{display:flex;gap:var(--s2);align-items:center;padding:var(--s2) var(--s3);background:#fff;border:1px solid var(--filo);border-radius:var(--r2);box-shadow:var(--o1)}
.punti p{font-size:1rem}
.legale>*{max-width:74ch}
.legale h2{font-size:clamp(1.35rem,1.15rem + .7vw,1.7rem);margin:var(--s5) 0 var(--s2)}
.legale ul{display:grid;gap:9px;margin:var(--s2) 0}
.legale li{position:relative;padding-left:22px}
.legale li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--azzurro)}
.legale .nota{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--filo)}

/* ── 18 · le sezioni compaiono mentre si scorre ─────────────────────────── */
.js .su{opacity:0;transform:translateY(26px);transition:opacity var(--tl),transform var(--tl)}
.js .su.dentro{opacity:1;transform:none}
.js .ritmo>*{opacity:0;transform:translateY(20px);transition:opacity var(--tl),transform var(--tl)}
.js .ritmo.dentro>*{opacity:1;transform:none;transition-delay:calc(var(--i,0)*70ms)}
@keyframes sali{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .js .su,.js .ritmo>*{animation:sali linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}

/* ── 19 · tavoletta e telefono ──────────────────────────────────────────── */
@media (max-width:1100px){
  .servizi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .piede{grid-template-columns:repeat(3,minmax(0,1fr))}
  .piede>div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .apertura .tela+.tela{display:block}
  .apertura .tela,.confronto,.perche-tela,.chi-tela,.cont,.faq{grid-template-columns:minmax(0,1fr)}
  .apertura .tela{min-height:0}
  .scena{margin:18px auto 0;justify-self:center;width:min(440px,100%)}
  .arco{inset:5% 0 -3% 14%}
  .finestra{inset:0 4% 6% 20%}
  /* sul telefono il telefono si RIMPICCIOLISCE in scala: dentro resta impaginato uguale */
  .apertura .telefono{left:-2%;bottom:0;--s:.72}
  .apertura{padding-bottom:64px}
  .confronto{min-height:0}
  .palco{min-height:0;height:auto;display:flex;justify-content:center;padding:20px 0}
  .palco .telefono{position:relative;left:auto;top:auto;transform:rotate(-3deg)}
  .nuvola{display:none}
  /* l'arco azzurro sporge a destra del 5-6%: si lascia il posto, o su telefono esce dallo schermo */
  .arco-video,.ritratto{width:min(340px,calc(100% - 32px))}
  .bio,.bio-due,.tessere,.fasce,.social{grid-template-columns:minmax(0,1fr)}
  .schede{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  :root{--s6:clamp(56px,13vw,72px);--barra:66px}
  .tela{width:calc(100% - 32px)}
  .barra{padding-inline:16px;gap:12px}
  .bnome{font-size:1.02rem}
  .brete img{height:12px}
  .azioni .cta{width:100%}
  .apertura .telefono{--s:.66}
  .bollino{font-size:.78rem;padding:8px 12px}
  .servizi{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:4px 16px 12px}
  .servizi::-webkit-scrollbar{display:none}
  .servizi li{flex:0 0 84%;scroll-snap-align:start}
  .rec{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:10px 16px 12px}
  .rec{align-items:flex-start}
  .rec li{flex:0 0 88%;scroll-snap-align:start}
  .tavola{padding:4px;border-radius:var(--r2)}
  .tavola th,.tavola td{padding:12px 4px}
  .tavola tbody th{padding-left:10px;width:40%;font-size:.88rem}
  /* sul telefono le intestazioni si accorciano («Salvatore», «In banca», «Online»); il testo intero resta per i lettori di schermo */
  .tavola thead th{font-size:.78rem;width:20%;padding-inline:2px}
  .tavola thead .lungo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .tavola thead .corto{display:inline}
  .tavola tbody th{-webkit-hyphens:auto;hyphens:auto}
  .tavola thead th img{width:34px;height:34px}
  .tavola thead small{font-size:.72rem}
  .si,.no{width:26px;height:26px;background-size:14px}
  .no{background-size:12px}
  .due{grid-template-columns:minmax(0,1fr)}
  /* il giustificato di «Chi è» vuole tutta la larghezza: sul telefono l'icona va sopra il testo */
  .bio li{display:grid;gap:12px}
  .tessera{min-width:120px;height:62px;padding:0 16px}
  .tessera img{height:28px}
  .loghi .nastro ul{animation-duration:130s}
  .tessere a{min-height:0}
  .piede{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .piede>div:first-child{grid-column:1/-1}
  .cookie{left:8px;right:8px;bottom:8px;padding:8px 8px 8px 14px;gap:8px;border-radius:22px}
}

/* ── 19-bis · LA FIRMA SUL TELEFONO (Modifiche 4, 23/09/2026: «da mobile non funziona, va aggiustata») ──────
   Sotto i 901 px le tessere non hanno posto intorno al telefono: stanno in un MUCCHIO sopra di lui, 4 righe da 3
   (colonna e riga scritte da Impianto/nastro-banche.py in --c e --riga), e quando il telefono entra in vista cadono
   una dopo l'altra (--d), ognuna nella sua casella del pozzo; le tre della riga in alto finiscono nel contatore.
   La meta (--tx, --ty) e la scala d'arrivo (--k) le misura main.js § 12-bis. Si animano solo transform e opacity.
   Tutto dipende dalla classe .tel-firma, che mette main.js: senza JS o con «riduci animazioni» resta com'era. */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .palco.tel-firma{padding-top:196px}
  .tel-firma .nuvola{display:block}
  .tel-firma .nuvola .solo-pc{display:none}
  .tel-firma .nuvola .tessera{left:calc(50% + (var(--c,1) - 1) * min(31%,118px));top:calc(28px + var(--riga,0) * 44px);height:38px;padding:0 9px;border-radius:12px;
    translate:none;rotate:none;transform:translate(-50%,-50%) rotate(var(--r,0deg));
    transition:transform .8s cubic-bezier(.55,0,.25,1) var(--d,0s),opacity .22s linear calc(var(--d,0s) + .62s)}
  .tel-firma .nuvola .tessera img{height:clamp(14px,4.2vw,17px)}
  .tel-firma.vola .nuvola .tessera{transform:translate(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px))) rotate(-3deg) scale(var(--k,.3));opacity:0}
  .tel-firma.riposo .nuvola .tessera{transition:none}
  /* la casella che riceve la sua banca fa un piccolo salto */
  .tel-firma .pozzo span.acceso{animation:posa .5s var(--e)}
  .tel-firma .grande-conta.fatto{animation:posa-conta .5s var(--e)}
}
@keyframes posa{40%{transform:scale(1.1)}}
@keyframes posa-conta{40%{transform:scale(1.04)}}

/* telefoni stretti (360 px): la barra si compatta, il marchio Euroansa resta accanto al nome (veto 4) */
@media (max-width:400px){
  .barra{gap:10px}
  .bnome{font-size:.95rem}
  .bmenu{padding:8px 12px;gap:7px}
  .brete img{height:11px}
  .mini-banche{white-space:normal;gap:10px}
  .pila span{width:34px;height:34px}
  .pila img{width:26px}
}

@media (max-width:340px){.bmenu{font-size:0;gap:0;padding:0;width:44px;justify-content:center}.bnome{font-size:.9rem}.piede{grid-template-columns:minmax(0,1fr)}}

@media (max-width:359px){.tavola tbody th{padding-left:6px;font-size:.8rem}.tavola thead th{font-size:.72rem;padding-inline:0}}
@media (max-width:359px){.cookie{gap:6px;padding-left:12px}.cookie a{font-size:.85rem}.cookie button{padding:10px 14px;font-size:.85rem}}
.con-cookie footer{padding-bottom:120px}

/* ── 20 · chi ha chiesto meno movimento ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .su,.js .ritmo>*,.js .apertura .parola{opacity:1;transform:none}
  .segno::after{transform:scaleX(1)}
  /* i nastri non si fermano: rallentano moltissimo (regola THK 2-quinquies) */
  .nastro ul{animation-duration:600s!important;animation-iteration-count:infinite!important}
}

/* ── 21 · Pannello: le cose nuove (24/09/2026, Pannello/CONTRATTO.md § 12) ─────────────────────────────
   Le scrive il server solo quando servono, tutte con data-p: l'avviso in cima, «Chiama ora», gli orari, la scheda
   Euroansa, il pulsante dell'audio, la trappola e il posto dell'anti-spam nei moduli. Solo i gettoni di :root;
   si animano solo transform e opacity; niente backdrop-filter. Con «riduci animazioni» vale il § 20. */

/* l'avviso in cima: una fascia sottile SOPRA la barra, nel flusso della pagina (scorrendo se ne va e la barra
   resta ferma in alto: non la copre mai). Azzurro scuro, così si stacca dal blu notte della barra. */
.avviso{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 clamp(16px,4vw,48px);background:var(--azs);color:var(--bianco);font:700 .95rem/1.3 var(--tit);text-align:center;text-wrap:balance}
.avviso p{padding:11px 0}
.avviso a{display:inline-block;padding:11px 0;color:var(--bianco);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.avviso a::after{content:"→";display:inline-block;margin-left:8px;text-decoration:none;transition:transform var(--t)}
.avviso a:hover::after{transform:translateX(4px)}
.avviso :focus-visible{outline-color:var(--bianco);outline-offset:-3px}

/* «Chiama ora»: la pillola fissa in basso a destra, SOLO sul telefono (fino a 900 px). Quando c'è la riga dei
   cookie sale sopra di lei (body.con-cookie; l'altezza vera della riga la misura main.js § 8 in --alto-cookie)
   e scende quando la riga se ne va. Il piede si allunga perché la pillola non copra la firma (main.js § 15). */
.chiama-ora{display:none}
@media (max-width:900px){
  .chiama-ora{position:fixed;right:14px;bottom:14px;z-index:64;display:inline-flex;align-items:center;gap:9px;min-height:48px;min-width:48px;max-width:calc(100% - 28px);padding:12px 20px 12px 16px;border-radius:var(--r3);background:var(--cielo);color:var(--notte);font:700 1rem/1.1 var(--tit);text-decoration:none;box-shadow:var(--o2);transition:transform var(--t);animation:chiama-entra .5s var(--e) .9s backwards}
  .chiama-ora::before{content:"";flex:none;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2342' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat}
  .chiama-ora:active{transform:scale(.96)}
  .chiama-ora:focus-visible{outline-color:var(--notte)}
  .con-cookie .chiama-ora{transform:translateY(calc(-10px - var(--alto-cookie,64px)))}
  .con-chiama footer{padding-bottom:calc(var(--s4) + 72px)}
  .con-cookie.con-chiama footer{padding-bottom:calc(var(--s4) + 84px + var(--alto-cookie,64px))}
}
@media (max-width:620px){.chiama-ora{right:8px;bottom:8px}}
@keyframes chiama-entra{from{opacity:0}}

/* gli orari, nei contatti (fondo notte), sotto Facebook e Instagram: una tessera con l'orologio */
.orari{position:relative;width:fit-content;max-width:100%;min-height:84px;margin-top:var(--s3);padding:18px 26px 18px 84px;border-radius:var(--r2);background:var(--notte2);border:1px solid var(--notte3);color:var(--bianco);font:400 1.02rem/1.55 var(--txt);overflow-wrap:anywhere}
.orari::before{content:"";position:absolute;left:18px;top:18px;width:48px;height:48px;border-radius:15px;background:var(--cielo) url(../img/ico-tempo.svg?v=3) center/24px no-repeat}

/* il link alla scheda di Salvatore su Euroansa, sotto il testo di «Chi è» */
.chi-tela .scheda{margin-top:var(--s2)}
.scheda a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 1rem/1.3 var(--tit);color:var(--azs);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.scheda a::after{content:"↗";flex:none;text-decoration:none;transition:transform var(--t)}
.scheda a:hover{color:var(--azzurro)}
.scheda a:hover::after{transform:translate(2px,-2px)}

/* il pulsante dell'audio, sopra il suo video in basso a sinistra (main.js § 14). Nell'apertura e nell'arco
   del consulente va a DESTRA: a sinistra ci sono il telefono e il bollino delle convenzioni (vedi sotto). */
.media,.nastro .q{position:relative}
.audio{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 28px);min-height:44px;padding:9px 16px 9px 12px;border:0;border-radius:var(--r3);background:var(--bianco);color:var(--notte);font:700 .88rem/1.15 var(--tit);text-align:left;box-shadow:var(--o1);cursor:pointer;transition:transform var(--t)}
.audio::before{content:"";flex:none;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2342' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E") center/contain no-repeat}
/* semitrasparente solo dove il browser sa mescolare i colori: con var() dentro, una riga «di riserva» non
   basterebbe (il browser vecchio la accetta e poi la butta, e il fondo diventerebbe trasparente: iPhone con iOS 15) */
@supports (background:color-mix(in srgb,red 50%,transparent)){.audio{background:color-mix(in srgb,var(--bianco) 88%,transparent)}}
.audio[aria-pressed=true]{background:var(--notte);color:var(--bianco)}
.audio[aria-pressed=true]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DDC97' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E")}
.audio:hover{transform:translateY(-2px)}
.audio:focus-visible{outline-color:var(--elettrico)}
.audio[hidden]{display:none}
.apertura .audio,.arco-video .audio{left:auto;right:14px}
/* apertura: il telefono resta SOPRA il pulsante (il suo «Richiedi informazioni» non si copre mai); sotto i 901 px
   il telefono occupa circa 100 px a sinistra del video e il pulsante si stringe, andando a capo, nello spazio a destra */
.apertura .audio{z-index:auto}
@media (max-width:900px){.apertura .audio{max-width:calc(100% - 116px)}}
/* arco del consulente: il bollino «120 convenzioni» sporge in basso a sinistra; il pulsante sta sopra di lui */
.arco-video .audio{bottom:calc(10% + 64px)}

/* la trappola per i programmi che riempiono i moduli: fuori schermo, mai vista da una persona */
.trappola{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* il posto dell'anti-spam: finché è vuoto, o c'è ma è invisibile (alto zero), non occupa niente: sta fuori dalla
   griglia del modulo, come .risp:empty (una riga vuota della griglia lascerebbe un buco di 24 px sopra il pulsante).
   Quando Cloudflare chiede un tocco main.js § 7 mette `vista` e il riquadro prende il suo posto sopra il pulsante. */
.ts{min-width:0}
.ts:empty{display:none}
.ts:not(.vista){position:absolute}
.ts iframe{max-width:100%}

/* la riga «Banche confrontate» del telefono: main.js § 10 la nasconde (hidden) per l'assicurazione e per una scelta
   senza banche, ma `.conf{display:flex}` batteva l'attributo e la riga restava lì. Si nasconde tenendo il suo
   posto: passando da una scelta all'altra il resto dello schermo del telefono non salta. */
.conf[hidden]{visibility:hidden}
/* una cifra da 10 milioni in su (il pannello lo permette): più piccola, o uscirebbe dallo schermo (main.js § 10) */
.cifra output.lunga{font-size:1.45rem}

@media (prefers-reduced-motion:reduce){.chiama-ora{animation:none}}

/* §22 · Parole lunghissime (collaudo del 24/09/2026): una parola senza spazi scritta dal pannello
   (un indirizzo, un nome di 300 lettere) va a capo dentro il suo riquadro invece di allargare la pagina.
   Con i testi normali non cambia niente: «anywhere» spezza solo quando la parola non ci sta. */
h1,h2,h3,h4,p,li,blockquote,summary,cite,th,td,label,.parola,.ct,.bnome{overflow-wrap:anywhere}