/* ==========================================================================
   SAIMON — Componenti
   Testata, bottoni, schede, modulo, piede.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Testata
   -------------------------------------------------------------------------- */
.testata {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--piano-fisso);
  color: var(--testo-principale);
  background-color: transparent;
  transition:
    background-color var(--durata-media) var(--uscita),
    box-shadow var(--durata-media) var(--uscita),
    color var(--durata-media) var(--uscita),
    transform var(--durata-media) var(--uscita);
}
.testata::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0;
  height: 1px; background-color: var(--bordo-tenue);
  opacity: 0; transition: opacity var(--durata-media) var(--uscita);
}

/* La barra si ritira scendendo e torna salendo (js/navbar.js).
   Il transform funziona sia da fixed sia da sticky, e le pagine interne la
   impostano sticky da attributo: una regola sola copre entrambi i casi. */
.testata.e-nascosta { transform: translateY(-100%); }

.testata--su-eroe { color: var(--colore-panna-100); }

.testata.e-scorsa {
  background-color: rgba(255, 253, 249, 0.92);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
  color: var(--testo-principale);
  box-shadow: var(--ombra-sm);
}
.testata.e-scorsa::after { opacity: 1; }

.testata__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spazio-8);
  max-width: var(--contenitore-testata);
  margin-inline: auto;
  padding: var(--spazio-3) var(--margine-laterale);
  min-height: 4.25rem;
}
/* Il margine cresce con la finestra: su un monitor largo la barra respira
   invece di restare una striscia stretta al centro. */
@media (min-width: 1024px) {
  .testata__interno {
    padding-inline: clamp(var(--spazio-8), 3.5vw, var(--spazio-24));
    min-height: 5rem;
  }
}
@media (min-width: 1600px) {
  .testata__interno { min-height: 5.5rem; }
}

/* Marchio: il monogramma colorato da currentColor, così cambia con la testata */
.marchio {
  display: inline-flex; align-items: center;
  color: inherit; text-decoration: none;
  padding: var(--spazio-1);
}
.marchio__segno {
  /* proporzioni del monogramma originale: 544 x 1024 */
  height: clamp(2.75rem, 1.6vw + 2.2rem, 3.4rem);
  width: calc(clamp(2.75rem, 1.6vw + 2.2rem, 3.4rem) * 544 / 1024);
  background-color: currentColor;
  -webkit-mask: url('../media/logo-monogramma.svg') center / contain no-repeat;
  mask: url('../media/logo-monogramma.svg') center / contain no-repeat;
  transition: opacity var(--durata-breve) var(--uscita);
}
.marchio:hover .marchio__segno { opacity: 0.7; }

/* --- Menu desktop --- */
.menu { display: none; }

@media (min-width: 900px) {
  .menu {
    display: flex; align-items: center;
    gap: clamp(var(--spazio-6), 2.6vw, var(--spazio-16));
  }
  .menu__voce { position: relative; }

  .menu__collegamento {
    display: inline-flex; align-items: center; gap: var(--spazio-2);
    color: inherit; text-decoration: none;
    font-size: clamp(var(--testo-sm), 0.62vw + 0.68rem, var(--testo-base));
    font-weight: 500; letter-spacing: 0.06em;
    padding-block: var(--spazio-2);
    position: relative;
  }
  .menu__collegamento::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background-color: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--durata-media) var(--uscita);
  }
  .menu__collegamento:hover::after,
  .menu__voce:focus-within .menu__collegamento::after { transform: scaleX(1); }
  .menu__collegamento[aria-current='page']::after { transform: scaleX(1); }

  /* Sottomenu Prodotti */
  .menu__interruttore {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; padding: 0;
    background: none; border: 0; color: inherit;
  }
  .menu__freccia {
    width: 0.6rem; height: 0.6rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--durata-media) var(--uscita);
  }
  .menu__interruttore[aria-expanded='true'] .menu__freccia {
    transform: translateY(1px) rotate(-135deg);
  }

  .sottomenu {
    position: absolute; inset-block-start: calc(100% + var(--spazio-4));
    inset-inline-start: calc(var(--spazio-4) * -1);
    z-index: var(--piano-tendina);
    min-width: 12rem;
    padding: var(--spazio-2);
    background-color: var(--sfondo-elevato);
    border: var(--bordo-sottile);
    border-radius: var(--raggio-md);
    box-shadow: var(--ombra-md);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--durata-media) var(--uscita),
      transform var(--durata-media) var(--uscita),
      visibility 0s linear var(--durata-media);
  }
  .menu__voce:hover .sottomenu,
  .menu__voce:focus-within .sottomenu,
  .sottomenu.e-aperto {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: 0s;
  }
  /* Cliccando "Prodotti" il mouse resta sopra la voce: nella pagina nuova il
     browser la trovava già in :hover e apriva il sottomenu da solo, con la
     sua animazione, e la barra sembrava muoversi. .menu-fermo (messa nella
     <head>, tolta da js/navbar.js al primo movimento vero del mouse) spegne
     solo l'apertura al passaggio; tastiera e pulsante funzionano come sempre. */
  .menu-fermo .menu__voce:hover:not(:focus-within) .sottomenu:not(.e-aperto) {
    opacity: 0; visibility: hidden; transform: translateY(-6px);
  }
  .sottomenu a {
    display: block;
    padding: var(--spazio-3) var(--spazio-4);
    border-radius: var(--raggio-sm);
    color: var(--testo-principale);
    text-decoration: none;
    font-size: var(--testo-sm); font-weight: 400;
    transition: background-color var(--durata-breve) var(--uscita);
  }
  .sottomenu a:hover { background-color: var(--colore-salvia-100); }
}

/* --- Pulsante menu mobile --- */
.menu-mobile__pulsante {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0 0.55rem;
  background: none; border: 0; color: inherit;
}
.menu-mobile__pulsante span {
  display: block; height: 1.5px; background-color: currentColor;
  transition: transform var(--durata-media) var(--uscita),
              opacity var(--durata-breve) var(--uscita);
}
.menu-mobile__pulsante[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-mobile__pulsante[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-mobile__pulsante[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 900px) { .menu-mobile__pulsante { display: none; } }

/* --- Pannello mobile --- */
.menu-mobile {
  position: fixed; inset: 0;
  z-index: var(--piano-pannello);
  display: flex; flex-direction: column;
  padding: 6rem var(--margine-laterale) var(--spazio-12);
  background-color: var(--sfondo-pagina);
  color: var(--testo-principale);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-1.5rem);
  transition:
    opacity var(--durata-media) var(--uscita),
    transform var(--durata-media) var(--uscita),
    visibility 0s linear var(--durata-media);
}
.menu-mobile.e-aperto {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (min-width: 900px) { .menu-mobile { display: none; } }

.menu-mobile__elenco { display: flex; flex-direction: column; }
.menu-mobile__elenco > li { border-block-end: var(--bordo-sottile); }
.menu-mobile__elenco a {
  display: block; padding-block: var(--spazio-4);
  color: var(--testo-principale); text-decoration: none;
  font-size: var(--testo-lg); font-weight: 300; letter-spacing: -0.01em;
}
.menu-mobile__elenco a[aria-current='page'] { color: var(--testo-accento); }
.menu-mobile__nidificato { padding-inline-start: var(--spazio-4); padding-block-end: var(--spazio-3); }
/* Le voci annidate restano più discrete di quelle principali, ma il bersaglio
   da toccare non scende sotto i 44px consigliati per il dito. */
.menu-mobile__nidificato a {
  padding-block: var(--spazio-3);
  font-size: var(--testo-base); font-weight: 400; color: var(--testo-secondario);
}
.menu-mobile__coda {
  display: none;
}

body.e-bloccato { overflow: hidden; }

/* Col menu aperto la testata resta sopra il pannello, altrimenti il pulsante
   per chiudere finisce sotto e non si riesce più a uscire. */
body.e-bloccato .testata {
  z-index: calc(var(--piano-pannello) + 1);
  color: var(--testo-principale);
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
body.e-bloccato .testata::after { opacity: 0; }


/* --------------------------------------------------------------------------
   Foglie d'acquerello
   Stanno dietro al contenuto, mai sopra: sono atmosfera, non informazione.
   L'oscillazione di fondo è lentissima; lo scroll aggiunge una raffica
   attraverso --vento, che js/foglie.js aggiorna in base alla velocità.
   -------------------------------------------------------------------------- */
.foglie {
  position: absolute; inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.foglie + * { position: relative; z-index: 10; }

/* Il riquadro è quadrato quanto la foglia (le immagini sono tutte circa
   500x500) e la misura la decide una sola regola: la larghezza voluta, ma
   mai più di metà schermo né più del 58% dell'altezza della finestra.
   Prima il limite d'altezza stava sull'immagine (max-height con
   object-fit: contain): sulle finestre basse la foglia si rimpiccioliva al
   centro del proprio riquadro e si staccava dal bordo, restando a metà. */
.foglia {
  position: absolute;
  width: min(var(--larghezza, 34rem), 48vw, 58svh);
  aspect-ratio: 1 / 1;
  opacity: var(--velo, 0.65);
  /* L'aggancio al bordo è in percentuale della foglia stessa (translate),
     non in rem: così resta giusto a qualunque misura la foglia finisca. */
  translate: var(--esce-x, 0) var(--esce-y, 0);
  transform-origin: var(--perno, center center);
  /* Respiro lungo: una folata di vento vero dura secondi, non un battito. */
  animation: ondeggio var(--respiro, 22s) ease-in-out infinite;
  animation-delay: var(--ritardo-foglia, 0s);
  will-change: transform;
}

.foglia img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transform:
    rotate(var(--rotazione, 0deg))
    rotate(calc(var(--vento, 0) * var(--sensibilita, 1) * 2.4deg))
    translateX(calc(var(--vento, 0) * var(--sensibilita, 1) * 9px))
    /* --specchio: -1 ribalta il mazzo lungo il gambo, che resta dov'è */
    scale(var(--specchio, 1), 1);
  transition: transform 2400ms cubic-bezier(0.16, 1, 0.30, 1);
  will-change: transform;
}

@keyframes ondeggio {
  0%   { transform: rotate(-1.1deg) translate(0, 0); }
  33%  { transform: rotate(0.7deg) translate(4px, -7px); }
  66%  { transform: rotate(1.2deg) translate(-3px, -3px); }
  100% { transform: rotate(-1.1deg) translate(0, 0); }
}

/* --- Posizioni ancorate ai bordi laterali ---
   Ogni mazzo ha il gambo in basso al centro, e la rotazione lo punta verso
   il bordo. Gli scostamenti sono calcolati perché la punta del gambo esca
   dallo schermo di circa l'8% della foglia: il ramo sembra entrare da
   fuori, e il fogliame sfiora il bordo invece di galleggiare a metà.
   Con il gambo a 0,45 lati dal centro e direzione (dx, dy):
   centro = bordo - (0,45 x |dx| - 0,08) lati. */

/* 1. Ramo in alto a destra (inizio sezione): gambo verso l'angolo */
.foglia--alto-destra {
  top: 0; right: 0;
  --rotazione: -140deg;
  --perno: top right;
  --esce-x: 29%; --esce-y: -22%;
}

/* 2. Ramo in basso a sinistra (fine pagina) */
.foglia--basso-sinistra {
  bottom: 0; left: 0;
  --rotazione: 45deg;
  --perno: bottom left;
  --esce-x: -26%; --esce-y: 26%;
}

/* 3. Rami sui lati a cavallo fra due sezioni: il centro sta sul confine, il
   ramo abbraccia la fine di una e l'inizio dell'altra. */
.foglia--lato-destra {
  bottom: 0; right: 0;
  --rotazione: -90deg;
  --perno: bottom right;
  --esce-x: 13%; --esce-y: 50%;
}
.foglia--lato-sinistra {
  bottom: 0; left: 0;
  --rotazione: 90deg;
  --perno: bottom left;
  --esce-x: -13%; --esce-y: 50%;
}

/* Posizioni ausiliarie d'angolo */
.foglia--alto-sinistra {
  top: 0; left: 0;
  --rotazione: 110deg;
  --perno: top left;
  --esce-x: -16%; --esce-y: -30%;
}
.foglia--basso-destra {
  bottom: 0; right: 0;
  --rotazione: -70deg;
  --perno: bottom right;
  --esce-x: 16%; --esce-y: 30%;
}

/* Su fondo scuro le foglie mantengono leggibilità ed eleganza */
.su-scuro .foglia { opacity: calc(var(--velo, 0.55) * 0.78); }

/* Sul telefono le foglie devono farsi da parte. Il testo occupa quasi tutta la
   larghezza dello schermo e non ha un fondo suo: una foglia larga e satura ci
   finisce sotto per intero e la riga diventa faticosa. Quindi coprono meno
   schermo che su desktop, sono più trasparenti e non superano mai un terzo
   dell'altezza della finestra. Gli agganci restano quelli sopra: essendo in
   percentuale della foglia, valgono anche qui. */
@media (max-width: 767px) {
  .foglia {
    /* Più grandi di prima (erano 38-44vw): così piccole la loro inclinazione
       non si leggeva e sembravano tutte orizzontali. Escono di più dal bordo
       (vedi il blocco del telefono in pagine.css), quindi il testo non ne
       risente. */
    width: min(var(--larghezza, 34rem), 64vw, 36svh);
    opacity: calc(var(--velo, 0.55) * 0.55);
  }
  .foglia--alto-sinistra, .foglia--basso-destra { display: none; }
  /* Anche sul fondo scuro la foglia va alleggerita come altrove: la regola
     .su-scuro qui sopra è più specifica e la riportava quasi piena (0,58
     contro 0,2-0,3 delle altre). 0,55 x 0,78. */
  .su-scuro .foglia { opacity: calc(var(--velo, 0.55) * 0.43); }
}

/* Sotto i 480px un velo in più: il testo occupa tutta la riga. */
@media (max-width: 479px) {
  .foglia { opacity: calc(var(--velo, 0.55) * 0.45); }
}

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spazio-2);
  padding: var(--spazio-4) var(--spazio-8);
  border: 1px solid transparent; border-radius: var(--raggio-md);
  background-color: var(--azione-primaria);
  color: var(--azione-primaria-testo);
  font-size: var(--testo-sm); font-weight: 600; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  transition:
    background-color var(--durata-breve) var(--uscita),
    transform var(--durata-breve) var(--uscita);
}
.bottone:hover { background-color: var(--azione-primaria-hover); color: var(--azione-primaria-testo); }
.bottone:active { transform: translateY(1px); }

.bottone--secondario {
  background-color: transparent;
  border-color: var(--azione-secondaria-bordo);
  color: var(--testo-principale);
}
.bottone--secondario:hover {
  background-color: var(--colore-antracite-900);
  color: var(--colore-panna-100);
}

.bottone--scuro {
  background-color: var(--colore-antracite-900);
  color: var(--colore-panna-100);
}
.bottone--scuro:hover {
  background-color: var(--colore-salvia-900);
  color: var(--colore-panna-100);
}

.bottone--chiaro {
  background-color: transparent;
  border-color: var(--colore-panna-100);
  color: var(--colore-panna-100);
}
.bottone--chiaro:hover {
  background-color: var(--colore-panna-100);
  color: var(--colore-antracite-900);
}

/* Link con freccia: la freccia avanza al passaggio del mouse */
.collegamento-avanti {
  display: inline-flex; align-items: center; gap: var(--spazio-3);
  color: var(--testo-accento); text-decoration: none;
  font-size: var(--testo-sm); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.collegamento-avanti__freccia {
  display: inline-block; width: 1.75rem; height: 1px;
  background-color: currentColor; position: relative;
  transition: width var(--durata-media) var(--uscita);
}
.collegamento-avanti__freccia::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.collegamento-avanti:hover { color: var(--colore-salvia-900); }
.collegamento-avanti:hover .collegamento-avanti__freccia { width: 2.5rem; }

.collegamento-avanti--chiaro { color: var(--colore-panna-100); }
.collegamento-avanti--chiaro:hover { color: var(--colore-bianco); }

/* --------------------------------------------------------------------------
   Cornice foto — filetto di legno interno, come da §4.5
   -------------------------------------------------------------------------- */
.cornice {
  position: relative;
  z-index: 5;
  border-radius: var(--raggio-lg);
  overflow: hidden;
  background-color: var(--sfondo-sezione-alt);
}
.cornice picture { display: block; width: 100%; height: 100%; }
.cornice img { width: 100%; height: 100%; object-fit: cover; }

/* Cornice che non ritaglia: invece di imporre un'altezza alla foto, la prende
   da lei. Va usata senza cornice--parallasse, che per scorrere ha bisogno
   proprio di quel margine di foto in eccedenza che qui non c'è più. */
.cornice--intera { aspect-ratio: auto; background-color: transparent; }
.cornice--intera img { width: 100%; height: auto; object-fit: contain; }

.cornice--legno::after {
  content: ''; position: absolute; inset: var(--spazio-3);
  border: 1px solid rgba(223, 199, 168, 0.45);
  border-radius: calc(var(--raggio-lg) - 6px);
  pointer-events: none;
}
.su-scuro .cornice--legno::after {
  border-color: rgba(223, 199, 168, 0.85);
}

/* --------------------------------------------------------------------------
   Elenco dei "senza" — icona E parola, mai il solo colore (§7.3)
   -------------------------------------------------------------------------- */
.senza {
  display: flex; flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-3);
  margin-block: var(--spazio-6);
}
.senza li {
  display: inline-flex; align-items: center; gap: var(--spazio-2);
  padding: var(--spazio-2) var(--spazio-4);
  border: var(--bordo-accento); border-radius: var(--raggio-sm);
  background-color: var(--colore-panna-50);
  font-size: var(--testo-sm); font-weight: 500;
  color: var(--testo-principale);
}
.senza svg { width: 1rem; height: 1rem; flex: none; color: var(--colore-salvia-700); }

.su-scuro .senza li {
  background-color: rgba(250, 246, 239, 0.08);
  border-color: rgba(223, 199, 168, 0.4);
  color: var(--colore-panna-100);
}
.su-scuro .senza svg { color: var(--colore-salvia-300); }

/* --------------------------------------------------------------------------
   Modulo
   -------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: var(--spazio-2); margin-block-end: var(--spazio-6); }
.campo__etichetta { font-size: var(--testo-sm); font-weight: 500; color: var(--testo-principale); }
.campo__aiuto { font-size: var(--testo-xs); color: var(--testo-tenue); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: var(--spazio-3) var(--spazio-4);
  background-color: var(--colore-bianco);
  border: 1px solid var(--colore-panna-300);
  border-radius: var(--raggio-sm);
  color: var(--testo-principale);
  font-size: var(--testo-base);
  transition: border-color var(--durata-breve) var(--uscita);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--colore-antracite-500); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--colore-salvia-500); }
.campo textarea { min-height: 7.5rem; resize: vertical; }

.campo__errore {
  display: none;
  align-items: center; gap: var(--spazio-2);
  font-size: var(--testo-sm); font-weight: 500; color: #8A2F2F;
}
.campo__errore svg { width: 1rem; height: 1rem; flex: none; }
.campo.e-in-errore .campo__errore { display: flex; }
.campo.e-in-errore input,
.campo.e-in-errore select,
.campo.e-in-errore textarea { border-color: #8A2F2F; border-width: 2px; }

/* Spunta della privacy: casella e testo sulla stessa riga, tutta l'etichetta
   cliccabile. */
.campo--spunta label {
  display: flex; align-items: flex-start; gap: var(--spazio-3);
  font-size: var(--testo-sm); line-height: 1.5; color: var(--testo-principale);
  cursor: pointer;
}
.campo--spunta input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem; flex: none;
  margin-block-start: 0.1rem; padding: 0;
  accent-color: var(--colore-salvia-700);
}
.campo.campo--spunta.e-in-errore input[type="checkbox"] { outline: 2px solid #8A2F2F; outline-offset: 2px; }

/* Il campo trappola per i robot: fuori dallo schermo, non display:none
   (alcuni programmi saltano i campi nascosti così). */
.campo-trappola {
  position: absolute;
  left: -10000px; width: 1px; height: 1px;
  overflow: hidden;
}

.modulo__coppia { display: grid; gap: 0 var(--spazio-6); }
@media (min-width: 600px) { .modulo__coppia { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Piede
   -------------------------------------------------------------------------- */
.piede {
  background-color: var(--sfondo-sezione-scura);
  color: var(--testo-su-scuro);
  padding-block: var(--spazio-16) var(--spazio-8);
}
.piede h2, .piede h3 { color: var(--colore-panna-100); }
.piede a { color: var(--colore-panna-100); }
.piede a:hover { color: var(--colore-salvia-300); }

.piede__griglia {
  display: grid; gap: var(--spazio-12);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .piede__griglia { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--spazio-16); }
}

.piede__titolo {
  font-size: var(--testo-sm); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--colore-legno-300);
  margin-block-end: var(--spazio-4);
}
/* Le voci restano distanti come prima, ma lo spazio fra l'una e l'altra
   diventa area toccabile: col dito servono almeno 24px di bersaglio. */
.piede__elenco { display: flex; flex-direction: column; gap: var(--spazio-1); }
.piede__elenco a { display: inline-block; padding-block: var(--spazio-1); text-decoration: none; }
.piede__elenco a:hover { text-decoration: underline; }
/* Icona in coda alla frase, sulla stessa riga: serve .piede__elenco davanti
   per battere la regola dei link dell'elenco, che è inline-block. */
.piede__elenco .piede__whatsapp { display: inline-flex; align-items: center; gap: var(--spazio-2); }
.piede__icona { width: 1.125rem; height: 1.125rem; flex: none; }
.piede p { color: rgba(250, 246, 239, 0.86); }

.piede__marchio {
  width: min(15rem, 70%);
  height: auto;
  margin-block-end: var(--spazio-8);
}

/* Social: solo icone, in riga, con l'etichetta riservata ai lettori di schermo */
.social { display: flex; align-items: center; gap: var(--spazio-3); }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(223, 199, 168, 0.35);
  border-radius: var(--raggio-tondo);
  color: var(--colore-panna-100);
  text-decoration: none;
  transition:
    background-color var(--durata-breve) var(--uscita),
    border-color var(--durata-breve) var(--uscita),
    color var(--durata-breve) var(--uscita);
}
.social a:hover {
  background-color: var(--colore-panna-100);
  border-color: var(--colore-panna-100);
  color: var(--colore-antracite-900);
}
.social svg { width: 1.25rem; height: 1.25rem; flex: none; }

.piede__chiusura {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--spazio-4);
  margin-block-start: var(--spazio-16);
  padding-block-start: var(--spazio-6);
  border-block-start: 1px solid rgba(223, 199, 168, 0.28);
  font-size: var(--testo-xs); color: rgba(250, 246, 239, 0.7);
}
.piede__chiusura a {
  display: inline-block; padding-block: var(--spazio-1);
  color: rgba(250, 246, 239, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--durata-media) var(--uscita);
}
.piede__chiusura a:hover {
  color: var(--colore-panna-100);
}


/* Pulsante flottante — vetro smerigliato.
   Il vetro qui ha una ragione: il pulsante galleggia sopra sezioni panna,
   salvia e noce, e con un fondo pieno stonerebbe con almeno una delle tre.
   Lasciando trasparire quello che ha sotto si accorda con tutte. Il testo
   però non è mai vetro: la freccia resta piena e ad alto contrasto, e
   dietro c'è comunque un velo abbastanza denso da garantirlo. */
.torna-su {
  position: fixed; inset-block-end: var(--spazio-6); inset-inline-end: var(--spazio-6);
  z-index: var(--piano-fisso);
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem;
  /* Vetro vero: sfocatura leggera perché dietro si riconosca ancora qualcosa,
     un velo antracite per il contrasto della freccia (4,75:1 anche sopra la
     fascia salvia, che è il fondo più chiaro che incontra) e un filo di luce
     sul bordo superiore — è quel riflesso che fa leggere il vetro come vetro
     invece che come un disco pieno. */
  background-image: linear-gradient(
    160deg,
    rgba(250, 246, 239, 0.20) 0%,
    rgba(250, 246, 239, 0.04) 42%,
    rgba(41, 40, 45, 0.10) 100%);
  background-color: rgba(41, 40, 45, 0.52);
  -webkit-backdrop-filter: blur(10px) saturate(1.6) brightness(0.6);
  backdrop-filter: blur(10px) saturate(1.6) brightness(0.6);
  color: var(--colore-panna-100);
  border: 1px solid rgba(250, 246, 239, 0.34);
  border-radius: var(--raggio-tondo);
  box-shadow:
    0 8px 28px rgba(41, 40, 45, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(41, 40, 45, 0.25);
  opacity: 0; visibility: hidden; transform: translateY(0.75rem);
  transition:
    opacity var(--durata-media) var(--uscita),
    transform var(--durata-media) var(--uscita),
    background-color var(--durata-breve) var(--uscita),
    visibility 0s linear var(--durata-media);
}
.torna-su.e-visibile { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.torna-su:hover {
  background-color: rgba(76, 93, 65, 0.66);
  border-color: rgba(250, 246, 239, 0.55);
}
.torna-su svg { width: 1.15rem; height: 1.15rem; }

/* Dove il vetro non è supportato si torna al pieno, che è sempre leggibile */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .torna-su { background-color: rgba(41, 40, 45, 0.92); background-image: none; }
}

/* --------------------------------------------------------------------------
   Guarda il video (js/lettore.js)
   Solo il segno dello schermo intero, senza cerchio né fondo, nell'angolo
   dell'eroe: deve farsi trovare, non farsi guardare. Il video è il
   protagonista e il bottone non ne deve rompere la calma. Un'ombra morbida
   lo tiene leggibile anche sui fotogrammi chiari. Al passaggio del mouse o
   col fuoco da tastiera si accende e, sul computer, accanto compare la
   scritta. Per lo screen reader la scritta c'è sempre.
   Compare solo quando js/lettore.js ha verificato di poterlo aprire; nella
   home, dove l'eroe è il marchio che si compone, solo dopo il primo
   scorrimento (.e-attesa).
   -------------------------------------------------------------------------- */
.eroe__guarda {
  position: absolute; z-index: 2;
  inset-block-end: var(--spazio-6); inset-inline-end: var(--margine-laterale);
  display: none; place-items: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  font: inherit;
  color: var(--colore-panna-100);
  background: none;
  border: 0;
  opacity: 0.78;
  cursor: pointer;
  transition:
    opacity var(--durata-media) var(--uscita),
    visibility 0s linear 0s;
}
.eroe__guarda.e-pronto { display: grid; }
.eroe__guarda.e-attesa {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--durata-media) var(--uscita), visibility 0s linear var(--durata-media);
}
.eroe__guarda:hover,
.eroe__guarda:focus-visible { opacity: 1; }
.eroe__guarda-segno { display: grid; place-items: center; }
.eroe__guarda-segno svg {
  width: 1.375rem; height: 1.375rem;
  filter: drop-shadow(0 1px 6px rgba(41, 40, 45, 0.55));
  transition: transform var(--durata-media) var(--uscita);
}
.eroe__guarda:hover .eroe__guarda-segno svg,
.eroe__guarda:focus-visible .eroe__guarda-segno svg { transform: scale(1.12); }
.eroe__guarda:focus-visible { outline-offset: 2px; border-radius: var(--raggio-md); }

/* La scritta: nascosta alla vista, presente per lo screen reader. */
.eroe__guarda-testo {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Sul computer, al passaggio, scivola fuori a sinistra del segno. */
@media (hover: hover) and (pointer: fine) {
  .eroe__guarda-testo {
    inset-inline-end: calc(100% + var(--spazio-1)); inset-block-start: 50%;
    width: auto; height: auto; margin: 0;
    overflow: visible; clip-path: none;
    font-size: var(--testo-xs); font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(41, 40, 45, 0.6);
    opacity: 0;
    transform: translate(6px, -50%);
    transition: opacity var(--durata-media) var(--uscita), transform var(--durata-media) var(--uscita);
    pointer-events: none;
  }
  .eroe__guarda:hover .eroe__guarda-testo,
  .eroe__guarda:focus-visible .eroe__guarda-testo {
    opacity: 1; transform: translate(0, -50%);
  }
}
@media (min-width: 700px) {
  .eroe__guarda { inset-inline-end: var(--margine-laterale-lg); inset-block-end: var(--spazio-8); }
}

/* --------------------------------------------------------------------------
   Lettore a schermo intero
   Un <dialog> che copre tutta la finestra, fondo nero, il video intero con
   l'audio e i comandi del browser. Dove si può (computer, Android) chiede
   anche lo schermo intero vero; su iPhone, che non lo concede a un
   elemento qualsiasi, copre la finestra e basta.
   -------------------------------------------------------------------------- */
.lettore {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background-color: var(--sfondo-lettore);
  color: var(--colore-panna-100);
  overflow: hidden;
}
.lettore::backdrop { background-color: var(--sfondo-lettore); }
.lettore[open] { display: block; animation: lettore-entra 360ms var(--uscita) both; }
@keyframes lettore-entra { from { opacity: 0; } }

/* La scena è ciò che va a schermo intero: video e bottone chiudi insieme */
.lettore__scena {
  position: relative;
  width: 100%; height: 100%;
  background-color: var(--sfondo-lettore);
}
.lettore__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  background-color: var(--sfondo-lettore);
}

.lettore__chiudi {
  position: absolute; z-index: 1;
  inset-block-start: max(var(--spazio-4), env(safe-area-inset-top));
  inset-inline-end: max(var(--spazio-4), env(safe-area-inset-right));
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  color: var(--colore-panna-100);
  background-color: rgba(41, 40, 45, 0.55);
  border: 1px solid rgba(250, 246, 239, 0.34);
  border-radius: var(--raggio-tondo);
  cursor: pointer;
  transition: background-color var(--durata-breve) var(--uscita);
}
.lettore__chiudi:hover { background-color: rgba(76, 93, 65, 0.8); }
.lettore__chiudi svg { width: 1rem; height: 1rem; }
.lettore :focus-visible { outline-color: var(--focus-anello-scuro); }

/* Mentre il lettore è aperto la pagina sotto non scorre */
html.lettore-aperto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lettore[open] { animation: none; }
}
/* --------------------------------------------------------------------------
   Avviso in evidenza (js/avviso.js)
   Chiusa è una striscia piccola in basso a destra: miniatura, titolo, una
   freccia. Un tocco la apre su foto, testo e bottone, sempre sotto la
   testata: se il contenuto è lungo scorre dentro la scheda. Non è modale:
   niente velo, la pagina resta tutta usabile.
   -------------------------------------------------------------------------- */
.avviso {
  position: fixed; z-index: var(--piano-avviso);
  inset-block-end: max(var(--spazio-4), env(safe-area-inset-bottom));
  inset-inline: var(--spazio-4);
  display: flex; flex-direction: column;
  /* mai sotto la testata (circa 6rem), nemmeno aperta */
  max-height: calc(100dvh - 7rem - var(--spazio-4));
  overflow: hidden auto; overscroll-behavior: contain;
  background-color: var(--sfondo-elevato);
  color: var(--testo-secondario);
  border: var(--bordo-sottile);
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-lg), var(--ombra-md);
  opacity: 0; visibility: hidden; transform: translateY(1rem);
  transition:
    opacity var(--durata-lunga) var(--uscita-lenta),
    transform var(--durata-lunga) var(--uscita-lenta),
    visibility 0s linear var(--durata-lunga);
}
.avviso.e-visibile { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* La foto grande si vede solo da aperta; da chiusa basta la miniatura */
.avviso__foto {
  display: none;
  width: 100%; aspect-ratio: 16 / 10; max-height: 40vh;
  object-fit: cover;
  background-color: var(--sfondo-sezione-alt);
}
.avviso.e-aperta .avviso__foto { display: block; }
.avviso.e-aperta .avviso__miniatura { display: none; }

.avviso__barra { display: flex; align-items: center; }

.avviso__apri {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--spazio-3);
  padding: var(--spazio-3) 0 var(--spazio-3) var(--spazio-3);
  background: none; border: 0;
  color: inherit; text-align: start;
}
.avviso__miniatura {
  flex: none;
  width: 3.25rem; height: 3.25rem;
  object-fit: cover;
  border-radius: var(--raggio-md);
  background-color: var(--sfondo-sezione-alt);
}
.avviso__riassunto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.avviso__occhiello {
  color: var(--testo-accento);
  font-size: var(--testo-xs); font-weight: 600; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.avviso__titolo {
  color: var(--testo-principale);
  font-size: var(--testo-base); font-weight: 500; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avviso.e-aperta .avviso__titolo { white-space: normal; }
.avviso.e-aperta .avviso__apri { padding-inline-start: var(--spazio-4); }

.avviso__freccia {
  flex: none;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  color: var(--testo-accento);
  transform: rotate(0deg);
  transition: transform var(--durata-media) var(--uscita);
}
.avviso__freccia svg { width: 0.9rem; height: 0.9rem; }
.avviso.e-aperta .avviso__freccia { transform: rotate(180deg); }

.avviso__chiudi {
  flex: none;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-inline: var(--spazio-1);
  padding: 0;
  color: var(--testo-tenue);
  background: none; border: 0;
  border-radius: var(--raggio-tondo);
  transition: color var(--durata-breve) var(--uscita), background-color var(--durata-breve) var(--uscita);
}
.avviso__chiudi:hover { color: var(--testo-principale); background-color: var(--sfondo-sezione-alt); }
.avviso__chiudi svg { width: 0.85rem; height: 0.85rem; }

.avviso__dettagli {
  display: none;
  flex-direction: column; align-items: flex-start; gap: var(--spazio-4);
  padding: 0 var(--spazio-4) var(--spazio-4);
}
.avviso.e-aperta .avviso__dettagli { display: flex; }
.avviso__testo {
  margin: 0;
  font-size: var(--testo-sm); line-height: 1.6;
  white-space: pre-line;
}
.avviso__bottone {
  padding: var(--spazio-3) var(--spazio-6);
  font-size: var(--testo-xs);
}

/* Sul telefono il "torna su" starebbe sotto la scheda: finché c'è, si toglie */
@media (max-width: 767px) {
  html.avviso-aperto .torna-su { opacity: 0; visibility: hidden; }
}

@media (min-width: 768px) {
  .avviso {
    inset-block-end: var(--spazio-6);
    /* a sinistra del "torna su" (3,25rem), con un respiro fra i due */
    inset-inline: auto calc(var(--spazio-6) + 3.25rem + var(--spazio-3));
    width: 20rem;
    max-height: calc(100dvh - 7rem - var(--spazio-6));
  }
  .avviso.e-aperta { width: 22rem; }
  .avviso.e-aperta .avviso__titolo { font-size: var(--testo-md); }
}