/* ═══════════════════════════════════════════════════════════════════
   MACELLERIA DA DONATO — Pancalieri (TO)
   Foglio di stile unico. Nessuna libreria esterna.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Variabili ────────────────────────────────────────────────── */
:root{
  --ink:#16110e;          /* nero caldo   */
  --ink-2:#241b16;
  --cream:#f7f2e9;        /* panna        */
  --cream-2:#efe7d9;
  --stone:#ded3c1;
  --ember:#a3301d;        /* rosso bottega */
  --ember-lt:#c2432c;
  --brass:#c8a253;        /* ottone       */
  --sage:#6f7f63;
  --text:#2b211b;
  --muted:#6b5c50;
  --white:#fff;

  --maxw:1180px;
  --gutter:20px;
  --r:14px;               /* raggio       */
  --r-lg:22px;
  --shadow:0 2px 4px rgba(22,17,14,.05), 0 12px 32px rgba(22,17,14,.10);
  --shadow-lg:0 4px 8px rgba(22,17,14,.06), 0 18px 38px rgba(22,17,14,.15);

  --serif:"Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── 2. Reset essenziale ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* serve perché i pulsanti sono flex */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
/* Nota: qui NON va messo overflow-x (né hidden né clip).
   Sul body si propaga alla finestra e, oltre a rovinare lo scorrimento
   inerziale su iPhone, azzera la radice degli IntersectionObserver:
   l'intestazione e la barra "Chiama" smettono di reagire.
   Il traboccamento orizzontale è già evitato alla fonte. */
body{
  margin:0;
  font-family:var(--sans);
  font-size:18px;                 /* testo grande: si legge senza occhiali */
  line-height:1.65;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--ember); text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brass); outline-offset:3px; border-radius:6px;
}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.08; margin:0 0 .5em; letter-spacing:-.015em}
h1 em,h2 em{font-style:italic; font-weight:400; color:var(--ember)}
p{margin:0 0 1em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--cream);padding:14px 20px}

/* Sentinelle: servono a capire dove siamo nella pagina SENZA far lavorare
   il browser a ogni scatto di rotellina. Sono alte un pixel e invisibili. */
.sentinel{height:1px; margin:0; padding:0; pointer-events:none}
.skip-link:focus{left:8px;top:8px}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}

/* ── 3. Animazione di apertura ───────────────────────────────────── */
.intro{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:var(--ink);
  overflow:hidden;
}
.intro[hidden]{display:none}
.intro__panel{
  position:absolute; left:0; right:0; height:50%;
  background:var(--ink); z-index:2;
  transition:transform .55s var(--ease);   /* tenda rapida: se scorri subito, la pagina risponde */
}
.intro__panel--top{top:0}
.intro__panel--bottom{bottom:0}
.intro__stage{position:relative; z-index:3; text-align:center; padding:0 24px; transition:opacity .3s ease, transform .4s var(--ease)}

.intro__mark{width:76px;height:76px;display:block;margin:0 auto 20px;fill:none;stroke:var(--brass);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.intro__ring{stroke-dasharray:327;stroke-dashoffset:327}
.intro__knife{stroke-dasharray:190;stroke-dashoffset:190}

.intro__wordmask{overflow:hidden; padding:0 2px}
.intro__word{
  display:block;
  font-family:var(--serif); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(2.8rem,12vw,6.5rem); line-height:1;
  color:var(--cream);
  transform:translateY(112%);
}
.intro__rule{width:0;height:2px;background:var(--brass);margin:22px auto 18px}
.intro__sub{
  margin:0; color:var(--stone); opacity:0;
  font-size:clamp(.72rem,2.6vw,.92rem); letter-spacing:.34em; text-transform:uppercase;
}
.intro__skip{
  position:absolute; z-index:4; right:18px; bottom:18px;
  background:transparent; border:1px solid rgba(247,242,233,.3); color:var(--stone);
  font:inherit; font-size:.85rem; padding:10px 18px; border-radius:100px; cursor:pointer;
  opacity:0; transition:opacity .4s ease .6s, background .2s, color .2s;
}
.intro__skip:hover{background:rgba(247,242,233,.1); color:var(--cream)}

/* fase "play" */
.intro.is-playing .intro__mark{opacity:1; animation:markIn .5s var(--ease) .1s both}
.intro.is-playing .intro__ring{animation:draw 1s var(--ease) .15s forwards}
.intro.is-playing .intro__knife{animation:draw .75s var(--ease) .5s forwards}
.intro.is-playing .intro__word{animation:wordUp .9s var(--ease) .78s forwards}
.intro.is-playing .intro__rule{animation:ruleOut .7s var(--ease) 1.15s forwards}
.intro.is-playing .intro__sub{animation:fadeUp .7s var(--ease) 1.3s forwards}
.intro.is-playing .intro__skip{opacity:1}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes markIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes wordUp{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes ruleOut{from{width:0}to{width:min(260px,52vw)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* fase "uscita": le due tende si aprono */
.intro.is-out{pointer-events:none; background:transparent}
.intro.is-out .intro__stage{opacity:0; transform:scale(.94) translateY(-10px)}
.intro.is-out .intro__skip{opacity:0}
.intro.is-out .intro__panel--top{transform:translateY(-101%)}
.intro.is-out .intro__panel--bottom{transform:translateY(101%)}

body.intro-locked{overflow:hidden}

/* ── 4. Header ───────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:90;
  background:var(--cream);        /* tinta piena: niente sfocatura da ricalcolare a ogni pixel */
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.site-header.is-stuck{border-bottom-color:var(--stone); box-shadow:0 4px 14px rgba(22,17,14,.07)}
.site-header__inner{display:flex; align-items:center; gap:18px; min-height:72px}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); margin-right:auto}
.brand__mark{width:40px;height:40px;flex:none;fill:none;stroke:var(--ember);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.brand__text strong{display:block; font-family:var(--serif); font-size:1.42rem; font-weight:700; line-height:1; letter-spacing:-.02em}
.brand__text small{display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:3px}

.nav{display:flex; gap:6px}
.nav a{
  color:var(--text); text-decoration:none; font-size:1rem; font-weight:500;
  padding:10px 14px; border-radius:100px; transition:background .2s, color .2s;
}
.nav a:hover{background:var(--cream-2); color:var(--ember)}

/* ── 5. Pulsanti ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:13px 24px;
  font:inherit; font-weight:600; font-size:1rem;
  border:2px solid transparent; border-radius:100px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .15s var(--ease), box-shadow .2s, background .15s, color .15s, border-color .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--big{min-height:64px; padding:16px 32px; font-size:1.12rem}
.btn--call{background:var(--ember); color:var(--white); box-shadow:0 6px 20px rgba(163,48,29,.3)}
.btn--call:hover{background:var(--ember-lt); box-shadow:0 10px 30px rgba(163,48,29,.38)}
.btn--wa{background:#1fa855; color:var(--white); box-shadow:0 6px 20px rgba(31,168,85,.28)}
.btn--wa:hover{background:#199a4b}
.btn--sms{background:var(--ink); color:var(--cream)}
.btn--sms:hover{background:var(--ink-2)}
.btn--ghost{background:transparent; color:var(--ink); border-color:currentColor}
.btn--ghost:hover{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.section--dark .btn--ghost,.hero .btn--ghost,.finale .btn--ghost{color:var(--cream)}
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover,.finale .btn--ghost:hover{
  background:var(--cream); color:var(--ink); border-color:var(--cream)}
.ico{width:22px;height:22px;flex:none;fill:currentColor}
.ico--chev{fill:none}

.header__call{min-height:46px; padding:10px 20px; font-size:.95rem}

/* ── 6. Hero: testo sopra la foto ────────────────────────────────
   Misure lette sulla fotografia: insegna 38–73% in orizzontale,
   i due uomini a 36–45% e 55–63%. La scheda si ferma prima del 36%
   così non copre nessuno dei due.                                 */
.hero{position:relative; display:flex; align-items:center;
  min-height:clamp(520px,76svh,740px); color:var(--cream); isolation:isolate; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:-2; background:var(--ink)}
.hero__media img{width:100%;height:100%;object-fit:cover;
  object-position:50% 40%;            /* 40% = dove sta l'insegna nella foto:
                                         cosi non viene mai tagliata */
  animation:slowZoom 1.6s var(--ease) forwards}
@keyframes slowZoom{from{transform:scale(1.03)}to{transform:scale(1)}}
.hero__media.is-empty img{display:none}
.hero__media.is-empty{background:
  radial-gradient(90% 70% at 75% 15%, rgba(163,48,29,.42), transparent 62%),
  linear-gradient(160deg,#24190f,#16110e 60%)}
/* velo leggero a sinistra e sfumatura in basso verso la fascia scura */
.hero__velo{position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, rgba(247,242,233,.45) 0, rgba(247,242,233,0) 14%),
    linear-gradient(to top, rgba(22,17,14,.70) 0, rgba(22,17,14,0) 20%),
    linear-gradient(100deg, rgba(12,9,7,.42) 0%, rgba(12,9,7,.12) 36%, rgba(12,9,7,0) 58%);}
.hero__content{padding-block:clamp(32px,5vh,64px); max-width:1180px}

.hero__scheda{max-width:420px; background:var(--cream); color:var(--text);
  border-radius:var(--r-lg); padding:clamp(22px,2.6vw,32px);
  box-shadow:0 16px 46px rgba(22,17,14,.26)}
.hero__scheda .eyebrow{color:var(--ember); margin:0 0 12px}
.hero .hero__scheda h1{color:var(--ink); font-size:clamp(1.5rem,2.3vw,1.95rem);
  max-width:none; margin-bottom:.5em; line-height:1.1}
.hero .hero__scheda h1 em{color:var(--ember)}
.hero__scheda .lede{color:var(--muted); font-size:.96rem; margin-bottom:0}
.hero__scheda .lede strong{color:var(--text)}
.hero__scheda .lede em{font-style:italic; color:var(--ember)}
.hero__scheda .hero__actions{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 14px}
.hero__scheda .hero__note{font-size:.84rem; color:var(--muted); margin:0}
.hero__scheda .btn{min-height:50px; padding:12px 20px; font-size:.97rem}
.hero__scheda .btn--ghost{color:var(--ink); border-color:var(--ink)}
.hero__scheda .btn--ghost:hover{background:var(--ink); color:var(--cream)}
.eyebrow{font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ember); margin:0 0 16px; font-weight:600}
.lede{font-size:clamp(1.02rem,2.2vw,1.2rem); max-width:56ch}
.hero__scroll{display:none}

@media (max-width:900px){
  /* sotto questa larghezza la scheda coprirebbe le persone:
     la foto passa sopra e il testo va sotto, su fondo chiaro */
  .hero{display:block; min-height:0; color:var(--text); background:var(--cream);
    padding-bottom:clamp(26px,4vw,40px)}
  .hero__media{position:relative; inset:auto}
  .hero__media img{aspect-ratio:16/9; height:auto; object-position:50% 40%}
  .hero__velo{display:none}
  .hero__scheda{max-width:none; background:none; box-shadow:none; padding:0}
  .hero__content{padding-block:clamp(20px,4vw,30px)}
  .hero .hero__scheda h1{font-size:clamp(1.7rem,5.4vw,2.4rem)}
  .hero__scheda .lede{font-size:1rem}
}

/* ── 7. Barra fiducia ────────────────────────────────────────────── */
.trust{background:var(--ink); color:var(--cream); padding:36px 0}
.trust__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
.trust__item{display:flex; flex-direction:column; gap:6px; padding:8px 4px}
.trust__item + .trust__item{border-left:1px solid rgba(247,242,233,.14)}
.trust__big{font-family:var(--serif); font-size:clamp(1.5rem,4vw,2.1rem); font-weight:600; color:var(--brass); line-height:1.05}
.trust__item span{font-size:.92rem; color:#c6bcae}

/* ── 8. Sezioni ──────────────────────────────────────────────────── */
.section{padding:clamp(64px,10vw,120px) 0}
.section--warm{background:var(--cream-2)}
.section--dark{background:var(--ink); color:var(--cream)}
.section--dark h2,.section--dark h3{color:var(--cream)}
.section--dark h2 em{color:var(--brass)}
.section--dark .section__intro{color:#c6bcae}
.section__head{max-width:680px; margin-bottom:clamp(36px,5vw,60px)}
.section__head h2{font-size:clamp(2rem,5.2vw,3.3rem); text-wrap:balance}
.section__intro{font-size:1.1rem; color:var(--muted); margin:0}
.section__foot{margin-top:36px; font-size:1.05rem}
.h-small{font-family:var(--serif); font-size:1.15rem; margin:32px 0 12px}
.h-tiny{font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-family:var(--sans); font-weight:700; margin:0 0 12px}
.muted-sm{font-size:.94rem; color:var(--muted)}

/* ── 9. Schede prodotto ──────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.card{
  background:var(--white); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .22s var(--ease), box-shadow .22s;
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.card__media{aspect-ratio:4/3; overflow:hidden; background:var(--stone)}
.card__media img{width:100%;height:100%;object-fit:cover; transition:transform .4s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__media.is-empty img{display:none}
.card__media.is-empty{background:
  repeating-linear-gradient(135deg, var(--cream-2) 0 14px, var(--stone) 14px 28px);
  position:relative}
.card__media.is-empty::after{content:"foto in arrivo"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.card__body{padding:26px 26px 30px}
.card__body h3{font-size:1.42rem; margin-bottom:.4em}
.card__body p{margin:0; color:var(--muted); font-size:1rem}
.card--feature{outline:2px solid var(--brass); outline-offset:-2px}
.tag{display:inline-block; background:var(--ember); color:var(--white); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:5px 12px; border-radius:100px; margin-bottom:12px}

/* ── 10. Passi prenotazione ──────────────────────────────────────── */
.steps{list-style:none; margin:0 0 44px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:s}
.step{background:rgba(247,242,233,.05); border:1px solid rgba(247,242,233,.14); border-radius:var(--r-lg); padding:28px}
.step__n{display:grid; place-items:center; width:44px;height:44px; border-radius:50%;
  background:var(--brass); color:var(--ink); font-family:var(--serif); font-weight:700; font-size:1.25rem; margin-bottom:16px}
.step h3{font-size:1.28rem; margin-bottom:.35em}
.step p{margin:0; color:#c6bcae; font-size:.98rem}

.booking-cta{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:40px}

/* ── 11. Compositore messaggio ───────────────────────────────────── */
.composer__wrap{background:rgba(247,242,233,.05); border:1px solid rgba(247,242,233,.16); border-radius:var(--r-lg); overflow:hidden}
.composer__toggle{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px; cursor:pointer; font-weight:600; font-size:1.05rem; color:var(--cream);
  list-style:none; min-height:64px;
}
.composer__toggle::-webkit-details-marker{display:none}
.composer__toggle:hover{background:rgba(247,242,233,.05)}
.composer__wrap[open] .ico--chev{transform:rotate(180deg)}
.ico--chev{transition:transform .3s var(--ease); stroke:currentColor}
.composer__body{padding:4px 26px 30px; border-top:1px solid rgba(247,242,233,.12)}
.composer__hint{color:#c6bcae; font-size:.98rem; margin:18px 0 22px}
.composer__hint--sm{font-size:.88rem; margin:16px 0 0}

.field{border:0; margin:0 0 26px; padding:0}
.field legend{font-family:var(--serif); font-size:1.2rem; color:var(--cream); margin-bottom:14px; padding:0}
.lbl{display:block; font-size:.88rem; font-weight:600; color:#c6bcae; margin:16px 0 7px}
.lbl--out{margin-top:8px}
input[type=text],input[type=date],input[type=time],textarea{
  width:100%; min-height:54px; padding:14px 16px;
  font:inherit; font-size:1.02rem; color:var(--cream);
  background:rgba(247,242,233,.07); border:1.5px solid rgba(247,242,233,.22); border-radius:var(--r);
}
textarea{min-height:auto; resize:vertical; line-height:1.55}
input::placeholder,textarea::placeholder{color:#8d8177}
.preview{background:rgba(22,17,14,.5); font-size:.98rem; color:#e0d7c9}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}

.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  font:inherit; font-size:.98rem; font-weight:500;
  min-height:48px; padding:11px 20px;
  background:transparent; color:var(--cream);
  border:1.5px solid rgba(247,242,233,.3); border-radius:100px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .15s var(--ease);
}
.chip:hover{border-color:var(--brass); transform:translateY(-2px)}
.chip[aria-pressed=true]{background:var(--brass); color:var(--ink); border-color:var(--brass); font-weight:700}
.composer__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:22px}
.composer__actions .btn--ghost{color:var(--cream)}

/* ── 12. Sezioni a due colonne ───────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,70px); align-items:center}
.split--rev .split__media{order:2}
.split__media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--stone)}
.split__media img{width:100%; height:100%; aspect-ratio:4/5; object-fit:cover}
.split__media.is-empty img{display:none}
.split__media.is-empty{aspect-ratio:4/5;
  background:repeating-linear-gradient(135deg, var(--cream-2) 0 14px, var(--stone) 14px 28px); position:relative}
.split__media.is-empty::after{content:"foto in arrivo"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.split__text h2{font-size:clamp(1.9rem,4.6vw,3rem)}

/* Foto quadrata (la stalla): rapporto 1:1 per non deformarla.
   Niente ingrandimenti: l'originale è 719 px e va mostrato più piccolo. */
.split__media--quad{margin:0; position:relative}
.split__media--quad img{aspect-ratio:1/1; width:100%; height:auto;
  filter:contrast(1.02) saturate(1.04)}
.split__media--quad.is-empty{aspect-ratio:1/1}
.split__media--quad figcaption{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:38px 22px 16px; font-size:.86rem; color:#e6ddcf; letter-spacing:.02em;
  background:linear-gradient(to top, rgba(12,9,7,.78), transparent);
}
.ticks{list-style:none; padding:0; margin:26px 0 0}
.ticks li{position:relative; padding-left:34px; margin-bottom:12px; color:var(--muted)}
.ticks li::before{content:""; position:absolute; left:4px; top:.62em; width:14px; height:8px;
  border-left:2.5px solid var(--ember); border-bottom:2.5px solid var(--ember); transform:rotate(-45deg)}

/* ── 13. Recensioni ──────────────────────────────────────────────── */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.quote{margin:0; background:var(--white); border-radius:var(--r-lg); padding:28px 28px 26px; box-shadow:var(--shadow); position:relative; display:flex; flex-direction:column}
/* niente apice decorativo: si sovrapponeva al testo delle recensioni */
.quote blockquote{margin:0 0 18px; font-family:var(--serif); font-size:1.16rem; line-height:1.42; position:relative; flex:1}
.quote figcaption{font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.quote__stars{color:var(--brass); font-size:1.05rem; letter-spacing:.14em; margin-bottom:14px; line-height:1}
.quote blockquote{margin:0 0 18px}
.quote__who{font-weight:700; color:var(--text); letter-spacing:0; text-transform:none; font-size:.95rem}
.quote figcaption{font-size:.82rem; letter-spacing:.04em; text-transform:none; color:var(--muted)}
.quotes__nota{margin:30px 0 0; font-size:.9rem; color:var(--muted); max-width:62ch}
.quotes__azioni{display:flex; flex-wrap:wrap; gap:14px; margin-top:22px}
/* Galleria scorrevole con le frecce */
.galleria{margin-top:40px}
.galleria__testa{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px}
.galleria__testa h3{font-size:1.3rem; margin:0}
.galleria__frecce{display:flex; gap:8px}
.galleria__f{width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  background:var(--cream); color:var(--ink); border:2px solid var(--ink); border-radius:50%;
  transition:background .15s, color .15s, opacity .2s}
.galleria__f svg{width:22px; height:22px}
.galleria__f:hover{background:var(--ink); color:var(--cream)}
.galleria__f[disabled]{opacity:.28; cursor:default}
.galleria__f[disabled]:hover{background:var(--cream); color:var(--ink)}

.galleria__pista{
  display:flex; gap:16px; overflow-x:auto;
  scroll-snap-type:x proximity; padding:4px 2px 10px;
  scrollbar-width:none;                 /* la barra la sostituiscono le frecce */
}
.galleria__pista::-webkit-scrollbar{display:none}
.galleria__v{flex:0 0 clamp(230px,30%,330px); scroll-snap-align:start; margin:0;
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  box-shadow:var(--shadow); background:var(--stone)}
.galleria__v img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .5s var(--ease)}
.galleria__v:hover img{transform:scale(1.04)}
.galleria__v figcaption{position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:34px 16px 13px; font-size:.86rem; color:#f0e7da;
  background:linear-gradient(to top, rgba(12,9,7,.82), transparent)}
@media (max-width:620px){ .galleria__v{flex:0 0 78%} }

.link-arrow{font-weight:600; text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:2px}
.link-arrow::after{content:" →"}

/* ── 14. Dove siamo ──────────────────────────────────────────────── */
.nap{font-style:normal; margin:22px 0 0; font-size:1.08rem}
.nap__row{display:flex; gap:13px; align-items:flex-start; margin-bottom:14px}
.nap__row .ico{fill:var(--ember); margin-top:3px}
.nap a{font-weight:600; font-size:1.2rem}

.hours{width:100%; border-collapse:collapse; font-size:1.02rem; margin-bottom:12px}
.hours td{padding:11px 0; border-bottom:1px solid var(--stone)}
.hours td:last-child{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted)}
.hours tr.is-today td{font-weight:700; color:var(--ember)}
.hours tr.is-today td:last-child{color:var(--ember)}
.hours td.is-closed{color:#9b8d80}
.dove__actions{display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 18px}

.map-facade{position:relative; min-height:420px; display:grid; place-items:center;
  background:
    radial-gradient(70% 70% at 30% 30%, rgba(200,162,83,.18), transparent 60%),
    repeating-linear-gradient(90deg, var(--cream-2) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, var(--cream-2) 0 1px, transparent 1px 46px),
    var(--stone);
  aspect-ratio:auto;
}
.map-facade::after{display:none}
.map-facade__btn{
  display:inline-flex; align-items:center; gap:10px; font:inherit; font-weight:600; font-size:1.05rem;
  min-height:60px; padding:16px 28px; border:0; border-radius:100px; cursor:pointer;
  background:var(--white); color:var(--ink); box-shadow:var(--shadow-lg);
  transition:transform .2s var(--ease);
}
.map-facade__btn{text-decoration:none}
/* Da telefono il bersaglio non e' solo la pillola: si tocca tutto il
   riquadro della mappa. Un dito non ha la mira di un mouse. */
.map-facade__btn::after{content:""; position:absolute; inset:0}
.map-facade__btn:hover{transform:translateY(-2px)}
.map-facade__btn .ico{fill:var(--ember)}
.map-facade iframe{width:100%; height:100%; min-height:420px; border:0; display:block}

/* ── 15. FAQ ─────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--stone)}
.faq__item{border-bottom:1px solid var(--stone)}
.faq__item summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:var(--serif); font-size:1.24rem; font-weight:600; min-height:60px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:""; position:absolute; right:8px; top:50%; width:13px; height:13px;
  border-right:2.5px solid var(--ember); border-bottom:2.5px solid var(--ember);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__item summary:hover{color:var(--ember)}
.faq__a{padding:0 44px 24px 0; color:var(--muted)}
.faq__a p{margin:0}

/* ── 16. CTA finale + footer ─────────────────────────────────────── */
.finale{background:var(--ember); color:var(--white); padding:clamp(56px,8vw,90px) 0; text-align:center}
.finale h2{font-size:clamp(2rem,5.5vw,3.4rem); color:var(--white); margin-bottom:.25em}
.finale p{font-size:1.15rem; color:#f7d9d2; margin-bottom:28px}
.finale .btn--call{background:var(--white); color:var(--ember); box-shadow:0 10px 30px rgba(0,0,0,.18)}
.finale .btn--call:hover{background:var(--cream)}

.site-footer{background:var(--ink); color:#c6bcae; padding:clamp(48px,7vw,72px) 0 0; font-size:.98rem}
.site-footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px}
.site-footer a{color:var(--cream)}
.footer-brand{font-family:var(--serif); font-size:1.8rem; color:var(--cream); margin:0 0 10px; font-weight:700}
.footer-list{list-style:none; padding:0; margin:0}
.footer-list li{margin-bottom:9px}
.footer-list a{text-decoration:none}
.footer-list a:hover{text-decoration:underline}
.site-footer__legal{margin-top:44px; padding-block:22px; border-top:1px solid rgba(247,242,233,.12)}
.site-footer__legal p{margin:0; font-size:.82rem; color:#8d8177}

/* ── 17. Barra fissa cellulare ───────────────────────────────────── */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:none; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--cream);        /* tinta piena, vedi sopra */
  border-top:1px solid var(--stone);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.callbar.is-on{transform:translateY(0)}
.callbar__btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; border-radius:100px; text-decoration:none; font-weight:700; font-size:1.05rem;
}
.callbar__btn--call{background:var(--ember); color:var(--white); flex:1.5}
.callbar__btn--map{background:transparent; color:var(--ink); border:2px solid var(--ink)}

/* ── 18. Comparsa al scroll ──────────────────────────────────────── */
.reveal{transition:opacity .4s var(--ease), transform .4s var(--ease)}
/* I blocchi partono invisibili SOLO se lo script è vivo e vegeto
   (classe 'js' sull'<html>). Se si rompesse, o se fosse disattivato,
   resta tutto visibile: meglio nessuna animazione che una pagina bianca. */
html.js .reveal{opacity:0; transform:translateY(14px)}
html.js .reveal.is-in{opacity:1; transform:none}   /* specificità pari a quella sopra, altrimenti non vince */
.cards .reveal.is-in,.quotes .reveal.is-in,.trust .reveal.is-in{transition-delay:var(--d,0s)}

/* ── 19. Responsive ──────────────────────────────────────────────── */
/* Portatili piccoli e tablet orizzontali: il menù resta, solo più compatto */
@media (max-width:1080px){
  .nav a{padding:10px 11px; font-size:.95rem}
  .site-header__inner{gap:12px}
}
@media (max-width:1000px){
  .cards,.quotes,.steps{grid-template-columns:repeat(2,1fr)}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
/* ⚠️ Queste due regole devono stare alla STESSA larghezza: sotto di essa
   sparisce il menù in alto e compare la barra "Chiama" in basso.
   Se si scollegano, nella fascia in mezzo (tipicamente l'iPad in
   verticale) il visitatore resta senza nessuno dei due. */
@media (max-width:880px){
  .nav{display:none}
  .callbar{display:flex}
  .site-footer{padding-bottom:86px}
}
@media (max-width:820px){
  html{scroll-padding-top:74px}
  .hero{min-height:clamp(460px,64svh,600px)}
  .hero__media img{object-position:50% 40%}
  .split,.split--rev .split__media{grid-template-columns:1fr; order:0}
  .split--rev .split__media{order:-1}
  .trust__grid{grid-template-columns:repeat(2,1fr); gap:0}
  .trust__item{padding:16px 8px}
  .trust__item + .trust__item{border-left:0}
  .trust__item:nth-child(even){border-left:1px solid rgba(247,242,233,.14)}
  .trust__item:nth-child(n+3){border-top:1px solid rgba(247,242,233,.14)}
  body{padding-bottom:0}
}
@media (max-width:560px){
  .header__call span{display:none}
  .header__call{padding:10px 14px; min-width:46px}
}
@media (max-width:620px){
  body{font-size:17px}
  .cards,.quotes,.steps{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr; gap:28px}
  .hero__actions .btn,.booking-cta .btn,.dove__actions .btn{width:100%}
  .row{grid-template-columns:1fr}
  .composer__body{padding-inline:18px}
  .composer__toggle{padding-inline:18px}
  .card__body{padding:22px}
}

/* ── 20. Preferenze di accessibilità ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1 !important; transform:none !important}
  .hero__media img{animation:none}
}
@media (prefers-contrast:more){
  :root{--muted:#3d3129}
  .btn{border-color:currentColor}
}
@media print{
  .intro,.callbar,.site-header,.hero__scroll,.composer,.map-facade{display:none !important}
  body{background:#fff; color:#000; font-size:12pt}
}

/* ── 21. Extra ───────────────────────────────────────────────────── */
.today-badge{font-weight:700}
.hours tr.is-today td{font-weight:700; color:var(--ember)}

/* pagina di testo semplice (privacy) */
.page-simple{padding:clamp(48px,8vw,90px) 0}
.page-simple h1{font-size:clamp(2rem,5vw,3rem)}
.page-simple h2{font-size:1.4rem; margin-top:2em}
.page-simple ul{padding-left:1.2em}
.page-simple li{margin-bottom:.5em}