/* ==========================================================================
   MonteSoprano — Landing "Allevatori Editoriale" (anteprima cinematografica)
   Prototipo di design — immagini Stitch placeholder, font via CDN.
   In produzione: font self-hosted + foto reali (Nunzio Fazio).
   ========================================================================== */

:root{
  --red:#D41119; --red-ink:#9A0B10; --red-hover:#B00E15;
  --ink:#23211D; --cream:#F5F0E8; --cream-card:#FBF8F2; --paper:#fff;
  --border:#E5DFD4; --muted:#6B6459;
  --charcoal:#1A1917; --charcoal-2:#12100E;
  --ochre:#C8873A; --olive:#6E7250;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --container:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:clamp(15px,1vw+13px,17px); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{text-decoration:none}
body a,body a:visited{color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.03; letter-spacing:-.02em; margin:0}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* film grain overlay */
.grain{position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,64px)}
.eyebrow{font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:.6em}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--red)}
.eyebrow.on-dark{color:#c9c2b6}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.6em; font-weight:600; font-size:.92rem; padding:.95em 1.6em; border-radius:2px; border:1px solid transparent; transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s; will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red); color:#fff}
.btn-primary:hover{background:var(--red-hover)}
.btn-ghost{border-color:currentColor; color:var(--ink)}
.btn-ghost.on-dark{color:var(--cream)}
.btn-ghost:hover{background:var(--ink); color:var(--cream)}
.btn-ghost.on-dark:hover{background:var(--cream); color:var(--ink)}
.btn .ar{transition:transform .5s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- reveal system ---------- */
[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease-io),transform 1s var(--ease-io); transition-delay:var(--d,0ms)}
[data-reveal].vis{opacity:1; transform:none}
.mask{display:block; overflow:hidden}
.mask>span{display:block; transform:translateY(110%); transition:transform 1.1s var(--ease-io); transition-delay:var(--d,0ms)}
.mask.vis>span{transform:none}

/* ============================ NAV ============================ */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2vw,22px) clamp(20px,5vw,64px); transition:background .4s,backdrop-filter .4s,padding .4s,box-shadow .4s}
.nav.scrolled{background:rgba(245,240,232,.86); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--border); padding-top:12px; padding-bottom:12px}
.nav__logo{height:38px; width:auto; transition:height .4s}
.nav.scrolled .nav__logo{height:32px}
.nav__menu{display:flex; gap:2rem; font-size:.86rem; font-weight:500; letter-spacing:.02em; color:var(--cream); transition:color .4s}
.nav.scrolled .nav__menu{color:var(--ink)}
.nav__menu a{position:relative; padding:4px 0}
.nav__menu a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease)}
.nav__menu a:hover::after{transform:scaleX(1); transform-origin:left}
.nav__cta{display:flex; align-items:center; gap:1.2rem}
.nav__cta .btn{padding:.6em 1.2em; font-size:.82rem}
.nav__burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0; border:none; background:transparent}
.nav__burger span{display:block; width:24px; height:2px; background:var(--cream); margin:0 auto; transition:transform .35s var(--ease),opacity .25s,background .4s}
.nav.scrolled .nav__burger span{background:var(--ink)}
body.menu-open .nav__burger span{background:var(--cream)}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0}
body.menu-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.menu-open .nav{background:transparent!important; box-shadow:none!important}
@media(max-width:900px){ .nav__menu,.nav__cta .btn{display:none} .nav__burger{display:flex} }
/* mobile fullscreen menu */
.mnav{position:fixed; inset:0; z-index:95; background:var(--charcoal-2); display:flex; flex-direction:column; justify-content:center; gap:.1rem; padding:5rem clamp(28px,9vw,56px) 3rem;
  transform:translateX(100%); opacity:0; visibility:hidden; transition:transform .55s var(--ease),opacity .4s,visibility .55s}
body.menu-open .mnav{transform:none; opacity:1; visibility:visible}
.mnav a{font-family:var(--serif); font-size:clamp(1.9rem,8vw,2.6rem); color:var(--cream); padding:.32em 0; border-bottom:1px solid rgba(255,255,255,.09); display:flex; align-items:center; justify-content:space-between}
.mnav a .ar{color:var(--red); font-size:1.2rem}
.mnav .btn{margin-top:1.6rem; font-family:var(--sans); font-size:1rem; justify-content:center; border:none}

/* ============================ HERO ============================ */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--cream); overflow:hidden; background:var(--charcoal-2)}
.hero__bg{position:absolute; inset:-8% 0 -8% 0; z-index:0; will-change:transform}
.hero__bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.62) contrast(1.05) saturate(.92)}
.hero__bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(18,16,14,.55) 0%,rgba(18,16,14,.15) 35%,rgba(18,16,14,.35) 60%,rgba(18,16,14,.92) 100%)}
.hero__inner{position:relative; z-index:2; width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,64px) clamp(48px,7vw,96px)}
.hero__eyebrow{margin-bottom:clamp(20px,3vw,34px)}
.hero h1{font-size:clamp(3rem,10.5vw,9.5rem); font-weight:500; letter-spacing:-.035em}
.hero h1 em{font-style:italic; font-weight:400; color:var(--cream)}
.hero__sub{max-width:46ch; margin:clamp(22px,3vw,34px) 0 clamp(30px,4vw,42px); font-size:clamp(1rem,1.3vw,1.18rem); color:#d9d2c6; line-height:1.65}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem}
.hero__scroll{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:#c9c2b6}
.hero__scroll .line{width:1px; height:46px; background:linear-gradient(var(--cream),transparent); position:relative; overflow:hidden}
.hero__scroll .line::after{content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--red); animation:scrolldot 2.2s var(--ease) infinite}
@keyframes scrolldot{0%{top:-50%}60%,100%{top:100%}}

/* ============================ TRUST BAR ============================ */
.trust{background:var(--ink); color:var(--cream); border-bottom:1px solid rgba(255,255,255,.08)}
.trust__row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem; padding:20px 0; font-size:.78rem; letter-spacing:.04em}
.trust__row span{display:inline-flex; align-items:center; gap:.6em; color:#cfc8bc}
.trust__row b{color:var(--cream); font-weight:600}
.trust .dot{width:5px; height:5px; border-radius:50%; background:var(--red)}

/* ============================ SECTION SHELL ============================ */
.section{padding:clamp(72px,11vw,150px) 0; position:relative}
.section__head{max-width:760px; margin-bottom:clamp(40px,6vw,72px)}
.section__head h2{font-size:clamp(2rem,5.2vw,4rem); margin-top:.4em}
.section__head p{margin-top:1.1em; color:var(--muted); font-size:1.06rem; max-width:56ch}

/* ============================ 5 MONDI ============================ */
.worlds{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.world{position:relative; overflow:hidden; border-radius:3px; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; color:var(--cream); isolation:isolate}
.world:nth-child(1){grid-column:span 7} .world:nth-child(2){grid-column:span 5}
.world:nth-child(3){grid-column:span 4} .world:nth-child(4){grid-column:span 4} .world:nth-child(5){grid-column:span 4}
.world__img{position:absolute; inset:0; z-index:-2}
.world__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); transform:scale(1.02)}
.world:hover .world__img img{transform:scale(1.09)}
.world::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(18,16,14,.05),rgba(18,16,14,.82))}
.world__n{font-family:var(--serif); font-size:.9rem; color:var(--ochre); margin-bottom:auto}
.world__t{font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:600}
.world__d{font-size:.9rem; color:#d4cdc1; margin-top:.4em; max-width:34ch; opacity:0; max-height:0; transform:translateY(8px); transition:.6s var(--ease)}
.world:hover .world__d{opacity:1; max-height:80px; transform:none}
.world__link{margin-top:16px; display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; font-weight:600; letter-spacing:.04em}
.world__link .ar{transition:transform .5s var(--ease)}
.world:hover .world__link .ar{transform:translateX(5px)}
.world--red{background:var(--red)} .world--red::after{display:none} .world--red .world__n{color:rgba(255,255,255,.7)}
@media(max-width:820px){ .worlds{grid-template-columns:1fr 1fr} .world,.world:nth-child(n){grid-column:span 1!important} .world__d{opacity:1; max-height:80px; transform:none} }
@media(max-width:520px){ .worlds{grid-template-columns:1fr} }

/* ============================ STORY ============================ */
.story{background:var(--cream-card); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.story__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center}
.story__media{position:relative; border-radius:3px; overflow:hidden; aspect-ratio:4/5}
.story__media img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.4s var(--ease)}
.story__media.vis img{transform:scale(1)}
.story__badge{position:absolute; left:20px; bottom:20px; background:var(--cream); color:var(--ink); font-family:var(--serif); font-size:.82rem; padding:10px 16px; border-radius:2px}
.story__badge b{color:var(--red)}
.story h2{font-size:clamp(1.9rem,4.4vw,3.4rem)}
.story p{color:var(--muted); margin:1.2em 0}
.stats{display:flex; gap:clamp(24px,4vw,54px); margin-top:2.2em; flex-wrap:wrap}
.stat__n{font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:600; color:var(--red); line-height:1}
.stat__l{font-size:.8rem; color:var(--muted); letter-spacing:.03em; margin-top:.5em; max-width:14ch}
@media(max-width:820px){ .story__grid{grid-template-columns:1fr} .story__media{aspect-ratio:16/11} }

/* ============================ PRODOTTI ============================ */
.prods{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{background:var(--paper); border:1px solid var(--border); border-radius:3px; overflow:hidden; transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(35,33,29,.13)}
.card__img{aspect-ratio:1; overflow:hidden}
.card__img img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.card:hover .card__img img{transform:scale(1.07)}
.card__b{padding:18px}
.card__cat{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); font-weight:600}
.card__t{font-family:var(--serif); font-size:1.18rem; margin:.35em 0 .1em}
.card__meta{font-size:.78rem; color:var(--muted)}
.card__f{display:flex; align-items:center; justify-content:space-between; margin-top:14px}
.card__price{font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--red)}
.card__add{width:38px; height:38px; border-radius:2px; background:var(--ink); color:var(--cream); display:grid; place-items:center; font-size:1.1rem; transition:background .3s,transform .4s var(--ease)}
.card__add:hover{background:var(--red); transform:scale(1.1)}
@media(max-width:820px){ .prods{grid-template-columns:1fr 1fr} }

/* ============================ AGRITURISMO ============================ */
.agri{position:relative; color:var(--cream); background:var(--charcoal-2); overflow:hidden}
.agri__bg{position:absolute; inset:-8% 0; z-index:0; will-change:transform}
.agri__bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.5)}
.agri__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,16,14,.88),rgba(18,16,14,.4))}
.agri__inner{position:relative; z-index:2; max-width:620px}
.agri h2{font-size:clamp(2rem,5vw,3.8rem)}
.agri p{color:#d9d2c6; margin:1.2em 0 1.8em}
.agri__srv{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:2rem}
.chip{border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:.5em 1.1em; font-size:.8rem; color:#e6e0d5}
.chip b{color:var(--ochre); font-weight:600}

/* ============================ NEWSLETTER ============================ */
.news{background:var(--red); color:#fff; text-align:center}
.news h2{font-size:clamp(1.8rem,4.2vw,3rem); color:#fff}
.news p{color:rgba(255,255,255,.85); margin:1em auto 2em; max-width:44ch}
.news__form{display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.news__form input{flex:1; min-width:220px; padding:1em 1.2em; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.1); color:#fff; border-radius:2px; font:inherit}
.news__form input::placeholder{color:rgba(255,255,255,.7)}
.news__form button{background:#fff; color:var(--red); border:none; padding:1em 1.6em; border-radius:2px; font-weight:600; cursor:pointer; transition:transform .4s var(--ease)}
.news__form button:hover{transform:translateY(-2px)}

/* ============================ FOOTER ============================ */
.foot{background:var(--charcoal-2); color:#cfc8bc; padding:clamp(56px,8vw,90px) 0 40px}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.foot__logo{height:40px; margin-bottom:20px}
.foot h4{font-family:var(--sans); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#7d766a; margin:0 0 16px}
.foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:.9rem}
.foot a:hover{color:var(--cream)}
.foot__sedi{font-size:.86rem; line-height:1.7}
.foot__sedi b{color:var(--cream); font-weight:600}
.foot__bar{border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.76rem; color:#7d766a}
@media(max-width:820px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .foot__grid{grid-template-columns:1fr} }

/* preloader */
.pre{position:fixed; inset:0; z-index:9999; background:var(--charcoal-2); display:grid; place-items:center; transition:transform 1s var(--ease) .2s}
.pre.done{transform:translateY(-100%)}
.pre img{height:52px; opacity:0; transform:translateY(10px); animation:preIn 1s var(--ease) forwards}
@keyframes preIn{to{opacity:1; transform:none}}

/* ============================ MOBILE POLISH ============================ */
@media(max-width:640px){
  .hero{min-height:100svh}
  .hero__inner{padding-bottom:clamp(70px,16vw,110px)}
  .hero h1{font-size:clamp(3.2rem,17vw,5rem)}
  .hero__sub{font-size:1.02rem}
  .hero__actions{flex-direction:column; align-items:stretch; gap:.7rem}
  .hero__actions .btn{width:100%; justify-content:center; padding:1.05em 1.6em}
  .hero__scroll{display:none}
  .trust__row{display:grid; grid-template-columns:1fr; gap:12px; padding:22px 0}
  .trust__row span{font-size:.82rem}
  .section__head p{font-size:1rem}
  .stats{gap:26px 32px}
  .prods{grid-template-columns:1fr 1fr; gap:12px}
  .card__b{padding:14px}
  .card__t{font-size:1.05rem}
  .foot__grid{grid-template-columns:1fr 1fr; gap:28px}
  .agri{padding-top:clamp(64px,14vw,96px)}
}
@media(max-width:420px){
  .prods{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  [data-reveal],.mask>span{opacity:1!important; transform:none!important}
  .pre{display:none}
}

/* ---- Pagine condivise (WooCommerce/blog): spazio sotto la nav fissa ---- */
.ms-nav-spacer{height:76px}
.ms-shared .nav{position:fixed}

/* ---- Fix: batte .woocommerce-page img{height:auto} (specificita' 0,1,1) sul logo ---- */
.nav .nav__logo{height:38px;width:auto}
.nav.scrolled .nav__logo{height:32px}
.foot .foot__logo{height:40px;width:auto}


/* ============================================================
   QA FIXES — audit responsive/animazioni 2026-07-18
   Blocco additivo: appeso al design system condiviso di ogni pagina.
   ============================================================ */
:root{--nav-h:76px}

/* ---------- P0 ---------- */
/* 0.2 timeline: clamp invertito (min>max) -> pallini staccati dalla linea */
.tl__dot{left:clamp(-52px,-6vw,-28px)}
/* 2.20 codice morto */
.tl__dot::before{content:none}

/* ---------- P1 — design system ---------- */
/* 1.1 barre filtro sticky finivano sotto la nav fixed */
.shopbar,.ms-locbar{top:var(--nav-h)}
/* 1.2 anchor interni coperti dalla nav */
[id]{scroll-margin-top:92px}
/* 1.3 tap target >=44px su touch */
@media(pointer:coarse){
  .card__add,.ms-card__add,.qty button,.qty input,.crow__rm,.bk-stepper button{min-width:44px;min-height:44px}
  .ms-loctab{min-height:44px;padding:.85em 1.25em}
  .ms-place-card__cta .btn{min-height:48px}
  .field input,.field select,.field textarea{min-height:44px}
}
/* 1.4 input 16px su mobile: evita l'auto-zoom di Safari iOS */
@media(max-width:640px){
  .field input,.field select,.field textarea,.news__form input,input[type=email],input[type=text],input[type=tel],select,textarea{font-size:16px}
}
/* 1.5 descrizioni 5-mondi: hover solo con puntatore fine, sempre visibili su touch */
@media(hover:hover) and (pointer:fine){ .world:hover .world__d{opacity:1;max-height:80px;transform:none} }
@media(hover:none){ .world__d{opacity:1;max-height:80px;transform:none} }
/* 1.6 scroll-lock quando il menu mobile è aperto */
body.menu-open{overflow:hidden}
/* 1.7 nav su pagine WooCommerce (fondo chiaro): menu/burger scuri, non crema-su-crema */
.ms-shared .nav__menu,.ms-shared .nav__menu a{color:var(--ink)}
.ms-shared .nav__burger span{background:var(--ink)}
/* 1.13 chi-siamo: override mobile del sub-hero (era dimenticato) */
@media(max-width:640px){ .subhero h1{font-size:clamp(2.3rem,11vw,3.6rem)} }
/* 1.14 menu: i due tab Milano erano indistinguibili (small nascosto) */
.ms-loctab small{display:inline;font-size:.66rem;opacity:.75}
/* 1.16 camere/agriturismo: la 3ª camera (Suite) spariva tra 561-820 */
@media(max-width:820px){ .rooms{grid-template-columns:1fr 1fr} .rooms>:nth-child(3){grid-column:1/-1} }

/* ---------- P2 — rifiniture chiave ---------- */
/* 2.3 reveal più snelli (scroll meno "molle") */
[data-reveal]{transition-duration:.6s}
.mask>span{transition-duration:.78s}
/* 2.5 niente layer GPU permanenti su ogni bottone */
.btn{will-change:auto}
.btn:hover{will-change:transform}
/* 2.6 focus visibile coerente col brand */
.btn:focus-visible,.nav__menu a:focus-visible,.nav__burger:focus-visible,.ms-cartbtn:focus-visible,.mnav a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* 2.8 trust bar a tablet: griglia 2 col invece di justify irregolare */
@media(min-width:641px) and (max-width:820px){ .trust__row{display:grid;grid-template-columns:repeat(2,auto);justify-content:space-between;gap:12px 2rem} }
/* 2.11 menu mobile: scrollabile, allineato in alto (no item fuori viewport) */
.mnav{justify-content:flex-start;overflow-y:auto;padding-top:6rem}
/* 2.13 corsivo Fraunces del sub-hero non tosato dall'overflow del reveal */
.subhero h1.mask,.subhero .mask{padding-bottom:.08em}
/* 2.15 index: hero non tagliato a 375px */
@media(max-width:390px){ .hero h1{font-size:clamp(2.7rem,15vw,4.4rem)} }
/* 2.16 index: 5ª card (rossa) a tutta riga in griglia 2col */
@media(min-width:521px) and (max-width:820px){ .worlds{grid-template-columns:1fr 1fr} .world:nth-child(5){grid-column:1/-1} }
/* 2.17 contrasto descrizione sulla card rossa */
.world--red .world__d{color:rgba(255,255,255,.92)}
/* 2.18 pareggia altezza meta card prodotto */
.card__meta{min-height:2.6em}
/* 2.19 newsletter form: colonna piena su mobile */
@media(max-width:520px){ .news__form{flex-direction:column} .news__form input,.news__form button{width:100%} }
/* 2.12 footer: tap target link */
@media(max-width:640px){ .foot ul{gap:14px} .foot ul a{display:inline-block;padding:8px 0} }
/* 2.22 menu: riga piatto con nome lungo -> prezzo all'ultima riga */
.ms-dish-line{align-items:flex-end}
.ms-dish-name{flex:1 1 auto}
/* 2.23 menu: listino non troppo largo su desktop */
.ms-menu{max-width:920px;margin-left:auto;margin-right:auto}
/* 2.39 contatti: eyebrow leggibile sul sub-hero */
.subhero .eyebrow.on-dark{color:#e6e0d5}


/* 2.1 buffer parallax anti-striscia scura ai bordi */
.hero__bg,.subhero__bg,.agri__bg,.cta2__bg{inset:-14% 0}

/* Preloader: auto-hide di sicurezza (JS-independent) — mai bloccare i tap */
.pre{animation:msPreOut 0s linear 3s forwards}
@keyframes msPreOut{to{transform:translateY(-100%);visibility:hidden;pointer-events:none}}


/* ============================================================
   DESIGN COHERENCE — audit 2026-07-18 (una sola lingua visiva)
   ============================================================ */

/* 1) SUB-HERO UNIFICATA — le pagine si aprivano in 6 modi diversi.
   Target .subhero:not(.hero) = le sub-hero editoriali (esclude i brand-hero). */
.subhero:not(.hero){min-height:62svh}
.subhero:not(.hero) .subhero__bg img{filter:brightness(.6) contrast(1.05) saturate(.92)}
.subhero:not(.hero) .subhero__bg::after{background:linear-gradient(180deg,rgba(18,16,14,.55) 0%,rgba(18,16,14,.15) 35%,rgba(18,16,14,.35) 60%,rgba(18,16,14,.92) 100%)}
.subhero:not(.hero) h1{font-size:clamp(2.6rem,8vw,6rem);letter-spacing:-.03em}
.subhero:not(.hero) .subhero__sub{max-width:52ch;font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.65}
.subhero:not(.hero) .hero__scroll,.subhero:not(.hero) .subhero__scroll{display:none}

/* 2) DISCIPLINA DEL ROSSO — solo CTA e prezzi.
   La tacca dell'eyebrow e la tessera rossa erano decorative. */
.eyebrow::before{background:var(--ochre,#C8873A)}
.world--red{background:var(--olive,#6E7250)}
.world--red .world__n{color:rgba(255,255,255,.7)}

/* 3) UN SOLO RADIUS (2px) su card e media grandi (c'erano 2/3/4/99px) */
.card,.ms-card,.ms-room-card,.ms-service-card,.ms-place-card,.story__media,.card__img,
.ms-card__img,.ms-place-card__media,.ms-room-card__img{border-radius:2px}

/* 4) FOCUS FORM coerente = ink (contatti usava il rosso) */
.field input:focus,.field select:focus,.field textarea:focus,
.field input:focus-visible,.field select:focus-visible{
  border-color:var(--ink,#23211D);box-shadow:0 0 0 3px rgba(35,33,29,.08);outline:none}

/* 5) UNA SOLA OMBRA hover sulle card */
.card:hover,.ms-card:hover,.ms-room-card:hover,.ms-place-card:hover{box-shadow:0 18px 40px rgba(35,33,29,.13)}



/* ============================================================
   CONTENUTO SEMPRE VISIBILE (2026-07-18) — il reveal lasciava
   il contenuto nascosto durante lo scroll = spazi vuoti su desktop.
   Ora tutto visibile subito (hover/transizioni restano).
   ============================================================ */
[data-reveal]{opacity:1!important;transform:none!important}
.mask>span{transform:none!important}
[data-reveal],.mask>span{transition:none!important}


/* Preloader RIMOSSO: copriva le tessere e bloccava i click sui link */
.pre{display:none!important}


/* ===== FIX menu laterale mobile: coerenza colore voci (crema) =====
   body a:visited{color:inherit} (0,1,2) batteva .mnav a (0,1,1): le voci
   visitate diventavano scure. Qui tutte le voci tornano crema in ogni stato. */
.mnav a:not(.btn),
.mnav a:not(.btn):link,
.mnav a:not(.btn):visited{ color:var(--cream,#F5F0E8); }
.mnav a.active,
.mnav a.active:visited{ color:var(--red,#D41119); }
.mnav a .ar{ color:var(--red,#D41119); }
.mnav a.btn-primary,
.mnav a.btn-primary:visited{ color:#fff; }