/* =====================================================
   B&B La Piazzetta Ischia - Design System
   Modern, Mediterranean-inspired styling
   ===================================================== */

/* CSS Custom Properties */
:root {
    /* Brand Colors */
    --color-primary: #78B1CF;
    --color-primary-dark: #5A9ABC;
    --color-primary-light: #A8D1E7;
    --color-accent: #48B1D9;
    --color-accent-dark: #2E8BC0;
    --color-gold: #D4A855;
    --color-gold-light: #E6C47A;
    
    /* Neutral Colors */
    --color-text: rgba(0, 0, 0, 0.8);
    --color-text-light: rgba(0, 0, 0, 0.6);
    --color-text-muted: rgba(0, 0, 0, 0.4);
    --color-white: #FFFFFF;
    --color-bg: #F8FAFB;
    --color-bg-alt: #EEF4F7;
    --color-border: rgba(120, 177, 207, 0.2);
    
    /* Typography */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 40px rgba(72, 177, 217, 0.3);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Z-Index */
    --z-navbar: 1000;
    --z-modal: 1100;
    --z-tooltip: 1200;
    /* The concierge room has to clear the cookie banner in legal.css (9999),
       which otherwise covers its composer — on a phone that means the guest
       cannot type at all. It stays below the skip link (10001), which must win
       against everything. */
    --z-concierge: 10000;
}

/* =====================================================
   Reset & Base Styles
   ===================================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    overflow-x: hidden;
}

/* Accessibility: skip-to-content link, visible only on keyboard focus */
.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 10001;
    background: var(--color-primary-dark);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 8px;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* =====================================================
   Utility Classes
   ===================================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* =====================================================
   Typography
   ===================================================== */
.section-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.section-header.light {
    color: var(--color-white);
}

.section-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent);
    background: linear-gradient(135deg, rgba(72, 177, 217, 0.1), rgba(120, 177, 207, 0.1));
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

.section-header.light .section-tag {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    color: var(--color-primary-dark);
}

.section-header.light .section-title {
    color: var(--color-white);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
}

.section-header.light .section-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* =====================================================
   Buttons
   ===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.875rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn i {
    font-size: 0.9em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    color: var(--color-white);
    box-shadow: 0 4px 15px rgba(72, 177, 217, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(72, 177, 217, 0.5);
}

.btn-secondary {
    background: var(--color-white);
    color: var(--color-primary-dark);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
}

.btn-full {
    width: 100%;
}

/* =====================================================
   Navigation
   ===================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
    padding: var(--space-lg) 0;
    transition: all var(--transition-base);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: var(--space-md) 0;
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.nav-logo-img {
    height: 46px;
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.3));
    transition: filter var(--transition-base);
}
.navbar.scrolled .nav-logo-img {
    filter: none;
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    font-style: italic;
    transition: color var(--transition-base);
}

.navbar.scrolled .logo-text {
    color: var(--color-primary-dark);
}

.logo-subtitle {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--transition-base);
}

.navbar.scrolled .logo-subtitle {
    color: var(--color-text-light);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    padding: var(--space-xs) 0;
    transition: color var(--transition-base);
}

.navbar.scrolled .nav-link {
    color: var(--color-text);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--color-white);
}

.navbar.scrolled .nav-link:hover {
    color: var(--color-accent);
}

.nav-btn {
    padding: 0.75rem 1.5rem;
    background: var(--color-accent);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-base);
}

.nav-btn:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(72, 177, 217, 0.4);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: var(--space-sm);
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background: var(--color-white);
    transition: all var(--transition-base);
}

.navbar.scrolled .nav-toggle span {
    background: var(--color-text);
}

/* =====================================================
   Hero Section
   ===================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-4xl) max(7vw, 3rem);
    overflow: hidden;
}

.hero-slides {
    position: absolute;
    inset: 0;
}

@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.13); }
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    will-change: transform, opacity;
    animation: heroZoom 10s ease-in-out infinite alternate;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.55) 38%,
        rgba(0, 0, 0, 0.18) 68%,
        rgba(0, 0, 0, 0.04) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: left;
    max-width: 640px;
    padding: var(--space-xl) 0;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 5.8rem);
    font-weight: 700;
    line-height: 1.0;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
}

.hero-title .highlight {
    display: block;
    font-style: italic;
    font-size: 1.2em;
    background: linear-gradient(135deg, var(--color-white), var(--color-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: var(--space-2xl);
    max-width: 500px;
    margin-left: 0;
    margin-right: 0;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-md);
}

/* Hero eyebrow */
.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.4rem;
}
.hero-eyebrow-line {
    display: block;
    width: 40px;
    height: 2px;
    background: var(--color-gold);
    flex-shrink: 0;
}
.hero-eyebrow-text {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-gold-light);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: var(--space-2xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: bounce 2s infinite;
}

.mouse {
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-full);
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 1.5s infinite;
}

@keyframes scroll {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* Animations */
.animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================
   Booking Widget
   ===================================================== */
.booking-widget {
    padding: var(--space-3xl) 0;
    background: var(--color-bg);
    margin-top: -var(--space-4xl);
    position: relative;
    z-index: 10;
}

.booking-card {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.booking-card h3 {
    text-align: center;
    font-size: 1.25rem;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-xl);
}

.booking-card h3 i {
    margin-right: var(--space-sm);
    color: var(--color-accent);
}

.booking-form { width: 100%; }

.booking-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 120px 100px;
    gap: 1rem;
    align-items: end;
}
.booking-fields.has-nights { grid-template-columns: 1fr 1fr 80px 120px 100px; }
.booking-field { display: flex; flex-direction: column; gap: 0.45rem; }
.booking-field label {
    font-size: 0.72rem; font-weight: 700;
    color: var(--color-text-light);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.booking-field label i { margin-right: 5px; color: var(--color-primary); }

.date-input-wrap { position: relative; display: flex; align-items: center; }
.date-icon { position: absolute; left: 12px; color: var(--color-primary); font-size: 0.85rem; pointer-events: none; z-index: 1; }
.date-input-wrap input[type="text"] {
    width: 100%; padding: 0.8rem 0.9rem 0.8rem 2.4rem;
    border: 2px solid var(--color-border); border-radius: var(--radius-md);
    background: white; font-family: var(--font-primary); font-size: 0.9rem;
    color: var(--color-text); cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s; caret-color: transparent;
}
.date-input-wrap input[type="text"]:focus,
.date-input-wrap input[type="text"].active {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(120,177,207,0.18);
}
.date-input-wrap input[type="text"].error { border-color: #e55353; }
.date-input-wrap input[type="text"]::placeholder { color: #bbb; font-size: 0.82rem; }

.field-error { font-size: 0.7rem; color: #e55353; display: none; margin-top: -2px; }
.field-error.visible { display: block; }

.nights-badge {
    height: 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(120,177,207,0.12); border: 2px solid var(--color-primary-light);
    border-radius: var(--radius-md); line-height: 1.1; animation: fadeIn 0.3s ease;
}
#nights-count { font-size: 1.15rem; font-weight: 700; color: var(--color-primary-dark); }
#nights-label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }

.guests-counter {
    display: flex; align-items: center;
    border: 2px solid var(--color-border); border-radius: var(--radius-md);
    background: white; overflow: hidden; height: 48px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.guests-counter:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(120,177,207,0.18); }
.counter-btn {
    background: none; border: none; width: 34px; height: 100%;
    font-size: 1.2rem; color: var(--color-primary-dark);
    cursor: pointer; transition: background 0.15s; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.counter-btn:hover:not(:disabled) { background: var(--color-bg-alt); }
.counter-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.counter-display { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
#guestsCount { font-size: 1.05rem; font-weight: 700; color: var(--color-text); }
.counter-label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }

.booking-field--cta .btn { height: 48px; white-space: nowrap; font-size: 0.88rem; padding: 0 1rem; }

/* Flatpickr custom theme */
.flatpickr-calendar { font-family: var(--font-primary) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-xl) !important; border: 1px solid var(--color-border) !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--color-primary-dark) !important; border-color: var(--color-primary-dark) !important; }
.flatpickr-day.inRange { background: rgba(120,177,207,0.2) !important; border-color: rgba(120,177,207,0.2) !important; box-shadow: -5px 0 0 rgba(120,177,207,0.2), 5px 0 0 rgba(120,177,207,0.2) !important; }
.flatpickr-day:hover:not(.flatpickr-disabled) { background: rgba(120,177,207,0.15) !important; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { color: var(--color-primary-dark) !important; fill: var(--color-primary-dark) !important; }
.flatpickr-weekday { color: var(--color-primary) !important; font-weight: 600 !important; }
.flatpickr-day.today { border-color: var(--color-primary) !important; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
    .booking-fields, .booking-fields.has-nights { grid-template-columns: 1fr 1fr; }
    .booking-field--nights { display: none !important; }
    .booking-field--cta { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .booking-fields, .booking-fields.has-nights { grid-template-columns: 1fr; }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-light);
}

.form-group label i {
    margin-right: var(--space-xs);
    color: var(--color-accent);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.875rem var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(72, 177, 217, 0.1);
}

/* =====================================================
   Rooms Section
   ===================================================== */
.rooms {
    padding: var(--space-4xl) 0;
    background: var(--color-white);
}

.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
}

.room-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.room-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.room-card.featured {
    border: 2px solid var(--color-gold);
}

.room-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.room-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-image-placeholder i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
}

.room-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.room-badge.gold {
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
}

.room-content {
    padding: var(--space-xl);
}

.room-name {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-sm);
}

.room-description {
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
    font-size: 0.95rem;
}

.room-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin-bottom: var(--space-xl);
}

.room-features li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.room-features i {
    color: var(--color-accent);
    width: 16px;
}

/* =====================================================
   About Section
   ===================================================== */
.about {
    padding: var(--space-4xl) 0;
    background: var(--color-bg);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.about-content .section-tag {
    margin-bottom: var(--space-sm);
}

.about-content .section-title {
    text-align: left;
    margin-bottom: var(--space-lg);
}

.about-text {
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
    font-size: 1.05rem;
}

.about-text strong {
    color: var(--color-primary-dark);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.service-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.service-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.service-item i {
    font-size: 1.25rem;
    color: var(--color-accent);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(72, 177, 217, 0.1), rgba(120, 177, 207, 0.1));
    border-radius: var(--radius-sm);
}

.service-item span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
}

.about-visual {
    display: flex;
    justify-content: center;
}

.visual-card {
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =====================================================
   Location Section
   ===================================================== */
.location {
    padding: var(--space-4xl) 0;
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-accent-dark));
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.location-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.location-item {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
    transition: all var(--transition-base);
}

.location-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.location-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.location-icon i {
    font-size: 1.25rem;
    color: var(--color-white);
}

.location-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.location-info p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.location-map {
    display: flex;
    justify-content: center;
}

.map-placeholder {
    padding: var(--space-3xl);
    border-radius: var(--radius-lg);
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
}

.map-placeholder i {
    font-size: 4rem;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
}

.map-placeholder p {
    color: var(--color-white);
    font-size: 1.1rem;
    margin-bottom: var(--space-xl);
    line-height: 1.8;
}

/* Map embed */
.map-embed-wrap {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.35);
}
.map-embed-wrap iframe {
    display: block;
    width: 100%;
    height: 360px;
    border: 0;
}
.map-open-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255,255,255,0.12);
    border-top: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.92);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: background 0.2s;
    text-decoration: none;
}
.map-open-btn i { color: var(--color-gold-light); }
.map-open-btn:hover {
    background: rgba(255,255,255,0.22);
    color: white;
}

/* =====================================================
   Contact Section
   ===================================================== */
.contact {
    padding: var(--space-4xl) 0;
    background: var(--color-bg);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.contact-info .section-tag {
    margin-bottom: var(--space-sm);
}

.contact-info .section-title {
    text-align: left;
    margin-bottom: var(--space-md);
}

.contact-info > p {
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.contact-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.contact-item.whatsapp:hover {
    background: #25D366;
    color: var(--color-white);
}

.contact-item.whatsapp:hover i,
.contact-item.whatsapp:hover strong,
.contact-item.whatsapp:hover span {
    color: var(--color-white);
}

.contact-item i {
    font-size: 1.5rem;
    color: var(--color-accent);
    width: 40px;
}

.contact-item strong {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 2px;
}

.contact-item span {
    font-size: 1rem;
    color: var(--color-text);
}

.contact-form {
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.contact-form h3 {
    font-size: 1.25rem;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.contact-form .form-group {
    margin-bottom: var(--space-md);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

/* =====================================================
   Footer
   ===================================================== */
.footer {
    background: linear-gradient(135deg, #1a3a4a, #0d1f29);
    color: rgba(255, 255, 255, 0.8);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.footer-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-lg);
}

.footer-logo-img {
    height: 54px;
    width: auto;
    flex-shrink: 0;
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
}

.footer-logo .logo-text {
    color: var(--color-white);
}

.footer-logo .logo-subtitle {
    color: var(--color-primary-light);
}

.footer-brand p {
    font-size: 0.95rem;
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all var(--transition-base);
}

.footer-social a:hover {
    background: var(--color-accent);
    transform: translateY(-3px);
}

.footer-links h4,
.footer-contact h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-links ul,
.footer-contact ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links a,
.footer-contact a,
.footer-contact li {
    font-size: 0.9rem;
    transition: all var(--transition-fast);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--color-accent);
    transform: translateX(3px);
}

.footer-contact i {
    margin-top: 4px;
    color: var(--color-accent);
    width: 16px;
}

.footer-bottom {
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.85rem;
}

.footer-bottom p {
    margin-bottom: var(--space-xs);
}

.footer-bottom a {
    color: var(--color-primary-light);
}

.footer-bottom a:hover {
    color: var(--color-accent);
}

/* "Made with ❤️ by iRevenue" build credit */
.footer-credit {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    opacity: 0.85;
}
.footer-credit a {
    font-weight: 600;
}

/* =====================================================
   Back to Top
   ===================================================== */
.back-to-top {
    position: fixed;
    bottom: calc(28px + 60px + 12px); /* sits above .whatsapp-float */
    right: 28px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    color: var(--color-white);
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
    z-index: 100;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
}

/* =====================================================
   Responsive Design
   ===================================================== */
@media (max-width: 1024px) {
    .about-grid,
    .location-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Collapse the primary navigation to the side drawer below 1200px so the
   full link set (now including the Journal) never crowds the bar or wraps
   the logo on tablets and small laptops. The drawer holds every link. */
@media (max-width: 1279px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: var(--color-white);
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-4xl) var(--space-xl);
        gap: var(--space-lg);
        box-shadow: var(--shadow-xl);
        transition: right var(--transition-base);
        overflow-y: auto;
    }
    .nav-menu.active { right: 0; }
    .nav-menu .nav-link { color: var(--color-text); font-size: 1.1rem; }
    .nav-menu .nav-btn { width: 100%; text-align: center; margin-top: var(--space-md); }
    .nav-toggle { display: flex; z-index: 1001; }
    .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: var(--color-white);
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-4xl) var(--space-xl);
        gap: var(--space-lg);
        box-shadow: var(--shadow-xl);
        transition: right var(--transition-base);
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-menu .nav-link {
        color: var(--color-text);
        font-size: 1.1rem;
    }
    
    .nav-menu .nav-btn {
        width: 100%;
        text-align: center;
        margin-top: var(--space-md);
    }
    
    .nav-toggle {
        display: flex;
        z-index: 1001;
    }
    
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-cta .btn {
        width: 100%;
        max-width: 280px;
    }
    
    .booking-form {
        grid-template-columns: 1fr;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-links a,
    .footer-contact li {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .container {
        padding: 0 var(--space-md);
    }
    
    .rooms-grid {
        grid-template-columns: 1fr;
    }
    
}

/* =====================================================
   Animations (AOS-like effects with CSS)
   ===================================================== */
[data-aos] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="fade-up"] {
    transform: translateY(30px);
}

[data-aos="fade-right"] {
    transform: translateX(-30px);
}

[data-aos="fade-left"] {
    transform: translateX(30px);
}

[data-aos="zoom-in"] {
    transform: scale(0.9);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translate(0) scale(1);
}

[data-aos-delay="100"] { transition-delay: 0.1s; }
[data-aos-delay="200"] { transition-delay: 0.2s; }
[data-aos-delay="300"] { transition-delay: 0.3s; }
[data-aos-delay="300"] { transition-delay: 0.3s; }
[data-aos-delay="400"] { transition-delay: 0.4s; }
[data-aos-delay="500"] { transition-delay: 0.5s; }

/* =====================================================
   Language selector — minimal "quiet-luxury" globe menu
   A single understated trigger (fine-line globe + current
   language + caret) reveals a frosted-glass list. Gold marks
   the active language — La Piazzetta's signature accent.
   The wrapper keeps .nav-lang + <a> options, so the i18n /
   localStorage handler in script.js keeps working unchanged.
   ===================================================== */
.nav-lang.lang-select {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: var(--space-lg);
    -webkit-tap-highlight-color: transparent;
}

/* ---- Trigger ---- */
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.25rem;
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.92);   /* over the hero */
    background: none;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition-base);
}
.navbar.scrolled .lang-trigger { color: var(--color-text); }   /* on white */

.lang-globe {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    color: var(--color-gold);   /* tints nothing directly; kept for fallback */
    opacity: 0.95;
    transition: transform var(--transition-slow);
}
.lang-trigger .lang-globe { color: inherit; }

.lang-trigger-text {
    position: relative;
    padding-bottom: 3px;
    white-space: nowrap;
}
/* gold hairline grows on hover/open — the one quiet micro-interaction */
.lang-trigger-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
}
.lang-trigger-code { display: none; }   /* shown only on narrow screens */

.lang-caret {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    stroke: currentColor;
    opacity: 0.65;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Trigger interactions */
.lang-trigger:hover .lang-trigger-text::after,
.lang-select.open .lang-trigger-text::after { transform: scaleX(1); }
.lang-trigger:hover .lang-globe { transform: rotate(-18deg); }
.lang-trigger:hover .lang-caret { opacity: 1; }
.lang-select.open .lang-caret { transform: rotate(180deg); opacity: 1; }
.lang-trigger:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}

/* ---- Dropdown panel ---- */
.lang-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    min-width: 13rem;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(120, 177, 207, 0.06);
    /* closed */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.26s;
    z-index: 30;
}
.lang-select.open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s;
}
/* faint gold hairline along the top edge of the panel */
.lang-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold-light), transparent);
    opacity: 0.8;
}

.lang-menu li { margin: 0; }

.lang-menu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;          /* comfortable, no-mis-tap target */
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-light);
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);
}
.lang-name { transition: transform var(--transition-base); }
.lang-tag {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}
.lang-check {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke: var(--color-gold);
}

.lang-menu a:hover,
.lang-menu a:focus-visible {
    background: rgba(120, 177, 207, 0.12);
    color: var(--color-primary-dark);
    outline: none;
}
.lang-menu a:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: -2px;
}
.lang-menu a:hover .lang-name,
.lang-menu a:focus-visible .lang-name { transform: translateX(3px); }
.lang-menu a:hover .lang-tag,
.lang-menu a:focus-visible .lang-tag { color: var(--color-primary-dark); }

/* Active language — gold wash + bolder name + gold check */
.lang-menu a.is-current {
    color: var(--color-primary-dark);
    font-weight: 600;
    background: rgba(212, 168, 85, 0.1);
    cursor: default;
}
.lang-menu a.is-current:hover .lang-name { transform: none; }

/* Row entrance — subtle staggered rise */
.lang-menu li a {
    opacity: 0;
    transform: translateY(5px);
}
.lang-select.open .lang-menu li a {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease,
                transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                background var(--transition-base),
                color var(--transition-base);
}
.lang-select.open .lang-menu li:nth-child(1) a { transition-delay: 0.05s; }
.lang-select.open .lang-menu li:nth-child(2) a { transition-delay: 0.09s; }
.lang-select.open .lang-menu li:nth-child(3) a { transition-delay: 0.13s; }
.lang-select.open .lang-menu li:nth-child(4) a { transition-delay: 0.17s; }

/* Tablet / mobile — compact trigger (code only), larger tap rows */
@media (max-width: 768px) {
    .nav-lang.lang-select {
        margin-left: 0.4rem;
        margin-right: 0.35rem;
    }
    .lang-trigger { gap: 0.4rem; padding: 0.5rem 0.2rem; }
    .lang-trigger-label { display: none; }
    .lang-trigger-code { display: inline-block; }
    .lang-menu {
        top: calc(100% + 0.6rem);
        min-width: 12.5rem;
        padding: 0.35rem;
    }
    .lang-menu a {
        min-height: 50px;
        padding: 0.7rem 0.9rem;
        font-size: 0.98rem;
    }
}
@media (max-width: 360px) {
    .lang-trigger .lang-globe { width: 17px; height: 17px; }
    .lang-menu { min-width: 11.5rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .lang-globe,
    .lang-caret,
    .lang-trigger-text::after,
    .lang-menu,
    .lang-menu li a,
    .lang-name {
        transition: none !important;
    }
    .lang-select.open .lang-menu { transform: none; }
    .lang-select.open .lang-menu li a { transform: none; opacity: 1; }
    .lang-trigger:hover .lang-globe { transform: none; }

    /* Site-wide vestibular safety: neutralise continuous/looping motion
       (hero Ken-Burns zoom, the auto-scrolling reviews marquee, the scroll
       cue, AOS reveals) without hiding any content. Animations run once to
       their end state instantly and transitions become effectively immediate. */
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Booking widget real CTA */
.booking-subtitle {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    text-align: center;
}
.btn-booking-main {
    font-size: 1.05rem;
    padding: 1rem 2rem;
}
.booking-note {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 0.75rem;
}
.booking-note i { margin-right: 4px; color: var(--color-primary); }

/* Beach note */
.beach-note {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.75rem;
    font-style: italic;
}

/* Directions section */
.directions-grid {
    margin-top: 3rem;
}
.directions-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 1.5rem;
    text-align: center;
}
.directions-title i { margin-right: 8px; color: var(--color-primary-light); }
.directions-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}
.direction-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    color: rgba(255,255,255,0.9);
}
.direction-icon {
    font-size: 1.5rem;
    color: var(--color-primary-light);
    margin-bottom: 0.5rem;
}
.direction-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: white;
}
.direction-card p {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.75);
}
.direction-card small {
    font-size: 0.75rem;
    color: var(--color-gold-light);
}

/* Privacy form field */
.form-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.privacy-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-light);
    cursor: pointer;
}
.privacy-label input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}
.privacy-label a {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ---- Real Photos ---- */

/* Hero real photos */
.hero-slide {
    background-size: cover;
    background-position: center;
}

/* Room gallery */
.room-gallery {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: #e0e0e0;
}
.room-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.6s ease;
}
.room-photo.active { opacity: 1; }
.room-gallery:hover .room-photo.active {
    transform: scale(1.06);
}

/* Room hover overlay */
.room-hover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
    padding: 1.8rem 1rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.room-gallery:hover .room-hover-overlay {
    transform: translateY(0);
}
.room-hover-overlay span {
    color: rgba(255,255,255,0.92);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.room-hover-overlay i {
    color: var(--color-gold-light);
    font-size: 0.78rem;
}
.rho-sep {
    color: var(--color-gold) !important;
    font-size: 1rem !important;
    margin: 0 2px;
}

/* Touch devices have no hover: reveal the room stats permanently so
   mobile visitors still see m² / view details. Slightly lighter gradient
   since it is always on screen. */
@media (hover: none) {
    .room-hover-overlay {
        transform: translateY(0);
        background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.32) 60%, transparent 100%);
        padding: 1.4rem 1rem 0.8rem;
    }
}

.gallery-prev, .gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 2;
    transition: background 0.2s;
}
.gallery-prev:hover, .gallery-next:hover { background: rgba(0,0,0,0.7); }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }

.gallery-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
}
.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.2s;
}
.dot.active { background: white; }

/* About real photo */
.about-photo {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    max-height: 280px;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-lg);
}

/* Ischia photo strip */
.photo-strip {
    display: flex;
    gap: 0;
    overflow: hidden;
    height: 220px;
}
.photo-strip img {
    flex: 1;
    object-fit: cover;
    width: 0;
    transition: flex 0.4s ease;
    cursor: pointer;
}
.photo-strip img:hover { flex: 2.5; }

@media (max-width: 768px) {
    .photo-strip { height: 140px; }
    .gallery-prev, .gallery-next { font-size: 1rem; padding: 3px 8px; }
}

/* ---- Reviews Section ---- */
.reviews {
    padding: var(--space-4xl) 0 var(--space-2xl);
    background: var(--color-bg-alt);
    overflow: hidden;
}

/* Platform score cards */
.review-scores {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 160px;
}
.score-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.platform-logo { height: 28px; object-fit: contain; max-width: 120px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)); }
.score-num { font-size: 2.2rem; font-weight: 700; color: var(--color-primary-dark); line-height: 1; }
.score-label { font-size: 0.78rem; color: var(--color-text-muted); text-align: center; }
.score-stars { color: #f5a623; font-size: 1rem; letter-spacing: 1px; }

/* Scrolling track */
.reviews-track-wrap {
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.reviews-track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
}
.track-left  { animation: scrollLeft  40s linear infinite; }
.track-right { animation: scrollRight 40s linear infinite; }
.reviews-track:hover { animation-play-state: paused; }

@keyframes scrollLeft  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Review card */
.review-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    width: 320px;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.review-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.reviewer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.review-header > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.review-header strong { font-size: 0.9rem; line-height: 1.2; }
.reviewer-origin { font-size: 0.75rem; color: var(--color-text-muted); }
.review-platform {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    margin-left: auto;
}
.booking-badge     { background: #003580; color: white; }
.tripadvisor-badge { background: #34E0A1; color: #1a1a1a; }
.airbnb-badge     { background: #FF385C; color: white; }
.google-badge      { background: #4285F4; color: white; }

.review-stars { color: #f5a623; font-size: 0.9rem; }
.review-stars span { color: var(--color-text-muted); font-size: 0.8rem; margin-left: 4px; }
.review-card p { font-size: 0.85rem; line-height: 1.55; color: var(--color-text); flex: 1; font-style: italic; }
.review-date { font-size: 0.72rem; color: var(--color-text-muted); margin-top: auto; }

@media (max-width: 768px) {
    .review-scores { gap: 1rem; }
    .score-card { min-width: 130px; padding: 1rem 1.25rem; }
    .score-num { font-size: 1.8rem; }
    .review-card { width: 270px; }
}

/* =====================================================
   Hero Trust Bar
   ===================================================== */
.hero-trust {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 1.75rem;
}
.trust-pill {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    text-decoration: none;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.2s;
}
.trust-pill:hover { background: rgba(255,255,255,0.22); }
.trust-score { font-size: 1rem; font-weight: 700; }
.trust-stars { color: #FFD700; font-size: 0.7rem; letter-spacing: 1px; }
.trust-sep { color: rgba(255,255,255,0.4); font-size: 1.1rem; }

/* =====================================================
   Direct Booking Perks (below booking form)
   ===================================================== */
.direct-booking-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
    justify-content: center;
}
.direct-booking-perks span {
    font-size: 0.78rem;
    color: var(--color-primary-dark);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.direct-booking-perks span i { color: var(--color-accent); }

/* =====================================================
   Why Book Direct Section
   ===================================================== */
.why-direct {
    background: var(--color-bg-alt);
    padding: 3rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.why-direct-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.why-item {
    text-align: center;
    padding: 1.5rem 1rem;
}
.why-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.4rem;
    color: white;
    box-shadow: 0 4px 16px rgba(72,177,217,0.3);
}
.why-item h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}
.why-item p {
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.55;
}
@media (max-width: 900px) {
    .why-direct-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .why-direct-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .why-item { padding: 1rem 0.5rem; }
}

/* =====================================================
   Host Card (inside About section)
   ===================================================== */
.host-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: 1.75rem;
    background: rgba(120,177,207,0.08);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}
.host-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
}
.host-info { flex: 1; }
.host-name { display: block; font-size: 1rem; font-weight: 700; color: var(--color-text); }
.host-role { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.host-bio { font-size: 0.83rem; color: var(--color-text-light); line-height: 1.55; margin-bottom: 0.75rem; }
.host-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #25D366;
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    transition: background 0.2s;
}
.host-whatsapp:hover { background: #1ebe5d; }
@media (max-width: 540px) {
    .host-card { flex-direction: column; gap: 0.75rem; }
}

/* =====================================================
   WhatsApp Floating Button
   ===================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(37,211,102,0.45);
    z-index: 900;
    transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 32px rgba(37,211,102,0.6);
    color: white;
}
.whatsapp-tooltip {
    position: absolute;
    right: 70px;
    background: rgba(0,0,0,0.75);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.whatsapp-float:hover .whatsapp-tooltip { opacity: 1; }
@media (max-width: 540px) {
    .whatsapp-float { bottom: 20px; right: 16px; width: 52px; height: 52px; font-size: 1.5rem; }
}

/* =====================================================
   Sticky Book Bar
   ===================================================== */
.sticky-book-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: #fff;
    box-shadow: 0 -4px 28px rgba(0,0,0,0.13);
    transform: translateY(110%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.38s;
    padding: 14px 24px;
    /* Hidden off-screen; visibility:hidden stops iOS Safari counting the
       translated-down bar as scrollable area (blank below the footer). */
    visibility: hidden;
}
.sticky-book-bar.visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
.sticky-book-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sticky-book-info {
    display: flex;
    align-items: center;
    gap: 14px;
}
.sticky-book-name {
    font-weight: 700;
    color: var(--color-text);
    font-size: 1rem;
}
.sticky-book-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 0.875rem;
}
.sticky-book-rating .stars {
    color: #f59e0b;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.sticky-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: #fff;
    padding: 13px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
    cursor: pointer;
    border: none;
}
.sticky-book-btn:hover {
    background: var(--color-primary-dark);
    transform: scale(1.04);
    color: #fff;
}
@media (max-width: 600px) {
    .sticky-book-info { display: none; }
    .sticky-book-btn { width: 100%; justify-content: center; }
    .sticky-book-bar { padding: 12px 16px; }
}

/* Lift fixed-bottom elements above sticky book bar */
body.sticky-bar-active .whatsapp-float {
    bottom: calc(28px + 72px);
    transition: bottom 0.38s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s;
}
body.sticky-bar-active .back-to-top {
    bottom: calc(28px + 60px + 12px + 72px);
    transition: bottom 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}
@media (max-width: 540px) {
    body.sticky-bar-active .whatsapp-float { bottom: calc(20px + 68px); }
}

/* =====================================================
   About Section – Stacked Photo Reveal
   ===================================================== */
.about-photos-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.about-photo-wrap {
    border-radius: var(--radius-lg);
    overflow: hidden;
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    display: block;
    box-shadow: var(--shadow-md);
}
.about-photo-wrap.visible {
    opacity: 1;
    transform: translateX(0);
}
.about-photo-wrap img {
    width: 100%;
    height: 165px;
    object-fit: cover;
    display: block;
}

/* =====================================================
   Photo Masonry Gallery
   ===================================================== */
.photo-masonry-section {
    padding: var(--space-4xl) 0 0;
    background: var(--color-white);
}
.photo-masonry-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}
.photo-masonry-grid {
    columns: 3;
    column-gap: 5px;
    padding: 0 5px;
    line-height: 0;
}
.masonry-item {
    break-inside: avoid;
    margin-bottom: 5px;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    line-height: 0;
}
.masonry-item picture,
.masonry-item img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s ease;
    line-height: 0;
}
.masonry-item:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}
@media (max-width: 768px) {
    .photo-masonry-grid { columns: 2; }
}
@media (max-width: 480px) {
    .photo-masonry-grid { columns: 2; column-gap: 3px; padding: 0 3px; }
    .masonry-item { margin-bottom: 3px; }
}

/* =====================================================
   Hero responsive (mobile: re-centre)
   ===================================================== */
@media (max-width: 768px) {
    .hero {
        justify-content: center;
        padding: var(--space-4xl) var(--space-lg);
    }
    .hero-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.35) 50%,
            rgba(0, 0, 0, 0.55) 100%
        );
    }
    .hero-content {
        text-align: center;
        max-width: 100%;
    }
    .hero-title {
        font-size: clamp(2.2rem, 10vw, 3.2rem);
    }
    .hero-subtitle {
        max-width: 100%;
        font-size: 1rem;
    }
    .hero-cta { justify-content: center; }
    .hero-trust { justify-content: center; }
    .hero-eyebrow { justify-content: center; }
}

/* ===== FAQ (SEO/GEO) ===== */
.faq {
    padding: var(--space-4xl) 0;
    background: var(--color-bg-alt);
}
.faq .section-tag,
.faq .section-title {
    text-align: center;
    display: block;
}
.faq .section-title {
    margin: 0 auto var(--space-xl);
}
.faq-list {
    max-width: 820px;
    margin: 0 auto;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-sm);
    overflow: hidden;
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1.15rem 1.4rem;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    color: var(--color-primary);
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--color-primary); }
.faq-item p {
    margin: 0;
    padding: 0 1.4rem 1.3rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

/* =====================================================
   AI Concierge — Floating Button + Premium Section
   Added to introduce the property's AI travel assistant.
   Everything is token-driven so it reads as native to the
   La Piazzetta design system (colours, radii, shadows,
   Playfair/Montserrat, the .btn family, the [data-aos] reveal).
   ===================================================== */

/* ---- Shared bespoke sparkle mark (used by button + CTA) ----
   Sized in em so it always tracks the adjacent text; specific placements
   (float button, tooltip, orb) override below. Without an explicit size an
   inline SVG with only a viewBox would fall back to the 300x150 default. */
.ai-spark-mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.14em;
    line-height: 0;
    flex-shrink: 0;
}
.ai-concierge-float-tooltip svg { width: 13px; height: 13px; flex-shrink: 0; }

/* -----------------------------------------------------
   Premium Homepage Section
   ----------------------------------------------------- */
.ai-concierge {
    position: relative;
    padding: var(--space-4xl) 0;
    /* Bridges the light About section into the dark Location section. Starts on
       --color-bg (where .about ends) so there is no seam at the boundary. */
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
    overflow: hidden;
}
/* Soft Mediterranean glow behind the card — atmosphere, not a hard shape. */
.ai-concierge::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -8%;
    width: 46vw;
    max-width: 620px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(72, 177, 217, 0.14), transparent 62%);
    pointer-events: none;
    z-index: 0;
}
.ai-concierge::after {
    content: "";
    position: absolute;
    bottom: -14%;
    left: -6%;
    width: 40vw;
    max-width: 520px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(212, 168, 85, 0.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.ai-concierge .container { position: relative; z-index: 1; }

/* The luxury card */
.ai-concierge-card {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: var(--space-3xl);
    /* A real frosted-glass surface: fill translucent enough that the blur is
       actually visible (it was near-masked at 0.9), radius trimmed for cost. */
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-xl);
    padding: clamp(1.75rem, 4vw, var(--space-3xl));
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
/* The site's own ornament motif (see .lang-menu): a quiet gold fade along
   the top edge only — not a full gradient ring. */
.ai-concierge-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold-light), transparent);
    pointer-events: none;
}

/* ---- Left: postcards from Alessandra's island ----
   Three real photographs (the Sorgeto thermal cove, the Castello Aragonese at
   dusk, the Maronti coast) fanned like postcards on a desk — the About
   section's stacked-photo tradition — with a concierge calling-card in the
   site's host-card DNA resting on top. They reveal in sequence off the card's
   own .aos-animate entrance; no new JS, and the stack's aspect-ratio reserves
   its space so nothing shifts. */
.ai-concierge-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}
.ai-postcards {
    position: relative;
    width: min(440px, 100%);
    aspect-ratio: 1;
}
.ai-postcard {
    position: absolute;
    width: 72%;
    margin: 0;
    padding: 6px;                    /* the postcard's white frame */
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition: opacity 0.55s ease, transform 0.55s ease, box-shadow var(--transition-base);
}
.ai-postcard img {
    display: block;
    width: 100%;
    height: 175px;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 4px);
}
.ai-postcard figcaption {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--color-text-light);
    text-align: right;
    padding: 5px 6px 1px;
}
.ai-postcard:hover { box-shadow: var(--shadow-lg); }
/* A picked-up postcard lifts and straightens slightly. */
.aos-animate .ai-postcard--1:hover { transform: rotate(-3.5deg) translateY(-4px); }
.aos-animate .ai-postcard--2:hover { transform: rotate(2deg)    translateY(-4px); }
.aos-animate .ai-postcard--3:hover { transform: rotate(-0.5deg) translateY(-4px); }
.ai-postcard--1 { top: 0;    left: 2%;  transform: rotate(-5deg)  translateY(14px); }
.ai-postcard--2 { top: 20%;  right: -2%; transform: rotate(3.5deg) translateY(14px); }
.ai-postcard--3 { top: 44%;  left: 4%;  transform: rotate(-2deg)  translateY(14px); }
.aos-animate .ai-postcard--1 { opacity: 1; transform: rotate(-5deg);  transition-delay: 0.15s; }
.aos-animate .ai-postcard--2 { opacity: 1; transform: rotate(3.5deg); transition-delay: 0.4s; }
.aos-animate .ai-postcard--3 { opacity: 1; transform: rotate(-2deg);  transition-delay: 0.65s; }

/* The concierge calling-card — host-card DNA on the .glass surface. */
.ai-host-card {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(16px);
    width: min(320px, 98%);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.aos-animate .ai-host-card {
    opacity: 1;
    transform: translateX(-50%);
    transition-delay: 0.9s;
}
.ai-host-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: var(--color-white);
    /* Monogram in the site's body sans (Montserrat), matching .host-avatar in the
       About section — no font-family override. */
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-host-avatar .ai-spark-mark {
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 15px;
    height: 15px;
    color: var(--color-gold);
    filter: drop-shadow(0 1px 3px rgba(212, 168, 85, 0.6));
}
.ai-host-meta { min-width: 0; }
.ai-host-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
}
.ai-host-role {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 2px;
}
/* Reduced motion: the site-wide block freezes durations; zero the stagger too
   so the composed stack appears at once. */
@media (prefers-reduced-motion: reduce) {
    .ai-concierge-card, .ai-concierge-card * {
        animation-delay: 0s !important;
        transition-delay: 0s !important;
    }
}

@keyframes aiTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg);   opacity: 0.92; }
    50%      { transform: scale(1.08) rotate(8deg); opacity: 1; }
}

/* ---- Right: the copy ---- */
.ai-concierge-body { min-width: 0; }
.ai-concierge-body .section-tag {
    margin-bottom: var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ai-concierge-title {
    /* Serif display voice — same tokens as .section-title (Playfair 700, lh 1.2).
       Clamp slightly reduced from the section-title so a long title does not
       crowd the card's right column. On the glass surface --color-primary-deep
       clears AA (~6.6:1) where --color-primary-dark sat at the threshold. */
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4.2vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary-deep);
    margin-bottom: var(--space-md);
}
.ai-concierge-lead {
    /* Body prose token — 1.05rem, line-height 1.6 (site default) — matching
       .about-text so the two prose blocks read as one voice. */
    font-size: 1.05rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    max-width: 46ch;
}

/* Feature list */
.ai-concierge-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
    margin-bottom: var(--space-xl);
}
.ai-concierge-features li {
    /* .room-features li token: 0.85rem, text-light. */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--color-text-light);
}
.ai-concierge-features i {
    /* The site's own list language (.room-features): a bare accent glyph,
       no circle. Glyph sized at ~1em relative to its list-item text. */
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: var(--color-accent);
    font-size: 0.9rem;
}

/* One quiet meta-line instead of a badge cloud. */
.ai-concierge-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
}
.ai-concierge-meta .ai-spark-mark { color: var(--color-gold); flex-shrink: 0; }

/* CTA */
.ai-concierge-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}
.ai-cta {
    /* Site-canonical .btn size (0.95rem / weight 600). The generous padding
       differentiates it as a hero-scale CTA without changing the type token. */
    font-size: 0.95rem;
    padding: 1rem 2rem;
}
.ai-cta .ai-spark-mark { margin-right: 0.15rem; }
.ai-cta:hover .ai-spark-mark { animation: aiTwinkle 1.2s ease-in-out infinite; }
/* Bespoke, on-brand focus ring (mirrors the float) rather than the UA default. */
.ai-cta:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 3px;
}
.ai-concierge-note {
    font-size: 0.8rem;
    /* --color-text-light (≈5.7:1) rather than --color-text-muted (≈2.85:1). */
    color: var(--color-text-light);
    font-weight: 500;
}

/* Section responsive */
@media (max-width: 900px) {
    .ai-concierge-card {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        text-align: center;
    }
    .ai-concierge-visual { min-height: 0; order: -1; }
    .ai-postcards { width: min(330px, 94%); }
    .ai-postcard img { height: 134px; }
    .ai-concierge-lead { margin-left: auto; margin-right: auto; }
    .ai-concierge-features {
        grid-template-columns: 1fr;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .ai-concierge-meta { justify-content: center; }
    .ai-concierge-actions { align-items: center; }
}
@media (max-width: 520px) {
    .ai-concierge-features { gap: 0.6rem; }
    .ai-cta { width: 100%; }
}

/* -----------------------------------------------------
   Floating AI Concierge Button (sits above WhatsApp)
   ----------------------------------------------------- */
.ai-concierge-float {
    position: fixed;
    /* Directly above .whatsapp-float (28px edge + its 60px + a 16px gap). */
    bottom: calc(28px + 60px + 16px);
    right: 28px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-decoration: none;
    /* Token-driven so it tracks the brand palette — same convention as .btn-primary. */
    background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 55%, var(--color-primary) 100%);
    box-shadow:
        0 6px 24px rgba(46, 139, 192, 0.5),
        inset 0 2px 6px rgba(255, 255, 255, 0.35);
    z-index: 900;
    transition: transform 0.25s var(--transition-bounce), box-shadow 0.25s ease;
}
/* Breathing glow ring — the tasteful attention cue. Driven by transform + opacity
   (compositor-only) rather than an animated box-shadow, so an always-visible fixed
   element does not force a repaint every frame. The ring itself is a STATIC shadow. */
.ai-concierge-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(72, 177, 217, 0.5);
    animation: aiFloatPulse 3.2s ease-out infinite;
    pointer-events: none;
    will-change: transform, opacity;
}
.ai-concierge-float .ai-spark-mark {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 2px 5px rgba(15, 63, 90, 0.45));
    transition: transform 0.4s ease;
}
.ai-concierge-float:hover {
    transform: scale(1.1);
    box-shadow:
        0 10px 30px rgba(46, 139, 192, 0.65),
        inset 0 2px 6px rgba(255, 255, 255, 0.4);
    color: var(--color-white);
}
.ai-concierge-float:hover .ai-spark-mark { transform: rotate(18deg) scale(1.08); }
.ai-concierge-float:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 3px;
}
@keyframes aiFloatPulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Tooltip — same dark, understated treatment as the sibling .whatsapp-tooltip it
   stacks above, so the two read as one system rather than two. */
.ai-concierge-float-tooltip {
    /* Type tokens mirror .whatsapp-tooltip (0.75rem / weight 500) so the
       stacked tooltips read as one system. */
    position: absolute;
    right: 72px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(0, 0, 0, 0.78);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.ai-concierge-float-tooltip::after {   /* little pointer */
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid rgba(0, 0, 0, 0.78);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.ai-concierge-float:hover .ai-concierge-float-tooltip,
.ai-concierge-float:focus-visible .ai-concierge-float-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* On touch devices there is no hover, so reveal the label once, briefly,
   a few seconds after load — then let it rest. Pure CSS, runs once. */
@media (hover: none) and (pointer: coarse) {
    .ai-concierge-float-tooltip {
        animation: aiTooltipHint 7s ease-in-out 1.5s 1 both;
    }
}
@keyframes aiTooltipHint {
    0%, 8%    { opacity: 0; transform: translateX(6px); }
    16%, 60%  { opacity: 1; transform: translateX(0); }
    100%      { opacity: 0; transform: translateX(6px); }
}

/* -----------------------------------------------------
   Re-stack the fixed bottom-right column so nothing overlaps.
   Column, bottom → top: WhatsApp · AI Concierge · Back-to-top.
   These override the earlier .back-to-top rules (later in file wins;
   sticky-bar-active rules match specificity deliberately).
   ----------------------------------------------------- */
.back-to-top {
    /* 28 edge + WhatsApp(60) + 16 gap + AI(60) + 16 gap */
    bottom: calc(28px + 60px + 16px + 60px + 16px);
}
body.sticky-bar-active .ai-concierge-float {
    bottom: calc(28px + 60px + 16px + 72px);
    transition: bottom 0.38s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s var(--transition-bounce), box-shadow 0.25s ease;
}
body.sticky-bar-active .back-to-top {
    bottom: calc(28px + 60px + 16px + 60px + 16px + 72px);
}

/* Mobile: mirror WhatsApp's smaller footprint (52px, 16px edge, 20px bottom). */
@media (max-width: 540px) {
    .ai-concierge-float {
        bottom: calc(20px + 52px + 14px);
        right: 16px;
        width: 52px;
        height: 52px;
    }
    .ai-concierge-float .ai-spark-mark { width: 26px; height: 26px; }
    .back-to-top { bottom: calc(20px + 52px + 14px + 52px + 14px); }
    body.sticky-bar-active .ai-concierge-float { bottom: calc(20px + 52px + 14px + 68px); }
    body.sticky-bar-active .back-to-top { bottom: calc(20px + 52px + 14px + 52px + 14px + 68px); }
}

/* =====================================================
   The Concierge Room — the AI Concierge opens in place
   =====================================================
   The concierge is not a page we navigate to and not a third-party frame. The
   backend serves an *embeddable script* at /static/widget.js (its own `/` is a
   dev harness that sends X-Frame-Options: DENY, so an iframe is both blocked and
   wrong). So the widget is loaded lazily on first open and its panel is hosted
   inside this room: our glass, our radius, our shadow, our motion, our type.

   Motion is the site's own overlay language, lifted from .lang-menu: expo-out
   cubic-bezier(0.16, 1, 0.3, 1), 0.26s out / 0.3s in, with `visibility` delayed
   on close so nothing flashes. State is opacity/visibility rather than [hidden]
   for the same reason the language menu does it — you cannot transition to
   display:none. Being position:fixed, the room is out of flow, so it can sit in
   the document from the start and still cost zero layout. */
.ai-room {
    position: fixed;
    inset: 0;
    /* Clip the closed bottom-sheet panel (translateY(100%), ~92dvh below the
       viewport). Without this, iOS Safari counts that off-screen fixed panel as
       scrollable area and you scroll into a large blank below the footer. */
    overflow: hidden;
    z-index: var(--z-concierge);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 3vw, var(--space-xl));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.26s;
}
.ai-room.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s;
}

/* The veil. Tinted with the brand's deep blue rather than neutral black, and
   blurred, so the page behind reads as the same glass system as .lang-menu and
   .ai-concierge-card rather than as a generic modal scrim. */
.ai-room-veil {
    position: absolute;
    inset: 0;
    background: rgba(15, 58, 82, 0.44);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    backdrop-filter: blur(6px) saturate(1.1);
}

.ai-room-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(600px, 100%);
    height: min(700px, 100%);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(120, 177, 207, 0.06);
    overflow: hidden;
    transform: translateY(14px) scale(0.97);
    transform-origin: center;
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-room.open .ai-room-panel {
    transform: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The site's gold-fade hairline, same ornament as .lang-menu and
   .ai-concierge-card, drawn above the widget's own header. */
.ai-room-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold-light), transparent);
    opacity: 0.8;
    z-index: 2;
    pointer-events: none;
}

/* Our own close control, so a close affordance exists before the widget has
   loaded and during an error. The widget's own .pz-close is hidden but still
   clicked programmatically, because closePanel() is what stops playback and
   releases the microphone. */
.ai-room-x {
    position: absolute;
    top: 0.65rem;
    right: 0.7rem;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.ai-room-x svg { width: 15px; height: 15px; }
.ai-room-x:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }
.ai-room-x:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* Where the widget's panel is relocated to. */
.ai-room-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Loading and failure states, both in the site's own quiet voice. */
.ai-room-status {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-light);
}
.ai-room-status[hidden] { display: none; }
.ai-room-dots { display: inline-flex; gap: 5px; }
.ai-room-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold);
    animation: aiRoomDot 1.25s ease-in-out infinite;
}
.ai-room-dots i:nth-child(2) { animation-delay: 0.16s; }
.ai-room-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes aiRoomDot {
    0%, 100% { opacity: 0.28; transform: translateY(0); }
    50%      { opacity: 1;    transform: translateY(-3px); }
}
.ai-room-status--error p { max-width: 26ch; }

/* ---- Hosting the widget -----------------------------------------------
   The widget ships its own tokens on .pz-root, so re-pointing them at the
   brand's is enough for the body of it. Only geometry has to be undone: it is
   built to float bottom-right at z-index 2147483000, and in here it is simply
   the contents of a panel. --pz-surface is deliberately left solid — it backs
   the bubbles, the composer and the buttons, and a translucent transcript over
   a dark blurred veil would fail contrast. The glass reads at the frame, the
   header and the hairline, which is where it belongs. */
.ai-room-stage .pz-root {
    --pz-primary: var(--color-primary);
    --pz-primary-dark: var(--color-accent-dark);
    --pz-gold: var(--color-gold);
    --pz-text: var(--color-text);
    --pz-muted: var(--color-text-light);
    --pz-surface: var(--color-white);
    --pz-bg: var(--color-bg);
    --pz-radius: var(--radius-md);
    --pz-shadow: var(--shadow-md);

    position: static;
    inset: auto;
    z-index: auto;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    /* Montserrat, so the concierge is typeset like the rest of the site instead
       of in the system stack that marks every embedded widget. */
    font-family: var(--font-primary);
    font-size: 0.95rem;
    line-height: 1.6;
}
/* The widget's own launcher and close button: kept in the DOM because their
   click handlers are the widget's public surface, never shown because the room
   provides both affordances itself. */
.ai-room-stage .pz-launcher,
.ai-room-stage .pz-close {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.ai-room-stage .pz-panel {
    position: static;
    flex: 1;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
/* The header carries the brand's own button gradient, and the title is set in
   Playfair — the single strongest cue that this is the property speaking. */
.ai-room-stage .pz-header {
    padding: 1rem 3.2rem 1rem 1.25rem;
    background: linear-gradient(135deg,
        var(--color-accent-dark) 0%, var(--color-accent) 55%, var(--color-primary) 100%);
}
.ai-room-stage .pz-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}
.ai-room-stage .pz-subtitle {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    opacity: 0.9;
}
.ai-room-stage .pz-log { background: var(--color-bg); }
/* The widget's status line is toggled with the `hidden` attribute, but its own
   `display: flex` outranks it — .pz-panel, .pz-mic and .pz-play all ship a
   `[hidden]` guard and this one does not. The result is a 15px band and a stray
   dot sitting above the composer whenever the concierge is idle, which is
   exactly the kind of seam that makes an embedded tool look embedded. Corrected
   here rather than in widget.css because the backend is not ours to change. */
.ai-room-stage .pz-status[hidden] { display: none; }

/* The sheet grip. Declared before the breakpoints, because a later rule of equal
   specificity would beat the `display: block` the mobile query sets. */
.ai-room-grip {
    display: none;
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.5);
    z-index: 3;
    pointer-events: none;
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
    .ai-room-panel { width: min(520px, 100%); height: min(90vh, 100%); }
}

/* ---- Mobile: a bottom sheet that rises from the edge ----
   Full-width, pinned to the bottom, rounded on the top corners only, with a
   grip so it reads as a sheet rather than a page. dvh so the rise is not cut
   off by the browser's collapsing toolbar. */
@media (max-width: 640px) {
    .ai-room {
        padding: 0;
        align-items: flex-end;
    }
    .ai-room-panel {
        width: 100%;
        height: 92vh;
        height: 92dvh;
        max-height: none;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: 0;
        transform: translateY(100%);
    }
    .ai-room.open .ai-room-panel { transform: none; }
    .ai-room-grip { display: block; }
    .ai-room-stage .pz-header { padding-top: 1.35rem; }
    .ai-room-x { top: 0.9rem; }
}

/* While the room is open the fixed furniture would float over it. */
body.ai-room-open .whatsapp-float,
body.ai-room-open .ai-concierge-float,
body.ai-room-open .back-to-top,
body.ai-room-open .sticky-book-bar { opacity: 0; pointer-events: none; }

/* Reduced motion: the site-wide block already flattens durations, but the
   delayed `visibility` would still hold the room on screen after it closed, so
   the delay is zeroed here explicitly. */
@media (prefers-reduced-motion: reduce) {
    .ai-room,
    .ai-room.open,
    .ai-room-panel,
    .ai-room.open .ai-room-panel {
        transition: none !important;
    }
    .ai-room-panel, .ai-room.open .ai-room-panel { transform: none !important; }
    .ai-room-dots i { animation: none !important; }
}

/* No JS: the CTA and the float keep their href, so they open the concierge in a
   new tab exactly as before. The room itself must never be reachable. */
html.no-js .ai-room { display: none !important; }


/* --- Mobile hero: serve 800px webp to phones (LCP), desktop keeps full-res --- */
@media (max-width: 768px) {
  .hero-slides .hero-slide:nth-of-type(2) { background-image: url('/images/poseidonia-2.jpg'); background-image: image-set(url('/images/poseidonia-2-800.webp') type('image/webp'), url('/images/poseidonia-2.jpg') type('image/jpeg')) !important; }
  .hero-slides .hero-slide:nth-of-type(3) { background-image: url('/images/hero.jpg'); background-image: image-set(url('/images/hero-800.webp') type('image/webp'), url('/images/hero.jpg') type('image/jpeg')) !important; }
  .hero-slides .hero-slide:nth-of-type(4) { background-image: url('/images/struttura-2.jpg'); background-image: image-set(url('/images/struttura-2-800.webp') type('image/webp'), url('/images/struttura-2.jpg') type('image/jpeg')) !important; }
}


/* === Legal pages: navbar uses solid colours (no dark hero behind it) === */
.legal-page .navbar { background: rgba(255,255,255,0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.legal-page .nav-logo-img { filter: none; }
.legal-page .logo-text { color: var(--color-primary-dark); }
.legal-page .logo-subtitle { color: var(--color-text-light); }
.legal-page .nav-link { color: var(--color-text); }
.legal-page .nav-link:hover { color: var(--color-accent); }
.legal-page .nav-toggle span { background: var(--color-text); }
.legal-page .navbar .btn-outline { color: var(--color-accent-dark); border-color: var(--color-accent); }
.legal-page .navbar .btn-outline:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* === Font Awesome (subset: only icons used on this site) === */
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:swap;src:url(/webfonts/fa-solid-900.subset.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:swap;src:url(/webfonts/fa-brands-400.subset.woff2) format("woff2")}
.fa,.fas,.fa-solid,.fab,.fa-brands{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}
.fa,.fas,.fa-solid{font-family:"Font Awesome 6 Free";font-weight:900}
.fab,.fa-brands{font-family:"Font Awesome 6 Brands";font-weight:400}
.fa-arrow-left:before{content:"\f060"}
.fa-bed:before{content:"\f236"}
.fa-bus:before{content:"\f207"}
.fa-calendar-check:before{content:"\f274"}
.fa-car:before{content:"\f1b9"}
.fa-chart-bar:before{content:"\f080"}
.fa-check-circle:before{content:"\f058"}
.fa-chess-rook:before{content:"\f447"}
.fa-chevron-up:before{content:"\f077"}
.fa-cloud-sun:before{content:"\f6c4"}
.fa-coffee:before{content:"\f0f4"}
.fa-concierge-bell:before{content:"\f562"}
.fa-cookie-bite:before{content:"\f564"}
.fa-crown:before{content:"\f521"}
.fa-directions:before{content:"\f5eb"}
.fa-door-open:before{content:"\f52b"}
.fa-envelope:before{content:"\f0e0"}
.fa-exclamation-circle:before{content:"\f06a"}
.fa-expand-arrows-alt:before{content:"\f31e"}
.fa-gift:before{content:"\f06b"}
.fa-info-circle:before{content:"\f05a"}
.fa-lightbulb:before{content:"\f0eb"}
.fa-map-marker-alt:before{content:"\f3c5"}
.fa-motorcycle:before{content:"\f21c"}
.fa-paper-plane:before{content:"\f1d8"}
.fa-phone:before{content:"\f095"}
.fa-phone-alt:before{content:"\f879"}
.fa-plane:before{content:"\f072"}
.fa-plane-arrival:before{content:"\f5af"}
.fa-plane-departure:before{content:"\f5b0"}
.fa-route:before{content:"\f4d7"}
.fa-search:before{content:"\f002"}
.fa-server:before{content:"\f233"}
.fa-shield-alt:before{content:"\f3ed"}
.fa-ship:before{content:"\f21a"}
.fa-snowflake:before{content:"\f2dc"}
.fa-store:before{content:"\f54e"}
.fa-sun:before{content:"\f185"}
.fa-tag:before{content:"\f02b"}
.fa-tags:before{content:"\f02c"}
.fa-train:before{content:"\f238"}
.fa-tv:before{content:"\f26c"}
.fa-umbrella-beach:before{content:"\f5ca"}
.fa-undo:before{content:"\f0e2"}
.fa-undo-alt:before{content:"\f2ea"}
.fa-user-friends:before{content:"\f500"}
.fa-utensils:before{content:"\f2e7"}
.fa-wifi:before{content:"\f1eb"}
.fa-wine-glass:before{content:"\f4e3"}
.fa-whatsapp:before{content:"\f232"}