e prendeva il margine dei paragrafi: quello spazio
vuoto in cima faceva partire l'immagine più in alto delle scritte */
.bio-split .split__text > :first-child{margin-top:0}
/* il PNG ha ~28.9% di margine trasparente a sx e ~15.6% (della larghezza) sopra/sotto:
compenso con margini negativi per allineare la FOGLIA VERDE al bordo del testo */
.bio-logo{width:132px;height:auto;opacity:.96;align-self:flex-start;margin:6px 0 -21px -38px}
@media (max-width:860px){
/* impilate: senza testo a fianco l'immagine non ha da chi prendere
l'altezza, quindi gliela do esplicitamente */
.bio-split .bio-media{height:clamp(200px,52vw,300px)}
}
/* sezione VENDITE NEL MONDO + globo */
.world{position:relative;overflow:hidden;padding-block:clamp(44px,6vw,86px)}
.world-grid{display:grid;grid-template-columns:.82fr 1.5fr;gap:clamp(14px,2vw,32px);align-items:center}
.world-grid .eyebrow{display:inline-block;margin-bottom:20px}
.world-grid p{color:var(--cream-soft);margin-top:18px;max-width:42ch}
/* Il canvas resta quadrato e alla misura originale: il globo e le tratte non
vanno toccati. Attorno alla sfera il render lascia una fascia trasparente
(~17% per lato): i margini negativi la riassorbono, così la sezione si
accorcia senza ritagliare nulla. */
.globe-wrap{position:relative;width:100%;aspect-ratio:1/1;max-width:780px;margin-inline:auto;
margin-block:-70px -48px;touch-action:none}
#globe{width:100%;height:100%;display:block;cursor:grab}
#globe:active{cursor:grabbing}
/* dentro la fascia trasparente sotto la sfera, non oltre il bordo del canvas */
.globe-hint{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);
display:inline-flex;align-items:center;gap:14px;white-space:nowrap;
font-family:var(--sans);font-size:.88rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--gold);pointer-events:none}
/* le due frecce oscillano verso l'esterno: suggeriscono il trascinamento */
.globe-hint::before,.globe-hint::after{font-size:1.05em;line-height:1;letter-spacing:0}
.globe-hint::before{content:"\2190";animation:globeHintL 1.9s var(--ease) infinite}
.globe-hint::after{content:"\2192";animation:globeHintR 1.9s var(--ease) infinite}
@keyframes globeHintL{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(-6px);opacity:1}}
@keyframes globeHintR{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){
.globe-hint::before,.globe-hint::after{animation:none;opacity:.8}
}
.globe-label{position:absolute;top:0;left:0;transform:translate(-50%,-150%);font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);pointer-events:none;white-space:nowrap;text-shadow:0 1px 8px #000;transition:opacity .3s}
.globe-legend{display:flex;gap:12px 24px;margin-top:28px;flex-wrap:wrap;max-width:400px}
.globe-legend span{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;color:var(--cream-soft);display:inline-flex;align-items:center;gap:9px}
.globe-legend i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
@media (max-width:860px){.world-grid{grid-template-columns:1fr;gap:36px}
/* riquadro più piccolo: anche la fascia trasparente da riassorbire è minore */
/* il margine negativo in basso e' meno marcato di quello in alto: serve a
lasciare spazio alla scritta, che altrimenti sconfinerebbe sotto la sezione
successiva - che ha un'immagine di sfondo e la coprirebbe */
.globe-wrap{max-width:440px;margin-block:-40px -20px}
.globe-hint{bottom:24px}}
/* =========================================================
HERO — variante centrata con logo grande
========================================================= */
.hero--center{align-items:center;text-align:center}
.hero--center .hero__inner{padding-bottom:0;display:flex;justify-content:center}
.hero--center .hero__inner .wrap{display:flex;flex-direction:column;align-items:center}
.hero__emblem{width:clamp(120px,15vw,190px);margin-bottom:30px;opacity:0;transform:translateY(20px);animation:heroIn 2.4s var(--ease) .3s forwards}
.hero__word{
font-family:var(--brand);font-weight:600;
font-size:clamp(3rem,10vw,8rem);line-height:1;letter-spacing:.14em;text-indent:.14em;
background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
opacity:0;transform:translateY(24px);animation:heroIn 2.4s var(--ease) .55s forwards;
}
.hero__tag{
margin-top:22px;font-family:var(--sans);font-size:clamp(.66rem,1.4vw,.82rem);
letter-spacing:.42em;text-transform:uppercase;color:var(--cream-soft);
opacity:0;animation:heroFade 2.6s var(--ease) 1s forwards;
}
.hero__cta{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;opacity:0;animation:heroFade 2.6s var(--ease) 1.4s forwards}
@keyframes heroIn{to{opacity:1;transform:none}}
@keyframes heroFade{to{opacity:1}}
/* =========================================================
FULL-BLEED BAND (editoriale, rivista di lusso)
========================================================= */
.band{position:relative;min-height:92svh;display:flex;align-items:center;overflow:hidden}
.band__media{position:absolute;inset:0;z-index:0}
.band__media img{width:100%;height:100%;object-fit:cover}
.band__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,7,6,.82)0%,rgba(8,7,6,.5)45%,rgba(8,7,6,.15)100%)}
.band--right .band__media::after{background:linear-gradient(270deg,rgba(8,7,6,.82)0%,rgba(8,7,6,.5)45%,rgba(8,7,6,.15)100%)}
.band__inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}
.band__inner .wrap{padding-inline:0}
.band--right{text-align:right}
.band--right .wrap{margin-left:auto}
.band__text{max-width:34ch}
.band--right .band__text{margin-left:auto}
.band__text .eyebrow{display:inline-block;margin-bottom:22px}
.band__text h2{margin-bottom:26px}
.band__text p{color:var(--cream-soft);margin-bottom:32px}
/* =========================================================
TRIPTYCH (collage asimmetrico di 3 foto, movimento lento)
========================================================= */
.triptych-section{padding-block:clamp(56px,7vw,96px);
background:linear-gradient(rgba(13,11,8,.74),rgba(13,11,8,.74)),url(../assets/img/prodotti-bg.jpg);
background-size:cover;background-position:center}
.triptych-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--pad)}
.triptych-layout .band__text{max-width:none;text-align:right}
.triptych-layout .band__text h2,.triptych-layout .band__text p{max-width:34ch;margin-left:auto}
.triptych{position:relative;height:clamp(320px,32vw,460px)}
.triptych__frame{position:absolute;overflow:hidden;border-radius:2px;box-shadow:0 40px 70px -30px rgba(0,0,0,.6)}
.triptych__frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.1)}
.triptych__frame--a{left:0;top:6%;width:52%;height:82%;z-index:1}
.triptych__frame--b{left:48%;top:0;width:52%;height:56%;z-index:2}
.triptych__frame--c{left:22%;bottom:-5%;width:50%;height:54%;z-index:3;border:1px solid var(--line-soft)}
.triptych__frame--a img{animation:driftA 48s ease-in-out infinite alternate}
.triptych__frame--b img{animation:driftB 40s ease-in-out infinite alternate}
.triptych__frame--c img{animation:driftC 55s ease-in-out infinite alternate}
@keyframes driftA{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.16) translate(-2%,-1.5%)}}
@keyframes driftB{from{transform:scale(1.12) translate(0,0)}to{transform:scale(1.2) translate(2%,2%)}}
@keyframes driftC{from{transform:scale(1.1) translate(0,0)}to{transform:scale(1.17) translate(-1.5%,2%)}}
/* =========================================================
BOTTIGLIE COME GIOIELLI
========================================================= */
.jewels{background:radial-gradient(120% 90% at 50% 0%,#141109 0%,var(--bg) 70%)}
.jewels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(48px,7vw,84px)}
.jewel{position:relative;text-align:center;padding:40px 20px 34px}
.jewel__spot{position:absolute;left:50%;top:8%;width:78%;height:78%;transform:translateX(-50%);
background:radial-gradient(closest-side,rgba(220,195,137,.28),rgba(220,195,137,.06)55%,transparent 72%);
filter:blur(6px);z-index:0;pointer-events:none}
.jewel__bottle{position:relative;z-index:1;height:clamp(300px,38vw,440px);margin-inline:auto;
filter:drop-shadow(0 26px 40px rgba(0,0,0,.6));
animation:float 9s ease-in-out infinite;transition:transform 1.4s var(--ease)}
@media (hover:hover){.jewel:hover .jewel__bottle{transform:translateY(-10px) scale(1.03)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.jewel__reflect{position:absolute;left:0;right:0;bottom:18px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);opacity:.4;z-index:0}
.jewel h3{position:relative;z-index:1;font-size:1.7rem;margin-top:26px}
.jewel .price{position:relative;z-index:1;display:block;font-family:var(--sans);font-size:.9rem;letter-spacing:.14em;color:var(--gold);margin-top:6px}
.jewel .link-arrow{position:relative;z-index:1;margin-top:16px;font-size:.62rem}
@media (prefers-reduced-motion:reduce){.jewel__bottle{animation:none}}
/* =========================================================
SHOP INTEGRATO
========================================================= */
/* sezione "I nostri prodotti" con sfondo texture e altezza compatta */
.products{position:relative;padding-block:clamp(30px,3.4vw,50px);
background:linear-gradient(rgba(13,11,8,.72),rgba(13,11,8,.72)),url(../assets/img/prodotti-bg.jpg);
background-size:cover;background-position:center}
/* senza titolo l'occhiello non ha più bisogno del respiro che lo separava da esso;
la distanza dalle card la dà un padding, che non collassa con i margini */
.products .statement .eyebrow{margin-bottom:0}
.products .statement{padding-bottom:clamp(22px,2.8vw,34px)}
.products .shop-row{margin-top:0}
.products .pcard{background:linear-gradient(180deg,rgba(19,17,12,.86),rgba(13,11,8,.86))}
.shop-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(40px,6vw,66px)}
/* min-width:0 evita che il contenuto delle schede allarghi la griglia oltre lo schermo */
.shop-row > *{min-width:0}
@media (max-width:860px){.shop-row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.shop-row{grid-template-columns:1fr}}
.pcard{position:relative;background:linear-gradient(180deg,#13110c,#0d0b08);border:1px solid var(--line-soft);border-radius:3px;padding:34px 28px 30px;text-align:center;
transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
/* hover: la card puntata si stacca dal piano — bordo oro, sollevamento e ombra
portante. z-index perché l'ombra e il bordo passino sopra le card vicine.
Il selettore è volutamente più specifico di .reveal.in{transform:none}:
a parità di specificità quella, venendo dopo, annullerebbe il sollevamento. */
@media (hover:hover){.shop-row .pcard:hover{z-index:2;border-color:var(--gold);transform:translateY(-10px) scale(1.015);
box-shadow:0 34px 62px -24px rgba(0,0,0,.9),0 12px 26px -16px rgba(220,195,137,.3)}}
.pcard__img{height:220px;display:flex;align-items:flex-end;justify-content:center}
.pcard__img img{height:100%;filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
transition:transform .5s var(--ease),filter .5s var(--ease)}
@media (hover:hover){.pcard:hover .pcard__img img{transform:scale(1.05);filter:drop-shadow(0 24px 34px rgba(0,0,0,.72))}}
@media (hover:hover){.pcard:hover .link-arrow{color:var(--cream)}}
@media (hover:hover){.pcard:hover .link-arrow::after{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){
@media (hover:hover){.shop-row .pcard:hover{transform:none}}
@media (hover:hover){.pcard:hover .pcard__img img{transform:none}}
}
.pcard h4{font-family:var(--sans);font-size:1.45rem;font-weight:500;margin-top:22px}
.pcard .cat{font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.pcard .price{font-family:var(--sans);font-size:1.3rem;color:var(--gold);margin-top:14px;display:block}
.pcard .btn{margin-top:20px;width:100%;justify-content:center}
/* =========================================================
VIDEO CANTINA
========================================================= */
.video-cantina{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.video-cantina video,.video-cantina .video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video-cantina::after{content:"";position:absolute;inset:0;background:rgba(8,7,6,.55);z-index:1}
.video-cantina__body{position:relative;z-index:2;padding:var(--pad)}
.video-cantina .eyebrow{display:inline-block;margin-bottom:20px}
/* =========================================================
PRENOTA DEGUSTAZIONE (one-click)
========================================================= */
/* Sfondi scambiati fra le due sezioni: la sfumatura che dava rilievo alla
fascia "Vieni a trovarci" e' passata alle news, e "Vieni a trovarci" ha preso
il fondo pieno che avevano le news. */
#news{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
/* stessa linea del footer, che sta subito sotto: la sezione resta cosi'
racchiusa fra due filetti identici */
.booking{background:var(--bg);text-align:center;border-top:1px solid var(--line-soft)}
.booking .h-lg{max-width:22ch;margin:20px auto 0}
.booking__actions{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* =========================================================
PAGINE LEGALI (privacy & cookie policy)
Testo lungo da leggere: misura di riga contenuta e gerarchia sobria.
========================================================= */
.legal .h-lg{margin:14px 0 6px}
.legal__meta{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted-2);margin-bottom:clamp(34px,5vw,56px)}
.legal h2{font-family:var(--sans);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.3rem);
color:var(--gold);margin:clamp(34px,4.5vw,52px) 0 14px;letter-spacing:.02em}
.legal p,.legal li{color:var(--cream-soft);font-size:.95rem;line-height:1.75;max-width:74ch}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px;padding-left:0}
.legal li{position:relative;padding-left:22px;margin-bottom:12px}
.legal li::before{content:"";position:absolute;left:2px;top:.72em;
width:6px;height:1px;background:var(--gold);opacity:.8}
.legal b{color:var(--cream);font-weight:500}
.legal a{color:var(--gold);border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
/* Informativa e cookie policy: il testo viene inserito dallo script di Emerge
dentro un blocco #emerge-policy, e non porta stili propri. Qui gli si danno
gli stessi di .legal, piu' la tabella dei tempi di conservazione. La riga di
riserva sparisce da sola non appena il blocco compare. */
#informativa:has(#emerge-policy) .riserva{display:none}
/* Mappa di Google nella pagina Visitaci: con il banner del consenso l'iframe
parte solo dopo il si' (Emerge, categoria "functional"), quindi finche' non
ha un indirizzo al suo posto si legge il perche'. Quando lo script gli mette
l'indirizzo, la nota sparisce da sola: nessun codice aggiuntivo. */
iframe.mappa:not([src]){display:none}
iframe.mappa[src] + .mappa-ferma{display:none}
.mappa-ferma{display:flex;align-items:center;justify-content:center;text-align:center;
min-height:clamp(260px,38vw,440px);margin:0;padding:clamp(20px,4vw,34px);
border:1px solid var(--line);border-radius:3px;
color:var(--cream-soft);font-size:.92rem;line-height:1.7;max-width:none}
.legal #emerge-policy h1{font-size:clamp(2rem,4.4vw,3.6rem);margin:14px 0 24px;line-height:1.06}
.legal #emerge-policy section{display:block}
.legal #emerge-policy strong{color:var(--cream);font-weight:500}
.legal #emerge-policy .emerge-policy-aggiornamento{font-family:var(--sans);font-size:.72rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-top:clamp(34px,5vw,56px)}
.legal #emerge-policy table{width:100%;max-width:74ch;border-collapse:collapse;margin:0 0 18px;
font-size:.9rem;color:var(--cream-soft)}
.legal #emerge-policy th,.legal #emerge-policy td{border:1px solid var(--line-soft);
padding:9px 12px;text-align:left;vertical-align:top}
.legal #emerge-policy th{font-family:var(--sans);font-weight:500;color:var(--gold);
font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:620px){.legal #emerge-policy table{display:block;overflow-x:auto}}
@media (hover:hover){.legal a:hover{border-bottom-color:var(--gold)}}
/* =========================================================
FOOTER
========================================================= */
.site-footer{background:#100c06;border-top:1px solid var(--line-soft);padding-block:clamp(56px,8vw,88px) 34px}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr) 1.7fr;gap:clamp(28px,3vw,44px)}
.footer-brand .emblem{width:54px;margin-bottom:20px}
.footer-brand .name{font-family:var(--brand);font-size:1.5rem;font-weight:600;letter-spacing:.28em;text-indent:.28em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.footer-brand .tag{font-family:var(--sans);font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-soft);margin-top:8px}
.footer-brand p{color:var(--muted);font-size:.98rem;margin-top:22px;max-width:30ch}
.fcol h4{font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:400}
.fcol li{margin-bottom:11px}
.fcol a{font-family:var(--sans);font-size:.86rem;letter-spacing:.04em;color:var(--muted);transition:color .3s}
@media (hover:hover){.fcol a:hover{color:var(--cream)}}
.fnews h4{font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:400}
.fnews p{color:var(--muted);font-size:.92rem;margin-bottom:18px}
.news-form{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.news-form input{flex:1;background:transparent;border:none;padding:13px 16px;color:var(--cream);font-family:var(--sans);font-size:.85rem;outline:none}
.news-form input::placeholder{color:var(--muted-2)}
/* esito dell'iscrizione, sotto il campo */
/* consenso sotto il campo: piu' minuto del resto, non deve gridare */
.news-consenso{margin-top:12px;margin-bottom:0;font-size:.74rem;align-items:flex-start}
.news-consenso input{margin-top:.25em;flex:none;accent-color:var(--gold)}
.news-consenso a{color:var(--gold);border-bottom:1px solid var(--line)}
.news-msg{margin-top:10px;min-height:1.2em;font-family:var(--sans);font-size:.78rem;
letter-spacing:.04em;line-height:1.5}
.news-msg.is-attesa{color:var(--muted-2)}
.news-msg.is-ok{color:var(--gold)}
.news-msg.is-errore{color:#e0a89a}
.news-form button{padding:0 18px;background:var(--gold);color:#1a1408;font-size:1rem}
@media (hover:hover){.news-form button:hover{background:var(--cream)}}
.social{display:flex;gap:16px;margin-top:22px}
.social a{color:var(--muted);font-family:var(--sans);font-size:.72rem;letter-spacing:.1em}
@media (hover:hover){.social a:hover{color:var(--gold)}}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;align-items:center;margin-top:clamp(40px,6vw,64px);padding-top:26px;border-top:1px solid var(--line-soft);font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--muted-2)}
@media (hover:hover){.footer-bottom a:hover{color:var(--cream)}}
/* =========================================================
PAGE HERO (pagine interne)
========================================================= */
.page-hero{position:relative;min-height:clamp(64vh,72svh,80vh);display:flex;align-items:flex-end;overflow:hidden}
.page-hero__media{position:absolute;inset:0;z-index:0}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,6,.6)0%,rgba(8,7,6,.2)40%,rgba(8,7,6,.85)100%)}
/* hero con foto chiara (es. foto storica): oscuro di più basso-sinistra per il testo */
.page-hero--photo .page-hero__media img{filter:saturate(.92) contrast(1.02)}
.page-hero--photo .page-hero__media::after{
background:linear-gradient(90deg,rgba(8,7,6,.62)0%,rgba(8,7,6,.14)52%,rgba(8,7,6,0)100%),
linear-gradient(180deg,rgba(8,7,6,.3)0%,rgba(8,7,6,.06)32%,rgba(8,7,6,.72)80%,rgba(8,7,6,.95)100%)}
.page-hero--photo h1,.page-hero--photo .lead,.page-hero--photo .crumb{text-shadow:0 2px 22px rgba(0,0,0,.55)}
.page-hero__inner{position:relative;z-index:1;width:100%;padding:0 var(--pad) clamp(48px,8vh,90px)}
.page-hero__inner .wrap{padding-inline:0}
.crumb{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
@media (hover:hover){.crumb a:hover{color:var(--gold)}}
.page-hero h1{font-size:clamp(2.6rem,6.5vw,5rem);line-height:1.02}
.page-hero .lead{max-width:44ch;margin-top:20px;color:var(--cream-soft)}
/* sub-nav prodotti (Nosiola/Vino Santo, Il vitigno ...) */
.subnav{border-bottom:1px solid var(--line-soft);background:var(--bg)}
.subnav .wrap{display:flex;gap:34px;padding-block:20px;flex-wrap:wrap}
.subnav a{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.subnav a.active{color:var(--gold)}
@media (hover:hover){.subnav a:hover{color:var(--gold)}}
/* prose (testi pagina) */
.prose{max-width:64ch}
.prose p{color:var(--cream-soft);margin-bottom:20px}
.prose p.first::first-letter{font-family:var(--serif);font-size:3.4em;line-height:.8;float:left;margin:6px 14px 0 0;color:var(--gold);font-weight:600}
/* dati scheda tecnica */
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line-soft)}
.spec div{padding:18px 4px;border-bottom:1px solid var(--line-soft)}
.spec dt{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.spec dd{font-family:var(--serif);font-size:1.15rem;color:var(--cream)}
.spec__logo{display:block;height:44px;width:64px;object-fit:contain;object-position:left center}
/* =========================================================
SHOP
========================================================= */
.cart{justify-self:end}
.shop-filter{position:sticky;top:0;z-index:40;background:rgba(10,9,8,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.shop-filter .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:18px;flex-wrap:wrap}
.shop-filter .filters{display:flex;gap:28px;flex-wrap:wrap}
.shop-filter a{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-bottom:4px}
.shop-filter a.active{color:var(--gold);border-bottom:1px solid var(--gold)}
@media (hover:hover){.shop-filter a:hover{color:var(--gold);border-bottom:1px solid var(--gold)}}
.shop-filter .sortby{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
.shop-item{background:var(--bg);padding:0 0 30px;display:flex;flex-direction:column;transition:background 1s var(--ease)}
@media (hover:hover){.shop-item:hover{background:var(--bg-2)}}
.shop-item__img{aspect-ratio:3/4;overflow:hidden}
.shop-item__img img{width:100%;height:100%;object-fit:cover;transition:transform 2.4s var(--ease)}
@media (hover:hover){.shop-item:hover .shop-item__img img{transform:scale(1.05)}}
.shop-item__b{padding:24px 26px 0}
.shop-item h3{font-family:var(--sans);font-size:1.4rem;font-weight:500}
.shop-item .cat{font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:block}
.shop-item .price{font-family:var(--sans);font-size:1.25rem;color:var(--gold);margin-top:16px;display:block}
.shop-item .buy{margin-top:18px;display:flex;justify-content:space-between;align-items:center}
.shop-item .buy .link-arrow{font-size:.6rem}
.shop-item .plus{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--gold);transition:.4s var(--ease)}
@media (hover:hover){.shop-item .plus:hover{background:var(--gold);color:#1a1408}}
/* =========================================================
ESPERIENZE
========================================================= */
.exp-list{display:grid;gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.exp{background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,48px);align-items:center;padding:34px var(--pad);transition:background 1s var(--ease)}
@media (hover:hover){.exp:hover{background:var(--bg-2)}}
.exp h3{font-family:var(--sans);font-size:1.7rem;font-weight:500}
.exp .meta{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.exp p{color:var(--muted);font-size:.98rem}
@media (max-width:760px){.exp{grid-template-columns:1fr;gap:10px;text-align:left}}
/* =========================================================
JOURNAL
========================================================= */
.news-feature .date{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:block}
.news-feature h3{font-family:var(--sans);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.15;margin:14px 0 16px;color:var(--cream)}
.news-feature .cat{display:block;margin-top:18px;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (hover:hover){.news-feature:hover .split__media img{transform:scale(1.045)}}
.news-list .split__media{background:var(--bg)}
.news-list .split__media img{aspect-ratio:auto;object-fit:contain}
/* pulsante di rientro alla home (pagina journal senza hero) */
.btn-back{display:inline-flex;align-items:center;gap:10px;
font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
transition:color .35s var(--ease),gap .35s var(--ease)}
.btn-back .arrow{font-size:1em;transition:transform .35s var(--ease)}
@media (hover:hover){.btn-back:hover{color:var(--gold);gap:14px}}
@media (hover:hover){.btn-back:hover .arrow{transform:translateX(-4px)}}
/* elenco journal: articoli impilati uno sotto l'altro */
.news-list{display:flex;flex-direction:column}
.news-list .news-feature{padding-block:clamp(36px,5vw,56px);border-bottom:1px solid var(--line-soft)}
.news-list .news-feature:first-child{padding-top:0}
.news-list .news-feature:last-child{border-bottom:none;padding-bottom:0}
/* la fascia scura delle news è più raccolta della misura generale delle sezioni */
#news{padding-block:clamp(52px,7vw,104px)}
/* HOME — news: la notizia in evidenza, poi la successiva appena accennata.
L'anteprima è tagliata in altezza e sfumata verso il basso: si intuisce che
l'archivio continua, e il pulsante raccoglie l'invito. */
.news-home{display:flex;flex-direction:column}
.news-home .news-peek{
margin-top:clamp(34px,4.5vw,56px);
padding-top:clamp(34px,4.5vw,56px);
border-top:1px solid var(--line-soft);
max-height:clamp(200px,25vw,300px);
overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 97%);
mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 97%)}
.news-home .news-more{text-align:center;margin-top:clamp(6px,1.4vw,20px)}
@media (max-width:860px){
.news-home .news-peek{max-height:clamp(180px,46vw,260px)}
}
/* =========================================================
CONTATTI
========================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px)}
.info-block{margin-bottom:30px}
.info-block h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.info-block p,.info-block a{color:var(--cream-soft);line-height:1.7}
@media (hover:hover){.info-block a:hover{color:var(--gold)}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field textarea{width:100%;background:transparent;border:1px solid var(--line);border-radius:2px;padding:13px 15px;color:var(--cream);font-family:var(--serif);font-size:1rem;outline:none;transition:border-color .4s}
.field input:focus,.field textarea:focus{border-color:var(--gold)}
.check{display:flex;gap:10px;align-items:flex-start;font-family:var(--sans);font-size:.78rem;color:var(--muted);line-height:1.5;margin-bottom:16px}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.shop-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.shop-grid{grid-template-columns:1fr}.articles{grid-template-columns:1fr}}
/* =========================================================
ANIMAZIONI (reveal on scroll)
========================================================= */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.8s var(--ease),transform 1.8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.15s}
.reveal.d2{transition-delay:.3s}
.reveal.d3{transition-delay:.45s}
/* ken-burns lento sulle immagini di sfondo */
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.16)}}
.kb{animation:kenburns 26s ease-out both}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.kb{animation:none}
.triptych__frame img{animation:none}
html{scroll-behavior:auto}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width:1024px){
.footer-grid{grid-template-columns:1fr 1fr 1fr}
.footer-brand{grid-column:1/-1}
.fnews{grid-column:1/-1}
}
@media (max-width:960px){
/* mobile: solo marchio a sinistra, shop + hamburger a destra */
.site-header{grid-template-columns:auto auto;justify-content:space-between;
column-gap:16px;row-gap:0;align-items:center;padding-block:20px}
.site-header.scrolled{padding-block:14px}
.main-nav{display:none}
.brand{justify-self:start;align-items:center;padding-inline:0}
.hgroup{justify-self:end;gap:clamp(16px,4.4vw,24px)}
/* la scelta della lingua vive nel piede del menu, non nell'header */
.hgroup .lang{display:none}
.menu-btn{display:block}
.nav-mobile{display:flex}
}
@media (max-width:860px){
body{font-size:17px}
.split{grid-template-columns:1fr;gap:34px}
.split--rev .split__text{order:0}
.split__media img{aspect-ratio:16/10}
.tiles{grid-template-columns:1fr}
.tile{min-height:64vw}
.triptych-layout{grid-template-columns:1fr;gap:34px}
.triptych-layout .band__text{text-align:left}
.triptych-layout .band__text h2,.triptych-layout .band__text p{margin-left:0}
.triptych{height:auto;display:flex;flex-direction:column;gap:16px}
.triptych__frame{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%!important;height:60vw!important}
}
@media (max-width:560px){
.hgroup .lang{display:none}
}
@media (max-width:560px){
.footer-grid{grid-template-columns:1fr 1fr}
.lang{display:none}
.hero__sub{margin-bottom:30px}
}
/* ============================================================
TERRITORIO (vigneti.html) — Tenute Rauten
============================================================ */
.terr{position:relative;background:var(--bg)}
/* righe immagine + testo alternate */
.trow{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(440px,66vh,660px);align-items:stretch}
.trow__media{position:relative;overflow:hidden}
.trow__media img{width:100%;height:100%;object-fit:cover}
.trow__text{display:flex;flex-direction:column;justify-content:center;
padding:clamp(40px,6vw,90px) clamp(28px,5vw,80px);background:var(--bg-2)}
.trow:nth-of-type(even) .trow__text{background:var(--bg-3)}
.trow--rev .trow__media{order:-1}
.trow__text .eyebrow{display:inline-block;margin-bottom:18px}
.trow__text h2{margin-bottom:18px}
.trow__sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--gold-bright);margin-bottom:20px}
.trow__text p{color:var(--muted);max-width:42ch}
.trow__text .link-arrow{margin-top:30px}
.trow__inset{margin:26px 0 0;max-width:230px}
.trow__inset img{width:100%;border:1px solid var(--line);border-radius:2px;display:block}
.trow__inset figcaption{margin-top:8px;font-family:var(--sans);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
/* Vigneto — testo a sinistra, veduta della valle a destra con i richiami
sui luoghi; in chiusura, a tutta larghezza, la fascia dei tre dati. */
.vgn{position:relative;overflow:hidden;background:var(--bg-2);
padding:clamp(34px,4vw,64px) var(--pad) clamp(30px,3.4vw,54px)}
.vgn__inner{max-width:var(--wrap);margin-inline:auto}
.vgn__top{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
column-gap:clamp(30px,3.6vw,64px);align-items:start}
/* Fascia avorio dietro la sola parte alta del vigneto: testo, veduta e Rauten.
L'ombra estesa porta il colore fino ai bordi della pagina senza toccare
l'impaginazione, e il ritaglio la tiene entro l'altezza del blocco, cosi'
i tre dati in fondo restano sul fondo scuro. Oro champagne e crema qui non
si leggono: si usano i colori chiari gia' in uso nelle schede tecniche. */
.vgn__top--avorio{
/* sopra la fascia arriva fino in cima alla sezione, cioe' combacia con la
fascia della frase in inglese: e' lo stesso valore dello spazio interno
di .vgn, quindi coincide a qualsiasi larghezza di finestra */
--avorio-su:clamp(34px,4vw,64px);
--avorio-giu:clamp(26px,3vw,44px); /* esattamente lo spazio che separa
il blocco dai tre riquadri, cosi'
il colore ci arriva a combaciare */
background:#FFFFF0;box-shadow:0 0 0 100vmax #FFFFF0;
clip-path:inset(calc(-1 * var(--avorio-su)) -100vmax
calc(-1 * var(--avorio-giu)) -100vmax)}
.vgn__top--avorio .eyebrow{color:#a08c5c}
.vgn__top--avorio .vgn__h{color:#1a1a18}
.vgn__top--avorio .vgn__dot{color:#8f7a48}
.vgn__top--avorio .vgn__lead{color:#3a3a36}
.vgn__top--avorio .vgn__lead b{color:#7f6c3e}
.vgn__top--avorio .vgn__note{color:#4a4436}
.vgn__top--avorio .vgn__sub{color:#5c5a52}
.vgn__top--avorio .vgn__rautentext b{color:#1a1a18}
.vgn__top--avorio .vgn__rautentext p{color:#3a3a36}
/* colonna del testo */
.vgn__text .eyebrow{display:inline-block;margin-bottom:clamp(14px,1.8vw,24px)}
.vgn__h{font-family:var(--sans);font-weight:500;line-height:1.02;letter-spacing:.01em;
font-size:clamp(1.9rem,3.5vw,3.3rem);margin:0 0 clamp(20px,2.4vw,32px);color:var(--cream)}
.vgn__dot{color:var(--gold)}
.vgn__lead{color:var(--cream-soft);margin:0;max-width:54ch;font-size:clamp(.9rem,1vw,1.02rem)}
.vgn__lead b{color:var(--gold-bright);font-weight:500}
.vgn__note{color:var(--gold-bright);font-size:.9rem;line-height:1.68;margin:clamp(14px,1.7vw,20px) 0 0;max-width:54ch}
.vgn__sub{color:var(--muted);font-size:.84rem;line-height:1.68;margin:clamp(10px,1.2vw,15px) 0 0;max-width:54ch}
/* colonna destra: veduta in alto e, nello spazio sotto, il marchio Rauten */
.vgn__right{display:flex;flex-direction:column}
.vgn__rauten{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);
margin-top:clamp(22px,2.8vw,40px)}
/* il rombo è il marchio storico: la mappa dei vigneti nella cornice dorata
romboidale — l'immagine è già a losanga, non va ruotata */
.vgn__rombo{flex:0 0 auto;display:block;width:clamp(120px,13vw,200px);height:auto}
.vgn__rautentext b{display:block;font-family:var(--sans);font-weight:500;
font-size:clamp(1.1rem,1.5vw,1.45rem);letter-spacing:.04em;color:var(--gold-bright);margin-bottom:8px}
.vgn__rautentext p{color:var(--muted);font-size:.85rem;line-height:1.7;margin:0}
/* veduta della valle */
.vgn__media{position:relative;margin:0;overflow:hidden;aspect-ratio:3/2}
.vgn__photo{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* bordi netti: solo un velo uniforme, che tiene leggibili i nomi dei luoghi */
.vgn__media::after{content:"";position:absolute;inset:0;pointer-events:none;
background:rgba(16,14,11,.3)}
/* richiami: linee sottili e nomi dei luoghi */
.vgn__lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.vgn__lines line{stroke:var(--gold);stroke-width:1;opacity:.85}
.vgn__pin{position:absolute;z-index:2;transform:translate(-50%,-50%);white-space:nowrap;
font-family:var(--sans);font-size:clamp(.56rem,.72vw,.72rem);letter-spacing:.18em;
text-transform:uppercase;color:var(--cream);
text-shadow:0 1px 10px rgba(10,9,8,.9),0 0 24px rgba(10,9,8,.7);pointer-events:none}
.vgn__pin--r{color:var(--gold-bright)}
/* fascia dei tre dati, a tutta larghezza */
.vgn__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
margin:clamp(26px,3vw,44px) 0 0;
border-block:1px solid var(--line-soft)}
.vgn__facts li{display:flex;flex-direction:column;align-items:center;text-align:center;
gap:9px;padding:clamp(16px,2vw,26px) clamp(8px,1.2vw,18px)}
.vgn__facts li + li{border-left:1px solid var(--line-soft)}
.vgn__ico{display:block;width:24px;height:19px;color:var(--gold)}
.vgn__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;
stroke-linecap:round;stroke-linejoin:round}
.vgn__facts b{font-family:var(--sans);font-weight:500;line-height:1.2;
font-size:clamp(1rem,1.5vw,1.5rem);color:var(--cream)}
.vgn__facts__cap{font-family:var(--sans);font-size:.58rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted);line-height:1.55}
/* le due varianti del blocco informazioni si escludono a vicenda */
.vgn__facts--m{display:none}
@media (max-width:1000px){
.vgn__top{grid-template-columns:1fr;row-gap:clamp(24px,4vw,38px)}
.vgn__media{order:-1}
.vgn__pin{font-size:.56rem;letter-spacing:.12em}
}
@media (max-width:620px){
.vgn__rauten{flex-direction:column;text-align:center;gap:16px}
.vgn__rombo{width:clamp(140px,42vw,200px)}
.vgn__facts--d{grid-template-columns:1fr}
.vgn__facts--d li + li{border-left:none;border-top:1px solid var(--line-soft)}
}
/* ---- Il Vigneto da mobile: ordine rimescolato ----------------------
Sequenza voluta: titolo, riquadri con icone, prima meta' del testo,
veduta della Valle dei Laghi, seconda meta' del testo.
Nel codice quei pezzi stanno su tre livelli diversi (il testo dentro
.vgn__text, la foto dentro .vgn__right, i riquadri fuori da entrambi),
e 'order' agisce solo fra elementi fratelli. Con display:contents i tre
contenitori non generano piu' una scatola e i loro figli diventano tutti
fratelli dentro .vgn__inner, dove l'ordine si puo' finalmente imporre.
Effetto collaterale accettato: .vgn__text perde la comparsa in dissolvenza
(senza scatola, opacita' e spostamento non hanno effetto) e il testo si
vede subito. Foto e riquadri, che restano scatole, la mantengono.
Soglia 960px: la stessa dell'hamburger, cioe' cio' che qui chiamiamo
mobile. Fra 961 e 1000px la sezione e' gia' a colonna singola ma tiene
ordine e riquadri da desktop. */
@media (max-width:960px){
.vgn__inner{display:flex;flex-direction:column}
.vgn__top,.vgn__text,.vgn__right{display:contents}
.vgn__text .eyebrow{order:1}
.vgn__h{order:2;margin-bottom:0}
.vgn__facts--m{order:3;margin-top:clamp(22px,5vw,30px)}
.vgn__lead{order:4;margin-top:clamp(22px,5vw,30px)}
.vgn__media{order:5;margin-top:clamp(22px,5vw,30px)}
.vgn__note{order:6;margin-top:clamp(18px,4vw,24px)}
.vgn__sub{order:7}
.vgn__rauten{order:8;margin-top:clamp(24px,5.5vw,34px)}
/* i quattro riquadri due per riga, con i filetti a croce */
.vgn__facts--d{display:none}
.vgn__facts--m{display:grid;grid-template-columns:1fr 1fr}
.vgn__facts--m li + li{border-left:none}
.vgn__facts--m li:nth-child(odd){border-right:1px solid var(--line-soft)}
.vgn__facts--m li:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
/* Su telefono la sezione e' smontata e i quattro dati stanno in mezzo, fra il
titolo e il testo: la fascia avorio quindi non puo' essere un blocco solo.
Va dal primo paragrafo fino in fondo al riquadro Rauten, come chiesto il
15 ottobre. Ogni pezzo porta il colore ai bordi con la stessa ombra estesa,
e i margini fra un pezzo e l'altro diventano spazio interno, altrimenti fra
uno e l'altro resterebbe una striscia scura. */
/* occhiello e titolo restano fuori dalla fascia, quindi tornano
ai colori del fondo scuro */
.vgn__top--avorio .eyebrow{color:var(--gold)}
.vgn__top--avorio .vgn__h{color:var(--cream)}
.vgn__top--avorio .vgn__dot{color:var(--gold)}
.vgn__lead,.vgn__media,.vgn__note,.vgn__sub,.vgn__rauten{
background:#FFFFF0;box-shadow:0 0 0 100vmax #FFFFF0;clip-path:inset(0 -100vmax)}
/* la fascia comincia un po' piu' in alto del testo: lo spazio che prima era
vuoto sopra il paragrafo diventa spazio interno, cosi' il testo non si
muove di un pixel e sopra di lui resta un respiro avorio */
.vgn__lead{margin-top:0;padding-top:clamp(22px,5vw,30px);
padding-bottom:clamp(22px,5vw,30px)}
.vgn__media{margin-top:0}
/* la veduta e il rombo compaiono in dissolvenza scorrendo verso l'alto:
finche' si muovono il loro sfondo si stacca dal resto e sembrano riquadri
a se'. Dentro la fascia la comparsa si toglie, come gia' accade al testo
qui accanto, e il colore resta un blocco unico. */
.vgn__media.reveal,.vgn__rauten.reveal{opacity:1;transform:none;transition:none}
.vgn__note{margin-top:0;padding-top:clamp(18px,4vw,24px)}
.vgn__sub{margin-top:0;padding-top:clamp(10px,1.2vw,15px)}
.vgn__rauten{margin-top:0;padding-top:clamp(24px,5.5vw,34px);
padding-bottom:clamp(26px,6vw,38px)}
}
}
/* alberi centenari */
.trees-sec{background:var(--bg)}
.trees{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.tree{position:relative;overflow:hidden;border:1px solid var(--line-soft);border-radius:2px;background:var(--bg-2);transition:border-color .6s var(--ease)}
@media (hover:hover){.tree:hover{border-color:var(--line)}}
.tree__img{aspect-ratio:4/5;overflow:hidden}
.tree__img img{width:100%;height:100%;object-fit:cover;transition:transform 2.6s var(--ease)}
@media (hover:hover){.tree:hover .tree__img img{transform:scale(1.06)}}
.tree__b{position:relative;padding:24px 26px 26px}
.tree__b h3{font-family:var(--sans);font-size:1.4rem;font-weight:500}
.tree__age{display:block;font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:8px}
.tree__more{position:absolute;right:22px;top:22px;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;
color:var(--gold);font-size:1.1rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:.4s var(--ease)}
.tree.is-open .tree__more{background:var(--gold);color:#171208;transform:rotate(45deg)}
@media (hover:hover){.tree__more:hover{background:var(--gold);color:#171208;transform:rotate(45deg)}}
.tree__detail{color:var(--muted);font-size:.96rem;max-height:0;opacity:0;overflow:hidden;
transition:max-height .6s var(--ease),opacity .5s var(--ease),margin-top .5s var(--ease)}
.tree.is-open .tree__detail{max-height:170px;opacity:1;margin-top:14px}
@media (hover:hover){.tree:hover .tree__detail{max-height:170px;opacity:1;margin-top:14px}}
/* esperienze: toggle giorno/sera */
.esp__toggle{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:12px}
.esp__toggle button{font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
padding:11px 22px;cursor:pointer;transition:.4s var(--ease)}
.esp__toggle button.is-active{background:var(--gold);color:#171208}
.esp .band__media img{transition:filter 1.1s var(--ease)}
.esp.is-night .band__media img{filter:brightness(.42) saturate(.8) hue-rotate(-6deg)}
.esp.is-night .band__media::after{background:linear-gradient(270deg,rgba(6,8,14,.86),rgba(6,8,14,.4)55%,rgba(6,8,14,.12))}
/* =========================================================
LA NOSTRA AZIENDA — minigalleria con frecce ai lati
Le fotografie hanno tagli diversi (orizzontali, quadrate, una
verticale): il riquadro le mostra per intero con object-fit:contain
invece di riempirle, cosi' nessuna viene tagliata e il formato misto
diventa una scelta invece che un difetto.
========================================================= */
.gal{position:relative;background:var(--bg-2);padding-block:clamp(56px,8vw,110px)}
.gal .eyebrow{display:inline-block;margin-bottom:14px}
.gal__h{font-family:var(--sans);font-weight:500;line-height:1.06;letter-spacing:.01em;
font-size:clamp(1.7rem,3.4vw,2.9rem);color:var(--cream);margin-bottom:clamp(28px,4vw,48px)}
/* Da desktop il titolo sta su una riga sola e la sezione si accorcia. Lo spazio
nel markup e' dopo il
: a capo viene ignorato, qui fa da separatore. */
@media (min-width:961px){
.gal__h br{display:none}
}
/* palcoscenico: frecce ai lati, riquadro in mezzo */
.gal__stage{position:relative;display:flex;align-items:center;gap:clamp(10px,2vw,26px);
padding-inline:var(--pad);max-width:var(--wrap);margin-inline:auto}
/* Nessun riquadro: niente bordo ne' fondo proprio. Le foto hanno tagli
diversi e restano intere (contain); lo spazio che avanza attorno e' il fondo
della sezione, quindi non si vedono piu' le bande scure ai lati. L'altezza
resta quella di prima, cosi' le foto mantengono la stessa dimensione. */
.gal__frame{position:relative;flex:1 1 auto;min-width:0;aspect-ratio:16/10}
.gal__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s var(--ease) .5s}
.gal__img.is-on{opacity:1;visibility:visible;transition-delay:0s}
/* frecce: stesse dei punti di pausa della cantina, per coerenza */
.gal__nav{flex:0 0 auto;width:52px;height:52px;border-radius:50%;
border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--cream);
display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
-webkit-tap-highlight-color:transparent;
transition:border-color .25s ease,color .25s ease,opacity .25s ease}
.gal__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
.gal__nav:hover{border-color:var(--gold);color:var(--gold)}
.gal__dots button:hover{border-color:var(--gold)}
}
/* piede: contatore e pallini */
/* solo i pallini, centrati sotto la foto */
.gal__foot{display:flex;align-items:center;justify-content:center;
margin-top:clamp(18px,2.4vw,28px)}
.gal__dots{display:flex;gap:10px}
.gal__dots button{width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
border:1px solid var(--line);background:transparent;
-webkit-tap-highlight-color:transparent;transition:background .3s var(--ease),border-color .3s var(--ease)}
.gal__dots button.is-on{background:var(--gold);border-color:var(--gold)}
/* Su telefono le frecce ai lati mangerebbero la larghezza dell'immagine:
restano ai lati ma sovrapposte ai bordi del riquadro. */
@media (max-width:700px){
.gal__stage{gap:0;padding-inline:var(--pad)}
.gal__frame{aspect-ratio:4/3}
.gal__nav{position:absolute;z-index:2;width:44px;height:44px;
background:rgba(10,9,8,.55);backdrop-filter:blur(4px);border-color:rgba(255,255,255,.35)}
.gal__nav--prev{left:calc(var(--pad) + 8px)}
.gal__nav--next{right:calc(var(--pad) + 8px)}
.gal__nav svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
.gal__img{transition-duration:.01ms}
}
/* Monte Brione — il sole che scorre nel cielo (scroll, arco + brezza a particelle) */
.brione{position:relative;height:210vh;background:var(--bg)}
.brione__sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:flex-end}
.brione__bg{position:absolute;inset:0;z-index:0}
.brione__bg img,.brione__bg video{width:100%;height:100%;object-fit:cover;display:block}
.brione__bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(8,7,6,.32)0%,transparent 38%,rgba(8,7,6,.55)78%,rgba(8,7,6,.92)100%)}
.brione__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.brione__inner{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(56px,9vh,110px)}
.brione__inner .wrap{padding-inline:0}
.brione__text{max-width:36ch}
.brione__text .eyebrow{display:inline-block;margin-bottom:18px}
.brione__text .lead{color:var(--cream-soft)}
@media (max-width:900px){
/* Anche da mobile la sezione resta agganciata a tutta altezza e lo scroll
del dito fa avanzare il timelapse, come su desktop.
La traccia di scorrimento e' in svh (misura stabile: non cambia quando
Safari nasconde la barra degli indirizzi), il riquadro agganciato in dvh
(segue la barra, cosi' riempie sempre lo schermo visibile). */
.brione{height:210svh}
.brione__sticky{height:100vh;height:100dvh}
.brione__inner{padding-bottom:clamp(44px,8vh,80px)}
.brione__text .lead{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
.brione{height:auto}
.brione__sticky{position:static;height:80vh}
.brione__canvas{display:none}
}
@media (max-width:860px){
.trow{grid-template-columns:1fr}
.trow__media{min-height:58vw}
.trow--rev .trow__media{order:0}
.trees{grid-template-columns:1fr}
.tree__detail{max-height:170px;opacity:1;margin-top:14px}
}
/* =========================================================
CANTINA SERBATOI — sequenza di immagini su canvas, frecce.
La sezione è alta 100vh e si scorre normalmente: il video si
muove solo con le frecce nella barra laterale.
Regole circoscritte a #scrollytelling, così .block / .inner /
.tag non possono interferire col resto del sito.
========================================================= */
#scrollytelling{position:relative;height:100vh}
#stage{position:relative;height:100%;width:100%;overflow:hidden;background:#000}
#frame{display:block;width:100%;height:100%}
/* barra laterale: attaccata al bordo sinistro, a tutta altezza del video */
#scrub-side{
position:absolute;left:0;top:0;height:100%;
width:clamp(300px,32vw,460px);
z-index:2;background:var(--bg);
display:flex;align-items:center;
}
#scrub-side .side-inner{width:100%;padding:clamp(32px,4vw,60px)}
/* i blocchi condividono la stessa cella: uno visibile alla volta */
#scrub-side .side-blocks{display:grid}
#scrollytelling .block{
grid-area:1/1;
opacity:0;transform:translateY(26px);
transition:opacity .3s ease,transform .55s cubic-bezier(.22,1,.36,1);
pointer-events:none;
}
#scrollytelling .block.is-on{opacity:1;transform:none}
#scrollytelling .block .inner{max-width:100%}
#scrollytelling .block h2{font-family:var(--sans);font-weight:500;
font-size:clamp(1.5rem,2.4vw,2.4rem);line-height:1.06;margin-bottom:.5em;color:var(--cream)}
#scrollytelling .block p{font-family:var(--serif);
font-size:clamp(14px,1.05vw,17px);line-height:1.6;color:var(--cream-soft)}
#scrollytelling .block .tag{display:inline-block;font-family:var(--sans);font-size:12px;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2em}
/* frecce sotto al testo */
#scrub-nav{display:flex;gap:14px;margin-top:34px}
#scrub-nav button{
width:52px;height:52px;border-radius:50%;
border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--cream);
display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
transition:border-color .25s ease,color .25s ease,opacity .25s ease;
}
#scrub-nav button svg{width:20px;height:20px;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){#scrub-nav button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}}
#scrub-nav button:disabled{opacity:.25;cursor:default}
/* Cenno sotto le frecce: dice che la sezione si muove con i pulsanti. Nasce
invisibile, compare quando la sequenza e' pronta (classe is-on messa dallo
script della pagina) e si dissolve al primo uso, senza tornare. */
#scrub-hint{margin:14px 0 0;font-family:var(--sans);font-size:.58rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .6s var(--ease);
pointer-events:none}
#scrub-hint.is-on{opacity:.75}
@media (prefers-reduced-motion:reduce){#scrub-hint{transition:none}}
/* Il fotogramma e' orizzontale: dentro un riquadro alto quanto lo schermo se ne
vedrebbe circa un quarto, ingrandito oltre la sua risoluzione. Nella versione
mobile la sezione si apre percio' in verticale - il video nel suo formato
naturale 16:9, quindi per intero e nitido, e il testo sotto su fondo pieno. */
@media (max-width:960px){
#scrollytelling{height:auto}
#stage{height:auto;display:flex;flex-direction:column;background:var(--bg)}
#frame{width:100%;height:auto;aspect-ratio:16/9;background:#000}
/* la barra laterale smette di essere sovrapposta e diventa il blocco sotto */
#scrub-side{position:static;width:100%;height:auto;display:block;background:var(--bg)}
/* respiro in fondo: sotto comincia il testo della sezione Vigneto, e senza
stacco i due blocchi sembravano un unico ammasso di testo */
#scrub-side .side-inner{padding:30px var(--pad) clamp(46px,9vw,74px)}
/* senza la barra laterale a contenerlo il testo si allungherebbe troppo */
#scrollytelling .block .inner{max-width:640px}
/* i padding laterali di .side-inner sono uguali a destra e a sinistra,
quindi centrare qui dentro vuol dire centrare rispetto alla pagina */
#scrub-nav{margin-top:24px;justify-content:center}
#scrub-hint{text-align:center} /* qui le frecce sono centrate, il cenno le segue */
#scrub-nav button{width:52px;height:52px}
/* il caricamento copre il solo riquadro del video, non anche il testo */
#loader{inset:auto 0 0 0;height:auto;flex-direction:row;gap:12px;
justify-content:flex-start;padding:14px var(--pad);background:rgba(10,9,8,.9)}
#loader small{font-size:12px}
#bar{width:110px}
}
/* barra di caricamento: coperta la sola sezione, non tutta la pagina */
#loader{position:absolute;inset:0;z-index:5;background:var(--bg);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
transition:opacity .5s ease}
#loader.hidden{opacity:0;pointer-events:none}
#bar{width:220px;height:3px;background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden}
#bar > i{display:block;height:100%;width:0;background:var(--gold);transition:width .1s linear}
#loader small{font-family:var(--sans);color:var(--muted);font-size:13px;letter-spacing:.03em}