@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url(caratteri/cinzel-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(caratteri/cinzel-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(caratteri/cormorant-garamond-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(caratteri/cormorant-garamond-latin-400-italic.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(caratteri/cormorant-garamond-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url(caratteri/great-vibes-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(caratteri/jost-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url(caratteri/jost-latin-600-normal.woff2) format('woff2');}
/* NATIVITAS · landing immersiva — stile
   Blu notte e oro, come la presentazione di One Event Builders.
   I caratteri arrivano incorporati da costruisci.mjs (nessuna richiesta a terzi). */

/* Pagina volutamente solo notturna: blu notte e oro, come la presentazione. */
:root {
  color-scheme: dark;
  --notte: #03060f;
  --blu: #0a1430;
  --blu-2: #13214d;
  --oro: #e7b562;
  --oro-chiaro: #f8dda2;
  --oro-scuro: #a7772f;
  --oro-logo: #c1ac6e; /* il Rich Gold dei loghi ufficiali (Pantone 16-0836, dagli esecutivi di One Event Builders) */
  --ambra: #ffb35c;
  --ghiaccio: #bcd6ff;
  --testo: #f4ecdc;
  --tenue: rgba(244, 236, 220, .70);
  --tenuissimo: rgba(244, 236, 220, .45);
  --filo: rgba(231, 181, 98, .34);
  --filo-forte: rgba(231, 181, 98, .7);
  --vetro: linear-gradient(160deg, rgba(16, 27, 62, .66), rgba(4, 8, 20, .58));
  --f-titolo: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-corsivo: 'Great Vibes', 'Snell Roundhand', cursive;
  --f-testo: 'Cormorant Garamond', Garamond, Georgia, serif;
  --f-ui: 'Jost', 'Futura', system-ui, sans-serif;
  --margine: clamp(18px, 5.5vw, 92px);
  --barra: 74px;
  --curva: cubic-bezier(.22, .9, .25, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--notte);
  color: var(--testo);
  font-family: var(--f-testo);
  font-size: 18px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.con-cursore, body.con-cursore * { cursor: none; }
body.con-cursore input, body.con-cursore textarea { cursor: text; }
::selection { background: rgba(231, 181, 98, .45); color: #fff; }

button, input { font: inherit; color: inherit; }
a { color: var(--oro-chiaro); }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--oro); color: var(--notte); padding: 10px 14px; font-family: var(--f-ui); }
.salta:focus { top: 12px; }
:focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 4px; }

/* ---------- livelli fissi ---------- */
#scena, #scintille { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#scena { z-index: 0; touch-action: none; }
#scintille { z-index: 6; pointer-events: none; }
#etichette { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#velo {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(1, 3, 10, .72) 100%),
    linear-gradient(180deg, rgba(3, 6, 15, .55) 0, transparent 18%, transparent 78%, rgba(3, 6, 15, .65) 100%);
}
#velo::after { /* grana fine, appena percepibile */
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
  animation: grana 1.2s steps(6) infinite;
}
@keyframes grana { 0% { transform: translate(0, 0); } 50% { transform: translate(-3%, 2%); } 100% { transform: translate(2%, -3%); } }
body.scuro #velo { background: radial-gradient(120% 90% at 50% 45%, rgba(1, 3, 10, .35) 40%, rgba(1, 3, 10, .82) 100%); }

/* la vetrata del Belvedere: montanti sottili che incorniciano la città */
#vetrata {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  transition: opacity 1.4s var(--curva);
  background:
    linear-gradient(90deg, transparent calc(33.3% - 1px), rgba(231, 181, 98, .16) 33.3%, transparent calc(33.3% + 1px)),
    linear-gradient(90deg, transparent calc(66.6% - 1px), rgba(231, 181, 98, .16) 66.6%, transparent calc(66.6% + 1px)),
    linear-gradient(180deg, rgba(231, 181, 98, .08) 0, transparent 7%, transparent 92%, rgba(231, 181, 98, .12) 100%);
}
body.vetrata #vetrata { opacity: 1; }

/* ---------- caricamento ----------
   Dal 12/10 non copre più niente: la prima schermata si legge subito sul blu notte (vedi «mentre la scena si prepara»
   qui sotto) e in basso resta un avviso piccolo: la stellina che respira, «La magia prende vita…», la percentuale e un filo
   d'oro che si riempie (--carica, da 0 a 1, lo scrive principale.js). Quando la scena è pronta sfuma via, come prima. */
#caricamento {
  position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  width: fit-content; max-width: calc(100vw - 32px); margin-inline: auto; padding-bottom: 9px;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
  transition: opacity 1.2s ease, visibility 1.2s;
}
#caricamento::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--oro) calc(var(--carica, 0) * 100%), rgba(231, 181, 98, .16) 0);
}
body:not(.caricamento) #caricamento { opacity: 0; visibility: hidden; }
/* sul telefono in orizzontale in basso ci sono i bottoni: l'avviso va in alto a destra, dove durante l'attesa la barra è vuota */
@media (orientation: landscape) and (max-height: 520px) { #caricamento { top: calc(14px + env(safe-area-inset-top, 0px)); bottom: auto; left: auto; right: 16px; margin: 0; } }
html:not(.js) #caricamento { display: none; }
.car-stella {
  width: 22px; height: 22px; position: relative; flex: none;
  background:
    radial-gradient(circle, #fff 0 1px, rgba(255, 220, 160, .9) 1.6px, rgba(231, 181, 98, .35) 5px, transparent 11px),
    linear-gradient(90deg, transparent 0, rgba(255, 224, 170, .0) 20%, rgba(255, 224, 170, .9) 50%, rgba(255, 224, 170, 0) 80%, transparent 100%) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent 0, rgba(255, 224, 170, 0) 20%, rgba(255, 224, 170, .9) 50%, rgba(255, 224, 170, 0) 80%, transparent 100%) center / 1px 100% no-repeat;
  animation: respiro 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 196, 110, .8));
}
@keyframes respiro { 50% { transform: scale(1.18) rotate(8deg); } }
.car-nome { display: none; } /* il nome c'è già, nella barra e nel titolo */
.car-frase { margin: 0; font-style: italic; color: var(--tenue); font-size: 16px; white-space: nowrap; }
.car-puntini::after { content: "…"; animation: puntini 1.5s steps(4) infinite; display: inline-block; width: 1em; overflow: hidden; vertical-align: bottom; }
@keyframes puntini { from { width: 0; } to { width: 1em; } }
.car-percento { margin: 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .3em; color: var(--tenuissimo); }

/* ---------- mentre la scena si prepara (body.caricamento) e quando compare (body.svela, per 2,6 s) ----------
   La prima schermata si vede subito: il capitolo d'ingresso entra con la sua animazione (lo accende lo script che gli sta
   dietro, in pagina.html) e al posto del titolo nel cielo c'è la scritta del logo (.intro-titolo, più sotto). Aspettano,
   invisibili, la scena e i comandi che le servono, compresa la parte destra della barra (lingua, Esplora, Foto, Tour,
   Suono, Indice: alcuni li aggiunge il codice, e così niente si sposta mentre si legge). Quando la scena è pronta
   compaiono insieme, in dissolvenza; i tocchi e i tasti nel frattempo li ferma principale.js. */
html.js body.caricamento:not(.senza-3d) :is(#etichette, .binario, .piede-stato, .suggerimento-scorri, .chip-360, .comandi, #bottone-aiuto, .barra-destra) { opacity: 0; visibility: hidden; }
html.js body.caricamento:not(.senza-3d) #scena { opacity: 0; }
/* il cursore d'oro si muove solo con la scena: fino ad allora quello del sistema, che dice «aspetta» */
body.caricamento.con-cursore .cursore { display: none; }
body.caricamento.con-cursore, body.caricamento.con-cursore * { cursor: progress; }
html.js body.svela :is(#scena, #etichette, .binario, .piede-stato, .suggerimento-scorri, .chip-360, .comandi, #bottone-aiuto, .barra-destra) { transition: opacity 1.4s ease, visibility 0s; }
/* se all'arrivo del codice la pagina cambierà lingua (lo script nella testa di pagina.html), i testi aspettano lui */
html.js.lingua-in-arrivo body.caricamento :is(#capitoli, .car-frase) { visibility: hidden; }

/* ---------- barra in alto ---------- */
.barra {
  position: fixed; left: 0; right: 0; top: 0; height: var(--barra); z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margine);
  pointer-events: none;
}
.barra > * { pointer-events: auto; }
.marchio { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; text-decoration: none; color: var(--testo); align-items: center; }
.marchio-stella { grid-row: 1 / 3; color: var(--oro); font-size: 20px; text-shadow: 0 0 12px rgba(231, 181, 98, .9); transition: transform .8s var(--curva); }
.marchio:hover .marchio-stella { transform: rotate(180deg) scale(1.2); }
.marchio-nome { font-family: var(--f-titolo); letter-spacing: .42em; font-size: 15px; line-height: 1; }
/* i loghi ufficiali (la stella e la scritta, SVG in linea: costruisci.mjs) al posto di «✦» e del NATIVITAS scritto */
.barra .marchio-stella:has(svg) { color: var(--oro-logo); text-shadow: none; filter: drop-shadow(0 0 7px rgba(231, 181, 98, .5)); }
.barra .marchio-stella svg { display: block; width: 26px; height: auto; }
.barra .marchio-nome svg { display: block; height: 12px; width: auto; color: var(--oro-logo); }
.marchio-sotto { font-family: var(--f-corsivo); font-size: 17px; color: var(--oro); line-height: 1.1; }
.barra-destra { display: flex; align-items: center; gap: 6px; }
.barra-data { font-family: var(--f-ui); font-size: 11px; letter-spacing: .26em; color: var(--tenue); margin-right: 14px; }
.barra-bottone {
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px;
  background: transparent; border: 1px solid transparent; border-radius: 40px;
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--testo);
  transition: border-color .4s, background .4s;
}
.barra-bottone:hover, .barra-bottone[aria-pressed="true"], .barra-bottone[aria-expanded="true"] { border-color: var(--filo); background: rgba(10, 20, 48, .45); }
.icona-indice { display: grid; gap: 5px; width: 22px; }
.icona-indice i { display: block; height: 1px; background: var(--oro-chiaro); transition: transform .5s var(--curva), width .5s; }
.icona-indice i:last-child { width: 65%; justify-self: end; }
.barra-bottone:hover .icona-indice i:last-child { width: 100%; }
[aria-expanded="true"] .icona-indice i:first-child { transform: translateY(3px) rotate(45deg); }
[aria-expanded="true"] .icona-indice i:last-child { width: 100%; transform: translateY(-3px) rotate(-45deg); }
.icona-suono { display: flex; align-items: center; gap: 2px; height: 14px; }
.icona-suono i { width: 2px; height: 3px; background: var(--oro-chiaro); border-radius: 1px; }
[aria-pressed="true"] .icona-suono i { animation: barretta 1s ease-in-out infinite; }
[aria-pressed="true"] .icona-suono i:nth-child(2) { animation-delay: -.3s; }
[aria-pressed="true"] .icona-suono i:nth-child(3) { animation-delay: -.6s; }
[aria-pressed="true"] .icona-suono i:nth-child(4) { animation-delay: -.15s; }
@keyframes barretta { 50% { height: 13px; } }
.icona-tour { width: 0; height: 0; border-left: 8px solid var(--oro-chiaro); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
[aria-pressed="true"] .icona-tour { width: 9px; height: 10px; border: 0; border-left: 3px solid var(--oro-chiaro); border-right: 3px solid var(--oro-chiaro); }

/* ---------- binario dei capitoli ---------- */
.binario {
  position: fixed; right: calc(var(--margine) * .45); top: 50%; transform: translateY(-50%); z-index: 20;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.binario button {
  display: flex; align-items: center; gap: 12px; height: 18px; padding: 0; background: none; border: 0;
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--tenue);
}
.binario button span { opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .35s var(--curva); white-space: nowrap; }
.binario button i { display: block; width: 14px; height: 1px; background: rgba(244, 236, 220, .35); transition: width .5s var(--curva), background .5s; }
.binario button:hover span, .binario button.attivo span { opacity: 1; transform: none; }
.binario button:hover i { width: 22px; background: var(--oro-chiaro); }
.binario button.attivo { color: var(--oro-chiaro); }
.binario button.attivo i { width: 36px; background: var(--oro); box-shadow: 0 0 10px var(--oro); }

.piede-stato {
  position: fixed; left: var(--margine); bottom: 28px; z-index: 20; display: flex; gap: 16px; align-items: baseline;
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--tenue);
  pointer-events: none;
}
.stato-numero b { color: var(--oro-chiaro); font-weight: 400; }
.stato-nome { color: var(--testo); }

.suggerimento-scorri {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 20; display: grid; justify-items: center; gap: 8px;
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--tenue);
  transition: opacity .8s; pointer-events: none;
}
body:not(.al-primo) .suggerimento-scorri { opacity: 0; }
.mouse { width: 20px; height: 32px; border: 1px solid var(--filo-forte); border-radius: 12px; position: relative; }
.mouse i { position: absolute; left: 50%; top: 7px; width: 2px; height: 6px; margin-left: -1px; background: var(--oro-chiaro); border-radius: 2px; animation: rotella 1.8s var(--curva) infinite; }
@keyframes rotella { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(11px); opacity: 0; } }

.chip-360 {
  position: fixed; right: var(--margine); bottom: 24px; z-index: 20; display: flex; align-items: center; gap: 10px;
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--tenue);
  opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s var(--curva); pointer-events: none;
}
body.modo-360 .chip-360 { opacity: 1; transform: none; }
.chip-icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filo-forte); color: var(--oro-chiaro); letter-spacing: .05em; font-size: 11px; position: relative; }
.chip-icona::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid transparent; border-top-color: var(--oro); animation: gira 2.6s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.chip-giroscopio {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(52vh + 22px); z-index: 21;
  background: rgba(8, 14, 34, .7); border: 1px solid var(--filo-forte); border-radius: 30px; padding: 10px 18px;
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--oro-chiaro);
}
/* le cose da fare (gesti.js): l'invito a scuotere il telefono, il permesso dei sensori nell'aiuto */
.chip-neve { bottom: calc(198px + env(safe-area-inset-bottom, 0px)); white-space: nowrap; animation: entra-chip .6s var(--curva); box-shadow: 0 0 24px rgba(188, 214, 255, .18); }
@keyframes entra-chip { from { opacity: 0; transform: translate(-50%, 14px); } }
body.evento .chip-neve { display: none; }
.aiuto-attiva { margin-left: 6px; height: 22px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--filo-forte); background: rgba(231, 181, 98, .12); color: var(--oro-chiaro); font-family: var(--f-ui); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; vertical-align: 2px; }
.aiuto-attiva:hover { background: var(--oro); color: var(--notte); }
#scheda-esplora-azione[hidden] { display: none; }
/* acceso resta a vista, più discreto, con un punto d'oro che respira: si tocca per spegnerlo */
.chip-giroscopio[aria-pressed="true"] { display: flex; align-items: center; gap: 9px; padding: 8px 15px; background: rgba(8, 14, 34, .5); color: var(--testo); border-color: rgba(231, 181, 98, .55); }
.chip-giroscopio[aria-pressed="true"][hidden] { display: none; }
.chip-giroscopio[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oro-chiaro); box-shadow: 0 0 8px var(--oro); animation: giro-respira 2.4s ease-in-out infinite; }
@keyframes giro-respira { 50% { opacity: .35; transform: scale(.7); } }
/* tre secondi dopo l'accensione (interfaccia.js) resta solo il punto, nell'angolo sotto il «360°»: non copre la scena */
.chip-giroscopio.raccolto[aria-pressed="true"] { left: auto; right: 14px; bottom: auto; top: calc(var(--barra) + 62px); transform: none; width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 0; letter-spacing: 0; }
body.con-striscia .chip-giroscopio.raccolto[aria-pressed="true"] { top: calc(var(--barra) + 88px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { .chip-giroscopio[aria-pressed="true"]::before { animation: none; } }
body.esplora #bottone-giroscopio, body.solo-scorrimento #bottone-giroscopio { display: none; }
/* Il giroscopio è sempre un bottone tondo nella colonna di destra, come il «?» (Adriano, 16/10/2026): spento mostra ⟲,
   acceso il punto d'oro che respira. Il nome resta per i lettori di schermo (aria-label, interfaccia.js) e nell'aiuto.
   Sul telefono sta sotto il «?» (più giù, nel blocco del telefono); altrove sotto il «360°». */
#bottone-giroscopio {
  left: auto; right: 14px; bottom: auto; top: calc(var(--barra) + 62px); transform: none;
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  font-size: 0; letter-spacing: 0; background: rgba(3, 6, 15, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.con-striscia #bottone-giroscopio { top: calc(var(--barra) + 88px + env(safe-area-inset-top, 0px)); }
#bottone-giroscopio[hidden] { display: none; }
/* la freccia che gira: un disegno (maschera SVG) e non un carattere, così sta esattamente al centro del cerchio */
#bottone-giroscopio::after { content: ""; width: 20px; height: 20px; background: var(--oro-chiaro); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6'/%3E%3Cpath d='M3.5 3.5V8.5h5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6'/%3E%3Cpath d='M3.5 3.5V8.5h5'/%3E%3C/svg%3E") center / contain no-repeat; }
#bottone-giroscopio[aria-pressed="true"] { border-color: rgba(231, 181, 98, .7); background: rgba(231, 181, 98, .14); }
#bottone-giroscopio[aria-pressed="true"]::after { content: none; }

/* ascensore verso il 39° piano */
#ascensore {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none;
  display: grid; justify-items: center; opacity: 0; transition: opacity .5s;
}
body.in-ascensore #ascensore { opacity: 1; }
.asc-piano { font-family: var(--f-titolo); font-size: clamp(70px, 12vw, 170px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--oro-chiaro); text-shadow: 0 0 40px rgba(231, 181, 98, .35); }
.asc-piano b { font-weight: 400; }
.asc-testo { font-family: var(--f-ui); letter-spacing: .6em; text-transform: uppercase; font-size: 12px; color: var(--oro-chiaro); }

/* ---------- capitoli ---------- */
#capitoli { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.capitolo { position: absolute; inset: 0; visibility: hidden; }
.capitolo.attivo { visibility: visible; }
.capitolo.attivo .pannello { pointer-events: auto; }
/* l'apertura e il titolo della galleria lasciano passare il mouse alla scena: si clicca solo sui pulsanti */
.capitolo.attivo .intro a, .capitolo.attivo .intro button { pointer-events: auto; }

.pannello {
  position: absolute; top: calc(50% + var(--barra) * .25); transform: translateY(-50%);
  left: var(--margine); width: min(470px, 38vw);
  max-height: calc(100vh - var(--barra) - 96px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--filo) transparent;
  padding: 34px 36px 32px;
  background: var(--vetro);
  border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 236, 200, .06);
  opacity: 0; transition: opacity .6s ease;
}
.capitolo.attivo .pannello { opacity: 1; }
.capitolo.uscita .pannello { opacity: 0; transition-duration: .35s; }
[data-lato="destra"] .pannello { left: auto; right: calc(var(--margine) + 40px); }
[data-lato="centro"] .pannello { left: 50%; transform: translate(-50%, -50%); }
[data-larghezza="ampia"] .pannello { width: min(820px, 56vw); }
[data-lato="centro"][data-larghezza="ampia"] .pannello { width: min(1060px, 82vw); }
.pannello-stretto { width: min(400px, 32vw) !important; }
.pannello::-webkit-scrollbar { width: 4px; }
.pannello::-webkit-scrollbar-thumb { background: var(--filo); }
/* ornamenti d'angolo, come le cornici della presentazione */
.pannello:not(.pannello-libero)::before, .pannello:not(.pannello-libero)::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 1px solid var(--oro); opacity: .8;
}
.pannello::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.pannello::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.capitolo[data-stile="libero"][data-lato="sinistra"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 6, 15, .82) 0, rgba(3, 6, 15, .55) 32%, transparent 62%); pointer-events: none; opacity: 0; transition: opacity 1s; }
.capitolo.attivo[data-stile="libero"][data-lato="sinistra"]::before { opacity: 1; }
.pannello-libero { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-left: 0; }
.pannello-libero .testo, .pannello-libero .elenco-stelle, .pannello-libero .sottotitolo { text-shadow: 0 2px 18px rgba(0, 0, 0, .9); }

/* tipografia */
.occhiello { margin: 0 0 14px; font-family: var(--f-ui); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--oro); }
.titolo {
  --oro-testo: linear-gradient(180deg, #fff6df 0%, var(--oro-chiaro) 38%, var(--oro) 70%, #c38b3e 100%);
  margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(28px, 3.2vw, 50px); line-height: 1.08; letter-spacing: .03em;
  color: var(--oro-chiaro);
  text-shadow: 0 2px 18px rgba(231, 181, 98, .22);
}
.titolo .lettera { display: inline-block; opacity: 0; transform: translateY(.45em) rotateX(-70deg); filter: blur(6px); transform-origin: 50% 100%;
  background: var(--oro-testo); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.capitolo.attivo .titolo .lettera { animation: lettera .9s var(--curva) forwards; animation-delay: calc(var(--i) * 22ms + 180ms); }
@keyframes lettera { to { opacity: 1; transform: none; filter: none; } }
.titolo .parola { display: inline-block; white-space: nowrap; }
.sottotitolo { margin: 14px 0 0; font-style: italic; font-size: 22px; line-height: 1.3; color: var(--tenue); }
.testo { margin: 0 0 14px; font-size: 19px; line-height: 1.55; color: rgba(244, 236, 220, .88); }
.testo.piccolo { font-size: 16px; color: var(--tenue); }
.testo strong, .chiusa strong { color: var(--oro-chiaro); font-weight: 600; }
.testo em { color: var(--oro-chiaro); }
.chiusa { margin: 18px 0 0; font-size: 21px; font-style: italic; }
.nota { margin: 10px 0 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .14em; color: var(--tenuissimo); line-height: 1.6; }
/* l'avviso sulla privacy sotto il modulo del cielo dei desideri: fuori dalla .nota, che desideri.js riscrive */
.nota-privacy { margin: 6px 0 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .14em; color: var(--tenuissimo); line-height: 1.6; }
.fonte { margin: 10px 0 0; font-family: var(--f-ui); font-size: 10px; letter-spacing: .12em; color: var(--tenuissimo); }
.credito { margin: 16px 0 0; font-family: var(--f-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenuissimo); }

.filetto { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--oro); font-size: 12px; }
.filetto::before, .filetto::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--filo-forte)); }
.filetto::after { background: linear-gradient(90deg, var(--filo-forte), transparent); }
.filetto span { text-shadow: 0 0 10px var(--oro); }
.pannello .filetto::before { flex: 0 0 0; }
.pannello .filetto { justify-content: flex-start; }
.pannello .filetto::after { flex: 0 0 120px; }

.elenco-stelle { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.elenco-stelle li { position: relative; padding-left: 24px; font-size: 19px; color: var(--testo); }
.elenco-stelle li::before { content: "✦"; position: absolute; left: 0; top: 3px; font-size: 11px; color: var(--oro); }

.schede { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 18px 0; background: var(--filo); border: 1px solid var(--filo); }
.schede-quattro { grid-template-columns: repeat(4, 1fr); }
.schede > div { background: rgba(5, 10, 26, .82); padding: 12px 14px; transition: background .4s; }
.schede > div:hover { background: rgba(28, 40, 82, .82); }
.schede dt { font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); margin-bottom: 5px; }
.schede dd { margin: 0; font-family: var(--f-titolo); font-size: 18px; color: var(--oro-chiaro); line-height: 1.2; }

.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.bottone-oro, .bottone-filo {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 26px; border-radius: 50px; overflow: hidden; text-decoration: none;
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
}
.bottone-oro { color: #1b1206; border: 0; background: linear-gradient(120deg, #b9843c, var(--oro) 30%, var(--oro-chiaro) 50%, var(--oro) 70%, #b9843c); background-size: 220% 100%; box-shadow: 0 8px 30px rgba(231, 181, 98, .28); transition: background-position .9s var(--curva), box-shadow .5s, transform .4s var(--curva); }
.bottone-oro:hover { background-position: 100% 0; box-shadow: 0 10px 44px rgba(231, 181, 98, .55); transform: translateY(-1px); }
.bottone-filo { color: var(--oro-chiaro); background: rgba(5, 10, 26, .4); border: 1px solid var(--filo-forte); transition: background .4s, border-color .4s; }
.bottone-filo:hover { background: rgba(231, 181, 98, .12); border-color: var(--oro); }

/* foto (solo nella versione con le immagini del progetto) */
.foto-riga { display: flex; gap: 8px; margin: 18px 0 4px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.foto-riga::-webkit-scrollbar { display: none; }
figure[data-foto] { margin: 0; position: relative; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--filo); background: #050a18; }
.foto-riga figure { width: 120px; height: 84px; }
figure[data-foto] img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.2s var(--curva), filter .6s; filter: saturate(.92) brightness(.9); }
figure[data-foto]:hover img { transform: scale(1.14); filter: none; }
figure[data-foto]::after { content: "⤢"; position: absolute; right: 6px; bottom: 4px; font-size: 13px; color: var(--oro-chiaro); opacity: 0; transition: opacity .4s; text-shadow: 0 0 6px #000; }
figure[data-foto]:hover::after { opacity: 1; }
body:not(.con-foto) figure[data-foto], body:not(.con-foto) .foto-riga, body:not(.con-foto) .solo-foto { display: none; }

/* intro */
.intro { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; text-align: center; padding: 0 var(--margine); }
.intro::before { content: ""; position: absolute; left: 50%; top: 58%; width: min(980px, 110vw); height: 52vh; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(2, 4, 12, .62), rgba(2, 4, 12, .3) 60%, transparent); pointer-events: none; z-index: -1; }
.intro > * { text-shadow: 0 2px 20px rgba(0, 0, 0, .85); }
.intro-presenta { margin: 0; display: flex; align-items: center; gap: 14px; font-family: var(--f-ui); font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--tenue); transform: translateY(-15vh); }
.intro-presenta .logo-oeb { height: 40px; width: auto; opacity: .92; }
.intro-titolo { margin: 0; height: 18vh; }
/* La prima schermata ricompone il logo ufficiale: «One Event Builders presenta», l'emblema (la stella sorretta dagli
   angioletti su Palazzo Lombardia), la scritta NATIVITAS, «Christmas Winter Garden». La scritta sta dove la disegna la
   scena (.logo-scritta, qui sotto): l'emblema le sta sopra, a 12 px, alto quanto lo spazio fino alla barra in alto lascia
   (meno 66 px: «presenta», 40 px, e i due respiri), al più 170 px; «presenta» gli sta sopra, a 10 px, mai sotto la barra.
   Tutti e due escono dalla griglia (position: absolute) e la riga di «presenta» resta come margine sopra il titolo, così
   il resto della pagina non si sposta. --titolo-cima è il bordo alto della scritta: centro meno metà altezza, con la
   scritta larga 8,1 volte la sua altezza. Sulle finestre basse e larghe (telefono in orizzontale) l'emblema non c'è. */
.intro {
  --titolo-cima: calc(38vh - 4.667vw);
  --emblema-alto: clamp(0px, calc(var(--titolo-cima) - var(--barra) - 66px), 170px);
}
@media (orientation: portrait) { .intro { --titolo-cima: calc(29.8vh - 4.408vw); } }
html.js body:not(.senza-3d) .intro-titolo { margin-top: 40px; }
html.js body:not(.senza-3d) .intro-presenta {
  position: absolute; left: 0; right: 0; width: fit-content; margin-inline: auto;
  top: max(calc(var(--barra) + 4px), calc(var(--titolo-cima) - 12px - var(--emblema-alto) - 10px - 40px));
}
html.js body:not(.senza-3d) .intro-presenta[data-anim] { transform: translateY(18px); }
html.js body:not(.senza-3d) .capitolo.attivo .intro-presenta[data-anim] { transform: none; }
.intro-titolo .logo-emblema {
  position: absolute; left: 0; right: 0; margin-inline: auto; top: calc(var(--titolo-cima) - 12px - var(--emblema-alto));
  height: var(--emblema-alto); width: auto; aspect-ratio: 456.9 / 401; color: var(--oro-logo); pointer-events: none;
  /* la stessa entrata degli altri elementi ([data-anim], più sotto), fra «presenta» e «Christmas Winter Garden»; non è
     un [data-anim] per non cambiare i ritardi a cascata degli altri (Interfaccia.preparaTesti li conta) */
  opacity: 0; transform: translateY(18px); filter: drop-shadow(0 0 14px rgba(231, 181, 98, .28)) blur(5px);
  transition: opacity .9s var(--curva), transform 1s var(--curva), filter .9s;
}
.capitolo.attivo .intro-titolo .logo-emblema { opacity: 1; transform: none; filter: drop-shadow(0 0 14px rgba(231, 181, 98, .28)) blur(0); transition-delay: 335ms; }
.capitolo.uscita .intro-titolo .logo-emblema { opacity: 0; transform: translateY(-12px); filter: drop-shadow(0 0 14px rgba(231, 181, 98, .28)) blur(4px); transition-delay: 0s; transition-duration: .35s; }
@media (orientation: landscape) and (max-height: 520px) { .intro-titolo .logo-emblema { display: none; } }
/* Sui computer bassi (1366 × 768, 1280 × 720) la scritta, larga com'è nella scena, scenderebbe su «Christmas Winter
   Garden»: lì la riga del titolo si allunga quanto serve perché il testo sotto parta 8-10 px sotto la scritta. Il conto:
   il testo sotto il titolo, dal corsivo ai bottoni, è alto circa 280 px, e la griglia è centrata; dove basta, 18vh come
   sempre (1350 × 940, 1920 × 1080: niente cambia). */
@media (orientation: landscape) and (min-width: 900px) {
  html.js body:not(.senza-3d) .intro-titolo { height: max(18vh, calc(260px + 9.33vw - 24vh)); }
}
/* La scritta ufficiale del logo nel titolo. Nella versione in 3D il titolo è nella scena (la stessa scritta, fatta di
   particelle d'oro: creaTitolo in luoghi.js): qui si vede solo mentre la scena si prepara, esattamente dove poi la
   scena la disegna, e sfuma mentre le particelle si compongono. Il posto e la misura sono quelli del titolo della scena
   visto dalla camera del primo capitolo, misurati il 12/10 su nove misure di finestra: largo il 75,6% della finestra e
   centrato al 38% dell'altezza se è orizzontale, 71,4% e 29,8% se è verticale (si misura di nuovo se cambia la camera
   del primo capitolo o la larghezza del titolo in mondo.js). Senza 3D resta, al centro della prima pagina. Il nome per i
   lettori di schermo è il testo nascosto accanto; l'SVG è decorativo. */
.intro-titolo .logo-scritta {
  position: absolute; left: 50%; top: 38vh; width: 75.6vw; height: auto; transform: translate(-50%, -50%);
  color: var(--oro-logo); filter: drop-shadow(0 0 22px rgba(231, 181, 98, .3)); opacity: 0; visibility: hidden; pointer-events: none;
}
html.js body.caricamento:not(.senza-3d) .intro-titolo .logo-scritta { opacity: 1; visibility: visible; animation: titolo-entra 1.1s var(--curva) .25s both; }
html.js body.svela:not(.senza-3d) .intro-titolo .logo-scritta { visibility: visible; animation: titolo-esce 1.8s ease forwards; }
@keyframes titolo-entra { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); } }
@keyframes titolo-esce { from { opacity: 1; } to { opacity: 0; } }
@media (orientation: portrait) { .intro-titolo .logo-scritta { top: 29.8vh; width: 71.4vw; } }
/* Telefono in verticale (15/10/2026, Adriano: «la scritta NATIVITAS si tocca con Winter Garden»): la griglia centrata
   faceva partire «Christmas Winter Garden» sopra la scritta. Qui il testo parte sotto la scritta, con lo stesso conto
   della scritta: bordo basso = centro 29,8vh + metà altezza 4,408vw (larga 71,4vw, 8,1 volte la sua altezza), più
   18 px di respiro. I margini sotto si stringono un poco, perché i bottoni restino sopra la barra del caricamento. */
@media (orientation: portrait) {
  html.js body:not(.senza-3d) .intro { align-content: start; padding-top: calc(29.8vh + 4.408vw + 18px); }
  html.js body:not(.senza-3d) .intro-titolo { height: 0; margin-top: 0; }
  html.js body:not(.senza-3d) .intro .filetto { margin: 14px 0 10px; }
  html.js body:not(.senza-3d) .intro-azioni { margin-top: 22px; }
}
.intro-corsivo { margin: 0; font-family: var(--f-corsivo); font-size: clamp(34px, 4.6vw, 64px); color: var(--oro-chiaro); text-shadow: 0 0 30px rgba(231, 181, 98, .45); line-height: 1; }
.intro .filetto { width: min(420px, 70vw); margin: 18px 0 14px; }
.intro-luogo { margin: 0; font-family: var(--f-titolo); font-size: clamp(13px, 1.25vw, 17px); letter-spacing: .34em; color: var(--testo); }
.intro-date { margin: 10px 0 0; font-family: var(--f-titolo); font-size: clamp(16px, 1.7vw, 24px); letter-spacing: .14em; color: var(--oro); }
.intro-oltre { margin: 8px 0 0; font-style: italic; color: var(--tenue); font-size: 17px; }
.intro-azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
/* l'invito all'inglese per chi ha il browser in un'altra lingua (lingua.js, invitoInglese): una riga discreta sotto le
   date, che entra dopo il resto della prima schermata */
.invito-inglese { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; font-family: var(--f-ui); font-size: 13px; letter-spacing: .06em; animation: invito-entra .8s var(--curva) 1.4s both; }
.invito-inglese a { color: var(--oro-chiaro); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(231, 181, 98, .45); }
.invito-inglese button { background: none; border: 0; color: var(--tenue); font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer; }
.invito-inglese :is(a, button):focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; border-radius: 4px; }
@keyframes invito-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .invito-inglese { animation: none; } }

/* animazione d'ingresso degli elementi */
[data-anim] { opacity: 0; transform: translateY(18px); filter: blur(5px); transition: opacity .9s var(--curva), transform 1s var(--curva), filter .9s; }
.capitolo.attivo [data-anim] { opacity: 1; transform: none; filter: none; transition-delay: calc(var(--d, 0) * 70ms + 300ms); }
.capitolo.uscita [data-anim] { opacity: 0; transform: translateY(-12px); filter: blur(4px); transition-delay: 0s; transition-duration: .35s; }
.intro-presenta[data-anim] { transform: translateY(calc(-15vh + 18px)); }
.capitolo.attivo .intro-presenta[data-anim] { transform: translateY(-15vh); }
/* Sugli schermi bassi dei portatili (1280 × 720, 1366 × 768) «One Event Builders presenta» sale meno: con -15vh
   finiva sotto la barra in alto, sopra «IT · EN» e i bottoni. */
@media (min-width: 900px) and (max-height: 820px) {
  .intro-presenta { transform: translateY(-6vh); }
  .intro-presenta[data-anim] { transform: translateY(calc(-6vh + 18px)); }
  .capitolo.attivo .intro-presenta[data-anim] { transform: translateY(-6vh); }
}

/* cattedrale: colonne */
.colonne { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 4px 0 18px; }
.colonna h3 { margin: 0 0 8px; font-family: var(--f-titolo); font-weight: 500; font-size: 16px; letter-spacing: .08em; color: var(--oro-chiaro); padding-bottom: 8px; border-bottom: 1px solid var(--filo); }
.colonna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 16.5px; color: rgba(244, 236, 220, .86); }

/* mappa: scheda del luogo ed elenco */
.scheda-luogo { min-height: 120px; }
.scheda-luogo .luogo-foto { width: 100%; height: 150px; margin: 0 0 12px; }
.scheda-luogo h3 { margin: 0 0 6px; font-family: var(--f-titolo); font-weight: 500; font-size: 22px; color: var(--oro-chiaro); }
.scheda-luogo .vai { margin-top: 6px; }
.elenco-luoghi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.elenco-luoghi button { background: rgba(5, 10, 26, .5); border: 1px solid var(--filo); border-radius: 30px; padding: 7px 12px; font-family: var(--f-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); transition: all .35s; }
.elenco-luoghi button:hover, .elenco-luoghi button.attivo { color: var(--notte); background: var(--oro); border-color: var(--oro); }

/* punti luce sulla mappa e etichette dei luoghi */
.punto-luce { position: absolute; left: 0; top: 0; pointer-events: auto; background: none; border: 0; padding: 0; width: 0; height: 0; opacity: 0; transition: opacity .6s; }
.punto-luce.visibile { opacity: 1; transition: opacity .9s .5s; } /* dopo il velo della mappa, con calma */
.planimetria { width: 100%; height: 130px; margin: 16px 0 0; }
.punto-luce i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff 0 2px, var(--oro) 3px, rgba(231, 181, 98, .0) 8px); box-shadow: 0 0 14px var(--oro); }
.punto-luce i::before, .punto-luce i::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--oro); animation: onda 2.4s ease-out infinite; }
.punto-luce i::after { animation-delay: 1.2s; }
@keyframes onda { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.punto-luce span { position: absolute; left: 14px; top: -10px; white-space: nowrap; font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--testo); background: rgba(3, 6, 15, .72); border: 1px solid var(--filo); padding: 4px 9px; border-radius: 20px; transition: background .3s, color .3s; }
.punto-luce:hover span, .punto-luce.attivo span { background: var(--oro); color: var(--notte); }
.etichetta-luogo { position: absolute; left: 0; top: 0; display: grid; justify-items: center; opacity: 0; transition: opacity .8s; font-family: var(--f-ui); text-transform: uppercase; color: var(--testo); }
.etichetta-luogo.visibile { opacity: 1; }
.etichetta-luogo b { font-weight: 400; font-size: 10px; letter-spacing: .26em; white-space: nowrap; text-shadow: 0 0 10px #000; transform: translateY(-100%); }
.etichetta-luogo em { font-style: normal; font-size: 9px; letter-spacing: .2em; color: var(--oro-chiaro); transform: translateY(-100%); }
.etichetta-luogo::after { content: ""; width: 1px; height: 46px; background: linear-gradient(var(--oro), transparent); transform: translateY(-100%); order: -1; }
.etichetta-luogo { flex-direction: column-reverse; }

/* SYNTONY: il pensiero che resta accanto alla sua stella */
.pensiero { position: absolute; left: 0; top: 0; max-width: 260px; text-align: center; font-family: var(--f-testo); font-style: italic; font-size: 20px; color: var(--oro-chiaro); text-shadow: 0 0 16px rgba(231, 181, 98, .7), 0 0 4px #000; opacity: 0; transition: opacity .6s; white-space: normal; }

/* SYNTONY: il desiderio */
.desiderio { margin: 20px 0 6px; padding: 18px; border: 1px solid var(--filo); background: rgba(3, 6, 15, .45); }
.desiderio label { display: block; font-style: italic; font-size: 18px; margin-bottom: 12px; color: var(--testo); }
.desiderio-riga { display: flex; gap: 8px; }
.desiderio input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--filo-forte); border-radius: 50px; font-family: var(--f-testo); font-size: 18px; color: var(--testo); outline: none; transition: border-color .4s, box-shadow .4s; }
.desiderio input:focus { border-color: var(--oro-chiaro); box-shadow: 0 0 24px rgba(231, 181, 98, .25); }
.desiderio input::placeholder { color: var(--tenuissimo); font-style: italic; }
.verso { margin: 22px 0 0; font-family: var(--f-testo); font-size: 24px; line-height: 1.35; color: var(--testo); padding-left: 2.2em; }
.verso em { color: var(--ambra); }

/* calendario */
.conto { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 20px 0 18px; padding: 16px 20px; border: 1px solid var(--filo); background: rgba(3, 6, 15, .45); }
.conto-titolo { margin: 0; font-style: italic; font-size: 19px; color: var(--tenue); max-width: 150px; }
.conto-cifre { display: flex; gap: 10px; }
.conto-cifre div { display: grid; justify-items: center; min-width: 64px; }
.conto-cifre b { font-family: var(--f-titolo); font-weight: 500; font-size: 38px; line-height: 1; color: var(--oro-chiaro); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(231, 181, 98, .4); }
.conto-cifre span { font-family: var(--f-ui); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--tenue); margin-top: 6px; }
.linea-tempo { list-style: none; margin: 0 0 18px; padding: 0; position: relative; display: grid; gap: 0; }
.linea-tempo::before { content: ""; position: absolute; left: 92px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(var(--oro), var(--filo) 70%, rgba(188, 214, 255, .5)); }
.linea-tempo li { display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: baseline; padding: 6px 0; position: relative; }
.linea-tempo li::before { content: ""; position: absolute; left: 88px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--notte); border: 1px solid var(--oro); }
.linea-tempo li.evidenza::before { background: var(--oro); box-shadow: 0 0 12px var(--oro); }
.linea-tempo li.dopo::before { border-color: var(--ghiaccio); }
.linea-tempo time { font-family: var(--f-titolo); font-size: 15px; color: var(--oro-chiaro); text-align: right; padding-right: 8px; }
.linea-tempo span { font-size: 17px; color: rgba(244, 236, 220, .88); }
.attivita { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--filo); border: 1px solid var(--filo); }
.attivita > div { background: rgba(5, 10, 26, .82); padding: 14px; text-align: center; }
.att-icona { font-size: 22px; color: var(--oro); text-shadow: 0 0 12px rgba(231, 181, 98, .6); }
.attivita h3 { margin: 6px 0 4px; font-family: var(--f-titolo); font-weight: 500; font-size: 13px; letter-spacing: .08em; color: var(--oro-chiaro); }
.attivita p { margin: 0; font-size: 15px; color: var(--tenue); line-height: 1.3; }

/* numeri */
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; margin: 24px 0; }
.numeri div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; border-top: 1px solid var(--filo); padding-top: 12px; }
.numeri b { font-family: var(--f-titolo); font-weight: 500; font-size: clamp(34px, 3.4vw, 52px); line-height: 1; background: linear-gradient(180deg, #fff6df, var(--oro) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.numeri i { font-style: normal; font-family: var(--f-ui); font-size: 12px; letter-spacing: .14em; color: var(--oro); }
.numeri span { grid-column: 1 / -1; font-size: 15.5px; color: var(--tenue); margin-top: 6px; line-height: 1.3; }

/* galleria */
.galleria-testa { position: absolute; left: 0; right: 0; top: calc(var(--barra) + 2vh); text-align: center; pointer-events: none; }
.galleria-testa .sottotitolo { font-size: 18px; }

/* partner */
.carte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 16px; }
.carta { position: relative; padding: 16px 16px 14px; border: 1px solid var(--filo); background: rgba(3, 6, 15, .5); display: flex; flex-direction: column; transition: border-color .4s, transform .5s var(--curva), background .4s; }
.carta:hover { border-color: var(--oro); transform: translateY(-3px); background: rgba(14, 24, 56, .6); }
.carta h3 { margin: 0 0 8px; font-family: var(--f-titolo); font-weight: 500; font-size: 15px; letter-spacing: .06em; color: var(--oro-chiaro); }
.carta p { margin: 0; font-size: 15.5px; line-height: 1.42; color: rgba(244, 236, 220, .84); flex: 1; }
.carta figure[data-foto] { width: 100%; height: 86px; margin-top: 12px; }
.contatti { margin: 14px 0 0; font-family: var(--f-ui); font-size: 12px; letter-spacing: .1em; color: var(--tenue); user-select: text; -webkit-user-select: text; }
.contatti span { color: var(--oro-chiaro); white-space: nowrap; }
.date-libere { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.date-libere span { font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .14em; border: 1px solid var(--filo); border-radius: 30px; padding: 6px 12px; color: var(--testo); }
.date-libere .date-titolo { border: 0; color: var(--oro); text-transform: uppercase; letter-spacing: .24em; padding-left: 0; }

/* arrivare */
.percorsi { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 1px; background: var(--filo); border: 1px solid var(--filo); }
.percorsi li { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 14px; background: rgba(5, 10, 26, .82); padding: 11px 14px; font-size: 17px; }
.percorsi .tempo { font-family: var(--f-titolo); font-weight: 500; font-size: 20px; color: var(--oro-chiaro); }
.linee { display: flex; gap: 4px; }
.linee b { font-family: var(--f-ui); font-weight: 600; font-size: 11px; padding: 4px 6px; border-radius: 3px; color: #fff; letter-spacing: .04em; }
.linee .m2 { background: #2b9a48; } .linee .m3 { background: #e8b913; color: #1a1406; } .linee .m5 { background: #8c5fa8; }
.crediti { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--filo); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
/* i due loghi affiancati, con un filo sottile in mezzo: NATIVITAS (il logo intero, in oro) e One Event Builders */
.crediti-loghi { display: flex; align-items: center; gap: 20px; }
.crediti .logo-nativitas { height: 72px; width: auto; flex: none; }
.crediti-filo { width: 1px; height: 52px; background: var(--filo); flex: none; }
.crediti .logo-oeb { height: 44px; width: auto; opacity: .85; flex: none; }
img[data-logo-nativitas]:not([src]) { display: none; }
.crediti p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--tenuissimo); }
.crediti strong { color: var(--tenue); font-weight: 600; }
.crediti-testo { min-width: 0; }
.crediti .crediti-legale { margin-top: 10px; font-family: var(--f-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- indice ---------- */
.indice { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(3, 6, 15, .9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); clip-path: circle(0 at calc(100% - 70px) 37px); transition: clip-path .9s var(--curva); }
.indice.aperto { clip-path: circle(150% at calc(100% - 70px) 37px); }
.indice[hidden] { display: none; }
.indice-interno { width: min(1100px, 90vw); max-height: 86vh; overflow-y: auto; padding: 20px; }
.indice-elenco { list-style: none; margin: 20px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 36px; counter-reset: voce; }
.indice-elenco button { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(231, 181, 98, .16); padding: 14px 0; display: grid; grid-template-columns: 38px 1fr; align-items: baseline; transition: padding .5s var(--curva), border-color .4s; }
.indice-elenco button:hover, .indice-elenco button.attivo { padding-left: 10px; border-color: var(--oro); }
.indice-elenco small { font-family: var(--f-ui); font-size: 11px; letter-spacing: .2em; color: var(--oro); }
.indice-elenco strong { font-family: var(--f-titolo); font-weight: 500; font-size: clamp(18px, 1.9vw, 26px); color: var(--testo); letter-spacing: .04em; }
.indice-elenco button:hover strong { color: var(--oro-chiaro); }
.indice-elenco li { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .7s var(--curva); transition-delay: calc(var(--i) * 35ms + 200ms); }
.indice.aperto .indice-elenco li { opacity: 1; transform: none; }
.indice-tasti { font-family: var(--f-ui); font-size: 11px; letter-spacing: .16em; color: var(--tenuissimo); }
kbd { font-family: var(--f-ui); border: 1px solid var(--filo); border-radius: 4px; padding: 1px 6px; color: var(--oro-chiaro); }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(2, 4, 10, .94); opacity: 0; transition: opacity .5s; }
.lightbox.aperto { opacity: 1; }
.lightbox[hidden] { display: none; }
.lb-figura { margin: 0; max-width: 88vw; max-height: 86vh; display: grid; gap: 14px; justify-items: center; }
.lb-figura img { max-width: 88vw; max-height: 78vh; object-fit: contain; border: 1px solid var(--filo); box-shadow: 0 30px 100px rgba(0, 0, 0, .8), 0 0 60px rgba(231, 181, 98, .12); transform: scale(.96); transition: transform .8s var(--curva); }
.lightbox.aperto .lb-figura img { transform: none; }
.lb-figura figcaption { font-style: italic; font-size: 19px; color: var(--tenue); text-align: center; }
.lb-chiudi { position: absolute; right: 24px; top: 18px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--filo-forte); background: none; font-size: 26px; color: var(--oro-chiaro); }
.lb-freccia { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--filo); background: rgba(3, 6, 15, .5); font-size: 30px; color: var(--oro-chiaro); }
.lb-prec { left: 2vw; } .lb-succ { right: 2vw; }

/* ---------- cursore ---------- */
.cursore { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; display: none; mix-blend-mode: normal; }
body.con-cursore .cursore { display: block; }
.cursore-anello { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(248, 221, 162, .7); display: grid; place-items: center; transition: width .45s var(--curva), height .45s var(--curva), left .45s var(--curva), top .45s var(--curva), background .45s, border-color .45s; }
.cursore-anello em { font-style: normal; font-family: var(--f-ui); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--notte); opacity: 0; transition: opacity .3s; }
.cursore.grande .cursore-anello { width: 78px; height: 78px; left: -39px; top: -39px; background: rgba(248, 221, 162, .92); border-color: transparent; }
.cursore.grande .cursore-anello em { opacity: 1; }
.cursore.trascina .cursore-anello { width: 64px; height: 64px; left: -32px; top: -32px; border-style: dashed; }
.cursore-punto { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--oro), 0 0 20px var(--oro); }

/* ---------- senza 3D: pagina normale da scorrere ---------- */
:is(body.senza-3d, html:not(.js) body) { overflow: auto; }
:is(body.senza-3d, html:not(.js) body) #scena, :is(body.senza-3d, html:not(.js) body) .binario, :is(body.senza-3d, html:not(.js) body) .chip-360, :is(body.senza-3d, html:not(.js) body) .suggerimento-scorri, :is(body.senza-3d, html:not(.js) body) .piede-stato, :is(body.senza-3d, html:not(.js) body) #bottone-tour { display: none; }
/* nel sito da scorrere tutti i capitoli si leggono e si cliccano, non solo quello «attivo» del 3D */
:is(body.senza-3d, html:not(.js) body) #capitoli { position: static; pointer-events: auto; }
:is(body.senza-3d, html:not(.js) body) .capitolo { position: relative; visibility: visible; min-height: 100vh; padding: 110px var(--margine) 60px; background: radial-gradient(80% 70% at 30% 40%, #0d1a3d, var(--notte)); border-bottom: 1px solid var(--filo); }
:is(body.senza-3d, html:not(.js) body) .capitolo[data-richiede-foto] { display: none; }
:is(body.senza-3d, html:not(.js) body) .pannello, :is(body.senza-3d, html:not(.js) body) [data-lato] .pannello { position: relative; inset: auto; transform: none; width: auto; max-width: 900px; max-height: none; margin: 0 auto; opacity: 1; }
:is(body.senza-3d, html:not(.js) body) [data-anim], :is(body.senza-3d, html:not(.js) body) .titolo .lettera { opacity: 1; transform: none; filter: none; animation: none; }
:is(body.senza-3d, html:not(.js) body) .intro { position: relative; min-height: 80vh; }
:is(body.senza-3d, html:not(.js) body) .intro-titolo { height: auto; }
:is(body.senza-3d, html:not(.js) body) .intro-titolo .logo-scritta { position: static; display: block; transform: none; width: min(78vw, 760px); margin: 6px auto 14px; opacity: 1; visibility: visible; animation: none; }
:is(body.senza-3d, html:not(.js) body) .intro-titolo .logo-emblema { position: static; display: block; transform: none; height: auto; width: min(38vw, 190px); margin: 18px auto 10px; opacity: 1; filter: drop-shadow(0 0 14px rgba(231, 181, 98, .28)); }
/* perché si vede la versione semplice, in una riga con «Riprova» (principale.js) */
.motivo-3d { max-width: 34em; margin: 34px auto 0; font-family: var(--f-ui); font-size: 13px; line-height: 1.6; letter-spacing: .02em; color: var(--tenue); text-wrap: balance; overflow-wrap: anywhere; }
.motivo-3d .bottone-filo { height: 34px; padding: 0 18px; margin: 10px 0 0 6px; font-size: 10px; vertical-align: middle; }
html.js body:not(.senza-3d) .motivo-3d { display: none; }

/* versione per il link: la striscia che dice che è un'anteprima di progetto */
.striscia-concept { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: calc(24px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0; display: flex; align-items: center; justify-content: center; background: rgba(3, 6, 15, .86); border-bottom: 1px solid var(--filo); font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-chiaro); white-space: nowrap; overflow: hidden; pointer-events: none; }
.striscia-concept .lunga { color: var(--tenue); }
body.con-striscia .barra { top: calc(24px + env(safe-area-inset-top, 0px)); }
body.con-striscia { --striscia: 24px; }
body.con-striscia .indice-interno { padding-top: 40px; }
:is(body.senza-3d, html:not(.js) body).con-striscia .capitolo { padding-top: 134px; }

/* ---------- comandi sempre visibili, in piccolo ---------- */
.comandi {
  position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 22;
  display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center;
  padding: 5px 6px 5px 12px; border-radius: 30px; border: 1px solid rgba(231, 181, 98, .22);
  background: rgba(3, 6, 15, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .08em; color: var(--tenue);
  opacity: .82; transition: opacity .4s; pointer-events: auto;
}
.comandi:hover { opacity: 1; }
.comandi-voci { display: contents; }
.comandi-voci > span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; white-space: nowrap; }
.comandi-voci > span + span { border-left: 1px solid rgba(231, 181, 98, .16); }
.comandi > span:not(.comandi-voci) { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; white-space: nowrap; }
.comandi > span + span { border-left: 1px solid rgba(231, 181, 98, .16); }
.comandi kbd, .aiuto kbd { font-family: var(--f-ui); font-size: 9.5px; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(231, 181, 98, .45); color: var(--oro-chiaro); background: rgba(231, 181, 98, .08); }
.bottone-aiuto { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid var(--filo-forte); background: rgba(231, 181, 98, .12); color: var(--oro-chiaro); font-family: var(--f-ui); font-size: 12px; line-height: 1; padding: 0; margin-left: 4px; }
.bottone-aiuto:hover, .bottone-aiuto[aria-expanded="true"] { background: var(--oro); color: var(--notte); }
.aiuto {
  position: fixed; left: 50%; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 31;
  width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 160px); overflow-y: auto;
  padding: 22px 26px; background: var(--vetro); border: 1px solid var(--filo); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.aiuto[hidden] { display: none; }
.aiuto-chiudi, .scheda-chiudi, .pannello-chiudi { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--filo); background: rgba(3, 6, 15, .4); color: var(--oro-chiaro); font-size: 18px; line-height: 1; padding: 0; transition: background .3s, color .3s; }
.aiuto-chiudi:hover, .scheda-chiudi:hover, .pannello-chiudi:hover { background: var(--oro); color: var(--notte); }
.aiuto-colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.aiuto h3 { margin: 0 0 10px; font-family: var(--f-titolo); font-weight: 500; font-size: 15px; color: var(--oro-chiaro); letter-spacing: .06em; }
.aiuto dl { margin: 0; display: grid; gap: 7px; }
.aiuto dl div { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.aiuto dt { white-space: nowrap; font-family: var(--f-ui); font-size: 11px; color: var(--testo); }
.aiuto dd { margin: 0; font-size: 15px; color: var(--tenue); }
body:not(.tocco) .aiuto-tocco { opacity: .6; }

/* ---------- l'ora vera di Milano e il tramonto (momenti-ui.js) ---------- */
.ora-milano { flex-basis: 100%; display: flex; align-items: center; gap: 9px; margin: 2px 0 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .12em; color: var(--tenue); }
.ora-milano[hidden], .aiuto-ora[hidden] { display: none; }
.ora-milano::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ambra); box-shadow: 0 0 10px rgba(255, 179, 92, .65); }
.ora-milano.notte::before { background: var(--ghiaccio); box-shadow: 0 0 10px rgba(188, 214, 255, .55); }
.ora-milano .meteo-fonte { flex: none; white-space: nowrap; } /* col meteo (meteo.js): la fonte a destra, intera */
.aiuto-ora { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(231, 181, 98, .16); font-family: var(--f-ui); font-size: 11px; letter-spacing: .1em; color: var(--tenuissimo); }
.avviso-tramonto {
  position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100vw - 32px); top: calc(var(--barra) - 10px + var(--striscia, 0px)); z-index: 23;
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 10px; padding: 9px 20px; border-radius: 40px;
  border: 1px solid var(--filo); background: rgba(3, 6, 15, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .14em; color: var(--testo); text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(-6px); transition: opacity 1.1s, transform 1.1s var(--curva);
}
.avviso-tramonto.visibile { opacity: 1; transform: none; }
/* in «Benvenuti», sotto il logo di One Event Builders e «presenta», sopra il titolo */
body.al-primo .avviso-tramonto { top: calc(var(--barra) + 26px + var(--striscia, 0px)); }
.avviso-tramonto em { font-family: var(--f-testo); font-size: 15px; letter-spacing: .02em; color: var(--oro-chiaro); }
.avviso-stella { color: var(--oro); text-shadow: 0 0 10px rgba(231, 181, 98, .9); }
body.evento .avviso-tramonto { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .avviso-tramonto { transform: none; transition: opacity .8s; } }
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) { .avviso-tramonto { top: calc(var(--barra) + 46px + var(--striscia, 0px)); font-size: 10px; padding: 8px 14px; } }

/* ---------- «Accendi la piazza» ---------- */
.azioni-evento { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.azioni-evento .nota { margin: 0; }
/* il velo delle scritte va per id: durante l'evento la classe «evento» ce l'ha anche il body */
#evento { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; pointer-events: none; padding: 0 16px; }
#evento[hidden] { display: none; }
#evento p { margin: 0; transition: opacity .7s, transform .9s var(--curva); text-shadow: 0 2px 30px rgba(0, 0, 0, .7), 0 0 50px rgba(231, 181, 98, .25); }
#evento p.via { opacity: 0; transform: translateY(8px); }
.evento-occhiello { font-family: var(--f-ui); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--oro-chiaro); }
.evento-grande { font-family: var(--f-titolo); font-size: clamp(44px, 8vw, 128px); letter-spacing: .12em; color: var(--oro-chiaro); line-height: 1.05; }
.evento-sotto { font-family: var(--f-corpo); font-style: italic; font-size: clamp(18px, 2.2vw, 26px); color: var(--testo); }
.evento-salta { position: fixed; right: var(--margine); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); pointer-events: auto; height: 34px; padding: 0 16px; font-size: 10px; }
body.evento :is(#capitoli, .binario, .piede-stato, .comandi, .suggerimento-scorri, .chip-360, #etichette, #mostra-testo, .titolo-capitolo, #bottone-giroscopio, .esplora-testa, .minimappa, .scheda-esplora, .joystick, .striscia-concept) { opacity: 0 !important; pointer-events: none !important; transition: opacity .8s; }
body.evento .barra { opacity: .35; transition: opacity .8s; }
/* in verticale le scritte stanno in basso: sopra, l'albero e poi la Torre che scrive NATIVITAS (torre-scrive.js) */
@media (max-aspect-ratio: 1/1) { .evento { place-content: end center; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
body.evento #scena { pointer-events: none; } /* la scena non si trascina e non si tocca finché la piazza si accende */

/* ---------- interruttore: immersiva o solo scorrimento ---------- */
.modo-nav { display: inline-flex; flex: none; padding: 2px; margin-right: 4px; border-radius: 20px; border: 1px solid rgba(231, 181, 98, .3); background: rgba(3, 6, 15, .5); }
.modo-nav button { height: 22px; padding: 0 10px; border: 0; border-radius: 16px; background: none; color: var(--tenue); font-family: var(--f-ui); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: background .3s, color .3s; }
.modo-nav button:hover { color: var(--oro-chiaro); }
.modo-nav button[aria-pressed="true"] { background: var(--oro); color: var(--notte); }
.modo-corto { display: none; }
.aiuto-modo { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--filo); }
.aiuto-modo .modo-nav { margin: 0; }
.aiuto-modo .modo-nav button { height: 30px; padding: 0 16px; font-size: 10.5px; }
.aiuto-modo p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--tenue); }
.aiuto-modo b { font-weight: 500; color: var(--testo); }
body.solo-scorrimento :is(#bottone-esplora, .intro-esplora, .chip-360) { display: none; }
/* la barra dei comandi dice già «trascina»: del chip resta il cerchio che gira */
.chip-360 .chip-testo { display: none; }
@media (max-width: 1240px) { .piede-stato { display: none; } }

/* ---------- il testo dei capitoli si può nascondere ---------- */
.pannello-chiudi { z-index: 2; }
.pannello-libero .pannello-chiudi { top: 0; right: 0; }
body.testo-nascosto .capitolo .pannello, body.testo-nascosto .capitolo .intro, body.testo-nascosto .galleria-testa { opacity: 0 !important; pointer-events: none !important; transition: opacity .45s; }
body.testo-nascosto .capitolo::before { opacity: 0 !important; }
.mostra-testo {
  position: fixed; left: var(--margine); bottom: calc(26px + var(--comandi-h, 36px) + env(safe-area-inset-bottom, 0px)); z-index: 21;
  height: 34px; padding: 0 16px; border-radius: 30px; border: 1px solid var(--filo-forte); background: rgba(3, 6, 15, .6);
  font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-chiaro);
}
.mostra-testo:hover { background: var(--oro); color: var(--notte); }
.titolo-capitolo {
  position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100vw - 32px); top: 20%; transform: translateY(10px); z-index: 5; pointer-events: none; text-align: center;
  font-family: var(--f-titolo); font-size: clamp(26px, 4vw, 54px); letter-spacing: .12em; color: var(--oro-chiaro);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .8), 0 0 40px rgba(231, 181, 98, .25); opacity: 0; transition: opacity .9s, transform .9s var(--curva);
}
.titolo-capitolo.visibile { opacity: 1; transform: none; }

/* ---------- esplorazione libera ---------- */
.icona-esplora { width: 12px; height: 12px; border: 1px solid var(--oro-chiaro); transform: rotate(45deg); position: relative; }
.icona-esplora::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: var(--oro-chiaro); }
.esplora-testa {
  position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100vw - 32px); top: calc(var(--barra) + 6px + var(--striscia, 0px)); transform: translateY(-8px); z-index: 21; display: flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 18px; border-radius: 40px; border: 1px solid var(--filo); background: rgba(3, 6, 15, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s var(--curva);
}
.esplora-titolo { font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--oro-chiaro); white-space: nowrap; }
.esplora-esci { height: 34px; padding: 0 16px; font-size: 10px; }
.minimappa { position: fixed; right: var(--margine); bottom: calc(28px + var(--comandi-h, 36px) + env(safe-area-inset-bottom, 0px)); z-index: 21; width: 180px; height: 180px; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .5s; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.joystick { position: fixed; left: 22px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); z-index: 21; width: 124px; height: 124px; border-radius: 50%; border: 1px solid var(--filo-forte); background: radial-gradient(circle, rgba(231, 181, 98, .1), rgba(3, 6, 15, .45) 70%); display: none; touch-action: none; }
.joystick i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--oro-chiaro), var(--oro) 60%, var(--oro-scuro)); box-shadow: 0 0 22px rgba(231, 181, 98, .5); }
.scheda-esplora {
  position: fixed; left: var(--margine); bottom: calc(28px + var(--comandi-h, 36px) + env(safe-area-inset-bottom, 0px)); z-index: 22; width: min(360px, calc(100vw - 32px));
  padding: 20px 22px; background: var(--vetro); border: 1px solid var(--filo); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5); animation: entra .6s var(--curva);
}
.scheda-esplora[hidden] { display: none; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
.scheda-esplora h3 { margin: 0 0 8px; font-family: var(--f-titolo); font-weight: 500; font-size: 21px; color: var(--oro-chiaro); padding-right: 30px; }
.scheda-esplora p:not(.occhiello) { margin: 0; font-size: 16.5px; line-height: 1.45; color: rgba(244, 236, 220, .88); }
.scheda-esplora .azioni { margin-top: 14px; }
.segnaposto { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; pointer-events: auto; opacity: 0; transition: opacity .5s; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; }
.segnaposto.visibile { opacity: 1; }
.segnaposto span { font-family: var(--f-ui); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: var(--testo); background: rgba(3, 6, 15, .72); border: 1px solid var(--filo); padding: 4px 10px; border-radius: 20px; transition: background .3s, color .3s; }
.segnaposto b { width: 9px; height: 9px; margin-top: 6px; transform: rotate(45deg); background: var(--oro); box-shadow: 0 0 12px var(--oro); }
.segnaposto::after { content: ""; width: 1px; height: 26px; background: linear-gradient(var(--oro), transparent); }
.segnaposto:hover span, .segnaposto.sopra span { background: var(--oro); color: var(--notte); }
body.esplora #capitoli, body.esplora #capitoli *, body.esplora .binario, body.esplora .piede-stato, body.esplora .suggerimento-scorri, body.esplora .chip-360, body.esplora #mostra-testo, body.esplora .titolo-capitolo, body.esplora #vetrata { opacity: 0 !important; pointer-events: none !important; }
body.esplora .esplora-testa { opacity: 1; transform: none; pointer-events: auto; }
body.esplora .minimappa { opacity: 1; pointer-events: auto; }
body.esplora.tocco .joystick { display: block; }
body.esplora .barra-esplora { border-color: var(--oro); background: rgba(231, 181, 98, .14); }
body.esplora.tocco .scheda-esplora { bottom: auto; top: calc(var(--barra) + 56px + var(--striscia, 0px)); left: 16px; right: 16px; width: auto; }

/* senza JavaScript: via i comandi che non possono funzionare */
html:not(.js) .barra-bottone, :is(body.senza-3d, html:not(.js) body) :is(.comandi, .bottone-aiuto, .esplora-testa, .minimappa, .joystick, .intro-esplora, .pannello-chiudi, #bottone-esplora), html:not(.js) .conto, html:not(.js) .desiderio, html:not(.js) [data-azione], html:not(.js) .elenco-luoghi { display: none; }
img[data-logo]:not([src]) { display: none; }

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
}

/* ---------- schermi medi ---------- */
@media (max-width: 1200px) {
  [data-larghezza="ampia"] .pannello { width: min(760px, 66vw); }
  .colonne { grid-template-columns: repeat(2, 1fr); }
  .carte { grid-template-columns: repeat(2, 1fr); }
  .indice-elenco { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- telefono: il pannello diventa un foglio in basso ---------- */
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  html, body { font-size: 16px; }
  :root { --barra: 58px; --margine: 16px; }
  .barra-data, .barra-etichetta, .binario, .piede-stato, #bottone-tour { display: none; }
  .barra-bottone { padding: 0 11px; }
  .marchio-nome { font-size: 13px; letter-spacing: .32em; }
  .barra .marchio-nome svg { height: 10.5px; }
  .barra .marchio-stella svg { width: 23px; }
  .marchio-sotto { font-size: 15px; }
  .pannello, [data-lato] .pannello, [data-larghezza="ampia"] .pannello, .pannello-stretto {
    left: 16px !important; right: 16px !important; top: auto; bottom: 12px; transform: none !important;
    width: auto !important; max-height: 52vh; padding: 22px 20px 20px;
  }
  .pannello-libero { background: linear-gradient(0deg, rgba(3, 6, 15, .92), rgba(3, 6, 15, .55)); padding-left: 20px; }
  .titolo { font-size: clamp(24px, 7.4vw, 32px); }
  .sottotitolo { font-size: 18px; }
  .testo, .elenco-stelle li { font-size: 16.5px; }
  .schede-quattro, .numeri, .attivita, .colonne, .carte { grid-template-columns: repeat(2, 1fr); }
  .numeri { gap: 16px 14px; }
  .conto { gap: 10px; padding: 12px; }
  .conto-titolo { max-width: none; font-size: 16px; }
  .conto-cifre div { min-width: 0; flex: 1; }
  .conto-cifre b { font-size: 28px; }
  .linea-tempo::before { left: 70px; }
  .linea-tempo li { grid-template-columns: 70px 1fr; gap: 16px; }
  .linea-tempo li::before { left: 66px; }
  .linea-tempo time { font-size: 13px; }
  .percorsi li { grid-template-columns: 84px 1fr; font-size: 15px; }
  .suggerimento-scorri { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .chip-360 { bottom: auto; top: calc(var(--barra) + 6px); right: 12px; }
  .chip-testo { display: none; }
  .intro-presenta { transform: translateY(-4vh); }
  .capitolo.attivo .intro-presenta[data-anim] { transform: translateY(-4vh); }
  .intro-titolo { height: 12vh; }
  .indice-elenco { grid-template-columns: 1fr; }
  .lb-freccia { top: auto; bottom: 18px; transform: none; }
  .crediti { flex-direction: column; }
  .galleria-testa .titolo { font-size: 24px; }
  .striscia-concept { font-size: 9px; letter-spacing: .14em; }
  .comandi { font-size: 9.5px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 4px 5px 4px 8px; }
  .comandi-voci > span { padding: 2px 5px; }
  .modo-nav button { padding: 0 8px; letter-spacing: .1em; }
  .modo-lungo { display: none; }
  .modo-corto { display: inline; }
  .aiuto-modo { flex-direction: column; align-items: flex-start; gap: 12px; }
  .aiuto-colonne { grid-template-columns: 1fr; }
  .minimappa { width: 104px; height: 104px; right: 14px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .joystick { width: 112px; height: 112px; left: 16px; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .esplora-testa { padding: 4px; }
  .esplora-titolo { display: none; }
  .mostra-testo { bottom: calc(48px + env(safe-area-inset-bottom, 0px)); left: 16px; }
  body:not(.esplora) .comandi { top: calc(var(--barra) + 2px + var(--striscia, 0px)); bottom: auto; }
  body.esplora .comandi { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* nell'intro non c'è il foglio del pannello: i comandi stanno in basso e dicono già «↕ capitoli» */
  .suggerimento-scorri { display: none; }
  body.al-primo:not(.esplora) .comandi { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .striscia-concept .lunga { display: none; }
  body.con-striscia .chip-360 { top: calc(var(--barra) + 32px + env(safe-area-inset-top, 0px)); }
  .desiderio-riga { flex-direction: column; }
  /* Sul telefono la barra dei comandi (Immersiva · Solo scorrimento · capitoli · guarda) copriva la scena in alto:
     resta solo il «?» tondo, nella colonna di destra sotto il cerchio 360°. La scelta della modalità e
     tutte le istruzioni sono nella sua finestra (#aiuto); sotto il «?» c'è il giroscopio. Adriano, 16/10/2026. Sul computer non cambia niente. */
  .comandi, body:not(.esplora) .comandi, body.esplora .comandi, body.al-primo:not(.esplora) .comandi {
    top: calc(var(--barra) + 62px); bottom: auto; left: auto; right: 14px; margin: 0; width: auto; max-width: none;
    padding: 0; border: 0; border-radius: 50%; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1;
  }
  body.con-striscia .comandi { top: calc(var(--barra) + 88px + env(safe-area-inset-top, 0px)); }
  /* e il giroscopio subito sotto il «?» */
  #bottone-giroscopio { top: calc(var(--barra) + 114px); }
  body.con-striscia #bottone-giroscopio { top: calc(var(--barra) + 140px + env(safe-area-inset-top, 0px)); }
  .comandi > :not(#bottone-aiuto) { display: none; }
  .comandi .bottone-aiuto { width: 40px; height: 40px; font-size: 16px; background: rgba(3, 6, 15, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

/* «La caccia alle stelle» (caccia.js): l'invito, il contatore, la finestra con gli indizi e la festa col codice.
   Si aggiunge dopo stile.css (costruisci.mjs legge i file di sorgente/stili/ in ordine). */

/* ---------- sopra la scena, solo nell'esplorazione libera ---------- */
.caccia-invito, .caccia-contatore {
  position: fixed; z-index: 21; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px;
  border-radius: 40px; border: 1px solid var(--filo-forte); background: rgba(3, 6, 15, .62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-chiaro); white-space: nowrap;
  box-shadow: 0 0 22px rgba(231, 181, 98, .16); cursor: pointer; transition: background .3s, color .3s, border-color .3s;
  animation: caccia-entra .6s var(--curva);
}
.caccia-invito[hidden], .caccia-contatore[hidden] { display: none; }
.caccia-invito:hover, .caccia-contatore:hover { background: var(--oro); color: var(--notte); border-color: var(--oro); }
.caccia-invito span { color: var(--oro); text-shadow: 0 0 10px rgba(231, 181, 98, .9); transition: color .3s; }
.caccia-invito:hover span { color: var(--notte); text-shadow: none; }
/* l'invito sotto la barra dell'esplora, al centro; il contatore in alto a destra, sulla stessa riga della barra
   dell'esplora (che sta al centro): nessuno dei due copre la barra in alto né quella dell'esplora */
.caccia-invito { left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100vw - 32px); top: calc(var(--barra) + 60px + var(--striscia, 0px)); }
.caccia-contatore { right: var(--margine); top: calc(var(--barra) + 6px + var(--striscia, 0px)); padding: 0 13px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.caccia-contatore.batte { animation: caccia-batte .7s var(--curva); }
@keyframes caccia-entra { from { opacity: 0; transform: translateY(-6px); } }
@keyframes caccia-batte { 30% { transform: scale(1.18); box-shadow: 0 0 34px rgba(231, 181, 98, .6); } }
body.evento :is(.caccia-invito, .caccia-contatore) { display: none; }
/* Un segnaposto dei luoghi che si spegne (troppo vicino, fuori vista, la sua scheda aperta) resta dov'era, trasparente:
   non deve più prendere i clic, se no un clic su una stella (o sulla piazza) lì sotto vola a quel luogo */
.segnaposto:not(.visibile) { pointer-events: none; }

/* ---------- la finestra ---------- */
.caccia {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(70% 60% at 50% 45%, rgba(3, 6, 15, .4), rgba(2, 4, 10, .8));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s;
}
.caccia[hidden] { display: none; }
.caccia.aperta { opacity: 1; }
.caccia-scheda {
  position: relative; width: min(520px, 100%); margin: auto; padding: 32px 32px 26px; text-align: left;
  /* alta al più quanto lo schermo: gli indizi scorrono dentro, i bottoni restano sempre a vista */
  display: flex; flex-direction: column; max-height: calc(100vh - 40px - var(--striscia, 0px)); max-height: calc(100dvh - 40px - var(--striscia, 0px));
  overflow-y: auto; overscroll-behavior: contain; /* rete di sicurezza: di norma scorrono solo gli indizi */
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 70px rgba(231, 181, 98, .08), inset 0 1px 0 rgba(255, 236, 200, .06);
  transform: translateY(14px) scale(.985); transition: transform .6s var(--curva);
  outline: none;
}
.caccia.aperta .caccia-scheda { transform: none; }
/* gli ornamenti d'angolo dei pannelli */
.caccia-scheda::before, .caccia-scheda::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 1px solid var(--oro); opacity: .8; }
.caccia-scheda::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.caccia-scheda::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.caccia-gioco, .caccia-festa { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.caccia-gioco > *, .caccia-festa > * { flex: none; }
.caccia-festa { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--filo) transparent; }
.caccia-gioco[hidden], .caccia-festa[hidden] { display: none; }
.caccia-scheda .occhiello { margin: 0; padding-right: 40px; }

.caccia-titolo {
  margin: 0; padding-right: 30px; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(23px, 3vw, 30px); line-height: 1.12; letter-spacing: .03em;
  color: var(--oro-chiaro); text-shadow: 0 2px 18px rgba(231, 181, 98, .22); text-wrap: balance;
}
.caccia-testo { margin: 0; font-family: var(--f-testo); font-size: 18px; line-height: 1.45; color: rgba(244, 236, 220, .88); }
.caccia-conto { margin: 2px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-family: var(--f-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }
.caccia-conto b { font-family: var(--f-titolo); font-weight: 500; font-size: 30px; letter-spacing: 0; color: var(--oro-chiaro); }
.caccia-fila { flex-basis: 100%; font-size: 15px; letter-spacing: .28em; color: var(--oro); text-shadow: 0 0 8px rgba(231, 181, 98, .55); }
.caccia-sotto { margin: 6px 0 0; font-family: var(--f-ui); font-weight: 400; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--oro); }

.caccia-gioco > .caccia-indizi { flex: 0 1 auto; min-height: 7.5em; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--filo) transparent; }
.caccia-indizi { list-style: none; margin: 0; padding: 0 6px 0 0; display: grid; gap: 2px; align-content: start; border-top: 1px solid rgba(231, 181, 98, .16); border-bottom: 1px solid rgba(231, 181, 98, .16); }
.caccia-indizi::-webkit-scrollbar { width: 4px; }
.caccia-indizi::-webkit-scrollbar-thumb { background: var(--filo); }
.caccia-indizi li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 7px 0; border-top: 1px solid rgba(231, 181, 98, .1); font-family: var(--f-testo); font-size: 16.5px; line-height: 1.38; color: rgba(244, 236, 220, .86); }
.caccia-spunta { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--filo); font-family: var(--f-ui); font-size: 10px; color: var(--tenuissimo); }
.caccia-indizi li:first-child { border-top: 0; }
.caccia-indizi li.trovata { color: var(--tenuissimo); }
.caccia-indizi li.trovata .caccia-indizio { text-decoration: line-through; text-decoration-color: rgba(231, 181, 98, .45); }
.caccia-indizi li.trovata .caccia-spunta { border-color: var(--oro); background: var(--oro); color: var(--notte); font-size: 12px; box-shadow: 0 0 10px rgba(231, 181, 98, .5); }

.caccia-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.caccia-azioni [hidden] { display: none; }
.caccia-azioni .bottone-oro, .caccia-azioni .bottone-filo { min-width: 132px; }

/* la festa: il codice grande, da leggere al desk */
.caccia-codice {
  margin: 4px 0 0; padding: 16px 10px; text-align: center; user-select: all; -webkit-user-select: all;
  /* un carattere senza grazie, dalle forme nette: al desk lo si legge e lo si ricopia senza dubbi */
  font-family: var(--f-ui); font-weight: 600; font-size: clamp(22px, 6.2vw, 32px); letter-spacing: .16em; color: var(--oro-chiaro); font-variant-numeric: tabular-nums;
  border: 1px solid var(--filo-forte); background: rgba(231, 181, 98, .07); box-shadow: inset 0 0 30px rgba(231, 181, 98, .08), 0 0 40px rgba(231, 181, 98, .12);
  text-shadow: 0 0 18px rgba(231, 181, 98, .45);
}
.caccia-premio { margin: 0; font-family: var(--f-testo); font-size: 19px; line-height: 1.4; color: var(--testo); }
.caccia-nota { margin: 0; font-family: var(--f-ui); font-size: 11.5px; line-height: 1.6; color: var(--tenuissimo); }
.caccia-stato { margin: 0; font-family: var(--f-ui); font-size: 13px; line-height: 1.5; color: var(--oro-chiaro); }
.caccia-stato:empty { display: none; }
.caccia-altro { margin: 0; }
.caccia-altro[hidden] { display: none; }
.caccia-link { padding: 4px 0; border: 0; background: none; font-family: var(--f-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); text-decoration: underline; text-decoration-color: var(--filo); text-underline-offset: 4px; cursor: pointer; }
.caccia-link:hover { color: var(--oro-chiaro); }

.caccia-x {
  position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filo); background: rgba(3, 6, 15, .4); font-size: 22px; line-height: 1; color: var(--oro-chiaro); cursor: pointer;
  transition: background .3s, color .3s;
}
.caccia-x:hover { background: var(--oro); color: var(--notte); }
.caccia :focus-visible, .caccia-invito:focus-visible, .caccia-contatore:focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }

/* l'aiuto («?») cita la caccia in una riga */
.aiuto-caccia[hidden] { display: none; }
[data-azione="caccia"][hidden] { display: none; }

@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  .caccia-scheda { padding: 26px 20px 20px; }
  .caccia-testo { font-size: 17px; }
  .caccia-indizi li { font-size: 16px; }
  .caccia-azioni .bottone-oro, .caccia-azioni .bottone-filo { flex: 1; min-width: 0; padding: 0 16px; }
  .caccia-invito { font-size: 10px; letter-spacing: .14em; padding: 0 14px; }
  .caccia-contatore { right: 14px; height: 34px; padding: 0 11px; font-size: 10px; letter-spacing: .08em; }
}
/* schermi bassi (un portatile piccolo, il telefono in orizzontale): tutto più raccolto, gli indizi scorrono */
@media (max-height: 720px) {
  .caccia-scheda { padding: 22px 26px 18px; }
  .caccia-gioco, .caccia-festa { gap: 8px; }
  .caccia-titolo { font-size: 22px; }
  .caccia-testo, .caccia-premio { font-size: 16px; line-height: 1.4; }
  .caccia-conto b { font-size: 24px; }
  .caccia-fila { font-size: 13px; }
  .caccia-gioco > .caccia-indizi { min-height: 5.5em; }
  .caccia-indizi li { padding: 5px 0; font-size: 15.5px; }
  .caccia-codice { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .caccia, .caccia-scheda { transition: none; }
  .caccia-scheda { transform: none; }
  .caccia-invito, .caccia-contatore, .caccia-contatore.batte { animation: none; }
}

/* I contatti e i link agli altri siti nella pagina (14/10/2026): la riga dei siti nel capitolo SYNTONY, i recapiti del
   capitolo per le aziende, il piè di pagina (i crediti coi link, Contatti, la riga della società) e la voce Contatti
   nell'indice. La pagina Contatti vera è a parte (sorgente/sito/contatti.html), con lo stile dentro. */

/* SYNTONY: «SYNTONY × NATIVITAS · adrianolombardo.art», sotto il nome dell'artista */
.collegamenti { margin: 10px 0 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; color: var(--tenuissimo); }
.collegamenti a { display: inline-block; padding: 4px 0; color: var(--oro); text-decoration: none; border-bottom: 1px solid var(--filo); }
.collegamenti a:hover, .collegamenti a:focus-visible { color: var(--oro-chiaro); border-bottom-color: var(--oro-chiaro); }

/* la riga dei recapiti del capitolo per le aziende: i link si leggono come il resto della riga, sottolineati appena */
.contatti a { color: var(--oro-chiaro); text-decoration: underline; text-decoration-color: var(--filo); text-underline-offset: .22em; }
.contatti a:hover, .contatti a:focus-visible { text-decoration-color: var(--oro-chiaro); }

/* il piè di pagina: i link dei crediti più chiari del testo e sottolineati (si riconoscono anche senza il colore) */
.crediti-testo a { color: var(--tenue); text-decoration: underline; text-decoration-color: var(--filo-forte); text-underline-offset: .2em; }
.crediti-testo a:hover, .crediti-testo a:focus-visible { color: var(--oro-chiaro); text-decoration-color: var(--oro-chiaro); }
.crediti .crediti-legale a { color: var(--oro); }
/* la riga della società: senza il maiuscoletto forzato, così «S.r.l.» resta com'è scritto */
.crediti .crediti-societa { margin-top: 6px; text-transform: none; letter-spacing: .06em; }

/* l'indice: «Contatti» sotto i capitoli, fuori dal viaggio */
.indice-contatti { margin: 6px 0 18px; font-family: var(--f-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.indice-contatti a { display: inline-block; padding: 10px 0; color: var(--oro); text-decoration: none; border-bottom: 1px solid var(--filo); }
.indice-contatti a:hover, .indice-contatti a:focus-visible { color: var(--oro-chiaro); border-bottom-color: var(--oro-chiaro); }
/* l'indice: le pagine dedicate (/pista, /albero…), sopra «Contatti», più discrete */
.indice-pagine { margin: 18px 0 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .16em; line-height: 2; text-transform: uppercase; color: var(--tenuissimo); }
.indice-pagine a { display: inline-block; padding: 6px 0; color: var(--oro); text-decoration: none; border-bottom: 1px solid var(--filo); }
.indice-pagine a:hover, .indice-pagine a:focus-visible { color: var(--oro-chiaro); border-bottom-color: var(--oro-chiaro); }
/* il piede: le pagine dedicate in una riga sopra i Contatti */
.crediti .crediti-pagine { line-height: 2; }
/* la partita IVA non si spezza a metà quando la riga va a capo (sul telefono) */
.crediti .intera { white-space: nowrap; }

/* Il cielo dei desideri di tutti (desideri.js) e la foto ricordo (foto.js).
   Si aggiunge dopo stile.css (costruisci.mjs legge i file di sorgente/stili/ in ordine). */

/* ---------- un pensiero letto nel cielo: col mouse sopra la stella, o toccandola ---------- */
.stella-pensiero {
  position: absolute; left: 0; top: 0; max-width: min(300px, calc(100vw - 32px)); padding: 9px 15px 11px;
  display: grid; justify-items: center; gap: 3px; text-align: center; pointer-events: none;
  background: radial-gradient(120% 140% at 50% 50%, rgba(3, 6, 15, .78), rgba(3, 6, 15, .5));
  border: 1px solid rgba(188, 214, 255, .26); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 0 26px rgba(188, 214, 255, .08);
  opacity: 0; transition: opacity .35s;
}
.stella-pensiero.visibile { opacity: 1; }
.stella-pensiero small { font-family: var(--f-ui); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--ghiaccio); }
.stella-pensiero span { font-family: var(--f-testo); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--testo); text-shadow: 0 0 14px rgba(188, 214, 255, .35); overflow-wrap: anywhere; }
/* il filo verso la stella */
.stella-pensiero::after { content: ""; position: absolute; left: calc(50% + var(--freccia, 0px)); top: 100%; width: 1px; height: 14px; background: linear-gradient(rgba(188, 214, 255, .55), transparent); }
.stella-pensiero.sotto::after { top: auto; bottom: 100%; background: linear-gradient(transparent, rgba(188, 214, 255, .55)); }
.stella-pensiero.mia { border-color: var(--filo-forte); }
.stella-pensiero.mia small { color: var(--oro); }
.stella-pensiero.mia span { color: var(--oro-chiaro); text-shadow: 0 0 14px rgba(231, 181, 98, .45); }
.stella-pensiero.mia::after { background: linear-gradient(var(--oro), transparent); }
.stella-pensiero.mia.sotto::after { background: linear-gradient(transparent, var(--oro)); }

/* ---------- la foto ricordo ---------- */
.icona-foto { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--oro-chiaro); }
.icona-foto svg { display: block; }
.barra-foto[aria-busy="true"] .icona-foto { opacity: .5; }
/* i telefoni stretti: con «Foto» i pulsanti in alto sono quattro. Si stringono loro, attorno alle icone,
   e il marchio resta su una riga (provato a 320, 360, 375, 390 e 414 px) */
@media (max-width: 380px) {
  .barra-destra { gap: 0; }
  .barra-bottone { padding: 0 9px; }
}
@media (max-width: 340px) {
  .barra { padding: 0 12px; }
  .barra-bottone { padding: 0 7px; }
}

.foto-lampo { position: fixed; inset: 0; z-index: 46; pointer-events: none; background: #fff8ec; opacity: 0; }
.foto-lampo.scatta { animation: lampo-foto .7s ease-out; }
@keyframes lampo-foto { 0% { opacity: .78; } 100% { opacity: 0; } }

.foto-ricordo {
  --sopra-sotto: calc(196px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + var(--striscia, 0px));
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: calc(22px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(2, 4, 10, .93); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .45s;
}
.foto-ricordo[hidden] { display: none; }
.foto-ricordo.aperta { opacity: 1; }
.foto-ricordo .occhiello { margin: 0; }
.foto-figura { margin: 0; display: grid; place-items: center; }
.foto-figura img {
  display: block; width: auto; height: auto; max-width: min(92vw, 1400px); max-height: calc(100vh - var(--sopra-sotto)); object-fit: contain;
  border: 1px solid var(--filo); box-shadow: 0 30px 90px rgba(0, 0, 0, .75), 0 0 60px rgba(231, 181, 98, .12);
  transform: scale(.97); transition: transform .7s var(--curva);
  -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto;
}
.foto-ricordo.aperta .foto-figura img { transform: none; }
@supports (height: 100dvh) { .foto-figura img { max-height: calc(100dvh - var(--sopra-sotto)); } }
.foto-azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.foto-azioni .bottone-oro, .foto-azioni .bottone-filo { min-width: 132px; }
.foto-azioni [hidden] { display: none; }
.foto-salva[disabled] { opacity: .6; }
.foto-stato { margin: 0; min-height: 1.4em; max-width: 520px; text-align: center; font-family: var(--f-ui); font-size: 11px; letter-spacing: .12em; line-height: 1.5; color: var(--tenue); }
.foto-x { position: absolute; right: 18px; top: calc(14px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filo-forte); background: rgba(3, 6, 15, .5); font-size: 24px; line-height: 1; padding: 0; color: var(--oro-chiaro); }
.foto-x:hover { background: var(--oro); color: var(--notte); }
body.con-foto-ricordo .cursore { z-index: 61; }

@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  .foto-ricordo { --sopra-sotto: calc(186px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + var(--striscia, 0px)); gap: 10px; padding-top: calc(16px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)); }
  .foto-x { right: 10px; top: calc(8px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)); width: 40px; height: 40px; }
  .foto-azioni .bottone-oro, .foto-azioni .bottone-filo { min-width: 120px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .foto-lampo.scatta { animation: none; }
  .foto-figura img { transform: none; }
}

/* I dialoghi coi personaggi (dialoghi.js): la finestra in basso, come nei videogiochi.
   Si aggiunge dopo stile.css (costruisci.mjs legge i file di sorgente/stili/ in ordine). */

/* dietro, la scena si vela appena dal basso: si capisce che si sta parlando, la piazza resta */
.dialogo-velo {
  position: fixed; inset: 0; z-index: 43;
  background: linear-gradient(to top, rgba(2, 4, 10, .78) 0, rgba(2, 4, 10, .35) 38%, rgba(2, 4, 10, 0) 62%);
  opacity: 0; transition: opacity .4s;
}
.dialogo-velo.aperto { opacity: 1; }
.dialogo-velo[hidden], .dialogo[hidden] { display: none; }

.dialogo {
  position: fixed; left: 0; right: 0; margin-inline: auto; z-index: 44;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(760px, calc(100% - 32px)); max-height: calc(100% - 120px - var(--striscia, 0px)); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 12px; padding: 20px 24px 16px;
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(231, 181, 98, .08), inset 0 1px 0 rgba(255, 236, 200, .06);
  opacity: 0; transform: translateY(18px); transition: opacity .4s, transform .5s var(--curva);
}
.dialogo.aperto { opacity: 1; transform: none; }
.dialogo::before, .dialogo::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; border: 1px solid var(--oro); opacity: .8; }
.dialogo::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
.dialogo::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }

.dialogo-testa { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; }
/* il ritratto: i colori sono del personaggio (dialoghi.js li mette in --ritratto-a, -b, -c e, se serve, la lettera) */
.dialogo-ritratto {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, var(--ritratto-a, #b2484f), var(--ritratto-b, #7a1f2b) 55%, var(--ritratto-c, #3c0d14)); border: 1px solid var(--oro);
  box-shadow: 0 0 0 3px rgba(3, 6, 15, .6), 0 0 22px rgba(231, 181, 98, .35);
}
.dialogo-ritratto span { font-family: var(--f-titolo); font-size: 24px; color: var(--ritratto-lettera, var(--oro-chiaro)); text-shadow: 0 0 10px rgba(231, 181, 98, .6); }
.dialogo-ritratto span.due { font-size: 17px; letter-spacing: .04em; }
.dialogo-chi h2 { margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: 22px; letter-spacing: .06em; color: var(--oro-chiaro); }
.dialogo-chi p { margin: 2px 0 0; font-family: var(--f-ui); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); }
.dialogo-ia { margin-left: 6px; padding: 2px 6px; vertical-align: 4px; border: 1px solid var(--filo-forte); border-radius: 4px; font-family: var(--f-ui); font-size: 9px; letter-spacing: .14em; text-decoration: none; color: var(--oro); cursor: help; }
.dialogo-voce { height: 30px; padding: 0 12px; border-radius: 30px; border: 1px solid var(--filo); background: rgba(3, 6, 15, .4); font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); cursor: pointer; }
.dialogo-voce[aria-pressed="true"] { border-color: var(--oro); color: var(--oro-chiaro); background: rgba(231, 181, 98, .12); }
.dialogo-voce[hidden] { display: none; }
.dialogo-x { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--filo); background: rgba(3, 6, 15, .4); font-size: 20px; line-height: 1; color: var(--oro-chiaro); cursor: pointer; }
.dialogo-x:hover { background: var(--oro); color: var(--notte); }

.dialogo-domanda { margin: 0; font-family: var(--f-testo); font-style: italic; font-size: 16px; color: var(--tenue); }
.dialogo-domanda::before { content: "Tu: "; font-style: normal; font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenuissimo); }
.dialogo-domanda[hidden] { display: none; }
.dialogo-fumetto { min-height: 3em; cursor: default; }
.dialogo-testo { margin: 0; font-family: var(--f-testo); font-size: 21px; line-height: 1.5; color: var(--testo); white-space: pre-wrap; overflow-wrap: anywhere; }
/* mentre scrive, il cursore a punta d'oro; mentre pensa, tre stelline */
.dialogo-fumetto.scrive .dialogo-testo::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: 4px; transform: rotate(45deg); background: var(--oro); box-shadow: 0 0 10px var(--oro); animation: dialogo-batte .8s steps(2) infinite; }
.dialogo-fumetto.pensa .dialogo-testo::before { content: "✦ ✦ ✦"; letter-spacing: .4em; color: var(--oro); animation: dialogo-pensa 1.2s ease-in-out infinite; }
@keyframes dialogo-batte { 50% { opacity: 0; } }
@keyframes dialogo-pensa { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* «Andiamo»: uno o più bottoni (per «Chi c'è in piazza?» uno per personaggio) */
.dialogo-azione { display: flex; flex-wrap: wrap; gap: 8px; }
.dialogo-azione[hidden] { display: none; }
.dialogo-azione :is(.bottone-oro, .bottone-filo) { height: 44px; }
.dialogo-azione.piu { gap: 6px; }
.dialogo-azione.piu :is(.bottone-oro, .bottone-filo) { height: 36px; padding: 0 14px; font-size: 10px; letter-spacing: .12em; }
.dialogo-azione-titolo { align-self: center; margin-right: 4px; font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }

/* le domande pronte in una riga che scorre, sfumata a destra: la finestra resta bassa e lei si vede */
.dialogo-pronte { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.dialogo-pronte::-webkit-scrollbar { display: none; }
.dialogo-chip {
  flex: none; padding: 7px 14px; border-radius: 30px; border: 1px solid var(--filo); background: rgba(3, 6, 15, .45);
  font-family: var(--f-ui); font-size: 12px; letter-spacing: .04em; color: var(--testo); cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
.dialogo-chip:hover { border-color: var(--oro); background: rgba(231, 181, 98, .12); color: var(--oro-chiaro); }

.dialogo-chiedi { display: flex; gap: 8px; }
.dialogo-chiedi[hidden] { display: none; }
.dialogo-chiedi input {
  flex: 1; min-width: 0; height: 46px; padding: 0 18px; box-sizing: border-box;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--filo-forte); border-radius: 50px;
  font-family: var(--f-testo); font-size: 18px; color: var(--testo); outline: none; transition: border-color .4s, box-shadow .4s;
}
.dialogo-chiedi input:focus { border-color: var(--oro-chiaro); box-shadow: 0 0 24px rgba(231, 181, 98, .25); }
.dialogo-chiedi input::placeholder { color: var(--tenuissimo); font-style: italic; }
.dialogo-chiedi .bottone-filo { height: 46px; padding: 0 20px; }

.dialogo-nota { margin: 0; font-family: var(--f-ui); font-size: 10.5px; line-height: 1.55; color: var(--tenuissimo); }
.dialogo :focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }
.dialogo-chiedi input:focus-visible { outline: none; }

/* mentre si parla, l'interfaccia dell'esplora si fa da parte */
body.con-dialogo :is(#etichette, .minimappa, .joystick, .scheda-esplora, .suggerimento-scorri, .chip-360) { opacity: 0 !important; pointer-events: none !important; }
/* e fuori dall'esplorazione (Stella che risponde al Belvedere, data-domanda) il testo del capitolo si fa da parte:
   la finestra non gli si sovrappone; alla chiusura torna */
body.con-dialogo:not(.esplora):not(.senza-3d) #capitoli .capitolo.attivo .pannello { opacity: 0; pointer-events: none; transition: opacity .4s; }
/* «Mettiti i pattini» (il capitolo della pista) compare solo con la scena 3D (interfaccia.js) */
[data-azione="parla"][hidden], [data-azione="pattina"][hidden] { display: none; }
/* nella versione semplice (senza 3D) i capitoli non ricevono i clic (#capitoli ha pointer-events: none, e solo il
   pannello del capitolo attivo li riprende): i bottoni dei personaggi li riprendono da sé */
body.senza-3d [data-azione="parla"] { pointer-events: auto; }

@media (max-width: 600px) {
  .dialogo { padding: 16px 16px 12px; gap: 10px; width: calc(100% - 20px); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .dialogo-testa { gap: 10px; }
  .dialogo-ritratto { width: 44px; height: 44px; }
  .dialogo-ritratto span.due { font-size: 14px; }
  .dialogo-chi h2 { font-size: 19px; }
  .dialogo-testo { font-size: 19px; }
  .dialogo-azione :is(.bottone-oro, .bottone-filo) { height: 40px; padding: 0 16px; }
  .dialogo-azione-titolo { flex-basis: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dialogo, .dialogo-velo { transition: none; transform: none; }
  .dialogo-fumetto.scrive .dialogo-testo::after, .dialogo-fumetto.pensa .dialogo-testo::before { animation: none; }
}

/* ---------- il tour con la voce di Stella (tour-voce.js): il bottone «Voce» accanto al «Tour», mentre il tour
   gira, e il sottotitolo di quello che dice */
.barra-voce[hidden] { display: none; }
.icona-voce { display: flex; align-items: center; gap: 2px; height: 14px; }
.icona-voce b { width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; border: 1px solid var(--oro-chiaro); }
.icona-voce i { width: 2px; height: 4px; border-radius: 1px; background: var(--oro-chiaro); opacity: .45; }
.barra-voce[aria-pressed="true"] .icona-voce b { background: var(--oro-chiaro); }
.barra-voce[aria-pressed="true"] .icona-voce i { opacity: 1; }
.barra-voce.parla .icona-voce i { animation: barretta 1s ease-in-out infinite; }
.barra-voce.parla .icona-voce i:nth-child(3) { animation-delay: -.35s; }
.barra-voce.parla .icona-voce i:nth-child(4) { animation-delay: -.7s; }
.tour-sottotitolo {
  position: fixed; left: 0; right: 0; margin-inline: auto; z-index: 22; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: min(640px, calc(100% - 40px)); box-sizing: border-box; padding: 10px 18px 11px;
  background: rgba(3, 6, 15, .62); border: 1px solid var(--filo); border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-testo); font-size: 17px; line-height: 1.42; color: var(--testo); text-align: center;
  opacity: 0; transition: opacity .5s; pointer-events: none;
}
.tour-sottotitolo.visibile { opacity: 1; }
.tour-sottotitolo[hidden] { display: none; }
.tour-sottotitolo b { display: block; margin-bottom: 2px; font-family: var(--f-ui); font-weight: 400; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
/* sul telefono il tour non c'è (il suo bottone è nascosto), e nemmeno la sua voce */
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) { .barra-voce, .tour-sottotitolo { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .barra-voce.parla .icona-voce i { animation: none; }
  .tour-sottotitolo { transition: none; }
}

/* SYNTONY fra online e piazza (parete.js) e «Invita un amico» (invita.js, e il bottone nella foto ricordo).
   Si aggiunge dopo stile.css (costruisci.mjs legge i file di sorgente/stili/ in ordine). */

/* ---------- SYNTONY: l'invito alla parete, sotto il modulo, dopo un pensiero acceso ---------- */
.invito-parete {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px 12px; margin: 12px 0 4px; padding: 14px 16px 15px 14px;
  border: 1px solid var(--filo); border-left: 2px solid var(--oro);
  background: linear-gradient(100deg, rgba(231, 181, 98, .1), rgba(3, 6, 15, .42) 70%);
  opacity: 0; transform: translateY(8px); transition: opacity .8s var(--curva), transform .8s var(--curva);
}
.invito-parete[hidden] { display: none; }
.invito-parete.visibile { opacity: 1; transform: none; }
.invito-parete-stella { margin-top: 3px; color: var(--oro); font-size: 13px; text-shadow: 0 0 10px var(--oro); }
.invito-parete-testo { margin: 0; font-style: italic; font-size: 17px; line-height: 1.4; color: var(--testo); text-wrap: pretty; }
/* il bottone sotto il testo, allineato con lui: il pannello è stretto anche sul computer */
.invito-parete .bottone-filo { grid-column: 2; justify-self: start; height: 38px; padding: 0 20px; font-size: 10px; letter-spacing: .24em; }

/* ---------- «Invita un amico»: il bottone nel capitolo «Come arrivare» e quello nella scheda dei luoghi ---------- */
[data-azione="invita"][hidden] { display: none; }
.invita-qui {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; margin: 8px 0 -8px; padding: 0 2px;
  border: 0; background: none; color: var(--oro-chiaro);
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; transition: color .3s;
}
.invita-qui span:first-child { color: var(--oro); text-shadow: 0 0 8px var(--oro); }
.invita-qui span + span { padding-bottom: 4px; border-bottom: 1px solid var(--filo); transition: border-color .3s; }
.invita-qui:hover { color: #fff; }
.invita-qui:hover span + span { border-color: var(--oro); }

/* nella foto ricordo, accanto a «Salva»: sul telefono i bottoni vanno su due righe, la foto lascia loro il posto */
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  .foto-ricordo.con-invito { --sopra-sotto: calc(240px + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + var(--striscia, 0px)); }
}

/* ---------- la scheda: il testo pronto e il link, da selezionare ---------- */
.invita {
  position: fixed; inset: 0; z-index: 47; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(70% 60% at 50% 45%, rgba(3, 6, 15, .5), rgba(2, 4, 10, .84));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .4s;
}
.invita[hidden] { display: none; }
.invita.aperta { opacity: 1; }
.invita-scheda {
  position: relative; width: min(440px, 100%); margin: auto; padding: 28px 28px 24px; box-sizing: border-box;
  display: grid; gap: 12px;
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 70px rgba(231, 181, 98, .08);
  transform: translateY(12px) scale(.985); transition: transform .5s var(--curva); outline: none;
}
.invita.aperta .invita-scheda { transform: none; }
/* gli ornamenti d'angolo dei pannelli */
.invita-scheda::before, .invita-scheda::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; border: 1px solid var(--oro); opacity: .8; }
.invita-scheda::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.invita-scheda::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.invita-scheda .occhiello { margin: 0; padding-right: 36px; }
.invita-dove { margin: 0; font-style: italic; font-size: 19px; line-height: 1.35; color: rgba(244, 236, 220, .88); }
.invita-dove strong { font-style: normal; font-weight: 600; color: var(--oro-chiaro); }
.invita-campo { display: grid; gap: 5px; }
.invita-campo span { font-family: var(--f-ui); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--tenue); }
.invita-campo textarea, .invita-campo input {
  width: 100%; box-sizing: border-box; margin: 0; padding: 10px 13px; resize: none;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--filo); border-radius: 4px; outline: none;
  color: var(--testo); font-family: var(--f-testo); font-size: 17px; line-height: 1.35;
  -webkit-user-select: text; user-select: text; transition: border-color .3s, box-shadow .3s;
}
.invita-campo input { font-family: var(--f-ui); font-size: 13px; letter-spacing: .02em; color: var(--oro-chiaro); }
.invita-campo textarea:focus, .invita-campo input:focus { border-color: var(--oro-chiaro); box-shadow: 0 0 20px rgba(231, 181, 98, .2); }
.invita-campo ::selection { background: rgba(231, 181, 98, .45); color: #fff; }
.invita-stato { margin: 0; min-height: 1.5em; font-family: var(--f-ui); font-size: 11px; letter-spacing: .1em; line-height: 1.5; color: var(--tenue); }
.invita-stato.fatto { color: var(--oro-chiaro); }
.invita-azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.invita-azioni .bottone-oro, .invita-azioni .bottone-filo { min-width: 120px; height: 44px; }
.invita-x { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--filo-forte); background: rgba(3, 6, 15, .5); color: var(--oro-chiaro); font-size: 22px; line-height: 1; }
.invita-x:hover { background: var(--oro); color: var(--notte); }
@media (max-width: 480px) {
  .invita-scheda { padding: 24px 18px 20px; }
  .invita-dove { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .invito-parete, .invita, .invita-scheda { transition: none; transform: none; }
}

/* L'interruttore della lingua «IT · EN» nella barra in alto (lingua.js).
   Discreto come i bottoni della barra: una pillola sottile, la lingua scelta in oro. */

.lingua {
  display: inline-flex; align-items: center; gap: 1px; height: 30px; padding: 0 3px; margin-right: 4px;
  border: 1px solid var(--filo); border-radius: 30px;
  font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .16em; color: var(--tenuissimo);
}
.lingua > span { opacity: .6; }
.lingua button {
  min-width: 30px; height: 24px; padding: 0 6px 0 8px; /* la spaziatura delle lettere lascia aria a destra */
  background: transparent; border: 0; border-radius: 24px; color: var(--tenue); letter-spacing: inherit;
  transition: color .3s, background .3s;
}
.lingua button:hover { color: var(--testo); }
.lingua button[aria-pressed="true"] { color: var(--oro-chiaro); background: rgba(231, 181, 98, .14); }
.lingua button:focus-visible { outline-offset: 1px; }

/* sul telefono la barra è stretta: la pillola si fa più piccola, ma resta comoda da toccare */
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  .lingua { height: 30px; margin: 0 0 0 4px; padding: 0 1px; font-size: 9px; letter-spacing: .06em; }
  .lingua > span { display: none; }
  .lingua button { min-width: 25px; height: 26px; padding: 0 3px 0 4px; }
}
@media (max-width: 360px) { .marchio-sotto { font-size: 13px; } }

/* fra il telefono e i 1100 px la barra è stretta: con l'interruttore le date non ci stanno più (restano nella copertina) */
@media (min-width: 761px) and (max-width: 1100px) { .barra-data { display: none; } }

/* i testi scritti dal CSS, in inglese */
:root[lang="en"] .dialogo-domanda::before { content: "You: "; }

/* «Guardatevi dentro NATIVITAS» (marchio.js): il blocco nel capitolo dei partner e la didascalia della visita.
   Si aggiunge dopo stile.css (costruisci.mjs legge i file di sorgente/stili/ in ordine). */

/* ---------- il blocco nel capitolo «Per aziende e partner» (section: anche il marchio della barra in alto ha la classe
   «marchio», e senza il tag prendeva la cornice del blocco) ---------- */
section.marchio {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 26px; align-items: start;
  margin: 2px 0 18px; padding: 24px 26px 22px;
  border: 1px solid var(--filo-forte);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(231, 181, 98, .13), transparent 55%),
    linear-gradient(160deg, rgba(16, 27, 62, .7), rgba(3, 6, 15, .6));
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .06);
  transition: border-color .4s, box-shadow .4s;
}
section.marchio.con-logo { grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); }
/* gli ornamenti d'angolo dei pannelli */
section.marchio::before, section.marchio::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; border: 1px solid var(--oro); opacity: .9; }
section.marchio::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
section.marchio::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }
section.marchio.sopra { border-color: var(--oro-chiaro); box-shadow: 0 0 40px rgba(231, 181, 98, .28), inset 0 0 30px rgba(231, 181, 98, .1); }
.marchio [hidden] { display: none !important; }
.marchio .occhiello { margin-bottom: 8px; }
.marchio-titolo {
  margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(21px, 2.2vw, 30px); line-height: 1.12; letter-spacing: .04em;
  color: var(--oro-chiaro); text-shadow: 0 2px 18px rgba(231, 181, 98, .22);
}
.marchio-spiega { margin: 10px 0 16px; font-size: 18px; line-height: 1.45; color: rgba(244, 236, 220, .88); }
.marchio-campi { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.marchio-carica { flex: 0 0 auto; }
.marchio-nome { display: grid; gap: 5px; flex: 1 1 210px; font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }
.marchio-nome i { font-style: normal; color: var(--tenuissimo); }
.marchio-nome input {
  width: 100%; height: 48px; padding: 0 18px; box-sizing: border-box;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--filo-forte); border-radius: 48px;
  font-family: var(--f-testo); font-size: 18px; letter-spacing: normal; text-transform: none; color: var(--testo); outline: none;
  transition: border-color .4s, box-shadow .4s;
}
.marchio-nome input:focus { border-color: var(--oro-chiaro); box-shadow: 0 0 22px rgba(231, 181, 98, .22); }
.marchio-nome input::placeholder { color: var(--tenuissimo); font-style: italic; }
.marchio-privacy { margin: 12px 0 0; font-family: var(--f-ui); font-size: 11.5px; line-height: 1.6; color: var(--tenue); }
.marchio-privacy b { font-weight: 600; color: var(--oro-chiaro); }
.marchio-stato { margin: 10px 0 0; font-family: var(--f-ui); font-size: 12.5px; line-height: 1.55; color: var(--oro-chiaro); }
.marchio-stato:empty { display: none; }
.marchio-stato.errore { color: var(--ambra); }
.marchio-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.marchio-anteprima { margin: 0; }
.marchio-anteprima canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border: 1px solid var(--filo); background: var(--notte); box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 40px rgba(64, 98, 200, .12); }
.marchio-anteprima figcaption { margin-top: 8px; font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }
.marchio-parliamone { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 16px; border-top: 1px solid var(--filo); }
.marchio-parliamone-titolo { margin: 0; font-family: var(--f-corsivo); font-size: 34px; line-height: 1; color: var(--oro-chiaro); }
.marchio-parliamone-testo { margin: 0; flex: 1 1 260px; font-size: 17px; line-height: 1.45; color: rgba(244, 236, 220, .88); }
.marchio-indirizzo, .vm-indirizzo { font-family: var(--f-ui); letter-spacing: .06em; color: var(--oro-chiaro); white-space: nowrap; user-select: all; -webkit-user-select: all; cursor: text; }
.marchio-copiato { flex-basis: 100%; margin: 0; font-family: var(--f-ui); font-size: 12px; color: var(--oro-chiaro); }
.marchio-copiato:empty { display: none; }
/* senza la scena (o senza JavaScript) il blocco resta e dice perché la visita non c'è */
.marchio-senza3d { display: none; margin: 14px 0 0; font-family: var(--f-ui); font-size: 12px; line-height: 1.6; color: var(--tenue); }
:is(body.senza-3d, html:not(.js) body) .marchio-senza3d { display: block; }
html:not(.js) .marchio-solo-js, html:not(.js) .marchio-campi, html:not(.js) .marchio-privacy, .marchio:not(.pronto) .marchio-campi, .marchio:not(.pronto) .marchio-privacy { display: none; }
.marchio:not(.pronto) .marchio-senza3d { display: block; }
.marchio:not(.pronto) .marchio-solo-js { display: none; }

/* ---------- la visita guidata: la didascalia, in basso ---------- */
.visita-marchio {
  position: fixed; left: var(--margine); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 22;
  width: min(430px, calc(100vw - 32px)); padding: 22px 24px 20px; outline: none;
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 236, 200, .06);
  animation: entra .6s var(--curva);
}
.visita-marchio[hidden], .visita-marchio [hidden] { display: none !important; }
.visita-marchio::before, .visita-marchio::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; border: 1px solid var(--oro); opacity: .85; }
.visita-marchio::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
.visita-marchio::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }
.visita-marchio .occhiello { margin: 0 0 8px; font-size: 10px; }
.vm-titolo { margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: 23px; line-height: 1.15; letter-spacing: .03em; color: var(--oro-chiaro); }
.vm-misure { margin: 6px 0 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.vm-testo { margin: 9px 0 0; font-size: 17.5px; line-height: 1.45; color: rgba(244, 236, 220, .9); }
.vm-indirizzo-riga { margin: 10px 0 0; }
.vm-indirizzo { font-size: 17px; }
.vm-copiato { margin: 8px 0 0; font-family: var(--f-ui); font-size: 12px; color: var(--oro-chiaro); }
.vm-copiato:empty { display: none; }
.vm-tempo { height: 2px; margin-top: 16px; background: rgba(231, 181, 98, .16); overflow: hidden; }
.vm-tempo i { display: block; height: 100%; background: linear-gradient(90deg, var(--oro-scuro), var(--oro-chiaro)); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
.visita-marchio .azioni { margin-top: 14px; }
.visita-marchio .bottone-oro, .visita-marchio .bottone-filo { height: 44px; padding: 0 22px; }
.vm-avanti[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.visita-marchio.in-viaggio .vm-titolo, .visita-marchio.in-viaggio .vm-misure, .visita-marchio.in-viaggio .vm-testo { opacity: .78; transition: opacity .4s; }
.visita-marchio.parliamone .vm-titolo { font-family: var(--f-corsivo); font-size: 42px; letter-spacing: 0; }
.visita-marchio.parliamone .vm-tempo { display: none; }
/* durante la visita resta solo la didascalia: via i comandi, la minimappa, i segnaposto, le schede dei luoghi */
body.marchio-visita :is(.comandi, #bottone-aiuto, .esplora-testa, .minimappa, .joystick, .segnaposto, .scheda-esplora, #bottone-neve, .chip-giroscopio, .caccia-invito, .caccia-contatore) { opacity: 0 !important; pointer-events: none !important; }

/* ---------- telefono ---------- */
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  section.marchio, section.marchio.con-logo { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 18px; }
  .marchio-spiega { font-size: 16.5px; }
  .marchio-campi .bottone-oro { flex: 1 1 100%; }
  .marchio-azioni .bottone-oro, .marchio-azioni .bottone-filo { flex: 1 1 100%; padding: 0 14px; }
  .marchio-anteprima { max-width: 340px; }
  .marchio-parliamone-titolo { font-size: 30px; }
  .visita-marchio { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 16px 16px 14px; }
  .visita-marchio .occhiello { margin-bottom: 6px; }
  .vm-titolo { font-size: 20px; }
  .vm-testo { font-size: 15.5px; margin-top: 6px; }
  .vm-tempo { margin-top: 12px; }
  .visita-marchio .azioni { margin-top: 12px; gap: 10px; }
  .visita-marchio .azioni button { flex: 1 1 0; padding: 0 12px; }
  .visita-marchio.parliamone .vm-titolo { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .visita-marchio { animation: none; }
  .vm-tempo i { transition: none; }
}

/* ---------- il meteo vero di Milano, sotto il conto alla rovescia (meteo.js) ---------- */
.conto-meteo {
  flex-basis: 100%; display: flex; align-items: center; gap: 10px; margin: -4px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(231, 181, 98, .16);
  font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue);
  animation: meteo-entra 1.2s var(--curva);
}
@keyframes meteo-entra { from { opacity: 0; transform: translateY(4px); } }
.meteo-segno { position: relative; flex: none; width: 7px; height: 7px; transform: rotate(45deg); background: var(--oro); box-shadow: 0 0 10px rgba(231, 181, 98, .8); }
/* quando nevica, il segno è un fiocco: due bastoncini incrociati sul rombo */
.meteo-segno.neve { background: linear-gradient(var(--ghiaccio), var(--ghiaccio)) center / 1px 100% no-repeat; box-shadow: none; width: 11px; height: 11px; transform: none; filter: drop-shadow(0 0 3px rgba(188, 214, 255, .8)); }
.meteo-segno.neve::before, .meteo-segno.neve::after { content: ""; position: absolute; left: 5px; top: 0; width: 1px; height: 11px; background: var(--ghiaccio); box-shadow: 0 0 6px rgba(188, 214, 255, .9); transform: rotate(60deg); }
.meteo-segno.neve::after { transform: rotate(-60deg); }
.meteo-testo { color: var(--testo); }
.meteo-fonte { margin-left: auto; white-space: nowrap; font-size: 9px; letter-spacing: .14em; color: var(--tenuissimo); text-decoration: none; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.meteo-fonte:hover, .meteo-fonte:focus-visible { color: var(--oro-chiaro); border-bottom-color: var(--filo); }
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  .conto-meteo { font-size: 9.5px; letter-spacing: .14em; gap: 8px; padding-top: 8px; }
  .meteo-fonte { font-size: 8.5px; }
}

/* ---------- il visore WebXR (visore.js) ---------- */
.barra-visore[hidden] { display: none; }
/* il pulsante allarga la barra di 117 px: sotto i 1200 px resta l'icona, sotto i 1120 la data gli lascia il posto */
@media (max-width: 1200px) { .barra-visore .barra-etichetta { display: none; } }
@media (max-width: 1120px) { .barra-destra:has(> .barra-visore:not([hidden])) .barra-data { display: none; } }
.icona-visore { position: relative; width: 19px; height: 10px; border: 1px solid var(--oro-chiaro); border-radius: 3px 3px 6px 6px; }
.icona-visore::before, .icona-visore::after { content: ""; position: absolute; top: 2.5px; width: 4px; height: 4px; border-radius: 50%; background: var(--oro-chiaro); }
.icona-visore::before { left: 2.5px; }
.icona-visore::after { right: 2.5px; }
body.nel-visore .barra-visore { border-color: var(--oro); background: rgba(231, 181, 98, .14); }
/* sullo schermo del computer, mentre si è nel visore */
.velo-visore {
  position: fixed; inset: 0; z-index: 40; display: none; place-items: center; text-align: center; padding: 24px;
  background: rgba(3, 6, 15, .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.nel-visore .velo-visore { display: grid; }
.velo-visore > div { max-width: 640px; }
.velo-visore h2 { margin: 0 0 14px; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .1em; color: var(--oro-chiaro); }
.velo-visore p:not(.occhiello) { margin: 0 0 24px; font-size: 18px; line-height: 1.5; color: var(--tenue); }
.velo-visore button { height: 42px; padding: 0 22px; border-radius: 30px; font-family: var(--f-ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.avviso-visore {
  position: fixed; top: calc(var(--barra) + 8px + var(--striscia, 0px)); right: var(--margine); z-index: 30; max-width: min(360px, calc(100vw - 32px)); margin: 0;
  padding: 10px 16px; border: 1px solid var(--filo); border-radius: 18px; background: rgba(3, 6, 15, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .08em; line-height: 1.5; color: var(--testo);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .5s, transform .5s var(--curva);
}
.avviso-visore.visibile { opacity: 1; transform: none; }

/* Le notifiche di NATIVITAS (push.js): la nostra richiesta gentile (prima di quella del browser), la scelta degli
   argomenti, il caso dell'iPhone (la schermata Home), il campanello «Avvisi» nella barra e la riga «Avvisami» che
   compare sotto un'iscrizione o una prenotazione. La stessa famiglia della finestra delle notizie. */

.notifiche {
  position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(70% 60% at 50% 45%, rgba(3, 6, 15, .45), rgba(2, 4, 10, .82));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s;
}
.notifiche[hidden] { display: none; }
.notifiche.aperta { opacity: 1; }

.notifiche-scheda {
  position: relative; width: min(480px, 100%); margin: auto; padding: 34px 34px 28px;
  display: grid; gap: 14px; text-align: left;
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 70px rgba(231, 181, 98, .08), inset 0 1px 0 rgba(255, 236, 200, .06);
  transform: translateY(14px) scale(.985); transition: transform .6s var(--curva);
  outline: none;
}
.notifiche.aperta .notifiche-scheda { transform: none; }
.notifiche-scheda::before, .notifiche-scheda::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 1px solid var(--oro-logo); opacity: .85; }
.notifiche-scheda::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.notifiche-scheda::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }

.notifiche-occhiello { margin: 0; color: var(--oro-logo); }
.notifiche-titolo {
  margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(23px, 2.8vw, 30px); line-height: 1.14; letter-spacing: .03em;
  color: var(--oro-chiaro); text-shadow: 0 2px 18px rgba(231, 181, 98, .22); text-wrap: balance;
}
.notifiche-testo { margin: 0; font-family: var(--f-testo); font-size: 19px; line-height: 1.5; color: rgba(244, 236, 220, .88); }

/* gli argomenti: tre righe fra due filetti sottili */
.notifiche-argomenti { margin: 2px 0 0; padding: 4px 0; border: 0; border-block: 1px solid rgba(193, 172, 110, .28); display: grid; }
.notifiche-argomenti[hidden] { display: none; }
.notifiche-argomento { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 9px 2px; cursor: pointer; }
.notifiche-argomento + .notifiche-argomento { border-top: 1px solid rgba(193, 172, 110, .14); }
.notifiche-argomento input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--oro); cursor: pointer; }
.notifiche-argomento b { display: block; font-family: var(--f-ui); font-weight: 400; font-size: 14px; letter-spacing: .02em; color: var(--testo); }
.notifiche-argomento small { display: block; font-family: var(--f-ui); font-size: 12.5px; line-height: 1.5; color: var(--tenue); }

/* l'iPhone: i tre tocchi */
.notifiche-passi { margin: 0; padding: 4px 0 4px 22px; font-family: var(--f-ui); font-size: 14px; line-height: 1.7; color: var(--testo); }
.notifiche-passi[hidden] { display: none; }
.notifiche-passi li::marker { color: var(--oro-logo); }
.icona-condividi { width: 20px; height: 20px; vertical-align: -4px; color: var(--oro-chiaro); }

.notifiche-privacy { margin: 0; font-family: var(--f-ui); font-size: 11.5px; line-height: 1.6; color: var(--tenuissimo); }
.notifiche-privacy:empty { display: none; }
.notifiche-privacy strong { font-weight: 600; color: var(--tenue); }
.notifiche-privacy a { color: var(--oro-chiaro); }
.notifiche-stato { margin: 0; font-family: var(--f-ui); font-size: 13px; line-height: 1.55; color: var(--oro-chiaro); }
.notifiche-stato:empty { display: none; }
.notifiche-stato.errore { color: var(--ambra); }

.notifiche-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.notifiche-azioni [hidden] { display: none; }
.notifiche-azioni .bottone-oro, .notifiche-azioni .bottone-filo { min-width: 132px; }
.notifiche-azioni [disabled] { opacity: .6; }
.notifiche-azioni .bottone-filo.pericolo { color: var(--ambra); border-color: rgba(255, 179, 92, .55); }

.notifiche-x {
  position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filo); background: rgba(3, 6, 15, .4); font-size: 22px; line-height: 1; color: var(--oro-chiaro); cursor: pointer;
  transition: background .3s, color .3s;
}
.notifiche-x::before { content: "×"; }
.notifiche-x:hover { background: var(--oro); color: var(--notte); }
.notifiche :focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }
.notifiche-scheda:focus-visible { outline: none; }

/* ---------- il campanello «Avvisi» nella barra in alto (pagina.html, #bottone-notifiche) */
.barra-notifiche[hidden], [data-azione="notifiche"][hidden] { display: none; }
.icona-campanello { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; }
.icona-campanello svg { width: 18px; height: 18px; overflow: visible; }
/* acceso: un punto d'oro accanto */
.barra-notifiche.accese .icona-campanello::after {
  content: ""; position: absolute; right: -2px; top: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--oro); box-shadow: 0 0 8px rgba(231, 181, 98, .8);
}

/* ---------- la riga «Avvisami» sotto un'iscrizione o una prenotazione */
.offerta-notifiche {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(193, 172, 110, .28);
}
.offerta-testo { margin: 0; flex: 1 1 220px; font-family: var(--f-ui); font-size: 13.5px; line-height: 1.55; color: var(--testo); }
.offerta-notifiche .bottone-filo { min-width: 0; }
.offerta-passi { flex: 1 1 100%; margin: 0; }

@media (max-width: 520px) {
  .notifiche-scheda { padding: 28px 20px 22px; gap: 12px; }
  .notifiche-testo { font-size: 18px; }
  .notifiche-azioni .bottone-oro, .notifiche-azioni .bottone-filo { flex: 1; min-width: 0; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .notifiche, .notifiche-scheda { transition: none; }
  .notifiche-scheda { transform: none; }
}

/* «Le notizie di NATIVITAS»: la finestra dell'email all'ingresso (notizie.js).
   Si aggiunge dopo stile.css (costruisci.mjs legge i file di sorgente/stili/ in ordine). */

.notizie {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  /* la piazza resta dietro, velata: si capisce dove si è entrati */
  background: radial-gradient(70% 60% at 50% 45%, rgba(3, 6, 15, .45), rgba(2, 4, 10, .82));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s;
}
.notizie[hidden] { display: none; }
.notizie.aperta { opacity: 1; }

.notizie-scheda {
  position: relative; width: min(470px, 100%); margin: auto; padding: 34px 34px 28px;
  display: grid; gap: 14px; text-align: left;
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 70px rgba(231, 181, 98, .08), inset 0 1px 0 rgba(255, 236, 200, .06);
  transform: translateY(14px) scale(.985); transition: transform .6s var(--curva);
  outline: none;
}
.notizie.aperta .notizie-scheda { transform: none; }
/* gli ornamenti d'angolo dei pannelli */
.notizie-scheda::before, .notizie-scheda::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 1px solid var(--oro); opacity: .8; }
.notizie-scheda::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.notizie-scheda::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.notizie-scheda .occhiello { margin: 0; }

.notizie-titolo {
  margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(24px, 3vw, 32px); line-height: 1.12; letter-spacing: .03em;
  color: var(--oro-chiaro); text-shadow: 0 2px 18px rgba(231, 181, 98, .22); text-wrap: balance;
}
.notizie-testo { margin: 0; font-family: var(--f-testo); font-size: 19px; line-height: 1.5; color: rgba(244, 236, 220, .88); }

.notizie-modulo { display: grid; gap: 12px; margin-top: 4px; }
.notizie-campo { display: block; }
.notizie-campo input {
  width: 100%; height: 50px; padding: 0 20px; box-sizing: border-box;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--filo-forte); border-radius: 50px;
  font-family: var(--f-testo); font-size: 19px; color: var(--testo); outline: none; transition: border-color .4s, box-shadow .4s;
}
.notizie-campo input:focus { border-color: var(--oro-chiaro); box-shadow: 0 0 24px rgba(231, 181, 98, .25); }
.notizie-campo input::placeholder { color: var(--tenuissimo); font-style: italic; }
.notizie-campo input[aria-invalid="true"], .notizie-consenso input[aria-invalid="true"] + span { border-color: var(--ambra); color: var(--oro-chiaro); }

.notizie-consenso { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; font-family: var(--f-ui); font-size: 13px; line-height: 1.55; color: var(--tenue); }
.notizie-consenso input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--oro); cursor: pointer; }
/* il campo trappola: fuori dallo schermo per le persone e per i lettori di schermo, i programmi lo riempiono */
.notizie-trappola { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.notizie-privacy { margin: 0; font-family: var(--f-ui); font-size: 11.5px; line-height: 1.6; color: var(--tenuissimo); }
.notizie-privacy strong { font-weight: 600; color: var(--tenue); }
.notizie-privacy a { color: var(--oro-chiaro); }

.notizie-stato { margin: 0; min-height: 0; font-family: var(--f-ui); font-size: 13px; line-height: 1.55; color: var(--oro-chiaro); }
.notizie-stato:empty { display: none; }
.notizie-stato.errore { color: var(--ambra); }
.notizie-scheda.fatta .notizie-modulo { display: none; }
.notizie-scheda.fatta .notizie-stato { font-family: var(--f-testo); font-size: 19px; color: var(--testo); }

.notizie-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.notizie-azioni [hidden] { display: none; }
.notizie-azioni .bottone-oro, .notizie-azioni .bottone-filo { min-width: 132px; }
.notizie-iscrivi[disabled] { opacity: .6; }

.notizie-x {
  position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filo); background: rgba(3, 6, 15, .4); font-size: 22px; line-height: 1; color: var(--oro-chiaro); cursor: pointer;
  transition: background .3s, color .3s;
}
.notizie-x:hover { background: var(--oro); color: var(--notte); }
.notizie :focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }
.notizie-campo input:focus-visible { outline: none; } /* il campo ha già il suo bagliore */

/* il bottone nel capitolo «Come arrivare» compare solo se la finestra c'è */
[data-azione="notizie"][hidden] { display: none; }

@media (max-width: 520px) {
  .notizie-scheda { padding: 28px 20px 22px; gap: 12px; }
  .notizie-testo { font-size: 18px; }
  .notizie-azioni .bottone-oro, .notizie-azioni .bottone-filo { flex: 1; min-width: 0; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .notizie, .notizie-scheda { transition: none; }
  .notizie-scheda { transform: none; }
}

/* Le pagine dedicate (15/10/2026): /pista, /aperitivo, /albero, /syntony, /come-arrivare, /domande, /stampa e le loro
   gemelle inglesi (pagine-dedicate.mjs). Usano lo STESSO foglio di stile della home (stile.css e stili/*.css, il file
   assets/nativitas.<impronta>.css), così la barra, i caratteri, i titoli, i filetti con la stella, i bottoni oro e a
   filo, le schede e il piede restano uguali alla home anche quando la home cambia. Qui c'è solo quello che serve a una
   pagina da scorrere senza 3D: tutto sotto html.pagina-dedicata, quindi la home non ne è toccata. */

/* una pagina normale: scorre il documento (la home tiene fermo html e body per la scena) */
html.pagina-dedicata, html.pagina-dedicata body { height: auto; min-height: 100%; overflow: visible; overflow-x: hidden; }
/* il cielo di notte dietro il sito: il blu della home senza 3D e qualche stellina, solo CSS (niente da scaricare) */
html.pagina-dedicata body {
  background-color: var(--notte);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 246, 223, .75), transparent 60%),
    radial-gradient(1px 1px at 72% 9%, rgba(255, 246, 223, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 31%, rgba(248, 221, 162, .7), transparent 60%),
    radial-gradient(1px 1px at 88% 44%, rgba(255, 246, 223, .5), transparent 60%),
    radial-gradient(1px 1px at 22% 62%, rgba(255, 246, 223, .45), transparent 60%),
    radial-gradient(1.5px 1.5px at 61% 74%, rgba(248, 221, 162, .5), transparent 60%),
    radial-gradient(1px 1px at 93% 86%, rgba(255, 246, 223, .45), transparent 60%),
    radial-gradient(1px 1px at 5% 92%, rgba(255, 246, 223, .4), transparent 60%),
    radial-gradient(80% 60% at 30% 0%, #0d1a3d, transparent 70%);
  background-size: 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 100% 1400px;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  font-size: 18px;
}

/* la barra in alto, come nella home: il marchio a sinistra, le date e l'interruttore IT · EN a destra. Qui la pagina
   scorre sotto, quindi un velo blu notte che sfuma */
.pagina-dedicata .barra { background: linear-gradient(180deg, rgba(3, 6, 15, .94) 0, rgba(3, 6, 15, .72) 70%, rgba(3, 6, 15, 0)); }
.pagina-dedicata .barra-viaggio {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px; margin-left: 4px;
  border: 1px solid var(--filo); border-radius: 40px; background: rgba(10, 20, 48, .45);
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--testo); text-decoration: none;
  transition: border-color .4s, background .4s;
}
.pagina-dedicata .barra-viaggio:hover, .pagina-dedicata .barra-viaggio:focus-visible { border-color: var(--oro); background: rgba(231, 181, 98, .12); }
/* l'interruttore IT · EN della home (stili/lingua.css), qui con due link al posto dei bottoni */
.pagina-dedicata .lingua a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 6px 0 8px;
  border-radius: 24px; color: var(--tenue); text-decoration: none; transition: color .3s, background .3s;
}
.pagina-dedicata .lingua a:hover { color: var(--testo); }
.pagina-dedicata .lingua a[aria-current="page"] { color: var(--oro-chiaro); background: rgba(231, 181, 98, .14); }

/* la testata: l'immagine del luogo, larga e scura, e sopra occhiello, titolo e sottotitolo come nei capitoli */
.pagina-eroe { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; padding: calc(var(--barra) + 60px) var(--margine) 56px; overflow: hidden; border-bottom: 1px solid var(--filo); }
.pagina-eroe > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pagina-eroe::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 6, 15, .86) 0, rgba(3, 6, 15, .55) 45%, rgba(3, 6, 15, .2) 100%),
    linear-gradient(180deg, rgba(3, 6, 15, .55) 0, transparent 30%, transparent 55%, rgba(3, 6, 15, .96) 100%);
}
.pagina-eroe-testo { position: relative; z-index: 2; max-width: 760px; }
.pagina-eroe .titolo { font-size: clamp(32px, 4.6vw, 64px); text-shadow: 0 2px 24px rgba(0, 0, 0, .7); }
.pagina-eroe .sottotitolo { color: rgba(244, 236, 220, .86); text-shadow: 0 2px 16px rgba(0, 0, 0, .9); }
.pagina-eroe .filetto { justify-content: flex-start; max-width: 240px; margin: 18px 0 0; }
.pagina-eroe .filetto::before { flex: 0 0 0; }
.pagina-eroe .pagina-quando { margin: 16px 0 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--tenue); text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }

/* le briciole: dove si è, in piccolo, sotto la testata */
.briciole { max-width: 900px; margin: 22px auto 0; padding: 0 var(--margine); font-family: var(--f-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tenuissimo); }
.briciole ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.briciole li + li::before { content: "✦"; margin-right: 10px; font-size: 8px; color: var(--oro); vertical-align: 1px; }
.briciole a { color: var(--oro); text-decoration: none; border-bottom: 1px solid var(--filo); }

/* il corpo: i riquadri come i pannelli dei capitoli (vetro, filo d'oro, ornamenti d'angolo) */
.pagina-corpo { max-width: 900px; margin: 0 auto; padding: 26px var(--margine) 30px; }
.riquadro {
  position: relative; margin: 0 0 26px; padding: 34px 36px 30px;
  background: var(--vetro); border: 1px solid var(--filo);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 236, 200, .06);
}
.riquadro::before, .riquadro::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 1px solid var(--oro); opacity: .8; }
.riquadro::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.riquadro::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.riquadro > :last-child { margin-bottom: 0; }
.riquadro h2 { margin: 0 0 14px; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: .03em; color: var(--oro-chiaro); }
.riquadro h3 { margin: 22px 0 8px; font-family: var(--f-titolo); font-weight: 500; font-size: 17px; letter-spacing: .05em; color: var(--oro-chiaro); }
.riquadro .filetto { justify-content: flex-start; margin: 14px 0 18px; }
.riquadro .filetto::before { flex: 0 0 0; }
.riquadro .filetto::after { flex: 0 0 120px; }
.riquadro .testo a, .riquadro li a, .riquadro dd a, .domanda a { color: var(--oro-chiaro); text-decoration: underline; text-decoration-color: var(--filo-forte); text-underline-offset: .2em; }
.riquadro .testo a:hover, .riquadro li a:hover, .domanda a:hover { text-decoration-color: var(--oro-chiaro); }
.riquadro .elenco-stelle li { font-size: 18px; line-height: 1.45; color: rgba(244, 236, 220, .88); }
.riquadro .schede { margin: 6px 0 18px; }
.riquadro .schede dd { font-size: 17px; }
.riquadro .azioni { margin-top: 18px; }
.riquadro .percorsi { margin-top: 4px; }

/* gli orari della pista, mese per mese (da ORARI_PISTA) */
.orari-mesi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 6px 0 16px; background: var(--filo); border: 1px solid var(--filo); }
.orari-mesi > div { background: rgba(5, 10, 26, .92); padding: 12px 14px; }
.orari-mesi > div:last-child:nth-child(odd) { grid-column: 1 / -1; } /* l'ultimo riquadro da solo: tutta la riga, niente buco */
.orari-mesi h3 { margin: 0 0 6px; font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); font-weight: 400; }
.orari-mesi ul { list-style: none; margin: 0; padding: 0; }
.orari-mesi li { font-size: 16px; line-height: 1.5; color: rgba(244, 236, 220, .88); }
.orari-mesi b { font-family: var(--f-titolo); font-weight: 500; font-size: 14px; color: var(--oro-chiaro); }

/* le domande frequenti: una per blocco, il titolo in oro */
.domanda { padding: 16px 0; border-top: 1px solid rgba(231, 181, 98, .18); }
.domanda:first-of-type { border-top: 0; padding-top: 4px; }
.domanda h3 { margin: 0 0 6px; }
.domanda p { margin: 0; font-size: 18px; line-height: 1.5; color: rgba(244, 236, 220, .88); }

/* le immagini da scaricare (Stampa) */
.immagini-stampa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 14px; }
.immagini-stampa figure { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--filo); background: rgba(3, 6, 15, .5); }
.immagini-stampa a.scarica-immagine { display: block; line-height: 0; }
.immagini-stampa img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.immagini-stampa .verticale img { aspect-ratio: 16 / 9; object-fit: contain; background: #03060f; }
.immagini-stampa figcaption { padding: 10px 12px 12px; font-size: 15px; line-height: 1.4; color: rgba(244, 236, 220, .84); }
.immagini-stampa figcaption a { display: inline-block; margin-top: 6px; font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); text-decoration: none; border-bottom: 1px solid var(--filo); }

/* «Scopri NATIVITAS»: le altre pagine, come le carte del capitolo per le aziende */
.pagina-dedicata .carte { margin: 8px 0 6px; }
.pagina-dedicata a.carta { text-decoration: none; color: inherit; }
.pagina-dedicata a.carta:focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }
.pagina-dedicata .carta .apri { margin-top: 10px; font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); flex: none; }

/* il piede, come quello della home (.crediti), in fondo alla pagina */
.pagina-piede { max-width: 900px; margin: 0 auto; padding: 0 var(--margine) 48px; }
.pagina-piede .crediti { margin-top: 0; }
.pagina-piede .crediti-pagine { margin: 0 0 4px; font-family: var(--f-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 2; }
.pagina-piede .crediti-pagine a, .pagina-piede .crediti-legale a { color: var(--oro); }

/* sul telefono, come la home sul telefono: la barra più bassa, i margini di 16 px, una colonna */
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  html.pagina-dedicata body { font-size: 16px; }
  .pagina-dedicata .barra-viaggio { display: none; }
  .pagina-eroe { min-height: 64vh; padding: calc(var(--barra) + 40px) 16px 34px; }
  .pagina-eroe .titolo { font-size: clamp(28px, 8.4vw, 40px); }
  .pagina-eroe::after { background: linear-gradient(180deg, rgba(3, 6, 15, .5) 0, rgba(3, 6, 15, .2) 30%, rgba(3, 6, 15, .7) 62%, rgba(3, 6, 15, .97) 100%); }
  .briciole, .pagina-corpo, .pagina-piede { padding-left: 16px; padding-right: 16px; }
  .riquadro { padding: 26px 20px 22px; }
  .riquadro .elenco-stelle li, .domanda p { font-size: 16.5px; }
  .orari-mesi, .immagini-stampa { grid-template-columns: 1fr; }
  .pagina-dedicata .carte { grid-template-columns: 1fr; }
  .riquadro .schede { grid-template-columns: 1fr; }
  .riquadro .azioni > a { flex: 1 1 100%; }
}

/* I pop-up d'annuncio (popup.js), decisi dalla pagina riservata. Due forme:
   - la «finestra» al centro, con la piazza velata dietro: la stessa famiglia della finestra delle notizie;
   - la scheda «nell'angolo», in basso a destra (sul telefono in basso, larga), discreta: la visita continua.
   Blu notte, vetro, un filetto d'oro e gli angoli dei pannelli; l'oro dei loghi (--oro-logo) per gli ornamenti.
   Si aggiunge dopo stile.css (costruisci.mjs legge i file di sorgente/stili/ in ordine): finché la pagina non crea
   la finestra (js/canali.js), queste regole non toccano niente. */

.popup {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(70% 60% at 50% 45%, rgba(3, 6, 15, .42), rgba(2, 4, 10, .8));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s;
}
.popup[hidden] { display: none; }
.popup.aperto { opacity: 1; }

.popup-scheda {
  position: relative; width: min(460px, 100%); margin: auto; padding: 34px 34px 28px; overflow: hidden;
  display: grid; gap: 14px; text-align: left;
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 70px rgba(231, 181, 98, .08), inset 0 1px 0 rgba(255, 236, 200, .06);
  transform: translateY(14px) scale(.985); transition: transform .6s var(--curva);
  outline: none;
}
.popup.aperto .popup-scheda { transform: none; }
/* gli ornamenti d'angolo dei pannelli, nell'oro dei loghi */
.popup-scheda::before, .popup-scheda::after { content: ""; position: absolute; z-index: 1; width: 18px; height: 18px; pointer-events: none; border: 1px solid var(--oro-logo); opacity: .85; }
.popup-scheda::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.popup-scheda::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }

/* l'immagine: a filo dei bordi, con un filetto d'oro sotto e la notte che la sfuma */
.popup-figura { position: relative; margin: -34px -34px 6px; }
.popup-figura[hidden] { display: none; }
.popup-figura img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid var(--oro-logo); }
.popup-figura::after { content: ""; position: absolute; inset: auto 0 1px; height: 38%; background: linear-gradient(to bottom, transparent, rgba(4, 8, 20, .55)); pointer-events: none; }

.popup-occhiello { margin: 0; color: var(--oro-logo); }
.popup-titolo {
  margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(23px, 2.8vw, 30px); line-height: 1.14; letter-spacing: .03em;
  color: var(--oro-chiaro); text-shadow: 0 2px 18px rgba(231, 181, 98, .22); text-wrap: balance;
}
.popup-testo { margin: 0; font-family: var(--f-testo); font-size: 19px; line-height: 1.5; color: rgba(244, 236, 220, .88); text-wrap: pretty; }
.popup-testo[hidden] { display: none; }
.popup-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.popup-azioni [hidden] { display: none; }
.popup-azioni .bottone-oro, .popup-azioni .bottone-filo { min-width: 132px; }

.popup-x {
  position: absolute; z-index: 2; right: 12px; top: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filo); background: rgba(3, 6, 15, .5); font-size: 22px; line-height: 1; color: var(--oro-chiaro); cursor: pointer;
  transition: background .3s, color .3s;
}
.popup-x::before { content: "×"; }
.popup-x:hover { background: var(--oro); color: var(--notte); }
.popup :focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }
.popup-scheda:focus-visible { outline: none; }

/* ---------- nell'angolo: niente velo, la pagina resta viva intorno */
.popup[data-forma="angolo"] {
  inset: auto calc(20px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) auto; z-index: 41;
  display: block; padding: 0; overflow: visible; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none;
}
.popup[data-forma="angolo"] .popup-scheda {
  pointer-events: auto; width: min(340px, calc(100vw - 32px)); padding: 24px 24px 20px; gap: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(231, 181, 98, .07), inset 0 1px 0 rgba(255, 236, 200, .06);
  transform: translateY(18px);
}
.popup[data-forma="angolo"].aperto .popup-scheda { transform: none; }
.popup[data-forma="angolo"] .popup-figura { margin: -24px -24px 4px; }
.popup[data-forma="angolo"] .popup-figura img { aspect-ratio: 16 / 9; }
.popup[data-forma="angolo"] .popup-titolo { font-size: 21px; padding-right: 30px; }
.popup[data-forma="angolo"] .popup-testo { font-size: 17px; }
.popup[data-forma="angolo"] .popup-x { width: 34px; height: 34px; right: 9px; top: 9px; font-size: 19px; }
.popup[data-forma="angolo"] .popup-azioni { gap: 10px; }
.popup[data-forma="angolo"] .popup-azioni .bottone-oro, .popup[data-forma="angolo"] .popup-azioni .bottone-filo { min-width: 0; }

@media (max-width: 520px) {
  .popup-scheda { padding: 28px 20px 22px; gap: 12px; }
  .popup-figura { margin: -28px -20px 4px; }
  .popup-testo { font-size: 18px; }
  .popup-azioni .bottone-oro, .popup-azioni .bottone-filo { flex: 1; min-width: 0; padding: 0 16px; }
  /* sul telefono la scheda nell'angolo diventa una striscia in basso, coi margini della pagina */
  .popup[data-forma="angolo"] { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .popup[data-forma="angolo"] .popup-scheda { width: 100%; padding: 20px 18px 18px; }
  .popup[data-forma="angolo"] .popup-figura { margin: -20px -18px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .popup, .popup-scheda { transition: none; }
  .popup-scheda, .popup[data-forma="angolo"] .popup-scheda { transform: none; }
}

/* «Prenota»: la finestra delle prenotazioni di eventi e cene (prenota.js), nello stile delle notizie: vetro, filo
   d'oro, gli ornamenti d'angolo. Si aggiunge dopo stile.css (costruisci.mjs legge i file di sorgente/stili/ in ordine). */

.prenota {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(70% 60% at 50% 45%, rgba(3, 6, 15, .5), rgba(2, 4, 10, .86));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s;
}
.prenota[hidden] { display: none; }
.prenota.aperta { opacity: 1; }

.prenota-scheda {
  position: relative; width: min(640px, 100%); margin: auto; padding: 34px 34px 26px;
  display: grid; gap: 14px; text-align: left;
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 70px rgba(231, 181, 98, .08), inset 0 1px 0 rgba(255, 236, 200, .06);
  transform: translateY(14px) scale(.985); transition: transform .6s var(--curva);
  outline: none;
}
.prenota.aperta .prenota-scheda { transform: none; }
.prenota-scheda::before, .prenota-scheda::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 1px solid var(--oro); opacity: .8; }
.prenota-scheda::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.prenota-scheda::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.prenota-scheda .occhiello { margin: 0; }

.prenota-titolo {
  margin: 0; padding-right: 40px; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.15; letter-spacing: .03em;
  color: var(--oro-chiaro); text-shadow: 0 2px 18px rgba(231, 181, 98, .22); text-wrap: balance; outline: none;
}
.prenota-corpo { display: grid; gap: 14px; }

/* 1. l'elenco */
.prenota-eventi { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prenota-evento { padding: 16px 18px; border: 1px solid var(--filo); background: rgba(5, 10, 26, .35); }
.prenota-evento h3 { margin: 4px 0 6px; font-family: var(--f-titolo); font-weight: 500; font-size: 20px; letter-spacing: .02em; color: var(--testo); }
.prenota-quando { margin: 0; font-family: var(--f-ui); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.prenota-descrizione { margin: 0 0 6px; font-family: var(--f-testo); font-size: 17px; line-height: 1.45; color: rgba(244, 236, 220, .86); }
.prenota-prezzo { margin: 0 0 10px; font-family: var(--f-ui); font-size: 12.5px; line-height: 1.5; color: var(--tenue); }
.prenota-turni { display: flex; flex-wrap: wrap; gap: 8px; }
.prenota-turno {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 112px; padding: 8px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--filo-forte); background: rgba(255, 255, 255, .03); color: var(--testo); font-family: var(--f-ui); text-align: left;
  transition: border-color .3s, background .3s;
}
.prenota-turno b { font-size: 17px; font-weight: 500; color: var(--oro-chiaro); font-variant-numeric: tabular-nums; }
.prenota-turno span { font-size: 11.5px; color: var(--tenue); }
.prenota-turno:hover:not([disabled]) { border-color: var(--oro); background: rgba(231, 181, 98, .1); }
.prenota-turno[disabled] { opacity: .45; cursor: not-allowed; }
.prenota-vuoto { margin: 0; font-family: var(--f-testo); font-size: 18px; line-height: 1.5; color: rgba(244, 236, 220, .88); }

/* 1-bis. la pista: il calendario a mese (come quello di «Pianifica la tua visita»), poi gli orari del giorno. I giorni
   che si prenotano in oro; pieni e chiusi spenti; il giorno scelto pieno d'oro. Celle e bottoni alti almeno 44 px. */
.pista-mese { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pista-mese-nome { margin: 0; font-family: var(--f-titolo); font-size: 19px; letter-spacing: .08em; color: var(--testo); }
.pista-freccia {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--filo); background: rgba(3, 6, 15, .4);
  font-size: 24px; line-height: 1; color: var(--oro-chiaro); cursor: pointer; transition: background .3s, border-color .3s;
}
.pista-freccia:hover:not(:disabled) { background: rgba(231, 181, 98, .14); border-color: var(--oro); }
.pista-freccia:disabled { opacity: .3; cursor: default; }
.pista-settimana, .pista-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pista-settimana span { text-align: center; font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenuissimo); }
.pista-g, .pista-fuori, .pista-vuoto { min-height: 44px; }
.pista-fuori { display: grid; place-items: center; font-family: var(--f-ui); font-size: 14px; color: rgba(244, 236, 220, .16); }
.pista-g {
  position: relative; padding: 0; border-radius: 10px; font-family: var(--f-ui); font-size: 16px; font-variant-numeric: tabular-nums; cursor: pointer;
  border: 1px solid transparent; background: rgba(255, 255, 255, .02); color: rgba(244, 236, 220, .34); transition: background .25s, border-color .25s, color .25s;
}
/* i giorni che si prenotano: il filo d'oro e il numero chiaro */
.pista-g.libero { border-color: rgba(231, 181, 98, .55); background: rgba(231, 181, 98, .1); color: var(--oro-chiaro); }
.pista-g.libero:hover { border-color: var(--oro); background: rgba(231, 181, 98, .2); }
/* pieni o chiusi: spenti, barrati da un filo sottile */
.pista-g.spento { cursor: default; text-decoration: line-through; text-decoration-color: rgba(244, 236, 220, .28); }
.pista-g.scelto, .pista-g.scelto:hover {
  border-color: var(--oro-chiaro); color: #1b1206; font-weight: 600;
  background: linear-gradient(140deg, #c69246, var(--oro) 45%, var(--oro-chiaro));
  box-shadow: 0 6px 22px rgba(231, 181, 98, .35);
}
.prenota .pista-g:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 2px; }
.pista-niente { grid-column: 1 / -1; margin: 6px 0; }
.pista-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-family: var(--f-ui); font-size: 11.5px; letter-spacing: .06em; color: var(--tenuissimo); }
.pista-legenda span::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border-radius: 3px; }
.pista-l-libero::before { border: 1px solid rgba(231, 181, 98, .7); background: rgba(231, 181, 98, .16); }
.pista-l-spento::before { border: 1px solid rgba(244, 236, 220, .2); background: rgba(255, 255, 255, .02); }
.pista-orari { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--filo); }
.pista-giorno-titolo { margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: 19px; letter-spacing: .03em; color: var(--testo); outline: none; }
.pista-orari .prenota-turno { min-height: 50px; justify-content: center; }
.pista-suggerimento { margin: 0; }

/* 2. il modulo */
.prenota-scelta { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--filo); }
.prenota-scelta p { margin: 0; font-family: var(--f-ui); font-size: 13.5px; color: var(--tenue); }
.prenota-scelta b { font-weight: 500; color: var(--testo); }
.prenota-cambia { padding: 4px 0; border: 0; background: none; font-family: var(--f-ui); font-size: 13px; color: var(--oro-chiaro); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.prenota-avviso { margin: 0; padding: 10px 14px; border-left: 2px solid var(--oro); font-family: var(--f-testo); font-size: 17px; line-height: 1.45; color: rgba(244, 236, 220, .9); background: rgba(231, 181, 98, .06); }
.prenota-modulo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.prenota-largo, .prenota-oltre { grid-column: 1 / -1; }
.prenota-campo { display: grid; gap: 5px; font-family: var(--f-ui); font-size: 12.5px; letter-spacing: .04em; color: var(--tenue); }
.prenota-campo input, .prenota-campo select, .prenota-campo textarea {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 16px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--filo-forte); border-radius: 46px;
  font-family: var(--f-testo); font-size: 18px; color: var(--testo); outline: none; transition: border-color .4s, box-shadow .4s;
}
.prenota-campo select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%), linear-gradient(135deg, var(--oro) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.prenota-campo select option { color: #1b2033; }
.prenota-campo textarea { min-height: 70px; padding: 12px 16px; border-radius: 18px; resize: vertical; line-height: 1.4; }
.prenota-campo input:focus, .prenota-campo select:focus, .prenota-campo textarea:focus { border-color: var(--oro-chiaro); box-shadow: 0 0 24px rgba(231, 181, 98, .25); }
.prenota-campo [aria-invalid="true"], .prenota-consenso input[aria-invalid="true"] + span { border-color: var(--ambra); color: var(--oro-chiaro); }
.prenota-aiuto, .prenota-oltre { margin: -4px 0 0; font-family: var(--f-ui); font-size: 12px; line-height: 1.55; color: var(--tenuissimo); }
.prenota-oltre { color: var(--oro-chiaro); }
.prenota-consenso { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; font-family: var(--f-ui); font-size: 13px; line-height: 1.55; color: var(--tenue); }
.prenota-consenso input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--oro); cursor: pointer; }
.prenota-consenso a, .prenota-aiuto a { color: var(--oro-chiaro); }
/* il campo trappola: fuori dallo schermo per le persone e per i lettori di schermo, i programmi lo riempiono */
.prenota-trappola { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* 3. la ricevuta */
.prenota-codice {
  margin: 4px 0 0; text-align: center; font-family: var(--f-titolo); font-size: clamp(30px, 6vw, 42px); letter-spacing: .14em; color: var(--oro-chiaro);
  padding: 14px 10px; border-top: 1px solid var(--filo); border-bottom: 1px solid var(--filo); font-variant-numeric: tabular-nums; user-select: all;
}
.prenota-frase { margin: 0; font-family: var(--f-testo); font-size: 19px; line-height: 1.5; color: var(--testo); }
.prenota-scelta-fatta { margin: 0; font-family: var(--f-ui); font-size: 13px; color: var(--tenue); }

.prenota-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.prenota-azioni .bottone-oro, .prenota-azioni .bottone-filo { min-width: 140px; }
.prenota-azioni [disabled] { opacity: .6; }
.prenota-stato { margin: 0; font-family: var(--f-ui); font-size: 13.5px; line-height: 1.55; color: var(--oro-chiaro); }
.prenota-stato:empty { display: none; }
.prenota-stato.errore { color: var(--ambra); }

.prenota-x {
  position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filo); background: rgba(3, 6, 15, .4); font-size: 22px; line-height: 1; color: var(--oro-chiaro); cursor: pointer;
  transition: background .3s, color .3s;
}
.prenota-x:hover { background: var(--oro); color: var(--notte); }
.prenota :focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }
.prenota .prenota-titolo:focus, .prenota .prenota-titolo:focus-visible { outline: none; } /* il titolo prende il fuoco per chi usa un lettore di schermo: niente cornice */
.prenota .pista-giorno-titolo:focus, .prenota .pista-giorno-titolo:focus-visible { outline: none; } /* così il giorno scelto, sopra gli orari */
.prenota-campo :is(input, select, textarea):focus-visible { outline: none; } /* i campi hanno già il loro bagliore */

/* i bottoni della pagina compaiono solo se ci sono date aperte */
[data-azione="prenota"][hidden] { display: none; }

@media (max-width: 560px) {
  .prenota-scheda { padding: 28px 18px 20px; gap: 12px; }
  .prenota-modulo { grid-template-columns: 1fr; }
  .prenota-turno { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .prenota-azioni .bottone-oro, .prenota-azioni .bottone-filo { flex: 1; min-width: 0; padding: 0 16px; }
  /* il calendario della pista: sette colonne da almeno 44 px anche su un telefono da 360 */
  .prenota { padding-left: 10px; padding-right: 10px; }
  .prenota-scheda { padding-left: 14px; padding-right: 14px; }
  .pista-settimana, .pista-griglia { gap: 2px; }
  .pista-g { border-radius: 8px; font-size: 15px; }
}
@media (max-width: 380px) {
  .prenota { padding-left: 6px; padding-right: 6px; }
  .prenota-scheda { padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .prenota, .prenota-scheda { transition: none; }
  .prenota-scheda { transform: none; }
}

/* Il resoconto per il titolare (resoconto.js): le domande raccolte, le misure di questa visita, i marchi visti.
   Stesso vetro e stesso oro delle altre finestre. Si aggiunge dopo stile.css (costruisci.mjs). */

.resoconto {
  position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(70% 60% at 50% 45%, rgba(3, 6, 15, .55), rgba(2, 4, 10, .88));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s;
}
.resoconto[hidden] { display: none; }
.resoconto.aperto { opacity: 1; }

.resoconto-scheda {
  position: relative; width: min(680px, 100%); margin: auto; padding: 30px 32px 24px;
  display: grid; gap: 16px; text-align: left; outline: none;
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 70px rgba(231, 181, 98, .08), inset 0 1px 0 rgba(255, 236, 200, .06);
  transform: translateY(14px) scale(.985); transition: transform .6s var(--curva);
}
.resoconto.aperto .resoconto-scheda { transform: none; }
.resoconto-scheda::before, .resoconto-scheda::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 1px solid var(--oro); opacity: .8; }
.resoconto-scheda::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.resoconto-scheda::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.resoconto-scheda .occhiello { margin: 0; padding-right: 44px; }
.resoconto :focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }
.resoconto .resoconto-scheda:focus-visible { outline: none; } /* il fuoco va alla scheda quando si apre: niente cornice */

.resoconto-titolo {
  margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(24px, 3vw, 30px); line-height: 1.12; letter-spacing: .03em;
  color: var(--oro-chiaro); text-shadow: 0 2px 18px rgba(231, 181, 98, .22);
}
.resoconto-sotto { margin: -6px 0 0; font-family: var(--f-testo); font-size: 18px; line-height: 1.45; color: rgba(244, 236, 220, .85); }

.resoconto-blocco { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(231, 181, 98, .18); }
.resoconto-blocco h3 { margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: 15px; letter-spacing: .06em; color: var(--oro-chiaro); }
.resoconto-blocco h4 { margin: 6px 0 0; font-family: var(--f-ui); font-weight: 400; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }
.resoconto-blocco > div { display: grid; gap: 10px; }
.resoconto-riga, .resoconto-vuoto { margin: 0; font-family: var(--f-testo); font-size: 17px; line-height: 1.45; color: var(--testo); }
.resoconto-vuoto { color: var(--tenue); font-style: italic; }
.resoconto-piccolo { font-family: var(--f-ui); font-size: 12px; line-height: 1.55; color: var(--tenuissimo); }

.resoconto-tabella { width: 100%; border-collapse: collapse; font-family: var(--f-ui); font-size: 13px; }
.resoconto-tabella th, .resoconto-tabella td { padding: 7px 10px 7px 0; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(231, 181, 98, .12); }
.resoconto-tabella thead th { font-weight: 400; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--tenuissimo); }
.resoconto-tabella tbody th { font-weight: 400; color: var(--tenue); width: 42%; }
.resoconto-tabella td { color: var(--testo); }
.resoconto-tabella td:last-child { text-align: right; white-space: nowrap; color: var(--oro-chiaro); }
.resoconto-visita .resoconto-tabella td:last-child { text-align: left; white-space: normal; }

.resoconto-parole { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.resoconto-parole li { padding: 3px 10px; border: 1px solid var(--filo); border-radius: 20px; font-family: var(--f-ui); font-size: 12px; color: var(--testo); }
.resoconto-parole span { color: var(--oro-chiaro); }
.resoconto-recenti { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.resoconto-recenti li { display: grid; gap: 2px; }
.resoconto-chi { font-family: var(--f-ui); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenuissimo); }
.resoconto-recenti q { font-family: var(--f-testo); font-size: 17px; line-height: 1.4; color: var(--testo); overflow-wrap: anywhere; }

.resoconto-nota { margin: 0; padding-top: 12px; border-top: 1px solid rgba(231, 181, 98, .18); font-family: var(--f-ui); font-size: 12px; line-height: 1.6; color: var(--tenue); }
.resoconto-azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.resoconto-azioni .bottone-oro, .resoconto-azioni .bottone-filo { min-width: 132px; }

.resoconto-x {
  position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filo); background: rgba(3, 6, 15, .4); font-size: 22px; line-height: 1; color: var(--oro-chiaro); cursor: pointer;
  transition: background .3s, color .3s;
}
.resoconto-x:hover { background: var(--oro); color: var(--notte); }

/* il bottone discreto in fondo all'aiuto: solo per il titolare */
.aiuto-titolare { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(231, 181, 98, .16); }
.aiuto-titolare[hidden] { display: none; }
.aiuto-titolare .bottone-filo { height: 30px; padding: 0 16px; font-size: 10.5px; }
.aiuto-titolare span { font-family: var(--f-ui); font-size: 11px; letter-spacing: .1em; color: var(--tenuissimo); }

@media (max-width: 520px) {
  .resoconto-scheda { padding: 28px 18px 22px; gap: 14px; }
  .resoconto-sotto { font-size: 17px; }
  .resoconto-tabella tbody th { width: 46%; }
  .resoconto-azioni .bottone-oro, .resoconto-azioni .bottone-filo { flex: 1; min-width: 0; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .resoconto, .resoconto-scheda { transition: none; }
  .resoconto-scheda { transform: none; }
}

/* «Pianifica la tua visita» (visita.js): la finestra in tre passi, il calendario, il percorso, le prenotazioni.
   Si aggiunge dopo stile.css (costruisci.mjs legge i file di sorgente/stili/ in ordine). */

.visita {
  position: fixed; inset: 0; z-index: 44; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  /* la piazza resta dietro, velata, come per le notizie */
  background: radial-gradient(70% 60% at 50% 45%, rgba(3, 6, 15, .5), rgba(2, 4, 10, .85));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s;
}
.visita[hidden], .visita [hidden] { display: none !important; }
.visita.aperta { opacity: 1; }
/* il bottone nei capitoli compare solo se la finestra c'è */
[data-azione="pianifica"][hidden] { display: none; }

.visita-scheda {
  position: relative; width: min(620px, 100%); margin: auto; padding: 30px 32px 24px;
  display: grid; gap: 14px; text-align: left;
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 70px rgba(231, 181, 98, .08), inset 0 1px 0 rgba(255, 236, 200, .06);
  transform: translateY(14px) scale(.985); transition: transform .6s var(--curva);
}
.visita.aperta .visita-scheda { transform: none; }
.visita-scheda::before, .visita-scheda::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 1px solid var(--oro); opacity: .8; }
.visita-scheda::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.visita-scheda::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.visita-scheda .occhiello { margin: 0; padding-right: 44px; }
.visita :focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }

.visita-x {
  position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filo); background: rgba(3, 6, 15, .4); font-size: 22px; line-height: 1; color: var(--oro-chiaro); cursor: pointer;
  transition: background .3s, color .3s;
}
.visita-x:hover { background: var(--oro); color: var(--notte); }

/* i tre passi */
.visita-passi { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.visita-passi li { flex: 1; }
.visita-passi button {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 4px 9px; border: 0; border-bottom: 1px solid var(--filo); background: none;
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); cursor: pointer; text-align: left;
}
.visita-passi b { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--filo-forte); font-weight: 400; letter-spacing: 0; font-size: 11px; }
.visita-passi button[aria-current="step"] { color: var(--oro-chiaro); border-bottom: 2px solid var(--oro); padding-bottom: 8px; }
.visita-passi button[aria-current="step"] b { background: var(--oro); border-color: var(--oro); color: #1b1206; }
.visita-passi button:disabled { opacity: .45; cursor: default; }

.visita-titolo {
  margin: 4px 0 0; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(24px, 3vw, 30px); line-height: 1.12; letter-spacing: .03em;
  color: var(--oro-chiaro); text-shadow: 0 2px 18px rgba(231, 181, 98, .22);
}
.visita-titolo:focus { outline: none; }
.visita-sotto { margin: 0 0 4px; font-family: var(--f-testo); font-size: 18px; line-height: 1.45; color: rgba(244, 236, 220, .85); }
.visita-schermata { display: grid; gap: 12px; }

/* il calendario */
.visita-mese { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.visita-mese-nome { margin: 0; font-family: var(--f-titolo); font-size: 18px; letter-spacing: .08em; color: var(--testo); }
.visita-freccia {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--filo); background: rgba(3, 6, 15, .4);
  font-size: 22px; line-height: 1; color: var(--oro-chiaro); cursor: pointer; transition: background .3s, border-color .3s;
}
.visita-freccia:hover:not(:disabled) { background: rgba(231, 181, 98, .14); border-color: var(--oro); }
.visita-freccia:disabled { opacity: .3; cursor: default; }
.visita-settimana, .visita-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.visita-settimana span { text-align: center; font-family: var(--f-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenuissimo); }
.visita-giorno, .visita-fuori, .visita-vuoto { height: 44px; }
.visita-fuori { display: grid; place-items: center; font-family: var(--f-ui); font-size: 14px; color: rgba(244, 236, 220, .18); }
.visita-giorno {
  position: relative; padding: 0; border-radius: 10px; border: 1px solid rgba(231, 181, 98, .16); background: rgba(255, 255, 255, .035);
  font-family: var(--f-ui); font-size: 15px; color: var(--testo); cursor: pointer; transition: background .25s, border-color .25s, color .25s;
}
.visita-giorno:hover:not(:disabled) { border-color: var(--oro); background: rgba(231, 181, 98, .12); }
.visita-giorno:disabled { opacity: .3; cursor: default; }
/* la stellina dei giorni del calendario */
.visita-giorno.speciale::after { content: "✦"; position: absolute; right: 4px; top: 2px; font-size: 10px; color: var(--oro); }
/* la Winter Experience: più fredda */
.visita-giorno.inverno { border-color: rgba(188, 214, 255, .22); background: rgba(188, 214, 255, .05); color: #dbe7ff; }
.visita-giorno.scelto, .visita-giorno.scelto:hover {
  border-color: var(--oro-chiaro); color: #1b1206; font-weight: 600;
  background: linear-gradient(140deg, #c69246, var(--oro) 45%, var(--oro-chiaro));
  box-shadow: 0 6px 22px rgba(231, 181, 98, .35);
}
.visita-giorno.scelto::after { color: #1b1206; }
.visita-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .06em; color: var(--tenuissimo); }
.visita-l-speciale::before { content: "✦ "; color: var(--oro); }
.visita-l-inverno::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 3px; border: 1px solid rgba(188, 214, 255, .5); background: rgba(188, 214, 255, .12); }
.visita-info { margin: 0; min-height: 1.5em; font-family: var(--f-testo); font-size: 18px; line-height: 1.45; color: var(--testo); }
.visita-info b { font-weight: 600; color: var(--oro-chiaro); }
.visita-info span { display: block; font-size: 16.5px; }
.visita-info-speciale { color: var(--oro-chiaro); }
.visita-info-inverno { color: #dbe7ff; }

/* le scelte: radio vere, vestite da pillole */
.visita fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.visita-momento legend { margin-bottom: 10px; padding: 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
.visita-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.visita-chip { position: relative; cursor: pointer; }
.visita-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.visita-chip > span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 44px; border: 1px solid var(--filo-forte);
  background: rgba(5, 10, 26, .4); font-family: var(--f-ui); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--oro-chiaro);
  transition: background .3s, border-color .3s, color .3s;
}
.visita-chip:hover > span { border-color: var(--oro); background: rgba(231, 181, 98, .1); }
.visita-chip input:checked + span { border-color: var(--oro-chiaro); background: rgba(231, 181, 98, .2); color: var(--testo); box-shadow: inset 0 0 0 1px var(--oro); }
.visita-chip input:checked + span::before { content: "✦"; margin-right: 10px; color: var(--oro); letter-spacing: 0; }
.visita-chip input:focus-visible + span { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }
.visita-con { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.visita-chip-grande > span { display: grid; align-content: center; gap: 2px; width: 100%; min-height: 76px; padding: 12px 20px; border-radius: 14px; text-transform: none; letter-spacing: normal; }
.visita-chip-grande b { font-family: var(--f-titolo); font-weight: 500; font-size: 17px; letter-spacing: .04em; color: var(--oro-chiaro); }
.visita-chip-grande small { font-family: var(--f-testo); font-style: italic; font-size: 16px; color: var(--tenue); }
.visita-chip-grande input:checked + span::before { position: absolute; right: 14px; top: 10px; margin: 0; }

/* il percorso */
.visita-riassunto { margin: 0; font-family: var(--f-testo); font-size: 19px; line-height: 1.4; color: var(--testo); }
.visita-avvisi { display: grid; gap: 6px; margin: 0; padding: 12px 14px; list-style: none; border: 1px solid var(--filo); background: rgba(3, 6, 15, .35); }
.visita-avvisi li { position: relative; padding-left: 20px; font-family: var(--f-ui); font-size: 13px; line-height: 1.55; color: var(--tenue); }
.visita-avvisi li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--oro); }
.visita-avvisi .avviso-speciale, .visita-avvisi .avviso-affluenza { color: var(--oro-chiaro); }
.visita-avvisi .avviso-affluenza::before { content: "!"; font-weight: 600; color: var(--ambra); left: 4px; }
.visita-avvisi .avviso-inverno { color: #dbe7ff; }
.visita-avvisi .avviso-sole::before { content: "☼"; }

.visita-tappe { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: tappa; }
/* sul computer «Vedi nel 3D» sta accanto al titolo; sul telefono sotto il testo (più giù) */
.visita-tappa {
  position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 4px; padding: 0 0 20px 46px; counter-increment: tappa;
  grid-template-areas: "titolo vedi" "dati vedi" "testo testo" "piu piu" "prenota prenota";
}
.visita-tappa h3 { grid-area: titolo; }
.visita-tappa-dati { grid-area: dati; }
.visita-tappa-testo { grid-area: testo; }
.visita-tappa-piu { grid-area: piu; }
.visita-tappa-azioni { grid-area: vedi; align-self: center; }
.visita-tappa .visita-prenota { grid-area: prenota; }
/* il numero, e il filo d'oro che lega una tappa all'altra */
.visita-tappa::before {
  content: counter(tappa); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--oro); background: rgba(3, 6, 15, .6); font-family: var(--f-titolo); font-size: 14px; color: var(--oro-chiaro);
}
.visita-tappa::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 1px; background: linear-gradient(var(--filo-forte), var(--filo)); }
.visita-tappa:last-child { padding-bottom: 6px; }
.visita-tappa:last-child::after { display: none; }
.visita-tappa h3 { margin: 3px 0 0; font-family: var(--f-titolo); font-weight: 500; font-size: 17px; line-height: 1.25; letter-spacing: .03em; color: var(--oro-chiaro); }
.visita-tappa-dati { margin: 0; font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.visita-tappa-testo, .visita-tappa-piu { margin: 0; font-family: var(--f-testo); font-size: 17px; line-height: 1.45; color: rgba(244, 236, 220, .86); }
.visita-tappa-piu { font-style: italic; color: var(--oro-chiaro); }
.visita .visita-vedi, .visita-prenota .bottone-filo, .visita-prenota .bottone-oro, .visita-dettagli .bottone-filo { height: 36px; padding: 0 16px; font-size: 10px; letter-spacing: .22em; }

.visita-prenota { display: grid; gap: 6px; margin-top: 8px; padding: 10px 12px; border-left: 2px solid var(--oro); background: rgba(231, 181, 98, .06); }
.visita-prenota-nome { margin: 0; font-family: var(--f-ui); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.visita-prenota-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.visita-prenota-testo { margin: 0; font-family: var(--f-testo); font-size: 17px; color: var(--testo); }
/* la pista a giornata: la frase su biglietti e turni prende la riga intera, il bottone va sotto */
.visita-prenota-giornata { flex-basis: 100%; font-size: 16px; line-height: 1.45; color: rgba(244, 236, 220, .86); }
.visita-email { color: var(--oro-chiaro); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.visita-prenota-esito:empty { display: none; }
.visita-prenota-esito, .visita-esito { margin: 0; font-family: var(--f-ui); font-size: 12.5px; line-height: 1.5; color: var(--oro-chiaro); }

.visita-totale { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--filo); }
.visita-totale span { font-family: var(--f-ui); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--tenue); }
.visita-totale b { font-family: var(--f-titolo); font-weight: 500; font-size: 22px; letter-spacing: .04em; color: var(--oro-chiaro); }
.visita-nota { margin: -6px 0 0; font-family: var(--f-ui); font-size: 11px; letter-spacing: .06em; color: var(--tenuissimo); }
.visita-porta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.visita-esito:empty { display: none; }
.visita-dettagli { display: grid; gap: 8px; }
.visita-dettagli-testo {
  margin: 0; max-height: 220px; overflow: auto; padding: 12px 14px; border: 1px solid var(--filo); background: rgba(3, 6, 15, .5);
  font-family: var(--f-ui); font-size: 12px; line-height: 1.55; color: var(--testo); white-space: pre-wrap; user-select: text; -webkit-user-select: text;
}

/* le prenotazioni */
.visita-carte { display: grid; gap: 10px; }
.visita-carta { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--filo); background: rgba(3, 6, 15, .35); transition: border-color .4s, box-shadow .4s; }
.visita-carta.scelta { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro), 0 0 40px rgba(231, 181, 98, .12); }
.visita-carta h3 { margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: 18px; letter-spacing: .03em; color: var(--oro-chiaro); }
.visita-carta-dove { margin: 0; font-family: var(--f-ui); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.visita-carta-testo { margin: 0; font-family: var(--f-testo); font-size: 17px; line-height: 1.45; color: rgba(244, 236, 220, .86); }
.visita-carta-date { margin: 0; font-family: var(--f-ui); font-size: 12px; line-height: 1.6; color: var(--tenue); }
.visita-carta .visita-prenota { margin-top: 2px; }

/* «Invia il tuo percorso a NATIVITAS» (14/10/2026), in fondo al percorso: i campi sono quelli del modulo delle
   prenotazioni (stili/prenota.css: .prenota-campo, .prenota-consenso, .prenota-trappola); il modulo ha la sua classe,
   perché .prenota-modulo resti solo quello della finestra delle prenotazioni */
.visita-invia { display: grid; gap: 10px; margin-top: 6px; padding: 16px 16px 14px; border: 1px solid var(--filo-forte); background: rgba(3, 6, 15, .35); }
.visita-invia-modulo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.visita-invia-titolo { margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: 18px; letter-spacing: .03em; color: var(--oro-chiaro); }
.visita-invia-sotto, .visita-invia-fatto { margin: 0; font-family: var(--f-testo); font-size: 17px; line-height: 1.45; color: rgba(244, 236, 220, .86); }
.visita-invia-fatto { color: var(--testo); outline: none; }
/* la conferma prende il fuoco per chi usa un lettore di schermo: niente cornice */
.visita .visita-invia-fatto:focus, .visita .visita-invia-fatto:focus-visible { outline: none; }
.visita-invia-fatto::before { content: "✦"; margin-right: 10px; color: var(--oro); }
.visita-invia .prenota-campo input[type="time"] { color-scheme: dark; }
.visita-invia .prenota-azioni { margin-top: 0; }
.visita-invia-esito { margin: 0; font-family: var(--f-ui); font-size: 13px; line-height: 1.5; color: var(--oro-chiaro); }
.visita-invia-esito:empty { display: none; }
.visita-invia-esito.errore { color: var(--ambra); }
.visita-invia [aria-invalid="true"] { border-color: var(--ambra); }

.visita-stato { margin: 0; font-family: var(--f-ui); font-size: 13px; line-height: 1.5; color: var(--oro-chiaro); }
.visita-stato:empty { display: none; }
.visita-stato.errore { color: var(--ambra); }
.visita-piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--filo); }
.visita-piede .bottone-oro:only-child { margin-left: auto; }
.visita-piede .bottone-oro, .visita-piede .bottone-filo { min-width: 132px; }

/* gli schermi bassi (un portatile col browser non a tutto schermo): la finestra si stringe un po' */
@media (max-height: 760px) and (min-width: 521px) {
  .visita-scheda { padding: 22px 28px 18px; gap: 10px; }
  .visita-titolo { font-size: 24px; }
  .visita-sotto { font-size: 16.5px; }
  .visita-giorno, .visita-fuori, .visita-vuoto { height: 38px; }
  .visita-chip > span { min-height: 40px; }
  .visita-piede { padding-top: 10px; }
}

@media (max-width: 520px) {
  .visita { padding-left: 10px; padding-right: 10px; }
  /* sul telefono «Vedi nel 3D» va accanto alla durata: una riga in meno per tappa */
  .visita-tappa { grid-template-areas: "titolo titolo" "dati vedi" "testo testo" "piu piu" "prenota prenota"; column-gap: 10px; }
  .visita-tappa-dati { align-self: center; }
  .visita .visita-vedi { height: 32px; padding: 0 12px; letter-spacing: .16em; }
  .visita-scheda { padding: 24px 16px 18px; gap: 12px; }
  .visita-passi button { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 9px; letter-spacing: .14em; }
  .visita-griglia, .visita-settimana { gap: 3px; }
  .visita-giorno, .visita-fuori, .visita-vuoto { height: 42px; }
  .visita-giorno { border-radius: 8px; font-size: 14px; }
  .visita-chip > span { padding: 0 18px; }
  .visita-chip-grande > span { padding: 10px 14px; min-height: 70px; }
  .visita-chip-grande b { font-size: 15.5px; }
  .visita-tappa { padding-left: 40px; }
  .visita-tappa::before { width: 28px; height: 28px; }
  .visita-tappa::after { left: 14px; top: 32px; }
  .visita-piede .bottone-oro, .visita-piede .bottone-filo { flex: 1 1 auto; min-width: 0; padding: 0 16px; letter-spacing: .16em; white-space: nowrap; }
  .visita-porta .bottone-oro, .visita-porta .bottone-filo { flex: 1 1 100%; }
  .visita-invia { padding: 14px 12px 12px; }
  .visita-invia-modulo { grid-template-columns: 1fr; }
  .visita-invia .prenota-azioni .bottone-oro { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .visita, .visita-scheda, .visita-carta, .visita-giorno { transition: none; }
  .visita-scheda { transform: none; }
}

/* WhatsApp (whatsapp.js): i bottoni «Scrivici su WhatsApp» e «Segui NATIVITAS su WhatsApp» nella pagina, e la scheda del
   Canale col QR da inquadrare (sul computer). Niente verde e niente logo di WhatsApp: bottoni di NATIVITAS, in oro,
   con un fumetto sottile disegnato da noi. Spenti (senza numero né canale) restano nascosti. */

[data-whatsapp][hidden] { display: none; }
/* il fumetto davanti al testo dei bottoni */
[data-whatsapp]::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 9px; vertical-align: -2px;
  background: currentColor; opacity: .9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19.5l1.4-4.1A8 8 0 1 1 8.6 18.6z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19.5l1.4-4.1A8 8 0 1 1 8.6 18.6z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.whatsapp {
  position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top, 0px) + var(--striscia, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(70% 60% at 50% 45%, rgba(3, 6, 15, .45), rgba(2, 4, 10, .82));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s;
}
.whatsapp[hidden] { display: none; }
.whatsapp.aperta { opacity: 1; }

.whatsapp-scheda {
  position: relative; width: min(420px, 100%); margin: auto; padding: 34px 34px 28px;
  display: grid; gap: 14px; justify-items: start; text-align: left;
  background: var(--vetro); border: 1px solid var(--filo);
  backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 70px rgba(231, 181, 98, .08), inset 0 1px 0 rgba(255, 236, 200, .06);
  transform: translateY(14px) scale(.985); transition: transform .6s var(--curva);
  outline: none;
}
.whatsapp.aperta .whatsapp-scheda { transform: none; }
.whatsapp-scheda::before, .whatsapp-scheda::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 1px solid var(--oro-logo); opacity: .85; }
.whatsapp-scheda::before { left: 7px; top: 7px; border-right: 0; border-bottom: 0; }
.whatsapp-scheda::after { right: 7px; bottom: 7px; border-left: 0; border-top: 0; }
.whatsapp-occhiello { margin: 0; color: var(--oro-logo); }
.whatsapp-titolo {
  margin: 0; font-family: var(--f-titolo); font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.14; letter-spacing: .03em;
  color: var(--oro-chiaro); text-shadow: 0 2px 18px rgba(231, 181, 98, .22); text-wrap: balance;
}
.whatsapp-testo { margin: 0; font-family: var(--f-testo); font-size: 19px; line-height: 1.5; color: rgba(244, 236, 220, .88); }

/* il QR: avorio su vetro, dentro una cornice d'oro sottile */
.whatsapp-qr { justify-self: center; margin: 4px 0 0; display: grid; justify-items: center; gap: 10px; }
.whatsapp-qr[hidden] { display: none; }
.whatsapp-qr img { display: block; width: 168px; height: 168px; padding: 6px; background: #fbf6ea; border: 1px solid var(--oro-logo); box-shadow: 0 0 0 4px rgba(3, 6, 15, .6), 0 0 0 5px rgba(193, 172, 110, .35); }
.whatsapp-qr figcaption { font-family: var(--f-ui); font-size: 12.5px; line-height: 1.5; color: var(--tenue); text-align: center; max-width: 30ch; }

.whatsapp-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; width: 100%; }
.whatsapp-azioni .bottone-oro, .whatsapp-azioni .bottone-filo { min-width: 132px; text-align: center; }
.whatsapp-x {
  position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--filo); background: rgba(3, 6, 15, .4); font-size: 22px; line-height: 1; color: var(--oro-chiaro); cursor: pointer;
  transition: background .3s, color .3s;
}
.whatsapp-x::before { content: "×"; }
.whatsapp-x:hover { background: var(--oro); color: var(--notte); }
.whatsapp :focus-visible { outline: 1px solid var(--oro-chiaro); outline-offset: 3px; }
.whatsapp-scheda:focus-visible { outline: none; }

@media (max-width: 520px) {
  .whatsapp-scheda { padding: 28px 20px 22px; gap: 12px; }
  .whatsapp-azioni .bottone-oro, .whatsapp-azioni .bottone-filo { flex: 1; min-width: 0; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp, .whatsapp-scheda { transition: none; }
  .whatsapp-scheda { transform: none; }
}