/* HOME FOR YOU · homeforyouolbia.it
   foglio unico, generato da _build/comune.py: non modificare a mano.
   Base: template HOME FOR YOU 1a categoria, ricolorato con la
   palette HOME FOR YOU (mare di Tavolara, cotto, bougainvillea). */

:root {
  --white: #FFFFFF;
  --off: #FAF6F0;
  --warm: #F0E7DA;
  --warm-2: #E7DAC8;
  --sand: #D9C6A8;
  --sea: #0E7C94;
  --sea-2: #0C6B80;
  --sea-3: #0A5D70;
  --deep: #0A4351;
  --ink: #12333D;
  --ink-80: rgba(18,51,61,0.82);
  --ink-60: rgba(18,51,61,0.58);
  --ink-40: rgba(18,51,61,0.38);
  --ink-20: rgba(18,51,61,0.18);
  --line: #E3D8C8;
  --accent: #C6A063;
  --accent-2: #B87A5E;
  --font: 'Inter', -apple-system, system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --gutter: clamp(20px, 4vw, 64px);
  --max: 1320px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
main { display: block; width: 100%; }
body > nav, body > main, body > main > section, body > main > header, body > footer {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
}
body { font-family: var(--font); background: var(--white); color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "kern", "liga"; }
img { max-width: 100%; display: block; background: var(--warm); }
img.broken { background: var(--warm-2); }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
::selection { background: var(--sea); color: var(--white); }
/* NAV */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px var(--gutter); display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.86); backdrop-filter: blur(20px); border-bottom: 1px solid transparent; transition: all 0.4s var(--ease); }
.nav.scrolled { border-bottom-color: var(--line); padding: 14px var(--gutter); }
.nav-brand { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); transition: font-size 0.4s var(--ease); }
.nav.scrolled .nav-brand { font-size: 21px; }
@media (max-width: 600px) { .nav-brand { font-size: 20px; } .nav.scrolled .nav-brand { font-size: 18px; } }
.nav-menu { display: flex; gap: 32px; list-style: none; }
.nav-menu a { font-size: 14px; font-weight: 500; color: var(--ink-80); transition: color 0.3s; }
.nav-menu a:hover { color: var(--ink); }
.nav-cta { background: var(--ink); color: var(--white); padding: 11px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px; }
.nav-cta::after { content: "→"; font-weight: 400; }
.nav-cta:hover { background: var(--sea-3); transform: translateY(-1px); }
.nav-burger { display: none; }
@media (max-width: 900px) {
  .nav-menu li:not(.nav-lang) { display: none; }
  .nav-menu { gap: 0; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; flex-direction: column; gap: 4px; padding: 8px; cursor: pointer; }
  .nav-burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.4s ease, opacity 0.3s ease; }
}
/* Language switcher */
.lang-switch { position: relative; display: inline-flex; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); border: 1px solid var(--line); background: var(--white); cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.lang-btn:hover { background: var(--sea); border-color: var(--sea); color: var(--white); }
.lang-cur { font-weight: 600; }
.lang-arr { font-size: 9px; transition: transform 0.3s; opacity: 0.6; }
.lang-switch.open .lang-arr { transform: rotate(180deg); }
.lang-dropdown { position: absolute; top: calc(100% + 10px); right: 0; background: var(--white); border-radius: 12px; padding: 6px; min-width: 180px; box-shadow: 0 16px 40px -10px rgba(18,51,61,0.2); display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s; z-index: 200; border: 1px solid var(--line); }
.lang-switch.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dropdown button { text-align: left; padding: 11px 14px; border-radius: 8px; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--ink); background: transparent; border: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s, color 0.2s; }
.lang-dropdown button .code { font-size: 11px; letter-spacing: 0.12em; opacity: 0.4; font-weight: 600; }
.lang-dropdown button:hover { background: var(--off); color: var(--sea-3); }
.lang-dropdown button.active { background: var(--sea); color: var(--white); }
.lang-dropdown button.active .code { color: var(--white); opacity: 0.7; }
/* Google Translate cleanup */
.skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-te-banner-frame, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display: none !important; background: transparent !important; box-shadow: none !important; }
#goog-gt-tt { display: none !important; }
.goog-te-gadget { font-size: 0 !important; height: 0 !important; overflow: hidden !important; }
font[style*="background-color"], font.goog-text-highlight { background: transparent !important; box-shadow: none !important; }
/* Mobile drawer */
.nav-drawer { position: fixed; inset: 0; z-index: 999; background: var(--off); color: var(--ink); display: flex; flex-direction: column; justify-content: flex-start; gap: 0; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease); padding: 100px var(--gutter) 56px; overflow-y: auto; }
.nav-drawer::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 86px; height: 1px; background: var(--line); }
.nav-drawer.open { opacity: 1; visibility: visible; }
.nav-drawer .drawer-tag { position: absolute; top: 32px; left: var(--gutter); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sea-3); font-weight: 600; opacity: 0; transition: opacity 0.4s var(--ease) 0.15s; }
.nav-drawer .drawer-tag::before { content: ""; width: 6px; height: 6px; background: var(--sea); border-radius: 50%; }
.nav-drawer.open .drawer-tag { opacity: 1; }
.nav-drawer a:not(.drawer-cta) { color: var(--ink); font-family: var(--serif); font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 500; line-height: 1; padding: 22px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; opacity: 0; transform: translateX(-8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), color 0.3s, padding-left 0.3s; letter-spacing: -0.01em; }
.nav-drawer a:not(.drawer-cta)::after { content: "→"; font-size: 18px; color: var(--ink-40); transition: transform 0.3s var(--ease), color 0.3s; font-family: var(--font); }
.nav-drawer a:not(.drawer-cta):hover { color: var(--sea-3); padding-left: 8px; }
.nav-drawer a:not(.drawer-cta):hover::after { color: var(--sea); transform: translateX(4px); }
.nav-drawer.open a { opacity: 1; transform: translateX(0); }
.nav-drawer.open a:nth-of-type(1) { transition-delay: 0.08s; }
.nav-drawer.open a:nth-of-type(2) { transition-delay: 0.14s; }
.nav-drawer.open a:nth-of-type(3) { transition-delay: 0.20s; }
.nav-drawer.open a:nth-of-type(4) { transition-delay: 0.26s; }
.nav-drawer.open a:nth-of-type(5) { transition-delay: 0.32s; }
.nav-drawer.open a:nth-of-type(6) { transition-delay: 0.38s; }
.nav-drawer .drawer-cta { margin-top: 32px; padding: 16px 28px; background: var(--sea-3); color: var(--white); border-radius: 12px; font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; align-self: flex-start; transition: background 0.3s, transform 0.3s; display: inline-flex; align-items: center; gap: 10px; }
.nav-drawer .drawer-cta:hover { background: var(--deep); transform: translateY(-2px); }
.nav-drawer-close { position: absolute; top: 22px; right: var(--gutter); width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; background: var(--white); cursor: pointer; transition: background 0.3s, border-color 0.3s, color 0.3s; }
.nav-drawer-close:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* LOGO helpers */
.logo-img { display: block; height: auto; max-width: 100%; }
.logo-img.on-dark { filter: brightness(0) invert(1) opacity(0.95); }
/* HERO */
.hero { position: relative; padding: 160px var(--gutter) 80px; min-height: 100vh; min-height: 100dvh; background: var(--white); display: flex; flex-direction: column; justify-content: center; max-width: 1600px; margin: 0 auto; }
@media (max-height: 800px) { .hero { padding: 130px var(--gutter) 60px; } .hero h1 { font-size: clamp(2.4rem, 5vw, 4.6rem) !important; } }
.hero-inner { max-width: var(--max); margin: 0 auto; width: 100%; }
.hero-pre { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--warm); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--sea-3); margin-bottom: 28px; }
.hero-pre .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sea); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(14,124,148,0.5); } 50% { box-shadow: 0 0 0 7px rgba(14,124,148,0); } }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.8rem, 6.5vw, 5.8rem); line-height: 1.02; letter-spacing: -0.02em; max-width: 20ch; margin-bottom: 28px; color: var(--ink); }
.hero h1 .highlight { color: var(--sea-3); font-weight: 500; font-style: italic; }
.hero .lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-60); max-width: 54ch; margin-bottom: 44px; line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn { padding: 14px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s var(--ease); font-family: var(--font); }
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--sea-3); transform: translateY(-1px); }
.btn-primary::after { content: "→"; font-weight: 400; transition: transform 0.3s; }
.btn-primary:hover::after { transform: translateX(3px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink-20); }
.btn-ghost:hover { background: var(--off); border-color: var(--ink); }
.hero-grid-img { margin-top: 64px; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 460px; }
.hero-grid-img > div { border-radius: 12px; overflow: hidden; cursor: pointer; position: relative; }
.hero-grid-img > div.big { grid-row: span 2; }
.hero-grid-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hero-grid-img > div:hover img { transform: scale(1.05); }
.hero-grid-img > div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(18,51,61,0.18)); opacity: 0; transition: opacity 0.4s; }
.hero-grid-img > div:hover::after { opacity: 1; }
@media (max-width: 900px) { .hero-grid-img { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; } .hero-grid-img > div.big { grid-row: auto; grid-column: span 2; aspect-ratio: 16/9; } .hero-grid-img > div:not(.big) { aspect-ratio: 1; } }
@media (max-width: 600px) { .hero { padding-top: 120px; } .hero-grid-img { grid-template-columns: 1fr; } .hero-grid-img > div.big { grid-column: auto; } }
section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sea-3); background: rgba(14,124,148,0.14); padding: 6px 12px; border-radius: 6px; margin-bottom: 20px; }
h2.title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4.8vw, 3.8rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
h2.title .acc { color: var(--sea-3); font-weight: 500; font-style: italic; }
.subtitle { font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--ink-60); margin-top: 16px; max-width: 56ch; }
/* TRUST BAR */
.trust { background: var(--off); padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; text-align: center; }
.trust-item .icon { width: 36px; height: 36px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--line); border-radius: 9px; }
.trust-item .icon svg { width: 18px; height: 18px; color: var(--sea-3); }
.trust-item .l { font-size: 11px; color: var(--ink-60); font-weight: 500; letter-spacing: 0.04em; }
.trust-item .v { font-size: 14px; color: var(--ink); font-weight: 700; margin-top: 2px; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (max-width: 500px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
/* INTRO */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.intro-text h2 { margin-bottom: 24px; }
.intro-text p { color: var(--ink-80); margin-bottom: 16px; max-width: 52ch; line-height: 1.7; }
.intro-text .signature { margin-top: 28px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--sea-3); }
.intro-text .meta-row { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; gap: 32px; flex-wrap: wrap; }
.intro-text .meta-row > div { font-size: 13px; }
.intro-text .meta-row .v { font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--ink); line-height: 1; }
.intro-text .meta-row .l { color: var(--ink-60); margin-top: 6px; }
.intro-img-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intro-img-stack > div { aspect-ratio: 3/4; overflow: hidden; border-radius: 16px; background: var(--warm); }
.intro-img-stack > div:nth-child(1) { margin-top: 40px; }
.intro-img-stack > div:nth-child(2) { margin-bottom: 40px; }
.intro-img-stack img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.intro-img-stack > div:hover img { transform: scale(1.05); }
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } .intro-img-stack { grid-template-columns: 1fr 1fr; } }
/* SPAZI / SPACES */
.spaces { background: var(--off); }
.spaces-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 56px; }
.space-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-bottom: 80px; }
.space-block:last-child { margin-bottom: 0; }
.space-block.flip { direction: rtl; }
.space-block.flip > * { direction: ltr; }
.space-info .num { font-family: var(--serif); font-style: italic; font-size: 60px; color: var(--sea); opacity: 0.65; line-height: 1; margin-bottom: 14px; }
.space-info h3 { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 14px; color: var(--ink); }
.space-info p { color: var(--ink-80); line-height: 1.65; margin-bottom: 18px; max-width: 46ch; }
.space-info .features { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.space-info .features li { background: var(--white); border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink-80); display: inline-flex; align-items: center; gap: 6px; }
.space-info .features li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sea); }
.space-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 460px; }
.space-gallery > div { overflow: hidden; border-radius: 12px; background: var(--warm); cursor: pointer; }
.space-gallery > div:first-child { grid-row: span 2; }
.space-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.space-gallery > div:hover img { transform: scale(1.05); }
.space-gallery.three > div:first-child { grid-row: span 2; }
.space-gallery.three { grid-template-columns: 2fr 1fr; }
.space-gallery.four { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.space-gallery.four > div:first-child { grid-row: span 2; }
.space-gallery.five { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.space-gallery.five > div:first-child { grid-row: span 2; grid-column: span 1; }
@media (max-width: 900px) {
  .space-block, .space-block.flip { grid-template-columns: 1fr; direction: ltr; }
  .space-gallery { height: 360px; }
}
@media (max-width: 560px) {
  .space-gallery, .space-gallery.three, .space-gallery.four, .space-gallery.five { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; height: auto; }
  .space-gallery > div:first-child { grid-row: span 1; grid-column: span 2; aspect-ratio: 4/3; }
  .space-gallery.three > div:nth-child(n+4), .space-gallery.four > div:nth-child(n+5), .space-gallery.five > div:nth-child(n+6) { display: none; }
}
/* COMFORT */
.comfort-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.cf-item { background: var(--off); padding: 28px; border-radius: 12px; border: 1px solid transparent; transition: all 0.3s var(--ease); }
.cf-item:hover { background: var(--warm); border-color: var(--sea); transform: translateY(-3px); }
.cf-item .icon { width: 44px; height: 44px; background: var(--white); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.cf-item .icon svg { width: 22px; height: 22px; color: var(--sea-3); }
.cf-item h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.cf-item p { font-size: 13px; color: var(--ink-60); line-height: 1.5; }
@media (max-width: 900px) { .comfort-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .comfort-grid { grid-template-columns: 1fr; } }
.extra-services { margin-top: 40px; padding: 28px 32px; background: linear-gradient(135deg, var(--warm), var(--off)); border-radius: 16px; border: 1px solid var(--line); display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.extra-services .es-title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.extra-services .es-items { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; color: var(--ink-80); }
.extra-services .es-items div { display: flex; align-items: center; gap: 8px; }
.extra-services .es-items strong { color: var(--sea-3); font-weight: 700; }
/* LOCATION / DINTORNI */
.location { background: var(--deep); color: var(--white); overflow: hidden; position: relative; }
.location::before { content: ""; position: absolute; top: -200px; right: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(14,124,148,0.15), transparent 60%); border-radius: 50%; pointer-events: none; }
.location h2.title { color: var(--white); }
.location h2.title .acc { color: var(--sea); }
.location .subtitle { color: rgba(255,255,255,0.7); }
.location .section-tag { background: rgba(14,124,148,0.18); color: var(--sea); }
.loc-head { text-align: center; max-width: 700px; margin: 0 auto 64px; }
.loc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.loc-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; transition: all 0.5s var(--ease); cursor: pointer; }
.loc-card:hover { background: rgba(255,255,255,0.07); border-color: var(--sea); transform: translateY(-5px); }
.loc-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.loc-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.loc-card:hover .img-wrap img { transform: scale(1.08); }
.loc-card .img-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(18,51,61,0.6)); }
.loc-card .img-wrap .dist { position: absolute; top: 14px; left: 14px; background: var(--sea-3); color: var(--white); padding: 5px 11px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; z-index: 2; }
.loc-card .body { padding: 22px; }
.loc-card h4 { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--white); margin-bottom: 8px; letter-spacing: -0.01em; }
.loc-card p { font-size: 13.5px; color: rgba(255,255,255,0.7); line-height: 1.55; }
@media (max-width: 900px) { .loc-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .loc-cards { grid-template-columns: 1fr; } }
.loc-distances { margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.loc-dist { padding: 22px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.loc-dist .km { font-family: var(--serif); font-style: italic; font-size: 36px; color: var(--sea); line-height: 1; font-weight: 500; }
.loc-dist .pl { font-size: 14px; color: var(--white); margin-top: 8px; font-weight: 500; }
.loc-dist .ty { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 900px) { .loc-distances { grid-template-columns: repeat(2, 1fr); } }
/* GALLERY */
.gallery { background: var(--off); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; margin-top: 56px; }
.g-i { overflow: hidden; border-radius: 12px; cursor: pointer; background: var(--warm); position: relative; }
.g-i::after { content: ""; position: absolute; inset: 0; background: rgba(18,51,61,0); transition: background 0.4s; pointer-events: none; }
.g-i:hover::after { background: rgba(18,51,61,0.15); }
.g-i img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.g-i:hover img { transform: scale(1.05); }
.g-i.tall { grid-row: span 2; }
.g-i.wide { grid-column: span 2; }
.gallery-cta { text-align: center; margin-top: 36px; }
.gallery-cta button { background: var(--ink); color: var(--white); padding: 14px 28px; border-radius: 8px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.gallery-cta button::after { content: "→"; transition: transform 0.3s; }
.gallery-cta button:hover { background: var(--sea-3); }
.gallery-cta button:hover::after { transform: translateX(3px); }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .g-i.wide { grid-column: span 1; } }
/* QUOTE / EXPERIENCE */
.exp { background: var(--white); padding: clamp(60px, 8vw, 100px) 0; }
.exp-inner { max-width: 900px; margin: 0 auto; text-align: center; padding: 0 var(--gutter); }
.exp blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }
.exp .quote-mark { font-family: var(--serif); font-size: 100px; line-height: 0.4; color: var(--sea); display: block; margin-bottom: 24px; }
.exp .author { margin-top: 32px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); font-weight: 600; }
/* TESTIMONIALS */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.t-card { background: var(--off); padding: 28px; border-radius: 16px; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform 0.4s var(--ease); }
.t-card:hover { transform: translateY(-4px); }
.t-card .stars { color: var(--accent); font-size: 14px; margin-bottom: 12px; letter-spacing: 0.06em; }
.t-card p { font-size: 15px; color: var(--ink-80); line-height: 1.6; flex: 1; margin-bottom: 20px; font-style: italic; }
.t-card .who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.t-card .av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--sea), var(--sea-3)); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.t-card .name { font-size: 13.5px; font-weight: 600; }
.t-card .meta-t { font-size: 11.5px; color: var(--ink-60); margin-top: 1px; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }
/* FAQ */
.faq { background: var(--off); }
.faq-wrap { max-width: 800px; margin: 0 auto; padding-top: 24px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.3s; }
.faq-item.open { border-color: var(--sea); }
.faq-q { width: 100%; text-align: left; padding: 20px 24px; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); }
.faq-q .plus { width: 26px; height: 26px; border-radius: 7px; background: var(--off); display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; transition: transform 0.3s, background 0.3s; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); background: var(--sea); color: var(--white); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a-inner { padding: 0 24px 20px; color: var(--ink-60); font-size: 14.5px; line-height: 1.65; }
.faq-item.open .faq-a { max-height: 400px; }
/* BOOKING */
.booking { background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
.booking::before { content: ""; position: absolute; bottom: -200px; left: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(14,124,148,0.1), transparent 60%); border-radius: 50%; }
.booking h2.title { color: var(--white); }
.booking h2.title .acc { color: var(--sea); }
.booking .subtitle { color: rgba(255,255,255,0.7); }
.booking .section-tag { background: rgba(14,124,148,0.2); color: var(--sea); }
.booking-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 80px); align-items: start; position: relative; }
.b-info .row { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.12); display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.b-info .row:first-of-type { border-top: 1px solid rgba(255,255,255,0.12); }
.b-info small { font-size: 10.5px; letter-spacing: 0.08em; color: var(--sea); font-weight: 700; text-transform: uppercase; }
.b-info .row span, .b-info .row a { font-size: 15px; color: var(--white); }
.b-info .note { margin-top: 32px; padding: 18px 20px; background: rgba(14,124,148,0.1); border: 1px solid rgba(14,124,148,0.4); border-radius: 12px; font-size: 13.5px; color: rgba(255,255,255,0.85); line-height: 1.55; }
@media (max-width: 900px) { .booking-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .b-info .row { grid-template-columns: 1fr; } }
.map-section { padding: 0; }
.map-section iframe { width: 100%; height: 480px; border: 0; display: block; }
footer { background: var(--white); color: var(--ink); padding: 64px 0 24px; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding: 0 var(--gutter); max-width: var(--max); margin: 0 auto; }
.footer-brand h4 { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 14px; }
.footer-brand p { color: var(--ink-60); font-size: 14px; max-width: 36ch; line-height: 1.6; }
.footer-col h5 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; color: var(--ink-60); font-size: 14px; margin-bottom: 8px; transition: color 0.3s; }
.footer-col a:hover { color: var(--sea-3); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 40px; padding: 22px var(--gutter) 0; max-width: var(--max); margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-60); }
.footer-bottom a { color: var(--sea-3); font-weight: 600; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px) { .footer-top { grid-template-columns: 1fr; gap: 28px; } }
.lb { position: fixed; inset: 0; z-index: 9990; background: rgba(18,51,61,0.96); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s; backdrop-filter: blur(14px); }
.lb.open { opacity: 1; visibility: visible; }
.lb-img { max-width: 92vw; max-height: 86vh; border-radius: 8px; }
.lb-close, .lb-arrow { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: var(--white); transition: background 0.3s; }
.lb-close { top: 24px; right: 24px; }
.lb-close::before, .lb-close::after { content:""; position:absolute; width: 16px; height: 1.5px; background: currentColor; }
.lb-close::before { transform: rotate(45deg); }
.lb-close::after { transform: rotate(-45deg); }
.lb-arrow.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-arrow.next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-arrow:hover { background: var(--sea); }
.lb-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0.04em; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1!important; transform:none!important; } }
.flatpickr-calendar { background: var(--white)!important; border: 1px solid var(--line)!important; border-radius: 12px!important; box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15)!important; font-family: var(--font)!important; }
.flatpickr-current-month { font-weight: 600!important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--sea-3)!important; border-color: var(--sea-3)!important; }
.flatpickr-day:hover { background: var(--off)!important; }
.flatpickr-day.today { border-color: var(--sea)!important; color: var(--sea-3)!important; }
/* LEGAL / COOKIE */
.map-container { position: relative; width: 100%; height: 480px; }
.map-container iframe { width: 100%; height: 100%; border: 0; display: block; }
.footer-legal { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; padding: 18px var(--gutter) 0; max-width: var(--max); margin: 0 auto 4px; font-size: 12px; color: var(--ink-60); border-top: 1px solid var(--line); }
.footer-legal a { color: var(--ink-60); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.footer-legal a:hover { color: var(--sea-3); border-bottom-color: var(--sea-3); }
.footer-legal .sep { width: 3px; height: 3px; background: var(--ink-20); border-radius: 50%; }
@media (max-width: 600px) { .footer-legal { gap: 12px; font-size: 11px; } .footer-legal .sep { display: none; } }
.cookie-banner { position: fixed; left: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 150; background: var(--ink); color: var(--white); border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05); padding: clamp(20px, 2.5vw, 26px) clamp(22px, 3vw, 32px); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), opacity .4s var(--ease); max-width: 1080px; margin: 0 auto; }
.cookie-banner.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner-text { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.82); }
.cookie-banner-text h5 { font-weight: 700; font-size: 16px; color: var(--white); margin-bottom: 6px; letter-spacing: -0.01em; }
.cookie-banner-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner-text a:hover { color: var(--white); }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.cookie-btn { font-family: var(--font); font-size: 12px; font-weight: 600; padding: 11px 18px; border-radius: 8px; cursor: pointer; transition: all .25s ease; border: 1px solid transparent; white-space: nowrap; }
.cookie-btn.ghost { background: transparent; color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.22); }
.cookie-btn.ghost:hover { color: var(--white); border-color: var(--white); }
.cookie-btn.primary { background: var(--sea); color: var(--deep); border-color: var(--sea); }
.cookie-btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.cookie-btn.link { background: transparent; color: rgba(255,255,255,0.62); border: 0; padding: 11px 10px; text-decoration: underline; text-underline-offset: 4px; }
.cookie-btn.link:hover { color: var(--white); }
@media (max-width: 820px) { .cookie-banner { grid-template-columns: 1fr; gap: 16px; padding: 20px 20px 18px; } .cookie-banner-actions { justify-content: flex-start; } .cookie-btn { flex: 1 1 calc(50% - 5px); text-align: center; } .cookie-btn.link { flex-basis: 100%; } }
.legal-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 48px); background: rgba(18,51,61,0.72); backdrop-filter: saturate(1.1) blur(6px); -webkit-backdrop-filter: saturate(1.1) blur(6px); opacity: 0; transition: opacity .35s var(--ease); }
.legal-overlay.open { display: flex; opacity: 1; }
.legal-card { background: var(--white); color: var(--ink); width: 100%; max-width: 860px; max-height: 92vh; border-radius: 10px; box-shadow: 0 40px 100px rgba(0,0,0,0.3), 0 0 0 1px rgba(18,51,61,0.06); display: flex; flex-direction: column; overflow: hidden; transform: translateY(16px) scale(0.98); transition: transform .45s var(--ease); }
.legal-overlay.open .legal-card { transform: translateY(0) scale(1); }
.legal-head { padding: 26px clamp(22px, 4vw, 40px) 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; background: var(--white); position: sticky; top: 0; z-index: 2; }
.legal-head .kicker { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sea-3); font-weight: 700; display: block; margin-bottom: 6px; }
.legal-head h3 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.legal-head h3 em { font-style: italic; color: var(--sea-3); font-weight: 500; }
.legal-head .updated { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-40); margin-top: 6px; }
.legal-close { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ink-20); background: transparent; cursor: pointer; color: var(--ink); transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.legal-close:hover { background: var(--ink); color: var(--white); border-color: var(--ink); transform: rotate(90deg); }
.legal-close::before, .legal-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: currentColor; }
.legal-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.legal-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.legal-body { padding: 24px clamp(22px, 4vw, 40px) clamp(28px, 5vw, 48px); overflow-y: auto; flex: 1; font-size: 14.5px; line-height: 1.7; color: var(--ink-80); overscroll-behavior: contain; }
.legal-body::-webkit-scrollbar { width: 8px; }
.legal-body::-webkit-scrollbar-thumb { background: var(--ink-20); border-radius: 4px; }
.legal-body::-webkit-scrollbar-thumb:hover { background: var(--ink-40); }
.legal-body .lead { font-size: 15px; color: var(--ink-80); margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.legal-body h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink); margin-top: 30px; margin-bottom: 12px; letter-spacing: -0.01em; scroll-margin-top: 120px; }
.legal-body h4:first-of-type { margin-top: 0; }
.legal-body h5 { font-family: var(--font); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-top: 20px; margin-bottom: 10px; }
.legal-body p { margin-bottom: 12px; }
.legal-body p strong, .legal-body li strong { color: var(--ink); font-weight: 600; }
.legal-body ul, .legal-body ol { padding-left: 20px; margin-bottom: 14px; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--sea-3); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--sea-2); }
.legal-body .callout { background: var(--warm); border-left: 3px solid var(--sea-3); padding: 14px 18px; margin: 18px 0; border-radius: 6px; font-size: 14px; }
.legal-body .placeholder { display: inline-block; background: rgba(198,160,99, 0.14); color: var(--accent-2); padding: 1px 8px; border-radius: 3px; font-weight: 600; font-size: 0.95em; border: 1px dashed var(--accent); }
.legal-body table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 13.5px; }
.legal-body table th, .legal-body table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-body table th { font-weight: 700; color: var(--ink); background: var(--warm); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.legal-body table td { color: var(--ink-80); }
.legal-body .cookie-block { background: var(--off); border: 1px solid var(--line); border-radius: 8px; padding: 18px 22px; margin: 16px 0; }
.legal-body .cookie-block h5 { margin-top: 0; margin-bottom: 8px; }
.legal-body .cookie-block .tag { display: inline-block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-left: 6px; font-weight: 600; vertical-align: 1px; }
.legal-body .tag-tech { background: rgba(18,51,61,0.1); color: var(--ink); }
.legal-body .tag-third { background: rgba(14,124,148,0.2); color: var(--sea-3); }
.legal-body .cookie-block dl { margin-top: 8px; font-size: 13px; }
.legal-body .cookie-block dl div { display: grid; grid-template-columns: 150px 1fr; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.legal-body .cookie-block dl div:last-child { border-bottom: 0; }
.legal-body .cookie-block dt { font-weight: 700; color: var(--ink); font-size: 12px; }
.legal-body .cookie-block dd { color: var(--ink-80); font-size: 13px; }
.legal-body .foot-note { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-60); font-style: italic; }
.cookie-prefs-card { max-width: 620px; }
.cookie-prefs-body { padding: 22px 32px 8px; overflow-y: auto; flex: 1; font-size: 14px; line-height: 1.6; color: var(--ink-80); }
.cookie-prefs-body p { margin-bottom: 12px; }
.cookie-prefs-body a { color: var(--sea-3); text-decoration: underline; text-underline-offset: 3px; }
.cookie-category { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: flex-start; }
.cookie-category:last-of-type { border-bottom: 0; }
.cookie-category-title { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.cookie-category-desc { font-size: 13px; color: var(--ink-60); line-height: 1.55; }
.cookie-category .status { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-40); margin-top: 6px; font-weight: 600; }
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider { position: absolute; inset: 0; background: var(--ink-20); border-radius: 999px; cursor: pointer; transition: background .2s ease; }
.switch .slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: var(--white); border-radius: 50%; transition: transform .2s var(--ease); }
.switch input:checked + .slider { background: var(--sea-3); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:disabled + .slider { background: rgba(10,93,112,0.5); cursor: not-allowed; }
.cookie-prefs-foot { padding: 18px 32px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cookie-prefs-foot .cookie-btn.ghost { color: var(--ink-60); border-color: var(--ink-20); }
.cookie-prefs-foot .cookie-btn.ghost:hover { color: var(--ink); border-color: var(--ink); }
.cookie-prefs-foot .cookie-btn.primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cookie-prefs-foot .cookie-btn.primary:hover { background: var(--sea-3); border-color: var(--sea-3); }
@media (max-width: 500px) { .cookie-prefs-body, .cookie-prefs-foot, .legal-head { padding-left: 20px; padding-right: 20px; } .cookie-prefs-foot { flex-direction: column; } .cookie-prefs-foot .cookie-btn { width: 100%; text-align: center; } }
/* =========================================================
   MULTIPAGE EXTENSIONS · camere / la-casa / dintorni
   (riusa solo le variabili e i componenti gia' definiti sopra)
========================================================= */
h1.sec-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); max-width: 22ch; }
h1.sec-title .acc { color: var(--sea-3); font-weight: 500; font-style: italic; }
.breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-60); margin-bottom: 22px; transition: color 0.3s; }
.breadcrumb::before { content: '\2190'; color: var(--sea-3); transition: transform 0.3s; display: inline-block; }
.breadcrumb:hover { color: var(--sea-3); }
.breadcrumb:hover::before { transform: translateX(-3px); }
.page-hero { padding: clamp(120px, 18vw, 168px) 0 56px; background: var(--off); border-bottom: 1px solid var(--line); }
.page-hero .sec-lead { margin-top: 20px; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--ink-60); max-width: 62ch; line-height: 1.65; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { background: var(--white); border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink-80); display: inline-flex; align-items: center; gap: 6px; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sea); flex-shrink: 0; }
/* ---- CAMERE.HTML · presentazione editoriale "La Casa" ---- */
.lc-band { position: relative; aspect-ratio: 21/8; overflow: hidden; border-radius: 16px; margin-top: 8px; }
.lc-band img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .lc-band { aspect-ratio: 4/3; border-radius: 12px; } }
.lc-editorial { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; padding: clamp(64px, 8vw, 100px) 0; }
.lc-editorial .prose p { font-size: 16.5px; color: var(--ink-80); line-height: 1.75; }
.lc-editorial .prose p + p { margin-top: 18px; }
.lc-editorial .prose p:first-of-type::first-letter { font-family: var(--serif); font-style: italic; font-size: 3.6em; float: left; line-height: 0.8; padding: 6px 10px 0 0; color: var(--sea-3); font-weight: 500; }
.lc-stats { display: flex; flex-direction: column; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lc-stat { background: var(--off); padding: 20px 24px; display: flex; justify-content: space-between; align-items: baseline; }
.lc-stat .v { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1; }
.lc-stat .l { font-size: 12.5px; color: var(--ink-60); font-weight: 500; }
@media (max-width: 900px) { .lc-editorial { grid-template-columns: 1fr; } }
.lc-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lc-strip > div { aspect-ratio: 4/3; overflow: hidden; border-radius: 12px; background: var(--warm); }
.lc-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.lc-strip > div:hover img { transform: scale(1.06); }
@media (max-width: 700px) { .lc-strip { grid-template-columns: 1fr 1fr; } .lc-strip > div:first-child { grid-column: span 2; } }
.lc-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: clamp(48px, 6vw, 72px) 0; }
.lc-hl { text-align: center; padding: 32px 24px; background: var(--off); border-radius: 14px; }
.lc-hl .icon { width: 48px; height: 48px; margin: 0 auto 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.lc-hl .icon svg { width: 22px; height: 22px; color: var(--sea-3); }
.lc-hl h4 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.lc-hl p { font-size: 13.5px; color: var(--ink-60); line-height: 1.55; }
@media (max-width: 700px) { .lc-highlights { grid-template-columns: 1fr; } }
.lc-cta-band { background: var(--ink); color: var(--white); border-radius: 20px; padding: clamp(48px, 7vw, 80px) clamp(28px, 6vw, 72px); text-align: center; margin-bottom: clamp(64px, 8vw, 100px); position: relative; overflow: hidden; }
.lc-cta-band::before { content: ""; position: absolute; top: -160px; right: -80px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(14,124,148,0.18), transparent 60%); border-radius: 50%; pointer-events: none; }
.lc-cta-band h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -0.01em; margin-bottom: 14px; position: relative; }
.lc-cta-band h2 em { font-style: italic; color: var(--sea); }
.lc-cta-band p { color: rgba(255,255,255,0.7); max-width: 52ch; margin: 0 auto 30px; position: relative; }
.lc-cta-band .btn-primary { position: relative; background: var(--white); color: var(--ink); }
.lc-cta-band .btn-primary:hover { background: var(--sea-3); color: var(--white); }
.lc-cta-band .btn-ghost { position: relative; border-color: rgba(255,255,255,0.35); color: var(--white); margin-left: 10px; }
.lc-cta-band .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
/* ---- LA-CASA.HTML · annuncio stile Airbnb (pd- = property detail) ---- */
.pd-wrap { max-width: 1120px; }
.pd-hero-sec { padding: clamp(120px, 18vw, 168px) 0 0; background: var(--white); }
.pd-title-block { margin-top: 4px; }
.pd-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; color: var(--ink-80); }
.pd-subline .dot { color: var(--ink-40); }
.pd-badge { margin-left: 4px; padding: 5px 12px; background: var(--warm); border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--sea-3); letter-spacing: 0.02em; }
.pd-mosaic-sec { padding: 26px 0 0; background: var(--white); }
.pd-mosaic { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; aspect-ratio: 16/7.4; }
.pd-mosaic-main, .pd-mosaic-cell { position: relative; overflow: hidden; cursor: pointer; background: var(--warm); display: block; border: 0; padding: 0; }
.pd-mosaic-main img, .pd-mosaic-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.pd-mosaic-main:hover img, .pd-mosaic-cell:hover img { transform: scale(1.05); }
.pd-mosaic-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.pd-show-all { position: absolute; right: 14px; bottom: 14px; z-index: 3; background: var(--white); color: var(--ink); border: 1px solid var(--ink); padding: 10px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px rgba(18,51,61,0.18); transition: background 0.3s, color 0.3s; font-family: var(--font); }
.pd-show-all svg { width: 15px; height: 15px; }
.pd-show-all:hover { background: var(--ink); color: var(--white); }
@media (max-width: 900px) { .pd-mosaic { grid-template-columns: 1fr; aspect-ratio: 4/3; border-radius: 10px; } .pd-mosaic-grid { display: none; } .pd-show-all { right: 12px; bottom: 12px; } }
.pd-body-sec { padding: 54px 0 8px; background: var(--white); }
.pd-body-grid { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: start; }
@media (max-width: 900px) { .pd-body-grid { grid-template-columns: 1fr; gap: 8px; } }
.pd-col-main { min-width: 0; }
.pd-divider { height: 1px; background: var(--line); margin: 32px 0; }
.pd-host-row { display: flex; align-items: center; gap: 16px; }
.pd-host-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 20px; font-weight: 600; flex: none; }
.pd-host-row b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.pd-host-row span { font-size: 13px; color: var(--ink-60); }
.pd-highlights { display: flex; flex-direction: column; gap: 22px; }
.pd-highlight { display: flex; gap: 16px; align-items: flex-start; }
.pd-highlight .ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--off); color: var(--sea-3); display: flex; align-items: center; justify-content: center; }
.pd-highlight .ico svg { width: 19px; height: 19px; }
.pd-highlight b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.pd-highlight p { font-size: 13.5px; color: var(--ink-60); line-height: 1.5; }
.pd-section h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 2.3vw, 27px); color: var(--ink); letter-spacing: -0.01em; margin-bottom: 16px; }
.pd-section .prose p { font-size: 15.5px; color: var(--ink-80); line-height: 1.7; }
.pd-section .prose p + p { margin-top: 16px; }
.pd-sleep-card { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; background: var(--off); max-width: 420px; }
.pd-sleep-card + .pd-sleep-card { margin-top: 14px; }
.pd-sleep-card .ico { flex: none; width: 42px; height: 42px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); color: var(--sea-3); display: flex; align-items: center; justify-content: center; }
.pd-sleep-card .ico svg { width: 20px; height: 20px; }
.pd-sleep-card b { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.pd-sleep-card p { font-size: 13px; color: var(--ink-60); margin-top: 2px; }
.pd-amenities { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
@media (max-width: 560px) { .pd-amenities { grid-template-columns: 1fr; } }
.pd-amenity { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--ink-80); }
.pd-amenity .ico { flex: none; width: 28px; height: 28px; color: var(--sea-3); display: flex; align-items: center; justify-content: center; }
.pd-amenity .ico svg { width: 19px; height: 19px; }
.pd-col-side { position: relative; align-self: stretch; }
.pd-guests.open .pd-guests-toggle svg { transform: rotate(180deg); }
.pd-guests.open .pd-guests-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.pd-note { margin-top: 12px; font-size: 11.5px; color: var(--ink-60); text-align: center; line-height: 1.5; }
.pd-know-sec { padding: 60px 0 110px; background: var(--off); border-top: 1px solid var(--line); margin-top: 44px; }
.pd-know-title { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3vw, 32px); color: var(--ink); margin-bottom: 36px; letter-spacing: -0.015em; }
.pd-know-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pd-know-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 30px 28px 22px; box-shadow: 0 18px 40px -30px rgba(18,51,61,0.18); }
.pd-know-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--off); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--sea-3); margin-bottom: 16px; }
.pd-know-ico svg { width: 21px; height: 21px; }
@media (max-width: 900px) { .pd-know-grid { grid-template-columns: 1fr; gap: 18px; } }
.pd-know-grid h4 { font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pd-know-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pd-know-grid li { font-size: 14px; color: var(--ink-80); line-height: 1.55; padding: 12px 0 12px 24px; position: relative; border-bottom: 1px dashed var(--line); }
.pd-know-grid li:last-child { border-bottom: 0; padding-bottom: 2px; }
.pd-know-grid li::before { content: ''; position: absolute; left: 4px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pd-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(18,51,61,0.97); display: none; flex-direction: column; }
.pd-lightbox.open { display: flex; }
.pd-lightbox-top { display: flex; justify-content: flex-end; padding: 18px clamp(16px, 3vw, 32px); }
.pd-lightbox-close { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); cursor: pointer; }
.pd-lightbox-close::before, .pd-lightbox-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--white); }
.pd-lightbox-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.pd-lightbox-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.pd-lightbox-close:hover { background: rgba(255,255,255,0.18); }
.pd-lightbox-scroll { flex: 1; overflow-y: auto; padding-bottom: 60px; }
.pd-lightbox-scroll .row { max-width: 880px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 20px); display: flex; flex-direction: column; gap: 18px; }
.pd-lightbox-scroll img { width: 100%; border-radius: 10px; display: block; }
.pd-lightbox-counter { text-align: center; color: rgba(255,255,255,0.55); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 0 18px; }
.pd-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--off); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px rgba(18,51,61,0.14); padding: 12px var(--gutter); display: none; align-items: center; justify-content: space-between; gap: 14px; }
.pd-mobile-bar-dates { font-size: 12px; color: var(--ink-60); line-height: 1.3; }
.pd-mobile-bar-dates b { display: block; font-size: 13.5px; color: var(--ink); }
.pd-mobile-bar-btn { flex: none; background: var(--ink); color: var(--white); padding: 13px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 0; cursor: pointer; font-family: var(--font); }
@media (max-width: 900px) { .pd-mobile-bar { display: flex; } body { padding-bottom: 82px; } }
/* ---- DINTORNI.HTML · griglia magazine ---- */
.mag-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 12px; }
.mag-card .go { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--sea-3); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s; }
.mag-card .go::after { content: '\2192'; transition: transform 0.3s; }
.mag-card:hover .go::after { transform: translateX(4px); }
@media (max-width: 800px) { .mag-grid { grid-template-columns: 1fr; } }
/* ---- Pagine dintorno singolo · hero tipografico ---- */
.dest-hero { padding: clamp(120px, 18vw, 168px) 0 56px; background: var(--off); border-bottom: 1px solid var(--line); }
.dest-body { padding: clamp(56px, 8vw, 90px) 0; }
.dest-body .prose { max-width: 68ch; }
.dest-body .prose p + p { margin-top: 18px; }
.dest-tips { margin-top: 44px; max-width: 68ch; background: var(--off); border-radius: 14px; padding: 30px 32px; }
.dest-tips h4 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); margin-bottom: 14px; }
.dest-tips ul { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.dest-tips li { padding-left: 22px; position: relative; font-size: 14.5px; color: var(--ink-80); line-height: 1.6; }
.dest-tips li::before { content: '\2014'; position: absolute; left: 0; color: var(--accent-2); }
.dest-cta { margin-top: 48px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.dest-cta .sec-link { font-size: 14px; font-weight: 500; color: var(--sea-3); display: inline-flex; align-items: center; gap: 8px; }
.dest-cta .sec-link::after { content: '\2192'; transition: transform 0.3s; }
.dest-cta .sec-link:hover::after { transform: translateX(4px); }
/* ---- Foto articolo (immagine + credito in didascalia) ---- */
.article-figure { margin: 38px auto 8px; }
.article-figure img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 14px; display: block; }
.article-figure figcaption { margin-top: 10px; font-size: 12px; color: var(--ink-60); letter-spacing: 0.02em; }
/* ===== 2. RESET + TIPOGRAFIA BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--white); color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "kern", "liga"; }
img { max-width: 100%; display: block; }
.italic { font-style: italic; }
/* ===== 3. NAV (identica al sito, senza selettore lingua) ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: all 0.4s var(--ease);
}
.nav-menu { display: flex; gap: 32px; list-style: none; align-items: center; }
@media (max-width: 900px) {
  .nav-menu li { display: none; }
  .nav-menu { gap: 0; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; flex-direction: column; gap: 4px; padding: 8px; cursor: pointer; }
  .nav-burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.4s ease, opacity 0.3s ease; }
}
h1.title, h2.title, .title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.title .acc { color: var(--sea-3); font-weight: 500; font-style: italic; }
.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink-60);
  max-width: 58ch;
  margin-top: 22px;
  line-height: 1.6;
}
/* ===== 6. BREADCRUMB ===== */
.breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-60); margin-bottom: 22px; transition: color 0.3s; }
/* ===== 7. BOTTONI (dal sito) ===== */
.btn { padding: 14px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s var(--ease); font-family: var(--font); border: 1px solid transparent; }
.footer-legal { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; padding: 18px var(--gutter) 0; max-width: var(--max); margin: 40px auto 4px; font-size: 12px; color: var(--ink-60); border-top: 1px solid var(--line); }
.footer-bottom { padding: 22px var(--gutter) 0; max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-60); }
@media (max-width: 600px) { .footer-top { grid-template-columns: 1fr; gap: 28px; } .footer-legal { gap: 12px; font-size: 11px; } .footer-legal .sep { display: none; } }
.to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 80;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--ink); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.4s, transform 0.4s, background 0.3s;
  box-shadow: 0 14px 32px -10px rgba(18,51,61,0.4);
}
.to-top.in { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--sea-3); }
/* =========================================================
   10. COMPONENTI BLOG (nuovi · palette HOME FOR YOU)
========================================================= */

/* --- Pillola categoria (card, hero articolo) --- */
.blog-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sea-3);
  background: rgba(14,124,148,0.14);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
}
/* --- Header pagina blog.html --- */
.blog-hero { padding: clamp(120px, 20vw, 170px) 0 8px; background: var(--off); border-bottom: 1px solid var(--line); }
.blog-hero .lead { margin-top: 20px; }
/* --- Filtri categoria (pillole cliccabili, JS vanilla) --- */
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 24px; }
.blog-filters button {
  font-family: var(--font); font-size: 12.5px; font-weight: 500; letter-spacing: 0.03em;
  color: var(--ink-80); background: var(--white);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.blog-filters button:hover { border-color: var(--sea-3); color: var(--sea-3); }
.blog-filters button.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* --- Featured article (card grande in evidenza) --- */
.blog-featured {
  display: block; position: relative; overflow: hidden;
  background: var(--ink); color: var(--off);
  border-radius: 16px;
  padding: clamp(36px, 5vw, 64px);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.blog-featured::before {
  content: ''; position: absolute; right: -160px; top: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,124,148,0.28), transparent 68%);
}
.blog-featured:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -30px rgba(18,51,61,0.5); }
.blog-featured .kicker {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 22px;
}
.blog-featured h2 {
  position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.01em;
  max-width: 19ch; color: var(--white); text-wrap: balance;
}
.blog-featured h2 em { font-style: italic; color: var(--sea); font-weight: 500; }
.blog-featured .excerpt { position: relative; z-index: 1; margin-top: 18px; max-width: 58ch; font-size: 15.5px; color: rgba(255,255,255,0.82); line-height: 1.6; }
.blog-featured .meta { position: relative; z-index: 1; display: flex; gap: 16px; flex-wrap: wrap; margin-top: 26px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.blog-featured .go { position: relative; z-index: 1; margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 4px; transition: gap 0.3s, border-color 0.3s; }
.blog-featured .go::after { content: '\2192'; transition: transform 0.3s; }
.blog-featured:hover .go::after { transform: translateX(4px); }
/* --- Griglia magazine + card articolo --- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px 28px;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(18,51,61,0.22); border-color: var(--sea-3); }
.blog-card .blog-pill { align-self: flex-start; margin-bottom: 16px; }
.blog-card h3 { font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); font-weight: 500; color: var(--ink); line-height: 1.22; letter-spacing: -0.01em; }
.blog-card .excerpt {
  margin-top: 12px; color: var(--ink-80); font-size: 14px; line-height: 1.55; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card .blog-meta { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-60); letter-spacing: 0.04em; }
.blog-card .go { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--sea-3); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s; }
.blog-card .go::after { content: '\2192'; transition: transform 0.3s; }
.blog-card:hover .go::after { transform: translateX(4px); }
.blog-card[hidden] { display: none; }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
/* --- Hero tipografico (pagina articolo singolo, senza foto) --- */
.article-hero { padding: clamp(130px, 20vw, 180px) 0 56px; background: var(--off); border-bottom: 1px solid var(--line); }
.article-hero .blog-pill { margin-bottom: 26px; }
.article-hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.05; letter-spacing: -0.015em;
  color: var(--ink); max-width: 19ch; text-wrap: balance;
}
.article-hero h1 em { font-style: italic; color: var(--sea-3); font-weight: 500; }
.article-hero .subtitle { margin-top: 22px; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-80); max-width: 62ch; line-height: 1.6; }
.article-meta { margin-top: 30px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-60); }
.article-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-40); }
/* --- Corpo articolo (prose) --- */
.article-body { padding: clamp(56px, 8vw, 90px) 0; }
.prose { max-width: 70ch; }
.prose p { font-size: 16px; line-height: 1.8; color: var(--ink-80); }
.prose p + p { margin-top: 20px; }
.prose h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3vw, 32px); color: var(--ink); letter-spacing: -0.015em; margin-top: 48px; margin-bottom: 18px; line-height: 1.2; }
.prose h2 em { font-style: italic; color: var(--sea-3); font-weight: 500; }
.prose ul { margin: 22px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose li { font-size: 15.5px; color: var(--ink-80); line-height: 1.65; }
.prose strong { color: var(--ink); font-weight: 600; }
/* --- Callout (box evidenza dentro il testo) --- */
.callout { background: var(--warm); border-left: 3px solid var(--accent); padding: 18px 22px; border-radius: 8px; font-size: 14.5px; color: var(--ink-80); line-height: 1.65; margin: 32px 0; max-width: 70ch; }
.callout strong { color: var(--ink); }
/* --- Box CTA soggiorno (dentro / fine articolo) --- */
.blog-cta {
  margin: 48px 0; max-width: 70ch; position: relative; overflow: hidden;
  background: var(--ink); color: var(--off);
  border-radius: 16px; padding: clamp(32px, 4vw, 44px);
}
.blog-cta::before { content: ''; position: absolute; right: -140px; top: -140px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(14,124,148,0.28), transparent 68%); }
.blog-cta h4 { position: relative; z-index: 1; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); color: var(--white); letter-spacing: -0.015em; max-width: 22ch; }
.blog-cta p { position: relative; z-index: 1; margin-top: 12px; font-size: 14.5px; color: rgba(255,255,255,0.8); max-width: 48ch; line-height: 1.6; }
.blog-cta .actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 26px; }
.blog-cta .actions .link { font-size: 13.5px; font-weight: 600; color: var(--accent); border-bottom: 1px solid rgba(198,160,99,0.4); padding-bottom: 3px; transition: color 0.3s, border-color 0.3s; }
.blog-cta .actions .link:hover { color: var(--white); border-bottom-color: var(--white); }
/* --- Articoli correlati --- */
.blog-related { padding: clamp(56px, 8vw, 90px) 0; background: var(--off); border-top: 1px solid var(--line); }
.blog-related .title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.blog-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.blog-related-grid .blog-card { background: var(--white); }
@media (max-width: 900px) { .blog-related-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .article-hero { padding-top: 150px; } }
/* --- Foto articolo (immagine + credito in didascalia) --- */
.article-figure { margin: 38px 0 8px; }
.article-figure img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 16px; display: block; }
.article-figure figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.prose .article-figure { margin: 34px 0; }

/* ============ KROSSBOOKING: widget + motore incorporato ============ */
/* `color` esplicito: la card sta anche dentro section.booking, che e' scura e
   passa color:#fff a tutti i discendenti. Senza questa riga il titolo h3 della
   card finiva bianco su bianco (contrasto 1,00). */
.kb-widget { background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(20px, 3vw, 30px); box-shadow: 0 24px 60px rgba(18,51,61,0.10);
  display: flex; flex-direction: column; gap: 18px; }
.kb-widget .kb-widget-head h3 { color: var(--ink); }
.kb-widget--sticky { position: sticky; top: 96px; padding: 22px; border-radius: 14px; }
.kb-widget-head h3 { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin-top: 4px; }
.kb-kicker { display: inline-block; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700; color: var(--sea-3); }
/* --- il riquadro unico: una cornice sola, divisa da filetti interni ---------
   E' l'anatomia della scheda «Riepilogo» del motore, rifatta con la tipografia
   e i colori del sito: due mezze celle per le date separate da una freccia,
   una riga piena per gli ospiti. I filetti sono border interni, non gap, cosi'
   il riquadro resta un blocco unico anche quando va a colonna sul telefono. */
.kb-box { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--white); }
.kb-riga { display: grid; }
.kb-riga + .kb-riga { border-top: 1px solid var(--line); }
.kb-riga--date { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.kb-cella--piena { grid-column: 1 / -1; }
/* Nella colonna sticky della scheda annuncio il riquadro e' largo circa 300px:
   due date affiancate lasciano 130px a testa e «Scegliete la data» esce
   troncato. Li' le date si impilano e la freccia diventa un filetto
   orizzontale, come sotto i 520px. */
.kb-widget--sticky .kb-riga--date { grid-template-columns: 1fr; }
.kb-widget--sticky .kb-freccia { width: auto; height: 24px; border-left: 0;
  border-right: 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.kb-widget--sticky .kb-freccia svg { transform: rotate(90deg); }
.kb-widget--sticky .kb-actions { grid-template-columns: 1fr; }
.kb-cella { display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 12px 16px; min-width: 0; position: relative;
  transition: background-color .2s var(--ease); }
.kb-cella:focus-within { background: rgba(14,124,148,0.05); }
.kb-cella label { display: flex; align-items: center; gap: 6px; font-size: 10.5px;
  letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-60); pointer-events: none; }
.kb-cella label svg { width: 13px; height: 13px; color: var(--sea-3); flex: none; }
.kb-opt { text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--ink-40); font-size: 11px; }
/* La freccia sta nella colonna di mezzo, sul filetto verticale che divide le
   due date: e' il filetto stesso, con la punta sopra. */
.kb-freccia { align-self: stretch; display: flex; align-items: center;
  justify-content: center; width: 34px; color: var(--ink-40);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: var(--off); }
.kb-freccia svg { width: 15px; height: 15px; }

.kb-cella input, .kb-cella select, .kb-cella .flatpickr-input {
  width: 100%; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink);
  background: transparent; border: 0; border-radius: 0; padding: 2px 0 0;
  min-height: 26px; appearance: none; cursor: pointer; }
.kb-cella input::placeholder { color: var(--ink-40); font-weight: 400; }
.kb-cella input:focus, .kb-cella select:focus { outline: none; }
/* Il focus si vede sulla cella intera, non sul solo testo: dentro una cornice
   condivisa un anello sul campo verrebbe tagliato dall'overflow del riquadro. */
.kb-cella:focus-within::after { content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 2px var(--sea); pointer-events: none; }
.kb-cella select { padding-right: 22px; background-image:
  linear-gradient(45deg, transparent 50%, currentColor 50%),
  linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 8px) 12px, calc(100% - 3px) 12px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.kb-cella input::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.kb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: 0.01em;
  padding: 15px 20px; min-height: 52px; border: 1px solid transparent;
  border-radius: 999px; cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease); }
.kb-btn svg { width: 17px; height: 17px; flex: none; }
.kb-btn--primary { background: var(--sea-3); color: var(--white); border-color: var(--sea-3); }
.kb-btn--primary:hover { background: var(--ink); border-color: var(--ink);
  transform: translateY(-2px); }
/* Il contorno del pulsante «Richiedi info» e' l'accento, non il filetto grigio:
   accanto al pieno deve leggersi come la seconda azione, non come un campo. */
.kb-btn--ghost { background: var(--white); color: var(--sea-d); border-color: var(--sea-3); }
.kb-btn--ghost:hover { background: var(--sea-3); color: var(--white); }
.kb-btn:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
/* La freccia del pulsante «Continua» accompagna il passaggio al motore. */
.kb-btn--primary svg { transition: transform .25s var(--ease); }
.kb-btn--primary:hover svg { transform: translateX(3px); }
.kb-widget-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px;
  line-height: 1.5; color: var(--ink-60); margin: 0; }
.kb-widget-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px;
  color: var(--accent-2); }
.kb-widget .kb-errore { font-size: 12.5px; color: var(--bloom); font-weight: 600; }

/* motore */
@media (max-width: 900px) {
  .kb-widget--sticky { position: static; }
}
@media (max-width: 520px) {
  /* Sotto i 520px le due date non stanno affiancate senza troncare la data.
     Vanno una sopra l'altra e la freccia da verticale diventa un filetto
     orizzontale, ruotata di un quarto di giro. */
  .kb-riga--date { grid-template-columns: 1fr; }
  .kb-freccia { width: auto; height: 26px; border-left: 0; border-right: 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .kb-freccia svg { transform: rotate(90deg); }
  /* «Richiedi info» andava a capo mentre «Continua» no: due pulsanti alti
     diversi in fila. Sotto i 520px stanno uno sopra l'altro. */
  .kb-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-btn, .kb-cella { transition: none !important; }
  .kb-btn--primary:hover { transform: none; }
}


/* ============ correzioni HOME FOR YOU ============ */
/* due tinte che il template donatore non aveva */
:root { --terra: #B87A5E; --bloom: #A81E45; }
/* A2: overflow-x hidden sul body ucciderebbe position:sticky */
html, body { margin: 0 !important; padding: 0 !important; max-width: 100vw !important;
  width: 100% !important; overflow-x: hidden !important; }
@supports (overflow-x: clip) { html, body { overflow-x: clip !important; } }
/* A3: mai lo shorthand overflow sul body */
body.menu-open, body.no-scroll { overflow-y: hidden; overscroll-behavior: contain; }
.nav-drawer { overscroll-behavior: contain; }
body { background: var(--off); }

/* accessibilita' */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: var(--white); padding: 14px 22px;
  border-radius: 0 0 10px 0; font-size: 14px; font-weight: 600; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav-drawer[inert] { visibility: hidden; }

/* A1: senza javascript il contenuto si vede lo stesso (il fallback vero e' il
   <noscript> nel head, questa e' la rete di sicurezza per i browser lenti) */
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .g-i:hover img, .loc-card:hover img, .t-card:hover, .cf-item:hover { transform: none !important; }
}

/* nella colonna sticky della scheda annuncio i tre campi in riga sono troppo
   stretti e il segnaposto della data viene tagliato: due colonne, ospiti sotto */
@media (min-width: 901px) {
}

/* width/height sull'<img> sono presentational hints: nel lightbox verticale
   il template mette solo width:100%, senza height:auto l'immagine esce stirata */
.pd-lightbox-scroll img { height: auto; }

/* la barra fissa in fondo esiste solo nella scheda annuncio: il donatore
   riservava 82px in fondo a OGNI pagina, anche a quelle senza barra */
/* serve !important: la regola A2 qui sopra azzera il padding del body con
   uno shorthand !important, quindi i 82px del donatore non arrivavano mai */
@media (max-width: 900px) {
  body:has(.pd-mobile-bar) { padding-bottom: 82px !important; }
}

/* riga con i dati societari, che il template donatore non aveva */
.footer-dati { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px;
  max-width: var(--max); margin: 6px auto 0; padding: 0 var(--gutter);
  font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-40); text-align: center; }

/* mappa: iframe di Google Maps, spento finche' non c'e' il consenso */
.map-container { position: relative; width: 100%; height: clamp(340px, 46vh, 520px);
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.map-container .map-frame { width: 100%; height: 100%; border: 0; display: block;
  background: var(--warm); }
/* Il velo del consenso: copre l'intero riquadro, sta nel flusso del contenitore
   e sparisce con [hidden]. Niente display:flex sulla regola base, se no
   [hidden] non lo nasconde (e' la trappola gia' vista sui modali). */
.map-gate { position: absolute; inset: 0; background: var(--warm);
  align-items: center; justify-content: center; flex-direction: column;
  gap: 16px; padding: 28px; text-align: center; }
.map-gate:not([hidden]) { display: flex; }
.map-gate-testo { max-width: 46ch; font-size: 14.5px; color: var(--ink-60); }
.map-gate-azioni { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.map-section { padding: clamp(70px, 9vw, 120px) 0; }
.map-indirizzo { margin: 22px 0 14px; font-size: 15px; color: var(--ink-80); line-height: 1.7; }
.map-indirizzo strong { color: var(--ink); }

/* fascia fiducia a quattro voci (il donatore ne aveva cinque) */
.trust-grid.quattro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .trust-grid.quattro { grid-template-columns: repeat(2, 1fr); } }

/* bottone chiaro, per i fondi scuri (.location, .booking) */
.btn-chiaro { background: var(--white); color: var(--ink); border: 1px solid var(--white); }
.btn-chiaro::after { content: "→"; font-weight: 400; transition: transform 0.3s; }
.btn-chiaro:hover { background: transparent; color: var(--white); }
.btn-chiaro:hover::after { transform: translateX(3px); }

/* schede dintorni cliccabili + pastiglie su fondo scuro */
.loc-card { display: block; color: inherit; text-decoration: none; }
.loc-card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sea); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.chips li { padding: 7px 14px; border-radius: 999px; font-size: 12.5px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.86); }
.loc-piedi { margin-top: 64px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center;
  justify-content: space-between; }
.loc-piedi p { color: rgba(255,255,255,0.7); font-size: 14.5px; max-width: 58ch; line-height: 1.6; }

/* riquadro reputazione, sopra le recensioni */
.rep { margin-top: 44px; display: grid; grid-template-columns: 190px 1fr;
  gap: clamp(22px, 4vw, 52px); align-items: center; padding: 28px clamp(22px, 3vw, 38px);
  background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.rep-voto { text-align: center; }
.rep-voto .v { font-family: var(--serif); font-weight: 600; font-size: 58px; line-height: 1; color: var(--ink); }
.rep-voto .s { color: var(--accent); font-size: 14px; letter-spacing: 0.1em; margin-top: 10px; }
.rep-voto .n { font-size: 12.5px; color: var(--ink-60); margin-top: 8px; }
.rep-cat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 30px; }
.rep-cat > div { display: flex; justify-content: space-between; gap: 14px;
  font-size: 13.5px; color: var(--ink-60); border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.rep-cat strong { color: var(--ink); font-weight: 700; }
@media (max-width: 760px) { .rep { grid-template-columns: 1fr; }
  .rep-cat { grid-template-columns: 1fr 1fr; } }

/* risposte FAQ lunghe: 400px del donatore tagliavano il testo */
.faq-item.open .faq-a { max-height: 1000px; }

/* contrasto sui fondi scuri: --sea su --deep sta a 2,1:1, illeggibile.
   --sea-l e' la stessa tinta schiarita, 5,6:1 su --deep. */
:root { --sea-l: #6FC6DA; }
/* NB: la sezione del motore incorporato non esiste piu' dal 10/09/2026.
   fondo --warm (sabbia), non scuro, e il celeste chiaro ci stava a 1,59:1. */
.location h2.title .acc, .booking h2.title .acc, .loc-dist .km,
.b-info small { color: var(--sea-l); }
.location .section-tag, .booking .section-tag {
  color: var(--sea-l); background: rgba(111,198,218,0.16); }
.loc-card:hover { border-color: var(--sea-l); }
.loc-card .more { color: var(--sea-l); }

/* Ultimi tre testi sotto soglia, misurati sul sito finito e ricalcolati sul
   fondo composito (petrolio + il velo bianco della card):
     .loc-dist .ty     bianco al 50%  -> 3,71:1   ora al 72% -> 5,90:1
     .section-tag      su pastiglia 0,16 -> 4,09  ora 0,10   -> 4,59:1
   Sotto i 18,66 px AA chiede 4,5, anche in grassetto. */
.loc-dist .ty { color: rgba(255,255,255,0.72); }
.location .section-tag, .booking .section-tag { background: rgba(111,198,218,0.10); }

/* quattro schede dintorni: due per riga, non tre piu' una orfana */
.loc-cards.due { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .loc-cards.due { grid-template-columns: 1fr; } }

/* su telefono la galleria di un ambiente con 4 foto lascia una tessera orfana:
   il donatore ne nasconde 1 sui blocchi da 3 e da 5, non su quelli da 4 */
@media (max-width: 560px) { .space-gallery.four > div:nth-child(n+4) { display: none; } }

/* la galleria a tessere miste lascia buchi senza `dense` */
.gallery-grid { grid-auto-flow: row dense; }

/* ============================ banner cookie ================================
   Copriva la CTA dell'hero (banner 698..868 contro pulsante 716..769 a
   1440x900) e i suoi pulsanti stavano sotto i 44px di soglia tattile.
   Su desktop si ancora a destra e non attraversa piu' la colonna del testo;
   su telefono diventa compatto. Il contrasto di "Accetta tutti" e' sistemato
   piu' avanti, nel blocco del collaudo di settembre. */
.cookie-banner { left: auto; right: clamp(16px, 3vw, 32px);
  max-width: min(720px, calc(100vw - 2 * clamp(16px, 3vw, 32px)));
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.06); }
.cookie-btn { min-height: 46px; padding: 13px 18px; }
@media (max-width: 700px) {
  .cookie-banner { left: clamp(12px, 3vw, 32px); max-width: none;
    bottom: 12px; padding: 16px 18px; gap: 12px; grid-template-columns: 1fr; }
  .cookie-banner-text { font-size: 12.5px; line-height: 1.5; }
  .cookie-banner-text h5 { font-size: 15px; margin-bottom: 4px; }
  .cookie-banner-actions { justify-content: stretch; gap: 8px; }
  .cookie-banner-actions .cookie-btn { flex: 1 1 auto; padding: 13px 10px; }
  /* la frase lunga sparisce: il pannello deve stare sotto i 180px, altrimenti
     copre la CTA dell'hero. Il dettaglio resta dietro "Personalizza". */
  .cookie-piu { display: none; }
}

/* ========================= bersagli tattili ================================
   Sotto i 44px: link del piede (22px alti, 8px di distanza) e i tre link
   legali affiancati su una riga sola a 21px. */
.footer-col a { padding: 6px 0; margin-bottom: 2px; }
.footer-legal a { padding: 13px 0; }
@media (max-width: 520px) {
  .footer-legal { flex-direction: column; gap: 0; }
  .footer-legal .sep { display: none; }
}

/* ===================== riquadro CTA in fondo agli articoli ==================
   Il titolo andava a due righe con interlinea 1,6 (sembravano due titoli) e la
   gerarchia era invertita: il link secondario in oro sottolineato saltava
   all'occhio piu' del pulsante primario, bianco e piatto. */
.blog-cta h4 { line-height: 1.15; }
.blog-cta .actions .btn-primary { background: var(--sea); border: 1px solid var(--sea);
  color: var(--white); }
.blog-cta .actions .btn-primary:hover { background: var(--white); color: var(--ink);
  border-color: var(--white); }
.blog-cta .actions .link { color: rgba(255,255,255,0.72); border-bottom-color: transparent; }
.blog-cta .actions .link:hover { color: var(--white); border-bottom-color: rgba(255,255,255,0.5); }

/* ============ scheda annuncio: la card di prenotazione da telefono ==========
   La colonna sticky cadeva sotto tutto il corpo dell'annuncio, a 7.132px
   dall'inizio della pagina (il 59%). Con `order` risale subito sotto il mosaico
   di foto; la barra fissa in fondo resta comunque la scorciatoia. */
@media (max-width: 900px) {
  .pd-col-side { order: -1; }
}

/* marchio tipografico nel piede: l'<h4> non e' piu' testo, e' l'immagine
   generata da 14_favicon.py (versione chiara, il piede e' scuro) */
/* la barra alta fra 901 e 1180 px: con sette voci di menu piu' la lingua e il
   pulsante, il marchio andava a capo su due righe. Si stringono spazi e corpo
   del testo invece di togliere una voce; sotto i 900 px comanda il burger. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav { padding-left: 22px; padding-right: 22px; }
  .nav-brand { font-size: 20px; white-space: nowrap; }
  .nav.scrolled .nav-brand { font-size: 19px; }
  .nav-menu { gap: 20px; }
  .nav-menu a { font-size: 13px; }
  .nav-cta { padding: 10px 15px; font-size: 12.5px; white-space: nowrap; }
}

/* --------------------------------------------------------------- contrasto --
   Le stelle sono glifi decorativi (aria-hidden), ma restano un oggetto
   grafico: --gold #C6A063 su --paper sta a 2,3:1, sotto qualunque soglia.
   --gold-txt e' lo stesso oro portato al 4,5:1 sul fondo carta; l'oro chiaro
   resta dov'e' decorativo (filetti, bordi). */
:root { --gold-txt: #8F6B2E; }
.stars, .t-card .stars, .rep-voto .stars { color: var(--gold-txt); }

/* il corsivo di accento dentro la fascia scura di invito era --sea su --ink,
   cioe' 2,8:1: piu' spento del testo bianco che gli sta intorno. --sea-l e'
   la stessa tinta schiarita, quasi 7:1 sullo stesso fondo. */
.lc-cta-band h2 em { color: var(--sea-l); }

/* ------------------------------------------------------------ un solo asse --
   Il corpo del sito e' a bandiera sinistra: la testata della FAQ era l'unica
   sezione chiara centrata e costringeva l'occhio a riagganciare il margine.
   Restano centrati solo i momenti dichiaratamente celebrativi (la citazione
   .exp) e le sezioni su fondo scuro, dove il cambio di registro e' voluto. */
.faq-head { margin-bottom: 48px; }
.faq-wrap { margin-left: 0; margin-right: auto; }
.lc-hl { text-align: left; }
.lc-hl .icon { margin-left: 0; margin-right: auto; }

/* ------------------------------------------------------------- ritagli --
   Nelle strisce strette dei mosaici (una colonna 1fr dentro .space-gallery
   scende sotto i 120 px) il ritaglio di default parte dal centro-alto e
   tagliava i soggetti a meta': con object-position esplicito il centro
   della foto resta dentro il riquadro anche nei formati piu' verticali. */
.space-gallery img, .gallery-grid img, .pd-mosaic img { object-position: center; }

/* i marchi sono PNG trasparenti: il fondo che il donatore mette a ogni <img>
   come segnaposto di caricamento qui si vedrebbe come una piastra beige */
.logo-img { background: none; }
.footer-brand h4 .logo-img { width: min(228px, 70%); }
.footer-brand h4 { margin-bottom: 18px; }

/* =====================================================================
   COLLAUDO DI SETTEMBRE: layout, design, accessibilita'
   Ogni blocco porta il numero del difetto a cui risponde.
   ===================================================================== */

/* --- 3. contrasto dei due grigi di testo -----------------------------
   --ink-60 stava a 0,58 di alfa: 3,66:1 su bianco, sotto il 4,5 di AA.
   --ink-40 stava a 0,38: 2,20:1, illeggibile. Si alzano tutti e due, e la
   vecchia tinta chiara sopravvive come --ink-line, per bordi e separatori
   dove il contrasto di testo non c'entra. */
/* misurati con la formula WCAG sui tre fondi del sito (bianco, --paper,
   --bone): il fondo peggiore e' --bone, ed e' quello che detta i valori.
     0,58 -> 3,43 su --bone (quello che c'era)
     0,64 -> 4,02   ancora sotto
     0,70 -> 4,74   passa
     0,74 -> 5,30   passa con margine
   La tinta chiara di prima resta come --ink-25, per pallini e separatori,
   dove il contrasto di testo non c'entra. */
:root {
  --ink-60: rgba(18,51,61,0.74);   /* 5,91 su bianco · 5,30 su --bone */
  --ink-40: rgba(18,51,61,0.70);   /* 5,22 su bianco · 4,74 su --bone */
  --ink-25: rgba(18,51,61,0.38);   /* solo bordi, pallini, separatori */
}
.article-meta .sep, .pd-subline .dot,
.legal-body::-webkit-scrollbar-thumb:hover { background: var(--ink-25); }

/* --- 4. contrasti dei due bottoni sbagliati -------------------------- */
.cookie-btn.primary { color: var(--white); }          /* era --deep su --sea: 2,24:1 */
:root { --sea-d: #0A5D70; }

/* --- 11. atterraggio delle ancore sotto la barra fissa ---------------
   .nav e' fixed e alta 59px da scrollata: senza scroll-margin la testa
   della sezione finiva sotto la barra, motore di prenotazione compreso. */
:where(section[id], header[id], aside[id], .kb-widget) {
  scroll-margin-top: 92px;
}

/* --- 14. il pulsante hamburger era 38x30 ---------------------------- */
@media (max-width: 900px) {
  .nav-burger { min-width: 44px; min-height: 44px; align-items: center;
    justify-content: center; padding: 7px; border-radius: 10px; }
}
/* --- 22. i mosaici degli ambienti si spaccavano sotto i 560px -------
   c'erano righe fisse da 200px con il primo figlio a 4/3 (circa 260px):
   sfondava la riga e lasciava bande vuote da 150-190px. E la sesta foto
   spariva senza dirlo. Qui a telefono il mosaico diventa un carosello con
   aggancio: si vedono tutte le foto e la pagina non si allunga. */
@media (max-width: 560px) {
  .space-gallery, .space-gallery.three, .space-gallery.four, .space-gallery.five {
    display: flex; grid-template-columns: none; grid-template-rows: none;
    height: auto; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    padding-bottom: 8px; margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter); scrollbar-width: thin; }
  .space-gallery > div,
  .space-gallery.three > div, .space-gallery.four > div, .space-gallery.five > div {
    display: block; flex: 0 0 82%; aspect-ratio: 4 / 3; grid-row: auto;
    grid-column: auto; scroll-snap-align: start; }
  .space-gallery > div:first-child { flex-basis: 92%; }
  /* nessuna foto viene piu' nascosta: il carosello le porta tutte */
  .space-gallery.three > div:nth-child(n+4),
  .space-gallery.four > div:nth-child(n+4),
  .space-gallery.four > div:nth-child(n+5),
  .space-gallery.five > div:nth-child(n+6) { display: block; }
  .space-gallery::after { content: ""; flex: 0 0 2px; }
}

/* --- 26. ritmo verticale: tre gradi invece di uno solo --------------
   tutte le sezioni respiravano uguale (140px sopra e sotto), quindi
   nessuna sembrava importante, e le colonne corte dei blocchi a due
   colonne lasciavano bande vuote da 300px. */
.spaces, .comfort, .gallery, .faq { padding: clamp(64px, 8vw, 104px) 0; }
.booking, .testi { padding: clamp(96px, 12vw, 168px) 0; }
.intro, .location { padding: clamp(80px, 10vw, 132px) 0; }
.booking-grid, .intro-grid { align-items: start; }
.b-info { position: sticky; top: 92px; }
@media (max-width: 900px) { .b-info { position: static; } }

/* --- 28. il piede chiude la pagina, come dice la tavolozza ---------- */
footer { background: var(--ink); color: rgba(255,255,255,0.88);
  border-top: 0; padding-top: 76px; }
.footer-brand p { color: rgba(255,255,255,0.72); }
.footer-col h5 { color: var(--white); }
.footer-col a, .footer-col p { color: rgba(255,255,255,0.78); }
.footer-col a:hover { color: var(--bloom-l); }
.footer-legal { border-top-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.78); }
.footer-legal a { color: rgba(255,255,255,0.78); }
.footer-legal a:hover { color: var(--bloom-l); border-bottom-color: var(--bloom-l); }
.footer-legal .sep { background: rgba(255,255,255,0.32); }
.footer-dati { color: rgba(255,255,255,0.70); }     /* era 2,19:1, ora oltre 6:1 */
.footer-bottom { border-top-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.72); }
.footer-bottom a { color: var(--gold-l); }
.footer-bottom a:hover { color: var(--white); }
footer :focus-visible { outline-color: var(--gold-l); }
/* la riga sotto il marchio non e' piu' una macchia grigia */
.footer-brand .footer-tagline { display: block; margin: -6px 0 16px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); }

/* --- 32. il rosso della bougainvillea, tre volte in tutto il sito ---
   il token c'era ma non lo usava nessuno. Su fondo scuro serve la stessa
   tinta schiarita, altrimenti sta a 2,4:1 sul petrolio. */
:root { --bloom-l: #F2889F; --gold-l: #E0C08D; }
.hero-pre .dot { background: var(--bloom); }
h2.title .acc, h1.sec-title .acc, .title .acc { background-image:
  linear-gradient(var(--bloom), var(--bloom));
  background-repeat: no-repeat; background-size: 100% 2px;
  background-position: 0 96%; padding-bottom: 2px; }
.location h2.title .acc, .booking h2.title .acc, .lc-cta-band h2 em,
.blog-cta h4 em { background-image: none; padding-bottom: 0; }

/* --- 34. la cifra 1 in Cormorant sembra una I ----------------------- */
.meta-row .v, .rep-voto .v, .loc-dist .km, .space-info .num, .lc-stat .v,
.dist-table td.n {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1; }
.meta-row .v { font-family: var(--font); font-weight: 600; letter-spacing: -0.02em; }

/* --- 29. le distanze in tabella, non con i pallini del browser ------ */
.dist-table { width: 100%; border-collapse: collapse; margin-top: 26px;
  max-width: 720px; }
.dist-table caption { text-align: left; font-size: 12.5px; color: var(--ink-60);
  padding: 8px 0 12px; }
.dest-body .prose > p:first-child { margin-top: 18px; }
.dist-table th { text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60);
  padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.dist-table th.n, .dist-table td.n { text-align: right; white-space: nowrap;
  width: 7em; padding-right: 20px; }
.dist-table td { padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; color: var(--ink); vertical-align: baseline; }
.dist-table td.n { font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--sea-d); width: 6.5em; padding-right: 18px;
  font-variant-numeric: lining-nums tabular-nums; }
.dist-table td .t { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-60); }
.dist-table tr td:first-child { position: relative; }
.dist-barra { display: block; height: 3px; margin-top: 8px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sea), var(--sea-3)); opacity: 0.55; }
@media (max-width: 560px) {
  .dist-table td.n { font-size: 19px; width: 5em; padding-right: 12px; }
}

/* --- 31. le FAQ in tre gruppi, non quindici barre uguali ------------ */
.faq-gruppi { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3vw, 44px); max-width: var(--max); margin: 0 auto; }
.faq-colonna { min-width: 0; }
.faq-gruppi .faq-wrap { max-width: none; padding-top: 10px; margin-left: 0; }
.faq-gruppo-tit { font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--ink); padding-bottom: 10px; border-bottom: 2px solid var(--sea);
  display: inline-block; }
.faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; margin-bottom: 0; }
.faq-item.open { border-color: var(--sea); }
.faq-q { padding: 16px 4px; font-size: 15px; align-items: flex-start; }
/* al posto del «+» che ruotando diventava una «x», un chevron che si gira */
.faq-q .plus { background: transparent; width: 22px; height: 22px; color: var(--sea-d);
  font-size: 0; transition: transform 0.3s var(--ease); }
.faq-q .plus::after { content: ""; width: 9px; height: 9px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); }
.faq-item.open .faq-q .plus { transform: rotate(180deg); }
.faq-item.open .faq-q { font-weight: 700; }
.faq-item.open .faq-q .plus { background: transparent; color: var(--sea-d);
  transform: rotate(180deg); }
.faq-a-inner { padding: 0 4px 18px; }
@media (max-width: 1000px) { .faq-gruppi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .faq-gruppi { grid-template-columns: 1fr; } }

/* --- 30. le card del blog con la foto di testa ----------------------
   Diciannove card su venti erano solo testo, con il badge «COSA FARE»
   ripetuto sei volte di fila. Adesso ogni card porta la SUA prima foto
   (quella dell'articolo, non una foto pescata a caso) e il badge si colora
   per categoria, cosi' la griglia si legge anche a colpo d'occhio. */
.blog-card { overflow: hidden; }
.blog-card .cover { display: block; margin: -30px -28px 20px; aspect-ratio: 16 / 10;
  overflow: hidden; background: var(--warm); }
.blog-card .cover img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease); }
.blog-card:hover .cover img { transform: scale(1.05); }
/* card senza foto: al posto della copertina un numero in Cormorant, come
   nella sezione «Gli spazi» della home */
.blog-card .cover-num { display: flex; align-items: flex-end; margin: -30px -28px 20px;
  aspect-ratio: 16 / 10; padding: 0 28px 14px; background: var(--warm);
  font-family: var(--serif); font-style: italic; font-size: 64px; line-height: 1;
  color: var(--sea); opacity: 0.75; }
.blog-pill.c-sea { color: var(--sea-d); background: rgba(14,124,148,0.12); }
.blog-pill.c-terra { color: #8E5136; background: rgba(184,122,94,0.18); }
.blog-pill.c-gold { color: #7A5E23; background: rgba(198,160,99,0.24); }
.blog-pill.c-ink { color: var(--ink); background: rgba(18,51,61,0.10); }
.blog-pill.c-bloom { color: var(--bloom); background: rgba(168,30,69,0.12); }
.blog-pill.c-deep { color: var(--deep); background: rgba(10,67,81,0.10); }
/* nelle card correlate a fondo pagina la copertina non serve: sono tre righe */
.blog-related-grid .cover, .blog-related-grid .cover-num { display: none; }

/* --- 27. l'articolo era una colonna da 540 px in un contenitore da 1320,
   con meta' schermo bianco dalla testata al riquadro finale. Misura centrata:
   il testo su 740 px, le fotografie su 1000, tutto sullo stesso asse. */
.article-hero .container,
.article-body .prose, .article-body > .container > .blog-cta {
  max-width: 740px; margin-left: auto; margin-right: auto; }
.article-body > .container > .article-figure { max-width: 1000px;
  margin-left: auto; margin-right: auto; }
.prose { max-width: none; }
.prose .callout, .prose .blog-cta { max-width: none; }
/* le figure dentro il testo escono un poco dalla colonna, senza sfondare */
.prose .article-figure { max-width: 860px; margin-left: -60px; margin-right: -60px; }
@media (max-width: 900px) {
  .prose .article-figure { max-width: none; margin-left: 0; margin-right: 0; }
}

/* --- 25. i segnaposto interni non sembrano piu' contenuto -----------
   Vivono solo dentro i testi legali: nel copy visibile un marcatore di
   lavorazione non ci va, ci va la frase vera (vedi dati.NOTA_CONDIZIONI e
   dati.NOTA_BARCA). Qui restano riconoscibili a colpo d'occhio. */
.placeholder {
  display: block; background: #FFF3CD; border: 0; border-left: 3px solid var(--accent-2);
  border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 18px 0;
  font-size: 13.5px; line-height: 1.55; color: #5A4318; }
.placeholder::before {
  content: "Nota interna, da confermare con il proprietario";
  display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); }
li > .placeholder { margin: 8px 0; }

/* --- 33. il pulsante orfano in cima a «Gli spazi» ------------------- */
.spaces-head { align-items: end; }
@media (max-width: 760px) { .spaces-head { display: block; }
  .spaces-head .btn { margin-top: 22px; } }
/* la striscia «In casa ci sono anche» a pastiglie, come il resto del sito */
.es-items { display: flex; flex-wrap: wrap; gap: 10px; }
.es-items > div { padding: 8px 15px; border-radius: 999px; font-size: 13px;
  background: var(--white); border: 1px solid var(--line); color: var(--ink-80); }

/* --- 23. l'hero mostra subito una fotografia ------------------------
   prima erano due schermate di testo su bianco, con un terzo di riga
   vuota a destra e la prima foto a 1931px dalla cima. */
.hero { min-height: 0; padding-bottom: 0; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-testo { min-width: 0; }
.hero h1 { max-width: 16ch; }
.hero .lead { max-width: 46ch; }
.hero-copertina { position: relative; min-width: 0; border-radius: 20px;
  overflow: hidden; aspect-ratio: 4 / 5; background: var(--warm); }
.hero-copertina img { width: 100%; height: 100%; object-fit: cover; }
.hero-copertina::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(18,51,61,0.34)); }
.hero-grid-img { grid-column: 1 / -1; margin-top: clamp(34px, 5vw, 56px);
  grid-template-columns: repeat(4, 1fr); grid-template-rows: none;
  height: clamp(180px, 18vw, 250px); }
.hero-grid-img > div.big { grid-row: auto; }
@media (max-width: 900px) {
  /* su telefono la fotografia apre la pagina: e' la promessa visiva, e sotto
     arrivano titolo, sommario e pulsanti. */
  .hero { padding-top: 108px; }
  .hero-inner { grid-template-columns: 1fr; gap: 26px; }
  .hero-copertina { aspect-ratio: 4 / 3; order: -1; }
  .hero-grid-img { height: auto; grid-template-columns: repeat(4, 1fr); }
  .hero-grid-img > div.big { grid-column: auto; aspect-ratio: 1; }
  .hero-grid-img > div:not(.big) { aspect-ratio: 1; }
}
@media (max-width: 600px) {
  /* su telefono le tessere non si impilano piu': carosello con aggancio */
  .hero-grid-img { display: flex; gap: 10px; overflow-x: auto;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    padding-bottom: 6px; }
  .hero-grid-img > div { flex: 0 0 68%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .hero-grid-img > div.big { flex: 0 0 68%; grid-column: auto; }
}