/* ==========================================================================
   AZIENDA AGRICOLA MAGLIANO — identità del cliente
   🔴 Colori e caratteri NON scelti da noi: campionati dalle schede prodotto
   ZAFFIRO che ha mandato il cliente (Resources/Step 2 - Prodotti/).
     blu etichetta  #0A0E27   ·  oro collarino #B17631 → #E2AF68
     avorio fondo   #FEEFCE
   Niente nero, niente fondo scuro pieno: il fondo è avorio, il blu è il suo.
   ========================================================================== */

@font-face{
  font-family:'Cinzel';                 /* la lettera romana della sua etichetta */
  src:url('../font/cinzel-latin.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'Lora';
  src:url('../font/lora-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}

:root{
  --blu:#0A0E27;
  --blu-alto:#141A3C;
  --blu-linea:#2A3157;

  --oro:#B17631;          /* l'oro del collarino: filetti, bordi, segni (3,46 sull'avorio → basta per gli elementi, non per il testo) */
  --oro-testo:#946024;    /* 🔴 l'oro quando è TESTO su avorio: 4,81 — il #B17631 non arriva a 4,5 */
  --oro-chiaro:#E2AF68;   /* l'oro in luce, per il testo sul blu: 9,56 */
  --oro-fioco:#8C6634;
  --oro-su-film:#7E5528;  /* 🔴 l'oro dell'occhiello SOPRA il video: 5,56 nel punto
                            piu' chiaro del ciclo. Con #946024 restava a 4,52, e
                            due centesimi sopra la soglia non sono un margine. */

  --avorio:#FBF3E3;
  --avorio-alto:#FFFAF0;
  --avorio-linea:#E6D9BF;

  --inchiostro:#2A2016;   /* bruno scuro, non nero */
  --seppia:#6E5C43;

  --titolo:'Cinzel',Georgia,'Times New Roman',serif;
  --testo:'Lora',Georgia,'Times New Roman',serif;

  --largo:min(1240px,90vw);
  --stretto:min(760px,90vw);

  /* ══ RUOLI ══════════════════════════════════════════════════════════════
     🔴 I nomi qui sopra sono COLORI, questi sono MESTIERI. I componenti
     usano solo questi, e una sezione puo' ribaltarli tutti con .chiara.
     Cosi' lo stesso bottone e lo stesso filetto funzionano su blu e su
     avorio senza scrivere due volte la regola. */
  --fiore:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2064%22%3E%3Cg%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.1%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M32%2055C27%2043%2027%2027%2032%2013c5%2014%205%2030%200%2042Z%22/%3E%3Cpath%20d=%22M32%2055C23%2045%2016%2032%2014%2019c8%2011%2014%2024%2018%2036Z%22/%3E%3Cpath%20d=%22M32%2055c9-10%2016-23%2018-36-8%2011-14%2024-18%2036Z%22/%3E%3Cpath%20d=%22M32%2055C21%2050%2011%2041%206%2031c10%206%2020%2014%2026%2024Z%22/%3E%3Cpath%20d=%22M32%2055c11-5%2021-14%2026-24-10%206-20%2014-26%2024Z%22/%3E%3C/g%3E%3Cg%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.6%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M32%2048V27%22/%3E%3Cpath%20d=%22M32%2046%2024%2030%22/%3E%3Cpath%20d=%22M32%2046l8-16%22/%3E%3C/g%3E%3C/svg%3E");
  --sfondo:var(--blu);
  --sfondo-alto:var(--blu-alto);
  --filo:var(--blu-linea);
  --testo-forte:var(--avorio);
  --testo-molle:#C3B69E;      /* attenuato SUL BLU: 8,29 — il seppia qui sparirebbe */
  --oro-vivo:var(--oro-chiaro);
  --oro-pieno:var(--oro-chiaro);
  --su-oro:var(--blu);        /* cosa si scrive SOPRA l'oro pieno */
}

/* la sezione che ribalta tutto: avorio con l'inchiostro, come prima */
.chiara{
  /* 🔴 Questi devono puntare ai COLORI, mai a se stessi: un token
     auto-referenziale e' invalido e sparisce (filetti, oro e il binario
     del cursore erano spariti proprio per questo). */
  --sfondo:var(--avorio);
  --sfondo-alto:var(--avorio-alto);
  --filo:var(--avorio-linea);
  --testo-forte:var(--inchiostro);
  --testo-molle:var(--seppia);
  --oro-vivo:var(--oro-testo);
  --oro-pieno:var(--oro-testo);
  --su-oro:var(--avorio-alto);
  background:var(--sfondo); color:var(--testo-forte);
}
/* fascia leggermente sollevata, per dare ritmo senza cambiare colore */
.alta{background:var(--sfondo-alto)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--sfondo); color:var(--testo-forte);
  font-family:var(--testo); font-size:clamp(16px,.35vw + 15px,17.5px);
  line-height:1.72; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titolo); font-weight:600; line-height:1.14; margin:0; letter-spacing:.03em; text-wrap:balance}
p{margin:0}
ul,ol,dl{margin:0; padding:0; list-style:none}

.salta{position:absolute;left:-9999px;top:0;background:var(--blu);color:var(--avorio);padding:.7rem 1rem;z-index:99}
.salta:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--oro); outline-offset:3px}

/* filetto d'oro: il segno che ricorre sull'etichetta */
.filetto{width:3.2rem; height:1px; background:var(--oro-vivo); display:block}

/* ---------- Testata ----------------------------------------------------- */
.testata{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:1.1rem clamp(1.1rem,4vw,3rem); color:var(--testo-forte);
  transition:background .35s ease, color .35s ease, padding .35s ease, box-shadow .35s ease;
}
/* 🔴 Sopra il film (fondo nero) la testata e' AVORIO: l'inchiostro scuro
   sparirebbe. Appena il film e' passato torna scura, con .posata. */
.testata:not(.posata):not(:focus-within){color:var(--avorio-alto)}
.testata:not(.posata) .menu a:hover{border-bottom-color:var(--oro-chiaro)}
/* 🔴 Misurato sui 37 fotogrammi: il fiore occupa la fascia x 0,20-0,78 della
   testata e li' il contrasto crolla a 1,18-1,81 con QUALSIASI colore. Solo gli
   estremi restano neri (14,28). Quindi sul film stanno marchio e WhatsApp; il
   menu compare quando la testata si posa sull'avorio. Con :focus-within si
   posa anche da tastiera, cosi' il menu resta raggiungibile senza scorrere. */
.testata:not(.posata):not(:focus-within) .menu{opacity:0; visibility:hidden}
.menu{transition:opacity .3s ease, visibility .3s ease}
.testata.posata, .testata:focus-within{
  background:color-mix(in srgb,var(--blu) 94%,transparent);
  backdrop-filter:blur(12px); color:var(--avorio);
  border-bottom:1px solid var(--blu-linea); padding-top:.7rem; padding-bottom:.7rem;
}
.marchio{text-decoration:none; display:grid; line-height:1}
.marchio-alto{font-family:var(--testo); font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; opacity:.75}
.marchio-basso{font-family:var(--titolo); font-weight:700; font-size:1.24rem; letter-spacing:.14em; margin-top:.36rem; text-transform:uppercase}
.menu{display:flex; gap:1.8rem}
.menu a{
  text-decoration:none; font-family:var(--titolo); font-weight:400;
  font-size:.72rem; letter-spacing:.19em; text-transform:uppercase;
  opacity:.85; padding:.35rem 0; border-bottom:1px solid transparent;
}
.menu a:hover{opacity:1; border-bottom-color:var(--oro)}
@media (max-width:980px){ .menu{display:none} }

/* ---------- Bottoni ----------------------------------------------------- */
.bottone{
  display:inline-block; text-decoration:none;
  font-family:var(--titolo); font-weight:600; font-size:.78rem;
  letter-spacing:.17em; text-transform:uppercase;
  padding:1.05rem 1.9rem; border:1px solid var(--oro-vivo); color:var(--oro-vivo);
  background:transparent; transition:background .2s ease, color .2s ease;
}
/* 🔴 Il pieno usa --oro-testo, non --oro: avorio su #B17631 fa 3,67 e non basta
   per un testo piccolo maiuscolo. Su #946024 sale a 5,1. */
.bottone:hover{background:var(--oro-pieno); color:var(--su-oro); border-color:var(--oro-pieno)}
.bottone-pieno{background:var(--oro-pieno); border-color:var(--oro-pieno); color:var(--su-oro)}
.bottone-pieno:hover{background:var(--avorio); border-color:var(--avorio); color:var(--blu)}
.chiara .bottone-pieno:hover{background:#7A4F1C; border-color:#7A4F1C; color:var(--avorio-alto)}
.bottone-piccolo{padding:.7rem 1.15rem; font-size:.68rem}
.su-blu{border-color:var(--oro-vivo); color:var(--oro-vivo)}
.su-blu:hover{background:var(--oro-vivo); color:var(--su-oro)}

/* ==========================================================================
   1 · APERTURA — blu del cliente a sinistra, la sua boccetta a destra
   ========================================================================== */
/* 🔴 Apertura CHIARA, non blu: il logo del cliente ha la scritta MAGLIANO quasi
   nera e sul blu sparisce. Il suo marchio detta il fondo, non il contrario. */
/* 🔴 il fondo combacia col filmato E col sito: blu dell'etichetta. Se
   l'immagine tarda non si vede nessun lampo di colore estraneo. */
.hero{
  position:relative; height:100svh; background:var(--blu); overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:0;
}
/* 🎬 IL FILM IN APERTURA
   Il croco si apre e si richiude in ciclo (andata e ritorno montate insieme:
   il punto di giunzione non esiste). Sta SOTTO, il marchio sta SOPRA.
   Il velo d'avorio non è decorazione: senza, la scritta MAGLIANO del suo
   logo è quasi nera su un fondo di terra e non si legge. È più fitto al
   centro, dove sta il testo, e si apre ai bordi, dove si vede il fiore. */
.hero-film{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--blu)}
.hero-video{
  width:100%; height:100%; object-fit:cover; display:block; background:var(--blu);
  transform:scale(1.02);
}
/* 🔴 Misurato sui 36 fotogrammi del filmato nuovo: il letto di fiori copre
   TUTTA la scala di luminosita', e in testata nessun colore piatto arriva a
   4,5 (avorio 1,57 · inchiostro 1,00 · oro 1,00). Serve un velo, e serve
   BLU DELLA SUA ETICHETTA, non nero: l'avorio chiede almeno 0,56, qui sta
   a 0,80 con margine. Sotto i 165px il fiore torna libero. */
.hero-velo{position:absolute; inset:0; pointer-events:none}
.apertura-testo{background:var(--sfondo); padding:clamp(2.6rem,7vh,4.5rem) clamp(1.2rem,5vw,2rem) 0}
.hero-dentro{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  color:var(--testo-forte); margin:0 auto;
}
.hero-dentro > *{max-width:var(--stretto); width:100%}
.apertura-testo .occhiello{color:var(--oro-vivo); justify-content:center}
.apertura-testo h1{font-size:clamp(2rem,3.6vw,3.2rem); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.2; max-width:16ch; margin:0 auto 1.4rem; color:var(--testo-forte)}
.apertura-testo h1 em{font-style:normal; display:block; color:var(--oro-vivo);
  font-size:.58em; letter-spacing:.14em; margin-top:.7rem; font-weight:400}

.marchio-sboccia{
  position:relative; width:min(520px,88%,48svh); aspect-ratio:844/526;
  margin:0 auto clamp(1.4rem,3vh,2.4rem);
}
.marchio-sboccia img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
/* 🔴 L'animazione esiste SOLO mentre c'è la classe .parte, che il JS mette
   all'avvio e toglie dopo 2,6 s. Fuori da quella finestra il marchio è
   semplicemente visibile: nessuna regola CSS può nasconderlo. */
.marchio-sboccia.parte .st-croco{animation:sboccia    1.7s cubic-bezier(.16,.9,.28,1.02) both}
.marchio-sboccia.parte .st-ulivo{animation:apri-fronde 2.0s cubic-bezier(.2,.85,.3,1) both}
.marchio-sboccia.parte .st-grano{animation:alza-grano  2.2s cubic-bezier(.2,.85,.3,1) both}
.marchio-sboccia.parte .st-testo{animation:sale-nome   2.6s cubic-bezier(.22,.7,.3,1) both}

/* il fiore parte quasi chiuso, dalla sua base, e si apre scavallando appena */
@keyframes sboccia{
  0%  {opacity:0; transform:scale(.10) rotate(-24deg)}
  14% {opacity:1}
  68% {opacity:1; transform:scale(1.07) rotate(3deg)}
  100%{opacity:1; transform:scale(1) rotate(0)}
}
@keyframes apri-fronde{      /* poi le fronde d'ulivo si allargano */
  0%,24%{opacity:0; transform:scaleX(.18)}
  100%  {opacity:1; transform:scaleX(1)}
}
@keyframes alza-grano{       /* poi salgono le spighe e si chiude l'arco */
  0%,32%{opacity:0; transform:translateY(14%) scale(.78)}
  100%  {opacity:1; transform:none}
}
@keyframes sale-nome{        /* ultimo il nome — e da lì resta sempre */
  0%,56%{opacity:0; transform:translateY(20px)}
  100%  {opacity:1; transform:none}
}
.marchio-sboccia .st-croco{transform-origin:50% 60%}
.marchio-sboccia .st-ulivo{transform-origin:50% 60%}
.marchio-sboccia .st-grano{transform-origin:50% 72%}
/* 🔴 In apertura NON c'è nessuna fotografia: c'è il suo marchio che sboccia,
   grande e al centro. La boccetta del profumo sta nella sezione Zaffiro,
   che è il suo posto: il sito vende zafferano ai ristoranti. */
.hero-dentro{display:flex; flex-direction:column; align-items:center; width:var(--stretto)}
.occhiello{
  font-family:var(--titolo); font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--oro-chiaro); margin-bottom:1.6rem; display:flex; align-items:center; gap:1rem;
}
.occhiello::before{content:''; width:2.4rem; height:1px; background:currentColor; flex:none}
/* l'oro chiaro è pensato per il blu: sull'avorio non si legge (1,5) */
.hero .occhiello{color:var(--oro-su-film); justify-content:center; margin-bottom:clamp(.9rem,2vh,1.6rem)}
.hero h1{
  font-size:clamp(1.9rem,3.2vw,3rem); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.2; max-width:16ch; margin-bottom:clamp(1rem,2vh,1.4rem);
  color:var(--testo-forte);
}
.hero h1 em{font-style:normal; display:block; color:var(--oro-vivo); font-size:.58em; letter-spacing:.14em; margin-top:.7rem; font-weight:400}
.hero-sommario{max-width:52ch; color:var(--testo-molle); margin-bottom:clamp(1.6rem,3vh,2.4rem)}
.hero .bottone{align-self:center}

.fascia-fatti{background:var(--sfondo-alto); padding:0 clamp(1.2rem,5vw,2rem) clamp(1.6rem,4vh,2.6rem)}
.fascia-fatti .fatti{margin:0 auto; max-width:var(--stretto)}
.fatti{
  border-top:1px solid var(--filo); margin-top:0;
  display:grid; grid-template-columns:repeat(3,1fr); width:100%;
}
.fatti li{padding:clamp(1rem,2.4vh,1.5rem) 1rem 0}
.fatti b{
  display:block; font-family:var(--titolo); font-weight:700; line-height:1;
  font-size:clamp(1.35rem,2.4vw,1.95rem); color:var(--oro-vivo); font-variant-numeric:tabular-nums;
}
.fatti span{display:block; margin-top:.55rem; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--testo-molle)}

@media (max-width:640px){
  .fatti{grid-template-columns:1fr}
  .fatti li{padding:1rem 0; border-bottom:1px solid var(--filo); display:flex; align-items:baseline; gap:1rem}
  /* 22/09: il numero non va piu' a capo («200-300 / G») e non si stringe:
     8ch = la larghezza di «200-300 g», cosi' le tre diciture partono allineate
     con 18 px di luce. Sotto i 360 px il numero si rimpicciolisce appena. */
  .fatti b{flex:none; min-width:8ch; white-space:nowrap}
  .fatti span{margin-top:0}
}
@media (max-width:359px){
  .fatti b{font-size:1.2rem}
}

/* ==========================================================================
   Fasce
   ========================================================================== */
.fascia{width:var(--largo); margin:0 auto; padding:clamp(3.8rem,8vw,7rem) 0}
.fascia + .fascia{border-top:1px solid var(--filo)}
.titolo-sezione{
  font-size:clamp(1.6rem,3vw,2.5rem); text-transform:uppercase; letter-spacing:.075em;
  margin-bottom:1.6rem; color:var(--testo-forte);
}
.titolo-sezione + .filetto{margin-bottom:2rem}
.fascia p{color:var(--testo-molle); max-width:58ch}
.fascia p + p{margin-top:.95rem}
.guida{font-size:clamp(1.1rem,1.7vw,1.32rem); line-height:1.5; color:var(--testo-forte) !important; max-width:28ch}

.js [data-rivela]{opacity:0; transform:translateY(20px)}
.js [data-rivela].dentro{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}

/* le quattro ragioni: schede su avorio, filetto d'oro in cima */
.ragioni{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.2vw,1.8rem)}
.ragione{
  background:var(--sfondo-alto); border:1px solid var(--filo);
  padding:clamp(1.5rem,2.8vw,2.2rem); display:flex; flex-direction:column;
}
.ragione .numero{
  font-family:var(--titolo); font-weight:700; font-size:.7rem; letter-spacing:.24em;
  color:var(--oro-vivo); margin-bottom:1rem;
}
.ragione h2{font-size:clamp(1.3rem,2.1vw,1.7rem); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.9rem}
.ragione p{color:var(--testo-molle)}
.ragione-figura{margin:1.5rem 0 0; overflow:hidden; background:var(--sfondo-alto); border:1px solid var(--filo)}
/* 🔴 Stessa proporzione per tutte: era questo a far sembrare la sezione
   disordinata — una foto quadrata, una verticale e una orizzontale in fila. */
.ragione-figura img,
.ragione-figura video{width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; display:block}
#ragione-4 .ragione-figura img,
#ragione-4 .ragione-figura video{object-position:50% 46%}
.ragione .bottone{margin-top:1.6rem; align-self:flex-start}
.punti{margin-top:1.3rem; display:grid; gap:.6rem}
.punti li{position:relative; padding-left:1.5rem; color:var(--testo-forte); font-size:.95rem}
.punti li::before{content:''; position:absolute; left:0; top:.72em; width:.7rem; height:1px; background:var(--oro)}
.rilievo{color:var(--testo-forte) !important; font-family:var(--titolo); font-size:1.05rem; letter-spacing:.03em; margin-top:1.1rem !important}
@media (max-width:820px){ .ragioni{grid-template-columns:1fr} }

/* il calcolatore */
/* ── La scheda di pesatura ──────────────────────────────────────────────
   Lo zafferano si vende al grammo: questa sezione ha l'aria dello strumento,
   non del riquadro qualunque. Filo d'oro spesso in cima, cifre in Cinzel
   allineate a cifre tabulari, tre celle divise da filetti verticali. */
.calcolatore{
  margin-top:1.8rem; background:var(--sfondo-alto);
  border:1px solid var(--filo); border-top:2px solid var(--oro-vivo);
  padding:clamp(1.3rem,2.6vw,2rem);
}
.calcolatore-titolo{
  color:var(--testo-molle) !important; font-family:var(--titolo);
  font-size:.68rem; letter-spacing:.24em; line-height:1.5; text-transform:uppercase;
}
.cursore{margin:1.1rem 0 1.6rem}
.cursore input[type=range]{width:100%; -webkit-appearance:none; appearance:none; background:transparent; height:44px; cursor:pointer; display:block}
.cursore input[type=range]::-webkit-slider-runnable-track{height:2px; background:linear-gradient(to right,var(--oro-vivo),var(--filo))}
.cursore input[type=range]::-moz-range-track{height:2px; background:linear-gradient(to right,var(--oro-vivo),var(--filo))}
.cursore input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--oro-vivo); border:3px solid var(--sfondo-alto); margin-top:-9px; box-shadow:0 0 0 1px var(--oro-vivo)}
.cursore input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--oro-vivo); border:3px solid var(--sfondo-alto); box-shadow:0 0 0 1px var(--oro-vivo)}
.cursore output{
  display:block; margin-top:.5rem; font-family:var(--titolo); font-weight:700;
  font-size:1.5rem; letter-spacing:.04em; font-variant-numeric:tabular-nums;
  color:var(--testo-forte);
}
/* le tre letture: etichetta sopra, cifra sotto, filetti a dividere */
.risultati{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--filo); border-bottom:1px solid var(--filo);
  margin-bottom:1.6rem;
}
.risultati > div{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:.55rem; text-align:center; padding:1.2rem .6rem 1.3rem;
  border-left:1px solid var(--filo);
}
.risultati > div:first-child{border-left:none}
.risultati dt{font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--testo-molle); line-height:1.45}
.risultati dd{
  margin:0; font-family:var(--titolo); font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1; color:var(--oro-vivo);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
@media (max-width:520px){
  .risultati{grid-template-columns:1fr}
  .risultati > div{flex-direction:row; justify-content:space-between; text-align:left;
    border-left:none; border-top:1px solid var(--filo); padding:.9rem .2rem}
  .risultati > div:first-child{border-top:none}
  .risultati dt{max-width:60%}
}
#calc-whatsapp{margin-top:1.4rem; display:block; text-align:center}

/* passi */
/* ── Il percorso in quattro passi ───────────────────────────────────────
   Non un elenco: una strada. Quattro pastiglie d'oro legate da una linea
   punteggiata, l'ultima piena perche' e' l'arrivo. In colonna sul telefono,
   con la linea che diventa verticale. */
.elenco-passi{display:grid; gap:0; counter-reset:passo}
.elenco-passi li{
  position:relative; display:grid; grid-template-columns:auto 1fr;
  gap:1.3rem; align-items:start; padding:0 0 2.1rem;
}
.elenco-passi li:last-child{padding-bottom:0}
.elenco-passi b{
  position:relative; z-index:1; flex:none;
  width:2.9rem; height:2.9rem; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--titolo); font-weight:700; font-size:.82rem; letter-spacing:.06em;
  color:var(--oro-vivo); background:var(--sfondo); border:1px solid var(--oro-vivo);
}
.elenco-passi li:last-child b{background:var(--oro-vivo); color:var(--su-oro)}
/* la linea che lega: parte dal centro della pastiglia e scende al passo dopo */
.elenco-passi li:not(:last-child)::before{
  content:''; position:absolute; left:1.45rem; top:2.9rem; bottom:0; width:0;
  border-left:1px dashed var(--oro-vivo); opacity:.55;
}
.elenco-passi p{color:var(--testo-forte); font-size:clamp(1rem,1.5vw,1.12rem); padding-top:.55rem}

@media (min-width:860px){
  .elenco-passi{grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,2rem)}
  .elenco-passi li{grid-template-columns:1fr; justify-items:center; text-align:center; gap:1.1rem; padding:0}
  .elenco-passi li:not(:last-child)::before{
    left:calc(50% + 1.45rem); right:calc(-50% + 1.45rem); top:1.45rem; bottom:auto;
    width:auto; height:0; border-left:0; border-top:1px dashed var(--oro-vivo);
  }
  .elenco-passi p{padding-top:0; max-width:22ch}
}


/* consegne */
.consegne-griglia{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.distanze li{padding:1.25rem 0; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-bottom:1px solid var(--filo)}
.distanze li:first-child{border-top:1px solid var(--filo)}
.distanze b{font-family:var(--titolo); font-weight:700; font-size:1.3rem; letter-spacing:.04em; color:var(--oro-vivo)}
.distanze span{font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:var(--testo-molle)}
@media (max-width:860px){ .consegne-griglia{grid-template-columns:1fr} }

/* prodotti */
.prodotti-griglia{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.8rem); margin-bottom:2.4rem}
.prodotti-griglia article{background:var(--sfondo-alto); border:1px solid var(--filo); overflow:hidden}
.prodotti-griglia img{width:100%; aspect-ratio:4/3; object-fit:cover}
.prodotti-griglia .testo{padding:1.25rem 1.4rem 1.6rem}
.prodotti-griglia h3{font-size:1.1rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:.5rem}
.prodotti-griglia p{font-size:.93rem}
.ortaggi{display:flex; flex-wrap:wrap; gap:.5rem}
.ortaggi li{font-size:.8rem; padding:.42rem .9rem; border:1px solid var(--filo); color:var(--testo-molle); background:var(--sfondo-alto)}
@media (max-width:820px){ .prodotti-griglia{grid-template-columns:1fr} .prodotti-griglia img{aspect-ratio:16/9} }

/* ==========================================================================
   ZAFFIRO — la vetrina del profumo, nel blu e nell'oro dell'etichetta
   ========================================================================== */
.zaffiro{background:var(--sfondo); color:var(--testo-forte); width:100%; padding:clamp(3.5rem,8vw,6.5rem) clamp(1.1rem,4vw,3rem)}
.zaffiro-dentro{width:var(--largo); margin:0 auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
/* anche qui: intera, mai tagliata */
.zaffiro-boccetta{margin:0; background:var(--sfondo-alto)}
.zaffiro-boccetta img{width:100%; height:auto}
.zaffiro h2{font-size:clamp(2.4rem,5vw,4rem); color:var(--oro-vivo); letter-spacing:.22em; text-transform:uppercase; margin-bottom:.7rem; font-weight:700}
.zaffiro-sotto{font-family:var(--titolo); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--testo-molle); margin-bottom:1.6rem !important}
.zaffiro p{color:var(--testo-molle); max-width:46ch}
.formati{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem}
.formati li{font-family:var(--titolo); font-weight:600; font-size:.9rem; letter-spacing:.08em; padding:.55rem 1.1rem; border:1px solid var(--filo); color:var(--oro-vivo); font-variant-numeric:tabular-nums}
.zaffiro .bottone{margin-top:2rem}
.zaffiro-gamma{margin:clamp(2.4rem,5vw,3.6rem) auto 0; width:var(--largo); overflow:hidden}
@media (max-width:880px){
  .zaffiro-dentro{grid-template-columns:1fr; gap:2rem}
  .zaffiro-boccetta img{aspect-ratio:16/10; object-position:50% 38%}
}

/* chi siamo */
.chi-griglia{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.chi-figura{margin:0; overflow:hidden}
.chi-figura img{width:100%; aspect-ratio:4/3.2; object-fit:cover}
@media (max-width:860px){ .chi-griglia{grid-template-columns:1fr} }

/* domande */
.lista-domande{border-top:1px solid var(--filo)}
.lista-domande details{border-bottom:1px solid var(--filo)}
.lista-domande summary{cursor:pointer; list-style:none; padding:1.35rem 2.6rem 1.35rem 0; position:relative; font-family:var(--titolo); font-size:clamp(.95rem,1.5vw,1.08rem); letter-spacing:.045em; text-transform:uppercase}
.lista-domande summary::-webkit-details-marker{display:none}
.lista-domande summary::after{content:''; position:absolute; right:.4rem; top:50%; width:10px; height:10px; border-right:1px solid var(--oro); border-bottom:1px solid var(--oro); transform:translateY(-70%) rotate(45deg); transition:transform .22s ease}
.lista-domande details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.lista-domande p{padding:0 0 1.5rem}

/* contatti */
.contatti{background:var(--sfondo-alto); color:var(--testo-forte); width:100%; padding:clamp(3.8rem,8vw,6.5rem) clamp(1.1rem,4vw,3rem)}
.contatti-blocco{width:var(--stretto); margin:0 auto; text-align:center; display:grid; justify-items:center; gap:1.5rem}
.contatti h2{font-size:clamp(1.9rem,4vw,3rem); color:var(--oro-vivo); text-transform:uppercase; letter-spacing:.14em}
.contatti address{font-style:normal; color:var(--testo-molle); line-height:2}
.contatti address a{color:var(--testo-forte); text-decoration-color:var(--oro-vivo); text-underline-offset:4px; display:inline-block; padding:.42rem .1rem}

/* piede */
.pie{
  background:var(--blu); color:color-mix(in srgb,var(--avorio) 55%,transparent);
  border-top:1px solid var(--blu-linea);
  padding:2.2rem clamp(1.1rem,4vw,3rem) 3rem; text-align:center; font-size:.76rem; display:grid; gap:.6rem;
}
.pie a{color:var(--avorio)}
.crediti{font-size:.69rem; opacity:.75; max-width:74ch; margin:0 auto}

/* avviso biscotti */
.biscotti{
  position:fixed; left:50%; bottom:1rem; transform:translateX(-50%);
  width:min(700px,94vw); z-index:60; display:flex; align-items:center; gap:1rem; justify-content:space-between;
  background:var(--blu-alto); color:var(--avorio); border:1px solid var(--blu-linea);
  padding:.7rem .8rem .7rem 1.2rem; font-size:.78rem; box-shadow:0 20px 50px -20px rgba(10,14,39,.55);
}
.biscotti[hidden]{display:none}
.biscotti a{color:var(--oro-chiaro); text-underline-offset:3px}
.biscotti button{font:inherit; font-family:var(--titolo); font-weight:600; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; white-space:nowrap; background:var(--oro); color:var(--blu); border:0; padding:.75rem 1.2rem; min-height:44px}
@media (max-width:560px){ .biscotti{flex-direction:column; align-items:flex-start; gap:.7rem} }

/* pagina di testo */
.documento{max-width:70ch; padding-top:9rem}
.documento .titolo-sezione{font-size:clamp(1.05rem,1.8vw,1.25rem); margin:2.6rem 0 .8rem}
.documento .titolo-sezione:first-of-type{margin-top:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .js [data-rivela]{opacity:1; transform:none}
}


/* ==========================================================================
   IL SEGNO DELLO ZAFFERANO — stacco fra le sezioni
   🔴 E' una MASCHERA, non un'immagine: prende il colore da --oro-vivo, quindi
      si ribalta da solo nelle sezioni .chiara. Decorativo, aria-hidden,
      fuori dall'albero di accessibilita'. Nessuna animazione: i fiorellini
      che si muovevano erano stati bocciati, questo sta fermo. */
.stacco{
  width:var(--largo); margin:clamp(2.2rem,5.5vw,4rem) auto;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2rem);
}
.stacco::before, .stacco::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(to right, transparent, var(--oro-vivo) 45%, var(--oro-vivo) 55%, transparent);
}
.stacco span{
  width:clamp(26px,4vw,34px); aspect-ratio:1; flex:none; background:var(--oro-vivo);
  -webkit-mask:var(--fiore) center/contain no-repeat;
          mask:var(--fiore) center/contain no-repeat;
}
/* lo stesso fiore, piccolo, come segno del titolo di sezione */
.titolo-sezione{position:relative}
.titolo-sezione::before{
  content:''; display:block; width:26px; height:26px; margin:0 0 .9rem;
  background:var(--oro-vivo);
  -webkit-mask:var(--fiore) center/contain no-repeat;
          mask:var(--fiore) center/contain no-repeat;
}

/* La scheda del calcolatore e' AVORIO dentro la griglia blu: e' la cosa da FARE,
   e si vede che e' diversa. Il bordo passa all'oro perche' il filo chiaro
   sull'avorio sparirebbe contro il blu della pagina. */
.ragione.chiara{border-color:var(--oro); box-shadow:0 24px 60px -30px rgba(0,0,0,.55)}
.ragione.chiara .ragione-figura{background:var(--avorio-alto)}

/* 🔴 Il filmato della raccolta e' verticale. Schiacciato in una fascia 2:1 si
   perdeva il 72% dell'inquadratura e non si capiva cosa succedesse. Quadrato:
   se ne vede il doppio, e la scheda resta di un'altezza sensata. */
#ragione-4 .ragione-figura video{aspect-ratio:1/1}

/* Il marchio in «Chi siamo»: pannello avorio, logo intero e centrato.
   🔴 contain e non cover — un marchio non si taglia mai. */
.chi-marchio{
  background:var(--avorio); border:1px solid var(--oro);
  display:grid; place-items:center; padding:clamp(2rem,5vw,3.4rem);
}
.chi-marchio picture{display:block; width:100%; max-width:340px}
.chi-marchio img{
  width:100%; height:auto; aspect-ratio:844/526;
  object-fit:contain; display:block;
}

/* ── La scritta SOPRA il film ────────────────────────────────────────────
   🔴 Misurato sui 36 fotogrammi: sul letto di fiori l'avorio ha bisogno di
   velo blu 0,60 e l'oro 0,74 per stare in soglia. Qui il velo e' RADIALE e
   attaccato alla scritta: pieno al centro dove sta il testo, a zero ai bordi,
   cosi' il fiore resta visibile intorno e non torna il blocco pieno. */
.hero-titolo{
  position:relative; z-index:2; width:100%; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(3rem,9vh,6rem) clamp(1.2rem,5vw,2rem);
}
.hero-titolo .occhiello{color:var(--avorio); justify-content:center; margin-bottom:1.4rem}
.hero-titolo h1{
  font-family:var(--titolo); font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.16; max-width:15ch;
  margin:0 auto; color:var(--avorio);
}
.hero-titolo h1 em{
  font-style:normal; display:block; color:var(--avorio);
  font-size:.52em; letter-spacing:.14em; margin-top:.9rem; font-weight:400; opacity:.92;
}

/* I DUE MARCHI in testata: l'azienda e Zaffiro, divisi da un filetto d'oro.
   🔴 Zaffiro e' AVORIO come il resto della testata, non oro: sul film l'oro
   e' il colore fragile (misurato) e obbligherebbe a scurire di piu'.
   Il filetto invece e' un elemento, non testo: li' l'oro regge. */
.marchi{display:flex; align-items:center; gap:clamp(.8rem,2vw,1.4rem); margin-right:auto}
.marchi-filo{width:1px; height:2.1rem; background:var(--oro); opacity:.65; flex:none}
.marchio-zaffiro{
  text-decoration:none; font-family:var(--titolo); font-weight:700;
  font-size:.92rem; letter-spacing:.26em; text-transform:uppercase;
  padding:.3rem 0; border-bottom:1px solid transparent; white-space:nowrap;
}
.marchio-zaffiro:hover{border-bottom-color:var(--oro)}
/* 🔴 Zaffiro spariva sotto i 560px perche' marchio e testata hanno misure
   FISSE in rem: a 375px servivano ~386px in una testata larga 340 e sbordava.
   La cura non e' nascondere, e' far scalare i due marchi. Conti a 375px:
   marchio ~96 + spazi ~19 + filetto 1 + Zaffiro ~60 + bottone ~92 + bordi ~29
   = ~297px su 375. Ci sta, e Zaffiro si vede su TUTTI i dispositivi. */
@media (max-width:560px){
  .testata{gap:.7rem; padding-left:.9rem; padding-right:.9rem}
  .marchi{gap:.6rem}
  .marchio-alto{font-size:.5rem; letter-spacing:.22em}
  .marchio-basso{font-size:1.02rem; letter-spacing:.1em}
  .marchi-filo{height:1.7rem}
  .marchio-zaffiro{font-size:.7rem; letter-spacing:.16em}
  .testata .bottone-piccolo{padding:.6rem .9rem; font-size:.62rem}
}
/* sotto i 340px (telefoni molto vecchi) non ci sta piu' nulla: cede Zaffiro */
@media (max-width:339px){ .marchi-filo, .marchio-zaffiro{display:none} }