/* Azienda Agricola Susanna Scarcelli — landing
   Colori misurati sul design del kit (confronta-design.py --colori e campioni sul design).
   Font: Newsreader (titoli, serif da display) e Source Sans 3 (testi), serviti dal sito. */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 600;
  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: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 400 600;
  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;
}

:root {
  /* fondi */
  --carta: #FDFDF7;          /* fondo della pagina */
  --carta-chiara: #FEFEFA;   /* intestazione, pulsante chiaro */
  --crema: #F8F8EC;          /* fascia «Come nasce» */
  --crema-2: #F7F7EB;        /* fascia della famiglia */
  --crema-3: #FDFCF5;        /* riga «Come acquistare» */
  --sabbia: #EAE2D2;
  --oro: #CFBA9A;
  --linea: #E4E5E3;          /* separatori sottili */
  /* verdi */
  --verde: #31451D;          /* pulsanti */
  --verde-scuro: #273817;    /* banner finale */
  --avorio: #FDF4DE;         /* testo sui verdi */
  /* testi */
  --inchiostro: #14180C;     /* titoli */
  --testo-scuro: #22283A;
  --testo: #3A3F51;
  --testo-2: #626675;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --testata: 64px;
  --pad: clamp(16px, 3.4vw, 48px);
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: var(--testata);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font: 400 1.0625rem/1.5 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.014em;
  color: var(--inchiostro);
}
p { margin: 0; text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
a { color: inherit; }
ol, ul { margin: 0; padding: 0; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 2px; }

.cont { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }

.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--verde); color: var(--avorio); padding: 10px 16px; border-radius: 4px;
  text-decoration: none; transition: top .15s ease;
}
.salta:focus { top: 12px; }

/* ── pulsanti ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 44px; padding: .78em 1.3em;
  font: 500 1.0625rem/1.2 var(--sans);
  text-decoration: none; border: 0; border-radius: 4px; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .14s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--verde { background: var(--verde); color: var(--avorio); box-shadow: 0 10px 24px -18px rgba(20, 24, 12, .9); }
.btn--chiaro { background: var(--carta-chiara); color: var(--inchiostro); }
.btn--grande { font-size: 1.1875rem; padding: .8em 1.45em; }
.btn__wa { width: 1.5em; height: auto; flex: none; }
.freccia {
  width: .82em; height: .82em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .btn--verde:hover { background: var(--verde-scuro); }
  .btn--chiaro:hover { background: var(--crema); }
}

.link-freccia {
  display: inline-flex; align-items: center; gap: .35em; min-height: 44px;
  font: 500 1.0625rem/1.2 var(--sans); color: var(--inchiostro);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  user-select: none; -webkit-user-select: none;
  transition: color .2s ease;
}
.link-freccia:active { opacity: .7; }
@media (hover: hover) and (pointer: fine) { .link-freccia:hover { color: var(--verde); } }

/* ── intestazione ─────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--carta-chiara);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.testata.scorsa { border-bottom-color: var(--linea); box-shadow: 0 8px 22px -18px rgba(20, 24, 12, .45); }
.testata__in {
  height: var(--testata);
  max-width: 1440px; margin-inline: auto;
  padding-inline: clamp(16px, 4.6vw, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.testata__nav { display: none; gap: clamp(28px, 4vw, 60px); }
.testata__nav a {
  position: relative; padding: 10px 0;
  font-size: 1.0625rem; color: var(--inchiostro); text-decoration: none;
}
.testata__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .testata__nav a:hover::after { transform: scaleX(1); } }
.btn--testata { font-size: 1rem; padding: .55em 1em; }

.testata__menu {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; min-width: 44px; padding: 0 8px 0 0;
  background: none; border: 0; cursor: pointer;
  font: 500 1rem/1 var(--sans); color: var(--inchiostro);
  user-select: none; -webkit-user-select: none;
}
.testata__menu:active { opacity: .7; }
.testata__menu-righe { position: relative; width: 22px; height: 12px; }
.testata__menu-righe span {
  position: absolute; left: 0; width: 22px; height: 1.6px; background: currentColor; border-radius: 2px;
  transition: transform .25s var(--ease-out);
}
.testata__menu-righe span:first-child { top: 0; }
.testata__menu-righe span:last-child { bottom: 0; }
.testata__menu[aria-expanded="true"] .testata__menu-righe span:first-child { transform: translateY(5.2px) rotate(45deg); }
.testata__menu[aria-expanded="true"] .testata__menu-righe span:last-child { transform: translateY(-5.2px) rotate(-45deg); }

.menu-telefono {
  position: fixed; left: 0; right: 0; top: var(--testata);
  height: calc(100vh - var(--testata)); height: calc(100dvh - var(--testata));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--carta);
  padding: 20px 20px 40px;
  display: flex; flex-direction: column; gap: 28px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s var(--ease-out);
}
.menu-telefono.aperto { opacity: 1; transform: none; transition-duration: .28s; }
.menu-telefono[hidden] { display: none; }
.menu-telefono nav a {
  display: block; padding: 16px 0;
  font: 500 2rem/1.1 var(--serif); color: var(--inchiostro); text-decoration: none;
  border-bottom: 1px solid var(--linea);
}
.menu-telefono nav a:active { color: var(--verde); }
.menu-telefono .btn { align-self: stretch; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: calc(100vh - var(--testata));
  min-height: calc(100svh - var(--testata));
  padding: 14px 16px 0;
}
.hero__sfondo { position: absolute; inset: -12% 0 0 0; z-index: -2; }
.hero__sfondo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__sfondo img { object-fit: cover; object-position: 62% 100%; }
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(253, 253, 247, .30) 0%,
    rgba(253, 253, 247, .62) 34%,
    rgba(253, 253, 247, .66) 56%,
    rgba(253, 253, 247, 0) 76%);
}
.hero__logo { width: min(54vw, 214px); height: auto; filter: drop-shadow(0 0 14px rgba(253, 253, 247, .85)); }
.hero__testo { max-width: 32rem; margin-top: 14px; }
.hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.04; }
.hero__sub { margin-top: 12px; font-size: 1.125rem; line-height: 1.35; color: var(--testo-scuro); }
.hero__piccolo { margin-top: 4px; font-size: .97rem; line-height: 1.4; color: var(--testo); }
.hero__azioni {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 24px; margin-top: 18px;
}
.hero__lattine { width: min(90%, 360px); margin-top: auto; padding-top: 18px; margin-bottom: max(12px, 2.5svh); }

/* ── garanzie ─────────────────────────────────────────────────────────── */
.garanzie { background: var(--carta); border-bottom: 1px solid var(--linea); }
.garanzie__lista {
  list-style: none; max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.garanzie__lista li {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 8px; text-align: center;
  font: 500 .74rem/1.25 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--testo-scuro);
}
.garanzie__lista li + li::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--linea);
}
.garanzie__lista img { width: auto; height: 24px; }

/* ── titoletti di sezione ─────────────────────────────────────────────── */
.titoletto { text-align: center; margin-bottom: clamp(22px, 2.6vw, 36px); }
.titoletto h2 { font-size: clamp(2.15rem, 4.3vw, 3.9rem); }
.titoletto p { text-wrap: balance; margin-top: 8px; font-size: clamp(1.0625rem, 1.55vw, 1.45rem); line-height: 1.35; color: var(--testo); }

/* ── formati ──────────────────────────────────────────────────────────── */
.formati { padding: clamp(40px, 3.9vw, 56px) 0 clamp(34px, 2.9vw, 42px); }
.formati__griglia { display: grid; grid-template-columns: 1fr; }
.formato {
  display: grid; grid-template-columns: 120px 1fr; grid-template-areas: "foto corpo" "btn btn";
  align-items: center; gap: 12px 18px;
  padding: 18px 0; border-top: 1px solid var(--linea);
}
.formato:last-child { border-bottom: 1px solid var(--linea); }
.formato__foto { grid-area: foto; aspect-ratio: 1; overflow: hidden; border-radius: 4px; }
.formato__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.formato__corpo { grid-area: corpo; }
.formato h3 { font-size: 2rem; }
.formato p { margin-top: 4px; font-size: 1.0625rem; line-height: 1.35; color: var(--testo); }
.formato__btn { grid-area: btn; width: 100%; }
.formati__nota {
  margin: 26px auto 0; max-width: 64rem; text-align: center; text-wrap: balance;
  font-size: clamp(1rem, 1.3vw, 1.22rem); line-height: 1.45; color: var(--testo-scuro);
}
.formati__nota strong { font-weight: 600; color: var(--inchiostro); }
.formati__nota-piccola { margin-top: 6px; text-align: center; text-wrap: balance; font-size: .92rem; color: var(--testo-2); }

/* ── come nasce ───────────────────────────────────────────────────────── */
.nasce { background: var(--crema); padding: clamp(40px, 3.6vw, 52px) 0 clamp(36px, 3vw, 44px); }
.nasce__lista {
  list-style: none;
  display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none;
  padding-bottom: 4px;
}
.nasce__lista::-webkit-scrollbar { display: none; }
.passo { position: relative; flex: 0 0 80%; scroll-snap-align: start; }
.passo__foto { aspect-ratio: 1.135; overflow: hidden; border-radius: 2px; background: var(--sabbia); }
.passo__foto img { width: 100%; height: 100%; object-fit: cover; }
.passo h3 { display: flex; align-items: baseline; gap: .42em; margin-top: 14px; font-size: 1.4rem; }
.passo .num { font-size: 1.5em; line-height: .9; }
.passo p { margin-top: 6px; padding-right: 10px; font-size: 1rem; line-height: 1.45; color: var(--testo-2); }

/* ── famiglia ─────────────────────────────────────────────────────────── */
.famiglia { background: var(--crema-2); display: grid; grid-template-columns: 1fr; overflow: hidden; }
.famiglia__foto { position: relative; aspect-ratio: 1 / 1; max-height: 440px; }
.famiglia__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.famiglia__testo { padding: 8px var(--pad) 0; }
.famiglia h2 { font-size: clamp(2rem, 3.3vw, 3.05rem); }
.famiglia__testo p { margin-top: 14px; max-width: 30rem; font-size: clamp(1.0625rem, 1.4vw, 1.3rem); line-height: 1.45; color: var(--testo-2); }
.famiglia__testo .famiglia__firma { margin-top: 16px; font-size: clamp(.95rem, 1.12vw, 1.1rem); color: var(--testo); }
.famiglia__scritta {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 18px var(--pad) 32px;
}
.famiglia__scritta .scritta { display: block; width: min(60vw, 230px); }
.famiglia__scritta .scritta img, .banner__scritta img { width: 100%; }
.famiglia__scritta .rametto { width: 64px; rotate: -16deg; }

/* ── come acquistare ──────────────────────────────────────────────────── */
.acquistare { background: var(--crema-3); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.acquistare__in { padding-block: 26px; }
.acquistare__titolo h2 { font-size: clamp(1.8rem, 2.5vw, 2.35rem); }
.acquistare__titolo p { margin-top: 4px; font-size: clamp(.98rem, 1.12vw, 1.08rem); color: var(--testo-2); }
.acquistare__passi { list-style: none; margin-top: 14px; }
.acquistare__passi li {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 0; border-top: 1px solid var(--linea);
  font-size: 1.0625rem; color: var(--testo-scuro);
}
.acquistare__passi .num {
  min-width: 2.1ch;
  font: 500 2.1rem/1 var(--serif); letter-spacing: -0.02em; color: var(--inchiostro);
}

/* ── banner finale ────────────────────────────────────────────────────── */
.banner { position: relative; isolation: isolate; overflow: hidden; background: var(--verde-scuro); color: var(--avorio); }
.banner__img img { width: 100%; height: 210px; object-fit: cover; object-position: 0% 50%; }
.banner__testo { padding: 26px var(--pad) 24px; }
.banner h2 { font-size: clamp(2rem, 3.4vw, 3.15rem); color: var(--avorio); }
.banner__testo p { margin-top: 10px; font-size: clamp(1.0625rem, 1.45vw, 1.35rem); line-height: 1.4; color: var(--avorio); }
.banner .btn { margin-top: 22px; }
.banner__scritta { display: block; width: 150px; margin: -14px var(--pad) 26px auto; }

/* ── piè di pagina ────────────────────────────────────────────────────── */
.piede { background: var(--carta); color: var(--testo-2); font-size: .97rem; padding: 30px 0 22px; }
.piede__in { display: grid; gap: 18px; }
.piede__nome { font-weight: 600; font-size: 1.06rem; color: var(--inchiostro); }
.piede__azienda p + p { margin-top: 3px; }
.piede__azienda a { color: var(--testo); text-underline-offset: 3px; }
.piede__link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px;
  padding-top: 14px; border-top: 1px solid var(--linea);
}
.piede__link a { display: inline-block; padding: 8px 0; color: var(--testo); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .piede__link a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.piede__fondo {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: .88rem;
}
.credit a { color: var(--testo-scuro); text-underline-offset: 3px; }

/* ── banner cookie ────────────────────────────────────────────────────── */
.cookie-bar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: flex; gap: .6rem; align-items: center; justify-content: center;
  padding: .15rem 1rem calc(.15rem + env(safe-area-inset-bottom, 0px));
  font-size: .82rem; line-height: 1.35; color: var(--testo);
  background: var(--carta); border-top: 1px solid var(--linea); opacity: .97;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { white-space: nowrap; }
.cookie-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar__x {
  min-width: 36px; min-height: 36px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--inchiostro); opacity: .65;
}
.cookie-bar__x:active { opacity: 1; transform: scale(.94); }

/* ── pagine di servizio (privacy, 404) ────────────────────────────────── */
.pagina { padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 88px); }
.pagina .cont { max-width: 860px; }
.pagina h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.pagina h2 { margin-top: 38px; font-size: clamp(1.5rem, 2.3vw, 2rem); }
.pagina p, .pagina li { margin-top: 12px; line-height: 1.6; color: var(--testo); }
.pagina ul { padding-left: 1.2em; }
.pagina .aggiornata { margin-top: 10px; font-size: .95rem; color: var(--testo-2); }
.pagina a { color: var(--verde); text-underline-offset: 3px; }
.pagina .btn { color: var(--avorio); }
.pagina .btn--chiaro { color: var(--inchiostro); border: 1px solid var(--linea); }

.vuota { text-align: center; }
.vuota .ramo { width: 180px; margin: 0 auto 10px; }
.vuota p { margin-left: auto; margin-right: auto; max-width: 30rem; }
.vuota .azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* ═════════════════════ MOVIMENTO (step 5-bis) ═════════════════════
   Curve e durate di Emil Kowalski (09 § 0-bis-2): entrate --ease-out, spostamenti --ease-in-out,
   hover ease sotto i 300 ms, pulsanti 140 ms; hero ed entrate allo scroll 0,8-1,1 s e 28-44 px.
   Solo transform/translate/scale e opacity (più clip-path sulle scritte a mano, con .reveal → .in). */
@keyframes entra-su { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes entra-logo { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes entra-lattine { from { opacity: 0; translate: 0 44px; } to { opacity: 1; translate: 0 0; } }
@keyframes paesaggio-arriva { from { scale: 1.08; } to { scale: 1; } }
@keyframes paesaggio-respira { from { scale: 1; } to { scale: 1.045; } }
@keyframes freccia-giu { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }

/* hero: il paesaggio non parte mai trasparente, si assesta e poi respira piano attorno alla pietra */
.hero__sfondo { will-change: transform; }
.hero__sfondo img {
  transform-origin: 60% 84%;
  animation: paesaggio-arriva 2.4s var(--ease-out) both, paesaggio-respira 16s var(--ease-in-out) 2.4s infinite alternate;
}
.hero__logo { animation: entra-logo 1s var(--ease-out) both; }
.hero h1 { animation: entra-su .9s var(--ease-out) .14s both; }
.hero__sub { animation: entra-su .8s var(--ease-out) .26s both; }
.hero__piccolo { animation: entra-su .8s var(--ease-out) .32s both; }
.hero__azioni { animation: entra-su .8s var(--ease-out) .42s both; }
.hero__lattine { will-change: transform; animation: entra-lattine 1.1s var(--ease-out) .3s both; }
.link-freccia .freccia--giu { animation: freccia-giu 2s var(--ease-in-out) 1.8s infinite; }

/* sezioni che arrivano scorrendo: una volta sola (main.js toglie l'osservatore) */
.js .reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 70ms; }
.js .reveal.d2 { transition-delay: 140ms; }
.js .reveal.d3 { transition-delay: 210ms; }
.js .reveal.reveal--foto { transform: scale(1.06); transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out); }
.js .reveal.reveal--foto.in { transform: none; }
/* le scritte a mano «si scrivono» da sinistra a destra (sempre .reveal → .in, col suo fallback) */
.js .reveal.reveal--scritta { opacity: 1; transform: none; }
.js .reveal--scritta img { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--ease-in-out) .25s; }
.js .reveal--scritta.in img { clip-path: inset(0 0 0 0); }

/* il numero che sale: posto riservato, niente salti nella riga */
.conta { font-variant-numeric: tabular-nums; }

/* foto che si avvicinano col mouse, frecce che indicano la direzione */
.formato__foto img, .passo__foto img { transition: transform .28s var(--ease-out); }
.btn .freccia { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .formato:hover .formato__foto img, .passo:hover .passo__foto img { transform: scale(1.045); }
  .btn:hover .freccia { transform: translate(2px, -2px); }
}

/* menu da telefono: le voci entrano una dopo l'altra; all'uscita tutto insieme e più in fretta */
.menu-telefono nav a { opacity: 0; transform: translateY(14px); transition: opacity .15s ease, transform .18s var(--ease-out); }
.menu-telefono.aperto nav a {
  opacity: 1; transform: none;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.menu-telefono.aperto nav a:nth-child(2) { transition-delay: 50ms; }
.menu-telefono.aperto nav a:nth-child(3) { transition-delay: 100ms; }
.menu-telefono.aperto nav a:nth-child(4) { transition-delay: 150ms; }
.menu-telefono.aperto .btn { animation: entra-su .45s var(--ease-out) .2s both; }

/* riduci animazioni: meno movimento, non zero (restano le dissolvenze e i cambi di colore) */
@media (prefers-reduced-motion: reduce) {
  .hero__sfondo img, .link-freccia .freccia--giu { animation: none; }
  .hero__logo, .hero h1, .hero__sub, .hero__piccolo, .hero__azioni, .hero__lattine { animation-name: dissolvi; animation-duration: .6s; }
  .js .reveal, .js .reveal.reveal--foto { transform: none; transition: opacity .6s ease; }
  .js .reveal--scritta img { clip-path: none; }
  .js .reveal.reveal--scritta { opacity: 0; transition: opacity .7s ease; }
  .js .reveal.reveal--scritta.in { opacity: 1; }
  .menu-telefono, .menu-telefono nav a { transform: none; }
  .menu-telefono.aperto .btn { animation-name: dissolvi; }
  .formato:hover .formato__foto img, .passo:hover .passo__foto img { transform: none; }
}

/* ═════════════════════ COMPUTER (da 900 px) ═════════════════════ */
@media (min-width: 900px) {
  :root { --testata: 68px; }
  .testata__nav { display: flex; }
  .testata__menu { display: none; }
  .btn--testata { font-size: 1.0625rem; padding: .6em 1.15em; }

  /* hero: come il design, il logo al centro in alto, testi in basso a sinistra, lattine a destra */
  .hero {
    display: block; text-align: left; padding: 0;
    min-height: 0; height: clamp(560px, 54.4vw, 860px);
  }
  .hero__sfondo img { object-position: 50% 100%; }
  .hero__velo {
    background:
      radial-gradient(ellipse 26% 40% at 49% 30%, rgba(253, 253, 247, .72), rgba(253, 253, 247, .3) 60%, rgba(253, 253, 247, 0) 82%),
      radial-gradient(ellipse 44% 46% at 18% 80%, rgba(253, 253, 247, .78), rgba(253, 253, 247, .4) 58%, rgba(253, 253, 247, 0) 86%),
      linear-gradient(90deg, rgba(253, 253, 247, .4) 0%, rgba(253, 253, 247, .22) 34%, rgba(253, 253, 247, 0) 52%);
  }
  .hero__logo {
    position: absolute; left: 49%; top: 3.6%;
    width: auto; height: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 20px rgba(253, 253, 247, .9));
  }
  .hero__testo { position: absolute; left: clamp(32px, 4.9vw, 92px); bottom: 7%; max-width: none; margin: 0; }
  .hero h1 { font-size: clamp(2.6rem, 4.3vw, 4.2rem); line-height: 1.02; }
  .hero__sub { margin-top: 14px; font-size: clamp(1.15rem, 1.75vw, 1.7rem); }
  .hero__piccolo { margin-top: 6px; font-size: clamp(1rem, 1.35vw, 1.32rem); }
  .btn--grande { font-size: clamp(1.1875rem, 1.45vw, 1.35rem); }
  .link-freccia { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
  .hero__azioni { justify-content: flex-start; gap: 12px 34px; margin-top: 26px; }
  .hero__lattine {
    position: absolute; right: 2.6%; bottom: 5%;
    width: 43.5%; margin: 0; padding: 0;
  }

  .garanzie__lista li { flex-direction: row; gap: 18px; padding: 22px 12px; font-size: clamp(.9rem, 1.1vw, 1.05rem); letter-spacing: .06em; }
  .garanzie__lista img { height: 30px; }

  .formati__griglia { grid-template-columns: 1fr 1.32fr 1fr; }
  .formato {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0 clamp(14px, 1.7vw, 26px); border-top: 0; gap: 0;
  }
  .formato:last-child { border-bottom: 0; }
  .formato + .formato { border-left: 1px solid var(--linea); }
  .formato__foto {
    width: 100%; aspect-ratio: auto; height: clamp(290px, 25vw, 380px); border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%);
            mask-image: linear-gradient(180deg, transparent 0, #000 16%);
  }
  .formato__corpo { margin-top: 14px; }
  .formato--centro .formato__foto img { object-position: 50% 28%; }
  .formato h3 { font-size: clamp(2.3rem, 3.3vw, 3.2rem); }
  .formato p { font-size: clamp(1.08rem, 1.45vw, 1.38rem); }
  .formato__btn { width: auto; margin-top: 20px; font-size: clamp(1.05rem, 1.35vw, 1.3rem); padding: .8em 1.5em; }
  .formati__nota { font-size: clamp(1.05rem, 1.45vw, 1.38rem); }
  .formati__nota-piccola { font-size: clamp(.92rem, 1.05vw, 1.02rem); }
  .formati__nota { margin-top: clamp(28px, 2.8vw, 40px); }

  .nasce__lista {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    overflow: visible; scroll-snap-type: none; padding-bottom: 0;
  }
  .passo { padding: 0 clamp(8px, .9vw, 14px); }
  .passo + .passo::before {
    content: ""; position: absolute; left: 0; bottom: 4px; height: 72px; width: 1px; background: var(--linea);
  }
  .passo h3 { margin-top: 18px; font-size: clamp(1.3rem, 1.75vw, 1.65rem); }
  .passo p { font-size: clamp(1rem, 1.18vw, 1.14rem); }

  .famiglia {
    grid-template-columns: minmax(290px, 25%) 1fr 22%; align-items: center;
    min-height: clamp(320px, 26vw, 380px);
  }
  .famiglia__foto { align-self: stretch; aspect-ratio: auto; max-height: none; }
  .famiglia__foto img {
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
  }
  .famiglia__testo { padding: 32px clamp(12px, 2vw, 32px) 32px clamp(24px, 3.4vw, 56px); }
  .famiglia__scritta { flex-direction: column; gap: 6px; padding: 30px var(--pad) 30px 0; }
  .famiglia__scritta .scritta { width: min(100%, 290px); }
  .famiglia__scritta .rametto { width: 86px; margin-left: 50px; }

  .acquistare__in { display: flex; align-items: center; gap: clamp(28px, 4vw, 72px); padding-block: clamp(22px, 2.3vw, 34px); }
  .acquistare__titolo { flex: none; }
  .acquistare__passi { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 0; }
  .acquistare__passi li { border-top: 0; padding: 6px clamp(16px, 2.4vw, 40px); font-size: clamp(1rem, 1.38vw, 1.32rem); }
  .acquistare__passi li + li { border-left: 1px solid var(--linea); }
  .acquistare__passi .num { font-size: clamp(2.2rem, 3vw, 2.9rem); }

  .banner { display: flex; align-items: center; min-height: clamp(320px, 25vw, 380px); }
  .banner__img img { position: absolute; inset: 0; z-index: -1; height: 100%; object-position: 0% 36%; }
  .banner__testo { margin-left: 48%; max-width: 47%; padding: 36px 0; }
  .banner__testo p { max-width: 30em; }
  .banner .btn { margin-top: 26px; }
  .banner__scritta { position: absolute; margin: 0; top: auto; bottom: 14%; right: 3.4%; width: clamp(150px, 12.5vw, 210px); }

  .piede { padding: 36px 0 24px; }
  .piede__in { grid-template-columns: 1fr 1fr; align-items: start; gap: 0; }
  .piede__link {
    justify-content: flex-end; gap: 6px 44px;
    padding: 6px 0 6px 40px; border-top: 0; border-left: 1px solid var(--linea); min-height: 64px;
  }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .hero__testo { bottom: 5%; }
  .hero h1 { font-size: 2.5rem; }
  .hero__lattine { width: 41%; }
}