/* =====================================================================
   UITUIT - STILE GENERALE «Carta calda»  (decisione di Nico, 25/10/2026)
   Le pagine e le sezioni da leggere sono su carta crema, testo inchiostro,
   il ROSSO del logo come accento (titoli speciali, link, bottoni), l'oro
   solo come dettaglio sottile. Una rivista vera, calda ed elegante.
   Il NERO resta solo dove ha senso: la Terra nello spazio (prima schermata
   della home), la scatola dei ricordi (un piccolo film), i video.
   Le zone scure hanno la classe .tema-scuro: lì i colori si invertono.
   Strati: contenuto 1 · pianeta 5-9 · testata 40 · finestre 60 · avvisi 70
   ===================================================================== */

:root {
  /* La notte (solo per le zone scure e per il pianeta: pianeta.css usa questi nomi) */
  --notte: #07080c; --notte-2: #0d1018; --notte-3: #151926;
  --vetro: rgba(13, 16, 24, .62); --vetro-forte: rgba(10, 12, 18, .82); --bordo: rgba(255, 255, 255, .09);
  --oro: #D9A441; --oro-chiaro: #F3D28B; --ambra: #E07A3F; --rosa: #E58FA8; --blu: #4F8EF7;
  --crema: #F3E9DC; --tenue: #B3A797;
  /* La carta */
  --rosso-marchio: #AA0000; --rosso: #AA0000; --rosso-scuro: #8C0000;
  --carta: #FFF8F2; --carta-2: #F6EADF; --carta-3: #EFE0D2; --foglio: #FFFDF9;
  --inchiostro: #1d1a17; --bronzo: #85550F; --piede: #1b1612;

  /* Colori «di ruolo»: sulla carta questi, nelle zone scure quelli di .tema-scuro */
  --c-titolo: #1d1a17;            /* titoli */
  --c-testo: #2a231e;             /* testo (contrasto 14,7 su crema) */
  --c-testo-2: #4d4037;           /* testo secondario (9,5) */
  --c-tenue: #6b5a4c;             /* date, note, etichette tenui (6,2 su crema, 5,1 sulla carta più scura) */
  --c-accento: #AA0000;           /* occhielli, etichette, numeri (7,4) */
  --c-em: #AA0000;                /* il corsivo dei titoli */
  --c-link: #AA0000;
  --c-linea: rgba(29, 26, 23, .12);
  --c-fuoco: #AA0000;
  --c-btn: linear-gradient(180deg, #BC1010 0%, #AA0000 55%, #970000 100%);
  --c-btn-testo: #FFF8F2;
  --c-btn-ombra: 0 14px 28px -16px rgba(120, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
  --c-btn-ombra-su: 0 20px 36px -16px rgba(120, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  --c-vuoto-testo: #1d1a17; --c-vuoto-bordo: rgba(29, 26, 23, .3); --c-vuoto-fondo: transparent; --c-vuoto-su: rgba(29, 26, 23, .05);
  --ombra-foto: 0 26px 50px -30px rgba(66, 40, 18, .55), 0 2px 6px -2px rgba(66, 40, 18, .12);

  --alto: 68px;
  --raggio: 20px;
  --colonna: 66ch;
  --entra: cubic-bezier(.22, 1, .36, 1);
  --muovi: cubic-bezier(.25, 1, .5, 1);
  --titoli: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --testo: Poppins, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
@media (max-width: 760px) { :root { --alto: 60px; } }

/* Zone scure: la Terra, la scatola dei ricordi, il piè di pagina, le aperture con foto scura */
.tema-scuro, .piede, .apertura.con-sfondo, .testo .capitolo {
  --c-titolo: #FFF6EA; --c-testo: #E6DBCD; --c-testo-2: #D6CABB; --c-tenue: #B3A797;
  --c-accento: var(--oro); --c-em: var(--oro-chiaro); --c-link: var(--oro-chiaro);
  --c-linea: rgba(255, 255, 255, .1); --c-fuoco: var(--oro-chiaro);
  --c-btn: linear-gradient(110deg, var(--oro-chiaro) 0%, var(--oro) 45%, #c98e2f 100%);
  --c-btn-testo: #17110a;
  --c-btn-ombra: 0 10px 30px -10px rgba(217, 164, 65, .65), inset 0 1px 0 rgba(255, 255, 255, .45);
  --c-btn-ombra-su: 0 16px 40px -12px rgba(217, 164, 65, .85), inset 0 1px 0 rgba(255, 255, 255, .5);
  --c-vuoto-testo: var(--oro-chiaro); --c-vuoto-bordo: rgba(243, 210, 139, .45); --c-vuoto-fondo: rgba(13, 16, 24, .35); --c-vuoto-su: rgba(217, 164, 65, .1);
  color: var(--c-testo); color-scheme: dark; font-weight: 300;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--carta); color: var(--c-testo);
  scroll-behavior: smooth; scroll-padding-top: calc(var(--alto) + 12px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  margin: 0; padding-top: var(--alto);
  font-family: var(--testo); font-weight: 400; font-size: 1.0625rem; line-height: 1.7;
  color: var(--c-testo); background: var(--carta);
  overflow-x: hidden; overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Grana leggera su tutto, come la carta di una rivista */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .15 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
main, footer { position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
/* Foto che non arriva (niente internet, file spostato): niente icona rotta né testo alternativo sparso, resta lo sfondo del riquadro */
img.rotta { visibility: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 {
  font-family: var(--titoli); font-weight: 600; color: var(--c-titolo);
  line-height: 1.08; margin: 0 0 .45em; letter-spacing: -.005em; text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--c-em); }
p { margin: 0 0 1em; text-wrap: pretty; }
::selection { background: rgba(170, 0, 0, .16); color: var(--inchiostro); }
.tema-scuro ::selection, .piede ::selection { background: rgba(217, 164, 65, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--c-fuoco); outline-offset: 3px; border-radius: 6px; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.salta {
  position: fixed; left: 12px; top: -80px; z-index: 80; padding: 12px 18px; border-radius: 12px;
  background: var(--inchiostro); color: var(--carta); font-weight: 500; text-decoration: none; transition: top .2s var(--entra);
}
.salta:focus { top: 12px; }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px; border-radius: 999px;
  font: 500 1rem/1.2 var(--testo); letter-spacing: .01em; text-decoration: none;
  border: 1px solid transparent; position: relative; isolation: isolate;
  transition: transform .2s var(--entra), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .3s ease;
}
/* «btn-oro» è il bottone principale: rosso del marchio sulla carta, oro nelle zone scure */
.btn-oro { color: var(--c-btn-testo); background: var(--c-btn); box-shadow: var(--c-btn-ombra); }
.btn-vuoto { color: var(--c-vuoto-testo); border-color: var(--c-vuoto-bordo); background: var(--c-vuoto-fondo); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn-oro:hover { box-shadow: var(--c-btn-ombra-su); }
  .btn-vuoto:hover { border-color: var(--c-vuoto-testo); background: var(--c-vuoto-su); }
}
.btn:active { transform: scale(.97); transition-duration: .1s; }

/* ---------- Testata: carta chiara; sopra la Terra e le zone scure diventa notte ---------- */
.testata {
  --t-link: #3b322b; --t-link-su: #1d1a17; --t-su-fondo: rgba(29, 26, 23, .05); --t-attuale: var(--rosso);
  --t-icona: #1d1a17; --t-icona-bordo: rgba(29, 26, 23, .18); --t-motto: #6b5a4c; --t-filo: rgba(170, 0, 0, .3);
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--alto); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 max(clamp(16px, 3.5vw, 48px), env(safe-area-inset-left));
  transition: height .35s var(--muovi);
}
/* La carta (o la notte) sta su uno strato a parte: se fosse sulla testata, il menu a tutto schermo resterebbe chiuso dentro di lei */
.testata::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 248, 242, .88);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(29, 26, 23, .08);
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.testata.compatta { height: calc(var(--alto) - 10px); }
.testata.compatta::before { background: rgba(255, 248, 242, .95); box-shadow: 0 12px 30px -26px rgba(66, 40, 18, .55); }
/* Sopra lo spazio (e la scatola dei ricordi): vetro scuro, scritte chiare, il logo sulla sua targa */
.testata.su-notte {
  --t-link: #E2D6C7; --t-link-su: #fff; --t-su-fondo: rgba(255, 255, 255, .07); --t-attuale: var(--oro-chiaro);
  --t-icona: var(--crema); --t-icona-bordo: rgba(255, 255, 255, .16); --t-motto: var(--tenue); --t-filo: rgba(243, 210, 139, .3);
}
.testata.su-notte::before { background: rgba(4, 5, 9, .5); border-bottom-color: rgba(255, 255, 255, .06); box-shadow: none; }
.testata.su-notte.compatta::before { background: rgba(4, 5, 9, .84); }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; min-height: 44px; flex: none; }
/* Sulla carta il logo rosso sta sul suo fondo naturale; sulla notte torna la piccola targa crema */
.targa {
  display: grid; place-items: center; padding: 7px 12px 6px; border-radius: 11px;
  background-color: rgba(255, 248, 242, 0); box-shadow: 0 0 0 1px rgba(243, 210, 139, 0);
  transition: transform .35s var(--muovi), background-color .45s ease, box-shadow .45s ease;
}
.su-notte .targa {
  background-color: var(--carta);
  box-shadow: 0 0 0 1px rgba(243, 210, 139, .55), 0 6px 18px -6px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(170, 0, 0, .08);
}
.targa img { width: 96px; height: auto; }
.compatta .targa { transform: scale(.9); }
.motto-logo {
  font: 400 .75rem/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--t-motto);
  border-left: 1px solid var(--t-filo); padding-left: 14px; max-width: 12em; line-height: 1.6;
  transition: color .45s ease;
}

.menu ul { display: flex; gap: 2px; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px;
  font-size: .875rem; font-weight: 400; color: var(--t-link); text-decoration: none; white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.menu a .n { display: none; }
@media (hover: hover) { .menu a:hover { color: var(--t-link-su); background: var(--t-su-fondo); } }
.menu a[aria-current="page"] { color: var(--t-attuale); font-weight: 500; position: relative; }
.menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.menu { display: flex; align-items: center; }
.menu-testa, .menu .menu-racconta, .menu-velo { display: none; }
.destra { display: flex; align-items: center; gap: 8px; flex: none; }
.icona {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--t-icona-bordo, rgba(29, 26, 23, .18)); color: var(--t-icona, var(--inchiostro));
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.icona svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (hover: hover) { .icona:hover { border-color: var(--rosso); color: var(--rosso); } .su-notte .destra .icona:hover { border-color: var(--oro); color: var(--oro-chiaro); } }
.racconta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: .875rem; font-weight: 500; color: var(--carta); text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #BC1010, #AA0000 60%, #970000);
  box-shadow: 0 10px 22px -14px rgba(120, 0, 0, .7);
}
.su-notte .racconta { color: #17110a; background: linear-gradient(110deg, var(--oro-chiaro), var(--oro)); box-shadow: 0 8px 22px -10px rgba(217, 164, 65, .8); }
#apriMenu { display: none; }
/* Barra di avanzamento della lettura: un filo rosso che diventa oro */
.avanzamento { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.avanzamento span {
  display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--rosso) 0%, #C8401A 45%, var(--oro) 100%);
}
html:not(.js) .avanzamento { display: none; }

@media (max-width: 1240px) { .racconta { display: none; } .motto-logo { display: none; } }

/* Menu a tutto schermo su telefono e tablet: un foglio di carta */
@media (max-width: 1080px) {
  #apriMenu { display: grid; }
  .js .menu {
    position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: stretch;
    padding: max(14px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
    background: radial-gradient(120% 60% at 100% 0%, rgba(217, 164, 65, .14), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(170, 0, 0, .05), transparent 70%), var(--carta);
    overflow-y: auto; overscroll-behavior: contain;
    clip-path: circle(0% at calc(100% - 44px) 30px); visibility: hidden;
    transition: clip-path .55s var(--muovi), visibility 0s linear .55s;
  }
  .js .menu.aperto { clip-path: circle(150% at calc(100% - 44px) 30px); visibility: visible; transition: clip-path .6s var(--muovi), visibility 0s; }
  .js .menu-testa { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 18px; }
  .menu-titolo { font: 400 .75rem var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #6b5a4c; }
  .js .menu .icona { color: var(--inchiostro); border-color: rgba(29, 26, 23, .18); }
  .js .menu ul { flex-direction: column; gap: 0; margin-bottom: 28px; }
  .js .menu li { border-bottom: 1px solid rgba(29, 26, 23, .1); }
  .js .menu a {
    display: flex; gap: 18px; align-items: baseline; width: 100%; min-height: 56px; padding: 10px 4px; border-radius: 0;
    font: 500 clamp(1.75rem, 7vw, 2.4rem)/1.15 var(--titoli); color: var(--inchiostro); white-space: normal;
    opacity: 0; transform: translateY(14px);
    transition: opacity .3s ease, transform .5s var(--entra), color .2s ease;
  }
  .js .menu.aperto a { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 35ms + 120ms); }
  .js .menu a .n { display: inline; font: 400 .75rem var(--mono); letter-spacing: .12em; color: var(--rosso); min-width: 2.2em; }
  .js .menu a[aria-current="page"]::after { display: none; }
  .js .menu a[aria-current="page"], .js .menu a[aria-current="page"] .n { color: var(--rosso); } /* la voce attuale in rosso */
  .js .menu a[aria-current="page"] { font-style: italic; }
  .js .menu .menu-racconta {
    display: inline-flex; width: auto; font: 500 1rem/1.2 var(--testo); padding: 12px 26px; border-radius: 999px; opacity: 1; transform: none; align-self: flex-start; min-height: 52px;
    color: var(--carta); background: linear-gradient(180deg, #BC1010, #AA0000 60%, #970000); box-shadow: 0 14px 28px -16px rgba(120, 0, 0, .6);
  }
  /* Senza JavaScript il menu resta una riga scorrevole sotto la testata */
  html:not(.js) .testata { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; }
  html:not(.js) body { padding-top: 116px; }
  html:not(.js) .menu { order: 3; width: 100%; overflow-x: auto; }
  html:not(.js) #apriMenu, html:not(.js) #apriCerca { display: none; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  .js .menu, .js .menu.aperto, .js .menu a { transition: opacity .2s ease, visibility 0s; clip-path: none; transform: none; }
  .js .menu { opacity: 0; }
  .js .menu.aperto { opacity: 1; }
}
body.menu-aperto { overflow: hidden; }

/* ---------- Contenitori e titoli di sezione ---------- */
/* overflow-x: clip: le lastre 3D che si inclinano vicino al bordo non devono mai allargare la pagina */
.sezione { position: relative; padding: clamp(64px, 11vw, 150px) 0; background: var(--carta); overflow-x: clip; }
.contenitore { width: min(1200px, 100% - 2 * clamp(20px, 5vw, 64px)); margin-inline: auto; position: relative; }
.colonna { max-width: none; }
.testa-sezione { max-width: 46rem; margin-bottom: clamp(36px, 5vw, 60px); }
.sezione h2 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); }
h2.maiuscolo { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem); letter-spacing: .06em; font-weight: 600; }
.occhiello {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font: 500 .75rem/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--c-accento);
}
.occhiello::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--c-testo-2); max-width: var(--colonna); }
.lead + .lead { margin-top: -.2em; }

/* ---------- 0 · Il mondo (prima schermata: lo spazio) ---------- */
.mondo {
  position: relative; overflow: hidden; z-index: 1;
  height: calc(100vh - var(--alto)); height: calc(100svh - var(--alto)); min-height: 560px;
  background: #030407;
}
.titolo-mondo {
  position: absolute; z-index: 6; left: clamp(20px, 3.5vw, 56px); top: clamp(24px, 6vh, 64px);
  max-width: 460px; pointer-events: none;
  padding: 22px 26px 26px 0;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6);
  transition: opacity .6s ease, transform .6s var(--entra);
}
/* Alone scuro morbido dietro il titolo: leggibile anche sopra le luci delle città */
.titolo-mondo::before {
  content: ""; position: absolute; inset: -40px -60px -40px -80px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 8, 12, .72), rgba(7, 8, 12, .35) 60%, transparent);
}
.titolo-mondo h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.1rem); line-height: 1.02; margin-bottom: .35em; }
.titolo-mondo h1 em { display: block; color: var(--oro-chiaro); }
.titolo-mondo p { margin: 0 0 4px; font-size: 1.0625rem; color: #EADFD1; }
.titolo-mondo .btn { pointer-events: auto; margin-top: 22px; }
.titolo-mondo.ridotto { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.titolo-mondo.ridotto .btn { pointer-events: none; }
.js .titolo-mondo > * { animation: sale 1s var(--entra) both; }
.js .titolo-mondo > :nth-child(2) { animation-delay: .12s; }
.js .titolo-mondo > :nth-child(3) { animation-delay: .2s; }
.js .titolo-mondo > :nth-child(4) { animation-delay: .32s; }
@keyframes sale { from { opacity: 0; transform: translateY(18px); } }
/* Senza JavaScript il pianeta non c'è: la prima schermata si accorcia e il titolo torna nel flusso */
html:not(.js) .mondo { height: auto; min-height: 0; padding: clamp(40px, 8vw, 90px) 0 40px; }
/* Senza programmi attivi (anteprime, alcune app): la foto del pianeta al posto del 3D */
html:not(.js) .mondo::after {
  content: ""; display: block; width: min(86vw, 460px); aspect-ratio: 1; margin: 28px auto 0;
  background: url(../img/pianeta.webp) center / contain no-repeat;
  filter: drop-shadow(0 0 40px rgba(79, 142, 247, .25));
}
html:not(.js) .titolo-mondo { position: relative; left: auto; right: auto; top: auto; padding: 0; margin: 0 clamp(20px, 5vw, 64px); }
html:not(.js) .titolo-mondo::before { display: none; }
html:not(.js) .senza-js { position: static; transform: none; margin: 32px clamp(20px, 5vw, 64px) 0; }
.senza-js {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); width: min(460px, calc(100% - 32px));
  margin: 0; padding: 16px 20px; border-radius: 16px; text-align: center;
  background: var(--vetro); border: 1px solid var(--bordo); color: var(--crema);
}
@media (max-width: 760px) {
  .mondo { min-height: 520px; }
  .titolo-mondo { left: 16px; right: 16px; top: 18px; max-width: none; padding: 0; }
  .titolo-mondo::before { inset: -18px -16px -30px; background: linear-gradient(180deg, rgba(7, 8, 12, .78), rgba(7, 8, 12, .4) 70%, transparent); }
  .titolo-mondo h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .titolo-mondo h1 em { display: inline; }
  .titolo-mondo p { font-size: 1rem; line-height: 1.45; }
  .titolo-mondo .btn { margin-top: 14px; min-height: 44px; padding: 10px 20px; }
}

/* ---------- L'atterraggio: dallo spazio alla carta ----------
   Sotto la Terra lo spazio continua per un attimo, poi sale l'orizzonte curvo del
   pianeta (è la carta della pagina), con il filo azzurro e caldo dell'atmosfera.
   Scendendo l'orizzonte si appiattisce piano: come atterrare (interfaccia.js). */
.atterraggio {
  /* il bagliore dell'atmosfera può salire un poco sopra la banda (sul fondo dello spazio): niente riga netta */
  position: relative; z-index: 1; height: clamp(110px, 12vw, 190px); pointer-events: none;
  overflow: hidden; overflow-x: clip; overflow-y: visible; clip-path: inset(-140px 0 0 0);
  background:
    radial-gradient(1px 1px at 12% 30%, rgba(243, 233, 220, .7), transparent 60%),
    radial-gradient(1px 1px at 27% 62%, rgba(243, 233, 220, .45), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 22%, rgba(243, 210, 139, .6), transparent 60%),
    radial-gradient(1px 1px at 63% 48%, rgba(243, 233, 220, .5), transparent 60%),
    radial-gradient(1px 1px at 78% 18%, rgba(243, 233, 220, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 40%, rgba(143, 184, 255, .6), transparent 60%),
    linear-gradient(180deg, #030407 0%, #05070d 100%);
}
html:not(.js) .atterraggio { display: none; }
.orizzonte {
  /* metà superiore di un'ellisse molto larga: la curva del pianeta vista da vicino */
  position: absolute; left: 50%; top: 30%; width: 180vw; height: 64vw;
  border-radius: 50% 50% 0 0 / 74% 74% 0 0;
  transform: translateX(-50%); transform-origin: 50% 0; will-change: transform;
  background: var(--carta);
  box-shadow:
    0 0 0 1px rgba(255, 240, 214, .9),
    0 -3px 10px rgba(160, 200, 255, .55),
    0 -14px 34px rgba(110, 160, 255, .3),
    0 -40px 90px rgba(224, 122, 63, .2);
}
@media (max-width: 760px) { .atterraggio { height: 92px; } .orizzonte { top: 34%; width: 200vw; height: 90vw; } }
/* Nella home lo spazio comincia già sotto la testata (che lì è trasparente e scura) */
body.casa { background: linear-gradient(180deg, #030407 0, #030407 var(--alto), var(--carta) var(--alto)) no-repeat, var(--carta); }

/* ---------- 1 · Come funziona ---------- */
.sezione.come { padding-top: clamp(30px, 5vw, 70px); }
.passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(18px, 3vw, 48px); counter-reset: passo; }
.passo { position: relative; padding: 30px 0 6px; border-top: 1px solid rgba(29, 26, 23, .16); }
.passo::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 2px; background: var(--rosso); }
.passo-icona { display: block; width: 52px; height: 52px; margin-bottom: 20px; color: var(--inchiostro); }
.passo-icona svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.passo-icona .pieno { fill: var(--rosso); stroke: none; }
.passo-icona .freccia { stroke: var(--rosso); }
.passo-n {
  position: absolute; right: 0; top: 12px; font: 600 5.5rem/1 var(--titoli); font-style: italic;
  color: transparent; -webkit-text-stroke: 1px rgba(170, 0, 0, .3); pointer-events: none;
}
.passo h3 { font-size: 1.85rem; margin-bottom: .3em; }
.passo p { margin: 0; color: var(--c-testo-2); font-size: 1rem; }
.scorri {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; min-height: 44px;
  font: 500 .8125rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--c-accento); text-decoration: none;
}
.scorri svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.js .scorri svg { animation: ondeggia 2.4s var(--muovi) infinite; }
@keyframes ondeggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-width: 860px) {
  .passi { grid-template-columns: 1fr; }
  .passo { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; padding: 22px 0 22px; }
  .passo-icona { margin: 4px 0 0; grid-row: span 2; }
  /* Il numero grande in filigrana non deve finire sotto il testo */
  .passo-n { font-size: 3.6rem; top: 14px; }
  .passo h3 { padding-right: 2.2rem; font-size: 1.6rem; }
}

/* ---------- 2 · Entra: gli ultimi articoli, come in una rivista ---------- */
.sezione.entra { background: var(--carta-2); }
.articoli { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px) clamp(16px, 2vw, 28px); }
.articoli.cambio { opacity: 0; transition: opacity .3s ease; }
.articoli.arrivati { opacity: 1; transition: opacity .6s ease; }
.articolo { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-radius: 16px; }
.articolo .foto {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; min-width: 0; border-radius: 14px;
  background: linear-gradient(135deg, #E9DACB, #D9C3AE); box-shadow: var(--ombra-foto);
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* angoli tondi anche durante lo zoom (Safari) */
}
.articolo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--entra); }
@media (hover: hover) and (pointer: fine) {
  .articolo:hover img { transform: scale(1.05); }
  .articolo:hover .titolo-articolo { color: var(--rosso); }
}
.testo-articolo { display: flex; flex-direction: column; gap: 8px; padding: 16px 2px 4px; flex: 1; }
.cat { font: 500 .75rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accento); }
.titolo-articolo { font: 600 1.5rem/1.12 var(--titoli); color: var(--c-titolo); text-wrap: balance; transition: color .25s ease; }
.articolo time { margin-top: auto; padding-top: 4px; font-size: .875rem; color: var(--c-tenue); }
@media (max-width: 1080px) { .articoli { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .articoli { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .articoli > li + li { border-top: 1px solid rgba(29, 26, 23, .1); }
  .articoli > li { padding: 14px 0; }
  .articolo { flex-direction: row; gap: 14px; align-items: flex-start; }
  .articolo .foto { flex: 0 0 38%; aspect-ratio: 4 / 3; min-height: 0; border-radius: 12px; }
  .testo-articolo { padding: 0; gap: 6px; }
  .titolo-articolo { font-size: 1.25rem; }
  .articolo time { font-size: .8125rem; }
}

/* ---------- 3 · Vit Vit: il racconto e il pannello animato della Costiera ---------- */
.sezione.vitvit { padding-block: clamp(80px, 12vw, 170px); }
.vitvit-griglia {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "testa pannello" "racconto pannello"; column-gap: clamp(36px, 6vw, 96px); align-items: start;
}
.vitvit-testa { grid-area: testa; }
.vitvit-pannello { grid-area: pannello; align-self: stretch; margin: 0; }
/* Il pannello resta accanto al racconto mentre lo leggi */
.vitvit-pannello .pannello-scena { position: sticky; top: calc(var(--alto) + 7vh); }
.vitvit .racconto { grid-area: racconto; }
.vitvit h2 { max-width: 17ch; }
.racconto { max-width: var(--colonna); font-size: 1.0625rem; color: var(--c-testo); }
.racconto p { margin-bottom: 1.05em; }
.battuta {
  font: italic 500 clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem)/1.3 var(--titoli); color: var(--c-titolo);
  border-left: 2px solid var(--rosso); padding: 4px 0 4px 22px; margin: 1.4em 0 !important;
}
.battuta em { font-style: italic; }
.battuta.corta { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); color: var(--rosso); }
/* Solo nella home (racconto «Vit Vit»): classi generiche, non devono toccare le altre pagine.
   La parola UITUIT nasce qui: nel rosso del marchio. */
#vitvit .grande {
  margin: .2em 0 .3em !important; font: 700 clamp(3.6rem, 1.4rem + 8.4vw, 7.4rem)/1 var(--titoli);
  letter-spacing: .06em; color: var(--rosso); perspective: 800px;
}
#vitvit .grande .lettera { display: inline-block; }
.tre-verbi { font: 600 clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem)/1.25 var(--titoli); color: var(--c-titolo); margin: 1.3em 0 !important; }
.tre-verbi strong { font-weight: 600; }
@media (max-width: 960px) {
  .vitvit-griglia { grid-template-columns: minmax(0, 1fr); grid-template-areas: "testa" "pannello" "racconto"; }
  #vitvit .vitvit-pannello { margin: 4px 10px clamp(44px, 9vw, 60px) 0; } /* a destra lo spazio per la cornice d'oro */
  .vitvit-pannello .pannello-scena { position: relative; top: 0; }
  /* sul telefono il pannello non deve diventare più alto che largo: si ritaglia (la foto resta piena) */
  .vitvit-pannello .pannello-schermo { aspect-ratio: auto; height: min(64svh, 92vw, (100vw - 40px) / var(--rapporto)); }
  .pannello-cornice { transform: translate3d(10px, 10px, -40px); }
}

/* ---------- 4 · UIT: la definizione ---------- */
.sezione.uit { background: var(--carta-2); }
.uit .testa-sezione { max-width: 52rem; }
.esclama { font-family: var(--titoli); font-size: 1.4em; color: var(--rosso); font-weight: 500; }
.definizione {
  max-width: 860px; padding: clamp(28px, 4.5vw, 56px); position: relative; overflow: hidden;
  background: var(--foglio); border-radius: 6px; border: 1px solid rgba(29, 26, 23, .08);
  box-shadow: 0 40px 70px -50px rgba(66, 40, 18, .5), 0 2px 4px rgba(66, 40, 18, .04);
}
.definizione::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--rosso); }
.voce-dizionario { display: flex; flex-wrap: wrap; align-items: baseline; gap: 22px 22px; margin-bottom: 18px !important; }
.parola-def { position: relative; font: 700 clamp(4rem, 3rem + 4vw, 6.5rem)/.9 var(--titoli); color: var(--inchiostro); letter-spacing: .02em; }
.parola-def::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--oro), rgba(217, 164, 65, 0));
}
.gramm { font: italic 400 1rem var(--mono); color: var(--c-tenue); letter-spacing: .04em; }
.def { font: italic 500 clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem)/1.25 var(--titoli); color: var(--rosso); max-width: 30ch; }
.definizione p:not(.def):not(.voce-dizionario) { max-width: var(--colonna); color: var(--c-testo-2); }
.definizione p:last-child { margin-bottom: 0; }
#uit .tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px); margin-top: clamp(40px, 5vw, 64px); }
.voce { height: 100%; padding: 0; position: relative; border-radius: 12px; }
.medaglia {
  display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 20px; border-radius: 50%;
  background: var(--foglio);
  box-shadow: 0 0 0 1px rgba(217, 164, 65, .55), 0 0 0 7px rgba(217, 164, 65, .1), 0 16px 30px -18px rgba(66, 40, 18, .55);
}
.medaglia img { width: 56px; height: 56px; object-fit: contain; }
.voce h3 { font-size: 1.85rem; }
.voce p { margin: 0; color: var(--c-testo-2); font-size: 1rem; }
@media (max-width: 860px) { #uit .tre { grid-template-columns: 1fr; } }

/* ---------- 5 · Pilastri ---------- */
.pilastri { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.pilastro { height: 100%; position: relative; border-radius: 16px; }
.pilastro .foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; box-shadow: var(--ombra-foto); background: var(--carta-3); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.pilastro img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.03); transition: transform .9s var(--entra), filter .6s ease; }
@media (hover: hover) and (pointer: fine) { .pilastro:hover img { transform: scale(1.05); filter: saturate(1); } }
.pilastro > div { padding: 22px 2px 6px; }
.romano { display: block; font: 500 .75rem var(--mono); letter-spacing: .3em; color: var(--c-accento); margin-bottom: 8px; }
.pilastro h3 { font-size: 2.1rem; }
.pilastro p { margin: 0; color: var(--c-testo-2); font-size: 1rem; }
@media (max-width: 860px) {
  .pilastri { grid-template-columns: 1fr; gap: 30px; }
  .pilastro .foto { aspect-ratio: 16 / 9; }
  .pilastro > div { padding: 16px 2px 0; }
  .pilastro h3 { font-size: 1.75rem; }
}

/* ---------- 6 · Invito: la scatola dei ricordi, un piccolo film nella sala buia ---------- */
.sezione.invito {
  background:
    radial-gradient(60% 70% at 30% 50%, rgba(217, 164, 65, .11), transparent 70%),
    radial-gradient(50% 60% at 85% 100%, rgba(170, 0, 0, .08), transparent 70%),
    linear-gradient(180deg, #08070a 0%, #0c0a0b 100%);
  padding-block: clamp(70px, 9vw, 130px);
}
.invito-griglia { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.invito-scheda { max-width: 520px; position: relative; }
.invito-scheda h2 { margin-bottom: .55em; font-size: clamp(2.3rem, 1.5rem + 3vw, 3.8rem); }
.forse { font: italic 500 clamp(1.3rem, 1.05rem + .9vw, 1.7rem)/1.35 var(--titoli); color: #FFF3E0; margin: 0 0 .25em; }
.invito-testo { max-width: 46ch; margin: 1.5em 0 0; color: var(--c-testo-2); }
.bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.film { margin: 0; position: relative; }
.film-schermo {
  position: relative; aspect-ratio: 1280 / 714; overflow: hidden; border-radius: 18px; background: #000; /* le misure vere del film */
  box-shadow: 0 0 0 1px rgba(243, 210, 139, .22), 0 60px 110px -50px rgba(0, 0, 0, .95), 0 0 120px -30px rgba(217, 164, 65, .3);
}
.film-locandina, .film-video, .film-fine { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.film-video { opacity: 0; transition: opacity .6s ease; }
.film.in-moto .film-video { opacity: 1; }
.film-fine { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.film.finito .film-fine { opacity: 1; }
.film-fine:not([src]) { display: none; }
/* luce da sala: angoli più scuri, un velo in basso per i bottoni */
.film-schermo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 8, 12, 0) 62%, rgba(7, 8, 12, .55) 100%), radial-gradient(130% 110% at 50% 45%, transparent 62%, rgba(7, 8, 12, .45));
}
.film-comandi { position: absolute; z-index: 3; left: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px); right: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.film-bottone {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
  border: 1px solid rgba(243, 210, 139, .55); background: rgba(10, 9, 8, .58); color: #FFF6EA;
  font: 500 .9375rem/1 var(--testo); letter-spacing: .01em;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .9), 0 0 30px -12px rgba(217, 164, 65, .5);
  transition: background-color .2s ease, border-color .2s ease, transform .16s var(--entra);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.film-bottone[hidden] { display: none; }
.film-bottone svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--oro-chiaro); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.film-bottone .pieno { fill: var(--oro-chiaro); stroke: none; }
.film-ascolta .muto { display: none; }
.film-ascolta.acceso .muto { display: inline; }
.film-ascolta.acceso .onde { display: none; }
.film-ascolta:not(.acceso) { background: linear-gradient(110deg, rgba(243, 210, 139, .95), rgba(217, 164, 65, .95)); color: #17110a; border-color: transparent; }
.film-ascolta:not(.acceso) svg { stroke: #17110a; }
.film-ascolta:not(.acceso) .pieno { fill: #17110a; }
.film-bottone:active { transform: scale(.96); }
.film-bottone:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .film-bottone:hover { border-color: var(--oro-chiaro); background-color: rgba(10, 9, 8, .75); }
  .film-ascolta:not(.acceso):hover { filter: brightness(1.06); }
}
html:not(.js) .film-comandi, .film.senza-video .film-comandi { display: none; }
.film-nota {
  margin: 12px 2px 0; text-align: right;
  font: 400 .75rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #A89C8E;
}
@media (max-width: 860px) {
  .sezione.invito { padding-block: 0 clamp(56px, 12vw, 80px); }
  .invito-griglia { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* Sul telefono lo schermo del film va da bordo a bordo, come al cinema */
  .film { margin-inline: calc(50% - 50vw); }
  .film-schermo { border-radius: 0; box-shadow: 0 1px 0 rgba(243, 210, 139, .2), 0 40px 80px -40px rgba(0, 0, 0, .95); }
  .film-nota { margin-right: 16px; }
  .film-bottone { min-height: 44px; padding: 0 16px 0 12px; font-size: .9375rem; }
  .invito-scheda h2 { font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem); }
}

/* ---------- 7 · Persona ---------- */
.persona { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.persona-foto { margin: 0; position: relative; }
.persona-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; filter: sepia(.08) saturate(.95); box-shadow: var(--ombra-foto); }
.persona-foto::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border-radius: 16px;
  border: 1px solid rgba(217, 164, 65, .6);
}
.persona-testo h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); margin-bottom: .7em; }
@media (max-width: 760px) { .persona { grid-template-columns: 1fr; } .persona-foto::after { inset: 10px -8px -10px 10px; } }

/* ---------- 8 · Numeri ---------- */
.sezione.numeri { background: var(--carta-2); }
.cifre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.cifre li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; position: relative; }
.cifre li + li::before {
  content: ""; position: absolute; left: -10px; top: 15%; bottom: 15%; width: 1px;
  background: linear-gradient(transparent, rgba(29, 26, 23, .2), transparent);
}
.cifra {
  font: 600 clamp(3.2rem, 2rem + 4.8vw, 6.2rem)/1 var(--titoli); font-variant-numeric: lining-nums tabular-nums;
  color: var(--inchiostro); white-space: nowrap;
}
.cifra .parole { font-size: .36em; letter-spacing: .14em; vertical-align: .7em; margin-right: .15em; color: var(--rosso); font-family: var(--mono); font-weight: 500; }
.cifra .numero { display: inline-block; text-align: center; }
.cosa { font: 500 .8125rem/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--c-tenue); }
.frase { text-align: center; font: italic 500 clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem)/1.3 var(--titoli); color: var(--c-titolo); margin: clamp(40px, 6vw, 70px) auto 0; max-width: 28ch; }
@media (max-width: 760px) {
  .cifre { grid-template-columns: 1fr; gap: 8px; }
  .cifre li + li::before { left: 25%; right: 25%; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(29, 26, 23, .2), transparent); }
  .cifre li { padding: 20px 0; }
}

/* ---------- 9 · Special UIT ---------- */
.special-sez .testa-sezione { max-width: 50rem; }
.special-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 24px); }
.special {
  position: relative; display: flex; align-items: flex-end; min-height: clamp(320px, 34vw, 440px); height: 100%;
  border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff;
  background: #2a211b; isolation: isolate; box-shadow: var(--ombra-foto);
}
.special img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--entra); }
.special::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 14, 10, 0) 30%, rgba(20, 14, 10, .55) 60%, rgba(20, 14, 10, .94) 100%); }
@media (hover: hover) and (pointer: fine) { .special:hover img { transform: scale(1.05); } }
.special-testo { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 3vw, 32px); }
.tipo { font: 400 .75rem/1.5 var(--mono); letter-spacing: .14em; color: var(--oro-chiaro); }
.titolo-special { font: 600 clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem)/1.08 var(--titoli); color: #fff; }
@media (max-width: 760px) { .special-griglia { grid-template-columns: 1fr; } .special { min-height: 300px; } }

/* ---------- 10 · Piè di pagina: inchiostro caldo, come il retro di una rivista ---------- */
.piede {
  padding: clamp(80px, 10vw, 120px) 0 max(36px, env(safe-area-inset-bottom));
  background: radial-gradient(70% 50% at 50% 0%, rgba(217, 164, 65, .08), transparent 70%), var(--piede);
  color: #CDBFAE; font-size: .9375rem;
  border-top: 1px solid rgba(217, 164, 65, .25);
}
.motto { font: italic 500 clamp(1.8rem, 1.3rem + 2vw, 2.8rem)/1.2 var(--titoli); color: #FFF6EA; text-align: center; margin-bottom: 24px; }
.social { display: flex; gap: 12px; justify-content: center; margin-bottom: 44px; }
.social a {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--crema);
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .03);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.social .pieno { fill: currentColor; stroke: none; }
@media (hover: hover) { .social a:hover { color: #17110a; background: var(--oro); border-color: var(--oro); } }
.legali {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 0 auto 36px; max-width: 980px;
  padding: 22px 0; border-block: 1px solid rgba(255, 255, 255, .08);
}
.legali a {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 0 10px;
  color: #D3C7B8; text-decoration: none; font-size: .875rem; border-radius: 8px;
}
@media (hover: hover) { .legali a:hover { color: var(--oro-chiaro); } }
.avvisi { max-width: 900px; margin: 0 auto; font-size: .875rem; line-height: 1.65; color: #ADA193; }
.avvisi p { margin: 0 0 10px; }
.contatti { text-align: center; margin: 28px 0 0; color: #D3C7B8; line-height: 1.9; }
.contatti a { color: var(--oro-chiaro); text-decoration: none; display: inline-block; padding: 6px 2px; }
.crediti { text-align: center; margin: 18px auto 0; max-width: 900px; font: 400 .75rem/1.8 var(--mono); letter-spacing: .02em; color: #A3978A; }
.crediti a { color: #CDBFAE; text-underline-offset: 3px; }

/* =====================================================================
   IL PANNELLO ANIMATO (js/pannello.js): un video su una lastra in 3D
   ===================================================================== */
.pannello { --rapporto: 1.6; margin: 0; position: relative; }
.pannello.senza-file { display: none; }
.pannello-scena { position: relative; }
.pannello-lastra { position: relative; transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; }
.pannello-schermo {
  position: relative; aspect-ratio: var(--rapporto); overflow: hidden; border-radius: 22px;
  background: linear-gradient(135deg, #3a2c22, #1b1612);
  box-shadow: 0 60px 100px -50px rgba(52, 30, 12, .7), 0 24px 44px -30px rgba(52, 30, 12, .5), 0 0 0 1px rgba(29, 26, 23, .08);
  transform: translateZ(0);
}
.pannello-locandina, .pannello-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.pannello-video { opacity: 0; transition: opacity .9s ease; }
.pannello.in-moto .pannello-video { opacity: 1; }
/* La curvatura: i bordi più scuri e una luce morbida al centro, come uno schermo appena curvo */
.pannello-curva {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, rgba(14, 8, 4, .36) 0%, rgba(14, 8, 4, 0) 17%, rgba(255, 250, 240, .06) 50%, rgba(14, 8, 4, 0) 83%, rgba(14, 8, 4, .36) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0) 74%, rgba(14, 8, 4, .26) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  border-radius: inherit;
}
/* Il riflesso: una banda di luce che si sposta con l'inclinazione, e ogni tanto passa da sola */
.pannello-luce { position: absolute; inset: -40% -70%; z-index: 2; pointer-events: none; background: linear-gradient(105deg, rgba(255, 252, 245, 0) 40%, rgba(255, 252, 245, .13) 47%, rgba(255, 252, 245, .22) 50%, rgba(255, 252, 245, .13) 53%, rgba(255, 252, 245, 0) 60%); }
.pannello-luce::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 55%);
  transform: translateX(-70%); animation: passaLuce 9s var(--muovi) 2.5s infinite;
}
@keyframes passaLuce { 0% { transform: translateX(-70%); } 22%, 100% { transform: translateX(70%); } }
/* Una seconda pagina dietro, con un filo d'oro: dà profondità quando la lastra si inclina */
.pannello-cornice {
  position: absolute; inset: 0; border-radius: 24px; pointer-events: none;
  border: 1px solid rgba(217, 164, 65, .7); transform: translate3d(18px, 18px, -50px);
}
/* L'ombra profonda sotto la lastra (si sposta al contrario dell'inclinazione) */
.pannello-ombra {
  position: absolute; left: 8%; right: 8%; bottom: -9%; height: 30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(52, 30, 12, .42), rgba(52, 30, 12, 0)); filter: blur(16px);
}
.pannello-pausa {
  position: absolute; z-index: 3; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; color: #FFF8F2; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(20, 14, 10, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: .78; transition: opacity .2s ease, background-color .2s ease;
}
.pannello-pausa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pannello-pausa .i-play { display: none; fill: currentColor; stroke: none; }
.pannello-pausa.fermo .i-play { display: inline; }
.pannello-pausa.fermo .i-pausa { display: none; }
.pannello-pausa:focus-visible { outline: 2px solid #FFF8F2; outline-offset: 2px; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .pannello-pausa { opacity: 0; } .pannello:hover .pannello-pausa, .pannello-pausa.fermo { opacity: .9; } }
/* Senza JavaScript o con meno movimento: la locandina, appena inclinata */
html:not(.js) .pannello-lastra { transform: perspective(1400px) rotateX(-2deg) rotateY(-5deg); }

/* =====================================================================
   MOVIMENTO (attivo solo se interfaccia.js aggiunge la classe .anima)
   ===================================================================== */
/* Comparsa con profondità: arriva da dietro e da sotto, leggermente inclinata */
.anima [data-compari] {
  opacity: 0;
  transform: perspective(1100px) translate3d(0, 46px, -90px) rotateX(12deg);
  transform-origin: 50% 100%;
  transition: opacity .9s var(--entra), transform 1.15s var(--entra), clip-path 1.1s var(--entra);
  transition-delay: var(--ritardo, 0ms);
}
/* Titoli: si svelano dal basso come una tenda (mai chiusi del tutto, altrimenti il browser non li "vede" arrivare) */
.anima h2[data-compari], .anima .testa-sezione[data-compari] { clip-path: inset(0 0 55% 0); transform: translate3d(0, 30px, 0); }
.anima [data-compari].visto { opacity: 1; transform: none; clip-path: inset(-10% -10% -10% -10%); }
.anima #vitvit .grande[data-compari] { opacity: 1; transform: none; }

/* La parola UITUIT lettera per lettera */
.anima #vitvit .grande .lettera {
  opacity: 0; transform: translate3d(0, .5em, 0) rotateX(-75deg); transform-origin: 50% 100%;
  transition: opacity .7s var(--entra), transform 1.1s var(--entra); transition-delay: calc(var(--i) * 80ms + 100ms);
}
.anima #vitvit .grande.visto .lettera { opacity: 1; transform: none; }

/* La definizione UIT: la parola si stringe dalle lettere larghe, la riga d'oro si disegna */
.anima .definizione .parola-def { letter-spacing: .4em; opacity: .2; transition: letter-spacing 1.4s var(--entra) .25s, opacity 1s ease .25s; }
.anima .definizione .parola-def::after { transform: scaleX(0); transition: transform 1.2s var(--entra) .7s; }
.anima .definizione.visto .parola-def { letter-spacing: .02em; opacity: 1; }
.anima .definizione.visto .parola-def::after { transform: scaleX(1); }

/* Card che seguono il mouse: un riflesso di luce che si sposta sulla foto */
.inclina { transform-style: preserve-3d; will-change: auto; }
.inclina.attiva { will-change: transform; }
.inclina::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 0%), rgba(255, 252, 245, .22), transparent 45%);
  opacity: 0; transition: opacity .4s ease;
}
.articolo, .voce, .pilastro { position: relative; }
.inclina.attiva::after { opacity: 1; }
/* Su touch: solo una leggera reazione alla pressione */
@media (pointer: coarse) {
  .inclina { transition: transform .18s var(--entra); }
  .inclina:active { transform: scale(.985); }
}

/* Chi preferisce meno movimento: solo dissolvenze, niente spostamenti */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anima [data-compari], .anima h2[data-compari], .anima .testa-sezione[data-compari] { transform: none !important; clip-path: none !important; transition: opacity .5s ease; }
  .anima #vitvit .grande .lettera { transform: none; transition: opacity .5s ease; }
  .anima .definizione .parola-def { letter-spacing: .02em; transition: opacity .5s ease; }
  .anima .definizione .parola-def::after { transform: none; }
  .js .titolo-mondo > *, .js .scorri svg { animation: none; }
  .testata, .targa, .testata::before { transition: none; }
  .pannello-luce::after { animation: none; display: none; }
  .pannello-lastra { will-change: auto; }
  .film-video, .film-fine, .pannello-video { transition: none; }
}