/* ==========================================================================

   1. VARIABILI, FONTI E REGOLE BASE

   ========================================================================== */



:root {

    --bg-main: #FDFBF7;           /* Sfondo panna/crema caldo morbido */

    --text-dark: #1A1A1A;         /* Nero editoriale */

    --accent-terracotta: #C87941; /* Colore storico/terracotta */

    --muted-grey: #5A5A5A;        /* Grigio per testi descrittivi */

    --border-color: #EAE5DC;

    --font-serif: 'Cormorant Garamond', serif;

    --font-sans: 'Inter', sans-serif;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    background-color: var(--bg-main);

    color: var(--text-dark);

    font-family: var(--font-sans);

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 30px;

}



.text-center { 

    text-align: center; 

}



.title-serif {

    font-family: var(--font-serif);

    font-size: 3rem;

    font-weight: 400;

    line-height: 1.2;

    margin-bottom: 30px;

}



/* ==========================================================================

   2. Barra di Navigazione (Navbar) e Logo

   ========================================================================== */



.navbar {

    padding: 15px 0;

    border-bottom: 1px solid var(--border-color);

    background-color: var(--bg-main);

    position: sticky;

    top: 0;

    z-index: 100;

}



.nav-container {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 30px;

}



/* Contenitore per allineare lingue e bottone sulla destra */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 30px; /* Spazio tra il selettore lingua e il pulsante */

}



/* --- NUOVO STILE SELETTORE LINGUA MINIMAL --- */

.lang-switcher {

    font-family: var(--font-sans);

    font-size: 0.85rem;

    font-weight: 500;

    letter-spacing: 1px;

    display: flex;

    align-items: center;

    user-select: none;

}



.lang-link {

    color: var(--muted-grey);

    text-decoration: none;

    transition: color 0.3s ease;

    padding: 2px 4px;

}



.lang-link:hover {

    color: var(--accent-terracotta);

}



/* Evidenzia la lingua attualmente attiva (es. IT) */

.lang-link.active {

    color: var(--text-dark);

    font-weight: 600;

    pointer-events: none; /* Disattiva il clic sulla lingua già attiva */

}



.lang-divider {

    color: var(--border-color);

    margin: 0 6px;

    font-weight: 300;

}



.logo-wrapper {

    display: flex;

    align-items: center;

    color: var(--text-dark);

    cursor: default;

    user-select: none;

}



.logo-img {

    height: 40px;

    width: auto;

    object-fit: contain;

}



.logo-text {

    font-family: var(--font-sans);

    font-size: 1.1rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.logo-serif {

    font-family: var(--font-serif);

    font-size: 1.6rem;

    text-transform: none;

    font-style: italic;

    letter-spacing: 0;

    margin-left: 2px;

    color: var(--accent-terracotta);

}



/* ==========================================================================

   3. Bottoni e Elementi d'Azione

   ========================================================================== */



.btn {

    display: inline-block;

    padding: 14px 30px;

    font-size: 0.9rem;

    font-weight: 500;

    text-decoration: none;

    border-radius: 40px;

    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

    text-align: center;

    cursor: pointer;

    border: 1px solid transparent;

}



.btn-full {

    width: 100%;

}



.btn-inline {

    min-width: 280px;

}



.btn-outline {

    border-color: var(--text-dark);

    color: var(--text-dark);

    background-color: transparent;

}



.btn-outline:hover {

    background-color: var(--text-dark);

    color: var(--bg-main);

}



.btn-dark {

    background-color: var(--text-dark);

    color: var(--bg-main);

    border-color: var(--text-dark);

}



.btn-dark:hover {

    opacity: 0.9;

    transform: translateY(-1px);

}



.btn-whatsapp {

    background-color: #25D366;

    color: #FFFFFF;

}



.btn-whatsapp:hover {

    opacity: 0.95;

    transform: translateY(-1px);

}



.btn-terracotta {

    background-color: var(--accent-terracotta);

    color: #FFFFFF;

    border-color: var(--accent-terracotta);

    box-shadow: 0 4px 15px rgba(200, 121, 65, 0.2);

}



.btn-terracotta:hover {

    background-color: #b36633;

    border-color: #b36633;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(200, 121, 65, 0.3);

}



.compact-booking-container {

    max-width: 320px;

    margin: 30px auto;

    text-align: center;

}







/* ==========================================================================

   4. Sezione Copertina (Hero con Immagine di Sfondo)

   ========================================================================== */



.hero-full {

    position: relative;

    min-height: 85vh;

    background-image: url('panorama_torno.png');

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #FFFFFF;

    padding: 60px 20px;

    margin-bottom: 60px;

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(rgba(26, 26, 26, 0.5), rgba(26, 26, 26, 0.6));

    z-index: 1;

}



.hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    width: 100%;

}



.hero-content .subtitle {

    display: block;

    text-transform: uppercase;

    font-size: 0.85rem;

    letter-spacing: 4px;

    color: #DAC0A3;

    margin-bottom: 25px;

    font-weight: 600;

}



.hero-content h1 {

    font-family: var(--font-serif);

    font-size: 3.8rem;

    line-height: 1.15;

    font-weight: 400;

    margin-bottom: 25px;

    color: #FFFFFF;

}



.hero-content p {

    font-size: 1.25rem;

    color: #EAE5DC;

    margin-bottom: 40px;

    font-weight: 300;

}



.hero-content .btn-dark {

    background-color: #FFFFFF;

    color: var(--text-dark);

    border-color: #FFFFFF;

}



.hero-content .btn-dark:hover {

    background-color: transparent;

    color: #FFFFFF;

}







/* ==========================================================================

   5. Dati in Evidenza (Highlights) e Storia

   ========================================================================== */



.highlights {

    display: flex;

    justify-content: space-around;

    padding: 50px 0;

    border-top: 1px solid var(--border-color);

    border-bottom: 1px solid var(--border-color);

    margin-bottom: 80px;

    text-align: center;

}



.highlight-item .number {

    display: block;

    font-family: var(--font-serif);

    font-size: 3.5rem;

    color: var(--accent-terracotta);

    line-height: 1;

}



.highlight-item .label {

    font-size: 0.85rem;

    text-transform: uppercase;

    color: var(--text-dark);

    margin-top: 5px;

    font-weight: 500;

}



.experience-editorial {

    margin-bottom: 100px;

}



.editorial-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

}



.editorial-text p {

    font-size: 1.05rem;

    color: var(--muted-grey);

    margin-bottom: 20px;

    text-align: justify;

}



.editorial-text p strong {

    color: var(--text-dark);

}



.editorial-text .lead-text {

    font-size: 1.2rem;

    color: var(--text-dark);

    font-style: italic;

    font-family: var(--font-serif);

    line-height: 1.7;

}





/* ==========================================================================

   6. I Comfort della Struttura (Servizi)

   ========================================================================== */



.apartment-services {

    padding: 80px 0;

    border-top: 1px solid var(--border-color);

    margin-bottom: 40px;

}



.services-subtitle {

    color: var(--muted-grey);

    font-size: 1.1rem;

    margin-top: -20px;

    margin-bottom: 50px;

    font-weight: 300;

}



.services-luxury-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));

    gap: 40px;

}



.service-luxury-card {

    border: 1px solid var(--border-color);

    padding: 35px;

    border-radius: 16px;

    transition: all 0.3s ease;

}



.service-luxury-card:hover {

    background-color: #FFFFFF;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);

    border-color: transparent;

}



.service-luxury-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 15px;

}



.service-luxury-icon {

    font-size: 1.8rem;

}



.service-luxury-card h3 {

    font-family: var(--font-serif);

    font-size: 1.6rem;

    font-weight: 400;

    color: var(--text-dark);

}



.service-luxury-list {

    list-style: none;

}



.service-luxury-list li {

    font-size: 1rem;

    color: var(--muted-grey);

    margin-bottom: 12px;

    padding-left: 25px;

    position: relative;

}



.service-luxury-list li::before {

    content: "—";

    position: absolute;

    left: 0;

    color: var(--accent-terracotta);

    font-weight: bold;

}





/* ==========================================================================

   7. Galleria Fotografica dell'Appartamento

   ========================================================================== */



.apartment-gallery {

    padding: 60px 0 100px 0;

}



.gallery-subtitle {

    color: var(--muted-grey);

    font-size: 1.1rem;

    margin-top: -20px;

    margin-bottom: 45px;

    font-weight: 300;

}



.gallery-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-auto-rows: 260px;

    gap: 20px;

}



.gallery-box {

    position: relative;

    overflow: hidden;

    border-radius: 16px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);

    cursor: pointer;

}



.gallery-box.box-large {

    grid-row: span 2;

    grid-column: span 1;

}



.gallery-box.box-wide {

    grid-column: span 2;

}



.gallery-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

}



.gallery-box:hover img {

    transform: scale(1.06);

}



.box-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 40%;

    background: linear-gradient(to top, rgba(26, 26, 26, 0.7), transparent);

    display: flex;

    align-items: flex-end;

    padding: 25px;

    opacity: 0;

    transition: opacity 0.4s ease;

}



.box-overlay span {

    color: #FFFFFF;

    font-family: var(--font-serif);

    font-size: 1.4rem;

    transform: translateY(10px);

    transition: transform 0.4s ease;

}



.gallery-box:hover .box-overlay {

    opacity: 1;

}



.gallery-box:hover .box-overlay span {

    transform: translateY(0);

}







/* ==========================================================================

   7b. STORIA VISIVA (FOTO ASIMMETRICHE)

   ========================================================================== */

.visual-story { 

    margin-bottom: 100px; 

}



.story-grid { 

    display: flex; 

    gap: 40px; 

}



.story-card { 

    flex: 1; 

}



.story-card img { 

    width: 100%; 

    object-fit: cover; 

    border-radius: 16px; 

}



.story-card h3 { 

    font-family: var(--font-serif); 

    font-size: 1.8rem; 

    margin-top: 15px; 

}



.card-1 img { 

    height: 480px; 

}



.card-2 { 

    margin-top: 60px; /* Crea l'effetto sfalsato asimmetrico */

}



.card-2 img { 

    height: 400px; 

}





/* ==========================================================================

   7c. SEZIONE RIQUADRI DI RICHIAMO EMOTIVO (QUOTE CARDS)

   ========================================================================== */

.emotional-quotes-section {

    margin-bottom: 80px;

    padding: 20px 0;

}



/* Griglia su PC: 3 colonne affiancate perfettamente bilanciate */

.quotes-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}



.quote-card {

    /* Colore coordinato: un panna/terracotta molto chiaro e caldo che stacca dallo sfondo */

    background-color: #F5EFEB; 

    border: 1px solid #E6DCD5;

    padding: 40px 30px;

    border-radius: 20px; /* Angoli arrotondati morbidi in stile con il sito */

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}



/* Effetto di sospensione delicata quando ci si passa sopra col mouse */

.quote-card:hover {

    transform: translateY(-4px);

    background-color: #FFFFFF;

    border-color: var(--accent-terracotta);

    box-shadow: 0 15px 35px rgba(200, 121, 65, 0.06);

}



.quote-icon {

    font-size: 1.6rem;

    margin-bottom: 20px;

    opacity: 0.8;

}



.quote-text {

    font-family: var(--font-serif);

    font-size: 1.35rem;

    font-style: italic;

    line-height: 1.5;

    color: var(--text-dark);

}





/* ==========================================================================

   7d. CAROSELLO LIGHTBOX INTERNO (GALLERIA INTERATTIVA)

   ========================================================================== */

.lightbox {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(26, 26, 26, 0.95); /* Nero profondo coprente */

    backdrop-filter: blur(8px);

    display: none; /* Nascosto all'avvio */

    justify-content: center;

    align-items: center;

    z-index: 10000; /* Sopra a ogni elemento della pagina, anche alla barra */

}



.lightbox-content {

    max-width: 85%;

    max-height: 80vh;

    text-align: center;

    position: relative;

}



#lightbox-img {

    max-width: 100%;

    max-height: 75vh;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 10px 40px rgba(0,0,0,0.5);

    animation: lightboxFade 0.3s ease-in-out;

}



.lightbox-caption {

    color: #EAE5DC;

    font-family: var(--font-serif);

    font-size: 1.2rem;

    margin-top: 15px;

    font-style: italic;

}



/* Pulsanti di controllo */

.lightbox-close, .lightbox-prev, .lightbox-next {

    position: absolute;

    background: none;

    border: none;

    color: #FFFFFF;

    font-size: 2.5rem;

    cursor: pointer;

    opacity: 0.6;

    transition: opacity 0.2s, transform 0.2s;

    user-select: none;

    z-index: 10001;

}



.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {

    opacity: 1;

    color: var(--accent-terracotta);

}



.lightbox-close {

    top: 30px;

    right: 40px;

    font-size: 3.5rem;

}



.lightbox-prev {

    left: 40px;

    top: 50%;

    transform: translateY(-50%);

}



.lightbox-next {

    right: 40px;

    top: 50%;

    transform: translateY(-50%);

}



@keyframes lightboxFade {

    from { opacity: 0; transform: scale(0.98); }

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

}





/* ==========================================================================

   8. Elenco Dettagli Posizione (Logistica)

   ========================================================================== */



.location-details {

    margin-bottom: 100px;

}



.location-intro-text {

    font-size: 1.15rem;

    color: var(--muted-grey);

    max-width: 900px;

    margin-bottom: 40px;

}



.amenities-list {

    margin-top: 30px;

}



.amenity-row {

    display: flex;

    padding: 30px 0;

    border-bottom: 1px solid var(--border-color);

}



.amenity-title {

    flex: 0 0 280px;

    font-family: var(--font-serif);

    font-size: 1.6rem;

    color: var(--text-dark);

}



.amenity-desc {

    flex: 1;

    color: var(--muted-grey);

    font-size: 1.05rem;

}



/* Stile per i link speciali inseriti nei testi descrittivi */

.amenity-link {

    color: var(--text-dark);

    font-weight: 500;

    text-decoration: none;

    border-bottom: 1px dashed var(--accent-terracotta); /* Sottolineatura tratteggiata color terracotta */

    transition: all 0.3s ease;

}



.amenity-link:hover {

    color: var(--accent-terracotta);

    border-bottom-style: solid; /* Diventa una linea continua al passaggio del mouse */

    background-color: rgba(200, 121, 65, 0.05); /* Un leggerissimo alone luminoso di sfondo */

    padding: 0 4px;

    border-radius: 4px;

}





/* ==========================================================================

   8b. SEZIONE POSIZIONE STRATEGICA E PUNTI DI INTERESSE (POIS)

   ========================================================================== */

.strategic-location {

    padding: 80px 0;

    border-top: 1px solid var(--border-color);

    margin-bottom: 40px;

}



.location-subtitle {

    color: var(--muted-grey);

    font-size: 1.1rem;

    margin-top: -20px;

    margin-bottom: 50px;

    font-weight: 300;

}



/* Disposizione a 3 colonne affiancate su PC */

.pois-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

}



.poi-category-card {

    background-color: transparent;

    border: 1px solid var(--border-color);

    padding: 35px 25px;

    border-radius: 16px;

    transition: all 0.3s ease;

}



.poi-category-card:hover {

    background-color: #FFFFFF;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);

    border-color: transparent;

}



.poi-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 15px;

}



.poi-icon {

    font-size: 1.6rem;

}



.poi-category-card h3 {

    font-family: var(--font-serif);

    font-size: 1.5rem;

    font-weight: 400;

    color: var(--text-dark);

}



.poi-list {

    list-style: none;

}



.poi-list li {

    font-size: 0.95rem;

    color: var(--muted-grey);

    margin-bottom: 20px;

    line-height: 1.5;

}



/* Micro-etichetta elegante per indicare come raggiungere il luogo */

.badge-transport {

    display: block;

    margin-top: 5px;

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--accent-terracotta);

    font-weight: 600;

}







/* ==========================================================================

   9. SEZIONE PRENOTAZIONE, FINESTRA POP-UP E MAPPA STATICA (VERSIONE ORIGINALE)

   ========================================================================== */

.contact-block { 

    background-color: #F5F1E6; 

    padding: 60px; 

    border-radius: 24px; 

    margin-bottom: 80px; 

}



.contact-grid { 

    display: grid; 

    grid-template-columns: 1.1fr 0.9fr; 

    gap: 60px; 

}



.booking-widget-wrapper {

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.subtitle-form { 

    color: var(--muted-grey); 

    margin-bottom: 30px; 

}



.booking-action-box {

    background-color: var(--bg-main);

    padding: 35px;

    border-radius: 16px;

    border: 1px solid var(--border-color);

    box-shadow: 0 10px 25px rgba(0,0,0,0.02);

}



.booking-divider {

    text-align: center;

    margin: 20px 0;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #A0A0A0;

    position: relative;

}



.booking-divider::before,

.booking-divider::after {

    content: '';

    position: absolute;

    top: 50%;

    width: 35%;

    height: 1px;

    background-color: var(--border-color);

}



.booking-divider::before { left: 0; }

.booking-divider::after { right: 0; }



/* Form del modulo contatti classico */

.luxury-form .form-group { 

    margin-bottom: 20px; 

}



.luxury-form .form-row { 

    display: grid; 

    grid-template-columns: 1fr 1fr; 

    gap: 20px; 

}



.luxury-form label { 

    display: block; 

    font-size: 0.8rem; 

    text-transform: uppercase; 

    font-weight: 600; 

    margin-bottom: 8px; 

}



.luxury-form input, .luxury-form textarea { 

    width: 100%; 

    padding: 14px; 

    background-color: var(--bg-main); 

    border: 1px solid var(--border-color); 

    border-radius: 8px; 

    color: var(--text-dark); 

}



/* Configurazione originale della Mappa */

.map-wrapper { 

    display: flex; 

    flex-direction: column; 

}



.map-address { 

    color: var(--muted-grey); 

    margin-bottom: 20px; 

}



.map-container { 

    flex: 1; 

    min-height: 350px; 

    border-radius: 16px; 

    overflow: hidden; 

    border: 1px solid var(--border-color); 

}



/* Struttura Pop-up */

.popup-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(26, 26, 26, 0.6);

    backdrop-filter: blur(5px);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    padding: 20px;

}



.popup-content {

    background-color: var(--bg-main);

    padding: 40px;

    border-radius: 20px;

    max-width: 600px;

    width: 100%;

    position: relative;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);

    animation: popupFadeIn 0.3s ease-out;

}



.popup-form-scroll {

    max-height: 70vh;

    overflow-y: auto;

    padding-right: 10px;

    margin-top: 15px;

}



.popup-title {

    font-family: var(--font-serif);

    font-size: 1.8rem;

    color: var(--text-dark);

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 15px;

}



.popup-close-btn {

    position: absolute;

    top: 20px;

    right: 25px;

    background: none;

    border: none;

    font-size: 2.5rem;

    line-height: 1;

    color: var(--text-dark);

    cursor: pointer;

}



@keyframes popupFadeIn {

    from { opacity: 0; transform: translateY(20px); }

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

}



/* Integrazione Bed-and-Breakfast.it */

.popup-form-scroll form, .popup-form-scroll table { width: 100% !important; font-family: var(--font-sans) !important; }

.popup-form-scroll input, .popup-form-scroll textarea, .popup-form-scroll select { width: 100% !important; padding: 12px !important; margin-bottom: 15px !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; background-color: #FFFFFF !important; color: var(--text-dark) !important; box-sizing: border-box !important; }

.popup-form-scroll input[type="submit"] { background-color: var(--text-dark) !important; color: var(--bg-main) !important; border: none !important; padding: 14px 30px !important; font-size: 0.9rem !important; font-weight: 500 !important; border-radius: 40px !important; cursor: pointer !important; text-transform: uppercase !important; width: 100% !important; }





/* ==========================================================================

   10. Loghi Canali (Partner) e Piè di Pagina (Footer)

   ========================================================================== */



.featured-partners {

    padding: 50px 0;

    border-top: 1px solid var(--border-color);

    margin-bottom: 40px;

}



.partners-title {

    font-family: var(--font-serif);

    font-size: 1.1rem;

    font-style: italic;

    letter-spacing: 1px;

    color: #888888;

    text-transform: uppercase;

    margin-bottom: 30px;

}



.partners-grid {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 60px;

    flex-wrap: wrap;

    max-width: 1000px;

    margin: 0 auto;

}



.partner-logo {

    height: 100px;

    width: auto;

    object-fit: contain;

    filter: grayscale(100%) opacity(0.4);

    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

}



.partner-logo-text {

    font-family: var(--font-sans);

    font-size: 1.1rem;

    font-weight: 600;

    color: #888888;

    filter: opacity(0.5);

    transition: all 0.3s ease;

}



.partner-logo-text .dot-it { color: #E63946; }



.partner-link:hover .partner-logo { filter: grayscale(0%) opacity(0.9); transform: translateY(-2px); }

.partner-link:hover .partner-logo-text { color: #003580; filter: opacity(0.9); transform: translateY(-2px); }



.footer-minimal {

    text-align: center;

    padding: 20px 0 40px 0;

    border-top: 1px solid var(--border-color);

    font-size: 0.85rem;

    color: var(--muted-grey);

}







/* ==========================================================================

   10b. PICCOLO BANNER PUBBLICITARIO SUL FONDO (PROMO BANNER)

   ========================================================================== */

.bottom-promo-banner {

    margin-bottom: 60px;

    padding: 0 10px; /* Crea un leggero cuscinetto laterale */

}



.banner-inner {

    background: linear-gradient(135deg, #F5F1E6 0%, #EAE5DC 100%); /* Sfumatura crema di lusso */

    border: 1px solid var(--border-color);

    border-radius: 20px;

    padding: 35px 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    max-width: 1200px;

    margin: 0 auto;

}



.banner-text-content {

    flex: 1;

}



.banner-tag {

    display: inline-block;

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--accent-terracotta);

    font-weight: 600;

    margin-bottom: 5px;

}



.banner-title {

    font-family: var(--font-serif);

    font-size: 2rem;

    font-weight: 400;

    color: var(--text-dark);

    line-height: 1.2;

    margin-bottom: 8px;

}



.banner-lead {

    font-size: 0.95rem;

    color: var(--muted-grey);

    font-weight: 300;

    line-height: 1.5;

}



.banner-action-content {

    flex: 0 0 auto;

}



/* Regoliamo la larghezza del tasto nel banner per PC */

.banner-action-content .btn-terracotta {

    min-width: 240px;

}









/* ==========================================================================

   11. Ottimizzazione Dispositivi Mobili (Media Queries)

   ========================================================================== */



@media (max-width: 992px) {

    .hero-full { min-height: 70vh; padding: 40px 20px; }

    .hero-content h1 { font-size: 2.5rem; }

    .hero-content p { font-size: 1.1rem; }

    

    .editorial-grid { grid-template-columns: 1fr; gap: 20px; }

    

    .services-luxury-grid { grid-template-columns: 1fr; gap: 20px; }

    .service-luxury-card { padding: 25px 20px; }

    .service-luxury-card h3 { font-size: 1.4rem; }

    

    .gallery-container { grid-template-columns: 1fr; grid-auto-rows: 240px; gap: 15px; }

    .gallery-box.box-large, .gallery-box.box-wide { grid-row: auto; grid-column: auto; }

    .box-overlay { opacity: 1; background: linear-gradient(to top, rgba(26, 26, 26, 0.5), transparent); }

    .box-overlay span { transform: translateY(0); font-size: 1.2rem; }

    

    .amenity-row { flex-direction: column; gap: 8px; padding: 20px 0; }

    .amenity-title { flex: none; font-size: 1.4rem; }

    

    .contact-grid { grid-template-columns: 1fr; gap: 40px; }

    .contact-block { padding: 40px 20px; border-radius: 16px; }

    .booking-action-box { padding: 25px 15px; }

    .map-link-container { min-height: 300px; }

    

    .partners-grid { gap: 35px; }

    .partner-logo { height: 26px; }

    .partner-logo-text { font-size: 0.95rem; }

    

    .btn-inline { display: block; width: 100%; min-width: auto; }

    .compact-booking-container { max-width: 100%; padding: 0; }



    /* --- INTEGRAZIONE RESPONSIVE RIQUADRI EMOTIVI --- */

    .quotes-grid {

        grid-template-columns: 1fr; /* Si incolonnano in verticale su smartphone e tablet */

        gap: 20px;

    }

    

    .quote-card {

        padding: 30px 25px;

    }

    

    .quote-text {

        font-size: 1.25rem;

    }





    /* --- INTEGRAZIONE RESPONSIVE LOCALITÀ E POIS --- */

    .pois-container {

        grid-template-columns: 1fr; /* Una sola colonna verticale su mobile */

        gap: 20px;

    }

    

    .poi-category-card {

        padding: 25px 20px;

    }

    

    .poi-category-card h3 {

        font-size: 1.4rem;

    }





    /* --- INTEGRAZIONE RESPONSIVE BANNER PUBBLICITARIO --- */

    .banner-inner {

        flex-direction: column;

        text-align: center;

        padding: 35px 25px;

        gap: 25px;

    }

    

    .banner-title {

        font-size: 1.7rem;

    }

    

    .banner-action-content {

        width: 100%;

    }

    

    .banner-action-content .btn-terracotta {

        width: 100%;

    }





    /* --- ADATTAMENTO MOBILE COOKIE BANNER --- */

    .cookie-banner-inner {

        flex-direction: column;

        text-align: center;

        gap: 20px;

        padding: 0 20px;

    }

    .cookie-actions-btns {

        width: 100%;

        justify-content: center;

        gap: 20px;

    }

    .cookie-banner-wrapper {

        padding: 25px 0;

    }



    /* Impedisce ai testi e ai pulsanti della navbar di sovrapporsi o uscire dallo schermo */

    .nav-container {

        flex-direction: column;

        gap: 15px;

        text-align: center;

    }

    .nav-actions {

        width: 100%;

        justify-content: center;

        gap: 15px;

    }

    /* Forza la mappa a occupare lo spazio corretto senza deformarsi */

    .map-container {

        min-height: 300px;

        height: 300px; 

        width: 100%;

    }





}



@media (max-width: 768px) {

    /* Correzione Navbar per evitare che esca dallo schermo */

    .nav-container { flex-direction: column; gap: 12px; padding: 0 15px; align-items: center;width: 100%;}

    .nav-actions { width: 100%; justify-content: center; gap: 15px; flex-wrap: wrap; /* Permette agli elementi di andare a capo se lo schermo è vecchissimo o molto stretto */}

    .navbar { padding: 12px 0; width: 100%;overflow: hidden; /* Taglia eventuali micro-sbrodolamenti di pixel */}



    /* Ridimensionamento testi e icone originali */

    .logo-img { height: 32px; } /* Leggermente più piccolo per fare spazio */

    .logo-text { font-size: 0.85rem; }

    .logo-serif { font-size: 1.2rem; }

    .title-serif { font-size: 2.2rem; }

    .popup-content { padding: 25px 20px; }

    .popup-title { font-size: 1.5rem; }





    /* --- SISTEMAZIONE BARRA HIGHLIGHTS PER MOBILE --- */

    .highlights {flex-direction: column; gap: 30px; padding: 30px 15px; margin-bottom: 50px; }

    .highlight-item .number { font-size: 2.5rem; line-height: 1.1; }

    .highlight-item .label { font-size: 0.9rem; margin-top: 8px; padding: 0 10px; }





    /* Controlli del Lightbox */

    .lightbox-prev { left: 15px; font-size: 2rem; }

    .lightbox-next { right: 15px; font-size: 2rem; }

    .lightbox-close { top: 15px; right: 20px; font-size: 2.8rem; }

    .lightbox-content { max-width: 95%; }

    #lightbox-img { max-height: 65vh; }

    .lightbox-caption { font-size: 1rem; }

}





/* ==========================================================================

   12. BANNER COOKIE LUXURY

   ========================================================================== */

.cookie-banner-wrapper {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    background-color: var(--bg-main); /* Colore panna coordinato */

    border-top: 1px solid var(--border-color);

    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05);

    z-index: 10002; /* Rimane sopra a qualsiasi cosa, compreso il lightbox */

    padding: 20px 0;

    display: none; /* Inizialmente nascosto, attivato da JavaScript */

    animation: cookieSlideUp 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}



/* Classe attivata da JavaScript se manca il consenso */

.cookie-banner-wrapper.cookie-banner-visible {

    display: block;

}



.cookie-banner-inner {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}



.cookie-text p {

    font-size: 0.9rem;

    color: var(--muted-grey);

    line-height: 1.5;

}



.cookie-policy-link {

    color: var(--text-dark);

    text-decoration: underline;

    font-weight: 500;

}



.cookie-policy-link:hover {

    color: var(--accent-terracotta);

}



.cookie-actions-btns {

    display: flex;

    align-items: center;

    gap: 25px;

    flex-shrink: 0;

}



/* Pulsante Accetta (Adattato con dimensioni ridotte) */

.btn-cookie-submit {

    padding: 10px 24px !important;

    font-size: 0.85rem !important;

}



/* Tasto Rifiuta in stile link minimal */

.btn-cookie-link {

    background: none;

    border: none;

    font-family: var(--font-sans);

    font-size: 0.85rem;

    color: var(--muted-grey);

    text-decoration: underline;

    cursor: pointer;

    transition: color 0.2s ease;

}



.btn-cookie-link:hover {

    color: var(--text-dark);

}



@keyframes cookieSlideUp {

    from { transform: translateY(100%); }

    to { transform: translateY(0); }

}