/* RoccaforteBio · style.css
   Colori misurati sul design del kit (confronta-design.py --colori, 00-landing-approvata.png).
   Carattere: Newsreader (OFL), servito dal sito: il più vicino al serif del design, che il kit non fornisce. */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --verde-notte: #0C1B10;   /* fondo principale */
  --verde-bosco: #132113;   /* fondo delle sezioni più chiare */
  --verde-fondo: #09160C;   /* il verde più scuro, piede */
  --verde-linea: #2A3A2C;   /* filetti pieni */
  --oro: #CFA055;           /* filetti, numeri, bordi dei pulsanti */
  --oro-chiaro: #E4B060;    /* l'olio scelto nella collezione */
  --bianco: #FEFEFD;        /* titoli */
  --crema: #F4F1E8;         /* titoli secondari */
  --testo: #D2D7D1;         /* testo corrente */
  --testo-tenue: #BFC3B8;
  --grigio: #8C928A;        /* didascalie, note */

  --linea: rgba(244, 241, 232, .16);
  --linea-forte: rgba(244, 241, 232, .3);

  --font: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --gutter: max(16px, min(5.6vw, 80px));
  --larghezza: 1280px;
  --testata-h: 84px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--verde-notte);
  color: var(--testo);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
main { display: block; position: relative; overflow: hidden; }
a { color: inherit; text-decoration: none; }
a, button { touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; color: var(--bianco); letter-spacing: -.01em; }
h2 { font-size: clamp(34px, 3.8vw, 56px); line-height: 1.06; }
.titolo-grande { font-size: clamp(42px, 6vw, 86px); line-height: 1; letter-spacing: -.02em; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.sezione { padding-block: clamp(56px, 6.5vw, 96px); }
.solo-computer { display: none; }
@media (min-width: 900px) { .solo-computer { display: inline; } }

.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--crema); color: var(--verde-notte); padding: 10px 16px;
}
.salta:focus { top: 12px; }

/* occhiello «01 ORIGINE» */
.occhiello {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-tenue);
}
.occhiello__num {
  position: relative; padding-bottom: 6px;
  font-size: 19px; letter-spacing: .02em; color: var(--crema);
  font-variant-numeric: lining-nums;
}
.occhiello__num::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 1.5px; background: var(--oro);
}

/* pulsanti */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 10px 24px;
  border: 1px solid currentColor; border-radius: 2px;
  font-size: 18px; line-height: 1.2; color: var(--bianco);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--chiaro { border-color: rgba(254, 254, 253, .85); }
.hero .btn--chiaro, .testata .btn--chiaro { background: rgba(9, 22, 12, .45); }
.btn--oro { border-color: var(--oro); }
.btn--piccolo { min-height: 44px; padding: 8px 18px; font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
  .btn--chiaro:hover, .hero .btn--chiaro:hover, .testata .btn--chiaro:hover { background: rgba(9, 22, 12, .7); }
  .btn--oro:hover { background: rgba(207, 160, 85, .16); }
}
/* la freccia del kit (05-simboli/freccia-diagonale) prende il colore del testo */
.freccia {
  display: inline-block; flex: none; width: .66em; height: .66em;
  background: currentColor;
  -webkit-mask: url("/assets/img/kit/freccia-marcata.webp") center / contain no-repeat;
  mask: url("/assets/img/kit/freccia-marcata.webp") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .freccia, .link-oro:hover .freccia { transform: translate(2px, -2px); }
}

.link-oro {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 0 10px; min-height: 44px;
  border-bottom: 1.5px solid var(--oro);
  color: var(--crema); font-size: 17px;
  user-select: none; -webkit-user-select: none;
}
.link-oro:active { opacity: .75; }

/* ── testata ──────────────────────────────────────────────────────────── */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.testata.is-scesa { background: rgba(12, 27, 16, .94); box-shadow: 0 1px 0 var(--linea); }
.testata__riga {
  display: flex; align-items: center; gap: 24px;
  height: var(--testata-h);
  max-width: calc(var(--larghezza) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.marchio { display: inline-flex; align-items: center; gap: 10px; color: var(--bianco); flex: none; }
.marchio__simbolo { width: 64px; height: auto; }
.marchio__nome {
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
  white-space: nowrap;
}
.marchio__nome .mc { font-size: 1.32em; }
.menu { margin-left: auto; margin-right: auto; }
.menu__voci { display: flex; gap: clamp(22px, 2.2vw, 40px); }
.menu__voci a[aria-current="page"] { color: var(--oro-chiaro); }
.menu__voci a {
  position: relative; display: inline-block; padding: 10px 0;
  font-size: 18px; color: var(--crema);
  user-select: none; -webkit-user-select: none;
}
.menu__voci a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--oro);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .menu__voci a:hover::after { transform: scaleX(1); } }
.menu__solo-telefono { display: none; }
.testata__azioni { display: flex; align-items: center; gap: 12px; flex: none; }
/* il posto del selettore delle lingue: vuoto fino al 9-ter, non si vede niente */
.lingue-posto { display: flex; align-items: center; }
.lingue-posto:empty { display: none; }
.hamburger { display: none; }

@media (max-width: 1179px) {
  :root { --testata-h: 68px; }
  .marchio__simbolo { width: 50px; }
  .marchio__nome { font-size: 13px; }
  .testata__contatto { display: none; }
  .hamburger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px;
    width: 44px; height: 44px; margin-right: -8px;
    user-select: none; -webkit-user-select: none;
  }
  .hamburger span { display: block; width: 24px; height: 1.5px; background: var(--bianco); transition: transform .3s var(--ease-out); }
  .hamburger[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .testata__azioni { margin-left: auto; }
  .menu {
    position: fixed; inset: 0; z-index: -1;
    height: 100dvh; margin: 0;
    padding: calc(var(--testata-h) + env(safe-area-inset-top, 0px) + 32px) max(24px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
    background: var(--verde-notte);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease-out), visibility 0s linear .25s;
  }
  .menu.is-aperto { opacity: 1; visibility: visible; transition: opacity .3s var(--ease-out); }
  .menu__voci { flex-direction: column; gap: 4px; }
  .menu__voci a { font-size: 34px; padding: 10px 0; }
  .menu__voci a::after { display: none; }
  .menu__voci a:active { color: var(--oro-chiaro); }
  .menu__solo-telefono { display: block; }
  html.menu-aperto .testata { background: var(--verde-notte); }
}
@media (max-width: 359px) {
  .marchio__nome { font-size: 12px; letter-spacing: .02em; }
  .marchio__simbolo { width: 42px; }
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; z-index: 2;
  height: clamp(620px, 61vw, 900px);
  min-height: 560px;
  display: flex; align-items: center;
  color: var(--bianco);
}
.hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--verde-notte); }
.hero__media picture, .hero__poster, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__video { opacity: 0; transition: opacity .9s var(--ease-out); }
.hero__video.is-pronto { opacity: 1; }
.hero__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 22, 12, .5) 0%, rgba(9, 22, 12, 0) 22%),
    linear-gradient(90deg, rgba(9, 22, 12, .62) 0%, rgba(9, 22, 12, .34) 38%, rgba(9, 22, 12, 0) 62%),
    linear-gradient(180deg, rgba(12, 27, 16, 0) 72%, rgba(12, 27, 16, .85) 93%, #0C1B10 100%);
}
.hero__contenuto { position: relative; z-index: 2; padding-top: var(--testata-h); }
.hero__testo { max-width: 900px; }
.hero h1 {
  font-size: clamp(40px, 4.5vw, 68px);
  line-height: 1; letter-spacing: -.02em; font-weight: 400;
  text-shadow: 0 2px 30px rgba(9, 22, 12, .35);
}
.hero__lead {
  max-width: 34em;
  font-size: clamp(18px, 1.55vw, 22px); line-height: 1.45; color: var(--crema);
  text-shadow: 0 1px 14px rgba(9, 22, 12, .6);
}
.hero h1 + .hero__lead { margin-top: clamp(16px, 1.6vw, 24px); }
.hero__lead + .hero__lead { margin-top: 4px; }
.hero__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(24px, 2.4vw, 34px); }
.link-chiaro {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0;
  color: var(--bianco); font-size: 18px; border-bottom: 1px solid rgba(254, 254, 253, .55);
  user-select: none; -webkit-user-select: none; text-shadow: 0 1px 12px rgba(9, 22, 12, .7);
  transition: border-color .25s ease;
}
.link-chiaro:active { opacity: .75; }
@media (hover: hover) and (pointer: fine) { .link-chiaro:hover { border-color: var(--oro-chiaro); } .link-chiaro:hover .freccia { transform: translate(2px, -2px); } }
.hero__sottotitolo {
  margin: clamp(14px, 1.4vw, 20px) 0 clamp(26px, 2.6vw, 38px);
  font-size: clamp(12px, 1.12vw, 16px); letter-spacing: .26em; text-transform: uppercase; color: var(--crema);
}
.scroll {
  display: flex; align-items: center; gap: 16px;
  margin-top: clamp(28px, 3.6vw, 52px);
  font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--crema);
  width: max-content; min-height: 44px;
}
.scroll__linea { width: 1.5px; height: 46px; background: var(--crema); opacity: .85; }

/* la pietra del kit con la bottiglia vera da 250 ml */
.hero__prodotto {
  position: absolute; z-index: 3;
  left: 47%; width: 46%; max-width: 760px;
  bottom: -9%;
  pointer-events: none;
}
.hero__pietra { width: 100%; filter: drop-shadow(0 24px 30px rgba(5, 14, 8, .45)); }
.hero__bottiglia {
  position: absolute; z-index: 1;
  left: 39%; bottom: 61%;
  width: 23%;
  filter: drop-shadow(-14px 18px 18px rgba(5, 14, 8, .45)) drop-shadow(0 0 1px rgba(254, 254, 253, .35));
}
.hero__ramo {
  position: absolute; z-index: 4; right: 0; bottom: -15%;
  width: 29%; max-width: 480px;
  overflow: hidden; pointer-events: none;
}
.hero__ramo img { width: 118%; max-width: none; transform: rotate(-8deg); transform-origin: 0 50%; }

@media (max-width: 767px) {
  .hero {
    height: auto; min-height: 92svh;
    align-items: flex-start;
    padding-bottom: 0;
  }
  .hero__contenuto { padding-top: calc(var(--testata-h) + env(safe-area-inset-top, 0px) + 6svh); }
  .hero__velo {
    background:
      linear-gradient(180deg, rgba(9, 22, 12, .78) 0%, rgba(9, 22, 12, .62) 45%, rgba(9, 22, 12, .2) 66%, rgba(9, 22, 12, 0) 76%),
      linear-gradient(180deg, rgba(12, 27, 16, 0) 74%, rgba(12, 27, 16, .9) 94%, #0C1B10 100%);
  }
  .hero h1 { font-size: clamp(34px, 9.2vw, 42px); }
  .hero__lead { font-size: 18px; }
  .hero__sottotitolo { letter-spacing: .16em; max-width: 300px; line-height: 1.6; }
  .scroll { display: none; }
  .hero__prodotto { left: 2%; width: 92%; bottom: -7%; }
  .hero__bottiglia { left: 40%; width: 21%; bottom: 60%; }
  .hero__ramo { width: 46%; bottom: -9%; }
}

/* ── 01 origine ───────────────────────────────────────────────────────── */
.origine {
  position: relative; z-index: 1;
  padding-top: clamp(110px, 9vw, 130px);
  background:
    linear-gradient(180deg, rgba(12, 27, 16, .92), rgba(12, 27, 16, .72) 50%, rgba(12, 27, 16, .92)),
    var(--verde-notte) url("/assets/img/kit/sfondo-verde.webp") center / cover no-repeat;
}
.origine__testa {
  display: grid; grid-template-columns: 1.35fr 1fr; align-items: end; gap: 40px;
}
.origine__nota { padding-bottom: 6px; color: var(--crema); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; }
.origine__nota p + p { margin-top: 16px; color: var(--testo-tenue); font-size: clamp(17px, 1.35vw, 19px); }
.filetto {
  position: relative;
  display: flex; justify-content: flex-end; align-items: center;
  margin-top: clamp(32px, 4vw, 54px); padding-top: 10px;
  font-size: 15px; color: var(--testo-tenue);
}
.pilastri {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(32px, 4vw, 52px);
}
.pilastro { text-align: center; padding: 0 clamp(16px, 2.4vw, 40px); }
.pilastro + .pilastro { border-left: 1px solid var(--linea-forte); }
.pilastro img { height: clamp(84px, 8vw, 118px); width: auto; margin: 0 auto 22px; }
.pilastro h3 { font-size: clamp(22px, 2.15vw, 30px); line-height: 1.2; margin-bottom: 8px; }
.pilastro p { font-size: clamp(17px, 1.35vw, 19px); color: var(--testo); max-width: 310px; margin-inline: auto; }

@media (max-width: 767px) {
  .origine { padding-top: 96px; }
  .origine__testa { grid-template-columns: 1fr; gap: 22px; }
  .pilastri { grid-template-columns: 1fr; gap: 0; margin-top: 8px; }
  .pilastro {
    display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; align-items: center;
    text-align: left; padding: 20px 0;
  }
  .pilastro + .pilastro { border-left: 0; border-top: 1px solid var(--linea); }
  .pilastro img { grid-row: span 2; height: 64px; margin: 0 auto; }
  .pilastro h3 { font-size: 23px; margin: 0 0 2px; }
  .pilastro p { margin: 0; max-width: none; }
}

/* ── 02 collezione ────────────────────────────────────────────────────── */
.collezione {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(48px, 5vw, 72px);
}
.collezione__bottiglia {
  position: absolute; left: 1.5%; top: 9%; bottom: 0; width: 12.5%; max-width: 200px;
  overflow: hidden;
}
.collezione__bottiglia img { width: 100%; height: auto; }
.collezione__griglia {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 90px); align-items: start;
  padding-left: max(calc(var(--gutter) + 9vw), 15%);
}
@media (min-width: 1500px) { .collezione__griglia { padding-left: calc(var(--gutter) + 130px); } }
.collezione__intro { margin: 22px 0 28px 30px; font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); }
.collezione__testo .btn { margin-left: 30px; }
.oli { counter-reset: oli; }
.oli li { border-bottom: 1px solid var(--linea-forte); }
.olio {
  display: grid; grid-template-columns: 70px 1fr 40px; align-items: center;
  width: 100%; min-height: 56px; padding: 10px 0; text-align: left;
  user-select: none; -webkit-user-select: none;
}
.olio__num { font-size: 16px; color: var(--testo-tenue); font-variant-numeric: lining-nums; }
.olio__nome { font-size: clamp(24px, 2.25vw, 32px); line-height: 1.2; color: var(--crema); transition: color .25s var(--ease-out); }
.olio__freccia {
  justify-self: end; width: 34px; height: 20px; opacity: 0;
  background: var(--oro-chiaro);
  -webkit-mask: url("/assets/img/kit/freccia-marcata.webp") center / 17px no-repeat;
  mask: url("/assets/img/kit/freccia-marcata.webp") center / 17px no-repeat;
  transform: rotate(45deg) translate(-4px, 4px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
html:not(.js) .oli li:has(.is-attivo) { border-bottom-color: var(--oro); }
.olio.is-attivo .olio__num { color: var(--oro-chiaro); }
.olio.is-attivo .olio__nome { color: var(--oro-chiaro); font-style: italic; }
.olio.is-attivo .olio__freccia { opacity: 1; transform: rotate(45deg); }
.olio__nome { display: inline-block; transition: color .25s ease, transform .45s var(--ease-out); }
.olio.is-attivo .olio__nome { transform: translateX(6px); }
.olio:active .olio__nome { opacity: .8; }
@media (hover: hover) and (pointer: fine) {
  .olio:hover .olio__nome { color: var(--oro-chiaro); }
}

@media (max-width: 899px) {
  .collezione__griglia { grid-template-columns: 1fr; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .collezione__testo { padding-left: min(34%, 190px); min-height: 250px; }
  .collezione__bottiglia { left: 2%; top: 44px; bottom: auto; height: 300px; width: 28%; max-width: 150px; }
  .collezione__intro { margin: 18px 0 22px; font-size: 18px; }
  .collezione__testo .btn { margin-left: 0; }
  .olio { grid-template-columns: 52px 1fr 36px; }
}
@media (max-width: 767px) {
  .collezione__testo { padding-left: 34%; }
  .collezione__intro br { display: none; }
}

/* ── 03 territorio ────────────────────────────────────────────────────── */
.territorio {
  position: relative;
  display: grid; grid-template-columns: 44fr 56fr;
  border-bottom: 1px solid var(--linea);
}
.territorio__foto { position: relative; margin: 0; min-height: 100%; overflow: hidden; }
.territorio__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1.36; }
.territorio__foto figcaption {
  position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(14px, 1.6vw, 22px);
  font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--bianco);
  text-shadow: 0 1px 2px rgba(5, 14, 8, .9), 0 0 14px rgba(5, 14, 8, .8);
}
.territorio__foto::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(180deg, rgba(9, 22, 12, 0), rgba(9, 22, 12, .5) 55%, rgba(9, 22, 12, .82));
}
.territorio__foto figcaption { z-index: 1; }
.territorio__testo {
  position: relative; display: flex; align-items: center;
  padding: clamp(48px, 5vw, 80px) clamp(24px, 5vw, 80px) clamp(48px, 5vw, 80px) clamp(28px, 4vw, 64px);
}
.territorio__corpo { position: relative; z-index: 1; max-width: 540px; }
.territorio__contorni {
  position: absolute; right: 2%; top: 50%; width: 46%; max-width: 520px; transform: translateY(-50%);
  opacity: .75; pointer-events: none;
}
.punto { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--oro-chiaro); box-shadow: 0 0 12px rgba(228, 176, 96, .6); }
.punto--a { right: 22%; top: 33%; }
.punto--b { right: 30%; top: 63%; }
.territorio__contrade { margin-top: 18px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; color: var(--crema); }
.trattino { display: block; width: 46px; height: 1.5px; margin: 18px 0; background: var(--oro); }
.territorio__corpo > p:not(.occhiello):not(.territorio__contrade) { font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); margin-bottom: 26px; }
/* rami d'ulivo sfocati in primo piano, a cavallo delle sezioni (03-hero/ramo-ulivo-* del kit) */
.ramo-pp { position: absolute; z-index: 6; pointer-events: none; user-select: none; max-width: none; }
.ramo-pp--territorio-alto { right: -8vw; top: -12vw; width: 27vw; transform: rotate(-14deg); }
.ramo-pp--territorio-basso { right: -9vw; bottom: -13vw; width: 30vw; transform: rotate(16deg); }
.ramo-pp--invito-sx { left: -9vw; top: -7vw; width: 27vw; transform: rotate(-8deg); }
.ramo-pp--invito-dx { right: -9vw; top: -5vw; width: 29vw; transform: rotate(10deg); }
@media (max-width: 767px) {
  .territorio { grid-template-columns: 1fr; }
  .territorio__foto img { aspect-ratio: 1.3; max-height: 62svh; }
  .territorio__testo { padding: 48px max(var(--gutter), env(safe-area-inset-right, 0px)) 56px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .territorio__contorni { width: 74%; right: -14%; opacity: .5; }
  .punto--a { right: 16%; top: 22%; }
  .punto--b { right: 8%; top: 52%; }
  .ramo-pp { opacity: .9; }
  .ramo-pp--territorio-alto { width: 52vw; right: -20vw; top: -18vw; }
  .ramo-pp--territorio-basso { width: 54vw; right: -24vw; bottom: -20vw; }
  .ramo-pp--invito-sx { width: 50vw; left: -22vw; top: auto; bottom: -8vw; }
  .ramo-pp--invito-dx { width: 52vw; right: -22vw; top: -16vw; }
  .territorio__corpo br.solo-computer { display: none; }
}

/* ── 04 esperienze ────────────────────────────────────────────────────── */
.esperienze { position: relative; }
.esperienze .titolo-grande { margin-bottom: clamp(18px, 2vw, 26px); }
.panorama { margin: 0; overflow: hidden; }
.panorama img { width: 100%; aspect-ratio: 5.4; object-fit: cover; object-position: 50% 26%; }
.esperienze__riga {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  margin-top: 14px;
}
.esperienze__luogo { font-size: clamp(17px, 1.35vw, 19px); color: var(--testo); line-height: 1.45; }
.esperienze__luogo strong { font-weight: 400; color: var(--crema); font-size: clamp(19px, 1.55vw, 22px); }
.passi {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(30px, 3.6vw, 48px);
}
.passo {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto;
  column-gap: 18px; padding: 0 clamp(16px, 2.6vw, 44px);
}
.passo + .passo { border-left: 1px solid var(--linea-forte); }
.passo:first-child { padding-left: 0; }
.passo__num {
  grid-row: 1; align-self: start; position: relative; padding-bottom: 6px;
  font-size: clamp(24px, 2.2vw, 32px); line-height: 1; color: var(--oro-chiaro); font-variant-numeric: lining-nums;
}
.passo__num::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--oro); }
.passo img { grid-row: 1; height: clamp(54px, 5vw, 72px); width: auto; justify-self: center; }
.passo h3, .passo p { grid-column: 1 / -1; text-align: center; }
.passo h3 { margin-top: 14px; font-size: clamp(21px, 2vw, 28px); line-height: 1.2; }
.passo p { margin-top: 6px; font-size: clamp(17px, 1.35vw, 19px); max-width: 300px; justify-self: center; }
@media (max-width: 767px) {
  .panorama img { aspect-ratio: 2.3; object-position: 50% 40%; }
  .esperienze__riga { flex-direction: column; gap: 10px; }
  .passi { grid-template-columns: 1fr; margin-top: 18px; }
  .passo {
    grid-template-columns: 40px 64px 1fr; grid-template-rows: auto auto; column-gap: 14px;
    padding: 18px 0; align-items: center;
  }
  .passo + .passo { border-left: 0; border-top: 1px solid var(--linea); }
  .passo__num { grid-row: 1 / span 2; align-self: center; font-size: 24px; }
  .passo img { grid-row: 1 / span 2; grid-column: 2; height: 46px; max-width: 64px; object-fit: contain; }
  .passo h3, .passo p { grid-column: 3; text-align: left; justify-self: start; }
  .passo h3 { margin-top: 0; font-size: 21px; }
  .passo p { margin-top: 2px; font-size: 16px; }
}

/* ── 05 faq ───────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--linea); padding-block: clamp(48px, 5vw, 76px); }
.faq__griglia { display: grid; grid-template-columns: 1fr 1.9fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.domande { border-top: 1px solid var(--linea-forte); margin-top: 12px; }
.domanda { border-bottom: 1px solid var(--linea-forte); }
.domanda summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 58px; padding: 12px 18px; cursor: pointer; list-style: none;
  font-size: clamp(19px, 1.6vw, 23px); color: var(--crema);
  user-select: none; -webkit-user-select: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary:active { opacity: .8; }
.domanda__segno { position: relative; flex: none; width: 16px; height: 16px; }
.domanda__segno::before, .domanda__segno::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--crema);
  transition: transform .25s var(--ease-out);
}
.domanda__segno::after { transform: rotate(90deg); }
.domanda[open] .domanda__segno::after { transform: rotate(0deg); }
.domanda__risposta { padding: 0 18px 20px; font-size: clamp(17px, 1.35vw, 19px); color: var(--testo); }
@media (max-width: 767px) {
  .faq__griglia { grid-template-columns: 1fr; }
  .domanda summary { padding: 12px 4px; }
  .domanda__risposta { padding: 0 4px 18px; }
}

/* ── invito finale ────────────────────────────────────────────────────── */
.invito {
  position: relative;
  padding-block: clamp(48px, 5vw, 76px);
  border-top: 1px solid var(--linea);
}
.invito__griglia {
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center;
  gap: clamp(28px, 7vw, 110px);
}
.invito__azione p { margin-bottom: 18px; font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); }
@media (max-width: 767px) {
  .invito__griglia { grid-template-columns: 1fr; justify-content: start; gap: 22px; }
}

/* ── piede ────────────────────────────────────────────────────────────── */
.piede {
  background: var(--verde-fondo);
  padding: 34px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea);
  font-size: 16px; color: var(--testo);
}
.piede__riga {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding-bottom: 28px; border-bottom: 1px solid var(--linea);
}
.marchio--piede .marchio__simbolo { width: 58px; }
.piede__luogo { color: var(--crema); font-size: 18px; }
.piede__link { display: flex; justify-content: flex-end; gap: clamp(28px, 6vw, 96px); }
.piede__link a { display: inline-block; padding: 10px 0; color: var(--crema); font-size: 18px; }
@media (hover: hover) and (pointer: fine) { .piede__link a:hover, .piede__legale a:hover { color: var(--oro-chiaro); } }
.piede__ue {
  display: grid; grid-template-columns: 66px 1fr; gap: 20px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--linea);
}
.piede__ue img { width: 66px; height: auto; border-radius: 1px; }
.piede__ue p { font-size: 12px; line-height: 1.65; letter-spacing: .02em; color: var(--grigio); max-width: 980px; }
.piede__ue-titolo { display: block; margin-bottom: 4px; font-size: 14px; letter-spacing: 0; color: var(--testo-tenue); }
.piede__legale {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; align-items: baseline;
  padding-top: 22px; font-size: 14px; line-height: 1.6; color: var(--grigio);
}
.piede__pagine { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 0; }
.piede__pagine a { color: var(--testo-tenue); padding: 6px 0; }
.piede__pagine a + a::before { content: "·"; display: inline-block; margin: 0 10px; color: var(--grigio); }
.piede__nota-foto { grid-column: 1; }
.credit { grid-column: 2; grid-row: 1; text-align: right; color: var(--testo-tenue); }
.credit a { color: var(--crema); border-bottom: 1px solid var(--linea-forte); }
@media (max-width: 767px) {
  .piede { text-align: center; }
  .piede__riga { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .piede__link { justify-content: center; gap: 40px; }
  .piede__ue { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .piede__legale { grid-template-columns: 1fr; justify-items: center; }
  .piede__pagine { justify-content: center; }
  .credit { grid-column: 1; grid-row: auto; text-align: center; margin-top: 6px; }
}

/* ── pezzi per il copy (step 6) e per le pagine interne (6-bis): sempre le forme del design ── */

/* la testa di sezione dell'origine: titolo a sinistra, testo a destra */
.testa-sezione { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 24px 56px; }
.testa-sezione__nota { padding-bottom: 6px; color: var(--crema); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.testa-sezione__nota p + p { margin-top: 14px; }
.testa-sezione + .panorama { margin-top: clamp(28px, 3.4vw, 48px); }
.sotto-titolo { margin-top: 10px; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.3; color: var(--testo-tenue); font-style: italic; }
@media (max-width: 767px) { .testa-sezione { grid-template-columns: 1fr; gap: 18px; } }

/* l'elenco degli oli con i piatti */
.olio { align-items: start; padding: 14px 0; }
.olio__num { padding-top: 10px; }
.olio__freccia { margin-top: 12px; }
.olio__testo { display: block; }
.olio__desc {
  display: block; margin-top: 2px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.4; color: var(--testo-tenue);
  transition: color .25s ease;
}
.olio.is-attivo .olio__desc { color: var(--crema); }

/* i formati: i pilastri dell'origine, coi prodotti veri al posto delle icone */
.formati__elenco { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(32px, 4vw, 56px); }
.formato { text-align: center; padding: 0 clamp(12px, 2vw, 32px); }
.formato + .formato { border-left: 1px solid var(--linea-forte); }
.formato__foto { height: clamp(150px, 14vw, 210px); display: flex; align-items: flex-end; justify-content: center; margin-bottom: 20px; }
.formato__foto img { max-height: 100%; width: auto; filter: drop-shadow(0 14px 18px rgba(5, 14, 8, .5)); transition: transform .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .formato:hover .formato__foto img { transform: translateY(-6px); } }
.formato h3 { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; }
.formato h3::first-letter { text-transform: uppercase; }
.formati .filetto { margin-top: clamp(32px, 4vw, 52px); }
.formati__nota { margin-top: 16px; color: var(--crema); font-size: clamp(17px, 1.35vw, 19px); }
@media (max-width: 767px) {
  .formati__elenco { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .formato:nth-child(odd) { border-left: 0; }
  .formato__foto { height: 150px; }
}

/* i passi numerati (come ordinare, come prenotare) */
.passi--4 { grid-template-columns: repeat(4, 1fr); }
.passo--numero { display: block; }
.passo--numero .passo__num { display: inline-block; margin-bottom: 14px; }
.passo--numero p { text-align: left; max-width: none; justify-self: auto; font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); line-height: 1.4; }
.passo--numero + .passo--numero { padding-left: clamp(16px, 2.4vw, 36px); }
.sezione__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(28px, 3.4vw, 44px); }
.esperienze .passo p { margin-top: 12px; font-size: clamp(17px, 1.4vw, 20px); color: var(--crema); }
.esperienze__riga { margin-top: clamp(28px, 3.4vw, 44px); align-items: center; }
@media (max-width: 899px) {
  .passi--4 { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .passo--numero:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 767px) {
  .passi--4 { grid-template-columns: 1fr; row-gap: 0; }
  .passo--numero { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; padding: 16px 0 !important; border-left: 0 !important; }
  .passo--numero + .passo--numero { border-top: 1px solid var(--linea); }
  .passo--numero .passo__num { margin: 0; font-size: 24px; }
  .passo--numero p { grid-column: 2 !important; text-align: left !important; font-size: 18px; }
  .esperienze .passo { grid-template-columns: 40px 56px 1fr; }
  .esperienze .passo p { grid-column: 3; margin-top: 0; font-size: 17px; }
  .esperienze__riga { flex-direction: column; align-items: flex-start; }
}

/* foto e testo (la forma del territorio), anche a specchio */
.foto-testo {
  position: relative;
  display: grid; grid-template-columns: 44fr 56fr;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.foto-testo--specchio { grid-template-columns: 56fr 44fr; }
.foto-testo--specchio .foto-testo__foto { order: 2; }
.foto-testo__foto { position: relative; margin: 0; min-height: 100%; overflow: hidden; }
.foto-testo__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1.3; }
.foto-testo__foto--epoca { display: flex; align-items: center; justify-content: center; background: var(--verde-fondo); padding: clamp(24px, 4vw, 56px); }
.foto-testo__foto--epoca img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.foto-testo__foto figcaption, .didascalia {
  position: absolute; left: clamp(14px, 1.8vw, 24px); bottom: clamp(12px, 1.4vw, 20px); z-index: 1;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--bianco);
  text-shadow: 0 1px 2px rgba(5, 14, 8, .9), 0 0 14px rgba(5, 14, 8, .8);
}
.foto-testo__testo { display: flex; align-items: center; padding: clamp(48px, 5vw, 84px) clamp(24px, 5vw, 80px); }
.foto-testo__corpo { max-width: 600px; }
.foto-testo__corpo > p:not(.occhiello) { font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); }
.foto-testo__corpo > p + p:not(.foto-testo__sotto) { margin-top: 14px; }
.foto-testo__corpo h2 + p, .foto-testo__corpo .sotto-titolo + p { margin-top: 18px; }
.foto-testo__sotto { margin-top: 10px; font-size: clamp(21px, 1.9vw, 27px) !important; color: var(--testo-tenue) !important; font-style: italic; }
.foto-testo__corpo .sezione__azioni, .foto-testo__corpo > .reveal:last-child { margin-top: 28px; }
@media (max-width: 767px) {
  .foto-testo, .foto-testo--specchio { grid-template-columns: 1fr; }
  .foto-testo--specchio .foto-testo__foto { order: 0; }
  .foto-testo__foto img { aspect-ratio: 1.3; max-height: 62svh; }
  .foto-testo__testo { padding: 44px max(var(--gutter), env(safe-area-inset-right, 0px)) 52px max(var(--gutter), env(safe-area-inset-left, 0px)); }
}

/* gli anni della storia, come le righe della collezione */
.anni { margin: 22px 0 6px; border-top: 1px solid var(--linea-forte); }
.anni li { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea-forte); }
.anni__anno { font-size: clamp(20px, 1.7vw, 24px); color: var(--oro-chiaro); font-variant-numeric: lining-nums; line-height: 1.3; }
.anni li p { font-size: clamp(16px, 1.3vw, 18px); color: var(--crema); line-height: 1.45; }
.anni + .reveal { margin-top: 28px; }

/* le due contrade */
.territorio__corpo > p:not(.occhiello) { margin-top: 18px; }
.contrade { margin-top: 20px; }
.contrade li + li { margin-top: 14px; }
.contrade__nome { display: block; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; color: var(--crema); }
.contrade__desc { display: block; margin-top: 2px; font-size: clamp(16px, 1.3vw, 18px); color: var(--testo-tenue); }

/* la striscia delle degustazioni: persone, quindi un po' più alta */
.panorama--persone img { aspect-ratio: 3.2; object-position: 50% 72%; }
.esperienze h2 { margin-bottom: clamp(18px, 2vw, 26px); }
@media (max-width: 767px) { .panorama--persone img { aspect-ratio: 1.7; } }

/* i contatti dell'invito finale */
.invito__griglia { align-items: start; }
.invito__lead { margin-top: 14px; font-size: clamp(21px, 1.9vw, 27px); color: var(--testo-tenue); font-style: italic; }
.recapiti { font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); }
.recapiti li { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.recapiti a { display: inline-block; padding: 2px 0; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .recapiti a:hover { color: var(--oro-chiaro); } }
.invito .sezione__azioni { margin-top: 26px; }

/* il pulsante fisso da telefono: arriva dopo la prima schermata, lontano dalla barra dell'iPhone */
.fisso { display: none; }
@media (max-width: 767px) {
  .fisso {
    display: flex; justify-content: center; align-items: center; gap: 12px;
    position: fixed; z-index: 40;
    left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    min-height: 52px; padding: 12px 20px; border: 1px solid var(--oro); border-radius: 2px;
    background: rgba(9, 22, 12, .94); color: var(--bianco); font-size: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
  }
  .fisso:active { transform: scale(.97); }
  .js .fisso:not(.is-visibile) { opacity: 0; transform: translateY(20px); pointer-events: none; transition-duration: .2s; }
  html.menu-aperto .fisso { opacity: 0; pointer-events: none; }
  .piede { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* il piede, pulito e arioso (il cliente: «scritte schiacciate, interlinea incoerente») */
.piede__griglia { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 32px 48px; padding-bottom: 32px; border-bottom: 1px solid var(--linea); }
.piede__simbolo img { width: 64px; height: auto; }
.piede__nome { margin-top: 14px; font-size: 22px; color: var(--crema); letter-spacing: .02em; }
.piede__marchio p:last-child { margin-top: 4px; color: var(--testo-tenue); font-size: 16px; line-height: 1.6; }
.piede__menu { display: flex; flex-direction: column; align-items: flex-start; }
.piede__menu a { padding: 6px 0; color: var(--crema); font-size: 17px; line-height: 1.5; }
.piede__contatti { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--testo-tenue); }
.piede__contatti p + p { margin-top: 6px; }
.piede__contatti a { color: var(--crema); padding: 2px 0; display: inline-block; }
@media (hover: hover) and (pointer: fine) { .piede__menu a:hover, .piede__contatti a:hover { color: var(--oro-chiaro); } }
.piede__legale { grid-template-columns: 1fr auto; }
.piede__pagine span { color: var(--grigio); }
.piede__pagine a + span::before, .piede__pagine a + a::before { content: "·"; display: inline-block; margin: 0 10px; color: var(--grigio); }
.piede__pagine span::before { content: "·"; display: inline-block; margin: 0 10px; }
@media (max-width: 899px) {
  .piede__griglia { grid-template-columns: 1fr 1fr; }
  .piede__marchio { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .piede__griglia { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .piede__menu { align-items: center; }
}

/* ── le pagine interne (6-bis): gli stessi pezzi della home ─────────────── */

/* la hero delle pagine: la forma della home, più bassa */
.hero--pagina { height: auto; min-height: clamp(520px, 72vh, 720px); padding: calc(var(--testata-h) + 40px) 0 clamp(64px, 7vw, 110px); align-items: flex-end; }
.hero--pagina .hero__contenuto { padding-top: 0; }
.hero--pagina .hero__velo {
  background:
    linear-gradient(180deg, rgba(9, 22, 12, .6) 0%, rgba(9, 22, 12, 0) 24%),
    linear-gradient(0deg, #0C1B10 0%, rgba(12, 27, 16, .86) 24%, rgba(12, 27, 16, .5) 56%, rgba(12, 27, 16, .08) 82%),
    linear-gradient(90deg, rgba(9, 22, 12, .5) 0%, rgba(9, 22, 12, 0) 62%);
}
.hero--pagina .hero__lead { max-width: 38em; }
.hero__formati { position: absolute; z-index: 3; right: 3%; bottom: -8%; width: 44%; max-width: 700px; margin: 0; pointer-events: none; animation: sale-poco 1.1s var(--ease-out) .35s backwards; }
.hero__formati .hero__pietra { width: 100%; }
.hero__formato { position: absolute; bottom: 64%; display: block; }
.hero__formato img { width: 100%; height: auto; filter: drop-shadow(-10px 16px 16px rgba(5, 14, 8, .5)); }
.hero__formato--bib { left: 14%; width: 26%; }
.hero__formato--pouch { left: 39%; width: 21%; bottom: 63%; }
.hero__formato--bott { left: 60%; width: 11%; }
.hero__formato--latt { left: 72%; width: 13%; bottom: 62%; }
.hero--pagina:has(.hero__formati) .hero__testo { max-width: 620px; }
@media (max-width: 767px) {
  .hero--pagina { min-height: 78svh; padding-bottom: 56px; }
  .hero--pagina:has(.hero__formati) { padding-bottom: 46vw; }
  .hero__formati { right: 4%; width: 92%; bottom: -1%; }
}

/* righe numerate (la forma dell'elenco degli oli) */
.righe { margin: 18px 0 8px; border-top: 1px solid var(--linea-forte); }
.righe li { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linea-forte); }
.righe__num { font-size: 15px; color: var(--oro-chiaro); font-variant-numeric: lining-nums; }
.righe__testo { font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); line-height: 1.4; }
.righe--recapiti .righe__testo { font-size: clamp(21px, 2vw, 28px); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { a.righe__testo:hover { color: var(--oro-chiaro); } }
.foto-testo__corpo > .righe + p { margin-top: 18px; }
.numero { color: var(--crema); border-bottom: 1px solid var(--oro); }

/* due colonne di testo */
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(32px, 6vw, 96px); }
.due-colonne--larga { grid-template-columns: 1fr 1.3fr; align-items: start; }
.due-colonne h2 + p { margin-top: 18px; }
.due-colonne p { font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); }
.due-colonne p + p { margin-top: 12px; }
.indirizzo { font-size: clamp(21px, 1.9vw, 26px) !important; color: var(--bianco) !important; user-select: text; }
@media (max-width: 767px) { .due-colonne, .due-colonne--larga { grid-template-columns: 1fr; } }

/* due foto in griglia (mai una sotto l'altra a tutta larghezza) */
.foto-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(28px, 3.4vw, 48px); }
.foto-griglia figure, .foto-testo__foto--doppia figure, .contrada__foto { position: relative; margin: 0; overflow: hidden; }
.foto-griglia img { width: 100%; aspect-ratio: 1.45; object-fit: cover; }
.foto-testo__foto--doppia { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.foto-testo__foto--doppia img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: .78; }
@media (max-width: 767px) { .foto-griglia { grid-template-columns: 1fr 1fr; gap: 10px; } .foto-griglia img { aspect-ratio: 1; } }

/* le schede degli oli */
.schede-oli { border-top: 1px solid var(--linea); }
.scheda-olio {
  position: relative; display: grid; grid-template-columns: 36fr 64fr; align-items: center; gap: clamp(24px, 4vw, 72px);
  max-width: calc(var(--larghezza) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(56px, 6vw, 96px) var(--gutter);
  border-bottom: 1px solid var(--linea);
}
.scheda-olio--specchio { grid-template-columns: 64fr 36fr; }
.scheda-olio--specchio .scheda-olio__foto { order: 2; }
.scheda-olio__foto { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 100%; }
.scheda-olio__foto img { position: relative; width: min(220px, 52%); height: auto; filter: drop-shadow(-14px 22px 22px rgba(5, 14, 8, .55)); transition: transform .6s var(--ease-out); }
.scheda-olio__alone { position: absolute; left: 50%; top: 55%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(207, 160, 85, .2), rgba(207, 160, 85, 0)); }
@media (hover: hover) and (pointer: fine) { .scheda-olio:hover .scheda-olio__foto img { transform: translateY(-8px) rotate(-1.5deg); } }
.scheda-olio__testo h2 { font-size: clamp(38px, 4.4vw, 62px); }
.scheda-olio__cultivar { margin-top: 12px; font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); font-style: italic; max-width: 36em; }
.scheda-olio__dati { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 28px 0 30px; border-top: 1px solid var(--linea-forte); }
.scheda-olio__dati > div { padding: 18px 20px 0 0; }
.scheda-olio__dati > div + div { padding-left: 20px; border-left: 1px solid var(--linea-forte); }
.scheda-olio__dati dt { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-chiaro); margin-bottom: 10px; }
.scheda-olio__dati dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--testo); }
.scheda-olio__dati dd p + p { margin-top: 8px; }
.intensita { margin-top: 12px; }
.intensita li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 4px 0; color: var(--crema); }
.intensita__valore { font-variant-numeric: lining-nums; color: var(--oro-chiaro); min-width: 1ch; text-align: right; }
.punti { display: inline-flex; gap: 5px; }
.punto-pieno { width: 9px; height: 9px; border-radius: 50%; background: var(--oro); }
.punto-vuoto { background: transparent; box-shadow: inset 0 0 0 1px var(--linea-forte); }
.scheda-olio__formati li { padding: 2px 0; }
.scheda-olio__formati li::first-letter { text-transform: uppercase; }
.scheda-olio__prezzo { margin-top: 10px !important; color: var(--crema); font-style: italic; }
@media (max-width: 1023px) { .scheda-olio__dati { grid-template-columns: 1fr 1fr; } .scheda-olio__dati > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--linea-forte); margin-top: 18px; } }
@media (max-width: 767px) {
  .scheda-olio, .scheda-olio--specchio { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 52px; }
  .scheda-olio--specchio .scheda-olio__foto { order: 0; }
  .scheda-olio__foto img { width: 34%; }
  .scheda-olio__dati { grid-template-columns: 1fr; }
  .scheda-olio__dati > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea-forte); margin-top: 18px; }
  .scheda-olio__dati > div:nth-child(3) { margin-top: 18px; }
}

/* l'invito con la foto o col prodotto */
.invito__testo { font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); }
.invito h2 + .invito__testo, .invito__testo + .invito__testo { margin-top: 14px; }
.invito--foto .invito__griglia, .invito--prodotto .invito__griglia { grid-template-columns: 1fr 1.2fr; justify-content: stretch; align-items: center; }
.invito__foto { margin: 0; overflow: hidden; }
.invito__foto img { width: 100%; aspect-ratio: 1.4; object-fit: cover; }
.invito__prodotto { display: flex; justify-content: center; }
.invito__prodotto img { width: min(240px, 60%); height: auto; filter: drop-shadow(-12px 20px 20px rgba(5, 14, 8, .55)); }
@media (max-width: 767px) { .invito--foto .invito__griglia, .invito--prodotto .invito__griglia { grid-template-columns: 1fr; } .invito__prodotto img { width: 42%; } }

/* la linea del tempo della storia */
.linea-tempo { position: relative; margin-top: clamp(36px, 4vw, 60px); }
.linea-tempo::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--oro), rgba(207, 160, 85, .15)); }
.tappa { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(28px, 3vw, 44px) 0; }
.tappa::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--oro-chiaro); box-shadow: 0 0 0 5px var(--verde-notte), 0 0 14px rgba(228, 176, 96, .5); }
.tappa--specchio .tappa__foto { order: 2; }
.tappa__foto { margin: 0; overflow: hidden; }
.tappa__foto img { width: 100%; aspect-ratio: 1.35; object-fit: cover; }
.tappa__foto--epoca { display: flex; justify-content: center; background: var(--verde-fondo); padding: clamp(14px, 2vw, 26px); }
.tappa__foto--epoca img { width: auto; max-width: 100%; max-height: 420px; aspect-ratio: auto; object-fit: contain; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.tappa__anno { font-size: clamp(42px, 4.8vw, 68px); line-height: 1; color: var(--oro-chiaro); font-variant-numeric: lining-nums; margin-bottom: 14px; }
.tappa__testo p:not(.tappa__anno) { font-size: clamp(18px, 1.45vw, 20px); color: var(--crema); line-height: 1.55; max-width: 34em; }
.tappa__testo p + p:not(.tappa__anno) { margin-top: 12px; }
@media (max-width: 767px) {
  .linea-tempo::before { left: 5px; }
  .tappa, .tappa--specchio { grid-template-columns: 1fr; gap: 18px; padding-left: 28px; }
  .tappa::before { left: 5px; top: 36px; }
  .tappa--specchio .tappa__foto { order: 0; }
  .tappa__foto--epoca img { max-height: 340px; }
}

/* il mito greco */
.mito { border-top: 1px solid var(--linea); }
.mito__corpo { max-width: calc(780px + 2 * var(--gutter)); text-align: left; }
.mito__icona img { height: 96px; width: auto; margin-bottom: 22px; }
.mito h2 { margin-bottom: 20px; }
.mito p:not(.occhiello) { font-size: clamp(18px, 1.5vw, 21px); color: var(--crema); line-height: 1.6; }
.mito p + p { margin-top: 14px; }

/* il territorio: i numeri, le contrade, i frutti */
.contatori { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(28px, 3.4vw, 48px); }
.contatore { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px; }
.contatore + .contatore { border-left: 1px solid var(--linea-forte); }
.contatore__icona { order: 0; height: 64px; width: auto; margin-bottom: 18px; }
.contatore__valore { order: 1; font-size: clamp(54px, 6vw, 88px); line-height: 1; color: var(--bianco); font-variant-numeric: lining-nums tabular-nums; }
.contatore__nome { order: 2; margin-top: 10px; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-chiaro); }
@media (max-width: 767px) {
  .contatori { grid-template-columns: 1fr; }
  .contatore { padding: 22px 0; }
  .contatore + .contatore { border-left: 0; border-top: 1px solid var(--linea); }
}
.panorama-contrade { position: relative; overflow: hidden; border-top: 1px solid var(--linea); }
.panorama-contrade .territorio__contorni { right: -6%; top: 10%; transform: none; opacity: .45; }
.panorama-contrade .wrap { position: relative; }
.contrade-due { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(28px, 3.4vw, 48px); }
.contrada h3 { font-size: clamp(30px, 3vw, 42px); margin-bottom: 14px; }
.contrada p { font-size: clamp(17px, 1.4vw, 19px); color: var(--crema); }
.contrada p + p { margin-top: 10px; }
.contrada__foto { margin-top: 24px; }
.contrada__foto img { width: 100%; aspect-ratio: 1.4; object-fit: cover; }
.contrada__foto-due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.contrada__foto-due .contrada__foto { margin-top: 0; }
.contrada__foto-due img { aspect-ratio: .95; }
@media (max-width: 767px) { .contrade-due { grid-template-columns: 1fr; } .contrada__foto-due .didascalia { font-size: 11px; letter-spacing: .12em; } }
.frutti { border-top: 1px solid var(--linea); }
.schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(32px, 4vw, 56px); align-items: start; }
.scheda { padding: clamp(22px, 2.2vw, 32px); border: 1px solid var(--linea-forte); background: rgba(19, 33, 19, .55); }
.scheda h3 { font-size: clamp(25px, 2.2vw, 31px); margin-bottom: 12px; }
.scheda p, .scheda li { font-size: 16.5px; line-height: 1.55; color: var(--testo); }
.scheda p + p { margin-top: 8px; }
.scheda__foto { margin: calc(-1 * clamp(22px, 2.2vw, 32px)) calc(-1 * clamp(22px, 2.2vw, 32px)) 20px; overflow: hidden; }
.scheda__foto img { width: 100%; aspect-ratio: 1.5; object-fit: cover; }
.scheda__icona { height: 64px; width: auto; margin-bottom: 18px; }
.varieta li { padding: 10px 0; border-top: 1px solid var(--linea); }
.varieta strong { font-weight: 500; color: var(--crema); }
@media (max-width: 1023px) { .schede { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .schede { grid-template-columns: 1fr; } }

/* il modulo delle degustazioni */
.prenota { position: relative; border-top: 1px solid var(--linea); }
.prenota .ramo-pp--invito-dx { top: -4vw; }
.modulo { margin-top: clamp(36px, 4vw, 60px); padding: clamp(24px, 3vw, 44px); border: 1px solid var(--oro); background: rgba(9, 22, 12, .55); max-width: 920px; }
.modulo h3 { font-size: clamp(28px, 2.6vw, 38px); }
.modulo__intro { margin-top: 8px; color: var(--crema); font-size: 18px; }
.modulo__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: 26px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--largo, .campo--scelte { grid-column: 1 / -1; }
.campo--scelte { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; }
.campo label { font-size: 15px; color: var(--testo-tenue); }
.campo input, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: inherit; font-size: 17px; color: var(--bianco);
  background: rgba(254, 254, 253, .05); border: 1px solid var(--linea-forte); border-radius: 2px;
  transition: border-color .2s ease, background-color .2s ease;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--oro-chiaro); background: rgba(254, 254, 253, .08); }
.campo input[type="date"] { color-scheme: dark; }
.campo.ha-errore input { border-color: #E4B060; }
.campo__errore { font-size: 15px; color: var(--oro-chiaro); }
.scelta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px !important; color: var(--crema) !important; cursor: pointer; }
.scelta input { width: 20px; height: 20px; accent-color: #CFA055; }
.modulo__invio { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 26px; }
.modulo__wa { font-size: 16px; color: var(--testo-tenue); }
.modulo__wa a { color: var(--crema); border-bottom: 1px solid var(--oro); }
.thk-avviso-modulo { margin-top: 18px; font-size: 14px; color: var(--grigio); }
.thk-avviso-modulo a { color: var(--testo-tenue); border-bottom: 1px solid var(--linea-forte); }
.modulo__esito, .modulo__conferma { margin-top: 18px; padding: 16px 18px; border-left: 2px solid var(--oro); background: rgba(207, 160, 85, .08); color: var(--crema); }
.modulo__conferma-titolo { font-size: 22px; color: var(--bianco); margin-bottom: 4px; }
.modulo__conferma:not([hidden]) { animation: risposta .35s var(--ease-out); }
@media (max-width: 767px) {
  .modulo__griglia { grid-template-columns: 1fr; }
  .campo input, .campo textarea { font-size: 16px; }
}

/* ── pagine legali ────────────────────────────────────────────────────── */
.pagina-legale { padding: calc(var(--testata-h) + 56px) 0 80px; }
.pagina-legale .testata { background: rgba(12, 27, 16, .96); box-shadow: 0 1px 0 var(--linea); }
.legale { max-width: 760px; }
.legale h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.05; margin-bottom: 14px; }
.legale h1 + p { color: var(--grigio); font-size: 15px; margin-bottom: 30px; }
.legale h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; margin: 40px 0 12px; }
.legale h3 { font-size: 21px; margin: 26px 0 8px; }
.legale p, .legale li { font-size: 17px; line-height: 1.65; color: var(--testo); }
.legale p + p { margin-top: 12px; }
.legale ul, .legale ol { margin: 10px 0 14px; padding-left: 1.2em; list-style: disc; }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--crema); border-bottom: 1px solid var(--oro); overflow-wrap: anywhere; }
.legale table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 15px; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linea); }
.legale th { color: var(--crema); font-weight: 500; }
.legale .tabella { overflow-x: auto; }

/* ── pagina 404 ───────────────────────────────────────────────────────── */
.errore { min-height: 70svh; display: flex; align-items: center; padding: calc(var(--testata-h) + 48px) 0 64px; }
.errore h1 { font-size: clamp(42px, 6vw, 80px); line-height: 1; margin-bottom: 18px; }
.errore p { font-size: 19px; margin-bottom: 28px; color: var(--crema); }

/* ── movimento (step 5-bis) ───────────────────────────────────────────────
   Curve e durate di Emil Kowalski (Animazioni/, 09 § 0-bis-2): entrate con --ease-out, spostamenti con
   --ease-in-out, solo transform e opacity; la hero entra col CSS, senza aspettare il JavaScript; il video e il
   suo fotogramma non partono mai da opacity 0. Senza JavaScript (niente classe .js) tutto resta visibile. */

/* il filetto con «Leano · Gallinica» si disegna da sinistra */
.filetto::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea-forte);
  transform-origin: left;
}
.js .filetto.reveal { transform: none; }
.js .filetto.reveal::before { transform: scaleX(0); transition: transform 1.2s var(--ease-in-out) .1s; }
.js .filetto.reveal.in::before { transform: scaleX(1); }

/* la hero: le righe del titolo salgono dalla loro maschera, poi sottotitolo, pulsante e «scroll» */
.hero h1 .riga { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero h1 .riga > span { display: inline-block; }
@keyframes riga-sale { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes sale { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sale-poco { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes entra-destra { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dissolvenza { from { opacity: 0; } to { opacity: 1; } }
.hero h1 .riga > span { animation: riga-sale 1s var(--ease-out) .15s backwards; }
.hero h1 .riga + .riga > span { animation-delay: .27s; }
.hero__sottotitolo, .hero__lead { animation: sale .8s var(--ease-out) .5s backwards; }
.hero__lead + .hero__lead { animation-delay: .58s; }
.hero__azioni { animation: sale .8s var(--ease-out) .66s backwards; }

.scroll { animation: dissolvenza .8s ease .9s backwards; }
.hero__prodotto { animation: sale-poco 1.1s var(--ease-out) .35s backwards; }
.hero__ramo { animation: entra-destra 1.2s var(--ease-out) .55s backwards; }
.testata__riga { animation: dissolvenza .7s ease .05s backwards; }

/* la linea di «scroll»: una luce che scende, sempre */
.scroll__linea { position: relative; overflow: hidden; background: rgba(244, 241, 232, .28); opacity: 1; }
.scroll__linea::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: var(--crema);
  animation: scende 2.4s var(--ease-in-out) 1.4s infinite;
  transform: translateY(-100%);
}
@keyframes scende { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(240%); } }

/* le entrate mentre si scorre: .reveal → .in (una volta sola) */
.js .reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--ritardo, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }
/* il numero dell'occhiello: il filetto oro si allunga quando la sezione entra */
.js .occhiello.reveal .occhiello__num::after { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out) .35s; }
.js .occhiello.reveal.in .occhiello__num::after { transform: scaleX(1); }
.js .trattino.reveal { transform: scaleX(0); transform-origin: left; }
.js .trattino.reveal.in { transform: scaleX(1); }

/* le foto si svelano dal basso e si assestano; col mouse si avvicinano appena */
/* il clip-path va sull'immagine, non sul riquadro osservato: con il riquadro tagliato a zero l'IntersectionObserver
   non lo vede mai entrare, e la foto resterebbe nascosta (16 § 5, «gli effetti non devono nascondere il contenuto») */
.js .reveal.reveal--foto { opacity: 1; transform: none; }
.js .reveal.reveal--foto img { clip-path: inset(0 0 100% 0); transform: scale(1.1); transition: clip-path 1.2s var(--ease-in-out), transform 1.6s var(--ease-out); transition-delay: var(--ritardo, 0s); }
.js .reveal.reveal--foto.in img { clip-path: inset(0 0 0 0); transform: none; }
.zoom { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .zoom img { transition: transform .7s var(--ease-out); }
  .js .reveal--foto.in.zoom:hover img, .zoom:hover img { transform: scale(1.04); }
}

/* la collezione: la linea oro scorre fino all'olio scelto, la bottiglia cambia con l'olio */
.oli-cornice { position: relative; }
.oli__indicatore {
  position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--oro);
  transform: translateY(var(--y, 0)); opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease-in-out), opacity .3s ease;
}
.js .oli-cornice:has(.reveal.in) .oli__indicatore.is-pronto { opacity: 1; transition-delay: 0s, .35s; }
.collezione__bottiglia img { transition: opacity .38s var(--ease-out), transform .45s var(--ease-out), filter .38s ease; }
.collezione__bottiglia img.is-cambio { opacity: 0; transform: translateY(14px); filter: blur(2px); transition-duration: .18s; }
.collezione__bottiglia img.is-saluto { transform: translateY(-8px); transition-duration: .22s; }

/* i punti oro delle contrade respirano */
.punto::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--oro-chiaro);
  animation: respira 2.8s var(--ease-out) infinite; opacity: 0;
}
.punto--b::after { animation-delay: 1.4s; }
@keyframes respira { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } }

/* le risposte delle domande entrano con la tendina */
@keyframes risposta { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.domanda[open] .domanda__risposta { animation: risposta .28s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .domanda summary:hover { color: var(--oro-chiaro); } }
.domanda summary { transition: color .2s ease; }

/* l'intestazione si fa da parte scendendo e torna risalendo */
.testata { transition: background-color .3s ease, box-shadow .3s ease, transform .22s var(--ease-out); }
.testata.is-nascosta { transform: translateY(-100%); }
.testata:not(.is-nascosta) { transition-duration: .3s, .3s, .35s; }

/* il menu da telefono: le voci arrivano una dopo l'altra, se ne vanno insieme e più in fretta */
@media (max-width: 1179px) {
  .menu__voci li { opacity: 0; transform: translateY(16px); transition: opacity .15s ease, transform .15s var(--ease-out); }
  .menu.is-aperto .menu__voci li {
    opacity: 1; transform: none;
    transition: opacity .4s var(--ease-out), transform .5s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 55ms + 80ms);
  }
}

/* i link del piè di pagina e del menu: il filetto oro cresce col mouse */
@media (hover: hover) and (pointer: fine) {
  .link-oro { background: linear-gradient(var(--oro-chiaro), var(--oro-chiaro)) left bottom / 0 1.5px no-repeat; transition: background-size .35s var(--ease-out); }
  .link-oro:hover { background-size: 100% 1.5px; }
}

/* ── meno movimento ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* meno movimento, non zero: restano le dissolvenze, spariscono gli spostamenti */
  html { scroll-behavior: auto; }
  .hero__video { transition: opacity .3s linear; }
  .hero h1 .riga > span, .hero__sottotitolo, .hero__lead, .hero__azioni, .hero__prodotto, .hero__ramo { animation-name: dissolvenza; animation-duration: .6s; }
  .js .reveal { transform: none; transition: opacity .6s ease; }
  .js .reveal.reveal--foto img { clip-path: none; transform: none; transition: none; }
  .js .occhiello.reveal .occhiello__num::after, .js .trattino.reveal, .js .filetto.reveal::before { transform: none; transition: none; }
  .scroll__linea::after, .punto::after { animation: none; display: none; }
  .collezione__bottiglia img.is-cambio { transform: none; filter: none; }
  .collezione__bottiglia img.is-saluto { transform: none; }
  .olio.is-attivo .olio__nome { transform: none; }
  .menu__voci li, .menu.is-aperto .menu__voci li { transform: none; }
  .testata.is-nascosta { transform: none; }
  .btn:active { transform: none; }
}