/* DiTurno (prima GestoreTurni) - landing di lancio. Colori e font dal sistema grafico dell'app («La plancia di vetro»,
   turni-open/DESIGN.md); ritmo e regia dal riferimento design-md/apple. Una luce: lo schermo del telefono. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../kit/vendor/fonts/plus-jakarta-sans-var-latin.woff2?v=20261031a') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  --fondo: #090e1a;
  --luce: 29, 158, 117;
  --accento: #1D9E75;
  --verde-pulsante: linear-gradient(135deg, #128363, #0d7a5a);   /* testo bianco AA (4,7:1) */
  --inchiostro: 240, 244, 255;
  --t55: rgba(var(--inchiostro), 0.58);
  --vetro: rgba(255, 255, 255, 0.04);
  --vetro-2: rgba(255, 255, 255, 0.07);
  --bordo: rgba(255, 255, 255, 0.09);
  --bordo-2: rgba(255, 255, 255, 0.15);
  --font-titoli: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-testo: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-etichette: 'Plus Jakarta Sans', system-ui, sans-serif;
  --th: min(76svh, 700px);           /* altezza del telefono */
  --menu-h: 68px;
}

body { font-size: clamp(16px, 1.1vw, 18px); }
main { overflow-x: clip; }

.salta { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--fondo); color: var(--t100); }
.salta:focus { top: 12px; }

/* luce di fondo: debole, in basso, dello stesso verde */
.velo-luce { --luce-y: 110%; }
.grana { opacity: 0.045; }

/* tipografia: un solo carattere, gerarchia dal peso */
.titolo {
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.0;
  font-size: clamp(42px, 5.6vw, 88px);
}
.titolo.medio { font-size: clamp(34px, 4vw, 64px); line-height: 1.04; }
.titolo em { font-style: normal; color: var(--t55); }
.titolo .accento { color: var(--accento); }
.etichetta { font-weight: 700; font-size: 12px; letter-spacing: 0.1em; color: var(--t55); }
.testo { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; }
.nota-esempio { color: var(--t55); opacity: 1; font-size: 12px; letter-spacing: 0.02em; }

/* pulsanti */
.pulsante { font-weight: 600; font-size: 16px; background: var(--vetro); border-color: var(--bordo-2); }
.pulsante:hover { background: var(--vetro-2); }
.pulsante.primario { background: var(--verde-pulsante); color: #fff; box-shadow: 0 10px 34px rgba(var(--luce), 0.42), inset 0 1px 0 rgba(255,255,255,0.18); }
.pulsante.primario:hover { box-shadow: 0 14px 48px rgba(var(--luce), 0.6), inset 0 1px 0 rgba(255,255,255,0.22); }
.pulsante.piccolo { padding: 11px 18px; font-size: 15px; }
.pulsante.grande { padding: 19px 32px; font-size: 18px; }
.pulsante svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pulsante:focus-visible { outline: 2px solid #f0f4ff; outline-offset: 3px; }

/* menu */
.menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--menu-h);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--margine);
  background: rgba(9, 14, 26, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordo);
}
.menu-marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--t100); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #1D9E75, #0d7a5a); display: grid; place-items: center; color: #fff; box-shadow: 0 0 18px rgba(var(--luce), 0.35); }
.logo svg { width: 24px; height: 24px; }
.logo-diturno { display: block; height: 34px; width: auto; }
.menu nav { display: flex; gap: 24px; margin-left: auto; }
.menu nav a { color: var(--t70); text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 2px; }
.menu nav a:hover { color: var(--t100); }
.testo-corto { display: none; }

/* ---------- RACCONTO ---------- */
.storia { position: relative; }
.palco { position: sticky; top: 0; height: 100svh; z-index: 0; pointer-events: none; }
.alone {
  position: absolute; width: 70vh; height: 70vh; border-radius: 50%;
  left: calc(100% - 9vw - var(--tw) / 2); top: 50%; translate: -50% -42%;
  background: radial-gradient(closest-side, rgba(var(--luce), 0.55), rgba(var(--luce), 0.14) 55%, transparent);
  filter: blur(30px); opacity: 0; transition: opacity 1.2s var(--curva-uscita);
  --tw: calc(var(--th) * 0.4621 + 20px);
}
.acceso .alone { opacity: 0.7; animation: respira 5s ease-in-out infinite alternate; }
@keyframes respira { from { opacity: 0.55; } to { opacity: 0.8; } }

.telefono {
  position: absolute; right: 9vw; top: 50%; translate: 0 -50%;
  opacity: 0; transform: translateY(40px) scale(0.94);
  transition: opacity 1.2s var(--curva-uscita), transform 1.2s var(--curva-uscita);
}
.acceso .telefono { opacity: 1; transform: none; }
.telefono-vita { will-change: transform; transform-style: preserve-3d; }
.cornice {
  padding: 10px; border-radius: calc(var(--th) * 0.068);
  background: linear-gradient(160deg, #2a3142, #11161f 40%, #1c2230);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.18), 0 40px 80px -20px rgba(0,0,0,0.75), 0 0 90px -10px rgba(var(--luce), 0.35);
}
/* schermo = barra di stato finta (46 px a 390) + schermata dell'app (390x844): l'isola non copre più i titoli */
.schermo-box { position: relative; height: calc(var(--th) - 20px); aspect-ratio: 390 / 890; }
.schermo { position: absolute; inset: 0; border-radius: calc(var(--th) * 0.055); overflow: hidden; background: #090e1a; }
.ora { position: absolute; top: 1.55%; left: 11%; z-index: 3; font-size: calc(var(--th) * 0.019); font-weight: 700; color: rgba(var(--inchiostro), 0.9); letter-spacing: 0.01em; }
.schermata { position: absolute; left: 0; top: 5.17%; width: 100%; height: 94.83%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0.6s ease; }
.schermata.base { transition: none; }
.schermo::after { /* schermo spento all'ingresso */
  content: ''; position: absolute; inset: 0; background: #05080f; opacity: 1; transition: opacity 1.1s ease 0.25s; pointer-events: none;
}
.acceso .schermo::after { opacity: 0; }
.riflesso-vetro { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.07), transparent 38%); pointer-events: none; z-index: 2; }
.isola { position: absolute; top: 1.4%; left: 50%; translate: -50% 0; width: 30%; height: 3.3%; border-radius: 99px; background: #000; z-index: 4; }

/* tessere di turno (effetto firma): misure in frazioni dello schermo, testo in unità del contenitore */
.pezzi { position: absolute; inset: 5.17% 0 0 0; container-type: inline-size; z-index: 3; }
.pezzo {
  position: absolute; box-sizing: border-box; opacity: 0;
  border-radius: calc(5 / 390 * 100cqw);
  /* la tessera è il ritaglio esatto del blocco nella schermata vera: combacia al pixel quando torna nella cella */
  background-image: url('../media/app/telefono-calendario-720.webp?v=20261031a'); background-repeat: no-repeat;
  will-change: transform; transform-origin: 50% 50%;
}
.pezzo .chi {
  position: absolute; left: 0; bottom: 100%; margin-bottom: calc(3 / 390 * 100cqw); white-space: nowrap;
  font-size: calc(10 / 390 * 100cqw); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(var(--inchiostro), 0.75);
}

/* foglietti del caos: messaggi e foto che non trovano posto */
.foglietti { position: absolute; inset: 0; z-index: 2; }
.foglietto {
  position: absolute; display: flex; align-items: center; gap: 10px; max-width: 250px;
  padding: 12px 15px; border-radius: 16px; background: rgba(20, 27, 42, 0.86); border: 1px solid var(--bordo-2);
  color: var(--t70); font-size: 14px; font-weight: 500; line-height: 1.3; opacity: 0; will-change: transform, opacity;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.7);
}
.foglietto svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--t55); }

/* passi che scorrono sopra il palco */
.passi { position: relative; z-index: 1; margin-top: -100svh; }
.passo { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--menu-h) + 24px) var(--margine) 48px; }
.testo-passo { width: min(46vw, 600px); margin-left: max(0px, calc((100vw - 1320px) / 2)); }
.testo-passo > * + * { margin-top: 22px; }
.passo-eroe .testo-passo { width: min(54vw, 720px); }
.eroe-titolo { font-size: clamp(46px, 5.5vw, 92px); }
.eroe-azioni { display: flex; flex-wrap: wrap; gap: 14px; }

.passo-pezzi { display: block; height: 300svh; padding: 0; }
.passo-pezzi .fermo { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: calc(var(--menu-h) + 24px) var(--margine) 48px; }
.passo-pezzi .testo-passo { display: grid; }
.passo-pezzi .fase { grid-area: 1 / 1; align-self: center; margin: 0; }
.fase-b > * + * { margin-top: 22px; }
.fase-b { opacity: 0; }

/* forma delle ferie: richiesta che diventa approvata */
.forma-ferie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pill, .forma-ferie .stato > span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px;
  background: var(--vetro-2); border: 1px solid var(--bordo-2); color: var(--t100); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.forma-ferie .freccina { width: 22px; height: 22px; fill: none; stroke: var(--t55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.forma-ferie .stato { display: inline-grid; }
.forma-ferie .stato > span { grid-area: 1 / 1; transition: opacity 0.5s ease, transform 0.6s var(--curva-uscita); }
.forma-ferie .stato svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.forma-ferie .fatta { opacity: 0; transform: translateY(8px); }
.forma-ferie.risposta .attesa { opacity: 0; transform: translateY(-8px); }
.forma-ferie.risposta .fatta { opacity: 1; transform: none; }

/* forma dello scambio: due tessere che si scambiano il posto su un arco */
.forma-scambio { position: relative; width: 340px; max-width: 100%; height: 120px; }
.forma-scambio .arco { position: absolute; left: 0; right: 0; top: 18px; width: 100%; height: 70px; stroke: var(--t40); stroke-width: 1.5; }
.forma-scambio .arco path:last-child { stroke-dasharray: 4 6; opacity: 0.6; }
.forma-scambio .pill { position: absolute; top: 72px; width: 150px; justify-content: center; }
.forma-scambio .a { left: 0; }
.forma-scambio .b { right: 0; }
.forma-scambio.scambiato .a { animation: arcoA 0.9s var(--curva-tendina) forwards; }
.forma-scambio.scambiato .b { animation: arcoB 0.9s var(--curva-tendina) forwards; }
@keyframes arcoA { 0% { transform: translate(0, 0); } 50% { transform: translate(calc((340px - 150px) / 2), -54px); } 100% { transform: translate(calc(340px - 150px), 0); } }
@keyframes arcoB { 0% { transform: translate(0, 0); } 50% { transform: translate(calc((150px - 340px) / 2), 30px); } 100% { transform: translate(calc(150px - 340px), 0); } }

/* ---------- GRATIS ---------- */
.gratis { position: relative; min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 120px var(--margine); }
.gratis-luce { position: absolute; left: 50%; bottom: 8%; width: 80vmin; height: 50vmin; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--luce), 0.32), transparent); filter: blur(40px); pointer-events: none; }
.numero-gigante {
  position: relative; margin: 10px 0 0; font-weight: 800; letter-spacing: -0.06em; line-height: 0.85; color: var(--t100);
  font-size: clamp(150px, 28vw, 420px); font-variant-numeric: tabular-nums;
}
.numero-gigante span { color: var(--t100); }
.gratis-sotto { position: relative; margin: 26px auto 0; max-width: 34ch; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.4; color: var(--t70); text-wrap: balance; }
.gratis-sotto strong { color: var(--t100); font-weight: 700; }

/* ---------- INSTALLA ---------- */
.guide-uso { padding: 120px var(--margine) 40px; max-width: 1240px; margin: 0 auto; }
.guide-uso-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.guida-uso { margin: 0; }
.guida-uso-telaio {
  aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #0b1120;
  box-shadow: 0 0 0 1px var(--bordo-2), 0 30px 70px -24px rgba(0,0,0,0.8);
}
.guida-uso video { display: block; width: 100%; height: 100%; object-fit: cover; }
.guida-uso figcaption { margin-top: 16px; }
.guida-uso h3 { margin: 0 0 6px; color: var(--t100); font-size: clamp(19px, 1.7vw, 23px); font-weight: 800; }
.guida-uso p { margin: 0; color: var(--t70); font-size: 15px; line-height: 1.5; }
.installa { padding: 120px var(--margine) 140px; max-width: 1240px; margin: 0 auto; }
.installa-testa { max-width: 680px; }
.installa-testa > * + * { margin-top: 20px; }
.schede { margin-top: 48px; }
.schede-elenco { display: inline-flex; gap: 6px; padding: 6px; border-radius: 16px; background: var(--vetro); border: 1px solid var(--bordo); }
.schede-elenco button {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 11px; border: 0; background: transparent; cursor: pointer;
  color: var(--t70); font-weight: 600; font-size: 15px; min-height: 44px;
}
.schede-elenco button svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.schede-elenco button[aria-selected="true"] { background: var(--vetro-2); color: var(--t100); box-shadow: inset 0 0 0 1px var(--bordo-2), inset 0 1px 0 rgba(255,255,255,0.08); }
.schede-elenco button:hover { color: var(--t100); }
.riconosciuto { margin: 12px 0 0; font-size: 14px; color: var(--t55); min-height: 1.4em; }
.pannello { display: grid; grid-template-columns: 320px 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; margin-top: 32px; }
.pannello[hidden] { display: none; }

.guida { margin: 0; }
.guida-telaio {
  position: relative; aspect-ratio: 720 / 1280; border-radius: 28px; overflow: hidden; background: #0b1120;
  box-shadow: 0 0 0 1px var(--bordo-2), 0 30px 70px -24px rgba(0,0,0,0.8), 0 0 70px -20px rgba(var(--luce), 0.4);
}
.guida video { width: 100%; height: 100%; object-fit: cover; }
.guida-comando {
  position: absolute; right: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--bordo-2);
  background: rgba(9, 14, 26, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--t100);
  display: grid; place-items: center; cursor: pointer;
}
.guida-comando svg { width: 20px; height: 20px; fill: currentColor; grid-area: 1 / 1; }
.guida-comando .ic-pausa { display: none; }
.guida-telaio.in-corso .ic-play { display: none; }
.guida-telaio.in-corso .ic-pausa { display: block; }
.guida-comando:focus-visible { outline: 2px solid #f0f4ff; outline-offset: 3px; }
.guida figcaption { margin-top: 12px; font-size: 13px; color: var(--t55); line-height: 1.45; }

.passi-installa h3 { margin: 0 0 22px; color: var(--t100); font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -0.02em; }
.passi-installa ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.passi-installa li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--bordo); color: var(--t70); font-size: 17px; line-height: 1.5; }
.passi-installa li:last-child { border-bottom: 1px solid var(--bordo); }
.passi-installa li strong { color: var(--t100); font-weight: 700; }
.passi-installa .n {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-top: -2px;
  background: #128363; color: #fff; font-weight: 800; font-size: 14px;   /* 4,7:1 con il bianco */
}
.in-riga { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: var(--t100); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aiuto { margin: 18px 0 0; font-size: 15px; line-height: 1.55; color: var(--t55); }
.aiuto strong { color: var(--t70); }
.passi-installa .pulsante, .azioni-riga { margin-top: 26px; }
.azioni-riga { display: flex; flex-wrap: wrap; gap: 12px; }
.azioni-riga .pulsante { margin-top: 0; }
.link-scheda { background: none; border: 0; padding: 0; color: var(--t100); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }

.qr { margin: 0; }
.qr-carta { width: 100%; aspect-ratio: 1; padding: 6%; border-radius: 24px; background: #f0f4ff; box-shadow: 0 0 70px -20px rgba(var(--luce), 0.45); }
.qr-carta img { width: 100%; height: 100%; image-rendering: pixelated; }
.qr figcaption { margin-top: 12px; font-size: 14px; color: var(--t55); }
.qr[hidden] { display: none; }
.gia-installata { margin-top: 24px; color: var(--t70); }

/* ---------- FINALE ---------- */
.finale { position: relative; min-height: 90svh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 28px; padding: 120px var(--margine); }
.finale .titolo { max-width: 14ch; }
.finale .testo { max-width: 46ch; }
.finale-luce { position: absolute; left: 50%; bottom: 0; width: 90vmin; height: 60vmin; translate: -50% 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--luce), 0.3), transparent); filter: blur(40px); pointer-events: none; }

.piede { padding: 40px var(--margine) 48px; border-top: 1px solid var(--bordo); font-size: 14px; color: var(--t55); display: grid; gap: 12px; }
.piede p { margin: 0; max-width: 80ch; }
.piede-link { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.piede a { color: var(--t70); }
.piede a:hover { color: var(--t100); }

/* ---------- TELEFONO ---------- */
@media (max-width: 860px) {
  :root { --th: min(44svh, 400px); --menu-h: 60px; }
  .menu { gap: 12px; }
  .menu nav { display: none; }
  .menu .pulsante { margin-left: auto; }
  .testo-lungo { display: none; }
  .testo-corto { display: inline; }
  .telefono { right: auto; left: 50%; top: calc(var(--menu-h) + 14px); translate: -50% 0; }
  .alone { left: 50%; top: calc(var(--menu-h) + var(--th) / 2); translate: -50% -50%; width: 90vw; height: 90vw; }
  .foglietto { max-width: 180px; font-size: 13px; padding: 10px 12px; }
  .passo { align-items: flex-end; padding: calc(var(--menu-h) + var(--th) + 22px) 16px 28px; }
  .testo-passo, .passo-eroe .testo-passo { width: 100%; margin: 0; }
  .testo-passo > * + * { margin-top: 14px; }
  .lastra-mobile {
    padding: 22px 20px; border-radius: 20px; background: rgba(12, 18, 32, 0.84); border: 1px solid var(--bordo);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .passo-eroe { padding-bottom: 22px; }
  .eroe-titolo { font-size: clamp(31px, 8.6vw, 44px); }
  .eroe-sotto { font-size: 16px; }
  .eroe-azioni { flex-wrap: nowrap; gap: 10px; }
  .eroe-azioni .pulsante { padding: 13px 16px; font-size: 15px; white-space: nowrap; }
  .passo-eroe .lastra-mobile { padding: 18px 18px; }
  .eroe-azioni .solo-icona-mobile { width: 48px; padding: 0; justify-content: center; flex: none; }
  .eroe-azioni .primario svg { display: none; }
  .titolo.medio { font-size: clamp(26px, 7.4vw, 38px); }
  .passo-pezzi { height: 240svh; padding: 0; }
  .passo-pezzi .fermo { align-items: flex-end; padding: calc(var(--menu-h) + var(--th) + 22px) 16px 28px; }
  .forma-scambio { width: 300px; height: 112px; }
  .forma-scambio .pill { width: 132px; font-size: 14px; padding: 8px 10px; top: 66px; }
  @keyframes arcoA { 0% { transform: translate(0, 0); } 50% { transform: translate(84px, -48px); } 100% { transform: translate(168px, 0); } }
  @keyframes arcoB { 0% { transform: translate(0, 0); } 50% { transform: translate(-84px, 26px); } 100% { transform: translate(-168px, 0); } }
  .guide-uso { padding: 90px 16px 20px; }
  .guide-uso-griglia { grid-template-columns: minmax(0, 300px); justify-content: center; gap: 40px; }
  .installa { padding: 90px 16px 100px; }
  .schede-elenco { display: flex; width: 100%; }
  .schede-elenco button { flex: 1; justify-content: center; padding: 11px 8px; }
  .pannello { grid-template-columns: 1fr; gap: 32px; }
  .guida, .qr { max-width: 300px; width: 100%; margin: 0 auto; }
  .passi-installa li { font-size: 16px; }
  .gratis { padding: 90px 16px; }
}
@media (max-width: 360px) {
  .eroe-azioni .primario { padding: 12px 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .telefono, .alone, .schermo::after { transition: none !important; }
  .acceso .alone { animation: none; }
  .forma-scambio.scambiato .a, .forma-scambio.scambiato .b { animation: none; }
}

/* «0 €»: entra da scala 0.9 (brief, tabella Movimento) */
.numero-gigante[data-rivela] { transform: scale(0.9); transition: opacity 1.2s var(--curva-uscita), transform 1.2s var(--curva-uscita); }
.numero-gigante[data-rivela].rivelato { transform: none; }
@media (prefers-reduced-motion: reduce) { .numero-gigante[data-rivela] { transform: none; } }