/* ==========================================================================
   Natilla Guest House — "Notturno mediterraneo"
   Didone editoriale, ottone, luce di lampada.

   TEMI — il sito nasce notturno, ma la palette è tutta su token e si ribalta.
   · :root                    → tema scuro (predefinito)
   · prefers-color-scheme     → segue il sistema, se l'ospite non ha scelto
   · [data-theme="light|dark"]→ scelta esplicita dall'interruttore in nav

   Tre superfici, non una:
   · --bg      la superficie principale (notte, o crema)
   · --bg-alt  la superficie alternata (colazione, prenota) che tiene il ritmo
   · --on-media  testo sopra le fotografie: NON si ribalta mai, perché sotto
                 c'è sempre uno scatto scuro (hero, "in due", footer).
   ========================================================================== */

:root{
  /* --- costanti: valgono in tutti i temi --- */
  --night:          #0B1014;
  --on-media:       #EDE3D4;
  --on-media-rgb:   237,227,212;
  --accent-media:   #C9A063;   /* ottone leggibile sopra le foto */
  --ok:             #3F6B4B;

  --f-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --f-body:    "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1360px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------ tema scuro (predefinito) */
:root,
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:        #0B1014;
  --bg-rgb:    11,16,20;
  --bg-raise:  #101A21;

  --fg:        #EDE3D4;
  --fg-rgb:    237,227,212;
  --fg-dim:    rgba(237,227,212,.78);   /* 8.9:1 — AAA */
  --fg-faint:  rgba(237,227,212,.62);  /* 6.2:1 sul micro-testo */

  --bg-alt:    #F3EADC;
  --fg-alt:    #1A1410;
  --fg-alt-rgb:26,20,16;
  --fg-alt-dim:rgba(26,20,16,.8);      /* 9.0:1 sulla crema */

  --accent:      #C9A063;
  --accent-rgb:  201,160,99;
  --accent-alt:  #5C4316;         /* ottone sulla crema: 8.0:1 — AAA */
  --accent-hover:#DDB477;
  --btn-fg:      #14100A;

  --hot:      #96412B;            /* terracotta: 5.7:1 sulla crema, era 4.0 */
  --hot-rgb:  150,65,43;

  --map-sea-a: #16323F;
  --map-sea-b: #0D1C25;

  --grain-opacity: .055;
  --grain-blend: overlay;
}

/* ------------------------------------------------ tema chiaro */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;

    --bg:        #FBF8F3;
    --bg-rgb:    251,248,243;
    --bg-raise:  #F4EEE4;

    --fg:        #191310;
    --fg-rgb:    25,19,16;
    --fg-dim:    rgba(25,19,16,.8);      /* 9.1:1 — AAA */
    --fg-faint:  rgba(25,19,16,.66);     /* 5.7:1 sul micro-testo */

    --bg-alt:    #EFE7D9;
    --fg-alt:    #191310;
    --fg-alt-rgb:25,19,16;
    --fg-alt-dim:rgba(25,19,16,.82);

    --accent:      #5C4316;              /* 8.1:1 — AAA */
    --accent-rgb:  92,67,22;
    --accent-alt:  #4E3912;
    --accent-hover:#5E4416;
    --btn-fg:      #F7F2E8;

    --hot:      #96412B;
    --hot-rgb:  150,65,43;

    --map-sea-a: #CBDBE0;
    --map-sea-b: #B4C9D1;

    --grain-opacity: .035;
    --grain-blend: multiply;
  }
}

:root[data-theme="light"]{
  color-scheme: light;

  --bg:        #FBF8F3;
  --bg-rgb:    251,248,243;
  --bg-raise:  #F4EEE4;

  --fg:        #191310;
  --fg-rgb:    25,19,16;
  --fg-dim:    rgba(25,19,16,.8);      /* 9.1:1 — AAA */
  --fg-faint:  rgba(25,19,16,.66);     /* 5.7:1 sul micro-testo */

  --bg-alt:    #EFE7D9;
  --fg-alt:    #191310;
  --fg-alt-rgb:25,19,16;
  --fg-alt-dim:rgba(25,19,16,.82);

  --accent:      #5C4316;              /* 8.1:1 — AAA */
  --accent-rgb:  92,67,22;
  --accent-alt:  #4E3912;
  --accent-hover:#5E4416;
  --btn-fg:      #F7F2E8;

  --hot:      #96412B;
  --hot-rgb:  150,65,43;

  --map-sea-a: #CBDBE0;
  --map-sea-b: #B4C9D1;

  --grain-opacity: .035;
  --grain-blend: multiply;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(1.05rem,1rem + .3vw,1.2rem);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease), color .5s var(--ease);
}

img{ display:block; max-width:100%; height:auto; }

::selection{ background:var(--accent); color:var(--btn-fg); }

/* --------------------------------------------------- grana / atmosfera */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:var(--grain-opacity); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--accent); color:var(--btn-fg); padding:.75rem 1.25rem; font-weight:500;
}
.skip:focus{ left:1rem; top:1rem; }

/* --------------------------------------------------- tipografia base */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:400; margin:0; letter-spacing:-.015em; }
p{ margin:0; }
a{ color:inherit; }

.eyebrow{
  font-family:var(--f-body);
  font-size:.82rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-dim);
  margin:0 0 1.5rem;
}
.eyebrow--brass{ color:var(--accent); }

.h-display{
  font-size:clamp(2.4rem,1.4rem + 4.2vw,5rem);
  line-height:1.04;
}
.h-display em{
  font-style:italic;
  color:var(--accent);
}

.lede{
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem);
  line-height:1.7;
  color:var(--fg-dim);
  max-width:52ch;
}

.section{
  padding-inline:var(--pad);
  padding-block:clamp(5rem,10vw,10rem);
  max-width:var(--maxw);
  margin-inline:auto;
}
.section__head{ margin-bottom:clamp(3rem,6vw,6rem); }
.section__head--center{ text-align:center; }
.section__head--center .h-display{ margin-inline:auto; }
.section__head--center .lede{ margin:1.8rem auto 0; }

.br-md{ display:none; }
@media (min-width:800px){ .br-md{ display:inline; } }

/* --------------------------------------------------- bottoni */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-body); font-size:.78rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  padding:1.05rem 2.1rem;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  border-radius:2px;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--brass{
  background:var(--accent); color:var(--btn-fg); border-color:var(--accent);
}
.btn--brass:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn--ghost{
  border-color:rgba(var(--fg-rgb),.4); color:var(--fg);
}
.btn--ghost:hover{ border-color:var(--fg); background:rgba(var(--fg-rgb),.08); }
.btn--full{ width:100%; }
.btn:active{ transform:translateY(1px); }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.link-brass{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); text-decoration:none;
  padding-bottom:.35rem;
  border-bottom:1px solid rgba(var(--accent-rgb),.35);
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.link-brass span{ transition:transform .3s var(--ease); }
.link-brass:hover{ border-color:var(--accent); }
.link-brass:hover span{ transform:translateX(5px); }

/* --------------------------------------------------- nav
   Finché è trasparente galleggia sopra la foto dell'hero: usa i token
   "media". Quando diventa solida (superata l'hero) passa a quelli del tema. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  isolation:isolate;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.4rem var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease),
             border-color .5s var(--ease), color .5s var(--ease),
             backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;

  color:var(--on-media);
  --nav-accent:var(--accent-media);
  --nav-dim:rgba(var(--on-media-rgb),.7);
  --nav-hover:var(--on-media);
  --nav-line:rgba(var(--on-media-rgb),.25);
}
/* Finché galleggia sulla fotografia serve un fondo che la stacchi: senza,
   il marchio finisce dentro il titolo gigante dell'hero e non si legge. */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(6,9,12,.78), rgba(6,9,12,.42) 60%, transparent);
  transition:opacity .5s var(--ease);
}
.nav.is-solid::before{ opacity:0; }
.nav.is-solid{
  background:rgba(var(--bg-rgb),.85);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(var(--accent-rgb),.18);
  padding-block:.9rem;

  color:var(--fg);
  --nav-accent:var(--accent);
  --nav-dim:var(--fg-dim);
  --nav-hover:var(--fg);
  --nav-line:rgba(var(--fg-rgb),.25);
}
.nav__mark{ text-decoration:none; display:flex; align-items:baseline; gap:.6rem; }
.nav__n{
  font-family:var(--f-display); font-size:1.35rem; letter-spacing:.02em;
}
.nav__sub{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--nav-accent);
}
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.4rem); }
.nav__links a{
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--nav-dim);
  transition:color .3s var(--ease);
}
.nav__links a:hover{ color:var(--nav-hover); }
.nav__cta{
  color:var(--nav-accent) !important;
  border:1px solid rgba(var(--accent-rgb),.45);
  padding:.6rem 1.1rem; border-radius:2px;
  transition:background .3s var(--ease), border-color .3s var(--ease) !important;
}
.nav:not(.is-solid) .nav__cta{ border-color:rgba(var(--on-media-rgb),.4); }
.nav__cta:hover{ background:rgba(var(--accent-rgb),.14); }
@media (max-width:760px){
  .nav__links > a:not(.nav__cta){ display:none; }
}

/* interruttore del tema */
.theme{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem;
  background:transparent; border:1px solid var(--nav-line);
  border-radius:2px; cursor:pointer; color:var(--nav-dim);
  font-family:var(--f-body); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease);
  flex:none;
}
.theme:hover{ color:var(--nav-accent); border-color:var(--nav-accent); background:rgba(var(--accent-rgb),.1); }
.theme svg{ width:15px; height:15px; display:block; flex:none; }
/* l'etichetta dice cosa succede al click, non in che tema sei */
.theme__label::after{ content:attr(data-dark); }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme__label::after{ content:attr(data-light); }
}
:root[data-theme="light"] .theme__label::after{ content:attr(data-light); }
:root[data-theme="dark"] .theme__label::after{ content:attr(data-dark); }
@media (max-width:900px){
  .theme__label{ display:none; }
  .theme{ padding:.5rem .6rem; }
}
/* Scambio icone. Stato base = scuro: si mostra il sole (cosa ottieni cliccando).
   Ogni regola dichiara ENTRAMBE le icone, così non restano stati ambigui. */
.theme__sun{ display:block; }
.theme__moon{ display:none; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme__sun{ display:none; }
  :root:not([data-theme="dark"]) .theme__moon{ display:block; }
}
:root[data-theme="light"] .theme__sun{ display:none; }
:root[data-theme="light"] .theme__moon{ display:block; }
:root[data-theme="dark"] .theme__sun{ display:block; }
:root[data-theme="dark"] .theme__moon{ display:none; }

/* selettore di lingua */
.lang{ display:flex; align-items:center; gap:.5rem; }
.lang a{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:var(--nav-dim); opacity:.75;
  transition:color .3s var(--ease), opacity .3s var(--ease);
}
.lang a:hover{ color:var(--nav-hover); opacity:1; }
.lang a.is-on{ color:var(--nav-accent); opacity:1; }
.lang i{
  display:block; width:1px; height:9px;
  background:var(--nav-line);
}
@media (max-width:420px){
  .lang{ gap:.35rem; }
  .lang a{ font-size:.75rem; letter-spacing:.06em; }
}

/* --------------------------------------------------- hero (sempre su foto) */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(7rem,14vh,11rem) var(--pad) clamp(5rem,9vh,7rem);
  overflow:hidden;
  isolation:isolate;
  color:var(--on-media);
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media picture{ display:block; height:100%; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.16) translate3d(-1.5%,-1.5%,0); }
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 80% at 78% 34%, rgba(255,196,120,.16), transparent 55%),
    linear-gradient(to top, rgba(6,9,12,.94) 0%, rgba(6,9,12,.6) 34%, rgba(6,9,12,.28) 62%, rgba(6,9,12,.55) 100%);
}
.hero__inner{ max-width:var(--maxw); width:100%; margin-inline:auto; }
.hero .eyebrow{ color:rgba(var(--on-media-rgb),.75); }

.hero__title{
  font-size:clamp(3.6rem,1.2rem + 12vw,11rem);
  line-height:.86;
  letter-spacing:-.035em;
  margin:0 0 2rem;
  display:flex; flex-direction:column;
}
.hero__title span{ display:block; }
.hero__title em{
  display:block; font-style:italic; font-weight:400;
  font-size:.34em; letter-spacing:.06em;
  color:var(--accent-media);
  margin-left:.2em; margin-top:.35em;
}
.hero__rule{
  width:min(340px,44vw); height:1px;
  background:linear-gradient(to right,var(--accent-media),transparent);
  margin-bottom:2rem;
}
.hero__lede{
  max-width:46ch; color:rgba(var(--on-media-rgb),.86);
  font-size:clamp(1rem,.95rem + .45vw,1.28rem);
  text-shadow:0 1px 24px rgba(0,0,0,.5);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem; }
.hero .btn--brass{ background:var(--accent-media); border-color:var(--accent-media); color:#14100A; }
.hero .btn--brass:hover{ background:#DDB477; border-color:#DDB477; }
.hero .btn--ghost{ border-color:rgba(var(--on-media-rgb),.45); color:var(--on-media); }
.hero .btn--ghost:hover{ border-color:var(--on-media); background:rgba(var(--on-media-rgb),.1); }

.hero__foot{
  max-width:var(--maxw); width:100%; margin:clamp(2.5rem,6vh,5rem) auto 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(var(--on-media-rgb),.55);
}
.hero__scroll{ display:inline-flex; align-items:center; gap:.9rem; }
.hero__scroll i{
  display:block; width:1px; height:38px;
  background:linear-gradient(to bottom,var(--accent-media),transparent);
  animation:drip 2.4s var(--ease) infinite;
  transform-origin:top;
}
@keyframes drip{ 0%{transform:scaleY(.2);opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0} }
@media (max-width:700px){ .hero__meta{ display:none; } }

/* --------------------------------------------------- barra disponibilità
   Ancorata subito sotto l'hero; da lì in poi resta appiccicata in alto,
   sotto la nav, così la domanda "è libero?" non richiede mai di scorrere. */
.avail{
  position:sticky; top:0; z-index:90;
  padding-inline:var(--pad);
  /* risale sopra l'hero: la scheda galleggia sul bordo della fotografia */
  margin-top:clamp(-4.5rem,-6vw,-3rem);
  pointer-events:none;
}
.avail__inner{
  max-width:calc(var(--maxw) - 2rem); margin-inline:auto;
  pointer-events:auto;
  background:var(--bg-raise);
  border:1px solid rgba(var(--accent-rgb),.34);
  border-radius:3px;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.6);
  padding:1.15rem clamp(1.1rem,2.4vw,2rem);
  display:grid; gap:.9rem 1.6rem;
  grid-template-columns:1fr 1fr;
  align-items:end;
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
@media (min-width:900px){
  .avail__inner{ grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:2rem; }
}
/* una volta agganciata in alto perde il distacco e si stringe alla nav */
.avail.is-stuck{ margin-top:0; }
.avail.is-stuck .avail__inner{
  border-radius:0; border-inline-color:transparent;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.5);
  max-width:var(--maxw);
}
.avail__f{ display:grid; gap:.2rem; min-width:0; }
.avail__f label{
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.avail__f input,.avail__f select{
  font-family:var(--f-body); font-size:1.02rem; font-weight:400;
  color:var(--fg); background:transparent;
  border:0; border-bottom:1px solid rgba(var(--fg-rgb),.28);
  padding:.4rem .1rem; border-radius:0; width:100%;
  transition:border-color .3s var(--ease);
}
.avail__f input:focus,.avail__f select:focus{
  outline:none; border-bottom-color:var(--accent);
}
.avail .btn{ padding:.95rem 1.8rem; white-space:nowrap; }
.avail__cta{ grid-column:1 / -1; }
@media (min-width:900px){ .avail__cta{ grid-column:auto; } }

@media (prefers-reduced-motion:reduce){ .avail{ position:static; } }

/* --------------------------------------------------- manifesto */
.manifesto{ position:relative; }
.manifesto::before{
  content:""; position:absolute; left:var(--pad); top:clamp(5rem,10vw,10rem);
  width:1px; height:clamp(3rem,7vw,7rem);
  background:linear-gradient(to bottom,var(--accent),transparent);
}
.manifesto__text{
  font-size:clamp(1.55rem,1rem + 2.6vw,3.4rem);
  line-height:1.24; max-width:22ch;
  margin:0 0 clamp(3rem,7vw,7rem);
  letter-spacing:-.02em;
}
.manifesto__text em{ font-style:italic; color:var(--accent); }
.manifesto__cols{
  display:grid; gap:clamp(2rem,4vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid rgba(var(--fg-rgb),.12);
  padding-top:clamp(2rem,4vw,3.5rem);
}
.manifesto__cols h3{
  font-family:var(--f-body); font-size:.76rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
  margin-bottom:1rem;
}
.manifesto__cols p{ color:var(--fg-dim); font-size:1rem; }

/* --------------------------------------------------- marquee */
.marquee{
  overflow:hidden; white-space:nowrap;
  border-top:1px solid rgba(var(--accent-rgb),.24);
  border-bottom:1px solid rgba(var(--accent-rgb),.24);
  padding:1.4rem 0;
  background:linear-gradient(to right,rgba(var(--accent-rgb),.05),transparent,rgba(var(--accent-rgb),.05));
}
.marquee__track{
  display:inline-flex; align-items:center; gap:2.2rem;
  animation:slide 46s linear infinite;
}
.marquee span{
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.1rem,.9rem + .8vw,1.8rem);
  color:rgba(var(--fg-rgb),.72);
}
.marquee i{ color:var(--accent); font-style:normal; font-size:.8rem; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* --------------------------------------------------- appartamento */
.rooms{ padding-block-start:clamp(5rem,9vw,9rem); }

/* striscia riassuntiva sotto il titolo di sezione */
.flat-sum{
  list-style:none; padding:0;
  margin:clamp(-3rem,-5vw,-2rem) 0 clamp(3.5rem,7vw,7rem);
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.flat-sum li{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(var(--accent-rgb),.4);
  color:var(--accent);
  padding:.6rem 1.05rem; border-radius:2px;
}
.room{
  display:grid; gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
  margin-bottom:clamp(4rem,9vw,9rem);
}
.room:last-child{ margin-bottom:0; }
@media (min-width:900px){
  .room{ grid-template-columns:repeat(12,1fr); }
  .room--a .room__fig{ grid-column:1 / 8; }
  .room--a .room__body{ grid-column:8 / 13; }
  .room--b .room__fig{ grid-column:6 / 13; grid-row:1; }
  .room--b .room__body{ grid-column:1 / 6; grid-row:1; }
  .room--c .room__fig{ grid-column:3 / 10; }
  .room--c .room__body{ grid-column:10 / 13; }
}
.room__fig{
  margin:0; overflow:hidden; position:relative;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s var(--ease-out);
}
.room__fig::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(6,9,12,.45),transparent 55%);
  pointer-events:none;
}
.room__fig img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transform:scale(1.14);
  transition:transform 1.4s var(--ease-out);
}
.room.is-in .room__fig{ clip-path:inset(0 0 0 0); }
.room.is-in .room__fig img{ transform:scale(1); }
.room__fig:hover img{ transform:scale(1.05); }

.room__num{
  font-family:var(--f-display); font-size:.9rem;
  color:var(--accent); letter-spacing:.2em;
  display:block; margin-bottom:1rem;
}
.room__body h3{
  font-size:clamp(1.8rem,1.3rem + 1.6vw,2.9rem);
  font-style:italic; line-height:1.1; margin-bottom:1.2rem;
}
.room__body p{ color:var(--fg-dim); margin-bottom:1.6rem; }
.room__specs{
  list-style:none; margin:0 0 1.9rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.room__specs li{
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid rgba(var(--fg-rgb),.2);
  padding:.4rem .8rem; border-radius:2px;
  color:var(--fg-dim);
}

/* dotazioni dell'appartamento */
.amen{
  margin-top:clamp(3rem,6vw,5rem);
  border-top:1px solid rgba(var(--fg-rgb),.12);
  padding-top:clamp(2rem,4vw,3rem);
  display:grid; gap:1.3rem;
}
/* impilato: la nota, poi il titolo, poi la griglia delle dotazioni */
.amen{ grid-template-columns:1fr; }
.amen h3{
  font-family:var(--f-body); font-size:.82rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin:.8rem 0 .4rem;
}
.amen__note{
  font-size:1rem; color:var(--fg-dim);
  border-left:2px solid var(--accent); padding-left:1.2rem;
  max-width:62ch;
  margin-bottom:1rem;
}

/* --------------------------------------------------- a tavola */
.food__grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(clamp(240px,26vw,300px),1fr));
  background:rgba(var(--fg-rgb),.14);
  border:1px solid rgba(var(--fg-rgb),.14);
}
.food__item{
  background:var(--bg);
  padding:clamp(1.6rem,3vw,2.5rem);
  transition:background .45s var(--ease);
}
.food__item:hover{ background:var(--bg-raise); }
.food__when{
  display:block; margin-bottom:1rem;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
}
.food__item h3{
  font-style:italic; line-height:1.15;
  font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem);
  margin-bottom:.8rem;
}
.food__item p{ color:var(--fg-dim); font-size:.95rem; }
.food__foot{
  margin-top:clamp(2rem,4vw,3rem);
  font-size:.95rem; color:var(--fg-dim);
  border-left:1px solid var(--accent); padding-left:1.1rem;
  max-width:60ch;
}

/* --------------------------------------------------- colazione (alternata) */
.brk{
  background:var(--bg-alt); color:var(--fg-alt);
  max-width:none;
  display:grid; gap:clamp(2.5rem,5vw,5rem); align-items:center;
  padding-inline:var(--pad);
  transition:background .5s var(--ease), color .5s var(--ease);
}
@media (min-width:900px){
  .brk{ grid-template-columns:1fr 1fr; }
}
.brk .eyebrow--brass{ color:var(--accent-alt); }
.brk .h-display em{ color:var(--hot); }
.brk .lede{ color:var(--fg-alt-dim); margin-block:1.8rem 2.6rem; }
.brk__fig{ margin:0; overflow:hidden; box-shadow:0 30px 60px -30px rgba(var(--fg-alt-rgb),.5); }
.brk__fig img{ width:100%; aspect-ratio:5/4; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.brk__fig:hover img{ transform:scale(1.04); }
.brk__list{ margin:0; display:grid; gap:0; border-top:1px solid rgba(var(--fg-alt-rgb),.16); }
.brk__list > div{
  display:flex; gap:1.5rem; align-items:baseline;
  padding:1.05rem 0; border-bottom:1px solid rgba(var(--fg-alt-rgb),.12);
}
.brk__list dt{
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-alt); min-width:6.5rem;
}
.brk__list dd{ margin:0; font-size:1rem; }

/* --------------------------------------------------- bari a piedi */
.bari{ position:relative; }
.bari__grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
@media (min-width:1000px){ .bari__grid{ grid-template-columns:1.35fr 1fr; } }

.bari__map{
  border:1px solid rgba(var(--accent-rgb),.26);
  background:
    radial-gradient(80% 60% at 20% 90%, rgba(var(--accent-rgb),.08), transparent 60%),
    var(--bg-raise);
  padding:1rem 1rem .4rem;
}
.bari__map svg{ width:100%; height:auto; display:block; }
.bari__note{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-faint); padding:.6rem .4rem 1rem;
}

/* la mappa prende i colori dal tema, non dagli attributi dell'SVG */
.bari__map linearGradient#sea stop:first-child{ stop-color:var(--map-sea-a); }
.bari__map linearGradient#sea stop:last-child{ stop-color:var(--map-sea-b); }
.bari__map linearGradient#fade stop{ stop-color:var(--accent); }
.map-waves{ stroke:var(--accent); stroke-opacity:.2; }
.map-coast{ stroke:var(--accent); stroke-opacity:.55; }
.map-grid{ stroke:var(--fg); stroke-opacity:.11; }

.route{
  stroke-dashoffset:600;
  transition:stroke-dashoffset 2.6s var(--ease-out);
}
.bari__map.is-in .route{ stroke-dashoffset:0; }

.pin{ cursor:default; }
.pin__halo{
  fill:rgba(var(--accent-rgb),.16); stroke:rgba(var(--accent-rgb),.45); stroke-width:1;
  transform-box:fill-box; transform-origin:center;
  transition:transform .45s var(--ease), fill .45s var(--ease);
}
.pin__dot{ fill:var(--accent); transition:fill .3s var(--ease); }
.pin text{
  font-family:var(--f-body); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; fill:rgba(var(--fg-rgb),.6);
  text-anchor:middle; transition:fill .35s var(--ease);
}
.pin--home .pin__dot{ fill:var(--hot); }  /* segno grafico, non testo */
.pin--home .pin__halo{ fill:rgba(var(--hot-rgb),.18); stroke:rgba(var(--hot-rgb),.55); }
.pin--home text{ fill:var(--fg); font-weight:500; }
.pin.is-hot .pin__halo{ transform:scale(1.45); fill:rgba(var(--accent-rgb),.32); }
.pin.is-hot text{ fill:var(--fg); }

.bari__list{ list-style:none; margin:0; padding:0; counter-reset:b; }
.bari__list li{
  display:flex; gap:1.6rem; align-items:baseline;
  padding:1.35rem 1rem 1.35rem .4rem;
  border-bottom:1px solid rgba(var(--fg-rgb),.12);
  cursor:default;
  transition:background .35s var(--ease), padding-left .35s var(--ease);
}
.bari__list li:first-child{ border-top:1px solid rgba(var(--fg-rgb),.12); }
.bari__list li:hover{ background:rgba(var(--accent-rgb),.07); padding-left:1.1rem; }
.bari__min{
  font-family:var(--f-display); font-size:1.9rem; color:var(--accent);
  min-width:4.4rem; line-height:1;
}
.bari__min i{
  font-family:var(--f-body); font-style:normal; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; margin-left:.3rem;
  color:var(--fg-faint);
}
.bari__list h3{
  font-family:var(--f-body); font-size:.95rem; font-weight:500;
  letter-spacing:.04em; margin-bottom:.2rem;
}
.bari__list p{ font-size:.9rem; color:var(--fg-dim); }

/* --------------------------------------------------- in due (sempre su foto) */
.two{
  position:relative; min-height:min(88svh,760px);
  display:grid; place-items:center;
  padding:clamp(5rem,10vw,9rem) var(--pad);
  overflow:hidden; isolation:isolate;
  color:var(--on-media);
}
.two__media{ position:absolute; inset:0; z-index:-2; }
.two__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 62%;
}
.two__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(6,9,12,.72), rgba(6,9,12,.34) 60%, rgba(6,9,12,.8)),
    linear-gradient(to bottom, rgba(6,9,12,.55), transparent 30%, rgba(6,9,12,.7));
}
.two__quote{ margin:0; max-width:34ch; text-align:center; }
.two__quote p{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,1rem + 2vw,2.7rem);
  line-height:1.32; letter-spacing:-.015em;
  max-width:none;
  text-shadow:0 2px 30px rgba(0,0,0,.6);
}
.two__quote em{ font-style:italic; color:var(--accent-media); }
.two__quote cite{
  display:block; margin-top:2rem; font-style:normal;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(var(--on-media-rgb),.55);
}

/* --------------------------------------------------- galleria della casa reale */
.gallery .section__head .lede{ margin-top:1.8rem; }
.gallery__grid{
  columns:3;
  column-gap:clamp(.9rem,1.8vw,1.6rem);
}
.gallery__item{
  break-inside:avoid;
  margin:0 0 clamp(1.4rem,2.5vw,2.2rem);
}
.gallery__item img{
  width:100%;
  background:var(--bg-raise);
  transition:transform .8s var(--ease-out), filter .5s var(--ease);
}
.gallery__item:hover img{ transform:scale(1.012); }
.gallery__item figcaption{
  padding-top:.7rem;
  font-size:.78rem;
  line-height:1.45;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--fg-faint);
}
@media (max-width:900px){ .gallery__grid{ columns:2; } }
@media (max-width:560px){ .gallery__grid{ columns:1; } }

/* --------------------------------------------------- prenota (alternata) */
.book{
  background:var(--bg-alt); color:var(--fg-alt);
  max-width:none;
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
  transition:background .5s var(--ease), color .5s var(--ease);
}
@media (min-width:960px){ .book{ grid-template-columns:1fr 1fr; } }
.book .eyebrow--brass{ color:var(--accent-alt); }
.book .h-display em{ color:var(--hot); }
.book .lede{ color:var(--fg-alt-dim); margin-block:1.8rem 2.6rem; }

.book__contacts{ list-style:none; margin:0; padding:0; }
.book__contacts li{
  display:grid; gap:.15rem;
  padding:1rem 0; border-top:1px solid rgba(var(--fg-alt-rgb),.14);
}
.book__contacts span{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-alt);
}
.book__contacts a{
  text-decoration:none; font-size:1.02rem;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
  justify-self:start;
}
.book__contacts a:hover{ border-bottom-color:var(--hot); }
.book__contacts em{ font-style:italic; opacity:.5; font-size:.85em; }

.book__form{
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(var(--fg-alt-rgb),.12);
  padding:clamp(1.5rem,3vw,2.6rem);
}
.stay-calendar{
  grid-column:1 / -1;
  min-width:0;
  margin-bottom:.7rem;
  padding:clamp(1rem,2.2vw,1.5rem);
  border:1px solid rgba(var(--fg-alt-rgb),.14);
  background:rgba(255,255,255,.54);
  box-shadow:0 22px 50px -38px rgba(26,20,16,.55);
  color:var(--fg-alt);
}
.stay-calendar:focus-visible{ outline:3px solid rgba(var(--hot-rgb),.35); outline-offset:4px; }
.stay-calendar__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; margin-bottom:1.25rem;
}
.stay-calendar__head span{
  display:block; margin-bottom:.35rem;
  color:var(--hot); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.stay-calendar__head h3{
  margin:0; max-width:22ch;
  font-family:var(--f-display); font-size:clamp(1.35rem,1rem + 1vw,1.85rem);
  font-weight:500; font-style:italic; line-height:1.15;
}
.stay-calendar__head p{
  max-width:58ch; margin:.55rem 0 0;
  color:var(--fg-alt-dim); font-size:.82rem; line-height:1.55;
}
.stay-calendar__head nav{ flex:0 0 auto; display:flex; gap:.5rem; }
.stay-calendar__head button{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid rgba(var(--fg-alt-rgb),.2); border-radius:50%;
  color:var(--fg-alt); background:rgba(255,255,255,.6); cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.stay-calendar__head button:hover:not(:disabled){ border-color:var(--hot); color:var(--hot); background:#fff; }
.stay-calendar__head button:focus-visible{ outline:3px solid rgba(var(--hot-rgb),.3); outline-offset:2px; }
.stay-calendar__head button:disabled{ opacity:.35; cursor:not-allowed; }
.stay-calendar__head svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.stay-calendar__month h4{
  margin:0 0 .75rem; color:var(--accent-alt);
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.stay-calendar__weekdays,.stay-calendar__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.35rem; }
.stay-calendar__weekdays{ margin-bottom:.35rem; }
.stay-calendar__weekdays span{
  display:grid; place-items:center; min-width:0; min-height:24px;
  color:rgba(var(--fg-alt-rgb),.58); font-size:.68rem; font-weight:600; text-transform:uppercase;
}
.stay-calendar__grid > span{ min-width:0; }
.stay-calendar__day{
  position:relative; min-width:0; min-height:44px; display:grid; place-items:center;
  border:1px solid rgba(var(--fg-alt-rgb),.14); border-radius:3px;
  color:var(--fg-alt); background:rgba(255,255,255,.56); cursor:pointer;
  font:600 .82rem/1 var(--f-body); font-variant-numeric:tabular-nums;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  touch-action:manipulation;
}
/* Keep selected endpoints terracotta on hover: their numerals are white. */
.stay-calendar__day:hover:not(:disabled):not(.is-start):not(.is-end){ border-color:var(--accent-alt); background:#fff; }
.stay-calendar__day:focus-visible{ z-index:2; outline:3px solid rgba(var(--hot-rgb),.32); outline-offset:1px; }
.stay-calendar__day.is-occupied{
  border-color:rgba(var(--fg-alt-rgb),.08); color:rgba(var(--fg-alt-rgb),.38);
  background:repeating-linear-gradient(135deg,rgba(var(--fg-alt-rgb),.08) 0,rgba(var(--fg-alt-rgb),.08) 4px,rgba(255,255,255,.28) 4px,rgba(255,255,255,.28) 8px);
  text-decoration:line-through;
}
.stay-calendar__day.is-checkout{
  border-color:rgba(var(--hot-rgb),.42); color:var(--hot); background:rgba(var(--hot-rgb),.06);
  text-decoration:none;
}
.stay-calendar__day.is-checkout::after{
  content:"OUT"; position:absolute; right:2px; bottom:2px;
  font-size:.48rem; font-weight:700; letter-spacing:.04em;
}
.stay-calendar__day.is-range{ border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.18); text-decoration:none; }
.stay-calendar__day.is-start,.stay-calendar__day.is-end{ border-color:var(--hot); color:#fff; background:var(--hot); text-decoration:none; }
.stay-calendar__day:disabled:not(.is-checkout){ cursor:not-allowed; }
.stay-calendar.is-loading .stay-calendar__months{ opacity:.42; }
.stay-calendar__legend{
  display:flex; flex-wrap:wrap; gap:.65rem 1rem;
  margin-top:1rem; color:rgba(var(--fg-alt-rgb),.66); font-size:.72rem;
}
.stay-calendar__legend span{ display:flex; align-items:center; gap:.45rem; }
.stay-calendar__legend i{ width:12px; height:12px; border:1px solid rgba(var(--fg-alt-rgb),.24); background:rgba(255,255,255,.7); }
.stay-calendar__legend .is-occupied i{ background:repeating-linear-gradient(135deg,rgba(var(--fg-alt-rgb),.12) 0,rgba(var(--fg-alt-rgb),.12) 3px,transparent 3px,transparent 6px); }
.stay-calendar__legend .is-selected i{ border-color:var(--hot); background:var(--hot); }
.stay-calendar__status,.avail__status{
  margin:.85rem 0 0; color:var(--fg-alt-dim); font-size:.78rem; line-height:1.5;
}
.stay-calendar__status.is-ok,.avail__status.is-ok{ color:var(--ok); font-weight:600; }
.stay-calendar__status.is-error,.avail__status.is-error{ color:var(--hot); font-weight:600; }
.avail__status{ grid-column:1 / -1; margin:0; }
.field{ grid-column:1 / -1; display:grid; gap:.5rem; }
.field--half{ grid-column:span 1; }
@media (max-width:560px){ .field--half{ grid-column:1 / -1; } }
.field label{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-alt);
}
.field label em{ font-style:italic; text-transform:none; letter-spacing:.04em; opacity:.6; }
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:1.02rem; font-weight:400;
  color:var(--fg-alt);
  background:transparent;
  border:0; border-bottom:1px solid rgba(var(--fg-alt-rgb),.28);
  padding:.65rem .1rem; border-radius:0;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(var(--fg-alt-rgb),.4); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--hot);
  background:rgba(var(--hot-rgb),.05);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--hot); outline-offset:3px;
}
.field input[aria-invalid="true"]{ border-bottom-color:var(--hot); }
.form-trap{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.book__form .btn{ grid-column:1 / -1; margin-top:.6rem; }
.book__form .btn--brass{ background:var(--fg-alt); border-color:var(--fg-alt); color:var(--bg-alt); }
.book__form .btn--brass:hover{ background:var(--hot); border-color:var(--hot); }
.book__form .btn:disabled{ cursor:wait; opacity:.65; }
.book__status{
  grid-column:1 / -1; min-height:1.2rem;
  font-size:.85rem; color:var(--hot);
}
.book__status.is-ok{ color:var(--ok); }
.book__disclaimer{
  grid-column:1 / -1;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(var(--fg-alt-rgb),.45);
}

/* --------------------------------------------------- footer
   Resta notturno in tutti i temi: chiude la pagina come si chiude la sera. */
.foot{
  position:relative; overflow:hidden;
  background:var(--night); color:var(--on-media);
  padding:clamp(4rem,8vw,7rem) var(--pad) 2rem;
  border-top:1px solid rgba(201,160,99,.18);
}
.foot__word{
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(3.4rem,14vw,11rem); line-height:.86;
  color:rgba(201,160,99,.72);
  margin-bottom:clamp(2rem,5vw,4rem);
  user-select:none; letter-spacing:-.03em;
  display:flex; flex-direction:column;
}
.foot__word small{
  display:block;
  font-family:var(--f-body); font-style:normal;
  font-size:clamp(.85rem,2.2vw,1.5rem); font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(var(--on-media-rgb),.55);
  margin-top:.5em; margin-left:.35em;
}
.foot__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  padding-bottom:3rem;
}
.foot__grid h4{
  font-family:var(--f-body); font-size:.8rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-media);
  margin-bottom:.9rem;
}
.foot__grid p{ color:rgba(var(--on-media-rgb),.62); font-size:.95rem; line-height:1.8; }
.foot__bar{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  border-top:1px solid rgba(var(--on-media-rgb),.1); padding-top:1.5rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(var(--on-media-rgb),.4);
}

/* --------------------------------------------------- animazioni */
.rise{
  opacity:0; transform:translateY(26px);
  animation:rise .95s var(--ease-out) forwards;
  animation-delay:var(--d,0s);
}
@keyframes rise{ to{ opacity:1; transform:none; } }

[data-r]{
  opacity:0; transform:translateY(30px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
}
[data-r].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rise,[data-r]{ opacity:1; transform:none; }
  .room__fig{ clip-path:none; }
  .room__fig img{ transform:none; }
  .route{ stroke-dashoffset:0; }
  .marquee__track{ animation:none; }
  .hero__media img{ animation:none; transform:scale(1.06); }
}

/* codici obbligatori per gli affitti brevi (CIN/CIR) */
.foot__legal{
  max-width:var(--maxw); margin:0 auto 1.5rem;
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(var(--on-media-rgb),.5);
}
.foot__legal span:first-child{ color:var(--accent-media); }

.map-old-grid{ stroke:var(--accent); stroke-opacity:.28; }

/* dotazioni con icone */
.amen__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0 2.5rem;
  grid-template-columns:1fr;
}
@media (min-width:600px){ .amen__list{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .amen__list{ grid-template-columns:repeat(3,1fr); } }
.amen__list li{
  display:flex; align-items:center; gap:.85rem;
  font-size:1.02rem; color:var(--fg);
  border:0; border-bottom:1px solid rgba(var(--fg-rgb),.1);
  padding:.85rem 0; text-transform:none; letter-spacing:0;
  line-height:1.35;
}
.amen__list svg{
  width:24px; height:24px; flex:none; color:var(--accent);
}

/* --------------------------------------------------- foto dei luoghi
   Due scatti a chiusura della mappa. La licenza CC BY-SA impone che
   l'attribuzione resti visibile: è parte della didascalia, non una nota
   nascosta nel footer. */
.luoghi{
  display:grid; gap:clamp(1.2rem,2.5vw,2rem);
  margin-top:clamp(3rem,6vw,5rem);
}
@media (min-width:760px){ .luoghi{ grid-template-columns:1fr 1fr; } }
.luogo{ margin:0; }
.luogo img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border:1px solid rgba(var(--accent-rgb),.22);
  transition:transform 1.1s var(--ease-out);
}
.luogo:hover img{ transform:scale(1.02); }
.luogo figcaption{ padding-top:.9rem; display:grid; gap:.25rem; }
.luogo figcaption strong{
  font-family:var(--f-body); font-size:.95rem; font-weight:500;
  letter-spacing:.04em; color:var(--fg);
}
.luogo figcaption span{ font-size:.95rem; color:var(--fg-dim); }
.luogo figcaption small{
  margin-top:.3rem;
  font-size:.75rem; letter-spacing:.06em; color:var(--fg-faint);
}
.luogo figcaption a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.luogo figcaption a:hover{ color:var(--accent); }

/* --------------------------------------------------- WhatsApp fluttuante
   Verde ufficiale del marchio: qui è l'unico colore fuori palette, ma è
   esattamente ciò che lo rende riconoscibile a colpo d'occhio. */
.wa{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  z-index:95;
  width:3.4rem; height:3.4rem;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  border-radius:50%;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.45);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa svg{ width:60%; height:60%; }
.wa:hover{ transform:scale(1.07); box-shadow:0 14px 34px -8px rgba(0,0,0,.55); }
.wa:active{ transform:scale(.98); }
.wa:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){ .wa{ transition:none; } .wa:hover{ transform:none; } }

/* --------------------------------------------------- pagina legale */
.legal{ padding-top:clamp(8rem,16vh,12rem); max-width:78ch; }
.legal h1{ margin-bottom:1rem; }
.legal__upd{ font-size:.85rem; color:var(--fg-faint); margin-bottom:clamp(2.5rem,5vw,4rem); }
.legal h2{
  font-family:var(--f-body); font-size:.86rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin:clamp(2.2rem,4vw,3rem) 0 .8rem;
}
.legal p{ color:var(--fg-dim); margin-bottom:1rem; }
.legal__lead{
  font-size:1.1rem; color:var(--fg) !important;
  border-left:2px solid var(--accent); padding-left:1.2rem;
}
.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal em{ opacity:.7; }
.legal__back{ margin-top:clamp(3rem,6vw,4rem); }

/* --------------------------------------------------- ritocchi per schermi stretti
   L'SVG della mappa scala con la larghezza: a 375px le etichette da 12
   unità renderebbero a meno di 5px reali. Si ingrandiscono dentro il
   viewBox per compensare, e sotto una certa soglia la mappa lascia il posto
   al solo elenco dei tempi, che resta perfettamente leggibile. */
@media (max-width:900px){
  .pin text{ font-size:17px; }
  .pin--home text{ font-size:18px; }
}
@media (max-width:640px){
  .pin text{ font-size:22px; letter-spacing:.06em; }
  .pin--home text{ font-size:24px; }
  .pin__halo{ r:19; }
}
/* sotto i 520px la mappa diventa decorativa: i nomi restano nell'elenco */
@media (max-width:520px){
  .bari__map .pins text{ display:none; }
  .bari__map{ padding:.6rem .6rem .2rem; }
  .bari__note{ font-size:.8rem; }
}

/* WhatsApp: non deve coprire il pulsante di invio del modulo */
@media (max-width:560px){
  .wa{ width:3rem; height:3rem; right:.9rem; bottom:.9rem; }
  .book__form{ padding-bottom:4.5rem; }
  .stay-calendar{ margin-inline:-.35rem; padding:1rem .75rem; }
  .stay-calendar__head{ display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .stay-calendar__head p{ grid-column:1 / -1; font-size:.78rem; }
  .stay-calendar__head button{ width:44px; height:44px; }
  .stay-calendar__weekdays,.stay-calendar__grid{ gap:.2rem; }
  .stay-calendar__day{ min-height:44px; font-size:.78rem; }
  .stay-calendar__legend{ font-size:.68rem; }
}

/* la barra disponibilità su telefono: due campi per riga, bottone pieno */
@media (max-width:600px){
  .avail{ position:static; margin-top:-2rem; }
  .avail__inner{ padding:1rem; }
  .avail__f label{ font-size:.75rem; letter-spacing:.1em; }
}

/* le didascalie delle foto dei luoghi non devono spezzare l'attribuzione */
@media (max-width:400px){
  .luogo figcaption small{ font-size:.72rem; line-height:1.5; }
}

/* --------------------------------------------------- domande frequenti
   <details> nativi: funzionano senza JavaScript e restano leggibili dai
   motori e dalle AI anche quando sono chiusi. */
.faq__list{ border-top:1px solid rgba(var(--fg-rgb),.14); }
.faq__item{ border-bottom:1px solid rgba(var(--fg-rgb),.14); }
.faq__item summary{
  cursor:pointer; list-style:none;
  padding:1.4rem 2.5rem 1.4rem 0; position:relative;
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.15rem,1rem + .6vw,1.55rem); line-height:1.3;
  color:var(--fg);
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--accent); }
.faq__item summary::after{
  content:""; position:absolute; right:.4rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg); transform-origin:center;
  transition:transform .35s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq__item[open] summary{ color:var(--accent); }
.faq__item p{
  padding:0 2.5rem 1.6rem 0;
  color:var(--fg-dim); max-width:70ch;
}

/* Recovered mobile navigation from the approved real-photo version. */
@media (max-width:560px){
  .nav{ gap:.8rem; }
  .nav__links{ gap:.75rem; }
  .nav__cta{ display:none; }
}