/* ============ BRAND TOKENS (dal brand book) ============ */
:root {
  --yellow: #FFCC00;
  --green: #134A07;
  --green-dark: #0B2607;
  --white: #FFFFFF;
  --cream: #FBF7EA;
  --ink: #0B2607;
  --muted: #4A5A45;
  --line: rgba(19, 74, 7, 0.15);

  --font-display: 'Rufina', Georgia, serif;
  --font-body: 'Figtree', system-ui, sans-serif;

  --radius: 14px;
  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
/* Safari su iPhone a volte non taglia le decorazioni che escono dai bordi (sfondo in parallasse della
   prima sezione, prato del giardino) e allarga la pagina, lasciando una striscia bianca a destra.
   "clip" taglia tutto ciò che esce lateralmente senza creare un'area di scorrimento in più. */
html, body { overflow-x: clip; }   /* (per .hero e .garden-nature vedi in fondo al file) */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--green); }
h1 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.hidden { display: none; }
.small { font-size: .92rem; opacity: .85; }

.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green); margin-bottom: .9rem;
}
.eyebrow::before { content: ''; display: inline-block; width: 22px; height: 2px; background: var(--yellow); vertical-align: middle; margin-right: 10px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .9em 1.6em; border-radius: 999px; border: 2px solid transparent;
  font: 600 .95rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--yellow); color: var(--green-dark); }
.btn-primary:hover { background: #ffd83a; }
.btn-outline { border-color: var(--green); color: var(--green); background: transparent; }
.btn-outline:hover { background: var(--green); color: var(--white); }
.btn-ghost { border-color: rgba(255,255,255,.7); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: .7em 1.2em; font-size: .85rem; }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.actions.center { justify-content: center; }
.next { margin-top: 48px; text-align: center; }
.next-left { text-align: left; margin-top: 32px; }

/* ============ HEADER ============ */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; }
.header-inner {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 28px; height: 72px;
  transition: height .35s ease, margin .35s ease, padding .35s ease, border-radius .35s ease, max-width .35s ease;
}

/* Vetro stile Apple: compare dopo lo scroll come barra flottante.
   Sta su uno pseudo-elemento così il backdrop-filter non "intrappola" il menu mobile (position: fixed). */
.header-inner::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(255,255,255,.25),
    inset 1px 0 0 rgba(255,255,255,.3),
    inset -1px 0 0 rgba(255,255,255,.3),
    0 10px 36px rgba(11,38,7,.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);   /* Safari (iPhone/Mac): sfocatura più forte, non ha l'effetto vetro di Chrome */
  backdrop-filter: blur(6px) saturate(1.8);
  backdrop-filter: url(#glass) blur(2px) saturate(1.8) brightness(1.06);
  opacity: 0; transition: opacity .35s ease;
}
.scrolled .header-inner {
  height: 60px; margin-top: 12px; max-width: calc(var(--container) - 48px);
  width: calc(100% - 24px); padding: 0 16px 0 24px; border-radius: 999px;   /* a destra un po' d'aria dopo "Recensioni" */
}
.scrolled .header-inner::before { opacity: 1; }
/* Sopra le sezioni scure il vetro si scurisce leggermente */
.on-dark .header-inner::before {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 1px 0 0 rgba(255,255,255,.18),
    inset -1px 0 0 rgba(255,255,255,.18),
    0 10px 36px rgba(0,0,0,.25);
}

.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.logo { height: 32px; width: auto; }
.scrolled .logo { height: 28px; }
.logo-color { display: none; }
.scrolled:not(.on-dark) .logo-light { display: none; }
.scrolled:not(.on-dark) .logo-color { display: block; }
.main-nav { display: flex; gap: 22px; }
.main-nav a { text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--white); opacity: .9; -webkit-tap-highlight-color: transparent; }
.scrolled:not(.on-dark) .main-nav a { color: var(--green); }
/* voci del menu reattive: al passaggio del mouse una "pillola" di vetro chiaro, premendo si stringono
   un attimo (come i controlli Apple); il bottone giallo si solleva e si preme allo stesso modo */
@media (min-width: 981px) {
  .main-nav { gap: 4px; }
  .main-nav a:not(.nav-cta) {
    padding: 8px 12px; border-radius: 999px;
    transition: background-color .2s ease, opacity .2s ease, transform .18s cubic-bezier(.3, .7, .4, 1);
  }
  .main-nav a:not(.nav-cta):hover { opacity: 1; background: rgba(255,255,255,.16); }
  .scrolled:not(.on-dark) .main-nav a:not(.nav-cta):hover { background: rgba(19,74,7,.1); }
  .main-nav a:not(.nav-cta):active { transform: scale(.93); background: rgba(255,255,255,.26); }
  .scrolled:not(.on-dark) .main-nav a:not(.nav-cta):active { background: rgba(19,74,7,.15); }
  .main-nav a:not(.nav-cta):focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; opacity: 1; }
  .site-header .main-nav a.nav-cta { margin-right: 8px; transition: transform .18s cubic-bezier(.3, .7, .4, 1), box-shadow .2s ease; }
  .site-header .main-nav a.nav-cta:hover { transform: translateY(-1px); }
  .site-header .main-nav a.nav-cta:active { transform: scale(.95); }
  .main-nav a { white-space: nowrap; }   /* le voci non vanno mai a capo */
}
/* schermi medi (portatili piccoli, tablet in orizzontale): voci un po' più compatte, tutto su una riga */
@media (min-width: 981px) and (max-width: 1180px) {
  .header-inner { gap: 16px; }
  .main-nav a:not(.nav-cta) { padding: 8px 8px; font-size: .86rem; }
  .site-header .main-nav a.nav-cta { font-size: .8rem; padding: .7em 1em; margin-right: 4px; }
}

.main-nav { align-items: center; }
/* "Richiedi disponibilità" è la prima voce del menu, sempre come bottone giallo */
.site-header .main-nav a.nav-cta { color: var(--green-dark); opacity: 1; text-decoration: none; order: 0; font-weight: 700; } /* i link del menu sono a peso 500: il bottone no */
/* sulla prima sezione il bottone dell'header non c'è: ci arriva in volo quello della hero (script.js) */
@media (min-width: 981px) {
  .site-header .main-nav a.nav-cta { transition: opacity .25s ease, transform .18s cubic-bezier(.3, .7, .4, 1), box-shadow .2s ease; }
  .cta-in-hero .site-header .main-nav a.nav-cta { opacity: 0; pointer-events: none; }
}
.btn.cta-fly { transition: opacity .25s ease; }
.btn.cta-fly.is-handoff { opacity: 0; }
.btn.cta-fly {
  position: fixed; left: 0; top: 0; z-index: 60; margin: 0; padding: 0; box-sizing: border-box; transition: none;
  justify-content: center; white-space: nowrap; overflow: hidden; transform-origin: 0 0;
  will-change: transform;   /* stesso stile del bottone di partenza e di arrivo: cambiano solo posizione e misura */
}
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; height: 2px; background: var(--white); margin: 6px 0; }
.scrolled:not(.on-dark) .nav-toggle span { background: var(--green); }

/* ============ HERO ============ */
/* Contenuto centrato in verticale; il padding superiore compensa l'header fisso */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; color: var(--white); padding: 96px 0 48px; overflow: hidden; }
/* Livelli parallax: spostati verso il basso via JS mentre si scorre (vedi script.js) */
.hero { background: #8fc3f0; }
.hero-layer { position: absolute; inset: 0; will-change: transform; }
.hero-layer picture { display: block; height: 100%; }
.hero-layer img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,38,7,.55) 0%, rgba(11,38,7,.4) 45%, rgba(11,38,7,.3) 100%),
    linear-gradient(180deg, rgba(11,38,7,.15) 0%, rgba(11,38,7,0) 25%, rgba(11,38,7,0) 55%, rgba(11,38,7,.6) 100%);
}
.hero-content { position: relative; max-width: 900px; margin-left: max(0px, calc((100vw - var(--container)) / 2)); }
.hero h1 { color: var(--white); }
/* titolo su due righe (a capo dopo la virgola): la prima parte un po' più grande */
.hero h1 .title-lead, .hero h1 .title-rest { display: block; text-wrap: balance; } /* se non c'entra, ogni parte va a capo in modo equilibrato */
.hero h1 .title-lead { font-size: 1.12em; }
.hero .eyebrow { color: var(--yellow); }
.hero .lead {
  font-size: 1.2rem; max-width: 720px;
  text-wrap: pretty;   /* una frase per riga (a capo dopo ogni punto) e niente parole isolate in fondo */
  text-shadow: 0 1px 2px rgba(11,38,7,.6), 0 2px 14px rgba(11,38,7,.45); /* più leggibile sulla foto */
}
.chips { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Etichette info: vetro stile iPhone (sfocatura forte, colori saturi, riflessi sui bordi) */
.chips li {
  padding: 7px 15px; border-radius: 999px; font-size: .86rem; font-weight: 500;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),   /* luce sul bordo alto */
    inset 0 -1px 0 rgba(255,255,255,.12),  /* riflesso sul bordo basso */
    0 4px 14px rgba(11,38,7,.18);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  text-shadow: 0 1px 2px rgba(11,38,7,.25);
}

/* Pretitolo: scritta gialla con icona posizione */
.hero .eyebrow-pill {
  display: inline-flex; align-items: flex-start; gap: 8px; color: var(--yellow); line-height: 1.6;
  text-shadow: 0 1px 8px rgba(11,38,7,.55);
}
.hero .eyebrow-pill::before { content: none; }
/* simbolo della posizione centrato sulle maiuscole della prima riga (anche quando su telefono va a capo):
   in questo carattere il centro delle maiuscole coincide con il centro della riga (1.6em) */
.hero .eyebrow-pill .pin {
  width: 1.3em; height: 1.3em; margin-top: .15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 4px rgba(11,38,7,.55));
}

/* Titolo: due lucciole che volano intorno (movimento in script.js) */
.title-glow { position: relative; width: fit-content; max-width: 100%; }
.firefly {
  position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, #fffef2 0 30%, #fff0a0 55%, #ffd83d 100%);
  box-shadow:
    0 0 8px 3px rgba(255, 244, 170, 1),
    0 0 24px 9px rgba(255, 214, 40, .65),
    0 0 60px 22px rgba(255, 204, 0, .28);
}

/* Bottoni della prima sezione: più grandi, con icona, diversi tra loro e dal resto del sito */
.btn-hero { font-size: 1.05rem; padding: 1.05em 1.8em; gap: .6em; letter-spacing: .01em; }
/* grandezza unica per i bottoni principali di tutte le sezioni (stessa altezza con freccia o calendario) */
.btn.btn-hero { min-height: 3.58em; box-sizing: border-box; }
.btn-hero svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* stile "brillante" di tutti i bottoni che portano alla prenotazione (prima sezione, header, calendario,
   "Prenota il tuo soggiorno", bottone fisso su telefono), sempre con l'icona del calendario */
.btn-hero-primary svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-hero-primary {
  gap: .6em; font-weight: 700;   /* scritta e icona sempre in grassetto, anche nell'header */
  position: relative; overflow: hidden; color: var(--green-dark);
  background: linear-gradient(135deg, #FFE066 0%, #FFCC00 45%, #F2B600 100%);
  box-shadow: 0 10px 30px rgba(255,204,0,.45), 0 2px 0 rgba(11,38,7,.15), inset 0 1px 0 rgba(255,255,255,.7);
}
/* bottoni reattivi (tutti tranne "Entra in giardino", che ha la sua animazione di natura, e quello in volo):
   al passaggio si sollevano e crescono appena con un piccolo rimbalzo, premuti si schiacciano */
.btn:not(.btn-garden):not(.cta-fly):not(.nav-cta) {
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease,
              background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (hover: hover) {
  .btn:not(.btn-garden):not(.cta-fly):not(.nav-cta):hover { transform: translateY(-3px) scale(1.035); }
  .btn-outline:not(.btn-garden):hover { box-shadow: 0 10px 24px rgba(11,38,7,.18); }
  .btn-hero-glass:hover { box-shadow: 0 14px 30px rgba(11,38,7,.3); }
  .btn-primary:not(.btn-hero-primary):hover { box-shadow: 0 10px 24px rgba(255,204,0,.45); }
  .btn:hover .btn-arrow { background: rgba(255,255,255,.3); }
  .btn-outline:hover .btn-arrow { background: rgba(255,255,255,.22); }
}
.btn:not(.btn-garden):not(.cta-fly):not(.nav-cta):active { transform: translateY(0) scale(.96); transition-duration: .12s; }
.mini-cta { transition: background-color .2s, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.mini-cta:hover { transform: scale(1.06); }
.mini-cta:active { transform: scale(.94); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) {
  .btn:not(.btn-garden):not(.cta-fly):not(.nav-cta):hover, .btn:not(.btn-garden):not(.cta-fly):not(.nav-cta):active,
  .mini-cta:hover, .mini-cta:active { transform: none; }
}
.btn-hero-primary:hover { box-shadow: 0 14px 40px rgba(255,204,0,.6), 0 2px 0 rgba(11,38,7,.15), inset 0 1px 0 rgba(255,255,255,.7); }
/* Emoji nelle etichette e nelle destinazioni: su iPhone/Mac sono quelle Apple, altrove quelle del sistema */
.distances .emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  display: inline-block; width: 1.6em; font-style: normal;
}
.chips .emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 1.05em; line-height: 1; margin-right: .4em; text-shadow: none;
  display: inline-block; vertical-align: -.08em;
}

/* Fascio di luce sulle etichette: passa da un'etichetta all'altra come un'onda */
.chips li { position: relative; overflow: hidden; }
.chips li::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg);
  animation: chipShine 5s ease-in-out infinite;
  animation-delay: calc(2.4s + var(--c, 0) * 110ms); /* --c = posizione dell'etichetta */
}
@keyframes chipShine { 0%, 72% { left: -70%; } 100% { left: 140%; } }
/* etichette reattive, effetto "dock": quella sotto il mouse si ingrandisce, le altre della STESSA riga
   scivolano di lato per farle spazio (script.js, .dock-list), le due vicine crescono appena.
   Solo "scale" e "translate": l'impaginazione non cambia, quindi nessuna etichetta va a capo
   e il numero di righe resta sempre lo stesso. */
.chips li {
  transition: scale .4s cubic-bezier(.3, 1.35, .5, 1), translate .4s cubic-bezier(.2, .8, .2, 1),
              background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
@media (hover: hover) {
  .chips li:hover {
    scale: 1.14; z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.18));
    border-color: rgba(255,255,255,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px rgba(11,38,7,.3);
  }
  .chips li.is-near { scale: 1.05; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) { .chips li { transition: background-color .3s ease; } .chips li:hover, .chips li.is-near { scale: none; } }
/* stesso effetto "dock" sulle etichette di tutte le altre sezioni (giardino, piano terra, camere, bagni…) */
.features li {
  transition: scale .4s cubic-bezier(.3, 1.35, .5, 1), translate .4s cubic-bezier(.2, .8, .2, 1),
              background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
@media (hover: hover) {
  .features li:hover {
    scale: 1.14; z-index: 2; border-color: rgba(255,204,0,.75);
    box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(11,38,7,.16);
  }
  .section-green .features li:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.16));
    border-color: rgba(255,255,255,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px rgba(0,0,0,.28);
  }
  .features li.is-near { scale: 1.05; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) { .features li { transition: background-color .3s ease; } .features li:hover, .features li.is-near { scale: none; } }

/* stesso effetto "dock" sulle altre info del sito (script.js imposta --dock-grow / --dock-near):
   schede dei luoghi, codici CIN/CIR, elenchi di Info utili */
.distances li, .codes .code, .checklist li, .rules > div {
  position: relative;
  transition: scale .4s cubic-bezier(.3, 1.35, .5, 1), translate .4s cubic-bezier(.2, .8, .2, 1),
              background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.checklist li, .rules > div { transform-origin: 0 50%; border-radius: 10px; }   /* le righe crescono verso destra */
@media (hover: hover) {
  .distances li:hover, .codes .code:hover, .checklist li:hover, .rules > div:hover { scale: calc(1 + var(--dock-grow, .05)); z-index: 2; }
  .distances li.is-near, .codes .is-near, .checklist li.is-near, .rules > div.is-near { scale: calc(1 + var(--dock-near, 0)); z-index: 1; }
  .distances li:hover { border-color: rgba(255,204,0,.8); box-shadow: 0 12px 26px rgba(11,38,7,.12); }
  .codes .code:hover { border-color: var(--yellow); box-shadow: 0 0 24px rgba(255,204,0,.25); }
  .checklist li:hover, .rules > div:hover { background: rgba(255,204,0,.13); }
}
@media (prefers-reduced-motion: reduce) {
  .distances li, .codes .code, .checklist li, .rules > div { transition: background-color .3s ease; }
  .distances li:hover, .codes .code:hover, .checklist li:hover, .rules > div:hover, .dock-list > .is-near { scale: none; }
}
.btn-hero-glass {
  color: var(--green-dark); padding-right: .7em;
  background: var(--white);
  border: 2px solid var(--yellow);
  box-shadow: 0 8px 24px rgba(11,38,7,.25);
}
.btn-hero-glass:hover { background: var(--cream); }
.btn-hero-glass .btn-icon {
  width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--yellow); color: var(--green-dark);
  display: inline-grid; place-items: center; margin: -.5em 0;
}
.btn-hero-glass .btn-icon svg { width: 1.1em; height: 1.1em; }
/* la freccia scende in continuazione dentro il cerchio giallo, con un alone che pulsa: invita a scorrere */
.btn-hero-glass .btn-icon { position: relative; overflow: hidden; animation: cuePulse 2.4s ease-out infinite; }
.btn-hero-glass .btn-icon svg { animation: scrollCue 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes scrollCue {
  0%   { transform: translateY(-120%); opacity: 0; }
  30%  { transform: translateY(0);     opacity: 1; }
  65%  { transform: translateY(12%);   opacity: 1; }
  100% { transform: translateY(120%);  opacity: 0; }
}
/* stessa freccia animata su tutti i bottoni che portano più in basso */
.btn-arrow {
  position: relative; display: inline-grid; place-items: center; overflow: hidden; flex: none;
  width: 1.7em; height: 1.7em; margin: -.4em -.5em -.4em .15em; border-radius: 50%;
  background: rgba(19,74,7,.1);
}
.btn-primary .btn-arrow { background: rgba(255,255,255,.55); }
.btn-arrow svg {
  width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  animation: scrollCue 1.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.btn-outline:hover .btn-arrow, .btn-garden.blooming .btn-arrow { background: rgba(255,255,255,.2); }
@keyframes cuePulse {
  0%        { box-shadow: 0 0 0 0 rgba(255,204,0,.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(255,204,0,0); }
}

/* Tre foto piccole della casa, a ventaglio, solo grafiche (nessun link): al passaggio del mouse
   si aprono; premute fanno un piccolo salto e tornano com'erano (script.js).
   Su schermi grandi stanno a destra dei bottoni, altrimenti sotto. */
.hero-peek { display: flex; align-items: flex-end; margin-top: 30px; padding: 0 0 6px 4px; }
.peek {
  position: relative; display: block; flex: none; width: 34%; max-width: 150px; margin-left: -14px;
  padding: 0; border: 0; background: none; font: inherit; color: var(--white); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  rotate: var(--r); translate: var(--x, 0px) var(--y);
  /* movimenti lenti e morbidi (stessa curva delle gallerie) */
  transition: rotate .8s cubic-bezier(.45, .05, .15, 1), translate .8s cubic-bezier(.45, .05, .15, 1),
              scale .8s cubic-bezier(.45, .05, .15, 1), filter .6s ease, opacity .6s ease;
  animation: peekFloat 5s ease-in-out infinite alternate; animation-delay: calc(var(--p) * -1.7s);
}
.peek:first-child { margin-left: 0; }
/* ognuna si ingrandisce verso l'interno: le foto ai lati non escono dallo schermo */
.peek:nth-child(1) { --r: -6deg; --y: 4px; transform-origin: 0 100%; }
.peek:nth-child(2) { --r: 2deg; --y: -8px; z-index: 1; transform-origin: 50% 100%; }
.peek:nth-child(3) { --r: 8deg; --y: 2px; transform-origin: 100% 100%; }
.peek img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px;
  border: 3px solid var(--yellow);
  /* il secondo "anello" di ombra, enorme e trasparente, scurisce tutto intorno quando la foto è in primo piano */
  box-shadow: 0 14px 30px rgba(11,38,7,.45), 0 0 0 100vmax rgba(4, 14, 2, 0);
  transition: box-shadow .7s cubic-bezier(.45, .05, .15, 1);
}
.peek span {
  position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 999px;
  font: 600 .68rem/1 var(--font-body); letter-spacing: .02em;
  background: rgba(11,38,7,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.peek:nth-child(3) span { left: auto; right: 8px; } /* il lato sinistro è coperto dalla foto centrale */
@media (hover: hover) {
  .hero-peek:hover .peek { --r: 0deg; --y: 0px; }
  .hero-peek:hover .peek:nth-child(1) { --x: -22px; }
  .hero-peek:hover .peek:nth-child(3) { --x: 22px; }
  /* la foto sotto il mouse si avvicina, si raddrizza e tutto il resto si scurisce */
  .hero-peek:hover .peek:not(:hover) { filter: brightness(.7) saturate(.85); }
  .peek:hover { scale: 1.32; z-index: 4; --r: 0deg; animation-play-state: paused; }
  .hero-peek .peek:hover { z-index: 6; }   /* qualunque foto (anche quella in mezzo) passa sopra le altre due */
  .peek:hover img { box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 0 0 100vmax rgba(4, 14, 2, .5); }
}
.peek:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 16px; }
/* premuta: un piccolo "salto" in primo piano e torna subito com'era */
.peek.is-pop { z-index: 3; }
.peek.is-pop img { animation: peekPop .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes peekPop {
  0%, 100% { transform: none; }
  40%      { transform: scale(1.18) rotate(calc(-1 * var(--r))); box-shadow: 0 22px 44px rgba(11,38,7,.5); }
}
@keyframes peekFloat { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.peek.is-viewing { visibility: hidden; }

/* vista ingrandita delle foto della prima sezione: la foto vola dal riquadro al centro,
   lo sfondo si scurisce e si sfoca; si chiude con un clic ovunque, la X o Esc */
.peek-view { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.peek-view.is-open { visibility: visible; }
.pv-scrim {
  position: absolute; inset: 0; background: rgba(4, 12, 3, .72);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0; transition: opacity .7s cubic-bezier(.45, .05, .15, 1);
}
.peek-view.is-shown .pv-scrim { opacity: 1; }
/* carosello quadrato (formato fisso per tutte le foto) */
.pv-card {
  position: fixed; margin: 0; overflow: hidden; border-radius: 26px; background: #111;
  border: 3px solid var(--yellow); box-shadow: 0 0 0 4px rgba(255,204,0,.18), 0 0 46px 6px rgba(255,214,40,.25), 0 40px 90px rgba(0,0,0,.55);
}
.pv-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity .35s ease; }
.peek-view.is-ready .pv-still { opacity: 0; pointer-events: none; }
.pv-track {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; visibility: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.pv-track::-webkit-scrollbar { display: none; }
.peek-view.is-ready .pv-track { visibility: visible; }
.pv-slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.pv-slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.pv-prev, .pv-next { top: 50%; margin-top: -21px; z-index: 3; opacity: 0; transition: opacity .5s ease .1s, scale .3s cubic-bezier(.3, 1.4, .5, 1), background-color .2s ease; }
.pv-prev { left: 14px; }
.pv-next { right: 14px; }
.peek-view.is-ready .pv-prev, .peek-view.is-ready .pv-next { opacity: 1; }
.pv-below {
  position: fixed; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transition: opacity .5s ease;
}
.peek-view.is-shown .pv-below { opacity: 1; transition-delay: .45s; }
.pv-caption {
  padding: 8px 16px; border-radius: 999px;
  font: 600 .95rem/1 var(--font-body); color: var(--white); white-space: nowrap;
  background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.25);
}
.pv-dots { display: flex; gap: 7px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.1); }
.pv-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .35s cubic-bezier(.2, .8, .2, 1), background-color .3s ease; }
.pv-dots button.is-on { width: 22px; background: var(--yellow); }
@media (max-width: 600px) { .pv-dots { gap: 5px; } .pv-dots button { width: 6px; height: 6px; } .pv-dots button.is-on { width: 16px; } .pv-prev, .pv-next { width: 36px; height: 36px; margin-top: -18px; } .pv-prev { left: 8px; } .pv-next { right: 8px; } }
.pv-close {
  position: fixed; top: 20px; right: 20px; width: 46px; height: 46px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.35); color: var(--white); cursor: pointer;
  background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; rotate: -90deg; scale: .7;
  transition: opacity .5s ease, rotate .6s cubic-bezier(.45, .05, .15, 1), scale .6s cubic-bezier(.45, .05, .15, 1), background-color .2s ease;
}
.pv-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.peek-view.is-shown .pv-close { opacity: 1; rotate: 0deg; scale: 1; transition-delay: .35s, .35s, .35s, 0s; }
@media (hover: hover) { .pv-close:hover { background: rgba(255,255,255,.26); } }
.pv-close:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
/* schermi grandi: elenco verticale a destra, centrato in altezza sul testo, allineato al bordo del contenitore */
@media (min-width: 1240px) and (min-height: 720px) {
  .hero-peek {
    position: absolute; top: 50%; translate: 0 -50%; margin: 0; padding: 0;
    flex-direction: column; align-items: center; width: 200px;
    left: calc(min(100vw - 17px, var(--container)) - 24px - 200px);
  }
  .peek { width: 176px; max-width: none; margin: -18px 0 0; }
  .peek:first-child { margin-top: 0; }
  /* leggermente sfalsate a zig-zag; ognuna copre solo il bordo basso di quella sopra */
  .peek:nth-child(1) { --r: -5deg; --x: -10px; --y: 0px; }
  .peek:nth-child(2) { --r: 4deg;  --x: 12px;  --y: 0px; z-index: auto; transform-origin: 50% 50%; }
  .peek:nth-child(3) { --r: -3deg; --x: -6px;  --y: 0px; transform-origin: 50% 0; }
  .peek span, .peek:nth-child(3) span { top: 8px; bottom: auto; left: 8px; right: auto; } /* etichetta in alto: mai coperta */
}
@media (min-width: 1240px) and (min-height: 720px) and (hover: hover) {
  /* al passaggio del mouse l'elenco si apre in verticale e si raddrizza */
  .hero-peek:hover .peek:nth-child(1) { --x: 0px; --y: -14px; }
  .hero-peek:hover .peek:nth-child(2) { --x: 0px; }
  .hero-peek:hover .peek:nth-child(3) { --x: 0px; --y: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .peek, .peek.is-pop img { animation: none; transition: none; }
  .btn-hero-glass .btn-icon, .btn-hero-glass .btn-icon svg, .btn-arrow svg { animation: none; }
  .chips li::after { animation: none; display: none; }
  .firefly { display: none; }
}

/* Apparizione al caricamento: gli elementi salgono in dissolvenza, uno dopo l'altro.
   La scomparsa allo scroll è gestita in script.js sul contenitore .hero-content. */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.hero-content > * { will-change: opacity, transform; transform-origin: left center; }
.hero-layer { transform: scale(1.06); }
.hero-overlay { will-change: opacity; }
.hero-content > *:not(.chips), .chips li {
  opacity: 0;
  animation: heroIn .9s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(200ms + var(--i, 0) * 110ms);
}
.hero-content > .eyebrow { --i: 0; }
.hero-content > h1       { --i: 1; }
.hero-content > .lead    { --i: 2; }
.hero-content > .actions { --i: 5; }
.hero-content > .hero-peek { --i: 6; }
/* le etichette entrano a cascata, più ravvicinate */
.chips li { animation-duration: .6s; animation-delay: calc(560ms + var(--c, 0) * 45ms); }
/* entrata conclusa (classe aggiunta da script.js): da qui comanda lo scroll */
.hero-content > .entered { animation: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-content > *:not(.chips), .chips li { animation: none; opacity: 1; }
}

/* ============ COMPARSA / SCOMPARSA ALLO SCROLL ============ */
/* Elementi con data-reveal: entrano salendo e mettendosi a fuoco quando arrivano nello schermo,
   escono (verso l'alto o il basso, a seconda di dove escono) quando lo lasciano.
   --rd = ritardo per l'entrata a cascata. La classe .js-reveal è aggiunta da script.js:
   senza JavaScript (o con "riduci movimento") tutto resta semplicemente visibile. */
.js-reveal [data-reveal] {
  opacity: 0; transform: translate3d(0, 44px, 0) scale(.97);
  transition:
    opacity .7s cubic-bezier(.2, .7, .2, 1),
    transform .9s cubic-bezier(.2, .7, .2, 1),
    filter .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: 0ms; /* uscita immediata */
}
.js-reveal [data-reveal].is-out-top { transform: translate3d(0, -44px, 0) scale(.97); }
.js-reveal [data-reveal].in-view {
  opacity: 1; transform: none; filter: none;
  transition-delay: var(--rd, 0ms); /* entrata a cascata */
}

/* ============ ONDA TRA LE SEZIONI ============ */
/* Una fascia dello stesso sfondo della sezione, sopra il suo bordo, ritagliata a forma di arco
   dolce (la parte centrale di un'ellisse più larga dello schermo). Durante il passaggio dalla
   sezione precedente l'arco si alza e poi torna piatto (clip-path animato in script.js):
   lo sfondo non viene mai schiacciato o deformato. */
:root { --dome-h: 48px; --tile: 560px; }
.section-lift { position: relative; z-index: 2; }
.section-white { background: var(--white); }
.wave-dome {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: calc(var(--dome-h) + 1px);   /* 1px sotto il bordo: niente filo chiaro tra arco e sezione */
  background: inherit;
  pointer-events: none;
  clip-path: ellipse(54% 0% at 50% 100%);
}

/* ============ SEZIONE DISPONIBILITÀ: SFONDO CON LIMONI, FOGLIE E FIORI ============ */
/* bg-lemons.webp è un riquadro del motivo che si ripete senza giunture in entrambe le direzioni */
/* Fondo verde scuro pieno + motivo sopra al 20% (--pattern-opacity), così resta discreto */
.section-pattern { --pattern-opacity: .2; background: var(--green-dark); color: rgba(255,255,255,.88); }
.section-pattern::before,
.section-pattern .wave-dome::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url(assets/bg-lemons.webp) 0 0 / var(--tile) var(--tile) repeat;
  opacity: var(--pattern-opacity);
}
/* nell'arco il motivo prosegue allineato con quello della sezione */
.section-pattern .wave-dome::before { background-position: 0 calc(var(--dome-h) + 1px); }
.section-pattern > .container { position: relative; z-index: 1; }
.section-pattern .eyebrow { color: var(--yellow); }
.section-pattern h2 { color: var(--white); }

/* pannelli in vetro scuro */
.section-pattern .calendar,
.section-pattern .request-form {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: rgba(255,255,255,.88);
}

/* calendario */
.section-pattern .cal-nav { background: transparent; border-color: rgba(255,255,255,.22); color: var(--white); }
.section-pattern .cal-nav:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.section-pattern .cal-legend { color: rgba(255,255,255,.65); }
.section-pattern .lg-free { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
.section-pattern .lg-booked { background: repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 2px, transparent 2px 5px); }
.section-pattern .cal-title { color: var(--white); }
.section-pattern .cal-wd { color: rgba(255,255,255,.5); }
/* giorni prenotabili ben riconoscibili: riquadro chiaro con bordo, al passaggio diventano gialli;
   quelli non disponibili restano spenti */
.section-pattern .cal-day { background: rgba(255,255,255,.15); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.section-pattern .cal-day:not(:disabled) { cursor: pointer; }
.section-pattern .cal-day:hover:not(:disabled) {
  background: var(--yellow); color: var(--green-dark); box-shadow: 0 6px 14px rgba(0,0,0,.3);
  transform: translateY(-2px) scale(1.06);
}
.section-pattern .cal-day:hover:not(:disabled) .cal-price { color: var(--green-dark); }
.section-pattern .cal-price { color: var(--yellow); }
.section-pattern .cal-day.is-past { background: transparent; box-shadow: none; color: rgba(255,255,255,.2); }
.section-pattern .cal-day.is-booked { background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 3px, transparent 3px 6px); box-shadow: none; color: rgba(255,255,255,.28); }
.section-pattern .cal-day.is-unavailable { box-shadow: none; }
/* scegliendo la partenza: i giorni possibili hanno il bordo giallo */
.section-pattern .cal-day.is-checkout-option:not(.is-checkout) { box-shadow: inset 0 0 0 1.5px rgba(255,204,0,.8); }
.section-pattern .cal-day.is-range { background: rgba(255,204,0,.25); }
.section-pattern .cal-day.is-checkin, .section-pattern .cal-day.is-checkout { background: var(--yellow); color: var(--green-dark); }
.section-pattern .cal-summary { border-color: rgba(255,255,255,.12); }
.section-pattern .cal-hint, .section-pattern .cal-dates, .section-pattern .cal-note,
.section-pattern .cal-total strong small, .section-pattern .cal-reset { color: rgba(255,255,255,.65); }
.section-pattern .cal-hint strong, .section-pattern .cal-total strong { color: var(--yellow); }
.section-pattern .cal-msg { color: #ffd98a; }

/* modulo */
.section-pattern .request-form h3 { color: var(--white); }
.section-pattern .request-form label { color: rgba(255,204,0,.9); }
.section-pattern .request-form input,
.section-pattern .request-form select,
.section-pattern .request-form textarea {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: var(--white);
  color-scheme: dark; /* selettore date e menu a tendina scuri */
}
.section-pattern .request-form input:focus,
.section-pattern .request-form select:focus,
.section-pattern .request-form textarea:focus { border-color: var(--yellow); }
.section-pattern .form-note { color: rgba(255,255,255,.55); }

/* ---- Menu a tendina personalizzati (Ospiti, Animali) ---- */
.field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.field-label { font-size: .82rem; font-weight: 600; color: rgba(255,204,0,.9); }
/* controlli nativi nascosti (sono quelli inviati) ma sovrapposti al riquadro visibile:
   se un campo obbligatorio è vuoto, il fumetto del browser compare proprio lì */
.native-select, .native-date {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46px; padding: 0; border: 0;
  opacity: 0; pointer-events: none;
}
.cselect-value.is-placeholder, .date-value.is-placeholder { color: rgba(255,255,255,.5); }
.cselect-list li.is-placeholder { display: none; }   /* "Scegli un'opzione" resta solo come scritta nel riquadro */
/* ---- Errori del modulo: campo rosso + fumetto sul primo errore (script.js) ---- */
.request-form { --err: #FF5A4E; }
.request-form label, .request-form .field { position: relative; }
.request-form label.is-error > input, .request-form label.is-error > textarea,
.request-form .field.is-error .cselect-btn, .request-form .field.is-error .date-btn {
  border-color: var(--err) !important; outline: 2px solid var(--err) !important; outline-offset: 0;
  box-shadow: 0 0 0 5px rgba(255,90,78,.18) !important;
}
.section-pattern .request-form label.is-error, .request-form .field.is-error .field-label { color: #FF8A80; }
.request-form .field.is-error .date-icon, .request-form .field.is-error .cselect-chevron { stroke: #FF8A80; }
.form-error {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 30;
  display: flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 9px 14px 9px 10px; border-radius: 12px;
  background: linear-gradient(180deg, #FF6A5E, #E5463B); color: #fff;
  font: 600 .86rem/1.25 var(--font-body); letter-spacing: .005em; text-transform: none;
  box-shadow: 0 12px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
  opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: 18px 0; pointer-events: none;
}
.form-error.is-visible { animation: errPop .4s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.form-error::before { /* punta del fumetto */
  content: ''; position: absolute; left: 16px; top: -5px; width: 11px; height: 11px;
  background: #FF6A5E; transform: rotate(45deg); border-radius: 2px;
}
.form-error svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; position: relative; }
@keyframes errPop { to { opacity: 1; transform: none; } }
.request-form .shake > input, .request-form .shake > textarea,
.request-form .shake .cselect-btn, .request-form .shake .date-btn { animation: errShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes errShake {
  15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(4px); }
  45% { transform: translateX(-5px); } 60% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .form-error.is-visible { animation: none; opacity: 1; transform: none; }
  .request-form .shake > input, .request-form .shake > textarea, .request-form .shake .cselect-btn, .request-form .shake .date-btn { animation: none; }
}
.label-opt { font-weight: 400; color: rgba(255,255,255,.5); }
.section-pattern .request-form textarea::placeholder { color: rgba(255,255,255,.4); }

/* ---- Campi data con calendario a comparsa (calendar.js) ---- */
.date-btn .date-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--yellow); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.field-date.is-open .date-btn { outline: 2px solid var(--yellow); border-color: var(--yellow); }
.datepop {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 40;
  width: 316px; max-width: calc(100vw - 40px); padding: 14px 14px 12px;
  background: rgba(12, 44, 9, .97); border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  box-shadow: 0 22px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .3, 1);
}
.field-date[data-date="partenza"] .datepop { left: auto; right: 0; transform-origin: top right; }
.field-date.is-open .datepop { opacity: 1; transform: none; pointer-events: auto; }
.datepop .cal-title { font-size: 1.02rem; margin: 4px 0 12px; }
.datepop .cal-nav { position: absolute; top: 12px; width: 32px; height: 32px; font-size: 1.15rem; }
.datepop-prev { left: 12px; } .datepop-next { right: 12px; }
.datepop .cal-grid { gap: 4px; }
.datepop .cal-day { aspect-ratio: 1; border-radius: 9px; font-size: .85rem; }
.datepop .cal-price { font-size: .56rem; }
.datepop-hint { margin: 10px 0 0; text-align: center; font-size: .8rem; color: rgba(255,255,255,.6); }
.datepop-hint strong { color: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .datepop { transition: none; } }
.cselect { position: relative; }
.cselect-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 400 1rem var(--font-body); color: var(--white); text-align: left; cursor: pointer;
  padding: 11px 12px; border-radius: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  transition: border-color .2s, background .2s;
  position: relative; z-index: 1;
}
.cselect-btn:hover { background: rgba(255,255,255,.11); }
.cselect-btn:focus-visible, .cselect.is-open .cselect-btn { outline: 2px solid var(--yellow); border-color: var(--yellow); }
.cselect-chevron { width: 18px; height: 18px; fill: none; stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; flex: none; }
.cselect.is-open .cselect-chevron { transform: rotate(180deg); }
.cselect-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  margin: 0; padding: 6px; list-style: none; max-height: 264px; overflow-y: auto;
  background: rgba(12, 44, 9, .96); border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center; pointer-events: none;
  transition: opacity .18s ease, transform .2s cubic-bezier(.2, .8, .3, 1);
  outline: none;
}
.cselect.is-open .cselect-list { opacity: 1; transform: none; pointer-events: auto; }
.cselect-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 9px; color: rgba(255,255,255,.88); cursor: pointer; font-size: .95rem;
}
.cselect-list li.is-active { background: rgba(255,204,0,.16); color: var(--white); }
.cselect-list li[aria-selected="true"] { color: var(--yellow); font-weight: 600; }
.cselect-list li[aria-selected="true"]::after {
  content: ''; width: 14px; height: 14px; flex: none;
  background: var(--yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17 19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17 19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cselect-list::-webkit-scrollbar { width: 6px; }
.cselect-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

/* ---- Orecchie di cane: spuntano da DIETRO il riquadro "Animali" quando si sceglie Sì ----
   .dog-ears è una "finestra" che finisce esattamente sul bordo superiore del riquadro e taglia
   tutto ciò che sta sotto: le orecchie salgono da lì come se fossero nascoste dietro il bottone. */
.dog-ears {
  position: absolute; left: 0; right: 0; bottom: 100%; height: 60px;
  overflow: hidden; pointer-events: none;
}
.dog-ear {
  position: absolute; bottom: -14px; width: 36px; height: 46px; overflow: visible;
  transform-origin: 50% 100%;
  transform: translateY(105%);                 /* nascoste del tutto dietro il riquadro */
  transition: transform .5s cubic-bezier(.3, 1.5, .5, 1);
}
.dog-ear .ear-out { fill: #a0601f; stroke: #5e3812; stroke-width: 1.6; }  /* pelo marrone caldo */
.dog-ear .ear-in { fill: #e89a8f; opacity: .9; }                           /* interno rosa */
.dog-ear-l { left: 46%; rotate: -16deg; }   /* lontane dall'etichetta "Animali" a sinistra */
.dog-ear-r { right: 12%; rotate: 16deg; scale: -1 1; }   /* specchiata */
.cselect.has-dog .dog-ear { transform: none; animation: earWiggle 2.8s ease-in-out .5s infinite; }
.cselect.has-dog .dog-ear-r { transition-delay: .08s; animation-delay: .7s; }
@keyframes earWiggle {
  0%, 80%, 100% { transform: rotate(0); }
  85% { transform: rotate(-12deg); }
  90% { transform: rotate(9deg); }
  95% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cselect.has-dog .dog-ear { animation: none; }
  .dog-ear { transition: none; }
}

/* ============ SECTIONS ============ */
.section { padding: 110px 0; }
.section-cream { background: var(--cream); }
.section-green { background: var(--green); color: var(--white); }
.section-green h2, .section-green .eyebrow { color: var(--white); }

/* ============ GIARDINO: SEZIONE "COLMA DI NATURA" ============
   Strato decorativo dietro i contenuti: prato con fiori, farfalle,
   foglie e petali che cadono, lucine che salgono (la "luce morbida e verde, quasi magica").
   Particelle create da script.js; tutto in pausa quando la sezione non è nello schermo. */
.garden-nature { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.section-green > .container { position: relative; z-index: 1; }

.blossom { fill: #fff; }
.blossom-core { fill: var(--yellow); }

/* prato sul fondo: due file di fili d'erba che ondeggiano sfalsate */
.garden-grass {   /* fila di fondo: fili più chiari e un po' più alti */
  position: absolute; left: -60px; right: -60px; bottom: -4px; height: 186px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='210' viewBox='0 -40 160 210'%3E%3Cpath fill='%2358a832' d='M0.0 170Q3.0 127.8 12.0 93.3Q6.1 127.8 5.2 170z'/%3E%3Cpath fill='%236cbb3c' d='M12.7 170Q10.2 125.6 2.7 89.3Q13.4 125.6 18.1 170z'/%3E%3Cpath fill='%234f9e2c' d='M24.3 170Q28.9 82.6 42.6 11.1Q31.2 82.6 28.1 170z'/%3E%3Cpath fill='%2358a832' d='M31.6 170Q35.8 87.0 48.4 19.1Q38.0 87.0 35.2 170z'/%3E%3Cpath fill='%236cbb3c' d='M36.2 170Q40.6 114.5 54.1 69.0Q42.6 114.5 39.4 170z'/%3E%3Cpath fill='%234f9e2c' d='M52.4 170Q53.5 104.4 56.8 50.7Q56.5 104.4 57.4 170z'/%3E%3Cpath fill='%2358a832' d='M53.3 170Q51.8 126.9 47.3 91.5Q54.5 126.9 57.9 170z'/%3E%3Cpath fill='%236cbb3c' d='M69.1 170Q73.0 119.8 84.7 78.8Q75.4 119.8 73.1 170z'/%3E%3Cpath fill='%234f9e2c' d='M78.2 170Q83.7 95.6 100.4 34.7Q87.1 95.6 83.8 170z'/%3E%3Cpath fill='%2358a832' d='M84.6 170Q80.9 121.1 70.0 81.0Q83.2 121.1 88.3 170z'/%3E%3Cpath fill='%236cbb3c' d='M92.7 170Q95.7 100.2 104.8 43.1Q98.5 100.2 97.4 170z'/%3E%3Cpath fill='%234f9e2c' d='M100.1 170Q99.8 110.2 99.1 61.3Q102.6 110.2 104.6 170z'/%3E%3Cpath fill='%2358a832' d='M113.2 170Q116.1 115.1 124.7 70.2Q118.7 115.1 117.6 170z'/%3E%3Cpath fill='%236cbb3c' d='M120.7 170Q122.9 80.6 129.5 7.5Q125.0 80.6 124.1 170z'/%3E%3Cpath fill='%234f9e2c' d='M126.6 170Q129.4 113.8 137.6 67.8Q132.1 113.8 131.2 170z'/%3E%3Cpath fill='%2358a832' d='M135.9 170Q141.5 124.9 158.1 88.0Q143.3 124.9 139.0 170z'/%3E%3Cpath fill='%236cbb3c' d='M148.5 170Q145.3 126.9 135.6 91.7Q147.5 126.9 152.3 170z'/%3E%3Cpath fill='%234f9e2c' d='M153.1 170Q153.8 115.0 156.0 70.0Q157.3 115.0 159.0 170z'/%3E%3C/svg%3E") 60px 100% / 160px 210px repeat-x;
  transform-origin: 50% 100%; animation: grassSway 4s ease-in-out infinite alternate-reverse;
  opacity: .55;   /* fili d'erba trasparenti (solo l'erba: i fiori restano pieni) */
}
.garden-grass::after {   /* fila davanti: fili lunghi e scuri, ondeggiano sfalsati rispetto a quelli dietro */
  content: ''; position: absolute; inset: 0; /* stessa altezza della fila dietro: il bordo cade dove non ci sono fili */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='210' viewBox='0 -40 160 210'%3E%3Cpath fill='%233f8a24' d='M0.0 170Q-2.4 125.4 -9.7 88.9Q-0.2 125.4 3.6 170z'/%3E%3Cpath fill='%234f9e2c' d='M13.1 170Q11.1 106.2 5.3 53.9Q14.3 106.2 18.4 170z'/%3E%3Cpath fill='%232f7a1c' d='M20.6 170Q22.7 106.7 29.1 54.9Q25.7 106.7 25.5 170z'/%3E%3Cpath fill='%233f8a24' d='M28.4 170Q26.9 91.8 22.6 27.8Q30.0 91.8 33.5 170z'/%3E%3Cpath fill='%234f9e2c' d='M34.7 170Q36.8 82.5 43.1 10.8Q39.4 82.5 39.1 170z'/%3E%3Cpath fill='%232f7a1c' d='M43.7 170Q39.4 119.8 26.4 78.7Q42.1 119.8 48.3 170z'/%3E%3Cpath fill='%233f8a24' d='M51.0 170Q52.7 113.9 57.6 68.0Q55.5 113.9 55.8 170z'/%3E%3Cpath fill='%234f9e2c' d='M58.2 170Q56.7 124.8 52.3 87.8Q59.1 124.8 62.2 170z'/%3E%3Cpath fill='%232f7a1c' d='M64.9 170Q60.9 96.2 48.9 35.9Q63.2 96.2 68.8 170z'/%3E%3Cpath fill='%233f8a24' d='M68.9 170Q73.9 94.4 89.0 32.5Q76.7 94.4 73.6 170z'/%3E%3Cpath fill='%234f9e2c' d='M78.6 170Q73.5 123.3 58.3 85.0Q75.8 123.3 82.4 170z'/%3E%3Cpath fill='%232f7a1c' d='M84.5 170Q83.6 105.0 80.9 51.8Q85.7 105.0 88.1 170z'/%3E%3Cpath fill='%233f8a24' d='M94.5 170Q93.0 82.5 88.4 10.9Q95.4 82.5 98.6 170z'/%3E%3Cpath fill='%234f9e2c' d='M99.9 170Q100.0 125.6 100.5 89.2Q102.1 125.6 103.4 170z'/%3E%3Cpath fill='%232f7a1c' d='M105.1 170Q103.5 93.8 98.8 31.5Q106.1 93.8 109.3 170z'/%3E%3Cpath fill='%233f8a24' d='M111.8 170Q113.1 106.1 117.0 53.8Q115.3 106.1 115.5 170z'/%3E%3Cpath fill='%234f9e2c' d='M123.6 170Q127.8 102.5 140.3 47.2Q130.7 102.5 128.5 170z'/%3E%3Cpath fill='%232f7a1c' d='M128.7 170Q128.8 105.4 128.9 52.5Q131.8 105.4 133.8 170z'/%3E%3Cpath fill='%233f8a24' d='M138.4 170Q140.8 99.4 148.0 41.7Q143.1 99.4 142.2 170z'/%3E%3Cpath fill='%234f9e2c' d='M142.9 170Q140.9 97.2 135.1 37.6Q143.4 97.2 147.1 170z'/%3E%3Cpath fill='%232f7a1c' d='M151.8 170Q147.3 123.2 133.9 85.0Q150.6 123.2 157.3 170z'/%3E%3Cpath fill='%233f8a24' d='M153.3 170Q149.4 99.9 137.4 42.6Q151.3 99.9 156.6 170z'/%3E%3C/svg%3E") 0 100% / 160px 210px repeat-x;
  transform-origin: 50% 100%; animation: grassSway 5s ease-in-out infinite alternate;
}
@keyframes grassSway { from { transform: translateX(-6px) skewX(-3deg); } to { transform: translateX(6px) skewX(3deg); } }

/* fiorellini nel prato */
.grass-flower { position: absolute; bottom: 4px; width: 20px; height: 165px; overflow: visible; /* stelo lungo: il fiore spunta sopra il prato */ transform-origin: 50% 100%; animation: flowerSway 3s ease-in-out infinite alternate; }
.grass-flower use { fill: #fff; }
.gf-stem { stroke: #2a6a17; stroke-width: 1.6; }
.gf-1 { left: 5%; }
.gf-2 { left: 17%; width: 18px; height: 148px; animation-delay: -1s; }
.gf-3 { left: 71%; animation-delay: -.5s; }
.gf-4 { left: 85%; width: 17px; height: 140px; animation-delay: -1.6s; }
.gf-5 { left: 93%; width: 22px; height: 181px; animation-delay: -2.2s; }
@keyframes flowerSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* farfalle gialle che svolazzano */
.butterfly { position: absolute; width: 36px; height: 30px; overflow: visible; }
.wing path { fill: var(--yellow); stroke: #8a6a00; stroke-width: .8; }
.wing-dot { fill: #fff6c9; }
.bf-body { fill: var(--green-dark); }
.bf-antenna { fill: none; stroke: var(--green-dark); stroke-width: .9; stroke-linecap: round; }
.wing { transform-box: view-box; transform-origin: 0 0; animation: flap .2s ease-in-out infinite alternate; }
@keyframes flap { to { transform: scaleX(.2); } }
.bf-1 { left: 6%; top: 26%; animation: bfPath1 17s ease-in-out infinite; }
.bf-2 { right: 8%; top: 58%; width: 28px; height: 24px; animation: bfPath2 21s ease-in-out infinite; }
.bf-2 .wing path { fill: #fff3b0; }
@keyframes bfPath1 {
  0%, 100% { transform: translate(0, 0) rotate(10deg); }
  25%      { transform: translate(18vw, -70px) rotate(-12deg); }
  50%      { transform: translate(34vw, 30px) rotate(14deg); }
  75%      { transform: translate(14vw, 100px) rotate(-8deg); }
}
@keyframes bfPath2 {
  0%, 100% { transform: translate(0, 0) rotate(-10deg); }
  30%      { transform: translate(-22vw, -90px) rotate(12deg); }
  60%      { transform: translate(-36vw, 20px) rotate(-14deg); }
  80%      { transform: translate(-12vw, 60px) rotate(8deg); }
}

/* foglie e petali che cadono, lucine che salgono (--fall = altezza della sezione, da script.js) */
.garden-floaters { position: absolute; inset: 0; }
/* elementi che svolazzano (farfalle, foglie, petali, lucine) trasparenti al 70%: restano un dettaglio di sfondo */
.garden-floaters, .garden-nature .butterfly { opacity: .3; }
.floater { position: absolute; top: 0; left: var(--x); opacity: 0; will-change: transform, opacity; animation: floaterFall var(--dur) linear var(--delay) infinite; }
.floater.leaf { width: 15px; height: 9px; background: #7cc142; border-radius: 0 100% 0 100%; }
.floater.leaf.dark { background: #4f9e2c; }
.floater.petal { width: 8px; height: 8px; background: #fff; border-radius: 50% 0 50% 50%; }
@keyframes floaterFall {
  0%   { transform: translate3d(0, -30px, 0) rotate(0); opacity: 0; }
  6%   { opacity: .9; }
  50%  { transform: translate3d(var(--drift), calc(var(--fall) * .5), 0) rotate(calc(var(--spin) * .5)); }
  94%  { opacity: .9; }
  100% { transform: translate3d(calc(var(--drift) * -.4), var(--fall), 0) rotate(var(--spin)); opacity: 0; }
}
.floater.mote {
  top: auto; bottom: 40px; width: 6px; height: 6px; border-radius: 50%;
  background: #fff7c2; box-shadow: 0 0 10px 4px rgba(255,236,140,.5);
  animation-name: moteRise; animation-timing-function: ease-in-out;
}
@keyframes moteRise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: .9; }
  45%  { transform: translate3d(var(--drift), calc(var(--fall) * -.3), 0); opacity: .35; }
  70%  { opacity: .9; }
  100% { transform: translate3d(calc(var(--drift) * -.5), calc(var(--fall) * -.6), 0); opacity: 0; }
}

/* fuori schermo: tutto fermo */
.garden-nature.is-paused *, .garden-nature.is-paused *::before, .garden-nature.is-paused *::after { animation-play-state: paused !important; }
@media (max-width: 600px) {
  .butterfly { width: 28px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .garden-nature *, .garden-nature *::before, .garden-nature *::after { animation: none !important; }
  .garden-floaters, .butterfly { display: none; }
}
.section-dark { background: var(--green-dark); color: var(--white); }
.section-dark h2, .section-dark .eyebrow { color: var(--white); }
.section-head { margin-bottom: 48px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-reverse .split-media { order: 2; }
.split-tight { margin-top: 48px; align-items: start; }

/* giardino: stessa impaginazione di piano terra (.split + .photo-grid), qui solo le inquadrature */
.photo-grid .pg-photo.g-pergola { background: rgba(255,255,255,.08); }
.g-pergola img { object-position: 50% 58%; }   /* inquadra tavolo e barbecue, taglia un po' di tettoia */
.g-pool img { object-position: 50% 62%; }      /* barbecue: al centro la griglia con la brace */
.g-green img { object-position: 30% 0; }       /* piscina: inquadratura in alto, più giardino possibile */
.section-green .pg-photo { background: rgba(255,255,255,.08); box-shadow: 0 18px 40px rgba(0,0,0,.24); }


/* ---- "Il cuore della Villa": cuore color limone ----
   1. quando il titolo entra nello schermo il contorno si disegna (.is-live, da script.js);
   2. si riempie di giallo; 3. batte come un cuore vero (doppio colpo) con un alone che pulsa;
   al passaggio del mouse / al tocco batte più veloce e lascia volare via dei cuoricini. */
.heart-wrap { position: relative; display: inline-block; width: .82em; height: .78em; margin: 0 0 0 .2em; vertical-align: -.02em; }
.heart { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 60%; }
.heart-shape {
  fill: url(#heartFill); fill-opacity: 0; stroke: var(--green); stroke-width: 2.2; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.heart-shine { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; opacity: 0; }
.heart-wrap.is-live .heart-shape { animation: heartDraw 1.1s cubic-bezier(.6, 0, .3, 1) forwards, heartFill .5s ease 1s forwards; }
.heart-wrap.is-live .heart-shine { animation: heartShine .4s ease 1.4s forwards; }
.heart-wrap.is-live .heart { animation: heartBeat 2.6s cubic-bezier(.45, 0, .55, 1) 1.6s infinite; }
@keyframes heartDraw { to { stroke-dashoffset: 0; } }
@keyframes heartFill { to { fill-opacity: 1; } }
@keyframes heartShine { to { opacity: .85; } }
/* battito armonioso: un "respiro" lento e morbido con un doppio rigonfiamento appena accennato,
   l'alone che sale e scende con la stessa dolcezza */
@keyframes heartBeat {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 2px rgba(255,204,0,.15)); }
  18%      { transform: scale(1.09);  filter: drop-shadow(0 0 9px rgba(255,204,0,.55)); }
  32%      { transform: scale(1.03);  filter: drop-shadow(0 0 5px rgba(255,204,0,.35)); }
  46%      { transform: scale(1.07);  filter: drop-shadow(0 0 8px rgba(255,204,0,.5)); }
  72%      { transform: scale(1);     filter: drop-shadow(0 0 2px rgba(255,204,0,.15)); }
}
.heart-wrap.is-live.is-excited .heart { animation-duration: 1.6s; }
/* il cuore "lancia" un cuoricino: piccolo sussulto (classe .is-puff, da script.js) */
.heart-wrap.is-puff { animation: heartPuff .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes heartPuff { 40% { scale: 1.18; } }
.title-heart { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }

/* cuoricini che vagano per la sezione (creati e mossi da script.js); mai più di 10 */
.heart-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.float-heart {
  position: absolute; left: 0; top: 0; overflow: visible;
  fill: var(--yellow); stroke: var(--green); stroke-width: 2.2; stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(255,204,0,.45));
  opacity: .92; will-change: transform;
}
.float-heart.is-fast { filter: drop-shadow(0 0 6px rgba(255,204,0,.6)); }
.float-heart.is-fade { transition: opacity .9s ease; opacity: 0; }
/* scoppio: si gonfia e svanisce (si usa "scale", la posizione resta nel transform) */
.float-heart.is-pop { animation: heartBurst .4s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes heartBurst {
  0%   { scale: 1;   opacity: .95; filter: drop-shadow(0 0 4px rgba(255,204,0,.6)); }
  45%  { scale: 1.7; opacity: .8;  filter: drop-shadow(0 0 14px rgba(255,230,120,1)) brightness(1.3); }
  100% { scale: 2.2; opacity: 0;   filter: drop-shadow(0 0 18px rgba(255,230,120,0)); }
}
@media (prefers-reduced-motion: reduce) {
  .heart-shape { stroke-dashoffset: 0; fill-opacity: 1; }
  .heart-shine { opacity: .85; }
  .heart-wrap.is-live .heart-shape, .heart-wrap.is-live .heart-shine, .heart-wrap.is-live .heart, .heart-wrap.is-puff { animation: none; }
  .heart-layer { display: none; }
}
/* due bagliori a stella intorno a "Un pergolato che incanta": si accendono, ruotano un po' e si spengono,
   alternandosi */
.title-sparkle { position: relative; }
.title-sparkle .nowrap { white-space: nowrap; }   /* la stella resta attaccata a "incanta", senza creare una riga vuota */
.sparkle {
  pointer-events: none; fill: #FFE066;
  filter: drop-shadow(0 0 6px rgba(255,230,120,.9)) drop-shadow(0 0 14px rgba(255,204,0,.6));
  animation: sparkleTwinkle 3.2s ease-in-out infinite;
}
/* il grande subito dopo "incanta" (segue il testo, anche quando va a capo), il piccolo vicino a "Un" */
.sparkle-1 { display: inline-block; position: relative; width: 26px; height: 26px; margin-left: 6px; vertical-align: top; top: -10px; }
.sparkle-2 { position: absolute; width: 16px; height: 16px; left: -18px; top: -8px; animation-delay: -1.6s; fill: #fff6c9; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  20%      { opacity: 1; transform: scale(1.1) rotate(45deg); }
  35%      { opacity: .85; transform: scale(.9) rotate(70deg); }
  55%      { opacity: 0; transform: scale(.3) rotate(110deg); }
}
@media (max-width: 600px) { .sparkle-2 { left: -10px; top: -14px; } }
@media (prefers-reduced-motion: reduce) { .sparkle { animation: none; opacity: .9; } }

#posizione .next { margin-top: 96px; }   /* "Entra in giardino": stessa aria sopra (dalle schede) e sotto */
#posizione { padding-bottom: 150px; }
#giardino { padding: 110px 0 200px; }   /* sotto resta spazio per il prato */
@media (max-width: 600px) { #giardino { padding: 80px 0 170px; } }

/* ---- Auto che sbuca dal bianco, percorre la strada e svanisce di nuovo nel bianco ---- */
.car-road {
  position: relative; height: 34px; margin: 0 0 22px; max-width: 360px;
  border-bottom: 2px dashed rgba(19,74,7,.25); /* la strada */
  /* le due estremità sfumano nello sfondo: l'auto ci entra e ne esce dissolvendosi */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.car {
  position: absolute; bottom: 1px; left: 0; width: 52px; height: 26px;
  transform: translateX(calc(-100% - 6px)); /* ferma fuori strada, a sinistra: si parte senza auto */
  animation: carDrive 6.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* parte solo quando la strada compare nello schermo, e ogni volta ricomincia senza auto */
.js-reveal .car-road:not(.in-view) .car,
.js-reveal .car-road:not(.in-view) .wheel path { animation: none; }
.car-body { fill: var(--yellow); stroke: var(--green); stroke-width: 2; stroke-linejoin: round; }
.car-window { fill: #dff0ff; stroke: var(--green); stroke-width: 1.4; stroke-linejoin: round; }
.car-light { fill: #fff6c2; }
.wheel circle { fill: var(--green-dark); stroke: var(--white); stroke-width: 1.4; }
.wheel path { stroke: #c9d6c4; stroke-width: 1.2; stroke-linecap: round; }
/* le ruote girano sempre in avanti, insieme al movimento */
.wheel path { transform-box: fill-box; transform-origin: center; animation: wheelSpin 6.5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes carDrive {   /* pausa senza auto, poi attraversa tutta la strada da sinistra a destra */
  0%, 14%   { transform: translateX(calc(-100% - 6px)); }
  90%, 100% { transform: translateX(calc(var(--road, 360px) + 6px)); } /* --road = larghezza strada (script.js) */
}
@keyframes wheelSpin {
  0%, 14%   { transform: rotate(0); }
  90%, 100% { transform: rotate(2160deg); }
}
/* piccolo sobbalzo della carrozzeria mentre si muove */
.car-body, .car-window, .car-light { animation: carBounce .35s ease-in-out infinite alternate; }
@keyframes carBounce { to { transform: translateY(-.6px); } }

/* ---- Rampicante sul bottone "Entra in giardino" ---- */
.vine-wrap { position: relative; display: inline-block; --vm: 12px; }
/* l'SVG sborda di --vm su ogni lato: il fusto corre esattamente sul bordo del bottone */
.vine { position: absolute; inset: calc(-1 * var(--vm)); width: calc(100% + 2 * var(--vm)); height: calc(100% + 2 * var(--vm)); pointer-events: none; overflow: visible; z-index: 2; }
.vine-stem { fill: none; stroke: #2f6b1b; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.leaf { fill: #3f8a24; stroke: #2a5e18; stroke-width: .7; transform-box: fill-box; transform-origin: 0% 50%; transform: scale(0); }
.leaf.alt { fill: #5aa834; }
.flower { fill: var(--yellow); stroke: #e0a800; stroke-width: .7; transform-box: fill-box; transform-origin: center; transform: scale(0); }
/* crescita quando il bottone entra nello schermo: le foglie spuntano man mano che il fusto le raggiunge (--t = 0…1) */
.vine-wrap.grown .vine-stem { animation: vineGrow 1.8s ease-out forwards; }
.vine-wrap.grown .leaf, .vine-wrap.grown .flower {
  animation: leafPop .45s cubic-bezier(.3, 1.6, .5, 1) forwards, leafSway 3.4s ease-in-out infinite alternate;
  animation-delay: calc(.15s + var(--t) * 1.6s), calc(2s + var(--t) * 1.2s);
}
@keyframes vineGrow { to { stroke-dashoffset: 0; } }
@keyframes leafPop { to { transform: scale(1); } }
@keyframes leafSway { from { transform: scale(1) rotate(-7deg); } to { transform: scale(1) rotate(7deg); } }

/* ---- Bottone "Entra in giardino": premendolo si riempie di natura ---- */
.btn-garden { background: var(--white); position: relative; z-index: 1; overflow: hidden; isolation: isolate; transition: color .35s ease .15s, border-color .3s, transform .15s; }
/* prato che sale dal basso, con foglie disegnate */
.btn-garden::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='30' viewBox='0 0 46 30'%3E%3Cg fill='%2382c341' fill-opacity='.55'%3E%3Cpath d='M6 22c-5-1-6-7-3-9 4 1 6 5 3 9z'/%3E%3Cpath d='M24 10c1-5 7-6 9-3-1 4-5 6-9 3z'/%3E%3Cpath d='M38 26c-4-3-3-8 1-9 2 3 2 7-1 9z'/%3E%3C/g%3E%3Ccircle cx='17' cy='24' r='1.8' fill='%23FFCC00'/%3E%3C/svg%3E") 0 0 / 46px 30px,
    linear-gradient(180deg, #3f8a24, #2a6a17);
  clip-path: inset(100% 0 0 0 round 999px);
  transition: clip-path .55s cubic-bezier(.3, .8, .3, 1);
}
.btn-garden:hover::before { clip-path: inset(72% 0 0 0 round 999px); }   /* al passaggio spunta l'erba */
.btn-garden.blooming::before { clip-path: inset(0 0 0 0 round 999px); }  /* premuto: si riempie tutto */
.btn-garden.blooming { color: var(--white); border-color: #2a6a17; }
/* foglioline che volano via dal bottone (create da script.js) */
.leaf-burst {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 8px; pointer-events: none; z-index: 3;
  background: #4f9e2c; border-radius: 0 100% 0 100%;
  animation: leafFly .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
.leaf-burst:nth-child(even) { background: #7cc142; }
@keyframes leafFly {
  from { transform: translate(-50%, -50%) rotate(0) scale(.4); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .car, .wheel path, .car-body, .car-window, .car-light { animation: none; }
  .car { transform: none; left: calc(50% - 26px); }   /* auto ferma al centro della strada */
  .vine-stem { stroke-dashoffset: 0; }
  .leaf, .flower { transform: scale(1); }
  .vine-wrap.grown .vine-stem, .vine-wrap.grown .leaf, .vine-wrap.grown .flower { animation: none; }
  .leaf-burst { display: none; }
}

/* Liste feature (pill) */
.features { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Etichette informative di tutte le sezioni: stesso stile "vetro" e stesso fascio di luce
   a onda delle etichette della prima sezione (versione chiara sui fondi chiari) */
.features li {
  position: relative; overflow: hidden;
  padding: 7px 15px; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--green);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,247,234,.92));
  border: 1px solid rgba(19,74,7,.14);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(19,74,7,.05), 0 3px 10px rgba(11,38,7,.08);
}
.section-cream .features li { background: linear-gradient(180deg, #fff, rgba(255,255,255,.85)); }
.section-green .features li {
  color: var(--white);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
}
.features .emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 1.05em; line-height: 1; margin-right: .4em; display: inline-block; vertical-align: -.08em;
}
/* il fascio passa da un'etichetta all'altra (--c = posizione, impostata da script.js) */
.features li::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,214,60,.5), transparent); /* luce dorata sui fondi chiari */
  transform: skewX(-20deg);
  animation: chipShine 5s ease-in-out infinite;
  animation-delay: calc(1s + var(--c, 0) * 110ms);
}
.section-green .features li::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); }
@media (prefers-reduced-motion: reduce) { .features li::after { display: none; } }

/* ---- Titolo della sezione Posizione: lente d'ingrandimento sulla "o" finale di "strategico" ---- */
@property --lx { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ly { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --lr { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.word-lens {
  --lens: .7em;           /* diametro della lente: giusto la "o" */
  --zoom: 1.25;           /* ingrandimento (la "o" ingrandita resta dentro la lente) */
  --orbit: .6em;          /* raggio del giro: abbastanza da lasciare del tutto la "o" */
  position: relative; display: inline-block; white-space: nowrap;
  animation: lensGlide 4.4s linear infinite;
}
/* ferma sulla "o" (--lens-start, calcolato da script.js) per mezzo secondo, poi percorre
   un'ellisse verso DESTRA (fuori dalla parola, dove non c'è testo): sopra all'andata, sotto al ritorno.
   Velocità che cresce e cala dolcemente (metà lineare, metà sinusoidale) e nessuna altra sosta; il manico oscilla appena.
   Nel punto più lontano la lente è a 2 × --orbit dalla "o", quindi la lascia completamente.
   Fotogrammi generati (ellisse campionata in 28 punti). */
@keyframes lensGlide {
  0%, 11.36% { --lx: var(--lens-start, 3.6em); --ly: 0px; --lr: 0deg; }
  14.53% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.0062); --ly: calc(var(--orbit) * -0.0469); --lr: -0.89deg; }
  17.69% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.0299); --ly: calc(var(--orbit) * -0.1020); --lr: -1.94deg; }
  20.86% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.0789); --ly: calc(var(--orbit) * -0.1635); --lr: -3.11deg; }
  24.03% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.1608); --ly: calc(var(--orbit) * -0.2284); --lr: -4.35deg; }
  27.19% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.2819); --ly: calc(var(--orbit) * -0.2923); --lr: -5.57deg; }
  30.36% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.4453); --ly: calc(var(--orbit) * -0.3495); --lr: -6.66deg; }
  33.52% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.6497); --ly: calc(var(--orbit) * -0.3934); --lr: -7.49deg; }
  36.69% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.8878); --ly: calc(var(--orbit) * -0.4173); --lr: -7.95deg; }
  39.85% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 1.1461); --ly: calc(var(--orbit) * -0.4155); --lr: -7.91deg; }
  43.02% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 1.4052); --ly: calc(var(--orbit) * -0.3840); --lr: -7.31deg; }
  46.19% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 1.6421); --ly: calc(var(--orbit) * -0.3220); --lr: -6.13deg; }
  49.35% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 1.8329); --ly: calc(var(--orbit) * -0.2324); --lr: -4.43deg; }
  52.52% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 1.9570); --ly: calc(var(--orbit) * -0.1219); --lr: -2.32deg; }
  55.68% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 2.0000); --ly: calc(var(--orbit) * -0.0000); --lr: -0.00deg; }
  58.85% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 1.9570); --ly: calc(var(--orbit) * 0.1219); --lr: 2.32deg; }
  62.01% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 1.8329); --ly: calc(var(--orbit) * 0.2324); --lr: 4.43deg; }
  65.18% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 1.6421); --ly: calc(var(--orbit) * 0.3220); --lr: 6.13deg; }
  68.34% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 1.4052); --ly: calc(var(--orbit) * 0.3840); --lr: 7.31deg; }
  71.51% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 1.1461); --ly: calc(var(--orbit) * 0.4155); --lr: 7.91deg; }
  74.68% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.8878); --ly: calc(var(--orbit) * 0.4173); --lr: 7.95deg; }
  77.84% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.6497); --ly: calc(var(--orbit) * 0.3934); --lr: 7.49deg; }
  81.01% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.4453); --ly: calc(var(--orbit) * 0.3495); --lr: 6.66deg; }
  84.17% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.2819); --ly: calc(var(--orbit) * 0.2923); --lr: 5.57deg; }
  87.34% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.1608); --ly: calc(var(--orbit) * 0.2284); --lr: 4.35deg; }
  90.50% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.0789); --ly: calc(var(--orbit) * 0.1635); --lr: 3.11deg; }
  93.67% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.0299); --ly: calc(var(--orbit) * 0.1020); --lr: 1.94deg; }
  96.83% { --lx: calc(var(--lens-start, 3.6em) + var(--orbit) * 0.0062); --ly: calc(var(--orbit) * 0.0469); --lr: 0.89deg; }
  100% { --lx: var(--lens-start, 3.6em); --ly: 0px; --lr: 0deg; }
}
.lens {
  position: absolute; left: 0; top: 50%; width: var(--lens); height: var(--lens); margin-top: calc(var(--lens) * -.5);
  border-radius: 50%; overflow: hidden; transform: translate(var(--lx), var(--ly));
  border: .06em solid var(--green-dark);
  background: rgba(255,255,255,.88);
  box-shadow: 0 .12em .35em rgba(11,38,7,.28), inset 0 0 0 .05em rgba(255,255,255,.9);
}
.lens::after { /* riflesso sul vetro */
  content: ''; position: absolute; left: 18%; top: 14%; width: 30%; height: 18%; border-radius: 50%;
  background: rgba(255,255,255,.9); transform: rotate(-30deg);
}
/* copia ingrandita della parola dentro la lente, allineata con quella vera */
.lens-zoom {
  position: absolute; left: -.06em; top: 0; height: 100%; display: flex; align-items: center;
  color: inherit; white-space: nowrap;
  transform: translate(calc(-1 * var(--lx)), calc(-1 * var(--ly)));
  scale: var(--zoom); transform-origin: calc(var(--lens) * .5) 50%;
}
/* manico della lente */
.word-lens::after { /* agganciato al centro della lente, gira con lei */
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -.05em;
  width: .36em; height: .1em; border-radius: .08em; background: var(--green-dark);
  transform: translate(calc(var(--lx) + var(--lens) * .5), var(--ly)) rotate(calc(48deg + var(--lr))) translateX(calc(var(--lens) * .47));
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: reduce) {
  .word-lens { animation: none; --lx: var(--lens-start, 3.6em); --ly: 0px; --lr: 0deg; }
}

/* Luoghi di interesse raggiungibili in auto: griglia di schede sotto testo e mappa */
.places { margin-top: 96px; }
.places-title { font-size: clamp(1.45rem, 2.3vw, 1.8rem); margin: 0 0 28px; }
.distances {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 16px;   /* schede tutte alte uguali */
}
.distances li {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 24px; row-gap: 2px; align-items: center;
  padding: 14px; border-radius: 20px; background: var(--cream); border: 1px solid var(--line);
  overflow: hidden; isolation: isolate;
}
/* al passaggio del mouse la foto si apre dalla miniatura fino a riempire la scheda (stile Apple):
   ::before è la foto larga (--img), ritagliata sul rettangolo della miniatura (--ct/--cr/--cb/--cl, da script.js)
   e poi allargata a tutta la scheda; ::after è un velo scuro per leggere in bianco luogo e minuti */
.distances li::before, .distances li::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.distances li::before {
  background: var(--img) center / cover no-repeat;
  clip-path: inset(var(--ct, 14px) var(--cr, 60%) var(--cb, 14px) var(--cl, 14px) round 18px);
  opacity: 0;
  /* stessa curva morbida del carosello: parte piano, si posa con calma */
  transition: clip-path 1s cubic-bezier(.45, .05, .15, 1), opacity .4s ease, scale 1.2s cubic-bezier(.45, .05, .15, 1);
  transform-origin: 20% 50%;
}
.distances li::after {
  background: linear-gradient(90deg, rgba(8, 28, 5, .1) 0%, rgba(8, 28, 5, .4) 42%, rgba(8, 28, 5, .66) 100%);   /* più scuro dove c'è la scritta */
  opacity: 0; transition: opacity .8s ease;
}
.distances li > * { position: relative; z-index: 1; }
.place-name, .place-time { transition: color .6s ease, text-shadow .6s ease, transform .9s cubic-bezier(.45, .05, .15, 1); }
.distances .place-thumb { transition: opacity .45s ease; }
/* la scheda si solleva con calma, senza rimbalzo */
.distances li { transition: scale .8s cubic-bezier(.45, .05, .15, 1), translate .8s cubic-bezier(.45, .05, .15, 1),
                            background-color .5s ease, border-color .6s ease, box-shadow .8s ease; }
@media (hover: hover) {
  .distances li:hover::before { clip-path: inset(0 0 0 0 round 20px); opacity: 1; scale: 1; }
  .distances li::before { scale: 1.06; }   /* la foto, aprendosi, "si avvicina" appena e si assesta */
  .distances li:hover::after { opacity: 1; transition-delay: .1s; }
  .distances li:hover .place-thumb { opacity: 0; transition-delay: .08s; }
  .distances li:hover .place-name, .distances li:hover .place-time { color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.45); transform: translateX(-6px); transition-delay: .12s; }
  .distances li:hover .place-time { transition-delay: .18s; }
}
@media (prefers-reduced-motion: reduce) { .distances li::before { transition: opacity .2s ease; } }
.place-name { align-self: end; font-weight: 500; line-height: 1.3; color: var(--ink); }
.place-time { align-self: start; font-weight: 700; font-size: .9rem; color: var(--green); white-space: nowrap; }
.place-thumb {
  grid-row: 1 / 3; position: relative; width: 104px; height: 104px; object-fit: cover; border-radius: 18px;
  border: 2px solid var(--yellow); box-sizing: border-box;            /* bordino giallo */
  box-shadow: 0 3px 8px rgba(11,38,7,.16);
  background: var(--cream); transform-origin: 0 50%;
}
/* "respiro": le foto si ingrandiscono appena (7%), lentamente, una alla volta e in loop
   (8 foto × 1,5 s), senza alone: un movimento quasi sotto la soglia di attenzione, che non disturba la lettura */
.distances li:nth-child(1) { --i: 0; } .distances li:nth-child(2) { --i: 1; }
.distances li:nth-child(3) { --i: 2; } .distances li:nth-child(4) { --i: 3; }
.distances li:nth-child(5) { --i: 4; } .distances li:nth-child(6) { --i: 5; }
.distances li:nth-child(7) { --i: 6; } .distances li:nth-child(8) { --i: 7; }
.distances .place-thumb { animation: thumbBreath 12s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.5s + 1s); }
@keyframes thumbBreath {
  0%, 16%, 100% { transform: scale(1); box-shadow: 0 3px 8px rgba(11,38,7,.16); }
  7%, 9%        { transform: scale(1.07); box-shadow: 0 6px 14px rgba(11,38,7,.2); }
}
@media (max-width: 1100px) { .distances { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .places { margin-top: 64px; }
  .places-title { margin-bottom: 20px; }
  .distances { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
  .distances li { padding: 12px 14px; column-gap: 22px; }
  .place-thumb { width: 86px; height: 86px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .distances .place-thumb { animation: none; } }

.map-wrap { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--cream); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ============ EVENTI NEI PARAGGI (sotto il calendario) ============
   Due card piccole: illustrazione animata a sinistra, testo e bottone "Vedi le date" a destra
   (il bottone porta il calendario al mese dell'evento, vedi calendar.js).
   Le illustrazioni sono disegnate in grande su un "palco" di 280×250 e rimpicciolite (scale .4):
   proporzioni e movimenti restano quelli delle card originali. Solo transform e opacity. */
.booking-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.booking-main .calendar { flex: 1; }
.booking-main .cal-summary { margin-top: auto; } /* mesi più corti: il riepilogo resta in fondo alla card */
.booking-events-head { margin-bottom: 14px; }
.booking-events-head .eyebrow { margin: 0 0 4px; }
.events-copy { margin: 0; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.82); }
.events-copy strong { color: var(--white); font-weight: 600; }
.events-copy mark {
  color: var(--white); font-weight: 500; padding: 0 .1em;
  background: linear-gradient(transparent 62%, rgba(255,204,0,.45) 62%); /* evidenziatore giallo */
}

.mini-events { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mini-event {
  position: relative; isolation: isolate; cursor: pointer; min-width: 0;
  display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 20px;
  background: linear-gradient(180deg, #FFD83A, var(--yellow));
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s;
}
.mini-event:hover { transform: translateY(-3px); box-shadow: 0 22px 38px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6); }
.mini-art {
  position: relative; flex: none; width: 112px; height: 100px; border-radius: 14px; overflow: hidden;
  background: var(--yellow); box-shadow: inset 0 0 0 1px rgba(11,38,7,.08);
}
.mini-stage { position: absolute; left: 0; top: 0; width: 280px; height: 250px; transform: scale(.4); transform-origin: 0 0; }
.mini-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.event-month { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--green); }
.event-name { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.15; color: var(--green-dark); }
.mini-cta {
  margin-top: 8px; border: 0; cursor: pointer; border-radius: 999px; padding: .6em .95em;
  font: 600 .78rem/1 var(--font-body); color: var(--green-dark);
  background: rgba(255,255,255,.72); box-shadow: 0 2px 6px rgba(11,38,7,.12);
  transition: background .2s;
}
.mini-cta span { display: inline-block; transition: transform .25s ease; }
.mini-cta:hover { background: var(--white); }
.mini-cta:hover span { transform: translateX(3px); }
.mini-cta:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }

/* scene di sfondo (Mura di Lucca, mare di Viareggio) */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.scene * { stroke-linejoin: round; stroke-linecap: round; }
/* velo giallo sopra la scena (e sotto le mascotte): lo sfondo resta contesto, i protagonisti in primo piano.
   Niente opacity/filter sulla scena: in Chrome la facevano disegnare SOPRA le mascotte. */
.lucca-art::before, .carnival-art::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(255,204,0,.55), rgba(255,204,0,.42) 70%, rgba(255,204,0,.7));
}

/* ---- Lucca: la scimmia davanti alle Mura ---- */
.event-lucca { --monkey-loop: 2.8s; --ink: #0B2607; }
.lucca-art {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(11,38,7,.09) 1.3px, transparent 1.6px) 0 0 / 10px 10px, var(--yellow); /* retino da fumetto */
}
.scene-lucca .hills { fill: rgba(19,74,7,.12); }
.scene-lucca .trunk { fill: #6b3b16; }
.scene-lucca .leaf-a { fill: #3f8a24; stroke: var(--ink); stroke-width: 1.1; }
.scene-lucca .leaf-b { fill: #2f6b1b; stroke: var(--ink); stroke-width: 1.1; }
.scene-lucca .walk { fill: #7CB342; }
.scene-lucca .coping { fill: #8E4F24; }
.scene-lucca .gate { fill: #4a250e; }
.scene-lucca .gate-rim { fill: none; stroke: #8E4F24; stroke-width: 3; }
.scene-lucca .tree { transform-box: fill-box; transform-origin: 50% 100%; animation: treeSway 4s ease-in-out infinite alternate; animation-delay: calc(var(--t) * -.7s); }
@keyframes treeSway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

.mascot { position: absolute; z-index: 2; bottom: 12px; }
.mascot-body { position: relative; transform-origin: 50% 100%; }
.mascot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(11,38,7,.3)); }
.mascot-shadow {
  position: absolute; left: 15%; right: 15%; bottom: -5px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11,38,7,.35), rgba(11,38,7,0));
  transform-origin: center;
}
.mascot-monkey { width: 163px; left: calc(50% - 81.5px); }
/* salta, si gira a mezz'aria, atterra schiacciandosi e si agita */
.mascot-monkey .mascot-body { animation: monkeyHop var(--monkey-loop) cubic-bezier(.4, 0, .3, 1) infinite; }
.mascot-monkey .mascot-shadow { animation: monkeyShadow var(--monkey-loop) cubic-bezier(.4, 0, .3, 1) infinite; }
@keyframes monkeyHop {
  0%, 100% { transform: translateY(0) rotate(0) scale(1, 1); }
  10%      { transform: translateY(0) rotate(0) scale(1.07, .9); }
  28%      { transform: translateY(-28px) rotate(-7deg) scale(.95, 1.07); }
  40%      { transform: translateY(-32px) rotate(5deg) scale(1, 1); }
  54%      { transform: translateY(0) rotate(0) scale(1.09, .88); }
  62%      { transform: translateY(0) rotate(0) scale(1, 1); }
  70%      { transform: translateY(0) rotate(-4deg) scale(1, 1); }
  78%      { transform: translateY(-3px) rotate(4deg) scale(1, 1); }
  86%      { transform: translateY(0) rotate(-2deg) scale(1, 1); }
}
@keyframes monkeyShadow {
  0%, 62%, 100% { transform: scale(1); opacity: 1; }
  10%, 54%      { transform: scale(1.12); opacity: 1; }
  34%           { transform: scale(.55); opacity: .45; }
}
/* arrabbiatura: al passaggio del mouse / al tocco la scimmia trema e sulla testa compare 💢 */
.anger {
  position: absolute; left: 60%; top: -4%; z-index: 3; line-height: 1;
  font-size: 44px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  opacity: 0; transform: scale(0); pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(11,38,7,.3));
}
.event-lucca.is-angry .anger {
  animation: angerPop .35s cubic-bezier(.3, 1.8, .5, 1) forwards, angerThrob .45s ease-in-out .35s infinite alternate;
}
@keyframes angerPop { from { opacity: 0; transform: scale(0) rotate(-25deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes angerThrob { from { transform: scale(1) rotate(0); } to { transform: scale(1.25) rotate(10deg); } }
.event-lucca.is-angry .mascot-monkey .mascot-body { animation: monkeyRage .18s ease-in-out infinite alternate; }
.event-lucca.is-angry .mascot-monkey .mascot-shadow { animation: none; }
@keyframes monkeyRage {
  from { transform: translate(-2px, 0) rotate(-2.5deg) scale(1.02, .98); }
  to   { transform: translate(2px, -2px) rotate(2.5deg) scale(.99, 1.02); }
}
.event-lucca.is-paused *, .event-lucca.is-paused { animation-play-state: paused !important; }

/* ---- Viareggio: Burlamacco con luci e coriandoli davanti al mare ----
   --carnival-loop  durata di un "passo di danza"; --bulb-speed  lampeggio delle lucine;
   --confetti-colors / --confetti-count  letti da script.js */
.event-carnival {
  --carnival-loop: 3.5s;
  --bulb-speed: 1.4s;
  --confetti-colors: #F0524F, #2F7FE0, #E0458C, #134A07, #ffffff, #FF8A00;
  --confetti-count: 16;
}
.carnival-art { position: absolute; inset: 0; pointer-events: none; }
.scene-viareggio .sun { fill: #fff3b0; }
.scene-viareggio .sun-glow { fill: #fff6c9; opacity: .45; }
.scene-viareggio .sun-path { stroke: #fff6c9; stroke-width: 2; animation: shimmer 2.4s ease-in-out infinite alternate; }
@keyframes shimmer { from { opacity: .25; } to { opacity: .8; } }
/* onde: il disegno si ripete ogni 50 unità, quindi lo scorrimento di 50 è un loop perfetto */
.scene-viareggio .wave { fill: none; stroke: #fff; }
.scene-viareggio .wave-1 { stroke-width: 1.6; opacity: .55; animation: waveMove 4s linear infinite; }
.scene-viareggio .wave-2 { stroke-width: 1.4; opacity: .4; animation: waveMove 6s linear infinite reverse; }
@keyframes waveMove { from { transform: translateX(0); } to { transform: translateX(-50px); } }
.scene-viareggio .boat { transform-box: fill-box; transform-origin: 50% 100%; animation: boatBob 6s ease-in-out infinite alternate; }
@keyframes boatBob { from { transform: translateX(-6px) rotate(-3deg); } to { transform: translateX(10px) rotate(3deg); } }
.scene-viareggio .sail { fill: #fff; stroke: var(--green-dark); stroke-width: 1; }
.scene-viareggio .hull { fill: #F0524F; stroke: var(--green-dark); stroke-width: 1; }
.scene-viareggio .pier { fill: #9aa59f; stroke: var(--green-dark); stroke-width: .8; }
.scene-viareggio .lh-body { fill: #fff; stroke: var(--green-dark); stroke-width: 1.1; }
.scene-viareggio .lh-stripe { stroke: #F0524F; stroke-width: 3.5; }
.scene-viareggio .lh-top { fill: #ffe680; stroke: var(--green-dark); stroke-width: 1; }
.scene-viareggio .lh-roof { fill: #F0524F; stroke: var(--green-dark); stroke-width: 1; }
.scene-viareggio .lh-beam { fill: #fff6c9; opacity: 0; animation: beam 3s ease-in-out infinite; }
@keyframes beam { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }

/* lucine appese in alto */
.carnival-lights { position: absolute; left: 6px; right: 6px; top: 4px; width: calc(100% - 12px); height: 46px; overflow: visible; z-index: 2; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
.lights-wire { fill: none; stroke: var(--green-dark); stroke-width: 1.4; opacity: .55; vector-effect: non-scaling-stroke; }
.bulb { stroke: rgba(11,38,7,.35); stroke-width: .8; animation: bulbBlink var(--bulb-speed) ease-in-out infinite alternate; animation-delay: calc(var(--b) * -.35s); }
.bulb:nth-of-type(4n+1) { fill: #fff3b0; }
.bulb:nth-of-type(4n+2) { fill: #F0524F; }
.bulb:nth-of-type(4n+3) { fill: #2F7FE0; }
.bulb:nth-of-type(4n)   { fill: #E0458C; }
@keyframes bulbBlink { from { opacity: .3; } to { opacity: 1; } }

/* alone luminoso dietro Burlamacco */
.carnival-glow {
  position: absolute; left: 50%; bottom: -14px; width: 240px; height: 240px; margin-left: -120px; z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,246,190,.55) 38%, rgba(255,204,0,0) 70%);
  animation: glowPulse var(--carnival-loop) ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { transform: scale(.92); opacity: .65; }
  50%      { transform: scale(1.08); opacity: 1; }
}
/* Burlamacco che rimbalza come sul carro in movimento (squash & stretch a ogni "atterraggio") */
.burlamacco {
  position: absolute; left: calc(50% - 99.5px); bottom: 12px; width: 199px; height: auto; z-index: 2; /* alto 190px come la scimmia */
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 6px rgba(11,38,7,.28));
  animation: burlaDance var(--carnival-loop) ease-in-out infinite;
}
@keyframes burlaDance {
  0%, 100% { transform: translateY(0)     rotate(-4deg) scale(1, 1); }
  10%      { transform: translateY(2px)   rotate(-4deg) scale(1.04, .95); }
  30%      { transform: translateY(-16px) rotate(2deg)  scale(.98, 1.03); }
  50%      { transform: translateY(1px)   rotate(4deg)  scale(1.04, .95); }
  70%      { transform: translateY(-13px) rotate(-2deg) scale(.98, 1.03); }
  90%      { transform: translateY(1px)   rotate(-4deg) scale(1.02, .97); }
}
/* coriandoli che cadono in loop (creati da script.js) */
.confetti { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.confetto {
  position: absolute; top: 0; left: var(--x); width: 9px; height: 14px; border-radius: 2px;
  background: var(--c); opacity: 0;
  animation: confettiFall var(--dur) linear var(--delay) infinite;
}
.confetto.round { width: 10px; height: 10px; border-radius: 50%; }
@keyframes confettiFall {
  0%   { transform: translate3d(0, -14px, 0) rotate(0deg);                         opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate3d(var(--sway), 125px, 0) rotate(calc(var(--rot) * .5)); }
  88%  { opacity: 1; }
  100% { transform: translate3d(0, 260px, 0) rotate(var(--rot));                    opacity: 0; }
}
/* hover / tap: lampo di luce e coriandoli che escono dall'illustrazione sopra tutta la card */
.event-carnival.is-party .carnival-glow { animation-duration: calc(var(--carnival-loop) / 3); }
.event-carnival.is-party .bulb { animation-duration: calc(var(--bulb-speed) / 4); }
.confetto-burst {
  position: absolute; left: 66px; top: 45%; width: 6px; height: 9px; border-radius: 1.5px; z-index: 4;
  background: var(--c); pointer-events: none;
  animation: confettiBurst 1.1s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes confettiBurst {
  from { transform: translate3d(-50%, 0, 0) rotate(0) scale(.6); opacity: 1; }
  70%  { opacity: 1; }
  to   { transform: translate3d(calc(-50% + var(--dx)), var(--dy), 0) rotate(var(--rot)) scale(1); opacity: 0; }
}
.event-carnival.is-paused *, .event-carnival.is-paused { animation-play-state: paused !important; }

/* il mese dell'evento nel calendario: etichetta con la mascotte, e un alone quando ci si arriva dal bottone */
.cal-month { border-radius: 14px; }
/* giorni degli eventi: pallino giallo in alto a destra; sfiorando o premendo il giorno compare
   l'etichetta con il nome della festa (testo in data-event, scritto da calendar.js) */
.ev-lucca, .ev-carnevale { --ev: var(--yellow); }
.cal-day { position: relative; }
.cal-day.is-event::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ev); box-shadow: 0 0 0 1.5px rgba(11,38,7,.55);
}
.cal-day.is-event::before {
  content: attr(data-event); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 6;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 700 .72rem/1.2 var(--font-body); color: var(--green-dark);
  background: linear-gradient(135deg, #FFE066, #FFCC00); box-shadow: 0 6px 16px rgba(0,0,0,.35);
  opacity: 0; transform: translate(-50%, 4px) scale(.92); transition: opacity .18s ease, transform .2s cubic-bezier(.2, .8, .3, 1);
}
.cal-day.is-event:hover::before, .cal-day.is-event:focus-visible::before, .cal-day.is-event.show-ev::before {
  opacity: 1; transform: translate(-50%, 0) scale(1);
}
.cal-day.is-event:hover, .cal-day.is-event.show-ev { z-index: 5; }
/* dopo il clic sulla card: i giorni dell'evento si illuminano uno dopo l'altro */
.cal-day.is-spot { animation: evSpot 1.4s ease-out both; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes evSpot {
  0%   { box-shadow: 0 0 0 0 var(--ev); }
  30%  { box-shadow: 0 0 0 3px var(--ev), 0 0 18px var(--ev); }
  100% { box-shadow: inset 0 0 0 1.5px var(--ev); }
}
@keyframes calSpot {
  0%   { box-shadow: 0 0 0 0 rgba(255,204,0,0); }
  25%  { box-shadow: 0 0 0 8px rgba(255,204,0,.7); }
  100% { box-shadow: 0 0 0 18px rgba(255,204,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .event-lucca *, .scene *, .bulb, .carnival-glow, .burlamacco, .cal-day.is-spot { animation: none !important; }
  .confetti, .confetto-burst { display: none; }
  .mini-event, .mini-event:hover { transform: none; }
}
@media (max-width: 600px) {
  .mini-events { grid-template-columns: 1fr; }
}

/* Gallerie */
.gallery figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--cream); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; height: 440px; }
.gallery-stack { display: grid; grid-template-columns: 1fr; gap: 14px; }
.gallery-stack figure { aspect-ratio: 3/2; }
.gallery-stack figure:nth-child(2) { width: 70%; margin-left: auto; margin-top: -80px; border: 6px solid var(--white); }
.section-cream .gallery-stack figure:nth-child(2) { border-color: var(--cream); }
/* variante con la seconda foto verticale (piano terra: sala 4:3 in grande, cucina 3:4 in piccolo) */
.gallery-stack-tall figure:first-child { aspect-ratio: 4/3; }
.gallery-stack-tall figure:first-child img { object-position: 50% 62%; }   /* meno soffitto, più tavolo e credenza */
.gallery-stack.gallery-stack-tall figure:nth-child(2) { aspect-ratio: 3/4; width: 52%; margin-top: -42%; margin-right: -4%; }
@media (max-width: 980px) { .gallery-stack.gallery-stack-tall figure:nth-child(2) { margin-right: 0; } }
@media (max-width: 600px) { .gallery-stack.gallery-stack-tall figure:nth-child(2) { width: 54%; margin-top: -36%; } }
/* bordino giallo come le foto del giardino (la cucina resta staccata dalla sala con un anello bianco);
   al passaggio del mouse il bordo si illumina e la foto si allarga appena */
.gallery-stack.gallery-stack-tall figure {
  position: relative; border: 2px solid var(--yellow); box-shadow: 0 18px 40px rgba(0,0,0,.18);
  transition: scale .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .45s ease;
}
.gallery-stack.gallery-stack-tall figure:nth-child(2) { z-index: 2; box-shadow: 0 0 0 6px var(--white), 0 18px 40px rgba(0,0,0,.22); }
@media (hover: hover) {
  .gallery-stack.gallery-stack-tall figure:hover {
    scale: 1.025; z-index: 1; border-color: #FFE066;
    box-shadow: 0 0 0 3px rgba(255,204,0,.35), 0 0 32px 4px rgba(255,214,40,.55), 0 22px 46px rgba(0,0,0,.25);
  }
  .gallery-stack.gallery-stack-tall figure:nth-child(2):hover {
    z-index: 3;
    box-shadow: 0 0 0 6px var(--white), 0 0 0 9px rgba(255,204,0,.35), 0 0 32px 8px rgba(255,214,40,.55), 0 22px 46px rgba(0,0,0,.25);
  }
}
@media (prefers-reduced-motion: reduce) { .gallery-stack.gallery-stack-tall figure:hover { scale: none; } }

/* Griglia foto delle stanze (piano terra, camere, bagni): stessa composizione del giardino,
   una foto grande sopra e due quadrate affiancate sotto, senza sovrapposizioni.
   Bordino giallo; al passaggio del mouse il bordo si illumina e la foto si allarga appena. */
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pg-photo {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1;
  background: var(--cream); border: 2px solid var(--yellow); box-shadow: 0 18px 40px rgba(0,0,0,.16);
}
.pg-main { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.pg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#piano-terra .pg-main img { object-position: 50% 62%; }   /* meno soffitto, più tavolo e credenza */
.pg-photo img.pg-cucina { object-position: 50% 70%; }      /* la foto è verticale: tieni piano cottura e tavolo */
/* primo piano: inquadrature che mostrano letti e finestre */
.pg-photo img.pg-vista { object-position: 50% 47%; }        /* foto verticale: il prato, gli ulivi e le Apuane */
.pg-photo img.pg-tripla { object-position: 88% 60%; }       /* i due letti e la finestra aperta sul verde */
.pg-photo img.pg-padronale { object-position: 22% 62%; }    /* il letto in ferro battuto e la finestra sulle colline */
/* etichetta "vetro" con il nome della stanza */
.pg-label {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; pointer-events: none;
  padding: 6px 12px; border-radius: 999px; font: 600 .78rem/1 var(--font-body); letter-spacing: .02em;
  color: var(--white); background: rgba(11,38,7,.45);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
}
/* entrata a cascata (data-reveal) + hover come nel giardino */
.js-reveal .pg-photo[data-reveal], .pg-photo {
  transition:
    opacity .7s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .7s cubic-bezier(.2, .7, .2, 1),
    scale .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .45s ease;
}
.js-reveal .pg-photo[data-reveal].in-view { transition-delay: var(--rd, 0ms), var(--rd, 0ms), var(--rd, 0ms), 0s, 0s, 0s; }
@media (hover: hover) {
  .pg-photo:hover {
    scale: 1.025; z-index: 1; border-color: #FFE066;
    box-shadow: 0 0 0 3px rgba(255,204,0,.35), 0 0 32px 4px rgba(255,214,40,.55), 0 22px 46px rgba(0,0,0,.22);
  }
}
@media (prefers-reduced-motion: reduce) { .pg-photo:hover { scale: none; } }
@media (max-width: 600px) {
  .photo-grid { gap: 12px; }
  .pg-label { left: 8px; bottom: 8px; padding: 5px 9px; font-size: .7rem; }
}

/* "Notti tranquille, risvegli nel verde": piccole illustrazioni sopra le parole.
   Più interlinea nel titolo per far posto ai disegni anche quando va a capo. */
.title-deco { line-height: 1.25; margin: .55em 0 .5em; }   /* i disegni stanno sopra la prima riga: spazio sopra, interlinea normale */
.title-deco .deco-word { line-height: 1.15; }
.deco-word { position: relative; display: inline-block; }
/* il disegno sta nello spazio libero tra le righe, appena sopra le lettere */
.deco { position: absolute; left: 50%; bottom: calc(100% - .2em); overflow: visible; pointer-events: none; }
/* luna / sole: è un bottone. Di notte è una falce che galleggia piano con due stelline;
   premuta, l'ombra scivola via (la falce diventa un disco pieno), spuntano i raggi che ruotano
   e le stelline si spengono. Ripremuto, torna luna. */
.daynight {
  width: .92em; height: .92em; margin-left: -.46em; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; font: inherit; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  animation: decoFloat 5s ease-in-out infinite;
}
.daynight svg { width: 100%; height: 100%; overflow: visible; display: block; transition: scale .4s cubic-bezier(.3, 1.4, .5, 1); }
.daynight:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
@media (hover: hover) { .daynight:hover svg { scale: 1.15; } }
.daynight:active svg { scale: .9; transition-duration: .12s; }
.dn-core {
  fill: #FFD84D; transform-box: view-box; transform-origin: 20px 20px;
  transition: fill .6s ease, transform .7s cubic-bezier(.65, 0, .35, 1);
}
.dn-bite { transform-box: view-box; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.dn-rays {
  stroke: var(--yellow); stroke-width: 2.6; stroke-linecap: round;
  transform-box: view-box; transform-origin: 20px 20px; transform: scale(.3) rotate(-90deg); opacity: 0;
  transition: transform .9s cubic-bezier(.3, 1.3, .5, 1), opacity .5s ease;
}
.moon-star { fill: #FFE680; transition: opacity .5s ease; animation: decoTwinkle 2.8s ease-in-out infinite; }
.moon-star.s2 { animation-delay: -1.4s; }
/* invito al tocco: di notte un alone tenue respira intorno alla luna */
.daynight::before {
  content: ''; position: absolute; inset: -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(255,214,77,.38), rgba(255,214,77,.12) 55%, rgba(255,214,77,0));
  animation: moonHalo 3.2s ease-in-out infinite;
}
.daynight::after { content: ''; position: absolute; inset: -45%; border-radius: 50%; }   /* area di tocco più ampia sul telefono */
@keyframes moonHalo { 0%, 100% { opacity: .35; scale: .85; } 50% { opacity: 1; scale: 1.15; } }
/* giorno */
#camere.is-day .dn-bite { transform: translate(15px, -15px); }
#camere.is-day .dn-core { fill: var(--yellow); transform: scale(.72); }
#camere.is-day .dn-rays { transform: scale(1) rotate(0deg); opacity: 1; }
#camere.is-day .dn-rays { animation: sunSpin 18s linear .9s infinite; }
#camere.is-day .moon-star { opacity: 0; }
#camere.is-day .daynight::before { background: radial-gradient(circle closest-side, rgba(255,204,0,.32), rgba(255,204,0,.1) 55%, rgba(255,204,0,0)); }
@keyframes sunSpin { to { rotate: 360deg; } }
/* montagna: il sole sorge lentamente dietro le cime, resta un po', poi ridiscende */
.deco-mountain { width: 1.15em; height: .78em; margin-left: -.575em; }
.mt-front { fill: var(--green); transition: fill 1s ease; }
.mt-back { fill: #4E8A3A; transition: fill 1s ease; }
.mt-snow { fill: #fff; }
.mt-sun { fill: var(--yellow); animation: sunRise 7s cubic-bezier(.45, 0, .55, 1) infinite; }
/* di notte le montagne sono più fredde e il sole resta nascosto dietro le cime */
#camere.is-night .mt-front { fill: #3F6E52; }
#camere.is-night .mt-back { fill: #2B4E45; }
#camere.is-night .mt-sun { animation: none; translate: 0 10px; }
@keyframes decoFloat { 0%, 100% { translate: 0 0; rotate: -6deg; } 50% { translate: 0 -.08em; rotate: 4deg; } }
@keyframes decoTwinkle { 0%, 100% { opacity: .2; scale: .6; } 50% { opacity: 1; scale: 1.15; } }
@keyframes sunRise { 0%, 100% { translate: 0 8px; } 35%, 70% { translate: 0 -9px; } }
@media (prefers-reduced-motion: reduce) {
  .deco, .deco *, .deco::before, .mt-sun { animation: none !important; }
  .mt-sun { translate: 0 -6px; }
}

/* ---- Primo piano: notte (di base) / giorno (dopo aver toccato la luna) ----
   Lo sfondo cambia colore con una dissolvenza; con il browser che lo supporta il giorno si apre
   con un cerchio che parte dalla luna (View Transition, script.js). L'arco in cima alla sezione
   eredita il colore, quindi segue anche lui. */
#camere { transition: background-color .7s ease, color .7s ease; }
/* piano terra → primo piano → bagni: confini dritti, senza la curva che si alza con lo scroll */
#camere > .wave-dome, #bagni > .wave-dome { display: none; }
/* Sicurezza: due foto piccole affiancate (estintore e kit di primo soccorso), stesso stile delle foto delle stanze */
.safety-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 600px; margin: 30px auto 6px; }
.safety-photo {
  position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px;
  border: 2px solid var(--yellow); background: rgba(255,255,255,.08); box-shadow: 0 16px 36px rgba(0,0,0,.3);
}
.safety-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.js-reveal .safety-photo[data-reveal], .safety-photo {
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .7s cubic-bezier(.2, .7, .2, 1),
              scale .6s cubic-bezier(.45, .05, .15, 1), box-shadow .6s ease, border-color .6s ease;
}
.js-reveal .safety-photo[data-reveal].in-view { transition-delay: var(--rd, 0ms), var(--rd, 0ms), var(--rd, 0ms), 0s, 0s, 0s; }
@media (hover: hover) {
  .safety-photo:hover { scale: 1.03; border-color: #FFE066; box-shadow: 0 0 0 3px rgba(255,204,0,.3), 0 0 30px 4px rgba(255,214,40,.45), 0 20px 44px rgba(0,0,0,.35); }
}
@media (max-width: 600px) { .safety-photos { gap: 10px; } .safety-photo { border-radius: 14px; } .safety-photo .pg-label { left: 8px; bottom: 8px; font-size: .66rem; padding: 5px 8px; } }

/* bottone bordato su fondo scuro (Sicurezza → Info utili) */
.btn-outline.btn-on-dark { border-color: rgba(255,255,255,.85); color: var(--white); }
.btn-outline.btn-on-dark .btn-arrow { background: rgba(255,255,255,.16); }
@media (hover: hover) { .btn-outline.btn-on-dark:hover { background: var(--white); color: var(--green-dark); } .btn-outline.btn-on-dark:hover .btn-arrow { background: rgba(11,38,7,.1); } }
#camere > .container { position: relative; z-index: 1; }
#camere.is-night { background-color: #0E1B2E; color: rgba(255,255,255,.84); }
.night-sky {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  opacity: 0; transition: opacity .7s ease;
  background:
    radial-gradient(ellipse 60% 50% at 78% 8%, rgba(255,214,77,.10), transparent 70%),
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 26% 72%, #fff 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 41% 34%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 86%, #fff 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 67% 22%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 83% 58%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 12%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 6% 52%, #fff 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 8%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 74% 92%, #fff 50%, transparent 100%);
}
/* seconda manciata di stelle che brillano piano */
.night-sky::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1.6px 1.6px at 19% 40%, #fff 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 48% 14%, #FFE680 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 61% 64%, #fff 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 36%, #FFE680 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 8% 88%, #fff 50%, transparent 100%);
  animation: starsTwinkle 4s ease-in-out infinite;
}
@keyframes starsTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
#camere.is-night .night-sky { opacity: .9; }
#camere h2, #camere .eyebrow, #camere .features li, #camere .btn-outline { transition: color .7s ease, background-color .7s ease, border-color .7s ease, box-shadow .3s ease, scale .4s cubic-bezier(.3, 1.35, .5, 1), translate .4s cubic-bezier(.2, .8, .2, 1); }
#camere.is-night h2 { color: var(--white); }
#camere.is-night .eyebrow { color: var(--yellow); }
/* sfondo a tinta unita (non sfumato) così passa da notte a giorno con una dissolvenza */
#camere .features li { background: rgba(255,255,255,.94); }
#camere.is-night .features li {
  color: var(--white);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.25);
}
#camere.is-night .features li::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); }
@media (hover: hover) {
  #camere.is-night .features li:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,214,77,.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px rgba(0,0,0,.35);
  }
  #camere.is-night .btn-outline:hover { background: var(--white); color: #0E1B2E; }
}
#camere.is-night .btn-outline { border-color: rgba(255,255,255,.85); color: var(--white); }
#camere.is-night .btn-outline .btn-arrow { background: rgba(255,255,255,.16); }
@media (hover: hover) { #camere.is-night .btn-outline:hover .btn-arrow { background: rgba(14,27,46,.1); } }
/* foto: di notte un filo più soffuse, col giorno tornano piene */
#camere .pg-photo img { transition: filter .7s ease; }
#camere.is-night .pg-photo img { filter: brightness(.86) saturate(.9); }
#camere.is-night .pg-photo { box-shadow: 0 18px 40px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) { .night-sky::after { animation: none; } }

/* ---- Foto delle stanze: galleria nel riquadro (script.js) ----
   1. mouse sopra una foto: si allarga appena, il bordo si illumina e in alto a destra compare
      "Premi per vedere tutte le foto";
   2. premendo (o toccando): la foto si allarga fino a occupare il riquadro delle tre foto e da lì
      si scorre tra tutte le foto della sezione (frecce, puntini, swipe, ← →). X o Esc per chiudere. */
.photo-grid { position: relative; }
.photo-grid .pg-photo { cursor: zoom-in; }
.pg-hint {
  position: absolute; top: 12px; right: 12px; z-index: 3; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px;
  font: 600 .74rem/1 var(--font-body); color: var(--white); white-space: nowrap; background: rgba(11,38,7,.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px rgba(0,0,0,.2);
  opacity: 0; translate: 0 -6px; transition: opacity .3s ease, translate .4s cubic-bezier(.2, .8, .2, 1);
}
.pg-hint svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .pg-photo:hover .pg-hint { opacity: 1; translate: 0 0; transition-delay: .12s; } }
/* sugli schermi stretti l'avviso si accorcia */
.pg-hint .pg-hint-short { display: none; }
@media (max-width: 1100px) {
  .pg-photo:not(.pg-main) .pg-hint .pg-hint-long { display: none; }
  .pg-photo:not(.pg-main) .pg-hint .pg-hint-short { display: inline; }
}

/* la galleria: parte dalla foto premuta e si allarga su tutto il riquadro */
.pg-zoom {
  position: absolute; z-index: 5; overflow: hidden;
  border-radius: var(--radius); border: 2px solid #FFE066; background: #1b1b1b;
  box-shadow: 0 0 0 3px rgba(255,204,0,.35), 0 0 32px 4px rgba(255,214,40,.45), 0 26px 56px rgba(0,0,0,.3);
  opacity: 0; visibility: hidden;
  /* ingresso: stessa curva morbida dell'uscita, lento e armonioso (0,9 s) */
  --ease-in-out: cubic-bezier(.45, .05, .15, 1);
  transition: top .9s var(--ease-in-out), left .9s var(--ease-in-out),
              width .9s var(--ease-in-out), height .9s var(--ease-in-out),
              box-shadow .9s ease, opacity .35s ease, visibility 0s linear .9s;
}
.pg-zoom.is-on { opacity: 1; visibility: visible; transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s; }
/* durante l'ingresso la foto "si avvicina" appena (leggero zoom che si scioglie) */
.pg-zoom.is-on:not(.is-ready):not(.is-closing) .pgz-still { animation: pgzIn .9s cubic-bezier(.45, .05, .15, 1) both; }
@keyframes pgzIn { from { scale: 1.06; } to { scale: 1; } }
/* i controlli entrano dopo, uno dopo l'altro; la X arriva ruotando */
.pg-zoom.is-ready .pgv-chrome { transition: opacity .5s ease; }
.pg-zoom.is-ready .pg-label.pgv-chrome { transition-delay: .05s; }
.pg-zoom.is-ready .pgv-prev, .pg-zoom.is-ready .pgv-next { transition: opacity .5s ease .12s, scale .3s cubic-bezier(.3, 1.4, .5, 1), background-color .2s ease; }
.pg-zoom.is-ready .pgv-dots { transition-delay: .2s; }
.pg-zoom .pgv-close { rotate: -90deg; scale: .7; }
.pg-zoom.is-ready .pgv-close { rotate: 0deg; scale: 1; transition: opacity .5s ease .1s, rotate .6s cubic-bezier(.45, .05, .15, 1) .1s, scale .6s cubic-bezier(.45, .05, .15, 1) .1s, background-color .2s ease; }
@media (hover: hover) { .pg-zoom.is-ready .pgv-close:hover { scale: 1.1; } }
.pg-zoom.is-instant { transition: none; }
/* uscita (X, Esc, clic fuori): curva morbida in entrata e in uscita, lenta e armoniosa;
   la foto resta piena mentre rientra nel suo riquadro e sfuma dolcemente solo alla fine */
.pg-zoom.is-closing {
  --ease-out: cubic-bezier(.45, .05, .15, 1);
  transition: top .9s var(--ease-out), left .9s var(--ease-out), width .9s var(--ease-out), height .9s var(--ease-out),
              border-color .7s ease, box-shadow .9s ease, opacity .45s ease .72s, visibility 0s linear 1.2s;
  border-color: rgba(255,204,0,.6); box-shadow: 0 0 0 0 rgba(255,204,0,0), 0 12px 30px rgba(0,0,0,.18);
}
.pg-zoom.is-closing .pgz-still { transition: none; opacity: 1; }
.pg-zoom.is-closing .pgv-chrome { transition: opacity .4s ease; }
.pg-zoom.is-closing .pgv-close { opacity: 0; scale: .6; rotate: 90deg; transition: opacity .4s ease .05s, scale .5s cubic-bezier(.45, .05, .15, 1), rotate .55s cubic-bezier(.45, .05, .15, 1); }
/* il riquadro che "riceve" la foto si assesta con un respiro appena accennato */
.pg-photo.pg-settle { animation: pgSettle .8s cubic-bezier(.45, .05, .15, 1); }
/* riquadro che riceve la foto scambiata: dissolvenza morbida */
.pg-photo.pg-swap img { animation: pgSwap .8s cubic-bezier(.45, .05, .15, 1); }
@keyframes pgSwap { from { opacity: 0; scale: 1.04; } to { opacity: 1; scale: 1; } }
@keyframes pgSettle { 0% { scale: .985; } 60% { scale: 1.006; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .pg-zoom.is-closing { transition: none; } .pg-photo.pg-settle { animation: none; } }
/* durante l'allargamento si vede solo la foto premuta; a galleria aperta compare lo scorrimento */
.pgz-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity .25s ease; }
.pg-zoom.is-ready .pgz-still { opacity: 0; pointer-events: none; }
.pgv-track {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  visibility: hidden;
}
.pg-zoom.is-ready .pgv-track { visibility: visible; }
.pgv-track::-webkit-scrollbar { display: none; }
.pgv-slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.pgv-slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.pgv-slide .pg-label { top: 14px; bottom: auto; left: 14px; }
.pgv-btn {
  position: absolute; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: var(--white); cursor: pointer;
  background: rgba(11,38,7,.42); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px rgba(0,0,0,.22);
  transition: scale .3s cubic-bezier(.3, 1.4, .5, 1), opacity .3s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.pgv-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .pgv-btn:hover { scale: 1.1; background: rgba(11,38,7,.6); } }
.pgv-btn:active { scale: .9; }
.pgv-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.pgv-close { top: 12px; right: 12px; }
.pgv-prev, .pgv-next { top: 50%; margin-top: -21px; }
.pgv-prev { left: 12px; }
.pgv-next { right: 12px; }
.pgv-dots {
  position: absolute; z-index: 3; left: 50%; bottom: 14px; translate: -50% 0; display: flex; gap: 7px;
  padding: 7px 10px; border-radius: 999px; background: rgba(11,38,7,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pgv-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .35s cubic-bezier(.2, .8, .2, 1), background-color .3s ease; }
.pgv-dots button.is-on { width: 22px; background: var(--yellow); }
.pgv-chrome { opacity: 0; transition: opacity .3s ease; }
.pg-zoom.is-ready .pgv-chrome { opacity: 1; }
@media (max-width: 600px) {
  .pgv-btn { width: 36px; height: 36px; margin-top: 0; }
  .pgv-prev, .pgv-next { margin-top: -18px; }
  .pgv-close { top: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pg-zoom, .pg-hint { transition: none; } }

/* Placeholder foto: etichetta visibile per la revisione */
.ph-tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: rgba(11,38,7,.85); color: var(--yellow);
  font: 600 .7rem/1 var(--font-body); letter-spacing: .08em; padding: 6px 9px; border-radius: 6px; pointer-events: none;
}

/* Box placeholder (calendario, recensioni) */
.placeholder-box {
  border: 2px dashed rgba(19,74,7,.35); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 40px; color: var(--muted); background: rgba(255,255,255,.6);
}
.placeholder-box strong { color: var(--green); font-family: var(--font-display); font-size: 1.3rem; }

/* Booking */
.booking-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: stretch; }

/* ============ CALENDARIO (sito + pannello gestione) ============ */
.calendar { background: var(--white); border-radius: var(--radius); padding: 24px; box-shadow: 0 10px 40px rgba(11,38,7,.08); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal-nav {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white);
  font-size: 1.4rem; line-height: 1; color: var(--green); cursor: pointer; flex: none;
}
.cal-nav:hover:not(:disabled) { background: var(--cream); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: .78rem; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.lg-free { background: var(--cream); border: 1px solid var(--line); }
.lg-booked { background: repeating-linear-gradient(135deg, #e9e6dc 0 3px, #f6f3ea 3px 6px); }
.lg-sel { background: var(--yellow); }

.cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.cal-title { font-size: 1.1rem; text-align: center; margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: .7rem; font-weight: 600; color: var(--muted); padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1 / 1.05; border: 0; border-radius: 10px; background: var(--cream); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: 500 .9rem var(--font-body); cursor: pointer; padding: 0; min-width: 0;
  transition: background .15s, transform .15s;
}
.cal-day:hover:not(:disabled) { background: #fff1b8; transform: translateY(-1px); }
.cal-num { line-height: 1; }
.cal-price { font-size: .66rem; font-weight: 600; color: var(--green); line-height: 1; }
.cal-day.is-past { background: transparent; color: #c2c7bf; cursor: default; }
.cal-day.is-booked { background: repeating-linear-gradient(135deg, #e9e6dc 0 3px, #f6f3ea 3px 6px); color: #a3a89f; text-decoration: line-through; cursor: not-allowed; }
.cal-day.is-booked.is-checkout-option { cursor: pointer; } /* si può partire il giorno in cui arriva un altro ospite */
.cal-day.is-unavailable { opacity: .35; cursor: not-allowed; }
.cal-day.is-range { background: #fff1b8; border-radius: 4px; }
.cal-day.is-checkin, .cal-day.is-checkout { background: var(--yellow); color: var(--green-dark); font-weight: 700; text-decoration: none; }
.cal-day.is-checkin .cal-price, .cal-day.is-checkout .cal-price { color: var(--green-dark); }
.calendar.is-loading .cal-months { opacity: .5; pointer-events: none; }

.cal-summary { border-top: 1px solid var(--line); padding-top: 16px; min-height: 56px; }
.cal-hint, .cal-msg { margin: 0; text-align: center; color: var(--muted); font-size: .92rem; }
.cal-msg { color: #8a4b0f; }
.cal-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cal-total > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.cal-dates { font-size: .85rem; color: var(--muted); }
.cal-total strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--green); }
.cal-total strong small { font-family: var(--font-body); font-size: .75rem; font-weight: 500; color: var(--muted); }
.cal-note { font-size: .75rem; color: var(--muted); }
.cal-total-actions { display: flex; align-items: center; gap: 12px; }
.cal-reset { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }

@media (max-width: 600px) {
  .calendar { padding: 16px; }
  .cal-grid { gap: 3px; }
  .cal-day { border-radius: 8px; font-size: .85rem; }
  .cal-price { font-size: .6rem; }
}
.request-form { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: 0 10px 40px rgba(11,38,7,.08); display: flex; flex-direction: column; gap: 14px; }
.request-form h3 { margin-bottom: 4px; }
.request-form label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--green); }
.request-form input, .request-form select, .request-form textarea {
  font: 400 1rem var(--font-body); color: var(--ink); padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--white); width: 100%;
}
.request-form input:focus, .request-form select:focus, .request-form textarea:focus { outline: 2px solid var(--yellow); border-color: var(--green); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-note { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; }

/* Sicurezza */
.codes { display: flex; justify-content: center; gap: 16px; margin: 32px 0 20px; flex-wrap: wrap; }
.code { border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); padding: 16px 28px; min-width: 200px; }
.code span { display: block; font-size: .75rem; letter-spacing: .18em; color: var(--yellow); font-weight: 600; }
.code strong { font-family: var(--font-display); font-size: 1.3rem; }

/* Info */
.info-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; }
.info-card { background: var(--white); border-radius: var(--radius); padding: 36px; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 9px 0 9px 32px; position: relative; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23134A07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.rules { margin: 0; }
.rules div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rules div:last-child { border-bottom: 0; }
.rules dt { font-weight: 600; color: var(--green); font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; }
.rules dd { margin: 4px 0 0; }

/* Recensioni */
.rating { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px 0 28px; }
.rating-score { font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; color: var(--green); background: var(--yellow); border-radius: 18px; padding: 4px 26px; line-height: 1.2; }
.rating-meta { color: var(--muted); }
/* ---- Recensioni (dati Booking.com, grafica Lemon Villa) ---- */
.reviews-head h2 { margin-bottom: 0; }
.reviews-score {
  display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 52px); align-items: center;
  max-width: 940px; margin: 44px auto 0; padding: clamp(24px, 4vw, 40px) clamp(20px, 4.5vw, 44px); border-radius: 28px;
  background: linear-gradient(180deg, #fff, var(--cream)); border: 1px solid rgba(19,74,7,.1);
  box-shadow: 0 24px 60px rgba(11,38,7,.08), inset 0 1px 0 #fff;
}
.score-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.score-badge {
  display: grid; place-items: center; width: 132px; height: 132px; border-radius: 36px;
  font: 700 3.4rem/1 var(--font-display); color: var(--green-dark);
  background: linear-gradient(145deg, #FFE680, var(--yellow) 55%, #F0B400);
  box-shadow: 0 0 0 6px rgba(255,204,0,.18), 0 18px 40px rgba(240,180,0,.35), inset 0 2px 0 rgba(255,255,255,.6);
  margin-bottom: 10px;
}
.score-word { font: 700 1.5rem/1.1 var(--font-display); color: var(--green); }
.score-meta { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.score-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.score-bars li { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 38px; align-items: center; gap: 14px; font-size: .93rem; color: var(--ink); }
.score-meta { max-width: 26ch; }
.sb-name { font-weight: 500; }
.sb-val { font-weight: 700; color: var(--green); text-align: right; font-variant-numeric: tabular-nums; }
.sb-bar { position: relative; height: 8px; border-radius: 99px; background: rgba(19,74,7,.09); overflow: hidden; }
.sb-bar i {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--green), #3E8A1E 60%, var(--yellow));
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.35s + var(--i) * 90ms);
}
.reviews-score.in-view .sb-bar i, html:not(.js-reveal) .sb-bar i { transform: scaleX(var(--p)); }
.reviews-sub { margin: 64px 0 24px; font-size: 1.35rem; }
.review-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.review-theme {
  padding: 26px 22px; border-radius: 22px; background: var(--white);
  border: 1px solid rgba(19,74,7,.1); box-shadow: 0 10px 30px rgba(11,38,7,.06);
}
.js-reveal .review-theme[data-reveal], .review-theme {
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .7s cubic-bezier(.2, .7, .2, 1),
              scale .45s cubic-bezier(.3, 1.3, .5, 1), translate .45s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.js-reveal .review-theme[data-reveal].in-view { transition-delay: var(--rd, 0ms), var(--rd, 0ms), var(--rd, 0ms), 0s, 0s, 0s; }
@media (hover: hover) {
  .review-theme:hover { scale: calc(1 + var(--dock-grow, .06)); z-index: 2; border-color: rgba(255,204,0,.7); box-shadow: 0 0 0 3px rgba(255,204,0,.18), 0 22px 44px rgba(11,38,7,.12); }
  .review-themes > .review-theme.is-near { scale: calc(1 + var(--dock-near, .02)); z-index: 1; }
  .review-theme { position: relative; }
}
.rt-emoji { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(255,204,0,.2); font-size: 1.5rem; margin-bottom: 16px;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.review-theme h3 { font-size: 1.12rem; margin: 0 0 8px; }
.review-theme p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); }
#recensioni .actions { margin-top: 48px; }
.btn-ext { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; margin: -.4em -.5em -.4em .15em; border-radius: 50%; background: rgba(19,74,7,.1); }
.btn-ext svg { width: .95em; height: .95em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s cubic-bezier(.3, 1.4, .5, 1); }
.btn-outline:hover .btn-ext { background: rgba(255,255,255,.22); }
.btn:hover .btn-ext svg { translate: 2px -2px; }
.site-footer a[href^="mailto:"] { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.site-footer a[href^="mailto:"]:hover { color: var(--yellow); border-color: var(--yellow); }
@media (max-width: 980px) {
  /* voto in orizzontale (riquadro a sinistra, giudizio accanto), sotto le barre su due colonne */
  .reviews-score { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .score-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 4px;
    align-items: center; text-align: left; justify-content: start;
    padding-bottom: 24px; border-bottom: 1px solid rgba(19,74,7,.1);
  }
  .score-badge { grid-row: 1 / span 2; margin: 0; width: 104px; height: 104px; font-size: 2.7rem; border-radius: 28px; }
  .score-word { align-self: end; }
  .score-meta { align-self: start; max-width: none; }
  .score-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 16px; }
  .score-bars li { grid-template-columns: minmax(0, 1fr) 34px; row-gap: 7px; column-gap: 10px; }
  .sb-name { grid-column: 1; grid-row: 1; }
  .sb-val { grid-column: 2; grid-row: 1; }
  .sb-bar { grid-column: 1 / -1; grid-row: 2; }
  .review-themes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .reviews-score { border-radius: 24px; }
  .score-card { column-gap: 16px; padding-bottom: 20px; }
  .score-badge { width: 80px; height: 80px; font-size: 2.15rem; border-radius: 22px; box-shadow: 0 0 0 4px rgba(255,204,0,.18), 0 12px 26px rgba(240,180,0,.32), inset 0 2px 0 rgba(255,255,255,.6); }
  .score-word { font-size: 1.3rem; }
  .score-meta { font-size: .86rem; }
  .score-bars { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .score-bars li { font-size: .9rem; }
  .review-themes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sb-bar i { transition: none; } }

/* ============ FOOTER ============ */
.site-footer { background: var(--green-dark); color: rgba(255,255,255,.85); padding: 72px 0 24px; font-size: .95rem; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-logo { height: 40px; width: auto; margin-bottom: 18px; }
.footer-col h4 { color: var(--yellow); font-family: var(--font-body); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; }

.mobile-cta { display: none; }
@media (min-width: 981px) { .nav-mail { display: none; } }
html.menu-lock { overflow: hidden; }
.menu-lock .mobile-cta, .gallery-open .mobile-cta { opacity: 0 !important; pointer-events: none !important; }

/* ============ BANNER COOKIE (assets/consent.js) ============
   Vetro verde scuro in basso a destra (a sinistra ci sono i bottoni della prima sezione);
   "Rifiuta" e "Accetta" della stessa misura (scelta libera). */
.consent {
  position: fixed; right: 20px; bottom: 20px; z-index: 70; max-width: 420px;
  padding: 18px 18px 16px; border-radius: 20px; color: rgba(255,255,255,.9);
  background: rgba(11, 38, 7, .92); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.consent-open .consent { opacity: 1; transform: none; pointer-events: auto; }
.consent-text { margin: 0 0 14px; font-size: .88rem; line-height: 1.5; }
.consent-text a { color: var(--yellow); text-underline-offset: 3px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-btn {
  font: 700 .9rem/1 var(--font-body); padding: .85em 1em; border-radius: 999px; cursor: pointer;
  transition: transform .15s ease, background-color .2s ease;
}
.consent-btn:active { transform: scale(.96); }
.consent-no { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.5); }
.consent-no:hover { background: rgba(255,255,255,.1); }
.consent-yes { background: var(--yellow); color: var(--green-dark); border: 1.5px solid var(--yellow); }
.consent-yes:hover { background: #ffd83a; }
.consent-btn:focus-visible, .consent-text a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
@media (max-width: 600px) {
  .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .consent-open .mobile-cta { opacity: 0 !important; pointer-events: none !important; }  /* niente sovrapposizioni in basso */
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  /* menu: è l'header stesso che si apre. Il vetro della barra (la capsula) si allunga con armonia
     fino a coprire tutto lo schermo, diventando via via più pieno; poi entrano le voci.
     La forma di partenza (--pt/--pr/--pb/--pl/--prad) è la barra, misurata da script.js. */
  .main-nav {
    position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 100px) 30px calc(env(safe-area-inset-bottom, 0px) + 30px);
    background-color: rgba(252, 250, 243, .3);
    -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; pointer-events: none;
    clip-path: inset(var(--pt, 12px) var(--pr, 12px) var(--pb, calc(100% - 72px)) var(--pl, 12px) round var(--prad, 30px));
    transition: none;   /* nessun effetto quando cambia solo la misura dello schermo (es. tablet ruotato) */
  }
  .main-nav.open {
    visibility: visible; pointer-events: auto;
    clip-path: inset(0 0 0 0 round 0px); background-color: rgba(252, 250, 243, .97);
    transition: clip-path .7s cubic-bezier(.32, .72, 0, 1), background-color .7s cubic-bezier(.32, .72, 0, 1);
  }
  /* chiusura (classe .is-closing da script.js): lo schermo si richiude nella barra, il vetro torna leggero */
  .main-nav.is-closing {
    visibility: visible;
    transition: clip-path .55s cubic-bezier(.32, .72, 0, 1) .06s, background-color .55s ease .06s, visibility 0s linear .62s;
  }
  .site-header .main-nav:not(.open):not(.is-closing) a { transition: none !important; }
  /* voci principali */
  .site-header .main-nav a:not(.nav-cta):not(.nav-mail) {
    display: flex; align-items: center; gap: 10px; align-self: flex-start;
    font: 700 clamp(1.9rem, 8.4vw, 2.5rem)/1.12 var(--font-display); letter-spacing: -.005em; color: var(--green-dark);
    padding: 9px 0; border: 0; border-radius: 0; opacity: 0; translate: 0 -10px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .45s ease, translate .5s cubic-bezier(.32, .72, 0, 1);
  }
  .site-header .main-nav a:not(.nav-cta):not(.nav-mail):active { opacity: .45 !important; transition: opacity .08s ease; }
  /* sezione in cui ci si trova: un puntino giallo accanto alla voce */
  .site-header .main-nav a.is-current::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow);
    box-shadow: 0 0 0 3px rgba(255,204,0,.25);
  }
  /* parte bassa: contatti (grigio) e bottone di prenotazione */
  .site-header .main-nav a.nav-mail {
    order: 50; display: block; margin-top: 30px; padding: 22px 0 0; border-top: 1px solid rgba(19,74,7,.12);
    font: 500 1rem/1.4 var(--font-body); color: var(--muted); opacity: 0; translate: 0 -10px;
    transition: opacity .45s ease, translate .5s cubic-bezier(.32, .72, 0, 1);
  }
  .site-header .main-nav a.nav-mail::before {
    content: 'Contatti'; display: block; margin-bottom: 4px;
    font: 600 .75rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(19,74,7,.45);
  }
  .site-header .main-nav a.nav-cta {
    order: 51; margin: 22px 0 0; padding: 18px; font-size: 1.05rem; border-bottom: 0;
    opacity: 0; translate: 0 -10px; transition: opacity .45s ease, translate .5s cubic-bezier(.32, .72, 0, 1), transform .15s ease;
  }
  .site-header .main-nav a.nav-cta:active { transform: scale(.97); }
  /* aperto: le voci entrano a cascata, veloci */
  .site-header .main-nav.open a, .site-header .main-nav.open a:not(.nav-cta):not(.nav-mail) {
    opacity: 1; translate: 0 0; transition-delay: calc(.22s + var(--i, 0) * .045s);
  }
  .site-header .main-nav.open a:active { transition-delay: 0s; }
  /* in chiusura le voci svaniscono subito, prima che il pannello risalga */
  .site-header .main-nav.is-closing a { opacity: 0; translate: 0 -6px; transition: opacity .16s ease, translate .2s ease; transition-delay: 0s; }
  /* hamburger → X */
  .nav-toggle { display: block; position: relative; z-index: 2; -webkit-tap-highlight-color: transparent; }
  .nav-toggle span { transition: translate .45s cubic-bezier(.32, .72, 0, 1), rotate .45s cubic-bezier(.32, .72, 0, 1), background-color .3s ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { translate: 0 4px; rotate: 45deg; }
  .nav-toggle[aria-expanded="true"] span:last-child { translate: 0 -4px; rotate: -45deg; }
  .menu-open .nav-toggle span { background: var(--green-dark); }
  .menu-open .logo-light { display: none; }
  .menu-open .logo-color { display: block; }
  .menu-open .header-inner::before { opacity: 0; }

  .split, .booking-grid, .info-grid { grid-template-columns: 1fr; gap: 40px; }
  .split-reverse .split-media { order: 0; }
}
@media (max-width: 400px) {
  .gallery-3 { grid-template-columns: 1fr 1fr; height: auto; }
  .gallery-3 figure:first-child { grid-column: 1 / -1; aspect-ratio: 16/10; }
  .gallery-3 figure:not(:first-child) { aspect-ratio: 1; }
  .map-wrap { aspect-ratio: 4/3; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .container { padding: 0 16px; }
  .section { padding: 72px 0; }
  :root { --dome-h: 30px; --tile: 380px; }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .btn-hero { justify-content: center; }
  .btn-hero-glass { padding-right: 1.8em; }
  .hero { padding: 88px 0 40px; }
  .hero-layer img { object-position: 30% 70%; }
  .hero-overlay { background: linear-gradient(180deg, rgba(11,38,7,.35) 0%, rgba(11,38,7,.55) 30%, rgba(11,38,7,.8) 100%); }
  .form-row { grid-template-columns: 1fr; }
  .request-form, .info-card { padding: 24px; }
  .gallery-stack figure:nth-child(2) { width: 80%; margin-top: -50px; }
  .mobile-cta {
    display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40;
    box-shadow: 0 10px 30px rgba(255,204,0,.45), 0 8px 24px rgba(11,38,7,.25), inset 0 1px 0 rgba(255,255,255,.7); /* brilla come gli altri */
    opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .25s, transform .25s;
  }
  .past-hero .mobile-cta { opacity: 1; pointer-events: auto; transform: none; }
  .site-footer { padding-bottom: 96px; }
}


/* ============ DISPOSITIVI TOUCH (telefoni e tablet) ============
   Senza mouse gli effetti "al passaggio" diventano tocchi semplici: si muove solo ciò che si tocca,
   una cosa per volta, senza effetti a catena. (cursor: pointer serve a iPhone per ricevere il tocco) */
@media (hover: none), (pointer: coarse) {
  /* luoghi raggiungibili in auto: il tocco apre la foto nella scheda */
  .distances li { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .distances li::before { scale: 1.06; }
  .distances li.is-tapped {
    scale: 1.02; z-index: 2; border-color: rgba(255,204,0,.85);
    box-shadow: 0 0 0 3px rgba(255,204,0,.3), 0 0 26px 4px rgba(255,214,40,.4), 0 14px 30px rgba(11,38,7,.16);
  }
  .distances li.is-tapped::before { clip-path: inset(0 0 0 0 round 20px); opacity: 1; scale: 1; }
  .distances li.is-tapped::after { opacity: 1; transition-delay: .1s; }
  .distances li.is-tapped .place-thumb { opacity: 0; transition-delay: .08s; }
  .distances li.is-tapped .place-name, .distances li.is-tapped .place-time {
    color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.45); transform: translateX(-6px); transition-delay: .12s;
  }
  .distances li.is-tapped .place-time { transition-delay: .18s; }

  /* info al tocco (script.js): si stringono come un tasto, luce dorata dal punto toccato, rimbalzo al rilascio */
  .chips li, .features li, .codes .code, .checklist li, .rules > div {
    cursor: pointer;   /* serve a iPhone per far arrivare il tocco */
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    transition: scale .4s cubic-bezier(.3, 1.35, .5, 1), box-shadow .6s ease, color .5s ease, border-color .5s ease, background-color .5s ease;
  }
  /* colorata di giallo (gradazione in --lit, da script.js) per 3 secondi: il colore è un'ombra interna,
     così compare e scompare con una dissolvenza sopra qualsiasi sfondo */
  .chips li.is-lit, .features li.is-lit, .codes .code.is-lit, .checklist li.is-lit, .rules > div.is-lit {
    box-shadow: inset 0 0 0 200px var(--lit), 0 6px 18px rgba(11,38,7,.18);
    color: var(--lit-ink, var(--green-dark)); border-color: rgba(255,255,255,.4);
  }
  .chips li.is-lit, .codes .code.is-lit, .codes .code.is-lit * { color: var(--lit-ink, var(--green-dark)); text-shadow: none; }
  /* l'ORO (5% dei tocchi): dorato metallico con riflesso che scorre e alone */
  .chips li.is-gold, .features li.is-gold, .codes .code.is-gold, .checklist li.is-gold, .rules > div.is-gold {
    background-image: linear-gradient(115deg, #B8860B 0%, #F5D06F 22%, #FFF6C8 38%, #E8B923 52%, #FFF1A8 66%, #C9971A 82%, #F7D774 100%);
    background-size: 220% 100%;
    box-shadow: 0 0 0 1.5px #E8B923, 0 0 22px 5px rgba(232,185,35,.6), 0 6px 18px rgba(120,80,0,.3);
    color: #3B2A00; border-color: #E8B923;
  }
  .chips li.is-gold, .codes .code.is-gold * { color: #3B2A00; }
  .codes .code, .checklist li, .rules > div { position: relative; overflow: hidden; }
  .chips li, .features li, .codes .code, .checklist li, .rules > div { isolation: isolate; }   /* la luce resta sotto il testo */
  .chips li.is-pressed, .features li.is-pressed, .codes .code.is-pressed { scale: .94; transition: scale .12s ease, box-shadow .2s ease; }
  .checklist li:active, .rules > div:active { background: rgba(255,204,0,.12); }
  .features li.is-pressed { box-shadow: 0 0 0 2px rgba(255,204,0,.45), 0 4px 14px rgba(11,38,7,.12); }
  .chips li.is-pressed { box-shadow: 0 0 0 2px rgba(255,214,77,.6), 0 4px 14px rgba(0,0,0,.25); }

  /* foto delle stanze: senza mouse l'avviso resta visibile sulla foto grande */
  .pg-main .pg-hint { opacity: 1; translate: 0 0; }
  .pg-main .pg-hint .pg-hint-long { display: none; }
  .pg-main .pg-hint .pg-hint-short { display: inline; }

  /* effetto "pressione" al tocco, come i controlli di iOS */
  .pg-photo, .review-theme, .safety-photo { -webkit-tap-highlight-color: transparent; }
  .pg-photo:active, .review-theme:active, .safety-photo:active { scale: .97; transition-duration: .15s; }
  .peek:active img { scale: .95; transition: scale .15s ease; }

  /* frecce e puntini dei caroselli più facili da toccare (almeno 44 px) */
  .pgv-btn, .pv-prev, .pv-next { width: 44px; height: 44px; }
  .pgv-prev, .pgv-next, .pv-prev, .pv-next { margin-top: -22px; }
  .pgv-dots button, .pv-dots button { position: relative; }
  .pgv-dots button::after, .pv-dots button::after { content: ''; position: absolute; inset: -12px -4px; }
}
/* luce dorata che si allarga dal punto toccato (creata e animata da script.js) */
.tap-light {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,224,102,.75) 0%, rgba(255,204,0,.35) 35%, rgba(255,204,0,0) 70%);
}
/* niente stati "rimasti accesi" dopo un tocco (iPhone tiene attivo :hover fino al tocco successivo) */
@media (hover: none) {
  .btn:hover { transform: none; }
  .btn-primary:hover { background: var(--yellow); }
  .btn-outline:not(.btn-on-dark):not(.btn-garden):hover { background: transparent; color: var(--green); }
  .btn-ghost:hover { background: transparent; }
  .btn-hero-glass:hover { background: var(--white); }
  .btn-hero-primary:hover { box-shadow: 0 10px 30px rgba(255,204,0,.45), 0 2px 0 rgba(11,38,7,.15), inset 0 1px 0 rgba(255,255,255,.7); }
  .btn-outline:not(.btn-on-dark):hover .btn-arrow { background: rgba(19,74,7,.1); }
  .mini-cta:hover { transform: none; }
}


/* Safari su iPhone: le decorazioni della prima sezione e del giardino restano dentro i loro bordi
   ("clip" è più rigido di "hidden" e non viene ignorato con le animazioni in parallasse) */
.hero, .garden-nature { overflow: clip; }
/* telefoni e tablet: sopra le sezioni scure il vetro dell'header è un po' più scuro, così logo e
   menu bianchi si leggono anche sopra il titolo della prima sezione */
@media (hover: none), (pointer: coarse) {
  .on-dark .header-inner::before { background: linear-gradient(180deg, rgba(11,38,7,.46), rgba(11,38,7,.3)); }
}
/* primo piano in modalità notte: anche lì l'info toccata si colora di giallo */
@media (hover: none), (pointer: coarse) {
  #camere .features li.is-lit { box-shadow: inset 0 0 0 200px var(--lit), 0 6px 18px rgba(11,38,7,.18); color: var(--lit-ink, var(--green-dark)); border-color: rgba(255,255,255,.4); }
  #camere .features li.is-gold {
    background-image: linear-gradient(115deg, #B8860B 0%, #F5D06F 22%, #FFF6C8 38%, #E8B923 52%, #FFF1A8 66%, #C9971A 82%, #F7D774 100%);
    background-size: 220% 100%; box-shadow: 0 0 0 1.5px #E8B923, 0 0 22px 5px rgba(232,185,35,.6); color: #3B2A00;
  }
}

/* L'ORO: lampo di luce che attraversa l'info e stelline d'oro (create da script.js) */
.gold-glint {
  position: absolute; top: -10%; bottom: -10%; left: -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.95) 50%, rgba(255,255,255,0));
  transform: skewX(-20deg); mix-blend-mode: screen;
}
.gold-spark {
  position: fixed; z-index: 400; pointer-events: none;
  background: radial-gradient(circle, #FFFBE6 0%, #FFE27A 40%, #E8B000 75%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px rgba(255,236,150,1)) drop-shadow(0 0 10px rgba(255,200,40,.85));
}

/* Info utili e CIN/CIR al tocco (script.js): la riga si ingrandisce sul posto e le vicine
   scivolano per farle spazio, come il "dock" con il mouse. Niente velo, niente sfocatura. */
@media (hover: none), (pointer: coarse) {
  .codes .code, .checklist li, .rules > div {
    transition: scale .5s cubic-bezier(.3, 1.3, .5, 1), translate .5s cubic-bezier(.2, .8, .2, 1),
                box-shadow .5s ease, color .5s ease, border-color .5s ease, background-color .5s ease;
  }
  .checklist li, .rules > div { transform-origin: 50% 50%; }
  .is-touch-focus { scale: var(--tf, 1.05); z-index: 2; }
  .checklist li.is-touch-focus, .rules > div.is-touch-focus {
    background-color: rgba(255,204,0,.14); box-shadow: 0 0 0 1.5px rgba(255,204,0,.55), 0 10px 24px rgba(11,38,7,.1);
  }
  .codes .code.is-touch-focus { border-color: var(--yellow); box-shadow: 0 0 24px rgba(255,204,0,.3); }
  .is-touch-near { z-index: 1; }
}
@media (prefers-reduced-motion: reduce) { .is-touch-focus { scale: none; } }

/* Recensioni al tocco (script.js): scheda illuminata e piccole emoji che salgono */
@media (hover: none), (pointer: coarse) {
  .review-theme { cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .7s cubic-bezier(.2, .7, .2, 1),
                border-color .5s ease, box-shadow .5s ease, background-color .5s ease, scale .3s ease; }
  .review-theme.is-touched {
    border-color: rgba(255,204,0,.85); background-color: #FFFDF2;
    box-shadow: 0 0 0 3px rgba(255,204,0,.2), 0 18px 40px rgba(11,38,7,.12);
  }
  .review-theme.is-touched .rt-emoji { background: rgba(255,204,0,.38); box-shadow: 0 6px 16px rgba(240,180,0,.35); }
  .rt-emoji { transition: background-color .5s ease, box-shadow .5s ease; }
}
.rt-float {
  position: fixed; z-index: 400; pointer-events: none; font-size: 1.35rem; line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}


/* ---- Bagni: vasca con paperella accanto al titolo ---- */
.title-tub { position: relative; }
.tub-wrap {
  display: inline-block; position: relative; width: 1.5em; height: 1.18em; margin: 0 .06em 0 .2em; vertical-align: -.16em;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline: none;
}
.tub-wrap:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 8px; }
.tub { width: 100%; height: 100%; overflow: visible; transition: scale .4s cubic-bezier(.3, 1.4, .5, 1); }
@media (hover: hover) { .tub-wrap.is-excited .tub { scale: 1.12; } }
.tub-wrap:active .tub, .tub-wrap.is-pressing .tub { scale: .9; transition-duration: .15s; }
.tub-body { fill: #fff; stroke: var(--green); stroke-width: 2.4; stroke-linejoin: round; }
.tub-foot { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; }
.tub-faucet { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; }
.tub-water { fill: #9FD8F2; opacity: .9; }
.tub-drop { fill: #7CC8EC; transform-box: fill-box; transform-origin: 50% 0; animation: tubDrip 2.6s ease-in infinite; }
.duck-body, .duck-tail { fill: var(--yellow); stroke: #E0A800; stroke-width: .55; }
.duck-wing { fill: #F2B600; }
.duck-beak { fill: #FF8A3D; stroke: #E86E1F; stroke-width: .4; }
.duck-eye { fill: var(--green-dark); }
.duck-shine { fill: #fff; }
.tub-duck { transform-box: fill-box; transform-origin: 50% 90%; animation: duckBob 2.6s ease-in-out infinite; }
.tub-idle-bubble { fill: rgba(255,255,255,.9); stroke: #9FD8F2; stroke-width: .7; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: idleBubble 3.2s ease-in infinite; }
.tub-idle-bubble.ib2 { animation-delay: -1.1s; }
.tub-idle-bubble.ib3 { animation-delay: -2.2s; }
@keyframes duckBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-1.2px) rotate(4deg); } }
@keyframes idleBubble { 0% { transform: translateY(4px) scale(.4); opacity: 0; } 25% { opacity: .9; } 85% { opacity: .8; } 100% { transform: translateY(-14px) scale(1.15); opacity: 0; } }
@keyframes tubDrip { 0%, 55% { transform: translateY(0) scaleY(.6); opacity: 0; } 65% { opacity: 1; transform: translateY(0) scaleY(1); } 100% { transform: translateY(8px) scaleY(1.1); opacity: 0; } }
/* saltino della paperella (al tocco/al passaggio) */
.tub-wrap.is-splash .tub-duck { animation: duckHop .7s cubic-bezier(.3, .7, .4, 1); }
@keyframes duckHop { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-7px) rotate(-14deg); } 65% { transform: translateY(1px) rotate(6deg); } 100% { transform: translateY(0) rotate(0); } }
/* bolle di sapone */
.tub-bubble {
  position: fixed; z-index: 400; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,.15) 30%, rgba(159,216,242,.25) 70%, rgba(255,214,90,.35) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 2px 6px rgba(11,38,7,.08);
}
/* mouse sul titolo: paperella che nuota agitata, acqua che ondeggia, bollicine più frequenti */
.tub-water { transform-box: fill-box; transform-origin: 50% 100%; }
.tub-wrap.is-excited .tub-duck { animation: duckSwim .9s ease-in-out infinite; }
.tub-wrap.is-excited .tub-water { animation: tubWave .9s ease-in-out infinite; }
.tub-wrap.is-excited .tub-idle-bubble { animation-duration: 1.6s; }
.tub-wrap.is-excited .tub-drop { animation-duration: 1.2s; }
.tub-wrap.is-pressing .tub-duck { animation: duckSwim .45s ease-in-out infinite; }
@keyframes duckSwim {
  0%, 100% { transform: translate(0, 0) rotate(-9deg); }
  25% { transform: translate(-1.6px, -1.6px) rotate(3deg); }
  50% { transform: translate(-3px, 0) rotate(9deg); }
  75% { transform: translate(-1.4px, -1.2px) rotate(-2deg); }
}
@keyframes tubWave { 0%, 100% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(-2px) scaleY(1.35); } }
.wander-bubble.is-fast { box-shadow: inset 0 0 0 1px rgba(124,200,236,.6), 0 0 8px rgba(255,204,0,.35); }
@media (prefers-reduced-motion: reduce) { .tub-duck, .tub-idle-bubble, .tub-drop, .tub-water { animation: none !important; } .tub-idle-bubble { opacity: 0; } }

/* bolle che la vasca lascia ogni tanto e che vagano per la sezione Bagni (come i cuori) */
.bubble-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.wander-bubble {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.98) 0 14%, rgba(255,255,255,.2) 30%, rgba(124,200,236,.32) 68%, rgba(255,204,0,.42) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(124,200,236,.55), inset -2px -3px 6px rgba(255,204,0,.25), 0 3px 10px rgba(11,38,7,.1);
}
@media (prefers-reduced-motion: reduce) { .bubble-layer { display: none; } }

/* Recensioni al tocco / click (score-tap, script.js): voto e barre interattivi */
.score-badge { position: relative; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; transition: box-shadow .4s ease; }
.score-glint {
  position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.9) 50%, rgba(255,255,255,0));
  transform: skewX(-20deg); mix-blend-mode: screen;
}
.score-bars li {
  position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  border-radius: 12px; transition: background-color .45s ease, box-shadow .45s ease;
}
.score-bars li.is-picked { background-color: rgba(255,204,0,.14); box-shadow: 0 0 0 8px rgba(255,204,0,.14); }
.score-bars li.is-picked .sb-name { font-weight: 600; color: var(--green-dark); }
.score-bars li.is-picked .sb-bar i { box-shadow: 0 0 12px rgba(255,204,0,.75); }
.sb-val { transform-origin: 100% 50%; }
@media (hover: hover) {
  .score-badge:hover { box-shadow: 0 0 0 9px rgba(255,204,0,.22), 0 22px 46px rgba(240,180,0,.42), inset 0 2px 0 rgba(255,255,255,.6); }
  .score-bars li:hover { background-color: rgba(255,204,0,.09); box-shadow: 0 0 0 8px rgba(255,204,0,.09); }
}
.score-bars li:active { background-color: rgba(255,204,0,.16); box-shadow: 0 0 0 8px rgba(255,204,0,.16); }

/* voto 9,5 toccato: cuore che fa due respiri al posto del numero (script.js) */
.score-num { display: block; }
.score-heart {
  position: absolute; left: 50%; top: 50%; width: 52%; height: 52%; margin: -26% 0 0 -26%; pointer-events: none;
  fill: var(--green-dark); filter: drop-shadow(0 3px 6px rgba(11,38,7,.25)); overflow: visible;
}

/* ---- Firma nel footer: "Sito realizzato da Fucina Deorum" (logo color lava) ---- */
.footer-credit {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .8rem; letter-spacing: .04em; color: rgba(255,255,255,.55);
}
.fc-wrap { position: relative; display: inline-flex; }
/* il logo sta in un riquadro scuro con angoli tondi e bordo color brace */
.fc-logo {
  display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px;
  border: 1px solid rgba(255,110,0,.5); border-radius: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(160deg, rgba(40,16,6,.85), rgba(20,8,3,.85));
  box-shadow: 0 0 18px rgba(255,80,0,.22), inset 0 1px 0 rgba(255,170,90,.15);
  transition: scale .4s cubic-bezier(.3, 1.4, .5, 1), box-shadow .4s ease, border-color .4s ease;
}
.fc-logo:focus-visible { outline: 2px solid #FF7A1A; outline-offset: 3px; }
@media (hover: hover) {
  .fc-logo:hover { scale: 1.04; border-color: rgba(255,140,30,.85); box-shadow: 0 0 28px rgba(255,90,0,.45), inset 0 1px 0 rgba(255,170,90,.2); }
}
.fc-logo:active { scale: .95; transition-duration: .12s; }
.fc-wrap.is-open .fc-logo { border-color: rgba(255,140,30,.85); box-shadow: 0 0 28px rgba(255,90,0,.45), inset 0 1px 0 rgba(255,170,90,.2); }
.fc-icon, .fc-word {
  display: block; height: 44px;
  background: linear-gradient(100deg, #7A0E00, #D62400 18%, #FF5A00 34%, #FFB000 46%, #FF5A00 58%, #D62400 74%, #7A0E00 90%, #D62400);
  background-size: 300% 100%; animation: lavaFlow 7s linear infinite;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.fc-icon { --m: url("assets/fd-icon.webp"); width: 40px; }
.fc-word { --m: url("assets/fd-word.webp"); width: 170px; height: 33px; animation-delay: -1.2s; }
@media (max-width: 600px) {
  .footer-credit { flex-direction: column; gap: 10px; }
  .fc-logo { padding: 12px 18px; gap: 12px; }
  .fc-icon { width: 34px; height: 37px; }
  .fc-word { width: 146px; height: 28px; }
}
@keyframes lavaFlow { from { background-position: 0% 50%; } to { background-position: 150% 50%; } }

/* fumetto con il contatto */
.fc-pop {
  position: absolute; left: 50%; bottom: calc(100% + 16px); z-index: 20; width: max-content; max-width: min(280px, 86vw);
  display: grid; justify-items: center; gap: 4px; padding: 16px 20px 18px; text-align: center;
  border-radius: 18px; background: #1C0D06; color: #FFE7D1; letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(255,110,0,.55), 0 0 26px rgba(255,80,0,.35), 0 18px 40px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; translate: -50% 10px; scale: .9; transform-origin: 50% 100%;
  transition: opacity .3s ease, translate .45s cubic-bezier(.3, 1.3, .5, 1), scale .45s cubic-bezier(.3, 1.3, .5, 1), visibility 0s .45s;
}
.fc-pop::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: #1C0D06; rotate: 45deg; box-shadow: 1px 1px 0 rgba(255,110,0,.55);
}
.fc-wrap.is-open .fc-pop { opacity: 1; visibility: visible; translate: -50% 0; scale: 1; transition-delay: 0s; }
.fc-pop, .fc-label { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.fc-label { font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.fc-q { font: 600 .98rem/1.3 'Unbounded', 'Inter', system-ui, sans-serif; letter-spacing: -.01em; color: #fff; }
.fc-a { font-size: .88rem; font-weight: 400; letter-spacing: .005em; color: rgba(255,231,209,.82); }
.fc-num {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 18px; border-radius: 99px;
  font: 600 .95rem/1.2 'Inter', system-ui, sans-serif; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #2A0A00; text-decoration: none;
  background: linear-gradient(100deg, #FF5A00, #FFB000 50%, #FF5A00); background-size: 200% 100%;
  animation: lavaFlow 4s linear infinite; box-shadow: 0 6px 18px rgba(255,90,0,.4);
}
.site-footer .fc-num { border: 0; color: #2A0A00; }
.fc-num svg { width: 16px; height: 16px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .fc-icon, .fc-word, .fc-num { animation: none; } }