/* Casa Famiglia La Rondinella · fedele al design v9 del kit, rifinito.
   Caratteri: Montserrat (titoli, leggero e geometrico) e Nunito Sans (testi), serviti dal sito.
   Colori: misurati dal design e dal kit. --u è un pixel del design a 1440 px: tutto scala insieme. */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('/assets/fonts/nunito-sans-latin-wght-normal.woff2') format('woff2'); }

:root {
  /* i verdi */
  --bosco: #204128;
  --bosco-testo: #0F3017;
  --muschio: #2B4503;
  --oliva: #718A3D;
  --salvia: #789060;
  /* i chiari */
  --avorio: #FDFBF6;
  --sabbia: #F9F6F1;
  --bianco: #FEFEFE;
  --filigrana: #F4ECE1;
  --filigrana-forte: #EFE6D8;
  --linea: #D6D6D6;
  --mappa: #D8E0B0;
  /* gli accenti */
  --rosso: #E02828;
  --nero: #181818;
  --legno: #30180C;
  --lime: #EAF19B;
  --crema: #E7E8AC;
  /* misure e curve */
  --u: min(100vw / 1440, 1.12px);
  --spazio: calc(var(--u) * 54);
  --gutter: calc(var(--u) * 36);
  --ombra: 0 calc(var(--u) * 12) calc(var(--u) * 34) rgba(32, 65, 40, .13);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --titoli: 'Montserrat', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --testi: 'Nunito Sans', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html.menu-aperto { overflow: hidden; }
body { margin: 0; background: var(--avorio); color: var(--nero); font-family: var(--testi); font-weight: 500;
  font-size: max(16px, calc(var(--u) * 21)); line-height: 1.42; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
p { text-wrap: pretty; }
address { font-style: normal; }
a { color: inherit; touch-action: manipulation; }
button { font: inherit; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: calc(var(--u) * 100); }

.contenitore { width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: var(--gutter); }
.salta { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--bosco); color: #fff; border-radius: 10px; }
.salta:focus { top: 12px; }
.solo-lettore { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── pulsanti ───────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; text-decoration: none;
  font-weight: 700; line-height: 1.15; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .18s ease, transform .14s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn-rosso { background: var(--rosso); color: #fff; }
.btn-verde { background: var(--bosco); color: #fff; }
.segno-tel { display: inline-block; flex: none; width: 1.02em; height: 1.02em; background: currentColor;
  -webkit-mask: url('/assets/img/icone/telefono-segno.png') center / contain no-repeat;
  mask: url('/assets/img/icone/telefono-segno.png') center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) {
  .btn-rosso:hover { background: #C81F1F; }
  .btn-verde:hover { background: var(--bosco-testo); }
  .menu > a:not(.btn):hover { color: var(--oliva); }
  .piede a:hover, .mappa-link:hover, .contatti-indirizzo:hover { text-decoration-thickness: 2px; }
}

/* ── testata ────────────────────────────────────────────────────────── */
.testata { background: var(--bianco); position: sticky; top: calc(var(--u) * -48); z-index: 30; }
html.menu-aperto .testata { z-index: 60; }
.testata-dentro { display: flex; align-items: center; justify-content: space-between; max-width: 1560px; margin-inline: auto;
  padding: calc(var(--u) * 6) calc(var(--u) * 48) calc(var(--u) * 6) calc(var(--u) * 60); min-height: calc(var(--u) * 138); }
.logo { flex: none; display: block; }
.logo img { width: calc(var(--u) * 164); }
.menu { display: flex; align-items: center; gap: calc(var(--u) * 34); }
.menu > a:not(.btn) { color: var(--bosco-testo); text-decoration: none; font-weight: 600; font-size: max(14px, calc(var(--u) * 19.5)); white-space: nowrap;
  padding: 10px 0; touch-action: manipulation; transition: color .18s ease; }
.menu-chiama, .menu-apri { display: none; }
.menu-cta { margin-left: calc(var(--u) * 6); padding: calc(var(--u) * 10) calc(var(--u) * 22); min-height: 44px; border-radius: calc(var(--u) * 16); font-size: max(14px, calc(var(--u) * 18)); white-space: nowrap; }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero { position: relative; }
.hero-scena { position: relative; height: min(45.2vw, 880px); }
.hero-sfondo { position: absolute; inset: 0; overflow: hidden; background: var(--legno); }
.hero-strato { position: absolute; inset: 0; }
.hero-foto { position: absolute; left: 0; top: min(3.9vw, 74px); width: 100%; height: calc(100% - min(3.9vw, 74px)); max-width: none;
  object-fit: cover; object-position: 50% 0; }
.hero-velo { position: absolute; inset: 0; background:
  radial-gradient(ellipse 58% 70% at 20% 15%, rgba(30, 13, 5, .76) 0%, rgba(30, 13, 5, .64) 46%, rgba(30, 13, 5, .22) 76%, rgba(30, 13, 5, 0) 100%),
  linear-gradient(180deg, var(--legno) 0, var(--legno) min(3.9vw, 74px), rgba(48, 24, 12, .34) min(7.4vw, 142px), rgba(48, 24, 12, .08) min(16vw, 308px), rgba(48, 24, 12, 0) min(24vw, 460px)); }
.hero-dentro { position: relative; height: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.hero-testo { position: relative; padding: calc(var(--u) * 30) 0 0 calc(var(--u) * 36); text-shadow: 0 1px 14px rgba(24, 10, 4, .45); }
.hero h1 { font-family: var(--titoli); font-weight: 300; }
.h1-prima { display: block; color: #fff; font-size: calc(var(--u) * 62); line-height: 1.12; letter-spacing: -.005em; }
.h1-seconda { display: block; color: var(--lime); font-size: calc(var(--u) * 56); line-height: 1.18; font-weight: 340; letter-spacing: -.005em; }
.hero-sotto { color: #fff; margin-top: calc(var(--u) * 12); max-width: calc(var(--u) * 700); font-size: max(15px, calc(var(--u) * 23)); line-height: 1.32; }
.hero-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 14) calc(var(--u) * 30); margin-top: calc(var(--u) * 20); }
.hero-link { color: #fff; font-weight: 700; font-size: max(16px, calc(var(--u) * 21)); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; padding-block: 8px; }
.btn-hero { text-shadow: none; padding: calc(var(--u) * 12) calc(var(--u) * 44) calc(var(--u) * 12) calc(var(--u) * 36);
  min-height: max(48px, calc(var(--u) * 62)); border-radius: calc(var(--u) * 24); font-size: max(17px, calc(var(--u) * 25)); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 22) rgba(24, 10, 4, .35); }
.hero-rondine { position: absolute; left: calc(var(--u) * 800); top: calc(var(--u) * -56); width: calc(var(--u) * 244); max-width: none; z-index: 31; pointer-events: none; }
.hero-scheda { position: relative; z-index: 4; margin-top: calc(var(--u) * 22); width: calc(var(--u) * 312); display: grid; gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 22) calc(var(--u) * 26); background: var(--bianco); border-radius: calc(var(--u) * 38); box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(24, 10, 4, .28); }
.hero-scheda li { display: flex; align-items: center; gap: calc(var(--u) * 22); font-size: max(13px, calc(var(--u) * 22)); line-height: 1.22; color: var(--nero); }
.hero-scheda img { flex: none; width: calc(var(--u) * 78); }
.hero-scheda li > span { max-width: 8.6em; text-wrap: balance; }
.striscia-posto { position: relative; z-index: 4; margin-top: calc(var(--u) * -58); }
.striscia { display: flex; align-items: center; min-height: calc(var(--u) * 96); padding: calc(var(--u) * 7) calc(var(--u) * 26); background: var(--bianco);
  border-radius: calc(var(--u) * 54); box-shadow: var(--ombra); }
.striscia li { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 16); padding: 0 calc(var(--u) * 12);
  font-size: max(13px, calc(var(--u) * 20)); line-height: 1.18; color: var(--nero); }
.striscia li + li { border-left: 1px solid var(--linea); }
.striscia img { flex: none; width: calc(var(--u) * 68); }
.striscia li > span { max-width: 6.6em; text-wrap: balance; }

/* ── titoli con la parola in filigrana ──────────────────────────────── */
.sezione { position: relative; padding-block: var(--spazio); overflow-x: clip; }
.testa { position: relative; padding: calc(var(--u) * 44) calc(var(--u) * 130) 0 calc(var(--u) * 24); }
.filigrana { position: absolute; left: calc(var(--u) * 22); top: 0; color: var(--filigrana); font-family: var(--titoli); font-weight: 700; font-size: calc(var(--u) * 66);
  line-height: 1; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none; -webkit-user-select: none; }
.testa h2, .contatti h2 { position: relative; color: var(--bosco-testo); font-family: var(--titoli); font-weight: 340; font-size: calc(var(--u) * 53); line-height: 1.16; letter-spacing: -.005em; }
.testa-testo { position: relative; margin-top: calc(var(--u) * 10); max-width: calc(var(--u) * 1220); font-size: max(17px, calc(var(--u) * 21.5)); line-height: 1.4; color: var(--nero); }
.testa-testo-due { margin-top: calc(var(--u) * 1); }
.testa-rondine { position: absolute; right: calc(var(--u) * 24); top: calc(var(--u) * 2); width: calc(var(--u) * 150); max-width: none; pointer-events: none; }

/* ── i rimandi «Scopri …» verso le pagine interne ────────────────── */
.scopri { display: inline-flex; align-items: center; gap: .45em; color: var(--muschio); font-weight: 800; font-size: max(16px, calc(var(--u) * 19)); line-height: 1.25;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; touch-action: manipulation; }
.scopri::after { content: ""; width: .5em; height: .5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); flex: none; }
.casa-scheda .scopri { justify-self: start; margin-left: calc(var(--u) * 114); }
.testa-scopri { position: absolute; right: calc(var(--u) * 180); bottom: calc(var(--u) * 8); }

/* ── Benvenuti ──────────────────────────────────────────────────────── */
.casa { padding-top: calc(var(--u) * 50); }
.casa .testa { padding-top: calc(var(--u) * 58); padding-right: calc(var(--u) * 24); }
.casa .filigrana { font-size: calc(var(--u) * 88); }
.casa .testa-rondine { width: calc(var(--u) * 196); top: calc(var(--u) * 22); }
.casa-cornice { position: relative; margin-top: calc(var(--u) * 22); border-radius: calc(var(--u) * 64); overflow: hidden; aspect-ratio: 1368 / 536; background: var(--filigrana); }
.casa-immagini { display: contents; }
.casa-foto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 87%; }
.casa-monti { position: absolute; left: calc(var(--u) * 10); bottom: calc(var(--u) * 10); width: calc(var(--u) * 460); aspect-ratio: 460 / 212; object-fit: cover;
  border: calc(var(--u) * 5) solid #fff; border-radius: calc(var(--u) * 60); }
.casa-scheda ul { display: grid; gap: calc(var(--u) * 8); }
.casa-scheda { position: absolute; right: calc(var(--u) * 56); bottom: calc(var(--u) * 28); width: calc(var(--u) * 430); display: grid; gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 20) calc(var(--u) * 44); background: var(--bianco); border-radius: calc(var(--u) * 38); box-shadow: var(--ombra); }
.casa-scheda li { display: flex; align-items: center; gap: calc(var(--u) * 32); font-size: max(14px, calc(var(--u) * 24)); line-height: 1.22; color: var(--nero); }
.casa-scheda img { flex: none; width: calc(var(--u) * 82); }
.casa-scheda li > span { text-wrap: balance; }

/* ── La fascia della notte ──────────────────────────────────────────── */
.notte { position: relative; overflow: hidden; background: var(--bosco); color: #fff; }
.notte-dentro { position: relative; display: flex; align-items: center; min-height: calc(var(--u) * 140); padding-block: calc(var(--u) * 14); }
.notte-luna { flex: none; width: calc(var(--u) * 96); margin-left: calc(var(--u) * 44); }
.notte-frase { margin-left: calc(var(--u) * 42); font-family: var(--titoli); font-weight: 300; font-size: calc(var(--u) * 44); line-height: 1.15; white-space: nowrap; }
.notte-dati { margin-left: calc(var(--u) * 42); padding-left: calc(var(--u) * 44); border-left: 1px solid rgba(255, 255, 255, .55); }
.notte-ore { font-family: var(--titoli); font-weight: 300; font-size: calc(var(--u) * 52); line-height: 1.1; color: var(--crema); }
.notte-note { margin-top: calc(var(--u) * 6); font-size: max(13px, calc(var(--u) * 18)); line-height: 1.32; color: #F3F5F4; }
.notte-ala { position: absolute; right: calc(var(--u) * 28); top: calc(var(--u) * -40); width: calc(var(--u) * 230); max-width: none; opacity: .3; transform: scaleX(-1); pointer-events: none; }

/* ── Vita insieme ───────────────────────────────────────────────────── */
.vita { background: var(--bianco); }
.vita .testa-rondine { width: calc(var(--u) * 122); top: calc(var(--u) * -10); }
.vita-cornice { position: relative; margin-top: calc(var(--u) * 20); margin-inline: calc(var(--u) * 12); border-radius: calc(var(--u) * 64); overflow: hidden; aspect-ratio: 1344 / 490; background: var(--filigrana); }
.vita-foto { width: 100%; height: 100%; overflow: hidden; }
.vita-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.vita-pillole { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 28); display: flex; justify-content: center; gap: calc(var(--u) * 42); }
.vita-pillole li > span { text-wrap: balance; }
.vita-pillole li { display: flex; align-items: center; gap: calc(var(--u) * 22); min-width: calc(var(--u) * 340); max-width: calc(var(--u) * 400); padding: calc(var(--u) * 10) calc(var(--u) * 34) calc(var(--u) * 10) calc(var(--u) * 14);
  background: var(--bianco); border-radius: calc(var(--u) * 56); box-shadow: var(--ombra); font-size: max(14px, calc(var(--u) * 23)); line-height: 1.22; color: var(--nero); }
.vita-pillole img { flex: none; width: calc(var(--u) * 90); }

/* ── Servizi ────────────────────────────────────────────────────────── */
.testa-rondine.specchio { scale: -1 1; }
.ramo-confine { position: absolute; left: 50%; top: 0; z-index: 2; width: calc(var(--u) * 210); max-width: none; transform: translate(-50%, -50%); pointer-events: none; }
.accoglienza { z-index: 1; }
.ramo-confine-giu { top: auto; bottom: 0; transform: translate(-50%, 50%) scaleX(-1); }
.testa-sinistra { padding-left: calc(var(--u) * 148); padding-right: 0; }
.testa-sinistra .filigrana { left: calc(var(--u) * 148); }
.testa-sinistra .testa-rondine { right: auto; left: calc(var(--u) * 0); top: calc(var(--u) * 10); width: calc(var(--u) * 132); }
.servizi-griglia { display: grid; grid-template-columns: calc(var(--u) * 390) minmax(0, 1fr) calc(var(--u) * 330); gap: calc(var(--u) * 28); margin-top: calc(var(--u) * 20); align-items: stretch; }
.pasti { display: flex; flex-direction: column; justify-content: space-between; padding-left: calc(var(--u) * 16); }
.pasti li { display: flex; align-items: center; gap: calc(var(--u) * 20); padding-block: calc(var(--u) * 8); font-size: max(14px, calc(var(--u) * 18.5)); line-height: 1.3; font-weight: 600; color: var(--nero); }
.pasti li + li { border-top: 1px solid var(--linea); }
.pasti img { flex: none; width: calc(var(--u) * 70); }
.servizi-foto { width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: calc(var(--u) * 60); aspect-ratio: 700 / 366; }
.servizi-foto img { width: 100%; height: 100%; object-fit: cover; }
.cure { display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--u) * 22); }
.cure li { flex: 1; display: flex; align-items: center; gap: calc(var(--u) * 20); padding: calc(var(--u) * 16) calc(var(--u) * 22); background: var(--bianco); border-radius: calc(var(--u) * 38); box-shadow: var(--ombra); }
.cure img { flex: none; width: calc(var(--u) * 88); }
.cure p { text-wrap: balance; font-size: max(14px, calc(var(--u) * 20)); line-height: 1.3; font-weight: 600; color: var(--nero); }
.incluso { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 34); margin-top: calc(var(--u) * 22); padding-left: calc(var(--u) * 90); }
.incluso-pillola { display: flex; align-items: center; gap: calc(var(--u) * 34); min-width: calc(var(--u) * 800); text-decoration: none; padding: calc(var(--u) * 6) calc(var(--u) * 44) calc(var(--u) * 6) calc(var(--u) * 24); background: var(--bianco);
  border-radius: calc(var(--u) * 44); box-shadow: var(--ombra); color: var(--bosco-testo); font-size: max(15px, calc(var(--u) * 26)); font-weight: 600; line-height: 1.2; }
.incluso-pillola img { flex: none; width: calc(var(--u) * 62); }
.incluso-tavola { flex: none; width: calc(var(--u) * 150); }

/* ── Camere ─────────────────────────────────────────────────────────── */
.camere { background: var(--bianco); }
.camere .testa-rondine { width: calc(var(--u) * 124); top: calc(var(--u) * -14); }
.camere-griglia { display: grid; grid-template-columns: calc(var(--u) * 630) minmax(0, 1fr) calc(var(--u) * 360); gap: calc(var(--u) * 30); align-items: center; margin-top: calc(var(--u) * 16); }
.camere-foto { width: 100%; aspect-ratio: 690 / 300; overflow: hidden; border-radius: calc(var(--u) * 96); }
.camere-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 51%; }
.camere-centro { display: grid; gap: calc(var(--u) * 16); justify-items: start; }
.camere-lista { display: grid; gap: calc(var(--u) * 6); }
.camere-lista li > span { text-wrap: balance; }
.pasti li > span { text-wrap: balance; }
.camere-lista li { display: flex; align-items: center; gap: calc(var(--u) * 22); font-size: max(14px, calc(var(--u) * 21)); line-height: 1.22; color: var(--nero); }
.camere-lista img { flex: none; width: calc(var(--u) * 64); }
.camere-fiori { width: 100%; aspect-ratio: 372 / 330; overflow: hidden; border-radius: 42%; margin-top: calc(var(--u) * -40); }
.camere-fiori img { width: 100%; height: 100%; object-fit: cover; }

/* ── Accoglienza ────────────────────────────────────────────────────── */
.accoglienza { background: var(--sabbia); }
.servizi { background: var(--sabbia); }
.servizi .filigrana, .accoglienza .filigrana { color: var(--filigrana-forte); }
.percorso { display: flex; align-items: flex-start; justify-content: space-between; margin-top: calc(var(--u) * 26); padding-inline: calc(var(--u) * 10); }
.passo { flex: 0 0 calc(var(--u) * 206); text-align: center; }
.passo img { width: calc(var(--u) * 86); margin-inline: auto; }
.passo h3 { margin-top: calc(var(--u) * 10); font-size: max(16px, calc(var(--u) * 23)); font-weight: 800; color: var(--muschio); line-height: 1.2; }
.passo p { margin-top: calc(var(--u) * 4); font-size: max(14px, calc(var(--u) * 18)); line-height: 1.3; color: var(--nero); }
.ramo { flex: 0 1 calc(var(--u) * 112); min-width: 0; width: calc(var(--u) * 112); margin: calc(var(--u) * 12) calc(var(--u) * -14) 0; }
.mese-blocco { flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--u) * 20); margin-left: calc(var(--u) * 16); }
.mese { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(var(--u) * 146); height: calc(var(--u) * 146); border: calc(var(--u) * 2.5) solid var(--oliva); border-radius: 50%;
  background: var(--bianco); color: var(--muschio); font-weight: 800; line-height: 1; }
.mese-numero { font-size: calc(var(--u) * 50); }
.mese-parola { font-size: calc(var(--u) * 38); }
.mese-testo { width: calc(var(--u) * 276); font-size: max(14px, calc(var(--u) * 17.5)); line-height: 1.34; color: var(--nero); }
.mese-testo .scopri { margin-top: calc(var(--u) * 6); font-size: inherit; }
.btn-chiama { flex: none; align-self: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 12) calc(var(--u) * 24); border-radius: calc(var(--u) * 26); font-size: max(15px, calc(var(--u) * 22)); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 22) rgba(224, 40, 40, .22); }
.btn-chiama .segno-tel { width: 1.3em; height: 1.3em; }
.btn-chiama-testo { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }

/* ── Domande frequenti ──────────────────────────────────────────────── */
.domande { background: var(--bianco); overflow: hidden; }
.domande-ala { position: absolute; right: calc(var(--u) * 10); top: calc(var(--u) * 26); width: calc(var(--u) * 300); max-width: none; opacity: .11; pointer-events: none; }
.testa-sola { padding-top: 0; min-height: calc(var(--u) * 60); }
.testa-sola .filigrana { position: relative; left: 0; display: block; font-size: calc(var(--u) * 60); }
.testa-sola .testa-rondine { width: calc(var(--u) * 140); right: calc(var(--u) * 40); top: calc(var(--u) * -30); }
.domande-griglia { position: relative; display: grid; grid-template-columns: calc(var(--u) * 610) calc(var(--u) * 580); gap: calc(var(--u) * 44); margin-top: calc(var(--u) * 10); padding-left: calc(var(--u) * 24); }
.domande-colonna { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.domande-colonna + .domande-colonna { position: relative; padding-left: calc(var(--u) * 44); }
.domande-colonna + .domande-colonna::before { content: ""; position: absolute; left: 0; top: calc(var(--u) * 4); bottom: calc(var(--u) * 4); width: 1px; background: var(--salvia); }
.domande details + details { padding-top: calc(var(--u) * 8); border-top: 1px solid var(--linea); }
.domande summary { display: flex; align-items: center; gap: calc(var(--u) * 28); min-height: 44px; cursor: pointer; list-style: none; touch-action: manipulation;
  color: var(--muschio); font-size: max(17px, calc(var(--u) * 20.5)); font-weight: 800; line-height: 1.2; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary img { flex: none; width: calc(var(--u) * 24); }
.domande summary span { flex: 1; text-wrap: balance; }
.domande summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid var(--salvia); border-bottom: 2px solid var(--salvia); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease-out); }
.domande details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.domande details p { padding-left: calc(var(--u) * 52); padding-right: calc(var(--u) * 24); font-size: max(16px, calc(var(--u) * 18)); line-height: 1.3; color: var(--nero); }

/* ── Ci trovi ───────────────────────────────────────────────────────── */
.contatti { background: var(--sabbia); }
.contatti-griglia { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 430); gap: calc(var(--u) * 40); align-items: center; }
.contatti-sinistra { padding-left: calc(var(--u) * 24); }
.contatti h2 { font-size: calc(var(--u) * 52); }
.contatti-testo { margin-top: calc(var(--u) * 8); max-width: calc(var(--u) * 820); font-size: max(16px, calc(var(--u) * 20)); line-height: 1.4; color: var(--nero); }
.mappa-titolo { align-self: stretch; color: var(--bosco-testo); font-weight: 800; font-size: max(16px, calc(var(--u) * 20)); line-height: 1.3; text-wrap: balance; }
.contatti-panorama { width: 100%; margin-top: calc(var(--u) * 14); aspect-ratio: 860 / 124; overflow: hidden; border-radius: calc(var(--u) * 44); }
.contatti-panorama img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.contatti-riga { display: flex; align-items: center; gap: calc(var(--u) * 32); margin-top: calc(var(--u) * 16); }
.contatti-tel { display: inline-flex; align-items: center; gap: calc(var(--u) * 16); color: var(--muschio); font-size: max(22px, calc(var(--u) * 38)); font-weight: 800; line-height: 1.1; text-decoration: none; white-space: nowrap; }
.contatti-tel .segno-tel { color: var(--bosco); }
.contatti-indirizzo { max-width: calc(var(--u) * 520); padding-left: calc(var(--u) * 36); border-left: 1px solid var(--salvia); font-size: max(14px, calc(var(--u) * 17.5)); line-height: 1.34; color: var(--nero); text-decoration: none; }
.contatti-mappa { display: flex; flex-direction: column; align-items: flex-end; }
.mappa { position: relative; width: 100%; aspect-ratio: 560 / 300; }
.mappa-disegno { display: block; width: 100%; height: 100%; }
.mappa-traccia { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mappa-terra { fill: var(--mappa); }
.mappa-rotta { fill: none; stroke: var(--oliva); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 11; }
.mappa-punto { fill: var(--oliva); }
.mappa-rondine { position: absolute; left: 0; top: 16%; width: 28%; max-width: none; }
.mappa-nome { position: absolute; left: 75.7%; top: 56%; transform: translateX(-50%); width: max-content; text-align: center; color: var(--bosco-testo); font-size: max(14px, calc(var(--u) * 21)); font-weight: 600; line-height: 1.2; }
.mappa-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muschio); font-size: max(16px, calc(var(--u) * 22)); font-weight: 800; text-underline-offset: 4px; }

/* ── Piede ──────────────────────────────────────────────────────────── */
.piede { background: var(--bosco); color: #F3F5F4; font-size: max(14px, calc(var(--u) * 17)); line-height: 1.4; }
.piede a { text-underline-offset: 3px; }
.piede-alto { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 40); padding-block: calc(var(--u) * 20) calc(var(--u) * 14); }
.piede-marchio { display: flex; align-items: center; gap: calc(var(--u) * 30); padding-left: calc(var(--u) * 24); }
.piede-marchio img { flex: none; width: calc(var(--u) * 110); }
.piede-marchio strong { display: block; color: #fff; font-family: var(--titoli); font-weight: 400; font-size: max(20px, calc(var(--u) * 28)); line-height: 1.2; }
.piede-marchio span { display: block; margin-top: 4px; font-size: max(14px, calc(var(--u) * 18)); }
.piede-recapiti { display: grid; gap: calc(var(--u) * 4); justify-items: end; text-align: right; padding-right: calc(var(--u) * 24); font-size: max(15px, calc(var(--u) * 19)); }
.piede-recapiti a { text-decoration: none; padding-block: 3px; }
.piede-basso { display: flex; flex-wrap: wrap; align-items: center; gap: 4px calc(var(--u) * 30); padding-block: calc(var(--u) * 10) calc(var(--u) * 14); border-top: 1px solid rgba(255, 255, 255, .22); }
.piede-basso { padding-inline: calc(var(--gutter) + var(--u) * 24); }
.piede-legale { flex: 1 1 100%; font-size: max(13px, calc(var(--u) * 14.5)); }
.intero { white-space: nowrap; }
.piede-link { display: flex; gap: calc(var(--u) * 24); }
.piede-link a { display: inline-block; padding-block: 6px; font-weight: 700; }
.credit { margin-left: auto; font-size: max(13px, calc(var(--u) * 15)); }
.credit a { font-weight: 700; }

.barra-tel { display: none; }

/* ── pagine semplici: legali e 404 ──────────────────────────────────── */
.pagina { padding-block: calc(var(--spazio) * .8) var(--spazio); }
.pagina-testo { max-width: 860px; margin-inline: auto; }
.pagina-testo h1 { color: var(--bosco-testo); font-family: var(--titoli); font-weight: 340; font-size: max(32px, calc(var(--u) * 52)); line-height: 1.18; }
.pagina-testo h2 { margin: 1.5em 0 .4em; color: var(--bosco-testo); font-family: var(--titoli); font-weight: 400; font-size: max(22px, calc(var(--u) * 30)); line-height: 1.25; }
.pagina-testo h3 { margin: 1.2em 0 .3em; color: var(--muschio); font-weight: 800; font-size: max(18px, calc(var(--u) * 23)); }
.pagina-testo p, .pagina-testo ul, .pagina-testo ol, .pagina-testo table { margin-block: .7em; }
.pagina-testo ul { list-style: disc; padding-left: 1.3em; }
.pagina-testo ol { padding-left: 1.3em; }
.pagina-testo li { margin-block: .25em; }
.pagina-testo a { color: var(--muschio); font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pagina-testo table { width: 100%; border-collapse: collapse; font-size: .92em; display: block; overflow-x: auto; }
.pagina-testo th, .pagina-testo td { padding: .55em .7em; border: 1px solid var(--linea); text-align: left; vertical-align: top; }
.pagina-testo th { background: var(--sabbia); }
.errore { text-align: center; padding-block: calc(var(--spazio) * 1.6); }
.errore img { width: min(190px, 44vw); margin: 0 auto 18px; }
.errore h1 { color: var(--bosco-testo); font-family: var(--titoli); font-weight: 340; font-size: max(32px, calc(var(--u) * 58)); line-height: 1.18; }
.errore p { margin-top: 12px; font-size: max(17px, calc(var(--u) * 24)); }
.errore-azioni { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; margin-top: 26px; }
.errore-azioni .btn { padding: 12px 28px; border-radius: 22px; }
.errore-azioni a:not(.btn) { color: var(--muschio); font-weight: 700; text-underline-offset: 3px; }

/* ═════════════ DA TELEFONO (e tablet in verticale): --u è un pixel a 390 ═════════════ */
@media (max-width: 900px) {
  :root { --u: min(100vw / 390, 1.3px); --gutter: calc(var(--u) * 16); --spazio: calc(var(--u) * 60); }
  body { font-size: max(16px, calc(var(--u) * 17)); }

  /* testata e menu a tutto schermo */
  .testata { top: calc(var(--u) * -12); }
  section[id] { scroll-margin-top: calc(var(--u) * 84); }
  .testata-dentro { min-height: calc(var(--u) * 86); padding: calc(var(--u) * 5) var(--gutter); }
  .logo { position: relative; z-index: 41; }
  .logo img { width: calc(var(--u) * 98); }
  .menu-apri { position: relative; z-index: 41; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 0; margin-right: -6px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
  .menu-apri span { display: block; width: 26px; height: 2px; border-radius: 2px; background: var(--bosco-testo); transition: transform .2s var(--ease-out), opacity .12s ease; }
  .menu-apri:active { transform: scale(.94); }
  html.menu-aperto .menu-apri span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  html.menu-aperto .menu-apri span:nth-child(2) { opacity: 0; }
  html.menu-aperto .menu-apri span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .menu { position: fixed; inset: 0; z-index: 40; height: 100dvh; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px;
    padding: calc(var(--u) * 110) calc(var(--u) * 26) calc(var(--u) * 28); background: var(--bianco); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; }
  html.menu-aperto .menu { opacity: 1; visibility: visible; transition: opacity .22s ease; }
  .menu > a:not(.btn) { display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--linea); font-family: var(--titoli); font-weight: 340; font-size: max(22px, calc(var(--u) * 24)); }
  .menu-cta { display: inline-flex; margin: 22px 0 0; padding: 14px 26px; border-radius: 20px; font-size: 19px; }
  .menu-chiama { display: inline-flex; margin-top: 10px; padding: 14px 26px; border-radius: 20px; font-size: 19px; }

  /* hero */
  .hero-scena { height: auto; }
  .hero-sfondo { background: var(--legno); }
  .hero-foto { top: auto; bottom: 0; height: calc(var(--u) * 500); width: 100%; object-position: 3% 0; }
  .hero-velo { background: linear-gradient(180deg, var(--legno) 0, var(--legno) calc(var(--u) * 150), rgba(48, 24, 12, .86) calc(var(--u) * 215), rgba(48, 24, 12, .5) calc(var(--u) * 290), rgba(48, 24, 12, 0) calc(var(--u) * 390)); }
  .hero-dentro { display: block; height: auto; }
  .hero-testo { padding: calc(var(--u) * 48) 0 0; }
  .h1-prima { font-size: calc(var(--u) * 37); text-wrap: balance; }
  .h1-seconda { font-size: calc(var(--u) * 31); font-weight: 340; }
  .hero-sotto { margin-top: calc(var(--u) * 8); font-size: max(16px, calc(var(--u) * 17)); line-height: 1.32; }
  .hero-azioni { margin-top: calc(var(--u) * 16); gap: 10px 20px; }
  .btn-hero { padding: 12px calc(var(--u) * 22); min-height: 56px; border-radius: 18px; font-size: max(18px, calc(var(--u) * 19)); }
  .hero-link { font-size: max(16px, calc(var(--u) * 17)); }
  .hero-rondine { left: auto; right: calc(var(--u) * 6); top: calc(var(--u) * -30); width: calc(var(--u) * 92); }
  .hero-scheda { width: 100%; margin-top: calc(var(--u) * 262); margin-bottom: calc(var(--u) * -46); grid-template-columns: repeat(4, 1fr); gap: 0; padding: calc(var(--u) * 12) calc(var(--u) * 6); border-radius: calc(var(--u) * 26); }
  .hero-scheda li { flex-direction: column; gap: 6px; text-align: center; font-size: max(13px, calc(var(--u) * 13.5)); line-height: 1.18; }
  .hero-scheda li > span { max-width: 6.4em; }
  .hero-scheda img { width: calc(var(--u) * 54); }
  .striscia-posto { margin-top: calc(var(--u) * 58); }
  .striscia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 0; min-height: 0; padding: calc(var(--u) * 16) calc(var(--u) * 6); border-radius: calc(var(--u) * 26); }
  .striscia li { flex-direction: column; gap: 6px; padding: 0 4px; text-align: center; font-size: max(13px, calc(var(--u) * 14)); }
  .striscia li > span { max-width: none; }
  .striscia li + li { border-left: 0; }
  .striscia img { width: calc(var(--u) * 54); }

  /* titoli */
  .testa, .casa .testa { padding: calc(var(--u) * 28) 0 0; }
  .filigrana, .casa .filigrana { left: 0; font-size: calc(var(--u) * 38); letter-spacing: 0; }
  .testa h2, .contatti h2 { font-size: calc(var(--u) * 30); line-height: 1.2; }
  .testa-testo { margin-top: 10px; max-width: none; font-size: max(16px, calc(var(--u) * 17)); line-height: 1.42; }
  .testa-testo-due { margin-top: 6px; }
  .testa-scopri { position: static; margin-top: 10px; }
  .testa-rondine { right: 0; top: calc(var(--u) * -14); width: calc(var(--u) * 78); }

  /* Benvenuti */
  .casa { padding-top: calc(var(--u) * 46); }
  .casa .testa-rondine { width: calc(var(--u) * 104); top: calc(var(--u) * -6); }
  .casa-cornice { margin-top: 18px; overflow: visible; border-radius: 0; aspect-ratio: auto; background: none; }
  .casa-immagini { display: block; position: relative; overflow: hidden; border-radius: calc(var(--u) * 34); }
  .casa-foto { aspect-ratio: 358 / 232; height: auto; border-radius: calc(var(--u) * 34); }
  .casa-monti { left: calc(var(--u) * 8); bottom: calc(var(--u) * 8); width: calc(var(--u) * 156); aspect-ratio: 156 / 82; border-width: 3px; border-radius: calc(var(--u) * 26); }
  .casa-scheda { position: relative; right: auto; bottom: auto; width: auto; margin: calc(var(--u) * -6) 0 0; gap: 14px; padding: calc(var(--u) * 16) calc(var(--u) * 12); border-radius: calc(var(--u) * 26); }
  .casa-scheda ul { grid-template-columns: 1fr 1fr; gap: 12px 8px; }
  .casa-scheda .scopri { margin-left: 4px; }
  .casa-scheda li { gap: 8px; font-size: max(14px, calc(var(--u) * 14.5)); line-height: 1.2; }
  .casa-scheda img { width: calc(var(--u) * 50); }

  /* notte */
  .notte-dentro { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px calc(var(--u) * 14); padding-block: calc(var(--u) * 26); padding-inline: calc(var(--u) * 20); }
  .notte-luna { width: calc(var(--u) * 64); margin: 0; }
  .notte-frase { margin: 0; white-space: normal; font-size: calc(var(--u) * 26); }
  .notte-dati { grid-column: 1 / -1; margin: 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .45); }
  .notte-ore { font-size: calc(var(--u) * 34); }
  .notte-note { font-size: max(15px, calc(var(--u) * 15)); }
  .notte-ala { right: 0; top: auto; bottom: calc(var(--u) * -18); width: calc(var(--u) * 120); opacity: .24; }

  /* Vita */
  .vita .testa-rondine { width: calc(var(--u) * 66); top: calc(var(--u) * -28); }
  .vita-cornice { margin-top: 18px; margin-inline: 0; overflow: visible; border-radius: 0; aspect-ratio: auto; background: none; }
  .vita-foto { aspect-ratio: 358 / 236; height: auto; border-radius: calc(var(--u) * 34); }
  .vita-foto img { height: 100%; }
  .vita-pillole { position: relative; left: auto; right: auto; bottom: auto; display: grid; gap: 8px; justify-content: stretch; margin: calc(var(--u) * -34) calc(var(--u) * 14) 0; }
  .vita-pillole li { min-width: 0; max-width: none; gap: 14px; padding: 6px 18px 6px 8px; border-radius: calc(var(--u) * 40); font-size: max(16px, calc(var(--u) * 16)); }
  .vita-pillole img { width: calc(var(--u) * 54); }

  .ramo-confine { width: calc(var(--u) * 132); }

  /* Servizi */
  .testa-sinistra { padding-left: 0; }
  .testa-sinistra .filigrana { left: 0; }
  .testa-sinistra .testa-rondine { left: auto; right: 0; top: calc(var(--u) * -22); width: calc(var(--u) * 70); }
  .servizi-griglia { grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }
  .servizi-foto { grid-row: 1; aspect-ratio: 358 / 214; height: auto; border-radius: calc(var(--u) * 34); }
  .pasti { padding: 0; gap: 0; }
  .pasti li { gap: 14px; padding: 8px 4px; font-size: max(16px, calc(var(--u) * 16)); }
  .pasti img { width: calc(var(--u) * 54); }
  .cure { gap: 10px; }
  .cure li { gap: 14px; padding: 10px 16px 10px 10px; border-radius: calc(var(--u) * 26); }
  .cure img { width: calc(var(--u) * 58); }
  .cure p { font-size: max(16px, calc(var(--u) * 16)); }
  .incluso { flex-direction: column; gap: 10px; margin-top: 14px; padding-left: 0; }
  .incluso-pillola { min-width: 0; width: 100%; gap: 12px; padding: 6px 16px 6px 8px; border-radius: calc(var(--u) * 30); font-size: max(17px, calc(var(--u) * 17)); }
  .incluso-pillola img { width: calc(var(--u) * 50); }
  .incluso-tavola { width: calc(var(--u) * 118); }

  /* Camere */
  .camere .testa-rondine { width: calc(var(--u) * 62); top: calc(var(--u) * -30); }
  .camere-griglia { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 148); gap: 14px 10px; margin-top: 18px; }
  .camere-foto { grid-column: 1 / -1; aspect-ratio: 358 / 196; border-radius: calc(var(--u) * 58); }
  .camere-lista { gap: 8px; }
  .camere-centro { display: contents; }
  .camere-centro .camere-lista { grid-column: 1; grid-row: 2; }
  .camere-fiori { grid-column: 2; grid-row: 2; }
  .camere-centro .scopri { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .camere-lista li { gap: 10px; font-size: max(15px, calc(var(--u) * 15)); }
  .camere-lista img { width: calc(var(--u) * 46); }
  .camere-fiori { aspect-ratio: 148 / 176; margin: 0; border-radius: 44%; }

  /* Accoglienza */
  .percorso { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin-top: 18px; padding: 0; }
  .passo { min-width: 0; }
  .passo img { width: calc(var(--u) * 68); }
  .passo h3 { margin-top: 6px; font-size: max(17px, calc(var(--u) * 17)); }
  .passo p { font-size: max(15px, calc(var(--u) * 15)); }
  .percorso > .ramo { position: absolute; left: 50%; top: calc(var(--u) * 2); width: calc(var(--u) * 112); margin: 0; transform: translateX(-50%); }
  .percorso > .ramo-due { position: static; grid-column: 1 / -1; justify-self: center; width: calc(var(--u) * 190); transform: none; }
  .mese-blocco { grid-column: 1 / -1; margin: 0; gap: 16px; }
  .mese { width: calc(var(--u) * 104); height: calc(var(--u) * 104); border-width: 2px; }
  .mese-numero { font-size: calc(var(--u) * 34); }
  .mese-parola { font-size: calc(var(--u) * 25); }
  .mese-testo { flex: 1; width: auto; font-size: max(16px, calc(var(--u) * 16)); }
  .btn-chiama { grid-column: 1 / -1; width: 100%; min-height: 64px; padding: 10px 18px; border-radius: 20px; font-size: max(19px, calc(var(--u) * 19)); }

  /* Domande */
  .domande-ala { right: 0; top: calc(var(--u) * 8); width: calc(var(--u) * 150); opacity: .1; }
  .testa-sola { min-height: 0; }
  .testa-sola .filigrana { font-size: calc(var(--u) * 28); white-space: normal; line-height: 1.05; max-width: calc(var(--u) * 250); }
  .testa-sola .testa-rondine { right: 0; top: calc(var(--u) * -20); width: calc(var(--u) * 74); }
  .domande-griglia { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; padding-left: 0; }
  .domande-colonna { gap: 10px; }
  .domande-colonna + .domande-colonna { padding: 10px 0 0; border-top: 1px solid var(--linea); }
  .domande-colonna + .domande-colonna::before { display: none; }
  .domande details + details { padding-top: 10px; }
  .domande summary { gap: 12px; font-size: max(17px, calc(var(--u) * 17)); }
  .domande summary img { width: calc(var(--u) * 18); }
  .domande details p { padding-left: calc(var(--u) * 30); padding-right: 0; font-size: max(16px, calc(var(--u) * 16)); }

  /* Ci trovi */
  .contatti-griglia { grid-template-columns: 1fr; gap: 10px; }
  .contatti-sinistra { padding-left: 0; }
  .contatti h2 { font-size: calc(var(--u) * 29); }
  .contatti-panorama { margin-top: 14px; aspect-ratio: 358 / 132; border-radius: calc(var(--u) * 30); }
  .contatti-riga { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
  .contatti-tel { gap: 12px; font-size: max(28px, calc(var(--u) * 30)); }
  .contatti-indirizzo { max-width: none; padding: 0; border-left: 0; font-size: max(16px, calc(var(--u) * 16)); }
  .contatti-testo { font-size: max(16px, calc(var(--u) * 16.5)); }
  .mappa-titolo { margin-top: 18px; font-size: max(17px, calc(var(--u) * 17)); }
  .contatti-mappa { align-items: flex-start; }
  .mappa-nome { font-size: max(14px, calc(var(--u) * 15)); }
  .mappa { max-width: 420px; }
  .mappa-link { margin-top: -6px; font-size: max(17px, calc(var(--u) * 17)); }

  /* Piede */
  .piede-alto { flex-direction: column; align-items: center; gap: 16px; padding-block: 28px 18px; text-align: center; }
  .piede-marchio { flex-direction: column; gap: 10px; padding: 0; }
  .piede-marchio img { width: calc(var(--u) * 120); }
  .piede-marchio strong { font-size: max(20px, calc(var(--u) * 22)); }
  .piede-recapiti { justify-items: center; text-align: center; padding: 0; gap: 2px; font-size: max(15px, calc(var(--u) * 15)); }
  .piede-basso { padding-inline: var(--gutter); padding-block: 14px calc(84px + env(safe-area-inset-bottom, 0px)); justify-content: center; text-align: center; }
  .piede-link { gap: 20px; }
  .credit { margin-left: 0; flex: 1 1 100%; }
  .piede-link a { padding-block: 8px; }

  /* la barra fissa in basso */
  .barra-tel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bianco); box-shadow: 0 -6px 22px rgba(32, 65, 40, .16); }
  .barra-tel .btn { min-height: 50px; padding: 8px 12px; border-radius: 16px; font-size: max(15px, calc(var(--u) * 15.5)); }
}

@media (max-width: 340px) {
  .barra-tel { grid-template-columns: 1.35fr 1fr; }
  .barra-tel .btn { font-size: 14px; }
}

/* ═════════════ IL MOVIMENTO (step 5-bis) ═════════════
   Curve e durate di Emil Kowalski (09 § 0-bis-2): solo transform e opacity (e clip-path per il ramo che si disegna),
   entrate 0,7-1,2 s, uscite più veloci, hover solo col mouse, :active al tocco, prefers-reduced-motion con meno
   movimento. Senza JavaScript (o se main.js non arriva entro 4 s) tutto resta visibile: le entrate valgono con html.js. */

:root { --sale: 34px; }
@media (max-width: 900px) { :root { --sale: 26px; } }

/* 1 · la hero entra al caricamento, col CSS: titolo, riga, pulsante, poi la rondine in volo e le schede.
   La foto non parte mai da trasparente: si assesta piano, da un ingrandimento leggero. */
@keyframes entra-su { from { opacity: 0; transform: translateY(30px); } }
@keyframes foto-assesta { from { transform: scale(1.07); } }
@keyframes rondine-arriva {
  from { opacity: 0; transform: translate(var(--volo-x, -170px), var(--volo-y, 96px)) rotate(-16deg) scale(.8); }
  55% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes rondine-libra { to { transform: translate(-4px, -10px) rotate(-2.5deg); } }
.hero-foto { animation: foto-assesta 2.8s var(--ease-out) backwards; }
.h1-prima { animation: entra-su .85s var(--ease-out) .1s backwards; }
.h1-seconda { animation: entra-su .85s var(--ease-out) .24s backwards; }
.hero-sotto { animation: entra-su .85s var(--ease-out) .38s backwards; }
.btn-hero, .hero-link { animation: entra-su .85s var(--ease-out) .5s backwards; }
.hero-link { animation-delay: .58s; }
.hero-rondine { animation: rondine-arriva 1.25s var(--ease-out) .55s backwards, rondine-libra 3.4s ease-in-out 1.8s infinite alternate; }
.hero-scheda { animation: entra-su .9s var(--ease-out) .7s backwards; }
.striscia li { animation: entra-su .75s var(--ease-out) backwards; animation-delay: .82s; }
.striscia li:nth-child(2) { animation-delay: .88s; }
.striscia li:nth-child(3) { animation-delay: .94s; }
.striscia li:nth-child(4) { animation-delay: 1s; }
.striscia li:nth-child(5) { animation-delay: 1.06s; }
.striscia li:nth-child(6) { animation-delay: 1.12s; }
@media (max-width: 900px) { .hero-rondine { --volo-x: -110px; --volo-y: 70px; } }

/* 2 · le entrate mentre si scorre: .reveal → .in (main.js, IntersectionObserver), una volta sola */
/* le entrate usano le proprietà translate, rotate e scale: transform resta libero per il tocco, l'hover e le posizioni */
html.js .reveal { opacity: 0; translate: 0 var(--sale);
  transition: opacity .8s var(--ease-out) var(--ritardo, 0ms), translate .95s var(--ease-out) var(--ritardo, 0ms),
    rotate 1.2s var(--ease-out) var(--ritardo, 0ms), scale .95s var(--ease-out) var(--ritardo, 0ms),
    transform .22s var(--ease-out), background-color .18s ease; }
html.js .reveal.in { opacity: 1; translate: none; }
html.js .reveal-foto { --sale: 52px; }
html.js .reveal-lato { translate: -60px 0; transition-duration: 1.1s, 1.3s, 1.2s, .95s, .22s, .18s; }
html.js .reveal-volo { translate: -70px 38px; rotate: -12deg; transition-duration: .9s, 1.3s, 1.3s, .95s, .22s, .18s; }
html.js .reveal-volo.specchio { translate: 70px 38px; rotate: 12deg; }
html.js .reveal-piccolo { translate: 0 18px; scale: .94; }
html.js .reveal-luna { translate: 0 14px; rotate: -18deg; }
html.js .reveal-luna.in { rotate: none; }
/* più forte delle partenze (anche quella della rondine specchiata, che sta più sotto nel foglio) */
html.js .reveal.reveal-volo.in { translate: none; rotate: none; }
html.js .reveal-piccolo.in { scale: none; }
@media (max-width: 900px) {
  html.js .reveal-volo { translate: -40px 26px; }
  html.js .reveal-volo.specchio { translate: 40px 26px; }
}

/* il ramo si disegna da sinistra (anche quello specchiato, fra Accoglienza e Domande) */
html.js [data-reveal="traccia"] { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-out) var(--ritardo, 0ms); }
html.js .ramo-confine-giu[data-reveal="traccia"] { clip-path: inset(0 0 0 100%); }
html.js [data-reveal="traccia"].in { clip-path: inset(0 0 0 0); }

/* la mappa: la linea tratteggiata si disegna mentre la rondine vola verso il punto (il volo lo fa main.js) */
html.js .mappa-traccia { clip-path: inset(0 100% 0 0); transition: clip-path 1.9s var(--ease-in-out) .25s; }
html.js .mappa.in .mappa-traccia { clip-path: inset(0 0 0 0); }

/* i ritardi: da computer le cose entrano una dopo l'altra, da telefono quasi insieme */
.sfila > .reveal:nth-child(2) { --ritardo: 60ms; }
.sfila > .reveal:nth-child(3) { --ritardo: 120ms; }
.sfila > .reveal:nth-child(4) { --ritardo: 180ms; }
.testa-testo.reveal, .notte-frase.reveal { --ritardo: 90ms; }
.notte-dati.reveal { --ritardo: 180ms; }
.testa-rondine.reveal-volo { --ritardo: 120ms; }
.casa-monti.reveal { --ritardo: 300ms; }
.percorso > .passo:nth-of-type(2) { --ritardo: 120ms; }
.percorso > .ramo { --ritardo: 200ms; }
.domande-colonna > details:nth-child(2) { --ritardo: 90ms; }
@media (min-width: 901px) {
  .casa-cornice.reveal { --ritardo: 120ms; }
  .casa-monti.reveal { --ritardo: 650ms; }
  .casa-scheda .sfila > .reveal:nth-child(1) { --ritardo: 420ms; }
  .casa-scheda .sfila > .reveal:nth-child(2) { --ritardo: 490ms; }
  .casa-scheda .sfila > .reveal:nth-child(3) { --ritardo: 560ms; }
  .casa-scheda .sfila > .reveal:nth-child(4) { --ritardo: 630ms; }
  .notte-frase.reveal { --ritardo: 140ms; }
  .notte-dati.reveal { --ritardo: 300ms; }
  .vita-pillole > .reveal:nth-child(1) { --ritardo: 300ms; }
  .vita-pillole > .reveal:nth-child(2) { --ritardo: 380ms; }
  .vita-pillole > .reveal:nth-child(3) { --ritardo: 460ms; }
  .servizi-foto.reveal { --ritardo: 120ms; }
  .cure > .reveal:nth-child(1) { --ritardo: 220ms; }
  .cure > .reveal:nth-child(2) { --ritardo: 300ms; }
  .incluso-tavola.reveal { --ritardo: 160ms; }
  .camere-lista > .reveal:nth-child(1) { --ritardo: 120ms; }
  .camere-lista > .reveal:nth-child(2) { --ritardo: 180ms; }
  .camere-lista > .reveal:nth-child(3) { --ritardo: 240ms; }
  .camere-lista > .reveal:nth-child(4) { --ritardo: 300ms; }
  .camere-fiori.reveal { --ritardo: 260ms; }
  .percorso > .ramo { --ritardo: 260ms; }
  .percorso > .passo:nth-of-type(2) { --ritardo: 520ms; }
  .percorso > .ramo-due { --ritardo: 760ms; }
  .mese-blocco.reveal { --ritardo: 1000ms; }
  .btn-chiama.reveal { --ritardo: 1150ms; }
  .domande-colonna + .domande-colonna > details:nth-child(1) { --ritardo: 180ms; }
  .contatti-panorama.reveal { --ritardo: 100ms; }
  .contatti-riga.reveal { --ritardo: 220ms; }
  .mappa.reveal { --ritardo: 150ms; }
  .mappa-link.reveal { --ritardo: 500ms; }
  .casa-scheda .scopri.reveal { --ritardo: 700ms; }
  .mappa-titolo.reveal { --ritardo: 120ms; }
  .contatti-testo.reveal { --ritardo: 90ms; }
}

/* 3 · i numeri che salgono: il numero vero resta nel testo, quello che conta si disegna sopra (main.js) */
.conta { display: inline-block; position: relative; font-variant-numeric: tabular-nums; }
.conta.contando { color: transparent; }
.conta.contando::after { content: attr(data-ora); position: absolute; top: 0; right: 0; color: var(--colore-conta, var(--nero)); }
.notte-ore .conta { --colore-conta: var(--crema); }

/* 4 · la testata che cambia scorrendo: resta in alto, più compatta, con un'ombra leggera (main.js mette .scorre) */
.testata::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; transform: translateY(100%); pointer-events: none;
  background: linear-gradient(rgba(32, 65, 40, .13), rgba(32, 65, 40, 0)); opacity: 0; transition: opacity .25s ease; }
.testata.scorre::after { opacity: 1; }
.logo img { transform-origin: left center; transition: transform .3s var(--ease-out); }
.testata.scorre .logo img { transform: translateY(calc(var(--u) * 24)) scale(.66); }
@media (min-width: 901px) {
  .menu { transition: transform .3s var(--ease-out); }
  .testata.scorre .menu { transform: translateY(calc(var(--u) * 24)); }
  /* la riga sotto la voce del menu */
  .menu > a:not(.btn) { position: relative; }
  .menu > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: var(--oliva);
    transform: scaleX(0); transform-origin: left center; transition: transform .25s var(--ease-out); }
  .menu > a:not(.btn):focus-visible::after { transform: scaleX(1); }
}
@media (max-width: 900px) {
  .testata.scorre .logo img { transform: translateY(calc(var(--u) * 6)) scale(.82); }
  .menu-apri { transition: transform .3s var(--ease-out); }
  .testata.scorre .menu-apri { transform: translateY(calc(var(--u) * 6)); }
  .testata.scorre .menu-apri:active { transform: translateY(calc(var(--u) * 6)) scale(.94); }
  /* il menu a tutto schermo: le voci entrano una dopo l'altra, all'uscita sparisce tutto insieme e più in fretta */
  @keyframes voce-entra { from { opacity: 0; transform: translateY(14px); } }
  html.menu-aperto .menu > * { animation: voce-entra .42s var(--ease-out) backwards; }
  html.menu-aperto .menu > :nth-child(2) { animation-delay: 40ms; }
  html.menu-aperto .menu > :nth-child(3) { animation-delay: 80ms; }
  html.menu-aperto .menu > :nth-child(4) { animation-delay: 120ms; }
  html.menu-aperto .menu > :nth-child(5) { animation-delay: 160ms; }
  html.menu-aperto .menu > :nth-child(6) { animation-delay: 200ms; }
  /* la barra in basso arriva quando il pulsante della hero non si vede più */
  html.js .barra-tel { transform: translateY(calc(100% + 14px)); transition: transform .22s var(--ease-out); }
  html.js .barra-tel.su { transform: none; transition-duration: .4s; }
}

/* 5 · al mouse, alla tastiera e al dito */
.zoom { transition: transform .3s var(--ease-out); }
.vita-pillole li, .cure li, .incluso-pillola { position: relative; transition: transform .22s var(--ease-out); }
.vita-pillole li::after, .cure li::after, .incluso-pillola::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) rgba(32, 65, 40, .16); opacity: 0; transition: opacity .25s ease; }
.domande summary:active span { opacity: .7; }
.domande details[open] > p { animation: risposta .28s var(--ease-out); }
@keyframes risposta { from { opacity: 0; transform: translateY(-6px); } }
@keyframes squillo { 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@media (hover: hover) and (pointer: fine) {
  .menu > a:not(.btn):hover::after { transform: scaleX(1); }
  .casa-cornice:hover .zoom, .vita-cornice:hover .zoom, .servizi-foto:hover .zoom, .camere-foto:hover .zoom,
  .camere-fiori:hover .zoom, .contatti-panorama:hover .zoom { transform: scale(1.045); }
  .vita-pillole li:hover, .cure li:hover, .incluso-pillola:hover { transform: translateY(-4px); }
  .vita-pillole li:hover::after, .cure li:hover::after, .incluso-pillola:hover::after { opacity: 1; }
  .btn-rosso:hover .segno-tel, .contatti-tel:hover .segno-tel { animation: squillo .55s ease-in-out; }
  .domande summary:hover span { color: var(--oliva); }
  .scopri:hover, .hero-link:hover { text-decoration-thickness: 2.5px; }
  .incluso-pillola:hover span { color: var(--oliva); }
}
.domande summary span { transition: color .2s ease, opacity .12s ease; }
/* i link di testo rispondono al dito, come i pulsanti */
.menu > a:not(.btn), .contatti-tel, .contatti-indirizzo, .mappa-link, .piede a, .scopri, .hero-link { transition: color .18s ease, opacity .12s ease; }
.menu > a:not(.btn):active, .contatti-tel:active, .contatti-indirizzo:active, .mappa-link:active, .piede a:active, .scopri:active, .hero-link:active { opacity: .68; }
.incluso-pillola:active { transform: scale(.98); }

/* 6 · meno movimento: restano le dissolvenze, spariscono spostamenti, volo, profondità e numeri che salgono */
@keyframes dissolvi { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .h1-prima, .h1-seconda, .hero-sotto, .btn-hero, .hero-link, .hero-scheda, .striscia li { animation-name: dissolvi; }
  .hero-rondine { animation: dissolvi .8s ease .4s backwards; }
  .hero-foto { animation: none; }
  html.js .reveal, html.js .reveal-lato, html.js .reveal-volo, html.js .reveal-volo.specchio, html.js .reveal-piccolo, html.js .reveal-luna { translate: none; rotate: none; transition: opacity .6s ease var(--ritardo, 0ms), transform .22s var(--ease-out), background-color .18s ease; }
  html.js .reveal-piccolo { scale: none; }
  html.js [data-reveal="traccia"], html.js .ramo-confine-giu[data-reveal="traccia"], html.js .mappa-traccia { clip-path: none; opacity: 0; transition: opacity .6s ease var(--ritardo, 0ms); }
  html.js [data-reveal="traccia"].in, html.js .mappa.in .mappa-traccia { opacity: 1; }
  html.menu-aperto .menu > * { animation-name: dissolvi; }
  html.js .barra-tel { transform: none; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
  html.js .barra-tel.su { opacity: 1; visibility: visible; transition: opacity .3s ease; }
  .logo img, .menu, .menu-apri, .zoom { transition: none; }
  .domande details[open] > p { animation: dissolvi .3s ease; }
}


/* ═════════════ LE PAGINE INTERNE (step 6-bis): gli stessi pezzi della home, in forme diverse da una sezione all'altra ═════════════ */
.menu > a[aria-current="page"] { color: var(--oliva); }
.menu > a[aria-current="page"]::after { transform: scaleX(1); }
.sez-bianca { background: var(--bianco); }
.sez-sabbia { background: var(--sabbia); }
.sez-avorio { background: var(--avorio); }
.testo-sezione { position: relative; margin-top: calc(var(--u) * 12); max-width: calc(var(--u) * 760); font-size: max(17px, calc(var(--u) * 20.5)); line-height: 1.45; color: var(--nero); }
.testo-sezione a, .apertura-testo a, .testo-scheda a, .testo-carta a, .lista-foglie a, .lista-icone a, .contatti-testo a { color: var(--muschio); font-weight: 700; text-underline-offset: 3px; }
.testa-semplice { padding-top: 0; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px calc(var(--u) * 18); margin-top: calc(var(--u) * 24); }
.btn-pagina { padding: calc(var(--u) * 12) calc(var(--u) * 28); min-height: max(48px, calc(var(--u) * 56)); border-radius: calc(var(--u) * 20); font-size: max(16px, calc(var(--u) * 20)); }

/* l'apertura: il titolo con la parola in filigrana e la rondine, la foto grande col riquadro */
.apertura { padding-block: calc(var(--u) * 36) var(--spazio); background: var(--avorio); }
.apertura-griglia { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 640); gap: calc(var(--u) * 56); align-items: center; }
.apertura .testa { padding-right: calc(var(--u) * 150); }
.apertura h1 { position: relative; color: var(--bosco-testo); font-family: var(--titoli); font-weight: 340; font-size: calc(var(--u) * 52); line-height: 1.15; letter-spacing: -.005em; text-wrap: balance; }
.apertura-testo { position: relative; margin-top: calc(var(--u) * 16); padding-left: calc(var(--u) * 24); font-size: max(17px, calc(var(--u) * 21.5)); line-height: 1.45; color: var(--nero); }
.apertura-azioni, .apertura-sinistra > .lista-foglie { padding-left: calc(var(--u) * 24); }
.apertura-cornice { position: relative; border-radius: calc(var(--u) * 64); overflow: hidden; aspect-ratio: 640 / 520; background: var(--filigrana); }
.apertura-cornice > img { width: 100%; height: 100%; object-fit: cover; }
.apertura-inset { position: absolute; left: calc(var(--u) * 14); bottom: calc(var(--u) * 14); width: 42%; aspect-ratio: 4 / 3; overflow: hidden; border: calc(var(--u) * 5) solid #fff; border-radius: calc(var(--u) * 40); }
.apertura-inset img { width: 100%; height: 100%; object-fit: cover; }

/* le liste: con le icone nei cerchi o con le foglie */
.lista-icone, .lista-foglie { display: grid; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 18); }
.lista-icone li { display: flex; align-items: center; gap: calc(var(--u) * 20); font-size: max(16px, calc(var(--u) * 20)); line-height: 1.35; color: var(--nero); }
.lista-icone img { flex: none; width: calc(var(--u) * 70); }
.lista-foglie li { display: flex; align-items: flex-start; gap: calc(var(--u) * 16); font-size: max(16px, calc(var(--u) * 20)); line-height: 1.4; color: var(--nero); }
.lista-foglie .foglia { flex: none; width: calc(var(--u) * 20); margin-top: calc(var(--u) * 3); }

/* le schede bianche a due a due */
.schede-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 26); }
.schede-griglia li { display: flex; align-items: center; gap: calc(var(--u) * 22); padding: calc(var(--u) * 20) calc(var(--u) * 28); background: var(--bianco); border-radius: calc(var(--u) * 38); box-shadow: var(--ombra); }
.schede-griglia img { flex: none; width: calc(var(--u) * 84); }
.schede-griglia p { font-size: max(16px, calc(var(--u) * 20)); line-height: 1.38; color: var(--nero); }

/* la fascia verde scura con un titolo e il testo */
.notte-pagina .notte-dentro { display: grid; grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.4fr); gap: calc(var(--u) * 40); padding-block: calc(var(--u) * 48); }
.notte-pagina .notte-luna { margin: 0; }
.notte-titolo { font-family: var(--titoli); font-weight: 300; font-size: calc(var(--u) * 40); line-height: 1.18; color: #fff; text-wrap: balance; }
.notte-pagina .notte-dati { margin: 0; padding-left: calc(var(--u) * 40); }
.notte-pagina .notte-dati p { font-size: max(16px, calc(var(--u) * 19.5)); line-height: 1.45; color: #F3F5F4; }
.notte-pagina .notte-dati p + p { margin-top: calc(var(--u) * 10); }
.notte-pagina .notte-dati a { color: var(--crema); }
.fascia-icone { display: flex; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 16); }
.fascia-icone img { width: calc(var(--u) * 64); background: var(--bianco); border-radius: 50%; }

/* foto e testo, con la foto a destra o a sinistra; due foto in fila */
.foto-testo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 64); align-items: center; }
.al-contrario .foto-testo-testo { order: 2; }
.foto-testo .testa { padding-right: calc(var(--u) * 140); }
.cornice-foto { position: relative; overflow: hidden; background: var(--filigrana); }
.cornice-foto img { width: 100%; height: 100%; object-fit: cover; }
.cornice-tonda { border-radius: calc(var(--u) * 48); aspect-ratio: 4 / 3; }
.cornice-stadio { border-radius: calc(var(--u) * 160); aspect-ratio: 16 / 10; }
.cornice-blob { border-radius: 42%; aspect-ratio: 1 / 1.05; width: 86%; justify-self: center; }
.due-foto { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 18); }
.due-foto .cornice-foto { aspect-ratio: 3 / 4; border-radius: calc(var(--u) * 44); }
.due-foto-larghe { margin-top: calc(var(--u) * 26); }
.due-foto-larghe .cornice-foto { aspect-ratio: 16 / 10; }

/* la foto grande con la scheda bianca dentro */
.foto-scheda { position: relative; border-radius: calc(var(--u) * 64); overflow: hidden; aspect-ratio: 1368 / 600; background: var(--filigrana); }
.foto-scheda > img { width: 100%; height: 100%; object-fit: cover; }
.foto-scheda-carta { position: absolute; right: calc(var(--u) * 48); top: 50%; translate: 0 -50%; width: calc(var(--u) * 560); padding: calc(var(--u) * 34) calc(var(--u) * 40); background: var(--bianco); border-radius: calc(var(--u) * 40); box-shadow: var(--ombra); }
.foto-scheda-carta h2 { color: var(--bosco-testo); font-family: var(--titoli); font-weight: 340; font-size: calc(var(--u) * 40); line-height: 1.18; }
.foto-scheda-carta .testa-rondine { right: calc(var(--u) * 22); top: calc(var(--u) * -46); width: calc(var(--u) * 110); }
.testo-scheda { margin-top: calc(var(--u) * 12); font-size: max(16px, calc(var(--u) * 19)); line-height: 1.45; color: var(--nero); }
html.js .foto-scheda.reveal-foto .foto-scheda-carta.reveal { translate: 0 -50%; }

/* il cerchio accanto al testo (come «1 mese» della home) */
.cerchio-sezione { display: grid; grid-template-columns: calc(var(--u) * 210) minmax(0, 1fr); gap: calc(var(--u) * 56); align-items: center; max-width: calc(var(--u) * 1180); }
.cerchio { display: grid; place-content: center; width: calc(var(--u) * 210); height: calc(var(--u) * 210); border: calc(var(--u) * 2.5) solid var(--oliva); border-radius: 50%; background: var(--bianco);
  color: var(--muschio); font-weight: 800; font-size: calc(var(--u) * 40); line-height: 1.05; text-align: center; }
.cerchio-icona img { width: calc(var(--u) * 210); background: var(--bianco); border-radius: 50%; }
.cerchio-sezione .testa { padding-top: 0; padding-right: calc(var(--u) * 150); }

/* le due schede affiancate */
.carte-due { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 28); }
.carta { position: relative; padding: calc(var(--u) * 36) calc(var(--u) * 40); background: var(--bianco); border-radius: calc(var(--u) * 44); box-shadow: var(--ombra); }
.carta > img { width: calc(var(--u) * 84); }
.carta h2 { margin-top: calc(var(--u) * 14); color: var(--bosco-testo); font-family: var(--titoli); font-weight: 340; font-size: calc(var(--u) * 36); line-height: 1.2; }
.testo-carta { margin-top: calc(var(--u) * 10); font-size: max(16px, calc(var(--u) * 19)); line-height: 1.45; color: var(--nero); }

/* la scheda con le voci a foglia */
.carta-lista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 56); align-items: center; }
.carta-lista .testa { padding-right: calc(var(--u) * 140); }
.carta-lista-scheda { padding: calc(var(--u) * 30) calc(var(--u) * 40); background: var(--sabbia); border-radius: calc(var(--u) * 40); }
.carta-lista-scheda .lista-foglie { margin-top: 0; }

/* la striscia di simboli nelle pagine */
.striscia-pagina { margin-top: calc(var(--u) * 30); }

/* la galleria: tre per riga, mai una sotto l'altra */
.galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 26); }
.galleria .cornice-foto { margin: 0; aspect-ratio: 4 / 3; border-radius: calc(var(--u) * 36); }

/* la pizza del sabato, nella pillola con la tavola */
.incluso-pagina { justify-content: flex-start; padding-left: calc(var(--u) * 24); margin-top: calc(var(--u) * 24); }
.incluso-pagina .incluso-pillola { min-width: 0; max-width: calc(var(--u) * 980); }

/* il titolo con la rondine a sinistra, il testo a destra oltre la linea sottile (la fascia scura, in chiaro) */
.testo-affiancato { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: calc(var(--u) * 56); align-items: center; }
.testo-affiancato .testa { padding-right: calc(var(--u) * 132); }
.testo-affiancato .testa-rondine { width: calc(var(--u) * 112); }
.testo-affiancato-testo { padding-left: calc(var(--u) * 48); border-left: 1px solid var(--linea); }
.testo-affiancato-testo > .testo-sezione:first-child { margin-top: 0; }

/* l'invito in fondo alla pagina */
.invito { background: var(--sabbia); z-index: 1; }
.invito-scheda { position: relative; max-width: calc(var(--u) * 1000); margin-inline: auto; padding: calc(var(--u) * 52) calc(var(--u) * 72); background: var(--bianco); border-radius: calc(var(--u) * 48); box-shadow: var(--ombra); text-align: center; }
.invito-scheda h2 { color: var(--bosco-testo); font-family: var(--titoli); font-weight: 340; font-size: calc(var(--u) * 46); line-height: 1.18; text-wrap: balance; }
.invito-scheda .testo-sezione { margin-inline: auto; }
.invito-scheda .azioni { justify-content: center; }
.invito-scheda .testa-rondine { right: calc(var(--u) * 36); top: calc(var(--u) * -54); width: calc(var(--u) * 120); }

/* il modulo */
.modulo-griglia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: calc(var(--u) * 56); align-items: start; }
.modulo-griglia .testa { padding-right: calc(var(--u) * 120); }
.modulo-rondine { width: calc(var(--u) * 240); margin-top: calc(var(--u) * 30); }
.modulo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 18) calc(var(--u) * 22); padding: calc(var(--u) * 36) calc(var(--u) * 40); background: var(--bianco); border-radius: calc(var(--u) * 40); box-shadow: var(--ombra); scroll-margin-top: calc(var(--u) * 100); }
.campo-largo { grid-column: 1 / -1; }
.campo label { display: block; margin-bottom: 6px; color: var(--bosco-testo); font-weight: 800; font-size: max(16px, calc(var(--u) * 18)); }
.campo input, .campo textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--avorio); color: var(--nero); font: inherit; font-size: max(16px, calc(var(--u) * 18)); line-height: 1.4; transition: border-color .18s ease, background-color .18s ease; }
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--oliva); outline-offset: 1px; border-color: var(--oliva); background: var(--bianco); }
.campo [aria-invalid="true"] { border-color: var(--rosso); }
.campo-aiuto { margin-top: 6px; font-size: max(15px, calc(var(--u) * 16)); color: #4A4A4A; }
.campo-errore, .modulo-esito-errore { margin-top: 6px; color: #B3211E; font-weight: 700; font-size: max(15px, calc(var(--u) * 16)); }
.modulo-fine { display: grid; gap: 10px; justify-items: start; }
.modulo-esito-ok { color: var(--muschio); font-weight: 700; }
.modulo-privacy { font-size: max(14px, calc(var(--u) * 15)); line-height: 1.45; color: #4A4A4A; }
.modulo-privacy a { color: var(--muschio); font-weight: 700; }
.modulo .btn { border: 0; cursor: pointer; }

/* «Dove siamo» della pagina dei contatti: la mappa della home */
.contatti-indirizzo-link { color: var(--muschio); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.azioni-mappa { margin-top: calc(var(--u) * 6); }

@media (max-width: 900px) {
  .apertura { padding-top: calc(var(--u) * 18); }
  .apertura-griglia, .foto-testo, .carta-lista, .modulo-griglia, .carte-due { grid-template-columns: 1fr; gap: 22px; }
  .apertura .testa, .foto-testo .testa, .carta-lista .testa, .modulo-griglia .testa, .cerchio-sezione .testa { padding-right: calc(var(--u) * 70); }
  .apertura h1 { font-size: calc(var(--u) * 31); }
  .apertura-testo, .apertura-azioni, .apertura-sinistra > .lista-foglie { padding-left: 0; }
  .apertura-testo { font-size: max(16px, calc(var(--u) * 17)); }
  .apertura-cornice { aspect-ratio: 358 / 260; border-radius: calc(var(--u) * 34); }
  .apertura-inset { border-width: 3px; border-radius: calc(var(--u) * 24); width: 44%; }
  .al-contrario .foto-testo-testo { order: 0; }
  .testo-sezione { font-size: max(16px, calc(var(--u) * 17)); }
  .lista-icone li, .lista-foglie li { font-size: max(16px, calc(var(--u) * 16.5)); }
  .lista-icone img { width: calc(var(--u) * 52); }
  .lista-foglie .foglia { width: calc(var(--u) * 16); }
  .schede-griglia { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
  .schede-griglia li { gap: 14px; padding: 10px 16px 10px 10px; border-radius: calc(var(--u) * 26); }
  .schede-griglia img { width: calc(var(--u) * 56); }
  .schede-griglia p { font-size: max(16px, calc(var(--u) * 16)); }
  .notte-pagina .notte-dentro { grid-template-columns: auto 1fr; gap: 14px calc(var(--u) * 14); padding: calc(var(--u) * 30) calc(var(--u) * 20); }
  .notte-titolo { font-size: calc(var(--u) * 26); }
  .notte-pagina .notte-dati { grid-column: 1 / -1; padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .45); }
  .notte-pagina .notte-dati p { font-size: max(16px, calc(var(--u) * 16)); }
  .fascia-icone img { width: calc(var(--u) * 52); }
  .cornice-tonda { border-radius: calc(var(--u) * 30); }
  .cornice-stadio { border-radius: calc(var(--u) * 70); }
  .cornice-blob { width: 78%; }
  .due-foto { gap: 10px; }
  .due-foto .cornice-foto { border-radius: calc(var(--u) * 26); }
  .foto-scheda { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
  .foto-scheda > img { aspect-ratio: 358 / 220; height: auto; border-radius: calc(var(--u) * 34); }
  .foto-scheda-carta { position: relative; right: auto; top: auto; translate: none; width: auto; margin: calc(var(--u) * -30) calc(var(--u) * 10) 0; padding: 20px 18px; border-radius: calc(var(--u) * 26); }
  html.js .foto-scheda.reveal-foto .foto-scheda-carta.reveal { translate: none; }
  .foto-scheda-carta h2 { font-size: calc(var(--u) * 26); padding-right: calc(var(--u) * 60); }
  .foto-scheda-carta .testa-rondine { right: 10px; top: -26px; width: calc(var(--u) * 64); }
  .testo-scheda { font-size: max(16px, calc(var(--u) * 16)); }
  .cerchio-sezione { grid-template-columns: 1fr; gap: 16px; }
  .cerchio, .cerchio-icona img { width: calc(var(--u) * 120); height: calc(var(--u) * 120); font-size: calc(var(--u) * 26); }
  .carta { padding: 22px 20px; border-radius: calc(var(--u) * 28); }
  .carta > img { width: calc(var(--u) * 58); }
  .carta h2 { font-size: calc(var(--u) * 24); }
  .testo-carta { font-size: max(16px, calc(var(--u) * 16)); }
  .carta-lista-scheda { padding: 18px 16px; border-radius: calc(var(--u) * 26); }
  .galleria { grid-template-columns: 1fr 1fr; gap: 10px; }
  .galleria .cornice-foto { border-radius: calc(var(--u) * 22); }
  .striscia-4 { grid-template-columns: 1fr 1fr; }
  .incluso-pagina { padding-left: 0; }
  .invito-scheda { padding: 34px 20px 26px; border-radius: calc(var(--u) * 30); }
  .invito-scheda h2 { font-size: calc(var(--u) * 27); padding-inline: calc(var(--u) * 20); }
  .invito-scheda .testa-rondine { right: 12px; top: -30px; width: calc(var(--u) * 70); }
  .btn-pagina { width: 100%; font-size: max(17px, calc(var(--u) * 17)); }
  .modulo { grid-template-columns: 1fr; padding: 20px 16px; border-radius: calc(var(--u) * 26); }
  .modulo-rondine { display: none; }
  .testo-affiancato { grid-template-columns: 1fr; gap: 0; }
  .testo-affiancato-testo { padding-left: 0; border-left: 0; }
  .testo-affiancato-testo > .testo-sezione:first-child { margin-top: calc(var(--u) * 12); }
}

/* i titoli nelle colonne a metà: più piccoli, la rondine più piccola */
.apertura h1 { font-size: calc(var(--u) * 46); }
.apertura .testa-rondine { width: calc(var(--u) * 128); }
.foto-testo .testa h2, .carta-lista .testa h2, .modulo-griglia .testa h2, .cerchio-sezione .testa h2, .testo-affiancato .testa h2 { font-size: calc(var(--u) * 42); line-height: 1.18; text-wrap: balance; }
.foto-testo .testa-rondine, .carta-lista .testa-rondine, .modulo-griglia .testa-rondine, .cerchio-sezione .testa-rondine { width: calc(var(--u) * 104); }
.striscia-pagina li > span { max-width: 11em; }
.pagina-interna .testa h2 { text-wrap: balance; }
/* il numero di telefono dentro una frase non si spezza a metà */
.testo-sezione a[href^="tel:"], .modulo-esito a[href^="tel:"], .lista-foglie a[href^="tel:"] { white-space: nowrap; }
/* la rondine dell'invito sull'angolo sinistro: così non fa coppia con quella della sezione prima, quasi sempre a destra */
.invito-scheda .testa-rondine { right: auto; left: calc(var(--u) * 36); }
@media (min-width: 901px) {
  .apertura .testa { padding-right: calc(var(--u) * 120); }
  .foto-testo .testa, .carta-lista .testa, .modulo-griglia .testa { padding-right: calc(var(--u) * 136); }
  .cerchio-sezione .testa { padding-right: calc(var(--u) * 140); }
  .cerchio-sezione .testo-sezione { max-width: calc(var(--u) * 720); }
  /* il testo sotto il titolo parte dove parte il titolo */
  .testa ~ .testo-sezione, .testa ~ .lista-icone, .testa ~ .lista-foglie, .testa ~ .azioni, .testa ~ .modulo-rondine { margin-left: calc(var(--u) * 24); }
  .apertura-sinistra > .testa ~ * { margin-left: 0; }
  .foto-scheda-carta h2 { padding-right: calc(var(--u) * 84); }
}
@media (max-width: 900px) {
  .apertura h1 { font-size: calc(var(--u) * 30); }
  .apertura .testa-rondine { width: calc(var(--u) * 72); }
  .foto-testo .testa h2, .carta-lista .testa h2, .modulo-griglia .testa h2, .cerchio-sezione .testa h2, .testo-affiancato .testa h2 { font-size: calc(var(--u) * 28); }
  .foto-testo .testa-rondine, .carta-lista .testa-rondine, .modulo-griglia .testa-rondine, .cerchio-sezione .testa-rondine, .testo-affiancato .testa-rondine { width: calc(var(--u) * 64); }
  .striscia-pagina li > span { max-width: none; }
  /* da telefono la rondine vola sopra il titolo: il titolo prende tutta la riga e non la tocca mai */
  .pagina-interna .testa { padding-right: 0; }
  .pagina-interna .testa-semplice { padding-top: calc(var(--u) * 30); }
  .pagina-interna .testa > .testa-rondine { top: auto; bottom: calc(100% - var(--u) * 26); width: calc(var(--u) * 60); }
  .invito-scheda .testa-rondine { left: 12px; right: auto; }
  /* nell'apertura, un po' più d'aria sopra */
  .apertura { padding-top: calc(var(--u) * 26); }
  .pagina-interna .apertura .testa { padding-top: calc(var(--u) * 46); }
  .pagina-interna .apertura .testa > .testa-rondine { bottom: calc(100% - var(--u) * 44); }
  /* accanto al cerchio c'è posto: la rondine va lì */
  .pagina-interna .cerchio-sezione .testa { padding-top: 0; }
  .pagina-interna .cerchio-sezione .testa > .testa-rondine { bottom: auto; top: calc(var(--u) * -112); right: calc(var(--u) * 30); width: calc(var(--u) * 80); }
  /* la pizza del sabato: la tavola apparecchiata sta subito sotto, il simbolo piccolo nella pillola non serve */
  .incluso-pagina .incluso-pillola { padding: 10px 18px; }
  .incluso-pagina .incluso-pillola img { display: none; }
}


/* ═════════════ IL SALTO DI LIVELLO (step 6-quater, 07/11/2026) ═════════════
   Stessa struttura, stesso copy, stesso kit, stessi colori e movimento. Cambia la qualità grafica (Design/SALTO-DI-LIVELLO.md):
   la hero immersiva, le foto che si sovrappongono e scavalcano i confini fra le sezioni, la filigrana più presente. */

/* 1 · la filigrana dei titoli: più grande e di un tono più pieno, la firma di ogni sezione */
.filigrana { top: calc(var(--u) * -20); color: var(--filigrana-forte); font-size: calc(var(--u) * 86); letter-spacing: .015em; }
.casa .filigrana { top: calc(var(--u) * -18); font-size: calc(var(--u) * 106); }
.testa-sola .filigrana { top: 0; font-size: calc(var(--u) * 66); }
.ramo-confine { width: calc(var(--u) * 244); }
@media (max-width: 900px) {
  .filigrana, .casa .filigrana { top: calc(var(--u) * -8); font-size: calc(var(--u) * 44); }
  .testa-sola .filigrana { top: 0; font-size: calc(var(--u) * 30); }
  .ramo-confine { width: calc(var(--u) * 150); }
}

/* 2 · HERO: la scena intera dal bordo alto (il soffitto di legno, la valle dalle finestre, gli ospiti), il velo solo da
   sinistra e dall'alto, gli angoli in basso tondi come tutte le cornici del sito; il titolo più grande, la rondine più grande */
@media (min-width: 901px) {
  .hero-scena { height: min(47.2vw, 920px); }
  .hero-sfondo { border-radius: 0 0 calc(var(--u) * 110) calc(var(--u) * 110); }
  .hero-foto { top: 0; width: max(100%, calc(var(--u) * 1700)); height: auto; min-height: 100%; object-position: 0 0; }
  .hero-velo { background:
      radial-gradient(ellipse 66% 58% at 16% 18%, rgba(30, 13, 5, .8) 0%, rgba(30, 13, 5, .66) 45%, rgba(30, 13, 5, .26) 74%, rgba(30, 13, 5, 0) 100%),
      linear-gradient(180deg, rgba(30, 13, 5, .5) 0%, rgba(30, 13, 5, .1) 26%, rgba(30, 13, 5, 0) 42%, rgba(30, 13, 5, 0) 82%, rgba(30, 13, 5, .22) 100%); }
  .hero-testo { padding-top: calc(var(--u) * 44); }
  .h1-prima { font-size: calc(var(--u) * 64); line-height: 1.08; letter-spacing: -.012em; }
  .h1-seconda { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 60); }
  .hero-sotto { margin-top: calc(var(--u) * 16); max-width: calc(var(--u) * 720); }
  .hero-azioni { margin-top: calc(var(--u) * 26); }
  .hero-rondine { left: calc(var(--u) * 836); top: calc(var(--u) * -74); width: calc(var(--u) * 250); }
  .hero-scheda { margin-top: calc(var(--u) * 64); }
}
@media (max-width: 900px) {
  /* la foto sale dietro al testo: il soffitto di legno scurito sotto il pulsante, gli ospiti subito sotto; gli angoli in basso tondi */
  .hero-sfondo { border-radius: 0 0 calc(var(--u) * 40) calc(var(--u) * 40); }
  .hero-foto { height: calc(var(--u) * 560); object-position: 4% 0; }
  .hero-velo { background: linear-gradient(180deg, var(--legno) 0, var(--legno) calc(var(--u) * 110), rgba(48, 24, 12, .9) calc(var(--u) * 190),
      rgba(48, 24, 12, .68) calc(var(--u) * 280), rgba(48, 24, 12, .5) calc(var(--u) * 380), rgba(48, 24, 12, .16) calc(var(--u) * 460), rgba(48, 24, 12, 0) calc(var(--u) * 510)); }
}

/* 3 · BENVENUTI: la facciata scende dentro la fascia verde scura e la scavalca; il riquadro dei monti esce dal bordo */
.casa { z-index: 2; padding-bottom: 0; }
@media (min-width: 901px) {
  .casa-cornice { overflow: visible; aspect-ratio: 1368 / 500; background: none; }
  .casa-immagini { display: block; position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--u) * 64); background: var(--filigrana); }
  .casa-monti { left: calc(var(--u) * -20); bottom: calc(var(--u) * 46); width: calc(var(--u) * 430); border-width: calc(var(--u) * 7); box-shadow: var(--ombra); }
  .casa-scheda { bottom: calc(var(--u) * 20); }
  /* la fascia sale dietro la foto: il riquadro verde si allunga verso l'alto con un pezzo solo disegnato, la sezione resta alta com'era */
  .casa + .notte { overflow: visible; clip-path: inset(calc(var(--u) * -72) 0 0 0); }
  .casa + .notte::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--u) * -72); height: calc(var(--u) * 72); background: var(--bosco); }
  .casa + .notte .notte-dentro { padding-top: calc(var(--u) * 24); }
}
@media (max-width: 900px) {
  .casa-cornice { display: grid; }
  .casa-immagini { grid-area: 1 / 1; }
  .casa-monti { position: relative; grid-area: 1 / 1; align-self: end; justify-self: start; left: auto; bottom: auto; margin: 0 0 calc(var(--u) * 10) calc(var(--u) * -6); }
  .casa-scheda { grid-area: 2 / 1; z-index: 1; margin: calc(var(--u) * -6) 0 calc(var(--u) * -44); }
  .casa + .notte .notte-dentro { padding-top: calc(var(--u) * 70); }
}

/* 4 · la fascia della notte: le ore più grandi, la luna più presente */
@media (min-width: 901px) {
  .notte-luna { width: calc(var(--u) * 108); }
  .notte-ore { font-size: calc(var(--u) * 60); }
}

/* 5 · VITA INSIEME: le pillole a cavallo del bordo basso della foto, come la fascia della hero */
@media (min-width: 901px) {
  .vita-cornice { overflow: visible; aspect-ratio: auto; background: none; border-radius: 0; }
  .vita-foto { height: auto; aspect-ratio: 1344 / 460; border-radius: calc(var(--u) * 64); background: var(--filigrana); }
  .vita-pillole { bottom: calc(var(--u) * -50); }
  .vita { padding-bottom: calc(var(--spazio) + var(--u) * 46); }
}

/* 6 · CAMERE e CI TROVI: la camera meno schiacciata, il panorama più alto */
@media (min-width: 901px) {
  .camere-foto { aspect-ratio: 690 / 330; }
  .contatti-panorama { aspect-ratio: 860 / 150; }
}

/* 7 · LE PAGINE INTERNE · l'apertura: la foto grande fino al bordo destro, il riquadro piccolo che si sovrappone */
.apertura-foto { position: relative; }
@media (min-width: 901px) {
  .apertura { padding-bottom: calc(var(--spazio) + var(--u) * 34); overflow-x: clip; }
  .apertura-griglia { gap: calc(var(--u) * 64); }
  .apertura-foto { margin-right: calc(var(--gutter) * -1 - max(0px, (100vw - 1560px) / 2)); }
  .apertura-cornice { aspect-ratio: auto; height: calc(var(--u) * 600); border-radius: calc(var(--u) * 120) 0 0 calc(var(--u) * 120); }
  .apertura-inset { left: calc(var(--u) * -70); bottom: calc(var(--u) * -34); width: calc(var(--u) * 300); border-width: calc(var(--u) * 7); box-shadow: var(--ombra); }
}
@media (max-width: 900px) {
  .apertura { padding-bottom: calc(var(--u) * 70); }
  .apertura-foto { margin-inline: calc(var(--gutter) * -1); }
  .apertura-cornice { aspect-ratio: 390 / 290; border-radius: 0 0 calc(var(--u) * 48) calc(var(--u) * 48); }
  .apertura-inset { left: calc(var(--u) * 16); bottom: calc(var(--u) * -30); width: 40%; border-width: 4px; box-shadow: var(--ombra); }
}

/* 8 · le coppie di foto: sfalsate e sovrapposte, col bordo bianco, così si legge la profondità degli ambienti */
.due-foto { align-items: start; }
.due-foto > :nth-child(1) { margin-bottom: calc(var(--u) * 70); }
.due-foto > :nth-child(2) { z-index: 1; margin-top: calc(var(--u) * 70); margin-left: calc(var(--u) * -54); border: calc(var(--u) * 7) solid var(--bianco); box-shadow: var(--ombra); }
@media (max-width: 900px) {
  .due-foto > :nth-child(1) { margin-bottom: calc(var(--u) * 34); }
  .due-foto > :nth-child(2) { margin-top: calc(var(--u) * 34); margin-left: calc(var(--u) * -26); border-width: 4px; }
}

/* 9 · la foto con la scheda: la scheda a cavallo del bordo basso, la foto più alta */
@media (min-width: 901px) {
  .foto-scheda { overflow: visible; aspect-ratio: 1368 / 640; margin-bottom: calc(var(--u) * 74); background: none; }
  .foto-scheda > img { border-radius: calc(var(--u) * 64); }
  .foto-scheda-carta { top: auto; bottom: calc(var(--u) * -74); translate: none; }
}

/* 10 · la galleria a mosaico: la camera doppia e la facciata, grandi, rompono la griglia (mai una foto sotto l'altra) */
.galleria { grid-auto-flow: dense; }
.galleria .cornice-foto { aspect-ratio: auto; height: 100%; }
.galleria > :nth-child(2), .galleria > :nth-child(10) { grid-column: span 2; grid-row: span 2; }
@media (min-width: 901px) { .galleria { grid-auto-rows: calc(var(--u) * 250); } }
@media (max-width: 900px) { .galleria { grid-auto-rows: calc(var(--u) * 128); } }

/* 11 · la pizza del sabato: la tavola apparecchiata appoggiata sulla pillola */
@media (min-width: 901px) {
  .incluso-pagina { gap: 0; }
  .incluso-pagina .incluso-pillola { padding-right: calc(var(--u) * 96); }
  .incluso-pagina .incluso-tavola { position: relative; z-index: 1; width: calc(var(--u) * 170); margin-left: calc(var(--u) * -70); }
}

/* 12 · le due schede dei servizi: l'icona più grande, il titolo più forte, il bordo che le stacca dal fondo */
.carta { border: 1px solid var(--filigrana-forte); }
@media (min-width: 901px) {
  .carte-due { gap: calc(var(--u) * 36); }
  .carta > img { width: calc(var(--u) * 100); }
  .carta h2 { font-size: calc(var(--u) * 40); }
}

/* 13 · le pagine legali: una scheda bianca su sabbia, con la rondine in alto; il testo del modello non cambia */
.pagina { background: var(--sabbia); }
.pagina-testo { position: relative; padding: calc(var(--u) * 58) calc(var(--u) * 64); background: var(--bianco); border-radius: calc(var(--u) * 48); box-shadow: var(--ombra); }
.pagina-testo::before { content: ""; position: absolute; right: calc(var(--u) * 44); top: calc(var(--u) * -40); width: calc(var(--u) * 150); aspect-ratio: 420 / 161;
  background: url('/assets/img/simboli/rondine-volo-3.webp') center / contain no-repeat; pointer-events: none; }
.pagina-testo h1 { padding-right: calc(var(--u) * 120); }
@media (max-width: 900px) {
  .pagina-testo { padding: 30px 18px 26px; border-radius: calc(var(--u) * 26); }
  .pagina-testo::before { right: 14px; top: -22px; width: calc(var(--u) * 86); }
  .pagina-testo h1 { padding-right: calc(var(--u) * 40); }
}

/* 14 · la 404: una piccola scena, la rondine che plana e il ramo sotto i pulsanti */
.errore { background: var(--sabbia); }
.errore img { width: min(300px, 62vw); margin-bottom: 22px; animation: rondine-libra 3.4s ease-in-out infinite alternate; }
.errore h1 { font-size: max(36px, calc(var(--u) * 64)); }
.errore .contenitore::after { content: ""; display: block; width: min(250px, 58vw); aspect-ratio: 720 / 247; margin: 34px auto 0;
  background: url('/assets/img/simboli/ramo-divisore.webp') center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .errore img { animation: none; } }

/* 15 · i dettagli delle pagine: più aria prima dell'invito, la linea e la scheda a foglie più presenti, i recapiti più grandi */
.testo-affiancato-testo { border-left-width: 2px; border-left-color: var(--salvia); }
.carta-lista-scheda { border: 1px solid var(--filigrana-forte); }
@media (min-width: 901px) {
  .pagina-interna .invito { padding-top: calc(var(--spazio) + var(--u) * 26); }
  .apertura-sinistra > .lista-foglie li { font-size: max(17px, calc(var(--u) * 22)); }
  .modulo-rondine { margin-top: calc(var(--u) * 48); }
}
@media (max-width: 900px) { .errore h1 { font-size: calc(var(--u) * 38); } }

/* 16 · più sovrapposizioni e passaggi più ricchi: le schede dei servizi sulla foto della sala, le rondini che attraversano il
   confine fra due sezioni, il ramo che apre la chiusura; nelle pagine interne, più respiro fra le sezioni */
.contatti { z-index: 1; }
.pagina-interna { --spazio: calc(var(--u) * 78); }
@media (min-width: 901px) {
  .cure { position: relative; z-index: 1; margin-left: calc(var(--u) * -66); }
  .vita .testa-rondine { width: calc(var(--u) * 150); top: calc(var(--u) * -76); }
  .camere .testa-rondine { width: calc(var(--u) * 150); top: calc(var(--u) * -84); }
}
@media (max-width: 900px) {
  .pagina-interna { --spazio: calc(var(--u) * 66); }
}

/* ═════════════ LE FOTO NUOVE DEL CLIENTE (tornata «2 Step», 07/11/2026): stessi pezzi e stesso movimento ═════════════ */
/* il muro con la rondine: il taglio tiene il nome e la rondine dipinti, nel riquadro della home e nella foto grande */
.casa-monti { object-position: 50% 62%; }
.foto-muro { object-position: 50% 58%; }
.foto-facciata { object-position: 50% 42%; }
/* il salone lungo: il taglio tiene gli ospiti in poltrona, coi visi interi */
.foto-salone-ospiti { object-position: 50% 72%; }
/* le due foto del salone con la cyclette: la libreria e la cyclette dentro la cornice */
.foto-cyclette-porta { object-position: 62% 50%; }
.foto-cyclette-libreria { object-position: 90% 50%; }
/* la griglia uguale (le feste): 3 per riga da computer, 2 da telefono; il taglio non tocca i visi */
.galleria-uguale { grid-auto-rows: auto; margin-top: calc(var(--u) * 40); }
.galleria-uguale .cornice-foto { aspect-ratio: 5 / 4; height: auto; }
.galleria-uguale > :nth-child(2) { grid-column: auto; grid-row: auto; }
.foto-festa-torta { object-position: 50% 25%; }
.foto-festa-abbraccio { object-position: 50% 40%; }
.foto-festa-tavola { object-position: 50% 55%; }
.foto-festa-marzo { object-position: 50% 50%; }
.foto-festa-gruppo { object-position: 50% 50%; }
.foto-festa-albero { object-position: 50% 20%; }
/* la fila di tre (la sala da pranzo): una larga e due strette da computer; da telefono due colonne, senza buchi */
.galleria-tre { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); margin-top: calc(var(--u) * 44); }
.galleria-tre > :nth-child(2) { grid-column: auto; grid-row: auto; }
@media (min-width: 901px) { .galleria-tre { grid-auto-rows: calc(var(--u) * 440); } }
@media (max-width: 900px) {
  .galleria-uguale { margin-top: calc(var(--u) * 22); }
  .galleria-tre { grid-template-columns: 1fr 1fr; grid-auto-rows: calc(var(--u) * 150); margin-top: calc(var(--u) * 20); }
  .galleria-tre > :nth-child(2) { grid-row: span 2; }
}
/* la galleria delle camere: il montascale, alto, rompe la griglia da computer */
.galleria > :nth-child(12) { grid-column: span 2; grid-row: span 2; }
.galleria > :nth-child(10) { grid-column: auto; grid-row: auto; }
@media (min-width: 901px) { .galleria > :nth-child(7) { grid-row: span 2; } }
.foto-montascale-alto { object-position: 50% 84%; }
.foto-vista-valle { object-position: 50% 32%; }
/* il cartello lungo la strada: piccolo, dentro il panorama di «Dove siamo», col bordo bianco come gli altri riquadri:
   l'altezza segue quella del panorama, così a qualsiasi larghezza resta dentro e non tocca mai il testo */
.contatti-panorama { position: relative; }
.contatti-cartello { position: absolute; top: 7%; bottom: 7%; right: 2%; z-index: 1; aspect-ratio: 3 / 4; overflow: hidden;
  border: calc(var(--u) * 5) solid var(--bianco); border-radius: calc(var(--u) * 28); background: var(--filigrana); box-shadow: var(--ombra); }
.contatti-panorama .contatti-cartello img { width: 150%; max-width: none; height: auto; margin: -20% 0 0 -40.5%; }
@media (min-width: 901px) { #dove-siamo .contatti-panorama { aspect-ratio: 860 / 200; } }
@media (max-width: 900px) {
  #dove-siamo .contatti-panorama { aspect-ratio: 358 / 160; }
  .contatti-cartello { border-width: 3px; border-radius: calc(var(--u) * 18); }
}
/* le foto delle griglie rispondono al mouse come le altre */
@media (hover: hover) and (pointer: fine) {
  .galleria .cornice-foto:hover .zoom, .due-foto .cornice-foto:hover .zoom { transform: scale(1.045); }
}
/* «I pasti: colazione, pranzo, merenda e cena» sta in due righe, senza toccare la rondine */
@media (min-width: 901px) {
  .foto-testo .testa { padding-right: calc(var(--u) * 124); }
  .foto-testo .testa-rondine { right: calc(var(--u) * 6); }
}

/* gli sbordi: il menu a 901-1040 px più stretto; le griglie da telefono non si allargano per un indirizzo email lungo */
@media (min-width: 901px) and (max-width: 1040px) {
  .menu { gap: calc(var(--u) * 26); }
  .menu-cta { padding-inline: calc(var(--u) * 16); }
}
@media (max-width: 900px) {
  .apertura-griglia, .foto-testo, .carta-lista, .modulo-griglia, .carte-due { grid-template-columns: minmax(0, 1fr); }
  .lista-foglie a { overflow-wrap: anywhere; }
  /* Accoglienza da telefono: il ramo fa da stacco a tutta misura, il mese e il suo testo uno sotto l'altro, così il testo sta in tre righe */
  .percorso > .ramo-due { width: 72%; margin-block: calc(var(--u) * -4); }
  .mese-blocco { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .mese-testo { flex: none; width: 100%; }
  .mese-testo .scopri { display: flex; width: fit-content; margin: 6px auto 0; }
}


/* ═════════════ LE CORREZIONI DEL COLLAUDO (step 7, 07/11/2026) ═════════════ */
/* D1 · la hero: la foto più a sinistra e la scheda un po' più stretta: nessun viso sotto la scheda */
@media (min-width: 901px) {
  .hero-foto { left: calc(var(--u) * -110); width: max(calc(100% + var(--u) * 110), calc(var(--u) * 1700)); }
  .hero-scheda { width: calc(var(--u) * 290); padding-inline: calc(var(--u) * 22); }
  .hero-scheda li { gap: calc(var(--u) * 18); }
  /* D2 e D7 · la rondine resta fra il titolo e la scheda e sale nella testata, sotto la riga del menu: non tocca il titolo né le voci */
  .hero-rondine { left: calc(var(--u) * 850); top: calc(var(--u) * -36); width: calc(var(--u) * 230); }
}
/* D2 · scorrendo la rondine passa sotto la testata: non copre mai il menu */
.testata.scorre ~ main .hero-rondine { z-index: 3; }

/* D4 · la facciata senza il rattoppo */
.foto-facciata-taglio { object-position: 50% 25%; }
.galleria .foto-facciata-taglio { object-position: 50% 41%; }

/* D6 · le tabelle: il bordo destro sfuma finché c'è altro da vedere, e la barra si vede */
.pagina-testo table { scrollbar-width: thin; scrollbar-color: var(--oliva) var(--filigrana); }
.pagina-testo table::-webkit-scrollbar { height: 6px; }
.pagina-testo table::-webkit-scrollbar-thumb { background: var(--oliva); border-radius: 3px; }
.pagina-testo table::-webkit-scrollbar-track { background: var(--filigrana); border-radius: 3px; }
.pagina-testo table.scorre-di-lato:not(.a-fine) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 46px), rgba(0, 0, 0, .16)); mask-image: linear-gradient(to right, #000 calc(100% - 46px), rgba(0, 0, 0, .16)); }

/* D7 · le rondini lontane da titoli e filigrane: nell'apertura accanto al titolo, sotto la parola in filigrana */
@media (min-width: 901px) {
  .apertura .testa { padding-right: calc(var(--u) * 130); }
  .apertura .testa-rondine { top: calc(var(--u) * 74); right: 0; width: calc(var(--u) * 118); }
  .foto-testo .filigrana { top: calc(var(--u) * -8); font-size: calc(var(--u) * 68); }
}
@media (max-width: 900px) {
  .filigrana, .casa .filigrana { top: calc(var(--u) * -4); font-size: calc(var(--u) * 38); }
}

/* D8 · a 320 px: il numero intero sui pulsanti rossi, i blocchi di testo un filo più piccoli */
@media (max-width: 360px) {
  .btn-rosso { white-space: nowrap; }
  .btn-hero, .btn-pagina { padding-inline: 12px; font-size: 16px; }
  .invito-scheda { padding-inline: 14px; }
}
@media (max-width: 340px) {
  .testo-sezione, .testo-scheda, .testo-carta, .apertura-testo, .lista-icone li, .lista-foglie li, .schede-griglia p, .testa-testo, .contatti-testo, .mese-testo,
  .domande details p, .notte-pagina .notte-dati p, .notte-note, .cure p, .pasti li, .vita-pillole li, .hero-sotto { font-size: 15px; }
}

/* D9 · il salone da computer: la foto intera ingrandita verso destra, sopra le pillole: niente televisore a metà né muro vuoto */
@media (min-width: 901px) {
  .vita-foto picture { display: contents; }
  .vita-foto img { width: 128%; max-width: none; margin-left: -28%; object-position: 50% 46%; }
}

/* D10 · i piccoli */
@media (max-width: 900px) {
  .pagina-testo h1 { font-size: calc(var(--u) * 32); }
  /* i link di testo: il riquadro da toccare è di 44 px, senza spostare niente */
  .scopri, .contatti-indirizzo-link { padding-block: 12px; margin-block: -12px; }
  .hero-link { padding-block: 11px; margin-block: -3px; }
  .piede-recapiti a { padding-block: 8.5px; margin-block: -5.5px; }
}
/* le domande su due righe: la risposta alla stessa distanza delle altre */
.domande summary { padding-block: 4px; }
.testa-sola .filigrana { font-size: calc(var(--u) * 60); }
@media (max-width: 900px) { .testa-sola .filigrana { font-size: calc(var(--u) * 28); } .domande summary { padding-block: 6px; } }
/* «Scopri la casa famiglia» in una riga anche a 1024 px; il logo non tocca «Home» a 901 px */
@media (min-width: 901px) and (max-width: 1200px) {
  .casa-scheda .scopri { margin-left: 0; white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .logo img { width: calc(var(--u) * 146); }
  .testata-dentro { padding-left: calc(var(--u) * 40); padding-right: calc(var(--u) * 30); }
}


/* ═════════════ IL SECONDO GIRO DEL COLLAUDO (step 7, 07/11/2026) ═════════════ */
/* D7 · l'ala della rondine di «Vita insieme» più in basso: attraversa il confine della fascia verde senza toccarne l'ultima riga */
@media (min-width: 901px) {
  .vita .testa-rondine { top: calc(var(--u) * -50); }
}
/* D10 · le domande: fino a 1200 px una riga è alta 44 px, e il testo sta alla stessa distanza dalla risposta con una riga o con due */
@media (max-width: 1200px) {
  .domande summary { padding-block: 8px; padding-block: calc((44px - 1lh) / 2); }
}
/* la foglia non fa più alta la riga; da 1201 px in su la distanza è la stessa con una riga o con due, e la home non si allunga */
.domande summary img { margin-block: -1em; }
@media (min-width: 1201px) {
  .domande summary { min-height: 0; padding-block: 6px; }
}
/* D10 · da telefono, 44 px veri: i link non finiscono sotto le foto accanto, e quelli del piede hanno il loro spazio */
@media (max-width: 900px) {
  .testa-scopri, .mappa-link, .contatti-tel { position: relative; z-index: 2; }
  .testa-scopri { right: auto; bottom: auto; }
  .contatti-tel { padding-block: 6px; margin-block: -6px; }
  .piede-recapiti { gap: 0; }
  .piede-recapiti a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding-block: 0; margin-block: 0; }
  .piede-link a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .errore-azioni a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
}


/* ═════════════ LE FOTO VERE NELLA HERO E PIÙ SPAZIO FRA LE SEZIONI (07/11/2026, Domenico) ═════════════
   «al posto dell'immagine che abbiamo generato, metti qualche immagine… reali»: dietro, la sala da pranzo vera; davanti,
   tre foto vere della casa appoggiate come cartoline. «Leggermente più spazio… tra una sezione e l'altra». */
:root { --spazio: calc(var(--u) * 80); }
.pagina-interna { --spazio: calc(var(--u) * 92); }
.casa { padding-top: calc(var(--u) * 78); }

.hero-album { position: relative; z-index: 3; }
.hero-cartolina { position: absolute; display: block; max-width: none; height: auto; object-fit: cover; background: var(--bianco);
  border: calc(var(--u) * 7) solid var(--bianco); border-radius: calc(var(--u) * 30);
  box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 42) rgba(24, 10, 4, .42);
  transition: translate .4s var(--ease-out), box-shadow .4s var(--ease-out);
  animation: entra-su .95s var(--ease-out) .75s backwards; }
.hero-cartolina-uno { aspect-ratio: 3 / 2; object-position: 50% 38%; rotate: -2deg; }
.hero-cartolina-due { z-index: 1; aspect-ratio: 3 / 2; object-position: 50% 50%; rotate: 1.6deg; animation-delay: .9s; }
.hero-cartolina-tre { aspect-ratio: 4 / 3; object-position: 50% 50%; rotate: -1.2deg; animation-delay: 1.05s; }
@media (hover: hover) {
  .hero-cartolina:hover { z-index: 2; translate: 0 calc(var(--u) * -8); box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 52) rgba(24, 10, 4, .46); }
}
@media (prefers-reduced-motion: reduce) { .hero-cartolina { animation-name: dissolvi; transition: none; } }

@media (min-width: 901px) {
  .hero-scena { height: min(50vw, 860px); }
  .hero-foto { left: 0; width: max(100%, calc(var(--u) * 1700)); }
  .hero-album { position: absolute; left: calc(var(--gutter) + var(--u) * 36); bottom: calc(var(--u) * 64); width: calc(var(--u) * 920); height: calc(var(--u) * 270); }
  .hero-cartolina-uno { left: 0; top: 0; width: calc(var(--u) * 384); }
  .hero-cartolina-due { left: calc(var(--u) * 354); top: calc(var(--u) * 50); width: calc(var(--u) * 318); }
  .hero-cartolina-tre { left: calc(var(--u) * 646); top: calc(var(--u) * 6); width: calc(var(--u) * 262); }
}
@media (min-width: 901px) and (max-width: 1100px) { .hero-scena { height: 54vw; } }
@media (max-width: 900px) {
  :root { --spazio: calc(var(--u) * 74); }
  .pagina-interna { --spazio: calc(var(--u) * 78); }
  .casa { padding-top: calc(var(--u) * 62); }
  .hero-album { height: calc(var(--u) * 244); margin-top: calc(var(--u) * 26); }
  .hero-cartolina { border-width: 4px; border-radius: calc(var(--u) * 20); }
  .hero-cartolina-uno { left: 0; top: 0; width: 64%; }
  .hero-cartolina-due { right: 0; top: calc(var(--u) * 104); width: 54%; }
  .hero-cartolina-tre { display: none; }
  .hero-scheda { margin-top: calc(var(--u) * -18); }
}
/* l'email di /contatti a 320 px: un filo più piccola, così sta intera nella sua riga (senza <wbr>, il testo resta quello riletto) */
@media (max-width: 340px) { .lista-foglie a[href^="mailto:"] { font-size: 14px; letter-spacing: -.005em; } }


/* ═════════════ PIÙ CHIAREZZA, PIÙ SPAZIO (07/11/2026, Domenico: «serve ancora più spazio… più chiarezza, meno
   confusione… tutte le scritte unite») ═════════════
   1 · la parola chiara dietro al titolo non si sovrappone più: è una piccola etichetta verde sopra il titolo, staccata;
   2 · più aria fra le sezioni, fra il titolo e quello che segue, fra le righe dei testi e fra le voci degli elenchi. */
:root { --spazio: calc(var(--u) * 112); }
.pagina-interna { --spazio: calc(var(--u) * 120); }
.casa { padding-top: calc(var(--u) * 104); }

.filigrana, .casa .filigrana, .testa-sinistra .filigrana, .testa-sola .filigrana, .foto-testo .filigrana,
.servizi .filigrana, .accoglienza .filigrana {
  position: relative; display: block; top: auto; left: auto; width: auto; max-width: 100%;
  margin: 0 0 calc(var(--u) * 16); padding: 0;
  color: var(--muschio); font-family: var(--testi); font-weight: 800; font-size: max(13px, calc(var(--u) * 16)); line-height: 1.3;
  letter-spacing: .22em; white-space: normal; text-transform: uppercase; }
.testa, .casa .testa { padding-top: 0; }

.testa + * { margin-top: calc(var(--u) * 48); }
.testa-testo { margin-top: calc(var(--u) * 20); }
.testa-testo-due { margin-top: calc(var(--u) * 12); }

.testa-testo, .testo-sezione, .apertura-testo, .testo-carta, .testo-scheda, .contatti-testo, .mese-testo, .domande details p,
.cure p, .notte-note, .hero-sotto, .schede-griglia p { line-height: 1.55; }
.lista-icone li, .lista-foglie li, .passo p { line-height: 1.45; }
.lista-icone, .lista-foglie { gap: calc(var(--u) * 18); }
.domande-colonna { gap: calc(var(--u) * 18); }
.domande details + details { padding-top: calc(var(--u) * 16); }

@media (max-width: 900px) {
  :root { --spazio: calc(var(--u) * 88); }
  .pagina-interna { --spazio: calc(var(--u) * 92); }
  .casa { padding-top: calc(var(--u) * 84); }
  .filigrana, .casa .filigrana, .testa-sinistra .filigrana, .testa-sola .filigrana, .foto-testo .filigrana {
    margin-bottom: 10px; font-size: 13px; letter-spacing: .2em; max-width: none; }
  .testa + * { margin-top: 28px; }
  .testa-scopri { margin-top: 2px; }
  /* la rondine di Benvenuti, più grande, sale accanto all'etichetta: non tocca il titolo */
  .casa .testa-rondine { top: calc(var(--u) * -46); }
  .testa-testo { margin-top: 14px; }
  .testa-testo-due { margin-top: 10px; }
  .lista-icone, .lista-foglie { gap: 14px; }
  .domande-colonna { gap: 14px; }
  .domande details + details { padding-top: 14px; }
  .hero-azioni { gap: 16px 20px; }
  .striscia-posto { margin-top: calc(var(--u) * 76); }
}


/* 3 Step · il salone nuovo con la porta: nel riquadro piccolo si vede la porta aperta sulla sala da pranzo */
.foto-salone-porta { object-position: 82% 50%; }

/* ═════════════ 3 STEP · le foto nuove di Antonio nella home (07/11/2026, Domenico: «le foto nuove meglio metterle in home page») ═════════════ */
/* Vita insieme: il salone nuovo con la porta, intero (la regola D9 era per la foto di prima) */
.vita-foto img.foto-vita-salone { object-position: 50% 58%; }
@media (min-width: 901px) { .vita-foto img.foto-vita-salone { width: 100%; margin-left: 0; object-position: 50% 52%; } }
/* Camere: la camera marrone appoggiata sulla verde, col bordo bianco, come le altre coppie di foto del sito */
.camere-coppia { position: relative; overflow: visible; border-radius: 0; }
.camere-foto-prima { width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--u) * 96); }
.camere-coppia .camere-seconda { position: absolute; z-index: 1; left: calc(var(--u) * -24); bottom: calc(var(--u) * -54); width: 42%; height: auto; aspect-ratio: 900 / 510;
  object-fit: cover; border: calc(var(--u) * 7) solid var(--bianco); border-radius: calc(var(--u) * 40); box-shadow: var(--ombra); }
@media (min-width: 901px) { .camere-coppia { margin-bottom: calc(var(--u) * 54); } }
@media (max-width: 900px) {
  .camere-foto-prima { border-radius: calc(var(--u) * 58); }
  .camere-coppia { margin-bottom: calc(var(--u) * 40); }
  .camere-coppia .camere-seconda { left: auto; right: calc(var(--u) * 10); bottom: calc(var(--u) * -40); width: 48%; border-width: 4px; border-radius: calc(var(--u) * 24); }
}
/* da telefono la hero mostra anche la terza cartolina, il salone nuovo (secondo studio del 3 Step): tre foto sfalsate, nessun viso coperto */
@media (max-width: 900px) {
  .hero-album { height: calc(var(--u) * 316); }
  .hero-cartolina-uno { width: 62%; }
  .hero-cartolina-due { top: calc(var(--u) * 96); }
  .hero-cartolina-tre { display: block; left: 4%; right: auto; top: calc(var(--u) * 188); width: 46%; rotate: -1.2deg; }
}
/* da tablet (560-900 px) le tre cartoline in fila, senza sovrapporsi: nessuna copre le persone della festa di Natale */
@media (min-width: 560px) and (max-width: 900px) {
  .hero-album { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .hero-cartolina, .hero-cartolina-uno, .hero-cartolina-due, .hero-cartolina-tre { position: relative; left: auto; right: auto; top: auto; width: 100%; }
  .hero-cartolina-due { margin-top: 18px; }
}