/* Sito Opimag — colori e caratteri del marchio (brand/opimag/LEGGIMI.md).
   Mondo visivo unico: sezioni scure (scuro/carta) alternate a sezioni chiare (carta/inchiostro). */
:root {
  --scuro: #1b1712; --scuro-2: #241f19; --scuro-3: #2e2720; --bordo-scuro: #3a3128;
  --carta: #e9dfc8; --carta-2: #f3ede1; --carta-3: #fbf8f1; --linea: #d8ccb2;
  --inchiostro: #2a2118; --muto-chiaro: #74675a; --muto-scuro: #a99b86;
  --mattone: #b4441f; --arancio: #d2602f; --arancio-2: #e0784a;
  --f-taglio: #d2602f; --f-rifinitura: #c9a227; --f-pronto: #5f9e6e; --f-caricata: #8b95a3;
  --raggio: 14px;
  --font: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'Cascadia Mono', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--carta-2); color: var(--inchiostro); font-family: var(--font); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 700; }
h3 { font-size: 21px; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--arancio); outline-offset: 3px; border-radius: 6px; }
.salta { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--arancio); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.salta:focus { top: 12px; }

/* Due versioni della stessa pagina: completa (con l'app) e vetrina (html.vetrina, senza accesso all'app) */
html:not(.vetrina) .solo-vetrina, html.vetrina .solo-app { display: none !important; }
.scuro { background: var(--scuro); color: var(--carta); }
.chiaro { background: var(--carta-2); color: var(--inchiostro); }
.bordo-su { border-top: 1px solid var(--linea); }
.contenitore { width: min(1180px, 100% - 32px); margin-inline: auto; }
.contenitore.stretto { width: min(820px, 100% - 32px); }
.sezione { padding-block: clamp(72px, 10vw, 128px); }
.centro { text-align: center; }
.etichetta { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--arancio); margin-bottom: 18px; }
.chiaro .etichetta { color: var(--mattone); }
.evidenza { color: var(--arancio); }
.titolo-largo { max-width: 22ch; }
.sotto-titolo { color: var(--muto-chiaro); margin-top: 12px; }
.muto { color: var(--muto-scuro); font-size: 15px; }

/* ── Bottoni ── */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid var(--arancio); background: var(--arancio); color: #fff; font: 700 16px var(--font); text-decoration: none; cursor: pointer; transition: transform .18s, background .18s, box-shadow .18s; }
.bottone:hover { background: var(--arancio-2); border-color: var(--arancio-2); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(210, 96, 47, .32); }
.bottone.piccolo { min-height: 42px; padding: 0 18px; font-size: 15px; }
.bottone.fantasma-btn { background: transparent; color: var(--carta); border-color: var(--bordo-scuro); }
.bottone.fantasma-btn:hover { border-color: var(--carta); background: transparent; box-shadow: none; }
.bottone.contorno { background: transparent; color: var(--inchiostro); border-color: var(--inchiostro); }
.bottone.contorno:hover { background: var(--inchiostro); color: var(--carta-2); box-shadow: none; }
.bottone.pieno { width: 100%; margin-top: 18px; }
.bottone:disabled { opacity: .6; cursor: progress; transform: none; }

/* ── Barra in alto ── */
.barra { position: sticky; top: 0; z-index: 50; background: rgba(27, 23, 18, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, background .25s; padding-top: env(safe-area-inset-top, 0px); }
.barra.scorsa { border-bottom-color: var(--bordo-scuro); background: rgba(27, 23, 18, .94); }
.barra-in { width: min(1180px, 100% - 32px); margin-inline: auto; height: 68px; display: flex; align-items: center; gap: 28px; }
.barra-logo img { height: 34px; width: auto; }
.barra-nav { display: flex; gap: 26px; margin-left: 12px; }
.barra-nav a, .link-accedi { color: var(--muto-scuro); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .15s; }
.barra-nav a:hover, .link-accedi:hover { color: var(--carta); }
.barra-azioni { margin-left: auto; display: flex; align-items: center; gap: 18px; }

/* ── Apertura ── */
.apertura { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 110px); }
.griglia-sfondo { position: absolute; inset: 0; background-image: linear-gradient(rgba(233, 223, 200, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 223, 200, .045) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 75%); pointer-events: none; }
.apertura-in { position: relative; width: min(1240px, 100% - 32px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.apertura h1 { font-size: clamp(44px, 6.4vw, 84px); font-weight: 700; letter-spacing: -0.035em; }
.apertura-sotto { margin-top: 24px; font-size: clamp(17px, 1.5vw, 19px); color: var(--muto-scuro); max-width: 46ch; }
.apertura-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.apertura-nota { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-family: var(--mono); font-size: 13px; color: var(--muto-scuro); }

/* Tabellone dimostrativo */
.demo { min-width: 0; }
.demo-cornice { position: relative; background: var(--scuro-2); border: 1px solid var(--bordo-scuro); border-radius: 20px; box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 0 0 1px rgba(210, 96, 47, .06); overflow: hidden; }
.demo-barra { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bordo-scuro); font-size: 13px; }
.demo-pallini { display: flex; gap: 6px; }
.demo-pallini i { width: 10px; height: 10px; border-radius: 50%; background: var(--bordo-scuro); }
.demo-titolo { font-weight: 700; color: var(--carta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.demo-live { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--f-pronto); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.demo-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--f-pronto); animation: pulsa 1.8s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(95, 158, 110, .6); } 70% { box-shadow: 0 0 0 8px rgba(95, 158, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 158, 110, 0); } }
.demo-tabellone { display: grid; grid-template-columns: repeat(4, minmax(128px, 1fr)); gap: 10px; padding: 14px; min-height: 420px; overflow-x: auto; scrollbar-width: thin; }
.dcol { background: rgba(233, 223, 200, .03); border: 1px solid rgba(233, 223, 200, .06); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: background .2s, border-color .2s; min-width: 0; }
.dcol.sopra { background: rgba(210, 96, 47, .1); border-color: rgba(210, 96, 47, .5); }
.dcol-testa { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--carta); padding: 2px 2px 4px; }
.dcol-testa i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.dcol-testa em { margin-left: auto; font-style: normal; font-family: var(--mono); font-weight: 400; color: var(--muto-scuro); font-size: 12px; }
.dcard { position: relative; background: var(--scuro-3); border: 1px solid var(--bordo-scuro); border-left: 3px solid var(--c); border-radius: 10px; padding: 9px 10px 8px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.dcard:hover { border-color: rgba(233, 223, 200, .25); border-left-color: var(--c); }
.dcard.trascina { cursor: grabbing; z-index: 30; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.dcard.nuova { animation: entra .5s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.dcard-cod { font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--arancio-2); display: flex; align-items: center; gap: 6px; }
.dcard-cod .tipo { width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.dcard-cli { font-size: 13.5px; font-weight: 600; color: var(--carta); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard-mis { font-family: var(--mono); font-size: 11.5px; color: var(--muto-scuro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard-piede { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.dcard-op { width: 22px; height: 22px; border-radius: 50%; background: var(--bordo-scuro); color: var(--carta); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.dcard-fasi { display: flex; gap: 3px; margin-left: auto; }
.dcard-fasi b { width: 6px; height: 6px; border-radius: 50%; background: var(--bordo-scuro); }
.dcard-fasi b.ok { background: var(--c); }
.demo-avviso { position: absolute; right: 14px; bottom: 14px; max-width: calc(100% - 28px); background: var(--carta); color: var(--inchiostro); padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; pointer-events: none; }
.demo-avviso.vedi { opacity: 1; transform: none; }
.demo-prova { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--muto-scuro); text-align: center; }

/* ── Nastro settori ── */
.nastro { background: var(--mattone); color: var(--carta); overflow: hidden; border-block: 1px solid rgba(0, 0, 0, .15); }
.nastro-in { display: flex; width: max-content; animation: scorri 38s linear infinite; }
.nastro-in span { font-family: var(--mono); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; padding: 16px 28px; white-space: nowrap; }
.nastro-in span::after { content: '◆'; margin-left: 56px; font-size: 9px; opacity: .6; vertical-align: 2px; }
@keyframes scorri { to { transform: translateX(-50%); } }

/* ── Prima / Con Opimag ── */
.prima-dopo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.prima-testo p { color: var(--muto-chiaro); margin-top: 18px; max-width: 48ch; }
.prima-testo h2 { margin-top: 0; }
.interruttore { display: inline-flex; margin-top: 30px; background: var(--carta); border: 1px solid var(--linea); border-radius: 999px; padding: 4px; }
.interruttore button { border: 0; background: transparent; font: 700 15px var(--font); color: var(--muto-chiaro); padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.interruttore button[aria-pressed="true"] { background: var(--inchiostro); color: var(--carta-2); }
.caos { position: relative; height: 460px; border-radius: 20px; background: var(--carta); border: 1px solid var(--linea); overflow: hidden; }
.pezzo { position: absolute; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .5s; font-size: 14px; }
.pezzo b { display: block; }
.pezzo small { display: block; font-size: 11.5px; opacity: .65; margin-top: 2px; }
.foglio { background: #fffdf6; padding: 14px 16px; width: 190px; box-shadow: 0 6px 18px rgba(42, 33, 24, .14); font-family: var(--mono); }
.foglio.giallo { background: #f6e58d; }
.bolla { background: #fff; padding: 10px 14px; border-radius: 16px 16px 16px 4px; width: 220px; box-shadow: 0 4px 14px rgba(42, 33, 24, .12); }
.bolla.mia { background: #dcf3c8; border-radius: 16px 16px 4px 16px; }
.telefono { background: var(--inchiostro); color: var(--carta); padding: 12px 16px; border-radius: 14px; width: 180px; box-shadow: 0 8px 20px rgba(42, 33, 24, .25); }
.telefono b { color: #ff8a73; }
.p1 { left: 6%; top: 8%; transform: rotate(-7deg); }
.p2 { right: 6%; top: 10%; transform: rotate(4deg); }
.p3 { right: 12%; top: 33%; transform: rotate(-3deg); }
.p4 { left: 10%; top: 50%; transform: rotate(5deg); }
.p5 { left: 40%; top: 66%; transform: rotate(-4deg); }
.scheda { left: 50%; width: min(340px, 84%); background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--arancio); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; opacity: 0; transform: translate(-50%, 30px) scale(.96); box-shadow: 0 8px 22px rgba(42, 33, 24, .1); }
.scheda b { font-family: var(--mono); color: var(--mattone); grid-row: span 2; align-self: center; font-size: 16px; }
.scheda span { font-weight: 600; }
.scheda i { font-style: normal; font-size: 12.5px; color: var(--muto-chiaro); display: flex; align-items: center; gap: 6px; }
.scheda i::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.p6 { top: 18%; } .p7 { top: 38%; border-left-color: var(--f-rifinitura); } .p8 { top: 58%; border-left-color: var(--f-pronto); }
.caos-didascalia { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--muto-chiaro); }
.caos.ordinato .foglio, .caos.ordinato .bolla, .caos.ordinato .telefono { opacity: 0; transform: translate(0, 40px) rotate(0) scale(.6); }
.caos.ordinato .scheda { opacity: 1; transform: translate(-50%, 0) scale(1); }
.caos.ordinato .p7 { transition-delay: .12s; } .caos.ordinato .p8 { transition-delay: .24s; }

/* ── Funzioni: tablet che cambia mentre scorri ── */
.racconto { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); margin-top: 56px; }
.tablet { position: sticky; top: calc(50vh - 220px); height: 440px; background: #0f0d0a; border: 1px solid var(--bordo-scuro); border-radius: 30px; padding: 16px; box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.tablet-schermo { height: 100%; border-radius: 18px; background: var(--scuro-2); overflow: hidden; position: relative; }
.tablet-schermo .schermo { display: flex !important; height: 100%; animation: appare .45s ease-out; }
@keyframes appare { from { opacity: 0; transform: scale(.985); } }
.racconto > * { min-width: 0; } /* senza, le colonne dei tabellini allargano la sezione sul telefono */
.passi { list-style: none; margin: 0; padding: 0; min-width: 0; }
.passo { min-width: 0; }
.passo { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: 32px; opacity: .38; transition: opacity .35s; }
.passo.attivo { opacity: 1; }
.passo-n { font-family: var(--mono); color: var(--arancio); font-size: 14px; margin-bottom: 14px; }
.passo h3 { font-size: clamp(24px, 2.6vw, 32px); }
.passo p { color: var(--muto-scuro); margin-top: 14px; max-width: 42ch; }
.passo > .schermo { display: none; }

/* Schermi dimostrativi (dentro il tablet su schermi larghi, sotto il testo sul telefono) */
.schermo { position: relative; background: var(--scuro-2); border-radius: 16px; overflow: hidden; padding: 22px; gap: 12px; font-size: 13px; }
.s-tabellone { align-items: stretch; gap: 8px; padding: 16px; }
.st-col { flex: 1 1 0; min-width: 0; background: rgba(233, 223, 200, .04); border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.st-col b { font-size: 12.5px; color: var(--carta); display: flex; align-items: center; gap: 6px; }
.st-col b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.st-col em { font-style: normal; font-family: var(--mono); color: var(--muto-scuro); margin-left: auto; }
/* Mini schede: stesso aspetto delle schede del tabellone in apertura */
.mc { background: var(--scuro-3); border: 1px solid var(--bordo-scuro); border-left: 3px solid var(--c); border-radius: 8px; padding: 8px 9px; font-size: 12.5px; font-weight: 600; color: var(--carta); line-height: 1.3; min-width: 0; }
.mc span { display: block; font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--arancio-2); }
.mc small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10.5px; color: var(--muto-scuro); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc.su { animation: sali 2.4s ease-in-out infinite; }
@keyframes sali { 50% { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, .35); } }
/* 02 Annota: com'è nell'app (barra in alto, foto, strumenti in basso) */
.s-annota { flex-direction: column; padding: 0; gap: 0; }
.an-barra { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--scuro); color: var(--muto-scuro); font-size: 12.5px; }
.an-barra b { color: var(--carta); }
.an-salva { background: var(--arancio); color: #fff; padding: 4px 10px; border-radius: 8px; font-weight: 700; }
.an-foto { position: relative; flex: 1; min-height: 150px; }
.marmo { position: absolute; inset: 0; background: radial-gradient(120% 80% at 20% 10%, #f4f1ec, #d9d4cc 60%, #c9c2b8), repeating-linear-gradient(115deg, transparent 0 38px, rgba(120, 110, 100, .12) 39px 41px, transparent 42px 90px); background-blend-mode: multiply; }
.segno { position: absolute; inset: 0; width: 100%; height: 100%; }
.segno path { fill: none; stroke: #e0402a; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; vector-effect: non-scaling-stroke; }
.attivo .segno path, .tablet-schermo .segno path { animation: disegna 1.6s ease-out forwards; }
.segno path:nth-child(2) { animation-delay: .5s !important; }
.segno path:nth-child(3) { animation-delay: .9s !important; }
@keyframes disegna { to { stroke-dashoffset: 0; } }
.quota { position: absolute; left: 50%; top: 52%; transform: translateX(-50%); background: #e0402a; color: #fff; font: 700 18px var(--font); padding: 4px 12px; border-radius: 8px; opacity: 0; animation: compari .4s 1.4s forwards; }
.salvato { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: var(--scuro); color: var(--carta); padding: 7px 14px; border-radius: 999px; font-weight: 600; white-space: nowrap; opacity: 0; animation: compari .4s 2.2s forwards; }
@keyframes compari { to { opacity: 1; } }
.an-strumenti { display: flex; gap: 8px; justify-content: center; align-items: center; padding: 10px; background: var(--scuro); }
.an-strumenti i { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 700; color: var(--carta); font-size: 13px; background: rgba(233, 223, 200, .07); }
.an-strumenti i.on { background: var(--arancio); }
.an-strumenti i.col { width: 22px; height: 22px; border-radius: 50%; background: var(--c); }

/* 03 Tempo reale: lo stesso tabellone su due dispositivi, la scheda si sposta su entrambi */
.s-tempo { align-items: center; justify-content: center; gap: 10px; padding-bottom: 64px; }
.tp-disp { flex: 1 1 0; min-width: 0; border: 2px solid var(--bordo-scuro); border-radius: 14px; padding: 10px; background: rgba(0, 0, 0, .15); }
.tp-nome { display: block; font-family: var(--mono); font-size: 11px; color: var(--muto-scuro); margin-bottom: 8px; }
.tp-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tp-col { background: rgba(233, 223, 200, .04); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 128px; min-width: 0; }
.tp-col b { font-size: 11px; color: var(--carta); }
.tp-viaggia { position: absolute; left: 6px; top: 78px; width: calc(50% - 15px); border-left-color: var(--f-taglio); animation: viaggia 3.2s ease-in-out infinite; }
@keyframes viaggia { 0%, 25% { transform: translateX(0); border-left-color: var(--f-taglio); } 55%, 100% { transform: translateX(calc(100% + 18px)); border-left-color: var(--f-rifinitura); } }
.onda { width: 7%; flex-shrink: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--arancio) 0 6px, transparent 6px 12px); animation: flusso 1s linear infinite; }
@keyframes flusso { to { background-position: 12px 0; } }
.notifica { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--carta); color: var(--inchiostro); font-weight: 600; padding: 9px 14px; border-radius: 12px; white-space: nowrap; animation: notifica 3.2s ease-in-out infinite; }
@keyframes notifica { 0%, 45% { opacity: 0; transform: translate(-50%, 10px); } 60%, 92% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* 04 Fantasma: la stessa comanda in due colonne */
.s-fantasma { padding-bottom: 52px; }
.mc.ghost { border: 1.5px dashed rgba(233, 223, 200, .4); border-left: 3px solid var(--c); background: rgba(201, 162, 39, .07); animation: fantasma 2.6s ease-in-out infinite; }
.mc u { text-decoration: none; font-family: var(--font); font-size: 10px; font-weight: 700; color: var(--carta); background: rgba(233, 223, 200, .1); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
@keyframes fantasma { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
.sf-nota { position: absolute; left: 16px; right: 16px; bottom: 16px; text-align: center; font-family: var(--mono); font-size: 11.5px; color: var(--muto-scuro); }

/* 05 Codici: nuova comanda con codice proposto e ultime comande */
.s-codici { flex-direction: column; gap: 10px; }
.cd-titolo { font-size: 12px; font-weight: 700; color: var(--carta); }
.cd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cd-campo span { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muto-scuro); margin-bottom: 4px; }
.cd-select, .cd-codice { display: flex; align-items: center; gap: 8px; height: 46px; background: var(--scuro); border: 1px solid var(--bordo-scuro); border-radius: 10px; padding: 0 12px; color: var(--carta); font-size: 14px; }
.cd-select i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.cd-select em { margin-left: auto; font-style: normal; color: var(--muto-scuro); }
.cd-codice { font-family: var(--mono); font-size: 22px; color: var(--arancio-2); border-color: rgba(210, 96, 47, .55); gap: 0; }
.cd-codice b { font-weight: 500; display: inline-block; font-variant-numeric: tabular-nums; }
.contatore.scatta { animation: scatta .4s; }
@keyframes scatta { 0% { transform: translateY(-6px); opacity: .3; } }
.cd-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.cd-lista li { display: flex; align-items: center; gap: 10px; background: var(--scuro-3); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--muto-scuro); white-space: nowrap; overflow: hidden; }
.cd-lista b { font-family: var(--mono); font-weight: 500; color: var(--c); min-width: 44px; }

/* 06 Presenze */
.s-presenze { flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.orologio { font-family: var(--mono); font-size: 50px; line-height: 1; color: var(--carta); font-variant-numeric: tabular-nums; }
.pr-sotto { font-size: 12.5px; color: var(--muto-scuro); }
.timbro-btn { background: var(--f-pronto); color: #fff; font-weight: 700; padding: 11px 44px; border-radius: 999px; font-size: 16px; }
.s-presenze ul { list-style: none; padding: 0; margin: 4px 0 0; width: 100%; max-width: 330px; }
.s-presenze li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bordo-scuro); font-size: 13px; }
.s-presenze li i { width: 8px; height: 8px; border-radius: 50%; background: var(--bordo-scuro); }
.s-presenze li i.in { background: var(--f-pronto); }
.s-presenze li b { color: var(--carta); }
.s-presenze li span { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muto-scuro); }
.pr-mese { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 330px; font-family: var(--mono); font-size: 11.5px; color: var(--muto-scuro); }
.pr-barra { flex: 1; height: 6px; border-radius: 6px; background: var(--bordo-scuro); overflow: hidden; }
.pr-barra i { display: block; width: 78%; height: 100%; background: var(--arancio); }

/* ── L'app vera: galleria di schermate ── */
.galleria-schede { display: flex; gap: 8px; margin-top: 32px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.galleria-schede::-webkit-scrollbar { display: none; }
.galleria-schede button { flex-shrink: 0; border: 1px solid var(--linea); background: var(--carta-3); color: var(--muto-chiaro); font: 700 15px var(--font); padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.galleria-schede button[aria-selected="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta-2); }
.galleria-pannello { margin: 26px 0 0; animation: appare .4s ease-out; }
.galleria-pannello figcaption { margin-top: 18px; color: var(--muto-chiaro); max-width: 70ch; }
.galleria-pannello figcaption b { color: var(--inchiostro); }
.cornice-tablet { background: #0f0d0a; border-radius: 22px; padding: clamp(8px, 1.4vw, 16px); box-shadow: 0 30px 70px rgba(42, 33, 24, .28); }
.cornice-tablet img { width: 100%; height: auto; border-radius: 12px; }
.galleria-pannello a { display: block; cursor: zoom-in; }
.ingrandisci { display: none; margin-top: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--muto-chiaro); }
.cornici-telefono { display: flex; justify-content: center; gap: clamp(14px, 4vw, 48px); }
.cornice-telefono { width: min(300px, 46%); background: #0f0d0a; border-radius: 34px; padding: 10px; box-shadow: 0 30px 70px rgba(42, 33, 24, .28); }
.cornice-telefono img { width: 100%; height: auto; border-radius: 26px; }

/* ── Come si parte ── */
.avvio { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.avvio::before { content: ''; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: var(--linea); }
.avvio::after { content: ''; position: absolute; left: 28px; top: 27px; height: 2px; width: calc((100% - 56px) * var(--avanzamento, 0)); background: var(--mattone); transition: width .2s linear; }
.avvio li { position: relative; z-index: 1; }
.avvio-n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--carta-3); border: 2px solid var(--mattone); color: var(--mattone); font: 700 22px var(--font); margin-bottom: 22px; }
.avvio p { color: var(--muto-chiaro); margin-top: 10px; }
.avvio-tempo { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--mattone); background: rgba(180, 68, 31, .08); padding: 4px 10px; border-radius: 999px; }
.dispositivi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 64px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; }
.dispositivi div { background: var(--carta-3); padding: 22px 24px; }
.dispositivi b { display: block; font-size: 17px; }
.dispositivi span { color: var(--muto-chiaro); font-size: 15px; }

/* ── Domande ── */
.faq { margin-top: 40px; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-size: 19px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--mattone); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--muto-chiaro); padding: 0 0 22px; max-width: 64ch; }

/* ── Registrazione ── */
.reg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.reg-punti { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.reg-punti li { display: flex; gap: 12px; color: var(--muto-scuro); }
.reg-punti li::before { content: '✓'; color: var(--arancio); font-weight: 700; }
.reg-accedi { margin-top: 32px; color: var(--muto-scuro); }
.reg-accedi a { color: var(--arancio-2); font-weight: 700; text-decoration: none; }
.modulo { background: var(--scuro-2); border: 1px solid var(--bordo-scuro); border-radius: 22px; padding: clamp(22px, 3vw, 34px); }
.modulo-passi { list-style: none; padding: 0; margin: 0 0 26px; display: flex; gap: 8px; }
.modulo-passi li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muto-scuro); padding-bottom: 10px; border-bottom: 2px solid var(--bordo-scuro); }
.modulo-passi span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bordo-scuro); font: 700 12px var(--font); color: var(--carta); }
.modulo-passi li.on { color: var(--carta); border-bottom-color: var(--arancio); }
.modulo-passi li.on span { background: var(--arancio); }
.modulo-passi li.done span { background: var(--f-pronto); }
.modulo-passi li.done { border-bottom-color: var(--f-pronto); }
.modulo-pagina { display: none; }
.modulo-pagina.on { display: block; animation: appare .35s ease-out; }
.modulo-domanda { color: var(--muto-scuro); margin-bottom: 16px; }
.settori { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.st-tile { background: var(--scuro-3); border: 1.5px solid var(--bordo-scuro); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.st-tile:hover { border-color: rgba(233, 223, 200, .35); }
.st-tile.sel { border-color: var(--arancio); background: rgba(210, 96, 47, .12); }
.st-tile .ic { font-size: 24px; }
.st-tile .nm { font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.modulo label { display: block; font-size: 14px; color: var(--muto-scuro); margin: 14px 0 6px; }
.modulo input:not([type="checkbox"]) { width: 100%; min-height: 48px; background: var(--scuro); border: 1.5px solid var(--bordo-scuro); border-radius: 12px; color: var(--carta); font: 16px var(--font); padding: 0 14px; transition: border-color .15s; }
.modulo input:focus { outline: none; border-color: var(--arancio); }
.modulo input::placeholder { color: #6f6253; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.forza { height: 4px; background: var(--bordo-scuro); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.forza i { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }
.modulo .accetto { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--muto-scuro); cursor: pointer; }
.accetto input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--arancio); flex-shrink: 0; }
.accetto a { color: var(--arancio-2); }
.errore { display: none; color: #ff9a85; font-size: 14px; margin-top: 12px; }
.indietro { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--muto-scuro); font: 14px var(--font); cursor: pointer; padding: 6px 10px; }
.indietro:hover { color: var(--carta); }
.fatto { text-align: center; padding: 20px 0; }
.fatto img { margin: 0 auto 18px; animation: timbra .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes timbra { from { transform: scale(1.6) rotate(-18deg); opacity: 0; } }
.fatto p { color: var(--muto-scuro); margin-top: 10px; }

/* ── Contatti (solo vetrina) ── */
.contatti { text-align: center; max-width: 760px; }
.contatti-testo { color: var(--muto-scuro); margin: 22px auto 0; max-width: 54ch; font-size: 18px; }
.contatti-azioni { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 34px; }
.contatti-mail { font-family: var(--mono); color: var(--arancio-2); text-decoration: none; font-size: 15px; }
.contatti-mail:hover { text-decoration: underline; }

/* ── Fondo ── */
.fondo { padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bordo-scuro); }
.fondo-in { display: flex; gap: 32px; align-items: center; }
.fondo-timbro { width: 96px; height: 96px; flex-shrink: 0; }
.fondo-motto { font-size: 22px; font-weight: 700; }
.fondo-link { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.fondo-link a { color: var(--muto-scuro); text-decoration: none; font-size: 15px; }
.fondo-link a:hover { color: var(--carta); }
.fondo-copy { margin-top: 16px; font-family: var(--mono); font-size: 12.5px; color: #7d705f; }

/* ── Schermi medi ── */
@media (max-width: 1000px) {
  .barra-nav { display: none; }
  .apertura-in { grid-template-columns: 1fr; }
  .apertura-testo { max-width: 640px; }
  .prima-dopo, .reg { grid-template-columns: 1fr; }
  .racconto { grid-template-columns: 1fr; margin-top: 24px; }
  .tablet { display: none; }
  .passo { min-height: 0; opacity: 1; padding-block: 28px; border-bottom: 1px solid var(--bordo-scuro); }
  .passo > .schermo { display: flex; min-height: 280px; margin-top: 22px; }
}
/* ── Telefono ── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .sezione { padding-block: 60px; }
  .apertura { padding-block: 36px 56px; }
  .apertura-sotto { margin-top: 18px; }
  .apertura-cta { margin-top: 26px; }
  .demo-cornice { border-radius: 16px; }
  .demo-prova { font-size: 12px; }
  .racconto { margin-top: 8px; }
  .passo { padding-block: 24px; }
  /* Tabelloni dimostrativi: colonne leggibili, si scorrono di lato */
  .passo > .s-tabellone { overflow-x: auto; scrollbar-width: none; }
  .passo > .s-tabellone .st-col { min-width: 124px; }
  /* Tempo reale: i due dispositivi uno sopra l'altro */
  .passo > .s-tempo { flex-direction: column; padding-bottom: 70px; }
  .passo > .s-tempo .tp-disp { width: 100%; flex: none; }
  .passo > .s-tempo .onda { width: 2px; height: 22px; background: repeating-linear-gradient(180deg, var(--arancio) 0 6px, transparent 6px 12px); }
  .passo > .s-tempo .notifica { white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 32px); }
  .cd-form { grid-template-columns: 1fr; }
  .faq summary { font-size: 17px; padding-block: 18px; }
  .contatti-testo { font-size: 16px; }
  .demo-pallini { display: none; }
  .ingrandisci { display: block; }
  .cornice-telefono { border-radius: 26px; padding: 7px; }
  .cornice-telefono img { border-radius: 20px; }
  .barra-in { height: 60px; gap: 12px; }
  .barra-logo img { height: 30px; }
  .link-accedi { font-size: 14px; }
  .apertura-cta .bottone { width: 100%; }
  .demo-tabellone { grid-template-columns: repeat(4, 152px); min-height: 380px; }
  .caos { height: 420px; }
  .foglio, .bolla { width: 168px; font-size: 13px; }
  .telefono { width: 150px; }
  .p3 { right: 4%; top: 36%; } .p5 { left: 30%; }
  .avvio { grid-template-columns: 1fr; gap: 32px; }
  .avvio::before, .avvio::after { display: none; }
  .dispositivi { grid-template-columns: 1fr; }
  .fondo-in { flex-direction: column; align-items: flex-start; }
  .due { grid-template-columns: 1fr; gap: 0; }
}
/* Chi preferisce meno movimento: niente animazioni automatiche */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .nastro-in { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}