/* ============================================================================
   SITE — Ristorante Mediterraneo, Lecce
   ----------------------------------------------------------------------------
   Impianto `racconto`: sezioni in sequenza, una idea per schermata, alternanza
   fra fondo bianco e fondo petrolio chiarissimo, e un solo pannello scuro che
   spezza il ritmo a metà pagina.

   Forma `mista`: contenitori a spigolo vivo (--raggio: 0), elementi
   interattivi a pillola (--raggio-interattivo: 999px). È anche l'unica cosa
   che tengo dei loro pulsanti, che erano già a pillola.

   Tipografia `contrasto-drastico`: fra il corpo (15–17px) e i titoli di
   sezione (36–72px) non c'è nessun livello intermedio morbido. L'accento va
   sui titoli e sui prezzi; il corpo del testo resta in un neutro, sempre.
   ========================================================================= */

/* ——— Fondamenta ————————————————————————————————————————————————————————— */

h1, h2, h3 { color: var(--accento); }
.su-scuro h1, .su-scuro h2, .su-scuro h3 { color: var(--su-scuro); }

h4 { font-weight: 700; }

strong { font-weight: 700; }

::selection { background: var(--accento); color: var(--su-accento); }

.sezione--chiara { background: var(--fondo); }
.sezione--alt { background: var(--fondo-alt); }

/* L'occhiello resta in un neutro di proposito: è testo piccolo, e un accento
   saturo a corpo piccolo passa il contrasto e resta illeggibile lo stesso.
   Il colore del marchio lo porta il filetto, non l'inchiostro. */
.occhiello {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.occhiello::before {
  content: '';
  width: 2.25rem;
  height: 2px;
  flex-shrink: 0;
  background: var(--accento);
}

.su-scuro .occhiello { color: var(--su-scuro-tenue); }
.su-scuro .occhiello::before { background: var(--accento-chiaro); }

.testata { margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.testata--centrata { text-align: center; }
.testata--centrata .occhiello { justify-content: center; }

.testata p { color: var(--testo-tenue); }
.su-scuro .testata p { color: var(--su-scuro-tenue); }

.ancore {
  margin-top: 1.5rem;
  font-size: var(--t-piccolo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ancore a { color: var(--accento); text-decoration-thickness: 1px; }
.ancore a:hover { text-decoration-thickness: 2px; }

/* ——— Pulsanti a pillola ————————————————————————————————————————————————
   `width: fit-content` e inline-flex: un CTA largo quanto la colonna è
   l'errore che si vede al primo sguardo. */

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.pillola {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border: var(--bordo-spessore) solid transparent;
  border-radius: var(--raggio-interattivo);
  font-family: var(--font-titoli);
  font-size: var(--t-piccolo);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--durata-breve) var(--curva),
    border-color var(--durata-breve) var(--curva),
    color var(--durata-breve) var(--curva);
}

.pillola--piena {
  background: var(--accento);
  color: var(--su-accento);
}

.pillola--piena:hover { background: #005567; }

.pillola--vuota {
  border-color: var(--accento);
  color: var(--accento);
}

.pillola--vuota:hover {
  background: var(--accento);
  color: var(--su-accento);
}

.pillola--chiara {
  background: var(--accento-chiaro);
  color: var(--fondo-scuro);
}

.pillola--chiara:hover { background: #79d4e8; }

/* ——— Intestazione ——————————————————————————————————————————————————————
   Sticky, non fixed: il contenuto non ci finisce mai sotto a riposo, e
   `scroll-margin-top` (base.css, da --altezza-header) copre il salto alle
   ancore. Si contrae scorrendo, come la loro — che passa da 72 a 54px. */

header[data-sito-header] {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fondo-scuro);
  transition: padding var(--durata) var(--curva);
}

.intestazione {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1rem;
  transition: padding-block var(--durata) var(--curva);
}

header.e-compatta .intestazione { padding-block: 0.625rem; }

.intestazione__marchio {
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
}

.intestazione__marchio img {
  width: auto;
  height: 3rem;
  transition: height var(--durata) var(--curva);
}

header.e-compatta .intestazione__marchio img { height: 2.5rem; }

.intestazione__nav { display: none; }

.intestazione__nav ul {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.75rem);
  margin: 0;
}

.intestazione__nav a {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  color: var(--su-scuro);
  font-size: var(--t-piccolo);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--durata-breve) var(--curva);
}

.intestazione__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accento-chiaro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--durata-breve) var(--curva);
}

.intestazione__nav a:hover { color: var(--accento-chiaro); }
.intestazione__nav a:hover::after { transform: scaleX(1); }

.intestazione__cta { display: none; margin-left: auto; }

.intestazione__toggle {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  color: var(--su-scuro);
}

.intestazione__hamburger,
.intestazione__hamburger::before,
.intestazione__hamburger::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  transition: transform var(--durata-breve) var(--curva), opacity var(--durata-breve) var(--curva);
}

.intestazione__hamburger { position: relative; }

.intestazione__hamburger::before,
.intestazione__hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.intestazione__hamburger::before { top: -0.5rem; }
.intestazione__hamburger::after { top: 0.5rem; }

[aria-expanded='true'] .intestazione__hamburger { background: transparent; }
[aria-expanded='true'] .intestazione__hamburger::before { transform: translateY(0.5rem) rotate(45deg); }
[aria-expanded='true'] .intestazione__hamburger::after { transform: translateY(-0.5rem) rotate(-45deg); }

/* ——— Menu mobile ———————————————————————————————————————————————————————— */

#menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--gronda);
  background: var(--fondo-scuro);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--durata) var(--curva), visibility var(--durata);
}

.menu-aperto #menu-mobile {
  opacity: 1;
  visibility: visible;
}

.menu-aperto { overflow: hidden; }

#menu-mobile ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  text-align: center;
}

#menu-mobile a {
  display: block;
  padding: 0.4rem;
  color: var(--su-scuro);
  font-family: var(--font-titoli);
  font-size: clamp(1.125rem, 1rem + 1.4vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color var(--durata-breve) var(--curva);
}

#menu-mobile a:hover { color: var(--accento-chiaro); }

/* ——— 1 · Apertura — oggetto in evidenza ————————————————————————————————
   Scala `contenuta`: il titolo informa, non riempie. L'impatto lo porta il
   piatto, che è l'unica cosa ritagliata su un fondo tenuto pulito. */

/* Il fondo dell'apertura è più corto del respiro pieno di proposito: sotto
   c'è già il padding-top di `.u-sezione`, e sommandoli usciva una fascia
   bianca di 380px che a schermo si legge come un buco, non come respiro. */
.apertura {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background: var(--fondo);
}

.apertura__griglia {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  align-items: center;
}

.apertura__titolo {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--testo);
}

.apertura__sommario {
  max-width: 34rem;
  color: var(--testo-tenue);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
}

.apertura__dati {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: var(--bordo-spessore) solid var(--bordo);
}

.apertura__dati dt {
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.apertura__dati dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.apertura__oggetto { margin: 0; }

.apertura__oggetto img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 56%;
}

.apertura__oggetto figcaption {
  max-width: 24rem;
  margin: 1.5rem auto 0;
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
  line-height: 1.5;
  text-align: center;
}

/* ——— Duetto: testo + una foto ———————————————————————————————————————— */

.duetto {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  align-items: center;
}

.duetto__testo > p {
  max-width: var(--larghezza-lettura);
  color: var(--testo-tenue);
}

.duetto__testo > p + p { margin-top: 1.25rem; }

.duetto__testo strong { color: var(--testo); }

.duetto__foto { margin: 0; }

.duetto__foto img {
  width: 100%;
  border-radius: var(--raggio);
  object-fit: cover;
}

/* ——— 3 · La lavagna ————————————————————————————————————————————————————— */

.lavagna__elenco {
  display: grid;
  gap: 0;
  margin: 2rem 0;
  max-width: var(--larghezza-lettura);
  border-top: var(--bordo-spessore) solid var(--bordo);
}

.lavagna__elenco li {
  padding: 0.7rem 0;
  border-bottom: var(--bordo-spessore) solid var(--bordo);
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ——— 4/6 · La carta ————————————————————————————————————————————————————— */

.carta,
.cantina {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.carta__blocco h3,
.cantina h3 {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accento);
  font-weight: 700;
}

.piatti { display: grid; gap: 1.4rem; margin: 0; }

.piatto__nome {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* Il filetto punteggiato fra piatto e prezzo: senza, l'occhio non collega la
   riga al suo numero appena la colonna è larga. */
.piatto__nome::after {
  content: '';
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 0;
  border-bottom: 1px dotted var(--bordo);
  transform: translateY(-0.25em);
}

.piatto__prezzo {
  order: 3;
  flex-shrink: 0;
  color: var(--accento);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.piatto__nota {
  margin-top: 0.35rem;
  max-width: 30rem;
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
  line-height: 1.5;
}

.carta__foto { margin: 0; }

.carta__foto img {
  width: 100%;
  border-radius: var(--raggio);
  object-fit: cover;
}

.carta__foto figcaption {
  margin-top: 1rem;
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
}

/* ——— 5 · Le pizze ——————————————————————————————————————————————————————— */

.pizze {
  display: grid;
  gap: 1.75rem 3rem;
  margin: 0;
}

/* ——— 7 · Il pannello scuro con la texture ————————————————————————————————
   Una sola superficie in tutta la pagina, come dice l'asse `texture-viva`.
   Il canvas sta sotto il contenuto e non intercetta il puntatore: se WebGL
   manca o il movimento è ridotto, resta il fondo pieno e non si vede niente
   di mancante. */

.pannello {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--fondo-scuro);
}

.pannello__texture {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s linear;
}

.pannello__texture.e-accesa { opacity: 0.55; }

.pannello__contenuto { position: relative; }

.valori {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  margin: 0;
}

.valore { max-width: 34rem; }

.valore__icona {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--accento-chiaro);
}

.valore h3 {
  margin-bottom: 0.75rem;
  color: var(--accento-chiaro);
  font-size: var(--t-h3);
  font-weight: 700;
}

.valore p { color: var(--su-scuro); }

/* ——— 8 · La galleria ————————————————————————————————————————————————————
   Le foto a piena larghezza, non le quattro miniature da 400px del loro sito. */

.galleria {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.galleria__voce { margin: 0; }

.galleria__voce img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--raggio);
  object-fit: cover;
  transition: transform var(--durata) var(--curva);
}

.galleria__voce:hover img { transform: scale(1.02); }

.galleria__voce figcaption {
  margin-top: 0.85rem;
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
}

/* ——— 9 · Gli orari ——————————————————————————————————————————————————————— */

.orari__colonna { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }

.orari__foto { margin: 0; }

.orari__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--raggio);
  object-fit: cover;
  object-position: 50% 35%;
}

.orari {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-titoli);
}

.orari th,
.orari td {
  padding: 0.9rem 0.25rem;
  border-bottom: var(--bordo-spessore) solid var(--bordo);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: left;
}

.orari td { color: var(--testo-tenue); text-align: right; }

.orari [data-oggi] th { color: var(--accento); }

.orari [data-oggi] td {
  color: var(--accento);
  font-weight: 700;
}

.orari [data-oggi] th::after {
  content: ' · oggi';
  font-size: var(--t-piccolo);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ——— 10 · La scheda NAP ————————————————————————————————————————————————— */

.scheda-nap {
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border: var(--bordo-spessore) solid var(--bordo);
  border-top: 3px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--fondo-alt);
  font-style: normal;
}

.sezione--alt .scheda-nap { background: var(--fondo); }

.scheda-nap p + p { margin-top: 0.5rem; }

.scheda-nap__nome {
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.scheda-nap a {
  color: var(--accento);
  font-weight: 500;
  text-decoration-thickness: 1px;
}

.scheda-nap a:hover { text-decoration-thickness: 2px; }

.scheda-nap__coord {
  padding-top: 0.75rem;
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
  font-variant-numeric: tabular-nums;
}

/* ——— 11 · Prenotare ————————————————————————————————————————————————————
   Il numero di telefono è la cosa più grande della pagina, ed è l'unico posto
   dove uso la scala --t-h1 per intero: la storia finisce lì. */

.prenota { text-align: center; }

.prenota__numero {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: var(--interlinea-titoli);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.prenota__numero a {
  color: var(--accento);
  text-decoration: none;
  transition: color var(--durata-breve) var(--curva);
}

.prenota__numero a:hover { color: var(--testo); }

.prenota__mail {
  margin-top: 1.5rem;
  color: var(--testo-tenue);
}

.prenota__mail a { color: var(--accento); }

.prenota__cose {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0;
  padding: 0;
  text-align: left;
}

.prenota__cose li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: var(--bordo-spessore) solid var(--bordo);
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.prenota__num {
  flex-shrink: 0;
  width: 1.75rem;
  color: var(--accento);
  font-variant-numeric: tabular-nums;
}

.prenota .u-nota { margin-top: 2.5rem; }

/* ——— 12 · Domande ——————————————————————————————————————————————————————— */

.domande {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.domanda h3 {
  margin-bottom: 0.75rem;
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--testo);
}

.domanda p {
  max-width: var(--larghezza-lettura);
  color: var(--testo-tenue);
}

/* ——— Piede ——————————————————————————————————————————————————————————————— */

footer.su-scuro {
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding-bottom: 2rem;
  background: var(--fondo-scuro);
}

.piede {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: var(--bordo-spessore) solid rgb(255 255 255 / 0.14);
}

.piede__marchio img {
  width: auto;
  height: 3.25rem;
  margin-bottom: 1.25rem;
}

.piede__marchio p {
  max-width: 22rem;
  color: var(--su-scuro-tenue);
  font-size: var(--t-piccolo);
}

.piede__blocco h2 {
  margin-bottom: 1rem;
  color: var(--su-scuro-tenue);
  font-size: var(--t-piccolo);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.piede__blocco address,
.piede__blocco p { font-style: normal; line-height: 1.9; }

.piede__blocco ul { display: grid; gap: 0.35rem; margin: 0; }

.piede__blocco a {
  color: var(--su-scuro);
  text-decoration-color: rgb(255 255 255 / 0.35);
  transition: color var(--durata-breve) var(--curva);
}

.piede__blocco a:hover { color: var(--accento-chiaro); }

.piede__coda {
  display: grid;
  gap: 0.4rem;
  padding-top: 1.75rem;
  color: var(--su-scuro-tenue);
}

.piede__coda small { font-size: var(--t-piccolo); }

/* ——— La barra del telefono, solo su mobile ————————————————————————————— */

.barra-telefono {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  transform: translateX(-50%);
  border-radius: var(--raggio-interattivo);
  background: var(--accento);
  color: var(--su-accento);
  box-shadow: 0 6px 24px rgb(6 51 63 / 0.28);
  font-family: var(--font-titoli);
  font-size: var(--t-piccolo);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu-aperto .barra-telefono { display: none; }

/* La barra è `fixed`: senza questo copre le ultime righe del piede, che sono
   proprio la partita IVA e la riga «bozza non contrattuale». */
@media (max-width: 56.24em) {
  body { padding-bottom: 5.5rem; }
}

/* ——— 640px ——————————————————————————————————————————————————————————————— */

@media (min-width: 40em) {
  .apertura__dati { grid-template-columns: 1fr auto auto; gap: 2.5rem; align-items: start; }
  .carta, .cantina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pizze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .domande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galleria__voce--larga { grid-column: 1 / -1; }
  .valori { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ——— 900px ——————————————————————————————————————————————————————————————— */

@media (min-width: 56.25em) {
  .intestazione__nav { display: block; margin-left: auto; }
  .intestazione__cta { display: inline-flex; margin-left: 0; }
  .intestazione__toggle { display: none; }
  .barra-telefono { display: none; }

  .apertura__griglia { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .apertura__oggetto figcaption { text-align: left; margin-inline: 0; }

  .duetto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duetto--stretto { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; }
  .duetto--invertito .duetto__foto { order: 2; }

  .cantina { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pizze { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .valori { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 2rem + 3vw, 5rem); }

  .piede { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .piede__coda { grid-template-columns: 1fr auto; align-items: baseline; }
  .piede__coda p:last-child { text-align: right; }
}

/* ——— Movimento ridotto ————————————————————————————————————————————————————
   Il ramo che sta accanto a ogni animazione di questa pagina: la texture non
   parte (lo decide anche site.js, qui la spengo anche se il canvas fosse già
   acceso), la foto della galleria non scala, l'intestazione non anima la
   contrazione. Tutto il contenuto resta visibile: base.css tiene i
   [data-reveal] a opacità piena. */

@media (prefers-reduced-motion: reduce) {
  .pannello__texture { display: none; }
  .galleria__voce:hover img { transform: none; }
  header[data-sito-header],
  .intestazione,
  .intestazione__marchio img { transition: none; }
}