/* Fenisia Guest House — stile del sito pubblico. NUOVA VESTE (prova con Taste Skill + Impeccable, ottobre 2026).
   Colori: calce bianca e fredda, inchiostro blu-nero, blu cobalto come unico accento (al posto di beige + blu + oro).
   Caratteri: Bricolage Grotesque per i titoli (senza grazie, più contemporaneo), Figtree per il testo. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/font/bricolage-grotesque-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/font/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/font/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/font/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/font/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/font/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --sfondo: #f6f7f4;
  --calce: #eceff2;
  --superficie: #fdfdfb;
  --testo: #131a26;
  --testo-2: #4a5465;
  --linea: #dadee4;
  --oro: #2449a8;
  --oro-chiaro: #b8c6e6;
  --azione: #2449a8;
  --azione-scuro: #1a3784;
  --su-azione: #fdfdfb;
  --rosso: #b3261e;
  --su-rosso: #ffffff;
  --ulivo: #2f6b57;
  --mare: #1f7c93;
  --scuro: #e3e8f0;
  --notte: #131a26;
  --su-scuro: #131a26;
  --su-scuro-2: #3f4a5c;
  --libero: #e7eefa;
  --libero-bordo: #a8bddb;
  --occupato: #eceff2;
  --scelto: #2449a8;
  --tra: #d6e0f3;
  --ombra: 0 1px 2px rgba(19, 26, 38, .06), 0 10px 30px rgba(19, 26, 38, .08);
  --raggio: 14px;
  --raggio-piccolo: 10px;
  --serif: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --larghezza: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sfondo: #0e131b; --calce: #131a24; --superficie: #19212d; --testo: #e9edf3; --testo-2: #a7b1c0; --linea: #2a3443;
    --oro: #9db4ee; --oro-chiaro: #33476e; --azione: #9db4ee; --azione-scuro: #b9cbf4; --su-azione: #0e131b; --rosso: #f08a80; --su-rosso: #1a0f0e;
    --ulivo: #86c2ad; --mare: #6cc1d6;
    --scuro: #161e2a; --notte: #0a0f18; --su-scuro: #e9edf3; --su-scuro-2: #a7b1c0;
    --libero: #1a2940; --libero-bordo: #34507c; --occupato: #19212d; --scelto: #9db4ee; --tra: #243a5e;
    --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sfondo: #0e131b; --calce: #131a24; --superficie: #19212d; --testo: #e9edf3; --testo-2: #a7b1c0; --linea: #2a3443;
  --oro: #9db4ee; --oro-chiaro: #33476e; --azione: #9db4ee; --azione-scuro: #b9cbf4; --su-azione: #0e131b; --rosso: #f08a80; --su-rosso: #1a0f0e;
  --ulivo: #86c2ad; --mare: #6cc1d6;
  --scuro: #161e2a; --notte: #0a0f18; --su-scuro: #e9edf3; --su-scuro-2: #a7b1c0;
  --libero: #1a2940; --libero-bordo: #34507c; --occupato: #19212d; --scelto: #9db4ee; --tra: #243a5e;
  --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--sfondo); color: var(--testo); font: 400 17px/1.65 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azione); text-underline-offset: .18em; }
a:hover { color: var(--azione-scuro); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; font-variant-numeric: lining-nums; }
h1 em, h2 em, .logo em { font-style: italic; font-weight: 500; }
h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--mare); outline-offset: 2px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }

.contenitore { width: 100%; max-width: var(--larghezza); margin-inline: auto; padding-inline: var(--gutter); }
.sezione { padding-block: clamp(56px, 8vw, 104px); }
.sezione--calce { background: var(--calce); }
.sezione--scura { background: var(--scuro); color: var(--su-scuro); }
.sezione--scura .kicker, .sezione--notte .kicker { color: #d9bb82; }
.sezione--scura a { color: var(--su-scuro); }
.sezione--notte { background: var(--notte); color: var(--su-scuro); }
.kicker { font: 600 .78rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin: 0 0 .9em; }
.kicker--chiaro { color: #f3dcae; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.nota { font-size: .92rem; color: var(--testo-2); }
.sezione--scura .nota { color: var(--su-scuro-2); }
.centrato { text-align: center; }
.salta { position: absolute; left: 12px; top: -60px; background: var(--azione); color: var(--su-azione); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.salta:focus { top: 12px; }
.trappola { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- bottoni */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.4em; border-radius: 999px; border: 1.5px solid var(--azione); background: var(--azione); color: var(--su-azione); font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.bottone:hover { background: var(--azione-scuro); border-color: var(--azione-scuro); color: var(--su-azione); }
.bottone:active { transform: translateY(1px); }
.bottone[disabled] { opacity: .6; cursor: progress; }
.bottone .icona { width: 20px; height: 20px; }
.bottone--piccolo { min-height: 40px; padding: .45em 1.1em; font-size: .92rem; }
.bottone--contorno { background: transparent; color: var(--azione); }
.bottone--contorno:hover { background: var(--azione); color: var(--su-azione); }
.sezione--scura .bottone--contorno { color: var(--su-scuro); border-color: var(--su-scuro-2); }
/* sulle fasce scure il bottone pieno prende l'oro della pietra leccese, che si legge meglio del blu */
.sezione--scura .bottone:not(.bottone--contorno) { background: #d9bb82; border-color: #d9bb82; color: #1b1407; }
.sezione--scura .bottone:not(.bottone--contorno):hover { background: #e8d0a2; border-color: #e8d0a2; color: #1b1407; }
.bottone--vetro { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7); color: #fff; backdrop-filter: blur(6px); }
.bottone--vetro:hover { background: rgba(255, 255, 255, .26); border-color: #fff; color: #fff; }
.bottone--largo { width: 100%; }
.chip { min-height: 40px; padding: .4em 1em; border-radius: 999px; border: 1px solid var(--linea); background: var(--superficie); color: var(--testo); cursor: pointer; font-size: .94rem; }
.chip[aria-pressed="true"] { background: var(--testo); border-color: var(--testo); color: var(--sfondo); }

/* ---------- testata */
.testata { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .25s, box-shadow .25s, color .25s; color: #fff; }
.testata--semplice, .testata.testata--piena { background: color-mix(in srgb, var(--sfondo) 92%, transparent); backdrop-filter: blur(10px); color: var(--testo); box-shadow: 0 1px 0 var(--linea); }
.testata--semplice { position: sticky; }
.testata__barra { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 600 1.35rem/1 var(--serif); white-space: nowrap; }
.logo:hover { color: inherit; }
.logo__segno { width: 38px; height: 38px; flex: none; }
.menu { margin-left: auto; }
.menu ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.menu a { color: inherit; text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: .95rem; font-weight: 500; }
.menu a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.testata__azioni { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.testata--semplice .testata__azioni { margin-left: auto; }
.lingua { color: inherit; font-weight: 600; font-size: .9rem; text-decoration: none; padding: 8px 10px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 8px; }
.lingua:hover { color: inherit; background: color-mix(in srgb, currentColor 12%, transparent); }
/* menu delle lingue: un <details> che si apre sotto la sigla (IT, EN, ES, FR, DE) */
.lingue { position: relative; }
.lingue > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }
.lingue > summary::-webkit-details-marker { display: none; }
.lingue > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); opacity: .8; }
.lingue[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.lingue__elenco { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 160px; margin: 0; padding: 6px; list-style: none; background: var(--superficie); color: var(--testo); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--ombra); }
.lingue__elenco a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--testo); text-decoration: none; font-size: .95rem; }
.lingue__elenco a:hover { background: var(--calce); color: var(--testo); }
.lingue__elenco a[aria-current] { font-weight: 600; color: var(--azione); }
.piede__lingue a, .piede__lingue strong { white-space: nowrap; }
.menu-apri { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: inherit; border-radius: 8px; }
.menu-apri .icona { width: 26px; height: 26px; }
@media (max-width: 1080px) {
  .menu-apri { display: inline-flex; }
  .menu { position: fixed; inset: 68px 0 auto; background: var(--sfondo); color: var(--testo); box-shadow: var(--ombra); display: none; margin: 0; }
  .menu.aperto { display: block; }
  .menu ul { flex-direction: column; padding: 8px var(--gutter) 20px; }
  .menu a { display: block; padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--linea); border-radius: 0; }
  .testata__azioni { margin-left: auto; }
}
/* Telefoni (fino a 480 px): nella testata restano logo, "Fenisia", lingua, Prenota e menu (il nome intero è nel titolo della pagina). */
@media (max-width: 480px) {
  .logo { gap: 8px; }
  .logo__segno { width: 34px; height: 34px; }
  .logo__nome { font-size: 1.2rem; }
  .logo__nome em { display: none; }
  .testata__azioni { gap: 6px; }
  .testata__azioni .bottone--piccolo { padding-inline: .85em; }
  .lingue > summary { padding-inline: 9px; }
  .lingue > summary::after { display: none; }
  .menu-apri { padding: 6px; margin-right: -6px; }
}
@media (max-width: 339px) { .logo__nome { display: none; } }

/* ---------- apertura */
.eroe { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; color: #fff; isolation: isolate; }
.eroe { overflow-x: clip; } /* lo zoom della foto non deve far scorrere la pagina di lato (Safari non ha view-timeline, che altrove ritaglia) */
.eroe__foto { position: absolute; inset: 0; z-index: -1; }
.eroe__img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
.eroe__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 19, 32, .5) 0%, rgba(12, 19, 32, 0) 22%), linear-gradient(90deg, rgba(12, 19, 32, .62) 0%, rgba(12, 19, 32, .28) 45%, rgba(12, 19, 32, 0) 75%), linear-gradient(180deg, rgba(12, 19, 32, 0) 45%, rgba(12, 19, 32, .72) 100%); }
.eroe__testo { padding-block: 120px 56px; }
.eroe h1 { font-size: clamp(3.2rem, 2rem + 6vw, 6.4rem); margin-bottom: .2em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.eroe__sotto { font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); max-width: 40ch; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.eroe__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
/* sul telefono i due bottoni stanno sempre uno sotto l'altro: così la scritta non salta quando arriva il carattere del sito */
@media (max-width: 520px) { .eroe__azioni { flex-direction: column; align-items: stretch; } }
.eroe__prova a { color: #fff; text-decoration: none; font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; opacity: .95; }
.eroe__prova a:hover { text-decoration: underline; }
.stellina { width: 16px; height: 16px; fill: currentColor; stroke: none; color: #f0c56a; }

.fatti { list-style: none; margin: -34px auto 0; padding-block: 0; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); }
.fatti li { background: var(--superficie); padding: 20px 16px; text-align: center; box-shadow: var(--ombra); display: flex; flex-direction: column; gap: 2px; }
.fatti li:first-child { border-radius: var(--raggio) 0 0 var(--raggio); }
.fatti li:last-child { border-radius: 0 var(--raggio) var(--raggio) 0; }
.fatti strong { font: 600 1.9rem/1.1 var(--serif); color: var(--azione); font-variant-numeric: lining-nums; }
.fatti span { font-size: .88rem; color: var(--testo-2); }
@media (max-width: 760px) {
  .fatti { grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linea); border-radius: var(--raggio); overflow: hidden; margin-top: -24px; padding: 0; width: calc(100% - 2 * var(--gutter)); box-shadow: var(--ombra); }
  .fatti li { border-radius: 0 !important; box-shadow: none; }
  .fatti li:last-child { grid-column: 1 / -1; }
}

/* ---------- storia */
.storia { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.storia__testo p { font-size: 1.06rem; }
.storia__foto { position: relative; padding-bottom: 60px; }
.storia__grande { border-radius: var(--raggio); width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.storia__piccola { position: absolute; width: 46%; right: -12px; bottom: 0; border-radius: var(--raggio); border: 6px solid var(--sfondo); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--ombra); }
@media (max-width: 860px) { .storia { grid-template-columns: 1fr; } .storia__piccola { right: 12px; } }

/* ---------- schede */
.schede { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.scheda { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 24px; }
.scheda h3 { margin-top: 12px; margin-bottom: .35em; }
.scheda p { margin: 0; color: var(--testo-2); }
.scheda__icona { width: 36px; height: 36px; color: var(--azione); }
.schede--tre { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.esperienze__nota { max-width: 75ch; margin-top: 20px; }

/* ---------- galleria */
.schede-cat { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.galleria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.galleria__voce--extra { display: none; }
.galleria.tutte .galleria__voce--extra { display: block; }
.galleria__voce.nascosta { display: none !important; }
.galleria__apri { display: block; width: 100%; padding: 0; border: 0; background: var(--linea); border-radius: var(--raggio-piccolo); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; }
.galleria__apri img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.galleria__apri:hover img { transform: scale(1.04); }
.galleria .galleria__voce:first-child:not(.nascosta) { grid-column: span 2; grid-row: span 2; }
.galleria .galleria__voce:first-child .galleria__apri { aspect-ratio: auto; height: 100%; }
.galleria.filtrata .galleria__voce:first-child { grid-column: auto; grid-row: auto; }
.galleria.filtrata .galleria__voce:first-child .galleria__apri { aspect-ratio: 4 / 3; height: auto; }
.galleria + .centrato { margin-top: 24px; }
@media (max-width: 640px) { .galleria { grid-template-columns: repeat(2, 1fr); gap: 6px; } }

.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 12, 20, .96); color: #fff; }
.lightbox::backdrop { background: rgba(8, 12, 20, .9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figura { margin: 0; max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px); display: grid; gap: 10px; justify-items: center; }
.lightbox__figura img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lightbox__figura figcaption { font-size: .95rem; color: #e3e8f0; text-align: center; }
.lightbox__bottone { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox__bottone:hover { background: rgba(255, 255, 255, .25); }
.lightbox__bottone .icona { width: 26px; height: 26px; }
.lightbox__chiudi { top: 14px; right: 14px; }
.lightbox__prec { left: 14px; top: 50%; translate: 0 -50%; }
.lightbox__succ { right: 14px; top: 50%; translate: 0 -50%; }
.lightbox__contatore { position: absolute; top: 24px; left: 20px; margin: 0; font-size: .9rem; color: #b6c0cf; }
@media (max-width: 640px) { .lightbox__prec, .lightbox__succ { top: auto; bottom: 16px; translate: none; } .lightbox__prec { left: calc(50% - 64px); } .lightbox__succ { right: calc(50% - 64px); } }

/* ---------- accoglienza */
.accoglienza { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.accoglienza p { color: var(--su-scuro-2); font-size: 1.06rem; }
.citazione { margin: 0; padding: 32px; border-left: 3px solid var(--oro-chiaro); }
.citazione blockquote { margin: 0; }
.citazione p { font: italic 500 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.35 var(--serif); color: var(--su-scuro); }
.citazione figcaption { font-size: .9rem; color: var(--su-scuro-2); }
@media (max-width: 860px) { .accoglienza { grid-template-columns: 1fr; } .citazione { padding: 8px 0 8px 20px; } }

/* ---------- camere */
.camere { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.letti, .distanze, .arrivo, .info__elenco, .stato__dati { margin: 20px 0; padding: 0; }
.letti > div, .distanze > div, .info__elenco > div, .stato__dati > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.letti dt, .distanze dt, .info__elenco dt, .stato__dati dt { font-weight: 600; }
.letti dd, .distanze dd, .info__elenco dd, .stato__dati dd { margin: 0; color: var(--testo-2); text-align: right; }
.camere__foto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.camere__foto img { border-radius: var(--raggio-piccolo); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.camere__foto img:nth-child(2) { margin-top: 36px; }
.camere__foto img:nth-child(3) { margin-top: -36px; }
@media (max-width: 860px) { .camere { grid-template-columns: 1fr; } }

.servizi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 28px 0; }
.servizi h3 { font-size: 1.3rem; border-bottom: 2px solid var(--oro-chiaro); padding-bottom: 8px; }
.servizi ul { list-style: none; margin: 0; padding: 0; }
.servizi li { padding: 6px 0 6px 22px; position: relative; color: var(--testo-2); }
/* stellina a quattro punte, come quelle dipinte sulle targhe delle camere */
.servizi li::before { content: ""; position: absolute; left: 1px; top: .78em; width: 11px; height: 11px; background: var(--oro); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@media (max-width: 960px) { .servizi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .servizi { grid-template-columns: 1fr; } }

/* ---------- sala benessere */
.benessere { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.benessere p { color: var(--su-scuro-2); font-size: 1.06rem; }
.benessere .benessere__prezzo { display: flex; align-items: center; gap: 12px; margin: 24px 0; padding: 14px 0; border-block: 1px solid rgba(255, 255, 255, .16); font: 600 1.45rem/1.2 var(--serif); color: var(--su-scuro) !important; font-variant-numeric: lining-nums; }
.benessere__prezzo .icona { width: 30px; height: 30px; color: #9db4ee; flex: none; }
.sezione--notte .bottone--contorno { color: var(--su-scuro); border-color: var(--su-scuro-2); background: transparent; }
.sezione--notte .bottone--contorno:hover { background: var(--su-scuro); border-color: var(--su-scuro); color: var(--notte); }
.benessere__foto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.benessere__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio-piccolo); }
.benessere__foto .benessere__grande { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
@media (max-width: 860px) { .benessere { grid-template-columns: 1fr; } }

/* ---------- recensioni */
.punteggi { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1000px) { .punteggi { grid-template-columns: repeat(2, 1fr); } }
.punteggi li { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 20px; display: flex; flex-direction: column; gap: 2px; }
.punteggi strong { font: 600 2.4rem/1 var(--serif); color: var(--testo); font-variant-numeric: lining-nums; }
.punteggi small { font-size: 1.1rem; color: var(--testo-2); }
.punteggi span { font-size: .92rem; color: var(--testo-2); }
.punteggi span:nth-of-type(1) { font-weight: 600; color: var(--testo); }
@media (max-width: 700px) { .punteggi { grid-template-columns: 1fr; } .punteggi li { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } }
.recensioni { columns: 3 320px; column-gap: 16px; }
.recensioni--elenco { margin-top: 16px; }
.recensione { break-inside: avoid; margin: 0 0 16px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.recensione__stelle { display: flex; gap: 2px; }
.recensione__titolo { font: 600 1.25rem/1.25 var(--serif); margin: 0; }
.recensione blockquote { margin: 0; }
.recensione blockquote p { margin: 0; color: var(--testo); font-size: .98rem; }
.recensione figcaption { font-size: .9rem; display: flex; flex-direction: column; }
.recensione figcaption span { color: var(--testo-2); font-size: .85rem; }
.recensione figcaption .recensione__luogo { font-weight: 400; }
.recensione__risposta { font-size: .88rem; color: var(--testo-2); border-left: 2px solid var(--oro-chiaro); padding-left: 12px; margin: 0; }
.recensione__risposta strong { color: var(--testo); font-weight: 600; }
.recensioni-tutte + .centrato, .recensioni + .recensioni-tutte { margin-top: 8px; }

/* ---------- dove */
.dove { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.arrivo > div { padding: 10px 0; }
.arrivo dt { font-weight: 600; }
.arrivo dd { margin: 0; color: var(--testo-2); }
.mappa { position: sticky; top: 96px; }
.mappa__segnaposto, .mappa iframe { border-radius: var(--raggio); overflow: hidden; aspect-ratio: 4 / 3.6; width: 100%; border: 0; position: relative; background: var(--occupato); }
.mappa__foto { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.mappa__velo { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; background: linear-gradient(180deg, rgba(12, 19, 32, .25), rgba(12, 19, 32, .7)); color: #fff; }
.mappa__velo p { max-width: 36ch; font-size: .9rem; margin: 0; }
.mappa__link { font-size: .9rem; margin-top: 10px; }
@media (max-width: 860px) { .dove { grid-template-columns: 1fr; } .mappa { position: static; } }

/* ---------- prenotazione */
.prenota__intro { max-width: 60ch; }
.campo-data { background: var(--superficie); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.campo-data span { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); }
.campo-data strong { font-weight: 500; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo-data select { border: 0; background: none; padding: 0; font-size: .98rem; font-weight: 500; min-height: 26px; cursor: pointer; }

.link-bottone { background: none; border: 0; padding: 0; color: var(--azione); text-decoration: underline; cursor: pointer; font-size: .9rem; }

.modulo { display: grid; gap: 14px; margin-top: 20px; }
.modulo h3 { margin: 6px 0 0; font-size: 1.3rem; }
.modulo label { display: grid; gap: 6px; font-size: .92rem; font-weight: 500; }
.modulo input:not([type="checkbox"]), .modulo textarea { width: 100%; border: 1px solid var(--linea); border-radius: 10px; background: var(--sfondo); padding: 12px 14px; font-size: 1rem; min-height: 48px; }
.modulo textarea { resize: vertical; }
.modulo input:focus, .modulo textarea:focus { outline: 2px solid var(--mare); outline-offset: 0; border-color: var(--mare); }
.modulo [aria-invalid="true"] { border-color: var(--rosso) !important; }
.modulo .spunta { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.modulo .spunta input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--azione); }
.modulo__errore { color: var(--rosso); font-weight: 500; margin: 0; }
.modulo__ok { color: var(--ulivo); font-weight: 600; margin: 0; }
.modulo--scuro input:not([type="checkbox"]), .modulo--scuro textarea { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: var(--su-scuro); }
.modulo--scuro .modulo__errore { color: #f0a594; }
.modulo--scuro .modulo__ok { color: #c6d69b; }
.avviso { margin-top: 16px; padding: 16px; border-radius: 10px; background: color-mix(in srgb, var(--oro) 12%, transparent); }

/* ---------- richiesta di preventivo (date → disponibilità → dati) */
.richiesta { max-width: 880px; margin-top: 28px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: clamp(16px, 3vw, 28px); box-shadow: var(--ombra); }
.richiesta__date { display: grid; grid-template-columns: 1fr 1fr 110px auto; gap: 1px; align-items: stretch; background: var(--linea); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.richiesta__date .campo-data { padding: 10px 14px; }
.richiesta__date select { border: 0; background: none; padding: 0; font: 500 1rem/1.3 var(--sans); color: var(--testo); min-height: 30px; width: 100%; min-width: 0; }
.richiesta__date select:focus { outline: 2px solid var(--mare); outline-offset: 2px; border-radius: 4px; }
.richiesta__date .bottone { border-radius: 0; min-height: 64px; padding-inline: 1.4em; }
@media (max-width: 720px) {
  .richiesta__date { grid-template-columns: 1fr 1fr; }
  .richiesta__date .campo-data:nth-child(3) { grid-column: 1 / -1; }
  .richiesta__date .bottone { grid-column: 1 / -1; min-height: 52px; }
}
.esito { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px 18px; border-radius: 12px; border: 1px solid; }
.esito .icona { width: 28px; height: 28px; flex: none; margin-top: 2px; }
.esito strong { display: block; font: 600 1.2rem/1.25 var(--serif); }
.esito span { display: block; font-size: .92rem; color: var(--testo-2); margin-top: 2px; }
.esito p { margin: 8px 0 0; font-size: .95rem; }
.esito--ok { background: var(--libero); border-color: var(--libero-bordo); }
.esito--ok .icona, .esito--ok strong { color: var(--ulivo); }
.esito--no { background: color-mix(in srgb, var(--rosso) 8%, transparent); border-color: color-mix(in srgb, var(--rosso) 35%, transparent); }
.esito--no .icona, .esito--no strong { color: var(--rosso); }
.richiesta__inviata:focus { outline: none; }
.richiesta__inviata .link-bottone { margin-top: 10px; }
/* ---------- calendario delle date: tutte cliccabili (le date occupate non si vedono: lo dice la verifica) */
.richiesta { --accento-cal: var(--azione); --su-accento-cal: var(--su-azione); }
.campo-data--scelta { position: relative; border: 0; margin: 0; font: inherit; color: var(--testo); text-align: left; cursor: pointer; padding-right: 42px !important; }
.campo-data--scelta:hover, .campo-data--scelta.attivo { background: color-mix(in srgb, var(--accento-cal) 7%, var(--superficie)); }
.campo-data--scelta.attivo { box-shadow: inset 0 -3px 0 var(--accento-cal); }
.campo-data--scelta:focus-visible { outline: 2px solid var(--mare); outline-offset: -3px; }
.campo-data--scelta strong { font: 500 1rem/1.3 var(--sans); min-height: 30px; display: flex; align-items: center; }
.campo-data--scelta strong.vuoto { color: var(--testo-2); font-weight: 400; }
.campo-data__icona { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--testo-2); }
@media (max-width: 559px) { .campo-data__icona { display: none; } .campo-data--scelta { padding-right: 14px !important; } }
.calendario-date { margin-top: 14px; padding: 14px 16px 18px; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); }
.calendario-date[hidden] { display: none; }
.calendario-date__testa { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.calendario-date__aiuto { flex: 1; margin: 0; min-height: 2.8em; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .92rem; line-height: 1.4; color: var(--testo-2); } /* altezza fissa: il calendario non si sposta sotto il dito */
.calendario-date__nav { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: var(--superficie); color: var(--testo); display: grid; place-items: center; cursor: pointer; padding: 0; }
.calendario-date__nav:hover:not(:disabled) { border-color: var(--accento-cal); color: var(--accento-cal); }
.calendario-date__nav:disabled { opacity: .3; cursor: default; }
.calendario-date__nav .icona { width: 18px; height: 18px; }
.calendario-date__mesi { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 700px) { .calendario-date__mesi { grid-template-columns: 1fr 1fr; gap: 36px; } }
.calendario-date__mese h3 { margin: 0 0 8px; text-align: center; font: 600 1.2rem/1.2 var(--serif); }
.calendario-date__griglia { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; }
.calendario-date__gs { padding: 4px 0 6px; text-align: center; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2); }
.calendario-date__giorno { position: relative; height: 44px; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: var(--testo); font: 500 .95rem/1 var(--sans); cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.calendario-date__giorno span { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background-color .12s; }
.calendario-date__giorno:hover:not(:disabled) span { background: color-mix(in srgb, var(--accento-cal) 16%, transparent); }
.calendario-date__giorno:focus-visible { outline: none; }
.calendario-date__giorno:focus-visible span { outline: 2px solid var(--mare); outline-offset: 1px; }
.calendario-date__giorno:disabled { color: color-mix(in srgb, var(--testo) 25%, transparent); cursor: default; }
.calendario-date__giorno--oggi span { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--testo) 35%, transparent); }
/* periodo scelto: fascia chiara tra arrivo e partenza, cerchi pieni agli estremi */
.calendario-date__giorno--tra::before, .calendario-date__giorno--arrivo.calendario-date__giorno--intervallo::before, .calendario-date__giorno--partenza.calendario-date__giorno--intervallo::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; right: 0; background: color-mix(in srgb, var(--accento-cal) 13%, transparent); }
.calendario-date__giorno--arrivo::before { left: 50% !important; }
.calendario-date__giorno--partenza::before { right: 50% !important; }
.calendario-date__giorno--arrivo span, .calendario-date__giorno--partenza span { background: var(--accento-cal) !important; color: var(--su-accento-cal); font-weight: 600; box-shadow: none; }
@media (max-width: 380px) { .calendario-date { padding-inline: 10px; } .calendario-date__giorno { height: 40px; } .calendario-date__giorno span { width: 36px; height: 36px; } }
/* date occupate qui, libere nell'altra casa (Masseria ↔ Fenisia) */
.altra-casa { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 18px; align-items: center; margin-top: 14px; padding: 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--sfondo); }
.altra-casa img { width: 100%; height: 100%; min-height: 150px; max-height: 190px; object-fit: cover; border-radius: 8px; }
.altra-casa__kicker { margin: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--testo-2); }
.altra-casa__titolo { margin: 2px 0 0; font: 600 1.3rem/1.2 var(--serif); }
.altra-casa div > p:not([class]) { margin: 6px 0 12px; font-size: .95rem; }
.altra-casa .bottone .icona { width: 18px; height: 18px; }
@media (max-width: 560px) { .altra-casa { grid-template-columns: 1fr; } .altra-casa img { max-height: 170px; } }
.richiesta__campi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .richiesta__campi { grid-template-columns: 1fr; } }

/* ---------- recapiti (telefono, WhatsApp, email) */
.recapiti { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.recapiti a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); text-decoration: none; color: var(--su-scuro); background: rgba(255, 255, 255, .04); }
.recapiti a:hover { background: rgba(255, 255, 255, .1); color: var(--su-scuro); }
.recapiti .icona { width: 24px; height: 24px; flex: none; color: var(--oro); }
.recapiti span { display: grid; font-weight: 500; overflow-wrap: anywhere; }
.recapiti small { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--su-scuro-2); font-weight: 600; }

/* ---------- pagina dell'ospite: preventivo e caparra */
.stato__dati .riga-forte dt, .stato__dati .riga-forte dd { font-weight: 700; color: var(--testo); }
.stato__dati .riga-evidenza { background: color-mix(in srgb, var(--azione) 7%, transparent); margin: 0 -20px; padding-inline: 20px; }
.stato__dati .riga-evidenza dt, .stato__dati .riga-evidenza dd { font-weight: 600; color: var(--testo); }
.stato__extra { max-width: 460px; margin: 0 auto 20px; text-align: left; }
.stato__messaggio { margin: 0 0 16px; padding: 14px 18px; border-left: 3px solid var(--oro); background: var(--superficie); border-radius: 0 12px 12px 0; }
.stato__messaggio p { margin: 0; white-space: pre-line; }
.stato__messaggio-titolo { font: 600 .78rem/1.2 var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); margin-bottom: 6px !important; }
.stato__cauzione { font-size: .92rem; color: var(--testo-2); padding: 12px 14px; border: 1px dashed var(--linea); border-radius: 10px; }
.stato__paga { margin-top: 12px; }
.stato__email { margin: 0 0 12px; padding: 10px 14px 10px 40px; border-radius: 10px; font-size: .92rem; position: relative; background: color-mix(in srgb, var(--ulivo) 9%, transparent); }
.stato__email::before { content: "✉"; position: absolute; left: 14px; top: 9px; color: var(--ulivo); }

/* ---------- info, faq, contatti */
.info { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); }
.info h3 { margin-top: 64px; }
@media (max-width: 860px) { .info { grid-template-columns: 1fr; } .info h3 { margin-top: 0; } .info__elenco > div { flex-direction: column; gap: 2px; } .info__elenco dd { text-align: left; } }
.faq__elenco { max-width: 820px; margin-top: 24px; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; padding: 18px 36px 18px 0; font: 600 1.25rem/1.3 var(--serif); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 1.8rem/1 var(--sans); color: var(--oro); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--testo-2); padding-bottom: 12px; }
.contatti { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 72px); }
.contatti p { color: var(--su-scuro-2); }
@media (max-width: 860px) { .contatti { grid-template-columns: 1fr; } }

/* ---------- piede */
.piede { background: var(--calce); border-top: 1px solid var(--linea); padding-top: 48px; font-size: .93rem; color: var(--testo-2); }
.piede__griglia { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 28px; }
.piede__nome { display: flex; align-items: center; gap: 10px; font: 600 1.35rem/1 var(--serif); color: var(--testo); }
.piede__nome svg { width: 34px; height: 34px; }
.piede__link { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.piede__link a, .piede a { color: var(--testo); }
.piede__fondo { padding-block: 24px 32px; margin-top: 24px; border-top: 1px solid var(--linea); font-size: .85rem; }
.piede__fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.piede__credito { color: var(--testo-2); }
.piede__credito a { text-decoration: underline; text-underline-offset: 2px; }
.tema-bottone { background: none; border: 0; padding: 0; color: var(--testo); text-decoration: underline; cursor: pointer; font-size: inherit; }
@media (max-width: 760px) { .piede__griglia { grid-template-columns: 1fr; } }

/* ---------- pagine secondarie */
.pagina-stretta { max-width: 780px; padding-block: 48px 80px; min-height: 60vh; }
.testo-lungo h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); }
.testo-lungo h2 { font-size: 1.6rem; margin-top: 1.6em; }
.testo-lungo li { margin-bottom: .5em; }
.stato { text-align: center; }
.stato h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); }
.stato__icona { width: 72px; height: 72px; margin: 12px auto 16px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ulivo) 16%, transparent); color: var(--ulivo); }
.stato__icona:empty { display: none; }
.stato__icona .icona { width: 36px; height: 36px; }
.stato__icona--attesa { background: color-mix(in srgb, var(--oro) 16%, transparent); color: var(--oro); }
.stato__icona--attesa .icona { animation: gira 1.4s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.stato__dati { text-align: left; max-width: 460px; margin: 24px auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 8px 20px; }
.stato__dati > div:last-child { border-bottom: 0; }
.stato__checkin { color: var(--testo-2); max-width: 52ch; margin-inline: auto; }
.stato__azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }

/* ---------- recensioni lunghe: si accorciano, con "Leggi tutta" */
.recensione--lunga:not(.aperta) blockquote p { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.recensione__leggi { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--azione); font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.recensione.aperta .recensione__leggi { display: none; }

/* Il carattere serif ha le cifre "all'antica": nei titoli e nei numeri usiamo quelle allineate.
   (Va ripetuto qui perché la proprietà abbreviata "font" le azzera.) */
h1, h2, h3, .logo, .fatti strong, .punteggi strong, .faq summary, .recensione__titolo, .piede__nome, .cal-testa h2 { font-variant-numeric: lining-nums; }

/* ---------- versione dimostrativa */
.fascia-demo { position: fixed; inset: auto 0 0; z-index: 60; margin: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: #1f3566; color: #eef2fb; font-size: .86rem; text-align: center; box-shadow: 0 -2px 12px rgba(0, 0, 0, .18); }
.fascia-demo strong { font-weight: 600; }
body.con-fascia-demo { padding-bottom: 44px; }

@media print {
  .testata, .piede, .stato__azioni { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- movimento: comparse, passaggi e piccoli riscontri.
   Solo trasparenza e spostamento (niente che cambi l'impaginazione); con "riduci movimento" tutto resta fermo.
   Fenisia: tempi più brevi e netti, contemporanei ma morbidi. I valori --mv-* li legge anche sito.js. */
:root { --mv-durata: 600; --mv-passo: 65; --mv-distanza: 12; --mv-curva: cubic-bezier(.2, .8, .2, 1); --mv-zoom: 1.035; --mv-zoom-durata: 1600ms; --mv-parallasse: 7%; --mv-zoom-galleria: .7s; --mv-pagina: .28s; }
/* elementi che aspettano di comparire (li prepara sito.js; in stampa e con "riduci movimento" restano visibili) */
@media screen and (prefers-reduced-motion: no-preference) { .comparsa { opacity: 0; } }

@keyframes mv-sale { from { opacity: 0; transform: translate3d(0, calc(var(--mv-distanza) * 1px), 0); } }
@keyframes mv-appare { from { opacity: 0; } }
@keyframes mv-cresce { from { opacity: 0; transform: scale(var(--mv-da, .97)); } }
@keyframes mv-assesta { from { transform: scale(var(--mv-zoom)); } }
@keyframes mv-parallasse { to { transform: translate3d(0, var(--mv-parallasse), 0); } }

/* la foto d'apertura non esce dal suo riquadro mentre si assesta */
.eroe__foto { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* apertura: la foto si assesta una volta sola (è già visibile: non ritarda il caricamento), i testi salgono in sequenza */
  .eroe__img { animation: mv-assesta var(--mv-zoom-durata) cubic-bezier(.25, .6, .3, 1) both; }
  .eroe__testo > * { animation: mv-sale calc(var(--mv-durata) * 1ms) var(--mv-curva) both; }
  .eroe__testo > :nth-child(2) { animation-delay: calc(var(--mv-passo) * 1ms); }
  .eroe__testo > :nth-child(3) { animation-delay: calc(var(--mv-passo) * 2ms); }
  .eroe__testo > :nth-child(4) { animation-delay: calc(var(--mv-passo) * 3ms); }
  .eroe__testo > :nth-child(5) { animation-delay: calc(var(--mv-passo) * 4ms); }
  .fatti { animation: mv-sale calc(var(--mv-durata) * 1ms) var(--mv-curva) calc(var(--mv-passo) * 4ms) both; }

  /* scorrendo, la foto d'apertura va un po' più piano della pagina (solo dove il browser lo fa senza fatica) */
  @supports (animation-timeline: view()) {
    .eroe { overflow: clip; view-timeline: --mv-eroe block; view-timeline-inset: 0; } /* inset 0: senza, conterebbe lo scroll-padding della testata e la foto partirebbe già spostata */
    .eroe__foto { animation-name: mv-parallasse; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --mv-eroe; animation-range: exit 0% exit 100%; }
  }

  /* menu su telefono e tablet: si apre e si chiude sfumando, le voci arrivano in cascata */
  @media (max-width: 1080px) {
    .menu { opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity .3s var(--mv-curva), transform .3s var(--mv-curva), display .3s allow-discrete; }
    .menu.aperto { opacity: 1; transform: none; }
    @starting-style { .menu.aperto { opacity: 0; transform: translate3d(0, -6px, 0); } }
    .menu.aperto li { --mv-distanza: 6; animation: mv-sale .5s var(--mv-curva) both; }
    .menu.aperto li:nth-child(2) { animation-delay: 30ms; }
    .menu.aperto li:nth-child(3) { animation-delay: 60ms; }
    .menu.aperto li:nth-child(4) { animation-delay: 90ms; }
    .menu.aperto li:nth-child(5) { animation-delay: 120ms; }
    .menu.aperto li:nth-child(6) { animation-delay: 150ms; }
  }
  .lingue[open] .lingue__elenco { --mv-distanza: -4; animation: mv-sale .22s var(--mv-curva) both; }

  /* foto a tutto schermo */
  .lightbox[open], .lightbox[open]::backdrop { animation: mv-appare .3s ease-out both; }
  .lightbox[open] .lightbox__figura { --mv-da: .98; animation: mv-cresce .45s var(--mv-curva) both; }

  /* richiesta di preventivo: ogni passaggio (calendario, esito, altra casa, dati) compare invece di scattare */
  .calendario-date:not([hidden]) { --mv-distanza: -6; animation: mv-sale .35s var(--mv-curva) both; }
  .esito:not([hidden]), .altra-casa:not([hidden]), .richiesta__modulo:not([hidden]) { --mv-distanza: 10; animation: mv-sale .5s var(--mv-curva) both; }
  .altra-casa:not([hidden]) { animation-delay: .12s; }
  .richiesta__modulo:not([hidden]) { animation-delay: .15s; }
  .modulo__errore:not([hidden]), .modulo__ok:not([hidden]) { animation: mv-appare .25s ease-out both; }

  /* domande frequenti ed elenco completo delle recensioni */
  .faq details[open] > p { --mv-distanza: 6; animation: mv-sale .45s var(--mv-curva) both; }
  .recensioni-tutte:not([hidden]) > .schede-cat { --mv-distanza: 8; animation: mv-sale .45s var(--mv-curva) both; }

  /* pagina della prenotazione: l'icona dello stato cresce appena (senza rimbalzi), poi dati e pulsanti */
  .stato__icona:not(:empty) { --mv-da: .9; animation: mv-cresce .55s var(--mv-curva) both; }
  .stato__dati:not([hidden]), .stato__extra:not([hidden]), .stato__checkin:not([hidden]), .stato__azioni:not(:empty) { --mv-distanza: 10; animation: mv-sale .55s var(--mv-curva) .1s both; }
  .stato__azioni:not(:empty) { animation-delay: .2s; }

  /* passando da una pagina all'altra (lingue, privacy, prenotazione): dissolvenza invece del lampo bianco */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--mv-pagina); }
}

/* icona del menu: le tre linee diventano una X quando il menu è aperto (solo se sono tre tratti separati, vedi ICONE.menu in build.mjs) */
.menu-apri .icona path { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--mv-curva), opacity .2s ease; }
.menu-apri[aria-expanded="true"] .icona path:nth-child(1):not(:only-child) { transform: translateY(5px) rotate(45deg); }
.menu-apri[aria-expanded="true"] .icona path:nth-child(2) { opacity: 0; }
.menu-apri[aria-expanded="true"] .icona path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* piccoli riscontri al passaggio e al tocco: colori che cambiano morbidi, la freccia che accompagna verso la prenotazione */
.bottone { transition: background-color .25s, border-color .25s, color .25s, transform .2s; }
.bottone .icona { transition: transform .3s var(--mv-curva); }
.menu a, .chip, .lingua, .lingue__elenco a, .recapiti a, .lightbox__bottone, .calendario-date__nav, .campo-data--scelta, .modulo input, .modulo textarea { transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.galleria__apri img { transition: transform var(--mv-zoom-galleria) var(--mv-curva); }
.galleria__apri:focus-visible img { transform: scale(1.04); }
@media (hover: hover) {
  .eroe__azioni .bottone:hover .icona, .altra-casa .bottone:hover .icona { transform: translate3d(3px, 0, 0); }
}
/* sui telefoni il "passaggio del mouse" resterebbe attaccato dopo il tocco: niente zoom */
@media (hover: none) { .galleria__apri:hover img { transform: none; } }

/* =====================================================================
   NUOVA VESTE (Taste Skill + Impeccable): regole che sostituiscono quelle sopra.
   ===================================================================== */

/* titoli: un filo più grandi e stretti, testo più leggibile */
h2 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); letter-spacing: -.012em; line-height: 1.05; max-width: 22ch; }
.kicker { font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; color: var(--azione); }
.sezione { padding-block: clamp(64px, 9vw, 128px); }
p { max-width: 68ch; }

/* apertura: velatura più neutra (oliva, non marrone) e titolo più deciso */
.eroe { min-height: min(100dvh, 900px); }
.eroe__foto::after { background: linear-gradient(180deg, rgba(10, 14, 24, .45) 0%, rgba(10, 14, 24, 0) 24%), linear-gradient(90deg, rgba(10, 14, 24, .6) 0%, rgba(10, 14, 24, .2) 50%, rgba(10, 14, 24, 0) 75%), linear-gradient(180deg, rgba(10, 14, 24, 0) 50%, rgba(10, 14, 24, .7) 100%); }
.eroe__testo { padding-block: 96px 96px; }
.eroe h1 { font-size: clamp(3.4rem, 2rem + 6.4vw, 7rem); line-height: 1.02; padding-bottom: .06em; letter-spacing: -.02em; }

.eroe__azioni { margin-bottom: 0; }
.bottone--vetro { background: rgba(10, 14, 24, .28); border-color: rgba(255, 255, 255, .75); }

/* la striscia dei numeri: sei voci, il voto per primo, senza ombre a "scheda" */
.fatti { grid-template-columns: 1.4fr repeat(5, 1fr); margin-top: -48px; background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden; }
.fatti li { box-shadow: none; background: none; border-radius: 0 !important; padding: 22px 14px; }
.fatti li + li { border-left: 1px solid var(--linea); }
.fatti strong { color: var(--testo); font-size: 2rem; }
.fatti__voto { background: var(--azione) !important; }
.fatti__voto a { color: var(--su-azione); text-decoration: none; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.fatti__voto strong { color: var(--su-azione) !important; display: inline-flex; align-items: center; gap: 6px; }
.fatti__voto .stellina { width: 20px; height: 20px; color: #ffd68a; }
.fatti__voto span { color: color-mix(in srgb, var(--su-azione) 85%, transparent) !important; }
@media (max-width: 860px) {
  .fatti { grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--superficie); width: calc(100% - 2 * var(--gutter)); margin-top: -32px; }
  .fatti li:last-child { grid-column: auto; }
  .fatti li + li { border-left: 0; }
  .fatti li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--linea); }
  .fatti li:nth-child(n + 4) { border-top: 1px solid var(--linea); }
  .fatti strong { font-size: 1.6rem; }
}

/* storia: foto più grande, la piccola sporge meno */
@media (min-width: 861px) { .storia { grid-template-columns: 1fr 1.15fr; } }
.storia__piccola { border-color: var(--sfondo); }

/* vivere la masseria: mosaico con foto invece di sei schede uguali */
.schede--mosaico { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(180px, auto); gap: 12px; margin-top: 40px; }
.schede--mosaico .scheda { position: relative; overflow: hidden; border: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; background: var(--superficie); }
.schede--mosaico .scheda--1 { grid-column: 1 / 8; grid-row: span 2; min-height: 460px; }
.schede--mosaico .scheda--2 { grid-column: 8 / 13; }
.schede--mosaico .scheda--3 { grid-column: 8 / 13; background: var(--testo); color: var(--sfondo); }
.schede--mosaico .scheda--4 { grid-column: 1 / 6; min-height: 280px; }
.schede--mosaico .scheda--5 { grid-column: 6 / 10; }
.schede--mosaico .scheda--6 { grid-column: 10 / 13; background: color-mix(in srgb, var(--azione) 10%, var(--superficie)); }
.scheda--3 h3, .scheda--3 p { color: inherit !important; }
.scheda--3 .scheda__icona { color: inherit; opacity: .85; }
.scheda__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1.2s var(--mv-curva); }
.scheda--foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 12, 22, .05) 20%, rgba(8, 12, 22, .55) 55%, rgba(8, 12, 22, .88) 100%); }
.scheda--foto > :not(img) { position: relative; z-index: 2; color: #fbfbf7; }
.scheda--foto p { color: rgba(251, 251, 247, .88) !important; max-width: 52ch; }
.scheda--foto .scheda__icona { display: none; }
.schede--mosaico h3 { font-size: 1.6rem; margin-top: 10px; }
.scheda--1 h3 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); }
@media (hover: hover) { .scheda--foto:hover .scheda__foto { transform: scale(1.04); } }
@media (max-width: 860px) {
  .schede--mosaico { grid-template-columns: 1fr 1fr; }
  .schede--mosaico .scheda { grid-column: auto !important; grid-row: auto !important; min-height: 0; }
  .schede--mosaico .scheda--foto { grid-column: 1 / -1 !important; min-height: 320px; }
}
@media (max-width: 520px) { .schede--mosaico { grid-template-columns: 1fr; } }

/* sezioni che erano scure: stessa famiglia di colori, solo più tinte (il sito non "cambia tema" a metà) */
.sezione--scura { background: var(--scuro); color: var(--su-scuro); }
.sezione--scura .kicker { color: var(--azione); }
.sezione--scura a { color: var(--azione); }
.accoglienza p { color: var(--su-scuro-2); }
.citazione { border-left: 0; padding: 0; position: relative; }
.citazione::before { content: "“"; display: block; font: 700 6rem/0.6 var(--serif); color: var(--azione); margin-bottom: 8px; }
.citazione p { color: var(--su-scuro); }
.sezione--scura .scheda { background: var(--superficie); border-color: transparent; }
.sezione--scura .scheda h3 { color: var(--testo); }
.sezione--scura .scheda p { color: var(--testo-2); }
.sezione--scura .scheda__icona { color: var(--azione); }
.sezione--scura .bottone--contorno { color: var(--azione); border-color: var(--azione); }
.modulo--scuro input:not([type="checkbox"]), .modulo--scuro textarea { background: var(--superficie); border-color: var(--linea); color: var(--testo); }
.modulo--scuro .modulo__errore { color: var(--rosso); }
.modulo--scuro .modulo__ok { color: var(--ulivo); }
.recapiti a { border-color: var(--linea); color: var(--testo); background: var(--superficie); }
.recapiti a:hover { background: color-mix(in srgb, var(--azione) 6%, var(--superficie)); color: var(--testo); }
.recapiti .icona { color: var(--azione); }
.recapiti small { color: var(--testo-2); }
.contatti p { color: var(--su-scuro-2); }

/* camere e distanze: riquadri invece di righe con una linea sotto ognuna */
.letti, .distanze { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.letti > div, .distanze > div { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 14px 16px; border: 0; border-radius: var(--raggio-piccolo); background: var(--superficie); }
.sezione--calce .distanze > div { background: var(--sfondo); }
.letti dd, .distanze dd { text-align: left; font-size: .95rem; }
.letti > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.distanze dd { font: 600 1.35rem/1.2 var(--serif); color: var(--testo); font-variant-numeric: lining-nums; order: -1; }
.distanze dt { font-weight: 500; color: var(--testo-2); font-size: .92rem; }
.camere__foto img { border-radius: var(--raggio); }

/* servizi: niente pallini decorativi */
.servizi h3 { border-bottom: 0; padding-bottom: 0; font-size: 1.45rem; }
.servizi li { padding: 5px 0; }
.servizi li::before { display: none; }

/* recensioni: griglia ordinata, estratti brevi */
.recensioni { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: start; }
.recensione { margin: 0; border: 0; }
.recensione--lunga:not(.aperta) blockquote p { -webkit-line-clamp: 5; }
.punteggi li { border: 0; background: var(--calce); }

/* informazioni: due colonne senza righe divisorie */
.info__elenco { display: grid; grid-template-columns: 1fr; gap: 0; }
.info__elenco > div { border-bottom: 0; padding: 10px 0; }
.faq details { border-bottom-color: var(--linea); }
.faq summary::after { color: var(--azione); }

/* richiesta: il riquadro respira di più */
.richiesta { border: 0; }
.piede { background: var(--calce); }

/* ---- rifinitura (Impeccable polish) */
.centrato { max-width: none; }
p.nota.centrato { margin-inline: auto; max-width: 70ch; }
.schede--mosaico { grid-auto-rows: minmax(240px, auto); }
.schede--mosaico .scheda--1 { min-height: 520px; }
/* su richiesta: tre voci affiancate senza riquadri, separate da una linea sottile */
.schede--tre { gap: 0; margin-top: 36px; }
.schede--tre .scheda { background: none !important; border: 0; border-radius: 0; padding: 4px 28px 4px 0; }
.schede--tre .scheda + .scheda { border-left: 1px solid color-mix(in srgb, var(--su-scuro) 18%, transparent); padding-left: 28px; }
@media (max-width: 860px) { .schede--tre .scheda + .scheda { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--su-scuro) 18%, transparent); padding: 22px 0 0; margin-top: 22px; } }
/* informazioni: etichetta e valore in colonna fissa, allineati a sinistra */
.info__elenco > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; }
.info__elenco dd { text-align: left; }
@media (max-width: 560px) { .info__elenco > div { grid-template-columns: 1fr; gap: 2px; } }
.info h3 { margin-top: 0; }
.info { align-items: start; }
.info > div:last-child { background: var(--superficie); border-radius: var(--raggio); padding: 28px; }
/* pagina dell'ospite: niente bordo colorato laterale */
.stato__messaggio { border-left: 0; border-radius: 12px; background: color-mix(in srgb, var(--ulivo) 8%, var(--superficie)); }
/* superfici del browser nei colori del sito */
::selection { background: color-mix(in srgb, var(--azione) 22%, transparent); color: var(--testo); }
input, textarea { caret-color: var(--azione); }
:root { accent-color: var(--azione); }
.fatti strong, .punteggi strong, .distanze dd { font-variant-numeric: lining-nums tabular-nums; }
.eroe__testo { padding-top: 120px; }

/* Fenisia: titoli senza grazie, più compatti; il nome in apertura senza corsivo finto */
h1, h2, h3 { font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.08; }
h3 { font-size: 1.3rem; letter-spacing: -.015em; }
h1 em, h2 em, .logo em { font-style: normal; font-weight: 400; }
.eroe h1 { font-size: clamp(3rem, 1.8rem + 5.6vw, 6.2rem); letter-spacing: -.04em; font-weight: 700; }
.eroe h1 em { font-weight: 400; }
.logo { font-size: 1.2rem; letter-spacing: -.02em; }
.schede--mosaico h3 { font-size: 1.35rem; }
.scheda--1 h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); }
.citazione p { font-style: normal; font-weight: 400; letter-spacing: -.015em; }
.fatti strong, .punteggi strong { font-weight: 600; letter-spacing: -.02em; }
.faq summary { font-weight: 500; font-size: 1.15rem; letter-spacing: -.01em; }
.distanze dd { font-weight: 600; letter-spacing: -.01em; }

/* ---- correzione: la Sala benessere resta l'unica fascia "notte" della pagina (scelta voluta), con i SUOI colori del testo.
   Prima ereditava il testo scuro delle altre sezioni e su blu notte non si leggeva. */
.sezione--notte { --su-scuro: #eef1f6; --su-scuro-2: #c3cbd8; background: #131a26; color: var(--su-scuro); }
.sezione--notte a:not(.bottone) { color: var(--su-scuro); }
.sezione--notte h2, .sezione--notte h3 { color: var(--su-scuro); }

/* ---- revisione 2 (controllo contrasto su ogni testo) */
/* testo bianco sopra le foto: sotto c'è sempre un fondo scuro, anche prima che la foto si carichi (telefono lento, foto mancante) */
.schede--mosaico .scheda--foto, .eroe, .mappa__segnaposto { background-color: #131a26; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .schede--mosaico .scheda--foto, :root:not([data-theme="light"]) .eroe, :root:not([data-theme="light"]) .mappa__segnaposto { background-color: #0a0f18; } }
:root[data-theme="dark"] .schede--mosaico .scheda--foto, :root[data-theme="dark"] .eroe, :root[data-theme="dark"] .mappa__segnaposto { background-color: #0a0f18; }
/* sigle delle lingue nel menu: piene, non sbiadite (prima 4,1:1 e 2,7:1) */
.lingue__codice { opacity: 1; color: var(--testo-2); }
.lingue__elenco a[aria-current] .lingue__codice { color: inherit; }
/* velature più decise dove il testo bianco sta sopra parti chiare delle foto (lettini, muri a calce, acqua) */
.eroe__foto::after { background: linear-gradient(180deg, rgba(10, 14, 24, .5) 0%, rgba(10, 14, 24, 0) 22%), linear-gradient(90deg, rgba(10, 14, 24, .78) 0%, rgba(10, 14, 24, .5) 45%, rgba(10, 14, 24, .08) 80%), linear-gradient(180deg, rgba(10, 14, 24, 0) 35%, rgba(10, 14, 24, .82) 100%); }
@media (max-width: 700px) { .eroe__foto::after { background: linear-gradient(180deg, rgba(10, 14, 24, .55) 0%, rgba(10, 14, 24, .1) 22%, rgba(10, 14, 24, .55) 48%, rgba(10, 14, 24, .9) 100%); } }
.eroe h1, .eroe__sotto { text-shadow: 0 1px 2px rgba(10, 14, 24, .45), 0 2px 24px rgba(10, 14, 24, .55); }
.bottone--vetro { background: rgba(10, 14, 24, .45); }
.scheda--foto::after { background: linear-gradient(180deg, rgba(10, 14, 24, .12) 0%, rgba(10, 14, 24, .62) 42%, rgba(10, 14, 24, .92) 100%); }
/* pulsanti pieni nelle ex sezioni scure (modulo contatti): blu del sito, non più oro */
.sezione--scura .bottone:not(.bottone--contorno) { background: var(--azione); border-color: var(--azione); color: var(--su-azione); }
.sezione--scura .bottone:not(.bottone--contorno):hover { background: var(--azione-scuro); border-color: var(--azione-scuro); color: var(--su-azione); }
/* il carattere dei titoli non ha il corsivo: niente corsivo "finto" nel nome in fondo alla pagina */
.piede__nome em { font-style: normal; font-weight: 400; }

/* ---- l'altra casa (Masseria ↔ Fenisia), nuova veste: riquadro con la foto a filo, testo e quattro dati in piccoli riquadri */
.altra-sezione .altra-sezione__griglia { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--larghezza) - 2 * var(--gutter)); padding: 0; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--calce); border-radius: var(--raggio); overflow: hidden; }
.altra-sezione__foto { position: relative; min-height: 100%; background-color: var(--scuro); }
.altra-sezione__img--1 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.altra-sezione__img--2 { position: absolute; left: 20px; bottom: 20px; width: 36%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio-piccolo); border: 4px solid var(--calce); box-shadow: var(--ombra); }
.altra-sezione__testo { padding: clamp(28px, 4.5vw, 60px); }
.altra-sezione__testo h2 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.7rem); max-width: 20ch; }
.altra-sezione__testo p { color: var(--testo-2); }
.altra-sezione__dati { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 24px 0 28px; padding: 0; }
.altra-sezione__dati div { background: var(--sfondo); border-radius: var(--raggio-piccolo); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.altra-sezione__dati dt { font-size: .86rem; color: var(--testo-2); }
.altra-sezione__dati dd { margin: 0; font: 600 1.08rem/1.3 var(--serif); color: var(--testo); font-variant-numeric: lining-nums; }
.altra-sezione__azione { margin: 0; }
.altra-sezione__azione .bottone { color: var(--su-azione); }
@media (min-width: 861px) { .altra-sezione__foto { min-height: 520px; } }
@media (max-width: 860px) {
  .altra-sezione .altra-sezione__griglia { grid-template-columns: 1fr; }
  .altra-sezione__foto { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 480px) { .altra-sezione__dati { grid-template-columns: 1fr; } .altra-sezione__img--2 { width: 44%; left: 14px; bottom: 14px; } }
/* foto della sezione di collegamento: MAI tagliate. Una sotto l'altra, ognuna con le sue proporzioni (aspect-ratio nell'HTML). */
.altra-sezione__foto { position: static; align-self: center; min-height: 0 !important; aspect-ratio: auto !important; background: none; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.altra-sezione__img--1, .altra-sezione__img--2 { position: static; inset: auto; left: auto; bottom: auto; width: 100%; height: auto; object-fit: cover; border: 0; box-shadow: none; border-radius: var(--raggio-piccolo); }
@media (max-width: 860px) { .altra-sezione__foto { padding: 10px 10px 0; } }

/* ---- revisione foto (controllo automatico: quanta parte di ogni foto si vede) */
/* mosaico su tablet e telefono: la foto sta sopra, intera, e il testo sotto (prima: testo sopra una foto ritagliata in un riquadro alto) */
@media (max-width: 1100px) {
  .schede--mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .schede--mosaico .scheda, .schede--mosaico .scheda--foto { grid-column: auto !important; grid-row: auto !important; min-height: 0 !important; }
  .schede--mosaico .scheda--foto { padding: 0 0 24px; justify-content: flex-start; }
  .schede--mosaico .scheda--foto .scheda__foto { position: static; width: 100%; height: auto; margin-bottom: 18px; }
  .schede--mosaico .scheda--foto::after { display: none; }
  .schede--mosaico .scheda--foto > :not(img) { padding-inline: 24px; }
  .schede--mosaico .scheda--foto h3 { margin-top: 0; }
}
@media (max-width: 600px) { .schede--mosaico { grid-template-columns: 1fr; } }
/* camere: ogni foto con le sue proporzioni (ci sono foto orizzontali e verticali), in due colonne, senza ritagli */
.camere__foto { display: block; columns: 2; column-gap: 10px; }
.camere__foto img { aspect-ratio: auto !important; height: auto; object-fit: fill; margin: 0 0 10px !important; break-inside: avoid; }

/* ---- 19/10/2026, verifica dei contrasti (richiesta di Pierangelo): testo a colore pieno nel riquadro delle recensioni e ombra nel segnaposto della mappa */
.fatti__voto span { color: var(--su-azione) !important; }
.mappa__velo p { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
/* foto dei riquadri chiare in alto, velo solo dove c'è il testo (come alla Masseria) */
.scheda--foto::after { background: linear-gradient(180deg, rgba(10, 14, 24, 0) 0%, rgba(10, 14, 24, .2) 30%, rgba(10, 14, 24, .66) 62%, rgba(10, 14, 24, .88) 100%); }
.scheda--foto h3, .scheda--foto p { text-shadow: 0 1px 2px rgba(6, 9, 16, .55), 0 0 18px rgba(6, 9, 16, .45); }

/* ---- 20/10/2026, Pierangelo: foto più luminose, come alla Masseria (l'apertura sembrava «quasi notte», la piscina «opaca»).
   Il velo resta solo dietro i testi, le foto hanno una spinta di luce e colore; i testi dell'apertura stanno su un riquadro «vetro» scuro. */
/* apertura: la piscina di giorno (cielo schiarito nel file della foto), solo una leggera spinta di colore */
.eroe__img { filter: saturate(1.08) contrast(1.02); }
.eroe__foto::after { background: linear-gradient(180deg, rgba(10, 14, 24, .7) 0%, rgba(10, 14, 24, .5) 6%, rgba(10, 14, 24, 0) 13%), linear-gradient(180deg, rgba(10, 14, 24, 0) 70%, rgba(10, 14, 24, .25) 100%); }
.eroe h1, .eroe__sotto { text-shadow: 0 1px 3px rgba(6, 9, 16, .7), 0 2px 22px rgba(6, 9, 16, .6); }
.eroe__sotto { color: #fff; }
.eroe__testo { background: rgba(10, 14, 24, .54); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 20px; padding: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 38px); width: fit-content; max-width: min(1000px, calc(100% - 2 * var(--gutter))); box-sizing: border-box; margin-left: max(var(--gutter), calc((100% - var(--larghezza)) / 2 + var(--gutter))); margin-right: auto; margin-bottom: 76px; }
@media (max-width: 700px) {
  .eroe__foto::after { background: linear-gradient(180deg, rgba(10, 14, 24, .66) 0%, rgba(10, 14, 24, .44) 7%, rgba(10, 14, 24, 0) 14%); }
  .eroe__testo { background: rgba(10, 14, 24, .58); margin-inline: var(--gutter); max-width: none; width: auto; margin-bottom: 64px; }
}
/* riquadri con foto: velo solo nella parte bassa, dove c'è il testo; foto più accese */
.scheda__foto { filter: saturate(1.18) brightness(1.1) contrast(1.03); }
.scheda--foto::after { background: linear-gradient(180deg, rgba(8, 12, 22, 0) 0%, rgba(8, 12, 22, 0) 42%, rgba(8, 12, 22, .5) 66%, rgba(8, 12, 22, .84) 100%); }
.scheda--foto h3, .scheda--foto p { text-shadow: 0 1px 2px rgba(6, 9, 16, .7), 0 0 16px rgba(6, 9, 16, .55); }
.scheda--foto p { color: #fbfbf7 !important; }
/* «Pranzi all'aperto»: riquadro più alto e testo un po' più piccolo, così la foto si vede sopra la descrizione */
.schede--mosaico .scheda--2 { min-height: 340px; }
.schede--mosaico .scheda--2 p { font-size: .9rem; line-height: 1.5; }
.schede--mosaico .scheda--2 h3 { font-size: 1.4rem; }
@media (max-width: 860px) { .schede--mosaico .scheda--foto { min-height: 320px; } }
/* apertura con la foto di giorno: velo in alto più corto e leggero, così il cielo resta azzurro (il menu resta leggibile per l'ombra del testo) */
.eroe__foto::after { background: linear-gradient(180deg, rgba(10, 14, 24, .34) 0%, rgba(10, 14, 24, .12) 5%, rgba(10, 14, 24, 0) 8%), linear-gradient(180deg, rgba(10, 14, 24, 0) 70%, rgba(10, 14, 24, .25) 100%); }
@media (max-width: 700px) { .eroe__foto::after { background: linear-gradient(180deg, rgba(10, 14, 24, .34) 0%, rgba(10, 14, 24, .12) 6%, rgba(10, 14, 24, 0) 10%); } }
.testata:not(.testata--piena):not(.testata--semplice) .testata__barra { text-shadow: 0 1px 3px rgba(6, 9, 16, .75), 0 0 14px rgba(6, 9, 16, .5); }