/* ==========================================================================
   Si.Ca. Alimentari — sito
   Valori tipografici, cromatici e di spaziatura ripresi 1:1 dal design approvato.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
  --ink:      #050B0D;
  --ink-2:    #0B1418;
  --teal:     #0B1E24;
  --gold:     #F5D070;
  --gold-ink: #2B1F05;
  --cream:    #F7F3EA;
  --red:      #B3282E;
  --rose:     #EFA3A6;
  --cocoa:    #0C0605;
  --footer:   #030708;

  --serif: Fraunces, Georgia, serif;
  --sans:  Figtree, system-ui, sans-serif;
  --mono:  'IBM Plex Mono', monospace;

  --par:  1;          /* scala della parallasse: ridotta su tablet e telefono */
  --gut:  clamp(14px, 3vw, 34px);
  --maxw: 1500px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  overflow-x: hidden;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }

/* L'attributo hidden deve battere le regole di display scritte più sotto.
   Senza questa riga `.card { display: block }` e `.shop-filters { display:
   flex }` vincono sul foglio del browser e i filtri dello scaffale non
   nascondono più niente: il contatore scende ma le schede restano a video. */
[hidden] { display: none !important; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: #fff; }

/* Il contorno di messa a fuoco: si vede solo per chi naviga da tastiera,
   il mouse non lo fa comparire e il disegno resta identico. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.card:focus-visible,
.tile:focus-visible,
.deli-fam:focus-visible,
.gate__door:focus-visible { outline-offset: -4px; }
img { display: block; }
h1, h2, h3, p { margin: 0; }
input[type=range] { accent-color: #9E6B1B; }
::selection { background: var(--gold); color: var(--ink-2); }

/* il titolo che serve ai lettori di schermo e non alla pagina */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* i target di navigazione non devono finire sotto l'header fisso */
section[id] { scroll-margin-top: 86px; }

/* --------------------------------------------------------------------------
   3. Keyframes
   -------------------------------------------------------------------------- */
@keyframes onda   { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes respiro{ 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes galleggia { 0%,100% { transform: translate3d(0,0,0) rotate(-0.7deg); } 50% { transform: translate3d(0,-18px,0) rotate(0.7deg); } }
@keyframes luce   { 0% { transform: translate3d(-150%,0,0) rotate(14deg); } 55%,100% { transform: translate3d(260%,0,0) rotate(14deg); } }
@keyframes bolla  { 0% { transform: translate3d(0,0,0) scale(.5); opacity: 0; } 12% { opacity: .5; } 100% { transform: translate3d(30px,-780px,0) scale(1.2); opacity: 0; } }
@keyframes deriva { 0%,100% { transform: translate3d(-10%,-8%,0) scale(1); } 50% { transform: translate3d(12%,10%,0) scale(1.22); } }
@keyframes acqua  { 0%,100% { transform: translate3d(-5%,0,0) scale(1.12); } 50% { transform: translate3d(6%,-5%,0) scale(1.3); } }
@keyframes nastro { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes zoomA  { 0%,100% { transform: scale(1.04) translate3d(0,0,0); } 50% { transform: scale(1.19) translate3d(-1.6%,1.2%,0); } }
@keyframes zoomB  { 0%,100% { transform: scale(1.2) translate3d(1.8%,-1.2%,0); } 50% { transform: scale(1.03) translate3d(0,0,0); } }
@keyframes zoomC  { 0%,100% { transform: scale(1.05) translate3d(-1.4%,1.2%,0); } 50% { transform: scale(1.22) translate3d(1.4%,-1.2%,0); } }
@keyframes salita { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-12px,0); } }
@keyframes pulsa  { 0%,100% { opacity: .2; } 50% { opacity: .85; } }

/* --------------------------------------------------------------------------
   4. Elementi ricorrenti
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.accent-gold  { color: var(--gold); font-weight: 600; }
.accent-white { color: #fff; }

.btn {
  display: inline-block;
  font-weight: 700;
  border-radius: 999px;
}

.btn--gold { background: var(--gold); color: var(--gold-ink); }
.btn--gold:hover { background: #fff; color: var(--gold-ink); }

.btn--sm {
  flex: none;
  font-size: 13.5px;
  padding: 13px 22px;
  transition: transform .3s ease, background-color .3s ease;
}
.btn--sm:hover { transform: translateY(-2px); }

.btn--lg { font-size: 15.5px; padding: 17px 30px; }
.btn--gold.btn--lg {
  transition: transform .45s cubic-bezier(.16,.78,.28,1), background-color .4s ease, box-shadow .45s ease;
}
.btn--gold.btn--lg:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(245,208,112,.35);
}

.btn--ghost {
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  transition: transform .45s cubic-bezier(.16,.78,.28,1), background-color .4s ease, border-color .4s ease;
}
.btn--ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: #fff;
  color: #fff;
  transform: translateY(-5px);
}

.btn--ink { background: var(--ink-2); color: #fff; }
.btn--ink:hover { background: #265867; color: #fff; }
.btn--xl {
  font-size: 16px;
  padding: 19px 34px;
  transition: transform .45s cubic-bezier(.16,.78,.28,1), background-color .4s ease, box-shadow .45s ease;
}
.btn--xl:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.5); }

.btn--sand {
  color: #9E6B1B;
  border: 1px solid #C9A75E;
  transition: background-color .3s ease;
}
.btn--sand:hover { background: #FFFBF0; color: #9E6B1B; }

.btn--red {
  background: var(--red);
  color: #fff;
  font-size: 15px;
  padding: 17px 32px;
  transition: transform .45s cubic-bezier(.16,.78,.28,1), background-color .4s ease, box-shadow .45s ease;
}
.btn--red:hover {
  background: #D13239;
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(179,40,46,.45);
}

.btn--footer { font-size: 14px; padding: 13px 20px; margin-bottom: 16px; }

.wave-strip { width: 200%; height: 100%; display: flex; will-change: transform; }
.wave-strip svg { flex: 0 0 50%; height: 100%; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 90; }

/* Velo dietro l'header: sull'hero è invisibile (l'hero ha già il suo velo scuro),
   ma tiene leggibili logo, menu e pulsante quando scorrono sopra le sezioni
   chiare — il configuratore color crema e la fascia oro "Ordina su WhatsApp",
   dove prima il pulsante dorato spariva del tutto. */
.site-header::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 168%;
  background: linear-gradient(180deg, rgba(5,11,13,.92) 0%, rgba(5,11,13,.74) 46%, rgba(5,11,13,.32) 76%, rgba(5,11,13,0) 100%);
  pointer-events: none;
  z-index: -1;
}

.progress-bar {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: .85;
  pointer-events: none;
}

.site-header__bar {
  padding: 16px var(--gut);
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-header__brand { display: block; flex: none; line-height: 0; }
.site-header__logo {
  height: 54px;
  width: auto;
  flex: none;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.8));
}
.site-header__spacer { flex: 1; }

.site-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #EAF3F6;
  font-weight: 600;
  align-items: center;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.site-nav a {
  color: #EAF3F6;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(245,208,112,0);
  transition: color .4s ease, border-color .4s ease;
}
.site-nav a:hover { color: var(--gold); border-bottom-color: rgba(245,208,112,.85); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 130px 0 0;
}
.hero__bg {
  position: absolute;
  inset: -10%;
  transform: translate3d(calc(var(--mx,0) * -16px), calc(var(--y,0) * 64px * var(--par) + var(--my,0) * -16px), 0);
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 58%;
  animation: zoomA 36s ease-in-out infinite;
}
.hero__veil-v {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,11,13,.85) 0%, rgba(5,11,13,.3) 32%, rgba(5,11,13,.7) 70%, #050B0D 100%);
}
.hero__veil-h {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,11,13,.9) 0%, rgba(5,11,13,.2) 48%, rgba(5,11,13,0) 100%);
}
.hero__glow {
  position: absolute;
  right: 5%; top: 5%;
  width: min(60vw, 700px);
  height: min(60vw, 700px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,243,206,.4) 0%, rgba(245,208,112,.2) 42%, rgba(245,208,112,0) 70%);
  animation: respiro 11s ease-in-out infinite;
  transform: translate3d(calc(var(--mx,0) * 24px), calc(var(--my,0) * 24px), 0);
  pointer-events: none;
}

.hero__bubbles { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; pointer-events: none; }
.hero__bubble { position: absolute; bottom: 0; border-radius: 50%; display: block; }
.hero__bubble--1 { left: 13%; width: 12px; height: 12px; background: rgba(255,255,255,.26); animation: bolla 22s linear infinite; }
.hero__bubble--2 { left: 31%; width:  7px; height:  7px; background: rgba(255,255,255,.34); animation: bolla 29s linear infinite 5s; }
.hero__bubble--3 { left: 57%; width: 17px; height: 17px; background: rgba(255,255,255,.14); animation: bolla 35s linear infinite 9s; }
.hero__bubble--4 { left: 79%; width:  9px; height:  9px; background: rgba(255,255,255,.28); animation: bolla 25s linear infinite 2s; }

.hero__waves { position: absolute; left: 0; right: 0; bottom: 50px; }
.hero__waves--back  { height: 24%; opacity: .36; }
.hero__waves--front { height: 15%; opacity: .9; }
.wave-strip--slow { animation: onda 34s linear infinite; }
.wave-strip--fast { animation: onda 23s linear infinite reverse; }

.hero__vertical {
  position: absolute;
  left: 12px;
  bottom: 104px;
  z-index: 8;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 6;
  padding: 0 var(--gut) clamp(30px,5vh,58px) clamp(44px,5vw,78px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(20px,3vw,48px);
}
.hero__copy { flex: 1 1 460px; min-width: min(100%, 300px); }

.hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px,2.4vh,28px);
}
.hero__flag-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  display: block;
  animation: pulsa 4s ease-in-out infinite;
}
.hero__flag-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(44px,7.2vw,128px);
  line-height: .85;
  letter-spacing: -.045em;
  color: #fff;
  text-shadow: 0 12px 64px rgba(0,0,0,.8);
}
.hero__title-accent {
  color: var(--gold);
  display: inline-block;
  margin-left: clamp(20px,6vw,118px);
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px,3vw,40px);
  align-items: flex-end;
  margin-top: clamp(22px,3.4vh,40px);
}
.hero__lead {
  font-size: clamp(15px,1.25vw,18px);
  line-height: 1.55;
  color: #E4F0F4;
  max-width: 30ch;
  border-left: 2px solid var(--gold);
  padding-left: 16px;
}
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.hero__mark {
  flex: 0 1 min(30%, 330px);
  min-width: 170px;
  position: relative;
  animation: galleggia 8.5s ease-in-out infinite;
  pointer-events: none;
}
.hero__mark img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 70px rgba(0,0,0,.75));
}
.hero__mark-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: url(../assets/logo-sica.png);
          mask-image: url(../assets/logo-sica.png);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.hero__mark-shine span {
  position: absolute;
  top: -30%;
  left: 0;
  width: 30%;
  height: 160%;
  background: linear-gradient(90deg, rgba(255,245,215,0) 0%, rgba(255,250,232,.95) 50%, rgba(255,245,215,0) 100%);
  animation: luce 7.5s ease-in-out infinite;
  will-change: transform;
}

.ticker {
  position: relative;
  z-index: 7;
  background: var(--gold);
  overflow: hidden;
  padding: 12px 0;
}
.ticker__track {
  width: 200%;
  display: flex;
  animation: nastro 40s linear infinite;
  will-change: transform;
}
.ticker__group {
  flex: 0 0 50%;
  display: flex;
  gap: 30px;
  padding-right: 30px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* --------------------------------------------------------------------------
   7. Due porte
   -------------------------------------------------------------------------- */
.doors { position: relative; display: flex; flex-wrap: wrap; background: var(--ink); }

.door {
  flex: 1 1 380px;
  min-width: min(100%, 300px);
  position: relative;
  overflow: hidden;
  height: clamp(430px, 78vh, 820px);
  height: clamp(430px, 78svh, 820px);
  display: block;
  color: #fff;
}
.door:hover { color: #fff; }
.door__media { position: absolute; inset: -12%; }
.door--fish .door__media { transform: translate3d(0, calc(var(--y,0) * 44px * var(--par)), 0); }
.door--deli .door__media { transform: translate3d(0, calc(var(--y,0) * 66px * var(--par)), 0); }
.door__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .8s ease;
}
.door--fish .door__media img { animation: zoomA 32s ease-in-out infinite; }
.door--deli .door__media img { animation: zoomB 36s ease-in-out infinite; }
.door:hover .door__media img { filter: brightness(1.15); }

.door__veil { position: absolute; inset: 0; }
.door--fish .door__veil { background: linear-gradient(190deg, rgba(11,30,36,.4) 0%, rgba(5,11,13,.35) 42%, rgba(5,11,13,.95) 100%); }
.door--deli .door__veil { background: linear-gradient(190deg, rgba(60,14,17,.55) 0%, rgba(24,6,7,.5) 42%, rgba(15,3,4,.96) 100%); }

.door__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px,3vw,54px); }
.door__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.door--fish .door__eyebrow { color: var(--gold); }
.door--deli .door__eyebrow { color: var(--rose); }
.door__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(32px,4.8vw,76px);
  line-height: .92;
  letter-spacing: -.04em;
  margin: 14px 0 16px;
}
.door__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.door--fish .door__cta { color: var(--gold); }
.door--deli .door__cta { color: var(--rose); }
.door__rule { width: 44px; height: 1px; display: block; }
.door--fish .door__rule { background: var(--gold); }
.door--deli .door__rule { background: var(--rose); }

.doors__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(100px,9vw,146px);
  height: clamp(100px,9vw,146px);
  margin: clamp(-73px,-4.5vw,-50px) 0 0 clamp(-73px,-4.5vw,-50px);
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid rgba(245,208,112,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.doors__badge span {
  font-family: var(--serif);
  font-size: clamp(13px,1.15vw,17px);
  color: var(--gold);
  text-align: center;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   8. Due banchi
   -------------------------------------------------------------------------- */
.intro {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: clamp(60px,9vw,140px) var(--gut);
}
.intro__bg {
  position: absolute;
  inset: -10%;
  opacity: .34;
  transform: translate3d(0, calc(var(--y,0) * 40px * var(--par)), 0);
}
.intro__bg img { width: 100%; height: 100%; object-fit: cover; animation: zoomC 40s ease-in-out infinite; }
.intro__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #050B0D, rgba(5,11,13,.7) 45%, #050B0D);
}
.intro__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px,4vw,80px);
  align-items: flex-end;
}
.intro__title {
  flex: 1 1 480px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px,5.4vw,88px);
  line-height: .94;
  letter-spacing: -.04em;
  color: #fff;
  max-width: 11ch;
}
.intro__text {
  flex: 1 1 340px;
  font-size: 17px;
  line-height: 1.65;
  color: #9DB4BC;
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   9. Laboratorio
   -------------------------------------------------------------------------- */
.lab { position: relative; background: var(--ink); }
.lab__grid { display: flex; flex-wrap: wrap; align-items: flex-start; }

.lab__media {
  flex: 1 1 380px;
  min-width: min(100%, 300px);
  order: 2;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.lab__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 63% 44%;
  filter: saturate(.88) contrast(1.07) brightness(.97);
  animation: zoomB 40s ease-in-out infinite;
}
.lab__veil-a {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,11,13,.66) 0%, rgba(5,11,13,.16) 26%, rgba(5,11,13,0) 46%, rgba(5,11,13,.22) 100%);
}
.lab__veil-b {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 62% 44%, rgba(5,11,13,0) 46%, rgba(5,11,13,.52) 100%);
}
.lab__drift {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 40% 50%, rgba(245,208,112,.12), rgba(245,208,112,0) 55%);
  animation: deriva 22s ease-in-out infinite;
  pointer-events: none;
}
.lab__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.lab__caption-gold,
.lab__caption-light {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,.95);
}
.lab__caption-gold  { color: var(--gold); }
.lab__caption-light { color: rgba(255,255,255,.8); }

.lab__text {
  flex: 1 1 380px;
  min-width: min(100%, 300px);
  order: 1;
  padding: clamp(40px,7vw,120px) clamp(14px,3vw,54px);
}
.lab__block { margin-bottom: clamp(50px,11vh,140px); }
.lab__block--p    { max-width: 44ch; }
.lab__block--pull { max-width: 34ch; }
.lab__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px,5vw,84px);
  line-height: .92;
  letter-spacing: -.04em;
  margin: 18px 0 0;
  color: #fff;
  max-width: 11ch;
}
.lab__para {
  font-size: clamp(17px,1.5vw,22px);
  line-height: 1.6;
  color: #D6E7ED;
}
.lab__pull {
  font-family: var(--serif);
  font-size: clamp(22px,2.5vw,40px);
  line-height: 1.2;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: -.025em;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid rgba(245,208,112,.25);
}
.stats__item { flex: 1 1 130px; padding: 22px 16px 0 0; }
.stats__k {
  font-family: var(--serif);
  font-size: clamp(34px,3.4vw,54px);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.stats__v { font-size: 13.5px; line-height: 1.5; color: #8FA8B1; margin-top: 6px; }

/* --------------------------------------------------------------------------
   10. Processo
   -------------------------------------------------------------------------- */
.process {
  position: relative;
  background: var(--ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 2px;
}
.process__tile {
  position: relative;
  overflow: hidden;
  height: clamp(300px, 42vh, 480px);
  height: clamp(300px, 42svh, 480px);
}
.process__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.process__tile:nth-child(1) img { object-position: 54% 46%; filter: saturate(.88) contrast(1.06); }
.process__tile:nth-child(2) img { object-position: 56% 42%; filter: saturate(.74) contrast(1.06); }
.process__tile:nth-child(3) img { filter: saturate(.7) contrast(1.05); }
.process__tile:hover img { transform: scale(1.1); }

.process__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,11,13,0) 36%, rgba(5,11,13,.45) 66%, rgba(5,11,13,.9));
}
.process__veil--deep {
  background: linear-gradient(180deg, rgba(5,11,13,0) 36%, rgba(5,11,13,.48) 66%, rgba(5,11,13,.9));
}
.process__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; }
.process__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.process__title {
  font-family: var(--serif);
  font-size: clamp(18px,1.6vw,24px);
  font-weight: 600;
  line-height: 1.15;
}
.process__title--shadow { text-shadow: 0 3px 20px rgba(0,0,0,.9); }

/* --------------------------------------------------------------------------
   11. Quattro tagli
   -------------------------------------------------------------------------- */
.cuts {
  position: relative;
  background: var(--teal);
  padding: clamp(60px,8vw,130px) var(--gut);
  overflow: hidden;
}
.cuts__drift {
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse at 70% 30%, rgba(58,122,142,.3), rgba(58,122,142,0) 55%);
  animation: deriva 26s ease-in-out infinite;
  pointer-events: none;
}
.cuts__inner { position: relative; max-width: var(--maxw); margin: 0 auto; }
.cuts__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(28px,3.6vw,54px);
}
.cuts__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(32px,4.8vw,76px);
  line-height: .94;
  letter-spacing: -.04em;
  color: #fff;
  max-width: 11ch;
}
.cuts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 300px), 1fr));
  gap: 2px;
  background: rgba(245,208,112,.2);
}
.cut {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(280px,32vw,420px);
  padding: 26px 24px;
  color: #fff;
  overflow: hidden;
  background: var(--teal);
}
.cut:hover { color: #fff; }
.cut__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.cut:hover .cut__img { opacity: .85; transform: scale(1.07); }
.cut__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,30,36,.2), rgba(5,11,13,.94));
}
.cut__num {
  position: absolute;
  right: -4px;
  top: -14px;
  font-family: var(--serif);
  font-size: clamp(80px,9vw,150px);
  font-weight: 700;
  line-height: 1;
  color: rgba(245,208,112,.16);
  pointer-events: none;
}
.cut__name {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(24px,2.4vw,36px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.cut__desc {
  position: relative;
  font-size: 15.5px;
  line-height: 1.5;
  color: #C4D7DE;
  max-width: 26ch;
  margin-bottom: 16px;
}
.cut__cta {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12. Pezzature + configuratore
   -------------------------------------------------------------------------- */
.sizes {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  padding: 0 0 clamp(60px,8vw,120px);
}
.sizes__bg { position: absolute; inset: 0; opacity: .3; }
.sizes__bg img { width: 100%; height: 100%; object-fit: cover; animation: zoomB 46s ease-in-out infinite; }
.sizes__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0B1E24, rgba(11,30,36,.88) 40%, #0B1E24);
}
.sizes__drift {
  position: absolute;
  inset: -25%;
  background: radial-gradient(ellipse at 25% 70%, rgba(167,212,239,.16), rgba(167,212,239,0) 55%);
  animation: acqua 16s ease-in-out infinite;
  pointer-events: none;
}
.sizes__head-wrap {
  position: relative;
  z-index: 3;
  padding: clamp(60px,8vw,120px) var(--gut) 0;
  max-width: var(--maxw);
  margin: 0 auto;
}
.sizes__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(28px,3.4vw,50px);
}
.sizes__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(32px,4.8vw,76px);
  line-height: .94;
  letter-spacing: -.04em;
  color: #fff;
  max-width: 13ch;
}
.sizes__text { font-size: 16px; line-height: 1.6; color: #9DB4BC; max-width: 38ch; }

.cfg {
  position: relative;
  z-index: 3;
  background: var(--cream);
  color: var(--ink-2);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px,3vw,44px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px,2.6vw,40px);
  box-shadow: 0 50px 110px rgba(0,0,0,.6);
}
.cfg__left  { flex: 5 1 340px; min-width: min(100%, 290px); }
.cfg__right { flex: 7 1 420px; min-width: min(100%, 290px); display: flex; flex-direction: column; gap: 16px; }

.cfg__weight-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #DDD3C0;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.cfg__label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8A5C14;
}
.cfg__label--block { margin-bottom: 12px; }
.cfg__label--tight { margin-bottom: 10px; }
.cfg__label--rule  { border-bottom: 1px solid #DDD3C0; padding-bottom: 10px; margin-bottom: 16px; }

.cfg__weight {
  font-family: var(--serif);
  font-size: clamp(36px,4.4vw,62px);
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1;
  letter-spacing: -.03em;
}
.cfg__range { width: 100%; height: 28px; cursor: pointer; background: transparent; }
.cfg__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: #63594A;
  letter-spacing: .08em;
}

.cfg__stage {
  position: relative;
  margin: 22px 0;
  height: clamp(160px,16vw,220px);
  overflow: hidden;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cfg__stage-note {
  position: absolute;
  left: 14px;
  top: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  z-index: 3;
}
.cfg__stage-inner { position: relative; width: min(88%, 430px); height: 64%; }
.cfg__shape-ghost {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(167,212,239,.45);
  border-radius: 50% 46% 44% 50% / 60% 58% 42% 40%;
}
.cfg__shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50% 46% 44% 50% / 60% 58% 42% 40%;
  transform-origin: center;
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 16px 44px rgba(0,0,0,.65);
}
.cfg__shape img { width: 100%; height: 100%; object-fit: cover; }

.cfg__cuts { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg__rows { display: flex; flex-direction: column; gap: 12px; }
.cfg__row  { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cfg__row-name {
  flex: 0 0 168px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .01em;
}
.cfg__row-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.cfg__msg-wrap { margin-top: auto; }
.cfg__msg {
  background: #fff;
  border-left: 3px solid #25D366;
  padding: 16px 18px;
  font-size: clamp(16px,1.3vw,19px);
  line-height: 1.5;
  min-height: 60px;
}
.cfg__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cfg__go {
  flex: 1 1 250px;
  text-align: center;
  font-size: 15px;
  padding: 17px 22px;
  transition: background-color .3s ease;
}
.cfg__free {
  flex: 1 1 190px;
  text-align: center;
  font-size: 15px;
  padding: 17px 22px;
}

/* pillole pezzatura */
.pill {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 8px 12px;
  cursor: not-allowed;
  transition: opacity .35s ease, background-color .35s ease, border-color .35s ease, color .35s ease;
  border: 1px solid #DDD3C0;
  background: transparent;
  color: #8C8375;
  opacity: .4;
}
.pill--on {
  border-color: #9E6B1B;
  background: #FFF6DF;
  color: #7A5210;
  opacity: 1;
  cursor: pointer;
}
.pill--sel {
  border-color: var(--ink-2);
  background: var(--ink-2);
  color: var(--gold);
  opacity: 1;
  font-weight: 600;
  cursor: pointer;
}

/* bottoni taglio */
.cut-btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  cursor: pointer;
  transition: all .28s ease;
  border: 1px solid #DDD3C0;
  background: transparent;
  color: #5A4A3A;
}
.cut-btn--sel { border-color: var(--ink-2); background: var(--ink-2); color: var(--gold); }

/* --------------------------------------------------------------------------
   13. Secco
   -------------------------------------------------------------------------- */
.dry {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  min-height: clamp(520px, 84vh, 860px);
  min-height: clamp(520px, 84svh, 860px);
  display: flex;
  align-items: flex-end;
}
.dry__bg { position: absolute; inset: -12%; transform: translate3d(0, calc(var(--y,0) * 72px * var(--par)), 0); }
.dry__bg img { width: 100%; height: 100%; object-fit: cover; animation: zoomC 38s ease-in-out infinite; }
.dry__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,11,13,.72) 0%, rgba(5,11,13,.28) 32%, rgba(5,11,13,.92) 80%, #050B0D 100%);
}
.dry__inner { position: relative; z-index: 3; width: 100%; padding: clamp(50px,7vw,100px) var(--gut); }
.dry__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px,4vw,60px);
  align-items: flex-end;
  justify-content: space-between;
}
.dry__col { flex: 1 1 400px; }
.dry__col--right { flex: 1 1 340px; max-width: 42ch; }
.dry__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px,5.4vw,88px);
  line-height: .92;
  letter-spacing: -.045em;
  margin: 16px 0 0;
  color: #fff;
  max-width: 10ch;
}
.dry__pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.pill-gold {
  font-family: var(--mono);
  font-size: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(245,208,112,.5);
  color: var(--gold);
}
.dry__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(245,208,112,.6);
  padding-bottom: 6px;
}
.dry__link:hover { color: var(--gold); }
.dry__rule { width: 32px; height: 1px; background: var(--gold); display: block; }

/* --------------------------------------------------------------------------
   14. Mosaico prodotti (retail + ammollato)
   -------------------------------------------------------------------------- */
.retail {
  position: relative;
  background: var(--ink);
  padding: clamp(60px,8vw,120px) var(--gut);
}
.retail__head-wrap { max-width: var(--maxw); margin: 0 auto; }
.retail__head {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px,3vw,56px);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(24px,2.6vw,40px);
}
.retail__head-col { flex: 1 1 480px; min-width: min(100%, 290px); }
.retail__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px,4.4vw,68px);
  line-height: .94;
  letter-spacing: -.04em;
  margin: 16px 0 0;
  color: #fff;
  max-width: 13ch;
}
.retail__text { flex: 0 1 380px; font-size: 16px; line-height: 1.6; color: #9DB4BC; max-width: 38ch; }

.mosaic {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0 calc(-1 * var(--gut));
}
.mosaic--soaked { flex-wrap: wrap-reverse; position: relative; }

.mosaic__side {
  flex: 5 1 380px;
  min-width: min(100%, 320px);
  height: clamp(440px, 60vw, 760px);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mosaic__side--soaked {
  flex: 6 1 400px;
  height: clamp(420px, 56vw, 700px);
}
.mosaic__pair { flex: 1 1 0; min-height: 0; display: flex; gap: 3px; }

.tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: block;
  color: #fff;
  background: var(--ink);
}
.tile:hover { color: #fff; }
.tile--soft { background: var(--teal); }
.tile--hero {
  flex: 7 1 480px;
  min-width: min(100%, 320px);
  height: clamp(440px, 60vw, 760px);
}
.tile--wide { flex: 1.28 1 0; min-height: 0; }
.mosaic__side--soaked > .tile:first-child { flex: 1.25 1 0; min-height: 0; }
.tile--soaked-hero {
  flex: 6 1 420px;
  min-width: min(100%, 320px);
  height: clamp(420px, 56vw, 700px);
}

.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1), filter 1s ease;
}
.tile__img--brosmer-retail { object-position: 50% 34%; filter: saturate(.6) contrast(1.08) brightness(.98); }
.tile__img--brosmer-soaked { object-position: 50% 36%; filter: saturate(.6) contrast(1.08) brightness(.97); }
.tile__img--seal           { object-position: 56% 34%; filter: saturate(.82) contrast(1.05); }
.tile__img--loin           { object-position: 50% 42%; filter: saturate(.85) contrast(1.06); }
.tile__img--ice            { object-position: 52% 40%; filter: saturate(.8) contrast(1.07) brightness(.97); }
.tile__img--salinato       { object-position: 58% 38%; filter: saturate(.86) contrast(1.06); }

.tile:hover .tile__img--brosmer-retail,
.tile:hover .tile__img--brosmer-soaked { transform: scale(1.1);  filter: saturate(.72) contrast(1.08) brightness(1.06); }
.tile:hover .tile__img--seal           { transform: scale(1.1);  filter: saturate(.95) contrast(1.05) brightness(1.06); }
.tile:hover .tile__img--loin           { transform: scale(1.11); filter: saturate(.95) contrast(1.06) brightness(1.08); }
.tile:hover .tile__img--ice            { transform: scale(1.11); filter: saturate(.92) contrast(1.07) brightness(1.05); }
.tile:hover .tile__img--salinato       { transform: scale(1.1);  filter: saturate(.95) contrast(1.06) brightness(1.05); }

.tile__veil { position: absolute; inset: 0; transition: opacity .8s ease; }
.tile:hover .tile__veil { opacity: .52; }
.tile__veil--hero        { background: linear-gradient(180deg, rgba(5,11,13,0) 38%, rgba(5,11,13,.36) 64%, rgba(5,11,13,.88) 100%); }
.tile__veil--wide        { background: linear-gradient(180deg, rgba(5,11,13,0) 34%, rgba(5,11,13,.4) 62%, rgba(5,11,13,.88) 100%); }
.tile__veil--sm          { background: linear-gradient(180deg, rgba(5,11,13,0) 30%, rgba(5,11,13,.45) 62%, rgba(5,11,13,.9) 100%); }
.tile__veil--soaked-wide { background: linear-gradient(180deg, rgba(11,30,36,0) 34%, rgba(5,11,13,.42) 62%, rgba(5,11,13,.88) 100%); }
.tile__veil--soaked-sm   { background: linear-gradient(180deg, rgba(11,30,36,0) 28%, rgba(5,11,13,.48) 60%, rgba(5,11,13,.9) 100%); }
.tile__veil--soaked-hero { background: linear-gradient(180deg, rgba(11,30,36,0) 38%, rgba(5,11,13,.4) 66%, rgba(5,11,13,.9) 100%); }

.tile__tag {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  text-shadow: 0 2px 14px rgba(0,0,0,.95);
  color: var(--gold);
}
.tile__tag--lg     { padding: clamp(18px,2vw,32px);   font-size: 10.5px; letter-spacing: .26em; }
.tile__tag--md     { padding: clamp(16px,1.8vw,26px); font-size: 10.5px; letter-spacing: .26em; }
.tile__tag--sm     { padding: clamp(14px,1.6vw,22px); font-size: 10px;   letter-spacing: .24em; }
.tile__tag--box    { padding: clamp(16px,1.8vw,26px); font-size: 10px;   letter-spacing: .24em; text-transform: uppercase; }
.tile__tag--box-lg { padding: clamp(18px,2vw,32px);   font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; }

.tile__body { position: absolute; left: 0; right: 0; bottom: 0; }
.tile__body--lg { padding: clamp(20px,2.4vw,38px); }
.tile__body--md { padding: clamp(18px,2vw,28px); }
.tile__body--sm { padding: clamp(16px,1.8vw,24px); }

.tile__rule { background: var(--gold); }
.tile__rule--lg { width: 44px; height: 2px; margin-bottom: 16px; }
.tile__rule--md { width: 36px; height: 2px; margin-bottom: 12px; }

.tile__name {
  font-family: var(--serif);
  font-weight: 600;
  text-shadow: 0 4px 26px rgba(0,0,0,.9);
}
.tile__name--lg { font-size: clamp(28px,3.2vw,50px); line-height: .98; letter-spacing: -.025em; margin-bottom: 14px; }
.tile__name--md { font-size: clamp(22px,2.2vw,34px); line-height: 1;   letter-spacing: -.02em;  margin-bottom: 12px; }
.tile--soft .tile__name--md { margin-bottom: 10px; }
.tile__name--sm { font-size: clamp(19px,1.8vw,26px); line-height: 1;   letter-spacing: -.02em;  margin-bottom: 10px; }
.tile__name--xs { font-size: clamp(18px,1.7vw,25px); line-height: 1;   letter-spacing: -.02em;  margin-bottom: 8px; }
.tile__name--xl { font-size: clamp(24px,2.4vw,38px); line-height: 1;   letter-spacing: -.022em; margin-bottom: 12px; max-width: 13ch; }

.tile__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 9px;
  border: 1px solid rgba(245,208,112,.55);
  color: var(--gold);
  background: rgba(5,11,13,.35);
}
.chip--sm { font-size: 10.5px; padding: 4px 8px; }

.tile__order {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.95);
}
.tile__order--sm { font-size: 11.5px; }
.tile--soft .tile__body--md .tile__order { font-size: 12px; }
.tile__order--blue { font-size: 11.5px; color: #A7D4EF; text-shadow: none; }

/* --------------------------------------------------------------------------
   15. Conserve
   -------------------------------------------------------------------------- */
.preserves {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  min-height: clamp(560px, 88vh, 920px);
  min-height: clamp(560px, 88svh, 920px);
  display: flex;
  align-items: center;
}
.preserves__media {
  position: absolute;
  right: 0;
  top: -14%;
  width: min(52%, 740px);
  height: 128%;
  transform: translate3d(0, calc(var(--y,0) * 78px * var(--par)), 0);
}
.preserves__media img { width: 100%; height: 100%; object-fit: cover; animation: zoomB 38s ease-in-out infinite; }
.preserves__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #050B0D 0%, rgba(5,11,13,.95) 36%, rgba(5,11,13,.45) 64%, rgba(5,11,13,.15) 100%);
}
.preserves__inner { position: relative; z-index: 3; width: 100%; padding: clamp(60px,8vw,110px) var(--gut); }
.preserves__copy { max-width: min(100%, 650px); }
.preserves__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px,5vw,80px);
  line-height: .93;
  letter-spacing: -.04em;
  margin: 16px 0 20px;
  color: #fff;
  max-width: 11ch;
}
.preserves__text { margin: 0 0 28px; font-size: 17px; line-height: 1.62; color: #A8BFC7; max-width: 40ch; }
.preserves__list { display: flex; flex-direction: column; }

.preserve {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid rgba(245,208,112,.28);
  color: #fff;
  transition: padding-left .4s cubic-bezier(.22,.61,.36,1);
}
.preserve:hover { padding-left: 12px; color: #fff; }
.preserve__name {
  flex: 1 1 190px;
  min-width: 0;
  font-family: var(--serif);
  font-size: clamp(18px,1.6vw,25px);
  font-weight: 600;
}
.preserve__formats { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-blue {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 4px 8px;
  border: 1px solid rgba(167,212,239,.3);
  color: #A7D4EF;
}
.preserve__cta {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.preserve__end { border-top: 1px solid rgba(245,208,112,.28); }

/* --------------------------------------------------------------------------
   16. Fresco ammollato
   -------------------------------------------------------------------------- */
.soaked {
  position: relative;
  background: var(--teal);
  padding: clamp(60px,8vw,120px) var(--gut);
  overflow: hidden;
}
.soaked__drift {
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse at 30% 60%, rgba(167,212,239,.14), rgba(167,212,239,0) 55%);
  animation: acqua 20s ease-in-out infinite;
  pointer-events: none;
}
.soaked__head-wrap { position: relative; max-width: var(--maxw); margin: 0 auto; }
.soaked__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(26px,3vw,44px);
}
.soaked__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px,4.4vw,68px);
  line-height: .96;
  letter-spacing: -.04em;
  color: #fff;
  max-width: 12ch;
}
.soaked__text { font-size: 16px; line-height: 1.6; color: #9DB4BC; max-width: 34ch; }

/* --------------------------------------------------------------------------
   17. Salumi
   -------------------------------------------------------------------------- */
.deli {
  position: relative;
  overflow: hidden;
  background: var(--cocoa);
  min-height: clamp(600px, 94vh, 980px);
  min-height: clamp(600px, 94svh, 980px);
  display: flex;
  align-items: center;
}
.deli__media { position: absolute; inset: -8%; transform: translate3d(0, calc(var(--y,0) * 56px * var(--par)), 0); }
.deli__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 88% 50%;
  filter: saturate(1.06) contrast(1.04);
  animation: zoomA 44s ease-in-out infinite;
}
.deli__veil-h {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,6,5,.97) 0%, rgba(12,6,5,.94) 22%, rgba(12,6,5,.72) 38%, rgba(12,6,5,.28) 52%, rgba(12,6,5,0) 66%);
}
.deli__veil-v {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,6,5,.55) 0%, rgba(12,6,5,0) 22%, rgba(12,6,5,0) 58%, rgba(12,6,5,.72) 100%);
}
.deli__glow {
  position: absolute;
  left: -20%;
  top: -20%;
  width: 80%;
  height: 140%;
  background: radial-gradient(ellipse at 40% 50%, rgba(179,40,46,.26), rgba(179,40,46,0) 62%);
  animation: deriva 28s ease-in-out infinite;
  pointer-events: none;
}
.deli__inner { position: relative; z-index: 3; width: 100%; padding: clamp(56px,8vw,110px) var(--gut); display: flex; }
.deli__copy { flex: 0 1 min(100%, 620px); }
.deli__flag { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px,2vw,26px); }
.deli__flag-rule { width: 34px; height: 1px; background: var(--red); display: block; }
.deli__flag-text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rose);
}
.deli__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px,5.8vw,96px);
  line-height: .9;
  letter-spacing: -.045em;
  margin: 0 0 clamp(20px,2.6vw,34px);
  color: #fff;
  max-width: 10ch;
  text-shadow: 0 6px 40px rgba(0,0,0,.75);
}
.deli__text { margin: 0 0 12px; font-size: 17px; line-height: 1.62; color: #DCC4C2; max-width: 38ch; }
.deli__pull {
  margin: 0 0 clamp(22px,2.6vw,34px);
  font-family: var(--serif);
  font-size: clamp(19px,1.9vw,29px);
  line-height: 1.28;
  color: #fff;
  font-weight: 600;
  max-width: 24ch;
  text-shadow: 0 4px 28px rgba(0,0,0,.7);
}
.deli__note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A98486;
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   18. Ordina
   -------------------------------------------------------------------------- */
.order {
  position: relative;
  background: var(--gold);
  color: var(--gold-ink);
  padding: clamp(60px,8vw,120px) var(--gut);
  overflow: hidden;
}
.order__glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 70% 40%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%);
  animation: deriva 28s ease-in-out infinite;
  pointer-events: none;
}
.order__inner { position: relative; max-width: var(--maxw); margin: 0 auto; }
.order__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(30px,4vw,60px);
}
.order__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px,5.2vw,88px);
  line-height: .92;
  letter-spacing: -.045em;
  max-width: 13ch;
}
.order__steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 300px), 1fr));
  gap: 0;
  border-top: 1px solid rgba(43,31,5,.25);
}
.step {
  padding: clamp(24px,2.6vw,40px) clamp(18px,2vw,32px) clamp(24px,2.6vw,40px) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step__n {
  font-family: var(--serif);
  font-size: clamp(44px,4.4vw,72px);
  font-weight: 700;
  line-height: 1;
  color: rgba(43,31,5,.28);
}
.step__t {
  font-family: var(--serif);
  font-size: clamp(19px,1.8vw,26px);
  font-weight: 600;
  line-height: 1.15;
}
.step__x { font-size: 16px; line-height: 1.55; color: #5A4A1E; max-width: 32ch; }

/* --------------------------------------------------------------------------
   19. Spedizioni + FAQ
   -------------------------------------------------------------------------- */
.ship {
  position: relative;
  background: var(--ink);
  padding: clamp(60px,8vw,120px) var(--gut);
  overflow: hidden;
}
.ship__waves { position: absolute; left: 0; right: 0; top: 0; height: 46%; opacity: .3; }
.wave-strip--top { animation: onda 30s linear infinite; }
.ship__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px,4vw,70px);
}
.ship__col { flex: 1 1 380px; min-width: min(100%, 290px); }
.ship__col--faq { flex: 1 1 420px; }
.ship__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(32px,4.4vw,68px);
  line-height: .95;
  letter-spacing: -.04em;
  margin: 16px 0 20px;
  color: #fff;
  max-width: 12ch;
}
.ship__p { margin: 0 0 10px; font-size: 17px; line-height: 1.62; color: #A8BFC7; max-width: 42ch; }
.ship__p--gold { margin: 0 0 26px; color: var(--gold); font-weight: 600; }
.ship__meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6E8790;
  line-height: 1.8;
}
.ship__faq-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.faq { border-top: 1px solid rgba(167,212,239,.18); padding: 20px 0; }
.faq__q {
  font-family: var(--serif);
  font-size: clamp(18px,1.7vw,24px);
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -.015em;
  color: #fff;
}
.faq__a { font-size: 15.5px; line-height: 1.6; color: #93AAB3; max-width: 52ch; }
.faq__end { border-top: 1px solid rgba(167,212,239,.18); }

/* --------------------------------------------------------------------------
   20. Heritage
   -------------------------------------------------------------------------- */
.heritage {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  min-height: clamp(440px, 66vh, 700px);
  min-height: clamp(440px, 66svh, 700px);
  display: flex;
  align-items: flex-end;
}
.heritage__bg {
  position: absolute;
  inset: -12%;
  opacity: .5;
  transform: translate3d(0, calc(var(--y,0) * 50px * var(--par)), 0);
}
.heritage__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35);
  animation: zoomB 44s ease-in-out infinite;
}
.heritage__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,11,13,.8) 0%, rgba(5,11,13,.5) 40%, rgba(5,11,13,.96) 100%);
}
.heritage__inner { position: relative; z-index: 3; width: 100%; padding: clamp(50px,7vw,100px) var(--gut); }
.heritage__row {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px,4vw,70px);
  align-items: flex-end;
}
.heritage__title {
  flex: 1 1 360px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(32px,4.8vw,76px);
  line-height: .94;
  letter-spacing: -.04em;
  color: #fff;
  max-width: 10ch;
}
.heritage__copy { flex: 1 1 400px; max-width: 56ch; }
.heritage__p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.62; color: #9DB4BC; }
.heritage__p--lead { font-size: clamp(17px,1.4vw,20px); color: #D6E7ED; }
.heritage__p--last { margin: 0; }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; background: var(--footer); color: #CFE3EA; }
.site-footer__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(50px,6vw,80px) var(--gut) 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}
.site-footer__col--brand { flex: 4 1 280px; min-width: min(100%, 250px); }
.site-footer__col--wide  { flex: 3 1 220px; min-width: min(100%, 200px); }
.site-footer__col--cta   { flex: 2 1 200px; min-width: min(100%, 190px); }

/* Con tre colonne, sui tablet le tre stanno ancora su una riga sola:
   senza questo, «Naviga» scende da sola e lascia mezza riga vuota. */
@media (min-width: 720px) and (max-width: 860px) {
  .site-footer__inner { gap: 28px; }
  .site-footer__col--brand { flex-basis: 240px; min-width: 220px; }
  .site-footer__col--wide  { flex-basis: 200px; min-width: 190px; }
  .site-footer__col--cta   { flex-basis: 180px; min-width: 170px; }
}
.site-footer__logo {
  width: 140px;
  height: auto;
  margin-bottom: 20px;
  animation: salita 12s ease-in-out infinite;
}
.site-footer__addr { font-size: 14.5px; line-height: 1.7; color: #7C959E; }
.site-footer__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.site-footer__body { font-size: 14px; line-height: 1.75; color: #7C959E; }
.site-footer__social { font-size: 14px; line-height: 1.75; }
.site-footer__social a { color: #7C959E; }
.site-footer__social a:hover { color: var(--gold); }
.site-footer__bottom { position: relative; border-top: 1px solid rgba(207,227,234,.1); }
.site-footer__bottom-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--gut);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: 13px;
  color: #7C959E;
}

/* --------------------------------------------------------------------------
   22. Adattamento responsive

   Il desktop resta la fonte di verità: nessuna regola qui sotto tocca le
   larghezze da 1181 px in su. Da lì in giù il layout non viene rimpicciolito,
   viene ricomposto — le griglie cambiano numero di colonne, i veli cambiano
   direzione, i comandi diventano toccabili con il pollice — mantenendo la
   stessa gerarchia editoriale: occhiello, titolo serif, testo, azione.

   Scaletta:
     22.1  Laptop e tablet orizzontale   (≤ 1180 px)
     22.2  Tablet                        (≤ 1024 px)
     22.3  Tablet stretto                (≤ 860 px)
     22.4  Sotto il tablet               (≤ 760 px)
     22.5  Telefono                      (≤ 640 px)
     22.6  Telefono standard             (≤ 480 px)
     22.7  Telefono piccolo              (≤ 380 px)
     22.8  Puntatori senza hover (touch)
   -------------------------------------------------------------------------- */

/* ----- 22.1 · Laptop e tablet orizzontale ---------------------------------- */
@media (max-width: 1180px) {
  /* i blocchi del laboratorio erano distanziati di 11vh: su schermi bassi e
     stretti diventavano voragini fra un paragrafo e l'altro */
  .lab__block { margin-bottom: clamp(38px, 6vh, 84px); }

  /* i target di navigazione lasciano respiro sotto l'header fisso */
  section[id] { scroll-margin-top: 108px; }
}

/* ----- 22.2 · Tablet ------------------------------------------------------- */
@media (max-width: 1024px) {
  /* la parallasse va ridotta insieme al viewport: con l'ampiezza da desktop
     l'immagine di fondo scorreva oltre il proprio margine di sicurezza e
     scopriva una fascia vuota in cima o in fondo alla sezione */
  :root { --par: .55; }

  /* più margine di ritaglio, così il fondo copre la sezione in ogni posizione */
  .dry__bg       { inset: -18%; }
  .heritage__bg  { inset: -18%; }
  .deli__media   { inset: -14%; }
  .preserves__media { top: -22%; height: 144%; }

  /* Salumi: il velo era orizzontale perché il testo stava nella metà sinistra.
     Qui la colonna si allarga e il testo finiva sul formaggio in piena luce:
     il velo diventa verticale e il testo torna su fondo scuro. */
  .deli { min-height: clamp(560px, 78svh, 900px); }
  .deli__veil-h {
    background: linear-gradient(90deg, rgba(12,6,5,.97) 0%, rgba(12,6,5,.9) 46%, rgba(12,6,5,.6) 74%, rgba(12,6,5,.3) 100%);
  }
  .deli__veil-v {
    background: linear-gradient(180deg, rgba(12,6,5,.6) 0%, rgba(12,6,5,.2) 26%, rgba(12,6,5,.45) 62%, rgba(12,6,5,.88) 100%);
  }

  /* Conserve: stesso problema, il testo scavalcava il bordo dell'immagine */
  .preserves__veil {
    background: linear-gradient(90deg, #050B0D 0%, rgba(5,11,13,.96) 46%, rgba(5,11,13,.74) 76%, rgba(5,11,13,.42) 100%);
  }
}

/* ----- 22.3 · Tablet stretto ----------------------------------------------- */
@media (max-width: 860px) {
  /* Processo: a due colonne il terzo riquadro lasciava mezzo schermo nero.
     Ora occupa l'intera riga e la sezione resta piena. */
  .process { grid-template-columns: repeat(2, 1fr); }
  .process__tile:nth-child(3) {
    grid-column: 1 / -1;
    height: clamp(240px, 34svh, 340px);
  }

  /* Laboratorio: la colonna di testo si stringe, il ritmo si accorcia */
  .lab__text { padding: clamp(44px, 7vw, 76px) clamp(18px, 3vw, 40px); }
  .lab__block { margin-bottom: clamp(34px, 5vh, 60px); }
}

/* ----- 22.4 · Sotto il tablet ---------------------------------------------- */
@media (max-width: 760px) {
  :root { --par: .4; }

  /* Le due porte si impilano. Il bollino "Due banchi" era ancorato al centro
     della sezione: con le porte in colonna finiva sopra la scritta "Entra".
     Resta sulla giuntura fra le due porte, ma spostato a destra. */
  .door { flex: 1 1 100%; height: clamp(400px, 62svh, 620px); }
  .doors__badge {
    left: auto;
    right: var(--gut);
    margin: clamp(-73px, -4.5vw, -50px) 0 0 0;
  }

  /* Laboratorio in colonna: prima il testo, poi la foto.
     La foto smette di essere sticky — su schermo piccolo un blocco a tutta
     altezza incollato in cima dava più fastidio che effetto. */
  .lab__grid { flex-direction: column; }
  .lab__media,
  .lab__text { flex: 0 0 auto; width: 100%; max-width: 100%; }
  .lab__media {
    /* relative, non static: veli, deriva e didascalia sono in posizione
       assoluta e devono continuare ad ancorarsi alla foto, non alla sezione */
    position: relative;
    top: auto;
    height: clamp(380px, 58svh, 560px);
  }
  .lab__text { padding: clamp(48px, 9vw, 72px) var(--gut) clamp(40px, 7vw, 64px); }

  /* Le statistiche restano su una riga sola: tre voci brevi, nessun orfano */
  .stats__item { flex: 1 1 0; min-width: 0; padding: 20px 12px 0 0; }
  .stats__k { font-size: clamp(28px, 6.4vw, 44px); }
  .stats__v { font-size: 12.5px; }

  /* Occhiello prima del titolo anche quando la testata va in colonna */
  .cuts__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .cuts__head .eyebrow { order: -1; }
}

/* ----- 22.5 · Telefono ----------------------------------------------------- */
@media (max-width: 640px) {
  :root { --par: .3; }

  /* --- Header: logo e pulsante sulla prima riga, menu sulla seconda --- */
  .site-header__bar { flex-wrap: wrap; gap: 10px 16px; padding: 12px var(--gut); }
  .site-header__logo { height: 44px; }
  .site-nav {
    order: 3;
    width: 100%;
    gap: 6px 20px;
    font-size: 11px;
  }
  .site-header__cta { padding: 12px 18px; font-size: 13px; }
  section[id] { scroll-margin-top: 142px; }

  /* --- Hero --- */
  /* la scritta verticale rubava la colonna di sinistra e stringeva il titolo */
  .hero__vertical { display: none; }
  .hero { padding-top: 116px; }
  .hero__content {
    padding: 0 max(var(--gut), 20px) clamp(26px, 4vh, 44px);
    gap: 18px;
  }
  /* il marchio torna piccolo e si appoggia a destra, come un sigillo */
  .hero__mark {
    flex: none;
    width: min(42%, 132px);
    min-width: 0;
    margin: 2px 0 0 auto;
  }
  .hero__lead { max-width: none; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; text-align: center; }

  /* --- Quattro tagli: le schede prodotto tornano leggibili --- */
  /* a due colonne su un telefono la scheda scendeva sotto i 180 px: il numero
     da 80 px la invadeva, il nome andava a capo e la call to action si
     spezzava su due righe. Una colonna sola, gerarchia intatta. */
  .cuts__grid { grid-template-columns: 1fr; }
  .cut {
    min-height: clamp(240px, 46svh, 340px);
    padding: 24px 20px;
  }
  .cut__num { font-size: 78px; right: 2px; top: -8px; }
  .cut__name { font-size: 30px; margin-bottom: 8px; }
  .cut__desc { max-width: 34ch; font-size: 15px; margin-bottom: 14px; }
  .cut__cta { white-space: nowrap; }

  /* --- Configuratore: comandi da dito, non da mouse --- */
  .cfg { padding: 22px max(var(--gut), 18px) 26px; }
  .cfg__range { height: 44px; }
  .cfg__stage { height: clamp(150px, 34vw, 200px); }
  .pill { font-size: 13px; padding: 12px 14px; }
  .cut-btn { font-size: 14px; padding: 14px 18px; }
  .cfg__cuts { gap: 8px; }
  .cfg__row { gap: 8px; }
  .cfg__row-name { flex: 1 1 100%; }
  .cfg__go,
  .cfg__free { flex: 1 1 100%; padding: 18px 20px; }

  /* --- Conserve: tre righe, tre volte lo stesso ritmo --- */
  /* prima ogni riga si spezzava in modo diverso — nome e formati a volte
     affiancati, a volte no, e il link finiva ora sopra ora sotto */
  .preserve {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 0;
  }
  .preserve__name { flex: 0 0 auto; }
  .preserve__cta { padding: 2px 0 4px; }
  .preserves { min-height: 0; }
  .preserves__inner { padding: clamp(56px, 12vw, 90px) var(--gut); }

  /* --- Secco --- */
  .dry { min-height: clamp(460px, 74svh, 700px); }
  .dry__link { padding: 12px 0; }

  /* --- Salumi: niente spazio morto sotto il testo --- */
  .deli { min-height: 0; }
  .deli__inner { padding: clamp(80px, 18vw, 120px) var(--gut) clamp(64px, 14vw, 96px); }
  .deli__note { max-width: 30ch; }

  /* --- Ordina: tre passi, tre righe, nessuna cella vuota --- */
  .order__steps { grid-template-columns: 1fr; }
  .step {
    padding: 22px 0;
    gap: 8px;
    border-bottom: 1px solid rgba(43,31,5,.2);
  }
  .step:last-child { border-bottom: 0; padding-bottom: 4px; }
  .step__n { font-size: 40px; }
  .step__x { max-width: none; }
  .order__head { gap: 20px; }
  .btn--xl { width: 100%; text-align: center; }

  /* --- Mosaici: riquadri più alti, così il nome non schiaccia il chip --- */
  .mosaic__side { height: clamp(400px, 96vw, 620px); }
  .mosaic__side--soaked { height: clamp(380px, 92vw, 580px); }
  .tile--hero { height: clamp(360px, 84vw, 560px); }
  .tile--soaked-hero { height: clamp(340px, 80vw, 520px); }

  /* --- Footer --- */
  .site-footer__inner { gap: 30px; }
  .site-footer__logo { width: 118px; }
  .site-footer__social a { display: inline-block; padding: 8px 0; }
}

/* ----- 22.6 · Telefono standard -------------------------------------------- */
@media (max-width: 480px) {
  /* nei riquadri piccoli il chip del formato e "Ordina →" si toccavano */
  .mosaic__pair .tile__meta { gap: 6px; }
  .mosaic__pair .tile__order { margin-left: 0; width: 100%; }
  .tile__name--sm { font-size: 19px; }
  .tile__name--xs { font-size: 18px; }

  /* la scala sotto lo slider si stringe senza andare a capo */
  .cfg__scale { font-size: 11px; letter-spacing: .04em; }

  /* titoli: sotto i 480 px il clamp in vw scendeva sotto la soglia leggibile
     su alcuni titoli e restava troppo alto su altri — qui si pareggiano */
  .hero__title { font-size: clamp(40px, 12.5vw, 58px); }
  .hero__title-accent { margin-left: 16px; }
  .deli__title { font-size: clamp(34px, 10.6vw, 50px); }
  .intro__title,
  .dry__title,
  .order__title { font-size: clamp(31px, 9.6vw, 46px); }
  .lab__title,
  .cuts__title,
  .sizes__title,
  .preserves__title,
  .heritage__title { font-size: clamp(30px, 9.2vw, 44px); }
  .retail__title,
  .soaked__title,
  .ship__title { font-size: clamp(28px, 8.6vw, 42px); }
  .cfg__weight { font-size: clamp(34px, 11vw, 48px); }
}

/* ----- 22.7 · Telefono piccolo --------------------------------------------- */
@media (max-width: 380px) {
  /* a 320 px le tre voci di menu arrivavano al bordo dello schermo */
  .site-nav { gap: 6px 14px; font-size: 10.5px; letter-spacing: .12em; }
  .site-header__cta { padding: 12px 15px; font-size: 12.5px; }
  .site-header__logo { height: 40px; }
  section[id] { scroll-margin-top: 138px; }
  .hero { padding-top: 108px; }

  .ticker__group { gap: 20px; padding-right: 20px; font-size: 11px; }
  .cut { padding: 22px 18px; }
  .cut__num { font-size: 64px; }
  .cut__name { font-size: 27px; }
  .stats__k { font-size: clamp(24px, 7.6vw, 32px); }
  .stats__v { font-size: 11.5px; letter-spacing: -.005em; }
  .cfg__row-pills { gap: 6px; }
  .pill { font-size: 12px; padding: 11px 11px; }
  .dry__pills { gap: 6px; }
  .site-footer__bottom-inner { gap: 8px; font-size: 12px; }
}

/* Con i comandi ingranditi per il dito l'header cresce di una decina di pixel:
   i target di navigazione scendono di conseguenza. Sotto i 640 px il valore
   giusto è già quello del blocco 22.5, per questo qui si parte da 641. */
@media (hover: none) and (min-width: 641px) {
  section[id] { scroll-margin-top: 108px; }
}

/* ----- 22.8 · Puntatori senza hover (touch) -------------------------------- */
/* Su un touch screen il :hover non è uno stato di passaggio: resta appiccicato
   dopo il tocco. Qui gli effetti di passaggio vengono neutralizzati e, dove
   l'hover portava informazione — le foto dei tagli, che a riposo stavano al
   50% di opacità e si accendevano solo col mouse — lo stato di riposo viene
   portato al livello giusto. */
@media (hover: none) {
  /* con i comandi ingranditi l'header cresce di una decina di pixel:
     i target di navigazione scendono di conseguenza (sotto i 640 px il
     valore è già quello giusto, per questo qui parte da 641) */
  /* --- Aree toccabili ---
     La soglia dei 44 px non dipende dalla larghezza dello schermo ma dal dito:
     vale anche su un tablet da 1024 px, dove il sito resta a due colonne.
     Per questo sta qui e non in un breakpoint. */
  .site-header__brand { padding: 4px 2px; }
  .site-nav a { padding: 15px 0; }
  .site-header__cta { padding: 15px 20px; }
  .pill,
  .cut-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* la fascia trascinabile dello slider si alza: il cursore resta quello
     nativo, così il colore e la resa del controllo non cambiano */
  .cfg__range { height: 44px; }
  .dry__link { padding: 12px 0 15px; }
  .btn--footer { padding: 15px 22px; }
  .site-footer__social a { display: inline-block; padding: 11px 0; }
  .preserve__cta { padding: 5px 0 7px; }

  /* --- Stati di passaggio --- */
  .cut .cut__img { opacity: .72; }
  .cut:hover .cut__img { opacity: .72; transform: none; }

  .door:hover .door__media img { filter: none; }
  .process__tile:hover img { transform: none; }
  .tile:hover .tile__veil { opacity: 1; }
  .tile:hover .tile__img--brosmer-retail,
  .tile:hover .tile__img--brosmer-soaked { transform: none; filter: saturate(.6) contrast(1.08) brightness(.98); }
  .tile:hover .tile__img--seal     { transform: none; filter: saturate(.82) contrast(1.05); }
  .tile:hover .tile__img--loin     { transform: none; filter: saturate(.85) contrast(1.06); }
  .tile:hover .tile__img--ice      { transform: none; filter: saturate(.8) contrast(1.07) brightness(.97); }
  .tile:hover .tile__img--salinato { transform: none; filter: saturate(.86) contrast(1.06); }

  .preserve:hover { padding-left: 0; }

  .btn--sm:hover,
  .btn--gold.btn--lg:hover,
  .btn--ghost:hover,
  .btn--xl:hover,
  .btn--red:hover { transform: none; box-shadow: none; }
  .btn--gold:hover  { background: var(--gold); color: var(--gold-ink); }
  .btn--ghost:hover { background: transparent; border-color: rgba(255,255,255,.45); }
  .btn--ink:hover   { background: var(--ink-2); }
  .btn--sand:hover  { background: transparent; }
  .btn--red:hover   { background: var(--red); }
  .site-nav a:hover { color: #EAF3F6; border-bottom-color: rgba(245,208,112,0); }
  a:hover { color: var(--gold); }
  .dry__link:hover { color: #fff; }
  .site-footer__social a:hover { color: #7C959E; }
}
/* --------------------------------------------------------------------------
   23. Riduzione del movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}