/* ==========================================================================
   custom.css — kwtemplate / Residenza Avio
   Caricato per ultimo fra i fogli del template (asset "template.custom",
   index.php). Organizzazione: prima le regole globali, poi gli override per
   breakpoint, poi un blocco per ogni sezione del redesign, ognuno racchiuso
   tra i marcatori INIZIO/FINE e scopato sul proprio id.
   ========================================================================== */


/* ==========================================================================
   BRAND KIT — token del progetto
   Unica fonte per palette e scala dei testi piccoli. Cambiare un valore qui
   lo cambia in tutto il sito, anche nei CSS dei moduli: var() si risolve al
   calcolo del valore, non al parsing, quindi funziona pure nei fogli caricati
   dopo questo.
   NON duplica ciò che governi da backend: dimensioni e pesi di h1-h6, base
   18px, font e interlinea stanno nei parametri Tipografia del template.
   Le dimensioni sono in em, quindi restano relative alla base impostata lì.
   ========================================================================== */
:root {
    /* Palette */
    --kw-scuro: #2E322D;
    --kw-salvia: #6F7669;
    --kw-oro: #A98A62;
    --kw-testo: #5F635C;
    --kw-testo-tenue: #6A6E67;
    --kw-grigio: #9A9E97;

    /* Su fondo scuro */
    --kw-filo-chiaro: rgba(255, 255, 255, .13);
    --kw-testo-su-scuro: rgba(255, 255, 255, .78);

    /* Scala dei testi piccoli (relativa ai 18px di #art-main) */
    --kw-size-occhiello: .528em; /* 9.5px */
    --kw-size-mini: .694em; /* 12.5px */
    --kw-size-link: .778em; /* 14px */
    --kw-size-piccolo: .806em; /* 14.5px */
    --kw-size-corpo: .917em; /* 16.5px */

    /* Occhiello: valori unificati, prima divergevano fra sezioni */
    --kw-tracking-occhiello: .32em;
    --kw-occhiello-gap: 20px;
}

h2.carosello-titolo {
    font-size: 2em;
    line-height: 1.12;
    text-wrap: pretty;
}

.art-captcha {
    display: none;
}

.plant-content .plant-gallery {
    margin: 30px 0;
}

.sezione-contatti {
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

@media (min-width: 992px) {
    .sezione-contatti {
        --bs-gutter-x: 76px;
    }
}

.sezione-contatti p {
    font-size: var(--kw-size-corpo);
}

.kw_occhiello, p.kw_occhiello {
    margin: 0 0 var(--kw-occhiello-gap);
    font-size: var(--kw-size-occhiello);
    font-weight: 500;
    letter-spacing: var(--kw-tracking-occhiello);
    text-transform: uppercase;
    color: var(--kw-oro);
}

.sezione-contatti .kw_occhiello {
    margin-bottom: 5px;
}

.sezione-contatti .modulo-mappa {
    height: 250px;
}

.sezione-contatti .kw-contatti__claim {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: var(--kw-salvia);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   BOTTONI

   I colori passano da quattro custom property invece di essere scritti nelle
   regole: le varianti si limitano a ridefinirle e non devono più competere in
   specificità con la regola di hover. Prima .art-button--chiaro:hover (0,2,0)
   perdeva contro a.art-button:hover (0,2,1) e il bottone bianco su fondo scuro
   diventava in hover dello stesso colore della fascia, sparendo.

   Le dichiarazioni dei token stanno su selettori a una classe, così una
   variante più in basso nel file può sovrascriverle; l'uso resta nella regola
   ad alta specificità, che serve a vincere sul compilato del template
   (a.art-button { font-size: 18px; padding: 10px 30px }).
   -------------------------------------------------------------------------- */
.art-button {
    --kw-button-bg: var(--kw-salvia);
    --kw-button-fg: #ffffff;
    --kw-button-bg-hover: var(--kw-scuro);
    --kw-button-fg-hover: #ffffff;
    --kw-button-border: 0;
}

/* Contorno, su fondo chiaro */
.art-button--vuoto {
    --kw-button-bg: transparent;
    --kw-button-fg: var(--kw-scuro);
    --kw-button-bg-hover: var(--kw-scuro);
    --kw-button-fg-hover: #ffffff;
    --kw-button-border: 1px solid rgba(46, 50, 45, .25);
}

/* Pieno chiaro, per i fondi scuri dove il salvia non stacca */
.art-button--chiaro {
    --kw-button-bg: #ffffff;
    --kw-button-fg: var(--kw-scuro);
    --kw-button-bg-hover: #F1EFE9;
    --kw-button-fg-hover: var(--kw-scuro);
}

/* La lista comprende i selettori con .art-postcontent perché lo SCSS del
   template compila .art-postcontent a.art-button:visited { color: #ffffff } e
   .art-postcontent a.art-button:hover { color: #e6e6e6 }, entrambi a (0,3,1):
   senza pareggiare quella specificità il testo del bottone chiaro restava
   bianco su bianco. */
.art-postcontent a.art-button, .art-postcontent a.art-button:link, .art-postcontent a.art-button:visited,
a.art-button, a.art-button:link, a:link.art-button:link, body a.art-button:link, a.art-button:visited, body a.art-button:visited, input.art-button, button.art-button {
    padding: 17px;
    border: var(--kw-button-border, 0);
    border-radius: 0;
    background-color: var(--kw-button-bg);
    color: var(--kw-button-fg);
    font-size: .667em;
    font-weight: 300;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
}

.art-postcontent a.art-button:hover, .art-postcontent a.art-button:focus, .art-postcontent a.art-button:visited:hover,
.art-button.hover, .art-button:hover, .art-button:focus, a.art-button.hover, a.art-button:hover, a.art-button:focus, a.art-button:visited:hover {
    background-color: var(--kw-button-bg-hover);
    color: var(--kw-button-fg-hover);
}

/* ==========================================================================
   FORM — stile unico per tutte le form del sito
   Le regole erano nate scopate sulla sezione "prenota"; qui valgono per ogni
   form (contatti, home, e quelle future). custom.css è caricato dopo
   bootstrap.css, quindi vince a pari specificità senza !important.
   Nota: il CSS di com_kw_contact viene caricato DOPO e stila gli stati
   .invalid con specificità più alta: è corretto, gli errori di validazione
   devono poter sovrascrivere il bordo normale.
   ========================================================================== */
.form-control {
    padding: 15px 16px;
    border: 1px solid rgba(46, 50, 45, .18);
    border-radius: 0;
    font-size: var(--kw-size-piccolo); /* 14.5px con base 18px */
    font-weight: 300;
    color: var(--kw-scuro);
    background-color: #ffffff;
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--kw-salvia);
    box-shadow: none;
}

.form-control::placeholder {
    color: var(--kw-grigio);
    opacity: 1;
}

textarea.form-control {
    min-height: 92px;
    resize: vertical;
}

.form-label {
    margin-bottom: 12px;
    font-size: var(--kw-size-link); /* 14px con base 18px */
    font-weight: 300;
    color: var(--kw-scuro);
}

/* Checkbox e radio: spaziatura a flex/gap invece del padding-left di Bootstrap */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
}

.form-check-input {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 3px 0 0;
    border: 1px solid rgba(46, 50, 45, .35);
    border-radius: 0;
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--kw-salvia);
    border-color: var(--kw-salvia);
}

.form-check-label {
    font-size: var(--kw-size-mini); /* 12.5px con base 18px */
    font-weight: 300;
    line-height: 1.6;
    color: var(--kw-testo-tenue);
}

.form-check-label a {
    color: var(--kw-salvia);
    text-decoration: underline;
}

/* Gruppo di checkbox compatto su griglia.
   Serve la classe kw-unita-grid nel campo "Classe input" del form builder:
   il componente la stampa sul contenitore che avvolge le .form-check.
   Il gap verticale resta a carico del .mb-2 che il componente mette su ogni
   voce (utility Bootstrap con !important, inutile combatterla). */
.kw-unita-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.kw-unita-grid .form-check-label {
    font-size: .75em; /* 13.5px con base 18px */
    color: var(--kw-scuro);
}

@media (min-width: 576px) {
    .kw-unita-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .kw-unita-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Il captcha invisibile non deve lasciare spazio vuoto */
.g-recaptcha {
    margin: 0;
}


/* --------------------------------------------------------------------------
   Header e menu
   -------------------------------------------------------------------------- */
p {
    line-height: 1.72;
    font-weight: 300;
    color: var(--kw-testo);
    text-wrap: pretty;
}

a.nav-link {
    font-size: 16px;
}

.menu-white header.container-header {
    position: absolute;
    top: 0;
    width: 100%;
}

.menu-white .menu-bootstrap5 .nav-link,
.menu-white .menu-bootstrap5 .nav-link:hover,
.menu-white .menu-bootstrap5 .nav-link.active {
    color: #fff;
}

.menu-white .menu-bootstrap5 a.nav-link::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 14px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .3s ease;
    transform-origin: center;
}

.container-header .mod-menu > li::after {
    content: none;
}

.menu-white .menu-bootstrap5 a.nav-link:hover::after {
    transform: scaleX(1);
}

.nav-sticky-wrapper .art-nav {
    opacity: 1;
}

.nav-sticky-wrapper.nav-sticky .art-nav {
    background-color: #fff;
}

.nav-sticky-wrapper.nav-sticky .menu-bootstrap5 .mod-menu_bootstrap5 .nav-link {
    color: #000;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    background-color: #fff !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '·';
}

.art-immobili-category .art-immobili-occhiello {
    margin: 0 0 var(--kw-occhiello-gap);
    font-size: var(--kw-size-occhiello);
    font-weight: 500;
    letter-spacing: var(--kw-tracking-occhiello);
    text-transform: uppercase;
    color: var(--kw-oro);
}

.art-immobili-category p {
    margin: 0;
    font-size: var(--kw-size-corpo);
}

.art-immobili-category h1 {
    margin: 0;
    text-wrap: pretty;
}

.art-immobili-category {
    padding: 32px 0 24px;
}

@media (min-width: 768px) {
    .art-immobili-category {
        padding: 48px 0 36px;
    }
}

@media (min-width: 992px) {
    .art-immobili-category {
        padding: 76px 0 56px;
    }

    /* Il design ha 70px fra le colonne. Non li faccio con --bs-gutter-x perché
       qui il genitore è un .container con soli 12px di padding: una gutter da
       70px darebbe margini negativi di 35px e il contenuto sborderebbe di 23px
       per lato. Uso invece il padding della seconda colonna: 24px di gutter
       standard + 46px = i 70px del design, senza rischio di overflow. */
    .art-immobili-category__intro {
        padding-left: 46px;
    }
}

/* ==========================================================================
   COMPONENTI CONDIVISI immobile
   Chip di stato e icona zoom: usati dalle card in home (mod_kw_service), dalla
   tabella in "Scegli la tua casa" e dalla testata del dettaglio. Stavano nei
   CSS dei due layout, che però non sono caricati sulla pagina di dettaglio: da
   qui valgono per tutti e tre. Il posizionamento resta ai contesti.
   ========================================================================== */
.art-immobile-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: .583em; /* 10.5px con base 18px */
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.art-immobile-chip--disponibile {
    background-color: var(--kw-salvia);
    color: #fff;
}

.art-immobile-chip--opzionata {
    background-color: var(--kw-oro);
    color: #fff;
}

.art-immobile-chip--venduta {
    background-color: #E4E2DD;
    color: #8A8E86;
}

/* Sempre visibile, non solo in hover: su touch l'hover non esiste ed è proprio
   lì che l'indizio serve. */
.art-immobile-zoom {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(46, 50, 45, .55);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    transition: background-color .2s;
}

a:hover > .art-immobile-zoom,
a:focus > .art-immobile-zoom {
    background-color: var(--kw-scuro);
}

/* Perché la lente si posizioni serve un antenato posizionato: i link delle
   piantine nel dettaglio non ce l'avevano. */
.plant-gallery a {
    display: block;
    position: relative;
    line-height: 0;
    cursor: zoom-in;
}

/* ==========================================================================
   GALLERIA IMMAGINI — mod_images, layout "default" con Slick
   Solo le differenze di design rispetto alla vestizione di base del modulo
   (modules/mod_images/css/default.css), che resta autosufficiente con colori
   neutri. Qui i colori del brand.

   IMPORTANTE — custom.css è caricato PRIMA del CSS del modulo, quindi a pari
   specificità perderebbe. Per questo i selettori aggiungono un livello con
   .art-gallery-images, il contenitore che il modulo stampa attorno al layout:
   così il design vince senza !important. Se togli quel livello, la vestizione
   di base torna a prevalere.
   ========================================================================== */
/* Colori della navigazione, condivisi fra i due slider della pagina: la
   galleria (Slick) e il carosello delle altre unità (Owl). Sono raggruppati
   perché né Slick né Owl permettono di mettere una classe nostra sui bottoni,
   che generano a runtime. */
.art-gallery-images .art-images-slider .slick-prev,
.art-gallery-images .art-images-slider .slick-next,
.kw-unita-carousel .owl-nav button.owl-prev,
.kw-unita-carousel .owl-nav button.owl-next {
    background-color: rgba(46, 50, 45, .55);
    color: #ffffff;
    transition: background-color .2s;
}

.art-gallery-images .art-images-slider .slick-prev:hover,
.art-gallery-images .art-images-slider .slick-prev:focus,
.art-gallery-images .art-images-slider .slick-next:hover,
.art-gallery-images .art-images-slider .slick-next:focus,
.kw-unita-carousel .owl-nav button.owl-prev:hover,
.kw-unita-carousel .owl-nav button.owl-prev:focus,
.kw-unita-carousel .owl-nav button.owl-next:hover,
.kw-unita-carousel .owl-nav button.owl-next:focus {
    background-color: var(--kw-scuro);
    color: #ffffff;
}

.art-gallery-images .art-images-slider .slick-dots li button:before {
    color: var(--kw-scuro);
    opacity: .3;
}

.art-gallery-images .art-images-slider .slick-dots li.slick-active button:before {
    color: var(--kw-salvia);
    opacity: 1;
}


/* ==========================================================================
   DETTAGLIO IMMOBILE — testata (design 2c)
   Due colonne a tutta larghezza: testo con specifiche e azioni a sinistra,
   immagine estesa dell'articolo a destra. Le specifiche sono generate dai
   campi aggiuntivi valorizzati, quindi il numero di celle varia per unità.
   ========================================================================== */
.art-immobile-testata {
    background-color: #FAF9F6;
}

.art-immobile-testata__testo {
    padding: 48px 22px;
}

.art-immobile-testata__stato {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.art-immobile-testata__occhiello {
    font-size: .556em; /* 10px con base 18px */
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--kw-oro);
}

.art-immobile-testata__titolo {
    margin: 0 0 20px;
    line-height: 1.04;
    text-wrap: pretty;
}

.art-immobile-testata__intro {
    margin: 0 0 34px;
}

.art-immobile-testata__intro p {
    margin: 0;
    font-size: 1.056em; /* 19px con base 18px */
    line-height: 1.62;
    color: #4A4E48;
}

/* gap 1px: i filetti fra le celle sono lo sfondo della sezione che traspare */
.art-immobile-specifiche {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 34px;
}

.art-immobile-specifica {
    padding: 20px 22px;
    background-color: #F1EFE9;
}

.art-immobile-specifica__etichetta {
    margin-bottom: 8px;
    font-size: var(--kw-size-occhiello);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--kw-grigio);
}

.art-immobile-specifica__valore {
    font-size: .944em; /* 17px con base 18px */
    font-weight: 300;
    color: var(--kw-scuro);
}

.art-immobile-testata__azioni {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* I bottoni della testata non sono a tutta larghezza: si affiancano */
.art-immobile-testata__azioni .art-button {
    display: inline-block;
    width: auto;
    padding: 16px 32px;
    font-size: .639em; /* 11.5px con base 18px */
    letter-spacing: .16em;
}

.art-immobile-testata__media a {
    display: block;
    position: relative;
    line-height: 0;
    cursor: zoom-in;
    height: 100%;
}

.art-immobile-testata__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

/* Tablet */
@media (min-width: 768px) {
    .art-immobile-testata__testo {
        padding: 60px 32px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .art-immobile-testata__testo {
        padding: 76px 56px;
    }

    .art-immobile-testata__media img {
        min-height: 100%;
    }
}


/* --------------------------------------------------------------------------
   Hero full-bleed (slider home)
   -------------------------------------------------------------------------- */
.slider-home .kw-slider {
    height: 100vh;
}

.slider-home .swiper-slide-container {
    max-width: 750px;
    margin: 50px 50px 0 50px;
}

.slider-home h1 {
    font-size: 62px;
    margin: 0 0 26px;
    line-height: 1.08;
    font-weight: 200;
    letter-spacing: -.005em;
    color: #fff;
    max-width: 880px;
    text-wrap: pretty;
}

.slider-home p {
    margin: 0 0 30px 0;
    font-size: 19px;
    line-height: 1.6;
    font-weight: 300;
    color: rgba(255, 255, 255, .85);
    max-width: 600px;
    text-wrap: pretty;
}

.slider-home p.preline {
    font-size: 10px;
    letter-spacing: .34em;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.slider-home p.preline:before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--kw-oro);
    display: block;
    margin-right: 10px;
}


/* --------------------------------------------------------------------------
   Elementi di servizio (torna su, cookie, copyright, lightbox)
   -------------------------------------------------------------------------- */
#back-top {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top-link {
    background-color: #fff;
}

.back-to-top-link:hover, .back-to-top-link:focus {
    background-color: #000;
}

#kw_cookie p, #kw_cookie span, #kw_cookie a, #kw_cookie a:link, #kw_cookie a:hover, #kw_cookie a:visited, #kw_cookie button.art-button {
    font-size: 14px;
}

#kw_cookie span.infoplus a, #kw_cookie span.infoplus a:link, #kw_cookie span.infoplus a:hover, #kw_cookie span.infoplus a:visited {
    color: #fff;
}

.art-copyright {
    padding: 20px 0;
    color: #fff;
}

.art-copyright p {
    opacity: .9;
    font-size: var(--kw-size-mini);
}

.art-copyright a,
.art-copyright a:link,
.art-copyright a:hover,
.art-copyright a:visited,
.art-copyright a:active,
.art-copyright a:focus {
    color: #fff;
    font-size: inherit;
}

#modalCookieType button {
    border: 0;
}

img.pswp__img {
    background-color: #fff;
}

.modulo-mappa {
    height: 100%;
}

.kw-contact__card {
    background-color: #ffffff;
    padding: 44px;
}

.kw-contact__card .kw-contact__form-titolo {
    margin: 0 0 12px;
    font-size: 1.333em; /* 24px con base 18px */
    font-weight: 300;
    line-height: 1.3;
    color: var(--kw-scuro);
}

.kw-contact__card p {
    margin: 0 0 22px;
    font-size: var(--kw-size-corpo);
    font-weight: 300;
    line-height: 1.66;
    color: var(--kw-testo);
    text-wrap: pretty;
}

/* ==========================================================================
   Override per breakpoint (regole globali, non di sezione)
   ========================================================================== */

/* Extra extra large devices (<1400px) (1200 – 1399px) - xl - Desktop */
@media (max-width: 1399.98px) {

}

/* Extra large devices (max-width 1199.98px): (992 – 1199px) - lg - Tablet orizzontale / laptop piccolo */
@media (max-width: 1199.98px) {

}

/* Large devices (max-width 991.98px): (768 – 991px) - md - Tablet verticale */
@media (max-width: 991.98px) {

}

/* Medium devices (max-width 767.98px): (576 – 767px) - sm - Mobile grande / piccoli tablet */
@media (max-width: 767.98px) {
    .mobile-menu {
        background: #636b64 !important;
    }

    .swiper .swiper-slide-container h2, .swiper-slide h2 {
        font-size: 18px;
    }

    .swiper .swiper-button-next, .swiper .swiper-button-prev {
        display: none;
    }
}

/* Small devices (max-width 575.98px): (0 – 575px) - xs - Mobile */
@media (max-width: 575.98px) {

}


/* ==========================================================================
   INIZIO SEZIONE: sec-home-numeri
   ========================================================================== */
#sec-home-numeri {
    background-color: var(--kw-scuro);
    color: #ffffff;
}

/* Mobile (col-12 = 1 colonna): divisori orizzontali */
#sec-home-numeri .kw-numeri__item {
    padding: 24px 22px;
    border-bottom: 1px solid var(--kw-filo-chiaro);
}

#sec-home-numeri .kw-numeri__item:last-child {
    border-bottom: 0;
}

#sec-home-numeri .kw-numeri__valore {
    font-size: 1.667em; /* 30px con base 18px */
    font-weight: 200;
    line-height: 1;
    margin-bottom: 10px;
}

#sec-home-numeri .kw-numeri__etichetta {
    font-size: .639em; /* 11.5px con base 18px */
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
}

/* Tablet verticale (col-md-6 = 2 colonne): divisori a griglia 2x2 */
@media (min-width: 768px) and (max-width: 991.98px) {
    #sec-home-numeri .kw-numeri__item {
        padding: 32px 26px;
        border-bottom: 0;
    }

    #sec-home-numeri .kw-numeri__item:nth-child(odd) {
        border-right: 1px solid var(--kw-filo-chiaro);
    }

    #sec-home-numeri .kw-numeri__item:nth-child(-n+2) {
        border-bottom: 1px solid var(--kw-filo-chiaro);
    }

    #sec-home-numeri .kw-numeri__valore {
        font-size: 1.889em; /* 34px */
    }
}

/* Desktop (col-lg-3 = 4 colonne): divisori verticali */
@media (min-width: 992px) {
    #sec-home-numeri .kw-numeri__item {
        padding: 36px 30px;
        border-bottom: 0;
        border-right: 1px solid var(--kw-filo-chiaro);
    }

    #sec-home-numeri .kw-numeri__item:last-child {
        border-right: 0;
    }

    #sec-home-numeri .kw-numeri__valore {
        font-size: 2.111em; /* 38px */
    }
}

/* ===== FINE SEZIONE: sec-home-numeri ===== */


/* ==========================================================================
   INIZIO SEZIONE: sec-home-progetto
   ========================================================================== */
#sec-home-progetto .kw-progetto__intro {
    --bs-gutter-x: 70px;
    --bs-gutter-y: 28px;
    margin-bottom: 44px;
}

#sec-home-progetto .kw-progetto__occhiello {
    margin: 0 0 var(--kw-occhiello-gap);
    font-size: var(--kw-size-occhiello); /* 9.5px con base 18px */
    font-weight: 500;
    letter-spacing: var(--kw-tracking-occhiello);
    text-transform: uppercase;
    color: var(--kw-oro);
}

#sec-home-progetto .kw-progetto__titolo {
    margin: 0;
    text-wrap: pretty;
}

#sec-home-progetto .kw-progetto__testo {
    margin: 0;
    line-height: 1.72;
    font-weight: 300;
    color: var(--kw-testo);
    text-wrap: pretty;
}

#sec-home-progetto .kw-progetto__pilastri {
    --bs-gutter-x: 52px;
    --bs-gutter-y: 40px;
}

#sec-home-progetto .kw-progetto__pilastro {
    border-top: 1px solid var(--kw-scuro);
    padding-top: 24px;
}

#sec-home-progetto .kw-progetto__numero {
    margin: 0 0 16px;
    font-size: .611em; /* 11px con base 18px */
    font-weight: 400;
    letter-spacing: .2em;
    color: var(--kw-oro);
}

#sec-home-progetto .kw-progetto__pilastro-titolo {
    margin: 0 0 14px;
    text-wrap: pretty;
}

#sec-home-progetto .kw-progetto__pilastro-testo {
    margin: 0;
    font-size: .833em; /* 15px con base 18px */
    line-height: 1.7;
    font-weight: 300;
    color: var(--kw-testo);
    text-wrap: pretty;
}

/* Tablet */
@media (min-width: 768px) {
    #sec-home-progetto .kw-progetto__intro {
        margin-bottom: 56px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    #sec-home-progetto .kw-progetto__intro {
        margin-bottom: 66px;
    }
}

/* ===== FINE SEZIONE: sec-home-progetto ===== */


/* ==========================================================================
   INIZIO SEZIONE: sec-home-posizione
   ========================================================================== */
#sec-home-posizione {
    background-color: var(--kw-scuro);
    color: #ffffff;
}

#sec-home-posizione .kw-posizione__testo {
    padding: 56px 22px;
}

#sec-home-posizione .kw-posizione__occhiello {
    margin: 0 0 var(--kw-occhiello-gap);
    font-size: var(--kw-size-occhiello); /* 9.5px con base 18px */
    font-weight: 500;
    letter-spacing: var(--kw-tracking-occhiello);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

#sec-home-posizione .kw-posizione__titolo {
    margin: 0 0 24px;
    color: inherit;
    text-wrap: pretty;
}

#sec-home-posizione .kw-posizione__intro {
    margin: 0 0 40px;
    font-size: var(--kw-size-corpo); /* 16.5px con base 18px */
    font-weight: 300;
    line-height: 1.74;
    color: var(--kw-testo-su-scuro);
    text-wrap: pretty;
}

#sec-home-posizione .kw-posizione__distanze {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sec-home-posizione .kw-posizione__distanza {
    display: flex;
    align-items: baseline;
    gap: 22px;
    padding: 19px 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

#sec-home-posizione .kw-posizione__valore {
    flex: 0 0 auto;
    min-width: 92px;
    font-size: 1.389em; /* 25px con base 18px */
    font-weight: 200;
    line-height: 1;
}

#sec-home-posizione .kw-posizione__etichetta {
    font-size: var(--kw-size-piccolo); /* 14.5px con base 18px */
    font-weight: 300;
    line-height: 1.55;
    color: var(--kw-testo-su-scuro);
}

/* La mappa arriva dal modulo 143: chrome article + wrapper .modulo-mappa del
   layout "mappa". Quel layout imposta l'altezza dell'iframe via jQuery come
   stile inline (parametro Altezza mappa = 100%), che vince sul foglio di stile:
   perciò l'altezza si governa qui sulla colonna e tutta la catena dei wrapper
   deve averla definita, altrimenti il 100% inline non ha su cosa risolversi. */
#sec-home-posizione .kw-posizione__mappa {
    height: 340px;
}

#sec-home-posizione .kw-posizione__mappa > *,
#sec-home-posizione .kw-posizione__mappa .section-container,
#sec-home-posizione .kw-posizione__mappa .kw-module-content,
#sec-home-posizione .kw-posizione__mappa .modulo-mappa {
    height: 100%;
    margin: 0;
}

#sec-home-posizione .kw-posizione__mappa iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Tablet */
@media (min-width: 768px) {
    #sec-home-posizione .kw-posizione__testo {
        padding: 72px 32px;
    }

    #sec-home-posizione .kw-posizione__mappa {
        height: 440px;
    }
}

/* Desktop: la mappa riempie in altezza la colonna del testo */
@media (min-width: 992px) {
    #sec-home-posizione .kw-posizione__testo {
        padding: 96px 56px;
    }

    #sec-home-posizione .kw-posizione__mappa {
        position: relative;
        height: auto;
        min-height: 100%;
    }

    #sec-home-posizione .kw-posizione__mappa > * {
        position: absolute;
        inset: 0;
    }
}

/* ===== FINE SEZIONE: sec-home-posizione ===== */


/* ==========================================================================
   INIZIO SEZIONE: sec-home-prenota
   ========================================================================== */
#sec-home-prenota {
    padding: 56px 0;
}

#sec-home-prenota .kw-prenota__row {
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

#sec-home-prenota .kw-prenota__occhiello {
    margin: 0 0 var(--kw-occhiello-gap);
    font-size: var(--kw-size-occhiello); /* 9.5px con base 18px */
    font-weight: 500;
    letter-spacing: var(--kw-tracking-occhiello);
    text-transform: uppercase;
    color: var(--kw-oro);
}

#sec-home-prenota .kw-prenota__titolo {
    margin: 0 0 24px;
    text-wrap: pretty;
}

#sec-home-prenota .kw-prenota__intro {
    margin: 0 0 30px;
    font-size: var(--kw-size-corpo); /* 16.5px con base 18px */
    font-weight: 300;
    line-height: 1.74;
    color: var(--kw-testo);
    text-wrap: pretty;
}

/* Unico punto in cui dichiaro un font-family: è il font secondario
   (Cormorant Garamond, caricato dal parametro "Altri font"), non quello
   ereditato dal template. */
#sec-home-prenota .kw-prenota__claim {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.167em; /* 21px con base 18px */
    line-height: 1.5;
    color: var(--kw-salvia);
    text-wrap: pretty;
}

/* --- Card del form ------------------------------------------------------- */
#sec-home-prenota .kw-prenota__card {
    background-color: #ffffff;
    padding: 30px 22px;
}

#sec-home-prenota .kw-prenota__form-titolo {
    margin: 0 0 22px;
    font-size: 1.333em; /* 24px con base 18px */
    font-weight: 300;
    line-height: 1.3;
    color: var(--kw-scuro);
}

/* La row interna del form non deve rientrare rispetto al padding della card */
#sec-home-prenota .kw-prenota__card .row {
   /* --bs-gutter-x: 0; */
}

/* Variante a tutta larghezza: unica differenza rispetto al bottone globale.
   La classe modificatrice è riusabile; il secondo selettore serve perché il
   markup del bottone arriva dal componente com_kw_contact e non possiamo
   aggiungergli una classe per istanza. */
.art-button--full,
#sec-home-prenota .kw-prenota__card .art-button {
    display: block;
    width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
    #sec-home-prenota {
        padding: 72px 0;
    }

    #sec-home-prenota .kw-prenota__card {
        padding: 44px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    #sec-home-prenota {
        padding: 96px 0;
    }

    #sec-home-prenota .kw-prenota__row {
        --bs-gutter-x: 76px;
    }
}

/* ===== FINE SEZIONE: sec-home-prenota ===== */


/* ==========================================================================
   INIZIO SEZIONE: sec-footer
   Quattro colonne: logo + sede, iniziativa, figure tecniche, link del sito.
   Barra copyright separata da un filo in basso.
   ========================================================================== */
#sec-footer {
    color: #ffffff;
    padding: 48px 0;
    font-size: .722em; /* 13px con base 18px */
    font-weight: 300;
    line-height: 1.85;
}

#sec-footer .kw-footer__row {
    --bs-gutter-x: 36px;
    --bs-gutter-y: 36px;
}

#sec-footer .kw-footer__logo {
    height: 70px;
    width: auto;
    margin-bottom: 16px;
}

#sec-footer .kw-footer__sede {
    margin: 0;
    opacity: .85;
}

#sec-footer .kw-footer__occhiello {
    margin: 0 0 var(--kw-occhiello-gap);
    font-size: var(--kw-size-mini); /* 9px sui 13px della sezione */
    font-weight: 500;
    letter-spacing: var(--kw-tracking-occhiello);
    text-transform: uppercase;
    opacity: .7;
}

#sec-footer .kw-footer__blocco {
    margin: 0;
    opacity: .9;
}

#sec-footer .kw-footer__blocco + .kw-footer__blocco {
    margin-top: 18px;
}

/* Sotto-etichetta dei ruoli tecnici: si distingue dal blocco principale senza
   competere con l'occhiello della colonna */
#sec-footer .kw-footer__ruolo {
    display: block;
    opacity: .62;
}

/* font-size: inherit è necessario, non ridondante: il template compila
   .art-footer a { font-size: 18px } e la sezione vive dentro .art-footer,
   quindi senza questo i link risulterebbero più grandi del testo attorno. */
#sec-footer .kw-footer__link {
    display: block;
    font-size: inherit;
    color: #ffffff;
    text-decoration: none;
    opacity: .9;
}

#sec-footer .kw-footer__link:hover,
#sec-footer .kw-footer__link:focus {
    color: #ffffff;
    opacity: 1;
    text-decoration: underline;
}

#sec-footer .kw-footer__social {
    display: flex;
    gap: 14px;
    margin-top: 12px;
}

#sec-footer .kw-footer__social a {
    color: #ffffff;
    opacity: .85;
    font-size: 1.077em; /* 14px sui 13px della sezione */
}

#sec-footer .kw-footer__social a:hover,
#sec-footer .kw-footer__social a:focus {
    opacity: 1;
}

#sec-footer .kw-footer__copyright {
    margin: 32px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: .885em; /* 11.5px sui 13px della sezione */
    opacity: .78;
}

/* Tablet */
@media (min-width: 768px) {
    #sec-footer {
        padding: 56px 0;
    }
}

/* Desktop */
@media (min-width: 992px) {
    #sec-footer {
        padding: 64px 0;
    }

    #sec-footer .kw-footer__copyright {
        margin-top: 44px;
    }
}

/* ===== FINE SEZIONE: sec-footer ===== */


/* ==========================================================================
   INIZIO SEZIONE: sec-home-loghi
   ========================================================================== */
#sec-home-loghi {
    padding: 36px 0;
}

#sec-home-loghi .kw-loghi__row {
    --bs-gutter-x: 26px;
    --bs-gutter-y: 26px;
}

#sec-home-loghi .kw-loghi__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
}

#sec-home-loghi .kw-loghi__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 36px;
    object-fit: contain;
}

/* Tablet */
@media (min-width: 768px) {
    #sec-home-loghi {
        padding: 44px 0;
    }

    #sec-home-loghi .kw-loghi__logo {
        max-height: 80px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    #sec-home-loghi {
        padding: 52px 0;
    }
}

/* ===== FINE SEZIONE: sec-home-loghi ===== */


/* ==========================================================================
   INIZIO SEZIONE: sec-dotazioni  (design 2c — Capitolato e personalizzazioni)
   Testo a sinistra, elenco delle dotazioni su due colonne a destra.
   Riusa: .kw_occhiello per l'occhiello, la regola globale su p per peso e
   interlinea, i token della scala testi. Qui solo ciò che è specifico.
   Lo sfondo #F1EFE9 va impostato nel chrome del modulo, così copre a tutta
   larghezza mentre il contenuto resta dentro il container.
   ========================================================================== */
#sec-dotazioni {
    padding: 48px 0;
}

/* Il design usa un h2 da 36px, più contenuto dei 42px di siteH2: è una sezione
   subordinata in pagina di dettaglio. Togliendo questa riga torna a ereditare. */
#sec-dotazioni .kw-dotazioni__titolo {
    margin: 0;
    font-size: 2em; /* 36px con base 18px */
    line-height: 1.12;
    text-wrap: pretty;
}

#sec-dotazioni .kw-dotazioni__intro {
    margin: 22px 0 0;
    font-size: var(--kw-size-piccolo);
    line-height: 1.7;
}

/* Elenco: due colonne con filetto sopra ogni voce. Su mobile diventa una. */
#sec-dotazioni .kw-dotazioni {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#sec-dotazioni .kw-dotazioni__voce {
    padding: 18px 0;
    border-top: 1px solid rgba(46, 50, 45, .14);
    font-size: var(--kw-size-piccolo);
    font-weight: 300;
    line-height: 1.5;
    color: #3E423C; /* fra --kw-scuro e --kw-testo, come nel design */
}

/* Tablet */
@media (min-width: 768px) {
    #sec-dotazioni {
        padding: 64px 0;
    }

    #sec-dotazioni .kw-dotazioni {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop */
@media (min-width: 992px) {
    #sec-dotazioni {
        padding: 88px 0;
    }

    /* Il design ha 70px fra le due colonne. Non uso --bs-gutter-x perché il
       genitore è un .container con 12px di padding: una gutter da 70px darebbe
       margini negativi di 35px e il contenuto sborderebbe di 23px per lato.
       24px di gutter standard + 46px di padding = i 70px del design. */
    #sec-dotazioni .kw-dotazioni__elenco {
        padding-left: 46px;
    }
}
/* ===== FINE SEZIONE: sec-dotazioni ===== */


/* ==========================================================================
   INIZIO SEZIONE: art-immobile-cta-fascia  (design 2c)
   Fascia scura di richiesta informazioni in coda alla scheda immobile. È resa
   dal layout html/com_content/article/immobile.php, non da un modulo, perché il
   titolo prende il nome dell'unità.
   Riusa: la regola globale su p, .art-button con la variante chiara.
   ========================================================================== */
.art-immobile-cta-fascia {
    padding: 48px 0;
    background-color: var(--kw-scuro);
    color: #ffffff;
}

.art-immobile-cta-fascia .kw-cta__row {
    --bs-gutter-y: 28px;
}

.art-immobile-cta-fascia .kw-cta__titolo {
    margin: 0 0 16px;
    font-size: 1.889em; /* 34px con base 18px */
    line-height: 1.14;
    color: inherit; /* eredita il bianco della fascia, dimensione e peso da siteH2 */
    text-wrap: pretty;
}

.art-immobile-cta-fascia .kw-cta__testo {
    margin: 0;
    font-size: var(--kw-size-corpo);
    line-height: 1.7;
    color: var(--kw-testo-su-scuro);
}

/* Tablet */
@media (min-width: 768px) {
    .art-immobile-cta-fascia {
        padding: 60px 0;
    }
}

/* Desktop: bottone allineato a destra, come nel design */
@media (min-width: 992px) {
    .art-immobile-cta-fascia {
        padding: 76px 0;
    }

    .art-immobile-cta-fascia .kw-cta__azione {
        display: flex;
        justify-content: flex-end;
    }
}
/* ===== FINE SEZIONE: art-immobile-cta-fascia ===== */


/* ==========================================================================
   INIZIO SEZIONE: kw-unita-carousel  (design 2c — Altre unità disponibili)
   Card unità dentro mod_kw_owl_carousel, layout "immobili". Il modulo non ha un
   foglio per questo layout: la vestizione sta qui, come per la galleria.
   L'intestazione della sezione arriva dal titolo del modulo (chrome), quindi
   qui non c'è markup per quella.
   ========================================================================== */
.kw-unita-carousel .kw-unita-card {
    display: block;
    height: 100%;
    background-color: #ffffff;
    text-decoration: none;
}

.kw-unita-carousel .kw-unita-card__media {
    display: block;
    line-height: 0;
}

.kw-unita-carousel .kw-unita-card__media img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.kw-unita-carousel .kw-unita-card__testo {
    display: block;
    padding: 24px 26px 28px;
}

.kw-unita-carousel .kw-unita-card__tag {
    display: block;
    margin-bottom: 10px;
    font-size: var(--kw-size-occhiello);
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--kw-oro);
}

.kw-unita-carousel .kw-unita-card__titolo {
    display: block;
    margin-bottom: 8px;
    font-size: 1.222em; /* 22px con base 18px */
    font-weight: 300;
    line-height: 1.26;
    color: var(--kw-scuro);
}

.kw-unita-carousel .kw-unita-card__descrizione,
.kw-unita-carousel .kw-unita-card__descrizione p {
    display: block;
    margin: 0;
    font-size: var(--kw-size-link);
    font-weight: 300;
    line-height: 1.6;
    color: var(--kw-testo);
}

/* Le card della stessa riga restano alte uguale */
.kw-unita-carousel .owl-stage {
    display: flex;
}

.kw-unita-carousel .owl-item {
    display: flex;
}

.kw-unita-carousel .owl-item > .item {
    display: flex;
    width: 100%;
}

/* Navigazione: stessa forma della galleria — chip 40x40 ai lati, sovrapposto
   alla fascia immagine (alta 210px, quindi centrato a 105px). Owl la costruisce
   a runtime e il suo tema la mette in flusso sotto il carosello, con un chip
   grigio: qui viene riportata ai lati. La geometria sta qui e non in un foglio
   del modulo perché per questo layout il modulo non ne ha uno. */
.kw-unita-carousel .owl-nav {
    margin: 0;
}

.kw-unita-carousel .owl-nav button.owl-prev,
.kw-unita-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 105px;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    font-size: 18px;
    line-height: 1;
}

.kw-unita-carousel .owl-nav button.owl-prev {
    left: 10px;
}

.kw-unita-carousel .owl-nav button.owl-next {
    right: 10px;
}

.kw-unita-carousel .owl-nav button.disabled {
    opacity: .35;
}

/* ===== FINE SEZIONE: kw-unita-carousel ===== */

/* Extra extra large devices (<1400px) (1200 – 1399px) - xl - Desktop */
@media (max-width: 1399.98px) {

}

/* Extra large devices (max-width 1199.98px): (992 – 1199px) - lg - Tablet orizzontale / laptop piccolo */
@media (max-width: 1199.98px) {

}


/* Large devices (max-width 991.98px): (768 – 991px) - md - Tablet verticale */
@media (max-width: 991.98px) {
    nav button.btn-close {
        background: transparent;
    }
    .menu-white .menu-bootstrap5 .nav-link, .menu-white .menu-bootstrap5 .nav-link:hover, .menu-white .menu-bootstrap5 .nav-link.active {
        color: #2e322d;
    }
    .container-header .mod-menu > li.active > a, .container-header .mod-menu > li.active > span, .container-header .mod-menu > li > a:hover {
        text-decoration: none;
    }
    .menu-white .menu-bootstrap5 a.nav-link::after {
        left: 0;
        right: 0;
    }
}

/* Medium devices (max-width 767.98px): (576 – 767px) - sm - Mobile grande / piccoli tablet */
@media (max-width: 767.98px) {

}


/* Small devices (max-width 575.98px): (0 – 575px) - xs - Mobile */
@media (max-width: 575.98px) {

}