*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 :root {
     --sand: #F5F0E8;
     --sand-dark: #EDE5D8;
     --ink: #1A1714;
     --ink-mid: #4A4540;
     --ink-light: #8A8078;
     --lake: #2B5F8A;
     --lake-deep: #1D4466;
     --lake-mist: #EBF3FA;
     --terracotta: #C06840;
     --white: #FFFFFF;
     --border: #DDD6CC;
     --radius-sm: 8px;
     --radius-md: 14px;
     --radius-lg: 20px;
     --shadow: 0 1px 3px rgba(26, 23, 20, .06), 0 4px 16px rgba(26, 23, 20, .08);
     --shadow-sm: 0 1px 2px rgba(26, 23, 20, .06), 0 2px 8px rgba(26, 23, 20, .06);
     --font-display: 'Playfair Display', Georgia, serif;
     --font-body: 'Instrument Sans', system-ui, sans-serif;
 }

 html,
 body {
     height: 100%;
     background: #C8C0B5;
     font-family: var(--font-body);
     -webkit-font-smoothing: antialiased;
     color: var(--ink)
 }
.mea-culpa-regular {
  font-family: "Mea Culpa", cursive;
  font-weight: 400;
  font-style: normal;
}
#app {
     width: 100%;
     max-width: 1200px;
     min-height: 100vh;
     background: var(--sand);
     margin: 0 auto;
     display: flex;
     flex-direction: row
 }
.lang-switcher-fixed {
    position: fixed;
   top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.7);
    padding: 6px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    padding: 8px 12px;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    color: var(--lake);
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* Stato attivo per evidenziare la lingua scelta */
.lang-btn.active {
    background: var(--lake);
    color: white;
}

.flag {
    font-size: 16px;
}

/* Nasconde le etichette su schermi molto piccoli per risparmiare spazio */
@media (max-width: 480px) {
    .lang-label { display: none; }
    .lang-switcher-fixed { top: 10px; right: 10px; }
}
 .pane-image {
     display: none
 }

 .pane-flow {
     width: 100%;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     position: relative
 }

 /* SCREENS */
 .screen {
     display: none;
     flex-direction: column;
     flex-shrink: 0;
     min-height: 100vh
 }

 .screen.active {
     display: flex;
     animation: fadeIn .25s ease
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(6px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .image {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 /* ── SCREEN 1 ── */
 #s1 {
     background: var(--sand)
 }

 .s1-hero {
     width: 100%;
     height: clamp(240px, 45vw, 380px);
     position: relative;
     overflow: hidden;
     flex-shrink: 0
 }

 .s1-hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, rgba(26, 23, 20, .12) 0%, rgba(26, 23, 20, .42) 100%);
     z-index: 1
 }

 .s1-hero-badge {
     position: absolute;
     top: 16px;
     left: 16px;
     z-index: 2;
     background: rgba(255, 255, 255, .92);
     backdrop-filter: blur(8px);
     border-radius: 100px;
     padding: 6px 14px;
     font-size: 11px;
     font-weight: 500;
     letter-spacing: .8px;
     text-transform: uppercase;
     color: var(--ink);
     border: 1px solid rgba(255, 255, 255, .6)
 }

 .s1-content {
     padding: 28px 24px 0;
     flex: 1
 }

 .host-row {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 18px
 }

 .avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: var(--lake);
     color: #fff;
     font-weight: 500;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     flex-shrink: 0
 }

 .host-name {
     font-size: 13px;
     font-weight: 500;
     color: var(--ink)
 }

 .host-tag {
     font-size: 11px;
     color: var(--terracotta);
     display: flex;
     align-items: center;
     gap: 3px;
     margin-top: 1px
 }

 .host-tag svg {
     width: 11px;
     height: 11px
 }

 .listing-title {
     font-family: var(--font-display);
     font-size: clamp(34px, 8vw, 52px);
     font-weight: 400;
     line-height: 1.06;
     color: var(--ink);
     margin-bottom: 4px
 }

 .listing-sub {
     font-family: var(--font-display);
     font-style: italic;
     font-size: clamp(15px, 3vw, 18px);
     color: var(--ink-light);
     margin-bottom: 20px
 }

 .divider {
     width: 40px;
     height: 2px;
     background: var(--terracotta);
     border-radius: 1px;
     margin-bottom: 20px
 }

 .tagline {
     font-size: 15px;
     line-height: 1.7;
     color: var(--ink-mid);
     margin-bottom: 22px;
     max-width: 480px
 }

 .pills {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 32px
 }

 .pill {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 100px;
     padding: 7px 15px;
     font-size: 12px;
     color: var(--ink-mid);
     font-weight: 400;
     letter-spacing: .2px
 }

 /* ── STICKY / FLOATING CTA ── */
 .sticky-bar {
     position: sticky;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(to top, var(--sand) 80%, transparent);
     padding: 20px 24px 28px;
     z-index: 50
 }

 .sticky-bar.flex-col {
     display: flex;
     flex-direction: column;
     gap: 10px;
     padding-bottom: 32px
 }

 /* ── BUTTONS ── */
 .btn-primary {
     width: 100%;
     padding: 16px 20px;
     border-radius: var(--radius-md);
     border: none;
     background: var(--lake);
     color: #fff;
     font-family: var(--font-body);
     font-size: 15px;
     font-weight: 500;
     cursor: pointer;
     transition: background .15s, transform .1s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px
 }

 .btn-primary:hover {
     background: var(--lake-deep)
 }

 .btn-primary:active {
     transform: scale(.98)
 }

 .btn-primary.dim {
     background: var(--ink-light)
 }

 .btn-outline {
     width: 100%;
     padding: 14px 20px;
     border-radius: var(--radius-md);
     border: 1.5px solid var(--lake);
     background: transparent;
     color: var(--lake);
     font-family: var(--font-body);
     font-size: 14px;
     font-weight: 400;
     cursor: pointer;
     transition: background .15s, color .15s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px
 }

 .btn-outline:hover {
     background: var(--lake-mist)
 }

 .btn-outline.sel {
     background: var(--lake);
     color: #fff
 }

 .btn-ghost {
     width: 100%;
     padding: 15px 20px;
     border-radius: var(--radius-md);
     border: 1.5px solid var(--border);
     background: transparent;
     color: var(--ink-mid);
     font-family: var(--font-body);
     font-size: 14px;
     cursor: pointer;
     transition: background .15s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     text-decoration: none
 }

 .btn-ghost:hover {
     background: var(--sand-dark)
 }

 /* ── STEP HEADER ── */
 .step-header {
     padding: 18px 24px 14px;
     display: flex;
     align-items: center;
     gap: 12px;
     border-bottom: 1px solid var(--border);
     flex-shrink: 0
 }

 .back-btn {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border: 1px solid var(--border);
     background: var(--white);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--ink);
     font-size: 17px;
     transition: background .15s;
     flex-shrink: 0
 }

 .back-btn:hover {
     background: var(--sand-dark)
 }

 .step-label {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: var(--ink-light);
     flex: 1;
     text-align: center
 }

 .step-spacer {
     width: 36px
 }

 .progress-bar {
     height: 3px;
     background: var(--border);
     flex-shrink: 0
 }

 .progress-fill {
     height: 100%;
     background: var(--lake);
     transition: width .35s ease
 }

 .step-body {
     padding: 28px 24px 120px;
     flex: 1;
     overflow-y: auto
 }

 .step-title {
     font-family: var(--font-display);
     font-size: clamp(26px, 6vw, 36px);
     font-weight: 400;
     color: var(--ink);
     line-height: 1.15;
     margin-bottom: 4px
 }

 .step-subtitle {
     font-family: var(--font-display);
     font-style: italic;
     font-size: 15px;
     color: var(--ink-light);
     margin-bottom: 28px
 }

 /* ── CARDS ── */
 .card {
     background: var(--white);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     padding: 20px;
     box-shadow: var(--shadow-sm)
 }

 /* ── PACKAGE CARDS ── */
 .pkg-wrap {
     display: flex;
     flex-direction: column;
     gap: 14px
 }

 .pkg-card {
     background: var(--white);
     border-radius: var(--radius-lg);
     border: 1.5px solid var(--border);
     padding: 22px 20px 18px;
     cursor: pointer;
     transition: border-color .2s, box-shadow .2s;
     position: relative
 }

 .pkg-card:hover {
     border-color: #aab8c6
 }

 .pkg-card.sel {
     border-color: var(--lake);
     box-shadow: 0 0 0 3px rgba(43, 95, 138, .1)
 }

 .pkg-badge {
     position: absolute;
     top: -13px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--terracotta);
     color: #fff;
     font-size: 10px;
     font-weight: 500;
     padding: 4px 14px;
     border-radius: 100px;
     white-space: nowrap;
     letter-spacing: .5px
 }

 .pkg-top {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 14px
 }

 .pkg-icon {
     width: 40px;
     height: 40px;
     border-radius: var(--radius-sm);
     background: var(--sand);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .pkg-icon svg {
     width: 20px;
     height: 20px;
     color: var(--lake)
 }

 .pkg-name {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     color: var(--ink-mid)
 }

 .pkg-dur {
     font-size: 13px;
     color: var(--ink-light);
     margin-top: 1px
 }

 .pkg-price {
     font-family: var(--font-display);
     font-size: 32px;
     font-weight: 400;
     color: var(--ink);
     margin-bottom: 14px;
     line-height: 1
 }

 .pkg-price span {
     font-size: 15px;
     font-weight: 400;
     color: var(--ink-light);
     margin-left: 4px
 }

 .pkg-feats {
     list-style: none;
     margin-bottom: 18px
 }

 .pkg-feats li {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     color: var(--ink-mid);
     padding: 3px 0
 }

 .pkg-feats li svg {
     width: 14px;
     height: 14px;
     color: var(--lake);
     flex-shrink: 0
 }

 /* ── CALENDAR ── */
 .cal-card {
     background: var(--white);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     padding: 20px;
     box-shadow: var(--shadow-sm);
     margin-bottom: 14px
 }

 .cal-nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px
 }

 .cal-nav-btn {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     border: 1px solid var(--border);
     background: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     color: var(--ink);
     transition: background .15s
 }

 .cal-nav-btn:hover {
     background: var(--sand)
 }

 .cal-month-label {
     font-size: 15px;
     font-weight: 500;
     color: var(--ink)
 }

 .cal-grid {
     width: 100%;
     border-collapse: collapse
 }

 .cal-grid th {
     font-size: 11px;
     font-weight: 500;
     color: var(--ink-light);
     text-align: center;
     padding: 0 0 12px;
     letter-spacing: .5px
 }

 .cal-grid td {
     text-align: center;
     padding: 1px 0
 }

 .cal-day {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: none;
     background: none;
     cursor: pointer;
     font-family: var(--font-body);
     font-size: 13px;
     color: var(--ink);
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .12s, color .12s;
     position: relative;
     z-index: 2
 }

 .cal-day:hover:not(.dis) {
     background: var(--sand-dark)
 }

 .cal-day.dis {
     color: #C8C0B8;
     cursor: default
 }

 .cal-day.sel {
     background: var(--lake) !important;
     color: #fff !important;
     border-radius: 50% !important
 }

 .cal-day.in-range {
     background: rgba(43, 95, 138, .1);
     border-radius: 0;
     color: var(--lake)
 }

 .cal-day.rng-s {
     border-radius: 50% 0 0 50%
 }

 .cal-day.rng-e {
     border-radius: 0 50% 50% 0
 }

 .cal-summary-card {
     background: var(--lake);
     border-radius: var(--radius-md);
     padding: 18px 20px;
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     justify-content: space-between
 }

 .cal-summary-nights {
     font-size: 14px;
     color: rgba(255, 255, 255, .8)
 }

 .cal-summary-nights em {
     font-style: italic;
     color: #fff
 }

 .cal-summary-price {
     font-family: var(--font-display);
     font-size: 26px;
     font-weight: 400;
     color: #fff
 }

 .cal-hint {
     text-align: center;
     font-size: 12px;
     color: var(--lake);
     margin-bottom: 10px;
     font-weight: 500;
     letter-spacing: .3px
 }

 .cal-msg {
     margin-top: 10px;
     padding: 10px 14px;
     background: #FFF8F3;
     border: 1px solid #F0C090;
     border-radius: 10px;
     font-size: 12px;
     color: #7A4A1A;
     line-height: 1.5
 }

 /* ── GUESTS ── */
 .guests-card {
     background: var(--white);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     padding: 0 20px;
     box-shadow: var(--shadow-sm);
     margin-bottom: 14px
 }

 .guest-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 18px 0;
     border-bottom: 1px solid var(--border)
 }

 .guest-row:last-child {
     border-bottom: none
 }

 .guest-label {
     font-size: 14px;
     color: var(--ink)
 }

 .stepper {
     display: flex;
     align-items: center;
     gap: 14px
 }

 .stepper-btn {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     border: 1.5px solid var(--lake);
     background: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 17px;
     color: var(--lake);
     transition: background .12s;
     line-height: 1
 }

 .stepper-btn:hover {
     background: var(--lake-mist)
 }

 .stepper-btn.dis {
     border-color: var(--border);
     color: var(--border);
     cursor: default
 }

 .stepper-val {
     font-size: 16px;
     font-weight: 400;
     color: var(--ink);
     min-width: 18px;
     text-align: center
 }

 .toggle-input {
     display: none
 }

 .toggle-label {
     display: block;
     width: 46px;
     height: 26px;
     background: var(--border);
     border-radius: 13px;
     cursor: pointer;
     transition: background .2s;
     position: relative
 }

 .toggle-label::after {
     content: '';
     position: absolute;
     top: 3px;
     left: 3px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: #fff;
     transition: transform .2s;
     box-shadow: 0 1px 4px rgba(0, 0, 0, .2)
 }

 .toggle-input:checked+.toggle-label {
     background: var(--lake)
 }

 .toggle-input:checked+.toggle-label::after {
     transform: translateX(20px)
 }

 .special-card {
     background: var(--white);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     padding: 20px;
     box-shadow: var(--shadow-sm)
 }

 .special-label {
     font-size: 13px;
     font-weight: 500;
     color: var(--ink-mid);
     margin-bottom: 10px;
     text-transform: uppercase;
     letter-spacing: .8px
 }

 .special-textarea {
     width: 100%;
     min-height: 90px;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 12px 14px;
     font-family: var(--font-body);
     font-size: 14px;
     color: var(--ink);
     background: var(--sand);
     resize: none;
     outline: none;
     transition: border-color .15s
 }

 .special-textarea::placeholder {
     color: #B0A898
 }

 .special-textarea:focus {
     border-color: var(--lake)
 }

 /* ── SUMMARY ── */
 .sum-apt-card {
     background: var(--white);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     padding: 16px;
     box-shadow: var(--shadow-sm);
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     gap: 14px
 }

 .apt-thumb {
     width: 72px;
     height: 62px;
     border-radius: var(--radius-sm);
     overflow: hidden;
     flex-shrink: 0;
     background: var(--sand-dark)
 }

 .apt-name {
     font-family: var(--font-display);
     font-size: 18px;
     font-weight: 400;
     color: var(--ink);
     margin-bottom: 2px
 }

 .apt-loc {
     font-family: var(--font-display);
     font-style: italic;
     font-size: 13px;
     color: var(--ink-light);
     margin-bottom: 8px
 }

 .apt-pkg-badge {
     display: inline-block;
     background: var(--lake);
     color: #fff;
     font-size: 10px;
     font-weight: 500;
     letter-spacing: .8px;
     text-transform: uppercase;
     padding: 3px 10px;
     border-radius: 4px
 }

 .info-card {
     background: var(--white);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     padding: 0 20px;
     box-shadow: var(--shadow-sm);
     margin-bottom: 12px
 }

 .info-row {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 16px 0;
     border-bottom: 1px solid var(--border)
 }

 .info-row:last-child {
     border-bottom: none
 }

 .info-row svg {
     width: 17px;
     height: 17px;
     color: var(--ink-light);
     margin-top: 2px;
     flex-shrink: 0
 }

 .info-label {
     font-size: 11px;
     color: var(--ink-light);
     margin-bottom: 3px;
     text-transform: uppercase;
     letter-spacing: .5px
 }

 .info-val {
     font-size: 14px;
     color: var(--ink)
 }

 .info-val-sub {
     font-size: 12px;
     color: var(--ink-light);
     margin-top: 1px
 }

 .price-card {
     background: var(--white);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     padding: 20px;
     box-shadow: var(--shadow-sm);
     margin-bottom: 12px
 }

 .price-card-title {
     font-size: 13px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: .8px;
     color: var(--ink-mid);
     margin-bottom: 16px
 }

 .price-row {
     display: flex;
     justify-content: space-between;
     font-size: 14px;
     color: var(--ink-mid);
     padding: 6px 0
 }

 .price-row.disc .val {
     color: #3A8A50
 }

 .price-row.total {
     border-top: 1px solid var(--border);
     margin-top: 10px;
     padding-top: 14px;
     font-size: 16px;
     font-weight: 500;
     color: var(--ink)
 }

 .price-row.total .val {
     color: var(--ink)
 }

 /* ── CONFIRMATION ── */
 #s6 {
     align-items: center;
     justify-content: center;
     padding: 48px 24px;
     text-align: center;
     min-height: 100vh
 }

 .confirm-icon {
     width: 72px;
     height: 72px;
     background: var(--lake);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 24px;
     animation: pop .5s cubic-bezier(.34, 1.56, .64, 1)
 }

 .confirm-icon svg {
     width: 30px;
     height: 30px;
     color: #fff
 }

 @keyframes pop {
     from {
         transform: scale(0);
         opacity: 0
     }

     to {
         transform: scale(1);
         opacity: 1
     }
 }

 .confirm-title {
     font-family: var(--font-display);
     font-size: 38px;
     font-weight: 400;
     color: var(--ink);
     margin-bottom: 12px;
     animation: fadeUp .45s .1s both
 }

 .confirm-sub {
     font-size: 14px;
     color: var(--ink-mid);
     line-height: 1.7;
     max-width: 300px;
     margin: 0 auto 28px;
     animation: fadeUp .45s .15s both
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(10px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .confirm-card {
     background: var(--white);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     padding: 0 20px;
     width: 100%;
     max-width: 420px;
     margin: 0 auto 24px;
     text-align: left;
     animation: fadeUp .45s .2s both;
     box-shadow: var(--shadow-sm)
 }

 .confirm-btns {
     width: 100%;
     max-width: 420px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 12px;
     animation: fadeUp .45s .25s both
 }

 .confirm-link {
     margin-top: 18px;
     font-size: 13px;
     color: var(--lake);
     cursor: pointer;
     text-decoration: underline;
     text-underline-offset: 3px
 }

 /* ── MODAL ── */
 .modal-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(26, 23, 20, .5);
     z-index: 999;
     align-items: flex-end;
     justify-content: center
 }

 .modal-overlay.open {
     display: flex
 }

 .modal-box {
     background: var(--white);
     border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     width: 100%;
     max-width: 480px;
     padding: 28px 24px 36px;
     box-shadow: 0 -4px 32px rgba(26, 23, 20, .15)
 }

 .modal-title {
     font-family: var(--font-display);
     font-size: 22px;
     font-weight: 400;
     color: var(--ink);
     text-align: center;
     margin-bottom: 4px
 }

 .modal-sub {
     font-size: 13px;
     color: var(--ink-light);
     text-align: center;
     margin-bottom: 24px
 }

 .modal-btn {
     display: flex;
     align-items: center;
     gap: 14px;
     width: 100%;
     padding: 16px 18px;
     border-radius: var(--radius-md);
     border: 1.5px solid;
     background: transparent;
     cursor: pointer;
     margin-bottom: 12px;
     text-align: left;
     transition: background .15s
 }

 .modal-btn-label {
     font-size: 14px;
     font-weight: 500
 }

 .modal-btn-sub {
     font-size: 12px;
     margin-top: 2px
 }

 .modal-btn.wa {
     border-color: #25D366
 }

 .modal-btn.wa:hover {
     background: #F0FDF4
 }

 .modal-btn.wa .modal-btn-label {
     color: #166534
 }

 .modal-btn.wa .modal-btn-sub {
     color: #4ADE80
 }

 .modal-btn.em {
     border-color: var(--lake)
 }

 .modal-btn.em:hover {
     background: var(--lake-mist)
 }

 .modal-btn.em .modal-btn-label {
     color: var(--lake-deep)
 }

 .modal-btn.em .modal-btn-sub {
     color: #5A8AC4
 }

 .modal-cancel {
     width: 100%;
     padding: 12px;
     border: none;
     background: transparent;
     color: var(--ink-light);
     font-family: var(--font-body);
     font-size: 14px;
     cursor: pointer;
     margin-top: 4px
 }

 /* ── DESKTOP ── */
 @media(min-width:768px) {
     body {
         overflow: hidden
     }

     #app {
         height: 100vh;
         overflow: hidden
     }

     .pane-image {
         display: block;
         flex: 1;
         position: relative;
         overflow: hidden
     }

     /* ── CAROUSEL SLIDES ── */
     .carousel-slide {
         position: absolute;
         inset: 0;
         opacity: 0;
         transition: opacity 1.2s ease
     }

     .carousel-slide.active {
         opacity: 1
     }

     .carousel-slide img {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         animation: kenBurns 8s ease-in-out infinite alternate
     }

     .carousel-slide.active img {
         animation-play-state: running
     }

     /* ── SLIDE OVERLAYS ── */
     .carousel-overlay {
         position: absolute;
         inset: 0;
         pointer-events: none
     }

     .overlay-warm {
         background: linear-gradient(160deg, rgba(192,104,64,.18) 0%, rgba(0,0,0,.52) 100%)
     }

     .overlay-lake {
         background: linear-gradient(160deg, rgba(43,95,138,.22) 0%, rgba(0,0,0,.55) 100%)
     }

     .overlay-dusk {
         background: linear-gradient(160deg, rgba(60,30,60,.2) 0%, rgba(0,0,0,.6) 100%)
     }

     /* ── CAPTIONS ── */
     .pane-image-caption {
         position: absolute;
         bottom: 60px;
         left: 32px;
         right: 32px;
         z-index: 10
     }

     .carousel-caption {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         opacity: 0;
         transform: translateY(10px);
         transition: opacity .8s ease, transform .8s ease;
         pointer-events: none
     }

     .carousel-caption.active {
         opacity: 1;
         transform: none;
         pointer-events: auto
     }

     .carousel-caption h2 {
         font-family: var(--font-display);
         font-size: 30px;
         font-weight: 400;
         color: #fff;
         text-shadow: 0 2px 12px rgba(0,0,0,.5);
         margin-bottom: 6px;
         line-height: 1.15
     }

     .carousel-caption p {
         font-family: var(--font-display);
         font-style: italic;
         font-size: 15px;
         color: rgba(255,255,255,.82);
         text-shadow: 0 1px 6px rgba(0,0,0,.4)
     }

     /* ── DOT INDICATORS ── */
     .carousel-dots {
         position: absolute;
         bottom: 24px;
         left: 0;
         right: 0;
         display: flex;
         justify-content: center;
         gap: 8px;
         z-index: 10
     }

     .carousel-dot {
         width: 7px;
         height: 7px;
         border-radius: 50%;
         border: none;
         background: rgba(255,255,255,.4);
         cursor: pointer;
         padding: 0;
         transition: background .3s, transform .3s
     }

     .carousel-dot.active {
         background: #fff;
         transform: scale(1.35)
     }

     .carousel-dot:hover {
         background: rgba(255,255,255,.75)
     }

     @keyframes kenBurns {
         from { transform: scale(1) }
         to { transform: scale(1.1) }
     }

     .pane-flow {
         flex: 1;
         max-width: 520px;
         height: 100vh;
         overflow-y: auto
     }

     #s1 .s1-hero {
         display: none
     }

     /* Le foto della galleria sono nascoste su desktop: nascondo anche i <br>
        che le separavano, altrimenti restano righe vuote prima di "Cosa troverai". */
     #s1 .s1-content > br {
         display: none
     }

     #s1 .s1-content {
         padding: 48px 36px 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
         min-height: 80vh
     }

     #s1 .sticky-bar {
         position: sticky;
         background: var(--sand);
         padding: 20px 36px 32px
     }

     .step-header {
         padding: 20px 36px 16px
     }

     .step-body {
         padding: 28px 36px 120px
     }

     .sticky-bar {
         padding-left: 36px;
         padding-right: 36px
     }

     #s2 .step-body {
         padding-bottom: 140px
     }

     .pkg-wrap {
         flex-direction: row;
         gap: 12px;
         align-items: stretch
     }

     .pkg-card {
         flex: 1;
         min-width: 0;
         display: flex;
         flex-direction: column
     }

     .pkg-card .btn-outline {
         margin-top: auto
     }

     #s6 {
         padding: 64px 36px
     }
 }

 @media(min-width:960px) {
     .pane-flow {
         max-width: 560px
     }
 }



 /* ── Sezione "Cosa troverai" (servizi dell'appartamento) ── */
.amenities {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
}

.amenities-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 24px;
}

.amenity-group {
    margin-bottom: 26px;
}

.amenity-group:last-child {
    margin-bottom: 0;
}

.amenity-group-title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lake);
    margin-bottom: 14px;
}

.amenity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px 20px;
}

.amenity {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.amenity-ic {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    color: var(--ink-mid);
}

.amenity-ic svg {
    width: 100%;
    height: 100%;
    display: block;
}

.amenity-txt {
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--ink);
    padding-top: 2px;
}

.amenity-txt small {
    display: block;
    font-size: 12px;
    color: var(--ink-light);
    margin-top: 2px;
    text-decoration: none;
}

/* Servizi non inclusi: barrati e attenuati */
.amenity.unavailable .amenity-ic {
    color: var(--ink-light);
}

.amenity.unavailable .amenity-txt {
    color: var(--ink-light);
    text-decoration: line-through;
    text-decoration-color: rgba(138, 128, 120, .55);
}

/* Servizi (schede con badge / prezzo) */
.svc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.svc-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
}

.svc-ic {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--lake);
}

.svc-ic svg {
    width: 100%;
    height: 100%;
    display: block;
}

.svc-body {
    flex: 1;
    min-width: 0;
}

.svc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.svc-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
}

.svc-desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-mid);
    margin-top: 5px;
}

.svc-tag {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 3px 9px;
    border-radius: 50px;
    white-space: nowrap;
}

.svc-tag.free {
    background: var(--lake-mist);
    color: var(--lake);
}

.svc-tag.paid {
    background: var(--sand-dark);
    color: var(--ink-mid);
}

.svc-price {
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--terracotta);
    white-space: nowrap;
}

/* Posizione e distanze */
.info-dist {
    display: flex;
    flex-direction: column;
}

.dist-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.dist-row:last-child {
    border-bottom: none;
}

.dist-ic {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--ink-mid);
}

.dist-ic svg {
    width: 100%;
    height: 100%;
    display: block;
}

.dist-label {
    flex: 1;
    font-size: 14.5px;
    color: var(--ink);
}

.dist-val {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--lake);
    white-space: nowrap;
}

/* ── Form richiesta di prenotazione ── */
.form-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-row.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-mid);
}

.form-field input,
.form-field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    background: var(--sand);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none;
    appearance: none;
}

.form-field textarea {
    resize: vertical;
    min-height: 84px;
    line-height: 1.45;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--lake);
    box-shadow: 0 0 0 3px var(--lake-mist);
    background: var(--white);
}

.form-field input.err,
.form-field textarea.err {
    border-color: var(--terracotta);
    background: rgba(192, 104, 64, .05);
}

.form-hint {
    font-size: 12px;
    color: var(--ink-light);
    line-height: 1.45;
}

.form-error {
    font-size: 13px;
    font-weight: 500;
    color: var(--terracotta);
    background: rgba(192, 104, 64, .08);
    border: 1px solid rgba(192, 104, 64, .3);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    line-height: 1.4;
}

@media (max-width: 420px) {
    .form-row.two {
        grid-template-columns: 1fr;
    }
}

 /* --- Stile Selezione Lingua --- */
.language-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Default 2 colonne su mobile */
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.lang-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.lang-card:hover {
    border-color: var(--lake);
    background: var(--lake-mist);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.lang-flag {
    font-size: 32px;
    margin-bottom: 12px;
}

.lang-name {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 13px;
}

/* --- Stile Scelte Responsive --- */
.responsive-options {
    display: flex;
    flex-direction: column; /* Mobile: uno sopra l'altro */
    gap: 20px;
    width: 100%;
}

.selection-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 40px 30px;
    min-height: 280px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}

/* --- OTTIMIZZAZIONE PC (Desktop) --- */
@media (min-width: 768px) {
    .language-grid {
        grid-template-columns: repeat(4, 1fr); /* Su PC le lingue sono tutte su una riga */
    }

    .responsive-options {
        flex-direction: row; /* Su PC i due div sono affiancati */
        align-items: stretch;
    }

    .selection-box {
        transition: transform 0.3s ease;
    }

    .selection-box:hover {
        transform: scale(1.02);
    }
}