/* ═══════════════════════════════════════════════════════════════════════
   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}

/* ── LA FASCIA DELL'AVVISO — la accende Lalla dal pannello ── */
.avviso{background:var(--nero);color:#fff;font-size:.92rem;font-weight:700;text-align:center}
.avviso p{margin:0;padding:11px 0;line-height:1.35}
.avviso .guscio{padding-inline:var(--lato)}

/* ─────────────────────────── 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 clamp(52px,6vh,74px);
  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:132px;height:132px;bottom:-34px;left:-52px;animation-duration:34s}
.fiore--2{width:76px; height:76px; top:16%;  right:-30px;animation-duration:23s;animation-name:giraAlContrario}

@media (min-width:900px){
  .fiore--1{width:186px;height:186px;bottom:-98px;left:-88px}
  .fiore--2{width:96px;height:96px;top:11%;right:-38px}
}

/* ── IL CORPO — due colonne: le parole e una foto vera ──
   🔴 Il marchio NON si ripete qui: sta nell'intestazione, appiccicata in alto,
   su bianco, dove si legge. Ripeterlo grande sulla fascia rosa lo faceva
   sparire, e lo faceva vedere due volte a dieci centimetri di distanza. */
.apertura__dentro{
  position:relative;z-index:5;
  padding-top:calc(var(--tenda-madre) + clamp(18px,3.2vh,44px));
  max-width:var(--guscio);   /* allineata a tutte le altre sezioni */
  display:grid;gap:clamp(30px,4.6vw,56px);
  align-items:center;
}
@media (min-width:900px){
  .apertura__dentro{grid-template-columns:1.04fr .96fr}
  .apertura__foto{width:min(100%,430px)}
}

/* 🐞 L'occhiello era rosa chiaro e cadeva sulla fascia rosa: invisibile,
   esattamente l'errore che aveva il marchio. Qui si porta il suo fondo. */
.apertura .occhiello{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 20px;color:var(--fucsia);
  background:#fff;border:1.5px solid var(--rosa-tenue);
  padding:8px 15px;border-radius:999px;
  font-size:.75rem;letter-spacing:.14em;
  box-shadow:0 4px 14px rgba(140,0,76,.10);
}
.apertura .occhiello .bollo{
  width:15px;height:15px;flex:0 0 auto;
  --petalo:none;--filo:var(--fucsia);--filo-spessore:7;--bottone:var(--fucsia);
}

/* 🐞 A due colonne il titolo alla misura piena prendeva CINQUE righe e
   schiacciava tutto il resto. Qui la colonna e' meta' pagina: scende. */
.apertura .titolone{font-size:clamp(1.82rem,5.3vw,3.3rem)}

.apertura__testo{
  margin:18px 0 0;max-width:44ch;font-size:1.05em;color:#4A2038;
}
.apertura__testo strong{color:var(--fucsia)}

/* i tre fatti: quello che uno vuole sapere prima ancora di scorrere */
.apertura .bottoniera{margin-top:26px}
.apertura__fatti{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px;
}
.apertura__fatti li{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.76rem;font-weight:700;color:#5A2842;
  background:#fff;border:1.5px solid var(--rosa-tenue);
  padding:7px 12px;border-radius:999px;
  box-shadow:0 2px 0 rgba(229,0,126,.07);
}
.apertura__fatti svg{width:15px;height:15px;color:var(--fucsia);flex:0 0 auto}

/* ── LA FOTO — inquadrata come un capo appoggiato sul banco ── */
.apertura__foto{
  position:relative;margin:0;justify-self:center;
  width:min(100%,384px);
}
.apertura__foto img{
  position:relative;z-index:1;
  width:100%;height:auto;display:block;
  border-radius:18px;
  box-shadow:0 20px 44px rgba(140,0,76,.22);
}
/* la cornice sfalsata: due fogli sovrapposti, come i capi piegati */
.apertura__foto::after{
  content:"";position:absolute;z-index:0;
  top:16px;right:-16px;bottom:-16px;left:16px;
  border:2.5px solid var(--fucsia);border-radius:18px;
}

.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%);
}

/* ═══════════════ L'OFFERTA DEL MOMENTO ═══════════════
   La accende e la spegne Lalla dal pannello. Spenta, la sezione non
   esiste proprio: niente riquadro vuoto, niente spazio sprecato. */
.offerta{
  background:linear-gradient(150deg,var(--fucsia) 0%, #A8005E 100%);
  color:#fff;text-align:center;
  padding:clamp(34px,5.5vw,58px) 0;
}
.offerta__eti{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;opacity:.82;
}
.offerta__bollo{
  width:17px;height:17px;flex:0 0 auto;
  --petalo:#fff;--filo:none;--filo-spessore:0;--bottone:var(--fucsia);
}
.offerta__titolo{
  margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.55rem,5.2vw,2.9rem);text-wrap:balance;
}
.offerta__testo{margin:14px auto 0;max-width:46ch;font-size:1.02em;opacity:.92}
.offerta__fino{
  margin:16px 0 0;display:inline-block;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.42);
  font-weight:800;font-size:.88rem;
}
.offerta__azione{margin:22px 0 0}
/* 🐞 Il pulsante fucsia sul fondo fucsia sparirebbe, come nel finale. */
.offerta .btn--pieno{background:#fff;color:var(--fucsia)}
.offerta .btn--pieno:hover{background:var(--nero);color:#fff}

/* ═══════════════ LA BACHECA — le locandine ═══════════════
   Mai una locandina sola in mezzo a una riga: se ce n'e' una si stringe
   e sta al centro, da due in su vanno in griglia. */
.locandine{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
@media (min-width:760px){ .locandine{grid-template-columns:repeat(3,1fr);gap:20px} }
@media (min-width:1040px){ .locandine[data-quante="4"]{grid-template-columns:repeat(4,1fr)} }
.locandine[data-quante="1"]{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
.locandina{
  margin:0;border-radius:16px;overflow:hidden;background:#fff;
  border:2px solid var(--rosa-tenue);
  box-shadow:0 12px 30px rgba(229,0,126,.12);
}
.locandina img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.locandina figcaption{
  padding:12px 14px;font-size:.88rem;font-weight:700;line-height:1.35;
}
.locandina figcaption:empty{display:none}

/* ═══════════════ IL PREZZO SUL CAPO ═══════════════ */
.capo__nome{display:block}
.capo__soldi{display:flex;align-items:baseline;gap:9px;margin-top:5px;flex-wrap:wrap}
.capo__prezzo{font-size:1.06rem;font-weight:800;letter-spacing:-.01em}
.capo__prima{opacity:.7;text-decoration:line-through;font-weight:600;font-size:.88rem}
.capo__taglie{display:block;margin-top:4px;font-weight:600;font-size:.78rem;opacity:.82}
/* il bollino dello sconto, in alto a sinistra sulla foto */
.capo__sconto{
  position:absolute;top:10px;left:10px;z-index:2;
  background:var(--fucsia);color:#fff;
  padding:6px 11px;border-radius:999px;
  font-weight:800;font-size:.82rem;letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(140,0,76,.34);
}
/* esaurito: si vede ancora il capo, ma non si prende in giro nessuno */
.capo--esaurito img{filter:grayscale(.85) brightness(.82)}
.capo__esaurito{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  background:rgba(20,16,20,.86);color:#fff;
  padding:9px 18px;border-radius:999px;
  font-weight:800;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;
}

/* ═══════════════════ LE SEZIONI, UNA DOPO L'ALTRA ═══════════════════ */
.carte{position:relative}

.carta{
  position:relative;
  overflow:hidden;
}
.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}

/* 🔴 NIENTE CARTE INCOLLATE — tolte il 15/09, su richiesta.
   Prima le sezioni si sovrapponevano: quella che saliva copriva quella sotto e
   la sua mantovana la tagliava a meta'. Sembrava una tendina che si alza.
   Adesso le sezioni scorrono una dietro l'altra, normali: ogni mantovana sta in
   cima ALLA SUA sezione e non tocca mai il contenuto di un'altra. */
@media (min-width:900px){
  .carta .carta__dentro,
  .carta .carta__dentro--pieno{padding-block:clamp(58px,6.4vw,90px)}
}

/* 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} }
/* ── LA VETRINA — i capi veri. Mai uno solo per riga: due su telefono, due su
   computer, e non piu' grandi della loro risoluzione vera. ── */
.vetrina{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:30px}
@media (min-width:760px){ .vetrina{gap:20px} }
/* Il numero di foto lo decide Lalla dal pannello: la griglia deve reggere
   qualunque conto, e non lasciare MAI un capo solo in mezzo a una riga. */
.vetrina[data-quante="1"]{grid-template-columns:1fr;max-width:420px}
.vetrina[data-quante="3"]{grid-template-columns:repeat(2,1fr)}
.vetrina[data-quante="3"] .capo:first-child{grid-column:1 / -1;max-height:none}
.vetrina[data-quante="3"] .capo:first-child img{aspect-ratio:4/3}
.vetrina[data-quante="tante"]{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){
  .vetrina[data-quante="tante"]{grid-template-columns:repeat(3,1fr)}
  .vetrina[data-quante="3"]{grid-template-columns:repeat(3,1fr)}
  .vetrina[data-quante="3"] .capo:first-child{grid-column:auto}
  .vetrina[data-quante="3"] .capo:first-child img{aspect-ratio:3/4}
  .vetrina[data-quante="4"]{grid-template-columns:repeat(2,1fr);max-width:720px}
  .vetrina[data-quante="5"],.vetrina[data-quante="6"]{grid-template-columns:repeat(3,1fr)}
  .vetrina[data-quante="tante"]{grid-template-columns:repeat(4,1fr)}
}
.capo{margin:0;position:relative;border-radius:18px;overflow:hidden;
  background:var(--rosa-tenue);box-shadow:0 12px 30px rgba(20,16,20,.22)}
.capo img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.capo figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 14px 12px;
  background:linear-gradient(180deg, rgba(20,16,20,0), rgba(20,16,20,.82));
  color:#fff;font-size:.83rem;font-weight:700;line-height:1.3;
}
.vetrina__intro{margin:22px 0 0;max-width:46ch}
/* ~~.carta__dentro--vetrina~~ — le due colonne sono cadute il 15/09: la
   cliente ha chiesto «piu' spazio ai vestiti», e la vetrina adesso prende
   tutta la larghezza della sezione. */
.vetrina__coda{text-align:center;margin-top:34px}

/* ═══ LA PROMESSA SULLE TAGLIE — il blocco che deve leggersi per primo ═══ */
.promessa{
  position:relative;margin:30px 0 0;
  padding:clamp(24px,5vw,38px) clamp(20px,4.5vw,34px);
  border-radius:24px;
  background:linear-gradient(160deg,#fff,var(--nebbia));
  border:2px solid var(--rosa-tenue);
  box-shadow:0 16px 38px rgba(229,0,126,.10);
}
.promessa__segno{
  position:absolute;top:-20px;right:18px;width:54px;height:54px;
  --petalo:#fff;--filo:#E5007E;--filo-spessore:4;--bottone:#E5007E;
  filter:drop-shadow(0 3px 7px rgba(229,0,126,.2));
}
.promessa__grande{
  margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.5rem,5.4vw,2.3rem);text-wrap:balance;
}
.promessa__grande em{font-style:normal;color:var(--fucsia)}
.promessa__piccola{margin:12px 0 0;max-width:52ch}

.taglie{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0;padding:0}
.taglie li{
  padding:9px 16px;border-radius:999px;
  border:2px solid var(--fucsia);color:var(--fucsia);
  font-weight:800;font-size:.88rem;background:#fff;
}

/* ═══ LO SCHEMA — tre riquadri, un segno ciascuno ═══ */
.schema{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:820px){ .schema{grid-template-columns:repeat(3,1fr);gap:18px} }
.schema li{
  position:relative;background:#fff;border:2px solid var(--rosa-tenue);
  border-radius:18px;padding:22px 20px 20px;
}
.schema__segno{
  width:38px;height:38px;display:block;margin-bottom:12px;color:var(--fucsia);
  --petalo:none;--filo:#E5007E;--filo-spessore:6;--bottone:#E5007E;
}
.schema h3{
  margin:0 0 6px;font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:1.05rem;
}
.schema p{margin:0;font-size:.95rem;line-height:1.5;opacity:.85}

/* lo stesso schema, sulle carte scure */
.schema--scuro{grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:820px){ .schema--scuro{grid-template-columns:repeat(4,1fr);gap:16px} }
.schema--scuro li{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,158,207,.28);
}
.schema--scuro .schema__segno{--filo:#FF9ECF;--bottone:#FF9ECF;color:var(--rosa)}
.schema--scuro h3{color:#fff}
.schema--scuro p{color:#F0E3EA;opacity:.8;font-size:.88rem}
.nota-chiara{margin-top:20px;opacity:.85}

/* ═══ GLI STESSI BLOCCHI, MA SULLE CARTE SCURE ═══
   Il catalogo e «come funziona» adesso sono neri: i capi e i numeri
   staccano di piu', e la pagina alterna invece di essere tutta chiara. */
.promessa--scura{
  background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  border-color:rgba(255,158,207,.30);
  box-shadow:none;
}
.promessa--scura .promessa__grande{color:#fff}
.promessa--scura .promessa__grande em{color:var(--rosa)}
.promessa--scura .promessa__piccola{color:#F0E3EA;opacity:.88}
.promessa--scura .promessa__segno{--petalo:var(--nero);--filo:#FF9ECF;--bottone:#FF9ECF}
.taglie--scure li{background:transparent;border-color:var(--rosa);color:var(--rosa)}

/* tre riquadri: su telefono uno sotto l'altro, che a due ne resta uno solo in riga */
.schema--tre{grid-template-columns:1fr}
@media (min-width:820px){ .schema--tre{grid-template-columns:repeat(3,1fr)} }

/* i quattro passaggi, sul nero */
.carta--scura .passi li{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,158,207,.28);
}
.carta--scura .nota-chiara{color:#F0E3EA}

/* il sottotitolo dentro una sezione, quando ne contiene due */
.sotto-sezione{
  margin:44px 0 0;font-size:.74rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;color:var(--fucsia);
}
.carta--scura .sotto-sezione{color:var(--rosa)}

/* ═══ LA VETRINA GRANDE — «piu' spazio ai vestiti» ═══
   Non e' piu' incastrata in una colonna: prende tutta la sezione, e i capi
   si distribuiscono sulla riga invece di ammucchiarsi a sinistra. */
.vetrina--grande{margin-top:34px;gap:14px;max-width:none}
@media (min-width:760px){ .vetrina--grande{gap:20px} }
@media (min-width:900px){
  .vetrina--grande[data-quante="2"]{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
  .vetrina--grande[data-quante="3"]{grid-template-columns:repeat(3,1fr);max-width:none}
  .vetrina--grande[data-quante="4"]{grid-template-columns:repeat(4,1fr);max-width:none}
  .vetrina--grande[data-quante="5"],
  .vetrina--grande[data-quante="6"]{grid-template-columns:repeat(3,1fr)}
  .vetrina--grande[data-quante="tante"]{grid-template-columns:repeat(4,1fr)}
}
/* con una foto sola non la si gonfia a tutta pagina */
.vetrina--grande[data-quante="1"]{max-width:380px;margin-inline:auto}

/* 🔴 CINQUE CAPI — dispari, e in due colonne l'ultimo resterebbe solo in riga.
   Su telefono il primo prende tutta la larghezza (e fa da vetrina vera),
   gli altri quattro si mettono in due per riga: nessuno resta spaiato. */
.vetrina--grande[data-quante="5"] .capo:first-child{grid-column:1 / -1}
@media (min-width:760px){
  .vetrina--grande[data-quante="5"]{grid-template-columns:repeat(3,1fr)}
  .vetrina--grande[data-quante="5"] .capo:first-child{grid-column:auto}
}
@media (min-width:1080px){
  .vetrina--grande[data-quante="5"]{grid-template-columns:repeat(5,1fr)}
}
/* 🔴 Le foto dei capi sono SCHEDE DISEGNATE, col marchio e il nome sopra.
   Sono gia' portate a 3:4 una per una: qui non si ritaglia niente. */
.vetrina--grande .capo img{object-fit:contain;background:#fff}

/* ═══ I CIRCUITI — tre schede numerate ═══ */
.circuiti{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:860px){ .circuiti{grid-template-columns:repeat(3,1fr);gap:18px} }
.circuiti li{
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;
  background:#fff;border:2px solid var(--rosa-tenue);border-radius:18px;padding:20px;
}
@media (min-width:860px){ .circuiti li{grid-template-columns:1fr;gap:10px} }
.circuiti__n{
  grid-row:span 2;width:38px;height:38px;border-radius:50%;
  background:var(--fucsia);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.05rem;
}
@media (min-width:860px){ .circuiti__n{grid-row:auto} }
.circuiti h3{margin:0;font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.02em}
.circuiti p{margin:0;font-size:.93rem;line-height:1.5;opacity:.82}

/* ═══ LE PIAZZE — con la loro faccia ═══ */
.piazze__titolo{
  margin:30px 0 12px;font-size:.74rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;color:var(--fucsia);
}
.piazze{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:760px){ .piazze{grid-template-columns:repeat(4,1fr);gap:14px} }
.piazze figure{margin:0;border-radius:16px;overflow:hidden;background:var(--rosa-tenue);
  box-shadow:0 10px 24px rgba(20,16,20,.12)}
.piazze img{width:100%;height:100%;display:block;aspect-ratio:3/4;object-fit:cover}

/* ═══ LE PASTIGLIE — i nomi delle piazze, non un paragrafo ═══ */
.pastiglie{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.pastiglie li{
  padding:8px 14px;border-radius:999px;background:#fff;
  border:1px solid var(--rosa-tenue);font-weight:700;font-size:.86rem;
}

/* ══════════════════════════ 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}

/* ── LA FOTO DEL BANCO IN PIAZZA — la carica Lalla dal pannello ── */
.banco{margin:28px 0 0;position:relative;border-radius:20px;overflow:hidden;
  box-shadow:0 16px 40px rgba(229,0,126,.16);background:var(--rosa-tenue)}
.banco img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.banco figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(180deg,rgba(20,16,20,0),rgba(20,16,20,.8));
  color:#fff;font-size:.9rem;font-weight:700;
}
.banco figcaption:empty{display:none}

/* ═══════════════════════════ 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(4,1fr);gap:20px} }

/* IL FILO — l'imbastitura che cuce un passaggio al successivo */
.passi--filo{position:relative}
.passi--filo li{position:relative;z-index:1}
.passi--filo li:not(:last-child)::after{
  content:"";position:absolute;left:41px;top:100%;height:14px;width:2px;
  background:repeating-linear-gradient(180deg,var(--fucsia) 0 5px,transparent 5px 10px);
}
@media (min-width:860px){
  .passi--filo li:not(:last-child)::after{
    left:auto;right:-20px;top:42px;width:20px;height:2px;
    background:repeating-linear-gradient(90deg,var(--fucsia) 0 5px,transparent 5px 10px);
  }
}
.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--scheda{
  border:2px solid var(--rosa-tenue);border-radius:16px;
  background:#fff;padding:2px 18px;margin-bottom:10px;
  transition:border-color .2s ease;
}
.dom--scheda[open]{border-color:var(--fucsia)}
.dom--scheda summary{padding:16px 40px 16px 0}
.dom--scheda summary::after{right:2px}
.dom--scheda p{margin:0 0 16px}
.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{animation:none !important}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}