/* La Casa di Mimì — step 5: la home dal design del kit (home-approvata.png), rifinita.
   Caratteri (il kit non li ha, scelti i più simili al design e serviti dal sito):
   Newsreader (titoli, col corsivo di «da abitare.») e Figtree (testi), licenza OFL. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader Ripiego";
  src: local("Georgia");
  size-adjust: 91%;
  ascent-override: 80%;
  descent-override: 29%;
  line-gap-override: 0%;
}

/* I colori: misurati sul design (confronta-design.py --colori) e i sei del kit (tavole/kit-grafico.png). */
:root {
  --calce: #F6F4EF;          /* fondo della pagina */
  --calce-calda: #F4F0E9;    /* video e posizione */
  --calce-scura: #F1EBE3;    /* striscia sotto la hero e piede */
  --carta: #F8F6F2;          /* scheda del calendario e campi */
  --salvia: #D5D8C3;         /* kit · Salvia */
  --oliva: #4A503D;          /* kit · Oliva */
  --oliva-scuro: #333729;    /* il pulsante di WhatsApp */
  --icone: #686D5D;          /* kit · Icone */
  --ulivo: #8B916A;          /* kit · Ulivo */
  --accento: #A4AD96;        /* kit · Accento */
  --inchiostro: #1F201C;     /* titoli */
  --testo: #3A3936;          /* testi */
  --testo-tenue: #6E6A64;    /* testi secondari */
  --testo-chiaro: #8C8580;   /* link legali */
  --bianco: #FFFFFF;
  --linea: #E4E1D6;          /* separatori */

  --serif: "Newsreader", "Newsreader Ripiego", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(16px, 5.2vw, 75px);
  --largo: 1310px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --testata-h: 96px;
}

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--calce);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a, button, select, [role="button"] { touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button, .btn, .cal__giorno, .testata__nav a, .menu-tel__nav a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .testata:not(.testata--piena) :focus-visible { outline-color: var(--bianco); }

.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--oliva-scuro); color: var(--bianco);
  padding: 10px 18px; border-radius: 999px;
  transition: transform .2s var(--ease-out);
}
.salta:focus { transform: translateY(76px); }

.contenitore {
  width: 100%;
  max-width: calc(var(--largo) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.ico { width: 24px; height: 24px; flex: none; color: var(--icone); }
.ico--freccia { width: 20px; height: 20px; color: currentColor; }
.striscia .ico, .dispo .ico, .elenco-icone .ico, .occhiello--icona .ico { color: var(--oliva); --tratto: 2.1; }
.dispo .btn .ico { color: currentColor; }
.cal__freccia .ico { color: var(--inchiostro); }

/* occhiello: maiuscoletto spaziato */
.occhiello {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--testo);
  line-height: 1.4;
}
.occhiello--chiaro { color: var(--bianco); }
.occhiello--icona { display: flex; align-items: center; gap: 14px; }
.occhiello--icona .ico { width: 30px; height: 30px; }

.titolo-2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.15rem, 4.3vw, 3.9rem);
  line-height: 1.07;
  letter-spacing: -.018em;
  color: var(--inchiostro);
  text-wrap: balance;
}
.accento { display: block; width: 64px; height: 1px; background: var(--accento); }

/* ── pulsanti ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 30px;
  border-radius: 999px;
  font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .14s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn .ico { width: 22px; height: 22px; color: currentColor; }
.btn--chiaro { border: 1.5px solid rgba(255, 255, 255, .92); color: var(--bianco); }
.btn--contorno { border: 1.5px solid currentColor; }
.btn--contorno-scuro { border: 1.5px solid var(--oliva-scuro); color: var(--oliva-scuro); }
.btn--scuro { background: var(--oliva-scuro); color: var(--bianco); }

.link-freccia {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  color: var(--inchiostro);
  font-size: 17px;
  transition: color .2s ease;
}
.link-freccia .ico--freccia { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
.link-freccia:active { transform: scale(.98); }

@media (hover: hover) and (pointer: fine) {
  .btn--chiaro:hover { background: var(--bianco); color: var(--inchiostro); }
  .btn--scuro:hover { background: var(--oliva); }
  .btn--contorno-scuro:hover { background: var(--oliva-scuro); color: var(--bianco); }
  .testata .btn--contorno:hover { background: var(--bianco); color: var(--inchiostro); border-color: var(--bianco); }
  .testata--piena .btn--contorno:hover { background: var(--oliva-scuro); color: var(--bianco); border-color: var(--oliva-scuro); }
  .link-freccia:hover { color: var(--oliva); }
  .link-freccia:hover .ico--freccia { transform: translateX(4px); }
}

/* ── testata ────────────────────────────────────────────────────────────── */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--bianco);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.testata--piena {
  background: var(--calce);
  color: var(--inchiostro);
  box-shadow: 0 1px 0 var(--linea);
}
.testata__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--testata-h);
}
.testata__nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.testata__nav a {
  position: relative;
  font-size: clamp(17px, 1.39vw, 20px); font-weight: 400;
  padding: 10px 0;
  white-space: nowrap;
}
.testata__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .testata__nav a:hover::after { transform: scaleX(1); }
}
.testata__logo {
  position: relative;
  display: block;
  width: 143px;
  margin-top: 24px;
  transform-origin: 50% 0;
  transition: transform .35s var(--ease-out);
}
.testata__logo img { width: 100%; height: auto; transition: opacity .3s ease; }
.testata__logo-scuro { position: absolute; inset: 0; opacity: 0; }
.testata--piena .testata__logo { transform: translateY(-18px) scale(.5); }
.testata--piena .testata__logo-chiaro { opacity: 0; }
.testata--piena .testata__logo-scuro { opacity: 1; }
.testata__dx { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2.4vw, 36px); }
.testata__cta { min-height: 56px; padding: 0 30px; font-size: clamp(16px, 1.25vw, 18px); }
.testata__menu {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-right: -10px;
  border-radius: 999px;
}
.testata__menu .ico { width: 28px; height: 28px; color: currentColor; }
.testata__menu:active { transform: scale(.94); }

/* il posto del selettore delle lingue: vuoto (e invisibile) fino allo step 9-ter */
.lingue-posto { display: flex; align-items: center; min-height: 44px; }
.lingue-posto:empty { display: none; }

/* menu da telefono, a tutto schermo */
.menu-tel {
  position: fixed; inset: 0; z-index: 60;
  height: 100dvh;
  display: flex; flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: var(--calce);
  color: var(--inchiostro);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .18s ease, transform .18s var(--ease-out);
}
.menu-tel[hidden] { display: none; }
.menu-tel.aperto { opacity: 1; transform: none; transition: opacity .28s ease, transform .32s var(--ease-out); }
.menu-tel__testa { display: flex; align-items: center; justify-content: space-between; }
.menu-tel__logo { width: 72px; }
.menu-tel__chiudi { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-right: -8px; }
.menu-tel__chiudi .ico { width: 28px; height: 28px; color: var(--inchiostro); }
.menu-tel__nav { display: flex; flex-direction: column; margin-top: 40px; }
.menu-tel__nav a {
  font-family: var(--serif); font-size: 34px; line-height: 1.2;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
}
.menu-tel__nav a:active { color: var(--oliva); }
.menu-tel__fondo { margin-top: auto; padding-top: 32px; display: grid; gap: 16px; }
.menu-tel__chiama { text-align: center; color: var(--testo); }
.menu-tel__chiama a { color: var(--inchiostro); font-weight: 500; }

/* ── 1 · hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: clamp(620px, 100svh, 940px);
  color: var(--bianco);
  overflow: hidden;
  background: #775435;
}
.hero__media { position: absolute; inset: -4% 0 -4% 0; will-change: transform; }
.hero__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 60%;
  transform-origin: 50% 62%;
  animation: respira 22s ease-in-out infinite alternate;
}
.hero__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(38, 27, 17, .55) 0%, rgba(38, 27, 17, .32) 34%, rgba(38, 27, 17, 0) 62%),
    linear-gradient(180deg, rgba(30, 21, 13, .38) 0%, rgba(30, 21, 13, 0) 20%);
}
.hero__testo {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-top: 40px; padding-bottom: 60px;
}
.hero__titolo {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.3rem, 8.4vw, 7.6rem);
  line-height: .96;
  letter-spacing: -.022em;
  text-shadow: 0 2px 24px rgba(30, 20, 12, .18);
}
.hero__titolo em { font-style: italic; font-weight: 400; letter-spacing: -.012em; }
.hero__sotto {
  margin-top: 30px;
  font-size: clamp(1.06rem, 1.98vw, 1.8rem);
  line-height: 1.5;
  max-width: 34ch;
}
.hero__cta { margin-top: 46px; min-height: 66px; padding: 0 42px; font-size: 21px; }
.hero__cta .ico--freccia { width: 22px; height: 22px; }
.hero__chiama { margin-top: 18px; font-size: 16px; animation: entra-su .9s var(--ease-out) .78s both; }
.hero__chiama a { display: inline-block; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .6); line-height: 1.2; transition: border-color .2s ease; }
@media (min-width: 1200px) and (min-height: 760px) {
  .hero__testo { padding-top: 220px; padding-left: calc(max(var(--gutter), env(safe-area-inset-left, 0px)) + 38px); }
}

/* striscia sotto la hero, col raccordo del kit */
.striscia { position: relative; z-index: 2; margin-top: -58px; color: var(--calce-scura); }
.striscia__forma { display: block; width: 100%; height: 60px; margin-bottom: -1px; }
.striscia__lista {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--calce-scura);
  max-width: none;
  padding-top: 2px; padding-bottom: 36px;
  color: var(--testo);
}
.striscia__lista li {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  min-height: 60px;
  font-size: 18px; line-height: 1.4;
}
.striscia__lista li + li { border-left: 1px solid rgba(104, 109, 93, .32); }
.striscia__lista a { display: inline-flex; align-items: center; gap: 22px; min-height: 52px; transition: color .2s ease; }
.striscia__lista .ico { width: 45px; height: 45px; }
.striscia__lista a .ico--freccia { width: 18px; height: 18px; margin-left: -12px; transition: transform .2s var(--ease-out); }
.striscia__lista a:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .striscia__lista a:hover { color: var(--oliva); }
  .striscia__lista a:hover .ico--freccia { transform: translateX(4px); }
}

/* ── 2 · disponibilità ─────────────────────────────────────────────────── */
.dispo {
  position: relative;
  background: var(--salvia) url("../img/disponibilita-salvia.svg") left top / 1440px auto no-repeat;
  padding: 72px 0 76px;
}
.dispo__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 360px);
  gap: 40px 48px;
  align-items: start;
}
.dispo__intro { padding-top: 40px; }
.dispo__titolo { margin-top: 22px; font-size: clamp(2.1rem, 3.1vw, 2.8rem); line-height: 1.1; letter-spacing: -.024em; max-width: 11em; }
.dispo__intro .accento { margin-top: 34px; background: var(--icone); opacity: .6; }
.dispo__prezzo {
  margin-top: 30px;
  font-family: var(--serif); font-size: clamp(1.9rem, 2.6vw, 2.35rem); line-height: 1.1;
  color: var(--inchiostro);
}
.dispo__nota { margin-top: 10px; font-size: 16px; color: var(--testo); }

.cal {
  background: var(--carta);
  border-radius: 16px;
  padding: 22px 24px 20px;
  box-shadow: 0 1px 2px rgba(51, 55, 41, .05), 0 12px 32px -18px rgba(51, 55, 41, .25);
}
.cal__testa { display: flex; align-items: center; justify-content: space-between; }
.cal__mese { font-size: 18px; font-weight: 500; color: var(--inchiostro); text-transform: capitalize; }
.cal__freccia {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 999px;
  transition: background-color .2s ease, opacity .2s ease, transform .14s var(--ease-out);
}
.cal__freccia .ico { width: 20px; height: 20px; color: var(--inchiostro); }
.cal__freccia:active { transform: scale(.94); }
.cal__freccia:disabled { opacity: .28; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .cal__freccia:not(:disabled):hover { background: rgba(213, 216, 195, .55); }
}
.cal__settimana, .cal__giorni { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__settimana { margin-top: 18px; }
.cal__settimana span { text-align: center; font-size: 13px; color: var(--testo-tenue); }
.cal__giorni { margin-top: 8px; row-gap: 4px; }
.cal__vuoto { display: block; }
.cal__giorno {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 44px;
  font-size: 16px; color: var(--testo);
  font-variant-numeric: tabular-nums;
  transition: color .15s ease, background-color .15s ease;
}
.cal__giorno::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 999px;
  background: transparent;
  transition: background-color .15s ease, transform .14s var(--ease-out);
  z-index: -1;
}
.cal__giorno { z-index: 0; }
.cal__giorno:active::before { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) {
  .cal__giorno:not(:disabled):hover::before { background: rgba(213, 216, 195, .7); }
}
.cal__giorno--oggi { font-weight: 600; color: var(--inchiostro); }
.cal__giorno--oggi::after {
  content: ""; position: absolute; left: 50%; bottom: 7px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--ulivo);
}
.cal__giorno:disabled { cursor: default; }
.cal__giorno--passato { color: rgba(58, 57, 54, .3); }
.cal__giorno--occupato { color: rgba(58, 57, 54, .38); text-decoration: line-through; text-decoration-color: rgba(58, 57, 54, .45); }
.cal__giorno--dentro { background: rgba(213, 216, 195, .62); }
.cal__giorno--arrivo { background: linear-gradient(90deg, transparent 50%, rgba(213, 216, 195, .62) 50%); }
.cal__giorno--partenza { background: linear-gradient(90deg, rgba(213, 216, 195, .62) 50%, transparent 50%); }
.cal__giorno--arrivo.cal__giorno--partenza, .cal__giorno--solo { background: none; }
.cal__giorno--arrivo, .cal__giorno--partenza { color: var(--bianco); font-weight: 500; }
.cal__giorno--arrivo::before, .cal__giorno--partenza::before { background: var(--oliva-scuro); }
.cal__giorno--arrivo::after, .cal__giorno--partenza::after { background: var(--bianco); }
.cal__piede {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 8px;
  border-top: 1px solid var(--linea);
}
.cal__legenda { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--testo-tenue); }
.cal__cancella {
  min-height: 40px; padding: 0 2px;
  font-size: 13px; color: var(--inchiostro);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accento);
}
.cal__cancella:active { transform: scale(.97); }
.cal__chiave { width: 12px; height: 12px; border-radius: 50%; }
.cal__chiave--libero { border: 1px solid var(--icone); }
.cal__chiave--occupato { margin-left: 14px; background: rgba(58, 57, 54, .18); }

.dispo__campi { display: flex; flex-direction: column; }
.campo__etichetta { display: block; font-size: 16px; color: var(--testo); margin: 0 0 6px; line-height: 1.3; }
.campo__etichetta:not(:first-child) { margin-top: 14px; }
.campo {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 58px;
  padding: 0 18px;
  background: var(--carta);
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  font-size: 16px; color: var(--testo);
  transition: border-color .2s ease, box-shadow .2s ease, transform .14s var(--ease-out);
}
.campo .ico { width: 22px; height: 22px; }
.campo .ico--giu { width: 18px; height: 18px; margin-left: auto; color: var(--inchiostro); }
.campo__valore { flex: 1; }
button.campo:active { transform: scale(.985); }
.campo--attivo { border-color: var(--oliva); box-shadow: 0 0 0 3px rgba(74, 80, 61, .12); }
.campo--pieno .campo__valore { color: var(--inchiostro); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .campo:hover { border-color: rgba(74, 80, 61, .35); }
}
.campo--scelta select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0 48px 0 54px;
  border: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--testo);
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  border-radius: 10px;
}
.campo--scelta .ico--giu { pointer-events: none; }
.campo--scelta .ico { pointer-events: none; position: relative; z-index: 1; }
.campo--scelta:focus-within { border-color: var(--oliva); }
.dispo__stato { margin-top: 14px; min-height: 1.5em; font-size: 15px; color: var(--oliva-scuro); font-weight: 500; }
.dispo__stato--avviso { color: #7A3B2E; }
.dispo__wa { margin-top: 10px; width: 100%; min-height: 56px; font-size: 18px; }
.dispo__wa .ico { width: 24px; height: 24px; }
.dispo__chiama { margin-top: 14px; font-size: 18px; color: var(--testo); }
.dispo__chiama a { color: var(--inchiostro); font-weight: 500; white-space: nowrap; }
.dispo__piccolo { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--testo-tenue); }

/* ── 3 · la casa ───────────────────────────────────────────────────────── */
.intro { padding: 88px 0 44px; }
.intro__griglia {
  display: grid;
  grid-template-columns: minmax(0, 677fr) minmax(0, 570fr);
  gap: clamp(32px, 4.6vw, 64px);
  align-items: center;
}
.arco { overflow: hidden; background: var(--calce-scura); }
.intro__foto { aspect-ratio: 677 / 620; border-radius: 27% 27% 0 0 / 29% 29% 0 0; }
.intro__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.intro__sole { width: 56px; height: 56px; }
.intro__testo .occhiello { margin-top: 14px; }
.intro__testo .titolo-2 { margin-top: 18px; }
.intro__paragrafo { margin-top: 26px; font-size: 18px; line-height: 1.85; max-width: 34em; }
.servizi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 48px;
  max-width: 560px;
}
.servizi li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; font-size: 16px; line-height: 1.3; color: var(--testo); }
.servizi .ico { width: 46px; height: 46px; }

/* ── 4 · gli appartamenti ─────────────────────────────────────────────── */
.appartamenti { padding: 52px 0 72px; }
.appartamenti .titolo-2 { margin-top: 10px; }
.appartamenti__sotto { margin-top: 12px; font-size: 18px; color: var(--testo); }
.appartamenti__griglia {
  display: grid;
  grid-template-columns: minmax(0, 675fr) minmax(0, 605fr);
  gap: 28px;
  margin-top: 36px;
}
.app__foto { height: clamp(260px, 30.6vw, 440px); overflow: hidden; background: var(--calce-scura); }
.app__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.app__titolo { margin-top: 20px; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--inchiostro); letter-spacing: -.01em; }
.app__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 16px; color: var(--testo); }
.app__meta .ico { width: 28px; height: 28px; margin-right: -4px; }
.app__capienza { display: inline-flex; align-items: center; gap: 14px; }
.app__sep { width: 1px; height: 18px; background: rgba(104, 109, 93, .45); }
.app .link-freccia { margin-top: 16px; }
@media (min-width: 768px) {
  .app:nth-child(2) .app__foto { height: calc(clamp(260px, 30.6vw, 440px) + 38px); margin-top: -38px; }
}

/* ── 5 · video ─────────────────────────────────────────────────────────── */
.video { background: var(--calce-calda); padding: 64px 0; }
.video__griglia {
  display: grid;
  grid-template-columns: minmax(0, 420px) auto;
  justify-content: start;
  gap: clamp(32px, 4vw, 40px);
  align-items: center;
}
.video__testo .titolo-2 { margin-top: 14px; font-size: clamp(2.15rem, 4vw, 3.6rem); }
.video__testo .accento { margin-top: 34px; background: var(--icone); opacity: .6; }
.video__paragrafo { margin-top: 30px; font-size: 18px; line-height: 1.75; max-width: 19em; }
.video__serie { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 28px; }
.clip__box {
  position: relative;
  aspect-ratio: 16 / 25;
  border-radius: 10px;
  overflow: hidden;
  background: var(--calce-scura);
  isolation: isolate;
}
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip__play {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .18));
  transition: opacity .3s ease, transform .3s var(--ease-out);
  pointer-events: none;
}
.clip--in-onda .clip__play { opacity: 0; transform: scale(.9); }
.clip__audio {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  min-height: 44px; padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--inchiostro);
  font-size: 14px; font-weight: 500; line-height: 1.25;
  transition: background-color .2s ease, color .2s ease, transform .14s var(--ease-out);
}
.clip__audio:active { transform: scale(.97); }
.clip__audio[aria-pressed="true"] { background: var(--oliva-scuro); color: var(--bianco); }
.clip figcaption { margin-top: 12px; font-size: 18px; color: var(--testo); }

/* ── 6 · la posizione ─────────────────────────────────────────────────── */
.posizione {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 880fr);
  align-items: center;
  background: var(--calce-calda);
  overflow: hidden;
}
.posizione__foto { height: clamp(320px, 31vw, 450px); overflow: hidden; background: var(--calce-scura); }
.posizione__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 2%; }
.posizione__testo {
  position: relative; z-index: 1;
  padding: 48px max(var(--gutter), env(safe-area-inset-right, 0px)) 48px clamp(32px, 5vw, 72px);
}
.occhiello--bussola .ico { width: 34px; height: 34px; }
.posizione__testo .titolo-2 { margin-top: 18px; }
.elenco-icone { display: grid; gap: 12px; margin-top: 26px; font-size: 18px; color: var(--testo); }
.elenco-icone li { display: flex; align-items: center; gap: 18px; }
.elenco-icone .ico { width: 32px; height: 32px; }
.elenco-icone__link { margin-left: 8px; font-size: 15px; color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accento); white-space: nowrap; }
.posizione .link-freccia { margin-top: 26px; }
.posizione__ramo {
  position: absolute; right: -58px; top: 18px;
  width: clamp(120px, 16vw, 236px); height: auto;
  pointer-events: none;
}

/* ── piede ─────────────────────────────────────────────────────────────── */
.piede { background: var(--calce-scura); padding: 44px 0 30px; color: var(--testo); }
.piede__riga {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: center;
}
.piede__logo { width: 116px; margin: 0 60px 0 38px; }
.piede__logo img { width: 100%; }
.piede__blocco, .piede__legali { border-left: 1px solid rgba(104, 109, 93, .35); }
.piede__blocco { padding: 4px 48px; font-size: 16px; line-height: 1.5; color: var(--testo-tenue); }
.piede__titolo { font-size: 18px; color: var(--inchiostro); }
.piede__titolo a { color: inherit; }
.piede__blocco .piede__legale { margin-top: 2px; font-size: 14px; }
.piede__blocco a { color: inherit; white-space: nowrap; }
.piede__legali { display: flex; gap: 12px; padding: 4px 0 4px 48px; font-size: 16px; color: var(--testo-chiaro); }
.piede__legali a { padding: 6px 0; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .piede__legali a:hover, .piede__blocco a:hover, .piede__fondo a:hover { color: var(--inchiostro); }
}
.piede__fondo {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--linea);
  font-size: 13px; line-height: 1.6; color: var(--testo-tenue);
}
.piede__fondo .credit a { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; }
.piede__fondo { align-items: flex-end; }
.piede__dati a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(110, 106, 100, .45); }
.thk-avviso-modulo { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--testo-tenue); }
.thk-avviso-modulo a { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; }
.thk-cin { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--testo-tenue); }
.thk-nota-foto { margin-top: 22px; font-size: 13px; line-height: 1.55; color: var(--testo-tenue); max-width: 60em; }

/* barra in basso, solo da telefono */
.barra-tel { display: none; }

/* ── tablet e telefono ─────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  :root { --testata-h: 76px; }
  .testata__in { grid-template-columns: auto 1fr; }
  .testata__nav { display: none; }
  .testata__logo { width: 76px; margin-top: 10px; transform-origin: 0 0; }
  .testata--piena .testata__logo { transform: translateY(-4px) scale(.74); }
  .testata__menu { display: inline-flex; }
  .testata__dx { gap: 14px; }
  .testata__cta { min-height: 44px; padding: 0 22px; font-size: 16px; }

  .dispo__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dispo__intro { grid-column: 1 / -1; padding-top: 0; }
  .dispo__titolo { max-width: 13em; font-size: clamp(2.1rem, 4.4vw, 2.8rem); }
  .posizione__ramo { opacity: .7; }
}

@media (max-width: 899px) {
  .intro__griglia, .video__griglia { grid-template-columns: 1fr; }
  .intro__foto { max-width: 520px; }
  .video__serie { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
  .posizione { grid-template-columns: 1fr; }
  .posizione__foto { height: clamp(260px, 62vw, 420px); }
  .posizione__testo { padding: 40px max(var(--gutter), env(safe-area-inset-right, 0px)) 52px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .posizione__ramo { top: auto; bottom: 18px; right: -30px; width: 110px; }
  .piede__riga { grid-template-columns: auto 1fr; row-gap: 24px; }
  .piede__blocco, .piede__legali { border-left: 0; }
  .piede__logo { grid-row: span 3; margin: 0 32px 0 0; }
  .piede__blocco, .piede__legali { padding: 0; }
}

@media (max-width: 767px) {
  body { font-size: 16px; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  :root { --testata-h: 64px; }
  html { scroll-padding-top: 72px; }
  .testata__logo { width: 64px; margin-top: 8px; }
  .testata--piena .testata__logo { transform: translateY(-3px) scale(.78); }
  .testata__cta { display: none; }

  .hero { height: max(560px, 100svh); }
  .hero__foto { object-position: 50% 50%; }
  .hero__velo {
    background:
      linear-gradient(0deg, rgba(34, 24, 15, .72) 0%, rgba(34, 24, 15, .38) 42%, rgba(34, 24, 15, 0) 68%),
      linear-gradient(180deg, rgba(30, 21, 13, .42) 0%, rgba(30, 21, 13, 0) 22%);
  }
  .hero__testo { justify-content: flex-end; padding-bottom: 96px; }
  .hero__titolo { font-size: clamp(3rem, 14.4vw, 4.2rem); margin-top: 12px; }
  .hero__sotto { margin-top: 18px; }
  .hero__cta { margin-top: 26px; min-height: 52px; font-size: 17px; padding: 0 28px; }
  .hero__chiama { margin-top: 8px; font-size: 15px; }
  .occhiello { font-size: 12px; letter-spacing: .2em; }

  .striscia { margin-top: -28px; }
  .striscia__forma { display: none; }
  .striscia__lista {
    grid-template-columns: 1fr;
    border-radius: 26px 26px 0 0;
    padding-top: 16px; padding-bottom: 18px;
  }
  .striscia__lista li { justify-content: flex-start; gap: 16px; font-size: 16px; min-height: 56px; }
  .striscia__lista li + li { border-left: 0; border-top: 1px solid rgba(104, 109, 93, .22); }
  .striscia__lista a { gap: 16px; }
  .striscia__lista .ico { width: 30px; height: 30px; }
  .striscia__lista br { display: none; }

  .dispo { padding: 56px 0 60px; background-size: 900px auto; }
  .dispo__griglia { grid-template-columns: 1fr; gap: 28px; }
  .dispo__titolo { font-size: 2.25rem; }
  .dispo__intro .accento { margin-top: 24px; }
  .dispo__prezzo { margin-top: 20px; }
  .cal { padding: 16px 12px 16px; }
  .cal__giorno { height: 44px; font-size: 16px; }
  .cal__giorno::before { width: 40px; height: 40px; margin: -20px 0 0 -20px; }

  .intro { padding: 64px 0 36px; }
  .intro__foto { aspect-ratio: 480 / 560; border-radius: 50% 50% 0 0 / 26% 26% 0 0; max-width: none; }
  .intro__paragrafo { font-size: 16.5px; line-height: 1.75; margin-top: 18px; }
  .servizi { margin-top: 32px; gap: 6px; }
  .servizi li { font-size: 14px; }
  .servizi .ico { width: 38px; height: 38px; }

  .appartamenti { padding: 40px 0 60px; }
  .appartamenti__sotto { font-size: 16px; }
  .appartamenti__griglia {
    display: flex; gap: 14px;
    margin: 28px calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))) 0;
    padding: 0 max(var(--gutter), env(safe-area-inset-left, 0px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .appartamenti__griglia::-webkit-scrollbar { display: none; }
  .app { flex: 0 0 84%; scroll-snap-align: start; }
  .app__foto { height: auto; aspect-ratio: 4 / 3; }
  .app__titolo { font-size: 26px; margin-top: 16px; }
  .app__meta { font-size: 15px; }
  .app__sep { display: none; }
  .app__capienza { flex-basis: 100%; padding-left: 38px; margin-top: -4px; }

  .video { padding: 56px 0 60px; }
  .video__testo .accento { margin-top: 22px; }
  .video__paragrafo { margin-top: 18px; font-size: 16.5px; }
  .video__serie { gap: 12px; }
  .clip__audio { left: 6px; right: 6px; bottom: 6px; min-height: 40px; font-size: 11.5px; padding: 4px 6px; white-space: nowrap; letter-spacing: -.01em; }
  .clip figcaption { font-size: 16px; margin-top: 10px; }

  .elenco-icone { font-size: 16px; }
  .elenco-icone .ico { width: 28px; height: 28px; }

  .piede { padding: 40px 0 24px; text-align: center; }
  .piede__riga { grid-template-columns: 1fr; justify-items: center; row-gap: 20px; }
  .piede__logo { grid-row: auto; width: 104px; margin: 0; }
  .piede__legali { justify-content: center; }
  .piede__fondo { flex-direction: column; align-items: center; text-align: center; margin-top: 28px; }

  .barra-tel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 1fr auto; gap: 10px;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--calce);
    border-top: 1px solid var(--linea);
  }
  .barra-tel .btn { min-height: 52px; padding: 0 18px; font-size: 15.5px; }
}

@media (max-width: 359px) {
  .hero__titolo { font-size: 2.75rem; }
  .barra-tel .btn { font-size: 14.5px; }
  .servizi li { font-size: 12.5px; }
  .barra-tel .btn { padding: 0 16px; }
}

/* ── 5-bis · il movimento (regole di Emil Kowalski: transform e opacity, curve di :root) ── */
@keyframes entra-su { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes entra-giu { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes respira { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes ondeggia { from { transform: rotate(-3deg); } to { transform: rotate(2.5deg); } }
@keyframes punto { from { transform: scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes mese-avanti { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes mese-indietro { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* la prima schermata entra al caricamento, senza aspettare il JavaScript (la foto no: è subito lì) */
.testata { animation: entra-giu .7s var(--ease-out) .05s both; }
.hero__testo > .occhiello { animation: entra-su .8s var(--ease-out) .15s both; }
.hero__titolo { animation: entra-su .9s var(--ease-out) .25s both; }
.hero__titolo em { display: inline-block; animation: entra-su .9s var(--ease-out) .42s both; }
.hero__sotto { animation: entra-su .9s var(--ease-out) .56s both; }
.hero__cta { animation: entra-su .9s var(--ease-out) .68s both; }

/* le sezioni compaiono scorrendo, una volta sola (.reveal → .in) */
html.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--rit, 0s);
}
html.js .reveal.in { opacity: 1; transform: none; }
/* le foto si «posano» mentre entrano */
html.js .intro__foto.reveal img, html.js .posizione__foto.reveal img {
  transform: scale(1.08);
  transition: transform 1.4s var(--ease-out);
  transition-delay: var(--rit, 0s);
}
html.js .intro__foto.reveal.in img, html.js .posizione__foto.reveal.in img { transform: none; }

/* il ramo d'ulivo si muove piano, come al vento */
.posizione__ramo { transform-origin: 28% 96%; animation: ondeggia 7s ease-in-out infinite alternate; }

/* calendario: il giorno scelto si posa, il mese scorre nella direzione giusta */
.cal__giorno--arrivo::before, .cal__giorno--partenza::before { animation: punto .22s var(--ease-out); }
.cal__giorni--avanti { animation: mese-avanti .24s var(--ease-out); }
.cal__giorni--indietro { animation: mese-indietro .24s var(--ease-out); }

/* barra da telefono: si fa da parte sul calendario e sul piede (esce più in fretta di come entra) */
.barra-tel { transition: transform .32s var(--ease-out); }
.barra-tel--via { transform: translateY(110%); transition-duration: .2s; }

@media (hover: hover) and (pointer: fine) {
  .hero__chiama a:hover { border-color: var(--bianco); }
  .elenco-icone__link:hover, .cal__cancella:hover { color: var(--oliva); }
  .app__foto img { transition: transform .28s ease; }
  .app:hover .app__foto img { transform: scale(1.04); }
  .clip video { transition: transform .28s ease; }
  .clip:hover video { transform: scale(1.035); }
  .striscia__lista li .ico, .servizi .ico { transition: transform .25s var(--ease-out); }
  .striscia__lista li:hover .ico, .servizi li:hover .ico { transform: translateY(-3px); }
}

/* ── pagine legali e 404 (testi dei modelli, così come sono) ──────────── */
.pagina-legale { padding: calc(var(--testata-h) + 72px) 0 96px; min-height: 70vh; }
.legale { max-width: 760px; }
.legale h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.018em; color: var(--inchiostro); }
.legale h1 + p { margin-top: 12px; font-size: 14px; color: var(--testo-tenue); }
.legale h2 { margin-top: 44px; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.2; color: var(--inchiostro); }
.legale p, .legale ul, .legale ol { margin-top: 14px; }
.legale ul, .legale ol { padding-left: 1.3em; }
.legale ul { list-style: disc; }
.legale ol { list-style: decimal; }
.legale li + li { margin-top: 8px; }
.legale li::marker { color: var(--ulivo); }
.legale a { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accento); }
.legale table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linea); }
.legale th { font-weight: 600; color: var(--inchiostro); }
.pagina-404 { max-width: 640px; }
.pagina-404 .titolo-2 { margin-top: 14px; }
.pagina-404 p:not(.occhiello) { margin-top: 18px; font-size: 18px; }
.pagina-404 .btn { margin-top: 30px; }
@media (max-width: 767px) {
  .pagina-legale { padding: calc(var(--testata-h) + 40px) 0 64px; }
  .legale table, .legale thead, .legale tbody, .legale tr, .legale th, .legale td { display: block; }
  .legale thead { display: none; }
  .legale tr { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .legale td { border: 0; padding: 2px 0; }
  .legale td:first-child { font-weight: 600; color: var(--inchiostro); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .testata__logo, .menu-tel, .menu-tel.aperto { transition-property: opacity; }
  @keyframes entra-su { from { opacity: 0; } to { opacity: 1; } }
  @keyframes entra-giu { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mese-avanti { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mese-indietro { from { opacity: 0; } to { opacity: 1; } }
  html.js .reveal { transform: none; transition: opacity .6s ease; transition-delay: var(--rit, 0s); }
  html.js .intro__foto.reveal img, html.js .posizione__foto.reveal img { transform: none; transition: none; }
  .hero__foto, .posizione__ramo { animation: none; }
  .hero__media { transform: none !important; }
  .barra-tel, .barra-tel--via { transition: opacity .2s ease; }
  .barra-tel--via { transform: none; opacity: 0; pointer-events: none; }
}