/* ===========================================================
   Terrazza Marconi - Personalizzazioni brand
   Palette: Nero #1C1C1C - Oro #CCAA5C - Blu #304D9B - Bianco
   Caricato DOPO main.css per sovrascrivere le variabili.
   =========================================================== */

:root {
    --theme:    #CCAA5C;   /* Oro - accento primario (bottoni, dettagli) */
    --theme-2:  #304D9B;   /* Blu - accento secondario */
    --header:   #1C1C1C;   /* Nero - titoli e testi forti */
    --text:     #434343;   /* Testo corrente */
    --text-2:   #304D9B;   /* Blu - usato dal template come accento testo */
    --bg:       #FFFAF4;   /* Sfondo caldo */
    --bg-2:     #FFFAF4;
    --bg-3:     #F8F8F8;
}

/* --- Logo orizzontale TM (proporzione molto larga ~5.6:1) --- */
.header-logo img,
.header-logo-2 img {
    max-height: 46px;
    width: auto;
    max-width: 230px;
}

/* --- Sezione dining: pannello in blu brand.
   Il template usa var(--theme): con l'oro chiaro #CCAA5C il testo bianco
   ha contrasto insufficiente, quindi usiamo il blu (--theme-2). --- */
.hotel-dining-section::before {
    background-color: var(--theme-2);
}

/* --- Liste service-details: le descrizioni sono frasi intere, quindi
   annulliamo il "Maiuscolo Ogni Parola" del template (capitalize),
   sgradevole in italiano. Manteniamo solo l'iniziale naturale del testo. --- */
.service-details-wrapper .details-content .details-list-item ul li,
.service-details-wrapper .details-content .details-list-item h3 {
    text-transform: none;
}

/* =====================================================================
   HEADER MENU - fit affidabile su tutto il desktop (8 voci di menu)
   Il template nascondeva telefono e PRENOTA sotto i 1399px lasciando
   la fascia 1200-1399 senza CTA. Qui rendiamo:
   - logo di dimensione costante (niente salto a 1399)
   - menu compatto e bilanciato
   - PRENOTA sempre visibile da 1200px in su
   - telefono visibile da 1500px in su
   ===================================================================== */
@media (min-width: 1200px) {
    /* logo coerente su tutto il desktop */
    .header-1 .header-main .header-left .header-logo img,
    .header-1 .header-main .header-left .header-logo-2 img {
        max-height: 40px;
        width: auto;
        max-width: 200px;
    }
    /* menu compatto */
    .header-main .main-menu ul li {
        margin-inline-end: 24px;
    }
    .header-main .main-menu ul li a {
        font-size: 15px;
    }
    .header-1 .header-main .main-menu {
        padding: 0 26px;
    }
    /* Il box scuro del menu (header-bg.png) ha larghezza fissa 634px e non
       conteneva l'ultima voce ("Contatti" sbordava): lo facciamo adattare
       in larghezza al menu, cosi contiene sempre tutte le voci. */
    .header-1 .header-main .main-menu .bg-image,
    .header-1 .header-main .main-menu .bg-image img {
        width: 100%;
        height: 100%;
    }
    .header-1 .header-main .main-menu .bg-image img {
        object-fit: fill;
    }
    /* CTA PRENOTA sempre visibile sul desktop */
    .header-main .header-right .header-button {
        display: block !important;
    }
}

/* fascia laptop 1200-1499: nascondiamo solo il telefono per dare aria al menu */
@media (min-width: 1200px) and (max-width: 1499px) {
    .header-main .header-right .call-item {
        display: none !important;
    }
    .header-main .main-menu ul li {
        margin-inline-end: 20px;
    }
}

/* schermi ampi: telefono di nuovo visibile accanto al PRENOTA */
@media (min-width: 1500px) {
    .header-main .header-right .call-item {
        display: flex !important;
    }
}

.offcanvas__logo img {
    max-height: 46px;
    width: auto;
}

.footer-logo img {
    max-height: 56px;
    width: auto;
}

/* =====================================================================
   VIDEO DRONE DI SFONDO NELL'HERO (homepage)
   Clip al tramonto con insegna Terrazza Marconi. Muto, in loop,
   con poster di fallback. Velo scuro leggero per la leggibilita del testo.
   ===================================================================== */
.hero-section-1 {
    position: relative;
    overflow: hidden;
}
.hero-section-1 .hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
.hero-section-1::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.45) 100%);
    pointer-events: none;
}
.hero-section-1 > .container-fluid {
    position: relative;
    z-index: 2;
}

/* =====================================================================
   HERO A TUTTA ALTEZZA (homepage)
   Il template dava all'hero un'altezza guidata dai contenuti (padding-top
   220px + wrapper con margin-top fisso di 250px): su schermi comuni
   superava l'altezza del viewport. Qui l'hero occupa esattamente il 100%
   dello schermo (svh = viewport reale su mobile, senza il salto della
   barra browser): claim e bottone centrati nello spazio libero, box
   "I nostri spazi" ancorato in basso a destra tramite margini auto.
   min-height (non height): su schermi molto bassi il contenuto puo'
   comunque respirare senza tagli.
   ===================================================================== */
.hero-section-1.hero-1 {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 140px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
}
.hero-section-1.hero-1 > .container-fluid,
.hero-section-1.hero-1 > .container-fluid > .row {
    flex: 1;
    display: flex;
}
.hero-section-1.hero-1 .hero-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* i margini auto centrano il gruppo claim+bottone nello spazio sopra il box */
.hero-section-1.hero-1 .hero-content > p {
    margin-top: auto;
}
/* nel flex a colonna il bottone si stirerebbe a tutta larghezza e il suo
   effetto hover (parallelogramma oro largo quanto il bottone) apparirebbe
   al centro dell'hero: lo teniamo largo quanto il contenuto */
.hero-section-1.hero-1 .hero-content > .theme-btn {
    align-self: flex-start;
    /* con il box "spazi" rimosso, margin-bottom:auto (insieme al margin-top:auto
       del claim) centra verticalmente claim+bottone, lasciando libero il fondo
       dell'hero per l'indicatore di scroll */
    margin-bottom: auto;
    /* stesso trattamento dei box dell'header: sabbia frosted, ben visibile */
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 30px;
    border-radius: 12px;
    background: rgba(212, 184, 151, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    color: #fff;
}
.hero-section-1.hero-1 .hero-content .hero-wrapper {
    margin-top: auto;
    padding-top: 40px;
    justify-content: flex-end;
}
/* box "I nostri spazi": vetro scuro sempre leggibile (il template si
   affidava solo a backdrop-filter senza prefisso -webkit: su Safari il
   box restava bianco con testo bianco) */
.hero-1 .hero-content .hero-wrapper .hero-box {
    background: rgba(22, 22, 26, 0.55);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
@media (max-width: 991px) {
    .hero-section-1.hero-1 {
        padding-top: 120px;
        padding-bottom: 30px;
    }
}

/* =====================================================================
   INDICATORE DI SCROLL (homepage hero)
   L'hero occupa tutto il viewport: senza un segnale esplicito non e'
   ovvio che la pagina continui sotto. Label "Scorri" + freccia che
   rimbalza dolcemente, ancorata in basso al centro. E' un link: un click
   porta alla sezione successiva, utile a chi non scrolla d'istinto.
   ===================================================================== */
.tm-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
}
.tm-scroll-hint__label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.tm-scroll-hint__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(212, 184, 151, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    animation: tmScrollBounce 1.8s ease-in-out infinite;
    transition: background 0.3s ease;
}
.tm-scroll-hint:hover .tm-scroll-hint__chevron {
    background: rgba(212, 184, 151, 0.92);
}
@keyframes tmScrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}
@media (max-width: 767px) {
    .tm-scroll-hint__label { font-size: 12px; }
    .tm-scroll-hint__chevron { width: 38px; height: 38px; }
}
/* rispetta chi ha disattivato le animazioni di sistema */
@media (prefers-reduced-motion: reduce) {
    .tm-scroll-hint__chevron { animation: none; }
}

/* =====================================================================
   FRECCE GALLERY NELLE PAGINE CAMERA
   Lo slider foto del template non aveva navigazione visibile: da desktop
   non era intuitivo. Frecce circolari ai lati, sabbia al passaggio.
   ===================================================================== */
.room-details-post .details-slider {
    position: relative;
}
.room-details-post .details-slider .tm-gal-prev,
.room-details-post .details-slider .tm-gal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: #1C1C1C;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: background 0.3s ease, color 0.3s ease;
}
.room-details-post .details-slider .tm-gal-prev {
    left: 18px;
}
.room-details-post .details-slider .tm-gal-next {
    right: 18px;
}
.room-details-post .details-slider .tm-gal-prev:hover,
.room-details-post .details-slider .tm-gal-next:hover {
    background: #2F4C9B;
    color: #fff;
}

/* =====================================================================
   BOX "INCLUSO CON OGNI CAMERA" (pagine camera)
   Il valore aggiunto di ogni soggiorno: spiaggia, borraccia riutilizzabile
   ricaricabile in lounge, Blue Pass, wi-fi. Fondo sabbia leggero.
   ===================================================================== */
.room-details-wrapper .tm-inclusi-box {
    background: rgba(212, 184, 151, 0.16);
    border-radius: 10px;
    padding: 26px 30px;
    margin: 6px 0 34px;
}
.room-details-wrapper .tm-inclusi-box h6 {
    margin-bottom: 14px;
}
.room-details-wrapper .tm-inclusi-box ul li {
    padding: 6px 0;
    font-size: 16px;
}
.room-details-wrapper .tm-inclusi-box ul li i {
    color: #2F4C9B;
    width: 20px;
    margin-right: 10px;
    text-align: center;
}

/* =====================================================================
   VIDEO DI SFONDO NELLA SEZIONE RECENSIONI (pagina hotel)
   Clip mare-camera dietro il velo scuro del template: il video sta a
   z-index -2 (sotto il ::before a -1 che lo scurisce), contenuti sopra.
   Il velo del template era 0.9: troppo scuro per vedere il video, lo
   alleggeriamo solo nella variante style-inn.
   ===================================================================== */
.testimonial-section.style-inn {
    overflow: hidden;
}
.testimonial-section .testimonial-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}
.testimonial-section.style-inn::before {
    background: rgba(28, 28, 28, 0.55);
}

/* =====================================================================
   CARD FACILITIES (hotel.html e servizi.html): altezze uniformi
   L'altezza delle card era guidata dal testo (titoli su due righe nella
   seconda fila = card piu' alte). Altezza minima comune e card che
   riempiono la colonna: righe simmetriche, immagini allineate.
   ===================================================================== */
@media (min-width: 992px) {
    .hotel-facilities-items {
        height: 100%;
        min-height: 460px;
    }
    .hotel-facilities-items .facilities-image {
        align-self: stretch;
        flex: 0 0 46%;
    }
    .hotel-facilities-items .facilities-content {
        flex: 1;
        align-self: center;
    }
}

/* =====================================================================
   ABOUT-SECTION: punti elenco (spiaggia, SPA, ristorante, colazione)
   a 16px come richiesto dal cliente. Punti elenco cliccabili verso le
   rispettive pagine.
   ===================================================================== */
.about-wrapper .about-content .list-item .list li {
    font-size: 16px;
}

.about-wrapper .about-content .list-item .list li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    transition: all 0.4s ease-in-out;
}

.about-wrapper .about-content .list-item .list li a:hover {
    color: var(--theme);
    margin-left: 5px;
}

/* =====================================================================
   BOX EVIDENZA NELLE PAGINE SERVIZIO: nessun bordo (richiesta cliente)
   ===================================================================== */
.service-details-wrapper .details-content .box {
    border: none;
    border-left: none;
}

/* =====================================================================
   BREADCRUMB PAGINE INTERNE: via l'overlay scuro del template
   Il template stendeva un gradiente verso il nero (fino a #1C1C1C a
   destra) sulla foto dell'header. Lo sostituiamo con un velo neutro
   leggero, uniforme, quanto basta per la leggibilita' del titolo bianco.
   ===================================================================== */
.breadcrumb-wrapper::before {
    background: rgba(28, 28, 28, 0.28);
}

/* =====================================================================
   CTA "SCOPRI L'HOTEL" NELLA ABOUT-SECTION (home e pagina hotel)
   Sfondo con la striscia panoramica #feel SENIGALLIA (Rotonda al
   tramonto) al posto del placeholder radial-bg del template; via anche
   la cornice top-shape (bg-shape.png). La classe bg-cover nel markup e'
   finita dentro un data-attribute, quindi il cover va forzato qui.
   ===================================================================== */
.about-wrapper .about-content .hero-button-item {
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
}
.about-wrapper .about-content .hero-button-item .top-shape {
    display: none;
}

/* =====================================================================
   BANNER "IL MARE IN TERRAZZA" (home)
   Banner semplice nel blu del brand, senza foto (non esistono scatti
   pranzo/cena del ristorante): rimanda al sito ufficiale del ristorante.
   ===================================================================== */
.tm-ristorante-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #3A59A8 0%, #304D9B 45%, #243D7E 100%);
    padding: 110px 0;
}
/* il testimonial del template risale di -300px per sovrapporsi al vecchio
   blocco foto (molto alto): dopo il banner, che e' basso, lo coprirebbe */
.tm-ristorante-banner + .testimonial-section {
    margin-top: 0;
}
.tm-ristorante-banner .tm-ristorante-inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.tm-ristorante-banner .onda {
    display: block;
    height: 16px;
    width: auto;
    margin: 0 auto 20px;
}
.tm-ristorante-banner .sub-title {
    display: block;
    color: #D4B897;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 14px;
}
.tm-ristorante-banner h2 {
    color: #fff;
    margin-bottom: 18px;
}
.tm-ristorante-banner p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 30px;
}
.tm-ristorante-banner .theme-btn {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 34px;
    border-radius: 12px;
    background-color: #D4B897;
    color: #1C1C1C;
}
.tm-ristorante-banner .theme-btn:hover {
    color: #fff;
}

/* slide "I nostri spazi" cliccabili */
.hero-1 .hero-content .hero-wrapper .hero-box .hero-item .tm-spazio-link {
    display: block;
    color: inherit;
}
@media (max-width: 767px) {
    .tm-ristorante-banner {
        padding: 70px 0;
    }
}

/* =====================================================================
   SEZIONE "TUTTO INCLUSO" (home): box telefono e PRENOTA uniformi
   Il template usava PNG di sfondo stirati con padding irregolari (icona
   attaccata al bordo, larghezze diverse). Come per l'header: stessa
   altezza, stesso raggio, sfondo scuro uniforme, padding simmetrici.
   ===================================================================== */
.feature-wrapper .feature-content .feature-contact-item {
    gap: 16px;
    margin-top: 36px;
}
.feature-wrapper .feature-content .feature-contact-item .call-item {
    height: 56px;
    padding: 0 24px 0 12px;
    border-radius: 12px;
    background: rgba(22, 22, 26, 0.92);
}
.feature-wrapper .feature-content .feature-contact-item .call-item .shape {
    display: none;
}
.feature-wrapper .feature-content .feature-contact-item .call-item h6 a {
    color: #fff;
}
.feature-wrapper .feature-content .feature-contact-item .theme-btn {
    height: 56px;
    display: inline-flex;
    align-items: center;
    padding: 0 32px;
    border-radius: 12px;
    background: rgba(22, 22, 26, 0.92);
    color: #fff;
}
.feature-wrapper .feature-content .feature-contact-item .theme-btn img {
    display: none;
}

/* =====================================================================
   SEZIONE CAMERE (home): pannello nel colore principale del brand
   Al posto della foto scura del template (room/bg.jpg) il pannello
   arrotondato usa il colore ufficiale Terrazza Marconi #D4B897.
   Il velo nero del template (::before) va spento, era pensato per la foto.
   ===================================================================== */
.room-section .bg-image {
    background-color: #D4B897;
}
.room-section .bg-image::before {
    display: none;
}
/* titolo ed eyebrow della sezione nel blu del brand, paragrafo nero
   per leggibilita' sul fondo sabbia */
.room-section .section-title .sub-title.text-white,
.room-section .section-title h2.text-white {
    color: #2F4C9B !important;
}
.room-section .section-title h2.text-white {
    font-weight: 700;
}
.room-section .section-title p.text-white {
    color: #1C1C1C !important;
}
/* barra "Scopri" delle card camere: blu Terrazza Marconi al posto del nero
   (vale per lo slider in home e per la griglia di camere.html) */
.room-box-item .content-item .theme-btn {
    background-color: #2F4C9B;
}

/* =====================================================================
   DIVISORE ONDA NEL MARQUEE
   L'onda del logo (divisore-terrazza.png) al posto della stella Font
   Awesome del template, tra le voci del nastro scorrevole.
   ===================================================================== */
.scrolling-wrap .cmn-textslide .tm-divider {
    height: 0.55em;
    width: auto;
    vertical-align: baseline;
    margin-right: 0.4em;
}

/* =====================================================================
   FONT UFFICIALE: Sweet Sans Pro (Adobe Typekit - kit eyr7yij)
   Applicato a corpo e titoli, sovrascrivendo Barlow/Gilda del template.
   ===================================================================== */
body {
    font-family: "sweet-sans-pro", sans-serif;
}
/* Elementi generici (span, a, li) ereditano gia il font dal body: NON li
   tocchiamo per non rompere le icone Font Awesome (spesso su <i>/<span>).
   Sovrascriviamo solo titoli, form e i pochi elementi che il template
   forza in serif (Gilda) con specificita alta. !important per vincere. */
h1, h2, h3, h4, h5, h6, button, input, textarea, select,
.sub-title,
.scrolling-wrap .comm .cmn-textslide,
.service-details-wrapper .details-content .box,
.service-details-wrapper .details-content h2,
.special-offer-wrapper .special-offer-box-items .content span,
.booking-reserve-wrapper .form-clt span,
.room-details-wrapper .room-sideber .side-reservation-from {
    font-family: "sweet-sans-pro", sans-serif !important;
}

/* =====================================================================
   LOGO HEADER PIU' GRANDE SU MOBILE/TABLET
   Il template lo riduceva a 120px (troppo piccolo). Lo ingrandiamo.
   ===================================================================== */
@media (max-width: 1199px) {
    .header-1 .header-main .header-left .header-logo img,
    .header-1 .header-main .header-left .header-logo-2 img {
        width: auto;
        max-height: 44px;
        max-width: 235px;
    }
}

/* =====================================================================
   HEADER UNIFORME ED ELEGANTE (desktop)
   I tre box (menu, telefono, PRENOTA) usavano PNG di sfondo diversi con
   altezze/padding disuguali. Qui li rendiamo identici: stessa altezza,
   stesso raggio, stesso sfondo "frosted", padding e gap simmetrici.
   ===================================================================== */
@media (min-width: 1200px) {
    .header-1 .header-main .main-menu,
    .header-1 .header-main .header-right .call-item,
    .header-1 .header-main .header-right .header-button > .theme-btn {
        height: 56px;
        border-radius: 12px;
        /* colore ufficiale Terrazza Marconi #D4B897, leggermente traslucido
           per non staccare troppo dal video hero sottostante */
        background: rgba(212, 184, 151, 0.92);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    }
    /* testi bianchi di default (richiesta cliente); !important per
       uniformare anche lo stato sticky del template */
    .header-1 .header-main .main-menu ul li a,
    .sticky.header-1 .header-main .main-menu ul li a,
    .header-1 .header-main .header-right .call-item h6 a,
    .header-1 .header-main .header-right .header-button > .theme-btn {
        color: #ffffff !important;
    }
    /* hover e voce attiva nel blu del brand */
    .header-1 .header-main .main-menu ul li a:hover,
    .sticky.header-1 .header-main .main-menu ul li a:hover,
    .header-1 .header-main .main-menu ul li.active > a {
        color: #2F4C9B !important;
    }
    /* i sottomenu aprono un pannello bianco: voci scure, hover blu
       (il bianco qui sopra altrimenti le renderebbe invisibili) */
    .header-1 .header-main .main-menu ul li .submenu li a,
    .sticky.header-1 .header-main .main-menu ul li .submenu li a {
        color: #1C1C1C !important;
    }
    .header-1 .header-main .main-menu ul li .submenu li a:hover,
    .sticky.header-1 .header-main .main-menu ul li .submenu li a:hover {
        color: #2F4C9B !important;
    }
    /* via le PNG di sfondo: usiamo lo sfondo CSS uniforme */
    .header-1 .header-main .main-menu .bg-image,
    .header-1 .header-main .header-right .call-item .shape,
    .header-1 .header-main .header-right .header-button > .theme-btn > img {
        display: none !important;
    }
    /* padding orizzontale uniforme e voci centrate verticalmente */
    .header-1 .header-main .main-menu {
        padding: 0 26px;
    }
    .header-1 .header-main .main-menu ul li a {
        padding: 0;
        line-height: 56px;
    }
    .header-1 .header-main .header-right .call-item {
        padding: 0 22px;
        gap: 12px;
        justify-content: center;
    }
    .header-1 .header-main .header-right .header-button > .theme-btn {
        padding: 0 28px;
        justify-content: center;
    }
    /* gap simmetrici tra i box a destra */
    .header-1 .header-main .header-right {
        gap: 14px;
    }
}

/* =====================================================================
   GRANDI SCHERMI (>=1600px, es. monitor 27" a 2560px)
   Il template Bootstrap ferma il contenuto delle sezioni a 1410px e usa
   il full-width (container-fluid) per HEADER ed HERO. Su monitor molto
   larghi il risultato era:
   - contenuto "perso" al centro con enormi margini vuoti ai lati;
   - logo, menu, telefono/PRENOTA e il testo dell'hero incollati ai bordi
     estremi dello schermo, con un grande vuoto in mezzo.
   Qui:
   - allarghiamo progressivamente la colonna di contenuto (.container);
   - cappiamo e centriamo il contenuto full-bleed di header ed hero,
     allineandolo alla stessa colonna. Lo SFONDO/VIDEO resta a tutta
     larghezza perche' vive sull'elemento <section>/<header>, non sul
     container-fluid interno.
   Nota allineamento: il container-fluid ha 60px di padding contro i 12px
   del .container, quindi per far coincidere i bordi del contenuto la sua
   max-width e' quella del .container + 2*(60-12) = +96px.
   ===================================================================== */
@media (min-width: 1600px) {
    .container {
        max-width: 1540px;
    }
    .header-1 .container-fluid,
    .hero-section-1 .container-fluid {
        max-width: 1636px;
        margin-inline: auto;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1660px;
    }
    .header-1 .container-fluid,
    .hero-section-1 .container-fluid {
        max-width: 1756px;
    }
}

/* ---------------------------------------------------------------------
   Sezione "Il gusto a Terrazza Marconi" (.hotel-dining-section, solo home)
   Il template disegnava il pannello blu (::before) con LARGHEZZA FISSA in
   px (945/790/710) ancorata al bordo sinistro del viewport, e l'immagine
   destra con bleed fisso (margin-right: -270px). Valori tarati per ~1920px:
   su viewport piu' larghi il pannello blu non arrivava piu' al centro
   (grande vuoto bianco tra pannello e immagine), il testo lo sforava e
   l'immagine non raggiungeva il bordo destro.
   Qui rendiamo tutto relativo al viewport:
   - il pannello blu arriva fino al centro (dove inizia la colonna immagine):
     il testo ci sta sempre e il vuoto centrale si chiude (resta solo il
     piccolo stacco voluto tra gli angoli arrotondati);
   - l'immagine sborda fino al bordo destro del viewport; l'eccesso e'
     ritagliato da overflow:hidden della sezione (classe .fix).
   Le costanti nel calc del margine dipendono dalla larghezza del .container
   di ogni fascia (1410 / 1540 / 1660) per far combaciare il bordo destro.
   --------------------------------------------------------------------- */
@media (min-width: 1400px) {
    .hotel-dining-section::before {
        width: calc(50% - 8px);
    }
    .hotel-dining-wrapper .hotel-slider {
        margin-right: calc(680px - 50vw);
    }
}
@media (min-width: 1600px) {
    .hotel-dining-wrapper .hotel-slider {
        margin-right: calc(740px - 50vw);
    }
}
@media (min-width: 1920px) {
    .hotel-dining-wrapper .hotel-slider {
        margin-right: calc(800px - 50vw);
    }
}

/* ---------------------------------------------------------------------
   BLOCCO OFFERTE/PACCHETTI (.service-offer-section - home + pacchetti)
   Il template usava 5 card a LARGHEZZA FISSA (una espansa a 450px, le
   altre a 210px), somma tarata per un container di 1410px. Con il
   container piu' largo restava un vuoto asimmetrico (sembrava mancare
   una colonna / fatto per 6). Le trasformiamo in 5 CARD UNIFORMI che
   RIEMPIONO la larghezza (flex:1), stile "foto a tutta card + box bianco
   con nome e scopri". Usiamo il contenuto corretto della .service-item
   (foto reale + nome giusto) e nascondiamo la .service-card-item, che
   nel template aveva contenuto placeholder ("Benessere & Relax" su tutte).
   --------------------------------------------------------------------- */
.service-wrapper {
    align-items: stretch;
}
.service-wrapper .service-main-item,
.service-wrapper .service-main-item.active {
    width: auto;
    height: 460px;
}
/* la card e' l'immagine a tutta area (la .service-card-item placeholder e' nascosta) */
.service-wrapper .service-main-item .service-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: none;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: transform 0.4s ease;
}
.service-wrapper .service-main-item .service-item .service-image {
    position: absolute;
    inset: 0;
}
.service-wrapper .service-main-item .service-item .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
/* box bianco in basso con nome (orizzontale) e "scopri" */
.service-wrapper .service-main-item .service-item .service-content {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    margin: 0;
    padding: 18px 20px;
    writing-mode: horizontal-tb;
    transform: none;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.service-wrapper .service-main-item .service-item .service-content h3 {
    height: auto;
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
}
.service-wrapper .service-main-item .service-item .service-content h3 a {
    color: var(--header);
}
.service-wrapper .service-main-item .service-item .service-content h3 a:hover {
    color: var(--theme);
}
/* Pulsante "scopri": di default look "outline" (bordo fine sabbia, sfondo
   trasparente); al passaggio del mouse si riempie del sabbia principale
   Terrazza Marconi (#D4B897) con testo bianco. */
.service-wrapper .service-main-item .service-item .service-content .btn {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    padding: 7px 20px;
    border: 1px solid #D4B897;
    border-radius: 999px;
    background: transparent;
    color: var(--theme);
    line-height: 1;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.service-wrapper .service-main-item .service-item .service-content .btn:hover,
.service-wrapper .service-main-item .service-item .service-content .btn:focus {
    background-color: #D4B897;
    border-color: #D4B897;
    color: #fff;
}
/* card placeholder del template: nascosta */
.service-wrapper .service-main-item .service-card-item {
    display: none !important;
}
/* leggero sollevamento al passaggio del mouse */
.service-wrapper .service-main-item:hover .service-item {
    transform: translateY(-8px) !important;
}
/* desktop: 5 colonne uguali che riempiono la larghezza */
@media (min-width: 1400px) {
    .service-wrapper {
        flex-wrap: nowrap;
        justify-content: center;
    }
    .service-wrapper .service-main-item,
    .service-wrapper .service-main-item.active {
        flex: 1 1 0;
    }
}
/* tablet/mobile: card in wrap, larghezza gestibile, tutte visibili */
@media (max-width: 1399px) {
    .service-wrapper .service-main-item,
    .service-wrapper .service-main-item.active {
        flex: 0 1 300px;
        width: 300px;
        display: block !important;
    }
}

/* footer: stacco dal contenuto precedente */
.footer-section {
    margin-top: 20px;
}

/* stacco tra banner eco e slider Instagram (camere.html e pagine camera) */
.tm-eco-banner + .instagram-section-2 {
    margin-top: 20px;
}

/* footer: link "Powered by filRouge" bianco */
.footer-bottom .footer-wrapper p a {
    color: var(--white);
}
.footer-bottom .footer-wrapper p a:hover {
    color: var(--theme);
}

/* =====================================================================
   BANNER "ACQUA ILLIMITATA, PLASTICA ZERO" (home + pagine camere)
   Richiamo eco: borraccia TM in alluminio in dotazione in tutte le
   camere, acqua illimitata in hotel e in spiaggia. Stesso blu brand
   del banner ristorante; la foto della borraccia ha sfondo trasparente.
   ===================================================================== */
.tm-eco-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #3A59A8 0%, #304D9B 45%, #243D7E 100%);
    /* niente padding sotto: la mano con la borraccia esce dal bordo
       inferiore del blocco invece di restare sospesa nel blu */
    padding: 90px 0 0;
}
/* la colonna della borraccia si aggancia al fondo del blocco */
.tm-eco-banner .row > div:first-child {
    align-self: flex-end;
}
.tm-eco-banner .eco-image {
    position: relative;
    text-align: center;
}
/* alone chiaro dietro la borraccia per staccarla dal fondo blu */
.tm-eco-banner .eco-image::before {
    content: "";
    position: absolute;
    inset: -8% 12%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent);
    pointer-events: none;
}
.tm-eco-banner .eco-image img {
    position: relative;
    display: block;
    margin: 0 auto;
    max-height: 440px;
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}
.tm-eco-banner .eco-content .sub-title {
    display: block;
    color: #D4B897;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 14px;
}
.tm-eco-banner .eco-content .onda {
    display: block;
    height: 16px;
    width: auto;
    margin: 0 0 20px;
}
.tm-eco-banner .eco-content h2 {
    color: #fff;
    margin-bottom: 18px;
}
.tm-eco-banner .eco-content p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 26px;
}
.tm-eco-banner .eco-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tm-eco-banner .eco-list li {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tm-eco-banner .eco-list li i {
    color: #D4B897;
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
@media (max-width: 991px) {
    .tm-eco-banner {
        padding: 70px 0 0;
    }
    /* impilato: il testo passa sopra e la borraccia esce comunque
       dal bordo inferiore del blocco */
    .tm-eco-banner .row > div:first-child {
        order: 2;
    }
    .tm-eco-banner .eco-image img {
        max-height: 320px;
    }
    .tm-eco-banner .eco-content {
        text-align: center;
    }
    .tm-eco-banner .eco-content .onda {
        margin: 0 auto 20px;
    }
    .tm-eco-banner .eco-list {
        align-items: center;
    }
    .tm-eco-banner .eco-list li {
        text-align: left;
    }
}

/* =====================================================================
   CARD PACCHETTO CONCLUSO (es. Capodanno al Mare): niente link ne'
   "scopri", foto leggermente desaturata e badge informativo.
   Vale per i caroselli pacchetti di home e pacchetti.html.
   ===================================================================== */
.service-wrapper .service-main-item.tm-concluso .service-item .service-image img {
    filter: grayscale(.55);
}
.service-wrapper .service-main-item.tm-concluso:hover .service-item {
    transform: none !important;
}
.service-wrapper .service-main-item.tm-concluso .service-item .service-content h3 {
    color: #8a8a8a;
}
.service-content .tm-badge-concluso {
    display: inline-block;
    margin-top: 8px;
    background: #8f8578;
    color: #fff;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* =====================================================================
   MESSAGGIO ESITO FORM CONTATTI (contatti.html)
   Il template non aveva stile per .form-message: qui esito verde/rosso.
   ===================================================================== */
.contact-form-box .form-message {
    margin: 16px 0 0;
    font-size: 15px;
    display: none;
}
.contact-form-box .form-message.success,
.contact-form-box .form-message.error {
    display: block;
}
.contact-form-box .form-message.success {
    color: #2e7d32;
}
.contact-form-box .form-message.error {
    color: #c62828;
}

/* =====================================================================
   PAGINA 404 - sezione errore su misura (sostituisce il placeholder
   grigio "600x650" del template). Messaggio in italiano, filigrana
   "404" in sabbia e scorciatoie alle sezioni principali. Vedi 404.html.
   ===================================================================== */
.tm-404-section {
    position: relative;
    background: var(--bg);
    overflow: hidden;
}
/* grande "404" in filigrana dietro al contenuto */
.tm-404-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -56%);
    font-size: clamp(200px, 34vw, 460px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: #D4B897;
    opacity: .13;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 0;
}
.tm-404-inner {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
}
.tm-404-overline {
    display: block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    font-size: 14px;
    color: var(--theme);
    margin-bottom: 16px;
}
.tm-404-title {
    color: var(--header);
    margin-bottom: 22px;
    /* ora e' l'<h1> della pagina: fissiamo la dimensione (l'h1 del template
       e' 100px) per mantenere l'aspetto della vecchia intestazione h2 */
    font-size: clamp(32px, 5vw, 50px);
    line-height: 1.12;
}
/* filetto oro con rombo centrale */
.tm-404-rule {
    display: block;
    width: 64px;
    height: 2px;
    margin: 0 auto 26px;
    background: var(--theme);
    position: relative;
}
.tm-404-rule::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--theme);
    transform: translate(-50%, -50%) rotate(45deg);
}
.tm-404-text {
    color: var(--text);
    font-size: 18px;
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto 38px;
}
/* scorciatoie alle sezioni principali */
.tm-404-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 64px;
    text-align: left;
}
.tm-404-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid rgba(28, 28, 28, .08);
    border-radius: 14px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tm-404-link:hover {
    transform: translateY(-6px);
    border-color: var(--theme);
    box-shadow: 0 18px 40px rgba(28, 28, 28, .10);
}
.tm-404-link-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FBF3E7;
    color: var(--theme);
    font-size: 21px;
    transition: background .3s ease, color .3s ease;
}
.tm-404-link:hover .tm-404-link-icon {
    background: var(--theme);
    color: #fff;
}
.tm-404-link-text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}
.tm-404-link-text strong {
    color: var(--header);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 2px;
}
.tm-404-link-text span {
    color: var(--text);
    font-size: 14px;
}
@media (max-width: 991px) {
    .tm-404-links {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .tm-404-links {
        grid-template-columns: 1fr;
    }
    .tm-404-text {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------
   PAGINA 404 SENZA HERO FOTOGRAFICO (body.tm-plain-header)
   Tolta la fascia breadcrumb, l'header (assoluto, logo bianco pensato per
   la foto scura) si trova sopra il contenuto chiaro: diamo aria in alto e
   rendiamo scuri logo e hamburger cosi restano leggibili sul fondo crema.
   I box menu/telefono/PRENOTA restano sabbia con testo bianco (gia' ok).
   --------------------------------------------------------------------- */
.tm-plain-header .tm-404-section {
    /* spazio per far scendere il contenuto sotto l'header flottante */
    padding-top: 190px;
}
/* logo scuro di default (niente foto scura dietro) */
.tm-plain-header .header-1 .header-main .header-left .header-logo {
    display: none;
}
.tm-plain-header .header-1 .header-main .header-left .header-logo-2 {
    display: block;
}
/* icona hamburger scura su fondo chiaro (mobile/tablet) */
.tm-plain-header .header-1 .header-main .header-right .sidebar__toggle i {
    color: #1C1C1C;
}
@media (max-width: 1199px) {
    .tm-plain-header .tm-404-section {
        padding-top: 150px;
    }
}
@media (max-width: 991px) {
    .tm-plain-header .tm-404-section {
        padding-top: 130px;
    }
}

/* =====================================================================
   MOBILE POLISH
   La maggior parte del traffico e' da smartphone: qui gli affinamenti
   pensati per lo schermo piccolo, raccolti in un unico blocco.
   ===================================================================== */

/* --- Hero home: leggibilita' del claim ------------------------------
   Il velo del template e' quasi trasparente a meta' altezza (8%), proprio
   dove cade il claim bianco: sopra le zone chiare della foto (insegna al
   neon, cielo) il testo si perdeva. Su mobile scuriamo il velo e diamo al
   testo un'ombra morbida: sempre leggibile, senza appesantire l'immagine. */
@media (max-width: 991px) {
    .hero-section-1::before {
        background: linear-gradient(180deg,
            rgba(0,0,0,.50) 0%,
            rgba(0,0,0,.34) 45%,
            rgba(0,0,0,.58) 100%);
    }
    .hero-section-1.hero-1 .hero-content > p {
        text-shadow: 0 1px 14px rgba(0,0,0,.55);
        line-height: 1.55;
    }
}

/* --- Ritmo verticale piu' compatto sui telefoni ---------------------
   120/100/80px di padding lasciavano vuoti ampi tra le sezioni e uno
   scroll infinito sul piccolo schermo: sotto i 767px stringiamo. */
@media (max-width: 767px) {
    .section-padding {
        padding: 60px 0;
    }
}

/* --- Email nel menu: niente capitalize ------------------------------
   .offcanvas__contact li ha text-transform: capitalize, che trasformava
   l'indirizzo in "Booking@Terrazzamarconi.It". L'email resta minuscola. */
.offcanvas__contact ul li .offcanvas__contact-text a[href^="mailto:"] {
    text-transform: none;
}

/* =====================================================================
   ANTEPRIMA FOTO "SPOTLIGHT": le foto delle gallerie aprono un lightbox
   (Magnific Popup, gia' incluso nel template) al click. Wrapper <a> a
   display:block per non alterare le dimensioni delle immagini.
   ===================================================================== */
.img-popup {
    display: block;
    height: 100%;
    cursor: zoom-in;
}

.details-slider .swiper-slide .img-popup {
    width: 100%;
    height: 100%;
}

/* =====================================================================
   BOTTONE WHATSAPP FLOTTANTE
   Richiesta cliente 11/08: bottone che rimanda direttamente a WhatsApp.
   In basso a sinistra per non sovrapporsi al back-to-top (in basso a
   destra); resta visibile anche su mobile, dove il back-to-top sparisce.
   ===================================================================== */
.tm-wa-btn {
    position: fixed;
    left: 30px;
    bottom: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #25d366;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease-in-out;
}
.tm-wa-btn:hover {
    background-color: #1ebe5b;
    color: #fff;
    transform: translateY(-3px);
}
@media (max-width: 575px) {
    .tm-wa-btn {
        left: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
}

/* =====================================================================
   MENU PIU' COMPATTO
   Con la voce FAQ (9 voci) i 50px di distanza del tema fanno toccare
   la pillola del menu con telefono e PRENOTA: si riduce la spaziatura
   in modo progressivo alle larghezze intermedie.
   ===================================================================== */
.header-main .main-menu ul li {
    margin-inline-end: 30px;
}
@media (max-width: 1699px) {
    .header-main .main-menu ul li {
        margin-inline-end: 20px;
    }
}
@media (max-width: 1599px) {
    .header-main .main-menu ul li {
        margin-inline-end: 16px;
    }
    .header-main .main-menu ul li a {
        font-size: 15px;
    }
}
@media (max-width: 1299px) {
    .header-main .main-menu ul li {
        margin-inline-end: 13px;
    }
}
/* Tra 1200 e 1350px (menu desktop ancora visibile) il numero di telefono
   non ci sta piu' insieme alle 9 voci: si nasconde, resta PRENOTA. */
@media (max-width: 1349px) {
    .header-main .header-right .call-item {
        display: none;
    }
}

/* =====================================================================
   FORM: CONSENSO PRIVACY E MESSAGGI DI ESITO
   ===================================================================== */
.tm-privacy-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}
.tm-privacy-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: #d4b897;
    cursor: pointer;
}
.tm-privacy-check a {
    text-decoration: underline;
    color: inherit;
}
.tm-privacy-check a:hover {
    color: #d4b897;
}
.tm-form-feedback {
    margin: 10px 0 0;
    font-size: 14px;
    display: none;
}
.tm-form-feedback.ok {
    display: block;
    color: #7fd49a;
}
.tm-form-feedback.ko {
    display: block;
    color: #e88989;
}
/* Pagina privacy: il tema azzera i puntini delle liste, qui servono */
.tm-privacy .tm-privacy-list {
    list-style: disc;
    padding-left: 24px;
    margin-bottom: 16px;
}
.tm-privacy .tm-privacy-list li {
    margin-bottom: 6px;
}
/* La pillola del menu non deve stare incollata al logo: menu,
   telefono e PRENOTA si allineano a destra con lo stesso respiro
   di 20px tra i box (come il gap interno di .header-right), e tutto
   lo spazio libero resta tra logo e menu. */
@media (min-width: 1200px) {
    .header-main .mean__menu-wrapper {
        margin-inline-start: auto;
        margin-inline-end: 20px;
    }
}

/* Anti-spam: campo trappola (honeypot) fuori schermo, invisibile agli utenti */
.tm-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* ---- Cookie banner (vanilla-cookieconsent) - colori del brand ---- */
#cc-main {
    --cc-font-family: inherit;
    --cc-btn-primary-bg: #AA8453;
    --cc-btn-primary-border-color: #AA8453;
    --cc-btn-primary-hover-bg: #1C1C1C;
    --cc-btn-primary-hover-border-color: #1C1C1C;
    --cc-btn-secondary-bg: #f1ece4;
    --cc-btn-secondary-border-color: #f1ece4;
    --cc-btn-secondary-hover-bg: #e3dacb;
    --cc-btn-secondary-hover-border-color: #e3dacb;
    --cc-toggle-on-bg: #AA8453;
    --cc-link-color: #AA8453;
    --cc-modal-border-radius: 6px;
    --cc-btn-border-radius: 4px;
    --cc-z-index: 99999;
}
#cc-main .cm__title,
#cc-main .pm__title {
    font-family: inherit;
}

/* Placeholder Google Maps in attesa del consenso */
.tm-cc-map {
    position: relative;
}
.tm-cc-map iframe:not([src]) {
    display: none;
}
.tm-cc-placeholder {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 40px 20px;
    text-align: center;
    background: #f1ece4;
    border: 1px solid #e3dacb;
}
.tm-cc-placeholder p {
    max-width: 520px;
    margin: 0;
    color: #1C1C1C;
}
.tm-cc-placeholder-link {
    font-size: 14px;
    text-decoration: underline;
    color: #AA8453;
}

/* Campi form: il tema mette "text-transform: capitalize" su input e
   textarea (main.css 1808/7648) e ogni parola scritta dall'utente diventa
   maiuscola. Disattivato su tutti i campi del sito. */
input,
textarea,
select,
input::placeholder,
textarea::placeholder {
    text-transform: none !important;
}