/* Correzioni alla demo colombaia-v3 (build di Lucia), 06/10/2026.
   Ogni blocco dice cosa corregge; nei sorgenti va riportato nel componente indicato. */

/* 1. Mappa: la rotella sopra l'iframe zoomava la mappa invece di scorrere la pagina.
      L'iframe non riceve il mouse finché non ci si clicca sopra (classe .map-on, da correzioni.js). */
:has(> iframe[src*="openstreetmap"]) { position: relative; cursor: pointer; }
:has(> iframe[src*="openstreetmap"]) > iframe { pointer-events: none; }
:has(> iframe[src*="openstreetmap"]).map-on > iframe { pointer-events: auto; }
:has(> iframe[src*="openstreetmap"])::after {
  content: "Clicca per usare la mappa";
  position: absolute; left: 50%; bottom: 36px; translate: -50% 0;
  padding: .55em 1.1em; border-radius: 999px;
  background: rgb(39 39 38 / .78); color: #fff;
  font: 500 .72rem/1 var(--font-sans, sans-serif); letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none; transition: opacity .3s;
}
:has(> iframe[src*="openstreetmap"]).map-on::after { opacity: 0; }

/* 2. Pannello di prenotazione chiuso: la sua ombra (shadow-2xl) restava visibile
      come fascia grigia sul bordo destro di tutte le pagine. */
[aria-labelledby="booking-drawer-title"].translate-x-full { box-shadow: none; }

/* 3. "Dove siamo": la forma rosa dietro al bottone trasparente "Prenota ora" lo rendeva illeggibile. */
section:has(iframe[src*="openstreetmap"]) .btn-pill:not(:hover) { background-color: var(--color-paper, #fbf9f7); }

/* 4. Footer: "Adults Only" in apice andava a capo a metà; diventa una riga sotto il nome. */
footer p.display > sup { display: block; margin-top: .45em; font-size: .72rem; line-height: 1; vertical-align: baseline; }

/* 5. Footer: la maschera .lineart-fade sfumava tutto il blocco (testi compresi) fino al 25%:
      la riga del copyright era quasi invisibile. */
footer .lineart-fade { -webkit-mask-image: none; mask-image: none; }

/* PROVA "stile rivista": cornice bianca sulle foto che si sovrappongono a un'altra foto.
   Sono le .mask-img dentro un contenitore assoluto (collage di home, ristorante, servizi, prodotti, bike). */
.absolute:not(.inset-0) > .mask-img.relative {
  border: 10px solid #fff;
  box-shadow: 0 28px 50px -28px rgb(39 39 38 / .45);
}
@media (max-width: 767px) {
  .absolute:not(.inset-0) > .mask-img.relative { border-width: 6px; }
}

/* 6. Striscia orizzontale di foto in home: niente piu movimento legato allo scorrimento della pagina
      (con Locomotive le ultime foto non si vedevano mai). Diventa scorrevole a mano: frecce (correzioni.js),
      trascinamento su telefono, scorrimento laterale del trackpad. Gli spostamenti vecchi sono spenti qui. */
section:has(> .strip-scroll) { position: relative; }
.strip-scroll {
  transform: none !important;
  width: auto !important; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: 20vw;
  scrollbar-width: none; padding-right: 40px;
}
.strip-scroll::-webkit-scrollbar { display: none; }
.strip-scroll > * { scroll-snap-align: start; }
@media (max-width: 767px) { .strip-scroll { scroll-padding-left: 24px; padding-left: 24px !important; } }
.strip-nav { display: flex; justify-content: flex-end; gap: 12px; max-width: 1500px; margin: 24px auto 0; padding: 0 40px; }
@media (max-width: 767px) { .strip-nav { padding: 0 24px; margin-top: 16px; } }
.strip-nav button {
  width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--color-ink, #272726); color: var(--color-ink, #272726); background: transparent;
  cursor: pointer; transition: background-color .25s, color .25s, opacity .25s;
}
.strip-nav button:hover:not(:disabled) { background: var(--color-ink, #272726); color: #fff; }
.strip-nav button:disabled { opacity: .25; cursor: default; }
.strip-nav button:focus-visible { outline: 2px solid var(--color-terra, #b9714b); outline-offset: 3px; }

/* PROVA 7. Il corsivo Cherolina (classe .script) sopra i titoli si legge male: diventa un occhiello
   in Euclid maiuscolo spaziato, lo stesso stile di "Autonomia e comfort" nella pagina alloggi.
   Il corsivo resta solo nel logo. */
.script {
  font-family: var(--font-display) !important;
  font-size: .8rem !important;
  line-height: 1.4 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-bottom: .9rem !important;
}
/* hero delle pagine interne: era un corsivo grande appeso sotto il titolo */
.script.hero-fade { font-size: .85rem !important; }
/* numeri della scritta che scorre (01, 02...): restano grandi ma in Euclid sottile */
.script.align-middle { font-size: 1.6rem !important; font-weight: 300 !important; letter-spacing: .05em !important; margin-bottom: 0 !important; }
/* fascia BIO: era un corsivo bianco molto grande */
.script.text-white { font-size: 1rem !important; }
/* preloader "Benvenuti in Maremma" */
.preloader .script { font-size: 1rem !important; }
/* fascia BIO: l'occhiello stava a cavallo della parola grande "BIO" (-mt-2) */
.script.-mt-2 { margin-top: 1.4rem !important; }

/* PROVA 8. Pagina Gallery (galleria.js): griglia a colonne in stile rivista, stampe con cornice bianca. */
.gal { max-width: 1500px; margin: 0 auto; padding: 11rem 40px 7rem; }
@media (max-width: 767px) { .gal { padding: 8rem 20px 5rem; } }
.gal-head { text-align: center; }
.gal-title { font-size: clamp(2.5rem, 7vw, 5rem); line-height: .9; color: var(--color-sage, #50707e); }
.gal-head .script { margin-top: 1.4rem !important; }
.gal-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.8rem; margin: 3.5rem auto 3rem; max-width: 1000px; }
.gal-filters button {
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-ink, #272726); opacity: .55; padding: .5rem 0; border-bottom: 1px solid transparent;
  background: none; cursor: pointer; transition: opacity .25s, border-color .25s;
}
.gal-filters button:hover { opacity: .9; }
.gal-filters button[aria-selected="true"] { opacity: 1; border-bottom-color: currentColor; }
.gal-grid { columns: 3 320px; column-gap: 28px; }
@media (max-width: 767px) { .gal-grid { columns: 2; column-gap: 12px; } }
.gal-item { break-inside: avoid; margin: 0 0 28px; opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease-out-expo, ease), transform .9s var(--ease-out-expo, ease); }
.gal-item.is-in { opacity: 1; transform: none; }
.gal-item[hidden] { display: none; }
@media (max-width: 767px) { .gal-item { margin-bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .gal-item { opacity: 1; transform: none; transition: none; } }
.gal-open { position: relative; display: block; width: 100%; padding: 8px; background: #fff; cursor: zoom-in;
  box-shadow: 0 22px 40px -28px rgb(39 39 38 / .45); }
@media (max-width: 767px) { .gal-open { padding: 4px; } }
.gal-open img, .gal-open video { display: block; width: 100%; height: auto; transition: filter .4s; }
.gal-open video { aspect-ratio: 9 / 16; object-fit: cover; }
.gal-open:hover img, .gal-open:hover video { filter: brightness(1.04) saturate(1.05); }
.gal-badge { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: .5em;
  padding: .55em 1em; border-radius: 999px; background: rgb(39 39 38 / .72); color: #fff;
  font-family: var(--font-display); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.gal-item figcaption { margin-top: .7rem; font-family: var(--font-display); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--color-ink-soft, #6b6b68); }
@media (max-width: 767px) { .gal-item figcaption { display: none; } .gal-badge { left: 10px; bottom: 10px; } }

.gal-box { position: fixed; inset: 0; z-index: 400; display: none; background: rgb(24 24 23 / .96); color: #fff; }
.gal-box.is-open { display: grid; grid-template-rows: 1fr auto; }
.gal-stage { display: grid; place-items: center; padding: 64px 80px 8px; min-height: 0; }
@media (max-width: 767px) { .gal-stage { padding: 64px 8px 8px; } }
.gal-stage img, .gal-stage video { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; animation: fadein .5s ease; }
.gal-stage iframe { width: min(100%, 1200px); aspect-ratio: 16 / 9; max-height: calc(100vh - 140px); border: 0; }
.gal-cap { text-align: center; padding: 14px 16px 22px; font-family: var(--font-display); font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.gal-box > button { position: absolute; width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center;
  color: #fff; background: rgb(255 255 255 / .1); cursor: pointer; transition: background .25s; }
.gal-box > button:hover { background: rgb(255 255 255 / .22); }
.gal-x { top: 16px; right: 16px; }
.gal-prev { left: 16px; top: 50%; translate: 0 -50%; }
.gal-next { right: 16px; top: 50%; translate: 0 -50%; }
@media (max-width: 767px) { .gal-prev, .gal-next { top: auto; bottom: 10px; translate: none; } }
/* didascalie tolte: erano dedotte dai nomi dei file e alcune non corrispondevano alla foto */
.gal-item figcaption { display: none; }
.gal-open img.is-yt { aspect-ratio: 16 / 9; object-fit: cover; }

/* PROVA 9. Gallerie fotografiche degli alloggi (alloggi.js). */
.all-gal { margin-top: 3.5rem; }
.all-gal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.all-gal-head .strip-nav { margin: 0; padding: 0; }
.all-gal-title { font-family: var(--font-display); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-ink, #272726); }
.all-gal-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 18px; }
.all-gal-row::-webkit-scrollbar { display: none; }
.all-gal-thumb { flex: 0 0 auto; width: 260px; padding: 5px; background: #fff; scroll-snap-align: start; cursor: zoom-in;
  box-shadow: 0 16px 28px -22px rgb(39 39 38 / .5); }
.all-gal-thumb img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: filter .3s; }
.all-gal-thumb:hover img { filter: brightness(1.06); }
.all-gal-thumb:focus-visible { outline: 2px solid var(--color-terra, #b9714b); outline-offset: 3px; }
@media (max-width: 767px) { .all-gal-thumb { width: 62vw; } .all-gal-head .strip-nav button { width: 44px; height: 44px; } }
.all-gal-zoom { cursor: zoom-in; }
.gal-box.is-single .gal-prev, .gal-box.is-single .gal-next { display: none; }

/* Visore: il sito nasconde il cursore normale (.has-cursor) e ne disegna uno suo a z-index 300;
   il visore sta sopra (400) e lo copriva, quindi non si vedeva nessun cursore. Dentro il visore torna quello normale. */
.has-cursor .gal-box, .has-cursor .gal-box * { cursor: auto; }
.has-cursor .gal-box button { cursor: pointer; }
.has-cursor .gal-box .gal-stage { cursor: zoom-out; }

/* 10. Sipario terracotta tra le pagine: tolto (Davide). Il ritardo di 650 ms e' tolto nel JS da applica.mjs. */
.page-curtain { display: none !important; }

/* 11. Animazioni ridotte a un solo effetto sobrio: il blocco sale di poco e compare.
   - titoli: prima entravano lettera per lettera ruotando; ora entra il titolo intero
   - foto: prima si aprivano a tendina da quattro direzioni diverse; ora compaiono con un leggero assestamento
   - blocchi di testo: prima entravano anche da sinistra, da destra o ingrandendosi; ora tutti dal basso */
.split-char { opacity: 1 !important; transform: none !important; transition: none !important; }
[data-scroll] .split, .hero-anim .split { display: inline-block; opacity: 0; transform: translateY(18px);
  transition: opacity 1s var(--ease-out-expo, ease), transform 1s var(--ease-out-expo, ease); }
.is-inview .split, [data-scroll].is-inview .split, .is-loaded .hero-anim .split { opacity: 1; transform: none; }

.mask-img, .mask-img.mask-left, .mask-img.mask-right, .mask-img.mask-down, .mask-img.mask-up {
  clip-path: none !important; opacity: 0; transition: opacity 1.2s var(--ease-out-expo, ease) !important; }
.mask-img.is-inview, .is-loaded .hero-anim .mask-img { opacity: 1; }
.mask-img .mask-img-inner { transform: scale(1.06); transition: transform 1.6s var(--ease-out-expo, ease) !important; }
.mask-img.is-inview .mask-img-inner, .is-loaded .hero-anim .mask-img .mask-img-inner { transform: scale(1); }

.reveal-left, .reveal-right, .reveal-scale { transform: translateY(24px); }
.reveal.is-inview { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-scroll] .split, .hero-anim .split, .mask-img { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* 12. Mobile: bottone fisso in basso "Verifica disponibilità" (correzioni.js punto 5). */
.mob-book { display: none; }
@media (max-width: 767px) {
  .mob-book { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgb(251 249 247 / .94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 -10px 24px -18px rgb(39 39 38 / .5);
    transition: transform .35s ease; }
  .mob-book button { width: 100%; padding: 15px 20px; border-radius: 999px; background: var(--color-gold, #d18d07); color: var(--color-ink, #272726);
    font-family: var(--font-display); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
  html.menu-open .mob-book, html.modal-open .mob-book { transform: translateY(110%); }
  footer { padding-bottom: 76px; }
}

/* 13. Footer, Utilities: tolte le voci senza pagina (Sostenibilità, Privacy policy, Cookie policy puntavano a "#"). */
footer a.link-line[href="#"]:not([data-consenso-apri]) { display: none; }
footer li:has(> a.link-line[href="#"]:not([data-consenso-apri])) { display: none; }

/* 14. Mobile: tolto "Prenota" dalla barra in alto (c'e' il bottone fisso in basso, punto 12).
       Il bottone resta nella pagina, nascosto: e' quello che il bottone in basso preme per aprire il pannello. */
@media (max-width: 767px) { header button[aria-haspopup="dialog"].btn-text { display: none !important; } }

/* 15. Pannello "Il tuo soggiorno" (prenotazione): colori allineati al resto del sito.
       L'azione principale era un contorno terracotta su fondo sabbia; ora e' il bottone pieno oro,
       come "Verifica disponibilita'" nella home e il bottone fisso su mobile. */
[aria-labelledby="booking-drawer-title"] form .btn-pill,
[aria-labelledby="booking-drawer-title"] .btn-pill.w-full {
  background: var(--color-gold, #d18d07); border-color: var(--color-gold, #d18d07); color: var(--color-ink, #272726);
  box-shadow: 0 6px 20px -8px rgb(209 141 7 / .55); }
[aria-labelledby="booking-drawer-title"] form .btn-pill:hover,
[aria-labelledby="booking-drawer-title"] .btn-pill.w-full:hover {
  background: var(--color-gold-dark, #b57a06); border-color: var(--color-gold-dark, #b57a06); color: #fff; }
[aria-labelledby="booking-drawer-title"] .bg-sand { background: #fff; box-shadow: 0 18px 40px -30px rgb(39 39 38 / .45); }
[aria-labelledby="booking-drawer-title"] input, [aria-labelledby="booking-drawer-title"] select { accent-color: var(--color-gold, #d18d07); color-scheme: light; }
[aria-labelledby="booking-drawer-title"] .eyebrow.text-terra { color: var(--color-ink-soft, #6f6864); }

/* 16. Menu aperto su mobile: niente logo (scorrendo le voci ci finivano sotto), e le voci salgono
       subito sotto la X di chiusura (prima partivano a 128 px per lasciare posto al logo). */
@media (max-width: 767px) {

  html.menu-open .fixed.inset-0.z-40 .pt-32 { padding-top: 5.5rem; }
}

/* 17. Striscia home con scorrimento automatico (striscia.js): niente aggancio alle foto, altrimenti
       il browser riporterebbe indietro ogni piccolo spostamento. */
.strip-scroll.strip-auto { scroll-snap-type: none; scroll-behavior: auto; }

/* 18. Menu aperto (tutte le larghezze): niente logo e niente barra di prenotazione in testata
       (Davide, disegno sul menu desktop); restano lingue e X di chiusura. */
html.menu-open header a[aria-label="Agriresort La Colombaia"],
html.menu-open header form { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }

/* 19. Menu desktop: voci a sinistra su due terzi della larghezza; a destra i bottoni e le lingue,
       e sotto di loro Contatti e Social (prima stavano in una colonna a sinistra delle voci). */
@media (min-width: 768px) {
  .fixed.inset-0.z-40 .md\:grid-cols-12 { padding-top: 8.5rem; row-gap: 3.5rem; align-content: start; }
  .fixed.inset-0.z-40 .md\:grid-cols-12 > nav.md\:col-span-6 { grid-column: 1 / span 8; grid-row: 1 / span 2; }
  .fixed.inset-0.z-40 .md\:grid-cols-12 > .md\:order-3 { grid-column: 9 / span 4; grid-row: 1; }
  .fixed.inset-0.z-40 .md\:grid-cols-12 > .md\:order-1 { grid-column: 9 / span 4; grid-row: 2; text-align: right; }
  .fixed.inset-0.z-40 .md\:grid-cols-12 > .md\:order-1 .flex { justify-content: flex-end; }
}

/* 20. Fondo sabbia aggiunto alle sezioni interne (correzioni.js punto 7): stesso respiro delle sezioni sabbia della home. */
.fondo-aggiunto { position: relative; }

/* 21. Occhiello aggiunto sopra "Accogliente giovane e naturale" (correzioni.js punto 8). */
.occhiello-aggiunto { display: block; margin-bottom: 1.2rem !important; color: var(--color-ink, #272726); }

/* 22. Sottotitolo sotto il titolo delle pagine interne: era su una riga sola (whitespace-nowrap) e con le frasi
       nuove, piu' lunghe, su mobile usciva dallo schermo e faceva scorrere la pagina di lato. Ora va a capo. */
.script.hero-fade { position: relative !important; left: auto !important; bottom: auto !important; translate: none !important;
  display: block; white-space: normal !important; max-width: 44rem; margin: 1.4rem auto 0 !important; text-align: center; line-height: 1.6 !important; }
@media (max-width: 767px) { .script.hero-fade { font-size: .72rem !important; letter-spacing: .18em !important; padding: 0 8px; } }

/* 23. Pagina di ringraziamento: riga del rimando alla home (correzioni.js punto 9). */
.ty-rimando { text-align: center; margin: 2.5rem auto 0; padding: 0 20px; font-family: var(--font-display); font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink-soft, #6f6864); }
.ty-rimando a { color: var(--color-ink, #272726); border-bottom: 1px solid currentColor; margin-left: .6em; }

/* 24. Banner dei cookie (consenso.js). Desktop: pannello in basso a sinistra (BomberBot e' a destra).
       Telefono: in alto, sotto la testata, perche' in basso ci sono BomberBot e il bottone fisso. */
.consenso { position: fixed; z-index: 450; left: 24px; bottom: 24px; width: min(420px, calc(100vw - 48px));
  background: var(--color-paper, #fdfbf9); color: var(--color-ink, #272726); border: 1px solid var(--color-line, #dccdc0);
  box-shadow: 0 18px 50px rgb(39 39 38 / .22); padding: 24px 24px 18px; font-size: .86rem; line-height: 1.6;
  animation: consensoIn .45s ease both; }
@keyframes consensoIn { from { opacity: 0; translate: 0 14px; } }
.has-cursor .consenso, .has-cursor .consenso * { cursor: auto; }
.has-cursor .consenso button, .has-cursor .consenso a, .has-cursor .consenso label { cursor: pointer; }
.consenso-x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; opacity: .65; }
.consenso-x:hover { opacity: 1; }
.consenso-titolo { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; margin: 0 28px 10px 0; }
.consenso-testo { margin: 0 0 16px; color: var(--color-ink-soft, #6f6864); }
.consenso-testo a { color: var(--color-ink, #272726); text-decoration: underline; }
.consenso-riga { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.consenso-link { text-decoration: underline; font-size: .82rem; color: var(--color-ink, #272726); }
.consenso-ok { padding: 11px 26px; border-radius: 999px; background: var(--color-gold, #d18d07); color: var(--color-ink, #272726);
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; }
.consenso-ok:hover { background: var(--color-gold-dark, #b57a06); color: #fff; }
.consenso-voce { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--color-line, #dccdc0); }
.consenso-voce span strong { display: block; color: var(--color-ink, #272726); }
.consenso-voce span { color: var(--color-ink-soft, #6f6864); font-size: .8rem; }
.consenso-voce em { font-style: normal; font-size: .74rem; color: var(--color-ink-soft, #6f6864); }
.consenso-voce input { width: 20px; height: 20px; accent-color: var(--color-gold, #d18d07); }
.consenso-voce + .consenso-riga { margin-top: 14px; }
@media (max-width: 767px) {
  .consenso { left: 12px; right: 12px; top: 84px; bottom: auto; width: auto; padding: 20px 18px 16px; font-size: .82rem; }
}

/* 25. Etichetta della mappa nelle altre lingue (punto 1). */
html[lang="en"] :has(> iframe[src*="openstreetmap"])::after { content: "Click to use the map"; }
html[lang="de"] :has(> iframe[src*="openstreetmap"])::after { content: "Klicken, um die Karte zu nutzen"; }

/* 26. Reel bike (reel.js). Home: il video sta sopra la foto della card Bike, stesso taglio. */
.reel-card { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Pagina Bike: due reel verticali affiancati, stampe con cornice bianca come la Gallery */
.reel-sez { padding: 6rem 0; }
.reel-wrap { max-width: 1100px; margin: 0 auto; padding: 0 40px; text-align: center; }
@media (max-width: 767px) { .reel-sez { padding: 4rem 0; } .reel-wrap { padding: 0 20px; } }
.reel-titolo { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; color: var(--color-ink, #272726); margin: .2rem 0 2.6rem; }
.reel-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 32px; }
@media (max-width: 767px) { .reel-griglia { gap: 12px; } }
.reel-voce { position: relative; display: block; padding: 8px; background: #fff; box-shadow: 0 22px 40px -28px rgb(39 39 38 / .45); cursor: pointer; }
@media (max-width: 767px) { .reel-voce { padding: 4px; } }
.reel-video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #e9e4dc; }
.reel-play { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: .55em; padding: .6em 1.1em;
  border-radius: 999px; background: rgb(39 39 38 / .72); color: #fff; font-family: var(--font-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 767px) { .reel-play { left: 10px; bottom: 10px; font-size: .62rem; } }
.reel-credito { margin-top: 1.4rem; font-size: .78rem; color: var(--color-ink-soft, #6f6864); }
.has-cursor .reel-voce { cursor: pointer; }

/* 27. Video del 14/10/2026 (reel.js). Home "Slow down": a tutta larghezza; su telefono il verticale. */
.slow-sez { max-width: 1280px; margin: 0 auto; padding: 5rem 40px; }
.slow-sez .reel-voce { width: 100%; }
.reel-orizz .reel-video { aspect-ratio: 16 / 9; }
.solo-mobile { display: none !important; }
@media (max-width: 767px) {
  .slow-sez { padding: 3rem 20px; }
  .solo-desktop { display: none !important; }
  .solo-mobile { display: block !important; max-width: 420px; margin: 0 auto; }
}
/* Ristorante: orizzontale e verticale affiancati, stessa altezza */
.rist-wrap { max-width: 1300px; }
.rist-griglia { display: grid; grid-template-columns: 16fr 5.06fr; gap: 28px; align-items: start; }
@media (max-width: 767px) { .rist-griglia { grid-template-columns: 1fr; gap: 14px; } .rist-griglia .reel-voce:not(.reel-orizz) { max-width: 360px; margin: 0 auto; width: 100%; } }
.gal-open video.orizz { aspect-ratio: 16 / 9; }

/* 28. Credit (credit.js): marchio Bomber in HTML, uguale a Montepozzali e Terramaris. Su fondo chiaro rosso #c02b0a. */
.logo-bomber { display: inline-flex; flex-direction: column; align-items: center; gap: .32em; line-height: 1; font-size: 15px; vertical-align: middle; }
.logo-bomber-mark { font: 400 1em/.9 Impact, "Arial Black", sans-serif; letter-spacing: -.028em; white-space: nowrap; color: var(--color-ink, #272726); }
.logo-bomber-mark span { color: #c02b0a; }
.logo-bomber-payoff { font: 600 max(7px, .135em)/1 var(--font-display), sans-serif; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; white-space: nowrap; color: var(--color-ink, #272726); }
.logo-bomber-payoff em { font-style: normal; color: #c02b0a; }
footer a.credit-bomber { margin-left: .5em; border: 0 !important; background: none !important; display: inline-flex; transition: transform .25s; }
footer a.credit-bomber:hover { transform: translateY(-1px); }
footer a.credit-bomber::after, footer a.credit-bomber::before { display: none !important; }
/* pagina Credit: copia della pagina "grazie", il contenuto lo mette credit.js */
.credit-sez { max-width: 1300px; margin: 0 auto; padding: 11rem 40px 6rem; }
@media (max-width: 767px) { .credit-sez { padding: 8rem 20px 4rem; } }
.credit-griglia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 8vw, 120px); align-items: start; }
@media (max-width: 900px) { .credit-griglia { grid-template-columns: 1fr; gap: 32px; } }
.credit-titolo { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; color: var(--color-ink, #272726); margin-top: .6rem; }
.credit-marchio { display: inline-flex; border: 1px solid var(--color-line, #dccdc0); padding: 26px 34px; margin-bottom: 34px; background: #fff; }
.credit-marchio .logo-bomber { font-size: 40px; }
@media (max-width: 767px) { .credit-marchio .logo-bomber { font-size: 30px; } }
.credit-sez p { max-width: 640px; margin: 0 0 1.1rem; line-height: 1.75; color: var(--color-ink-soft, #6f6864); }
.credit-sez .credit-lead { font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.45; color: var(--color-ink, #272726); }
.credit-sez p a { color: var(--color-ink, #272726); border-bottom: 1px solid currentColor; }
.credit-firma { border-top: 1px solid var(--color-line, #dccdc0); margin-top: 2.2rem !important; padding-top: 1.4rem; font-size: .85rem; }

/* 29. Newsletter (correzioni.js punto 12): trappola per i robot invisibile, messaggio di esito */
.nl-trappola { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.nl-esito { margin-top: .9rem; font-size: .9rem; color: #fff; min-height: 1.2em; }

/* 30. Partner nel footer (credit.js): "Siamo partner di" + Massa Vecchia e Massa Alta, sopra la riga del ©.
       Sta sul fondo chiaro della pagina (#fdfbf9): la scritta nella barra di Massa Vecchia e' di quel colore. */
.partner { max-width: 1500px; margin: 0 auto; padding: 2.4rem 24px 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 3rem; }
.partner-tit { flex-basis: 100%; text-align: center; font-family: var(--font-display, inherit); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgb(39 39 38 / .7); margin: 0; }
.partner a { display: inline-flex; opacity: .8; transition: opacity .25s, transform .25s; border: 0 !important; background: none !important; }
.partner a:hover { opacity: 1; transform: translateY(-1px); }
.partner a::after, .partner a::before { display: none !important; }
.partner img { display: block; width: auto; }
.partner .partner-mv img { height: 46px; }
.partner .partner-ma img { height: 64px; }
@media (max-width: 767px) { .partner { gap: 1rem 2.2rem; padding-top: 2rem; } .partner .partner-mv img { height: 38px; } .partner .partner-ma img { height: 54px; } }