/* =========================================================
   ORTY · pagine «Dall'albero a te» e «La nostra storia»
   (la pagina «Aziende» non c'è più dal 14/10/2026: al suo posto i G.A.O., gao.html e gruppi.css)
   Si appoggia ai token e ai componenti di style.css (sezioni, occhielli,
   pulsanti, .duo, .fasi, .domande, .modulo). Mobile-first.
   Restyle «luxury» del 19/10/2026 (LUXURY.md): avorio, verde notte, fili d'oro.
   Il viaggio dell'arancia (20/10/2026, MARCHIO-E-ANIMAZIONI.md §3): torna la scena disegnata legata
   allo scorrimento, nell'abito nuovo. Regola di movimento: è legata allo scorrimento, quindi resta
   anche con «riduci movimento» (la guida chi scorre); si tolgono solo i piccoli spostamenti a tempo.
   ========================================================= */

/* ---------- comuni ---------- */
.pg-lead-marchio{max-width:60ch;margin-top:4px;font:400 var(--t-micro)/1.7 var(--f-testo);letter-spacing:.24em;
  text-transform:uppercase;color:rgba(246,241,230,.92);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.scorri{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:6px;color:var(--avorio);text-decoration:none;
  font:400 var(--t-micro)/1 var(--f-testo);letter-spacing:.26em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.scorri__freccia{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(217,195,132,.7);color:var(--oro-chiaro)}
.scorri__freccia svg{width:13px;height:13px}
.scorri:hover{color:var(--oro-chiaro)}
.pg-piccola-nota{margin-top:20px;font-size:var(--t-piccolo);color:var(--testo-tenue)}
.centro .pg-piccola-nota{margin-inline:auto}

/* =========================================================
   1 · DALL'ALBERO A TE · il viaggio di un'arancia (20/10/2026)
   Base (senza JS): l'intestazione, le cinque tappe in fila su un filo d'oro, il disegno fermo e
   intero, la frase su verde notte, poi la foto vera e i link sullo stesso verde.
   .va--vivo (viaggio.js): la scena resta ferma sullo schermo (sticky) mentre si scorre; un cerchio
   verde notte si allarga dall'arancia sulla frase. Lo scorrimento resta della pagina: niente
   contenitori che scorrono, niente aggancio, la testata (z-index 60) resta sopra.
   Le arance hanno il colore del frutto del marchio (--logo-frutto, gruppo M; di riserva #D9912F,
   lo stesso di materiali/marchio-proposte/genera.py).
   ========================================================= */
.va{position:relative;background:var(--avorio);--va-frutto:var(--logo-frutto,#D9912F)}
.va__palco{position:relative;display:flex;flex-direction:column}
.va__testa{width:min(100% - 2*var(--margine),var(--max));margin:0 auto clamp(40px,5vw,64px)}
/* l'intestazione resta fuori dalla scena ferma: si legge, poi scorre via e la scena si ferma */
.va__intesta{display:flex;flex-direction:column;gap:18px;padding-top:var(--sezione);margin-bottom:clamp(36px,4.5vw,60px)}
.va__intesta>*{max-width:760px}
.va__occhiello::before{content:"";flex:none;width:44px;height:1px;background:currentColor;opacity:.75}
@media (max-width:480px){.va__occhiello::before{width:28px}}
/* le tappe su un filo d'oro: in colonna sul telefono, in fila di cinque dai 900 px */
.va__tappe{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column}
.va__tappe::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px;background:var(--filo)}
.va__tappa{position:relative;padding:0 0 clamp(30px,4vw,44px) 46px}
.va__tappa:last-child{padding-bottom:0}
.va__tappa::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;background:var(--avorio);border:1px solid var(--oro);
  box-shadow:inset 0 0 0 3px var(--avorio),inset 0 0 0 8px var(--oro)}
@media (min-width:900px){
  .va__tappe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;padding-top:34px}
  .va__tappe::before{left:0;right:0;top:7px;bottom:auto;width:auto;height:1px}
  .va__tappa{padding:0}
  .va__tappa::before{top:-34px}
}
.va__quando{display:flex;align-items:baseline;gap:12px;font:400 var(--t-micro)/1.4 var(--f-testo);letter-spacing:.26em;text-transform:uppercase;color:var(--oro-scuro)}
.va__num{font:italic 500 1.25rem/1 var(--f-titolo);letter-spacing:0;text-transform:none}
.va__tappa h3{margin-top:10px;font-size:clamp(1.45rem,1.25rem + .8vw,1.9rem);line-height:1.15}
.va__tappa p:not(.va__quando){margin-top:8px;font-size:var(--t-piccolo);line-height:1.65;color:var(--testo-tenue);max-width:46ch}
/* il disegno (decorativo, aria-hidden): senza JS fermo e intero */
.va__scena{position:relative;line-height:0}
.va-disegno{display:block;width:100%;height:auto;overflow:hidden}
.va-disegno text{font-family:var(--f-testo)}
.va-disegno #va-data{font-family:var(--f-titolo);font-variant-numeric:lining-nums}
/* il marchio sul camioncino è in negativo: lettere avorio, dettagli oro chiaro, foglia verde chiaro (genera.py, «foglia_scuro») */
.va-marchio--negativo{--logo-dettagli:var(--oro-chiaro);--logo-foglia:#7FAE5B}
.va__sole,.va__cal,.va__rotaia{display:none}
/* la frase finale, su verde notte (crema e oro chiaro: 10,9:1 e 7,5:1) */
.va__finale{padding:clamp(72px,10vw,128px) var(--margine) clamp(16px,3vw,32px);background:var(--verde-notte);color:var(--avorio);text-align:center}
.va__frase{max-width:24ch;margin:0 auto;font:500 var(--t-h2)/1.12 var(--f-titolo);color:var(--avorio);font-synthesis:none;text-wrap:balance}
.va__frase em{display:block;margin-top:.15em;font-style:italic;color:var(--oro-chiaro)}
/* dopo la scena: la foto vera della raccolta e i due link, sullo stesso verde notte */
.va__dopo{padding-block:clamp(56px,8vw,104px) clamp(88px,11vw,140px);background:var(--verde-notte);color:var(--avorio)}
.va__dopo-griglia{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(44px,6vw,88px);align-items:center}
@media (min-width:900px){.va__dopo-griglia{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.va__foto{margin:0;width:100%;max-width:440px;justify-self:center}
.va__foto img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;box-shadow:0 30px 60px -32px rgba(0,0,0,.55)}
@media (max-width:899px){.va__foto{max-width:480px}.va__foto img{aspect-ratio:4/3}}
.va__dopo-testo{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.va__dopo-occhiello::before{content:"";flex:none;width:44px;height:1px;background:currentColor;opacity:.75}
.va__dopo-frase{max-width:20ch;font:500 clamp(1.8rem,1.35rem + 1.6vw,2.6rem)/1.18 var(--f-titolo);color:var(--avorio);font-synthesis:none;text-wrap:balance}
.va__dopo-frase em{font-style:italic;color:var(--oro-chiaro)}
.va__dopo-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:12px}
.va__dopo :focus-visible{outline-color:var(--oro-chiaro)}
@media (max-width:639px){.va__dopo-azioni{flex-direction:column;align-items:stretch;width:100%}.va__dopo-azioni .btn{width:100%}.va__dopo-azioni .link-freccia{align-self:center}}

/* ---- viva: la scena resta ferma sullo schermo mentre si scorre ---- */
.va--vivo .va__binario{height:420vh;height:420svh}
@media (max-width:700px){.va--vivo .va__binario{height:380vh;height:380svh}}
.va--vivo .va__palco{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;overflow:hidden;
  padding:calc(var(--barra) + var(--testata-h) + clamp(14px,3.4vh,40px)) 0 clamp(12px,2.6vh,28px)}
.va--vivo .va__testa{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 18px;margin-bottom:0}
.va--vivo .va__intesta{margin-bottom:0}
.va--vivo .va__tappe{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:0}
.va--vivo .va__tappe::before,.va--vivo .va__tappa::before{display:none}
/* le tappe una sopra l'altra: si vede quella in corso (le altre restano per i lettori di schermo) */
.va--vivo .va__tappa{grid-area:1/1;padding:0;opacity:0;transform:translateY(10px);transition:opacity .45s var(--e),transform .45s var(--e)}
.va--vivo .va__tappa.attiva{opacity:1;transform:none}
.va--vivo .va__tappa h3{font-size:clamp(1.6rem,1.15rem + 1.9vw,2.75rem);line-height:1.1;max-width:22ch}
.va--vivo .va__tappa p:not(.va__quando){font-size:clamp(.9375rem,.88rem + .25vw,1.0625rem)}
.va--vivo .va__scena{position:relative;min-height:0;overflow:hidden;margin-top:6px}
/* il mondo intero (3600 x 600) si sposta in blocco con transform: niente ridisegno della scena a ogni passo */
.va--vivo .va-disegno{position:absolute;left:0;bottom:0;width:auto;height:auto;max-width:none;will-change:transform}
.va--vivo #va-sole-fermo{display:none}
.va--vivo .va__sole{display:block;position:absolute;left:0;top:0;width:var(--va-sole,64px);height:var(--va-sole,64px);border-radius:50%;
  border:1px solid var(--oro);background:rgba(194,162,78,.1);will-change:transform}
.va--vivo .va__cal{display:flex}
.va--vivo .va__rotaia{display:block}
.va--vivo .va__finale{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:calc(var(--barra) + var(--testata-h)) var(--margine) 0;
  clip-path:circle(0 at 50% 60%);visibility:hidden;pointer-events:none;overflow:hidden}
/* la frase sta al centro della scena: sotto c'è già il respiro, il resto parte subito */
.va--vivo .va__dopo{padding-top:0}
@media (prefers-reduced-motion:reduce){.va--vivo .va__tappa{transform:none;transition:opacity .2s linear}}

/* il calendario da tavolo (aria-hidden: le date sono anche nel testo delle tappe) */
.va__cal{flex-direction:column;align-items:center;gap:10px;padding-top:2px}
.va__foglio{display:block;width:clamp(76px,7vw,98px);perspective:500px}
.va__pagina{display:flex;flex-direction:column;align-items:center;padding:9px 6px 10px;background:var(--carta);border:1px solid var(--filo);border-radius:var(--r);
  box-shadow:0 16px 28px -22px rgba(33,59,37,.5);transform-origin:50% 0;transition:transform .45s var(--e),opacity .45s var(--e)}
.va__pagina.gira{transform:rotateX(-75deg);opacity:.35}
@media (prefers-reduced-motion:reduce){.va__pagina{transition:opacity .15s linear}.va__pagina.gira{transform:none;opacity:.15}}
.va__mese{align-self:stretch;padding-bottom:7px;border-bottom:1px solid var(--filo-tenue);font:400 var(--t-micro)/1 var(--f-testo);letter-spacing:.26em;
  text-transform:uppercase;text-align:center;color:var(--oro-scuro)}
.va__data{padding-top:7px;font:500 clamp(2.1rem,1.7rem + 1.2vw,2.9rem)/1 var(--f-titolo);font-variant-numeric:lining-nums;color:var(--verde);font-synthesis:none}
.va__giorno{padding-top:3px;font:400 .625rem/1.2 var(--f-testo);letter-spacing:.16em;text-transform:uppercase;color:var(--testo-tenue)}
.va__momento{font:italic 500 1.05rem/1 var(--f-titolo);color:var(--oro-scuro);white-space:nowrap}

/* la linea delle tappe che si riempie: i punti portano alla loro tappa */
.va__rotaia{position:relative;width:min(100% - 2*var(--margine),820px);margin:clamp(6px,1.4vh,14px) auto 0}
.va__rotaia ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.va__linea{position:absolute;left:10%;right:10%;top:20px;height:1px;background:var(--filo)}
.va__linea i{position:absolute;left:0;right:0;top:-.5px;height:2px;background:var(--oro);transform-origin:0 50%;transform:scaleX(0)}
.va__rotaia button{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-height:44px;padding:14px 0 2px;border:0;background:none;
  color:var(--testo-tenue);font:400 .625rem/1.2 var(--f-testo);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .4s var(--e)}
.va__punto{display:block;width:13px;height:13px;border-radius:50%;background:var(--avorio);box-shadow:inset 0 0 0 1px var(--oro);transition:background-color .4s var(--e),box-shadow .4s var(--e)}
.va__rotaia li.fatta .va__punto{background:var(--oro)}
.va__rotaia button[aria-current]{color:var(--verde)}
.va__rotaia button[aria-current] .va__punto{background:var(--verde);box-shadow:0 0 0 1px var(--oro),0 0 0 5px rgba(194,162,78,.24)}
.va__rotaia button:hover{color:var(--verde)}
.va__rotaia button:focus-visible{outline:2px solid var(--oro-scuro);outline-offset:2px;border-radius:var(--r)}
@media (min-width:700px){.va__rotaia button{font-size:var(--t-micro);letter-spacing:.2em}}
.va__etichetta{white-space:nowrap}
/* telefoni molto stretti: si legge solo la tappa in corso (le altre restano per i lettori di schermo) */
@media (max-width:359px){
  .va__rotaia button:not([aria-current]) .va__etichetta{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* sotto i 1000 px il pulsante di WhatsApp (in basso a destra) coprirebbe l'ultima tappa: la linea va
   fra il testo e il disegno, e il disegno arriva fino in fondo (lì il pulsante copre solo il prato) */
@media (max-width:999px){
  .va--vivo .va__palco{grid-template-rows:auto auto minmax(0,1fr);padding-bottom:0}
  .va--vivo .va__rotaia{order:1;margin:clamp(4px,1.2vh,12px) auto 0}
  .va--vivo .va__scena{order:2;margin-top:clamp(4px,1vh,10px)}
}
/* telefono basso o di traverso: testo e disegno più compatti */
@media (max-height:620px){
  .va--vivo .va__tappa p:not(.va__quando){display:none}
}
@media (max-height:520px) and (orientation:landscape){
  .va--vivo .va__palco{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:16px;padding-inline:var(--margine)}
  .va--vivo .va__testa{width:auto;grid-row:1;grid-column:1;align-self:center}
  .va--vivo .va__scena{grid-row:1;grid-column:2;margin-top:0}
  .va--vivo .va__rotaia{grid-row:2;grid-column:1/-1}
  .va--vivo .va__cal{display:none}
}

/* ---------- perché la strada corta conta ---------- */
.strada{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:800px){.strada{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}}
.strada li{display:flex;flex-direction:column;gap:12px;padding:clamp(28px,3.4vw,42px);background:var(--carta);border:1px solid var(--filo-tenue)}
.strada__icona{display:grid;place-items:center;width:54px;height:54px;margin-bottom:6px;border-radius:50%;border:1px solid var(--oro);color:var(--oro-scuro)}
.strada__icona svg{width:24px;height:24px}
.strada h3{font-size:var(--t-h3)}
.strada p{font-size:var(--t-piccolo);line-height:1.65;color:var(--testo-tenue)}
.strada-marchio{display:flex;flex-direction:column;align-items:center;gap:12px;margin:clamp(44px,5vw,64px) auto 0;max-width:760px;text-align:center}
.strada-marchio::before{content:"";width:120px;height:1px;margin-bottom:18px;background:var(--oro)}
.strada-marchio__frase{font:italic 400 clamp(1.6rem,1.25rem + 1.2vw,2.2rem)/1.3 var(--f-titolo);color:var(--verde-accento);font-synthesis:none;text-wrap:balance}
.strada-marchio__campo{max-width:58ch;font-size:var(--t-piccolo);line-height:1.65;color:var(--testo-tenue)}

/* ---------- come si ordina (4 passi) + spedizioni ---------- */
.ordina{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,60px)}
.ordina>.intesta{margin-bottom:0}
.ordina__spedizioni{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--filo-tenue)}
@media (min-width:800px){.ordina__spedizioni{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0;gap:26px}}
.ordina__spedizioni div{display:flex;flex-direction:column;gap:6px;padding:16px 0;border-bottom:1px solid var(--filo-tenue)}
@media (min-width:800px){.ordina__spedizioni div{padding:18px 0 0;border-bottom:0;border-top:1px solid var(--oro)}}
.ordina__spedizioni dt{font:400 var(--t-micro)/1.6 var(--f-testo);letter-spacing:.24em;text-transform:uppercase;color:var(--oro-scuro)}
.ordina__spedizioni dd{font-size:var(--t-piccolo);color:var(--testo)}
.ordina__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
@media (max-width:639px){.ordina__azioni .btn{width:100%}}

/* =========================================================
   2 · LA NOSTRA STORIA
   ========================================================= */

/* video 16:9: copertina, pulsante play, nessun lettore esterno (finché manca il file, solo la foto) */
.video{max-width:1080px;margin:0 auto}
.video__cornice{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--verde-notte);isolation:isolate;box-shadow:var(--ombra-su)}
.video__cornice>img,.video__cornice>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video__cornice>video{background:#000;object-fit:contain}
.video__cornice::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--velo),.05) 45%,rgba(var(--velo),.45) 100%)}
.video__cornice.suona::after{display:none}
.video__play{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:clamp(76px,9vw,104px);height:clamp(76px,9vw,104px);padding:0;
  border:1px solid var(--oro-chiaro);border-radius:50%;transform:translate(-50%,-50%);background:rgba(33,59,37,.42);color:var(--avorio);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background-color .5s var(--e),color .5s var(--e)}
.video__play svg{width:28%;height:28%;margin-left:6%}
.video__play:hover{background:var(--oro);color:var(--verde-notte)}
.video__play:focus-visible{outline:2px solid var(--oro-chiaro);outline-offset:4px}
.video__segnaposto{display:none}
.video figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin-top:18px;font:italic 400 1.1rem/1.4 var(--f-titolo);color:var(--testo-tenue);text-align:center}
.video__stato{margin-top:10px;text-align:center;font-size:var(--t-piccolo);color:var(--verde)}
.video__stato:empty{display:none}

/* il messaggio del marchio, in grande, su verde notte */
.manifesto{position:relative;padding-block:var(--sezione);background:var(--verde-notte);color:var(--avorio)}
.manifesto .occhiello{color:var(--oro-chiaro)}
.manifesto__righe{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;max-width:960px}
.manifesto__righe li{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-block:clamp(22px,3vw,34px);border-top:1px solid var(--filo-tenue)}
.manifesto__righe li:last-child{border-bottom:1px solid var(--filo-tenue)}
.manifesto__grande{font:500 clamp(2.2rem,1.5rem + 3vw,3.9rem)/1.05 var(--f-titolo);color:var(--avorio);font-synthesis:none}
.manifesto__grande .accento{color:var(--oro-chiaro)}
.manifesto__piccolo{display:block;max-width:52ch;font-size:var(--t-testo);line-height:1.65;color:rgba(246,241,230,.84)}
@media (min-width:800px){.manifesto__righe li{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;column-gap:48px}}

/* galleria: 5 riquadri, uno grande */
.galleria{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
.galleria li{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--avorio-2)}
.galleria li.galleria__grande{grid-column:1/-1;aspect-ratio:4/3}
@media (min-width:800px){
  .galleria{grid-template-columns:repeat(4,minmax(0,1fr))}
  .galleria li.galleria__grande{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
}
.galleria li>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.galleria li:hover>img{transform:scale(1.04)}}
.galleria figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 12px;background:linear-gradient(180deg,rgba(var(--velo),0),rgba(var(--velo),.7));
  font:italic 400 1.05rem/1.3 var(--f-titolo);color:var(--avorio)}
.foto-segnaposto{position:absolute;inset:0;display:none}

/* ---------- angoli morbidi «da boutique» (Flavio, 19/10/2026; i valori in style.css) ---------- */
.strada li{border-radius:var(--r-scheda);box-shadow:var(--ombra-morbida)}
.va__foto img,.video__cornice,.galleria li{border-radius:var(--r-foto)}
.video__cornice{overflow:hidden}