/* ==========================================================================
   Residenze Spizzico – homepage Vitale
   Versione 1.0.9
   Colori:  blu #0C437C  ·  testo #1E2831
   ========================================================================== */

:root {
  --rsv-blu: #0C437C;
  --rsv-testo: #1E2831;
}


/* ==========================================================================
   HERO (section baa26cb, video 8a98c28)
   ========================================================================== */

/* overlay blu sfumato: più coprente in alto, più leggero in basso */
.elementor-element.elementor-element-8a98c28::before {
  background: linear-gradient(
    180deg,
    rgba(12, 67, 124, .75) 0%,
    rgba(12, 67, 124, .55) 50%,
    rgba(12, 67, 124, .30) 100%
  ) !important;
}


/* ==========================================================================
   IL PROGETTO – "Due edifici, un'unica visione" (container 82a9014)
   ========================================================================== */

/* testi Roboto Light, colore scuro */
.elementor-element-ca8de5f p,
.elementor-element-2116765 p {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  color: var(--rsv-testo);
}
.elementor-element-ca8de5f p strong {
  font-weight: 700;
  color: var(--rsv-testo);
}

/* sottotitoli in blu */
.elementor-element-2116765 p strong {
  font-weight: 700;
  color: var(--rsv-blu);
}

/* due box da 550px con 50px di spazio */
@media (min-width: 1025px) {
  .elementor-element.elementor-element-82a9014 > .e-con-inner {
    gap: 50px !important;
    --gap: 0px 50px;
  }
  .elementor-element.elementor-element-dd4817c,
  .elementor-element.elementor-element-f6d8f06 {
    --width: 550px !important;
    width: 550px !important;
    max-width: 550px;
    flex: 0 0 550px;
  }
}


/* ==========================================================================
   SLIDER "Due edifici, un'unica visione" (Image Carousel d16bf8a)
   + stesso slider in Trilocali / Monolocali-Bilocali-2 (82b495a)
   ========================================================================== */

/* 1. Slider dentro la colonna: niente slide che escono ai lati */
.elementor-element-d16bf8a .elementor-image-carousel-wrapper.swiper,
.elementor-element-82b495a .elementor-image-carousel-wrapper.swiper {
  overflow: hidden;
}

/* 2. Immagini a riempimento senza deformazioni */
.elementor-element-d16bf8a .swiper-slide-image,
.elementor-element-82b495a .swiper-slide-image {
  width: 100%;
  aspect-ratio: 1320 / 600;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 3. Frecce: quadrato bianco con freccia lunga scura */
.elementor-element-d16bf8a .elementor-swiper-button,
.elementor-element-82b495a .elementor-swiper-button {
  width: 34px;
  height: 34px;
  background: #fff;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: background-color .2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.elementor-element-d16bf8a .elementor-swiper-button-prev,
.elementor-element-82b495a .elementor-swiper-button-prev { left: 20px; }
.elementor-element-d16bf8a .elementor-swiper-button-next,
.elementor-element-82b495a .elementor-swiper-button-next { right: 20px; }

/* nasconde i chevron di Elementor e disegna la freccia lunga */
.elementor-element-d16bf8a .elementor-swiper-button svg,
.elementor-element-82b495a .elementor-swiper-button svg { display: none; }
.elementor-element-d16bf8a .elementor-swiper-button::before,
.elementor-element-82b495a .elementor-swiper-button::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: #1d1d1b;
  -webkit-mask: var(--freccia) center / contain no-repeat;
          mask: var(--freccia) center / contain no-repeat;
}
.elementor-element-d16bf8a .elementor-swiper-button-prev,
.elementor-element-82b495a .elementor-swiper-button-prev {
  --freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E");
}
.elementor-element-d16bf8a .elementor-swiper-button-next,
.elementor-element-82b495a .elementor-swiper-button-next {
  --freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
}

.elementor-element-d16bf8a .elementor-swiper-button:hover,
.elementor-element-82b495a .elementor-swiper-button:hover { background: #f2f2f2; }

@media (max-width: 767px) {
  .elementor-element-d16bf8a .elementor-swiper-button,
  .elementor-element-82b495a .elementor-swiper-button { width: 30px; height: 30px; }
  .elementor-element-d16bf8a .elementor-swiper-button-prev,
  .elementor-element-82b495a .elementor-swiper-button-prev { left: 10px; }
  .elementor-element-d16bf8a .elementor-swiper-button-next,
  .elementor-element-82b495a .elementor-swiper-button-next { right: 10px; }
}


/* ==========================================================================
   IL CONTESTO – Sant'Anna (container 02d9668 + card d39a6ea)
   ========================================================================== */

/* --- Spazio dallo slider sopra (~82px come Figma) --- */
.elementor-element-3f1d307 > .e-con-inner { padding-bottom: 0 !important; }
.elementor-element-02d9668 > .e-con-inner { padding-top: 0 !important; }

/* --- Intestazione --- */
.elementor-element-abddcef .elementor-heading-title {   /* occhiello "IL CONTESTO" */
  color: #1E2831 !important;
}
.elementor-element-e17ccc5 > .elementor-widget-container {  /* titolo */
  margin-top: 25px !important;
}
.elementor-element-e17ccc5 .elementor-heading-title {
  letter-spacing: 0;
}

/* --- Testo introduttivo --- */
.elementor-element-1fb9f2e {
  width: 100% !important;
  max-width: 620px !important;
  align-self: center;
  margin-top: 26px !important;
}
.elementor-element-1fb9f2e p {
  color: #1E2831;
  font-weight: 300;
  line-height: 28.5px;
}
.elementor-element-1fb9f2e p strong {
  color: #1E2831;
  font-weight: 700;
}

/* --- Riga delle 4 card --- */
.elementor-element-02d9668 > .e-con-inner { padding-bottom: 0 !important; }
.elementor-element-d39a6ea {
  padding-top: 27px;
  padding-bottom: 96px;
}
.elementor-element-d39a6ea > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 20px;
  align-items: stretch;
}
.elementor-element-d39a6ea .elementor-widget-icon-box {
  flex: 233 1 0;
  min-width: 0;
  width: auto;
  border-top: 1px solid #0C437C;
  padding-top: 28px;
}
.elementor-element-d39a6ea .elementor-widget-icon-box:nth-child(2) { flex-grow: 413; }
.elementor-element-d39a6ea .elementor-widget-icon-box:nth-child(4) { flex-grow: 263; }

/* icona */
.elementor-element-d39a6ea .elementor-icon-box-wrapper { gap: 13px !important; }
.elementor-element-d39a6ea .elementor-icon-box-icon { margin-bottom: 0 !important; }
.elementor-element-d39a6ea .elementor-icon {
  display: inline-flex;
  font-size: 40px;
  line-height: 1;
}
.elementor-element-d39a6ea .elementor-icon svg {
  width: 40px;
  height: 40px;
}

/* titolo card */
.elementor-element-d39a6ea .elementor-icon-box-title {
  font-size: 35px;
  line-height: 38px;
  letter-spacing: .3px;
  white-space: nowrap;
  margin: 0 0 7px !important;
}

/* descrizione card */
.elementor-element-d39a6ea .elementor-icon-box-description {
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
  color: #1E2831;
  max-width: 240px;
  margin: 0 auto;
  padding: 0 8px;
}

/* --- Tablet: 2 card per riga --- */
@media (max-width: 1024px) {
  .elementor-element-d39a6ea > .e-con-inner { flex-wrap: wrap; row-gap: 40px; }
  .elementor-element-d39a6ea .elementor-widget-icon-box,
  .elementor-element-d39a6ea .elementor-widget-icon-box:nth-child(n) { flex: 1 1 calc(50% - 10px); }
  .elementor-element-d39a6ea .elementor-icon-box-title { white-space: normal; }
}

/* --- Mobile: 1 card per riga --- */
@media (max-width: 767px) {
  .elementor-element-e17ccc5 > .elementor-widget-container { margin-top: 16px !important; }
  .elementor-element-1fb9f2e { margin-top: 18px !important; }
  .elementor-element-d39a6ea .elementor-widget-icon-box,
  .elementor-element-d39a6ea .elementor-widget-icon-box:nth-child(n) { flex-basis: 100%; }
  .elementor-element-d39a6ea { padding-bottom: 64px; }
  .elementor-element-d39a6ea .elementor-icon-box-title { font-size: 30px; line-height: 34px; }
}


/* ==========================================================================
   LE NUOVE SOLUZIONI ABITATIVE – sezione blu (container 0b38b01)
   ========================================================================== */

/* testo secondario più stretto */
.elementor-element.elementor-element-68144dd {
  width: 492px !important;
  max-width: 100% !important;
}

/* pulsante bianco */
.elementor-element-a4ce40b .sc_button {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--rsv-blu) !important;
}
.elementor-element-a4ce40b .sc_button .sc_button_title,
.elementor-element-a4ce40b .sc_button .sc_button_icon,
.elementor-element-a4ce40b .sc_button::after {
  color: var(--rsv-blu) !important;
}
.elementor-element-a4ce40b .sc_button.sc_button_decoration:hover {
  background-color: rgba(255, 255, 255, .88) !important;
}

/* Slider piccolo (Image Carousel 0cf497b) */
.elementor-element-0cf497b .elementor-image-carousel-wrapper.swiper {
  overflow: hidden;
  /* 35px di distanza tra slider e pallini + 8px di pallino */
  padding-bottom: 43px !important;
}
.elementor-element-0cf497b .swiper-pagination {
  bottom: 0 !important;
  top: auto !important;
  line-height: 0;
}

/* pallini di navigazione bianchi, visibili sul blu */
.elementor-element-0cf497b .swiper-pagination-bullet {
  background: #fff;
  opacity: .4;
}
.elementor-element-0cf497b .swiper-pagination-bullet-active {
  opacity: 1;
}


/* ==========================================================================
   GLI SPAZI – tipologie (container 4b29db0, services d75d0c8)
   ========================================================================== */

/* testo Roboto Light, colore scuro */
.elementor-element-4f7a553 p {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  color: var(--rsv-testo);
}

/* link delle card sempre visibili (il tema li mostra solo in hover) */
.elementor-element-d75d0c8 .sc_services_item .sc_services_item_more_link .link_text {
  opacity: 1 !important;
  visibility: visible !important;
  text-indent: 0 !important;
  width: auto !important;
  margin-right: 12px !important;
}
.elementor-element-d75d0c8 .sc_services_item_more_link {
  text-transform: uppercase;
}

/* hover: l'immagine sfuma nel dettaglio ravvicinato della stanza.
   Caricare le immagini di Figma nei Media e sostituire gli URL qui sotto. */
.elementor-element-d75d0c8 .post-32412 { --rsv-dettaglio: url("/wp-content/uploads/2026/10/vitale-monolocali-dettaglio.jpg"); }
.elementor-element-d75d0c8 .post-32411 { --rsv-dettaglio: url("/wp-content/uploads/2026/10/vitale-trilocali-dettaglio.jpg"); }

.elementor-element-d75d0c8 .sc_services_item_thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--rsv-dettaglio, none) center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.elementor-element-d75d0c8 .sc_services_item:hover .sc_services_item_thumb::after {
  opacity: 1;
}


/* ==========================================================================
   AVANZAMENTO LAVORI (container 6996019)
   ========================================================================== */

/* 40px tra slider e blocco di testo (10px di padding già sulla colonna dello slider) */
@media (min-width: 768px) {
  .elementor-element.elementor-element-e22755b {
    --padding-left: 30px !important;
    padding-left: 30px !important;
  }
}

/* Progress bar */
.elementor-element-b1967ef .elementor-widget-progress .elementor-title {
  display: block;
  color: var(--rsv-blu) !important;
  margin-bottom: 14px;
}
.elementor-element-b1967ef .elementor-progress-wrapper {
  margin-top: 0 !important;
  background-color: rgba(12, 67, 124, .1) !important;   /* binario: blu al 10% */
}
.elementor-element-b1967ef .elementor-progress-wrapper .elementor-progress-bar {
  background-color: #3FA9D8 !important;                 /* riempimento azzurro come Figma */
}
/* percentuale fissa a destra, sopra la fine del binario (come Figma) */
.elementor-element-b1967ef .elementor-progress-wrapper {
  position: relative !important;
}
.elementor-element-b1967ef .elementor-progress-wrapper .elementor-progress-bar {
  position: static !important;
}
.elementor-element-b1967ef .elementor-progress-percentage {
  position: absolute !important;
  top: auto !important;
  right: 0 !important;
  bottom: 100% !important;
  margin-bottom: 6px;
  line-height: 1.2 !important;
  padding: 0 !important;
  color: var(--rsv-blu) !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   BANNER "Scopri cosa rende Vitale un progetto speciale" (container df4a3e2)
   ========================================================================== */

.elementor-element.elementor-element-df4a3e2 {
  --padding-top: 61.35px !important;
  --padding-bottom: 61.35px !important;
  --padding-left: 120px !important;
  --padding-right: 120px !important;
  padding: 61.35px 120px !important;
}
@media (max-width: 1024px) {
  .elementor-element.elementor-element-df4a3e2 {
    --padding-left: 40px !important;
    --padding-right: 40px !important;
    padding: 48px 40px !important;
  }
}
@media (max-width: 767px) {
  .elementor-element.elementor-element-df4a3e2 {
    --padding-left: 20px !important;
    --padding-right: 20px !important;
    padding: 40px 20px !important;
  }
}

/* testo secondario più stretto */
.elementor-element.elementor-element-18a0afb {
  width: 437px !important;
  max-width: 100% !important;
}

/* pulsante bianco */
.elementor-element-cbb758c .sc_button {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--rsv-blu) !important;
}
.elementor-element-cbb758c .sc_button .sc_button_title,
.elementor-element-cbb758c .sc_button .sc_button_icon,
.elementor-element-cbb758c .sc_button::after {
  color: var(--rsv-blu) !important;
}
.elementor-element-cbb758c .sc_button.sc_button_decoration:hover {
  background-color: rgba(255, 255, 255, .88) !important;
}


/* ==========================================================================
   GARANZIE E QUALITÀ (container 0b9bad4) + icone (461ffb5)
   ========================================================================== */

/* box di testo da 598px, spinto a destra = più lontano dal titolo */
@media (min-width: 1025px) {
  .elementor-element.elementor-element-5caa783 {
    --align-items: flex-end;
    align-items: flex-end !important;
  }
  .elementor-element.elementor-element-6de0f36 {
    width: 598px !important;
    max-width: 100%;
  }
}

/* "Un modo più intelligente…" più in alto: via la riga vuota iniziale */
.elementor-element-6de0f36 p + p > br:first-child {
  display: none;
}
.elementor-element-6de0f36 p:not(:last-child) {
  margin-bottom: 1em;
}

/* icone: tutto in blu */
.elementor-element-461ffb5 .elementor-icon-box-title,
.elementor-element-461ffb5 .elementor-icon-box-title a,
.elementor-element-461ffb5 .elementor-icon-box-description {
  color: var(--rsv-blu) !important;
}


/* ==========================================================================
   RICHIEDI INFORMAZIONI SU VITALE (container baadd00)
   ========================================================================== */

/* occhiello in blu */
.elementor-element-4b81ac6 .elementor-heading-title {
  color: var(--rsv-blu) !important;
}

/* testo secondario più stretto */
.elementor-element.elementor-element-fe981cd {
  max-width: 520px !important;
}


/* ==========================================================================
   SLIDER STATO AVANZAMENTO LAVORI (Image Carousel 3f09b32)
   ========================================================================== */

/* 1. Slider dentro la colonna: niente slide che escono ai lati */
.elementor-element-3f09b32 .elementor-image-carousel-wrapper.swiper {
  overflow: hidden;
  padding-bottom: 0 !important;
}

/* 2. Immagini a riempimento senza deformazioni */
.elementor-element-3f09b32 .swiper-slide-image {
  width: 100%;
  aspect-ratio: 772 / 384;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 3. Frecce: quadrato bianco con freccia lunga scura */
.elementor-element-3f09b32 .elementor-swiper-button {
  top: 50% !important;
  width: 34px;
  height: 34px;
  background: #fff;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: background-color .2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.elementor-element-3f09b32 .elementor-swiper-button-prev { left: 20px; }
.elementor-element-3f09b32 .elementor-swiper-button-next { right: 20px; }

.elementor-element-3f09b32 .elementor-swiper-button svg { display: none; }
.elementor-element-3f09b32 .elementor-swiper-button::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: #1d1d1b;
  -webkit-mask: var(--freccia) center / contain no-repeat;
          mask: var(--freccia) center / contain no-repeat;
}
.elementor-element-3f09b32 .elementor-swiper-button-prev {
  --freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E");
}
.elementor-element-3f09b32 .elementor-swiper-button-next {
  --freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* niente pallini, come nel primo slider */
.elementor-element-3f09b32 .swiper-pagination { display: none; }

.elementor-element-3f09b32 .elementor-swiper-button:hover { background: #f2f2f2; }

@media (max-width: 767px) {
  .elementor-element-3f09b32 .elementor-swiper-button { width: 30px; height: 30px; }
  .elementor-element-3f09b32 .elementor-swiper-button-prev { left: 10px; }
  .elementor-element-3f09b32 .elementor-swiper-button-next { right: 10px; }
}


/* ==========================================================================
   LE PIANIMETRIE – tab Monolocali / Bilocali (widget Schede annidate)
   Aggiungere la classe "rsv-tabs" al widget: Avanzate > Classi CSS
   ========================================================================== */

/* intestazione a tutta larghezza, una linea grigia sotto */
.rsv-tabs .e-n-tabs-heading {
  gap: 0 !important;
  justify-content: stretch !important;
  border-bottom: 1px solid #D9D9D9;
  margin-bottom: 80px;
}

/* singola scheda: niente box, testo maiuscolo scuro */
.rsv-tabs .e-n-tab-title {
  flex: 1 1 0 !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 10px 22px !important;
  margin-bottom: -1px;               /* la riga attiva copre quella grigia */
  border-bottom: 3px solid transparent !important;
  box-shadow: none !important;
  transition: color .2s ease, border-color .2s ease;
}
.rsv-tabs .e-n-tab-title-text {
  font-family: "Bebas Neue", sans-serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rsv-testo) !important;
  transition: color .2s ease;
}

/* attiva e hover: testo blu + riga blu */
.rsv-tabs .e-n-tab-title[aria-selected="true"] {
  border-bottom-color: var(--rsv-blu) !important;
}
.rsv-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
.rsv-tabs .e-n-tab-title:hover .e-n-tab-title-text {
  color: var(--rsv-blu) !important;
}
.rsv-tabs .e-n-tab-title:focus-visible {
  outline: 2px solid var(--rsv-blu);
  outline-offset: -2px;
}

@media (max-width: 767px) {
  .rsv-tabs .e-n-tabs-heading { margin-bottom: 40px; }
  .rsv-tabs .e-n-tab-title { padding-bottom: 14px !important; }
  .rsv-tabs .e-n-tab-title-text { font-size: 26px; }
}


/* ==========================================================================
   HEADER PAGINE TIPOLOGIE (header 29636, sezione 2e029f03)
   Solo: Trilocali (35957), Monolocali-Bilocali-2 (35952), Monolocali-Bilocali (32412)
   ========================================================================== */

/* nuova immagine di sfondo */
:is(.postid-35957, .postid-35952, .postid-32412) .elementor-29636 .elementor-element.elementor-element-2e029f03:not(.elementor-motion-effects-element-type-background),
:is(.postid-35957, .postid-35952, .postid-32412) .elementor-29636 .elementor-element.elementor-element-2e029f03 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("img/header-tipologie.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* overlay blu al posto di quello grigio scuro */
:is(.postid-35957, .postid-35952, .postid-32412) .elementor-29636 .elementor-element.elementor-element-2e029f03 > .elementor-background-overlay {
  background: linear-gradient(
    180deg,
    rgba(12, 67, 124, .82) 0%,
    rgba(12, 67, 124, .70) 100%
  ) !important;
  opacity: 1 !important;
}

/* niente immagine in evidenza sotto l'header (stampata dal tema) */
:is(.postid-35957, .postid-35952, .postid-32412) .services_single .services_page_header {
  display: none !important;
}