/* =========================================================
   GEO in CANEVA – Virtual Tour
   Identità visiva derivata dalla Guida Tascabile 2026
   ========================================================= */

/* Font del progetto: Nexa (licenza commerciale).
   Copiare i file in assets/fonts/ con questi nomi per attivarlo.
   Finché mancano, si usa Montserrat (libero, molto simile). */
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* Palette ricavata dalla guida */
  --geo-red: #BB311B;        /* rosso mattone: colore principale della guida */
  --geo-red-dark: #8E2414;
  --geo-pink: #E0A197;       /* rosa chiaro: tinte e fondi */
  --geo-earth: #AE8D70;      /* terra/beige della copertina */
  --geo-sage: #C0D0A8;       /* verde salvia */
  --geo-cream: #F7F2EB;      /* carta */
  --geo-ink: #2B2420;        /* testo */
  --geo-ink-soft: #5E5249;
  --geo-white: #FFFFFF;

  --font: "Nexa", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(43, 36, 32, .25);
  --bar-h: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--geo-ink);
  background: var(--geo-cream);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ---------- Logo (sempre presente) ---------- */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo img { height: 40px; width: auto; display: block; }
.wordmark { font-weight: 800; letter-spacing: .02em; line-height: .95; text-transform: uppercase; color: var(--geo-red); }
.wordmark small { display: block; font-weight: 400; font-size: .55em; letter-spacing: .18em; color: var(--geo-ink-soft); }
.wordmark .in { font-weight: 300; text-transform: lowercase; color: var(--geo-earth); }

/* ---------- Selettore lingua ---------- */
.lang { display: inline-flex; border: 1.5px solid currentColor; border-radius: 999px; overflow: hidden; }
.lang button { border: 0; background: transparent; color: inherit; padding: 6px 12px; font-weight: 700; font-size: 13px; letter-spacing: .08em; }
.lang button[aria-pressed="true"] { background: var(--geo-red); color: var(--geo-white); }

/* =========================================================
   HOME
   ========================================================= */
#home { position: fixed; inset: 0; overflow-y: auto; background: var(--geo-cream); }
#home .hero {
  position: relative; min-height: 62vh; display: flex; flex-direction: column;
  padding: 24px clamp(16px, 5vw, 64px);
  color: var(--geo-white);
  background-color: var(--geo-earth); background-size: cover; background-position: center;
}
#home .hero .top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#home .hero .top .logo { background: rgba(255,255,255,.92); padding: 8px 14px; border-radius: 10px; }
#home .hero .claim { margin-top: auto; max-width: 900px; padding-bottom: 12px; }
#home .hero .kicker { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; opacity: .9; }
#home h1 { font-size: clamp(34px, 6vw, 72px); font-weight: 800; line-height: 1; margin: 10px 0 14px; text-transform: uppercase; }
#home h1 .in { font-weight: 300; text-transform: lowercase; }
#home .hero p { font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5; max-width: 720px; margin: 0; }
#home .sites { padding: 32px clamp(16px, 5vw, 64px) 56px; }
#home .sites h2 { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--geo-red); margin: 0 0 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card {
  position: relative; border: 0; padding: 0; text-align: left; background: var(--geo-white);
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 10px rgba(43,36,32,.08);
  transition: transform .2s, box-shadow .2s; color: inherit; display: flex; flex-direction: column;
}
.card:hover:not([disabled]) { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .img { aspect-ratio: 16/9; background: var(--geo-earth) center/cover; }
.card .body { padding: 16px 18px 20px; border-top: 5px solid var(--geo-red); flex: 1; }
.card .num { font-size: 12px; font-weight: 800; color: var(--geo-red); letter-spacing: .15em; }
.card h3 { margin: 6px 0 4px; font-size: 21px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.card p { margin: 0; color: var(--geo-ink-soft); font-size: 14px; }
.card[disabled] { cursor: default; }
.card[disabled] .img { filter: grayscale(.7) opacity(.6); }
.card .badge { position: absolute; top: 12px; right: 12px; background: var(--geo-white); color: var(--geo-ink); font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; }
.card:not([disabled]) .badge { background: var(--geo-red); color: var(--geo-white); }
#home footer , #spScroll > footer.site-foot { padding: 18px clamp(16px, 5vw, 64px) 28px; font-size: 12px; color: var(--geo-ink-soft); border-top: 1px solid rgba(43,36,32,.1); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* =========================================================
   TOUR
   ========================================================= */
#tour { position: fixed; inset: 0; }
#viewer { position: absolute; inset: 0; }
.topbar {
  position: absolute; z-index: 120; top: 0; left: 0; right: 0; height: var(--bar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(247,242,235,.97), rgba(247,242,235,.92));
  box-shadow: 0 1px 0 rgba(43,36,32,.08);
}
.topbar .logo img { height: 36px; }
.topbar .where { min-width: 0; flex: 1; border-left: 3px solid var(--geo-red); padding-left: 12px; }
.topbar .where .site { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--geo-red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .where .scene { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .actions { display: flex; align-items: center; gap: 6px; color: var(--geo-ink); }
.iconbtn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: transparent; color: var(--geo-ink);
}
.iconbtn:hover { background: rgba(187,49,27,.1); color: var(--geo-red); }
.iconbtn svg { width: 22px; height: 22px; }

/* PSV: spazio per la barra superiore */
#viewer .psv-container { background: var(--geo-ink); }
.psv-navbar { background: rgba(43,36,32,.75) !important; }
.psv-plan, .psv-plan__container { border-radius: 12px !important; }
.psv-loader-container { color: var(--geo-red) !important; }

/* ---------- Hotspot ---------- */
.hs {
  --c: var(--geo-red);
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: var(--c); color: var(--geo-white); display: grid; place-items: center;
  box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 6px 16px rgba(0,0,0,.35);
  transition: transform .2s; cursor: pointer;
}
.hs::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); animation: pulse 2.2s infinite; }
.hs:hover { transform: scale(1.12); }
.hs svg { width: 22px; height: 22px; }
.hs .lbl {
  position: absolute; left: 56px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; background: var(--geo-cream); color: var(--geo-ink);
  font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.hs:hover .lbl { opacity: 1; }
.hs.video { --c: var(--geo-ink); }
.hs.video360 { --c: var(--geo-earth); }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Pannello contenuti ---------- */
#panel {
  position: absolute; z-index: 130; top: calc(var(--bar-h) + 12px); right: 12px; bottom: 12px;
  width: min(440px, calc(100% - 24px)); background: var(--geo-cream); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(calc(100% + 24px)); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
#panel.open { transform: none; }
#panel header { padding: 18px 20px 14px; background: var(--geo-red); color: var(--geo-white); position: relative; }
#panel header .kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
#panel header h2 { margin: 6px 40px 0 0; font-size: 22px; line-height: 1.15; font-weight: 800; }
#panel header .close { position: absolute; top: 12px; right: 10px; color: var(--geo-white); }
#panel header .close:hover { background: rgba(255,255,255,.15); color: var(--geo-white); }
#panel .content { padding: 18px 20px 26px; overflow-y: auto; font-size: 15.5px; line-height: 1.6; }
#panel .content p { margin: 0 0 14px; }
#panel .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
#panel .facts li { background: var(--geo-white); border-left: 4px solid var(--geo-red); padding: 8px 12px; font-size: 13px; font-weight: 700; border-radius: 6px; }
#panel figure { margin: 6px 0 14px; }
#panel figure img, #panel video { width: 100%; border-radius: 10px; display: block; background: #000; }
#panel figcaption { font-size: 13px; color: var(--geo-ink-soft); margin-top: 8px; line-height: 1.45; }
.placeholder {
  aspect-ratio: 16/9; border-radius: 10px; display: grid; place-items: center; text-align: center; padding: 16px;
  background: repeating-linear-gradient(135deg, rgba(187,49,27,.06) 0 12px, rgba(187,49,27,.12) 12px 24px);
  color: var(--geo-red); font-weight: 700; font-size: 14px; margin-bottom: 14px;
}
.source { font-size: 12px; color: var(--geo-ink-soft); border-top: 1px solid rgba(43,36,32,.12); padding-top: 10px; margin-top: 18px; }

/* ---------- Elenco scene ---------- */
#scenes {
  position: absolute; z-index: 125; top: calc(var(--bar-h) + 12px); left: 12px; width: min(320px, calc(100% - 24px));
  max-height: calc(100% - var(--bar-h) - 90px); overflow-y: auto; background: var(--geo-cream); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px;
}
#scenes h3 { margin: 6px 8px 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--geo-red); }
#scenes button { display: flex; gap: 12px; align-items: center; width: 100%; border: 0; background: transparent; padding: 6px; border-radius: 10px; text-align: left; color: inherit; }
#scenes button:hover { background: rgba(187,49,27,.08); }
#scenes button[aria-current="true"] { background: var(--geo-red); color: var(--geo-white); }
#scenes img { width: 84px; aspect-ratio: 2/1; object-fit: cover; border-radius: 6px; background: var(--geo-earth); }
#scenes .n { font-weight: 700; font-size: 14px; }

/* ---------- Video 360 ---------- */
#v360 { position: absolute; inset: 0; z-index: 200; background: var(--geo-ink); }
#v360 .bar { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--geo-cream); }
#v360 .bar .t { flex: 1; font-weight: 700; }
#v360 .stage { position: absolute; inset: var(--bar-h) 0 0 0; }
#v360 .placeholder { position: absolute; inset: calc(var(--bar-h) + 24px) 24px 24px; aspect-ratio: auto; background-color: rgba(247,242,235,.06); color: var(--geo-cream); }

/* ---------- Editor ---------- */
#editor {
  position: absolute; z-index: 300; left: 12px; bottom: 12px; width: 300px; background: rgba(43,36,32,.92); color: #fff;
  border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; font-family: ui-monospace, Menlo, monospace;
}
#editor b { color: var(--geo-pink); }
#editor button { margin: 6px 6px 0 0; border: 0; border-radius: 6px; padding: 6px 10px; background: var(--geo-red); color: #fff; font-size: 12px; }
#editor textarea { width: 100%; height: 70px; margin-top: 8px; background: #111; color: #9f9; border: 0; border-radius: 6px; font: inherit; font-size: 11px; }
#crosshair { position: absolute; z-index: 290; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; pointer-events: none; }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: var(--geo-pink); }
#crosshair::before { left: 12px; top: 0; width: 2px; height: 26px; }
#crosshair::after { top: 12px; left: 0; height: 2px; width: 26px; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root { --bar-h: 58px; }
  .topbar { gap: 8px; padding: 0 8px; }
  .topbar .logo .wordmark { font-size: 13px; }
  .topbar .logo .wordmark small { display: none; }
  .topbar .logo img { height: 28px; }
  .topbar .where { visibility: hidden; }
  .topbar .lang button { padding: 4px 7px; font-size: 11px; }
  #btnInfo { display: none; }
  .iconbtn { width: 36px; height: 36px; }
  #panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; border-radius: var(--radius) var(--radius) 0 0; transform: translateY(105%); }
  #panel.open { transform: none; }
  .hs .lbl { display: none; }
}

/* =========================================================
   Bozza 3 – loghi, navigazione, immersione
   ========================================================= */
.logo { gap: 14px; }
.logo img.geo { height: 34px; width: auto; }
.logo .partners { display: flex; align-items: center; gap: 12px; padding-left: 14px; border-left: 1px solid rgba(43,36,32,.18); }
.logo .partners img { height: 40px; width: auto; display: block; }
.topbar { gap: 18px; }
.topbar .logo img.geo { height: 30px; }
.topbar .logo .partners img { height: 38px; }
#home .hero .top .logo { padding: 10px 16px; }
#home .hero .top .logo img.geo { height: 40px; }
#home .hero .top .logo .partners img { height: 48px; }
#home h1 { text-transform: none; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.05; max-width: 16em; text-wrap: balance; }

/* Frecce di navigazione a terra */
.nav-arrow {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(247,242,235,.88); color: var(--geo-red);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 8px 20px rgba(0,0,0,.35);
  transition: transform .2s, background .2s, color .2s;
}
.nav-arrow .chev svg { width: 34px; height: 34px; display: block; }
.nav-arrow:hover { transform: scale(1.12); background: var(--geo-red); color: var(--geo-white); }
.psv-virtual-tour-tooltip, .psv-tooltip { font-family: var(--font) !important; }

/* Hotspot immersione */
.hs-immersion {
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 6px; border-radius: 999px;
  background: var(--geo-red); color: var(--geo-white); font-weight: 800; font-size: 15px; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 10px 24px rgba(0,0,0,.4); transition: transform .2s;
}
.hs-immersion:hover { transform: scale(1.05); }
.hs-immersion .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--geo-white); color: var(--geo-red); display: grid; place-items: center; position: relative; }
.hs-immersion .ico::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); animation: pulse 2.2s infinite; }
.hs-immersion svg { width: 20px; height: 20px; margin-left: 3px; }

/* Pulsante immersione nella barra */
.cta-top {
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 9px 16px 9px 12px;
  background: var(--geo-red); color: var(--geo-white); font-weight: 800; font-size: 14px; letter-spacing: .02em; margin-right: 6px;
}
.cta-top svg { width: 16px; height: 16px; }
.cta-top:hover { background: var(--geo-red-dark); }

/* Pannello: CTA e approfondimenti */
#panel .cta {
  display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 12px; padding: 14px 16px; margin: 0 0 18px;
  background: var(--geo-red); color: var(--geo-white); font-weight: 800; font-size: 16px; text-align: left;
}
#panel .cta svg { width: 22px; height: 22px; flex: none; }
#panel h3.sub { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--geo-red); margin: 22px 0 10px; }
#panel .acc details { border-top: 1px solid rgba(43,36,32,.14); }
#panel .acc details:last-child { border-bottom: 1px solid rgba(43,36,32,.14); }
#panel .acc summary { cursor: pointer; padding: 12px 4px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
#panel .acc summary::-webkit-details-marker { display: none; }
#panel .acc summary::after { content: "+"; color: var(--geo-red); font-weight: 800; font-size: 20px; line-height: 1; }
#panel .acc details[open] summary::after { content: "–"; }
#panel .acc details > *:not(summary) { margin-left: 4px; margin-right: 4px; }
#panel .acc details[open] { padding-bottom: 8px; }
#v360 .placeholder > div { max-width: 520px; line-height: 1.5; }

@media (max-width: 900px) {
  .topbar .where { display: none; }
}
@media (max-width: 640px) {
  :root { --bar-h: 92px; }
  .topbar { flex-wrap: wrap; height: var(--bar-h); align-content: center; row-gap: 6px; padding: 6px 10px; }
  .topbar .logo { order: 1; flex: 1 1 100%; justify-content: space-between; }
  .topbar .logo img.geo { height: 24px; }
  .topbar .logo .partners img { height: 30px; }
  .topbar .actions { order: 2; flex: 1 1 100%; justify-content: space-between; }
  .cta-top { padding: 7px 12px 7px 10px; font-size: 13px; }
  .topbar .lang { display: inline-flex; }
  #btnInfo { display: grid; }
  .hs-immersion { height: 48px; font-size: 13px; }
  .hs-immersion .ico { width: 36px; height: 36px; }
  .nav-arrow { width: 56px; height: 56px; }
  #home .hero .top { flex-wrap: wrap; }
  #home .hero .top .logo img.geo { height: 30px; }
  #home .hero .top .logo .partners img { height: 36px; }
}

/* Area cliccabile sul pannello fisico */
.panel-area { transition: fill .2s; animation: panelglow 2.4s ease-in-out infinite; }
.panel-area:hover { fill: rgba(187,49,27,.28) !important; animation: none; }
@keyframes panelglow { 0%,100% { stroke-opacity: .7; fill: rgba(255,255,255,.04); } 50% { stroke-opacity: 1; fill: rgba(255,255,255,.18); } }

/* Lightbox pannello */
#lightbox { position: absolute; inset: 0; z-index: 210; background: rgba(28,23,20,.94); }
#lightbox .bar { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--geo-cream); }
#lightbox .bar .t { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lightbox .stage { position: absolute; inset: var(--bar-h) 0 0 0; overflow: auto; display: grid; place-items: center; padding: 20px; }
#lightbox img { max-width: 100%; max-height: calc(100vh - var(--bar-h) - 80px); border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: zoom-in; animation: lbin .35s cubic-bezier(.2,.8,.2,1); }
#lightbox img.zoom { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
#lightbox .hint { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: var(--geo-cream); font-size: 13px; opacity: .8; }
#lightbox .placeholder { display: none; width: min(640px, 90%); color: var(--geo-cream); background-color: rgba(247,242,235,.06); }
#lightbox .stage.missing img, #lightbox .stage.missing .hint { display: none; }
#lightbox .stage.missing .placeholder { display: grid; }
@keyframes lbin { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel-area, .hs::after, .hs-immersion .ico::after { animation: none; } }

/* CTA immersione in home */
.hero-cta {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 14px; border: 0; border-radius: 999px;
  padding: 8px 26px 8px 8px; background: var(--geo-red); color: var(--geo-white); font-weight: 800; font-size: clamp(15px, 1.6vw, 18px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .2s, background .2s;
}
.hero-cta:hover { transform: translateY(-2px); background: var(--geo-red-dark); }
.hero-cta .ico { width: 48px; height: 48px; border-radius: 50%; background: var(--geo-white); color: var(--geo-red); display: grid; place-items: center; }
.hero-cta svg { width: 20px; height: 20px; margin-left: 3px; }

/* Benvenuto nella sezione */
#welcome { position: absolute; inset: 0; z-index: 140; display: grid; place-items: center; padding: 16px; background: rgba(28,23,20,.45); }
#welcome .card-w { width: min(560px, 100%); background: var(--geo-cream); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 28px 22px; border-top: 6px solid var(--geo-red); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; animation: lbin .35s cubic-bezier(.2,.8,.2,1); }
#welcome .kicker { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--geo-red); }
#welcome h2 { margin: 0; font-size: clamp(26px, 4vw, 36px); line-height: 1.1; font-weight: 800; }
#welcome p { margin: 8px 0 4px; font-size: 16px; line-height: 1.55; color: var(--geo-ink-soft); }
#welcome .hero-cta { margin-top: 12px; }
#welcome .w-start { margin-top: 14px; border: 0; background: transparent; color: var(--geo-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; padding: 6px 2px; }

/* Logo Regione FVG (orizzontale) */
.logo .partners img.reg { height: 28px; }
.topbar .logo .partners img.reg { height: 26px; }
#home .hero .top .logo .partners img.reg { height: 34px; }
#home footer .reg-credit , #spScroll > footer.site-foot .reg-credit { display: flex; align-items: center; gap: 14px; }
#home footer .reg-credit img , #spScroll > footer.site-foot .reg-credit img { height: 34px; width: auto; }
#panel .credit { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 12px; color: var(--geo-ink-soft); line-height: 1.4; }
#panel .credit img { height: 30px; width: auto; flex: none; }
@media (max-width: 640px) {
  .topbar .logo .partners img.reg { height: 20px; }
  .topbar .logo .partners { gap: 8px; padding-left: 8px; }
  #home .hero .top .logo .partners img.reg { height: 24px; }
}
.cta-top { white-space: nowrap; flex: none; }
@media (max-width: 1150px) { .topbar .where { display: none; } }
@media (max-width: 640px) {
  .topbar .actions { gap: 2px; }
  .cta-top { font-size: 12px; padding: 6px 10px 6px 8px; gap: 6px; margin-right: 2px; }
  .cta-top svg { width: 13px; height: 13px; }
  .iconbtn { width: 34px; height: 34px; }
  .iconbtn svg { width: 20px; height: 20px; }
  .topbar .lang { flex: none; }
}

/* Footer: Regione FVG (logo completo con riquadro) e realizzazione */
#home footer , #spScroll > footer.site-foot { align-items: center; gap: 18px 32px; }
#home footer .reg-credit , #spScroll > footer.site-foot .reg-credit { display: flex; align-items: center; gap: 16px; max-width: 640px; line-height: 1.45; }
#home footer .reg-credit img , #spScroll > footer.site-foot .reg-credit img { height: 46px; width: auto; flex: none; }
.madeby { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--geo-ink-soft); white-space: nowrap; }
.madeby img { height: 14px; width: auto; filter: brightness(0); }
.madeby b { color: var(--geo-ink); font-weight: 700; }
#panel .credit img { height: 34px; }
#panel .madeby { margin-top: 10px; }
@media (max-width: 640px) { #home footer .reg-credit , #spScroll > footer.site-foot .reg-credit { flex-direction: column; align-items: flex-start; } #home footer .reg-credit img , #spScroll > footer.site-foot .reg-credit img { height: 40px; } }

/* Vista dall'alto */
.pill-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: none;
  border: 1.5px solid var(--geo-ink); background: transparent; color: var(--geo-ink); border-radius: 999px;
  padding: 7px 14px 7px 10px; font-weight: 700; font-size: 13px; margin-right: 4px;
}
.pill-btn svg { width: 18px; height: 18px; }
.pill-btn:hover { background: var(--geo-ink); color: var(--geo-cream); }
#tour.is-aerial .pill-btn { background: var(--geo-ink); color: var(--geo-cream); }
#aerialStrip {
  position: absolute; z-index: 115; left: 50%; transform: translateX(-50%); bottom: 54px;
  display: flex; gap: 8px; padding: 8px; max-width: calc(100% - 24px); overflow-x: auto;
  background: rgba(247,242,235,.92); border-radius: 14px; box-shadow: var(--shadow);
}
#aerialStrip button { flex: none; width: 128px; border: 0; padding: 0; background: transparent; border-radius: 8px; overflow: hidden; text-align: left; color: var(--geo-ink); outline-offset: 2px; }
#aerialStrip img { width: 128px; height: 64px; object-fit: cover; display: block; border-radius: 8px; border: 3px solid transparent; }
#aerialStrip button[aria-current="true"] img { border-color: var(--geo-red); }
#aerialStrip span { display: block; font-size: 11px; font-weight: 700; line-height: 1.2; padding: 4px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tour.is-aerial .psv-plan { display: none; }
@media (max-width: 640px) {
  .pill-btn .lbl { display: none; }
  .pill-btn { padding: 6px; border-width: 0; }
  #aerialStrip button, #aerialStrip img { width: 96px; }
  #aerialStrip img { height: 48px; }
}

/* Documentario */
#welcome .w-doc {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid var(--geo-ink); background: transparent; color: var(--geo-ink);
  border-radius: 999px; padding: 10px 20px 10px 14px; font-weight: 800; font-size: 15px; text-align: left;
}
#welcome .w-doc svg { width: 24px; height: 24px; flex: none; }
#welcome .w-doc:hover { background: var(--geo-ink); color: var(--geo-cream); }
#panel .cta-doc { background: var(--geo-ink); }
#docPlayer { position: absolute; inset: 0; z-index: 205; background: rgba(28,23,20,.96); }
#docPlayer .bar { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--geo-cream); }
#docPlayer .bar .t { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#docPlayer .stage { position: absolute; inset: var(--bar-h) 0 0 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; }
#docPlayer .frame { width: min(1100px, 100%, calc((100vh - var(--bar-h) - 140px) * 16 / 9)); aspect-ratio: 16/9; }
#docPlayer video { width: 100%; height: 100%; background: #000; border-radius: 10px; }
#docPlayer .placeholder { height: 100%; margin: 0; background-color: rgba(247,242,235,.06); color: var(--geo-cream); }
#docPlayer p { color: var(--geo-cream); opacity: .85; max-width: 760px; text-align: center; line-height: 1.5; margin: 0; }

@media (max-width: 1250px) { .pill-btn .lbl { display: none; } .pill-btn { padding: 7px; } }
@media (max-width: 640px) { .pill-btn { padding: 5px; margin-right: 0; } .pill-btn svg { width: 20px; height: 20px; } }

.cta-top .short { display: none; }
@media (max-width: 640px) {
  .cta-top .long { display: none; }
  .cta-top .short { display: inline; }
  .topbar .actions { gap: 0; }
}

/* Guida sfogliabile */
.guide-band { padding: 0 clamp(16px, 5vw, 64px) 48px; }
.guide {
  width: 100%; display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); text-align: left; border: 0; cursor: pointer;
  background: var(--geo-red); color: var(--geo-white); border-radius: var(--radius); padding: 22px clamp(18px, 3vw, 36px); overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.guide:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.guide img { height: 150px; width: auto; border-radius: 4px; box-shadow: 0 10px 24px rgba(0,0,0,.35); transform: rotate(-3deg); flex: none; }
.guide .txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.guide .k { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.guide .h { font-size: clamp(22px, 3vw, 32px); font-weight: 800; line-height: 1.1; }
.guide .p { font-size: 15px; line-height: 1.5; opacity: .92; max-width: 560px; }
.guide .go { margin-top: 6px; align-self: flex-start; background: var(--geo-white); color: var(--geo-red); font-weight: 800; font-size: 14px; padding: 9px 18px; border-radius: 999px; }
#guideViewer { position: fixed; inset: 0; z-index: 400; background: var(--geo-cream); }
#guideViewer .bar { position: absolute; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--geo-cream); box-shadow: 0 1px 0 rgba(43,36,32,.1); }
#guideViewer .bar .t { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#guideViewer .newtab { color: var(--geo-red); font-weight: 700; font-size: 13px; white-space: nowrap; }
#guideViewer .stage { position: absolute; inset: var(--bar-h) 0 0 0; }
#guideViewer iframe { width: 100%; height: 100%; border: 0; display: block; }
#guideViewer .placeholder { margin: 24px; height: auto; aspect-ratio: auto; padding: 40px; }
@media (max-width: 640px) {
  .guide img { height: 96px; }
  .guide .p { display: none; }
  #guideViewer .newtab, #guideViewer .bar .t { display: none; }
  #guideViewer .bar { justify-content: space-between; }
}

/* Puntini di collegamento terra / alto */
.dot { position: relative; width: 34px; height: 34px; cursor: pointer; }
.dot .c { position: absolute; inset: 0; border-radius: 50%; background: var(--geo-red); border: 4px solid var(--geo-white); box-shadow: 0 4px 14px rgba(0,0,0,.45); display: grid; place-items: center; color: var(--geo-white); transition: transform .2s; }
.dot.down .c::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--geo-white); }
.dot.up .c { background: var(--geo-ink); }
.dot.up svg { width: 16px; height: 16px; }
.dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); animation: pulse 2.2s infinite; }
.dot:hover .c { transform: scale(1.18); }
.dot .lbl { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--geo-cream); color: var(--geo-ink); font-weight: 700; font-size: 13px; padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
@media (max-width: 640px) { .dot .lbl { font-size: 11px; left: 40px; } }

#welcome .w-doc small, #panel .cta small { display: block; font-weight: 500; font-size: 12px; opacity: .8; margin-top: 2px; }
#welcome .w-doc span { display: block; }

/* Promo geositi FVG */
.fvg-band { padding: 0 clamp(16px, 5vw, 64px) 48px; }
.fvg { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 56px); align-items: center;
  background: var(--geo-white); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); border-left: 6px solid var(--geo-earth); box-shadow: 0 2px 10px rgba(43,36,32,.06); }
.fvg .k { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--geo-earth); }
.fvg h2 { margin: 6px 0 10px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; font-weight: 800; text-wrap: balance; }
.fvg p { margin: 0; color: var(--geo-ink-soft); line-height: 1.6; max-width: 62ch; }
.fvg-links { display: flex; flex-direction: column; gap: 12px; }
.fvg-btn { display: flex; flex-direction: column; gap: 2px; text-decoration: none; padding: 14px 18px; border-radius: 12px; border: 2px solid var(--geo-ink); color: var(--geo-ink); font-weight: 800; }
.fvg-btn small { font-weight: 500; font-size: 12px; opacity: .7; }
.fvg-btn.primary { background: var(--geo-ink); color: var(--geo-cream); }
.fvg-btn:hover { background: var(--geo-red); border-color: var(--geo-red); color: var(--geo-white); }
.fvg-btn span::after { content: "  \2197"; }
@media (max-width: 800px) { .fvg { grid-template-columns: 1fr; } }

/* Benvenuto: azioni configurabili */
.w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; }
#welcome .w-actions .hero-cta, #welcome .w-actions .w-doc { margin-top: 0; }

/* Galleria fotografica */
#galleryBox { position: absolute; inset: 0; z-index: 206; background: rgba(28,23,20,.97); }
#galleryBox .bar { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--geo-cream); }
#galleryBox .bar .t { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#galleryBox .stage { position: absolute; inset: var(--bar-h) 0 0 0; overflow: auto; }
#galleryBox .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 16px; }
#galleryBox .grid button { border: 0; padding: 0; background: #000; border-radius: 10px; overflow: hidden; position: relative; aspect-ratio: 4/3; cursor: zoom-in; }
#galleryBox .grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s, opacity .3s; opacity: .92; }
#galleryBox .grid button:hover img { transform: scale(1.05); opacity: 1; }
#galleryBox .grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; font-size: 12px; font-weight: 700; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
#galleryBox .view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px 70px; }
#galleryBox .view figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#galleryBox .view img { max-width: 100%; max-height: calc(100vh - var(--bar-h) - 110px); border-radius: 6px; opacity: 0; transition: opacity .45s ease; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
#galleryBox .view img.in { opacity: 1; }
#galleryBox figcaption { color: var(--geo-cream); font-weight: 700; display: flex; gap: 14px; align-items: baseline; text-align: center; }
#galleryBox figcaption .n { font-weight: 500; opacity: .6; font-size: 13px; font-variant-numeric: tabular-nums; }
#galleryBox .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(247,242,235,.14); color: #fff; display: grid; place-items: center; }
#galleryBox .nav:hover { background: var(--geo-red); }
#galleryBox .nav svg { width: 26px; height: 26px; }
#galleryBox .prev { left: 12px; } #galleryBox .next { right: 12px; }
#galleryBox .back { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); border: 1.5px solid rgba(255,255,255,.6); background: transparent; color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; }
@media (max-width: 640px) { #galleryBox .grid { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 8px; } #galleryBox .view { padding: 50px 8px 16px; } #galleryBox .nav { top: auto; bottom: 14px; transform: none; } }

/* =========================================================
   Accessibilità
   ========================================================= */
#home .hero .top-r { display: flex; align-items: center; gap: 10px; }
.a11y-btn { background: rgba(255,255,255,.92); color: var(--geo-ink); }
:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
#a11yBox { position: fixed; z-index: 600; top: calc(var(--bar-h) + 10px); right: 12px; width: min(340px, calc(100% - 24px));
  background: var(--geo-cream); color: var(--geo-ink); border-radius: var(--radius); box-shadow: var(--shadow); border-top: 6px solid var(--geo-red); padding: 6px 16px 16px; }
#a11yBox header { display: flex; align-items: center; justify-content: space-between; }
#a11yBox h2 { font-size: 18px; margin: 8px 0; }
#a11yBox .row, #a11yBox .sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(43,36,32,.12); width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; text-align: left; font-weight: 600; font-size: 15px; }
#a11yBox .seg { display: inline-flex; border: 1.5px solid var(--geo-ink); border-radius: 8px; overflow: hidden; }
#a11yBox .seg button { border: 0; background: transparent; color: var(--geo-ink); width: 40px; height: 36px; font-weight: 800; }
#a11yBox .seg button[aria-pressed="true"] { background: var(--geo-ink); color: var(--geo-cream); }
#a11yBox .tg { width: 44px; height: 26px; border-radius: 999px; background: #b9b0a6; position: relative; flex: none; transition: background .2s; }
#a11yBox .tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
#a11yBox .sw[aria-checked="true"] .tg { background: var(--geo-red); }
#a11yBox .sw[aria-checked="true"] .tg::after { left: 21px; }
#a11yBox .reset { margin-top: 10px; width: 100%; border: 1.5px solid var(--geo-ink); background: transparent; color: var(--geo-ink); border-radius: 999px; padding: 9px; font-weight: 700; }
@media (max-width: 640px) { #a11yBox { top: auto; bottom: 12px; } }

/* Dimensione del testo */
html[data-text-size="1"] :is(#home, #panel, #welcome .card-w, #a11yBox, .topbar .where, #galleryBox figcaption, #docPlayer p, .psv-tooltip, .dot .lbl, .hs-immersion) { zoom: 1.15; }
html[data-text-size="2"] :is(#home, #panel, #welcome .card-w, #a11yBox, .topbar .where, #galleryBox figcaption, #docPlayer p, .psv-tooltip, .dot .lbl, .hs-immersion) { zoom: 1.32; }

/* Alto contrasto */
html.a11y-contrast {
  --geo-cream: #ffffff; --geo-white: #ffffff; --geo-ink: #000000; --geo-ink-soft: #000000;
  --geo-red: #a01a06; --geo-red-dark: #6e1003; --geo-earth: #5a3e26;
}
html.a11y-contrast body, html.a11y-contrast #home { background: #fff; }
html.a11y-contrast .card, html.a11y-contrast .fvg, html.a11y-contrast #panel, html.a11y-contrast #welcome .card-w, html.a11y-contrast #a11yBox { border: 2px solid #000; }
html.a11y-contrast #home .hero { background-image: none !important; background-color: #000 !important; }
html.a11y-contrast .psv-tooltip, html.a11y-contrast .dot .lbl, html.a11y-contrast .hs .lbl { background: #000 !important; color: #fff !important; }
html.a11y-contrast .nav-arrow { background: #fff; color: #000; box-shadow: 0 0 0 4px #000; }
html.a11y-contrast #galleryBox .grid span { background: #000; }

/* Carattere ad alta leggibilità */
html.a11y-font, html.a11y-font * { font-family: Verdana, "Atkinson Hyperlegible", Tahoma, "DejaVu Sans", sans-serif !important; letter-spacing: .02em; }
html.a11y-font #panel .content, html.a11y-font #welcome p, html.a11y-font .fvg p { line-height: 1.8; word-spacing: .08em; }

/* Evidenzia link e pulsanti */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-links :is(button, a):not(.lang button) { outline: 2px dashed #1a73e8; outline-offset: 2px; }

/* Comandi più grandi */
html.a11y-big .iconbtn { width: 48px; height: 48px; }
html.a11y-big .iconbtn svg { width: 26px; height: 26px; }
html.a11y-big .nav-arrow { transform: scale(1.3); }
html.a11y-big .dot, html.a11y-big .hs { transform: scale(1.3); }

/* Riduci le animazioni */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; }

/* Loghi cliccabili */
.logo a { display: block; line-height: 0; }
.logo .partners a { display: block; }

/* Slideshow 360° in home */
#home .hero { position: relative; overflow: hidden; background-color: var(--geo-ink); }
#home .hero > *:not(.slides) { position: relative; z-index: 2; }
#home .hero .slides { position: absolute; inset: 0; z-index: 0; }
#home .hero .slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,36,32,.25), rgba(43,36,32,.7)); }
.slide { position: absolute; inset: 0; background-size: auto 100%; background-repeat: repeat-x; background-position: 0 50%; opacity: 0; transition: opacity 2.2s ease; }
.slide.on { opacity: 1; animation: pan360 45s linear forwards; }
@keyframes pan360 { from { background-position: 0 50%; } to { background-position: -700px 50%; } }
.badge360 { position: absolute !important; right: clamp(16px, 5vw, 64px); bottom: 24px; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
.badge360::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.6); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .slide.on, .badge360::before { animation: none; } }
html.a11y-contrast #home .hero .slides { display: none; }

/* Spot visori VR */
.vr-band { padding: 0 clamp(16px, 5vw, 64px) 32px; }
.vr { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); background: var(--geo-ink); color: var(--geo-cream); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); }
.vr-ico { flex: none; width: clamp(80px, 10vw, 120px); color: var(--geo-pink); }
.vr-ico svg { width: 100%; height: auto; display: block; }
.vr .k { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--geo-pink); }
.vr h2 { margin: 6px 0 8px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; }
.vr p { margin: 0; line-height: 1.6; opacity: .9; max-width: 70ch; }
@media (max-width: 640px) { .vr { flex-direction: column; align-items: flex-start; } }

/* Footer link */
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.foot-links a { color: var(--geo-ink); font-weight: 700; font-size: 12px; text-decoration: none; }
.foot-links a:hover { color: var(--geo-red); text-decoration: underline; }
a.madeby { text-decoration: none; }

/* Tutorial */
#tutorial { position: fixed; inset: 0; z-index: 650; display: grid; place-items: center; padding: 16px; background: rgba(28,23,20,.6); }
.tut-card { width: min(480px, 100%); background: var(--geo-cream); color: var(--geo-ink); border-radius: var(--radius); box-shadow: var(--shadow); border-top: 6px solid var(--geo-red); padding: 26px 26px 18px; text-align: center; }
.tut-ico { width: 84px; height: 84px; margin: 0 auto 8px; color: var(--geo-red); border-radius: 50%; background: rgba(187,49,27,.08); display: grid; place-items: center; }
.tut-ico svg { width: 52px; height: 52px; }
.tut-step { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--geo-ink-soft); font-variant-numeric: tabular-nums; }
.tut-card h2 { margin: 6px 0 8px; font-size: 22px; }
.tut-card p { margin: 0 auto; line-height: 1.6; color: var(--geo-ink-soft); max-width: 40ch; min-height: 6.4em; }
.tut-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0; }
.tut-dots span { width: 8px; height: 8px; border-radius: 50%; background: #cfc6bc; }
.tut-dots span.on { background: var(--geo-red); width: 22px; border-radius: 999px; }
.tut-nav { display: flex; align-items: center; gap: 10px; }
.tut-skip { margin-right: auto; border: 0; background: transparent; color: var(--geo-ink-soft); text-decoration: underline; font-weight: 600; }
.tut-prev { border: 1.5px solid var(--geo-ink); background: transparent; color: var(--geo-ink); border-radius: 999px; padding: 9px 16px; font-weight: 700; }
.tut-next { border: 0; background: var(--geo-red); color: #fff; border-radius: 999px; padding: 10px 20px; font-weight: 800; }

/* Effetti sfocatura */
.slide { filter: blur(14px) saturate(1.1); transform: scale(1.06); transition: opacity 3.5s ease, filter 3.8s ease, transform 3.8s ease; }
.slide.on { filter: blur(0) saturate(1.05); transform: scale(1); }
#home .hero .top .logo, #home .hero .a11y-btn, #home .hero .lang { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
#home .hero .lang { color: var(--geo-ink); border-color: transparent; }
.badge360 { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(255,255,255,.12); }
#home .claim > * { animation: focusIn 1.4s cubic-bezier(.2,.7,.2,1) both; }
#home .claim > *:nth-child(2) { animation-delay: .15s; }
#home .claim > *:nth-child(3) { animation-delay: .3s; }
.cards .card { animation: focusIn 1s cubic-bezier(.2,.7,.2,1) both; }
.cards .card:nth-child(2) { animation-delay: .12s; } .cards .card:nth-child(3) { animation-delay: .24s; }
@keyframes focusIn { from { filter: blur(10px); opacity: .25; transform: translateY(10px); } to { filter: none; opacity: 1; transform: none; } }
.card .img { transition: filter .5s, transform .6s; }
.cards:hover .card:not(:hover):not([disabled]) .img { filter: blur(2px) saturate(.8); }
.card:hover:not([disabled]) .img { transform: scale(1.04); }
#welcome, #tutorial { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.topbar { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); background: rgba(247,242,235,.82); }
#aerialStrip, #scenes { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(247,242,235,.8); }
html.a11y-motion .slide, html.a11y-motion .slide.on { filter: none; transform: none; }
html.a11y-contrast .topbar, html.a11y-contrast #aerialStrip, html.a11y-contrast #scenes { background: #fff; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { #home .claim > *, .cards .card { animation: none; } .slide { filter: none; transform: none; } }

/* Mappa più grande */
.psv-plan { max-width: calc(100vw - 24px) !important; max-height: calc(100% - var(--bar-h) - 70px) !important; }
.psv-plan__container { box-shadow: var(--shadow); }

/* Volo di ingresso */
#tour.flying .topbar, #tour.flying #aerialStrip, #tour.flying .psv-navbar { opacity: .35; transition: opacity .6s; pointer-events: none; }

/* Suoni */
.snd .x { display: none; } .snd.off .x { display: inline; } .snd.off .w1, .snd.off .w2 { display: none; }


/* Audioguida */
.listen { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--geo-red); color: var(--geo-red); background: transparent; border-radius: 999px; padding: 6px 14px 6px 10px; font-weight: 700; font-size: 13px; margin: 4px 0 12px; }
.listen svg { width: 18px; height: 18px; }
.listen.on { background: var(--geo-red); color: #fff; }
.listen.on svg { animation: pulseIco 1s ease-in-out infinite; }
@keyframes pulseIco { 50% { transform: scale(1.15); } }

/* Ieri e oggi */
#compareBox { position: absolute; inset: 0; z-index: 207; background: rgba(28,23,20,.97); }
#compareBox .bar { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--geo-cream); }
#compareBox .bar .t { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#compareBox .stage { position: absolute; inset: var(--bar-h) 0 0 0; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 16px; }
.cmp { --pos: 50%; position: relative; width: min(1000px, 100%, calc((100vh - var(--bar-h) - 190px) * 4 / 3)); aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; touch-action: none; cursor: ew-resize; user-select: none; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp .before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp .before .missing { display: none; }
.cmp .before.nobefore img { display: none; }
.cmp .before.nobefore .missing { display: grid; place-items: center; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #3a302a 0 14px, #2f2621 14px 28px); color: var(--geo-cream); font-weight: 700; text-align: center; padding: 20px; }
.cmp .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.cmp .handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.cmp .handle span::before { content: "\2039  \203A"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--geo-red); font-weight: 800; font-size: 20px; letter-spacing: 2px; }
.cmp .tag { position: absolute; top: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-weight: 800; font-size: 13px; pointer-events: none; }
.cmp .tag.l { left: 12px; } .cmp .tag.r { right: 12px; }
.cmp input[type=range] { position: absolute; inset: auto 0 0 0; width: 100%; opacity: 0; height: 30px; }
.cmp-txt { max-width: 760px; text-align: center; color: var(--geo-cream); }
.cmp-txt p { margin: 0 0 6px; line-height: 1.55; }
.cmp-txt small { opacity: .65; }
.cmp-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.cmp-nav button { border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; }
.cmp-nav button[aria-current="true"] { background: var(--geo-red); border-color: var(--geo-red); }
.cmp .before.nobefore .missing { right: calc(100% - var(--pos)); font-size: 14px; }

/* Gestore volume */
.snd.low .w2 { display: none; }
#volBox { position: fixed; z-index: 600; top: calc(var(--bar-h) + 8px); right: 120px; width: 250px; background: var(--geo-cream); color: var(--geo-ink); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
#volBox .vol-head { display: flex; justify-content: space-between; font-weight: 700; }
#volBox .vol-head b { font-variant-numeric: tabular-nums; color: var(--geo-red); }
#volBox input[type=range] { width: 100%; accent-color: var(--geo-red); height: 28px; }
#volBox button { border: 1.5px solid var(--geo-ink); background: transparent; color: var(--geo-ink); border-radius: 999px; padding: 7px; font-weight: 700; }
#volBox button[aria-pressed="true"] { background: var(--geo-ink); color: var(--geo-cream); }
#volBox small { color: var(--geo-ink-soft); font-size: 12px; }
@media (max-width: 640px) { #volBox { right: 12px; left: 12px; width: auto; top: calc(var(--bar-h) + 8px); } }

/* =========================================================
   Pagina di sezione (Doline e Abissi del Cansiglio)
   ========================================================= */
#sitePage { position: fixed; inset: 0; background: var(--geo-cream); display: flex; flex-direction: column; }
.sp-bar { flex: none; height: var(--bar-h); display: flex; align-items: center; gap: 18px; padding: 0 14px; background: rgba(247,242,235,.9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(43,36,32,.08); z-index: 5; }
.sp-bar .where { flex: 1; min-width: 0; border-left: 3px solid var(--geo-red); padding-left: 12px; }
.sp-bar .where .site { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--geo-red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bar .where .scene { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bar .actions { display: flex; align-items: center; gap: 6px; }
.sp-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.sp-scroll > section, .sp-hero .in { padding-left: max(16px, 5vw); padding-right: max(16px, 5vw); }
.sp-scroll h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 10px; }
.sp-hero { min-height: 52vh; display: flex; align-items: flex-end; background-size: cover; background-position: center; color: #fff; }
.sp-hero .in { padding-bottom: 36px; max-width: 980px; }
.sp-hero .k { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.sp-hero h1 { font-size: clamp(32px, 5vw, 60px); line-height: 1.02; margin: 8px 0 12px; text-wrap: balance; }
.sp-hero p { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; max-width: 62ch; margin: 0; }
.sp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 20px; }
.sp-cta .hero-cta { margin: 0; text-decoration: none; }
.sp-cta .hero-cta .ico svg { width: 22px; height: 22px; margin: 0; }
.sp-soon { font-size: 13px; font-weight: 700; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); }
.sp-map-wrap { padding-top: 40px; padding-bottom: 20px; }
.sp-map-head p { color: var(--geo-ink-soft); max-width: 70ch; margin: 0 0 16px; line-height: 1.55; }
.sp-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; height: min(70vh, 640px); }
.cave-map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 360px; z-index: 0; }
.cave-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cave-list input { border: 1.5px solid rgba(43,36,32,.25); border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; }
.cave-list ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; background: #fff; border-radius: 10px; }
#caveList li button[data-mk] { width: 100%; display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: baseline; text-align: left; border: 0; border-bottom: 1px solid rgba(43,36,32,.08); background: transparent; color: var(--geo-ink); padding: 9px 12px; font-size: 14px; }
#caveList li button[data-mk]:hover { background: rgba(187,49,27,.07); }
#caveList li button.main { font-weight: 800; }
.cave-list .n { color: var(--geo-red); font-weight: 800; font-variant-numeric: tabular-nums; }
.cave-list .d { color: var(--geo-ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-source { font-size: 12px; color: var(--geo-ink-soft); margin: 10px 0 16px; }
.cpop { font-family: var(--font); }
.cpop .num { display: block; font-size: 11px; font-weight: 800; color: var(--geo-red); letter-spacing: .06em; }
.cpop b { font-size: 15px; }
.cpop dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0; font-size: 13px; }
.cpop dt { color: #6b6058; } .cpop dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cpop .pop-more { display: block; width: 100%; border: 0; background: var(--geo-red); color: #fff; border-radius: 8px; padding: 7px; font-weight: 700; margin-bottom: 6px; }
.cpop .pop-cat { display: block; text-align: center; font-weight: 700; color: var(--geo-ink); }
/* Promo catasto */
.catasto { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--geo-ink); background: #fff; border: 2px solid var(--geo-ink); border-radius: 14px; padding: 12px 16px; max-width: 640px; transition: background .2s, color .2s; }
.catasto:hover { background: var(--geo-ink); color: var(--geo-cream); }
.catasto .cat-logo { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--geo-cream); display: grid; place-items: center; overflow: hidden; }
.catasto .cat-logo img { width: 100%; height: 100%; object-fit: contain; }
.catasto .cat-ico svg { width: 26px; height: 26px; color: var(--geo-red); }
.catasto .cat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.catasto .cat-txt small { opacity: .7; font-size: 12px; }
.catasto .cat-arrow { margin-left: auto; font-size: 22px; font-weight: 800; color: var(--geo-red); }
/* Schede grotte */
.sp-caves { padding-top: 30px; }
.cave { background: #fff; border-radius: var(--radius); padding: clamp(18px, 3vw, 30px); margin: 0 0 22px; box-shadow: 0 2px 12px rgba(43,36,32,.06); border-top: 5px solid var(--geo-red); scroll-margin-top: 12px; }
.cave header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.cave .num { font-weight: 800; color: var(--geo-red); font-size: 13px; letter-spacing: .06em; }
.cave h3 { font-size: clamp(22px, 2.4vw, 28px); margin: 0; }
.cave .com { color: var(--geo-ink-soft); font-size: 14px; }
.cave .facts, .sp-block .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.cave .facts li, .sp-block .facts li { background: var(--geo-cream); border-left: 4px solid var(--geo-red); padding: 8px 12px; font-size: 13px; font-weight: 700; border-radius: 6px; }
.cave-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cave-body .txt p { line-height: 1.65; margin: 0 0 12px; }
.survey { margin: 0; }
.zoomable { border: 0; padding: 0; background: #fff; cursor: zoom-in; display: block; width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(43,36,32,.1); }
.zoomable img { width: 100%; display: block; }
.survey figcaption { font-size: 12px; color: var(--geo-ink-soft); margin-top: 8px; line-height: 1.45; }
.cave-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.cave-actions .ghost { border: 1.5px solid var(--geo-ink); background: transparent; color: var(--geo-ink); border-radius: 999px; padding: 10px 16px; font-weight: 700; }
.sp-blocks { padding-top: 16px; } .sp-block { max-width: 820px; margin-bottom: 18px; } .sp-block h3 { margin: 0 0 6px; } .sp-block p { line-height: 1.65; }
.sp-trail { padding-top: 10px; padding-bottom: 48px; } .sp-trail p { color: var(--geo-ink-soft); } .sp-trail .zoomable { max-width: 900px; }
#lightbox.global { position: fixed; z-index: 700; }
@media (max-width: 900px) { .sp-map-grid { grid-template-columns: 1fr; height: auto; } .cave-map { height: 60vh; } .cave-list ol { max-height: 300px; } .cave-body { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sp-bar .where { display: none; } .sp-bar .lang button { padding: 4px 7px; font-size: 11px; } }

.trail-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--geo-ink); }
.trail-facts li { display: inline-flex; align-items: center; gap: 7px; }
.trail-facts .sw { width: 26px; height: 5px; border-radius: 3px; background: var(--geo-red); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.1); }
.dotm { width: 12px; height: 12px; border-radius: 50%; background: #AE8D70; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.dotm.main { background: #BB311B; width: 16px; height: 16px; } .dotm.deep { background: #8E2414; }
.trail-start span { position: absolute; transform: translate(-50%, -130%); white-space: nowrap; background: var(--geo-ink); color: #fff; font: 700 12px var(--font); padding: 4px 9px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.3); }

/* Spot Catasto Speleologico */
.sp-catasto { padding-top: 26px; padding-bottom: 10px; }
.cat-box { background: var(--geo-ink); color: var(--geo-cream); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); }
.cat-head { display: flex; align-items: center; gap: 16px; }
.cat-head .k { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--geo-pink); }
.cat-head h2 { margin: 4px 0 0; color: #fff; }
.cat-logo.big { width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--geo-cream); display: grid; place-items: center; overflow: hidden; }
.cat-logo.big img { width: 100%; height: 100%; object-fit: contain; }
.cat-logo.big .cat-ico svg { width: 36px; height: 36px; color: var(--geo-red); }
.cat-box > p { line-height: 1.65; max-width: 75ch; opacity: .92; }
.cat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 16px 0 20px; }
.cat-cols h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--geo-pink); margin: 0 0 8px; }
.cat-cols ul { margin: 0; padding-left: 18px; line-height: 1.6; } .cat-cols .cite { margin: 0; line-height: 1.6; font-size: 14px; opacity: .85; }
.cat-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cat-box .catasto { background: var(--geo-cream); color: var(--geo-ink); border-color: var(--geo-cream); }
.cat-box .catasto:hover { background: var(--geo-red); border-color: var(--geo-red); color: #fff; }
.cat-sec { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cpop .pop-src { display: block; text-align: center; margin-top: 6px; font-size: 10px; color: #8a7f76; }
@media (max-width: 760px) { .cat-cols { grid-template-columns: 1fr; } }

.cat-logo .cat-ico { display: none; } .cat-logo.noimg img { display: none; } .cat-logo.noimg .cat-ico { display: grid; place-items: center; }

/* Il mio itinerario */
#caveList li { display: flex; align-items: stretch; }
#caveList li button[data-mk] { flex: 1; }
#caveList li .add { flex: none; width: 40px; border: 0; border-bottom: 1px solid rgba(43,36,32,.08); background: transparent; color: var(--geo-red); font-size: 20px; font-weight: 800; }
#caveList li .add.on { background: var(--geo-red); color: #fff; font-size: 16px; }
.trip { background: var(--geo-ink); color: var(--geo-cream); border-radius: 10px; padding: 12px; font-size: 13px; max-height: 45%; overflow-y: auto; }
.trip-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.trip-head .cnt { background: var(--geo-red); color: #fff; border-radius: 999px; min-width: 24px; text-align: center; padding: 2px 8px; font-weight: 800; }
.trip .empty { margin: 0; opacity: .8; line-height: 1.45; }
.trip-list { list-style: none; margin: 0 0 8px; padding: 0; }
.trip-list li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.trip-list .i { width: 20px; height: 20px; border-radius: 50%; background: var(--geo-red); display: grid; place-items: center; font-weight: 800; font-size: 11px; flex: none; }
.trip-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-list button { border: 0; background: rgba(255,255,255,.1); color: #fff; border-radius: 6px; width: 24px; height: 24px; }
.trip-list button:disabled { opacity: .3; }
.trip-opt { display: flex; gap: 6px; align-items: center; margin: 4px 0 8px; }
.trip-dl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trip-dl button { border: 0; background: var(--geo-red); color: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 800; }
.trip-dl .gmaps { color: #fff; font-weight: 700; margin-left: auto; }
.trip small { display: block; margin-top: 8px; opacity: .7; line-height: 1.4; }
.cpop .pop-add { display: block; width: 100%; border: 1.5px solid var(--geo-red); background: #fff; color: var(--geo-red); border-radius: 8px; padding: 6px; font-weight: 700; margin-bottom: 6px; }
.cpop .pop-add.on { background: var(--geo-red); color: #fff; }
.sp-map-grid { height: min(78vh, 720px); }
.cave-list .trip .trip-list { background: transparent; flex: none; overflow: visible; border-radius: 0; }

/* Hotspot grotta */
.hs-cave { position: relative; width: 46px; height: 46px; cursor: pointer; }
.hs-cave .c { position: absolute; inset: 0; border-radius: 50%; background: var(--geo-ink); color: #fff; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: transform .2s; }
.hs-cave .c svg { width: 24px; height: 24px; }
.hs-cave::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); animation: pulse 2.2s infinite; }
.hs-cave:hover .c { transform: scale(1.12); background: var(--geo-red); }
.hs-cave .lbl { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--geo-cream); color: var(--geo-ink); font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.25); line-height: 1.15; }
.hs-cave .lbl small { display: block; font-size: 10px; color: var(--geo-red); letter-spacing: .06em; }
#panel .pop-add-inline.on { background: var(--geo-red); color: #fff; }
#panel .catasto { margin-top: 12px; }
.hero-cta.alt { background: var(--geo-cream); color: var(--geo-ink); }
.hero-cta.alt .ico { background: var(--geo-red); color: #fff; }
@media (max-width: 640px) { .hs-cave .lbl { font-size: 11px; left: 50px; } }

#aerialStrip .grp { align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 800; color: var(--geo-red); letter-spacing: .04em; max-height: 90px; overflow: hidden; }
#aerialStrip .sep { flex: none; width: 2px; background: rgba(43,36,32,.2); margin: 4px 4px; }

/* Scheda di approfondimento grotta */
#caveSheet { position: fixed; inset: 0; z-index: 640; background: var(--geo-cream); display: flex; flex-direction: column; }
.cs-bar { flex: none; height: var(--bar-h); display: flex; align-items: center; gap: 16px; padding: 0 14px; background: var(--geo-ink); color: var(--geo-cream); }
.cs-bar .logo { background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px 8px; }
.cs-bar .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-bar .t small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--geo-pink); }
.cs-bar .t b { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-bar .iconbtn { color: #fff; }
.cs-scroll { flex: 1; overflow-y: auto; padding: 24px max(16px, 5vw) 48px; }
.cs-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cs-data { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.cs-data div { background: #fff; border-left: 4px solid var(--geo-red); border-radius: 8px; padding: 10px 12px; }
.cs-data dt { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--geo-ink-soft); }
.cs-data dd { margin: 4px 0 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cs-gmaps { font-weight: 700; color: var(--geo-ink); }
.cs-sec { margin-top: 30px; }
.cs-sec h3 { font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 12px; }
.cs-sec h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--geo-red); margin: 14px 0 8px; }
.cs-scenes { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.cs-scene { flex: none; width: 210px; border: 0; padding: 0; background: #fff; border-radius: 10px; overflow: hidden; text-align: left; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.cs-scene img { width: 100%; height: 105px; object-fit: cover; display: block; }
.cs-scene span { display: block; padding: 8px 10px; font-size: 13px; font-weight: 700; color: var(--geo-ink); }
.cs-scene i { position: absolute; top: 8px; right: 8px; background: var(--geo-red); color: #fff; font-style: normal; font-weight: 800; font-size: 11px; padding: 3px 8px; border-radius: 999px; }
.cs-scene:hover { outline: 3px solid var(--geo-red); }
.cs-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; }
.cs-cols .txt p { line-height: 1.65; margin: 0 0 12px; }
.cs-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 18px; }
.cs-photos figure { margin: 0; }
.cs-photos img { width: 100%; height: 160px; object-fit: cover; display: block; }
.cs-photos figcaption { font-size: 12.5px; margin-top: 6px; line-height: 1.4; }
.cs-photos figcaption small { display: block; color: var(--geo-ink-soft); font-size: 11px; }
.cave-list li .info { flex: none; width: 34px; border: 0; border-bottom: 1px solid rgba(43,36,32,.08); background: transparent; color: var(--geo-ink); font-weight: 800; font-family: Georgia, serif; font-style: italic; }
.cave-list li .info:hover { color: var(--geo-red); }
#caveList li .info { flex: none; width: 34px; border: 0; border-bottom: 1px solid rgba(43,36,32,.08); background: transparent; font-weight: 800; font-style: italic; font-family: Georgia, serif; }
@media (max-width: 800px) { .cs-top, .cs-cols { grid-template-columns: 1fr; } }
#lightbox.global { z-index: 700; }

/* ---------- Scheda grotta v2 ---------- */
#caveSheet .cs-scroll { padding: 0 0 56px; }
#caveSheet .cs-sec { margin: 0 auto; padding: 34px max(16px, 5vw) 0; max-width: 1280px; }
.cs-hero { position: relative; min-height: min(78vh, 720px); background: #222 center/cover no-repeat; display: flex; align-items: flex-end; color: #fff; }
.cs-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.78) 100%); }
.cs-hero-in { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 40px max(16px, 5vw) 34px; }
.cs-hero small { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ffd2c8; }
.cs-hero h2 { font-size: clamp(34px, 6vw, 72px); line-height: 1; margin: 8px 0 6px; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.cs-hero .alt { margin: 0 0 8px; opacity: .85; }
.cs-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 20px; }
.cs-stats div { background: rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; padding: 10px 16px; min-width: 120px; }
.cs-stats b { display: block; font-size: clamp(24px, 3vw, 34px); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cs-stats span { font-size: 12px; opacity: .85; }
.cs-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 20px; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; background: rgba(255,255,255,.92); color: var(--geo-ink); text-decoration: none; }
.cs-btn svg { width: 20px; height: 20px; }
.cs-btn.red { background: var(--geo-red); color: #fff; }
.cs-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cs-sub { color: var(--geo-ink-soft); margin: -6px 0 14px; }
.cs-note { font-size: 12.5px; color: var(--geo-ink-soft); margin-top: 10px; line-height: 1.5; }
.cs-where-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
.cs-map { height: 420px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.cs-side { display: flex; flex-direction: column; gap: 14px; }
.cs-data .wide { grid-column: 1 / -1; }
.cs-pin { position: relative; }
.cs-pin span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--geo-red); border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.cs-pin span svg { width: 22px; height: 22px; color: #fff; transform: rotate(45deg); }
.cs-pin b { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); background: #fff; color: var(--geo-red); font-size: 12px; padding: 1px 7px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.cs-pin360 { background: var(--geo-ink); color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; text-align: center; line-height: 20px; border: 2px solid #fff; cursor: pointer; }
.cs-depth { display: flex; gap: 10px; align-items: flex-end; height: 260px; overflow-x: auto; padding: 4px 2px 0; }
.cs-depth .col { flex: 1 0 86px; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.cs-depth .bar { display: flex; align-items: flex-end; justify-content: center; height: var(--h); background: linear-gradient(180deg, #8b7363, #3e322b); border-radius: 0 0 10px 10px; color: #fff; transition: transform .2s; order: 2; }
.cs-depth .bar em { font-style: normal; font-weight: 800; font-size: 13px; padding: 6px 0; }
.cs-depth .nm { order: 1; font-size: 12px; font-weight: 700; color: var(--geo-ink); padding: 0 2px 6px; border-bottom: 3px solid #6aa35a; min-height: 34px; text-align: center; line-height: 1.2; }
.cs-depth .col.on .bar { background: linear-gradient(180deg, #e0573c, var(--geo-red)); }
.cs-depth .col.on .nm { color: var(--geo-red); }
.cs-depth .col:hover .bar { transform: scaleX(1.06); }
.cs-survey { margin: 0; background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.cs-survey img { width: 100%; display: block; }
.cs-survey figcaption { font-size: 13px; margin-top: 8px; }
.cs-3d { margin-top: 18px; }
.cs-3d-stage { height: min(72vh, 620px); border-radius: 16px; overflow: hidden; display: grid; place-items: center; position: relative;
  background: radial-gradient(ellipse at 50% 20%, #f4ede2 0%, #d9cdbd 60%, #b9ab98 100%); }
.cs-3d-stage canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.cs-3d-stage.on { display: block; }
#caveSheet .cs-scene { width: 260px; }
#caveSheet .cs-scene img { height: 140px; }
.cs-guide .txt { max-width: 820px; font-size: 17px; }
.cs-guide .txt p { line-height: 1.7; }
.cs-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 10px; }
.cs-mosaic figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; }
.cs-mosaic figure.big { grid-column: span 2; grid-row: span 2; }
.cs-mosaic button { display: block; width: 100%; height: 100%; padding: 0; border: 0; }
.cs-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.cs-mosaic figure:hover img { transform: scale(1.04); }
.cs-mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; color: #fff; font-size: 12.5px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); pointer-events: none; }
.cs-mosaic figcaption small { display: block; opacity: .8; font-size: 10.5px; }
@media (max-width: 800px) {
  .cs-where-grid { grid-template-columns: 1fr; }
  .cs-map { height: 320px; }
  .cs-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .cs-hero { min-height: 70vh; }
}

/* ---------- Mappa del territorio (home) ---------- */
.home-map { background: var(--geo-ink); color: #fff; padding: 56px max(16px, 5vw) 64px; }
.hm-head { max-width: 1280px; margin: 0 auto 24px; }
.hm-head .k { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ffb4a4; }
.hm-head h2 { font-size: clamp(28px, 4vw, 48px); margin: 6px 0 10px; line-height: 1.08; }
.hm-head p { max-width: 780px; opacity: .85; line-height: 1.6; margin: 0; }
.hm-wrap { position: relative; max-width: 1280px; margin: 0 auto; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
#homeMap { height: min(78vh, 680px); min-height: 460px; background: #1b2a22; }
.hm-list { position: absolute; z-index: 500; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 10px; width: 300px; }
.hm-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 14px; text-align: left; font: inherit; cursor: pointer; color: var(--geo-ink);
  background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .2s, background .2s; }
.hm-item:hover, .hm-item.on { transform: translateX(4px); background: #fff; outline: 3px solid var(--geo-red); }
.hm-item .n { font-weight: 900; color: var(--geo-red); font-size: 18px; width: 26px; text-align: center; }
.hm-item img { width: 64px; height: 48px; object-fit: cover; border-radius: 9px; flex: none; }
.hm-item .t { display: flex; flex-direction: column; min-width: 0; }
.hm-item b { font-size: 14.5px; line-height: 1.2; }
.hm-item small { font-size: 11.5px; color: var(--geo-ink-soft); }
.hm-switch { position: absolute; z-index: 500; right: 16px; top: 16px; display: flex; background: rgba(0,0,0,.55); border-radius: 999px; padding: 4px; backdrop-filter: blur(8px); }
.hm-switch button { border: 0; background: none; color: #fff; font: inherit; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.hm-switch button.on { background: var(--geo-red); }
.hm-pin { position: relative; }
.hm-pin .ph { position: absolute; left: 6px; top: 0; width: 64px; height: 64px; border-radius: 50%; background: #333 center/cover; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.45); transition: transform .25s; }
.hm-pin::after { content: ''; position: absolute; left: 30px; top: 62px; border: 8px solid transparent; border-top: 14px solid #fff; }
.hm-pin .num { position: absolute; left: 50px; top: -6px; background: var(--geo-red); color: #fff; font-weight: 900; font-size: 12px; border-radius: 999px; padding: 3px 7px; border: 2px solid #fff; }
.hm-pin .lbl { position: absolute; left: 50%; top: 98px; transform: translateX(-50%); white-space: nowrap; background: rgba(0,0,0,.72); color: #fff; font-weight: 800; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.hm-pin .pulse { position: absolute; left: 38px; top: 84px; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: rgba(187,49,27,.9); animation: hmPulse 2.2s infinite; }
.hm-pin:hover .ph { transform: scale(1.1) translateY(-4px); }
@keyframes hmPulse { 0% { box-shadow: 0 0 0 0 rgba(187,49,27,.7); } 100% { box-shadow: 0 0 0 26px rgba(187,49,27,0); } }
@media (prefers-reduced-motion: reduce) { .hm-pin .pulse { animation: none; } }
.hm-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 16px; overflow: hidden; }
.hm-popup .leaflet-popup-content { margin: 0; width: 280px !important; }
.hm-pop .img { height: 140px; background: #333 center/cover; }
.hm-pop .b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.hm-pop small { color: var(--geo-ink-soft); font-size: 12px; }
.hm-pop b { font-size: 17px; color: var(--geo-ink); }
.hm-go { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 16px; background: var(--geo-red); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.hm-go svg { width: 18px; height: 18px; }
@media (max-width: 800px) {
  .hm-list { position: static; width: auto; flex-direction: row; overflow-x: auto; padding: 12px; background: #2a211c; }
  .hm-item { flex: none; width: 250px; }
  #homeMap { height: 62vh; min-height: 380px; }
}
/* spazio tra la mappa del territorio e la fascia della guida */
.home-map { margin-bottom: clamp(36px, 5vw, 64px); }
.home-map + .guide-band { padding-top: 0; }

/* ---------- Elenco fotosfere: gerarchia ---------- */
#scenes .n { display: flex; flex-direction: column; gap: 3px; }
#scenes .tag { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--geo-red); color: #fff; padding: 2px 7px; border-radius: 999px; }
#scenes .com { font-size: 11px; font-weight: 600; opacity: .7; }
#scenes button.tier-star { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); border-left: 5px solid var(--geo-red); margin: 6px 0; padding: 8px 8px 8px 6px; }
#scenes button.tier-star img { width: 112px; }
#scenes button.tier-star .n { font-size: 16px; font-weight: 800; }
#scenes button.tier-star[aria-current="true"] { background: var(--geo-red); }
#scenes button.tier-star[aria-current="true"] .tag { background: #fff; color: var(--geo-red); }
#scenes button.tier-cave .n { font-size: 14px; }
#scenes button.tier-other .n { font-weight: 600; font-size: 13.5px; }
#scenes button.tier-pass { padding: 3px 6px; opacity: .78; }
#scenes button.tier-pass img { width: 60px; }
#scenes button.tier-pass .n { font-weight: 500; font-size: 12.5px; }
#scenes button.tier-pass:hover, #scenes button.tier-pass[aria-current="true"] { opacity: 1; }

/* ---------- Confronto profondità ---------- */
.dcmp { margin-top: 26px; background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.dcmp h4 { margin: 0 0 8px; }
.dcmp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.dcmp-svg { width: 100%; height: auto; }
.dcmp-svg .v { font: 800 14px var(--font, system-ui); fill: var(--geo-ink); }
.dcmp-svg .n { font: 600 11.5px var(--font, system-ui); fill: var(--geo-ink-soft); }
.dcmp ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dcmp li { font-size: 16px; font-weight: 700; padding-left: 16px; border-left: 4px solid var(--geo-red); }
.cs-btn.big { padding: 15px 24px; font-size: 16px; }

/* ---------- Scendi nella grotta ---------- */
#descent { position: fixed; inset: 0; z-index: 900; background: #000; color: #fff; opacity: 0; transition: opacity .9s; }
#descent.in { opacity: 1; }
.ds-intro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 3; background: radial-gradient(circle at 50% 40%, #2a221d, #000 70%); transition: opacity 1.2s; cursor: pointer; }
.ds-intro div { display: flex; flex-direction: column; gap: 10px; animation: dsDown 2.6s ease-in forwards; }
.ds-intro small { letter-spacing: .18em; text-transform: uppercase; color: #ffb4a4; font-weight: 800; font-size: 12px; }
.ds-intro b { font-size: clamp(30px, 6vw, 64px); }
.ds-intro span { opacity: .75; }
@keyframes dsDown { 0% { transform: translateY(-20px) scale(1.05); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(30px) scale(.96); opacity: .9; } }
#descent.play .ds-intro { opacity: 0; pointer-events: none; }
.ds-stage { position: absolute; inset: 0; }
.ds-top { position: absolute; z-index: 4; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: linear-gradient(180deg, rgba(0,0,0,.7), transparent); }
.ds-title { display: flex; flex-direction: column; } .ds-title small { color: #ffb4a4; font-weight: 800; letter-spacing: .12em; font-size: 11px; text-transform: uppercase; } .ds-title b { font-size: 20px; }
.ds-close { border: 0; background: rgba(255,255,255,.15); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.ds-chapter { position: absolute; z-index: 4; left: 50%; top: 76px; transform: translateX(-50%); background: rgba(187,49,27,.92); padding: 8px 18px; border-radius: 999px; font-weight: 800; opacity: 0; pointer-events: none; }
.ds-chapter.show { animation: dsCh 4s ease forwards; }
@keyframes dsCh { 0% { opacity: 0; transform: translate(-50%, -10px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.ds-gauge { position: absolute; z-index: 4; left: 16px; top: 90px; bottom: 90px; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.ds-scale { position: relative; flex: 1; width: 12px; border-radius: 6px; background: rgba(255,255,255,.18); overflow: visible; }
.ds-fill { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 6px; background: linear-gradient(180deg, #6aa35a, #BB311B); transition: height .3s; }
.ds-mark { position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 4px solid var(--geo-red); transition: top .3s; }
.ds-val { background: rgba(0,0,0,.6); border-radius: 12px; padding: 6px 10px; text-align: center; } .ds-val b { font-size: 24px; font-variant-numeric: tabular-nums; } .ds-val small { margin-left: 2px; }
.ds-max { opacity: .7; font-size: 11px; }
.ds-map { position: absolute; z-index: 4; right: 16px; bottom: 72px; background: rgba(20,16,14,.75); border-radius: 14px; padding: 8px; backdrop-filter: blur(6px); }
.ds-map canvas { display: block; width: 300px; height: 180px; } .ds-map small { display: block; text-align: center; font-weight: 700; opacity: .8; font-size: 11px; }
.ds-chapters { position: absolute; z-index: 5; left: 100px; bottom: 72px; }
.ds-chbtn { border: 0; background: rgba(0,0,0,.65); color: #fff; padding: 9px 16px; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; }
.ds-chapters ol { list-style: none; margin: 0 0 8px; padding: 6px; background: rgba(0,0,0,.8); border-radius: 12px; position: absolute; bottom: 100%; min-width: 240px; }
.ds-chapters ol button { width: 100%; text-align: left; border: 0; background: none; color: #fff; padding: 8px; border-radius: 8px; font: inherit; cursor: pointer; display: flex; gap: 10px; }
.ds-chapters ol button span { opacity: .6; font-variant-numeric: tabular-nums; } .ds-chapters ol button.on { background: var(--geo-red); }
@media (max-width: 700px) { .ds-map canvas { width: 180px; height: 108px; } .ds-gauge { width: 56px; } .ds-chapters { left: 76px; } }

/* ---------- Quiz e Sul posto ---------- */
#quizBox, #onsite { position: fixed; inset: 0; z-index: 800; background: var(--geo-cream); display: flex; flex-direction: column; }
#quizBox.hidden, #onsite.hidden { display: none; }
.qz-bar { flex: none; height: var(--bar-h); display: flex; align-items: center; gap: 16px; padding: 0 14px; background: var(--geo-ink); color: #fff; }
.qz-bar .logo { background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px 8px; } .qz-bar b { flex: 1; font-size: 18px; } .qz-bar .iconbtn { color: #fff; }
.qz-in { flex: 1; overflow-y: auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; }
.qz-prog { height: 8px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .qz-prog span { display: block; height: 100%; background: var(--geo-red); transition: width .4s; }
.qz-in h3 { font-size: clamp(22px, 3vw, 30px); line-height: 1.25; margin: 10px 0 22px; }
.qz-ans { display: flex; flex-direction: column; gap: 10px; }
.qz-ans button { text-align: left; border: 2px solid rgba(0,0,0,.1); background: #fff; border-radius: 14px; padding: 16px 18px; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; color: var(--geo-ink); transition: transform .15s; }
.qz-ans button:hover { border-color: var(--geo-red); transform: translateX(3px); }
.qz-ans.done button { cursor: default; transform: none; }
.qz-ans button.ok { background: #e3f2df; border-color: #4f9a45; } .qz-ans button.ok::after { content: ' ✓'; color: #4f9a45; font-weight: 900; }
.qz-ans button.ko { background: #fbe3dd; border-color: var(--geo-red); } .qz-ans button.ko::after { content: ' ✗'; color: var(--geo-red); font-weight: 900; }
.qz-ans button.off { opacity: .5; }
.qz-next { margin-top: 20px; }
.qz-end { text-align: center; } .qz-score { font-size: 90px; font-weight: 900; color: var(--geo-red); } .qz-score span { font-size: 36px; color: var(--geo-ink-soft); }
.qz-end label { display: flex; flex-direction: column; gap: 6px; max-width: 420px; margin: 18px auto; font-weight: 700; text-align: left; }
.qz-end input { font: inherit; font-size: 18px; padding: 12px 14px; border-radius: 12px; border: 2px solid rgba(0,0,0,.15); }
.qz-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sp-quiz { padding: 0 max(16px, 5vw) 40px; }
.qz-card { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(120deg, #2b2420, #4a3a30); color: #fff; border-radius: 20px; padding: 26px 28px; }
.qz-card .k { color: #ffb4a4; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .qz-card h2 { margin: 6px 0; } .qz-card p { margin: 0; opacity: .85; max-width: 640px; }
.on-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); min-height: 0; }
#onMap { min-height: 300px; }
.on-card { overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.on-big { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.on-big img { width: 100%; height: 160px; object-fit: cover; display: block; } .on-big > div { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.on-big small, .on-scene small { color: var(--geo-ink-soft); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.on-big b { font-size: 22px; } .on-big .d { font-size: 30px; font-weight: 900; color: var(--geo-red); }
.on-scene { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 10px; } .on-scene img { width: 120px; border-radius: 8px; } .on-scene > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.on-list { list-style: none; padding: 0; margin: 0; } .on-list button { width: 100%; display: flex; justify-content: space-between; border: 0; background: none; padding: 10px 4px; border-bottom: 1px solid rgba(0,0,0,.08); font: inherit; cursor: pointer; color: var(--geo-ink); }
@media (max-width: 800px) { .on-grid { grid-template-columns: 1fr; grid-template-rows: 45vh auto; } .dcmp-grid { grid-template-columns: 1fr; } }

/* ---------- Il viaggio della goccia ---------- */
.water { padding: 0 max(16px, 5vw) clamp(36px, 5vw, 64px); }
.water .in { max-width: 1280px; margin: 0 auto; background: #fff; border-radius: 22px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.water .k { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--geo-red); }
.water h2 { font-size: clamp(26px, 3.6vw, 42px); margin: 6px 0 8px; } .water > .in > p { max-width: 820px; line-height: 1.6; color: var(--geo-ink-soft); }
#waterStage { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 14px; }
.w-svg { width: 100%; height: auto; border-radius: 16px; }
.w-lbl text { font: 700 15px var(--font, system-ui); fill: #2b2420; } .w-lbl text.big { font-size: 18px; font-weight: 800; }
.w-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.w-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; line-height: 1.4; opacity: .55; transition: all .35s; }
.w-steps li span { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(42,125,225,.15); color: #2a7de1; font-weight: 900; }
.w-steps li.on { opacity: 1; background: #eaf3fd; font-weight: 700; } .w-steps li.on span { background: #2a7de1; color: #fff; }
.w-foot { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .w-foot small { color: var(--geo-ink-soft); }
@media (max-width: 900px) { #waterStage { grid-template-columns: 1fr; } }
.hm-water { animation: hmFlow 1.6s linear infinite; }
@keyframes hmFlow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .hm-water { animation: none; } }
#scenes button.tier-other { opacity: .88; }
#scenes button.tier-other img { width: 72px; }

/* ---------- Vista dall'alto: monti e voli verso le altre grotte ---------- */
.hs-peak { position: relative; width: 20px; height: 20px; pointer-events: none; }
.hs-peak .tri { position: absolute; left: 50%; bottom: 0; width: 2px; height: 34px; margin-left: -1px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff); }
.hs-peak .lbl { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); white-space: nowrap; text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6); }
.hs-peak .lbl b { display: block; font-size: 14px; font-weight: 800; }
.hs-peak .lbl small { font-size: 11px; opacity: .9; }
.hs-fly { position: relative; width: 40px; height: 40px; cursor: pointer; }
.hs-fly .c { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--geo-red); color: #fff; border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.4); font-size: 20px; }
.hs-fly .c svg { width: 22px; height: 22px; }
.hs-fly .lbl { position: absolute; left: 50%; top: calc(46px + var(--stack, 0) * 34px); transform: translateX(-50%); white-space: nowrap; background: rgba(255,255,255,.95); color: var(--geo-ink); font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.3); display: flex; gap: 6px; align-items: baseline; }
.hs-fly .lbl small { color: var(--geo-red); font-size: 11.5px; }
.hs-fly:hover .c { transform: scale(1.12); }
.hs-fly.up .c { background: var(--geo-ink); }
.x-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#scenes .x-chips { margin: 4px 6px 12px; }
.x-chip { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--geo-red); background: #fff; color: var(--geo-red); border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; width: auto !important; }
.x-chip svg { width: 18px; height: 18px; }
.x-chip:hover { background: var(--geo-red); color: #fff; }
#scenes .x-chip { display: inline-flex; width: auto; padding: 7px 14px; background: #fff; border: 2px solid var(--geo-red); border-radius: 999px; color: var(--geo-red); }
#scenes .x-chip:hover { background: var(--geo-red); color: #fff; }
.hs-place .tri { height: 22px; }
.hs-place .lbl { bottom: 24px; background: rgba(43,36,32,.72); padding: 3px 10px; border-radius: 999px; text-shadow: none; }
.hs-place .lbl b { font-size: 13px; }
/* rilievi del catasto nelle schede */
.cs-surveys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cs-surveys.n1 { grid-template-columns: minmax(0, 760px); }
.cs-survey { position: relative; }
.cs-survey img { max-height: 70vh; object-fit: contain; background: #fff; }
.cs-sv-kind { position: absolute; z-index: 2; top: 22px; left: 22px; background: var(--geo-red); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
@media (max-width: 800px) { .cs-surveys { grid-template-columns: 1fr; } }
/* elenco fotosfere aperto: nascondi la mini-mappa che si sovrappone */
#tour:has(#scenes:not(.hidden)) .psv-plan-container { display: none !important; }

/* ---------- Crediti ---------- */
.credits-band { padding: 0 max(16px, 5vw) clamp(36px, 5vw, 64px); }
.cr-in { max-width: 1280px; margin: 0 auto; background: #fff; border-radius: 22px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 10px 40px rgba(0,0,0,.06); }
.cr-in .k { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--geo-red); }
.cr-in h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 6px 0 10px; }
.cr-intro { max-width: 900px; line-height: 1.6; color: var(--geo-ink-soft); margin: 0 0 22px; }
.cr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.cr-grid h3 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--geo-red); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid rgba(187,49,27,.2); }
.cr-grid dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cr-grid dt { font-size: 12px; color: var(--geo-ink-soft); }
.cr-grid dd { margin: 2px 0 0; font-weight: 700; line-height: 1.35; }
.cr-thanks { font-size: 13.5px; line-height: 1.5; margin: 14px 0 0; font-style: italic; color: var(--geo-ink-soft); }
.cr-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.08); }
.cr-logos span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--geo-ink-soft); }
.cr-logos img { height: 52px; width: auto; }
@media (max-width: 900px) { .cr-grid { grid-template-columns: 1fr; } .cr-logos img { height: 40px; } }

/* ---------------- Ricerca interna ---------------- */
.sr-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.92); color: var(--geo-ink); font: 600 14px var(--font); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.sr-pill svg { width: 18px; height: 18px; color: var(--geo-red); }
.sr-pill kbd { font: 600 11px var(--font); border: 1px solid rgba(43,36,32,.25); border-radius: 5px; padding: 1px 6px; color: var(--geo-ink-soft); }
.sr-pill:hover { background: #fff; color: var(--geo-red); }
@media (max-width: 640px) { .sr-pill kbd, .sr-pill span { display: none; } .sr-pill { width: 40px; padding: 0; justify-content: center; } }

#search { position: fixed; inset: 0; z-index: 9000; background: rgba(30,24,20,.55); backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; }
#search.hidden { display: none; }
body.sr-open { overflow: hidden; }
.sr-card { width: min(680px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: var(--geo-cream);
  border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; animation: srIn .18s ease-out; }
@keyframes srIn { from { transform: translateY(-10px); opacity: 0; } }
.sr-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border-bottom: 1px solid rgba(43,36,32,.1); }
.sr-bar > svg { width: 22px; height: 22px; color: var(--geo-red); flex: none; }
.sr-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 19px var(--font); color: var(--geo-ink); }
.sr-bar input::-webkit-search-cancel-button { display: none; }
.sr-x { border: 0; background: rgba(43,36,32,.08); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: var(--geo-ink); font-size: 14px; }
.sr-body { overflow-y: auto; padding: 8px; }
.sr-item { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: transparent;
  padding: 9px 10px; border-radius: 12px; cursor: pointer; color: var(--geo-ink); font-family: var(--font); }
.sr-item:hover, .sr-item.on { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.sr-item.on .sr-go { color: var(--geo-red); transform: translateX(2px); }
.sr-img { flex: none; width: 64px; height: 44px; border-radius: 8px; background: #ddd center/cover; }
.sr-ico { flex: none; width: 64px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: rgba(187,49,27,.1);
  color: var(--geo-red); font: 700 13px var(--font); }
.sr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sr-t small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--geo-red); font-weight: 700; }
.sr-t b { font-size: 16px; font-weight: 700; line-height: 1.25; }
.sr-t em { font-style: normal; font-size: 13px; color: var(--geo-ink-soft); }
.sr-sn { font-size: 13px; color: var(--geo-ink-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-t mark { background: rgba(224,161,151,.55); color: inherit; border-radius: 3px; padding: 0 1px; }
.sr-go { flex: none; font-size: 24px; color: rgba(43,36,32,.3); transition: transform .15s; }
.sr-empty { padding: 18px 14px 22px; color: var(--geo-ink-soft); font-size: 15px; }
.sr-empty .sm { font-size: 13px; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sr-chips button { border: 1px solid rgba(187,49,27,.3); background: #fff; color: var(--geo-red-dark); border-radius: 999px; padding: 7px 14px;
  font: 600 14px var(--font); cursor: pointer; }
.sr-chips button:hover { background: var(--geo-red); color: #fff; }
.sr-foot { display: flex; gap: 16px; padding: 9px 16px; font-size: 12px; color: var(--geo-ink-soft); border-top: 1px solid rgba(43,36,32,.1); }
.sr-foot kbd { font: 600 11px var(--font); border: 1px solid rgba(43,36,32,.25); border-radius: 4px; padding: 0 5px; margin-right: 2px; background: #fff; }
@media (max-width: 640px) { #search { padding: 0; align-items: stretch; } .sr-card { max-height: none; height: 100%; border-radius: 0; } .sr-foot { display: none; } }

/* ---------------- Privacy, cookie, note legali, accessibilità ---------------- */
#legal { position: fixed; inset: 0; z-index: 9100; background: rgba(30,24,20,.55); backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: center; padding: 16px; }
#legal.hidden { display: none; }
.lg-card { width: min(820px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; color: var(--geo-ink); font-family: var(--font); }
.lg-card header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.lg-card header h2 { margin: 0; font-size: 22px; }
.lg-tabs { display: flex; gap: 6px; padding: 0 16px 10px; border-bottom: 1px solid rgba(43,36,32,.12); overflow-x: auto; }
.lg-tabs button { border: 0; background: var(--geo-cream); color: var(--geo-ink); border-radius: 999px; padding: 8px 14px; font: 600 14px var(--font); cursor: pointer; white-space: nowrap; }
.lg-tabs button.on { background: var(--geo-red); color: #fff; }
.lg-body { overflow-y: auto; padding: 8px 24px 24px; font-size: 15px; line-height: 1.6; }
.lg-body h2 { font-size: 20px; margin: 14px 0 8px; color: var(--geo-red-dark); }
.lg-body h3 { font-size: 15px; margin: 18px 0 4px; text-transform: uppercase; letter-spacing: .04em; color: var(--geo-red); }
.lg-body p { margin: 6px 0; }
.lg-body a { color: var(--geo-red-dark); }
.lg-body ul { padding-left: 20px; margin: 6px 0; }
.lg-tab { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0; }
.lg-tab th, .lg-tab td { text-align: left; padding: 7px 8px; border-bottom: 1px solid rgba(43,36,32,.12); vertical-align: top; }
.lg-tab th { background: var(--geo-cream); }
.lg-upd { margin-top: 18px !important; font-size: 13px; color: var(--geo-ink-soft); }
.lg-ok { color: #2e7d32; font-weight: 600; margin-left: 8px; }
.a11y-decl { display: block; margin-top: 10px; font-size: 14px; color: var(--geo-red-dark); }
@media (max-width: 640px) { #legal { padding: 0; } .lg-card { max-height: none; height: 100%; border-radius: 0; } .lg-body { padding: 8px 16px 24px; } }

/* ---------------- Audiodescrizione ---------------- */
.ad-btn { position: relative; }
.ad-btn .ad-svg { width: 22px; height: 22px; }
.ad-btn .ad-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--geo-red); box-shadow: 0 0 0 2px #fff; display: none; }
.ad-btn.on { color: var(--geo-red); background: rgba(187,49,27,.1); }
.ad-btn.on .ad-dot { display: block; }
#home .hero .ad-btn { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); color: var(--geo-ink); }
#home .hero .ad-btn.on { color: var(--geo-red); background: rgba(255,255,255,.92); }
#adBar.__old { position: absolute; width: min(760px, calc(100% - 24px));
  background: rgba(255,255,255,.97); color: var(--geo-ink); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.3); padding: 12px 14px; font-family: var(--font); }
.ad-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ad-head b { color: var(--geo-red-dark); font-size: 15px; }
.ad-ctl { display: flex; gap: 6px; flex-wrap: wrap; }
.ad-ctl button, .ad-go button { border: 1px solid rgba(187,49,27,.3); background: #fff; color: var(--geo-ink); border-radius: 999px; padding: 6px 12px; font: 600 13px var(--font); cursor: pointer; }
.ad-ctl button:hover, .ad-go button:hover, .ad-ctl button:focus-visible, .ad-go button:focus-visible { background: var(--geo-red); color: #fff; outline: 3px solid var(--geo-red-dark); outline-offset: 2px; }
.ad-ctl .ad-x { width: 32px; padding: 0; }
.ad-text { margin: 8px 0; font-size: 15px; line-height: 1.5; max-height: 7.5em; overflow-y: auto; }
.ad-go { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-go button { display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.ad-go kbd { background: var(--geo-red); color: #fff; border-radius: 4px; padding: 0 6px; font: 700 12px var(--font); }
.ad-go small { color: var(--geo-ink-soft); font-weight: 500; }
.ad-go button:hover small { color: #fff; }
#tour:has(#adBar) #aerialStrip { display: none !important; }
@media (max-width: 640px) { #adBar { bottom: 52px; padding: 10px; } .ad-text { font-size: 14px; max-height: 6em; } }

/* ---------------- Geologia: carta e scala dei tempi ---------------- */
.geo-band { padding: 0 max(16px, 5vw) clamp(36px, 5vw, 64px); }
.geo-band .in { max-width: 1280px; margin: 0 auto; background: #fff; border-radius: 22px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.geo-band .k { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--geo-red); }
.geo-band h2 { margin: 6px 0 8px; font-size: clamp(24px, 3vw, 36px); }
.geo-band .in > p { max-width: 820px; color: var(--geo-ink-soft); line-height: 1.55; }
.gl-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 20px; margin-top: 18px; }
.gl-mapwrap { position: relative; }
#glMap { height: clamp(380px, 52vh, 560px); border-radius: 16px; overflow: hidden; background: #e9e4dc; }
.gl-note { font-size: 12px; color: var(--geo-ink-soft); margin-top: 6px; }
.gl-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gl-info { background: var(--geo-cream); border-radius: 14px; padding: 14px 16px; min-height: 120px; }
.gl-info h4 { margin: 4px 0 6px; font-size: 18px; }
.gl-info p { margin: 0 0 10px; line-height: 1.5; font-size: 14.5px; }
.gl-info small { color: var(--geo-red); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.gl-info details { font-size: 13px; color: var(--geo-ink-soft); margin-top: 8px; }
.gl-info summary { cursor: pointer; font-weight: 600; }
.gl-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; border: 1px solid rgba(0,0,0,.2); }
.gl-hint { color: var(--geo-ink-soft); }
.gl-clear { border: 0; background: none; color: var(--geo-red-dark); font: 600 13px var(--font); cursor: pointer; padding: 6px 0 0; text-decoration: underline; }
.gl-h { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--geo-ink-soft); }
.gl-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gl-legend button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 6px 8px; cursor: pointer; font-family: var(--font); color: var(--geo-ink); }
.gl-legend button:hover, .gl-legend button.on { background: var(--geo-cream); border-color: rgba(187,49,27,.3); }
.gl-legend i { flex: none; width: 26px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.2); }
.gl-legend b { display: block; font-size: 14px; }
.gl-legend small { display: block; font-size: 12px; color: var(--geo-ink-soft); }
.gl-lx { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--geo-ink-soft); padding: 4px 8px; }
.gl-fault { flex: none; width: 26px; border-top: 3px solid #7a1e10; }
.gl-com { flex: none; width: 26px; border-top: 3px dotted var(--geo-red); }
.gl-pin { display: grid; place-items: center; }
.gl-pin span { width: 30px; height: 30px; border-radius: 50%; background: var(--geo-red); color: #fff; font: 800 14px/30px var(--font); text-align: center; box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(0,0,0,.35); }
.gl-tip { font: 600 13px var(--font); }
.gl-th { margin-top: 26px; }
.gl-tp { max-width: 820px; color: var(--geo-ink-soft); line-height: 1.55; margin: 6px 0 10px; }
.gl-time { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gl-svg { width: 100%; min-width: 720px; height: auto; display: block; font-family: var(--font); }
.gt-l { font-size: 12px; font-weight: 700; fill: #2b2420; text-anchor: middle; }
.gt-t { font-size: 13px; font-weight: 700; fill: #5e5249; }
.gt-s { font-size: 11px; fill: #5e5249; text-anchor: middle; }
.gt-k { stroke: #5e5249; }
.gt-win { fill: none; stroke: var(--geo-red); stroke-width: 2.5; }
.gt-zoom { stroke: var(--geo-red); stroke-dasharray: 4 4; fill: none; }
.gt-brk { stroke: #5e5249; stroke-dasharray: 3 3; }
.gt-u { cursor: pointer; transition: opacity .2s; }
.gl-svg.has-sel .gt-u { opacity: .25; }
.gl-svg.has-sel .gt-u.on { opacity: 1; }
.gt-u.on rect { stroke: #2b2420; stroke-opacity: 1; stroke-width: 2; }
.gt-e { cursor: pointer; }
.gt-e line { stroke: var(--geo-red); stroke-width: 1.5; }
.gt-e circle { fill: var(--geo-red); stroke: #fff; stroke-width: 2; }
.gt-e.on circle { fill: #2b2420; }
.gt-n { fill: #fff; font-size: 11px; font-weight: 800; text-anchor: middle; pointer-events: none; }
.gl-events { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: ev; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.gl-events li { counter-increment: ev; position: relative; padding: 6px 6px 6px 38px; font-size: 14px; line-height: 1.45; border-radius: 10px; cursor: pointer; }
.gl-events li::before { content: counter(ev); position: absolute; left: 6px; top: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--geo-red); color: #fff; font: 800 11px/22px var(--font); text-align: center; }
.gl-events li b, .gl-events li span { display: block; }
.gt-q { font-weight: 700; }
.gl-events li.on { background: var(--geo-cream); }
.gl-events b { color: var(--geo-red-dark); font-size: 13px; }
.gl-src { font-size: 12px; color: var(--geo-ink-soft); margin-top: 16px; }
@media (max-width: 860px) { .gl-grid { grid-template-columns: 1fr; } #glMap { height: 380px; } }

/* ---------------- Rete dei geoportali: geosito Sorgenti del Livenza ---------------- */
.lv-card { margin: 14px 0; background: #eef6f8; border: 1px solid rgba(42,125,170,.25); border-radius: 14px; padding: 14px 16px; color: var(--geo-ink); text-align: left; }
.lv-k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1f6f97; }
.lv-card h3 { margin: 4px 0 6px; font-size: 18px; }
.lv-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.lv-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.lv-list li { display: grid; grid-template-columns: 14px 1fr auto; column-gap: 8px; align-items: baseline; font-size: 14px; }
.lv-list li small { grid-column: 2; color: var(--geo-ink-soft); font-size: 12px; }
.lv-list li a { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 12.5px; font-weight: 700; color: #1f6f97; white-space: nowrap; }
.lv-dot { width: 12px; height: 12px; border-radius: 50%; background: #2a7de1; box-shadow: 0 0 0 2px #fff; align-self: center; grid-row: 1 / span 2; }
.lv-list li.here .lv-dot { background: var(--geo-red); }
.lv-list li.here b { color: var(--geo-red-dark); }
.lv-go { display: inline-block; font-weight: 700; font-size: 14px; color: #fff; background: #1f6f97; border-radius: 999px; padding: 8px 14px; text-decoration: none; }
.lv-go:hover { background: #17577a; }
.lv-card.compact { margin-top: 12px; background: rgba(255,255,255,.92); }
.lv-card.compact h3 { font-size: 16px; }
.lv-pin span { display: block; width: 18px; height: 18px; border-radius: 50%; background: #2a7de1; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.lv-pop { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; font-family: var(--font); }
.lv-pop small { color: #1f6f97; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.lv-pop b { font-size: 15px; }
.lv-pop a { margin-top: 6px; font-weight: 700; color: #1f6f97; }
@media (max-width: 640px) { .lv-list li { grid-template-columns: 14px 1fr; } .lv-list li a { grid-column: 2; grid-row: auto; } }

/* ---------------- Condivisione / incorporamento ---------------- */
.sh-box { margin-top: 18px; }
.sh-row { display: flex; gap: 8px; align-items: stretch; margin: 6px 0; }
.sh-row input, .sh-row textarea { flex: 1; min-width: 0; border: 1px solid rgba(43,36,32,.2); border-radius: 10px; padding: 8px 10px; font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; color: var(--geo-ink); resize: none; }
.sh-p { font-size: 13px; color: var(--geo-ink-soft); margin: 10px 0 0; }
/* versione incorporata in altri portali */
.embed .guide-band { display: none; }
.noscript-box { max-width: 900px; margin: 40px auto; padding: 24px; font-family: system-ui, sans-serif; line-height: 1.6; color: #2b2420; }

/* ---------------- Approfondimenti del luogo (pulsante nel tour) ---------------- */
#deepBox { position: absolute; top: 76px; left: 16px; z-index: 35; display: flex; align-items: flex-start; gap: 6px; max-width: min(420px, calc(100% - 32px)); flex-wrap: wrap; }
#deepBox[hidden] { display: none; }
.dp-main { display: flex; align-items: center; gap: 10px; border: 0; background: rgba(255,255,255,.96); color: var(--geo-ink); border-radius: 16px; padding: 8px 14px 8px 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; text-align: left; font-family: var(--font); min-width: 0; }
.dp-main:hover, .dp-main:focus-visible { outline: 3px solid var(--geo-red); outline-offset: 1px; }
.dp-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--geo-red); color: #fff; display: grid; place-items: center; font-size: 17px; }
.dp-ico svg { width: 20px; height: 20px; }
.dp-t { display: flex; flex-direction: column; min-width: 0; }
.dp-t small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--geo-red); }
.dp-t b { font-size: 14.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.dp-more { border: 0; height: 52px; min-width: 48px; border-radius: 16px; background: rgba(255,255,255,.96); color: var(--geo-red-dark); font: 800 15px var(--font); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.dp-more[aria-expanded="true"] { background: var(--geo-red); color: #fff; }
.dp-list { flex-basis: 100%; list-style: none; margin: 0; padding: 6px; background: rgba(255,255,255,.98); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.dp-list button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 8px; border-radius: 10px; cursor: pointer; text-align: left; font: 600 14px var(--font); color: var(--geo-ink); }
.dp-list button:hover, .dp-list button:focus-visible { background: var(--geo-cream); }
.dp-list .dp-ico { width: 28px; height: 28px; font-size: 14px; }
.dp-list li:last-child button { color: var(--geo-red-dark); justify-content: flex-end; font-size: 13px; }
#deepBox.pulse .dp-main { animation: dpIn .5s ease-out, dpGlow 1.6s ease-out .4s 2; }
@keyframes dpIn { from { transform: translateY(-8px); opacity: 0; } }
@keyframes dpGlow { 0% { box-shadow: 0 0 0 0 rgba(187,49,27,.55), 0 6px 20px rgba(0,0,0,.25); } 100% { box-shadow: 0 0 0 14px rgba(187,49,27,0), 0 6px 20px rgba(0,0,0,.25); } }
.a11y-motion #deepBox.pulse .dp-main { animation: none; }
.dp-allbtn { margin-top: 14px; border: 0; background: none; color: var(--geo-red-dark); font: 700 14px var(--font); cursor: pointer; padding: 0; text-decoration: underline; }
#tour:has(#scenes:not(.hidden)) #deepBox { display: none; }
@media (max-width: 640px) { #deepBox { top: 64px; left: 10px; } .dp-t b { max-width: 210px; font-size: 13.5px; } .dp-main { padding: 6px 12px 6px 6px; } .dp-ico { width: 30px; height: 30px; } .dp-more { height: 44px; } }

/* ---------------- Pagina del geosito ---------------- */
#mediaLayer { position: fixed; inset: 0; z-index: 700; pointer-events: none; }
#mediaLayer > * { pointer-events: auto; }
.topbar .where { cursor: pointer; border-radius: 8px; }
.topbar .where:hover .site { text-decoration: underline; }
.gp-nav { position: sticky; top: 0; z-index: 4; display: flex; gap: 6px; overflow-x: auto; padding: 10px max(16px, 5vw); background: rgba(247,242,235,.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(43,36,32,.08); }
.gp-nav a { flex: none; text-decoration: none; color: var(--geo-ink); font: 700 13.5px var(--font); padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(43,36,32,.1); }
.gp-nav a:hover { background: var(--geo-red); color: #fff; }
.sp-scroll > section { scroll-margin-top: 64px; }
.gp-sheet { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 22px; padding-top: 32px; padding-bottom: 12px; max-width: 1280px; margin: 0 auto; }
.gp-id dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(43,36,32,.1); border-radius: 14px; overflow: hidden; }
.gp-id dl > div { background: #fff; padding: 12px 14px; }
.gp-id dt { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--geo-red); margin-bottom: 3px; }
.gp-id dd { margin: 0; font-size: 15px; line-height: 1.4; }
.gp-rock { background: #fff; border-radius: 14px; padding: 16px; align-self: start; }
.gp-rock .k { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--geo-ink-soft); }
.gp-rock .sw { height: 10px; border-radius: 6px; margin: 8px 0; }
.gp-rock b { display: block; font-size: 17px; }
.gp-rock small { color: var(--geo-red); font-weight: 700; font-size: 12.5px; }
.gp-rock p { font-size: 14px; line-height: 1.5; margin: 8px 0; }
.gp-lv { max-width: 1280px; margin: 0 auto; }
.gp-places, .gp-mediawrap { max-width: 1280px; margin: 0 auto; padding-top: 28px; }
.gp-head p { color: var(--geo-ink-soft); margin: 0 0 14px; }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gp-grid.small { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 12px; }
.gp-place { display: flex; flex-direction: column; border: 0; padding: 0; background: #fff; border-radius: 14px; overflow: hidden; cursor: pointer; text-align: left; box-shadow: 0 4px 16px rgba(0,0,0,.07); font-family: var(--font); color: var(--geo-ink); transition: transform .15s, box-shadow .15s; }
.gp-place:hover, .gp-place:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.14); outline: 3px solid transparent; }
.gp-place:focus-visible { outline-color: var(--geo-red); }
.gp-place .img { aspect-ratio: 2 / 1; background: #ddd center / cover; position: relative; }
.gp-place .img::after { content: '360°'; position: absolute; right: 8px; bottom: 8px; font: 800 11px var(--font); color: #fff; background: rgba(0,0,0,.45); padding: 3px 7px; border-radius: 999px; }
.gp-place .t { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.gp-place small { font-size: 11px; font-weight: 700; color: var(--geo-red); text-transform: uppercase; letter-spacing: .05em; }
.gp-place b { font-size: 14.5px; line-height: 1.3; }
.gp-sub { margin: 22px 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--geo-ink-soft); }
.gp-all { margin-top: 14px; }
.gp-all summary { cursor: pointer; font-weight: 700; color: var(--geo-red-dark); }
.gp-big { margin: 22px 0 6px; }
.gp-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.gp-media { display: flex; align-items: center; gap: 12px; border: 0; background: var(--geo-ink); color: #fff; border-radius: 14px; padding: 14px 16px; cursor: pointer; text-align: left; font-family: var(--font); }
.gp-media:hover { background: var(--geo-red); }
.gp-media .ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.15); display: grid; place-items: center; font-size: 18px; }
.gp-media .ico svg { width: 20px; height: 20px; }
.gp-media b { display: block; font-size: 15px; }
.gp-media small { display: block; font-size: 12.5px; opacity: .8; }
.sp-block .listen { margin: 0 0 8px; }
.gp-share { max-width: 1280px; margin: 0 auto; padding-bottom: 40px; }
@media (max-width: 860px) { .gp-sheet { grid-template-columns: 1fr; } .gp-id dl { grid-template-columns: 1fr; } }

/* ---------------- Pagina del geosito: foto, movimento, racconto ---------------- */
.gp-hero { position: relative; min-height: min(78vh, 760px); overflow: hidden; background: #2b2420; }
.gp-slides, .gp-shade { position: absolute; inset: 0; }
.gp-slides .sl { position: absolute; inset: -2%; background: center / cover no-repeat; opacity: 0; transition: opacity 1.6s ease; transform: scale(1.02); }
.gp-slides .sl.on { opacity: 1; animation: gpKen 14s ease-out both; }
@keyframes gpKen { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1.02) translate(0, 0); } }
.gp-shade { background: linear-gradient(180deg, rgba(20,15,12,.35) 0%, rgba(20,15,12,.05) 30%, rgba(20,15,12,.15) 55%, rgba(20,15,12,.85) 100%); }
.gp-hero .in { position: relative; z-index: 2; }
.gp-hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.gp-hcap { position: absolute; z-index: 2; right: max(16px, 5vw); bottom: 14px; margin: 0; font-size: 12px !important; color: rgba(255,255,255,.85); text-align: right; max-width: 40ch !important; }
.gp-hcap .cr, .gp-ph .cr, #pv .cr, .gp-sfig .cr { display: block; opacity: .75; font-size: .9em; }
.a11y-motion .gp-slides .sl.on { animation: none; }
.gp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 1280px; margin: 0 auto; padding-top: 26px !important; }
.gp-num { padding: 8px 18px; border-left: 3px solid var(--geo-red); opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.gp-num.in { opacity: 1; transform: none; }
.gp-num:nth-child(2) { transition-delay: .1s; } .gp-num:nth-child(3) { transition-delay: .2s; } .gp-num:nth-child(4) { transition-delay: .3s; }
.gp-num b { font-size: clamp(30px, 4vw, 48px); line-height: 1; font-weight: 800; color: var(--geo-ink); letter-spacing: -.02em; }
.gp-num i { font-style: normal; font-weight: 800; font-size: clamp(16px, 1.8vw, 22px); color: var(--geo-red); margin-left: 4px; }
.gp-num span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--geo-ink-soft); line-height: 1.35; }
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.rv.in { opacity: 1; transform: none; }
.a11y-motion .rv, .a11y-motion .gp-num { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .rv, .gp-num { opacity: 1; transform: none; transition: none; } .gp-slides .sl.on { animation: none; } }
.gp-photos { max-width: 1280px; margin: 0 auto; padding-top: 34px; }
.gp-photos .gp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gp-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: 8px; margin-top: 10px; }
.gp-ph { position: relative; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: #ddd; }
.gp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.gp-ph:hover img { transform: scale(1.06); }
.gp-ph > span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; font: 600 12.5px/1.3 var(--font); color: #fff; text-align: left; background: linear-gradient(180deg, transparent, rgba(0,0,0,.65)); opacity: 0; transition: opacity .3s; }
.gp-ph:hover > span, .gp-ph:focus-visible > span { opacity: 1; }
.gp-ph.m0 { grid-column: span 3; grid-row: span 3; } .gp-ph.m1 { grid-column: span 3; grid-row: span 2; } .gp-ph.m2 { grid-column: span 2; grid-row: span 2; }
.gp-ph.m3 { grid-column: span 1; grid-row: span 1; } .gp-ph.m4 { grid-column: span 2; grid-row: span 2; } .gp-ph.m5 { grid-column: span 2; grid-row: span 2; }
.gp-ph.m6, .gp-ph.m7, .gp-ph.m8, .gp-ph.m9, .gp-ph.m10 { grid-column: span 2; grid-row: span 2; }
.gp-ph.m3 { grid-column: span 1; grid-row: span 2; }
@media (max-width: 760px) { .gp-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; } .gp-ph[class*=" m"] { grid-column: span 1; grid-row: span 1; } .gp-ph.m0 { grid-column: span 2; grid-row: span 2; } .gp-ph > span { opacity: 1; } .gp-stats { grid-template-columns: 1fr 1fr; row-gap: 18px; } }
/* racconto: foto e testo alternati */
.sp-blocks .gp-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; margin: 0 0 34px; }
.sp-blocks .gp-story.has-ph { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.sp-blocks .gp-story.has-ph:nth-of-type(even) .gp-sfig { order: 2; }
.gp-sfig { position: relative; border: 0; padding: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; background: #ddd; aspect-ratio: 4 / 3; box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.gp-sfig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.gp-sfig:hover img { transform: scale(1.05); }
.gp-sfig > span { position: absolute; left: 12px; bottom: 10px; right: 12px; font: 600 12.5px/1.3 var(--font); color: #fff; text-align: left; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.gp-stx h3 { font-size: clamp(20px, 2.2vw, 28px); margin: 0 0 8px; }
@media (max-width: 860px) { .sp-blocks .gp-story.has-ph { grid-template-columns: 1fr; } .sp-blocks .gp-story.has-ph:nth-of-type(even) .gp-sfig { order: 0; } }
/* nastro dei luoghi */
.gp-railwrap { position: relative; }
.gp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 22%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; }
.gp-rail > * { scroll-snap-align: start; }
.gp-arr { position: absolute; top: 34%; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: var(--geo-red); font: 800 24px/1 var(--font); box-shadow: 0 4px 16px rgba(0,0,0,.2); cursor: pointer; }
.gp-arr.l { left: -12px; } .gp-arr.r { right: -12px; }
@media (max-width: 760px) { .gp-rail { grid-auto-columns: 72%; } .gp-arr { display: none; } }
/* visualizzatore foto */
#pv { position: fixed; inset: 0; z-index: 9200; background: rgba(15,12,10,.96); display: flex; align-items: center; justify-content: center; }
#pv.hidden { display: none; }
#pv figure { margin: 0; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#pv img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 6px; opacity: 0; transition: opacity .35s; }
#pv img.in { opacity: 1; }
#pv figcaption { color: #fff; font: 500 14px/1.4 var(--font); text-align: center; max-width: 70ch; }
.pv-x, .pv-n { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; cursor: pointer; }
.pv-x { top: 16px; right: 16px; font-size: 18px; }
.pv-n.prev { left: 16px; } .pv-n.next { right: 16px; }
.pv-n:hover, .pv-x:hover { background: var(--geo-red); }
.pv-c { position: absolute; top: 26px; left: 24px; color: rgba(255,255,255,.7); font: 600 13px var(--font); }
/* scheda Livenza con foto */
.lv-list li.ph { grid-template-columns: 54px 1fr auto; }
.lv-ph { width: 46px; height: 46px; border-radius: 10px; background: #ccc center / cover; grid-row: 1 / span 2; align-self: center; box-shadow: 0 0 0 2px #fff; }
.lv-list li.here .lv-ph { box-shadow: 0 0 0 3px var(--geo-red); }

/* ---------------- Pagina del geosito: due colonne e collegamenti ---------------- */
.gp-mosaic { grid-auto-flow: dense; }
.gp-layout { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; padding: 0 max(16px, 3vw); align-items: start; }
.gp-main { min-width: 0; }
.gp-main > section { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
.gp-side { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; padding: 30px 2px 30px 0; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; }
.gp-side h3 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--geo-ink-soft); }
.gp-side section { background: #fff; border-radius: 14px; padding: 14px 14px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.gs-tour { position: relative; display: block; width: 100%; height: 120px; border: 0; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; background: #333; }
.gs-tour span { position: absolute; inset: 0; background: center / cover; transition: transform .6s; }
.gs-tour:hover span { transform: scale(1.06); }
.gs-tour b { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; color: #fff; font: 800 15px var(--font); text-align: left; background: linear-gradient(180deg, transparent, rgba(187,49,27,.92)); }
.gs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gs-list li + li { border-top: 1px solid rgba(43,36,32,.08); }
.gs-list a { display: block; padding: 8px 18px 8px 0; color: var(--geo-ink); text-decoration: none; font-size: 14px; line-height: 1.35; font-weight: 600; position: relative; }
.gs-list a::after { content: '›'; position: absolute; right: 2px; top: 7px; color: var(--geo-red); font-weight: 800; }
.gs-list a[target]::after { content: ''; }
.gs-list a:hover { color: var(--geo-red-dark); }
.gs-list.sm a { font-size: 13px; font-weight: 500; padding: 6px 18px 6px 0; }
.gs-sites { display: flex; flex-direction: column; gap: 8px; }
.gs-site { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 10px; text-decoration: none; color: var(--geo-ink); align-items: center; }
.gs-site span { grid-row: 1 / span 2; width: 64px; height: 48px; border-radius: 8px; background: center / cover; }
.gs-site b { font-size: 14px; line-height: 1.2; }
.gs-site small { font-size: 12px; color: var(--geo-ink-soft); }
.gs-site:hover b { color: var(--geo-red-dark); }
.gs-explore { display: flex; flex-direction: column; gap: 2px; }
.gs-explore a { color: var(--geo-ink); text-decoration: none; font-size: 14px; padding: 6px 4px; border-radius: 8px; }
.gs-explore a:hover { background: var(--geo-cream); color: var(--geo-red-dark); }
a.il { color: var(--geo-red-dark); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; font-weight: 600; }
a.il:hover { background: rgba(187,49,27,.08); border-radius: 3px; }
.gp-story .gp-sfig { position: sticky; top: 130px; }
.sp-blocks .gp-story.has-ph { align-items: start; }
@media (max-width: 1180px) { .gp-layout { grid-template-columns: 1fr; padding: 0 max(16px, 5vw); } .gp-side { position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding-top: 10px; } .gp-story .gp-sfig { position: relative; top: 0; } }

/* ---------------- Home: immagini dal drone e delle grotte ---------------- */
.slide.photo { background-size: cover; background-repeat: no-repeat; background-position: center; filter: none; }
.slide.photo.on { animation: heroKen 9s ease-out both; }
@keyframes heroKen { from { transform: scale(1.14); } to { transform: scale(1.02); } }
#home .hero .slide-cap { position: absolute; z-index: 3; right: max(16px, 5vw); bottom: 18px; margin: 0; font: 600 12.5px var(--font); color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
html.a11y-motion .slide.photo.on { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .slide.photo.on { animation: none; } }
@media (max-width: 640px) { #home .hero .slide-cap { bottom: 8px; font-size: 11px; } }
#home .hero .slide-cap { right: auto; left: max(16px, 5vw); bottom: 16px; }
.gp-ph.m4, .gp-ph.m5, .gp-ph.m9, .gp-ph.m10 { grid-column: span 3; grid-row: span 2; }
.gp-ph.m6, .gp-ph.m7, .gp-ph.m8 { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) { .gp-ph[class*=" m"] { grid-column: span 1 !important; grid-row: span 1 !important; } .gp-ph.m0 { grid-column: span 2 !important; grid-row: span 2 !important; } }

/* ---------------- Grotte principali: scheda interna in primo piano, catasto ridotto ---------------- */
.cave-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cc-main { font-size: 16px; padding: 14px 22px; }
.cc-main b { font-weight: 800; }
.cat-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--geo-ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.cat-mini .cat-ico svg { width: 16px; height: 16px; color: var(--geo-ink-soft); }
.cat-mini:hover { color: var(--geo-red-dark); }
.cc-all { margin-top: 26px; }
.cc-all h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--geo-ink-soft); margin: 0 0 10px; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cc-chip { display: flex; align-items: center; gap: 10px; border: 0; background: #fff; border-radius: 12px; padding: 8px; cursor: pointer; text-align: left; box-shadow: 0 3px 12px rgba(0,0,0,.06); font-family: var(--font); color: var(--geo-ink); transition: transform .15s, box-shadow .15s; }
.cc-chip:hover, .cc-chip:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.cc-chip .im { flex: none; width: 58px; height: 44px; border-radius: 8px; background: #ccc center / cover; }
.cc-chip .tx { display: flex; flex-direction: column; min-width: 0; }
.cc-chip b { font-size: 14px; line-height: 1.25; }
.cc-chip small { font-size: 12px; color: var(--geo-ink-soft); }
.cc-all { margin-bottom: 30px; }

/* ---------------- In barca sulla sorgente ---------------- */
#boat { position: fixed; inset: 0; z-index: 9050; background: #0b1a1c; color: #fff; opacity: 0; transition: opacity .6s; font-family: var(--font); }
#boat.in { opacity: 1; }
.bt-stage { position: absolute; inset: 0; }
.bt-veil { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(11,26,28,.55), rgba(11,26,28,.92)); transition: opacity 1.4s ease; pointer-events: none; text-align: center; padding: 24px; }
.bt-veil.out { opacity: 0; }
.bt-veil div { max-width: 560px; display: flex; flex-direction: column; gap: 10px; animation: btRise 1.6s ease both; }
.bt-veil small, .bt-top small { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8fe0d4; }
.bt-veil b { font-size: clamp(30px, 5vw, 54px); line-height: 1.05; }
.bt-veil span { font-size: 17px; line-height: 1.5; opacity: .9; }
@keyframes btRise { from { opacity: 0; transform: translateY(18px); } }
.bt-top { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); }
.bt-top div { display: flex; flex-direction: column; }
.bt-top b { font-size: 18px; }
.bt-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 18px; cursor: pointer; }
.bt-x:hover { background: var(--geo-red); }
.bt-cap { position: absolute; z-index: 4; left: 18px; bottom: 150px; max-width: min(520px, calc(100% - 36px)); background: rgba(11,26,28,.72); backdrop-filter: blur(8px); border-left: 4px solid #3cc4b0; border-radius: 12px; padding: 12px 16px; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; }
.bt-cap.show { opacity: 1; transform: none; }
.bt-n { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #8fe0d4; }
.bt-t { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.bt-f { margin: 8px 0 0; font-size: 14px; line-height: 1.45; opacity: .9; }
.bt-bar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 10px 18px 16px; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.25) 70%, transparent); display: flex; flex-direction: column; gap: 8px; }
.bt-ctl { display: flex; gap: 8px; align-items: center; }
.bt-ctl button { height: 40px; min-width: 40px; border-radius: 999px; border: 0; background: rgba(255,255,255,.16); color: #fff; font: 700 15px var(--font); cursor: pointer; padding: 0 12px; }
.bt-ctl button:hover, .bt-ctl button:focus-visible { background: #2a9d8f; outline: none; }
.bt-ctl .bt-play { background: #2a9d8f; min-width: 52px; font-size: 18px; }
.bt-ctl .bt-down.on { background: #3cc4b0; color: #062; }
.bt-line { position: relative; }
.bt-water { position: relative; height: 6px; border-radius: 6px; background: rgba(255,255,255,.18); margin: 4px 22px 10px; }
.bt-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #2a9d8f, #8fe0d4); transition: width 1.2s ease; }
.bt-boat { position: absolute; top: -17px; left: 0; transform: translateX(-50%); font-size: 22px; transition: left 1.2s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.bt-dots { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bt-dots::-webkit-scrollbar { display: none; }
.bt-dots button { position: relative; flex: none; width: 92px; height: 46px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: #000; opacity: .55; transition: opacity .3s, border-color .3s; }
.bt-dots button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-dots button span { position: absolute; left: 4px; top: 2px; font: 800 11px var(--font); color: #fff; text-shadow: 0 1px 3px #000; }
.bt-dots button.done { opacity: .8; }
.bt-dots button.on { opacity: 1; border-color: #3cc4b0; }
.bt-dots button:hover { opacity: 1; }
@media (max-width: 640px) { .bt-cap { bottom: 140px; left: 10px; } .bt-t { font-size: 15px; } .bt-down span { display: none; } .bt-dots button { width: 70px; height: 36px; } }
/* sezione nella pagina del Molinetto */
.gp-boat { max-width: 1280px; margin: 0 auto; padding-top: 30px; }
.gb-card { position: relative; display: block; width: 100%; height: clamp(260px, 38vw, 420px); border: 0; padding: 0; border-radius: 20px; overflow: hidden; cursor: pointer; text-align: left; background: #0b1a1c; box-shadow: 0 16px 44px rgba(0,0,0,.2); }
.gb-pano { position: absolute; inset: 0; background-size: auto 100%; background-repeat: repeat-x; animation: gbPan 60s linear infinite; }
@keyframes gbPan { from { background-position: 0 50%; } to { background-position: -200vh 50%; } }
.gb-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,24,26,.85), rgba(8,24,26,.25) 60%, transparent); }
.gb-tx { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 clamp(20px, 4vw, 48px); max-width: 560px; color: #fff; font-family: var(--font); }
.gb-tx small { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8fe0d4; }
.gb-tx b { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.05; }
.gb-tx span { font-size: 15.5px; line-height: 1.5; opacity: .92; }
.gb-tx i { font-style: normal; align-self: flex-start; margin-top: 6px; background: #2a9d8f; padding: 10px 18px; border-radius: 999px; font-weight: 800; font-size: 15px; transition: background .2s; }
.gb-card:hover .gb-tx i { background: var(--geo-red); }
.gp-media.boat { background: #1d5f63; }
.a11y-motion .gb-pano { animation: none; }
@media (prefers-reduced-motion: reduce) { .gb-pano { animation: none; } }
.bt-ctl button { display: inline-grid; place-items: center; grid-auto-flow: column; gap: 6px; }
.gb-card { background-color: #12393c; }
.gb-pano { background-color: #12393c; }

/* ---------- Video in evidenza nella pagina del geosito ---------- */
.gp-film { max-width: 1280px; margin: 0 auto; padding-top: 26px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.gf-player { position: relative; border-radius: 18px; overflow: hidden; background: #111; aspect-ratio: 16 / 9; box-shadow: 0 18px 40px rgba(43,36,32,.22); }
.gf-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }
.gf-cover { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45)); color: #fff; }
.gf-ring { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: var(--geo-red); box-shadow: 0 0 0 10px rgba(255,255,255,.22), 0 10px 30px rgba(0,0,0,.35); transition: transform .2s; }
.gf-ring svg { width: 36px; height: 36px; margin-left: 5px; }
.gf-cover:hover .gf-ring, .gf-cover:focus-visible .gf-ring { transform: scale(1.08); }
.gf-cover:focus-visible { outline: 4px solid #fff; outline-offset: -8px; }
.gf-badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; font: 800 11.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); padding: 6px 11px; border-radius: 999px; pointer-events: none; }
.gf-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a3c; animation: gfBlink 1.4s infinite; }
@keyframes gfBlink { 50% { opacity: .25; } }
.gp-film.full .gf-cover, .gp-film.full .gf-badge { display: none; }
.gp-film.full .gf-v { object-fit: contain; }
.gf-tx .k { font: 800 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--geo-red); }
.gf-tx h2 { margin: 6px 0 10px; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; }
.gf-tx p { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--geo-ink-soft); }
.gf-tx .hero-cta small { font-size: .85em; opacity: .85; font-weight: 600; }
@media (max-width: 860px) { .gp-film { grid-template-columns: 1fr; gap: 16px; } .gf-ring { width: 70px; height: 70px; } }
@media (prefers-reduced-motion: reduce) { .gf-badge .dot { animation: none; } }

/* ---------- Box "Sorgenti del Fiume Livenza" (pagina del geosito) ---------- */
.gp-lv { padding-top: 34px; }
.lvb { background: linear-gradient(160deg, #0f4c6b 0%, #1f6f97 60%, #2a87b3 100%); color: #fff; border-radius: 22px; padding: clamp(20px, 3vw, 34px); position: relative; overflow: hidden; }
.lvb::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='240' viewBox='0 0 600 240' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.4'%3E%3Cpath d='M0 40c100-30 200 30 300 0s200-30 300 0M0 90c100-30 200 30 300 0s200-30 300 0M0 140c100-30 200 30 300 0s200-30 300 0M0 190c100-30 200 30 300 0s200-30 300 0'/%3E%3C/svg%3E"); pointer-events: none; }
.lvb > * { position: relative; }
.lvb-head { max-width: 820px; margin-bottom: 22px; }
.lvb .lv-k { color: #bfe6f7; }
.lvb-head h2 { margin: 6px 0 10px; font-size: clamp(22px, 2.6vw, 32px); color: #fff; }
.lvb-head p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.9); }
.lvb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lvb-c { display: flex; flex-direction: column; background: #fff; color: var(--geo-ink); border-radius: 16px; overflow: hidden; text-decoration: none; box-shadow: 0 10px 26px rgba(0,0,0,.18); transition: transform .18s, box-shadow .18s; }
a.lvb-c:hover, a.lvb-c:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.28); }
a.lvb-c:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lvb-c .im { position: relative; aspect-ratio: 4 / 3; background: #9bb center / cover; }
.lvb-c .tag { position: absolute; left: 10px; top: 10px; font: 800 11.5px var(--font); letter-spacing: .04em; color: #fff; background: rgba(15,76,107,.88); padding: 5px 10px; border-radius: 999px; }
.lvb-c .tag.here { background: var(--geo-red); }
.lvb-c .cr { position: absolute; right: 8px; bottom: 6px; font: italic 500 10.5px var(--font); color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.lvb-c .tx { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px 15px; flex: 1; }
.lvb-c .tx small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1f6f97; }
.lvb-c.here .tx small { color: var(--geo-red); }
.lvb-c .tx b { font-size: 17px; line-height: 1.25; }
.lvb-c .rg { font-size: 13px; color: var(--geo-ink-soft); display: flex; align-items: center; gap: 6px; }
.lvb-c .rg::before { content: ''; width: 18px; height: 8px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M0 4h18' stroke='%231f6f97' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.lvb-c .rg.flood::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M0 7h5l2-6 2 6h9' fill='none' stroke='%231f6f97' stroke-width='2'/%3E%3C/svg%3E"); }
.lvb-c .go { margin-top: auto; padding-top: 8px; font-weight: 800; font-size: 13.5px; color: #1f6f97; }
.lvb-c.here { box-shadow: 0 0 0 3px var(--geo-red), 0 10px 26px rgba(0,0,0,.18); }
@media (max-width: 860px) { .lvb-cards { grid-template-columns: 1fr; } .lvb-c { flex-direction: row; } .lvb-c .im { aspect-ratio: auto; width: 38%; min-height: 128px; flex: none; } }
.gp-main > section, .gp-film, .gp-lv { scroll-margin-top: 70px; }

/* ---------- Barca: frecce sull'acqua, bussola, suggerimento ---------- */
.bt-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: #fff; filter: drop-shadow(0 3px 8px rgba(0,0,0,.55)); transition: transform .2s; }
.bt-arrow svg { width: 86px; height: 54px; animation: btPulse 1.6s ease-in-out infinite; }
.bt-arrow.bw svg { width: 58px; height: 36px; transform: rotate(180deg); animation: none; opacity: .75; }
.bt-arrow em { font: 800 12px var(--font); font-style: normal; letter-spacing: .1em; text-transform: uppercase; background: rgba(11,26,28,.7); padding: 3px 9px; border-radius: 999px; }
.bt-arrow.bw em { font-size: 10.5px; opacity: .85; }
.bt-arrow:hover { transform: scale(1.12); }
.bt-arrow.fw:hover svg, .bt-arrow.fw svg { color: #8fe0d4; }
@keyframes btPulse { 0%, 100% { transform: translateY(4px); opacity: .85; } 50% { transform: translateY(-6px); opacity: 1; } }
.bt-poi { display: inline-block; font: 800 12px var(--font); color: #fff; background: rgba(187,49,27,.88); padding: 4px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.35); position: relative; }
.bt-poi::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 2px; height: 10px; background: rgba(255,255,255,.8); }
.bt-compass { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: rgba(0,0,0,.25); margin-left: auto; margin-right: 10px; }
.bt-compass::before { content: ''; position: absolute; left: 50%; top: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #8fe0d4; }
.bt-needle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -13px 0 0 -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 16px solid #fff; transform-origin: 6px 13px; transition: transform .15s; }
.bt-compass.ahead { border-color: #8fe0d4; }
.bt-hint { position: absolute; z-index: 4; left: 50%; top: 84px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 32px); background: rgba(11,26,28,.8); color: #fff; font: 700 15px var(--font); padding: 10px 16px; border-radius: 999px; text-align: center; animation: btRise .8s ease both; }
.bt-fbtn { margin-top: 8px; border: 0; background: rgba(143,224,212,.18); color: #8fe0d4; font: 800 13px var(--font); padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.bt-fbtn[aria-expanded="true"] { background: #3cc4b0; color: #062; }
.bt-ctl .bt-go { background: #3cc4b0; color: #062; font-weight: 800; }
.bt-ctl .bt-play { min-width: 0; font-size: 14px; background: rgba(255,255,255,.16); }
.bt-ctl .bt-play.on { background: #2a9d8f; }
.bt-ctl button:disabled { opacity: .35; cursor: default; }
@media (max-width: 640px) { .bt-ctl .bt-play span, .bt-ctl .bt-go span { display: none; } .bt-hint { top: 74px; font-size: 13px; } }

/* ---------- Home: video di sfondo e "storie" dei tre geositi (layout B) ---------- */
#home .hero { min-height: min(100vh, 900px); }
.hs-poster { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1.2s ease; }
.hs-poster.on { opacity: 1; animation: heroKen 12s ease-out both; }
.hs-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
#slides.vid .hs-video { opacity: 1; }
#home .hero .slides::after { background: linear-gradient(90deg, rgba(20,16,14,.62), rgba(20,16,14,0) 62%), linear-gradient(0deg, rgba(20,16,14,.7), rgba(20,16,14,0) 42%), linear-gradient(180deg, rgba(20,16,14,.35), transparent 22%); }
#home .hero .claim { margin-top: auto; padding-bottom: 26px; }
.hs-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hs-cta .hero-cta { margin-top: 16px; }
.hs-stories { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 18px; align-items: center; padding: 6px 0 4px; }
.hs-st { display: flex; align-items: center; gap: 14px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; padding: 4px; border-radius: 16px; font-family: var(--font); min-width: 0; }
.hs-st > i { flex: none; width: 74px; height: 74px; border-radius: 50%; background: center / cover; box-shadow: 0 0 0 3px rgba(255,255,255,.85); transition: box-shadow .3s, transform .3s; }
.hs-st.on > i { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--geo-red); transform: scale(1.04); }
.hs-st:hover > i { transform: scale(1.06); }
.hs-st:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hs-st > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-st b { font-size: 17px; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hs-st small { font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.hs-st .bar { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); margin-top: 8px; overflow: hidden; }
.hs-st .bar i { display: block; height: 100%; width: 0; background: #fff; }
.hs-st:not(.on) { opacity: .82; }
.hs-pp { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); background: rgba(0,0,0,.25); color: #fff; font-size: 13px; cursor: pointer; }
#home .hero .slide-cap { bottom: auto; top: 112px; left: auto; right: clamp(16px, 5vw, 64px); max-width: 420px; text-align: right; }
#home .hero .badge360 { top: 150px !important; }
#home .hero .badge360 { bottom: auto; top: 140px; }
@media (max-width: 860px) {
  .hs-stories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hs-st { flex-direction: column; text-align: center; gap: 6px; }
  .hs-st > i { width: 58px; height: 58px; }
  .hs-st b { font-size: 13px; } .hs-st small { display: none; }
  .hs-pp { display: none; }
  #home .hero .slide-cap { display: none; }
  #home .hero .badge360 { display: none; }
}
html.a11y-motion .hs-poster.on { animation: none; }
@media (prefers-reduced-motion: reduce) { .hs-poster.on { animation: none; } }
/* Barca: punto in cui sgorga la sorgente */
.bt-src { position: relative; display: grid; place-items: center; width: 260px; height: 120px; cursor: pointer; }
.bt-src .ring { position: absolute; left: 50%; top: 50%; width: 70px; height: 26px; margin: -13px 0 0 -35px; border-radius: 50%; border: 3px solid #8fe0d4; box-shadow: 0 0 18px rgba(143,224,212,.8); animation: btRing 2.4s ease-out infinite; }
.bt-src .ring.r2 { animation-delay: 1.2s; }
@keyframes btRing { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.bt-src em { position: relative; margin-top: -84px; font: 800 13px var(--font); font-style: normal; color: #062; background: #8fe0d4; padding: 6px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.bt-src:hover em { background: #fff; }
.bt-spring { position: absolute; z-index: 6; right: 18px; top: 84px; width: min(400px, calc(100% - 36px)); background: rgba(11,26,28,.9); backdrop-filter: blur(10px); border: 1px solid rgba(143,224,212,.45); border-radius: 18px; padding: 18px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.45); animation: btRise .6s ease both; }
.bt-sk { font: 800 12px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #8fe0d4; }
.bt-st { display: block; font-size: 21px; line-height: 1.2; margin: 6px 0 8px; }
.bt-sp { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; opacity: .92; }
.bt-sbtn { display: flex; gap: 8px; flex-wrap: wrap; }
.bt-sbtn button { border: 0; border-radius: 999px; padding: 10px 16px; font: 800 14px var(--font); cursor: pointer; background: rgba(255,255,255,.15); color: #fff; }
.bt-sbtn .bt-dive { background: #3cc4b0; color: #062; font-size: 15px; }
.bt-sbtn .bt-dive:hover { background: #8fe0d4; }
@media (max-width: 640px) { .bt-spring { top: auto; bottom: 150px; right: 10px; left: 10px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .bt-src .ring { animation: none; } }

/* ---------- Pannello dell'audiodescrizione (globale) ---------- */
#adBar { position: fixed; right: 16px; bottom: 16px; z-index: 9600; width: min(440px, calc(100% - 32px)); max-height: min(62vh, 560px); display: flex; flex-direction: column;
  background: #fffdf9; color: var(--geo-ink); border: 2px solid var(--geo-red); border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.35); padding: 12px 14px; font-family: var(--font); transform: none; }
#adBar .ad-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#adBar .ad-k { font-weight: 800; color: var(--geo-red-dark); font-size: 14.5px; }
#adBar .ad-where { font-size: 12px; font-weight: 700; color: var(--geo-ink-soft); text-transform: uppercase; letter-spacing: .06em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#adBar .ad-ctl { width: 100%; display: flex; flex-wrap: wrap; gap: 5px; }
#adBar .ad-ctl button { padding: 5px 10px; font-size: 12.5px; }
#adBar .ad-ctl [data-ad-pause], #adBar .ad-ctl [data-ad-min], #adBar .ad-ctl .ad-x { width: 32px; padding: 0; height: 30px; }
#adBar:not([data-kind="tour"]) .ad-tour { display: none; }
#adBar .ad-body { overflow-y: auto; margin-top: 8px; padding-right: 4px; }
#adBar .ad-title { margin: 0 0 4px; font-size: 17px; line-height: 1.25; }
#adBar .ad-text { margin: 0 0 10px; font-size: 15px; line-height: 1.55; max-height: none; white-space: pre-line; }
#adBar .ad-secs small { display: block; font-size: 12px; font-weight: 800; color: var(--geo-red); margin: 4px 0 6px; }
#adBar .ad-secs ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: s; }
#adBar .ad-secs li button { width: 100%; text-align: left; border: 1px solid rgba(187,49,27,.25); background: #fff; border-radius: 10px; padding: 7px 10px; font: 600 13.5px var(--font); color: var(--geo-ink); cursor: pointer; }
#adBar .ad-secs li button::before { counter-increment: s; content: counter(s) ". "; color: var(--geo-red); font-weight: 800; }
#adBar .ad-secs li button:hover, #adBar .ad-secs li button:focus-visible { background: var(--geo-red); color: #fff; outline: 3px solid var(--geo-red-dark); outline-offset: 1px; }
#adBar .ad-secs li button:hover::before { color: #fff; }
#adBar.min { width: auto; max-height: none; padding: 8px 10px; }
#adBar.min .ad-body, #adBar.min .ad-ctl button:not([data-ad-min]):not(.ad-x):not([data-ad-pause]):not([data-ad-repeat]) { display: none; }
#adBar.min .ad-ctl { width: auto; }
html.a11y-contrast #adBar { background: #fff; border-color: #000; }
@media (max-width: 640px) { #adBar { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 48vh; } }

/* ---------- Utilità ---------- */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Menu principale ---------- */
.menu-btn { display: inline-flex; align-items: center; gap: 6px; width: auto !important; padding: 0 12px; }
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn span { font: 800 13.5px var(--font); }
#home .hero .menu-btn { background: rgba(255,255,255,.85); color: var(--geo-ink); border-radius: 999px; height: 40px; border: 0; cursor: pointer; }
#mainMenu { position: fixed; inset: 0; z-index: 9700; }
#mainMenu[hidden] { display: none; }
.mm-shade { position: absolute; inset: 0; background: rgba(20,16,14,.5); backdrop-filter: blur(3px); animation: mmFade .25s ease both; }
.mm-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--geo-cream); color: var(--geo-ink); overflow-y: auto; padding: 18px 24px 40px; box-shadow: -20px 0 50px rgba(0,0,0,.25); animation: mmIn .3s cubic-bezier(.2,.7,.2,1) both; font-family: var(--font); }
@keyframes mmIn { from { transform: translateX(40px); opacity: 0; } }
@keyframes mmFade { from { opacity: 0; } }
.mm-panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mm-panel header b { font-size: 18px; }
.mm-x { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; font-size: 17px; cursor: pointer; }
.mm-x:hover { background: var(--geo-red); color: #fff; }
.mm-panel section { padding: 14px 0; border-top: 1px solid rgba(43,36,32,.12); }
.mm-panel h2 { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--geo-red); }
.mm-panel ul { list-style: none; margin: 0; padding: 0; }
.mm-panel a { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; color: var(--geo-ink); text-decoration: none; font-weight: 700; font-size: 15.5px; }
.mm-panel a:hover, .mm-panel a:focus-visible { background: #fff; color: var(--geo-red); outline: none; box-shadow: inset 3px 0 0 var(--geo-red); }
.mm-panel a.mm-main { font-size: 17px; font-weight: 800; }
.mm-panel ul ul { margin: 0 0 8px 10px; padding-left: 10px; border-left: 2px solid rgba(187,49,27,.2); }
.mm-panel ul ul a { font-size: 14px; font-weight: 600; padding: 5px 10px; }
html.mm-open, html.mm-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mm-panel, .mm-shade { animation: none; } }
@media (max-width: 640px) { #home .hero .menu-btn span { display: none; } }

/* ---------- Footer: menu ---------- */
.foot-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-bottom: 22px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.15); width: 100%; text-align: left; }
.foot-menu h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.foot-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.foot-menu a { color: inherit; text-decoration: none; font-size: 14px; opacity: .92; }
.foot-menu a:hover { text-decoration: underline; opacity: 1; }
@media (max-width: 760px) { .foot-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Home: banda scuole ---------- */
.school-band { padding: 10px clamp(16px, 5vw, 64px) 46px; }
.sb-in { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: center; background: #fff; border-radius: 24px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 10px 30px rgba(43,36,32,.08); }
.sb-tx .k { font: 800 12px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--geo-red); }
.sb-tx h2 { margin: 6px 0 10px; font-size: clamp(24px, 3vw, 36px); }
.sb-tx p { margin: 0; line-height: 1.55; color: var(--geo-ink-soft); }
.sb-tx .hero-cta { text-decoration: none; }
.sb-tx .hero-cta .ico { font-size: 22px; }
.sb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sb-tiles a { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 16px; background: var(--geo-cream); color: var(--geo-ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.sb-tiles a:hover, .sb-tiles a:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.1); outline: none; }
.sb-tiles b { font-size: 26px; }
.sb-tiles span { font-weight: 800; font-size: 16px; }
.sb-tiles small { color: var(--geo-ink-soft); font-size: 13px; }
@media (max-width: 860px) { .sb-in { grid-template-columns: 1fr; } }

/* ---------- Pagine di servizio ---------- */
.pg { max-width: 1280px; margin: 0 auto; padding: 28px clamp(16px, 5vw, 64px) 60px; color: var(--geo-ink); }
.pg-head .k { font: 800 12px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--geo-red); }
.pg-head h1 { margin: 6px 0 10px; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; }
.pg-intro p { max-width: 820px; font-size: 16.5px; line-height: 1.55; color: var(--geo-ink-soft); margin: 0 0 16px; }
.pg h2 { font-size: 24px; margin: 30px 0 12px; }
/* mediateca */
.mv-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mv-sum span { background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.mv-sum span.bad { background: #fde8e4; color: var(--geo-red-dark); }
.mv-filt { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-filt button { border: 1px solid rgba(43,36,32,.15); background: #fff; border-radius: 999px; padding: 7px 14px; font: 700 13.5px var(--font); cursor: pointer; }
.mv-filt button[aria-pressed="true"] { background: var(--geo-red); color: #fff; border-color: var(--geo-red); }
.mv-filt .mv-csv { margin-left: auto; }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.mv-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.07); display: flex; flex-direction: column; }
.mv-card.missing { outline: 2px dashed var(--geo-red); }
.mv-media { position: relative; aspect-ratio: 16 / 9; background: #111; }
.mv-media video { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }
.mv-360 { position: absolute; inset: 0; z-index: 2; border: 0; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 8px; color: #fff; font: 800 15px var(--font); background: radial-gradient(circle, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.mv-360 .ring { width: 70px; height: 70px; border-radius: 50%; border: 2px dashed #fff; display: grid; place-items: center; animation: spin 14s linear infinite; }
.mv-badge { position: absolute; left: 10px; top: 10px; z-index: 3; font: 800 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.6); padding: 4px 9px; border-radius: 999px; pointer-events: none; }
.k-360 .mv-badge { background: #1f6f97; } .k-prev .mv-badge { background: #6b5f57; } .k-bg .mv-badge { background: #3f6b3a; } .k-doc .mv-badge { background: var(--geo-red); }
.mv-tx { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.mv-tx small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--geo-red); }
.mv-tx b { font-size: 16.5px; }
.mv-tx p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--geo-ink-soft); }
.mv-tx dl { display: flex; gap: 16px; margin: 6px 0 2px; }
.mv-tx dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--geo-ink-soft); }
.mv-tx dd { margin: 0; font-weight: 800; font-size: 14px; }
.mv-st.good { color: #2a7d3a; } .mv-st.bad { color: var(--geo-red); }
.mv-file code { font-size: 12px; background: var(--geo-cream); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.mv-ok { margin-top: 6px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mv-ok input { width: 18px; height: 18px; accent-color: var(--geo-red); }
/* scuole */
.sk-tabs { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 0; z-index: 3; background: var(--geo-cream); padding: 10px 0; }
.sk-tabs button { border: 1px solid rgba(43,36,32,.15); background: #fff; border-radius: 999px; padding: 9px 18px; font: 800 14.5px var(--font); cursor: pointer; }
.sk-tabs button[aria-selected="true"] { background: var(--geo-red); border-color: var(--geo-red); color: #fff; }
.sk-lead { color: var(--geo-ink-soft); margin: -4px 0 16px; max-width: 820px; }
.sk-kit { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,.07); margin-bottom: 22px; border-top: 6px solid var(--kc); }
.sk-kit > header { padding: 20px 24px 6px; }
.sk-kit .k { font: 800 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--kc); }
.sk-kit h3 { margin: 4px 0 8px; font-size: 24px; }
.sk-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--geo-ink-soft); font-size: 14px; }
.sk-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; padding: 10px 24px 16px; }
.sk-kit h4 { margin: 8px 0 6px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.sk-kit h4 span { width: 24px; height: 24px; border-radius: 50%; background: var(--kc); color: #fff; display: grid; place-items: center; font-size: 13px; }
.sk-kit ul { margin: 0; padding-left: 18px; line-height: 1.5; font-size: 14.5px; }
.sk-kit li { margin-bottom: 4px; }
.sk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sk-lv { padding: 12px 24px 16px; background: var(--geo-cream); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sk-lv h4 { grid-column: 1 / -1; margin: 0; }
.sk-lv b { font-size: 13.5px; color: var(--kc); }
.sk-lv p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.sk-kit footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 14px 24px 20px; }
.sk-res, .sk-act, .sk-fbtn { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-kit footer button, .sk-fbtn button, .sk-qc button { border: 1px solid rgba(43,36,32,.15); background: #fff; border-radius: 999px; padding: 8px 14px; font: 700 13.5px var(--font); cursor: pointer; color: var(--geo-ink); }
.sk-act button, .sk-qc button:first-of-type { background: var(--geo-red); color: #fff; border-color: var(--geo-red); }
.sk-kit footer button:hover, .sk-fbtn button:hover, .sk-qc button:hover { box-shadow: 0 0 0 3px rgba(187,49,27,.25); }
@media (max-width: 900px) { .sk-cols, .sk-steps, .sk-lv { grid-template-columns: 1fr; } }
.sk-qpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.sk-qc { background: #fff; border-radius: 16px; padding: 16px; border-left: 6px solid var(--kc); display: flex; flex-direction: column; gap: 6px; }
.sk-qc b { font-size: 16.5px; } .sk-qc span { color: var(--geo-ink-soft); font-size: 13.5px; }
.sk-qc div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sk-qbox { margin-top: 18px; background: #fff; border-radius: 20px; padding: 20px 24px; box-shadow: 0 6px 22px rgba(0,0,0,.08); }
.sk-qhead { display: flex; justify-content: space-between; color: var(--kc); font-weight: 800; }
.sk-qprog { height: 6px; background: var(--geo-cream); border-radius: 6px; margin: 10px 0 14px; overflow: hidden; }
.sk-qprog i { display: block; height: 100%; background: var(--geo-red); transition: width .4s; }
.sk-qbox h3 { font-size: 21px; margin: 0 0 14px; outline: none; }
.sk-ans { display: grid; gap: 8px; }
.sk-ans button { display: flex; align-items: center; gap: 12px; text-align: left; border: 2px solid rgba(43,36,32,.12); background: #fff; border-radius: 14px; padding: 12px 14px; font: 600 15.5px var(--font); cursor: pointer; color: var(--geo-ink); }
.sk-ans button span { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--geo-cream); display: grid; place-items: center; font-weight: 800; }
.sk-ans button:hover:not(:disabled) { border-color: var(--geo-red); }
.sk-ans button.ok { border-color: #2a7d3a; background: #e8f5ea; } .sk-ans button.no { border-color: var(--geo-red); background: #fde8e4; }
.sk-fb { font-weight: 700; min-height: 1.5em; } .sk-fb button { margin-left: 10px; border: 0; background: var(--geo-red); color: #fff; border-radius: 999px; padding: 7px 14px; font: 800 14px var(--font); cursor: pointer; }
.sk-qend { text-align: center; } .sk-score { font-size: 22px; } .sk-score b { font-size: 64px; color: var(--geo-red); }
.sk-rev { text-align: left; max-width: 760px; margin: 14px auto; display: grid; gap: 6px; font-size: 14.5px; }
.sk-rev li span { display: block; } .sk-rev li.ok span { color: #2a7d3a; } .sk-rev li.no span { color: var(--geo-red); }
.sk-qend .sk-fbtn { justify-content: center; }
.sk-form { background: #fff; border-radius: 20px; padding: 20px 24px; box-shadow: 0 6px 22px rgba(0,0,0,.07); margin-bottom: 22px; }
.sk-form h3 { margin: 0 0 4px; font-size: 22px; } .sk-form > header p { margin: 0 0 14px; color: var(--geo-ink-soft); }
.sk-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sk-fields label, .sk-open { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13.5px; }
.sk-fields input, .sk-fields select, .sk-open textarea { font: 500 15px var(--font); padding: 9px 11px; border: 1.5px solid rgba(43,36,32,.2); border-radius: 10px; background: #fff; }
.sk-scale { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 14.5px; }
.sk-scale th, .sk-scale td { padding: 8px 6px; border-bottom: 1px solid rgba(43,36,32,.08); }
.sk-scale thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--geo-ink-soft); text-align: center; }
.sk-scale tbody th { text-align: left; font-weight: 600; width: 50%; }
.sk-scale td { text-align: center; }
.sk-scale input { width: 20px; height: 20px; accent-color: var(--geo-red); cursor: pointer; }
.sk-open { margin-bottom: 10px; }
.sk-priv { font-size: 12.5px; color: var(--geo-ink-soft); margin: 10px 0 0; }
.sk-glo { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sk-glo div { background: #fff; border-radius: 14px; padding: 14px 16px; }
.sk-glo dt { font-weight: 800; color: var(--geo-red); margin-bottom: 4px; } .sk-glo dd { margin: 0; line-height: 1.5; font-size: 14.5px; }
.sk-qprint { display: none; }
@media print {
  html.print-one body > *:not(#sitePage) { display: none !important; }
  html.print-one #sitePage { position: static !important; }
  html.print-one #sitePage .sp-bar, html.print-one #adBar { display: none !important; }
  html.print-one #spScroll { position: static !important; overflow: visible !important; }
  html.print-one .pg > *:not(.sk-pane), html.print-one .sk-pane > *:not(.print-me):not(:has(.print-me)) { display: none !important; }
  html.print-one .sk-pane { display: block !important; }
  html.print-one .print-me { display: block !important; box-shadow: none; }
  html.print-one .print-me .sk-fbtn, html.print-one .print-me footer, html.print-one .print-me .sk-priv { display: none !important; }
  html.print-one .sk-qprint.print-me { display: block !important; font-size: 13px; }
  html.print-one .sk-qprint ul { list-style: none; padding-left: 10px; }
}
/* Ieri e oggi: galleria dei confronti nella pagina del geosito */
.gp-cmp { max-width: 1280px; margin: 0 auto; padding-top: 30px; }
.gp-cmpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.gp-cmpc { border: 0; padding: 0; background: #fff; border-radius: 16px; overflow: hidden; cursor: pointer; text-align: left; box-shadow: 0 4px 16px rgba(0,0,0,.08); font-family: var(--font); color: var(--geo-ink); transition: transform .15s; }
.gp-cmpc:hover, .gp-cmpc:focus-visible { transform: translateY(-3px); outline: 3px solid transparent; box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.gp-cmpc .im { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
.gp-cmpc .im i { background: center / cover; }
.gp-cmpc .im i:first-child { filter: grayscale(1) contrast(1.05); }
.gp-cmpc .im::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.4); }
.gp-cmpc .im em { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font: 800 11.5px var(--font); font-style: normal; color: #fff; background: rgba(0,0,0,.6); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.gp-cmpc b { display: block; padding: 10px 14px 14px; font-size: 15.5px; line-height: 1.3; }
/* ---------- Visori VR: anteprima dinamica ---------- */
.vr.vr-live { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.vr-view { position: relative; aspect-ratio: 400 / 220; border-radius: 26px; overflow: hidden; background: #1c1714; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.vr-stage { position: absolute; inset: 0; }
.vr-mask { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.vr-where { position: absolute; z-index: 3; left: 50%; top: 10px; transform: translateX(-50%); font: 800 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.vr-drag { position: absolute; z-index: 3; left: 50%; bottom: 10px; transform: translateX(-50%); font: 700 12px var(--font); color: rgba(255,255,255,.8); white-space: nowrap; pointer-events: none; }
.vr-steps { list-style: none; margin: 16px 0 6px; padding: 0; display: grid; gap: 8px; }
.vr-steps li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.vr-steps b { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--geo-red); color: #fff; display: grid; place-items: center; font-size: 14px; }
.vr-live .hero-cta .ico svg { width: 26px; height: 26px; margin: 0; }
@media (max-width: 860px) { .vr.vr-live { grid-template-columns: 1fr; } }
#vrPrev { position: fixed; inset: 0; z-index: 9800; background: #000; display: flex; flex-direction: column; }
.vp-eyes { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
.vp-eye { position: relative; overflow: hidden; border-radius: 46% 46% 40% 40% / 50% 50% 44% 44%; background: #111; }
.vp-v { position: absolute; inset: 0; }
.vp-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6px; background: rgba(20,16,14,.8); padding: 6px 8px; border-radius: 999px; }
.vp-bar button { border: 0; background: rgba(255,255,255,.15); color: #fff; height: 38px; min-width: 38px; border-radius: 999px; padding: 0 12px; font: 800 14px var(--font); cursor: pointer; }
.vp-bar button:hover, .vp-bar button.on { background: var(--geo-red); }
.vp-where { color: #fff; font: 800 13px var(--font); padding: 0 8px; white-space: nowrap; }
.vp-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0; max-width: min(720px, calc(100% - 24px)); text-align: center; color: #fff; background: rgba(20,16,14,.75); padding: 8px 14px; border-radius: 14px; font: 600 13px var(--font); }
/* ---------- Geologia: riquadro compatto in home + pagina dedicata ---------- */
.geo-compact .gt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.geo-compact .gt-tx p { margin: 0; }
.geo-compact .hero-cta { text-decoration: none; }
.geo-compact .hero-cta .ico { font-size: 22px; }
.gt-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; margin-bottom: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.gt-bar i { flex: 1; }
.gt-units { display: grid; gap: 10px; }
.gt-u { display: flex; align-items: center; gap: 14px; border: 0; background: #fff; border-radius: 14px; padding: 12px 14px; text-align: left; cursor: pointer; font-family: var(--font); color: var(--geo-ink); box-shadow: 0 3px 12px rgba(0,0,0,.06); transition: transform .15s; }
.gt-u:hover, .gt-u:focus-visible { transform: translateX(4px); outline: 3px solid transparent; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.gt-u > i { width: 44px; height: 44px; flex: none; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.gt-u span { display: flex; flex-direction: column; }
.gt-u small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--geo-red); }
.gt-u b { font-size: 15.5px; } .gt-u em { font-style: normal; font-size: 13px; color: var(--geo-ink-soft); }
@media (max-width: 860px) { .geo-compact .gt { grid-template-columns: 1fr; } }
.geo-page { padding: 0 !important; background: none !important; }
.geo-page .in { max-width: none; padding: 0; }
.pg-src { font-size: 12.5px; color: var(--geo-ink-soft); margin-top: 18px; max-width: 900px; }

/* ---------- Scuole: stile più colorato e "da quaderno" ---------- */
.pg.sk { --sk-blue: #2b7de9; --sk-yellow: #ffc83d; --sk-green: #2fb36b; --sk-purple: #8b5cf6; --sk-orange: #ff7a3d; --sk-pink: #ff5d8f; }
#spScroll:has(.pg.sk) { background-color: #fffaf0; background-image: radial-gradient(rgba(43,36,32,.09) 1.2px, transparent 1.3px); background-size: 22px 22px; }
.sk-hero { position: relative; margin: 0 -8px 8px; padding: 34px 28px 22px; border-radius: 28px; background: linear-gradient(120deg, #fff3c4 0%, #ffe0ec 45%, #dcefff 100%); overflow: hidden; box-shadow: 0 10px 0 rgba(43,36,32,.06); }
.sk-hero .k { display: inline-block; background: var(--sk-orange); color: #fff; padding: 6px 12px; border-radius: 999px; transform: rotate(-2deg); letter-spacing: .1em; }
.sk-hero h1 { font-size: clamp(34px, 5.5vw, 62px); margin: 12px 0; }
.sk-hero h1 span { background: linear-gradient(transparent 58%, var(--sk-yellow) 58%); padding: 0 6px; border-radius: 4px; }
.sk-hero .pg-intro p { color: var(--geo-ink); font-size: 17.5px; position: relative; z-index: 1; }
.sk-doodles span { position: absolute; font-size: clamp(26px, 3.5vw, 46px); opacity: .85; animation: skFloat 6s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,.12)); }
.sk-doodles .d1 { right: 6%; top: 14%; } .sk-doodles .d2 { right: 20%; top: 52%; animation-delay: -1s; } .sk-doodles .d3 { right: 32%; top: 10%; animation-delay: -2s; }
.sk-doodles .d4 { right: 4%; bottom: 10%; animation-delay: -3s; } .sk-doodles .d5 { right: 38%; top: 30%; animation-delay: -4s; } .sk-doodles .d6 { right: 14%; top: 4%; animation-delay: -5s; font-size: 28px; } .sk-doodles .d7 { right: 27%; bottom: 14%; animation-delay: -2.5s; }
@keyframes skFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(6deg); } }
@media (max-width: 760px) { .sk-doodles .d2, .sk-doodles .d3, .sk-doodles .d5, .sk-doodles .d7 { display: none; } }
.sk .sk-tabs { background: transparent; gap: 10px; }
.sk .sk-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 3px solid var(--tc); color: var(--geo-ink); background: #fff; font-size: 15.5px; padding: 10px 18px; box-shadow: 0 4px 0 var(--tc); transition: transform .12s, box-shadow .12s; }
.sk .sk-tabs button span { font-size: 20px; }
.sk .sk-tabs button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tc); }
.sk .sk-tabs button[aria-selected="true"] { background: var(--tc); color: #fff; border-color: var(--tc); transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.sk .t-kit { --tc: var(--sk-blue); } .sk .t-quiz { --tc: var(--sk-orange); } .sk .t-schede { --tc: var(--sk-green); } .sk .t-glossario { --tc: var(--sk-purple); }
.sk .sk-pane h2 { display: inline-block; font-size: 28px; background: #fff; padding: 4px 14px; border-radius: 12px; transform: rotate(-1deg); box-shadow: 4px 4px 0 var(--sk-yellow); }
.sk .sk-pane { animation: skIn .45s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes skIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.sk .sk-kit { border-top: 0; border-radius: 24px; box-shadow: 0 8px 0 color-mix(in srgb, var(--kc) 35%, transparent), 0 14px 30px rgba(0,0,0,.08); }
.sk .sk-kit > header { position: relative; background: linear-gradient(120deg, var(--kc), color-mix(in srgb, var(--kc) 55%, #fff)); color: #fff; padding: 22px 24px 18px 96px; }
.sk .sk-kit > header .k, .sk .sk-kit > header .sk-meta { color: rgba(255,255,255,.92); }
.sk .sk-kit h3 { color: #fff; font-size: 26px; }
.sk .sk-emo { position: absolute; left: 22px; top: 50%; transform: translateY(-50%) rotate(-8deg); width: 58px; height: 58px; border-radius: 18px; background: #fff; display: grid; place-items: center; font-size: 32px; box-shadow: 0 4px 0 rgba(0,0,0,.15); animation: skWiggle 4s ease-in-out infinite; }
@keyframes skWiggle { 0%, 100% { transform: translateY(-50%) rotate(-8deg); } 50% { transform: translateY(-55%) rotate(6deg); } }
.sk .sk-steps > div { background: color-mix(in srgb, var(--kc) 8%, #fff); border-radius: 16px; padding: 4px 14px 10px; border: 2px dashed color-mix(in srgb, var(--kc) 40%, transparent); }
.sk .sk-steps > div:nth-child(2) { transform: rotate(.6deg); } .sk .sk-steps > div:nth-child(3) { transform: rotate(-.6deg); }
.sk .sk-lv { background: #fffbe8; }
.sk .sk-lv > div { background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 3px 0 rgba(0,0,0,.06); }

.sk .sk-kit footer button { border-width: 2px; }
.sk .sk-act button, .sk .sk-qc button:first-of-type { background: var(--sk-orange); border-color: var(--sk-orange); box-shadow: 0 3px 0 #c9541f; }
.sk .sk-qc { position: relative; border-left: 0; border-radius: 22px; padding: 18px 18px 18px 86px; background: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--kc) 35%, transparent); min-height: 110px; transition: transform .15s; }
.sk .sk-qc:hover { transform: rotate(-.8deg) translateY(-2px); }
.sk .sk-qc .sk-emo { left: 16px; }
.sk .sk-qbox { border: 3px solid var(--sk-orange); border-radius: 26px; position: relative; overflow: hidden; }
.sk .sk-qprog { height: 12px; background: #ffe7d8; } .sk .sk-qprog i { background: linear-gradient(90deg, var(--sk-orange), var(--sk-yellow)); }
.sk .sk-ans button { border-width: 3px; border-radius: 18px; transition: transform .1s; }
.sk .sk-ans button:hover:not(:disabled) { transform: translateX(4px); }
.sk .sk-ans button:nth-child(1) span { background: #dcefff; } .sk .sk-ans button:nth-child(2) span { background: #ffe0ec; } .sk .sk-ans button:nth-child(3) span { background: #fff3c4; } .sk .sk-ans button:nth-child(4) span { background: #dff5e7; }
.sk .sk-ans button.ok { animation: skPop .4s; } .sk .sk-ans button.no { animation: skShake .4s; }
@keyframes skPop { 50% { transform: scale(1.04); } } @keyframes skShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.sk .sk-score b { color: var(--sk-orange); }
.sk-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sk-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: skFall linear forwards; }
@keyframes skFall { to { top: 110%; transform: rotate(720deg) translateX(40px); } }
.sk .sk-form { border-radius: 24px; border: 3px solid var(--sk-green); box-shadow: 0 6px 0 rgba(47,179,107,.35); }
.sk .sk-form:nth-of-type(2) { border-color: var(--sk-blue); box-shadow: 0 6px 0 rgba(43,125,233,.35); }
.sk .sk-form:nth-of-type(3) { border-color: var(--sk-purple); box-shadow: 0 6px 0 rgba(139,92,246,.35); }
.sk .sk-scale thead th:nth-child(2) { color: #d64545; } .sk .sk-scale thead th:nth-child(3) { color: #e67e22; } .sk .sk-scale thead th:nth-child(4) { color: #2b7de9; } .sk .sk-scale thead th:nth-child(5) { color: #2fb36b; }
.sk .sk-scale tbody tr:nth-child(odd) { background: #fffbe8; }
.sk .sk-scale input { width: 24px; height: 24px; }
.sk-glo { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sk-card { position: relative; height: 170px; border: 0; padding: 0; background: none; cursor: pointer; perspective: 800px; font-family: var(--font); }
.sk-card > span { position: absolute; inset: 0; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 14px; backface-visibility: hidden; transition: transform .55s cubic-bezier(.3,.7,.3,1.3); box-shadow: 0 6px 0 rgba(0,0,0,.12); }
.sk-card .f { color: #fff; font-size: 20px; font-weight: 800; }
.sk-card .f small { margin-top: 8px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.3); display: grid; place-items: center; font-size: 18px; }
.sk-card .b { background: #fff; color: var(--geo-ink); font-size: 13.5px; line-height: 1.45; transform: rotateY(180deg); }
.sk-card .b b { display: block; color: var(--geo-red); margin-bottom: 4px; font-size: 14.5px; }
.sk-card.flip .f { transform: rotateY(-180deg); } .sk-card.flip .b { transform: rotateY(0); }
.sk-card.c0 .f { background: var(--sk-blue); } .sk-card.c1 .f { background: var(--sk-orange); } .sk-card.c2 .f { background: var(--sk-green); } .sk-card.c3 .f { background: var(--sk-purple); } .sk-card.c4 .f { background: var(--sk-pink); }
.sk-card:nth-child(odd) { transform: rotate(-1.2deg); } .sk-card:nth-child(even) { transform: rotate(1deg); }
.sk-card:hover { transform: rotate(0) translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .sk-doodles span, .sk .sk-emo, .sk .sk-pane { animation: none; } .sk-card > span { transition: none; } }
html.a11y-motion .sk-doodles span, html.a11y-motion .sk .sk-emo { animation: none; }
/* banda scuole in home: più colorata */
.school-band .sb-in { background: linear-gradient(120deg, #fff3c4, #ffe0ec 50%, #dcefff); }
.sb-tiles a { background: #fff; border: 3px solid transparent; box-shadow: 0 5px 0 rgba(0,0,0,.08); }
.sb-tiles a:nth-child(1) { border-color: #2b7de9; } .sb-tiles a:nth-child(2) { border-color: #ff7a3d; } .sb-tiles a:nth-child(3) { border-color: #2fb36b; } .sb-tiles a:nth-child(4) { border-color: #8b5cf6; }
.sb-tiles a:nth-child(odd) { transform: rotate(-1deg); } .sb-tiles a:nth-child(even) { transform: rotate(1deg); }
.sb-tiles a:hover { transform: rotate(0) translateY(-3px); }
.sb-tiles b { display: inline-block; animation: skFloat 5s ease-in-out infinite; }

/* ---------- Mobile: verifiche novembre 2026 ---------- */
.mm-panel header { gap: 10px; }
.mm-lang { margin-left: auto; }
@media (max-width: 640px) {
  /* barre in alto: restano logo + menu (lingua, ricerca e accessibilità sono nel menu) */
  .sp-bar { gap: 8px; padding: 0 8px; }
  .sp-bar .logo .partners, .topbar .logo .partners { display: none; }
  .sp-bar .actions > .lang, .sp-bar .actions > [data-search], .sp-bar .actions > [data-a11y-open] { display: none; }
  .sp-bar .actions { margin-left: auto; }
  #tour .topbar .actions > .lang, #tour .topbar .actions > [data-search], #tour .topbar .actions > [data-a11y-open] { display: none; }
  .menu-btn { height: 40px; min-width: 40px; }
  /* barca: didascalia in alto, così non copre le frecce sull'acqua */
  .bt-cap { top: 72px; bottom: auto !important; left: 10px; right: 10px; max-width: none; padding: 9px 12px; }
  .bt-t { font-size: 14.5px; }
  .bt-hint { top: auto; bottom: 150px; }
  .bt-compass { display: none; }
  .bt-spring { top: 72px; bottom: auto; }
  /* schede di valutazione: una domanda per riga, risposte sotto */
  .sk-scale thead { display: none; }
  .sk-scale, .sk-scale tbody, .sk-scale tr { display: block; width: 100%; }
  .sk-scale tr { padding: 10px 0; border-bottom: 1px solid rgba(43,36,32,.1); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .sk-scale tbody th { grid-column: 1 / -1; width: auto; border: 0; padding: 0 0 4px; }
  .sk-scale td { border: 0; padding: 2px; }
  .sk-scale td label { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; }
  .sk-scale .sr { position: static !important; width: auto; height: auto; clip: auto; white-space: normal; }
  .sk-form, .sk-qbox { padding: 16px 14px; }
  .sk .sk-kit > header { padding: 18px 16px 16px 84px; }
  .sk .sk-kit h3 { font-size: 21px; }
  .sk-cols, .sk-lv { padding-left: 16px; padding-right: 16px; }
  .sk-hero { padding: 26px 18px 18px; }
  #adBar { max-height: 42vh; }
}
.mv-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.mv-filt .mv-csv { margin-left: 0; }
@media (max-width: 640px) {
  #tour .topbar .actions > [data-tutorial], #tour .topbar .actions > [data-home], #tour .topbar .actions > .pill-btn, #tour .topbar .actions > #btnSound { display: none !important; }
  #tour .topbar .actions { gap: 4px; overflow-x: auto; scrollbar-width: none; }
  #tour .topbar .actions .iconbtn { flex: none; }
  #tour .topbar .actions .menu-btn span { display: none; }
}
.catasto { min-width: 0; overflow-wrap: anywhere; }
.cat-links { min-width: 0; flex-wrap: wrap; }
.tut-card { width: min(480px, calc(100vw - 32px)); max-width: 100%; box-sizing: border-box; }
#tutorial { grid-template-columns: minmax(0, 1fr); justify-items: center; }
@media (max-width: 640px) { .bt-hint { display: none !important; } #boat .bt-compass { display: none !important; } .tut-card { padding: 20px 16px 14px; } .tut-card p { min-height: 0; } }

/* ---------- Pagina "Carta geologica e scala dei tempi" (rifatta) ---------- */
.geo-page .in { background: none !important; box-shadow: none !important; padding: 0 !important; }
.gx-nav { position: sticky; top: 0; z-index: 4; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin-bottom: 6px; background: var(--geo-cream); }
.gx-nav a { flex: none; text-decoration: none; color: var(--geo-ink); background: #fff; border: 1px solid rgba(43,36,32,.12); border-radius: 999px; padding: 8px 14px; font: 700 14px var(--font); }
.gx-nav a:hover { background: var(--geo-red); color: #fff; }
.gx-card { background: #fff; border-radius: 24px; padding: clamp(18px, 3vw, 32px); margin: 0 0 22px; box-shadow: 0 10px 30px rgba(43,36,32,.08); scroll-margin-top: 64px; }
.gx-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.gx-n { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--geo-red); color: #fff; display: grid; place-items: center; font: 800 18px var(--font); }
.gx-head h2 { margin: 2px 0 4px; font-size: clamp(21px, 2.6vw, 28px); }
.gx-head p { margin: 0; color: var(--geo-ink-soft); line-height: 1.55; max-width: 820px; }
.gx-card .gl-grid { margin-top: 0; gap: 22px; align-items: start; }
.gx-card #glMap { height: min(62vh, 560px); border-radius: 18px; overflow: hidden; background: #eef0ea; box-shadow: inset 0 0 0 1px rgba(43,36,32,.1); }
.gx-card .gl-info { min-height: 0; border: 1px solid rgba(43,36,32,.08); }
.gx-card .gl-legend { display: grid; grid-template-columns: 1fr; gap: 4px; }
.gl-lxs { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(43,36,32,.1); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.gl-lxs .gl-lx { padding: 2px 0; }
.gl-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #2b2420; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.2); }
.gx-sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gx-site { border-radius: 18px; overflow: hidden; background: var(--geo-cream); display: flex; flex-direction: column; }
.gx-site .im { position: relative; aspect-ratio: 16 / 9; background: #ccc center / cover; }
.gx-site .pin { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--geo-red); color: #fff; display: grid; place-items: center; font: 800 15px var(--font); box-shadow: 0 0 0 3px #fff; }
.gx-site .tx { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gx-site small { font: 800 11.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--geo-red); }
.gx-site b { display: flex; gap: 8px; align-items: center; font-size: 17px; line-height: 1.25; }
.gx-site b i { flex: none; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.gx-site em { font-style: normal; font-size: 13px; color: var(--geo-ink-soft); }
.gx-site p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.gx-site .bt { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.gx-card .gl-time { border-radius: 16px; background: #faf7f2; padding: 12px; overflow-x: auto; }
.gx-swipe { display: none; margin: 6px 0 0; font-size: 12.5px; color: var(--geo-ink-soft); text-align: center; }
.gx-events { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.gx-events li { display: flex; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background .15s; }
.gx-events li:hover, .gx-events li.on { background: var(--geo-cream); }
.gx-events .dot { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--geo-red); color: #fff; display: grid; place-items: center; font: 800 13px var(--font); }
.gx-events b { color: var(--geo-red-dark); font-size: 13.5px; }
.gx-events p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; }
.geo-page .gl-src { margin: 4px 4px 0; }
@media (max-width: 960px) { .gx-sites { grid-template-columns: 1fr; } .gx-site { flex-direction: row; } .gx-site .im { aspect-ratio: auto; width: 34%; min-height: 160px; flex: none; } }
@media (max-width: 860px) { .gx-card #glMap { height: 380px; } }
@media (max-width: 640px) {
  .gx-card { border-radius: 18px; padding: 16px 14px; margin-left: -4px; margin-right: -4px; }
  .gx-n { width: 34px; height: 34px; font-size: 16px; }
  .gx-site { flex-direction: column; } .gx-site .im { width: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .gx-swipe { display: block; }
  .gx-events { grid-template-columns: 1fr; }
  .gx-card .gl-time { padding: 8px; margin: 0 -6px; }
}

/* ---------- Menu principale: versione organizzata (schede geositi, riquadri, info compatte) ---------- */
.mm-panel { width: min(460px, 100%); padding: 16px 20px 32px; }
.mm-panel header { position: sticky; top: -16px; z-index: 2; background: var(--geo-cream); padding: 6px 0 12px; margin: -6px 0 4px; border-bottom: 1px solid rgba(43,36,32,.1); }
.mm-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.mm-quick a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; margin: 0; border-radius: 14px; background: #fff; font-size: 20px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.mm-quick a span { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.mm-panel section { padding: 12px 0; border-top: 0; }
.mm-panel h2 { margin: 6px 0 10px; }
.mm-site { background: #fff; border-radius: 16px; margin-bottom: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden; }
.mm-site summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; cursor: pointer; }
.mm-site summary::-webkit-details-marker { display: none; }
.mm-site .im { position: relative; flex: none; width: 64px; height: 48px; border-radius: 10px; background: #ccc center / cover; }
.mm-site .im b { position: absolute; left: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--geo-red); color: #fff; display: grid; place-items: center; font-size: 12px; box-shadow: 0 0 0 2px #fff; }
.mm-site .nm { flex: 1; font-weight: 800; font-size: 16px; line-height: 1.25; }
.mm-site .chev { font-size: 20px; color: var(--geo-red); transition: transform .2s; line-height: 1; }
.mm-site[open] .chev { transform: rotate(180deg); }
.mm-site[open] summary { background: rgba(187,49,27,.06); }
.mm-sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 14px; }
.mm-panel .mm-sub a { margin: 0; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: var(--geo-cream); display: inline-flex; gap: 6px; align-items: center; }
.mm-panel .mm-sub a.mm-open { width: 100%; border-radius: 10px; background: var(--geo-red); color: #fff; justify-content: center; }
.mm-panel .mm-sub a.mm-open:hover { color: #fff; box-shadow: none; filter: brightness(1.08); }
.mm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mm-panel a.mm-tile { margin: 0; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: #fff; font-size: 14px; line-height: 1.25; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.mm-tile .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--geo-cream); display: grid; place-items: center; font-size: 18px; }
.mm-school .mm-tile:nth-child(1) .ic { background: #dcefff; } .mm-school .mm-tile:nth-child(2) .ic { background: #ffe5d6; } .mm-school .mm-tile:nth-child(3) .ic { background: #dff5e7; } .mm-school .mm-tile:nth-child(4) .ic { background: #ece4ff; }
.mm-info ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.mm-panel .mm-info a { font-size: 13.5px; font-weight: 600; color: var(--geo-ink-soft); padding: 6px 10px; }
.mm-panel a:hover, .mm-panel a:focus-visible { box-shadow: inset 0 0 0 2px var(--geo-red); background: #fff; }
.mm-site summary:focus-visible { outline: 3px solid var(--geo-red); outline-offset: -3px; }
@media (max-width: 380px) { .mm-tiles, .mm-info ul { grid-template-columns: 1fr; } }
/* geologia: intestazioni delle sezioni su mobile */
@media (max-width: 640px) { .gx-head { display: block; } .gx-n { float: left; margin: 0 10px 4px 0; } .gx-head h2 { line-height: 34px; margin: 0 0 6px; } .gx-head p { clear: both; } }
/* Banner consenso statistiche (solo se si usa Google Analytics) */
#statsConsent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9900; max-width: 640px; margin: 0 auto; background: #fff; color: var(--geo-ink); border-radius: 18px; padding: 16px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.3); border-top: 5px solid var(--geo-red); font: 500 14.5px/1.5 var(--font); }
#statsConsent p { margin: 0 0 12px; }
#statsConsent div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#statsConsent button { border: 2px solid var(--geo-ink); background: #fff; border-radius: 999px; padding: 8px 18px; font: 800 14px var(--font); cursor: pointer; }
#statsConsent button.ok { background: var(--geo-red); border-color: var(--geo-red); color: #fff; }
#statsConsent a { margin-left: auto; font-size: 13px; color: var(--geo-ink-soft); }

/* ---------- Crediti riorganizzati ---------- */
.cr2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.cr2 { background: var(--geo-cream); border-radius: 16px; padding: 16px 18px; }
.cr2 h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; line-height: 1.25; }
.cr2 h3 span { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff; display: grid; place-items: center; font-size: 19px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.cr2 dl { margin: 0; display: grid; gap: 8px; }
.cr2 dt { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--geo-red); }
.cr2 dd { margin: 1px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.cr2 .cr-thanks { margin: 10px 0 0; font-size: 12.5px; }
.cr-all { text-align: center; margin: 18px auto 0; max-width: 760px; }
@media (max-width: 1000px) { .cr2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cr2-grid { grid-template-columns: 1fr; } }

/* ---------- Escursioni 2026: banda in home e pagina con linea del tempo ---------- */
.walk-band { padding: 10px clamp(16px, 5vw, 64px) 18px; }
.wb-in { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; border-radius: 24px; overflow: hidden; background: #1f2a1d; color: #fff; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.15); transition: transform .2s; }
.wb-in:hover { transform: translateY(-3px); }
.wb-ph { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; min-height: 240px; }
.wb-ph i { background: center / cover; }
.wb-ph i:first-child { grid-row: 1 / span 2; }
.wb-tx { padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.wb-tx .k { font: 800 12px var(--font); letter-spacing: .16em; text-transform: uppercase; color: #ffc83d; }
.wb-tx b { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; }
.wb-tx .go { margin-top: 6px; font-weight: 800; color: #ffc83d; }
@media (max-width: 760px) { .wb-in { grid-template-columns: 1fr; } .wb-ph { min-height: 180px; } }

.wk-hero { position: relative; border-radius: 26px; overflow: hidden; color: #fff; margin: 0 -8px 10px; min-height: 360px; display: flex; align-items: flex-end; }
.wk-hero-ph { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.wk-hero-ph i { background: center / cover; }
.wk-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,16,14,.88) 10%, rgba(20,16,14,.35) 60%, rgba(20,16,14,.15)); }
.wk-hero-tx { position: relative; z-index: 1; padding: clamp(20px, 4vw, 40px); }
.wk-hero .k { color: #ffc83d; }
.wk-hero h1 { color: #fff; }
.wk-hero .pg-intro p { color: rgba(255,255,255,.92); }
.wk-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.wk-stats div { background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border-radius: 14px; padding: 8px 16px; display: flex; flex-direction: column; }
.wk-stats b { font-size: 26px; line-height: 1.1; } .wk-stats span { font-size: 12.5px; opacity: .9; }
.wk-nav { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 0; background: var(--geo-cream); }
.wk-nav a { text-decoration: none; color: var(--geo-ink); background: #fff; border-radius: 14px; padding: 8px 12px; border-left: 5px solid var(--wc); display: flex; flex-direction: column; min-width: 0; }
.wk-nav b { color: var(--wc); font-size: 14px; } .wk-nav span { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-tl { position: relative; padding: 26px 0 10px; }
.wk-tl::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: repeating-linear-gradient(180deg, #d9cfc3 0 12px, transparent 12px 20px); }
.wk-item { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; align-items: start; margin-bottom: 34px; opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; scroll-margin-top: 80px; }
.wk-item.in { opacity: 1; transform: none; }
.wk-date { grid-column: 2; grid-row: 1; justify-self: center; width: 84px; height: 84px; border-radius: 50%; background: var(--wc); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--geo-cream), 0 8px 18px rgba(0,0,0,.18); position: sticky; top: 90px; z-index: 1; }
.wk-date b { font-size: 28px; line-height: 1; } .wk-date span { font-weight: 800; text-transform: uppercase; font-size: 13px; } .wk-date i { font-style: normal; font-size: 10.5px; opacity: .85; }
.wk-card { grid-row: 1; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.09); border-top: 5px solid var(--wc); }
.wk-item.l .wk-card { grid-column: 1; } .wk-item.r .wk-card { grid-column: 3; }
.wk-cover { position: relative; display: block; width: 100%; border: 0; padding: 0; cursor: zoom-in; aspect-ratio: 16 / 9; background: #ddd; overflow: hidden; }
.wk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.wk-cover:hover img { transform: scale(1.04); }
.wk-n { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font: 800 12.5px var(--font); padding: 5px 11px; border-radius: 999px; }
.wk-body { padding: 16px 20px 20px; }
.wk-body small { font: 800 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--wc); }
.wk-body h3 { margin: 4px 0 10px; font-size: 22px; line-height: 1.2; }
.wk-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wk-chips li { background: var(--geo-cream); border-radius: 999px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; }
.wk-body p { margin: 0 0 10px; line-height: 1.55; font-size: 14.5px; }
.wk-hl { background: color-mix(in srgb, var(--wc) 12%, #fff); border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.wk-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 4px 0 12px; }
.wk-strip button { border: 0; padding: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; cursor: zoom-in; background: #ddd; }
.wk-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.wk-strip button:hover img { transform: scale(1.1); }
.wk-act { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-btn { border: 0; border-radius: 999px; padding: 9px 16px; font: 800 14px var(--font); cursor: pointer; background: var(--geo-red); color: #fff; text-decoration: none; display: inline-flex; align-items: center; }
.wk-btn.alt { background: #fff; color: var(--geo-ink); box-shadow: inset 0 0 0 2px rgba(43,36,32,.15); }
.wk-geo { background: #fff; border-radius: 22px; padding: 20px 24px; margin-top: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.wk-geo h2 { margin: 0 0 8px; font-size: 21px; }
.wk-geo p { margin: 0; line-height: 1.6; }
.wk-priv { font-size: 12.5px; color: var(--geo-ink-soft); margin-top: 14px; }
.wk-lb { position: fixed; inset: 0; z-index: 9800; background: rgba(10,8,7,.94); display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; }
.wk-lb[hidden] { display: none; }
.wk-lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.wk-lb img { max-width: 100%; max-height: 82vh; border-radius: 10px; }
.wk-lb figcaption { color: #fff; font: 600 14px var(--font); text-align: center; padding: 0 10px; }
.wk-lb button { border: 0; background: rgba(255,255,255,.14); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 24px; cursor: pointer; justify-self: center; }
.wk-lb .x { position: absolute; top: 14px; right: 14px; font-size: 18px; }
@media (max-width: 860px) {
  .wk-tl::before { left: 26px; }
  .wk-item { grid-template-columns: 56px 1fr; }
  .wk-date { grid-column: 1; width: 52px; height: 52px; top: 80px; box-shadow: 0 0 0 4px var(--geo-cream); }
  .wk-date b { font-size: 18px; } .wk-date span { font-size: 10px; } .wk-date i { display: none; }
  .wk-item.l .wk-card, .wk-item.r .wk-card { grid-column: 2; }
  .wk-nav { grid-template-columns: 1fr 1fr 1fr; } .wk-nav span { display: none; }
  .wk-strip { grid-template-columns: repeat(3, 1fr); }
  .wk-hero-ph { grid-template-columns: 1fr; } .wk-hero-ph i:not(:first-child) { display: none; }
  .wk-lb { grid-template-columns: 44px 1fr 44px; } .wk-lb button { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .wk-item { opacity: 1; transform: none; transition: none; } }
/* ---------- Saluto del Sindaco in home ---------- */
.mayor-band { padding: 26px clamp(16px, 5vw, 64px) 6px; }
.my-in { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); background: #fff; border-radius: 24px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 10px 30px rgba(43,36,32,.07); position: relative; overflow: hidden; }
.my-in::before { content: '“'; position: absolute; right: 24px; top: -30px; font: 800 220px/1 Georgia, serif; color: rgba(187,49,27,.07); pointer-events: none; }
.my-side { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; border-right: 1px solid rgba(43,36,32,.1); padding-right: 18px; }
.my-side img { width: 110px; height: auto; }
.my-side .k { font: 800 12px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--geo-red); }
.my-tx h2 { margin: 0 0 12px; font-size: clamp(22px, 2.6vw, 30px); }
.my-tx p { margin: 0 0 10px; line-height: 1.65; font-size: 16px; max-width: 860px; }
.mayor-band:not(.open) .my-tx p.more { display: none; }
.my-more { border: 0; background: none; padding: 0; color: var(--geo-red-dark); font: 800 14px var(--font); cursor: pointer; text-decoration: underline; }
.my-sign { margin: 14px 0 0 !important; text-align: right; display: flex; flex-direction: column; }
.my-sign span { font-size: 13px; color: var(--geo-ink-soft); }
.my-sign b { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 28px; font-weight: 400; color: var(--geo-ink); }
@media (max-width: 760px) { .my-in { grid-template-columns: 1fr; } .my-side { flex-direction: row; border-right: 0; border-bottom: 1px solid rgba(43,36,32,.1); padding: 0 0 12px; justify-content: flex-start; } .my-side img { width: 64px; } }

/* ---------- Icone piatte del progetto (assets/js/icons.js) ---------- */
svg.gi { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.cr2 h3 span { color: var(--geo-red); background: rgba(187,49,27,.08); box-shadow: none; }
.cr2 h3 span svg.gi { width: 20px; height: 20px; }
.mm-quick a { color: var(--geo-ink); }
.mm-quick a svg.gi { width: 24px; height: 24px; color: var(--geo-red); }
.mm-tile .ic { color: var(--geo-red); background: rgba(187,49,27,.08) !important; }
.mm-tile .ic svg.gi { width: 20px; height: 20px; }
.mm-sub a svg.gi { color: var(--geo-red); }
.mm-sub a.mm-open svg.gi { color: #fff; }
.gx-nav a svg.gi, .wk-chips svg.gi, .sk-meta svg.gi { color: var(--geo-red); }
.wk-hl svg.gi { color: var(--wc); }
.sb-tiles b { color: var(--geo-red); display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(187,49,27,.08); animation: none; }
.sb-tiles b svg.gi { width: 24px; height: 24px; }
.hero-cta .ico svg.gi { width: 24px; height: 24px; margin: 0; }
.sk .sk-emo { color: var(--kc, var(--geo-red)); font-size: 30px; }
.sk .sk-tabs button span svg.gi { width: 20px; height: 20px; }
.sk-doodles span { color: var(--geo-red); opacity: .35; filter: none; }
.sk-doodles span svg.gi { width: 1em; height: 1em; }
.gp-media .ico svg.gi { width: 20px; height: 20px; }
.bt-ctl button svg.gi, .bt-sbtn svg.gi, .bt-fbtn svg.gi { width: 18px; height: 18px; }
.bt-boat svg.gi { width: 22px; height: 22px; color: #fff; }

/* ===== Pieghevole 3D (escursioni) ===== */
.wk-bro { display: grid; grid-template-columns: minmax(220px, 1fr) 2.2fr; gap: 24px; align-items: center; background: #fff; border-radius: 22px; padding: 24px; margin-top: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.06); overflow: hidden; }
.wk-bro-tx .k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--geo-red, #BB311B); font-weight: 700; }
.wk-bro-tx h2 { margin: 6px 0 8px; font-size: 22px; }
.wk-bro-tx p { margin: 0 0 12px; line-height: 1.55; }
.wk-bro-ctl { display: inline-flex; border: 1.5px solid var(--geo-red, #BB311B); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.wk-bro-ctl button { border: 0; background: transparent; color: var(--geo-red, #BB311B); font: inherit; font-weight: 600; font-size: 14px; padding: 8px 14px; cursor: pointer; }
.wk-bro-ctl button + button { border-left: 1.5px solid var(--geo-red, #BB311B); }
.wk-bro-ctl button[aria-pressed="true"] { background: var(--geo-red, #BB311B); color: #fff; }
.wk-bro-ctl button:focus-visible { outline: 3px solid #f2b134; outline-offset: -3px; }
.wk-bro-big { font-size: 13.5px; }
.wk-bro-big a { color: var(--geo-ink-soft, #555); display: inline-flex; align-items: center; gap: 4px; }
.wk-bro-st { perspective: 2200px; padding: 18px 0 26px; }
.bro { position: relative; width: 100%; aspect-ratio: 2430 / 1038; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.5,.1,.2,1); cursor: pointer; }
.bro .pn { position: absolute; top: 0; height: 100%; width: 33.3334%; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.5,.1,.2,1); }
.bro .pn.l { left: 0; transform-origin: 100% 50%; }
.bro .pn.c { left: 33.3333%; }
.bro .pn.r { left: 66.6666%; transform-origin: 0 50%; }
.bro .pn i { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-size: 300% 100%; background-repeat: no-repeat; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.bro .pn .b { transform: rotateY(180deg); }
.bro .l .f { background-position: 0 0; }   .bro .l .b { background-position: 100% 0; }
.bro .c .f { background-position: 50% 0; } .bro .c .b { background-position: 50% 0; }
.bro .r .f { background-position: 100% 0; } .bro .r .b { background-position: 0 0; }
.bro .l .f::after, .bro .r .f::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 1.1s; opacity: 0; }
.bro .l .f::after { background: linear-gradient(90deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.12)); }
.bro .r .f::after { background: linear-gradient(270deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.12)); }
.bro[data-st="aperto"] .l .f::after, .bro[data-st="aperto"] .r .f::after { opacity: 1; }
.bro[data-st="chiuso"] .pn.l { transform: translateZ(2px) rotateY(180deg); }
.bro[data-st="chiuso"] .pn.r { transform: translateZ(1px) rotateY(-180deg); }
.bro[data-st="aperto"] .pn.l { transform: rotateY(8deg); }
.bro[data-st="aperto"] .pn.r { transform: rotateY(-8deg); }
.bro[data-st="retro"] { transform: rotateY(180deg); }
.bro[data-st="retro"] .pn.l { transform: rotateY(-8deg); }
.bro[data-st="retro"] .pn.r { transform: rotateY(8deg); }
.bro:focus-visible { outline: 3px solid #f2b134; outline-offset: 6px; }
@media (max-width: 760px) {
  .wk-bro { grid-template-columns: 1fr; padding: 18px; }
  .wk-bro-st { padding: 6px 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .bro, .bro .pn, .bro .pn i::after { transition: none; } }

/* ===== Mini documentari (Barbara Grillo) ===== */
.gp-docs { margin: 28px 0; }
.md-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.md-play { display: block; text-align: left; border: 0; padding: 0; background: #fff; border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.08); font: inherit; color: inherit; width: 100%; }
.md-play:hover { box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.md-play:focus-visible { outline: 3px solid #f2b134; outline-offset: 3px; }
.md-ph { display: block; position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.md-ph .pl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(187,49,27,.92); color: #fff; display: grid; place-items: center; font-size: 24px; transition: transform .2s; }
.md-play:hover .pl { transform: translate(-50%, -50%) scale(1.08); }
.md-ph .pl svg { margin-left: 3px; fill: currentColor; }
.md-ph em { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.65); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.md-tx { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.md-tx small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--geo-red, #BB311B); font-weight: 700; }
.md-tx b { font-size: 16px; line-height: 1.3; }
.md-tx i { font-style: normal; font-size: 13px; color: var(--geo-ink-soft, #6b625c); }
.md-pol { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--geo-ink-soft, #6b625c); text-decoration: none; padding: 2px 4px; }
.md-pol:hover { color: var(--geo-red, #BB311B); text-decoration: underline; }
.md-card.big { margin-bottom: 8px; }
.md-card.big .md-play { display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; }
.md-card.big .md-tx { padding: 20px 24px; }
.md-card.big .md-tx b { font-size: 22px; }
.md-card.big .pl { width: 68px; height: 68px; font-size: 30px; }
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.md-credit { font-size: 13px; color: var(--geo-ink-soft, #6b625c); margin-top: 14px; }
.md-credit a { color: inherit; }
.cs-md { padding-top: 18px; }
.cave-actions .md-mini { display: inline-flex; align-items: center; gap: 6px; }
#mdModal { position: fixed; inset: 0; z-index: 9000; background: rgba(15,12,10,.82); display: grid; place-items: center; padding: 16px; }
#mdModal[hidden] { display: none; }
.md-box { width: min(1100px, 100%); background: #1c1714; color: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.md-box header, .md-box footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; }
.md-box header small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.md-box header h2 { margin: 2px 0 0; font-size: 19px; }
.md-box header .iconbtn { background: rgba(255,255,255,.12); color: #fff; border: 0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.md-v { background: #000; }
.md-v video { display: block; width: 100%; max-height: 72vh; aspect-ratio: 16 / 9; background: #000; }
.md-box footer { flex-wrap: wrap; font-size: 14px; }
.md-box footer .md-pol { color: #f2d7cf; }
html.md-open { overflow: hidden; }
@media (max-width: 760px) {
  .md-card.big .md-play { grid-template-columns: 1fr; }
  .md-card.big .md-tx { padding: 14px; }
  .md-card.big .md-tx b { font-size: 18px; }
  .md-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .md-tx b { font-size: 14px; }
  .md-pol { font-size: 12px; }
  #mdModal { padding: 0; }
  .md-box { border-radius: 0; }
}
@media (max-width: 420px) { .md-grid { grid-template-columns: 1fr; } }

/* ===== Dentro la grotta: visita a tappe (Slipari) ===== */
.gp-walk { margin: 28px 0; }
.gw-card { display: grid; grid-template-columns: 1.3fr 1fr; width: 100%; border: 0; padding: 0; text-align: left; font: inherit; color: #fff; background: #17120f; border-radius: 22px; overflow: hidden; cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.gw-card:focus-visible { outline: 3px solid #f2b134; outline-offset: 3px; }
.gw-ph { position: relative; min-height: 280px; background-size: cover; background-position: center; }
.gw-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,18,15,0) 55%, #17120f); }
.gw-strip { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; z-index: 1; }
.gw-strip i { width: 64px; height: 40px; border-radius: 8px; background-size: cover; background-position: center; border: 2px solid rgba(255,255,255,.7); }
.gw-tx { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 26px 28px; }
.gw-tx small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #f2b134; font-weight: 700; }
.gw-tx b { font-size: 24px; line-height: 1.2; }
.gw-tx span { font-size: 15px; line-height: 1.55; opacity: .85; }
.gw-tx i { font-style: normal; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; background: var(--geo-red, #BB311B); padding: 10px 18px; border-radius: 999px; align-self: flex-start; }
.gw-card:hover .gw-tx i { filter: brightness(1.1); }
@media (max-width: 760px) { .gw-card { grid-template-columns: 1fr; } .gw-ph { min-height: 190px; } .gw-ph::after { background: linear-gradient(180deg, rgba(23,18,15,0) 55%, #17120f); } .gw-tx { padding: 18px; } .gw-tx b { font-size: 20px; } .gw-strip i { width: 48px; height: 30px; } }

#cwalk { position: fixed; inset: 0; z-index: 9060; background: #050404; color: #fff; opacity: 0; transition: opacity .5s; font-family: var(--font); --dark: 0; --lx: 50vw; --ly: 45vh; }
#cwalk.in { opacity: 1; }
html.cw-open { overflow: hidden; }
#cwalk .cw-stage { position: absolute; inset: 0; }
#cwalk .cw-dark { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(0,0,0,calc(var(--dark) * .35)) 0%, rgba(0,0,0,var(--dark)) 100%); transition: background .8s; }
#cwalk.lamp .cw-dark { background: radial-gradient(circle 190px at var(--lx) var(--ly), rgba(255,236,190,.06) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.94) 100%); transition: none; }
#cwalk .cw-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .38s; }
#cwalk.walk .cw-fade { opacity: 1; }
.cw-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; gap: 14px; padding: 16px clamp(14px, 3vw, 28px); background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0)); pointer-events: none; }
.cw-top > * { pointer-events: auto; }
.cw-where { flex: 1; min-width: 0; }
.cw-where small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.cw-name { margin: 4px 0 0; font-size: clamp(17px, 2.2vw, 24px); line-height: 1.25; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.cw-n { display: inline-block; font-size: 12px; font-weight: 700; background: var(--geo-red, #BB311B); border-radius: 999px; padding: 3px 9px; vertical-align: middle; margin-right: 4px; }
.cw-depth { text-align: center; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; padding: 6px 12px; min-width: 70px; }
.cw-depth b { display: block; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.cw-depth span { font-size: 11px; opacity: .75; }
.cw-depth.word b { font-size: 15px; padding: 4px 0; }
.cw-depth.word span { display: none; }
.cw-x { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 17px; cursor: pointer; }
.cw-x:hover { background: rgba(255,255,255,.28); }
.cw-veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.88)); transition: opacity .6s; z-index: 2; }
.cw-veil.gone { opacity: 0; pointer-events: none; }
.cw-veil > div { max-width: 560px; text-align: center; }
.cw-veil small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #f2b134; font-weight: 700; }
.cw-veil h2 { font-size: clamp(26px, 4vw, 40px); margin: 8px 0 12px; }
.cw-veil p { line-height: 1.6; opacity: .9; margin: 0 0 20px; }
.cw-begin { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 700; font-size: 17px; color: #fff; background: var(--geo-red, #BB311B); border: 0; border-radius: 999px; padding: 14px 26px; cursor: pointer; }
.cw-begin:focus-visible, #cwalk button:focus-visible, .cw-pt:focus-visible { outline: 3px solid #f2b134; outline-offset: 2px; }
.cw-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px clamp(12px, 3vw, 28px) 10px; background: linear-gradient(0deg, rgba(0,0,0,.82) 30%, rgba(0,0,0,0)); display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; align-items: end; }
.cw-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cw-ctl button { font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cw-ctl button[data-cw="prev"] { width: 42px; justify-content: center; font-size: 22px; padding: 4px 0 8px; }
.cw-ctl .cw-go { background: var(--geo-red, #BB311B); border-color: transparent; font-size: 16px; padding: 11px 22px; }
.cw-ctl button:disabled { opacity: .35; cursor: default; }
.cw-ctl .cw-tog[aria-pressed="true"] { background: #f2b134; color: #1c1714; border-color: transparent; }
.cw-prof { position: relative; min-width: 0; }
.cw-prof svg { display: block; width: 100%; height: clamp(80px, 22vh, 200px); }
.cw-sez { filter: invert(1) grayscale(1); opacity: .42; }
.cw-path0 { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 6; }
.cw-path { fill: none; stroke: #f2b134; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; transition: stroke-dashoffset .8s; filter: drop-shadow(0 0 4px rgba(242,177,52,.8)); }
.cw-pt { cursor: pointer; outline: none; }
.cw-pt circle { fill: #1c1714; stroke: rgba(255,255,255,.7); stroke-width: 2.5; transition: r .2s, fill .2s; }
.cw-pt.done circle { fill: #f2b134; stroke: #f2b134; }
.cw-pt:hover circle, .cw-pt:focus-visible circle { r: 10; fill: #fff; }
.cw-pt.on circle { fill: var(--geo-red, #BB311B); stroke: #fff; }
.cw-me { pointer-events: none; transition: transform .8s cubic-bezier(.4,.1,.2,1); }
.cw-me circle:first-child { fill: rgba(187,49,27,.35); stroke: #fff; stroke-width: 2; animation: cwPulse 1.8s infinite; }
.cw-me circle:last-child { fill: #fff; }
@keyframes cwPulse { 50% { r: 15; opacity: .55; } }
.cw-peek { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); width: 150px; background: #1c1714; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.5); pointer-events: none; }
.cw-peek img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.cw-peek span { display: block; font-size: 12px; padding: 6px 8px; line-height: 1.3; }
.cw-cr { position: absolute; right: 12px; bottom: 2px; margin: 0; font-size: 10.5px; opacity: .55; pointer-events: none; }
@media (max-width: 760px) {
  .cw-bar { grid-template-columns: 1fr; padding-bottom: 16px; }
  .cw-ctl { justify-content: center; }
  .cw-ctl .cw-tog span { display: none; }
  .cw-prof svg { height: 70px; }
  .cw-cr { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cw-me, .cw-path, .cw-fade { transition: none; } .cw-me circle:first-child { animation: none; } }
.cw-skip { font-size: 14px; opacity: .75 !important; font-style: italic; }
.cw-toast { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); max-width: min(560px, 90vw); margin: 0; background: rgba(28,23,20,.9); border-left: 4px solid #f2b134; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
/* rilievo verticale: profilo a destra */
#cwalk.vert .cw-bar { grid-template-columns: 1fr; }
#cwalk.vert .cw-prof { position: fixed; right: clamp(10px, 2vw, 24px); top: 90px; bottom: 90px; width: clamp(130px, 18vw, 230px); background: rgba(0,0,0,.45); border-radius: 14px; padding: 8px; }
#cwalk.vert .cw-prof svg { height: 100%; }
#cwalk.vert .cw-peek { bottom: auto; top: 8px; right: calc(100% + 8px); left: auto !important; transform: none; }
@media (max-width: 760px) {
  #cwalk.vert .cw-prof { top: 120px; bottom: 110px; width: 92px; padding: 4px; }
}
.home-map a.il, .water a.il, .vr-band a.il, .gw-tx a.il { color: inherit; text-decoration-color: currentColor; }
#v360.float { position: fixed; z-index: 9070; }
.gp-walk .gw-card + .gw-card { margin-top: 16px; }
/* video 360° in evidenza nella scheda grotta */
.cs-v360 { padding-top: 22px; }
.v3-card { display: grid; grid-template-columns: 1.5fr 1fr; width: 100%; border: 0; padding: 0; text-align: left; font: inherit; color: #fff; background: #17120f; border-radius: 22px; overflow: hidden; cursor: pointer; box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.v3-card:focus-visible { outline: 3px solid #f2b134; outline-offset: 3px; }
.v3-ph { position: relative; min-height: 340px; background-size: cover; background-position: center; }
.v3-ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,.35)); }
.v3-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 128px; height: 128px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.75); display: grid; place-items: start center; padding-top: 10px; font-weight: 800; font-size: 13px; letter-spacing: .08em; z-index: 1; animation: v3spin 18s linear infinite; }
.v3-pl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: var(--geo-red, #BB311B); display: grid; place-items: center; font-size: 32px; z-index: 2; box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .2s; }
.v3-pl svg { margin-left: 4px; fill: currentColor; }
.v3-card:hover .v3-pl { transform: translate(-50%, -50%) scale(1.08); }
.v3-ph em { position: absolute; right: 12px; bottom: 12px; z-index: 2; background: rgba(0,0,0,.65); font-style: normal; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
@keyframes v3spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.v3-tx { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 26px 28px; }
.v3-tx small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #f2b134; font-weight: 700; }
.v3-tx b { font-size: 26px; line-height: 1.15; }
.v3-tx > span { font-size: 15px; line-height: 1.55; opacity: .85; }
.v3-tx ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; opacity: .9; }
.v3-tx li { display: flex; align-items: center; gap: 8px; }
.v3-tx i { font-style: normal; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; background: var(--geo-red, #BB311B); padding: 11px 20px; border-radius: 999px; align-self: flex-start; }
@media (max-width: 760px) { .v3-card { grid-template-columns: 1fr; } .v3-ph { min-height: 220px; } .v3-tx { padding: 18px; } .v3-tx b { font-size: 21px; } .v3-ring { width: 104px; height: 104px; } }
@media (prefers-reduced-motion: reduce) { .v3-ring { animation: none; } }
/* condividi: pulsanti eleganti, codice di incorporamento solo nel popup */
.sh2 { background: #fff; border-radius: 22px; padding: 22px 24px; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.sh2 .sh-head h3 { margin: 0 0 4px; }
.sh2 .sh-head p { margin: 0 0 16px; color: var(--geo-ink-soft); font-size: 14.5px; }
.sh-row2 { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-it { display: inline-flex; align-items: center; gap: 9px; font: inherit; font-weight: 700; font-size: 14px; color: var(--geo-ink); background: var(--geo-cream, #f7f2eb); border: 1px solid rgba(43,36,32,.1); border-radius: 999px; padding: 7px 16px 7px 7px; cursor: pointer; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s; }
.sh-it .sh-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--geo-red, #BB311B); transition: background .18s, color .18s; }
.sh-it:hover, .sh-it:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.1); }
.sh-it:hover .sh-ic { background: var(--geo-red, #BB311B); color: #fff; }
.sh-it.red { background: var(--geo-red, #BB311B); color: #fff; border-color: transparent; }
.sh-it.red .sh-ic { background: rgba(255,255,255,.18); color: #fff; }
.sh-it.ghost { background: transparent; }
.sh-it.ok .sh-ic { background: #3f6b3a; color: #fff; }
.sh-it:focus-visible { outline: 3px solid #f2b134; outline-offset: 2px; }
@media (max-width: 560px) { .sh-it span:last-child { font-size: 13px; } .sh-row2 { gap: 8px; } }
#embedBox { position: fixed; inset: 0; z-index: 9080; background: rgba(20,16,14,.6); display: grid; place-items: center; padding: 16px; animation: ebIn .25s ease; }
@keyframes ebIn { from { opacity: 0; } }
.eb-in { width: min(620px, 100%); background: #fff; border-radius: 22px; padding: 22px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: ebUp .3s cubic-bezier(.2,.8,.2,1); }
@keyframes ebUp { from { transform: translateY(18px); opacity: 0; } }
.eb-in header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.eb-in header small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--geo-red, #BB311B); font-weight: 700; }
.eb-in h2 { margin: 4px 0 0; font-size: 21px; }
.eb-in > p { color: var(--geo-ink-soft); margin: 10px 0 14px; }
.eb-sz { display: flex; gap: 8px; margin-bottom: 12px; }
.eb-sz button { flex: 1; font: inherit; font-weight: 700; font-size: 14px; border: 1.5px solid rgba(43,36,32,.15); background: #fff; border-radius: 12px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.eb-sz button small { font-weight: 400; opacity: .6; font-size: 12px; }
.eb-sz button[aria-pressed="true"] { border-color: var(--geo-red, #BB311B); background: rgba(187,49,27,.06); color: var(--geo-red, #BB311B); }
.eb-in textarea { width: 100%; font: 12.5px/1.5 ui-monospace, Menlo, monospace; border: 1px solid rgba(43,36,32,.15); border-radius: 12px; padding: 10px 12px; background: #faf7f3; resize: none; color: var(--geo-ink); }
.eb-act { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.eb-ok { color: #3f6b3a; font-weight: 700; font-size: 14px; }
/* foto più compatte */
.gp-mosaic.cmp { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; align-content: start; height: auto; }
.gp-mosaic.cmp .gp-ph { grid-column: span 1 !important; grid-row: span 1 !important; }
.gp-mosaic.cmp .gp-ph.m0 { grid-column: span 2 !important; grid-row: span 2 !important; }
@media (max-width: 760px) { .gp-mosaic.cmp { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 96px; } }
/* Marmorino: carta e fasi */
.gs { margin: 34px 0; }
.gs .gp-head .k, .rl .gp-head .k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--geo-red, #BB311B); font-weight: 700; }
.gs-map { display: grid; grid-template-columns: 1fr 270px; gap: 18px; background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 8px 26px rgba(0,0,0,.08); }
.gs-img { position: relative; aspect-ratio: 1800 / 1154; }
.gs-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease; }
.gs-img img.on { opacity: 1; }
.gs-leg { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.gs-leg button { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; font-size: 14px; line-height: 1.3; background: var(--geo-cream, #f7f2eb); border: 1.5px solid transparent; border-radius: 14px; padding: 9px 12px; cursor: pointer; transition: border-color .2s, transform .2s; }
.gs-leg button:hover { transform: translateX(3px); }
.gs-leg button[aria-pressed="true"] { border-color: var(--geo-ink, #2b2420); background: #fff; }
.gs-leg .sw { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: #1c1714; }
.gs-leg button[data-gs-l="2"] .sw { color: #fff; }
.gs-leg b { font-weight: 600; }
.gs-ph { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 18px; background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 8px 26px rgba(0,0,0,.08); align-items: center; }
.gs-stage { position: relative; aspect-ratio: 1000 / 600; }
.gs-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s; }
.gs-stage img.on { opacity: 1; }
.gs-tag { position: absolute; left: 6px; bottom: 0; font-size: 11.5px; color: var(--geo-ink-soft); }
.gs-tag b { color: var(--geo-red, #BB311B); }
.gs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gs-steps button { font: inherit; font-weight: 700; font-size: 13px; border: 0; background: var(--geo-cream, #f7f2eb); border-radius: 12px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gs-steps i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--geo-red, #BB311B); color: var(--geo-red, #BB311B); }
.gs-steps button[aria-selected="true"] { background: var(--geo-red, #BB311B); color: #fff; }
.gs-steps button[aria-selected="true"] i { background: #fff; }
.gs-txt { min-height: 4.6em; font-size: 16px; line-height: 1.5; margin: 14px 0 10px; }
.gs-ctl { display: flex; align-items: center; gap: 12px; }
.gs-play { flex: none; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 14px; color: #fff; background: var(--geo-red, #BB311B); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.gs-play[aria-pressed="true"] { background: var(--geo-ink, #2b2420); }
.gs-ctl input { flex: 1; accent-color: var(--geo-red, #BB311B); }
.gs-cr { font-size: 12px; color: var(--geo-ink-soft); margin-top: 10px; }
@media (max-width: 860px) { .gs-map, .gs-ph { grid-template-columns: 1fr; padding: 12px; } .gs-leg { flex-direction: row; flex-wrap: wrap; } .gs-leg button { flex: 1 1 45%; font-size: 13px; } }
/* Marmorino: riprese in loop */
.rl { margin: 34px 0; position: relative; }
.rl-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 42%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; }
.rl-it { scroll-snap-align: start; margin: 0; background: #17120f; color: #fff; border-radius: 18px; overflow: hidden; transition: transform .3s; }
.rl-it.on { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.18); }
.rl-v { position: relative; aspect-ratio: 16 / 9; background: #000; }
.rl-v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-n { position: absolute; left: 12px; top: 10px; font-weight: 800; font-size: 13px; background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 999px; }
.rl-it figcaption { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.rl-it figcaption b { font-size: 16px; }
.rl-it figcaption span { font-size: 14px; opacity: .85; line-height: 1.45; }
.rl-nav { position: absolute; right: 0; top: 10px; display: flex; gap: 6px; }
.rl-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(43,36,32,.15); background: #fff; font-size: 22px; cursor: pointer; }
.rl-cr { font-size: 12px; color: var(--geo-ink-soft); }
@media (max-width: 760px) { .rl-track { grid-auto-columns: 82%; } .rl-nav { display: none; } }
.gf-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.gf-btns { flex-direction: column; align-items: flex-start; gap: 14px; }
.gf-alt { display: flex; align-items: center; gap: 12px; max-width: 360px; width: 100%; text-align: left; font: inherit; color: var(--geo-ink); background: #fff; border: 1px solid rgba(43,36,32,.12); border-radius: 14px; padding: 6px 14px 6px 6px; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.gf-alt:hover, .gf-alt:focus-visible { box-shadow: 0 8px 20px rgba(0,0,0,.1); transform: translateY(-1px); }
.gf-alt:focus-visible { outline: 3px solid #f2b134; outline-offset: 2px; }
.gf-alt-ph { flex: none; width: 76px; height: 48px; border-radius: 9px; background-size: cover; background-position: center 30%; display: grid; place-items: center; }
.gf-alt-ph span { width: 26px; height: 26px; border-radius: 50%; background: rgba(187,49,27,.92); color: #fff; display: grid; place-items: center; }
.gf-alt-ph svg { width: 12px; height: 12px; margin-left: 2px; }
.gf-alt-tx { flex: 1; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.gf-alt-tx small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--geo-red, #BB311B); font-weight: 700; }
.gf-alt-tx b { font-size: 14.5px; font-weight: 600; }
.gf-alt-go { font-size: 22px; color: var(--geo-ink-soft); }
.my-logos { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.my-side .my-logos img { width: 110px; height: auto; }
.my-side .my-logos img.mg { width: 84px; }
@media (max-width: 760px) { .my-logos { flex-direction: row; gap: 16px; } .my-side .my-logos img { width: 74px; } .my-side .my-logos img.mg { width: 59px; } }
.gp-mosaic { aspect-ratio: auto !important; height: auto !important; box-shadow: none !important; background: none !important; }
.my-side { justify-content: flex-start; }
@media (max-width: 760px) { .my-side { flex-direction: column; align-items: center; } }
/* guida: puntini cliccabili */
.tut-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(43,36,32,.2); margin: 0 3px; cursor: pointer; transition: width .2s, background .2s; }
.tut-dots button.on { width: 22px; border-radius: 999px; background: var(--geo-red, #BB311B); }
.tut-ico svg.gi { width: 46px; height: 46px; stroke-width: 1.5; }