/* 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);
  --avorio: #F3EDE1;        /* il «giorno» del sito (Fuori procedura, Domenico 22/10: fondi alternati) */
  --nero-caldo: #0A0F0B;    /* la collezione */
  --inchiostro: #14231A;    /* il testo sull'avorio */
  --sfuma: 72px;
  --colline: 56px;
}

/* ── 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: calc(var(--testata-h) + 8px);
}
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; overflow: clip; }
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__nome { color: var(--oro); }
.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);
}
/* il sito in pausa visto con la password del pannello (kit 1.7): la fascia «⏸️ Il sito è in pausa…» sta in cima alla
   pagina; la testata, che di solito è fissa, le va sotto invece di coprirla (23/10/2026) */
body:has(> .thk-pausa-vista) .testata { position: absolute; top: auto; }
.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; }
  .menu__solo-telefono .btn { margin-top: 20px; padding: 12px 24px; font-size: 20px; white-space: nowrap; }
  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: 40%; bottom: 60%;
  width: 24%;
  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: 41%; width: 21%; bottom: 59%; }
  .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__copy { margin-top: 18px; max-width: 34em; }
.origine__copy p { font-size: clamp(17px, 1.4vw, 20px); color: var(--crema); line-height: 1.5; }
.origine__copy p + p { margin-top: 10px; }
.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: -7%; top: 3%; bottom: 0; width: 21%; max-width: 320px;
  overflow: hidden;
}
.collezione__bottiglia img { filter: drop-shadow(10px 18px 26px rgba(0, 0, 0, .45)); }
.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: -9%; top: 30px; bottom: auto; height: 340px; width: 38%; max-width: 190px; }
  .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; display: flex; flex-direction: column; }
.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; }
/* la rotazione dei rami è già nei file (…-rm14, -rp16…): qui solo posto e misura, l'altezza segue la proporzione */
.ramo-pp--territorio-alto { right: -8vw; top: -12vw; width: 27vw; height: auto; }
.ramo-pp--territorio-basso { right: -9vw; bottom: -13vw; width: 30vw; height: auto; }
.ramo-pp--invito-sx { left: -9vw; top: -7vw; width: 27vw; height: auto; }
.ramo-pp--invito-dx { right: -9vw; top: -5vw; width: 29vw; height: auto; }
@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; }
/* il prezzo del formato, quando il cliente lo mette dal pannello (vuoto: non c'è) — 23/10/2026 */
.formato__prezzo { margin-top: 8px; font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; letter-spacing: .02em; color: inherit; }
.formato__prezzo--richiesta { opacity: .75; font-style: italic; }
.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; }
.esperienze__riga--luogo { margin-top: 14px; align-items: flex-start; }
.esperienze .passo h3 { margin-top: 14px; }
.esperienze .passo h3 + p { margin-top: 6px; font-size: clamp(16px, 1.3vw, 18px); color: var(--testo); }
@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: center; }
.contatti-home { border-top: 1px solid var(--linea); }
.contatti-home .invito__lead { margin-top: 12px; }
.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: 32px 0; border-bottom: 1px solid var(--linea); }
.piede__nome { margin-top: 0 !important; }
.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); padding: 6px 0; }
.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: visible; overflow-x: clip; 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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VESTE «LUXURY» (Fuori procedura, Domenico 22/10 sera: «fargli fare un salto di livello»)
   Design/DIREZIONE-LUXURY.md · fondi alternati, tipografia editoriale, prodotto come un gioiello, foglie e vento.
   ═══════════════════════════════════════════════════════════════════════════ */

/* i fondi alternati, con la sfumatura dalla sezione di prima */
.fondo-verde, .fondo-avorio, .fondo-nero, .fondo-immagine { position: relative; border-top: 0 !important; border-bottom: 0 !important; }
.fondo-verde { background: #0C1B10; --colore: #0C1B10; }
.fondo-nero { background: #0A0F0B; --colore: #0A0F0B; }
.fondo-immagine { background: #0C1B10; --colore: #0C1B10; }
.fondo-avorio {
  background: #F3EDE1; --colore: #F3EDE1;
  --bianco: #14231A; --crema: #1F3326; --testo: #3B4B40; --testo-tenue: #5E6C62; --grigio: #76827A;
  --linea: rgba(20, 35, 26, .13); --linea-forte: rgba(20, 35, 26, .24); --oro: #B4873D; --oro-chiaro: #94672A;
  color: var(--testo);
}
.fondo-avorio ::selection { background: rgba(180, 135, 61, .25); }
.piede { position: relative; background: #09160C; --colore: #09160C; border-top: 0; padding-top: 110px; }

/* il passaggio fra i fondi: il profilo delle colline (come il simbolo del paesaggio del kit) nel colore della
   sezione che arriva, con un filetto d'oro sottilissimo sul bordo. Uguale in tutto il sito. */
.fondo-verde::before, .fondo-avorio::before, .fondo-nero::before, .fondo-immagine::before, .piede::before,
.fondo-verde::after, .fondo-avorio::after, .fondo-nero::after, .fondo-immagine::after, .piede::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--colline)); height: var(--colline); z-index: 5; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.fondo-verde::before, .fondo-avorio::before, .fondo-nero::before, .fondo-immagine::before, .piede::before {
  background: var(--colore); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2040%20C%20110%2034%20200%2016%20330%2019%20C%20460%2022%20530%2041%20650%2037%20C%20770%2033%20830%2011%20970%2013%20C%201110%2015%201170%2035%201290%2033%20C%201370%2032%201415%2025%201440%2023%20V60%20H0%20Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2040%20C%20110%2034%20200%2016%20330%2019%20C%20460%2022%20530%2041%20650%2037%20C%20770%2033%20830%2011%20970%2013%20C%201110%2015%201170%2035%201290%2033%20C%201370%2032%201415%2025%201440%2023%20V60%20H0%20Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E");
}
.fondo-verde::after, .fondo-avorio::after, .fondo-nero::after, .fondo-immagine::after, .piede::after {
  background: linear-gradient(90deg, rgba(207, 160, 85, 0), rgba(207, 160, 85, .75) 18%, rgba(228, 176, 96, .9) 50%, rgba(207, 160, 85, .75) 82%, rgba(207, 160, 85, 0));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2040%20C%20110%2034%20200%2016%20330%2019%20C%20460%2022%20530%2041%20650%2037%20C%20770%2033%20830%2011%20970%2013%20C%201110%2015%201170%2035%201290%2033%20C%201370%2032%201415%2025%201440%2023%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%20vector-effect%3D%22non-scaling-stroke%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2040%20C%20110%2034%20200%2016%20330%2019%20C%20460%2022%20530%2041%20650%2037%20C%20770%2033%20830%2011%20970%2013%20C%201110%2015%201170%2035%201290%2033%20C%201370%2032%201415%2025%201440%2023%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%20vector-effect%3D%22non-scaling-stroke%22/%3E%3C/svg%3E");
}
.fondo-avorio:nth-of-type(even)::before, .fondo-avorio:nth-of-type(even)::after { transform: scaleX(-1); }
.sezione { padding-block: clamp(110px, 12.5vw, 184px); }
.territorio, .foto-testo { padding-top: var(--sfuma); padding-bottom: calc(var(--colline) + 10px); }
@media (max-width: 767px) { :root { --sfuma: 48px; --colline: 30px; } .sezione { padding-block: 104px 92px; } .piede { padding-top: 84px; } }

/* la tipografia editoriale: titoli grandi e leggeri, parole chiave in corsivo oro */
h2 { font-weight: 300; font-size: clamp(40px, 5.1vw, 80px); line-height: 1.02; letter-spacing: -.026em; }
.titolo-grande { font-weight: 300; font-size: clamp(46px, 6.8vw, 106px); line-height: .98; letter-spacing: -.03em; }
h1 em, h2 em { font-style: italic; font-weight: 300; color: var(--oro-chiaro); }
.occhiello { font-size: 12.5px; letter-spacing: .32em; margin-bottom: clamp(22px, 2.4vw, 34px); }
.occhiello__num { font-size: 17px; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .045em .16em .02em; margin: 0 -.045em -.16em -.02em; }
.w > span { display: inline-block; }
.js .reveal.titolo { opacity: 1; transform: none; }
.js .titolo .w > span { transform: translateY(110%); transition: transform 1.05s var(--ease-out); transition-delay: calc(var(--ritardo, 0s) + var(--n, 0) * 42ms); }
.js .titolo.in .w > span { transform: none; }
.testa-sezione__nota, .origine__copy p, .foto-testo__corpo > p:not(.occhiello), .territorio__corpo > p:not(.occhiello) { line-height: 1.62; }

/* ── la hero: video a tutto schermo, sfumatura cinematografica, la bottiglia nella luce ── */
.hero--casa { height: auto; min-height: 100svh; align-items: center; padding: calc(var(--testata-h) + 24px) 0 96px; overflow: hidden; }
.hero .hero__velo {
  background:
    radial-gradient(130% 100% at 62% 38%, rgba(0, 0, 0, 0) 46%, rgba(6, 10, 7, .55) 100%),
    linear-gradient(90deg, rgba(8, 14, 9, .8) 0%, rgba(8, 14, 9, .45) 38%, rgba(8, 14, 9, 0) 68%),
    linear-gradient(0deg, #0C1B10 0%, rgba(12, 27, 16, .72) 14%, rgba(12, 27, 16, 0) 42%),
    linear-gradient(180deg, rgba(8, 14, 9, .6) 0%, rgba(8, 14, 9, 0) 24%),
    linear-gradient(rgba(70, 45, 10, .14), rgba(70, 45, 10, .14));
}
.hero .hero__contenuto { z-index: 4; }
.hero--casa .hero__testo { max-width: 1000px; }
.hero h1 { font-weight: 300; font-size: clamp(44px, 5vw, 84px); line-height: 1; letter-spacing: -.03em; }
.hero h1 .w > span { animation: riga-sale 1.15s var(--ease-out) calc(.3s + var(--n) * 70ms) backwards; }
.hero__sottotitolo { margin: 0 0 clamp(18px, 1.8vw, 26px); font-size: clamp(11.5px, .95vw, 13.5px); letter-spacing: .36em; color: var(--oro-chiaro); animation: dissolvenza 1s ease .15s backwards; }
.hero h1 + .hero__lead { margin-top: clamp(22px, 2.2vw, 32px); }
.hero__lead { animation-delay: .9s; }
.hero__lead + .hero__lead { animation-delay: 1s; }
.hero__azioni { animation-delay: 1.1s; }
.hero--casa .scroll { position: absolute; z-index: 4; left: max(var(--gutter), calc((100% - var(--larghezza)) / 2)); bottom: 30px; margin: 0; }
.hero__gioiello {
  position: absolute; z-index: 3; right: clamp(24px, 9vw, 170px); bottom: 0;
  height: min(76svh, 720px); aspect-ratio: 379 / 1200; pointer-events: none;
  animation: emerge 1.8s var(--ease-out) .45s backwards;
}
@keyframes emerge { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
.hero__alone {
  position: absolute; left: 50%; top: 44%; width: 360%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 196, 116, .46), rgba(228, 176, 96, .16) 42%, rgba(228, 176, 96, 0) 72%);
  animation: respiro 6s ease-in-out infinite alternate;
}
@keyframes respiro { from { opacity: .75; } to { opacity: 1; } }
.hero__fluttua {
  position: relative; height: 100%;
  animation: galleggia 7s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%); mask-image: linear-gradient(0deg, transparent 0%, #000 22%);
}
@keyframes galleggia { from { transform: translateY(-8px) rotate(-.7deg); } to { transform: translateY(10px) rotate(.7deg); } }
.hero__bottiglia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
@media (max-width: 767px) {
  .hero--casa { align-items: flex-start; padding-bottom: 40svh; }
  .hero .hero__velo {
    background:
      linear-gradient(180deg, rgba(8, 14, 9, .82) 0%, rgba(8, 14, 9, .62) 48%, rgba(8, 14, 9, .15) 70%, rgba(8, 14, 9, 0) 78%),
      linear-gradient(0deg, #0C1B10 0%, rgba(12, 27, 16, .6) 14%, rgba(12, 27, 16, 0) 34%),
      linear-gradient(rgba(70, 45, 10, .14), rgba(70, 45, 10, .14));
  }
  .hero h1 { font-size: clamp(36px, 10vw, 46px); }
  .hero__gioiello { right: 3vw; height: 36svh; }
  .hero--casa .scroll { display: none; }
}

/* il riflesso di luce che passa sul vetro, ogni tanto */
.vetro-luce {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: var(--maschera) center / contain no-repeat; mask: var(--maschera) center / contain no-repeat;
}
/* nell'anteprima del pannello (un'origine opaca) la maschera presa dalla foto non si carica: lì il riflesso non c'è */
.vetro-luce[data-thk] { display: none; -webkit-mask: none; mask: none; }
.vetro-luce::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%;
  background: linear-gradient(100deg, rgba(255, 240, 200, 0), rgba(255, 240, 200, .55) 50%, rgba(255, 240, 200, 0));
  transform: translateX(-160%) skewX(-12deg);
  animation: luce-vetro 8s var(--ease-in-out) 2.4s infinite;
}
@keyframes luce-vetro { 0% { transform: translateX(-160%) skewX(-12deg); } 26%, 100% { transform: translateX(330%) skewX(-12deg); } }

/* ── le foglie d'ulivo che cadono e oscillano ── */
.foglie { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.foglia { position: absolute; top: -14%; left: var(--x); width: calc(64px * var(--s)); animation: cade var(--d) linear var(--r) infinite; }
.foglia > span { display: block; animation: ondeggia calc(var(--d) / 3.2) ease-in-out var(--r) infinite alternate; }
.foglia svg { display: block; width: 100%; height: auto; filter: blur(var(--b)); opacity: .92; }
@keyframes cade { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx), 128vh, 0); } }
@keyframes ondeggia { from { transform: translateX(-26px) rotate(-30deg); } to { transform: translateX(26px) rotate(34deg); } }
.foglie.ferme .foglia, .foglie.ferme .foglia > span { animation-play-state: paused; }
.hero--pagina .foglia { width: calc(54px * var(--s)); }

/* i rami ai bordi ondeggiano col vento, intorno al punto d'attacco */
.ramo-pp { animation: vento 8s ease-in-out infinite alternate; transform-origin: 100% 55%; }
.ramo-pp--invito-sx { transform-origin: 0% 55%; animation-duration: 9.5s; }
.ramo-pp--territorio-basso { animation-duration: 7.2s; }
@keyframes vento { from { rotate: -1.4deg; } to { rotate: 1.5deg; } }
.ramo-pp--ordinare { right: -8vw; top: -9vw; width: 26vw; height: auto; }
@media (max-width: 767px) { .ramo-pp--ordinare { width: 48vw; right: -22vw; top: -14vw; } }

/* i simboli d'oro si disegnano entrando */
.js .disegna img { opacity: 0; transition: opacity 1.1s var(--ease-out); transition-delay: calc(var(--ritardo, 0s) + .25s); }
.js .disegna.in img { opacity: 1; }

/* ── 01 Origine: il testo e la goccia d'olio che sborda ── */
.origine__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.origine__nota { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linea-forte); max-width: 30em; }
.origine__foto { margin: 0 calc(-1 * var(--gutter)) 0 0; overflow: hidden; }
.origine__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.origine .filetto { margin-top: clamp(56px, 7vw, 110px); }
.origine .pilastri { margin-top: clamp(40px, 5vw, 72px); }
@media (max-width: 899px) { .origine__griglia { grid-template-columns: 1fr; } .origine__foto { margin: 0 calc(-1 * var(--gutter)); } .origine__foto img { aspect-ratio: 16 / 11; } }

/* ── la storia: la foto d'epoca in una cornice sottile d'oro ── */
.storia-home__griglia { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.cornice-oro { position: relative; margin: 0; padding: clamp(14px, 1.6vw, 22px); }
.cornice-oro::before, .cornice-oro::after { content: ""; position: absolute; pointer-events: none; transition: opacity 1.2s ease .4s, transform 1.4s var(--ease-out) .4s; }
.cornice-oro::before { inset: 0; border: 1px solid var(--oro); }
.cornice-oro::after { inset: -12px; border: 1px solid var(--oro); opacity: .35; }
.js .cornice-oro.reveal::before, .js .cornice-oro.reveal::after { opacity: 0; transform: scale(.97); }
.js .cornice-oro.reveal.in::before { opacity: 1; transform: none; }
.js .cornice-oro.reveal.in::after { opacity: .35; transform: none; }
.cornice-oro img { width: 100%; height: auto; display: block; }
.storia-home .foto-testo__sotto { margin-top: 14px; }
@media (max-width: 899px) { .storia-home__griglia { grid-template-columns: 1fr; } .storia-home .cornice-oro { order: -1; max-width: 520px; } }

/* ── 02 La collezione: il nastro, il palco di luce, la bottiglia come un gioiello ── */
.gioielli { padding: var(--sfuma) 0 clamp(80px, 9vw, 140px); color: var(--testo); overflow-x: clip; }
.nastro { overflow: hidden; padding: 0 0 clamp(36px, 4vw, 64px); }
.nastro__binario { display: flex; width: max-content; animation: nastro 70s linear infinite; }
.nastro__giro { display: flex; }
.nastro__nome::after { content: "·"; padding: 0 .32em; }
.nastro__binario .nastro__nome {
  white-space: nowrap; line-height: 1.12;
  font-size: clamp(54px, 9vw, 152px); font-weight: 300; font-style: italic; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(207, 160, 85, .55);
}
@keyframes nastro { to { transform: translateX(-50%); } }
.gioielli__griglia { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 90px); align-items: center; width: 100%; }
.gioielli h2 { font-size: clamp(36px, 3.7vw, 60px); }
.gioielli .collezione__intro { margin: 18px 0 18px; font-size: 18px; }
.gioielli .oli { margin-top: 10px; }
.gioielli .olio { min-height: 52px; padding: 10px 0; }
.gioielli .olio__nome { font-size: clamp(22px, 1.9vw, 28px); }
.gioielli .olio__desc { display: none; }
.gioielli__azione { margin-top: 26px; }
.gioiello__scheda { display: none; }
.palco { position: relative; height: min(78vh, 700px); display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; }
.palco__cono, .scheda-olio__foto .palco__cono, .gioiello__palco .palco__cono {
  position: absolute; left: 50%; top: -8%; width: 70%; height: 100%; transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(255, 228, 178, .26), rgba(255, 228, 178, 0) 72%),
    radial-gradient(42% 14% at 50% 86%, rgba(244, 196, 116, .32), rgba(244, 196, 116, 0) 70%),
    linear-gradient(180deg, rgba(244, 206, 140, .13), rgba(244, 206, 140, 0) 80%);
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
}
.palco > .palco__cono { left: 25%; width: 56%; }
.palco__bottiglia { position: relative; grid-column: 1; justify-self: center; height: 70%; aspect-ratio: 379 / 1200; margin-top: -6%; }
.palco__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .5)); }
.palco__img.is-vista { opacity: 1; transform: none; }
.palco__img.esce { opacity: 0; transform: translateY(-16px) rotate(-6deg); transition-duration: .35s; }
.palco__riflesso { position: absolute; left: 0; right: 0; top: 100%; height: 34%; overflow: hidden; opacity: .3; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%); }
.palco__riflesso img { width: 100%; height: auto; transform: scaleY(-1); transition: opacity .5s ease; }
.palco__ombra { position: absolute; left: -45%; right: -45%; top: 96%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); pointer-events: none; }
.palco__info { grid-column: 2; padding-left: clamp(12px, 2vw, 28px); }
.palco__nome { font-size: clamp(40px, 4.4vw, 70px); line-height: 1; font-style: italic; font-weight: 300; color: var(--oro-chiaro); transition: opacity .35s ease, transform .5s var(--ease-out); }
.palco__desc { margin-top: 16px; font-size: clamp(17px, 1.35vw, 20px); color: var(--crema); line-height: 1.5; transition: opacity .35s ease .05s; }
.palco__info.cambia .palco__nome, .palco__info.cambia .palco__desc { opacity: 0; transform: translateY(10px); transition-duration: .2s; }
.intensita--barre { margin-top: 26px; }
.intensita--barre li { display: grid; grid-template-columns: 92px 1fr 18px; align-items: center; gap: 14px; padding: 7px 0; color: var(--crema); font-size: 15px; letter-spacing: .04em; }
.barra { position: relative; height: 2px; background: rgba(254, 254, 253, .12); overflow: hidden; }
.barra i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--oro), var(--oro-chiaro)); transform: scaleX(var(--v, 0)); transform-origin: left; transition: transform .9s var(--ease-out); }
.intensita--barre li:nth-child(2) .barra i { transition-delay: .08s; }
.intensita--barre li:nth-child(3) .barra i { transition-delay: .16s; }
.intensita--barre .intensita__valore { text-align: right; color: var(--oro-chiaro); }
@media (min-width: 1024px) and (min-height: 640px) {
  .gioielli__corsa { height: 250vh; }
  .gioielli__fermo { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: var(--testata-h); }
}
.gioielli__griglia > * { min-width: 0; }
@media (max-width: 1023px) {
  .gioielli__griglia { grid-template-columns: minmax(0, 1fr); }
  .palco, .oli__indicatore { display: none; }
  .gioielli .oli { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 18px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 18px; border-top: 0; scrollbar-width: none; }
  .gioielli .oli::-webkit-scrollbar { display: none; }
  .js .gioiello.reveal { opacity: 1; transform: none; }
  .gioiello { flex: 0 0 min(78vw, 360px); scroll-snap-align: start; border: 1px solid rgba(207, 160, 85, .3) !important; padding: 18px 18px 22px; background: linear-gradient(180deg, rgba(255, 230, 180, .05), rgba(255, 230, 180, 0)); }
  .gioiello .olio { grid-template-columns: 38px 1fr; min-height: 0; padding: 0; }
  .gioiello .olio__freccia { display: none; }
  .gioiello .olio__desc { display: block; margin-top: 6px; }
  .gioiello .olio .olio__nome { color: var(--oro-chiaro); font-style: italic; transform: none; }
  .gioiello__scheda { display: block; margin-top: 14px; }
  .gioiello__palco { position: relative; height: 260px; display: flex; justify-content: center; align-items: flex-end; }
  .gioiello__bottiglia { position: relative; height: 82%; aspect-ratio: 379 / 1200; margin-bottom: 8%; }
  .gioiello__bottiglia img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5)); }
}

/* ── formati: l'immagine grande che sborda, i quattro formati sotto ── */
.formati__griglia { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 100px); align-items: end; }
.formati__foto { margin: 0 calc(-1 * var(--gutter)) 0 0; overflow: hidden; }
.formati__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.formati__testa .testa-sezione__nota { margin-top: 22px; }
.fondo-avorio .formato__foto img { filter: drop-shadow(0 18px 18px rgba(40, 30, 10, .22)); }
@media (max-width: 899px) { .formati__griglia { grid-template-columns: 1fr; } .formati__foto { margin: 0 calc(-1 * var(--gutter)); } }

/* ── esperienze: la valle a tutta larghezza ── */
.panorama--pieno { margin: clamp(32px, 4vw, 56px) 0 0; }
.panorama--pieno img { width: 100%; aspect-ratio: 3.1; object-fit: cover; object-position: 50% 32%; }
@media (max-width: 767px) { .panorama--pieno img { aspect-ratio: 1.5; } }

/* ── la chiusura sulla luce del tramonto ── */
.invito--immagine { min-height: clamp(600px, 86vh, 860px); display: flex; align-items: center; overflow: visible; overflow-x: clip; padding-block: 140px; }
.invito--immagine .invito__sfondo, .invito--immagine .invito__velo { clip-path: inset(0); }
.invito__sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.invito__velo { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #0C1B10 0%, rgba(12, 27, 16, .6) 9%, rgba(12, 27, 16, 0) 26%), linear-gradient(0deg, #0C1B10 0%, rgba(12, 27, 16, 0) 26%),
    linear-gradient(90deg, rgba(8, 14, 9, .86) 0%, rgba(8, 14, 9, .55) 45%, rgba(8, 14, 9, .1) 100%); }
.invito--immagine .invito__griglia { position: relative; z-index: 4; justify-content: start; grid-template-columns: auto auto; }
.invito--immagine .foglie { z-index: 3; }
.invito--immagine .ramo-pp { z-index: 3; }
.invito--immagine .invito__azione p { color: var(--crema); }
@media (max-width: 767px) {
  .invito--immagine { align-items: flex-end; }
  .invito--immagine .invito__griglia { grid-template-columns: 1fr; }
  .invito__sfondo { object-position: 64% 30%; }
  .invito__velo { background: linear-gradient(180deg, rgba(12, 27, 16, .5) 0%, rgba(12, 27, 16, 0) 18%), linear-gradient(0deg, #0C1B10 0%, rgba(12, 27, 16, .88) 34%, rgba(12, 27, 16, .2) 70%); }
}

/* ── le pagine interne con la stessa veste ── */
.hero--pagina h1 { font-size: clamp(42px, 5.4vw, 88px); }
.hero__formati { right: 6vw; bottom: 9%; width: min(40vw, 620px); height: 48%; animation: emerge 1.6s var(--ease-out) .4s backwards; }
.hero__formati .hero__alone { width: 120%; top: 58%; }
.hero__formato { position: absolute; bottom: 0; display: block; }
.hero__formato img { height: 100%; width: auto; filter: drop-shadow(-10px 22px 22px rgba(0, 0, 0, .5)); }
.hero__formato--bib { left: 0; height: 62%; }
.hero__formato--pouch { left: 26%; height: 70%; }
.hero__formato--bott { left: 52%; height: 92%; }
.hero__formato--latt { left: 70%; height: 44%; }
.hero--pagina:has(.hero__formati) .hero__testo { max-width: 600px; }
@media (max-width: 767px) { .hero__formati { right: 4%; width: 92%; height: 30svh; bottom: 3%; } .hero--pagina:has(.hero__formati) { padding-bottom: 36svh; } }
.schede-oli { padding: var(--sfuma) 0 60px; }
.scheda-olio { border-bottom: 1px solid rgba(207, 160, 85, .16); }
.scheda-olio__foto { position: relative; height: clamp(380px, 42vw, 600px); display: flex; justify-content: center; align-items: flex-end; }
.scheda-olio__bottiglia { position: relative; height: 76%; aspect-ratio: 379 / 1200; margin-bottom: 13%; }
.scheda-olio__bottiglia img { position: absolute; inset: 0; width: 100% !important; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); }
.scheda-olio__alone { display: none; }
@media (max-width: 767px) { .scheda-olio__foto { height: 360px; } }
.tappa__foto--epoca { background: transparent; }
.cornice-oro.tappa__foto img { aspect-ratio: auto; }
.contrada__foto--attesa { display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: .95; border: 1px solid var(--oro); background: radial-gradient(closest-side, rgba(207, 160, 85, .12), rgba(207, 160, 85, 0)); }
.contrada__simbolo { width: 34%; height: auto; opacity: .9; }
.contrada__foto--attesa .didascalia { position: static; margin-top: 18px; text-align: center; padding: 0 10px; color: var(--crema); text-shadow: none; }
.fondo-avorio .scheda { background: rgba(255, 255, 255, .5); border-color: var(--linea-forte); }
.fondo-avorio .campo input, .fondo-avorio .campo textarea { background: #FBF8F1; color: #14231A; }
.fondo-avorio .modulo { background: rgba(255, 255, 255, .45); }
.fondo-avorio .tappa::before { box-shadow: 0 0 0 5px #F3EDE1, 0 0 14px rgba(180, 135, 61, .4); }
.fondo-avorio .foto-testo__foto--epoca { background: transparent; }
.fondo-avorio .hero__lead, .fondo-avorio .didascalia { text-shadow: none; }
.fondo-avorio .contatore__valore { color: var(--bianco); }
.fondo-avorio .recapiti li { border-color: var(--linea-forte); }

/* meno movimento: foglie ferme e appena visibili, niente vento, niente luce che passa, titoli in dissolvenza */
@media (prefers-reduced-motion: reduce) {
  .foglia, .foglia > span { animation: none !important; }
  .foglia { top: var(--yf); opacity: .35; }
  .ramo-pp, .hero__fluttua, .hero__alone, .vetro-luce::after { animation: none !important; }
  .vetro-luce { display: none; }
  .hero h1 .w > span { animation-name: dissolvenza; }
  .js .titolo .w > span { transform: none; opacity: 0; transition: opacity .7s ease; }
  .js .titolo.in .w > span { opacity: 1; }
  .js .disegna img { transition: opacity .6s ease; }
  .nastro__binario { animation-duration: 240s; }
  .hero__gioiello, .hero__formati { animation-name: dissolvenza; }
  .palco__img, .palco__img.esce { transform: none; }
}

/* la didascalia del cesto sta sotto la foto, sull'avorio (sulla foto chiara non si leggeva) */
.territorio__foto img { flex: 1 1 auto; min-height: 0; }
.territorio__foto::after { display: none; }
.territorio__foto figcaption {
  position: static; flex: none; padding: 16px clamp(16px, 2vw, 28px) 4px;
  font-size: 12.5px; letter-spacing: .32em; color: var(--oro-chiaro); text-shadow: none;
}
@media (max-width: 767px) { .territorio__foto img { flex: none; } }

/* 3 · le foto che aspettano di svelarsi hanno già il loro posto: un velo caldo, mai un vuoto */
.reveal--foto { background: linear-gradient(135deg, rgba(207, 160, 85, .16), rgba(207, 160, 85, .04) 60%, rgba(207, 160, 85, .1)); }

/* ── 23/10 · le proporzioni vere: mai larghezza e altezza fissate insieme senza object-fit ── */
.pilastro img, .passo img, .contatore__icona, .scheda__icona, .mito__icona img, .contrada__simbolo { object-fit: contain; }
.pilastro img { width: auto; max-width: 100%; }
.hero__formato { width: auto !important; }
.hero__formato img { width: auto !important; height: 100% !important; max-width: none; }
.formato__foto img { object-fit: contain; }
.formati--prodotti .formati__elenco { margin-top: clamp(40px, 5vw, 76px); }
.formati--prodotti .formato__foto { height: clamp(230px, 22vw, 340px); margin-bottom: 26px; }
.formati--prodotti .formato__foto img { height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 26px 22px rgba(60, 45, 15, .22)) drop-shadow(0 6px 6px rgba(60, 45, 15, .12)); }
@media (max-width: 767px) { .formati--prodotti .formato__foto { height: 190px; } }

/* «dalla nostra terra»: una riga di foto del cliente che scorre col dito, mai una sotto l'altra */
.terra { grid-column: 1 / -1; min-width: 0; margin-top: clamp(56px, 6vw, 96px); position: relative; z-index: 2; }
.terra__riga {
  display: flex; gap: clamp(10px, 1.2vw, 16px); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter) 18px; margin: 0;
  scrollbar-width: thin; scrollbar-color: rgba(180, 135, 61, .6) transparent;
}
.terra__foto { flex: none; height: clamp(240px, 29vw, 420px); scroll-snap-align: start; overflow: hidden; }
.terra__foto img { display: block; height: 100%; width: auto; max-width: none; transition: transform .7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .terra__foto:hover img { transform: scale(1.04); } }
@media (max-width: 767px) { .terra__foto { height: 250px; } }
/* le righe del pranzo (/degustazioni) e di oggi (/storia), tornata 4 Step: da telefono più basse, così la foto dopo spunta
   e si capisce che la riga scorre (una foto 3:2 a 250 px era larga 375, tutto lo schermo) */
@media (max-width: 767px) { .terra--piatti .terra__foto, .terra--oggi .terra__foto { height: 200px; } }

/* ── 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 entrano in dissolvenza e si assestano; col mouse si avvicinano appena */
/* l'effetto va sull'immagine, non sul riquadro osservato: il riquadro resta visibile, così l'IntersectionObserver
   lo vede entrare e la foto non resta mai nascosta (16 § 5, «gli effetti non devono nascondere il contenuto») */
.js .reveal.reveal--foto { opacity: 1; transform: none; }
/* le foto entrano con una dissolvenza, già caricate (main.js le precarica e aspetta che siano pronte): prima
   c'era una tendina dall'alto che a volte scopriva un riquadro vuoto, a scatti (Domenico, 30/10/2026) */
.js .reveal.reveal--foto img { opacity: 0; transform: scale(1.03); transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out); transition-delay: var(--ritardo, 0s); }
.js .reveal.reveal--foto.in img { opacity: 1; transform: none; }
/* ogni altra immagine non ancora arrivata (main.js): invisibile, poi in dissolvenza */
.js img.in-arrivo { opacity: 0; }
.js img.arrivata { transition: opacity .8s var(--ease-out); }
.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 { transform: none; transition: opacity .6s ease; }
  .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; }
}

/* ── Hero: i dettagli di lusso sopra il video (23/10/2026) ── */
/* la cornice d'oro sottile, con gli angoli, che si disegna all'apertura */
.hero__cornice {
  position: absolute; z-index: 3; pointer-events: none;
  inset: calc(var(--testata-h) + 14px) clamp(16px, 2.2vw, 34px) clamp(16px, 2.2vw, 34px);
  border: 1px solid rgba(207, 160, 85, .38);
  clip-path: inset(0 100% 100% 0);
  animation: cornice-disegna 1.8s var(--ease-in-out) .5s forwards;
}
@keyframes cornice-disegna { to { clip-path: inset(0 0 0 0); } }
.hero__angolo { position: absolute; width: 26px; height: 26px; border: 1px solid var(--oro); opacity: 0; animation: dissolvenza 1s ease 2s forwards; }
.hero__angolo::after { content: ""; position: absolute; width: 5px; height: 5px; background: var(--oro-chiaro); transform: rotate(45deg); }
.hero__angolo--a { left: -7px; top: -7px; border-right: 0; border-bottom: 0; }
.hero__angolo--b { right: -7px; top: -7px; border-left: 0; border-bottom: 0; }
.hero__angolo--c { left: -7px; bottom: -7px; border-right: 0; border-top: 0; }
.hero__angolo--d { right: -7px; bottom: -7px; border-left: 0; border-top: 0; }
.hero__angolo--a::after { left: 3px; top: 3px; } .hero__angolo--b::after { right: 3px; top: 3px; }
.hero__angolo--c::after { left: 3px; bottom: 3px; } .hero__angolo--d::after { right: 3px; bottom: 3px; }

/* il pulviscolo d'oro che sale nella luce della bottiglia */
.hero__pulviscolo { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero__pulviscolo i {
  position: absolute; left: var(--x); bottom: -10px; width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 160, .95), rgba(228, 176, 96, .35) 55%, rgba(228, 176, 96, 0) 72%);
  opacity: 0; animation: polvere var(--d) linear var(--r) infinite;
}
@keyframes polvere {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: .9; }
  70% { opacity: .55; }
  100% { transform: translate3d(-3vw, -78vh, 0); opacity: 0; }
}

/* il sigillo d'oro: il simbolo fermo, la scritta che gira piano */
.hero__sigillo {
  position: absolute; z-index: 2; left: -50%; top: 11%; width: clamp(128px, 11vw, 172px); aspect-ratio: 1;
  opacity: 0; animation: sigillo-entra 1.4s var(--ease-out) 1.6s forwards;
}
@keyframes sigillo-entra { from { opacity: 0; transform: scale(.92) rotate(-12deg); } to { opacity: 1; transform: none; } }
.hero__sigillo::before {
  content: ""; position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 20, 13, .72), rgba(10, 20, 13, .38) 70%, rgba(10, 20, 13, 0) 100%);
}
.hero__sigillo-giro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: sigillo-gira 48s linear infinite; }
.hero__sigillo-giro circle { fill: none; stroke: var(--oro); stroke-width: 1.2; opacity: .85; }
.hero__sigillo-giro circle.sottile { stroke-width: .6; opacity: .55; }
.hero__sigillo-giro text { fill: var(--oro-chiaro); font-size: 12.6px; letter-spacing: .16em; text-transform: uppercase; font-family: inherit; }
@keyframes sigillo-gira { to { transform: rotate(360deg); } }
.hero__sigillo-logo { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }

/* tablet in verticale: la bottiglia un po' più piccola (non tocca il titolo), il sigillo accanto all'etichetta, sotto i pulsanti */
@media (min-width: 768px) and (max-aspect-ratio: 1/1) {
  .hero__gioiello { height: min(56svh, 720px); }
  .hero__sigillo { left: -75%; top: 46%; }
}
@media (max-width: 767px) {
  .hero__cornice { inset: calc(var(--testata-h) + env(safe-area-inset-top, 0px) + 8px) 10px 10px; }
  .hero__angolo { width: 18px; height: 18px; }
  .hero__sigillo { left: -128%; top: 4%; width: 96px; }
  .hero__pulviscolo i:nth-child(n+8) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cornice { animation: none; clip-path: none; }
  .hero__angolo, .hero__sigillo { animation: dissolvenza .6s ease forwards; }
  .hero__sigillo-giro { animation: none; }
  .hero__pulviscolo { display: none; }
}

/* collaudo 23/10: da telefono i titoli delle hero e i passi delle degustazioni stanno in 3 righe */
@media (max-width: 767px) {
  .hero--casa h1 br { display: none; }
  .hero--casa h1 br + .w { margin-left: .26em; }
  .hero--pagina h1 { font-size: clamp(32px, 8.8vw, 40px); }
  .esperienze .passo img { grid-row: 1; }
  .esperienze .passo h3 { grid-row: 1; align-self: center; }
  .esperienze .passo h3 + p { grid-row: 2; grid-column: 2 / -1; margin-top: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TORNATA «2 STEP» (24/10/2026) · Resources/2 Step/MODIFICHE-DA-FARE.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* voce 12 · meno onde: fra le sezioni il passaggio è dritto, col filetto d'oro sottile. Le colline restano solo nella
   parte finale che piace al cliente: sopra «Porta la Sicilia sulla tua tavola» (fondo-immagine) e sopra il piede. */
.fondo-verde::before, .fondo-avorio::before, .fondo-nero::before { display: none; }
.fondo-verde::after, .fondo-avorio::after, .fondo-nero::after,
.fondo-avorio:nth-of-type(even)::after {
  top: 0; height: 1px; transform: none; opacity: .7;
  -webkit-mask-image: none; mask-image: none;
}

/* voce 13 · le foglie che cadono sono immagini (assets/img/foglie/foglia-01…06.png, rametto-01…02.png): si sostituiscono
   coi file di ChatGPT, stesso nome, senza toccare il codice */
.foglia img { display: block; width: 100%; height: auto; filter: blur(var(--b)); opacity: .92; }

/* voce 15 · le confezioni vere (nere): le bottiglie sono più larghe di quelle del kit, e sui fondi scuri una luce
   sottile ne disegna il bordo */
.palco__bottiglia, .gioiello__bottiglia, .scheda-olio__bottiglia { aspect-ratio: 400 / 990; }
/* nella hero della home la bottiglia vera è più larga: il sigillo d'oro le sta accanto, non dietro */
@media (min-width: 768px) { .hero__sigillo { left: -84%; } }
@media (min-width: 768px) and (max-aspect-ratio: 1/1) { .hero__sigillo { left: -96%; } }
.palco__img, .gioiello__bottiglia img, .scheda-olio__bottiglia img, .hero__bottiglia, .hero__formato img, .storia-fine .invito__prodotto img {
  filter: drop-shadow(0 0 1px rgba(246, 232, 196, .55)) drop-shadow(0 0 18px rgba(228, 176, 96, .22)) drop-shadow(0 20px 24px rgba(0, 0, 0, .5));
}
.fondo-avorio .formato__foto img, .formati--prodotti .formato__foto img { filter: drop-shadow(0 22px 20px rgba(40, 30, 10, .28)) drop-shadow(0 4px 6px rgba(40, 30, 10, .18)); }

/* voce 1 · la storia: fondo scuro caldo, dietro le tappe lo sfondo sfocato che cambia foto; le foto partono in bianco e
   nero e dal 2006 prendono colore */
.storia--scura { background: #0E0D09; --colore: #0E0D09; color: var(--testo); isolation: isolate; }
.storia--scura::after { background: linear-gradient(90deg, rgba(207, 160, 85, 0), rgba(207, 160, 85, .75) 18%, rgba(228, 176, 96, .9) 50%, rgba(207, 160, 85, .75) 82%, rgba(207, 160, 85, 0)); }
.storia__sfondi { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; pointer-events: none; }
.storia__sfondo {
  position: absolute; inset: -48px; width: calc(100% + 96px); height: calc(100% + 96px); max-width: none; object-fit: cover;
  filter: grayscale(1) blur(16px) brightness(.34); opacity: 0; transform: scale(1.04);
  transition: opacity 1.2s var(--ease-out), transform 6s linear;
}
.storia__sfondo--colore { filter: saturate(.85) sepia(.12) blur(16px) brightness(.36); }
.storia__sfondo.is-vista { opacity: 1; transform: scale(1.1); }
.storia__sfondi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 13, 9, .6), rgba(14, 13, 9, .25) 35%, rgba(14, 13, 9, .25) 65%, rgba(14, 13, 9, .75)); }
.storia--scura .wrap { position: relative; z-index: 1; }
/* lo sfondo parte dal bordo della sezione: lo spazio sopra il titolo sta dentro il contenuto */
.sezione.storia--scura { padding-top: 0; }
.storia--scura > .wrap { padding-top: clamp(110px, 12.5vw, 184px); }
@media (max-width: 767px) { .storia--scura > .wrap { padding-top: 104px; } }
.storia--scura .tappa::before { box-shadow: 0 0 0 5px #0E0D09, 0 0 16px rgba(228, 176, 96, .55); }
.storia--scura .tappa__testo p:not(.tappa__anno) { color: var(--crema); }
.storia--scura .tappa__foto img { filter: grayscale(1) contrast(1.04); transition: filter 1.8s var(--ease-out) .2s; }
.storia--scura .tappa--colore .tappa__foto.in img, html:not(.js) .storia--scura .tappa--colore .tappa__foto img { filter: none; }
.storia-fine .invito__prodotto { position: relative; }
.storia-fine .invito__prodotto::before {
  content: ""; position: absolute; left: 50%; top: 52%; width: min(440px, 92%); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(207, 160, 85, .24), rgba(207, 160, 85, 0)); pointer-events: none;
}
.storia-fine .invito__prodotto img { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .storia__sfondo { transition: none; transform: none; }
  .storia__sfondo.is-vista { transform: none; }
  .storia--scura .tappa__foto img { transition: none; }
  .storia--scura .tappa--colore .tappa__foto img { filter: none; }
}

/* voce 2 · la mappa delle contrade: due punti col nome che aprono Google Maps (home e Il territorio) */
.territorio__mappa { position: absolute; right: 2%; top: 50%; width: 46%; max-width: 520px; aspect-ratio: 926 / 1024; transform: translateY(-50%); pointer-events: none; }
.territorio__mappa .territorio__contorni { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; opacity: .75; }
.territorio__mappa--punti { z-index: 2; }
.panorama-contrade .territorio__mappa { right: 0; top: 4%; transform: none; }
.panorama-contrade .territorio__mappa .punto--a { left: 38%; top: 20%; }
.panorama-contrade .territorio__mappa .punto--b { left: 74%; top: 34%; }
.panorama-contrade .territorio__mappa .territorio__contorni { opacity: .45; }
.territorio__mappa .punto { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; pointer-events: auto; cursor: pointer; }
.territorio__mappa .punto--a { left: 55%; top: 38%; right: auto; }
.territorio__mappa .punto--b { left: 85%; top: 78%; right: auto; }
.territorio__mappa .punto::before { content: ""; position: absolute; inset: -17px; border-radius: 50%; }
.punto__nome {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  padding: 6px 0 4px; white-space: nowrap; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; line-height: 1;
  color: var(--oro-chiaro); border-bottom: 1px solid rgba(207, 160, 85, .45); transition: border-color .2s ease, color .2s ease;
}
.fondo-verde .punto__nome, .fondo-nero .punto__nome { text-shadow: 0 1px 10px rgba(5, 14, 8, .8); }
@media (hover: hover) and (pointer: fine) { .punto:hover .punto__nome { border-bottom-color: currentColor; color: var(--bianco); } .fondo-avorio .punto:hover .punto__nome { color: var(--inchiostro); } }
.punto:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 8px; }
@media (max-width: 767px) {
  .territorio__mappa { width: 74%; right: -14%; }
  .territorio__mappa .territorio__contorni { opacity: .5; }
  .territorio__mappa { right: -4%; }
  .panorama-contrade .territorio__mappa { width: 70%; right: -6%; top: 3%; }
  .territorio__mappa .punto--b .punto__nome { left: auto; right: -8px; transform: none; }
  .punto__nome { font-size: 11px; letter-spacing: .2em; bottom: calc(100% + 9px); }
}

/* voce 7 · la richiesta d'ordine ───────────────────────────────────────────────────────────── */
/* il pulsante in alto, col numero delle confezioni (si vede quando la richiesta non è vuota) */
.testata__richiesta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 1px solid rgba(207, 160, 85, .7); border-radius: 50%;
  background: rgba(9, 22, 12, .45); color: var(--bianco); cursor: pointer;
  transition: background-color .25s var(--ease-out), transform .16s var(--ease-out);
}
.testata__richiesta[hidden] { display: none; }
.testata__richiesta:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .testata__richiesta:hover { background: rgba(207, 160, 85, .18); } }
.testata__richiesta svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.testata__conta {
  position: absolute; top: -5px; right: -6px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px;
  background: var(--oro); color: #0C1B10; font-size: 13px; line-height: 21px; text-align: center; font-variant-numeric: lining-nums;
}
.testata__richiesta.is-saluta { animation: richiesta-salta .5s var(--ease-out); }
@keyframes richiesta-salta { 30% { transform: scale(1.18); } 100% { transform: none; } }

/* nelle schede degli oli: il formato, le confezioni, «Aggiungi alla richiesta» */
html:not(.js) .ordina { display: none; }
.js .ordina-senza-js, .js .scheda-olio__riga-formati { display: none; }
@media (min-width: 1024px) { .js .scheda-olio__dati { grid-template-columns: 1fr 1.25fr; } }
.ordina { margin: 4px 0 6px; padding-top: 22px; border-top: 1px solid var(--linea-forte); }
.ordina__formati { margin: 0; padding: 0; border: 0; min-width: 0; }
.ordina__titolo { padding: 0; margin-bottom: 12px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-chiaro); }
.ordina__scelte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ordina__formato {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 64px;
  padding: 10px 12px; border: 1px solid var(--linea-forte); border-radius: 2px; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.ordina__formato input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ordina__nome { display: block; font-size: 15.5px; line-height: 1.25; color: var(--crema); }
.ordina__nome::first-letter { text-transform: uppercase; }
.ordina__prezzo { font-size: 14px; color: var(--oro-chiaro); font-variant-numeric: lining-nums; }
.ordina__prezzo--richiesta { color: var(--grigio); font-style: italic; }
.ordina__formato.is-scelto, .ordina__formato:has(input:checked) { border-color: var(--oro); background: rgba(207, 160, 85, .12); }
.ordina__formato.is-scelto::after, .ordina__formato:has(input:checked)::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--oro-chiaro);
}
.ordina__formato:has(input:focus-visible) { outline: 2px solid var(--oro-chiaro); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ordina__formato:hover { border-color: rgba(207, 160, 85, .7); } }
.ordina__nota { margin-top: 10px; font-size: 16px; font-style: italic; color: var(--crema); }
.ordina__riga { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 20px; }
.ordina__conto { margin-top: 12px; font-size: 17px; color: var(--crema); font-variant-numeric: lining-nums; }
.quante { display: inline-flex; align-items: center; gap: 14px; }
.quante__etichetta { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-chiaro); }
.quante__tasti { display: inline-flex; align-items: stretch; border: 1px solid var(--linea-forte); border-radius: 2px; }
.quante__tasto {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
  border: 0; background: none; color: var(--bianco); font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.quante__tasto:disabled { color: var(--grigio); opacity: .5; cursor: default; }
.quante__tasto:active:not(:disabled) { background: rgba(207, 160, 85, .16); }
.quante__numero {
  width: 54px; height: 48px; padding: 0; border: 0; border-inline: 1px solid var(--linea-forte); border-radius: 0;
  background: rgba(254, 254, 253, .05); color: var(--bianco); font: inherit; font-size: 18px; text-align: center;
  font-variant-numeric: lining-nums; -moz-appearance: textfield; appearance: textfield;
}
.quante__numero::-webkit-inner-spin-button, .quante__numero::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quante__numero:focus-visible, .quante__tasto:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: -2px; }
@media (max-width: 1279px) { .ordina__scelte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ordina__riga { flex-direction: column; align-items: stretch; }
  .quante { justify-content: space-between; }
  .ordina__aggiungi { justify-content: center; }
}

/* l'avviso dopo l'aggiunta */
.avviso-richiesta {
  position: fixed; z-index: 60; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; width: min(600px, calc(100% - 32px));
  padding: 14px 20px; border: 1px solid var(--oro); border-radius: 2px; background: rgba(9, 22, 12, .97);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45); color: var(--crema); font-size: 17px;
}
.avviso-richiesta[hidden] { display: none; }
.avviso-richiesta.is-visto { animation: avviso-sale .35s var(--ease-out); }
@keyframes avviso-sale { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.avviso-richiesta__testo { flex: 1 1 260px; margin: 0; line-height: 1.4; }
.avviso-richiesta__testo span:first-child { color: var(--oro-chiaro); }
.avviso-richiesta__apri {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; border-bottom: 1.5px solid var(--oro);
  background: none; color: var(--bianco); font: inherit; font-size: 17px; cursor: pointer;
}
@media (max-width: 767px) { .avviso-richiesta { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }

/* il riquadro «La tua richiesta»: un pannello a destra da computer, a tutto schermo da telefono */
.richiesta {
  position: fixed; inset: 0 0 0 auto; width: min(580px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0;
  padding: 0; border: 0; border-left: 1px solid var(--oro); background: var(--verde-notte); color: var(--testo);
  font-family: var(--font); overflow-y: auto; overscroll-behavior: contain; color-scheme: dark;
}
.richiesta::backdrop { background: rgba(4, 9, 5, .62); }
.richiesta[open] { animation: richiesta-entra .4s var(--ease-out); }
@keyframes richiesta-entra { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
html.richiesta-aperta { overflow: hidden; }
.richiesta__corpo { padding: calc(18px + env(safe-area-inset-top, 0px)) clamp(18px, 4vw, 40px) calc(32px + env(safe-area-inset-bottom, 0px)); }
.richiesta__testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--linea-forte); }
.richiesta__titolo { font-size: clamp(30px, 3vw, 40px); font-weight: 300; line-height: 1.05; color: var(--bianco); }
.richiesta__titolo:focus { outline: none; }
.richiesta__chiudi { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 1px solid var(--linea-forte); border-radius: 50%; background: none; cursor: pointer; }
.richiesta__chiudi span::before, .richiesta__chiudi span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; margin: -.75px 0 0 -9px; background: var(--bianco); transform: rotate(45deg); }
.richiesta__chiudi span::after { transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .richiesta__chiudi:hover { border-color: var(--oro); } }
.richiesta__vuota { padding: 30px 0 10px; }
.richiesta__vuota[hidden], .richiesta__piena[hidden] { display: none; }
.richiesta__vuota p { margin-bottom: 18px; font-size: 18px; color: var(--crema); }
.richiesta__elenco { margin: 0; padding: 0; list-style: none; }
.richiesta__riga {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "prodotto prodotto" "contatore prezzo" "togli togli";
  gap: 10px 16px; padding: 18px 0; border-bottom: 1px solid var(--linea-forte);
}
.richiesta__prodotto { grid-area: prodotto; margin: 0; }
.richiesta__olio { display: block; font-size: 23px; line-height: 1.15; color: var(--bianco); }
.richiesta__formato { display: block; margin-top: 2px; font-size: 16px; color: var(--testo-tenue); }
.richiesta__formato::first-letter { text-transform: uppercase; }
.richiesta__riga .quante__tasti { grid-area: contatore; justify-self: start; }
.richiesta__prezzo { grid-area: prezzo; align-self: center; font-size: 18px; color: var(--oro-chiaro); font-variant-numeric: lining-nums; }
.richiesta__togli {
  grid-area: togli; justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--testo-tenue); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}
.richiesta__totale { padding: 16px 0 0; font-size: 19px; color: var(--crema); font-variant-numeric: lining-nums; }
.richiesta__totale[hidden] { display: none; }
.richiesta__modulo { display: grid; gap: 18px; margin-top: 26px; }
.richiesta__come { margin: 0; padding: 0; border: 0; min-width: 0; }
.richiesta__come legend { padding: 0; margin-bottom: 6px; font-size: 18px; color: var(--crema); }
.richiesta__scelte { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.richiesta .campo[hidden] { display: none; }
.richiesta .campo__aiuto { margin: -2px 0 2px; font-size: 14px; color: var(--grigio); }
.richiesta .campo.ha-errore textarea { border-color: var(--oro-chiaro); }
.richiesta__anteprima { border: 1px solid var(--linea-forte); border-radius: 2px; }
.richiesta__anteprima summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; cursor: pointer; color: var(--crema); font-size: 16px; }
.richiesta__messaggio { margin: 0; padding: 4px 16px 16px; white-space: pre-line; font-size: 15px; line-height: 1.5; color: var(--testo); }
.richiesta__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 6px; }
@media (max-width: 767px) {
  .richiesta { width: 100%; border-left: 0; }
  .richiesta__azioni .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .richiesta[open], .avviso-richiesta.is-visto, .testata__richiesta.is-saluta { animation: none; }
}

/* ritocchi della ripresa (24/10/2026, controllo in locale prima della pubblicazione) ─────────────────────────────── */
/* voce 15 · la foto delle confezioni vere sul palco (Contatti, «Cosa scrivere»; I nostri oli, «Come ordinare») si vede
   intera: tiene la sua proporzione al centro della colonna, senza tagliare il bag-in-box e la lattina ai lati, e sfuma
   sopra e sotto nel verde della sezione */
.foto-testo__foto--palco { display: flex; align-items: center; background: none; }
.foto-testo__foto--palco img {
  height: auto; aspect-ratio: auto; object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
/* «Bottiglia in vetro da 250 ml»: il nome del formato va a capo in due righe pari, mai «ml» da solo */
.formato h3, .ordina__nome { text-wrap: balance; }
/* voce 2 · home: i punti «Leano» e «Gallinica» non coprono mai le parole. Da 1200 px stanno sul bordo destro della
   mappa, dove il testo non arriva; sotto i 1200 px la mappa sta sotto il testo, a destra */
@media (min-width: 1200px) {
  .territorio__testo > .territorio__mappa .punto--a { left: 80%; top: 22%; }
  .territorio__testo > .territorio__mappa .punto--b { left: 90%; top: 70%; }
  .territorio__testo > .territorio__mappa .punto--b .punto__nome { left: auto; right: -8px; transform: none; }
}
@media (max-width: 1199px) {
  .territorio__testo { display: grid; align-content: center; align-items: start; }
  .territorio__testo > .territorio__corpo { grid-area: 1 / 1; }
  .territorio__testo > .territorio__mappa {
    grid-area: 2 / 1; position: relative; inset: auto; justify-self: end;
    width: 60%; max-width: 300px; margin: 8px -2% 0 0; transform: none;
  }
  .territorio__testo > .territorio__mappa .punto--b .punto__nome { left: auto; right: -8px; transform: none; }
}
@media (max-width: 767px) {
  .territorio__testo > .territorio__mappa { width: 72%; margin: 18px -4% 0 0; }
}
/* riprova del 7-bis (24/10/2026, N9): un nome dell'attività lunghissimo va a capo nel fondo, senza scorrimento laterale */
.piede__nome { overflow-wrap: anywhere; }
/* riprova del 7-bis (24/10/2026, N4): una riga della richiesta senza prezzo, quando altre lo hanno, dice «su richiesta» */
.richiesta__prezzo--richiesta { font-size: 16px; font-style: italic; color: var(--grigio); }
/* voce 1, ricontrollo del 25/10/2026: come nel sito bozza che Pietro ha indicato, la storia parte in bianco e nero già
   dall'apertura (foto e foglie) e prende colore dal 1997, la prima foto a colori */
.hero--storia .hero__poster { filter: grayscale(1) sepia(.1); }
.hero--storia .foglie { filter: grayscale(1); }
/* «I nostri oli» · il catalogo con le varianti (25/10/2026, Pietro: «1 prodotto solo ma diverse varianti»): a sinistra la
   confezione scelta, sul fondo avorio con una luce calda e la sua ombra; a destra quale olio, il formato e le confezioni.
   I riquadri di scelta sono quelli delle schede (.ordina__formato): sull'avorio prendono da soli i colori scuri */
.catalogo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 88px); align-items: start;
  margin-top: clamp(36px, 4.4vw, 64px);
}
.catalogo__palco {
  position: sticky; top: calc(var(--testata-h) + 20px); aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--linea); border-radius: 2px;
  background:
    radial-gradient(60% 52% at 50% 44%, rgba(255, 252, 244, .95), rgba(255, 252, 244, 0) 100%),
    linear-gradient(180deg, #F6F1E6 0%, #EDE4D2 100%);
}
.catalogo__varianti { position: absolute; inset: 0; }
.catalogo__img {
  position: absolute; left: 0; right: 0; bottom: 13%; margin: 0 auto; width: auto; height: 76%; max-width: 78%; object-fit: contain;
  filter: drop-shadow(0 22px 20px rgba(40, 30, 10, .26)) drop-shadow(0 4px 6px rgba(40, 30, 10, .16));
}
/* le misure fra i formati: la lattina più piccola, la bottiglia più alta, il bag-in-box largo */
.catalogo__img[data-formato="lattina_100"] { height: 58%; }
.catalogo__img[data-formato="bottiglia_250"] { height: 80%; }
.catalogo__img[data-formato="pouch_up_1_5"] { height: 72%; }
.catalogo__img[data-formato="bag_in_box_5"] { height: 66%; }
.catalogo__ombra {
  position: absolute; left: 50%; bottom: 10%; width: 46%; height: 5%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 30, 10, .22), rgba(40, 30, 10, 0)); pointer-events: none;
}
.js .catalogo__varianti { display: none; }
.js .catalogo__varianti.is-vista, .js .catalogo:not(.is-pronto) .catalogo__varianti:first-of-type { display: block; }
.js .catalogo__img { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .35s ease, transform .55s var(--ease-out); }
.js .catalogo__img.is-vista, .js .catalogo:not(.is-pronto) .catalogo__varianti:first-of-type .catalogo__img:first-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .catalogo__img { transform: none; transition: opacity .2s ease; } }

.catalogo__scelte { min-width: 0; }
.catalogo__prodotto { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-tenue); }
.catalogo__olio { margin-top: 10px; }
.catalogo__olio[hidden] { display: none; }
.catalogo__nome { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; color: var(--bianco); }
.catalogo__cultivar { margin-top: 8px; font-size: clamp(17px, 1.4vw, 20px); font-style: italic; color: var(--crema); }
.catalogo__note { margin-top: 12px; max-width: 34em; font-size: 17px; color: var(--testo); }
.catalogo__gruppo { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; }
/* il titoletto sopra il filetto, non dentro: la legenda di un fieldset spezzerebbe la riga */
.catalogo__gruppo > legend { float: left; width: 100%; margin: 0 0 14px; padding: 20px 0 0; border-top: 1px solid var(--linea-forte); }
.catalogo__gruppo > legend + * { clear: both; }
.catalogo__scelta { display: flex; flex-wrap: wrap; gap: 10px; }
.catalogo__scelta .ordina__formato { min-height: 52px; padding: 10px 18px; }
.catalogo__scelta--formati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalogo__scelta--formati .ordina__formato { min-height: 64px; padding: 10px 14px; }
.catalogo__scelta--quante .ordina__formato { min-width: 64px; align-items: center; text-align: center; padding: 10px 14px; }
.catalogo__scelta--quante .ordina__nome { font-size: 18px; font-variant-numeric: lining-nums; }
.catalogo__altre { margin-top: 14px; }
.catalogo__altre[hidden] { display: none; }
.catalogo .ordina__conto { margin-top: 18px; }
.catalogo__azioni { margin-top: 24px; }
.fondo-avorio .catalogo .ordina__formato { background: rgba(255, 255, 255, .42); }
.fondo-avorio .catalogo .ordina__formato.is-scelto, .fondo-avorio .catalogo .ordina__formato:has(input:checked) { background: rgba(180, 135, 61, .12); }
.fondo-avorio .catalogo .quante__numero { background: rgba(255, 255, 255, .6); }

/* senza JavaScript: niente scelte, le quattro confezioni del primo olio in fila e il pulsante di WhatsApp */
html:not(.js) .catalogo__scelte, html:not(.js) .scheda-olio__azioni, html:not(.js) .catalogo__ombra { display: none; }
html:not(.js) .catalogo { grid-template-columns: 1fr; }
html:not(.js) .catalogo__palco { position: relative; top: auto; aspect-ratio: auto; display: flex; justify-content: center; padding: 32px 16px; }
html:not(.js) .catalogo__varianti { position: static; display: none; }
html:not(.js) .catalogo__varianti:first-of-type { display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 3vw, 48px); width: 100%; }
html:not(.js) .catalogo__img { position: static; height: auto; max-width: 22%; max-height: 300px; margin: 0; }
html:not(.js) .catalogo .ordina-senza-js { margin-top: 24px; }

/* nelle schede degli oli: «Scegli questo olio» porta al catalogo con l'olio già scelto */
.scheda-olio__azioni { margin-top: 6px; }

@media (max-width: 1023px) {
  .catalogo { grid-template-columns: 1fr; }
  .catalogo__palco { position: relative; top: auto; aspect-ratio: 5 / 4; max-height: 62vh; width: 100%; }
}
@media (max-width: 767px) {
  .catalogo__palco { aspect-ratio: 1 / 1; max-height: 56vh; }
  .catalogo__scelta .ordina__formato { padding: 10px 14px; }
  .catalogo__scelta--oli .ordina__formato { flex: 1 1 auto; }
  .catalogo__scelta--quante .ordina__formato { flex: 1 1 0; min-width: 0; }
  .catalogo__azioni .btn { width: 100%; justify-content: center; }
}
/* audit del 25/10/2026, M2: un olio senza la sua lattina o la sua pouch-up mostra la SUA bottiglia, alta come le bottiglie */
.catalogo__img.catalogo__img--olio { height: 80%; }
/* N10: nel catalogo il tasto al limite resta raggiungibile da tastiera (aria-disabled), con l'aspetto di quello spento */
.quante__tasto[aria-disabled="true"] { color: var(--grigio); opacity: .5; cursor: default; }
.quante__tasto[aria-disabled="true"]:active { background: none; }
/* il catalogo come in un negozio (25/10/2026, Domenico: «questo è un e-commerce, solo che comprano su WhatsApp»): il
   prezzo sotto il nome e «Aggiungi alla richiesta» pieno, largo quanto le scelte. Lo stesso catalogo in /oli e nella home */
.catalogo__prezzo { margin-top: 16px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; color: var(--bianco); font-variant-numeric: lining-nums; }
.catalogo__prezzo.is-su-richiesta { font-size: clamp(19px, 1.5vw, 21px); color: var(--crema); }
.btn--pieno { background: #CFA055; border-color: #CFA055; color: #0C1B10; }
.btn--pieno .freccia { color: inherit; }
@media (hover: hover) and (pointer: fine) { .btn--pieno:hover, .btn--oro.btn--pieno:hover { background: #E4B060; border-color: #E4B060; } }
.btn--pieno:focus-visible { outline: 2px solid #94672A; outline-offset: 3px; }
.catalogo__azioni .btn--pieno { width: 100%; min-height: 58px; justify-content: center; font-size: 19px; }
.formati--prodotti .testa-sezione__nota { text-wrap: balance; }
/* «Scegli il formato» con la foto del formato in piccolo, come le varianti di un negozio (25/10/2026) */
.catalogo__scelta .catalogo__formato { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 8px 14px 8px 10px; }
.catalogo__miniatura { flex: none; width: 36px; height: 48px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(40, 30, 10, .22)); }
.catalogo__formato-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
@media (max-width: 767px) { .catalogo__scelta .catalogo__formato { gap: 8px; padding: 8px 10px 8px 6px; } .catalogo__miniatura { width: 28px; height: 42px; } }
/* collaudo del 25/10/2026 · ❌1: mentre si sceglie nel catalogo la pillola fissa da telefono si toglie */
@media (max-width: 767px) { html.catalogo-in-vista .fisso { opacity: 0; transform: translateY(20px); pointer-events: none; transition-duration: .2s; } }
/* ⚠️2: le frasi dei cinque oli stanno una sopra l'altra: il riquadro è alto come la più lunga e le scelte non saltano */
.catalogo__oli-info { display: grid; }
.catalogo__oli-info > .catalogo__olio { grid-area: 1 / 1; }
.catalogo__oli-info > .catalogo__olio[hidden] { display: block; visibility: hidden; }
/* ⚠️4: da computer «Aggiunto alla richiesta» compare in alto a destra, sotto il pulsante della richiesta, come nei negozi:
   in basso copriva «Aggiungi alla richiesta» */
@media (min-width: 768px) {
  .avviso-richiesta { top: calc(var(--testata-h) + 12px); bottom: auto; left: auto; right: var(--gutter); width: min(460px, calc(100% - 32px)); transform: none; }
  .avviso-richiesta.is-visto { animation-name: avviso-scende; }
  @keyframes avviso-scende { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TORNATA «3 STEP» (27/10/2026) · Resources/3 Step/MODIFICHE-DA-FARE.md
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --raggio: clamp(12px, 1.3vw, 18px); --dissolvenza: clamp(96px, 11vw, 170px); }
@media (max-width: 767px) { :root { --raggio: 12px; --dissolvenza: 76px; } }

/* voce 2 · fra le sezioni niente stacco netto né filetto: il colore della sezione di prima (--da) sfuma nel suo, in
   cima alla sezione, dietro i contenuti. Restano le colline della parte finale (fondo-immagine e piede) */
.fondo-verde, .fondo-avorio, .fondo-nero { isolation: isolate; }
.fondo-verde::after, .fondo-avorio::after, .fondo-nero::after, .fondo-avorio:nth-of-type(even)::after { display: none; }
.fondo-verde::before, .fondo-avorio::before, .fondo-nero::before, .fondo-avorio:nth-of-type(even)::before {
  display: block; top: 0; height: var(--dissolvenza); z-index: -1; transform: none;
  -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(180deg, var(--da, var(--colore)), var(--colore));
  background: linear-gradient(180deg, var(--da, var(--colore)) 0%, color-mix(in srgb, var(--da, var(--colore)) 62%, var(--colore)) 28%,
    color-mix(in srgb, var(--da, var(--colore)) 28%, var(--colore)) 58%, color-mix(in srgb, var(--da, var(--colore)) 8%, var(--colore)) 82%, var(--colore) 100%);
}
.foto-testo, .territorio, .panorama-contrade { border-top: 0; border-bottom: 0; }

/* secondo giro: nella storia gli sfondi della linea del tempo (sticky, z 0) coprivano la dissolvenza: le sta sopra, e
   dal verde della hero diventa trasparente sulla foto sfocata (un colore pieno in fondo faceva un secondo stacco) */
.storia--scura::before {
  z-index: 1; height: calc(var(--dissolvenza) * 1.6);
  background: linear-gradient(180deg, #0C1B10 0%, rgba(12, 27, 16, .82) 18%, rgba(12, 27, 16, .5) 44%, rgba(12, 27, 16, .2) 72%, rgba(12, 27, 16, 0) 100%);
}
.hero--storia .hero__velo::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(0deg, #0C1B10, rgba(12, 27, 16, 0)); }
/* voce 3 · le foto con gli angoli arrotondati; quelle che toccavano il bordo dello schermo ne stanno un poco lontane */
.reveal--foto, .scheda__foto, .terra__foto img, .contrada__foto-due img { border-radius: var(--raggio); overflow: hidden; }
.reveal--foto img { border-radius: inherit; }
.foto-testo__foto, .territorio__foto { margin: 0 clamp(12px, 1.6vw, 24px); }
.foto-testo__foto--doppia { gap: clamp(10px, 1.2vw, 16px); background: none; }
.foto-testo__foto--doppia figure { border-radius: var(--raggio); }
.cornice-oro { overflow: visible; }
.cornice-oro::before { border-radius: var(--raggio); }
.cornice-oro::after { border-radius: calc(var(--raggio) + 10px); }
.cornice-oro img { border-radius: calc(var(--raggio) - 6px); }
.foto-testo__foto--palco, .foto-testo__foto--epoca { overflow: hidden; }
@media (max-width: 767px) { .foto-testo__foto, .territorio__foto { margin: 0 16px; } }

/* voce 27 · il ramo di «Porta la Sicilia sulla tua tavola» passa sopra le colline, intero */
.invito--immagine .ramo-pp { z-index: 6; }

/* voce 28 · niente confezione riflessa sotto le bottiglie */
.palco__riflesso { display: none; }

/* voci 1 e 4 · nella collezione della home le varietà e gli abbinamenti dell'olio scelto */
.varieta__etichetta { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); margin-right: .5em; }
.varieta__tipo { font-style: italic; color: var(--oro-chiaro); }
.varieta__tipo::after { content: " ·"; color: var(--grigio); font-style: normal; }
.palco__extra[hidden] { display: none; }
.palco__varieta { margin-top: 18px; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.5; color: var(--crema); max-width: 30em; transition: opacity .35s ease .05s; }
.palco__piatti-titolo { margin-top: 18px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.palco__piatti { margin-top: 8px; max-width: 30em; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.55; color: var(--testo); transition: opacity .35s ease .05s; }
.palco__piatti p + p { margin-top: 6px; }
.palco__info.cambia .palco__varieta, .palco__info.cambia .palco__piatti { opacity: 0; }
.gioiello__varieta { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--crema); }
.gioiello__piatti { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--testo); }
.gioiello__piatti p + p { margin-top: 4px; }
.scheda-olio__varieta { margin-top: 12px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--crema); }
.catalogo__varieta { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--testo); }

/* voce 5 · il catalogo: prima la vetrina dei formati (2 per riga da telefono, 3 da tablet, 4 da computer), poi la
   scheda del formato, nello stesso posto */
.catalogo { display: block; }
.catalogo__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.catalogo__dettaglio[hidden], .vetrina[hidden] { display: none; }
.vetrina__griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.vetrina__titolo { margin-bottom: 16px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-tenue); }
.vetrina__voce { display: flex; }
.vetrina__scheda {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0 0 18px; text-align: left;
  font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden;
  background: rgba(255, 255, 255, .42);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease;
}
.vetrina__foto {
  position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  background: radial-gradient(60% 52% at 50% 44%, rgba(255, 252, 244, .95), rgba(255, 252, 244, 0) 100%), linear-gradient(180deg, #F6F1E6 0%, #EDE4D2 100%);
}
.vetrina__foto .palco__cono { opacity: .5; }
.vetrina__foto img { position: relative; width: auto; height: 74%; max-width: 74%; margin-bottom: 12%; object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(40, 30, 10, .24)) drop-shadow(0 4px 5px rgba(40, 30, 10, .14)); transition: transform .6s var(--ease-out); }
.vetrina__nome { margin: 16px 16px 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; color: var(--bianco); }
.vetrina__materiali { margin: 6px 16px 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--testo-tenue); }
.vetrina__prezzo { margin: 10px 16px 0; font-size: 19px; color: var(--bianco); font-variant-numeric: lining-nums; }
.vetrina__vai { margin: auto 16px 0; padding-top: 12px; font-size: 15px; color: var(--oro); display: inline-flex; align-items: center; gap: 8px; }
.vetrina__evidenza {
  position: absolute; z-index: 2; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px;
  background: #CFA055; color: #0C1B10; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.vetrina__evidenza--riga { position: static; display: inline-block; vertical-align: middle; margin-left: 10px; font-size: 11px; transform: translateY(-4px); }
@media (hover: hover) and (pointer: fine) {
  .vetrina__scheda:hover { transform: translateY(-4px); border-color: var(--oro); box-shadow: 0 18px 34px rgba(40, 30, 10, .12); }
  .vetrina__scheda:hover .vetrina__foto img { transform: translateY(-4px) scale(1.03); }
}
.vetrina__scheda:active { transform: scale(.98); }
.vetrina__scheda:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 3px; }

@media (max-width: 767px) {
  .vetrina__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vetrina__nome { margin: 12px 12px 0; font-size: 18px; }
  .vetrina__materiali { margin: 4px 12px 0; font-size: 11px; letter-spacing: .12em; }
  .vetrina__prezzo { margin: 8px 12px 0; font-size: 17px; }
  .vetrina__vai { margin: auto 12px 0; font-size: 14px; }
  .vetrina__scheda { padding-bottom: 14px; }
  .vetrina__evidenza { left: 8px; top: 8px; padding: 4px 9px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .vetrina__scheda, .vetrina__foto img { transition: none; } }
.catalogo__palco { border-radius: var(--raggio); }
.catalogo.is-scheda + .filetto + .formati__nota > :first-child { display: none; }

.catalogo__torna { margin-bottom: clamp(18px, 2.4vw, 30px); }
.catalogo__indietro { background: none; border: 0; padding: 8px 0; font: inherit; font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.freccia--indietro { transform: rotate(225deg); }
@media (hover: hover) and (pointer: fine) { .link-oro:hover .freccia--indietro { transform: rotate(225deg) translate(2px, -2px); } }
.catalogo__formato-info[hidden] { display: none; }
.catalogo__formato-nome { margin-top: 10px; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; font-weight: 400; color: var(--bianco); }
.catalogo__formato-nome:focus { outline: none; }
.catalogo__formato-nome:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 4px; }
.catalogo__descrizione { margin-top: 14px; max-width: 36em; font-size: 17px; line-height: 1.6; color: var(--testo); }
.catalogo__descrizione p + p { margin-top: 8px; }
.catalogo__nota { margin-top: 12px; max-width: 34em; font-size: 15px; font-style: italic; color: var(--testo-tenue); }
.catalogo__olio .catalogo__nome { font-size: clamp(26px, 2.4vw, 34px); }
.catalogo__oli-info { margin-top: 16px; }
.prezzi[hidden] { display: none; }
.prezzi { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--linea-forte); }
.prezzi__titolo { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-tenue); }
.prezzi__tabella { width: 100%; margin-top: 12px; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; font-size: 16px; }
.prezzi__tabella th, .prezzi__tabella td { padding: 10px 8px 10px 0; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: baseline; }
.prezzi__tabella thead th { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio); font-weight: 400; }
.prezzi__tabella tbody th { font-weight: 400; color: var(--testo); white-space: nowrap; }
.prezzi__tabella td { color: var(--bianco); }
.prezzi__tabella td:last-child, .prezzi__tabella th:last-child { text-align: right; padding-right: 0; color: var(--testo-tenue); white-space: nowrap; }
.prezzi__cad { color: var(--testo-tenue); font-size: 14px; white-space: nowrap; }
.prezzi__nota { margin-top: 10px; font-size: 15px; font-style: italic; color: var(--testo-tenue); }
/* tornata 4 Step, voce 11: un formato a prezzo fisso non ha la tabella degli sconti, solo il prezzo al litro */
.prezzi__litro { font-size: 15px; color: var(--testo-tenue); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 767px) { .prezzi__tabella { font-size: 15px; } .prezzi__cad { display: block; } }
/* le misure delle confezioni nel palco della scheda: dalla 100 ml alla 5 litri */
.catalogo__img[data-formato="lattina_100"][data-variante="vetro"] { height: 66%; }
.catalogo__img[data-formato="lattina_100"][data-variante="metallo"] { height: 54%; }
.catalogo__img[data-formato="bottiglia_250"] { height: 76%; }
.catalogo__img[data-formato="bottiglia_500"] { height: 84%; }
.catalogo__img[data-formato="latta_1000"] { height: 84%; }
.catalogo__img[data-formato="bag_in_tube_3"] { height: 76%; }
.catalogo__img[data-formato="bag_in_box_3"] { height: 60%; }
.catalogo__img[data-formato="bag_in_box_5"] { height: 66%; }
.catalogo__img.catalogo__img--olio { height: 80%; }
html:not(.js) .vetrina__vai { display: none; }
@media (max-width: 1023px) {
  .catalogo__corpo { grid-template-columns: 1fr; }
  .catalogo__palco { position: relative; top: auto; aspect-ratio: 5 / 4; max-height: 62vh; width: 100%; }
}
@media (max-width: 767px) { .catalogo__palco { aspect-ratio: 1 / 1; max-height: 52vh; } }

/* voce 31 · l'indirizzo in campi */
.indirizzo__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.indirizzo__griglia .campo { margin: 0; }
.indirizzo__griglia .campo--largo { grid-column: 1 / -1; }
.indirizzo__griglia input { width: 100%; }
.campo--indirizzo .campo__errore { margin-top: 10px; }
.indirizzo__griglia input[aria-invalid="true"] { border-color: #C0563B; }
@media (max-width: 420px) { .indirizzo__griglia { grid-template-columns: 1fr; } }

/* voce 22 · il trasporto nel modulo delle degustazioni */
.campo--trasporto[hidden] { display: none; }

/* voce 20 · la frase di chiusura del testo di Pietro */
.citazione__corpo { max-width: 920px; text-align: center; }
.citazione__testo { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.3; font-style: italic; font-weight: 300; color: var(--crema); text-wrap: balance; }
.citazione__firma { margin-top: 22px; font-size: clamp(18px, 1.4vw, 21px); color: var(--oro-chiaro); text-wrap: balance; }

/* voce 25 · «Continua l'esperienza» */
.continua.sezione { padding-block: clamp(84px, 9vw, 132px); }
.continua__corpo { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.continua__testo { max-width: 34em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--crema); text-wrap: balance; }

/* voce 26 · nel menu, la voce verso un altro sito ha la freccia (in alto a destra: esce dal sito) */
.menu__voci .freccia--fuori { width: .55em; height: .55em; margin-left: 4px; vertical-align: .05em; }

/* secondo giro · voce 5: in una riga mai una scheda sola. Da telefono (2 per riga) l'ultima dispari prende la riga
   intera, con la foto a sinistra; da tablet e computer (4 per riga) lo stesso quando resta da sola */
@media (max-width: 767px) {
  .vetrina__voce:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vetrina__voce:last-child:nth-child(odd) .vetrina__scheda { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-content: center; padding-bottom: 0; }
  .vetrina__voce:last-child:nth-child(odd) .vetrina__foto { grid-row: 1 / span 5; height: 100%; }
  .vetrina__voce:last-child:nth-child(odd) .vetrina__vai { margin-top: 12px; margin-bottom: 14px; }
}
@media (min-width: 768px) {
  .vetrina__voce:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .vetrina__voce:last-child:nth-child(4n+1) .vetrina__scheda { display: grid; grid-template-columns: minmax(0, 28%) minmax(0, 1fr); align-content: center; padding-bottom: 0; }
  .vetrina__voce:last-child:nth-child(4n+1) .vetrina__foto { grid-row: 1 / span 5; height: 100%; }
  .vetrina__voce:last-child:nth-child(4n+1) .vetrina__vai { margin-top: 14px; margin-bottom: 18px; }
}
/* secondo giro · voce 26: con «Continua l'esperienza» il menu da computer deve stare su una riga, anche con la
   richiesta aperta: voci un po' più compatte fino a 1599 px e, sotto i 1366 px, il marchio col solo simbolo */
.menu__voci a { white-space: nowrap; }
@media (min-width: 1180px) and (max-width: 1599px) {
  .testata__riga { gap: 18px; }
  .menu__voci { gap: clamp(14px, 1.3vw, 22px); }
  .menu__voci a { font-size: 16px; }
  .testata__contatto { font-size: 15px; padding-inline: 16px; }
}
@media (min-width: 1180px) and (max-width: 1365px) { .marchio__nome { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   TORNATA «4 STEP» (29/10/2026) · Resources/4 Step/MODIFICHE-DA-FARE.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* voce 2 · il carattere senza grazie (la zia, C1·160: «non usare il font Times new Roman o altri che presentano "grazie"
   e risultano scomodi da leggere per dislessici»): Lexend (OFL), disegnato per una lettura più facile, servito dal sito.
   Lexend non ha il corsivo: niente corsivo finto, le parole in evidenza dei titoli restano dritte, in oro */
@font-face {
  font-family: "Lexend";
  src: url("/assets/fonts/lexend-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  src: url("/assets/fonts/lexend-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root { --font: "Lexend", "Helvetica Neue", Arial, system-ui, sans-serif; }
body { font-weight: 300; font-synthesis: none; font-size: 17px; line-height: 1.65; }
body *, body *::before, body *::after { font-style: normal !important; }
h1, h2, h3 { letter-spacing: -.02em; }
h2 { font-size: clamp(34px, 4.2vw, 66px); line-height: 1.08; letter-spacing: -.035em; }
.titolo-grande { font-size: clamp(40px, 5.6vw, 88px); line-height: 1.04; letter-spacing: -.04em; }
.hero h1 { font-size: clamp(38px, 4.2vw, 70px); line-height: 1.06; letter-spacing: -.035em; }
h1 em, h2 em { font-weight: 400; color: var(--oro-chiaro); }
strong, b { font-weight: 500; }
.nastro__nome { font-weight: 200; letter-spacing: -.03em; }
.palco__nome { font-weight: 300; letter-spacing: -.02em; }
.citazione__testo { font-weight: 300; letter-spacing: -.01em; }
@media (max-width: 767px) { body { font-size: 16px; } }

/* voce 6 · fra le sezioni una sfumatura più leggera (Pietro: «Le sfocature tra le sezioni forse risultano un po' pesanti…
   Abbiamo altre alternative?»): corta, circa un quarto di prima, e coi colori mescolati senza passare dal grigio */
:root { --dissolvenza: clamp(28px, 2.6vw, 42px); }
@media (max-width: 767px) { :root { --dissolvenza: 22px; } }
.fondo-verde::before, .fondo-avorio::before, .fondo-nero::before, .fondo-avorio:nth-of-type(even)::before {
  background: linear-gradient(180deg, var(--da, var(--colore)), var(--colore));
  background: linear-gradient(to bottom in oklab, var(--da, var(--colore)), var(--colore));
}
.storia--scura::before { height: calc(var(--dissolvenza) * 2); }

/* voce 4 · le stelle di Google nell'apertura della home: piccole, sotto i pulsanti, aprono la scheda Google */
.stelle { display: inline-flex; gap: 3px; vertical-align: -2px; }
.stelle i { display: block; width: 14px; height: 14px; background: var(--oro-chiaro);
  clip-path: polygon(50% 0%, 61.8% 35%, 98% 35.4%, 69% 57.4%, 79.4% 91.6%, 50% 71%, 20.6% 91.6%, 31% 57.4%, 2% 35.4%, 38.2% 35%); }
.stelle i.vuota { background: rgba(244, 241, 232, .26); }
.fondo-avorio .stelle i.vuota { background: rgba(20, 35, 26, .18); }
.hero__stelle { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(18px, 2vw, 26px); font-size: 15px; color: var(--crema); animation: dissolvenza 1s ease 1.1s backwards; }
.hero__stelle strong { color: var(--bianco); }
.hero__stelle-testo { border-bottom: 1px solid transparent; transition: border-color .25s ease; }
@media (hover: hover) and (pointer: fine) { .hero__stelle:hover .hero__stelle-testo { border-bottom-color: currentColor; } }
.hero__stelle:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 6px; }
@media (max-width: 767px) { .hero__stelle { font-size: 14px; gap: 8px; } .hero__stelle .stelle i { width: 12px; height: 12px; } }

/* voce 5 · «Cosa dicono di noi»: le recensioni in un nastro che scorre (main.js lo raddoppia); fermo fuori dallo schermo */
.recensioni.sezione { overflow: hidden; }
.recensioni__testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
.recensioni__voto { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; color: var(--crema); }
.stelle--grandi i { width: 20px; height: 20px; }
.recensioni__nastro { display: flex; gap: 20px; margin-top: clamp(36px, 4.4vw, 60px); padding: 6px var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.recensioni__nastro::-webkit-scrollbar { display: none; }
.recensioni__binario { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-shrink: 0; }
.recensioni__nastro.scorre { overflow: hidden; scroll-snap-type: none; padding-inline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.recensioni__nastro.scorre .recensioni__binario { animation: nastro-recensioni var(--durata, 60s) linear infinite; }
.recensioni__nastro.ferme .recensioni__binario { animation-play-state: paused; }
@keyframes nastro-recensioni { to { transform: translateX(calc(-100% - 20px)); } }
.recensione { flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; width: clamp(280px, 30vw, 410px); padding: 26px 26px 22px; scroll-snap-align: start;
  border: 1px solid var(--linea-forte); border-radius: var(--raggio); background: rgba(244, 241, 232, .04); }
.recensione__testo { margin: 0; }
.recensione__testo p { font-size: 17px; line-height: 1.6; color: var(--crema); }
.recensione__chi { margin-top: auto; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-chiaro); }
.recensioni__fonte { margin-top: clamp(24px, 3vw, 36px); font-size: 15px; }
@media (max-width: 767px) { .recensione { width: 80vw; padding: 22px 20px 18px; } .recensione__testo p { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .recensioni__nastro.scorre .recensioni__binario { animation: none; } }

/* voci 24-25 · il percorso delle degustazioni: i momenti a destra e a sinistra di un sentiero d'oro che serpeggia (main.js lo
   disegna sui punti e lo traccia mentre si scorre); da telefono il sentiero scende a sinistra e i momenti uno sotto l'altro */
.percorso__corpo { position: relative; margin-top: clamp(48px, 6vw, 96px); }
.percorso__corpo::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--oro); opacity: .35; }
.percorso__corpo.ha-sentiero::before { display: none; }
.percorso__sentiero { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.percorso__traccia { fill: none; stroke: var(--oro); stroke-opacity: .28; stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.percorso__linea { fill: none; stroke: var(--oro); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.percorso__momenti { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(72px, 9vw, 132px); }
.momento { display: grid; grid-template-columns: minmax(0, 1fr) clamp(84px, 9vw, 132px) minmax(0, 1fr); align-items: center; }
.momento__foto-gruppo { grid-column: 1; grid-row: 1; }
.momento__punto { grid-column: 2; grid-row: 1; justify-self: center; }
.momento__testo { grid-column: 3; grid-row: 1; max-width: 34em; }
.momento--specchio .momento__foto-gruppo { grid-column: 3; }
.momento--specchio .momento__testo { grid-column: 1; justify-self: end; }
.momento__foto { margin: 0; }
.momento__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio); }
.momento__foto-gruppo--due { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(10px, 1.2vw, 16px); align-items: end; }
.momento__foto-gruppo--due .momento__foto:nth-child(2) { margin-bottom: clamp(-48px, -3vw, -20px); }
.momento__foto-gruppo--due .momento__foto:nth-child(2) img { aspect-ratio: 3 / 4; }
.momento__punto { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--colore, #F3EDE1); border: 1px solid var(--oro); box-shadow: 0 0 0 10px var(--colore, #F3EDE1);
  font-size: 14px; letter-spacing: .08em; color: var(--oro); font-variant-numeric: lining-nums;
  transition: background-color .5s var(--ease-out), color .5s var(--ease-out), transform .5s var(--ease-out); }
.momento__punto.acceso { background: var(--oro); color: #F3EDE1; transform: scale(1.06); }
.momento__titolo { font-size: clamp(25px, 2.3vw, 34px); font-weight: 300; line-height: 1.15; color: var(--bianco); }
.momento__testo p { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--testo); }
@media (max-width: 767px) {
  .percorso__corpo::before { left: 27px; }
  .percorso__momenti { gap: 56px; }
  .momento, .momento--specchio { grid-template-columns: 54px minmax(0, 1fr); align-items: start; column-gap: 14px; }
  .momento__punto, .momento--specchio .momento__punto { grid-column: 1; grid-row: 1; width: 44px; height: 44px; font-size: 12px; box-shadow: 0 0 0 6px var(--colore, #F3EDE1); }
  .momento__foto-gruppo, .momento--specchio .momento__foto-gruppo { grid-column: 2; grid-row: 1; }
  .momento__testo, .momento--specchio .momento__testo { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 18px; }
  .momento__foto-gruppo--due .momento__foto:nth-child(2) { margin-bottom: 0; }
  .momento__testo p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .percorso__linea, .momento__punto { transition: none; } }

/* voce 27 · le scontistiche per aziende e gruppi, sotto «Prezzi e date» */
.prezzi-date__sconti { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--oro); color: var(--bianco); }

/* voce 8 · fruttato, amaro e piccante: le gocce al posto dei pallini, più grandi */
.punti { gap: 9px; align-items: center; padding-right: 3px; }
.punti > span { width: 12px; height: 12px; margin: 3px 2px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); }

/* voci 15-17 · la vetrina in linee: in metallo, gli altri formati, in vetro */
.vetrina__linea + .vetrina__linea { margin-top: clamp(40px, 5vw, 68px); }
.vetrina__testa { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 28px;
  margin-bottom: clamp(14px, 1.6vw, 20px); padding-bottom: 12px; border-bottom: 1px solid var(--linea-forte); }
.vetrina__linea-titolo { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.15; color: var(--bianco); }
.vetrina__linea-testo { max-width: 38em; font-size: 16px; line-height: 1.55; color: var(--testo-tenue); }
.vetrina__sconto { margin: 4px 16px 0; font-size: 14px; line-height: 1.4; color: var(--testo-tenue); }
@media (max-width: 767px) { .vetrina__sconto { margin: 4px 12px 0; font-size: 13px; } }
/* voce 16 · ogni confezione in proporzione alla sua misura, tutte appoggiate sulla stessa linea (Pietro, con la foto
   delle lattine: «proporzioniamole in modo che una sia più grande dell'altra») */
.vetrina__scheda[data-variante="metallo"][data-apri-formato="lattina_100"] .vetrina__foto img { height: 36%; }
.vetrina__scheda[data-variante="metallo"][data-apri-formato="bottiglia_250"] .vetrina__foto img { height: 49%; }
.vetrina__scheda[data-variante="metallo"][data-apri-formato="bottiglia_500"] .vetrina__foto img { height: 64%; }
.vetrina__scheda[data-apri-formato="latta_1000"] .vetrina__foto img { height: 82%; }
.vetrina__scheda[data-variante=""][data-apri-formato="lattina_100"] .vetrina__foto img { height: 44%; }
.vetrina__scheda[data-variante=""][data-apri-formato="bottiglia_250"] .vetrina__foto img { height: 60%; }
.vetrina__scheda[data-variante=""][data-apri-formato="bottiglia_500"] .vetrina__foto img { height: 82%; }
.vetrina__scheda[data-apri-formato="pouch_up_1_5"] .vetrina__foto img { height: 74%; }
.vetrina__scheda[data-apri-formato="bag_in_tube_3"] .vetrina__foto img { height: 74%; }
.vetrina__scheda[data-apri-formato="bag_in_box_3"] .vetrina__foto img { height: 64%; }
.vetrina__scheda[data-apri-formato="bag_in_box_5"] .vetrina__foto img { height: 78%; }
.vetrina__foto img { max-width: 86%; }

/* voci 20-21 · la Biomassa, una scheda larga: da computer accanto alle Carrube, su due colonne (3 + 2, come prima;
   su tutta la riga lasciava le Carrube da sole: secondo giro del 29/10); da tablet e telefono su tutta la riga sotto.
   La foto accanto ai tre paragrafi solo dove la scheda è larga abbastanza */
.scheda--larga { grid-column: 1 / -1; }
.scheda--larga .scheda__corpo p { max-width: 64em; }
@media (min-width: 1024px) { .scheda--larga { grid-column: span 2; } }
@media (min-width: 900px) and (max-width: 1023px), (min-width: 1200px) {
  .scheda--larga.scheda--foto { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
  .scheda--larga.scheda--foto .scheda__foto { margin: 0; }
}

/* voce 2 · da telefono i pulsanti un poco più stretti: Lexend è più largo di Newsreader e «Richiedi informazioni su
   WhatsApp» (/territorio) andava su due righe (secondo giro del 29/10) */
@media (max-width: 420px) { .btn { gap: 10px; padding-inline: 18px; font-size: 17px; } }

/* tornata 6 Step, voce 18 · con la Biomassa in una sezione a sé qui restano quattro schede: mai una sola sulla seconda riga */
.frutti .schede { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
@media (min-width: 1280px) { .frutti .schede { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .frutti .schede { grid-template-columns: 1fr; } }

/* voci 18-19 · i video di Leano e di Gallinica sotto la loro descrizione (/territorio): come le foto della sezione, a
   tutta larghezza della colonna e con gli angoli arrotondati; il fondo scuro finché non arriva l'anteprima */
.contrada__video { position: relative; margin: 24px 0 0; aspect-ratio: 16 / 9; overflow: hidden; background: #0C1B10; }
.contrada__video video { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════════════════
   TORNATA «6 STEP» (31/10/2026) · Resources/6 Step/MODIFICHE-DA-FARE.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* voce 1 · fra le sezioni né taglio né sfumatura (Pietro: «per queste trasparenze abbiamo una 4° alternativa, magari uno
   scorrimento diverso»): ogni sezione sale sopra quella di prima come un foglio, con gli angoli in alto arrotondati e
   un'ombra morbida sul bordo; entrando nello schermo si alza di poco. Restano le colline della parte finale (invito e
   piede), che a Pietro piacciono */
:root { --foglio: clamp(26px, 3vw, 44px); --foglio-su: 22px; }
@media (max-width: 767px) { :root { --foglio: 22px; --foglio-su: 14px; } }
.fondo-verde::before, .fondo-avorio::before, .fondo-nero::before, .fondo-avorio:nth-of-type(even)::before,
.storia--scura::before { display: none; }
main > section.fondo-verde:not(:first-child), main > section.fondo-avorio:not(:first-child), main > section.fondo-nero:not(:first-child) {
  margin-top: calc(-1 * var(--foglio)); border-radius: var(--foglio) var(--foglio) 0 0;
  box-shadow: 0 -16px 34px -18px rgba(0, 0, 0, .42), 0 -1px 0 rgba(207, 160, 85, .22);
}
main > section.fondo-avorio:not(:first-child) { box-shadow: 0 -16px 34px -20px rgba(0, 0, 0, .5), 0 -1px 0 rgba(255, 255, 255, .5); }
/* il foglio sta sopra la sezione di prima (anche sopra la hero, che ha z 2): fra fogli decide l'ordine della pagina */
main > section.fondo-verde:not(:first-child), main > section.fondo-avorio:not(:first-child), main > section.fondo-nero:not(:first-child) { z-index: 3; }
main > section.storia--scura { overflow: clip; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section.fondo-verde:not(:first-child):not(.storia), main > section.fondo-avorio:not(:first-child):not(.storia),
    main > section.fondo-nero:not(:first-child):not(.storia) {
      animation: foglio-sale linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes foglio-sale { from { transform: translateY(var(--foglio-su)); } to { transform: none; } }

/* voce 2 · «Prova il nostro olio» è il collegamento al catalogo, e il titolo sta al centro accanto ai recapiti */
.contatti-home .due-colonne { align-items: center; }
.contatti-home .invito__lead { margin-top: 14px; }
.contatti-home__prova { font-size: clamp(18px, 1.5vw, 21px); }

/* voce 4 · «Svuota carrello»: discreto, sotto il totale */
.richiesta__svuota { margin: 10px 0 0; text-align: right; }
.richiesta__svuota-tasto { background: none; border: 0; padding: 8px 0; min-height: 44px; font: inherit; font-size: 15px; color: var(--grigio);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(207, 160, 85, .5); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .richiesta__svuota-tasto:hover { color: var(--oro-chiaro); } }
.richiesta__svuota-tasto:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 4px; }

/* voce 5 · «Aggiungi al carrello» nella vetrina: sotto «Scopri il formato», dell'oro del bollino, piccolo; apre sotto la
   confezione la scelta dell'olio e delle confezioni */
.vetrina__voce { position: relative; flex-direction: column; }
.vetrina__scheda { padding-bottom: 66px; flex: 1; }
.vetrina__aggiungi {
  position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 7px 14px; border: 0; border-radius: 999px; background: #CFA055; color: #0C1B10; font: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; cursor: pointer; transition: transform .3s var(--ease-out), background-color .25s ease;
}
.vetrina__aggiungi::before { content: "+"; font-size: 16px; line-height: 1; }
.vetrina__aggiungi[aria-expanded="true"] { background: #E4B060; }
@media (hover: hover) and (pointer: fine) { .vetrina__aggiungi:hover { background: #E4B060; transform: translateY(-1px); } }
.vetrina__aggiungi:active { transform: scale(.97); }
.vetrina__aggiungi:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 3px; }
html:not(.js) .vetrina__aggiungi { display: none; }
html:not(.js) .vetrina__scheda { padding-bottom: 18px; }
/* la scelta si apre sopra la pagina, appena sotto la confezione: la riga della vetrina non si allunga */
.vetrina__scelta { position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 8px); padding: 16px; border: 1px solid var(--linea-forte);
  border-radius: var(--raggio); background: #FBF8F1; box-shadow: 0 22px 44px rgba(40, 30, 10, .22); display: grid; gap: 12px;
  animation: scelta-entra .35s var(--ease-out) both; }
.vetrina__voce:has(.vetrina__scelta) { z-index: 7; }
/* la scelta esce dal fondo della sezione: mentre è aperta la sezione sta sopra il foglio di dopo, che ha il suo stesso z-index */
main > section.formati.fondo-avorio:not(:first-child):has(.vetrina__scelta) { z-index: 8; }
@keyframes scelta-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vetrina__scelta-titolo { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-tenue); }
.vetrina__scelta-oli { display: flex; flex-wrap: wrap; gap: 8px; }
.vetrina__scelta-oli .ordina__formato { min-height: 40px; }
.vetrina__scelta-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vetrina__scelta-ok { width: 100%; justify-content: center; }
@media (max-width: 767px) {
  .vetrina__scheda { padding-bottom: 54px; }
  .vetrina__aggiungi { left: 10px; right: 10px; bottom: 10px; justify-content: center; min-height: 34px; padding: 6px 8px; gap: 5px;
    font-size: 11.5px; letter-spacing: 0; white-space: nowrap; }
  .vetrina__aggiungi::before { font-size: 14px; }
  .vetrina__scelta { padding: 12px; }
  /* la scelta prende le due colonne della riga: nella carta stretta contatore e pulsante uscivano dal riquadro */
  .vetrina__voce:nth-child(odd):not(:last-child) .vetrina__scelta { right: calc(-100% - 12px); }
  .vetrina__voce:nth-child(even) .vetrina__scelta { left: calc(-100% - 12px); }
  /* l'ultima scheda dispari, larga (foto a sinistra): il pulsante e il bollino nella colonna del testo e sulla foto */
  .vetrina__voce:last-child:nth-child(odd) .vetrina__scheda { padding-bottom: 54px; }
  .vetrina__voce:last-child:nth-child(odd) .vetrina__aggiungi { left: calc(46% + 12px); right: 12px; }
  .vetrina__voce:last-child:nth-child(odd) .vetrina__evidenza:not(.vetrina__evidenza--riga) { right: auto; left: calc(46% - 64px); }
  /* la confezione un poco più piccola: il bollino non copre la scritta RoccaforteBio */
  .vetrina__voce:last-child:nth-child(odd) .vetrina__scheda[data-apri-formato="bag_in_box_5"] .vetrina__foto img { height: 66%; }
}
@media (min-width: 768px) {
  .vetrina__voce:last-child:nth-child(4n+1) .vetrina__scheda { padding-bottom: 66px; }
  .vetrina__voce:last-child:nth-child(4n+1) .vetrina__aggiungi { left: calc(28% + 16px); }
  .vetrina__voce:last-child:nth-child(4n+1) .vetrina__evidenza:not(.vetrina__evidenza--riga) { right: auto; left: calc(28% - 90px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* da tablet le carte sono strette: la scelta ha la sua larghezza, e sulle ultime due colonne si apre verso sinistra */
  .vetrina__scelta { right: auto; width: 300px; }
  .vetrina__voce:nth-child(4n) .vetrina__scelta, .vetrina__voce:nth-child(4n-1) .vetrina__scelta { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .vetrina__scelta { animation: none; } }

/* voce 6 · «Più venduto»: un bollino tondo d'oro sull'angolo in alto a destra della foto, uguale da telefono e da
   computer (prima una pillola in alto a sinistra, che sembrava fuori posto) */
.vetrina__evidenza:not(.vetrina__evidenza--riga) {
  left: auto; right: 12px; top: 12px; width: 78px; height: 78px; padding: 10px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; font-size: 11px; line-height: 1.15; letter-spacing: .08em;
  transform: rotate(-8deg); box-shadow: 0 8px 18px rgba(40, 30, 10, .22), inset 0 0 0 2px rgba(12, 27, 16, .18), inset 0 0 0 5px #CFA055, inset 0 0 0 6px rgba(12, 27, 16, .25);
}
@media (max-width: 767px) { .vetrina__evidenza:not(.vetrina__evidenza--riga) { right: 8px; top: 8px; left: auto; width: 60px; height: 60px; padding: 6px; font-size: 9px; letter-spacing: .05em; } }

/* voce 8 · i prezzi in grassetto */
.vetrina__prezzo, .catalogo__prezzo, .ordina__conto, .prezzi__tabella td, .prezzi__litro, .richiesta__prezzo, .richiesta__totale,
.scheda-olio__formati .prezzo { font-weight: 600; }
.catalogo__prezzo.is-su-richiesta, .richiesta__prezzo--richiesta { font-weight: 400; }

/* voce 10 · la frase degli altri formati accanto al titolo: come quelle delle linee */

/* voce 11 · «Tutti i formati» si vede: un pulsante chiaro, in cima alla scheda */
.catalogo__indietro { padding: 10px 20px 10px 16px; border: 1px solid var(--oro); border-radius: 999px; background: rgba(207, 160, 85, .1);
  color: var(--bianco); font-size: 16px; font-weight: 500; transition: background-color .25s ease; }
@media (hover: hover) and (pointer: fine) { .catalogo__indietro:hover { background: rgba(207, 160, 85, .22); } }
.catalogo__indietro:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 3px; }

/* voce 17 · /contatti, «Il contatto diretto»: la foto delle confezioni senza il rettangolo del suo fondo (si scioglie nel
   verde) e, da computer, più grande */
.foto-testo--specchio .foto-testo__foto--palco img {
  -webkit-mask-image: radial-gradient(ellipse 58% 56% at 50% 52%, #000 58%, rgba(0, 0, 0, .55) 76%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 56% at 50% 52%, #000 58%, rgba(0, 0, 0, .55) 76%, transparent 100%);
}
@media (min-width: 900px) {
  .foto-testo--specchio .foto-testo__foto--palco { overflow: visible; }
  .foto-testo--specchio .foto-testo__foto--palco img { width: 128%; max-width: none; margin-inline: -14%; }
}

/* voce 18 · la Biomassa, una sezione sua: la foto grande accanto ai tre paragrafi, l'ultima frase in evidenza */
.biomassa .foto-testo__corpo p { max-width: 36em; }
.biomassa .biomassa__chiusa { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(207, 160, 85, .35);
  font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; color: var(--oro-chiaro); }
.biomassa .titolo em { color: var(--oro-chiaro); font-style: normal; }

/* voce 19 · /degustazioni, «Non vogliamo…»: più piccola e più fine, su una colonna stretta, con un filetto d'oro sopra */
.citazione.sezione { padding-block: clamp(76px, 8vw, 118px); }
.citazione__corpo { max-width: 680px; }
.citazione__corpo::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto 24px; background: var(--oro); }
.citazione__testo { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.65; font-style: normal; font-weight: 300; letter-spacing: 0; }
.citazione__firma { margin-top: 16px; font-size: clamp(15px, 1.1vw, 16px); letter-spacing: .04em; }

/* voce 20 · le foto del pranzo: da computer una griglia che si vede tutta, senza scorrere; da telefono la riga che scorre */
@media (min-width: 900px) {
  .terra--piatti .terra__riga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0;
    max-width: 1200px; margin-inline: auto; }
  .terra--piatti .terra__foto { height: auto; aspect-ratio: 4 / 3; }
  .terra--piatti .terra__foto img { width: 100%; height: 100%; object-fit: cover; }
}

/* voce 21 · la linea in vetro in proporzione: 100 e 250 ml alte uguali (la 100 più sottile), 250 e 500 ml larghe uguali
   (la 500 più alta). Le foto delle bottiglie sono tagliate al vetro: 250 ml larga 0,412 dell'altezza, 500 ml 0,249 */
.vetrina__scheda[data-variante=""][data-apri-formato="lattina_100"] .vetrina__foto img,
.vetrina__scheda[data-variante=""][data-apri-formato="bottiglia_250"] .vetrina__foto img { height: 50%; }
.vetrina__scheda[data-variante=""][data-apri-formato="bottiglia_500"] .vetrina__foto img { height: 82%; }

/* voci 26, 29 e 30 · i video al posto delle foto: muti, in loop, senza controlli; i due dell'olio sono verticali e la
   cornice tiene il getto d'olio e le bocchette (non il centro esatto) */
.origine__foto--video { aspect-ratio: 4 / 5; background: #0C1B10; }
.origine__foto--video video, .foto-testo__foto--video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.foto-testo__foto--video { background: #0C1B10; min-height: 100%; }
.foto-testo__foto--video video { object-position: 50% 38%; aspect-ratio: 1.3; }
@media (max-width: 899px) { .origine__foto--video { aspect-ratio: 1 / 1; } }
@media (max-width: 767px) { .foto-testo__foto--video video { aspect-ratio: 4 / 5; max-height: 70svh; } }

/* voce 9 · la tendina delle lingue, nello stile della testata; da telefono sta accanto al menu */
details.lingue { --thk-lingue-bordo: rgba(255, 255, 255, .26); --thk-lingue-raggio: 2px; --thk-lingue-raggio-elenco: var(--raggio);
  --thk-lingue-fondo: #0C1B10; --thk-lingue-testo: #F3EDE1; --thk-lingue-evidenza: rgba(207, 160, 85, .16); --thk-lingue-fuoco: var(--oro-chiaro);
  font-size: 13px; }
details.lingue > ul { border: 1px solid rgba(207, 160, 85, .32); }
details.lingue > ul a[aria-current="true"] { color: var(--oro-chiaro); }
.legale__prevale { padding: 12px 16px; border-left: 2px solid var(--oro); font-size: 15px; color: var(--testo-tenue); }
.recensione__nota { margin-top: 4px; font-size: 12px; color: var(--testo-tenue); }
/* col carrello pieno la tendina, il carrello e il menu non stanno accanto al nome: da telefono resta il simbolo */
@media (max-width: 430px) { .testata:has(.testata__richiesta:not([hidden])) .marchio__nome { display: none; } }

/* voce 9 · nelle altre lingue le voci del menu sono più lunghe, e col carrello pieno in testata c'è un pulsante in più:
   da computer la testata stringe e sta su una riga (in tedesco a 1180 px servivano 120 px, a 1920 px 170): il marchio
   col solo simbolo, come già sotto i 1366 px, e fino a 1439 px voci, spazi e pulsante più compatti */
@media (min-width: 1180px) {
  html:not([lang="it"]) .marchio__nome, .testata:has(.testata__richiesta:not([hidden])) .marchio__nome { display: none; }
}
@media (min-width: 1600px) {
  html:not([lang="it"]) .menu__voci, .testata:has(.testata__richiesta:not([hidden])) .menu__voci { gap: clamp(18px, 1.5vw, 32px); }
  html:not([lang="it"]) .menu__voci a { font-size: 17px; }
}
@media (min-width: 1180px) and (max-width: 1439px) {
  html:not([lang="it"]) .testata__riga, .testata:has(.testata__richiesta:not([hidden])) .testata__riga {
    gap: 12px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
  html:not([lang="it"]) .menu__voci, .testata:has(.testata__richiesta:not([hidden])) .menu__voci { gap: 12px; }
  html:not([lang="it"]) .menu__voci a { font-size: 15px; }
  html:not([lang="it"]) .testata__azioni, .testata:has(.testata__richiesta:not([hidden])) .testata__azioni { gap: 8px; }
  html:not([lang="it"]) .testata__contatto { font-size: 14px; padding-inline: 12px; }
}
/* voce 9 · il menu da telefono: le voci lunghe (in italiano «Continua l'esperienza», in tedesco quasi tutte) andavano
   oltre il bordo a 320-390 px perché non andavano mai a capo; da telefono vanno a capo, bilanciate, un poco più piccole
   sui telefoni stretti, e così anche il pulsante di WhatsApp */
@media (max-width: 1179px) {
  .menu__voci a { white-space: normal; text-wrap: balance; font-size: clamp(28px, 8.7vw, 34px); line-height: 1.12; }
  .menu__solo-telefono .btn { white-space: normal; text-wrap: balance; max-width: 100%; font-size: clamp(16px, 5vw, 20px); padding-inline: 20px; }
}

/* step 9-bis (01/11/2026, a norma di legge): le pagine legali nuove, l'avviso sui dati nel carrello, l'IVA e l'etichetta
   del catalogo. Righe piccole e discrete, coi colori delle note del sito */
.legale ol { list-style: decimal; }
.legale ol li::marker { color: var(--oro); }
.thk-avviso-garanzia { margin: 22px 0 8px; }
.thk-avviso-garanzia img { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 4px; background: #fff; }
.thk-avviso-garanzia figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--grigio); }
.richiesta__avviso { margin-top: 2px; font-size: 13.5px; line-height: 1.5; }
.catalogo__iva, .vetrina__iva, .scheda-olio__iva { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--grigio); }
.vetrina__iva { margin-top: 18px; }
.catalogo__ingredienti, .scheda-olio__ingredienti { margin-top: 14px; max-width: 34em; font-size: 13.5px; line-height: 1.5; color: var(--grigio); }
.scheda-olio__iva { margin-top: 4px !important; }
.scheda-olio__ingredienti { margin-top: 16px; }
/* la riga legale in fondo, con cinque collegamenti: da telefono va a capo, quindi niente puntini a inizio riga */
@media (max-width: 767px) {
  .piede__pagine { column-gap: 22px; }
  .piede__pagine a + a::before, .piede__pagine a + span::before, .piede__pagine span::before { content: none; margin: 0; }
}

/* 9-bis (01/11/2026): da telefono, finché la barra dei cookie del kit è aperta, il pulsante fisso (WhatsApp o «Verifica la
   disponibilità») sta sopra di lei, così non si coprono mai, nemmeno durante la dissolvenza. --barra-cookie-h è l'altezza
   vera della barra (main.js); chiusa la barra, la classe sparisce e il pulsante torna giù */
@media (max-width: 767px) {
  html.ha-barra-cookie .fisso { bottom: calc(12px + var(--barra-cookie-h, 56px) + 10px + env(safe-area-inset-bottom, 0px)); }
}