/* ============================================================
   BAZZARIO — Base + Components
   ============================================================ */
@import url("tokens.css");

/* Bright Summer — font ufficiale degli slogan (installato in assets/fonts/).
   Fallback web "Caveat" se il font non carica. */
@font-face {
  font-family: "Bright Summer";
  /* woff2 per primo: il browser prende il primo formato che sa leggere, e woff2
     lo leggono tutti da anni. Pesa 82 KB contro i 103 del woff, -20%. Gli altri
     restano come rete di sicurezza per browser molto vecchi. */
  src: url("../assets/fonts/bright-summer.woff2") format("woff2"),
       url("../assets/fonts/bright-summer.woff")  format("woff"),
       url("../assets/fonts/bright-summer.ttf")   format("truetype");
  font-weight: 400 800;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--bz-font-body);
  font-size: var(--bz-fs-body);
  line-height: var(--bz-leading);
  color: var(--bz-fg);
  background: var(--bz-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
/* <picture> avvolge le immagini per servire il .webp (vedi bz_immagini_webp).
   display:contents lo toglie dall'impaginazione: senza, le regole del tipo
   .bz-split__media img{height:100%} si misurerebbero sul <picture>, che non ha
   altezza, e l'immagine lascerebbe mezzo riquadro vuoto. */
picture { display: contents; }
img { height: auto; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--bz-berry); color: #fff; }

/* ---- Layout helpers ------------------------------------------ */
.bz-container { width: 100%; max-width: var(--bz-container); margin-inline: auto; padding-inline: var(--bz-gutter); }
.bz-container--wide { max-width: var(--bz-container-wide); }
.bz-section { padding-block: var(--bz-section-y); }
.bz-section--alt { background: var(--bz-paper-2); }
.bz-section--ink { background: var(--bz-blue); color: #eaf2f6; }
.bz-section--ink .bz-heading, .bz-section--ink h2 { color: #fff; }
.bz-stack > * + * { margin-top: var(--bz-space-3); }
.bz-grid { display: grid; gap: var(--bz-space-4); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.bz-kicker {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--bz-font-display);
  font-weight: 600;
  font-size: var(--bz-fs-kicker);
  letter-spacing: var(--bz-track-kicker);
  text-transform: uppercase;
  color: var(--bz-blue);
}
.bz-kicker--light { color: #fff; }
/* the signature wave-underline + dot separator from the campaign mockups (logo "onde") */
.bz-kicker::before, .bz-kicker::after {
  content: ""; width: 40px; height: 8px; flex: none;
  background: var(--bz-berry);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4 T30 4 T40 4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) center/contain no-repeat;
          mask: var(--wave) center/contain no-repeat;
}
.bz-kicker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bz-berry); flex: none; }

h1,h2,h3,h4 { font-family: var(--bz-font-display); color: var(--bz-heading); line-height: 1.06; font-weight: 800; letter-spacing: -.01em; }
.bz-h1 { font-size: var(--bz-h1); }
.bz-h2 { font-size: var(--bz-h2); }
.bz-h3 { font-size: var(--bz-h3); }
h4, .bz-h4 { font-size: var(--bz-h4); font-weight: 700; }

.bz-display {                       /* image-in-type giant word (Haven signature) */
  font-family: var(--bz-font-display);
  font-weight: 800; font-size: var(--bz-display);
  line-height: .9; letter-spacing: -.02em; text-transform: uppercase;
}
.bz-script {                        /* hand brush slogan */
  font-family: var(--bz-font-script);
  font-weight: 700; line-height: .95; letter-spacing: .01em;
  color: var(--bz-blue);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
}
.bz-script--light { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.28); }
.bz-lead { font-size: var(--bz-fs-lead); color: var(--bz-ink-soft); line-height: 1.55; }
.bz-eng { font-style: italic; }

/* image-clipped text (giant letters filled with a photo) */
.bz-clip {
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ============================================================
   BUTTONS / PILLS
   ============================================================ */
.bz-btn {
  --_bg: var(--bz-berry); --_fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.7em; border: 0; border-radius: var(--bz-radius-pill);
  background: var(--_bg); color: var(--_fg);
  font-family: var(--bz-font-display); font-weight: 700; font-size: .92rem;
  letter-spacing: var(--bz-track-caps); text-transform: uppercase;
  transition: transform var(--bz-dur) var(--bz-ease), box-shadow var(--bz-dur) var(--bz-ease), background .3s;
  box-shadow: var(--bz-shadow-sm);
}
.bz-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(164,39,88,.6); }
.bz-btn:active { transform: translateY(0); }
.bz-btn--blue  { --_bg: var(--bz-blue); }
.bz-btn--ghost { --_bg: transparent; --_fg: var(--bz-blue); box-shadow: inset 0 0 0 1.5px var(--bz-blue); }
.bz-btn--ghost:hover { --_bg: var(--bz-blue); --_fg:#fff; }
.bz-btn--light { --_bg:#fff; --_fg: var(--bz-blue); }
.bz-btn--sm { padding: .7em 1.25em; font-size: .8rem; }

/* underlined text link (Haven's low-key CTA) */
.bz-link {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--bz-font-display); font-weight: 600; font-size: .9rem;
  letter-spacing: var(--bz-track-caps); text-transform: uppercase; color: var(--bz-blue);
  padding-bottom: 3px; background: linear-gradient(var(--bz-berry),var(--bz-berry)) left bottom / 0% 2px no-repeat;
  transition: background-size .4s var(--bz-ease);
}
.bz-link:hover { background-size: 100% 2px; }
.bz-link .bz-arrow { transition: transform .4s var(--bz-ease); }
.bz-link:hover .bz-arrow { transform: translateX(4px); }

.bz-chip {
  display:inline-flex; align-items:center; gap:.5em;
  padding:.5em 1em; border-radius: var(--bz-radius-pill);
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.35); color:#fff;
  font-family:var(--bz-font-display); font-weight:600; font-size:.78rem;
  letter-spacing: var(--bz-track-caps); text-transform:uppercase;
}
.bz-tag { /* anima tag */
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--bz-font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.35em .8em; border-radius:var(--bz-radius-pill);
  color:#fff; background:var(--bz-blue);
}
.bz-tag--ama  { background: var(--bz-blue); }
.bz-tag--gusta{ background: var(--bz-berry); }
.bz-tag--vivi { background: var(--bz-azure); }

/* ============================================================
   HEADER
   ============================================================ */
.bz-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .9rem var(--bz-gutter);
  transition: background .4s, box-shadow .4s, padding .4s;
}
.bz-header--solid { background: rgba(246,241,232,.9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--bz-line); }
.bz-brand { display:flex; align-items:center; gap:.7rem; }
.bz-brand img { height: 48px; width:auto; }
.bz-brand__white { display:none; }
.bz-header--hero .bz-brand__color { display:none; }
.bz-header--hero .bz-brand__white { display:block; }
.bz-nav { display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
.bz-nav a {
  font-family:var(--bz-font-display); font-weight:600; font-size:.86rem; color:var(--bz-ink);
  letter-spacing:.02em; padding:.3em 0; position:relative;
}
.bz-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--bz-berry);transition:right .35s var(--bz-ease);}
.bz-nav a:hover::after{right:0;}
/* --- Voce di menu con tendina (es. Chi Siamo) ------------------
   Nessun JS: da desktop si apre in hover/focus, nel pannello mobile
   le voci figlie restano sempre visibili, rientrate. */
.bz-nav__grp{ position:relative; display:flex; align-items:center; }
.bz-nav__caret{ display:inline-block; margin-left:.35em; font-size:.7em; opacity:.6;
  transition:transform .25s var(--bz-ease); }
.bz-nav__grp:hover .bz-nav__caret,
.bz-nav__grp:focus-within .bz-nav__caret{ transform:translateY(1px) rotate(180deg); }
.bz-subnav{
  position:absolute; top:100%; left:-1rem; margin:0; padding:.6rem 0; list-style:none;
  min-width:15rem; background:#fff; border-radius:var(--bz-radius); box-shadow:var(--bz-shadow);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .22s var(--bz-ease), transform .22s var(--bz-ease), visibility .22s;
  z-index:120;
}
/* zona cuscinetto: evita che la tendina si chiuda passando dal titolo alle voci */
.bz-nav__grp::after{ content:""; position:absolute; top:100%; left:0; right:0; height:.75rem; }
.bz-nav__grp:hover .bz-subnav,
.bz-nav__grp:focus-within .bz-subnav{ opacity:1; visibility:visible; transform:translateY(0); }
.bz-subnav a{
  display:block; padding:.55rem 1.2rem; font-size:.82rem; font-weight:600; color:var(--bz-ink);
  white-space:nowrap;
}
.bz-subnav a::after{ display:none; }             /* niente sottolineatura animata qui */
.bz-subnav a:hover{ color:var(--bz-berry); background:var(--bz-paper); }
/* prima voce = la pagina stessa: separata dalle figlie da un filetto */
.bz-subnav__self a{ color:var(--bz-blue); }
.bz-subnav__self{ border-bottom:1px solid var(--bz-line); margin-bottom:.35rem; padding-bottom:.35rem; }
/* nell'header sopra la foto il titolo è bianco, ma la tendina resta su fondo chiaro */
.bz-header--hero .bz-subnav a{ color:var(--bz-ink); }

.bz-header__right { display:flex; align-items:center; gap:1rem; }
/* ============================================================
   SELETTORE LINGUA a tendina (header, tutte le larghezze).
   E' un <details>/<summary>: si apre anche senza JavaScript ed e'
   raggiungibile da tastiera. main.js aggiunge solo la chiusura al
   clic fuori e con Esc. Prima erano link in fila, nascosti sotto
   i 560px: da telefono la lingua non si poteva piu' cambiare.
   ============================================================ */
.bz-langsel{ position:relative; }
.bz-langsel > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.25em;
  padding:.35rem .55rem .35rem .7rem; border:1px solid var(--bz-line); border-radius:999px;
  font-family:var(--bz-font-display); font-weight:700; font-size:.78rem; letter-spacing:.06em;
  color:var(--bz-ink); background:rgba(255,255,255,.72); min-height:34px;
}
.bz-langsel > summary::-webkit-details-marker{ display:none; }
.bz-langsel > summary:hover{ border-color:var(--bz-blue); color:var(--bz-blue); }
.bz-langsel > summary:focus-visible{ outline:2px solid var(--bz-azure); outline-offset:2px; }
.bz-langsel > summary svg{ width:.9em; height:.9em; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; }
.bz-langsel[open] > summary svg{ transform:rotate(180deg); }
/* sull'header trasparente sopra le foto il testo e' bianco */
.bz-header--hero .bz-langsel > summary{ color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); }
.bz-header--hero .bz-langsel > summary:hover{ color:#fff; border-color:#fff; }

.bz-langsel ul{
  /* Ancorata a SINISTRA della pillola, non a destra: sul telefono la pillola sta in
     mezzo all'header e con "right:0" la tendina usciva dallo schermo a sinistra. */
  position:absolute; top:calc(100% + .5rem); left:0; right:auto; z-index:120; margin:0; padding:.35rem;
  list-style:none; min-width:11.5rem; background:var(--bz-white);
  border:1px solid var(--bz-line); border-radius:8px; box-shadow:0 16px 40px -12px rgba(12,32,42,.34);
}
.bz-langsel ul a{
  display:flex; align-items:center; gap:.6rem; min-height:44px; padding:0 .7rem;
  border-radius:6px; text-decoration:none; color:var(--bz-ink); font-size:.9rem;
}
.bz-langsel ul a b{ font-family:var(--bz-font-display); font-size:.76rem; letter-spacing:.08em;
  color:var(--bz-stone); min-width:1.9em; }
.bz-langsel ul a:hover{ background:var(--bz-paper); }
.bz-langsel ul a[aria-current="true"]{ background:var(--bz-paper-2); }
.bz-langsel ul a[aria-current="true"] b,
.bz-langsel ul a[aria-current="true"] span{ color:var(--bz-blue); font-weight:700; }
@media (prefers-reduced-motion: reduce){ .bz-langsel > summary svg{ transition:none; } }

.bz-lang { display:flex; gap:.35rem; font-family:var(--bz-font-display); font-weight:600; font-size:.78rem; color:var(--bz-ink-soft); }
.bz-lang a[aria-current="true"]{ color:var(--bz-blue); }
.bz-header--hero { color:#fff; }
.bz-header--hero .bz-brand, .bz-header--hero .bz-nav a, .bz-header--hero .bz-lang { color:#fff; }
.bz-burger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.bz-hero { position: relative; min-height: 100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.bz-hero__media, .bz-hero__media img { position:absolute; inset:0; width:100%; height:100%; }
.bz-hero__media img { object-fit: cover; }
.bz-hero::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,51,70,.55) 0%, rgba(13,51,70,0) 22%, rgba(13,51,70,0) 45%, rgba(13,51,70,.72) 100%); }
.bz-hero__inner { position: relative; z-index:2; width:100%; padding-bottom: clamp(2.5rem,6vw,5rem); }
.bz-hero__slogan { max-width: 16ch; }
.bz-hero__cta { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.6rem; }
.bz-scrollcue{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:2;
  font-family:var(--bz-font-display); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.8); }

/* rotating slogan chip */
.bz-rotator{ display:inline-block; min-height:1.2em; }
.bz-rotator b{ font-weight:inherit; }

/* ============================================================
   ANIME CARDS (Camere / Bistrò / Spiaggia)
   ============================================================ */
.bz-anime-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--bz-space-4); }
.bz-anima{
  position:relative; border-radius: var(--bz-radius-lg); overflow:hidden;
  aspect-ratio: 3/4; display:flex; align-items:flex-end; color:#fff; isolation:isolate;
  box-shadow: var(--bz-shadow);
}
.bz-anima img{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; transition: transform 1.2s var(--bz-ease); }
.bz-anima::after{ content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(9,30,42,.85) 100%); }
.bz-anima:hover img{ transform: scale(1.06); }
.bz-anima__body{ padding: clamp(1.4rem,2.5vw,2.2rem); width:100%; }
.bz-anima__title{ font-family:var(--bz-font-script); font-weight:700; font-size: clamp(2.2rem,3.2vw,3rem); line-height:.95; margin:.2em 0 .5em; }
.bz-anima__meta{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }

/* ============================================================
   SPLIT (alternating photo/text bands — Haven)
   ============================================================ */
.bz-split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6.5rem); align-items:center; }
.bz-split--reverse .bz-split__media{ order:2; }
/* asymmetric, off-center columns like Haven's editorial bands */
.bz-split--wide-media{ grid-template-columns: 1.15fr .85fr; }
.bz-split--wide-text{ grid-template-columns: .85fr 1.15fr; }
.bz-split__media{ border-radius: var(--bz-radius-lg); overflow:hidden; box-shadow: var(--bz-shadow); aspect-ratio: 4/5; }
.bz-split--tall .bz-split__media{ aspect-ratio: 3/4; }
.bz-split__media img{ width:100%; height:100%; }
.bz-split__body{ max-width: 46ch; }

/* ============================================================
   VOCABULARY DEVICE — "bazzariàre /v./"  (brand-owned asset)
   ============================================================ */
.bz-voc{
  border-left: 4px solid var(--bz-berry); padding: .2rem 0 .2rem 1.4rem; max-width: 40ch;
}
.bz-voc__word{ font-family:var(--bz-font-display); font-weight:800; font-size:1.9rem; color:var(--bz-blue); }
.bz-voc__gram{ color:var(--bz-ink-soft); font-style:italic; font-size:1rem; margin-left:.4em; }
.bz-voc__def{ margin-top:.4rem; color:var(--bz-ink); }
.bz-voc__def b{ color:var(--bz-berry); }

/* ============================================================
   REVIEWS
   ============================================================ */
.bz-reviews{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--bz-space-4); }
.bz-review{ background: var(--bz-white); border-radius: var(--bz-radius); padding: 1.8rem; box-shadow: var(--bz-shadow-sm); }
.bz-review__stars{ color: var(--bz-berry); letter-spacing:.15em; font-size:.95rem; }
.bz-review__q{ font-size:1.05rem; margin:.6rem 0 1rem; }
.bz-review__by{ font-family:var(--bz-font-display); font-weight:700; font-size:.85rem; color:var(--bz-blue); }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.bz-news{ display:flex; flex-wrap:wrap; gap:.8rem; max-width:520px; }
.bz-news input{ flex:1 1 240px; padding:.95em 1.2em; border-radius:var(--bz-radius-pill); border:1.5px solid var(--bz-line); background:#fff; font:inherit; }
.bz-news input:focus{ outline:none; border-color:var(--bz-blue); }

/* Consenso privacy e messaggi di esito: iniettati da scripts/main.js,
   così valgono anche sulle pagine .html che non passano dai partials. */
.bz-news__consent{ flex:1 1 100%; display:flex; align-items:flex-start; gap:.55rem;
  font-size:.82rem; line-height:1.45; opacity:.9; cursor:pointer; }
.bz-news__consent input{ flex:0 0 auto; width:1rem; height:1rem; margin-top:.15rem; padding:0;
  border-radius:4px; accent-color:var(--bz-berry); }
.bz-news__consent a{ color:inherit; text-decoration:underline; }
.bz-news__msg{ flex:1 1 100%; margin:.2rem 0 0; font-size:.86rem; line-height:1.5; min-height:1.2em; }
.bz-news__msg.is-ok{ color:var(--bz-blue); font-weight:600; }
.bz-news__msg.is-err{ color:var(--bz-berry); font-weight:600; }
/* Nel footer (fondo scuro) i colori si invertono. */
.bz-footer .bz-news__consent{ color:#a9c6d4; }
.bz-footer .bz-news__msg.is-ok{ color:#fff; }
.bz-footer .bz-news__msg.is-err{ color:#ffb3c8; }

/* ============================================================
   MENU — scorciatoia al PDF, solo da telefono
   La pagina del Bistrò resta identica: sotto gli 860px compare
   in più un pulsante che apre /menu/ (PDF con pinch-zoom, più
   comodo su schermo piccolo). Lo sfogliabile a immagini resta.
   ============================================================ */
.bz-menumob{ display:none; text-align:center; margin-bottom:2.4rem; }
.bz-menumob__note{ margin:.9rem auto 0; max-width:34ch; color:var(--bz-ink-soft); font-size:.9rem; line-height:1.5; }
@media (max-width:860px){
  .bz-menumob{ display:block; }
}

/* ============================================================
   CONSENSO COOKIE (banner disegnato da scripts/consent.js)
   "Accetta" e "Rifiuta" hanno lo stesso peso visivo: lo chiede
   il Garante, e un rifiuto nascosto invalida il consenso raccolto.
   ============================================================ */
.bz-cmp{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  padding:1rem clamp(.8rem,3vw,2rem) calc(1rem + env(safe-area-inset-bottom,0px));
  display:flex; justify-content:center; pointer-events:none;
  animation:bz-cmp-in .35s var(--bz-ease) both;
}
@keyframes bz-cmp-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.bz-cmp__card{
  pointer-events:auto; width:100%; max-width:44rem; background:#fff;
  border-radius:var(--bz-radius-lg); box-shadow:0 18px 50px rgba(22,86,123,.22);
  padding:1.4rem clamp(1.1rem,3vw,1.8rem);
}
.bz-cmp__title{
  margin:0 0 .4rem; font-family:var(--bz-font-display); font-weight:800;
  font-size:1.02rem; color:var(--bz-blue);
}
.bz-cmp__txt{ margin:0 0 1rem; font-size:.88rem; line-height:1.6; color:var(--bz-ink-soft); }
.bz-cmp__txt a{ color:var(--bz-berry); text-decoration:underline; }
.bz-cmp__actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.bz-cmp__btn{
  flex:1 1 auto; min-height:44px; padding:.7rem 1.4rem; border-radius:var(--bz-radius-pill);
  font-family:var(--bz-font-display); font-size:.78rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; cursor:pointer; border:1.5px solid var(--bz-blue);
  background:var(--bz-blue); color:#fff; transition:background .2s var(--bz-ease), color .2s var(--bz-ease);
}
.bz-cmp__btn:hover{ background:var(--bz-berry); border-color:var(--bz-berry); }
.bz-cmp__btn--ghost{ background:transparent; color:var(--bz-ink-soft); border-color:var(--bz-line); }
.bz-cmp__btn--ghost:hover{ background:transparent; color:var(--bz-berry); border-color:var(--bz-berry); }
.bz-cmp__pref{ margin-top:1rem; border-top:1px solid var(--bz-line); padding-top:1rem; }
.bz-cmp__row{
  display:flex; gap:.7rem; align-items:flex-start; padding:.6rem 0; cursor:pointer;
  border-bottom:1px solid var(--bz-line);
}
.bz-cmp__row:last-of-type{ border-bottom:0; }
.bz-cmp__row input{ flex:0 0 auto; width:1.1rem; height:1.1rem; margin-top:.15rem; accent-color:var(--bz-berry); }
.bz-cmp__row b{ display:block; font-size:.86rem; color:var(--bz-ink); }
.bz-cmp__hint{ display:block; font-size:.8rem; line-height:1.5; color:var(--bz-ink-soft); margin-top:.15rem; }
.bz-cmp__pref .bz-cmp__btn{ margin-top:.9rem; width:100%; }
@media (max-width:520px){
  .bz-cmp__actions .bz-cmp__btn{ flex:1 1 100%; }
}

/* ============================================================
   DECOR — three-wave stroke motif (from the logo)
   ============================================================ */
.bz-waves{ width:120px; height:26px; color: var(--bz-berry); }
.bz-waves--stroke{ opacity:.5; }

/* ============================================================
   FOOTER
   ============================================================ */
.bz-footer{ background: var(--bz-blue-900); color:#cfe0e8; padding-block: clamp(3.5rem,6vw,5.5rem) 2rem; }
.bz-footer a:hover{ color:#fff; }
.bz-footer__grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem; }
.bz-footer h4{ color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.bz-footer ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.95rem; }
/* Il logo del footer e' VERTICALE (652x851). Con la sola altezza fissa
   ereditava la regola globale "img { object-fit: cover }" e il riquadro
   diventava 220x64: cover riempie ritagliando, quindi del logo si vedeva solo
   una striscia orizzontale centrale e sembrava un file rovinato.
   width:auto lascia che la larghezza segua l'altezza; contain garantisce che
   non venga mai tagliato, qualunque logo si metta domani. */
.bz-footer__brand img{ height:72px; width:auto; object-fit:contain; margin-bottom:1rem; }
.bz-footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14); font-size:.82rem; color:#8fb0c0; }

/* ============================================================
   TYPE HERO — Haven signature: giant word filled with a photo
   on cream, minimal & airy. Used on the home.
   ============================================================ */
.bz-typehero{ position:relative; padding-top: clamp(7rem, 12vw, 11rem); padding-bottom: clamp(3rem,6vw,6rem); overflow:hidden; }
.bz-typehero__inner{ position:relative; z-index:2; text-align:center; }
.bz-typehero__word{
  font-family: var(--bz-font-display); font-weight:800; text-transform:uppercase;
  font-size: var(--bz-display); line-height:.82; letter-spacing:-.03em;
  margin:.1em 0 .05em;
  /* photo-filled letters */
  background-size: cover; background-position: center 60%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.bz-typehero__sub{ color: var(--bz-ink-soft); font-size: clamp(1.8rem,4.5vw,3.4rem); line-height:1; margin:.1em 0 .6em; }
.bz-typehero .bz-lead{ max-width: 52ch; margin-inline:auto; }
.bz-typehero__cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; margin-top:1.8rem; }
/* faint oversized line-art echo of the word behind (Haven texture) */
.bz-typehero__ghost{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; pointer-events:none;
  font-family:var(--bz-font-display); font-weight:800; text-transform:uppercase; font-size:var(--bz-display); line-height:.82; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1.5px rgba(28,42,49,.06); opacity:.9; }

/* ============================================================
   EDITORIAL bits (Haven-ward) — big soft leads, wide measure
   ============================================================ */
.bz-lead--italic{ font-style:italic; }
.bz-measure{ max-width: 58ch; }
.bz-center{ text-align:center; margin-inline:auto; }
.bz-section--tight{ padding-block: clamp(3rem,6vw,6rem); }

/* ============================================================
   PAGE HERO — compact hero band for internal pages
   ============================================================ */
.bz-pagehero{ position:relative; min-height: clamp(56vh, 68vh, 640px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.bz-pagehero__media, .bz-pagehero__media img{ position:absolute; inset:0; width:100%; height:100%; }
.bz-pagehero::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,51,70,.5) 0%, rgba(13,51,70,0) 26%, rgba(13,51,70,0) 42%, rgba(13,51,70,.78) 100%); }
.bz-pagehero__inner{ position:relative; z-index:2; width:100%; padding-bottom: clamp(2.2rem,5vw,4rem); }
.bz-pagehero__title{ margin:.3rem 0 .6rem; }
.bz-crumb{ font-family:var(--bz-font-display); font-weight:600; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.bz-crumb a:hover{ color:#fff; text-decoration:underline; }

/* ============================================================
   ROOM CARDS (Le Camere)
   ============================================================ */
.bz-rooms{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--bz-space-4); }
.bz-room{ background:#fff; border-radius:var(--bz-radius-lg); overflow:hidden; box-shadow:var(--bz-shadow-sm); display:flex; flex-direction:column; }
.bz-room__media{ aspect-ratio: 3/2; overflow:hidden; }
.bz-room__media img{ width:100%; height:100%; transition:transform 1s var(--bz-ease); }
.bz-room:hover .bz-room__media img{ transform:scale(1.05); }
.bz-room__body{ padding: clamp(1.4rem,2.4vw,2rem); display:flex; flex-direction:column; gap:.7rem; flex:1; }
.bz-room__title{ font-size:1.6rem; }
.bz-room__feat{ list-style:none; padding:0; margin:.2rem 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.bz-room__feat li{ font-family:var(--bz-font-display); font-weight:600; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--bz-blue); background:var(--bz-paper); padding:.4em .8em; border-radius:var(--bz-radius-pill); }
.bz-room__foot{ margin-top:auto; padding-top:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--bz-line); }
.bz-room__price{ font-family:var(--bz-font-display); color:var(--bz-ink-soft); font-size:.9rem; }
.bz-room__price b{ color:var(--bz-blue); font-size:1.5rem; font-weight:800; }

/* ============================================================
   MENU (Il Bistrò) — dotted leaders
   ============================================================ */
.bz-menu-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(2rem,4vw,3.5rem) clamp(2.5rem,6vw,5rem); }
.bz-menu-col h3{ font-size:1.5rem; margin-bottom:.3rem; }
.bz-menu-col > p{ color:var(--bz-ink-soft); font-size:.95rem; margin-bottom:1.2rem; }
.bz-menu-item{ display:flex; align-items:baseline; gap:.6rem; padding:.55rem 0; border-bottom:1px dashed var(--bz-line); }
.bz-menu-item__name{ font-weight:500; color:var(--bz-ink); }
.bz-menu-item__name small{ display:block; color:var(--bz-ink-soft); font-size:.85rem; }
.bz-menu-item__dots{ flex:1; border-bottom:2px dotted var(--bz-line); transform:translateY(-4px); }
.bz-menu-item__price{ font-family:var(--bz-font-display); font-weight:700; color:var(--bz-berry); white-space:nowrap; }

/* ============================================================
   FACTS / FEATURE GRID (services, come arrivare, highlights)
   ============================================================ */
.bz-facts{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--bz-space-4); }
.bz-fact{ background:#fff; border-radius:var(--bz-radius); padding:1.6rem; box-shadow:var(--bz-shadow-sm); }
.bz-fact__ico{ font-size:1.8rem; line-height:1; margin-bottom:.7rem; }
.bz-fact h3{ font-size:1.2rem; margin-bottom:.35rem; }
.bz-fact p{ color:var(--bz-ink-soft); font-size:.98rem; }

/* ============================================================
   MAGAZINE POSTS
   ============================================================ */
.bz-postgrid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--bz-space-4); }
.bz-post{ display:flex; flex-direction:column; border-radius:var(--bz-radius-lg); overflow:hidden; background:#fff; box-shadow:var(--bz-shadow-sm); }
.bz-post__media{ aspect-ratio:16/10; overflow:hidden; }
.bz-post__media img{ width:100%; height:100%; transition:transform 1s var(--bz-ease); }
.bz-post:hover .bz-post__media img{ transform:scale(1.05); }
.bz-post__body{ padding:1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.bz-post__cat{ font-family:var(--bz-font-display); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bz-berry); }
.bz-post__title{ font-size:1.3rem; color:var(--bz-blue); }
.bz-post__excerpt{ color:var(--bz-ink-soft); font-size:.96rem; }
.bz-post .bz-link{ margin-top:auto; padding-top:.8rem; }
.bz-post--feature{ grid-column: span 3; display:grid; grid-template-columns: 1.3fr 1fr; }
.bz-post--feature .bz-post__media{ aspect-ratio:auto; }
.bz-post--feature .bz-post__body{ padding: clamp(1.8rem,3vw,3rem); justify-content:center; }
.bz-post--feature .bz-post__title{ font-size: clamp(1.8rem,3vw,2.6rem); }

/* ============================================================
   FAQ (accordion)
   ============================================================ */
.bz-faq{ max-width: 760px; margin-inline:auto; }
.bz-faq details{ border-bottom:1px solid var(--bz-line); }
.bz-faq summary{ list-style:none; cursor:pointer; padding:1.2rem 2.2rem 1.2rem 0; position:relative;
  font-family:var(--bz-font-display); font-weight:700; color:var(--bz-blue); font-size:1.12rem; }
.bz-faq summary::-webkit-details-marker{ display:none; }
.bz-faq summary::after{ content:"+"; position:absolute; right:0; top:1rem; font-size:1.5rem; font-weight:400; color:var(--bz-berry); transition:transform .3s var(--bz-ease); }
.bz-faq details[open] summary::after{ transform:rotate(45deg); }
.bz-faq p{ padding:0 0 1.3rem; color:var(--bz-ink-soft); }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.bz-form{ display:grid; gap:1rem; }
.bz-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.bz-field{ display:flex; flex-direction:column; gap:.4rem; }
.bz-field label{ font-family:var(--bz-font-display); font-weight:600; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--bz-ink-soft); }
.bz-field input, .bz-field textarea, .bz-field select{
  padding:.85em 1.1em; border-radius:var(--bz-radius); border:1.5px solid var(--bz-line); background:#fff; font:inherit; color:var(--bz-ink); }
.bz-field input:focus, .bz-field textarea:focus, .bz-field select:focus{ outline:none; border-color:var(--bz-blue); }
.bz-field textarea{ min-height:130px; resize:vertical; }

/* ============================================================
   CTA BAND (reusable "Prenota" strip)
   ============================================================ */
.bz-ctaband{ background: var(--bz-blue); color:#eaf2f6; border-radius: var(--bz-radius-lg); padding: clamp(2.4rem,5vw,4rem); text-align:center; }
.bz-ctaband h2{ color:#fff; margin:.4rem 0 .8rem; }
.bz-ctaband .bz-lead{ color:#cfe0e8; max-width:52ch; margin:0 auto 1.8rem; }
.bz-ctaband .bz-hero__cta{ justify-content:center; }

/* ============================================================
   INFO CARD (map / come arrivare)
   ============================================================ */
.bz-mapcard{ border-radius:var(--bz-radius-lg); overflow:hidden; box-shadow:var(--bz-shadow); aspect-ratio:16/10; background:var(--bz-paper-3); }
.bz-mapcard iframe{ width:100%; height:100%; border:0; display:block; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
html.js .bz-reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--bz-ease), transform .8s var(--bz-ease); }
html.js .bz-reveal.is-in{ opacity:1; transform:none; }

/* ---- typewriter: cursore FISSO (non lampeggia), sparisce a fine riga ---- */
.bz-caret{ display:inline-block; width:.06em; min-width:2px; height:.86em; margin-left:.06em;
  background:currentColor; border-radius:2px; vertical-align:-.04em; }
/* riserva un minimo d'altezza mentre lo slogan si scrive, per non far "saltare" il layout */
.bz-typehero__sub, .bz-shead__script{ min-height:1em; }

/* ============================================================
   TYPE-HERO — parola "fit" (riempie la riga) + grafica marchio
   ============================================================ */
.bz-typehero__word--fit{ display:block; white-space:nowrap; width:100%;
  font-size: clamp(3.4rem, 20vw, 17rem); line-height:.82; letter-spacing:-.03em; margin:.04em 0; }
/* il marchio che si disegna, in filigrana dietro la parola */
.bz-typehero__graphics{ position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center; color:var(--bz-azure); opacity:.14; }
.bz-typehero__graphics svg{ width:min(46vw,420px); height:auto; }
.bz-typehero__inner{ position:relative; z-index:2; }

/* ============================================================
   SECTION HEAD — parola grande + slogan a mano sotto (stile Haven)
   ============================================================ */
.bz-shead{ display:grid; gap:.1rem; margin-bottom: clamp(2rem,4vw,3.2rem); }
.bz-shead--center{ justify-items:center; text-align:center; }
.bz-shead__word{ font-family:var(--bz-font-display); font-weight:800; text-transform:uppercase;
  font-size: clamp(2.6rem, 7vw, 6rem); line-height:.9; letter-spacing:-.02em; color:var(--bz-blue); }
.bz-shead__script{ font-family:var(--bz-font-script); color:var(--bz-berry); line-height:1;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem); }

/* ============================================================
   ICONS — set monocromatico a linea (sprite in assets/icons.svg)
   ============================================================ */
.bz-ico{ width:1.5em; height:1.5em; display:inline-block; vertical-align:middle; flex:none; color:inherit; }
.bz-fact__ico{ color:var(--bz-blue); line-height:0; }
.bz-fact__ico .bz-ico{ width:2.4rem; height:2.4rem; }
/* liste con icona (dog-friendly, golden hour, come arrivare, contatti…) */
.bz-ilist{ list-style:none; padding:0; margin:1.4rem 0; display:grid; gap:.8rem; color:var(--bz-ink); }
.bz-ilist li{ display:flex; align-items:flex-start; gap:.7rem; }
.bz-ilist .bz-ico{ width:1.5rem; height:1.5rem; color:var(--bz-berry); margin-top:.05em; }
.bz-ilist b{ color:var(--bz-blue); font-family:var(--bz-font-display); }
.bz-ico--blue{ color:var(--bz-blue); }
.bz-ico--berry{ color:var(--bz-berry); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px){
  .bz-anime-grid{ grid-template-columns:1fr; }
  .bz-split{ grid-template-columns:1fr; }
  .bz-split--reverse .bz-split__media{ order:0; }
  .bz-reviews{ grid-template-columns:1fr; }
  .bz-footer__grid{ grid-template-columns:1fr 1fr; }
  .bz-rooms{ grid-template-columns:1fr; }
  .bz-menu-grid{ grid-template-columns:1fr; }
  .bz-facts{ grid-template-columns:1fr 1fr; }
  .bz-postgrid{ grid-template-columns:1fr 1fr; }
  .bz-post--feature{ grid-column:auto; grid-template-columns:1fr; }
  /* collapsed nav → slide-down panel (toggled by #burger) */
  .bz-nav{ display:none; }
  .bz-nav.is-open{
    display:flex; position:fixed; inset:64px 0 auto 0; flex-direction:column;
    background:var(--bz-paper); padding:1.5rem var(--bz-gutter); gap:1rem;
    box-shadow:var(--bz-shadow); z-index:99;
  }
  /* area di tocco ≥44px: sul telefono le voci erano alte 29px e si sbagliava mira */
  .bz-nav.is-open a{
    color:var(--bz-ink); font-size:1rem;
    display:flex; align-items:center; justify-content:center; min-height:44px;
  }
  /* Tendina nel pannello mobile: niente hover, le voci figlie stanno sempre in vista.
     Restano centrate come le altre voci; la gerarchia si legge da corpo e colore. */
  .bz-nav__grp{ display:block; text-align:center; }
  .bz-nav__caret{ display:none; }
  /* nel pannello il genitore è già lì sopra, cliccabile: non va ripetuto */
  .bz-subnav__self{ display:none; }
  .bz-subnav{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    background:transparent; min-width:0; padding:.3rem 0 0; margin:0;
  }
  /* specificità pari a .bz-nav.is-open a, altrimenti quella vince e le figlie
     tornano grandi come le voci principali */
  .bz-nav.is-open .bz-subnav a{ padding:.4rem 0; font-size:.86rem; color:var(--bz-ink-soft); white-space:normal; }
  .bz-subnav a:hover{ background:transparent; }
  .bz-burger{ display:inline-flex; }
}
@media (max-width: 560px){
  .bz-footer__grid{ grid-template-columns:1fr; }
  /* Il selettore lingua resta nell'header anche qui: e' una pillola stretta,
     ci sta. Prima spariva e da telefono non si poteva piu' cambiare lingua. */
  .bz-langsel > summary{ padding:.3rem .45rem .3rem .6rem; }
  .bz-facts{ grid-template-columns:1fr; }
  .bz-postgrid{ grid-template-columns:1fr; }
  .bz-form .row2{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto; }
  .bz-reveal{ opacity:1; transform:none; }
  .bz-script, .bz-anima__title{ clip-path:none !important; }   /* mai nascosti senza animazione */
}

/* ============================================================
   TYPE HERO — grafiche del logo animate (casetta · onde · quadrati)
   Layer decorativo dietro al titolo; l'SVG (draw-on via SMIL)
   è iniettato da main.js in .bz-typehero__graphics.
   Coesiste con il typehero del sito (niente override di layout).
   ============================================================ */
.bz-typehero__graphics{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:.22; animation: bz-floaty 10s ease-in-out infinite;
}
.bz-typehero__graphics svg{ width:min(1180px, 120%); height:auto; color:var(--bz-azure); overflow:visible; }
@keyframes bz-floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@media (prefers-reduced-motion: reduce){ .bz-typehero__graphics{ animation:none; } }
/* parola gigante ridotta per titoli lunghi (Territorio, Spiaggia, Magazine…) */
.bz-typehero__word--fit{ font-size: clamp(2.4rem, 12vw, 8rem); }

/* ============================================================
   ITERAZIONE — hero XL, blocchi editoriali, sign-off footer
   (in coda: vince sulle regole precedenti)
   ============================================================ */

/* Hero: slogan a mano GRANDE (stile "All day"), bordeaux, leggermente sovrapposto */
.bz-typehero__sub{
  color: var(--bz-berry) !important;
  font-size: clamp(2.6rem, 11vw, 8rem) !important;
  line-height:.85 !important;
  margin: -.06em 0 .35em !important;
}
.bz-typehero{ padding-top: clamp(5.5rem, 9vw, 9rem); }
.bz-typehero__word--fit{ line-height:.78; margin:.02em 0; }

/* Card anime: titolo a mano SEMPRE bianco (leggibilità sulla foto) */
.bz-anima__title{ color:#fff !important; }

/* ---- FULL-BLEED media band (foto/video a tutta larghezza, parallasse) ---- */
.bz-fullmedia{ position:relative; width:100%; min-height: clamp(58vh, 80vh, 900px);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-attachment:fixed; overflow:hidden; }
.bz-fullmedia > img, .bz-fullmedia > picture > img, .bz-fullmedia > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* variante VIDEO: contenitore in proporzione 16:9 → il video si vede intero, senza tagli */
.bz-fullmedia--video{ min-height:0; height:auto; aspect-ratio:16/9; background:#0e1a20; }
.bz-fullmedia--video > video, .bz-fullmedia--video > img, .bz-fullmedia--video > picture > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width: 900px){ .bz-fullmedia{ background-attachment:scroll; min-height:54vh; } }

/* ---- SECTION HEAD XL — parola gigante monocolore + slogan a mano ---- */
.bz-shead__word{ font-size: clamp(3rem, 12vw, 9rem) !important; line-height:.86 !important; }
.bz-shead__script{ font-size: clamp(2.2rem, 6.5vw, 5rem) !important; color: var(--bz-berry) !important; }
.bz-shead--berry .bz-shead__word{ color: var(--bz-berry) !important; }
.bz-shead--berry .bz-shead__script{ color: var(--bz-blue) !important; }
.bz-section--ink .bz-shead__word{ color:#fff !important; }

/* blocco editoriale: testo centrato sotto la testata, poi foto full */
.bz-block__text{ max-width: 60ch; margin:1.2rem auto 0; text-align:center; }
.bz-block__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }
.bz-block__media{ margin-top: clamp(2.5rem,5vw,4.5rem); }

/* ---- SIGN-OFF "See You!" a cavallo del footer (stile Haven "See ya!") ---- */
.bz-signoff{ position:relative; z-index:4; background:var(--bz-paper); text-align:center;
  padding: clamp(4rem,8vw,7rem) var(--bz-gutter) 0; }
.bz-signoff__word{ position:relative; display:inline-block; font-family:var(--bz-font-script);
  color:var(--bz-berry); font-size: clamp(3.2rem, 13vw, 11rem); line-height:.72;
  margin-bottom:-.30em; }            /* i piedi della scritta scavallano sul footer */
.bz-footer{ position:relative; z-index:1; }   /* sotto la scritta → non la copre */

/* ============================================================
   ARTICLE HEAD — testata articolo blog (stile Haven /coffee):
   H1 + grande slogan hand in filigrana + abstract, poi foto full
   ============================================================ */
.bz-arthead{ position:relative; overflow:hidden;
  padding: calc(clamp(5rem,9vw,8rem) + 3rem) 0 clamp(2rem,4vw,3.5rem); }
.bz-arthead__script{ position:absolute; left:0; right:0; top:40%; transform:translateY(-50%);
  z-index:0; text-align:center; pointer-events:none; white-space:nowrap;
  font-family:var(--bz-font-script); color:var(--bz-berry); opacity:.15;
  font-size:clamp(4rem,15vw,13rem); line-height:.75; }
.bz-arthead__grid{ position:relative; z-index:2; display:grid;
  grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:end; }
.bz-arthead__cat{ font-family:var(--bz-font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bz-berry); }
.bz-arthead h1{ font-family:var(--bz-font-display); font-weight:600; font-style:italic;
  font-size:clamp(2.1rem,5vw,4rem); line-height:1.04; color:var(--bz-blue); letter-spacing:-.01em; margin:.4rem 0 0; }
.bz-arthead__abstract{ color:var(--bz-ink-soft); }
.bz-arthead__meta{ margin-top:1rem; font-family:var(--bz-font-display); font-weight:700; color:var(--bz-berry); font-size:.9rem; }
@media (max-width:860px){ .bz-arthead__grid{ grid-template-columns:1fr; align-items:start; } .bz-arthead__script{ top:26%; } }

/* prosa articolo */
.bz-prose{ max-width:70ch; margin-inline:auto; }
.bz-prose h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:2.4rem 0 .8rem; }
.bz-prose p{ margin-bottom:1.1rem; color:var(--bz-ink); }
.bz-prose p:first-of-type::first-letter{ font-family:var(--bz-font-display); font-weight:800; float:left;
  font-size:3.4em; line-height:.8; padding:.05em .12em 0 0; color:var(--bz-berry); }
/* blocchi di testo del page-builder (richtext, faq): niente capolettera (rovina i testi centrati/brevi) */
.bz-prose--nodrop p:first-of-type::first-letter{ font:inherit; float:none; font-size:inherit;
  line-height:inherit; padding:0; margin:0; color:inherit; font-weight:inherit; }

/* ---- Accessibilità: focus visibile + salta-al-contenuto ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{ outline:3px solid var(--bz-berry); outline-offset:2px; border-radius:2px; }
.bz-skip{ position:absolute; left:.75rem; top:-3rem; z-index:200; background:var(--bz-blue); color:#fff;
  padding:.6rem 1rem; border-radius:8px; font-family:var(--bz-font-display); font-weight:700;
  transition:top .15s var(--bz-ease); }
.bz-skip:focus{ top:.75rem; }

/* ---- Team / Fondatori ---- */
.bz-team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(1rem,2.5vw,1.8rem); }
.bz-team__card{ margin:0; text-align:center; }
.bz-team__photo{ position:relative; border-radius:var(--bz-radius-lg); overflow:hidden; box-shadow:var(--bz-shadow-sm); }
.bz-team__photo img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.bz-team__nick{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--bz-font-script); color:#fff; font-size:2.6rem; line-height:1; text-shadow:0 2px 16px rgba(13,42,60,.8); }
.bz-team__name{ display:block; font-family:var(--bz-font-display); font-weight:700; color:var(--bz-blue); font-size:.85rem; text-transform:uppercase; letter-spacing:.09em; margin-top:.55rem; }
.bz-team__role{ display:block; color:var(--bz-ink-soft); font-size:.85rem; margin-top:.1rem; }
/* media inserito nel corpo (immagini e video) */
.bz-prose figure{ margin:2rem 0; }
.bz-prose img, .bz-prose video{ display:block; width:100%; height:auto; border-radius:var(--bz-radius-lg); box-shadow:var(--bz-shadow-sm); }
.bz-prose figure img, .bz-prose figure video{ margin:0; }
.bz-prose figcaption{ margin-top:.5rem; font-size:.9rem; color:var(--bz-ink-soft,#6b7378); text-align:center; }
/* galleria di foto (si aprono ingrandite in lightbox) */
.bz-prose .bz-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem; margin:2rem 0; }
.bz-prose .bz-gallery a{ display:block; margin:0; }
.bz-prose .bz-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; margin:0; cursor:zoom-in; box-shadow:var(--bz-shadow-sm); transition:transform .25s var(--bz-ease); }
.bz-prose .bz-gallery a:hover img{ transform:scale(1.03); }
.bz-prose img{ cursor:zoom-in; }
/* lightbox */
.bz-lightbox{ position:fixed; inset:0; z-index:9999; background:rgba(9,26,38,.93); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; }
.bz-lightbox.is-open{ opacity:1; pointer-events:auto; }
.bz-lightbox img{ max-width:92vw; max-height:88vh; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:pointer; }
.bz-lightbox__btn{ position:absolute; background:none; border:0; color:#fff; font-size:2.6rem; cursor:pointer; padding:.6rem 1rem; line-height:1; opacity:.82; z-index:1; }
.bz-lightbox__btn:hover{ opacity:1; }
.bz-lightbox__close{ top:.4rem; right:1rem; }
.bz-lightbox__prev{ left:.4rem; top:50%; transform:translateY(-50%); }
.bz-lightbox__next{ right:.4rem; top:50%; transform:translateY(-50%); }
@media (max-width:640px){ .bz-lightbox__btn{ font-size:2rem; } }

/* ============================================================
   FLIP-MENU — menu del Bistrò sfogliabile (tab laterali, stile
   de Groene Afslag) in versione Bazzario. Vedi scripts/main.js
   ============================================================ */
.bz-flip{ position:relative; max-width:1020px; margin:0 auto; padding-right:2.6rem; }
.bz-flip__stage{ position:relative; background:#fff; border-radius:var(--bz-radius-lg);
  box-shadow:var(--bz-shadow); min-height:clamp(440px,62vh,600px); overflow:hidden; }
.bz-flip__page{ position:absolute; inset:0; padding:clamp(1.6rem,4vw,3.2rem);
  display:flex; flex-direction:column; opacity:0; pointer-events:none;
  transform:translateX(6%) rotateY(8deg); transform-origin:left center;
  transition:opacity .5s var(--bz-ease), transform .55s var(--bz-ease); overflow:auto; }
.bz-flip__page.is-active{ opacity:1; pointer-events:auto; transform:none; }
.bz-flip__page.is-prev{ transform:translateX(-6%) rotateY(-8deg); }
.bz-flip__kicker{ font-family:var(--bz-font-display); font-weight:700; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bz-berry); }
.bz-flip__title{ font-family:var(--bz-font-script); color:var(--bz-blue);
  font-size:clamp(2.4rem,5vw,3.6rem); line-height:.9; margin:.1rem 0 1rem; }
.bz-flip__page .bz-menu-item{ padding:.6rem 0; }
/* tab laterali (linguette che sporgono a destra) */
.bz-flip__tabs{ position:absolute; top:1.4rem; right:0; display:flex; flex-direction:column; gap:.35rem; z-index:4; }
.bz-flip__tabs button{ writing-mode:vertical-rl; text-orientation:mixed;
  background:var(--bz-paper-2); color:var(--bz-blue); border:0; cursor:pointer;
  font-family:var(--bz-font-display); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:1em .55em; border-radius:0 10px 10px 0; box-shadow:var(--bz-shadow-sm);
  transition:background .3s, color .3s, transform .3s; }
.bz-flip__tabs button:hover{ transform:translateX(3px); }
.bz-flip__tabs button.is-active{ background:var(--bz-berry); color:#fff; }
/* controlli sfoglia */
.bz-flip__nav{ display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:1.4rem; }
.bz-flip__nav button{ width:3rem; height:3rem; border-radius:50%; border:1.5px solid var(--bz-line);
  background:#fff; color:var(--bz-blue); font-size:1.2rem; cursor:pointer; transition:background .3s,color .3s,border-color .3s; }
.bz-flip__nav button:hover{ background:var(--bz-blue); color:#fff; border-color:var(--bz-blue); }
.bz-flip__count{ font-family:var(--bz-font-display); font-weight:700; color:var(--bz-ink-soft); font-size:.9rem; letter-spacing:.05em; }
@media (max-width:640px){
  .bz-flip{ padding-right:2.2rem; }
  .bz-flip__tabs button{ font-size:.64rem; padding:.8em .45em; }
}

/* ============================================================
   FLIP-MENU A IMMAGINI — sfoglia le pagine reali del menu (Canva)
   ============================================================ */
.bz-flipimg{ max-width:1080px; margin:0 auto; }
.bz-flipimg__stage{ position:relative; aspect-ratio:1123/794; background:#0d1418;
  border-radius:var(--bz-radius-lg); overflow:hidden; box-shadow:var(--bz-shadow-lg); }
.bz-flipimg__page{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#0d1418;
  opacity:0; pointer-events:none; transform:translateX(4%) rotateY(6deg); transform-origin:left center;
  transition:opacity .45s var(--bz-ease), transform .5s var(--bz-ease); }
.bz-flipimg__page.is-active{ opacity:1; pointer-events:auto; transform:none; }
.bz-flipimg__sections{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1.3rem; }
.bz-flipimg__sections button{ font-family:var(--bz-font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase; background:var(--bz-paper-2); color:var(--bz-blue);
  border:0; border-radius:var(--bz-radius-pill); padding:.6em 1.1em; cursor:pointer; transition:background .3s,color .3s; }
.bz-flipimg__sections button:hover{ background:var(--bz-paper-3); }
.bz-flipimg__sections button.is-active{ background:var(--bz-berry); color:#fff; }

/* ============================================================
   FACT CARDS v2 — più appeal: badge icona, accento, hover
   (in coda: vince sulle regole precedenti)
   ============================================================ */
.bz-fact{ padding: 2rem 1.7rem 1.8rem; position:relative; overflow:hidden;
  border:1px solid var(--bz-line); box-shadow: var(--bz-shadow-sm);
  transition: transform .4s var(--bz-ease), box-shadow .4s var(--bz-ease), border-color .4s; }
.bz-fact::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px;
  background: var(--bz-berry); transform: scaleX(0); transform-origin:left;
  transition: transform .45s var(--bz-ease); }
.bz-fact:hover{ transform: translateY(-5px); box-shadow: var(--bz-shadow); border-color: transparent; }
.bz-fact:hover::before{ transform: scaleX(1); }
.bz-fact__ico{ display:inline-flex; align-items:center; justify-content:center;
  width:3.6rem; height:3.6rem; border-radius: var(--bz-radius); margin-bottom:1.1rem;
  background: rgba(22,86,123,.09); color: var(--bz-blue); line-height:0;
  transition: background .4s var(--bz-ease), color .4s var(--bz-ease), transform .4s var(--bz-ease); }
.bz-fact__ico .bz-ico{ width:2rem; height:2rem; }
.bz-fact:hover .bz-fact__ico{ background: var(--bz-blue); color:#fff; transform: rotate(-4deg); }
.bz-fact h3{ font-size:1.22rem; letter-spacing:-.01em; }
.bz-fact p{ font-size:.98rem; }
/* varianti di colore badge per la pagina Spiaggia (azzurro) e blocchi berry */
.bz-section--alt .bz-fact__ico{ background: rgba(164,39,88,.08); color: var(--bz-berry); }
.bz-section--alt .bz-fact:hover .bz-fact__ico{ background: var(--bz-berry); color:#fff; }
.bz-section--alt .bz-fact::before{ background: var(--bz-blue); }

/* ============================================================
   GALLERY — foto a filo, senza padding né angoli arrotondati
   ============================================================ */
.bz-gallery{ display:flex; gap:4px; overflow-x:auto; padding:0; margin-top: clamp(1.5rem,3vw,2.5rem);
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.bz-gallery img{ flex:none; width: clamp(260px, 58vw, 620px); aspect-ratio:4/3; object-fit:cover;
  scroll-snap-align:start; box-shadow: var(--bz-shadow-sm); }

/* ============================================================
   LIGHTBOX — foto gallery a tutto schermo (click per aprire)
   ============================================================ */
.bz-gallery img{ cursor: zoom-in; }
.bz-lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(13,33,46,.95);
  display:none; align-items:center; justify-content:center; padding: clamp(1rem,4vw,3rem); }
.bz-lightbox.is-open{ display:flex; animation: bz-lbin .25s var(--bz-ease); }
@keyframes bz-lbin{ from{opacity:0} to{opacity:1} }
.bz-lightbox img{ max-width:min(1400px,94vw); max-height:86vh; width:auto; height:auto; object-fit:contain;
  border-radius: var(--bz-radius); box-shadow: var(--bz-shadow-lg); }
.bz-lightbox button{ position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; cursor:pointer;
  width:3.2rem; height:3.2rem; border-radius:50%; font-size:1.6rem; line-height:1; display:flex;
  align-items:center; justify-content:center; transition:background .3s, transform .3s; backdrop-filter:blur(6px); }
.bz-lightbox button:hover{ background:var(--bz-berry); transform:scale(1.06); }
.bz-lightbox__close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.bz-lightbox__prev{ left:clamp(.6rem,3vw,2rem); top:50%; transform:translateY(-50%); }
.bz-lightbox__next{ right:clamp(.6rem,3vw,2rem); top:50%; transform:translateY(-50%); }
.bz-lightbox__prev:hover,.bz-lightbox__next:hover{ transform:translateY(-50%) scale(1.06); }
.bz-lightbox__count{ position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%; transform:translateX(-50%);
  color:#fff; font-family:var(--bz-font-display); font-weight:700; font-size:.85rem; letter-spacing:.1em;
  background:rgba(0,0,0,.35); padding:.5em 1em; border-radius:var(--bz-radius-pill); }
@media (max-width:640px){ .bz-lightbox button{ width:2.6rem;height:2.6rem;font-size:1.3rem; } }

/* ===== Filtro categorie Magazine (chip su sfondo chiaro) ===== */
.bz-catfilter{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:0 0 2.6rem; }
.bz-catfilter .bz-chip{ background:#fff; border:1px solid var(--bz-line,#e4ded3); color:var(--bz-ink-soft,#5b5750);
  backdrop-filter:none; cursor:pointer; text-decoration:none; transition:color .15s, border-color .15s, background .15s; }
.bz-catfilter .bz-chip:hover{ border-color:var(--bz-blue); color:var(--bz-blue); }
.bz-catfilter .bz-chip.is-active{ background:var(--bz-blue); border-color:var(--bz-blue); color:#fff; }

/* ===== Link nel footer bottom (privacy/cookie/flowence) ===== */
.bz-footer__bottom a{ color:#a9c6d4; text-decoration:underline; }
.bz-footer__bottom a:hover{ color:#fff; }

/* ===== Dettaglio camera: specifiche, piantina, servizi ===== */
.bz-specs{ display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; margin:.4rem 0 1.6rem; }
.bz-specs span{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--bz-font-display); font-weight:700; font-size:.9rem; color:var(--bz-blue); }
.bz-specs .bz-ico{ width:1.15em; height:1.15em; }

.bz-plans{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center; margin-top:2rem; }
.bz-plan{ background:#fff; border:1px solid var(--bz-line,#e4ded3); border-radius:var(--bz-radius-lg,6px); padding:1.4rem; box-shadow:var(--bz-shadow-sm); flex:1 1 420px; max-width:640px; margin:0; }
.bz-plan img{ width:100%; height:auto; object-fit:contain; background:#fff; }
.bz-plan figcaption{ margin-top:.8rem; text-align:center; font-family:var(--bz-font-display); font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bz-ink-soft); }

.bz-amenities{ list-style:none; padding:0; margin:2.2rem auto 0; max-width:var(--bz-container-wide); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.bz-amenities li{ display:flex; align-items:center; gap:.8rem; background:#fff; border:1px solid var(--bz-line,#e4ded3); border-radius:12px; padding:.9rem 1rem; font-weight:600; font-size:.95rem; color:var(--bz-ink); box-shadow:var(--bz-shadow-sm); transition:transform .16s var(--bz-ease), box-shadow .16s, border-color .16s; }
.bz-amenities li:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(22,74,99,.35); border-color:var(--bz-blue); }
.bz-amenities .bz-fact__ico{ width:2.7rem; height:2.7rem; flex:none; display:grid; place-items:center; background:var(--bz-paper-2,#efe9df); border-radius:10px; color:var(--bz-blue); }
.bz-amenities .bz-ico{ width:1.35rem; height:1.35rem; }
@media (max-width:1000px){ .bz-amenities{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .bz-amenities{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .bz-amenities{ grid-template-columns:1fr; } }

/* ===== Prenotazione: pulsante CTA + widget Scidoo come modale ===== */
/* il widget Scidoo è nascosto di default: si apre in primo piano dal pulsante */
#widget_calendario_container_js{ display:none !important; }
/* secondo elemento flottante di Scidoo ("PRENOTA ORA"): ridondante, sempre nascosto */
.prenota_ora_widget{ display:none !important; }
body.bz-book-open #widget_calendario_container_js{
  display:block !important;
  position:fixed !important; right:auto !important; bottom:auto !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:210 !important; max-height:90vh !important; overflow:auto !important;
}
/* sfondo scuro */
.bz-book-backdrop{ position:fixed; inset:0; z-index:205; background:rgba(12,32,42,.6);
  opacity:0; visibility:hidden; transition:opacity .22s; }
body.bz-book-open .bz-book-backdrop{ opacity:1; visibility:visible; }
/* pulsante CTA blu flottante in basso al centro */
.bz-book-fab{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:96;
  display:inline-flex; align-items:center; gap:.55em; padding:.9em 1.7em; border:none; border-radius:999px;
  background:var(--bz-blue); color:#fff; cursor:pointer;
  font-family:var(--bz-font-display); font-weight:700; font-size:.92rem; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 12px 30px -8px rgba(22,74,99,.6); transition:transform .16s, box-shadow .16s; }
.bz-book-fab:hover{ transform:translateX(-50%) translateY(-2px); box-shadow:0 18px 38px -10px rgba(22,74,99,.72); }
.bz-book-fab svg{ width:1.15em; height:1.15em; fill:currentColor; }
body.bz-book-open .bz-book-fab{ opacity:0; pointer-events:none; }
/* chiudi */
.bz-book-close{ position:fixed; top:14px; right:14px; z-index:215; width:46px; height:46px; border-radius:999px;
  border:none; background:#fff; color:var(--bz-blue); font-size:1.6rem; line-height:1; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.28); display:none; place-items:center; }
body.bz-book-open .bz-book-close{ display:grid; }
@media (max-width:600px){ .bz-book-fab{ font-size:.82rem; padding:.85em 1.3em; } }

/* ============================================================
   WIDGET SCIDOO — riveste il calendario col design system.
   Il markup e il CSS del widget arrivano da scidoo.com e non si
   possono modificare: qui si sovrascrivono, per questo servono
   selettori specifici e !important. Se un giorno Scidoo cambia
   le classi, il widget torna al suo aspetto ma CONTINUA A
   FUNZIONARE: qui non c'e' nessuna logica, solo apparenza.
   Nato perche' il widget e' largo 200px (e' una barra laterale)
   e centrato come modale risultava minuscolo e illeggibile.
   ============================================================ */
body.bz-book-open #widget_calendario_container_js{
  width:min(420px, calc(100vw - 2rem)) !important;
  max-width:none !important;
  padding:1.7rem 1.5rem 1.4rem !important;
  background:var(--bz-white) !important;
  border:1px solid var(--bz-line) !important;
  border-radius:var(--bz-radius-lg, 8px) !important;
  box-shadow:0 30px 80px -20px rgba(12,32,42,.45) !important;
  font-family:var(--bz-font-body) !important;
  color:var(--bz-ink) !important;
}
/* intestazione "Miglior Prezzo Garantito" */
#widget_calendario_container_js .titolo_calen_modal{
  font-family:var(--bz-font-display) !important; color:var(--bz-blue) !important;
  font-weight:800 !important; font-size:1.05rem !important; line-height:1.25 !important;
  text-align:center !important; margin:0 0 1.3rem !important; padding:0 !important;
  background:none !important; border:none !important; text-transform:none !important;
}
#widget_calendario_container_js .titolo_calen_modal span{
  display:block !important; font-family:var(--bz-font-script) !important;
  font-weight:400 !important; font-size:1.5rem !important; color:var(--bz-berry) !important;
  text-transform:none !important; letter-spacing:0 !important; margin-top:.1em !important;
}
/* etichette dei campi */
#widget_calendario_container_js .titoli_tab{
  font-family:var(--bz-font-display) !important; font-weight:700 !important;
  font-size:.72rem !important; letter-spacing:.12em !important; text-transform:uppercase !important;
  color:var(--bz-stone) !important; margin:0 0 .4rem !important; padding:0 !important;
  background:none !important; border:none !important;
}
/* select native -> campi del design system */
#widget_calendario_container_js select.select_tab{
  width:100% !important; box-sizing:border-box !important;
  font-family:var(--bz-font-body) !important; font-size:.95rem !important; color:var(--bz-ink) !important;
  padding:.6em .8em !important; height:auto !important;
  background:var(--bz-paper) !important; border:1px solid var(--bz-line) !important;
  border-radius:6px !important; box-shadow:none !important;
}
#widget_calendario_container_js select.select_tab:focus-visible{
  outline:2px solid var(--bz-azure) !important; outline-offset:2px !important;
}
/* blocchi data: numero grande + mese/giorno accanto */
#widget_calendario_container_js .js_parent_data{
  display:grid !important; grid-template-columns:1fr 1fr; gap:.9rem !important; margin-bottom:1rem !important;
}
#widget_calendario_container_js #div_data_arrivo,
#widget_calendario_container_js #div_data_partenza{
  width:auto !important; float:none !important; margin:0 !important; padding:0 !important;
}
#widget_calendario_container_js .div_input_inline{
  display:flex !important; align-items:center !important; gap:.5rem !important;
  background:var(--bz-paper) !important; border:1px solid var(--bz-line) !important;
  border-radius:6px !important; padding:.5rem .65rem !important; cursor:pointer !important;
}
#widget_calendario_container_js .stringa_giorno{
  font-family:var(--bz-font-display) !important; font-weight:800 !important;
  font-size:1.5rem !important; line-height:1 !important; color:var(--bz-blue) !important;
}
#widget_calendario_container_js .stringa_mese,
#widget_calendario_container_js .stringa_week{
  font-family:var(--bz-font-body) !important; font-size:.76rem !important;
  color:var(--bz-ink-soft) !important; line-height:1.35 !important; text-transform:none !important;
}
/* adulti / bambini affiancati */
#widget_calendario_container_js .tabella_restrizioni{ width:100% !important; margin-bottom:1.1rem !important; }
#widget_calendario_container_js .tabella_restrizioni td{ padding:0 .35rem 0 0 !important; vertical-align:top !important; }
#widget_calendario_container_js .select_multistruttura{ width:100% !important; margin-bottom:1rem !important; }
#widget_calendario_container_js .select_multistruttura td{ padding:0 !important; }
/* azione primaria: la pillola bordeaux del sito */
#widget_calendario_container_js .prenota_ora_btn{
  display:block !important; width:100% !important; box-sizing:border-box !important;
  margin:.2rem 0 0 !important; padding:.95em 1.4em !important;
  background:var(--bz-berry) !important; color:#fff !important; border:none !important;
  border-radius:999px !important; cursor:pointer !important;
  font-family:var(--bz-font-display) !important; font-weight:700 !important;
  font-size:.86rem !important; letter-spacing:.06em !important; text-transform:uppercase !important;
  box-shadow:0 10px 24px -10px rgba(164,39,88,.7) !important; transition:background .16s !important;
}
#widget_calendario_container_js .prenota_ora_btn:hover{ background:var(--bz-berry-700) !important; }
/* azione secondaria "Contattaci" */
#widget_calendario_container_js .scrivi_btn{
  display:inline !important; width:auto !important; margin:0 !important; padding:0 !important;
  background:none !important; border:none !important; box-shadow:none !important;
  font-family:var(--bz-font-display) !important; font-weight:700 !important; font-size:.8rem !important;
  color:var(--bz-blue) !important; text-decoration:underline !important; cursor:pointer !important;
  text-transform:none !important; letter-spacing:0 !important;
}
#widget_calendario_container_js .scrivi_btn:hover{ color:var(--bz-berry) !important; }
/* la X di Scidoo: la chiusura e' quella del sito, in alto a destra */
#widget_calendario_container_js .calen_modal_close{ display:none !important; }

@media (max-width:600px){
  body.bz-book-open #widget_calendario_container_js{ padding:1.4rem 1.1rem 1.2rem !important; }
  #widget_calendario_container_js .js_parent_data{ grid-template-columns:1fr; gap:.7rem !important; }
}

/* ============================================================
   TESTATA SEZIONE "COSA FARE" — parola grande + riga a mano
   dentro un solo <h1>: l'aspetto e' quello di prima, ma il
   titolo letto dai motori e' la frase completa.
   ============================================================ */
.bz-typehero__h1{ margin:0; font:inherit; font-weight:inherit; letter-spacing:inherit; }
.bz-typehero__h1 .bz-typehero__sub{ display:block; }
/* La parola grande era un <h1>, quindi un blocco. Ora sta dentro l'H1 come
   span: senza questo torna in linea, e il calcolo della dimensione la riduce
   a larghezza zero. */
.bz-typehero__h1 .bz-typehero__word{ display:block; }
/* La frase descrittiva dell'H1 quando non c'e' un sottotitolo visibile: la
   pagina resta identica, ma il titolo letto dai motori dice di cosa parla. */
.bz-typehero__descr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   RIQUADRO DI RICHIAMO dentro gli articoli (CTA).
   Sta nel corpo HTML dell'articolo, quindi deve reggere anche
   se il redattore lo sposta o lo duplica dall'editor.
   ============================================================ */
.bz-cta-box{
  margin: clamp(2rem,4vw,3rem) 0;
  padding: clamp(1.4rem,3vw,2rem);
  border: 1px solid rgba(22,86,123,.28);
  /* i token del sito sono 4px e 6px: qui si usa quello, non un raggio proprio */
  border-radius: var(--bz-radius-lg);
  background: rgba(22,86,123,.06);
}
.bz-cta-box p{ margin: 0 0 .9rem; }
.bz-cta-box p:last-child{ margin-bottom: 0; display:flex; flex-wrap:wrap; gap:.7rem; }
@media (max-width: 520px){
  .bz-cta-box p:last-child{ flex-direction: column; align-items: stretch; }
  .bz-cta-box .bz-btn{ text-align: center; }
}

/* ============================================================
   LINK DENTRO I TESTI.
   La regola globale e' "a { color: inherit; text-decoration: none }",
   giusta per menu e pulsanti ma non per i testi: nel corpo di un
   articolo un collegamento risultava identico al testo normale e
   nessuno lo cliccava. Qui torna visibile, con la sottolineatura
   che si ispessisce al passaggio del mouse.
   ============================================================ */
.bz-prose a:not(.bz-btn),
.bz-cta-box a:not(.bz-btn){
  color: var(--bz-berry);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(164,39,88,.45);
  transition: text-decoration-color .25s ease, text-decoration-thickness .25s ease;
}
.bz-prose a:not(.bz-btn):hover,
.bz-cta-box a:not(.bz-btn):hover{
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}
.bz-prose a:not(.bz-btn):focus-visible,
.bz-cta-box a:not(.bz-btn):focus-visible{
  outline: 2px solid var(--bz-berry); outline-offset: 3px; border-radius: 2px;
}

/* Il pulsante del menu usava il carattere tipografico ☰: sostituito da un SVG,
   che si disegna sempre uguale su qualunque sistema e non e' un'emoji. */
.bz-burger__icon{ display:block; margin:0 auto; }

/* ============================================================
   PERCORSO DI NAVIGAZIONE (breadcrumb).
   Negli articoli il percorso esisteva solo nei dati strutturati:
   i motori lo vedevano, il lettore no. Ora e' visibile e cliccabile.
   L'ultima voce (la pagina corrente) non e' un link.
   ============================================================ */
.bz-breadcrumb{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .55rem;
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bz-ink-soft); margin:0 0 .9rem;
}
.bz-breadcrumb a{ color:var(--bz-blue); text-decoration:none; border-bottom:1px solid transparent; }
.bz-breadcrumb a:hover{ border-bottom-color:currentColor; }
.bz-breadcrumb a:focus-visible{ outline:2px solid var(--bz-blue); outline-offset:3px; border-radius:2px; }
.bz-breadcrumb__sep{ opacity:.5; }
.bz-breadcrumb--center{ justify-content:center; }
/* Il titolo dell'articolo puo' essere lungo: qui va accorciato, non mandato a capo
   tre volte. Su schermo stretto sparisce del tutto: la parte utile sono i link. */
.bz-breadcrumb__qui{
  max-width:32ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  opacity:.75;
}
@media (max-width: 560px){ .bz-breadcrumb__qui{ display:none; } }

/* ============================================================
   CALENDARIO EVENTI (categoria News ed Eventi).
   La data sta a sinistra e resta leggibile a colpo d'occhio:
   chi guarda un calendario cerca prima il giorno, poi il resto.
   ============================================================ */
.bz-calendario{ max-width:72ch; margin: clamp(2rem,4vw,3rem) auto 0; }
.bz-calendario__lista{ list-style:none; margin:1.6rem 0 0; padding:0; }
.bz-calendario__voce{
  display:grid; grid-template-columns: 8.5rem 1fr; gap:0 1.4rem;
  padding: 1.1rem 0; border-top:1px solid rgba(22,86,123,.16);
}
.bz-calendario__voce:last-child{ border-bottom:1px solid rgba(22,86,123,.16); }
.bz-calendario__voce.is-evidenza .bz-calendario__titolo{ font-weight:800; }
.bz-calendario__voce.is-evidenza .bz-calendario__data{ color:var(--bz-berry); }
.bz-calendario__data{
  font-family:var(--bz-font-display); font-weight:700; text-transform:uppercase;
  font-size:.9rem; letter-spacing:.04em; color:var(--bz-blue); padding-top:.15rem;
}
.bz-calendario__titolo{ font-size:1.12rem; line-height:1.3; margin:0 0 .25rem; }
.bz-calendario__dove{ font-size:.9rem; color:var(--bz-ink-soft); margin:0 0 .35rem; }
.bz-calendario__testo{ margin:0; }
.bz-calendario__nota{ margin-top:1.4rem; font-size:.86rem; color:var(--bz-ink-soft); font-style:italic; }
@media (max-width: 620px){
  .bz-calendario__voce{ grid-template-columns:1fr; gap:.3rem; }
  .bz-calendario__data{ padding-top:0; }
}

/* ============================================================
   DATARIO — le griglie mensili sopra l'elenco eventi.
   Stile Bazzario: token del progetto, niente colori nuovi.
   Il giorno con un appuntamento e' pieno di bordeaux; gli altri
   restano leggibili ma silenziosi, cosi' il colpo d'occhio funziona.
   ============================================================ */
.bz-calendario__aiuto{ text-align:center; color:var(--bz-ink-soft); font-size:.94rem; margin:.6rem 0 1.6rem; }

.bz-datario{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; }
.bz-datario__mese{ flex:0 1 20rem; }
.bz-datario__nome{
  font-family:var(--bz-font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:.92rem; color:var(--bz-blue);
  text-align:center; margin:0 0 .7rem;
}
.bz-datario__griglia{ display:grid; grid-template-columns:repeat(7,1fr); gap:.28rem; }
.bz-datario__giorno-nome{
  text-align:center; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bz-ink-soft); text-decoration:none; border:0; padding-bottom:.3rem;
}
.bz-datario__vuota{ aspect-ratio:1; }
.bz-datario__dado{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:.9rem; color:var(--bz-ink-soft);
  border:1px solid transparent;
}
.bz-datario__dado.is-oggi{ border-color:rgba(22,86,123,.45); font-weight:700; color:var(--bz-blue); }
/* il giorno con appuntamento: pieno, cliccabile */
a.bz-datario__dado.is-evento{
  background:var(--bz-berry); color:#fff; font-weight:700; text-decoration:none;
  transition:transform .18s var(--bz-ease,ease), box-shadow .18s ease;
}
a.bz-datario__dado.is-evento:hover{ transform:scale(1.12); box-shadow:0 3px 12px rgba(164,39,88,.35); }
a.bz-datario__dado.is-evento:focus-visible{ outline:2px solid var(--bz-blue); outline-offset:2px; }
a.bz-datario__dado.is-evento.is-oggi{ box-shadow:0 0 0 2px rgba(22,86,123,.5); }

/* cose che durano: fascia a parte, fuori dalla griglia */
.bz-datario__durata{
  max-width:60ch; margin:2rem auto 0; padding:1rem 1.2rem;
  border-left:3px solid var(--bz-azure); background:rgba(22,86,123,.05); border-radius:0 var(--bz-radius) var(--bz-radius) 0;
}
.bz-datario__durata-titolo{
  margin:0 0 .4rem; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--bz-blue);
}
.bz-datario__durata ul{ margin:0; padding-left:1.1rem; }
.bz-datario__durata li{ margin:.2rem 0; font-size:.95rem; }

.bz-calendario__elenco-titolo{
  margin:2.6rem 0 0; font-size:.8rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bz-blue); text-align:center;
}
/* la voce raggiunta dal datario si fa notare per un attimo */
.bz-calendario__voce:target{ background:rgba(164,39,88,.07); border-radius:var(--bz-radius); }
.bz-calendario__voce:target .bz-calendario__data{ color:var(--bz-berry); }
@media (max-width: 520px){ .bz-datario__mese{ flex:1 1 100%; } }

/* ============================================================
   RICONOSCIMENTI IN FONDO — tre strisce orizzontali.
   1) i loghi del territorio
   2) i giudizi (solo se ci sono punteggi)
   3) il contributo pubblico, striscia bassa prima dei dati
      amministrativi

   ATTENZIONE ALLA SPECIFICITA': nel footer esiste gia'
   ".bz-footer ul { flex-direction: column }" (0,1,1), che batte
   ".bz-partner" (0,1,0) e impilava i loghi uno sotto l'altro.
   Per questo i selettori qui sotto passano da .bz-riconoscimenti:
   .bz-riconoscimenti .bz-partner vale (0,2,0) e vince.
   ============================================================ */
.bz-riconoscimenti{
  margin-top: clamp(2.4rem,5vw,3.4rem);
  padding-top: clamp(1.8rem,4vw,2.6rem);
  border-top:1px solid rgba(169,198,212,.22);
}

/* --- 1) striscia dei loghi --- */
.bz-riconoscimenti .bz-partner{
  list-style:none; margin:0 0 clamp(1.6rem,3.5vw,2.4rem); padding:0;
  display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap: clamp(1.4rem,4vw,3rem);
}
.bz-riconoscimenti .bz-partner li{ display:flex; flex:0 1 auto; margin:0; }
/* proporzioni molto diverse fra i file (500x354, 320x225, 368x529, 240x298):
   altezza uniforme e contain, altrimenti si deformano */
.bz-riconoscimenti .bz-partner img{
  height:64px; width:auto; object-fit:contain;
  opacity:.78; transition:opacity .25s ease;
}
.bz-riconoscimenti .bz-partner li:hover img{ opacity:1; }

/* --- 2) striscia dei giudizi --- */
.bz-votimini{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.7rem clamp(1.4rem,4vw,2.6rem);
  /* stesso raggio delle card citazioni (.bz-review): 4px, il sito e poco arrotondato */
  background:#fff; border-radius:var(--bz-radius); padding:.9rem 1.2rem;
  margin-bottom: clamp(1rem,2.5vw,1.4rem);
}
.bz-votimini__titolo{
  margin:0; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bz-ink-soft); flex:0 0 auto;
}
.bz-riconoscimenti .bz-votimini__lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline;
  gap:.6rem clamp(1.2rem,3vw,2.2rem); flex:1 1 auto;
}
.bz-riconoscimenti .bz-votimini__lista li{ margin:0; display:flex; align-items:baseline; gap:.4rem; }
.bz-votimini__lista a{ text-decoration:none; color:inherit; display:flex; align-items:baseline; gap:.4rem; }
.bz-votimini__lista a:hover .bz-votimini__voto{ color:var(--bz-berry); }
.bz-votimini__lista a:focus-visible{ outline:2px solid var(--bz-blue); outline-offset:3px; border-radius:var(--bz-radius); }
.bz-votimini__voto{
  font-family:var(--bz-font-display); font-weight:800; line-height:1;
  font-size:1.5rem; color:var(--bz-blue); transition:color .2s ease;
}
.bz-votimini__voto small{ font-size:.5em; font-weight:600; color:var(--bz-ink-soft); }
.bz-votimini__portale{ font-size:.78rem; color:var(--bz-ink-soft); }
.bz-votimini__nota{ margin:0; font-size:.72rem; color:var(--bz-ink-soft); font-style:italic; flex:0 0 auto; }

/* --- 3) striscia bassa del contributo pubblico --- */
.bz-psr{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.7rem clamp(1.2rem,3vw,2rem);
  /* stesso raggio delle card citazioni (.bz-review): 4px */
  background:#fff; border-radius:var(--bz-radius); padding:.85rem 1.2rem;
}
.bz-psr__loghi{ height:34px; width:auto; object-fit:contain; flex:0 0 auto; }
.bz-psr__testo{ margin:0; font-size:.76rem; line-height:1.45; color:#3d5a68; flex:1 1 22rem; }
.bz-psr__link{
  flex:0 0 auto; font-size:.78rem; font-weight:600; color:var(--bz-blue);
  text-decoration:underline; text-underline-offset:.16em;
  text-decoration-color:rgba(22,86,123,.4); white-space:nowrap;
}
.bz-psr__link:hover{ text-decoration-color:currentColor; }
.bz-psr__link:focus-visible{ outline:2px solid var(--bz-blue); outline-offset:2px; border-radius:2px; }

@media (max-width: 900px){
  .bz-riconoscimenti .bz-partner{ justify-content:center; gap:1.4rem 2rem; }
  .bz-riconoscimenti .bz-partner img{ height:52px; }
}
@media (max-width: 520px){
  .bz-riconoscimenti .bz-partner li{ flex:0 0 calc(50% - 1rem); justify-content:center; }
  .bz-riconoscimenti .bz-partner img{ height:44px; }
  .bz-psr, .bz-votimini{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   DICONO DI NOI — i punteggi dei portali di recensione.
   Il numero e' la cosa che si legge da lontano: tutto il resto
   gli sta intorno in piccolo. Card cliccabile per intero.
   ============================================================ */
.bz-voti{
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(1rem,2.5vw,1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  max-width:66rem; margin-inline:auto;
}
.bz-voti__card{
  background:#fff; border:1px solid rgba(22,86,123,.14); border-radius:var(--bz-radius);
  text-align:center; transition:transform .22s ease, box-shadow .22s ease;
}
.bz-voti__card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(13,51,70,.10); }
.bz-voti__link, .bz-voti__card > :not(a){ display:block; padding:1.5rem 1rem; }
.bz-voti__link{ text-decoration:none; color:inherit; padding:1.5rem 1rem; }
.bz-voti__link:focus-visible{ outline:2px solid var(--bz-blue); outline-offset:3px; border-radius:var(--bz-radius); }
.bz-voti__card p{ margin:0; }
.bz-voti__portale{
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bz-ink-soft); margin-bottom:.55rem !important;
}
.bz-voti__numero{
  font-family:var(--bz-font-display); font-weight:800; line-height:1;
  font-size:clamp(2.4rem,5vw,3.2rem); color:var(--bz-blue);
}
.bz-voti__su{ font-size:.42em; font-weight:600; color:var(--bz-ink-soft); margin-left:.1em; }
.bz-voti__etichetta{
  font-family:var(--bz-font-script); font-size:1.5rem; color:var(--bz-berry); margin-top:.35rem !important;
}
.bz-voti__quante{ font-size:.84rem; color:var(--bz-ink-soft); margin-top:.4rem !important; }
.bz-voti__nota{
  text-align:center; font-size:.82rem; color:var(--bz-ink-soft);
  font-style:italic; margin-top:1.4rem;
}


/* Ripiego mostrato al posto di un modulo di terze parti, finche' manca il consenso.
   Stesso raggio delle card citazioni: il sito e' poco arrotondato. */
.bz-ripiego{
  background:var(--bz-white); border:1px solid rgba(22,86,123,.14);
  border-radius:var(--bz-radius); padding:1.4rem 1.5rem; margin:0 0 1.4rem;
}
.bz-ripiego__testo{ margin:0 0 1rem; color:var(--bz-ink-soft, inherit); }
.bz-ripiego__azioni{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0; }


/* Un comando che apre un pannello non e' un link: <a href="#"> non porta da
   nessuna parte, e per un motore di ricerca e' un collegamento non
   sottoponibile a scansione. Si usa <button>, e gli si fa ereditare l'aspetto
   dai fratelli in modo che a schermo non cambi niente. */
.bz-linkbtn{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline; text-underline-offset:.18em;
}
.bz-linkbtn:hover{ text-decoration:none; }
.bz-linkbtn:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:var(--bz-radius); }