/* ===========================================================
   andreapiccioni.net
   Un solo tema, quello del marchio: fondo blu notte, ciano, rosso.
   =========================================================== */

:root {
  --fondo: #2b2d3b;
  --fondo-alt: #333544;
  --fondo-scuro: #242632;
  --linea: #3f4152;

  --testo: #b9b8b4;      /* 6,9:1 sul fondo — sopra la soglia WCAG AA */
  --testo-forte: #f2f1ee;
  --testo-tenue: #8e8d95;

  --ciano: #28ccd2;
  --ciano-scuro: #15979c;
  --rosso: #f30007;

  --larghezza: 1120px;
  --gutter: clamp(20px, 5vw, 48px);

  --display: "Fjalla One", "Haettenschweiler", Impact, sans-serif;
  --testo-font: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--testo-font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ciano); text-underline-offset: .18em; }
a:hover { color: var(--testo-forte); }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ciano);
  line-height: 1.12;
  letter-spacing: .01em;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(30px, 5.4vw, 52px); }
h2 { font-size: clamp(24px, 3.4vw, 34px); margin-top: 2em; }
h3 { font-size: clamp(19px, 2.2vw, 23px); color: var(--testo-forte); margin-top: 1.8em; }
h4 { font-size: 17px; color: var(--testo-forte); margin-top: 1.5em; }

p, ul, ol { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .45em; }
strong { color: var(--testo-forte); font-weight: 500; }

/* Il collegamento che gli screen reader annunciano per primo */
.salta {
  position: absolute; left: -9999px; top: 0;
  background: var(--ciano); color: var(--fondo-scuro);
  padding: 12px 20px; font-weight: 500; z-index: 100;
}
.salta:focus { left: 0; }

/* ---------- testata ---------- */

.testata {
  background: var(--fondo-scuro);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 50;
}
.testata-interno {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.logo { display: block; flex: 0 0 auto; }
.logo img { width: clamp(180px, 26vw, 260px); height: auto; }

.navigazione { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.navigazione ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 20px;
}
.navigazione li { margin: 0; }
.navigazione a {
  font-family: var(--display);
  font-size: 14px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--testo-forte); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
  display: block;
}
.navigazione a:hover { color: var(--ciano); border-bottom-color: var(--ciano); }
.navigazione a[aria-current="page"] { color: var(--ciano); border-bottom-color: var(--rosso); }

/* selettore di lingua: due opzioni affiancate, l'attiva evidenziata.
   Si capisce a colpo d'occhio che è una scelta, non un'etichetta. */
.lingue {
  display: inline-flex; flex: 0 0 auto;
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 3px; gap: 2px; background: var(--fondo-alt);
}
.lingua {
  font-family: var(--display);
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
  padding: 7px 13px; border-radius: 999px;
  color: var(--testo); text-decoration: none; line-height: 1;
  transition: background-color .16s, color .16s;
}
.lingua:hover { color: var(--testo-forte); background: rgba(127,127,127,.16); }
.lingua.attiva { background: var(--rosso); color: #fff; }
.lingua.attiva:hover { background: var(--rosso); color: #fff; }

/* dei due loghi il tema ne mostra uno solo */
.logo-scuro { display: none; }

.apri-menu { display: none; }

/* ---------- contenuto ---------- */

main { display: block; }

.sezione {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 76px) var(--gutter);
}
.sezione + .sezione { padding-top: 0; }
.sezione-scura { background: var(--fondo-alt); max-width: none; }
.sezione-scura > * { max-width: var(--larghezza); margin-inline: auto; }

.misura { max-width: 68ch; }

/* apertura: testo a sinistra, ritratto a destra che sfuma nel fondo */
.apertura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--gutter);
}
.apertura-testo h1 { color: var(--ciano); margin-bottom: 0; }
.apertura-riga {
  width: 64px; height: 4px; background: var(--rosso);
  border-radius: 2px; margin: 22px 0 18px;
}
.apertura-ruolo {
  font-family: var(--display); font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--testo-forte); margin: 0 0 18px;
}
.apertura-testo p { max-width: 46ch; }
.apertura-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 14%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 14%, #000 45%);
}

/* pulsanti */
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.pulsante {
  display: inline-block;
  font-family: var(--display); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--ciano); color: var(--ciano);
  text-decoration: none; transition: background-color .18s, color .18s;
}
.pulsante:hover { background: var(--ciano); color: var(--fondo-scuro); }
.pulsante-pieno { background: var(--ciano); color: var(--fondo-scuro); }
.pulsante-pieno:hover { background: var(--testo-forte); color: var(--fondo-scuro); }

/* citazioni stampa */
.stampa { display: grid; gap: 26px; margin: 34px 0 38px; }
.stampa blockquote {
  margin: 0; padding: 0 0 0 18px;
  border-left: 2px solid var(--rosso);
  font-style: italic; color: var(--testo);
}
.stampa blockquote p { margin: 0 0 .4em; }
.stampa cite {
  display: block;            /* era in linea: si incollava al testo seguente */
  margin-top: .7em;
  font-style: normal; font-size: 14px;
  color: var(--testo-tenue); letter-spacing: .02em;
}
.stampa cite b { color: var(--testo-forte); font-weight: 500; }

/* video incorporato, senza saltelli di layout */
.video {
  position: relative; aspect-ratio: 16 / 9;
  margin: 28px 0; background: var(--fondo-scuro); border-radius: 4px; overflow: hidden;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* schede: libri, corsi, strumenti */
.griglia { display: grid; gap: 28px; margin: 28px 0; }
.griglia-2 { grid-template-columns: repeat(2, 1fr); }
.griglia-3 { grid-template-columns: repeat(3, 1fr); }
/* colonne fisse: con auto-fit una griglia da 4 o 6 schede lasciava orfani in fondo */
@media (max-width: 820px) { .griglia-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .griglia-2, .griglia-3 { grid-template-columns: 1fr; } }
.scheda {
  background: var(--fondo-alt); border: 1px solid var(--linea);
  border-radius: 6px; padding: 22px; margin: 0;
}
.scheda h3 { margin-top: 0; }
.scheda p:last-child { margin-bottom: 0; }

/* ---------- piede ---------- */

.piede {
  background: var(--fondo-scuro);
  border-top: 1px solid var(--linea);
  margin-top: clamp(48px, 8vw, 90px);
}
.piede-interno {
  max-width: var(--larghezza); margin: 0 auto;
  padding: 40px var(--gutter) 46px;
  display: flex; flex-direction: column; gap: 22px;
  align-items: center; text-align: center;
}
.social { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.copyright { margin: 0; font-size: 14px; color: var(--testo-tenue); }

/* ---------- schermi stretti ---------- */

@media (max-width: 860px) {
  .apertura { grid-template-columns: 1fr; }
  /* il messaggio prima del ritratto */
  .apertura-testo { order: 1; }
  .apertura-foto { order: 2; }
  .apertura-foto img {
    aspect-ratio: 1 / 1;
    -webkit-mask-image: linear-gradient(0deg, transparent 0, rgba(0,0,0,.4) 10%, #000 38%);
            mask-image: linear-gradient(0deg, transparent 0, rgba(0,0,0,.4) 10%, #000 38%);
  }
}

@media (max-width: 900px) {
  .apri-menu {
    display: inline-flex; align-items: center; gap: 10px;
    margin-left: auto;
    background: none; border: 1px solid var(--linea); border-radius: 4px;
    color: var(--testo-forte); font-family: var(--display);
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    padding: 9px 14px; cursor: pointer;
  }
  .apri-menu .tratti {
    width: 16px; height: 2px; background: var(--ciano);
    box-shadow: 0 5px 0 var(--ciano), 0 -5px 0 var(--ciano);
  }
  .navigazione {
    flex-basis: 100%; margin-left: 0;
    display: none; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 10px 0 4px;
  }
  body.menu-aperto .navigazione { display: flex; }
  .navigazione ul { flex-direction: column; gap: 0; width: 100%; }
  .navigazione a { padding: 10px 0; border-bottom: 1px solid var(--linea); width: 100%; }
  .navigazione a[aria-current="page"] { border-bottom-color: var(--rosso); }
  .lingua { margin-top: 10px; }
  .piede-interno { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================
   APERTURA A TUTTO CAMPO
   La fascia occupa tutta la larghezza dello schermo e il
   ritratto esce dal bordo destro invece di stare in un
   riquadro. Il testo sta a sinistra, sul fondo scuro.
   Il materiale fotografico solista è verticale: questa
   impaginazione lo sfrutta invece di ritagliarlo male.
   =========================================================== */

.apertura-piena {
  position: relative;
  background: #0b0a10;
  overflow: hidden;
  isolation: isolate;
}
.apertura-piena .dentro {
  position: relative; z-index: 2;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: clamp(140px, 18vw, 230px) var(--gutter) clamp(60px, 9vw, 100px);
  color: #f6f1e8;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
.apertura-piena .parole { max-width: 44ch; }

/* il ritratto: esce dal bordo destro e sfuma nel fondo */
.apertura-piena > img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 100% 46%;
}
/* un velo rosso appena accennato, per legare foto e marchio */
/* velatura che tiene leggibile il testo sopra la fotografia */
.apertura-piena::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,10,16,.92) 0%, rgba(11,10,16,.62) 38%, rgba(11,10,16,0) 66%);
}

/* le tre voci in colonna: in riga attraversavano il viso nella foto */
.occhiello {
  list-style: none;
  font-size: clamp(10.5px, 1vw, 12px); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: #ff5a5f;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 5px;
}
.occhiello li { margin: 0; list-style: none; }
.occhiello li::marker { content: ""; }
.apertura-piena h1 { color: #fff; margin: 0 0 16px; }
.apertura-piena h1 .acceso { color: var(--rosso); }
.apertura-piena .sottotitolo {
  font-size: clamp(16px, 1.8vw, 19px);
  color: rgba(246,241,232,.88);
  margin: 0;
}
.apertura-piena .azioni {
  margin-top: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
.apertura-piena .azioni .pulsante {
  min-width: 248px;
  text-align: center;
  padding: 14px 24px;
  white-space: nowrap;
}
.apertura-piena .pulsante {
  border-color: rgba(255,255,255,.32);
  color: #fff;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.apertura-piena .pulsante:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.apertura-piena .pulsante-pieno { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.apertura-piena .pulsante-pieno:hover { background: #ff2a30; border-color: #ff2a30; }

/* la testata galleggia sopra la fascia scura */
body.apertura-scura .testata {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(10,8,7,.6), transparent);
  border-bottom: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.apertura-scura .testata .navigazione a { color: #f6f1e8; }
body.apertura-scura .testata .logo-scuro { display: none; }
body.apertura-scura .testata .logo-chiaro { display: block; }
body.apertura-scura .lingue { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
body.apertura-scura .lingua { color: #f6f1e8; }
body.apertura-scura .lingua:hover { background: rgba(255,255,255,.2); color: #fff; }

@media (max-width: 860px) {
  .apertura-piena { min-height: 82vh; }
  .apertura-piena .dentro {
    grid-template-columns: 1fr;
    padding-top: clamp(110px, 24vw, 160px);
    padding-bottom: clamp(44px, 9vw, 72px);
  }
  .apertura-piena .parole { max-width: none; }
  /* su telefono il ritratto scende in basso e sfuma verso l'alto */
  .apertura-piena > img { object-position: 88% 30%; }
  .apertura-piena::after {
    background: linear-gradient(0deg, rgba(11,10,16,.96) 20%, rgba(11,10,16,.7) 58%, rgba(11,10,16,.35) 100%);
  }
}

/* ---------- modulo contatti ---------- */
.modulo { max-width: 46rem; }
.modulo p { margin: 0 0 18px; }
.modulo label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--testo-tenue);
}
.modulo input, .modulo select, .modulo textarea {
  width: 100%; padding: 13px 15px;
  font: inherit; font-size: 16px;
  color: var(--testo-forte);
  background: var(--fondo-alt);
  border: 1px solid var(--linea);
  border-radius: 10px;
}
.modulo textarea { resize: vertical; min-height: 150px; }
.modulo input:focus-visible, .modulo select:focus-visible, .modulo textarea:focus-visible {
  outline: 2px solid var(--rosso); outline-offset: 2px; border-color: transparent;
}
.modulo button { cursor: pointer; font-family: inherit; }
/* trappola antispam: invisibile a chi legge, visibile ai robot */
.nascosto { position: absolute; left: -9999px; }

/* schede con immagine: strumenti, libri */
figure.scheda { padding: 0; overflow: hidden; }
figure.scheda img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
figure.scheda figcaption { padding: 14px 18px 16px; font-size: 15px; }

/* ===========================================================
   FASCE DI IMMAGINE
   Respiro fra una sezione e l'altra. Regola: l'immagine si
   vede INTERA. Ritagliare a un formato fisso decide da solo
   dove tagliare, e taglia teste e scritte.
   =========================================================== */
.banda {
  margin: clamp(36px, 6vw, 72px) auto;
  max-width: var(--larghezza);
  padding-inline: var(--gutter);
}
.banda img {
  width: 100%;
  height: auto;              /* nessun ritaglio: rapporto originale */
  border-radius: var(--raggio, 14px);
  display: block;
}
.banda figcaption {
  padding-top: 12px;
  font-size: 14px;
  color: var(--testo-tenue);
}

/* Solo per immagini verificate, dove il ritaglio non toglie nulla:
   fascia a tutta larghezza. Va usata sapendo cosa si taglia. */
.banda-piena {
  max-width: none;
  padding-inline: 0;
  background: var(--fondo-scuro);
}
.banda-piena img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 0;
}
.banda-piena figcaption {
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 700px) {
  .banda-piena img { aspect-ratio: 3 / 2; }
}
.credito { color: var(--testo-tenue); font-size: .92em; }

/* strisce di strumenti: 5 per riga, senza orfani */
.griglia-strumenti { grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 900px) { .griglia-strumenti { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .griglia-strumenti { grid-template-columns: repeat(2, 1fr); } }
.griglia-strumenti figcaption { font-size: .88rem; }
.scheda-nuda { padding: 0; background: none; border: 0; box-shadow: none; }
.didascalia-gruppo { max-width: 68ch; margin: -4px 0 0; color: var(--testo-tenue); font-size: .92rem; }

/* etichetta di stato sopra un titolo (In uscita, Novità...) */
.etichetta {
  font-family: var(--display); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rosso); margin: 0 0 6px;
}
.etichetta + h2 { margin-top: 0; }
.altri-store { margin-top: 16px; font-size: .94rem; }
.altri-store summary { cursor: pointer; color: var(--testo-tenue); }
.altri-store summary:hover { color: var(--testo-forte); }
.altri-store p { margin: 10px 0 0; line-height: 1.9; }
.figura-nel-testo { margin: 26px 0; }
.figura-nel-testo img { width: 100%; border-radius: var(--raggio, 14px); }

/* scheda libro: copertina a sinistra, testo a destra */
.libro { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: 24px; }
.libro-copertina { margin: 0; }
.libro-copertina img { width: 100%; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.libro-testo p { max-width: 62ch; }
.sottotitolo-libro { font-family: var(--display); font-size: clamp(17px, 2vw, 21px); color: var(--testo-forte); margin-bottom: 1em; }
@media (max-width: 720px) {
  .libro { grid-template-columns: 1fr; }
  .libro-copertina { max-width: 260px; }
}
.copertina-scheda { width: 100%; max-width: 190px; border-radius: 3px; margin-bottom: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.copertina-piccola { max-width: 130px; }

/* le uscite in home: copertina in alto, testo sotto */
.griglia-uscite { align-items: start; }
/* copertine di formato diverso (3:4 i libri, 1:1 l'EP): stessa altezza di riquadro
   e allineate in basso, così i titoli sotto partono tutti dalla stessa riga */
.scheda-uscita img { height: 200px; width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; border-radius: 3px; margin: 0 0 16px; box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.scheda-uscita .etichetta { margin-bottom: 4px; }
.scheda-uscita h3 { margin-top: 0; font-size: 19px; }

/* un corso: descrizione a sinistra, video dimostrativo a destra */
.corso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.corso-testo p { max-width: 54ch; }
.corso-testo .etichetta { margin-bottom: 8px; }
.corso-testo h2 { margin-top: 0; }
.corso .video { margin: 0; }
@media (max-width: 760px) { .corso { grid-template-columns: 1fr; } }

/* lettori incorporati: Spotify, Apple Music, Bandcamp.
   Larghezza della colonna di testo, non dell'intera pagina: a tutta larghezza
   sbilanciavano la lettura. */
.lettore { margin: 34px 0 6px; max-width: 700px; }
.lettore iframe { width: 100%; max-width: 100%; border: 0; border-radius: 12px; display: block; }
.azioni + .lettore { margin-top: 30px; }
.misura + .lettore { margin-top: 30px; }
.dati { font-size: .92rem; color: var(--testo-tenue); }

/* galleria fotografica: riquadri uniformi, ritaglio dal centro */
.griglia-galleria { gap: 14px; }
.griglia-galleria img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.griglia-galleria figcaption { font-size: .86rem; color: var(--testo-tenue); margin-top: 7px; }
.sottotitolo-scheda { font-family: var(--display); color: var(--testo-forte); margin: -.3em 0 .8em; }
.scheda .azioni { margin-top: 18px; }
.scheda .pulsante { font-size: 12px; padding: 9px 16px; }
.lettore-basso iframe { border: 1px solid var(--linea); }

/* ---------- loghi delle piattaforme ----------
   Un solo blocco di definizioni nel modello, richiamate con <use>.
   Icone Simple Icons, pubblico dominio. */
.marchi-sorgente { position: absolute; width: 0; height: 0; overflow: hidden; }
.marchio { width: 1em; height: 1em; fill: currentColor; display: block; }

/* piede: solo icone, in fila */
.social { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: center; }
.marchio-link {
  color: var(--testo-tenue); font-size: 30px; line-height: 0;
  display: inline-flex; padding: 6px; border-radius: 8px;
  transition: color .16s, transform .16s;
}
.marchio-link:hover { transform: translateY(-2px); }
.marchio-link:hover { color: var(--rosso); }

/* bottone con il logo al posto della scritta */
.pulsante-marchio { padding: 13px 24px; font-size: 26px; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
/* le file di soli loghi vanno centrate; quelle con del testo restano allineate a sinistra */
.azioni:has(.pulsante-marchio):not(:has(.pulsante:not(.pulsante-marchio))) { justify-content: center; }
.pulsante-marchio .marchio { width: 1em; height: 1em; }

/* Sulle pagine con testata sull'immagine scura il pulsante Menu restava
   scuro su scuro: invisibile da telefono. */
body.apertura-scura .apri-menu {
  color: #f6f1e8;
  border-color: rgba(255,255,255,.4);
}
body.apertura-scura .apri-menu .tratti,
body.apertura-scura .apri-menu .tratti::before,
body.apertura-scura .apri-menu .tratti::after { background: #f6f1e8; }
body.apertura-scura .apri-menu .tratti { box-shadow: 0 5px 0 #f6f1e8, 0 -5px 0 #f6f1e8; }
/* a menu aperto serve un fondo pieno, altrimenti le voci cadono sulla foto */
body.apertura-scura.menu-aperto .testata {
  background: rgba(10,8,7,.96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.apertura-scura.menu-aperto .navigazione a { border-bottom-color: rgba(255,255,255,.18); }

/* Da telefono i loghi a 30px occupavano troppo: li riporto in scala. */
@media (max-width: 620px) {
  .marchio-link { font-size: 22px; padding: 5px; }
  .social { gap: 10px 18px; }
  .pulsante-marchio { font-size: 19px; padding: 10px 16px; }
}

/* Il selettore di lingua è uscito dal menu a scomparsa: su telefono e tablet
   deve restare sempre in vista, accanto al pulsante Menu. */
.testata-interno .lingue { margin-left: 12px; }
@media (max-width: 900px) {
  .testata-interno .lingue { margin-left: auto; order: 2; }
  .apri-menu { margin-left: 12px; order: 3; }
  .navigazione { order: 4; }
  .logo { order: 1; }
  .lingua { font-size: 14px; padding: 8px 14px; }
}
/* sulle aperture scure il selettore deve staccarsi dal fondo */
body.apertura-scura .lingue {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.42);
}

/* da telefono la foto d'apertura era troppo spostata a destra */
@media (max-width: 860px) {
  .apertura-piena > img { object-position: 68% 26%; }
}

/* Su telefono logo, selettore di lingua e pulsante Menu devono stare su una riga:
   la parola "Menu" va via, resta l'icona (il pulsante conserva il suo nome
   per i lettori di schermo). */
@media (max-width: 900px) {
  .testata-interno { flex-wrap: wrap; gap: 10px; }
  .logo img { width: clamp(140px, 38vw, 180px); }
  .apri-menu { padding: 10px 13px; }
  .apri-menu .etichetta-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}