/*
Theme Name: Studio Legale Sabatino
Theme URI: https://studiolegalesabatino.it
Author: ALCA S.r.l.
Description: Tema su misura per lo studio dell'Avv. Pia Sabatino. Quattro pagine, sito esplorativo per campi di competenza, apertura in video con scorrimento a due velocita'. Titoli in maiuscoletto.
Version: 4.9.5
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietaria — uso riservato al committente
Text Domain: sabatino
*/
/* Studio Legale Sabatino — versione 3.

   Terza impostazione grafica. La struttura a quattro pagine e i contenuti
   restano quelli approvati: cambia solo il vestito.

   Riferimento indicato dal committente: avvocatorobertoviola.eu.
   Cosa ne ho preso, e perche':

     - il maiuscoletto nei titoli (Cormorant SC). E' il tratto che rende
       quel sito riconoscibile a colpo d'occhio, molto piu' della foto.
     - la composizione centrata, con un filetto breve sotto ogni titolo.
     - il fondo chiarissimo, bianco alternato a un grigio caldo, invece
       della pietra calda di prima.
     - la fascia nera a tutta larghezza con l'invito al contatto.
     - il taglio diagonale fra la fotografia di apertura e la pagina.

   Cosa NON ho preso, di proposito:

     - il testo giustificato. Su colonne strette apre voragini fra le
       parole e l'occhio perde la riga: e' l'errore piu' visibile di
       quel sito.
     - il corpo del testo a 13-14px in grigio chiaro. Chi arriva su un
       sito di avvocati spesso ha una certa eta' e legge dal telefono.
     - la bilancia della giustizia.

   Il marchio approvato resta con i suoi due colori, petrolio e ottone,
   che qui non fanno piu' da tavolozza ma da accento: il filetto sotto i
   titoli, i collegamenti, i bordi attivi. */

/* ====================================================================
   1. Tavolozza, misure e tempi
   ==================================================================== */

:root {
  /* Terreno */
  --bianco:      #FFFFFF;
  --grigio:      #F1EFEB;
  --grigio-2:    #E4E1DA;
  --nero:        #101112;

  /* Inchiostri */
  --ink:         #26282C;
  --ink-medio:   #575A60;
  --ink-tenue:   #8A8E94;
  --su-nero:     #F2F0EC;
  --su-nero-2:   #A9A7A1;

  /* Accenti, ereditati dal marchio approvato */
  --petrolio:    #14424F;
  --petrolio-ch: #1D5A6B;
  --ottone:      #9C7C4A;

  --bordo:       color-mix(in srgb, var(--ink) 13%, transparent);
  --bordo-tenue: color-mix(in srgb, var(--ink) 7%, transparent);

  /* Caratteri */
  --display: 'Cormorant SC', 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --serif:   'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Misure */
  --largo:   1200px;
  --stretto: 680px;
  --gutter:  clamp(20px, 5vw, 64px);

  /* Tempi e curve, dalla revisione delle animazioni gia' validata. */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press:  160ms;
  --dur-fast:   180ms;
  --dur-ui:     220ms;
  --dur-reveal: 320ms;
}

/* ====================================================================
   2. Azzeramento e basi
   ==================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bianco);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(17px, 0.5vw + 15.6px, 18.5px);
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* I titoli sono tutti in maiuscoletto. La spaziatura in piu' serve:
   il maiuscoletto ha lettere piu' larghe e tende a impastarsi. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.028em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: color-mix(in srgb, var(--ottone) 28%, transparent); }

:focus-visible {
  outline: 2px solid var(--petrolio);
  outline-offset: 3px;
  border-radius: 2px;
}

.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Etichetta minuta sopra i titoli. */
.etichetta {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-tenue);
  margin: 0 0 1.1em;
}
.etichetta--chiara { color: var(--su-nero-2); }

/* Filetto d'ottone sotto il titolo. Centrato per impostazione: la
   composizione di questa versione e' centrata. */
.filo {
  width: 52px;
  height: 2px;
  background: var(--ottone);
  border: 0;
  margin: 0 auto 1.5em;
}
.filo--sinistra { margin-left: 0; }

/* ====================================================================
   3. Impaginazione
   ==================================================================== */

.contenitore {
  width: 100%;
  max-width: var(--largo);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.colonna { max-width: var(--stretto); }
.colonna--centro { margin-inline: auto; }

.sezione { padding-block: clamp(70px, 10vw, 140px); }
.sezione--fitta { padding-block: clamp(52px, 7vw, 96px); }
.sezione--grigia { background: var(--grigio); }
.sezione--nera { background: var(--nero); color: var(--su-nero); }
.sezione--nera h1, .sezione--nera h2, .sezione--nera h3 { color: var(--su-nero); }
.sezione--centrata { text-align: center; }

.titolo-sezione {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  margin-bottom: 0.55em;
}
.occhiello {
  font-size: 1.04rem;
  color: var(--ink-medio);
  max-width: 56ch;
}
.sezione--centrata .occhiello { margin-inline: auto; }
.sezione--nera .occhiello { color: var(--su-nero-2); }

/* ====================================================================
   4. Testata
   ==================================================================== */

/* Sopra la fotografia di apertura la testata e' trasparente e bianca;
   appena si scorre diventa solida. E' il comportamento del riferimento,
   ed e' anche il piu' onesto: finche' sei sull'immagine la testata non
   deve tagliarla in due. */
.testata {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  transition: background-color var(--dur-ui) var(--ease-out),
              box-shadow var(--dur-ui) var(--ease-out);
}
.testata__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
}

/* Sopra la fotografia la testata non ha fondo. Il testo resta scuro:
   le immagini di apertura sono chiare e sotto la testata c'e' la parte
   piu' luminosa del velo. Prima era bianco, quando le fotografie erano
   in penombra. */
body[data-apertura='si'] .testata:not([data-staccata='si']) .lockup__nome {
  color: var(--ink);
}
body[data-apertura='si'] .testata:not([data-staccata='si']) .navigazione a {
  color: var(--ink-medio);
}

/* Stato staccato: fondo pieno. */
.testata[data-staccata='si'] {
  background: color-mix(in srgb, var(--bianco) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  box-shadow: 0 1px 0 var(--bordo-tenue);
}

/* Pagine senza fotografia di apertura (contatti, privacy): la testata e'
   fissa, quindi senza questo spazio coprirebbe il titolo. E qui non c'e'
   niente di scuro sotto, percio' e' solida fin dal primo pixel. */
body:not([data-apertura='si']) .testata {
  background: color-mix(in srgb, var(--bianco) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  box-shadow: 0 1px 0 var(--bordo-tenue);
}
body:not([data-apertura='si']) main { padding-top: 96px; }

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 6px 4px;
  margin-left: -4px;
  border-radius: 3px;
}
/* Il marchio, ingrandito su richiesta. Scala con lo schermo invece di
   restare fisso: a 52px su desktop ha peso, e sul telefono scende a 40
   perche' oltre quella misura mangerebbe lo spazio del nome.

   Il "flex: 0 0 auto" e' quello che gli impedisce di restringersi quando
   la riga della testata si fa stretta: senza, sul telefono il marchio
   si schiacciava di un pixel. Poco, ma un cerchio schiacciato si vede. */
.lockup__segno {
  width: clamp(40px, 4.4vw, 52px);
  height: clamp(40px, 4.4vw, 52px);
  flex: 0 0 auto;
}
.lockup__nome {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.98rem, 2.6vw, 1.2rem);
  letter-spacing: 0.07em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.navigazione { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.navigazione a {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-medio);
  padding: 9px 1px;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.navigazione a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 1px;
  background: var(--ottone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-out);
}
.navigazione a[aria-current='page']::after { transform: scaleX(1); }

.apri-menu {
  display: none;
  background: none;
  border: 1px solid var(--bordo);
  border-radius: 3px;
  padding: 9px 13px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.apri-menu:active { transform: scale(0.97); }

@media (max-width: 880px) {
  .navigazione {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bianco);
    border-bottom: 1px solid var(--bordo);
    padding: 6px var(--gutter) 22px;
  }
  .navigazione[data-aperta='si'] { display: flex; }
  /* Nel pannello aperto il testo torna scuro anche sopra la foto. */
  .navigazione[data-aperta='si'] a { color: var(--ink-medio) !important; }
  .navigazione a { padding: 15px 0; font-size: 0.82rem; border-top: 1px solid var(--bordo-tenue); }
  .navigazione a::after { display: none; }
  .apri-menu { display: inline-block; }
}

/* ====================================================================
   5. Apertura
   ==================================================================== */

/* Apertura chiara.

   Prima la fotografia era in penombra e il testo sopra era bianco, su un
   velo scuro. Con le immagini nuove — stanze piene di luce — quella
   ricetta tirava tutto verso il cupo, che e' esattamente quello che non
   si voleva. Qui e' rovesciata: velo bianco, testo scuro. */
.eroe {
  position: relative;
  isolation: isolate;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink);
  overflow: hidden;
}
.eroe--stretto { min-height: min(56vh, 460px); }

.eroe__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Il video di apertura. Il poster e' il primo fotogramma del video
   stesso, quindi il passaggio da fermo a in movimento non si vede: non
   c'e' nessun salto, l'immagine semplicemente comincia a respirare. */
.eroe__video { background: var(--grigio); }

/* Scorrimento a due velocita'.
   L'immagine si muove piu' lentamente della pagina e il testo sale e
   svanisce. Sono trasformazioni e opacita', cioe' le due sole cose che
   il browser sa animare senza rifare il calcolo della pagina a ogni
   fotogramma: si puo' scorrere veloce quanto si vuole senza scatti.

   I valori li scrive il JavaScript in queste due variabili; se il
   JavaScript non parte restano a zero e la pagina e' semplicemente
   ferma, che e' un difetto accettabile. */
.eroe__foto {
  transform: translate3d(0, var(--scorri, 0px), 0);
}
.eroe__testo {
  opacity: var(--dissolvi, 1);
  transform: translate3d(0, var(--sale, 0px), 0);
}

/* Velo bianco, ma non uniforme.

   Una patina piatta sopra tutta l'immagine la spegnerebbe: resterebbe
   una fotografia slavata. Qui la luce e' concentrata al centro, dove sta
   il testo, e si dissolve verso i bordi: al centro il testo scuro ha il
   contrasto che serve, ai lati la fotografia resta viva. */
.eroe::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 74% 58% at 50% 48%,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.62) 48%,
      rgba(255, 255, 255, 0.10) 82%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0) 68%,
      rgba(255, 255, 255, 0.42) 100%);
}

/* Il taglio diagonale. E' il gesto piu' riconoscibile del riferimento:
   la fotografia non finisce con una riga dritta ma con una diagonale,
   e la pagina sembra scivolarle sotto. Un triangolo del colore della
   sezione seguente, ritagliato con clip-path: nessuna immagine, nessun
   peso, e si adatta da solo a qualsiasi larghezza. */
.eroe::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(38px, 5.5vw, 86px);
  background: var(--bianco);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 0;
}
.eroe--su-grigio::after { background: var(--grigio); }

.eroe__testo {
  position: relative;
  z-index: 1;
  padding-block: clamp(96px, 12vw, 150px) clamp(80px, 10vw, 130px);
}
.eroe__titolo {
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  letter-spacing: 0.035em;
  margin-bottom: 0.4em;
  /* Alone bianco anziche' ombra scura: stacca le lettere anche se
     capitano sopra la pianta o la libreria, senza sporcare. */
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.85);
}
.eroe__materie {
  font-family: var(--sans);
  font-size: clamp(0.82rem, 1.3vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-medio);
  max-width: 52ch;
  margin-inline: auto;
}
.eroe .etichetta { color: var(--ink-tenue); }

/* Apertura col marchio inciso nella carta.
   Nel video il monogramma sta a sinistra (dal 18% al 50% della larghezza):
   il titolo passa a destra, sulla carta libera, e il velo bianco si sposta
   con lui, cosi' il segno resta scuro e nitido. */
.eroe--marchio { justify-content: flex-end; }
.eroe--marchio .eroe__testo {
  margin-inline: 0;
  width: 52%;
  max-width: none;
  padding-inline: 2vw 5vw;
}
.eroe--marchio::before {
  background:
    radial-gradient(ellipse 46% 62% at 76% 48%,
      rgba(255, 255, 255, 0.80) 0%,
      rgba(255, 255, 255, 0.52) 52%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0) 26%);
}

/* Schermi larghi: con l'altezza limitata a 760 px il video, ingrandito per
   coprire la larghezza, perdeva la parte alta e il monogramma finiva sotto
   la testata. L'altezza segue la larghezza, con il tetto dell'88% dello
   schermo. */
@media (min-width: 861px) {
  .eroe--marchio { min-height: min(88vh, 56vw); }
}

/* Telefono: il ritaglio centrale taglierebbe la P. Il video occupa la parte
   alta e sfuma nel grigio della pagina; il titolo sta sotto, sul grigio,
   e il monogramma resta intero. */
@media (max-width: 860px) {
  .eroe--marchio {
    align-items: flex-end;
    justify-content: center;
    background: var(--grigio);
  }
  .eroe--marchio .eroe__foto {
    bottom: auto;
    height: 64%;
    object-position: 15% 50%;
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
            mask-image: linear-gradient(#000 72%, transparent);
  }
  .eroe--marchio .eroe__testo {
    width: 100%;
    padding-inline: var(--gutter);
    padding-block: 0 clamp(70px, 14vw, 110px);
  }
  .eroe--marchio::before { background: none; }
}

/* ====================================================================
   6. Le due porte
   ==================================================================== */

.porte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(28px, 3.4vw, 46px);
  margin-top: clamp(40px, 5vw, 62px);
  text-align: left;
}

.porta {
  display: flex;
  flex-direction: column;
  background: var(--bianco);
  border: 1px solid var(--bordo-tenue);
  overflow: hidden;
  transition: box-shadow var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out);
}

.porta__foto {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  transition: transform 460ms var(--ease-out);
}
.porta__corpo { padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; flex: 1; }
.porta__titolo { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 0.6em; }
.porta__testo { color: var(--ink-medio); font-size: 0.97rem; margin-bottom: 1.5em; }

.situazioni {
  list-style: none;
  margin: 0 0 1.9em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.situazioni li { display: contents; }
.situazioni a {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-medio);
  background: var(--grigio);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 15px;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.sezione--grigia .situazioni a { background: var(--grigio-2); }
.situazioni a:active { transform: scale(0.97); }

.porta__vai {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--petrolio);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
}
.porta__vai svg { width: 15px; height: 15px; transition: transform var(--dur-ui) var(--ease-out); }

/* ====================================================================
   7. Banda fotografica e voci esplorabili
   ==================================================================== */

.foto-materia {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  margin-bottom: clamp(30px, 3.6vw, 48px);
}
.ancora { scroll-margin-top: 96px; }

.voci {
  border-top: 1px solid var(--bordo-tenue);
  margin-top: clamp(34px, 4vw, 52px);
  text-align: left;
}

.voce { border-bottom: 1px solid var(--bordo-tenue); scroll-margin-top: 100px; }
.voce > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 2.4vw, 28px) 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.voce > summary::-webkit-details-marker { display: none; }
.voce__nome {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 1.8vw, 1.32rem);
}

/* Segno di apertura: due filetti da 1.5px. Quello verticale non sparisce
   di colpo, si accorcia ruotando fino a coincidere con l'orizzontale. */
.voce__segno { position: relative; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 5px; }
.voce__segno::before, .voce__segno::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: var(--ink-tenue);
  border-radius: 1px;
  transform: translateY(-50%);
  transition: transform var(--dur-ui) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.voce__segno::after { transform: translateY(-50%) rotate(90deg); }
.voce[open] .voce__segno::after { transform: translateY(-50%) rotate(90deg) scaleX(0); }
.voce[open] .voce__segno::before { background: var(--ottone); }

.voce__corpo {
  padding-bottom: clamp(22px, 2.6vw, 34px);
  max-width: 64ch;
  color: var(--ink-medio);
}
.voce__corpo p { font-size: 0.98rem; }
.voce__corpo ul { margin: 0 0 1.2rem 1.2em; padding: 0; list-style: disc; font-size: 0.98rem; }
.voce__corpo li { margin-bottom: 0.35em; }
.voce__etichetta {
  margin: 1.4rem 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.74rem !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tenue);
}
.voce__corpo .voce__etichetta:first-child { margin-top: 0.4rem; }

/* ====================================================================
   8. Passaggi
   ==================================================================== */

.passi {
  counter-reset: passo;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(30px, 3.6vw, 54px);
  margin-top: clamp(40px, 4.5vw, 60px);
  list-style: none;
  padding: 0;
}
.passo { counter-increment: passo; }
.passo::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ottone);
  margin-bottom: 12px;
}
.passo h3 { font-size: 1.16rem; margin-bottom: 0.55em; }
.passo p { font-size: 0.95rem; color: var(--ink-medio); margin: 0; }
.sezione--nera .passo p { color: var(--su-nero-2); }

/* ====================================================================
   9. Bottoni
   ==================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid var(--petrolio);
  border-radius: 2px;
  background: var(--petrolio);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--vuoto { background: transparent; color: var(--petrolio); }
/* Sul nero: contorno sottile e chiaro, come nel riferimento. */
.sezione--nera .btn,
.btn--chiaro {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}

/* ====================================================================
   10. Contatti e modulo
   ==================================================================== */

.recapiti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(26px, 3.2vw, 44px);
  margin-top: clamp(34px, 4vw, 52px);
  text-align: left;
}
.recapito dt {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-tenue);
  margin-bottom: 10px;
}
.recapito dd { margin: 0; font-size: 1rem; }
.recapito dd a { text-decoration-color: var(--bordo); text-underline-offset: 3px; }

.modulo { display: grid; gap: 18px; max-width: 580px; margin: clamp(34px, 4vw, 52px) auto 0; text-align: left; }
.campo { display: grid; gap: 7px; }
.campo label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-medio);
}
.campo input, .campo textarea, .campo select {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 2px;
  padding: 13px 15px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.campo textarea { min-height: 136px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--petrolio); }
.campo__nota { font-family: var(--sans); font-size: 0.76rem; color: var(--ink-tenue); }

/* ====================================================================
   11. Piede
   ==================================================================== */

.piede {
  background: var(--nero);
  color: var(--su-nero-2);
  padding-block: clamp(54px, 6.5vw, 84px) 30px;
  font-size: 0.88rem;
}
.piede__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(30px, 4vw, 58px);
}
.piede h3 {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--su-nero);
  margin-bottom: 15px;
}
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.piede a { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.piede__coda {
  margin-top: clamp(36px, 4vw, 58px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #7C7A75;
}

/* ====================================================================
   12. Segnaposto e avvisi
   ==================================================================== */

/* Marca in giallo i dati che nessuno ci ha ancora dato. Rende
   impossibile pubblicare per sbaglio un dato inventato: se e' giallo,
   manca. Sparisce da solo quando il testo viene sostituito. */
.ph {
  background: #FBEFC2;
  color: #6B5312;
  border-bottom: 1px dashed #C9A227;
  padding: 0 3px;
  border-radius: 2px;
  font-style: normal;
}

.avviso {
  border-left: 3px solid var(--ottone);
  background: color-mix(in srgb, var(--ottone) 9%, transparent);
  padding: 18px 22px;
  margin: 2.4rem 0;
  font-size: 0.94rem;
  color: var(--ink-medio);
  text-align: left;
}
.avviso strong { color: var(--ink); }

/* Prosa lunga dei documenti. */
.documento { text-align: left; }
.documento h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 3.2rem; }
.documento h2:first-of-type { margin-top: 0; }
.documento h3 { font-size: 1.1rem; margin: 2.4rem 0 0.7rem; }
.documento p { font-size: 0.98rem; }
.documento > p:first-child { color: var(--ink-tenue); font-size: 0.85rem; }
.documento .filo { margin-left: 0; }

/* ====================================================================
   13. Comparse allo scorrimento
   ==================================================================== */

[data-comparsa] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
[data-comparsa='fatto'] { opacity: 1; transform: none; }
[data-comparsa]:nth-child(2) { transition-delay: 60ms; }
[data-comparsa]:nth-child(3) { transition-delay: 120ms; }

/* ====================================================================
   14. Puntatore fine e movimento ridotto
   ==================================================================== */

@media (hover: hover) and (pointer: fine) {
  .navigazione a:hover { color: var(--ink); }
  .navigazione a:hover::after { transform: scaleX(1); }
  body[data-apertura='si'] .testata:not([data-staccata='si']) .navigazione a:hover { color: #FFFFFF; }
  .lockup:hover .lockup__nome { color: var(--petrolio); }
  body[data-apertura='si'] .testata:not([data-staccata='si']) .lockup:hover .lockup__nome { color: #FFFFFF; }
  .porta:hover { border-color: var(--bordo); box-shadow: 0 18px 44px -30px rgba(16, 17, 18, 0.55); }
  .porta:hover .porta__foto { transform: scale(1.03); }
  .situazioni a:hover { background: transparent; border-color: var(--petrolio); color: var(--petrolio); }
  .porta__vai:hover svg { transform: translateX(4px); }
  .voce > summary:hover { color: var(--petrolio); }
  .voce > summary:hover .voce__segno::before,
  .voce > summary:hover .voce__segno::after { background: var(--petrolio); }
  .btn:hover { background: var(--petrolio-ch); border-color: var(--petrolio-ch); color: #FFFFFF; }
  .btn--vuoto:hover { background: color-mix(in srgb, var(--petrolio) 8%, transparent); }
  .sezione--nera .btn:hover, .btn--chiaro:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--nero); }
  .piede a:hover { color: var(--su-nero); }
  .apri-menu:hover { background: var(--grigio); }
}

/* Movimento ridotto non vuol dire nessun movimento: vuol dire nessuno
   spostamento. Le dissolvenze restano, perche' servono a capire che
   qualcosa e' cambiato. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-comparsa] { transform: none; transition-duration: 200ms; }
  .porta__foto, .porta:hover .porta__foto { transform: none; }
  .porta__vai svg, .porta__vai:hover svg { transform: none; }
  .btn:active, .situazioni a:active, .apri-menu:active { transform: none; }
  .voce__segno::before, .voce__segno::after { transition-duration: 1ms; }
}

/* ====================================================================
   15. Il sito e' chiaro, sempre
   ==================================================================== */

/* C'era una versione scura che si accendeva da sola quando il sistema
   dell'utente e' impostato su scuro. E' stata tolta su richiesta del
   committente, ed era la richiesta giusta: chi ha il computer in tema
   scuro — cioe' molte persone — vedeva un sito nero anche dopo che le
   fotografie erano diventate luminose, e l'impressione complessiva
   restava quella di un luogo cupo.

   Questa riga dice al browser che la pagina e' chiara e basta: serve
   perche' altrimenti i campi del modulo, le barre di scorrimento e i
   menu a tendina verrebbero comunque disegnati scuri dal sistema, e
   resterebbero due macchie nere in mezzo al bianco. */
:root { color-scheme: light; }