/* ==========================================================
   Casa di Melina
   Palette dai materiali della casa, archi come segno distintivo.
   ========================================================== */

/* ---------- caratteri (serviti dal sito, nessuna chiamata esterna) ---------- */
@font-face{font-family:"Melina";src:url("../fonts/marcellus.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* cifre: in Marcellus "1" e "0" si confondono con "I" e "O" */
@font-face{font-family:"Melina";src:url("../fonts/bellefair-digits.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0030-0039;size-adjust:104%}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --calce:#F7F6F2;      /* intonaco a calce */
  --tufo:#D9C8A7;       /* pietra delle volte */
  --tufo-soft:#EDE5D4;
  --cementina:#5B6E78;  /* grigio-azzurro delle cementine */
  --salvia:#7E9486;     /* verde delle cementine */
  --notte:#1F2B33;      /* blu notte */
  --ottone:#A8834A;     /* ottone dei lampadari */
  --testo-2:#3B4850;
  --busy:#CFCAC0;
  --wa:#1E7A4F;

  --serif:"Melina","Trajan Pro",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  --step--1:clamp(.84rem,.8rem + .15vw,.92rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --step-1:clamp(1.25rem,1.1rem + .6vw,1.55rem);
  --step-2:clamp(1.7rem,1.35rem + 1.4vw,2.6rem);
  --step-3:clamp(2.5rem,1.6rem + 4.4vw,5.5rem);

  --pad:clamp(1.25rem,4vw,4rem);
  --gap:clamp(3.5rem,8vw,8rem);
  --max:1280px;

  /* movimento: una sola famiglia di curve, tempi lunghi */
  --out:cubic-bezier(.22,1,.36,1);
  --inout:cubic-bezier(.65,0,.35,1);
  --d0:1.5s;            /* quando il sipario ha liberato la pagina */
}
.no-intro{--d0:.15s}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--calce);color:var(--notte);font-family:var(--sans);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ottone);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.005em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
[hidden]{display:none!important}
[id]{scroll-margin-top:5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--notte);color:var(--calce);padding:.6rem 1rem;z-index:120}
.skip:focus{left:1rem;top:1rem}
::selection{background:var(--tufo);color:var(--notte)}

/* ---------- bottoni ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.8rem 1.5rem;border-radius:999px;border:1px solid var(--notte);background:var(--notte);color:var(--calce);text-decoration:none;font-weight:500;font-size:var(--step--1);letter-spacing:.01em;cursor:pointer;transition:color .4s var(--out),border-color .4s var(--out)}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--cementina);transform:translateY(102%);border-radius:inherit;transition:transform .6s var(--out)}
.btn:hover::before{transform:none}
.btn:hover{border-color:var(--cementina)}
.btn-ghost{background:transparent;color:var(--notte)}
.btn-ghost::before{background:var(--notte)}
.btn-ghost:hover{color:var(--calce);border-color:var(--notte)}
.btn-light{background:var(--calce);color:var(--notte);border-color:var(--calce)}
.btn-light::before{background:var(--tufo)}
.btn-light:hover{border-color:var(--tufo)}
.btn-small{min-height:2.5rem;padding:.5rem 1.1rem}
.btn-wa{width:100%;background:var(--wa);border-color:var(--wa);font-size:var(--step-0)}
.btn-wa::before{background:#17603e}
.btn-wa:hover{border-color:#17603e}
.btn[disabled]{background:#9db7a8;border-color:#9db7a8;cursor:not-allowed}
.btn[disabled]::before{display:none}
.link{text-decoration:underline;text-decoration-color:var(--ottone);text-underline-offset:.28em;text-decoration-thickness:1px;transition:color .3s,text-decoration-color .3s}
.link:hover{color:var(--cementina);text-decoration-color:var(--cementina)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:2rem;padding:.9rem var(--pad);background:rgba(247,246,242,.9);background:color-mix(in srgb,var(--calce) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:transform .6s var(--out),border-color .3s}
.top.scrolled{border-bottom-color:var(--tufo-soft)}
.top.away{transform:translateY(-100%)}
.brand{font-family:var(--serif);font-size:1.45rem;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.nav{display:flex;gap:1.6rem;margin-left:auto;font-size:var(--step--1)}
.nav a{position:relative;text-decoration:none;padding:.3rem 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ottone);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--out)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .lang{color:var(--cementina)}
.menu-open,.menu-close{display:none;border:0;background:none;padding:.5rem 0;cursor:pointer;font-size:var(--step--1);font-weight:500;letter-spacing:.01em}
.menu-open{margin-left:auto}
@media (max-width:860px){
  .nav,.top-cta{display:none}
  .menu-open,.menu-close{display:block}
  .top{gap:1rem;padding-top:.7rem;padding-bottom:.7rem}
}

/* ---------- menu a tutto schermo (telefono) ---------- */
.menu{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:.7rem var(--pad) 2rem;border:0;background:var(--notte);color:var(--calce);flex-direction:column}
.menu[open]{display:flex;animation:menu-in .5s var(--out)}
.menu::backdrop{background:var(--notte)}
.menu-top{display:flex;align-items:center;justify-content:space-between}
.menu-links{display:flex;flex-direction:column;gap:.35rem;margin:auto 0}
.menu-links a{font-family:var(--serif);font-size:clamp(2rem,9vw,2.8rem);line-height:1.25;text-decoration:none;animation:menu-item .7s var(--out) backwards}
.menu-links a:nth-child(1){animation-delay:.08s}.menu-links a:nth-child(2){animation-delay:.14s}.menu-links a:nth-child(3){animation-delay:.2s}.menu-links a:nth-child(4){animation-delay:.26s}.menu-links a:nth-child(5){animation-delay:.32s}
.menu-foot{display:flex;justify-content:space-between;gap:1rem;font-size:var(--step--1);color:#c9d0d3;border-top:1px solid rgba(255,255,255,.14);padding-top:1.25rem}
.menu-foot a{text-decoration:none}
@keyframes menu-in{from{opacity:0}}
@keyframes menu-item{from{opacity:0;transform:translateY(14px)}}

/* ---------- archi ---------- */
.arch{position:relative;overflow:hidden;border-radius:999px 999px 6px 6px;background:var(--tufo-soft)}
button.arch{display:block;width:100%;padding:0;border:0;font:inherit;color:inherit;cursor:zoom-in;-webkit-appearance:none;appearance:none}
.arch img{width:100%;height:100%;object-fit:cover}

/* ---------- hero ---------- */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(2rem,5vw,4.5rem) var(--pad) var(--gap);display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.hero h1{font-size:var(--step-3);max-width:6.7em;text-wrap:wrap}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .02em .2em;margin:-.06em -.02em -.2em}
.hero h1 .w>span{display:inline-block}
.hero-sub{margin-top:1.75rem;max-width:44ch;font-size:var(--step-1);line-height:1.5;color:var(--testo-2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.hero-media{position:relative;margin:0}
.arch-hero{aspect-ratio:3/4;max-height:78vh;margin-left:auto}
.hero-inset{position:absolute;left:-14%;bottom:-6%;width:34%;aspect-ratio:3/4;border:6px solid var(--calce);border-radius:6px;overflow:hidden;box-shadow:0 18px 40px -20px rgba(31,43,51,.45);transform:rotate(-2deg);transition:transform .8s var(--out)}
.hero-inset:hover{transform:rotate(0) scale(1.03)}
.hero-inset img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:1.5rem;align-items:start;padding-top:.5rem;padding-bottom:3rem}
  .hero-media{order:-1}
  /* arco largo e basso: titolo e pulsanti restano nel primo schermo */
  .arch-hero{aspect-ratio:auto;width:100%;height:40vh;height:40svh;min-height:14rem;max-height:26rem}
  .arch-hero img{object-position:50% 38%}
  .hero-inset{left:auto;right:-.4rem;bottom:-1rem;width:24%;border-width:4px}
  .hero h1{max-width:none;text-wrap:balance}
  .hero-sub{margin-top:.9rem;font-size:1.05rem;line-height:1.5}
  .hero-actions{margin-top:1.4rem}
}

@media (max-width:860px) and (max-height:680px){.arch-hero{height:34vh;height:34svh}}

/* ---------- storia ---------- */
.intro{max-width:var(--max);margin:0 auto;padding:0 var(--pad) var(--gap);display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.intro-lead{font-family:var(--serif);font-size:var(--step-2);line-height:1.24;max-width:18em;text-wrap:balance}
.story-more{margin-top:1.5rem;max-width:52ch;color:var(--testo-2)}
.facts{list-style:none;margin:0;padding:0 0 0 clamp(1.25rem,3vw,2.5rem);display:grid;gap:1.5rem;border-left:1px solid var(--tufo)}
.facts li{display:flex;flex-direction:column;gap:.2rem}
.facts strong{font-family:var(--serif);font-weight:400;font-size:var(--step-2);line-height:1}
.facts span{color:var(--cementina);font-size:var(--step--1)}
@media (max-width:860px){
  .intro{grid-template-columns:1fr}
  .facts{border-left:0;padding:0;gap:0;border-top:1px solid var(--tufo)}
  .facts li{flex-direction:row;align-items:baseline;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--tufo-soft)}
  .facts strong{flex:0 0 7.2rem;font-size:1.5rem}
}

/* ---------- alloggi ---------- */
.units{max-width:var(--max);margin:0 auto;padding:0 var(--pad) var(--gap)}
.section-title{font-size:var(--step-2)}
.units>.section-title{margin-bottom:clamp(2rem,5vw,4rem)}
.unit{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center;padding:clamp(2.5rem,5vw,4.5rem) 0;border-top:1px solid var(--tufo-soft)}
.unit-flip .unit-media{order:2}
.arch-unit{aspect-ratio:3/4}
.thumbs{list-style:none;margin:.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.thumbs button,.strip button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:4px;overflow:hidden}
.thumbs img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform 1.2s var(--out)}
.thumbs button:hover img{transform:scale(1.06)}
.unit-body h3{font-size:clamp(2.1rem,1.5rem + 3vw,4.2rem)}
.unit-meta{margin-top:.9rem;color:var(--cementina);font-weight:500}
.unit-desc{margin-top:1.5rem;max-width:48ch}
.amenities{list-style:none;padding:0;margin:1.75rem 0 2.25rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.5rem;max-width:30rem;font-size:var(--step--1)}
.amenities li,.rules li{padding-left:1.1rem;position:relative}
.amenities li::before,.rules li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:999px 999px 1px 1px;background:var(--ottone)}
#appartamento .amenities li::before{background:var(--salvia)}
#camera .amenities li::before{background:var(--cementina)}
@media (max-width:860px){
  .unit{grid-template-columns:1fr;gap:1.75rem}
  .unit-flip .unit-media{order:0}
  .arch-unit{aspect-ratio:4/5}
}

/* ---------- la casa: galleria ---------- */
.house{background:var(--notte);color:var(--calce);padding:var(--gap) 0}
.house-head{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto;gap:1rem 3rem;align-items:end}
.house-head p{grid-column:1;max-width:46ch;color:#c9d0d3}
.house-head .btn{grid-column:2;grid-row:1/3}
.strip-wrap{overflow:hidden;margin-top:clamp(2rem,4vw,3.5rem)}
.strip{list-style:none;margin:0;padding:0 var(--pad);display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip li{flex:0 0 min(72vw,20rem);scroll-snap-align:start}
.strip li:nth-child(3n+1) img{border-radius:999px 999px 4px 4px}
.strip img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:transform 1.2s var(--out),filter .8s var(--out)}
/* nastro continuo, solo dove c'è un cursore: su telefono si scorre col dito */
.strip.marquee{width:max-content;overflow:visible;gap:0;padding:0 0 3rem;scroll-snap-type:none;will-change:transform}
.strip.marquee li{flex-basis:clamp(15rem,21vw,20rem);margin-right:1.25rem}
.strip.marquee li:nth-child(even){margin-top:3rem}
.strip.marquee:hover img{filter:brightness(.62)}
.strip.marquee button:hover img,.strip.marquee button:focus-visible img{filter:none;transform:scale(1.03)}
.tour-slot{max-width:var(--max);margin:clamp(2rem,4vw,3rem) auto 0;padding:0 var(--pad)}
.tour-slot iframe,.tour-slot video{width:100%;aspect-ratio:16/9;border:0;border-radius:6px;background:#000}
@media (max-width:640px){.house-head{grid-template-columns:1fr}.house-head .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:.5rem}}

/* ---------- recensione ---------- */
.quote{max-width:var(--max);margin:0 auto;padding:var(--gap) var(--pad) 0}
.quote blockquote{margin:0 auto;max-width:46rem;text-align:center}
.quote blockquote p{font-family:var(--serif);font-size:var(--step-2);line-height:1.28;text-wrap:balance}
.quote blockquote p::before{content:"\201C";display:block;font-size:4rem;line-height:.6;color:var(--ottone);margin-bottom:.6rem}
.quote footer{margin-top:1.5rem;font-size:var(--step--1);color:var(--cementina)}
.quote .qw{transition:opacity .9s var(--out)}

/* ---------- disponibilità ---------- */
.booking{max-width:var(--max);margin:0 auto;padding:var(--gap) var(--pad)}
.booking-head{display:grid;grid-template-columns:1fr 1.2fr;gap:1.25rem 6rem;align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
.booking-head p{max-width:52ch;color:var(--testo-2)}
.booking-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.cal-wrap{background:#fff;border:1px solid var(--tufo-soft);border-radius:10px;padding:clamp(1rem,2.5vw,2rem)}
.unit-switch{border:0;margin:0 0 1.25rem;padding:.3rem;display:inline-flex;background:var(--tufo-soft);border-radius:999px}
.unit-switch input{position:absolute;opacity:0;pointer-events:none}
.unit-switch span{display:block;padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;font-size:var(--step--1);font-weight:500;transition:background .4s var(--out),color .4s var(--out)}
.unit-switch input:checked+span{background:var(--notte);color:var(--calce)}
.unit-switch input:focus-visible+span{outline:2px solid var(--ottone);outline-offset:2px}
.cal{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem;position:relative}
.cal-head{position:absolute;left:0;right:0;top:-.35rem;display:flex;justify-content:space-between;pointer-events:none}
.cal-head button{pointer-events:auto;width:2.5rem;height:2.5rem;border-radius:999px;border:1px solid var(--tufo);background:#fff;cursor:pointer;font-size:1.15rem;line-height:1;transition:background .3s,border-color .3s}
.cal-head button:hover:not(:disabled){background:var(--tufo-soft)}
.cal-head button:disabled{opacity:.3;cursor:default}
.cal-month h4{font-size:var(--step-1);margin:0 0 1rem;text-transform:capitalize;text-align:center;line-height:1.8rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-grid .dow{font-size:.72rem;color:var(--cementina);padding-bottom:.35rem;text-transform:lowercase}
.day{aspect-ratio:1;border:0;background:none;border-radius:6px;font-size:.92rem;cursor:pointer;font-variant-numeric:tabular-nums;position:relative;transition:background .25s}
.day:hover:not(:disabled){background:var(--tufo-soft)}
.day:disabled{cursor:default;color:#b9b6ae}
.day.busy{background:var(--busy);color:#6f6c66;text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.day.past{color:#c9c6be}
.day.in-range{background:rgba(91,110,120,.18);border-radius:0}
.day.sel,.day.sel:hover:not(:disabled){background:var(--notte);color:var(--calce)}
.day.sel.start{border-radius:6px 0 0 6px}.day.sel.end{border-radius:0 6px 6px 0}.day.sel.start.end{border-radius:6px}
.day.today::after{content:"";position:absolute;left:50%;bottom:.25rem;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ottone)}
.cal-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.25rem;margin-top:1.25rem;min-height:1.6rem;font-size:.82rem;color:var(--cementina)}
.cal-legend span{display:inline-flex;align-items:center;gap:.45rem}
.lg{display:inline-block;width:.85rem;height:.85rem;border-radius:3px}
.lg-busy{background:var(--busy)}.lg-sel{background:var(--notte)}
.cal-reset{margin-left:auto;border:0;background:none;padding:0;cursor:pointer;font-size:.82rem;color:var(--notte);text-decoration:underline;text-decoration-color:var(--ottone);text-underline-offset:.25em}
.req{display:grid;gap:1.1rem;position:sticky;top:5.5rem}
.req-dates{display:grid;grid-template-columns:1fr 1fr .6fr;margin:0;border-top:1px solid var(--tufo);border-bottom:1px solid var(--tufo)}
.req-dates div{padding:.9rem 0}
.req-dates div+div{padding-left:1rem;border-left:1px solid var(--tufo-soft)}
.req-dates dt{font-size:.8rem;color:var(--cementina)}
.req-dates dd{margin:.15rem 0 0;font-family:var(--serif);font-size:var(--step-1);line-height:1.2}
.field{display:grid;gap:.35rem;font-size:var(--step--1);font-weight:500}
.field select,.field input,.field textarea{font:inherit;font-weight:400;font-size:1rem;padding:.75rem .9rem;border:1px solid var(--tufo);border-radius:8px;background:#fff;color:var(--notte);width:100%;transition:border-color .3s,box-shadow .3s}
.field select:focus,.field input:focus,.field textarea:focus{outline:0;border-color:var(--cementina);box-shadow:0 0 0 3px rgba(91,110,120,.18)}
.field textarea{resize:vertical}
.req-hint{font-size:var(--step--1);color:var(--cementina);min-height:1.6em}
.req-hint.err{color:#9a3b2e}
.req-small{font-size:.82rem;color:var(--cementina)}
.rules{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--tufo);display:grid;grid-template-columns:1fr 3fr;gap:1rem 3rem}
.rules h3{font-size:var(--step-1)}
.rules ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 2.5rem;font-size:var(--step--1)}
@media (max-width:980px){.booking-head,.booking-grid{grid-template-columns:1fr}.req{position:static}}
@media (max-width:860px){.rules{grid-template-columns:1fr}.rules ul{grid-template-columns:1fr}}
@media (max-width:640px){.cal{grid-template-columns:1fr}.cal-month+.cal-month{display:none}}

/* ---------- dintorni ---------- */
.area{background:var(--tufo-soft);padding:var(--gap) 0}
.area>*{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.area-head{display:grid;grid-template-columns:1fr 1.2fr;gap:1.25rem 6rem;align-items:end}
.area-head p{max-width:52ch}
.dist{list-style:none;margin-top:clamp(2rem,4vw,3rem);margin-bottom:0;columns:2;column-gap:clamp(2rem,6vw,6rem)}
.dist li{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--tufo);break-inside:avoid}
.dist li span:last-child{font-family:var(--serif);font-size:var(--step-1);line-height:1;white-space:nowrap}
.area-note{margin-top:1rem;font-size:.82rem;color:var(--cementina)}
@media (max-width:860px){.area-head{grid-template-columns:1fr}.dist{columns:1}}

/* ---------- prossimamente ---------- */
.soon{max-width:var(--max);margin:0 auto;padding:var(--gap) var(--pad);display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(1.5rem,6vw,5rem);align-items:center}
.arch-soon{aspect-ratio:3/4}
.soon h2{font-size:var(--step-2)}
.soon p{margin:1rem 0 1.5rem;max-width:44ch;color:var(--testo-2)}
@media (max-width:640px){.soon{grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);align-items:start}.soon h2{font-size:1.45rem}}

/* ---------- dove ---------- */
.where{max-width:var(--max);margin:0 auto;padding:0 var(--pad) var(--gap);display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(2rem,6vw,5rem);align-items:stretch}
.where address{font-style:normal;font-family:var(--serif);font-size:var(--step-1);line-height:1.35;margin:1.5rem 0}
.where p+p{margin-top:.6rem}
.map{min-height:22rem;border-radius:10px;overflow:hidden;background:var(--tufo-soft) url("../img/facciata-s.webp") center/cover}
.map iframe{width:100%;height:100%;min-height:22rem;border:0;display:block}
.map-load{width:100%;height:100%;min-height:22rem;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:rgba(31,43,51,.55);color:var(--calce);transition:background .5s var(--out)}
.map-load span{font-family:var(--serif);font-size:var(--step-2)}
.map-load small{font-size:.82rem;opacity:.85}
.map-load:hover{background:rgba(31,43,51,.68)}
@media (max-width:860px){.where{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{background:var(--notte);color:#c9d0d3;padding:3rem var(--pad);display:flex;flex-wrap:wrap;gap:.75rem 3rem;align-items:baseline;font-size:var(--step--1)}
.foot .brand{color:var(--calce);margin-right:auto}
.foot .codes{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.foot-links{display:flex;gap:1.25rem}
.foot a{color:var(--calce);text-decoration-color:rgba(255,255,255,.35);text-underline-offset:.25em}
@media (max-width:860px){.foot{flex-direction:column;gap:.6rem}}

/* ---------- pulsante flottante (telefono) ---------- */
.wa-float{display:none}
@media (max-width:860px){
  .wa-float{display:flex;position:fixed;left:50%;bottom:calc(.9rem + env(safe-area-inset-bottom,0px));z-index:30;align-items:center;justify-content:center;min-height:2.9rem;padding:0 1.6rem;border-radius:999px;background:var(--notte);color:var(--calce);text-decoration:none;font-weight:500;font-size:var(--step--1);white-space:nowrap;box-shadow:0 10px 28px -10px rgba(31,43,51,.6);transform:translate(-50%,0);transition:transform .6s var(--out),opacity .4s}
  .wa-float.hide{transform:translate(-50%,160%);opacity:0;pointer-events:none}
}

/* ---------- richiamo discreto ---------- */
.nudge{position:fixed;right:1.5rem;bottom:1.5rem;z-index:40;width:min(21rem,calc(100vw - 2rem));padding:1.35rem 1.5rem 1.5rem;background:var(--calce);border:1px solid var(--tufo);border-radius:14px 14px 4px 4px;box-shadow:0 22px 50px -26px rgba(31,43,51,.6);opacity:0;transform:translateY(16px);transition:opacity .8s var(--out),transform .8s var(--out)}
.nudge.in{opacity:1;transform:none}
.nudge-title{font-size:var(--step-1)}
.nudge p{margin-top:.5rem;font-size:var(--step--1);color:var(--testo-2)}
.nudge-actions{margin-top:1.15rem}
.nudge .btn{width:100%}
.nudge-close{position:absolute;top:.35rem;right:.45rem;width:2rem;height:2rem;border:0;border-radius:999px;background:none;color:var(--cementina);font-size:1.3rem;line-height:1;cursor:pointer;transition:background .3s,color .3s}
.nudge-close:hover{background:var(--tufo-soft);color:var(--notte)}
@media (max-width:860px){
  .nudge{left:1rem;right:1rem;width:auto;bottom:calc(.9rem + env(safe-area-inset-bottom,0px));border-radius:14px}
  .nudge-on .wa-float{display:none}
}

/* ---------- foto a schermo intero ---------- */
.lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#12191E;color:var(--calce)}
.lightbox[open]{display:flex;align-items:center;justify-content:center;animation:menu-in .4s var(--out)}
.lightbox::backdrop{background:#12191E}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem;max-width:min(92vw,900px)}
.lightbox img{max-height:82vh;width:auto;border-radius:4px;transition:opacity .35s var(--out)}
.lightbox img.swap{opacity:0}
.lightbox figcaption{display:flex;gap:1.25rem;font-size:var(--step--1);color:#c9d0d3;text-align:center}
#lb-count{color:#8c989e;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-close,.lb-nav{position:absolute;border:0;background:rgba(255,255,255,.08);color:var(--calce);border-radius:999px;width:3rem;height:3rem;font-size:1.6rem;line-height:1;cursor:pointer;transition:background .3s}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.18)}
.lb-close{top:1rem;right:1rem}
.lb-prev{left:1rem;top:50%;transform:translateY(-50%)}.lb-next{right:1rem;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lb-nav{top:auto;bottom:1rem;transform:none}.lightbox img{max-height:72vh}.lightbox figcaption{flex-direction:column;gap:.2rem;padding:0 4rem}}

/* ==========================================================
   MOVIMENTO
   Un gesto solo: la casa si apre. Tempi lunghi, niente rimbalzi,
   un elemento alla volta nell'ordine in cui si legge.
   ========================================================== */

/* sipario (solo alla prima visita) */
.curtain{position:fixed;inset:0;z-index:100;background:var(--notte);display:grid;place-items:center;pointer-events:none;animation:curtain-up 1.05s var(--inout) 1.2s forwards}
.curtain span{position:relative;font-family:var(--serif);font-size:clamp(2rem,5vw,3.4rem);color:var(--calce);animation:curtain-text 1s var(--out) .1s backwards}
.curtain span::after{content:"";position:absolute;left:12%;right:12%;bottom:-.5rem;height:1px;background:var(--ottone);transform-origin:left;animation:curtain-line 1s var(--out) .3s backwards}
@keyframes curtain-up{to{transform:translateY(-100%)}}
@keyframes curtain-text{from{opacity:0;transform:translateY(12px)}}
@keyframes curtain-line{from{transform:scaleX(0)}}
.no-intro .curtain{display:none}

/* hero, in ordine: foto, titolo, testo, pulsanti, foto piccola */
.arch-hero::after{content:"";position:absolute;inset:-1px;background:var(--tufo-soft);animation:cover-up 1.5s var(--inout) var(--d0) both}
.arch-hero img{animation:img-settle 2.4s var(--out) var(--d0) backwards}
.hero h1 .w>span{animation:word-up 1.15s var(--out) backwards;animation-delay:calc(var(--d0) + .3s + var(--i) * .1s)}
.hero-sub{animation:rise 1.1s var(--out) calc(var(--d0) + .85s) backwards}
.hero-actions{animation:rise 1.1s var(--out) calc(var(--d0) + 1.05s) backwards}
.hero-inset{animation:inset-in 1.3s var(--out) calc(var(--d0) + 1.3s) backwards}
.top{animation:fade .9s var(--out) calc(var(--d0) + .2s) backwards}
@keyframes cover-up{to{transform:translateY(-101%)}}
@keyframes img-settle{from{transform:scale(1.12)}}
@keyframes word-up{from{transform:translateY(110%)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes inset-in{from{opacity:0;transform:translateY(28px) rotate(-5deg)}}
@keyframes fade{from{opacity:0}}

/* comparsa allo scroll: attiva solo se motion.js ha preparato gli elementi */
[data-rv]{transition:opacity 1.2s var(--out),transform 1.2s var(--out);transition-delay:calc(var(--s,0) * 110ms)}
[data-rv="rise"]{opacity:0;transform:translateY(14px)}
[data-rv="title"]{opacity:0;transform:translateY(.35em)}
[data-rv="arch"]{transition:none}
[data-rv="arch"]::after{content:"";position:absolute;inset:-1px;background:var(--tufo-soft);transition:transform 1.5s var(--inout)}
[data-rv="arch"] img{transform:scale(1.1);transition:transform 2.2s var(--out)}
[data-rv="arch"].in::after{transform:translateY(-101%)}
[data-rv="arch"].in img{transform:none}
[data-rv="row"]{opacity:0;transition-duration:.9s;transition-delay:calc(var(--s,0) * 70ms)}
[data-rv="row"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ottone);opacity:.55;transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--out);transition-delay:calc(var(--s,0) * 70ms + .15s)}
[data-rv].in{opacity:1;transform:none}
[data-rv="row"].in::after{transform:scaleX(1)}

/* profondità dentro gli archi */
.arch img[data-px]{transform:translate3d(0,var(--py,0px),0) scale(1.08)}
[data-rv="arch"]:not(.in) img[data-px]{transform:scale(1.16)}

/* recensione: le parole si accendono leggendo */
.quote .qw.off{opacity:.16}

/* chi ha chiesto meno animazioni vede tutto subito */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .curtain,.arch-hero::after{display:none}
}