/* Villa Lucia — landing (step 5, design v22 di ChatGPT)
   Colori misurati con confronta-design.py dal design e dalle sue fette HD.
   Caratteri: Newsreader (titoli e testo, il serif del design) · Manrope (occhielli in maiuscoletto). Serviti dal sito. */

@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Variable.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  /* palette del design (misurata) */
  --carta:#FCF9F4;          /* fondo pagina */
  --carta-chiara:#FDFBF7;   /* cornice delle foto, scheda «prossimamente» */
  --crema:#F7F4EC;          /* scheda «già disponibile» */
  --sabbia:#E6DDCE;         /* etichetta «prossimamente» */
  --linea:#DACCB9;          /* bordi e filetti */
  --terracotta:#A6503A;     /* pulsanti */
  --terracotta-scuro:#933F27; /* occhielli */
  --inchiostro:#1A1D24;     /* titoli */
  --testo:#26292E;          /* testo */
  --oro:#9A702F;            /* «Puglia.» in corsivo */
  --oliva:#6D7950;          /* etichetta «già disponibile» */
  --seppia:#8E6A44;         /* testo dell'etichetta sabbia, dettagli */

  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:"Manrope", "Helvetica Neue", Arial, sans-serif;
  --gutter:clamp(20px, 3.2vw, 48px);
  --larghezza:1376px;
  --testata:92px;
  --ombra-foto:0 14px 34px -18px rgba(60,40,20,.38);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--testo);font-family:var(--serif);font-size:1.0625rem;line-height:1.5;
  font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--inchiostro);margin:0;letter-spacing:-.012em;text-wrap:balance}
/* niente parola sola sull'ultima riga (collaudo 14/10): dove il browser non lo sa fare, il testo va a capo come prima */
p,li,figcaption,blockquote{text-wrap:pretty}
p{margin:0}
ul{list-style:none;margin:0;padding:0}
section[id],#villa{scroll-margin-top:calc(var(--testata) + 8px)}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:2px}

.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--inchiostro);color:var(--carta);padding:.6rem 1rem;border-radius:4px;text-decoration:none}
.salta:focus{top:12px}

.contenitore{width:100%;max-width:calc(var(--larghezza) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

.occhiello{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta-scuro);margin-bottom:.9rem}

/* pulsanti: la freccia è il file del kit, colorata con una maschera */
.bottone{display:inline-flex;align-items:center;gap:.8em;background:var(--terracotta);color:#fff;text-decoration:none;border:0;cursor:pointer;
  font-family:var(--serif);font-size:1.0625rem;line-height:1;padding:.95em 1.5em;border-radius:4px;white-space:nowrap;
  box-shadow:0 6px 16px -10px rgba(120,50,25,.7);transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease}
.bottone:hover{background:var(--terracotta-scuro);transform:translateY(-1px);box-shadow:0 10px 20px -12px rgba(120,50,25,.8)}
.bottone:active{transform:translateY(0)}
.freccia{display:inline-block;width:1.05em;height:.45em;background:currentColor;
  -webkit-mask:url("../img/freccia.png") center/contain no-repeat;mask:url("../img/freccia.png") center/contain no-repeat;transition:transform .2s ease}
.bottone:hover .freccia{transform:translateX(3px)}

.stampa{background:var(--carta-chiara);padding:5px;box-shadow:var(--ombra-foto);border-radius:2px}
.stampa img{width:100%;height:100%;object-fit:cover;border-radius:1px}
.scritta{pointer-events:none;user-select:none}

/* ─── ramo d'ulivo sul bordo sinistro ─── */
.ulivo-bordo{position:absolute;left:0;top:0;width:clamp(90px, 13.9vw, 200px);z-index:0;pointer-events:none}

/* ─── TESTATA ─── */
.testata{position:sticky;top:0;z-index:50;height:var(--testata);transition:background-color .25s ease, box-shadow .25s ease}
.testata.e-scesa{background:rgba(252,249,244,.97);box-shadow:0 8px 24px -20px rgba(40,30,20,.6)}
.testata__in{height:100%;display:flex;align-items:center;gap:2rem;max-width:calc(var(--larghezza) + 2 * var(--gutter));margin-inline:auto;
  padding-inline:var(--gutter) var(--gutter);padding-left:clamp(20px, 8.4vw, 132px)}
.testata__logo{flex:0 0 auto;display:block;width:clamp(170px, 20vw, 292px);margin-top:14px}
.menu{margin-left:auto;display:flex;align-items:center}
.menu ul{display:flex;gap:clamp(1.2rem, 2.3vw, 2.4rem)}
.menu ul a{font-size:1rem;text-decoration:none;color:var(--inchiostro);position:relative;padding:.3rem 0}
.menu ul a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.menu ul a:hover::after{transform:scaleX(1)}
.menu__bottone{display:none}
.testata__bottone{margin-left:.8rem;padding:.8em 1.25em;font-size:1rem}
.menu{padding-right:1.6rem;border-right:1px solid var(--linea);height:34px}
.hamburger{display:none}

/* ─── HERO ─── */
.hero{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  grid-template-areas:"testo foto" "paesaggio paesaggio";margin-top:calc(-1 * var(--testata) + 64px)}
.hero__testo{grid-area:testo;position:relative;padding-left:clamp(20px, 8.6vw, 136px);padding-right:1.5rem;padding-top:clamp(1.8rem, 3.6vw, 3.4rem);z-index:3}
.hero h1{font-size:clamp(2.4rem, 1rem + 2.75vw, 3.35rem);line-height:1.05;margin-bottom:1rem;margin-right:-2.5rem;position:relative}
.hero h1 .intero{display:block;white-space:nowrap}
.hero h1 em{color:var(--oro);font-style:italic;letter-spacing:-.02em}
.hero__sotto{font-size:clamp(1.0625rem, .9rem + .35vw, 1.2rem);line-height:1.45;max-width:26em;margin-bottom:.7rem}
.hero__sotto--breve{margin-bottom:1.5rem;color:var(--seppia)}
.hero__azioni{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.6rem, 3vw, 2.6rem)}
.hero__scritta-ulivi{width:clamp(130px, 13vw, 200px);margin-left:clamp(0px, 3vw, 46px)}
.hero__rametto{position:absolute;width:clamp(44px, 4.6vw, 70px);left:clamp(150px, 19vw, 300px);bottom:-3.5rem;transform:rotate(58deg);opacity:.95}

.hero__foto{grid-area:foto;position:relative;margin-top:clamp(0px, 1.5vw, 24px)}
.hero__grande{position:relative;aspect-ratio:900/530;margin-right:0;overflow:hidden;
  clip-path:polygon(0.4% 0,100% 0,100% 82%,96% 82.6%,90% 83.9%,82% 85.2%,74% 86.6%,66% 88.4%,58% 89.9%,50% 91.6%,42% 93.4%,34% 95.1%,26% 96.8%,18% 98.1%,10% 99.3%,3% 100%,0 99.4%,0.5% 75%,0 52%,0.6% 28%)}
.hero__grande img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero__piccola{position:absolute;width:45.5%;aspect-ratio:251/170;left:-13.5%;bottom:-13%;z-index:2}
.hero__casa{position:absolute;right:clamp(16px, 2.2vw, 34px);bottom:-1.5%;display:flex;align-items:flex-end;gap:.2rem;z-index:2}
.hero__casa .scritta{width:clamp(130px, 13vw, 196px)}
.hero__casa-rametto{width:clamp(34px, 3.4vw, 52px);transform:rotate(62deg) translate(-4px, 10px)}

.paesaggio{grid-area:paesaggio;margin-top:clamp(0px, .5vw, 8px);position:relative;z-index:0;pointer-events:none}
.paesaggio img{width:100%;height:clamp(110px, 12.5vw, 196px);object-fit:cover;object-position:50% 50%}

.pregi{grid-area:pregi;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:2rem;
  max-width:calc(var(--larghezza) + 2 * var(--gutter));width:100%;margin:clamp(.4rem, 1vw, 1rem) auto 0;padding-inline:clamp(20px, 8.4vw, 124px) var(--gutter)}
.pregi li{display:flex;align-items:center;gap:1.1rem}
.pregi img{width:70px;height:72px;object-fit:contain;flex:0 0 auto}
.pregi li:first-child img{transform:rotate(28deg)}
.pregi strong{display:block;font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--inchiostro);margin-bottom:.15rem}
.pregi span{font-size:1.0625rem}

/* ─── ONDE (divisori del kit) ─── */
.onda{position:relative;height:clamp(52px, 6vw, 92px);margin-top:clamp(.4rem, 1.2vw, 1.2rem);pointer-events:none}
.onda__linea{position:absolute;left:0;bottom:0;width:100%;height:clamp(34px, 6vw, 92px);object-fit:fill;opacity:.85}
.onda__linea--giu{transform:scaleY(-1)}
.onda__ramo{position:absolute;right:clamp(4px, 1vw, 16px);top:clamp(-10px, -.6vw, -4px);width:clamp(92px, 10.5vw, 160px);transform:scaleX(-1) rotate(-12deg)}

/* ─── APPARTAMENTI ─── */
.appartamenti{position:relative;padding-top:.6rem}
.appartamenti__testa{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;margin-bottom:clamp(1.4rem, 2.4vw, 2.2rem);padding-left:clamp(0px, 1.4vw, 20px)}
.appartamenti h2{font-size:clamp(2rem, 1rem + 2vw, 3rem);line-height:1.06;max-width:14em}
.appartamenti__intro{max-width:23em;font-size:1.0625rem;line-height:1.45;margin-right:clamp(0px, 12vw, 190px);padding-bottom:.35rem}

.appartamenti__griglia{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,42fr) minmax(0,30fr);grid-template-rows:1fr 1fr;gap:clamp(10px, 1vw, 14px) clamp(10px, 1vw, 16px)}
.app-foto--grande{grid-row:1 / span 2}
.app-foto{min-height:0}
.app-foto--grande img{object-position:72% 50%}
.app-foto img{aspect-ratio:auto}
.schede{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;gap:clamp(10px, 1vw, 14px);margin-left:clamp(0px, .8vw, 12px)}
.scheda{position:relative;border-radius:6px;padding:clamp(1.1rem, 1.6vw, 1.5rem) clamp(1.1rem, 1.7vw, 1.6rem);flex:1 1 auto}
.scheda--pronta{background:var(--crema);box-shadow:0 10px 30px -24px rgba(60,40,20,.5)}
.scheda--presto{background:var(--carta-chiara);border:1px solid var(--linea);overflow:hidden}
.etichetta{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;padding:.45em .85em;border-radius:3px;margin-bottom:.8rem}
.etichetta--verde{background:var(--oliva);color:#fff}
.etichetta--sabbia{background:var(--sabbia);color:var(--seppia)}
.scheda h3{font-size:clamp(1.45rem, 1rem + .8vw, 1.8rem);line-height:1.12;margin-bottom:.85rem}
.scheda__dato{display:flex;align-items:center;gap:1rem;font-size:1rem;line-height:1.3;margin-bottom:.7rem}
.scheda--presto .scheda__dato{padding-right:2.6rem;margin-bottom:0}
.scheda__dato img{width:34px;height:32px;object-fit:contain;flex:0 0 auto}
.scheda__testo{font-size:1rem;line-height:1.45;margin-bottom:1.1rem}
.bottone--pieno{width:100%;justify-content:center;padding:.9em 1em}
.scheda__foglia{position:absolute;right:-6px;bottom:-14px;width:clamp(52px, 4.8vw, 72px);transform:rotate(-24deg);opacity:.95}

/* ─── LE GIORNATE ─── */
.giornate{position:relative;padding-top:clamp(.2rem, 1vw, 1rem);padding-bottom:clamp(1.2rem, 2.4vw, 2.4rem)}
.giornate__griglia{display:grid;grid-template-columns:minmax(0,27fr) minmax(0,40fr) minmax(0,27fr);gap:clamp(16px, 1.8vw, 28px);align-items:start}
.giornate__foto{aspect-ratio:387/284}
.giornate__testo{position:relative;text-align:center;padding-top:.2rem;min-height:100%}
.giornate h2{font-size:clamp(1.9rem, 1rem + 1.7vw, 2.65rem);line-height:1.08;margin-bottom:1rem}
.giornate__testo p + p{margin-top:.7rem}
.giornate__testo p{font-size:1.0625rem;line-height:1.5;max-width:30em;margin-inline:auto}
.lineetta{width:58px;border:0;border-top:1px solid var(--seppia);opacity:.6;margin:1.6rem auto 1.1rem}
.giornate__scritta{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:center;gap:.6rem;padding-left:3.5rem}
.giornate__scritta .scritta{width:clamp(96px, 8.4vw, 128px)}
.giornate__rametto{width:clamp(40px, 3.6vw, 56px);transform:rotate(-38deg);margin-top:1.4rem}
.giornate__botanico{position:absolute;left:-6%;right:-6%;bottom:-1.6rem;width:112%;max-width:none;height:auto;z-index:1;opacity:.95;pointer-events:none}

/* ─── SAPORI ─── */
.sapori{position:relative;padding-top:clamp(.8rem, 1.6vw, 1.6rem)}
.sapori__griglia{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,33fr) minmax(0,23fr);align-items:center;gap:clamp(16px, 2.4vw, 40px)}
.sapori__pane{width:100%;max-width:640px;margin-left:clamp(-24px, -1.2vw, 0px)}
.sapori h2{font-size:clamp(2.1rem, 1rem + 2.1vw, 3.1rem);line-height:1.04;margin-bottom:.8rem}
.sapori__testo p:last-child{font-size:1.0625rem;line-height:1.45;max-width:24em}
.sapori__lato{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;min-height:190px}
.sapori__lato .scritta{width:clamp(110px, 10vw, 156px);position:relative;z-index:2;margin-right:auto;transform:rotate(-6deg)}
.sapori__pomodori{width:clamp(96px, 9.2vw, 148px);margin-top:1.8rem}
.sapori__onda{width:100%;height:clamp(30px, 4.4vw, 66px);object-fit:fill;margin-top:clamp(-40px, -2vw, -12px);opacity:.8;transform:scaleX(-1)}

/* ─── LUCERA ─── */
.lucera{position:relative;padding-top:clamp(.6rem, 1.4vw, 1.4rem);padding-bottom:clamp(1rem, 2vw, 2rem)}
.lucera__griglia{display:grid;grid-template-columns:minmax(0,39fr) minmax(0,42fr) minmax(0,19fr);gap:clamp(16px, 1.6vw, 26px);align-items:center}
.lucera__testo{position:relative;padding-left:clamp(0px, 1.2vw, 18px)}
.lucera h2{font-size:clamp(1.9rem, 1rem + 1.5vw, 2.5rem);line-height:1.1;margin-bottom:.9rem;text-wrap:balance}
.lucera__testo p:not(.occhiello){font-size:1.0625rem;line-height:1.45;margin-bottom:1.6rem}
.lucera__foto{aspect-ratio:640/354;overflow:hidden;box-shadow:var(--ombra-foto)}
.lucera__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.lucera__lato{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.lucera__lato .scritta{width:clamp(130px, 12vw, 186px);transform:rotate(-4deg)}
.lucera__disegno{width:clamp(140px, 13vw, 200px);opacity:.92}

/* ─── INVITO / CONTATTI ─── */
.invito{position:relative;padding-block:clamp(1.4rem, 3.2vw, 3.4rem) clamp(2.2rem, 4vw, 4rem);overflow:hidden}
.onda--lucera{height:clamp(40px, 4.6vw, 70px);margin-top:clamp(-1.6rem, -1.4vw, -.4rem)}
.onda--lucera .onda__linea{transform:scaleX(-1)}
.onda__rametto{position:absolute;left:clamp(150px, 22vw, 330px);top:-30%;width:clamp(44px, 4.4vw, 66px);transform:rotate(64deg)}
.invito__ramo{position:absolute;width:clamp(120px, 15vw, 230px);top:50%;pointer-events:none}
.invito__ramo--sx{left:-2.2%;transform:translateY(-50%) scaleX(-1) rotate(-8deg)}
.invito__ramo--dx{right:-2.4%;transform:translateY(-50%) rotate(-8deg)}
.invito__griglia{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(1.6rem, 3.6vw, 3.4rem);padding-inline:clamp(120px, 15vw, 230px)}
.invito__testo{text-align:center}
.invito h2{font-size:clamp(2rem, 1rem + 1.9vw, 2.75rem);line-height:1.08;margin-bottom:.45rem}
.invito__testo p{font-size:1.125rem}
.invito__azione{display:flex;flex-direction:column;align-items:center;gap:.65rem}
.invito__azione .bottone{font-size:1.125rem;padding:1em 1.6em}
.invito__numero{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--seppia);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.invito__numero:hover{border-color:currentColor}
.invito__scritta{width:clamp(130px, 11vw, 168px);transform:rotate(-8deg)}

/* ─── FOOTER ─── */
.piede{position:relative;padding-top:clamp(1rem, 2vw, 2rem)}
.piede__griglia{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(1.4rem, 3vw, 3rem)}
.piede__logo{display:block;width:clamp(180px, 19vw, 272px)}
.piede__menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem 0}
.piede__menu ul{display:flex;flex-wrap:wrap;gap:.4rem clamp(1rem, 1.9vw, 1.9rem);padding-inline:clamp(1rem, 2.2vw, 2.2rem)}
.piede__legale{border-left:1px solid var(--linea)}
.piede__menu a{font-size:.95rem;text-decoration:none}
.piede__menu a:hover{text-decoration:underline;text-underline-offset:3px}
.piede__scritta{width:clamp(120px, 9.4vw, 142px);transform:rotate(-6deg)}
.piede__onda{width:min(820px, 64%);margin:clamp(-.4rem, -.2vw, 0rem) 0 0 auto;margin-right:clamp(10px, 8vw, 120px)}
.piede__fondo{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:.6rem;padding-bottom:1.4rem;font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;color:var(--seppia)}
.piede__fondo a{text-decoration:underline;text-underline-offset:2px}

/* ═════════════ TABLET ═════════════ */
@media (max-width:1100px){
  .appartamenti__griglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto}
  .app-foto--grande{grid-column:1 / span 2;grid-row:auto;aspect-ratio:16/9}
  .app-foto{aspect-ratio:3/2}
  .schede{grid-column:1 / span 2;grid-row:auto;flex-direction:row;margin-left:0}
  .scheda{flex:1 1 0}
  .appartamenti__intro{margin-right:0}
  .ulivo-bordo{width:84px}
  .hero{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
  .hero h1{font-size:2.6rem;margin-right:0}
}

/* ═════════════ MENU A TENDINA (fino a 1279 px: sei voci non stanno in riga) ═════════════ */
@media (max-width:1279px){
  .testata__bottone{margin-left:auto;font-size:.95rem;padding:.75em 1.1em}
  .hamburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;margin-left:.4rem;width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer}
  .hamburger span{display:block;height:1.5px;background:var(--inchiostro);border-radius:2px;transition:transform .25s ease, opacity .2s ease}
  .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .menu{position:fixed;left:0;right:0;top:var(--testata);height:auto;margin:0;padding:1.4rem var(--gutter) 1.8rem;background:var(--carta);
    flex-direction:column;align-items:stretch;gap:1.2rem;border-bottom:1px solid var(--linea);box-shadow:0 18px 30px -24px rgba(40,30,20,.6);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s}
  .menu.aperto{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease, transform .2s ease}
  .menu ul{flex-direction:column;gap:0}
  .menu ul li + li{border-top:1px solid rgba(218,204,185,.6)}
  .menu ul a{display:block;padding:.85rem 0;font-size:1.25rem}
  .menu ul a::after{display:none}
  .menu__bottone{display:inline-flex;justify-content:center}
  .menu{border-right:0}
}

/* ═════════════ TELEFONO ═════════════ */
@media (max-width:760px){
  :root{--testata:66px}
  body{font-size:1rem}
  .ulivo-bordo{width:38px;opacity:.9;top:56px}
  .testata{background:rgba(252,249,244,.97)}
  .testata__in{gap:1rem;padding-left:var(--gutter)}
  .testata__logo{width:150px;margin-top:4px}

  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"testo" "foto" "paesaggio";margin-top:0}
  .hero__testo{padding:1.4rem var(--gutter) 0 calc(var(--gutter) + 26px)}
  .hero h1{font-size:2.35rem;margin-bottom:.8rem;margin-right:0}
  .hero__sotto{font-size:1.0625rem;margin-bottom:.6rem;max-width:21em}
  .hero__sotto--breve{margin-bottom:1.2rem}
  .hero__azioni{flex-direction:row;align-items:center;gap:.9rem}
  .hero__azioni .bottone{font-size:1rem;padding:.9em 1.2em}
  .hero__scritta-ulivi{width:112px;margin-left:0}
  .hero__rametto{display:none}
  .hero__foto{margin:1.6rem 0 0 calc(var(--gutter) + 10px)}
  .hero__grande{aspect-ratio:4/3}
  .hero__piccola{width:54%;left:-4%;bottom:-17%}
  .hero__casa{right:12px;bottom:-21%}
  .hero__casa .scritta{width:118px}
  .hero__casa-rametto{width:30px}
  .paesaggio{margin-top:2.6rem}
  .paesaggio img{height:88px}
  .pregi{grid-template-columns:minmax(0,1fr);gap:.85rem;padding-inline:calc(var(--gutter) + 10px) var(--gutter);margin-top:.4rem}
  .pregi img{width:40px;height:42px}
  .pregi strong{font-size:.74rem}
  .pregi span{font-size:1rem}

  .onda{height:46px}
  .onda__ramo{width:76px}

  .appartamenti__testa{flex-direction:column;align-items:flex-start;gap:.8rem;padding-left:0}
  .appartamenti h2{font-size:2.2rem}
  .appartamenti__intro{font-size:1rem}
  .appartamenti__griglia{gap:8px}
  .app-foto--grande{aspect-ratio:3/2}
  .schede{flex-direction:column;gap:12px;margin-top:6px}
  .scheda{flex:none}
  .scheda h3{font-size:1.55rem}

  .giornate__griglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .giornate__testo{grid-column:1 / span 2;grid-row:1;padding-bottom:3.2rem}
  .giornate__foto{grid-row:2;aspect-ratio:4/3}
  .giornate h2{font-size:2.15rem}
  .giornate__testo p{font-size:1rem}
  .lineetta{margin:1.1rem auto .6rem}
  .giornate__scritta{padding-left:2.4rem}
  .giornate__scritta .scritta{width:96px}
  .giornate__botanico{bottom:-.6rem;left:-8%;width:116%}

  .sapori__griglia{grid-template-columns:minmax(0,1fr) auto;gap:.6rem 1rem}
  .sapori__pane{grid-column:1 / span 2;max-width:340px;margin:0 auto}
  .sapori__testo{grid-column:1 / span 2}
  .sapori h2{font-size:2.15rem}
  .sapori__testo p:last-child{font-size:1rem}
  .sapori__lato{grid-column:1 / span 2;min-height:0;justify-content:center;gap:1.2rem;align-items:center;margin-top:.4rem}
  .sapori__lato .scritta{width:118px;margin-right:0}
  .sapori__pomodori{width:84px;margin-top:0}

  .lucera__griglia{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .lucera__testo{padding-left:0}
  .lucera h2{font-size:2.15rem}
  .lucera__testo p:not(.occhiello){font-size:1rem}
  .lucera__testo br{display:none}
  .lucera__foto{aspect-ratio:3/2}
  .lucera__lato{flex-direction:row;justify-content:center;gap:1rem}
  .lucera__lato .scritta{width:138px}
  .lucera__disegno{width:150px}

  .invito{padding-block:5.2rem 2.4rem}
  .invito__ramo{width:72px;top:-.2rem;transform:none}
  .invito__ramo--sx{left:-18px;transform:scaleX(-1) rotate(-30deg)}
  .invito__ramo--dx{right:-18px;transform:rotate(-30deg)}
  .onda__rametto{left:62%;width:40px;top:-40%}
  .invito__griglia{flex-direction:column;gap:1.3rem;padding-inline:var(--gutter)}
  .invito h2{font-size:2rem}
  .invito__testo p{font-size:1.0625rem}
  .invito__scritta{width:140px}

  .piede__griglia{grid-template-columns:minmax(0,1fr) auto;gap:1.2rem}
  .piede__logo{width:170px}
  .piede__menu{grid-column:1 / span 2;grid-row:2;justify-content:flex-start;gap:.8rem 0}
  .piede__menu ul{padding-inline:0 1.2rem;gap:.5rem 1.2rem}
  .piede__legale{border-left:0;padding-left:0}
  .piede__scritta{width:112px;grid-column:2;grid-row:1}
  .piede__logo{grid-column:1;grid-row:1}
  .piede__onda{width:78%;margin-right:0}
  .piede__fondo{flex-direction:column;gap:.35rem;padding-bottom:3.6rem}
}

@media (max-width:360px){
  .hero h1{font-size:2.2rem}
  .hero__azioni{flex-direction:column;align-items:flex-start}
  .hero__scritta-ulivi{margin-left:2.4rem}
  .hero__casa{right:6px}
  .hero__casa .scritta{width:100px}
}

/* ─── pagine di servizio (privacy, 404) ─── */
.pagina{max-width:760px;margin-inline:auto;padding:clamp(1.6rem, 4vw, 3.4rem) var(--gutter) clamp(2.4rem, 5vw, 4.4rem)}
.pagina h1{font-size:clamp(2.3rem, 1.2rem + 2.6vw, 3.4rem);line-height:1.05;margin-bottom:1rem}
.pagina h2{font-size:1.55rem;line-height:1.15;margin:2.2rem 0 .7rem}
.pagina p,.pagina li{font-size:1.0625rem;line-height:1.6}
.pagina p + p{margin-top:.8rem}
.pagina ul{list-style:disc;padding-left:1.3rem;margin:.6rem 0}
.pagina li + li{margin-top:.4rem}
.pagina__intro{font-size:1.15rem;color:var(--testo)}
.pagina .occhiello{font-size:.78rem;line-height:1.4}
.pagina__nota{margin-top:2.4rem;font-family:var(--sans);font-size:.8rem;color:var(--seppia)}
.pagina .bottone{margin-top:1.6rem}
.testata--semplice .testata__in{padding-left:var(--gutter)}
.testata--semplice .testata__bottone{display:inline-flex;margin-left:auto}
@media (max-width:760px){.testata--semplice .testata__bottone{font-size:.9rem;padding:.75em 1em}}

/* niente sbordi orizzontali: i rami decorativi escono dal bordo e si tagliano qui */
main,.piede{overflow-x:hidden;overflow-x:clip}

/* ═════════════ STEP 5-BIS · IL SITO VIVO ═════════════
   Pochi movimenti, ognuno con uno scopo: la prima schermata che entra, le sezioni che arrivano,
   le scritte a mano che si scrivono, i divisori che si tracciano, una profondità leggera.
   Solo transform, opacity e clip-path: l'impaginazione non si sposta mai. */
.riga-foto{display:contents}
.stampa{overflow:hidden}
.stampa img{transition:transform .9s cubic-bezier(.2,.65,.25,1)}
.scheda{transition:transform .35s ease, box-shadow .35s ease}
.bottone:active{transform:translateY(1px) scale(.985);box-shadow:0 4px 10px -8px rgba(120,50,25,.8)}
.menu ul a[aria-current="true"]::after{transform:scaleX(1)}
.testata{transition:background-color .3s ease, box-shadow .3s ease, transform .4s cubic-bezier(.3,.7,.2,1)}
.testata__logo img{transform-origin:left center;transition:transform .4s cubic-bezier(.3,.7,.2,1)}
.testata.e-scesa .testata__logo img{transform:scale(.84)}
.testata.nascosta{transform:translateY(-102%)}
@media (hover:hover){
  .stampa:hover img{transform:scale(1.035)}
  .scheda--pronta:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(60,40,20,.55)}
  .pregi li:hover img{transform:rotate(-6deg) scale(1.06)}
  .pregi li:first-child:hover img{transform:rotate(20deg) scale(1.06)}
}
.pregi img{transition:transform .5s cubic-bezier(.2,.65,.25,1)}

@media (prefers-reduced-motion:no-preference){
  /* la prima schermata */
  .hero .occhiello,.hero h1,.hero__sotto,.hero__azioni .bottone{animation:entra-su .9s cubic-bezier(.2,.65,.25,1) both}
  .hero h1{animation-delay:.08s}
  .hero__sotto{animation-delay:.2s}
  .hero__azioni .bottone{animation-delay:.32s}
  .hero__grande img{animation:assesta 1.8s cubic-bezier(.2,.65,.25,1) both}
  .hero__piccola{animation:entra-su 1s .4s cubic-bezier(.2,.65,.25,1) both}
  .hero [data-reveal="scrivi"]{animation:scrivi 1.5s .85s cubic-bezier(.5,.1,.25,1) both}
  .hero__rametto,.hero__casa-rametto{animation:appare 1s 1.2s ease both}
  .paesaggio img{animation:appare 1.4s .25s ease both}
  .ulivo-bordo{transform-origin:0 0;animation:appare 1.2s ease both, ondeggia 7s 1.2s ease-in-out infinite alternate}
  .invito__ramo--sx{animation:ondeggia 8s ease-in-out infinite alternate}
  .invito__ramo--dx{animation:ondeggia 9s -3s ease-in-out infinite alternate}
  .pregi li:nth-child(2) img{animation:gira 60s linear infinite}

  /* le sezioni che arrivano */
  html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.65,.25,1) var(--rit,0s), transform 1s cubic-bezier(.2,.65,.25,1) var(--rit,0s)}
  html.js .reveal.in{opacity:1;transform:none}
  html.js .stampa.reveal{transform:translateY(26px) scale(.985)}
  html.js .stampa.reveal.in{transform:none}
  /* le scritte a mano che si scrivono, i divisori che si tracciano */
  html.js main [data-reveal="scrivi"],html.js .piede [data-reveal="scrivi"]{clip-path:inset(-20% 100% -20% -10%);transition:clip-path 1.6s cubic-bezier(.5,.1,.25,1) .25s}
  html.js [data-reveal="traccia"]{clip-path:inset(-20% 100% -20% 0);transition:clip-path 1.8s cubic-bezier(.45,.1,.25,1)}
  html.js [data-reveal].in{clip-path:inset(-20% -10% -20% -10%)}
  /* il menu da telefono */
  .menu.aperto ul li{animation:entra-su .45s cubic-bezier(.2,.65,.25,1) both}
  .menu.aperto ul li:nth-child(2){animation-delay:.04s}
  .menu.aperto ul li:nth-child(3){animation-delay:.08s}
  .menu.aperto ul li:nth-child(4){animation-delay:.12s}
  .menu.aperto ul li:nth-child(5){animation-delay:.16s}
  .menu.aperto ul li:nth-child(6){animation-delay:.2s}
  .menu.aperto .menu__bottone{animation:entra-su .45s .24s cubic-bezier(.2,.65,.25,1) both}
}
[data-profondita]{translate:0 var(--sposta,0px)}
@keyframes entra-su{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes assesta{from{transform:scale(1.08)}to{transform:none}}
@keyframes appare{from{opacity:0}to{opacity:1}}
@keyframes scrivi{from{clip-path:inset(-20% 100% -20% -10%)}to{clip-path:inset(-20% -10% -20% -10%)}}
@keyframes ondeggia{from{rotate:-.7deg}to{rotate:.9deg}}
@keyframes gira{to{rotate:360deg}}
.hero__casa-rametto,.hero__rametto{animation-fill-mode:both}

/* da telefono le foto dell'appartamento scorrono col dito */
@media (max-width:760px){
  .riga-foto{display:flex;grid-column:1 / span 2;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 14px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .riga-foto::-webkit-scrollbar{display:none}
  .riga-foto .app-foto{flex:0 0 82%;scroll-snap-align:start;aspect-ratio:4/3}
  .riga-foto .app-foto--grande{aspect-ratio:4/3}
}

/* ═════════════ STEP 6 · LE SEZIONI DEL COPY, CON LE FORME DEL DESIGN ═════════════ */
.solo-telefono{display:none}
section[id]{scroll-margin-top:calc(var(--testata) + 8px)}

/* elenchi col rametto del kit */
.elenco{display:grid;gap:.7rem;margin:0 0 1.3rem}
.elenco li{position:relative;padding-left:1.9rem;font-size:1rem;line-height:1.45}
.elenco--foglie li::before{content:"";position:absolute;left:0;top:.08em;width:1.15rem;height:1.35rem;
  background:url("../img/icona-natura-ulivo.webp") center/contain no-repeat;transform:rotate(28deg)}
.elenco strong{font-weight:400;color:var(--inchiostro);font-style:italic}

/* 2 · l'appartamento */
.appartamenti__testa{align-items:flex-end}
.scheda--pronta .elenco{margin-bottom:1.2rem}
.scheda--pronta .elenco li{font-size:.98rem}

/* 3 · piscina: foto ai lati del testo */
.giornate__foto--sx{grid-column:1;grid-row:1}
.giornate__testo{grid-column:2;grid-row:1}
.giornate__foto--dx{grid-column:3;grid-row:1}

/* 4 · come prenotare */
.prenotare{position:relative;padding-block:clamp(.6rem, 1.4vw, 1.4rem) clamp(2.4rem, 4vw, 4rem)}
.prenotare__griglia{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(1.6rem, 4vw, 4.4rem);align-items:start}
.prenotare__testo{position:relative;padding-top:1rem;padding-left:clamp(0px, 1.4vw, 20px)}
.prenotare h2{font-size:clamp(2.2rem, 1rem + 2.5vw, 3.4rem);line-height:1.04;margin-bottom:1.6rem}
.passi{list-style:none;margin:0 0 1.6rem;padding:0;counter-reset:passo;display:grid;gap:1.15rem}
.passi li{counter-increment:passo;position:relative;padding-left:3.1rem;font-size:1.0625rem;line-height:1.45;min-height:2.2rem}
.passi li::before{content:counter(passo);position:absolute;left:0;top:-.28rem;width:2.2rem;height:2.2rem;border-radius:50%;
  border:1px solid var(--linea);display:grid;place-items:center;font-style:italic;font-size:1.25rem;color:var(--terracotta);background:var(--carta-chiara)}
.prenotare__nota{font-size:1rem;color:var(--seppia);border-left:2px solid var(--linea);padding-left:1rem;max-width:26em}
.prenotare__ramo{position:absolute;left:clamp(-60px, -3vw, -20px);bottom:-7rem;width:clamp(90px, 10vw, 150px);transform:rotate(12deg);opacity:.9;pointer-events:none}
.prenota{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.2rem, 2.4vw, 2.2rem);padding:clamp(1.2rem, 2vw, 2rem)}
.prenota:hover{transform:none}

.calendario__nome{font-size:1.45rem;line-height:1.15;margin-bottom:.7rem}
.calendario__testa{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.calendario__mese{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--terracotta-scuro)}
.calendario__freccia{width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);background:var(--carta-chiara);color:var(--terracotta);
  display:grid;place-items:center;cursor:pointer;transition:background-color .2s ease, border-color .2s ease, transform .2s ease}
.calendario__freccia .freccia{width:18px;height:9px}
.calendario__freccia--indietro .freccia{transform:scaleX(-1)}
.calendario__freccia:hover{background:var(--sabbia);border-color:var(--sabbia)}
.calendario__freccia:active{transform:scale(.94)}
.calendario__freccia:disabled{opacity:.35;cursor:default}
.calendario__giorni{display:grid;grid-template-columns:repeat(7, minmax(0,1fr));gap:3px}
.calendario__sett{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--seppia);padding:.25rem 0}
.giorno{aspect-ratio:1;min-height:34px;border:0;border-radius:6px;background:transparent;font-family:var(--serif);font-size:.95rem;color:var(--inchiostro);
  cursor:pointer;transition:background-color .15s ease, color .15s ease, transform .15s ease;position:relative}
.giorno:hover{background:var(--sabbia)}
.giorno:active{transform:scale(.92)}
.giorno[disabled]{cursor:default;color:rgba(38,41,46,.32);background:transparent;transform:none}
.giorno--occupato[disabled]{color:var(--terracotta-scuro);background:rgba(166,80,58,.12);text-decoration:line-through;text-decoration-color:rgba(147,63,39,.55)}
.giorno--tra{background:rgba(109,121,80,.16);border-radius:0}
.giorno--arrivo,.giorno--partenza{background:var(--oliva);color:#fff}
.giorno--arrivo:hover,.giorno--partenza:hover{background:var(--oliva)}
.giorno--oggi::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--terracotta)}
.calendario__legenda{display:flex;gap:1.2rem;margin-top:.7rem;font-family:var(--sans);font-size:.75rem;color:var(--testo)}
.calendario__legenda li{display:flex;align-items:center;gap:.45rem}
.pallino{width:12px;height:12px;border-radius:3px;display:inline-block}
.pallino--libero{background:var(--carta-chiara);border:1px solid var(--linea)}
.pallino--occupato{background:rgba(166,80,58,.22);border:1px solid rgba(147,63,39,.35)}

.modulo{display:flex;flex-direction:column;gap:.9rem}
.modulo__modo{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:var(--oliva);color:#fff;border-radius:4px;
  padding:.45rem .5rem .45rem .8rem;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.03em}
.modulo__modo[hidden]{display:none}
.modulo__modo button{background:none;border:0;color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;padding:.1rem .35rem}
.modulo__campi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem}
.campo{display:flex;flex-direction:column;gap:.3rem}
.campo span{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-scuro)}
.campo input,.campo select{width:100%;min-height:46px;font-family:var(--serif);font-size:1rem;color:var(--inchiostro);background:var(--carta-chiara);
  border:1px solid var(--linea);border-radius:4px;padding:.55rem .7rem;transition:border-color .2s ease, box-shadow .2s ease;-webkit-appearance:none;appearance:none}
.campo select{background-image:linear-gradient(45deg, transparent 50%, var(--terracotta) 50%), linear-gradient(135deg, var(--terracotta) 50%, transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(166,80,58,.15)}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:var(--terracotta-scuro);box-shadow:0 0 0 3px rgba(147,63,39,.14)}
.modulo__errori:empty{display:none}
.modulo__errore{font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--terracotta-scuro);background:rgba(166,80,58,.09);border-radius:4px;padding:.55rem .75rem}
.modulo__errore[hidden]{display:none}
.modulo .bottone--pieno{white-space:normal;text-align:center;line-height:1.25}
.modulo__nota{font-size:.92rem;line-height:1.45;color:var(--seppia)}

/* 5 · Lucera: niente pulsante, l'elenco dei monumenti */
.lucera__intro{margin-bottom:1.1rem}
.lucera__testo .elenco{margin-bottom:0}

/* 6 · nei dintorni */
.dintorni{position:relative;padding-top:clamp(1.6rem, 3.4vw, 3.4rem)}
.dintorni__testa{text-align:center;margin-bottom:clamp(1.2rem, 2vw, 1.8rem)}
.dintorni h2{font-size:clamp(1.9rem, 1rem + 1.7vw, 2.65rem);line-height:1.1;margin-bottom:.6rem}
.dintorni__testa p{font-size:1.0625rem;color:var(--testo)}
.dintorni__scheda{max-width:900px;margin-inline:auto;padding:clamp(.6rem, 1.4vw, 1.2rem) clamp(1.1rem, 2.4vw, 2.2rem);position:relative;z-index:1}
.dintorni__elenco li{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.9rem 0 .9rem 2rem;position:relative;border-bottom:1px solid rgba(218,204,185,.7)}
.dintorni__elenco li:last-child{border-bottom:0}
.dintorni__elenco li::before{content:"";position:absolute;left:0;top:50%;width:1.15rem;height:1.35rem;margin-top:-.7rem;
  background:url("../img/icona-natura-ulivo.webp") center/contain no-repeat;transform:rotate(28deg)}
.dintorni__luogo{font-size:1.0625rem;line-height:1.4}
.dintorni__tempo{flex:0 0 auto;font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--terracotta-scuro);
  background:var(--crema);border-radius:999px;padding:.4rem .75rem;white-space:nowrap}
.dintorni__scheda .scheda__foglia{right:-10px;bottom:-16px}
.paesaggio--basso{margin-top:clamp(-50px, -3vw, -20px)}
.paesaggio--basso img{height:clamp(90px, 10vw, 150px)}

/* 7 · soggiorni lunghi */
.lunghi{padding-block:clamp(1.4rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem)}
.lunghi__scheda{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(1.4rem, 3.4vw, 3.6rem);align-items:center;padding:clamp(1rem, 2vw, 1.8rem)}
.lunghi__scheda:hover{transform:none}
.lunghi__foto{aspect-ratio:4/3}
.lunghi__testo{padding-right:clamp(0px, 3vw, 40px)}
.lunghi h2{font-size:clamp(1.8rem, 1rem + 1.5vw, 2.5rem);line-height:1.1;margin-bottom:.9rem}
.lunghi__testo p{font-size:1.0625rem;line-height:1.45;margin-bottom:.7rem;max-width:30em}
.lunghi__testo .bottone{margin-top:.8rem}

/* 8 · chi siamo: la forma di «Sapori di famiglia» + le recensioni */
.sapori__griglia{grid-template-areas:"pane testo lato" "pane recensioni recensioni"}
.sapori__pane{grid-area:pane;align-self:center}
.sapori__testo{grid-area:testo}
.sapori__lato{grid-area:lato}
.sapori__testo p + p{margin-top:.7rem}
.recensioni{grid-area:recensioni;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px, 1.2vw, 18px)}
.recensione{margin:0;padding:1.1rem 1.3rem 1rem}
.recensione blockquote{margin:0 0 .5rem}
.recensione blockquote p{font-style:italic;font-size:1.18rem;line-height:1.35;color:var(--inchiostro)}
.recensione figcaption{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--seppia)}
.sapori h2{margin-bottom:.9rem}

/* 9 · domande frequenti */
.domande{position:relative;padding-block:clamp(1.6rem, 3.4vw, 3.4rem) clamp(1rem, 2vw, 2rem)}
.domande__in{position:relative;max-width:900px}
.domande h2{text-align:center;font-size:clamp(2rem, 1rem + 2vw, 3rem);line-height:1.06;margin-bottom:clamp(1.1rem, 2vw, 1.8rem)}
.domande__elenco{display:grid;gap:10px;position:relative;z-index:1}
.domanda{background:var(--carta-chiara);border:1px solid var(--linea);border-radius:6px;transition:background-color .25s ease, box-shadow .25s ease}
.domanda[open]{background:var(--crema);border-color:transparent;box-shadow:0 10px 30px -26px rgba(60,40,20,.5)}
.domanda summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;
  font-size:1.18rem;line-height:1.3;color:var(--inchiostro)}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary::after{content:"";flex:0 0 auto;width:20px;height:10px;background:var(--terracotta);
  -webkit-mask:url("../img/freccia.png") center/contain no-repeat;mask:url("../img/freccia.png") center/contain no-repeat;transform:rotate(90deg);transition:transform .3s ease}
.domanda[open] summary::after{transform:rotate(-90deg)}
.domanda summary:hover{color:var(--terracotta-scuro)}
.domanda p{padding:0 1.2rem 1.1rem;font-size:1.0625rem;line-height:1.5;max-width:44em}
.domande__ramo{position:absolute;right:clamp(-150px, -9vw, -40px);top:-1rem;width:clamp(90px, 10vw, 150px);transform:scaleX(-1) rotate(8deg);opacity:.9;pointer-events:none}

/* 10 · dove siamo: la fascia «Ci vediamo a Villa Lucia» */
.invito__griglia{align-items:center}
.invito__testo{text-align:left;max-width:36em}
.invito__testo p{font-size:1.0625rem;line-height:1.5;margin-bottom:1rem}
.invito h2{margin-bottom:.8rem}
.invito__elenco{margin-bottom:0}

/* footer coi testi di extra.md */
.piede__marchio{display:flex;flex-direction:column;gap:.5rem}
.piede__descrizione{font-size:.92rem;color:var(--seppia);max-width:17em;line-height:1.35}
.piede__fondo p a{color:inherit}

/* pulsante fisso di WhatsApp: compare dopo la prima schermata */
.wa-fisso{position:fixed;right:clamp(12px, 2vw, 28px);bottom:clamp(12px, 2vw, 26px);z-index:55;display:inline-flex;align-items:center;gap:.6em;
  background:var(--terracotta);color:#fff;text-decoration:none;font-family:var(--serif);font-size:1rem;line-height:1;padding:.85em 1.15em;border-radius:999px;
  box-shadow:0 12px 26px -12px rgba(120,50,25,.75);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.65,.25,1), visibility 0s linear .3s, background-color .2s ease}
.wa-fisso.visibile{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease, transform .35s cubic-bezier(.2,.65,.25,1), background-color .2s ease}
.wa-fisso:hover{background:var(--terracotta-scuro)}
.wa-fisso:active{transform:scale(.97)}

@media (max-width:1100px){
  .prenota{grid-template-columns:minmax(0,1fr)}
  .prenotare__griglia{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .sapori__griglia{grid-template-areas:"pane testo" "lato lato" "recensioni recensioni";grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

@media (max-width:760px){
  .solo-telefono{display:block}
  .riga-foto{grid-row:auto}
  .giornate__testo{grid-column:1 / span 2;grid-row:1}
  .giornate .riga-foto{grid-column:1 / span 2;grid-row:2}
  .riga-foto .giornate__foto{flex:0 0 82%;scroll-snap-align:start;aspect-ratio:4/3}
  .appartamenti h2{font-size:2rem}
  .scheda--presto .scheda__dato{font-size:.98rem}

  .prenotare__griglia{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .prenotare__testo{padding:0}
  .prenotare h2{font-size:2.2rem;margin-bottom:1.2rem}
  .passi li{font-size:1rem}
  .prenotare__ramo{display:none}
  .prenota{padding:1rem;margin-inline:-6px}
  .modulo__campi{gap:.7rem}

  .dintorni h2{font-size:2rem}
  .dintorni__elenco li{flex-direction:column;align-items:flex-start;gap:.45rem;padding:.85rem 0 .85rem 2rem}
  .dintorni__elenco li::before{top:1.05rem;margin-top:0}
  .dintorni__luogo{font-size:1rem}

  .lunghi__scheda{grid-template-columns:minmax(0,1fr);gap:1.1rem;padding:.8rem .8rem 1.3rem}
  .lunghi__testo{padding:0 .5rem}
  .lunghi h2{font-size:1.8rem}
  .lunghi__testo p{font-size:1rem}

  .sapori__griglia{grid-template-areas:"pane" "testo" "lato" "recensioni";grid-template-columns:minmax(0,1fr)}
  .sapori__pane,.sapori__testo,.sapori__lato{grid-column:auto}
  .recensioni{grid-template-columns:minmax(0,1fr)}
  .recensione blockquote p{font-size:1.08rem}

  .domande h2{font-size:2.1rem}
  .domanda summary{font-size:1.06rem;padding:.9rem 1rem}
  .domanda p{padding:0 1rem 1rem;font-size:1rem}
  .domande__ramo{display:none}

  .invito__testo{text-align:left}
  .invito__azione{align-self:stretch}
  .invito__azione .bottone{width:100%;justify-content:center}

  .piede__marchio{grid-column:1;grid-row:1}
  .piede__descrizione{font-size:.88rem}
  .wa-fisso{font-size:.92rem;padding:.8em 1em}
  .testata__bottone .freccia{display:none}
  .testata__bottone{font-size:.86rem;padding:.7em .85em}
  .testata__logo{width:128px}
}
@media (max-width:380px){
  .testata__bottone{display:none}
  .hamburger{margin-left:auto}
}

/* testata con sei voci: da 1280 px in riga */
.testata__in{padding-left:clamp(20px, calc((100vw - 1180px) * .5), 132px)}
.testata__logo{width:clamp(170px, 15vw, 232px)}
.menu ul{gap:clamp(.9rem, 1.45vw, 1.5rem)}
.menu ul a{font-size:.95rem;white-space:nowrap}
.testata__in{gap:1.5rem}
.hamburger{flex:0 0 44px}
@media (max-width:1279px){.testata__in{padding-left:var(--gutter)}}
.scheda--presto .scheda__dato{padding-right:1.6rem;font-size:.97rem}
.sapori__onda{margin-top:clamp(.6rem, 1.6vw, 1.6rem)}
@media (max-width:1279px){.testata__in{gap:1rem}}
@media (max-width:760px){
  .scheda--presto .scheda__dato{padding-right:.6rem}
  .testata__logo{width:128px}
  .testata__in{gap:.55rem}
}
@media (max-width:760px){.scheda--presto .scheda__foglia{display:none}}
/* nella riga che scorre col dito le foto ci sono già: niente entrata per quelle fuori schermo */
@media (max-width:760px){html.js .riga-foto .reveal{opacity:1;transform:none}}

/* ═════════════ RAMO DEL BORDO E COLONNA DEL TESTO ═════════════
   Il ramo resta grande come nel design; la colonna del testo parte dove finiscono le foglie
   (le foglie arrivano fino a circa il 90% della larghezza del ramo). Fra 1101 e 1279 px il ramo si stringe. */
:root{--ulivo:clamp(90px, 13.9vw, 200px)}
.ulivo-bordo{width:var(--ulivo)}
.hero{grid-template-columns:minmax(0,41fr) minmax(0,59fr)}
.hero__testo{padding-left:calc(var(--ulivo) * .92 + 16px)}
.hero h1{font-size:clamp(2.3rem, 1rem + 2.5vw, 3.25rem)}
@media (min-width:1101px) and (max-width:1279px){:root{--ulivo:118px}}
@media (max-width:1100px){:root{--ulivo:84px}.hero{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}}
@media (max-width:760px){:root{--ulivo:38px}.hero{grid-template-columns:minmax(0,1fr)}.hero__testo{padding-left:calc(var(--gutter) + 26px)}}

/* scheda «Prossimamente»: il rametto va nell'angolo in alto, accanto all'etichetta, fuori dal testo */
.scheda--presto .scheda__foglia{right:-4px;top:-14px;bottom:auto;width:clamp(46px, 4vw, 60px);transform:rotate(200deg)}
.scheda--presto .scheda__dato{padding-right:0}
@media (max-width:760px){.scheda--presto .scheda__foglia{display:block;width:48px}}
/* il ramo di «Come prenotare» accanto al titolo, nello spazio libero, lontano dal testo */
.prenotare__ramo{left:auto;right:0;top:-.6rem;bottom:auto;width:clamp(78px, 8vw, 118px);transform:scaleX(-1) rotate(-18deg)}

/* ═════════════ PIÙ RESPIRO (Domenico, 14/10: «il sito è un po' tanto pieno») ═════════════
   Margini verticali più generosi fra le sezioni e dentro le sezioni, a ogni larghezza. */
:root{--respiro:clamp(2.8rem, 5.6vw, 6rem)}
.onda{height:clamp(50px, 6vw, 92px);margin-block:clamp(1.4rem, 3vw, 3.2rem) clamp(.4rem, 1vw, 1rem)}
.onda--rametto{margin-top:clamp(1.8rem, 3.6vw, 3.8rem)}
.prenotare{padding-block:calc(var(--respiro) * .5) var(--respiro)}
.appartamenti{padding-top:calc(var(--respiro) * .45);padding-bottom:calc(var(--respiro) * .35)}
.giornate{padding-top:calc(var(--respiro) * .45);padding-bottom:calc(var(--respiro) * .5)}
.lucera{padding-block:calc(var(--respiro) * .8) calc(var(--respiro) * .6)}
.dintorni{padding-block:var(--respiro) calc(var(--respiro) * .6)}
.lunghi{padding-block:calc(var(--respiro) * .6) calc(var(--respiro) * .5)}
.sapori{padding-top:calc(var(--respiro) * .45)}
.sapori__onda{margin-top:var(--respiro)}
.domande{padding-block:calc(var(--respiro) * .8) calc(var(--respiro) * .4)}
.invito{padding-block:calc(var(--respiro) * .75) var(--respiro)}
.piede{padding-top:calc(var(--respiro) * .4)}

/* dentro le sezioni */
.hero__sotto{margin-bottom:.9rem}
.hero__sotto--breve{margin-bottom:1.9rem}
.prenotare h2{margin-bottom:2.1rem}
.passi{gap:1.5rem;margin-bottom:2.1rem}
.prenota{gap:clamp(1.6rem, 3.2vw, 3.2rem);padding:clamp(1.4rem, 2.6vw, 2.6rem)}
.calendario__nome{margin-bottom:1rem}
.modulo{gap:1.15rem}
.modulo__campi{gap:1rem}
.appartamenti__testa{margin-bottom:clamp(1.8rem, 3.4vw, 3.2rem)}
.appartamenti__griglia{gap:clamp(12px, 1.3vw, 20px) clamp(12px, 1.4vw, 22px)}
.schede{gap:clamp(12px, 1.3vw, 20px)}
.scheda{padding:clamp(1.3rem, 2vw, 1.9rem) clamp(1.3rem, 2vw, 1.9rem)}
.elenco{gap:.95rem}
.giornate h2{margin-bottom:1.3rem}
.giornate__testo p + p{margin-top:1rem}
.lineetta{margin:2.2rem auto 1.5rem}
.giornate__scritta{padding-left:0}
.lucera__griglia{gap:clamp(20px, 2.8vw, 44px)}
.lucera h2{margin-bottom:1.2rem}
.lucera__intro{margin-bottom:1.5rem}
.dintorni__testa{margin-bottom:clamp(1.6rem, 2.8vw, 2.6rem)}
.dintorni h2{margin-bottom:.9rem}
.dintorni__elenco li{padding-block:1.1rem}
.lunghi__testo p{margin-bottom:1rem}
.lunghi__testo .bottone{margin-top:1.1rem}
.lunghi h2{margin-bottom:1.2rem}
.sapori__griglia{row-gap:clamp(1.6rem, 3vw, 3rem)}
.sapori h2{margin-bottom:1.2rem}
.sapori__testo p + p{margin-top:1rem}
.domande h2{margin-bottom:clamp(1.6rem, 2.8vw, 2.6rem)}
.domande__elenco{gap:14px}
.invito h2{margin-bottom:1.1rem}
.invito__testo p{margin-bottom:1.3rem}
.piede__fondo{padding-top:1rem}

@media (max-width:760px){
  :root{--respiro:3rem}
  .onda{height:44px;margin-block:2rem .4rem}
  .appartamenti__griglia{gap:12px}
  .schede{margin-top:10px}
  .giornate__testo{padding-bottom:3.6rem}
  .sapori__griglia{row-gap:1.6rem}
  .lucera__griglia{gap:1.8rem}
  .prenota{padding:1.2rem}
  .invito{padding-top:5.6rem}
}

/* ═════════════ 14/10 · COPY NUOVO E PAGINA «LUCERA E DINTORNI» ═════════════ */
.intero-parola{white-space:nowrap}
/* scheda «Già disponibile» più larga: righe meno spezzate */
.appartamenti__griglia{grid-template-columns:minmax(0,56fr) minmax(0,37fr) minmax(0,37fr)}
.scheda--pronta .elenco li{font-size:.96rem}
.scheda--presto .scheda__dato + .scheda__dato{margin-top:.8rem}

/* prezzi per mese, sotto il calendario */
.prezzi{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--linea)}
.prezzi[hidden]{display:none}
.prezzi__titolo{font-size:1.25rem;line-height:1.2;margin-bottom:.4rem}
.prezzi__intro,.prezzi__nota{font-size:.92rem;line-height:1.45;color:var(--seppia)}
.prezzi__elenco{margin:.7rem 0;display:grid;gap:.35rem}
.prezzi__elenco li{display:flex;justify-content:space-between;gap:1rem;font-size:.98rem;border-bottom:1px dashed rgba(218,204,185,.8);padding-bottom:.35rem}
.prezzi__elenco li span:last-child{font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.04em;color:var(--terracotta-scuro);white-space:nowrap}

/* Lucera: i monumenti con la distanza in evidenza, due foto */
.monumenti{display:grid;gap:1.05rem;margin:0 0 1.4rem}
.monumenti li{position:relative;padding-left:1.9rem;line-height:1.4}
.monumenti li::before{content:"";position:absolute;left:0;top:.15em;width:1.15rem;height:1.35rem;background:url("../img/icona-natura-ulivo.webp") center/contain no-repeat;transform:rotate(28deg)}
.monumenti strong{display:block;font-weight:400;font-size:1.08rem;color:var(--inchiostro)}
.distanza{display:inline-block;margin:.3rem 0 .25rem;font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--terracotta-scuro);background:var(--crema);border-radius:999px;padding:.32rem .65rem;white-space:nowrap}
.monumenti__testo{display:block;font-size:.98rem;color:var(--testo)}
.lucera__dintorni{font-size:1rem;color:var(--seppia);margin-bottom:1.5rem}
.lucera__foto-gruppo{position:relative;padding-bottom:16%;align-self:center}
.lucera__foto-gruppo .lucera__foto{aspect-ratio:5/4}
.lucera__foto-piccola{position:absolute;left:-12%;bottom:0;width:50%;aspect-ratio:1200/932;z-index:2}
.lucera__foto-piccola img,.lucera__foto img{width:100%;height:100%;object-fit:cover}

/* crediti delle foto (testo piccolo, sopra la firma) */
/* i crediti stanno in un blocco subito sopra il footer (il footer è uguale su tutte le pagine, collaudo 14/10) */
.crediti{padding-block:clamp(1.6rem, 3vw, 2.6rem) .2rem;font-family:var(--sans);font-size:.7rem;line-height:1.5;color:var(--seppia)}
.crediti__titolo{font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem}
.crediti__elenco{display:flex;flex-wrap:wrap;gap:.15rem 1.4rem}
.crediti a{color:inherit;text-decoration:underline;text-underline-offset:2px}

@media (max-width:1100px){
  .appartamenti__griglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:760px){
  .lucera__foto-gruppo{padding-bottom:22%;margin-inline:calc(-1 * var(--gutter) + 8px)}
  .lucera__foto-piccola{left:4%;width:56%}
  .monumenti strong{font-size:1.02rem}
  .crediti__elenco{flex-direction:column}
}

/* ═════════════ PAGINA «LUCERA E DINTORNI»: solo i pezzi della landing (hero, passi, schede, riga di foto, monumenti,
   la scheda di «Soggiorni lunghi», l'invito di «Dove siamo»), con i ritocchi della pagina interna scritti sul body
   (.pagina-interna) e sugli id delle sezioni: nessuna classe nuova nell'HTML (collaudo 14/10, sito completo) ═════════════ */
.menu ul a[aria-current="page"]::after{transform:scaleX(1)}
.pagina-interna .hero h1{font-size:clamp(2.1rem, 1rem + 2vw, 2.95rem);line-height:1.08}
.pagina-interna .hero__azioni{margin-top:.6rem}
.pagina-interna .hero__scritta-ulivi{width:clamp(150px, 14vw, 210px)}
/* la foto piccola resta nella colonna delle foto, mai sopra il testo */
.pagina-interna .hero__piccola{left:3%;width:40%;bottom:-14%}

/* la storia: i passi di «Come prenotare», ognuno con la sua data */
#storia{padding-block:calc(var(--respiro) * .5) calc(var(--respiro) * .4)}
#storia .prenotare__griglia{grid-template-columns:minmax(0,68fr) minmax(0,32fr);align-items:center}
#storia .prenotare__testo{padding:0}
#storia h2{font-size:clamp(2rem, 1rem + 2vw, 3rem);line-height:1.06;margin-bottom:clamp(1.6rem, 2.6vw, 2.4rem)}
#storia .passi{margin-bottom:0}
#storia .passi li{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:1rem;align-items:baseline}
#storia .passi strong{font-weight:400;font-style:italic;font-size:1.22rem;line-height:1.2;color:var(--terracotta-scuro)}
#storia .lucera__lato .lucera__disegno{width:min(100%, 380px)}

/* i luoghi e le gite: le sezioni con lo stile di «Cosa vedere a Lucera» */
.pagina-interna .lucera h2{font-size:clamp(1.9rem, 1rem + 1.8vw, 2.75rem);line-height:1.08;margin-bottom:clamp(1.4rem, 2.4vw, 2.2rem)}
#castello,#chiese{padding-block:calc(var(--respiro) * .5)}
#musei{padding-block:var(--respiro) calc(var(--respiro) * .6)}
#gite{padding-block:calc(var(--respiro) * .4) 0}
#musei h2,#gite h2{text-align:center}

/* le schede dei luoghi in una riga di foto: 4 per riga da computer, 2 sotto i 1100 px, col dito da telefono */
.pagina-interna .riga-foto > .scheda{display:flex;flex-direction:column;padding:10px 10px 1.2rem}
.pagina-interna .riga-foto > .scheda > .app-foto{flex:none;aspect-ratio:4/3;margin:0 0 1rem}
.pagina-interna .riga-foto > .scheda > div.app-foto{background:var(--crema);border-radius:4px;display:grid;place-items:center}
.pagina-interna .riga-foto > .scheda > div.app-foto img{width:64px;height:64px;object-fit:contain;opacity:.9}
.pagina-interna .riga-foto > .scheda h3{font-size:1.24rem;line-height:1.25;margin-bottom:.55rem;padding-inline:.5rem}
.pagina-interna .riga-foto > .scheda h3 .distanza{margin:.35rem .2rem 0 0;vertical-align:middle}
.pagina-interna .riga-foto > .scheda p{font-size:.98rem;line-height:1.45;padding-inline:.5rem}
#gite .app-foto{position:relative;aspect-ratio:3/2}
#gite .app-foto figcaption{position:absolute;left:12px;bottom:12px;background:rgba(253,251,247,.94);color:var(--inchiostro);font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.35rem .6rem;border-radius:3px}
@media (min-width:761px){
  .pagina-interna .riga-foto{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:clamp(12px, 1.4vw, 22px)}
  #gite .riga-foto{grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(10px, 1.2vw, 18px);max-width:1100px;margin:0 auto clamp(1.6rem, 2.6vw, 2.4rem)}
}
@media (min-width:761px) and (max-width:1100px){
  .pagina-interna .riga-foto{grid-template-columns:repeat(2, minmax(0,1fr))}
}

/* musei, gite, natura: l'elenco dei monumenti della landing, una riga per luogo con la distanza in evidenza */
.pagina-interna .lucera > .contenitore > .scheda{max-width:900px;margin-inline:auto;padding:clamp(.6rem, 1.4vw, 1.2rem) clamp(1.1rem, 2.4vw, 2.2rem);position:relative;z-index:1}
#gite > .contenitore > .scheda{max-width:1100px}
.pagina-interna .scheda .monumenti{gap:0;margin:0}
.pagina-interna .scheda .monumenti li{padding:.9rem 0 .9rem 2rem;border-bottom:1px solid rgba(218,204,185,.7);font-size:1.0625rem;line-height:1.4}
.pagina-interna .scheda .monumenti li:last-child{border-bottom:0}
.pagina-interna .scheda .monumenti li::before{top:1.2rem}
.pagina-interna .scheda .monumenti strong{display:inline;font-size:inherit}
.pagina-interna .scheda .monumenti__testo{display:inline;font-size:inherit;color:inherit}
.pagina-interna .scheda .monumenti .distanza{margin:0 .25rem;vertical-align:.08em}
#natura{padding-block:calc(var(--respiro) * .7) calc(var(--respiro) * .4)}
#natura .monumenti li{padding-block:.8rem}

/* chiusura: l'invito di «Dove siamo», con la foto della villa al posto del pulsante */
#dormire .invito__griglia{justify-content:space-between;padding-left:clamp(120px, 15vw, 230px);padding-right:var(--gutter)}
#dormire .invito__testo .bottone{margin-top:.4rem}
#dormire .invito__griglia > .app-foto{flex:0 0 clamp(260px, 34vw, 480px);aspect-ratio:3/2}

@media (max-width:1100px){
  #storia .prenotare__griglia{grid-template-columns:minmax(0,1fr)}
  #storia .lucera__lato{display:none}
}
@media (max-width:760px){
  .pagina-interna .hero h1{font-size:2.05rem}
  .pagina-interna .hero__piccola{left:-4%;width:54%;bottom:-17%}
  #storia h2,.pagina-interna .lucera h2{font-size:1.95rem}
  #storia .passi li{grid-template-columns:minmax(0,1fr);gap:.15rem;padding-left:2.8rem}
  #storia .passi span{font-size:1rem}
  /* le schede e le foto scorrono col dito (la riga di foto della landing) */
  .pagina-interna .riga-foto > .scheda{flex:0 0 80%;scroll-snap-align:start}
  #gite .riga-foto .app-foto{flex:0 0 74%;aspect-ratio:3/2}
  html.js .pagina-interna .riga-foto .reveal{opacity:1;transform:none}
  .pagina-interna .lucera > .contenitore > .scheda{padding:.4rem .7rem}
  .pagina-interna .scheda .monumenti li{padding:.85rem 0 .85rem 1.65rem}
  .pagina-interna .scheda .monumenti li::before{width:1rem;height:1.2rem;top:1rem}
  .pagina-interna .scheda .monumenti strong,.pagina-interna .scheda .monumenti__testo{font-size:.95rem;line-height:1.42}
  .pagina-interna .scheda .monumenti .distanza{font-size:.62rem;padding:.26rem .5rem;letter-spacing:.06em;margin:0 .15rem}
  #natura .lunghi__scheda{padding:.7rem .7rem 1rem}
  #dormire .invito__griglia{padding-inline:var(--gutter)}
  #dormire .invito__griglia > .app-foto{flex:none;width:100%}
}
.lucera__foto-piccola{left:-5%;width:46%}
@media (max-width:760px){.lucera__foto-piccola{left:4%;width:56%}}
/* hero: il titolo resta nella sua colonna, lontano dalla foto */
.hero h1{margin-right:0;padding-right:.5rem}
/* crediti: la virgola dopo la licenza la mette il CSS (fuori dal link, non sottolineata) */
.credito__licenza::after{content:",";display:inline-block;text-decoration:none}

/* ── Pannello (step 6-ter): con più alloggi sul sito, la scelta «Quale appartamento?» sopra il calendario.
   Con un alloggio solo non c'è (la pagina resta quella del design). Forme e colori del design: le pastiglie come le
   etichette, il testo come gli occhielli del modulo. ── */
.prenota__scelta{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.1rem}
.prenota__scelta-titolo{flex:0 0 100%;font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-scuro);margin:0}
.prenota__alloggio{min-height:44px;padding:.55em 1em;border:1px solid var(--linea);border-radius:999px;background:var(--carta-chiara);
  font-family:var(--serif);font-size:1rem;color:var(--inchiostro);cursor:pointer;transition:background-color .2s ease, border-color .2s ease}
.prenota__alloggio:hover{border-color:var(--terracotta)}
.prenota__alloggio[aria-pressed="true"]{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
.prenota__alloggio:focus-visible{outline:3px solid rgba(166,80,58,.35);outline-offset:2px}
/* più alloggi in fila: la sezione dell'appartamento si ripete col suo id */
.appartamenti + .onda + .appartamenti{padding-top:calc(var(--respiro, 4rem) * .2)}
.appartamenti__griglia--senza-foto{grid-template-columns:minmax(0,1fr)}
.appartamenti__griglia--senza-foto .schede{grid-column:1;grid-row:auto;flex-direction:row;margin-left:0}
@media (max-width:760px){.appartamenti__griglia--senza-foto .schede{flex-direction:column}}
/* L'avviso in cima al sito (lo accende il pannello): i colori del design, una riga sopra la testata */
.avviso-sito{margin:0;padding:10px 16px;background:var(--oliva);color:#fff;text-align:center;font-family:var(--sans);font-weight:700;font-size:.95rem;line-height:1.4}
.avviso-sito a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* collaudo 14/10: la scritta a mano «Tra ulivi…» sotto il pulsante fino a 400 px (a 375-390 usciva a destra) */
@media (max-width:400px){
  .hero__azioni{flex-direction:column;align-items:flex-start}
  .hero__scritta-ulivi{margin-left:2.4rem}
}
/* il pulsante fisso di WhatsApp si toglie mentre si guarda il modulo (copriva la nota sotto il pulsante) */
.wa-fisso.vicino-al-modulo{opacity:0;visibility:hidden;transform:translateY(14px)}
/* ═════════════ 9-bis · A NORMA DI LEGGE (16/10/2026, 30-A-NORMA-DI-LEGGE) ═════════════
   La striscia di prima, quella con «Ho capito», non c'è più: la barra la mette il kit
   (/assets/thk/barra-cookie.js), coi suoi stili. Qui solo le righe legali, piccole e discrete, e le pagine legali. */
/* la frase unica delle foto migliorate, sotto la galleria dell'appartamento (riga intera sotto le foto) */
.nota-foto{grid-column:1 / 3;margin:.15rem 0 0;font-family:var(--sans);font-size:.78rem;line-height:1.45;color:var(--seppia);max-width:62em}
/* la riga della privacy sotto il pulsante del modulo, e il CIN accanto al calendario */
.modulo__privacy{margin-top:-.3rem;font-family:var(--sans);font-size:.78rem;line-height:1.45;color:var(--seppia)}
.modulo__privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.calendario__codici{margin-top:.9rem;font-family:var(--sans);font-size:.78rem;line-height:1.45;letter-spacing:.02em;color:var(--seppia);overflow-wrap:anywhere}
.calendario__condizioni{margin-top:.3rem;font-family:var(--sans);font-size:.78rem;line-height:1.45;color:var(--seppia)}
.calendario__condizioni a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* le pagine legali (privacy, cookie, note legali): il testo del modello, con la tabella degli strumenti */
.pagina--legale .legale__data{font-family:var(--sans);font-size:.85rem;color:var(--seppia)}
.pagina--legale .legale a{text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.pagina--legale .legale table{width:100%;border-collapse:collapse;margin:1rem 0 .6rem;font-size:.95rem;line-height:1.45}
.pagina--legale .legale th,.pagina--legale .legale td{text-align:left;vertical-align:top;padding:.6rem .55rem;border-bottom:1px solid var(--linea);overflow-wrap:break-word}
.pagina--legale .legale th:nth-child(2),.pagina--legale .legale td:nth-child(2){white-space:nowrap}
.pagina--legale .legale td:first-child{min-width:9em}
/* i passi della prenotazione (condizioni di prenotazione): un elenco numerato */
.pagina--legale .legale ol{list-style:decimal;padding-left:1.4rem;margin:.6rem 0}
.pagina--legale .legale ol li + li{margin-top:.4rem}
.pagina--legale .legale th{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--seppia);border-bottom-width:2px}
.pagina--legale .legale td:first-child{font-weight:600}
/* da telefono la tabella diventa una scheda per riga: il nome in grassetto, poi «Di chi», «A cosa serve», «Durata» */
@media (max-width:640px){
  .pagina--legale .legale thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pagina--legale .legale table,.pagina--legale .legale tbody,.pagina--legale .legale tr,.pagina--legale .legale td{display:block;width:100%}
  .pagina--legale .legale tr{padding:.75rem 0;border-bottom:1px solid var(--linea)}
  .pagina--legale .legale td{border:0;padding:.12rem 0}
  .pagina--legale .legale td[data-etichetta]::before{content:attr(data-etichetta) ": ";font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--seppia)}
}