/* ═══════════════════════════════════════════════════════════════════════
   LALLA CHIC — «IL BANCO CHE VIENE DA TE»
   Scheletro 3 · Le carte impilate · Firma: la mantovana che respira
   Zero librerie, zero font di terze parti, zero richieste esterne.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --fucsia:#E5007E;
  --fucsia-cupo:#B00062;
  --rosa:#FF9ECF;
  --rosa-tenue:#FFD9EC;
  --nebbia:#FFF4F9;
  --nero:#141014;
  --nero-morbido:#2A222A;
  --bianco:#FFFFFF;

  --guscio:1160px;
  --lato:20px;
  --raggio:26px;
  --tenda-h:56px;
  --tenda-madre:clamp(68px,17vw,98px);

  --t-titolo:clamp(1.78rem,6.8vw,4.3rem);
  --t-titolone:clamp(1.88rem,6.6vw,4.3rem); /* sotto: sbordava a 375 · sopra: mangiava lo schermo a 1280 */
  --t-testo:clamp(1.02rem,2.6vw,1.19rem);

  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}

body{
  margin:0;
  background:var(--nero);
  color:var(--nero);
  font-family:var(--ui);
  font-size:var(--t-testo);
  line-height:1.62;
  overflow-x:hidden;         /* nessuno scorrimento laterale, mai */
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

::selection{background:var(--fucsia);color:#fff}

:focus-visible{
  outline:3px solid var(--fucsia);
  outline-offset:3px;
  border-radius:6px;
}

.salta{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--fucsia);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;
  text-decoration:none;font-weight:700;
}
.salta:focus{left:0}

.guscio{
  width:100%;
  max-width:var(--guscio);
  margin-inline:auto;
  padding-inline:var(--lato);
}
.guscio--stretto{max-width:760px}

/* ─────────────────────────── INTESTAZIONE ───────────────────────────
   Fondo BIANCO obbligato: il logo è uno screenshot senza trasparenza. */
.testa{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--lato);
  background:var(--bianco);
  border-bottom:1px solid var(--rosa-tenue);
}
.testa__marchio{display:block;flex:0 0 auto;line-height:0}
.testa__marchio img{width:clamp(150px,42vw,230px);height:auto}
.testa__nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.testa__nav a{
  display:inline-flex;align-items:center;min-height:44px;   /* 🐞 area tattile */
  font-size:.83rem;font-weight:700;letter-spacing:.02em;text-decoration:none;
  padding:8px 14px;border-radius:999px;color:var(--nero);
  transition:background .18s ease,color .18s ease;
}
.testa__nav a:hover{background:var(--fucsia);color:#fff}
@media (max-width:430px){ .testa__nav a:last-child{display:none} }

/* ═════════════════════════════ TIPOGRAFIA ═════════════════════════════ */
.titolone,.titolo{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.033em;
  line-height:.98;
  margin:0;
  text-wrap:balance;
}
.titolone{font-size:var(--t-titolone);text-transform:uppercase;letter-spacing:-.04em}
.titolo{font-size:var(--t-titolo)}
.titolo--grande{font-size:clamp(1.95rem,7.4vw,5rem)}
.titolone em,.titolo em{font-style:normal;color:var(--fucsia)}

.etichetta{
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;
  color:var(--fucsia);margin:0 0 14px;
}
.occhiello{
  font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rosa);margin:0 0 20px;
}
.largo{max-width:62ch}
.rilievo{
  font-size:1.08em;font-weight:700;line-height:1.45;
  border-left:4px solid var(--fucsia);padding-left:16px;margin-top:26px;
}
.nota{font-size:.84rem;opacity:.62;margin-top:18px;max-width:52ch}

/* ═══════════════════════════════ PULSANTI ══════════════════════════════ */
.bottoniera{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.bottoniera--centro{justify-content:center}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 26px;
  border-radius:999px;border:2px solid transparent;
  font-family:var(--ui);font-size:1rem;font-weight:800;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .16s ease,background .2s ease,color .2s ease,border-color .2s ease;
  will-change:transform;
}
.btn--pieno{background:var(--fucsia);color:#fff}
.btn--pieno:hover{background:var(--fucsia-cupo);transform:translateY(-2px)}
.btn--vuoto{border-color:currentColor;color:var(--nero)}
.btn--vuoto:hover{background:var(--nero);color:#fff;transform:translateY(-2px)}
.btn--chiaro{color:#fff;border-color:#fff}
/* 🐞 Solo le carte SCURE vogliono il pulsante chiaro. L'apertura adesso e' chiara:
   se resta qui, «Chiedimi un consiglio» diventa bianco su rosa e sparisce. */
.carta--scura .btn--vuoto{color:#fff;border-color:rgba(255,255,255,.55)}
.carta--scura .btn--vuoto:hover{background:#fff;color:var(--nero);border-color:#fff}
.apertura .btn--vuoto{color:var(--nero);border-color:rgba(20,16,20,.45)}
.apertura .btn--vuoto:hover{background:var(--nero);color:#fff;border-color:var(--nero)}
.btn--chiaro:hover{background:#fff;color:var(--nero)}
.btn--largo{width:100%}
.btn:active{transform:translateY(0)}

/* ═══════════════ APERTURA — «SOTTO LA TENDA DEL BANCO» ═══════════════
   Niente nero: il logo del cliente ha il bianco cotto dentro e vive solo
   su fondo chiaro. Il fondo e' la tela del banco, non una pagina bianca. */
.apertura{
  position:relative;
  min-height:calc(100svh - 68px);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 0 84px;
  overflow:hidden;
  color:var(--nero);
  /* Il contenuto ha bisogno di TERRENO PULITO. Le righe della tela restano
     solo nella fascia sotto la tenda, poi si spengono: il resto e' bianco. */
  background-image:
    repeating-linear-gradient(90deg, rgba(229,0,126,.05) 0 44px, rgba(229,0,126,0) 44px 88px),
    linear-gradient(180deg, #FFE4F2 0 132px, #FFFFFF 248px, #FFFFFF 100%);
  background-repeat:no-repeat;
  background-size:100% 150px, 100% 100%;
}
/* l'ombra della tenda che cade su chi guarda */
.apertura::before{
  content:"";position:absolute;left:0;right:0;top:var(--tenda-madre);height:120px;
  background:linear-gradient(180deg, rgba(120,20,80,.16) 0%, rgba(120,20,80,0) 100%);
  pointer-events:none;z-index:2;
}
.apertura .tenda--madre{position:absolute;top:0;left:0;z-index:4;height:var(--tenda-madre)}
.tenda--madre::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;
  background:linear-gradient(180deg, rgba(176,0,98,.15), transparent);pointer-events:none}

/* il repertorio SVG sta nel documento ma non occupa spazio */
.segni{position:absolute;width:0;height:0;overflow:hidden}
/* 🐞 I selettori CSS NON entrano nell'albero ombra creato da <use>.
   Le variabili si': quindi il colore della margherita si passa da fuori. */
#margherita .petali,#margherita .cuore{
  fill:var(--petalo,#fff);
  stroke:var(--filo,none);
  stroke-width:var(--filo-spessore,0);
}
#margherita .bottone{fill:var(--bottone,#E5007E)}

/* ── LE GIRELLE ── la margherita del marchio, alla scala in cui si vede girare */
.prato{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fiore{
  position:absolute;display:block;
  animation:gira 26s linear infinite;
  will-change:transform;
  opacity:.34;
}
/* le girelle sono a CONTORNO: si vedono senza sporcare */
.fiore{--petalo:none;--filo:#E5007E;--filo-spessore:3.6;--bottone:#E5007E}
@keyframes gira{ to{transform:rotate(360deg)} }
@keyframes giraAlContrario{ to{transform:rotate(-360deg)} }

/* 🔴 Le girelle non toccano MAI il marchio ne' il titolo: misurato, la grande
   passava sopra la scritta (logo x20-231 y201-261, fiore x-53-103 y181-338).
   Stanno tutte sotto i pulsanti o nei margini laterali liberi. */
.fiore--1{width:128px;height:128px;bottom:-3%;left:-46px;animation-duration:34s}
.fiore--2{width:72px; height:72px; top:9%;  right:-24px;animation-duration:23s;animation-name:giraAlContrario}
.fiore--3{width:64px; height:64px; bottom:21%;right:-20px;animation-duration:17s;animation-name:giraAlContrario}
.fiore--4{width:92px; height:92px; bottom:-5%; right:26%;animation-duration:29s}

/* su computer c'e' spazio a destra del testo: la grande puo' salire */
@media (min-width:900px){
  .fiore--1{width:180px;height:180px;bottom:auto;top:12%;left:auto;right:4%}
  .fiore--4{width:120px;height:120px;bottom:8%;right:16%}
}

@media (max-width:560px){ .fiore--2{display:none} }

.apertura__dentro{position:relative;z-index:5;padding-top:clamp(48px,9vh,86px);max-width:920px}

/* 🔴 IL MARCHIO VA SU BIANCO. Ha il bianco cotto dentro: su fondo rosa sparisce.
   Quindi gli si costruisce la sua targa, appesa a due cordini sotto la tenda —
   che e' anche il modo in cui un'insegna sta appesa a un banco vero. */
.insegna{
  position:relative;margin:0 0 30px;line-height:0;
  display:inline-block;padding-top:30px;
  animation:dondola 6.8s ease-in-out infinite alternate;
  transform-origin:50% 0;will-change:transform;
}
.insegna__corda{
  position:absolute;top:0;width:2px;height:30px;
  background:linear-gradient(180deg,var(--fucsia),rgba(229,0,126,.35));
}
.insegna__corda--sx{left:17%}
.insegna__corda--dx{right:17%}
/* Il marchio e' stato scontornato: lo sfondo bianco e' via, le margherite
   dentro le lettere restano. Quindi niente piu' targa: vive sul fondo. */
.insegna img{
  width:clamp(196px,54vw,336px);height:auto;display:block;
  filter:drop-shadow(0 3px 7px rgba(140,0,76,.22));
}
@keyframes dondola{ from{transform:rotate(-1.4deg)} to{transform:rotate(1.4deg)} }

.titolone .riga{display:block}
.apertura__testo{
  margin:22px 0 0;max-width:46ch;font-size:1.05em;color:#4A2038;
}
.apertura__testo strong{color:var(--fucsia)}

.apertura__giu{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  width:2px;height:44px;background:rgba(229,0,126,.20);border-radius:2px;overflow:hidden;z-index:5;
}
.apertura__giu span{
  display:block;width:100%;height:16px;background:var(--fucsia);
  animation:scendi 1.9s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scendi{0%{transform:translateY(-18px)}100%{transform:translateY(46px)}}

/* ── IL RITRATTO DI LALLA ── */
.carta__dentro--ritratto{align-items:center}
@media (min-width:820px){ .carta__dentro--ritratto{grid-template-columns:.85fr 1.15fr} }
.ritratto{margin:0;position:relative;border-radius:22px;overflow:hidden;
  box-shadow:0 18px 44px rgba(229,0,126,.16);background:var(--rosa-tenue)}
.ritratto img{width:100%;height:auto;display:block}
.ritratto figcaption{
  position:absolute;left:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.94);color:var(--nero);
  padding:8px 15px 8px 11px;border-radius:999px;
  font-weight:800;font-size:.92rem;letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(20,16,20,.14);
}
.bollo{width:20px;height:20px;display:block;flex:0 0 auto;
  --petalo:#E5007E;--bottone:#fff}

/* ═══════════ LA FIRMA · LA MANTOVANA CHE RESPIRA (canvas) ═══════════
   La fascia smerlata della tenda da mercato. Ondeggia sempre, non si
   ferma mai — nemmeno col puntatore sopra. Ripiego statico più sotto. */
@media (min-width:900px){ :root{--tenda-h:74px} }

.tenda{
  position:relative;z-index:3;
  height:var(--tenda-h);
  width:100%;
  margin-bottom:-1px;
  pointer-events:none;
}
.tenda canvas{display:block;width:100%;height:100%}

/* Ripiego statico: se il canvas non parte (o si chiede meno movimento),
   resta comunque una smerlatura vera, disegnata in CSS. */
.tenda:not(.tenda--viva){
  background-image:radial-gradient(circle at 50% 0, var(--rosa) 62%, transparent 63%);
  background-size:41px var(--tenda-h);
  background-repeat:repeat-x;
  background-position:0 0;
}
.carta--scura .tenda:not(.tenda--viva){
  background-image:radial-gradient(circle at 50% 0, var(--fucsia) 62%, transparent 63%);
}

/* ═════════════════════ LE CARTE IMPILATE (scheletro 3) ═════════════════ */
.carte{position:relative}

.carta{
  position:relative;
  border-radius:var(--raggio) var(--raggio) 0 0;
  overflow:hidden;
  box-shadow:0 -22px 50px rgba(20,16,20,.28);
}
.carta__dentro,.carta__dentro--pieno{padding-block:clamp(48px,9vw,96px)}
.carta--chiara{background:var(--bianco)}
.carta--rosa{background:var(--nebbia)}
.carta--scura{background:var(--nero);color:#F3ECF0}
.carta--scura .titolo em{color:var(--rosa)}
.carta--scura .etichetta{color:var(--rosa)}
.carta--scura .btn--vuoto{color:#fff}

/* Su computer le carte si impilano davvero: una scorre sotto l'altra.
   Le carte ALTE no: non ci starebbero dentro lo schermo. */
@media (min-width:900px){
  .carta:not(.carta--alta){position:sticky;top:0;min-height:100svh;display:flex;align-items:center}
  .carta:not(.carta--alta) > .guscio{width:100%}
  .carta .tenda{position:absolute;top:0;left:0}
  .carta:not(.carta--alta) .carta__dentro,
  .carta:not(.carta--alta) .carta__dentro--pieno{padding-block:80px}
}
@media (prefers-reduced-motion:reduce){
  .carta{position:static !important;min-height:0 !important}
}

/* due colonne: testo + foto */
.carta__dentro{display:grid;gap:clamp(28px,5vw,60px)}
@media (min-width:820px){
  .carta__dentro{grid-template-columns:1.05fr .95fr;align-items:center}
}
.carta__testo p{margin:16px 0 0;max-width:54ch}

/* ══════════════ SLOT IMMAGINE — dichiarati, non rotti ══════════════
   Non abbiamo ancora nessuna foto del cliente. Questi spazi devono
   leggersi come «qui va la foto», mai come un sito che non carica. */
.slot{
  margin:0;position:relative;border-radius:18px;overflow:hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(229,0,126,.055) 0 12px, rgba(229,0,126,.11) 12px 24px);
  border:2px dashed rgba(229,0,126,.42);
  aspect-ratio:1/1;
  display:grid;place-items:center;
}
.slot--ritratto{aspect-ratio:3/4}
.slot--telefono{aspect-ratio:3/4;max-width:340px;margin-inline:auto}
.slot__segno{
  text-align:center;padding:18px;color:var(--fucsia);
  display:flex;flex-direction:column;gap:6px;
}
.slot__segno span{font-weight:800;font-size:.94rem;letter-spacing:.01em;line-height:1.3}
.slot__segno small{font-size:.74rem;opacity:.72;letter-spacing:.06em;text-transform:uppercase}
.carta--scura .slot{border-color:rgba(255,158,207,.5);
  background:repeating-linear-gradient(135deg,
    rgba(255,158,207,.07) 0 12px, rgba(255,158,207,.14) 12px 24px)}
.carta--scura .slot__segno{color:var(--rosa)}

/* griglia capi — MAI uno sotto l'altro: 2 su telefono, 4 su computer */
.griglia-capi{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:34px;
}
@media (min-width:760px){ .griglia-capi{grid-template-columns:repeat(4,1fr);gap:18px} }
/* due foto vere: restano due per riga anche su computer, cosi' non si ingrandiscono
   oltre la loro risoluzione vera (512px) e non sgranano. Mai una sola per riga. */
.griglia-capi--due{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .griglia-capi--due{grid-template-columns:repeat(2,1fr);max-width:760px} }
.capo{margin:0;border-radius:18px;overflow:hidden;background:var(--rosa-tenue);aspect-ratio:1/1}
.capo img{width:100%;height:100%;object-fit:cover;display:block}

/* ══════════════════════════ LA CITAZIONE ══════════════════════════ */
.citazione{margin:36px 0 0;padding:0}
.citazione blockquote{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.35rem,4.4vw,2.1rem);line-height:1.18;letter-spacing:-.02em;
  color:var(--fucsia);text-wrap:balance;
}
.citazione figcaption{margin-top:12px;font-size:.95rem;opacity:.7}

/* ════════════ LA COSA DA FARE · il compositore di messaggi ════════════ */
.compositore{
  margin-top:clamp(40px,6vw,66px);
  padding:clamp(22px,4.5vw,40px);
  border-radius:24px;
  background:linear-gradient(165deg,var(--nebbia),#fff);
  border:2px solid var(--rosa-tenue);
  box-shadow:0 18px 44px rgba(229,0,126,.10);
}
.compositore__titolo{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(1.3rem,4vw,1.85rem);margin:0;text-wrap:balance;
}
.compositore__sotto{margin:10px 0 26px;font-size:.96rem;opacity:.75;max-width:48ch}

.scelta{border:0;padding:0;margin:0 0 22px;min-width:0}
.scelta legend{
  padding:0;font-size:.74rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;color:var(--nero);opacity:.55;margin-bottom:11px;
}
.scelta__righe{display:flex;flex-wrap:wrap;gap:9px}

.pill{
  font-family:var(--ui);font-size:.93rem;font-weight:700;
  padding:11px 17px;min-height:44px;
  border-radius:999px;border:2px solid var(--rosa-tenue);
  background:#fff;color:var(--nero);cursor:pointer;
  transition:transform .14s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.pill:hover{border-color:var(--fucsia);transform:translateY(-1px)}
.pill[aria-pressed="true"]{background:var(--fucsia);border-color:var(--fucsia);color:#fff}

.anteprima__eti{
  display:block;font-size:.74rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;opacity:.55;margin:28px 0 9px;
}
.anteprima{
  width:100%;font-family:var(--ui);font-size:1rem;line-height:1.55;
  padding:16px 18px;border-radius:16px;border:2px solid var(--rosa-tenue);
  background:#fff;color:var(--nero);resize:vertical;min-height:112px;
}
.anteprima:focus{border-color:var(--fucsia);outline:none}

.compositore__azioni{margin-top:20px}
.compositore__nota{margin:14px 0 0;font-size:.9rem;text-align:center;opacity:.72}
.compositore__nota a{color:var(--fucsia);font-weight:700}

/* ═══════════════════════════ IL CALENDARIO ═══════════════════════════ */
.calendario{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:720px){ .calendario{grid-template-columns:repeat(2,1fr)} }
.calendario li{
  display:flex;gap:14px;align-items:baseline;
  background:#fff;border:2px solid var(--rosa-tenue);border-radius:14px;padding:14px 16px;
}
.calendario__vuoto{margin-top:30px;font-size:1.02em;max-width:52ch}
.calendario__vuoto .btn{margin-top:18px}

/* ═══════════════════════════ I TRE PASSAGGI ══════════════════════════ */
.passi{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px;counter-reset:p}
@media (min-width:860px){ .passi{grid-template-columns:repeat(3,1fr);gap:20px} }
.passi li{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--nebbia);border-radius:18px;padding:22px;
  border:2px solid var(--rosa-tenue);
}
@media (min-width:860px){ .passi li{flex-direction:column;gap:12px} }
.passi__n{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:var(--fucsia);color:#fff;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.15rem;
}
.passi p{margin:0;font-weight:600;line-height:1.45}

/* ════════════════════════════ I PAGAMENTI ════════════════════════════ */
.pagamenti{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:11px}
@media (min-width:760px){ .pagamenti{grid-template-columns:repeat(2,1fr);gap:14px} }
.pagamenti li{
  display:flex;gap:14px;align-items:center;
  border:2px solid rgba(255,158,207,.3);border-radius:14px;padding:15px 17px;
  font-weight:600;
}
.pagamenti__i{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  background:var(--fucsia);color:#fff;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.98rem;
}

/* ═══════════════════════════ DOMANDE FREQUENTI ═══════════════════════ */
.dom{
  border-bottom:1px solid var(--rosa-tenue);
  padding:6px 0;
}
.dom summary{
  cursor:pointer;list-style:none;
  padding:18px 40px 18px 0;position:relative;
  font-weight:800;font-size:1.02em;line-height:1.4;
}
.dom summary::-webkit-details-marker{display:none}
.dom summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:3px solid var(--fucsia);border-bottom:3px solid var(--fucsia);
  transform:rotate(45deg);transition:transform .22s ease;
}
.dom[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.dom p{margin:0 0 20px;max-width:62ch;opacity:.88}

/* ══════════════════════════════ FINALE ═══════════════════════════════ */
.finale{
  background:linear-gradient(160deg,var(--fucsia) 0%, #8E0052 100%);
  color:#fff;text-align:center;
  padding:clamp(66px,11vw,128px) 0;
}
/* 🐞 FIX: il pulsante fucsia sul fondo fucsia spariva. */
.finale .btn--pieno{background:#fff;color:var(--fucsia)}
.finale .btn--pieno:hover{background:var(--nero);color:#fff}
.titolone--fine{font-size:clamp(1.9rem,6.6vw,4rem);text-transform:none;letter-spacing:-.03em}
.titolone--fine em{color:#fff;opacity:.72;font-style:normal}
.social{margin:34px 0 0;font-weight:700;letter-spacing:.04em}
.social a{color:#fff;text-underline-offset:5px}
.social span{margin:0 10px;opacity:.5}

/* ═══════════════════════════════ PIEDE ═══════════════════════════════ */
.pie{background:var(--nero);color:#CFC3CB;padding:52px 0 40px;font-size:.9rem}
.pie__dentro{display:grid;gap:18px}
@media (min-width:820px){ .pie__dentro{grid-template-columns:1fr auto;align-items:end} }
.pie__nome{margin:0;font-family:var(--display);font-weight:800;font-size:1.12rem;color:#fff;letter-spacing:-.02em}
.pie__nome span{color:var(--fucsia)}
.pie__dati{margin:0;line-height:1.75}
.pie__dati a{color:var(--rosa)}
.pie__firma{margin:0;opacity:.62}
.pie__firma a{color:var(--rosa)}

/* ════════════ TECNICA 2 · REVEAL GUIDATO DALLO SCROLL ════════════
   Continuo, non acceso/spento. Con @supports, e fuori resta visibile. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .etichetta,.titolo,.titolone--fine,.largo,.rilievo,.citazione,
    .griglia-capi,.passi,.pagamenti,.compositore,.calendario__vuoto,
    .carta__testo p,.slot{
      animation:sali linear both;
      animation-timeline:view();
      /* 🐞 FIX: con «cover» il testo restava trasparente pur essendo gia' a schermo.
         Con «entry» la rivelazione finisce quando l'elemento e' entrato: mai
         contenuto a video e illeggibile. */
      animation-range:entry 0% entry 58%;
    }
  }
}
@keyframes sali{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .apertura__giu span{animation:none}
  .fiore,.insegna{animation:none !important}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}