/* Demo Limited Edition — linguaggio grafico del sito Jamal Taslaq */

:root {
  /* JT-106: la misura delle icone della testata, UNA sola come sul sito (li' e'
     `--tw-menu-icon-width`). Tutto il resto — stacco fra le icone, tondi neri, pallini
     rossi — e' `calc()` su questa, con gli stessi coefficienti del sito, quindi cambiare
     riga cambia la testata intera. 19.74 x 1.55 (lo zoom) = 30.6px di schermo, che e' quanto
     misura sul sito a 1600px. */
  --ico: 1.23375rem;
  --ink: #111111;
  --text: #2a2723;
  --sub: #6f6a63;
  --muted: #8a8378;
  --line: #e2ded8;
  /* Le superfici "card" prendono la stessa costruzione delle pastiglie, in argento: bordo
     che degrada dall'alto e campo appena velato. L'escursione e' MOLTO piu' stretta che
     sulle pastiglie — su una superficie alta un salto marcato non legge come metallo,
     legge come sporco in fondo. */
  --silver-top: #f2f0ec;
  --silver-bottom: #d2cdc4;
  --card-bg: #ffffff;
  --card-bg-2: #fcfbfa;
  --soft: #f3f1ec;
  --paper: #ffffff;
  --accent: #a16207;
  --accent-bg: #faf3e3;
  --ok: #3f6212;
  --ok-bg: #f1f5e9;
  --blue: #1e40af;
  --blue-bg: #eef2ff;
  /* Stessa costruzione della pastiglia oro: bordo sfumato dall'alto al basso e un soffio
     sul fondo. Non e' lamina — il blu non e' un metallo — ma la coerenza sta nel gesto,
     non nel materiale. Escursione tarata come quella dell'oro. */
  --blue-foil-top: #7593e4;
  --blue-foil-bottom: #1e40af;
  --blue-bg-2: #e0e8fc;
  /* Oro contro marrone: a parita' di scurezza la differenza la fa la SATURAZIONE, non la
     tinta. Il primo tentativo (#5f4712, saturazione 68%) inseguiva il contrasto e finiva
     bruno; questo sta al 91% e resta oro. Il vero difetto del valore originale non era
     comunque il testo ma il contorno: fondo giallo pallido + bordo #c9a227 a contrasto
     2,28 sul proprio fondo — da qui il "giallino stinto". Ora il fondo e' quasi bianco e
     il bordo e' un filetto d'oro vero. Contrasto del testo 5,88 (soglia 4,5). */
  --gold: #7d5f06;
  --gold-line: #bd9526;
  --gold-bg: #fffdf6;
  /* Il bordo va da oro chiaro a oro scuro: e' come legge una stampa a LAMINA su carta,
     ed e' il gesto couture giusto. La targa lucida 3D, provata, accanto alla pastiglia
     di stato diventa un bottone Web 2.0 e le grida sopra. */
  --gold-foil-top: #e0c069;
  --gold-foil-bottom: #8a6a12;
  --gold-bg-2: #fbf2dc;
}

/* ---------- La scala della demo ----------
   Fino al 2026-09-01 questa demo scalava con `html { zoom }`: un moltiplicatore unico,
   1 di base e fino a 2 sugli schermi enormi, e ogni misura del foglio era scritta in px
   "di disegno" da moltiplicare a mente. Ora scala con la MISURA DI RADICE: `html
   { font-size }` cresce agli stessi gradini e tutto il resto e' in `rem`. Il reso a
   schermo e' identico — verificato elemento per elemento a otto larghezze — ma cambia
   una cosa che contava:

   ⚠️ `zoom` RIMPICCIOLISCE LA VIEWPORT DI LAYOUT, `font-size` no. Con `zoom: 1.55` una
   finestra da 1400px offriva ai figli 903px di spazio, mentre le media query (che
   leggono la larghezza NON zoomata) continuavano a dire 1400. Bootstrap, che e' entrato
   qui con JT-114, si comportava da `xl` dentro uno spazio da `md`: un `.container` da
   1140px sarebbe traboccato. Ora i 1400px sono 1400px per tutti.

   ⚠️ `16px` di base e' scritto APPOSTA, non e' ridondante: senza, la scala partirebbe
   dalla misura di carattere scelta nel browser dall'utente e l'intera demo cambierebbe
   dimensione. Con lo `zoom` non succedeva, e questa riga conserva quel comportamento.
   (Il rovescio e' che la demo ignora quella preferenza: e' la stessa scelta di prima,
   non una nuova.) */
html { font-size: 16px; }

* { box-sizing: border-box; }
/* ---------- Reboot di Bootstrap: le due sole regole che spostavano questa pagina ----------
   Misurato prima di far entrare Bootstrap (JT-114), confrontando la geometria di ogni
   elemento prima e dopo, sulle 5 pagine a 1600 e a 375. Su 243 elementi ne cambiavano
   DUE cose, e sono queste. Il resto del Reboot su questa demo non muove niente:
   `img { vertical-align: middle }` non sposta nulla (le immagini qui sono `display: block`)
   e `button { font-family: inherit }` fa solo passare la X del modale da Arial a Roboto.

   NON e' una scelta di stile: e' il patto del passo 6, cioe' che Bootstrap entri senza
   cambiare l'aspetto della demo. Adottare la spaziatura tipografica di Bootstrap e' una
   decisione da prendere apposta, non un effetto collaterale. */
p { margin: 1em 0; }            /* Reboot: `0 0 1rem`. Sposta i <p> che non hanno una
                                   classe con margini propri: `.jt-small` e' l'unico.
                                   Costava 13,95px su designer.php e jamal.php. */
.mlink { line-height: normal; } /* Reboot: `button { line-height: inherit }`, che qui
                                   alzava il modale della riserva di 7,23px. */

html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--text); font: 400 0.9375rem/1.55 'Roboto', system-ui, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- header ---------- */
/* Header: e' quello dello storefront (`jt_renderHeaderMenu` in `web/house/jt_functions.php`),
   rifatto a mano perche' la demo e' un'isola — li' il layout e' Bootstrap (`row`/`col`,
   `position-absolute`, `badge`), qui Bootstrap non c'e'. Tre gruppi: icone, marchio, icone;
   i due gruppi laterali hanno la stessa base flessibile, cosi' il marchio resta centrato
   sullo schermo anche se a sinistra e a destra le icone non pesano uguale.
   La larghezza segue quella di `.wrap` (vedi la scala in fondo): le icone si allineano ai
   bordi delle card invece di scappare ai bordi dello schermo. */
/* JT-103: i tre numeri verticali sono misurati sul sito a 1600px e riportati qui divisi
   per lo `zoom: 1.55`, cosi' il reso in pixel di schermo coincide.
     schermo → cima del disegno JT   21.4   → padding-top  13.8  (13.8 x 1.55 = 21.4)
     disegno → «JAMAL TASLAQ»        15.0   → padding-bottom 9.68
   `align-items` passa da `flex-start` a `center`: sul sito il centro delle icone e il
   centro del monogramma coincidono ESATTAMENTE (misurato: scarto 0), qui le icone erano
   allineate in cima e stavano 21.7px piu' su. */
.chrome { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.8625rem 1.25rem 0.605rem; max-width: 47.5rem; margin: 0 auto; }
.chrome-ico { display: flex; align-items: center; gap: calc(var(--ico) * .385); flex: 1 1 0; }
.chrome-ico-end { justify-content: flex-end; }
/* JT-089: erano sei PNG copiati dallo storefront, ora sono glifi Bootstrap Icons
   (che la demo gia' vendorizzava). La misura che prima era la LARGHEZZA dell'immagine
   ora e' il CORPO del glifo. */
.jt-ico { transition: opacity .3s; }
i.jt-ico { width: auto; height: auto; font-size: var(--ico); line-height: 1; color: #000; display: inline-block; vertical-align: middle; }
/* Freccia indietro e WhatsApp avevano il cerchio nero disegnato dentro il PNG: qui lo
   fa il CSS, glifo bianco su tondo nero. Il corpo scende perche' dentro un tondo si
   rimpicciolisce il glifo, non la scatola. */
i.jt-ico-tondo { width: var(--ico); height: var(--ico); font-size: calc(var(--ico) * .52); background: #000; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.jt-ico[role="button"] { cursor: pointer; }
.jt-ico:hover { opacity: .75; }
/* Il pallino di stato: sul sito e' rosso per un visitatore anonimo (verde se sei dentro).
   Qui resta rosso, perche' nella demo non si entra da nessuna parte. */
.jt-ico-dot { position: relative; display: inline-flex; }
.chrome-ico a { display: inline-flex; text-decoration: none; }
/* Il bordo bianco e' 1.5px di SCHERMO sul sito, quindi qui va diviso per lo zoom: 1.5px
   pieni ne varrebbero 2.3 e su un pallino da 10.7 si vedrebbe. */
.jt-ico-dot .dot { position: absolute; top: calc(var(--ico) * -.04); right: calc(var(--ico) * -.115); width: calc(var(--ico) * .35); height: calc(var(--ico) * .35); border-radius: 50%; background: #dc3545; border: 0.060625rem solid #fff; }
/* JT-100: il marchio e' ancorato all'ICONA, che e' il riferimento condiviso fra questa
   testata e quella del sito (pareggiate in JT-093). Sul sito, rispetto all'icona:
       monogramma 2.58 x   wordmark 2.00 x   sottotitolo 0.50 x
   Qui l'icona e' 26, quindi 67 / 52 / 13. Sul telefono l'icona e' 22 → 57 / 44 / 11.

   ⚠️ In JT-099 avevo pareggiato le proporzioni INTERNE al marchio (monogramma su
   wordmark, 1.29) e mai il marchio rispetto a quello che gli sta intorno: il blocco
   era giusto in se' e sbagliato di un fattore 1.6 nel contesto. Un rapporto interno
   non dice quanto una cosa e' grande, dice solo com'e' fatta dentro.
   ⚠️ UNA proporzione NON e' stata copiata: il sottotitolo. Sul sito e' 20px sotto un
   titolo da 80; qui il titolo e' 33, e 0.25 farebbe 8px — illeggibile. Sta a 11 (0.33):
   una proporzione tenuta a mente vale finche' non produce un testo che non si legge. */
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
/* JT-101: il nome sotto la testata, centrato sulla stessa colonna. */
/* JT-103: `gap: 0` e non 2px. Sul sito «M A I S O N» attacca «JAMAL TASLAQ» senza NIENTE
   in mezzo — le due scatole sono adiacenti, scarto 0 — e l'aria che si vede e' solo il
   piombo dell'interlinea del sottotitolo. Il margine sotto vale 10.06 x 1.55 = 15.6px, che
   sommati agli 8px di `.wrap` fanno i 28px di schermo del `.jt_spacer` del sito. */
.brand-name { display: flex; flex-direction: column; align-items: center; gap: 0; text-decoration: none; color: var(--ink); max-width: 47.5rem; margin: 0 auto 0.62875rem; }
/* Marchio: monogramma SVG + nome in testo, la stessa costruzione del sito (li' il
   monogramma e' `#logo-container > img.jt-logo` e «JAMAL TASLAQ» e' il titolo `.jt_intro`,
   Roboto 300). Il PNG unico di prima sgranava ai gradini alti dello zoom. Il SVG porta
   dentro delle campiture BIANCHE — sono i vuoti delle lettere: funziona perche' `--paper`
   e' bianco pieno, su un fondo diverso si vedrebbero. */
/* JT-102: 55, non 67. Il sito NON scala il monogramma per altezza: lo mette in un box
   QUADRATO (--jt-logo-width = --jt-logo-height) con `object-fit: contain`, e l'SVG e'
   181x150, cioe' piu' largo che alto. Dentro un quadrato «contain» lo fa entrare per
   LARGHEZZA, quindi il disegno resta 103x85 device con dell'aria sopra e sotto — non
   103x103. Misurare la scatola invece del disegno faceva sembrare i due uguali mentre
   la demo era il 21% piu' grande. Qui 55 CSS x 1.55 di zoom = 85 device: il disegno. */
.brand-mark { height: 3.4375rem; width: auto; display: block; }
/* JT-104: 51.6 e non 52, `letter-spacing` normale e non .5px. Sul sito il titolo e' 80px
   di schermo con spaziatura NORMALE: 51.6 x 1.55 = 80 esatti, e il mezzo pixel di
   spaziatura moltiplicato per undici stacchi allargava la parola di 13.5px. Misurata col
   Range sul testo, non sulla scatola: 561.9 sul sito contro 575.4 qui. */
.brand-word { font: 300 3.225rem/1 'Roboto', sans-serif; letter-spacing: normal; white-space: nowrap; }
/* «SHOP» sta al marchio della demo come «MAISON» sta a quello del sito. ⚠️ Li' la
   spaziatura fra le lettere e' fatta con SPAZI LETTERALI dentro l'etichetta a DB
   («M A I S O N»); qui con `letter-spacing`, che rende uguale ma lascia la parola
   selezionabile e leggibile a uno screen reader. Il `text-indent` compensa lo spazio
   che `letter-spacing` aggiunge anche DOPO l'ultima lettera, altrimenti la parola
   risulta spostata a sinistra rispetto al centro. */
/* JT-105: 12.903 x 1.55 = 20.0, il corpo del sito. ⚠️ La LARGHEZZA dei due sottotitoli non
   puo' coincidere e non deve: le parole sono diverse — «M A I S O N» sono sei lettere,
   «SHOP» quattro. Coincidono corpo e stacco fra le lettere; la spaziatura la' e' fatta con
   spazi letterali dentro l'etichetta a DB, qui con `letter-spacing`. */
.brand-sub { font: 300 0.806438rem/1.1 'Roboto', sans-serif; letter-spacing: .35em; text-indent: .35em; white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { max-width: 47.5rem; margin: 0 auto; padding: 0.5rem 1.25rem 2.5rem; display: flex; flex-direction: column; gap: 2.125rem; }
.pagetitle { font: 400 1.875rem/1.2 'Roboto', sans-serif; text-align: center; margin: 0; }
.byline { text-align: center; font-weight: 500; font-size: 1rem; margin: 0; }
.sect { font: 700 0.8125rem/1.3 'Roboto', sans-serif; letter-spacing: 0.15625rem; text-transform: uppercase; text-align: center; margin: 0 0 0.875rem; }
.crumb { font-size: 0.6875rem; letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--muted); }
.crumb a { text-decoration: none; color: inherit; }
.center { text-align: center; }
.jt-small { font-size: 0.78125rem; color: var(--sub); line-height: 1.5; }

/* ---------- placeholder immagini ---------- */
.ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; background: #f4f2ee; border: 0.0625rem solid #ddd8d0; color: #7a746a; text-align: center; padding: 0.625rem; }
.ph span { font-size: 0.8125rem; }
.ph em { font-style: normal; font-size: 0.625rem; opacity: .55; }
.ph.dark { background: linear-gradient(120deg, #a08462, #6f5a45); border: none; color: rgba(255,255,255,.85); }
.ph.dark em { color: rgba(255,255,255,.6); }

/* ---------- banner sezione ---------- */
/* JT-209: lo stesso angolo dell'hero e delle card (`.25rem`), che il banner non aveva. `overflow:
   hidden` perche' l'angolo sta sul contenitore e l'immagine dentro va ritagliata. */
.banner { position: relative; border-radius: 0.25rem; overflow: hidden; }
.banner .ph span, .banner .ph em { display: none; }
.banner .ph, .banner img { width: 100%; height: 15rem; object-fit: cover; }
.banner-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.625rem; color: #fff; background: rgba(30,25,18,.42); text-shadow: 0 0.0625rem 0.5rem rgba(0,0,0,.35); }
.banner-frame { position: absolute; inset: 0.625rem; border: 0.0625rem solid rgba(255,255,255,.85); border-radius: 0.25rem; pointer-events: none; } /* JT-239: l'angolo del banner, non piu' squadrato; gemella di `.jt_ule_banner::after` in jt.css */
.banner-title { font: 400 1.625rem/1 'Roboto', sans-serif; letter-spacing: 0.25rem; }
.banner-rule { width: 13.75rem; border-top: 0.0625rem solid rgba(255,255,255,.8); }
.banner-sub { font-size: 0.875rem; letter-spacing: 0.0625rem; }

/* ---------- bottoni ---------- */
/* Bottoni: stessa costruzione di pastiglie e card. L'escursione sta in mezzo alle due —
   sono alti ~37px, fra i 27 della pastiglia e i 570 della card. Gli hover NON possono
   tornare a un `background` piatto: cancellerebbero i due strati. */
.jt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 0.0625rem solid transparent; border-radius: 0.25rem; padding: 0.625rem 1.125rem; font: 500 0.8125rem 'Roboto', sans-serif; color: var(--ink); box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.06); cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, #ffffff, #f8f7f4) padding-box,
              linear-gradient(180deg, #e6e2db, #bdb7ad) border-box; }
.jt-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.jt-btn:hover { background: linear-gradient(180deg, #fbfaf8, #f1efea) padding-box,
                          linear-gradient(180deg, #ded9d1, #b3ada2) border-box; }
/* Sul nero l'escursione dev'essere PIU' AMPIA che sulle superfici chiare: lo stesso salto
   in RGB, su un fondo scuro, si vede molto meno. Il primo valore (#242424 > #0a0a0a) era
   stato tarato guardandolo a 2x e a dimensione reale spariva — il bottone tornava piatto. */
.jt-btn-primary { color: #fff;
  background: linear-gradient(180deg, #383838, #000000) padding-box,
              linear-gradient(180deg, #6b6b6b, #000000) border-box; }
.jt-btn-primary:hover { background: linear-gradient(180deg, #474747, #0f0f0f) padding-box,
                                  linear-gradient(180deg, #7d7d7d, #0d0d0d) border-box; }
.jt-btn-block { width: 100%; }
.jt-btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- badge ---------- */
.jt-badge { display: inline-block; font: 700 0.625rem/1 'Roboto', sans-serif; letter-spacing: 0.075rem; text-transform: uppercase; padding: 0.375rem 0.625rem; border-radius: 0.1875rem; border: 0.0625rem solid var(--ink); color: var(--ink); background: #fff; }

/* stato (sempre blu) e attributo (dorato), entrambi con la "i" informativa */
.jt-badge-state {
  color: var(--blue);
  border-color: transparent;
  background: linear-gradient(180deg, var(--blue-bg), var(--blue-bg-2)) padding-box,
              linear-gradient(180deg, var(--blue-foil-top), var(--blue-foil-bottom)) border-box;
}
/* Due strati: il campo si ferma al padding-box, la lamina occupa il border-box.
   Serve questo giro perche' `border-image` NON rispetta `border-radius` — con quello
   gli angoli della pastiglia tornerebbero quadrati. Il bordo da 1px lo da' `.jt-badge`. */
.jt-badge-attr {
  color: var(--gold);
  border-color: transparent;
  background: linear-gradient(180deg, var(--gold-bg), var(--gold-bg-2)) padding-box,
              linear-gradient(180deg, var(--gold-foil-top), var(--gold-foil-bottom)) border-box;
}
.jt-badge .i, .kind .i { margin-left: 0.375rem; font-size: 0.75rem; line-height: 1; }
/* Il bersaglio del popup e' tutto il riquadro, non la "i" da 11px: su smartphone era
   scomoda da centrare. L'::after allarga la presa in verticale di 7px per lato — la
   pastiglia e' alta ~24px e cosi' si tocca su ~38px — senza spostare un pixel a schermo.
   Solo verticale: in orizzontale due pastiglie vicine si ruberebbero il tocco. */
[data-info] { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-info]::after { content: ''; position: absolute; inset: -0.4375rem 0; }
[data-info]:hover .i, [data-info]:focus-visible .i { opacity: .6; }
[data-info]:active { opacity: .65; }
.pills-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pills-center { justify-content: center; }

/* tipologia di produzione */
/* i 3px di padding non si vedono (la riga e' trasparente) ma portano la presa da 13 a 19px:
   con l'::after piu' generoso si tocca su ~37, contro i 27 della sola pastiglia-regola */
.kind { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.1875rem 0; font: 700 0.625rem/1 'Roboto', sans-serif; letter-spacing: 0.08125rem; color: var(--sub); }
.kind[data-info]::after { inset: -0.5625rem 0; }
/* Le righe tipologia non si maiuscolano: «WorldcApp» si scrive in un modo solo, e da
   li' la regola vale per tutte e tre («Live», «Limited Edition»). Il titolo del popup
   di WorldcApp resta invece un'eccezione agganciata alla chiave, perche' gli altri
   titoli di popup sono maiuscoli. */
#infoTitle[data-info="worldcapp"] { text-transform: none; }
.kind-ico { font-size: 0.8125rem; line-height: 1; }

/* popup informativo */
.jt-modal-info { max-width: 26.25rem; }
.jt-modal-info .prose { margin: 0; font-size: 0.90625rem; }

/* ---------- barra avanzamento ---------- */
/* Stessa costruzione delle altre superfici, ma qui i due pezzi hanno versi OPPOSTI, ed e'
   voluto: il binario e' un incavo (scuro in alto, chiaro in basso), il riempimento e' un
   pieno che sta dentro l'incavo (chiaro in alto, scuro in basso). Escursione larga perche'
   la barra e' alta 12px: su una superficie piccola e scura un salto stretto sparisce —
   stessa lezione del bottone nero. */
.bar { height: 0.75rem; background: linear-gradient(180deg, #ded9d1, #f7f5f1); border-radius: 0.375rem; overflow: hidden; display: flex; }
.bar-fill { height: 100%; background: linear-gradient(180deg, #4a4a4a, #000000); border-radius: 0.375rem 0 0 0.375rem; transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
/* Tiratura non completata: stesso gesto, in grigio. */
.bar-fill.spent { background: linear-gradient(180deg, #c8c2b8, #a9a294); }
.bar-fill.full { border-radius: 0.375rem; }
.count { font-weight: 700; font-size: 0.9375rem; }
.count .num { display: inline-block; }
.count .num.pulse { animation: pulse .9s ease; color: var(--accent); }
@keyframes pulse { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ---------- come funziona ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.steps-1 { grid-template-columns: minmax(0, 1fr); }
.step .logo-img { display: block; height: 3.375rem; width: auto; margin: 0 auto 0.875rem; }
.step .jt-small { display: block; }
.step { border: 0.0625rem solid var(--line); border-radius: 0.5rem; padding: 1rem 0.875rem; text-align: center; }
.step .n { display: inline-flex; width: 1.625rem; height: 1.625rem; border: 0.09375rem solid var(--ink); border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; margin-bottom: 0.5rem; }
.step b { display: block; font-size: 0.875rem; margin-bottom: 0.25rem; }

/* ---------- card campagna (hub) ---------- */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem; }
.camp-card { border: 0.0625rem solid var(--line); border-radius: 0.5rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; text-decoration: none; color: inherit; }
.camp-card .ph, .camp-card > img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 0.25rem; }
.camp-card .jt-badge { align-self: flex-start; }
.camp-card h3 { margin: 0; font: 500 1rem 'Roboto', sans-serif; }
.camp-card .designer { font-size: 0.78125rem; color: var(--sub); }
/* Edizione non partita: la card NON si sbiadisce piu' (le pastiglie devono leggersi
   colorate come ovunque). Il "non e' andata" lo dice la barra grigia, che resta. */
.camp-card.off .bar-fill { background: linear-gradient(180deg, #c8c2b8, #a9a294); }
.meta { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--sub); }
.meta b { color: var(--text); }

/* ---------- fascia patrocinio ---------- */
/* Era una fascia a tutta larghezza: `margin: 0 -20px` annullava il padding della colonna
   e i soli filetti sopra/sotto avevano senso. Ma il bordo che raggiungeva era quello della
   COLONNA, non della finestra: si vedeva dove finiva, e senza i lati sembrava un riquadro
   aperto. La versione davvero a tutta pagina (`calc(50% - 50vw)`) e' stata misurata e
   scartata: con lo `zoom` del telefono i `vw` si risolvono sulla viewport NON zoomata, la
   fascia sborda (23px per lato, misurati quando lo zoom era 1.12: oggi e' 1.2 e sarebbe
   peggio) e apre lo scroll orizzontale. Quindi si chiude, come tutti gli altri pannelli. */
.patro {
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
  text-align: center;
  padding: 0.8125rem 1.25rem;
  background: linear-gradient(180deg, #f6f4f0, #eeeae3) padding-box,
              linear-gradient(180deg, #e9e5de, #cdc7bd) border-box;
}
.patro b { display: block; font-size: 0.75rem; letter-spacing: 0.15625rem; text-transform: uppercase; }
.patro span { font-size: 0.75rem; color: var(--sub); }

/* ---------- modulo progresso ---------- */
.progress-box { border: 0.0625rem solid var(--line); border-radius: 0.5rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.05); }
.progress-top { display: flex; align-items: baseline; gap: 0.625rem; }
.progress-top .big { font: 700 1.875rem/1 'Roboto', sans-serif; }
.progress-meta { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 500; }
.microcopy { font-size: 0.78125rem; color: var(--sub); text-align: center; line-height: 1.5; }
/* Riga «Consiglia a un amico»: sta sotto il riquadro dell'acquisto, quindi e' un'azione
   secondaria e ne ha l'aspetto — bottone chiaro, non il nero della chiamata all'azione. */
.share-row { display: flex; justify-content: center; margin-top: -1.125rem; }
.share-btn i { font-size: 0.9375rem; line-height: 1; }
.status-line { font-weight: 700; font-size: 0.9375rem; text-align: center; }

/* ---------- sezioni pagina campagna ---------- */
.hero { }
.hero .ph, .hero img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 0.25rem; }
.two-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
.two-imgs .ph, .two-imgs img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 0.25rem; }
/* Il video e' servito da noi: la proporzione e' quella vera del file (1168x768), cosi'
   non ci sono bande nere. L'aspect-ratio serve comunque, perche' con preload="none"
   il browser non conosce le dimensioni finche' non si preme play: senza, il riquadro
   nascerebbe alto zero e la pagina salterebbe. */
.video { border-radius: 0.25rem; overflow: hidden; background: #000; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 1168 / 768; background: #000; }
.split { display: flex; gap: 1.125rem; align-items: flex-start; }
/* ⚠️ In `.split` finiscono DUE famiglie di immagini con proporzioni diverse: i dettagli
   della scheda campagna, che sono **quadrati** (1024×1024), e i moodboard della scheda
   designer, che sono **3:2** (1536×1024). Un rapporto fisso qui taglia per forza una
   delle due — c'era `aspect-ratio: 3/2` + `cover`, e i dettagli perdevano **un terzo
   dell'altezza**, ritagliata sopra e sotto. Quindi l'immagine tiene la SUA proporzione:
   niente `aspect-ratio`, niente `object-fit`. Il placeholder invece un rapporto ce l'ha,
   perche' non ha un'immagine da cui dedurlo. */
.split img { width: 18.75rem; height: auto; border-radius: 0.25rem; flex-shrink: 0; }
.split .ph { width: 18.75rem; aspect-ratio: 3 / 2; border-radius: 0.25rem; flex-shrink: 0; }
.prose { margin: 0; color: var(--text); }

/* riquadri persona: stessa struttura per mentor e scheda designer */
.mentor, .designer-card { border: 0.0625rem solid var(--line); border-radius: 0.5rem; padding: 1.125rem; display: flex; gap: 1rem; align-items: center; }
/* Stessa costruzione delle card, ma in crema: la fascia mentor e' un pannello pieno, non
   una superficie bianca, quindi il campo parte da --soft e il bordo e' un filo piu' caldo
   per staccarsi dal crema invece che dal bianco. Escursione fra card e bottone: e' alta
   ~110px. */
.mentor {
  align-items: flex-start;
  border-color: transparent;
  background: linear-gradient(180deg, #f6f4f0, #eeeae3) padding-box,
              linear-gradient(180deg, #e9e5de, #cdc7bd) border-box;
}
.mentor .info, .designer-card .info { flex-grow: 1; }
/* min-width: l'avatar non si schiaccia nemmeno quando è dentro un link in un flex */
.mentor .ph, .mentor img, .designer-card .ph, .designer-card img { width: 4.5rem; min-width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mentor .avatar-link, .designer-card .avatar-link { width: 4.5rem; flex-shrink: 0; }
.mentor > .jt-btn, .designer-card > .jt-btn { align-self: center; flex-shrink: 0; }
.patro-ava img { min-width: 3rem; }
.mentor h4 { margin: 0 0 0.375rem; font: 700 0.9375rem 'Roboto', sans-serif; }
.mentor .sign { font-size: 0.78125rem; color: var(--sub); margin-top: 0.5rem; }

.designer-card h4 { margin: 0 0 0.1875rem; font: 500 0.9375rem 'Roboto', sans-serif; }


/* ---------- faq / evidenza ---------- */
.faq { border: 0.0625rem solid var(--line); border-radius: 0.5rem; padding: 0.9375rem 1.125rem; }
.faq b { display: block; font-size: 0.875rem; margin-bottom: 0.25rem; }
.hl { border: 0.09375rem solid var(--accent); background: var(--accent-bg); border-radius: 0.375rem; padding: 0.875rem 1rem; }
.hl b { display: block; font-size: 0.875rem; margin-bottom: 0.25rem; }

/* ---------- feed produzione ---------- */
.update { border: 0.0625rem solid var(--line); border-radius: 0.5rem; padding: 1rem; display: flex; gap: 1rem; align-items: flex-start; }
.update .ph, .update img { width: 6.5625rem; height: 6.5625rem; object-fit: cover; border-radius: 0.25rem; flex-shrink: 0; }
.update b { display: block; font-size: 0.84375rem; margin-bottom: 0.3125rem; }

/* ---------- aiuto / fallback umano ---------- */
.help { border: 0.0625rem solid var(--line); border-radius: 0.5rem; padding: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.625rem; text-align: center; }
.help b { font-size: 0.875rem; }
.help i { font-size: 1.3125rem; line-height: 1; color: var(--ink); }

/* ---------- footer ---------- */
.foot { text-align: center; padding: 1.625rem 1.25rem 2.5rem; color: var(--sub); font-size: 0.8125rem; border-top: 0.0625rem solid var(--line); margin-top: 1.25rem; }
.foot nav { margin-bottom: 0.5rem; }
.foot a { text-decoration: none; }
.foot-copy { font-size: 0.75rem; }

/* ---------- modale riserva ---------- */
.overlay { position: fixed; inset: 0; background: rgba(20,17,12,.5); display: none; align-items: center; justify-content: center; z-index: 50; padding: 1.25rem; }
.overlay.open { display: flex; }
.jt-modal { background: #fff; border-radius: 0.5rem; width: 26.25rem; max-width: 100%; padding: 1.375rem; display: flex; flex-direction: column; gap: 0.875rem; box-shadow: 0 0.75rem 2.5rem rgba(0,0,0,.25); }
.jt-modal-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 0.0625rem solid var(--line); padding-bottom: 0.625rem; }
.jt-modal-head h3 { margin: 0; font: 700 0.875rem 'Roboto', sans-serif; letter-spacing: 0.09375rem; text-transform: uppercase; }
.jt-modal-close { background: none; border: none; cursor: pointer; padding: 0.25rem; }
.jt-modal-close { font-size: 1.0625rem; line-height: 1; color: var(--ink); }
.mstep { display: none; flex-direction: column; gap: 0.875rem; }
.mstep.on { display: flex; }
.pills { display: flex; gap: 0.5rem; }
.pill { border: 0.09375rem solid var(--ink); background: #fff; width: 3rem; padding: 0.5625rem 0; text-align: center; font: 600 0.8125rem 'Roboto', sans-serif; border-radius: 0.25rem; cursor: pointer; }
.pill.on { background: var(--ink); color: #fff; }
.mrow { display: flex; justify-content: space-between; font-size: 0.875rem; }
.mrow b { font-weight: 600; }
.mlink { font-size: 0.8125rem; color: var(--sub); text-align: center; cursor: pointer; background: none; border: none; font-family: inherit;
         padding: 0.0625rem 0.375rem; }
/* ⚠️ Quel `padding` non e' un ritocco: e' il default del BROWSER sui <button> (1px 6px),
   scritto qui in rem perche' scali. Finche' c'era lo `zoom` scalava da solo — lo zoom
   ingrandisce tutto, anche cio' che non e' tuo. Senza, restava fermo a 1px mentre il
   resto cresceva, e il modale della riserva perdeva 1,09px di altezza. E' l'unica misura
   del browser che qui si vedeva: gli altri due <button> (.pill, .jt-modal-close) il
   padding ce l'hanno gia' loro. */
.success-big { font: 700 1.375rem/1.3 'Roboto', sans-serif; text-align: center; }
.check-ico { display: flex; justify-content: center; }
.check-ico i { font-size: 2.75rem; line-height: 1; color: var(--ok); }

@media (max-width: 640px) {
  /* Sul telefono i testi risultavano piccoli. Si scala TUTTO in proporzione — testo,
     spaziature, pastiglie, bersagli da toccare — invece di ritoccare venti font-size uno
     per uno: e' lo stesso meccanismo gia' usato qui sotto per gli schermi grandi.
     La media query legge la larghezza NON zoomata, quindi non si autoalimenta. */
  html { font-size: 19.2px; }
  /* ⚠️ Qui stava la pezza `.video video { zoom: 0.8333333 }` (JT-072): WebKit sbagliava
     a posizionare i comandi nativi del <video> dentro un contesto `zoom` — sull'iPhone il
     tasto play finiva spostato a destra di (larghezza_fisica - larghezza_di_layout)/2. Il
     difetto vive SOLO dentro `zoom`: caduto lo zoom, e' caduta anche la pezza. Era gia'
     previsto nell'audit come effetto collaterale gradito del passo 7. */
  /* ⚠️ Conseguenza dell'alzata da 1.12 a 1.2 (JT-071): la riga «Consegna in 2-3 giorni
     lavorativi · prezzo» smetteva di stare su una riga sola a 375px — la soglia misurata
     e' fra 1.16 e 1.18. Un punto di font in meno su QUELLA riga, che e' informazione
     secondaria sotto il numero grande, la rimette in riga e lascia il resto piu' grande.
     A 320px va a capo comunque, come faceva gia' prima dell'alzata. */
  .progress-meta { font-size: 0.8125rem; }
  /* Il banner e' tarato sul desktop: sul telefono i 240px si mangiavano un quinto di
     schermo, e il titolo — 26px con 4px di spaziatura — andava a capo SBORDANDO dalla
     cornice bianca. Si accorcia il riquadro e si rimpicciolisce la scritta quanto basta
     a farla stare su una riga dentro la cornice. */
  /* Sei icone piu' il marchio su una riga sola: a 375px, con le misure del desktop, la
     riga sborda. Si stringono icone e marchio quanto basta a starci. */
  /* JT-103: stessi tre numeri, misurati sul sito a 375px e divisi per lo `zoom: 1.2`.
       schermo → disegno  9.3 → padding-top 7.75      disegno → wordmark 7.0 → 5.83 */
  .chrome { padding: 0.484375rem 0.875rem 0.364375rem; }
  /* JT-106: 19.17 x 1.2 = 23px di schermo, la misura del sito a 375px. Le tre regole
     che stavano qui (glifo, tondo, pallino) non servono piu': scendono dalla variabile. */
  :root { --ico: 1.198125rem; }
  .jt-ico-dot .dot { border-width: 0.078125rem; }
  /* Storia di questi tre numeri, perche' spiega perche' non sono i rapporti del sito.
     Fino a JT-100 il wordmark stava IN MEZZO alle icone, sulla stessa riga, e a 375px non
     ci stava: sei icone piu' dodici lettere in 312px di viewport CSS facevano scrollWidth
     603 coi numeri del desktop e 469 coi rapporti del telefono del sito. Da JT-101 il
     wordmark e' sceso su una riga sua — la stessa struttura del sito, dove e' un blocco
     separato (`jt_renderTitle`) — quindi il vincolo di larghezza non c'e' piu' e i valori
     sono saliti a quelli del sito: monogramma con JT-102, wordmark con JT-104,
     sottotitolo con JT-105. Il blocco marchio ora e' pari su entrambe le larghezze. */
  /* JT-103: sotto il marchio il sito lascia 10px di schermo (il `.jt_spacer` si accorcia
     da 28 a 10), e gli 8px di `.wrap` moltiplicati per lo zoom 1.2 fanno gia' 9.6. */
  .brand-name { margin-bottom: 0; }
  /* JT-105: 38.83 x 1.2 = 46.6, l'altezza DISEGNATA sul sito (li' il box e' 56 e
     `object-fit: contain` ne dipinge 46.6 — vedi JT-102). Erano 38, un pixel in meno. */
  .brand-mark { height: 2.426875rem; }
  /* JT-104: 31.25 x 1.2 = 37.5, la misura del sito a 375px (era 33.6, il 12% in meno).
     Ci sta largo: il testo occupa 263px di schermo su 375. */
  .brand-word { font-size: 1.953125rem; letter-spacing: normal; }
  /* JT-105: 10.9375 x 1.2 = 13.125, il corpo del sito a 375px (era 12). */
  .brand-sub { font-size: 0.683594rem; }
  .banner .ph, .banner img { height: 9.6875rem; }
  .banner-title { font-size: 1.25rem; letter-spacing: 0.125rem; }
  .banner-rule { width: 9.375rem; }
  .banner-sub { font-size: 0.8125rem; }
  .banner-overlay { gap: 0.4375rem; }
  .grid2, .steps, .two-imgs { grid-template-columns: 1fr; }
  .split { flex-direction: column; }
  .mentor { flex-direction: column; align-items: flex-start; }
  /* Impilata a sinistra la scheda profilo restava sbilanciata: avatar, nome e riga di
     ruolo allineati a sinistra e il bottone che galleggiava al centro da solo — perche'
     `.designer-card > .jt-btn` ha `align-self: center` fin dall'inizio. Ora e' centrato
     tutto. ⚠️ `.mentor` resta a sinistra apposta: porta un paragrafo di prosa, e la
     prosa centrata si legge peggio. Le due non compaiono mai nella stessa pagina. */
  .designer-card { flex-direction: column; align-items: center; text-align: center; }
  .split .ph, .split img { width: 100%; }
}

/* Telefoni stretti (iPhone SE e simili): a 320px il titolo del banner usciva ancora
   dalla cornice di 5px per lato. Un secondo scalino, solo per la scritta. */
@media (max-width: 380px) {
  .banner-title { font-size: 1.0625rem; letter-spacing: 0.09375rem; }
  .banner-rule { width: 7.8125rem; }
}

/* Schermi grandi: la pagina scala in proporzione (colonna, tipografia, immagini) — e'
   lo stesso `zoom` del telefono, al contrario.

   ⚠️ Ma solo FINO A UN PUNTO, ed e' la cosa da capire prima di toccare questo blocco.
   Una finestra piu' larga sullo stesso monitor NON e' un monitor piu' grande: e' solo piu'
   spazio. Scalare lo `zoom` in proporzione alla larghezza fino in fondo faceva raddoppiare
   il testo passando da mezzo schermo a schermo intero sullo stesso 4K — stessa distanza,
   stessi occhi, testo enorme (era `zoom 2.95` a 2560px). Quindi:

   - fino a 1200px lo `zoom` sale con la finestra e si ferma a **1.55** (il punto giusto,
     tarato su un 4K a meta' schermo = 1280 CSS px, che e' come la demo si guarda davvero);
   - oltre, il testo cresce di pochissimo (1.65, 1.8, 2 — solo per i monitor davvero enormi,
     dove ogni CSS px e' fisicamente piu' piccolo) e a prendersi lo spazio in piu' e' la
     **colonna**, che si allarga da 700 a 1060.

   Sono due manopole con due mestieri: lo `zoom` decide quanto e' grande il TESTO, la
   colonna quanta ARIA resta ai lati. Le media query leggono la larghezza NON zoomata,
   quindi la scala non si autoalimenta; e ogni gradino tiene la larghezza utile ben sopra
   i 640px, o scatterebbe il blocco del telefono. */
@media (min-width: 1000px) { html { font-size: 20.8px; }  .wrap, .chrome { max-width: 43.75rem; } }
@media (min-width: 1100px) { html { font-size: 22.4px; } }
@media (min-width: 1200px) { html { font-size: 24.8px; } }
@media (min-width: 1500px) { .wrap, .chrome { max-width: 50rem; } }
@media (min-width: 1800px) { html { font-size: 26.4px; } .wrap, .chrome { max-width: 53.75rem; } }
@media (min-width: 2200px) { .wrap, .chrome { max-width: 57.5rem; } }
@media (min-width: 2600px) { html { font-size: 28.8px; }  .wrap, .chrome { max-width: 61.25rem; } }
@media (min-width: 3200px) { html { font-size: 32px; }    .wrap, .chrome { max-width: 66.25rem; } }

/* avatar cliccabile verso la scheda profilo */
/* fila di avatar: una firma sola resta centrata, due stanno affiancate allo stesso livello */
.avatars { display: flex; justify-content: center; gap: 0.75rem; margin-top: 0.375rem; }
/* Superfici "card": stessa tecnica delle pastiglie (doppio strato padding-box/border-box,
   perche' `border-image` squadrerebbe gli angoli). Fuori resta `.mentor`, che non e' una
   card ma un pannello crema, e le strisce senza cornice (`.patro`, `.foot`, `.jt-modal-head`). */
.camp-card, .step, .progress-box, .designer-card, .faq, .update, .help {
  border-color: transparent;
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2)) padding-box,
              linear-gradient(180deg, var(--silver-top), var(--silver-bottom)) border-box;
}

/* avatar di marchio: il logo sta su fondo bianco come la pagina, senza filetto sparirebbe */
.ava-logo { background: #fff; border: 0.0625rem solid var(--line); }
.avatar-link { display: block; text-decoration: none; }
.avatar-link:hover img { opacity: .88; }
.sect-ico { display: block; text-align: center; font-size: 1.625rem; line-height: 1; color: var(--ink); margin-bottom: 0.625rem; }
.patro-ava img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; margin: 0 auto 0.5rem; }


/* JT-278: il consenso alle condizioni nella modale di riserva, e la pastiglia «non pubblicato» che
   vede solo chi fa l'anteprima di un capo nascosto (jt_can_preview). */
.jt-consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8125rem; line-height: 1.35; cursor: pointer; }
.jt-consent input { margin: 0.2rem 0 0; flex: 0 0 auto; }
.jt-consent a { color: inherit; text-decoration: underline; }
.jt-badge-hidden { background: #b91c1c; border-color: #b91c1c; color: #fff; }