/* ioSegno — sito pubblico. Palette «Al tavolo» come nella grafica definita dell'app:
   arancio #E36C42 = azione (testo #102734), ruggine #A13E20 = testo d'accento e link,
   blu #172D3D = superfici forti, avorio #FFFBF5 = sfondo. L'arancio non si usa mai per il testo. */

@font-face {
  font-family: "Nunito";
  src: url("font/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --avorio: #fffbf5;
  --carta: #ffffff;
  --carta-2: #fbead2;
  --carta-3: #f6dcbd;
  --blu: #172d3d;
  --blu-2: #22394b;
  --blu-3: #2e4a5e;
  --inchiostro: #172d3d;
  --testo-2: #4c5966;
  --linea: #ead8bd;
  --arancio: #e36c42;
  --arancio-vivo: #ee7a4f;
  --arancio-testo: #a13e20;
  --arancio-tenue: #fde3d3;
  --verde-tenue: #dcebe3;
  --ombra: 0 1px 2px rgb(23 45 61 / 6%), 0 12px 32px -12px rgb(23 45 61 / 22%);
  --ombra-forte: 0 2px 6px rgb(23 45 61 / 8%), 0 40px 80px -30px rgb(23 45 61 / 45%);
  --raggio: 22px;
  --raggio-s: 14px;
  --larghezza: 1180px;
  --font: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --avorio: #0e1c26;
    --carta: #142836;
    --carta-2: #1b3243;
    --carta-3: #23405a;
    --inchiostro: #fff4df;
    --testo-2: #b8c3cb;
    --linea: #29445a;
    --arancio-testo: #f2a279;
    --arancio-tenue: #3a2b25;
    --verde-tenue: #1d3530;
    --ombra: 0 1px 2px rgb(0 0 0 / 30%), 0 14px 34px -14px rgb(0 0 0 / 60%);
    --ombra-forte: 0 2px 6px rgb(0 0 0 / 30%), 0 40px 80px -30px rgb(0 0 0 / 75%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --avorio: #0e1c26;
  --carta: #142836;
  --carta-2: #1b3243;
  --carta-3: #23405a;
  --inchiostro: #fff4df;
  --testo-2: #b8c3cb;
  --linea: #29445a;
  --arancio-testo: #f2a279;
  --arancio-tenue: #3a2b25;
  --verde-tenue: #1d3530;
  --ombra: 0 1px 2px rgb(0 0 0 / 30%), 0 14px 34px -14px rgb(0 0 0 / 60%);
  --ombra-forte: 0 2px 6px rgb(0 0 0 / 30%), 0 40px 80px -30px rgb(0 0 0 / 75%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--avorio);
  color: var(--inchiostro);
  font: 400 17px/1.6 var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--arancio-testo); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--arancio); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, h4 { font-weight: 900; line-height: 1.08; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: min(var(--larghezza), calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px;
  background: var(--blu); color: #fff4df; font-weight: 800; text-decoration: none; transition: top .2s;
}
.salta:focus { top: 12px; }

/* ——— Intestazione ——— */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--avorio) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.testata.staccata { border-color: var(--linea); box-shadow: 0 6px 24px -18px rgb(23 45 61 / 40%); }
.testata .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.marchio { display: block; width: 168px; flex: none; }
.marchio img { width: 100%; }
.marchio .per-scuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marchio .per-chiaro { display: none; } :root:not([data-theme="light"]) .marchio .per-scuro { display: block; } }
:root[data-theme="dark"] .marchio .per-chiaro { display: none; }
:root[data-theme="dark"] .marchio .per-scuro { display: block; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.menu a:not(.bottone) {
  color: var(--inchiostro); text-decoration: none; font-weight: 750; font-size: 15px;
  padding: 8px 12px; border-radius: 999px; transition: background .2s;
}
.menu a:not(.bottone):hover, .menu a:not(.bottone)[aria-current="page"] { background: var(--carta-2); }
.menu .bottone { margin-left: 8px; }
.apri-menu { display: none; }

/* ——— Bottoni ——— */
.bottone {
  --b-sfondo: var(--arancio); --b-testo: #102734;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px; border-radius: 999px; border: 0;
  background: var(--b-sfondo); color: var(--b-testo);
  font: 850 16px/1.2 var(--font); text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / 30%) inset, 0 10px 24px -12px rgb(227 108 66 / 80%);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.bottone:hover { transform: translateY(-2px); background: var(--arancio-vivo); box-shadow: 0 1px 0 rgb(255 255 255 / 30%) inset, 0 16px 30px -12px rgb(227 108 66 / 85%); text-decoration: none; }
.bottone:active { transform: translateY(0); }
.bottone.secondario { --b-sfondo: var(--carta); --b-testo: var(--inchiostro); box-shadow: inset 0 0 0 1.5px var(--linea); }
.bottone.secondario:hover { background: var(--carta-2); box-shadow: inset 0 0 0 1.5px var(--carta-3); }
.bottone.piccolo { min-height: 42px; padding: 9px 18px; font-size: 15px; }
.bottone[aria-disabled="true"] {
  cursor: not-allowed; background: var(--carta-2); color: var(--testo-2); box-shadow: inset 0 0 0 1.5px dashed var(--linea);
  box-shadow: inset 0 0 0 1.5px var(--linea); transform: none;
}
.bottone[aria-disabled="true"]:hover { transform: none; background: var(--carta-2); }
.bottone .freccia { transition: transform .25s var(--ease); }
.bottone:hover .freccia { transform: translateX(3px); }
.su-scuro .bottone.secondario { --b-sfondo: rgb(255 244 223 / 8%); --b-testo: #fff4df; box-shadow: inset 0 0 0 1.5px rgb(255 244 223 / 25%); }
.su-scuro .bottone[aria-disabled="true"] { background: rgb(255 244 223 / 8%); color: #c9d2d8; box-shadow: inset 0 0 0 1.5px rgb(255 244 223 / 22%); }

/* ——— Etichette ——— */
.occhiello {
  display: inline-flex; align-items: center; gap: 10px; color: var(--arancio-testo);
  font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
}
.occhiello::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.su-scuro .occhiello { color: #f2a279; }
.pastiglia {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  background: var(--arancio-tenue); color: var(--arancio-testo); font-size: 13px; font-weight: 850;
}
.pastiglia.verde { background: var(--verde-tenue); color: #2f6b55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pastiglia.verde { color: #9fd3bd; } }
:root[data-theme="dark"] .pastiglia.verde { color: #9fd3bd; }
.su-scuro .pastiglia { background: rgb(242 162 121 / 16%); color: #f6b896; }

/* ——— Telefono ——— */
.telefono {
  position: relative; width: 300px; aspect-ratio: 720 / 1558; border-radius: 46px; padding: 10px;
  background: linear-gradient(145deg, #2a4458, #0f1f2b 60%);
  box-shadow: var(--ombra-forte), inset 0 0 0 1.5px rgb(255 255 255 / 10%);
}
.telefono::before {
  content: ""; position: absolute; top: 20px; left: 50%; translate: -50% 0; z-index: 2;
  width: 82px; height: 22px; border-radius: 20px; background: #0b1620;
}
.telefono img, .telefono .schermi { width: 100%; height: 100%; border-radius: 37px; object-fit: cover; object-position: top; background: var(--carta); }
.telefono .schermi { position: relative; overflow: hidden; }
.telefono .schermi img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease); transform: scale(1.03); }
.telefono .schermi img.attivo { opacity: 1; transform: none; }

/* ——— Apertura ——— */
.apertura { position: relative; padding: 56px 0 96px; isolation: isolate; overflow-x: clip; }
.apertura::before {
  content: ""; position: absolute; inset: -120px 0 0; z-index: -1;
  background:
    radial-gradient(600px 380px at 82% 30%, rgb(227 108 66 / 18%), transparent 70%),
    radial-gradient(520px 360px at 8% 8%, rgb(23 45 61 / 8%), transparent 70%);
}
.apertura .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.apertura h1 { font-size: clamp(46px, 6.6vw, 92px); letter-spacing: -.045em; margin: 22px 0 24px; }
.apertura h1 em { font-style: normal; color: var(--arancio-testo); position: relative; white-space: nowrap; }
.apertura h1 em svg { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .32em; overflow: visible; }
.apertura h1 em path { stroke: var(--arancio); stroke-width: 7; fill: none; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: traccia 1.2s .6s var(--ease) forwards; }
.apertura .lead { font-size: clamp(18px, 1.7vw, 21px); color: var(--testo-2); max-width: 34em; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.apertura .nota { margin-top: 18px; color: var(--testo-2); font-size: 14px; display: flex; gap: 8px; align-items: center; }
.scena { position: relative; height: 640px; }
.scena .telefono { position: absolute; }
.scena .t1 { right: 22%; top: 30px; rotate: -6deg; z-index: 2; animation: galleggia 7s ease-in-out infinite; }
.scena .t2 { right: -2%; top: 0; rotate: 5deg; width: 270px; z-index: 1; animation: galleggia 8s 1s ease-in-out infinite reverse; }
.gettone {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px;
  background: var(--carta); border-radius: 18px; box-shadow: var(--ombra); font-weight: 850; font-size: 15px; white-space: nowrap;
  border: 1px solid var(--linea);
}
.gettone small { display: block; font-weight: 650; color: var(--testo-2); font-size: 12.5px; }
.gettone .segno {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--arancio); color: #172d3d; font-size: 20px; font-weight: 1000;
}
.gettone .segno.blu { background: var(--blu); color: #fff4df; }
.g1 { left: 0; top: 120px; animation: dondola 6s ease-in-out infinite; }
.g2 { left: 6%; bottom: 90px; animation: dondola 7s 1.4s ease-in-out infinite; }
.g3 { right: 0; bottom: 30px; animation: dondola 6.5s .8s ease-in-out infinite; }
.semi { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.semi span { position: absolute; font-size: 28px; color: var(--arancio); opacity: .35; animation: galleggia 9s ease-in-out infinite; }

@keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes dondola { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.5deg); } }
@keyframes traccia { to { stroke-dashoffset: 0; } }

/* ——— Fascia numeri ——— */
.fatti { border-block: 1px solid var(--linea); background: var(--carta); }
.fatti ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.fatti li { padding: 26px 22px; display: flex; gap: 14px; align-items: center; }
.fatti li + li { border-left: 1px solid var(--linea); }
.fatti b { display: block; font-size: 17px; font-weight: 900; line-height: 1.2; }
.fatti span { color: var(--testo-2); font-size: 14px; line-height: 1.35; display: block; margin-top: 2px; }
.fatti .icona { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--arancio-tenue); color: var(--arancio-testo); }
.fatti .icona svg { width: 22px; height: 22px; }

/* ——— Sezioni ——— */
.sezione { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.capo { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.capo h2 { font-size: clamp(36px, 4.8vw, 62px); letter-spacing: -.04em; margin: 16px 0 18px; }
.capo p { font-size: clamp(17px, 1.5vw, 20px); color: var(--testo-2); }
.capo.centro { margin-inline: auto; text-align: center; }

/* Griglia funzioni */
.mosaico { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.tessera {
  position: relative; overflow: hidden; border-radius: var(--raggio); background: var(--carta);
  border: 1px solid var(--linea); padding: 30px; box-shadow: var(--ombra);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tessera:hover { transform: translateY(-4px); box-shadow: var(--ombra-forte); }
.tessera h3 { font-size: 24px; margin: 18px 0 10px; }
.tessera p { color: var(--testo-2); font-size: 16px; }
.tessera .simbolo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--arancio-tenue); color: var(--arancio-testo); font-size: 24px; font-weight: 1000; }
.tessera .simbolo svg { width: 26px; height: 26px; }
.tessera.larga { grid-column: span 4; display: grid; grid-template-columns: 1fr 230px; gap: 28px; align-items: end; padding-bottom: 0; }
.tessera.larga > div { padding-bottom: 30px; align-self: center; }
.tessera.stretta { grid-column: span 2; }
.tessera.terzo { grid-column: span 2; }
.tessera.meta { grid-column: span 3; }
.tessera .ritaglio { align-self: end; height: 300px; overflow: hidden; border-radius: 26px 26px 0 0; border: 8px solid #1b3243; border-bottom: 0; box-shadow: var(--ombra); }
.tessera .ritaglio img { width: 100%; }
.tessera.scura { background: var(--blu); border-color: var(--blu); color: #fff4df; }
.tessera.scura p { color: #c4ced5; }
.tessera.scura .simbolo { background: rgb(227 108 66 / 18%); color: #f6b896; }
.tessera.arancio { background: var(--arancio); border-color: var(--arancio); color: #172d3d; }
.tessera.arancio p { color: #3b2a22; }
.tessera.arancio .simbolo { background: rgb(23 45 61 / 12%); color: #172d3d; }
.tessera .pastiglia { margin-top: 16px; }
.mini-timer { display: flex; gap: 8px; margin-top: 20px; }
.mini-timer span { flex: 1; padding: 10px; border-radius: 12px; background: rgb(255 244 223 / 8%); border: 1px solid rgb(255 244 223 / 14%); font-weight: 850; font-size: 14px; text-align: center; }
.mini-timer span.on { background: var(--arancio); color: #172d3d; border-color: var(--arancio); }

/* ——— Come si usa ——— */
.percorso { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; align-items: start; }
.passi { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passo { counter-increment: passo; min-height: 54vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 84px; position: relative; opacity: .38; transition: opacity .5s var(--ease); }
.passo:first-child { min-height: 40vh; }
.passo.attivo { opacity: 1; }
.passo::before {
  content: counter(passo); position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  font-size: 24px; font-weight: 1000; background: var(--carta-2); color: var(--inchiostro);
  transition: background .4s, color .4s, transform .4s var(--ease);
}
.passo.attivo::before { background: var(--arancio); color: #172d3d; transform: rotate(-6deg) scale(1.06); }
.passo::after { content: ""; position: absolute; left: 27px; top: calc(50% + 40px); bottom: calc(-50% + 40px); width: 2px; background: repeating-linear-gradient(to bottom, var(--linea) 0 6px, transparent 6px 12px); }
.passo:last-child::after { display: none; }
.passo h3 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 12px; }
.passo p { color: var(--testo-2); font-size: 18px; max-width: 30em; }
.passo .dettagli { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.passo .telefono { display: none; }
.palco { position: sticky; top: calc(50vh - 330px); display: grid; place-items: center; }
.palco .telefono { width: 320px; }

/* ——— Giochi ——— */
.giochi-guidati { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.guidato { display: grid; grid-template-columns: 1fr 170px; gap: 24px; padding: 30px 30px 0; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); overflow: hidden; box-shadow: var(--ombra); }
.guidato > div { padding-bottom: 30px; }
.guidato h3 { font-size: 30px; margin: 14px 0 10px; }
.guidato p { color: var(--testo-2); }
.guidato ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.guidato li { display: flex; gap: 10px; align-items: baseline; }
.guidato li::before { content: "✓"; color: var(--arancio-testo); font-weight: 1000; }
.guidato .ritaglio { align-self: end; height: 280px; overflow: hidden; border-radius: 24px 24px 0 0; border: 7px solid #1b3243; border-bottom: 0; }
.catalogo { border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); padding: 30px; box-shadow: var(--ombra); }
.catalogo-testa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 22px; }
.catalogo-testa h3 { font-size: 26px; }
.catalogo-testa p { color: var(--testo-2); max-width: 36em; margin-top: 6px; }
.filtri { display: flex; flex-wrap: wrap; gap: 8px; }
.filtri button {
  font: 800 14px/1 var(--font); padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--linea);
  background: transparent; color: var(--inchiostro); cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.filtri button:hover { background: var(--carta-2); }
.filtri button[aria-pressed="true"] { background: var(--blu); border-color: var(--blu); color: #fff4df; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .filtri button[aria-pressed="true"] { background: #fff4df; color: #172d3d; border-color: #fff4df; } }
:root[data-theme="dark"] .filtri button[aria-pressed="true"] { background: #fff4df; color: #172d3d; border-color: #fff4df; }
.elenco-giochi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.elenco-giochi li {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 11px; border-radius: 14px;
  background: var(--avorio); border: 1px solid var(--linea); font-weight: 750; font-size: 15px;
  transition: opacity .3s, transform .3s var(--ease);
}
.elenco-giochi li i { font-style: normal; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; background: var(--arancio-tenue); color: var(--arancio-testo); }
.elenco-giochi li[data-cat="dice"] i { background: var(--verde-tenue); color: #2f6b55; }
.elenco-giochi li[data-cat="words_and_awards"] i { background: #e6e3f6; color: #4b4389; }
.elenco-giochi li[data-cat="board_party"] i { background: #f6e7c9; color: #7a5310; }
.elenco-giochi li[data-cat="custom"] i { background: var(--blu); color: #fff4df; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .elenco-giochi li i { filter: saturate(.8) brightness(.9); } }
.elenco-giochi li.guidato-chip { border-color: var(--arancio); }
.elenco-giochi li.nascosto { display: none; }

/* ——— Telefoni vicini ——— */
.scuro { background: var(--blu); color: #fff4df; overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scuro { background: #091620; } }
:root[data-theme="dark"] .scuro { background: #091620; }
.scuro .capo p { color: #c4ced5; }
.vicini { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.vicini ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; }
.vicini li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.vicini li b { display: block; font-size: 18px; margin-bottom: 2px; }
.vicini li span { color: #c4ced5; }
.vicini li .n { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgb(255 244 223 / 8%); border: 1px solid rgb(255 244 223 / 14%); color: #f6b896; font-weight: 1000; }
.collegamento { position: relative; aspect-ratio: 1 / .86; }
.collegamento svg { width: 100%; height: 100%; overflow: visible; }
.collegamento .onda { fill: none; stroke: #e36c42; stroke-width: 2.5; stroke-dasharray: 6 10; animation: scorri 1.6s linear infinite; }
.collegamento .alone { fill: rgb(227 108 66 / 12%); transform-origin: center; transform-box: fill-box; animation: respira 3.2s ease-in-out infinite; }
@keyframes scorri { to { stroke-dashoffset: -32; } }
@keyframes respira { 0%, 100% { transform: scale(.92); opacity: .5; } 50% { transform: scale(1.08); opacity: 1; } }
.avviso-collaudo { margin-top: 30px; padding: 16px 18px; border-radius: 16px; background: rgb(255 244 223 / 6%); border: 1px solid rgb(255 244 223 / 14%); color: #d5dde2; font-size: 15px; display: flex; gap: 12px; }
.avviso-collaudo b { color: #fff4df; }

/* ——— Colori ——— */
.colori { display: grid; grid-template-columns: 340px 1fr; gap: 72px; align-items: center; }
.colori .coppia { position: relative; height: 600px; }
.colori .coppia .telefono { position: absolute; width: 270px; }
.colori .coppia .telefono:first-child { left: 0; top: 0; rotate: -4deg; }
.colori .coppia .telefono:last-child { left: 70px; top: 40px; rotate: 4deg; }
.tavolozza { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 32px; }
.tavolozza button {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--linea);
  background: var(--carta); color: var(--inchiostro); font: 800 15px/1.2 var(--font); cursor: pointer; text-align: left;
  transition: border-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.tavolozza button:hover { transform: translateY(-2px); box-shadow: var(--ombra); }
.tavolozza button[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.tavolozza .pallini { display: flex; flex: none; }
.tavolozza .pallini i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid var(--carta); }
.tavolozza .pallini i + i { background: var(--c2); margin-left: -8px; }
.anteprima-colore {
  margin-top: 22px; padding: 22px; border-radius: 20px; background: var(--c-bg, #fffbf5); color: #172d3d; border: 1px solid var(--linea);
  transition: background .5s var(--ease); display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.anteprima-colore b { display: block; font-size: 18px; }
.anteprima-colore small { color: #4c5966; font-size: 14px; }
.anteprima-colore .finto-bottone { padding: 12px 20px; border-radius: 999px; background: var(--c, #e36c42); color: #fff; font-weight: 850; transition: background .5s var(--ease); white-space: nowrap; }
.anteprima-colore .punti { display: flex; gap: 8px; margin-top: 12px; grid-column: 1 / -1; }
.anteprima-colore .punti span { flex: 1; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c, #e36c42) 16%, white); font-weight: 800; font-size: 14px; transition: background .5s var(--ease); }
.anteprima-colore .punti strong { display: block; font-size: 24px; font-weight: 1000; }

/* ——— Privacy in breve ——— */
.riservato { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.riservato article { padding: 26px; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); }
.riservato .simbolo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--blu); color: #fff4df; margin-bottom: 18px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .riservato .simbolo { background: var(--carta-3); } }
:root[data-theme="dark"] .riservato .simbolo { background: var(--carta-3); }
.riservato .simbolo svg { width: 22px; height: 22px; }
.riservato h3 { font-size: 20px; margin-bottom: 8px; }
.riservato p { color: var(--testo-2); font-size: 15.5px; }
.riservato-piede { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: var(--testo-2); font-size: 15px; }

/* ——— Statistiche e classifiche ——— */
.statistiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 6vw, 88px); align-items: center; }
.statistiche h2 { font-size: clamp(32px, 4vw, 52px); }
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
.numeri div { padding: 18px 16px; border-radius: 20px; background: var(--avorio); border: 1px solid var(--linea); }
.numeri b { display: block; font-size: clamp(30px, 3.4vw, 42px); font-weight: 1000; line-height: 1; color: var(--arancio-testo); letter-spacing: -.02em; }
.numeri span { display: block; margin-top: 8px; font-size: 14px; font-weight: 800; color: var(--testo-2); }
.statistiche .lista-spunta { margin-top: 28px; }
.statistiche .lista-spunta b { color: var(--inchiostro); }
.statistiche .lista-spunta span { color: var(--testo-2); }
.classifica { margin-top: 32px; border-radius: var(--raggio); padding: 26px 26px 0; background: var(--blu); color: #fff4df; overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .classifica { background: #091620; border: 1px solid var(--linea); } }
:root[data-theme="dark"] .classifica { background: #091620; border: 1px solid var(--linea); }
.classifica-testa { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.classifica h3 { font-size: 22px; margin: 12px 0 6px; }
.classifica p { color: #c4ced5; font-size: 15.5px; max-width: 46ch; }
.classifica .pastiglia { background: rgb(242 162 121 / 16%); color: #f6b896; }
.classifica .lucchetto { flex: none; width: 30px; height: 30px; color: #f2a279; opacity: .8; }
.podio { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-top: 22px; opacity: .55; filter: grayscale(.35); }
.gradino { width: 86px; display: grid; justify-items: center; gap: 8px; }
.gradino i { display: grid; place-items: center; width: 100%; border-radius: 14px 14px 0 0; background: rgb(255 244 223 / 10%); border: 1px solid rgb(255 244 223 / 16%); border-bottom: 0; font-style: normal; font-weight: 1000; font-size: 20px; color: #fff4df; }
.gradino.p1 i { height: 78px; background: rgb(227 108 66 / 32%); }
.gradino.p2 i { height: 56px; }
.gradino.p3 i { height: 40px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff4df; color: #172d3d; font-weight: 1000; font-size: 15px; }
.coppia-stat { position: relative; height: 640px; }
.coppia-stat .telefono { position: absolute; width: 270px; }
.coppia-stat .telefono:first-child { left: 0; top: 0; rotate: -4deg; z-index: 1; }
.coppia-stat .telefono:last-child { right: 0; top: 70px; rotate: 4deg; }

/* ——— Invito ——— */
.invito { padding: 0 0 clamp(80px, 10vw, 130px); }
.invito .scheda {
  position: relative; overflow: hidden; border-radius: 34px; padding: clamp(36px, 6vw, 72px);
  background: var(--blu); color: #fff4df; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .invito .scheda { background: #091620; border: 1px solid var(--linea); } }
:root[data-theme="dark"] .invito .scheda { background: #091620; border: 1px solid var(--linea); }
.invito h2 { font-size: clamp(34px, 4.4vw, 56px); margin: 16px 0 16px; letter-spacing: -.04em; }
.invito p { color: #c4ced5; font-size: 18px; }
.invito .simbolo-grande { position: absolute; right: -60px; bottom: -80px; width: 420px; opacity: .1; rotate: -12deg; pointer-events: none; }
.invito .azioni { justify-content: flex-end; position: relative; }

/* ——— Piede ——— */
.piede { border-top: 1px solid var(--linea); padding: 56px 0 40px; background: var(--carta); }
.piede .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.piede .marchio { width: 180px; margin-bottom: 14px; }
.piede p { color: var(--testo-2); font-size: 15px; max-width: 26em; }
.piede h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-2); margin-bottom: 14px; font-weight: 900; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.piede ul a { color: var(--inchiostro); text-decoration: none; font-weight: 750; }
.piede ul a:hover { color: var(--arancio-testo); text-decoration: underline; }
.piede .base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 26px; border-top: 1px solid var(--linea); color: var(--testo-2); font-size: 14px; }
.tema-scelta { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--avorio); border: 1px solid var(--linea); }
.tema-scelta button { font: 800 13px/1 var(--font); color: var(--testo-2); background: transparent; border: 0; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.tema-scelta button[aria-pressed="true"] { background: var(--carta-2); color: var(--inchiostro); }

/* ——— Pagine interne ——— */
.pagina-testa { padding: 64px 0 40px; position: relative; isolation: isolate; }
.pagina-testa::before { content: ""; position: absolute; inset: -100px 0 0; z-index: -1; background: radial-gradient(520px 300px at 85% 20%, rgb(227 108 66 / 14%), transparent 70%); }
.pagina-testa h1 { font-size: clamp(42px, 5.6vw, 72px); letter-spacing: -.045em; margin: 18px 0 18px; }
.pagina-testa .lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--testo-2); max-width: 36em; }
.colonne { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 110px; }
.indice { position: sticky; top: 100px; padding: 20px; border-radius: 18px; background: var(--carta); border: 1px solid var(--linea); font-size: 15px; }
.indice b { display: block; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-2); margin-bottom: 10px; }
.indice ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: voce; }
.indice a { display: block; padding: 6px 10px; border-radius: 10px; color: var(--inchiostro); text-decoration: none; font-weight: 700; line-height: 1.35; }
.indice a:hover { background: var(--carta-2); }
.indice a.attivo { background: var(--arancio-tenue); color: var(--arancio-testo); }
.testo-legale { max-width: 720px; font-size: 17.5px; line-height: 1.75; }
.testo-legale section { padding: 8px 0 26px; border-bottom: 1px solid var(--linea); margin-bottom: 26px; }
.testo-legale section:last-child { border-bottom: 0; }
.testo-legale h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 10px 0 14px; letter-spacing: -.02em; }
.testo-legale p + p { margin-top: 14px; }
.testo-legale .versione { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.testo-legale pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.riquadro { padding: 22px 24px; border-radius: 18px; background: var(--carta); border: 1px solid var(--linea); }
.riquadro.attesa { background: var(--arancio-tenue); border-color: transparent; }

.contatti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 64px; }
.contatto { padding: 28px; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); box-shadow: var(--ombra); display: flex; flex-direction: column; gap: 10px; }
.contatto h2 { font-size: 22px; }
.contatto p { color: var(--testo-2); font-size: 15.5px; }
.contatto .bottone { margin-top: auto; align-self: flex-start; }
.contatto .simbolo { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--arancio-tenue); color: var(--arancio-testo); margin-bottom: 6px; }
.contatto .simbolo svg { width: 24px; height: 24px; }
.domande { display: grid; gap: 12px; max-width: 860px; }
.domande h2 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 18px; }
.domande details { border-radius: 18px; background: var(--carta); border: 1px solid var(--linea); transition: box-shadow .3s; }
.domande details[open] { box-shadow: var(--ombra); }
.domande summary { cursor: pointer; list-style: none; padding: 20px 60px 20px 24px; font-weight: 850; font-size: 18px; position: relative; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.5px solid var(--arancio-testo); border-bottom: 2.5px solid var(--arancio-testo); rotate: 45deg; transition: rotate .3s var(--ease), margin .3s;
}
.domande details[open] summary::after { rotate: 225deg; margin-top: -2px; }
.domande .risposta { padding: 0 24px 22px; color: var(--testo-2); }
.domande .risposta p + p { margin-top: 10px; }

.tester-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; padding-bottom: 110px; }
.lista-spunta { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.lista-spunta li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.lista-spunta li::before { content: "✓"; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--arancio-tenue); color: var(--arancio-testo); font-weight: 1000; }
.blocco + .blocco { margin-top: 48px; }
.blocco h2 { font-size: clamp(26px, 2.8vw, 34px); margin-bottom: 12px; }
.blocco > p { color: var(--testo-2); }
.passi-tester { list-style: none; padding: 0; margin: 20px 0 0; counter-reset: pt; display: grid; gap: 14px; }
.passi-tester li { counter-increment: pt; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px; border-radius: 18px; background: var(--carta); border: 1px solid var(--linea); }
.passi-tester li::before { content: counter(pt); width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--blu); color: #fff4df; font-weight: 1000; font-size: 18px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .passi-tester li::before { background: var(--carta-3); } }
:root[data-theme="dark"] .passi-tester li::before { background: var(--carta-3); }
.passi-tester b { display: block; margin-bottom: 2px; }
.passi-tester span { color: var(--testo-2); font-size: 15.5px; }
.iscrizione { position: sticky; top: 100px; padding: 30px; border-radius: 26px; background: var(--blu); color: #fff4df; overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .iscrizione { background: #091620; border: 1px solid var(--linea); } }
:root[data-theme="dark"] .iscrizione { background: #091620; border: 1px solid var(--linea); }
.iscrizione h2 { font-size: 28px; margin: 14px 0 10px; }
.iscrizione p { color: #c4ced5; font-size: 15.5px; }
.iscrizione .bottone { width: 100%; margin-top: 22px; }
.iscrizione .piccolo-testo { font-size: 13.5px; margin-top: 14px; color: #a9b6bf; }
.errore-404 { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.errore-404 h1 { font-size: clamp(42px, 6vw, 76px); margin: 18px 0 14px; }
.errore-404 p { color: var(--testo-2); font-size: 19px; }
.errore-404 .azioni { justify-content: center; }

/* ——— Comparsa ——— */
.compare { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--ritardo, 0s); }
.compare.visto { opacity: 1; transform: none; }
.no-js .compare { opacity: 1; transform: none; }

/* ——— Adattamenti ——— */
@media (max-width: 1080px) {
  .apertura .wrap { grid-template-columns: 1fr; }
  .scena { height: 600px; max-width: 560px; margin-inline: auto; width: 100%; }
  .fatti ul { grid-template-columns: 1fr 1fr; }
  .fatti li:nth-child(3) { border-left: 0; }
  .fatti li:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .tessera.larga { grid-column: span 6; }
  .tessera.stretta, .tessera.terzo { grid-column: span 3; }
  .riservato { grid-template-columns: 1fr 1fr; }
  .colori { grid-template-columns: 1fr; gap: 40px; }
  .colori .coppia { height: 560px; width: 340px; margin-inline: auto; order: 2; }
  .percorso { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
  .palco .telefono { width: 280px; }
  .giochi-guidati { grid-template-columns: 1fr; }
  .contatti { grid-template-columns: 1fr 1fr; }
  .tester-griglia { grid-template-columns: 1fr; }
  .iscrizione { position: static; }
  .statistiche { grid-template-columns: 1fr; }
  .coppia-stat { width: 100%; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 860px) {
  .menu {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 20px 22px;
    background: var(--avorio); border-bottom: 1px solid var(--linea); box-shadow: 0 30px 40px -30px rgb(23 45 61 / 40%);
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .menu.aperto { opacity: 1; visibility: visible; transform: none; }
  .menu a:not(.bottone) { padding: 14px 12px; font-size: 17px; border-radius: 14px; }
  .menu .bottone { margin: 8px 0 0; }
  .apri-menu {
    display: grid; place-items: center; margin-left: auto; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--linea);
    background: var(--carta); color: var(--inchiostro); cursor: pointer;
  }
  .apri-menu span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: background .2s; }
  .apri-menu span::before, .apri-menu span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease); }
  .apri-menu span::before { top: -6px; } .apri-menu span::after { top: 6px; }
  .apri-menu[aria-expanded="true"] span { background: transparent; }
  .apri-menu[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .apri-menu[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
  .percorso { grid-template-columns: 1fr; }
  .palco { display: none; }
  .passo, .passo:first-child { min-height: 0; opacity: 1; padding: 0 0 56px 0; }
  .passo::before { position: static; translate: none; margin-bottom: 16px; }
  .passo::after { display: none; }
  .passo .telefono { display: block; width: min(250px, 70%); margin: 26px auto 0; }
  .passo.attivo::before { transform: none; }
  .vicini { grid-template-columns: 1fr; gap: 30px; }
  .collegamento { max-width: 460px; margin-inline: auto; width: 100%; }
  .invito .scheda { grid-template-columns: 1fr; }
  .invito .azioni { justify-content: flex-start; }
  .piede .wrap { grid-template-columns: 1fr 1fr; }
  .piede .wrap > :first-child { grid-column: 1 / -1; }
  .colonne { grid-template-columns: 1fr; gap: 24px; }
  .indice { position: static; }
  .contatti { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .wrap { width: calc(100% - 32px); }
  .marchio { width: 140px; }
  .apertura { padding: 28px 0 64px; }
  .apertura h1 { font-size: clamp(42px, 12.5vw, 60px); }
  .azioni .bottone { flex: 1 1 100%; }
  .scena { height: 470px; }
  .scena .t1 { width: 210px; right: 30%; top: 20px; }
  .scena .t2 { width: 190px; right: 0; }
  .telefono { border-radius: 34px; padding: 7px; }
  .telefono img, .telefono .schermi { border-radius: 28px; }
  .telefono::before { top: 14px; width: 60px; height: 16px; }
  .gettone { font-size: 13.5px; padding: 8px 12px 8px 8px; border-radius: 14px; }
  .gettone .segno { width: 32px; height: 32px; font-size: 16px; border-radius: 10px; }
  .g1 { top: 70px; } .g2 { bottom: 70px; left: 0; } .g3 { bottom: 10px; }
  .fatti ul { grid-template-columns: 1fr; }
  .fatti li + li { border-left: 0; border-top: 1px solid var(--linea); }
  .fatti li { padding: 18px 4px; }
  .numeri { gap: 8px; }
  .numeri div { padding: 14px 10px; border-radius: 16px; }
  .numeri span { font-size: 12.5px; }
  .coppia-stat { height: 430px; }
  .coppia-stat .telefono { width: 178px; }
  .coppia-stat .telefono:first-child { rotate: -3deg; }
  .coppia-stat .telefono:last-child { top: 50px; rotate: 3deg; }
  .classifica { padding: 22px 20px 0; }
  .gradino { width: 72px; }
  .mosaico { grid-template-columns: 1fr; }
  .tessera.larga, .tessera.stretta, .tessera.terzo, .tessera.meta { grid-column: auto; }
  .tessera.larga { grid-template-columns: 1fr; }
  .tessera.larga > div { padding-bottom: 0; }
  .tessera .ritaglio { height: 260px; width: 220px; margin-inline: auto; }
  .tessera { padding: 24px; }
  .guidato { grid-template-columns: 1fr; padding: 24px 24px 0; }
  .guidato > div { padding-bottom: 0; }
  .guidato .ritaglio { width: 200px; height: 240px; margin-inline: auto; }
  .catalogo { padding: 22px; }
  .elenco-giochi { gap: 8px; }
  .elenco-giochi li { font-size: 14px; padding: 7px 12px 7px 8px; }
  .elenco-giochi li i { width: 22px; height: 22px; font-size: 12px; }
  .riservato { grid-template-columns: 1fr; }
  .colori .coppia { height: 470px; width: 290px; }
  .colori .coppia .telefono { width: 220px; }
  .colori .coppia .telefono:last-child { left: 60px; }
  .tavolozza { grid-template-columns: 1fr 1fr; }
  .anteprima-colore { grid-template-columns: 1fr; }
  .piede .wrap { grid-template-columns: 1fr; }
  .invito .simbolo-grande { width: 260px; right: -60px; bottom: -40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .compare { opacity: 1; transform: none; }
  .apertura h1 em path { stroke-dashoffset: 0; }
}

@media print {
  .testata, .piede, .invito, .indice { display: none; }
  body { background: #fff; color: #000; }
  .colonne { display: block; }
}