/* =========================================================
   1. VARIABILI – i colori e i font presi dalla presentazione.
      Se cambi un valore qui, cambia in tutta la pagina.
   ========================================================= */
:root {
  --verde: #2F4A36;        /* "Tranquillità e Pace" */
  --verde-scuro: #223628;
  --salvia: #8FA38D;
  --oliva: #5E7A42;        /* pulsanti */
  --crema: #F1E8DA;        /* "Perfezione e Luce" */
  --crema-chiaro: #F8F4EC;
  --sabbia: #E6CDA8;
  --terracotta-chiaro: #C7A593;   /* dal moodboard di Aromatica: usato per le voci del menu */
  --testo: #2B2B28;
  --testo-soft: #5A5A52;

  --font-titoli: "Libre Bodoni", "Bodoni 72", "Didot", "Georgia", serif;
  --font-testo: "Figtree", "Helvetica Neue", Arial, sans-serif;

  --larghezza-max: 1180px;
}

/* =========================================================
   2. BASE – regole che valgono per tutta la pagina
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;   /* saltando a una sezione, il titolo non finisce sotto l'intestazione */
}

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--testo);
  background: var(--crema-chiaro);
}

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

h1, h2, h3 {
  font-family: var(--font-titoli);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  color: var(--verde);
}

p { margin: 0; }

/* Il nome "Aromatica" è sempre in corsivo, con il font dei titoli: richiama il logo */
.nome-aromatica {
  font-family: var(--font-titoli);
  font-style: italic;
}

a { color: inherit; }

/* Contorno visibile quando si naviga con la tastiera */
:focus-visible { outline: 3px solid var(--sabbia); outline-offset: 3px; }

/* Contenitore centrale: tiene il contenuto a una larghezza comoda */
.contenitore {
  width: min(100% - 3rem, var(--larghezza-max));
  margin-inline: auto;
}

/* Spaziatura verticale standard delle sezioni */
.sezione { padding-block: clamp(4rem, 9vw, 7rem); }

.titolo-sezione {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  text-align: center;
}

.sottotitolo-sezione {
  max-width: 38rem;
  margin: 1rem auto 0;
  text-align: center;
  color: var(--testo-soft);
}

/* =========================================================
   3. PULSANTI
   ========================================================= */
.bottone {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: 999px;          /* forma a pillola, come nel mockup */
  background: var(--oliva);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
}
.bottone:hover { background: var(--verde); }

.bottone-chiaro { background: var(--crema); color: var(--verde); }
.bottone-chiaro:hover { background: #fff; }

/* =========================================================
   4. HERO – la prima schermata
   ========================================================= */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;               /* lo zoom della foto non deve uscire dal riquadro */
  background: var(--verde-scuro);
}
/* La foto sta in un livello a parte (::before), così può fare lo zoom lento da sola */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/hero-poster.webp") center / cover no-repeat;  /* ../ perché il CSS sta nella cartella css */
  animation: respiro 24s ease-in-out infinite alternate;
}
/* Il video copre la foto; la foto resta sotto come riserva (e per chi riduce il movimento) */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sopra la foto, la velatura verde per leggere il testo */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(34, 54, 40, 0.62), rgba(34, 54, 40, 0.45) 55%, rgba(34, 54, 40, 0.75));
}
@keyframes respiro { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Logo, claim e pulsante compaiono uno dopo l'altro */
.hero-contenuto { position: relative; z-index: 1; }
.hero-marchio, .hero-claim, .hero .bottone { animation: entra 1.1s ease both; }
.hero-claim { animation-delay: 0.45s; }
.hero .bottone { animation-delay: 0.8s; }
@keyframes entra { from { opacity: 0; transform: translateY(18px); } }

.hero-contenuto { padding: 6rem 1.5rem 4rem; }

.hero h1 { margin: 0; }

.hero-marchio {
  width: min(80vw, 640px);
  margin-inline: auto;
  /* ombra leggera per staccare il logo dalla foto */
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.25));
}

.hero-claim {
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  margin: 1.75rem 0 2.5rem;
}

/* =========================================================
   5. INTRO – la frase che racconta l'idea della linea
   ========================================================= */
.intro { background: var(--crema); text-align: center; }

.intro-testo {
  font-family: var(--font-titoli);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.35;
  color: var(--verde);
  max-width: 44rem;
  margin-inline: auto;
}

.intro-firma {
  margin-top: 1.5rem;
  color: var(--testo-soft);
  max-width: 34rem;
  margin-inline: auto;
}

/* =========================================================
   6. PERCHÉ AROMATICA – tre motivi con icona
   ========================================================= */
.perche { background: #fff; }

.motivi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
  text-align: center;
}

.motivo-icona {
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  color: var(--verde);
  font-family: var(--font-titoli);
  font-size: 3rem;
}
.motivo-icona svg { width: 52px; height: 52px; }

.motivo h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.motivo p { color: var(--testo-soft); max-width: 18rem; margin-inline: auto; }

/* Foto ambiente a tutta larghezza */
.ambiente { margin: 0; }
.ambiente img {
  width: 100%;
  height: clamp(320px, 48vw, 720px);
  object-fit: cover;          /* riempie lo spazio senza deformare la foto */
  object-position: center;
}

/* =========================================================
   7. LA LINEA – i prodotti
   ========================================================= */
.linea-foto { margin: 3rem auto 0; max-width: 900px; mix-blend-mode: multiply; }

.prodotti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 3.5rem 2.5rem;
  margin-top: 4rem;
}

/* Ogni prodotto è un link alla sua pagina */
.prodotto {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.prodotto-foto img { transition: transform 0.35s ease; }
.prodotto:hover .prodotto-foto img { transform: scale(1.05); }
.prodotto:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

.prodotto-prezzo {
  font-family: var(--font-titoli);
  font-size: 1.2rem;
  color: var(--verde);
  margin: -0.4rem 0 0.6rem;
}

.prodotto-scopri {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--oliva);
  margin-top: 0.4rem;
}

/* Tutte le foto stanno "su una mensola": stessa base, larghezza proporzionale
   alla misura reale del pezzo (variabile --scala scritta nell'HTML) */
.prodotto-foto {
  aspect-ratio: 5 / 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.prodotto-foto img { width: var(--scala, 100%); max-height: 100%; object-fit: contain; object-position: bottom; }

.prodotto h3 { font-size: 1.6rem; }

.prodotto-misura {
  font-size: 0.9rem;
  color: var(--testo-soft);
  margin: 0.2rem 0 0.75rem;
}

.prodotto-colore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--testo-soft);
  margin-top: auto;
  padding-top: 0.9rem;
}
.pallino {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
}
.pallino-verde { background: var(--verde); }
.pallino-crema { background: var(--crema); }

/* Schede della linea in home: gerarchia dei testi
   1. nome e prezzo (la coppia più importante, sulla stessa riga)
   2. dettagli (misura e colore): piccoli, in maiuscoletto, discreti
   3. descrizione: leggibile ma in secondo piano
   4. "Scopri": l'invito, sempre allineato in fondo alla scheda */
.prodotto-home .prodotto-testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #E3D9C9;
}
.prodotto-home h3 { font-size: 1.45rem; line-height: 1.15; }
.prodotto-home .prodotto-prezzo {
  margin: 0;
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--verde);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.prodotto-dettagli {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin: 0.45rem 0 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-soft);
}
.prodotto-home .prodotto-colore { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0; font-size: inherit; }
.prodotto-home .pallino { width: 10px; height: 10px; }
.prodotto-breve { font-size: 0.95rem; line-height: 1.55; color: var(--testo-soft); }
.prodotto-home .prodotto-scopri {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde);
}
.prodotto-home .prodotto-scopri svg { width: 1rem; height: 1rem; transition: transform 0.3s ease; }
.prodotto-home:hover .prodotto-scopri svg { transform: translateX(4px); }

/* Serra idroponica: completa la linea */
.serra { background: var(--crema); }

.serra-apertura {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.serra-occhiello { color: var(--oliva); font-weight: 500; margin-bottom: 0.5rem; }
.serra h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-bottom: 1.25rem; }
.serra-testo p + p { margin-top: 1rem; }
.serra-testo p:not(.serra-occhiello) { color: var(--testo-soft); max-width: 30rem; }

.serra-foto {
  width: 100%;
  object-fit: cover;          /* le foto riempiono il riquadro senza deformarsi */
  border-radius: 4px;
}
.serra-foto-grande { height: clamp(260px, 32vw, 420px); }

.serra-galleria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.serra-galleria .serra-foto { height: clamp(220px, 30vw, 400px); }

/* =========================================================
   RICETTE – schede, sezione in home e pagina ricetta
   ========================================================= */
.ricette-sezione { background: var(--crema-chiaro); }

.ricette {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
  margin-top: 3.5rem;
}

.ricetta { text-decoration: none; color: inherit; display: block; }
/* La cornice taglia la foto: così lo zoom resta dentro il riquadro */
.ricetta-cornice { overflow: hidden; border-radius: 4px; margin-bottom: 1.1rem; }
.ricetta-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ricetta:hover .ricetta-foto { transform: scale(1.07); }

/* Sottolineatura che si disegna da sinistra: è uno sfondo largo 0% che diventa 100% */
.ricetta h3 span {
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size 0.6s ease;
  padding-bottom: 2px;
}
.ricetta:hover h3 span { background-size: 100% 1px; }
.ricetta-erba { font-size: 0.9rem; font-weight: 500; color: var(--oliva); }
.ricetta h3 { font-size: 1.55rem; margin: 0.25rem 0 0.4rem; }
.ricetta-meta { font-size: 0.9rem; color: var(--testo-soft); }

/* Le ricette nella pagina prodotto */
.in-cucina { background: var(--crema-chiaro); padding-top: 0; }
.in-cucina .ricette { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); justify-content: center; }

/* Pagina ricetta */
.ricetta-pagina { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }

.ricetta-apertura {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ricetta-grande { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 4px; }
.ricetta-apertura h1 { font-size: clamp(2.3rem, 4.5vw, 3.6rem); margin: 0.4rem 0 1rem; }
.ricetta-intro { color: var(--testo-soft); font-size: 1.1rem; max-width: 28rem; }

.ricetta-dati {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid #DCD2C2;
}
.ricetta-dati dt { font-size: 0.85rem; color: var(--testo-soft); }
.ricetta-dati dd { margin: 0; font-family: var(--font-titoli); font-size: 1.3rem; color: var(--verde); }

.ricetta-corpo {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.ricetta-corpo h2, .cucinata h2 { font-size: 1.9rem; margin-bottom: 1.25rem; }

/* Gli ingredienti restano visibili mentre scorri la preparazione */
.ingredienti {
  position: sticky;
  top: 6rem;
  background: var(--crema);
  padding: 2rem;
  border-radius: 4px;
}
.ingredienti ul { list-style: none; margin: 0; padding: 0; }
.ingredienti li { padding: 0.6rem 0; border-bottom: 1px solid #DCD2C2; font-size: 0.98rem; }
.ingredienti li:last-child { border-bottom: 0; }

/* I passaggi sono una sequenza: numeri veri, disegnati dal CSS */
.preparazione ol { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.preparazione li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid #E6DED0;
}
.preparazione li::before {
  content: counter(passo);
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: var(--salvia);
}

.ricetta-consiglio {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--oliva);
  background: #fff;
}
.ricetta-consiglio strong { display: block; font-family: var(--font-titoli); font-weight: 400; font-size: 1.2rem; color: var(--verde); }

.cucinata { margin-top: clamp(3rem, 6vw, 4.5rem); }
.cucinata-lista { display: flex; flex-wrap: wrap; gap: 1rem; }
.cucinata-con {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.5rem 0.9rem 1rem;
  background: #fff;
  border: 1px solid #E6DED0;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}
.cucinata-con:hover { border-color: var(--salvia); }
.cucinata-con img { width: 110px; }
.cucinata-con strong { display: block; font-family: var(--font-titoli); font-weight: 400; font-size: 1.25rem; color: var(--verde); }
.cucinata-con span { font-size: 0.9rem; color: var(--testo-soft); }

/* Link alla ricetta nel risultato del test */
.quiz-ricetta { display: inline-block; margin-top: 1rem; color: var(--oliva); font-weight: 500; }

/* =========================================================
   QUIZ "CHE ERBA AROMATICA SEI?"
   ========================================================= */
.quiz-sezione { background: #fff; }

.quiz { max-width: 880px; margin-inline: auto; text-align: center; }
.quiz [hidden] { display: none; }
.quiz h2:focus, .quiz h3:focus { outline: none; }   /* il focus serve ai lettori di schermo, non va mostrato */

.quiz-inizio .bottone { margin-top: 2.5rem; border: 0; cursor: pointer; font: inherit; font-weight: 500; }

.quiz-contatore { font-size: 0.9rem; color: var(--testo-soft); }

/* Barra di avanzamento: la parte piena la allarga il JavaScript */
.quiz-barra {
  height: 3px;
  background: var(--crema);
  max-width: 280px;
  margin: 0.75rem auto 2.5rem;
  border-radius: 3px;
  overflow: hidden;
}
.quiz-barra span { display: block; height: 100%; width: 0; background: var(--oliva); transition: width 0.4s ease; }

.quiz-testo-domanda { font-size: clamp(1.9rem, 4vw, 2.8rem); max-width: 22ch; margin-inline: auto; }

.quiz-risposte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.75rem;
}

.quiz-risposta {
  font: inherit;
  font-size: 1.05rem;
  color: var(--verde);
  background: var(--crema-chiaro);
  border: 1px solid #DCD2C2;
  border-radius: 999px;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* hover solo con il mouse: su telefono il "tocco" resterebbe colorato sulla risposta dopo */
@media (hover: hover) {
  .quiz-risposta:hover { background: var(--verde); color: var(--crema); border-color: var(--verde); }
}

/* Risultato: foto dell'erba a sinistra, testo a destra */
.quiz-risultato {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  text-align: left;
}
.quiz-risultato[hidden] { display: none; }

.quiz-foto-erba {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 200px 200px 4px 4px;   /* forma ad arco, come una finestra */
}

.quiz-sei { color: var(--oliva); font-weight: 500; }
.quiz-nome-erba { font-style: italic; font-size: clamp(3rem, 7vw, 4.8rem); margin: 0.2rem 0 1rem; }
.quiz-carattere { color: var(--testo-soft); font-size: 1.1rem; max-width: 26rem; }

.quiz-prodotto {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--crema-chiaro);
  border: 1px solid #E6DED0;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}
.quiz-prodotto:hover { border-color: var(--salvia); }
.quiz-prodotto img { width: 120px; flex-shrink: 0; }
.quiz-prodotto-titolo { display: block; font-size: 0.85rem; color: var(--testo-soft); }
.quiz-prodotto-nome { display: block; font-family: var(--font-titoli); font-size: 1.35rem; color: var(--verde); }

.quiz-rifai {
  margin-top: 1.5rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--testo-soft);
  text-decoration: underline;
  cursor: pointer;
}

/* =========================================================
   DOVE TROVARE AROMATICA
   ========================================================= */
.dove { background: var(--verde); color: var(--crema); }
.dove .titolo-sezione { color: #fff; }
.dove .sottotitolo-sezione { color: var(--crema); opacity: 0.85; }

.dove-filtri {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 620px;
  margin: 3rem auto 0;
}

.filtro label {
  display: block;
  font-size: 0.85rem;
  margin: 0 0 0.5rem 1.25rem;
  color: var(--sabbia);
}

/* Menu a tendina su misura: tolgo l'aspetto standard e disegno la freccia con un SVG */
.filtro select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.95rem 3rem 0.95rem 1.25rem;
  border: 1px solid rgba(241, 232, 218, 0.35);
  border-radius: 999px;
  background-color: var(--crema-chiaro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F4A36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 1.1rem;
  font: inherit;
  color: var(--verde);
  cursor: pointer;
}
.filtro select:hover { border-color: var(--sabbia); }

/* Menu bloccati finché non si sceglie quello precedente */
.filtro select:disabled { opacity: 0.55; cursor: not-allowed; }

/* Invito iniziale, al posto delle schede */
.dove-invito { text-align: center; margin-top: 3.5rem; }
.dove-invito[hidden] { display: none; }
.dove-invito svg { width: 3.5rem; height: 3.5rem; color: var(--sabbia); margin: 0 auto 1rem; display: block; }
.dove-totale { font-family: var(--font-titoli); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; }
.dove-istruzioni { margin-top: 0.5rem; opacity: 0.8; }

.negozi-conteggio:empty { display: none; }
.negozi-conteggio {
  text-align: center;
  margin-top: 2.75rem;
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--sabbia);
}

.negozi {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.negozio {
  background: var(--crema-chiaro);
  color: var(--testo);
  border-radius: 20px;
  padding: 1.5rem 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  animation: comparsa 0.35s ease both;   /* stessa animazione del pop up contatti */
}
.negozio-comune { font-size: 0.85rem; color: var(--oliva); font-weight: 500; }
.negozio-insegna { font-size: 1.5rem; margin: 0.25rem 0 0.5rem; }
.negozio-indirizzo { color: var(--testo-soft); font-size: 0.95rem; }
.negozio-mappa {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--verde);
}

/* =========================================================
   8. MATERIALE – fascia verde con i dati tecnici
   ========================================================= */
.materiale { background: var(--verde); color: var(--crema); overflow: hidden; }

.materiale-griglia {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* La padella "esce" dal bordo sinistro: margine negativo */
.materiale-immagine img {
  animation: galleggia 9s ease-in-out infinite alternate;   /* movimento lentissimo, appena percepibile */
  width: 115%;
  max-width: none;
  margin-left: -22%;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35));
}

/* La padella oscilla di un grado e mezzo e sale di pochi pixel, avanti e indietro */
@keyframes galleggia {
  from { transform: rotate(-1.5deg) translateY(0); }
  to   { transform: rotate(1.5deg) translateY(-8px); }
}

.materiale h2 { color: #fff; font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.materiale h2 em { display: block; font-size: 0.55em; margin-top: 0.4rem; color: var(--sabbia); }

.materiale-testo p + p { margin-top: 1rem; }
.materiale-testo { margin-top: 1.5rem; max-width: 34rem; }

/* Le specifiche in due colonne sotto il testo */
.specifiche {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
}
.specifiche li {
  display: grid;
  grid-template-columns: 40px 1fr;   /* colonna fissa per l'icona, il resto al testo */
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-top: 1px solid rgba(241, 232, 218, 0.25);
  font-size: 0.95rem;
}
.specifica-icona {
  width: 40px;
  height: 40px;
  color: var(--sabbia);   /* le icone SVG usano questo colore grazie a currentColor */
}
.specifiche strong {
  display: block;
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: 1.2rem;
  color: #fff;
}

/* =========================================================
   9. IL MARCHIO – la firma Pagnossin
   ========================================================= */
.marchio { text-align: center; background: #fff; }
.marchio-logo { width: min(70vw, 320px); margin: 0 auto 2.5rem; }
.marchio-testo {
  font-family: var(--font-titoli);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.3;
  color: var(--testo);
  max-width: 30rem;
  margin-inline: auto;
}
.marchio-sotto { margin: 1rem auto 0; max-width: 34rem; color: var(--testo-soft); }
.marchio .bottone { margin-top: 2.25rem; }

/* Pulsante con solo il contorno: più discreto di quello pieno */
.bottone-contorno {
  background: transparent;
  color: var(--verde);
  border: 1px solid var(--verde);
}
.bottone-contorno:hover { background: var(--verde); color: #fff; }

/* =========================================================
   10. CHIUSURA E FOOTER
   ========================================================= */
.chiusura { background: var(--crema); text-align: center; }
.chiusura-marchio { width: min(60vw, 280px); margin: 0 auto 2.5rem; }
.chiusura h2 { font-style: italic; font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 16ch; margin-inline: auto; }
.chiusura .bottone { margin-top: 2.5rem; }

.footer {
  background: var(--verde-scuro);
  color: var(--crema);
  padding-block: 3rem;
  font-size: 0.9rem;
}
.footer-riga {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.footer img { width: 140px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer a { text-decoration: none; opacity: 0.85; }
.footer a:hover { opacity: 1; text-decoration: underline; }
.footer-legale { margin-top: 2rem; opacity: 0.6; font-size: 0.8rem; }

/* "Contatti" nel footer: un pulsante vestito da link */
.apri-contatti {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  opacity: 0.85;
  cursor: pointer;
}
.apri-contatti:hover { opacity: 1; text-decoration: underline; }

/* Pop up contatti (elemento <dialog>) */
.contatti-dialog {
  width: min(100% - 2rem, 430px);
  padding: 2.75rem 2.25rem 2.25rem;
  border: 0;
  border-radius: 28px;          /* angoli morbidi */
  background: var(--crema-chiaro);
  color: var(--testo);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
/* lo sfondo scuro dietro al pop up */
.contatti-dialog::backdrop { background: rgba(34, 54, 40, 0.6); }
.contatti-dialog[open] { animation: comparsa 0.25s ease; }
@keyframes comparsa { from { opacity: 0; transform: translateY(12px); } }

.chiudi-contatti {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--verde);
  cursor: pointer;
}
.chiudi-contatti:hover { background: var(--crema); }
.chiudi-contatti svg { width: 1.3rem; height: 1.3rem; }

.contatti-logo { width: 170px; margin: 0 auto 1.5rem; }
.contatti-dialog h2 { font-size: 2rem; }
.contatti-sede { font-size: 0.9rem; color: var(--testo-soft); margin-top: 0.3rem; }
.contatti-dialog address { font-style: normal; margin-top: 1.25rem; line-height: 1.6; }

.contatti-lista { list-style: none; margin: 1.5rem 0 0; padding: 0; text-align: left; }
.contatti-lista li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid #E6DED0;
}
.contatti-lista li:last-child { border-bottom: 1px solid #E6DED0; }
.contatti-lista span { color: var(--testo-soft); font-size: 0.9rem; }
.contatti-lista a { color: var(--verde); font-weight: 500; }

.contatti-mappa { display: inline-block; margin-top: 1.5rem; font-size: 0.95rem; color: var(--oliva); font-weight: 500; }

/* Pulsante "torna su": fisso in basso a destra, invisibile finché non si scende */
.torna-su {
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 8;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--crema);   /* il bordo chiaro lo fa vedere anche sulle fasce verdi */
  border-radius: 50%;
  background: var(--verde);
  color: var(--crema);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
}
.torna-su svg { width: 1.4rem; height: 1.4rem; }
.torna-su.visibile { opacity: 1; visibility: visible; transform: none; }
.torna-su:hover { background: var(--oliva); }
/* Etichetta "Torna su": esce a sinistra del cerchio al passaggio del mouse */
.torna-su-etichetta {
  position: absolute;
  right: calc(100% + 0.6rem);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--verde);
  color: var(--crema);
  font-family: var(--font-testo);
  font-size: 0.85rem;
  white-space: nowrap;          /* resta su una riga sola */
  pointer-events: none;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.25s, transform 0.25s;
}
/* solo con il mouse (hover) o navigando da tastiera (focus-visible) */
@media (hover: hover) {
  .torna-su:hover .torna-su-etichetta { opacity: 1; transform: none; }
}
.torna-su:focus-visible .torna-su-etichetta { opacity: 1; transform: none; }

/* col menu aperto il pulsante non serve */
.menu-aperto .torna-su { opacity: 0; visibility: hidden; }

/* =========================================================
   11. INTESTAZIONE E MENU AD HAMBURGER
   ========================================================= */
.intestazione {
  position: fixed;             /* resta sempre in alto: trasparente sopra la foto, verde scorrendo */
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.75rem;
  transition: padding 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
/* Sulle pagine prodotto l'intestazione ha un fondo verde pieno */
.intestazione-piena { position: sticky; background: var(--verde); }

.intestazione-logo img { width: 150px; transition: width 0.35s ease; }

/* Scorrendo, l'intestazione si compatta: fondo verde, più sottile, logo più piccolo */
.scorsa .intestazione {
  background: var(--verde);
  padding-block: 0.7rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.scorsa .intestazione-logo img { width: 120px; }
.menu-aperto .intestazione { box-shadow: none; }

.bottone-menu {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.5rem;
}

/* Le tre righe dell'hamburger: una riga vera + due pseudo-elementi */
.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger { position: relative; }
.hamburger::before,
.hamburger::after { content: ""; position: absolute; left: 0; }
.hamburger::before { top: -8px; }
.hamburger::after  { top: 8px; }

/* Quando il menu è aperto l'hamburger diventa una X */
.menu-aperto .hamburger { background: transparent; }
.menu-aperto .hamburger::before { transform: translateY(8px) rotate(45deg); }
.menu-aperto .hamburger::after  { transform: translateY(-8px) rotate(-45deg); }

/* Il pannello del menu: nascosto finché non si clicca */
.menu {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: var(--verde-scuro);
  color: var(--crema);
  padding: 7rem 1.75rem 3rem;
  overflow-y: auto;
  visibility: hidden;
  /* la tenda: il pannello parte tutto sopra lo schermo e scende */
  transform: translateY(-100%);
  transition: transform 0.75s cubic-bezier(0.7, 0, 0.2, 1), visibility 0.75s;
}
.menu-aperto .menu { visibility: visible; transform: none; }

/* le voci compaiono in dissolvenza quando la tenda è quasi scesa */
.menu-griglia { opacity: 0; transition: opacity 0.2s ease; }
.menu-aperto .menu-griglia { opacity: 1; transition: opacity 0.5s ease 0.45s; }
/* Col menu aperto l'intestazione resta sopra il pannello */
.menu-aperto .intestazione { position: fixed; background: transparent; }

.menu-griglia {
  width: min(100%, var(--larghezza-max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease, transform 0.35s ease;
}
/* la fogliolina: un quadratino con due angoli arrotondati, ruotato; parte invisibile (scale 0) */
.menu a::before {
  content: "";
  position: absolute;
  left: -0.75em;
  top: 50%;
  width: 0.4em;
  height: 0.4em;
  background: var(--terracotta-chiaro);
  border-radius: 0 70% 0 70%;
  transform: translateY(-50%) rotate(-10deg) scale(0);
  transition: transform 0.35s ease;
}
/* passando sopra una voce: cambia colore, scivola a destra e compare la foglia */
@media (hover: hover) {
  .menu a:hover { color: var(--terracotta-chiaro); transform: translateX(0.75em); }
  .menu a:hover::before { transform: translateY(-50%) rotate(-10deg) scale(1); }
}
.menu a:focus-visible { color: var(--terracotta-chiaro); transform: translateX(0.75em); }
.menu a:focus-visible::before { transform: translateY(-50%) rotate(-10deg) scale(1); }

.menu-principale a {
  display: inline-block;
  font-family: var(--font-titoli);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.3;
}

/* La voce del test: più piccola e separata da una linea */
.menu-principale .menu-test {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(241, 232, 218, 0.25);
  max-width: 22rem;
}
.menu-principale .menu-test a {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-style: italic;
}

.menu-titoletto { font-size: 0.95rem; opacity: 0.7; margin-bottom: 1rem; }
.menu-prodotti a { display: inline-block; padding: 0.35rem 0; font-size: 1.1rem; }
.menu-prodotti span { opacity: 0.6; font-size: 0.9rem; margin-left: 0.4rem; }

/* =========================================================
   12. PAGINA PRODOTTO
   ========================================================= */
.scheda { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); }

.torna {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--testo-soft);
  margin-bottom: 2.5rem;
}

.scheda-intestazione { text-align: center; max-width: 40rem; margin-inline: auto; }
.scheda-marchio { width: 190px; margin: 0 auto 1.5rem; }
.scheda h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.scheda-misura { font-family: var(--font-titoli); font-size: 1.5rem; color: var(--verde); margin-top: 0.3rem; }
.scheda-prezzo {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.35rem 1.25rem;
  border: 1px solid #DCD2C2;
  border-radius: 999px;
  font-family: var(--font-titoli);
  font-size: 1.6rem;
  color: var(--verde);
}
.scheda-claim { font-weight: 600; margin-top: 1.75rem; }
.scheda-descrizione { color: var(--testo-soft); margin-top: 0.3rem; }

.scheda-foto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 3.5rem;
}
.scheda-foto-una { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
.scheda-foto img { margin-inline: auto; max-height: 420px; width: auto; }

.scheda-dati {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid #DCD2C2;
}
.scheda-dati ul { list-style: none; margin: 0; padding: 0; }
.scheda-dati li { padding: 0.8rem 0; border-bottom: 1px solid #E6DED0; }
.scheda-dati strong { display: block; font-family: var(--font-titoli); font-weight: 400; font-size: 1.2rem; color: var(--verde); }

/* Riga delle icone: PFAS free, piani cottura, lavastoviglie */
.scheda-icone {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
}
.icona { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; color: var(--testo-soft); }
.icona-pfas { width: 64px; height: 64px; color: var(--oliva); flex-shrink: 0; }
.icona-piani { width: 230px; }
.icona-lavastoviglie { width: 52px; }

.altri { background: #fff; border-top: 1px solid #E6DED0; }  /* la riga separa il bianco dal fondo crema della scheda */
.altri .prodotti { grid-template-columns: repeat(6, 1fr); gap: 2.5rem 1.5rem; margin-top: 2.5rem; }
/* nei suggerimenti bastano foto, nome e misura: la descrizione la nascondiamo */
.altri .prodotto p:not(.prodotto-misura):not(.prodotto-prezzo):not(.prodotto-scopri) { display: none; }
.altri .prodotto h3 { font-size: 1.25rem; }

/* =========================================================
   13. VERSIONE TELEFONO E TABLET (media query)
   Sotto i 900px le colonne si impilano una sotto l'altra.
   ========================================================= */
@media (max-width: 900px) {
  .motivi { grid-template-columns: 1fr; gap: 3rem; }
  .materiale-griglia { grid-template-columns: 1fr; }
  .materiale-immagine img { width: 80%; margin: 0 auto; }
  .menu-griglia { grid-template-columns: 1fr; gap: 2.5rem; }
  .serra-apertura { grid-template-columns: 1fr; }
  .quiz-risultato { grid-template-columns: 1fr; }
  .dove-filtri { grid-template-columns: 1fr; max-width: 420px; }
  .negozi { grid-template-columns: 1fr 1fr; }
  .ricette { grid-template-columns: 1fr 1fr; }
  .ricetta-apertura, .ricetta-corpo { grid-template-columns: 1fr; }
  .ingredienti { position: static; }
  .quiz-foto-erba { max-width: 340px; margin-inline: auto; }
  .scheda-dati { grid-template-columns: 1fr; }
  .scheda-icone { justify-content: flex-start; }
  .altri .prodotti { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  /* su schermo piccolo i titoli un filo più pesanti, per non perdere i tratti sottili */
  h1, h2, h3,
  .intro-testo, .marchio-testo, .scheda-misura, .quiz-risposta { font-weight: 500; }

  .intestazione { padding: 1rem 1.25rem; }
  .intestazione-logo img { width: 120px; }
  /* su telefono si vede solo l'icona, ma la parola resta per i lettori di schermo */
  .etichetta-menu {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .altri .prodotti { grid-template-columns: repeat(2, 1fr); }
  .serra-galleria { grid-template-columns: 1fr; }
  .specifiche { grid-template-columns: 1fr; }
  .quiz-risposte { grid-template-columns: 1fr; }
  .ricette { grid-template-columns: 1fr; }
  .negozi { grid-template-columns: 1fr; }
  .scheda-foto { grid-template-columns: 1fr; }
  .scheda-foto img { max-height: 260px; }
  .footer-riga { flex-direction: column; align-items: flex-start; }
}

/* Pagine Privacy e Cookie: testo lungo, colonna stretta e comoda da leggere */
.legale { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); }
.legale-testo { max-width: 46rem; }
.legale h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.legale-data { font-size: 0.85rem; color: var(--testo-soft); margin: 0.6rem 0 2rem; }
.legale-intro { font-size: 1.1rem; }
.legale h2 { font-size: 1.6rem; margin: 2.5rem 0 0.75rem; }
.legale p + p { margin-top: 0.8rem; }
.legale a { color: var(--verde); }
/* le parti da completare saltano all'occhio finché sono in bozza */
.da-completare { background: #F3D9A8; color: var(--testo); padding: 0.05em 0.35em; border-radius: 3px; }

/* Pagina 404 */
.errore { text-align: center; min-height: 70vh; display: grid; place-items: center; }
.errore-numero {
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: clamp(5rem, 16vw, 9rem);
  line-height: 1;
  color: var(--salvia);
}
.errore h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-top: 0.5rem; }
.errore-testo { max-width: 30rem; margin: 1rem auto 2.25rem; color: var(--testo-soft); }

/* =========================================================
   EFFETTI (le classi le aggiunge js/effetti.js)
   ========================================================= */
/* Comparsa allo scorrimento: solo se gli effetti sono attivi (classe "effetti" su <html>) */
.effetti .rivela {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--ritardo, 0ms);
}
.effetti .rivela.visto { opacity: 1; transform: none; }

/* Icone che si disegnano: ogni tratto è lungo "1" (pathLength) e parte nascosto */
.effetti .disegna path,
.effetti .disegna circle:not([stroke-dasharray]),   /* i cerchi a puntini restano com'erano */
.effetti .disegna ellipse {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s ease 0.2s;
}
.effetti .disegna.visto path,
.effetti .disegna.visto circle:not([stroke-dasharray]),
.effetti .disegna.visto ellipse { stroke-dashoffset: 0; }
.effetti .disegna { transform: none; }   /* le icone non salgono: si disegnano e basta */

/* Test: ogni domanda arriva da destra */
.quiz-domanda.anima, .quiz-risultato.anima { animation: da-destra 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes da-destra { from { opacity: 0; transform: translateX(40px); } }

/* Test: il nome dell'erba compare lettera per lettera */
.quiz-nome-erba .lettera { display: inline-block; animation: entra 0.6s ease both; }

/* =========================================================
   CAROSELLO DELLA LINEA (solo su smartphone)
   ========================================================= */
.carosello-comandi, .carosello-invito { display: none; }

@media (max-width: 600px) {
  .carosello {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;    /* le schede si fermano sempre allineate */
    /* il carosello arriva fino ai bordi dello schermo, ma la prima scheda resta allineata al testo */
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    scroll-padding-inline: 1.5rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;            /* nascondo la barra di scorrimento */
  }
  .carosello::-webkit-scrollbar { display: none; }

  .carosello > * {
    flex: 0 0 78%;                    /* la scheda successiva si vede per un pezzetto */
    scroll-snap-align: start;
  }
  .effetti .carosello .rivela { transition-delay: 0ms; }   /* nel carosello niente ritardo a cascata */

  /* carosello "pieno": una scheda per schermata */
  .carosello-pieno > * { flex-basis: 100%; }

  /* sotto il carosello: freccia, puntini, freccia */
  .carosello-comandi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .carosello-punti { display: flex; gap: 0.6rem; }

  .carosello-freccia {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--salvia);
    border-radius: 50%;
    background: transparent;
    color: var(--verde);
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .carosello-freccia svg { width: 1.1rem; height: 1.1rem; }
  .carosello-freccia.indietro svg { transform: rotate(180deg); }
  .carosello-freccia:disabled { opacity: 0.3; cursor: default; }

  /* invito a scorrere, sopra il carosello: sparisce dopo il primo scorrimento */
  .carosello-invito {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    margin: 2rem 0 -2rem;
    font-size: 0.85rem;
    color: var(--oliva);
    font-weight: 500;
    transition: opacity 0.4s ease;
  }
  .carosello-invito svg { width: 1rem; height: 1rem; display: block; animation: spingi 1.4s ease-in-out infinite; }
  .carosello-invito.nascosto { opacity: 0; }
  @keyframes spingi { 50% { transform: translateX(5px); } }
  .carosello-punti button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #D5CBBB;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
  }
  /* il puntino attivo si allunga in una piccola pillola */
  .carosello-punti button.attivo { width: 22px; background: var(--verde); }
}

/* Chi ha disattivato le animazioni nel sistema vede tutto fermo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero-video { display: none; }   /* niente video: resta la foto ferma */
}