/* ============================================================
   MONO — Layer di POTENZIAMENTO (non sostituisce nulla)
   Fase 1: sistema-colore dei titoli bicolore.
   Fase 2: interazioni (card tilt, transizione "dal basso").
   Solo aggiunte; nessun testo/video/bottone toccato.
   ============================================================ */

/* ---------- FASE 1 — colori titoli ---------- */

/* SEZIONI CHIARE: enfasi in TERRACOTTA */
.definition-section-title span + span { color: var(--mono-terracotta); }
.definition-people-emphasis { color: var(--mono-terracotta); }
.section-heading h2 em,
.page-hero h1 em,
.page-section h2 em {
  color: var(--mono-terracotta);
  font-style: italic;
}

/* SEZIONI SCURE: enfasi in ORO CHAMPAGNE (specificità alzata per battere la regola generica) */
.product-system .section-heading .product-system-title em { color: var(--mono-champagne); }
.cinema-claim .soft { color: var(--mono-champagne); }

/* ---------- FASE 2 — interazioni ---------- */

/* Card che si inclinano verso il cursore (il transform lo mette il JS).
   Qui solo la fluidità; l'hover-lift esistente resta come fallback senza JS. */
@media (hover: hover) and (pointer: fine) {
  /* Il tilt e il rientro morbido li fa TUTTI il JS (interpolazione per frame).
     A riposo non si tocca nulla (vince la comparsa di Codex). Mentre il JS
     controlla il transform, la transizione CSS su transform va AZZERATA: se
     restasse, ogni frame verrebbe animato e la card diventerebbe una melma.
     will-change solo durante il tilt (tenerlo sempre acceso promuove ogni
     card su un livello a se', spreco di memoria). */
  .page-card.is-tilting,
  .local-info-card.is-tilting,
  .phone-card.is-tilting,
  .app-reason-grid article.is-tilting,
  .app-qr.is-tilting,
  .pdf-panel.is-tilting,
  .convivium-mark.is-tilting,
  .principio.is-tilting,
  .cta-block.is-tilting {
    transition: box-shadow 350ms ease, border-color 350ms ease;
    will-change: transform;
  }
}

/* ============================================================
   HEADER piu' reattivo (giro fluidita' 17/7)
   Cambiando stato animava padding/top/left/right per 220ms: sono
   proprieta' che obbligano il browser a rifare il LAYOUT ad ogni
   fotogramma — da qui la sensazione di menu "lento a riapparire".
   Ora la geometria scatta subito e restano in transizione solo
   colore e ombra, che sono gratis. Il blur del vetro scende da 22px
   a 14px: differenza quasi invisibile, costo molto minore su mobile.
   ============================================================ */
.site-header {
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
  /* NIENTE backdrop-filter (2° giro fluidita' 17/7): il vetro sfocato su un
     elemento fisso si ricalcola ad OGNI fotogramma di scroll — e in fondo
     pagina, con braci + "prossimo capitolo" in movimento, la tendina arrancava
     nel ricomparire. Visivamente non cambia nulla: il fondo dell'header e'
     gia' opaco al ~90%. translateZ la promuove su un livello suo: lo scroll
     della pagina non la ridisegna piu'. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateZ(0);
}

/* ============================================================
   QUESTIONARIO EVENTI (card crema, dentro .page-card gia' stilata)
   ============================================================ */
.mono-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-top: 18px;
}
.mono-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(38, 35, 33, 0.66);
}
.mono-form-wide { grid-column: 1 / -1; }
/* Asterisco rosso dei campi obbligatori (25/7, chiesto dall'utente: senza
   email E cellulare non si può richiamare chi chiede un evento).
   ⚠️ .mono-form label è display:grid → un elemento sciolto nel label finirebbe
   su una RIGA A SÉ: per questo il testo dell'etichetta sta dentro
   .mono-form-caption e l'asterisco vive lì dentro, inline. */
/* Doppia classe di proposito: la scheda (.page-card span / simili) colora
   TUTTI gli span di terracotta e scavalcava il singolo .mono-req — misurato
   live: usciva #B85C38 invece del rosso. Con .mono-form davanti si vince. */
/* ============================================================
   SOCIAL (26/7) — footer + scheda Contatti

   Nessun colore nuovo: nel footer si usa la stessa crema dei link
   che ci sono gia' (.site-footer a), sulla scheda chiara la
   terracotta scura del marchio. L'icona prende il colore dal testo
   (currentColor), quindi segue da sola il contesto in cui sta.
   Area di tocco 44px come chiede l'accessibilita', anche se
   l'icona disegnata dentro e' piu' piccola.
   ============================================================ */
.mono-social {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.mono-social__frase {
  color: rgba(255, 249, 238, 0.74);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}
.mono-social__lista {
  align-items: center;
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mono-social__lista a {
  align-items: center;
  border-radius: 12px;
  /* box-sizing + min-*: senza, l'arrotondamento dei sub-pixel faceva uscire
     43px misurati e si scendeva sotto il minimo di 44 dell'accessibilita'. */
  box-sizing: border-box;
  color: rgba(255, 249, 238, 0.74);
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  transition: color 160ms ease, background-color 160ms ease;
}
/* 28/7 — erano 22px e il proprietario sul PC "non le aveva manco viste".
   Portate a 26 (30 nella home): il tasto resta 44x44, quindi cresce solo
   il disegno e NON l'ingombro — nella hero ogni pixel era stato sudato. */
.mono-social__lista svg { height: 26px; width: 26px; }
.mono-social__lista a:hover,
.mono-social__lista a:focus-visible {
  background: rgba(255, 249, 238, 0.14);
  color: var(--mono-cream);
}

/* La scheda "Seguici" della pagina Contatti e' stata TOLTA il 28/7
   ("puliti, lineari e funzionali. Less is more"): con lei se ne vanno
   anche queste regole, che non avevano piu' niente da vestire.
   Al suo posto c'e' il tasto "Seguici sui social" nella chiusura. */

/* Telefono: la frase va a capo sopra le icone invece di stringersi. */
@media (max-width: 560px) {
  .mono-social { gap: 8px 12px; }
  .mono-social__frase { flex-basis: 100%; }
}

.mono-form .mono-req,
.mono-form-card .mono-req { color: #A83A28; font-weight: 800; }
.mono-form-actions small .mono-req { font-size: 1.1em; }
.mono-form input,
.mono-form select,
.mono-form textarea {
  appearance: none;
  border: 1px solid rgba(38, 35, 33, 0.22);
  border-radius: 12px;
  background: #fffdf8;
  color: var(--mono-anthracite, #262321);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  padding: 11px 13px;
  min-height: 46px;
}
.mono-form textarea { min-height: 84px; resize: vertical; }
.mono-form input:focus-visible,
.mono-form select:focus-visible,
.mono-form textarea:focus-visible {
  outline: 2px solid var(--mono-terracotta, #b85c38);
  outline-offset: 1px;
}
/* La RIGA del consenso e' una frase, non l'etichetta di un campo: senza questa
   regola eredita da .mono-form label il maiuscolo + spaziatura e sembra un
   titoletto urlato invece di una cosa da leggere e spuntare. */
.mono-form label.mono-form-consenso {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  color: rgba(38, 35, 33, 0.78);
  cursor: pointer;
}

/* La casella del consenso: NON deve ereditare il reset dei campi di testo
   (appearance:none + bordo + min-height la rendevano un riquadro vuoto senza
   spunta). Qui la riportiamo a casella vera, con la spunta verde-oliva. */
.mono-form input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  accent-color: #6e6a3c;
  flex: none;
  cursor: pointer;
}
.mono-form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.mono-form-actions small {
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  font-size: 12.5px;
  color: rgba(38, 35, 33, 0.62);
  max-width: 380px;
}
.mono-form-actions small a { color: var(--mono-terracotta-dark, #a83a28); font-weight: 800; }
@media (max-width: 640px) {
  .mono-form { grid-template-columns: 1fr; }
}

/* conferma "email copiata" (per TUTTI i bottoni mailto del sito);
   left/top li mette il JS in base al bottone cliccato */
.mono-copiato {
  position: fixed;
  z-index: 2147483001;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--mono-terracotta, #b85c38);
  color: var(--mono-cream, #f4ecdd);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  /* NESSUNA animazione d'ingresso, di proposito: un'animazione avviata ma
     congelata (animazioni ridotte, pagina non "visibile", browser che
     throttla) inchioda l'elemento al suo fotogramma iniziale — cioe'
     opacity:0 — e l'avviso non compare MAI. Un avviso che puo' sparire e'
     peggio che un avviso senza fronzoli: qui compare e basta. */
  opacity: 1;
}
.mono-copiato.is-out {
  animation: mono-copiato-out 320ms ease-in forwards;
}
@keyframes mono-copiato-out {
  to { opacity: 0; transform: translateY(-6px); }
}
.site-header .header-action {
  position: relative;
}

/* Transizione "dal basso" col SIPARIO (come il prototipo approvato).
   Non dipende dalle view-transition del browser: funziona ovunque.
   Click → il pannello scuro SALE a coprire la pagina; si naviga sotto
   copertura; sulla pagina nuova il pannello ESCE verso l'alto rivelando
   il contenuto dal basso. Gestito da mono-enhance.js + inline script. */
@view-transition { navigation: none; }

html.mono-curtain-in::before,
html.mono-curtain-cover::before,
html.mono-curtain-exit::before {
  content: "";
  position: fixed;
  inset: -2vh 0;
  z-index: 2147483000;
  background: linear-gradient(180deg, #221b16, #150f0a);
  pointer-events: none;
}
@keyframes mono-curtain-su  { from { transform: translateY(103%); } to { transform: translateY(0); } }
@keyframes mono-curtain-via { from { transform: translateY(0); } to { transform: translateY(-103%); } }
html.mono-curtain-in::before   { animation: mono-curtain-su 440ms cubic-bezier(0.5, 0.02, 0.2, 1) both; }
html.mono-curtain-cover::before { transform: translateY(0); }
html.mono-curtain-exit::before  { animation: mono-curtain-via 640ms cubic-bezier(0.6, 0.05, 0.2, 1) both; }

/* la pagina vecchia viene "spinta" su mentre il sipario sale;
   la nuova arriva con una leggera salita mentre il sipario esce */
html.mono-curtain-in main {
  transform: translateY(-26px);
  opacity: 0.8;
  transition: transform 440ms cubic-bezier(0.5, 0.02, 0.2, 1), opacity 440ms ease;
}
@keyframes mono-main-arriva { from { transform: translateY(34px); opacity: 0; } }
html.mono-curtain-exit main { animation: mono-main-arriva 640ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }

/* Braci di falò (canvas montato via JS nelle sezioni scure: prodotti + footer).
   Il canvas sta a z0; il contenuto della sezione va sopra. */
.mono-embers { position: absolute; inset: 0; pointer-events: none; }
.site-footer { position: relative; }
.product-system > :not(.mono-embers),
.site-footer > :not(.mono-embers) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   QR ingrandito: RIDAI IL CURSORE (bug segnalato 17/7 sera)
   Il sito usa un cursore-glow custom: mono-engineering.css mette
   `cursor: none !important` su tutta la pagina quando c'e'
   `.mono-drop-active`. Il glow e' disegnato su body::before, che sta
   DIETRO il backdrop del <dialog> aperto con showModal(): dentro il
   riquadro non si vede ne' il cursore vero ne' il glow -> impossibile
   trovare la X per chiudere. Qui, col dialog aperto, il cursore vero
   torna. Specificita' alzata con `body.qr-dialog-open` per battere le
   regole `.mono-drop-active *` (entrambe !important).
   ============================================================ */
body.qr-dialog-open .app-qr-dialog,
body.qr-dialog-open .app-qr-dialog *,
.app-qr-dialog::backdrop {
  cursor: auto !important;
}
body.qr-dialog-open .app-qr-dialog a,
body.qr-dialog-open .app-qr-dialog button,
body.qr-dialog-open .app-qr-dialog [role="button"],
body.qr-dialog-open .app-qr-dialog__close {
  cursor: pointer !important;
}
/* La X di chiusura piu' evidente: piena terracotta, un filo piu' grande.
   L'utente diceva "e' un casino tornare indietro" -> deve saltare all'occhio. */
body.qr-dialog-open .app-qr-dialog__close {
  background: var(--mono-terracotta, #b85c38);
  color: var(--mono-cream, #f4ecdd);
  border-color: rgba(0, 0, 0, 0.15);
  width: 48px;
  height: 48px;
  font-size: 30px;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   CONFERMA della richiesta evento — prende il posto del modulo.
   Prima c'era solo una nota volante che spariva in due secondi: chi
   mandava la richiesta restava senza il codice pratica, che pure l'app
   restituisce. Questo riquadro RESTA a schermo e si puo' fotografare.
   ============================================================ */
.mono-eventi-ok {
  background: var(--mono-cashmere, #f4ecdd);
  border: 1px solid rgba(38, 35, 33, 0.12);
  border-radius: var(--radius-medium, 22px);
  padding: clamp(22px, 5vw, 34px);
  text-align: center;
  color: var(--mono-anthracite, #262321);
}
.mono-eventi-ok__titolo {
  margin: 0;
  font-size: clamp(20px, 3.4vw, 26px);
  font-weight: 700;
  color: var(--mono-sage, #4e6b47);
}
.mono-eventi-ok__etichetta {
  margin: 18px 0 2px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}
.mono-eventi-ok__codice {
  margin: 0;
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 700;
  letter-spacing: 0.12em;
  /* Un codice si legge carattere per carattere e a volte si ricopia a mano. */
  font-variant-numeric: tabular-nums;
}
.mono-eventi-ok__testo {
  margin: 16px auto 0;
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.6;
  opacity: 0.8;
}

/* ============================================================
   IL CURSORE E' UNA NUVOLA DI FARINA (28/7 sera)

   Scelta sua fra quattro provate dal vivo su /prova-cursore/:
   "nuvola di farina e' la mia scelta". Prima era una goccia d'olio
   (lente oliva con riflesso oro e bordo netto).

   ⚠️ SCRITTO QUI E NON IN mono-engineering.css, che e' di Codex:
   questo file carica DOPO il suo, quindi vince a parita' di peso
   senza doverlo modificare. Stessa regola gia' seguita altrove.

   ⚠️ Il corpo deve vedersi su DUE fondi opposti: il buio della home
   e le schede crema. Per questo non e' bianco e basta, ma ha
   un'ombra portata scura sotto: gli fa da bordo dove il chiaro
   sparirebbe. Stessa ragione dell'ombra sui granelli nel JS.
   ============================================================ */
.mono-drop__lens {
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .97) 0 16%,
                    rgba(248, 243, 232, .78) 40%,
                    rgba(244, 236, 221, .26) 66%,
                    transparent 80%);
  border: none;
  /* forma morbida e un po' irregolare: una nuvoletta, non un cerchio */
  border-radius: 52% 48% 44% 56% / 50% 56% 44% 50%;
  box-shadow:
    0 0 16px rgba(244, 236, 221, .34),
    0 3px 9px rgba(32, 29, 26, .34);
  height: 24px;
  min-width: 24px;
}

/* il rilievo a scodella della goccia d'olio qui non c'entra: la farina
   non ha una superficie lucida. Lasciato nel DOM (lo crea il JS di
   Codex) ma reso innocuo. */
.mono-drop__highlight {
  box-shadow: none;
}

/* niente vetro: la farina non rifrange */
.mono-drop.has-refraction .mono-drop__lens {
  backdrop-filter: none;
}

/* ------------------------------------------------------------
   LA PILLOLA CON LA SCRITTA (ENTRA / ASSAGGIA / PORTAMI...)

   🐞 ERRORE MIO, segnalato da lui: l'avevo fatta CREMA lasciando la
   scritta color crema che arriva da mono-engineering.css. Risultato
   misurato: 1,06 di contrasto, cioe' scritta bianca su bianco, e sui
   tasti la parola spariva. Aveva ragione.

   Ha chiesto la scritta DORATA. Misurato prima di sceglierne una:
     oro su pillola crema ............ 2,06  (10px: serve 4,5 -> NO)
     oro su pillola scura ............ 6,50  ✅
   E la pillola stessa deve vedersi su fondi opposti:
     pillola crema su scheda crema ... 1,03  (spariva anche li')
     pillola ORO su tasto oro ........ 1,00  (spariva del tutto: il
        tasto dove l'ha vista, "Scopri come funziona", E' dorato)
     pillola SCURA su tasto oro ...... 6,50 · su scheda crema 12,95

   ➡️ Percio': pillola scura + scritta oro + BORDO CHIARO. Il bordo
   non e' un vezzo: sul fondo scuro la pillola scura fa 1,13 e
   sparirebbe: e' il bordo a darle il contorno (crema su scuro 15,16).
   Era esattamente il mestiere della goccia d'olio di prima, che il
   bordo ce l'aveva — togliendolo avevo rotto io una cosa che
   funzionava.
   ------------------------------------------------------------ */
.mono-drop.has-label .mono-drop__lens {
  background: rgba(38, 33, 28, .94);
  border: 1px solid rgba(244, 236, 221, .78);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(32, 29, 26, .42);
  height: 42px;
  min-width: 42px;
}
.mono-drop.has-label .mono-drop__label {
  color: var(--mono-champagne);
}

/* al clic la nuvola si schiaccia un po' di piu' dell'olio: e' polvere */
.mono-drop.is-pressed .mono-drop__lens {
  filter: none;
  scale: 0.82;
}

/* chi ha chiesto meno animazioni: nuvola ferma e nessuna scia
   (la scia la spegne gia' il JS, questa e' la rete dello stile) */
@media (prefers-reduced-motion: reduce) {
  .mono-drop__trail { display: none; }
}

/* ============================================================
   ☎️ IL RECAPITO NELLA SCHEDA CONTATTI (15/8/2026)
   Il numero e il tasto WhatsApp, dentro la scheda "Telefono" di
   /contatti/. Li scrive mono-enhance.js leggendoli dal punto unico
   window.MONO_TELEFONO; qui c'e' solo come si vedono.
   ⚠️ Stesse misure dei tasti social: tocco da 44px minimo, che sul
   telefono e' la soglia sotto la quale il dito prende quello sbagliato
   (imparato il 28/7 con le icone a 22px).
   ============================================================ */
.mono-recapito {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 14px 0 0;
}
.mono-recapito__numero {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.mono-whatsapp {
  align-items: center;
  border: 1px solid rgba(38, 35, 33, 0.22);
  border-radius: 999px;
  display: inline-flex;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  min-height: 46px;
  padding: 0 16px 0 13px;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.mono-whatsapp:hover,
.mono-whatsapp:focus-visible { background: rgba(37, 211, 102, 0.12); border-color: #25D366; }
/* ⚠️⚠️ 15/8 - IL VERDE DI WHATSAPP E' STATO TOLTO, segnalato da lui:
   «sul dorato non sta bene». Aveva ragione, e i numeri lo dicono forte:
   sul tasto oro #CBA75A il verde #25D366 fa **1,15** di contrasto, cioe'
   sparisce (ne serve almeno 3 perche' una forma piena si stacchi).
   ⚠️ Anche il verde «tipo Brasile» #009C3B fa 1,58: non basta. Il verde
   comincia a funzionare solo da #0B5D2E (3,52) in giu', ma li' sembra
   nero, quindi tanto vale l'antracite - verificato renderizzando i
   quattro colori affiancati alla misura vera.
   ➡️ `currentColor`: il segno prende il colore del TESTO del contenitore
   in cui si trova. Sul tasto oro viene antracite (6,85, come le scritte);
   dentro il bollino della scheda, dove il testo e' crema, viene crema.
   Una riga sola e sta sempre bene, ovunque lo si metta. */
.mono-whatsapp__segno { fill: currentColor; height: 20px; width: 20px; }

/* Il tasto WhatsApp nella fila in fondo a /contatti/: e' un `.button ghost`
   come gli altri, gli si aggiunge solo il simbolo verde davanti. */
.mono-tasto-whatsapp { align-items: center; display: inline-flex; gap: 8px; }
.mono-tasto-whatsapp .mono-whatsapp__segno { height: 17px; width: 17px; }