/* Bozza 04 della pagina iniziale — Ok Ufficio Arredamento.
   È la bozza 03, identica in tutto, con una sola differenza: l'apertura.

   Qui marchio, menu e fotografia stanno insieme dentro la prima schermata
   e la riempiono per intero, invece di essere una striscia alta 420 px.
   L'altezza non è un numero fisso: testata e menu occupano quello che
   serve, la foto si prende tutto il resto fino al bordo basso dello
   schermo. Su un portatile da 1440×900 significa una foto alta circa
   740 px; su un monitor grande cresce con lo schermo.

   Due conseguenze da sapere:
   - il resto della pagina parte sotto la piega, quindi si vede solo
     scorrendo. È il prezzo di questa impaginazione;
   - la fotografia viene comunque ritagliata, perché 1500×1000 non ha le
     proporzioni dello schermo. Si vede più foto che nella striscia, non
     la foto intera.

   Per il resto vale tutto quello che segue.

   Regola seguita: i colori restano quelli della 02. Le bande nuove usano
   solo i grigi già in uso — #fff, #e5e5e5, #ccc — e il rosso compare dove
   compare nella 02, cioè come accento: il filo sotto i titoli, il segno
   dell'elenco, il bordo delle schede, il bottone. Nessuna fascia rossa:
   era stata tolta apposta dalla 02.

   Sotto, la descrizione della 02, che vale ancora tutta.

   Versione con gli sfondi grigi del sito attuale.

   (nata come proposta 9, «Cornice»)
   La proposta 8 con gli sfondi del sito di oggi. Misurati sul sito vero,
   dall'alto in basso, sono questi:

     testata (marchio)      #fff
     barra del menu         #ccc
     fascia della slide     #ccc
     blocco di testo        #e5e5e5
     dati e piede           #ccc

   Cioè: la pagina di oggi è quasi tutta grigia, e il bianco sta solo
   dietro il marchio. La 08 era tutta bianca; questa rimette le bande
   dove stanno adesso.

   Sotto, la descrizione della 08, che vale ancora tutta.

   Proposta 8 — «Ritocco».
   Il sito di oggi, con lo stesso impianto e la stessa tavolozza: stessa
   sequenza di blocchi (marchio, menu, slide, riga del MEPA, tre paragrafi,
   fascia grigia dei dati, torna su), stessi colori, stesso carattere.
   Non è una riprogettazione: è una manutenzione.

   Quello che cambia, e solo quello:
   1. Titillium Web viene davvero caricato. Oggi il tema lo dichiara sul
      body ma non lo richiede mai, quindi si vede l'Arial di sistema.
   2. I paragrafi stanno in una colonna leggibile invece che larghi
      quanto lo schermo.
   3. Il piede: oggi è testo #888 su fondo #ccc, cioè 2,2:1 di contrasto.
      Stesso grigio di fondo, testo portato a #444.
   4. Il menu sta su una riga e si usa col dito.
   5. La pagina funziona sul telefono.
   6. Refusi corretti: «società», «Mercato Elettronico», «Unità», «P.IVA»,
      e «Torna all'inizio della pagina» al posto di «Return to top of page».  */

:root {
  --rosso: #fe0000;
  --rosso-cupo: #c70000;
  --testo: #444;          /* il colore del corpo, come oggi */
  --scuro: #333;
  --tenue: #777;
  --banda: #ccc;          /* menu, slide, dati, piede: come oggi */
  --banda-chiara: #e5e5e5; /* il blocco di testo: come oggi */
  --riga: #ddd;
  --riga-tenue: #eee;
  --carta: #fff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--banda);
  color: var(--testo);
  font-family: "Titillium Web", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;            /* la misura che il tema già dichiara */
  font-weight: 400;
  line-height: 1.56;          /* 25px su 16px, come oggi */
}
img { display: block; max-width: 100%; }
a { color: var(--testo); }
a:hover { color: var(--rosso); }
h1, h2, h3 { margin: 0; color: var(--scuro); line-height: 1.25; font-weight: 600; }
.shell { width: 100%; max-width: 1040px; margin-inline: auto; padding-inline: 24px; }

/* --- testata --------------------------------------------------------- */
.testata { background: var(--carta); padding-block: 22px 18px; }
.testata__in { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.marchio { display: inline-block; line-height: 0; }
.marchio img { width: 290px; max-width: 100%; height: auto; }
.insegna { margin: 10px 0 0; font-size: 15px; color: var(--tenue); max-width: 60ch; }

/* la pasticca del telefono, come quella in alto a destra di oggi */
.pasticca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px 9px 15px;
  border: 1px solid var(--riga);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.pasticca:hover { border-color: var(--rosso); }
.pasticca svg { width: 19px; height: 19px; fill: var(--tenue); flex: none; }
.pasticca b { font-size: 21px; font-weight: 600; color: var(--scuro); }
.pasticca:hover b { color: var(--rosso); }

/* --- menu ---------------------------------------------------------------
   Quello di oggi è una fascia chiarissima con testo grigio #999 a peso 200
   e le freccette dei sottomenu. Ne tengo il carattere — leggera, arieggiata,
   maiuscoletto spaziato — e sistemo le due cose che non vanno: il testo a
   #999 su quel fondo dà 2,4:1, e a peso 200 di maiuscole non si legge
   niente. Qui è #555 a peso 400: stesso tono, 7:1 di contrasto. */
.menu {
  background: linear-gradient(to bottom, #fff, #ededed);
  border-bottom: 1px solid #c9c9c9;
}
.menu ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.menu a {
  display: block;
  padding: 15px 8px 14px;
  border-bottom: 3px solid transparent;
  color: #555;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
}
.menu a:hover { color: var(--rosso-cupo); border-bottom-color: var(--rosso); }
.menu a[aria-current] { color: var(--scuro); border-bottom-color: var(--rosso); }

/* le freccette delle voci che aprono un sottomenu, come oggi */
.menu .apre::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-inline-start: 6px;
  vertical-align: 0.18em;
  border-inline: 4px solid transparent;
  border-top: 4px solid #999;
}
.menu .apre:hover::after { border-top-color: var(--rosso); }

/* --- la slide -------------------------------------------------------- */
/* Le fotografie si vedono INTERE: il cliente ce l'ha chiesto il 28/10/2026,
   «le foto si vedono tutte tagliate». Una fascia larga e bassa non può
   contenere per intero uno scatto 3:2 senza tagliarlo, quindi la fotografia
   sta dentro la fascia tutta quanta (`contain`) e il resto della banda lo
   riempie la stessa fotografia, ingrandita e sfocata. Niente bordi neri,
   niente teste tagliate, e la fascia resta dell'altezza di prima.
   Lo sfondo arriva da `--sfondo`, che scrive sito.py: è la copia da 560 px,
   perché sotto una sfocatura da 24 px non serve altro. */
.slide { position: relative; background: #111; overflow: hidden; }
/* La fotografia è larga quanto lo schermo e alta quanto viene: nessun
   ritaglio, nessuna altezza fissa da indovinare. È la richiesta del cliente
   del 28/10/2026 — «le foto si vedono tutte tagliate» — presa alla lettera.
   Sull'apertura della home non si può fare lo stesso, perché lì la
   fotografia deve stare dentro la prima schermata: vedi `.schermo`. */
.slide img { display: block; width: 100%; height: auto; }
.slide__didascalia {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  margin: 0;
  padding: 24px 28px 20px 80px;
  background: linear-gradient(to left, rgb(0 0 0 / 60%), transparent);
  color: #fff;
  font-size: clamp(18px, 2.2vw, 29px);
  font-weight: 300;
}
.slide__didascalia b { font-weight: 600; text-transform: uppercase; }
.slide__pallini { position: absolute; inset-block-end: 13px; inset-inline-start: 0; width: 100%; display: flex; justify-content: center; gap: 9px; }
.slide__pallini[hidden] { display: none; }
/* Il pallino si vede 11 px ma si tocca 23: su un telefono un bersaglio di
   undici pixel non lo prende nessuno. Il fondo sta dentro il padding. */
.slide__pallini .pallino {
  width: 11px; height: 11px; padding: 6px; border: 0;
  background: rgb(255 255 255 / 55%) content-box;
  border-radius: 50%; box-sizing: content-box;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 45%));
}
.slide__pallini .pallino[aria-current="true"] { background: #fff content-box; }
.slide__pallini .pallino:hover { background: rgb(255 255 255 / 85%) content-box; }
.slide__pallini .pallino:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 640px) {
  .slide__didascalia { padding: 16px 16px 14px 46px; }
  /* Sul telefono la didascalia arriva fin quasi a metà fotografia: i pallini
     si spostano a sinistra, o finiscono sotto le parole. */
  .slide__pallini { justify-content: flex-start; padding-inline-start: 8px; }
}

/* --- la riga del MEPA, centrata come oggi ----------------------------- */
.mepa { margin: 0; padding-block: 16px; border-bottom: 1px solid #d6d6d6; text-align: center; font-size: 15px; color: var(--tenue); }
.mepa b { color: var(--testo); font-weight: 600; }

/* --- il testo di presentazione ---------------------------------------- */
.presentazione { padding-block: 34px 40px; }
.testo-su-grigio { background: var(--banda-chiara); }
/* Oggi queste righe sono lunghe quanto lo schermo e si perde il segno;
   ma una colonna sola stretta lascia mezza pagina vuota a destra. Qui la
   destra la occupa il riquadro della pubblica amministrazione, ripreso
   dalla bozza 01: la misura del testo resta leggibile e la larghezza si
   riempie tutta. */
.presentazione__testo { columns: 2; column-gap: 46px; }
@media (max-width: 700px) { .presentazione__testo { columns: 1; } }
/* Il contenuto viene dalla bozza 01, la veste no: lì era una scheda bianca
   con il filo rosso, cioè un oggetto che in questa pagina non esiste. Qui
   è trattato come i blocchi della fascia dei dati più in basso — titoletto
   maiuscolo piccolo, testo normale, un filo sottile a separare la colonna —
   così sta sul grigio senza sembrarci appoggiato sopra. */
.riquadro-mepa { border-top: 1px solid #cfcfcf; padding-top: 16px; }
@media (min-width: 820px) {
  .riquadro-mepa {
    border-top: 0; padding-top: 4px;
    border-inline-start: 1px solid #cfcfcf; padding-inline-start: 30px;
  }
}
.riquadro-mepa h3 {
  margin: 0 0 9px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--scuro);
}
.riquadro-mepa p { margin: 0; font-size: 15px; }
.presentazione p { margin: 0 0 14px; }
.presentazione p:last-child { margin-bottom: 0; }
.presentazione strong { font-weight: 600; color: var(--scuro); }

/* --- la fascia grigia dei dati ----------------------------------------- */
.dati { background: var(--banda); padding-block: 32px 30px; }
.dati__griglia { display: grid; gap: 24px 30px; }
@media (min-width: 620px) { .dati__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .dati__griglia { grid-template-columns: repeat(4, 1fr); } }
.dati h2, .dati h3 {
  margin: 0 0 9px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--scuro);
}
.dati p { margin: 0 0 7px; font-size: 15px; }
.dati p:last-child { margin-bottom: 0; }
.dati a { text-decoration: none; }
.dati a:hover { color: var(--rosso-cupo); }

/* --- chiusura ---------------------------------------------------------- */
.chiusura { background: var(--banda); border-top: 1px solid #bdbdbd; font-size: 13.5px; }
.chiusura__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 14px 16px; }
.chiusura a { text-decoration: none; }

/* La riga rossa in fondo c'è già nel foglio di stile del sito: il tema
   la mette sul contenitore e oggi non si vede perché il contenitore è
   a tutta larghezza. Qui torna a farsi vedere. */
/* L'apertura a schermo pieno: una colonna alta quanto la finestra, in cui
   testata e menu prendono la loro altezza naturale e la fotografia si
   prende tutto lo spazio che avanza. Niente altezze fisse da indovinare. */
.schermo { position: relative; display: flex; flex-direction: column; }
/* Anche in apertura la fotografia è larga quanto lo schermo e alta quanto
   viene: niente ritaglio, come nelle fasce interne. Le quattro stanno una
   sopra l'altra nella stessa cella di griglia e si danno il cambio in
   dissolvenza — l'alternanza che il cliente ha chiesto. L'altezza la detta
   la più alta delle quattro; le altre, che hanno proporzioni un po' diverse,
   restano centrate e lo spazio che avanza lo riempie la stessa fotografia
   sfocata. */
.schermo .giostra { position: relative; display: grid; }
.giostra .slide {
  grid-area: 1 / 1; margin: 0;
  display: grid; align-content: center;
  opacity: 0; transition: opacity .9s ease;
}
.giostra .slide--viva { opacity: 1; }
.giostra .slide[aria-hidden="true"] { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .giostra .slide { transition: none; } }
.schermo .slide picture { display: contents; }
.schermo .slide img { position: relative; width: 100%; height: auto; }
.schermo .slide__didascalia { font-size: clamp(22px, 2.6vw, 36px); padding: 30px 34px 26px 90px; }

/* Sul telefono la finestra è stretta e alta: una foto a tutta altezza
   diventerebbe una colonna verticale senza senso. Lì torna una banda. */
@media (max-width: 760px) {
  /* sul telefono la fotografia è già bassa di suo: niente da forzare */
  /* la didascalia torna alla misura della banda: a corpo grande occuperebbe
     un quarto della fotografia */
  .schermo .slide__didascalia { font-size: 18px; padding: 16px 16px 14px 46px; }
}

/* =======================================================================
   Blocchi ripresi dalla bozza 01, rivestiti con i grigi della 02.
   ======================================================================= */

.sezione { padding-block: 40px; }
.su-carta  { background: var(--carta); }
.su-chiaro { background: var(--banda-chiara); }

.titolo-sezione {
  margin-bottom: 22px; padding-bottom: 10px;
  border-bottom: 2px solid var(--rosso);
}
.titolo-sezione h2 { margin: 0; font-size: 22px; font-weight: 600; }

/* --- i settori --------------------------------------------------------- */
.caselle {
  display: grid; gap: 18px;
  /* 210px: con otto settori vanno quattro per riga, cioè 4 + 4, senza
     lasciare buchi nell'ultima riga. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}
.casella {
  background: var(--carta); border: 1px solid #cfcfcf;
  text-decoration: none; transition: border-color .18s, box-shadow .18s;
}
.casella:hover { border-color: var(--rosso); box-shadow: 0 5px 16px rgb(0 0 0 / 12%); }
.casella img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.casella b {
  display: block; padding: 10px 12px;
  background: var(--testo); color: #fff;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; text-align: center;
}
.casella:hover b { background: var(--rosso-cupo); }

/* --- il contract ------------------------------------------------------- */
.elenco { display: grid; gap: 2px 34px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px)  { .elenco { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .elenco { grid-template-columns: repeat(3, 1fr); } }
.elenco li {
  position: relative; padding: 6px 0 6px 24px;
  border-bottom: 1px solid #d4d4d4; font-size: 15.5px;
}
.elenco li::before {
  content: "›"; position: absolute; inset-inline-start: 6px;
  color: var(--rosso); font-weight: 700;
}

/* --- i soci ------------------------------------------------------------ */
.soci { display: grid; gap: 20px; }
@media (min-width: 760px) { .soci { grid-template-columns: repeat(3, 1fr); } }
.socio {
  padding: 18px 20px; background: var(--carta);
  border: 1px solid #cfcfcf; border-top: 3px solid var(--rosso);
}
.socio h3 { margin: 0 0 4px; font-size: 19px; }
.socio p { margin: 0; font-size: 15.5px; color: var(--tenue); }

/* --- il richiamo finale -------------------------------------------------
   Nella 01 è una fascia rossa a tutta larghezza. Qui no: la 02 la fascia
   rossa l'aveva tolta. Resta il grigio delle altre bande, e il rosso sta
   tutto nel bottone. */
/* I tre marchi stanno su una riga sola e alla stessa misura: i file di LL-C
   non erano fatti allo stesso modo, li rimette in riga _build/loghi-iso.py. */
.iso { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.iso img { height: 26px; width: auto; }
@media (max-width: 420px) { .iso { gap: 9px; } .iso img { height: 20px; } }

.richiamo { background: var(--banda); border-top: 1px solid #bdbdbd; padding-block: 30px; }
.richiamo__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 30px; flex-wrap: wrap;
}
.richiamo h2 { margin: 0; font-size: 23px; font-weight: 600; }
.richiamo p { margin: 4px 0 0; color: var(--tenue); }
.bottone {
  display: inline-block; padding: 12px 26px;
  background: var(--rosso); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: 0.4px;
  text-decoration: none; white-space: nowrap;
}
.bottone:hover { background: var(--scuro); color: #fff; }

/* =======================================================================
   Aggiunte per le pagine interne. La bozza copriva solo la home: qui ci
   sono i pezzi che servono alle sezioni, scritti con gli stessi grigi.
   ======================================================================= */

/* Nelle pagine interne i riquadri delle sottosezioni non sono link: le
   sottopagine di prodotto non esistono ancora. Stessa veste, senza il
   comportamento da bottone. */
.casella:not(a) { cursor: default; }
.casella:not(a):hover { border-color: #cfcfcf; box-shadow: none; }

/* --- la galleria delle realizzazioni ---------------------------------- */
.galleria {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.scatto { margin: 0; background: var(--carta); border: 1px solid #cfcfcf; }
.scatto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scatto figcaption {
  padding: 9px 12px; font-size: 13.5px; color: var(--tenue); line-height: 1.4;
}

/* Il sottotitolo sotto il titolo di pagina: stessa misura degli altri h2
   della pagina, senza il filetto rosso che spetta al titolo. */
.sottotitolo { margin: 0 0 18px; font-size: 20px; font-weight: 600; color: var(--scuro); }

/* --- blocchi di testo affiancati, per i contatti ----------------------- */
.caselle-testo { display: grid; gap: 26px 34px; }
@media (min-width: 700px)  { .caselle-testo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .caselle-testo { grid-template-columns: repeat(3, 1fr); } }
.caselle-testo h3 {
  margin: 0 0 9px; font-size: 14px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--scuro);
}
.caselle-testo p { margin: 0 0 9px; }
.caselle-testo a { text-decoration: none; }

/* --- pagine di solo testo, privacy e condizioni ------------------------ */
.testo { max-width: 70ch; }
.testo h2 { margin: 28px 0 10px; font-size: 19px; }
.testo h2:first-child { margin-top: 0; }
.testo p { margin: 0 0 12px; }
.testo ul { margin: 0 0 12px; padding-inline-start: 22px; }
.testo li { margin-block: 5px; }
.testo a { color: var(--rosso-cupo); }

/* L'avviso: la stessa riga rossa del negozio, che qui non arriva perché
   queste pagine caricano solo sito.css. Deve interrompere la lettura. */
.testo .avviso {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-inline-start: 4px solid var(--rosso);
  background: var(--banda-chiara);
  font-size: 15px;
}
.testo .avviso p:last-child { margin-bottom: 0; }

/* Il modulo di recesso: si deve vedere che è un fac-simile da compilare. */
.testo .riquadro {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  background: var(--carta);
  font-size: 15px;
}
.testo .riquadro p:last-child { margin-bottom: 0; }

.testo .note { color: var(--tenue); font-size: 14px; }
.nowrap { white-space: nowrap; }

/* --- la banda dell'apertura nelle pagine interne ------------------------ */
.fascia-slide .slide__didascalia { font-size: clamp(18px, 2vw, 26px); }

/* --- il menu a tendina, come quello del sito di oggi --------------------
   Senza JavaScript: la tendina sta dentro il <li>, si apre al passaggio del
   mouse e anche con il Tab, perché :focus-within la tiene aperta mentre si
   percorrono le voci con la tastiera. */
.menu li { position: relative; }
.tendina {
  position: absolute; inset-inline-start: 0; inset-block-start: 100%;
  z-index: 40; min-width: 240px;
  background: var(--carta); border: 1px solid #c9c9c9; border-top: 0;
  box-shadow: 0 10px 24px rgb(0 0 0 / 14%);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s, transform .14s, visibility .14s;
}
.menu li:hover > .tendina,
.menu li:focus-within > .tendina { opacity: 1; visibility: visible; transform: none; }
.tendina ul { display: block; margin: 0; padding: 0; list-style: none; }
.tendina a {
  display: block; padding: 9px 16px;
  font-size: 13.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--testo); border: 0; white-space: nowrap;
}
.tendina a:hover { background: var(--banda-chiara); color: var(--rosso-cupo); }
.tendina ul ul a { padding-inline-start: 30px; color: var(--tenue); font-size: 13px; }
.tendina ul ul a::before { content: "– "; color: #bbb; }

/* --- il menu sul telefono ----------------------------------------------
   Undici voci distese andavano a capo tre volte, e le tendine non si
   aprivano: al primo tocco cambiava pagina. Qui il menu sta dietro un tasto
   e ogni sezione apre le sue voci con un comando a parte. Il tasto lo
   accende `assets/js/menu.js`: senza JavaScript resta il menu disteso. */
.menu__tasto {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px 0;
  background: none; border: 0;
  color: #555; font: inherit; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
}
.menu__tasto[hidden] { display: none; }
/* Il comando che apre le sottovoci lo aggiunge menu.js a ogni sezione, a
   qualsiasi larghezza, ma serve solo al menu compatto. Senza questa riga,
   sopra gli 860 px resta un tasto senza stile — cinque rettangolini grigi
   sotto il menu — perché l'aspetto glielo dà solo il blocco qui sotto. */
.menu__ramo { display: none; }
.menu__barre {
  position: relative; width: 20px; height: 2px; background: var(--scuro);
}
.menu__barre::before, .menu__barre::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--scuro);
}
.menu__barre::before { top: -6px; }
.menu__barre::after { top: 6px; }
/* aperto, le tre barre diventano una croce */
.menu--aperto .menu__barre { background: transparent; }
.menu--aperto .menu__barre::before { top: 0; transform: rotate(45deg); }
.menu--aperto .menu__barre::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  /* chiuso: si vede solo il tasto. Vale per l'elenco principale, non per
     quelli dentro le tendine: quelli li comanda la voce che li apre. */
  .menu--compatto > .shell > ul { display: none; }
  .menu--compatto.menu--aperto > .shell > ul { display: block; padding-block-end: 10px; }
  .menu--compatto li { position: relative; border-top: 1px solid #ddd; }
  .menu--compatto li a { padding: 13px 44px 13px 0; }
  /* il comando che apre le sottovoci, accanto al nome della sezione */
  .menu__ramo {
    display: block;
    position: absolute; inset-block-start: 0; inset-inline-end: 0;
    width: 44px; height: 46px; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .menu__ramo::before, .menu__ramo::after {
    content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
    width: 13px; height: 2px; margin: -1px 0 0 -6.5px; background: #888;
  }
  .menu__ramo::after { transform: rotate(90deg); transition: transform .15s; }
  .voce--aperta > .menu__ramo::after { transform: rotate(0deg); }
  .voce--aperta > .menu__ramo::before { background: var(--rosso); }
  .voce--aperta > .menu__ramo::after { background: var(--rosso); }

  /* la tendina diventa un elenco che scende sotto la voce */
  .menu--compatto .apre::after { display: none; }
  .menu--compatto .tendina {
    position: static; display: none;
    min-width: 0; border: 0; box-shadow: none; background: var(--banda-chiara);
    opacity: 1; visibility: visible; transform: none;
  }
  .menu--compatto .voce--aperta > .tendina { display: block; }
  .menu--compatto .tendina a { white-space: normal; padding: 11px 16px; }
  .menu--compatto .tendina li { border-top: 1px solid #e3e3e3; }
  .menu--compatto .tendina ul ul a { padding-inline-start: 32px; }
}

/* Dove il menu disteso c'è ancora (senza JavaScript) le tendine restano
   fuori strada: si aprirebbero per sbaglio al primo tocco. */
@media (max-width: 860px) {
  .menu:not(.menu--compatto) .tendina { display: none; }
}

/* --- le briciole di pane ------------------------------------------------ */
.briciole { background: var(--banda-chiara); border-bottom: 1px solid #d6d6d6; }
.briciole .shell { padding-block: 10px; font-size: 13.5px; color: var(--tenue); }
.briciole a { color: var(--tenue); text-decoration: none; }
.briciole a:hover { color: var(--rosso-cupo); }

/* nelle pagine interne il titolo è un h1 ma deve pesare come gli h2 */
.titolo-sezione h1 { margin: 0; font-size: 22px; font-weight: 600; }

/* --- la lente: la fotografia aperta a tutta pagina ----------------------
   È un <dialog>, quindi la chiusura con Esc e il fondo scuro li fa il
   browser. Senza JavaScript il link porta comunque alla foto grande. */
.scatto a.ingrandisci { display: block; line-height: 0; cursor: zoom-in; }
.scatto a.ingrandisci:focus-visible { outline: 2px solid var(--rosso); outline-offset: 2px; }

.lente {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  overflow: hidden;
}
.lente::backdrop { background: rgb(0 0 0 / 86%); }
.lente__corpo {
  margin: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 48px 64px;
}
.lente__corpo img {
  max-width: 100%; max-height: calc(100% - 44px);
  width: auto; height: auto; object-fit: contain;
  background: #111;
}
.lente__corpo figcaption {
  color: #fff; font-size: 14px; letter-spacing: 0.3px; text-align: center;
}

.lente__chiudi, .lente__passo {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: rgb(255 255 255 / 12%); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  font-size: 30px; line-height: 1; font-family: inherit;
}
.lente__chiudi { inset-block-start: 14px; inset-inline-end: 16px; font-size: 26px; }
.lente__passo { inset-block-start: 50%; transform: translateY(-50%); font-size: 34px; }
.lente__passo--prima { inset-inline-start: 12px; }
.lente__passo--dopo { inset-inline-end: 12px; }
.lente__chiudi:hover, .lente__passo:hover { background: rgb(255 255 255 / 26%); }

@media (max-width: 700px) {
  .lente__corpo { padding: 56px 12px 20px; }
  .lente__passo { inset-block-end: 16px; inset-block-start: auto; transform: none; }
}

/* =======================================================================
   Ponte per il negozio.

   Il foglio del negozio (shop.css) è stato scritto con i nomi della grafica
   precedente. Invece di riscriverlo riga per riga — e rischiare di rompere
   carrello e checkout, che funzionano — qui i vecchi nomi vengono ridefiniti
   sui colori di questa grafica. Il negozio eredita così la stessa tavolozza
   del sito senza toccarne il codice.

   Le misure dei testi sono quelle che il negozio già si aspetta.
   ======================================================================= */
:root {
  --paper:      var(--carta);
  --sheet:      var(--banda-chiara);
  --sheet-2:    var(--banda);
  --ink:        var(--testo);
  --graphite:   var(--scuro);
  --muted:      var(--tenue);
  --rule:       #cfcfcf;
  --rule-soft:  var(--riga-tenue);
  --signal:     var(--rosso);
  --signal-deep: var(--rosso-cupo);

  --t-xs:   0.78rem;
  --t-sm:   0.88rem;
  --t-base: 1rem;
  --t-md:   1.15rem;
  --t-lg:   1.38rem;
  --t-xl:   1.75rem;
}

/* Il salto al contenuto e i testi per i soli lettori di schermo: stavano nel
   foglio della grafica precedente, che il negozio non carica più. Senza, il
   «Vai al contenuto» resta in mezzo alla pagina e le etichette nascoste dei
   moduli si vedono tutte. */
.skip {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: 0;
  z-index: 100;
  padding: 10px 18px;
  background: var(--scuro);
  color: #fff;
  text-decoration: none;
}
.skip:focus { inset-inline-start: 0; }

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

/* --- l'invito a scorrere ------------------------------------------------
   Con la fotografia alta quanto vuole, sullo schermo grande la prima
   schermata è tutta immagine e non si vede che sotto c'è dell'altro. Questo
   bottone sta in basso, fisso, e sparisce al primo scorrimento: lo accende
   `apertura.js`, quindi senza JavaScript non compare — è un aiuto, non un
   comando. */
.giu {
  position: fixed; inset-inline: 0; inset-block-end: 22px;
  z-index: 30;
  width: 46px; height: 46px; margin-inline: auto; padding: 0;
  border: 0; border-radius: 50%;
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
  cursor: pointer;
  transition: opacity .3s ease, visibility .3s ease;
}
.giu::before {
  content: ""; position: absolute; inset-block-start: 16px; inset-inline-start: 15px;
  width: 13px; height: 13px;
  border-right: 2.5px solid var(--rosso); border-bottom: 2.5px solid var(--rosso);
  transform: rotate(45deg);
}
.giu:hover { background: #fff; }
.giu[hidden] { display: none; }
.giu--via { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .giu { animation: giu-salta 2.4s ease-in-out infinite; }
  @keyframes giu-salta {
    0%, 70%, 100% { transform: translateY(0); }
    82%           { transform: translateY(6px); }
  }
}

/* ---------------------------------------------------- avviso sui cookie
   Una striscia in fondo, non un velo sopra la pagina: non c'è niente da
   scegliere, quindi non si blocca la lettura. Nasce nascosta e la accende
   `assets/js/cookie.js` — senza JavaScript non ci sarebbe modo di chiuderla. */
.cookie {
  position: fixed; inset-inline: 0; inset-block-end: 0;
  z-index: 40;
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem;
  align-items: center; justify-content: center;
  padding: .85rem 1.1rem;
  background: var(--carta);
  border-block-start: 3px solid var(--rosso);
  box-shadow: 0 -2px 14px rgb(0 0 0 / 14%);
  font-size: .9rem; line-height: 1.45; color: var(--testo);
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; max-width: 62ch; }
.cookie a { color: var(--rosso-cupo); }
.cookie__ok {
  flex: none;
  padding: .5rem 1.3rem;
  border: 0; border-radius: 2px;
  background: var(--rosso); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
.cookie__ok:hover { background: var(--rosso-cupo); }

/* Sul telefono l'avviso e il cerchietto «scorri» finirebbero uno sull'altro:
   vince l'avviso, che si chiude, e l'altro si alza. */
.cookie:not([hidden]) ~ .giu { inset-block-end: 100px; }

@media (max-width: 560px) {
  .cookie { justify-content: flex-start; font-size: .85rem; }
  .cookie__ok { width: 100%; }
}