/* ============================================================
   TRASI — sistema visivo
   Marchio: cerchio disegnato a mano + T serif. Crema e terracotta.
   Caratteri: PP Fragment Serif (display) + SF Pro Display (testo e UI).
   ============================================================ */

@font-face{font-family:"PP Fragment";src:url("../fonts/ppfragment-serif-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"PP Fragment";src:url("../fonts/ppfragment-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Fragment";src:url("../fonts/ppfragment-serif-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PP Fragment";src:url("../fonts/ppfragment-serif-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"SF Pro Display";src:url("../fonts/sfpro-display-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SF Pro Display";src:url("../fonts/sfpro-display-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"SF Pro Display";src:url("../fonts/sfpro-display-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* marchio */
  --terra:#B4603F;
  --terra-bg:#A85434;
  --terra-scura:#8E4629;
  --terra-chiara:#D08A66;
  --crema:#FDEEE3;
  --crema-2:#F9D8C1;
  --sabbia:#EFCDB4;
  --bruno:#3A1E10;
  --bruno-2:#7A5340;

  /* ruoli, riassegnati dai temi di sezione */
  --bg:var(--crema);
  --fg:var(--bruno);
  --muted:var(--bruno-2);
  --line:rgba(58,30,16,.16);
  --acc:var(--terra);
  --acc-txt:var(--terra-scura);

  --pad:clamp(20px,4.5vw,80px);
  --gap:clamp(16px,2vw,32px);
  --maxw:1680px;

  --f-display:"PP Fragment",Georgia,"Times New Roman",serif;
  --f-body:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--crema)}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,canvas{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

body{
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.5;
  letter-spacing:-.005em;
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100vh}
::selection{background:var(--terra);color:var(--crema)}

/* --------- temi di sezione (nessun fondo scuro) --------- */
.t-crema{--bg:var(--crema);--fg:var(--bruno);--muted:var(--bruno-2);--line:rgba(58,30,16,.16);
  --acc:var(--terra);--acc-txt:var(--terra-scura);background:var(--crema);color:var(--bruno)}
.t-sabbia{--bg:var(--crema-2);--fg:var(--bruno);--muted:var(--bruno-2);--line:rgba(58,30,16,.2);
  --acc:var(--terra);--acc-txt:var(--terra-scura);background:var(--crema-2);color:var(--bruno)}
.t-terra{--bg:var(--terra-bg);--fg:var(--crema);--muted:rgba(253,238,227,.82);--line:rgba(253,238,227,.32);
  --acc:var(--crema);--acc-txt:var(--crema);background:var(--terra-bg);color:var(--crema)}

/* ============================================================
   Tipografia
   ============================================================ */
.d1,.d2,.d3{font-family:var(--f-display);font-weight:300;line-height:.9;letter-spacing:-.02em;text-wrap:balance}
.d1{font-size:clamp(3.2rem,11vw,11.5rem);line-height:.86}
.d2{font-size:clamp(2.4rem,6.4vw,6.2rem);line-height:.92}
.d3{font-size:clamp(1.8rem,3.4vw,3.4rem);line-height:1;letter-spacing:-.015em}
.serif{font-family:var(--f-display);font-weight:300}
.italic{font-style:italic}

/* il logotipo: grottesco pesante, come nel marchio */
.wordmark{font-family:var(--f-body);font-weight:700;text-transform:uppercase;letter-spacing:-.012em;line-height:.84}

.lead{font-size:clamp(1.15rem,1.8vw,1.6rem);line-height:1.32;letter-spacing:-.015em;text-wrap:pretty}
.body-l{font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.56}
.mono{font-family:var(--f-body);font-weight:500;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.muted{color:var(--muted)}

.tag{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-body);font-weight:500;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-txt)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ============================================================
   Icone (Lucide, tratto sottile come nei portali di prenotazione)
   ============================================================ */
.ic{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.25em;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mi{display:inline-flex;align-items:center;gap:.5em}
.meta-row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.mrow__t,.mrow__m,.erow__tipo,.erow__dur{display:flex;justify-content:flex-end}
.mrow__t{justify-content:flex-start}
.mrow__m{width:6.5rem}
.mono .ic,.tag .ic{width:1.6em;height:1.6em;vertical-align:-.45em}

/* ============================================================
   Layout
   ============================================================ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{position:relative;padding-block:clamp(72px,11vw,170px)}
.sec--tight{padding-block:clamp(52px,7vw,110px)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.rule{height:1px;background:var(--line);width:100%;transform-origin:left}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,64px)}

.col-12{grid-column:span 12}
.col-5{grid-column:span 5}
.col-4{grid-column:span 4}
.col-r5{grid-column:8/13}
.col-r6{grid-column:7/13}
.col-r7{grid-column:6/13}
@media (max-width:1100px){
  .col-5,.col-4,.col-r5,.col-r6,.col-r7{grid-column:1/-1}
  .col-r5,.col-r6,.col-r7{margin-top:clamp(18px,4vw,40px)}
}

/* ============================================================
   Grana
   ============================================================ */
.grain{position:fixed;inset:-120%;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,-2%)}50%{transform:translate(2%,3%)}75%{transform:translate(-2%,2%)}100%{transform:translate(0,0)}}

/* ============================================================
   Cursore
   ============================================================ */
.cur{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;will-change:transform}
.cur__ring{width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  border:1.5px solid var(--cur,var(--terra));display:grid;place-items:center;
  transition:width .45s var(--e-out),height .45s var(--e-out),margin .45s var(--e-out),background-color .45s var(--e-out),border-color .45s var(--e-out)}
.cur__lbl{font-family:var(--f-body);font-weight:500;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cur-txt,var(--crema));opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s var(--e-out);white-space:nowrap}
.cur__dot{position:fixed;top:0;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--cur,var(--terra));z-index:9501;pointer-events:none}
body.cur-link .cur__ring{width:62px;height:62px;margin:-31px 0 0 -31px;background:var(--cur,var(--terra));border-color:var(--cur,var(--terra))}
body.cur-lbl .cur__ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--cur,var(--terra));border-color:var(--cur,var(--terra))}
body.cur-lbl .cur__lbl{opacity:1;transform:scale(1)}
body.cur-lbl .cur__dot,body.cur-link .cur__dot{opacity:0}
body.cur-hide .cur,body.cur-hide .cur__dot{opacity:0}
@media (hover:none),(pointer:coarse){.cur,.cur__dot{display:none}}

/* ============================================================
   Preloader e tendina
   ============================================================ */
/* I due sipari si aprono come una porta scorrevole: un'anta a sinistra,
   una a destra. Le ante si sovrappongono di un filo al centro per non
   lasciare la fessura di un pixel mentre sono chiuse. */
.loader{position:fixed;inset:0;z-index:9800;display:grid;place-items:center;overflow:hidden;color:var(--bruno)}
.loader__anta,.curtain__anta{position:absolute;top:0;bottom:0;width:50.4%;z-index:0;will-change:transform}
.loader__anta{background:var(--crema)}
.loader__anta--sx,.curtain__anta--sx{left:0}
.loader__anta--dx,.curtain__anta--dx{right:0}
.loader__inner{position:relative;z-index:2;width:100%;padding-inline:var(--pad);max-width:var(--maxw);transition:opacity .45s var(--e-out),transform .7s var(--e-out)}
.loader__row{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.loader__word{font-family:var(--f-body);font-weight:700;text-transform:uppercase;
  font-size:clamp(3rem,13vw,13rem);line-height:.82;letter-spacing:-.02em;display:flex;color:var(--terra)}
.loader__word span{display:block;transform:translateY(110%);opacity:0}
.loader__meta{text-align:right;color:var(--bruno-2)}
.loader__num{font-family:var(--f-body);font-weight:500;font-size:clamp(1.4rem,3.4vw,2.8rem);line-height:1;color:var(--terra);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.loader__bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--terra);z-index:3}
.loader__mark{width:clamp(46px,7vw,96px);color:var(--terra);flex:none}

.curtain{position:fixed;inset:0;z-index:9700;pointer-events:none;display:grid;place-items:center}
.curtain__anta{background:var(--terra-bg)}
.curtain__mark{position:relative;z-index:2;width:clamp(64px,12vw,150px);color:var(--crema);opacity:0}

/* ============================================================
   Marchio
   ============================================================ */
.brand{display:inline-flex;align-items:center;gap:.55em;color:var(--nav-fg,var(--fg))}
.brand__mark{width:1.9em;height:auto;flex:none}
.brand__txt{font-family:var(--f-body);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:1.18rem;line-height:1}

/* ============================================================
   Navigazione
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;padding:clamp(13px,1.5vw,22px) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  color:var(--nav-fg,var(--bruno));
  transition:transform .7s var(--e-out),opacity .5s,color .6s var(--e-out)}
.nav--up{transform:translateY(-115%);opacity:0}
.nav--onmedia{text-shadow:0 1px 14px rgba(0,0,0,.28)}
.nav.nav--onmedia::before{content:"";position:absolute;left:0;right:0;top:0;height:190%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,0));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent);mask-image:linear-gradient(180deg,#000 35%,transparent)}
.nav.nav--onmedia .nav__cta{box-shadow:0 1px 18px rgba(0,0,0,.14)}
.nav__links{display:flex;gap:clamp(14px,2vw,34px);align-items:center}
.nav__links a{font-family:var(--f-body);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;position:relative;padding-block:4px}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__cta{display:inline-flex;align-items:center;border:1.5px solid currentColor;border-radius:100px;padding:.6em 1.2em;
  font-family:var(--f-body);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .45s var(--e-out),color .45s var(--e-out)}
.nav__cta:hover{background:var(--nav-fg,var(--bruno));color:var(--nav-bg,var(--crema))}
.nav__burger{display:none;width:44px;height:44px;border:1.5px solid currentColor;border-radius:50%;background:none;cursor:pointer;position:relative;color:inherit}
.nav__burger i{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .5s var(--e-out)}
.nav__burger i:nth-child(1){top:18px}
.nav__burger i:nth-child(2){top:24px}
body.menu-open .nav__burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .nav__burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
body.menu-open .nav{--nav-fg:var(--crema)}

.menu{position:fixed;inset:0;z-index:880;background:var(--terra-bg);color:var(--crema);
  display:flex;flex-direction:column;padding:calc(var(--pad) + 66px) var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0);pointer-events:none}
body.menu-open .menu{pointer-events:auto}
.menu__list{margin-block:auto}
/* stessa maschera allargata delle parole: le code di p e g non si tagliano */
.menu__list li{font-size:clamp(2.4rem,8.5vw,6.5rem);clip-path:inset(0 -1em);padding:.1em 0 .38em;margin:-.1em 0 -.38em}
.menu__list a{display:block;font-family:var(--f-display);font-weight:300;
  font-size:1em;line-height:1.04;letter-spacing:-.02em;color:var(--crema);
  transform:translateY(140%);transition:opacity .4s}
.menu__list a:hover{opacity:.62}
.menu__foot{margin-top:auto;padding-top:2rem;border-top:1px solid rgba(253,238,227,.3);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:rgba(253,238,227,.85)}

/* ============================================================
   Bottoni
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.85em;position:relative;overflow:hidden;isolation:isolate;
  border:1.5px solid currentColor;border-radius:100px;padding:1em 1.7em;
  font-family:var(--f-body);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;background:none;color:var(--acc-txt);transition:color .5s var(--e-out)}
.btn::before{content:"";position:absolute;inset:0;background:currentColor;transform:translateY(101%);transition:transform .6s var(--e-out);z-index:-1}
.btn:hover::before{transform:translateY(0)}
.btn:hover,.btn:hover span{color:var(--bg)}
.btn span{transition:color .5s var(--e-out)}
.btn--lg{padding:1.2em 2.1em;font-size:.75rem}
.btn--solid{background:var(--terra);border-color:var(--terra);color:var(--crema)}
.btn--solid::before{background:var(--crema)}
.btn--solid:hover,.btn--solid:hover span{color:var(--terra)}
.btn__ar{transition:transform .5s var(--e-out)}
.btn:hover .btn__ar{transform:translateX(5px)}

.alink{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-body);font-weight:500;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;position:relative;color:var(--acc-txt)}
.alink::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--e-out)}
.alink:hover::after{transform:scaleX(1);transform-origin:left}

/* ============================================================
   Rivelazioni
   ============================================================ */
.sp-line{display:block;overflow:hidden}
.sp-line>i{display:block;font-style:inherit;transform:translateY(105%);opacity:0;transition:transform 1.05s var(--e-out),opacity .8s var(--e-out)}
.is-in .sp-line>i{transform:translateY(0);opacity:1}
/* La maschera della parola sborda sopra e sotto (accenti e code di g, p, q),
   e i margini negativi uguali la riportano al suo posto: l'interlinea non cambia. */
/* le maschere delle animazioni tagliano solo sopra e sotto: ai lati corsivi e punteggiatura
   (il ! di "Come on in!") possono sporgere dalla loro casella */
.sp-w{display:inline-block;clip-path:inset(0 -.6em);vertical-align:bottom;padding:.24em 0 .26em;margin:-.24em 0 -.26em}
.sp-w>i{display:inline-block;font-style:inherit;transform:translateY(150%);transition:transform 1.1s var(--e-out)}
.is-in .sp-w>i{transform:translateY(0)}

.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e-out),transform 1.05s var(--e-out)}
.is-in .rv,.rv.is-in{opacity:1;transform:none}

.rv-img{overflow:hidden;position:relative}
.rv-img>img{transform:scale(1.18);transition:transform 1.6s var(--e-out),filter 1.6s var(--e-out);filter:blur(5px)}
.is-in .rv-img>img,.rv-img.is-in>img{transform:scale(1);filter:blur(0)}
.rv-img::after{content:"";position:absolute;inset:0;background:var(--crema-2);transform-origin:bottom;transition:transform 1.25s var(--e-io)}
.is-in .rv-img::after,.rv-img.is-in::after{transform:scaleY(0)}

.rv-line{transform:scaleX(0);transition:transform 1.1s var(--e-out)}
.is-in .rv-line,.rv-line.is-in{transform:scaleX(1)}

[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}[data-d="3"]{transition-delay:.24s}
[data-d="4"]{transition-delay:.32s}[data-d="5"]{transition-delay:.4s}[data-d="6"]{transition-delay:.48s}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--crema-2)}
.hero__gl{position:absolute;inset:0;width:100%;height:100%}
.hero__fallback{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.26) 100%)}
/* sfocatura leggera dietro al logotipo, senza colore */
.hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(0deg,#000 20%,transparent);mask-image:linear-gradient(0deg,#000 20%,transparent)}
.hero__in{text-shadow:0 2px 30px rgba(0,0,0,.22);position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);padding-bottom:clamp(24px,3.4vw,52px);max-width:var(--maxw);margin-inline:auto;width:100%;color:var(--crema)}
.hero__mark{width:clamp(78px,13vw,190px);color:var(--crema);flex:none}
.hero__head{margin:0;font-weight:inherit}
.hero__lock{display:flex;align-items:center;gap:clamp(12px,2vw,36px)}
.hero__word{font-size:clamp(3.4rem,13vw,13rem);letter-spacing:-.02em}
/* seconda riga dell'headline, nel serif del marchio */
.hero__tag{display:block;margin-top:clamp(6px,1vw,16px);font-family:var(--f-display);font-weight:300;font-size:clamp(2.2rem,6.6vw,6.6rem);line-height:.95;letter-spacing:-.02em;color:var(--crema)}
.hero__sub{display:flex;justify-content:flex-end;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-top:clamp(16px,2.2vw,30px)}
.hero__def{max-width:36ch;color:rgba(253,238,227,.9)}
.hero__def b{font-weight:700;color:var(--crema)}
.hero__scroll{display:flex;align-items:center;gap:.8em;color:rgba(253,238,227,.9)}
.hero__scroll i{display:block;width:1.5px;height:38px;background:rgba(253,238,227,.4);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--crema);animation:scrollcue 2.1s var(--e-io) infinite}
@keyframes scrollcue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
.hero__corner{text-shadow:0 1px 16px rgba(0,0,0,.3);position:absolute;top:calc(var(--pad) + 44px);right:var(--pad);z-index:2;text-align:right;color:rgba(253,238,227,.86);max-width:24ch}

/* ============================================================
   Marquee
   ============================================================ */
.marq{overflow:hidden;border-block:1.5px solid var(--line);padding-block:clamp(10px,1.1vw,18px);position:relative}
.marq__track{display:flex;width:max-content;will-change:transform}
.marq__track>span{display:inline-flex;align-items:center;gap:clamp(20px,3vw,52px);padding-right:clamp(20px,3vw,52px);
  font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,3.4vw,3rem);letter-spacing:-.015em;white-space:nowrap}
.marq__track em{font-style:normal;color:var(--acc);font-size:.5em}

/* ============================================================
   Numeri
   ============================================================ */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--gap)}
.num{border-top:1.5px solid var(--line);padding-top:1rem}
.num__v{font-family:var(--f-display);font-weight:300;font-size:clamp(2.6rem,5.4vw,5.2rem);line-height:.9;letter-spacing:-.025em;color:var(--acc-txt)}
.num__k{margin-top:.4rem}

/* ============================================================
   Rail orizzontale
   ============================================================ */
.rail{position:relative;height:420vh}
.rail__stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.rail__head{padding:calc(var(--pad) + 46px) var(--pad) 0;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.rail__view{flex:1;display:flex;align-items:center;overflow:hidden}
.rail__track{display:flex;gap:clamp(16px,2.4vw,44px);padding-inline:var(--pad);will-change:transform}
.rail__prog{height:2px;background:var(--line);margin:0 var(--pad) clamp(18px,2.4vw,36px);position:relative}
.rail__prog i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--acc)}

.vcard{position:relative;width:clamp(280px,31vw,520px);flex:none;cursor:pointer}
.vcard__media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sabbia)}
.vcard__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--e-out)}
.vcard:hover .vcard__media img{transform:scale(1.09)}
.vcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,30,16,.34),rgba(58,30,16,0) 42%,rgba(58,30,16,.7))}
.vcard__num{position:absolute;top:1rem;left:1rem;z-index:2;font-family:var(--f-body);font-weight:500;font-size:.7rem;letter-spacing:.18em;color:var(--crema)}
.vcard__occ{position:absolute;top:1rem;right:1rem;z-index:2;color:var(--crema)}
.vcard__occ::before{background:var(--crema)}
.vcard__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.5vw,24px);color:var(--crema)}
.vcard__nome{font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,2.2vw,2.4rem);line-height:1;letter-spacing:-.02em}
.vcard__meta{display:flex;gap:1.2rem;margin-top:.7rem;flex-wrap:wrap;color:rgba(253,238,227,.85)}
.vcard__bar{height:1.5px;background:rgba(253,238,227,.3);margin-top:.9rem;position:relative;overflow:hidden}
.vcard__bar::after{content:"";position:absolute;inset:0;background:var(--crema);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-out)}
.vcard:hover .vcard__bar::after{transform:scaleX(1)}

/* ============================================================
   Lista esperienze
   ============================================================ */
.elist{border-top:1.5px solid var(--line)}
.erow{position:relative;display:flex;align-items:center;gap:1.5rem;padding:clamp(18px,2.6vw,38px) 0;border-bottom:1.5px solid var(--line);cursor:pointer;isolation:isolate}
.erow::before{content:"";position:absolute;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);top:0;bottom:0;background:var(--terra-bg);
  transform:scaleY(0);transform-origin:bottom;transition:transform .65s var(--e-out);z-index:-1}
.erow:hover::before{transform:scaleY(1);transform-origin:top}
.erow>*{transition:color .5s var(--e-out),transform .7s var(--e-out)}
.erow:hover .erow__n,.erow:hover .erow__tipo,.erow:hover .erow__dur{color:rgba(253,238,227,.8)}
.erow:hover .erow__nome{color:var(--crema);transform:translateX(14px)}
.erow__n{width:3.2rem;flex:none;color:var(--muted)}
.erow__nome{font-family:var(--f-display);font-weight:300;font-size:clamp(1.6rem,4.2vw,3.7rem);line-height:1;letter-spacing:-.02em;flex:1}
.erow__tipo{width:8rem;flex:none;color:var(--muted);text-align:right}
.erow__dur{width:9rem;flex:none;color:var(--muted);text-align:right}
.epeek{position:fixed;top:0;left:0;width:clamp(200px,20vw,330px);aspect-ratio:4/5;z-index:800;pointer-events:none;
  overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.86);transition:opacity .45s,transform .7s var(--e-out)}
.epeek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.epeek img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.epeek{display:none}}

/* ============================================================
   Split racconto
   ============================================================ */
.duo{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:center}
.duo__media{grid-column:span 6;position:relative;overflow:hidden;aspect-ratio:4/5}
.duo__media img{width:100%;height:120%;object-fit:cover;will-change:transform}
.duo__txt{grid-column:8/13}
.duo--flip .duo__media{grid-column:7/13}
.duo--flip .duo__txt{grid-column:1/6}
.duo__txt p+p{margin-top:1.1em}

/* ============================================================
   Territorio
   ============================================================ */
.mappa{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.mappa__list{grid-column:span 7}
.mappa__side{grid-column:9/13;position:sticky;top:16vh}
.mrow{display:flex;align-items:baseline;gap:1rem;padding:.85rem 0;border-bottom:1.5px solid var(--line);cursor:pointer;position:relative}
.mrow__n{flex:1;font-family:var(--f-display);font-weight:300;font-size:clamp(1.15rem,2vw,1.95rem);letter-spacing:-.015em;line-height:1;transition:transform .6s var(--e-out),color .4s}
.mrow__t{color:var(--muted);width:6rem;flex:none}
.mrow__m{font-family:var(--f-body);font-weight:500;font-size:.78rem;letter-spacing:.05em;width:5.5rem;text-align:right;flex:none;color:var(--muted);transition:color .4s;font-variant-numeric:tabular-nums}
.mrow:hover .mrow__n,.mrow.on .mrow__n{color:var(--acc-txt)}
.mrow:hover .mrow__n{transform:translateX(10px)}
.mrow:hover .mrow__m{color:var(--acc-txt)}
.mappa__fig{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sabbia)}
.mappa__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .8s var(--e-out),transform 1.4s var(--e-out)}
.mappa__fig img.on{opacity:1;transform:scale(1)}
/* tutte le didascalie nella stessa cella: una sopra l'altra, non in colonna */
.mappa__cap{margin-top:1rem;min-height:4.5em;display:grid}
.mappa__cap p{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--e-out)}
.mappa__cap p.on{opacity:1;transform:none}

/* ============================================================
   Mosaico
   ============================================================ */
.mosaico{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.mosaico figure{overflow:hidden;position:relative}
.mosaico img{width:100%;height:100%;object-fit:cover;will-change:transform}
.m-a{grid-column:span 5;aspect-ratio:4/5}
.m-b{grid-column:span 7;aspect-ratio:16/10;align-self:end}
.m-c{grid-column:2/7;aspect-ratio:1;margin-top:-8vh}
.m-d{grid-column:8/13;aspect-ratio:3/4}
.m-e{grid-column:span 12;aspect-ratio:21/9}

/* ============================================================
   Voci
   ============================================================ */
.voci{position:relative;min-height:clamp(230px,32vw,400px)}
.voce{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .8s var(--e-out)}
.voce.on{opacity:1;pointer-events:auto}
.voce__t{font-family:var(--f-display);font-weight:400;font-style:italic;font-size:clamp(1.6rem,4.2vw,3.8rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.voce__a{margin-top:1.6rem;display:flex;gap:1.4rem;color:var(--muted);flex-wrap:wrap}
.voci__dots{display:flex;gap:.6rem;margin-top:2rem}
.voci__dots button{width:34px;height:2px;background:var(--line);border:none;padding:0;cursor:pointer;position:relative;overflow:hidden}
.voci__dots button::after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.voci__dots button.on::after{transform:scaleX(1)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1.5px solid var(--line)}
.faq__i{border-bottom:1.5px solid var(--line)}
.faq__q{width:100%;background:none;border:none;text-align:left;cursor:pointer;padding:clamp(16px,2vw,28px) 0;
  display:flex;align-items:center;gap:1.5rem;font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.1rem,1.9vw,1.7rem);letter-spacing:-.015em;line-height:1.16;transition:color .4s;color:inherit}
.faq__q:hover{color:var(--acc-txt)}
.faq__q i{margin-left:auto;flex:none;width:16px;height:16px;position:relative}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;background:currentColor;transition:transform .5s var(--e-out)}
.faq__q i::before{left:0;right:0;top:7.5px;height:1.5px}
.faq__q i::after{top:0;bottom:0;left:7.5px;width:1.5px}
.faq__i.on .faq__q i::after{transform:scaleY(0)}
.faq__a{overflow:hidden;height:0;transition:height .7s var(--e-out)}
.faq__a>div{padding-bottom:clamp(16px,2vw,28px);max-width:62ch;color:var(--muted)}

/* ============================================================
   Form
   ============================================================ */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,34px)}
.f-i{position:relative;grid-column:span 1}
.f-i--full{grid-column:span 2}
.f-i label{display:block;font-family:var(--f-body);font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.f-i input,.f-i textarea,.f-i select{width:100%;background:none;border:none;border-bottom:1.5px solid var(--line);
  padding:.6rem 0;font-size:1.05rem;outline:none;border-radius:0;transition:border-color .4s;color:inherit}
.f-i textarea{resize:vertical;min-height:90px}
.f-i input:focus,.f-i textarea:focus,.f-i select:focus{border-color:var(--acc)}
.f-i__bar{position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-out)}
.f-i input:focus~.f-i__bar,.f-i textarea:focus~.f-i__bar,.f-i select:focus~.f-i__bar{transform:scaleX(1)}
.f-i select{appearance:none;cursor:pointer}
.f-msg{grid-column:span 2;font-family:var(--f-body);font-weight:500;font-size:.75rem;letter-spacing:.06em;color:var(--acc-txt);min-height:1.2em}

/* ============================================================
   Pagina casa
   ============================================================ */
.vhero{position:relative;height:92svh;min-height:540px;overflow:hidden;background:var(--crema-2)}
.vhero__img{position:absolute;inset:0}
.vhero__img img{width:100%;height:118%;object-fit:cover;will-change:transform}
.vhero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%)}
.vhero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(0deg,#000 20%,transparent);mask-image:linear-gradient(0deg,#000 20%,transparent)}
.vhero__in{text-shadow:0 2px 30px rgba(0,0,0,.22);position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad);max-width:var(--maxw);margin-inline:auto;width:100%;color:var(--crema)}
.vhero__in .tag{color:var(--crema)}
.dati{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--gap);border-top:1.5px solid var(--line);padding-top:1.4rem}
.dato__v{font-family:var(--f-display);font-weight:300;font-size:clamp(2rem,3.8vw,3.4rem);line-height:.92;letter-spacing:-.025em;color:var(--acc-txt)}
.dato__v sub{font-family:var(--f-body);font-weight:500;font-size:.26em;letter-spacing:.1em;vertical-align:baseline;margin-left:.3em;color:var(--muted)}
.dot-list{display:flex;flex-wrap:wrap;gap:.55rem}
.dot-list li{border:1.5px solid var(--line);border-radius:100px;padding:.5em 1em;font-family:var(--f-body);font-weight:500;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:border-color .4s,color .4s}
.dot-list li.mi{gap:.55em}
.dot-list li:hover{border-color:var(--acc);color:var(--acc-txt)}

.strip{display:flex;gap:var(--gap);overflow-x:auto;padding-inline:var(--pad);scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing}
.strip figure{flex:none;width:clamp(260px,34vw,560px);aspect-ratio:4/3;overflow:hidden;scroll-snap-align:center;background:var(--sabbia)}
.strip img{width:100%;height:100%;object-fit:cover;pointer-events:none}


/* ============================================================
   Pagina casa, stile portale di prenotazione
   ============================================================ */
.lst-head{padding-top:clamp(110px,12vw,170px);padding-bottom:clamp(20px,2.4vw,32px)}
.lst-crumbs{display:flex;gap:.6rem;color:var(--muted)}
.lst-crumbs a:hover{color:var(--acc-txt)}
.lst-title{margin-top:1rem}
.lst-claim{margin-top:.9rem;color:var(--muted);max-width:46ch}
.lst-facts{margin-top:1.5rem;color:var(--fg)}
.lst-gal{padding-bottom:clamp(36px,4vw,56px)}
.lst-grid{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;
  height:clamp(340px,44vw,600px);border-radius:14px;overflow:hidden}
.lst-grid>button:not(.lst-all){margin:0;padding:0;border:0;overflow:hidden;background:var(--sabbia);cursor:pointer;display:block}
.lst-grid .g-0{grid-row:1/3}
.lst-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.lst-grid>button:hover img{transform:scale(1.04)}
.lst-all{border:0;cursor:pointer;position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:.55em;
  background:var(--crema);color:var(--bruno);border-radius:100px;padding:.75em 1.15em;box-shadow:0 6px 24px -10px rgba(0,0,0,.35)}
.lst-all:hover{background:var(--bruno);color:var(--crema)}
.lst-wrap{padding-bottom:clamp(60px,8vw,120px)}
.lst-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,28vw,400px);gap:clamp(40px,6vw,96px);align-items:start}
.lst-main{max-width:760px}
.lst-h{font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,2.3vw,2.1rem);letter-spacing:-.015em;line-height:1.08}
.lst-sep{border:0;height:1.5px;background:var(--line);margin:clamp(30px,3.4vw,46px) 0}
.lst-host{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
.avatar{width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--terra-bg);color:var(--crema);font-family:var(--f-display);font-size:1.7rem;line-height:1}
.lst-high{display:grid;gap:1.5rem}
.lst-high li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start}
.lst-high .ic{width:30px;height:30px;stroke-width:1.3;color:var(--acc-txt);margin-top:1px}
.lst-high b{display:block;font-weight:500;font-size:1.05rem}
.lst-high span{display:block;color:var(--muted);margin-top:.15rem}
.amen{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem 2rem;margin-top:1.5rem}
.amen li{display:flex;align-items:center;gap:.95rem}
.amen .ic{width:24px;height:24px;stroke-width:1.4;color:var(--fg)}
.near{margin-top:1.2rem;border-top:1.5px solid var(--line)}
.near li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1.5px solid var(--line)}
.near li .mi:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1.5rem}
.rules h4{font-family:var(--f-body);font-weight:500;font-size:.98rem;margin:0}
.rules li{display:flex;align-items:center;gap:.65rem;color:var(--muted);margin-top:.7rem}
.lst-side{position:sticky;top:110px}
.book{background:var(--crema);border:1.5px solid var(--line);border-radius:16px;padding:clamp(22px,2vw,30px);
  box-shadow:0 24px 60px -30px rgba(58,30,16,.3)}
.book__t{font-family:var(--f-display);font-weight:300;font-size:clamp(1.7rem,2.3vw,2.2rem);line-height:1;letter-spacing:-.015em;margin-top:.7rem}
.book__sub{margin-top:.6rem;font-size:.95rem}
.book__f{margin-top:1.3rem;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.book__row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1.5px solid var(--line)}
.book__row label+label{border-left:1.5px solid var(--line)}
.book__f label{display:block;padding:.7rem .9rem;font-family:var(--f-body);font-weight:500;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.book__f input,.book__f select{display:block;width:100%;margin-top:.25rem;border:0;background:none;padding:0;outline:none;
  font:inherit;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--bruno);cursor:pointer}
.book__go{width:100%;justify-content:center;margin-top:1rem}
.book__trust{display:grid;gap:.75rem;margin-top:1.4rem;font-size:.92rem}
.book__trust li{display:flex;gap:.7rem;align-items:flex-start}
.book__trust .ic{color:var(--acc-txt);margin-top:.05em}
.book__wa{margin-top:1.3rem}
.book-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:870;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem var(--pad);background:var(--crema);border-top:1.5px solid var(--line);box-shadow:0 -10px 30px -18px rgba(0,0,0,.25)}
@media (max-width:1000px){
  .lst-body{grid-template-columns:minmax(0,1fr)}
  .lst-side{position:static}
  .rules{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .lst-grid{grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr;height:auto;aspect-ratio:4/5}
  .lst-grid .g-0{grid-column:1/3;grid-row:auto}
  .lst-grid .g-3,.lst-grid .g-4{display:none}
  .amen,.rules{grid-template-columns:1fr}
  .book-bar{display:flex}
  .p-villa .foot{padding-bottom:84px}
}


/* galleria a cascata e foto a tutto schermo */
.gal{position:fixed;inset:0;z-index:9300;background:var(--crema);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .45s var(--e-out),transform .6s var(--e-out),visibility 0s .6s}
.gal.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--e-out),transform .6s var(--e-out)}
.gal__top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem var(--pad);background:rgba(253,238,227,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--line)}
.gal__x{display:inline-flex;align-items:center;gap:.5em;border:1.5px solid var(--line);border-radius:100px;background:none;padding:.6em 1.1em;cursor:pointer;color:var(--bruno)}
.gal__x:hover{border-color:var(--bruno)}
.gal__grid{max-width:1180px;margin:0 auto;padding:clamp(20px,3vw,40px) var(--pad) clamp(60px,8vw,110px);columns:2;column-gap:12px}
.gal__grid button{display:block;width:100%;margin:0 0 12px;padding:0;border:0;background:var(--sabbia);border-radius:10px;overflow:hidden;cursor:zoom-in;break-inside:avoid}
.gal__grid img{width:100%;height:auto;display:block;transition:transform 1s var(--e-out)}
.gal__grid button:hover img{transform:scale(1.03)}
.lb{position:fixed;inset:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(8px,2vw,28px);
  padding:clamp(60px,7vh,90px) clamp(12px,3vw,40px);background:var(--crema);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.lb.on{opacity:1;visibility:visible;transition:opacity .35s}
.lb__f{margin:0;height:100%;display:grid;place-items:center;min-width:0;touch-action:pan-y}
.lb__f img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;user-select:none;-webkit-user-drag:none}
.lb__b,.lb__x{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--crema);color:var(--bruno);display:grid;place-items:center;cursor:pointer}
.lb__b:hover,.lb__x:hover{border-color:var(--bruno)}
.lb__b .ic,.lb__x .ic{width:22px;height:22px}
.lb__x{position:absolute;top:clamp(12px,2vh,22px);right:var(--pad)}
.lb__c{position:absolute;left:50%;bottom:clamp(16px,3vh,28px);transform:translateX(-50%);color:var(--muted)}
@media (max-width:860px){
  .gal__grid{columns:1}
  .lb{grid-template-columns:1fr;padding-inline:0}
  .lb__b{position:absolute;bottom:clamp(12px,2.4vh,22px)}
  .lb__p{left:var(--pad)}.lb__n{right:var(--pad)}
}
/* focus: visibile solo da tastiera, sobrio */
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acc-txt);outline-offset:3px}

/* Gallery: schede per casa in home e pagina con filtri */
.hg__tabs,.gfilter__in{display:flex;flex-wrap:wrap;gap:.55rem}
.hg__tabs{margin-bottom:1.6rem}
.hg__tab{display:inline-flex;align-items:center;gap:.6em;border:1.5px solid var(--line);border-radius:100px;background:none;
  padding:.7em 1.15em;cursor:pointer;color:var(--fg);transition:background-color .35s,color .35s,border-color .35s}
.hg__tab .muted{font-variant-numeric:tabular-nums}
.hg__tab:hover{border-color:var(--fg)}
.hg__tab.on{background:var(--bruno);border-color:var(--bruno);color:var(--crema)}
.hg__tab.on .muted{color:rgba(253,238,227,.7)}
.hg__stage{display:grid}
.hg__panel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s var(--e-out),visibility 0s .5s}
.hg__panel.on{opacity:1;visibility:visible;transition:opacity .5s var(--e-out)}
.hg__foot{margin-top:1.2rem;align-items:center}
.hg__foot .alink{margin-left:auto}
.gfilter{position:sticky;top:var(--navh,0px);transition:top .7s var(--e-out);z-index:800;padding-block:.9rem;background:rgba(253,238,227,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-block:1.5px solid var(--line)}
.ggroup{padding-block:clamp(44px,6vw,90px)}
.ggroup+.ggroup{border-top:1.5px solid var(--line)}
.ggroup__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,36px)}
.gmas{columns:3;column-gap:14px}
.gmas button{display:block;width:100%;margin:0 0 14px;padding:0;border:0;background:var(--sabbia);border-radius:10px;overflow:hidden;cursor:zoom-in;break-inside:avoid}
.gmas img{width:100%;height:auto;display:block;transition:transform 1s var(--e-out)}
.gmas button:hover img{transform:scale(1.03)}
@media (max-width:1000px){.gmas{columns:2}}
@media (max-width:560px){.gmas{columns:1}.hg__foot .alink{margin-left:0}}
/* il visore ora e' unico e sta sopra la cascata */
.lb{z-index:9400}
.lb__cap{position:absolute;top:clamp(22px,3vh,34px);left:var(--pad)}
/* nav con fondo crema quando passa sopra il contenuto */
.nav--solid{background:rgba(253,238,227,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1.5px 0 var(--line)}
body.menu-open .nav{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}


/* ============================================================
   Il nome: voce di dizionario + word swap
   ============================================================ */
.dict{max-width:980px;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);padding-block:clamp(26px,3.4vw,48px)}
.dict__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem 1.4rem}
.dict__word{font-family:var(--f-display);font-weight:300;font-size:clamp(3.2rem,8vw,7.4rem);line-height:.9;letter-spacing:-.03em;margin:0}
.dict__pron{font-size:.85rem;letter-spacing:.12em;color:var(--acc-txt)}
.dict__gram{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--muted)}
.dict__etym{margin-top:1.2rem;text-transform:none;letter-spacing:.02em;font-size:.82rem}
.dict__etym em{font-family:var(--f-display);font-size:1.12em;letter-spacing:0}
.dict__sensi{counter-reset:senso;margin-top:1.5rem;display:grid;gap:.9rem;max-width:70ch}
.dict__sensi li{counter-increment:senso;position:relative;padding-left:2.2rem;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.5}
.dict__sensi li::before{position:absolute;left:0;top:-.05em;content:counter(senso) ".";font-family:var(--f-display);font-weight:300;color:var(--acc-txt);font-size:1.15em;line-height:1.3}
.dict__sensi b{font-weight:500}
.dict__es{margin-top:1.3rem;padding-left:2.2rem;font-family:var(--f-display);font-size:clamp(1.05rem,1.4vw,1.3rem)}
.dict__es .mono{font-family:var(--f-body);margin-right:.6em}

.swap{margin-top:clamp(56px,8vw,120px)}
.nome .swap:first-child{margin-top:0}
.swap__line{margin:1.2rem 0 0;font-family:var(--f-display);font-weight:300;font-size:clamp(2.4rem,6.2vw,6.2rem);line-height:1;letter-spacing:-.02em}
.swap__src{margin-right:.28em}
.swap__eq{color:var(--acc-txt);margin-right:.3em;font-weight:300}
.swap__word{font-style:italic}
.sw-w{display:inline-block;white-space:nowrap}
/* maschera per lettera, allargata sopra e sotto: accenti e code non si tagliano, l'interlinea non cambia */
.sw-c{display:inline-block;clip-path:inset(0 -.6em);vertical-align:bottom;padding:.24em .02em .3em;margin:-.24em -.02em -.3em}
.sw-c>i{display:inline-block;font-style:inherit;transform:translateY(150%);transition:transform .75s var(--e-out)}
.sw-c.in>i{transform:none}
.sw-c.out>i{transform:translateY(-150%);transition:transform .42s var(--e-io)}
.swap__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-top:1.4rem;color:var(--acc-txt)}
.swap__native{font-family:var(--f-body);font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.swap__mean{margin-top:.5rem;font-size:clamp(1rem,1.3vw,1.2rem);max-width:52ch;min-height:1.6em}
.swap__meta,.swap__mean{transition:opacity .35s}
.swap--fade .swap__meta,.swap--fade .swap__mean{opacity:0}
.nome__spiega{margin-top:clamp(56px,8vw,120px);align-items:start}
@media (max-width:860px){
  /* "Trasi =" sulla prima riga, la traduzione sotto: l'uguale resta visibile */
  .swap__src{margin-right:.22em}
  .swap__eq{margin-right:0}
  .swap__word{display:block;margin-top:.15em}
}

/* ============================================================
   Griglie
   ============================================================ */
.vgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);row-gap:clamp(40px,7vw,120px)}
.vg{grid-column:span 6;position:relative}
.vg:nth-child(even){margin-top:clamp(0px,8vw,140px)}
.vg__m{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sabbia)}
.vg__m img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--e-out)}
.vg:hover .vg__m img{transform:scale(1.06)}
.vg__h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.2rem;flex-wrap:wrap}
.vg__t{font-family:var(--f-display);font-weight:300;font-size:clamp(1.6rem,3vw,2.9rem);letter-spacing:-.02em;line-height:1}

.egrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);row-gap:clamp(34px,5vw,80px)}
.eg{grid-column:span 4}
.eg__m{aspect-ratio:1;overflow:hidden;background:var(--sabbia);position:relative}
.eg__m img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
.eg:hover .eg__m img{transform:scale(1.07)}
.eg__t{font-family:var(--f-display);font-weight:300;font-size:clamp(1.3rem,2vw,1.95rem);letter-spacing:-.018em;line-height:1.06;margin-top:1rem}

/* ============================================================
   CTA e footer
   ============================================================ */
.cta{position:relative;text-align:center;padding-block:clamp(90px,14vw,210px);overflow:hidden}
.cta__big{font-family:var(--f-display);font-weight:300;font-size:clamp(2.8rem,10vw,10rem);line-height:.9;letter-spacing:-.025em}
.cta__mark{width:clamp(56px,7vw,110px);margin:0 auto clamp(20px,3vw,44px);color:var(--crema)}

.foot{background:var(--terra-bg);color:var(--crema);padding-top:clamp(50px,7vw,100px);overflow:hidden;
  --muted:rgba(253,238,227,.78);--line:rgba(253,238,227,.3);--acc:var(--crema)}
.foot__top{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding-bottom:clamp(40px,6vw,90px)}
.foot__col{grid-column:span 3}
.foot__col h4{font-family:var(--f-body);font-weight:500;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(253,238,227,.62);margin-bottom:1.2rem}
.foot__col li+li{margin-top:.5rem}
.foot__col a{transition:opacity .35s}
.foot__col a:hover{opacity:.65}
.foot__mark{font-family:var(--f-body);font-weight:700;text-transform:uppercase;
  font-size:clamp(4rem,19vw,19rem);line-height:.78;letter-spacing:-.03em;text-align:center;
  color:var(--crema);user-select:none;margin-bottom:-.06em}
.foot__bot{position:relative;z-index:2;background:var(--terra-bg);border-top:1.5px solid rgba(253,238,227,.3);
  padding-block:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:rgba(253,238,227,.7)}


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
  .duo__media,.duo__txt,.duo--flip .duo__media,.duo--flip .duo__txt{grid-column:1/-1}
  .duo__txt{margin-top:2rem}
  .mappa__list{grid-column:span 12}
  .mappa__side{display:none}
  .vg{grid-column:span 12}
  .vg:nth-child(even){margin-top:0}
  .eg{grid-column:span 6}
  .m-a,.m-b,.m-d{grid-column:span 12;aspect-ratio:4/3}
  .m-c{grid-column:span 12;margin-top:0;aspect-ratio:4/3}
  .foot__col{grid-column:span 6}
}
@media (max-width:860px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .rail{height:auto}
  .rail__stick{position:static;height:auto}
  .rail__view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:2rem}
  .rail__view::-webkit-scrollbar{display:none}
  .rail__track{transform:none!important}
  .vcard{width:74vw;scroll-snap-align:center}
  .rail__prog{display:none}
  .erow__tipo{display:none}
  .erow__dur{width:auto}
  .eg{grid-column:span 12}
  .form,.f-i,.f-i--full,.f-msg{grid-template-columns:1fr;grid-column:span 1}
  .hero__corner{display:none}
  .hero__lock{flex-direction:column;align-items:flex-start;gap:.2rem}
  .mrow__t{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}
  .sp-line>i,.sp-w>i{transform:none!important;opacity:1!important}
  .rv{opacity:1!important;transform:none!important}
  .rv-img::after{display:none}
  .rv-img>img{transform:none!important;filter:none!important}
  .grain{display:none}
}

@media (max-width:760px){.br-d{display:none}}

/* ---- Lingua: ITA / ENG accanto al menu ---- */
.nav__end{display:flex;align-items:center;gap:.6rem}
.nav__lang{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid currentColor;border-radius:100px;padding:.6em .95em;
  font-family:var(--f-body);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
  transition:background-color .45s var(--e-out),color .45s var(--e-out)}
.nav__lang:hover{background:var(--nav-fg,var(--bruno));color:var(--nav-bg,var(--crema))}
@media (max-width:860px){
  .nav__lang{height:44px;padding:0 1rem;font-size:.72rem}
}

.vhero--split{background:var(--crema);display:flex;flex-direction:column;justify-content:center}
.vhero--split::after,.vhero--split::before{content:none}
.vhero--split .vhero__img{position:absolute;top:0;bottom:0;left:50%;right:0;overflow:hidden}
.vhero--split .vhero__in{position:relative;inset:auto;text-shadow:none;color:var(--fg);padding-right:calc(50% + var(--pad))}
.vhero--split .vhero__in .tag{color:var(--acc-txt)}
@media (max-width:860px){
.vhero--split{height:auto;min-height:0}
.vhero--split .vhero__img{position:relative;left:auto;right:auto;aspect-ratio:4/5}
.vhero--split .vhero__in{position:relative;inset:auto;padding-right:var(--pad);padding-top:clamp(96px,14vw,140px);padding-bottom:clamp(28px,6vw,56px)}
}