/* Caratteri ospitati sul sito (16/10/2026, ok di Boris): nessuna richiesta a Google a ogni visita.
   File woff2 ufficiali di Google Fonts, licenza SIL OFL 1.1 (testi in /assets/fonts/OFL-*.txt).
   Albert Sans è un carattere variabile: lo stesso file copre 400 e 600. */
@font-face {
  font-family: "Albert Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/albertsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Albert Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/albertsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marcellus-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marcellus-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* OmniaVision — bozza di direzione, 15/09/2026
   Palette e tipografia dal BRIEF-LOGO.md. Corpo 19px: il pubblico della cataratta ha 60+ anni. */

:root {
  /* presi dal marchio definitivo del 15/09/2026: blu #253963, oro #F0CC43 */
  --inchiostro: #253963;
  --inchiostro-80: #4A5C82;
  --inchiostro-60: #7683A1;
  --carta: #F7F4EE;
  --carta-scura: #EDE8DE;
  --oro: #F0CC43;          /* solo su fondo scuro: su carta fa 1,43 di contrasto */
  --oro-scuro: #8A6B12;    /* la versione leggibile su fondo chiaro: 4,56 */
  --bianco: #FFFFFF;

  --display: "Marcellus", "Times New Roman", serif;
  --testo: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --misura: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 19px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--inchiostro); text-decoration-color: var(--oro); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }

.salta {
  position: absolute; left: -9999px;
  background: var(--inchiostro); color: var(--carta);
  padding: .75rem 1.25rem; z-index: 100;
}
.salta:focus { left: var(--gutter); top: .75rem; }

.contenitore { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: var(--gutter); }
/* la colonna di lettura si allinea al titolo, non si centra nella pagina */
.stretto > * { max-width: var(--misura); }
.contrappunto .interno.stretto > * { max-width: 40rem; }

/* ---------- Marchio (lettering, in attesa del logo) ---------- */
.marchio {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
}
.marchio b { font-weight: 400; }
.marchio span {
  font-size: .62em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inchiostro-60);
  font-family: var(--testo);
  font-weight: 600;
}

/* ---------- Testata ---------- */
.testata {
  border-bottom: 1px solid var(--carta-scura);
  background: var(--carta);
  position: sticky; top: 0; z-index: 20;
}
.testata > .contenitore {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 5rem; flex-wrap: wrap;
}
.navigazione { display: flex; gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: wrap; }
.navigazione a {
  font-size: .9rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 600; text-decoration: none; color: var(--inchiostro-80);
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
}
.navigazione a:hover, .navigazione a[aria-current="page"] {
  color: var(--inchiostro); border-bottom-color: var(--oro);
}

/* ---------- Briciole ---------- */
.briciole { font-size: .85rem; color: var(--inchiostro-60); padding-top: 2rem; }
.briciole ol { list-style: none; display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; padding: 0; }
.briciole li + li::before { content: "›"; margin-right: .5rem; color: var(--oro); }

/* ---------- Apertura ---------- */
.apertura { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.occhiello {
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-scuro); font-weight: 600; margin: 0 0 1.25rem;
}
h1 {
  font-family: var(--display);
  font-size: clamp(2.75rem, 7vw, 4.75rem);
  line-height: 1.04;
  font-weight: 400;
  margin: 0 0 1.5rem;
  letter-spacing: -.01em;
}
.sommario {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.6;
  color: var(--inchiostro-80);
  max-width: 38rem;
  margin: 0;
}

/* ---------- Corpo ---------- */
h2 {
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  line-height: 1.18;
  font-weight: 400;
  margin: 0 0 1.25rem;
}
h3 { font-size: 1.2rem; font-weight: 600; margin: 2rem 0 .5rem; letter-spacing: .01em; }
p { margin: 0 0 1.35rem; }

section { padding-block: clamp(2rem, 4vw, 3.25rem); }
section + section { border-top: 1px solid var(--carta-scura); }

.elenco { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.elenco li {
  position: relative; padding-left: 1.75rem; margin-bottom: .9rem;
}
.elenco li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--oro);
}

/* ---------- Il blocco che porta il posizionamento ---------- */
.contrappunto {
  background: var(--inchiostro);
  color: var(--carta);
  margin-block: clamp(2rem, 5vw, 3.5rem);
}
.contrappunto h2 { color: var(--carta); }
.contrappunto p { color: rgba(247, 244, 238, .88); }
.contrappunto strong { color: var(--oro); font-weight: 600; }
.contrappunto .occhiello { color: var(--oro); }
.contrappunto .interno { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

/* ---------- Rimando ---------- */
.rimando {
  display: block;
  border: 1px solid var(--carta-scura);
  background: var(--bianco);
  padding: clamp(1.5rem, 3vw, 2rem);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.rimando:hover { border-color: var(--oro); transform: translateY(-2px); }
.rimando .etichetta {
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-scuro); font-weight: 600; display: block; margin-bottom: .5rem;
}
.rimando .titolo { font-family: var(--display); font-size: 1.5rem; display: block; margin-bottom: .35rem; }
.rimando .nota { font-size: .95rem; color: var(--inchiostro-60); }

/* ---------- Domande ---------- */
.domande { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--carta-scura); }
.domande li { border-bottom: 1px solid var(--carta-scura); }
.domande a {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.15rem 0; text-decoration: none; font-size: 1.08rem;
}
.domande a::after { content: "→"; color: var(--oro); flex-shrink: 0; }
.domande a:hover { color: var(--oro-scuro); }

/* ---------- Buchi dichiarati ---------- */
.buco {
  border: 2px dashed #C0392B;
  background: rgba(192, 57, 43, .05);
  padding: 1.25rem 1.5rem;
  margin-block: 1.5rem;
  font-size: .95rem;
  line-height: 1.6;
}
.buco strong { color: #A5291B; display: block; margin-bottom: .35rem; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }

/* ---------- Firma ---------- */
.firma {
  border-top: 2px solid var(--oro);
  padding-top: 1.5rem;
  font-size: .95rem;
  color: var(--inchiostro-80);
}
.firma .disclaimer { font-style: italic; color: var(--inchiostro-60); margin: .75rem 0 0; }

/* ---------- Piede ---------- */
.piede {
  background: var(--inchiostro);
  color: rgba(247, 244, 238, .75);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  font-size: .95rem;
}
.piede a { color: var(--carta); }
.piede .marchio { color: var(--carta); margin-bottom: 1.5rem; }
.piede .marchio span { color: rgba(247,244,238,.6); }
.piede-griglia { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.piede h2 { font-family: var(--testo); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin-bottom: .75rem; }

/* ---------- Nastro bozza ---------- */
.nastro {
  background: #A5291B; color: #fff;
  font-size: .85rem; letter-spacing: .05em;
  padding: .6rem var(--gutter); text-align: center;
}
.nastro b { letter-spacing: .12em; text-transform: uppercase; }

.versione {
  font-size: .78rem; color: var(--inchiostro-60);
  font-variant-numeric: tabular-nums;
}

/* ---------- Mobile ----------
   La testata smette di essere appiccicata: con marchio + sei voci si mangiava
   mezzo schermo. In fase 5 la navigazione diventa un menu a scomparsa. */
@media (max-width: 767px) {
  .testata { position: static; }
  .testata > .contenitore { min-height: 0; padding-block: 1rem; gap: .75rem; }
  .navigazione { gap: .5rem 1.1rem; }
  .navigazione a { font-size: .8rem; letter-spacing: .07em; }
  body { font-size: 18px; }
  .riga { grid-template-columns: 1fr; }
  .riga .stato { justify-self: start; }
}

/* ============================================================
   HOME — componenti aggiunti il 15/09/2026
   ============================================================ */

.copertina {
  background: var(--inchiostro);
  color: var(--carta);
  padding-block: clamp(3.5rem, 10vw, 7.5rem);
  position: relative;
  overflow: hidden;
}
/* velo d'oro appena percettibile, al posto della fotografia che non abbiamo ancora */
.copertina::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60rem 40rem at 85% 15%, rgba(200,149,69,.14), transparent 65%);
  pointer-events: none;
}
.copertina > * { position: relative; z-index: 1; }

.copertina .marchio-grande {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: .95;
  letter-spacing: .01em;
  margin: 0 0 1.5rem;
  font-weight: 400;
}
.copertina .marchio-grande span {
  color: var(--oro);
  font-size: .42em;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-family: var(--testo);
  font-weight: 600;
  display: block;
  margin-top: .9rem;
}
.copertina .claim {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.5;
  color: rgba(247,244,238,.9);
  max-width: 40rem;
  margin: 0 0 2.5rem;
}
.citta {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  font-size: .9rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro); font-weight: 600;
  border-top: 1px solid rgba(247,244,238,.2);
  padding-top: 1.75rem;
}

/* griglia delle aree */
.griglia-aree {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  background: var(--carta-scura);
  border: 1px solid var(--carta-scura);
}
.area {
  background: var(--carta);
  padding: clamp(1.5rem, 3vw, 2rem);
  text-decoration: none;
  display: block;
  transition: background .2s ease;
}
.area:hover { background: var(--bianco); }
.area .nome { font-family: var(--display); font-size: 1.5rem; display: block; margin-bottom: .4rem; }
.area .cosa { font-size: .97rem; color: var(--inchiostro-60); line-height: 1.6; display: block; }

/* le tappe della visita */
.tappe { counter-reset: tappa; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.tappa { counter-increment: tappa; }
.tappa::before {
  content: counter(tappa);
  font-family: var(--display);
  font-size: 2.5rem;
  color: var(--oro);
  display: block;
  line-height: 1;
  margin-bottom: .75rem;
}
.tappa h3 { margin-top: 0; }
.tappa p { font-size: .98rem; color: var(--inchiostro-80); }

/* i tre medici */
.medici { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.medico { text-align: left; }
.ritratto-mancante {
  aspect-ratio: 4 / 5;
  background: var(--carta-scura);
  border: 2px dashed var(--inchiostro-60);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: .85rem;
  color: var(--inchiostro-60);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.medico .nome { font-family: var(--display); font-size: 1.4rem; display: block; }
.medico .dove { font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-scuro); font-weight: 600; }

@media (max-width: 767px) {
  /* il sottotitolo spaziato andava a capo male su schermo stretto */
  .copertina .marchio-grande span { letter-spacing: .18em; font-size: .38em; }
  .citta { gap: .5rem 1.25rem; font-size: .82rem; }
}

/* i punti da chiarire col medico: visibili, ma diversi dai dati che bloccano la pubblicazione */
.da-confermare {
  border-left: 3px solid var(--oro);
  background: rgba(200, 149, 69, .07);
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
  font-size: .95rem;
  line-height: 1.6;
}
.da-confermare strong {
  display: block;
  color: var(--oro-scuro);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .74rem;
  margin-bottom: .3rem;
}

/* ---------- Schede persona e ritratti (15/09/2026) ---------- */
.scheda-persona {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 719px) {
  .scheda-persona { grid-template-columns: 1fr; }
}
.ritratto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--carta-scura);
}
.scheda-testo .dove {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-scuro); font-weight: 600; margin: 0 0 1rem;
}

/* la griglia dei tre: i ritratti sono cliccabili */
.medici a.medico { text-decoration: none; display: block; }
.medici a.medico .ritratto { margin-bottom: 1rem; transition: opacity .2s ease; }
.medici a.medico:hover .ritratto { opacity: .88; }
.medici .nome { font-family: var(--display); font-size: 1.4rem; display: block; }
.medici .dove { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-scuro); font-weight: 600; }

.recapito { font-size: 1.1rem; margin-bottom: .5rem; }

/* i dati identificativi obbligatori: esposti, non nascosti in fondo */
.identificativi {
  margin: 0 0 1.5rem;
  border-left: 3px solid var(--oro);
  padding-left: 1.25rem;
}
.identificativi dt {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--oro-scuro); font-weight: 600; margin-top: .9rem;
}
.identificativi dt:first-child { margin-top: 0; }
.identificativi dd { margin: .15rem 0 0; font-size: .98rem; line-height: 1.55; }


/* OmniaVision — la pagina di lancio, 15/09/2026
   Regola che governa tutto: niente centrato. Il vuoto non si riempie, si organizza. */

.lancio {
  --colonna: clamp(1.5rem, 6vw, 6rem);   /* il margine sinistro da cui tutto si allinea */
}

.lancio .misura { max-width: 74rem; margin-inline: auto; padding-inline: var(--colonna); }

/* entrata sobria, e ferma del tutto per chi non vuole movimento */
@media (prefers-reduced-motion: no-preference) {
  .lancio section > *, .lancio .volto, .lancio .studi-elenco li {
    animation: sale .7s cubic-bezier(.22,.61,.36,1) both;
  }
  .lancio .volto:nth-child(2) { animation-delay: .09s; }
  .lancio .volto:nth-child(3) { animation-delay: .18s; }
  .lancio .studi-elenco li:nth-child(2) { animation-delay: .07s; }
  .lancio .studi-elenco li:nth-child(3) { animation-delay: .14s; }
}
@keyframes sale {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- prima schermata */
.apre {
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 8vw, 6rem);
  /* il bagliore del marchio, ripreso come luce di fondo */
  background:
    radial-gradient(42rem 30rem at 78% 8%, rgba(240, 204, 67, .13), transparent 62%),
    var(--carta);
}
.apre-griglia {
  max-width: 74rem; margin-inline: auto; padding-inline: var(--colonna);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.apre-marchio { width: min(19rem, 70%); margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

.lancio h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  margin: 0 0 1.5rem;
  font-weight: 400;
}
.lancio h1 .oro { color: var(--oro-scuro); }

.apre-frase {
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--inchiostro-80);
  max-width: 30rem;
  margin: 0 0 2.25rem;
}

.apre-citta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  font-size: .9rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 600; color: var(--inchiostro);
}
.apre-citta li { position: relative; padding-top: .9rem; }
.apre-citta li::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 2.2rem; height: 2px; background: var(--oro-scuro);
}

/* la teca del video: fondo scuro come quinta, il video ci sta dentro */
/* gli anelli della lente, ripresi dal marchio: geometria, non decorazione */
.apre-video { position: relative; }
.apre-video::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34rem; height: 34rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(37, 57, 99, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 4rem rgba(240, 204, 67, .05),
    0 0 0 8rem rgba(240, 204, 67, .028),
    inset 0 0 0 1px rgba(240, 204, 67, .10);
  pointer-events: none;
  z-index: 0;
}
.apre-video > * { position: relative; z-index: 1; }

.video-teca {
  background: var(--inchiostro);
  padding: clamp(.5rem, 1vw, .75rem);
  max-width: 21rem;
  margin-inline: auto;
  box-shadow: 0 1.5rem 3.5rem rgba(37, 57, 99, .22);
  line-height: 0;
}
.video-teca video { width: 100%; height: auto; display: block; }
.video-nota {
  text-align: center;
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--inchiostro-60); font-weight: 600;
  margin: 1.1rem 0 0;
}

/* ---------------------------------------------------- titoli di sezione */
.lancio .etichetta {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--oro-scuro); margin: 0 0 1rem;
}
.lancio .etichetta.oro { color: var(--oro); }
.lancio h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.75rem, 3.1vw, 2.7rem);
  line-height: 1.2; margin: 0 0 1.5rem;
}

/* ---------------------------------------------------- i tre volti */
.tre-medici { padding-block: clamp(3rem, 7vw, 5.5rem); }
.schiera {
  max-width: 74rem; margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-inline: var(--colonna);
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.volto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  background: var(--carta-scura);
}
.volto.alzato { transform: translateY(2.25rem); }
.volto h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  margin: 1.1rem 0 0; letter-spacing: 0;
}
.volto h3::after {
  content: ""; display: block; width: 2.6rem; height: 2px;
  background: var(--oro-scuro); margin-top: .7rem;
}
.volto .citta {
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--inchiostro-60); margin: .7rem 0 .5rem;
}
.volto .albo {
  font-size: .84rem; line-height: 1.5; color: var(--inchiostro-60); margin: 0;
}

/* ---------------------------------------------------- la fascia scura, una sola */
.fascia {
  background: var(--inchiostro); color: var(--carta);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background-image: radial-gradient(38rem 26rem at 12% 0%, rgba(240,204,67,.12), transparent 62%);
}
.fascia h2 { color: var(--carta); }
.fascia p {
  color: rgba(247, 244, 238, .86);
  max-width: 34rem; font-size: 1.05rem; line-height: 1.7;
}

/* ---------------------------------------------------- gli studi */
.dove { padding-block: clamp(3rem, 7vw, 5.5rem); }
.studi-elenco {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; padding-inline: var(--colonna);
  max-width: 74rem;
  border-top: 1px solid var(--carta-scura);
}
.studi-elenco li {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.25rem; align-items: baseline;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--carta-scura);
}
.studi-elenco .num {
  font-family: var(--display); font-size: 1.6rem;
  color: var(--oro-scuro); line-height: 1;
}
.studi-elenco h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 .3rem; letter-spacing: 0;
}
.studi-elenco .chi {
  font-size: .82rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 600; color: var(--inchiostro-60); margin: 0 0 .5rem;
}
.studi-elenco .indirizzo { margin: 0; font-size: 1.02rem; }
.studi-elenco .in-arrivo { color: var(--inchiostro-60); font-style: italic; }

.coda {
  max-width: 74rem; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  padding-inline: var(--colonna);
  font-size: .95rem; color: var(--inchiostro-60);
}
.coda > span { display: block; max-width: 46rem; }

/* ---------------------------------------------------- piede */
.piede-lancio {
  background: var(--inchiostro); color: rgba(247, 244, 238, .78);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.piede-marchio { width: min(14rem, 60%); margin-bottom: 1.75rem; }
.piede-riga {
  font-family: var(--display); font-size: 1.15rem;
  color: var(--carta); margin: 0 0 .75rem;
}
.piede-nota { font-size: .92rem; max-width: 34rem; margin: 0 0 1.75rem; }
.piede-lancio .versione { color: rgba(247, 244, 238, .5); font-size: .8rem; margin: 0; }

/* ---------------------------------------------------- schermi stretti */
@media (max-width: 899px) {
  .apre-griglia { grid-template-columns: 1fr; gap: 2.5rem; }
  .apre-marchio { width: min(16rem, 62%); }
  /* gli anelli della lente, ripresi dal marchio: geometria, non decorazione */
.apre-video { position: relative; }
.apre-video::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 34rem; height: 34rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(37, 57, 99, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 4rem rgba(240, 204, 67, .05),
    0 0 0 8rem rgba(240, 204, 67, .028),
    inset 0 0 0 1px rgba(240, 204, 67, .10);
  pointer-events: none;
  z-index: 0;
}
.apre-video > * { position: relative; z-index: 1; }

.video-teca { max-width: 19rem; }
  .schiera { grid-template-columns: 1fr; gap: 2.5rem; }
  .volto.alzato { transform: none; }         /* lo sfalsamento ha senso solo in riga */
  .volto img { max-width: 20rem; }
  .studi-elenco li { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
}

.studi-elenco .telefono { margin: .45rem 0 0; font-size: 1.05rem; }
.studi-elenco .telefono a {
  font-variant-numeric: tabular-nums;
  text-decoration-color: var(--oro-scuro);
  text-underline-offset: .3em;
}
.studi-elenco .telefono a:hover { color: var(--oro-scuro); }

/* la copertura regionale: è il posizionamento che i tre rivendicano nel video,
   quindi non sta in fondo in corpo piccolo */
.apre-regione {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--carta-scura);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--inchiostro-80);
  max-width: 28rem;
}
.apre-regione strong { color: var(--inchiostro); font-weight: 600; }

/* ============================================================
   TELEFONO — rifatto il 15/09/2026 guardando la pagina a 375px
   ============================================================ */
@media (max-width: 599px) {
  /* i ritorni a capo scelti per il desktop spezzano male in colonna stretta */
  .solo-largo { display: none; }

  /* il titolo può crescere: su telefono è l'unica cosa che si vede per prima */
  .lancio h1 { font-size: clamp(2.1rem, 11vw, 2.9rem); line-height: 1.12; }
  .apre { padding-block: 2rem 2.5rem; }
  .apre-marchio { width: min(13.5rem, 58%); margin-bottom: 1.5rem; }
  .apre-frase { font-size: 1.02rem; margin-bottom: 1.75rem; }

  /* le città: una riga sola, senza andare a capo a metà elenco */
  .apre-citta {
    gap: .55rem 1.15rem;
    font-size: .76rem;
    letter-spacing: .1em;
  }
  .apre-citta li { padding-top: .7rem; }
  .apre-citta li::before { width: 1.5rem; }

  /* il video resta protagonista ma lascia respirare */
  .video-teca { max-width: min(17rem, 78vw); }
  .apre-video::before { width: 22rem; height: 22rem; }
  .video-nota { font-size: .76rem; letter-spacing: .08em; }

  /* i ritratti erano quasi a tutto schermo: due per riga, il volto si legge lo stesso */
  .schiera {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }
  .volto img { max-width: none; }
  .volto:last-child { grid-column: 1 / -1; max-width: calc(50% - .5rem); }
  .volto h3 { font-size: 1.1rem; margin-top: .85rem; }
  .volto h3::after { width: 2rem; margin-top: .55rem; }
  .volto .citta { font-size: .72rem; margin: .55rem 0 .4rem; }
  .volto .albo { font-size: .78rem; }

  /* sezioni più compatte: meno vuoto, stesso ritmo */
  .tre-medici, .dove { padding-block: 2.5rem; }
  .fascia { padding-block: 3rem; }
  .fascia p { font-size: 1rem; }

  /* gli studi: il numero non serve a tutta larghezza */
  .studi-elenco li { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .85rem; }
  .studi-elenco .num { font-size: 1.15rem; }
  .studi-elenco h3 { font-size: 1.35rem; }

  /* i telefoni si toccano col pollice: area di tocco piena */
  .studi-elenco .telefono a {
    display: inline-block;
    padding-block: .35rem;
    min-height: 44px;
    line-height: 1.9;
  }

  .piede-marchio { width: min(11rem, 52%); }
  .piede-riga { font-size: 1.02rem; }
}

/* Gli anelli decorativi sono più larghi dello schermo del telefono: senza questo
   la pagina scorre in orizzontale e il testo sembra tagliato a destra. */
.lancio { overflow-x: hidden; }
.apre, .apre-video { overflow-x: clip; }


/* OmniaVision — sito v1 (16/10/2026)
   Si appoggia a stile.css (pagine interne) e lancio.css (home): qui solo i pezzi del sito vero —
   testata col logo, menu da telefono, blocco «dove fare una visita», firma, piede con i dati di legge. */

/* Contrasto (Lighthouse 16/10): il blu-grigio dei testi piccoli faceva 3,46:1 sulla carta (serve 4,5).
   Stessa tinta, più scura: 5,3 su carta, 4,76 su carta scura, 5,8 sul bianco. */
:root { --inchiostro-60: #566588; }

/* ---------- Testata ---------- */
.testata-riga { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.25rem; }
.logo { display: block; flex-shrink: 0; line-height: 0; }
.logo img { width: clamp(9.5rem, 16vw, 11.5rem); height: auto; }
.navigazione ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.6rem); }
.navigazione a { white-space: nowrap; }
.navigazione .bottone-contatti {
  border: 1px solid var(--inchiostro); padding: .55rem 1.1rem; color: var(--inchiostro);
  border-bottom-width: 1px;
}
.navigazione .bottone-contatti:hover, .navigazione .bottone-contatti[aria-current="page"] {
  background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro);
}
.menu-apri { display: none; }

/* da 1100px in su: logo e sette voci su una riga sola, contenitore un po' più largo del testo */
@media (min-width: 1100px) {
  .testata > .contenitore.testata-riga { flex-wrap: nowrap; max-width: 80rem; }
  .navigazione a { font-size: .8rem; letter-spacing: .08em; }
  .navigazione ul { gap: clamp(.9rem, 1.4vw, 1.5rem); }
}

/* sotto i 1100px le sette voci non stanno in riga: menu a scomparsa (solo se JS è attivo;
   senza JS il menu resta aperto sotto il logo, e il sito si usa lo stesso) */
@media (max-width: 1099px) {
  .testata { position: sticky; top: 0; }
  .testata-riga { flex-wrap: wrap; min-height: 4.5rem; padding-block: .6rem; }
  .logo img { width: 9.5rem; }
  .js .menu-apri {
    display: inline-flex; align-items: center; gap: .6rem;
    font: 600 .9rem/1 var(--testo); letter-spacing: .1em; text-transform: uppercase;
    color: var(--inchiostro); background: transparent; border: 1px solid var(--inchiostro);
    padding: .7rem 1rem; min-height: 44px; cursor: pointer;
  }
  .menu-segno, .menu-segno::before, .menu-segno::after {
    display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; transition: transform .2s ease;
  }
  .menu-segno::before, .menu-segno::after { content: ""; position: absolute; left: 0; }
  .menu-segno::before { top: -6px; }
  .menu-segno::after { top: 6px; }
  .menu-apri[aria-expanded="true"] .menu-segno { background: transparent; }
  .menu-apri[aria-expanded="true"] .menu-segno::before { transform: translateY(6px) rotate(45deg); }
  .menu-apri[aria-expanded="true"] .menu-segno::after { transform: translateY(-6px) rotate(-45deg); }

  .navigazione { flex-basis: 100%; }
  .js .navigazione { display: none; }
  .js .navigazione.aperta { display: block; }
  .navigazione ul { flex-direction: column; align-items: stretch; gap: 0; padding-block: .5rem 1rem; }
  .navigazione li { border-top: 1px solid var(--carta-scura); }
  .navigazione a { display: block; padding: .95rem 0; font-size: .95rem; border-bottom: 0; }
  .navigazione a[aria-current="page"] { color: var(--oro-scuro); }
  .navigazione .voce-contatti { border-top: 0; padding-top: .75rem; }
  .navigazione .bottone-contatti { text-align: center; padding: .9rem 1rem; }
}
@media (max-width: 767px) {
  /* stile.css toglieva la testata appiccicata per via delle sei voci in riga: col menu a scomparsa torna */
  .testata { position: sticky; }
  .testata > .contenitore { padding-block: .5rem; }
}

/* ---------- Apertura delle pagine interne ---------- */
.apertura .sommario { margin-top: -.25rem; }
.briciole a { color: var(--inchiostro-60); text-decoration: none; }
.briciole a:hover { color: var(--inchiostro); text-decoration: underline; }
.briciole [aria-current="page"] { color: var(--inchiostro); }

/* ---------- Dove fare una visita ---------- */
.blocco-visita { background: var(--carta-scura); padding-block: clamp(2.5rem, 5vw, 3.75rem); border-top: 0; }
section + .blocco-visita { border-top: 0; }
.blocco-visita h2 { margin-bottom: .75rem; }
.blocco-visita-testo { max-width: 40rem; color: var(--inchiostro-80); }
.tre-studi {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  background: rgba(37, 57, 99, .14); border: 1px solid rgba(37, 57, 99, .14);
}
.tre-studi li { background: var(--carta); padding: clamp(1.25rem, 2.6vw, 1.75rem); }
.tre-studi h3 { font-family: var(--display); font-weight: 400; font-size: 1.55rem; margin: 0 0 .25rem; letter-spacing: 0; }
.tre-studi h3 a { text-decoration: none; }
.tre-studi h3 a:hover { text-decoration: underline; text-decoration-color: var(--oro-scuro); }
.tre-studi .chi { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--inchiostro-60); margin: 0 0 .6rem; }
.tre-studi .indirizzo { margin: 0; font-size: 1rem; line-height: 1.55; }
.tre-studi .presso { color: var(--inchiostro-60); }
.tre-studi .telefono { margin: .5rem 0 0; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.tre-studi .telefono a { display: inline-block; min-height: 44px; line-height: 2.2; text-decoration-color: var(--oro-scuro); }

/* tre studi e griglie delle aree: mai una cella vuota. Una colonna sul telefono, tre dal tablet in su
   (con auto-fit a 768 px venivano 2 + 1 con un riquadro grigio vuoto) */
.tre-studi { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .tre-studi, .griglia-aree { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tre-studi li { padding: 1.25rem; }
}
@media (max-width: 699px) {
  .griglia-aree { grid-template-columns: 1fr; }
}

/* ---------- Firma e avvertenza ---------- */
.chiusura { border-top: 0; }
section + .chiusura { border-top: 0; }
.firma p { margin-bottom: .5rem; }

/* ---------- Componenti per i frammenti (vedi CONTRATTO-CONTENUTI.md) ---------- */
.nota-medica {
  border-left: 3px solid var(--oro-scuro); background: var(--bianco);
  padding: 1rem 1.25rem; margin-block: 1.5rem; font-size: .98rem; line-height: 1.65;
}
.nota-medica strong:first-child { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-scuro); margin-bottom: .3rem; }
.tabella-scorre { overflow-x: auto; margin-block: 1.5rem; -webkit-overflow-scrolling: touch; }
.tabella { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .97rem; }
.tabella th, .tabella td { text-align: left; vertical-align: top; padding: .75rem .9rem; border-bottom: 1px solid var(--carta-scura); }
.tabella th { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-scuro); font-weight: 600; }
.griglia-rimandi { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-block: 1.5rem; }
.domanda-risposta h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }

/* ---------- Piede ---------- */
.piede-sito {
  background: var(--inchiostro); color: rgba(247, 244, 238, .78);
  padding-block: clamp(3rem, 6vw, 4.5rem); margin-top: 0; font-size: .95rem; line-height: 1.6;
}
.piede-sito a { color: var(--carta); text-decoration-color: rgba(240, 204, 67, .6); }
.piede-logo { width: min(13rem, 58%); margin-bottom: 1.5rem; }
.piede-chi { max-width: 40rem; margin-bottom: 2rem; }
.piede-medici { display: grid; gap: 1.75rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); padding-block: 1.75rem; border-block: 1px solid rgba(247, 244, 238, .16); }
.piede-medico p { margin: 0 0 .6rem; font-size: .9rem; }
.piede-medico .piede-nome { font-family: var(--display); font-size: 1.2rem; color: var(--carta); margin-bottom: .5rem; }
.piede-medico .piede-nome a { text-decoration: none; }
.piede-link { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-block: 1.75rem 1.25rem; }
.piede-link a { display: inline-block; min-height: 44px; line-height: 2.75; font-size: .9rem; letter-spacing: .06em; }
.piede-sito .versione { color: rgba(247, 244, 238, .74); margin: 0; }

/* la home non ha briciole e usa la testata del sito sopra la sua prima schermata */
.lancio .apre { padding-top: clamp(2rem, 5vw, 4rem); }

/* ---------- Video in home: l'ancora #video ---------- */
#video { scroll-margin-top: 6rem; }

/* il team su telefono: due ritratti per riga come in home, il terzo sotto (un volto intero per schermata era troppo) */
@media (max-width: 599px) {
  .medici { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .medici .nome { font-size: 1.1rem; }
  .medici .dove { font-size: .72rem; }
  .scheda-persona .ritratto { max-width: 16rem; }
}

/* Rilievi Codex del 16/10: (6) i link nelle fasce scure erano blu su blu (contrasto 1:1);
   (7) il bordo oro del focus da tastiera faceva 1,4:1 sulla carta. Scuro sul chiaro, oro sullo scuro. */
.contrappunto a, .fascia a { color: var(--carta); text-decoration-color: var(--oro); }
.contrappunto a:hover, .fascia a:hover { color: var(--oro); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 3px; }
.contrappunto :focus-visible, .fascia :focus-visible, .piede-sito :focus-visible { outline-color: var(--oro); }

/* ---------- Stampa ---------- */
@media print {
  .testata, .menu-apri, .blocco-visita, .piede-link, .nastro { display: none !important; }
  body { font-size: 12pt; background: #fff; }
}


/* OmniaVision — veste «Luce» (16/10/2026, scelta di Boris fra due proposte): la sigla del logo dal vivo in home,
   comparse allo scorrimento e rifiniture su tutte le pagine. Regole del movimento: motion.md
   (solo transform/opacity, clip-path sui titoli, niente sullo scroll, riduci movimento rispettato). */

:root {
  --motion-ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --motion-ease-soft: cubic-bezier(0.2, 0, 0, 1);
  --anelli-oro: rgba(200, 149, 69, .13);
}

/* via l'entrata generica della pagina di lancio: nella home nuova entra la sigla, e il titolo (LCP) non si anima */
.lancio section > *, .lancio .volto, .lancio .studi-elenco li { animation: none; }
main { overflow-x: clip; }

/* ============================================================ PRIMA SCHERMATA DELLA HOME */
.scena {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 5.25rem);
  display: grid; align-content: center; justify-items: center;
  padding: clamp(2.5rem, 7vh, 5rem) var(--gutter) clamp(5rem, 11vh, 7rem);
  background:
    radial-gradient(ellipse 46% 36% at 50% 40%, rgba(240, 204, 67, .16), transparent 70%),
    #FBFAF7;
  text-align: center;
}
/* gli anelli della lente, ripresi dal logo: geometria leggera, mai un'immagine in più */
.scena-anelli {
  position: absolute; z-index: -1; left: 50%; top: 40%;
  width: min(160vmin, 1500px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle, transparent 0 44px, var(--anelli-oro) 44px 45px);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 68%);
          mask: radial-gradient(circle, #000 0 30%, transparent 68%);
  pointer-events: none;
}
.scena-interno { width: 100%; max-width: 72rem; }

.sigla { position: relative; width: min(88vw, 64rem); aspect-ratio: 1023.68 / 384.16; margin: 0 auto; }
.sigla-statica { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sigla-viva .sigla-statica { visibility: hidden; }
.sigla-scala { position: absolute; left: 0; top: 0; width: 1023.68px; height: 384.16px; transform-origin: 0 0; }
.sigla-palco { position: absolute; inset: 0; }
.sigla .liv { position: absolute; left: 0; top: 0; will-change: transform, filter, opacity; }
.sigla .liv svg { display: block; }
.sigla-ferma .liv { will-change: auto; }

.scena-titolo {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.08; letter-spacing: -.012em;
  margin: clamp(1.25rem, 4vh, 2.75rem) auto 1.25rem; max-width: 22ch;
}
.scena-titolo .oro { color: var(--oro-scuro); }
.scena-titolo .riga { display: inline-block; white-space: nowrap; }   /* va a capo solo fra le tre frasi */
@media (max-width: 599px) {
  .scena-citta { gap: .4rem 1.3rem; font-size: .76rem; letter-spacing: .14em; }
}
.scena-frase {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.65; color: var(--inchiostro-80);
  max-width: 40rem; margin: 0 auto 2rem;
}
.scena-citta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.4rem;
  font-size: .86rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
}
.scena-citta a { text-decoration: none; display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; }
.scena-citta a::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--oro-scuro); }
.scena-citta a:hover { color: var(--oro-scuro); }
.scena-giu {
  position: relative; margin-top: clamp(1.75rem, 5vh, 3rem); justify-self: center;
  display: grid; justify-items: center; gap: .6rem;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  color: var(--inchiostro-60); text-decoration: none; min-height: 44px;
}
.scena-giu::after { content: ""; width: 1px; height: 2.6rem; background: linear-gradient(var(--oro-scuro), transparent); transform-origin: top; }

/* coreografia: la sigla è l'entrata; frase, città e invito a scorrere arrivano quando la stella si accende.
   Solo con JS (html.js) e senza «riduci movimento»: senza JS si vede tutto subito. */
@media (prefers-reduced-motion: no-preference) {
  .scena-anelli { animation: anelli-entrano 2.4s var(--motion-ease-out) both; }
  .js .scena-frase, .js .scena-citta, .js .scena-giu { animation: sale-piano .9s var(--motion-ease-out) both; }
  .js .scena-frase { animation-delay: 2.65s; }
  .js .scena-citta { animation-delay: 2.85s; }
  .js .scena-giu { animation-delay: 3.2s; }
  .scena-giu::after { animation: respiro 2.6s ease-in-out 4s infinite; }
}
@keyframes anelli-entrano { from { opacity: 0; transform: translate(-50%, -50%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes sale-piano { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes respiro { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(.55); opacity: .5; } }

/* il logo piccolo in testata compare quando quello grande esce dallo schermo */
.testata .logo { transition: opacity .5s var(--motion-ease-soft), transform .5s var(--motion-ease-soft); }
.con-sigla.sigla-in-vista .testata .logo { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* ============================================================ LA PRESENTAZIONE (video + testo) */
.presenta { padding-block: clamp(4rem, 9vw, 7rem); }
.presenta-griglia {
  display: grid; gap: clamp(2.5rem, 6vw, 5.5rem);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center;
}
.presenta .video-teca { max-width: 22rem; margin: 0; position: relative; }
.presenta .video-teca::before {
  content: ""; position: absolute; z-index: -1; inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid rgba(138, 107, 18, .45);
}
.presenta-video { position: relative; isolation: isolate; justify-self: center; }
.presenta-testo h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.12; }
.presenta-testo p { max-width: 34rem; color: var(--inchiostro-80); }
@media (max-width: 899px) {
  .presenta-griglia { grid-template-columns: 1fr; }
  .presenta .video-teca { max-width: min(19rem, 80vw); }
}

/* ============================================================ RIFINITURE COMUNI */
/* titoli di sezione più ampi nelle pagine interne */
main h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }

/* apertura delle pagine interne: fascia piena con gli anelli della lente a destra */
.apertura { position: relative; isolation: isolate; }
.apertura::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    radial-gradient(ellipse 40% 70% at 88% 50%, rgba(240, 204, 67, .14), transparent 70%),
    linear-gradient(180deg, #FBFAF7, var(--carta));
}
.apertura::after {
  content: ""; position: absolute; z-index: -1; top: 50%; right: -14rem; width: 38rem; aspect-ratio: 1;
  transform: translateY(-50%);
  background: repeating-radial-gradient(circle, transparent 0 26px, var(--anelli-oro) 26px 27px);
  -webkit-mask: radial-gradient(circle, #000 0 32%, transparent 70%);
          mask: radial-gradient(circle, #000 0 32%, transparent 70%);
  pointer-events: none;
}
.apertura .occhiello::after {
  content: ""; display: block; width: 3.2rem; height: 2px; margin-top: .9rem;
  background: var(--oro-scuro); transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .apertura .occhiello::after { animation: traccia 1.2s var(--motion-ease-out) .2s both; }
  .apertura::after { animation: anelli-laterali 2.2s var(--motion-ease-out) both; }
}
@keyframes traccia { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes anelli-laterali { from { opacity: 0; transform: translateY(-50%) scale(.9); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@media (max-width: 767px) { .apertura::after { right: -22rem; opacity: .7; } }

/* fasce scure: profondità con la luce dell'oro */
.contrappunto, .fascia { position: relative; isolation: isolate; overflow: hidden; }
.contrappunto::before, .fascia::before {
  content: ""; position: absolute; z-index: -1; width: 46rem; aspect-ratio: 1; right: -16rem; top: 50%;
  transform: translateY(-50%);
  background: repeating-radial-gradient(circle, transparent 0 30px, rgba(240, 204, 67, .07) 30px 31px);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 70%);
          mask: radial-gradient(circle, #000 0 30%, transparent 70%);
  pointer-events: none;
}
.contrappunto { background: radial-gradient(ellipse 60% 90% at 10% 0%, #2F4A7D, var(--inchiostro) 60%); }

/* schede che rispondono al passaggio: si sollevano appena, con un filo d'oro */
.area, .rimando, .tre-studi li {
  transition: transform .45s var(--motion-ease-soft), box-shadow .45s var(--motion-ease-soft), background-color .3s ease;
}
.area { position: relative; }
.area::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--oro-scuro);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--motion-ease-out);
}
@media (hover: hover) {
  .area:hover, .rimando:hover, .tre-studi li:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(37, 57, 99, .5); }
  .area:hover::after { transform: scaleX(1); }
}

/* ritratti: lo zoom lento resta dentro la cornice */
.volto > a, .medici a.medico { display: block; overflow: hidden; }
.volto img, .medici .ritratto { transition: transform 1.2s var(--motion-ease-out); }
@media (hover: hover) { .volto > a:hover img, .medici a.medico:hover .ritratto { transform: scale(1.045); } }

/* testata che si «posa» quando la pagina scorre */
.testata { transition: box-shadow .4s var(--motion-ease-soft), background-color .4s var(--motion-ease-soft); }
.testata.posata { box-shadow: 0 10px 30px -22px rgba(37, 57, 99, .55); background-color: rgba(247, 244, 238, .97); }

/* ============================================================ COMPARSE ALLO SCORRIMENTO (movimento.js) */
.js .rivela { opacity: 0; transform: translate3d(0, 28px, 0); }
.js .rivela.visto {
  opacity: 1; transform: none;
  transition: opacity .9s var(--motion-ease-out) var(--ritardo, 0ms), transform 1.1s var(--motion-ease-out) var(--ritardo, 0ms);
}
/* niente clip-path sul titolo osservato: azzerava la sua area visibile e l'osservatore non lo vedeva mai entrare
   (titoli rimasti nascosti, trovato al collaudo del 16/10). Il titolo sale un po' di più, e basta. */
.js .rivela-titolo { transform: translate3d(0, .55em, 0); }

/* cintura di sicurezza: con «riduci movimento» niente comparse, niente animazioni continue */
@media (prefers-reduced-motion: reduce) {
  .js .rivela, .js .rivela-titolo { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scena-anelli, .apertura::after, .apertura .occhiello::after, .scena-giu::after { animation: none !important; }
}
@media print { .js .rivela { opacity: 1 !important; transform: none !important; } }