/* ═══════════════════════════════════════════════════════════
   Gennaro Tortorella — Igienista dentale
   Palette: avorio caldo · verde salvia profondo · ottone
   ═══════════════════════════════════════════════════════════ */

:root{
  --nav-h:76px;
  --ivory:#F7F4EF;
  --ivory-2:#F1ECE4;
  --paper:#FFFFFF;
  --ink:#16241F;
  --ink-2:#4A5B54;
  --ink-3:#7A8A83;
  --green:#2F5D50;
  --green-d:#234A3F;
  --green-l:#3E7263;
  --brass:#A98B5D;
  --brass-l:#C9AE83;
  --line:#DFD8CC;
  --line-2:#E9E3D9;

  --wrap:1180px;
  --r:14px;
  --r-lg:22px;
  --ease:cubic-bezier(.22,.68,.36,1);
  --sh:0 1px 2px rgba(22,36,31,.04), 0 8px 28px -12px rgba(22,36,31,.12);
  --sh-lift:0 2px 6px rgba(22,36,31,.06), 0 22px 48px -18px rgba(22,36,31,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ── Skip link ── */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--green);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 10px 0;
  font-size:.9rem;text-decoration:none;
}
.skip:focus{left:0}

:focus-visible{outline:2.5px solid var(--brass);outline-offset:3px;border-radius:4px}

/* ── Layout ── */
.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.6rem,780px)}
.center{text-align:center}

.sec{padding:clamp(4.5rem,10vw,8rem) 0}
.sec--tint{background:var(--ivory-2)}

/* ── Tipografia ── */
.kicker{
  font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin:0 0 1rem;
}
.h2{
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;font-optical-sizing:auto;
  font-size:clamp(2rem,4.4vw,3.1rem);
  line-height:1.12;letter-spacing:-.02em;
  margin:0 0 1.4rem;color:var(--ink);
}
.h2--inv{color:#fff}
.sub{font-size:1.06rem;color:var(--ink-2);margin:0 0 2.8rem;max-width:56ch}
.para{margin:0 0 1.15rem;color:var(--ink-2);max-width:62ch}
.para--c{margin-inline:auto}
.para strong{color:var(--ink);font-weight:600}
.lede{font-size:clamp(1.06rem,1.8vw,1.24rem);color:var(--ink-2);margin:0 0 2.2rem;max-width:52ch;line-height:1.55}
.lede--c{margin-inline:auto}
.lede--inv{color:rgba(255,255,255,.82)}

/* ═══ NAV ═══ */
.nav{
  position:sticky;top:0;z-index:95;
  background:rgba(247,244,239,.86);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.nav.scrolled{background:rgba(247,244,239,.97);border-bottom-color:var(--line);box-shadow:0 1px 20px -8px rgba(22,36,31,.18)}
.nav__in{display:flex;align-items:center;gap:1.6rem;min-height:76px}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand__mark{width:38px;height:38px;color:var(--green);flex:none}
.brand__mark svg{width:100%;height:100%}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__txt strong{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.02rem;letter-spacing:-.01em}
.brand__txt em{font-style:normal;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.nav__links{display:flex;gap:1.9rem}
.nav__links a{
  text-decoration:none;font-size:.93rem;color:var(--ink-2);
  position:relative;padding-bottom:3px;transition:color .25s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--brass);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .25s}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.9px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.9px) rotate(-45deg)}

/* menu mobile */
.mmenu{
  position:fixed;inset:76px 0 0;z-index:80;background:var(--ivory);
  padding:2rem 1.3rem 3rem;overflow-y:auto;
  display:flex;flex-direction:column;gap:1.6rem;
  animation:mmIn .32s var(--ease);
}
.mmenu[hidden]{display:none}
@keyframes mmIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mmenu nav{display:flex;flex-direction:column}
.mmenu nav a{
  text-decoration:none;font-family:"Fraunces",Georgia,serif;font-size:1.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--line-2);color:var(--ink);
}

/* ═══ BOTTONI ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--green);color:#fff;text-decoration:none;
  padding:.92rem 1.6rem;border-radius:100px;
  font-size:.96rem;font-weight:500;letter-spacing:.005em;
  box-shadow:var(--sh);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--green-d);transform:translateY(-2px);box-shadow:var(--sh-lift)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:.62rem 1.15rem;font-size:.88rem}
.btn--lg{padding:1.08rem 2.1rem;font-size:1.02rem}
.btn--full{width:100%}
.btn--inv{background:var(--brass);color:#1a1410}
.btn--inv:hover{background:var(--brass-l)}
.ico{width:19px;height:19px;flex:none}

/* ═══════════════════════════════════════════════════════════
   HERO-FILM — il video del cliente in frame, guidato dallo scroll
   ═══════════════════════════════════════════════════════════ */
.film{
  position:relative;background:var(--ivory);
  /* il film parte dal bordo superiore: il nav ci galleggia sopra, non lo spinge giù */
  margin-top:calc(-1 * var(--nav-h));
}
.film__driver{height:310vh;position:relative}
.film__stage{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;align-items:center;
  overflow:hidden;
}
/* il film riempie TUTTO lo schermo, da bordo a bordo */
.film__canvas{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;display:block;
  background:#fff;
}

/* Lo scrim che rende leggibili le scritte SOPRA il girato.
   Il film passa da fondo bianco accecante a gengiva scura in pochi frame: senza questo,
   il testo sparisce a metà scroll. Tre strati, tutti economici:
   1) una velatura d'insieme che abbassa i bianchi
   2) una fascia scura in basso, dove poggia il testo
   3) una sotto il nav, così il chrome non poggia mai su girato nudo             */
.film__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* la vignettatura: chiude gli angoli e porta avanti il dente. Leggera di proposito —
       il girato ha già un calo suo verso i bordi (misurato: angoli a 0,42 del centro),
       e raddoppiarlo chiuderebbe troppo. È uno strato fermo: si disegna una volta */
    radial-gradient(125% 105% at 50% 46%,
      rgba(3,12,14,0) 46%,
      rgba(3,12,14,.16) 76%,
      rgba(3,12,14,.34) 100%),
    /* il testo poggia sulla metà sinistra: lì il fondo si scurisce, a destra il dente resta pulito */
    linear-gradient(90deg,
      rgba(3,12,14,.94) 0%,
      rgba(3,12,14,.9) 22%,
      rgba(3,12,14,.78) 36%,
      rgba(3,12,14,.44) 50%,
      rgba(3,12,14,.14) 62%,
      rgba(3,12,14,0) 74%),
    linear-gradient(180deg, rgba(3,12,14,.2) 0%, rgba(3,12,14,0) 16%),
    /* il piede: si spegne nel nero esatto con cui comincia la sezione «Chi è», così
       il film non finisce di taglio. Pieno solo sul filo del bordo — più in su
       resta leggero, altrimenti mangerebbe le radici del dente */
    linear-gradient(0deg, #02090A 0%, rgba(2,9,10,.88) 2.5%, rgba(2,9,10,.36) 10%, rgba(2,9,10,0) 26%);
}

/* La grana. Il girato è un video compresso: nel verde piatto restano fasce a gradini
   (contati 23 livelli distinti su 700 px di colonna). Una grana finissima le rompe.
   Una texture di 128 px che si ripete: il browser la rasterizza una volta e non la
   ridisegna più — a differenza di un filtro, che costerebbe a ogni fotogramma. */
.film__grana{
  /* A schermo intero, e non è una svista. Provato a limitarla alla metà sinistra per
     risparmiare i ~3 ms di p95 che costa: il suo bordo verticale si vedeva, un salto di
     7 livelli di luminosità in mezzo al girato. Tre millisecondi non valgono una riga
     visibile in mezzo alla hero. */
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url(../img/grana.png) repeat;
  background-size:128px 128px;
  /* .06 e' il punto: rompe le fasce nel fondo (da 35 a ~95 livelli distinti su
     una colonna) senza farsi vedere sul dente, che a .09 comincia a sporcarsi */
  opacity:.06;
  /* 🐞 Si spegne sul piede. Era lei a far vedere lo stacco netto con la sezione dopo:
     schiariva il fondo del film di una decina di livelli (da L 8 a L 19) e si fermava
     netta alla giuntura, dove «Chi sono» ripartiva dal nero vero. Sui neri l'occhio
     legge quel salto anche se in numeri sembra poco. Lì sotto il velo è comunque quasi
     nero, quindi la grana non serve e non manca a nessuno. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
}

/* il nav galleggia sopra il film: bianco, con un filo d'ombra, come da rifinitura */
/* Il menu resta bianco su tutto il tratto scuro, ma con due fondi diversi.
   Sul FILM può stare trasparente: sotto c'è un'immagine, e una velatura leggera basta.
   Su «CHI È» e sull'anatomia no: lì sotto scorrono il ritratto e i paragrafi, e un menu
   trasparente ci finisce sopra illeggibile — bianco su bianco. Lì prende un fondo scuro
   pieno, che si legge e non è la striscia avorio che prima staccava sul verde. */
.nav--su-film{
  background:linear-gradient(180deg, rgba(3,12,14,.6) 0%, rgba(3,12,14,.3) 60%, rgba(3,12,14,0) 100%)!important;
  border-bottom-color:transparent!important;box-shadow:none!important;
}
.nav--su-scuro{
  background:rgba(5,25,22,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:none!important;
}
.nav--su-film .brand__txt strong,
.nav--su-scuro .brand__txt strong,
.nav--su-film .nav__links a,
.nav--su-scuro .nav__links a{color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.nav--su-film .brand__txt em,
.nav--su-scuro .brand__txt em{color:rgba(255,255,255,.72);text-shadow:0 1px 14px rgba(0,0,0,.5)}
.nav--su-film .brand__mark,
.nav--su-scuro .brand__mark{color:#fff;filter:drop-shadow(0 1px 10px rgba(0,0,0,.5))}
.nav--su-film .burger span,
.nav--su-scuro .burger span{background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.4)}
.nav--su-film .nav__links a:hover,
.nav--su-scuro .nav__links a:hover{color:#fff}

/* le scritte stanno SOPRA il film, centrate e bianche */
.film__grid{
  position:relative;z-index:2;
  width:min(100% - 2.6rem,var(--wrap));margin-inline:auto;
  display:block;text-align:left;
  padding-top:var(--nav-h);          /* il nav galleggia sopra: il testo non ci finisce sotto */
}
.film__txt{position:relative;min-height:clamp(380px,54vh,480px);display:grid;max-width:min(100%,660px)}
.beat{
  grid-area:1/1;align-self:center;
  opacity:0;will-change:opacity,transform;
  transition:none;
}
.beat h1{
  font-family:"Fraunces",Georgia,serif;font-weight:400;font-optical-sizing:auto;
  font-size:clamp(2.6rem,6.2vw,4.8rem);line-height:1.02;letter-spacing:-.03em;
  margin:0 0 1.4rem;color:#fff;
  text-shadow:0 2px 30px rgba(4,12,9,.6), 0 1px 3px rgba(4,12,9,.35);
}
.beat h1 .ital{font-style:italic;font-weight:300;color:#fff;opacity:.9}
.beat h2{
  font-family:"Fraunces",Georgia,serif;font-weight:400;font-optical-sizing:auto;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.1;letter-spacing:-.025em;
  margin:0 0 1.1rem;color:#fff;
  text-shadow:0 2px 30px rgba(4,12,9,.6), 0 1px 3px rgba(4,12,9,.35);
}
.beat > p:not(.eyebrow):not(.lede){
  margin:0 0 1.9rem;color:rgba(255,255,255,.93);font-size:1.06rem;line-height:1.6;
  max-width:46ch;text-shadow:0 1px 20px rgba(4,12,9,.7);
}
.beat .lede{
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 20px rgba(4,12,9,.7);
}
.beat .eyebrow{
  color:#fff;border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.14);
  text-shadow:0 1px 12px rgba(4,12,9,.5);
}
.beat .facts{
  justify-content:flex-start;color:rgba(255,255,255,.86);
  text-shadow:0 1px 14px rgba(4,12,9,.7);
}
.beat--fine h2{color:#fff}

/* barra di caricamento vera, non finta */
.film__load{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:rgba(223,216,204,.5);transition:opacity .5s var(--ease);
}
.film__load span{display:block;height:100%;width:0;background:var(--green);transition:width .2s linear}
.film__load.via{opacity:0}

/* invito allo scroll, sparisce appena si parte */
.film__hint{
  position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);z-index:3;
  width:22px;height:34px;border:1.5px solid rgba(255,255,255,.6);border-radius:12px;
  opacity:0;transition:opacity .6s var(--ease);
}
.film__stage.pronto .film__hint{opacity:.85}
.film__stage.in-corsa .film__hint,
.film__stage.is-fine .film__hint{opacity:0}
.film__hint span{
  position:absolute;left:50%;top:7px;width:3px;height:6px;margin-left:-1.5px;
  background:#fff;border-radius:2px;
  animation:hint 1.9s var(--ease) infinite;
}
@keyframes hint{0%,100%{transform:translateY(0);opacity:0}35%{opacity:1}70%{transform:translateY(11px);opacity:0}}

/* ═══ HERO (impianto tipografico condiviso) ═══ */
.hero{position:relative;padding:clamp(3rem,7vw,5.5rem) 0 clamp(4rem,8vw,6.5rem);overflow:hidden}
.hero__in{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.eyebrow{
  display:inline-block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin:0 0 1.4rem;padding:.4rem .9rem;
  border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.6);
}
.hero h1{
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;font-optical-sizing:auto;
  font-size:clamp(2.7rem,6.6vw,4.75rem);
  line-height:1.02;letter-spacing:-.03em;
  margin:0 0 1.5rem;color:var(--ink);
}
.hero h1 .ital{font-style:italic;color:var(--green);font-weight:300}

.facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  padding:0;margin:2.3rem 0 0;font-size:.88rem;color:var(--ink-3);
}
.facts li{display:flex;align-items:center;gap:.42rem}

/* arcata SVG */
.hero__art{position:relative;display:flex;align-items:center;justify-content:center}
.arch{width:min(100%,430px);height:auto;color:var(--green)}
.arch__ring circle{
  stroke-dasharray:1300;stroke-dashoffset:1300;
  animation:draw 2.4s var(--ease) forwards;
}
.arch__ring circle:nth-child(2){animation-delay:.25s}
.arch__tooth .t-body{
  stroke-dasharray:700;stroke-dashoffset:700;
  animation:draw 2s var(--ease) .3s forwards;
}
.arch__tooth .t-shine{
  stroke-dasharray:60;stroke-dashoffset:60;
  animation:draw .8s var(--ease) 1.7s forwards;
}
.arch__mini path{
  stroke-dasharray:260;stroke-dashoffset:260;
  animation:draw 1.4s var(--ease) .9s forwards;
}
.arch__mini path+path{stroke-dasharray:90;stroke-dashoffset:90;animation-delay:1.5s;animation-duration:.7s}
@keyframes draw{to{stroke-dashoffset:0}}

.hero__badge{
  position:absolute;right:2%;bottom:8%;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:.85rem 1.15rem;
  box-shadow:var(--sh);
  display:flex;flex-direction:column;gap:.1rem;
  animation:badgeIn .8s var(--ease) 1.1s both;
}
@keyframes badgeIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.hero__badge-k{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.hero__badge-v{font-family:"Fraunces",Georgia,serif;font-size:1.35rem;color:var(--green);line-height:1.1}

.hero__rule{height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);margin-top:1rem}

/* ═══ FUNZIONI — testo integrale del cliente, retto dalla struttura ═══ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;margin-top:2.6rem}
.fn{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:2rem 1.9rem 1.8rem;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.fn:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--line)}
.fn__ico{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:15px;
  background:var(--ivory-2);color:var(--green);margin-bottom:1.2rem;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.fn:hover .fn__ico{background:var(--green);color:#fff}
.fn__ico svg{width:28px;height:28px}
.fn h3{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.18rem;margin:0 0 .6rem;letter-spacing:-.01em}
.fn p{margin:0;font-size:.96rem;color:var(--ink-2);line-height:1.55}
.fn__lab{
  margin:1.15rem 0 .6rem!important;
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)!important;
}
.fn__note{
  margin-top:1.05rem!important;padding-top:.9rem;
  border-top:1px solid var(--line-2);
  font-size:.89rem!important;color:var(--brass)!important;
}

/* le voci degli elenchi del cliente: chip, non righe di testo */
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{
  font-size:.85rem;line-height:1.3;color:var(--green);
  background:var(--ivory-2);border:1px solid var(--line-2);
  padding:.34rem .78rem;border-radius:100px;
}
.chips--inv li{
  color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);
}

/* ═══ CARD TRATTAMENTI ═══ */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;margin-top:2.6rem}
.card{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:2rem 1.55rem 1.8rem;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);border-color:var(--line)}
.card__ico{
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:15px;
  background:var(--ivory-2);color:var(--green);margin-bottom:1.25rem;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.card:hover .card__ico{background:var(--green);color:#fff}
.card__ico svg{width:29px;height:29px}
.card h3{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.15rem;margin:0 0 .55rem;letter-spacing:-.01em}
.card p{margin:0;font-size:.94rem;color:var(--ink-2);line-height:1.55}

/* ═══ RUOLI ═══ */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:.6rem}
.role{border-radius:var(--r-lg);padding:2.1rem 1.9rem}
.role header{margin-bottom:1.4rem}
.role__tag{
  display:inline-block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.32rem .8rem;border-radius:100px;margin-bottom:.85rem;
}
.role h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.3rem;margin:0;letter-spacing:-.01em}
.role ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.85rem}
.role li{display:flex;gap:.75rem;align-items:flex-start;font-size:.97rem;line-height:1.5}
.role li::before{flex:none;margin-top:.15rem;font-size:.95rem}

.role--a{background:var(--green);color:#fff}
.role--a .role__tag{background:rgba(255,255,255,.14);color:#fff}
.role--a h3{color:#fff}
.role--a .ticks li{color:rgba(255,255,255,.9)}
.role--a .ticks li::before{content:"✓";color:var(--brass-l);font-weight:600}

.role--b{background:var(--paper);border:1px solid var(--line)}
.role--b .role__tag{background:var(--ivory-2);color:var(--ink-3)}
.role--b .dots li{color:var(--ink-2)}
.role--b .dots li::before{content:"—";color:var(--ink-3)}

.bridge{
  margin:1.9rem 0 0;padding:1.3rem 1.6rem;
  border-left:2.5px solid var(--brass);background:rgba(169,139,93,.07);
  border-radius:0 10px 10px 0;color:var(--ink-2);font-size:.98rem;max-width:70ch;
}

/* la sintesi del cliente: la frase più importante del sito */
.synth{
  margin:2.8rem 0 0;text-align:center;
  font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(1.45rem,3.2vw,2.15rem);line-height:1.35;
  letter-spacing:-.015em;color:var(--ink);
}
.synth em{font-style:italic;color:var(--green);font-weight:400}

/* fascia "rilevazione precoce": non è un trattamento, è la sicurezza in più */
.watch{
  display:flex;gap:1.4rem;align-items:flex-start;
  margin-top:1.15rem;padding:1.7rem 1.9rem;
  background:var(--green);color:#fff;border-radius:var(--r-lg);
  box-shadow:var(--sh);
}
.watch__ico{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;
  background:rgba(255,255,255,.12);color:var(--brass-l);
}
.watch__ico svg{width:28px;height:28px}
.watch h3{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.15rem;
  margin:.15rem 0 .5rem;letter-spacing:-.01em;color:#fff;
}
.watch p{margin:0;font-size:.96rem;line-height:1.55;color:rgba(255,255,255,.86);max-width:68ch}
.watch .chips{margin:.8rem 0}
.watch__end{margin-top:.8rem!important}

/* ═══ NOTA ═══ */
.note{
  margin:2rem 0 0;padding:1.25rem 1.5rem;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--ink-2);font-size:.96rem;box-shadow:var(--sh);
}

/* ═══ CADENZA ═══ */
.cadence{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.cadence__num{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:clamp(150px,20vw,210px);height:clamp(150px,20vw,210px);
  border:1px solid var(--line);border-radius:50%;
  background:var(--paper);box-shadow:var(--sh);flex:none;
}
.cadence__num span{
  font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(3.6rem,7vw,5.4rem);line-height:.9;color:var(--green);
}
.cadence__num em{font-style:normal;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:.55rem}

/* ═══ STEP ═══ */
.steps{
  list-style:none;padding:0;margin:2.6rem 0 3rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;position:relative;
}
.step{position:relative;padding:2rem 1.7rem;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.step__n{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--green);color:#fff;
  font-family:"Fraunces",Georgia,serif;font-size:1.22rem;
  margin-bottom:1.15rem;
}
.step h3{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.13rem;margin:0 0 .5rem;letter-spacing:-.01em}
.step p{margin:0;font-size:.94rem;color:var(--ink-2);line-height:1.55}

/* ═══ COSTO ═══ */
.cost{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.8rem,4vw,2.6rem);box-shadow:var(--sh);
}
.cost .para:last-child{margin-bottom:0}

/* ═══ BIO ═══ */
.bio{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
/* ═══ RITRATTO ═══
   La foto resta come l'ha scattata il fotografo: fondo bianco, nessun ritocco.
   Il lavoro è tutto attorno — cornice sottile, angoli, ombra — non sull'immagine. */
.ritratto{
  position:relative;margin:0;
  border-radius:var(--r-lg);overflow:hidden;
  background:#fff;
  border:1px solid var(--line-2);
  box-shadow:0 2px 10px rgba(22,36,31,.07), 0 30px 60px -28px rgba(22,36,31,.38);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.ritratto:hover{transform:translateY(-5px);box-shadow:0 3px 14px rgba(22,36,31,.09), 0 40px 76px -30px rgba(22,36,31,.46)}
.ritratto img{width:100%;height:auto;display:block}

.role-line{font-size:.98rem;color:var(--brass);letter-spacing:.03em;margin:0 0 1.1rem}

/* ═══ ISCRIZIONE ALL'ALBO ═══
   Per un professionista sanitario è il dato che dà fiducia più di qualunque frase, ma
   è anche lungo: sta in corpo piccolo, con il numero staccato in evidenza davanti.
   Il riquadro lo tiene insieme e lo distingue dal racconto. */
.albo{
  margin:0 0 1.5rem;padding:.72rem .95rem;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
  background:rgba(255,255,255,.045);
  font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.72);
  max-width:46ch;
}
.albo__n{
  display:inline-block;margin-left:.15rem;
  padding:.14rem .48rem;border-radius:6px;
  background:rgba(201,174,131,.16);color:var(--brass-l);
  font-weight:600;letter-spacing:.02em;white-space:nowrap;
}
/* nel footer è un dato legale come gli altri: piccolo e discreto.
   Il padding a destra tiene il testo lontano dal pulsante WhatsApp fisso, che lì in
   fondo ci finisce sopra e ne mangiava la prima riga. */
.foot__albo{
  flex-basis:100%;order:-1;
  margin:0 0 .9rem;padding:0 4.6rem .9rem 0;
  border-bottom:1px solid var(--line-2);
  font-size:.78rem;line-height:1.5;color:var(--ink-3);
  max-width:none;
}
@media (min-width:861px){ .foot__albo{padding-right:0} }

/* ═══════════════════════════════════════════════════════════
   FORMAZIONE — subito dopo «Chi sono», perché parla di lui
   SCURA come la sezione sopra e come l'anatomia sotto: una sezione chiara qui in mezzo
   spezzerebbe la catena, ed è l'errore già fatto una volta con «Chi sono».
   Il gradiente parte e finisce dove finisce e comincia il verde delle vicine, così le
   tre sezioni sono un colore solo che scorre.
   L'attestato è un documento: si presenta come tale — cornice chiara, ombra profonda,
   una didascalia sotto — e accanto il contenuto scritto in chiaro, perché quello che
   c'è dentro non si legge da una foto rimpicciolita.
   ═══════════════════════════════════════════════════════════ */
.form{
  position:relative;color:#fff;overflow:hidden;
  /* il fondo era clamp(3.2rem,7vw,5.4rem): sommato al padding dell'anatomia sotto
     lasciava 165 px di vuoto su computer */
  padding:clamp(2.8rem,6vw,4.4rem) 0 clamp(2.2rem,4.4vw,3.4rem);
  background:linear-gradient(180deg,#07211D 0%,#08251F 46%,#07211D 100%);
}
/* un alone caldo dietro l'attestato, appena accennato: dà profondità senza chiudere */
.form::before{
  content:"";position:absolute;top:8%;left:-6%;
  width:min(62%,620px);height:84%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(201,174,131,.11) 0%, rgba(201,174,131,.04) 46%, rgba(201,174,131,0) 74%);
  pointer-events:none;
}
.form__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,4.5vw,3.4rem);align-items:center;
}

/* ── l'attestato ── */
.form__q{margin:0}
.form__btn{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 3px 14px rgba(0,0,0,.34), 0 34px 66px -28px rgba(0,0,0,.72);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.form__btn img{width:100%;height:auto;display:block;transition:transform .8s var(--ease)}
.form__btn:hover{transform:translateY(-5px);box-shadow:0 4px 18px rgba(0,0,0,.4), 0 44px 84px -30px rgba(0,0,0,.8)}
.form__btn:hover img{transform:scale(1.035)}
.form__btn:focus-visible{outline:2px solid var(--brass-l);outline-offset:3px}
/* l'invito a ingrandire: si vede sempre su telefono, al passaggio del mouse su computer */
.form__lente{
  position:absolute;right:.7rem;bottom:.7rem;
  padding:.36rem .7rem;border-radius:100px;
  background:rgba(4,22,20,.82);color:#fff;
  font-size:.74rem;letter-spacing:.04em;
  opacity:1;transition:opacity .4s var(--ease);
}
.form__cap{
  margin:.85rem 0 0;text-align:center;
  font-size:.82rem;color:rgba(255,255,255,.5);letter-spacing:.02em;
}

/* ── il testo ── */
.form .kicker{color:var(--brass-l)}
.form .h2{color:#fff;margin-bottom:1.1rem}
.form__lede{
  margin:0 0 1.6rem;max-width:46ch;
  font-size:1.02rem;line-height:1.62;color:rgba(255,255,255,.8);
}
/* la scheda del corso: quello che c'è scritto sull'attestato, in chiaro */
.form__card{
  padding:clamp(1.1rem,2.6vw,1.5rem) clamp(1.2rem,2.8vw,1.7rem);
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.045);
}
.form__tag{
  margin:0 0 .55rem;display:inline-block;
  padding:.2rem .6rem;border-radius:6px;
  background:rgba(201,174,131,.17);color:var(--brass-l);
  font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.form__tit{
  margin:0;font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:clamp(1.14rem,2.5vw,1.42rem);line-height:1.25;color:#fff;
}
.form__sub{margin:.3rem 0 1rem;font-size:.92rem;font-style:italic;color:var(--brass-l)}
.form__dl{margin:0;display:grid;gap:.5rem}
.form__dl > div{display:grid;grid-template-columns:5.4rem 1fr;gap:.7rem;align-items:baseline}
.form__dl dt{
  margin:0;font-size:.73rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.form__dl dd{margin:0;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.86)}

@media (min-width:861px){
  .form__in{grid-template-columns:.92fr 1.08fr;gap:clamp(2.6rem,5vw,4.2rem)}
  .form__lente{opacity:0}
  .form__btn:hover .form__lente,.form__btn:focus-visible .form__lente{opacity:1}
}
@media (max-width:560px){
  .form__dl > div{grid-template-columns:1fr;gap:.1rem}
}

/* ═══ LA LENTE — la foto aperta a schermo ═══ */
/* 🐞 hidden va riaffermato: l'attributo mette display:none dal foglio del browser,
   che ha specificità zero, e il display:flex qui sotto se lo mangiava. Risultato: la
   lente restava invisibile ma stesa su tutto lo schermo, e intercettava OGNI clic della
   pagina — nessun pulsante funzionava più. Trovato dalla prova automatica, non a occhio. */
.lente[hidden]{display:none}
.lente{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(4,18,15,.93);
  opacity:0;transition:opacity .34s var(--ease);
}
.lente.aperta{opacity:1}
.lente__f{
  margin:0;max-width:min(92vw,860px);
  display:flex;flex-direction:column;align-items:center;
  transform:scale(.94);transition:transform .34s var(--ease);
}
.lente.aperta .lente__f{transform:none}
.lente__f img{
  /* il tetto in altezza serve: senza, una foto verticale riempie lo schermo e la
     didascalia finisce fuori dal bordo inferiore */
  max-width:100%;max-height:76vh;width:auto;height:auto;display:block;
  border-radius:var(--r-lg);box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
.lente__f figcaption{
  margin-top:.9rem;color:rgba(255,255,255,.8);
  font-size:.86rem;line-height:1.5;text-align:center;
}
.lente__x{
  position:absolute;top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:1.7rem;line-height:1;cursor:pointer;
  transition:background .25s var(--ease);
}
.lente__x:hover{background:rgba(255,255,255,.22)}


/* ═══════════════════════════════════════════════════════════
   LA FIRMA — «Il tuo sorriso, il mio successo»
   È la frase del cliente e chiude la sua sezione, a tutta larghezza sotto il ritratto:
   sta bene accanto alla sua faccia più che in fondo alla pagina, dove sarebbe stata
   solo l'ultima riga prima del footer.
   Due righe, la seconda in corsivo ottone. Le parole si compongono una alla volta —
   riusa lo stesso meccanismo dei titoli (main.js le spezza e le fa salire sfalsate).
   Le virgolette sono decorative e stanno dietro: grandi, appena accennate.
   ═══════════════════════════════════════════════════════════ */
.firma{
  position:relative;margin:clamp(3rem,6vw,4.6rem) auto 0;
  padding:clamp(1.9rem,4vw,2.8rem) 1rem 0;
  max-width:min(100%,30ch);text-align:center;
}
/* il filetto sopra, come nella chiusura: stacca senza chiudere in una scatola */
.firma::after{
  content:"";position:absolute;top:0;left:50%;
  width:72px;height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(201,174,131,0), rgba(201,174,131,.85), rgba(201,174,131,0));
}
/* Le virgolette: decorative, dietro, appena visibili.
   🐞 Centrate con left/right e text-align, NON con transform: un transform qui crea un
   layer che sul gradiente della sezione si stacca come un rettangolo chiaro. Stessa
   ragione per cui la firma non usa la maschera sulle parole. */
/* 🐞 Le virgolette NON usano Fraunces: quel font, nel sottoinsieme che arriva da Google
   Fonts, non porta il glifo U+201C, e al suo posto il browser disegnava il quadratino
   del carattere mancante — un rettangolo chiaro in mezzo alla frase. Georgia ce l'ha,
   è un font di sistema e per un segno decorativo va benissimo. */
.firma::before{
  content:"“";position:absolute;
  top:clamp(.1rem,1.4vw,.6rem);left:0;right:0;
  text-align:center;
  font-family:Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(6rem,15vw,9rem);line-height:1;
  color:rgba(201,174,131,.13);
  pointer-events:none;user-select:none;
}
.firma__1,.firma__2{
  position:relative;z-index:1;margin:0;
  font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(1.62rem,5vw,2.7rem);line-height:1.2;letter-spacing:-.02em;
  /* ogni riga sta sulla sua: sono due frasi, non un paragrafo che si spezza */
  white-space:nowrap;
}
.firma__1{color:#fff}
.firma__2{
  font-style:italic;
  color:var(--brass-l);
  /* 🐞 Niente text-shadow qui. L'animazione parola per parola chiude ogni parola in una
     finestrella con overflow:hidden, e un'ombra sfocata ci viene TAGLIATA dentro: il
     risultato erano rettangoli chiari attorno a ogni parola. Il bagliore sta dietro,
     su .firma__luce, dove nessuno lo taglia. */
}
/* il bagliore: un alone dietro la frase, non un'ombra sulle lettere */
.firma__luce{
  /* niente transform, per lo stesso motivo delle virgolette */
  position:absolute;left:6%;right:6%;top:14%;bottom:12%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(201,174,131,.16) 0%, rgba(201,174,131,.06) 45%, rgba(201,174,131,0) 72%);
  pointer-events:none;
}

/* ═══ CTA FINALE ═══ */
.cta{
  background:var(--green);color:#fff;
  padding:clamp(4.5rem,9vw,7rem) 0;position:relative;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:min(880px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,174,131,.16) 0%,transparent 62%);
  pointer-events:none;
}
.cta .wrap{position:relative}
.tel{margin:1.8rem 0 0;font-size:1.02rem;color:rgba(255,255,255,.78)}

/* ═══ FOOTER ═══ */
.foot{background:var(--ink);color:rgba(255,255,255,.62);padding:clamp(3rem,6vw,4.5rem) 0 1.8rem;font-size:.92rem}
.foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem;padding-bottom:2.6rem}
.foot__col p{margin:0 0 .38rem}
.foot__brand{font-family:"Fraunces",Georgia,serif;font-size:1.16rem;color:#fff;margin-bottom:.6rem!important}
.foot__h{color:#fff;font-weight:500;margin-bottom:.75rem!important;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.foot a{color:rgba(255,255,255,.78);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);transition:color .25s,border-color .25s}
.foot a:hover{color:#fff;border-bottom-color:var(--brass-l)}
.foot__bar{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);padding-top:1.6rem;font-size:.85rem;
}
.foot__bar p{margin:0}

/* ═══ COOKIE ═══ */
.solo-stretto{display:none}
@media (max-width:560px){
  .solo-largo{display:none}
  .solo-stretto{display:inline}
}
.cookie{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%) translateY(140%);
  z-index:120;width:min(100% - 1.6rem,680px);
  background:var(--paper);border:1px solid var(--line);border-radius:100px;
  box-shadow:var(--sh-lift);
  display:flex;align-items:center;gap:.85rem;
  padding:.6rem .7rem .6rem 1.35rem;font-size:.86rem;color:var(--ink-2);
  transition:transform .55s var(--ease);
}
.cookie.show{transform:translateX(-50%) translateY(0)}
.cookie p{margin:0;flex:1;min-width:0}
.cookie a{color:var(--green)}
.cookie button{
  flex:none;background:var(--green);color:#fff;border:0;
  padding:.55rem 1.15rem;border-radius:100px;cursor:pointer;
  font-size:.85rem;font-family:inherit;font-weight:500;
  transition:background .25s var(--ease);
}
.cookie button:hover{background:var(--green-d)}

/* ═══ REVEAL ═══ */
.entra{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.entra.in{opacity:1;transform:none}
.d1{transition-delay:.09s}
.d2{transition-delay:.18s}
.d3{transition-delay:.27s}
.d4{transition-delay:.36s}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1000px){
  .grid4{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .hero__in{grid-template-columns:1fr;gap:3rem}
  .hero__art{order:-1;max-width:340px;margin-inline:auto}
  .hero__badge{right:-4%;bottom:4%}
  .bio{grid-template-columns:1fr;gap:3.4rem}
  .ritratto{max-width:320px;margin-inline:auto;width:100%}
  .steps{grid-template-columns:1fr}
}

@media (max-width:860px){
  .nav__links{display:none}
  .burger{display:block}
  .nav .btn--sm{display:none}

  /* FILM su telefono: sempre a tutto schermo, il testo poggia sulla metà bassa */
  .film__driver{height:290vh}
  .film__grid{
    grid-template-columns:1fr;gap:0;
    align-content:end;height:100%;padding:0 0 clamp(1.1rem,3.4vh,2rem);
  }
  .film__veil{
    background:
      /* su telefono il testo poggia in basso, e lì sotto passa il dente bianco:
         la fascia inferiore va scurita davvero, non velata appena */
      linear-gradient(0deg,
        rgba(3,12,14,.94) 0%,
        rgba(3,12,14,.88) 22%,
        rgba(3,12,14,.6) 36%,
        rgba(3,12,14,.2) 50%,
        rgba(3,12,14,0) 64%),
      linear-gradient(180deg, rgba(3,12,14,.5) 0%, rgba(3,12,14,0) 20%);
  }
  .film__txt{min-height:clamp(280px,38vh,340px);align-content:end}
  .beat{align-self:end}
  .beat > p:not(.eyebrow):not(.lede){max-width:38ch}
  .beat h1{font-size:clamp(2rem,8vw,2.7rem);margin-bottom:.8rem}
  .beat h2{font-size:clamp(1.55rem,6.4vw,2.05rem)}
  .beat .eyebrow{margin-bottom:.85rem}
  .beat .lede{margin-bottom:1.35rem;font-size:1rem}
  .beat .facts{margin-top:1.15rem;gap:.35rem .9rem;font-size:.8rem}
  .film__hint{display:none}

  /* su telefono il testo viene prima: titolo e pulsante devono stare sopra la piega */
  .hero{padding-top:2rem}
  .hero__in{gap:2.6rem}
  .hero__art{order:2;max-width:260px}
  /* il dato "24-48 h" è già nella riga dei fatti qui sopra: su telefono il badge duplicherebbe */
  .hero__badge{display:none}
  .roles{grid-template-columns:1fr}
  .cadence{grid-template-columns:1fr;gap:2.2rem;text-align:center;justify-items:center}
  .cadence__txt .para{margin-inline:auto}
  .foot__in{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  body{font-size:16px}
  .wrap{width:min(100% - 2rem,var(--wrap))}
  .wrap--narrow{width:min(100% - 2rem,780px)}
  .grid4{grid-template-columns:1fr 1fr;gap:.85rem}
  .card{padding:1.5rem 1.15rem}
  .card__ico{width:46px;height:46px;border-radius:13px;margin-bottom:1rem}
  .card__ico svg{width:25px;height:25px}
  .card h3{font-size:1.02rem}
  .card p{font-size:.88rem}
  .foot__in{grid-template-columns:1fr;gap:1.9rem}
  .foot__bar{flex-direction:column;gap:.55rem}
  .fn{padding:1.6rem 1.35rem}
  .fn__ico{width:46px;height:46px;border-radius:13px;margin-bottom:1rem}
  .fn__ico svg{width:25px;height:25px}
  .chips li{font-size:.81rem;padding:.3rem .68rem}
  .watch{flex-direction:column;gap:1rem;padding:1.5rem 1.35rem}
  .watch__ico{width:46px;height:46px;border-radius:13px}
  /* Prima da telefono la banda andava in colonna col pulsante a tutta larghezza:
     126 px di altezza, che coprivano il pulsante WhatsApp della hero e mezza scritta.
     Resta in riga, come sul computer: scende a circa 60. */
  .cookie{border-radius:20px;padding:.65rem .65rem .65rem 1rem;gap:.6rem;font-size:.8rem;line-height:1.35}
  .cookie button{padding:.5rem .85rem;font-size:.8rem}
  .facts{gap:.45rem 1.1rem;font-size:.83rem}
  .hero__art{max-width:225px}
  .role{padding:1.7rem 1.35rem}
}

/* ═══════════════════════════════════════════════════════════
   WHATSAPP SEMPRE PRESENTE
   Il contatto è l'unico obiettivo del sito e il cliente risponde solo lì:
   il pulsante non deve mai uscire di scena, a nessuna altezza di scroll.
   ═══════════════════════════════════════════════════════════ */
.wa-fix{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:130;
  display:inline-flex;align-items:center;gap:.62rem;
  background:var(--green);color:#fff;text-decoration:none;
  padding:.95rem 1.35rem;border-radius:100px;
  font-size:.95rem;font-weight:500;
  box-shadow:0 3px 10px rgba(22,36,31,.16), 0 16px 40px -14px rgba(22,36,31,.5);
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.wa-fix svg{width:21px;height:21px;flex:none}
.wa-fix:hover{background:var(--green-d);transform:translateY(-3px);box-shadow:0 4px 14px rgba(22,36,31,.2), 0 22px 50px -16px rgba(22,36,31,.55)}
.wa-fix:active{transform:translateY(-1px)}

/* quando il banner cookie è in scena, il pulsante gli lascia il posto */
body.cookie-aperto .wa-fix{transform:translateY(-4.2rem)}

@media (max-width:560px){
  /* su telefono resta, ma diventa un cerchio: non ruba schermo alla lettura */
  .wa-fix{right:1rem;bottom:1rem;padding:0;width:56px;height:56px;justify-content:center}
  .wa-fix span{display:none}
  .wa-fix svg{width:26px;height:26px}
  body.cookie-aperto .wa-fix{transform:translateY(-6.5rem)}
}
@media (prefers-reduced-motion:reduce){
  .wa-fix{transition:none}
  .wa-fix:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════
   CHI È — la persona, subito dopo il film
   Sta fra due sezioni scure, e chiara sarebbe stata una tacca bianca in mezzo:
   proprio lo stacco netto da evitare. Quindi è scura anche lei, e fa da ponte —
   parte dal nero in cui si spegne il film e arriva esatta sul #07211D con cui
   comincia l'anatomia. Tre sezioni, un colore solo che scorre.
   La foto NON si tocca: resta col suo fondo bianco. Su questo verde diventa un
   pannello illuminato, che è poi il modo classico di presentare un ritratto.
   ═══════════════════════════════════════════════════════════ */
.chi{
  position:relative;color:#fff;
  /* il fondo era clamp(4.5rem,10vw,7.5rem): con il padding dell'anatomia sotto faceva
     161 px di vuoto su telefono e 248 su computer, mezza schermata di niente */
  padding:clamp(3.4rem,7vw,5.4rem) 0 clamp(2.4rem,4.6vw,3.6rem);
  background:linear-gradient(180deg, #03100F 0%, #061B1A 34%, #07211D 100%);
  overflow:hidden;
}
/* Cucitura in entrata: il piede del film si scioglie qui dentro senza una riga.
   🐞 Il colore di partenza non è scelto a occhio, è misurato. Prima era #02090A e
   sulla giuntura si vedeva uno stacco netto: il film finisce a rgb(10,19,21) e qui si
   ripartiva da rgb(2,9,10) — su una riga sola la luminosità si dimezzava, e sui neri
   l'occhio se ne accorge subito anche se il salto in numeri sembra piccolo.
   Il perché di quei 10 livelli: era la grana della hero, che schiariva il girato di
   quel tanto e si fermava netta dove finiva il film. Provato ad alzare il colore di
   partenza — si sovracompensa e il salto si ribalta — e a far proseguire la grana di
   qua — resta uno stacco di texture. La cura giusta è a monte: la grana si spegne sul
   piede del film (vedi .film__grana), e i due lati partono dallo stesso #02090A. */
.chi::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(70px,9vw,130px);
  background:linear-gradient(180deg, #02090A 0%, rgba(2,9,10,0) 100%);
  pointer-events:none;
}
.chi .wrap{position:relative;z-index:1}
.chi .kicker{color:var(--brass-l)}
.chi .h2{color:#fff}
.chi .role-line{color:var(--brass-l)}
.chi .para{color:rgba(255,255,255,.8)}
/* sul verde la cornice chiara del ritratto sparirebbe: qui è un filo di luce */
.chi .ritratto{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 2px 10px rgba(0,0,0,.3), 0 34px 70px -26px rgba(0,0,0,.72);
}
.chi .ritratto:hover{
  box-shadow:0 3px 14px rgba(0,0,0,.34), 0 46px 88px -28px rgba(0,0,0,.8);
}

/* ═══════════════════════════════════════════════════════════
   ANATOMIA INTERATTIVA — «Ogni zona, il suo intervento»
   Sta subito sotto il film e ne continua il mondo: stesso verde profondo,
   stesse immagini (sono fotogrammi veri di quel film). Serve a non far
   sembrare la hero un pezzo incollato sopra un altro sito.
   ═══════════════════════════════════════════════════════════ */
.anat{
  position:relative;
  /* in cima era clamp(4.5rem,10vw,8rem): sommato al fondo di «Chi sono» era troppo */
  padding:clamp(2.8rem,5.4vw,4.4rem) 0 clamp(2.6rem,6vw,4rem);
  background:
    radial-gradient(90% 60% at 70% 0%, rgba(62,114,99,.35) 0%, rgba(62,114,99,0) 60%),
    linear-gradient(180deg, #07211D 0%, #0B2A25 42%, #0E332C 100%);
  color:#fff;overflow:hidden;
}
/* cucitura in entrata: «Chi è» consegna qui il suo verde, e la luce radiale
   dell'anatomia non deve accendersi di colpo sul confine */
.anat::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(90px,11vw,170px);z-index:0;
  background:linear-gradient(180deg, #07211D 0%, rgba(7,33,29,0) 100%);
  pointer-events:none;
}
/* Cucitura in uscita: il verde si scioglie nell'avorio della sezione dopo.
   Era il 16%, e voleva dire che il fondo cominciava a schiarire 145 px prima del
   confine: la scia di luce ci cadeva dentro e spariva. Al 9% la zona scura arriva
   più giù e l'effetto ha dove vedersi. */
.anat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:9%;z-index:0;
  background:linear-gradient(180deg, rgba(247,244,239,0) 0%, var(--ivory) 100%);
  pointer-events:none;
}
.kicker--chiaro{color:var(--brass-l)}
.sub--inv{color:rgba(255,255,255,.72)}

.anat__in{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:3rem;
  position:relative;z-index:1;
}

/* ── la lastra con il dente ── */
.anat__fig{display:flex;justify-content:center}
/* il dente è scontornato: niente riquadro, niente lastra — poggia sul fondo della sezione */
.anat__ph{
  position:relative;width:100%;max-width:440px;aspect-ratio:900/1065;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.5));
}
.anat__ph img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
}
/* niente zoom sull'immagine: i punti sono ancorati a coordinate anatomiche fisse,
   ingrandire la foto li avrebbe scollati dalle zone che indicano. */

/* alone che segue il punto attivo: dice dove guardare senza scriverlo */
/* Il dente è scontornato: un alone dietro non si vedrebbe e uno davanti lo velerebbe.
   Il segnale sta tutto sul punto: si allarga, va in ottone e pulsa un anello. */
.anat__lente{display:none}

/* ── i punti sul dente ── */
.pin{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;z-index:2;
}
.pin i{
  position:absolute;inset:9px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.45);
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.pin::before{                    /* alone che pulsa: dice «toccami» senza scriverlo */
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);
  animation:pulsa 2.6s var(--ease) infinite;
}
@keyframes pulsa{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.pin:hover i{transform:scale(1.35)}
.pin.is-on i{
  background:var(--brass-l);transform:scale(1.7);
  box-shadow:0 0 0 4px rgba(201,174,131,.4), 0 0 0 10px rgba(201,174,131,.16), 0 0 30px 6px rgba(201,174,131,.75);
}
.pin.is-on::after{                 /* anello che si espande: indica la zona senza velare l'immagine */
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:2px solid rgba(201,174,131,.85);
  animation:anello 2.1s var(--ease) infinite;
}
@keyframes anello{0%{transform:scale(.5);opacity:1}75%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.pin.is-on::before{border-color:var(--brass-l);animation-duration:1.9s}
.pin:focus-visible{outline:2.5px solid var(--brass-l);outline-offset:4px;border-radius:50%}

/* ── elenco ── */
.anat__lista{display:flex;flex-direction:column;gap:.4rem}
.anat__voce{
  display:flex;align-items:center;gap:1rem;width:100%;
  background:transparent;border:1px solid transparent;border-radius:var(--r);
  padding:.85rem 1.1rem;cursor:pointer;text-align:left;font-family:inherit;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.anat__voce:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.anat__voce.is-on{background:rgba(255,255,255,.11);border-color:rgba(201,174,131,.5);transform:translateX(6px)}
.anat__n{
  font-family:"Fraunces",Georgia,serif;font-size:.92rem;color:rgba(255,255,255,.42);
  min-width:1.9rem;transition:color .35s var(--ease);
}
.anat__voce.is-on .anat__n{color:var(--brass-l)}
.anat__voce strong{display:block;font-weight:500;font-size:1.04rem;color:#fff;letter-spacing:-.005em}
.anat__voce em{display:block;font-style:normal;font-size:.85rem;color:rgba(255,255,255,.55);margin-top:.12rem}

.anat__sp{
  margin-top:1.5rem;padding:1.35rem 1.5rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r);min-height:7.4rem;display:grid;
}
.anat__sp p{
  grid-area:1/1;margin:0;color:rgba(255,255,255,.86);font-size:1rem;line-height:1.62;max-width:54ch;
  opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:none;
}
.anat__sp p.is-on{opacity:1;transform:none;pointer-events:auto}

@media (max-width:860px){
  .anat__in{grid-template-columns:1fr;gap:2rem;margin-top:2.2rem}
  .anat__fig{order:-1}
  .anat__ph{max-width:330px}
  .anat__voce{padding:.75rem .9rem;gap:.8rem}
  .anat__voce strong{font-size:.98rem}
  .anat__sp{min-height:8.8rem}
}
@media (prefers-reduced-motion:reduce){
  .anat__voce,.pin i,.anat__sp p,.anat__ph img{transition:none}
  .anat__voce.is-on{transform:none}
  .pin::before{animation:none}
}

/* ═══════════════════════════════════════════════════════════

/* ═══ La sezione dell'anatomia sta sotto un film che scorre: promossa a layer
   proprio si disegna una volta e poi viene solo composta, invece di essere
   ricomposta a ogni fotogramma. ═══ */
.anat__ph{contain:paint}
.ritratto{contain:paint}

/* ═══════════════════════════════════════════════════════════
   INTERAZIONE — quello che risponde al visitatore
   Tutto in transform/opacity: sono le due sole proprietà che il browser
   sa animare senza ridisegnare. Sopra un film che scorre non ci si può
   permettere altro.
   ═══════════════════════════════════════════════════════════ */

/* filo di avanzamento della lettura */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:140;background:transparent;pointer-events:none}
.prog span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--green-l),var(--brass));
  transform-origin:left;transition:width .1s linear;
}

/* le card dei servizi seguono il mouse: una luce sotto il cursore */
.fn{position:relative;overflow:hidden}
.fn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(47,93,80,.13), transparent 62%);
  opacity:0;transition:opacity .4s var(--ease);
}
.fn:hover::after{opacity:1}

/* i tre passi si accendono in sequenza mentre si scorre */
.step{position:relative;overflow:hidden}
.step::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--green),var(--brass));
  transform:scaleY(0);transform-origin:top;
  transition:transform .7s var(--ease);
}
.step.acceso::before{transform:scaleY(1)}
.step__n{transition:background .5s var(--ease),transform .5s var(--ease)}
.step.acceso .step__n{background:var(--brass);transform:scale(1.08)}

/* il numero grande della cadenza pulsa piano quando arriva */
.cadence__num{transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.cadence__num.acceso{transform:scale(1.04);box-shadow:0 4px 16px rgba(22,36,31,.1), 0 26px 50px -22px rgba(47,93,80,.5)}

/* le card dei trattamenti si sollevano una alla volta, non tutte insieme */
.card{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .prog span{transition:none}
  .fn::after,.step::before,.step__n,.cadence__num{transition:none}
  .ritratto{transition:none}
  .ritratto:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════
   TITOLI CHE SI COMPONGONO
   Ogni parola sale da sotto una riga invisibile, sfalsata di poco.
   È l'effetto che più di ogni altro fa sembrare costruita una pagina —
   e costa due transform.
   ═══════════════════════════════════════════════════════════ */
.tw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.tw i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%);opacity:0;
  transition:transform .85s var(--ease),opacity .6s var(--ease);
}
.in .tw i,.tw.in i{transform:none;opacity:1}

/* 🐞 Nella firma le parole NON si mascherano. Il rettangolo di overflow:hidden, sopra
   il gradiente della sezione, si staccava come un contorno chiaro attorno a ogni parola:
   il layer della finestrella campiona il gradiente per conto suo e il bordo si vede.
   Qui le parole salgono di poco e appaiono, senza finestrella: l'effetto è più sobrio e
   soprattutto pulito. Altrove la maschera resta, perché il fondo lì è a tinta unita. */
.firma .tw{overflow:visible;padding-bottom:0}
.firma .tw i{transform:translateY(26%)}
.firma .in .tw i,.firma .tw.in i{transform:none}

/* ═══ CARD DEI SERVIZI CON IMMAGINE ═══ */
.fn__img{
  position:relative;margin:-2rem -1.9rem 1.4rem;
  aspect-ratio:64/29;overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:#0A2621;
}
.fn__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);
  transition:transform 1.1s var(--ease);
}
.fn:hover .fn__img img{transform:scale(1.12)}
.fn__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,33,29,0) 45%, rgba(7,33,29,.55) 100%);
}

/* ═══ BANDA SCORREVOLE ═══
   Scorre sempre, anche col mouse sopra: è una regola di casa. */
.banda{
  background:var(--ink);color:#fff;padding:1.15rem 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.banda__pista{display:flex;width:max-content;animation:scorri 38s linear infinite}
.banda__g{display:flex;align-items:center;flex:none}
.banda__g span{
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.05rem,2vw,1.5rem);
  font-weight:400;letter-spacing:-.01em;white-space:nowrap;padding:0 1.6rem;
}
.banda__g b{color:var(--brass-l);font-weight:400;padding:0 .2rem}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══ FASCIA LARGA CON IMMAGINE (parallasse leggera) ═══ */
.fascia{position:relative;overflow:hidden;min-height:clamp(300px,42vw,460px);display:flex;align-items:center}
.fascia__bg{position:absolute;inset:-12% 0;z-index:0}
.fascia__bg img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.fascia::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(4,18,15,.9) 0%, rgba(4,18,15,.72) 42%, rgba(4,18,15,.25) 78%, rgba(4,18,15,.1) 100%);
}
.fascia .wrap{position:relative;z-index:2}
.fascia h2{color:#fff}
.fascia .para{color:rgba(255,255,255,.86);max-width:44ch}
.fascia .note{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.88);box-shadow:none;
}

/* ═══ CHIUSURA CON IL FILM DIETRO ═══ */
.cta{position:relative;overflow:hidden}
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.42}
.cta::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(80% 70% at 50% 50%, rgba(35,74,63,.55) 0%, rgba(20,48,41,.86) 65%, rgba(16,40,34,.96) 100%);
}
.cta .wrap{position:relative;z-index:2}

@media (max-width:860px){
  .fn__img{margin:-1.6rem -1.35rem 1.2rem;aspect-ratio:2/1}
  .fascia{min-height:auto;padding:clamp(3rem,9vw,4.5rem) 0}
  .fascia::after{background:linear-gradient(180deg, rgba(4,18,15,.82) 0%, rgba(4,18,15,.9) 100%)}
  .banda__pista{animation-duration:26s}
}
@media (prefers-reduced-motion:reduce){
  .tw i{transform:none;opacity:1;transition:none}
  .banda__pista{animation:none}
  .fn__img img,.fascia__bg img{transition:none;transform:none}
}


/* ═══════════════════════════════════════════════════════════
   LA SCIA — la cucitura fra il verde e l'avorio È l'effetto
   Qui prima scendeva un dente. Al suo posto c'è la luce da cui, nel film, il dente
   nasce: una fascia sul confine, un punto che la percorre come un raggio che scansiona,
   e le particelle che ne salgono verso lo scuro.
   Perché proprio sul confine: misurato, il fondo dell'anatomia è scuro solo fino a un
   centinaio di pixel sopra la giuntura, e più in basso è già avorio. Una luce chiara
   messa lì sotto non si vede, e messa più in alto finisce sopra il testo. Sul confine
   invece funziona da entrambe le parti — è chiara sopra lo scuro e scura sopra il chiaro.
   Nessuna immagine e nessun canvas: dodici elementi vuoti mossi solo da transform e
   opacity, quindi il costo per fotogramma è zero. Partono con .in, così non girano a
   vuoto prima di essere in schermo.
   ═══════════════════════════════════════════════════════════ */
.scia{
  position:relative;z-index:6;      /* sopra la cucitura della sezione precedente */
  height:0;margin:0 auto;
  pointer-events:none;
}
/* l'alone: largo e basso, tiene insieme le due metà */
.scia__alone{
  position:absolute;top:-108px;left:50%;
  width:min(92vw,760px);height:216px;
  transform:translate3d(-50%,0,0);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(214,247,231,.4) 0%,
    rgba(159,224,196,.2) 32%,
    rgba(120,200,170,.07) 56%,
    rgba(120,200,170,0) 76%);
}
/* la fascia sul confine: si accende al centro e si spegne ai lati */
.scia__linea{
  position:absolute;top:-62px;left:50%;
  width:min(90vw,1080px);height:2px;border-radius:2px;
  transform:translate3d(-50%,0,0) scaleX(.8);
  background:linear-gradient(90deg,
    rgba(159,224,196,0) 0%,
    rgba(190,240,215,.7) 26%,
    rgba(230,252,241,.95) 50%,
    rgba(190,240,215,.7) 74%,
    rgba(159,224,196,0) 100%);
  box-shadow:0 0 18px rgba(159,224,196,.55);
}
/* il punto che la percorre, con la sua scia */
.scia__corsa{
  position:absolute;top:-65px;left:50%;
  width:130px;height:8px;border-radius:8px;
  margin-left:-65px;
  background:linear-gradient(90deg,
    rgba(230,252,241,0) 0%,
    rgba(230,252,241,.5) 62%,
    rgba(255,255,255,.95) 100%);
  box-shadow:0 0 22px rgba(190,240,215,.9);
  opacity:0;
}
/* le particelle salgono dalla fascia verso lo scuro, dove si vedono */
.scia i{
  position:absolute;top:-64px;left:calc(50% + var(--x,0) * var(--sp,1px));
  width:5px;height:5px;border-radius:50%;
  background:#F2FBF6;
  box-shadow:0 0 12px rgba(190,240,215,.95);
  opacity:0;
}

.scia.in .scia__alone{animation:scia-alone 6.4s ease-in-out infinite}
.scia.in .scia__linea{animation:scia-linea 6.4s ease-in-out infinite}
.scia.in .scia__corsa{animation:scia-corsa 7.2s cubic-bezier(.5,0,.5,1) infinite}
.scia.in i{animation:scia-goccia var(--v,5.4s) ease-out var(--d,0s) infinite}

/* scarto orizzontale, durata e ritardo diversi per ognuna, altrimenti salgono in fila
   come un metronomo. --x è un numero puro: il passo si stringe su telefono */
.scia i:nth-child(4){--x:-118;--v:5.6s;--d:0s}
.scia i:nth-child(5){--x:74;--v:4.9s;--d:.9s}
.scia i:nth-child(6){--x:-36;--v:6.2s;--d:1.9s}
.scia i:nth-child(7){--x:148;--v:5.2s;--d:2.9s}
.scia i:nth-child(8){--x:-176;--v:5.9s;--d:.5s}
.scia i:nth-child(9){--x:18;--v:4.6s;--d:3.8s}
.scia i:nth-child(10){--x:-78;--v:6.6s;--d:2.4s}
.scia i:nth-child(11){--x:112;--v:5.4s;--d:3.4s}
.scia i:nth-child(12){--x:-148;--v:4.8s;--d:4.6s}

@keyframes scia-goccia{
  0%  {transform:translate3d(-50%,0,0) scale(.35);opacity:0}
  18% {opacity:1}
  62% {opacity:.75}
  100%{transform:translate3d(-50%,var(--su,-132px),0) scale(.9);opacity:0}
}
@keyframes scia-alone{
  0%,100%{transform:translate3d(-50%,0,0) scale(.92);opacity:.6}
  50%    {transform:translate3d(-50%,0,0) scale(1.05);opacity:1}
}
@keyframes scia-linea{
  0%,100%{transform:translate3d(-50%,0,0) scaleX(.74);opacity:.55}
  50%    {transform:translate3d(-50%,0,0) scaleX(1);opacity:1}
}
/* 🐞 La corsa si ferma a mezzo schermo MENO la sua metà, non a 46vw fissi: con quelli
   il punto usciva dal bordo di 32 px e faceva scorrere la pagina di lato su telefono —
   uno sbordo orizzontale vero, che si vedeva solo scorrendo fin qui e per questo era
   sfuggito ai controlli fatti in cima alla pagina. */
@keyframes scia-corsa{
  0%  {transform:translate3d(calc(-50vw + 70px),0,0);opacity:0}
  12% {opacity:.9}
  50% {opacity:.9}
  62% {transform:translate3d(calc(50vw - 70px),0,0);opacity:0}
  100%{transform:translate3d(calc(50vw - 70px),0,0);opacity:0}
}
@media (max-width:860px){
  /* su telefono la scena è più stretta: meno particelle e più raccolte verso il centro */
  /* l'effetto ha bisogno di una fascia libera sotto il riquadro dell'anatomia:
     senza, le particelle salgono dentro il testo */
  .anat{padding-bottom:clamp(4.4rem,11vw,5.6rem)}
  .scia i:nth-child(n+10){display:none}
  .scia__alone{width:88vw;height:180px;top:-92px}
  .scia__corsa{width:96px;margin-left:-48px;top:-44px}
  .scia__linea{top:-42px}
  /* su telefono il riquadro dell'anatomia scende quasi fino alla giuntura: le particelle
     salivano dentro il testo. Qui partono più in basso, salgono meno e stanno più strette */
  .scia i{top:-44px;--sp:.6px;--su:-84px}
}


/* ═══════════════════════════════════════════════════════════
   RIDUCI MOVIMENTO — si tolgono le animazioni, NON si cambia il sito
   Prima qui c'era una seconda versione della pagina: film smontato, momenti impilati,
   layout diverso. Risultato: chi ha quell'impostazione attiva vedeva un altro sito, e
   il cliente se n'è accorto subito — «si vede totalmente diverso».
   Ora la regola è una sola: **il sito è uno**. Si spengono le cose che si muovono DA
   SOLE — la scia, i dondolii, le dissolvenze d'ingresso — e si lascia tutto il resto,
   compreso il film, che non parte da solo: si muove solo mentre il dito scorre, e si
   ferma appena il dito si ferma.
   Sta in fondo al foglio perché a parità di specificità vince l'ultima regola scritta:
   se lo si rimette in mezzo, le media query del telefono se lo riprendono.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  /* la scia si ferma: resta la fascia accesa sul confine, senza niente che si muove */
  .scia.in .scia__alone,.scia.in .scia__linea,.scia.in .scia__corsa,.scia.in i{animation:none}
  .scia__corsa,.scia i{display:none}
  .scia__linea{transform:translate3d(-50%,0,0) scaleX(1);opacity:.9}
  .scia__alone{transform:translate3d(-50%,0,0) scale(1);opacity:.85}
  /* i blocchi ci sono già, senza scivolare dentro */
  .entra{opacity:1;transform:none;transition:none}
  .arch__ring circle,.arch__tooth path,.arch__mini path{animation:none;stroke-dashoffset:0}
  .hero__badge{animation:none}
  .film__hint span{animation:none}
  .btn:hover,.card:hover,.form__btn:hover{transform:none}
  .form__btn:hover img{transform:none}
  .lente,.lente__f{transition:none}
}