/* ═══════════════════════════════════════════════════════════════════════
Vivai Sassetti · style.css — concept «LA TALEA» · direzione EDITORIALE ELEGANTE (26/09/2026)
Palette dal logo: verde #008430 · bosco #1F3D2B · salvia #9CC0A8 · crema #F8F6F0
Unico accento caldo: fucsia del ciclamino #C8246B, solo sulla stagione attiva
(e sul passaggio attivo della firma, in firma.css).
Si animano solo transform e opacity. Senza JS tutto è visibile.
Sito realizzato da OnlinePerTutti.com
ORGANIZZAZIONE A BLOCCHI — ogni sezione ha il suo blocco, aperto da un commento «==== BLOCCO:chiave ====»
e chiuso da un commento «==== /BLOCCO:chiave ====» (lo script d'integrazione li cerca così: non ripeterli altrove).
Chiavi, in ordine: base · testata-apertura · punti · piante · produttori · nasce · stagioni
· domande · chi · dove · piede
Regole: 1) ogni regola di una sezione sta nel SUO blocco (media query comprese);
2) il blocco «base» è il sistema dei dettagli (token, tipografia, pulsanti, link, fuoco,
ornamenti, foto, movimento globale): le sezioni lo USANO, non lo modificano;
3) per cambiare un token solo in una sezione, lo si ridefinisce sul contenitore della sezione
dentro il proprio blocco (es. .stagioni{--r-foto:10px}), mai in :root.
Il sistema completo, con i perché: Strumenti/PIANO-CURA.md
═══════════════════════════════════════════════════════════════════════ */
/* ==== BLOCCO:base ==== */
/* ── font, serviti dal sito (niente Google Fonts) ── */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-latin.woff2) format("woff2");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:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(../fonts/dmsans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(../fonts/dmsans-latin.woff2) format("woff2");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}
/* ── token ── */
:root{
/* colore (CONCEPT) */
--verde:#008430;
--verde-testo:#006D28; /* il verde per il testo piccolo su crema: contrasto AA (6,0:1 su crema) */
--verde-scuro:#006A26;
--bosco:#1F3D2B;
--bosco-2:#173022;
--pino:#154629; /* verde bosco scuro dei pulsanti del riferimento (campionato: #124624) */
--pino-2:#0E3620;
--salvia:#9CC0A8;
--salvia-chiaro:#EAF0E8; /* = fondo «salvia chiarissimo» */
--crema:#F8F6F0;
--carta:#FDFCF8; /* fondo «bianco caldo»: al posto del #fff sui fondi di sezione e sui pannelli */
--bianco:#FFFFFF;
--fucsia:#C8246B; /* SOLO: stagione attiva, passaggio attivo della firma. Mai su testo lungo, mai negli ornamenti */
--testo:#1F3D2B;
--testo-2:#4A5F52; /* 6,4:1 su crema */
--grigio:#5F6D65; /* 5,0:1 su crema: righe piccole, didascalie */
--filetto:rgba(31,61,43,.14); /* il filetto editoriale da 1 px su fondo chiaro */
--filetto-chiaro:rgba(248,246,240,.18); /* … su verde bosco */
--anello:var(--verde); /* colore del fuoco da tastiera: sul verde bosco diventa salvia (.fondo--bosco) */
/* tipografia — scala fluida da 360 a 1440 px */
--serif:"Playfair Display",Georgia,"Times New Roman",serif;
--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--t-display:clamp(3.4rem,1.1rem + 6.6vw,7rem); /* 51 → 112 px · SOLO «Dedicato alla natura» (vincolo: non si tocca) */
--t-h2:clamp(2.125rem,1.55rem + 2.1vw,3.25rem); /* 34 → 52 px · titolo di sezione */
--t-h2-lungo:clamp(1.875rem,1.4rem + 1.75vw,2.75rem); /* 30 → 44 px · titoli di sezione oltre i 40 caratteri */
--t-h3:clamp(1.25rem,1.1rem + .45vw,1.5rem); /* 20 → 24 px · domanda FAQ, nome del passaggio, «Orari», «Contatti» */
--t-h4:clamp(1.125rem,1rem + .35vw,1.3125rem); /* 18 → 21 px · nome della scheda */
--t-lead:clamp(1.25rem,1.1rem + .55vw,1.625rem); /* 20 → 26 px · frase d'apertura di sezione, in Playfair */
--t-testo:1.0625rem; /* 17 px */
--t-piccolo:clamp(.875rem,.84rem + .12vw,.9375rem); /* 14 → 15 px · righe delle schede e dei punti */
--t-occhiello:.875rem; /* 14 px · occhiello, maiuscolo spaziato */
--t-didascalia:.875rem; /* 14 px · mai sotto, da telefono */
--lh-display:.88;
--lh-h2:1.06;
--lh-h3:1.22;
--lh-lead:1.42;
--lh-testo:1.6;
--lh-piccolo:1.45;
--ls-display:-.022em;
--ls-h2:-.018em;
--ls-h3:-.006em;
--ls-occhiello:.14em;
/* spazio, griglia, contenitore */
--max:1240px;
--gutter:clamp(16px,4vw,48px); /* resta 16 px da telefono: a 390 i due pulsanti dell'apertura stanno in riga solo così */
--sx:max(var(--gutter),calc((100vw - var(--max)) / 2)); /* dove comincia il contenuto */
--gap:clamp(16px,2.2vw,32px); /* spazio fra le colonne della griglia a 12 */
--sezione-y:144px; /* ritmo verticale: padding sopra e sotto di una sezione (144 · 112 · 80) */
--sezione-y-s:88px; /* sezione «attaccata» alla precedente (88 · 72 · 56) */
--stacco:56px; /* dalla testa di sezione (occhiello + titolo + introduzione) al contenuto (56 · 48 · 40) */
/* raggi */
--r-foto:12px; /* UNICO raggio delle foto (8 px da telefono) */
--r-pannello:18px; /* pannelli, riquadri, schede senza foto (14 px da telefono) */
--r-pillola:999px; /* pulsanti, linguette, avviso */
/* ombre — poche e morbide: mai sulle foto, al massimo un tipo di oggetto ombreggiato per sezione */
--ombra-1:0 1px 2px rgba(31,61,43,.04),0 8px 24px -14px rgba(31,61,43,.16); /* a riposo: pannello chiaro su fondo colorato */
--ombra-2:0 2px 6px rgba(31,61,43,.05),0 22px 40px -22px rgba(31,61,43,.28); /* al passaggio / sollevato */
/* foto: trattamento unico (vedi .foto) */
--foto-filtro:saturate(1.05) contrast(1.03);
--foto-velo:rgba(240,226,200,.16); /* velo caldo in «multiply»: unifica le foto fredde di serra */
--foto-bordo:inset 0 0 0 1px rgba(31,61,43,.12),inset 0 0 0 2px rgba(255,255,255,.16);
/* ornamenti */
--orn-tratto:1.25px;
/* movimento */
--ease:cubic-bezier(.2,.7,.2,1); /* standard: stati, frecce, sollevamenti */
--ease-out:cubic-bezier(.16,1,.3,1); /* entrate */
--ease-io:cubic-bezier(.45,0,.55,1); /* respiro degli ornamenti (tecnica ⑤) */
--t-rapido:.16s; /* pressione */
--t-breve:.3s; /* velature, opacità */
--t-medio:.45s; /* sottolineature, frecce, sollevamenti */
--t-lento:.9s; /* entrate */
--t-foto:1.1s; /* ingrandimento lento delle foto al passaggio */
/* testata, rametto, barra: token condivisi (li ridefinisce il blocco che li possiede) */
--testata:92px;
--ramo:clamp(150px,16vw,240px); /* larghezza del rametto di foglie in alto a sinistra */
--barra:0px;
}
@media (max-width:1199.98px){:root{--testata:80px;--sezione-y:112px;--sezione-y-s:72px;--stacco:48px}}
@media (max-width:767.98px){:root{--testata:84px;--ramo:112px;--sezione-y:80px;--sezione-y-s:56px;--stacco:40px;--r-foto:8px;--r-pannello:14px}}
@media (max-width:767.98px){:root{--barra:calc(66px + env(safe-area-inset-bottom))}}
/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--testata) + 12px);scroll-padding-bottom:calc(var(--barra) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;padding-top:var(--testata);padding-bottom:var(--barra);background:var(--crema);color:var(--testo);font:400 var(--t-testo)/var(--lh-testo) var(--sans);font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:500}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
address{font-style:normal}
figure{margin:0}
::selection{background:var(--salvia);color:var(--bosco)}
/* fuoco da tastiera: anello da 2 px staccato di 3 px, verde su chiaro, salvia su verde bosco (var --anello) */
:focus-visible{outline:2px solid var(--anello);outline-offset:3px;border-radius:4px}
.nascosto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.salta{position:fixed;left:16px;top:12px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--bosco);color:var(--crema);font-weight:500;text-decoration:none;transform:translateY(-160%);transition:transform .25s var(--ease)}
.salta:focus{transform:none}
.num{white-space:nowrap}
/* ── griglia e ritmo ── */
.contenitore{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sezione{padding-block:var(--sezione-y)}
.sezione--attaccata{padding-top:var(--sezione-y-s)}
/* i quattro fondi, in alternanza (sequenza nel PIANO-CURA §2.4). Sul verde bosco il fuoco diventa salvia. */
.fondo--crema{background:var(--crema)}
.fondo--carta{background:var(--carta)}
.fondo--salvia{background:var(--salvia-chiaro)}
.fondo--bosco{background:var(--bosco);color:var(--crema);--anello:var(--salvia)}
.filo-sopra{box-shadow:inset 0 1px 0 var(--filetto)} /* fra due fondi chiari vicini (carta ↔ crema) */
/* ── tipografia ── */
.titolo{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);color:var(--bosco);text-wrap:balance;font-variant-numeric:lining-nums}
.titolo--lungo{font-size:var(--t-h2-lungo)}
.titolo--chiaro{color:var(--crema)}
.sottotitolo{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--bosco);margin-bottom:14px;font-variant-numeric:lining-nums}
.lead{font-family:var(--serif);font-weight:400;font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--bosco);text-wrap:pretty;font-variant-numeric:lining-nums}
.testo-piccolo{font-size:var(--t-piccolo);line-height:var(--lh-piccolo);color:var(--grigio);text-wrap:pretty}
.misura{max-width:34em} /* riga di lettura: 60–68 battute */
/* occhiello: [numero] — [etichetta]. Rifinitura 1: nella home non si usa più (cinque serie di numeri nella stessa pagina
facevano sembrare il numero un errore: restano tavole 01–08, domande 01–08, passaggi 1–4). Resta nel sistema per le pagine semplici. */
.occhiello{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:500 var(--t-occhiello)/1.2 var(--sans);letter-spacing:var(--ls-occhiello);text-transform:uppercase;color:var(--verde-testo)}
.occhiello__num{font:400 1.125rem/1 var(--serif);letter-spacing:0;font-variant-numeric:lining-nums tabular-nums}
.occhiello__filo{flex:none;width:32px;height:1px;background:currentColor;opacity:.45}
.occhiello--chiaro,.fondo--bosco .occhiello{color:var(--salvia)}
/* ── icone (sprite comune in cima al ) ── */
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ── ORNAMENTI BOTANICI «orn-» — una famiglia sola, al tratto, con parsimonia (regole: PIANO-CURA §2.7) ──
è SEMPRE quello del simbolo (tabella nel PIANO-CURA). Tratto costante a ogni misura. */
.orn{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:var(--orn-tratto);stroke-linecap:round;stroke-linejoin:round;color:var(--salvia);pointer-events:none}
.orn--velo{--orn-velo:rgba(156,192,168,.2)} /* foglie appena velate: solo per ornamenti ≥ 96 px */
.orn--verde{color:var(--verde)} /* solo segni piccoli (punti elenco ≤ 24 px) */
.orn--chiaro{color:rgba(156,192,168,.72)} /* su verde bosco */
.orn--foglia{width:18px;height:18px} /* viewBox 0 0 32 32 */
.orn--germoglio{width:44px;height:29px} /* viewBox 0 0 48 32 */
.orn--rametto{width:120px;height:27px} /* viewBox 0 0 160 36 */
.orn--angolo{width:96px;height:96px} /* viewBox 0 0 96 96 */
.orn--ramo{width:120px;height:220px} /* viewBox 0 0 120 220 */
.orn--ciclamino{width:200px;height:215px} /* viewBox 0 0 160 172 */
.orn--specchio-x{transform:scaleX(-1)}
.orn--specchio-y{transform:scaleY(-1)}
.orn--specchio{transform:scale(-1,-1)}
/* filetto: filo — germoglio — filo.
*/
.filetto{display:flex;align-items:center;gap:14px;color:var(--salvia)}
.filetto::before,.filetto::after{content:"";flex:1 1 0;height:1px;background:currentColor;opacity:.7}
.filetto--sinistra::before{display:none} /* germoglio a sinistra, filo verso destra */
/* …e il germoglio nasce DAL filo: il filo corre sotto la fogliolina e ne tocca il gambo (piante, stagioni, privacy) */
.filetto--sinistra{position:relative;display:block;width:min(100%,240px);height:32px}
.filetto--sinistra .orn--germoglio{width:48px;height:32px;margin-left:-5px}
.filetto--sinistra::after{position:absolute;left:0;right:0;bottom:1px}
.filetto--corto{max-width:240px;margin-inline:auto}
.filo{display:block;height:1px;margin:0;border:0;background:var(--filetto)} /* … )
raggio unico, filo interno da 1 px, velo caldo leggero; mai ombra. Didascalie solo con parole già nel copy. ── */
.foto{position:relative;display:block;overflow:hidden;border-radius:var(--r-foto);background:var(--salvia-chiaro);isolation:isolate}
.foto img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--foto-filtro)}
.foto::before{content:"";position:absolute;inset:0;z-index:1;background:var(--foto-velo);mix-blend-mode:multiply;pointer-events:none}
.foto::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:var(--foto-bordo);pointer-events:none}
.foto--zoom img{transition:transform var(--t-foto) var(--ease)}
@media (hover:hover){.foto--zoom:hover img,a:hover .foto--zoom img{transform:scale(1.04)}}
.didascalia{display:flex;align-items:baseline;gap:10px;margin-top:12px;font:400 var(--t-didascalia)/1.45 var(--sans);color:var(--grigio)}
.didascalia::before{content:"";flex:none;width:18px;height:1px;background:currentColor;opacity:.5;transform:translateY(-.3em)}
.fondo--bosco .didascalia{color:rgba(248,246,240,.72)}
/* ── pulsanti (a pillola: vincolo). Stati: hover −2 px + velo più scuro (solo col mouse) · fuoco anello 2 px staccato 4 px
· pressione scala .98 in 160 ms. Freccia: +4 px al passaggio. ── */
.bottone{--h:50px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 24px;border-radius:var(--r-pillola);border:0;font:500 1rem/1.15 var(--sans);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--t-medio) var(--ease)}
.bottone .ico{width:20px;height:20px}
.bottone::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity var(--t-breve) ease}
.bottone:focus-visible{outline-offset:4px;border-radius:var(--r-pillola)}
@media (hover:hover){.bottone:hover{transform:translateY(-2px)}.bottone:hover .ico--freccia{transform:translateX(4px)}}
.bottone:active{transform:translateY(0) scale(.98);transition-duration:var(--t-rapido)}
.ico--freccia{transition:transform var(--t-medio) var(--ease)}
.bottone--grande{--h:56px;padding:0 28px;font-size:1.0625rem}
/* un solo verde pieno per i pulsanti: il pino del riferimento (bianco su pino ≈ 10:1). Il #008430 resta per link, puntini e icone */
.bottone--pieno{background:var(--pino);color:#fff}
.bottone--pieno::before{background:var(--pino-2)}
@media (hover:hover){.bottone--pieno:hover::before,.bottone--chiaro:hover::before,.bottone--scuro:hover::before,.bottone--pino:hover::before,.bottone--crema:hover::before{opacity:1}}
.bottone--chiaro{background:rgba(255,255,255,.95);color:var(--bosco)}
.bottone--chiaro::before{background:#fff;box-shadow:0 12px 28px -12px rgba(0,0,0,.45)}
.bottone--scuro{background:var(--bosco);color:var(--crema)}
.bottone--scuro::before{background:var(--bosco-2)}
/* i due pulsanti del riferimento: pillola verde bosco scuro col bordo chiaro · pillola crema */
.bottone--pino{background:var(--pino);color:#fff}
.bottone--pino::before{background:var(--pino-2)}
.bottone--bordo{box-shadow:inset 0 0 0 1px rgba(233,242,228,.42)}
.bottone--crema{background:var(--crema);color:var(--bosco)}
.bottone--crema::before{background:#fff;box-shadow:0 12px 28px -12px rgba(0,0,0,.45)}
/* pulsante a filo (secondario, editoriale): trasparente, bordo da 1 px del colore del testo; al passaggio si riempie appena */
.bottone--filo{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.bottone--filo::before{background:var(--carta)}
.fondo--bosco .bottone--filo::before{background:rgba(248,246,240,.1)}
@media (hover:hover){.bottone--filo:hover::before{opacity:1}}
/* pulsanti col numero: da telefono il numero va su una riga sua, voluta (mai «333 398 / 5411») */
.bottone__testo{min-width:0}
.bottone--num .bottone__testo{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.bottone--num{--h:62px}
.bottone--num .sep{display:none}
.bottone--num .num{font-size:.88em;font-weight:400} /* numero pieno (AA): la gerarchia la fanno peso e misura */
/* ── link. «collegamento» (link a sé, con freccia): filo al 30% a riposo, al passaggio o al fuoco
la sottolineatura piena si disegna da sinistra (scaleX, 450 ms). «link» (dentro il testo): sottolineatura fissa. ── */
.collegamento{display:inline-flex;align-items:center;gap:10px;padding:10px 0;font-weight:500;color:var(--verde-testo);text-decoration:none;position:relative}
.collegamento>span{position:relative;padding-bottom:3px}
.collegamento>span::before,.collegamento>span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:1px;background:currentColor;pointer-events:none}
.collegamento>span::before{opacity:.3}
.collegamento>span::after{transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-medio) var(--ease)}
.collegamento:focus-visible>span::after{transform:scaleX(1);transform-origin:0 50%}
.collegamento .ico{width:20px;height:20px;transition:transform var(--t-medio) var(--ease)}
@media (hover:hover){.collegamento:hover>span::after{transform:scaleX(1);transform-origin:0 50%}.collegamento:hover .ico:last-child{transform:translateX(4px)}}
.link{color:var(--verde-testo);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(0,109,40,.35)}
@media (hover:hover){.link:hover{text-decoration-color:currentColor}}
.fondo--bosco .collegamento,.fondo--bosco .link{color:var(--crema)}
/* ── orari: componente condiviso («Dove siamo» e footer di privacy/404). Il dato è in main.js (ORARI).
Le sezioni lo ritoccano solo dentro il proprio contenitore (.dove__orari …, .orari--piede …). ── */
.orari{margin:0}
.orari__riga{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 14px;border-radius:12px}
.orari__riga+.orari__riga{margin-top:2px}
.orari dt{font-weight:500}
.orari dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.orari__due{opacity:.45}
.orari__riga.is-oggi{background:var(--salvia-chiaro)}
.orari__riga.is-oggi dt::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--verde);vertical-align:.12em}
/* il giorno di oggi negli orari: il puntino respira (aperto oggi) — micro-interazione di stato */
.orari__riga.is-oggi dt{position:relative}
.orari__riga.is-oggi dt::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--verde);opacity:0;animation:oggi 2.6s var(--ease-out) infinite;pointer-events:none}
@keyframes oggi{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(3);opacity:0}}
/* ═══ MOVIMENTO — al massimo 5 tecniche in tutto il sito (PIANO-CURA §2.9):
① la firma (firma.js, GSAP) · ② il titolo d'apertura che sale (blocco testata-apertura) · ③ la comparsa continua (.rivela, qui)
· ④ il cambio stagione (main.js) · ⑤ il respiro degli ornamenti (.respira, qui: riservato, massimo 2 punti del sito).
Solo transform e opacity. Le micro-interazioni (passaggio, fuoco, apertura) non contano come tecniche. ═══ */
/* ③ comparsa continua dei blocchi (animation-timeline: view()): solo dove è supportata e il movimento è permesso */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.rivela{animation:rivela linear both;animation-timeline:view();animation-range:entry 10% cover 16%}
}
}
@keyframes rivela{from{opacity:0;transform:translate3d(0,36px,0)}to{opacity:1;transform:none}}
@keyframes rivela-foto{from{opacity:0;transform:translate3d(0,48px,0) scale(.96)}to{opacity:1;transform:none}}
/* ⑤ il respiro: una foglia nella brezza, ±1°, 7 s. Si mette su un contenitore dell'ornamento (non sull' specchiato);
il perno è l'attacco del ramo (--perno). Riservato: vedi PIANO-CURA §2.9 per dove si usa. */
@media (prefers-reduced-motion:no-preference){
.respira{animation:respiro 7s var(--ease-io) infinite alternate;transform-origin:var(--perno,50% 0)}
}
@keyframes respiro{from{transform:rotate(-1deg)}to{transform:rotate(1.2deg)}}
/* ═══ movimento ridotto: tutto fermo e visibile ═══ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ==== /BLOCCO:base ==== */
/* ==== BLOCCO:testata-apertura ==== */
/* Blocco della testata (logo, menu, «Chiama», hamburger), del rametto, del pannello del menu e dell'apertura.
VINCOLO: la composizione di apertura e testata da computer è quella del riferimento di Domenico: si curano solo i dettagli.
Cura del 26/09 (direzione editoriale elegante, PIANO-CURA §5.1): testata scorsa crema al 96% col filetto e senza ombra,
logo con l'anello che resta di 3 px anche ridotto, menu DM Sans 15 px col filo da 1,5 px che si disegna, rametto vivo
(foglie a tre toni con le venature, il ramo che si assottiglia, ombra portata, respiro ⑤), germoglio al tratto dopo «Dedicato»,
pannello su carta; da telefono in testata solo logo e menu. Rifinitura 1: testata crema piena (niente vetro smerigliato),
menu al centro con 24 px fra le voci, pannello senza numeri, «Chiama» a filo accanto a WhatsApp. Si animano solo transform e opacity. */
html.menu-aperto{overflow:hidden}
/* ═══ TESTATA — come il riferimento: fondo crema, logo grande che sporge sull'apertura, menu al centro-destra,
pillola verde bosco scuro «Chiama»; a sinistra il rametto di foglie ═══ */
.testata{--logo:clamp(131px,calc(29vw - 240px),170px);--logo-r:1.3571;--logo-w:calc(var(--logo) * var(--logo-r));--logo-s:.47;--logo-su:8px;position:fixed;inset:0 0 auto 0;z-index:50;height:var(--testata)}
/* fondo crema pieno (in cima identico alla pagina). Scorrendo compare il filetto da 1 px, niente ombra. Niente vetro smerigliato:
è un linguaggio da app, e la sfocatura costava lavoro alla scheda grafica a ogni fotogramma di scorrimento */
.testata__fondo{position:absolute;inset:0;background:var(--crema)}
.testata__fondo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--filetto);opacity:0;transition:opacity var(--t-breve) ease}
.testata.is-scrolled .testata__fondo::after,.testata.is-menu .testata__fondo::after{opacity:1}
.testata__inner{position:relative;height:100%;padding:0 var(--sx) 0 max(var(--sx),calc(var(--ramo) * .97));display:flex;align-items:center;gap:20px}
/* logo: il file del cliente in un disco bianco. L'anello è un disco dietro (::before, 4 px); ridotto, l'anello
passa a ::after, largo 3 px ÷ la scala, così a occhio resta di 3 px (le due si scambiano in dissolvenza) */
.testata__logo{position:relative;isolation:isolate;align-self:flex-start;flex:none;display:block;width:var(--logo-w);height:var(--logo);margin-top:var(--logo-su);border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(31,61,43,.1),0 16px 30px -16px rgba(31,61,43,.52);transform-origin:50% 0;transition:transform var(--t-medio) var(--ease)}
.testata__logo::before,.testata__logo::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(31,61,43,.07);pointer-events:none;transition:opacity var(--t-breve) ease}
.testata__logo::before{inset:-4px}
.testata__logo::after{inset:calc(-3px / var(--logo-s));opacity:0}
.testata.is-scrolled .testata__logo::before,.testata.is-menu .testata__logo::before{opacity:0}
.testata.is-scrolled .testata__logo::after,.testata.is-menu .testata__logo::after{opacity:1}
.testata__logo img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.testata__logo:focus-visible{outline-offset:7px;border-radius:50%}
/* ridotto (scorrendo o col menu aperto): il disco sta al centro della testata, anello compreso (--logo-y);
da computer si allinea anche al filo del contenuto (--logo-x). Solo transform. */
.testata{--logo-y:calc((var(--testata) - var(--logo) * var(--logo-s)) / 2 - var(--logo-su));--logo-x:calc(var(--sx) - max(var(--sx), var(--ramo) * .97) - var(--logo-w) * (1 - var(--logo-s)) / 2)}
.testata.is-scrolled .testata__logo{transform:translate(var(--logo-x),var(--logo-y)) scale(var(--logo-s))}
/* menu da computer: DM Sans 500 15 px; la voce attiva è verde col filo da 1,5 px; al passaggio il filo si disegna da sinistra
e si ritira verso destra. Rifinitura 1: il menu sta al centro fra logo e «Chiama» (l'aria si divide ai due lati: ~60 px a 1440
invece di 29 fra logo e «Home»), 24 px fissi fra le voci. Lingue (27/09): «Home» esce dal menu da computer (il logo porta
già in cima; resta nel pannello e nel piede) per fare posto al selettore «IT ▾» dopo «Chiama»; il logo si ritara (110 px
fra 1200 e 1279, da 1280 clamp(131px, 29vw − 240px, 170px)). */
.menu{margin-inline:auto}
.menu ul{display:flex;gap:24px;list-style:none}
.menu a{position:relative;display:block;padding:12px 0;font:500 .9375rem/1.2 var(--sans);letter-spacing:.01em;color:var(--testo);text-decoration:none;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;border-radius:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-medio) var(--ease)}
.menu a.is-attivo{color:var(--verde-testo)}
.menu a.is-attivo::after,.menu a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
@media (hover:hover){.menu a:hover::after{transform:scaleX(1);transform-origin:0 50%}}
.testata__chiama{margin-left:0;--h:50px;padding:0 26px}
/* hamburger: 48 px al tocco, tre tratti da 1,5 px lunghi 22; i tratti finiscono sul filo del contenuto (16 px da telefono) */
.hamburger{display:none;position:relative;flex:none;width:48px;height:48px;margin-right:-13px;border:0;border-radius:50%;background:transparent;color:var(--bosco);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hamburger span{position:absolute;left:13px;right:13px;top:50%;height:1.5px;margin-top:-.75px;border-radius:1px;background:currentColor;transition:transform var(--t-medio) var(--ease),opacity var(--t-breve) ease}
.hamburger span:nth-child(1){transform:translateY(-6.5px)}
.hamburger span:nth-child(3){transform:translateY(6.5px)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
.hamburger:active{background:rgba(31,61,43,.06)}
.hamburger:focus-visible{outline-offset:-3px;border-radius:50%}
html:not(.js) .hamburger{display:none!important} /* senza JS non fa niente: c'è il menu del footer */
/* ═══ LINGUA (28/09) — le tre lingue SEMPRE in vista: «IT | EN | ES» (prima «IT ▾» a tendina: non si notava).
Stessa famiglia delle voci del menu (DM Sans 500, il filo da 1,5 px che si disegna sotto), filetto da 1 px fra le sigle,
la lingua della pagina in verde col filo fisso. 44 px di altezza al tocco; ogni sigla ha aria-label e title col nome.
Computer: dopo «Chiama» (14 px), l'ultima sigla chiude sul filo del contenuto · tablet: fra «Chiama» e il menu a pannello ·
telefono: a sinistra, speculare all'hamburger, la prima sigla comincia sul filo dei 16 px. Si animano solo transform. ═══ */
.lingua{position:relative;display:flex;align-items:center;flex:none;margin:0 -6px 0 -6px}
.lingua__voce{position:relative;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 6px;color:var(--testo);font:500 .875rem/1 var(--sans);letter-spacing:.06em;text-decoration:none;-webkit-tap-highlight-color:transparent}
.lingua__voce+.lingua__voce::before{content:"";position:absolute;left:0;top:50%;width:1px;height:12px;margin-top:-6px;background:rgba(31,61,43,.28)}
.lingua__voce span{position:relative;padding:5px 0 6px}
.lingua__voce span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-medio) var(--ease)}
.lingua__voce[aria-current]{color:var(--verde-testo);font-weight:600}
.lingua__voce[aria-current] span::after,.lingua__voce:focus-visible span::after{transform:scaleX(1);transform-origin:0 50%}
@media (hover:hover){.lingua__voce:hover span::after{transform:scaleX(1);transform-origin:0 50%}}
.lingua__voce:focus-visible{outline-offset:-2px;border-radius:6px}
.lingua__voce:active{background:rgba(31,61,43,.06);border-radius:6px}
/* da computer la riga è piena: sigle a 13 px, spazio fra le voci del menu e «Chiama» un po' più stretti (aria ai lati del menu ≥ 22 px) */
@media (min-width:1200px){
.lingua__voce{min-width:24px;padding:0 5px;font-size:.8125rem;letter-spacing:.05em}
.lingua{margin:0 -5px 0 -6px}
}
@media (min-width:1366px){.menu ul{gap:18px}.testata__chiama{padding:0 22px}}
@media (min-width:1200px) and (max-width:1279.98px){
.testata{--logo:110px;--logo-s:.55}
.menu ul{gap:11px}
.menu a{font-size:.9rem;letter-spacing:0}
.testata__chiama{padding:0 15px}
}
/* 1280–1365: lo spazio fra le voci cresce da 12 px (a 1280) a 18 (a 1366): con le tre lingue in vista ai lati del menu restano ≥ 22 px */
@media (min-width:1280px) and (max-width:1365.98px){.menu ul{gap:calc(12px + (100vw - 1280px) * .07)}.testata__chiama{padding:0 18px}}
/* sotto i 1200 px menu, logo e «Chiama» non stanno più in una riga accanto al rametto: menu a pannello */
@media (max-width:1199.98px){
.testata{--logo:96px;--logo-s:.66}
.menu{display:none}
.hamburger{display:block}
.testata__chiama{margin-left:auto}
.lingua{margin:0 -6px 0 -6px}
/* ridotto anche col menu aperto (sta dentro la testata); come da computer va sul filo del contenuto, il rametto non c'è più */
.testata.is-scrolled .testata__logo,.testata.is-menu .testata__logo{transform:translate(var(--logo-x),var(--logo-y)) scale(var(--logo-s))}
}
/* telefono: come il riferimento, in testata SOLO il logo al centro e il menu (Domenico, 26/09). Per chiamare c'è la barra in basso. */
@media (max-width:767.98px){
.testata{--logo:124px;--logo-s:.6;--logo-su:6px}
.testata.is-menu{--logo-s:.62}
.testata__inner{padding:0 16px}
.testata__logo{position:absolute;left:50%;top:0;margin:var(--logo-su) 0 0 calc(var(--logo-w) / -2)}
.testata__chiama{display:none}
.hamburger{margin-left:auto}
.lingua{order:-1;margin:0 0 0 -6px}
.testata.is-scrolled .testata__logo,.testata.is-menu .testata__logo{transform:translateY(var(--logo-y)) scale(var(--logo-s))} /* resta al centro */
}
@media (min-width:375px) and (max-width:389.98px){.testata{--logo:104px}}
@media (min-width:350px) and (max-width:374.98px){.testata{--logo:88px}}
@media (max-width:349.98px){.testata{--logo:76px}}
@media (max-width:374.98px){:root{--ramo:96px}}
/* ═══ IL RAMETTO VIVO (Domenico, 26/09): pende dall'angolo in alto a sinistra, sopra la testata e l'apertura.
Foglie a tre toni con le venature, due giovani in punta, ombra portata leggerissima; respira piano
(tecnica ⑤ .respira, ±1°, 7 s, perno all'attacco del ramo). Scorre con la pagina; sotto il menu aperto sparisce.
overflow visibile: col respiro il bordo del disegno non si vede mai tagliato. ═══ */
.rametto{position:absolute;top:0;left:0;z-index:51;width:var(--ramo);height:auto;aspect-ratio:24/25;overflow:visible;opacity:.9;pointer-events:none;transition:opacity var(--t-breve) ease}
html.menu-aperto .rametto{opacity:0}
/* ═══ PANNELLO DEL MENU (telefono e tablet): foglio su carta, voci in Playfair, righe col filetto (niente numeri: rifinitura 1) ═══ */
.pannello{position:fixed;inset:var(--testata) 0 0 0;z-index:48}
.pannello[hidden]{display:none}
.pannello__velo{position:absolute;inset:0;background:rgba(14,30,20,.5);opacity:0;transition:opacity var(--t-breve) ease}
.pannello__foglio{position:absolute;top:0;right:0;bottom:0;width:min(92vw,420px);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:8px 22px calc(24px + env(safe-area-inset-bottom));background:var(--carta);transform:translateX(100%);transition:transform var(--t-medio) var(--ease-out)}
.pannello.is-aperto .pannello__velo{opacity:1}
.pannello.is-aperto .pannello__foglio{transform:none}
.pannello__nav ul{list-style:none}
.pannello__nav li{border-bottom:1px solid var(--filetto)}
/* voce: [nome] [freccia]; il filetto sta sulla riga (li), il link sporge di 10 px per lato solo per l'anello del fuoco; freccia al centro della riga.
Il nome è 28 px; sotto i 390 px scende quanto basta perché «Domande frequenti» resti su una riga */
.pannello__nav a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;align-content:center;column-gap:10px;min-height:63px;margin-inline:-10px;padding:10px;border-radius:8px;color:var(--bosco);text-decoration:none}
.pannello__voce{font:400 clamp(1.25rem,calc((92vw - 112px) * .115),1.75rem)/1.15 var(--serif);letter-spacing:-.012em;text-wrap:balance;font-variant-numeric:lining-nums}
.pannello__nav a .ico{align-self:center;width:20px;height:20px;color:var(--salvia);stroke-width:1.6;transition:transform var(--t-medio) var(--ease)}
.pannello__nav a.is-attivo{color:var(--verde-testo)}
.pannello__nav a.is-attivo .ico,.pannello__nav a:focus-visible .ico{color:var(--verde)}
.pannello__nav a:focus-visible{outline-offset:-2px;border-radius:8px} /* l'anello resta dentro la riga, fra i due filetti, con 10 px d'aria ai lati */
.pannello__nav a:focus-visible .ico{transform:translateX(4px)}
@media (hover:hover){.pannello__nav a:hover .ico{color:var(--verde);transform:translateX(4px)}}
/* sopra i contatti: il filetto col germoglio */
.pannello__filetto{width:100%;max-width:240px;margin:auto auto 0;padding-top:36px}
.pannello__contatti{display:grid;gap:10px;margin-top:22px}
.pannello__contatti .bottone{width:100%;padding:0 16px;font-size:.98rem;white-space:normal;text-align:center}
/* sotto i contatti le tre lingue, in riga, separate da un filetto: la lingua della pagina in verde e sottolineata */
.pannello__lingue{display:flex;justify-content:center;align-items:center;margin-top:12px;list-style:none}
.pannello__lingue li{display:flex;align-items:center}
.pannello__lingue li+li::before{content:"";width:1px;height:14px;background:var(--filetto)}
.pannello__lingue a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;color:var(--testo);font:500 .9375rem/1 var(--sans);text-decoration:none}
.pannello__lingue a[aria-current]{color:var(--verde-testo);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.4em}
.pannello__lingue a:focus-visible{outline-offset:-2px}
/* le voci entrano una dopo l'altra (micro-interazione d'apertura: 450 ms, scaglionate di 60 ms) */
.pannello.is-aperto .pannello__nav li{animation:voce-entra var(--t-medio) var(--ease-out) both}
.pannello.is-aperto .pannello__nav li:nth-child(2){animation-delay:.06s}
.pannello.is-aperto .pannello__nav li:nth-child(3){animation-delay:.12s}
.pannello.is-aperto .pannello__nav li:nth-child(4){animation-delay:.18s}
.pannello.is-aperto .pannello__nav li:nth-child(5){animation-delay:.24s}
.pannello.is-aperto .pannello__nav li:nth-child(6){animation-delay:.3s}
@keyframes voce-entra{from{opacity:0;transform:translate3d(24px,0,0)}to{opacity:1;transform:none}}
/* schermi bassi (320×640): tutto il pannello, «Chiama» compreso, sta nello schermo senza scorrere */
@media (max-height:700px){.pannello__nav a{min-height:46px}.pannello__filetto{padding-top:12px}.pannello__contatti{margin-top:12px}.pannello__lingue{margin-top:6px}}
/* ═══ 1 · APERTURA — come il riferimento: fascia larga e bassa (non a tutto schermo), foto accesa a destra,
scritta grande in alto a sinistra. A 1440×900 si vedono testata + apertura + striscia + l'inizio delle piante. ═══ */
.apertura{position:relative;isolation:isolate;overflow:hidden;height:clamp(460px,37vw,600px);background:var(--bosco);color:#fff}
.apertura__foto img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:72% 50%;transform-origin:70% 50%}
/* velatura: solo da sinistra (verde bosco quasi nero 62% → 0 al 58%) + un leggero scuro in basso a sinistra.
A destra i fiori restano accesi. Contrasto del testo bianco misurato con Strumenti/misura-contrasto-apertura.js */
.apertura__velo{position:absolute;inset:0;z-index:-1;background:
linear-gradient(90deg,rgba(12,30,19,.62) 0%,rgba(12,30,19,.5) 24%,rgba(12,30,19,.26) 42%,rgba(12,30,19,0) 58%),
radial-gradient(ellipse 58% 80% at 8% 86%,rgba(12,30,19,.55) 0%,rgba(12,30,19,.3) 50%,rgba(12,30,19,0) 100%)}
.apertura__inner{position:relative;height:100%;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(56px,5.6vw,90px) var(--gutter) 0 max(var(--gutter),6.9vw,calc((100vw - var(--max)) / 2))}
.apertura__titolo{margin:0;font-weight:500;font-variant-numeric:lining-nums;text-shadow:0 2px 30px rgba(0,0,0,.18)}
.apertura__cosa{margin-bottom:clamp(10px,1.1vw,16px);font:500 clamp(.875rem,.8rem + .2vw,1rem)/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.apertura__cosa .riga__in{text-wrap:balance} /* se va a capo (tablet, telefono), due righe pari: mai «…PIANTINE / DA ORTO» */
/* «Dedicato alla natura»: Playfair 400 (vincolo). margin-left −.035em = allineamento ottico: la «D» e la «a» hanno
un margine interno di ~5 px a 112 px; così il disegno cade sullo stesso filo della riga «cosa» e del sottotitolo (±1 px) */
.apertura__grande{display:block;margin-left:-.035em;font-family:var(--serif);font-weight:400;font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.riga{display:block;overflow:hidden;padding:0 .08em .1em 0;margin-bottom:-.1em}
.riga__in{display:inline-block}
.apertura__grande .riga{padding-top:.08em;margin-top:-.08em}
/* l'interlinea dichiarata (.88) diventa vera: i margini negativi di riga 2 e 3 collassano, la riga 3 li recupera in uno solo */
.apertura__grande .riga--3{margin-top:-.18em}
/* il germoglio dopo «Dedicato»: la fogliolina del riferimento, ora al tratto (orn-germoglio), stessa misura di prima */
.apertura .apertura__foglia{display:inline-block;width:.62em;height:.47em;margin-left:.04em;vertical-align:.1em;overflow:visible;color:#E6EFDF;--orn-tratto:1.1px;--orn-velo:rgba(230,239,223,.62);transform:scale(1.2);transform-origin:12% 96%}
/* il disegno del germoglio occupa ~70% del suo riquadro: scale(1.2) dal piede dello stelo gli ridà il peso della fogliolina
del riferimento senza cambiare il riquadro (le righe non si spostano) */
.apertura__sotto{max-width:21em;margin:clamp(16px,1.7vw,24px) 0 0;font-size:clamp(1.125rem,.9rem + .5vw,1.375rem);line-height:1.45;color:#fff;text-wrap:balance;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.apertura__azioni{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(20px,2.2vw,32px)}
.apertura__azioni .bottone{--h:54px;padding:0 26px}
.apertura :focus-visible{outline-color:#fff}
/* MOVIMENTO ② — il titolo sale riga per riga dietro le maschere. In CSS (niente attesa di GSAP sui telefoni lenti):
parte alla prima pittura, senza JS o con «riduci animazioni» il titolo è subito fermo e visibile. */
@media (prefers-reduced-motion:no-preference){
.js .apertura .riga__in{animation:riga-su 1.15s var(--ease-out) .08s both}
.js .apertura .riga--2 .riga__in{animation-delay:.2s}
.js .apertura .riga--3 .riga__in{animation-delay:.32s}
.js .apertura__sotto{animation:sale var(--t-lento) var(--ease-out) .6s both}
.js .apertura__azioni{animation:sale var(--t-lento) var(--ease-out) .74s both}
.js .apertura__foto img{animation:zoom-fuori 2.4s var(--ease) both}
}
@keyframes riga-su{from{transform:translateY(112%)}to{transform:none}}
@keyframes sale{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes zoom-fuori{from{transform:scale(1.08)}to{transform:none}}
/* da computer: sottotitolo come il riferimento (~26 px a 1440, largo ~514 px) */
@media (min-width:768px){
.apertura__sotto{font-size:clamp(1.125rem,.8rem + .9vw,1.625rem)}
.apertura__azioni{margin-top:clamp(20px,1.8vw,26px)}
}
/* col logo più grande (da 1280 px) la scritta scende quanto basta per non toccarlo; l'apertura cresce di 16 px
perché sotto i pulsanti resti aria — la striscia resta nella prima schermata */
@media (min-width:1280px){
.apertura{height:clamp(460px,calc(37vw + 16px),600px)}
.apertura__inner{padding-top:clamp(56px,7vw,110px)}
}
@media (min-width:768px) and (max-width:1079.98px){
.apertura__sotto{max-width:19em}
.apertura__cosa{max-width:26em}
/* tablet: la scritta occupa più larghezza, la velatura arriva più in là */
.apertura__velo{background:
linear-gradient(90deg,rgba(12,30,19,.72) 0%,rgba(12,30,19,.6) 34%,rgba(12,30,19,.34) 58%,rgba(12,30,19,0) 82%),
radial-gradient(ellipse 70% 85% at 8% 86%,rgba(12,30,19,.5) 0%,rgba(12,30,19,.28) 50%,rgba(12,30,19,0) 100%)}
}
/* telefono: composizione del riferimento alla stessa scala — apertura bassa quanto il contenuto, la scritta in alto
poco sotto la testata, sotto la striscia intera e l'inizio delle piante. Niente rametto (il riferimento non l'ha).
padding-top 68: fra il logo da 124 px e la riga «cosa» restano 22 px. */
@media (max-width:767.98px){
.rametto{display:none}
.apertura{height:auto;min-height:0}
.apertura__foto img{object-position:50% 40%}
.apertura__velo{background:
linear-gradient(90deg,rgba(12,30,19,.7) 0%,rgba(12,30,19,.5) 55%,rgba(12,30,19,.16) 100%),
linear-gradient(0deg,rgba(12,30,19,.34) 0%,rgba(12,30,19,.22) 60%,rgba(12,30,19,0) 100%)}
.apertura__inner{min-height:0;justify-content:flex-start;padding:68px 16px 40px}
.apertura__cosa{font-size:.875rem;letter-spacing:.09em;margin-bottom:10px}
.apertura__grande{font-size:clamp(2.5rem,1.2rem + 8.2vw,3.375rem);line-height:.96}
.apertura__sotto{max-width:22em;margin-top:14px;font-size:1.0625rem}
/* i due pulsanti in una riga, come la riga sola del riferimento. La freccia di «Scrivi su WhatsApp»
(copy.md: «icona WhatsApp a sinistra e freccia a destra») resta finché ci sta: da 375 px in su */
.apertura__azioni{flex-wrap:nowrap;gap:8px;margin-top:20px}
.apertura__azioni .bottone{--h:46px;padding:0 13px;gap:7px;font-size:.9375rem}
.apertura__azioni .bottone .ico{width:18px;height:18px}
.apertura__azioni .bottone .ico--freccia{width:16px;height:16px;margin-left:-2px}
}
/* velatura del telefono più leggera da 360 px (a 320 il sottotitolo scenderebbe sotto 4,5:1).
Contrasto misurato con misura-contrasto-apertura.js: 390 p95 ≥ 5,5 · 360 p95 ≥ 5,4 */
@media (min-width:360px) and (max-width:767.98px){
.apertura__velo{background:
linear-gradient(90deg,rgba(12,30,19,.6) 0%,rgba(12,30,19,.42) 55%,rgba(12,30,19,.06) 100%),
linear-gradient(0deg,rgba(12,30,19,.3) 0%,rgba(12,30,19,.16) 55%,rgba(12,30,19,0) 100%)}
}
@media (max-width:389.98px){
.apertura__inner{padding-top:60px} /* col logo più piccolo (104 / 88 / 76) la scritta può salire di 8 px */
.apertura__azioni{gap:6px}
.apertura__azioni .bottone{padding:0 12px;font-size:.875rem}
}
@media (max-width:374.98px){.apertura__azioni .ico--freccia{display:none}} /* 360: con la freccia la riga non ci sta */
/* pagine tradotte (28/09): se i due testi superano il loro «max» (testi-it.json) il secondo pulsante va sotto invece di
uscire dallo schermo. In italiano non cambia niente: la regola vale solo con lang diverso da it */
html:not([lang="it"]) .apertura__azioni{flex-wrap:wrap}
/* 340 e 320: i pulsanti non stanno in una riga (servirebbe testo sotto i 14 px): vanno uno sotto l'altro, larghi quanto il testo
sopra di loro (sulla stessa verticale, bersaglio largo per il pollice) */
@media (max-width:343.98px){.apertura__azioni{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-self:stretch}}
/* sotto i 360 px la riga «cosa» arriva più a destra, dove la foto è più chiara: velatura appena più piena */
@media (max-width:359.98px){
.apertura__velo{background:
linear-gradient(90deg,rgba(12,30,19,.74) 0%,rgba(12,30,19,.56) 55%,rgba(12,30,19,.2) 100%),
linear-gradient(0deg,rgba(12,30,19,.34) 0%,rgba(12,30,19,.22) 60%,rgba(12,30,19,0) 100%)}
}
/* ==== /BLOCCO:testata-apertura ==== */
/* ==== BLOCCO:punti ==== */
/* ═══ 2 · I QUATTRO PUNTI — striscia bianco caldo sotto l'apertura, filo sotto. Non cliccabile: nessuno stato.
La mossa «il fusto coi nodi»: da computer i tre divisori sono un fusto sottile alto quanto le icone, con una
fogliolina orn-foglia a metà (alternata destra · sinistra · destra, come le foglie vere); sotto i 1024 due fili
che s'incrociano su una fogliolina.
Impaginazione da computer: le quattro voci stanno alla loro larghezza naturale e tutto lo spazio libero va ai tre
nodi (flex-grow): la prima voce parte dal filo del contenuto, l'ultima finisce sul filo destro, e ogni nodo cade
esattamente a metà fra la fine di una voce e l'icona della successiva.
≥1200 icona a sinistra del testo · 1024–1199 icona sopra · 768–1023 2 × 2 icona a sinistra · <768 2 × 2 icona sopra. ═══ */
.punti{--punti-ico:40px;--punti-spazio:16px;--punti-nodo:48px;--punti-foglia:16px;--punti-fusto:var(--salvia);position:relative;border-bottom:1px solid var(--filetto)}
.punti__lista{display:flex;align-items:flex-start;list-style:none}
.punto{display:flex;align-items:flex-start;padding:26px 0 22px}
.punto:first-child{flex:0 0 auto}
.punto:not(:first-child){flex:1 1 auto}
/* icona: famiglia orn- (tratto 1,25 px costante), verde con le foglie velate di salvia. Alta 40 px (32 da telefono);
ogni simbolo ha il viewBox stretto sul disegno (--l = la sua larghezza su 48): il bordo visibile dell'icona cade
sul filo del contenuto e lo spazio fra icona e testo è davvero 16 px */
.punto__ico{flex:none;width:calc(var(--punti-ico) * var(--l,48) / 48);height:var(--punti-ico);margin:3px var(--punti-spazio) 0 0;overflow:visible;color:var(--verde);fill:none;stroke:currentColor;stroke-width:var(--orn-tratto);stroke-linecap:round;stroke-linejoin:round;--orn-velo:rgba(156,192,168,.2)}
.punto__testo{margin:0;min-width:0}
.punto__nome{display:block;font-weight:500;font-size:1rem;line-height:1.3;letter-spacing:.002em;color:var(--bosco);text-wrap:balance}
.punto__riga{display:block;margin-top:3px;font-size:var(--t-piccolo);line-height:var(--lh-piccolo);color:var(--grigio);text-wrap:pretty}
/* «Il finocchio in autunno, / il pomodoro in primavera»: va a capo sempre dopo la virgola (11,7em = la riga più lunga) */
.punto--due-righe .punto__riga{max-width:11.7em}
/* il nodo del fusto: filo verticale pieno (salvia al 70%) alto quanto l'icona, con la fogliolina verde attaccata a metà.
Rifinitura 1: filo senza sfumatura e foglia da 16 px verde al 60% — a 12 px accanto a un filo sfumato sembrava una sbavatura */
.punto__nodo{position:relative;flex:1 0 var(--punti-nodo);align-self:flex-start;height:var(--punti-ico);margin-top:3px}
.punto__nodo::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--punti-fusto);opacity:.7}
.punto__nodo .orn{position:absolute;left:50%;top:50%;width:var(--punti-foglia);height:var(--punti-foglia);max-width:none;margin:calc(var(--punti-foglia) * -.45) 0 0 calc(var(--punti-foglia) * -.1);color:var(--verde);opacity:.6;transform-origin:10% 90%}
.punto--due-righe .punto__nodo .orn{transform:scaleX(-1)}
/* 1024–1199: le quattro voci restano in fila, l'icona sopra il nome; il fusto resta all'altezza delle icone */
@media (min-width:1024px) and (max-width:1199.98px){
.punto{display:grid;grid-template-columns:auto;align-content:start;padding-block:26px}
.punto:not(:first-child){grid-template-columns:minmax(var(--punti-nodo),1fr) auto}
.punto__nodo{grid-column:1;grid-row:1;margin:0}
.punto__ico{grid-column:-2;margin:0 0 12px}
.punto__testo{grid-column:-2}
.punto__nome{font-size:.9375rem}
}
/* sotto i 1024: due per riga. Al posto dei tre nodi, una croce di fili sfumati alle estremità e staccati 12 px dai
bordi, disegnata dalle celle stesse (le righe restano alte quanto il loro contenuto) e interrotta attorno alla
fogliolina dell'incrocio. */
@media (max-width:1023.98px){
.punti__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.punto{position:relative;padding-block:24px}
.punto:nth-child(odd){padding-right:28px}
.punto:nth-child(even){padding-left:28px}
.punto:nth-child(even)::before,.punto:nth-child(n+3)::after{content:"";position:absolute;pointer-events:none}
/* il filo verticale: metà sopra (cella 2) e metà sotto (cella 4) */
.punto:nth-child(2)::before{left:-.5px;top:12px;bottom:calc(var(--punti-foglia) / 2 + 5px);width:1px;background:linear-gradient(to bottom,transparent,var(--punti-fusto) 24px)}
.punto:nth-child(4)::before{left:-.5px;top:calc(var(--punti-foglia) / 2 + 5px);bottom:12px;width:1px;background:linear-gradient(to top,transparent,var(--punti-fusto) 24px)}
/* il filo orizzontale: metà a sinistra (cella 3) e metà a destra (cella 4) */
.punto:nth-child(3)::after{top:-.5px;left:12px;right:calc(var(--punti-foglia) / 2 + 5px);height:1px;background:linear-gradient(to right,transparent,var(--punti-fusto) 24px)}
.punto:nth-child(4)::after{top:-.5px;left:calc(var(--punti-foglia) / 2 + 5px);right:12px;height:1px;background:linear-gradient(to left,transparent,var(--punti-fusto) 24px)}
/* la fogliolina dell'incrocio: il nodo della cella 3, portato sull'angolo in alto a destra della cella */
.punto__nodo{display:none}
.punto:nth-child(3) .punto__nodo{display:block;position:absolute;left:100%;top:0;width:0;height:0;margin:0}
.punto:nth-child(3) .punto__nodo::before{display:none}
.punto:nth-child(3) .punto__nodo .orn{margin:calc(var(--punti-foglia) / -2) 0 0 calc(var(--punti-foglia) / -2);transform:none}
}
/* 768–1023: icona a sinistra; lo spazio dopo l'icona compensa la sua larghezza, così i testi di ogni colonna
partono tutti dallo stesso filo (41,5 = l'icona più larga) */
@media (min-width:768px) and (max-width:1023.98px){
.punto__ico{margin-right:calc(var(--punti-spazio) + var(--punti-ico) * (41.5 - var(--l,41.5)) / 48)}
}
/* da 768 px la striscia parte dallo stesso filo del titolo dell'apertura (6,9 vw, che tiene il titolo lontano dal rametto):
titolo e prima icona sulla stessa verticale, come nel riferimento. Da 1440 in su è identico a prima */
@media (min-width:768px){
#punti .contenitore{max-width:none;padding-inline:max(var(--gutter),6.9vw,calc((100vw - var(--max)) / 2))}
}
/* telefono: 2 per riga con la frase piccola (decisione di Domenico), icona da 32 px sopra il nome */
@media (max-width:767.98px){
.punti{--punti-ico:32px}
.punto{flex-direction:column;padding-block:17px}
.punto:nth-child(odd){padding-right:16px}
.punto:nth-child(even){padding-left:18px}
.punto__ico{margin:0 0 9px}
.punto__nome{font-size:.9375rem}
.punto__riga{margin-top:2px}
}
/* ==== /BLOCCO:punti ==== */
/* ==== BLOCCO:piante ==== */
/* ═══ 3 · LE NOSTRE PIANTE — «il catalogo d'erbario» (direzione editoriale, 26/09)
Otto tavole numerate 01–08, senza scatola: foto (trattamento unico .foto), numero di tavola col filo,
nome Playfair con la freccia al tratto, riga piccola; un filo sotto ogni tavola che al passaggio si disegna in verde.
Griglia a 4 colonne da 768 px (testa compresa: introduzione e link partono dalla terza colonna delle schede),
2 per riga da telefono. Righe allineate con subgrid (foto · numero · nome · riga).
Vincoli: titolo e introduzione SENZA .rivela (prima schermata). Rifinitura 1: niente occhiello «03» (i numeri che restano
nella pagina sono quelli delle tavole). ═══ */
.piante{--piante-gx:32px;--piante-gy:48px;padding-top:clamp(44px,3.9vw,56px)}
/* ── testa: titolo · germoglio | introduzione · link ── */
.piante__griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--piante-gx);
grid-template-areas:"titolo titolo intro intro" "filetto filetto link link" "schede schede schede schede"}
.piante__testa{display:contents}
.piante__testa .titolo{grid-area:titolo;align-self:last baseline}
.piante__filetto{grid-area:filetto;align-self:start;margin-top:16px} /* il germoglio che nasce dal filo è nel base (.filetto--sinistra) */
.piante__intro{grid-area:intro;align-self:last baseline;margin:0;color:var(--testo-2);font-size:var(--t-testo);line-height:var(--lh-testo);text-wrap:pretty}
.piante__frase{display:inline-block;text-wrap:pretty} /* l'a capo cade sulla virgola, mai «anno.» da solo */
.piante__link{grid-area:link;align-self:start;justify-self:start;margin-top:7px;white-space:nowrap} /* la sottolineatura del link corre alla stessa altezza del filo del germoglio */
/* ── le tavole ── */
.schede{grid-area:schede;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--piante-gx);row-gap:var(--piante-gy);margin-top:var(--stacco);list-style:none}
.schede>li{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;min-width:0}
.scheda{position:relative;grid-row:1 / -1;display:grid;grid-template-rows:subgrid;row-gap:0;padding-bottom:22px;border-radius:calc(var(--r-foto) - 2px);color:var(--bosco);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform var(--t-rapido) var(--ease)}
/* il filo sotto la tavola (a riposo) e quello verde che si disegna da sinistra al passaggio */
.scheda::before,.scheda::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none}
.scheda::before{background:var(--filetto)}
.scheda::after{background:var(--verde);transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-medio) var(--ease)}
.scheda__foto{aspect-ratio:1/1}
/* numero di tavola «01» + filo di 24 px */
.scheda__tavola{display:flex;align-items:center;gap:10px;margin-top:18px;font:400 .875rem/1 var(--serif);letter-spacing:.02em;font-variant-numeric:lining-nums tabular-nums;color:var(--verde-testo)}
.scheda__tavola::after{content:"";flex:none;width:24px;height:1px;background:currentColor;opacity:.45}
/* nome + freccia al tratto, a destra, centrata sull'occhio della prima riga */
.scheda__testa{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:10px;font-size:var(--t-h4)}
.scheda__nome{margin:0;font:500 1em/1.15 var(--serif);letter-spacing:0;color:inherit;text-wrap:balance;font-variant-numeric:lining-nums}
.scheda__freccia{flex:none;width:18px;height:12px;margin-top:calc(.7em - 6px);overflow:visible;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.scheda__asta,.scheda__punta{transition:transform var(--t-medio) var(--ease)}
.scheda__asta{transform-origin:1px 6px}
.scheda__riga{display:block;margin-top:6px;font-size:var(--t-piccolo);line-height:var(--lh-piccolo);color:var(--grigio);text-wrap:balance} /* righe corte: bilanciate, mai una parola sola */
/* stati: passaggio (solo mouse) · fuoco da tastiera (anello + nome verde + filo disegnato; la freccia resta ferma per non toccare l'anello)
· pressione. Lo zoom della foto (1.04 in 1,1 s) è nel blocco base */
@media (hover:hover){
.scheda:hover .scheda__nome,.scheda:hover .scheda__freccia{color:var(--verde-testo)}
.scheda:hover::after{transform:scaleX(1);transform-origin:0 50%}
.scheda:hover .scheda__asta{transform:scaleX(1.27)}
.scheda:hover .scheda__punta{transform:translateX(4px)}
}
.scheda:focus-visible{outline:2px solid var(--anello);outline-offset:6px;border-radius:calc(var(--r-foto) - 2px)}
.scheda:focus-visible .scheda__nome,.scheda:focus-visible .scheda__freccia{color:var(--verde-testo)}
.scheda:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.scheda:active{transform:scale(.99)}
/* senza subgrid: colonne flessibili e riga di 3 righe minime (i nomi restano allineati quasi sempre) */
@supports not (grid-template-rows:subgrid){
.schede>li{display:flex;grid-row:auto}
.scheda{display:flex;flex-direction:column;width:100%}
.scheda__riga{min-height:calc(3em * 1.45)}
}
/* ── 1024–1199: stesse quattro colonne, un po' più strette ── */
@media (max-width:1199.98px){
.piante{--piante-gx:24px;--piante-gy:40px}
}
/* ── 768–1023: il link va dopo le schede (nella terza colonna non ci sta in una riga) ── */
@media (max-width:1023.98px){
.piante__griglia{grid-template-areas:"titolo titolo intro intro" "filetto filetto . ." "schede schede schede schede" "link link link link"}
.piante__link{margin-top:32px}
}
/* ── 768–1023: quattro schede strette (~160 px): nomi su una riga, niente freccia (la scheda intera è già il link) ── */
@media (min-width:768px) and (max-width:1023.98px){
.piante{--piante-gx:20px}
.scheda__freccia{display:none}
.scheda__testa{font-size:1.0625rem}
}
/* ── telefono: una colonna di testa, schede 2 per riga ── */
@media (max-width:767.98px){
.piante{--piante-gx:16px;--piante-gy:28px}
.piante__griglia{grid-template-columns:minmax(0,1fr);column-gap:0;grid-template-areas:"titolo" "filetto" "intro" "schede" "link"}
.piante__filetto{margin-top:14px}
.piante__intro{margin-top:20px}
.schede{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--stacco)}
.scheda{padding-bottom:16px}
.scheda__tavola{margin-top:14px}
.scheda__testa{gap:8px;margin-top:8px}
.scheda__riga{margin-top:4px}
.piante__link{margin-top:24px;white-space:normal}
}
/* sotto 390 px il link può andare su due righe: righe bilanciate, sottolineatura che segue ogni riga, freccia dopo l'ultima parola */
@media (max-width:389.98px){
.piante__link{display:block;justify-self:start;text-wrap:balance}
.piante__link>span{display:inline;padding:0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:rgba(0,109,40,.3);text-decoration-skip-ink:none}
.piante__link>span::before,.piante__link>span::after{display:none}
.piante__link .ico{display:inline-block;margin-left:8px;vertical-align:-4px}
}
/* ③ comparsa delle schede, sfalsata per colonna (resta la tecnica ③; titolo e introduzione non si muovono) */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.schede>li:nth-child(4n+2){animation-range:entry 12% cover 18%}
.schede>li:nth-child(4n+3){animation-range:entry 14% cover 20%}
.schede>li:nth-child(4n+4){animation-range:entry 16% cover 22%}
@media (max-width:767.98px){
.schede>li:nth-child(odd){animation-range:entry 10% cover 16%}
.schede>li:nth-child(even){animation-range:entry 12% cover 18%}
}
}
}
/* ==== /BLOCCO:piante ==== */
/* ==== BLOCCO:produttori ==== */
/* ═══ 4 · PRODUTTORI — fascia verde bosco a tutta larghezza (vincolo del riferimento) ═══
Impianto: testo sulle colonne 1–6 (1–7 sotto i 1200, 1–8 sotto i 1024; sempre ≤ 560 px), foto di serra a destra
sotto un velo che si calcola dalla fine della colonna di testo (--prod-fine), non in percentuale: il testo resta sul verde pieno a ogni
larghezza (contrasto misurato dietro ogni riga, 768→1920: crema ≥ 8,7:1, secondo paragrafo ≥ 7,5:1, salvia ≥ 5,0:1).
La mossa, «la rotta delle novità»: un filo salvia con quattro foglie che spuntano sulle tappe;
l'Olanda (ogni anno) ha la foglia piena, Germania, Spagna e Francia (nel tempo) al tratto. Niente movimento proprio. */
.produttori{
--prod-c:calc(100vw - 2 * var(--sx)); /* larghezza del contenuto */
--prod-col:min(560px,calc((var(--prod-c) - var(--gap)) / 2)); /* colonne 1–6, al massimo 560 px */
--prod-fine:calc(var(--sx) + var(--prod-col)); /* dove finisce la colonna di testo */
--prod-s:.8; /* scala della foglia della rotta (38×22 → 30×18 px) */
--prod-crema-2:rgba(248,246,240,.86); /* secondo paragrafo */
position:relative;isolation:isolate;overflow:hidden;
padding-block:148px} /* eccezione del ritmo: la fascia del riferimento */
@media (max-width:1199.98px){.produttori{--prod-col:min(560px,calc((7 * var(--prod-c) - 5 * var(--gap)) / 12));padding-block:var(--sezione-y)}} /* colonne 1–7 · 112 px */
@media (max-width:1023.98px){.produttori{--prod-col:min(560px,calc((8 * var(--prod-c) - 4 * var(--gap)) / 12))}} /* colonne 1–8 (tablet) */
/* foto: a destra, 70%, trattamento unico delle foto (filtro + velo caldo in multiply), niente raggio né filo (è una fascia) */
.produttori__foto{position:absolute;top:0;right:0;bottom:0;z-index:-2;width:70%;overflow:hidden;background:var(--bosco-2)}
.produttori__foto img{width:100%;height:100%;object-fit:cover;object-position:62% 25%;filter:var(--foto-filtro)} /* più tetto e bancali della serra, meno fiori (rifinitura 1) */
.produttori__foto::after{content:"";position:absolute;inset:0;background:var(--foto-velo);mix-blend-mode:multiply;pointer-events:none}
/* velo: verde pieno fin quasi alla fine del testo, poi si apre sulla serra; sopra e sotto la foto si chiude appena nella fascia */
.produttori__velo{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
linear-gradient(180deg,rgba(31,61,43,.42) 0,rgba(31,61,43,0) 24%,rgba(31,61,43,0) 72%,rgba(31,61,43,.5) 100%),
linear-gradient(90deg,var(--bosco) 0,var(--bosco) calc(var(--prod-fine) - 200px),rgba(31,61,43,.92) var(--prod-fine),rgba(31,61,43,.62) calc(var(--prod-fine) + 130px),rgba(31,61,43,.32) calc(var(--prod-fine) + 320px),rgba(31,61,43,.16) 100%)}
.produttori__inner{max-width:min(560px,calc((100% - var(--gap)) / 2))}
@media (max-width:1199.98px){.produttori__inner{max-width:min(560px,calc((7 * 100% - 5 * var(--gap)) / 12))}}
@media (max-width:1023.98px){.produttori__inner{max-width:min(560px,calc((8 * 100% - 4 * var(--gap)) / 12))}}
/* testa: il titolo (rifinitura 1: niente occhiello «04») */
.produttori .titolo{max-width:13em}
.produttori__etichetta{display:block;margin-bottom:.1em;color:var(--salvia)}
.produttori__lead{margin:28px 0 0;max-width:22em;color:var(--crema)}
.produttori__testo{max-width:34em;margin:0;font-size:var(--t-testo);line-height:var(--lh-testo);color:var(--prod-crema-2);text-wrap:pretty}
/* la rotta delle novità: un tralcio. Il filo salvia al 50% va dalla prima all'ultima tappa; su ogni tappa spunta
una foglia (#produttori-foglia = la foglia orn- su un gambo che nasce dal filo), girata nel verso del viaggio.
Da computer tappe a passo costante (tre colonne uguali + l'ultima larga quanto «Francia»); da telefono spazi
uguali fra i NOMI (flex-grow: lo spazio libero si divide in parti uguali), perché a 320 px il passo costante
lasciava 12 px fra «Germania» e «Spagna». Ogni tappa porta il suo tratto di filo fino alla tappa dopo:
il filo arriva sempre esattamente all'attacco dell'ultima foglia.
Geometria del simbolo (viewBox 38×22): attacco del gambo in 1.5,20.5 → messo esattamente sul filo. */
.produttori__rotta{--prod-filo:17px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) max-content;margin:36px 0;padding:0;list-style:none;max-width:500px}
.produttori__tappa{position:relative;padding-top:calc(var(--prod-filo) + 15px);font:400 1.125rem/1.2 var(--serif);letter-spacing:.005em;color:var(--crema);font-variant-numeric:lining-nums;white-space:nowrap}
.produttori__tappa:not(:last-child)::before{content:"";position:absolute;top:calc(var(--prod-filo) - .5px);left:0;right:0;height:1px;background:var(--salvia);opacity:.5}
.produttori__nodo{position:absolute;top:calc(var(--prod-filo) - var(--prod-s) * 20.5px);left:calc(var(--prod-s) * -1.5px);width:calc(var(--prod-s) * 38px);height:calc(var(--prod-s) * 22px)}
.produttori__tappa--ogni-anno .produttori__nodo{--orn-velo:rgba(156,192,168,.85)} /* l'Olanda, ogni anno: foglia piena, le altre al tratto */
/* «ciclamini, crisantemi, rose.» non si spezza: se non ci sta, va a capo tutto dopo i due punti (da 400 px in su) */
@media (min-width:400px){.produttori__elenco{white-space:nowrap}}
.produttori__bottone{margin-top:40px}
/* ── telefono: foto sopra (220 px, velo dal basso), testo sotto su verde pieno, rotta in una riga ── */
@media (max-width:767.98px){
.produttori{--prod-s:.7;padding-top:0;padding-bottom:var(--sezione-y)}
.produttori__foto{position:relative;top:auto;right:auto;bottom:auto;display:block;width:100%;height:220px;z-index:-2}
.produttori__foto img{object-position:50% 58%}
.produttori__velo{bottom:auto;height:220px;background:linear-gradient(180deg,rgba(31,61,43,.06) 0,rgba(31,61,43,.18) 38%,rgba(31,61,43,.72) 74%,var(--bosco) 100%)}
.produttori .contenitore{position:relative;margin-top:-20px}
.produttori__inner{max-width:none}
.produttori .titolo{max-width:none}
.produttori__lead{margin-top:22px;max-width:none}
.produttori__rotta{--prod-filo:15px;display:flex;margin:32px 0 30px;max-width:none}
.produttori__tappa{flex:1 1 auto}
.produttori__tappa:last-child{flex:none}
.produttori__tappa{padding-top:calc(var(--prod-filo) + 13px);font-size:.9375rem}
.produttori__bottone{margin-top:32px}
}
/* ==== /BLOCCO:produttori ==== */
/* ==== BLOCCO:nasce ==== */
/* La firma «la tavola botanica»: il grosso delle regole è in assets/css/firma.css (file a parte, anche questo del blocco «nasce»).
Qui solo l'aggancio al sito: token del sistema, ritmo, testata fissa. */
.nasce{--n-verde:var(--verde);--n-bosco:var(--bosco);--n-salvia:var(--salvia);--n-crema:var(--crema);--n-carta:var(--carta);--n-fucsia:var(--fucsia);--n-testo:var(--testo-2);--n-filetto:var(--filetto);--n-serif:var(--serif);--n-sans:var(--sans);--n-ease:var(--ease);--n-tavola-r:var(--r-pannello);padding:var(--sezione-y) var(--gutter)}
.nasce__inner{max-width:var(--max)}
.nasce__titolo,.nasce__nome{font-variant-numeric:lining-nums}
@media (min-width:900px){
/* la sezione si ferma sotto la testata fissa: l'aria sopra parte dal bordo della testata */
.nasce{padding:calc(var(--testata) + var(--n-aria)) var(--gutter) var(--n-aria)}
.nasce__scena{width:min(100%,608px,calc((100svh - var(--testata) - 2 * var(--n-aria) - 2 * var(--n-tavola-pad) - 2px) * .8889 + 2 * var(--n-tavola-pad) + 2px))}
}
/* ==== /BLOCCO:nasce ==== */
/* ==== BLOCCO:stagioni ==== */
/* ═══ 6 · IN QUESTA STAGIONE — IL FILTRO (la cosa da fare) ═══
Niente scatole: testa editoriale, linguette su un filo, la linea dell'anno (la mossa: «il calendario del vivaio»),
foto col trattamento unico, voci a filetti, «Chiedi se c'è» in una fascia chiara a tutta larghezza.
La linea dell'anno parte dal 21 marzo: così i quattro tratti stanno esattamente sotto le quattro linguette,
nello stesso ordine (primavera · estate · autunno · inverno), e nessuna stagione è spezzata a fine anno.
Modifiche 3 (28/09): Estate e Inverno hanno 5 foto (le 2 della cliente per prime) in una RIGA SCORREVOLE, alta
esattamente come le 3 foto delle altre stagioni (vedi «la riga scorrevole» qui sotto). */
.stagioni{--st-tacca:rgba(31,61,43,.26);--st-foto-gap:clamp(10px,1.4vw,20px);--st-scende:24px}
.stagioni.sezione{padding-bottom:0}
/* testa: titolo → germoglio a sinistra (7 colonne) · introduzione a destra (5), sull'asse delle voci */
.stagioni__testa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-bottom:var(--stacco)}
.stagioni__titoli{grid-column:1/span 7}
.stagioni__filetto{max-width:240px;margin-top:16px}
.stagioni__intro{grid-column:8/-1;margin:0;padding-bottom:3px;color:var(--testo-2)}
.stagioni__intro span{display:block;text-wrap:balance} /* le due frasi del copy, ognuna su righe sue ben bilanciate */
/* linguette editoriali: quattro quarti uguali, icona al tratto + nome in Playfair; nessun fondo */
.linguette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.linguetta{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:64px;padding:12px 8px 14px;border:0;border-radius:8px 8px 0 0;background:none;color:var(--bosco);font:500 var(--t-h4)/1.15 var(--serif);letter-spacing:var(--ls-h3);font-variant-numeric:lining-nums;cursor:pointer;-webkit-tap-highlight-color:transparent}
.linguetta>*{opacity:.78;transition:opacity var(--t-breve) ease} /* bosco «al 70%» che resta AA (5,5:1 sul salvia; fucsia attiva 4,6:1) */
.linguetta .stagioni__ico{width:24px;height:24px;color:inherit;--orn-tratto:1.3px}
.linguetta::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:currentColor;opacity:0;transition:opacity var(--t-breve) ease;pointer-events:none}
@media (hover:hover){.linguetta:hover>*{opacity:1}.linguetta:hover::after{opacity:.4}}
.linguetta[aria-selected="true"]{color:var(--fucsia);cursor:default}
.linguetta[aria-selected="true"]>*{opacity:1}
.linguetta[aria-selected="true"]::after{opacity:0}
.linguetta:focus-visible{outline-offset:-3px;border-radius:10px}
/* la linea dell'anno: filo, 12 tacche (le quattro stagioni un po' più lunghe), tratto fucsia che scivola, puntino di oggi */
.stagioni__anno{position:relative;height:10px;margin-bottom:clamp(40px,4.4vw,64px)}
.stagioni__anno::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--filetto)}
.stagioni__tacche{position:absolute;left:0;top:1px;width:100%;height:9px;overflow:visible;fill:none;stroke:var(--st-tacca);stroke-width:1px}
.stagioni__tratto{position:absolute;left:0;top:-1px;width:25%;height:2px;border-radius:2px;background:var(--fucsia);transform:translate3d(calc(var(--i,0) * 100%),0,0);transition:transform .64s var(--ease-out)}
.js[data-oggi="estate"] .stagioni__tratto{--i:1}
.js[data-oggi="autunno"] .stagioni__tratto{--i:2}
.js[data-oggi="inverno"] .stagioni__tratto{--i:3}
.stagioni__oggi{position:absolute;top:-3px;left:calc(var(--oggi,0) * 100% - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 3px var(--salvia-chiaro);opacity:0}
.stagioni__anno[style*="--oggi"] .stagioni__oggi{opacity:1}
/* i pannelli: niente riquadro. Foto a sinistra (7 colonne, la centrale scende di 24 px), voci a destra (5).
Con JS i quattro pannelli stanno nella stessa cella: l'altezza è quella del più alto e la pagina non salta mai al cambio. */
.js .stagioni__pannelli{display:grid}
.js .stagione{grid-area:1/1}
.stagione{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.stagione:focus-visible{outline-offset:12px;border-radius:var(--r-pannello)}
.stagione__nome{display:none;grid-column:1/-1;margin-bottom:24px;font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--bosco)}
.stagione__foto{grid-column:1/span 7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--st-foto-gap);align-items:start;list-style:none;padding-bottom:var(--st-scende)}
.stagione__foto li:nth-child(2){margin-top:var(--st-scende);margin-bottom:calc(var(--st-scende) * -1)}
.stagione__foto .foto{aspect-ratio:3/4} /* trattamento unico .foto; al passaggio .foto--zoom (1.04 in 1,1 s) */
.stagione__voci{grid-column:8/-1;list-style:none}
.stagione__voci li{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px 0;border-top:1px solid var(--filetto);font-size:var(--t-testo);line-height:1.5;color:var(--bosco)}
.stagione__voci li:last-child{border-bottom:1px solid var(--filetto)}
.stagione__voci .orn{margin-top:4px}
.stagione__voci li span{text-wrap:pretty}
/* la riga scorrevole (Estate, Inverno: 5 foto) nello stesso posto delle 3 foto. Stessa ALTEZZA delle foto di oggi e
stessa discesa della 2ª (e della 4ª): la linguetta resta alta uguale, cambiando stagione niente salta.
Le foto sono 2:3 invece di 3:4 (larghe 8/9 di oggi): così nelle 7 colonne ne stanno 3 intere + un terzo della 4ª,
l'indizio che si scorre (con 3:4 alte uguali le 3 foto riempiono le 7 colonne e della 4ª non si vedrebbe niente).
Scroll-snap, niente barra; scorre col dito, col trackpad, con Maiusc+rotella, da tastiera (tabindex 0: ← →);
col mouse due frecce al passaggio (main.js). Niente scorrimento automatico. */
.stagione__foto--riga{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--st-foto-gap)) * 8 / 27);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.stagione__foto--riga::-webkit-scrollbar{display:none}
.stagione__foto--riga li{scroll-snap-align:start}
.stagione__foto--riga li:nth-child(4){margin-top:var(--st-scende);margin-bottom:calc(var(--st-scende) * -1)}
.stagione__foto--riga .foto{aspect-ratio:2/3}
.stagione__foto--riga:focus-visible{outline-offset:6px;border-radius:var(--r-foto)}
/* le frecce (solo mouse: le crea main.js, aria-hidden e fuori dal Tab): sopra la riga, nella stessa cella della griglia */
.js .stagione__foto--riga{grid-row:1}
.stagione__frecce{grid-column:1/span 7;grid-row:1;align-self:center;z-index:1;display:flex;justify-content:space-between;padding-inline:12px;pointer-events:none}
.riga-freccia{pointer-events:auto;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(253,252,248,.94);color:var(--bosco);box-shadow:0 1px 3px rgba(31,61,43,.22),0 0 0 1px rgba(31,61,43,.08);cursor:pointer;opacity:0;transition:opacity var(--t-breve) ease}
.riga-freccia .ico{width:20px;height:20px}
.riga-freccia--prima .ico{transform:scaleX(-1)}
.stagione__foto--riga:hover+.stagione__frecce .riga-freccia,.stagione__frecce:hover .riga-freccia{opacity:1}
.riga-freccia[disabled]{opacity:0!important;pointer-events:none}
/* senza JS: niente linguette né linea dell'anno, le quattro stagioni in colonna col loro nome */
html:not(.js) .linguette,html:not(.js) .stagioni__anno{display:none}
html:not(.js) .stagione__nome{display:block}
html:not(.js) .stagione+.stagione{margin-top:56px;padding-top:48px;border-top:1px solid var(--filetto)}
.js .stagione[hidden]{visibility:hidden}
/* prima che parta main.js si vede già solo la stagione di oggi (data-oggi lo mette lo script in ) */
.js[data-oggi="primavera"] .stagione:not([data-stagione="primavera"]),
.js[data-oggi="estate"] .stagione:not([data-stagione="estate"]),
.js[data-oggi="autunno"] .stagione:not([data-stagione="autunno"]),
.js[data-oggi="inverno"] .stagione:not([data-stagione="inverno"]){display:none}
/* «Chiedi se c'è»: fascia --carta a tutta larghezza, filo sopra e sotto; frase in Playfair a sinistra, pulsante a destra */
.stagioni__chiedi{margin-top:var(--sezione-y-s);border-block:1px solid var(--filetto);background:var(--carta)}
.stagioni__chiedi-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding-block:clamp(36px,3.4vw,48px)}
.stagioni__chiedi p{grid-column:1/span 8;margin:0;padding-right:24px;font:400 var(--t-lead)/var(--lh-lead) var(--serif);color:var(--bosco);text-wrap:balance;font-variant-numeric:lining-nums}
.stagioni__chiedi .bottone{grid-column:9/-1;justify-self:end} /* chiude la riga sul filo destro, come «Chiama» in testata */
@media (max-width:899.98px){
.stagioni__testa{grid-template-columns:minmax(0,1fr)}
.stagioni__titoli,.stagioni__intro{grid-column:1/-1}
.stagioni__intro{margin-top:24px;padding-bottom:0}
.stagione{grid-template-columns:minmax(0,1fr)}
.stagione__foto,.stagione__voci,.stagione__frecce{grid-column:1/-1}
.stagione__voci{margin-top:32px}
.stagioni__chiedi-in{grid-template-columns:minmax(0,1fr) auto}
.stagioni__chiedi p{grid-column:1}
.stagioni__chiedi .bottone{grid-column:2}
}
@media (max-width:767.98px){
.stagioni{--st-foto-gap:8px;--st-scende:14px}
.linguetta{flex-direction:column;gap:6px;min-height:74px;padding:10px 2px 12px;font-size:clamp(.875rem,4.4vw,1.0625rem);letter-spacing:0}
.linguetta .stagioni__ico{width:22px;height:22px}
.stagioni__anno{margin-bottom:28px}
html:not(.js) .stagione+.stagione{margin-top:40px;padding-top:32px}
.stagione{align-content:start}
.stagione__voci{margin-top:24px}
.stagione__voci li{column-gap:14px;padding:15px 0}
.stagione__voci .orn{margin-top:3px}
.stagioni__chiedi-in{grid-template-columns:minmax(0,1fr);row-gap:20px;padding-block:32px 36px}
.stagioni__chiedi p,.stagioni__chiedi .bottone{grid-column:1/-1}
.stagioni__chiedi p{padding-right:0}
.stagioni__chiedi .bottone{justify-self:stretch}
/* le foto della stagione: una grande 3:4 a sinistra (la terza: le rose in Primavera, i ciclamini in Autunno) e due a destra,
al posto di tre miniature da 91–114 px. Nessun elemento solo in una riga */
.stagione__foto{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,calc(((100vw - 2 * var(--gutter) - var(--st-foto-gap)) / 2 * 4 / 3 - var(--st-foto-gap)) / 2));align-items:stretch;padding-bottom:0}
.stagione__foto li:nth-child(3){grid-column:1;grid-row:1 / span 2}
.stagione__foto li:nth-child(2){margin:0}
.stagione__foto .foto{aspect-ratio:auto;height:100%}
/* Estate e Inverno (5 foto): la riga scorrevole, alta quanto «una grande + due» (niente salta). Foto 2:3 larghe 4/9
della riga: 2 intere + un terzo della 3ª. La riga arriva ai bordi dello schermo; ferma, la prima foto parte dal filo
del testo, e l'ultima finisce sullo stesso filo a destra */
.stagione__foto--riga{grid-template-columns:none;grid-template-rows:none;grid-auto-columns:calc((100vw - 2 * var(--gutter) - var(--st-foto-gap)) * 4 / 9);align-items:start;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.stagione__foto--riga li:nth-child(n){grid-column:auto;grid-row:auto;margin:0}
.stagione__foto--riga .foto{aspect-ratio:2/3;height:auto}
/* fuoco da tastiera: la riga arriva ai bordi dello schermo, quindi l'anello sta dentro (−3px); le foto (position:relative)
gli passerebbero sopra: col fuoco la riga fa da contesto di impilamento e le foto vanno sotto l'anello (z-index −1) */
.stagione__foto--riga:focus-visible{outline-offset:-3px;position:relative;z-index:0}
.stagione__foto--riga:focus-visible .foto{z-index:-1}
}
/* ==== /BLOCCO:stagioni ==== */
/* ==== BLOCCO:domande ==== */
/* ═══ 7 · DOMANDE FREQUENTI — «la tavola del ciclamino» (cura 26/09) ═══
Computer (≥ 900): griglia a 12 colonne. Testa sticky nelle colonne 1–4: titolo e, sotto, la tavola d'erbario
(rifinitura 1: UNA cornice da 1 px e un tralcio d'angolo, come la tavola della firma; il ciclamino asimmetrico al 78%).
Fisarmonica nelle colonne 6–12: numero 01…08 in una colonna di 40 px · domanda · cerchio.
Il filo in cima alla lista sta all'altezza della testa del titolo.
Tablet e telefono (< 900): testa sopra la lista; il ciclamino, senza foglio, sta in piedi sul filo della lista, sopra la
colonna dei cerchi (a destra del titolo, mai sopra il testo). Solo transform e opacity; il colore cambia senza transizione. */
.domande{--faq-num:40px;--faq-segno:36px;--faq-spazio:24px;--faq-riga:calc(var(--t-h3) * var(--lh-h3))}
.domande__griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
/* ── testa: titolo → stacco → tavola ── */
.domande__testa{grid-column:1 / span 4;position:sticky;top:calc(var(--testata) + 40px)}
.domande__titolo{max-width:9em}
/* la tavola d'erbario: UNA cornice da 1 px color filetto col raggio dei pannelli (come la tavola della firma), un solo
tralcio orn-angolo da 64 px in alto a sinistra, il ciclamino al tratto largo il 78% del foglio */
.domande__tavola{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4 / 5;margin-top:var(--stacco);padding-bottom:4%;border:1px solid var(--filetto);border-radius:var(--r-pannello);background:var(--carta)}
.domande .domande__angolo{position:absolute;top:5px;left:5px;width:64px;height:64px}
.domande__esemplare{position:relative;width:78%}
.domande__ciclamino{width:100%;height:auto;aspect-ratio:160 / 172}
/* ≥ 1200: il foglio finisce esattamente sull'ultimo filo della lista (a riposo, con la prima domanda aperta).
Sopra il foglio ora c'è solo il titolo su due righe + stacco (rifinitura 1: niente occhiello né rametto); costante misurata
nel browser a 1200, 1280, 1440 e 1920 (scarto ≤ 0,5 px). Se una riga va a capo in modo diverso, il foglio resta solo un poco
più corto o più lungo. */
@media (min-width:1200px){
.domande__tavola{aspect-ratio:auto;height:clamp(360px,calc(486.3px + 9 * var(--faq-riga) - 2.12 * var(--t-h2) - var(--stacco)),640px)}
}
/* ── la fisarmonica ── */
.faq{grid-column:6 / -1;margin-top:calc(var(--t-h2) * .2375);border-top:1px solid var(--filetto)} /* il filo in cima sta sulla testa delle maiuscole del titolo */
.faq__voce{border-bottom:1px solid var(--filetto)}
.faq__voce summary{display:grid;grid-template-columns:var(--faq-num) minmax(0,1fr) var(--faq-segno);align-items:baseline;min-height:44px;padding:26px 0;list-style:none;cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent}
.faq__voce summary::-webkit-details-marker{display:none}
.faq__voce summary:focus-visible{outline-offset:4px;border-radius:8px}
.faq__num{font:400 .875rem/1 var(--serif);color:var(--verde-testo);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em}
.faq__frase{display:inline-block;text-wrap:balance} /* le domande doppie vanno a capo fra le due frasi */
.faq__domanda{margin-right:var(--faq-spazio);font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--bosco);text-wrap:balance;font-variant-numeric:lining-nums}
/* il segno: cerchio col filetto, + e − da 1,25 px (SVG: lo stesso tratto in ogni riga); aperto → cerchio pieno bosco
(opacità del fondo) e − crema; il tratto verticale ruota fino a coricarsi. Il margine negativo lo centra sulla riga
del testo senza allungare la riga (36 px di cerchio su 24–29 px di interlinea). */
.faq__segno{position:relative;align-self:center;width:var(--faq-segno);height:var(--faq-segno);margin-block:calc((var(--faq-riga) - var(--faq-segno)) / 2);border-radius:50%;box-shadow:inset 0 0 0 1px var(--filetto);color:var(--bosco);transition:transform var(--t-rapido) var(--ease)}
.faq__segno::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--bosco);opacity:0;transform:scale(.7);transition:opacity var(--t-breve) ease,transform var(--t-medio) var(--ease)}
.faq__segno svg{position:relative;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}
.faq__asta{transform-box:fill-box;transform-origin:50% 50%;transform:rotate(90deg);transition:transform var(--t-medio) var(--ease)}
.faq__voce[open] .faq__segno{color:var(--crema)}
.faq__voce[open] .faq__segno::before{opacity:1;transform:none}
.faq__voce[open] .faq__asta{transform:rotate(0deg)}
@media (hover:hover){
.faq__voce summary:hover .faq__domanda{color:var(--verde-testo)}
.faq__voce summary:hover .faq__segno{box-shadow:inset 0 0 0 1px var(--verde);color:var(--verde-testo)}
.faq__voce[open] summary:hover .faq__segno{color:var(--crema)}
}
.faq__voce summary:active .faq__segno{transform:scale(.94)}
/* la risposta: rientrata come la domanda, riga di lettura 38em */
.faq__risposta{margin-top:-8px;padding:0 calc(var(--faq-segno) + var(--faq-spazio)) 30px var(--faq-num);color:var(--testo-2)}
.faq__risposta p{margin:0;max-width:38em;font-size:var(--t-testo);line-height:var(--lh-testo);text-wrap:pretty}
.faq__risposta .link,.faq__intero{white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.faq__voce[open] .faq__risposta{animation:faq-apri .5s var(--ease-out)}}
@keyframes faq-apri{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* ── tablet e telefono: testa sopra la lista; il ciclamino in piedi sul filo della lista, sopra i cerchi ── */
@media (max-width:899.98px){
.domande{--domande-pianta:136px}
.domande__griglia{grid-template-columns:minmax(0,1fr)}
.domande__testa{grid-column:1;position:relative;top:auto;margin-bottom:var(--stacco)}
.domande__titolo{max-width:none}
/* niente foglio: resta la pianta, alta --domande-pianta; il punto più basso delle foglie (y 167,8 su 172 del disegno) poggia sul filo */
.domande__tavola{position:absolute;right:0;bottom:calc(-1 * var(--stacco) - var(--domande-pianta) * 4.2 / 172);display:block;width:auto;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0;background:none}
.domande .domande__angolo{display:none}
.domande__esemplare{width:calc(var(--domande-pianta) * 160 / 172)}
.faq{grid-column:1;margin-top:0}
}
/* ── telefono ── */
@media (max-width:767.98px){
.domande{--faq-num:28px;--faq-spazio:12px;--domande-pianta:84px}
.faq__voce summary{padding:22px 0}
.faq__risposta{padding-right:0;padding-bottom:26px}
}
@media (min-width:560px) and (max-width:767.98px){.domande{--domande-pianta:112px}}
/* sotto i 96 px d'altezza il ciclamino resta solo al tratto (il velo delle foglie è per gli ornamenti ≥ 96 px) */
@media (max-width:559.98px){.domande__ciclamino{--orn-velo:none}}
/* sotto i 360 px: il titolo resta su una riga, le domande scendono a 18 px (mai più di tre righe) */
@media (max-width:359.98px){
.domande{--t-h3:1.125rem;--domande-pianta:72px}
.domande__titolo{font-size:min(var(--t-h2),10vw)}
}
/* ── 28/09 (Modifiche 3): nel riquadro la foto di Claudia in piedi fra le dipladenie, al posto del ciclamino al tratto (Domenico).
Stessa cornice da 1 px col raggio dei pannelli e stesso tralcio d'angolo, sopra la foto; passe-partout di 10 px (8 da telefono).
Da telefono e tablet il riquadro non è più la piantina sul filo: è un foglio 4:5 sotto il titolo, largo al massimo 320 px. ── */
.domande__tavola--foto{display:block;padding:10px}
.domande__foto{display:block;width:100%;height:100%;aspect-ratio:auto;border-radius:calc(var(--r-pannello) - 5px)}
.domande__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.domande__tavola--foto .domande__angolo{z-index:1}
@media (max-width:899.98px){
.domande__tavola--foto{position:relative;right:auto;bottom:auto;width:min(100%,320px);aspect-ratio:4 / 5;margin:var(--stacco) 0 0;padding:8px;border:1px solid var(--filetto);border-radius:var(--r-pannello);background:var(--carta)}
.domande__tavola--foto .domande__angolo{display:block;top:3px;left:3px;width:48px;height:48px}
}
/* ==== /BLOCCO:domande ==== */
/* ==== BLOCCO:chi ==== */
/* ═══ 8 · CHI SIAMO — direzione editoriale (26/09) ═══
Fondo carta + filo sopra (classi del base, in pagina). Griglia a 12: foto 1–7, testo 8–12.
Foto: .foto (raggio unico, filo interno, velo caldo), 2:3, la seconda scesa di --chi-sfalso.
La mossa: il cartiglio del 4,9, composto come un numero da rivista fra due filetti (niente riquadro). */
.chi{
--chi-sfalso:56px; /* la seconda foto scende di tanto */
--chi-misura:calc(var(--t-lead) * 26); /* riga della frase (26em di lead): anche il cartiglio è largo così */
}
.chi__griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
/* ── le due foto: colonne 1–7, meno un respiro a destra (foto ↔ testo ≈ 88 px a 1440) ── */
.chi__foto{grid-column:1 / 8;padding-right:calc(var(--gap) * 1.75);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.chi__f{position:relative}
.chi__f--2{margin-top:var(--chi-sfalso)}
.chi__img{aspect-ratio:2/3}
.chi__img picture{height:100%}
.chi__f--1 .foto--zoom img{transform-origin:50% 0} /* la testa di Sandro è a ~15 px dal bordo alto: lo zoom al passaggio cresce verso il basso */
/* ── il testo: testa di sezione (titolo → 16 → rametto → 24 → frase) ── */
.chi__testo{grid-column:8 / 13}
.chi__rametto{margin:16px 0 24px}
.chi__lead{max-width:26em;margin:0;text-wrap:balance} /* 3–4 righe pari: niente riga corta in testa o in coda */
/* riga di WhatsApp: schema .collegamento (filo al 30% che si disegna pieno al passaggio), toni del testo */
.chi__wa{display:flex;margin:20px 0 0}
.chi__wa-link{min-height:44px;gap:12px;padding:8px 0;font-weight:400;color:var(--testo-2)}
.chi__wa-link .ico{width:20px;height:20px;color:var(--verde)}
.chi__wa-link:focus-visible{color:var(--bosco)}
@media (hover:hover){.chi__wa-link:hover{color:var(--bosco)}}
/* ── LA MOSSA: il cartiglio del 4,9 ── */
.chi__voto{position:relative;display:grid;justify-items:start;max-width:var(--chi-misura);margin-top:var(--stacco);padding:20px 0 22px;border-block:1px solid var(--filetto);color:var(--bosco);text-decoration:none;-webkit-tap-highlight-color:transparent}
/* i due fili verdi che si disegnano da sinistra al passaggio e al fuoco (solo transform) */
.chi__voto::before,.chi__voto::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--verde);transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-medio) var(--ease);pointer-events:none}
.chi__voto::before{top:-1px}
.chi__voto::after{bottom:-1px}
.chi__voto-prima{font-size:var(--t-piccolo);line-height:var(--lh-piccolo);color:var(--grigio)}
.chi__voto-riga{display:flex;align-items:baseline;gap:clamp(14px,1.3vw,20px);margin:-2px 0 clamp(12px,.6rem + .6vw,16px)}
.chi__voto-num{font:400 clamp(4rem,3rem + 3vw,6rem)/1 var(--serif);letter-spacing:-.03em;color:var(--bosco);font-variant-numeric:lining-nums}
/* le stelle poggiano sulla linea di base del numero: il disegno ha 3 px d'aria sotto, + 1 px ottico per le punte */
.chi__voto-stelle{display:inline-flex;gap:4px;color:var(--verde);transform:translateY(4px)}
.chi__voto-stelle .ico{width:18px;height:18px}
.chi__voto-dopo{justify-self:stretch;display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:var(--t-piccolo);line-height:var(--lh-piccolo);color:var(--testo-2)}
.chi__voto-dopo .ico{width:16px;height:16px;stroke-width:1.6;color:var(--bosco);transition:transform var(--t-medio) var(--ease)}
.chi__voto:focus-visible{outline-offset:6px;border-radius:4px}
/* fuoco da tastiera e tocco (telefono): i fili si disegnano come al passaggio */
.chi__voto:focus-visible::before,.chi__voto:focus-visible::after,.chi__voto:active::before,.chi__voto:active::after{transform:scaleX(1);transform-origin:0 50%}
@media (hover:hover){
.chi__voto:hover::before,.chi__voto:hover::after{transform:scaleX(1);transform-origin:0 50%}
.chi__voto:hover::after{transition-delay:.07s}
.chi__voto:hover .chi__voto-dopo .ico{transform:translate(2px,-2px)}
}
/* ── sotto i 1024: una colonna. Foto in riga (mai più alte di ~80% dello schermo: tetto sulla larghezza), testo sotto ── */
@media (max-width:1023.98px){
.chi__griglia{grid-template-columns:minmax(0,1fr);row-gap:var(--stacco)}
.chi__foto,.chi__testo{grid-column:1 / -1}
.chi__foto{padding-right:0;max-width:calc(106vh + var(--gap));max-width:calc(106svh + var(--gap))}
}
/* ── tablet (768–1023): testa, frase e WhatsApp a sinistra (colonne 1–7), il cartiglio a destra (9–12) ── */
@media (min-width:768px) and (max-width:1023.98px){
.chi__testo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.chi__testo>*{grid-column:1 / 8}
/* il filo basso del cartiglio cade sulla stessa riga della sottolineatura di WhatsApp (8 px = padding del link) */
.chi__testo>.chi__voto{grid-column:9 / 13;grid-row:1 / span 5;align-self:end;margin:0 0 8px}
}
/* da 768 in su la riga di WhatsApp sta sempre su una riga: il filo si disegna sotto tutto il testo */
/* 30/09: la frase è diventata più lunga («rispondiamo noi, i tuoi amici vivaisti 🌿»): va a capo anche da computer,
con la sottolineatura vera (come da telefono) al posto del filo disegnato, che non segue le due righe */
@media (min-width:768px){.chi__wa-link{align-items:flex-start}.chi__wa-link .ico{margin-top:2px}.chi__wa-link>span{max-width:24em;padding-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgba(74,95,82,.4);text-wrap:balance}.chi__wa-link>span::before,.chi__wa-link>span::after{display:none}}
html[data-tema="scuro"] .chi__wa-link>span{text-decoration-color:rgba(230,237,228,.35)}
/* ── telefono: foto 2 in riga (vincolo), testo sotto, cartiglio a tutta larghezza ── */
@media (max-width:767.98px){
.chi{--chi-sfalso:32px}
.chi__voto{max-width:none}
/* il testo di WhatsApp può andare su due righe: sottolineatura del testo (una per riga), niente filo disegnato */
.chi__wa-link{align-items:flex-start}
.chi__wa-link .ico{margin-top:2px}
.chi__wa-link>span{padding-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgba(74,95,82,.4);text-wrap:balance}
.chi__wa-link>span::before,.chi__wa-link>span::after{display:none}
}
/* ③ comparsa: le due foto salgono una dopo l'altra (la seconda un poco più tardi) */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.chi__f{animation-name:rivela-foto}
.chi__f--2{animation-range:entry 12% cover 20%}
}
}
/* ==== /BLOCCO:chi ==== */
/* ==== BLOCCO:dove ==== */
/* ═══ 9 · DOVE SIAMO, ORARI E CONTATTI — fondo crema col filo sopra (viene dopo il bianco caldo di «Chi siamo»).
Da 1024 px due colonne (testo 7 · foto 5, la foto è sticky); sotto, una colonna con la foto 4:3 dopo i contatti.
Niente scatole: il luogo (indirizzo su tre righe, come su una busta), gli orari (tabella a fili), i contatti.
La mossa «il cartello fra i tralci»: un orn-angolo salvia sale sull'angolo alto-sinistro della foto.
Il componente .orari è nel blocco base (condiviso col footer di privacy/404): qui lo si ritocca SOLO dentro .dove__orari. ═══ */
.dove{--dove-misura:40rem;--dove-tralcio:112px;--dove-sporge:20px}
.dove__griglia{display:grid;grid-template-columns:minmax(0,1fr);row-gap:calc(var(--stacco) + 8px)}
.dove__testo{min-width:0;max-width:var(--dove-misura)}
/* testa: occhiello → 18 → titolo → 16 → rametto → 24 → indirizzo */
.dove__rametto{margin-top:16px}
/* il luogo */
.dove__luogo{margin-top:24px}
.dove__indirizzo{margin:0;line-height:1.34} /* tre righe come su una busta: interlinea più stretta del .lead corrente */
.dove__indirizzo span{display:block}
.dove__vicino,.dove__cartello{margin:0;font-size:var(--t-testo);line-height:var(--lh-testo);color:var(--testo-2);text-wrap:pretty}
.dove__vicino{margin-top:20px} /* l'indirizzo si stacca; le due indicazioni per arrivare stanno insieme */
.dove__cartello{margin-top:6px}
.dove__intero{white-space:nowrap} /* «Vendita diretta» e FI-PI-LI non si spezzano */
/* gli orari: tabella tipografica. Righe a fili, giorno DM Sans 500 a sinistra, ore Playfair a cifre tabulari a destra.
Oggi (rifinitura 1): il fondo salvia chiarissimo sta FRA i due filetti, senza raggio e senza uscire dalla colonna;
il puntino che respira sta dentro la riga, nel rientro di 20 px che hanno tutte le righe (i giorni restano allineati). */
.dove__orari{margin-top:var(--stacco)}
.dove__orari .sottotitolo{margin:0 0 14px}
.dove__orari .orari{border-top:1px solid var(--filetto)}
.dove__orari .orari__riga{position:relative;isolation:isolate;display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0;padding:17px 12px 16px 20px;border-radius:0;border-bottom:1px solid var(--filetto)}
.dove__orari .orari__riga+.orari__riga{margin-top:0}
.dove__orari .orari dt{font-weight:500;font-size:var(--t-testo);letter-spacing:.005em;color:var(--bosco)}
.dove__orari .orari dd{font-family:var(--serif);font-weight:500;font-size:1.1875rem;line-height:1.3;letter-spacing:.005em;color:var(--bosco);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.dove__orari .orari__due{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dove__orari .orari__riga.is-oggi{background:none}
.dove__orari .orari__riga.is-oggi::before{content:"";position:absolute;inset:-1px 0;z-index:-1;border-radius:0;background:var(--salvia-chiaro)}
.dove__orari .orari__riga.is-oggi dt::before,
.dove__orari .orari__riga.is-oggi dt::after{position:absolute;top:50%;left:-14px;margin:-4px 0 0}
/* telefono (< 600 px): il giorno sopra, le ore sotto; fascia e puntino come da computer (dentro la colonna, a sinistra) */
@media (max-width:599.98px){
.dove__orari .orari__riga{flex-direction:column;align-items:stretch;gap:3px;padding:15px 12px 14px 20px}
.dove__orari .orari dt{font-size:1rem}
.dove__orari .orari dd{text-align:left}
}
/* i contatti: da stretto in colonna col numero sotto (62 px) · da 400 px in riga col numero sotto · da 620 px in riga,
numero accanto (56 px). Decide la larghezza del gruppo (container query), non lo schermo. */
.dove__contatti{margin-top:48px;container-type:inline-size}
.dove__contatti .sottotitolo{margin:0 0 12px}
.dove__invito{margin:0 0 24px;color:var(--testo-2)}
.dove__invito span{display:block;text-wrap:balance} /* una frase per riga: Claudia su WhatsApp, poi la chiamata */
.dove__bottoni{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.dove__bottoni .bottone{width:100%;padding:0 20px;white-space:normal;text-align:center}
.dove__bottoni .num{font-variant-numeric:lining-nums}
.dove__mappa{margin-top:14px}
@media (hover:hover){.dove__mappa:hover .ico:last-child{transform:translate(3px,-3px)}}
@container (min-width:400px){
.dove__bottoni{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:620px){
.dove__bottoni{display:flex;gap:12px}
.dove__bottoni .bottone{--h:56px;width:auto;padding:0 26px;white-space:nowrap}
.dove__bottoni .bottone__testo{display:inline;line-height:inherit}
.dove__bottoni .sep{display:inline;opacity:.55}
.dove__bottoni .num{font-size:1em;font-weight:400}
}
/* la foto del cartello: trattamento unico .foto (raggio, filo interno, velo caldo), niente ombra; 4:3, poi 4:5 sticky */
.dove__foto{position:relative;min-width:0;margin:0}
.dove__cornice{position:relative}
.dove__img{aspect-ratio:4/3}
.dove__img img{object-position:50% 50%}
/* il tralcio: sale sull'angolo alto-sinistro, sporge di --dove-sporge oltre il bordo. Fermo (il respiro non è suo). */
.dove__tralcio{position:absolute;z-index:3;top:calc(var(--dove-sporge) * -1);left:calc(var(--dove-sporge) * -1);width:var(--dove-tralcio);height:var(--dove-tralcio)}
@media (max-width:767.98px){
.dove{--dove-tralcio:80px;--dove-sporge:12px}
.dove__tralcio{--orn-velo:none}
}
@media (min-width:1024px){
.dove__griglia{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(48px,6vw,96px);align-items:start}
.dove__foto{position:sticky;top:calc(var(--testata) + 40px)}
.dove__img{aspect-ratio:4/5}
}
/* ③ comparsa della foto (la stessa tecnica .rivela, con la sua curva) */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.dove__foto{animation-name:rivela-foto}
}
}
/* ==== /BLOCCO:dove ==== */
/* ==== BLOCCO:piede ==== */
/* Footer, barra dei contatti del telefono, avviso sui cookie, e le pagine semplici (privacy.html, 404.html).
LA MOSSA — «il ramo sul verde»: il footer chiude la pagina come l'apertura l'ha aperta. Un ramo al tratto
(orn-ramo) pende dall'angolo alto a destra, l'opposto del rametto, e respira con lui (tecnica ⑤, secondo e
ultimo punto del sito). Tutto il resto è filetti da 1 px, una griglia a 12 e aria. */
/* ═══ FOOTER ═══ */
.piede{
--piede-ramo-h:180px; /* altezza del ramo (viewBox 120×220) */
--piede-ramo-w:calc(var(--piede-ramo-h) * .5455);
--piede-ramo-x:clamp(8px,1.2vw,20px); /* distanza dal bordo destro: pende dall'angolo, come il rametto */
--piede-testo:rgba(248,246,240,.78); /* 7,1:1 sul bosco */
--piede-tenue:rgba(248,246,240,.72); /* 6,2:1 sul bosco */
position:relative;padding-top:var(--sezione-y-s);color:var(--piede-testo);font:400 var(--t-piccolo)/1.6 var(--sans)
}
.piede a{color:var(--crema);text-decoration:none;-webkit-tap-highlight-color:transparent}
.piede__nw{white-space:nowrap}
/* il ramo: in alto a destra, fuori dal testo; il perno è l'attacco del fusto (x 72/120) */
.piede__ramo{position:absolute;top:0;right:var(--piede-ramo-x);width:var(--piede-ramo-w);height:var(--piede-ramo-h);--perno:60% 0;pointer-events:none}
.piede__ramo .orn{width:100%;height:100%;opacity:.5}
/* il filetto in cima: filo — germoglio — filo, sulla larghezza del contenitore, germoglio sempre al centro.
Dove il ramo scende dentro il contenitore (sotto i ~1400 px) il filo di destra si ferma prima delle foglie:
il ramo ne diventa il capo, il filo non passa mai sotto il disegno */
.piede__filetto{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);color:rgba(156,192,168,.72)}
.piede__filetto::before,.piede__filetto::after{background:var(--filetto-chiaro);opacity:1}
.piede__filetto::after{margin-right:max(0px,calc(var(--piede-ramo-w) + var(--piede-ramo-x) - 16px - var(--sx)))}
.piede__filetto .orn{width:44px;height:29px}
/* griglia a 12: marchio 1–5 · menu 7–12 (in due colonne) · [privacy/404] orari 1–5 · contatti 7–12 */
.piede__griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--stacco);align-items:start;margin-top:var(--stacco)}
.piede__marchio{grid-column:1 / span 5;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.piede__insegne{flex:none;display:flex;align-items:center;gap:12px}
.piede__logo{flex:none;display:block;width:119px;height:88px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(248,246,240,.16)}
.piede__logo img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.piede__dedicato{flex:none;display:block;width:142px;height:88px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(248,246,240,.16)}
.piede__dedicato img{width:100%;height:100%;object-fit:cover}
.piede__dati{min-width:0}
.piede__indirizzo{margin:0;color:var(--piede-testo);text-wrap:pretty}
.piede__social{display:flex;gap:10px;margin-top:16px}
.piede__social a{position:relative;isolation:isolate;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--filetto-chiaro);transition:transform var(--t-medio) var(--ease)}
.piede__social a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(248,246,240,.1);opacity:0;transition:opacity var(--t-breve) ease}
.piede__social .ico{width:19px;height:19px}
.piede__social a:focus-visible{outline-offset:4px;border-radius:50%}
.piede__social a:active{transform:scale(.96);transition-duration:var(--t-rapido)}
/* menu: DM Sans 500 15 px, il filo si disegna da sinistra al passaggio e al fuoco */
.piede__nav{grid-column:7 / -1;margin-top:-8px}
.piede__menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:var(--gap);list-style:none}
.piede__menu a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;font:500 .9375rem/1.3 var(--sans);letter-spacing:.01em}
/* il filo che si disegna: menu, contatti e link del fondo (a riposo i link del fondo hanno il filo al 35%) */
.piede__menu a>span,.piede__righe a>span,.piede__link>span{position:relative;padding-bottom:3px}
.piede__menu a>span::after,.piede__righe a>span::after,.piede__link>span::after,.piede__link>span::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;pointer-events:none}
.piede__link>span::before{opacity:.35}
.piede__menu a>span::after,.piede__righe a>span::after,.piede__link>span::after{transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-medio) var(--ease)}
.piede__menu a:focus-visible>span::after,.piede__righe a:focus-visible>span::after,.piede__link:focus-visible>span::after{transform:scaleX(1);transform-origin:0 50%}
/* privacy e 404: orari e contatti come due piccole tabelle a filetti */
.piede__orari{grid-column:1 / span 5}
.piede__contatti{grid-column:7 / -1}
.piede__titolo{margin:0 0 14px;font:500 var(--t-occhiello)/1.2 var(--sans);letter-spacing:var(--ls-occhiello);text-transform:uppercase;color:var(--salvia)}
.orari--piede,.piede__righe{list-style:none;box-shadow:inset 0 1px 0 var(--filetto-chiaro)}
.orari--piede .orari__riga{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;font-size:inherit;gap:2px 24px;min-height:52px;margin:0;padding:14px 0;border-radius:0;background:none;box-shadow:inset 0 -1px 0 var(--filetto-chiaro)}
.orari--piede .orari__riga+.orari__riga{margin-top:0}
.orari--piede .orari__riga.is-oggi{background:none}
.orari--piede dt{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:500;color:var(--crema)}
.orari--piede dd{color:var(--piede-testo);text-align:right;font-variant-numeric:tabular-nums}
.orari--piede .orari__due{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* oggi: il puntino salvia DOPO il nome del giorno (così i nomi restano allineati a sinistra) e respira */
.orari--piede .orari__riga.is-oggi dt::before{order:3;display:block;margin:0;background:var(--salvia)}
.orari--piede .orari__riga.is-oggi dt::after{left:auto;right:0;background:var(--salvia)}
.piede__righe li{box-shadow:inset 0 -1px 0 var(--filetto-chiaro)}
.piede__righe a{display:flex;align-items:center;gap:12px;min-height:52px;padding-block:4px;font-weight:500}
.piede__righe .ico{width:18px;height:18px;color:var(--salvia)}
.piede__righe .piede__freccia{margin-left:auto;width:18px;height:18px;opacity:.7;transition:transform var(--t-medio) var(--ease)}
.piede__righe a:focus-visible{outline-offset:2px}
/* fondo: filo, «Informativa privacy» e la firma, 14 px */
.piede__fondo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;margin-top:calc(var(--stacco) + 16px);padding-block:18px 24px;box-shadow:inset 0 1px 0 var(--filetto-chiaro);font-size:.875rem;line-height:1.4;color:var(--piede-tenue)}
.piede__fondo p{margin:0}
.piede__legali{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.piede__lingue{display:flex;flex-wrap:wrap;gap:0 16px;list-style:none}
.piede__lingue a[aria-current]{color:var(--crema)}
.piede__lingue a[aria-current]>span::after{transform:scaleX(1);transform-origin:0 50%}
.piede__link{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}
.credit{margin:0}
body.avviso-su .piede__fondo{padding-bottom:96px}
@media (hover:hover){
.piede__social a:hover{transform:translateY(-2px)}
.piede__social a:hover::before{opacity:1}
.piede__menu a:hover>span::after,.piede__righe a:hover>span::after,.piede__link:hover>span::after{transform:scaleX(1);transform-origin:0 50%}
.piede__righe a:hover .piede__freccia{transform:translateX(4px)}
}
/* tablet: marchio e orari 1–6, menu e contatti 7–12; il ramo (150 px) sta tutto sopra il contenuto.
Il marchio va in colonna sotto i 960 px, il menu in una colonna sola sotto i 768 («Domande frequenti» non va a capo) */
@media (max-width:1079.98px){
.piede{--piede-ramo-h:150px}
.piede__marchio{grid-column:1 / span 6}
.piede__orari{grid-column:1 / span 6}
.piede__contatti{grid-column:7 / -1}
}
@media (max-width:959.98px){
.piede{--piede-ramo-h:132px}
.piede__marchio{flex-direction:column;align-items:flex-start;gap:22px}
.piede__nav{margin-top:-10px}
}
@media (max-width:767.98px){
.piede__menu{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
}
/* telefono (<600): un colophon centrato; il menu si nasconde (c'è quello della testata), senza JS resta; niente ramo */
@media (max-width:599.98px){
.piede__ramo{display:none}
.piede__filetto::after{margin-right:0}
.piede__griglia{grid-template-columns:minmax(0,1fr);row-gap:44px;text-align:center}
.piede__marchio,.piede__nav,.piede__orari,.piede__contatti{grid-column:1 / -1}
.piede__marchio{align-items:center;gap:20px}
.piede__indirizzo{font-size:.9375rem}
.piede__social{justify-content:center;margin-top:18px}
.piede__nav{display:none;margin-top:-12px}
html:not(.js) .piede__nav{display:block}
.piede__menu a{justify-content:center}
.piede__orari,.piede__contatti{text-align:left}
.piede__titolo{text-align:center}
.piede__fondo{flex-direction:column;justify-content:center;text-align:center;margin-top:48px;padding-block:14px 20px}
.piede__legali,.piede__lingue{justify-content:center}
}
/* sotto i 380 px la riga «Lunedì–sabato … 8:30–12:30 e 15:30–19:30» non sta più in una riga: tutte e due le righe
vanno in colonna (giorno sopra, orario sotto), così la tabella resta regolare */
@media (max-width:379.98px){
.orari--piede .orari__riga{flex-direction:column;align-items:flex-start;gap:2px}
.orari--piede dd{text-align:left}
}
/* ═══ BARRA DEI CONTATTI (telefono) — carta al 96 % con filo sopra, niente ombra ═══ */
.barra{display:none}
@media (max-width:767.98px){
.barra{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));background:rgba(253,252,248,.96);box-shadow:inset 0 1px 0 var(--filetto);transform:translateY(110%);transition:transform var(--t-medio) var(--ease-out)}
.barra .bottone{--h:50px;padding:0 12px}
body.barra-su .barra{transform:none}
html.menu-aperto .barra{transform:translateY(110%)}
html:not(.js) .barra{transform:none}
}
/* ═══ AVVISO COOKIE — una riga, stretta, al centro in basso. Compare solo dopo il primo scorrimento:
nella prima schermata non copre mai la striscia dei quattro punti. Rifinitura 1: chiaro e leggero (carta col filetto),
non più una pillola verde piena — la regola THK lo vuole discreto ═══ */
.avviso{position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100vw - 16px);margin-inline:auto;padding:5px 5px 5px 20px;border-radius:var(--r-pillola);background:var(--carta);color:var(--bosco);font:400 .875rem/1.3 var(--sans);white-space:nowrap;box-shadow:0 0 0 1px var(--filetto),0 12px 28px -18px rgba(31,61,43,.35);opacity:0;transform:translateY(14px);transition:opacity var(--t-medio) ease,transform var(--t-medio) var(--ease-out)}
.avviso[hidden]{display:none}
.avviso.is-su{opacity:1;transform:none}
.avviso p{margin:0}
.avviso a{display:inline-block;padding:13px 4px;margin:-13px -4px;color:var(--verde-testo);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(0,109,40,.35)}
.avviso__ok{position:relative;isolation:isolate;flex:none;min-width:48px;min-height:34px;padding:0 16px;border:0;border-radius:var(--r-pillola);background:var(--bosco);color:var(--crema);font:500 .875rem/1 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--t-rapido) var(--ease)}
.avviso__ok::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bosco-2);opacity:0;transition:opacity var(--t-breve) ease}
.avviso__ok:active{transform:scale(.96)}
.avviso :focus-visible{outline-color:var(--verde)}
.avviso__ok:focus-visible{outline-offset:3px;border-radius:var(--r-pillola)}
@media (hover:hover){.avviso a:hover{text-decoration-color:currentColor}.avviso__ok:hover::before{opacity:1}}
@media (max-width:767.98px){
.avviso{bottom:calc(8px + env(safe-area-inset-bottom));gap:10px;padding:4px 4px 4px 16px}
.avviso__ok{min-height:44px;min-width:52px}
body.barra-su .avviso.is-su{transform:translateY(calc(-1 * var(--barra)))}
}
/* «Ok» sempre dentro la pillola e dentro lo schermo. Sotto i 375 px si stringe;
sotto i 360 px il testo va su due righe (su una riga non ci sta: «Ok» finiva fuori dallo schermo a 320) */
@media (max-width:374.98px){.avviso{gap:8px;padding-left:14px}}
@media (max-width:359.98px){
.avviso{white-space:normal;border-radius:22px;padding:6px 6px 6px 14px}
.avviso p{flex:1;min-width:0}
}
/* pagine tradotte (28/09): un testo più lungo del suo «max» va a capo dentro la pillola, «Ok» resta dentro lo schermo */
html:not([lang="it"]) .avviso{white-space:normal}
html:not([lang="it"]) .avviso p{flex:1 1 auto;min-width:0}
/* al tocco (anche sui tablet) «Ok» è alto 44 px */
@media (pointer:coarse){.avviso__ok{min-height:44px}}
/* ═══ PAGINE SEMPLICI (privacy, 404) — stesso sistema: titolo come .titolo, filetto, sezioni numerate a filetti ═══ */
.pagina{padding-block:var(--sezione-y)}
.pagina__titolo{margin:0}
.pagina__filetto{margin-top:16px} /* stesso filetto dei titoli della home (base: .filetto--sinistra) */
.pagina__cortesia{margin:0 0 20px;font-size:var(--t-piccolo);line-height:var(--lh-piccolo);color:var(--grigio)}
.pagina__data{margin:22px 0 0;font-size:var(--t-piccolo);line-height:var(--lh-piccolo);color:var(--grigio)}
.pagina__corpo{margin-top:var(--stacco)}
/* una sezione: filo sopra, numero neutro nel margine (colonne 1–2), testo alle colonne 3–10 (riga ≤ 34em) */
.pagina__parte{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding-block:40px 24px;box-shadow:inset 0 1px 0 var(--filetto)}
.pagina__num{grid-column:1 / span 2;font:400 1.125rem/1.3 var(--serif);color:var(--verde-testo);font-variant-numeric:lining-nums tabular-nums}
.pagina__parte>.pagina__testo,.pagina__parte--fine>.pagina__azioni{grid-column:3 / span 8}
.pagina__testo h2{margin:0 0 16px;font:500 var(--t-h3)/var(--lh-h3) var(--serif);letter-spacing:var(--ls-h3);color:var(--bosco);text-wrap:balance;font-variant-numeric:lining-nums;scroll-margin-top:calc(var(--testata) + 24px)}
.pagina__testo p,.pagina__testo li{max-width:34em;color:var(--testo-2);text-wrap:pretty}
.pagina__testo p:last-child{margin-bottom:0}
.pagina__testo a:not(.bottone),.pagina__elenco a{color:var(--verde-testo);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(0,109,40,.35)}
@media (hover:hover){.pagina__testo a:not(.bottone):hover{text-decoration-color:currentColor}}
.pagina__testo code{padding:.1em .36em;border-radius:6px;background:var(--salvia-chiaro);color:var(--bosco);font:500 .88em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}
.pagina__elenco{list-style:none;margin:0 0 1em}
.pagina__elenco li{display:flex;align-items:baseline;gap:12px}
.pagina__elenco li+li{margin-top:8px}
.pagina__elenco .orn{width:16px;height:16px;transform:translateY(3px)}
.pagina__parte--fine{padding-block:40px 0}
.pagina__azioni{display:flex;flex-wrap:wrap;gap:12px}
/* «Torna alla home»: la freccia guarda indietro e al passaggio va indietro */
.pagina__indietro .ico{transform:scaleX(-1);transition:transform var(--t-medio) var(--ease)}
@media (hover:hover){.pagina__indietro:hover .ico{transform:translateX(-4px) scaleX(-1)}}
/* 404: al centro, il germoglio grande sopra il titolo */
.pagina--404{display:grid;place-items:center;min-height:calc(100svh - var(--testata));padding-block:var(--sezione-y-s) var(--sezione-y);text-align:center}
.pagina__centro{max-width:900px;margin-inline:auto}
.pagina__centro .titolo{max-width:14em;margin-inline:auto}
.pagina__germoglio{width:120px;height:80px;margin:0 auto 28px;color:var(--salvia)}
.pagina__frase{max-width:24em;margin:24px auto 0;text-wrap:balance}
.pagina--404 .pagina__azioni{justify-content:center;margin-top:var(--stacco)}
@media (max-width:767.98px){
.pagina{padding-top:112px}
.pagina--404{min-height:0;padding-bottom:var(--sezione-y)}
.pagina__parte{display:block;padding-block:32px 20px}
.pagina__num{display:block;margin-bottom:10px;padding:0}
.pagina__parte--fine{padding-block:32px 0}
}
/* 404 da tablet: i tre pulsanti non stanno in riga → i due contatti in riga, «Torna alla home» sotto, da solo e al centro */
@media (min-width:680px) and (max-width:959.98px){
.pagina--404 .pagina__azioni::after{content:"";order:2;flex-basis:100%;height:0}
.pagina--404 .pagina__indietro{order:3}
}
/* 404 da telefono: WhatsApp e Chiama ci sono già nella barra e nel piede (tre volte in uno scorrimento): resta «Torna alla home».
Senza JS la barra resta visibile, quindi nessuno perde i contatti */
@media (max-width:767.98px){.pagina--404 .pagina__contatto{display:none}}
@media (max-width:679.98px){
.pagina--404 .pagina__azioni{flex-direction:column;align-items:stretch;max-width:420px;margin-inline:auto}
.pagina--404 .bottone{width:100%}
}
@media (max-width:599.98px){
.pagina__germoglio{width:96px;height:64px;margin-bottom:22px}
.pagina__contatto{--h:62px}
.pagina__contatto .bottone__testo{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.pagina__contatto .sep{display:none}
.pagina__contatto .num{font-size:.88em;font-weight:400}
}
/* ==== /BLOCCO:piede ==== */
/* ==== BLOCCO:avviso-cima ==== */
/* L'AVVISO IN CIMA AL SITO (pannello, 28/09/2026): una riga che la cliente accende e spegne dal pannello («Chiusi per ferie…»).
Il middleware la mette all'inizio del e aggiunge la classe con-avviso a ; un piccolo script ne misura l'altezza
(--avviso-h) e tutto quello che è fissato in alto scende di quanto serve. Fascia verde pino, testo crema, al centro. */
.avviso-cima{position:fixed;top:0;left:0;right:0;z-index:60;padding:10px var(--sx);background:var(--pino);color:var(--crema);text-align:center}
.avviso-cima__testo{max-width:60em;margin:0 auto;font:500 .9375rem/1.4 var(--sans);letter-spacing:.01em;text-wrap:balance}
html.con-avviso body{padding-top:var(--avviso-h,0px)}
html.con-avviso .testata{top:var(--avviso-h,0px)}
html.con-avviso .rametto{top:var(--avviso-h,0px)}
html.con-avviso .pannello{top:calc(var(--testata) + var(--avviso-h,0px))}
html.con-avviso{scroll-padding-top:calc(var(--testata) + var(--avviso-h,0px) + 16px)}
@media (max-width:767.98px){.avviso-cima{padding:8px 16px}.avviso-cima__testo{font-size:.875rem}}
/* ==== /BLOCCO:avviso-cima ==== */
/* ==== BLOCCO:tema-scuro ==== */
/* VERSIONE CHIARA E SCURA (29/09/2026). La chiara è quella di sempre ed è la versione di partenza. La scura si accende col
pulsante tondo della testata (). Stessa famiglia: verde bosco quasi nero al posto del crema,
testo crema, verdi schiariti per restare leggibili (AA). Le foto non cambiano; il logo resta nel suo ovale bianco; la tavola
della pianta che cresce resta un foglio chiaro d'erbario (il disegno ha colori fissi). Si animano solo transform e opacity. */
html{color-scheme:light}
/* il pulsante: tondo 44 px, filetto sottile, luna nella chiara e sole nella scura */
.tema{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0 0 0 2px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--testo);cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 0 0 1px var(--filetto);transition:transform var(--t-breve) ease}
.tema:active{transform:scale(.94)}
.tema:focus-visible{outline-offset:2px;border-radius:50%}
.tema__icona{grid-area:1 / 1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--t-breve) ease,transform var(--t-medio) var(--ease)}
.tema__luna{fill:currentColor;stroke:none}
.tema__sole{opacity:0;transform:rotate(-45deg) scale(.7)}
html[data-tema="scuro"] .tema__luna{opacity:0;transform:rotate(45deg) scale(.7)}
html[data-tema="scuro"] .tema__sole{opacity:1;transform:none}
@media (hover:hover){.tema:hover{box-shadow:inset 0 0 0 1px var(--testo)}}
/* da telefono: a destra, accanto al menu (la lingua sta a sinistra, il logo al centro) */
@media (max-width:767.98px){.tema{margin:0 -14px 0 auto;width:42px;height:42px}.testata .hamburger{margin-left:0}}
/* da computer la riga è piena: un filo più stretti gli spazi fra le voci e il logo, perché ci stia anche il tondo */
@media (min-width:1200px) and (max-width:1279.98px){.testata{--logo:102px}.menu ul{gap:9px}.menu a{font-size:.83rem;letter-spacing:0}.testata__chiama{padding:0 13px}}
@media (min-width:1280px) and (max-width:1365.98px){.testata{--logo:124px}.menu ul{gap:calc(9px + (100vw - 1280px) * .07)}.menu a{font-size:.875rem;letter-spacing:0}.testata__chiama{padding:0 15px}}
@media (min-width:1366px){.menu ul{gap:15px}.menu a{font-size:.875rem}.testata__chiama{padding:0 18px}}
@media (min-width:1366px) and (max-width:1439.98px){.menu ul{gap:11px}}
/* ── i colori della versione scura ── */
html[data-tema="scuro"]{
color-scheme:dark;
--scuro-1:#0E1611; /* la pagina */
--scuro-2:#131E17; /* fogli, pannelli, avviso */
--scuro-3:#1A2A21; /* il salvia chiarissimo: righe evidenziate, segnaposti delle foto */
--banda:#07100A; /* le fasce verde bosco (produttori, piede) */
--bosco:#E6EDE4; /* titoli e testi che nella chiara sono verde bosco */
--bosco-2:#DCE5DA;
--testo:#E6EDE4;
--testo-2:#BFCCC2;
--grigio:#A3B4A9;
--verde-testo:#7FD49C; /* il verde dei link e della voce attiva: AA su --scuro-1 */
--verde:#4DBF72;
--verde-scuro:#43AD66;
--carta:var(--scuro-2);
--salvia-chiaro:var(--scuro-3);
--filetto:rgba(230,237,228,.14);
--anello:#7FD49C;
}
html[data-tema="scuro"] body,
html[data-tema="scuro"] .fondo--crema,
html[data-tema="scuro"] .testata__fondo{background:var(--scuro-1)}
/* dove il verde bosco è un FONDO resta scuro (e dentro, i testi crema restano crema) */
html[data-tema="scuro"] .fondo--bosco,
html[data-tema="scuro"] .apertura,
html[data-tema="scuro"] .produttori{--bosco:var(--banda);--bosco-2:#050B07}
html[data-tema="scuro"] .fondo--bosco{background:var(--banda)}
html[data-tema="scuro"] .salta{background:#23402E}
html[data-tema="scuro"] .bottone--scuro,
html[data-tema="scuro"] .avviso__ok{background:#23402E;color:var(--crema)}
html[data-tema="scuro"] .faq__segno::before{background:#23402E}
/* il pulsante chiaro sull'apertura («Dove siamo») resta chiaro, con il testo verde bosco */
html[data-tema="scuro"] .bottone--crema{color:#1F3D2B}
/* la tavola della pianta che cresce: resta un foglio chiaro, con i suoi colori di sempre */
html[data-tema="scuro"] .nasce__scena{--carta:#FDFCF8;--bosco:#1F3D2B;--testo:#1F3D2B;--testo-2:#4A5F52;--grigio:#5F6D65;--filetto:rgba(31,61,43,.14);--verde:#008430;--verde-testo:#006D28;--salvia-chiaro:#EAF0E8}
html[data-tema="scuro"] .pagina__testo code{background:var(--scuro-3)}
/* la barra dei contatti in basso (telefono): fondo scuro, «Chiama» leggibile */
html[data-tema="scuro"] .barra{background:rgba(19,30,23,.96)}
/* i pulsanti bianchi restano bianchi col testo verde bosco; le frecce delle righe di foto su fondo scuro */
html[data-tema="scuro"] .bottone--chiaro{color:#1F3D2B}
html[data-tema="scuro"] .riga-freccia{background:rgba(19,30,23,.94);color:var(--testo);box-shadow:0 0 0 1px var(--filetto)}
/* i numeri «spenti» dei passaggi della firma (nella chiara verde bosco al 55%) */
html[data-tema="scuro"] .nasce{--n-num-spento:rgba(230,237,228,.38)}
/* ==== /BLOCCO:tema-scuro ==== */