/* ==========================================================================
   Plodar Bergsteiger — stili del sito
   Arancio del logo (moschettone) + sfumature d'azzurro della neve.
   ========================================================================== */

@font-face { font-family: 'Big Shoulders'; src: url('../font/big-shoulders.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../font/outfit.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Caveat Brush'; src: url('../font/caveat-brush.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --oro: #FDC200;
  --arancio: #F1883C;
  --arancio-vivo: #F07A1F;
  --ruggine: #D16115;
  --roccia: #323231;

  --neve: #F4F9FD;
  --ghiaccio: #E3F0FA;
  --brina: #C9E2F4;
  --cielo: #8EC5EC;
  --azzurro: #3F82B5;
  --blu: #1D4E7A;
  --notte: #0A1A2F;
  --notte-2: #12294A;

  --testo: #17293D;
  --testo-2: #4A5F75;
  --bianco: #fff;

  --grad-sole: linear-gradient(120deg, var(--oro) 0%, var(--arancio) 55%, var(--ruggine) 100%);
  --grad-neve: linear-gradient(180deg, #fff 0%, var(--ghiaccio) 100%);
  --grad-cielo: linear-gradient(180deg, #7DB6E3 0%, #3F82B5 30%, #1D4E7A 62%, #12294A 82%, #0A1A2F 100%);

  --titoli: 'Big Shoulders', 'Arial Narrow', Impact, sans-serif;
  --corpo: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mano: 'Caveat Brush', 'Comic Sans MS', cursive;

  --r: 22px;
  --r-s: 14px;
  --ombra: 0 18px 50px -18px rgba(13, 38, 66, .35);
  --ombra-s: 0 8px 24px -10px rgba(13, 38, 66, .3);
  --largo: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --molla: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--neve); color: var(--testo);
  font-family: var(--corpo); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--titoli); font-weight: 900; line-height: .95; letter-spacing: .01em; margin: 0 0 .4em; text-transform: uppercase; }
h1 { font-size: clamp(3.2rem, 9vw, 7.5rem); }
h2 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
.nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.salta { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--arancio); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.salta:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }

.contenitore { width: min(var(--largo), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sezione { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.occhiello {
  display: inline-block; margin-bottom: 18px;
  font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ruggine);
}
.occhiello::before { content: ''; display: inline-block; vertical-align: middle; margin: -3px .6em 0 0; width: 28px; height: 3px; border-radius: 3px; background: var(--grad-sole); }
.su-scuro .occhiello { color: var(--oro); }
.mano { font-family: var(--mano); text-transform: none; font-weight: 400; letter-spacing: 0; }
.arancio { background: var(--grad-sole); -webkit-background-clip: text; background-clip: text; color: transparent; }
.su-scuro { color: #E8F2FB; }
.su-scuro h2, .su-scuro h3 { color: #fff; }
.intro-testo { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--testo-2); max-width: 60ch; }
.su-scuro .intro-testo { color: #B9D3EA; }

/* ---------- bottoni ---------- */
.btn {
  --bg: var(--grad-sole);
  position: relative; display: inline-flex; align-items: center; gap: .6em; cursor: pointer;
  padding: 16px 26px; border: 0; border-radius: 999px; background: var(--bg); color: #fff;
  font-family: var(--corpo); font-weight: 700; font-size: 1rem; text-decoration: none; letter-spacing: .01em;
  box-shadow: 0 12px 28px -12px rgba(209, 97, 21, .8); isolation: isolate; overflow: hidden;
  transition: transform .35s var(--molla), box-shadow .35s var(--ease);
}
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -12px rgba(209, 97, 21, .9); }
.btn:hover::after { transform: translateX(120%); }
.btn svg { width: 20px; height: 20px; transition: transform .35s var(--molla); }
.btn:hover svg { transform: translateX(4px); }
.btn-vetro { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-vetro:hover { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1.5px #fff; }
.btn-chiaro { background: #fff; color: var(--blu); box-shadow: var(--ombra-s); }
.btn-azzurro { background: linear-gradient(120deg, var(--azzurro), var(--blu)); box-shadow: 0 12px 28px -12px rgba(29, 78, 122, .8); }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------- testata ---------- */
.testata { position: fixed; inset: 0 0 auto; z-index: 90; color: #fff; transition: color .4s, transform .5s var(--ease); }
.testata::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 10px 30px -18px rgba(13,38,66,.45); opacity: 0; transition: opacity .4s; }
.testata-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(1320px, 100% - 2 * var(--gutter)); margin-inline: auto; height: 84px; transition: height .4s var(--ease); }
.testata.solida { color: var(--roccia); }
.testata.solida::before { opacity: 1; }
.testata.solida .testata-in { height: 68px; }
.testata.via { transform: translateY(-100%); }
body[data-testata="scura"] .testata:not(.solida) { color: var(--roccia); }
.testata-logo { display: block; width: 150px; transition: width .4s var(--ease), transform .4s var(--molla); }
.testata.solida .testata-logo { width: 124px; }
.testata-logo:hover { transform: rotate(-2deg) scale(1.04); }
.logo { width: 100%; height: auto; aspect-ratio: 1840 / 870; fill: currentColor; overflow: visible; }
.logo use { fill: currentColor; }
.menu { display: flex; align-items: center; gap: 6px; }
.menu a { position: relative; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .98rem; transition: background .3s; }
.menu a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2.5px; border-radius: 3px; background: var(--grad-sole); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.menu a:hover::after, .menu a.attiva::after { transform: scaleX(1); }
.menu-ig { display: inline-flex; align-items: center; gap: 8px; }
.menu-ig svg { width: 20px; height: 20px; }
.menu-ig span { display: none; }
.burger { display: none; position: relative; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); cursor: pointer; z-index: 3; }
.testata.solida .burger, body[data-testata="scura"] .burger { background: rgba(29,78,122,.08); }
.burger span { position: absolute; left: 13px; right: 13px; height: 2.5px; border-radius: 3px; background: currentColor; transition: transform .45s var(--molla), opacity .3s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
.menu-aperto .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-aperto .burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-aperto .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  .testata-logo { width: 120px; }
  .testata.solida .testata-logo { width: 106px; }
  .menu {
    position: fixed; inset: 0; z-index: 2; flex-direction: column; justify-content: center; gap: 4px;
    background: radial-gradient(120% 80% at 100% 0%, #1D4E7A 0%, var(--notte) 70%); color: #fff;
    clip-path: circle(0 at calc(100% - 44px) 42px); transition: clip-path .7s var(--ease); visibility: hidden;
  }
  .menu-aperto .menu { clip-path: circle(150% at calc(100% - 44px) 42px); visibility: visible; }
  .menu a { font-family: var(--titoli); font-weight: 900; font-size: clamp(2.2rem, 10vw, 3.2rem); text-transform: uppercase; padding: 6px 20px; opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .5s var(--molla); }
  .menu-aperto .menu a { opacity: 1; transform: none; }
  .menu-aperto .menu a:nth-child(2) { transition-delay: .06s; } .menu-aperto .menu a:nth-child(3) { transition-delay: .12s; }
  .menu-aperto .menu a:nth-child(4) { transition-delay: .18s; } .menu-aperto .menu a:nth-child(5) { transition-delay: .24s; }
  .menu a::after { bottom: 2px; left: 20px; right: 20px; }
  .menu-ig span { display: inline; font-size: 1.4rem; font-family: var(--corpo); text-transform: none; font-weight: 600; }
  .menu-aperto .testata { color: #fff; }
  .menu-aperto .testata::before { opacity: 0; }
  .menu-aperto .testata-logo { position: relative; z-index: 3; }
  .menu-aperto { overflow: hidden; }
}

/* ---------- intro (3 secondi, solo home) ---------- */
.intro {
  position: fixed; inset: 0; z-index: 150; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 40%, #16365C 0%, var(--notte) 70%); color: #fff;
  transition: clip-path 1s cubic-bezier(.7, 0, .2, 1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 88% 97%, 76% 100%, 62% 96%, 50% 100%, 36% 96%, 24% 100%, 12% 96%, 0 100%);
}
.intro.esce { clip-path: polygon(0 0, 100% 0, 100% 0, 88% 0, 76% 0, 62% 0, 50% 0, 36% 0, 24% 0, 12% 0, 0 0); }
.intro-palco { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 5vh, 54px); width: 100%; min-width: 0; }
.intro .logo { width: min(560px, 78vw); }
.intro .logo use { transform-box: fill-box; }
.intro .logo use:nth-child(1) { animation: monte-sale 1s var(--ease) both .1s; clip-path: inset(0 0 0 0); }
.intro .logo use:nth-child(2) { animation: testo-entra .8s var(--ease) both .55s; }
.intro .logo use:nth-child(3) { transform-origin: 50% 0; animation: mosch-cade 1.1s var(--molla) both .35s; }
@keyframes monte-sale { from { transform: translateY(40%); opacity: 0; clip-path: inset(0 0 100% 0); } to { transform: none; opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes testo-entra { from { opacity: 0; transform: translateX(-4%); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mosch-cade { 0% { transform: translateY(-160%) rotate(-30deg); opacity: 0; } 55% { transform: translateY(4%) rotate(14deg); opacity: 1; } 75% { transform: rotate(-7deg); } 90% { transform: rotate(3deg); } 100% { transform: none; opacity: 1; } }
.intro-nastro { width: 100%; max-width: 900px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); animation: appare .6s ease both .8s; }
.intro-nastro-in { display: flex; width: max-content; gap: clamp(34px, 6vw, 70px); animation: nastro 3.2s linear infinite; }
.intro-nastro svg { width: clamp(42px, 7vw, 64px); height: clamp(42px, 7vw, 64px); flex: none; color: #fff; }
.intro-nastro svg:nth-child(3n+1) { color: var(--arancio); }
.intro-nastro svg:nth-child(3n+2) { color: var(--cielo); }
@keyframes nastro { to { transform: translateX(-50%); } }
@keyframes appare { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.intro-barra { width: min(220px, 50vw); height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.intro-barra i { display: block; height: 100%; background: var(--grad-sole); transform-origin: left; animation: barra 2.7s linear both; }
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.intro-salta { position: absolute; right: 20px; bottom: 24px; border: 0; background: none; color: rgba(255,255,255,.6); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.intro-salta:hover { color: #fff; }
body.con-intro { overflow: hidden; }

/* ---------- neve (canvas) ---------- */
.neve { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* ---------- hero home ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden;
  background: var(--grad-cielo); color: #fff; padding: 120px 0 150px; isolation: isolate;
}
.hero-sole { position: absolute; left: 50%; top: 42%; width: 80vmax; height: 80vmax; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(253,194,0,.42) 0%, rgba(241,136,60,.22) 30%, transparent 62%); z-index: -1; }
@media (hover: hover) { .hero-sole { animation: respiro 7s ease-in-out infinite; } }
@keyframes respiro { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: .8; } }
.hero-monti { position: absolute; inset: auto 0 0; height: max(30vh, 34vw); z-index: 0; pointer-events: none; }
.hero-monti svg { position: absolute; left: -5%; width: 110%; max-width: none; bottom: 0; height: 100%; will-change: transform; }
.hero-contenuto { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero .logo { width: min(640px, 84vw); filter: drop-shadow(0 16px 30px rgba(8, 25, 48, .45)); }
.hero .logo use:nth-child(3) { transform-box: fill-box; transform-origin: 50% 0; }
.hero-logo:hover .logo use:nth-child(3) { animation: dondola 1.2s var(--molla); }
@keyframes dondola { 20% { transform: rotate(12deg); } 45% { transform: rotate(-8deg); } 70% { transform: rotate(4deg); } 100% { transform: none; } }
.hero-titolo { font-size: clamp(1.5rem, 3.4vw, 2.4rem); margin: 26px 0 6px; letter-spacing: .06em; text-shadow: 0 4px 20px rgba(8, 25, 48, .45); }
.hero-sotto { font-family: var(--mano); font-size: clamp(1.4rem, 2.8vw, 2rem); color: #FFE2B8; margin: 0 0 30px; transform: rotate(-2deg); text-shadow: 0 3px 14px rgba(8,25,48,.5); }
.hero-azioni { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.scorri { position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: #B9D3EA; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; text-decoration: none; }
.scorri i { width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 14px; position: relative; }
.scorri i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--arancio); animation: rotella 1.6s ease-in-out infinite; }
@keyframes rotella { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- reveal ---------- */
.rivela { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--rit, 0s); }
.rivela.visto { opacity: 1; transform: none; }
.rivela-sx { transform: translateX(-50px); } .rivela-dx { transform: translateX(50px); }
.rivela-zoom { transform: scale(.9); }
.parole .p { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(4deg); transition: opacity .6s var(--ease), transform .7s var(--molla); transition-delay: calc(var(--i) * 60ms); }
.parole.visto .p { opacity: 1; transform: none; }

/* ---------- pellate (sezione home + pagina) ---------- */
.notte { background: radial-gradient(90% 60% at 80% 45%, #16365C 0%, var(--notte) 70%); color: #E8F2FB; overflow: hidden; isolation: isolate; }
.notte .stelle { position: absolute; left: 0; top: 0; width: 100%; height: min(100%, 1400px); z-index: -1; pointer-events: none; }
.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.dati { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 30px 0 34px; }
.dato { padding: 18px 20px; border-radius: var(--r-s); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: transform .4s var(--molla), background .3s; }
.dato:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }
.dato b { display: block; font-family: var(--titoli); font-weight: 900; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; color: #fff; }
.dato b small { font-size: .5em; margin-left: 3px; color: var(--oro); }
.dato > span { font-size: .9rem; color: #A9C6E2; }
.sfondo-chiaro .dato { background: #fff; box-shadow: var(--ombra-s); }
.sfondo-chiaro .dato b { color: var(--blu); }
.sfondo-chiaro .dato > span { color: var(--testo-2); }

.tracciato { position: relative; border-radius: calc(var(--r) + 6px); overflow: hidden; aspect-ratio: 4 / 4.6; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.12); isolation: isolate; }
.tracciato > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.08); }
.tracciato::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,26,47,.1) 0%, rgba(10,26,47,.35) 55%, rgba(10,26,47,.85) 100%); }
.tracciato svg.percorso { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.percorso .via-ombra { fill: none; stroke: rgba(10,26,47,.55); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.percorso .via { fill: none; stroke: url(#grad-via); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(253,194,0,.6)); }
.percorso .tappa { fill: var(--arancio); stroke: #fff; stroke-width: 4; }
.percorso .frontale { fill: #FFF6D6; filter: drop-shadow(0 0 10px #FDC200) drop-shadow(0 0 22px #F1883C); }
.percorso .fascio { fill: url(#grad-fascio); opacity: .9; }
.etichetta { position: absolute; padding: 8px 14px; border-radius: 12px; background: var(--azzurro); color: #fff; font-family: var(--titoli); font-weight: 800; font-size: clamp(.95rem, 1.6vw, 1.2rem); line-height: 1.05; text-transform: uppercase; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); }
.etichetta small { display: block; font-family: var(--corpo); font-weight: 600; font-size: .72rem; letter-spacing: .06em; opacity: .85; }
.etichetta.arrivo { left: 5%; top: 21%; }
.etichetta.partenza { right: 5%; bottom: 6%; text-align: right; }
.altimetro { position: absolute; left: 6%; bottom: 6%; display: flex; align-items: baseline; gap: 8px; color: #fff; font-family: var(--titoli); font-weight: 900; }
.altimetro b { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.altimetro span { font-family: var(--corpo); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.bollo { position: absolute; right: 5%; top: 5%; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--grad-sole); color: #fff; font-family: var(--titoli); font-weight: 900; line-height: .9; font-size: 1.15rem; text-transform: uppercase; transform: rotate(10deg); box-shadow: 0 14px 30px -10px rgba(209,97,21,.8); animation: galleggia 5s ease-in-out infinite; }
.bollo b { display: block; font-size: 2rem; }
@keyframes galleggia { 50% { transform: rotate(4deg) translateY(-8px); } }

/* ---------- tocca il ferro (home) ---------- */
.ferro-sez { background: linear-gradient(180deg, #fff 0%, #FFF4E6 60%, #FFE9D1 100%); overflow: hidden; }
.ferro-sez::before { content: ''; position: absolute; right: -10vw; top: -10vw; width: 50vw; height: 50vw; border-radius: 50%; background: radial-gradient(circle, rgba(253,194,0,.25), transparent 65%); }
.ferro-logo { width: min(340px, 72%); height: auto; cursor: pointer; transform-origin: 50% 30%; transition: transform .6s var(--molla); filter: drop-shadow(0 20px 30px rgba(50,50,49,.25)); }
.ferro-logo.tocco { animation: tocca 1s var(--molla); }
@keyframes tocca { 15% { transform: rotate(-14deg) scale(1.06); } 35% { transform: rotate(10deg) scale(1.08); } 55% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: none; } }
.barrato { position: relative; display: inline-block; color: var(--testo-2); }
.barrato::after { content: ''; position: absolute; left: -4%; right: -4%; top: 52%; height: .13em; border-radius: 4px; background: var(--ruggine); transform: rotate(-4deg) scaleX(0); transform-origin: left; transition: transform .6s var(--ease) .5s; }
.visto .barrato::after, .barrato.visto::after { transform: rotate(-4deg) scaleX(1); }
.correzione { display: block; font-family: var(--mano); text-transform: none; color: var(--ruggine); font-size: .55em; font-weight: 400; letter-spacing: 0; transform: rotate(-3deg); margin: .15em 0 0 .6em; }
.polaroid-pila { position: relative; height: clamp(360px, 44vw, 520px); }
.polaroid { position: absolute; width: 62%; padding: 10px 10px 42px; background: #fff; border-radius: 6px; box-shadow: 0 24px 50px -20px rgba(50,50,49,.55); transition: transform .6s var(--molla), z-index 0s; }
.polaroid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--mano); font-size: 1.25rem; color: var(--roccia); }
.polaroid:nth-child(1) { left: 0; top: 4%; transform: rotate(-8deg); }
.polaroid:nth-child(2) { right: 0; top: 0; transform: rotate(6deg); }
.polaroid:nth-child(3) { left: 18%; bottom: 0; transform: rotate(-2deg); }
.polaroid:hover { transform: rotate(0) scale(1.05); z-index: 5; }

/* ---------- mini gioco "ferma il ferro" ---------- */
.gioco { margin-top: 34px; padding: 26px; border-radius: var(--r); background: var(--roccia); color: #fff; box-shadow: var(--ombra); position: relative; overflow: hidden; }
.gioco::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,.025) 22px 44px); pointer-events: none; }
.gioco h3 { font-size: 1.6rem; margin-bottom: 4px; color: #fff; }
.gioco p { color: #C9C9C4; font-size: .95rem; margin-bottom: 18px; }
.gioco-riga { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gioco-bersaglio, .gioco-tempo { font-family: var(--titoli); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.gioco-bersaglio { font-size: 1.1rem; color: var(--oro); letter-spacing: .04em; }
.gioco-bersaglio b { font-size: 2.2rem; margin-left: 6px; }
.gioco-tempo { font-size: clamp(3rem, 7vw, 4.4rem); min-width: 3.4em; transition: filter .3s, opacity .3s; }
.gioco-tempo.buio { filter: blur(12px); opacity: .5; }
.gioco-esito { min-height: 1.6em; margin-top: 12px; font-family: var(--mano); font-size: 1.5rem; color: var(--oro); }
.gioco-record { font-size: .85rem; color: #A5A59F; }

/* ---------- chi siamo ---------- */
.chi { background: var(--grad-neve); }
.chi-foto { position: relative; }
.chi-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--r); box-shadow: var(--ombra); position: relative; z-index: 1; }
.chi-foto::before { content: ''; position: absolute; inset: 22px -22px -22px 22px; border-radius: var(--r); background: var(--grad-sole); }
.chi-foto .timbro { position: absolute; z-index: 2; left: -26px; bottom: 40px; padding: 14px 20px; border-radius: 16px; background: #fff; box-shadow: var(--ombra); font-family: var(--titoli); font-weight: 900; text-transform: uppercase; line-height: .95; color: var(--blu); font-size: 1.3rem; transform: rotate(-5deg); }
.chi-foto .timbro b { display: block; font-size: 2.4rem; color: var(--arancio); }
.attivita { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.att { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-s); background: #fff; box-shadow: var(--ombra-s); transition: transform .4s var(--molla), box-shadow .3s; }
.att:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: var(--ombra); }
.att svg { width: 46px; height: 46px; flex: none; padding: 9px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--cielo), var(--azzurro)); }
.att:nth-child(odd) svg { background: var(--grad-sole); }
.att b { display: block; font-weight: 700; line-height: 1.2; }
.att span { font-size: .88rem; color: var(--testo-2); line-height: 1.35; display: block; }

/* ---------- instagram ---------- */
.ig { background: #fff; text-align: center; overflow: hidden; }
.ig-cornice { position: relative; max-width: 560px; margin: 40px auto 0; border-radius: var(--r); background: #fff; box-shadow: var(--ombra); overflow: hidden; }
.ig-cornice iframe { width: 100%; height: 440px; border: 0; display: block; }
.ig-cornice.caricato .ig-testa { display: none; }
.ig-anteprima { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ig-anteprima img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.8) blur(1.5px); transform: scale(1.02); }
.ig-velo { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; background: linear-gradient(180deg, rgba(10,26,47,.35), rgba(10,26,47,.8)); color: #fff; }
.ig-velo svg { width: 46px; height: 46px; }
.ig-velo p { max-width: 36ch; font-size: .88rem; color: #D4E4F3; margin: 0; }
.ig-testa { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; border-bottom: 1px solid #EEF2F6; }
.ig-avatar { width: 46px; height: 46px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, var(--oro), var(--arancio), var(--ruggine), var(--azzurro), var(--oro)); flex: none; }
.ig-avatar span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.ig-avatar svg { width: 34px; color: var(--roccia); }
.ig-testa b { display: block; } .ig-testa small { color: var(--testo-2); }
.ig-testa .btn { margin-left: auto; padding: 9px 16px; font-size: .88rem; }
.ig-fiocchi { position: absolute; inset: 0; pointer-events: none; }

/* ---------- piede ---------- */
.piede { position: relative; background: var(--notte); color: #B9D3EA; padding: 40px 0 0; }
.piede-cresta { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: 70px; fill: var(--notte); }
.piede-in { width: min(var(--largo), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: 30px 0 50px; }
.piede .logo { width: 190px; color: #fff; margin-bottom: 16px; }
.piede-marchio p { max-width: 30ch; }
.piede h3 { font-size: 1.3rem; color: #fff; margin-bottom: 14px; letter-spacing: .06em; }
.piede-col a { display: flex; align-items: center; gap: 10px; padding: 5px 0; text-decoration: none; transition: color .3s, transform .3s; }
.piede-col a:hover { color: var(--oro); transform: translateX(4px); }
.piede-col svg { width: 18px; height: 18px; flex: none; }
.piede-fondo { width: min(var(--largo), 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 22px 0 30px; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: #7F9CB9; }
.piede-fondo a { color: #B9D3EA; }

/* ---------- pagine evento: hero ---------- */
.p-hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; padding: 150px 0 clamp(120px, 14vw, 180px); color: #fff; overflow: hidden; isolation: isolate; }
.p-hero > picture img, .p-hero > img.p-hero-foto { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; z-index: -2; }
.p-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,26,47,.55) 0%, rgba(10,26,47,.2) 40%, rgba(10,26,47,.85) 100%); }
.p-hero h1 { font-size: clamp(3.4rem, 10vw, 8.4rem); max-width: 11ch; text-shadow: 0 10px 40px rgba(0,0,0,.35); }
.p-hero h1 .mano { display: block; font-size: .42em; color: var(--oro); transform: rotate(-3deg); margin-bottom: .1em; }
.pillole { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 30px; }
.pillola { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); font-weight: 600; font-size: .95rem; }
.pillola svg { width: 18px; height: 18px; color: var(--oro); }
.onda { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(60px, 9vw, 130px); z-index: 1; }
.onda path { fill: var(--neve); }

/* passi "come funziona" */
.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; counter-reset: passo; position: relative; }
.passi::before { content: ''; position: absolute; left: 6%; right: 6%; top: 44px; height: 3px; background: repeating-linear-gradient(90deg, var(--brina) 0 12px, transparent 12px 22px); }
.passo { position: relative; padding: 0 6px; text-align: center; }
.passo-icona { position: relative; width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--ombra-s), inset 0 0 0 3px var(--ghiaccio); color: var(--azzurro); transition: transform .5s var(--molla); }
.passo:hover .passo-icona { transform: translateY(-6px) rotate(-6deg); }
.passo-icona svg { width: 42px; height: 42px; }
.passo-icona::after { counter-increment: passo; content: counter(passo); position: absolute; top: -4px; right: -4px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-sole); color: #fff; font-family: var(--titoli); font-weight: 900; font-size: 1.1rem; }
.passo h3 { font-size: 1.45rem; margin-bottom: 6px; }
.passo p { font-size: .95rem; color: var(--testo-2); }

/* regolamento */
.regole { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 40px; }
.regola { position: relative; padding: 24px 22px 22px 64px; border-radius: var(--r-s); background: #fff; box-shadow: var(--ombra-s); font-size: .98rem; }
.regola::before { content: ''; position: absolute; left: 22px; top: 26px; width: 26px; height: 26px; border-radius: 8px; background: var(--grad-sole) ; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.regola b { color: var(--blu); }
.regola.forte { background: linear-gradient(135deg, #FFF6E8, #fff); box-shadow: var(--ombra-s), inset 0 0 0 2px rgba(241,136,60,.35); }

.documenti { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.doc { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 16px; background: #fff; box-shadow: var(--ombra-s); text-decoration: none; cursor: pointer; border: 0; text-align: left; transition: transform .4s var(--molla); }
.doc:hover { transform: translateY(-4px); }
.doc img { width: 56px; height: 72px; object-fit: cover; border-radius: 8px; }
.doc .doc-icona { width: 56px; height: 72px; border-radius: 8px; display: grid; place-items: center; background: var(--ghiaccio); color: var(--azzurro); }
.doc .doc-icona svg { width: 26px; height: 26px; }
.doc b { display: block; line-height: 1.2; }
.doc small { color: var(--testo-2); }

/* ---------- form iscrizione ---------- */
.iscrizione { background: linear-gradient(180deg, var(--neve) 0%, var(--ghiaccio) 100%); }
.iscr-griglia { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.iscr-lato { position: sticky; top: 110px; }
.flusso { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.flusso li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-s); background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(63,130,181,.15); }
.flusso svg { width: 34px; height: 34px; flex: none; padding: 6px; border-radius: 10px; background: var(--grad-sole); color: #fff; }
.flusso b { display: block; line-height: 1.25; }
.flusso span { font-size: .92rem; color: var(--testo-2); }
.scheda { position: relative; padding: clamp(22px, 4vw, 44px); border-radius: calc(var(--r) + 6px); background: #fff; box-shadow: 0 40px 90px -40px rgba(13,38,66,.45); }
.scheda::before { content: ''; position: absolute; left: 30px; right: 30px; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: var(--grad-sole); }
.campi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 14px; }
.campo { grid-column: span 3; display: flex; flex-direction: column; gap: 6px; }
.campo.l6 { grid-column: span 6; } .campo.l4 { grid-column: span 4; } .campo.l2 { grid-column: span 2; }
.campo label, .campo .etic { font-weight: 600; font-size: .9rem; color: var(--testo); }
.campo label em, .campo .etic em { font-style: normal; color: var(--ruggine); }
.campo input, .campo select {
  width: 100%; padding: 14px 16px; border: 1.5px solid #D3E2EF; border-radius: 12px; background: var(--neve);
  font: inherit; font-size: 1rem; color: var(--testo); transition: border-color .25s, box-shadow .25s, background .25s; -webkit-appearance: none; appearance: none;
}
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%233F82B5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.campo input:hover, .campo select:hover { border-color: var(--cielo); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--arancio); background: #fff; box-shadow: 0 0 0 4px rgba(241,136,60,.16); }
.campo.errore input, .campo.errore select, .campo.errore .firma-box { border-color: #D6452B; background: #FFF6F4; }
.campo .msg { display: none; font-size: .82rem; color: #C2371E; }
.campo.errore .msg { display: block; }
.scelte { display: flex; gap: 10px; }
.scelte label { flex: 1; position: relative; cursor: pointer; }
.scelte input { position: absolute; opacity: 0; }
.scelte span { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 13px; border-radius: 12px; border: 1.5px solid #D3E2EF; background: var(--neve); font-weight: 600; transition: all .25s; }
.scelte input:checked + span { border-color: var(--arancio); background: #FFF4EA; color: var(--ruggine); box-shadow: 0 0 0 4px rgba(241,136,60,.14); }
.scelte input:focus-visible + span { outline: 3px solid var(--oro); }
.gruppo-titolo { grid-column: span 6; display: flex; align-items: center; gap: 12px; margin: 14px 0 0; font-family: var(--titoli); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; color: var(--blu); letter-spacing: .03em; }
.gruppo-titolo::after { content: ''; flex: 1; height: 1.5px; background: var(--ghiaccio); }
.gruppo-titolo:first-child { margin-top: 0; }
.avviso-minore { grid-column: span 6; display: none; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #FFF6E8; box-shadow: inset 0 0 0 1.5px rgba(241,136,60,.35); font-size: .93rem; }
.avviso-minore.su { display: grid; animation: appare .5s var(--ease); }
.avviso-minore.su + .campo-genitore { display: flex; }
.campo-genitore { display: none; }
.quota-box { grid-column: span 6; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 12px; background: var(--ghiaccio); font-weight: 600; }
.quota-box.su { display: flex; }
.quota-box b { font-family: var(--titoli); font-weight: 900; font-size: 1.8rem; color: var(--blu); white-space: nowrap; }

/* firma */
.firma-box { position: relative; height: 190px; border: 1.5px dashed #A9C9E3; border-radius: 14px; background: linear-gradient(transparent 0 calc(100% - 52px), transparent calc(100% - 52px)), var(--neve); overflow: hidden; touch-action: none; transition: border-color .25s, background .25s; }
.firma-box::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 46px; height: 1.5px; background: #BFD6EA; pointer-events: none; }
.firma-box.attiva { border-color: var(--arancio); background: #fff; border-style: solid; }
.firma-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.firma-vuota { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-80%); text-align: center; font-family: var(--mano); font-size: 1.7rem; color: #9DBAD3; pointer-events: none; transition: opacity .3s; }
.firma-box.piena .firma-vuota { opacity: 0; }
.firma-azioni { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--testo-2); }
.link-btn { border: 0; background: none; padding: 4px 0; color: var(--azzurro); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* consensi */
.consenso { grid-column: span 6; display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; line-height: 1.45; cursor: pointer; }
.consenso input { flex: none; width: 24px; height: 24px; margin: 0; border-radius: 7px; border: 1.5px solid #A9C9E3; background: var(--neve); -webkit-appearance: none; appearance: none; cursor: pointer; display: grid; place-items: center; transition: all .25s; }
.consenso input::after { content: ''; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .3s var(--molla); }
.consenso input:checked { background: var(--arancio); border-color: var(--arancio); }
.consenso input:checked::after { transform: rotate(-45deg) scale(1); }
.consenso.errore input { border-color: #D6452B; box-shadow: 0 0 0 3px rgba(214,69,43,.15); }
.consenso a { color: var(--azzurro); font-weight: 600; }
details.liberatoria { grid-column: span 6; border-radius: 12px; background: var(--neve); box-shadow: inset 0 0 0 1px #DCE8F2; }
details.liberatoria summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: .92rem; color: var(--blu); list-style: none; display: flex; justify-content: space-between; }
details.liberatoria summary::after { content: '+'; font-size: 1.3rem; line-height: 1; transition: transform .3s; }
details.liberatoria[open] summary::after { transform: rotate(45deg); }
details.liberatoria ul { margin: 0; padding: 0 20px 16px 34px; font-size: .86rem; color: var(--testo-2); max-height: 260px; overflow: auto; }
details.liberatoria li { margin-bottom: 6px; }
.miele { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.invia-riga { grid-column: span 6; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.invia-riga small { color: var(--testo-2); flex: 1; min-width: 200px; }
.form-errore { grid-column: span 6; display: none; padding: 12px 16px; border-radius: 12px; background: #FFF1EE; color: #B2331B; font-weight: 600; font-size: .93rem; }
.form-errore.su { display: block; }
.btn .gira { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: gira .8s linear infinite; display: none; }
.btn.invio .gira { display: block; }
@keyframes gira { to { transform: rotate(360deg); } }
.chiuse { text-align: center; padding: 40px 20px; }
.chiuse svg { width: 60px; height: 60px; margin: 0 auto 14px; color: var(--azzurro); }

/* esito iscrizione */
.esito { display: none; text-align: center; }
.esito.su { display: block; animation: appare .7s var(--ease); }
.esito-spunta { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-sole); color: #fff; box-shadow: 0 18px 40px -14px rgba(209,97,21,.8); animation: timbra .7s var(--molla) both .1s; }
.esito-spunta svg { width: 48px; height: 48px; }
@keyframes timbra { from { transform: scale(2.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.esito h3 { font-size: clamp(2rem, 4vw, 2.8rem); }
.codice { display: inline-block; margin: 6px 0 18px; padding: 10px 20px; border-radius: 12px; background: var(--ghiaccio); font-family: var(--titoli); font-weight: 900; font-size: 2rem; letter-spacing: .08em; color: var(--blu); }
.esito-passi { display: grid; gap: 10px; max-width: 460px; margin: 20px auto 0; text-align: left; }
.esito-passi div { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--neve); font-size: .95rem; }
.esito-passi svg { width: 28px; height: 28px; flex: none; color: var(--arancio); }

/* iscrizione di gruppo (Tocca il Ferro) */
.nota-gruppo { grid-column: span 6; margin: -6px 0 0; font-size: .92rem; color: var(--testo-2); }
.persone { grid-column: span 6; display: grid; gap: 16px; }
.persona { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 14px; padding: 18px; border-radius: 18px; background: var(--neve); box-shadow: inset 0 0 0 1.5px #DCE8F2; animation: appare .5s var(--ease); scroll-margin-top: 100px; }
.persona .campo input, .persona .scelte span, .persona .firma-box { background: #fff; }
.persona-testa { grid-column: span 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.persona-testa b { font-family: var(--titoli); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; color: var(--blu); letter-spacing: .03em; }
.persona-testa b span[data-tu] { color: var(--arancio); }
.persona-testa .link-btn { color: #B2331B; }
.aggiungi { grid-column: span 6; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 2px dashed #A9C9E3; border-radius: 16px; background: transparent; color: var(--azzurro); font-weight: 700; cursor: pointer; transition: background .25s, border-color .25s, transform .3s var(--molla); }
.aggiungi span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad-sole); color: #fff; font-size: 1.3rem; line-height: 1; }
.aggiungi:hover { background: #fff; border-color: var(--arancio); transform: translateY(-2px); }
.totale { grid-column: span 6; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--roccia); color: #fff; font-weight: 600; }
.totale.su { display: flex; animation: appare .4s var(--ease); }
.totale b { font-family: var(--titoli); font-weight: 900; font-size: 1.9rem; color: var(--oro); }
.lista-codici { list-style: none; padding: 0; margin: 6px auto 18px; max-width: 380px; display: grid; gap: 6px; text-align: left; }
.lista-codici li { padding: 10px 14px; border-radius: 12px; background: var(--ghiaccio); }
.lista-codici b { font-family: var(--titoli); font-weight: 900; font-size: 1.2rem; color: var(--blu); margin-right: 8px; letter-spacing: .04em; }
.bonus { display: flex; gap: 18px; align-items: center; margin-top: 22px; padding: 22px 26px; border-radius: var(--r); background: var(--grad-sole); color: #fff; box-shadow: 0 20px 40px -20px rgba(209,97,21,.8); }
.bonus-icona { font-size: 2.6rem; line-height: 1; animation: galleggia 4s ease-in-out infinite; }
.bonus b { font-family: var(--titoli); font-weight: 900; font-size: 1.7rem; text-transform: uppercase; display: block; line-height: 1.05; }
.bonus p { margin: 4px 0 0; color: #FFF4E6; }
@media (max-width: 640px) { .persona { padding: 14px; } .bonus { flex-direction: column; align-items: flex-start; } }

/* ---------- tocca il ferro: pagina ---------- */
.tif-hero { position: relative; min-height: 100svh; padding: 130px 0 clamp(120px, 14vw, 180px); overflow: hidden; isolation: isolate; background: radial-gradient(90% 70% at 30% 20%, #FFF7EA 0%, #FFE3C2 55%, #FBC98E 100%); color: var(--roccia); display: flex; align-items: center; }
.tif-hero .griglia-2 { align-items: center; }
.tif-hero .logo-ferro { width: min(460px, 86%); height: auto; margin: 0 auto; cursor: pointer; transform-origin: 50% 25%; filter: drop-shadow(0 30px 40px rgba(50,50,49,.3)); animation: oscilla 5s ease-in-out infinite; }
@keyframes oscilla { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-8px); } }
.tif-hero .logo-ferro.tocco { animation: tocca 1s var(--molla); }
.tif-hero h1 { font-size: clamp(3rem, 8vw, 6.6rem); }
.tif-hero .onda path { fill: var(--neve); }
.stay { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; border-radius: 999px; background: var(--roccia); color: #fff; font-family: var(--titoli); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 26px; box-shadow: 0 16px 30px -14px rgba(50,50,49,.8); }
.stay i { width: 14px; height: 14px; border-radius: 50%; background: var(--arancio); box-shadow: 0 0 0 0 rgba(241,136,60,.7); animation: pulsa 1.6s infinite; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 14px rgba(241,136,60,0); } 100% { box-shadow: 0 0 0 0 rgba(241,136,60,0); } }
.puntini span { animation: puntino 1.4s infinite; opacity: 0; }
.puntini span:nth-child(2) { animation-delay: .2s; } .puntini span:nth-child(3) { animation-delay: .4s; }
@keyframes puntino { 40%, 60% { opacity: 1; } }
.conto { display: flex; gap: 10px; margin: 6px 0 26px; }
.conto div { min-width: 76px; padding: 12px 10px; border-radius: 14px; background: var(--roccia); color: #fff; text-align: center; }
.conto b { display: block; font-family: var(--titoli); font-weight: 900; font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.conto small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.tif-foto-volanti img { position: absolute; width: clamp(110px, 14vw, 190px); aspect-ratio: 1; object-fit: cover; border: 6px solid #fff; border-radius: 10px; box-shadow: 0 20px 40px -18px rgba(50,50,49,.6); z-index: -1; animation: galleggia 6s ease-in-out infinite; }
.tif-foto-volanti img:nth-child(1) { right: 4%; top: 16%; transform: rotate(8deg); }
.tif-foto-volanti img:nth-child(2) { right: 36%; bottom: 14%; transform: rotate(-6deg); animation-delay: -2s; }
.tif-foto-volanti img:nth-child(3) { right: 2%; bottom: 20%; transform: rotate(-10deg); animation-delay: -4s; }
.estrazione { background: var(--roccia); color: #EDEDE9; overflow: hidden; }
.estrazione h2 { color: #fff; }
.estr-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.estr-carta { position: relative; padding: 30px 26px; border-radius: var(--r); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: transform .5s var(--molla), background .3s; }
.estr-carta:hover { transform: translateY(-6px); background: rgba(255,255,255,.08); }
.estr-carta .num { font-family: var(--titoli); font-weight: 900; font-size: 4.4rem; line-height: .8; background: var(--grad-sole); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 14px; }
.estr-carta h3 { color: #fff; font-size: 1.6rem; }
.estr-carta p { color: #BDBDB6; font-size: .97rem; margin: 0; }
.giochi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.gioco-carta { position: relative; padding: 24px; border-radius: var(--r); background: #fff; box-shadow: var(--ombra-s); overflow: hidden; transition: transform .5s var(--molla); }
.gioco-carta:hover { transform: rotate(-1.5deg) translateY(-6px); }
.gioco-carta .emo { font-size: 2.4rem; line-height: 1; display: block; margin-bottom: 12px; }
.gioco-carta h3 { font-size: 1.5rem; margin-bottom: 4px; color: var(--blu); }
.gioco-carta p { font-size: .94rem; color: var(--testo-2); margin: 0; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.info-carta { padding: 28px; border-radius: var(--r); background: #fff; box-shadow: var(--ombra-s); }
.info-carta h3 { color: var(--blu); display: flex; align-items: center; gap: 12px; }
.info-carta h3 svg { width: 34px; height: 34px; color: var(--arancio); }
.prezzi { display: flex; gap: 14px; margin: 10px 0 16px; }
.prezzo { flex: 1; padding: 16px; border-radius: 14px; background: var(--neve); text-align: center; }
.prezzo b { display: block; font-family: var(--titoli); font-weight: 900; font-size: 2.8rem; line-height: 1; color: var(--ruggine); }
.prezzo > span { font-size: .85rem; color: var(--testo-2); }
.lista-spunte { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista-spunte li { position: relative; padding-left: 28px; font-size: .96rem; }
.lista-spunte li::before { content: ''; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 6px; background: var(--grad-sole); }
.orari { list-style: none; padding: 0; margin: 0; }
.orari li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px dashed #D6E4F0; align-items: baseline; }
.orari li:last-child { border: 0; }
.orari b { font-family: var(--titoli); font-weight: 900; font-size: 1.6rem; color: var(--arancio); min-width: 3.3em; }
.nota { font-size: .85rem; color: var(--testo-2); margin-top: 12px; }
.galleria { columns: 3 260px; column-gap: 14px; margin-top: 40px; }
.galleria button { display: block; width: 100%; padding: 0; margin: 0 0 14px; border: 0; border-radius: var(--r-s); overflow: hidden; cursor: zoom-in; break-inside: avoid; background: none; box-shadow: var(--ombra-s); }
.galleria img { width: 100%; height: auto; transition: transform .8s var(--ease), filter .5s; }
.galleria button:hover img { transform: scale(1.06); filter: saturate(1.15); }
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.numero { text-align: center; padding: 24px 10px; border-radius: var(--r); background: rgba(255,255,255,.6); }
.numero b { display: block; font-family: var(--titoli); font-weight: 900; font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: 1; color: var(--ruggine); }
.numero > span { font-size: .9rem; color: var(--testo-2); }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 20px; background: rgba(6, 16, 30, .92); opacity: 0; pointer-events: none; transition: opacity .35s; }
.lb.su { opacity: 1; pointer-events: auto; }
.lb img { max-width: min(1200px, 100%); max-height: 88vh; width: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: scale(.92); transition: transform .45s var(--molla); }
.lb.su img { transform: none; }
.lb-chiudi, .lb-freccia { position: absolute; width: 50px; height: 50px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .3s; }
.lb-chiudi:hover, .lb-freccia:hover { background: rgba(255,255,255,.25); }
.lb-chiudi { top: 18px; right: 18px; }
.lb-chiudi svg, .lb-freccia svg { width: 22px; height: 22px; }
.lb-freccia.prec { left: 18px; top: 50%; transform: translateY(-50%) scaleX(-1); }
.lb-freccia.succ { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- privacy ---------- */
.legale { padding: 150px 0 80px; }
.legale .contenitore { max-width: 820px; }
.legale h1 { font-size: clamp(2.8rem, 7vw, 4.6rem); }
.legale h2 { font-size: 1.7rem; margin-top: 1.6em; color: var(--blu); }
.legale p, .legale li { color: var(--testo-2); }
.segnaposto { background: #FFF1C9; padding: 0 4px; border-radius: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .griglia-2, .iscr-griglia { grid-template-columns: 1fr; }
  .iscr-lato { position: static; }
  .passi { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .passi::before { display: none; }
  .estr-griglia, .giochi { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .piede-in { grid-template-columns: 1fr 1fr; }
  .piede-marchio { grid-column: span 2; }
  .chi-foto { max-width: 480px; margin: 0 auto 20px; }
  .tracciato { max-width: 560px; width: 100%; margin: 0 auto; }
  .tif-foto-volanti { display: none; }
  .tif-hero .griglia-2 > :first-child { order: 2; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .campo, .campo.l2, .campo.l4 { grid-column: span 6; }
  .campo.mezzo { grid-column: span 3; }
  .passi, .estr-griglia, .giochi { grid-template-columns: 1fr; }
  .attivita { grid-template-columns: 1fr; }
  .dati { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dato { padding: 14px; }
  .piede-in { grid-template-columns: 1fr; }
  .piede-marchio { grid-column: auto; }
  .chi-foto .timbro { left: -6px; }
  .chi-foto::before { inset: 14px -10px -14px 14px; }
  .polaroid { width: 70%; }
  .polaroid-pila { height: 330px; }
  .ferro-logo { width: min(260px, 70%); }
  .numeri { grid-template-columns: 1fr; }
  .bollo { width: 86px; height: 86px; font-size: .95rem; }
  .bollo b { font-size: 1.6rem; }
  .conto div { min-width: 64px; }
  .scheda::before { left: 18px; right: 18px; }
  .galleria { columns: 2 140px; column-gap: 10px; }
  .galleria button { margin-bottom: 10px; }
  .prezzi { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rivela, .parole .p { opacity: 1; transform: none; }
}

/* barra di amministrazione di WordPress (solo per chi è loggato) */
.admin-bar .testata { top: 32px; }
@media (max-width: 782px) { .admin-bar .testata { top: 46px; } }

/* collaborazione PromoTurismoFVG (pagina pellate) */
.partner { display: inline-flex; flex-direction: column; justify-content: center; padding: 9px 20px; border-radius: 16px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); color: #fff; text-decoration: none; line-height: 1.15; transition: background .3s, transform .35s var(--molla); }
.partner:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.partner small { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #B9D3EA; }
.partner b { font-size: 1.05rem; font-weight: 700; }

/* telefoni e tablet: niente effetti che consumano molta memoria grafica
   (sfocature dietro gli elementi, ombre luminose animate) */
@media (hover: none) {
  .testata::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.97); }
  .pillola, .btn-vetro, .partner, .isc-scheda { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pillola, .partner { background: rgba(10,26,47,.55); }
  .btn-vetro { background: rgba(10,26,47,.35); }
  .percorso .via { filter: none; }
  .percorso .frontale { filter: none; }
  .tif-foto-volanti img, .bollo, .bonus-icona { animation: none; }
  .hero .logo { filter: none; }
  .ferro-logo, .tif-hero .logo-ferro { filter: none; }
}

/* ---------- le mie iscrizioni ---------- */
.mie-sez { padding-top: 150px; min-height: 80vh; background: var(--grad-neve); }
.mie-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.mie h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); }
.mie-form { display: grid; gap: 16px; }
.mie-risultati h3 { color: var(--blu); font-size: 1.8rem; }
.mie-nota { color: var(--testo-2); }
.mie-carta { margin: 0 0 14px; border-radius: 18px; background: var(--neve); overflow: hidden; box-shadow: inset 0 0 0 1px #DCE8F2; }
.mie-carta-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: var(--blu); color: #fff; font-weight: 600; font-size: .9rem; }
.mie-carta.tif .mie-carta-testa { background: var(--roccia); }
.mie-carta-testa b { font-family: var(--titoli); font-weight: 900; font-size: 1.3rem; letter-spacing: .04em; color: var(--oro); }
.mie-nome { margin: 12px 16px 4px; font-family: var(--titoli); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; }
.mie-carta ul { list-style: none; margin: 0; padding: 4px 16px 14px; }
.mie-carta li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #D6E4F0; font-size: .95rem; }
.mie-carta li:last-child { border: 0; }
.mie-carta li span { color: var(--testo-2); }
.mie-carta .si { color: #23804D; }
.mie-carta .no { color: var(--ruggine); }
@media (max-width: 1000px) { .mie-griglia { grid-template-columns: 1fr; } }
@media (max-width: 1150px) and (min-width: 901px) { .menu a { padding: 10px 9px; font-size: .92rem; } .testata-logo { width: 130px; } }

/* ---------- sponsor (Tocca il Ferro) ---------- */
.con-kluit { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 8px 18px 8px 14px; border-radius: 18px; background: #fff; box-shadow: var(--ombra-s); text-decoration: none; color: var(--testo-2); transition: transform .4s var(--molla); }
.con-kluit:hover { transform: translateY(-3px) rotate(-1deg); }
.con-kluit small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; max-width: 9em; line-height: 1.2; }
.con-kluit img { width: 96px; height: auto; }
.sponsor { background: linear-gradient(180deg, var(--neve) 0%, #FFF4E6 100%); overflow: hidden; }
.sp-principale { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 30px; padding: clamp(22px, 4vw, 46px); border-radius: 28px; background: var(--roccia); color: #EDEDE9; box-shadow: 0 40px 80px -40px rgba(50,50,49,.8); isolation: isolate; overflow: hidden; }
.sp-principale::before { content: ''; position: absolute; right: -8%; bottom: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(190,22,34,.45), transparent 65%); z-index: -1; }
.sp-piatto { display: grid; place-items: center; aspect-ratio: 1.45; padding: 8%; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,.7), inset 0 0 0 6px #F3EFE8; transform: rotate(-2deg); transition: transform .6s var(--molla); }
.sp-principale:hover .sp-piatto { transform: rotate(0) scale(1.02); }
.sp-piatto img { width: 100%; height: auto; }
.sp-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: #BE1622; color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.sp-badge svg { width: 18px; height: 18px; }
.sp-testo h3 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 14px 0 8px; }
.sp-testo p { color: #C9C9C4; font-size: 1.08rem; margin: 0; }
.sp-intro { margin: 44px 0 20px; color: var(--testo-2); font-size: 1.05rem; }
.sp-adesivi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px 18px; }
.sp-adesivo { display: grid; place-items: center; height: 118px; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: 0 10px 22px -12px rgba(50,50,49,.45), inset 0 0 0 2px rgba(50,50,49,.05); transform: rotate(var(--r, 0deg)); }
.sp-adesivo.rivela { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.6); transition: opacity .5s var(--ease), transform .6s var(--molla); transition-delay: var(--rit, 0s); }
.sp-adesivo.rivela.visto { opacity: 1; transform: rotate(var(--r, 0deg)); }
.sp-adesivo.rivela.visto:hover { transform: rotate(0deg) scale(1.08); transition-delay: 0s; z-index: 2; }
.sp-adesivo img { max-width: 100%; max-height: 88px; width: auto; height: auto; }
.sp-adesivo { position: relative; }
.sp-adesivo::before { content: ''; position: absolute; top: -10px; left: 50%; width: 58px; height: 20px; border-radius: 3px; background: rgba(241,136,60,.42); transform: translateX(-50%) rotate(-5deg); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.sp-adesivo:nth-child(3n+2)::before { background: rgba(63,130,181,.35); transform: translateX(-40%) rotate(4deg); }
.sp-adesivo:nth-child(3n)::before { background: rgba(253,194,0,.45); transform: translateX(-60%) rotate(-2deg); }
@media (max-width: 800px) {
  .sp-principale { grid-template-columns: 1fr; }
  .sp-adesivi { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sp-adesivo { height: 96px; padding: 10px 12px; }
  .sp-adesivo img { max-height: 70px; }
}

/* codice fiscale */
.campo-cf input[data-k=codice_fiscale] { text-transform: uppercase; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.campo-cf input:disabled { opacity: .45; }
.cf-estero { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-size: .85rem; color: var(--testo-2); cursor: pointer; }
.cf-estero input { width: 16px; height: 16px; accent-color: var(--arancio); }

/* ---------- cosa mi serve (pellate) ---------- */
.zaino { background: var(--grad-neve); }
.zaino-lista { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.zaino-lista label { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: var(--ombra-s); cursor: pointer; transition: transform .35s var(--molla), background .3s; }
.zaino-lista label:hover { transform: translateX(4px); }
.zaino-lista input { position: absolute; opacity: 0; }
.zaino-icona { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--ghiaccio); color: var(--azzurro); transition: background .3s, color .3s; }
.zaino-icona svg { width: 26px; height: 26px; }
.zaino-testo { flex: 1; min-width: 0; }
.zaino-testo b { display: block; line-height: 1.2; }
.zaino-testo small { color: var(--testo-2); font-size: .86rem; }
.zaino-spunta { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid #C9DCEC; position: relative; transition: all .3s var(--molla); }
.zaino-spunta::after { content: ''; position: absolute; left: 8px; top: 4px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--molla); }
.zaino-lista input:checked ~ .zaino-spunta { background: #3BAA6B; border-color: #3BAA6B; transform: scale(1.1); }
.zaino-lista input:checked ~ .zaino-spunta::after { transform: rotate(45deg) scale(1); }
.zaino-lista input:checked ~ .zaino-testo b { text-decoration: line-through; text-decoration-color: rgba(59,170,107,.6); }
.zaino-lista input:checked ~ .zaino-icona, .zaino-lista label:has(input:checked) .zaino-icona { background: #E3F6EB; color: #23804D; }
.zaino-lista input:focus-visible ~ .zaino-spunta { outline: 3px solid var(--oro); outline-offset: 2px; }
.zaino-stato { margin-top: 14px; font-family: var(--mano); font-size: 1.5rem; color: var(--ruggine); min-height: 1.5em; }
.noleggio { position: sticky; top: 110px; padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: #fff; box-shadow: var(--ombra); }
.noleggio h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--blu); margin: 14px 0 8px; }
.noleggio p { color: var(--testo-2); }
.noleggio-lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; }
.noleggio-lista .sp-adesivo { height: auto; grid-template-columns: 130px 1fr; gap: 14px; justify-items: start; text-align: left; padding: 14px 18px; background: var(--neve); }
.noleggio-lista .sp-adesivo img { max-height: 60px; }
.noleggio-lista .sp-adesivo span { font-weight: 700; color: var(--testo); }
@media (max-width: 1000px) { .noleggio { position: static; } }

/* ---------- QR nella conferma ---------- */
.esito-qr-testo { max-width: 460px; margin: 18px auto 8px; color: var(--testo-2); font-size: .95rem; }
.esito-qr { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 auto 18px; }
.esito-qr figure { margin: 0; padding: 10px 10px 8px; border-radius: 16px; background: #fff; box-shadow: var(--ombra-s), inset 0 0 0 1px #E3ECF4; }
.esito-qr img { width: 150px; height: 150px; image-rendering: pixelated; }
.esito-qr figcaption { font-size: .8rem; color: var(--testo-2); max-width: 150px; }
.esito-qr figcaption b { display: block; font-family: var(--titoli); font-size: 1.1rem; color: var(--blu); }

/* ---------- modalità tablet (iscrizione al ritrovo) ---------- */
.tablet-barra { display: none; }
.modo-tablet .testata, .modo-tablet .piede, .modo-tablet .salta, .modo-tablet main > section:not(#iscrizione) { display: none !important; }
.modo-tablet .iscrizione { padding-top: 0; min-height: 100vh; }
.modo-tablet .tablet-barra { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter); margin-bottom: 30px; background: var(--notte); color: #fff; font-family: var(--titoli); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .04em; }
.modo-tablet .tablet-barra a { font-family: var(--corpo); font-size: .85rem; font-weight: 600; text-transform: none; color: #B9D3EA; }
.modo-tablet .iscr-lato { display: none; }
.modo-tablet .iscr-griglia { grid-template-columns: 1fr; max-width: 820px; }
.modo-tablet .rivela { opacity: 1; transform: none; }
.modo-tablet [data-cartolina] { display: none; }
.tablet-ritorno { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; padding: 14px; border-radius: 14px; background: var(--ghiaccio); font-weight: 600; }
.tablet-ritorno[hidden] { display: none; }

/* ---------- cartolina ---------- */
.cartolina-lb { overflow: auto; }
.cartolina-box { max-width: 420px; width: 100%; text-align: center; color: #D4E4F3; }
.cartolina-box img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 14px; }
.cartolina-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 8px; }
.cartolina-box p { font-size: .85rem; }

/* distintivi fedeltà */
.distintivi { margin: 0 16px 14px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #E3ECF4; }
.dist-tit { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-2); }
.distintivi ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 4px; }
.distintivi li { display: grid; justify-items: center; gap: 2px; flex: 1; }
.distintivi li span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: #EEF3F8; filter: grayscale(1); opacity: .45; transition: transform .4s var(--molla); }
.distintivi li.preso span { background: var(--grad-sole); filter: none; opacity: 1; box-shadow: 0 6px 14px -6px rgba(209,97,21,.8); }
.distintivi li.preso:hover span { transform: scale(1.15) rotate(-8deg); }
.distintivi li small { font-size: .7rem; font-weight: 700; color: var(--testo-2); }
.dist-barra { height: 8px; margin: 12px 0 8px; border-radius: 8px; background: #EEF3F8; overflow: hidden; }
.dist-barra i { display: block; height: 100%; border-radius: 8px; background: var(--grad-sole); }
.dist-testo { margin: 0; font-size: .9rem; color: var(--testo); }
.mie-qr-btn { margin: 0 16px 14px; }
.mie-qr { padding: 0 16px 16px; }
.mie-qr img { image-rendering: pixelated; border-radius: 10px; box-shadow: var(--ombra-s); }

/* ---------- pagina 404 ---------- */
.p404-sez { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 130px 0 190px; overflow: hidden; isolation: isolate; background: radial-gradient(90% 70% at 70% 30%, #1D4E7A 0%, #0E2744 45%, var(--notte) 80%); color: #fff; }
.p404-stelle { position: absolute; left: 0; top: 0; width: 100%; height: 70%; z-index: 0; pointer-events: none; }
.p404-griglia { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.p404-numero { display: flex; align-items: center; margin: 0 0 6px; font-family: var(--titoli); font-weight: 900; font-size: clamp(7rem, 20vw, 13rem); line-height: .85; }
.p404-numero span { background: var(--grad-sole); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p404-mosch { width: .6em; height: .98em; margin: 0 .04em; overflow: visible; transform-origin: 50% 8%; animation: pendolo 2.6s ease-in-out infinite; filter: drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
@keyframes pendolo { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
.p404 h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); color: #fff; margin: 0; }
.p404 .intro-testo { color: #B9D3EA; }
.cartello { position: relative; display: grid; gap: 14px; justify-items: center; padding: 20px 0 40px; }
.cartello-palo { position: absolute; top: 0; bottom: 0; left: 50%; width: 16px; margin-left: -8px; border-radius: 6px; background: linear-gradient(90deg, #6B4A2E, #9A6B43 50%, #6B4A2E); box-shadow: 0 20px 40px rgba(0,0,0,.4); z-index: 0; }
.freccia { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; width: min(340px, 90%); min-height: 64px; padding: 10px 56px 10px 20px; background: #fff; color: var(--notte); text-decoration: none; transform: rotate(var(--r, 0deg)); transform-origin: 50% 50%; box-shadow: 0 14px 28px -12px rgba(0,0,0,.6); clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%); transition: transform .4s var(--molla), background .25s; }
.freccia::before, .freccia::after { content: ''; position: absolute; top: 0; bottom: 0; width: 12px; background: #D6452B; }
.freccia::before { left: 0; }
.freccia::after { right: 34px; }
.freccia.sx { padding: 10px 20px 10px 56px; clip-path: polygon(34px 0, 100% 0, 100% 100%, 34px 100%, 0 50%); text-align: right; }
.freccia.sx::before { left: 34px; } .freccia.sx::after { right: 0; }
.freccia b { font-family: var(--titoli); font-weight: 900; font-size: 1.45rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; padding: 0 8px; }
.freccia small { padding: 0 8px; color: var(--testo-2); font-weight: 600; font-size: .8rem; }
.freccia:hover, .freccia:focus-visible { transform: rotate(0deg) translateX(8px) scale(1.03); background: #FFF6E8; }
.freccia.sx:hover, .freccia.sx:focus-visible { transform: rotate(0deg) translateX(-8px) scale(1.03); }
.cartello-targa { position: relative; z-index: 1; margin-top: 6px; padding: 10px 18px; border-radius: 10px; background: #FDC200; color: var(--notte); font-family: var(--titoli); font-weight: 900; text-transform: uppercase; text-align: center; line-height: 1.1; box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); }
.cartello-targa small { font-family: var(--corpo); font-weight: 600; text-transform: none; font-size: .78rem; }
.p404-monti { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(90px, 16vw, 220px); z-index: 1; }
@media (max-width: 900px) { .p404-griglia { grid-template-columns: 1fr; } .p404-numero { justify-content: flex-start; } }
@media (hover: none) { .p404-mosch { filter: none; } }

/* ---------- contatore "quanto abbiamo salito" ---------- */
.contatore { display: flex; align-items: center; gap: 18px; margin: 0 0 30px; padding: 18px 22px; border-radius: 20px; background: linear-gradient(120deg, rgba(253,194,0,.16), rgba(241,136,60,.1)); box-shadow: inset 0 0 0 1px rgba(253,194,0,.35); }
.contatore[hidden] { display: none; }
.cont-icona { font-size: 2.6rem; line-height: 1; }
.cont-numero { margin: 0; font-family: var(--titoli); font-weight: 900; font-size: 1.6rem; color: var(--oro); line-height: 1; }
.cont-numero b { font-size: clamp(2.6rem, 6vw, 3.6rem); color: #fff; font-variant-numeric: tabular-nums; }
.cont-testo { margin: 4px 0 0; color: #D4E4F3; font-weight: 600; }
.cont-paragone { margin: 2px 0 0; font-family: var(--mano); font-size: 1.3rem; color: var(--oro); }