/* A Casa Mia · style.css
   Design: Design/kit/design-a-casa-mia/home-approvata.png (ChatGPT), seguito fedele e rifinito.
   Colori misurati sul design (confronta-design.py --colori e campioni sulle sezioni).
   Caratteri (il kit non li ha, i più simili, serviti dal sito):
   - Newsreader (variabile, opsz 6-72): titoli e testi, serif ad alto contrasto; il corsivo per «Dentro casa.»
   - Inter (variabile): menu, pulsanti, occhielli, etichette del calendario */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-latin.woff2") format("woff2");
  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: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  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: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
}

:root {
  /* fondi */
  --crema: #FBF8F3;
  --sabbia: #F6F0E7;
  --carta: #FDFAF6;
  --bianco: #FFFFFF;
  --salvia: #EAE9DA;
  /* testi */
  --inchiostro: #1D2227;
  --testo: #3E474F;
  --testo-tenue: #6A7076;
  /* marchio */
  --terracotta: #B94A31;
  --rosso: #C23A22;
  --invito: #B54F33;
  --oliva: #5B5F40;
  /* calendario */
  --libero: #EEF3E2;
  --fra: #F3E9DF;
  --occupato: #E2DDD3;
  --bordo: #E8E4DC;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raggio: 14px;
  --ombra: 0 1px 2px rgba(29, 34, 39, .04), 0 10px 30px -12px rgba(29, 34, 39, .14);
  --testata-h: 104px;
  --margine: 40px;
  /* le curve del movimento (Emil Kowalski, 09 § 0-bis-2): entrate e uscite, spostamenti sullo schermo */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--testata-h) + 8px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--testo);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, select, label { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--inchiostro); color: var(--bianco); padding: 10px 16px; border-radius: 8px;
  font-family: var(--sans); font-size: 15px; text-decoration: none;
}
.salta:focus { top: 12px; }

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

.occhiello {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rosso);
  margin-bottom: 14px;
}
.occhiello--oliva { color: var(--oliva); }

.titolo-sezione {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--inchiostro);
}
.titolo-sezione em { font-style: italic; color: var(--rosso); }
.titolo-sezione--medio { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.05; }

/* ── pulsanti ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 28px;
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.2;
  text-decoration: none; text-align: center;
  border-radius: 10px; border: 1.5px solid transparent;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .16s var(--ease-out), background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(.97); }
.btn--pieno { background: var(--terracotta); color: var(--bianco); }
.btn--tondo { border-radius: 999px; padding-inline: 30px; }
.btn--bordo { border-color: var(--rosso); color: var(--rosso); border-radius: 999px; background: transparent; }
.btn--bianco { background: var(--bianco); color: var(--rosso); }
.btn__freccia { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.btn__segno { font-family: var(--sans); font-size: 1.05em; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--pieno:hover { background: #A84129; }
  .btn--bordo:hover { background: var(--rosso); color: var(--bianco); }
  .btn--bianco:hover { box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); }
  .btn:hover .btn__segno { transform: translateX(3px); }
}

/* ── testata ── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--crema);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .25s ease;
}
.testata.is-scesa { box-shadow: 0 1px 0 var(--bordo), 0 10px 24px -18px rgba(29, 34, 39, .35); }
.testata__riga {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr auto;
  align-items: center;
  column-gap: 44px;
  height: var(--testata-h);
}
.testata__logo { justify-self: start; display: block; text-decoration: none; }
.testata__logo img { width: 150px; height: auto; }
.menu__lista { display: flex; align-items: center; gap: 40px; }
.menu__voce {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0;
  font-family: var(--sans); font-size: 16px; font-weight: 450; color: #353C45;
  text-decoration: none; background: none; border: 0;
  user-select: none; -webkit-user-select: none;
}
.menu__freccia {
  width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--ease-out);
}
.menu__voce[aria-expanded="true"] .menu__freccia { transform: rotate(-135deg); margin-top: 3px; }
.menu__gruppo { position: relative; }
.menu__tendina {
  position: absolute; top: calc(100% + 6px); left: -18px; min-width: 220px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s var(--ease-out), visibility 0s linear .16s;
}
.menu__voce[aria-expanded="true"] + .menu__tendina { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu__tendina a {
  display: block; padding: 11px 14px; border-radius: 8px;
  font-family: var(--serif); font-size: 19px; color: var(--inchiostro); text-decoration: none;
}
.menu__tendina a:active { background: var(--sabbia); }
@media (hover: hover) and (pointer: fine) {
  .menu__voce:hover { color: var(--rosso); }
  .menu__tendina a:hover { background: var(--sabbia); }
  .menu__gruppo:hover .menu__tendina { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.menu__solo-telefono { display: none; }
.btn--testata { min-height: 46px; padding: 11px 34px; font-size: 16px; }
/* il posto del selettore delle lingue (09 § 0-bis-3): vuoto fino al 9-ter, a destra */
.lingue-posto { justify-self: end; display: flex; align-items: center; min-height: 44px; }
.lingue-posto:empty { min-height: 0; }
.testata__apri {
  display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  position: relative; user-select: none; -webkit-user-select: none;
}
.testata__apri span {
  position: absolute; left: 11px; width: 22px; height: 1.8px; background: var(--inchiostro); border-radius: 2px;
  transition: transform .22s var(--ease-out), opacity .15s ease;
}
.testata__apri span:nth-child(1) { top: 15px; }
.testata__apri span:nth-child(2) { top: 21px; }
.testata__apri span:nth-child(3) { top: 27px; }
.testata__apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.testata__apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.testata__apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── hero ── */
.hero { padding: 0 0 28px; }
.hero__griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.hero__testo { grid-column: 1 / 6; grid-row: 1; position: relative; z-index: 3; padding: 24px 0 40px; }
.hero__titolo {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 6.3vw, 94px); line-height: .98; letter-spacing: -.025em;
  color: var(--inchiostro); margin: 6px 0 26px;
}
.hero__riga { display: block; }
.hero__titolo em { font-style: italic; color: var(--rosso); letter-spacing: -.02em; }
.hero__sotto { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.4; color: var(--testo); margin-bottom: 40px; }
.hero__azioni { display: flex; align-items: center; gap: 0; position: relative; }
.hero__segno { width: 180px; margin: 22px 0 0 -6px; opacity: .95; }

.hero__collage {
  grid-column: 5 / 13; grid-row: 1; position: relative;
  aspect-ratio: 1.385; margin-right: calc(var(--margine) * -0.6);
}
.hero__macchia {
  position: absolute; left: 16%; top: 0; width: 84%; height: 100%;
  overflow: hidden; background: var(--sabbia);
  border-top-left-radius: 46% 54%;
  border-top-right-radius: 40% 30%;
  border-bottom-right-radius: 18% 22%;
  border-bottom-left-radius: 30% 34%;
}
.hero__macchia img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.hero__polaroid {
  position: absolute; left: 0; top: 58%; width: 36%; z-index: 2;
  background: var(--bianco); padding: 8px; border-radius: 4px;
  box-shadow: 0 2px 4px rgba(29, 34, 39, .06), 0 18px 34px -14px rgba(29, 34, 39, .35);
  transform: rotate(-1.5deg);
}
.hero__polaroid img { width: 100%; aspect-ratio: 1.5; object-fit: cover; border-radius: 2px; }
.hero__benvenuti { position: absolute; left: 39%; top: 83%; width: 18%; z-index: 2; }
.hero__sigillo { position: absolute; left: 78%; top: 5%; width: 23%; z-index: 2; filter: drop-shadow(0 8px 14px rgba(29, 34, 39, .12)); }
.hero__strato { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.hero__strato--ramo { z-index: 2; }
.hero__strato--su { z-index: 3; }
.hero__macchia { z-index: 1; }
.hero__ramo { position: absolute; pointer-events: none; }
.hero__ramo--sx { left: 8%; top: 22%; width: 12%; transform: rotate(-12deg); transform-origin: 50% 100%; }
.hero__ramo--dx { left: 86%; top: 46%; width: 13%; transform: scaleX(-1) rotate(-8deg); transform-origin: 50% 100%; }

/* ── disponibilità ── */
.disponibilita { padding: 20px 0 40px; scroll-margin-top: calc(var(--testata-h) - 10px); }
.disp__pannello {
  background: var(--sabbia); border-radius: 18px; padding: 44px 52px 52px;
  box-shadow: 0 1px 0 rgba(29, 34, 39, .03);
}
.disp__testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin: 0 0 32px 20px; }
.disp__titolo { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -.02em; color: var(--inchiostro); }
.disp__sotto { font-size: 20px; margin-top: 6px; color: var(--testo); }
.disp__garanzie { display: flex; gap: 40px; padding-bottom: 6px; }
.disp__garanzie li { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: #353C45; }
.disp__garanzie img { width: 44px; height: 44px; flex: none; }

.disp__scheda { background: var(--carta); border-radius: 14px; padding: 30px 32px 34px; }
.disp__campi {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) auto;
  gap: 18px; align-items: end;
}
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo label, .campo__etichetta { font-family: var(--sans); font-size: 14px; font-weight: 500; color: #353C45; }
.campo select, .campo__data {
  height: 50px; width: 100%; min-width: 0;
  border: 1px solid var(--bordo); border-radius: 8px; background-color: var(--bianco);
  font-family: var(--sans); font-size: 16px; color: var(--inchiostro);
  padding: 0 14px;
}
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--inchiostro) 50%), linear-gradient(135deg, var(--inchiostro) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.campo__data { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.campo__data img { width: 20px; height: 20px; flex: none; }
.campo__data.is-vuoto span { color: #8A8F94; }
.campo__data.is-attivo { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(185, 74, 49, .14); }
.campo__invia { height: 50px; min-height: 50px; padding: 0 28px; white-space: nowrap; }
.disp__insieme {
  grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 15px; color: var(--testo); cursor: pointer; min-height: 32px; justify-self: start;
}
.disp__insieme input { width: 20px; height: 20px; accent-color: var(--terracotta); margin: 0; flex: none; }

.disp__corpo { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 48px; margin-top: 30px; align-items: start; }
.cal { border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; background: var(--carta); }
.cal__testa { display: flex; align-items: center; justify-content: center; gap: 22px; height: 58px; }
.cal__mese { font-family: var(--serif); font-size: 24px; color: var(--inchiostro); min-width: 200px; text-align: center; }
.cal__freccia {
  width: 44px; height: 44px; border: 0; background: none; border-radius: 50%;
  font-family: var(--sans); font-size: 30px; line-height: 1; color: var(--inchiostro);
  display: inline-flex; align-items: center; justify-content: center; padding-bottom: 4px;
  user-select: none; -webkit-user-select: none;
  transition: background-color .15s ease, transform .15s var(--ease-out);
}
.cal__freccia:active { transform: scale(.92); background: var(--sabbia); }
.cal__freccia:disabled { opacity: .25; cursor: default; }
@media (hover: hover) and (pointer: fine) { .cal__freccia:not(:disabled):hover { background: var(--sabbia); } }
.cal__giorni, .cal__griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__giorni { border-top: 1px solid var(--bordo); }
.cal__giorni span { font-family: var(--sans); font-size: 13px; color: #4A5057; text-align: center; padding: 9px 0; }
.cal__griglia { border-top: 1px solid var(--bordo); }
.cal__giorno, .cal__vuoto {
  height: 66px; border: 0; border-right: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo);
  background: transparent; padding: 0;
}
.cal__griglia > :nth-child(7n) { border-right: 0; }
.cal__giorno {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--serif); font-size: 18px; color: var(--inchiostro);
  user-select: none; -webkit-user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.cal__prezzo { font-family: var(--sans); font-size: 12px; color: #4A5057; min-height: 15px; line-height: 15px; }
.cal__giorno.is-libero { background: var(--libero); }
.cal__giorno.is-occupato { background: var(--occupato); color: #8A8C8C; cursor: not-allowed; }
.cal__giorno.is-occupato .cal__num { text-decoration: line-through; text-decoration-thickness: 1px; }
.cal__giorno.is-passato { color: #B9BBB8; cursor: default; }
.cal__giorno.is-fra { background: var(--fra); }
.cal__giorno.is-scelto { background: var(--terracotta); color: var(--bianco); }
.cal__giorno.is-scelto .cal__prezzo { color: rgba(255, 255, 255, .9); }
.cal__giorno.is-oggi .cal__num { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cal__giorno.is-libero:active, .cal__giorno.is-fra:active { background: #E3EBD0; }
@media (hover: hover) and (pointer: fine) {
  .cal__giorno.is-libero:hover, .cal__giorno.is-fra:hover { box-shadow: inset 0 0 0 2px var(--terracotta); }
}

.disp__lato { position: relative; min-height: 100%; padding: 30px 0 0 8px; display: flex; flex-direction: column; }
.legenda { display: grid; gap: 16px; font-family: var(--sans); font-size: 15px; color: #353C45; }
.legenda li { display: flex; align-items: center; gap: 16px; }
.legenda__punto { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.legenda__punto--libero { background: #E3EBD0; }
.legenda__punto--scelto { background: var(--terracotta); }
.legenda__punto--occupato { background: var(--occupato); }
.disp__stato { font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--inchiostro); margin-top: 26px; min-height: 27px; max-width: 430px; text-wrap: pretty; }
.disp__stato.is-avviso { color: var(--rosso); }
.disp__cancella {
  align-self: flex-start; margin-top: 8px; padding: 6px 0; min-height: 36px; border: 0; background: none;
  font-family: var(--sans); font-size: 14px; color: var(--testo-tenue); text-decoration: underline; text-underline-offset: 3px;
}
.disp__scritta { width: min(300px, 78%); margin: 8px 0 0 auto; transform: rotate(-4deg); }
.disp__ramo { position: absolute; right: 16%; bottom: 52px; width: 110px; transform: rotate(28deg); opacity: .95; pointer-events: none; }
.disp__cin { margin-top: auto; align-self: flex-end; padding-top: 120px; font-family: var(--sans); font-size: 13px; color: var(--testo-tenue); letter-spacing: .02em; }

/* ── le tre case ── */
.case { padding: 70px 0 40px; }
.case__testa { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; margin-bottom: 38px; }
.case__titoli { position: relative; }
.case__titoli .occhiello { margin-bottom: 18px; }
.case__segno { position: absolute; right: -6%; top: 58%; width: 130px; }
.case__intro { font-size: 19px; line-height: 1.55; color: var(--testo); max-width: 460px; justify-self: center; }
.case__elenco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.casa {
  background: var(--carta); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(29, 34, 39, .03), 0 14px 34px -22px rgba(29, 34, 39, .25);
  display: flex; flex-direction: column;
}
.casa__foto { display: block; aspect-ratio: 1.74; overflow: hidden; }
.casa__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.casa__foto { transition: transform .14s var(--ease-out); }
.casa__foto:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .casa:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(29, 34, 39, .04), 0 26px 44px -24px rgba(29, 34, 39, .32); }
  .casa:hover .casa__foto img { transform: scale(1.05); }
}
.casa__corpo { padding: 24px 30px 32px; display: flex; flex-direction: column; flex: 1; }
.casa__nome { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.1; letter-spacing: -.015em; color: var(--inchiostro); }
.casa__indirizzo { display: flex; align-items: center; gap: 10px; margin: 12px 0 18px; font-family: var(--sans); font-size: 15px; color: var(--rosso); }
.casa__indirizzo img { width: 22px; height: 22px; }
.casa__punti { display: grid; gap: 12px; margin-bottom: 30px; }
.casa__punti li { display: flex; align-items: center; gap: 14px; font-size: 17px; line-height: 1.35; color: var(--testo); }
.casa__punti img { width: 26px; height: 26px; flex: none; object-fit: contain; }
.casa__punti .icona-scura { filter: brightness(0) saturate(0) opacity(.86); }
.casa__punti .icona-ramo { width: 26px; height: 26px; transform: rotate(18deg); }
.casa .btn--bordo { margin-top: auto; width: 100%; max-width: 100%; }

/* ── servizi ── */
.servizi { padding: 120px 0 80px; }
.servizi__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.servizi__foto { position: relative; aspect-ratio: 1.06; }
.servizi__ombra {
  position: absolute; left: 18%; top: 2%; width: 80%; height: 96%;
  background: #F4ECDF;
  border-radius: 58% 42% 50% 50% / 40% 56% 44% 60%;
}
.servizi__macchia {
  position: absolute; left: 2%; top: 10%; width: 90%; height: 78%; overflow: hidden;
  border-radius: 38% 62% 30% 70% / 52% 40% 60% 48%;
}
.servizi__macchia img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.servizi__ramo { position: absolute; z-index: 2; pointer-events: none; }
.servizi__ramo--su { left: -6%; top: 0; width: 16%; transform: rotate(-24deg); }
.servizi__ramo--giu { right: 6%; bottom: -4%; width: 16%; transform: scaleX(-1) rotate(-56deg); }
.servizi__testo .titolo-sezione { margin-bottom: 18px; }
.servizi__intro { font-size: 19px; line-height: 1.55; color: var(--testo); max-width: 520px; margin-bottom: 40px; }
.servizi__elenco { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 18px; }
.servizi__elenco li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; font-size: 16px; line-height: 1.3; color: var(--testo); }
.servizi__elenco img { width: 40px; height: 40px; }

/* ── esperienze ── */
.esperienze { padding: 40px 0 60px; }
.esperienze__fascia {
  position: relative; background: var(--salvia); border-radius: 16px;
  padding: 52px 150px 58px; text-align: center; overflow: hidden;
}
.esperienze__titolo { font-size: 14px; letter-spacing: .2em; margin-bottom: 38px; text-wrap: balance; }
.esperienze__ramo { position: absolute; width: 130px; pointer-events: none; }
.esperienze__ramo--sx { left: 24px; top: 26px; transform: rotate(8deg); }
.esperienze__ramo--dx { right: 18px; top: 34px; width: 110px; transform: scaleX(-1) rotate(4deg); }
.esperienze__elenco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.esperienze__elenco li { padding: 0 28px; display: flex; flex-direction: column; align-items: center; }
.esperienze__elenco li + li { border-left: 1px solid #D3D2C1; }
.esperienze__elenco img { width: 50px; height: 50px; margin-bottom: 18px; }
.esperienze__elenco h3 { font-family: var(--serif); font-weight: 400; font-size: 29px; line-height: 1.15; color: var(--inchiostro); margin-bottom: 8px; }
.esperienze__elenco p { font-size: 18px; line-height: 1.45; color: var(--testo); }

/* ── recensioni ── */
.recensioni { padding: 70px 0 60px; }
.recensioni__testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; margin-bottom: 42px; }
.recensioni__titolo-riga .titolo-sezione { font-size: clamp(34px, 3.7vw, 54px); }
@media (min-width: 1181px) { .recensioni__titolo-riga .titolo-sezione { white-space: nowrap; } }
.recensioni__titolo-riga { display: flex; align-items: flex-start; gap: 18px; }
.recensioni__segno { width: 120px; margin-top: 4px; flex: none; }
.recensioni__intro { font-size: 21px; line-height: 1.45; color: var(--testo); margin-top: 14px; }
.recensioni__voto { display: flex; align-items: center; gap: 26px; justify-self: end; }
.recensioni__ramo { width: 110px; transform: rotate(52deg); }
.recensioni__voto p { font-family: var(--serif); color: var(--inchiostro); line-height: 1.1; }
.recensioni__numero { font-size: clamp(48px, 5vw, 74px); color: var(--rosso); letter-spacing: -.02em; }
.recensioni__su { font-size: clamp(30px, 3vw, 42px); }
.recensioni__per { font-size: 21px; color: var(--testo); }
.recensioni__elenco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.recensioni__elenco li {
  display: flex; align-items: flex-start; gap: 22px;
  background: var(--bianco); border-radius: 14px; padding: 30px 30px 32px;
  box-shadow: 0 1px 2px rgba(29, 34, 39, .03), 0 14px 34px -24px rgba(29, 34, 39, .22);
}
.recensioni__elenco img { width: 50px; height: 50px; flex: none; }
.recensioni__elenco h3 { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--inchiostro); margin: 2px 0 6px; }
.recensioni__elenco p { font-size: 17px; line-height: 1.45; color: var(--testo); }

/* ── dove siamo ── */
.posizione { padding: 80px 0 60px; }
.posizione__griglia { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.45fr) minmax(0, .72fr); gap: 32px; align-items: center; }
.posizione__testo .titolo-sezione { margin-bottom: 22px; }
.posizione__intro { font-size: 19px; line-height: 1.55; color: var(--testo); margin-bottom: 36px; }
.posizione__mappa img { width: 100%; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 78%, transparent 100%); }
.posizione__collegamenti { background: var(--bianco); border-radius: 14px; padding: 28px 26px 26px; box-shadow: 0 14px 34px -24px rgba(29, 34, 39, .22); align-self: start; margin-top: 28px; }
.posizione__collegamenti h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--inchiostro); margin-bottom: 22px; }
.posizione__collegamenti ul { display: grid; gap: 22px; }
.posizione__collegamenti li { display: flex; align-items: center; gap: 18px; }
.posizione__collegamenti img { width: 34px; height: 34px; flex: none; }
.posizione__collegamenti p { display: flex; flex-direction: column; font-size: 16px; line-height: 1.35; color: var(--testo); }
.posizione__collegamenti strong { font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--inchiostro); }
.posizione__nota { margin-top: 24px; font-family: var(--sans); font-size: 14px; color: var(--testo-tenue); }

/* ── invito ── */
.invito { padding: 40px 0 70px; }
.invito__fascia {
  position: relative; overflow: hidden; text-align: center;
  background: var(--invito); border-radius: 16px; padding: 64px 220px 70px; color: var(--bianco);
}
.invito__ramo { position: absolute; width: 220px; pointer-events: none; opacity: .95; }
.invito__ramo--sx { left: 30px; bottom: -14px; transform: rotate(-6deg); }
.invito__ramo--dx { right: 26px; bottom: -10px; width: 200px; transform: scaleX(-1) rotate(-14deg); }
.invito__titolo { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.7vw, 54px); line-height: 1.08; letter-spacing: -.015em; margin-bottom: 16px; position: relative; }
.invito__testo { font-size: 21px; line-height: 1.5; opacity: .95; margin-bottom: 34px; position: relative; }
.invito .btn--bianco { min-height: 58px; padding: 14px 44px; font-size: 17px; position: relative; }

/* ── piede ── */
.piede { padding: 64px 0 34px; }
.piede__alto { display: grid; grid-template-columns: auto 1fr auto; gap: 0; align-items: start; }
.piede__marchio { padding-right: 52px; border-right: 1px solid var(--bordo); }
.piede__marchio img { width: 170px; }
.piede__motto { font-style: italic; font-size: 24px; line-height: 1.25; color: var(--inchiostro); margin-top: 10px; }
.piede__menu { display: grid; grid-template-columns: repeat(4, auto); gap: 40px; justify-content: start; padding: 4px 52px 0; }
.piede__menu h2 { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--inchiostro); margin-bottom: 16px; }
.piede__menu ul { display: grid; gap: 4px; }
.piede__menu a { display: inline-block; padding: 4px 0; font-size: 16px; color: var(--testo); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .piede__menu a:hover, .piede__link a:hover { color: var(--rosso); } }
.piede__cin { display: grid; gap: 16px; padding: 4px 0 0 52px; border-left: 1px solid var(--bordo); font-size: 16px; color: var(--testo); }
.piede__cin strong { font-weight: 600; color: var(--inchiostro); }
.piede__basso { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 44px; }
.piede__copy { font-size: 16px; color: var(--testo); }
.piede__saluto { display: flex; align-items: center; gap: 18px; font-size: 18px; color: var(--inchiostro); }
.piede__cuore { width: 40px; height: 40px; }
.piede__segno { width: 110px; }
.piede__legale {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--bordo);
  font-family: var(--sans); font-size: 13px; color: var(--testo-tenue);
}
.piede__link { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.piede__link a, .credit a { color: var(--testo); text-decoration: none; display: inline-block; padding: 6px 0; }
.credit a { text-decoration: underline; text-underline-offset: 3px; }

/* ── pagine legali e 404 ── */
.pagina-semplice { padding: 40px 0 80px; }
.legale { max-width: 780px; margin-inline: auto; font-size: 18px; line-height: 1.6; color: var(--testo); }
.legale h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.02em; color: var(--inchiostro); margin-bottom: 10px; }
.legale h1 + p { font-family: var(--sans); font-size: 14px; color: var(--testo-tenue); margin-bottom: 30px; }
.legale h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--inchiostro); margin: 38px 0 12px; }
.legale p, .legale ul, .legale ol, .legale table { margin-bottom: 14px; }
.legale ul { list-style: disc; padding-left: 22px; }
.legale ol { padding-left: 22px; }
.legale li { margin-bottom: 6px; }
.legale a { color: var(--rosso); text-underline-offset: 3px; word-break: break-word; }
.legale table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--bordo); }
.legale th { font-family: var(--sans); font-weight: 600; color: var(--inchiostro); background: var(--sabbia); }
.non-trovata { text-align: center; max-width: 640px; margin-inline: auto; padding: 40px 0 40px; }
.non-trovata img { width: 220px; margin: 0 auto 26px; }
.non-trovata h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; color: var(--inchiostro); margin-bottom: 14px; }
.non-trovata p { font-size: 20px; margin-bottom: 30px; }

/* ── computer piccolo e tablet ── */
@media (max-width: 1180px) {
  :root { --margine: 32px; }
  .testata__riga { column-gap: 28px; }
  .menu__lista { gap: 28px; }
  .disp__campi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .campo__invia { grid-column: span 1; }
  .disp__testa { flex-direction: column; align-items: flex-start; }
  .esperienze__fascia { padding-inline: 110px; }
  .invito__fascia { padding-inline: 170px; }
  .posizione__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .posizione__collegamenti { grid-column: 1 / -1; margin-top: 0; }
  .posizione__collegamenti ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .piede__alto { grid-template-columns: 1fr; gap: 34px; }
  .piede__marchio, .piede__cin { border: 0; padding: 0; }
  .piede__menu { padding: 0; }
}

/* ── telefono (ricavato dal design da computer, coi pezzi del kit) ── */
@media (max-width: 900px) {
  :root { --margine: 16px; --testata-h: 72px; }
  body { font-size: 17px; }
  .testata__riga { grid-template-columns: 1fr auto auto auto; column-gap: 8px; }
  .testata__logo img { width: 104px; }
  .testata__apri { display: block; order: 4; }
  .btn--testata { order: 2; min-height: 44px; padding: 10px 18px; font-size: 15px; }
  .lingue-posto { order: 3; }
  .menu {
    position: fixed; inset: 0; top: calc(var(--testata-h) + env(safe-area-inset-top, 0px)); z-index: 49;
    height: calc(100dvh - var(--testata-h) - env(safe-area-inset-top, 0px));
    background: var(--crema); overflow-y: auto; overscroll-behavior: contain;
    padding: 18px max(16px, env(safe-area-inset-left, 0px)) calc(32px + env(safe-area-inset-bottom, 0px));
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .16s ease, transform .16s var(--ease-out), visibility 0s linear .16s;
  }
  html.menu-aperto .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s; }
  .menu__lista > li { opacity: 0; translate: 0 14px; transition: opacity .12s ease, translate .12s var(--ease-out); }
  html.menu-aperto .menu__lista > li {
    opacity: 1; translate: none;
    transition: opacity .36s var(--ease-out), translate .42s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 45ms + 50ms);
  }
  .menu__lista > li:nth-child(2) { --i: 1; } .menu__lista > li:nth-child(3) { --i: 2; } .menu__lista > li:nth-child(4) { --i: 3; }
  .menu__lista > li:nth-child(5) { --i: 4; } .menu__lista > li:nth-child(6) { --i: 5; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lista > li { border-bottom: 1px solid var(--bordo); }
  .menu__lista > li:last-child { border-bottom: 0; padding-top: 24px; }
  .menu__voce { width: 100%; min-height: 60px; justify-content: space-between; font-family: var(--serif); font-size: 26px; color: var(--inchiostro); }
  .menu__solo-telefono { display: block; }
  .menu__tendina { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 12px 4px; min-width: 0; display: none; }
  .menu__voce[aria-expanded="true"] + .menu__tendina { display: block; }
  .menu__tendina a { font-size: 21px; padding: 10px 0; color: var(--testo); }
  .menu__prenota { width: 100%; min-height: 54px; font-size: 17px; }

  .hero { padding-bottom: 12px; }
  .hero__griglia { grid-template-columns: minmax(0, 1fr); }
  .hero__testo { grid-column: 1; grid-row: 1; padding: 20px 0 26px; }
  .hero__testo .occhiello { font-size: 12px; letter-spacing: .08em; }
  .hero__titolo { font-size: clamp(44px, 12.4vw, 64px); margin: 4px 0 18px; }
  .hero__sotto { font-size: 18px; margin-bottom: 26px; }
  .hero__segno { width: 110px; margin-top: 18px; }
  .hero__collage { grid-column: 1; grid-row: 2; aspect-ratio: 1.12; margin-right: 0; }
  .hero__macchia { left: 6%; width: 94%; height: 88%; }
  .hero__polaroid { left: 0; top: 60%; width: 44%; padding: 5px; }
  .hero__benvenuti { left: 47%; top: 89%; width: 30%; }
  .hero__sigillo { left: 72%; top: -2%; width: 28%; }
  .hero__ramo--sx { left: -3%; top: 14%; width: 15%; }
  .hero__ramo--dx { left: 83%; top: 48%; width: 16%; }

  .disponibilita { padding: 18px 0 30px; }
  .disp__pannello { padding: 26px 14px 16px; border-radius: 16px; }
  .disp__testa { margin: 0 4px 20px; gap: 18px; }
  .disp__sotto { font-size: 17px; }
  .disp__garanzie { flex-direction: column; gap: 12px; }
  .disp__garanzie li { font-size: 13px; gap: 12px; }
  .disp__garanzie img { width: 34px; height: 34px; }
  .disp__scheda { padding: 18px 14px 20px; border-radius: 12px; }
  .disp__campi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .campo--casa, .campo--soluzione { grid-column: 1 / -1; }
  .campo--ospiti { grid-column: 1 / -1; }
  .campo__invia { grid-column: 1 / -1; width: 100%; order: 6; }
  .disp__insieme { font-size: 14px; line-height: 1.35; order: 5; }
  .disp__corpo { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 20px; }
  .cal__testa { height: 52px; gap: 10px; }
  .cal__mese { font-size: 21px; min-width: 170px; }
  .cal__giorno, .cal__vuoto { height: 48px; }
  .cal__giorno { font-size: 16px; }
  .cal__prezzo { font-size: 10px; min-height: 0; line-height: 12px; }
  .cal__prezzo:empty { display: none; }
  .cal__giorni span { font-size: 12px; padding: 8px 0; }
  .disp__lato { padding: 18px 2px 0; min-height: 0; }
  .legenda { grid-template-columns: repeat(3, auto); gap: 10px; justify-content: start; font-size: 13px; }
  .legenda li { gap: 8px; }
  .legenda__punto { width: 18px; height: 18px; }
  .disp__stato { font-size: 17px; margin-top: 16px; min-height: 0; }
  .disp__stato:empty { margin-top: 0; }
  .disp__scritta { width: 210px; margin: 8px 8px 0 auto; }
  .disp__ramo { right: auto; left: 6px; bottom: 26px; width: 64px; }
  .disp__cin { padding-top: 10px; font-size: 12px; }

  .case { padding: 50px 0 20px; }
  .case__testa { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }
  .case__segno { display: none; }
  .case__intro { font-size: 17px; justify-self: start; }
  .case__elenco {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--margine) * -1); padding: 4px var(--margine) 18px; scroll-padding-inline: var(--margine);
    scrollbar-width: none;
  }
  .case__elenco::-webkit-scrollbar { display: none; }
  .casa { flex: 0 0 82%; scroll-snap-align: start; }
  .casa__corpo { padding: 18px 18px 22px; }
  .casa__nome { font-size: 29px; }
  .casa__indirizzo { margin: 8px 0 14px; font-size: 14px; }
  .casa__punti { gap: 9px; margin-bottom: 22px; }
  .casa__punti li { font-size: 15px; gap: 11px; }
  .casa__punti img { width: 22px; height: 22px; }

  .servizi { padding: 50px 0 30px; }
  .servizi__griglia { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .servizi__foto { width: 92%; margin-inline: auto; }
  .servizi__ramo--su { left: -4%; width: 18%; }
  .servizi__ramo--giu { right: 0; width: 18%; }
  .servizi__intro { font-size: 17px; margin-bottom: 26px; }
  .servizi__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .servizi__elenco li { flex-direction: row; text-align: left; gap: 12px; font-size: 15px; }
  .servizi__elenco img { width: 32px; height: 32px; flex: none; }

  .esperienze { padding: 30px 0 30px; }
  .esperienze__fascia { padding: 36px 20px 30px; }
  .esperienze__titolo { font-size: 12px; letter-spacing: .12em; margin-bottom: 18px; padding-inline: 40px; line-height: 1.5; }
  .esperienze__ramo { width: 54px; }
  .esperienze__ramo--sx { left: 6px; top: 14px; }
  .esperienze__ramo--dx { right: 6px; top: 16px; width: 48px; }
  .esperienze__elenco { grid-template-columns: minmax(0, 1fr); }
  .esperienze__elenco li { padding: 18px 0; }
  .esperienze__elenco li + li { border-left: 0; border-top: 1px solid #D3D2C1; }
  .esperienze__elenco img { width: 40px; height: 40px; margin-bottom: 10px; }
  .esperienze__elenco h3 { font-size: 25px; }
  .esperienze__elenco p { font-size: 16px; }

  .recensioni { padding: 50px 0 30px; }
  .recensioni__testa { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 24px; }
  .recensioni__segno { display: none; }
  .recensioni__intro { font-size: 18px; }
  .recensioni__voto { justify-self: start; gap: 16px; }
  .recensioni__ramo { width: 58px; }
  .recensioni__per { font-size: 18px; }
  .recensioni__elenco { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .recensioni__elenco li { padding: 18px 18px; gap: 16px; align-items: center; }
  .recensioni__elenco img { width: 40px; height: 40px; }
  .recensioni__elenco p { font-size: 16px; }

  .posizione { padding: 50px 0 30px; }
  .posizione__griglia { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .posizione__intro { font-size: 16.5px; margin-bottom: 24px; }
  .posizione__mappa { margin-inline: calc(var(--margine) * -0.5); }
  .posizione__collegamenti { padding: 22px 18px; }
  .posizione__collegamenti ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .posizione__collegamenti li { gap: 10px; }
  .posizione__collegamenti img { width: 28px; height: 28px; }
  .posizione__collegamenti p, .posizione__collegamenti strong { font-size: 15px; }

  .invito { padding: 30px 0 40px; }
  .invito__fascia { padding: 42px 22px 46px; }
  .invito__ramo { width: 96px; }
  .invito__ramo--sx { left: -10px; bottom: -8px; }
  .invito__ramo--dx { right: -8px; bottom: -6px; width: 90px; }
  .invito__titolo { font-size: 32px; }
  .invito__testo { font-size: 17px; margin-bottom: 26px; }
  .invito__testo br { display: none; }
  .invito .btn--bianco { min-height: 54px; }

  .piede { padding: 40px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
  .piede__alto { gap: 28px; }
  .piede__marchio { display: flex; align-items: center; gap: 22px; }
  .piede__marchio img { width: 128px; }
  .piede__motto { font-size: 20px; margin-top: 0; }
  .piede__menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .piede__menu h2 { margin-bottom: 8px; }
  .piede__menu a { font-size: 16px; padding: 7px 0; }
  .piede__cin { font-size: 14px; gap: 8px; }
  .piede__basso { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 30px; }
  .piede__saluto { gap: 12px; }
  .piede__cuore { width: 30px; height: 30px; }
  .piede__segno { width: 80px; }
  .piede__legale { flex-direction: column; align-items: flex-start; }

  .legale { font-size: 17px; }
  .legale h2 { font-size: 23px; }
}
@media (max-width: 400px) {
  .btn--testata { padding: 10px 14px; font-size: 14px; }
  .campo__data { padding: 0 12px; }
  .campo__data img { display: none; }
  .testata__logo img { width: 92px; }
  .cal__mese { min-width: 150px; font-size: 19px; }
  .legenda { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 359px) {
  .btn--testata { display: none; }
}
.non-trovata__link { margin-top: 18px; font-family: var(--sans); font-size: 16px; }
.non-trovata__link a { display: inline-block; padding: 8px 4px; color: var(--rosso); text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   5-bis · IL MOVIMENTO (09 § 0-bis-2: il come dalle regole di Emil Kowalski, il cosa da 16 § 4-bis)
   Solo transform e opacity (e le proprietà translate, rotate, scale); niente sposta l'impaginazione.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── la hero si compone al caricamento, in CSS: prima i testi, poi la foto piccola, il sigillo e i rami ── */
@keyframes entra-su { from { opacity: 0; translate: 0 28px; } }
@keyframes dissolvi { from { opacity: 0; } }
@keyframes foto-assesta { from { scale: 1.08; } }
@keyframes polaroid-entra { from { opacity: 0; translate: -12px 40px; rotate: -6deg; } }
@keyframes sigillo-entra { from { opacity: 0; scale: .9; rotate: -12deg; } }
@keyframes ramo-entra { from { opacity: 0; scale: .9; } }
@keyframes ondeggia { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }

.hero .entra { animation: entra-su .85s var(--ease-out) both; }
.hero .entra--1 { animation-delay: .05s; }
.hero .entra--2 { animation-delay: .12s; }
.hero .entra--3 { animation-delay: .22s; }
.hero .entra--4 { animation-delay: .34s; }
.hero .entra--5 { animation-delay: .44s; }
/* la foto grande non parte mai da opacity 0: si assesta (1,08 → 1) dentro la sua forma */
.hero__macchia img { animation: foto-assesta 1.8s var(--ease-out) backwards; }
.hero__polaroid { animation: polaroid-entra .95s var(--ease-out) .42s both; }
.hero__sigillo { animation: sigillo-entra .9s var(--ease-out) .62s both; }
.hero__ramo { animation: ramo-entra .9s var(--ease-out) .78s both, ondeggia 7s var(--ease-in-out) 1.7s infinite alternate; }
.hero__ramo--dx { animation-delay: .9s, 2.4s; }

/* ── la profondità: gli strati del collage scorrono a velocità diverse (main.js, style.transform) ── */

/* ── le sezioni entrano mentre si scorre: .reveal → .in (main.js), fallback in <head> ── */
html.js .reveal { opacity: 0; translate: 0 32px; transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); }
html.js .reveal.in { opacity: 1; translate: none; }
/* le serie: il contenitore resta, entrano i figli uno dopo l'altro (70 ms) */
html.js .reveal.reveal-figli { opacity: 1; translate: none; }
html.js .reveal-figli > * {
  opacity: 0; translate: 0 28px;
  transition: opacity .7s var(--ease-out) var(--ritardo, 0s), translate .7s var(--ease-out) var(--ritardo, 0s), transform .3s var(--ease-out), box-shadow .3s ease;
}
html.js .reveal-figli.in > * { opacity: 1; translate: none; }
.reveal-figli > :nth-child(2) { --ritardo: 70ms; }
.reveal-figli > :nth-child(3) { --ritardo: 140ms; }
.reveal-figli > :nth-child(4) { --ritardo: 210ms; }
.reveal-figli > :nth-child(5) { --ritardo: 280ms; }
.reveal-figli > :nth-child(6) { --ritardo: 350ms; }
.reveal-figli > :nth-child(7) { --ritardo: 420ms; }
.reveal-figli > :nth-child(8) { --ritardo: 490ms; }
/* le icone dei servizi: un passo più corto, sono tante */
.servizi__elenco.reveal-figli > * { --ritardo: calc(var(--n, 0) * 45ms); }
.servizi__elenco > :nth-child(2) { --n: 1; } .servizi__elenco > :nth-child(3) { --n: 2; } .servizi__elenco > :nth-child(4) { --n: 3; }
.servizi__elenco > :nth-child(5) { --n: 4; } .servizi__elenco > :nth-child(6) { --n: 5; } .servizi__elenco > :nth-child(7) { --n: 6; }
.servizi__elenco > :nth-child(8) { --n: 7; }

/* ── le scritte a mano e i segni curvi si scrivono da sinistra a destra quando entrano ── */
html.js .reveal--scritta { opacity: 1; translate: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-in-out) .15s; }
html.js .reveal--scritta.in { clip-path: inset(0 0 0 0); }
html.js .hero__benvenuti.reveal--scritta { transition-delay: 1.05s; }
html.js .hero__segno.reveal--scritta { transition-delay: .85s; }

/* ── l'intestazione scorrendo: l'ombra e il logo che si rimpicciolisce (senza cambiare l'altezza) ── */
.testata__logo img { transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.testata.is-scesa .testata__logo img { transform: scale(.84); }

/* ── i servizi: la foto si avvicina col mouse ── */
.servizi__macchia img { transition: transform 1s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .servizi__foto:hover .servizi__macchia img { transform: scale(1.04); } }

/* ── il voto sale da zero (main.js): larghezza fissa, così non sposta niente ── */
.recensioni__numero { display: inline-block; font-variant-numeric: tabular-nums; }

/* ── la mappa: sotto le tre case un segnale che si allarga, quando la mappa è in vista ── */
.posizione__mappa { position: relative; }
.mappa__ping {
  position: absolute; width: 7%; aspect-ratio: 2.2; border-radius: 50%;
  border: 2px solid var(--colore-ping, #B94A31); translate: -50% -50%; opacity: 0; pointer-events: none;
}
.mappa__ping--happy { left: 25.5%; top: 38.2%; --colore-ping: #1D63C8; }
.mappa__ping--acm { left: 37.4%; top: 57.6%; --colore-ping: #C23A22; }
.mappa__ping--acm2 { left: 19.4%; top: 76.6%; --colore-ping: #1E7A44; }
@keyframes ping { 0% { opacity: .85; scale: .3; } 70%, 100% { opacity: 0; scale: 1.5; } }
.posizione__mappa.in .mappa__ping { animation: ping 3s var(--ease-out) infinite; }
.posizione__mappa.in .mappa__ping--happy { animation-delay: .6s; }
.posizione__mappa.in .mappa__ping--acm { animation-delay: 1.6s; }
.posizione__mappa.in .mappa__ping--acm2 { animation-delay: 2.6s; }

/* ── l'invito: i rami bianchi si muovono piano, come al vento ── */
.invito__ramo--sx { transform-origin: 0% 100%; }
.invito__ramo--dx { transform-origin: 100% 100%; }
.invito__fascia.in .invito__ramo { animation: ondeggia 6s var(--ease-in-out) infinite alternate; }
.invito__fascia.in .invito__ramo--dx { animation-duration: 7.5s; animation-delay: -2s; }

/* ── il calendario risponde ── */
.cal__giorno { position: relative; }
.cal__num { display: inline-block; transition: scale .12s var(--ease-out); }
.cal__giorno:not(:disabled):active .cal__num { scale: .86; }
/* il mese nuovo arriva dal lato della freccia */
@keyframes mese-dopo { from { opacity: 0; translate: 22px 0; } }
@keyframes mese-prima { from { opacity: 0; translate: -22px 0; } }
.cal__griglia.is-dopo { animation: mese-dopo .32s var(--ease-out); }
.cal__griglia.is-prima { animation: mese-prima .32s var(--ease-out); }
.cal__mese.is-cambia { animation: dissolvi .32s var(--ease-out); }
/* il giorno appena scelto: un anello che si allarga */
@keyframes anello { from { opacity: .9; scale: .55; } to { opacity: 0; scale: 1.15; } }
.cal__giorno.is-appena::after {
  content: ""; position: absolute; inset: 7px; border-radius: 10px; border: 2px solid var(--terracotta);
  pointer-events: none; animation: anello .5s var(--ease-out) both;
}
.cal__giorno.is-scelto.is-appena::after { border-color: rgba(255, 255, 255, .85); }
/* il periodo si riempie dall'arrivo alla partenza */
@keyframes riempi { from { background-color: var(--libero); } }
.cal__griglia.is-riempi .cal__giorno.is-fra { animation: riempi .26s ease both; animation-delay: calc(var(--k, 0) * 38ms); }
/* il messaggio sotto la legenda */
@keyframes stato-entra { from { opacity: 0; translate: 0 8px; } }
.disp__stato.is-nuovo { animation: stato-entra .32s var(--ease-out); }

/* ── riduci animazioni: meno movimento, non zero (restano dissolvenze e colori) ── */
@media (prefers-reduced-motion: reduce) {
  .hero .entra, .hero__polaroid, .hero__sigillo { animation-name: dissolvi; }
  .hero__ramo { animation: dissolvi .9s ease .5s both; }
  .hero__macchia img { animation: none; }
  html.js .reveal, html.js .reveal-figli > * { translate: none; }
  html.js .reveal--scritta { clip-path: none; opacity: 0; transition: opacity .8s ease .2s; }
  html.js .reveal--scritta.in { opacity: 1; }
  .posizione__mappa.in .mappa__ping { animation: none; }
  .invito__fascia.in .invito__ramo { animation: none; }
  .cal__griglia.is-dopo, .cal__griglia.is-prima { animation-name: dissolvi; }
  .cal__giorno.is-appena::after { animation-name: dissolvi; opacity: 0; }
  .disp__stato.is-nuovo { animation-name: dissolvi; }
  .menu__lista > li { translate: none !important; }
  .testata.is-scesa .testata__logo img { transform: none; }
  .casa:hover, .casa:hover .casa__foto img, .servizi__foto:hover .servizi__macchia img { transform: none; }
  html { scroll-behavior: auto; }
}