/* La Senyera · casa vacanza ad Alghero — step 5, dal design v7 del kit (Design/kit/design-la-senyera/).
   Colori misurati con confronta-design.py --colori e campionati sul design; caratteri serviti dal sito. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colori del design (in #hex: li controlla confronta-design.py --css) */
  --navy: #0B2B5E;          /* titoli, testi forti, icone */
  --navy-btn: #023258;      /* pulsante «Prenota» dell'intestazione */
  --navy-scuro: #002C4E;    /* fascia finale */
  --corallo: #E6503B;       /* pulsanti principali, simbolo */
  --avorio: #FCF9F3;        /* fondo della pagina */
  --bianco-caldo: #FEFDFA;  /* la scheda della prenotazione */
  --testo: #1F355E;         /* testi correnti */
  --grigio-testo: #5A6274;  /* didascalie in corsivo */
  --linea: #BFCBD3;         /* filetti e separatori */
  --cielo: #E8F1F6;         /* velatura della hero, giorni del periodo scelto */
  --linea-blu: #85A8C3;     /* filetto sopra «Alghero, a piedi» */

  /* stati (non sono colori del design statico) */
  --corallo-hover: #D2432F;
  /* i pulsanti corallo col testo bianco: 4,58:1, e l'hover 5,49:1 (collaudo dello step 7, 16/10/2026: #E6503B dava 3,77:1) */
  --corallo-pulsante: #D2432F;
  --corallo-pulsante-hover: #BE3A28;
  --navy-hover: #143C78;
  --ombra-scheda: 0 18px 50px -24px rgba(11, 43, 94, .28), 0 2px 6px rgba(11, 43, 94, .06);

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --gutter: clamp(16px, 5vw, 72px);
  --max: 1300px;
  --header-h: 96px;
}

/* ───────────── base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.menu-aperto, html.dialogo-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--avorio);
  color: var(--testo);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--navy); }
p { margin: 0; }

a, button, select, label { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--corallo); outline-offset: 3px; border-radius: 4px; }

.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.salta:focus { top: 12px; }
.solo-lettori {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap--largo { width: min(100% - 2 * var(--gutter), 1340px); margin-inline: auto; }

/* sopratitolo a lettere spaziate (Jost, come nel logo) */
.occhiello {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 11px;
}
.occhiello::before {
  content: ""; flex: none; width: 21px; height: 14px; margin-top: -2px;
  background: url("../img/simbolo-senyera-piccolo.webp") center / contain no-repeat;
}
.titolo {
  font-size: clamp(2.35rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.022em;
}
.testo { font-size: clamp(1.125rem, 1.45vw, 1.3rem); line-height: 1.5; color: var(--testo); }
.didascalia {
  font-style: italic;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: var(--grigio-testo);
  margin-top: 10px;
  letter-spacing: .01em;
}
figcaption.didascalia::before {
  content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px;
  vertical-align: .32em; background: var(--linea-blu);
}

/* icone del kit (03-icone): usate come maschera, così prendono il colore del testo */
.icona {
  display: inline-block; flex: none;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}
.icona--freccia { --src: url("../img/icone/freccia-destra.png"); width: 1.35em; }
.icona--giu { --src: url("../img/icone/freccia-giu.png"); }
.icona--cal { --src: url("../img/icone/calendario.png"); }
.icona--chevron { --src: url("../img/icone/chevron-giu.png"); }

/* pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--serif); font-size: 1.25rem; line-height: 1;
  padding: .95em 1.6em;
  border-radius: 999px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, transform .14s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--corallo { background: var(--corallo-pulsante); color: #fff; }
.btn--navy { background: var(--navy-btn); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn--corallo:hover { background: var(--corallo-pulsante-hover); }
  .btn--navy:hover { background: var(--navy-hover); }
  .btn:hover .icona--freccia { transform: translateX(3px); }
}
.btn .icona--freccia { transition: transform .2s var(--ease-out); }

/* link con la riga sotto e la freccia (Entra in casa →) */
.link-freccia {
  display: inline-flex; align-items: center; gap: 1.1em;
  font-size: clamp(1.15rem, 1.5vw, 1.375rem);
  color: var(--navy); text-decoration: none;
  padding: 6px 0 10px;
  border-bottom: 1.5px solid var(--navy);
  -webkit-user-select: none; user-select: none;
  background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.link-freccia .icona { transition: transform .2s var(--ease-out); }
.link-freccia:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .link-freccia:hover .icona--freccia { transform: translateX(4px); }
}

/* ───────────── intestazione ───────────── */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.testata.piena { background: rgba(252, 249, 243, .97); box-shadow: 0 1px 0 rgba(11, 43, 94, .06); }
.testata.ombra { box-shadow: 0 1px 0 rgba(11, 43, 94, .06), 0 12px 30px -20px rgba(11, 43, 94, .4); }
.testata--fissa { position: sticky; top: 0; background: var(--avorio); box-shadow: 0 1px 0 rgba(11, 43, 94, .08); }
.testata__in {
  height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.marchio { justify-self: start; display: block; line-height: 0; position: relative; }
.marchio__testo { clip-path: inset(0 0 0 24%); }
/* la bandiera del logo (a sinistra del taglio): § 29 */
.marchio img { height: 66px; width: auto; }
.menu { display: flex; gap: clamp(20px, 2.6vw, 44px); }
.menu a { font-size: 1.1875rem; color: var(--navy); text-decoration: none; padding: 8px 0; }

.testata__azioni { justify-self: end; display: flex; align-items: center; gap: 12px; }
.testata .btn { font-size: 1.25rem; padding: .78em 1.45em; }
.hamburger {
  display: none;
  width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; border-radius: 12px;
  position: relative; color: var(--navy);
  -webkit-user-select: none; user-select: none;
}
.hamburger span {
  position: absolute; left: 12px; right: 12px; height: 1.75px; background: currentColor; border-radius: 2px;
  transition: transform .22s var(--ease-out), opacity .15s ease;
}
.hamburger span:nth-child(1) { top: 18px; }
.hamburger span:nth-child(2) { top: 28px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
.hamburger:active { transform: scale(.94); }

/* menu da telefono, a tutto schermo */
.menu-tel {
  position: fixed; inset: 0; z-index: 45;
  min-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--avorio);
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s var(--ease-out), visibility 0s linear .18s;
}
.menu-tel.aperto {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .26s ease, transform .3s var(--ease-out), visibility 0s;
}
.menu-tel a:not(.btn) {
  font-size: 2rem; color: var(--navy); text-decoration: none; padding: 10px 0;
  border-bottom: 1px solid rgba(11, 43, 94, .1);
}
.menu-tel a:not(.btn):active { color: var(--corallo); }
.menu-tel .btn { margin-top: 28px; align-self: stretch; }
.menu-tel > a { opacity: 0; transform: translateY(14px); transition: opacity .16s ease, transform .16s var(--ease-out), background-color .2s ease; }
.menu-tel.aperto > a {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .45s var(--ease-out), background-color .2s ease;
  transition-delay: calc(60ms + var(--i, 0) * 50ms);
}
.menu-tel.aperto > a:active { transform: scale(.97); transition-delay: 0s; transition-duration: .14s; }
.menu-tel__marchio { margin-top: auto; padding-top: 32px; }

/* ───────────── hero ───────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(600px, max(100svh, 64vw), 1080px);
  color: var(--navy);
  display: flex; flex-direction: column;
}
.hero__foto { position: absolute; inset: 0; z-index: -2; animation: foto-hero 2s var(--ease-out) backwards; }
.hero__foto img { will-change: transform; }
@keyframes foto-hero { from { transform: scale(1.07); } }
@keyframes entra { from { opacity: 0; transform: translateY(30px); } }
@keyframes appare { from { opacity: 0; } }
.hero h1 .riga { display: block; }
.hero .occhiello { animation: entra .8s var(--ease-out) .1s backwards; }
.hero h1 .riga { animation: entra .9s var(--ease-out) backwards; }
.hero h1 .riga:nth-child(1) { animation-delay: .18s; }
.hero h1 .riga:nth-child(2) { animation-delay: .25s; }
.hero h1 .riga:nth-child(3) { animation-delay: .32s; }
.hero__sotto { animation: entra .85s var(--ease-out) .44s backwards; }
.hero__azioni > :nth-child(1) { animation: entra .85s var(--ease-out) .52s backwards; }
.hero__azioni > :nth-child(2) { animation: entra .85s var(--ease-out) .6s backwards; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 18% 42%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(232, 241, 246, .55) 0%, rgba(232, 241, 246, 0) 15%),
    radial-gradient(ellipse 40% 58% at 17% 52%, rgba(232, 241, 246, .86) 0%, rgba(232, 241, 246, .72) 50%, rgba(232, 241, 246, .22) 80%, rgba(232, 241, 246, 0) 100%);
}
.hero__in {
  flex: 1;
  padding-top: calc(var(--header-h) + clamp(48px, 9vw, 120px));
  padding-bottom: clamp(220px, 21vw, 300px);
}
.hero__testo { max-width: 600px; }
.hero h1 {
  font-size: clamp(3.1rem, 6.7vw, 6.1rem);
  line-height: .98;
  letter-spacing: -.028em;
  margin-bottom: 16px;
}
.hero__sotto { font-size: clamp(1.125rem, 1.55vw, 1.4rem); color: var(--navy); text-shadow: 0 0 16px rgba(232, 241, 246, .95), 0 0 5px rgba(232, 241, 246, .85); }
.hero__azioni { margin-top: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero__azioni .btn { font-size: clamp(1.15rem, 1.6vw, 1.45rem); padding: .92em 1.55em; }
.hero__scopri {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: clamp(1.1rem, 1.45vw, 1.3rem); color: var(--navy); text-decoration: none;
  padding: 4px 2px 6px; border-bottom: 1px solid currentColor;
}
.hero__scopri .icona { transition: transform .2s var(--ease-out); }
.hero__scopri .icona { animation: invito 1.4s var(--ease-in-out) 1.8s infinite alternate; }
@keyframes invito { to { transform: translateY(5px); } }
.hero__coord {
  position: absolute; left: var(--gutter); bottom: clamp(170px, 17vw, 270px);
  font-family: var(--sans); font-size: .9375rem; font-weight: 500; letter-spacing: .14em;
  color: #fff; text-shadow: 0 1px 8px rgba(0, 30, 60, .35);
  animation: appare 1s ease .9s backwards;
}
.hero__coord::after { content: ""; display: block; width: 40px; height: 3px; background: currentColor; margin-top: 12px; border-radius: 2px; }
@media (min-width: 861px) {
  .hero__coord {
    left: auto; right: var(--gutter); bottom: auto; top: 44%;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: .75rem; letter-spacing: .26em; color: #fff; text-shadow: 0 1px 10px rgba(0, 30, 60, .5);
  }
  .hero__coord::after { width: 2px; height: 34px; margin: 0 0 12px; }
}
.hero__onda {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0;
  width: 100%; height: auto; pointer-events: none;
}

/* ───────────── prenotazione (subito dopo la hero) ───────────── */
.prenota { position: relative; z-index: 2; padding: 0 0 clamp(36px, 3.6vw, 52px); margin-top: clamp(-70px, -4vw, -30px); }
.prenota .titolo { margin-bottom: clamp(22px, 2.4vw, 34px); }
.scheda {
  position: relative;
  background: var(--bianco-caldo);
  border-radius: 20px;
  box-shadow: var(--ombra-scheda);
  padding: 14px;
}
.scheda__campi {
  display: grid;
  grid-template-columns: 1fr 1fr .82fr minmax(260px, auto);
  align-items: stretch;
}
.campo {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center;
  column-gap: 16px;
  text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 16px 30px 16px 32px; border-radius: 14px;
  color: var(--navy);
  transition: background-color .2s ease;
}
.campo + .campo::before, .scheda__ospiti::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--linea);
}
.campo:active { background: var(--cielo); }
@media (hover: hover) and (pointer: fine) {
  .campo:hover { background: rgba(232, 241, 246, .6); }
}
.campo[aria-expanded="true"] { background: var(--cielo); }
.campo__etichetta, .scheda__ospiti label {
  grid-column: 1; font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 6px;
}
.campo__valore { grid-column: 1; font-size: 1.375rem; line-height: 1.2; white-space: nowrap; }
.campo__valore.vuoto { color: var(--navy); }
.campo__valore.nuovo { animation: valore .32s var(--ease-out); }
@keyframes valore { from { opacity: 0; transform: translateY(8px); } }
.campo .icona { grid-column: 2; grid-row: 1 / span 2; font-size: 30px; }
.scheda__ospiti {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 16px 28px 16px 32px;
}
.scheda__ospiti label { margin-bottom: 4px; }
.seleziona { position: relative; display: flex; align-items: center; }
.seleziona select {
  appearance: none; -webkit-appearance: none;
  width: 100%; border: 0; background: transparent; cursor: pointer;
  font-size: 1.375rem; line-height: 1.2; color: var(--navy);
  padding: 2px 34px 2px 0; border-radius: 6px;
}
.seleziona .icona { position: absolute; right: 2px; pointer-events: none; font-size: 22px; }
.scheda__invia {
  margin-left: 14px;
  border-radius: 14px;
  font-size: 1.375rem; padding: 0 1.4em; min-height: 76px;
}
.prenota__sotto {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
  margin-top: 16px;
}
.prenota__sotto .didascalia { margin-top: 0; }
.prenota__privacy { font-size: .9375rem; color: var(--grigio-testo); }
.prenota__privacy a { color: var(--navy); }
.prenota__cin { font-family: var(--sans); font-size: .8125rem; letter-spacing: .06em; color: var(--grigio-testo); }
.prenota__cin:empty { display: none; }
.prenota__messaggio { margin-top: 12px; font-size: 1.0625rem; min-height: 0; }
.prenota__messaggio:empty { display: none; }
.prenota__messaggio.nuovo { animation: entra .4s var(--ease-out); }
.prenota__messaggio.errore { color: #B3301E; }
.prenota__messaggio.ok { color: var(--navy); }

/* il calendario */
.cal {
  position: absolute; z-index: 30; top: calc(100% + 12px); left: 0;
  width: min(760px, 100%);
  background: var(--bianco-caldo); border-radius: 20px;
  box-shadow: 0 30px 70px -28px rgba(11, 43, 94, .4), 0 2px 8px rgba(11, 43, 94, .08);
  padding: 22px 26px 18px;
  transform-origin: var(--origine, 20%) top;
  opacity: 0; transform: translateY(-6px) scale(.97); visibility: hidden;
  transition: opacity .15s ease, transform .15s var(--ease-out), visibility 0s linear .15s;
}
.cal.aperto {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .2s ease, transform .22s var(--ease-out), visibility 0s;
}
.cal__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cal__stato { font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.cal__stato.errore { font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #B3301E; }
.cal__frecce { display: flex; gap: 6px; }
.cal__freccia {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--navy);
  -webkit-user-select: none; user-select: none;
  transition: background-color .2s ease, transform .14s var(--ease-out);
}
.cal__freccia .icona { font-size: 18px; }
.cal__freccia--prima .icona { transform: rotate(90deg); }
.cal__freccia--dopo .icona { transform: rotate(-90deg); }
.cal__freccia:active { transform: scale(.94); }
.cal__freccia:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .cal__freccia:not(:disabled):hover { background: var(--cielo); }
}
.cal__mesi { display: grid; grid-template-columns: repeat(var(--mesi, 2), 1fr); gap: 34px; }
.cal__mesi.avanti { animation: mese-avanti .24s var(--ease-out); }
.cal__mesi.indietro { animation: mese-indietro .24s var(--ease-out); }
@keyframes mese-avanti { from { opacity: 0; transform: translateX(18px); } }
@keyframes mese-indietro { from { opacity: 0; transform: translateX(-18px); } }
.cal__mese caption {
  font-size: 1.375rem; color: var(--navy); text-align: left; padding: 4px 0 10px;
}
.cal table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.cal th {
  font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: .12em; color: var(--grigio-testo);
  padding: 6px 0; text-align: center;
}
.cal td { padding: 2px 0; text-align: center; }
.giorno {
  position: relative; width: 100%; max-width: 46px; aspect-ratio: 1; margin: 0 auto;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  font-size: 1.0625rem; color: var(--navy);
  -webkit-user-select: none; user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.giorno:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .giorno:not([aria-disabled="true"]):hover { background: var(--cielo); }
}
td.nel-periodo { background: var(--cielo); }
td.inizio-periodo { background: linear-gradient(90deg, transparent 50%, var(--cielo) 50%); }
td.fine-periodo { background: linear-gradient(90deg, var(--cielo) 50%, transparent 50%); }
td.inizio-periodo.fine-periodo { background: transparent; }
.giorno.scelto { background: var(--navy) !important; color: #fff; }
.giorno.oggi::after {
  content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--corallo);
}
.giorno[aria-disabled="true"] { color: rgba(11, 43, 94, .28); cursor: default; }
.giorno.occupato { color: rgba(11, 43, 94, .38); text-decoration: line-through; text-decoration-color: var(--corallo); }
.cal__piede {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  border-top: 1px solid rgba(11, 43, 94, .1); margin-top: 12px; padding-top: 14px;
}
.cal__legenda { display: flex; gap: 18px; font-size: .9375rem; color: var(--grigio-testo); }
.cal__legenda span { display: inline-flex; align-items: center; gap: 8px; }
.cal__legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--navy); }
.cal__legenda .occ i { border-color: var(--corallo); background: linear-gradient(135deg, transparent 45%, var(--corallo) 45%, var(--corallo) 58%, transparent 58%); }
.cal__notti { font-size: 1.0625rem; color: var(--navy); }
.cal__comandi { display: flex; gap: 10px; }
.cal__comando {
  border: 0; background: transparent; cursor: pointer; font-size: 1.0625rem; color: var(--navy);
  padding: 10px 14px; border-radius: 999px; text-decoration: underline; text-underline-offset: 4px;
  -webkit-user-select: none; user-select: none;
}
.cal__comando--pieno { background: var(--navy); color: #fff; text-decoration: none; padding: 10px 20px; }
.cal__comando:active { transform: scale(.97); }
.cal__velo { display: none; }

/* cornici delle foto: aprono la galleria */
.cornice {
  --tx: 16px; --ty: 16px;
  display: block; width: 100%; padding: 0; border: 0; background: var(--cielo); cursor: zoom-in;
  overflow: hidden; border-radius: 0; line-height: 0;
  box-shadow: var(--tx) var(--ty) 0 -1px var(--avorio), var(--tx) var(--ty) 0 0 var(--linea-blu);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform .14s var(--ease-out);
}
.cornice:active { transform: scale(.97); }
.cornice img { transition: transform .28s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cornice:hover img { transform: scale(1.04); }
}

/* entrate allo scroll: .reveal → .in (main.js), una volta sola; senza JS tutto visibile */
@keyframes assesta { from { transform: scale(1.12); } }

/* ───────────── la casa ───────────── */
.casa { padding: clamp(16px, 1.6vw, 24px) 0 clamp(36px, 3.4vw, 52px); }
.casa__griglia {
  display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: clamp(32px, 4.4vw, 64px); align-items: center;
}
.casa__testo .titolo { margin-bottom: 22px; }
.casa__testo .testo { max-width: 380px; margin-bottom: clamp(28px, 3vw, 40px); }
.casa__foto figure { margin: 0; }
.casa__foto img { width: 100%; aspect-ratio: 1.94; object-fit: cover; }
.casa__foto figcaption { text-align: right; margin-top: 26px; }
.numeri {
  list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.numeri li { text-align: center; position: relative; padding: 6px 12px; }
.numeri li + li::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1.5px; background: var(--navy); opacity: .55; }
.numeri strong { display: block; font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.3rem); line-height: 1.1; color: var(--navy); letter-spacing: -.02em; }
.numeri .conta { display: inline-block; text-align: right; }
.numeri sup { font-size: .5em; vertical-align: .62em; line-height: 0; }
.numeri li > span { display: block; margin-top: 10px; font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--navy); }

/* ───────────── gli spazi ───────────── */
.spazi { padding: clamp(24px, 3vw, 44px) 0 clamp(48px, 5vw, 72px); }
.spazi__griglia {
  display: grid; grid-template-columns: 1.06fr .66fr .5fr; gap: clamp(28px, 3.4vw, 52px); align-items: center;
}
.spazi figure { margin: 0; }
.spazi__camera img { width: 100%; aspect-ratio: 1.19; object-fit: cover; }
.spazi__camera .cornice { --tx: -16px; }
.spazi__camera figcaption { margin-top: 26px; }
.spazi__balcone .cornice { --ty: -16px; }
.spazi__balcone { align-self: center; }
.spazi__balcone img { width: 100%; aspect-ratio: .63; object-fit: cover; }
.spazi__testo .titolo { font-size: clamp(2.2rem, 3.7vw, 3.35rem); margin-bottom: 20px; }
.spazi__testo .testo { margin-bottom: clamp(28px, 3vw, 40px); }

.nota-foto { margin-top: clamp(22px, 2.4vw, 34px); font-size: .875rem; line-height: 1.45; color: var(--grigio-testo); max-width: 640px; }
.nota-foto--galleria { margin: 4px 26px 0; }

/* ───────────── Alghero ───────────── */
.alghero { padding: 0 0 clamp(36px, 4vw, 56px); }
.alghero__in { border-top: 1px solid var(--linea-blu); padding-top: clamp(40px, 4vw, 60px); display: grid; grid-template-columns: 1fr minmax(300px, 470px); gap: 40px; align-items: center; }
.alghero .titolo { margin-bottom: 14px; }
.alghero .testo { margin-bottom: clamp(26px, 2.6vw, 36px); }
.alghero__disegno { position: relative; margin: 0; padding-bottom: 26px; }
.alghero__disegno img { width: 100%; height: auto; }
.alghero__disegno figcaption {
  position: absolute; left: 14%; bottom: 0;
  font-style: italic; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.3; color: var(--navy);
  display: flex; align-items: flex-end; gap: 16px;
}
.alghero__disegno figcaption::after { content: ""; width: 44px; height: 1.5px; background: var(--corallo); margin-bottom: .45em; }

/* ───────────── fascia finale ───────────── */
.fascia {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-scuro);
  color: #fff;
  padding: calc(clamp(40px, 6.4vw, 96px) + clamp(18px, 2vw, 28px)) 0 clamp(44px, 4.2vw, 60px);
}
.fascia__in { position: relative; z-index: 1; }
.fascia__onda {
  position: absolute; left: 0; top: -1px; z-index: 0; pointer-events: none;
  width: 100%; height: clamp(40px, 6.4vw, 96px);
  transform: scaleY(-1);
}
.fascia::before {
  content: ""; position: absolute; inset: -6% -5%; z-index: -1; pointer-events: none;
  background: url("../img/grafica/sfondo-blu.webp") right bottom / cover no-repeat;
  animation: onde 24s var(--ease-in-out) infinite alternate;
}
@keyframes onde { from { transform: translate3d(-2.2%, 1%, 0); } to { transform: translate3d(2.2%, -1.5%, 0); } }
.fascia__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.fascia h2 { color: #fff; font-size: clamp(2.2rem, 4.1vw, 3.75rem); line-height: 1.04; letter-spacing: -.02em; }
.fascia .btn { font-size: clamp(1.2rem, 1.6vw, 1.45rem); padding: 1em 1.8em; flex: none; }

/* ───────────── footer ───────────── */
.piede { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 4vw, 56px) 0 28px; }
.piede__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.piede .marchio img { height: 66px; }
.piede__link { display: flex; align-items: center; gap: clamp(24px, 3.4vw, 56px); font-size: 1.1875rem; color: var(--navy); }
.piede__link a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .piede__link a:hover, .piede__legale a:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.lingue { display: inline-flex; gap: .5em; }
.lingue [aria-current] { font-weight: 500; }
.lingue .presto { color: var(--grigio-testo); }
.piede__contatti { margin-top: 22px; font-size: 1rem; color: var(--testo); }
.piede__contatti a { color: var(--navy); }
.piede__legale {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(11, 43, 94, .12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px;
  font-size: .875rem; color: var(--grigio-testo);
}
.piede__legale nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.piede__legale a { color: var(--navy); text-decoration: none; }
.credit { width: 100%; }
.credit a { text-decoration: underline !important; text-underline-offset: 3px; }

/* barra fissa da telefono */
.barra-tel { display: none; }

/* ───────────── galleria degli spazi ───────────── */
.galleria {
  width: min(1240px, 100vw - 32px); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 20px; background: var(--avorio); color: var(--navy);
  box-shadow: 0 40px 90px -30px rgba(0, 20, 50, .55);
  overflow: hidden;
}
.galleria::backdrop { background: rgba(0, 28, 56, .62); }
.galleria[open] { animation: galleria-dentro .26s var(--ease-out); }
@keyframes galleria-dentro { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.galleria.chiude { animation: galleria-fuori .18s var(--ease-out) forwards; }
@keyframes galleria-fuori { to { opacity: 0; transform: translateY(10px) scale(.98); } }
.galleria::backdrop { transition: opacity .2s ease; }
.galleria.chiude::backdrop { opacity: 0; }
.galleria__testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px 12px 26px; }
.galleria__testa h2 { font-size: 1.75rem; }
.galleria__conta { font-family: var(--sans); font-size: .8125rem; letter-spacing: .2em; color: var(--grigio-testo); margin-left: auto; }
.galleria__chiudi {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; cursor: pointer;
  position: relative; color: var(--navy); -webkit-user-select: none; user-select: none;
}
.galleria__chiudi::before, .galleria__chiudi::after {
  content: ""; position: absolute; left: 13px; right: 13px; top: 50%; height: 1.5px; background: currentColor;
}
.galleria__chiudi::before { transform: rotate(45deg); }
.galleria__chiudi::after { transform: rotate(-45deg); }
.galleria__chiudi:active { transform: scale(.94); }
.galleria__binario {
  list-style: none; margin: 0; padding: 0 26px 10px;
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.galleria__binario::-webkit-scrollbar { display: none; }
.galleria__binario li { flex: none; scroll-snap-align: center; }
.galleria__binario img { height: min(68dvh, 640px); width: auto; border-radius: 4px; background: var(--cielo); }
.galleria__piede { display: flex; justify-content: center; gap: 10px; padding: 8px 0 18px; }

/* ───────────── pagine legali e 404 ───────────── */
.pagina { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 6vw, 96px); }
.legale { max-width: 760px; }
.legale h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 10px; }
.legale h1 + p { font-family: var(--sans); font-size: .875rem; letter-spacing: .08em; color: var(--grigio-testo); margin-bottom: 26px; }
.legale h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); margin: 34px 0 10px; }
.legale p, .legale li { font-size: 1.125rem; line-height: 1.6; }
.legale p + p { margin-top: 12px; }
.legale ul, .legale ol { padding-left: 1.3em; margin: 10px 0; }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--navy); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legale table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 1rem; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.legale th { font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.non-trovata { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; }
.non-trovata img { width: 88px; height: auto; }
.non-trovata__azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.btn--linea { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }

/* ───────────── tablet ───────────── */
@media (max-width: 1100px) {
  .menu { gap: 22px; }
  .menu a { font-size: 1.0625rem; }
  .marchio img { height: 52px; }
  .scheda__campi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .scheda__ospiti { padding: 14px 24px; }
  .scheda__ospiti::before { display: none; }
  .scheda__ospiti { border-top: 1px solid var(--linea); }
  .scheda__invia { margin: 8px 0 0 8px; min-height: 64px; }
  .spazi__testo { grid-column: 1 / -1; order: -1; max-width: 640px; }
  .spazi__griglia { grid-template-columns: 1.45fr 1fr; align-items: start; }
  .spazi__camera img, .spazi__balcone img { aspect-ratio: auto; height: clamp(260px, 42vw, 460px); }
}

/* ───────────── telefono ───────────── */
@media (max-width: 860px) {
  :root { --header-h: 72px; }
  .menu, .testata .btn { display: none; }
  .hamburger { display: block; }
  .testata__in { grid-template-columns: 1fr auto; }
  .marchio img { height: 44px; }
  .testata.menu-su { background: var(--avorio); box-shadow: none; }

  .hero { min-height: max(100svh, 640px); }
  .hero__foto { inset: 0 0 auto 0; height: 125%; }
  .hero__foto img { object-position: 56% 0; }
  .hero::before {
    background: linear-gradient(180deg, rgba(252, 249, 243, .94) 0%, rgba(252, 249, 243, .86) 24%, rgba(252, 249, 243, .5) 38%, rgba(252, 249, 243, 0) 50%);
  }
  .hero__in { padding-top: calc(var(--header-h) + 22px); padding-bottom: 200px; }
  .hero h1 { font-size: clamp(2.8rem, 12.6vw, 4rem); }
  .hero__azioni { gap: 12px; margin-top: 22px; }
  .hero__azioni .btn { box-shadow: 0 12px 26px -14px rgba(0, 30, 60, .55); }
  .hero__scopri {
    background: rgba(252, 249, 243, .92); border-bottom: 0; border-radius: 999px;
    padding: 9px 16px 10px; font-size: 1.0625rem; gap: 10px;
    box-shadow: 0 8px 20px -14px rgba(0, 30, 60, .5);
  }
  .hero__coord { bottom: 132px; font-size: .8125rem; }

  .prenota { margin-top: -24px; }
  .scheda { padding: 8px; border-radius: 18px; }
  .campo { padding: 14px 16px; column-gap: 8px; }
  .campo__valore, .seleziona select { font-size: 1.1875rem; }
  .campo__etichetta, .scheda__ospiti label { font-size: .75rem; letter-spacing: .18em; }
  .scheda__ospiti { padding: 14px 16px; }
  .scheda__invia { font-size: 1.25rem; min-height: 60px; margin: 6px 0 0; }
  .scheda__ospiti, .scheda__invia { grid-column: 1 / -1; }
  .campo { grid-template-columns: minmax(0, 1fr) auto; }
  .campo__etichetta { grid-row: 1; }
  .campo__valore { grid-column: 1 / -1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; }
  .campo .icona { grid-column: 2; grid-row: 1; align-self: start; font-size: 20px; }
  .prenota__sotto { flex-direction: column; gap: 6px; }

  .cal {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 22px 22px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transform-origin: bottom center;
    z-index: 70;
    transition: opacity .2s ease, transform .2s var(--ease-out), visibility 0s linear .2s;
  }
  .cal.aperto { transform: none; transition: opacity .2s ease, transform .36s var(--ease-out), visibility 0s; }
  .cal__velo {
    display: block; position: fixed; inset: 0; z-index: 69; background: rgba(0, 28, 56, .45);
    opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s;
  }
  .cal__velo.aperto { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
  .cal__mesi { gap: 18px; }
  .giorno { max-width: 48px; }

  .casa__griglia { grid-template-columns: 1fr; gap: 28px; }
  .casa__foto img { aspect-ratio: 1.5; }
  .numeri { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .numeri li:nth-child(3)::before { display: none; }

  .spazi__griglia { grid-template-columns: 1.45fr 1fr; gap: 14px 12px; align-items: start; }
  .spazi__camera img, .spazi__balcone img { aspect-ratio: auto; height: 260px; }
  .cornice { --tx: 10px; --ty: 10px; }
  .spazi__camera .cornice { --tx: -10px; }
  .spazi__balcone .cornice { --ty: -10px; }
  .casa__foto figcaption, .spazi__camera figcaption { margin-top: 18px; }
  .spazi figcaption.didascalia::before { display: none; }
  .spazi__balcone figcaption { white-space: nowrap; }
  .spazi .didascalia { font-size: .9375rem; }

  .alghero__in { grid-template-columns: 1fr; gap: 18px; }
  .alghero__disegno { max-width: 460px; margin-inline: auto; padding-bottom: 46px; }
  .alghero__disegno figcaption { left: 6%; bottom: 0; }

  .fascia__in { flex-direction: column; align-items: stretch; gap: 26px; }
  .fascia .btn { align-self: stretch; }

  .piede { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .piede__in { flex-direction: column; align-items: flex-start; gap: 22px; }
  .piede .marchio img { height: 54px; }
  .piede__link { gap: 22px; flex-wrap: wrap; font-size: 1.125rem; }
  .piede__legale { flex-direction: column; }

  .barra-tel {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(252, 249, 243, .97); box-shadow: 0 -1px 0 rgba(11, 43, 94, .1);
    transform: translateY(110%); visibility: hidden;
    transition: transform .22s var(--ease-out), visibility 0s linear .22s;
  }
  .barra-tel.visibile { transform: none; visibility: visible; transition: transform .3s var(--ease-out), visibility 0s; }
  .barra-tel .btn { width: 100%; font-size: 1.1875rem; padding: .85em 1em; }

  .galleria { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .galleria__binario { padding: 0 16px 10px; gap: 10px; }
  .galleria__binario li { width: 86vw; }
  .galleria[open] { display: flex; flex-direction: column; justify-content: center; }
  .galleria__binario img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 66dvh; object-fit: cover; }
  .galleria__testa { padding: 14px 16px 10px; }
}

@media (max-width: 420px) {
  .campo__valore, .seleziona select { font-size: 1.0625rem; }
  .campo { padding: 12px 12px; }
  .scheda__ospiti { padding: 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  /* restano le dissolvenze e i cambi di colore; via gli spostamenti */
  .hero__foto { animation: none; }
  .hero .occhiello, .hero h1 .riga, .hero__sotto, .hero__azioni > * { animation-name: appare; animation-duration: .6s; }
  .hero__scopri .icona, .fascia::before { animation: none; }
  .js .reveal:not(.in) { transform: none; }
  .js .reveal.in, .js .reveal--foto.in, .js .reveal--disegno.in { animation: appare .6s ease backwards; animation-delay: calc(var(--i, 0) * 40ms); }
  .js .reveal--foto.in img { animation: none; }
  .cal, .cal.aperto, .menu-tel, .menu-tel.aperto, .menu-tel > a { transform: none; }
  .cal__mesi.avanti, .cal__mesi.indietro, .campo__valore.nuovo, .prenota__messaggio.nuovo { animation-name: appare; }
  .galleria[open] { animation: appare .2s ease; }
  .galleria.chiude { animation: galleria-svanisce .15s ease forwards; }
  .barra-tel { transition: opacity .2s ease, visibility 0s linear .2s; transform: none; opacity: 0; }
  .barra-tel.visibile { opacity: 1; transition: opacity .2s ease, visibility 0s; }
}
@keyframes galleria-svanisce { to { opacity: 0; } }

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════
   PIANO CAPOLAVORO (Design/PIANO-CAPOLAVORO.md, 16/10/2026) — stesso design, stessi testi, colori e font:
   cambia il come. Questo livello sta in fondo e vince sulle regole sopra.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --t-h1: clamp(3.25rem, 7.2vw, 6.75rem);
  --t-h2: clamp(2.5rem, 5vw, 4.5rem);
  --t-numero: clamp(2.75rem, 4.8vw, 4.5rem);
  --t-testo: clamp(1.125rem, 1.35vw, 1.3125rem);
  /* il piano chiede 88-160 px: tarati perché la pagina resti entro il 25% dell'altezza del design */
  --sezione: clamp(64px, 5.6vw, 80px);
  --sezione-corta: clamp(52px, 4.4vw, 64px);
  --fuori: calc((100vw - min(100vw - 2 * var(--gutter), var(--max))) / 2);
  /* hero da telefono. Con la foto provvisoria (orizzontale): 110% e 56% 0%. Con la verticale di ChatGPT: 100% e 50% 50% */
  --hero-alt-tel: 110%;
  --hero-pos-tel: 56% 0%;
}
main { overflow-x: clip; }
main:focus { outline: none; } /* «Vai al contenuto» porta il focus su <main> (tabindex="-1"): niente cornice sulla pagina intera */
body { line-height: 1.6; }
h1, h2 { font-optical-sizing: auto; }

/* 3 · scala tipografica e respiro */
.hero h1 { font-size: var(--t-h1); line-height: .94; letter-spacing: -.032em; }
.titolo, .spazi__testo .titolo { font-size: var(--t-h2); line-height: 1; letter-spacing: -.026em; text-wrap: balance; }
.testo { font-size: var(--t-testo); line-height: 1.6; max-width: 34ch; text-wrap: pretty; }
.occhiello { font-size: .75rem; letter-spacing: .28em; margin-bottom: clamp(16px, 1.6vw, 22px); gap: 12px; }
.occhiello::before { width: 19.5px; height: 13px; }
.didascalia { font-size: 1rem; letter-spacing: .015em; }
figcaption.didascalia::before { width: 28px; }
.prenota .titolo, .casa__testo .titolo, .spazi__testo .titolo, .alghero .titolo { margin-bottom: clamp(18px, 2vw, 28px); }
.casa__testo .testo, .spazi__testo .testo, .alghero .testo { margin-bottom: clamp(28px, 3vw, 44px); }
.prenota { padding-bottom: var(--sezione); }
.casa { padding-top: 0; padding-bottom: var(--sezione-corta); }
.spazi { padding-block: var(--sezione); }
.alghero { padding: 0 0 var(--sezione); }

/* 11 · prenotazione: la scheda in luce */
.prenota { isolation: isolate; }
.prenota::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: clamp(60px, 8vw, 120px); width: min(1400px, 140vw); height: 520px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(232, 241, 246, .85), rgba(232, 241, 246, 0));
}
.scheda {
  border: 1px solid rgba(11, 43, 94, .06); border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 28px 64px -36px rgba(11, 43, 94, .42), 0 2px 8px rgba(11, 43, 94, .05);
}
.campo:focus-visible, .seleziona select:focus-visible { outline: 2px solid var(--navy); outline-offset: -6px; border-radius: 14px; }
.prenota__privacy { font-size: .8125rem; max-width: 56ch; }

/* 12 · calendario: stati curati */
.cal__mese caption { font-style: italic; font-size: 1.375rem; }
.cal th { font-size: .6875rem; letter-spacing: .18em; }
.giorno { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .giorno:not([aria-disabled="true"]):not(.scelto):hover { background: transparent; box-shadow: inset 0 0 0 1px var(--navy); }
}
.giorno.occupato { text-decoration: none; color: rgba(11, 43, 94, .32); }
.giorno.occupato::before {
  content: ""; position: absolute; left: 26%; right: 26%; top: 50%; height: 1px; background: var(--corallo); transform: rotate(-45deg);
}
.cal__legenda .occ i { border-color: rgba(11, 43, 94, .32); background: linear-gradient(135deg, transparent 46%, var(--corallo) 46%, var(--corallo) 56%, transparent 56%); }
.cal__notti { font-style: italic; }
.cal__notti:not(:empty)::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--corallo); vertical-align: .2em;
}

/* 13 · pulsanti e link: stati coerenti, le righe si disegnano con transform */
.link-freccia { position: relative; border-bottom: 0; }
.link-freccia::before, .link-freccia::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; }
.link-freccia::before { background: var(--navy); }
.link-freccia::after { background: var(--corallo); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .28s var(--ease-out); }
.menu a { position: relative; }
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .28s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link-freccia:hover::after, .menu a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}
.btn--corallo { box-shadow: 0 12px 26px -16px rgba(210, 67, 47, .75); }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.fascia .btn:focus-visible { outline-color: var(--avorio); }

/* 15 · cornici, fili, ombre: un sistema solo */
.cornice { position: relative; isolation: isolate; }
.cornice img { position: relative; z-index: 0; }
.cornice::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(11, 43, 94, .08); border-radius: inherit; }

/* 14 · entrate: più corte e più rare; foto e disegno si svelano con un velo avorio che si ritira (solo transform) */
@keyframes entra-corto { from { opacity: 0; transform: translateY(24px); } }
.js .reveal:not(.in) { opacity: 0; transform: translateY(24px); }
.js .reveal.in { animation: entra-corto .75s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.js .reveal--foto:not(.in), .js .reveal--disegno:not(.in) { opacity: 1; transform: none; }
.js .reveal--foto.in, .js .reveal--disegno.in { animation: none; }
.js .reveal--foto::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--avorio); transform-origin: 50% 0; border-radius: inherit;
}
.js .reveal--foto.in::before { transform: scaleY(0); transition: transform 1.1s var(--ease-in-out) calc(var(--i, 0) * 90ms); }
.js .reveal--foto.in img { animation: assesta 1.5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.disegno { position: relative; display: block; }
.js .reveal--disegno::after {
  content: ""; position: absolute; inset: -2px; z-index: 1; pointer-events: none;
  background: var(--avorio); transform-origin: 100% 50%;
}
.js .reveal--disegno.in::after { transform: scaleX(0); transition: transform 1.8s var(--ease-in-out) .15s; }

/* 5 · la casa: due foto che si parlano */
.casa__foto figure { position: relative; }
.casa__foto .cornice { --tx: -16px; --ty: -16px; }      /* la foto esce a destra: la cornice sfalsata va in alto a sinistra */
.casa__dettaglio {
  position: absolute; left: -7%; bottom: -11%; width: 23%; z-index: 2; line-height: 0; pointer-events: none;
  border: 10px solid var(--avorio);
  box-shadow: 0 30px 60px -30px rgba(11, 43, 94, .45), 0 2px 6px rgba(11, 43, 94, .06);
}
.casa__dettaglio img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* 6 · i numeri: una scheda tecnica */
.numeri { margin-top: clamp(60px, 5vw, 72px); padding-block: clamp(24px, 2.4vw, 34px); border-block: 1px solid var(--linea); }
.numeri li + li::before { top: 20%; bottom: 20%; width: 1px; background: var(--linea-blu); opacity: 1; }
.numeri strong { font-size: var(--t-numero); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.numeri .unita { font-style: italic; font-size: .5em; letter-spacing: 0; margin-left: .14em; color: var(--testo); }
.numeri .unita--dritta { font-style: normal; }
.numeri .unita sup { font-size: .6em; vertical-align: .75em; }

/* 7 · gli spazi: camera a vivo, balcone ad arco */
.spazi__camera .cornice { box-shadow: none; }
.spazi__balcone .cornice { border-radius: 999px 999px 0 0; }
.spazi__balcone img { border-radius: inherit; }
.spazi__testo .testo { max-width: 30ch; }
.spazi__testo .titolo { font-size: clamp(2.3rem, 3.5vw, 3.25rem); }
.nota-foto { font-size: .8125rem; max-width: 60ch; margin-top: 30px; color: var(--grigio-testo); }

/* 8 · Alghero: l'illustrazione protagonista, il corallo sul filo */
.alghero__in { border-top: 0; position: relative; padding-top: var(--sezione-corta); }
.alghero__in::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--linea-blu) calc(50% - 22px), transparent 0 calc(50% + 22px), var(--linea-blu) 0);
}
.alghero__in::after {
  content: ""; position: absolute; top: -8px; left: calc(50% - 12px); width: 24px; height: 16px;
  background: url("../img/simbolo-senyera-piccolo.webp") center / contain no-repeat;
}
.alghero__disegno { padding-bottom: 0; }
.alghero__disegno figcaption { left: 6%; bottom: 4%; font-size: clamp(1.125rem, 1.4vw, 1.375rem); z-index: 2; }

/* 9 · fascia blu: onda sopra e sotto, filigrana dell'illustrazione */
.fascia {
  padding: calc(clamp(40px, 6.4vw, 96px) + clamp(28px, 3vw, 44px)) 0 calc(clamp(40px, 6.4vw, 96px) + clamp(16px, 1.6vw, 24px));
}
.fascia__onda--giu { top: auto; bottom: -1px; transform: none; }
.fascia h2 { font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1; }
.fascia__in::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: calc(-1 * var(--fuori) - 2%); bottom: -14%; width: min(980px, 72vw); aspect-ratio: 1600 / 718;
  background: var(--avorio); opacity: .08;
  -webkit-mask: url("../img/grafica/illustrazione-alghero-1600.webp") right bottom / contain no-repeat;
  mask: url("../img/grafica/illustrazione-alghero-1600.webp") right bottom / contain no-repeat;
}

/* 10 · footer: un congedo */
.piede { padding: clamp(48px, 4.6vw, 66px) 0 28px; }
.piede__in { align-items: flex-end; padding-bottom: 28px; border-bottom: 1px solid rgba(11, 43, 94, .12); }
.piede__contatti { margin-top: 26px; font-size: 1.0625rem; }
.piede__contatti a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.piede__legale { border-top: 0; margin-top: 14px; padding-top: 0; font-family: var(--sans); font-size: .75rem; letter-spacing: .03em; line-height: 1.75; }

@media (min-width: 861px) {
  .hero__in { padding-top: calc(var(--header-h) + clamp(28px, 5.4vw, 78px)); padding-bottom: clamp(190px, 16vw, 236px); }
  .hero__azioni { margin-top: clamp(22px, 2.4vw, 32px); }
}

/* 16 · intestazione allo scroll */
.testata .marchio { transition: transform .35s var(--ease-out); transform-origin: 0 50%; }
.testata.piena .marchio { transform: scale(.86); }
.testata.piena { box-shadow: 0 1px 0 rgba(11, 43, 94, .08); }

/* ─── computer ─── */
@media (min-width: 861px) {
  .casa__griglia { grid-template-columns: minmax(320px, 5fr) 7fr; gap: clamp(48px, 6vw, 112px); }
  .alghero__in { grid-template-columns: minmax(340px, 5fr) 7fr; gap: clamp(24px, 3vw, 48px); align-items: end; }
  .casa__foto .cornice img { aspect-ratio: 16 / 9; object-position: 42% 55%; }
  .spazi__camera img { aspect-ratio: 4 / 3; object-position: 68% 55%; }
  .spazi__balcone img { aspect-ratio: .64; }
}
@media (min-width: 1101px) {
  /* 4 · le foto escono dalla gabbia, alternando i lati */
  .casa__foto { margin-right: calc(-1 * var(--fuori)); }
  .spazi .spazi__camera { margin-left: calc(-1 * var(--fuori)); }
  .alghero__disegno { margin-right: calc(-1 * var(--fuori)); }
  .spazi__griglia { grid-template-columns: minmax(0, 1.1fr) minmax(330px, .8fr) minmax(0, .55fr); align-items: center; }
  .spazi .spazi__balcone { align-self: start; margin-top: -72px; }
  /* le didascalie delle foto a vivo restano allineate alla gabbia */
  .casa__foto figcaption { padding-right: var(--fuori); }
  .spazi__camera figcaption { padding-left: var(--fuori); }
}

/* ─── telefono ─── */
@media (max-width: 860px) {
  :root { --sezione: 80px; --sezione-corta: 60px; }
  /* 1 · hero a tre fasce: in alto il testo nel cielo, al centro la città libera, in basso i pulsanti sul mare */
  .hero { min-height: max(100svh, 600px); }
  .hero__foto { inset: 0 0 auto 0; height: var(--hero-alt-tel); }
  .hero__foto img { object-position: var(--hero-pos-tel); }
  .hero::before {
    background: linear-gradient(180deg, rgba(232, 241, 246, .93) 0%, rgba(232, 241, 246, .84) 22%, rgba(232, 241, 246, .5) 33%, rgba(232, 241, 246, 0) 42%);
  }
  .hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: -1; pointer-events: none;
    background: linear-gradient(0deg, rgba(0, 44, 78, .42) 0%, rgba(0, 44, 78, 0) 100%);
  }
  .hero__in { display: flex; flex-direction: column; padding-top: calc(var(--header-h) + 6px); padding-bottom: calc(14vw + 18px); }
  .hero__testo { flex: 1; display: flex; flex-direction: column; }
  .hero__azioni { margin-top: auto; padding-top: 16px; }
  .hero h1 { font-size: clamp(2.6rem, 11.5vw, 3.5rem); line-height: .96; margin-bottom: 10px; }
  .hero__sotto { font-size: 1.0625rem; text-shadow: 0 0 14px rgba(232, 241, 246, .95), 0 0 4px rgba(232, 241, 246, .8); }
  .hero__coord {
    left: auto; right: 12px; bottom: auto; top: 46%;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: .6875rem; letter-spacing: .22em; color: #fff; text-shadow: 0 1px 8px rgba(0, 30, 60, .45);
  }
  .hero__coord::after { width: 2px; height: 28px; margin: 0 0 10px; }

  .titolo, .spazi__testo .titolo { font-size: 2.5rem; line-height: 1.02; }
  .testo { font-size: 1.125rem; }
  .occhiello { letter-spacing: .24em; }

  /* 4-5 · casa: soggiorno a tutta larghezza in 4:3, le persiane a destra */
  .casa__foto { margin-inline: calc(-1 * var(--gutter)); }
  .casa__foto .cornice { box-shadow: none; }
  .casa__foto .cornice img { aspect-ratio: 4 / 3; object-position: 42% 55%; }
  .casa__dettaglio { width: 38vw; left: auto; right: 20px; bottom: -44px; border-width: 6px; }
  .casa__foto figcaption { text-align: left; max-width: 52vw; padding-left: var(--gutter); margin-top: 14px; }

  /* 6 · numeri 2×2 con la croce di fili */
  .numeri { row-gap: 0; }
  .numeri li { padding: 22px 8px; }
  .numeri li:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .numeri li::before { display: none; }
  .numeri li:nth-child(even)::before { display: block; }
  .numeri strong { font-size: 2.75rem; }

  /* 7 · spazi: prima il testo, poi la camera a vivo e il balcone ad arco che si sovrappone */
  .spazi__griglia { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .spazi__testo { margin-bottom: 40px; }
  .spazi .spazi__camera { width: 88vw; margin-left: calc(-1 * var(--gutter)); }
  .spazi__camera img { aspect-ratio: 4 / 3; height: auto; object-position: 68% 55%; }
  .spazi__camera figcaption { max-width: calc(54vw - 32px); padding-left: var(--gutter); margin-top: 12px; }
  .spazi .spazi__balcone { width: 46vw; margin: -24vw 0 0 auto; position: relative; z-index: 1; }
  .spazi__balcone img { aspect-ratio: .64; height: auto; }
  .spazi__balcone .cornice { box-shadow: 0 0 0 6px var(--avorio), 0 24px 40px -24px rgba(11, 43, 94, .45); }
  .spazi__balcone figcaption { margin-top: 12px; }
  .nota-foto { margin-top: 36px; }

  /* 8 · il disegno più grande dello schermo: il centro storico viene grande */
  .alghero__in { gap: 28px; }
  .alghero__disegno { width: 112vw; max-width: none; margin-left: calc(-12vw - var(--gutter)); padding-bottom: 0; }
  .alghero__disegno figcaption { position: static; padding-left: calc(12vw + var(--gutter)); margin-top: 10px; }

  /* 9 · fascia */
  .fascia h2 { font-size: 2.4rem; }
  .fascia__in::before { width: 150vw; right: -40vw; bottom: 10%; opacity: .07; }

  /* 10 · footer: resta lo spazio per la barra fissa */
  .piede { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .piede__in { align-items: flex-start; }

  /* 11-12 */
  .prenota__privacy { line-height: 1.45; }
  .cal::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 12px; border-radius: 2px; background: var(--linea); }

  /* 14 · distanze più corte, ma il movimento si vede (09: 20-40 px) */
  .js .reveal:not(.in) { transform: translateY(20px); }
  @keyframes entra-corto { from { opacity: 0; transform: translateY(20px); } }

  /* 16 */
  .testata.piena .marchio { transform: scale(.9); }
}

/* meno movimento, non zero (anche per il livello del piano) */
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.in) { transform: none; }
  .js .reveal.in { animation: appare .6s ease backwards; animation-delay: calc(var(--i, 0) * 40ms); }
  .js .reveal--foto::before, .js .reveal--disegno::after { display: none; }
  .js .reveal--foto:not(.in), .js .reveal--disegno:not(.in) { opacity: 0; }
  .js .reveal--foto.in, .js .reveal--disegno.in { animation: appare .6s ease backwards; }
  .js .reveal--foto.in img { animation: none; }
  .testata .marchio, .link-freccia::after, .menu a::after { transition-duration: .01s; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════
   STEP 6 · IL COPY (Copy/copy.md, Copy/extra.md) — le sezioni nuove usano le forme che ci sono già:
   fili, la scheda tecnica dei numeri, occhielli col corallo, icone a tratto come quelle del kit.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════ */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1.3em; height: 1.3em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ico .barra { stroke: var(--corallo); }
.btn .ico { width: 1.2em; height: 1.2em; }
.testi-js { display: none; }

/* intestazione: il menu intero solo dove ci sta; sotto, il menu a tutto schermo */
.testata .btn { font-size: 1.0625rem; padding: .85em 1.35em; }
.menu a { font-size: 1.0625rem; }
.testata__azioni { grid-column: 3; }
@media (max-width: 1359px) {
  .menu { display: none; }
  .hamburger { display: block; }
}

/* hero: il titolo del copy è più lungo di quello del design */
.hero h1 { font-size: clamp(2.5rem, 4.3vw, 4rem); line-height: 1; }
.hero__testo { max-width: 680px; }
.hero__sotto { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; max-width: 34em; }
.voti { font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; color: var(--navy); }
.voti a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hero__voti { display: inline-block; padding: 9px 16px 10px; line-height: 1.5; border-radius: 999px; background: rgba(252, 249, 243, .9); box-shadow: 0 8px 20px -16px rgba(0, 30, 60, .5); }
.hero__azioni { gap: 16px; }

/* disponibilità */
.prenota__intro { margin: -8px 0 clamp(22px, 2.4vw, 32px); }
.prenota__messaggio:empty { display: none; }
.prenota__messaggio span { display: block; }
.prenota__messaggio .secondaria { margin-top: 4px; font-size: .9375rem; color: var(--grigio-testo); }

/* elenchi con le icone (l'appartamento, le distanze, le regole) */
.elenco { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.elenco li {
  display: grid; grid-template-columns: 28px 1fr; align-items: start; column-gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--linea);
  font-size: var(--t-testo); line-height: 1.45; color: var(--testo);
}
.elenco .ico { width: 26px; height: 26px; color: var(--navy); margin-top: 1px; }
.elenco--distanze li { grid-template-columns: 28px 1fr auto; align-items: center; }
.elenco__valore { font-style: italic; color: var(--navy); text-align: right; white-space: nowrap; }
.alghero .elenco { margin: 4px 0 clamp(26px, 2.6vw, 36px); max-width: 560px; }
.spazi__testo .elenco li { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); padding: 12px 0; }
.elenco--griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); border-top: 0; }
.elenco--griglia li { border-top: 1px solid var(--linea); border-bottom: 0; padding: 18px 0; align-items: center; }
.elenco--griglia .ico { width: 30px; height: 30px; }

/* casa: titolo, link alle foto; la didascalia è il nome della stanza */
.casa__testo .link-freccia { margin-top: 6px; }
.spazi .spazi__testo { align-self: center; }

/* spiagge: la stessa scheda tecnica dei numeri, col nome sotto la cifra */
.spiagge { padding: 0 0 var(--sezione); }
.numeri--spiagge { margin-top: clamp(22px, 2.4vw, 32px); }
.numeri--spiagge li { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; }
.numeri__nome { font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); text-align: center; }
.spiagge__dopo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px clamp(24px, 4vw, 64px); margin-top: clamp(24px, 2.6vw, 36px); }
.spiagge__dopo .testo { max-width: 40ch; }

/* come prenotare: quattro passi in fila, fili e cifre come nella scheda tecnica */
.come { padding: 0 0 var(--sezione); }
.come__testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(26px, 3vw, 40px); }
.come__testa .titolo { margin-bottom: 0; }
.come__testa .testo { max-width: 36ch; }
.passi { list-style: none; margin: 0 0 clamp(32px, 3.4vw, 48px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--linea); }
.passi li { position: relative; padding: clamp(24px, 2.6vw, 34px) clamp(16px, 2vw, 28px) clamp(26px, 2.8vw, 36px); }
.passi li + li::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--linea-blu); }
.passi__n { display: block; font-size: var(--t-numero); line-height: 1; color: var(--navy); letter-spacing: -.03em; margin-bottom: 14px; }
.passi__n::after { content: ""; display: block; width: 18px; height: 2px; margin-top: 14px; border-radius: 2px; background: var(--corallo); }
.passi p { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.5; color: var(--testo); }

/* recensioni: tre citazioni in corsivo, una riga che scorre col dito sul telefono */
.recensioni { padding: 0 0 var(--sezione); }
.recensioni .voti { margin: 0 0 clamp(26px, 3vw, 40px); }
.spiagge .titolo, .recensioni .titolo, .regole .titolo, .domande .titolo { margin-bottom: clamp(18px, 2vw, 28px); }
.regole .elenco { margin-top: 8px; }
.recensioni__fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.recensione {
  margin: 0; padding: clamp(26px, 2.6vw, 36px); background: var(--bianco-caldo); border: 1px solid rgba(11, 43, 94, .06); border-radius: 4px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
}
.recensione::before {
  content: ""; width: 24px; height: 16px;
  background: url("../img/simbolo-senyera-piccolo.webp") center / contain no-repeat;
}
.recensione blockquote { margin: 0; flex: 1; }
.recensione blockquote p { font-style: italic; font-size: clamp(1.1875rem, 1.5vw, 1.4375rem); line-height: 1.45; color: var(--navy); }
.recensione figcaption { font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio-testo); }
.recensione figcaption span:first-child { color: var(--navy); }

/* orari e regole */
.regole { padding: 0 0 var(--sezione); }

/* domande frequenti: la fisarmonica */
.domande { padding: 0 0 var(--sezione); }
.domande__griglia { display: grid; grid-template-columns: minmax(260px, 4fr) 8fr; gap: clamp(24px, 5vw, 96px); align-items: start; }
.domande__elenco { border-top: 1px solid var(--linea); }
.domanda { border-bottom: 1px solid var(--linea); }
.domanda summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.3; color: var(--navy);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary .icona { font-size: 18px; color: var(--navy); transition: transform .22s var(--ease-out); }
.domanda[open] summary .icona { transform: rotate(180deg); }
.domanda summary:active { opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .domanda summary:hover { color: var(--corallo); }
}
.domanda p { padding: 0 48px 22px 0; font-size: var(--t-testo); line-height: 1.6; color: var(--testo); }
.domanda[open] p { animation: entra-corto .35s var(--ease-out); }

/* contatti nella fascia blu */
.fascia .occhiello { color: var(--avorio); }
.fascia h2 { margin-bottom: clamp(16px, 1.8vw, 24px); }
.fascia__riga { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.6; color: rgba(252, 249, 243, .92); }
.fascia__riga a { color: var(--avorio); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fascia__wa, .piede__wa { display: inline-flex; vertical-align: middle; margin-left: 6px; text-decoration: none; }
.fascia__wa .ico { width: 24px; height: 24px; color: var(--avorio); }
.fascia__in { align-items: flex-end; }

/* footer: contatti e lingue */
.piede__contatti p + p { margin-top: 4px; }
.piede__wa .ico { width: 20px; height: 20px; color: var(--navy); }
.lingue { gap: .55em; }

/* ─── computer stretto e tablet ─── */
@media (max-width: 1100px) {
  .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passi li:nth-child(3)::before { display: none; }
  .passi li:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .recensioni__fila { grid-template-columns: repeat(3, minmax(260px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .recensione { scroll-snap-align: start; }
  .elenco--griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── telefono ─── */
@media (max-width: 860px) {
  .hero h1 { font-size: clamp(2.05rem, 9.2vw, 2.75rem); line-height: 1; }
  .hero__sotto { font-size: 1rem; }
  .hero__voti { font-size: .71875rem; letter-spacing: .03em; padding: 8px 14px; }
  .hero__azioni { gap: 12px; }

  /* le persiane non coprono più il soggiorno: stanno sotto, a destra, e sporgono appena sul pavimento */
  .casa__foto figure { display: grid; grid-template-columns: 1fr auto; align-items: start; }
  .casa__foto .cornice { grid-column: 1 / -1; }
  .casa__dettaglio {
    position: relative; grid-column: 2; grid-row: 2; left: auto; right: auto; bottom: auto;
    width: 27vw; margin: -26px var(--gutter) 0 0; border-width: 5px;
  }
  .casa__foto figcaption { grid-column: 1; grid-row: 2; max-width: none; margin-top: 14px; }

  .elenco li { padding: 12px 0; }
  .elenco--distanze li { grid-template-columns: 26px 1fr; row-gap: 2px; }
  .elenco--distanze .elenco__valore { grid-column: 2; text-align: left; white-space: normal; }
  .elenco--griglia { grid-template-columns: 1fr; }
  .spazi__testo { margin-bottom: 36px; }

  .spiagge__dopo { grid-template-columns: 1fr; }
  .numeri--spiagge li:nth-child(n+3) { border-top: 1px solid var(--linea); }

  .passi { grid-template-columns: 1fr; border-bottom: 0; }
  .passi li { display: grid; grid-template-columns: 52px 1fr; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--linea); }
  .passi li + li::before, .passi li:nth-child(n+3) { border-top: 0; }
  .passi li + li::before { display: none; }
  .passi__n { font-size: 2.5rem; margin: 0; }
  .passi__n::after { margin-top: 10px; }
  .come .btn { width: 100%; }

  .recensioni__fila { grid-template-columns: repeat(3, 84%); gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter); }

  .domande__griglia { grid-template-columns: 1fr; }
  .domanda p { padding-right: 8px; }

  .fascia__in { flex-direction: column; align-items: stretch; }
  .fascia__riga { font-size: 1.0625rem; }

  .lingue { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .domanda[open] p { animation: appare .3s ease; }
  .domanda summary .icona { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════
   LE FOTO DELL'APPARTAMENTO — un elenco solo: mosaico da computer, riga che scorre col dito da telefono,
   tour per stanze e foto a tutto schermo (main.js). Stesse cornici, fili e didascalie del sito.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════ */
.foto-casa { margin-top: clamp(48px, 5vw, 76px); }
.foto-casa__lista { list-style: none; margin: 0; padding: 0; position: relative; }
.foto-casa figure { position: relative; margin: 0; height: 100%; }
.foto-casa .cornice { height: 100%; box-shadow: none; }
.foto-casa .cornice img { width: 100%; height: 100%; object-fit: cover; }
.foto-casa figcaption.didascalia {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; margin: 0; pointer-events: none;
  padding: 5px 12px 6px; border-radius: 999px; background: rgba(252, 249, 243, .92);
  font-size: .875rem; color: var(--navy); line-height: 1.2;
}
.foto-casa figcaption.didascalia::before { display: none; }
.foto-casa__piede { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(20px, 2.2vw, 30px); }
.foto-casa__conta { display: none; font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .2em; color: var(--grigio-testo); }
.foto-casa .btn--linea { font-size: 1.0625rem; padding: .85em 1.5em; margin-left: auto; }
@media (hover: hover) and (pointer: fine) {
  .btn--linea:hover { background: var(--navy); color: #fff; }
}
.btn--linea { transition: background-color .2s ease, color .2s ease, transform .14s var(--ease-out); }

/* computer: il mosaico editoriale delle prime 8 */
@media (min-width: 861px) {
  .foto-casa__lista {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, clamp(150px, 14.5vw, 220px)); gap: clamp(10px, 1.1vw, 16px);
  }
  .foto-casa__lista > li:nth-child(n+9) { display: none; }
  .foto-casa__lista > li:nth-child(1) { grid-area: 1 / 4 / 2 / 5; }
  .foto-casa__lista > li:nth-child(2) { grid-area: 1 / 1 / 3 / 3; }
  .foto-casa__lista > li:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
  .foto-casa__lista > li:nth-child(4) { grid-area: 3 / 2 / 4 / 3; }
  .foto-casa__lista > li:nth-child(5) { grid-area: 3 / 3 / 4 / 4; }
  .foto-casa__lista > li:nth-child(6) { grid-area: 1 / 3 / 3 / 4; }
  .foto-casa__lista > li:nth-child(7) { grid-area: 2 / 4 / 3 / 5; }
  .foto-casa__lista > li:nth-child(8) { grid-area: 3 / 4 / 4 / 5; }
}

/* telefono: una riga che scorre col dito, foto all'85%, contatore */
@media (max-width: 860px) {
  .foto-casa__lista {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .foto-casa__lista::-webkit-scrollbar { display: none; }
  .foto-casa__lista > li { flex: 0 0 85%; scroll-snap-align: start; }
  .foto-casa .cornice img { aspect-ratio: 1; height: auto; }
  .foto-casa__conta { display: block; }
  .foto-casa .btn--linea { margin-left: 0; }
}

/* il tour per stanze: a tutto schermo, le stanze in cima, un titoletto e le foto */
.tour {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--avorio); color: var(--navy); overflow: hidden;
}
.tour[open] { display: flex; flex-direction: column; animation: tour-dentro .3s var(--ease-out); }
@keyframes tour-dentro { from { opacity: 0; transform: translateY(24px); } }
.tour.chiude { animation: galleria-fuori .18s var(--ease-out) forwards; }
.tour::backdrop { background: rgba(0, 28, 56, .5); }
.tour__testa {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px max(var(--gutter), calc((100vw - 1100px) / 2)) 10px; border-bottom: 1px solid var(--linea);
}
.tour__testa h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.tour__stanze {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 12px max(var(--gutter), calc((100vw - 1100px) / 2));
}
.tour__stanze::-webkit-scrollbar { display: none; }
.tour__chip {
  flex: none; border: 1px solid var(--linea); background: var(--bianco-caldo); color: var(--navy); cursor: pointer;
  border-radius: 999px; padding: 8px 14px; font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .06em;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
  transition: background-color .2s ease, transform .14s var(--ease-out);
}
.tour__chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .tour__chip:hover { background: var(--cielo); }
}
.tour__corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px max(var(--gutter), calc((100vw - 1100px) / 2)) 48px; }
.tour__stanza { padding-top: 22px; }
.tour__stanza h3 {
  font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--navy); margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.tour__stanza h3::before {
  content: ""; width: 21px; height: 14px; flex: none;
  background: url("../img/simbolo-senyera-piccolo.webp") center / contain no-repeat;
}
.tour__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tour__foto {
  display: block; padding: 0; border: 0; background: var(--cielo); cursor: zoom-in; overflow: hidden; line-height: 0;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; transition: transform .14s var(--ease-out);
}
.tour__foto:first-child { grid-column: 1 / -1; }
.tour__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .28s var(--ease-out); }
.tour__foto:first-child img { aspect-ratio: 16 / 9; }
.tour__foto:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .tour__foto:hover img { transform: scale(1.03); }
}

/* le foto a tutto schermo (sopra il tour): tutta la foto, senza tagli */
.galleria { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; display: none; }
.galleria[open] { display: flex; flex-direction: column; justify-content: center; }
.galleria__binario { position: relative; flex: 1; align-items: center; padding: 0 max(16px, 5vw) 8px; gap: 24px; }
.galleria__binario li { width: min(100%, 1200px); height: 100%; display: flex; align-items: center; justify-content: center; flex: 0 0 100%; }
.galleria__binario img { width: 100%; height: 100%; max-height: calc(100dvh - 190px); object-fit: contain; background: transparent; border-radius: 0; }
#galleria-titolo { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
@media (max-width: 860px) {
  .galleria__binario { padding: 0 0 8px; gap: 0; }
  .galleria__binario li { width: 100vw; flex: 0 0 100vw; }
  .galleria__binario img { width: 100%; height: auto; aspect-ratio: auto; max-height: calc(100dvh - 200px); object-fit: contain; }
  .tour__griglia { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour[open] { animation: appare .2s ease; }
  .tour.chiude { animation: galleria-svanisce .15s ease forwards; }
}

/* ═══ COME PRENOTARE: un percorso a quattro tappe (diverso dalla scheda delle spiagge) ═══ */
.come {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--cielo);
  padding: calc(clamp(36px, 5vw, 76px) + clamp(28px, 3vw, 48px)) 0 calc(clamp(36px, 5vw, 76px) + clamp(28px, 3vw, 44px));
  margin-bottom: var(--sezione);
}
.come__onda { position: absolute; left: 0; top: -1px; width: 100%; height: clamp(36px, 5vw, 76px); transform: scaleY(-1); pointer-events: none; z-index: 0; }
.come__onda--giu { top: auto; bottom: -1px; transform: none; }
.come .wrap { position: relative; z-index: 1; }
.come__testa { margin-bottom: clamp(32px, 3.6vw, 52px); }
.percorso { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.js .percorso.reveal:not(.in) { opacity: 1; transform: none; }
.js .percorso.reveal.in { animation: none; }
/* la linea tratteggiata corallo: un tratto da ogni cerchio al successivo, che si disegna entrando */
.percorso__tappa { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.percorso__tappa:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 68px; width: calc(100% + clamp(16px, 2vw, 32px)); height: 0;
  border-top: 2px dashed var(--corallo); opacity: .85;
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .9s var(--ease-in-out) calc(var(--i, 0) * 50ms + 350ms);
}
.js .percorso__tappa.in:not(:last-child)::after, html:not(.js) .percorso__tappa:not(:last-child)::after { transform: scaleX(1); }
.percorso__n { display: block; height: 20px; margin-bottom: 12px; font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .22em; color: var(--corallo); }
.percorso__cerchio {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bianco-caldo); border: 1px solid var(--linea-blu); color: var(--navy);
  box-shadow: 0 14px 30px -22px rgba(11, 43, 94, .45);
}
.percorso__cerchio .ico { width: 30px; height: 30px; }
.percorso__cerchio .icona { font-size: 30px; }
.percorso__tappa p { margin-top: 18px; max-width: 24ch; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.5; color: var(--testo); }
.come__azione { display: flex; justify-content: center; margin-top: clamp(32px, 3.6vw, 52px); }

@media (max-width: 860px) {
  /* il percorso in verticale: la linea a sinistra unisce i cerchi */
  .come__testa { flex-direction: column; align-items: flex-start; }
  .percorso { grid-template-columns: 1fr; gap: 26px; }
  .percorso__tappa:not(:last-child)::after {
    left: 27px; top: 28px; bottom: -54px; width: 0; height: auto;
    border-top: 0; border-left: 2px dashed var(--corallo);
    transform-origin: 50% 0; transform: scaleY(0);
  }
  .js .percorso__tappa.in:not(:last-child)::after { transform: scaleY(1); }
  .percorso__tappa { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: start; text-align: left; }
  .percorso__cerchio { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; }
  .percorso__cerchio .ico { width: 24px; height: 24px; }
  .percorso__cerchio .icona { font-size: 24px; }
  .percorso__n { grid-column: 2; grid-row: 1; height: auto; margin: 4px 0 4px; }
  .percorso__tappa p { grid-column: 2; grid-row: 2; margin-top: 0; max-width: none; }
  .come__azione .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .percorso__tappa:not(:last-child)::after { transition: opacity .3s ease; transform: none !important; }
}

/* 20 · i prezzi sotto il calendario (pannello, 16/10/2026): compaiono solo quando la cliente mette un prezzo a notte,
   un periodo o un costo in più; senza, il riquadro non c'è e la pagina resta quella del design */
.prenota__prezzi {
  margin-top: clamp(18px, 2vw, 26px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px clamp(24px, 4vw, 56px);
  max-width: 860px;
}
.prenota__prezzi-gruppo { min-width: 0; }
.prenota__prezzi-titolo {
  font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 8px;
}
.prenota__prezzi-elenco { list-style: none; margin: 0; padding: 0; }
.prenota__prezzi-elenco li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px;
  padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 1.0625rem; color: var(--testo);
}
.prenota__prezzi-elenco li:first-child { border-top: 1px solid var(--linea); }
.prenota__prezzi-elenco li[hidden] { display: none; }
.prenota__prezzi-elenco strong { font-weight: 500; color: var(--navy); white-space: nowrap; }

/* 21 · hero da telefono (Domenico, 16/10/2026: «questa scritta rimuovila proprio e metti il testo Casa vacanza… più
   sotto in modo da essere centrato»; poi «trova il metodo per far sì che la scritta si veda meglio»): niente frase sotto il
   titolo; occhiello e titolo scendono al centro della hero, fra l'intestazione e i pulsanti, bianchi con un'ombra piena e
   morbida; dietro di loro, e solo lì, uno scrim scuro sfumato che calma i dettagli dei tetti (bordi che spariscono con la
   maschera). La foto non si vela: il cielo, i bastioni e la Torre restano liberi.
   Tornata M2 (17/10/2026, voce 3b: «la foto dello sfondo sembra un po' sgranata»): via la sfocatura dietro al titolo
   (backdrop-filter), che sfocava porto e tetti proprio dove la foto sembrava sgranata; il titolo si legge con l'ombra e
   lo scrim, provato a 360, 390 e 430 px */
@media (max-width: 860px) {
  .hero::before { background: linear-gradient(180deg, rgba(232, 241, 246, .78) 0%, rgba(232, 241, 246, .45) 9%, rgba(232, 241, 246, 0) 17%); }
  .hero .occhiello { margin-top: auto; position: relative; z-index: 1; color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 20, 40, .55), 0 4px 24px rgba(0, 20, 40, .55); }
  .hero h1 { color: #fff; text-shadow: 0 1px 2px rgba(0, 20, 40, .55), 0 4px 24px rgba(0, 20, 40, .55); position: relative; isolation: isolate; }
  .hero h1::before {
    content: ""; position: absolute; z-index: -1; inset: -78px -44px -46px; pointer-events: none;
    background: radial-gradient(120% 75% at 30% 50%, rgba(6, 26, 50, .66) 0%, rgba(6, 26, 50, .42) 45%, rgba(6, 26, 50, 0) 78%);
    -webkit-mask-image: radial-gradient(120% 75% at 30% 50%, #000 0%, #000 45%, transparent 78%);
    mask-image: radial-gradient(120% 75% at 30% 50%, #000 0%, #000 45%, transparent 78%);
  }
  .hero__azioni { padding-top: 24px; }
}

/* 22 · telefono: meno vuoti (Domenico, 16/10/2026: «da mobile c'è troppo spazio bianco»). Le sezioni più vicine, fra un
   blocco e l'altro della stessa sezione al massimo ~64 px; fra i numeri e l'elenco un filetto solo. Da computer niente */
@media (max-width: 860px) {
  :root { --sezione: 56px; --sezione-corta: 36px; }
  .casa { padding-bottom: 0; }
  .casa .numeri { margin-top: 22px; border-bottom: 0; padding-bottom: 4px; }
  .casa .numeri li { padding-block: 16px; }
  .spazi { padding-top: 12px; }
  .spazi__testo { margin-bottom: 32px; }
  .nota-foto { margin-top: 28px; }
  .numeri--spiagge { margin-top: 12px; }
  .spiagge__dopo { margin-top: 14px; }
  .recensioni .voti { margin-bottom: 16px; }
  .spazi { padding-bottom: 32px; }
  .alghero__in { padding-top: 28px; }
  .spiagge__dopo { margin-top: 2px; }
  .recensioni { padding-bottom: 40px; }
}

/* 23 · il titolo della hero (Domenico, 16/10/2026: «rendilo più bella la scritta, magari animata», poi «animalo meglio»).
   La parola in evidenza del pannello («Alghero») in corsivo, con sotto un'onda di corallo disegnata a mano (svg scritto
   dal motore, filtro titolo_parole). Entrata «a maschera», come nei siti editoriali: ogni parola sale da dietro una linea
   invisibile (clip-path che scopre dal basso mentre la parola sale, così il bordo resta fermo), una dopo l'altra (80 ms),
   nitida; poi l'onda si disegna col tratto da sinistra; «La Senyera» sopra si apre da sinistra. Solo transform, clip-path
   e stroke-dashoffset, ease-out forte, una volta sola; con «riduci animazioni» tutto fermo e visibile (Emil Kowalski). */
.hero h1 .parola { display: inline-block; padding: 0 .07em .22em 0; margin: 0 -.07em -.22em 0; }
.hero h1 em { font-style: italic; letter-spacing: -.012em; position: relative; display: inline-block; padding-right: .05em; }
.hero h1 .onda {
  filter: drop-shadow(0 0 4px rgba(233, 128, 95, .55));
  position: absolute; left: .02em; bottom: -.12em; width: calc(100% - .08em); height: .22em; overflow: visible; pointer-events: none;
  fill: none; stroke: var(--corallo); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0;
}
@keyframes parola-sale { from { transform: translateY(105%) rotate(6deg); clip-path: inset(0 0 100% 0); } }
@keyframes parola-accento { 0%, 100% { transform: none; } 45% { transform: translateY(-.06em) scale(1.07); } }
@keyframes onda-disegna { from { stroke-dashoffset: 1; } }
@keyframes occhiello-apre { from { clip-path: inset(0 100% 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .riga { animation: none; }
  .hero h1 .parola { transform-origin: 0 100%; animation: parola-sale 1.15s var(--ease-out) backwards; animation-delay: calc(.2s + var(--p, 0) * 110ms); }
  .hero h1 .riga + .riga .parola { animation-delay: calc(.52s + var(--p, 0) * 110ms); }
  .hero h1 em { transform-origin: 30% 90%; animation: parola-accento .7s var(--ease-out) 1.2s; }
  .hero h1 .onda path { animation: onda-disegna .9s var(--ease-in-out) 1.15s backwards; }
  .hero .occhiello { animation: occhiello-apre .9s var(--ease-out) .05s backwards; }
}
@media (max-width: 860px) {
  .hero h1 .onda { height: .26em; bottom: -.14em; stroke-width: 3.6; }
  /* pulsante e voti un po' più su, sul mare (Domenico, 16/10/2026: «questo da mobile un po' più in su») */
  .hero__in { padding-bottom: calc(14vw + 58px); }
}

/* 24 · il mare in fondo alla hero (Domenico, 16/10/2026: «animami la linea arancione sotto la hero, quella ad onda, ma bene
   anche con una bella luce», poi «devono essere belle, fluide, che si vedono, d'impatto»). Dietro l'onda avorio (che resta
   ferma, è il disegno) due echi della stessa onda, trasparenti con la cresta di schiuma bianca, ondeggiano a ritmi diversi
   come la risacca; la linea di corallo (svg sul percorso dell'onda, fuori dall'immagine onda-avorio-hero.webp) si disegna
   col tratto all'apertura e ha un alone; poi ogni 5,5 secondi la percorre una cometa di luce: testa bianca e scia calda.
   Si muovono solo transform e stroke-dashoffset; con «riduci animazioni» il mare è fermo, la linea c'è, la cometa no. */
.hero__mare {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; width: 100%; aspect-ratio: 1800 / 560;
  overflow: hidden; pointer-events: none;
}
.hero__eco { position: absolute; bottom: 0; left: -13.334%; width: 126.667%; height: auto; aspect-ratio: 2280 / 327; overflow: visible; }
.hero__eco-forma { fill: #FBF8F2; }
.hero__eco-schiuma { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.hero__eco--1 { opacity: .34; transform: translate(0, -24%); }
.hero__eco--2 { opacity: .5; transform: translate(0, -12%); }
.hero__linea, .hero__cometa {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; width: 100%; height: auto; aspect-ratio: 1800 / 327;
  overflow: visible; pointer-events: none; fill: none;
}
.hero__linea { filter: drop-shadow(0 0 6px rgba(232, 128, 98, .5)); }
.hero__linea path { stroke: #E8836A; stroke-width: 4.4; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.hero__cometa { display: none; }
@keyframes eco-1 { from { transform: translate(-2.4%, -27%); } to { transform: translate(2.4%, -20%); } }
@keyframes eco-2 { from { transform: translate(2%, -9%); } to { transform: translate(-2%, -15%); } }
@keyframes linea-disegna { from { stroke-dashoffset: 1; } }
@keyframes cometa-1 { 0% { stroke-dashoffset: .3; } 44%, 100% { stroke-dashoffset: -1.02; } }
@keyframes cometa-2 { 0% { stroke-dashoffset: .14; } 44%, 100% { stroke-dashoffset: -1.18; } }
@keyframes cometa-testa { 0% { stroke-dashoffset: .006; } 44%, 100% { stroke-dashoffset: -1.314; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__eco--1 { animation: eco-1 7.5s ease-in-out infinite alternate; }
  .hero__eco--2 { animation: eco-2 5.2s ease-in-out -2s infinite alternate; }
  .hero__linea path { animation: linea-disegna 1.6s var(--ease-out) .35s backwards; }
  .hero__cometa {
    display: block;
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px rgba(255, 160, 120, .95)) drop-shadow(0 0 24px rgba(240, 110, 75, .55));
  }
  .hero__cometa path { stroke-linecap: round; animation-duration: 5.5s; animation-delay: 1.9s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.55, 0, .3, 1); }
  .hero__scia--1 { stroke: #FFB48E; stroke-opacity: .45; stroke-width: 8; stroke-dasharray: .3 2; stroke-dashoffset: .3; animation-name: cometa-1; }
  .hero__scia--2 { stroke: #FFD9C2; stroke-opacity: .8; stroke-width: 7; stroke-dasharray: .14 2; stroke-dashoffset: .14; animation-name: cometa-2; }
  .hero__testa { stroke: #fff; stroke-width: 11; stroke-dasharray: .006 2; stroke-dashoffset: .006; animation-name: cometa-testa; }
}
@media (max-width: 860px) {
  /* da telefono l'onda è piccola (scala ~0,22): tratti più grossi in unità dello svg, così in pixel restano decisi */
  .hero__linea path { stroke-width: 11; }
  .hero__eco-schiuma { stroke-width: 9; }
  .hero__scia--1 { stroke-width: 20; }
  .hero__scia--2 { stroke-width: 16; }
  .hero__testa { stroke-width: 26; }
}

/* 27 · «L'appartamento» parte subito con le foto (tornata M2, 17/10/2026, voce 2: «le foto a inizio pagina secondo noi
   sono in più. Può andare bene direttamente partire con le 27 foto»). Via le foto grandi e le didascalie: il titolo, sotto
   il mosaico delle foto (da computer le prime 8, «Guarda tutte le foto (27)»; da telefono la riga che scorre), poi i
   numeri e i servizi in griglia. Lo stesso respiro delle altre sezioni, niente vuoti dove stavano le foto */
.casa--foto-prima { padding-bottom: var(--sezione); }
.casa--foto-prima .casa__testo { max-width: 46rem; }
.casa--foto-prima .casa__testo .titolo { margin-bottom: 0; }
.casa--foto-prima .foto-casa { margin-top: clamp(28px, 3vw, 44px); }
.casa--foto-prima .nota-foto { margin-top: clamp(14px, 1.6vw, 22px); }
.casa--foto-prima .numeri { margin-top: clamp(40px, 4.4vw, 64px); }
.casa__servizi { margin-top: clamp(20px, 2.4vw, 34px); }
.casa__servizi li { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
@media (max-width: 420px) {
  /* a 320-420 px il contatore «1 / 27» e il pulsante non si spezzano: se non stanno sulla stessa riga, il pulsante va sotto */
  .foto-casa__piede { flex-wrap: wrap; row-gap: 12px; }
  .foto-casa__conta, .foto-casa .btn--linea { white-space: nowrap; }
}
@media (max-width: 860px) {
  .casa--foto-prima { padding-bottom: var(--sezione-corta); }
  .casa--foto-prima .foto-casa { margin-top: 20px; }
  .casa--foto-prima .numeri { margin-top: 28px; }
  .casa__servizi { margin-top: 8px; }
  .casa__servizi li { padding: 12px 0; }
}

/* 28 · la foto in cima da telefono (tornata M2, voce 3a): quando c'è la foto verticale (<source> fino a 860 px) vale il
   suo punto di fuoco, non quello della foto orizzontale; di serie al centro */
@media (max-width: 860px) {
  .hero__foto picture.con-telefono img { object-position: var(--hero-pos-verticale, 50% 50%); }
}

/* 29 · la Senyera al posto del corallo (tornata M2, 17/10/2026, voce 1: «Al posto del corallo ci sarebbe da mettere la
   bandiera. La Senyera è il nome della bandiera catalana»). Il logo è un'immagine sola: la scritta a destra del taglio al
   24% (la bandiera finisce al 22%, la scritta comincia al 26%), la bandiera a sinistra fatta di 24 strisce verticali della
   stessa immagine (<i style="--k">, modelli-senyera.py). Ferma è identica all'immagine. Entra srotolandosi dall'asta, con
   lo stesso tempo e la stessa curva del corallo, e al passaggio del mouse sventola: ogni striscia sale e scende un po'
   dopo quella prima, più è lontana dall'asta più si muove, e si schiarisce e si scurisce come una piega. Nel menu del
   telefono la bandiera sventola piano finché il menu è aperto. Si muovono solo transform e filter; con «riduci
   animazioni» la bandiera è ferma. I segnetti accanto ai titoli sono la Senyera piccola (simbolo-senyera-piccolo.webp) */
@property --vento { syntax: "<number>"; inherits: true; initial-value: 0; }
.bandiera { container-type: inline-size; --fette: 24; --quota: 1; --vento: 0; }
.bandiera i {
  position: absolute; top: 0; bottom: 0;
  /* +2px: ogni striscia copre il bordo della vicina, niente righine chiare fra una e l'altra (con +1px Chrome le lascia
     ancora, da telefono); nel logo i 2px in più cadono nel vuoto fra la bandiera e la scritta */
  left: calc(var(--k) * 100cqw / var(--fette)); width: calc(100cqw / var(--fette) + 2px);
  background: url("../img/simbolo-senyera.webp") no-repeat;
  background-size: calc(100cqw / var(--quota)) 100%;
  background-position: calc(var(--k) * -100cqw / var(--fette)) 0;
  --a: calc(var(--vento) * 1px * (var(--k) + 1) / var(--fette));
  --l: calc(var(--vento) * .035 * (var(--k) + 1) / var(--fette));
}
.marchio__bandiera { position: absolute; left: 0; top: 0; width: 24%; height: 100%; --quota: .24; }
.marchio__bandiera i { background-image: url("../img/logo-la-senyera.webp"); }
.bandiera--simbolo { position: relative; display: block; width: 64px; aspect-ratio: 3 / 2; --vento: 1.4; }
@keyframes bandiera-entra { from { clip-path: inset(0 100% 0 0); } }
@keyframes vento-cala { from { --vento: 3; } }
@keyframes sventola {
  from { transform: translateY(calc(var(--a) * -1)); filter: brightness(calc(1 + var(--l))); }
  to { transform: translateY(var(--a)); filter: brightness(calc(1 - var(--l))); }
}
@media (prefers-reduced-motion: no-preference) {
  .marchio__bandiera {
    animation: bandiera-entra 1.1s var(--ease-out) .15s backwards, vento-cala 2.6s var(--ease-out) .15s backwards;
    transition: --vento .28s var(--ease-out);
  }
  .bandiera i { animation: sventola 1.1s ease-in-out calc((var(--fette) - var(--k)) * -90ms) infinite alternate; }
  /* senza mouse (telefono, tablet) il logo sventola solo mentre entra, poi resta fermo */
  @media (hover: none) { .marchio__bandiera i { animation-iteration-count: 4; } }
  @media (hover: hover) and (pointer: fine) { .marchio:hover .marchio__bandiera { --vento: 2.4; } }
}