@charset "utf-8";
/* PLZ Decorazioni artistiche
   Fondo neutro, immagini protagoniste. I colori li mettono i lavori. */

/* ---------- carattere ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../font/archivo-var-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  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: 'Archivo';
  src: url('../font/archivo-var-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- variabili ---------- */
:root {
  --carta:        #f7f5f1;
  --carta-2:      #edeae3;
  --carta-3:      #e2ded5;
  --inchiostro:   #17150f;
  --testo:        #262219;
  --tenue:        #6d6659;
  --linea:        #dcd6ca;
  --accento:      #c9500c;      /* pieni: bianco sopra, 4.53:1 */
  --accento-testo:#b04409;      /* testo su fondo chiaro, 5.25:1 */
  --accento-vivo: #ea6a12;      /* solo su fondo scuro, 5.71:1 */
  --accento-cupo: #a03c06;      /* passaggio del mouse sui pieni, 6.68:1 */
  --evidenza:     #f0e5cf;

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4.5rem;
  --sp-9: 7rem;

  --largo: 1240px;
  --stretto: 68ch;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --testuale: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
              Arial, sans-serif;
}

/* ---------- azzeramento ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@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(--testo);
  font-family: var(--testuale);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, video, iframe { max-width: 100%; display: block; }
img { height: auto; background: var(--carta-3); }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---------- titoli ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 7.5vw, 4.4rem); font-stretch: 92%; letter-spacing: -.025em; }
h2 { font-size: clamp(1.65rem, 4.2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 650; }
h4 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.005em; }
p  { margin: 0 0 var(--sp-4); text-wrap: pretty; }
strong { font-weight: 650; }

.occhiello {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accento-testo);
  margin: 0 0 var(--sp-3);
}
.guida {
  font-family: var(--testuale);
  font-size: clamp(1.05rem, 2.1vw, 1.28rem);
  line-height: 1.55;
  color: var(--tenue);
  max-width: 56ch;
}

/* ---------- impianto ---------- */
.contenitore { width: min(100% - 2.5rem, var(--largo)); margin-inline: auto; }
.stretto { max-width: var(--stretto); }
.sezione { padding-block: var(--sp-8); background: var(--carta); position: relative; }
.sezione--fitta { padding-block: var(--sp-7); }
.scura { background: var(--inchiostro); color: #f2efe9; }
.scura .guida { color: #b3aca0; }
.scura .occhiello { color: var(--accento-vivo); }
.tinta { background: var(--carta-2); }
.riga { border-top: 1px solid var(--linea); }
.scura .riga { border-color: #34302a; }

.salta {
  position: absolute; left: -9999px;
  background: var(--inchiostro); color: #fff; padding: var(--sp-3) var(--sp-4);
  z-index: 200;
}
.salta:focus { left: var(--sp-4); top: var(--sp-4); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 245, 241, .93);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.testata__riga {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 62px;
}
.marchio {
  display: flex; align-items: baseline; gap: .5rem;
  text-decoration: none; font-family: var(--display);
  margin-right: auto;
}
.marchio__sigla {
  font-size: 1.5rem; font-weight: 800; font-stretch: 78%;
  letter-spacing: .02em; color: var(--inchiostro);
}
.marchio__coda {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tenue);
}
@media (max-width: 400px) { .marchio__coda { display: none; } }

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a {
  font-family: var(--display); font-size: .93rem; font-weight: 550;
  text-decoration: none; padding: .5rem .7rem; border-radius: 3px;
  color: var(--testo); white-space: nowrap;
}
.nav a:hover, .nav a:focus-visible { background: var(--carta-3); }
.nav a[aria-current] { color: var(--accento-testo); font-weight: 650; }
/* la voce della pagina corrente e gia arancione, e sul fondo del passaggio
   quell'arancione scendeva a 4,25. Solo per lei, sotto il mouse, si passa
   all'arancione cupo, che sullo stesso fondo sta a 4,98. Le altre voci
   restano color inchiostro: erano a 11,8 e non c'e motivo di abbassarle. */
.nav a[aria-current]:hover, .nav a[aria-current]:focus-visible {
  color: var(--accento-cupo);
}
.nav a.nav__tel {
  font-family: var(--display); font-weight: 650; font-size: .93rem;
  text-decoration: none; padding: .5rem .85rem; border-radius: 3px;
  background: var(--inchiostro); color: #fff; white-space: nowrap;
}
.nav a.nav__tel:hover, .nav a.nav__tel:focus-visible {
  background: var(--accento-cupo); color: #fff;
}

.menu-btn {
  display: none; background: none; border: 1px solid var(--linea);
  border-radius: 3px; padding: .5rem .8rem; font-family: var(--display);
  font-weight: 600; font-size: .9rem; cursor: pointer; align-items: center; gap: .45rem;
  color: var(--testo);
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .08s ease;
}
.menu-btn:hover, .menu-btn:focus-visible {
  background: var(--carta-3); border-color: var(--accento-cupo);
}
.menu-btn span {
  width: 16px; height: 9px; position: relative; display: inline-block;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.menu-btn span::after {
  content: ''; position: absolute; top: 3px; left: 0; right: 0;
  border-top: 2px solid currentColor;
}

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: fixed; inset: 62px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--carta); border-bottom: 1px solid var(--linea);
    padding: var(--sp-2) 1.25rem var(--sp-5);
    max-height: calc(100dvh - 62px); overflow-y: auto;
    display: none;
  }
  .nav[data-aperto] { display: flex; }
  .nav a { padding: .85rem .2rem; border-bottom: 1px solid var(--linea); font-size: 1.05rem; }
  .nav__tel { margin-top: var(--sp-4); text-align: center; padding: .9rem; font-size: 1.05rem; }
}

/* ---------- apertura ---------- */
.apertura { position: relative; background: var(--inchiostro); color: #fff; overflow: hidden; isolation: isolate; }
.apertura__foto { position: absolute; inset: 0; }
.apertura__foto picture { display: block; width: 100%; height: 100%; }
.apertura__foto img { width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pos, center 45%); opacity: var(--op, .85); }
.apertura__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,7,.55) 0%, rgba(10,9,7,.2) 38%, rgba(10,9,7,.8) 100%),
    linear-gradient(100deg, rgba(10,9,7,.86) 0%, rgba(10,9,7,.62) 34%, rgba(10,9,7,.1) 78%, rgba(10,9,7,0) 100%);
}
.apertura__testo {
  position: relative; z-index: 1;
  padding-block: clamp(4rem, 16vw, 8.5rem);
}
.apertura h1 { color: #fff; }
.apertura .guida { color: #ded8cd; }
.apertura .occhiello { color: var(--accento-vivo); }

/* apertura della home, piu alta e con il mosaico */
.apertura--home .apertura__testo { padding-block: clamp(4.5rem, 17vw, 9.5rem); }
.apertura__dove {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-family: var(--display); font-size: .95rem; font-weight: 550;
  color: #ded8cd; margin-top: var(--sp-5); list-style: none; padding: 0;
}
.apertura__dove li { display: flex; align-items: center; gap: .4rem; }
.apertura__dove li::before { content: ''; width: 5px; height: 5px; background: var(--accento-vivo); border-radius: 50%; }

/* ---------- pulsanti -------------------------------------------------------
   Un pulsante sotto il mouse deve dire "ci sei sopra" scurendo o schiarendo
   il proprio colore. Prima faceva `background: currentColor`, cioe si
   riempiva col colore del suo stesso testo: sul fondo scuro diventava un
   rettangolo bianco, e sopra la foto d'apertura il testo ci spariva dentro
   (contrasto 1,09). Adesso il testo non cambia mai colore al passaggio:
   cambiano fondo e bordo, e il contrasto non scende mai sotto 10.

   Passaggio del mouse, fuoco da tastiera e pressione hanno lo stesso
   aspetto: chi naviga con la tastiera vede quello che vede chi usa il mouse.
   Da premuto non entra nessun colore nuovo, il pulsante scende di un pixel,
   quindi il contrasto premuto e quello del passaggio. */
.azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.bottone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 650; font-size: 1rem;
  text-decoration: none; padding: .8rem 1.4rem; border-radius: 3px;
  border: 2px solid transparent; background: var(--accento); color: #fff;
  transition: background-color .15s ease, border-color .15s ease,
              transform .08s ease;
}
/* pieno: scurisce il proprio arancione */
.bottone:hover, .bottone:focus-visible { background: var(--accento-cupo); }

/* vuoto su fondo chiaro: si sporca d'inchiostro, il bordo prende l'accento */
.bottone--vuoto { background: transparent; border-color: currentColor; color: inherit; }
.bottone--vuoto:hover, .bottone--vuoto:focus-visible {
  background: rgba(38, 34, 25, .10);
  border-color: var(--accento-cupo);
}
/* vuoto su fondo scuro pieno: si schiarisce, il bordo diventa bianco */
.scura .bottone--vuoto:hover, .scura .bottone--vuoto:focus-visible,
.evidenza .bottone--vuoto:hover, .evidenza .bottone--vuoto:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
}
/* vuoto sopra la foto d'apertura: si riempie d'inchiostro. Al 90% il fondo
   resta scuro anche se sotto capitasse la parte piu chiara di una foto, e il
   contrasto del testo bianco non scende sotto 13,9 qualunque sia la foto. */
.apertura .bottone--vuoto:hover, .apertura .bottone--vuoto:focus-visible {
  background: rgba(23, 21, 15, .9);
  border-color: #fff;
}
/* chiaro dentro il blocco scuro: scurisce il proprio bianco */
.bottone--chiaro { background: #fff; color: var(--inchiostro); }
.bottone--chiaro:hover, .bottone--chiaro:focus-visible { background: var(--carta-3); }

/* premuto: nessun colore nuovo, solo un pixel piu giu */
.bottone:active, .altro button:active, .indice-sezioni a:active,
.nav a:active, .menu-btn:active, .lente__x:active { transform: translateY(1px); }
.lente__prec:active, .lente__succ:active { transform: translateY(calc(-50% + 1px)); }

/* ---------- mosaico delle categorie ---------- */
.categorie { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 520px)  { .categorie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .categorie { grid-template-columns: repeat(4, 1fr); } }
.categorie--tre { grid-template-columns: 1fr; }
@media (min-width: 640px) { .categorie--tre { grid-template-columns: repeat(3, 1fr); } }
.categoria {
  position: relative; display: block; text-decoration: none; color: #fff;
  border-radius: 4px; overflow: hidden; background: var(--inchiostro);
  aspect-ratio: 4/5;
}
@media (min-width: 700px) { .categoria { aspect-ratio: 3/4; } }
.categoria img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease, opacity .3s ease; opacity: .78;
}
.categoria:hover img { transform: scale(1.05); opacity: .62; }
.categoria__testo {
  position: absolute; inset: auto 0 0 0; padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg, transparent, rgba(10,9,7,.88) 55%);
}
.categoria__testo h3 { font-size: 1.35rem; font-weight: 700; }
.categoria__testo p {
  margin: .35rem 0 0; font-size: .92rem; color: #cfc9be; line-height: 1.45;
}
.categoria__freccia {
  display: inline-block; margin-top: var(--sp-3);
  font-family: var(--display); font-weight: 650; font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accento-vivo);
}

/* ---------- galleria ---------- */
.galleria { columns: 2; column-gap: var(--sp-3); }
@media (min-width: 640px)  { .galleria { columns: 3; column-gap: var(--sp-4); } }
@media (min-width: 1024px) { .galleria { columns: 4; } }
.galleria--larga { columns: 1; }
@media (min-width: 640px)  { .galleria--larga { columns: 2; } }
@media (min-width: 1024px) { .galleria--larga { columns: 3; } }

.scatto {
  break-inside: avoid; margin: 0 0 var(--sp-3);
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; text-align: left; position: relative;
  color: inherit; text-decoration: none;
}
@media (min-width: 640px) { .scatto { margin-bottom: var(--sp-4); } }
.scatto img {
  width: 100%; border-radius: 3px;
  transition: filter .25s ease, transform .25s ease;
}
.scatto:hover img { filter: brightness(1.06) saturate(1.05); }
.scatto__dida {
  font-family: var(--display); font-size: .82rem; line-height: 1.35;
  color: var(--tenue); margin-top: .45rem; display: block;
}
.scatto__dida b { color: var(--testo); font-weight: 600; display: block; }
.scatto__dida i { font-style: normal; color: var(--accento-testo); }

/* mostra il resto */
.altro { text-align: center; margin-top: var(--sp-5); }
.altro button {
  font-family: var(--display); font-weight: 650; font-size: .95rem;
  background: none; border: 2px solid var(--linea); border-radius: 3px;
  padding: .75rem 1.5rem; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .08s ease;
}
.altro button:hover, .altro button:focus-visible {
  background: rgba(38, 34, 25, .08);
  border-color: var(--accento-cupo); color: var(--accento-cupo);
}
.galleria [hidden] { display: none; }

/* ---------- sezione interna ---------- */
.intestazione-sezione {
  display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6);
  align-items: end;
}
@media (min-width: 860px) {
  .intestazione-sezione { grid-template-columns: 1fr auto; }
}
.conteggio {
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
  white-space: nowrap;
}

/* ---------- progetto di riqualificazione ---------- */
.progetto {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--linea);
}
.progetto__testa { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.progetto__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-family: var(--display); font-size: .85rem; font-weight: 550;
  color: var(--tenue); align-items: center;
}
.luogo { display: inline-flex; align-items: center; gap: .35rem; color: var(--testo); }
.luogo::before {
  content: ''; width: 8px; height: 8px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--accento-testo); flex: none;
}
.progetto__nota { color: var(--tenue); font-size: .97rem; max-width: 62ch; }

/* progetto in evidenza */
.evidenza {
  background: var(--inchiostro); color: #f2efe9; border-radius: 5px;
  padding: clamp(1.5rem, 4vw, var(--sp-7));
}
.evidenza h2 { color: #fff; }
.evidenza .occhiello { color: var(--accento-vivo); }
.evidenza .guida { color: #b8b1a4; }
.tappe { display: grid; gap: var(--sp-4); margin-top: var(--sp-6);
  grid-template-columns: 1fr; }
@media (min-width: 560px) { .tappe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .tappe { grid-template-columns: repeat(4, 1fr); } }
.tappa { border-top: 2px solid #3a352d; padding-top: var(--sp-3); }
.tappa__n {
  font-family: var(--display); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; color: var(--accento-vivo); text-transform: uppercase;
}
.tappa h3 { color: #fff; font-size: 1.15rem; margin-top: .25rem; }
.tappa p { font-size: .92rem; color: #b8b1a4; margin: .5rem 0 0; }
.tappa img { border-radius: 3px; margin-top: var(--sp-3); }
.tappa__foto { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* ---------- il dato che manca ----------------------------------------------
   Un dato che non c'e non sparisce: resta la sua etichetta, e al posto del
   valore c'e una riga tratteggiata. Non e testo, e un vuoto disegnato: si
   vede subito che li dentro qualcosa deve ancora essere scritto, e non si
   confonde con una parola vera. */
.vuoto {
  display: inline-block;
  width: 8.5rem; max-width: 100%; height: .72em;
  vertical-align: -.06em;
  border-bottom: 2px dashed #b39a63;
  background: linear-gradient(var(--evidenza), var(--evidenza)) bottom / 100% .55em no-repeat;
  opacity: .85;
}
.vuoto--testo {
  display: block; width: 100%; height: auto; min-height: 6rem;
  margin-top: .4rem;
  border: 2px dashed #b39a63; border-radius: 3px;
  background-color: var(--evidenza);
  background-image:
    repeating-linear-gradient(#0000 0 1.55rem, #b39a63 1.55rem 1.62rem);
  background-position: 0 .5rem;
  opacity: .85;
}
.scura .vuoto, .evidenza .vuoto {
  border-bottom-color: #8a7440;
  background-image: linear-gradient(#2b2415, #2b2415);
  opacity: 1;
}
.scura .vuoto--testo, .evidenza .vuoto--testo {
  border-color: #6d5a2e; background-color: #221d12;
  background-image:
    repeating-linear-gradient(#0000 0 1.55rem, #6d5a2e 1.55rem 1.62rem);
  opacity: 1;
}

/* una riga "etichetta + dato", dove il dato puo essere pieno o vuoto */
.dato { margin: .55rem 0; }
.dato .vuoto { margin-left: .1rem; }
.scheda-dati {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--linea);
}
.scheda-dati--scura { border-top-color: #45403a; }

/* ---------- video ---------- */
.video-elenco {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.video-elenco--uno { max-width: 620px; }
.video {
  position: relative; aspect-ratio: 16/9; border: 0; padding: 0;
  background: var(--inchiostro); border-radius: 4px; overflow: hidden;
  cursor: pointer; width: 100%; display: block; text-decoration: none;
}
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s; }
.video:hover img { opacity: .65; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 44px; border-radius: 10px; background: rgba(20,18,14,.82);
  display: grid; place-items: center; transition: background .2s;
}
.video:hover .video__play { background: var(--accento); }
.video__play::after {
  content: ''; border-left: 15px solid #fff; border-top: 9px solid transparent;
  border-bottom: 9px solid transparent; margin-left: 4px;
}
.video__nome {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  font-family: var(--display); font-size: .9rem; font-weight: 600; color: #fff;
  text-align: left;
  background: linear-gradient(180deg, transparent, rgba(10,9,7,.85));
}
.video[data-attivo] .video__play, .video[data-attivo] .video__nome { display: none; }

/* ---------- contatti ---------- */
.contatti-riga {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.contatto__etichetta {
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tenue);
  margin-bottom: .3rem;
}
.contatto__valore {
  font-family: var(--display); font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 650; text-decoration: none; line-height: 1.25;
  word-break: break-word; display: block;
}
a.contatto__valore:hover { color: var(--accento-testo); }
.scura .contatto__etichetta { color: #9c948a; }

/* ---------- libri ---------- */
.libro {
  display: grid; gap: var(--sp-5); padding-block: var(--sp-6);
  border-top: 1px solid var(--linea);
}
@media (min-width: 760px) { .libro { grid-template-columns: 260px 1fr; gap: var(--sp-7); } }
.libro img { border-radius: 3px; }

/* ---------- dietro le quinte ---------- */
.quinte {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.quinte figure { margin: 0; }
.quinte img { border-radius: 3px; aspect-ratio: 1; object-fit: cover; width: 100%; }

/* ---------- richiamo finale ---------- */
.richiamo { text-align: center; }
.richiamo .azioni { justify-content: center; }
.richiamo .guida { margin-inline: auto; }

/* ---------- pie' di pagina ---------- */
.pie { background: var(--inchiostro); color: #cbc4b8; padding-block: var(--sp-7) var(--sp-5); }
.pie__griglia {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pie h4 {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: #8d8578; margin-bottom: var(--sp-3);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .45rem; font-size: .95rem; }
.pie a { color: #e7e2d9; text-decoration: none; overflow-wrap: anywhere; }
.pie a:hover { color: var(--accento-vivo); text-decoration: underline; }
.pie__fondo {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid #34302a; font-size: .84rem; color: #8d8578;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
}

/* ---------- lente ---------- */
.lente {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(12, 11, 9, .95);
  display: none; place-items: center;
  padding: clamp(.5rem, 3vw, 2.5rem);
}
.lente[data-aperta] { display: grid; }
.lente__figura { margin: 0; max-width: 100%; max-height: 100%; display: grid; gap: var(--sp-3); }
.lente img {
  max-width: 100%; max-height: 78dvh; width: auto; margin-inline: auto;
  object-fit: contain; border-radius: 3px; background: none;
}
.lente figcaption {
  font-family: var(--display); font-size: .92rem; color: #ded8cd;
  text-align: center; max-width: 70ch; margin-inline: auto;
}
.lente figcaption i { font-style: normal; color: var(--accento-vivo); }
.lente__x, .lente__prec, .lente__succ {
  position: absolute; background: rgba(255,255,255,.1); border: 0; color: #fff;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
}
.lente__x:hover, .lente__x:focus-visible,
.lente__prec:hover, .lente__prec:focus-visible,
.lente__succ:hover, .lente__succ:focus-visible { background: var(--accento-cupo); }
.lente__x { top: 1rem; right: 1rem; }
.lente__prec { left: 1rem; top: 50%; transform: translateY(-50%); }
.lente__succ { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lente__prec { left: .5rem; } .lente__succ { right: .5rem; }
}
body[data-bloccato] { overflow: hidden; }

/* ---------- briciole ---------- */
.briciole {
  font-family: var(--display); font-size: .82rem; color: var(--tenue);
  padding-block: var(--sp-4) 0;
}
.briciole a { text-decoration: none; }
.briciole a:hover { color: var(--accento-testo); text-decoration: underline; }
.briciole span { margin-inline: .4rem; opacity: .5; }

/* ---------- indice di pagina ---------- */
.indice-sezioni {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-5); padding: 0; list-style: none;
}
.indice-sezioni a {
  font-family: var(--display); font-size: .88rem; font-weight: 600;
  text-decoration: none; padding: .45rem .9rem;
  border: 1px solid var(--linea); border-radius: 100px;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .08s ease;
}
.indice-sezioni a:hover, .indice-sezioni a:focus-visible {
  background: rgba(38, 34, 25, .08);
  border-color: var(--accento-cupo); color: var(--accento-cupo);
}
.apertura .indice-sezioni a { border-color: rgba(255,255,255,.35); color: #fff; }
.apertura .indice-sezioni a:hover, .apertura .indice-sezioni a:focus-visible {
  background: var(--accento-cupo); border-color: var(--accento-cupo); color: #fff;
}

/* ---------- riquadro dei numeri ---------- */
.numeri {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .numeri { grid-template-columns: repeat(4, 1fr); } }
.numeri > div {
  border-top: 3px solid var(--accento);
  padding-top: var(--sp-3);
}
.numeri b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.numeri span {
  display: block; margin-top: var(--sp-1);
  font-family: var(--display);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tenue);
}

/* ---------- etichetta di un dato, al posto dei due punti ---------- */
.etichetta {
  font-family: var(--display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue);
  margin-right: .3em;
}
.sezione.scura .etichetta, .evidenza .etichetta { color: #a49c90; }