/* ═══════════════════════════════════════════════════════
   Cascina Bellavigna — foglio di stile
   Palette toscana: crema, terracotta, oliva, sangiovese.
   Tipografia: Cormorant Garamond (titoli) + Jost (testo).
   ═══════════════════════════════════════════════════════ */

:root {
  --crema: #f7f1e5;
  --avorio: #fdfbf6;
  --sabbia: #efe6d3;
  --lino: #e3d7bd;
  --terracotta: #b05a3c;
  --terracotta-scuro: #8f4128;
  --oliva: #737c4e;
  --oliva-scuro: #4c5433;
  --sangiovese: #6e3b47;
  --oro: #c09a57;
  --inchiostro: #2c2a24;
  --inchiostro-tenue: #5d584c;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", sans-serif;

  --raggio: 4px;
  --raggio-foto: 10px;
  --ombra: 0 18px 44px rgba(44, 42, 36, 0.14);
  --passo: 260ms ease;
  --larghezza: 1180px;
}

/* ── Base ─────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.06rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--inchiostro);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  color: var(--inchiostro);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.8rem, 7.5vw, 5rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h3 { font-size: 1.45rem; }

p { margin: 0 0 1em; }

a {
  color: var(--terracotta);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--passo);
}

a:hover { color: var(--sangiovese); }

:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 3px;
  border-radius: 3px;
}

.vai-al-contenuto {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--inchiostro);
  color: var(--avorio);
  padding: 0.7rem 1.3rem;
  z-index: 300;
}

.vai-al-contenuto:focus { left: 0; }

.cornice {
  width: min(100% - 3rem, var(--larghezza));
  margin-inline: auto;
}

.cornice--stretta { max-width: 800px; }

/* ── Testata ──────────────────────────────────────── */

.testata {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--crema) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--passo), background var(--passo);
}

.testata--ferma {
  border-bottom-color: var(--lino);
  background: color-mix(in srgb, var(--crema) 96%, transparent);
}

.testata__interno {
  width: min(100% - 3rem, var(--larghezza));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--terracotta);
}

.logo__sigillo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.logo__testo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inchiostro);
}

.menu__lista {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__lista a {
  text-decoration: none;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--inchiostro);
}

.menu__lista a:hover { color: var(--terracotta); }

.menu__invito {
  border: 1px solid var(--terracotta);
  color: var(--terracotta) !important;
  padding: 0.5rem 1.3rem;
  border-radius: 999px;
  transition: background var(--passo), color var(--passo);
}

.menu__invito:hover {
  background: var(--terracotta);
  color: var(--avorio) !important;
}

.apri-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5.5px;
  width: 46px;
  height: 46px;
  padding: 11px;
  background: none;
  border: 1px solid var(--lino);
  border-radius: 8px;
  cursor: pointer;
}

.apri-menu span {
  display: block;
  height: 1.8px;
  width: 100%;
  background: var(--inchiostro);
  transition: transform var(--passo), opacity var(--passo);
}

.apri-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.3px) rotate(45deg); }
.apri-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.apri-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.3px) rotate(-45deg); }

/* ── Apertura (hero) ──────────────────────────────── */

.apertura {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  color: var(--avorio);
}

.apertura__sfondo {
  position: absolute;
  inset: 0;
  margin: 0;
}

.apertura__sfondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.apertura__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center 42%, rgba(30, 26, 18, 0.18) 0%, rgba(30, 26, 18, 0.52) 100%),
    linear-gradient(to top, rgba(30, 26, 18, 0.55), transparent 40%);
}

.apertura__cornice {
  position: relative;
  z-index: 1;
  padding: 7rem 1.5rem 4rem;
  max-width: 780px;
}

.apertura__anno {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--lino);
  margin-bottom: 1.4rem;
}

.apertura h1 {
  color: var(--avorio);
  margin-bottom: 0.4em;
}

.apertura h1 em {
  font-style: italic;
  color: var(--oro);
}

.apertura__sottotitolo {
  font-size: 1.18rem;
  font-weight: 300;
  max-width: 540px;
  margin-inline: auto;
  color: rgba(253, 251, 246, 0.92);
}

.apertura__scopri {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.6rem;
  text-decoration: none;
  color: var(--avorio);
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.apertura__scopri svg {
  width: 24px;
  height: 24px;
  animation: invito-scendi 2.4s ease-in-out infinite;
}

@keyframes invito-scendi {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

.apertura__scopri:hover { color: var(--oro); }

/* ── Capitoli ─────────────────────────────────────── */

.capitolo {
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

.capitolo--sabbia {
  background: var(--sabbia);
}

.capitolo__testa {
  max-width: 660px;
  margin-bottom: clamp(2.6rem, 6vw, 4.5rem);
}

.capitolo__numero {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--terracotta);
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

.capitolo__numero::after {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  background: var(--terracotta);
  margin-top: 0.55rem;
  opacity: 0.6;
}

.capitolo__introduzione {
  font-size: 1.14rem;
  color: var(--inchiostro-tenue);
}

.capitolo__testa--con-frecce {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  max-width: none;
}

/* ── Cronologia (storia) ──────────────────────────── */

.cronologia {
  list-style: none;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  padding: 0;
  position: relative;
  display: grid;
  gap: 2.4rem;
  max-width: 760px;
}

.cronologia::before {
  content: "";
  position: absolute;
  left: 44px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, var(--terracotta), var(--oliva));
  opacity: 0.5;
}

.cronologia__tappa {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.6rem;
  align-items: start;
}

.cronologia__anno {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--terracotta);
  margin: 0;
  background: var(--crema);
  position: relative;
  z-index: 1;
  padding-block: 0.15rem;
  text-align: center;
  border: 1px solid var(--lino);
  border-radius: var(--raggio);
}

.capitolo--sabbia .cronologia__anno { background: var(--sabbia); }

.cronologia__tappa h3 { margin-bottom: 0.25rem; }

.cronologia__tappa p:last-child {
  margin: 0;
  color: var(--inchiostro-tenue);
}

.storia__ritratto {
  margin: 0 auto;
  max-width: 860px;
}

.storia__ritratto img,
.poderi__foto img,
.natura__foto img,
.galline__foto img {
  width: 100%;
  border-radius: var(--raggio-foto);
  box-shadow: var(--ombra);
}

.storia__ritratto figcaption,
.poderi__foto figcaption,
.natura__foto figcaption,
.galline__foto figcaption {
  font-size: 0.88rem;
  font-style: italic;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--inchiostro-tenue);
  margin-top: 0.9rem;
  text-align: center;
}

/* ── Poderi ───────────────────────────────────────── */

.poderi__griglia {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: center;
}

.poderi__numeri {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  border-top: 1px solid var(--lino);
  padding-top: 1.8rem;
}

.poderi__numeri strong {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.3rem;
  color: var(--oliva-scuro);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.poderi__numeri span {
  font-size: 0.88rem;
  color: var(--inchiostro-tenue);
  line-height: 1.45;
  display: block;
}

/* ── Una giornata ─────────────────────────────────── */

.ore {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.4rem;
}

.ore__momento {
  background: var(--avorio);
  border: 1px solid var(--lino);
  border-radius: var(--raggio-foto);
  padding: 1.7rem 1.5rem;
  transition: transform var(--passo), box-shadow var(--passo);
}

.ore__momento:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombra);
}

.ore__orario {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--terracotta);
  margin: 0 0 0.7rem;
  line-height: 1;
}

.ore__momento h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.ore__momento p:last-child {
  font-size: 0.94rem;
  color: var(--inchiostro-tenue);
  margin: 0;
}

/* ── Stagioni ─────────────────────────────────────── */

.stagioni__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.stagione {
  background: var(--avorio);
  border-radius: var(--raggio-foto);
  padding: 1.9rem 1.7rem;
  border-top: 4px solid var(--oliva);
}

.stagione--primavera { border-top-color: var(--oliva); }
.stagione--estate { border-top-color: var(--oro); }
.stagione--autunno { border-top-color: var(--terracotta); }
.stagione--inverno { border-top-color: var(--sangiovese); }

.stagione h3 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.stagione h3 span { font-size: 1rem; }

.stagione--primavera h3 span { color: var(--oliva); }
.stagione--estate h3 span { color: var(--oro); }
.stagione--autunno h3 span { color: var(--terracotta); }
.stagione--inverno h3 span { color: var(--sangiovese); }

.stagione__mesi {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
  margin-bottom: 1.1rem;
}

.stagione ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.stagione li {
  font-size: 0.96rem;
  padding-left: 1.2rem;
  position: relative;
  color: var(--inchiostro-tenue);
}

.stagione li::before {
  content: "·";
  position: absolute;
  left: 0.2rem;
  color: var(--terracotta);
  font-weight: 700;
}

/* ── La natura ────────────────────────────────────── */

.natura__griglia {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: center;
}

.natura__foto { margin: 0; }

.natura__pratiche {
  margin: 1.8rem 0 0;
  display: grid;
  gap: 1.3rem;
}

.natura__pratiche dt {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--oliva-scuro);
  margin-bottom: 0.15rem;
}

.natura__pratiche dd {
  margin: 0;
  font-size: 0.97rem;
  color: var(--inchiostro-tenue);
  padding-left: 1.1rem;
  border-left: 2px solid var(--lino);
}

/* ── Galline ──────────────────────────────────────── */

.galline__griglia {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: center;
}

.galline__foto { margin: 0; }

.galline__promesse {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.galline__promesse li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.98rem;
}

.galline__promesse li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 12px;
  height: 15px;
  background: var(--oro);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
}

/* ── Prodotti ─────────────────────────────────────── */

.prodotto-firma {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--inchiostro);
  color: var(--crema);
  border-radius: var(--raggio-foto);
  overflow: hidden;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.prodotto-firma__testo {
  padding: clamp(2rem, 4.5vw, 3.5rem);
}

.prodotto-firma__etichetta {
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 0.9rem;
}

.prodotto-firma h3 {
  color: var(--avorio);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}

.prodotto-firma p {
  color: rgba(247, 241, 229, 0.85);
}

.prodotto-firma__nota {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--oro) !important;
  margin: 1.2rem 0 0;
}

.prodotto-firma__foto {
  margin: 0;
  height: 100%;
}

.prodotto-firma__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 300px;
}

.prodotti__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
}

.scheda {
  background: var(--avorio);
  border: 1px solid var(--lino);
  border-radius: var(--raggio-foto);
  padding: 1.8rem 1.6rem;
  transition: transform var(--passo), box-shadow var(--passo), border-color var(--passo);
}

.scheda:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombra);
  border-color: var(--oro);
}

.scheda h3 {
  font-size: 1.28rem;
  margin-bottom: 0.4rem;
}

.scheda p {
  font-size: 0.95rem;
  color: var(--inchiostro-tenue);
  margin: 0;
}

.scheda--invito {
  background: var(--terracotta);
  border-color: var(--terracotta);
}

.scheda--invito h3 { color: var(--avorio); }
.scheda--invito p { color: rgba(253, 251, 246, 0.9); }

.scheda--invito a {
  display: inline-block;
  margin-top: 1rem;
  color: var(--avorio);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.scheda--invito a:hover { color: var(--lino); }

/* ── Intermezzo ───────────────────────────────────── */

.intermezzo {
  background: var(--oliva-scuro);
  color: var(--crema);
  padding-block: clamp(4rem, 9vw, 6.5rem);
  text-align: center;
}

.intermezzo__interno { max-width: 760px; }

.intermezzo__ramo {
  width: 130px;
  height: auto;
  color: var(--oro);
  margin-bottom: 1.6rem;
}

.intermezzo__frase {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--avorio);
}

.intermezzo__firma {
  font-size: 0.85rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 1.4rem 0 0;
}

/* ── Diario fotografico ───────────────────────────── */

.diario { overflow: hidden; }

.diario__frecce {
  display: flex;
  gap: 0.7rem;
  flex-shrink: 0;
}

.diario__freccia {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--avorio);
  border: 1px solid var(--lino);
  border-radius: 50%;
  color: var(--inchiostro);
  cursor: pointer;
  transition: background var(--passo), color var(--passo), border-color var(--passo);
}

.diario__freccia:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--avorio);
}

.diario__freccia svg {
  width: 22px;
  height: 22px;
}

.diario__nastro {
  display: flex;
  gap: 1.3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.4rem max(1.5rem, calc((100vw - var(--larghezza)) / 2)) 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--terracotta) var(--sabbia);
}

.diario__scatto {
  margin: 0;
  flex: 0 0 min(72vw, 480px);
  scroll-snap-align: start;
}

.diario__scatto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--raggio-foto);
  box-shadow: var(--ombra);
}

.diario__scatto figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--inchiostro-tenue);
  margin-top: 0.7rem;
}

/* ── Domande ──────────────────────────────────────── */

.fisarmonica {
  display: grid;
  gap: 0.9rem;
}

.fisarmonica__voce {
  background: var(--avorio);
  border: 1px solid var(--lino);
  border-radius: var(--raggio-foto);
  transition: border-color var(--passo);
}

.fisarmonica__voce[open] { border-color: var(--terracotta); }

.fisarmonica__voce summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  padding: 1.2rem 3.4rem 1.2rem 1.6rem;
  position: relative;
}

.fisarmonica__voce summary::-webkit-details-marker { display: none; }

.fisarmonica__voce summary::after {
  content: "+";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.7rem;
  color: var(--terracotta);
  transition: transform var(--passo);
}

.fisarmonica__voce[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.fisarmonica__voce p {
  padding: 0 1.6rem 1.5rem;
  margin: 0;
  color: var(--inchiostro-tenue);
  font-size: 0.98rem;
}

/* ── Visita ───────────────────────────────────────── */

.visita__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.visita__blocco {
  background: var(--avorio);
  border: 1px solid var(--lino);
  border-radius: var(--raggio-foto);
  padding: 2rem 1.7rem;
}

.visita__blocco h3 { margin-bottom: 1rem; }

.visita__blocco address {
  font-style: normal;
  line-height: 1.75;
}

.visita__nota {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--inchiostro-tenue);
  margin: 1.1rem 0 0;
}

.visita__contatti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.visita__contatti span {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oliva-scuro);
}

.visita__orari {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.visita__orari li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px dotted var(--lino);
  padding-bottom: 0.55rem;
  font-size: 0.97rem;
}

.visita__orari li span:last-child { font-weight: 500; }

/* ── Fondo pagina ─────────────────────────────────── */

.fondo {
  background: var(--inchiostro);
  color: var(--lino);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.6rem;
}

.fondo__griglia {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.logo--fondo { color: var(--oro); }
.logo--fondo .logo__testo { color: var(--avorio); }

.fondo__marchio p {
  font-size: 0.93rem;
  color: rgba(227, 215, 189, 0.75);
  margin: 1rem 0 0;
}

.fondo__colonna h3 {
  color: var(--avorio);
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.fondo__colonna ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.fondo__colonna a {
  color: rgba(227, 215, 189, 0.85);
  text-decoration: none;
  font-size: 0.95rem;
}

.fondo__colonna a:hover { color: var(--oro); }

.fondo__legale {
  border-top: 1px solid rgba(227, 215, 189, 0.18);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  font-size: 0.85rem;
  color: rgba(227, 215, 189, 0.6);
}

.fondo__legale p { margin: 0; }

.fondo__legale ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.4rem;
}

.fondo__legale a { color: rgba(227, 215, 189, 0.85); }
.fondo__legale a:hover { color: var(--oro); }

/* ── Pagine legali ────────────────────────────────── */

.legale {
  padding-top: clamp(8rem, 14vw, 10.5rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.legale h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }

.legale__data {
  font-family: var(--serif);
  font-style: italic;
  color: var(--inchiostro-tenue);
  margin-bottom: 2.5rem;
}

.legale h2 {
  font-size: 1.55rem;
  margin-top: 2.4rem;
}

.legale ul { padding-left: 1.3rem; }
.legale li { margin-bottom: 0.5rem; }

/* ── Comparsa allo scorrimento ────────────────────── */

.comparsa {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.comparsa--visibile {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .comparsa {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .apertura__scopri svg { animation: none; }
  .ore__momento:hover,
  .scheda:hover { transform: none; }
  .diario__nastro { scroll-behavior: auto; }
}

.niente-js .comparsa {
  opacity: 1;
  transform: none;
}

/* ── Adattamenti ──────────────────────────────────── */

@media (max-width: 980px) {
  .poderi__griglia,
  .natura__griglia,
  .galline__griglia {
    grid-template-columns: 1fr;
  }

  .natura__foto { order: 1; }
  .natura__testo { order: 0; }

  .prodotto-firma { grid-template-columns: 1fr; }
  .prodotto-firma__foto img { min-height: 240px; }

  .fondo__griglia { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .menu {
    position: fixed;
    inset: 62px 0 auto 0;
    background: var(--crema);
    border-bottom: 1px solid var(--lino);
    box-shadow: 0 20px 34px rgba(44, 42, 36, 0.14);
    transform: translateY(-135%);
    transition: transform var(--passo);
    padding: 1rem 1.5rem 1.6rem;
  }

  .menu--aperto { transform: translateY(0); }

  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .menu__lista li { border-bottom: 1px solid var(--lino); }
  .menu__lista li:last-child {
    border-bottom: none;
    margin-top: 1rem;
  }

  .menu__lista a {
    display: block;
    padding: 0.95rem 0.2rem;
    font-size: 1rem;
  }

  .menu__invito { text-align: center; }

  .apri-menu { display: flex; }

  .capitolo__testa--con-frecce {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .cronologia::before { left: 36px; }

  .cronologia__tappa {
    grid-template-columns: 74px 1fr;
    gap: 1.1rem;
  }

  .cronologia__anno { font-size: 1.2rem; }
}

@media (max-width: 520px) {
  body { font-size: 1rem; }

  .fondo__griglia {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .fondo__legale { flex-direction: column; }

  .poderi__numeri { grid-template-columns: 1fr; }

  .diario__scatto { flex-basis: 84vw; }
}