/* ============================================================
   LEUCOTEO — sistema visivo
   Quattro segni, ripetuti con disciplina:
   le due metà · ambra/acquamarina · l'angolo documentale · la frattura.
   Tutto il resto è superficie, spazio e luce.
   ============================================================ */

:root{
  /* --- le due parti --- */
  --cre:#FFB020;  --cre-rgb:255,176,32;   --cre-hi:#FFC759;  --cre-deep:#2A1802;
  --bra:#12C4AC;  --bra-rgb:18,196,172;   --bra-hi:#3AE7CD;  --bra-deep:#04231F;
  --su-cre:#1A0F00;  --su-bra:#00201C;

  /* --- i piani: il fondo non è mai un nero solo --- */
  --fondo:#08090A;
  --su-1:#0D0F10;
  --su-2:#131617;
  --su-3:#1A1D1F;
  --velo:rgba(255,255,255,.045);
  --velo-2:rgba(255,255,255,.07);

  /* --- bordi: si vedono solo se li cerchi --- */
  --bo:rgba(255,255,255,.075);
  --bo-2:rgba(255,255,255,.12);
  --bo-3:rgba(255,255,255,.18);
  --lin:rgba(255,255,255,.075);
  --lin-2:rgba(255,255,255,.12);
  --lin-3:rgba(255,255,255,.18);

  /* --- testo: ogni livello passa AA sul fondo --- */
  --bia:#FFFFFF;
  --gri-2:#D5D9DC;
  --gri:#A7AEB2;
  --gri-3:#8B9298;

  /* --- stato --- */
  --ok:#3AE7CD; --att:#FFB020; --male:#FF6B58; --neutro:#A7AEB2;

  /* --- raggi --- */
  --r-1:10px; --r-2:14px; --r-3:20px; --r-4:26px; --r-p:999px;

  /* --- ombre: morbide, mai nette --- */
  --om-1:0 1px 2px rgba(0,0,0,.4);
  --om-2:0 4px 16px rgba(0,0,0,.34), 0 1px 2px rgba(0,0,0,.4);
  --om-3:0 18px 48px rgba(0,0,0,.46), 0 2px 8px rgba(0,0,0,.34);
  --om-4:0 32px 80px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
  /* il filo di luce in cima a una superficie */
  --filo:inset 0 1px 0 rgba(255,255,255,.06);

  /* --- tracking: misurato, mai spettacolare --- */
  --tr-xl:-.032em; --tr-l:-.022em; --tr-s:-.011em; --tr-uc:.075em;

  /* --- movimento: curve prese dal comportamento iOS ---
     std   = decelerazione pura, quello che usa quasi tutto
     sheet = l'apertura di un foglio modale, parte veloce e si posa
     molla = un piccolo scavalco, solo su cose che "arrivano"
     esci  = accelerazione, per ciò che se ne va                      */
  --e-std:cubic-bezier(.32,.72,0,1);
  --e-sheet:cubic-bezier(.32,.72,0,1);
  --e-molla:cubic-bezier(.34,1.42,.5,1);
  --e-esci:cubic-bezier(.4,0,1,1);
  --e-morbida:cubic-bezier(.4,0,.2,1);
  --curva:var(--e-std);
  --molla:var(--e-molla);

  --t-istante:.12s;   /* un feedback che deve sembrare immediato */
  --t-tocco:.2s;      /* risposta a una pressione */
  --t-entrata:.42s;   /* qualcosa che arriva o se ne va */
  --t-foglio:.5s;     /* un pannello che sale */
  --t-scena:.9s;      /* un cambio di stato importante */
  --sfalsa:55ms;      /* il ritardo fra un elemento e il successivo */
  --aperto:5px;

  /* --- misure --- */
  --fianco:280px;
  --fianco-min:96px;
  --fianco-orlo:14px;
  --dock-h:66px;
  --dock-gap:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --pollice:calc(var(--dock-h) + var(--dock-gap) * 2 + var(--safe-b));
  --z-fondo:0; --z-corpo:1; --z-sticky:30; --z-fianco:40;
  --z-velo:60; --z-foglio:70; --z-grana:81; --z-avviso:90;
}

/* il lato che stai guardando decide l'accento */
[data-lato="azienda"]{ --acc:var(--bra); --acc-hi:var(--bra-hi); --acc-rgb:var(--bra-rgb); --su-acc:var(--su-bra); --acc-deep:var(--bra-deep); }
[data-lato="creator"]{ --acc:var(--cre); --acc-hi:var(--cre-hi); --acc-rgb:var(--cre-rgb); --su-acc:var(--su-cre); --acc-deep:var(--cre-deep); }
:root{ --acc:var(--cre); --acc-hi:var(--cre-hi); --acc-rgb:var(--cre-rgb); --su-acc:var(--su-cre); --acc-deep:var(--cre-deep); }

/* Il colore dell'altra metà. Il numero di una collaborazione non
   appartiene a chi la guarda: appartiene alle due parti insieme, e
   portarlo nel colore opposto lo dice senza scriverlo. */
[data-lato="creator"]{ --contro:var(--bra-hi); }
[data-lato="azienda"]{ --contro:var(--cre); }
:root{ --contro:var(--bra-hi); }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* L'interfaccia è scura e basta: senza dirlo, il browser disegna
   barre di scorrimento, maniglie e controlli nativi in chiaro, e in
   mezzo a una pagina nera sembrano un errore. */
html{color-scheme:dark}

body{
  margin:0;background:var(--fondo);color:var(--bia);
  position:relative;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.6;letter-spacing:var(--tr-s);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  overflow-x:hidden;
}
/* Le barre di scorrimento: sottili, dello stesso grigio dei bordi, e
   visibili solo quando servono. Su Firefox bastano due proprietà; su
   WebKit si disegnano a mano. */
*{scrollbar-width:thin;scrollbar-color:var(--bo-3, rgba(255,255,255,.18)) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;
  border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);
  border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation}
img,svg,video{max-width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
::selection{background:rgba(var(--acc-rgb),.26)}

/* ============================================================
   TIPOGRAFIA
   Una sola famiglia. La gerarchia viene da peso, misura e spazio.
   Il monospace è un dettaglio, non la voce narrante.
   ============================================================ */
.disp{font-weight:800;letter-spacing:var(--tr-xl);text-transform:lowercase;line-height:1.02}
.disp-m{font-weight:700;letter-spacing:var(--tr-l);text-transform:lowercase;line-height:1.14}
.uc{font-size:12px;font-weight:600;letter-spacing:var(--tr-uc);text-transform:uppercase;color:var(--gri-3)}
/* Niente monospace. Serviva a incolonnare le cifre, ma quello lo fa
   già font-variant-numeric: tabular-nums con il carattere del sito.
   Un font da terminale, con lo zero sbarrato, faceva sembrare un IBAN
   un output di console. */
.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em;
  font-feature-settings:"cv02","cv03","cv04","cv11","ss01"}
.cifra{font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.sm{font-size:14px} .xs{font-size:13px}
.gri{color:var(--gri)} .gri2{color:var(--gri-2)}
.acc{color:var(--acc)} .verde{color:var(--bra-hi)} .ambra{color:var(--cre)}

/* Il logotipo: leuc + le due metà + teo.
   Il segno del marchio sostituisce la o centrale, quindi vive qui e non
   nelle singole pagine: se lo si copia, prima o poi una copia si perde. */
.marchio-w{display:inline-flex;align-items:baseline;font-family:Poppins,Inter,sans-serif;
  font-weight:600;letter-spacing:-.028em;text-transform:lowercase;line-height:1}
.marchio-w .o{position:relative;top:.008em;margin:0 .012em;width:.62em;height:.62em}
.o{display:inline-block;position:relative;border-radius:50%;overflow:hidden;flex:none;
  vertical-align:baseline}
.o::before,.o::after{content:"";position:absolute;top:0;bottom:0;width:50%}
.o::before{left:0;background:var(--cre);border-radius:99px 0 0 99px}
.o::after{right:0;background:var(--bra-hi);border-radius:0 99px 99px 0}

/* ============================================================
   IMPIANTO
   ============================================================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative}
.riga{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.riga.tra{justify-content:space-between}
.pila{display:flex;flex-direction:column}
.crescita{flex:1}
.griglia{display:grid;gap:16px}

/* SEGNO 4 · LA COLONNATURA — struttura, non decorazione.
   Si nota solo dopo aver guardato la pagina. */
.colonne{
  position:fixed;inset:0;z-index:var(--z-fondo);pointer-events:none;
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(6,1fr);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 62%,transparent 96%);
          mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 62%,transparent 96%);
}
.colonne span{border-left:1px solid rgba(255,255,255,.017)}
.colonne span:last-child{border-right:1px solid rgba(255,255,255,.017)}

/* ============================================================
   LA SCENA — il fondo non è nero, è una stanza poco illuminata
   Due sorgenti fuori campo: ambra a sinistra, acquamarina a destra.
   Si sfiorano al centro e si spengono verso i bordi.

   Nota di costo: niente filter:blur() e niente animazione su questo
   strato. È grande quanto la finestra e fisso: sfocarlo o muoverlo
   obbliga il browser a ridisegnare tutto lo schermo a ogni fotogramma.
   I gradienti radiali sono già morbidi da soli.
   ============================================================ */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 46% at 10% 0%,   rgba(255,176,32,.20) 0%,
                    rgba(255,176,32,.09) 38%, transparent 72%),
    radial-gradient(54% 44% at 94% 8%,   rgba(18,196,172,.16) 0%,
                    rgba(18,196,172,.07) 40%, transparent 74%),
    radial-gradient(70% 50% at 68% 100%, rgba(255,176,32,.14) 0%,
                    rgba(255,176,32,.06) 42%, transparent 72%),
    radial-gradient(48% 40% at 0% 76%,   rgba(18,196,172,.10) 0%, transparent 74%);
}
/* la vignettatura tiene lo sguardo al centro e spegne gli angoli */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(116% 90% at 50% 40%, transparent 30%,
              rgba(0,0,0,.4) 74%, rgba(0,0,0,.64) 100%);
}
/* il lato che si guarda scalda la stanza dalla sua parte */
body[data-lato="azienda"]::before{
  background:
    radial-gradient(58% 46% at 10% 0%,   rgba(18,196,172,.19) 0%,
                    rgba(18,196,172,.08) 38%, transparent 72%),
    radial-gradient(54% 44% at 94% 8%,   rgba(255,176,32,.12) 0%,
                    rgba(255,176,32,.05) 40%, transparent 74%),
    radial-gradient(70% 50% at 68% 100%, rgba(18,196,172,.14) 0%,
                    rgba(18,196,172,.06) 42%, transparent 72%),
    radial-gradient(48% 40% at 0% 76%,   rgba(255,176,32,.08) 0%, transparent 74%);
}

/* La grana c'era, ed è stata tolta: a opacità .028 con mix-blend-mode
   su uno strato fisso grande quanto la finestra non si vedeva, e
   costava una decina di fotogrammi al secondo sulla landing. */

/* LUCE — il colore si comporta come una sorgente fuori campo, non come vernice.
   Ambra da sinistra, acquamarina da destra: i due mondi si sfiorano al centro. */
/* L'alone di sezione. Niente filter:blur(): su un elemento alto 820 px
   costa un ridisegno a schermo intero per fotogramma e da solo faceva
   scendere la landing da 60 a 26 fps. I gradienti radiali con più fermate
   sono già morbidi, e a occhio non cambia niente. */
.alone{
  position:absolute;inset:-40% -20% auto;height:820px;pointer-events:none;z-index:0;
  background:
    radial-gradient(46% 52% at 12% 34%, rgba(var(--cre-rgb),.13) 0%,
                    rgba(var(--cre-rgb),.05) 42%, transparent 72%),
    radial-gradient(50% 56% at 88% 46%, rgba(var(--bra-rgb),.13) 0%,
                    rgba(var(--bra-rgb),.05) 44%, transparent 74%),
    radial-gradient(70% 44% at 50% 8%,  rgba(255,255,255,.035) 0%, transparent 74%);
}
.alone.cre{background:radial-gradient(52% 58% at 26% 34%, rgba(var(--cre-rgb),.15) 0%,
              rgba(var(--cre-rgb),.05) 42%, transparent 72%)}
.alone.bra{background:radial-gradient(52% 58% at 74% 34%, rgba(var(--bra-rgb),.15) 0%,
              rgba(var(--bra-rgb),.05) 42%, transparent 72%)}

/* SEGNO 3 · L'ANGOLO TAGLIATO
   Solo su ciò che è contratto, ricevuta, documento, archivio.
   Mai su una scheda qualsiasi: qui l'estetica è linguaggio. */
.tagliato{position:relative;border-radius:var(--r-3) 0 var(--r-3) var(--r-3)}
.tagliato::after{
  content:"";position:absolute;top:0;right:0;width:26px;height:26px;pointer-events:none;
  background:linear-gradient(to bottom left,
    var(--fondo) 0 calc(50% - .5px), var(--bo-2) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
.tagliato.su2::after{background:linear-gradient(to bottom left,
    var(--su-1) 0 calc(50% - .5px), var(--bo-2) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px))}

/* l'occhiello di sezione: 03 · collaborazione. Niente §, niente codici. */
.marg{
  font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--gri-3);display:flex;align-items:center;gap:9px;margin-bottom:20px;
}
.marg b{color:var(--acc);font-weight:600;font-variant-numeric:tabular-nums}
.marg i{width:3px;height:3px;border-radius:50%;background:var(--bo-3);font-style:normal;flex:none}

/* IL FUORI REGISTRO — aperto = sfalsato, chiuso = allineato.
   Sopravvive come alone di luce, non più come doppio bordo pieno. */
.registro{
  position:relative;
  box-shadow:calc(var(--aperto) * -1) var(--aperto) 0 -1px rgba(var(--cre-rgb),.5),
             var(--aperto) calc(var(--aperto) * -1) 0 -1px rgba(var(--bra-rgb),.55),
             var(--om-2);
  transition:box-shadow var(--t-scena) var(--curva);
}
.registro.allineato{box-shadow:0 0 0 0 rgba(var(--cre-rgb),0), 0 0 0 0 rgba(var(--bra-rgb),0), var(--om-2)}
.registro.stretto{--aperto:3px}

/* SEGNO 4 · LA LINEA DI FRATTURA — usata con moderazione */
.frattura{
  height:13px;width:100%;background-color:var(--bo-2);opacity:.7;
  transition:background-color var(--t-scena) var(--curva),opacity var(--t-scena) var(--curva);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='13' viewBox='0 0 300 13'%3E%3Cpath d='M0 6.5 L26 3.4 L52 8.2 L74 4.1 L98 9 L126 5.2 L150 2.8 L178 7.6 L204 4.4 L232 8.8 L258 5 L280 3.2 L300 6.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='13' viewBox='0 0 300 13'%3E%3Cpath d='M0 6.5 L26 3.4 L52 8.2 L74 4.1 L98 9 L126 5.2 L150 2.8 L178 7.6 L204 4.4 L232 8.8 L258 5 L280 3.2 L300 6.5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:auto 100%;mask-size:auto 100%;
}
.frattura.viva{background-color:var(--acc);opacity:1}

/* LO SCORPORO — i soldi in chiaro, quando li chiedi */
.tabulato{display:flex;flex-direction:column;gap:0}
.tab-r{display:flex;align-items:baseline;gap:12px;font-size:14.5px;padding:9px 0}
.tab-r .k{color:var(--gri);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tab-r .g{flex:1;height:1px;background:var(--bo);transform:translateY(-3px);min-width:20px}
.tab-r .n{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tab-r .n.giu{color:var(--bra-hi)}
.tab-r .n.acc{color:var(--acc)}
.tab-r .n.gri{color:var(--gri-3);font-weight:450}
.tab-r.tot{border-top:1px solid var(--bo-2);margin-top:8px;padding-top:14px}
.tab-r.tot .k{color:var(--bia);font-weight:600}
.tab-r.tot .n{color:var(--acc);font-size:19px;font-weight:700}

/* LA LINGUETTA D'ARCHIVIO — resta solo sui documenti */
.faldone{position:relative}
.faldone::before{
  content:attr(data-cod);position:absolute;top:0;left:26px;transform:translateY(-100%);
  background:var(--su-2);border:1px solid var(--bo);border-bottom:0;border-radius:10px 10px 0 0;
  padding:6px 14px 6px;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gri-3);line-height:1.2;white-space:nowrap;
}
.faldone.cre::before{color:var(--cre)}
.faldone.bra::before{color:var(--bra-hi)}
.faldone.contro::before{color:var(--contro)}

/* ============================================================
   SEGNO 1 · LE DUE METÀ
   Non è un logo: è lo stato della collaborazione.
   Separate → si avvicinano → combaciano quando il denaro è passato.
   ============================================================ */
.mon{display:inline-block;line-height:0;flex:none;width:24px}
.mon svg{display:block;width:100%;height:auto;overflow:visible}
.mon .l,.mon .r{transform-box:view-box;transform-origin:50px 50px}
.mon:not(.libera) .l,.mon:not(.libera) .r{transition:transform .62s var(--molla)}
.mon .l{fill:var(--cre);transform:translateY(6px)}
.mon .r{fill:var(--bra-hi);transform:translateY(-6px)}
.mon.on .l,.mon.on .r{transform:translateY(0)}
.mon.vuota .l,.mon.vuota .r{fill:#24282A}
@keyframes cerca-l{0%,100%{transform:translateY(8px)}50%{transform:translateY(1px)}}
@keyframes cerca-r{0%,100%{transform:translateY(-8px)}50%{transform:translateY(-1px)}}
@keyframes gira{to{transform:rotate(360deg)}}
.mon.cerca{animation:gira 3.4s linear infinite;transform-origin:50% 50%}
.mon.cerca .l{animation:cerca-l 1.2s ease-in-out infinite}
.mon.cerca .r{animation:cerca-r 1.2s ease-in-out infinite}

/* avatar: stessa grammatica del segno */
/* L'immagine di un profilo: un tondo pieno con dentro la sagoma di
   chi è. Ambra e una persona per il creator, acquamarina e una
   vetrina per l'azienda. Le due metà restano il marchio di
   Leucoteo e non finiscono qui dentro: come avatar erano
   illeggibili a 34 px e facevano sembrare tutti la stessa cosa. */
.ava{position:relative;display:inline-grid;place-items:center;vertical-align:middle;
  width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(0,0,0,.06)}
.ava.cre{background:linear-gradient(170deg,var(--cre-hi),var(--cre));color:var(--su-cre)}
.ava.azi{background:linear-gradient(170deg,var(--bra-hi),var(--bra));color:var(--su-bra)}
.ava .sag{width:58%;height:58%;display:block;opacity:.88}
.ava.foto{box-shadow:inset 0 0 0 1px var(--bo-2)}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava.g{width:78px;height:78px}

/* ------------------------------------------------------------
   IL SEGNO DELLA BETA
   Una targhetta piccola accanto al marchio. Non è una decorazione:
   dice che quello che stai guardando è la prima versione, e che
   non si paga. Chi ci passa sopra lo legge per esteso.
   ------------------------------------------------------------ */
.beta{position:relative;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px 4px 8px;border-radius:7px;margin-left:10px;
  color:var(--cre);cursor:help;flex:none;
  background:linear-gradient(180deg,rgba(255,176,32,.18),rgba(255,176,32,.08));
  box-shadow:inset 0 0 0 1px rgba(255,176,32,.34), 0 2px 10px rgba(255,176,32,.12);
  transition:box-shadow .24s var(--curva),transform .24s var(--molla)}
.beta::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cre);
  box-shadow:0 0 0 0 rgba(255,176,32,.5);animation:beta-vive 2.8s var(--curva) infinite}
@keyframes beta-vive{
  0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,.5)}
  50%{box-shadow:0 0 0 4px rgba(255,176,32,0)}
}
.beta:hover,.beta:focus-visible{transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(255,176,32,.55), 0 4px 16px rgba(255,176,32,.2)}

.beta .spiega{
  position:absolute;top:calc(100% + 12px);left:-10px;
  transform:translate(0,5px) scale(.97);transform-origin:top left;
  width:272px;max-width:calc(100vw - 32px);padding:14px 16px;border-radius:var(--r-2);
  background:var(--su-3);box-shadow:var(--om-3), inset 0 1px 0 rgba(255,255,255,.08);
  font-size:13px;font-weight:450;letter-spacing:var(--tr-s);text-transform:none;
  line-height:1.55;color:var(--gri-2);text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;z-index:var(--z-avviso);
  transition:opacity .2s var(--curva),transform .28s var(--molla),visibility .2s}
.beta .spiega b{color:var(--bia);font-weight:600}
.beta .spiega .gratis{color:var(--cre);font-weight:700}
/* la punta */
.beta .spiega::before{content:"";position:absolute;bottom:100%;left:24px;
  border:6px solid transparent;border-bottom-color:var(--su-3)}
.beta:hover .spiega,.beta:focus-visible .spiega,.beta:focus .spiega{
  opacity:1;visibility:visible;transform:translate(0,0) scale(1)}

/* Su uno schermo stretto non esiste un ancoraggio al badge che stia
   dentro: qualunque lato si scelga, una nuvoletta larga quanto serve
   esce. Quindi non si aggancia al badge ma alla finestra, con lo stesso
   margine dei due lati. */
@media (max-width:640px){
  .beta{font-size:9px;padding:3px 7px 3px 6px;margin-left:8px;letter-spacing:.13em}
  .beta .spiega{position:fixed;top:86px;left:16px;right:16px;
    width:auto;max-width:none;font-size:12.5px;padding:13px 15px;
    transform:translateY(6px) scale(.98);transform-origin:top center}
  .beta .spiega::before{display:none}
  .beta:hover .spiega,.beta:focus .spiega,.beta:focus-visible .spiega{
    transform:translateY(0) scale(1)}
}

/* ============================================================
   COMPONENTI
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,var(--acc-hi),var(--acc));
  color:var(--su-acc);border-radius:var(--r-p);padding:14px 26px;min-height:50px;
  font-weight:600;font-size:15px;letter-spacing:var(--tr-s);
  box-shadow:var(--om-2), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s var(--molla),filter var(--t-tocco) ease,box-shadow var(--t-tocco) ease;
  max-width:100%;text-align:center;line-height:1.25;
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:var(--om-3), inset 0 1px 0 rgba(255,255,255,.26)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.due{background:linear-gradient(180deg,var(--bra-hi),var(--bra));color:var(--su-bra)}
.btn.ghost{background:var(--velo);color:var(--bia);
  box-shadow:inset 0 0 0 1px var(--bo-2), var(--filo)}
.btn.ghost:hover{background:var(--velo-2);filter:none;box-shadow:inset 0 0 0 1px var(--bo-3), var(--filo)}
.btn.nero{background:rgba(0,0,0,.42);color:var(--bia);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.btn.nero:hover{background:rgba(0,0,0,.46);filter:none}
.btn.p{padding:10px 18px;min-height:40px;font-size:14px}
.btn.pieno{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none;box-shadow:none}

.campo{
  width:100%;background:var(--su-2);border:1px solid var(--bo);border-radius:var(--r-2);
  padding:13px 16px;font-size:15px;color:var(--bia);min-height:50px;
  box-shadow:var(--filo);
  transition:border-color var(--t-tocco) ease,background-color var(--t-tocco) ease,box-shadow var(--t-tocco) ease;
}
.campo::placeholder{color:var(--gri-3)}
.campo:focus{outline:none;border-color:rgba(var(--acc-rgb),.55);background:var(--su-3);
  box-shadow:0 0 0 4px rgba(var(--acc-rgb),.11), var(--filo)}
.etichetta{display:block;color:var(--gri);font-size:13.5px;margin-bottom:8px}

/* SUPERFICIE — appena traslucida, bordo quasi invisibile, ombra morbida.
   La profondità si sente, non si vede. */
.scheda{
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.022)),var(--su-1);
  border:1px solid var(--bo);border-radius:var(--r-3);padding:28px;position:relative;
  box-shadow:var(--om-2), var(--filo);
}
.scheda.fitta{padding:20px;border-radius:var(--r-2)}
.scheda h3{font-weight:600;font-size:17px;letter-spacing:var(--tr-l);text-transform:lowercase}

/* pastiglia di stato */
.pil{display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--gri);
  background:var(--velo);box-shadow:inset 0 0 0 1px var(--bo);border-radius:var(--r-p);
  padding:6px 13px;white-space:nowrap}
.pil.ok{color:var(--su-acc);background:var(--acc);box-shadow:none}
.pil.corso{color:var(--acc-hi);background:rgba(var(--acc-rgb),.11);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.34)}
.pil.att{color:var(--bia);background:var(--velo-2);box-shadow:inset 0 0 0 1px var(--bo-3)}
.pil.male{color:var(--male);background:rgba(255,107,88,.1);box-shadow:inset 0 0 0 1px rgba(255,107,88,.34)}

/* avanzamento */
.barra{position:relative;height:8px;background:var(--su-3);border-radius:var(--r-p);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.barra i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-p);
  background:linear-gradient(90deg,var(--bra) 0%,var(--cre) 100%);
  box-shadow:0 0 12px rgba(var(--acc-rgb),.34);
  transition:width var(--t-scena) var(--curva)}

/* registro */
.reg-t{width:100%;border-collapse:collapse;font-size:14.5px}
.reg-t th{font-size:11.5px;letter-spacing:.06em;font-weight:600;
  text-transform:uppercase;color:var(--gri-3);text-align:left;
  padding:0 16px 12px 0;border-bottom:1px solid var(--bo);white-space:nowrap}
.reg-t td{padding:15px 16px 15px 0;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle}
.reg-t td.mono,.reg-t td .uc{white-space:nowrap}
.reg-t tr:last-child td{border-bottom:0}
.reg-t td.n{font-variant-numeric:tabular-nums;text-align:right;padding-right:0;font-weight:600}
.reg-t th.n{text-align:right;padding-right:0}
.scorri{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* nota */
.nota{background:var(--su-1);border:1px solid var(--bo);border-left:2px solid var(--acc);
  border-radius:var(--r-2);padding:18px 22px;color:var(--gri-2);font-size:14.5px;box-shadow:var(--filo)}
.nota b{color:var(--bia);font-weight:600}
.nota.due{border-left-color:var(--bra-hi)}

/* ============================================================
   ENTRATE
   ============================================================ */
.rise{transition:opacity var(--t-entrata) var(--curva),transform var(--t-entrata) var(--curva)}
/* si nasconde solo se lo script c'è ed è partito: altrimenti un errore
   in una riga qualsiasi lascerebbe la pagina completamente bianca */
.con-script .rise{opacity:0;transform:translateY(16px)}
.rise.in{opacity:1;transform:none}

/* ============================================================
   PREFERENZE DI SISTEMA
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .alone{display:none}
  .scheda,.btn.ghost,.btn.nero{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--su-2)}
}
@media (prefers-contrast:more){
  :root{--gri:#CBD1D5;--gri-2:#EDF0F2;--gri-3:#B4BABE;
        --bo:rgba(255,255,255,.24);--bo-2:rgba(255,255,255,.34);--bo-3:rgba(255,255,255,.46)}
}

/* ============================================================
   SEGNI — tratto morbido, 1.6px
   ============================================================ */
.ico{width:20px;height:20px;flex:none;display:block}
.ico.p{width:16px;height:16px}
.ico.g{width:26px;height:26px}
.illo{width:100%;height:auto;display:block;border-radius:var(--r-3)}

.bollo{width:44px;height:44px;flex:none;border-radius:var(--r-2);display:grid;place-items:center;
  background:rgba(var(--acc-rgb),.13);color:var(--acc);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.16)}
.bollo.spenta{background:var(--velo);color:var(--gri);box-shadow:inset 0 0 0 1px var(--bo)}
.bollo.allerta{background:rgba(255,107,88,.13);color:var(--male);box-shadow:inset 0 0 0 1px rgba(255,107,88,.2)}

/* ============================================================
   DI CHI È LA PALLA
   ============================================================ */
.turno{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;white-space:nowrap}
.turno i{width:8px;height:8px;border-radius:50%;flex:none}
.turno.tu i{background:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.16)}
.turno.tu{color:var(--acc)}
.turno.loro i{background:var(--gri-3)}
.turno.loro{color:var(--gri)}
.turno.finito i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--gri-3)}
.turno.finito{color:var(--gri-3)}

/* ============================================================
   IL PERCORSO
   ============================================================ */
.percorso{display:flex;align-items:center;gap:0;width:100%}
.percorso .tappa{flex:1;display:flex;align-items:center;gap:0;min-width:0}
.percorso .pallino{width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--su-3);box-shadow:inset 0 0 0 1.5px var(--bo-2);
  transition:background-color var(--t-scena) var(--curva),box-shadow var(--t-scena) var(--curva)}
.percorso .tratto{flex:1;height:2px;background:var(--bo-2);min-width:8px;border-radius:2px;
  transition:background-color var(--t-scena) var(--curva)}
.percorso .tappa.fatta .pallino{background:var(--acc);box-shadow:0 0 10px rgba(var(--acc-rgb),.34)}
.percorso .tappa.fatta .tratto{background:var(--acc)}
.percorso .tappa.ora .pallino{background:var(--fondo);box-shadow:inset 0 0 0 3px var(--acc)}

/* ============================================================
   REGISTRAZIONE
   ============================================================ */
.entra{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.entra-alto{padding:24px 0}
.entra-corpo{flex:1;display:grid;place-items:center;padding:48px 0 72px}
.entra-foglio{width:100%;max-width:840px}
.entra h1{font-weight:800;letter-spacing:var(--tr-xl);
  text-transform:lowercase;line-height:1.04;font-size:clamp(30px,4vw,46px)}
.entra .occhiello{color:var(--gri);font-size:17px;margin-top:16px;max-width:52ch}

.avanza{display:flex;align-items:center;gap:12px}
.avanza .tacca{width:34px;height:3px;border-radius:2px;background:var(--bo-2);
  transition:background-color var(--t-entrata) var(--curva)}
.avanza .tacca.viva{background:var(--acc)}
.avanza .qta{font-size:12.5px;color:var(--gri-3)}

/* le due carte */
.scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:44px}
.scelta{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  text-align:left;padding:0;border-radius:var(--r-4);border:1px solid var(--bo);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018)),var(--su-1);
  box-shadow:var(--om-2), var(--filo);
  transition:border-color var(--t-tocco) ease,transform .22s var(--curva),box-shadow .22s var(--curva)}
.scelta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.85;
  background:radial-gradient(78% 58% at 50% 0%, rgba(var(--acc-rgb),.15), transparent 72%)}
.scelta:hover{border-color:var(--bo-2);transform:translateY(-3px);box-shadow:var(--om-3), var(--filo)}
.scelta .illo{border:0;border-radius:0;position:relative;z-index:1}
.scelta .testo{padding:26px 28px 22px;position:relative;z-index:1}
.scelta h2{font-weight:700;font-size:24px;letter-spacing:var(--tr-l);text-transform:lowercase}
.scelta p{color:var(--gri);font-size:15px;margin-top:12px;line-height:1.55}
.scelta .vantaggi{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.scelta .vantaggi li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--gri-2)}
.scelta .vantaggi .ico{width:17px;height:17px;margin-top:3px;color:var(--acc)}
.scelta[data-lato="creator"]{--acc:var(--cre);--acc-hi:var(--cre-hi);--acc-rgb:var(--cre-rgb);--su-acc:var(--su-cre)}
.scelta[data-lato="azienda"]{--acc:var(--bra);--acc-hi:var(--bra-hi);--acc-rgb:var(--bra-rgb);--su-acc:var(--su-bra)}
.scelta .prendi{margin:auto 28px 28px;pointer-events:none;align-self:stretch;position:relative;z-index:1}

/* modulo */
.modulo{display:flex;flex-direction:column;gap:20px;margin-top:36px;max-width:470px}
.campo-g{display:flex;flex-direction:column;gap:8px}
.campo-g .aiuto{color:var(--gri-3);font-size:13px}
.doppio{display:grid;grid-template-columns:auto 1fr;gap:0;align-items:stretch}
.doppio .fisso{display:grid;place-items:center;padding:0 16px;background:var(--su-3);
  border:1px solid var(--bo);border-right:0;border-radius:var(--r-2) 0 0 var(--r-2);
  font-size:15px;color:var(--gri)}
.doppio .campo{border-radius:0 var(--r-2) var(--r-2) 0}

/* collegamenti */
.collega{display:flex;flex-direction:column;gap:12px;margin-top:32px;max-width:540px}
.canale{display:flex;align-items:center;gap:16px;text-align:left;width:100%;
  background:var(--su-1);border:1px solid var(--bo);border-radius:var(--r-2);padding:18px 20px;
  box-shadow:var(--filo);
  transition:border-color var(--t-tocco) ease,background-color var(--t-tocco) ease}
.canale:hover{border-color:var(--bo-2);background:var(--su-2)}
.canale .n{display:block;font-weight:600;font-size:15.5px}
.canale .d{display:block;color:var(--gri);font-size:13.5px;margin-top:3px}
.canale .esito{margin-left:auto}
.canale.collegato{border-color:rgba(var(--acc-rgb),.4)}
.canale.collegato .bollo{background:var(--acc);color:var(--su-acc)}

.fine-reg{text-align:center;max-width:540px;margin:0 auto}
.fine-reg .illo{max-width:280px;margin:0 auto 32px;border:0}

/* ============================================================
   PROFILO
   ============================================================ */
.ava.foto{overflow:hidden;border-radius:50%}
.ava.foto img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:3}
.ava.xg{width:112px;height:112px}

.ritratto{position:relative;display:inline-block;flex:none}
.ritratto .cambia{position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%;
  background:var(--su-2);color:var(--bia);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--bo-2), var(--om-2);cursor:pointer;
  transition:background-color var(--t-tocco) ease}
.ritratto .cambia:hover{background:var(--su-3)}
.ritratto .cambia .ico{width:16px;height:16px}

/* ============================================================
   GIUDIZIO
   ============================================================ */
.stelle{display:inline-flex;align-items:center;gap:2px;color:var(--acc)}
.stelle .ico{width:15px;height:15px}
.stelle .spenta{color:var(--bo-3)}
.stelle .voto{margin-left:8px;font-size:14px;font-weight:600;color:var(--gri-2);font-variant-numeric:tabular-nums}

/* ============================================================
   MODULI LUNGHI
   ============================================================ */
.modulo-lungo{display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:start}
.passi-lato{position:sticky;top:112px;display:flex;flex-direction:column;gap:3px}
.passi-lato button{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--r-2);
  text-align:left;width:100%;font-size:14.5px;color:var(--gri);
  transition:color var(--t-tocco) ease,background-color var(--t-tocco) ease}
.passi-lato button:hover{color:var(--bia);background:var(--velo)}
.passi-lato button[aria-current="step"]{color:var(--bia);background:rgba(var(--acc-rgb),.1)}
.passi-lato .nu{width:23px;height:23px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11.5px;font-weight:600;background:var(--su-3);color:var(--gri-3)}
.passi-lato button[aria-current="step"] .nu{background:var(--acc);color:var(--su-acc)}
.passi-lato button.fatto .nu{background:rgba(var(--acc-rgb),.2);color:var(--acc)}

.blocco{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),var(--su-1);
  border:1px solid var(--bo);border-radius:var(--r-3);padding:30px;box-shadow:var(--om-2), var(--filo)}
.blocco + .blocco{margin-top:18px}
.blocco > h3{font-weight:600;font-size:19px;letter-spacing:var(--tr-l);text-transform:lowercase}
.blocco > .sotto{color:var(--gri);font-size:14.5px;margin-top:9px;max-width:60ch}
.campi{display:grid;gap:20px;margin-top:26px}
.campi.due-col{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
textarea.campo{min-height:110px;resize:vertical;line-height:1.6;font-family:inherit}
/* la maniglia di ridimensionamento è un dettaglio da modulo di sistema,
   e sul telefono non serve a niente: non si trascina con il dito */
@media (max-width:860px){ textarea.campo{resize:none;min-height:130px} }
select.campo{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A7AEB2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}

.opzioni-riga{display:flex;flex-direction:column;gap:10px}
.opz{display:flex;align-items:flex-start;gap:14px;padding:17px 19px;text-align:left;width:100%;
  background:var(--su-2);border:1px solid var(--bo);border-radius:var(--r-2);box-shadow:var(--filo);
  transition:border-color var(--t-tocco) ease,background-color var(--t-tocco) ease}
.opz:hover{border-color:var(--bo-2)}
.opz[aria-pressed="true"]{border-color:rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.07)}
.opz .segno{width:19px;height:19px;border-radius:50%;flex:none;margin-top:2px;
  box-shadow:inset 0 0 0 1.5px var(--bo-2);display:grid;place-items:center;
  transition:box-shadow var(--t-tocco) ease}
.opz[aria-pressed="true"] .segno{box-shadow:inset 0 0 0 5.5px var(--acc)}
.opz .t{display:block;font-weight:600;font-size:15px}
.opz .d{display:block;color:var(--gri);font-size:13.5px;margin-top:5px;line-height:1.55}

.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:var(--r-p);
  background:var(--velo);box-shadow:inset 0 0 0 1px var(--bo);font-size:14px;color:var(--gri-2);
  transition:color var(--t-tocco) ease,box-shadow var(--t-tocco) ease,background-color var(--t-tocco) ease}
.chip:hover{color:var(--bia);background:var(--velo-2)}
.chip[aria-pressed="true"]{color:var(--su-acc);background:var(--acc);box-shadow:none}
.chip .ico{width:15px;height:15px}

.riga-consegna{display:grid;grid-template-columns:1fr 140px 140px auto;gap:12px;align-items:end}
.riga-consegna.senza-etichette .etichetta{display:none}
.riga-consegna + .riga-consegna{margin-top:-6px}
.riga-consegna .togli{align-self:center;color:var(--gri-3);padding:10px;border-radius:var(--r-1)}
.riga-consegna .togli:hover{color:var(--male);background:rgba(255,107,88,.09)}

.riepilogo{position:sticky;bottom:0;background:rgba(8,9,10,.82);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid var(--bo);padding:18px 0;margin-top:28px;z-index:20}

/* ============================================================
   STORICO
   ============================================================ */
.storia-riga{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.storia-riga:last-child{border-bottom:0}
.storia-riga .quando{font-size:12.5px;color:var(--gri-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.storia-riga .chi{font-weight:600;font-size:15px}
.storia-riga .cosa{color:var(--gri);font-size:13.5px;margin-top:3px}
.storia-riga .velato{color:var(--gri-2);font-style:normal}

.riservatezza{display:flex;gap:15px;align-items:flex-start;background:var(--su-1);
  border:1px solid var(--bo);border-left:2px solid var(--bra-hi);border-radius:var(--r-2);
  padding:18px 20px;font-size:14px;color:var(--gri-2);box-shadow:var(--filo)}
.riservatezza b{color:var(--bia)}

/* ============================================================
   DATI BANCARI — qui il monospace serve davvero
   ============================================================ */
.iban{font-size:17px;font-weight:500;letter-spacing:.09em;font-variant-numeric:tabular-nums;
  background:var(--su-2);border:1px solid var(--bo);border-radius:var(--r-2);padding:16px 18px;
  display:flex;align-items:center;gap:14px;word-break:break-all;box-shadow:var(--filo)}
.iban .copia{margin-left:auto;flex:none}

@media (max-width:900px){
  .modulo-lungo{grid-template-columns:1fr;gap:22px}
  .passi-lato{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .passi-lato button{white-space:nowrap;flex:none}
  .riga-consegna{grid-template-columns:1fr;gap:12px}
  .riga-consegna .togli{justify-self:start}
  .blocco{padding:22px;border-radius:var(--r-2)}
  .scheda{padding:22px}
}

/* ============================================================
   MOVIMENTO — primitive riutilizzabili
   Regola: un'animazione racconta cosa è successo. Se non racconta
   niente, non ci va. Tutto passa da queste classi, mai da CSS locale.
   ============================================================ */

/* la pressione: ogni cosa toccabile cede sotto il dito e torna con
   un accenno di molla. È il feedback che fa sembrare l'interfaccia viva. */
.tap{transition:transform var(--t-tocco) var(--e-molla), filter var(--t-tocco) var(--e-std),
     background-color var(--t-tocco) var(--e-std), box-shadow var(--t-tocco) var(--e-std)}
.tap:active{transform:scale(.965)}
.tap-p:active{transform:scale(.98)}
@media (hover:hover){ .tap:hover{filter:brightness(1.06)} }

/* entrata sfalsata: l'indice arriva da --i, così una lista si compone
   invece di comparire tutta insieme */
.su{opacity:0;transform:translate3d(0,14px,0);
  transition:opacity var(--t-entrata) var(--e-std), transform var(--t-entrata) var(--e-std);
  transition-delay:calc(var(--i,0) * var(--sfalsa))}
.su.in{opacity:1;transform:none}

/* cambio di vista: il contenuto vecchio esce, il nuovo entra da sotto */
@keyframes vista-entra{from{opacity:0;transform:translate3d(0,10px,0) scale(.995)}
                       to{opacity:1;transform:none}}
.vista-nuova{animation:vista-entra .38s var(--e-std) both}

/* un foglio che sale dal basso */
@keyframes foglio-su{from{transform:translate3d(0,100%,0)} to{transform:none}}
@keyframes velo-in{from{opacity:0} to{opacity:1}}

/* il numero che cambia: sale di un soffio e si riposa */
@keyframes cifra-su{0%{opacity:0;transform:translate3d(0,9px,0)}
                    100%{opacity:1;transform:none}}
.cifra-viva{animation:cifra-su .44s var(--e-molla) both}

/* la barra che si riempie e brilla un istante quando arriva in fondo */
@keyframes lampo{0%{opacity:0}40%{opacity:.5}100%{opacity:0}}
.barra.piena i::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:lampo 1s var(--e-std) both}

/* le due metà che si ricompongono: è il gesto del marchio, riusato
   ovunque significhi "concluso" */
@keyframes mon-chiudi{0%{transform:translateY(var(--da))}
                      70%{transform:translateY(calc(var(--da) * -.14))}
                      100%{transform:translateY(0)}}
.mon.chiude .l{--da:8px;animation:mon-chiudi .72s var(--e-molla) both}
.mon.chiude .r{--da:-8px;animation:mon-chiudi .72s var(--e-molla) both;animation-delay:.05s}

/* pulsazione discreta su ciò che aspetta te */
@keyframes respiro{0%,100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.34)}
                   70%{box-shadow:0 0 0 7px rgba(var(--acc-rgb),0)}}
.turno.tu i{animation:respiro 2.6s var(--e-morbida) infinite}

/* lo scheletro mentre si carica */
@keyframes scorre{to{background-position-x:-200%}}
.osso{background:linear-gradient(90deg,var(--su-2) 40%,var(--su-3) 50%,var(--su-2) 60%);
  background-size:200% 100%;animation:scorre 1.4s linear infinite;border-radius:var(--r-1);color:transparent}

/* ============================================================
   MOBILE — pattern riutilizzabili, non fix per pagina
   ============================================================ */

/* 1 · LA TABELLA DIVENTA UNA LISTA DI SCHEDE.
   Pattern riutilizzabile: si applica .tab-schede a una tabella e si dà a
   ogni cella la sua etichetta in data-k. Sotto gli 860 px la tabella si
   smonta e ogni riga diventa una scheda leggibile — nessuno scroll
   laterale, nessun testo a 9 px, nessun fix per pagina. */
@media (max-width:860px){
  .tab-schede, .tab-schede tbody, .tab-schede tr, .tab-schede td{display:block;width:100%}
  /* il thead resta nell'albero di accessibilità ma esce a sinistra:
     nascondere con width:1px non basta, le celle continuano a occupare
     la loro larghezza vera e spingono la pagina oltre lo schermo */
  .tab-schede thead{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
  .tab-schede tr{background:var(--su-1);border:1px solid var(--bo);border-radius:var(--r-2);
    padding:14px 16px;margin-bottom:10px;box-shadow:var(--filo)}
  .tab-schede td{border:0;padding:6px 0;display:flex;align-items:baseline;gap:14px;text-align:left}
  .tab-schede td::before{content:attr(data-k);flex:none;min-width:100px;
    font-size:13px;color:var(--gri-3)}
  .tab-schede td:empty{display:none}
  .tab-schede td.n{text-align:left;justify-content:space-between}
  .tab-schede td.primo{padding:0 0 10px;margin-bottom:8px;border-bottom:1px solid var(--bo);
    font-weight:600;font-size:15.5px;display:block}
  .tab-schede td.primo::before{display:none}
  /* il segno di stato passa in alto a destra della scheda */
  .tab-schede tr{position:relative}
  .tab-schede td.segno{position:absolute;top:14px;right:16px;padding:0;width:auto}
  .tab-schede td.segno::before{display:none}
  .scorri{overflow:visible}
}

/* 2 · LA COPPIA CHIAVE-VALORE non va mai a capo storta — e soprattutto
   non esce dallo schermo. Il valore era nowrap: un «Proteine vegetali
   vaniglia · 900 g» allargava la colonna e con lei tutta la scheda,
   che finiva tagliata dal bordo. Adesso il valore va a capo e
   l'etichetta cede lo spazio. */
@media (max-width:640px){
  .tab-r{gap:10px 14px;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
  .tab-r .k{white-space:normal;flex:1 1 auto;min-width:0;overflow:visible;text-overflow:clip}
  .tab-r .g{display:none}
  .tab-r .n{white-space:normal;text-align:right;flex:0 1 auto;min-width:0;
    max-width:100%;overflow-wrap:anywhere}
}

/* 3 · LA BARRA DI AZIONE NEL POLLICE.
   Su mobile l'azione principale di una schermata smette di stare in
   mezzo al contenuto e si posa in fondo, sopra il dock. */
.azione-pollice{display:none}
@media (max-width:860px){
  .azione-pollice{
    display:block;position:fixed;left:0;right:0;
    bottom:calc(var(--pollice) - 4px);z-index:var(--z-sticky);
    padding:12px 16px calc(12px + var(--safe-b));
    background:linear-gradient(to top,rgba(8,9,10,.96) 55%,rgba(8,9,10,0));
    pointer-events:none;
  }
  .azione-pollice > *{pointer-events:auto}
  .azione-pollice .btn{width:100%}
  body.ha-azione .vista{padding-bottom:calc(var(--pollice) + 76px)}
}

/* 4 · TIPOGRAFIA RICALIBRATA, non rimpicciolita.
   Il corpo resta a 16 px per leggibilità; scendono i display, che su
   desktop servivano a fare scena e su un telefono rubano solo spazio. */
@media (max-width:640px){
  .uc{font-size:12.5px}
  .xs{font-size:13px}
  .disp{letter-spacing:-.028em;line-height:1.06}
  .disp-m{letter-spacing:-.02em;line-height:1.18}
  .scheda{padding:20px;border-radius:var(--r-2)}
  .scheda.fitta{padding:16px}
  .nota{padding:16px 18px}
  .wrap{padding:0 18px}
  .btn{min-height:52px;font-size:16px}   /* pollice: 52 px pieni */
  .btn.p{min-height:44px;font-size:14.5px}
  .campo{min-height:52px;font-size:16px} /* 16 px: iOS non zooma il campo */
  /* filtri e chip: sul telefono erano pillole enormi. Restano
     afferrabili (38 px + area sensibile), ma smettono di occupare
     mezza riga ciascuna. */
  .filtro,.chip{min-height:38px;font-size:13px;padding:8px 14px}
  .chip{gap:6px}
}

/* 4bis · I LINK DI TESTO restano afferrabili.
   Un link alto 19 px in un piè di pagina è un bersaglio da 19 px: si
   allarga l'area sensibile senza toccare il testo. */
@media (max-width:860px){
  /* i link dentro un paragrafo non possono essere alti 44 px senza
     sfasciare l'interlinea: si allarga solo l'area sensibile */
  .foot nav a, .piede a, .testo a, .nota a, .riservatezza a, .gri a{position:relative}
  .foot nav a::after, .piede a::after, .testo a::after,
  .nota a::after, .riservatezza a::after{content:"";position:absolute;
    left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
  /* dove invece il link è un elemento a sé, l'altezza è vera */
  .foot nav a,.piede a{display:inline-block;padding:11px 0;line-height:1.5}
  .foot nav a::after,.piede a::after{display:none}
}

/* 5 · NIENTE ESCE DALLO SCHERMO — rete di sicurezza globale */
@media (max-width:860px){
  html,body{max-width:100%;overflow-x:hidden}
  .griglia-2,.griglia-3,.tremezzo,.campi.due-col,.scelte,.duelati{grid-template-columns:1fr!important}
  /* una casella di griglia vale per default min-content: senza questo,
     un solo figlio largo allarga la colonna e la pagina esce di lato
     anche quando la colonna è dichiarata 1fr */
  .griglia-2>*,.griglia-3>*,.tremezzo>*,.campi>*,.scelte>*,.duelati>*,
  .fascia>*,.compiti>*{min-width:0}
  table{max-width:100%}
  pre,code,.iban{overflow-wrap:anywhere}
}

/* 6 · IL FOGLIO — modali e menu su mobile salgono dal basso,
   non compaiono al centro. È il gesto che la gente si aspetta. */
.velo{position:fixed;inset:0;z-index:var(--z-velo);background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity var(--t-foglio) var(--e-std)}
.velo.qui{opacity:1;pointer-events:auto}
.foglio{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-foglio);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),var(--su-1);
  border-top:1px solid var(--bo-2);border-radius:var(--r-4) var(--r-4) 0 0;
  padding:10px 18px calc(24px + var(--safe-b));
  box-shadow:0 -24px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  transform:translate3d(0,100%,0);transition:transform var(--t-foglio) var(--e-sheet);
  max-height:86vh;overflow-y:auto;overscroll-behavior:contain}
.foglio.qui{transform:none}
.foglio .maniglia{width:40px;height:4px;border-radius:99px;background:var(--bo-3);
  margin:0 auto 18px;flex:none}
@media (min-width:861px){
  .foglio{left:auto;right:22px;bottom:22px;width:340px;border-radius:var(--r-3);
    border:1px solid var(--bo);transform:translate3d(0,12px,0) scale(.98);opacity:0;
    transition:transform var(--t-entrata) var(--e-molla),opacity var(--t-entrata) var(--e-std)}
  .foglio.qui{transform:none;opacity:1}
  .foglio .maniglia{display:none}
}

@media (prefers-reduced-motion:reduce){
  .su,.vista-nuova,.cifra-viva{opacity:1!important;transform:none!important;animation:none!important}
  .tap:active{transform:none}
}