/* ═══════════════════════════════════════════════════════════════════
   SATISWORK — CANONE ENTERPRISE (il posto unico, 22/08/2026)
   Vale per index.html e per TUTTE le pagine dedicate della veste nuova.
   Una regola che vale per più pagine si scrive QUI, mai due volte.
   ═══════════════════════════════════════════════════════════════════ */

/* ── FONT: gli stessi del sito, un peso in meno sui titoli ── */
@font-face{ font-family:"Hubot Sans"; src:url("./fonts/MonaSans/HubotSans-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Hubot Sans"; src:url("./fonts/MonaSans/HubotSans-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Mona Sans Expanded"; src:url("./fonts/MonaSans/MonaSans_Expanded-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Mona Sans Expanded"; src:url("./fonts/MonaSans/MonaSans_Expanded-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }

/* ── TOKEN: i colori nostri, dal prodotto ── */
:root{
  --navy:#001233;
  --pink:#F72585;
  --pink-300:#ff8fc4;
  --pink-700:#a30f55;
  /* il rosa dei LINK TESTO su fondo chiaro: #f72585 misura 3,78:1 (< AA 4,5)
     — questo tono passa a 4,82:1 restando il nostro rosa (firmato 23/08 sera).
     Sfere, CTA e testi grandi tengono --pink. */
  --pink-testo:#d91a75;
  --teal:#64dfdf;
  --teal-dark:#0e7a7a;
  --bg:#f6f8fb;
  --card:#ffffff;
  --ink:#001233;
  --ink-soft:rgba(0,18,51,.72);
  /* .52 misurava 3,72:1 su --bg (< AA 4,5) — bocciatura del designer 24/08
     sugli eyebrow e le note: .63 passa a ~5,4:1 restando "mute" */
  --ink-mute:rgba(0,18,51,.63);
  --line:rgba(0,18,51,.09);
  --container:1200px;
  /* la sfera del canone, presa dal muro */
  --sfera-fondo-pink: radial-gradient(circle at 32% 26%, var(--pink-300) 0%, var(--pink) 48%, var(--pink-700) 100%);
  --sfera-fondo-navy: radial-gradient(circle at 32% 26%, #4a6485 0%, #112233 46%, #000a18 100%);
  --sfera-fondo-teal: radial-gradient(circle at 32% 26%, #7ee8f2 0%, #0ea5b7 48%, #056b78 100%);
  --sfera-riflesso: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0));
  --sfera-ombra-pink: 0 8px 18px -6px rgba(247,37,133,.55), inset 0 -4px 8px rgba(120,0,55,.34), inset 0 2px 5px rgba(255,255,255,.42);
  --sfera-ombra-navy: 0 8px 16px -6px rgba(0,18,51,.55), inset 0 -4px 8px rgba(0,0,0,.32), inset 0 2px 5px rgba(255,255,255,.30);
  --sfera-ombra-teal: 0 8px 18px -6px rgba(14,165,183,.55), inset 0 -4px 8px rgba(0,60,68,.34), inset 0 2px 5px rgba(255,255,255,.42);
  --ombra-card: 0 1px 2px rgba(0,18,51,.05), 0 16px 40px -24px rgba(0,18,51,.25);
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* ⚠ overflow-x:hidden su html/body AMMAZZA position:sticky (testata che
   non restava ancorata, scoperto 23/08 da Emiliano): clip taglia gli
   sfondamenti orizzontali SENZA creare il contesto di scroll che rompe
   lo sticky. */
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  font-family:"Hubot Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400; color:var(--ink); background:var(--bg);
  overflow-x:clip; line-height:1.6;
  /* la griglia tecnica: quasi invisibile, ma il foglio smette di essere piatto */
  background-image:
    linear-gradient(rgba(0,18,51,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,18,51,.032) 1px, transparent 1px);
  background-size:56px 56px;
}

/* ── REVEAL: le cose entrano, morbide, una volta sola ── */
.rivela{ opacity:0; transform:translateY(18px);
         transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.rivela.in{ opacity:1; transform:none; }
.rivela:nth-child(2){ transition-delay:.07s; } .rivela:nth-child(3){ transition-delay:.14s; }
.rivela:nth-child(4){ transition-delay:.21s; } .rivela:nth-child(5){ transition-delay:.28s; }
@media (prefers-reduced-motion: reduce){ .rivela{ opacity:1; transform:none; transition:none; } }
.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }
h1,h2{ font-family:"Mona Sans Expanded","Hubot Sans",sans-serif; font-weight:500; letter-spacing:-0.015em; line-height:1.12; text-wrap:balance; }
p{ text-wrap:pretty; }
a{ color:inherit; }
section{ position:relative; }
/* ✍️ REGOLA (22/08 h20:45, Emiliano): SE LO SCHERMO HA SPAZIO, NON SI VA
   A CAPO. Il testo occupa la riga finché c'è spazio; si spezza SOLO quando
   non ci sta, e allora spezza in senso compiuto — su punti e virgole, mai
   a metà di un'unità di senso. Perciò: MAI <br> fissi nei titoli, MAI
   display:block sulle frasi. La .frase è inline-block: sta accanto alle
   sorelle finché c'è posto, e quando non c'è va a capo INTERA, così il
   capo cade sempre sul punto. Gli &nbsp; incollano le coppie che non si
   separano (partita IVA, dieci mesi, il primo anno lo paghiamo noi).
   E i titoli NON si ingabbiano in max-width strette. */
.frase{ display:inline-block; }
.eyebrow{ display:flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--pink); }

/* ── I BOTTONI DEL MURO: la sfera del canone, in forma di pillola ── */
/* la molla delle sfere gommose: sale con sovraslancio, si schiaccia da gomma */
.btn{ display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:500;
      padding:14px 28px; border-radius:999px; text-decoration:none; position:relative; overflow:hidden;
      transition:transform 340ms cubic-bezier(.34,1.56,.64,1), box-shadow 340ms; }
.btn:hover{ transform:translateY(-3px) scale(1.045); }
.btn:active{ transform:translateY(0) scale(1.08,.88); transition-duration:110ms; }
.btn-sfera:hover{ box-shadow:0 14px 26px -8px rgba(247,37,133,.6), inset 0 -4px 8px rgba(120,0,55,.34), inset 0 2px 5px rgba(255,255,255,.42); }
.btn svg{ width:18px; height:18px; }
.btn-sfera{ color:#fff; background:var(--sfera-fondo-pink); box-shadow:var(--sfera-ombra-pink); }
.btn-sfera::after{ content:""; position:absolute; top:9%; left:14%; width:42%; height:30%;
                   border-radius:50%; background:var(--sfera-riflesso); pointer-events:none; }
/* anche il bottone chiaro è una bolla: bianco gonfio, mai piatto */
.btn-ghost{ color:var(--ink); background:#fff; border:1.5px solid rgba(0,18,51,.12);
            box-shadow:0 8px 16px -8px rgba(0,18,51,.28),
                       inset 0 2px 5px rgba(255,255,255,.9),
                       inset 0 -4px 8px rgba(0,18,51,.06); }
.btn-ghost::after{ content:""; position:absolute; top:9%; left:14%; width:42%; height:30%;
                   border-radius:50%; background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,0));
                   pointer-events:none; }
.btn-ghost:hover{ border-color:rgba(0,18,51,.22);
                  box-shadow:0 12px 22px -8px rgba(0,18,51,.32),
                             inset 0 2px 5px rgba(255,255,255,.9),
                             inset 0 -4px 8px rgba(0,18,51,.06); }

/* la sfera-icona, identica a quelle del gestionale */
.sfera{ width:46px; height:46px; border-radius:50%; position:relative; flex:none;
        display:flex; align-items:center; justify-content:center; color:#fff; }
.sfera::after{ content:""; position:absolute; top:10%; left:20%; width:38%; height:25%;
               border-radius:50%; background:var(--sfera-riflesso); pointer-events:none; }
.sfera svg{ width:21px; height:21px; }
.sfera{ transition:transform 340ms cubic-bezier(.34,1.56,.64,1); }
.card:hover .sfera, .banda-punto:hover .sfera{ transform:translateY(-3px) scale(1.09); }
.punto{ transition:transform 300ms cubic-bezier(.34,1.56,.64,1); }
.punto:hover{ transform:translate(-50%,-50%) scale(1.28) !important; }
.punto:active{ transform:translate(-50%,-50%) scale(1.05,.82) !important; transition-duration:100ms; }
@media (prefers-reduced-motion: reduce){ .btn,.sfera,.punto{ transition:none; } }
.sfera-pink{ background:var(--sfera-fondo-pink); box-shadow:var(--sfera-ombra-pink); }
.sfera-navy{ background:var(--sfera-fondo-navy); box-shadow:var(--sfera-ombra-navy); }
.sfera-teal{ background:var(--sfera-fondo-teal); box-shadow:var(--sfera-ombra-teal); }

/* ── HEADER ── */
header{ position:sticky; top:0; z-index:50; background:rgba(246,248,251,.85); backdrop-filter:blur(14px);
        border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; }
/* 23/08, richiesta sua: marchio più presente in testata… */
.logo{ display:flex; align-items:center; gap:12px; font-family:"Mona Sans Expanded"; font-weight:700; font-size:23px; text-decoration:none; }
.logo img{ width:38px; height:38px; border-radius:50%; }
/* …e sugli schermi piccoli resta SOLO il simbolo (la scritta si spegne) */
@media (max-width:600px){
  header .logo{ font-size:0; gap:0; }
  header .logo img{ width:36px; height:36px; }
}
.nav-links{ display:flex; gap:28px; font-size:15px; color:var(--ink-soft); }
.nav-links a{ text-decoration:none; transition:color .15s; }
.nav-links a:hover{ color:var(--ink); }
.nav .btn{ padding:10px 22px; font-size:15px; }
@media(max-width:900px){ .nav-links{ display:none; } }

/* ── HAMBURGER: sotto i 900px il menu NON sparisce (canone landing/CLAUDE.md §5;
   difetto trovato dal collaudo 23/08 — Funzioni/Piani/Accedi erano irraggiungibili).
   Il bottone e il pannello li monta enterprise.js clonando i link della testata. ── */
/* padding 10px: 26px di icona + 20 = 46×46, sopra la soglia dei 44px del DECALOGO
   (regola 5 «facile da toccare» — il collaudo l'aveva misurato a 42) */
.sw-burger{ display:none; background:none; border:0; padding:10px; margin-left:auto;
            margin-right:10px; cursor:pointer; color:var(--ink); }
.sw-burger svg{ width:26px; height:26px; display:block; }
.mobile-menu{ display:none; }
@media(max-width:900px){
  .sw-burger{ display:inline-flex; }
  /* 24/08, bocciatura del designer: il pannello copriva solo i suoi link e
     sotto restavano hero e CTA cliccabili. Ora copre TUTTO lo schermo sotto
     la testata (74px) e scrolla dentro; il body lo blocca enterprise.js. */
  .mobile-menu{ position:absolute; top:100%; left:0; right:0;
                height:calc(100vh - 74px); height:calc(100dvh - 74px);
                overflow:auto; overscroll-behavior:contain;
                background:rgba(246,248,251,.97); backdrop-filter:blur(14px);
                border-bottom:1px solid var(--line); padding:8px 0 14px;
                box-shadow:0 24px 40px -24px rgba(0,18,51,.25); }
  header.menu-open .mobile-menu{ display:block; }
  .mobile-menu a{ display:block; padding:13px 24px; font-size:16px; color:var(--ink);
                  text-decoration:none; }
  .mobile-menu a:active{ color:var(--pink); }
}

/* ── HERO ── */
.hero{ padding:110px 0 70px; }
/* niente gabbia sull'hero e tutto CENTRATO (firmato 22/08 h21:55: il blocco
   a sinistra col vuoto a destra era sbilanciato sul 27") */
.hero-grid{ max-width:none; text-align:center; }
.hero-grid .eyebrow{ justify-content:center; }
.hero-ctas{ justify-content:center; }
/* ✍️ 22/08 h21:48: il titolo ENTRA nello spazio — size fluida tarata perché
   l'hero stia su una riga dove c'è spazio, e il peso visivo segue la size.
   (Il peso tipografico variabile vero chiede il font variabile di Mona Sans:
   in locale ci sono solo Medium e Bold — da valutare se portarlo.) */
.hero h1{ font-size:clamp(34px,4.3vw,56px); margin:22px 0 24px; }
.hero h1 em{ font-style:normal; color:var(--pink); }
.hero-sub{ font-size:19px; color:var(--ink-soft); margin-bottom:36px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-note{ margin-top:18px; font-size:14px; color:var(--ink-mute); }
/* la profondità: un alone tenue, fermo, non un cielo che balla */
.hero::before{ content:""; position:absolute; top:-30%; right:-15%; width:60vw; height:60vw; max-width:900px; max-height:900px;
               border-radius:50%; pointer-events:none; z-index:-1;
               background:radial-gradient(circle at 60% 40%, rgba(247,37,133,.10) 0%, rgba(100,223,223,.08) 40%, transparent 68%);
               animation:respiro 9s ease-in-out infinite alternate; }
@keyframes respiro{ from{ transform:scale(1); opacity:.85; } to{ transform:scale(1.07); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .hero::before{ animation:none; } }

/* ── PROOF ── */
.proof{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.proof-inner{ display:flex; flex-wrap:wrap; gap:14px 36px; justify-content:center; padding:18px 0; font-size:14px; color:var(--ink-soft); }
.proof-item{ display:flex; align-items:center; gap:8px; }
.proof-item svg{ width:16px; height:16px; color:var(--teal-dark); }

/* ── SEZIONI ── */
.sez{ padding:96px 0; }
/* i titoli respirano su tutta la larghezza (regola: c'è spazio → niente capo) */
.sez-head{ margin-bottom:52px; }
.sez-head h2{ font-size:clamp(28px,3.6vw,42px); margin:18px 0 16px; }
.sez-head p{ font-size:17px; color:var(--ink-soft); }

/* ── FUNZIONI: le card col respiro ── */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:22px; }
/* dove una card porta il paragrafo extra di Laura (fatturazione, ai-personale) le altre
   della riga non si stirano a vuoto: ognuna tiene la sua altezza (collaudo 23/08) */
.cards-sciolte{ align-items:start; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px 28px;
       box-shadow:var(--ombra-card); display:flex; flex-direction:column; gap:16px;
       transition:transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms; }
.card:hover{ transform:translateY(-3px); box-shadow:0 2px 3px rgba(0,18,51,.05), 0 24px 48px -24px rgba(0,18,51,.3); }
.card h3{ font-size:19px; font-weight:500; font-family:"Mona Sans Expanded"; letter-spacing:-0.01em; }
.card p{ font-size:15.5px; color:var(--ink-soft); }
.card a.di-piu{ font-size:14.5px; color:var(--pink-testo); text-decoration:none; font-weight:500; margin-top:auto; }
.card a.di-piu:hover{ text-decoration:underline; }
/* le voci puntate dentro una card: spunte a sfera, come i piani */
.card ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.card li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink-soft); }
.card li::before{ content:""; width:17px; height:17px; border-radius:50%; flex:none; margin-top:5px;
                  background:var(--sfera-fondo-teal);
                  box-shadow:0 4px 10px -3px rgba(14,165,183,.5), inset 0 -2px 4px rgba(0,60,68,.3), inset 0 1px 3px rgba(255,255,255,.45); }

/* ── LA FASCIA PROFONDA ── */
.banda{ background:var(--navy); color:#fff; padding:96px 0 110px; overflow:hidden; position:relative; }
.banda::before{ content:""; position:absolute; inset:0; pointer-events:none;
                background:radial-gradient(ellipse at 20% 20%, rgba(247,37,133,.14) 0%, transparent 55%),
                           radial-gradient(ellipse at 85% 75%, rgba(100,223,223,.10) 0%, transparent 50%); }
.banda::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
               background-image:
                 linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                 linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
               background-size:56px 56px; }
.banda .container{ position:relative; z-index:1; }
.banda h2{ font-size:clamp(28px,3.6vw,42px); margin-bottom:18px; }
.banda p{ color:rgba(255,255,255,.78); font-size:17px; }
.banda-punti{ margin-top:44px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; }
.banda-punto{ display:flex; gap:16px; align-items:flex-start; }
.banda-punto b{ display:block; font-weight:500; font-size:16.5px; margin-bottom:4px; }
.banda-punto span{ font-size:14.5px; color:rgba(255,255,255,.66); }

/* ── LA CORNICE PRODOTTO: un browser vero, lo scatto vero ── */
.cornice{ margin-top:56px; position:relative; }
/* Una demo su scatto DESKTOP dal telefono viene piccolissima: sul mobile
   non si mostra (firmata 22/08 sera: «togliamolo sul mobile»). La regola
   di casa resta: dal telefono o scatti della skin mobile, o niente. */
@media(max-width:900px){ .solo-schermo-grande{ display:none; } }
.cornice-browser{ border-radius:18px; overflow:hidden; background:#0d1f3f;
                  border:1px solid rgba(255,255,255,.14);
                  box-shadow:0 30px 80px -30px rgba(0,0,0,.65), 0 8px 24px -12px rgba(247,37,133,.25); }
.cornice-barra{ display:flex; align-items:center; gap:8px; padding:12px 16px;
                background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.08); }
.cornice-punto{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.18); }
.cornice-url{ margin-left:12px; flex:1; max-width:360px; font-size:12.5px; color:rgba(255,255,255,.55);
              background:rgba(255,255,255,.07); border-radius:8px; padding:5px 14px; }
.cornice img{ display:block; width:100%; height:auto; }
/* le label flottanti, come nelle pagine dettaglio */
.lab{ position:absolute; display:flex; align-items:center; gap:9px;
      background:rgba(255,255,255,.96); color:var(--ink); font-size:13.5px; font-weight:500;
      border-radius:999px; padding:9px 18px; box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
      white-space:nowrap; }
.lab::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--sfera-fondo-pink);
              box-shadow:0 0 0 4px rgba(247,37,133,.18); }
.lab-1{ top:32%; right:26px; } /* 23/08: più in basso, copriva Esci e campanella */
.lab-2{ bottom:26%; right:26px; }
.lab-3{ bottom:12%; left:-14px; }
@media(max-width:900px){ .lab{ position:static; margin:10px 8px 0 0; display:inline-flex; }
                         .cornice-label{ margin-top:14px; } }

/* ── LA DEMO DENTRO LA CORNICE: punti che pulsano, cose che succedono ── */
.demo-scena{ position:relative; }
/* 23/08, richiesta sua: l'invito STACCATO sopra la cornice (affogava nel
   bordo con margin -34px e non si capiva) e con la vibrazione che chiama */
.demo-invito{ display:flex; align-items:center; gap:10px; justify-content:center;
              margin:20px 0 16px; position:relative; z-index:2;
              animation:vibra-ferma 4.6s ease-in-out infinite; }
.demo-invito span{ font-size:14.5px; color:rgba(255,255,255,.8); background:rgba(255,255,255,.08);
                   border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:8px 20px; }
.punto{ position:absolute; width:22px; height:22px; border-radius:50%; cursor:pointer; border:0;
        background:var(--sfera-fondo-pink); box-shadow:var(--sfera-ombra-pink); z-index:3;
        animation:vibra 3.4s ease-in-out infinite; }
.punto:hover{ animation:none; }
.punto::before{ content:""; position:absolute; inset:-7px; border-radius:50%;
                border:2px solid rgba(247,37,133,.55); animation:eco 1.8s ease-out infinite; }
.punto::after{ content:""; position:absolute; top:12%; left:20%; width:40%; height:26%;
               border-radius:50%; background:var(--sfera-riflesso); }
@keyframes eco{ from{ transform:scale(.6); opacity:1; } to{ transform:scale(1.6); opacity:0; } }
/* la vibrazione: ferma quasi sempre, uno squillo ogni giro — cattura senza
   stancare. ⚠ i .punto sono centrati con translate(-50%,-50%) INLINE e
   l'animazione vince sull'inline: il translate va DENTRO i keyframes */
@keyframes vibra{
  0%, 86%, 100%{ transform:translate(-50%,-50%) rotate(0) scale(1); }
  88%{ transform:translate(-50%,-50%) rotate(-5deg) scale(1.08); }
  90%{ transform:translate(-50%,-50%) rotate(5deg) scale(1.1); }
  92%{ transform:translate(-50%,-50%) rotate(-4deg) scale(1.08); }
  94%{ transform:translate(-50%,-50%) rotate(3deg) scale(1.04); }
  96%{ transform:translate(-50%,-50%) rotate(0) scale(1); }
}
/* la stessa vibrazione per chi NON è centrato col translate (l'invito) */
@keyframes vibra-ferma{
  0%, 86%, 100%{ transform:rotate(0) scale(1); }
  88%{ transform:rotate(-3deg) scale(1.04); }
  90%{ transform:rotate(3deg) scale(1.05); }
  92%{ transform:rotate(-2deg) scale(1.04); }
  94%{ transform:rotate(1deg) scale(1.02); }
  96%{ transform:rotate(0) scale(1); }
}
/* il punto PROVATO: spunta a sfera verde-acqua, ferma e soddisfatta */
.punto.provato{ background:var(--sfera-fondo-teal); box-shadow:var(--sfera-ombra-teal);
                animation:none; }
.punto.provato::before{ content:"✓"; border:0; animation:none; inset:0;
                        display:flex; align-items:center; justify-content:center;
                        color:#fff; font-size:12px; font-weight:700; }
.demo-invito a{ color:#ff8fc4; font-weight:700; text-decoration:none; }
.demo-invito a:hover{ text-decoration:underline; }
@media (prefers-reduced-motion: reduce){
  .punto, .punto::before, .demo-invito{ animation:none; }
}

.demo-velo{ position:absolute; inset:0; background:rgba(0,18,51,.34); opacity:0;
            pointer-events:none; transition:opacity .3s; z-index:4; }
.demo-scena.aperta .demo-velo{ opacity:1; pointer-events:auto; }
.demo-foglio{ position:absolute; z-index:5; background:#fff; color:var(--ink);
              border-radius:18px; box-shadow:0 30px 70px -20px rgba(0,10,30,.55);
              opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
              transition:opacity .32s cubic-bezier(.2,.8,.2,1), transform .32s cubic-bezier(.2,.8,.2,1);
              font-size:14.5px; }
.demo-foglio.su{ opacity:1; transform:none; pointer-events:auto; }
.demo-foglio h4{ font-family:"Mona Sans Expanded"; font-weight:500; font-size:16px; }
.demo-x{ position:absolute; top:12px; right:14px; border:0; background:transparent;
         font-size:20px; color:var(--ink-mute); cursor:pointer; line-height:1; }

/* la finestra di Flo */
.demo-flo{ right:3%; bottom:6%; width:min(400px, 92%); padding:20px 20px 16px; }
.demo-flo-testa{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.demo-flo-sfera{ width:38px; height:38px; border-radius:50%; background:var(--sfera-fondo-pink);
                 box-shadow:var(--sfera-ombra-pink); position:relative; flex:none; }
.demo-flo-sfera::after{ content:""; position:absolute; top:10%; left:20%; width:38%; height:25%;
                        border-radius:50%; background:var(--sfera-riflesso); }
.demo-flo-testa small{ display:block; color:var(--ink-mute); font-size:12.5px; }
.demo-chat{ min-height:120px; max-height:240px; overflow-y:auto; display:flex; flex-direction:column;
            gap:10px; padding:4px 2px 8px; }
.demo-msg{ border-radius:14px; padding:10px 14px; max-width:88%; line-height:1.5; }
.demo-msg.tu{ align-self:flex-end; background:rgba(0,18,51,.06); }
.demo-msg.flo{ align-self:flex-start; background:rgba(247,37,133,.07); border:1px solid rgba(247,37,133,.14); }
.demo-chips{ display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; border-top:1px solid var(--line); }
.demo-chip{ border:1.5px solid rgba(247,37,133,.35); color:var(--pink); background:transparent;
            border-radius:999px; padding:7px 14px; font-size:13px; font-weight:500; cursor:pointer;
            transition:background .15s, transform .2s; font-family:inherit; }
.demo-chip:hover{ background:rgba(247,37,133,.07); transform:translateY(-1px); }
.demo-chip:disabled{ opacity:.4; cursor:default; transform:none; }
.demo-nota-piccola{ font-size:11.5px; color:var(--ink-mute); margin-top:10px; }

/* il foglio-modulo al centro (fattura veloce, nuovo appuntamento…) */
.demo-modulo{ left:50%; top:50%; transform:translate(-50%,-46%) scale(.98); width:min(380px, 92%); padding:22px; }
.demo-modulo.su{ transform:translate(-50%,-50%); }
.demo-campo{ display:flex; justify-content:space-between; gap:12px; padding:11px 2px;
             border-bottom:1px solid var(--line); }
.demo-campo b{ font-weight:500; }
.demo-campo span{ color:var(--ink-soft); }
.demo-spunta{ display:flex; align-items:center; gap:10px; padding:12px 2px 4px; color:var(--ink-soft); font-size:13.5px; }
.demo-spunta i{ width:20px; height:20px; border-radius:50%; flex:none; position:relative;
                background:var(--sfera-fondo-teal);
                box-shadow:0 4px 10px -3px rgba(14,165,183,.5), inset 0 -2px 4px rgba(0,60,68,.3), inset 0 1px 3px rgba(255,255,255,.45); }
.demo-modulo .btn{ width:100%; justify-content:center; margin-top:16px; padding:12px 22px; font-size:15px; }

/* ── IL PRODUCT TOUR: flusso instradato su schermate vere (22/08 sera) ──
   Ogni passo è uno scatto vero della skin; i punti rosa cadono dove si
   clicca davvero (coordinate dal DOM, tools/cattura_tour_flusso.py).
   Dal telefono si vedono gli scatti della skin MOBILE, mai il desktop
   rimpicciolito (regola di Emiliano). */
.punto-eti{ position:absolute; z-index:3; background:rgba(255,255,255,.97); color:var(--ink);
            font-size:13px; font-weight:500; border-radius:999px; padding:7px 14px;
            box-shadow:0 10px 26px -8px rgba(0,10,30,.45); white-space:nowrap;
            pointer-events:none; }
@media(max-width:640px){ .punto-eti{ font-size:11px; padding:5px 10px; } }
/* la vista di un passo: entra in dissolvenza, la vecchia sfuma sopra */
.demo-scena{ overflow:hidden; }
.tour-vista{ position:relative; opacity:0; transform:scale(.988);
             transition:opacity .36s cubic-bezier(.2,.8,.2,1), transform .36s cubic-bezier(.2,.8,.2,1); }
.tour-vista.su{ opacity:1; transform:none; }
.tour-vista.via{ position:absolute; inset:0 0 auto 0; opacity:0 !important;
                 transform:scale(1.006); pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .tour-vista{ transition:none; opacity:1; transform:none; } }
.tour-passi{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:18px; }
.tour-pallino{ width:12px; height:12px; border-radius:50%; border:0; cursor:pointer;
               background:rgba(255,255,255,.25); transition:transform .2s; }
.tour-pallino:hover{ transform:scale(1.25); }
.tour-pallino.qui{ background:var(--sfera-fondo-pink); box-shadow:var(--sfera-ombra-pink); }
.tour-ricomincia{ background:transparent; border:1px solid rgba(255,255,255,.28);
                  color:rgba(255,255,255,.82); border-radius:999px; padding:6px 14px;
                  font-size:13px; cursor:pointer; margin-left:8px; font-family:inherit; }
.tour-ricomincia:hover{ border-color:rgba(255,255,255,.5); color:#fff; }
.tour-fine{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
            width:min(400px, 90%); background:#fff; color:var(--ink); border-radius:18px;
            padding:26px 24px; box-shadow:0 30px 70px -20px rgba(0,10,30,.55);
            z-index:6; text-align:center; }
/* variante «giù»: quando il finale del tour È la cosa da guardare (la
   risposta di Flo), la card si ancora in basso, arriva DOPO qualche
   secondo (prima si legge la risposta) e sul telefono si fa compatta */
.tour-fine.giu{ top:auto; bottom:14px; transform:translateX(-50%) translateY(18px);
                opacity:0; pointer-events:none;
                transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.tour-fine.giu.su{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
@media (max-width:560px){
  .tour-fine.giu{ padding:16px 16px 14px; }
  .tour-fine.giu h4{ font-size:15px; margin-bottom:6px; }
  .tour-fine.giu p{ font-size:12.5px; }
  .tour-fine.giu .btn{ margin-top:10px; padding:10px 22px; font-size:14px; }
  .tour-fine.giu .tour-rivedi{ margin-top:8px; }
}
.tour-fine h4{ font-family:"Mona Sans Expanded"; font-weight:500; font-size:18px; margin-bottom:8px; }
.tour-fine p{ font-size:14.5px; color:var(--ink-soft); }
.tour-fine .btn{ margin-top:14px; }
.tour-fine .tour-rivedi{ display:block; margin:12px auto 0; background:transparent; border:0;
                         color:var(--ink-mute); font-size:13px; cursor:pointer; text-decoration:underline;
                         font-family:inherit; }
/* il seguito del tour: dalla card finale alla lettura delle card (23/08) */
.tour-fine .tour-scopri{ display:block; margin:10px auto 0; background:var(--bg); color:var(--ink);
                         border:1px solid var(--line); border-radius:999px; padding:10px 22px;
                         font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;
                         transition:transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms; }
.tour-fine .tour-scopri:hover{ transform:translateY(-2px);
                               box-shadow:0 12px 24px -14px rgba(0,18,51,.35); }
/* …e il gioco continua sulla pagina dopo */
.tour-fine .tour-continua{ display:block; margin:12px auto 0; color:var(--pink-testo);
                           font-size:14px; font-weight:700; text-decoration:none; }
.tour-fine .tour-continua:hover{ text-decoration:underline; }
/* gli ancoraggi non finiscono sotto la testata ancorata */
[id]{ scroll-margin-top:100px; }
/* il badge che dichiara il gioco: «Tour guidato» accanto al titolo dei passi
   (.demo-invito span ha la sua pillola generica: qui si vince di specificità) */
.tour-badge, .demo-invito span.tour-badge{
             display:inline-flex; align-items:center; background:var(--pink); color:#fff;
             border-radius:999px; padding:4px 12px; font-size:11px; font-weight:700;
             letter-spacing:.08em; text-transform:uppercase; margin-right:0; }

/* ── LIGHTBOX: gli scatti si aprono in primo piano (richiesta 22/08) ── */
.vista-schermo img, .tris-vista .card img{ cursor:zoom-in; }
.sw-lightbox{ position:fixed; inset:0; z-index:120; background:rgba(0,10,30,.74);
              display:flex; align-items:center; justify-content:center;
              padding:4vh 4vw; cursor:zoom-out; }
.sw-lightbox img{ max-width:100%; max-height:100%; border-radius:14px;
                  box-shadow:0 40px 90px -30px rgba(0,0,0,.8); }

/* il brindisi (toast) e la nota che si scrive */
.demo-toast{ position:absolute; left:50%; bottom:5%; transform:translate(-50%,16px); z-index:6;
             background:var(--navy); color:#fff; border-radius:999px; padding:12px 24px;
             font-size:14px; box-shadow:0 16px 40px -12px rgba(0,10,30,.6);
             opacity:0; transition:opacity .35s, transform .35s; pointer-events:none; white-space:nowrap; }
.demo-toast.su{ opacity:1; transform:translate(-50%,0); }
.demo-toast b{ color:#7ee8f2; font-weight:500; }
.demo-nota-riga{ position:absolute; z-index:2; font-size:1.05cqw; color:var(--ink);
                 font-family:"Hubot Sans"; pointer-events:none; }
.demo-tip{ position:absolute; z-index:5; background:#fff; color:var(--ink); border-radius:12px;
           padding:10px 16px; font-size:13.5px; box-shadow:0 14px 36px -12px rgba(0,10,30,.5);
           opacity:0; transform:translateY(8px); transition:opacity .28s, transform .28s; pointer-events:none; }
.demo-tip.su{ opacity:1; transform:none; }
/* su schermo piccolo i fogli della demo si ancorano allo SCHERMO, non allo
   scatto: dentro una cornice alta 200px sbordavano sopra il titolo */
@media(max-width:640px){
  .demo-velo{ position:fixed; }
  .demo-foglio{ position:fixed; left:4vw; right:4vw; width:auto; top:auto; bottom:14px;
                max-height:74vh; overflow:auto; z-index:60; }
  .demo-modulo{ transform:translateY(14px) scale(.98); }
  .demo-modulo.su{ transform:none; }
  .demo-toast{ position:fixed; z-index:61; max-width:92vw; white-space:normal; text-align:center; }
}

/* ── LE TRE VISTE: desktop + tablet + telefono, la regola delle pagine dedicate ── */
.viste{ display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1.15fr) minmax(0,.72fr);
        gap:26px; align-items:end; margin-top:52px; }
.vista{ text-align:center; }
.vista-schermo{ border-radius:16px; overflow:hidden; background:#fff;
                border:1px solid var(--line); box-shadow:var(--ombra-card); }
.vista-schermo img{ display:block; width:100%; height:auto; }
.vista-nome{ margin-top:12px; font-size:13.5px; color:var(--ink-mute); display:flex;
             align-items:center; justify-content:center; gap:7px; }
.vista-nome svg{ width:15px; height:15px; }
/* Dentro la banda navy l'inchiostro del tema chiaro sparisce. */
.banda .vista-nome{ color:rgba(255,255,255,.65); }
/* Sul telefono il trio non si impacchetta: resta SOLO la vista Telefono
   (firmata 22/08 sera: dal telefono o skin mobile, o niente). */
@media(max-width:900px){
  .viste{ grid-template-columns:1fr; justify-items:center; }
  .vista-desktop, .vista-tablet{ display:none; }
  .vista-telefono{ max-width:340px; width:100%; }
}

/* ── CONVENZIONI ── */
.conv-badges{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0; }
.conv-badge{ display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
             border-radius:999px; padding:10px 20px; font-size:14.5px; font-weight:500; box-shadow:0 1px 2px rgba(0,18,51,.04); }
.conv-badge svg{ width:15px; height:15px; color:var(--teal-dark); }
.conv-nota{ background:rgba(247,37,133,.05); border:1px solid rgba(247,37,133,.16); border-radius:16px;
            padding:20px 24px; font-size:15.5px; color:var(--ink-soft); max-width:760px; }
.conv-nota strong{ color:var(--ink); }
/* la striscia dei loghi ufficiali (24/08, pagina convenzioni): scatole bianche
   uguali, il logo respira dentro; .su-navy per i marchi che esistono solo in
   bianco (OFI Bergamo). ⚠️ La PUBBLICAZIONE dei loghi va autorizzata dagli
   Ordini (clausola uso marchio): senza il via restano i badge testuali. */
.loghi-strip{ display:flex; flex-wrap:wrap; gap:14px; margin:22px 0 4px; }
.loghi-strip .logo-box{ background:#fff; border:1px solid var(--line); border-radius:14px;
             padding:14px 20px; display:flex; align-items:center; justify-content:center;
             min-height:68px; box-shadow:0 1px 2px rgba(0,18,51,.04); }
.loghi-strip .logo-box img{ max-height:42px; max-width:180px; display:block; }
.loghi-strip .logo-box.su-navy{ background:var(--navy); border-color:var(--navy); }

/* ── PIANI ── */
.piani{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; align-items:start; }
/* lo switch convenzione (24/08, idea di Emiliano): due voci in pillola,
   l'attiva è navy pieno — il prezzo convenzionato si vede, e chi non ha
   l'Ordine convenzionato scopre cosa si perde */
.piani-switch{ display:inline-flex; gap:4px; padding:5px; border:1px solid var(--line);
               border-radius:999px; background:var(--card); margin-bottom:26px;
               box-shadow:0 1px 2px rgba(0,18,51,.05); }
.ps-btn{ font-family:inherit; font-size:14.5px; font-weight:500; color:var(--ink-soft);
         background:transparent; border:0; border-radius:999px; padding:12px 22px;
         min-height:44px; white-space:nowrap; cursor:pointer;
         transition:background 220ms, color 220ms,
         transform 220ms cubic-bezier(.34,1.56,.64,1); }
@media(max-width:480px){ .ps-btn{ font-size:13.5px; padding:12px 15px; } }
.ps-btn:hover{ transform:translateY(-1px); }
.ps-btn.attivo{ background:var(--navy); color:#fff; }
.prezzo-pieno{ display:block; font-size:15px; font-weight:400; color:var(--ink-mute);
               text-decoration:line-through; margin-top:2px; }
.conv-avviso{ margin-top:18px; }
.piano{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:34px 30px; box-shadow:var(--ombra-card); }
.piano-in-vista{ border-color:rgba(247,37,133,.35); box-shadow:0 2px 3px rgba(0,18,51,.05), 0 28px 56px -28px rgba(247,37,133,.35); }
.piano-badge{ display:inline-block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
              color:var(--pink); background:rgba(247,37,133,.08); border-radius:999px; padding:4px 12px; margin-bottom:14px; }
.piano-nome{ font-family:"Mona Sans Expanded"; font-weight:500; font-size:18px; }
.piano-prezzo{ font-family:"Mona Sans Expanded"; font-weight:700; font-size:40px; margin:8px 0 2px; letter-spacing:-0.02em; }
.piano-quando{ font-size:14px; color:var(--ink-mute); margin-bottom:20px; }
.piano ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.piano li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink-soft); }
.piano li::before{ content:""; width:17px; height:17px; border-radius:50%; flex:none; margin-top:2px;
                   background:var(--sfera-fondo-teal);
                   box-shadow:0 4px 10px -3px rgba(14,165,183,.5), inset 0 -2px 4px rgba(0,60,68,.3), inset 0 1px 3px rgba(255,255,255,.45); }
.piano .btn{ width:100%; justify-content:center; }
.piani-nota{ margin-top:26px; font-size:15px; color:var(--ink-soft); max-width:720px; }
.piani-nota strong{ color:var(--ink); }

/* ── FAQ ── */
.faq-lista{ max-width:820px; display:flex; flex-direction:column; gap:14px; }
details{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 26px; box-shadow:0 1px 2px rgba(0,18,51,.04); }
summary{ cursor:pointer; font-weight:500; font-size:16.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-size:22px; font-weight:400; color:var(--ink-mute); transition:transform .2s; }
details[open] summary::after{ transform:rotate(45deg); }
details p{ margin-top:12px; font-size:15.5px; color:var(--ink-soft); }

/* ── CHIUSURA ── */
/* ── LE ESPERIENZE (pagina Inizia, 23/08): il giro completo in card ── */
.esperienze{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:22px; }
.esperienza{ background:var(--card); border:1px solid var(--line); border-radius:20px;
             overflow:hidden; box-shadow:var(--ombra-card); display:flex; flex-direction:column;
             transition:transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms; }
.esperienza:hover{ transform:translateY(-3px);
                   box-shadow:0 2px 3px rgba(0,18,51,.05), 0 24px 48px -24px rgba(0,18,51,.3); }
.esperienza-img{ aspect-ratio:16/9; overflow:hidden; background:var(--bg);
                 border-bottom:1px solid var(--line); }
.esperienza-img img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.esperienza-corpo{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.esperienza-corpo h3{ font-size:18px; font-weight:500; font-family:"Mona Sans Expanded"; }
.esperienza-corpo p{ font-size:14.5px; color:var(--ink-soft); flex:1; }
.esperienza-vai{ display:inline-flex; align-items:center; gap:6px; color:var(--pink-testo);
                 font-weight:600; font-size:14px; text-decoration:none; }
.esperienza-vai svg{ width:15px; height:15px; transition:transform 220ms; }
.esperienza-vai:hover svg{ transform:translateX(3px); }

/* la fascia della migrazione: la promessa a tutta banda */
.migra{ background:var(--navy); color:#fff; padding:64px 0; }
.migra h2{ font-size:clamp(26px,3.2vw,38px); margin-bottom:12px; }
.migra p{ color:rgba(255,255,255,.75); font-size:16px; max-width:640px; }
.migra .btn{ margin-top:22px; }

/* ── IL PONTE TRA LE FUNZIONI: chiude la pagina portando alla prossima ── */
.ponte{ background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
        padding:56px 0; }
.ponte-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; }
.ponte-testo h2{ font-size:clamp(24px,3vw,34px); margin-top:14px; }
.ponte-altre{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.ponte-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
             border:1px solid var(--line); border-radius:50px; background:var(--bg);
             color:var(--ink); text-decoration:none; font-size:14px;
             transition:transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms; }
.ponte-chip:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -14px rgba(0,18,51,.35); }
.ponte-chip svg{ width:16px; height:16px; color:var(--pink); }

/* la chiusura sta attaccata a ciò che la precede: il grosso dell'aria sta sotto */
.fine{ text-align:center; padding:64px 0 104px; }
.fine h2{ font-size:clamp(30px,4vw,46px); margin-bottom:16px; }
.fine p{ font-size:17px; color:var(--ink-soft); margin-bottom:36px; }
footer{ background:var(--navy); color:rgba(255,255,255,.62); padding:44px 0; font-size:14px; }
.footer-in{ display:flex; flex-wrap:wrap; gap:16px 34px; justify-content:space-between; align-items:center; }
footer a{ color:rgba(255,255,255,.78); text-decoration:none; }
footer a:hover{ color:#fff; }

/* ── IL PIEDE VERO: 4 colonne + social + dati societari (23/08) ── */
.piede{ padding:56px 0 0; }
.piede-griglia{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
                gap:34px 28px; padding-bottom:40px; }
.piede .logo{ display:inline-flex; align-items:center; gap:10px; color:#fff;
              font-family:"Mona Sans Expanded"; font-weight:500; font-size:17px;
              text-decoration:none; }
.piede .logo img{ width:30px; height:30px; }
.piede-brand p{ margin-top:12px; font-size:13.5px; line-height:1.55; max-width:240px; }
.piede-social{ display:flex; gap:10px; margin-top:16px; }
/* specificità doppia: .piede-griglia a{display:block} sta più in basso e vinceva,
   scentrando l'icona nel cerchio (visto da Emiliano 23/08) */
.piede-griglia .piede-social a{ display:inline-flex; align-items:center; justify-content:center;
                 width:36px; height:36px; padding:0; border-radius:50%;
                 border:1px solid rgba(255,255,255,.22); line-height:0;
                 transition:transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms; }
.piede-social a:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.6); }
.piede-social svg{ width:16px; height:16px; display:block; }
.piede h5{ color:#fff; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
           font-weight:600; margin-bottom:14px; }
.piede-griglia a{ display:block; font-size:13.5px; padding:4px 0; }
.piede-dati{ font-size:12.5px; line-height:1.6; margin-top:12px; color:rgba(255,255,255,.45); }
.piede-fondo{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px;
              padding-bottom:22px; font-size:13px; color:rgba(255,255,255,.5); }

/* ── PAGINE LEGALI (privacy, terms — restyling 23/08): prosa lunga nel canone ── */
.legale{ padding:64px 0 90px; }
.legale .container{ max-width:860px; }
.legale-testa{ text-align:center; margin-bottom:40px; }
.legale-testa h1{ font-size:clamp(30px,3.6vw,46px); margin:14px 0 10px; }
.legale-testa .aggiornata{ color:var(--ink-mute); font-size:14px; }
.prosa{ background:var(--card); border:1px solid var(--line); border-radius:20px;
        box-shadow:var(--ombra-card); padding:clamp(26px,4.5vw,54px); }
.prosa h2{ font-size:clamp(20px,2vw,26px); margin:40px 0 14px; }
.prosa h2:first-of-type{ margin-top:0; }
.prosa h3{ font-size:17.5px; margin:24px 0 10px; }
.prosa p{ margin-bottom:14px; color:var(--ink-soft); }
.prosa ul{ margin:0 0 16px 22px; color:var(--ink-soft); }
.prosa li{ margin-bottom:8px; }
.prosa strong{ color:var(--ink); }
.prosa a{ color:var(--pink-testo); font-weight:600; text-decoration:none; }
.prosa a:hover{ text-decoration:underline; }
.prosa-box{ background:rgba(100,223,223,.14); border-left:4px solid var(--teal);
            padding:18px 22px; border-radius:12px; margin:22px 0; }
/* sul fondo teal-tinto del box il rosa dei link non passava la soglia
   (misurato 3,02:1 dal collaudo 23/08): qui serve il tono scuro */
.prosa-box a{ color:var(--pink-700); }
.prosa-box p:last-child{ margin-bottom:0; }
.prosa-indice{ background:var(--bg); border:1px solid var(--line); border-radius:14px;
               padding:22px 26px; margin:26px 0 34px; }
.prosa-indice h3{ margin:0 0 12px; }
.prosa-indice ul{ margin:0 0 0 20px; }
.prosa-indice a{ color:var(--ink); font-weight:500; }
.prosa-indice a:hover{ color:var(--pink-testo); }
.prosa-contatti{ background:var(--navy); color:#fff; border-radius:16px;
                 padding:30px 28px; margin-top:36px; text-align:center; }
.prosa-contatti h3{ margin:0 0 12px; color:#fff; }
.prosa-contatti p{ color:rgba(255,255,255,.8); }
.prosa-contatti a{ color:var(--teal); }

@media (prefers-reduced-motion: reduce){ .btn,.card{ transition:none; } }