/* ══════════ Casa Liliana Premium Plus ══════════ */
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/playfair-display-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:500; font-display:swap; src:url('../fonts/playfair-display-latin-500-italic.woff2') format('woff2'); }
:root { --ivory:#FBF8F2; --paper:#F4F0E8; --ease:cubic-bezier(.2,.7,.2,1); --r:14px; }

/* ── Menu che galleggia ── */
.site-nav { top:12px; left:50%; right:auto; width:min(1240px, calc(100% - 24px)); transform:translateX(-50%); height:62px; padding:0 10px 0 22px; border:1px solid rgba(255,255,255,.65); border-radius:999px; background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 12px 40px -16px rgba(20,32,56,.4); }
.logo-img { height:40px; }
.nav-links { position:relative; gap:2px; }
.nav-link { position:relative; z-index:1; padding: 10px 17px; border-radius:999px; }
.nav-link:hover, .nav-link.on { color: var(--blue); }
.nav-ind { position:absolute; left:0; top:50%; height:38px; width:0; transform: translateY(-50%); border-radius:999px; background: rgba(26,58,107,.1); opacity:0; transition: left .55s var(--ease), width .55s var(--ease), opacity .3s; }
.nav-book { border-radius:999px; padding: 12px 22px; min-height:42px; }
.lang { border-radius:999px; }

/* ── Sfocatura progressiva ── */
.pb-top { position:fixed; left:0; right:0; top:0; height:96px; z-index:290; pointer-events:none; }
.pb-top::before, .pb-top::after, .pb-bot::before, .pb-bot::after { content:''; position:absolute; left:0; right:0; }
.pb-top::before { inset:0; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); }
.pb-top::after { top:0; height:58%; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); }
.pb-bot { position:absolute; left:0; right:0; bottom:0; height:42%; z-index:0; pointer-events:none; }
.pb-bot::before { inset:0; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 100%); mask-image: linear-gradient(to top, #000 10%, transparent 100%); }
.pb-bot::after { bottom:0; height:62%; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 100%); mask-image: linear-gradient(to top, #000 15%, transparent 100%); }

/* ── Foto che mettono a fuoco ── */
@media (hover:hover) {
  .mz-grid .cb, .g3 .cb, .tc-photos .cb { transition: filter .5s ease, transform .6s var(--ease), opacity .5s; }
  .mz-grid:has(.cb:hover) .cb:not(:hover), .g3:has(.cb:hover) .cb:not(:hover), .tc-photos:has(.cb:hover) .cb:not(:hover) { filter: blur(3px) saturate(.75) brightness(.92); transform: scale(.985); }
}

/* ── Camere: carte che si impilano ── */
.stk { background: var(--paper); padding: clamp(48px, 7vw, 100px) clamp(12px, 3vw, 40px) clamp(48px, 7vw, 100px); }
.stk-card { --top: calc(var(--nav-h) + 22px + var(--i) * 16px); position:sticky; top: var(--top); display:grid; grid-template-columns: 54% 46%; max-width: 1320px; height: min(640px, calc(100svh - var(--nav-h) - 60px - var(--i) * 16px)); margin: 0 auto clamp(28px, 6vh, 64px); border-radius: 22px; overflow:hidden; background:#fff; box-shadow: 0 -2px 0 rgba(255,255,255,.6) inset, 0 30px 70px -34px rgba(26,24,22,.45), 0 0 0 1px rgba(26,24,22,.06); transform-origin: 50% 0; will-change: transform; }
.stk-card.rev { grid-template-columns: 46% 54%; }
.stk-card.rev .stk-img { order:2; }
.stk-card.sand { background: var(--ivory); }
.stk-img { height:100%; border-radius:0; }
.stk-txt { display:flex; flex-direction:column; justify-content:center; padding: clamp(24px, 4vw, 60px); min-height:0; overflow:hidden; }
.stk-txt .alt-p { font-size: 15px; line-height:1.7; margin-bottom: 8px; }
.stk-txt .alt-h3 { margin-bottom: 16px; }
.stk-sub { display:grid; grid-template-columns: 1fr 1fr; gap:6px; margin-top: 18px; }
.stk-th { height: clamp(70px, 11vh, 112px); }
.stk-img img { object-position: 50% 55%; }

/* ── Destinazione ── */
.v2-dest-cta { text-align:center; margin-top: 34px; }
/* ═══ DESTINAZIONE: strisce ═══ */
.v3-dest { background: var(--paper); padding: clamp(70px, 9vw, 120px) clamp(12px, 3vw, 40px) clamp(70px, 9vw, 120px); }
.v3-acc { display:flex; gap:10px; max-width: 1320px; margin: clamp(34px, 5vw, 60px) auto 0; height: clamp(440px, 68vh, 640px); }
.v3-s { position:relative; flex: 1 1 0; min-width:0; border:0; padding:0; border-radius:14px; overflow:hidden; cursor:pointer; background:#222; color:#fff; text-align:left; transition: flex-grow .85s var(--ease); font: inherit; isolation:isolate; }
.v3-s.on { flex-grow: 5.4; cursor:default; }
.v3-s img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: scale(1.06); transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.92) brightness(.86); }
.v3-s.on img { transform:none; filter:none; }
.v3-s::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(14,24,44,0) 35%, rgba(14,24,44,.78) 100%); z-index:1; pointer-events:none; }
.v3-s-n { position:absolute; left:20px; top:18px; z-index:2; font: 400 1.15rem/1 'Bodoni Moda', var(--serif); letter-spacing:.04em; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.v3-s-v { position:absolute; left:50%; bottom:22px; z-index:2; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font: italic 400 1.5rem/1 var(--display); white-space:nowrap; text-shadow: 0 1px 14px rgba(0,0,0,.5); transition: opacity .35s; }
.v3-s.on .v3-s-v { opacity:0; }
.v3-s-t { position:absolute; left: clamp(20px, 2.6vw, 36px); right: clamp(20px, 2.6vw, 36px); bottom: clamp(20px, 2.6vw, 34px); z-index:2; opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .7s var(--ease); pointer-events:none; }
.v3-s.on .v3-s-t { opacity:1; transform:none; transition-delay:.28s; }
.v3-s-t b { display:block; font: italic 400 clamp(1.8rem, 3.2vw, 2.7rem)/1.05 var(--display); margin-bottom:12px; }
.v3-s-t span { display:block; max-width: 34em; font-size: clamp(14px, 1.15vw, 16px); line-height:1.65; color: rgba(255,255,255,.92); }
.v3-s:focus-visible { outline:3px solid var(--ocra); outline-offset:3px; }


.v3-dest { padding: clamp(70px, 9vw, 120px) clamp(12px, 3vw, 40px) clamp(56px, 7vw, 90px); }

@media (max-width: 1000px) {
  .site-nav { width: calc(100% - 16px); top:8px; padding: 0 8px 0 16px; height:58px; }
}
@media (max-width: 860px) {
  .stk-card, .stk-card.rev { position:relative; top:auto; height:auto; grid-template-columns: 1fr; transform:none !important; }
  .stk-card.rev .stk-img { order:0; }
  .stk-img { height: 280px; }
  .stk-th { height: 96px; }
  .v3-acc { flex-direction:column; height:auto; gap:8px; }
  .v3-s { flex: none; height: 74px; transition: height .8s var(--ease); }
  .v3-s.on { height: min(440px, 62vh); }
  .v3-s-v { writing-mode: horizontal-tb; transform:none; left:56px; bottom:auto; top:50%; margin-top:-.5em; }
  .v3-s-n { top:50%; margin-top:-.5em; }
}
@media (max-width: 600px) { .logo-img { height:34px; } .nav-book { padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .stk-card { position:relative; top:auto; transform:none !important; } .v3-s, .v3-s img, .v3-s-t, .nav-ind { transition:none; } }